Merge pull request #5912 from blockchain/GROWUX-876

Growux 876

packages/blockchain-info-components/src/Images/Images.ts

@@ -60,8 +60,10 @@ import checkEmptyBlue from './img/check-empty-blue.svg'
 import checkEmptyWhite from './img/check-empty-white.svg'
 import checkmarkCircleGreen from './img/checkmark-circle-green.svg'
 import circleEmpty from './img/circle-empty.svg'
+import circleQuestion from './img/circle-question.svg'
 import closeError from './img/close-error.svg'
 import cloudCheck from './img/cloud_check.svg'
+import cog from './img/cog.svg'
 import cowboySuite from './img/cowboy-suite.png'
 import cowboysLogo from './img/cowboys.svg'
 import creditCard from './img/credit-card.svg'
@@ -250,8 +252,10 @@ const Images = {
   'check-empty-white': checkEmptyWhite,
   'checkmark-circle-green': checkmarkCircleGreen,
   'circle-empty': circleEmpty,
+  'circle-question': circleQuestion,
   'close-error': closeError,
   'cloud-check': cloudCheck,
+  cog,
   'cowboy-suite': cowboySuite,
   cowboys: cowboysLogo,
   'cowboys-jersey': cowboysJersey,

packages/blockchain-wallet-v4-frontend/src/components/Tooltips/index.js

@@ -366,6 +366,24 @@ class Tooltips extends React.PureComponent {
             defaultMessage='You can still make an offer using an ERC20 like WETH.'
           />
         </Tooltip>
+        <Tooltip id='tooltip.dex.minimum_amount'>
+          <FormattedMessage
+            id='scenes.dex.quote_details.minimum_amount.tooltip'
+            defaultMessage='The minimum amount you are guaranteed to receive. If the price changes more than your set slippage, your transaction will revert.'
+          />
+        </Tooltip>
+        <Tooltip id='tooltip.dex.network_fee'>
+          <FormattedMessage
+            id='scenes.dex.quote_details.network_fee.tooltip'
+            defaultMessage='A fee paid to process your transaction. This must be paid in the network’s native token.'
+          />
+        </Tooltip>
+        <Tooltip id='tooltip.dex.blockchain_fee'>
+          <FormattedMessage
+            id='scenes.dex.quote_details.blockchain_fee.tooltip'
+            defaultMessage='This is a small fee for using the Blockchain.com DEX service.'
+          />
+        </Tooltip>
       </TooltipWrapper>
     )
   }

packages/blockchain-wallet-v4-frontend/src/data/components/dex/sagas.ts

@@ -11,7 +11,6 @@ import { actions, model, selectors } from 'data'
 import { Analytics } from 'data/types'
 import { promptForSecondPassword } from 'services/sagas'
 
-import quoteMock from './mocks/quote.json'
 import * as S from './selectors'
 import { actions as A } from './slice'
 import type { DexSwapForm } from './types'
@@ -41,15 +40,13 @@ export default ({ api }: { api: APIType }) => {
         })
       )
 
-      const walletAddress = nonCustodialCoinAccounts[token]?.[0].address
-      if (!walletAddress) {
-        yield* put(A.fetchUserEligibilityFailure('No user wallet address'))
+      if (!nonCustodialCoinAccounts[token]?.length) {
+        yield put(actions.core.data.eth.fetchData())
+        yield put(actions.core.data.eth.fetchErc20Data())
       }
 
       yield put(A.fetchUserEligibilityLoading())
-      const userEligibility = yield* call(api.getDexUserEligibility, {
-        walletAddress: `${walletAddress}`
-      })
+      const userEligibility = yield* call(api.getDexUserEligibility)
       yield* put(A.fetchUserEligibilitySuccess(userEligibility))
     } catch (e) {
       yield put(
@@ -254,8 +251,7 @@ export default ({ api }: { api: APIType }) => {
     const { field, form } = action?.meta
 
     // exit whenever the counterTokenAmount changes, to avoid infinitely calling fetchSwapQuote
-    if (field === 'counterTokenAmount') return
-
+    if (field === 'counterTokenAmount' || field === 'step') return
     // exit if incorrect form changed or the form values were modified by a saga (avoid infinite loop)
     if (form !== DEX_SWAP_FORM || action['@@redux-saga/SAGA_ACTION'] === true) return
     const formValues = selectors.form.getFormValues(DEX_SWAP_FORM)(yield* select()) as DexSwapForm

packages/blockchain-wallet-v4-frontend/src/layouts/Dex/DexTemplate.tsx

@@ -21,6 +21,7 @@ const Page = styled.div`
   height: 100%;
   min-height: 100%;
   width: 100%;
+  overflow: scroll;
 
   > div:first-child {
     z-index: 1;

packages/blockchain-wallet-v4-frontend/src/scenes/Dex/Swap/EnterSwapDetails/EnterSwapDetails.tsx

@@ -1,11 +1,19 @@
 import React, { useEffect, useState } from 'react'
 import { FormattedMessage } from 'react-intl'
 import { useDispatch, useSelector } from 'react-redux'
-import { Button, Flex, IconAlert, Padding, SemanticColors } from '@blockchain-com/constellation'
+import { Button, Flex, IconAlert, Padding, PaletteColors } from '@blockchain-com/constellation'
 
+import { Exchange } from '@core'
 import { actions, model, selectors } from 'data'
 import { RootState } from 'data/rootReducer'
-import { Analytics, DexSwapForm, DexSwapSide, ModalName, SwapAccountType } from 'data/types'
+import {
+  Analytics,
+  DexSwapForm,
+  DexSwapSide,
+  DexSwapSideFields,
+  ModalName,
+  SwapAccountType
+} from 'data/types'
 import { usePrevious, useRemote } from 'hooks'
 
 import { AllowanceCheck } from '../AllowanceCheck'
@@ -22,7 +30,7 @@ import { Header } from './Header'
 import { ButtonContainer } from './styles'
 
 const { DEX_SWAP_FORM } = model.components.dex
-const NETWORK_TOKEN = 'ETH'
+const NATIVE_TOKEN = 'ETH'
 const COUNTER = 'COUNTER'
 const BASE = 'BASE'
 
@@ -125,6 +133,17 @@ export const EnterSwapDetails = ({ walletCurrency }: Props) => {
     dispatch(actions.form.change(DEX_SWAP_FORM, 'step', 'CONFIRM_SWAP'))
   }
 
+  const handleMaxClicked = () => {
+    if (!baseToken || !baseTokenBalance || baseToken === NATIVE_TOKEN) return
+
+    const maxAmount = Exchange.convertCoinToCoin({
+      coin: baseToken,
+      value: Number(baseTokenBalance)
+    })
+
+    dispatch(actions.form.change(DEX_SWAP_FORM, `${DexSwapSideFields.BASE}Amount`, maxAmount))
+  }
+
   const onDepositMore = () => {
     dispatch(
       actions.modals.showModal(
@@ -153,7 +172,7 @@ export const EnterSwapDetails = ({ walletCurrency }: Props) => {
 
   const showAllowanceCheck =
     baseToken &&
-    baseToken !== NETWORK_TOKEN &&
+    baseToken !== NATIVE_TOKEN &&
     !isTokenAllowed &&
     !isTokenAllowedLoading &&
     !isTokenAllowanceNotAsked
@@ -167,6 +186,7 @@ export const EnterSwapDetails = ({ walletCurrency }: Props) => {
             swapSide={BASE}
             animate={pairAnimate}
             hasTriggerAnalytics={hasTriggerAnalytics}
+            handleMaxClicked={handleMaxClicked}
             setHasTriggerAnalytics={setHasTriggerAnalytics}
             isQuoteLocked={false}
             balance={baseTokenBalance}
@@ -266,7 +286,7 @@ export const EnterSwapDetails = ({ walletCurrency }: Props) => {
           text={
             quoteError ? (
               <Flex alignItems='center' gap={8}>
-                <IconAlert color={SemanticColors.warning} size='medium' />
+                <IconAlert color={PaletteColors['orange-400']} size='medium' />
                 {quoteError.title.includes('Insufficient') ? (
                   <FormattedMessage
                     id='dex.enter-swap-details.button.insufficient'

packages/blockchain-wallet-v4-frontend/src/scenes/Dex/Swap/EnterSwapDetails/Header/Header.tsx

@@ -1,33 +1,23 @@
 import React from 'react'
-import { FormattedMessage, useIntl } from 'react-intl'
-import {
-  Flex,
-  IconSettings,
-  Padding,
-  PaletteColors,
-  SemanticColors,
-  Text
-} from '@blockchain-com/constellation'
+import { FormattedMessage } from 'react-intl'
+import { Flex, Padding, SemanticColors, Text } from '@blockchain-com/constellation'
 import styled from 'styled-components'
 
+import { Image } from 'blockchain-info-components'
+
 const SettingsIcon = styled.div`
   cursor: pointer;
 `
 
 export const Header = ({ onClickSettings }: { onClickSettings: () => void }) => {
-  const { formatMessage } = useIntl()
   return (
     <Padding bottom={1}>
       <Flex justifyContent='space-between'>
         <Text variant='title2' color={SemanticColors.title}>
           <FormattedMessage id='copy.swap' defaultMessage='Swap' />
         </Text>
         <SettingsIcon onClick={onClickSettings}>
-          <IconSettings
-            size='medium'
-            color={PaletteColors['grey-400']}
-            label={formatMessage({ defaultMessage: 'Settings', id: 'copy.settings' })}
-          />
+          <Image name='cog' size='24px' />
         </SettingsIcon>
       </Flex>
     </Padding>

packages/blockchain-wallet-v4-frontend/src/scenes/Dex/Swap/components/FlipPairButton/FlipPairButton.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { IconDeposit, PaletteColors } from '@blockchain-com/constellation'
+import { IconArrowDown, PaletteColors } from '@blockchain-com/constellation'
 
 import { Wrapper } from './styles'
 
@@ -15,10 +15,10 @@ type OwnProps =
 export const FlipPairButton = (props: OwnProps) =>
   props.isQuoteLocked ? (
     <Wrapper isQuoteLocked>
-      <IconDeposit color={PaletteColors['grey-200']} label='arrow down' size='small' />
+      <IconArrowDown color={PaletteColors['grey-900']} label='arrow down' size='small' />
     </Wrapper>
   ) : (
     <Wrapper isQuoteLocked={false} onClick={props.onClick}>
-      <IconDeposit color={PaletteColors['blue-600']} label='arrow down' size='small' />
+      <IconArrowDown color={PaletteColors['grey-900']} label='arrow down' size='small' />
     </Wrapper>
   )

packages/blockchain-wallet-v4-frontend/src/scenes/Dex/Swap/components/QuoteDetails/QuoteDetails.tsx

@@ -4,7 +4,7 @@ import { Flex, SemanticColors, Text } from '@blockchain-com/constellation'
 import BigNumber from 'bignumber.js'
 
 import { Exchange } from '@core'
-import { SkeletonRectangle } from 'blockchain-info-components'
+import { Image, SkeletonRectangle, TooltipHost } from 'blockchain-info-components'
 import FiatDisplay from 'components/Display/FiatDisplay'
 
 import { EditSlippageText, QuoteWrapper, RowDetails, RowTitle, ValueText } from './styles'
@@ -37,6 +37,9 @@ export const QuoteDetails = ({
       <RowDetails>
         <RowTitle>
           <FormattedMessage id='copy.minimum_amount' defaultMessage='Minimum Amount' />
+          <TooltipHost id='tooltip.dex.minimum_amount'>
+            <Image name='circle-question' size='14px' />
+          </TooltipHost>
         </RowTitle>
         <Flex flexDirection='column' alignItems='flex-end' justifyContent='space-between'>
           {props.isQuoteLoading ? (
@@ -75,6 +78,9 @@ export const QuoteDetails = ({
       <RowDetails>
         <RowTitle>
           <FormattedMessage id='copy.network_fee' defaultMessage='Network Fee' />
+          <TooltipHost id='tooltip.dex.network_fee'>
+            <Image name='circle-question' size='14px' />
+          </TooltipHost>
         </RowTitle>
         <Flex flexDirection='column' alignItems='flex-end' justifyContent='space-between'>
           {props.isQuoteLoading ? (
@@ -114,6 +120,9 @@ export const QuoteDetails = ({
       <RowDetails>
         <RowTitle>
           <FormattedMessage id='copy.blockchain_fee' defaultMessage='Blockchain.com Fee' />
+          <TooltipHost id='tooltip.dex.blockchain_fee'>
+            <Image name='circle-question' size='14px' />
+          </TooltipHost>
         </RowTitle>
         <Flex flexDirection='column' alignItems='flex-end' justifyContent='space-between'>
           {props.isQuoteLoading ? (

packages/blockchain-wallet-v4-frontend/src/scenes/Dex/Swap/components/QuoteDetails/styles.ts

@@ -36,6 +36,9 @@ export const RowDetails = styled.div`
 `
 
 export const RowTitle = styled(Text)`
+  display: flex;
+  align-items: center;
+  gap: 4px;
   font-weight: 500;
   font-size: 14px;
   line-height: 150%;

packages/blockchain-wallet-v4-frontend/src/scenes/Dex/Swap/components/SwapPair/SwapPair.tsx

@@ -24,15 +24,23 @@ import { AmountInput, PairWrapper, TokenSelectRow, TokenSelectWrapper } from './
 import { getZeroFiatAmountPreview } from './utils'
 
 const BASE = 'BASE'
+const COUNTER = 'COUNTER'
+const NATIVE_TOKEN = 'ETH'
 
 type Props = {
   swapSide: DexSwapSide
   walletCurrency: string
 } & ({ amount: number; balance: number | BigNumber; coin: CoinType } | { coin?: never }) &
   (
-    | { hasTriggerAnalytics?: undefined; isQuoteLocked: true; setHasTriggerAnalytics?: undefined }
+    | {
+        handleMaxClicked?: undefined
+        hasTriggerAnalytics?: undefined
+        isQuoteLocked: true
+        setHasTriggerAnalytics?: undefined
+      }
     | {
         animate: boolean
+        handleMaxClicked?: () => void
         hasTriggerAnalytics?: boolean
         isQuoteLocked: false
         onTokenSelect: (swapSide: DexSwapSide) => void
@@ -52,6 +60,10 @@ export const SwapPair = ({
   const amountInputField = `${DexSwapSideFields[swapSide]}Amount`
   const isAnimationEnabled = !props.isQuoteLocked ? props.animate : false
   const isAmountEntered = !!(props.coin && props.amount !== 0)
+  const isBaseETH = props.coin === NATIVE_TOKEN
+  const isBase = swapSide === BASE
+  const amountColor = !isBaseETH && isBase ? 'blue600' : 'grey900'
+  const handleMaxClicked = isBaseETH ? null : props.handleMaxClicked
 
   // product only want to record this event once on first input
   useEffect(() => {
@@ -76,8 +88,8 @@ export const SwapPair = ({
         <Field
           component={AmountInput}
           data-e2e={`${swapSide}AmountField`}
-          disabled={props.isQuoteLocked}
-          placeholder='0.00'
+          disabled={props.isQuoteLocked || swapSide === COUNTER}
+          placeholder='0'
           name={amountInputField}
           validate={[]}
         />
@@ -120,9 +132,28 @@ export const SwapPair = ({
             />
           </TokenSelectRow>
         </TokenSelectWrapper>
-        <CoinDisplay coin={props.coin} color='grey600' size='10px' weight={500}>
-          {props.balance}
-        </CoinDisplay>
+        <Padding top={0.25}>
+          <Flex alignItems='center' gap={4}>
+            <Text color={SemanticColors.body} variant='micro'>
+              {swapSide === BASE ? (
+                <FormattedMessage defaultMessage='Max' id='copy.max' />
+              ) : (
+                <FormattedMessage defaultMessage='Balance' id='copy.balance' />
+              )}
+              :{' '}
+            </Text>
+            <CoinDisplay
+              coin={props.coin}
+              color={amountColor}
+              onClick={handleMaxClicked}
+              size='10px'
+              weight={500}
+              style={{ cursor: handleMaxClicked ? 'pointer' : 'initial' }}
+            >
+              {props.balance}
+            </CoinDisplay>
+          </Flex>
+        </Padding>
       </Flex>
     </PairWrapper>
   ) : (
@@ -131,8 +162,8 @@ export const SwapPair = ({
         <Field
           component={AmountInput}
           data-e2e={`${swapSide}AmountField`}
-          disabled={props.isQuoteLocked}
-          placeholder='0.00'
+          disabled={props.isQuoteLocked || swapSide === COUNTER}
+          placeholder='0'
           name={amountInputField}
           validate={[]}
         />

packages/blockchain-wallet-v4-frontend/src/scenes/Dex/components/PageWrapper/PageWrapper.tsx

@@ -6,7 +6,7 @@ const FlexContainer = styled.div`
   justify-items: center;
   justify-content: center;
   width: 100%;
-  padding-top: 72px;
+  padding: 72px 0;
 `
 
 export const PageWrapper = ({ children }: { children: React.ReactNode }) => (