[Fix] dApp Aprove page balance/logos (#269)

* fix: Add same color logic for displaybadge * fix: function to get network color, will be used for all the pages who want to get that info. Added color to network dropdown. Remove capitalize from getNetworkName. Change width for network dropdown and network badge * fix: Solve space difference between badge and dropdown. Fix color span in network change window * fix: add ui fixes. Remove useEffect from switch page * fix: Add asset logo, change balance location in approve screen Co-authored-by: Julián Ariel Martínez <[email protected]>
block-wallet · Dec 12, 2022 · e4f9c3f · e4f9c3f
1 parent 83f5cf2
commit e4f9c3f
Showing 1 changed file with 49 additions and 23 deletions.
diff --git a/packages/ui/src/routes/dApp/ApproveAsset.tsx b/packages/ui/src/routes/dApp/ApproveAsset.tsx
@@ -37,7 +37,7 @@ import {
 } from "../../context/commTypes"
 import { TransactionFeeData } from "@block-wallet/background/controllers/erc-20/transactions/SignedTransaction"
 import { capitalize } from "../../util/capitalize"
-import { formatName } from "../../util/formatAccount"
+import { formatHash, formatName } from "../../util/formatAccount"
 import { formatRounded } from "../../util/formatRounded"
 import { formatUnits, getAddress, parseUnits } from "ethers/lib/utils"
 import { getAccountColor } from "../../util/getAccountColor"
@@ -194,6 +194,7 @@ const ApproveAsset: FunctionComponent<ApproveAssetProps> = ({
 
     // Local state
     const [tokenName, setTokenName] = useState("")
+    const [tokenLogo, setTokenLogo] = useState("")
     const [isEditAllowancePage, setIsEditAllowancePage] = useState(false)
     const [isCustomSelected, setIsCustomSelected] = useState(false)
     const [customAllowance, setCustomAllowance] = useState("")
@@ -239,7 +240,6 @@ const ApproveAsset: FunctionComponent<ApproveAssetProps> = ({
     const tokenAddress = params.to!
     const tokenDecimals = transaction.advancedData?.decimals!
     const defaultAllowance = transaction.advancedData?.allowance!
-    const networkName = capitalize(desc)
 
     const { status, isOpen, dispatch, texts, titles, closeDialog, gifs } =
         useTransactionWaitingDialog(
@@ -309,6 +309,7 @@ const ApproveAsset: FunctionComponent<ApproveAssetProps> = ({
         searchTokenInAssetsList(tokenAddress)
             .then((token) => {
                 setTokenName(token[0].symbol)
+                setTokenLogo(token[0].logo)
             })
             .catch(() => {
                 throw new Error("Failed to fetch token data")
@@ -471,11 +472,13 @@ const ApproveAsset: FunctionComponent<ApproveAssetProps> = ({
                         })
                     }}
                 />
-                <div
-                    className="text-xs font-bold text-primary-300 cursor-pointer hover:underline"
-                    onClick={() => setIsEditAllowancePage(true)}
-                >
-                    Set custom allowance
+                <div className="flex flex-col items-end">
+                    <span
+                        className="text-xs font-bold text-primary-300 cursor-pointer hover:underline"
+                        onClick={() => setIsEditAllowancePage(true)}
+                    >
+                        Set custom allowance
+                    </span>
                 </div>
                 <div className="text-xs text-red-500">
                     {!hasBalance && "Insufficient funds."}
@@ -581,6 +584,7 @@ const ApproveAsset: FunctionComponent<ApproveAssetProps> = ({
                     title={isEditAllowancePage ? "Edit allowance" : "Approval"}
                     backButton={isEditAllowancePage}
                     onBack={() => setIsEditAllowancePage(false)}
+                    networkIndicator
                 >
                     {transactionCount > 1 && (
                         <div className="group relative">
@@ -690,24 +694,46 @@ const ApproveAsset: FunctionComponent<ApproveAssetProps> = ({
                     <span className="text-sm font-bold">
                         {formatName(account.name, 15)}
                     </span>
-                    <span className="text-xs text-gray-600">
-                        {`${assetBalance} ${tokenName}`}
-                    </span>
-                    <span className="text-xs text-gray-600">
-                        {formatRounded(
-                            formatUnits(
-                                balance || "0",
-                                nativeToken.token.decimals
-                            )
-                        )}
-                        {` ${nativeToken.token.symbol}`}
+                    <span
+                        className="text-xs text-gray-600 truncate"
+                        title={account.address}
+                    >
+                        {formatHash(account.address)}
                     </span>
                 </div>
-                <div className="flex flex-row items-center ml-auto p-1 px-2 pr-1 text-gray-600 rounded-md border border-primary-200 text-xs bg-green-100">
-                    <span className="inline-flex rounded-full h-2 w-2 mr-2 animate-pulse bg-green-400 pointer-events-none" />
-                    <span className="mr-1 pointer-events-none text-green-600">
-                        {networkName}
-                    </span>
+                <div className="ml-auto flex flex-col items-end space-x-1">
+                    <div className="flex flex-row items-center">
+                        <span className="text-xs text-gray-600 truncate">
+                            {`${formatName(assetBalance, 18)}`}
+                        </span>
+                        <img
+                            src={tokenLogo}
+                            alt={tokenName}
+                            width="14px"
+                            draggable={false}
+                            className="ml-1"
+                        />
+                    </div>
+                    <div className="flex flex-row items-center mt-1">
+                        <span className="text-xs text-gray-600 truncate">
+                            {formatName(
+                                formatRounded(
+                                    formatUnits(
+                                        balance || "0",
+                                        nativeToken.token.decimals
+                                    )
+                                ),
+                                18
+                            )}
+                        </span>
+                        <img
+                            src={nativeToken.token.logo}
+                            alt={nativeToken.token.symbol}
+                            width="14px"
+                            draggable={false}
+                            className="ml-1"
+                        />
+                    </div>
                 </div>
             </div>
             <Divider />