From e4f9c3f884b0c15134e4175779217dee7b53e7d6 Mon Sep 17 00:00:00 2001
From: MartnLecam <106965328+MartnLecam@users.noreply.github.com>
Date: Mon, 12 Dec 2022 12:56:25 -0300
Subject: [PATCH] [Fix] dApp Aprove page balance/logos (#269)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 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 <julian@blockwallet.io>
---
 packages/ui/src/routes/dApp/ApproveAsset.tsx | 72 +++++++++++++-------
 1 file changed, 49 insertions(+), 23 deletions(-)

diff --git a/packages/ui/src/routes/dApp/ApproveAsset.tsx b/packages/ui/src/routes/dApp/ApproveAsset.tsx
index b226a09a8..9ce36e931 100644
--- 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 />