Merge branch 'fix/eth-check' of github.com:blockchain/blockchain-wall…

…et-v4-frontend into fix/eth-check
blockchain · Dec 24, 2020 · 2278183 · 2278183
2 parents 14ea253 + eb37e6b
commit 2278183
Show file tree

Hide file tree

Showing 5 changed files with 57 additions and 6 deletions.
diff --git a/packages/blockchain-wallet-v4-frontend/src/assets/locales/index.d.ts b/packages/blockchain-wallet-v4-frontend/src/assets/locales/index.d.ts
@@ -351,6 +351,7 @@ type MessagesType = {
   'copy.new_swap': 'New Swap'
   'copy.no_payment_methods': 'No payment methods available.'
   'copy.now': 'Now'
+  'copy.not_enough_eth': 'ETH is required to send {coin}. You do not have enough ETH in your Ether Wallet to perform a transaction. Note, ETH must be held in "My Ether Wallet" for this transaction, not the Ether Trading Wallet.'
   'copy.not_now': 'Not Now'
   'copy.on_chain_txs': 'On-chain transactions only'
   'copy.outgoing_fee': 'Outgoing Fee'

diff --git a/packages/blockchain-wallet-v4-frontend/src/data/components/simpleBuy/sagas.ts b/packages/blockchain-wallet-v4-frontend/src/data/components/simpleBuy/sagas.ts
@@ -855,7 +855,6 @@ export default ({
         default:
           throw new Error(INVALID_COIN_TYPE)
       }
-
       yield put(A.updatePaymentSuccess(payment.value()))
     } catch (e) {
       // eslint-disable-next-line

diff --git a/...chain-wallet-v4-frontend/src/modals/SimpleBuy/EnterAmount/Checkout/ActionButton/index.tsx b/...chain-wallet-v4-frontend/src/modals/SimpleBuy/EnterAmount/Checkout/ActionButton/index.tsx
@@ -5,12 +5,14 @@ import React from 'react'
 
 type Props = {
   invalid: boolean
+  isSufficientEthForErc20: boolean
   submitting: boolean
 } & OwnProps &
   SuccessStateType
 
 const ActionButton: React.FC<Props> = props => {
   const disabled = props.invalid || props.submitting
+  const disableInsufficientEth = props.isSufficientEthForErc20
 
   switch (props.userData.kycState) {
     case 'EXPIRED':
@@ -102,7 +104,7 @@ const ActionButton: React.FC<Props> = props => {
           nature='primary'
           type='submit'
           fullwidth
-          disabled={disabled}
+          disabled={disabled || disableInsufficientEth}
         >
           {props.submitting ? (
             <HeartbeatLoader height='16px' width='16px' color='white' />

diff --git a/...ckchain-wallet-v4-frontend/src/modals/SimpleBuy/EnterAmount/Checkout/template.success.tsx b/...ckchain-wallet-v4-frontend/src/modals/SimpleBuy/EnterAmount/Checkout/template.success.tsx
@@ -288,7 +288,16 @@ const Success: React.FC<InjectedFormProps<{}, Props> & Props> = props => {
   }
 
   const limit = Number(props.sddLimit.max) / SDD_LIMIT_FACTOR
-
+  const isErc20 = props.supportedCoins[cryptoCurrency].contractAddress
+  const isSufficientEthForErc20 =
+    props.payment &&
+    (props.payment.coin === 'PAX' ||
+      props.payment.coin === 'USDT' ||
+      props.payment.coin === 'WDGLD') &&
+    !props.payment.isSufficientEthForErc20 &&
+    isErc20 &&
+    props.swapAccount?.type === 'ACCOUNT' &&
+    props.orderType === 'SELL'
   return (
     <CustomForm onSubmit={props.handleSubmit}>
       <FlyoutWrapper style={{ paddingBottom: '0px', borderBottom: 'grey000' }}>
@@ -500,11 +509,32 @@ const Success: React.FC<InjectedFormProps<{}, Props> & Props> = props => {
             </ErrorText>
           </ErrorTextContainer>
         )}
-        <ActionButton {...props} />
+        <ActionButton
+          {...props}
+          isSufficientEthForErc20={isSufficientEthForErc20 || false}
+        />
       </FlyoutWrapper>
       {props.isSddFlow && props.orderType === 'BUY' && (
         <IncreaseLimits {...props} />
       )}
+      {isSufficientEthForErc20 && (
+        <ErrorTextContainer>
+          <ErrorText>
+            <Icon
+              name='alert-filled'
+              color='red600'
+              style={{ marginRight: '4px' }}
+            />
+            <FormattedMessage
+              id='copy.not_enough_eth'
+              defaultMessage='ETH is required to send {coin}. You do not have enough ETH in your Ether Wallet to perform a transaction. Note, ETH must be held in "My Ether Wallet" for this transaction, not the Ether Trading Wallet.'
+              values={{
+                coin: props.supportedCoins[cryptoCurrency].coinTicker
+              }}
+            />
+          </ErrorText>
+        </ErrorTextContainer>
+      )}
     </CustomForm>
   )
 }

diff --git a/packages/blockchain-wallet-v4-frontend/src/modals/Swap/EnterAmount/Checkout/index.tsx b/packages/blockchain-wallet-v4-frontend/src/modals/Swap/EnterAmount/Checkout/index.tsx
@@ -216,7 +216,15 @@ const Checkout: React.FC<InjectedFormProps<{}, Props> & Props> = props => {
   const balanceBelowMinimum = userMax < Number(min)
 
   const isQuoteFailed = Remote.Failure.is(props.quoteR)
-
+  const isErc20 = coins[BASE.coin].contractAddress
+  const isSufficientEthForErc20 =
+    props.payment &&
+    (props.payment.coin === 'PAX' ||
+      props.payment.coin === 'USDT' ||
+      props.payment.coin === 'WDGLD') &&
+    props.payment.isSufficientEthForErc20
+  const disableInsufficientEth =
+    isErc20 && !isSufficientEthForErc20 && BASE.type === 'ACCOUNT'
   return (
     <FlyoutWrapper style={{ paddingTop: '20px' }}>
       <StyledForm onSubmit={handleSubmit}>
@@ -447,7 +455,7 @@ const Checkout: React.FC<InjectedFormProps<{}, Props> & Props> = props => {
           jumbo
           fullwidth
           style={{ marginTop: '24px' }}
-          disabled={props.invalid || isQuoteFailed}
+          disabled={props.invalid || isQuoteFailed || disableInsufficientEth}
         >
           <FormattedMessage
             id='buttons.preview_swap'
@@ -465,6 +473,17 @@ const Checkout: React.FC<InjectedFormProps<{}, Props> & Props> = props => {
             })}
           </ErrorCartridge>
         )}
+        {disableInsufficientEth && (
+          <ErrorCartridge style={{ marginTop: '16px' }}>
+            <FormattedMessage
+              id='copy.not_enough_eth'
+              defaultMessage='ETH is required to send {coin}. You do not have enough ETH in your Ether Wallet to perform a transaction. Note, ETH must be held in "My Ether Wallet" for this transaction, not the Ether Trading Wallet.'
+              values={{
+                coin: coins[BASE.coin].coinTicker
+              }}
+            />
+          </ErrorCartridge>
+        )}
       </StyledForm>
     </FlyoutWrapper>
   )