From d479a6aa071321e989258cd63f096688e0c2f777 Mon Sep 17 00:00:00 2001
From: nuanyang233 <nuanyang233@gmail.com>
Date: Mon, 6 Jun 2022 20:27:25 +0800
Subject: [PATCH 1/2] fix: bugfix

---
 .../popups/pages/Wallet/ContractInteraction/index.tsx     | 5 ++++-
 .../src/web3/EVM/useERC20TokenApproveCallback.ts          | 8 +++-----
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/packages/mask/src/extension/popups/pages/Wallet/ContractInteraction/index.tsx b/packages/mask/src/extension/popups/pages/Wallet/ContractInteraction/index.tsx
index c565150fd9ca..d40a4a0236c3 100644
--- a/packages/mask/src/extension/popups/pages/Wallet/ContractInteraction/index.tsx
+++ b/packages/mask/src/extension/popups/pages/Wallet/ContractInteraction/index.tsx
@@ -342,7 +342,10 @@ const ContractInteraction = memo(() => {
                 </div>
                 <div className={classes.content}>
                     <div className={classes.item} style={{ marginTop: 20, marginBottom: 30 }}>
-                        <TokenIcon address={token?.address ?? ''} classes={{ icon: classes.tokenIcon }} />
+                        <TokenIcon
+                            address={(isNativeTokenInteraction ? nativeToken?.address : token?.address) ?? ''}
+                            classes={{ icon: classes.tokenIcon }}
+                        />
                         {tokenDecimals !== undefined ? (
                             <>
                                 <Typography className={classes.amount}>
diff --git a/packages/plugin-infra/src/web3/EVM/useERC20TokenApproveCallback.ts b/packages/plugin-infra/src/web3/EVM/useERC20TokenApproveCallback.ts
index 41bf0e70d8cb..7b9872eb59bb 100644
--- a/packages/plugin-infra/src/web3/EVM/useERC20TokenApproveCallback.ts
+++ b/packages/plugin-infra/src/web3/EVM/useERC20TokenApproveCallback.ts
@@ -1,5 +1,6 @@
 import type { NonPayableTx } from '@masknet/web3-contracts/types/types'
 import { isLessThan, NetworkPluginID, toFixed } from '@masknet/web3-shared-base'
+import { once } from 'lodash-unified'
 import { useCallback, useMemo } from 'react'
 import { useAsyncFn } from 'react-use'
 import { useERC20TokenContract } from './useERC20TokenContract'
@@ -79,16 +80,13 @@ export function useERC20TokenApproveCallback(address?: string, amount?: string,
 
             // send transaction and wait for hash
             return new Promise<string>(async (resolve, reject) => {
-                const revalidate = () => {
+                const revalidate = once(() => {
                     revalidateBalance()
                     revalidateAllowance()
-                }
+                })
                 erc20Contract.methods
                     .approve(spender, useExact ? amount : MaxUint256)
                     .send(config as NonPayableTx)
-                    .on(TransactionEventType.RECEIPT, () => {
-                        revalidate()
-                    })
                     .on(TransactionEventType.CONFIRMATION, (no, receipt) => {
                         revalidate()
                         resolve(receipt.transactionHash)

From ee8e6bd78bd19ba4fb960a43d928599295911dbc Mon Sep 17 00:00:00 2001
From: nuanyang233 <nuanyang233@gmail.com>
Date: Mon, 6 Jun 2022 20:40:19 +0800
Subject: [PATCH 2/2] fix: add token name

---
 .../extension/popups/pages/Wallet/ContractInteraction/index.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/mask/src/extension/popups/pages/Wallet/ContractInteraction/index.tsx b/packages/mask/src/extension/popups/pages/Wallet/ContractInteraction/index.tsx
index d40a4a0236c3..7f5d08e6e824 100644
--- a/packages/mask/src/extension/popups/pages/Wallet/ContractInteraction/index.tsx
+++ b/packages/mask/src/extension/popups/pages/Wallet/ContractInteraction/index.tsx
@@ -344,6 +344,8 @@ const ContractInteraction = memo(() => {
                     <div className={classes.item} style={{ marginTop: 20, marginBottom: 30 }}>
                         <TokenIcon
                             address={(isNativeTokenInteraction ? nativeToken?.address : token?.address) ?? ''}
+                            chainId={chainId}
+                            name={(isNativeTokenInteraction ? nativeToken?.name : token?.name) ?? ''}
                             classes={{ icon: classes.tokenIcon }}
                         />
                         {tokenDecimals !== undefined ? (