Merge pull request #1616 from AmbireTech/fix/transfer-native-change

Refactor state for token in transfer screen
AmbireTech · Jun 18, 2024 · 16c07df · 16c07df
2 parents 9bbda6c + 22acde8
commit 16c07df
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 26 deletions.
diff --git a/src/components/Wallet/Transfer/Send/Send.js b/src/components/Wallet/Transfer/Send/Send.js
@@ -1,7 +1,6 @@
 import { BsXLg } from 'react-icons/bs'
-import { useEffect, useMemo, useState, useRef, useCallback } from 'react'
-import { ethers } from 'ethers'
-import { Interface } from 'ethers/lib/utils'
+import { useEffect, useMemo, useState, useRef } from 'react'
+import { Interface, formatUnits, parseUnits } from 'ethers/lib/utils'
 import ERC20_ABI from 'adex-protocol-eth/abi/ERC20'
 import { useToasts } from 'hooks/toasts'
 import {
@@ -22,6 +21,7 @@ import networks from 'consts/networks'
 import { getTokenIcon } from 'lib/icons'
 import { formatFloatTokenAmount } from 'lib/formatters'
 import { resolveENSDomain, getBip44Items } from 'lib/ensDomains'
+import { ZERO_ADDRESS } from 'consts/specialAddresses'
 import useGasTankData from 'ambire-common/src/hooks/useGasTankData'
 import { useRelayerData } from 'hooks'
 import { ReactComponent as AlertIcon } from 'resources/icons/alert.svg'
@@ -32,6 +32,7 @@ import RecipientInput from './RecipientInput/RecipientInput'
 
 import styles from './Send.module.scss'
 
+
 const ERC20 = new Interface(ERC20_ABI)
 
 const Send = ({
@@ -47,7 +48,6 @@ const Send = ({
   gasTankDetails,
   asset,
   setAsset,
-  tokenAddress,
   selectedAsset,
   title
 }) => {
@@ -102,7 +102,7 @@ const Send = ({
   const assetsItems = eligibleFeeTokens.map(
     ({ label, symbol, address: assetAddress, img, tokenImageUrl, network }) => ({
       label: label || symbol,
-      value: assetAddress,
+      value: `${assetAddress}:${symbol}`,
       icon: img || tokenImageUrl,
       fallbackIcon: getTokenIcon(network, assetAddress)
     })
@@ -112,27 +112,27 @@ const Send = ({
     if (!selectedAsset) return { maxAmount: '0', maxAmountFormatted: '0.00' }
     const { balanceRaw, decimals, balance } = selectedAsset
     return {
-      maxAmount: ethers.utils.formatUnits(balanceRaw, decimals),
+      maxAmount: formatUnits(balanceRaw, decimals),
       maxAmountFormatted: formatFloatTokenAmount(balance, true, decimals)
     }
   }, [selectedAsset])
 
   const showSWAddressWarning = useMemo(
     () =>
       !gasTankDetails &&
-      Number(tokenAddress) === 0 &&
+      selectedAsset?.address === ZERO_ADDRESS &&
       networks
         .map(({ id }) => id)
         .filter((id) => id !== 'ethereum')
         .includes(selectedNetwork.id),
-    [gasTankDetails, tokenAddress, selectedNetwork.id]
+    [gasTankDetails, selectedAsset?.address, selectedNetwork.id]
   )
 
   const onAmountChange = (value) => {
     if(!selectedAsset) return
     if (value) {
       const { decimals } = selectedAsset
-      const bigNumberAmount = ethers.utils.parseUnits(value, decimals).toHexString()
+      const bigNumberAmount = parseUnits(value, decimals).toHexString()
       setBigNumberHexAmount(bigNumberAmount)
     }
 
@@ -224,9 +224,11 @@ const Send = ({
   useEffect(() => {
     if (!selectedAsset) return
     history.replace({
-      pathname: `/wallet/transfer/${Number(asset) !== 0 ? asset : selectedAsset.symbol}`
+      pathname: `/wallet/transfer/${
+        selectedAsset?.address !== ZERO_ADDRESS ? selectedAsset?.address : selectedAsset?.symbol
+      }`
     })
-  }, [asset, history, selectedAsset])
+  }, [history, selectedAsset])
 
   useEffect(() => {
     const isValidSendTransferAmount = validateSendTransferAmount(amount, selectedAsset)
@@ -361,11 +363,11 @@ const Send = ({
       <div className={styles.content}>
         <Select
           searchable
-          preventDefaultFirst={asset!==null}
+          preventDefaultFirst={asset !== null}
           defaultValue={asset}
           items={sortedAssetsItems}
           onChange={({ value }) => value && setAsset(value)}
-          placeholder={{label:'Select an asset', icon:fallbackCoin}}
+          placeholder={{ label: 'Select an asset', icon: fallbackCoin }}
         />
         {feeBaseTokenWarning ? (
           <p className={styles.gasTankConvertMsg}>

diff --git a/src/components/Wallet/Transfer/Transfer.js b/src/components/Wallet/Transfer/Transfer.js
@@ -1,7 +1,6 @@
 import { useLocation, withRouter, useParams } from 'react-router-dom'
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 import accountPresets from 'ambire-common/src/constants/accountPresets'
-import { isValidAddress } from 'ambire-common/src/services/address'
 import cn from 'classnames'
 
 import { Panel, Tabs } from 'components/common'
@@ -18,15 +17,25 @@ const Transfer = (props) => {
   const { state } = useLocation()
   const { tokenAddressOrSymbol } = useParams()
 
-  const tokenAddress = isValidAddress(tokenAddressOrSymbol)
-    ? tokenAddressOrSymbol
-    : portfolio.tokens.find(({ symbol }) => symbol === tokenAddressOrSymbol)?.address || null
-
-  const [asset, setAsset] = useState(tokenAddress)
+  const [selectedAsset, setSelectedAsset] = useState(null)
+  const [assetAddrWithSymbol, setAsset] = useState(
+    selectedAsset && `${selectedAsset.address}:${selectedAsset.symbol}`
+  )
   const [gasTankDetails] = useState(state || null)
   const [address, setAddress] = useState(gasTankDetails ? accountPresets.feeCollector : '')
 
-  const selectedAsset = portfolio?.tokens.find(({ address: tAddress }) => tAddress === asset)
+  useEffect(() => {
+    let setTo
+    if (assetAddrWithSymbol) {
+      setTo = portfolio.tokens.find(
+        ({ address: itemAddress, symbol }) => `${itemAddress}:${symbol}` === assetAddrWithSymbol )
+    } else {
+      setTo = portfolio.tokens.find(({ address: itemAddress, symbol }) =>
+        [itemAddress, symbol].includes(tokenAddressOrSymbol)
+      )
+    }
+    setSelectedAsset(setTo)
+  }, [assetAddrWithSymbol, selectedNetwork, portfolio.tokens, tokenAddressOrSymbol])
 
   return (
     <div className={styles.wrapper}>
@@ -41,9 +50,8 @@ const Transfer = (props) => {
               address={address}
               setAddress={setAddress}
               gasTankDetails={gasTankDetails}
-              asset={asset}
+              asset={assetAddrWithSymbol}
               setAsset={setAsset}
-              tokenAddress={tokenAddress}
               selectedAsset={selectedAsset}
             />
           }
@@ -69,9 +77,8 @@ const Transfer = (props) => {
             address={address}
             setAddress={setAddress}
             gasTankDetails={gasTankDetails}
-            asset={asset}
+            asset={assetAddrWithSymbol}
             setAsset={setAsset}
-            tokenAddress={tokenAddress}
             selectedAsset={selectedAsset}
           />
         </Panel>

diff --git a/src/components/common/Select/Select.js b/src/components/common/Select/Select.js
@@ -30,7 +30,7 @@ const Select = ({
   draggableHeader,
   displayDraggableHeader,
   preventDefaultFirst,
-  placeholder="Pick option",
+  placeholder = { label: 'Pick an option' }
 }) => {
   const ref = useRef()
   const hiddenTextInput = useRef()