Refactor state for token in transfer screen

AmbireTech · Jun 12, 2024 · 0116c73 · 0116c73
1 parent 0490e82
commit 0116c73
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 24 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 { Interface, formatUnits, parseUnits, isValidAddress } from 'ethers/lib/utils'
 import ERC20_ABI from 'adex-protocol-eth/abi/ERC20'
 import { useToasts } from 'hooks/toasts'
 import {
@@ -31,6 +30,7 @@ import useConstants from 'hooks/useConstants'
 import RecipientInput from './RecipientInput/RecipientInput'
 
 import styles from './Send.module.scss'
+import { ZERO_ADDRESS } from 'consts/specialAddresses'
 
 const ERC20 = new Interface(ERC20_ABI)
 
@@ -47,7 +47,6 @@ const Send = ({
   gasTankDetails,
   asset,
   setAsset,
-  tokenAddress,
   selectedAsset,
   title
 }) => {
@@ -102,7 +101,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 +111,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 +223,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 +362,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,29 @@ 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 [asset, 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(()=>{
+  //   if(!portfolio.tokens.find(({ address: itemAddress, symbol }) => itemAddress === `${itemAddress}:${symbol}` === asset))
+  //     setAsset(null)
+  // }, [selectedNetwork])
+
+  useEffect(() => {
+    let setTo
+    if (asset) {
+      setTo = portfolio.tokens.find(({ address:itemAddress, symbol }) => `${itemAddress}:${symbol}` === asset)
+    } else {
+      setTo = portfolio.tokens.find(({ address: itemAddress, symbol }) =>
+        [itemAddress, symbol].includes(tokenAddressOrSymbol)
+      )
+    }
+    setSelectedAsset(setTo)
+  }, [asset, selectedNetwork])
 
   return (
     <div className={styles.wrapper}>
@@ -42,8 +55,8 @@ const Transfer = (props) => {
               setAddress={setAddress}
               gasTankDetails={gasTankDetails}
               asset={asset}
-              setAsset={setAsset}
-              tokenAddress={tokenAddress}
+              setAsset={(i)=>{console.log(i)
+                setAsset(i)}}
               selectedAsset={selectedAsset}
             />
           }
@@ -71,7 +84,6 @@ const Transfer = (props) => {
             gasTankDetails={gasTankDetails}
             asset={asset}
             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()