Move ETH claim info to wallet action popup

Author: monokh

src/components/WalletActionPopup/WalletActionPopup.js

@@ -1,6 +1,7 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import Modal from '@material-ui/core/Modal'
+import InfoIcon from '../../icons/info.svg'
 
 import { Stepper, Step, StepLabel } from '@material-ui/core'
 
@@ -37,10 +38,9 @@ class WalletActionPopup extends Component {
                 })}
               </Stepper> : <div className='WalletActionPopup_step'>{activeStep.label}</div> }
               <div className='WalletActionPopup_instructions'>
-                <div className='WalletActionPopup_message'>
-                  <p>{activeStep.description}</p>
-                  {activeStep.image && <img src={activeStep.image} alt={activeStep.description} />}
-                </div>
+                <p className='WalletActionPopup_instructions_description'>{activeStep.description}</p>
+                {activeStep.info && <p className='WalletActionPopup_instructions_info'><img src={InfoIcon} alt='info' /> {activeStep.info}</p>}
+                {activeStep.image && <img className='WalletActionPopup_instructions_image' src={activeStep.image} alt={activeStep.description} />}
               </div>
             </div>
           </div>

src/components/WalletActionPopup/WalletActionPopup.scss

@@ -56,11 +56,23 @@
     font-size: $font-size-sm;
 
     p {
-      height: 40px;
-      padding: 0 20px 6px 32px;
+      margin-bottom: 0;
     }
 
-    img {
+    &_description {
+      padding: 0 20px 0 32px;
+    }
+
+    &_info {
+      padding: 4px 20px 0 32px;
+      font-size: 11px;
+      img {
+        width: 13px;
+        margin-top: -2px;
+      }
+    }
+
+    &_image {
       display: block;
       margin: 20px auto;
     }

src/containers/SwapOfferSelection/SwapOfferSelection.js

@@ -1,5 +1,4 @@
 import React, { Component } from 'react'
-import _ from 'lodash'
 import Button from '../../components/Button/Button'
 import SwapPairPanel from '../../components/SwapPairPanel/SwapPairPanel'
 import AssetSelector from '../../components/AssetSelector/AssetSelector'

src/containers/SwapRedemption/SwapRedemption.js

@@ -2,11 +2,9 @@ import React, { Component } from 'react'
 import BrandCard from '../../components/BrandCard/BrandCard'
 import Button from '../../components/Button/Button'
 import cryptoassets from '@liquality/cryptoassets'
-import { isETHNetwork } from '../../utils/networks'
 import { getClaimErrors } from '../../utils/validation'
 import ExpirationDetails from '../../components/ExpirationDetails'
 
-import InfoIcon from '../../icons/info.svg'
 import './SwapRedemption.css'
 
 class SwapRedemption extends Component {
@@ -25,8 +23,6 @@ class SwapRedemption extends Component {
       <div className='SwapRedemption_info'>
         <p>Before you claim <br />
         Connect the account that you provided as {claimCurrency.code} receiving address</p>
-        { isETHNetwork(this.props.assets.b.currency) &&
-          <p className='SwapRedemption_info_eth'><img src={InfoIcon} alt='info' /> The zero balance when signing refers to the contract. After claiming you will receive the {claimCurrency.code} amount above.</p> }
       </div>
       <p>
         {!errors.claim && <Button wide primary loadingMessage={this.props.loadingMessage} onClick={this.props.redeemSwap}>Claim Your {claimCurrency.code}</Button>}

src/containers/SwapRedemption/SwapRedemption.scss

@@ -13,14 +13,6 @@
     width: 600px;
     margin: 0 auto 30px auto;
     text-align: left;
-
-    &_eth {
-      font-size: $font-size-sm;
-      img {
-        width: 13px;
-        margin-top: -2px;
-      }
-    }
   }
 
   &_errorMessage {

src/utils/walletActionPopups.js

@@ -73,6 +73,12 @@ function toRefundPopup (popup) {
   })}
 }
 
+function toEthereumClaimPopup (popup) {
+  return { steps: toClaimPopup(popup).steps.map(step => {
+    return step.id === WALLET_ACTION_STEPS.CONFIRM ? {...step, info: 'The zero balance when signing refers to the contract. After claiming you will receive the correct amount.'} : step
+  })}
+}
+
 const initiatePopups = {
   ledger: {
     btc: bitcoinLedgerPopup,
@@ -93,17 +99,17 @@ const initiatePopups = {
 const claimPopups = {
   ledger: {
     btc: toClaimPopup(bitcoinLedgerPopup),
-    eth: toClaimPopup(ethereumLedgerPopup),
-    erc20: toClaimPopup(ethereumLedgerPopup)
+    eth: toEthereumClaimPopup(ethereumLedgerPopup),
+    erc20: toEthereumClaimPopup(ethereumLedgerPopup)
   },
   metamask: {
-    eth: toClaimPopup(ethereumMetamaskPopup),
-    erc20: toClaimPopup(ERC20MetamaskPopup)
+    eth: toEthereumClaimPopup(ethereumMetamaskPopup),
+    erc20: toEthereumClaimPopup(ERC20MetamaskPopup)
   },
   default: {
     btc: toClaimPopup(defaultPopup),
-    eth: toClaimPopup(defaultPopup),
-    erc20: toClaimPopup(defaultERC20Popup)
+    eth: toEthereumClaimPopup(defaultPopup),
+    erc20: toEthereumClaimPopup(defaultERC20Popup)
   }
 }