[SWAP REFACTORING #2] refactor swap business logic

cypress-custom/integration/swap.test.ts

@@ -22,7 +22,7 @@ describe('Swap (custom)', () => {
     cy.get('#swap-currency-input .token-amount-input').should('be.visible')
     cy.get('#swap-currency-input .token-amount-input').type('0.5', { force: true, delay: 200 })
     cy.get('#swap-currency-output .token-amount-input').should('not.equal', '')
-    cy.get('#swap-button').click()
+    cy.get('#swap-button').should('contain.text', 'Swap').click()
     cy.get('#confirm-swap-or-send').should('contain', 'Confirm Swap')
   })
 
@@ -40,8 +40,8 @@ describe('Swap (custom)', () => {
     // cy.get('.token-item-0xc7AD46e0b8a400Bb3C915120d284AafbA8fc4735').click({ force: true })
     // input amounts
     cy.get('#swap-currency-input .token-amount-input').should('be.visible')
-    cy.get('#swap-currency-input .token-amount-input').type('0.001', { force: true, delay: 400 })
+    cy.get('#swap-currency-input .token-amount-input').type('0.0007', { force: true, delay: 400 })
     cy.get('#swap-currency-output .token-amount-input').should('not.equal', '')
-    cy.get('#swap-button').should('contain', 'Switch to WETH')
+    cy.get('#swap-button').should('contain', 'Swap with WETH')
   })
 })

cypress-custom/integration/swapMod.ts

@@ -67,7 +67,7 @@ describe('Swap (mod)', () => {
     cy.get('#swap-currency-input .token-amount-input').should('be.visible')
     cy.get('#swap-currency-input .token-amount-input').type('{selectall}{backspace}{selectall}{backspace}').type('0.5')
     cy.get('#swap-currency-output .token-amount-input').should('not.equal', '')
-    cy.get('#swap-button').click()
+    cy.get('#swap-button').should('contain.text', 'Swap').click()
     cy.get('#confirm-swap-or-send').should('contain', 'Confirm Swap')
   })
 

src/components/AddressInputPanel/index.tsx

@@ -108,7 +108,7 @@ export default function AddressInputPanel({
         <InputContainer>
           <AutoColumn gap="md">
             <RowBetween>
-              <ThemedText.Black color={theme.text2} fontWeight={500} fontSize={14}>
+              <ThemedText.Black color={theme.text1} fontWeight={500} fontSize={14}>
                 {label ?? <Trans>Recipient</Trans>}
               </ThemedText.Black>
               {address && chainId && (

src/components/swap/SwapHeader.tsx

@@ -12,9 +12,9 @@ const StyledSwapHeader = styled.div`
   color: ${({ theme }) => theme.text2};
 `
 
-export default function SwapHeader({ allowedSlippage }: { allowedSlippage: Percent }) {
+export default function SwapHeader({ allowedSlippage, className }: { allowedSlippage: Percent; className?: string }) {
   return (
-    <StyledSwapHeader>
+    <StyledSwapHeader className={className}>
       <RowBetween>
         <RowFixed>
           <ThemedText.Black fontWeight={500} fontSize={16} style={{ marginRight: '8px' }}>

src/components/swap/confirmPriceImpactWithoutFee.ts

@@ -15,12 +15,15 @@ export default function confirmPriceImpactWithoutFee(priceImpactWithoutFee: Perc
         )}%. Please type the word "confirm" to continue with this swap.`
       ) === 'confirm'
     )
-  } else if (!priceImpactWithoutFee.lessThan(ALLOWED_PRICE_IMPACT_HIGH)) {
+  }
+
+  if (!priceImpactWithoutFee.lessThan(ALLOWED_PRICE_IMPACT_HIGH)) {
     return window.confirm(
       `This swap has a price impact of at least ${ALLOWED_PRICE_IMPACT_HIGH.toFixed(
         0
       )}%. Please confirm that you would like to continue with this swap.`
     )
   }
+
   return true
 }

src/cosmos.decorator.tsx

@@ -11,6 +11,7 @@ import { MetaMask } from '@web3-react/metamask'
 import { BlockNumberProvider } from '@src/lib/hooks/useBlockNumber'
 
 const Wrapper = styled(Flex)`
+  font-family: 'Inter var', sans-serif;
   padding: 1.2rem 0.6rem;
   justify-content: center;
   align-items: center;

src/custom/components/InfoIcon/index.tsx

@@ -0,0 +1,33 @@
+import { Info } from 'react-feather'
+import { MouseoverTooltipContent, TooltipContainer } from 'components/Tooltip'
+import styled from 'styled-components/macro'
+import { ReactNode } from 'react'
+
+const StyledInfoIcon = styled(Info)`
+  opacity: 0.4;
+  stroke: ${({ theme }) => theme.text3};
+  line-height: 0;
+  vertical-align: middle;
+
+  :hover {
+    opacity: 1;
+  }
+`
+
+const StyledTooltipContainer = styled(TooltipContainer)`
+  font-size: 13px;
+`
+
+export interface InfoIconProps {
+  content: ReactNode
+}
+
+export function InfoIcon(props: InfoIconProps) {
+  const content = <StyledTooltipContainer>{props.content}</StyledTooltipContainer>
+
+  return (
+    <MouseoverTooltipContent wrap={false} content={content} placement="bottom">
+      <StyledInfoIcon size={16} />
+    </MouseoverTooltipContent>
+  )
+}

src/custom/components/swap/ConfirmSwapModal/ConfirmSwapModalMod.tsx

@@ -1,7 +1,7 @@
 import { Trans } from '@lingui/macro'
 // import { Trade } from '@uniswap/router-sdk'
 import { /* Currency,  */ Percent /* , TradeType */ } from '@uniswap/sdk-core'
-import { ReactNode, useCallback, useMemo } from 'react'
+import { useCallback, useMemo } from 'react'
 // import { InterfaceTrade } from 'state/routing/types'
 // import { tradeMeaningfullyDiffers } from 'utils/tradeMeaningFullyDiffer'
 
@@ -16,13 +16,14 @@ import SwapModalHeader from 'components/swap/SwapModalHeader'
 // MOD imports
 import TradeGp from 'state/swap/TradeGp'
 import { useWalletInfo } from 'hooks/useWalletInfo'
+import { SwapConfirmState } from 'pages/Swap/state/swapConfirmAtom'
 
 /**
  * Returns true if the trade requires a confirmation of details before we can submit it
  * @param tradeA trade A
  * @param tradeB trade B
  */
-/* 
+/*
 function tradeMeaningfullyDiffers(
   ...args:
     | [V2Trade<Currency, Currency, TradeType>, V2Trade<Currency, Currency, TradeType>]
@@ -42,35 +43,26 @@ function tradeMeaningfullyDiffers(tradeA: TradeGp, tradeB: TradeGp): boolean {
 
 export default function ConfirmSwapModal({
   trade,
-  originalTrade,
+  swapConfirmState,
   onAcceptChanges,
   allowedSlippage,
   onConfirm,
   onDismiss,
   recipient,
-  priceImpact, // mod
-  swapErrorMessage,
-  isOpen,
-  attemptingTxn,
-  txHash,
-  PendingTextComponent, // mod
+  priceImpact,
+  PendingTextComponent,
 }: {
-  isOpen: boolean
-  // trade: InterfaceTrade<Currency, Currency, TradeType> | undefined
-  // originalTrade: Trade<Currency, Currency, TradeType> | undefined
+  swapConfirmState: SwapConfirmState
   trade: TradeGp | undefined
-  originalTrade: TradeGp | undefined
-  attemptingTxn: boolean
-  txHash: string | undefined
   recipient: string | null
   priceImpact?: Percent
   allowedSlippage: Percent
   onAcceptChanges: () => void
   onConfirm: () => void
-  swapErrorMessage: ReactNode | undefined
   onDismiss: () => void
   PendingTextComponent: (props: { trade: TradeGp | undefined }) => JSX.Element // mod
 }) {
+  const { swapErrorMessage, showConfirm, attemptingTxn, txHash, tradeToConfirm: originalTrade } = swapConfirmState
   const { allowsOffchainSigning } = useWalletInfo()
   const showAcceptChanges = useMemo(
     () => Boolean(trade && originalTrade && tradeMeaningfullyDiffers(trade, originalTrade)),
@@ -124,7 +116,7 @@ export default function ConfirmSwapModal({
 
   return (
     <TransactionConfirmationModal
-      isOpen={isOpen}
+      isOpen={showConfirm}
       onDismiss={onDismiss}
       attemptingTxn={attemptingTxn}
       hash={txHash}

src/custom/components/swap/EthFlow/README.md

@@ -0,0 +1,3 @@
+# Wrap/unwrap flow
+
+![wrap/unwrap flow](http://www.plantuml.com/plantuml/png/bLHDRzim3BtdLt3f8Oc1fjimO803R0Y6Tjrb1PeEkUmYMtIiLQ44IQuR3FllesGxTJzMO3d4iKG-liT7nWVXmYHVJSW41ATsTSZXfaQej6b1YuRA6ZqOqWTeQoGG49oG2AMX81JrL-StbsTR_e9vwuGzQoW-4iPYDL4LpBzvm7kBBi3US3QIA3JApmi84NH-GB-O05Wceu8o1DFpKNJ4cS9l3W28ODyHfGTXhJDtGZy50SYpR9qk4OAvHSgoLJfF6ZLMB75JcqPBA10a-jAf0YNNSjW5elO8Sp8T799KrUfO_LAm5ZBDheQeqd8cYQ26Ob08BQXariPrlJeI702PtpRsPvmsSEnPzavi427BfjidJPrc6PoUVXfnFMeVaSqt65wco0eKsIP0sJY7L1xwX2lBbxxbAcnlfTnU93FO1A4V6i1UZcEUsnW_9rPet3b4og-R7ZJDr4-EOrbvEhhWawLjzdengFV1s9TCY8YARlDrONWiOkuB6OFsFvE7vD5CFMjZcgcJuZs-hJxcF19jD8oyA5Fyynv0gqBDXjXOYNPSMWHaDwEewLhlZG-n4mxVm8NHKIs_CH4VqFhbSZcDv4wg3zKxBDWTal1r3NY7562MNg-SH3UBKNsZ7zlKkpZkDyotnrMBdUfWnp9wpXAjyIemsL9e3QQ2jB1nZnr7nff3qs3-OxJ0hwB6XtIYVHMsi-KLwMf78-dvMah-do5yR4SmNC-XREuPiOuh9cyUhdrdHhT6-HTjM4eab7ppgNfiwTfXvn08EW0wPvn_Ehx_O7aUWsV0MpsxnbzOXaIscyh_c9rKSqnscD_nl1_FkjRnFASVVm40)

src/custom/components/swap/EthFlow/ethFlow.puml

@@ -0,0 +1,51 @@
+@startuml
+start
+:;
+note right: The flow launches only when a trade contains only ETH/WETH (wrap/unwrap flow);
+if (Is expert mode enabled?) then (yes)
+  partition "Expert mode flow" {
+    if (Needs approval?) then (yes)
+    :**Approve token**;
+    note left: Should be described more;
+    else (no)
+    endif;
+    if (Has enough wrapped native token balance for trade?) then (no)
+    :**Wrap native token**;
+      note right: See **"Wrap/unwrap flow"** -->
+    else (yes)
+    endif;
+    :Set wrapped native token as input currency;
+    :Open swap confirmation modal;
+    if (Is swap confirmed?) then (yes)
+      #palegreen:Run swap flow \n (See: swapFlow.puml);
+      stop;
+    else (no)
+      #pink:Abort swap;
+      stop;
+    endif;
+  }
+else (no)
+partition "Wrap/unwrap flow" {
+  #b2e0f7:Show transaction confirmation modal with **pending state:** \n "Almost there! Follow these steps...";
+  #f4f1eb:Send GA event 'Send Order';
+  if (Is input currency native?) then (yes (Wrap flow))
+  :Send transaction with **deposit** call of WETH contract;
+  else (no (Unwrap flow))
+  :Send transaction with **withdraw** call of WETH contract;
+  endif;
+
+  #f4f1eb:Send GA event 'Sign Order';
+  :Add a new transaction to **redux enhancedTransactions state**;
+  :Close all modals;
+
+  if (Are there any errors?) then (yes)
+  #f4f1eb:Send GA event 'Error' or 'Reject';
+  #pink:Show transaction confirmation modal with **error state**;
+  stop;
+  else (no)
+  stop;
+  endif;
+}
+endif;
+@enduml
+

src/custom/components/swap/EthFlow/helpers.ts

@@ -5,7 +5,7 @@ import { BigNumber } from '@ethersproject/bignumber'
 // eslint-disable-next-line no-restricted-imports
 import { t } from '@lingui/macro'
 import { useGasPrices } from 'state/gas/hooks'
-import { PendingHashMap, Props } from 'components/swap/EthFlow'
+import { PendingHashMap, EthFlowProps } from 'components/swap/EthFlow'
 import { ActivityDerivedState } from 'components/AccountDetails/Transaction'
 import { useSingleActivityState } from 'hooks/useActivityDerivedState'
 import { ApprovalState } from 'hooks/useApproveCallback'
@@ -311,10 +311,13 @@ export function _getCurrencyForVisualiser<T>(native: T, wrapped: T, isWrap: bool
   }
 }
 
-export type ActionButtonParams = Pick<Props, 'isNativeIn'> &
-  Pick<DerivedEthFlowStateProps, 'approveError' | 'wrapError' | 'approveState' | 'wrapState' | 'isExpertMode'> &
+export type ActionButtonParams = Pick<
+  DerivedEthFlowStateProps,
+  'approveError' | 'wrapError' | 'approveState' | 'wrapState' | 'isExpertMode'
+> &
   Pick<ModalTextContentProps, 'nativeSymbol' | 'wrappedSymbol' | 'state'> & {
     isWrap: boolean
+    isNativeIn: boolean
     loading: boolean
     handleSwap: (showSwapModal?: boolean) => Promise<void>
     handleApprove: () => Promise<void>
@@ -417,8 +420,7 @@ export function _getActionButtonProps({
 export function useEthFlowStatesAndSetters({
   chainId,
   approvalState,
-  wrapState,
-}: Pick<Props, 'approvalState' | 'wrapState'> & {
+}: Pick<EthFlowProps, 'approvalState'> & {
   chainId?: number
 }) {
   const [pendingHashMap, setPendingHashMap] = useState<PendingHashMap>({