Merge pull request #1038 from cowprotocol/refactor/wrap-native-token

[SWAP REFACTORING #3] refactor wrap/unwrap flow

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')
   })
 

package.json

@@ -298,7 +298,6 @@
     "workbox-core": "^6.1.0",
     "workbox-navigation-preload": "^6.1.0",
     "workbox-precaching": "^6.1.0",
-    "workbox-routing": "^6.1.0",
-    "xstate": "^4.33.4"
+    "workbox-routing": "^6.1.0"
   }
 }

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/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>({