From 3a8f00644d879a26aa218e832da2bb46ebeeeefd Mon Sep 17 00:00:00 2001
From: guanbinrui <guanbinrui@dimension.im>
Date: Mon, 6 Jun 2022 16:54:20 +0800
Subject: [PATCH 1/6] fix: add gas options

---
 .../InjectedComponents/ProfileTabContent.tsx  | 114 +++++-----
 .../pages/Personas/VerifyWallet/index.tsx     |   2 +-
 .../ITO/SNSAdaptor/CompositionDialog.tsx      |   2 +-
 .../plugins/Pets/SNSAdaptor/PetSetDialog.tsx  |   2 +-
 .../mask/src/plugins/Pets/Services/rss3.ts    |   2 +-
 .../RedPacket/SNSAdaptor/RedPacketDialog.tsx  |   2 +-
 .../src/SNSAdaptor/components/TabContent.tsx  |  25 ++-
 .../EVM/src/state/Connection/connection.ts    |   4 +-
 .../src/state/Connection/translators/Base.ts  |   2 +-
 packages/plugins/EVM/src/state/Hub/hub.ts     |  15 +-
 .../UI/components/ConcealableTabs/index.tsx   |   2 +-
 packages/web3-providers/package.json          |   4 +-
 packages/web3-providers/src/index.ts          |   2 +
 packages/web3-providers/src/web3/index.ts     | 101 +++++++++
 pnpm-lock.yaml                                | 199 +++++++++---------
 15 files changed, 303 insertions(+), 175 deletions(-)
 create mode 100644 packages/web3-providers/src/web3/index.ts

diff --git a/packages/mask/src/components/InjectedComponents/ProfileTabContent.tsx b/packages/mask/src/components/InjectedComponents/ProfileTabContent.tsx
index 4f7f3a6f7fb6..3a88f82da7f4 100644
--- a/packages/mask/src/components/InjectedComponents/ProfileTabContent.tsx
+++ b/packages/mask/src/components/InjectedComponents/ProfileTabContent.tsx
@@ -59,47 +59,59 @@ export function ProfileTabContent(props: ProfileTabContentProps) {
         identity.identifier?.userId,
     )
 
+    const activatedPlugins = useActivatedPluginsSNSAdaptor('any')
+    const availablePlugins = useAvailablePlugins(activatedPlugins)
+    const displayPlugins = availablePlugins
+        .flatMap((x) => x.ProfileTabs?.map((y) => ({ ...y, pluginID: x.ID })) ?? EMPTY_LIST)
+        .filter((z) => z.Utils?.shouldDisplay?.(identity, socialAddressList) ?? true)
+
+    const tabs = displayPlugins
+        .sort((a, z) => {
+            // order those tabs from next id first
+            if (a.pluginID === PluginId.NextID) return -1
+            if (z.pluginID === PluginId.NextID) return 1
+
+            // order those tabs from collectible first
+            if (a.pluginID === PluginId.Collectible) return -1
+            if (z.pluginID === PluginId.Collectible) return 1
+
+            // place those tabs from debugger last
+            if (a.pluginID === PluginId.Debugger) return 1
+            if (z.pluginID === PluginId.Debugger) return -1
+
+            // place those tabs from dao before the last
+            if (a.pluginID === PluginId.DAO) return 1
+            if (z.pluginID === PluginId.DAO) return -1
+
+            return a.priority - z.priority
+        })
+        .map((x) => ({
+            id: x.ID,
+            label: typeof x.label === 'string' ? x.label : translate(x.pluginID, x.label),
+        }))
+
+    const selectedTabId = selectedTab ?? first(tabs)?.id
     const currentAccountNotConnectPersona =
         currentIdentity.identifier === identity.identifier &&
         personaList.findIndex((persona) => persona?.persona === currentConnectedPersona?.identifier.publicKeyAsHex) ===
             -1
+    const Component = getTabContent(
+        isTwitter(activatedSocialNetworkUI) && currentAccountNotConnectPersona && selectedTabId !== PluginId.Debugger
+            ? displayPlugins?.find((tab) => tab?.pluginID === PluginId.NextID)?.ID
+            : selectedTabId,
+    )
+    const Utils = displayPlugins.find((x) => x.ID === selectedTabId)?.Utils
 
-    const activatedPlugins = useActivatedPluginsSNSAdaptor('any')
-    const availablePlugins = useAvailablePlugins(activatedPlugins)
-    const displayPlugins = useMemo(() => {
-        return availablePlugins
-            .flatMap((x) => x.ProfileTabs?.map((y) => ({ ...y, pluginID: x.ID })) ?? [])
-            .filter((z) => z.Utils?.shouldDisplay?.(identity, socialAddressList) ?? true)
-    }, [availablePlugins])
-
-    const tabs = useMemo(() => {
-        return displayPlugins
-            .sort((a, z) => {
-                // order those tabs from next id first
-                if (a.pluginID === PluginId.NextID) return -1
-                if (z.pluginID === PluginId.NextID) return 1
-
-                // order those tabs from collectible first
-                if (a.pluginID === PluginId.Collectible) return -1
-                if (z.pluginID === PluginId.Collectible) return 1
-
-                // place those tabs from debugger last
-                if (a.pluginID === PluginId.Debugger) return 1
-                if (z.pluginID === PluginId.Debugger) return -1
-
-                // place those tabs from dao before the last
-                if (a.pluginID === PluginId.DAO) return 1
-                if (z.pluginID === PluginId.DAO) return -1
-
-                return a.priority - z.priority
-            })
-            .map((x) => ({
-                id: x.ID,
-                label: typeof x.label === 'string' ? x.label : translate(x.pluginID, x.label),
-            }))
-    }, [displayPlugins, translate])
-
-    const selectedTabId = selectedTab ?? first(tabs)?.id
+    console.log('DEBUG: logs')
+    console.log({
+        selectedTabId,
+        socialAddressList,
+        personaList,
+        activatedPlugins,
+        availablePlugins,
+        displayPlugins,
+        tabs,
+    })
 
     useLocationChange(() => {
         setSelectedTab(undefined)
@@ -121,28 +133,6 @@ export function ProfileTabContent(props: ProfileTabContentProps) {
         })
     }, [identity.identifier?.userId])
 
-    const content = useMemo(() => {
-        const Component = getTabContent(
-            isTwitter(activatedSocialNetworkUI) && currentAccountNotConnectPersona
-                ? displayPlugins?.find((tab) => tab?.pluginID === PluginId.NextID)?.ID
-                : selectedTabId,
-        )
-        const Utils = displayPlugins.find((x) => x.ID === selectedTabId)?.Utils
-
-        return (
-            <Component
-                identity={identity}
-                personaList={personaList?.map((x) => x.persona)}
-                socialAddressList={socialAddressList.filter((x) => Utils?.filter?.(x) ?? true).sort(Utils?.sorter)}
-            />
-        )
-    }, [
-        selectedTabId,
-        displayPlugins.map((x) => x.ID).join(),
-        identity.identifier?.userId,
-        currentAccountNotConnectPersona,
-    ])
-
     if (hidden) return null
 
     if (!identity.identifier?.userId || loadingSocialAddressList || loadingPersonaList)
@@ -169,7 +159,13 @@ export function ProfileTabContent(props: ProfileTabContentProps) {
                     </Typography>
                 )}
             </div>
-            <div className={classes.content}>{content}</div>
+            <div className={classes.content}>
+                <Component
+                    identity={identity}
+                    personaList={personaList?.map((x) => x.persona)}
+                    socialAddressList={socialAddressList.filter((x) => Utils?.filter?.(x) ?? true).sort(Utils?.sorter)}
+                />
+            </div>
         </div>
     )
 }
diff --git a/packages/mask/src/extension/popups/pages/Personas/VerifyWallet/index.tsx b/packages/mask/src/extension/popups/pages/Personas/VerifyWallet/index.tsx
index 2f142aa1523d..e377550fdbac 100644
--- a/packages/mask/src/extension/popups/pages/Personas/VerifyWallet/index.tsx
+++ b/packages/mask/src/extension/popups/pages/Personas/VerifyWallet/index.tsx
@@ -105,7 +105,7 @@ const VerifyWallet = memo(() => {
     const [{ value: walletSignState }, walletSign] = useAsyncFn(async () => {
         if (!payload || !currentPersona?.identifier.publicKeyAsHex) return false
         try {
-            const walletSignature = await connection?.signMessage(payload.signPayload, 'personaSign', {
+            const walletSignature = await connection?.signMessage(payload.signPayload, 'personalSign', {
                 chainId: wallet.chainId,
                 account: wallet.account,
                 providerType: wallet.providerType,
diff --git a/packages/mask/src/plugins/ITO/SNSAdaptor/CompositionDialog.tsx b/packages/mask/src/plugins/ITO/SNSAdaptor/CompositionDialog.tsx
index c0073c603506..4cf3ddb35610 100644
--- a/packages/mask/src/plugins/ITO/SNSAdaptor/CompositionDialog.tsx
+++ b/packages/mask/src/plugins/ITO/SNSAdaptor/CompositionDialog.tsx
@@ -151,7 +151,7 @@ export function CompositionDialog(props: CompositionDialogProps) {
             if (!payload.password) {
                 const [, title] = payload.message.split(MSG_DELIMITER)
                 payload.password =
-                    (await connection?.signMessage(Web3Utils.sha3(title) ?? '', 'personaSign', {
+                    (await connection?.signMessage(Web3Utils.sha3(title) ?? '', 'personalSign', {
                         account,
                     })) ?? ''
             }
diff --git a/packages/mask/src/plugins/Pets/SNSAdaptor/PetSetDialog.tsx b/packages/mask/src/plugins/Pets/SNSAdaptor/PetSetDialog.tsx
index 94a457931829..4cb1da781b60 100644
--- a/packages/mask/src/plugins/Pets/SNSAdaptor/PetSetDialog.tsx
+++ b/packages/mask/src/plugins/Pets/SNSAdaptor/PetSetDialog.tsx
@@ -149,7 +149,7 @@ export function PetSetDialog({ configNFTs, onClose }: PetSetDialogProps) {
         }
         try {
             await PluginPetRPC.setUserAddress(user)
-            const signature = await connection?.signMessage(user.userId, 'personaSign', { account: user.address })
+            const signature = await connection?.signMessage(user.userId, 'personalSign', { account: user.address })
             if (signature && connection) {
                 await saveCustomEssayToRSS(user.address, meta, signature, connection)
             }
diff --git a/packages/mask/src/plugins/Pets/Services/rss3.ts b/packages/mask/src/plugins/Pets/Services/rss3.ts
index ad563ad05ac3..c8e21ddca76c 100644
--- a/packages/mask/src/plugins/Pets/Services/rss3.ts
+++ b/packages/mask/src/plugins/Pets/Services/rss3.ts
@@ -25,7 +25,7 @@ export async function saveCustomEssayToRSS(
 ) {
     if (!address) return
     const rss = RSS3.createRSS3(address, async (message: string) => {
-        return connection.signMessage(message, 'personaSign', { account: address })
+        return connection.signMessage(message, 'personalSign', { account: address })
     })
     await RSS3.setFileData<EssayRSSNode>(rss, address, '_pet', { address, signature, essay })
     return essay
diff --git a/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketDialog.tsx b/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketDialog.tsx
index 089ff4eb1383..a2e9de7817e2 100644
--- a/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketDialog.tsx
+++ b/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketDialog.tsx
@@ -99,7 +99,7 @@ export default function RedPacketDialog(props: RedPacketDialogProps) {
                     if (!connection) return
                     payload.password = await connection.signMessage(
                         Web3Utils.sha3(payload.sender.message) ?? '',
-                        'personaSign',
+                        'personalSign',
                         { account },
                     )
                     payload.password = payload.password!.slice(2)
diff --git a/packages/plugins/Debugger/src/SNSAdaptor/components/TabContent.tsx b/packages/plugins/Debugger/src/SNSAdaptor/components/TabContent.tsx
index fe0bd4267375..7c96c0ade61a 100644
--- a/packages/plugins/Debugger/src/SNSAdaptor/components/TabContent.tsx
+++ b/packages/plugins/Debugger/src/SNSAdaptor/components/TabContent.tsx
@@ -1,7 +1,9 @@
-import { useBalance, useBlockNumber } from '@masknet/plugin-infra/web3'
+import { useBalance, useBlockNumber, useWeb3Connection } from '@masknet/plugin-infra/web3'
 import { makeStyles } from '@masknet/theme'
 import type { NetworkPluginID, SocialAddress, SocialIdentity } from '@masknet/web3-shared-base'
-import { Box, List, ListItem, ListItemText, Typography } from '@mui/material'
+import { useTokenConstants } from '@masknet/web3-shared-evm'
+import { Box, Button, List, ListItem, ListItemText, Typography } from '@mui/material'
+import { useCallback } from 'react'
 
 export interface TabContentProps {
     identity?: SocialIdentity
@@ -55,7 +57,7 @@ export function TabContent({ identity, socialAddressList }: TabContentProps) {
         return (
             <List>
                 {socialAddressList?.map((x) => (
-                    <ListItem key={x.type}>
+                    <ListItem key={`${x.type}_${x.address}`}>
                         <ListItemText
                             primary={
                                 <Typography color="textPrimary">
@@ -70,11 +72,28 @@ export function TabContent({ identity, socialAddressList }: TabContentProps) {
         )
     }
 
+    const { NATIVE_TOKEN_ADDRESS } = useTokenConstants()
     const { value: balance = '0' } = useBalance()
     const { value: blockNumber = 0 } = useBlockNumber()
+    const connection = useWeb3Connection()
+    const onTransferCallback = useCallback(() => {
+        if (!NATIVE_TOKEN_ADDRESS) return
+        return connection.transferFungibleToken(
+            NATIVE_TOKEN_ADDRESS,
+            '0x790116d0685eB197B886DAcAD9C247f785987A4a',
+            '100',
+        )
+    }, [connection])
+
+    const onPersonaSign = useCallback(async () => {
+        const signed = await connection.signMessage('hello world', 'personalSign')
+        console.log(signed)
+    }, [connection])
 
     return (
         <section className={classes.container}>
+            <Button onClick={onTransferCallback}>Trasfer</Button>
+            <Button onClick={onPersonaSign}>Sign</Button>
             <Typography color="textPrimary" variant="h6">
                 Balance {balance} <br />
                 BlockNumber {blockNumber} <br />
diff --git a/packages/plugins/EVM/src/state/Connection/connection.ts b/packages/plugins/EVM/src/state/Connection/connection.ts
index 5f0c4fc6651a..b93467fb8cdb 100644
--- a/packages/plugins/EVM/src/state/Connection/connection.ts
+++ b/packages/plugins/EVM/src/state/Connection/connection.ts
@@ -542,14 +542,14 @@ class Connection implements EVM_Connection {
 
     signMessage(
         dataToSign: string,
-        signType?: 'personaSign' | 'typedDataSign' | Omit<string, 'personaSign' | 'typedDataSign'>,
+        signType?: 'personalSign' | 'typedDataSign' | Omit<string, 'personalSign' | 'typedDataSign'>,
         options?: EVM_Web3ConnectionOptions,
     ) {
         const account = options?.account ?? this.account
         if (!account) throw new Error('Unknown account.')
 
         switch (signType) {
-            case 'personaSign':
+            case 'personalSign':
                 return this.hijackedRequest<string>(
                     {
                         method: EthereumMethodType.PERSONAL_SIGN,
diff --git a/packages/plugins/EVM/src/state/Connection/translators/Base.ts b/packages/plugins/EVM/src/state/Connection/translators/Base.ts
index f633830797da..3d3f464a359a 100644
--- a/packages/plugins/EVM/src/state/Connection/translators/Base.ts
+++ b/packages/plugins/EVM/src/state/Connection/translators/Base.ts
@@ -49,7 +49,7 @@ export class Base implements Translator {
                     normalOption &&
                     isLessThan((config.gasPrice as string) ?? 0, slowOption.suggestedMaxFeePerGas)
                 ) {
-                    config.gasPrice = toHex(normalOption.suggestedMaxFeePerGas)
+                    config.gasPrice = toHex(formatGweiToWei(normalOption.suggestedMaxFeePerGas).toFixed(0))
                 }
             }
 
diff --git a/packages/plugins/EVM/src/state/Hub/hub.ts b/packages/plugins/EVM/src/state/Hub/hub.ts
index 939067ddc51d..fcb00d3edc50 100644
--- a/packages/plugins/EVM/src/state/Hub/hub.ts
+++ b/packages/plugins/EVM/src/state/Hub/hub.ts
@@ -1,4 +1,4 @@
-import { CoinGecko, DeBank, MetaSwap, NFTScan, OpenSea, TokenList, Zerion } from '@masknet/web3-providers'
+import { CoinGecko, DeBank, EthereumWeb3, MetaSwap, NFTScan, OpenSea, TokenList, Zerion } from '@masknet/web3-providers'
 import {
     FungibleToken,
     NonFungibleToken,
@@ -51,14 +51,17 @@ class Hub implements EVM_Hub {
     ): Promise<Array<NonFungibleToken<ChainId, SchemaType>>> {
         throw new Error('Method not implemented.')
     }
-    getGasOptions(
+    async getGasOptions(
         chainId: ChainId,
         options?: HubOptions<ChainId> | undefined,
     ): Promise<Record<GasOptionType, GasOption>> {
-        if (chainResolver.isSupport(chainId, 'EIP1559')) {
-            return MetaSwap.getGasOptions(chainId)
+        try {
+            const isEIP1559 = chainResolver.isSupport(chainId, 'EIP1559')
+            if (isEIP1559) return await MetaSwap.getGasOptions(chainId)
+            return await DeBank.getGasOptions(chainId)
+        } catch (error) {
+            return EthereumWeb3.getGasOptions(chainId)
         }
-        return DeBank.getGasOptions(chainId)
     }
     getFungibleAsset(
         address: string,
@@ -73,7 +76,7 @@ class Hub implements EVM_Hub {
         // only the first page is available
         if ((options?.indicator ?? 0) > 0) return createPageable([], 0)
         try {
-            return DeBank.getAssets(account, { chainId: this.chainId, ...options })
+            return await DeBank.getAssets(account, { chainId: this.chainId, ...options })
         } catch {
             return Zerion.getAssets(account, { chainId: this.chainId, ...options })
         }
diff --git a/packages/shared/src/UI/components/ConcealableTabs/index.tsx b/packages/shared/src/UI/components/ConcealableTabs/index.tsx
index dc4c95a7ef59..405928a12ca6 100644
--- a/packages/shared/src/UI/components/ConcealableTabs/index.tsx
+++ b/packages/shared/src/UI/components/ConcealableTabs/index.tsx
@@ -152,7 +152,7 @@ export function ConcealableTabs<T extends number | string>({
         if (selectedId === undefined && tabs.length) {
             onChange?.(tabs[0].id)
         }
-    }, [selectedId === undefined, tabs.length > 0, onChange])
+    }, [selectedId, tabs.map((x) => x.id).join(), onChange])
 
     const slide = useCallback((toLeft: boolean) => {
         const tabList = trackRef.current
diff --git a/packages/web3-providers/package.json b/packages/web3-providers/package.json
index f28276a02980..6663890fee9f 100644
--- a/packages/web3-providers/package.json
+++ b/packages/web3-providers/package.json
@@ -28,7 +28,9 @@
     "socket.io-client": "2.4.0",
     "urlcat": "^2.0.4",
     "uuid": "^8.3.2",
-    "wallet.ts": "^1.0.1"
+    "wallet.ts": "^1.0.1",
+    "web3": "1.7.3",
+    "web3-eth": "1.7.3"
   },
   "devDependencies": {
     "@types/lru-cache": "^7.10.10"
diff --git a/packages/web3-providers/src/index.ts b/packages/web3-providers/src/index.ts
index a5d61bd26d26..a51c2f5a7492 100644
--- a/packages/web3-providers/src/index.ts
+++ b/packages/web3-providers/src/index.ts
@@ -15,6 +15,7 @@ import { ZerionAPI } from './zerion'
 import { MetaSwapAPI } from './metaswap'
 import { GoPlusLabsAPI } from './gopluslabs'
 import { NextIDProofAPI, NextIDStorageAPI } from './NextID'
+import { EthereumWeb3API } from './web3'
 
 export * from './helpers'
 export * from './types'
@@ -37,4 +38,5 @@ export const DeBank = new DeBankAPI()
 export const Zerion = new ZerionAPI()
 export const MetaSwap = new MetaSwapAPI()
 export const NextIDStorage = new NextIDStorageAPI()
+export const EthereumWeb3 = new EthereumWeb3API()
 export const NextIDProof = new NextIDProofAPI()
diff --git a/packages/web3-providers/src/web3/index.ts b/packages/web3-providers/src/web3/index.ts
new file mode 100644
index 000000000000..a388ea24bb12
--- /dev/null
+++ b/packages/web3-providers/src/web3/index.ts
@@ -0,0 +1,101 @@
+import { first, nth } from 'lodash-unified'
+import Web3SDK from 'web3'
+import type { FeeHistoryResult } from 'web3-eth'
+import { GasOptionType } from '@masknet/web3-shared-base'
+import { ChainId, chainResolver, formatWeiToGwei, GasOption, getRPCConstants, Web3 } from '@masknet/web3-shared-evm'
+import type { GasOptionAPI } from '../types'
+
+function avg(arr: number[]) {
+    const sum = arr.reduce((a, v) => a + v)
+    return Math.round(sum / arr.length)
+}
+
+export class EthereumWeb3API implements GasOptionAPI.Provider<ChainId, GasOption> {
+    static HISTORICAL_BLOCKS = 4
+
+    private formatFeeHistory(result: FeeHistoryResult) {
+        let index = 0
+        const blockNumber = Number(result.oldestBlock)
+        const blocks = []
+
+        while (index < EthereumWeb3API.HISTORICAL_BLOCKS) {
+            blocks.push({
+                number: blockNumber + index,
+                baseFeePerGas: Number.parseInt(nth(result.baseFeePerGas, index) ?? '0', 16),
+                gasUsedRatio: nth(result.gasUsedRatio, index) || 0,
+                priorityFeePerGas:
+                    nth(result.reward, index)?.map((x) => Number.parseInt(x, 16)) ?? new Array(3).fill(0),
+            })
+            index += 1
+        }
+        return blocks
+    }
+
+    private async getGasOptionsForEIP1559(web3: Web3): Promise<Record<GasOptionType, GasOption>> {
+        const history = await web3.eth.getFeeHistory(EthereumWeb3API.HISTORICAL_BLOCKS, 'pending', [25, 50, 75])
+        const blocks = this.formatFeeHistory(history)
+        const slow = avg(blocks.map((b) => b.priorityFeePerGas[0]))
+        const normal = avg(blocks.map((b) => b.priorityFeePerGas[1]))
+        const fast = avg(blocks.map((b) => b.priorityFeePerGas[2]))
+
+        // get the base fee per gas from the pending block
+        const block = await web3.eth.getBlock('pending')
+        const baseFeePerGas = block?.baseFeePerGas ?? 0
+
+        return {
+            [GasOptionType.FAST]: {
+                estimatedBaseFee: formatWeiToGwei(baseFeePerGas).toFixed(),
+                estimatedSeconds: 0,
+                suggestedMaxFeePerGas: formatWeiToGwei(baseFeePerGas + fast).toFixed(),
+                suggestedMaxPriorityFeePerGas: formatWeiToGwei(fast).toFixed(),
+            },
+            [GasOptionType.NORMAL]: {
+                estimatedBaseFee: formatWeiToGwei(baseFeePerGas).toFixed(),
+                estimatedSeconds: 0,
+                suggestedMaxFeePerGas: formatWeiToGwei(baseFeePerGas + normal).toFixed(),
+                suggestedMaxPriorityFeePerGas: formatWeiToGwei(normal).toFixed(),
+            },
+            [GasOptionType.SLOW]: {
+                estimatedBaseFee: formatWeiToGwei(baseFeePerGas).toFixed(),
+                estimatedSeconds: 0,
+                suggestedMaxFeePerGas: formatWeiToGwei(baseFeePerGas + slow).toFixed(),
+                suggestedMaxPriorityFeePerGas: formatWeiToGwei(slow).toFixed(),
+            },
+        }
+    }
+
+    private async getGasOptionsForPriorEIP1559(web3: Web3): Promise<Record<GasOptionType, GasOption>> {
+        const gasPrice = await web3.eth.getGasPrice()
+        return {
+            [GasOptionType.FAST]: {
+                estimatedBaseFee: '0',
+                estimatedSeconds: 0,
+                suggestedMaxFeePerGas: formatWeiToGwei(gasPrice).toFixed(),
+                suggestedMaxPriorityFeePerGas: '0',
+            },
+            [GasOptionType.NORMAL]: {
+                estimatedBaseFee: '0',
+                estimatedSeconds: 0,
+                suggestedMaxFeePerGas: formatWeiToGwei(gasPrice).toFixed(),
+                suggestedMaxPriorityFeePerGas: '0',
+            },
+            [GasOptionType.SLOW]: {
+                estimatedBaseFee: '0',
+                estimatedSeconds: 0,
+                suggestedMaxFeePerGas: formatWeiToGwei(gasPrice).toFixed(),
+                suggestedMaxPriorityFeePerGas: '0',
+            },
+        }
+    }
+
+    async getGasOptions(chainId: ChainId): Promise<Record<GasOptionType, GasOption>> {
+        const RPC_URL = first(getRPCConstants(chainId).RPC_URLS)
+        if (!RPC_URL) throw new Error('Failed to create web3 provider.')
+
+        const web3 = new Web3SDK(RPC_URL)
+        const isEIP1559 = chainResolver.isSupport(chainId, 'EIP1559')
+
+        if (isEIP1559) return this.getGasOptionsForEIP1559(web3)
+        else return this.getGasOptionsForPriorEIP1559(web3)
+    }
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 0657960f2f7f..d8af00ce58c0 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1409,6 +1409,8 @@ importers:
       urlcat: ^2.0.4
       uuid: ^8.3.2
       wallet.ts: ^1.0.1
+      web3: 1.7.3
+      web3-eth: 1.7.3
     dependencies:
       '@dimensiondev/mask-wallet-core': 0.1.0-20211013082857-eb62e5f
       '@masknet/plugin-infra': link:../plugin-infra
@@ -1430,6 +1432,8 @@ importers:
       urlcat: 2.0.4
       uuid: 8.3.2
       wallet.ts: 1.0.1
+      web3: 1.7.3
+      web3-eth: 1.7.3
     devDependencies:
       '@types/lru-cache': 7.10.10
 
@@ -1624,7 +1628,7 @@ packages:
     dependencies:
       '@0xproject/utils': 0.2.4
       chalk: 2.4.2
-      glob: 7.2.0
+      glob: 7.2.3
       handlebars: 4.7.7
       lodash: 4.17.21
       mkdirp: 0.5.6
@@ -1639,7 +1643,7 @@ packages:
     dependencies:
       '@0xproject/utils': 0.3.4
       chalk: 2.4.2
-      glob: 7.2.0
+      glob: 7.2.3
       handlebars: 4.7.7
       lodash: 4.17.21
       mkdirp: 0.5.6
@@ -1667,7 +1671,7 @@ packages:
     dev: false
 
   /@0xproject/json-schemas/0.7.24:
-    resolution: {integrity: sha1-IaErQ6sKtKowLQLEiRZozaNrbGQ=}
+    resolution: {integrity: sha512-20MeFHMptuv0e58mjSLmW84m2HbYdmuxFeeXqGZjv047zBawONe2aXKqLX266XYjgNSif/cDVzdgh7/46J9MVQ==}
     engines: {node: '>=6.12'}
     dependencies:
       '@0xproject/typescript-typings': 0.3.2
@@ -1684,7 +1688,7 @@ packages:
     dev: false
 
   /@0xproject/types/0.7.0:
-    resolution: {integrity: sha1-+tE5Je6SrU7hmAZopcsr7U3Kq48=}
+    resolution: {integrity: sha512-LlTnq7raPnCioCokNy5CLDxZJeg3KtcHT4PBJD6BDiXYtNJxBWvL7/jr6JiwdjReNg7ihGi1265VKfFX7qukRw==}
     engines: {node: '>=6.12'}
     dependencies:
       '@types/node': 17.0.34
@@ -1692,7 +1696,7 @@ packages:
     dev: false
 
   /@0xproject/typescript-typings/0.3.2:
-    resolution: {integrity: sha1-q8NgtEGv2pkxAEUMqDad+r91k2s=}
+    resolution: {integrity: sha512-sHwGTxerREyQhyXFHhZRHvy7PlbBUjsoVbxhf5f+9JasC+IhQ2Nv4uJFjOo16uUPPp7l+lsRUvK/ZwrdGRbFBA==}
     engines: {node: '>=6.12'}
     dependencies:
       '@0xproject/types': 0.7.0
@@ -5532,7 +5536,7 @@ packages:
       '@ethersproject/properties': 5.4.0
       '@ethersproject/random': 5.4.0
       '@ethersproject/strings': 5.6.0
-      '@ethersproject/transactions': 5.4.0
+      '@ethersproject/transactions': 5.6.0
       aes-js: 3.0.0
       scrypt-js: 3.0.1
     dev: false
@@ -5635,7 +5639,7 @@ packages:
       '@ethersproject/rlp': 5.4.0
       '@ethersproject/sha2': 5.4.0
       '@ethersproject/strings': 5.6.0
-      '@ethersproject/transactions': 5.4.0
+      '@ethersproject/transactions': 5.6.0
       '@ethersproject/web': 5.4.0
       bech32: 1.1.4
       ws: 7.4.6
@@ -12014,7 +12018,7 @@ packages:
     dev: true
 
   /async/1.5.2:
-    resolution: {integrity: sha1-7GphrlZIDAw8skHJVhjiCJL5Zyo=}
+    resolution: {integrity: sha512-nSVgobk4rv61R9PUSDtYt7mPVB2olxNR5RWJcAsH676/ef11bUZwvu7+RGYrYauVdDPcO519v68wRhXQtxsV9w==}
     dev: false
 
   /async/2.6.3:
@@ -12094,7 +12098,7 @@ packages:
     dev: false
 
   /axios/0.17.1:
-    resolution: {integrity: sha1-LY4+XQvb1zJ/kbyBT1xXZg+Bgk0=}
+    resolution: {integrity: sha512-mZzWRyJeJ0rtK7e1/6iYBUzmeXjzei+1h1IvbedyU0sB52++tU5AU6r6TLXpwNVR0ebXIpvTVW+9CpWNyc1n8w==}
     deprecated: Critical security vulnerability fixed in v0.21.1. For more information, see https://github.com/axios/axios/pull/3410
     dependencies:
       follow-redirects: 1.15.0
@@ -12128,7 +12132,7 @@ packages:
     dev: false
 
   /babel-code-frame/6.26.0:
-    resolution: {integrity: sha1-Y/1D99weO7fONZR9uP42mj9Yx0s=}
+    resolution: {integrity: sha512-XqYMR2dfdGMW+hd0IUZ2PwK+fGeFkOxZJ0wY+JaQAHzt1Zx8LcvpiZD2NiGkEG8qx0CfkAOr5xt76d1e8vG90g==}
     dependencies:
       chalk: 1.1.3
       esutils: 2.0.3
@@ -12175,7 +12179,7 @@ packages:
     dev: false
 
   /babel-helper-builder-binary-assignment-operator-visitor/6.24.1:
-    resolution: {integrity: sha1-zORReto1b0IgvK6KAsKzRvmlZmQ=}
+    resolution: {integrity: sha512-gCtfYORSG1fUMX4kKraymq607FWgMWg+j42IFPc18kFQEsmtaibP4UrqsXt8FlEJle25HUd4tsoDR7H2wDhe9Q==}
     dependencies:
       babel-helper-explode-assignable-expression: 6.24.1
       babel-runtime: 6.26.0
@@ -12185,7 +12189,7 @@ packages:
     dev: false
 
   /babel-helper-call-delegate/6.24.1:
-    resolution: {integrity: sha1-7Oaqzdx25Bw0YfiL/Fdb0Nqi340=}
+    resolution: {integrity: sha512-RL8n2NiEj+kKztlrVJM9JT1cXzzAdvWFh76xh/H1I4nKwunzE4INBXn8ieCZ+wh4zWszZk7NBS1s/8HR5jDkzQ==}
     dependencies:
       babel-helper-hoist-variables: 6.24.1
       babel-runtime: 6.26.0
@@ -12196,7 +12200,7 @@ packages:
     dev: false
 
   /babel-helper-define-map/6.26.0:
-    resolution: {integrity: sha1-pfVtq0GiX5fstJjH66ypgZ+Vvl8=}
+    resolution: {integrity: sha512-bHkmjcC9lM1kmZcVpA5t2om2nzT/xiZpo6TJq7UlZ3wqKfzia4veeXbIhKvJXAMzhhEBd3cR1IElL5AenWEUpA==}
     dependencies:
       babel-helper-function-name: 6.24.1
       babel-runtime: 6.26.0
@@ -12207,7 +12211,7 @@ packages:
     dev: false
 
   /babel-helper-explode-assignable-expression/6.24.1:
-    resolution: {integrity: sha1-8luCz33BBDPFX3BZLVdGQArCLKo=}
+    resolution: {integrity: sha512-qe5csbhbvq6ccry9G7tkXbzNtcDiH4r51rrPUbwwoTzZ18AqxWYRZT6AOmxrpxKnQBW0pYlBI/8vh73Z//78nQ==}
     dependencies:
       babel-runtime: 6.26.0
       babel-traverse: 6.26.0
@@ -12217,7 +12221,7 @@ packages:
     dev: false
 
   /babel-helper-function-name/6.24.1:
-    resolution: {integrity: sha1-00dbjAPtmCQqJbSDUasYOZ01gKk=}
+    resolution: {integrity: sha512-Oo6+e2iX+o9eVvJ9Y5eKL5iryeRdsIkwRYheCuhYdVHsdEQysbc2z2QkqCLIYnNxkT5Ss3ggrHdXiDI7Dhrn4Q==}
     dependencies:
       babel-helper-get-function-arity: 6.24.1
       babel-runtime: 6.26.0
@@ -12229,28 +12233,28 @@ packages:
     dev: false
 
   /babel-helper-get-function-arity/6.24.1:
-    resolution: {integrity: sha1-j3eCqpNAfEHTqlCQj4mwMbG2hT0=}
+    resolution: {integrity: sha512-WfgKFX6swFB1jS2vo+DwivRN4NB8XUdM3ij0Y1gnC21y1tdBoe6xjVnd7NSI6alv+gZXCtJqvrTeMW3fR/c0ng==}
     dependencies:
       babel-runtime: 6.26.0
       babel-types: 6.26.0
     dev: false
 
   /babel-helper-hoist-variables/6.24.1:
-    resolution: {integrity: sha1-HssnaJydJVE+rbyZFKc/VAi+enY=}
+    resolution: {integrity: sha512-zAYl3tqerLItvG5cKYw7f1SpvIxS9zi7ohyGHaI9cgDUjAT6YcY9jIEH5CstetP5wHIVSceXwNS7Z5BpJg+rOw==}
     dependencies:
       babel-runtime: 6.26.0
       babel-types: 6.26.0
     dev: false
 
   /babel-helper-optimise-call-expression/6.24.1:
-    resolution: {integrity: sha1-96E0J7qfc/j0+pk8VKl4gtEkQlc=}
+    resolution: {integrity: sha512-Op9IhEaxhbRT8MDXx2iNuMgciu2V8lDvYCNQbDGjdBNCjaMvyLf4wl4A3b8IgndCyQF8TwfgsQ8T3VD8aX1/pA==}
     dependencies:
       babel-runtime: 6.26.0
       babel-types: 6.26.0
     dev: false
 
   /babel-helper-regex/6.26.0:
-    resolution: {integrity: sha1-MlxZ+QL4LyS3T6zu0DY5VPZJXnI=}
+    resolution: {integrity: sha512-VlPiWmqmGJp0x0oK27Out1D+71nVVCTSdlbhIVoaBAj2lUgrNjBCRR9+llO4lTSb2O4r7PJg+RobRkhBrf6ofg==}
     dependencies:
       babel-runtime: 6.26.0
       babel-types: 6.26.0
@@ -12258,7 +12262,7 @@ packages:
     dev: false
 
   /babel-helper-remap-async-to-generator/6.24.1:
-    resolution: {integrity: sha1-XsWBgnrXI/7N04HxySg5BnbkVRs=}
+    resolution: {integrity: sha512-RYqaPD0mQyQIFRu7Ho5wE2yvA/5jxqCIj/Lv4BXNq23mHYu/vxikOy2JueLiBxQknwapwrJeNCesvY0ZcfnlHg==}
     dependencies:
       babel-helper-function-name: 6.24.1
       babel-runtime: 6.26.0
@@ -12270,7 +12274,7 @@ packages:
     dev: false
 
   /babel-helper-replace-supers/6.24.1:
-    resolution: {integrity: sha1-v22/5Dk40XNpohPKiov3S2qQqxo=}
+    resolution: {integrity: sha512-sLI+u7sXJh6+ToqDr57Bv973kCepItDhMou0xCP2YPVmR1jkHSCY+p1no8xErbV1Siz5QE8qKT1WIwybSWlqjw==}
     dependencies:
       babel-helper-optimise-call-expression: 6.24.1
       babel-messages: 6.23.0
@@ -12283,7 +12287,7 @@ packages:
     dev: false
 
   /babel-helpers/6.24.1:
-    resolution: {integrity: sha1-NHHenK7DiOXIUOWX5Yom3fN2ArI=}
+    resolution: {integrity: sha512-n7pFrqQm44TCYvrCDb0MqabAF+JUBq+ijBvNMUxpkLjJaAu32faIexewMumrH5KLLJ1HDyT0PTEqRyAe/GwwuQ==}
     dependencies:
       babel-runtime: 6.26.0
       babel-template: 6.26.0
@@ -12402,7 +12406,7 @@ packages:
     dev: true
 
   /babel-messages/6.23.0:
-    resolution: {integrity: sha1-8830cDhYA1sqKVHG7F7fbGLyYw4=}
+    resolution: {integrity: sha512-Bl3ZiA+LjqaMtNYopA9TYE9HP1tQ+E5dLxE0XrAzcIJeK2UqF0/EaqXwBn9esd4UmTfEab+P+UYQ1GnioFIb/w==}
     dependencies:
       babel-runtime: 6.26.0
     dev: false
@@ -12425,7 +12429,7 @@ packages:
     dev: true
 
   /babel-plugin-check-es2015-constants/6.22.0:
-    resolution: {integrity: sha1-NRV7EBQm/S/9PaP3XH0ekYNbv4o=}
+    resolution: {integrity: sha512-B1M5KBP29248dViEo1owyY32lk1ZSH2DaNNrXLGt8lyjjHm7pBqAdQ7VKUPR6EEDO323+OvT3MQXbCin8ooWdA==}
     dependencies:
       babel-runtime: 6.26.0
     dev: false
@@ -12626,11 +12630,11 @@ packages:
     dev: true
 
   /babel-plugin-syntax-async-functions/6.13.0:
-    resolution: {integrity: sha1-ytnK0RkbWtY0vzCuCHI5HgZHvpU=}
+    resolution: {integrity: sha512-4Zp4unmHgw30A1eWI5EpACji2qMocisdXhAftfhXoSV9j0Tvj6nRFE3tOmRY912E0FMRm/L5xWE7MGVT2FoLnw==}
     dev: false
 
   /babel-plugin-syntax-exponentiation-operator/6.13.0:
-    resolution: {integrity: sha1-nufoM3KQ2pUoggGmpX9BcDF4MN4=}
+    resolution: {integrity: sha512-Z/flU+T9ta0aIEKl1tGEmN/pZiI1uXmCiGFRegKacQfEJzp7iNsKloZmyJlQr+75FCJtiFfGIK03SiCvCt9cPQ==}
     dev: false
 
   /babel-plugin-syntax-jsx/6.18.0:
@@ -12638,11 +12642,11 @@ packages:
     dev: true
 
   /babel-plugin-syntax-trailing-function-commas/6.22.0:
-    resolution: {integrity: sha1-ugNgk3+NBuQBgKQ/4NVhb/9TLPM=}
+    resolution: {integrity: sha512-Gx9CH3Q/3GKbhs07Bszw5fPTlU+ygrOGfAhEt7W2JICwufpC4SuO0mG0+4NykPBSYPMJhqvVlDBU17qB1D+hMQ==}
     dev: false
 
   /babel-plugin-transform-async-to-generator/6.24.1:
-    resolution: {integrity: sha1-ZTbjeK/2yx1VF6wOQOs+n8jQh2E=}
+    resolution: {integrity: sha512-7BgYJujNCg0Ti3x0c/DL3tStvnKS6ktIYOmo9wginv/dfZOrbSZ+qG4IRRHMBOzZ5Awb1skTiAsQXg/+IWkZYw==}
     dependencies:
       babel-helper-remap-async-to-generator: 6.24.1
       babel-plugin-syntax-async-functions: 6.13.0
@@ -12652,19 +12656,19 @@ packages:
     dev: false
 
   /babel-plugin-transform-es2015-arrow-functions/6.22.0:
-    resolution: {integrity: sha1-RSaSy3EdX3ncf4XkQM5BufJE0iE=}
+    resolution: {integrity: sha512-PCqwwzODXW7JMrzu+yZIaYbPQSKjDTAsNNlK2l5Gg9g4rz2VzLnZsStvp/3c46GfXpwkyufb3NCyG9+50FF1Vg==}
     dependencies:
       babel-runtime: 6.26.0
     dev: false
 
   /babel-plugin-transform-es2015-block-scoped-functions/6.22.0:
-    resolution: {integrity: sha1-u8UbSflk1wy42OC5ToICRs46YUE=}
+    resolution: {integrity: sha512-2+ujAT2UMBzYFm7tidUsYh+ZoIutxJ3pN9IYrF1/H6dCKtECfhmB8UkHVpyxDwkj0CYbQG35ykoz925TUnBc3A==}
     dependencies:
       babel-runtime: 6.26.0
     dev: false
 
   /babel-plugin-transform-es2015-block-scoping/6.26.0:
-    resolution: {integrity: sha1-1w9SmcEwjQXBL0Y4E7CgnnOxiV8=}
+    resolution: {integrity: sha512-YiN6sFAQ5lML8JjCmr7uerS5Yc/EMbgg9G8ZNmk2E3nYX4ckHR01wrkeeMijEf5WHNK5TW0Sl0Uu3pv3EdOJWw==}
     dependencies:
       babel-runtime: 6.26.0
       babel-template: 6.26.0
@@ -12676,7 +12680,7 @@ packages:
     dev: false
 
   /babel-plugin-transform-es2015-classes/6.24.1:
-    resolution: {integrity: sha1-WkxYpQyclGHlZLSyo7+ryXolhNs=}
+    resolution: {integrity: sha512-5Dy7ZbRinGrNtmWpquZKZ3EGY8sDgIVB4CU8Om8q8tnMLrD/m94cKglVcHps0BCTdZ0TJeeAWOq2TK9MIY6cag==}
     dependencies:
       babel-helper-define-map: 6.26.0
       babel-helper-function-name: 6.24.1
@@ -12692,7 +12696,7 @@ packages:
     dev: false
 
   /babel-plugin-transform-es2015-computed-properties/6.24.1:
-    resolution: {integrity: sha1-b+Ko0WiV1WNPTNmZttNICjCBWbM=}
+    resolution: {integrity: sha512-C/uAv4ktFP/Hmh01gMTvYvICrKze0XVX9f2PdIXuriCSvUmV9j+u+BB9f5fJK3+878yMK6dkdcq+Ymr9mrcLzw==}
     dependencies:
       babel-runtime: 6.26.0
       babel-template: 6.26.0
@@ -12701,26 +12705,26 @@ packages:
     dev: false
 
   /babel-plugin-transform-es2015-destructuring/6.23.0:
-    resolution: {integrity: sha1-mXux8auWf2gtKwh2/jWNYOdlxW0=}
+    resolution: {integrity: sha512-aNv/GDAW0j/f4Uy1OEPZn1mqD+Nfy9viFGBfQ5bZyT35YqOiqx7/tXdyfZkJ1sC21NyEsBdfDY6PYmLHF4r5iA==}
     dependencies:
       babel-runtime: 6.26.0
     dev: false
 
   /babel-plugin-transform-es2015-duplicate-keys/6.24.1:
-    resolution: {integrity: sha1-c+s9MQypaePvnskcU3QabxV2Qj4=}
+    resolution: {integrity: sha512-ossocTuPOssfxO2h+Z3/Ea1Vo1wWx31Uqy9vIiJusOP4TbF7tPs9U0sJ9pX9OJPf4lXRGj5+6Gkl/HHKiAP5ug==}
     dependencies:
       babel-runtime: 6.26.0
       babel-types: 6.26.0
     dev: false
 
   /babel-plugin-transform-es2015-for-of/6.23.0:
-    resolution: {integrity: sha1-9HyVsrYT3x0+zC/bdXNiPHUkhpE=}
+    resolution: {integrity: sha512-DLuRwoygCoXx+YfxHLkVx5/NpeSbVwfoTeBykpJK7JhYWlL/O8hgAK/reforUnZDlxasOrVPPJVI/guE3dCwkw==}
     dependencies:
       babel-runtime: 6.26.0
     dev: false
 
   /babel-plugin-transform-es2015-function-name/6.24.1:
-    resolution: {integrity: sha1-g0yJhTvDaxrw86TF26qU/Y6sqos=}
+    resolution: {integrity: sha512-iFp5KIcorf11iBqu/y/a7DK3MN5di3pNCzto61FqCNnUX4qeBwcV1SLqe10oXNnCaxBUImX3SckX2/o1nsrTcg==}
     dependencies:
       babel-helper-function-name: 6.24.1
       babel-runtime: 6.26.0
@@ -12730,13 +12734,13 @@ packages:
     dev: false
 
   /babel-plugin-transform-es2015-literals/6.22.0:
-    resolution: {integrity: sha1-T1SgLWzWbPkVKAAZox0xklN3yi4=}
+    resolution: {integrity: sha512-tjFl0cwMPpDYyoqYA9li1/7mGFit39XiNX5DKC/uCNjBctMxyL1/PT/l4rSlbvBG1pOKI88STRdUsWXB3/Q9hQ==}
     dependencies:
       babel-runtime: 6.26.0
     dev: false
 
   /babel-plugin-transform-es2015-modules-amd/6.24.1:
-    resolution: {integrity: sha1-Oz5UAXI5hC1tGcMBHEvS8AoA0VQ=}
+    resolution: {integrity: sha512-LnIIdGWIKdw7zwckqx+eGjcS8/cl8D74A3BpJbGjKTFFNJSMrjN4bIh22HY1AlkUbeLG6X6OZj56BDvWD+OeFA==}
     dependencies:
       babel-plugin-transform-es2015-modules-commonjs: 6.26.2
       babel-runtime: 6.26.0
@@ -12757,7 +12761,7 @@ packages:
     dev: false
 
   /babel-plugin-transform-es2015-modules-systemjs/6.24.1:
-    resolution: {integrity: sha1-/4mhQrkRmpBhlfXxBuzzBdlAfSM=}
+    resolution: {integrity: sha512-ONFIPsq8y4bls5PPsAWYXH/21Hqv64TBxdje0FvU3MhIV6QM2j5YS7KvAzg/nTIVLot2D2fmFQrFWCbgHlFEjg==}
     dependencies:
       babel-helper-hoist-variables: 6.24.1
       babel-runtime: 6.26.0
@@ -12767,7 +12771,7 @@ packages:
     dev: false
 
   /babel-plugin-transform-es2015-modules-umd/6.24.1:
-    resolution: {integrity: sha1-rJl+YoXNGO1hdq22B9YCNErThGg=}
+    resolution: {integrity: sha512-LpVbiT9CLsuAIp3IG0tfbVo81QIhn6pE8xBJ7XSeCtFlMltuar5VuBV6y6Q45tpui9QWcy5i0vLQfCfrnF7Kiw==}
     dependencies:
       babel-plugin-transform-es2015-modules-amd: 6.24.1
       babel-runtime: 6.26.0
@@ -12777,7 +12781,7 @@ packages:
     dev: false
 
   /babel-plugin-transform-es2015-object-super/6.24.1:
-    resolution: {integrity: sha1-JM72muIcuDp/hgPa0CH1cusnj40=}
+    resolution: {integrity: sha512-8G5hpZMecb53vpD3mjs64NhI1au24TAmokQ4B+TBFBjN9cVoGoOvotdrMMRmHvVZUEvqGUPWL514woru1ChZMA==}
     dependencies:
       babel-helper-replace-supers: 6.24.1
       babel-runtime: 6.26.0
@@ -12786,7 +12790,7 @@ packages:
     dev: false
 
   /babel-plugin-transform-es2015-parameters/6.24.1:
-    resolution: {integrity: sha1-V6w1GrScrxSpfNE7CfZv3wpiXys=}
+    resolution: {integrity: sha512-8HxlW+BB5HqniD+nLkQ4xSAVq3bR/pcYW9IigY+2y0dI+Y7INFeTbfAQr+63T3E4UDsZGjyb+l9txUnABWxlOQ==}
     dependencies:
       babel-helper-call-delegate: 6.24.1
       babel-helper-get-function-arity: 6.24.1
@@ -12799,20 +12803,20 @@ packages:
     dev: false
 
   /babel-plugin-transform-es2015-shorthand-properties/6.24.1:
-    resolution: {integrity: sha1-JPh11nIch2YbvZmkYi5R8U3jiqA=}
+    resolution: {integrity: sha512-mDdocSfUVm1/7Jw/FIRNw9vPrBQNePy6wZJlR8HAUBLybNp1w/6lr6zZ2pjMShee65t/ybR5pT8ulkLzD1xwiw==}
     dependencies:
       babel-runtime: 6.26.0
       babel-types: 6.26.0
     dev: false
 
   /babel-plugin-transform-es2015-spread/6.22.0:
-    resolution: {integrity: sha1-1taKmfia7cRTbIGlQujdnxdG+NE=}
+    resolution: {integrity: sha512-3Ghhi26r4l3d0Js933E5+IhHwk0A1yiutj9gwvzmFbVV0sPMYk2lekhOufHBswX7NCoSeF4Xrl3sCIuSIa+zOg==}
     dependencies:
       babel-runtime: 6.26.0
     dev: false
 
   /babel-plugin-transform-es2015-sticky-regex/6.24.1:
-    resolution: {integrity: sha1-AMHNsaynERLN8M9hJsLta0V8zbw=}
+    resolution: {integrity: sha512-CYP359ADryTo3pCsH0oxRo/0yn6UsEZLqYohHmvLQdfS9xkf+MbCzE3/Kolw9OYIY4ZMilH25z/5CbQbwDD+lQ==}
     dependencies:
       babel-helper-regex: 6.26.0
       babel-runtime: 6.26.0
@@ -12820,19 +12824,19 @@ packages:
     dev: false
 
   /babel-plugin-transform-es2015-template-literals/6.22.0:
-    resolution: {integrity: sha1-qEs0UPfp+PH2g51taH2oS7EjbY0=}
+    resolution: {integrity: sha512-x8b9W0ngnKzDMHimVtTfn5ryimars1ByTqsfBDwAqLibmuuQY6pgBQi5z1ErIsUOWBdw1bW9FSz5RZUojM4apg==}
     dependencies:
       babel-runtime: 6.26.0
     dev: false
 
   /babel-plugin-transform-es2015-typeof-symbol/6.23.0:
-    resolution: {integrity: sha1-3sCfHN3/lLUqxz1QXITfWdzOs3I=}
+    resolution: {integrity: sha512-fz6J2Sf4gYN6gWgRZaoFXmq93X+Li/8vf+fb0sGDVtdeWvxC9y5/bTD7bvfWMEq6zetGEHpWjtzRGSugt5kNqw==}
     dependencies:
       babel-runtime: 6.26.0
     dev: false
 
   /babel-plugin-transform-es2015-unicode-regex/6.24.1:
-    resolution: {integrity: sha1-04sS9C6nMj9yk4fxinxa4frrNek=}
+    resolution: {integrity: sha512-v61Dbbihf5XxnYjtBN04B/JBvsScY37R1cZT5r9permN1cp+b70DY3Ib3fIkgn1DI9U3tGgBJZVD8p/mE/4JbQ==}
     dependencies:
       babel-helper-regex: 6.26.0
       babel-runtime: 6.26.0
@@ -12840,7 +12844,7 @@ packages:
     dev: false
 
   /babel-plugin-transform-exponentiation-operator/6.24.1:
-    resolution: {integrity: sha1-KrDJx/MJj6SJB3cruBP+QejeOg4=}
+    resolution: {integrity: sha512-LzXDmbMkklvNhprr20//RStKVcT8Cu+SQtX18eMHLhjHf2yFzwtQ0S2f0jQ+89rokoNdmwoSqYzAhq86FxlLSQ==}
     dependencies:
       babel-helper-builder-binary-assignment-operator-visitor: 6.24.1
       babel-plugin-syntax-exponentiation-operator: 6.13.0
@@ -12850,13 +12854,13 @@ packages:
     dev: false
 
   /babel-plugin-transform-regenerator/6.26.0:
-    resolution: {integrity: sha1-4HA2lvveJ/Cj78rPi03KL3s6jy8=}
+    resolution: {integrity: sha512-LS+dBkUGlNR15/5WHKe/8Neawx663qttS6AGqoOUhICc9d1KciBvtrQSuc0PI+CxQ2Q/S1aKuJ+u64GtLdcEZg==}
     dependencies:
       regenerator-transform: 0.10.1
     dev: false
 
   /babel-plugin-transform-strict-mode/6.24.1:
-    resolution: {integrity: sha1-1fr3qleKZbvlkc9e2uBKDGcCB1g=}
+    resolution: {integrity: sha512-j3KtSpjyLSJxNoCDrhwiJad8kw0gJ9REGj8/CqL0HeRyLnvUNYV9zcqluL6QJSXh3nfsLEmSLvwRfGzrgR96Pw==}
     dependencies:
       babel-runtime: 6.26.0
       babel-types: 6.26.0
@@ -12937,7 +12941,7 @@ packages:
     dev: true
 
   /babel-register/6.26.0:
-    resolution: {integrity: sha1-btAhFz4vy0htestFxgCahW9kcHE=}
+    resolution: {integrity: sha512-veliHlHX06wjaeY8xNITbveXSiI+ASFnOqvne/LaIJIqOWi2Ogmj91KOugEz/hoh/fwMhXNBJPCv8Xaz5CyM4A==}
     dependencies:
       babel-core: 6.26.3
       babel-runtime: 6.26.0
@@ -12951,14 +12955,14 @@ packages:
     dev: false
 
   /babel-runtime/6.26.0:
-    resolution: {integrity: sha1-llxwWGaOgrVde/4E/yM3vItWR/4=}
+    resolution: {integrity: sha512-ITKNuq2wKlW1fJg9sSW52eepoYgZBggvOAHC0u/CYu/qxQ9EVzThCgR69BnSXLHjy2f7SY5zaQ4yt7H9ZVxY2g==}
     dependencies:
       core-js: 2.6.12
       regenerator-runtime: 0.11.1
     dev: false
 
   /babel-template/6.26.0:
-    resolution: {integrity: sha1-3gPi0WOWsGn0bdn/+FIfsaDjXgI=}
+    resolution: {integrity: sha512-PCOcLFW7/eazGUKIoqH97sO9A2UYMahsn/yRQ7uOk37iutwjq7ODtcTNF+iFDSHNfkctqsLRjLP7URnOx0T1fg==}
     dependencies:
       babel-runtime: 6.26.0
       babel-traverse: 6.26.0
@@ -12970,7 +12974,7 @@ packages:
     dev: false
 
   /babel-traverse/6.26.0:
-    resolution: {integrity: sha1-RqnL1+3MYsjlwGTi0tjQ9ANXZu4=}
+    resolution: {integrity: sha512-iSxeXx7apsjCHe9c7n8VtRXGzI2Bk1rBSOJgCCjfyXb6v1aCqE1KSEpq/8SXuVN8Ka/Rh1WDTF0MDzkvTA4MIA==}
     dependencies:
       babel-code-frame: 6.26.0
       babel-messages: 6.23.0
@@ -12986,7 +12990,7 @@ packages:
     dev: false
 
   /babel-types/6.26.0:
-    resolution: {integrity: sha1-o7Bz+Uq0nrb6Vc1lInozQ4BjJJc=}
+    resolution: {integrity: sha512-zhe3V/26rCWsEZK8kZN+HaQj5yQ1CilTObixFzKW1UWjqG7618Twz6YEsCnjfg5gBcJh02DrpCkS9h98ZqDY+g==}
     dependencies:
       babel-runtime: 6.26.0
       esutils: 2.0.3
@@ -12995,7 +12999,7 @@ packages:
     dev: false
 
   /babelify/7.3.0:
-    resolution: {integrity: sha1-qlau3nBn/XvVSWZu4W3ChQh+iOU=}
+    resolution: {integrity: sha512-vID8Fz6pPN5pJMdlUnNFSfrlcx5MUule4k9aKs/zbZPyXxMTcRrB0M4Tarw22L8afr8eYSWxDPYCob3TdrqtlA==}
     dependencies:
       babel-core: 6.26.3
       object-assign: 4.1.1
@@ -13157,7 +13161,7 @@ packages:
       file-uri-to-path: 1.0.0
 
   /bintrees/1.0.2:
-    resolution: {integrity: sha1-SfiW1uhYpKSZ34XDj7OZua/4QPg=}
+    resolution: {integrity: sha512-VOMgTMwjAaUG580SXn3LacVgjurrbMme7ZZNYGSSV7mmtY6QQRh0Eg3pwIcntQ77DErK1L0NxkbetjcoXzVwKw==}
     dev: false
 
   /bip32/2.0.6:
@@ -13598,7 +13602,7 @@ packages:
     dev: false
 
   /buffer-to-arraybuffer/0.0.5:
-    resolution: {integrity: sha1-YGSkD6dutDxyOrqe+PbhIW0QURo=}
+    resolution: {integrity: sha512-3dthu5CYiVB1DEJp61FtApNnNndTckcqe4pFcLdvHtrpG+kcyekCJKg4MRiDcFW7A6AODnXB9U4dwQiCW5kzJQ==}
     dev: false
 
   /buffer-xor/1.0.3:
@@ -13638,7 +13642,7 @@ packages:
       node-gyp-build: 4.3.0
 
   /builtin-modules/1.1.1:
-    resolution: {integrity: sha1-Jw8HbFpywC9bZaR9+Uxf46J4iS8=}
+    resolution: {integrity: sha512-wxXCdllwGhI2kCC0MnvTGYTMvnVZTvqgypkiTI8Pa5tcz2i6VqsqwYGgqwXji+4RgCzms6EajE4IxiUH6HH8nQ==}
     engines: {node: '>=0.10.0'}
     dev: false
 
@@ -13920,7 +13924,7 @@ packages:
     dev: false
 
   /checkpoint-store/1.1.0:
-    resolution: {integrity: sha1-BOTLUWuRQziTWB5tRgGnjpVS6gY=}
+    resolution: {integrity: sha512-J/NdY2WvIx654cc6LWSq/IYFFCUf75fFTgwzFnmbqyORH4MwgiQCgswLLKBGzmsyTI5V7i5bp/So6sMbDWhedg==}
     dependencies:
       functional-red-black-tree: 1.0.1
     dev: false
@@ -14233,7 +14237,7 @@ packages:
     dev: true
 
   /clone-response/1.0.2:
-    resolution: {integrity: sha1-0dyXOSAxTfZ/vrlCI7TuNQI56Ws=}
+    resolution: {integrity: sha512-yjLXh88P599UOyPTFX0POsd7WxnbsVsGohcwzHOLspIhhpalPw1BcqED8NblyZLKcGrL8dTgMlcaZxV2jAD41Q==}
     dependencies:
       mimic-response: 1.0.1
     dev: false
@@ -14678,7 +14682,7 @@ packages:
     resolution: {integrity: sha512-VP/xYuvJ0MJWRAobcmQ8F2H6Bsn+s7zqAAjFaHGBMc5AQm7zaelhD1LGduFn2EehEcQcU+br6t+fwbpQ5d1ZWA==}
 
   /core-util-is/1.0.2:
-    resolution: {integrity: sha512-3lqz5YjWTYnW6dlDa5TLaTCcShfar1e40rmcJVwCBJC6mWlFuj0eCHIElmG1g5kyuJ/GD+8Wn4FFCcz4gJPfaQ==}
+    resolution: {integrity: sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=}
     dev: false
 
   /core-util-is/1.0.3:
@@ -15535,7 +15539,7 @@ packages:
     engines: {node: '>=0.10'}
 
   /decompress-response/3.3.0:
-    resolution: {integrity: sha1-gKTdMjdIOEv6JICDYirt7Jgq3/M=}
+    resolution: {integrity: sha512-BzRPQuY1ip+qDonAOz42gRm/pg9F768C+npV/4JOsxRC2sq+Rlk+Q4ZCAsOhnIaMrgarILY+RMUIvMmmX1qAEA==}
     engines: {node: '>=4'}
     dependencies:
       mimic-response: 1.0.1
@@ -15651,7 +15655,7 @@ packages:
       isobject: 3.0.1
 
   /defined/1.0.0:
-    resolution: {integrity: sha1-yY2bzvdWdBiOEQlpFRGZ45sfppM=}
+    resolution: {integrity: sha512-Y2caI5+ZwS5c3RiNDJ6u53VhQHv+hHKwhkI1iHvceKUHw9Df6EK2zRLfjejRgMuCuxK7PfSWIMwWecceVvThjQ==}
     dev: false
 
   /del/4.1.1:
@@ -15727,7 +15731,7 @@ packages:
     dev: true
 
   /detect-indent/4.0.0:
-    resolution: {integrity: sha1-920GQ1LN9Docts5hnE7jqUdd4gg=}
+    resolution: {integrity: sha512-BDKtmHlOzwI7iRuEkhzsnPoi5ypEhWAJB5RvHWe1kMr06js3uK5B3734i3ui5Yd+wOJV1cpE4JnivPD283GU/A==}
     engines: {node: '>=0.10.0'}
     dependencies:
       repeating: 2.0.1
@@ -15873,7 +15877,7 @@ packages:
     dev: false
 
   /doctrine/0.7.2:
-    resolution: {integrity: sha1-fLhgNZujvpDgQLJrcpzkv6ZUxSM=}
+    resolution: {integrity: sha512-qiB/Rir6Un6Ad/TIgTRzsremsTGWzs8j7woXvp14jgq00676uBiBT5eUOi+FgRywZFVy5Us/c04ISRpZhRbS6w==}
     engines: {node: '>=0.10.0'}
     dependencies:
       esutils: 1.1.6
@@ -16034,7 +16038,7 @@ packages:
     dev: false
 
   /duplexer3/0.1.4:
-    resolution: {integrity: sha1-7gHdHKwO08vH/b6jfcCo8c4ALOI=}
+    resolution: {integrity: sha512-CEj8FwwNA4cVH2uFCoHUrmojhYh1vmCdOaneKJXwkeY1i9jnlslVo9dx+hQ5Hl9GnH/Bwy/IjxAyOePyPKYnzA==}
     dev: false
 
   /duplexify/3.7.1:
@@ -16128,7 +16132,7 @@ packages:
     optional: true
 
   /emailjs/2.2.0:
-    resolution: {integrity: sha1-ulsj5KSwpFEPZS6HOxVOlAe2ygM=}
+    resolution: {integrity: sha512-J9HNx13GA5DnJma10YxsSqYCErTyB0KoVflTddPTyKlEVHM0MckZXn/zDqovdacwWkHCxqC9AKVY8GMPaGvaGQ==}
     dependencies:
       addressparser: 0.3.2
       emailjs-mime-codec: 2.0.9
@@ -16429,6 +16433,7 @@ packages:
       string.prototype.trimend: 1.0.5
       string.prototype.trimstart: 1.0.5
       unbox-primitive: 1.0.2
+    dev: true
 
   /es-abstract/1.20.1:
     resolution: {integrity: sha512-WEm2oBhfoI2sImeM4OF2zE2V3BYdSF+KnSi9Sidz51fQHd7+JuF8Xgcj9/0o+OWeIeIS/MiuNnlruQrJf16GQA==}
@@ -16904,7 +16909,7 @@ packages:
     resolution: {integrity: sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==}
 
   /esutils/1.1.6:
-    resolution: {integrity: sha1-wBzKqa5LiXxtDD4hCuUvPHqEQ3U=}
+    resolution: {integrity: sha512-RG1ZkUT7iFJG9LSHr7KDuuMSlujfeTtMNIcInURxKAxhMtwQhI3NrQhz26gZQYlsYZQKzsnwtpKrFKj9K9Qu1A==}
     engines: {node: '>=0.10.0'}
     dev: false
 
@@ -16969,7 +16974,7 @@ packages:
     dev: false
 
   /eth-query/2.1.2:
-    resolution: {integrity: sha1-1nQdkAAQa1FRDHLbktY2VFam2l4=}
+    resolution: {integrity: sha512-srES0ZcvwkR/wd5OQBRA1bIJMww1skfGS0s8wlwK3/oNP4+wnds60krvu5R1QbpRQjMmpG5OMIWro5s7gvDPsA==}
     dependencies:
       json-rpc-random-id: 1.0.1
       xtend: 4.0.2
@@ -16982,7 +16987,7 @@ packages:
     dev: false
 
   /eth-sig-util/1.4.2:
-    resolution: {integrity: sha1-jZWCAsftuq6Dlwf7pvCf8ydgYhA=}
+    resolution: {integrity: sha512-iNZ576iTOGcfllftB73cPB5AN+XUQAT/T8xzsILsghXC1o8gJUqe3RHlcDqagu+biFpYQ61KQrZZJza8eRSYqw==}
     deprecated: Deprecated in favor of '@metamask/eth-sig-util'
     dependencies:
       ethereumjs-abi: github.com/ethereumjs/ethereumjs-abi/ee3994657fa7a427238e6ba92a84d0b529bbcde0
@@ -16999,7 +17004,7 @@ packages:
       js-sha3: 0.8.0
 
   /ethereum-common/0.0.18:
-    resolution: {integrity: sha1-L9w1dvIykDNYl26znaeDIT/5Uj8=}
+    resolution: {integrity: sha512-EoltVQTRNg2Uy4o84qpa2aXymXDJhxm7eos/ACOg0DG4baAbMjhbdAEsx9GeE8sC3XCxnYvrrzZDH8D8MtA2iQ==}
     dev: false
 
   /ethereum-common/0.2.0:
@@ -17627,7 +17632,7 @@ packages:
     dev: false
 
   /fake-merkle-patricia-tree/1.0.1:
-    resolution: {integrity: sha1-S4w6z7Ugr635hgsfFM2M40As3dM=}
+    resolution: {integrity: sha512-Tgq37lkc9pUIgIKw5uitNUKcgcYL3R6JvXtKQbOf/ZSavXbidsksgp/pAY6p//uhw0I4yoMsvTSovvVIsk/qxA==}
     dependencies:
       checkpoint-store: 1.1.0
     dev: false
@@ -17772,7 +17777,7 @@ packages:
     dev: false
 
   /fetch-ponyfill/4.1.0:
-    resolution: {integrity: sha1-rjzl9zLGReq4fkroeTQUcJsjmJM=}
+    resolution: {integrity: sha512-knK9sGskIg2T7OnYLdZ2hZXn0CtDrAIBxYQLpmEf0BqfdWnwmM1weccUl5+4EdA44tzNSFAuxITPbXtPehUB3g==}
     dependencies:
       node-fetch: 1.7.3
     dev: false
@@ -17923,7 +17928,7 @@ packages:
     dev: true
 
   /find-versions/2.0.0:
-    resolution: {integrity: sha1-KtkNSQ9oKMGqQCks9wmsMxghDDw=}
+    resolution: {integrity: sha512-nzvoTkgyiTcXOT9PNHYWP2wlAoNbXanK/FnlHnB6v2yA1HoyDNTxN08+NobUIXL0qnBZPtegjXgohsQa8YiT+Q==}
     engines: {node: '>=0.10.0'}
     dependencies:
       array-uniq: 1.0.3
@@ -18430,7 +18435,7 @@ packages:
     dev: true
 
   /get-stream/3.0.0:
-    resolution: {integrity: sha1-jpQ9E1jcN1VQVOy+LtsFqhdO3hQ=}
+    resolution: {integrity: sha512-GlhdIUuVakc8SJ6kK0zAFbiGzRFzNnY4jUuEbV9UROo4Y+0Ny4fjvcZFVTeDA4odpFyOQzaw6hXukJSq/f28sQ==}
     engines: {node: '>=4'}
     dev: false
 
@@ -18906,7 +18911,7 @@ packages:
     engines: {node: '>=6'}
 
   /has-ansi/2.0.0:
-    resolution: {integrity: sha1-NPUEnOHs3ysGSa8+8k5F7TVBbZE=}
+    resolution: {integrity: sha512-C8vBJ8DwUCx19vhm7urhTuUsr4/IyP6l4VzNQDv+ryHQObW3TTTp9yB68WpYgRe2bbaGuZ/se74IqFeVnMnLZg==}
     engines: {node: '>=0.10.0'}
     dependencies:
       ansi-regex: 2.1.1
@@ -19133,7 +19138,7 @@ packages:
       react-is: 16.13.1
 
   /home-or-tmp/2.0.0:
-    resolution: {integrity: sha1-42w/LSyufXRqhX440Y1fMqeILbg=}
+    resolution: {integrity: sha512-ycURW7oUxE2sNiPVw1HVEFsW+ecOpJ5zaj7eC0RlwhibhRBod20muUN8qu/gzx956YrLolVvs1MTXwKgC2rVEg==}
     engines: {node: '>=0.10.0'}
     dependencies:
       os-homedir: 1.0.2
@@ -20133,7 +20138,7 @@ packages:
     dev: false
 
   /is-plain-obj/1.1.0:
-    resolution: {integrity: sha1-caUMhCnfync8kqOQpKA7OfzVHT4=}
+    resolution: {integrity: sha512-yvkRyxmFKEOQ4pNXCmJG5AEQNlXJS5LaONXo5/cLdTZdWvsZ1ioJEonLGAosKlMWE8lwUy/bJzMjcw8az73+Fg==}
     engines: {node: '>=0.10.0'}
 
   /is-plain-obj/2.1.0:
@@ -20197,7 +20202,7 @@ packages:
       call-bind: 1.0.2
 
   /is-stream/1.1.0:
-    resolution: {integrity: sha1-EtSj3U5o4Lec6428hBc66A2RykQ=}
+    resolution: {integrity: sha512-uQPm8kcs47jx38atAcWTVxyltQYoPT68y9aWYdV6yWXSyW8mzSat0TL6CiWdZeCdF3KrAvpVtnHbTv4RN+rqdQ==}
     engines: {node: '>=0.10.0'}
 
   /is-stream/2.0.1:
@@ -21078,7 +21083,7 @@ packages:
     dev: false
 
   /js-sha3/0.5.7:
-    resolution: {integrity: sha1-DU/9gALVMzqrr0oj7tL2N0yfKOc=}
+    resolution: {integrity: sha512-GII20kjaPX0zJ8wzkTbNDYMY7msuZcTWk8S5UOh6806Jq/wz1J8/bnr8uGU0DAUmYDjj2Mr4X1cW8v/GLYnR+g==}
 
   /js-sha3/0.6.1:
     resolution: {integrity: sha512-2OHj7sAZ9gnJS4lQsgIsTslmqVrNQdDC99bvwYGQKU1w6k/gwsTLeGBfWt8yHCuTOGqk7DXzuVlK8J+dDXnG7A==}
@@ -22455,7 +22460,7 @@ packages:
       is-extendable: 1.0.1
 
   /mkdirp-promise/5.0.1:
-    resolution: {integrity: sha1-6bj2jlUsaKnBcTuEiD96HdA5uKE=}
+    resolution: {integrity: sha512-Hepn5kb1lJPtVW84RFT40YG1OddBNTOVUZR2bzQUHc+Z03en8/3uX0+060JDhcEzyO08HmipsN9DcnFMxhIL9w==}
     engines: {node: '>=4'}
     deprecated: This package is broken and no longer maintained. 'mkdirp' itself supports promises now, please switch to that.
     dependencies:
@@ -22688,7 +22693,7 @@ packages:
     dev: false
 
   /nano-json-stream-parser/0.1.2:
-    resolution: {integrity: sha1-DMj20OK2IrR5xA1JnEbWS3Vcb18=}
+    resolution: {integrity: sha512-9MqxMH/BSJC7dnLsEMPyfN5Dvoo49IsPFYMcHw3Bcfc2kN0lpHRBSzlMSVx4HGyJ7s9B31CyBTVehWJoQ8Ctew==}
     dev: false
 
   /nanoid/2.1.11:
@@ -23406,7 +23411,7 @@ packages:
     dev: true
 
   /p-finally/1.0.0:
-    resolution: {integrity: sha1-P7z7FbiZpEEjs0ttzBi3JDNqLK4=}
+    resolution: {integrity: sha512-LICb2p9CB7FS+0eR1oqWnHhp0FljGLZCWBE9aix0Uye9W8LTQPwMTYVGWQWIw9RdQiDg4+epXQODwIYJtSJaow==}
     engines: {node: '>=4'}
 
   /p-limit/1.3.0:
@@ -23495,7 +23500,7 @@ packages:
     dev: true
 
   /p-timeout/1.2.1:
-    resolution: {integrity: sha1-XrOzU7f86Z8QGhA4iAuwVOu+o4Y=}
+    resolution: {integrity: sha512-gb0ryzr+K2qFqFv6qi3khoeqMZF/+ajxQipEF6NteZVnvz9tzdsfAVj3lYtn1gAXvH5lfLwfxEII799gt/mRIA==}
     engines: {node: '>=4'}
     dependencies:
       p-finally: 1.0.0
@@ -23735,7 +23740,7 @@ packages:
       sha.js: 2.4.11
 
   /performance-now/2.1.0:
-    resolution: {integrity: sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns=}
+    resolution: {integrity: sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow==}
     dev: false
 
   /picocolors/0.2.1:
@@ -24003,12 +24008,12 @@ packages:
     dev: true
 
   /prepend-http/1.0.4:
-    resolution: {integrity: sha1-1PRWKwzjaW5BrFLQ4ALlemNdxtw=}
+    resolution: {integrity: sha512-PhmXi5XmoyKw1Un4E+opM2KcsJInDvKyuOumcjjw3waw86ZNjHwVUOOWLc4bCzLdcKNaWBH9e99sbWzDQsVaYg==}
     engines: {node: '>=0.10.0'}
     dev: false
 
   /prepend-http/2.0.0:
-    resolution: {integrity: sha1-6SQ0v6XqjBn0HN/UAddBo8gZ2Jc=}
+    resolution: {integrity: sha512-ravE6m9Atw9Z/jjttRUZ+clIXogdghyZAuWJ3qEzjT+jI/dL1ifAqhZeC5VHzQp1MSt1+jxKkFNemj/iO7tVUA==}
     engines: {node: '>=4'}
     dev: false
 
@@ -24267,7 +24272,7 @@ packages:
     resolution: {integrity: sha1-wNWmOycYgArY4esPpSachN1BhF4=}
 
   /punycode/2.1.0:
-    resolution: {integrity: sha1-X4Y+3Im5bbCQdLrXlHvwkFbKTn0=}
+    resolution: {integrity: sha512-Yxz2kRwT90aPiWEMHVYnEf4+rhwF1tBmmZ4KepCP+Wkium9JxtWnUm1nqGwpiAHr/tnTSeHqr3wb++jgSkXjhA==}
     engines: {node: '>=6'}
     dev: false
 
@@ -26954,7 +26959,7 @@ packages:
     dependencies:
       call-bind: 1.0.2
       define-properties: 1.1.4
-      es-abstract: 1.19.5
+      es-abstract: 1.20.1
     dev: false
 
   /string.prototype.trimend/1.0.4:
@@ -27266,7 +27271,7 @@ packages:
       defined: 1.0.0
       dotignore: 0.1.2
       for-each: 0.3.3
-      glob: 7.2.0
+      glob: 7.2.3
       has: 1.0.3
       inherits: 2.0.4
       is-regex: 1.1.4
@@ -27411,7 +27416,7 @@ packages:
       serialize-javascript: 6.0.0
       source-map: 0.6.1
       terser: 5.12.1
-      webpack: 5.72.1
+      webpack: 5.72.1_webpack-cli@4.9.2
     dev: true
 
   /terser-webpack-plugin/5.3.1_x4y5r4zvu22k667e7z56zns5yi:
@@ -28010,7 +28015,7 @@ packages:
       chalk: 2.4.2
       commander: 2.20.3
       diff: 4.0.2
-      glob: 7.2.0
+      glob: 7.2.3
       js-yaml: 3.14.1
       minimatch: 3.1.2
       mkdirp: 0.5.6
@@ -28041,7 +28046,7 @@ packages:
   /tsutils/1.9.1_typescript@2.9.2:
     resolution: {integrity: sha1-ufmrROVa+WgYMdXyjQrur1x1DLA=}
     peerDependencies:
-      typescript: '>=2.0.0 || >=2.0.0-dev || >=2.1.0-dev || >=2.2.0-dev || >=2.3.0-dev || >= 2.4.0-dev || 4'
+      typescript: '>=2.0.0 || >=2.0.0-dev || >=2.1.0-dev || >=2.2.0-dev || >=2.3.0-dev || >= 2.4.0-dev'
     peerDependenciesMeta:
       typescript:
         optional: true
@@ -28052,7 +28057,7 @@ packages:
   /tsutils/2.29.0_typescript@2.9.2:
     resolution: {integrity: sha512-g5JVHCIJwzfISaXpXE1qvNalca5Jwob6FjI4AoPlqMusJ6ftFE7IkkFoMhVLRgK+4Kx3gkzb8UZK5t5yTTvEmA==}
     peerDependencies:
-      typescript: '>=2.1.0 || >=2.1.0-dev || >=2.2.0-dev || >=2.3.0-dev || >=2.4.0-dev || >=2.5.0-dev || >=2.6.0-dev || >=2.7.0-dev || >=2.8.0-dev || >=2.9.0-dev || >= 3.0.0-dev || >= 3.1.0-dev || 4'
+      typescript: '>=2.1.0 || >=2.1.0-dev || >=2.2.0-dev || >=2.3.0-dev || >=2.4.0-dev || >=2.5.0-dev || >=2.6.0-dev || >=2.7.0-dev || >=2.8.0-dev || >=2.9.0-dev || >= 3.0.0-dev || >= 3.1.0-dev'
     peerDependenciesMeta:
       typescript:
         optional: true

From ca692a35d8094a729057f136780f504b433bbdd0 Mon Sep 17 00:00:00 2001
From: nuanyang233 <nuanyang233@gmail.com>
Date: Mon, 6 Jun 2022 18:31:20 +0800
Subject: [PATCH 2/6] fix: personal sign cann't navigate to the confirmation
 page

---
 .../popups/pages/Wallet/SignRequest/index.tsx | 37 +++++++++++--------
 .../extension/popups/pages/Wallet/index.tsx   | 26 +++++++------
 2 files changed, 36 insertions(+), 27 deletions(-)

diff --git a/packages/mask/src/extension/popups/pages/Wallet/SignRequest/index.tsx b/packages/mask/src/extension/popups/pages/Wallet/SignRequest/index.tsx
index c7da1f333ef0..350ba8c023ea 100644
--- a/packages/mask/src/extension/popups/pages/Wallet/SignRequest/index.tsx
+++ b/packages/mask/src/extension/popups/pages/Wallet/SignRequest/index.tsx
@@ -83,6 +83,11 @@ const useStyles = makeStyles()(() => ({
     },
 }))
 
+const emptyMessage = {
+    data: '',
+    address: '',
+}
+
 const SignRequest = memo(() => {
     const { t } = useI18N()
     const routeLocation = useRouteLocation()
@@ -94,27 +99,29 @@ const SignRequest = memo(() => {
     const [transferError, setTransferError] = useState(false)
 
     const { data, address } = useMemo(() => {
+        if (!value) return emptyMessage
         if (
-            (value?.payload?.method === EthereumMethodType.ETH_SIGN ||
-                value?.payload?.method === EthereumMethodType.ETH_SIGN_TYPED_DATA) &&
-            value.computedPayload?.data
+            value.payload.method === EthereumMethodType.ETH_SIGN ||
+            value.payload.method === EthereumMethodType.ETH_SIGN_TYPED_DATA
         ) {
-            let message = value.computedPayload?.data
-
             try {
-                message = toUtf8(value.computedPayload?.data)
-            } catch (error) {
-                console.log(error)
+                return {
+                    address: value.payload.params?.[0],
+                    data: toUtf8(value.payload.params?.[1] ?? ''),
+                }
+            } catch {
+                return {
+                    address: value.payload.params?.[0],
+                    data: value.payload.params?.[1],
+                }
             }
+        } else if (value.payload.method === EthereumMethodType.PERSONAL_SIGN)
             return {
-                address: value.computedPayload.to,
-                data: message,
+                address: value.payload.params?.[1],
+                data: value.payload.params?.[0],
             }
-        }
-        return {
-            address: '',
-            data: '',
-        }
+
+        return emptyMessage
     }, [value])
 
     const [{ loading }, handleConfirm] = useAsyncFn(async () => {
diff --git a/packages/mask/src/extension/popups/pages/Wallet/index.tsx b/packages/mask/src/extension/popups/pages/Wallet/index.tsx
index 33b31c567d11..f24b67593077 100644
--- a/packages/mask/src/extension/popups/pages/Wallet/index.tsx
+++ b/packages/mask/src/extension/popups/pages/Wallet/index.tsx
@@ -57,7 +57,21 @@ export default function Wallet() {
             return
         const payload = await WalletRPC.topUnconfirmedRequest()
         if (!payload) return
+
+        if (payload) {
+            switch (payload.method) {
+                case EthereumMethodType.ETH_SIGN:
+                case EthereumMethodType.ETH_SIGN_TYPED_DATA:
+                case EthereumMethodType.PERSONAL_SIGN:
+                    navigate(PopupRoutes.WalletSignRequest, { replace: true })
+                    break
+                default:
+                    break
+            }
+        }
+
         const computedPayload = getPayloadConfig(payload)
+
         if (!computedPayload) return
 
         const formatterTransaction = await TransactionFormatter?.formatTransaction(chainId, computedPayload)
@@ -70,18 +84,6 @@ export default function Wallet() {
         ) {
             navigate(PopupRoutes.ContractInteraction, { replace: true })
         }
-
-        if (computedPayload) {
-            switch (payload.method) {
-                case EthereumMethodType.ETH_SIGN:
-                case EthereumMethodType.ETH_SIGN_TYPED_DATA:
-                case EthereumMethodType.PERSONAL_SIGN:
-                    navigate(PopupRoutes.WalletSignRequest, { replace: true })
-                    break
-                default:
-                    break
-            }
-        }
     }, [location.search, location.pathname, chainId])
 
     useEffect(() => {

From 4874295008bab50c94a64b858b704bca87add0f5 Mon Sep 17 00:00:00 2001
From: guanbinrui <guanbinrui@dimension.im>
Date: Mon, 6 Jun 2022 19:01:13 +0800
Subject: [PATCH 3/6] refactor: code style

---
 packages/icons/utils/ssr.tsx                  |  1 -
 .../src/components/DataSource/useNextID.ts    | 12 ++---
 .../InjectedComponents/ProfileTabContent.tsx  | 51 +++++++++----------
 .../popups/pages/Wallet/SignRequest/index.tsx | 17 +++----
 .../plugins/NextID/components/NextIdPage.tsx  | 22 ++++----
 .../SNSAdaptor/SelectNftContractDialog.tsx    |  1 -
 .../src/SNSAdaptor/components/TabContent.tsx  |  2 +-
 7 files changed, 47 insertions(+), 59 deletions(-)

diff --git a/packages/icons/utils/ssr.tsx b/packages/icons/utils/ssr.tsx
index 873fe49f36c0..5cbd96ef0acd 100644
--- a/packages/icons/utils/ssr.tsx
+++ b/packages/icons/utils/ssr.tsx
@@ -31,7 +31,6 @@ svg {
 
 // This file will output to ./dist/utils/ so target actually points to ../build.html
 const target = resolve(fileURLToPath(import.meta.url), '../../../build.html')
-console.log(target)
 writeFileSync(target, render())
 function render() {
     // @ts-ignore esm emit bug
diff --git a/packages/mask/src/components/DataSource/useNextID.ts b/packages/mask/src/components/DataSource/useNextID.ts
index 039da241104d..8cfb9cb81e85 100644
--- a/packages/mask/src/components/DataSource/useNextID.ts
+++ b/packages/mask/src/components/DataSource/useNextID.ts
@@ -1,5 +1,5 @@
 import { useAsyncRetry } from 'react-use'
-import type { NextIDPlatform, PersonaIdentifier } from '@masknet/shared-base'
+import { EMPTY_LIST, NextIDPlatform, PersonaIdentifier } from '@masknet/shared-base'
 import { useEffect, useMemo, useState } from 'react'
 import { activatedSocialNetworkUI } from '../../social-network'
 import { usePersonaConnectStatus } from './usePersonaConnectStatus'
@@ -31,11 +31,11 @@ const verifyPersona = (personaIdentifier?: PersonaIdentifier, username?: string)
     })
 }
 
-export const useNextIDBoundByPlatform = (platform?: NextIDPlatform, identity?: string) => {
-    const res = useAsyncRetry(() => {
-        if (!platform || !identity) return Promise.resolve([])
-        return NextIDProof.queryExistedBindingByPlatform(platform, identity)
-    }, [platform, identity])
+export const useNextIDBoundByPlatform = (platform?: NextIDPlatform, userId?: string) => {
+    const res = useAsyncRetry(async () => {
+        if (!platform || !userId) return EMPTY_LIST
+        return NextIDProof.queryExistedBindingByPlatform(platform, userId)
+    }, [platform, userId])
     useEffect(() => MaskMessages.events.ownProofChanged.on(res.retry), [res.retry])
     return res
 }
diff --git a/packages/mask/src/components/InjectedComponents/ProfileTabContent.tsx b/packages/mask/src/components/InjectedComponents/ProfileTabContent.tsx
index 3a88f82da7f4..6196f805e0f4 100644
--- a/packages/mask/src/components/InjectedComponents/ProfileTabContent.tsx
+++ b/packages/mask/src/components/InjectedComponents/ProfileTabContent.tsx
@@ -20,8 +20,6 @@ import { useCurrentVisitingIdentity, useLastRecognizedIdentity } from '../DataSo
 import { useNextIDBoundByPlatform } from '../DataSource/useNextID'
 import { usePersonaConnectStatus } from '../DataSource/usePersonaConnectStatus'
 
-const platform = activatedSocialNetworkUI.configuration.nextIDConfig?.platform as NextIDPlatform | undefined
-
 function getTabContent(tabId?: string) {
     return createInjectHooksRenderer(useActivatedPluginsSNSAdaptor.visibility.useAnyMode, (x) => {
         const tab = x.ProfileTabs?.find((x) => x.ID === tabId)
@@ -55,7 +53,7 @@ export function ProfileTabContent(props: ProfileTabContentProps) {
     const { value: socialAddressList = EMPTY_LIST, loading: loadingSocialAddressList } =
         useSocialAddressListAll(identity)
     const { value: personaList = EMPTY_LIST, loading: loadingPersonaList } = useNextIDBoundByPlatform(
-        platform,
+        activatedSocialNetworkUI.configuration.nextIDConfig?.platform as NextIDPlatform | undefined,
         identity.identifier?.userId,
     )
 
@@ -90,28 +88,33 @@ export function ProfileTabContent(props: ProfileTabContentProps) {
             label: typeof x.label === 'string' ? x.label : translate(x.pluginID, x.label),
         }))
 
-    const selectedTabId = selectedTab ?? first(tabs)?.id
     const currentAccountNotConnectPersona =
         currentIdentity.identifier === identity.identifier &&
         personaList.findIndex((persona) => persona?.persona === currentConnectedPersona?.identifier.publicKeyAsHex) ===
             -1
-    const Component = getTabContent(
-        isTwitter(activatedSocialNetworkUI) && currentAccountNotConnectPersona && selectedTabId !== PluginId.Debugger
+    const selectedTabId = selectedTab ?? first(tabs)?.id
+    const componentTabId =
+        isTwitter(activatedSocialNetworkUI) && currentAccountNotConnectPersona
             ? displayPlugins?.find((tab) => tab?.pluginID === PluginId.NextID)?.ID
-            : selectedTabId,
-    )
-    const Utils = displayPlugins.find((x) => x.ID === selectedTabId)?.Utils
-
-    console.log('DEBUG: logs')
-    console.log({
-        selectedTabId,
-        socialAddressList,
-        personaList,
-        activatedPlugins,
-        availablePlugins,
-        displayPlugins,
-        tabs,
-    })
+            : selectedTabId
+
+    const component = useMemo(() => {
+        const Component = getTabContent(componentTabId)
+        const Utils = displayPlugins.find((x) => x.ID === selectedTabId)?.Utils
+
+        return (
+            <Component
+                identity={identity}
+                personaList={personaList?.map((x) => x.persona)}
+                socialAddressList={socialAddressList.filter((x) => Utils?.filter?.(x) ?? true).sort(Utils?.sorter)}
+            />
+        )
+    }, [
+        componentTabId,
+        displayPlugins.map((x) => x.ID).join(),
+        personaList.join(),
+        socialAddressList.map((x) => x.address).join(),
+    ])
 
     useLocationChange(() => {
         setSelectedTab(undefined)
@@ -159,13 +162,7 @@ export function ProfileTabContent(props: ProfileTabContentProps) {
                     </Typography>
                 )}
             </div>
-            <div className={classes.content}>
-                <Component
-                    identity={identity}
-                    personaList={personaList?.map((x) => x.persona)}
-                    socialAddressList={socialAddressList.filter((x) => Utils?.filter?.(x) ?? true).sort(Utils?.sorter)}
-                />
-            </div>
+            <div className={classes.content}>{component}</div>
         </div>
     )
 }
diff --git a/packages/mask/src/extension/popups/pages/Wallet/SignRequest/index.tsx b/packages/mask/src/extension/popups/pages/Wallet/SignRequest/index.tsx
index 350ba8c023ea..71c8abf4b361 100644
--- a/packages/mask/src/extension/popups/pages/Wallet/SignRequest/index.tsx
+++ b/packages/mask/src/extension/popups/pages/Wallet/SignRequest/index.tsx
@@ -83,11 +83,6 @@ const useStyles = makeStyles()(() => ({
     },
 }))
 
-const emptyMessage = {
-    data: '',
-    address: '',
-}
-
 const SignRequest = memo(() => {
     const { t } = useI18N()
     const routeLocation = useRouteLocation()
@@ -99,10 +94,9 @@ const SignRequest = memo(() => {
     const [transferError, setTransferError] = useState(false)
 
     const { data, address } = useMemo(() => {
-        if (!value) return emptyMessage
         if (
-            value.payload.method === EthereumMethodType.ETH_SIGN ||
-            value.payload.method === EthereumMethodType.ETH_SIGN_TYPED_DATA
+            value?.payload.method === EthereumMethodType.ETH_SIGN ||
+            value?.payload.method === EthereumMethodType.ETH_SIGN_TYPED_DATA
         ) {
             try {
                 return {
@@ -115,13 +109,16 @@ const SignRequest = memo(() => {
                     data: value.payload.params?.[1],
                 }
             }
-        } else if (value.payload.method === EthereumMethodType.PERSONAL_SIGN)
+        } else if (value?.payload.method === EthereumMethodType.PERSONAL_SIGN)
             return {
                 address: value.payload.params?.[1],
                 data: value.payload.params?.[0],
             }
 
-        return emptyMessage
+        return {
+            data: '',
+            address: '',
+        }
     }, [value])
 
     const [{ loading }, handleConfirm] = useAsyncFn(async () => {
diff --git a/packages/mask/src/plugins/NextID/components/NextIdPage.tsx b/packages/mask/src/plugins/NextID/components/NextIdPage.tsx
index 106fbdff3e75..f90bd8784815 100644
--- a/packages/mask/src/plugins/NextID/components/NextIdPage.tsx
+++ b/packages/mask/src/plugins/NextID/components/NextIdPage.tsx
@@ -69,7 +69,6 @@ export function NextIdPage({ personaList }: NextIdPageProps) {
 
     const personaActionButton = useMemo(() => {
         if (!personaConnectStatus.action) return null
-
         const button = personaConnectStatus.hasPersona ? t.connect_persona() : t.create_persona()
         return (
             <Button variant="contained" onClick={personaConnectStatus.action}>
@@ -82,25 +81,22 @@ export function NextIdPage({ personaList }: NextIdPageProps) {
         if (!visitingPersonaIdentifier?.identifier) return
         return Services.Identity.queryPersonaByProfile(visitingPersonaIdentifier.identifier)
     }, [visitingPersonaIdentifier, personaConnectStatus.hasPersona])
+    const publicKeyAsHex = currentPersona?.identifier.publicKeyAsHex
 
     const { value: isAccountVerified, loading: loadingVerifyInfo } = useAsync(async () => {
-        if (!currentPersona?.identifier.publicKeyAsHex) return
+        if (!publicKeyAsHex) return
         if (!visitingPersonaIdentifier.identifier) return
-        return NextIDProof.queryIsBound(
-            currentPersona.identifier.publicKeyAsHex,
-            platform,
-            visitingPersonaIdentifier.identifier.userId,
-        )
-    }, [isOwn, currentPersona, visitingPersonaIdentifier, isVerified])
+        return NextIDProof.queryIsBound(publicKeyAsHex, platform, visitingPersonaIdentifier.identifier.userId)
+    }, [publicKeyAsHex, visitingPersonaIdentifier, isVerified])
 
     const {
         value: bindings,
-        loading,
+        loading: loadingBingings,
         retry: retryQueryBinding,
     } = useAsyncRetry(async () => {
-        if (!currentPersona?.identifier.publicKeyAsHex) return
-        return NextIDProof.queryExistedBindingByPersona(currentPersona.identifier.publicKeyAsHex)
-    }, [currentPersona, isOwn])
+        if (!publicKeyAsHex) return
+        return NextIDProof.queryExistedBindingByPersona(publicKeyAsHex)
+    }, [publicKeyAsHex])
 
     const onVerify = async () => {
         reset()
@@ -122,7 +118,7 @@ export function NextIdPage({ personaList }: NextIdPageProps) {
         )
     }
 
-    if (loading || loadingPersona || loadingVerifyInfo) {
+    if (loadingBingings || loadingPersona || loadingVerifyInfo) {
         return (
             <>
                 {Array.from({ length: 2 })
diff --git a/packages/mask/src/plugins/Wallet/SNSAdaptor/SelectNftContractDialog.tsx b/packages/mask/src/plugins/Wallet/SNSAdaptor/SelectNftContractDialog.tsx
index f4314fd4182b..441cfb2b9552 100644
--- a/packages/mask/src/plugins/Wallet/SNSAdaptor/SelectNftContractDialog.tsx
+++ b/packages/mask/src/plugins/Wallet/SNSAdaptor/SelectNftContractDialog.tsx
@@ -265,7 +265,6 @@ interface ContractListItemProps {
 function ContractListItem(props: ContractListItemProps) {
     const { onSubmit, contract } = props
     const { classes } = useStyles()
-    console.log({ contract })
     return (
         <div style={{ position: 'relative' }}>
             <ListItem className={classes.listItem} onClick={() => onSubmit(contract)}>
diff --git a/packages/plugins/Debugger/src/SNSAdaptor/components/TabContent.tsx b/packages/plugins/Debugger/src/SNSAdaptor/components/TabContent.tsx
index 7c96c0ade61a..7e0f688b224d 100644
--- a/packages/plugins/Debugger/src/SNSAdaptor/components/TabContent.tsx
+++ b/packages/plugins/Debugger/src/SNSAdaptor/components/TabContent.tsx
@@ -92,7 +92,7 @@ export function TabContent({ identity, socialAddressList }: TabContentProps) {
 
     return (
         <section className={classes.container}>
-            <Button onClick={onTransferCallback}>Trasfer</Button>
+            <Button onClick={onTransferCallback}>Transfer</Button>
             <Button onClick={onPersonaSign}>Sign</Button>
             <Typography color="textPrimary" variant="h6">
                 Balance {balance} <br />

From 51ccb9fd0bf9f5b848facafa1b9a417afd4cba19 Mon Sep 17 00:00:00 2001
From: guanbinrui <guanbinrui@dimension.im>
Date: Mon, 6 Jun 2022 19:43:32 +0800
Subject: [PATCH 4/6] refactor: adjust web3 tab debugger

---
 .../src/SNSAdaptor/components/TabContent.tsx  | 83 +++++++++++++------
 1 file changed, 58 insertions(+), 25 deletions(-)

diff --git a/packages/plugins/Debugger/src/SNSAdaptor/components/TabContent.tsx b/packages/plugins/Debugger/src/SNSAdaptor/components/TabContent.tsx
index 7e0f688b224d..e49e337818af 100644
--- a/packages/plugins/Debugger/src/SNSAdaptor/components/TabContent.tsx
+++ b/packages/plugins/Debugger/src/SNSAdaptor/components/TabContent.tsx
@@ -1,8 +1,8 @@
-import { useBalance, useBlockNumber, useWeb3Connection } from '@masknet/plugin-infra/web3'
+import { useAccount, useBalance, useBlockNumber, useWeb3Connection, useWeb3State } from '@masknet/plugin-infra/web3'
 import { makeStyles } from '@masknet/theme'
 import type { NetworkPluginID, SocialAddress, SocialIdentity } from '@masknet/web3-shared-base'
 import { useTokenConstants } from '@masknet/web3-shared-evm'
-import { Box, Button, List, ListItem, ListItemText, Typography } from '@mui/material'
+import { Box, Button, List, ListItem, ListItemText, Table, TableCell, TableRow, Typography } from '@mui/material'
 import { useCallback } from 'react'
 
 export interface TabContentProps {
@@ -21,7 +21,7 @@ export function TabContent({ identity, socialAddressList }: TabContentProps) {
 
     const renderIdentity = () => {
         return (
-            <List>
+            <List dense>
                 <ListItem>
                     <ListItemText
                         primary={<Typography color="textPrimary">Nickname</Typography>}
@@ -43,11 +43,8 @@ export function TabContent({ identity, socialAddressList }: TabContentProps) {
                 <ListItem sx={{ display: 'block' }}>
                     <ListItemText
                         primary={<Typography color="textPrimary">Avatar</Typography>}
-                        secondary={identity?.avatar}
+                        secondary={<img src={identity?.avatar} style={{ maxWidth: 100 }} />}
                     />
-                    <Box sx={{ mt: 1 }}>
-                        <img src={identity?.avatar} />
-                    </Box>
                 </ListItem>
             </List>
         )
@@ -55,7 +52,7 @@ export function TabContent({ identity, socialAddressList }: TabContentProps) {
 
     const renderAddressNames = () => {
         return (
-            <List>
+            <List dense>
                 {socialAddressList?.map((x) => (
                     <ListItem key={`${x.type}_${x.address}`}>
                         <ListItemText
@@ -73,6 +70,8 @@ export function TabContent({ identity, socialAddressList }: TabContentProps) {
     }
 
     const { NATIVE_TOKEN_ADDRESS } = useTokenConstants()
+    const { Others } = useWeb3State()
+    const account = useAccount()
     const { value: balance = '0' } = useBalance()
     const { value: blockNumber = 0 } = useBlockNumber()
     const connection = useWeb3Connection()
@@ -87,27 +86,61 @@ export function TabContent({ identity, socialAddressList }: TabContentProps) {
 
     const onPersonaSign = useCallback(async () => {
         const signed = await connection.signMessage('hello world', 'personalSign')
-        console.log(signed)
+        window.alert(`Signed: ${signed}`)
     }, [connection])
 
     return (
         <section className={classes.container}>
-            <Button onClick={onTransferCallback}>Transfer</Button>
-            <Button onClick={onPersonaSign}>Sign</Button>
-            <Typography color="textPrimary" variant="h6">
-                Balance {balance} <br />
-                BlockNumber {blockNumber} <br />
-            </Typography>
-
-            <Typography color="textPrimary" variant="h6">
-                Identity
-            </Typography>
-            {renderIdentity()}
-
-            <Typography color="textPrimary" variant="h6">
-                Social Address List
-            </Typography>
-            {renderAddressNames()}
+            <Table size="small">
+                <TableRow>
+                    <TableCell>
+                        <Typography variant="body2">Balance of {Others?.formatAddress(account, 4)}</Typography>
+                    </TableCell>
+                    <TableCell>
+                        <Typography variant="body2">{balance}</Typography>
+                    </TableCell>
+                </TableRow>
+                <TableRow>
+                    <TableCell>
+                        <Typography variant="body2">Block Number</Typography>
+                    </TableCell>
+                    <TableCell>
+                        <Typography variant="body2">{blockNumber}</Typography>
+                    </TableCell>
+                </TableRow>
+                <TableRow>
+                    <TableCell>
+                        <Typography variant="body2">Native Token Transfer</Typography>
+                    </TableCell>
+                    <TableCell>
+                        <Button size="small" onClick={onTransferCallback}>
+                            Transfer
+                        </Button>
+                    </TableCell>
+                </TableRow>
+                <TableRow>
+                    <TableCell>
+                        <Typography variant="body2">Sign Message</Typography>
+                    </TableCell>
+                    <TableCell>
+                        <Button size="small" onClick={onPersonaSign}>
+                            Sign Message
+                        </Button>
+                    </TableCell>
+                </TableRow>
+                <TableRow>
+                    <TableCell>
+                        <Typography variant="body2">Identity</Typography>
+                    </TableCell>
+                    <TableCell>{renderIdentity()}</TableCell>
+                </TableRow>
+                <TableRow>
+                    <TableCell>
+                        <Typography variant="body2">Social Address List</Typography>
+                    </TableCell>
+                    <TableCell>{renderAddressNames()}</TableCell>
+                </TableRow>
+            </Table>
         </section>
     )
 }

From 4de2fc71d8056153c609b7d9e5fd46f4178c2bce Mon Sep 17 00:00:00 2001
From: guanbinrui <guanbinrui@dimension.im>
Date: Mon, 6 Jun 2022 19:56:45 +0800
Subject: [PATCH 5/6] fix: typo

---
 packages/mask/src/plugins/NextID/components/NextIdPage.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/mask/src/plugins/NextID/components/NextIdPage.tsx b/packages/mask/src/plugins/NextID/components/NextIdPage.tsx
index f90bd8784815..14aeb9c327b7 100644
--- a/packages/mask/src/plugins/NextID/components/NextIdPage.tsx
+++ b/packages/mask/src/plugins/NextID/components/NextIdPage.tsx
@@ -91,7 +91,7 @@ export function NextIdPage({ personaList }: NextIdPageProps) {
 
     const {
         value: bindings,
-        loading: loadingBingings,
+        loading: loadingBindings,
         retry: retryQueryBinding,
     } = useAsyncRetry(async () => {
         if (!publicKeyAsHex) return
@@ -118,7 +118,7 @@ export function NextIdPage({ personaList }: NextIdPageProps) {
         )
     }
 
-    if (loadingBingings || loadingPersona || loadingVerifyInfo) {
+    if (loadingBindings || loadingPersona || loadingVerifyInfo) {
         return (
             <>
                 {Array.from({ length: 2 })

From 198e11574146aa8cbad1f22ed8e23953ae2cc0ca Mon Sep 17 00:00:00 2001
From: guanbinrui <guanbinrui@dimension.im>
Date: Mon, 6 Jun 2022 20:19:31 +0800
Subject: [PATCH 6/6] fix: lint errors

---
 .../Wallet/SNSAdaptor/SelectProviderDialog/index.tsx     | 2 +-
 .../Debugger/src/SNSAdaptor/components/TabContent.tsx    | 2 +-
 packages/plugins/Flow/src/state/Connection/connection.ts | 9 ++++-----
 packages/web3-providers/src/web3/index.ts                | 4 +++-
 4 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/packages/mask/src/plugins/Wallet/SNSAdaptor/SelectProviderDialog/index.tsx b/packages/mask/src/plugins/Wallet/SNSAdaptor/SelectProviderDialog/index.tsx
index 54f43b0a113b..667fb0101448 100644
--- a/packages/mask/src/plugins/Wallet/SNSAdaptor/SelectProviderDialog/index.tsx
+++ b/packages/mask/src/plugins/Wallet/SNSAdaptor/SelectProviderDialog/index.tsx
@@ -67,7 +67,7 @@ export function SelectProviderDialog(props: SelectProviderDialogProps) {
 
     const onProviderIconClicked = useCallback(
         async (network: Web3Helper.NetworkDescriptorAll, provider: Web3Helper.ProviderDescriptorAll) => {
-            if (!(await Provider?.isReady(provider.type))) {
+            if (!Provider?.isReady(provider.type)) {
                 const downloadLink = Others?.providerResolver.providerDownloadLink(provider.type)
                 if (downloadLink) openWindow(downloadLink)
                 return
diff --git a/packages/plugins/Debugger/src/SNSAdaptor/components/TabContent.tsx b/packages/plugins/Debugger/src/SNSAdaptor/components/TabContent.tsx
index e49e337818af..6e11642bea22 100644
--- a/packages/plugins/Debugger/src/SNSAdaptor/components/TabContent.tsx
+++ b/packages/plugins/Debugger/src/SNSAdaptor/components/TabContent.tsx
@@ -2,7 +2,7 @@ import { useAccount, useBalance, useBlockNumber, useWeb3Connection, useWeb3State
 import { makeStyles } from '@masknet/theme'
 import type { NetworkPluginID, SocialAddress, SocialIdentity } from '@masknet/web3-shared-base'
 import { useTokenConstants } from '@masknet/web3-shared-evm'
-import { Box, Button, List, ListItem, ListItemText, Table, TableCell, TableRow, Typography } from '@mui/material'
+import { Button, List, ListItem, ListItemText, Table, TableCell, TableRow, Typography } from '@mui/material'
 import { useCallback } from 'react'
 
 export interface TabContentProps {
diff --git a/packages/plugins/Flow/src/state/Connection/connection.ts b/packages/plugins/Flow/src/state/Connection/connection.ts
index c1b712c93bf1..8969f982e119 100644
--- a/packages/plugins/Flow/src/state/Connection/connection.ts
+++ b/packages/plugins/Flow/src/state/Connection/connection.ts
@@ -136,12 +136,11 @@ class Connection implements BaseConnection {
     }
     async getBlockNumber(options?: FlowConnectionOptions): Promise<number> {
         const web3 = await this.getWeb3(options)
-        const blockHeader = await web3.getBlockHeader()
-        return blockHeader.height
+        return web3.getBlockHeader().height
     }
     async getBalance(address: string, options?: FlowConnectionOptions): Promise<string> {
         const web3 = await this.getWeb3(options)
-        const account = await web3.getAccount(address)
+        const account = web3.getAccount(address)
         return account.balance.toFixed()
     }
     async getTransaction(id: string, options?: FlowConnectionOptions) {
@@ -153,7 +152,7 @@ class Connection implements BaseConnection {
     }
     async getTransactionStatus(id: string, options?: FlowConnectionOptions): Promise<TransactionStatusType> {
         const web3 = await this.getWeb3(options)
-        const { status } = await web3.getTransactionStatus(id)
+        const { status } = web3.getTransactionStatus(id)
         const status_ = status as TransactionStatusCode
         switch (status_) {
             case TransactionStatusCode.UNKNOWN:
@@ -172,7 +171,7 @@ class Connection implements BaseConnection {
     }
     async getTransactionNonce(address: string, options?: FlowConnectionOptions): Promise<number> {
         const web3 = await this.getWeb3(options)
-        const account = await web3.getAccount(address)
+        const account = web3.getAccount(address)
         const key = first(account.keys)
         return key?.sequenceNumber ?? 0
     }
diff --git a/packages/web3-providers/src/web3/index.ts b/packages/web3-providers/src/web3/index.ts
index a388ea24bb12..7afee4ad107a 100644
--- a/packages/web3-providers/src/web3/index.ts
+++ b/packages/web3-providers/src/web3/index.ts
@@ -6,6 +6,7 @@ import { ChainId, chainResolver, formatWeiToGwei, GasOption, getRPCConstants, We
 import type { GasOptionAPI } from '../types'
 
 function avg(arr: number[]) {
+    // eslint-disable-next-line unicorn/no-array-reduce
     const sum = arr.reduce((a, v) => a + v)
     return Math.round(sum / arr.length)
 }
@@ -24,7 +25,8 @@ export class EthereumWeb3API implements GasOptionAPI.Provider<ChainId, GasOption
                 baseFeePerGas: Number.parseInt(nth(result.baseFeePerGas, index) ?? '0', 16),
                 gasUsedRatio: nth(result.gasUsedRatio, index) || 0,
                 priorityFeePerGas:
-                    nth(result.reward, index)?.map((x) => Number.parseInt(x, 16)) ?? new Array(3).fill(0),
+                    nth(result.reward, index)?.map((x) => Number.parseInt(x, 16)) ??
+                    Array.from<number>({ length: 3 }).fill(0),
             })
             index += 1
         }