From 999d82997e93665d1711cb9e49e74b56ff1d17d8 Mon Sep 17 00:00:00 2001
From: nuanyang233 <nuanyang233@gmail.com>
Date: Thu, 26 May 2022 15:17:57 +0800
Subject: [PATCH 01/17] fix: add missing deps (#6356)

---
 .../src/components/InjectedComponents/ProfileTabContent.tsx     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/mask/src/components/InjectedComponents/ProfileTabContent.tsx b/packages/mask/src/components/InjectedComponents/ProfileTabContent.tsx
index 0487f9d1b095..aaf461822524 100644
--- a/packages/mask/src/components/InjectedComponents/ProfileTabContent.tsx
+++ b/packages/mask/src/components/InjectedComponents/ProfileTabContent.tsx
@@ -124,7 +124,7 @@ export function ProfileTabContent(props: ProfileTabContentProps) {
                 ? displayPlugins?.find((tab) => tab?.pluginID === PluginId.NextID)?.ID
                 : selectedTabId
         return getTabContent(tabId ?? '')
-    }, [selectedTabId, identity.identifier?.userId])
+    }, [selectedTabId, identity.identifier?.userId, currentAccountNotConnectPersona])
 
     if (hidden) return null
 

From b3d28c74c6478aa246d6740a6d1bda59ab001f2f Mon Sep 17 00:00:00 2001
From: zhouhanseng <z308114274@gmail.com>
Date: Tue, 24 May 2022 14:38:11 +0800
Subject: [PATCH 02/17] fix(ui): claim button && mind fb tool box hint (#6337)

---
 cspell.json                                   |  1 +
 .../InjectedComponents/ToolboxUnstyled.tsx    |  5 ++++-
 .../DashboardComponents/ActionButton.tsx      | 21 +++++++++++++++----
 .../plugins/ITO/SNSAdaptor/ClaimAllDialog.tsx |  2 ++
 .../facebook.com/injection/Toolbar.tsx        |  3 ++-
 .../facebook.com/injection/ToolbarUI.tsx      | 19 +++++++++--------
 .../minds.com/customization/custom.ts         |  3 +++
 .../minds.com/injection/ToolboxHint_UI.tsx    |  4 ++--
 .../minds.com/utils/selector.ts               |  4 +---
 .../src/web3/UI/EthereumChainBoundary.tsx     |  3 +++
 10 files changed, 45 insertions(+), 20 deletions(-)

diff --git a/cspell.json b/cspell.json
index 28e4e04fbc54..4dbe240d7ac5 100644
--- a/cspell.json
+++ b/cspell.json
@@ -286,6 +286,7 @@
         "redpackets",
         "renfil",
         "shapeclip",
+        "ssrb",
         "steth",
         "swaptoken",
         "testweb",
diff --git a/packages/mask/src/components/InjectedComponents/ToolboxUnstyled.tsx b/packages/mask/src/components/InjectedComponents/ToolboxUnstyled.tsx
index 106098381aeb..6a2593c93cca 100644
--- a/packages/mask/src/components/InjectedComponents/ToolboxUnstyled.tsx
+++ b/packages/mask/src/components/InjectedComponents/ToolboxUnstyled.tsx
@@ -91,6 +91,7 @@ export function ToolboxHintUnstyled(props: ToolboxHintProps) {
 function ToolboxHintForApplication(props: ToolboxHintProps) {
     const {
         ListItemButton = MuiListItemButton,
+        ListItemIcon = MuiListItemIcon,
         Container = 'div',
         Typography = MuiTypography,
         iconSize = 24,
@@ -104,7 +105,9 @@ function ToolboxHintForApplication(props: ToolboxHintProps) {
         <GuideStep step={1} total={4} tip={t('user_guide_tip_1')}>
             <Container>
                 <ListItemButton onClick={openDialog}>
-                    <MaskIcon style={{ width: iconSize, height: iconSize }} />
+                    <ListItemIcon>
+                        <MaskIcon style={{ width: iconSize, height: iconSize }} />
+                    </ListItemIcon>
                     {mini ? null : (
                         <ListItemText
                             primary={
diff --git a/packages/mask/src/extension/options-page/DashboardComponents/ActionButton.tsx b/packages/mask/src/extension/options-page/DashboardComponents/ActionButton.tsx
index d01f32ccdfcf..449c69a66a4d 100644
--- a/packages/mask/src/extension/options-page/DashboardComponents/ActionButton.tsx
+++ b/packages/mask/src/extension/options-page/DashboardComponents/ActionButton.tsx
@@ -114,8 +114,9 @@ export function ActionButtonPromise(props: ActionButtonPromiseProps) {
     } = props
 
     const [state, setState] = useState<ActionButtonPromiseState>('init')
-    const completeClass = classNames(classes.success, b.className)
-    const failClass = classNames(classes.failed, b.className)
+    const basicClass = classNames(classes.button, b.className)
+    const completeClass = classNames(basicClass, classes.success)
+    const failClass = classNames(basicClass, classes.failed)
 
     const run = () => {
         setState('wait')
@@ -144,7 +145,16 @@ export function ActionButtonPromise(props: ActionButtonPromiseProps) {
     }, [executor, noUpdateEffect])
 
     if (state === 'wait')
-        return <Button {...b} startIcon={circle} disabled={!waitingOnClick} children={waiting} onClick={cancel} />
+        return (
+            <Button
+                {...b}
+                startIcon={circle}
+                disabled={!waitingOnClick}
+                children={waiting}
+                onClick={cancel}
+                className={basicClass}
+            />
+        )
     if (state === 'complete')
         return (
             <Button
@@ -167,7 +177,7 @@ export function ActionButtonPromise(props: ActionButtonPromiseProps) {
                 onClick={failClick}
             />
         )
-    return <Button {...b} children={init} onClick={run} />
+    return <Button {...b} children={init} onClick={run} className={basicClass} />
 }
 const useStyles = makeStyles()({
     success: {
@@ -184,4 +194,7 @@ const useStyles = makeStyles()({
             backgroundColor: red[700],
         },
     },
+    button: {
+        borderRadius: 999,
+    },
 })
diff --git a/packages/mask/src/plugins/ITO/SNSAdaptor/ClaimAllDialog.tsx b/packages/mask/src/plugins/ITO/SNSAdaptor/ClaimAllDialog.tsx
index e78594152746..ce75f3efdb90 100644
--- a/packages/mask/src/plugins/ITO/SNSAdaptor/ClaimAllDialog.tsx
+++ b/packages/mask/src/plugins/ITO/SNSAdaptor/ClaimAllDialog.tsx
@@ -210,6 +210,8 @@ const useStyles = makeStyles<StyleProps>()((theme, props) => {
             margin: theme.spacing(3, 'auto'),
         },
         claimAllButton: {
+            height: 48,
+            borderRadius: 999,
             [smallQuery]: {
                 fontSize: 14,
             },
diff --git a/packages/mask/src/social-network-adaptor/facebook.com/injection/Toolbar.tsx b/packages/mask/src/social-network-adaptor/facebook.com/injection/Toolbar.tsx
index 0271d175348d..7dd832f3934f 100644
--- a/packages/mask/src/social-network-adaptor/facebook.com/injection/Toolbar.tsx
+++ b/packages/mask/src/social-network-adaptor/facebook.com/injection/Toolbar.tsx
@@ -6,7 +6,8 @@ import { ToolboxAtFacebook } from './ToolbarUI'
 export function injectToolboxHintAtFacebook(signal: AbortSignal, category: 'wallet' | 'application') {
     const watcher = new MutationObserverWatcher(toolBoxInSideBarSelector())
     startWatch(watcher, signal)
+    const hasTopNavBar = Boolean(document.querySelector<HTMLElement>('#ssrb_top_nav_start ~ [role="banner"]'))
     createReactRootShadowed(watcher.firstDOMProxy.afterShadow, { signal }).render(
-        <ToolboxAtFacebook category={category} />,
+        <ToolboxAtFacebook category={category} hasTopNavBar={hasTopNavBar} />,
     )
 }
diff --git a/packages/mask/src/social-network-adaptor/facebook.com/injection/ToolbarUI.tsx b/packages/mask/src/social-network-adaptor/facebook.com/injection/ToolbarUI.tsx
index da7d3003887c..bb5605084996 100644
--- a/packages/mask/src/social-network-adaptor/facebook.com/injection/ToolbarUI.tsx
+++ b/packages/mask/src/social-network-adaptor/facebook.com/injection/ToolbarUI.tsx
@@ -3,8 +3,8 @@ import { ToolboxHintUnstyled } from '../../../components/InjectedComponents/Tool
 
 const fbBreakPoint = 700 /** px */
 
-const Container = styled('div')`
-    padding: 0 8px;
+const Container = styled('div')<{ hasTopNavBar: boolean }>`
+    padding: 0 ${(props) => (props.hasTopNavBar ? '8px' : '4px')};
 `
 const Item = styled(ListItemButton)`
     border-radius: 8px;
@@ -16,22 +16,23 @@ const Text = styled(Typography)`
     color: var(--primary-text);
     font-weight: 500;
 `
-const Icon = styled(ListItemIcon)`
-    min-width: 46px;
+const Icon = styled(ListItemIcon)<{ hasTopNavBar: boolean }>`
+    min-width: ${(props) => (props.hasTopNavBar ? '46px' : 'auto')};
+    margin-right: ${(props) => (props.hasTopNavBar ? '0px' : '12px')};
     @media screen and (max-height: ${fbBreakPoint}px) {
-        min-width: 36px;
+        min-width: ${(props) => (props.hasTopNavBar ? '36px' : 'auto')};
     }
 `
 
-export function ToolboxAtFacebook(props: { category: 'wallet' | 'application' }) {
+export function ToolboxAtFacebook(props: { category: 'wallet' | 'application'; hasTopNavBar: boolean }) {
     const isSmall = useMediaQuery(`(max-height: ${fbBreakPoint}px)`)
     return (
         <ToolboxHintUnstyled
-            iconSize={isSmall ? 24 : 32}
-            Container={Container}
+            iconSize={isSmall || !props.hasTopNavBar ? 24 : 32}
+            Container={({ children }) => <Container hasTopNavBar={props.hasTopNavBar}>{children}</Container>}
             ListItemButton={Item}
             Typography={Text}
-            ListItemIcon={Icon}
+            ListItemIcon={({ children }) => <Icon hasTopNavBar={props.hasTopNavBar}>{children}</Icon>}
             category={props.category}
         />
     )
diff --git a/packages/mask/src/social-network-adaptor/minds.com/customization/custom.ts b/packages/mask/src/social-network-adaptor/minds.com/customization/custom.ts
index 06ffa6a859f7..e188b7bcd402 100644
--- a/packages/mask/src/social-network-adaptor/minds.com/customization/custom.ts
+++ b/packages/mask/src/social-network-adaptor/minds.com/customization/custom.ts
@@ -28,7 +28,10 @@ export function startWatchThemeColor(signal: AbortSignal) {
         if (backgroundColor)
             backgroundColorRef.value = currentTheme.value === 'light' ? 'rgb(244, 244 ,245)' : 'rgb(26, 32, 37)'
     }
+    // init
+    currentTheme.value = getBackgroundColor(document.body) === 'rgb(255,255,255)' ? 'light' : 'dark'
 
+    // update
     new MutationObserverWatcher(themeListItemSelector())
         .addListener('onAdd', updateThemeColor)
         .addListener('onChange', updateThemeColor)
diff --git a/packages/mask/src/social-network-adaptor/minds.com/injection/ToolboxHint_UI.tsx b/packages/mask/src/social-network-adaptor/minds.com/injection/ToolboxHint_UI.tsx
index de15d87e68eb..77b4a151d92c 100644
--- a/packages/mask/src/social-network-adaptor/minds.com/injection/ToolboxHint_UI.tsx
+++ b/packages/mask/src/social-network-adaptor/minds.com/injection/ToolboxHint_UI.tsx
@@ -1,5 +1,5 @@
 import { ToolboxHintUnstyled } from '../../../components/InjectedComponents/ToolboxUnstyled'
-import { styled, ListItemButton, Typography, ListItemIcon, useMediaQuery } from '@mui/material'
+import { styled, ListItemButton, Typography, ListItemIcon, useMediaQuery, useTheme } from '@mui/material'
 
 const mindsBreakPoint = 1221 /** px */
 
@@ -42,7 +42,7 @@ const Icon = styled(ListItemIcon)`
 
 export function ToolboxHintAtMinds(props: { category: 'wallet' | 'application' }) {
     const mini = useMediaQuery(`(max-width: ${mindsBreakPoint}px)`)
-
+    const mode = useTheme().palette.mode
     return (
         <ToolboxHintUnstyled
             mini={mini}
diff --git a/packages/mask/src/social-network-adaptor/minds.com/utils/selector.ts b/packages/mask/src/social-network-adaptor/minds.com/utils/selector.ts
index 47fd391b1f1b..11ba52931f6e 100644
--- a/packages/mask/src/social-network-adaptor/minds.com/utils/selector.ts
+++ b/packages/mask/src/social-network-adaptor/minds.com/utils/selector.ts
@@ -10,9 +10,7 @@ const querySelector = <T extends E, SingleMode extends boolean = true>(selector:
 export const rootSelector: () => LiveSelector<E, true> = () => querySelector<E>('m-app')
 
 export const themeListItemSelector: () => LiveSelector<HTMLAnchorElement, true> = () =>
-    querySelector<HTMLAnchorElement>(
-        'm-usermenu__v3 > div.m-user-menu.m-dropdown > ul > li:nth-child(5) .ng-star-inserted',
-    )
+    querySelector<HTMLAnchorElement>('.m-sidebarMore__dropdown > li:nth-child(7)')
 
 export const composerModalSelector: () => LiveSelector<E, true> = () => querySelector<E>('m-composer__modal')
 
diff --git a/packages/mask/src/web3/UI/EthereumChainBoundary.tsx b/packages/mask/src/web3/UI/EthereumChainBoundary.tsx
index 9626dece8fd5..b8ce3786dd41 100644
--- a/packages/mask/src/web3/UI/EthereumChainBoundary.tsx
+++ b/packages/mask/src/web3/UI/EthereumChainBoundary.tsx
@@ -48,6 +48,9 @@ const useStyles = makeStyles()((theme) => ({
         borderRadius: 4,
         padding: 10,
     },
+    switchButton: {
+        borderRadius: 999,
+    },
 }))
 
 export interface EthereumChainBoundaryProps extends withClasses<'switchButton'> {

From db71f673f277da034e8411ae7093a5f0bf49e010 Mon Sep 17 00:00:00 2001
From: unclebill <billbill290@gmail.com>
Date: Fri, 6 May 2022 15:24:44 +0800
Subject: [PATCH 03/17] refactor: update promote text for plugins (#6217)

---
 .i18n-codegen.json                            |  36 ++++++
 packages/.eslintrc.json                       |   1 +
 packages/mask/shared-ui/locales/en-US.json    | 114 ++++--------------
 packages/mask/shared-ui/locales/ja-JP.json    |  22 ----
 packages/mask/shared-ui/locales/ko-KR.json    |  60 ---------
 packages/mask/shared-ui/locales/qya-AA.json   |  77 ------------
 packages/mask/shared-ui/locales/zh-CN.json    |  73 -----------
 packages/mask/shared-ui/locales/zh-TW.json    |  51 --------
 .../components/CompositionDialog/useSubmit.ts |  65 ++++++----
 .../plugins/Avatar/SNSAdaptor/NFTAvatar.tsx   |   3 +-
 .../SNSAdaptor/MakeOfferDialog.tsx            |   4 +-
 .../Gitcoin/SNSAdaptor/DonateDialog.tsx       |  37 +++---
 .../Gitcoin/SNSAdaptor/PreviewCard.tsx        |  18 +--
 .../src/plugins/Gitcoin/SNSAdaptor/index.tsx  |  20 ++-
 packages/mask/src/plugins/Gitcoin/base.ts     |   2 +
 .../src/plugins/Gitcoin/locales/en-US.json    |  15 +++
 .../mask/src/plugins/Gitcoin/locales/index.ts |   6 +
 .../src/plugins/Gitcoin/locales/ja-JP.json    |   1 +
 .../src/plugins/Gitcoin/locales/ko-KR.json    |   1 +
 .../src/plugins/Gitcoin/locales/languages.ts  |  34 ++++++
 .../src/plugins/Gitcoin/locales/qya-AA.json   |   1 +
 .../src/plugins/Gitcoin/locales/zh-CN.json    |   1 +
 .../src/plugins/Gitcoin/locales/zh-TW.json    |   1 +
 .../mask/src/plugins/ITO/SNSAdaptor/ITO.tsx   |  23 +---
 .../plugins/ITO/SNSAdaptor/NftAirdropCard.tsx |  37 ++----
 .../src/plugins/ITO/SNSAdaptor/PoolInList.tsx |  24 ++--
 .../SNSAdaptor/hooks/useDestructCallback.ts   |  62 ++--------
 .../useSpaceStationContractClaimCallback.ts   |  84 +++----------
 .../SNSAdaptor/components/PreviewCard.tsx     |   2 +-
 .../plugins/RedPacket/SNSAdaptor/NftList.tsx  |   6 +-
 .../SNSAdaptor/NftRedPacketHistoryItem.tsx    |  20 ++-
 .../SNSAdaptor/NftRedPacketHistoryList.tsx    |  12 +-
 .../SNSAdaptor/RedPacket/OperationFooter.tsx  |  20 ++-
 .../RedPacket/SNSAdaptor/RedPacket/index.tsx  |  69 ++++++-----
 .../SNSAdaptor/RedPacketConfirmDialog.tsx     |  64 ++++------
 .../SNSAdaptor/RedPacketCreateNew.tsx         |   8 +-
 .../RedPacket/SNSAdaptor/RedPacketDialog.tsx  |  10 +-
 .../SNSAdaptor/RedPacketERC20Form.tsx         |  42 ++++---
 .../SNSAdaptor/RedPacketERC721Form.tsx        |  31 +++--
 .../SNSAdaptor/RedPacketInHistoryList.tsx     |  43 +++----
 .../RedPacket/SNSAdaptor/RedPacketNft.tsx     |  88 +++++++-------
 .../RedPacket/SNSAdaptor/RedPacketPast.tsx    |   8 +-
 .../SNSAdaptor/RedpacketMessagePanel.tsx      |   8 +-
 .../SNSAdaptor/RedpacketNftConfirmDialog.tsx  |  24 ++--
 .../SNSAdaptor/SelectNftTokenDialog.tsx       |  73 ++++-------
 .../SNSAdaptor/hooks/useCreateCallback.tsx    |  36 +-----
 .../plugins/RedPacket/SNSAdaptor/index.tsx    |   8 +-
 packages/mask/src/plugins/RedPacket/base.ts   |   2 +
 .../src/plugins/RedPacket/locales/en-US.json  |  84 +++++++++++++
 .../src/plugins/RedPacket/locales/index.ts    |   6 +
 .../src/plugins/RedPacket/locales/ja-JP.json  |   1 +
 .../src/plugins/RedPacket/locales/ko-KR.json  |   1 +
 .../plugins/RedPacket/locales/languages.ts    |  34 ++++++
 .../src/plugins/RedPacket/locales/qya-AA.json |   1 +
 .../src/plugins/RedPacket/locales/zh-CN.json  |   1 +
 .../src/plugins/RedPacket/locales/zh-TW.json  |   1 +
 .../Savings/SNSAdaptor/SavingsForm.tsx        |  18 ++-
 .../Snapshot/SNSAdaptor/VotingCard.tsx        |   8 +-
 .../Trader/SNSAdaptor/trader/Trader.tsx       |  11 +-
 packages/mask/src/plugins/Trader/base.ts      |   2 +
 .../src/plugins/Trader/locales/en-US.json     |   3 +
 .../mask/src/plugins/Trader/locales/index.ts  |   6 +
 .../src/plugins/Trader/locales/ja-JP.json     |   1 +
 .../src/plugins/Trader/locales/ko-KR.json     |   1 +
 .../src/plugins/Trader/locales/languages.ts   |  34 ++++++
 .../src/plugins/Trader/locales/qya-AA.json    |   1 +
 .../src/plugins/Trader/locales/zh-CN.json     |   1 +
 .../src/plugins/Trader/locales/zh-TW.json     |   1 +
 .../src/plugins/dHEDGE/UI/InvestDialog.tsx    |   2 +-
 .../plugins/dHEDGE/hooks/useInvestCallback.ts |   9 +-
 .../injection/NFT/NFTAvatarInTwitter.tsx      |  24 +++-
 packages/mask/src/tsconfig.json               |   1 +
 .../UI/EthereumERC20TokenApprovedBoundary.tsx |   4 +-
 .../EthereumERC721TokenApprovedBoundary.tsx   |  77 ++++++------
 packages/plugins/FileService/src/index.ts     |   2 +
 .../evm/hooks/useERC20TokenApproveCallback.ts |  70 ++---------
 ...eERC721ContractSetApproveForAllCallback.ts |  45 ++-----
 .../evm/hooks/useTransactionCallback.ts       |  16 +--
 78 files changed, 786 insertions(+), 1127 deletions(-)
 create mode 100644 packages/mask/src/plugins/Gitcoin/locales/en-US.json
 create mode 100644 packages/mask/src/plugins/Gitcoin/locales/index.ts
 create mode 100644 packages/mask/src/plugins/Gitcoin/locales/ja-JP.json
 create mode 100644 packages/mask/src/plugins/Gitcoin/locales/ko-KR.json
 create mode 100644 packages/mask/src/plugins/Gitcoin/locales/languages.ts
 create mode 100644 packages/mask/src/plugins/Gitcoin/locales/qya-AA.json
 create mode 100644 packages/mask/src/plugins/Gitcoin/locales/zh-CN.json
 create mode 100644 packages/mask/src/plugins/Gitcoin/locales/zh-TW.json
 create mode 100644 packages/mask/src/plugins/RedPacket/locales/en-US.json
 create mode 100644 packages/mask/src/plugins/RedPacket/locales/index.ts
 create mode 100644 packages/mask/src/plugins/RedPacket/locales/ja-JP.json
 create mode 100644 packages/mask/src/plugins/RedPacket/locales/ko-KR.json
 create mode 100644 packages/mask/src/plugins/RedPacket/locales/languages.ts
 create mode 100644 packages/mask/src/plugins/RedPacket/locales/qya-AA.json
 create mode 100644 packages/mask/src/plugins/RedPacket/locales/zh-CN.json
 create mode 100644 packages/mask/src/plugins/RedPacket/locales/zh-TW.json
 create mode 100644 packages/mask/src/plugins/Trader/locales/en-US.json
 create mode 100644 packages/mask/src/plugins/Trader/locales/index.ts
 create mode 100644 packages/mask/src/plugins/Trader/locales/ja-JP.json
 create mode 100644 packages/mask/src/plugins/Trader/locales/ko-KR.json
 create mode 100644 packages/mask/src/plugins/Trader/locales/languages.ts
 create mode 100644 packages/mask/src/plugins/Trader/locales/qya-AA.json
 create mode 100644 packages/mask/src/plugins/Trader/locales/zh-CN.json
 create mode 100644 packages/mask/src/plugins/Trader/locales/zh-TW.json

diff --git a/.i18n-codegen.json b/.i18n-codegen.json
index 89a57479f50d..6b40857beeb0 100644
--- a/.i18n-codegen.json
+++ b/.i18n-codegen.json
@@ -216,6 +216,18 @@
                 "sourceMap": "inline"
             }
         },
+        {
+            "input": "./packages/mask/src/plugins/RedPacket/locales/en-US.json",
+            "output": "./packages/mask/src/plugins/RedPacket/locales/i18n_generated",
+            "parser": { "type": "i18next", "contextSeparator": "$", "pluralSeparator": "_" },
+            "generator": {
+                "type": "i18next/react-hooks",
+                "hooks": "useI18N",
+                "namespace": "com.maskbook.red_packet",
+                "trans": "Translate",
+                "sourceMap": "inline"
+            }
+        },
         {
             "input": "./packages/mask/src/plugins/Tips/locales/en-US.json",
             "output": "./packages/mask/src/plugins/Tips/locales/i18n_generated",
@@ -239,6 +251,30 @@
                 "trans": "Translate",
                 "sourceMap": "inline"
             }
+        },
+        {
+            "input": "./packages/mask/src/plugins/Trader/locales/en-US.json",
+            "output": "./packages/mask/src/plugins/Trader/locales/i18n_generated",
+            "parser": { "type": "i18next", "contextSeparator": "$", "pluralSeparator": "_" },
+            "generator": {
+                "type": "i18next/react-hooks",
+                "hooks": "useI18N",
+                "namespace": "com.maskbook.trader",
+                "trans": "Translate",
+                "sourceMap": "inline"
+            }
+        },
+        {
+            "input": "./packages/mask/src/plugins/Gitcoin/locales/en-US.json",
+            "output": "./packages/mask/src/plugins/Gitcoin/locales/i18n_generated",
+            "parser": { "type": "i18next", "contextSeparator": "$", "pluralSeparator": "_" },
+            "generator": {
+                "type": "i18next/react-hooks",
+                "hooks": "useI18N",
+                "namespace": "com.maskbook.gitcoin",
+                "trans": "Translate",
+                "sourceMap": "inline"
+            }
         }
     ]
 }
diff --git a/packages/.eslintrc.json b/packages/.eslintrc.json
index a06fafd88039..7654e02a4c00 100644
--- a/packages/.eslintrc.json
+++ b/packages/.eslintrc.json
@@ -83,6 +83,7 @@
         "@dimensiondev/type/no-instanceof-wrapper": "error",
         "@dimensiondev/type/no-wrapper-type-reference": "error",
         "@dimensiondev/unicode/specific-set": "error",
+        "@typescript-eslint/array-type": ["error", { "default": "array-simple" }],
         "@typescript-eslint/await-thenable": "error",
         "@typescript-eslint/no-base-to-string": "off",
         "@typescript-eslint/no-implied-eval": "error",
diff --git a/packages/mask/shared-ui/locales/en-US.json b/packages/mask/shared-ui/locales/en-US.json
index 165266633b7a..5852e1f06d72 100644
--- a/packages/mask/shared-ui/locales/en-US.json
+++ b/packages/mask/shared-ui/locales/en-US.json
@@ -1,4 +1,11 @@
 {
+    "promote_red_packet": "🧧🧧🧧 Try sending Lucky Drop to your friends with tokens or NFTs to share the joy now! Install Mask.io to send your first Lucky Drop.",
+    "promote_ito": "Launch decentralized assets freely and participate in token launch directly on Twitter! Install Mask.io to participate in your first token launch activity.",
+    "promote_ito_short": "Install Mask.io to launch dencentralized assests freely on Twitter!",
+    "promote_file_service": "📃📃📃 Try to permanently use decentralized file storage on Twitter. Install Mask.io to upload and share first permanent decentralized file, powered by mainstream decentralized storage solutions.",
+    "promote_savings": "Hi friends, I just deposit {{amount}} {{symbol}} on {{chain}}. Follow @{{account}} to find more staking projects.",
+    "promote_collectible": "Display collectibles in variable NFT marketplaces, make an offer directly on social media. Install Mask.io to try to browse NFTs directly on Twitter.",
+    "promote_snapshot": "Want to actively participate in proposal vote and move projects forward? Install Mask.io to vote proposals directly on Twitter.",
     "database_backup": "Backup Database",
     "database_overwrite": "Overwrite Database with backup",
     "database_clear": "Clear Database",
@@ -46,9 +53,13 @@
     "application_settings_tab_plug_app-listed-placeholder": "Click the application icon to hide in the APP list.",
     "application_settings_tab_plug_app-unlisted-placeholder": "Click the application icon to list it on the App board.",
     "additional_post_box__encrypted_post_pre": "Decrypt this post with #mask_io ! {{encrypted}}",
-    "additional_post_box__encrypted_post_pre_red_packet_twitter_official_account": "Hi, claim this lucky drop with #mask_io @{{account}} {{encrypted}}",
-    "additional_post_box__encrypted_post_pre_red_packet": "Hi, claim this lucky drop with #mask_io {{encrypted}}",
-    "additional_post_box__steganography_post_pre": "This image is encrypted with #mask_io. 📪🔑 Install mask.io to decrypt it. {{random}}",
+    "additional_post_box__encrypted_post_pre_red_packet_twitter_official_account": "Hi, claim this lucky drop with #mask_io @{{account}} \n\n$t(promote_red_packet)\n {{encrypted}}",
+    "additional_post_box__encrypted_post_pre_red_packet": "Hi, claim this lucky drop with #mask_io\n$t(promote_red_packet) {{encrypted}}",
+    "additional_post_box__encrypted_post_pre_ito_twitter_official_account": "$t(promote_ito)\n {{encrypted}}",
+    "additional_post_box__encrypted_post_pre_ito": "$t(promote_ito) {{encrypted}}",
+    "additional_post_box__encrypted_post_pre_file_service_twitter_official_account": "$t(promote_file_service)\n {{encrypted}}",
+    "additional_post_box__encrypted_post_pre_file_service": "$t(promote_file_service) {{encrypted}}",
+    "additional_post_box__steganography_post_pre": "This image is encrypted with #mask_io.\n{{random}}\n$t(promote_red_packet)\n",
     "auto_paste_failed_dialog_title": "Paste manually",
     "auto_paste_failed_dialog_content": "Please copy the following text and image (if there is any) and publish it.",
     "auto_paste_failed_dialog_image_caption": "Open in a new tab",
@@ -133,6 +144,9 @@
     "user_guide_tip_2": "Connect and switch your wallet.",
     "user_guide_tip_3": "Browse the Web 3 footprints of your Twitter friends, enjoy the freedom of Web 3.",
     "user_guide_tip_4": "Click here to have a quick start.",
+    "plugin_avatar_setup_share_title": "NFT PFP",
+    "plugin_avatar_setup_pfp_share": "I just set my NFT PFP using Mask Extension for free! To browse other's unique NFT collections and web3 activities on Twitter, download the most powerful tool mask.io.",
+    "plugin_avatar_setup_success": "Set NFT PFP successfully.",
     "mask_network": "Mask Network",
     "import": "Import",
     "no_search_result": "No result",
@@ -162,7 +176,6 @@
     "reset": "Reset",
     "editor": "Editor",
     "retry": "Retry",
-    "search": "Search",
     "go_wrong": "Something went wrong.",
     "search_box_placeholder": "Type here to search",
     "select_all": "Select All",
@@ -185,9 +198,6 @@
     "wallet_load_retry": "Failed to load {{symbol}}. Click to retry.",
     "wallet_name": "Wallet Name",
     "wallet_rename": "Rename Wallet",
-    "wallet_add_nft_invalid_owner": "The collectible does not belong to you.",
-    "wallet_add_nft_already_added": "The collectible has already been added.",
-    "wallet_loading_token": "Loading token...",
     "wallet_loading_nft_contract": "Loading NFT contract...",
     "wallet_search_contract_no_result": "No results or contract address does not meet the query criteria.",
     "wallet_search_no_result": "No results.",
@@ -268,7 +278,6 @@
     "relative_time_months_ago": "{{months}} months ago",
     "relative_time_seconds_ago": "{{seconds}} seconds ago",
     "relative_time_years_ago": "{{years}} years ago",
-    "plugin_chain_not_supported": "Not supported on {{chain}} yet.",
     "plugin_wallet_snackbar_wait_for_confirming": "Confirm this transaction in your wallet",
     "plugin_wallet_snackbar_hash": "Transaction Submitted",
     "plugin_wallet_snackbar_confirmed": "Transaction Confirmed",
@@ -284,8 +293,6 @@
     "plugin_wallet_connecting_with": "Connecting with",
     "plugin_wallet_metamask_error_already_request": "You've opened the popup, please confirm.",
     "plugin_wallet_connect_tip": "Please make sure that your {{providerName}} wallet is provided by the offical <providerLink>{{providerShortenLink}}</providerLink>.",
-    "plugin_wallet_collections": "Collections",
-    "plugin_wallet_select_a_token": "Select a Token",
     "plugin_wallet_select_a_nft_contract": "Select an NFT Contract",
     "plugin_wallet_select_a_nft_owner": "Select an NFT Contract Owner",
     "plugin_wallet_select_a_nft_operator": "Select an NFT Contract Operator",
@@ -337,93 +344,14 @@
     "plugin_wallet_name_placeholder": "Enter 1-12 characters",
     "plugin_wallet_cancel_sign": "Signature canceled.",
     "plugin_nft_avatar_recommend_feature_description": "Set your NFT as profile picture with exclusive aura",
-    "plugin_red_packet_display_name": "Plugin: Lucky Drop",
     "application_hint": "Socialize and show off your NFTs. People can bid,buy, view your valuable NFTs without leaving Twitter.",
-    "plugin_red_packet_claimed": "Claimed",
-    "plugin_red_packet_erc20_tab_title": "Token",
-    "plugin_red_packet_erc721_tab_title": "Collectibles",
-    "plugin_red_packet_name": "Lucky Drop",
-    "plugin_red_packet_recommend_feature_description": "Astonish your friends with a surprise gift",
-    "plugin_red_packet_description": "Gift crypto or NFTs to any users, first come, first served.",
-    "plugin_red_packet_erc721_insufficient_balance": "Insufficient Balance",
-    "plugin_red_packet_details": "Lucky Drop Details",
-    "plugin_red_packet_split_mode": "Split Mode",
-    "plugin_red_packet_average": "Average",
-    "plugin_red_packet_random": "Random",
-    "plugin_red_packet_shares": "Shares",
-    "plugin_red_packet_best_wishes": "Best Wishes!",
-    "plugin_red_packet_create_new": "New",
-    "plugin_red_packet_claim": "Claim",
-    "plugin_red_packet_claiming": "Claiming...",
-    "plugin_red_packet_refund": "Refund",
-    "plugin_red_packet_empty": "Empty",
-    "plugin_red_packet_data_broken": "The Lucky Drop can’t be sent due to data damage. Please withdraw the assets after {{duration}}.",
-    "plugin_red_packet_refunding": "Refunding",
-    "plugin_red_packet_select_existing": "Past",
-    "plugin_red_packet_share_unclaimed_message_official_account": "Hi friends, I just found a lucky drop sent by @{{sender}} on {{network}} network. Follow @{{account}} (mask.io) to claim lucky drops.\n#mask_io #LuckyDrop\n{{payload}}",
-    "plugin_red_packet_share_unclaimed_message_not_twitter": "Hi friends, I just found a lucky drop sent by @{{sender}} on {{network}} network. \n{{payload}}",
-    "plugin_red_packet_share_message_official_account": "I just claimed a lucky drop from @{{sender}} on {{network}} network. Follow @{{account}} (mask.io) to claim lucky drops.\n#mask_io #LuckyDrop\n{{payload}}",
-    "plugin_red_packet_share_message_not_twitter": "I just claimed a lucky drop from @{{sender}} on {{network}} network. \n{{payload}}",
-    "plugin_red_packet_nft_share_foreshow_message": "@{{sender}} is sending an NFT lucky drop on {{network}} network. Follow @{{account}} (mask.io) to claim NFT lucky drops.\n#mask_io #LuckyDrop\n{{payload}}",
-    "plugin_red_packet_nft_share_foreshow_message_not_twitter": "@{{sender}} is sending an NFT lucky drop on {{network}} network. \n{{payload}}",
-    "plugin_red_packet_nft_share_claimed_message": "I just claimed an NFT lucky drop from @{{sender}} on {{network}} network. Follow @{{account}} (mask.io) to claim NFT lucky drops.\n#mask_io #LuckyDrop\n{{payload}}",
-    "plugin_red_packet_nft_share_claimed_message_not_twitter": "I just claimed an NFT lucky drop from @{{sender}} on {{network}} network. \n{{payload}}",
-    "plugin_red_packet_nft_tip": "This is an NFT lucky drop.",
-    "plugin_red_packet_nft_no_history": "You haven’t created any NFT lucky drop yet. Try to create and share lucky with your friends.",
-    "plugin_red_packet_attached_message": "Attached Message",
-    "plugin_red_packet_from": "From: @{{name}}",
-    "plugin_red_packet_description_claimed": "You got {{amount}} {{symbol}}",
-    "plugin_red_packet_description_expired": "The Lucky Drop is expired.",
-    "plugin_red_packet_description_refunded": "The Lucky Drop has been refunded.",
-    "plugin_red_packet_description_refund": "You could refund {{balance}} {{symbol}}.",
-    "plugin_red_packet_description_empty": "The Lucky Drop is empty.",
-    "plugin_red_packet_description_broken": "The Lucky Drop is broken.",
-    "plugin_red_packet_description_failover": "{{shares}} shares / {{total}} {{symbol}}",
-    "plugin_red_packet_amount_per_share": "Amount per Share",
-    "plugin_red_packet_send_symbol": "Send {{amount}} {{symbol}}",
-    "plugin_red_packet_amount_total": "Amount Total",
-    "plugin_red_packet_next": "Next",
-    "plugin_red_packet_back": "Back",
-    "plugin_red_packet_hint": "You can withdraw the remaining balance 24 hours after the Lucky Drop is sent.",
-    "plugin_red_packet_token": "Token",
-    "plugin_red_packet_message_label": "Title",
     "plugin_red_packet_create": "Create a Lucky Drop",
     "plugin_red_packet_create_with_token": "Create a Lucky Drop with {{amount}} {{symbol}}",
-    "plugin_red_packet_history_duration": "Time: {{startTime}} ~ {{endTime}} (UTC+8)",
-    "plugin_red_packet_history_total_amount": "Total Amount: {{amount}} {{symbol}}",
-    "plugin_red_packet_history_total_claimed_amount": "Total: <span><strong>{{claimedAmount}}/{{amount}}</strong></span> {{symbol}}",
-    "plugin_red_packet_history_claimed": "Claimed: <strong>{{claimedShares}}/{{shares}}</strong> Share",
-    "plugin_red_packet_history_split_mode": "Split Mode: {{mode}}",
-    "plugin_red_packet_history_send": "Send",
     "plugin_nft_red_packet_create": "Create an NFT Lucky Drop",
     "plugin_red_packet_nft_account_name": "Wallet account",
-    "plugin_red_packet_nft_attached_message": "Attached Message",
-    "plugin_red_packet_nft_total_amount": "Total Amount",
-    "plugin_red_packet_nft_select_collection": "Choose your collection",
-    "plugin_red_packet_nft_max_shares": "The maximum number of NFTs to be sold in NFT lucky drop contract is {{amount}}.",
-    "plugin_red_packet_nft_max_shares_tip": "The NFT lucky drop supports up to {{amount}} NFTs selected for one time.",
     "plugin_red_packet_nft_shift_select_tip": "You can also use <text>{{text}}</text> to select multiple NFTs.",
-    "plugin_red_packet_nft_non_existed_tip": "Token ID <tokenIdList></tokenIdList> does not exist or belong to you.",
-    "plugin_red_packet_nft_select_all_option": "ALL ({{total}} NFT)",
-    "plugin_red_packet_nft_select_partially_option": "Select partially",
-    "plugin_red_packet_nft_unapproved_tip": "You can get the rest of your NFTs back after 24 hours of sending.",
-    "plugin_red_packet_nft_approve_all_tip": "Note: When selecting approve all, all NFTs in the contract will be authorized for sale by default, including the NFTs transfered later.",
-    "plugin_red_packet_completed": "Completed",
-    "plugin_red_packet_expired": "Expired",
-    "plugin_red_packet_indivisible": "The minimum amount for each share is {{amount}} {{symbol}}",
-    "plugin_nft_red_packet_data_broken": "The Lucky Drop can’t be sent due to data damage.",
-    "plugin_gitcoin_readme": "By using this service, you will also be contributing 5% of your contribution to the <fund>Gitcoin grants development fund</fund>.",
-    "plugin_gitcoin_readme_fund_link": "https://gitcoin.co/grants/86/gitcoin-sustainability-fund",
     "plugin_gitcoin_select_a_token": "Select a token",
-    "plugin_gitcoin_name": "Gitcoin",
-    "plugin_gitcoin_description": "Display specific information of Gitcoin projects, donate to a project directly on social media.",
-    "plugin_gitcoin_enter_an_amount": "Enter an amount",
-    "plugin_gitcoin_grant_not_available": "Grant not available",
     "plugin_gitcoin_insufficient_balance": "Insufficient {{symbol}} balance",
-    "plugin_gitcoin_donate": "Donate",
-    "plugin_gitcoin_last_updated": "Last update:",
-    "plugin_gitcoin_by": "By",
-    "plugin_gitcoin_view_on": "View on Gitcoin",
     "plugin_trader_fail_to_load": "Fail to load trending info from  ",
     "plugin_trader_lbp_pool_in_balancer": "LBP Pool in Balancer",
     "plugin_trader_swap_description": "Pop-up trading widget allows you to instantly view prices of the hottest Crypto/Stock and trade, also invest in the best performing managers.",
@@ -612,10 +540,10 @@
     "plugin_ito_qualification_failed": "The wallet address isn't on the list.",
     "plugin_ito_congratulations": "Congratulations!",
     "plugin_ito_out_of_stock_hit": "Better luck next time",
-    "plugin_ito_claim_success_share": "I just attended @{{user}}'s #ITO with @{{account}} to swap ${{symbol}}. Install mask.io and start your own Initial Twitter Offering! \n {{link}}",
-    "plugin_ito_claim_success_share_no_official_account": "I just attended @{{user}}'s #ITO to swap ${{symbol}}. Install mask.io and start your own Initial Twitter Offering! \n {{link}}",
-    "plugin_ito_claim_foreshow_share": "{{symbol}}({{name}}) is launching a new #ITO. Come and join it! Follow @{{account}} (mask.io) to find more events! \n {{link}}",
-    "plugin_ito_claim_foreshow_share_no_official_account": "{{symbol}}({{name}}) is launching a new #ITO. Come and join it! \n {{link}}",
+    "plugin_ito_claim_success_share": "I just attended @{{user}}'s #ITO with @{{account}} to swap ${{symbol}}.\n$t(promote_ito_short)\n{{link}}",
+    "plugin_ito_claim_success_share_no_official_account": "I just attended @{{user}}'s #ITO to swap ${{symbol}}.\n$t(promote_ito_short)\n{{link}}",
+    "plugin_ito_claim_foreshow_share": "{{symbol}}({{name}}) is launching a new #ITO. Come and join it! Follow @{{account}} (mask.io) to find more events! \n {{link}}\n$t(promote_ito_short)\n",
+    "plugin_ito_claim_foreshow_share_no_official_account": "{{symbol}}({{name}}) is launching a new #ITO. Come and join it! \n {{link}}\n$t(promote_ito_short)\n",
     "plugin_ito_password": "Password: {{password}}",
     "plugin_ito_status_no_start": "Not started",
     "plugin_ito_status_ongoing": "Ongoing",
diff --git a/packages/mask/shared-ui/locales/ja-JP.json b/packages/mask/shared-ui/locales/ja-JP.json
index 393a7e0e4ef9..118edbbc103a 100644
--- a/packages/mask/shared-ui/locales/ja-JP.json
+++ b/packages/mask/shared-ui/locales/ja-JP.json
@@ -47,7 +47,6 @@
     "post_modal_hint__button": "投稿を暗号化",
     "hide": "隠す",
     "reset": "リセットする",
-    "search": "検索",
     "search_box_placeholder": "ここに打って検索",
     "select_all": "全て選ぶ",
     "select_none": "何も選んでいません。",
@@ -77,7 +76,6 @@
     "relative_time_months_ago": "{{months}}月前",
     "relative_time_seconds_ago": "{{seconds}}秒前",
     "relative_time_years_ago": "{{years}}年前",
-    "plugin_wallet_select_a_token": "トークンを選択",
     "plugin_wallet_connect_a_wallet": "ウォレットと接続",
     "plugin_wallet_no_gas_fee": "ガス代が不足しています",
     "plugin_wallet_update_gas_fee": "ガス代を更新中…",
@@ -105,26 +103,6 @@
     "plugin_wallet_on_connect_in_firefox": "接続する",
     "plugin_wallet_return_mobile_wallet_options": "モバイルウォレットのオプションに戻る",
     "plugin_wallet_view_qr_code": "QR コードを表示する",
-    "plugin_red_packet_display_name": "プラグイン: 投げ銭",
-    "plugin_red_packet_split_mode": "分割モード",
-    "plugin_red_packet_average": "平均",
-    "plugin_red_packet_random": "ランダム",
-    "plugin_red_packet_shares": "株数",
-    "plugin_red_packet_best_wishes": "幸運を祈ります！",
-    "plugin_red_packet_create_new": "新しい投げ銭を作成",
-    "plugin_red_packet_claim": "受け取る",
-    "plugin_red_packet_refund": "無効",
-    "plugin_red_packet_select_existing": "既存の投げ銭を選択",
-    "plugin_red_packet_attached_message": "メッセージを追加",
-    "plugin_red_packet_from": "送信者：{{name}}",
-    "plugin_red_packet_description_expired": "期限切れです",
-    "plugin_red_packet_description_refunded": "無効です",
-    "plugin_red_packet_description_refund": "{{balance}}{{symbol}}を受け取れます",
-    "plugin_red_packet_description_empty": "期限切れです",
-    "plugin_red_packet_description_broken": "破損しています",
-    "plugin_red_packet_description_failover": "{{amount}} {{symbol}} / {{shares}} 株",
-    "plugin_red_packet_amount_per_share": "1株当たりの金額",
-    "plugin_red_packet_send_symbol": "{{symbol}} を送る",
     "plugin_red_packet_create_with_token": "{{symbol}} で投げ銭を作成する",
     "plugin_gitcoin_readme": "このサービスを利用するにあたり、寄付金額の 5% が <fund>Gitcoin grants development fund</fund> に寄付されます",
     "plugin_gitcoin_select_a_token": "トークンを選択する",
diff --git a/packages/mask/shared-ui/locales/ko-KR.json b/packages/mask/shared-ui/locales/ko-KR.json
index 1720ce293397..b69cc4e22da5 100644
--- a/packages/mask/shared-ui/locales/ko-KR.json
+++ b/packages/mask/shared-ui/locales/ko-KR.json
@@ -98,7 +98,6 @@
     "reset": "초기화",
     "editor": "에디터",
     "retry": "다시 시도",
-    "search": "검색",
     "go_wrong": "오류가 발생합니다.",
     "search_box_placeholder": "여기서 검색하기",
     "select_all": "전체 선택",
@@ -118,12 +117,8 @@
     "transfer": "이체",
     "wallet_name": "월렛 이름",
     "wallet_rename": "월렛 이름 바꾸기",
-    "wallet_add_nft_invalid_owner": "해당 수집품은 존재하지 않거나 유저님의 것이 아닙니다.",
-    "wallet_add_nft_already_added": "이미 추가된 수집품입니다.",
-    "wallet_loading_token": "토큰 로딩...",
     "wallet_loading_nft_contract": "NFT 컨트렉트 로딩...",
     "wallet_search_contract_no_result": "검색 포준에 맞추는 결과나 컨트렉트 주소가 없습니다.",
-    "wallet_search_no_result": "결과 없음.",
     "wallet_airdrop_nft_unclaimed_title": "수령하지 않는 NFT 에어드랍:",
     "plugin_airdrop_nft_start_time": "시작 시간: {{date}}",
     "plugin_airdrop_nft_end_time": "종료 시간: {{date}}",
@@ -171,8 +166,6 @@
     "relative_time_months_ago": "{{months}} 월 전",
     "relative_time_seconds_ago": "{{seconds}} 초 전",
     "relative_time_years_ago": "{{years}} 년 전",
-    "plugin_wallet_collections": "컬렉션",
-    "plugin_wallet_select_a_token": "토큰을 선택하기",
     "plugin_wallet_select_a_nft_contract": "NFT 컨트렉트를 선택하세요.",
     "plugin_wallet_select_a_nft_owner": "NFT 컨트렉트 소유자를 선택하세요.",
     "plugin_wallet_select_a_nft_operator": "NFT 컨트렉트 오퍼레이터",
@@ -219,61 +212,8 @@
     "plugin_wallet_connect_wallet": "월렛 연결",
     "plugin_wallet_name_placeholder": "1-12 자 입력하세요",
     "plugin_wallet_cancel_sign": "서명이 실패되었습니다.",
-    "plugin_red_packet_display_name": "플러그인: 빨간 백",
-    "plugin_red_packet_erc20_tab_title": "토큰",
-    "plugin_red_packet_erc721_tab_title": "수집품",
-    "plugin_red_packet_erc721_insufficient_balance": "잔액 부족",
-    "plugin_red_packet_details": "행운 드랍 디테일",
-    "plugin_red_packet_split_mode": "분할 모드",
-    "plugin_red_packet_average": "평균",
-    "plugin_red_packet_random": "렌덤",
-    "plugin_red_packet_shares": "공유",
-    "plugin_red_packet_best_wishes": "행운을 빌어요!",
-    "plugin_red_packet_create_new": "새로운 것 만들기",
-    "plugin_red_packet_claim": "수령",
-    "plugin_red_packet_claiming": "수령 중...",
-    "plugin_red_packet_refund": "반환",
-    "plugin_red_packet_empty": "비어 있음",
-    "plugin_red_packet_data_broken": "데이터 손상으로 인해 레드 패킷을 보낼 수 없습니다. {{duration}} 후 자산을 인출할 수 있습니다.",
-    "plugin_red_packet_refunding": "환급 중",
-    "plugin_red_packet_select_existing": "기존 빨간 백 선택",
-    "plugin_red_packet_share_message_official_account": "{{network}} 네트워크에서 @{{sender}}의 레트 패킷을 받았어요. @{{account}} (mask.io) 팔로우하고 레드 패킷을 받으세요.\n#mask_io #LuckyDrop\n{{payload}}",
-    "plugin_red_packet_share_message_not_twitter": "{{network}} 에서 @{{sender}} 의 레드 패킷을 클레임했습니다.\n{{payload}}",
-    "plugin_red_packet_nft_share_foreshow_message": "@{{network}} 네트워크에서 @{{sender}} 레트 패킷을 보내고 있습니다. @{{account}} (mask.io) 팔로우하고 NFT 레드 패킷을 받으세요.\n#mask_io #LuckyDrop\n{{payload}}",
-    "plugin_red_packet_nft_share_foreshow_message_not_twitter": "@{{network}} 네트워크에서 @{{sender}} NFT 레트 패킷을 보내고 있습니다. \n{{payload}}",
-    "plugin_red_packet_nft_share_claimed_message": "{{network}} 네트워크에서 @{{sender}}의 NFT 레트 패킷을 받았어요. @{{account}} (mask.io) 팔로우하고 NFT 레드 패킷을 받으세요.\n#mask_io #LuckyDrop\n{{payload}}",
-    "plugin_red_packet_nft_share_claimed_message_not_twitter": "{{network}} 에서 @{{sender}} 의 NFT 레드 패킷을 클레임했습니다.\n{{payload}}",
-    "plugin_red_packet_nft_tip": "이것은 NFT 레드 패킷입니다.",
-    "plugin_red_packet_attached_message": "첨부 메시지",
-    "plugin_red_packet_from": "보낸사람: {{name}}",
-    "plugin_red_packet_description_claimed": "이미 수령하였습니다.",
-    "plugin_red_packet_description_expired": "이 빨간 백 이미 만료되었습니다.",
-    "plugin_red_packet_description_refunded": "이 빨간 백 이미 반환되었습니다.",
-    "plugin_red_packet_description_refund": "{{balance}} {{symbol} 반환 가능합니다.",
-    "plugin_red_packet_description_empty": "빈 빨간 백입니다.",
-    "plugin_red_packet_description_broken": "파손된 빨간 백입니다.",
-    "plugin_red_packet_description_failover": "{{name}} / {{shares}}에서  / {{total}} {{symbol}} 공유합니다.",
-    "plugin_red_packet_amount_per_share": "공유 총액",
-    "plugin_red_packet_send_symbol": "{{symbol}} 보내기",
-    "plugin_red_packet_amount_total": "총액",
-    "plugin_red_packet_next": "다음",
-    "plugin_red_packet_back": "뒤로",
-    "plugin_red_packet_hint": "레드 패킷이 공유된 후 24시간 후에 나머지 잔액을 인출할 수 있습니다.",
-    "plugin_red_packet_token": "토큰",
-    "plugin_red_packet_message_label": "제목",
     "plugin_red_packet_create_with_token": "{{symbol}} 으로 빨간 백 만드는 중",
-    "plugin_red_packet_history_duration": "시간: {{startTime}} ~ {{endTime}} (UTC+8)",
-    "plugin_red_packet_history_total_amount": "총액: {{amount}} {{symbol}}",
-    "plugin_red_packet_history_total_claimed_amount": "전체: <span><strong>{{claimedAmount}}/{{amount}}</strong></span> {{symbol}}",
-    "plugin_red_packet_history_claimed": "수령됨: <strong>{{claimedShares}}/{{shares}}</strong> 공유",
-    "plugin_red_packet_history_split_mode": "Split Mode: {{mode}}",
-    "plugin_red_packet_history_send": "발송",
     "plugin_red_packet_nft_account_name": "지갑 계정",
-    "plugin_red_packet_nft_attached_message": "첨부 메시지",
-    "plugin_red_packet_nft_total_amount": "총 금액",
-    "plugin_red_packet_completed": "완료됨",
-    "plugin_red_packet_expired": "만료됨",
-    "plugin_nft_red_packet_data_broken": "테이터 훼손때문에 해당 레드 패킷을 보낼 수 없습니다.",
     "plugin_gitcoin_readme": "이 서비스를 이용하면 <fund>Gitcoin 개발 기금에 당신의 기여금</fund>의 5%를 기부할 것이다.",
     "plugin_gitcoin_readme_fund_link": "https://gitcoin.co/grants/86/gitcoin-sustainability-fund",
     "plugin_gitcoin_select_a_token": "토큰 선택",
diff --git a/packages/mask/shared-ui/locales/qya-AA.json b/packages/mask/shared-ui/locales/qya-AA.json
index f70c67a90739..ecb471a7d0e4 100644
--- a/packages/mask/shared-ui/locales/qya-AA.json
+++ b/packages/mask/shared-ui/locales/qya-AA.json
@@ -162,7 +162,6 @@
     "reset": "crwdns4301:0crwdne4301:0",
     "editor": "crwdns10131:0crwdne10131:0",
     "retry": "crwdns4303:0crwdne4303:0",
-    "search": "crwdns4327:0crwdne4327:0",
     "go_wrong": "crwdns10133:0crwdne10133:0",
     "search_box_placeholder": "crwdns4331:0crwdne4331:0",
     "select_all": "crwdns4333:0crwdne4333:0",
@@ -185,12 +184,8 @@
     "wallet_load_retry": "crwdns10135:0{{symbol}}crwdne10135:0",
     "wallet_name": "crwdns4487:0crwdne4487:0",
     "wallet_rename": "crwdns4489:0crwdne4489:0",
-    "wallet_add_nft_invalid_owner": "crwdns7723:0crwdne7723:0",
-    "wallet_add_nft_already_added": "crwdns8131:0crwdne8131:0",
-    "wallet_loading_token": "crwdns8133:0crwdne8133:0",
     "wallet_loading_nft_contract": "crwdns8135:0crwdne8135:0",
     "wallet_search_contract_no_result": "crwdns8137:0crwdne8137:0",
-    "wallet_search_no_result": "crwdns8139:0crwdne8139:0",
     "wallet_confirm_with_password": "crwdns10141:0crwdne10141:0",
     "wallet_airdrop_nft_unclaimed_title": "crwdns8093:0crwdne8093:0",
     "plugin_external_unknown_plugin": "crwdns10143:0crwdne10143:0",
@@ -268,7 +263,6 @@
     "relative_time_months_ago": "crwdns4581:0{{months}}crwdne4581:0",
     "relative_time_seconds_ago": "crwdns4583:0{{seconds}}crwdne4583:0",
     "relative_time_years_ago": "crwdns4585:0{{years}}crwdne4585:0",
-    "plugin_chain_not_supported": "crwdns10689:0{{chain}}crwdne10689:0",
     "plugin_wallet_snackbar_wait_for_confirming": "crwdns10629:0crwdne10629:0",
     "plugin_wallet_snackbar_hash": "crwdns10631:0crwdne10631:0",
     "plugin_wallet_snackbar_confirmed": "crwdns10633:0crwdne10633:0",
@@ -284,8 +278,6 @@
     "plugin_wallet_connecting_with": "crwdns14612:0crwdne14612:0",
     "plugin_wallet_metamask_error_already_request": "crwdns12987:0crwdne12987:0",
     "plugin_wallet_connect_tip": "crwdns12989:0{{providerName}}crwdnd12989:0{{providerShortenLink}}crwdne12989:0",
-    "plugin_wallet_collections": "crwdns8141:0crwdne8141:0",
-    "plugin_wallet_select_a_token": "crwdns4589:0crwdne4589:0",
     "plugin_wallet_select_a_nft_contract": "crwdns7923:0crwdne7923:0",
     "plugin_wallet_select_a_nft_owner": "crwdns7925:0crwdne7925:0",
     "plugin_wallet_select_a_nft_operator": "crwdns7927:0crwdne7927:0",
@@ -337,81 +329,12 @@
     "plugin_wallet_name_placeholder": "crwdns4705:0crwdne4705:0",
     "plugin_wallet_cancel_sign": "crwdns4709:0crwdne4709:0",
     "plugin_nft_avatar_recommend_feature_description": "crwdns16626:0crwdne16626:0",
-    "plugin_red_packet_display_name": "crwdns4711:0crwdne4711:0",
     "application_hint": "crwdns16628:0crwdne16628:0",
-    "plugin_red_packet_claimed": "crwdns10205:0crwdne10205:0",
-    "plugin_red_packet_erc20_tab_title": "crwdns8143:0crwdne8143:0",
-    "plugin_red_packet_erc721_tab_title": "crwdns8145:0crwdne8145:0",
-    "plugin_red_packet_name": "crwdns16234:0crwdne16234:0",
-    "plugin_red_packet_recommend_feature_description": "crwdns16544:0crwdne16544:0",
-    "plugin_red_packet_description": "crwdns16236:0crwdne16236:0",
-    "plugin_red_packet_erc721_insufficient_balance": "crwdns8147:0crwdne8147:0",
-    "plugin_red_packet_details": "crwdns9071:0crwdne9071:0",
-    "plugin_red_packet_split_mode": "crwdns4713:0crwdne4713:0",
-    "plugin_red_packet_average": "crwdns4715:0crwdne4715:0",
-    "plugin_red_packet_random": "crwdns4717:0crwdne4717:0",
-    "plugin_red_packet_shares": "crwdns4719:0crwdne4719:0",
-    "plugin_red_packet_best_wishes": "crwdns4721:0crwdne4721:0",
-    "plugin_red_packet_create_new": "crwdns4723:0crwdne4723:0",
-    "plugin_red_packet_claim": "crwdns4725:0crwdne4725:0",
-    "plugin_red_packet_claiming": "crwdns4727:0crwdne4727:0",
-    "plugin_red_packet_refund": "crwdns4729:0crwdne4729:0",
-    "plugin_red_packet_empty": "crwdns4731:0crwdne4731:0",
-    "plugin_red_packet_data_broken": "crwdns7999:0{{duration}}crwdne7999:0",
-    "plugin_red_packet_refunding": "crwdns4733:0crwdne4733:0",
-    "plugin_red_packet_select_existing": "crwdns4735:0crwdne4735:0",
-    "plugin_red_packet_share_unclaimed_message_official_account": "crwdns14614:0{{sender}}crwdnd14614:0{{network}}crwdnd14614:0{{account}}crwdnd14614:0{{payload}}crwdne14614:0",
-    "plugin_red_packet_share_unclaimed_message_not_twitter": "crwdns14616:0{{sender}}crwdnd14616:0{{network}}crwdnd14616:0{{payload}}crwdne14616:0",
-    "plugin_red_packet_share_message_official_account": "crwdns9175:0{{sender}}crwdnd9175:0{{network}}crwdnd9175:0{{account}}crwdnd9175:0{{payload}}crwdne9175:0",
-    "plugin_red_packet_share_message_not_twitter": "crwdns9177:0{{sender}}crwdnd9177:0{{network}}crwdnd9177:0{{payload}}crwdne9177:0",
-    "plugin_red_packet_nft_share_foreshow_message": "crwdns8151:0{{sender}}crwdnd8151:0{{network}}crwdnd8151:0{{account}}crwdnd8151:0{{payload}}crwdne8151:0",
-    "plugin_red_packet_nft_share_foreshow_message_not_twitter": "crwdns9011:0{{sender}}crwdnd9011:0{{network}}crwdnd9011:0{{payload}}crwdne9011:0",
-    "plugin_red_packet_nft_share_claimed_message": "crwdns8153:0{{sender}}crwdnd8153:0{{network}}crwdnd8153:0{{account}}crwdnd8153:0{{payload}}crwdne8153:0",
-    "plugin_red_packet_nft_share_claimed_message_not_twitter": "crwdns9013:0{{sender}}crwdnd9013:0{{network}}crwdnd9013:0{{payload}}crwdne9013:0",
-    "plugin_red_packet_nft_tip": "crwdns8155:0crwdne8155:0",
-    "plugin_red_packet_nft_no_history": "crwdns12991:0crwdne12991:0",
-    "plugin_red_packet_attached_message": "crwdns4739:0crwdne4739:0",
-    "plugin_red_packet_from": "crwdns4741:0{{name}}crwdne4741:0",
-    "plugin_red_packet_description_claimed": "crwdns4743:0{{amount}}crwdnd4743:0{{symbol}}crwdne4743:0",
-    "plugin_red_packet_description_expired": "crwdns4745:0crwdne4745:0",
-    "plugin_red_packet_description_refunded": "crwdns4747:0crwdne4747:0",
-    "plugin_red_packet_description_refund": "crwdns4749:0{{balance}}crwdnd4749:0{{symbol}}crwdne4749:0",
-    "plugin_red_packet_description_empty": "crwdns4751:0crwdne4751:0",
-    "plugin_red_packet_description_broken": "crwdns4753:0crwdne4753:0",
-    "plugin_red_packet_description_failover": "crwdns4755:0{{shares}}crwdnd4755:0{{total}}crwdnd4755:0{{symbol}}crwdne4755:0",
-    "plugin_red_packet_amount_per_share": "crwdns4761:0crwdne4761:0",
-    "plugin_red_packet_send_symbol": "crwdns4763:0{{amount}}crwdnd4763:0{{symbol}}crwdne4763:0",
-    "plugin_red_packet_amount_total": "crwdns4765:0crwdne4765:0",
-    "plugin_red_packet_next": "crwdns4767:0crwdne4767:0",
-    "plugin_red_packet_back": "crwdns4769:0crwdne4769:0",
-    "plugin_red_packet_hint": "crwdns4771:0crwdne4771:0",
-    "plugin_red_packet_token": "crwdns4773:0crwdne4773:0",
-    "plugin_red_packet_message_label": "crwdns8157:0crwdne8157:0",
     "plugin_red_packet_create": "crwdns11873:0crwdne11873:0",
     "plugin_red_packet_create_with_token": "crwdns4775:0{{amount}}crwdnd4775:0{{symbol}}crwdne4775:0",
-    "plugin_red_packet_history_duration": "crwdns4777:0{{startTime}}crwdnd4777:0{{endTime}}crwdne4777:0",
-    "plugin_red_packet_history_total_amount": "crwdns4779:0{{amount}}crwdnd4779:0{{symbol}}crwdne4779:0",
-    "plugin_red_packet_history_total_claimed_amount": "crwdns4781:0{{claimedAmount}}crwdnd4781:0{{amount}}crwdnd4781:0{{symbol}}crwdne4781:0",
-    "plugin_red_packet_history_claimed": "crwdns4783:0{{claimedShares}}crwdnd4783:0{{shares}}crwdne4783:0",
-    "plugin_red_packet_history_split_mode": "crwdns4785:0{{mode}}crwdne4785:0",
-    "plugin_red_packet_history_send": "crwdns4787:0crwdne4787:0",
     "plugin_nft_red_packet_create": "crwdns11875:0crwdne11875:0",
     "plugin_red_packet_nft_account_name": "crwdns8159:0crwdne8159:0",
-    "plugin_red_packet_nft_attached_message": "crwdns8161:0crwdne8161:0",
-    "plugin_red_packet_nft_total_amount": "crwdns8163:0crwdne8163:0",
-    "plugin_red_packet_nft_select_collection": "crwdns10813:0crwdne10813:0",
-    "plugin_red_packet_nft_max_shares": "crwdns10815:0{{amount}}crwdne10815:0",
-    "plugin_red_packet_nft_max_shares_tip": "crwdns10817:0{{amount}}crwdne10817:0",
     "plugin_red_packet_nft_shift_select_tip": "crwdns10819:0{{text}}crwdne10819:0",
-    "plugin_red_packet_nft_non_existed_tip": "crwdns10821:0crwdne10821:0",
-    "plugin_red_packet_nft_select_all_option": "crwdns10823:0{{total}}crwdne10823:0",
-    "plugin_red_packet_nft_select_partially_option": "crwdns10825:0crwdne10825:0",
-    "plugin_red_packet_nft_unapproved_tip": "crwdns14622:0crwdne14622:0",
-    "plugin_red_packet_nft_approve_all_tip": "crwdns10827:0crwdne10827:0",
-    "plugin_red_packet_completed": "crwdns8165:0crwdne8165:0",
-    "plugin_red_packet_expired": "crwdns8167:0crwdne8167:0",
-    "plugin_red_packet_indivisible": "crwdns10621:0{{amount}}crwdnd10621:0{{symbol}}crwdne10621:0",
-    "plugin_nft_red_packet_data_broken": "crwdns8169:0crwdne8169:0",
     "plugin_gitcoin_readme": "crwdns4789:0crwdne4789:0",
     "plugin_gitcoin_readme_fund_link": "crwdns4791:0crwdne4791:0",
     "plugin_gitcoin_select_a_token": "crwdns4793:0crwdne4793:0",
diff --git a/packages/mask/shared-ui/locales/zh-CN.json b/packages/mask/shared-ui/locales/zh-CN.json
index 5e4435fc2eba..98ebee360881 100644
--- a/packages/mask/shared-ui/locales/zh-CN.json
+++ b/packages/mask/shared-ui/locales/zh-CN.json
@@ -134,7 +134,6 @@
     "reset": "重置",
     "editor": "编辑器",
     "retry": "重试",
-    "search": "搜索",
     "go_wrong": "出现了一些问题。",
     "search_box_placeholder": "输入要搜索的内容",
     "select_all": "全选",
@@ -156,12 +155,8 @@
     "wallet_load_retry": "加载 {{symbol}} 失败，请点击重试。",
     "wallet_name": "钱包名称",
     "wallet_rename": "重新命名钱包",
-    "wallet_add_nft_invalid_owner": "此收藏品不属于您。",
-    "wallet_add_nft_already_added": "此收藏品已被添加。",
-    "wallet_loading_token": "正在加载代币",
     "wallet_loading_nft_contract": "正在加载 NFT 合约...",
     "wallet_search_contract_no_result": "没有结果或合同地址不符合查询标准。",
-    "wallet_search_no_result": "没有任何结果。",
     "wallet_confirm_with_password": "使用密码确认",
     "wallet_airdrop_nft_unclaimed_title": "未认领的NFT Airdrop：",
     "plugin_external_unknown_plugin": "发现新的未知Mask插件，您想要加载它们吗？",
@@ -231,7 +226,6 @@
     "relative_time_months_ago": "{{months}} 个月前",
     "relative_time_seconds_ago": "{{seconds}} 秒前",
     "relative_time_years_ago": "{{years}} 年前",
-    "plugin_chain_not_supported": "尚未在 {{chain}} 上支持。",
     "plugin_wallet_snackbar_wait_for_confirming": "请在您的钱包中确认这笔交易",
     "plugin_wallet_snackbar_hash": "交易已提交",
     "plugin_wallet_snackbar_confirmed": "交易已确认",
@@ -247,8 +241,6 @@
     "plugin_wallet_connecting_with": "连接到",
     "plugin_wallet_metamask_error_already_request": "您已打开弹出窗口，请确认。",
     "plugin_wallet_connect_tip": "请确保您的 {{providerName}} 钱包是由官方 <providerLink>{{providerShortenLink}}</providerLink> 提供的。",
-    "plugin_wallet_collections": "收藏品",
-    "plugin_wallet_select_a_token": "选择代币",
     "plugin_wallet_select_a_nft_contract": "选择 NFT 合约",
     "plugin_wallet_select_a_nft_owner": "选择 NFT 合约持有者",
     "plugin_wallet_select_a_nft_operator": "选择 NFT 合约",
@@ -296,76 +288,11 @@
     "plugin_wallet_connect_wallet": "连接钱包",
     "plugin_wallet_name_placeholder": "输入1-12 个字符",
     "plugin_wallet_cancel_sign": "签名已取消。",
-    "plugin_red_packet_display_name": "插件：红包",
-    "plugin_red_packet_claimed": "已认领",
-    "plugin_red_packet_erc20_tab_title": "代币",
-    "plugin_red_packet_erc721_tab_title": "收藏品",
-    "plugin_red_packet_erc721_insufficient_balance": "余额不足",
-    "plugin_red_packet_details": "红包详情",
-    "plugin_red_packet_split_mode": "分享模式",
-    "plugin_red_packet_average": "平均",
-    "plugin_red_packet_random": "随机",
-    "plugin_red_packet_shares": "份额",
-    "plugin_red_packet_best_wishes": "祝好运！",
-    "plugin_red_packet_create_new": "新建",
-    "plugin_red_packet_claim": "认领",
-    "plugin_red_packet_claiming": "认领中...",
-    "plugin_red_packet_refund": "退款",
-    "plugin_red_packet_empty": "空的",
-    "plugin_red_packet_data_broken": "由于数据损坏，此红包无法发送。请在 {{duration}} 之后申请退款。",
-    "plugin_red_packet_refunding": "退款中",
-    "plugin_red_packet_select_existing": "历史红包",
-    "plugin_red_packet_share_unclaimed_message_official_account": "朋友们，我刚刚发现 @{{sender}} 在 {{network}} 网络发送了一个红包。 关注 @{{account}} (mask.io) 以获取红包。\n#mask_io #LuckyDrop\n{{payload}}",
-    "plugin_red_packet_share_unclaimed_message_not_twitter": "朋友们，我刚刚发现 @{{sender}} 在 {{network}} 网络发送了一个红包。\n{{payload}}",
-    "plugin_red_packet_share_message_official_account": "我刚从@{{sender}} 在 {{network}} 网络上认领了一个红包。关注@{{account}} (mask.io) 来获取红包。\n#mask_io #LuckyDrop\n{{payload}}",
-    "plugin_red_packet_share_message_not_twitter": "我刚从@{{sender}} 在 {{network}} 网络上认领了一个红包。\n{{payload}}",
-    "plugin_red_packet_nft_share_foreshow_message": "@{{sender}} 正在 {{network}} 网络上发送一个 NFT 红包。关注@{{account}} (mask.io) 以获取NFT 红包。\n#mask_io #LuckyDrop\n{{payload}}",
-    "plugin_red_packet_nft_share_foreshow_message_not_twitter": "@{{sender}} 正在 {{network}} 网络上发送一个 NFT 红包。 \n{{payload}}",
-    "plugin_red_packet_nft_share_claimed_message": "我刚从@{{sender}} 在 {{network}} 网络上认领了一个 NFT 红包。关注@{{account}} (mask.io) 来获取红包。\n#mask_io #LuckyDrop\n{{payload}}",
-    "plugin_red_packet_nft_share_claimed_message_not_twitter": "我刚从@{{sender}} 在 {{network}} 网络上认领了一个 NFT 红包。\n{{payload}}",
-    "plugin_red_packet_nft_tip": "这是一个 NFT 红包。",
-    "plugin_red_packet_nft_no_history": "您还没有创建任何NFT红包。尝试创建红包并与您的朋友分享。",
-    "plugin_red_packet_attached_message": "附加信息",
-    "plugin_red_packet_from": "来自：@{{name}}",
-    "plugin_red_packet_description_claimed": "你获得了 {{amount}} {{symbol}}",
-    "plugin_red_packet_description_expired": "此红包已过期。",
-    "plugin_red_packet_description_refunded": "此红包已退款。",
-    "plugin_red_packet_description_refund": "您可以退回 {{balance}} {{symbol}}。",
-    "plugin_red_packet_description_empty": "此红包是空的。",
-    "plugin_red_packet_description_broken": "此红包已被损坏。",
-    "plugin_red_packet_description_failover": "{{shares}} 份额 / {{total}} {{symbol}} 总金额",
-    "plugin_red_packet_amount_per_share": "单个份额",
-    "plugin_red_packet_send_symbol": "发送 {{amount}} {{symbol}}",
-    "plugin_red_packet_amount_total": "总额",
-    "plugin_red_packet_next": "下一步",
-    "plugin_red_packet_back": "返回",
-    "plugin_red_packet_hint": "你可以在红包发送的24小时后提取红包余额。",
-    "plugin_red_packet_token": "代币",
-    "plugin_red_packet_message_label": "标题",
     "plugin_red_packet_create": "创建一个红包",
     "plugin_red_packet_create_with_token": "使用 {{symbol}} 创建红包",
-    "plugin_red_packet_history_duration": "时间: {{startTime}} ~ {{endTime}} (UTC+8)",
-    "plugin_red_packet_history_total_amount": "总额: {{amount}} {{symbol}}",
-    "plugin_red_packet_history_total_claimed_amount": "总额： <span><strong>{{claimedAmount}}/{{amount}}</strong></span> {{symbol}}",
-    "plugin_red_packet_history_claimed": "已认领： <strong>{{claimedShares}}/{{shares}}</strong> 份额",
-    "plugin_red_packet_history_split_mode": "分享模式：{{mode}}",
-    "plugin_red_packet_history_send": "发送",
     "plugin_nft_red_packet_create": "创建一个NFT红包",
     "plugin_red_packet_nft_account_name": "钱包账户",
-    "plugin_red_packet_nft_attached_message": "附加信息",
-    "plugin_red_packet_nft_total_amount": "总数",
-    "plugin_red_packet_nft_select_collection": "选择您的收藏品系列",
-    "plugin_red_packet_nft_max_shares": "NFT红包合约最多支持 {{amount}} 个NFT投放。",
-    "plugin_red_packet_nft_max_shares_tip": "NFT红包合约最多支持 {{amount}} 个NFT投放。",
     "plugin_red_packet_nft_shift_select_tip": "您也可以使用 <text>{{text}}</text> 选择多个NFT。",
-    "plugin_red_packet_nft_non_existed_tip": "Token ID <tokenIdList></tokenIdList> 不存在或不属于您。",
-    "plugin_red_packet_nft_select_all_option": "全部 ({{total}} NFT)",
-    "plugin_red_packet_nft_select_partially_option": "选择部分",
-    "plugin_red_packet_nft_approve_all_tip": "注意：在选择批准所有NFT时，合约中的所有NFT都将被授权默认销售，包括随后转移的NFT。",
-    "plugin_red_packet_completed": "已完成",
-    "plugin_red_packet_expired": "已过期",
-    "plugin_red_packet_indivisible": "每个份额的最小金额为 {{amount}} {{symbol}}",
-    "plugin_nft_red_packet_data_broken": "由于数据损坏，红包无法发送。",
     "plugin_gitcoin_readme": "通过使用此服务，您将同时向 <fund>Gitcoin grants development fund</fund> 捐赠您5%捐款。",
     "plugin_gitcoin_readme_fund_link": "https://gitcoin.co/gitcoin-sustainability-fund",
     "plugin_gitcoin_select_a_token": "选择代币",
diff --git a/packages/mask/shared-ui/locales/zh-TW.json b/packages/mask/shared-ui/locales/zh-TW.json
index 191164dbd49f..227d7a9a385e 100644
--- a/packages/mask/shared-ui/locales/zh-TW.json
+++ b/packages/mask/shared-ui/locales/zh-TW.json
@@ -78,7 +78,6 @@
     "reset": "重設",
     "editor": "編輯器",
     "retry": "重試",
-    "search": "搜尋",
     "go_wrong": "出錯了",
     "search_box_placeholder": "在這裡輸入以搜尋",
     "select_all": "選擇全部",
@@ -98,11 +97,7 @@
     "export": "導出",
     "wallet_name": "錢包名稱",
     "wallet_rename": "重新命名錢包",
-    "wallet_add_nft_invalid_owner": "此藏品不屬於你",
-    "wallet_add_nft_already_added": "此收藏品已被添加",
-    "wallet_loading_token": "讀取代幣中...",
     "wallet_loading_nft_contract": "加載NFT合約中...",
-    "wallet_search_no_result": "無結果",
     "wallet_confirm_with_password": "確認密碼",
     "wallet_airdrop_nft_unclaimed_title": "尚未認領的NFT空投",
     "plugin_external_loader_search_holder": "搜尋外部插件",
@@ -158,8 +153,6 @@
     "relative_time_years_ago": "{{years}} 年前",
     "plugin_wallet_guiding_step_1": "1. 選擇網路",
     "plugin_wallet_guiding_step_2": "2. 選擇錢包",
-    "plugin_wallet_collections": "收藏",
-    "plugin_wallet_select_a_token": "選擇一個代幣",
     "plugin_wallet_select_a_nft_contract": "選擇一份NFT合約",
     "plugin_wallet_select_a_nft_owner": "選擇一位NFT合約擁有者",
     "plugin_wallet_select_a_nft_operator": "選擇一位NFT合約執行者",
@@ -203,51 +196,7 @@
     "plugin_wallet_switch_network_under_going": "切換至 {{network}} 中",
     "plugin_wallet_not_available_on": "{{network}} 不可用",
     "plugin_wallet_connect_wallet": "連接錢包",
-    "plugin_red_packet_display_name": "插件：紅包",
-    "plugin_red_packet_claimed": "已認領",
-    "plugin_red_packet_erc20_tab_title": "代幣",
-    "plugin_red_packet_erc721_tab_title": "收藏品",
-    "plugin_red_packet_erc721_insufficient_balance": "餘額不足",
-    "plugin_red_packet_details": "紅包詳情",
-    "plugin_red_packet_split_mode": "分割模式",
-    "plugin_red_packet_average": "平均",
-    "plugin_red_packet_random": "隨機",
-    "plugin_red_packet_shares": "分享數",
-    "plugin_red_packet_best_wishes": "祝好運！",
-    "plugin_red_packet_create_new": "建立新的",
-    "plugin_red_packet_claim": "認領",
-    "plugin_red_packet_claiming": "認領中...",
-    "plugin_red_packet_refund": "退款",
-    "plugin_red_packet_empty": "空的",
-    "plugin_red_packet_refunding": "退款中",
-    "plugin_red_packet_select_existing": "選擇已存在的",
-    "plugin_red_packet_nft_tip": "這是一個NFT紅包",
-    "plugin_red_packet_attached_message": "附加的訊息",
-    "plugin_red_packet_from": "寄送人：{{name}}",
-    "plugin_red_packet_description_claimed": "你已經認領了 {{amount}} {{symbol}}。",
-    "plugin_red_packet_description_expired": "這個紅包已過期。",
-    "plugin_red_packet_description_refunded": "這個紅包已經被退款了。",
-    "plugin_red_packet_description_refund": "你可以退款 {{balance}} {{symbol}}。",
-    "plugin_red_packet_description_empty": "這個紅包是空的。",
-    "plugin_red_packet_description_broken": "這個紅包壞了",
-    "plugin_red_packet_description_failover": "寄送人 {{name}} / {{shares}} 分享數 / {{total}} {{symbol}}",
-    "plugin_red_packet_amount_per_share": "每次分享總額",
-    "plugin_red_packet_send_symbol": "送出 {{symbol}}",
-    "plugin_red_packet_amount_total": "總額",
-    "plugin_red_packet_next": "繼續",
-    "plugin_red_packet_back": "返回",
-    "plugin_red_packet_token": "代幣",
-    "plugin_red_packet_message_label": "標題",
     "plugin_red_packet_create_with_token": "使用 {{symbol}} 建立紅包",
-    "plugin_red_packet_history_duration": "時間: {{startTime}} ~ {{endTime}} (UTC+8)",
-    "plugin_red_packet_history_total_amount": "總額: {{amount}} {{symbol}}",
-    "plugin_red_packet_history_total_claimed_amount": "總共: <span><strong>{{claimedAmount}}/{{amount}}</strong></span> {{symbol}}",
-    "plugin_red_packet_history_claimed": "已認領: <strong>{{claimedShares}}/{{shares}}</strong> 分享數",
-    "plugin_red_packet_history_split_mode": "分割模式: {{mode}}",
-    "plugin_red_packet_history_send": "送出",
-    "plugin_red_packet_nft_total_amount": "總額",
-    "plugin_red_packet_completed": "已完成",
-    "plugin_red_packet_expired": "已過期",
     "plugin_gitcoin_readme": "通過使用此服務，您還將向 <fund>Gitcoin grants development fund</fund> 捐款 5%",
     "plugin_gitcoin_select_a_token": "選擇一個代幣",
     "plugin_gitcoin_enter_an_amount": "輸入一個金額",
diff --git a/packages/mask/src/components/CompositionDialog/useSubmit.ts b/packages/mask/src/components/CompositionDialog/useSubmit.ts
index 632718d60c6e..c9ac56b06735 100644
--- a/packages/mask/src/components/CompositionDialog/useSubmit.ts
+++ b/packages/mask/src/components/CompositionDialog/useSubmit.ts
@@ -1,15 +1,18 @@
+import { ImageTemplateTypes, socialNetworkEncoder } from '@masknet/encryption'
+import { FileInfoMetadataReader } from '@masknet/plugin-file-service'
+import type { ProfileIdentifier } from '@masknet/shared-base'
+import type { Meta } from '@masknet/typed-message'
 import { useCallback } from 'react'
 import Services from '../../extension/service'
+import { ITO_MetadataReader } from '../../plugins/ITO/SNSAdaptor/helpers'
 import { RedPacketMetadataReader } from '../../plugins/RedPacket/SNSAdaptor/helpers'
-import { ImageTemplateTypes, socialNetworkEncoder } from '@masknet/encryption'
 import { activatedSocialNetworkUI, globalUIState } from '../../social-network'
+import { isFacebook } from '../../social-network-adaptor/facebook.com/base'
 import { isTwitter } from '../../social-network-adaptor/twitter.com/base'
-import { useI18N } from '../../utils'
+import { I18NFunction, useI18N } from '../../utils'
+import { useLastRecognizedIdentity } from '../DataSource/useActivatedUI'
 import { SteganographyTextPayload } from '../InjectedComponents/SteganographyTextPayload'
 import type { SubmitComposition } from './CompositionUI'
-import { useLastRecognizedIdentity } from '../DataSource/useActivatedUI'
-import { isFacebook } from '../../social-network-adaptor/facebook.com/base'
-import type { ProfileIdentifier } from '@masknet/shared-base'
 
 export function useSubmit(onClose: () => void, reason: 'timeline' | 'popup' | 'reply') {
     const { t } = useI18N()
@@ -28,32 +31,19 @@ export function useSubmit(onClose: () => void, reason: 'timeline' | 'popup' | 'r
                 activatedSocialNetworkUI.encryptionNetwork,
             )
             const encrypted = socialNetworkEncoder(activatedSocialNetworkUI.encryptionNetwork, _encrypted)
+            const decoratedText = decorateEncryptedText(encrypted, t, content.meta)
 
-            const redPacketPreText =
-                isTwitter(activatedSocialNetworkUI) || isFacebook(activatedSocialNetworkUI)
-                    ? t('additional_post_box__encrypted_post_pre_red_packet_twitter_official_account', {
-                          encrypted,
-                          account: isTwitter(activatedSocialNetworkUI) ? t('twitter_account') : t('facebook_account'),
-                      })
-                    : t('additional_post_box__encrypted_post_pre_red_packet', { encrypted })
-
-            // TODO: move into the plugin system
-            const redPacketMetadata = RedPacketMetadataReader(content.meta)
             if (encode === 'image') {
                 const defaultText = t('additional_post_box__steganography_post_pre', {
                     random: new Date().toLocaleString(),
                 })
-                if (redPacketMetadata.ok) {
-                    await pasteImage(redPacketPreText.replace(encrypted, '') ?? defaultText, encrypted, 'eth', reason)
+                if (decoratedText !== null) {
+                    await pasteImage(decoratedText.replace(encrypted, ''), encrypted, 'eth', reason)
                 } else {
                     await pasteImage(defaultText, encrypted, 'v2', reason)
                 }
             } else {
-                pasteTextEncode(
-                    (redPacketMetadata.ok ? redPacketPreText : null) ??
-                        t('additional_post_box__encrypted_post_pre', { encrypted }),
-                    reason,
-                )
+                pasteTextEncode(decoratedText ?? t('additional_post_box__encrypted_post_pre', { encrypted }), reason)
             }
             onClose()
         },
@@ -81,3 +71,34 @@ async function pasteImage(
         reason,
     })
 }
+
+// TODO: Provide API to plugin to post-process post content,
+// then we can move these -PreText's and meta readers into plugin's own context
+function decorateEncryptedText(encrypted: string, t: I18NFunction, meta?: Meta) {
+    const hasOfficialAccount = isTwitter(activatedSocialNetworkUI) || isFacebook(activatedSocialNetworkUI)
+    const officialAccount = isTwitter(activatedSocialNetworkUI) ? t('twitter_account') : t('facebook_account')
+
+    if (RedPacketMetadataReader(meta).ok) {
+        return hasOfficialAccount
+            ? t('additional_post_box__encrypted_post_pre_red_packet_twitter_official_account', {
+                  encrypted,
+                  account: officialAccount,
+              })
+            : t('additional_post_box__encrypted_post_pre_red_packet', { encrypted })
+    } else if (ITO_MetadataReader(meta).ok) {
+        return hasOfficialAccount
+            ? t('additional_post_box__encrypted_post_pre_ito_twitter_official_account', {
+                  encrypted,
+                  account: officialAccount,
+              })
+            : t('additional_post_box__encrypted_post_pre_ito', { encrypted })
+    } else if (FileInfoMetadataReader(meta).ok) {
+        return hasOfficialAccount
+            ? t('additional_post_box__encrypted_post_pre_file_service_twitter_official_account', {
+                  encrypted,
+                  account: officialAccount,
+              })
+            : t('additional_post_box__encrypted_post_pre_file_service', { encrypted })
+    }
+    return null
+}
diff --git a/packages/mask/src/plugins/Avatar/SNSAdaptor/NFTAvatar.tsx b/packages/mask/src/plugins/Avatar/SNSAdaptor/NFTAvatar.tsx
index c8fa3e40e34a..c9b9a5b13d30 100644
--- a/packages/mask/src/plugins/Avatar/SNSAdaptor/NFTAvatar.tsx
+++ b/packages/mask/src/plugins/Avatar/SNSAdaptor/NFTAvatar.tsx
@@ -16,7 +16,7 @@ import { useI18N } from '../../../utils'
 import { EthereumChainBoundary } from '../../../web3/UI/EthereumChainBoundary'
 import { AddNFT } from './AddNFT'
 import { NFTImage } from './NFTImage'
-import { useAccount, useWeb3State } from '@masknet/plugin-infra/web3'
+import { useAccount } from '@masknet/plugin-infra/web3'
 import { ReversedAddress } from '@masknet/shared'
 
 const useStyles = makeStyles()((theme) => ({
@@ -101,7 +101,6 @@ export function NFTAvatar(props: NFTAvatarProps) {
     const [open_, setOpen_] = useState(false)
     const [collectibles_, setCollectibles_] = useState<ERC721TokenDetailed[]>([])
     const { t } = useI18N()
-    const { Utils } = useWeb3State()
     const { data: collectibles, error, retry, state } = useCollectibles(account, ChainId.Mainnet)
 
     const onClick = useCallback(async () => {
diff --git a/packages/mask/src/plugins/Collectible/SNSAdaptor/MakeOfferDialog.tsx b/packages/mask/src/plugins/Collectible/SNSAdaptor/MakeOfferDialog.tsx
index 3fa81e9a5a0e..6dd545540db2 100644
--- a/packages/mask/src/plugins/Collectible/SNSAdaptor/MakeOfferDialog.tsx
+++ b/packages/mask/src/plugins/Collectible/SNSAdaptor/MakeOfferDialog.tsx
@@ -38,6 +38,7 @@ import type { Coin } from '../../Trader/types'
 import { SelectTokenListPanel } from './SelectTokenListPanel'
 import { isWyvernSchemaName } from '../utils'
 import { EthereumChainBoundary } from '../../../web3/UI/EthereumChainBoundary'
+import { activatedSocialNetworkUI } from '../../../social-network'
 
 const useStyles = makeStyles()((theme) => {
     return {
@@ -118,7 +119,8 @@ export function MakeOfferDialog(props: MakeOfferDialogProps) {
             expirationTime: !isAuction ? getUnixTime(expirationDateTime) : undefined,
             paymentTokenAddress: token.value.type === EthereumTokenType.Native ? undefined : token.value.address,
         })
-    }, [asset?.value, token, account, amount, expirationDateTime, isAuction])
+        activatedSocialNetworkUI.utils.share?.(t('promote_collectible'))
+    }, [asset?.value, token, account, amount, expirationDateTime, isAuction, t])
 
     const { setDialog: openSwapDialog } = useRemoteControlledDialog(PluginTraderMessages.swapDialogUpdated)
 
diff --git a/packages/mask/src/plugins/Gitcoin/SNSAdaptor/DonateDialog.tsx b/packages/mask/src/plugins/Gitcoin/SNSAdaptor/DonateDialog.tsx
index eb98758360ab..ee480fa8ef58 100644
--- a/packages/mask/src/plugins/Gitcoin/SNSAdaptor/DonateDialog.tsx
+++ b/packages/mask/src/plugins/Gitcoin/SNSAdaptor/DonateDialog.tsx
@@ -14,16 +14,16 @@ import {
 } from '@masknet/web3-shared-evm'
 import { DialogContent, Link, Typography } from '@mui/material'
 import { useCallback, useMemo, useState } from 'react'
-import { Trans } from 'react-i18next'
 import ActionButton from '../../../extension/options-page/DashboardComponents/ActionButton'
 import { activatedSocialNetworkUI } from '../../../social-network'
 import { isFacebook } from '../../../social-network-adaptor/facebook.com/base'
 import { isTwitter } from '../../../social-network-adaptor/twitter.com/base'
-import { useI18N } from '../../../utils'
+import { useI18N as useBaseI18N } from '../../../utils'
 import { EthereumERC20TokenApprovedBoundary } from '../../../web3/UI/EthereumERC20TokenApprovedBoundary'
 import { EthereumWalletConnectedBoundary } from '../../../web3/UI/EthereumWalletConnectedBoundary'
 import { TokenAmountPanel } from '../../../web3/UI/TokenAmountPanel'
 import { useDonateCallback } from '../hooks/useDonateCallback'
+import { Translate, useI18N } from '../locales'
 import { PluginGitcoinMessages } from '../messages'
 
 const useStyles = makeStyles()((theme) => ({
@@ -52,7 +52,8 @@ const useStyles = makeStyles()((theme) => ({
 export interface DonateDialogProps extends withClasses<never> {}
 
 export function DonateDialog(props: DonateDialogProps) {
-    const { t } = useI18N()
+    const { t: tr } = useBaseI18N()
+    const t = useI18N()
     const classes = useStylesExtends(useStyles(), props)
     const [title, setTitle] = useState('')
     const [address, setAddress] = useState('')
@@ -112,10 +113,11 @@ export function DonateDialog(props: DonateDialogProps) {
                   `I just donated ${title} with ${formatBalance(amount, token.decimals)} ${cashTag}${token.symbol}. ${
                       isTwitter(activatedSocialNetworkUI) || isFacebook(activatedSocialNetworkUI)
                           ? `Follow @${
-                                isTwitter(activatedSocialNetworkUI) ? t('twitter_account') : t('facebook_account')
+                                isTwitter(activatedSocialNetworkUI) ? tr('twitter_account') : tr('facebook_account')
                             } (mask.io) to donate Gitcoin grants.`
                           : ''
                   }`,
+                  t.promote(),
                   '#mask_io',
                   postLink,
               ].join('\n')
@@ -126,17 +128,17 @@ export function DonateDialog(props: DonateDialogProps) {
                 activatedSocialNetworkUI.utils.share?.(shareText)
             },
         })
-    }, [openShareTxDialog, token, donateCallback])
+    }, [openShareTxDialog, token, donateCallback, tr, t])
 
     // #region submit button
     const validationMessage = useMemo(() => {
-        if (!token) return t('plugin_gitcoin_select_a_token')
-        if (!account) return t('plugin_wallet_connect_a_wallet')
-        if (!address) return t('plugin_gitcoin_grant_not_available')
-        if (!amount || amount.isZero()) return t('plugin_gitcoin_enter_an_amount')
+        if (!token) return t.select_a_token()
+        if (!account) return tr('plugin_wallet_connect_a_wallet')
+        if (!address) return t.grant_not_available()
+        if (!amount || amount.isZero()) return t.enter_an_amount()
         if (amount.isGreaterThan(tokenBalance.value ?? '0'))
-            return t('plugin_gitcoin_insufficient_balance', {
-                symbol: token.symbol,
+            return t.insufficient_balance({
+                symbol: token.symbol!,
             })
         return ''
     }, [account, address, amount.toFixed(), chainId, token, tokenBalance.value ?? '0'])
@@ -164,16 +166,9 @@ export function DonateDialog(props: DonateDialogProps) {
                         />
                     </form>
                     <Typography className={classes.tip} variant="body1">
-                        <Trans
-                            i18nKey="plugin_gitcoin_readme"
+                        <Translate.gitcoin_readme
                             components={{
-                                fund: (
-                                    <Link
-                                        target="_blank"
-                                        rel="noopener noreferrer"
-                                        href={t('plugin_gitcoin_readme_fund_link')}
-                                    />
-                                ),
+                                fund: <Link target="_blank" rel="noopener noreferrer" href={t.readme_fund_link()} />,
                             }}
                         />
                     </Typography>
@@ -190,7 +185,7 @@ export function DonateDialog(props: DonateDialogProps) {
                                 disabled={!!validationMessage || loading}
                                 onClick={donate}
                                 variant="contained">
-                                {validationMessage || t('plugin_gitcoin_donate')}
+                                {validationMessage || t.donate()}
                             </ActionButton>
                         </EthereumERC20TokenApprovedBoundary>
                     </EthereumWalletConnectedBoundary>
diff --git a/packages/mask/src/plugins/Gitcoin/SNSAdaptor/PreviewCard.tsx b/packages/mask/src/plugins/Gitcoin/SNSAdaptor/PreviewCard.tsx
index 154c34876ab4..142ab0b521c5 100644
--- a/packages/mask/src/plugins/Gitcoin/SNSAdaptor/PreviewCard.tsx
+++ b/packages/mask/src/plugins/Gitcoin/SNSAdaptor/PreviewCard.tsx
@@ -3,7 +3,8 @@ import { Box, Card, Typography, Button, Avatar, CircularProgress, useTheme } fro
 import { makeStyles } from '@masknet/theme'
 import QueryBuilderIcon from '@mui/icons-material/QueryBuilder'
 import VerifiedUserIcon from '@mui/icons-material/VerifiedUser'
-import { useI18N } from '../../../utils'
+import { useI18N as useBaseI18N } from '../../../utils'
+import { useI18N } from '../locales'
 import { useRemoteControlledDialog } from '@masknet/shared-base-ui'
 import { useGrant } from '../hooks/useGrant'
 import { PluginGitcoinMessages } from '../messages'
@@ -87,7 +88,8 @@ interface PreviewCardProps {
 }
 
 export function PreviewCard(props: PreviewCardProps) {
-    const { t } = useI18N()
+    const { t: tr } = useBaseI18N()
+    const t = useI18N()
     const { classes } = useStyles()
     const { value: grant, error, loading, retry } = useGrant(props.id)
     const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
@@ -117,7 +119,7 @@ export function PreviewCard(props: PreviewCardProps) {
     if (error)
         return (
             <Box display="flex" flexDirection="column" alignItems="center" sx={{ padding: 1.5 }}>
-                <Typography color="textPrimary">{t('go_wrong')}</Typography>
+                <Typography color="textPrimary">{tr('go_wrong')}</Typography>
                 <Button
                     sx={{
                         backgroundColor: theme.palette.maskColor.dark,
@@ -128,7 +130,7 @@ export function PreviewCard(props: PreviewCardProps) {
                         color: 'white',
                     }}
                     onClick={retry}>
-                    {t('retry')}
+                    {tr('retry')}
                 </Button>
             </Box>
         )
@@ -155,12 +157,12 @@ export function PreviewCard(props: PreviewCardProps) {
                     <div className={classes.meta}>
                         <QueryBuilderIcon fontSize="small" color="disabled" />
                         <Typography variant="body2" color="textSecondary">
-                            {t('plugin_gitcoin_last_updated')} {grant.last_update_natural}
+                            {t.last_updated()} {grant.last_update_natural}
                         </Typography>
                     </div>
                     <div className={classes.meta}>
                         <Typography variant="body2" color="textSecondary">
-                            {t('plugin_gitcoin_by')}
+                            {t.by()}
                         </Typography>
                         <Avatar
                             alt={grant.admin_profile.handle}
@@ -181,7 +183,7 @@ export function PreviewCard(props: PreviewCardProps) {
                         target="_blank"
                         rel="noopener noreferrer"
                         href={urlcat('https://gitcoin.co', grant.url)}>
-                        {t('plugin_gitcoin_view_on')}
+                        {t.view_on()}
                     </Button>
                 </Box>
                 <Box sx={{ flex: 1, padding: 1.5 }}>
@@ -199,7 +201,7 @@ export function PreviewCard(props: PreviewCardProps) {
                                 color: 'white',
                             }}
                             onClick={onDonate}>
-                            {t('plugin_gitcoin_donate')}
+                            {t.donate()}
                         </Button>
                     </EthereumChainBoundary>
                 </Box>
diff --git a/packages/mask/src/plugins/Gitcoin/SNSAdaptor/index.tsx b/packages/mask/src/plugins/Gitcoin/SNSAdaptor/index.tsx
index 956f016b34d3..1ffb8a4109eb 100644
--- a/packages/mask/src/plugins/Gitcoin/SNSAdaptor/index.tsx
+++ b/packages/mask/src/plugins/Gitcoin/SNSAdaptor/index.tsx
@@ -1,18 +1,15 @@
-import { useMemo } from 'react'
-import { ChainId } from '@masknet/web3-shared-evm'
-import { usePostInfoDetails, Plugin, usePluginWrapper } from '@masknet/plugin-infra/content-script'
-import { NetworkPluginID, useChainId } from '@masknet/plugin-infra/web3'
-import { extractTextFromTypedMessage } from '@masknet/typed-message'
-import { parseURL } from '@masknet/shared-base'
 import { GitcoinIcon } from '@masknet/icons'
-import { PreviewCard } from './PreviewCard'
+import { Plugin, PluginId, usePluginWrapper, usePostInfoDetails } from '@masknet/plugin-infra/content-script'
+import { parseURL } from '@masknet/shared-base'
+import { extractTextFromTypedMessage } from '@masknet/typed-message'
+import { useMemo } from 'react'
 import { Trans } from 'react-i18next'
 import { base } from '../base'
-import { PLUGIN_NAME, PLUGIN_META_KEY } from '../constants'
+import { PLUGIN_META_KEY, PLUGIN_NAME } from '../constants'
 import { DonateDialog } from './DonateDialog'
+import { PreviewCard } from './PreviewCard'
 
 const isGitcoin = (x: string): boolean => /^https:\/\/gitcoin.co\/grants\/\d+/.test(x)
-const isGitCoinSupported = (chainId: ChainId) => [ChainId.Mainnet, ChainId.Matic].includes(chainId)
 
 const sns: Plugin.SNSAdaptor.Definition = {
     ...base,
@@ -41,8 +38,8 @@ const sns: Plugin.SNSAdaptor.Definition = {
         {
             ApplicationEntryID: base.ID,
             category: 'dapp',
-            description: <Trans i18nKey="plugin_gitcoin_description" />,
-            name: <Trans i18nKey="plugin_gitcoin_name" />,
+            description: <Trans ns={PluginId.Gitcoin} i18nKey="description" />,
+            name: <Trans ns={PluginId.Gitcoin} i18nKey="name" />,
             icon: <GitcoinIcon />,
             marketListSortingPriority: 9,
             tutorialLink: 'https://realmasknetwork.notion.site/98ed83784ed4446a8a13fa685c7bddfb',
@@ -52,7 +49,6 @@ const sns: Plugin.SNSAdaptor.Definition = {
 
 function Renderer(props: React.PropsWithChildren<{ url: string }>) {
     const [id = ''] = props.url.match(/\d+/) ?? []
-    const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
     usePluginWrapper(true)
     return <PreviewCard id={id} />
 }
diff --git a/packages/mask/src/plugins/Gitcoin/base.ts b/packages/mask/src/plugins/Gitcoin/base.ts
index 2ba903193d15..399adeb050cb 100644
--- a/packages/mask/src/plugins/Gitcoin/base.ts
+++ b/packages/mask/src/plugins/Gitcoin/base.ts
@@ -2,6 +2,7 @@ import type { Plugin } from '@masknet/plugin-infra'
 import { NetworkPluginID } from '@masknet/plugin-infra/web3'
 import { ChainId } from '@masknet/web3-shared-evm'
 import { PLUGIN_ID, PLUGIN_NAME, PLUGIN_DESCRIPTION } from './constants'
+import { languages } from './locales/languages'
 
 export const base: Plugin.Shared.Definition = {
     ID: PLUGIN_ID,
@@ -21,4 +22,5 @@ export const base: Plugin.Shared.Definition = {
         },
     },
     contribution: { postContent: new Set([/https:\/\/gitcoin.co\/grants\/\d+/]) },
+    i18n: languages,
 }
diff --git a/packages/mask/src/plugins/Gitcoin/locales/en-US.json b/packages/mask/src/plugins/Gitcoin/locales/en-US.json
new file mode 100644
index 000000000000..96bdf7b52625
--- /dev/null
+++ b/packages/mask/src/plugins/Gitcoin/locales/en-US.json
@@ -0,0 +1,15 @@
+{
+    "name": "Gitcoin",
+    "description": "Display specific information of Gitcoin projects, donate to a project directly on social media.",
+    "promote": "Share or browse Gitcoin projects you have donated or interested in.",
+    "select_a_token": "Select a token",
+    "grant_not_available": "Grant not available",
+    "enter_an_amount": "Enter an amount",
+    "insufficient_balance": "Insufficient {{symbol}} balance",
+    "gitcoin_readme": "By using this service, you will also be contributing 5% of your contribution to the <fund>Gitcoin grants development fund</fund>.",
+    "donate": "Donate",
+    "last_updated": "Last update:",
+    "by": "By",
+    "view_on": "View on Gitcoin",
+    "readme_fund_link": "https://gitcoin.co/grants/86/gitcoin-sustainability-fund"
+}
diff --git a/packages/mask/src/plugins/Gitcoin/locales/index.ts b/packages/mask/src/plugins/Gitcoin/locales/index.ts
new file mode 100644
index 000000000000..d6ead60252e4
--- /dev/null
+++ b/packages/mask/src/plugins/Gitcoin/locales/index.ts
@@ -0,0 +1,6 @@
+// This file is auto generated. DO NOT EDIT
+// Run `npx gulp sync-languages` to regenerate.
+// Default fallback language in a family of languages are chosen by the alphabet order
+// To overwrite this, please overwrite packages/scripts/src/locale-kit-next/index.ts
+
+export * from './i18n_generated'
diff --git a/packages/mask/src/plugins/Gitcoin/locales/ja-JP.json b/packages/mask/src/plugins/Gitcoin/locales/ja-JP.json
new file mode 100644
index 000000000000..0967ef424bce
--- /dev/null
+++ b/packages/mask/src/plugins/Gitcoin/locales/ja-JP.json
@@ -0,0 +1 @@
+{}
diff --git a/packages/mask/src/plugins/Gitcoin/locales/ko-KR.json b/packages/mask/src/plugins/Gitcoin/locales/ko-KR.json
new file mode 100644
index 000000000000..0967ef424bce
--- /dev/null
+++ b/packages/mask/src/plugins/Gitcoin/locales/ko-KR.json
@@ -0,0 +1 @@
+{}
diff --git a/packages/mask/src/plugins/Gitcoin/locales/languages.ts b/packages/mask/src/plugins/Gitcoin/locales/languages.ts
new file mode 100644
index 000000000000..9b496c047c8a
--- /dev/null
+++ b/packages/mask/src/plugins/Gitcoin/locales/languages.ts
@@ -0,0 +1,34 @@
+// This file is auto generated. DO NOT EDIT
+// Run `npx gulp sync-languages` to regenerate.
+// Default fallback language in a family of languages are chosen by the alphabet order
+// To overwrite this, please overwrite packages/scripts/src/locale-kit-next/index.ts
+import en_US from './en-US.json'
+import ja_JP from './ja-JP.json'
+import ko_KR from './ko-KR.json'
+import qya_AA from './qya-AA.json'
+import zh_CN from './zh-CN.json'
+import zh_TW from './zh-TW.json'
+export const languages = {
+    en: en_US,
+    ja: ja_JP,
+    ko: ko_KR,
+    qy: qya_AA,
+    'zh-CN': zh_CN,
+    zh: zh_TW,
+}
+// @ts-ignore
+if (import.meta.webpackHot) {
+    // @ts-ignore
+    import.meta.webpackHot.accept(
+        ['./en-US.json', './ja-JP.json', './ko-KR.json', './qya-AA.json', './zh-CN.json', './zh-TW.json'],
+        () =>
+            globalThis.dispatchEvent?.(
+                new CustomEvent('MASK_I18N_HMR', {
+                    detail: [
+                        'com.maskbook.gitcoin',
+                        { en: en_US, ja: ja_JP, ko: ko_KR, qy: qya_AA, 'zh-CN': zh_CN, zh: zh_TW },
+                    ],
+                }),
+            ),
+    )
+}
diff --git a/packages/mask/src/plugins/Gitcoin/locales/qya-AA.json b/packages/mask/src/plugins/Gitcoin/locales/qya-AA.json
new file mode 100644
index 000000000000..0967ef424bce
--- /dev/null
+++ b/packages/mask/src/plugins/Gitcoin/locales/qya-AA.json
@@ -0,0 +1 @@
+{}
diff --git a/packages/mask/src/plugins/Gitcoin/locales/zh-CN.json b/packages/mask/src/plugins/Gitcoin/locales/zh-CN.json
new file mode 100644
index 000000000000..0967ef424bce
--- /dev/null
+++ b/packages/mask/src/plugins/Gitcoin/locales/zh-CN.json
@@ -0,0 +1 @@
+{}
diff --git a/packages/mask/src/plugins/Gitcoin/locales/zh-TW.json b/packages/mask/src/plugins/Gitcoin/locales/zh-TW.json
new file mode 100644
index 000000000000..0967ef424bce
--- /dev/null
+++ b/packages/mask/src/plugins/Gitcoin/locales/zh-TW.json
@@ -0,0 +1 @@
+{}
diff --git a/packages/mask/src/plugins/ITO/SNSAdaptor/ITO.tsx b/packages/mask/src/plugins/ITO/SNSAdaptor/ITO.tsx
index 7b761a3bb0fb..325506b44221 100644
--- a/packages/mask/src/plugins/ITO/SNSAdaptor/ITO.tsx
+++ b/packages/mask/src/plugins/ITO/SNSAdaptor/ITO.tsx
@@ -5,12 +5,9 @@ import {
     FungibleTokenDetailed,
     getChainDetailed,
     isSameAddress,
-    currySameAddress,
     resolveLinkOnExplorer,
-    TransactionStateType,
     useAccount,
     useChainId,
-    useChainIdValid,
     useTokenConstants,
     isNativeTokenAddress,
 } from '@masknet/web3-shared-evm'
@@ -246,8 +243,7 @@ export function ITO(props: ITO_Props) {
     const account = useAccount()
     const postLink = usePostLink()
     const chainId = useChainId()
-    const chainIdValid = useChainIdValid()
-    const [destructState, destructCallback, resetDestructCallback] = useDestructCallback(props.payload.contract_address)
+    const [, destructCallback] = useDestructCallback(props.payload.contract_address)
     const [openClaimDialog, setOpenClaimDialog] = useState(false)
     const [claimDialogStatus, setClaimDialogStatus] = useState(SwapStatus.Remind)
 
@@ -414,23 +410,8 @@ export function ITO(props: ITO_Props) {
         return () => clearTimeout(timer)
     }, [endTime, listOfStatus])
 
-    useEffect(() => {
-        if (destructState.type === TransactionStateType.UNKNOWN || !canWithdraw) return
-        let summary = t('plugin_ito_withdraw')
-        if (!noRemain) {
-            summary += ' ' + formatBalance(total_remaining, token.decimals) + ' ' + token.symbol
-        }
-        availability?.exchange_addrs.forEach((addr, i) => {
-            const token = exchange_tokens.find(currySameAddress(addr))
-            const comma = noRemain && i === 0 ? ' ' : ', '
-            if (token) {
-                summary += comma + formatBalance(availability?.exchanged_tokens[i], token.decimals) + ' ' + token.symbol
-            }
-        })
-    }, [destructState, canWithdraw])
-
     const onWithdraw = useCallback(async () => {
-        destructCallback(payload.pid)
+        await destructCallback(payload.pid)
     }, [destructCallback, payload.pid])
     // #endregion
 
diff --git a/packages/mask/src/plugins/ITO/SNSAdaptor/NftAirdropCard.tsx b/packages/mask/src/plugins/ITO/SNSAdaptor/NftAirdropCard.tsx
index 7190867404a9..f4eaba6d32be 100644
--- a/packages/mask/src/plugins/ITO/SNSAdaptor/NftAirdropCard.tsx
+++ b/packages/mask/src/plugins/ITO/SNSAdaptor/NftAirdropCard.tsx
@@ -1,17 +1,11 @@
 import formatDateTime from 'date-fns/format'
-import {
-    ChainId,
-    TransactionStateType,
-    useAccount,
-    resolveTransactionLinkOnExplorer,
-    useChainId,
-} from '@masknet/web3-shared-evm'
+import { ChainId, useAccount, resolveTransactionLinkOnExplorer, useChainId } from '@masknet/web3-shared-evm'
 import { EthereumWalletConnectedBoundary } from '../../../web3/UI/EthereumWalletConnectedBoundary'
 import { Box, Typography, Button, TextField, CircularProgress, Link } from '@mui/material'
 import { useSpaceStationClaimableTokenCountCallback } from './hooks/useSpaceStationClaimableTokenCountCallback'
 import { useSpaceStationContractClaimCallback } from './hooks/useSpaceStationContractClaimCallback'
 import { useI18N } from '../../../utils'
-import { useState, useEffect } from 'react'
+import { useState, useEffect, useCallback } from 'react'
 import { makeStyles, useCustomSnackbar, OptionsObject } from '@masknet/theme'
 import OpenInNewIcon from '@mui/icons-material/OpenInNew'
 import CloseIcon from '@mui/icons-material/Close'
@@ -287,8 +281,9 @@ function ClaimItem(props: ClaimItemProps) {
             horizontal: 'center',
         },
     }
-    useEffect(() => {
-        if (claimState.type === TransactionStateType.CONFIRMED && claimState.no === 0) {
+    const claim = useCallback(async () => {
+        const hash = await claimCallback()
+        if (typeof hash === 'string') {
             showSnackbar(
                 <div className={classes.snackbarContent}>
                     <div className={classes.snackbarTipContent}>
@@ -299,10 +294,7 @@ function ClaimItem(props: ClaimItemProps) {
                                 className={classes.whiteText}
                                 target="_blank"
                                 rel="noopener noreferrer"
-                                href={resolveTransactionLinkOnExplorer(
-                                    ChainId.Mumbai,
-                                    claimState.receipt.transactionHash,
-                                )}>
+                                href={resolveTransactionLinkOnExplorer(ChainId.Mumbai, hash)}>
                                 <OpenInNewIcon className={classes.snackbarIcon} />
                             </Link>
                         </Typography>
@@ -316,7 +308,7 @@ function ClaimItem(props: ClaimItemProps) {
             )
 
             retry()
-        } else if (claimState.type === TransactionStateType.FAILED) {
+        } else {
             showSnackbar(
                 <div className={classes.snackbarContent}>
                     <div className={classes.snackbarTipContent}>
@@ -331,7 +323,7 @@ function ClaimItem(props: ClaimItemProps) {
                 } as OptionsObject,
             )
         }
-    }, [claimState])
+    }, [showSnackbar])
 
     const unClaimable =
         now < campaignInfo.startTime * 1000 ||
@@ -359,17 +351,10 @@ function ClaimItem(props: ClaimItemProps) {
                             unlockMetaMask: classNames(classes.actionButton, classes.connectWallet),
                         }}>
                         <ActionButton
-                            disabled={
-                                claimState.type === TransactionStateType.WAIT_FOR_CONFIRMING ||
-                                claimState.type === TransactionStateType.HASH ||
-                                unClaimable
-                            }
-                            loading={
-                                claimState.type === TransactionStateType.WAIT_FOR_CONFIRMING ||
-                                claimState.type === TransactionStateType.HASH
-                            }
+                            disabled={claimState.loading || unClaimable}
+                            loading={claimState.loading || unClaimable}
                             classes={{ disabled: classes.disabledButton }}
-                            onClick={claimCallback}
+                            onClick={claim}
                             className={classes.actionButton}>
                             <span>
                                 {claimed
diff --git a/packages/mask/src/plugins/ITO/SNSAdaptor/PoolInList.tsx b/packages/mask/src/plugins/ITO/SNSAdaptor/PoolInList.tsx
index e044f04798a5..67441435125f 100644
--- a/packages/mask/src/plugins/ITO/SNSAdaptor/PoolInList.tsx
+++ b/packages/mask/src/plugins/ITO/SNSAdaptor/PoolInList.tsx
@@ -5,7 +5,6 @@ import {
     FungibleTokenInitial,
     getChainDetailed,
     isSameAddress,
-    TransactionStateType,
     useAccount,
     useFungibleTokenDetailed,
     useFungibleTokensDetailed,
@@ -35,10 +34,10 @@ import { useAvailabilityComputed } from './hooks/useAvailabilityComputed'
 import { usePoolTradeInfo } from './hooks/usePoolTradeInfo'
 import { ITO_Status, JSON_PayloadFromChain, JSON_PayloadInMask, PoolFromNetwork } from '../types'
 import { useDestructCallback } from './hooks/useDestructCallback'
-import { useTransactionDialog } from '../../../web3/hooks/useTransactionDialog'
 import { omit } from 'lodash-unified'
 import { useSubscription } from 'use-subscription'
 import { PersistentStorages } from '../../../../shared'
+import { useCallback } from 'react'
 
 const useStyles = makeStyles()((theme) => {
     const smallQuery = `@media (max-width: ${theme.breakpoints.values.sm}px)`
@@ -175,11 +174,14 @@ export function PoolInList(props: PoolInListProps) {
     // #endregion
 
     // #region withdraw
-    const [destructState, destructCallback, resetDestructCallback] = useDestructCallback(pool.contract_address)
-    useTransactionDialog(null, destructState, TransactionStateType.CONFIRMED, () => {
-        onRetry()
-        resetDestructCallback()
-    })
+    const [{ loading: destructing }, destructCallback] = useDestructCallback(pool.contract_address)
+    const destruct = useCallback(
+        async (pid: string) => {
+            await destructCallback(pid)
+            onRetry()
+        },
+        [destructCallback, onRetry],
+    )
     // #endregion
 
     const account = useAccount()
@@ -202,7 +204,13 @@ export function PoolInList(props: PoolInListProps) {
         return (
             <>
                 {loadingTradeInfo || loadingAvailability ? null : canWithdraw ? (
-                    <ActionButton fullWidth size="small" variant="contained" onClick={() => destructCallback(pool.pid)}>
+                    <ActionButton
+                        loading={destructing}
+                        disabled={destructing}
+                        fullWidth
+                        size="small"
+                        variant="contained"
+                        onClick={() => destruct(pool.pid)}>
                         {t('plugin_ito_withdraw')}
                     </ActionButton>
                 ) : canSend ? (
diff --git a/packages/mask/src/plugins/ITO/SNSAdaptor/hooks/useDestructCallback.ts b/packages/mask/src/plugins/ITO/SNSAdaptor/hooks/useDestructCallback.ts
index 2e736befd4e6..2176cfce5699 100644
--- a/packages/mask/src/plugins/ITO/SNSAdaptor/hooks/useDestructCallback.ts
+++ b/packages/mask/src/plugins/ITO/SNSAdaptor/hooks/useDestructCallback.ts
@@ -1,43 +1,22 @@
-import { useCallback } from 'react'
-import type { TransactionReceipt } from 'web3-core'
 import type { NonPayableTx } from '@masknet/web3-contracts/types/types'
-import { TransactionEventType, TransactionStateType, useAccount, useTransactionState } from '@masknet/web3-shared-evm'
+import { TransactionEventType, useAccount } from '@masknet/web3-shared-evm'
+import { useAsyncFn } from 'react-use'
 import { useITO_Contract } from './useITO_Contract'
 
 export function useDestructCallback(ito_address: string) {
     const account = useAccount()
     const { contract: ITO_Contract } = useITO_Contract(ito_address)
-    const [destructState, setDestructState] = useTransactionState()
 
-    const destructCallback = useCallback(
+    return useAsyncFn(
         async (id: string) => {
-            if (!ITO_Contract || !id) {
-                setDestructState({
-                    type: TransactionStateType.UNKNOWN,
-                })
-                return
-            }
-
-            // start waiting for provider to confirm tx
-            setDestructState({
-                type: TransactionStateType.WAIT_FOR_CONFIRMING,
-            })
+            if (!ITO_Contract || !id) return
 
             // estimate gas and compose transaction
             const config = {
                 from: account,
-                gas: await ITO_Contract.methods
-                    .destruct(id)
-                    .estimateGas({
-                        from: account,
-                    })
-                    .catch((error: Error) => {
-                        setDestructState({
-                            type: TransactionStateType.FAILED,
-                            error,
-                        })
-                        throw error
-                    }),
+                gas: await ITO_Contract.methods.destruct(id).estimateGas({
+                    from: account,
+                }),
             }
 
             // send transaction and wait for hash
@@ -45,39 +24,14 @@ export function useDestructCallback(ito_address: string) {
                 ITO_Contract.methods
                     .destruct(id)
                     .send(config as NonPayableTx)
-                    .on(TransactionEventType.RECEIPT, (receipt: TransactionReceipt) => {
-                        setDestructState({
-                            type: TransactionStateType.CONFIRMED,
-                            no: 0,
-                            receipt,
-                        })
-                        resolve(receipt.transactionHash)
-                    })
-                    .on(TransactionEventType.CONFIRMATION, (no: number, receipt: TransactionReceipt) => {
-                        setDestructState({
-                            type: TransactionStateType.CONFIRMED,
-                            no,
-                            receipt,
-                        })
+                    .on(TransactionEventType.CONFIRMATION, (no, receipt) => {
                         resolve(receipt.transactionHash)
                     })
                     .on(TransactionEventType.ERROR, (error: Error) => {
-                        setDestructState({
-                            type: TransactionStateType.FAILED,
-                            error,
-                        })
                         reject(error)
                     })
             })
         },
         [ITO_Contract],
     )
-
-    const resetCallback = useCallback(() => {
-        setDestructState({
-            type: TransactionStateType.UNKNOWN,
-        })
-    }, [])
-
-    return [destructState, destructCallback, resetCallback] as const
 }
diff --git a/packages/mask/src/plugins/ITO/SNSAdaptor/hooks/useSpaceStationContractClaimCallback.ts b/packages/mask/src/plugins/ITO/SNSAdaptor/hooks/useSpaceStationContractClaimCallback.ts
index 3ceca469f049..ab72cf70ea35 100644
--- a/packages/mask/src/plugins/ITO/SNSAdaptor/hooks/useSpaceStationContractClaimCallback.ts
+++ b/packages/mask/src/plugins/ITO/SNSAdaptor/hooks/useSpaceStationContractClaimCallback.ts
@@ -1,49 +1,28 @@
-import { useSpaceStationContract } from './useSpaceStationContract'
-import {
-    useAccount,
-    useSpaceStationGalaxyConstants,
-    useTransactionState,
-    TransactionStateType,
-    TransactionEventType,
-} from '@masknet/web3-shared-evm'
-import { useCallback } from 'react'
-import type { CampaignInfo } from '../../types'
 import type { SpaceStationGalaxy } from '@masknet/web3-contracts/types/SpaceStationGalaxy'
 import type { NonPayableTx } from '@masknet/web3-contracts/types/types'
-import { getAccountClaimSignature, mutationParticipate } from '../../Worker/apis/spaceStationGalaxy'
+import { TransactionEventType, useAccount, useSpaceStationGalaxyConstants } from '@masknet/web3-shared-evm'
+import { useAsyncFn } from 'react-use'
 import Services from '../../../../extension/service'
+import type { CampaignInfo } from '../../types'
+import { getAccountClaimSignature, mutationParticipate } from '../../Worker/apis/spaceStationGalaxy'
+import { useSpaceStationContract } from './useSpaceStationContract'
 
 export function useSpaceStationContractClaimCallback(campaignInfo: CampaignInfo) {
     const account = useAccount()
     const spaceStationContract = useSpaceStationContract()
     const { CONTRACT_ADDRESS } = useSpaceStationGalaxyConstants()
-    const [claimState, setClaimState] = useTransactionState()
 
-    const claimCallback = useCallback(async () => {
+    return useAsyncFn(async () => {
         if (!CONTRACT_ADDRESS || !spaceStationContract || !campaignInfo) {
-            setClaimState({ type: TransactionStateType.UNKNOWN })
             return
         }
 
-        // start waiting for provider to confirm tx
-        setClaimState({
-            type: TransactionStateType.WAIT_FOR_CONFIRMING,
-        })
-
-        let useSignature = ''
-        try {
-            useSignature = await Services.Ethereum.personalSign(
-                `${campaignInfo.name}
+        const useSignature = await Services.Ethereum.personalSign(
+            `${campaignInfo.name}
 
 ${campaignInfo.description}`,
-                account,
-            )
-        } catch (error) {
-            setClaimState({
-                type: TransactionStateType.FAILED,
-                error: new Error('Not allowed to claim.'),
-            })
-        }
+            account,
+        )
 
         const { allow, signature, verifyIDs, nftCoreAddress, powahs } = await getAccountClaimSignature(
             useSignature,
@@ -53,10 +32,7 @@ ${campaignInfo.description}`,
         )
 
         if (!allow) {
-            setClaimState({
-                type: TransactionStateType.FAILED,
-                error: new Error('Not allowed to claim.'),
-            })
+            throw new Error('Not allowed to claim.')
         }
         const params = [campaignInfo.id, nftCoreAddress, verifyIDs[0], powahs[0], signature] as Parameters<
             SpaceStationGalaxy['methods']['claim']
@@ -64,15 +40,9 @@ ${campaignInfo.description}`,
         // estimate gas and compose transaction
         const config = {
             from: account,
-            gas: await spaceStationContract.methods
-                .claim(...params)
-                .estimateGas({ from: account })
-                .catch((error) => {
-                    setClaimState({ type: TransactionStateType.FAILED, error })
-                    throw error
-                }),
+            gas: await spaceStationContract.methods.claim(...params).estimateGas({ from: account }),
         }
-        return new Promise<void>(async (resolve, reject) => {
+        return new Promise<string>(async (resolve, reject) => {
             spaceStationContract.methods
                 .claim(...params)
                 .send(config as NonPayableTx)
@@ -87,39 +57,15 @@ ${campaignInfo.description}`,
                     )
 
                     if (!participated) {
-                        setClaimState({
-                            type: TransactionStateType.FAILED,
-                            error: new Error('Failed to claim'),
-                        })
+                        throw new Error('Failed to claim')
                     }
                 })
-                .on(TransactionEventType.RECEIPT, (receipt) => {
-                    setClaimState({
-                        type: TransactionStateType.CONFIRMED,
-                        no: 0,
-                        receipt,
-                    })
-                    resolve()
-                })
                 .on(TransactionEventType.CONFIRMATION, (no, receipt) => {
-                    setClaimState({
-                        type: TransactionStateType.CONFIRMED,
-                        no,
-                        receipt,
-                    })
-                    resolve()
+                    resolve(receipt.transactionHash)
                 })
                 .on(TransactionEventType.ERROR, (error) => {
-                    setClaimState({
-                        type: TransactionStateType.FAILED,
-                        error,
-                    })
                     reject(error)
                 })
         })
     }, [account, campaignInfo, CONTRACT_ADDRESS, spaceStationContract])
-
-    const resetCallback = useCallback(() => {}, [setClaimState])
-
-    return [claimState, claimCallback, resetCallback] as const
 }
diff --git a/packages/mask/src/plugins/MaskBox/SNSAdaptor/components/PreviewCard.tsx b/packages/mask/src/plugins/MaskBox/SNSAdaptor/components/PreviewCard.tsx
index faff29761645..bacbc617e7b8 100644
--- a/packages/mask/src/plugins/MaskBox/SNSAdaptor/components/PreviewCard.tsx
+++ b/packages/mask/src/plugins/MaskBox/SNSAdaptor/components/PreviewCard.tsx
@@ -97,7 +97,7 @@ export function PreviewCard(props: PreviewCardProps) {
     }, [openBoxTransaction?.config, openBoxTransactionOverrides, openBoxTransactionGasLimit])
 
     // #region open box
-    const [isOpening, openBoxCallback] = useTransactionCallback(txConfig, openBoxTransaction?.method)
+    const [{ loading: isOpening }, openBoxCallback] = useTransactionCallback(txConfig, openBoxTransaction?.method)
     const onRefresh = useCallback(() => {
         state[1](CardTab.Articles)
         setPaymentCount(1)
diff --git a/packages/mask/src/plugins/RedPacket/SNSAdaptor/NftList.tsx b/packages/mask/src/plugins/RedPacket/SNSAdaptor/NftList.tsx
index e26742b4bfd1..ba5f31bf2a4f 100644
--- a/packages/mask/src/plugins/RedPacket/SNSAdaptor/NftList.tsx
+++ b/packages/mask/src/plugins/RedPacket/SNSAdaptor/NftList.tsx
@@ -3,8 +3,8 @@ import { ERC721ContractDetailed, formatNFT_TokenId } from '@masknet/web3-shared-
 import { List, ListItem, ListProps, Typography } from '@mui/material'
 import classnames from 'classnames'
 import { FC, HTMLProps, useState } from 'react'
-import { useI18N } from '../../../utils'
 import { NFTCardStyledAssetPlayer } from '@masknet/shared'
+import { useI18N } from '../locales'
 
 const useStyles = makeStyles()((theme) => {
     const smallQuery = `@media (max-width: ${theme.breakpoints.values.sm}px)`
@@ -99,7 +99,7 @@ interface NftItemProps extends HTMLProps<HTMLDivElement> {
 }
 
 export const NftItem: FC<NftItemProps> = ({ contract, tokenId, className, claimed, renderOrder, ...rest }) => {
-    const { t } = useI18N()
+    const t = useI18N()
     const { classes } = useStyles()
     const [name, setName] = useState(formatNFT_TokenId(tokenId, 2))
 
@@ -116,7 +116,7 @@ export const NftItem: FC<NftItemProps> = ({ contract, tokenId, className, claime
                 setERC721TokenName={setName}
             />
             <Typography className={classes.name}>{name}</Typography>
-            {claimed && <Typography className={classes.claimedBadge}>{t('plugin_red_packet_claimed')}</Typography>}
+            {claimed && <Typography className={classes.claimedBadge}>{t.claimed()}</Typography>}
         </div>
     )
 }
diff --git a/packages/mask/src/plugins/RedPacket/SNSAdaptor/NftRedPacketHistoryItem.tsx b/packages/mask/src/plugins/RedPacket/SNSAdaptor/NftRedPacketHistoryItem.tsx
index 286a4d520610..1b767ead5a4f 100644
--- a/packages/mask/src/plugins/RedPacket/SNSAdaptor/NftRedPacketHistoryItem.tsx
+++ b/packages/mask/src/plugins/RedPacket/SNSAdaptor/NftRedPacketHistoryItem.tsx
@@ -1,5 +1,4 @@
 import { FC, memo, MouseEventHandler, useCallback } from 'react'
-import { Trans } from 'react-i18next'
 import classNames from 'classnames'
 import { fill } from 'lodash-unified'
 import { TokenIcon } from '@masknet/shared'
@@ -9,12 +8,12 @@ import { WalletMessages } from '@masknet/plugin-wallet'
 import { ERC721ContractDetailed, useAccount, useERC721ContractDetailed } from '@masknet/web3-shared-evm'
 import { Box, ListItem, Typography } from '@mui/material'
 import ActionButton from '../../../extension/options-page/DashboardComponents/ActionButton'
-import { useI18N } from '../../../utils/i18n-next-ui'
 import { dateTimeFormat } from '../../ITO/assets/formatDate'
 import type { NftRedPacketHistory } from '../types'
 import { useAvailabilityNftRedPacket } from './hooks/useAvailabilityNftRedPacket'
 import { useNftAvailabilityComputed } from './hooks/useNftAvailabilityComputed'
 import { NftList } from './NftList'
+import { Translate, useI18N } from '../locales'
 
 const useStyles = makeStyles()((theme) => {
     const smallQuery = `@media (max-width: ${theme.breakpoints.values.sm}px)`
@@ -150,7 +149,7 @@ export interface NftRedPacketHistoryItemProps {
 export const NftRedPacketHistoryItem: FC<NftRedPacketHistoryItemProps> = memo(
     ({ history, onSend, onShowPopover, onHidePopover }) => {
         const account = useAccount()
-        const { t } = useI18N()
+        const t = useI18N()
         const { classes } = useStyles()
         const {
             computed: { canSend, isPasswordValid },
@@ -175,7 +174,7 @@ export const NftRedPacketHistoryItem: FC<NftRedPacketHistoryItemProps> = memo(
             }
         }
         const handleShowPopover = (anchor: HTMLElement) => {
-            onShowPopover(anchor, t('plugin_nft_red_packet_data_broken'))
+            onShowPopover(anchor, t.nft_data_broken())
         }
 
         return (
@@ -196,10 +195,10 @@ export const NftRedPacketHistoryItem: FC<NftRedPacketHistoryItemProps> = memo(
                                 <Typography
                                     variant="body1"
                                     className={classNames(classes.title, classes.message, classes.ellipsis)}>
-                                    {history.message === '' ? t('plugin_red_packet_best_wishes') : history.message}
+                                    {history.message === '' ? t.best_wishes() : history.message}
                                 </Typography>
                                 <Typography variant="body1" className={classNames(classes.info, classes.message)}>
-                                    {t('plugin_red_packet_history_duration', {
+                                    {t.history_duration({
                                         startTime: dateTimeFormat(new Date(history.creation_time)),
                                         endTime: dateTimeFormat(
                                             new Date(history.creation_time + history.duration),
@@ -219,7 +218,7 @@ export const NftRedPacketHistoryItem: FC<NftRedPacketHistoryItemProps> = memo(
                                     )}
                                     variant="contained"
                                     size="large">
-                                    {t('plugin_red_packet_history_send')}
+                                    {t.send()}
                                 </ActionButton>
                             ) : null}
                         </section>
@@ -237,14 +236,13 @@ export const NftRedPacketHistoryItem: FC<NftRedPacketHistoryItemProps> = memo(
                         </section>
                         <section className={classes.footer}>
                             <Typography variant="body1" className={classes.footerInfo}>
-                                <Trans
-                                    i18nKey="plugin_red_packet_history_claimed"
+                                <Translate.history_claimed
                                     components={{
                                         strong: <strong />,
                                     }}
                                     values={{
-                                        claimedShares: history.claimers.length,
-                                        shares: history.shares,
+                                        claimedShares: history.claimers.length.toString(),
+                                        shares: history.shares.toString(),
                                     }}
                                 />
                             </Typography>
diff --git a/packages/mask/src/plugins/RedPacket/SNSAdaptor/NftRedPacketHistoryList.tsx b/packages/mask/src/plugins/RedPacket/SNSAdaptor/NftRedPacketHistoryList.tsx
index 16affe48056f..dc8e88b63923 100644
--- a/packages/mask/src/plugins/RedPacket/SNSAdaptor/NftRedPacketHistoryList.tsx
+++ b/packages/mask/src/plugins/RedPacket/SNSAdaptor/NftRedPacketHistoryList.tsx
@@ -7,7 +7,8 @@ import { useRef, useState } from 'react'
 import type { NftRedPacketHistory } from '../types'
 import { useNftRedPacketHistory } from './hooks/useNftRedPacketHistory'
 import { NftRedPacketHistoryItem } from './NftRedPacketHistoryItem'
-import { useI18N } from '../../../utils'
+import { useI18N as useBaseI18n } from '../../../utils'
+import { useI18N } from '../locales'
 
 const useStyles = makeStyles<void, 'atBottom'>()((theme, _, refs) => {
     const smallQuery = `@media (max-width: ${theme.breakpoints.values.sm}px)`
@@ -80,7 +81,8 @@ interface Props {
 
 export function NftRedPacketHistoryList({ onSend }: Props) {
     const { classes } = useStyles()
-    const { t } = useI18N()
+    const { t: tr } = useBaseI18n()
+    const t = useI18N()
     const account = useAccount()
     const chainId = useChainId()
     const { histories, fetchMore, loading } = useNftRedPacketHistory(account, chainId)
@@ -101,7 +103,7 @@ export function NftRedPacketHistoryList({ onSend }: Props) {
     if (chainId === ChainId.BSC) {
         return (
             <Typography className={classes.placeholder} color="textSecondary">
-                {t('plugin_chain_not_supported', { chain: 'Binance Smart Chain' })}
+                {t.chain_not_supported({ chain: 'Binance Smart Chain' })}
             </Typography>
         )
     }
@@ -109,7 +111,7 @@ export function NftRedPacketHistoryList({ onSend }: Props) {
     if (loading) {
         return (
             <Typography className={classes.placeholder} color="textSecondary">
-                {t('loading')}
+                {tr('loading')}
             </Typography>
         )
     }
@@ -117,7 +119,7 @@ export function NftRedPacketHistoryList({ onSend }: Props) {
     if (!histories?.length) {
         return (
             <Typography className={classes.placeholder} color="textSecondary">
-                {t('plugin_red_packet_nft_no_history')}
+                {t.nft_no_history()}
             </Typography>
         )
     }
diff --git a/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacket/OperationFooter.tsx b/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacket/OperationFooter.tsx
index 1fc627f16cf3..06e1d7d1f0b7 100644
--- a/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacket/OperationFooter.tsx
+++ b/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacket/OperationFooter.tsx
@@ -4,9 +4,10 @@ import { useRemoteControlledDialog } from '@masknet/shared-base-ui'
 import { ChainId, useAccount, useChainIdValid } from '@masknet/web3-shared-evm'
 import { Box, useTheme } from '@mui/material'
 import ActionButton from '../../../../extension/options-page/DashboardComponents/ActionButton'
-import { useI18N } from '../../../../utils'
 import { EthereumChainBoundary } from '../../../../web3/UI/EthereumChainBoundary'
+import { useI18N as useBaseI18n } from '../../../../utils'
 import { EthereumWalletConnectedBoundary } from '../../../../web3/UI/EthereumWalletConnectedBoundary'
+import { useI18N } from '../../locales'
 import { useStyles } from './useStyles'
 
 interface OperationFooterProps {
@@ -28,7 +29,8 @@ export function OperationFooter({
     onClaimOrRefund,
 }: OperationFooterProps) {
     const { classes } = useStyles()
-    const { t } = useI18N()
+    const { t: tr } = useBaseI18n()
+    const t = useI18N()
     const account = useAccount()
     const chainIdValid = useChainIdValid()
     const theme = useTheme()
@@ -45,14 +47,14 @@ export function OperationFooter({
         if (!account) {
             return (
                 <ActionButton variant="contained" fullWidth onClick={openSelectProviderDialog}>
-                    {t('plugin_wallet_connect_a_wallet')}
+                    {tr('plugin_wallet_connect_a_wallet')}
                 </ActionButton>
             )
         }
         if (!chainIdValid) {
             return (
                 <ActionButton disabled variant="contained" fullWidth>
-                    {t('plugin_wallet_invalid_network')}
+                    {tr('plugin_wallet_invalid_network')}
                 </ActionButton>
             )
         }
@@ -73,13 +75,7 @@ export function OperationFooter({
                 disabled={isLoading}
                 variant="contained"
                 onClick={onClaimOrRefund}>
-                {canClaim
-                    ? isClaiming
-                        ? t('plugin_red_packet_claiming')
-                        : t('plugin_red_packet_claim')
-                    : isRefunding
-                    ? t('plugin_red_packet_refunding')
-                    : t('plugin_red_packet_refund')}
+                {canClaim ? (isClaiming ? t.claiming() : t.claim()) : isRefunding ? t.refunding() : t.refund()}
             </ActionButton>
         )
     }
@@ -109,7 +105,7 @@ export function OperationFooter({
                                 startIcon={<SharedIcon style={{ fontSize: 18 }} />}
                                 variant="contained"
                                 onClick={onShare}>
-                                {t('share')}
+                                {tr('share')}
                             </ActionButton>
                         )}
                         <ObtainButton />
diff --git a/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacket/index.tsx b/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacket/index.tsx
index 57be9b6a6518..d1f52642f190 100644
--- a/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacket/index.tsx
+++ b/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacket/index.tsx
@@ -15,7 +15,8 @@ import { usePostLink } from '../../../../components/DataSource/usePostInfo'
 import { activatedSocialNetworkUI } from '../../../../social-network'
 import { isFacebook } from '../../../../social-network-adaptor/facebook.com/base'
 import { isTwitter } from '../../../../social-network-adaptor/twitter.com/base'
-import { useI18N } from '../../../../utils'
+import { useI18N as useBaseI18n } from '../../../../utils'
+import { useI18N } from '../../locales'
 import type { RedPacketAvailability, RedPacketJSONPayload } from '../../types'
 import { RedPacketStatus } from '../../types'
 import { useAvailabilityComputed } from '../hooks/useAvailabilityComputed'
@@ -31,7 +32,8 @@ export interface RedPacketProps {
 export function RedPacket(props: RedPacketProps) {
     const { payload } = props
 
-    const { t } = useI18N()
+    const t = useI18N()
+    const { t: tr } = useBaseI18n()
     const { classes } = useStyles()
 
     // context
@@ -54,12 +56,6 @@ export function RedPacket(props: RedPacketProps) {
 
     // #region remote controlled transaction dialog
     const postLink = usePostLink()
-    const shareTextOption = {
-        sender: payload.sender.name,
-        payload: postLink,
-        network: resolveNetworkName(networkType),
-        account: isTwitter(activatedSocialNetworkUI) ? t('twitter_account') : t('facebook_account'),
-    }
 
     const [{ loading: isClaiming, value: claimTxHash }, claimCallback] = useClaimCallback(
         payload.contract_version,
@@ -68,15 +64,25 @@ export function RedPacket(props: RedPacketProps) {
         payload.contract_version > 3 ? web3.eth.accounts.sign(account, payload.password).signature : payload.password,
     )
 
-    const shareText = (
-        listOfStatus.includes(RedPacketStatus.claimed) || claimTxHash
-            ? isTwitter(activatedSocialNetworkUI) || isFacebook(activatedSocialNetworkUI)
-                ? t('plugin_red_packet_share_message_official_account', shareTextOption)
-                : t('plugin_red_packet_share_message_not_twitter', shareTextOption)
-            : isTwitter(activatedSocialNetworkUI) || isFacebook(activatedSocialNetworkUI)
-            ? t('plugin_red_packet_share_unclaimed_message_official_account', shareTextOption)
-            : t('plugin_red_packet_share_unclaimed_message_not_twitter', shareTextOption)
-    ).trim()
+    const shareText = useMemo(() => {
+        const isOnTwitter = isTwitter(activatedSocialNetworkUI)
+        const isOnFacebook = isFacebook(activatedSocialNetworkUI)
+        const shareTextOption = {
+            sender: payload.sender.name,
+            payload: postLink.toString(),
+            network: resolveNetworkName(networkType),
+            account: isTwitter(activatedSocialNetworkUI) ? tr('twitter_account') : tr('facebook_account'),
+        }
+        if (listOfStatus.includes(RedPacketStatus.claimed) || claimTxHash) {
+            return isOnTwitter || isOnFacebook
+                ? t.share_message_official_account(shareTextOption)
+                : t.share_message_not_twitter(shareTextOption)
+        }
+
+        return isOnTwitter || isOnFacebook
+            ? t.share_unclaimed_message_official_account(shareTextOption)
+            : t.share_unclaimed_message_not_twitter(shareTextOption)
+    }, [payload, postLink, networkType, claimTxHash, listOfStatus, activatedSocialNetworkUI, t, tr])
 
     const [{ loading: isRefunding }, isRefunded, refundCallback] = useRefundCallback(
         payload.contract_version,
@@ -105,8 +111,7 @@ export function RedPacket(props: RedPacketProps) {
 
     const myStatus = useMemo(() => {
         if (token && listOfStatus.includes(RedPacketStatus.claimed))
-            return t(
-                'plugin_red_packet_description_claimed',
+            return t.description_claimed(
                 (availability as RedPacketAvailability).claimed_amount
                     ? {
                           amount: formatBalance(
@@ -114,9 +119,9 @@ export function RedPacket(props: RedPacketProps) {
                               token.decimals,
                               8,
                           ),
-                          symbol: token.symbol,
+                          symbol: token.symbol || '-',
                       }
-                    : { amount: '', symbol: '' },
+                    : { amount: '-', symbol: '-' },
             )
         return ''
     }, [listOfStatus, t, token])
@@ -125,18 +130,18 @@ export function RedPacket(props: RedPacketProps) {
         if (!availability || !token) return
 
         if (listOfStatus.includes(RedPacketStatus.expired) && canRefund)
-            return t('plugin_red_packet_description_refund', {
+            return t.description_refund({
                 balance: formatBalance(availability.balance, token.decimals),
-                symbol: token.symbol,
+                symbol: token.symbol ?? '-',
             })
-        if (listOfStatus.includes(RedPacketStatus.refunded)) return t('plugin_red_packet_description_refunded')
-        if (listOfStatus.includes(RedPacketStatus.expired)) return t('plugin_red_packet_description_expired')
-        if (listOfStatus.includes(RedPacketStatus.empty)) return t('plugin_red_packet_description_empty')
-        if (!payload.password) return t('plugin_red_packet_description_broken')
-        return t('plugin_red_packet_description_failover', {
+        if (listOfStatus.includes(RedPacketStatus.refunded)) return t.description_refunded()
+        if (listOfStatus.includes(RedPacketStatus.expired)) return t.description_expired()
+        if (listOfStatus.includes(RedPacketStatus.empty)) return t.description_empty()
+        if (!payload.password) return t.description_broken()
+        return t.description_failover({
             total: formatBalance(payload.total, token.decimals),
-            symbol: token.symbol,
-            shares: payload.shares ?? '-',
+            symbol: token.symbol ?? '-',
+            shares: payload.shares.toString() ?? '-',
         })
     }, [availability, canRefund, token, t, payload, listOfStatus])
 
@@ -150,7 +155,7 @@ export function RedPacket(props: RedPacketProps) {
         return (
             <Card className={classes.root} component="article" elevation={0}>
                 <Typography className={classes.loadingText} variant="body2">
-                    {t('loading')}
+                    {tr('loading')}
                 </Typography>
             </Card>
         )
@@ -178,7 +183,7 @@ export function RedPacket(props: RedPacketProps) {
                             {myStatus}
                         </Typography>
                         <Typography className={classes.from} variant="body1">
-                            {t('plugin_red_packet_from', { name: payload.sender.name ?? '-' })}
+                            {t.from({ name: payload.sender.name ?? '-' })}
                         </Typography>
                     </div>
                 </div>
diff --git a/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketConfirmDialog.tsx b/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketConfirmDialog.tsx
index 1bde8315ac8e..601ee15fcc2b 100644
--- a/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketConfirmDialog.tsx
+++ b/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketConfirmDialog.tsx
@@ -6,7 +6,6 @@ import {
     getChainName,
     isNativeTokenAddress,
     resolveTokenLinkOnExplorer,
-    TransactionStateType,
     useAccount,
     useChainId,
     useNetworkType,
@@ -18,10 +17,10 @@ import { makeStyles } from '@masknet/theme'
 import LaunchIcon from '@mui/icons-material/Launch'
 import { FormattedBalance, useOpenShareTxDialog } from '@masknet/shared'
 import ActionButton from '../../../extension/options-page/DashboardComponents/ActionButton'
-import { useI18N } from '../../../utils'
 import { RedPacketSettings, useCreateCallback } from './hooks/useCreateCallback'
 import type { RedPacketJSONPayload, RedPacketRecord } from '../types'
 import { RedPacketRPC } from '../messages'
+import { useI18N } from '../locales'
 
 const useStyles = makeStyles()((theme) => ({
     link: {
@@ -85,7 +84,7 @@ export interface ConfirmRedPacketFormProps {
 }
 
 export function RedPacketConfirmDialog(props: ConfirmRedPacketFormProps) {
-    const { t } = useI18N()
+    const t = useI18N()
     const { onBack, settings, onClose, onCreated } = props
     const { classes } = useStyles()
     const chainId = useChainId()
@@ -101,12 +100,7 @@ export function RedPacketConfirmDialog(props: ConfirmRedPacketFormProps) {
     const web3 = useWeb3()
     const account = useAccount()
     const { address: publicKey, privateKey } = useMemo(() => web3.eth.accounts.create(), [])
-    const [createState, createCallback, resetCreateCallback] = useCreateCallback(settings!, contract_version, publicKey)
-    const isCreating = [
-        TransactionStateType.WAIT_FOR_CONFIRMING,
-        TransactionStateType.HASH,
-        TransactionStateType.RECEIPT,
-    ].includes(createState.type)
+    const [{ loading: isCreating }, createCallback] = useCreateCallback(settings!, contract_version, publicKey)
     const openShareTxDialog = useOpenShareTxDialog()
     const createRedpacket = useCallback(async () => {
         const receipt = await createCallback()
@@ -114,8 +108,6 @@ export function RedPacketConfirmDialog(props: ConfirmRedPacketFormProps) {
         await openShareTxDialog({
             hash: receipt.transactionHash,
         })
-        // reset state
-        resetCreateCallback()
 
         // the settings is not available
         if (!settings?.token) return
@@ -141,9 +133,17 @@ export function RedPacketConfirmDialog(props: ConfirmRedPacketFormProps) {
         payload.current.creation_time = Number.parseInt(CreationSuccess.creation_time, 10) * 1000
         payload.current.token = settings.token
 
+        const record: RedPacketRecord = {
+            id: receipt.transactionHash!,
+            from: '',
+            password: privateKey,
+            contract_version,
+        }
+        RedPacketRPC.discoverRedPacket(record)
+
         // output the redpacket as JSON payload
         onCreated(payload.current)
-    }, [createCallback, resetCreateCallback, settings, openShareTxDialog, onCreated])
+    }, [createCallback, settings, openShareTxDialog, onCreated])
     // #endregion
 
     // assemble JSON payload
@@ -154,7 +154,6 @@ export function RedPacketConfirmDialog(props: ConfirmRedPacketFormProps) {
     const { HAPPY_RED_PACKET_ADDRESS_V4 } = useRedPacketConstants()
     const networkType = useNetworkType()
     useEffect(() => {
-        if (createState.type !== TransactionStateType.UNKNOWN) return
         const contractAddress = HAPPY_RED_PACKET_ADDRESS_V4
         if (!contractAddress) {
             onClose()
@@ -163,25 +162,8 @@ export function RedPacketConfirmDialog(props: ConfirmRedPacketFormProps) {
         payload.current.contract_address = contractAddress
         payload.current.contract_version = contract_version
         payload.current.network = getChainName(chainId)
-    }, [chainId, networkType, contract_version, createState])
+    }, [chainId, networkType, contract_version])
 
-    useEffect(() => {
-        if (!settings?.token || createState.type === TransactionStateType.UNKNOWN) return
-
-        // storing the created red packet in DB, it helps retrieve red packet password later
-        // save to the database early, otherwise red-packet would lose when close the tx dialog or
-        //  web page before create successfully.
-        if (createState.type === TransactionStateType.HASH && createState.hash) {
-            payload.current.txid = createState.hash
-            const record: RedPacketRecord = {
-                id: createState.hash!,
-                from: '',
-                password: privateKey,
-                contract_version,
-            }
-            RedPacketRPC.discoverRedPacket(record)
-        }
-    }, [createState /* update tx dialog only if state changed */])
     // #endregion
 
     return (
@@ -193,7 +175,7 @@ export function RedPacketConfirmDialog(props: ConfirmRedPacketFormProps) {
             </Grid>
             <Grid item xs={6}>
                 <Typography variant="body1" color="textSecondary">
-                    {t('plugin_red_packet_token')}
+                    {t.token()}
                 </Typography>
             </Grid>
             <Grid item xs={6}>
@@ -215,18 +197,18 @@ export function RedPacketConfirmDialog(props: ConfirmRedPacketFormProps) {
 
             <Grid item xs={6}>
                 <Typography variant="body1" color="textSecondary">
-                    {t('plugin_red_packet_split_mode')}
+                    {t.split_mode()}
                 </Typography>
             </Grid>
             <Grid item xs={6}>
                 <Typography variant="body1" color="textPrimary" align="right">
-                    {settings?.isRandom ? t('plugin_red_packet_random') : t('plugin_red_packet_average')}
+                    {settings?.isRandom ? t.random() : t.average()}
                 </Typography>
             </Grid>
 
             <Grid item xs={6}>
                 <Typography variant="body1" color="textSecondary">
-                    {t('plugin_red_packet_shares')}
+                    {t.shares()}
                 </Typography>
             </Grid>
             <Grid item xs={6}>
@@ -239,7 +221,7 @@ export function RedPacketConfirmDialog(props: ConfirmRedPacketFormProps) {
                 <>
                     <Grid item xs={6}>
                         <Typography variant="body1" color="textSecondary">
-                            {t('plugin_red_packet_amount_per_share')}
+                            {t.amount_per_share()}
                         </Typography>
                     </Grid>
                     <Grid item xs={6}>
@@ -257,7 +239,7 @@ export function RedPacketConfirmDialog(props: ConfirmRedPacketFormProps) {
 
             <Grid item xs={6}>
                 <Typography variant="body1" color="textSecondary">
-                    {t('plugin_red_packet_amount_total')}
+                    {t.amount_total()}
                 </Typography>
             </Grid>
             <Grid item xs={6}>
@@ -273,21 +255,21 @@ export function RedPacketConfirmDialog(props: ConfirmRedPacketFormProps) {
             <Grid item xs={12}>
                 <Paper className={classes.hit}>
                     <Typography variant="body1" align="center" style={{ fontSize: 14, lineHeight: '20px' }}>
-                        {t('plugin_red_packet_hint')}
+                        {t.hint()}
                     </Typography>
                 </Paper>
             </Grid>
 
             <Grid item xs={6}>
                 <ActionButton disabled={isCreating} variant="contained" size="large" fullWidth onClick={onBack}>
-                    {t('plugin_red_packet_back')}
+                    {t.back()}
                 </ActionButton>
             </Grid>
             <Grid item xs={6}>
                 <ActionButton loading={isCreating} variant="contained" size="large" fullWidth onClick={createRedpacket}>
-                    {t('plugin_red_packet_send_symbol', {
+                    {t.send_symbol({
                         amount: formatBalance(settings?.total, settings?.token?.decimals ?? 0),
-                        symbol: settings?.token?.symbol,
+                        symbol: settings?.token?.symbol ?? '-',
                     })}
                 </ActionButton>
             </Grid>
diff --git a/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketCreateNew.tsx b/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketCreateNew.tsx
index cdc94626b9c1..3ceac4ff3cbd 100644
--- a/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketCreateNew.tsx
+++ b/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketCreateNew.tsx
@@ -3,7 +3,7 @@ import { useChainId, ChainId } from '@masknet/web3-shared-evm'
 import { RedPacketFormProps, RedPacketERC20Form } from './RedPacketERC20Form'
 import { RedPacketERC721Form } from './RedPacketERC721Form'
 import AbstractTab, { AbstractTabProps } from '../../../components/shared/AbstractTab'
-import { useI18N } from '../../../utils'
+import { useI18N } from '../locales'
 import { activatedSocialNetworkUI } from '../../../social-network'
 import { IconURLs } from './IconURL'
 import { EnhanceableSite } from '@masknet/shared-base'
@@ -49,7 +49,7 @@ const useStyles = makeStyles<StyleProps>()((theme, { snsId }) => ({
 
 export function RedPacketCreateNew(props: RedPacketFormProps & { state: readonly [number, (next: number) => void] }) {
     const { origin, onNext, onChange, onClose, state } = props
-    const { t } = useI18N()
+    const t = useI18N()
     const { classes } = useStyles({ snsId: activatedSocialNetworkUI.networkIdentifier })
     const chainId = useChainId()
 
@@ -59,7 +59,7 @@ export function RedPacketCreateNew(props: RedPacketFormProps & { state: readonly
                 label: (
                     <div className={classes.labelWrapper}>
                         <img className={classes.img} src={IconURLs.erc20Token} />
-                        <span>{t('plugin_red_packet_erc20_tab_title')}</span>
+                        <span>{t.erc20_tab_title()}</span>
                     </div>
                 ),
                 children: <RedPacketERC20Form origin={origin} onClose={onClose} onNext={onNext} onChange={onChange} />,
@@ -69,7 +69,7 @@ export function RedPacketCreateNew(props: RedPacketFormProps & { state: readonly
                 label: (
                     <div className={classes.labelWrapper}>
                         <img className={classes.img} src={IconURLs.erc721Token} />
-                        <span>{t('plugin_red_packet_erc721_tab_title')}</span>
+                        <span>{t.erc721_tab_title()}</span>
                     </div>
                 ),
                 children: <RedPacketERC721Form onClose={onClose} />,
diff --git a/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketDialog.tsx b/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketDialog.tsx
index cdadc425c58d..5e4e92c5d94a 100644
--- a/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketDialog.tsx
+++ b/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketDialog.tsx
@@ -13,7 +13,7 @@ import {
 } from '../../../components/DataSource/useActivatedUI'
 import AbstractTab, { AbstractTabProps } from '../../../components/shared/AbstractTab'
 import Services from '../../../extension/service'
-import { useI18N } from '../../../utils'
+import { useI18N } from '../locales'
 import { WalletMessages } from '../../Wallet/messages'
 import { RedPacketMetaKey } from '../constants'
 import { DialogTabs, RedPacketJSONPayload, RpTypeTabs } from '../types'
@@ -63,7 +63,7 @@ interface RedPacketDialogProps extends withClasses<never> {
 }
 
 export default function RedPacketDialog(props: RedPacketDialogProps) {
-    const { t } = useI18N()
+    const t = useI18N()
     const chainId = useChainId()
     const account = useAccount()
     const { classes } = useStyles()
@@ -134,7 +134,7 @@ export default function RedPacketDialog(props: RedPacketDialogProps) {
     const tabProps: AbstractTabProps = {
         tabs: [
             {
-                label: t('plugin_red_packet_create_new'),
+                label: t.create_new(),
                 children: (
                     <RedPacketCreateNew
                         origin={settings}
@@ -147,7 +147,7 @@ export default function RedPacketDialog(props: RedPacketDialogProps) {
                 sx: { p: 0 },
             },
             {
-                label: t('plugin_red_packet_select_existing'),
+                label: t.select_existing(),
                 children: <RedPacketPast onSelect={onCreateOrSelect} onClose={onClose} />,
                 sx: { p: 0 },
             },
@@ -172,7 +172,7 @@ export default function RedPacketDialog(props: RedPacketDialogProps) {
     )
 
     const isCreateStep = step === CreateRedPacketPageStep.NewRedPacketPage
-    const title = isCreateStep ? t('plugin_red_packet_display_name') : t('plugin_red_packet_details')
+    const title = isCreateStep ? t.display_name() : t.details()
 
     return (
         <InjectedDialog open={props.open} title={title} onClose={onClose} disableTitleBorder>
diff --git a/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketERC20Form.tsx b/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketERC20Form.tsx
index a4843e141d93..1055ed3cbb27 100644
--- a/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketERC20Form.tsx
+++ b/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketERC20Form.tsx
@@ -17,7 +17,8 @@ import { ChangeEvent, useCallback, useEffect, useMemo, useRef, useState } from '
 import { usePickToken } from '@masknet/shared'
 import { useCurrentIdentity, useCurrentLinkedPersona } from '../../../components/DataSource/useActivatedUI'
 import ActionButton from '../../../extension/options-page/DashboardComponents/ActionButton'
-import { useI18N } from '../../../utils'
+import { useI18N } from '../locales'
+import { useI18N as useBaseI18n } from '../../../utils'
 import { EthereumERC20TokenApprovedBoundary } from '../../../web3/UI/EthereumERC20TokenApprovedBoundary'
 import { EthereumWalletConnectedBoundary } from '../../../web3/UI/EthereumWalletConnectedBoundary'
 import { TokenAmountPanel } from '../../../web3/UI/TokenAmountPanel'
@@ -82,7 +83,8 @@ export interface RedPacketFormProps extends withClasses<never> {
 }
 
 export function RedPacketERC20Form(props: RedPacketFormProps) {
-    const { t } = useI18N()
+    const t = useI18N()
+    const { t: tr } = useBaseI18n()
     const classes = useStylesExtends(useStyles(), props)
     const { onChange, onNext, origin } = props
     // context
@@ -105,7 +107,7 @@ export function RedPacketERC20Form(props: RedPacketFormProps) {
 
     // #region packet settings
     const [isRandom, setRandom] = useState(origin?.isRandom ? 1 : 0)
-    const [message, setMessage] = useState(origin?.message || t('plugin_red_packet_best_wishes'))
+    const [message, setMessage] = useState(origin?.message || t.best_wishes())
     const currentIdentity = useCurrentIdentity()
 
     const { value: linkedPersona } = useCurrentLinkedPersona()
@@ -153,32 +155,32 @@ export function RedPacketERC20Form(props: RedPacketFormProps) {
     // #endregion
 
     const validationMessage = useMemo(() => {
-        if (!token) return t('plugin_wallet_select_a_token')
-        if (!account) return t('plugin_wallet_connect_a_wallet')
+        if (!token) return t.select_a_token()
+        if (!account) return tr('plugin_wallet_connect_a_wallet')
         if (isZero(shares || '0')) return 'Enter shares'
         if (isGreaterThan(shares || '0', 255)) return 'At most 255 recipients'
-        if (isZero(amount)) return t('plugin_dhedge_enter_an_amount')
+        if (isZero(amount)) return tr('plugin_dhedge_enter_an_amount')
         if (isGreaterThan(totalAmount, tokenBalance))
-            return t('plugin_gitcoin_insufficient_balance', { symbol: token.symbol })
+            return tr('plugin_gitcoin_insufficient_balance', { symbol: token.symbol })
         if (!isDivisible)
-            return t('plugin_red_packet_indivisible', {
-                symbol: token.symbol,
+            return t.indivisible({
+                symbol: token.symbol!,
                 amount: formatBalance(1, token.decimals),
             })
         return ''
-    }, [account, amount, totalAmount, shares, token, tokenBalance])
+    }, [account, amount, totalAmount, shares, token, tokenBalance, t, tr])
 
     const creatingParams = useMemo(
         () => ({
             duration,
             isRandom: Boolean(isRandom),
             name: senderName,
-            message: message || t('plugin_red_packet_best_wishes'),
+            message: message || t.best_wishes(),
             shares: shares || 0,
             token: token ? (omit(token, ['logoURI']) as FungibleTokenDetailed) : undefined,
             total: totalAmount.toFixed(),
         }),
-        [isRandom, senderName, message, t('plugin_red_packet_best_wishes'), shares, token, totalAmount],
+        [isRandom, senderName, message, t.best_wishes(), shares, token, totalAmount],
     )
 
     const onClick = useCallback(() => {
@@ -193,7 +195,7 @@ export function RedPacketERC20Form(props: RedPacketFormProps) {
         <>
             <div className={classes.field}>
                 <FormControl className={classes.input} variant="outlined">
-                    <InputLabel className={classes.selectShrinkLabel}>{t('plugin_red_packet_split_mode')}</InputLabel>
+                    <InputLabel className={classes.selectShrinkLabel}>{t.split_mode()}</InputLabel>
                     <Select
                         ref={selectRef}
                         value={isRandom ? 1 : 0}
@@ -211,8 +213,8 @@ export function RedPacketERC20Form(props: RedPacketFormProps) {
                             container: selectRef.current,
                             anchorEl: selectRef.current,
                         }}>
-                        <MenuItem value={0}>{t('plugin_red_packet_average')}</MenuItem>
-                        <MenuItem value={1}>{t('plugin_red_packet_random')}</MenuItem>
+                        <MenuItem value={0}>{t.average()}</MenuItem>
+                        <MenuItem value={1}>{t.random()}</MenuItem>
                     </Select>
                 </FormControl>
                 <TextField
@@ -233,7 +235,7 @@ export function RedPacketERC20Form(props: RedPacketFormProps) {
                             shrink: classes.inputShrinkLabel,
                         },
                     }}
-                    label={t('plugin_red_packet_shares')}
+                    label={t.shares()}
                     value={shares}
                     onChange={onShareChange}
                 />
@@ -241,7 +243,7 @@ export function RedPacketERC20Form(props: RedPacketFormProps) {
             <div className={classes.field}>
                 <TokenAmountPanel
                     classes={{ root: classes.input }}
-                    label={isRandom ? 'Total Amount' : t('plugin_red_packet_amount_per_share')}
+                    label={isRandom ? 'Total Amount' : t.amount_per_share()}
                     amount={rawAmount}
                     balance={tokenBalance}
                     token={token}
@@ -265,8 +267,8 @@ export function RedPacketERC20Form(props: RedPacketFormProps) {
                             shrink: classes.inputShrinkLabel,
                         },
                     }}
-                    inputProps={{ placeholder: t('plugin_red_packet_best_wishes') }}
-                    label={t('plugin_red_packet_attached_message')}
+                    inputProps={{ placeholder: t.best_wishes() }}
+                    label={t.attached_message()}
                     value={message}
                 />
             </div>
@@ -282,7 +284,7 @@ export function RedPacketERC20Form(props: RedPacketFormProps) {
                         fullWidth
                         disabled={!!validationMessage}
                         onClick={onClick}>
-                        {validationMessage || t('plugin_red_packet_next')}
+                        {validationMessage || t.next()}
                     </ActionButton>
                 </EthereumERC20TokenApprovedBoundary>
             </EthereumWalletConnectedBoundary>
diff --git a/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketERC721Form.tsx b/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketERC721Form.tsx
index 63c55e2e534b..b53e3f69a5da 100644
--- a/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketERC721Form.tsx
+++ b/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketERC721Form.tsx
@@ -1,7 +1,7 @@
 import { Box, Typography, List, ListItem, CircularProgress } from '@mui/material'
 import { makeStyles } from '@masknet/theme'
 import { useState, useCallback, useEffect, useMemo } from 'react'
-import { useI18N } from '../../../utils'
+import { useI18N } from '../locales'
 import classNames from 'classnames'
 import ActionButton from '../../../extension/options-page/DashboardComponents/ActionButton'
 import { ERC721ContractSelectPanel } from '../../../web3/UI/ERC721ContractSelectPanel'
@@ -201,7 +201,7 @@ interface RedPacketERC721FormProps {
     onClose: () => void
 }
 export function RedPacketERC721Form(props: RedPacketERC721FormProps) {
-    const { t } = useI18N()
+    const t = useI18N()
     const { onClose } = props
     const { classes } = useStyles()
     const [open, setOpen] = useState(false)
@@ -259,10 +259,10 @@ export function RedPacketERC721Form(props: RedPacketERC721FormProps) {
     const { RED_PACKET_NFT_ADDRESS } = useNftRedPacketConstants()
 
     const validationMessage = useMemo(() => {
-        if (!balance) return t('plugin_red_packet_erc721_insufficient_balance')
-        if (tokenDetailedList.length === 0) return t('plugin_wallet_select_a_token')
+        if (!balance) return t.erc721_insufficient_balance()
+        if (tokenDetailedList.length === 0) return t.select_a_token()
         return ''
-    }, [tokenDetailedList.length, balance])
+    }, [tokenDetailedList.length, balance, t])
 
     return (
         <>
@@ -297,8 +297,11 @@ export function RedPacketERC721Form(props: RedPacketERC721FormProps) {
                                 <Typography color="textPrimary">
                                     {tokenDetailedOwnerList.length === 0
                                         ? 'All'
-                                        : t('plugin_red_packet_nft_select_all_option', {
-                                              total: Math.min(NFT_RED_PACKET_MAX_SHARES, tokenDetailedOwnerList.length),
+                                        : t.nft_select_all_option({
+                                              total: Math.min(
+                                                  NFT_RED_PACKET_MAX_SHARES,
+                                                  tokenDetailedOwnerList.length,
+                                              ).toString(),
                                           })}
                                 </Typography>
                             </div>
@@ -310,9 +313,7 @@ export function RedPacketERC721Form(props: RedPacketERC721FormProps) {
                                     )}>
                                     <CheckIcon className={classes.checkIcon} />
                                 </div>
-                                <Typography color="textPrimary">
-                                    {t('plugin_red_packet_nft_select_partially_option')}
-                                </Typography>
+                                <Typography color="textPrimary">{t.nft_select_partially_option()}</Typography>
                             </div>
                         </Box>
                     )
@@ -338,12 +339,8 @@ export function RedPacketERC721Form(props: RedPacketERC721FormProps) {
                 </div>
                 {contract && balance && !loadingOwnerList ? (
                     <>
-                        <Typography className={classes.unapprovedTip}>
-                            {t('plugin_red_packet_nft_unapproved_tip')}
-                        </Typography>
-                        <Typography className={classes.approveAllTip}>
-                            {t('plugin_red_packet_nft_approve_all_tip')}
-                        </Typography>
+                        <Typography className={classes.unapprovedTip}>{t.nft_unapproved_tip()}</Typography>
+                        <Typography className={classes.approveAllTip}>{t.nft_approve_all_tip()}</Typography>
                     </>
                 ) : null}
                 <EthereumWalletConnectedBoundary>
@@ -358,7 +355,7 @@ export function RedPacketERC721Form(props: RedPacketERC721FormProps) {
                             disabled={!!validationMessage}
                             fullWidth
                             onClick={() => setOpenConfirmDialog(true)}>
-                            {t('plugin_red_packet_next')}
+                            {t.next()}
                         </ActionButton>
                     </EthereumERC721TokenApprovedBoundary>
                 </EthereumWalletConnectedBoundary>
diff --git a/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketInHistoryList.tsx b/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketInHistoryList.tsx
index 3e0749c9e2fc..1a2595f81691 100644
--- a/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketInHistoryList.tsx
+++ b/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketInHistoryList.tsx
@@ -18,9 +18,8 @@ import intervalToDuration from 'date-fns/intervalToDuration'
 import nextDay from 'date-fns/nextDay'
 import { omit, pick } from 'lodash-unified'
 import { MouseEvent, useCallback, useState } from 'react'
-import { Trans } from 'react-i18next'
 import ActionButton from '../../../extension/options-page/DashboardComponents/ActionButton'
-import { useI18N } from '../../../utils'
+import { Translate, useI18N } from '../locales'
 import { dateTimeFormat } from '../../ITO/assets/formatDate'
 import { StyledLinearProgress } from '../../ITO/SNSAdaptor/StyledLinearProgress'
 import { RedPacketJSONPayload, RedPacketJSONPayloadFromChain, RedPacketStatus } from '../types'
@@ -185,7 +184,7 @@ export interface RedPacketInHistoryListProps {
 export function RedPacketInHistoryList(props: RedPacketInHistoryListProps) {
     const account = useAccount()
     const { history, onSelect } = props
-    const { t } = useI18N()
+    const t = useI18N()
     const { classes } = useStyles()
     const isSmall = useMediaQuery((theme: Theme) => theme.breakpoints.down('sm'))
     const {
@@ -246,28 +245,24 @@ export function RedPacketInHistoryList(props: RedPacketInHistoryListProps) {
                         <div className={classes.div}>
                             <div className={classes.fullWidthBox}>
                                 <Typography variant="body1" className={classNames(classes.title, classes.message)}>
-                                    {history.sender.message === ''
-                                        ? t('plugin_red_packet_best_wishes')
-                                        : history.sender.message}
+                                    {history.sender.message === '' ? t.best_wishes() : history.sender.message}
                                 </Typography>
                             </div>
                             <Typography variant="body1" className={classNames(classes.info, classes.message)}>
-                                {t('plugin_red_packet_history_duration', {
+                                {t.history_duration({
                                     startTime: dateTimeFormat(new Date(history.creation_time)),
                                     endTime: dateTimeFormat(new Date(history.creation_time + history.duration), false),
                                 })}
                             </Typography>
                             <Typography variant="body1" className={classNames(classes.info, classes.message)}>
-                                {t('plugin_red_packet_history_total_amount', {
+                                {t.history_total_amount({
                                     amount: formatBalance(history.total, historyToken?.decimals, 6),
-                                    symbol: historyToken?.symbol,
+                                    symbol: historyToken?.symbol!,
                                 })}
                             </Typography>
                             <Typography variant="body1" className={classNames(classes.info, classes.message)}>
-                                {t('plugin_red_packet_history_split_mode', {
-                                    mode: history.is_random
-                                        ? t('plugin_red_packet_random')
-                                        : t('plugin_red_packet_average'),
+                                {t.history_split_mode({
+                                    mode: history.is_random ? t.random() : t.average(),
                                 })}
                             </Typography>
                         </div>
@@ -291,12 +286,12 @@ export function RedPacketInHistoryList(props: RedPacketInHistoryListProps) {
                                     variant="contained"
                                     size="large">
                                     {canSend
-                                        ? t('plugin_red_packet_history_send')
+                                        ? t.send()
                                         : refunded
-                                        ? t('plugin_red_packet_refunding')
+                                        ? t.refunding()
                                         : listOfStatus.includes(RedPacketStatus.empty)
-                                        ? t('plugin_red_packet_empty')
-                                        : t('plugin_red_packet_refund')}
+                                        ? t.empty()
+                                        : t.refund()}
                                 </ActionButton>
                                 <Popper
                                     className={classes.popper}
@@ -306,7 +301,7 @@ export function RedPacketInHistoryList(props: RedPacketInHistoryListProps) {
                                     transition
                                     disablePortal>
                                     <Typography className={classes.popperText}>
-                                        {t('plugin_red_packet_data_broken', { duration: formatRefundDuration })}
+                                        {t.data_broken({ duration: formatRefundDuration })}
                                     </Typography>
                                     <div className={classes.arrow} />
                                 </Popper>
@@ -319,20 +314,18 @@ export function RedPacketInHistoryList(props: RedPacketInHistoryListProps) {
                     />
                     <section className={classes.footer}>
                         <Typography variant="body1" className={classes.footerInfo}>
-                            <Trans
-                                i18nKey="plugin_red_packet_history_claimed"
+                            <Translate.history_claimed
                                 components={{
                                     strong: <strong />,
                                 }}
                                 values={{
-                                    claimedShares: history.claimers?.length ?? 0,
-                                    shares: history.shares,
+                                    claimedShares: history.claimers?.length.toString() ?? '0',
+                                    shares: history.shares.toString(),
                                 }}
                             />
                         </Typography>
                         <Typography variant="body1" className={classes.footerInfo}>
-                            <Trans
-                                i18nKey="plugin_red_packet_history_total_claimed_amount"
+                            <Translate.history_total_claimed_amount
                                 components={{
                                     strong: <strong className={classes.strong} />,
                                     span: <span className={classes.span} />,
@@ -344,7 +337,7 @@ export function RedPacketInHistoryList(props: RedPacketInHistoryListProps) {
                                         historyToken?.decimals,
                                         6,
                                     ),
-                                    symbol: historyToken?.symbol,
+                                    symbol: historyToken?.symbol!,
                                 }}
                             />
                         </Typography>
diff --git a/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketNft.tsx b/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketNft.tsx
index 3db5fa3656c9..62b11814cbc8 100644
--- a/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketNft.tsx
+++ b/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketNft.tsx
@@ -1,30 +1,31 @@
+import { PluginWalletConnectIcon, SharedIcon } from '@masknet/icons'
+import { NFTCardStyledAssetPlayer } from '@masknet/shared'
+import { openWindow } from '@masknet/shared-base-ui'
 import { makeStyles } from '@masknet/theme'
 import {
-    useAccount,
     resolveAddressLinkOnExplorer,
-    useWeb3,
     resolveNetworkName,
-    useNetworkType,
     TransactionStateType,
+    useAccount,
+    useNetworkType,
+    useWeb3,
 } from '@masknet/web3-shared-evm'
 import LaunchIcon from '@mui/icons-material/Launch'
-import { Card, CardHeader, Typography, Link, CardMedia, CardContent, Button, Box, Skeleton } from '@mui/material'
-import { useCallback, useEffect, useState } from 'react'
-import ActionButton from '../../../extension/options-page/DashboardComponents/ActionButton'
-import { useI18N } from '../../../utils'
-import { EthereumWalletConnectedBoundary } from '../../../web3/UI/EthereumWalletConnectedBoundary'
-import type { RedPacketNftJSONPayload } from '../types'
-import { useClaimNftRedpacketCallback } from './hooks/useClaimNftRedpacketCallback'
-import { useAvailabilityNftRedPacket } from './hooks/useAvailabilityNftRedPacket'
+import { Box, Button, Card, CardContent, CardHeader, CardMedia, Link, Skeleton, Typography } from '@mui/material'
 import classNames from 'classnames'
+import { useCallback, useEffect, useMemo, useState } from 'react'
 import { usePostLink } from '../../../components/DataSource/usePostInfo'
+import ActionButton from '../../../extension/options-page/DashboardComponents/ActionButton'
 import { activatedSocialNetworkUI } from '../../../social-network'
-import { isTwitter } from '../../../social-network-adaptor/twitter.com/base'
 import { isFacebook } from '../../../social-network-adaptor/facebook.com/base'
-import { NFTCardStyledAssetPlayer } from '@masknet/shared'
-import { openWindow } from '@masknet/shared-base-ui'
-import { PluginWalletConnectIcon, SharedIcon } from '@masknet/icons'
+import { isTwitter } from '../../../social-network-adaptor/twitter.com/base'
+import { useI18N as useBaseI18N } from '../../../utils'
 import { EthereumChainBoundary } from '../../../web3/UI/EthereumChainBoundary'
+import { EthereumWalletConnectedBoundary } from '../../../web3/UI/EthereumWalletConnectedBoundary'
+import { useI18N } from '../locales'
+import type { RedPacketNftJSONPayload } from '../types'
+import { useAvailabilityNftRedPacket } from './hooks/useAvailabilityNftRedPacket'
+import { useClaimNftRedpacketCallback } from './hooks/useClaimNftRedpacketCallback'
 
 const useStyles = makeStyles()((theme) => ({
     root: {
@@ -249,7 +250,8 @@ export interface RedPacketNftProps {
 }
 
 export function RedPacketNft({ payload }: RedPacketNftProps) {
-    const { t } = useI18N()
+    const { t: i18n } = useBaseI18N()
+    const t = useI18N()
     const { classes } = useStyles()
     const web3 = useWeb3()
     const account = useAccount()
@@ -295,29 +297,23 @@ export function RedPacketNft({ payload }: RedPacketNftProps) {
     // #region on share
     const postLink = usePostLink()
     const networkType = useNetworkType()
-    const shareText = availability?.isClaimed
-        ? t(
-              isTwitter(activatedSocialNetworkUI) || isFacebook(activatedSocialNetworkUI)
-                  ? 'plugin_red_packet_nft_share_claimed_message'
-                  : 'plugin_red_packet_nft_share_claimed_message_not_twitter',
-              {
-                  sender: payload.senderName,
-                  payload: postLink,
-                  network: resolveNetworkName(networkType),
-                  account: isTwitter(activatedSocialNetworkUI) ? t('twitter_account') : t('facebook_account'),
-              },
-          ).trim()
-        : t(
-              isTwitter(activatedSocialNetworkUI) || isFacebook(activatedSocialNetworkUI)
-                  ? 'plugin_red_packet_nft_share_foreshow_message'
-                  : 'plugin_red_packet_nft_share_foreshow_message_not_twitter',
-              {
-                  sender: payload.senderName,
-                  payload: postLink,
-                  network: resolveNetworkName(networkType),
-                  account: isTwitter(activatedSocialNetworkUI) ? t('twitter_account') : t('facebook_account'),
-              },
-          ).trim()
+    const shareText = useMemo(() => {
+        const isTwitterOrFacebook = isTwitter(activatedSocialNetworkUI) || isFacebook(activatedSocialNetworkUI)
+        const options = {
+            sender: payload.senderName,
+            payload: postLink.toString(),
+            network: resolveNetworkName(networkType),
+            account: isTwitter(activatedSocialNetworkUI) ? i18n('twitter_account') : i18n('facebook_account'),
+        }
+        if (availability?.isClaimed) {
+            return isTwitterOrFacebook
+                ? t.nft_share_claimed_message(options)
+                : t.nft_share_claimed_message_not_twitter(options)
+        }
+        return isTwitterOrFacebook
+            ? t.nft_share_foreshow_message(options)
+            : t.nft_share_foreshow_message_not_twitter(options)
+    }, [availability?.isClaimed, t, i18n])
 
     const onShare = useCallback(() => {
         if (shareText) activatedSocialNetworkUI.utils.share?.(shareText)
@@ -330,13 +326,13 @@ export function RedPacketNft({ payload }: RedPacketNftProps) {
                 <Card className={classNames(classes.card, classes.errorCard)} component="article" elevation={0}>
                     <img className={classes.errImage} src={rpNftImg} />
                     <Typography className={classes.whiteText} variant="h5">
-                        {t('loading_failed')}
+                        {i18n('loading_failed')}
                     </Typography>
                     <Button
                         onClick={retryAvailability}
                         className={classNames(classes.errorButton, classes.whiteText)}
                         variant="outlined">
-                        {t('try_again')}
+                        {i18n('try_again')}
                     </Button>
                 </Card>
             </div>
@@ -389,14 +385,14 @@ export function RedPacketNft({ payload }: RedPacketNftProps) {
                 ) : (
                     <CardMedia className={classes.image} component="div" image={rpNftImg}>
                         <Typography className={classes.remain}>
-                            {availability.claimedAmount}/{availability.totalAmount} {t('collectibles_name')}
+                            {availability.claimedAmount}/{availability.totalAmount} {i18n('collectibles_name')}
                         </Typography>
                     </CardMedia>
                 )}
 
                 <CardContent>
                     <Typography variant="body1" className={classes.whiteText}>
-                        {t('plugin_red_packet_nft_tip')}
+                        {t.nft_tip()}
                     </Typography>
                 </CardContent>
                 <div className={classes.footer}>
@@ -426,7 +422,7 @@ export function RedPacketNft({ payload }: RedPacketNftProps) {
                     />
                     <div className={classNames(classes.badge, classes.whiteText)}>
                         <Typography variant="body2" className={classes.badgeText}>
-                            {availability.expired ? t('plugin_red_packet_expired') : t('plugin_red_packet_completed')}
+                            {availability.expired ? t.expired() : t.completed()}
                         </Typography>
                     </div>
                 </Card>
@@ -439,7 +435,7 @@ export function RedPacketNft({ payload }: RedPacketNftProps) {
                             fullWidth
                             onClick={onShare}
                             variant="contained">
-                            {t('share')}
+                            {i18n('share')}
                         </Button>
                     </Box>
                     {availability.isClaimed ? null : (
@@ -460,7 +456,7 @@ export function RedPacketNft({ payload }: RedPacketNftProps) {
                                         onClick={claimCallback}
                                         className={classes.button}
                                         fullWidth>
-                                        {isClaiming ? t('plugin_red_packet_claiming') : t('plugin_red_packet_claim')}
+                                        {isClaiming ? t.claiming() : t.claim()}
                                     </ActionButton>
                                 </EthereumWalletConnectedBoundary>
                             </EthereumChainBoundary>
diff --git a/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketPast.tsx b/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketPast.tsx
index 644196520eae..40f166399cf0 100644
--- a/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketPast.tsx
+++ b/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketPast.tsx
@@ -2,7 +2,7 @@ import { useChainId, ChainId } from '@masknet/web3-shared-evm'
 import { makeStyles } from '@masknet/theme'
 import { useCallback, useState } from 'react'
 import AbstractTab, { AbstractTabProps } from '../../../components/shared/AbstractTab'
-import { useI18N } from '../../../utils'
+import { useI18N } from '../locales'
 import { IconURLs } from './IconURL'
 import { RedPacketHistoryList } from './RedPacketHistoryList'
 import { NftRedPacketHistoryList } from './NftRedPacketHistoryList'
@@ -58,7 +58,7 @@ interface Props {
 }
 
 export function RedPacketPast({ onSelect, onClose }: Props) {
-    const { t } = useI18N()
+    const t = useI18N()
     const { classes } = useStyles()
     const state = useState(RpTypeTabs.ERC20)
     const chainId = useChainId()
@@ -95,7 +95,7 @@ export function RedPacketPast({ onSelect, onClose }: Props) {
                 label: (
                     <div className={classes.labelWrapper}>
                         <img className={classes.img} src={IconURLs.erc20Token} />
-                        <span>{t('plugin_red_packet_erc20_tab_title')}</span>
+                        <span>{t.erc20_tab_title()}</span>
                     </div>
                 ),
                 children: <RedPacketHistoryList onSelect={onSelect} />,
@@ -105,7 +105,7 @@ export function RedPacketPast({ onSelect, onClose }: Props) {
                 label: (
                     <div className={classes.labelWrapper}>
                         <img className={classes.img} src={IconURLs.erc721Token} />
-                        <span>{t('plugin_red_packet_erc721_tab_title')}</span>
+                        <span>{t.erc721_tab_title()}</span>
                     </div>
                 ),
                 children: <NftRedPacketHistoryList onSend={handleSendNftRedpacket} />,
diff --git a/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedpacketMessagePanel.tsx b/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedpacketMessagePanel.tsx
index 7270b5f44c14..86b54fb72449 100644
--- a/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedpacketMessagePanel.tsx
+++ b/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedpacketMessagePanel.tsx
@@ -1,7 +1,7 @@
 import classNames from 'classnames'
 import { Box, InputBase, Typography } from '@mui/material'
 import { makeStyles } from '@masknet/theme'
-import { useI18N } from '../../../utils'
+import { useI18N } from '../locales'
 
 const useStyles = makeStyles()((theme) => {
     return {
@@ -40,20 +40,20 @@ export interface RedpacketMessagePanelProps {
 export function RedpacketMessagePanel(props: RedpacketMessagePanelProps) {
     const { onChange, message } = props
     const { classes } = useStyles()
-    const { t } = useI18N()
+    const t = useI18N()
 
     return (
         <Box className={classes.root}>
             <div className={classes.wrapper}>
                 <Typography className={classes.title} color="textSecondary" variant="body2" component="span">
-                    {t('plugin_red_packet_message_label')}
+                    {t.message_label()}
                 </Typography>
             </div>
             <div className={classNames(classes.wrapper)}>
                 <InputBase
                     className={classes.input}
                     onChange={(e) => onChange(e.target.value)}
-                    inputProps={{ placeholder: t('plugin_red_packet_best_wishes') }}
+                    inputProps={{ placeholder: t.best_wishes() }}
                     value={message}
                 />
             </div>
diff --git a/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedpacketNftConfirmDialog.tsx b/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedpacketNftConfirmDialog.tsx
index 0a676a0f9a01..3b96cc508aee 100644
--- a/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedpacketNftConfirmDialog.tsx
+++ b/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedpacketNftConfirmDialog.tsx
@@ -20,7 +20,7 @@ import { Button, Grid, Link, Typography, DialogContent, List, ListItem } from '@
 import ActionButton from '../../../extension/options-page/DashboardComponents/ActionButton'
 import { EthereumWalletConnectedBoundary } from '../../../web3/UI/EthereumWalletConnectedBoundary'
 import LaunchIcon from '@mui/icons-material/Launch'
-import { useI18N } from '../../../utils'
+import { useI18N as useBaseI18N } from '../../../utils'
 import { useCreateNftRedpacketCallback } from './hooks/useCreateNftRedpacketCallback'
 import { useCurrentIdentity } from '../../../components/DataSource/useActivatedUI'
 import { useCompositionContext } from '@masknet/plugin-infra/content-script'
@@ -29,6 +29,7 @@ import { WalletMessages } from '../../Wallet/messages'
 import { RedPacketRPC } from '../messages'
 import { useAsync } from 'react-use'
 import Services from '../../../extension/service'
+import { useI18N } from '../locales'
 
 const useStyles = makeStyles()((theme) => ({
     root: {
@@ -167,7 +168,8 @@ export function RedpacketNftConfirmDialog(props: RedpacketNftConfirmDialogProps)
     const web3 = useWeb3()
     const { attachMetadata } = useCompositionContext()
 
-    const { t } = useI18N()
+    const { t: i18n } = useBaseI18N()
+    const t = useI18N()
     const { address: publicKey, privateKey } = useMemo(() => web3.eth.accounts.create(), [])
     const duration = 60 * 60 * 24
     const currentIdentity = useCurrentIdentity()
@@ -236,12 +238,12 @@ export function RedpacketNftConfirmDialog(props: RedpacketNftConfirmDialogProps)
     }, [createState, onSendPost])
 
     return (
-        <InjectedDialog open={open} onClose={onBack} title={t('confirm')} maxWidth="xs">
+        <InjectedDialog open={open} onClose={onBack} title={i18n('confirm')} maxWidth="xs">
             <DialogContent className={classes.root}>
                 <Grid container spacing={2}>
                     <Grid item xs={6}>
                         <Typography color="textPrimary" variant="body1" className={classes.text}>
-                            {t('plugin_red_packet_nft_account_name')}
+                            {t.nft_account_name()}
                         </Typography>
                     </Grid>
                     <Grid item xs={6}>
@@ -266,7 +268,7 @@ export function RedpacketNftConfirmDialog(props: RedpacketNftConfirmDialogProps)
                     </Grid>
                     <Grid item xs={6}>
                         <Typography variant="body1" color="textPrimary" className={classNames(classes.text)}>
-                            {t('plugin_red_packet_nft_attached_message')}
+                            {t.nft_attached_message()}
                         </Typography>
                     </Grid>
                     <Grid item xs={6}>
@@ -274,13 +276,13 @@ export function RedpacketNftConfirmDialog(props: RedpacketNftConfirmDialogProps)
                             variant="body1"
                             color="textPrimary"
                             align="right"
-                            className={(classes.text, classes.bold, classes.ellipsis)}>
+                            className={classNames(classes.text, classes.bold, classes.ellipsis)}>
                             {message}
                         </Typography>
                     </Grid>
                     <Grid item xs={6}>
                         <Typography variant="body1" color="textPrimary" className={classNames(classes.text)}>
-                            {t('plugin_wallet_collections')}
+                            {t.collections()}
                         </Typography>
                     </Grid>
                     <Grid item xs={6}>
@@ -307,7 +309,7 @@ export function RedpacketNftConfirmDialog(props: RedpacketNftConfirmDialogProps)
 
                     <Grid item xs={6}>
                         <Typography color="textPrimary" variant="body1" className={classNames(classes.text)}>
-                            {t('plugin_red_packet_nft_total_amount')}
+                            {t.nft_total_amount()}
                         </Typography>
                     </Grid>
                     <Grid item xs={6}>
@@ -327,7 +329,7 @@ export function RedpacketNftConfirmDialog(props: RedpacketNftConfirmDialogProps)
                             onClick={onBack}
                             size="large"
                             variant="contained">
-                            {t('cancel')}
+                            {i18n('cancel')}
                         </Button>
                     </Grid>
                     <Grid item xs={6}>
@@ -344,8 +346,8 @@ export function RedpacketNftConfirmDialog(props: RedpacketNftConfirmDialogProps)
                                 onClick={onSendTx}
                                 className={classNames(classes.button, classes.sendButton)}
                                 fullWidth>
-                                {t('plugin_red_packet_send_symbol', {
-                                    amount: tokenList.length,
+                                {t.send_symbol({
+                                    amount: tokenList.length.toString(),
                                     symbol: tokenList.length > 1 ? 'NFTs' : 'NFT',
                                 })}
                             </ActionButton>
diff --git a/packages/mask/src/plugins/RedPacket/SNSAdaptor/SelectNftTokenDialog.tsx b/packages/mask/src/plugins/RedPacket/SNSAdaptor/SelectNftTokenDialog.tsx
index 0915e71da8a8..acf9198e6695 100644
--- a/packages/mask/src/plugins/RedPacket/SNSAdaptor/SelectNftTokenDialog.tsx
+++ b/packages/mask/src/plugins/RedPacket/SNSAdaptor/SelectNftTokenDialog.tsx
@@ -8,17 +8,17 @@ import {
     isSameAddress,
     formatNFT_TokenId,
 } from '@masknet/web3-shared-evm'
-import { useI18N } from '../../../utils'
+import { useI18N as useBaseI18N } from '../../../utils'
 import { DialogContent, Box, InputBase, Paper, Button, Typography, ListItem, CircularProgress } from '@mui/material'
 import QuestionMarkIcon from '@mui/icons-material/QuestionMark'
 import { makeStyles, ShadowRootTooltip } from '@masknet/theme'
 import { useCallback, useState, useEffect } from 'react'
 import { SearchIcon } from '@masknet/icons'
 import CheckIcon from '@mui/icons-material/Check'
-import { Trans } from 'react-i18next'
 import { useUpdate } from 'react-use'
 import { findLastIndex } from 'lodash-unified'
 import { NFT_RED_PACKET_MAX_SHARES } from '../constants'
+import { useI18N, Translate } from '../locales'
 
 interface StyleProps {
     isSelectSharesExceed: boolean
@@ -320,7 +320,8 @@ export function SelectNftTokenDialog(props: SelectNftTokenDialogProps) {
         onClose,
         loadingOwnerList,
     } = props
-    const { t } = useI18N()
+    const { t: tr } = useBaseI18N()
+    const t = useI18N()
     const account = useAccount()
     const [tokenDetailed, setTokenDetailed] = useState<OrderedERC721Token>()
     const [searched, setSearched] = useState(false)
@@ -435,8 +436,7 @@ export function SelectNftTokenDialog(props: SelectNftTokenDialogProps) {
     }, [tokenDetailed, tokenDetailedSelectedList, setExistTokenDetailedList, onClose])
 
     const NonExistedTokenList = () => (
-        <Trans
-            i18nKey="plugin_red_packet_nft_non_existed_tip"
+        <Translate.nft_non_existed_tip
             components={{
                 tokenIdList: (
                     <span>
@@ -452,12 +452,10 @@ export function SelectNftTokenDialog(props: SelectNftTokenDialogProps) {
         />
     )
 
+    const maxSharesOptions = { amount: NFT_RED_PACKET_MAX_SHARES.toString() }
+
     return (
-        <InjectedDialog
-            open={open}
-            onClose={onClose}
-            title={t('plugin_red_packet_nft_select_collection')}
-            maxWidth="xs">
+        <InjectedDialog open={open} onClose={onClose} title={t.nft_select_collection()} maxWidth="xs">
             {tokenDetailedOwnerList.length === 0 ? (
                 <DialogContent className={classes.dialogContent}>
                     <Box className={classes.tokenBox}>
@@ -476,17 +474,13 @@ export function SelectNftTokenDialog(props: SelectNftTokenDialogProps) {
                                 className={classes.searchButton}
                                 variant="contained"
                                 onClick={onSearch}>
-                                {t('search')}
+                                {t.search()}
                             </Button>
                         </div>
                         {loadingToken || !tokenDetailed || !contract ? (
                             <Box className={classes.noResultBox}>
                                 <Typography>
-                                    {loadingToken
-                                        ? t('wallet_loading_token')
-                                        : searched
-                                        ? t('wallet_search_no_result')
-                                        : null}
+                                    {loadingToken ? t.loading_token() : searched ? t.search_no_result() : null}
                                 </Typography>
                             </Box>
                         ) : (
@@ -512,21 +506,15 @@ export function SelectNftTokenDialog(props: SelectNftTokenDialogProps) {
                     </Box>
                     <div className={classes.selectSharesExceedBox}>
                         <Typography className={classes.selectSharesExceed}>
-                            {isSelectSharesExceed
-                                ? t('plugin_red_packet_nft_max_shares_tip', { amount: NFT_RED_PACKET_MAX_SHARES })
-                                : null}
+                            {isSelectSharesExceed ? t.nft_max_shares_tip(maxSharesOptions) : null}
                         </Typography>
                         <Box className={classes.selectAmountBox}>
                             <ShadowRootTooltip
                                 title={
                                     <Typography className={classes.tooltipText}>
                                         {tokenDetailedSelectedList.length > NFT_RED_PACKET_MAX_SHARES
-                                            ? t('plugin_red_packet_nft_max_shares_tip', {
-                                                  amount: NFT_RED_PACKET_MAX_SHARES,
-                                              })
-                                            : t('plugin_red_packet_nft_max_shares', {
-                                                  amount: NFT_RED_PACKET_MAX_SHARES,
-                                              })}
+                                            ? t.nft_max_shares_tip(maxSharesOptions)
+                                            : t.nft_max_shares(maxSharesOptions)}
                                     </Typography>
                                 }
                                 placement="top-end"
@@ -546,10 +534,10 @@ export function SelectNftTokenDialog(props: SelectNftTokenDialogProps) {
                         variant="contained"
                         onClick={onSubmit}>
                         {tokenDetailed && !isOwner
-                            ? t('wallet_add_nft_invalid_owner')
+                            ? t.nft_invalid_owner()
                             : isAdded
-                            ? t('wallet_add_nft_already_added')
-                            : t('confirm')}
+                            ? t.nft_already_added()
+                            : tr('confirm')}
                     </Button>
                 </DialogContent>
             ) : (
@@ -574,14 +562,12 @@ export function SelectNftTokenDialog(props: SelectNftTokenDialogProps) {
                                 className={classes.searchButton}
                                 variant="contained"
                                 onClick={tokenDetailedOwnerList.length === 0 ? onSearch : onFilter}>
-                                {t('search')}
+                                {t.search()}
                             </Button>
                         </div>
                         {(loadingToken || !tokenDetailed) && searched ? (
                             <Box className={classes.noResultBox}>
-                                <Typography>
-                                    {loadingToken ? t('wallet_loading_token') : t('wallet_search_no_result')}
-                                </Typography>
+                                <Typography>{loadingToken ? t.loading_token() : t.search_no_result()}</Typography>
                             </Box>
                         ) : tokenDetailed?.info.name ? (
                             <Box className={classNames(classes.wrapper, classes.nftWrapper)}>
@@ -606,12 +592,11 @@ export function SelectNftTokenDialog(props: SelectNftTokenDialogProps) {
                                                 {selectAll ? <CheckIcon className={classes.checkIcon} /> : null}
                                             </div>
                                             <Typography className={classNames(classes.selectAllCheckBoxText)}>
-                                                {t('select_all')}
+                                                {tr('select_all')}
                                             </Typography>
                                         </div>
                                         <Typography>
-                                            <Trans
-                                                i18nKey="plugin_red_packet_nft_shift_select_tip"
+                                            <Translate.nft_shift_select_tip
                                                 components={{
                                                     text: <span style={{ color: '#1C68F3' }} />,
                                                 }}
@@ -670,9 +655,7 @@ export function SelectNftTokenDialog(props: SelectNftTokenDialogProps) {
                                 ) : null}
                             </Typography>
                             <Typography className={classes.selectSharesExceed}>
-                                {isSelectSharesExceed
-                                    ? t('plugin_red_packet_nft_max_shares_tip', { amount: NFT_RED_PACKET_MAX_SHARES })
-                                    : null}
+                                {isSelectSharesExceed ? t.nft_max_shares_tip(maxSharesOptions) : null}
                             </Typography>
                         </div>
 
@@ -681,12 +664,8 @@ export function SelectNftTokenDialog(props: SelectNftTokenDialogProps) {
                                 title={
                                     <Typography className={classes.tooltipText}>
                                         {tokenDetailedSelectedList.length > NFT_RED_PACKET_MAX_SHARES
-                                            ? t('plugin_red_packet_nft_max_shares_tip', {
-                                                  amount: NFT_RED_PACKET_MAX_SHARES,
-                                              })
-                                            : t('plugin_red_packet_nft_max_shares', {
-                                                  amount: NFT_RED_PACKET_MAX_SHARES,
-                                              })}
+                                            ? t.nft_max_shares_tip(maxSharesOptions)
+                                            : t.nft_max_shares(maxSharesOptions)}
                                     </Typography>
                                 }
                                 placement="top-end"
@@ -714,10 +693,10 @@ export function SelectNftTokenDialog(props: SelectNftTokenDialogProps) {
                         variant="contained"
                         onClick={onSubmit}>
                         {tokenDetailed && !isOwner
-                            ? t('wallet_add_nft_invalid_owner')
+                            ? t.nft_invalid_owner()
                             : isAdded
-                            ? t('wallet_add_nft_already_added')
-                            : t('confirm')}
+                            ? t.nft_already_added()
+                            : tr('confirm')}
                     </Button>
                 </DialogContent>
             )}
diff --git a/packages/mask/src/plugins/RedPacket/SNSAdaptor/hooks/useCreateCallback.tsx b/packages/mask/src/plugins/RedPacket/SNSAdaptor/hooks/useCreateCallback.tsx
index aced424d9e3e..f5b967e28b4c 100644
--- a/packages/mask/src/plugins/RedPacket/SNSAdaptor/hooks/useCreateCallback.tsx
+++ b/packages/mask/src/plugins/RedPacket/SNSAdaptor/hooks/useCreateCallback.tsx
@@ -5,14 +5,13 @@ import {
     EthereumTokenType,
     FungibleTokenDetailed,
     TransactionEventType,
-    TransactionStateType,
     useAccount,
     useChainId,
     useTokenConstants,
-    useTransactionState,
 } from '@masknet/web3-shared-evm'
 import { omit } from 'lodash-unified'
 import { useCallback } from 'react'
+import { useAsyncFn } from 'react-use'
 import type { TransactionReceipt } from 'web3-core'
 import Web3Utils from 'web3-utils'
 import { useRedPacketContract } from './useRedPacketContract'
@@ -120,17 +119,10 @@ export function useCreateParams(redPacketSettings: RedPacketSettings | undefined
 export function useCreateCallback(redPacketSettings: RedPacketSettings, version: number, publicKey: string) {
     const account = useAccount()
     const chainId = useChainId()
-    const [createState, setCreateState] = useTransactionState()
     const redPacketContract = useRedPacketContract(version)
     const getCreateParams = useCreateParams(redPacketSettings, version, publicKey)
 
-    const resetCallback = useCallback(() => {
-        setCreateState({
-            type: TransactionStateType.UNKNOWN,
-        })
-    }, [])
-    const createCallback = useCallback(async () => {
-        resetCallback()
+    return useAsyncFn(async () => {
         const { token } = redPacketSettings
         const createParams = await getCreateParams()
 
@@ -139,28 +131,15 @@ export function useCreateCallback(redPacketSettings: RedPacketSettings, version:
         const { gas, params, paramsObj, gasError } = createParams
 
         if (gasError) {
-            setCreateState({
-                type: TransactionStateType.FAILED,
-                error: gasError,
-            })
             return
         }
 
         try {
             checkParams(paramsObj)
         } catch (error) {
-            setCreateState({
-                type: TransactionStateType.FAILED,
-                error: error as Error,
-            })
             return
         }
 
-        // pre-step: start waiting for provider to confirm tx
-        setCreateState({
-            type: TransactionStateType.WAIT_FOR_CONFIRMING,
-        })
-
         // estimate gas and compose transaction
         const value = toFixed(token.type === EthereumTokenType.Native ? paramsObj.total : 0)
         const config: PayableTx = {
@@ -175,22 +154,11 @@ export function useCreateCallback(redPacketSettings: RedPacketSettings, version:
                 .create_red_packet(...params)
                 .send(config)
                 .on(TransactionEventType.CONFIRMATION, (no, receipt) => {
-                    setCreateState({
-                        type: TransactionStateType.CONFIRMED,
-                        no,
-                        receipt,
-                    })
                     resolve(receipt)
                 })
                 .on(TransactionEventType.ERROR, (error: Error) => {
-                    setCreateState({
-                        type: TransactionStateType.FAILED,
-                        error,
-                    })
                     reject(error)
                 })
         })
     }, [account, redPacketContract, redPacketSettings, chainId, getCreateParams])
-
-    return [createState, createCallback, resetCallback] as const
 }
diff --git a/packages/mask/src/plugins/RedPacket/SNSAdaptor/index.tsx b/packages/mask/src/plugins/RedPacket/SNSAdaptor/index.tsx
index f56ca1eb9aec..d1ec432b53a0 100644
--- a/packages/mask/src/plugins/RedPacket/SNSAdaptor/index.tsx
+++ b/packages/mask/src/plugins/RedPacket/SNSAdaptor/index.tsx
@@ -1,4 +1,4 @@
-import { type Plugin, usePluginWrapper } from '@masknet/plugin-infra/content-script'
+import { type Plugin, usePluginWrapper, PluginId } from '@masknet/plugin-infra/content-script'
 import {
     ChainId,
     EthereumTokenType,
@@ -94,9 +94,9 @@ const sns: Plugin.SNSAdaptor.Definition = {
     ApplicationEntries: [
         (() => {
             const icon = <RedPacketIcon />
-            const name = <Trans i18nKey="plugin_red_packet_name" />
+            const name = <Trans ns={PluginId.RedPacket} i18nKey="name" />
             const recommendFeature = {
-                description: <Trans i18nKey="plugin_red_packet_recommend_feature_description" />,
+                description: <Trans ns={PluginId.RedPacket} i18nKey="recommend_feature_description" />,
                 backgroundGradient: 'linear-gradient(180.54deg, #FF9A9E 0.71%, #FECFEF 98.79%, #FECFEF 99.78%)',
             }
             return {
@@ -125,7 +125,7 @@ const sns: Plugin.SNSAdaptor.Definition = {
                 appBoardSortingDefaultPriority: 1,
                 marketListSortingPriority: 1,
                 icon,
-                description: <Trans i18nKey="plugin_red_packet_description" />,
+                description: <Trans ns={PluginId.RedPacket} i18nKey="description" />,
                 name,
                 tutorialLink: 'https://realmasknetwork.notion.site/0a71fd421aae4563bd07caa3e2129e5b',
                 category: 'dapp',
diff --git a/packages/mask/src/plugins/RedPacket/base.ts b/packages/mask/src/plugins/RedPacket/base.ts
index cb9aeeea4ca9..c1fe7aa7fc8b 100644
--- a/packages/mask/src/plugins/RedPacket/base.ts
+++ b/packages/mask/src/plugins/RedPacket/base.ts
@@ -2,6 +2,7 @@ import type { Plugin } from '@masknet/plugin-infra'
 import { NetworkPluginID } from '@masknet/plugin-infra/web3'
 import { ChainId } from '@masknet/web3-shared-evm'
 import { RedPacketMetaKey, RedPacketNftMetaKey, RedPacketPluginID } from './constants'
+import { languages } from './locales/languages'
 
 export const base: Plugin.Shared.Definition = {
     ID: RedPacketPluginID,
@@ -40,4 +41,5 @@ export const base: Plugin.Shared.Definition = {
     contribution: {
         metadataKeys: new Set([RedPacketMetaKey, RedPacketNftMetaKey]),
     },
+    i18n: languages,
 }
diff --git a/packages/mask/src/plugins/RedPacket/locales/en-US.json b/packages/mask/src/plugins/RedPacket/locales/en-US.json
new file mode 100644
index 000000000000..b3491141c7f6
--- /dev/null
+++ b/packages/mask/src/plugins/RedPacket/locales/en-US.json
@@ -0,0 +1,84 @@
+{
+    "promote": "🧧🧧🧧 Try sending Lucky Drop to your friends with tokens or NFTs to share the joy now! Install Mask.io to send your first Lucky Drop.",
+    "promote_short": "🧧🧧🧧 Try sending Lucky Drop to your friends with Mask.io.",
+    "nft_shift_select_tip": "You can also use <text>{{text}}</text> to select multiple NFTs.",
+    "collections": "Collections",
+    "select_a_token": "Select a Token",
+    "search": "Search",
+    "loading_token": "Loading token...",
+    "search_no_result": "No results.",
+    "nft_already_added": "The collectible has already been added.",
+    "nft_invalid_owner": "The collectible does not belong to you.",
+    "nft_max_shares": "The maximum number of NFTs to be sold in NFT lucky drop contract is {{amount}}.",
+    "nft_max_shares_tip": "The NFT lucky drop supports up to {{amount, number}} NFTs selected for one time.",
+    "nft_non_existed_tip": "Token ID <tokenIdList></tokenIdList> does not exist or belong to you.",
+    "nft_select_collection": "Choose your collection",
+    "completed": "Completed",
+    "expired": "Expired",
+    "nft_tip": "This is an NFT lucky drop.",
+    "nft_share_foreshow_message_not_twitter": "@{{sender}} is sending an NFT lucky drop on {{network}} network. \n{{payload}}",
+    "nft_share_foreshow_message": "@{{sender}} is sending an NFT lucky drop on {{network}} network. Follow @{{account}} (mask.io) to claim NFT lucky drops.\n#mask_io #LuckyDrop\n{{payload}}",
+    "nft_share_claimed_message_not_twitter": "I just claimed an NFT lucky drop from @{{sender}} on {{network}} network.\n$t(promote_short) \n{{payload}}",
+    "nft_share_claimed_message": "I just claimed an NFT lucky drop from @{{sender}} on {{network}} network. Follow @{{account}} (mask.io) to claim NFT lucky drops.\n$t(promote_short)\n#mask_io #LuckyDrop\n{{payload}}",
+    "nft_total_amount": "Total Amount",
+    "nft_attached_message": "Attached Message",
+    "nft_account_name": "Wallet account",
+    "message_label": "Title",
+    "claiming": "Claiming...",
+    "claim": "Claim",
+    "data_broken": "The Lucky Drop can’t be sent due to data damage. Please withdraw the assets after {{duration}}.",
+    "refund": "Refund",
+    "empty": "Empty",
+    "refunding": "Refunding",
+    "history_send": "Send",
+    "history_total_amount": "Total Amount: {{amount}} {{symbol}}",
+    "history_split_mode": "Split Mode: {{mode}}",
+    "history_total_claimed_amount": "Total: <span><strong>{{claimedAmount}}/{{amount}}</strong></span> {{symbol}}",
+    "attached_message": "Attached Message",
+    "indivisible": "The minimum amount for each share is {{amount}} {{symbol}}",
+    "name": "Lucky Drop",
+    "description": "Gift crypto or NFTs to any users, first come, first served.",
+    "next": "Next",
+    "nft_approve_all_tip": "Note: When selecting approve all, all NFTs in the contract will be authorized for sale by default, including the NFTs transfered later.",
+    "nft_unapproved_tip": "You can get the rest of your NFTs back after 24 hours of sending.",
+    "nft_select_partially_option": "Select partially",
+    "nft_select_all_option": "ALL ({{total}} NFT)",
+    "erc721_insufficient_balance": "Insufficient Balance",
+    "erc721_tab_title": "Collectibles",
+    "erc20_tab_title": "Token",
+    "claimed": "Claimed",
+    "details": "Lucky Drop Details",
+    "display_name": "Plugin: Lucky Drop",
+    "select_existing": "Past",
+    "create_new": "New",
+    "send_symbol": "Send {{amount}} {{symbol}}",
+    "back": "Back",
+    "hint": "You can withdraw the remaining balance 24 hours after the Lucky Drop is sent.",
+    "amount_total": "Amount Total",
+    "amount_per_share": "Amount per Share",
+    "shares": "Shares",
+    "average": "Average",
+    "random": "Random",
+    "split_mode": "Split Mode",
+    "token": "Token",
+    "chain_not_supported": "Not supported on {{chain}} yet.",
+    "nft_no_history": "You haven’t created any NFT lucky drop yet. Try to create and share lucky with your friends.",
+    "history_claimed": "Claimed: <strong>{{claimedShares}}/{{shares}}</strong> Share",
+    "send": "Send",
+    "history_duration": "Time: {{startTime}} ~ {{endTime}} (UTC+8)",
+    "best_wishes": "Best Wishes!",
+    "nft_data_broken": "The Lucky Drop can’t be sent due to data damage.",
+    "from": "From: @{{name}}",
+    "share_message_official_account": "I just claimed a lucky drop from @{{sender}} on {{network}} network. Follow @{{account}} (mask.io) to claim lucky drops.\n$t(promote_short)\n#mask_io #LuckyDrop\n{{payload}}",
+    "share_message_not_twitter": "I just claimed a lucky drop from @{{sender}} on {{network}} network.\n$t(promote_short)\n{{payload}}",
+    "share_unclaimed_message_official_account": "Hi friends, I just found a lucky drop sent by @{{sender}} on {{network}} network. Follow @{{account}} (mask.io) to claim lucky drops.\n$t(promote_short)\n#mask_io #LuckyDrop\n{{payload}}",
+    "share_unclaimed_message_not_twitter": "Hi friends, I just found a lucky drop sent by @{{sender}} on {{network}} network.\n$t(promote_short)\n{{payload}}",
+    "description_claimed": "You got {{amount}} {{symbol}}",
+    "description_refund": "You could refund {{balance}} {{symbol}}.",
+    "description_refunded": "The Lucky Drop has been refunded.",
+    "description_expired": "The Lucky Drop is expired.",
+    "description_broken": "The Lucky Drop is broken.",
+    "description_empty": "The Lucky Drop is empty.",
+    "description_failover": "{{shares}} shares / {{total}} {{symbol}}",
+    "recommend_feature_description": "Surpirse your social friends with Lucky Drop"
+}
diff --git a/packages/mask/src/plugins/RedPacket/locales/index.ts b/packages/mask/src/plugins/RedPacket/locales/index.ts
new file mode 100644
index 000000000000..d6ead60252e4
--- /dev/null
+++ b/packages/mask/src/plugins/RedPacket/locales/index.ts
@@ -0,0 +1,6 @@
+// This file is auto generated. DO NOT EDIT
+// Run `npx gulp sync-languages` to regenerate.
+// Default fallback language in a family of languages are chosen by the alphabet order
+// To overwrite this, please overwrite packages/scripts/src/locale-kit-next/index.ts
+
+export * from './i18n_generated'
diff --git a/packages/mask/src/plugins/RedPacket/locales/ja-JP.json b/packages/mask/src/plugins/RedPacket/locales/ja-JP.json
new file mode 100644
index 000000000000..0967ef424bce
--- /dev/null
+++ b/packages/mask/src/plugins/RedPacket/locales/ja-JP.json
@@ -0,0 +1 @@
+{}
diff --git a/packages/mask/src/plugins/RedPacket/locales/ko-KR.json b/packages/mask/src/plugins/RedPacket/locales/ko-KR.json
new file mode 100644
index 000000000000..0967ef424bce
--- /dev/null
+++ b/packages/mask/src/plugins/RedPacket/locales/ko-KR.json
@@ -0,0 +1 @@
+{}
diff --git a/packages/mask/src/plugins/RedPacket/locales/languages.ts b/packages/mask/src/plugins/RedPacket/locales/languages.ts
new file mode 100644
index 000000000000..e8cd5a8b1cd5
--- /dev/null
+++ b/packages/mask/src/plugins/RedPacket/locales/languages.ts
@@ -0,0 +1,34 @@
+// This file is auto generated. DO NOT EDIT
+// Run `npx gulp sync-languages` to regenerate.
+// Default fallback language in a family of languages are chosen by the alphabet order
+// To overwrite this, please overwrite packages/scripts/src/locale-kit-next/index.ts
+import en_US from './en-US.json'
+import ja_JP from './ja-JP.json'
+import ko_KR from './ko-KR.json'
+import qya_AA from './qya-AA.json'
+import zh_CN from './zh-CN.json'
+import zh_TW from './zh-TW.json'
+export const languages = {
+    en: en_US,
+    ja: ja_JP,
+    ko: ko_KR,
+    qy: qya_AA,
+    'zh-CN': zh_CN,
+    zh: zh_TW,
+}
+// @ts-ignore
+if (import.meta.webpackHot) {
+    // @ts-ignore
+    import.meta.webpackHot.accept(
+        ['./en-US.json', './ja-JP.json', './ko-KR.json', './qya-AA.json', './zh-CN.json', './zh-TW.json'],
+        () =>
+            globalThis.dispatchEvent?.(
+                new CustomEvent('MASK_I18N_HMR', {
+                    detail: [
+                        'com.maskbook.red_packet',
+                        { en: en_US, ja: ja_JP, ko: ko_KR, qy: qya_AA, 'zh-CN': zh_CN, zh: zh_TW },
+                    ],
+                }),
+            ),
+    )
+}
diff --git a/packages/mask/src/plugins/RedPacket/locales/qya-AA.json b/packages/mask/src/plugins/RedPacket/locales/qya-AA.json
new file mode 100644
index 000000000000..0967ef424bce
--- /dev/null
+++ b/packages/mask/src/plugins/RedPacket/locales/qya-AA.json
@@ -0,0 +1 @@
+{}
diff --git a/packages/mask/src/plugins/RedPacket/locales/zh-CN.json b/packages/mask/src/plugins/RedPacket/locales/zh-CN.json
new file mode 100644
index 000000000000..0967ef424bce
--- /dev/null
+++ b/packages/mask/src/plugins/RedPacket/locales/zh-CN.json
@@ -0,0 +1 @@
+{}
diff --git a/packages/mask/src/plugins/RedPacket/locales/zh-TW.json b/packages/mask/src/plugins/RedPacket/locales/zh-TW.json
new file mode 100644
index 000000000000..0967ef424bce
--- /dev/null
+++ b/packages/mask/src/plugins/RedPacket/locales/zh-TW.json
@@ -0,0 +1 @@
+{}
diff --git a/packages/mask/src/plugins/Savings/SNSAdaptor/SavingsForm.tsx b/packages/mask/src/plugins/Savings/SNSAdaptor/SavingsForm.tsx
index 7986af9309d3..47d5a9576b6c 100644
--- a/packages/mask/src/plugins/Savings/SNSAdaptor/SavingsForm.tsx
+++ b/packages/mask/src/plugins/Savings/SNSAdaptor/SavingsForm.tsx
@@ -13,6 +13,7 @@ import {
     formatCurrency,
     getAaveConstants,
     isSameAddress,
+    resolveChainName,
     useAccount,
     useFungibleTokenBalance,
     useTokenConstants,
@@ -26,7 +27,6 @@ import { useAsync, useAsyncFn } from 'react-use'
 import type { AbiItem } from 'web3-utils'
 import { ActionButtonPromise } from '../../../extension/options-page/DashboardComponents/ActionButton'
 import { activatedSocialNetworkUI } from '../../../social-network'
-import { isFacebook } from '../../../social-network-adaptor/facebook.com/base'
 import { isTwitter } from '../../../social-network-adaptor/twitter.com/base'
 import { useI18N } from '../../../utils'
 import { EthereumChainBoundary } from '../../../web3/UI/EthereumChainBoundary'
@@ -164,16 +164,12 @@ export function SavingsForm({ chainId, protocol, tab, onClose }: SavingsFormProp
     }, [protocol.bareToken, inputAmount, chainId])
 
     const openShareTxDialog = useOpenShareTxDialog()
-    const shareText = [
-        `I just deposit ${inputAmount} ${protocol.bareToken.symbol} with ${resolveProtocolName(protocol.type)}. ${
-            isTwitter(activatedSocialNetworkUI) || isFacebook(activatedSocialNetworkUI)
-                ? `Follow @${
-                      isTwitter(activatedSocialNetworkUI) ? t('twitter_account') : t('facebook_account')
-                  } (mask.io) to deposit.`
-                : ''
-        }`,
-        '#mask_io',
-    ].join('\n')
+    const shareText = t('promote_savings', {
+        amount: inputAmount,
+        symbol: protocol.bareToken.symbol,
+        chain: resolveChainName(chainId),
+        account: isTwitter(activatedSocialNetworkUI) ? t('twitter_account') : t('facebook_account'),
+    })
     const [, executor] = useAsyncFn(async () => {
         switch (tab) {
             case TabType.Deposit:
diff --git a/packages/mask/src/plugins/Snapshot/SNSAdaptor/VotingCard.tsx b/packages/mask/src/plugins/Snapshot/SNSAdaptor/VotingCard.tsx
index 1d09bbab169f..068d235a77f1 100644
--- a/packages/mask/src/plugins/Snapshot/SNSAdaptor/VotingCard.tsx
+++ b/packages/mask/src/plugins/Snapshot/SNSAdaptor/VotingCard.tsx
@@ -13,6 +13,7 @@ import { usePower } from './hooks/usePower'
 import { VoteConfirmDialog } from './VoteConfirmDialog'
 import { useRetry } from './hooks/useRetry'
 import { NetworkPluginID, useCurrentWeb3NetworkPluginID } from '@masknet/plugin-infra/web3'
+import { activatedSocialNetworkUI } from '../../../social-network'
 
 const useStyles = makeStyles()((theme) => {
     return {
@@ -52,11 +53,12 @@ export function VotingCard() {
     const networkPluginId = useCurrentWeb3NetworkPluginID()
     const retry = useRetry()
     const onVoteConfirm = useSnackbarCallback(
-        () => {
+        async () => {
             setLoading(true)
-            return PluginSnapshotRPC.vote(identifier, choice, account, proposal.type)
+            await PluginSnapshotRPC.vote(identifier, choice, account, proposal.type)
+            activatedSocialNetworkUI.utils.share?.(t('promote_snapshot'))
         },
-        [choice, identifier],
+        [choice, identifier, account, proposal.type, t],
         () => {
             setLoading(false)
             setOpen(false)
diff --git a/packages/mask/src/plugins/Trader/SNSAdaptor/trader/Trader.tsx b/packages/mask/src/plugins/Trader/SNSAdaptor/trader/Trader.tsx
index 0f3f1536c37f..656592bc4d28 100644
--- a/packages/mask/src/plugins/Trader/SNSAdaptor/trader/Trader.tsx
+++ b/packages/mask/src/plugins/Trader/SNSAdaptor/trader/Trader.tsx
@@ -21,7 +21,8 @@ import { useUnmount, useUpdateEffect } from 'react-use'
 import { activatedSocialNetworkUI } from '../../../../social-network'
 import { isFacebook } from '../../../../social-network-adaptor/facebook.com/base'
 import { isTwitter } from '../../../../social-network-adaptor/twitter.com/base'
-import { useI18N } from '../../../../utils'
+import { useI18N as useBaseI18N } from '../../../../utils'
+import { useI18N } from '../../locales'
 import { isNativeTokenWrapper } from '../../helpers'
 import { PluginTraderMessages } from '../../messages'
 import { AllProviderTradeActionType, AllProviderTradeContext } from '../../trader/useAllProviderTradeContext'
@@ -61,7 +62,8 @@ export function Trader(props: TraderProps) {
     const chainIdValid = useChainIdValid()
     const { NATIVE_TOKEN_ADDRESS } = useTokenConstants()
     const classes = useStylesExtends(useStyles(), props)
-    const { t } = useI18N()
+    const { t: tr } = useBaseI18N()
+    const t = useI18N()
     const { setTargetChainId } = TargetChainIdContext.useContainer()
 
     // #region trade state
@@ -248,16 +250,17 @@ export function Trader(props: TraderProps) {
                   }.${
                       isTwitter(activatedSocialNetworkUI) || isFacebook(activatedSocialNetworkUI)
                           ? `Follow @${
-                                isTwitter(activatedSocialNetworkUI) ? t('twitter_account') : t('facebook_account')
+                                isTwitter(activatedSocialNetworkUI) ? tr('twitter_account') : tr('facebook_account')
                             } (mask.io) to swap cryptocurrencies on ${
                                 isTwitter(activatedSocialNetworkUI) ? 'Twitter' : 'Facebook'
                             }.`
                           : ''
                   }`,
                   '#mask_io',
+                  t.promote(),
               ].join('\n')
             : ''
-    }, [focusedTrade?.value, inputToken, outputToken])
+    }, [focusedTrade?.value, inputToken, outputToken, tr, t])
     const openShareTxDialog = useOpenShareTxDialog()
     const onConfirmDialogConfirm = useCallback(async () => {
         setOpenConfirmDialog(false)
diff --git a/packages/mask/src/plugins/Trader/base.ts b/packages/mask/src/plugins/Trader/base.ts
index 2bb1969f0c29..e9970b26ff6b 100644
--- a/packages/mask/src/plugins/Trader/base.ts
+++ b/packages/mask/src/plugins/Trader/base.ts
@@ -2,6 +2,7 @@ import type { Plugin } from '@masknet/plugin-infra'
 import { NetworkPluginID } from '@masknet/plugin-infra/web3'
 import { ChainId } from '@masknet/web3-shared-evm'
 import { PLUGIN_ID } from './constants'
+import { languages } from './locales/languages'
 
 export const base: Plugin.Shared.Definition = {
     ID: PLUGIN_ID,
@@ -30,4 +31,5 @@ export const base: Plugin.Shared.Definition = {
             [NetworkPluginID.PLUGIN_SOLANA]: { supportedChainIds: [] },
         },
     },
+    i18n: languages,
 }
diff --git a/packages/mask/src/plugins/Trader/locales/en-US.json b/packages/mask/src/plugins/Trader/locales/en-US.json
new file mode 100644
index 000000000000..5920a7a664f4
--- /dev/null
+++ b/packages/mask/src/plugins/Trader/locales/en-US.json
@@ -0,0 +1,3 @@
+{
+    "promote": "Instantly token exchange on Twitter. Install Mask.io to explore “better server” on Multi-chain Dex."
+}
diff --git a/packages/mask/src/plugins/Trader/locales/index.ts b/packages/mask/src/plugins/Trader/locales/index.ts
new file mode 100644
index 000000000000..d6ead60252e4
--- /dev/null
+++ b/packages/mask/src/plugins/Trader/locales/index.ts
@@ -0,0 +1,6 @@
+// This file is auto generated. DO NOT EDIT
+// Run `npx gulp sync-languages` to regenerate.
+// Default fallback language in a family of languages are chosen by the alphabet order
+// To overwrite this, please overwrite packages/scripts/src/locale-kit-next/index.ts
+
+export * from './i18n_generated'
diff --git a/packages/mask/src/plugins/Trader/locales/ja-JP.json b/packages/mask/src/plugins/Trader/locales/ja-JP.json
new file mode 100644
index 000000000000..0967ef424bce
--- /dev/null
+++ b/packages/mask/src/plugins/Trader/locales/ja-JP.json
@@ -0,0 +1 @@
+{}
diff --git a/packages/mask/src/plugins/Trader/locales/ko-KR.json b/packages/mask/src/plugins/Trader/locales/ko-KR.json
new file mode 100644
index 000000000000..0967ef424bce
--- /dev/null
+++ b/packages/mask/src/plugins/Trader/locales/ko-KR.json
@@ -0,0 +1 @@
+{}
diff --git a/packages/mask/src/plugins/Trader/locales/languages.ts b/packages/mask/src/plugins/Trader/locales/languages.ts
new file mode 100644
index 000000000000..a189384a2e40
--- /dev/null
+++ b/packages/mask/src/plugins/Trader/locales/languages.ts
@@ -0,0 +1,34 @@
+// This file is auto generated. DO NOT EDIT
+// Run `npx gulp sync-languages` to regenerate.
+// Default fallback language in a family of languages are chosen by the alphabet order
+// To overwrite this, please overwrite packages/scripts/src/locale-kit-next/index.ts
+import en_US from './en-US.json'
+import ja_JP from './ja-JP.json'
+import ko_KR from './ko-KR.json'
+import qya_AA from './qya-AA.json'
+import zh_CN from './zh-CN.json'
+import zh_TW from './zh-TW.json'
+export const languages = {
+    en: en_US,
+    ja: ja_JP,
+    ko: ko_KR,
+    qy: qya_AA,
+    'zh-CN': zh_CN,
+    zh: zh_TW,
+}
+// @ts-ignore
+if (import.meta.webpackHot) {
+    // @ts-ignore
+    import.meta.webpackHot.accept(
+        ['./en-US.json', './ja-JP.json', './ko-KR.json', './qya-AA.json', './zh-CN.json', './zh-TW.json'],
+        () =>
+            globalThis.dispatchEvent?.(
+                new CustomEvent('MASK_I18N_HMR', {
+                    detail: [
+                        'com.maskbook.trader',
+                        { en: en_US, ja: ja_JP, ko: ko_KR, qy: qya_AA, 'zh-CN': zh_CN, zh: zh_TW },
+                    ],
+                }),
+            ),
+    )
+}
diff --git a/packages/mask/src/plugins/Trader/locales/qya-AA.json b/packages/mask/src/plugins/Trader/locales/qya-AA.json
new file mode 100644
index 000000000000..0967ef424bce
--- /dev/null
+++ b/packages/mask/src/plugins/Trader/locales/qya-AA.json
@@ -0,0 +1 @@
+{}
diff --git a/packages/mask/src/plugins/Trader/locales/zh-CN.json b/packages/mask/src/plugins/Trader/locales/zh-CN.json
new file mode 100644
index 000000000000..0967ef424bce
--- /dev/null
+++ b/packages/mask/src/plugins/Trader/locales/zh-CN.json
@@ -0,0 +1 @@
+{}
diff --git a/packages/mask/src/plugins/Trader/locales/zh-TW.json b/packages/mask/src/plugins/Trader/locales/zh-TW.json
new file mode 100644
index 000000000000..0967ef424bce
--- /dev/null
+++ b/packages/mask/src/plugins/Trader/locales/zh-TW.json
@@ -0,0 +1 @@
+{}
diff --git a/packages/mask/src/plugins/dHEDGE/UI/InvestDialog.tsx b/packages/mask/src/plugins/dHEDGE/UI/InvestDialog.tsx
index 53f8e5eda38c..d636468993f7 100644
--- a/packages/mask/src/plugins/dHEDGE/UI/InvestDialog.tsx
+++ b/packages/mask/src/plugins/dHEDGE/UI/InvestDialog.tsx
@@ -94,7 +94,7 @@ export function InvestDialog() {
     // #endregion
 
     // #region blocking
-    const [isInvesting, investCallback] = useInvestCallback(pool, amount.toFixed(), token)
+    const [{ loading: isInvesting }, investCallback] = useInvestCallback(pool, amount.toFixed(), token)
     const openShareTxDialog = useOpenShareTxDialog()
     const cashTag = isTwitter(activatedSocialNetworkUI) ? '$' : ''
     const shareText = token
diff --git a/packages/mask/src/plugins/dHEDGE/hooks/useInvestCallback.ts b/packages/mask/src/plugins/dHEDGE/hooks/useInvestCallback.ts
index ced58ff42cde..ec087c129d64 100644
--- a/packages/mask/src/plugins/dHEDGE/hooks/useInvestCallback.ts
+++ b/packages/mask/src/plugins/dHEDGE/hooks/useInvestCallback.ts
@@ -1,6 +1,6 @@
 import { toFixed } from '@masknet/web3-shared-base'
 import { EthereumTokenType, FungibleTokenDetailed, TransactionEventType, useAccount } from '@masknet/web3-shared-evm'
-import { useCallback, useState } from 'react'
+import { useAsyncFn } from 'react-use'
 import { useDHedgePoolV1Contract, useDHedgePoolV2Contract } from '../contracts/useDHedgePool'
 import { Pool, PoolType } from '../types'
 
@@ -15,9 +15,8 @@ export function useInvestCallback(pool: Pool | undefined, amount: string, token?
     const poolV2Contract = useDHedgePoolV2Contract(pool?.address ?? '')
 
     const account = useAccount()
-    const [loading, setLoading] = useState(false)
 
-    const investCallback = useCallback(async () => {
+    return useAsyncFn(async () => {
         if (!token || !poolV1Contract || !poolV2Contract) return
 
         // step 1: estimate gas
@@ -32,11 +31,9 @@ export function useInvestCallback(pool: Pool | undefined, amount: string, token?
                 : poolV2Contract.methods.deposit(token.address, amount)
         }
 
-        setLoading(true)
         const estimatedGas = await deposit()
             .estimateGas(config)
             .catch((error) => {
-                setLoading(false)
                 throw error
             })
 
@@ -53,6 +50,4 @@ export function useInvestCallback(pool: Pool | undefined, amount: string, token?
                 .on(TransactionEventType.ERROR, reject)
         })
     }, [pool, account, amount, token])
-
-    return [loading, investCallback] as const
 }
diff --git a/packages/mask/src/social-network-adaptor/twitter.com/injection/NFT/NFTAvatarInTwitter.tsx b/packages/mask/src/social-network-adaptor/twitter.com/injection/NFT/NFTAvatarInTwitter.tsx
index 1fb279a56651..b8a0682dcea7 100644
--- a/packages/mask/src/social-network-adaptor/twitter.com/injection/NFT/NFTAvatarInTwitter.tsx
+++ b/packages/mask/src/social-network-adaptor/twitter.com/injection/NFT/NFTAvatarInTwitter.tsx
@@ -1,4 +1,4 @@
-import { createReactRootShadowed, MaskMessages, NFTAvatarEvent, startWatch } from '../../../../utils'
+import { createReactRootShadowed, MaskMessages, NFTAvatarEvent, startWatch, useI18N } from '../../../../utils'
 import { searchTwitterAvatarLinkSelector, searchTwitterAvatarSelector } from '../../utils/selector'
 import { MutationObserverWatcher } from '@dimensiondev/holoflows-kit'
 import { makeStyles } from '@masknet/theme'
@@ -16,6 +16,9 @@ import { trim } from 'lodash-unified'
 import { RSS3_KEY_SNS } from '../../../../plugins/Avatar/constants'
 import { openWindow } from '@masknet/shared-base-ui'
 import { usePersonaNFTAvatar } from '../../../../plugins/Avatar/hooks/usePersonaNFTAvatar'
+import { NFTCardStyledAssetPlayer, useShowConfirm } from '@masknet/shared'
+import { Box, Typography } from '@mui/material'
+import { activatedSocialNetworkUI } from '../../../../social-network'
 
 export function injectNFTAvatarInTwitter(signal: AbortSignal) {
     const watcher = new MutationObserverWatcher(searchTwitterAvatarSelector())
@@ -61,6 +64,7 @@ function NFTAvatarInTwitter() {
     const windowSize = useWindowSize()
     const location = useLocation()
 
+    const { t } = useI18N()
     const showAvatar = useMemo(
         () => getAvatarId(identity.avatar ?? '') === avatar?.avatarId && avatar.avatarId,
         [avatar?.avatarId, identity.avatar],
@@ -81,6 +85,7 @@ function NFTAvatarInTwitter() {
     const onUpdate = (data: NFTAvatarEvent) => {
         setNFTEvent(data)
     }
+    const openConfirmDialog = useShowConfirm()
 
     // After the avatar is set, it cannot be saved immediately, and must wait until the avatar of twitter is updated
     useAsync(async () => {
@@ -118,6 +123,21 @@ function NFTAvatarInTwitter() {
             window.alert('Sorry, failed to save NFT Avatar. Please set again.')
             return
         }
+        openConfirmDialog({
+            title: t('plugin_avatar_setup_share_title'),
+            content: (
+                <Box display="flex" flexDirection="column" alignItems="center">
+                    <NFTCardStyledAssetPlayer contractAddress={avatar.address} tokenId={avatar.tokenId} />
+                    <Typography mt={3} fontSize="18px">
+                        {t('plugin_avatar_setup_success')}
+                    </Typography>
+                </Box>
+            ),
+            confirmLabel: t('share'),
+            onSubmit() {
+                activatedSocialNetworkUI.utils.share?.(t('plugin_avatar_setup_pfp_share'))
+            },
+        })
 
         setAvatar(avatar)
         MaskMessages.events.NFTAvatarTimelineUpdated.sendToAll(
@@ -130,7 +150,7 @@ function NFTAvatarInTwitter() {
         )
 
         setNFTEvent(undefined)
-    }, [identity.avatar])
+    }, [identity.avatar, openConfirmDialog, t])
 
     useEffect(() => {
         setAvatar(_avatar)
diff --git a/packages/mask/src/tsconfig.json b/packages/mask/src/tsconfig.json
index 9d137580ffed..5be5ef7a1573 100644
--- a/packages/mask/src/tsconfig.json
+++ b/packages/mask/src/tsconfig.json
@@ -31,6 +31,7 @@
     { "path": "../../plugin-infra" },
     { "path": "../../plugins/Wallet" },
     { "path": "../../plugins/Flow" },
+    { "path": "../../plugins/FileService" },
     { "path": "../../external-plugin-previewer" },
     { "path": "../../injected-script/sdk" },
     { "path": "../../mask-sdk/server" },
diff --git a/packages/mask/src/web3/UI/EthereumERC20TokenApprovedBoundary.tsx b/packages/mask/src/web3/UI/EthereumERC20TokenApprovedBoundary.tsx
index 8759226ec53d..7ae770d3fc76 100644
--- a/packages/mask/src/web3/UI/EthereumERC20TokenApprovedBoundary.tsx
+++ b/packages/mask/src/web3/UI/EthereumERC20TokenApprovedBoundary.tsx
@@ -154,7 +154,7 @@ export function EthereumERC20TokenApprovedBoundary(props: EthereumERC20TokenAppr
                 ) : null}
             </Box>
         )
-    if (approveStateType === ApproveStateType.PENDING || approveStateType === ApproveStateType.UPDATING)
+    if (transactionState.loading || approveStateType === ApproveStateType.UPDATING)
         return (
             <Grid container>
                 <ActionButton
@@ -164,7 +164,7 @@ export function EthereumERC20TokenApprovedBoundary(props: EthereumERC20TokenAppr
                     size="large"
                     disabled
                     {...props.ActionButtonProps}>
-                    {approveStateType === ApproveStateType.PENDING
+                    {transactionState.loading
                         ? t('plugin_ito_unlocking_symbol', { symbol: token.symbol })
                         : `Updating ${token.symbol}`}
                     &hellip;
diff --git a/packages/mask/src/web3/UI/EthereumERC721TokenApprovedBoundary.tsx b/packages/mask/src/web3/UI/EthereumERC721TokenApprovedBoundary.tsx
index e10bd3c2760b..e84035bd6bf9 100644
--- a/packages/mask/src/web3/UI/EthereumERC721TokenApprovedBoundary.tsx
+++ b/packages/mask/src/web3/UI/EthereumERC721TokenApprovedBoundary.tsx
@@ -1,17 +1,16 @@
+import { makeStyles, useCustomSnackbar, useStylesExtends } from '@masknet/theme'
 import {
-    useERC721ContractIsApproveForAll,
-    useERC721ContractSetApproveForAllCallback,
-    TransactionStateType,
     ERC721ContractDetailed,
     resolveTransactionLinkOnExplorer,
+    useERC721ContractIsApproveForAll,
+    useERC721ContractSetApproveForAllCallback,
 } from '@masknet/web3-shared-evm'
 import OpenInNewIcon from '@mui/icons-material/OpenInNew'
-import { useI18N } from '../../utils'
-import { makeStyles, useCustomSnackbar, useStylesExtends } from '@masknet/theme'
-import { Typography, Link } from '@mui/material'
-import ActionButton, { ActionButtonProps } from '../../extension/options-page/DashboardComponents/ActionButton'
-import { useMemo, useEffect } from 'react'
+import { Link, Typography } from '@mui/material'
+import { useCallback, useMemo } from 'react'
 import { EthereumAddress } from 'wallet.ts'
+import ActionButton, { ActionButtonProps } from '../../extension/options-page/DashboardComponents/ActionButton'
+import { useI18N } from '../../utils'
 
 const useStyles = makeStyles()(() => ({
     snackBarText: {
@@ -48,45 +47,39 @@ export function EthereumERC721TokenApprovedBoundary(props: EthereumERC712TokenAp
     const { t } = useI18N()
     const classes = useStylesExtends(useStyles(), props)
     const { value, loading, retry } = useERC721ContractIsApproveForAll(contractDetailed?.address, owner, operator)
-    const [approveState, approveCallback, resetCallback] = useERC721ContractSetApproveForAllCallback(
+    const [approveState, approveCallback] = useERC721ContractSetApproveForAllCallback(
         contractDetailed?.address,
         operator,
         true,
     )
     const { showSnackbar } = useCustomSnackbar()
 
-    useEffect(() => {
-        if (approveState.type === TransactionStateType.CONFIRMED && approveState.no === 0) {
-            showSnackbar(
-                <div className={classes.snackBar}>
-                    <Typography className={classes.snackBarText}>
-                        {t('plugin_wallet_approve_all_nft_successfully', { symbol: contractDetailed?.symbol })}
-                    </Typography>
-                    <Link
-                        href={resolveTransactionLinkOnExplorer(
-                            contractDetailed!.chainId,
-                            approveState.receipt.transactionHash,
-                        )}
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        className={classes.snackBarLink}>
-                        <OpenInNewIcon className={classes.openIcon} />
-                    </Link>
-                </div>,
-                {
-                    variant: 'success',
-                    anchorOrigin: { horizontal: 'right', vertical: 'top' },
-                },
-            )
-            resetCallback()
-            retry()
-        } else if (approveState.type === TransactionStateType.FAILED) {
-            showSnackbar(approveState.error.message, {
-                variant: 'error',
-            })
-            resetCallback()
+    const approve = useCallback(async () => {
+        const hash = await approveCallback()
+        if (typeof hash !== 'string') {
+            showSnackbar(approveState.error?.message)
+            return
         }
-    }, [approveState, contractDetailed])
+        showSnackbar(
+            <div className={classes.snackBar}>
+                <Typography className={classes.snackBarText}>
+                    {t('plugin_wallet_approve_all_nft_successfully', { symbol: contractDetailed?.symbol })}
+                </Typography>
+                <Link
+                    href={resolveTransactionLinkOnExplorer(contractDetailed!.chainId, hash)}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className={classes.snackBarLink}>
+                    <OpenInNewIcon className={classes.openIcon} />
+                </Link>
+            </div>,
+            {
+                variant: 'success',
+                anchorOrigin: { horizontal: 'right', vertical: 'top' },
+            },
+        )
+        retry()
+    }, [showSnackbar, approveState, retry, contractDetailed])
 
     const validationMessage = useMemo(() => {
         if (!contractDetailed?.address || !EthereumAddress.isValid(contractDetailed?.address))
@@ -97,7 +90,7 @@ export function EthereumERC721TokenApprovedBoundary(props: EthereumERC712TokenAp
         return ''
     }, [contractDetailed, owner, operator, _validationMessage])
 
-    if ([TransactionStateType.WAIT_FOR_CONFIRMING, TransactionStateType.HASH].includes(approveState.type)) {
+    if (approveState.loading) {
         return (
             <ActionButton
                 className={classes.approveButton}
@@ -147,7 +140,7 @@ export function EthereumERC721TokenApprovedBoundary(props: EthereumERC712TokenAp
                 variant="contained"
                 size="large"
                 fullWidth
-                onClick={approveCallback}
+                onClick={approve}
                 {...props.ActionButtonProps}>
                 {t('plugin_wallet_approve_all_nft', {
                     symbol: contractDetailed?.symbol
diff --git a/packages/plugins/FileService/src/index.ts b/packages/plugins/FileService/src/index.ts
index 69226b786ae4..79ee5520eaa9 100644
--- a/packages/plugins/FileService/src/index.ts
+++ b/packages/plugins/FileService/src/index.ts
@@ -1,6 +1,8 @@
 import { registerPlugin } from '@masknet/plugin-infra'
 import { base } from './base'
 
+export { FileInfoMetadataReader } from './helpers'
+
 registerPlugin({
     ...base,
     SNSAdaptor: {
diff --git a/packages/web3-shared/evm/hooks/useERC20TokenApproveCallback.ts b/packages/web3-shared/evm/hooks/useERC20TokenApproveCallback.ts
index 346b49771765..2e52b2049043 100644
--- a/packages/web3-shared/evm/hooks/useERC20TokenApproveCallback.ts
+++ b/packages/web3-shared/evm/hooks/useERC20TokenApproveCallback.ts
@@ -1,13 +1,13 @@
-import { useCallback, useMemo } from 'react'
-import { once } from 'lodash-unified'
 import type { NonPayableTx } from '@masknet/web3-contracts/types/types'
-import { TransactionStateType, TransactionEventType } from '../types'
+import { isLessThan, toFixed } from '@masknet/web3-shared-base'
+import { once } from 'lodash-unified'
+import { useCallback, useMemo } from 'react'
+import { useAsyncFn } from 'react-use'
 import { useERC20TokenContract } from '../contracts/useERC20TokenContract'
+import { TransactionEventType } from '../types'
 import { useAccount } from './useAccount'
 import { useERC20TokenAllowance } from './useERC20TokenAllowance'
 import { useERC20TokenBalance } from './useERC20TokenBalance'
-import { useTransactionState } from './useTransactionState'
-import { isLessThan, toFixed } from '@masknet/web3-shared-base'
 
 const MaxUint256 = toFixed('0xffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff')
 
@@ -23,7 +23,6 @@ export enum ApproveStateType {
 export function useERC20TokenApproveCallback(address?: string, amount?: string, spender?: string) {
     const account = useAccount()
     const erc20Contract = useERC20TokenContract(address)
-    const [transactionState, setTransactionState] = useTransactionState()
 
     // read the approved information from the chain
     const {
@@ -44,43 +43,20 @@ export function useERC20TokenApproveCallback(address?: string, amount?: string,
         if (!amount || !spender) return ApproveStateType.UNKNOWN
         if (loadingBalance || loadingAllowance) return ApproveStateType.UPDATING
         if (errorBalance || errorAllowance) return ApproveStateType.FAILED
-        if (transactionState.type === TransactionStateType.WAIT_FOR_CONFIRMING) return ApproveStateType.PENDING
         return isLessThan(allowance, amount) ? ApproveStateType.NOT_APPROVED : ApproveStateType.APPROVED
-    }, [
-        amount,
-        spender,
-        balance,
-        allowance,
-        errorBalance,
-        errorAllowance,
-        loadingAllowance,
-        loadingBalance,
-        transactionState.type,
-    ])
+    }, [amount, spender, balance, allowance, errorBalance, errorAllowance, loadingAllowance, loadingBalance])
 
-    const approveCallback = useCallback(
+    const [state, approveCallback] = useAsyncFn(
         async (useExact = false) => {
-            setTransactionState({
-                type: TransactionStateType.UNKNOWN,
-            })
             if (approveStateType === ApproveStateType.UNKNOWN || !amount || !spender || !erc20Contract) {
                 return
             }
 
             // error: failed to approve token
             if (approveStateType !== ApproveStateType.NOT_APPROVED) {
-                setTransactionState({
-                    type: TransactionStateType.FAILED,
-                    error: new Error('Failed to approve token.'),
-                })
                 return
             }
 
-            // start waiting for provider to confirm tx
-            setTransactionState({
-                type: TransactionStateType.WAIT_FOR_CONFIRMING,
-            })
-
             // estimate gas and compose transaction
             const config = {
                 from: account,
@@ -96,16 +72,12 @@ export function useERC20TokenApproveCallback(address?: string, amount?: string,
                         })
                     })
                     .catch((error) => {
-                        setTransactionState({
-                            type: TransactionStateType.FAILED,
-                            error,
-                        })
                         throw error
                     }),
             }
 
             // send transaction and wait for hash
-            return new Promise<void>(async (resolve, reject) => {
+            return new Promise<string>(async (resolve, reject) => {
                 const revalidate = once(() => {
                     revalidateBalance()
                     revalidateAllowance()
@@ -113,43 +85,25 @@ export function useERC20TokenApproveCallback(address?: string, amount?: string,
                 erc20Contract.methods
                     .approve(spender, useExact ? amount : MaxUint256)
                     .send(config as NonPayableTx)
-                    .on(TransactionEventType.RECEIPT, (receipt) => {
-                        setTransactionState({
-                            type: TransactionStateType.CONFIRMED,
-                            no: 0,
-                            receipt,
-                        })
+                    .on(TransactionEventType.RECEIPT, () => {
                         revalidate()
-                        resolve()
                     })
                     .on(TransactionEventType.CONFIRMATION, (no, receipt) => {
-                        setTransactionState({
-                            type: TransactionStateType.CONFIRMED,
-                            no,
-                            receipt,
-                        })
                         revalidate()
-                        resolve()
+                        resolve(receipt.transactionHash)
                     })
                     .on(TransactionEventType.ERROR, (error) => {
-                        setTransactionState({
-                            type: TransactionStateType.FAILED,
-                            error,
-                        })
                         revalidate()
                         reject(error)
                     })
             })
         },
-        [account, amount, balance, spender, loadingAllowance, loadingBalance, erc20Contract, approveStateType],
+        [account, amount, spender, erc20Contract, approveStateType],
     )
 
     const resetCallback = useCallback(() => {
         revalidateBalance()
         revalidateAllowance()
-        setTransactionState({
-            type: TransactionStateType.UNKNOWN,
-        })
     }, [revalidateBalance, revalidateAllowance])
 
     return [
@@ -160,7 +114,7 @@ export function useERC20TokenApproveCallback(address?: string, amount?: string,
             spender,
             balance,
         },
-        transactionState,
+        state,
         approveCallback,
         resetCallback,
     ] as const
diff --git a/packages/web3-shared/evm/hooks/useERC721ContractSetApproveForAllCallback.ts b/packages/web3-shared/evm/hooks/useERC721ContractSetApproveForAllCallback.ts
index 6eb6672de354..99c2cf200196 100644
--- a/packages/web3-shared/evm/hooks/useERC721ContractSetApproveForAllCallback.ts
+++ b/packages/web3-shared/evm/hooks/useERC721ContractSetApproveForAllCallback.ts
@@ -1,9 +1,8 @@
-import { useCallback } from 'react'
 import type { NonPayableTx } from '@masknet/web3-contracts/types/types'
-import { useAccount } from './useAccount'
-import { useTransactionState } from './useTransactionState'
+import { useAsyncFn } from 'react-use'
 import { useERC721TokenContract } from '../contracts'
-import { TransactionStateType, TransactionEventType } from '../types'
+import { TransactionEventType } from '../types'
+import { useAccount } from './useAccount'
 import { useChainId } from './useChainId'
 
 /**
@@ -19,62 +18,32 @@ export function useERC721ContractSetApproveForAllCallback(
     const account = useAccount()
     const chainId = useChainId()
     const erc721TokenContract = useERC721TokenContract(contractAddress)
-    const [approveState, setApproveState] = useTransactionState()
 
-    const approveCallback = useCallback(async () => {
+    return useAsyncFn(async () => {
         if (!erc721TokenContract || !contractAddress || !operator) {
-            setApproveState({ type: TransactionStateType.UNKNOWN })
             return
         }
 
-        setApproveState({
-            type: TransactionStateType.WAIT_FOR_CONFIRMING,
-        })
-
         const config = {
             from: account,
             gas: await erc721TokenContract.methods
                 .setApprovalForAll(operator, approved)
                 .estimateGas({ from: account })
                 .catch((error) => {
-                    setApproveState({ type: TransactionStateType.FAILED, error })
                     throw error
                 }),
         }
 
-        return new Promise<void>(async (resolve, reject) => {
+        return new Promise<string>(async (resolve, reject) => {
             erc721TokenContract.methods
                 .setApprovalForAll(operator, approved)
                 .send(config as NonPayableTx)
-                .on(TransactionEventType.RECEIPT, (receipt) => {
-                    setApproveState({
-                        type: TransactionStateType.CONFIRMED,
-                        no: 0,
-                        receipt,
-                    })
-                    resolve()
-                })
                 .on(TransactionEventType.CONFIRMATION, (no, receipt) => {
-                    setApproveState({
-                        type: TransactionStateType.CONFIRMED,
-                        no,
-                        receipt,
-                    })
-                    resolve()
+                    resolve(receipt.transactionHash)
                 })
                 .on(TransactionEventType.ERROR, (error) => {
-                    setApproveState({
-                        type: TransactionStateType.FAILED,
-                        error,
-                    })
                     reject(error)
                 })
         })
-    }, [account, chainId, erc721TokenContract, approved, contractAddress, operator, setApproveState])
-
-    const resetCallback = useCallback(() => {
-        setApproveState({ type: TransactionStateType.UNKNOWN })
-    }, [])
-
-    return [approveState, approveCallback, resetCallback] as const
+    }, [account, chainId, erc721TokenContract, approved, contractAddress, operator])
 }
diff --git a/packages/web3-shared/evm/hooks/useTransactionCallback.ts b/packages/web3-shared/evm/hooks/useTransactionCallback.ts
index b2a8f6f446d2..a2f6d92d0f7e 100644
--- a/packages/web3-shared/evm/hooks/useTransactionCallback.ts
+++ b/packages/web3-shared/evm/hooks/useTransactionCallback.ts
@@ -1,32 +1,24 @@
 import type { PayableTransactionObject, PayableTx } from '@masknet/web3-contracts/types/types'
 import { omit } from 'lodash-unified'
-import { useCallback, useState } from 'react'
+import { useAsyncFn } from 'react-use'
 import { TransactionEventType } from '../types'
 
 export function useTransactionCallback<T extends unknown>(
     config: PayableTx | undefined,
     method: PayableTransactionObject<T> | undefined,
 ) {
-    const [loading, setLoading] = useState(false)
-
-    const updateCallback = useCallback(async () => {
+    return useAsyncFn(async () => {
         if (!config || !method) return
 
         const gasExpectedConfig = { ...config }
 
-        setLoading(true)
         try {
             const estimatedGas = await method.estimateGas(omit(config, 'gas'))
             if (!gasExpectedConfig.gas && estimatedGas) {
                 gasExpectedConfig.gas = estimatedGas
             }
         } catch (error) {
-            try {
-                await method.call(config)
-            } catch (error) {
-                setLoading(false)
-                throw error
-            }
+            await method.call(config)
         }
 
         return new Promise<string>(async (resolve, reject) => {
@@ -40,6 +32,4 @@ export function useTransactionCallback<T extends unknown>(
                 })
         })
     }, [config, method])
-
-    return [loading, updateCallback] as const
 }

From 988c25a66a9ca1e6882ca5c21e5a329b15438f84 Mon Sep 17 00:00:00 2001
From: Jack Works <jackworks@protonmail.com>
Date: Fri, 27 May 2022 12:09:26 +0800
Subject: [PATCH 04/17] fix: eslint

---
 .../backup-format/src/utils/hex2buffer.ts     |  2 +-
 packages/backup-format/src/version-1/index.ts |  6 +++---
 packages/backup-format/src/version-2/index.ts |  4 ++--
 .../src/components/CreateWalletForm/index.tsx |  4 ++--
 .../components/FungibleTokenTable/index.tsx   |  2 +-
 .../encryption/src/encryption/Decryption.ts   |  2 +-
 .../encryption/src/encryption/v38-ecdh.ts     |  2 +-
 .../main/EventListenerPatch/capture.ts        |  2 +-
 .../database/avatar-cache/avatar.ts           |  2 +-
 .../mask/background/database/post/dbType.ts   |  2 +-
 .../mask/background/database/utils/openDB.ts  |  8 ++++----
 .../background/services/__utils__/convert.ts  |  4 ++--
 .../background/services/backup/restore.ts     |  2 +-
 .../services/helper/deprecated-storage.ts     |  2 +-
 packages/mask/src/UIRoot.tsx                  |  2 +-
 .../DecryptedPost/DecryptedPost.tsx           |  2 +-
 .../src/components/shared/AbstractTab.tsx     |  4 ++--
 .../mask/src/database/helpers/pagination.ts   |  2 +-
 .../EthereumServices/nonce.ts                 |  2 +-
 .../providers/WalletConnect.ts                |  4 ++--
 .../EthereumServices/rpc/abi.ts               |  4 ++--
 .../Wallet/Transfer/Prior1559Transfer.tsx     |  2 +-
 .../pages/Wallet/Transfer/Transfer1559.tsx    |  2 +-
 .../components/DeriveWalletTable/index.tsx    |  2 +-
 .../src/plugins/Collectible/types/opensea.ts  |  4 ++--
 .../src/plugins/Collectible/types/rarible.ts  |  4 ++--
 .../plugins/EVM/UI/Web3State/getAssetsFn.ts   |  6 +++---
 .../FindTruman/SNSAdaptor/ConstPromise.ts     |  4 ++--
 packages/mask/src/plugins/FindTruman/types.ts |  2 +-
 .../Gitcoin/hooks/useDonateCallback.ts        |  2 +-
 .../plugins/ITO/SNSAdaptor/NftAirdropCard.tsx |  4 ++--
 .../plugins/ITO/SNSAdaptor/hooks/useFill.ts   |  2 +-
 .../plugins/ITO/SNSAdaptor/hooks/useRegion.ts |  4 ++--
 .../ITO/Worker/apis/spaceStationGalaxy.ts     |  2 +-
 .../src/plugins/ITO/Worker/apis/subgraph.ts   | 20 +++++++++----------
 packages/mask/src/plugins/ITO/types.ts        |  4 ++--
 packages/mask/src/plugins/MaskBox/type.ts     |  4 ++--
 .../RedPacket/Worker/apis/erc20Redpacket.ts   |  2 +-
 packages/mask/src/plugins/RedPacket/types.ts  |  6 +++---
 .../mask/src/plugins/Savings/constants.ts     |  4 ++--
 .../plugins/Savings/protocols/AAVEProtocol.ts |  8 ++++----
 .../src/plugins/Snapshot/Worker/apis/index.ts |  2 +-
 packages/mask/src/plugins/Snapshot/types.ts   |  8 ++++----
 .../SNSAdaptor/trending/CoinMetadataTable.tsx |  2 +-
 .../SNSAdaptor/trending/LBPPriceChart.tsx     |  2 +-
 .../SNSAdaptor/trending/PriceChangedTable.tsx |  2 +-
 .../mask/src/plugins/Trader/apis/LBP/index.ts |  6 +++---
 .../plugins/Trader/apis/coingecko/index.ts    |  4 ++--
 .../Trader/apis/uniswap-health/index.ts       |  4 ++--
 .../Trader/apis/uniswap-v2-subgraph/index.ts  |  6 +++---
 .../Trader/graphs/usePriceLineChart.ts        |  2 +-
 .../trader/uniswap/useAllCommonPairs.ts       |  6 +++---
 .../Trader/trader/uniswap/useAllV3Routes.ts   |  6 +++---
 .../plugins/Trader/trader/uniswap/usePools.ts |  8 ++++----
 .../Trader/trader/uniswap/useV3SwapPools.ts   |  2 +-
 .../Trader/trending/useCurrentCurrency.ts     |  4 ++--
 packages/mask/src/plugins/Trader/types/0x.ts  |  4 ++--
 .../mask/src/plugins/Trader/types/trader.ts   |  2 +-
 .../src/plugins/UnlockProtocol/Services.ts    |  8 ++++----
 packages/mask/src/plugins/Wallet/apis/ens.ts  |  4 ++--
 .../plugins/Wallet/services/wallet/index.ts   |  8 ++++----
 .../mask/src/plugins/hooks/useLineChart.ts    |  2 +-
 .../src/plugins/hooks/usePriceLineChart.ts    |  2 +-
 .../utils/create-post-context.ts              |  2 +-
 packages/mask/src/utils/hooks/useSuspense.ts  |  2 +-
 .../utils/shadow-root/renderInShadowRoot.tsx  |  2 +-
 packages/plugin-infra/src/web3-types.ts       |  2 +-
 .../Flow/src/apis/getFungibleAssets.ts        |  4 ++--
 .../SNSAdaptor/components/DonationCard.tsx    |  4 ++--
 packages/plugins/RSS3/src/types.ts            |  4 ++--
 .../Solana/src/apis/getFungibleAssets.ts      |  4 ++--
 packages/plugins/Solana/src/apis/shared.ts    |  2 +-
 packages/plugins/example/src/Worker/index.ts  |  2 +-
 packages/shared-base/src/Identifier/map.ts    |  8 ++++----
 packages/shared-base/src/NextID/type.ts       |  2 +-
 .../UI/components/ConcealableTabs/index.tsx   |  2 +-
 .../components/MiniNetworkSelector/index.tsx  |  4 ++--
 packages/theme/src/ShadowRoot/Contexts.ts     |  2 +-
 .../ShadowRoot/createReactRootShadowed.tsx    |  2 +-
 packages/theme/src/Theme/Provider.tsx         |  2 +-
 .../theme/src/UIHelper/custom-ui-helper.tsx   |  2 +-
 packages/theme/stories/utils/Material-UI.ts   |  2 +-
 packages/theme/stories/utils/args.ts          |  2 +-
 packages/typed-message/base/utils/extract.ts  |  4 ++--
 packages/typed-message/base/utils/internal.ts |  4 ++--
 packages/web3-constants/compile-constants.ts  |  2 +-
 packages/web3-contracts/compile-contracts.ts  |  2 +-
 packages/web3-providers/src/opensea/types.ts  | 12 +++++------
 packages/web3-providers/src/rarible/index.ts  |  2 +-
 packages/web3-providers/src/rarible/types.ts  |  4 ++--
 packages/web3-providers/src/types.ts          | 16 +++++++--------
 .../evm/constants/getContractOwnerDomain.ts   |  2 +-
 .../evm/hooks/useERC20TokenDetailed.ts        |  2 +-
 .../useERC20TokensDetailedFromTokenLists.ts   |  4 ++--
 .../evm/hooks/useERC721TokenDetailed.ts       |  2 +-
 .../web3-shared/evm/hooks/useMulticall.ts     |  4 ++--
 96 files changed, 181 insertions(+), 181 deletions(-)

diff --git a/packages/backup-format/src/utils/hex2buffer.ts b/packages/backup-format/src/utils/hex2buffer.ts
index 4b8f76f2e0c2..b4fa7099a733 100644
--- a/packages/backup-format/src/utils/hex2buffer.ts
+++ b/packages/backup-format/src/utils/hex2buffer.ts
@@ -22,7 +22,7 @@ export function hex2buffer(hexString: string, padded?: boolean) {
 }
 
 /** @internal */
-function concat(...buf: (Uint8Array | number[])[]) {
+function concat(...buf: Array<Uint8Array | number[]>) {
     const res = new Uint8Array(sum(buf.map((item) => item.length)))
     let offset = 0
     buf.forEach((item) => {
diff --git a/packages/backup-format/src/version-1/index.ts b/packages/backup-format/src/version-1/index.ts
index 7abf0376c303..4f001c0dc895 100644
--- a/packages/backup-format/src/version-1/index.ts
+++ b/packages/backup-format/src/version-1/index.ts
@@ -89,16 +89,16 @@ interface BackupJSONFileVersion1 {
         publicKey: EC_Public_JsonWebKey
         privateKey: EC_Private_JsonWebKey
         localKey: AESJsonWebKey
-        previousIdentifiers?: { network: string; userId: string }[]
+        previousIdentifiers?: Array<{ network: string; userId: string }>
         nickname?: string
     }>
     people?: Array<{
         network: string
         userId: string
         publicKey: EC_Public_JsonWebKey
-        previousIdentifiers?: { network: string; userId: string }[]
+        previousIdentifiers?: Array<{ network: string; userId: string }>
         nickname?: string
-        groups?: { network: string; groupID: string; virtualGroupOwner: string | null }[]
+        groups?: Array<{ network: string; groupID: string; virtualGroupOwner: string | null }>
 
         // Note: those props are not existed in the backup, just to make the code more readable
         privateKey?: EC_Private_JsonWebKey
diff --git a/packages/backup-format/src/version-2/index.ts b/packages/backup-format/src/version-2/index.ts
index 2ed7c710d425..7a9da8856975 100644
--- a/packages/backup-format/src/version-2/index.ts
+++ b/packages/backup-format/src/version-2/index.ts
@@ -322,7 +322,7 @@ interface BackupJSONFileVersion2 {
         privateKey?: JsonWebKey
         localKey?: JsonWebKey
         nickname?: string
-        linkedProfiles: [/** ProfileIdentifier.toText() */ string, LinkedProfileDetails][]
+        linkedProfiles: Array<[/** ProfileIdentifier.toText() */ string, LinkedProfileDetails]>
         createdAt: number // Unix timestamp
         updatedAt: number // Unix timestamp
     }>
@@ -345,7 +345,7 @@ interface BackupJSONFileVersion2 {
         postBy: string // ProfileIdentifier.toText()
         identifier: string // PostIVIdentifier.toText()
         postCryptoKey?: JsonWebKey
-        recipients: 'everyone' | [/** ProfileIdentifier.toText() */ string, { reason: RecipientReasonJSON[] }][]
+        recipients: 'everyone' | Array<[/** ProfileIdentifier.toText() */ string, { reason: RecipientReasonJSON[] }]>
         /** @deprecated */
         recipientGroups: never[]
         foundAt: number // Unix timestamp
diff --git a/packages/dashboard/src/components/CreateWalletForm/index.tsx b/packages/dashboard/src/components/CreateWalletForm/index.tsx
index ddb77638de16..2a5df398e1a0 100644
--- a/packages/dashboard/src/components/CreateWalletForm/index.tsx
+++ b/packages/dashboard/src/components/CreateWalletForm/index.tsx
@@ -31,11 +31,11 @@ const useStyles = makeStyles()((theme) => ({
 
 // TODO: actions, and icon may be an img url
 export interface CreateWalletFormProps {
-    options: {
+    options: Array<{
         label: string
         icon: React.ReactNode
         value: number
-    }[]
+    }>
 }
 
 export function CreateWalletForm(props: CreateWalletFormProps) {
diff --git a/packages/dashboard/src/pages/Wallets/components/FungibleTokenTable/index.tsx b/packages/dashboard/src/pages/Wallets/components/FungibleTokenTable/index.tsx
index dd7a4a744d6a..e2236f600657 100644
--- a/packages/dashboard/src/pages/Wallets/components/FungibleTokenTable/index.tsx
+++ b/packages/dashboard/src/pages/Wallets/components/FungibleTokenTable/index.tsx
@@ -125,7 +125,7 @@ export const FungibleTokenTable = memo<TokenTableProps>(({ selectedChainId }) =>
 export interface TokenTableUIProps {
     isLoading: boolean
     isEmpty: boolean
-    dataSource: Web3Plugin.Asset<Web3Plugin.FungibleToken>[]
+    dataSource: Array<Web3Plugin.Asset<Web3Plugin.FungibleToken>>
     onSwap(token: Web3Plugin.FungibleToken): void
     onSend(token: Web3Plugin.FungibleToken): void
 }
diff --git a/packages/encryption/src/encryption/Decryption.ts b/packages/encryption/src/encryption/Decryption.ts
index ca41d207507e..ba50cec0ba9f 100644
--- a/packages/encryption/src/encryption/Decryption.ts
+++ b/packages/encryption/src/encryption/Decryption.ts
@@ -167,7 +167,7 @@ async function* v38To40StaticECDH(
 }
 type StaticV38OrOlderECDH = {
     type: 'static-v38-or-older'
-    derive: (postKeyIV: Uint8Array) => Promise<(readonly [key: AESCryptoKey, iv: Uint8Array])[]>
+    derive: (postKeyIV: Uint8Array) => Promise<Array<readonly [key: AESCryptoKey, iv: Uint8Array]>>
 }
 type EphemeralECDH = {
     type: 'ephemeral'
diff --git a/packages/encryption/src/encryption/v38-ecdh.ts b/packages/encryption/src/encryption/v38-ecdh.ts
index e01036308290..91e82cba52db 100644
--- a/packages/encryption/src/encryption/v38-ecdh.ts
+++ b/packages/encryption/src/encryption/v38-ecdh.ts
@@ -27,7 +27,7 @@ export async function deriveAESByECDH_version38OrOlderExtraSteps(
     deriveAESByECDH: (key: EC_Public_CryptoKey) => Promise<AESCryptoKey[]>,
     pub: EC_Public_CryptoKey,
     iv: Uint8Array,
-): Promise<(readonly [key: AESCryptoKey, iv: Uint8Array])[]> {
+): Promise<Array<readonly [key: AESCryptoKey, iv: Uint8Array]>> {
     const deriveResult = await deriveAESByECDH(pub)
     const extraSteps = deriveResult.map(async (key) => {
         const derivedKeyRaw = await crypto.subtle.exportKey('raw', key)
diff --git a/packages/injected-script/main/EventListenerPatch/capture.ts b/packages/injected-script/main/EventListenerPatch/capture.ts
index a70a3e4e0556..30c231554d85 100644
--- a/packages/injected-script/main/EventListenerPatch/capture.ts
+++ b/packages/injected-script/main/EventListenerPatch/capture.ts
@@ -1,7 +1,7 @@
 import { clone_into, redefineEventTargetPrototype, unwrapXRay_CPPBindingObject } from '../utils'
 import { apply, error, no_xray_Proxy, warn, xray_Map } from '../intrinsic'
 
-const CapturingEvents: Set<string> = new Set(['keyup', 'input', 'paste', 'change'] as (keyof DocumentEventMap)[])
+const CapturingEvents: Set<string> = new Set(['keyup', 'input', 'paste', 'change'] as Array<keyof DocumentEventMap>)
 
 type EventListenerDescriptor = { once: boolean; passive: boolean; capture: boolean }
 const CapturedListeners = new WeakMap<Node | Document, Map<string, Map<EventListener, EventListenerDescriptor>>>()
diff --git a/packages/mask/background/database/avatar-cache/avatar.ts b/packages/mask/background/database/avatar-cache/avatar.ts
index 1488e8bf04f1..cf993a959ba3 100644
--- a/packages/mask/background/database/avatar-cache/avatar.ts
+++ b/packages/mask/background/database/avatar-cache/avatar.ts
@@ -19,7 +19,7 @@ async function nativeImpl(identifiers: IdentifierWithAvatar[]): Promise<Map<Iden
 }
 const indexedDBImpl = memoizePromise(
     async function (identifiers: IdentifierWithAvatar[]): Promise<Map<IdentifierWithAvatar, string>> {
-        const promises: Promise<unknown>[] = []
+        const promises: Array<Promise<unknown>> = []
 
         const map = new Map<IdentifierWithAvatar, string>()
         const t = createTransaction(await createAvatarDBAccess(), 'readonly')('avatars')
diff --git a/packages/mask/background/database/post/dbType.ts b/packages/mask/background/database/post/dbType.ts
index 4ccf9e3490ad..890481c1d85a 100644
--- a/packages/mask/background/database/post/dbType.ts
+++ b/packages/mask/background/database/post/dbType.ts
@@ -7,7 +7,7 @@ export declare namespace PostDB_HistoryTypes {
         postBy: { userId: string; network: string } | undefined
         identifier: string
         recipientGroups?: unknown
-        recipients?: { userId: string; network: string }[]
+        recipients?: Array<{ userId: string; network: string }>
         foundAt: Date
         postCryptoKey?: CryptoKey
     }
diff --git a/packages/mask/background/database/utils/openDB.ts b/packages/mask/background/database/utils/openDB.ts
index 1581315ca75b..4c5c9fcc5e65 100644
--- a/packages/mask/background/database/utils/openDB.ts
+++ b/packages/mask/background/database/utils/openDB.ts
@@ -109,7 +109,7 @@ export function createDBAccessWithAsyncUpgrade<DBSchema, AsyncUpgradePreparedDat
 }
 export interface IDBPSafeObjectStore<
     DBTypes extends DBSchema,
-    TxStores extends StoreNames<DBTypes>[] = StoreNames<DBTypes>[],
+    TxStores extends Array<StoreNames<DBTypes>> = Array<StoreNames<DBTypes>>,
     StoreName extends StoreNames<DBTypes> = StoreNames<DBTypes>,
     Writable extends boolean = boolean,
 > extends Pick<
@@ -170,14 +170,14 @@ export interface IDBPSafeObjectStore<
 }
 export type IDBPSafeTransaction<
     DBTypes extends DBSchema,
-    TxStores extends StoreNames<DBTypes>[],
+    TxStores extends Array<StoreNames<DBTypes>>,
     Mode extends IDBTransactionMode = 'readonly',
 > = Omit<IDBPTransaction<DBTypes, TxStores, Mode>, 'mode' | 'objectStoreNames' | 'objectStore' | 'store'> & {
     readonly objectStoreNames: TypedDOMStringList<StoreNames<DBTypes> & string>
     readonly mode: IDBTransactionMode
     readonly __writable__?: Mode extends 'readwrite' ? true : boolean
     readonly __stores__?: Record<
-        TxStores extends readonly (infer ValueOfUsedStoreName)[]
+        TxStores extends ReadonlyArray<infer ValueOfUsedStoreName>
             ? ValueOfUsedStoreName extends string | number | symbol
                 ? ValueOfUsedStoreName
                 : never
@@ -194,7 +194,7 @@ export function createTransaction<DBType extends DBSchema, Mode extends 'readonl
     mode: Mode,
 ) {
     // It must be a high order function to infer the type of UsedStoreName correctly.
-    return <UsedStoreName extends StoreNames<DBType>[] = []>(...storeNames: UsedStoreName) => {
+    return <UsedStoreName extends Array<StoreNames<DBType>> = []>(...storeNames: UsedStoreName) => {
         return db.transaction(storeNames, mode) as IDBPSafeTransaction<DBType, UsedStoreName, Mode>
     }
 }
diff --git a/packages/mask/background/services/__utils__/convert.ts b/packages/mask/background/services/__utils__/convert.ts
index dcbb60a43f30..88814d3f4c27 100644
--- a/packages/mask/background/services/__utils__/convert.ts
+++ b/packages/mask/background/services/__utils__/convert.ts
@@ -25,8 +25,8 @@ export function toProfileInformation(profiles: ProfileRecord[]) {
 /** @internal */
 export function toPersonaInformation(personas: PersonaRecord[], t: FullPersonaDBTransaction<'readonly'>) {
     const personaInfo: PersonaInformation[] = []
-    const dbQueryPass2: Promise<void>[] = []
-    const dbQuery: Promise<void>[] = personas.map(async (persona) => {
+    const dbQueryPass2: Array<Promise<void>> = []
+    const dbQuery: Array<Promise<void>> = personas.map(async (persona) => {
         const map: ProfileInformation[] = []
         personaInfo.push({
             nickname: persona.nickname,
diff --git a/packages/mask/background/services/backup/restore.ts b/packages/mask/background/services/backup/restore.ts
index 4153d80322c8..4471113809e9 100644
--- a/packages/mask/background/services/backup/restore.ts
+++ b/packages/mask/background/services/backup/restore.ts
@@ -44,7 +44,7 @@ export async function addUnconfirmedBackup(raw: string): Promise<Result<{ info:
 
 export async function getUnconfirmedBackup(
     id: string,
-): Promise<undefined | { wallets: { address: string; name: string }[] }> {
+): Promise<undefined | { wallets: Array<{ address: string; name: string }> }> {
     if (!unconfirmedBackup.has(id)) return undefined
     const backup = unconfirmedBackup.get(id)!
     return {
diff --git a/packages/mask/background/services/helper/deprecated-storage.ts b/packages/mask/background/services/helper/deprecated-storage.ts
index 9e618ad9e031..a55a66364678 100644
--- a/packages/mask/background/services/helper/deprecated-storage.ts
+++ b/packages/mask/background/services/helper/deprecated-storage.ts
@@ -5,7 +5,7 @@ import { timeout } from '@dimensiondev/kit'
  * Make sure that the storage is used serially.
  */
 class MutexStorage<T extends browser.storage.StorageValue> {
-    private tasks: (() => void)[] = []
+    private tasks: Array<() => void> = []
     private locked = false
 
     private lock() {
diff --git a/packages/mask/src/UIRoot.tsx b/packages/mask/src/UIRoot.tsx
index e820a9a59f6a..9d7c5eefe82b 100644
--- a/packages/mask/src/UIRoot.tsx
+++ b/packages/mask/src/UIRoot.tsx
@@ -16,7 +16,7 @@ import { isTwitter } from './social-network-adaptor/twitter.com/base'
 import { MaskThemeProvider } from '@masknet/theme'
 
 const identity = (jsx: React.ReactNode) => jsx as JSX.Element
-function compose(init: React.ReactNode, ...f: ((children: React.ReactNode) => JSX.Element)[]) {
+function compose(init: React.ReactNode, ...f: Array<(children: React.ReactNode) => JSX.Element>) {
     // eslint-disable-next-line unicorn/no-array-reduce
     return f.reduceRight((prev, curr) => curr(prev), <>{init}</>)
 }
diff --git a/packages/mask/src/components/InjectedComponents/DecryptedPost/DecryptedPost.tsx b/packages/mask/src/components/InjectedComponents/DecryptedPost/DecryptedPost.tsx
index 1ab0de6a8474..04c7deb6aa61 100644
--- a/packages/mask/src/components/InjectedComponents/DecryptedPost/DecryptedPost.tsx
+++ b/packages/mask/src/components/InjectedComponents/DecryptedPost/DecryptedPost.tsx
@@ -15,7 +15,7 @@ import { type PostContext, usePostInfoDetails, usePostInfo } from '@masknet/plug
 import { Some } from 'ts-results'
 
 function progressReducer(
-    state: { key: string; progress: SuccessDecryption | FailureDecryption | DecryptionProgress }[],
+    state: Array<{ key: string; progress: SuccessDecryption | FailureDecryption | DecryptionProgress }>,
     payload: {
         type: 'refresh'
         key: string
diff --git a/packages/mask/src/components/shared/AbstractTab.tsx b/packages/mask/src/components/shared/AbstractTab.tsx
index 6b6d5c8dbc73..3357f4f06564 100644
--- a/packages/mask/src/components/shared/AbstractTab.tsx
+++ b/packages/mask/src/components/shared/AbstractTab.tsx
@@ -23,11 +23,11 @@ interface TabPanelProps extends BoxProps {
 
 export interface AbstractTabProps
     extends withClasses<'tab' | 'tabs' | 'tabPanel' | 'indicator' | 'focusTab' | 'tabPaper' | 'flexContainer'> {
-    tabs: (Omit<TabPanelProps, 'height' | 'minHeight'> & {
+    tabs: Array<Omit<TabPanelProps, 'height' | 'minHeight'> & {
         cb?: () => void
         disableFocusRipple?: boolean
         disableRipple?: boolean
-    })[]
+    }>
     state?: readonly [number, (next: number) => void]
     index?: number
     disableFocusRipple?: boolean
diff --git a/packages/mask/src/database/helpers/pagination.ts b/packages/mask/src/database/helpers/pagination.ts
index 9d267b7a5ca3..ea6f4619e7c6 100644
--- a/packages/mask/src/database/helpers/pagination.ts
+++ b/packages/mask/src/database/helpers/pagination.ts
@@ -3,7 +3,7 @@ import type { IDBPSafeTransaction } from '../../../background/database/utils/ope
 
 export async function queryTransactionPaged<
     DBType extends DBSchema,
-    TxStores extends StoreNames<DBType>[],
+    TxStores extends Array<StoreNames<DBType>>,
     Mode extends 'readonly' | 'readwrite',
     RecordType extends IDBPCursorWithValueIteratorValue<DBType, TxStores, TxStores[0], unknown>['value'],
 >(
diff --git a/packages/mask/src/extension/background-script/EthereumServices/nonce.ts b/packages/mask/src/extension/background-script/EthereumServices/nonce.ts
index 4963d8a79965..54a828312be7 100644
--- a/packages/mask/src/extension/background-script/EthereumServices/nonce.ts
+++ b/packages/mask/src/extension/background-script/EthereumServices/nonce.ts
@@ -7,7 +7,7 @@ class NonceManager {
     constructor(private address: string) {}
     private nonce = NonceManager.INITIAL_NONCE
     private locked = false
-    private tasks: (() => void)[] = []
+    private tasks: Array<() => void> = []
 
     private lock() {
         this.locked = true
diff --git a/packages/mask/src/extension/background-script/EthereumServices/providers/WalletConnect.ts b/packages/mask/src/extension/background-script/EthereumServices/providers/WalletConnect.ts
index b5f1133b1544..14e20bc09ccb 100644
--- a/packages/mask/src/extension/background-script/EthereumServices/providers/WalletConnect.ts
+++ b/packages/mask/src/extension/background-script/EthereumServices/providers/WalletConnect.ts
@@ -92,10 +92,10 @@ const onConnect = () => onUpdate(null)
 const onUpdate = async (
     error: Error | null,
     payload?: {
-        params: {
+        params: Array<{
             chainId: number
             accounts: string[]
-        }[]
+        }>
     },
 ) => {
     if (error) return
diff --git a/packages/mask/src/extension/background-script/EthereumServices/rpc/abi.ts b/packages/mask/src/extension/background-script/EthereumServices/rpc/abi.ts
index 5460b661eaa2..0bf230349bc6 100644
--- a/packages/mask/src/extension/background-script/EthereumServices/rpc/abi.ts
+++ b/packages/mask/src/extension/background-script/EthereumServices/rpc/abi.ts
@@ -16,10 +16,10 @@ const coder = ABICoder as unknown as ABICoder.AbiCoder
 
 type InternalItem = {
     name: string
-    parameters: {
+    parameters: Array<{
         name: string
         type: string
-    }[]
+    }>
 }
 
 const ABI_MAP: Map<string, InternalItem> = new Map()
diff --git a/packages/mask/src/extension/popups/pages/Wallet/Transfer/Prior1559Transfer.tsx b/packages/mask/src/extension/popups/pages/Wallet/Transfer/Prior1559Transfer.tsx
index 1bfc6b0934a3..10ef1fda1fa4 100644
--- a/packages/mask/src/extension/popups/pages/Wallet/Transfer/Prior1559Transfer.tsx
+++ b/packages/mask/src/extension/popups/pages/Wallet/Transfer/Prior1559Transfer.tsx
@@ -146,7 +146,7 @@ const useStyles = makeStyles()({
 
 export interface Prior1559TransferProps {
     selectedAsset?: Asset
-    otherWallets: { name: string; address: string }[]
+    otherWallets: Array<{ name: string; address: string }>
     openAssetMenu: (anchorElOrEvent: HTMLElement | SyntheticEvent<HTMLElement>) => void
 }
 
diff --git a/packages/mask/src/extension/popups/pages/Wallet/Transfer/Transfer1559.tsx b/packages/mask/src/extension/popups/pages/Wallet/Transfer/Transfer1559.tsx
index 7cbfe4f51144..b250aa196786 100644
--- a/packages/mask/src/extension/popups/pages/Wallet/Transfer/Transfer1559.tsx
+++ b/packages/mask/src/extension/popups/pages/Wallet/Transfer/Transfer1559.tsx
@@ -176,7 +176,7 @@ const useStyles = makeStyles()({
 const MIN_GAS_LIMIT = 21000
 export interface Transfer1559Props {
     selectedAsset?: Asset
-    otherWallets: { name: string; address: string }[]
+    otherWallets: Array<{ name: string; address: string }>
     openAssetMenu: (anchorElOrEvent: HTMLElement | SyntheticEvent<HTMLElement>) => void
 }
 
diff --git a/packages/mask/src/extension/popups/pages/Wallet/components/DeriveWalletTable/index.tsx b/packages/mask/src/extension/popups/pages/Wallet/components/DeriveWalletTable/index.tsx
index c5fd78aead04..0c625ce957aa 100644
--- a/packages/mask/src/extension/popups/pages/Wallet/components/DeriveWalletTable/index.tsx
+++ b/packages/mask/src/extension/popups/pages/Wallet/components/DeriveWalletTable/index.tsx
@@ -41,7 +41,7 @@ const useStyles = makeStyles()({
 
 export interface DeriveWalletTableProps {
     loading: boolean
-    dataSource?: { address: string; added: boolean; selected: boolean }[]
+    dataSource?: Array<{ address: string; added: boolean; selected: boolean }>
     onCheck: (checked: boolean, index: number) => void
     confirmLoading: boolean
 }
diff --git a/packages/mask/src/plugins/Collectible/types/opensea.ts b/packages/mask/src/plugins/Collectible/types/opensea.ts
index 98bbd2557b12..929bccf9b03d 100644
--- a/packages/mask/src/plugins/Collectible/types/opensea.ts
+++ b/packages/mask/src/plugins/Collectible/types/opensea.ts
@@ -216,10 +216,10 @@ export interface OpenSeaResponse extends Asset {
     background_color: string | null
     transfer_fee: string | null
     transfer_fee_payment_token: OpenSeaFungibleToken | null
-    top_ownerships: {
+    top_ownerships: Array<{
         owner: OpenSeaCustomAccount
         quantity: string
-    }[]
+    }>
     creator: OpenSeaCustomAccount
     endTime: string
 }
diff --git a/packages/mask/src/plugins/Collectible/types/rarible.ts b/packages/mask/src/plugins/Collectible/types/rarible.ts
index 28387ada41c6..772dc83e6877 100644
--- a/packages/mask/src/plugins/Collectible/types/rarible.ts
+++ b/packages/mask/src/plugins/Collectible/types/rarible.ts
@@ -60,10 +60,10 @@ export interface Creator {
 export interface Meta {
     name: string
     description: string
-    attributes: {
+    attributes: Array<{
         key: string
         value: string
-    }[]
+    }>
     image: {
         meta: {
             PREVIEW: {
diff --git a/packages/mask/src/plugins/EVM/UI/Web3State/getAssetsFn.ts b/packages/mask/src/plugins/EVM/UI/Web3State/getAssetsFn.ts
index 0b11a8f2617e..31feb1eb43ff 100644
--- a/packages/mask/src/plugins/EVM/UI/Web3State/getAssetsFn.ts
+++ b/packages/mask/src/plugins/EVM/UI/Web3State/getAssetsFn.ts
@@ -136,13 +136,13 @@ export const getFungibleAssetsFn =
 
         const tokenUnavailableFromDebankResults = (await Promise.allSettled(allRequest))
             .map((x) => (x.status === 'fulfilled' ? x.value : null))
-            .filter((x) => Boolean(x)) as {
+            .filter((x) => Boolean(x)) as Array<{
             chainId: ChainId
             balance: string
             price: PriceRecord
-        }[]
+        }>
 
-        const nativeTokens: Web3Plugin.Asset<Web3Plugin.FungibleToken>[] = networks
+        const nativeTokens: Array<Web3Plugin.Asset<Web3Plugin.FungibleToken>> = networks
             .filter(
                 (t) =>
                     t.isMainnet &&
diff --git a/packages/mask/src/plugins/FindTruman/SNSAdaptor/ConstPromise.ts b/packages/mask/src/plugins/FindTruman/SNSAdaptor/ConstPromise.ts
index 0d303203dda1..1c654cd8ab02 100644
--- a/packages/mask/src/plugins/FindTruman/SNSAdaptor/ConstPromise.ts
+++ b/packages/mask/src/plugins/FindTruman/SNSAdaptor/ConstPromise.ts
@@ -20,8 +20,8 @@ export default class FindTrumanConstPromise {
     value?: FindTrumanConst
     err?: any
 
-    successCallback: ((value?: FindTrumanConst) => void)[] = []
-    failCallback: ((err: any) => void)[] = []
+    successCallback: Array<(value?: FindTrumanConst) => void> = []
+    failCallback: Array<(err: any) => void> = []
 
     resolve = (value: FindTrumanConst) => {
         if (this.status !== Status.PENDING) return
diff --git a/packages/mask/src/plugins/FindTruman/types.ts b/packages/mask/src/plugins/FindTruman/types.ts
index 349cd201ae53..92ead19e5538 100644
--- a/packages/mask/src/plugins/FindTruman/types.ts
+++ b/packages/mask/src/plugins/FindTruman/types.ts
@@ -235,7 +235,7 @@ export interface SubmitPollParams {
 export interface SubmitCompletionParams {
     timestamp: number
     quesId: string
-    answers: { id: string; answer: string }[]
+    answers: Array<{ id: string; answer: string }>
 }
 
 export enum ClueConditionType {
diff --git a/packages/mask/src/plugins/Gitcoin/hooks/useDonateCallback.ts b/packages/mask/src/plugins/Gitcoin/hooks/useDonateCallback.ts
index 66e006227cc1..c85572035151 100644
--- a/packages/mask/src/plugins/Gitcoin/hooks/useDonateCallback.ts
+++ b/packages/mask/src/plugins/Gitcoin/hooks/useDonateCallback.ts
@@ -24,7 +24,7 @@ export function useDonateCallback(address: string, amount: string, token?: Fungi
 
     const account = useAccount()
 
-    const donations = useMemo((): [string, string, string][] => {
+    const donations = useMemo((): Array<[string, string, string]> => {
         if (!address || !token) return []
         if (!GITCOIN_ETH_ADDRESS || !GITCOIN_TIP_PERCENTAGE) return []
         const tipAmount = new BigNumber(GITCOIN_TIP_PERCENTAGE / 100).multipliedBy(amount)
diff --git a/packages/mask/src/plugins/ITO/SNSAdaptor/NftAirdropCard.tsx b/packages/mask/src/plugins/ITO/SNSAdaptor/NftAirdropCard.tsx
index f4eaba6d32be..0b480f32d41d 100644
--- a/packages/mask/src/plugins/ITO/SNSAdaptor/NftAirdropCard.tsx
+++ b/packages/mask/src/plugins/ITO/SNSAdaptor/NftAirdropCard.tsx
@@ -153,13 +153,13 @@ const useStyles = makeStyles()((theme) => ({
 }))
 
 interface NftAirdropCardProps {
-    campaignInfos: {
+    campaignInfos: Array<{
         campaignInfo: CampaignInfo
         claimableInfo: {
             claimable: boolean
             claimed: boolean
         }
-    }[]
+    }>
     loading: boolean
     retry: () => void
 }
diff --git a/packages/mask/src/plugins/ITO/SNSAdaptor/hooks/useFill.ts b/packages/mask/src/plugins/ITO/SNSAdaptor/hooks/useFill.ts
index 5f739678c5bc..e65395a050c6 100644
--- a/packages/mask/src/plugins/ITO/SNSAdaptor/hooks/useFill.ts
+++ b/packages/mask/src/plugins/ITO/SNSAdaptor/hooks/useFill.ts
@@ -49,7 +49,7 @@ type paramsObjType = {
     total: string
     limit: string
     qualificationAddress: string
-    exchangeAmountsDivided: (readonly [BigNumber, BigNumber])[]
+    exchangeAmountsDivided: Array<readonly [BigNumber, BigNumber]>
     now: number
     invalidTokenAt: number
     exchangeAmounts: string[]
diff --git a/packages/mask/src/plugins/ITO/SNSAdaptor/hooks/useRegion.ts b/packages/mask/src/plugins/ITO/SNSAdaptor/hooks/useRegion.ts
index e283feedbd78..04de368b83af 100644
--- a/packages/mask/src/plugins/ITO/SNSAdaptor/hooks/useRegion.ts
+++ b/packages/mask/src/plugins/ITO/SNSAdaptor/hooks/useRegion.ts
@@ -300,9 +300,9 @@ export function useIPRegion(): AsyncStateRetry<Region> {
     return useAsyncRetry(IPGeoResolver)
 }
 
-export function useRegionList(): Array<Region> {
+export function useRegionList(): Region[] {
     // TODO return name by i18n
-    return regions as Array<Region>
+    return regions as Region[]
 }
 
 export function useRegionSelect(initRegionCodes?: RegionCode[]) {
diff --git a/packages/mask/src/plugins/ITO/Worker/apis/spaceStationGalaxy.ts b/packages/mask/src/plugins/ITO/Worker/apis/spaceStationGalaxy.ts
index 9a3cc8b4a9c6..9380fb990c71 100644
--- a/packages/mask/src/plugins/ITO/Worker/apis/spaceStationGalaxy.ts
+++ b/packages/mask/src/plugins/ITO/Worker/apis/spaceStationGalaxy.ts
@@ -58,7 +58,7 @@ export async function getCampaignInfo(id: number): Promise<CampaignInfo> {
             endTime: number
             startTime: number
             gamification: {
-                nfts: { nft: { image: string } }[]
+                nfts: Array<{ nft: { image: string } }>
             }
         }
     }>(`
diff --git a/packages/mask/src/plugins/ITO/Worker/apis/subgraph.ts b/packages/mask/src/plugins/ITO/Worker/apis/subgraph.ts
index 4f6ab889688c..9cba129fa129 100644
--- a/packages/mask/src/plugins/ITO/Worker/apis/subgraph.ts
+++ b/packages/mask/src/plugins/ITO/Worker/apis/subgraph.ts
@@ -68,7 +68,7 @@ async function fetchFromMarketSubgraph<T>(query: string, chainId?: ChainId) {
 
 export async function getTradeInfo(pid: string, trader: string) {
     const data = await fetchFromMarketSubgraph<{
-        buyInfos: {
+        buyInfos: Array<{
             buyer: {
                 address: string
                 name: string
@@ -77,23 +77,23 @@ export async function getTradeInfo(pid: string, trader: string) {
             amount: string
             amount_sold: string
             amount_bought: string
-        }[]
-        sellInfos: {
+        }>
+        sellInfos: Array<{
             buyer: {
                 address: string
                 name: string
             }
             token: JSON_PayloadOutMask['token']
             amount: string
-        }[]
-        destructInfos: {
+        }>
+        destructInfos: Array<{
             buyer: {
                 address: string
                 name: string
             }
             token: JSON_PayloadOutMask['token']
             amount: string
-        }[]
+        }>
     }>(`
     {
         buyInfos (where: { pool: "${pid.toLowerCase()}", buyer: "${trader.toLowerCase()}" }) {
@@ -147,12 +147,12 @@ export async function getPool(pid: string) {
 
 export async function getAllPoolsAsSeller(address: string, page: number, chainId: ChainId) {
     const data = await fetchFromMarketSubgraph<{
-        sellInfos: {
+        sellInfos: Array<{
             pool: JSON_PayloadOutMask & {
                 exchange_in_volumes: string[]
                 exchange_out_volumes: string[]
             }
-        }[]
+        }>
     }>(
         `
     {
@@ -183,12 +183,12 @@ export async function getAllPoolsAsSeller(address: string, page: number, chainId
 
 export async function getAllPoolsAsBuyer(address: string, chainId: ChainId) {
     const data = await fetchFromMarketSubgraph<{
-        buyInfos: {
+        buyInfos: Array<{
             pool: JSON_PayloadOutMask & {
                 exchange_in_volumes: string[]
                 exchange_out_volumes: string[]
             }
-        }[]
+        }>
     }>(
         `
     {
diff --git a/packages/mask/src/plugins/ITO/types.ts b/packages/mask/src/plugins/ITO/types.ts
index abe216b9556f..7e7649c54dae 100644
--- a/packages/mask/src/plugins/ITO/types.ts
+++ b/packages/mask/src/plugins/ITO/types.ts
@@ -57,7 +57,7 @@ export interface JSON_PayloadOutMask extends Omit<JSON_PayloadInMask, 'token' |
 
 export interface JSON_PayloadComposeMask extends Omit<JSON_PayloadInMask, 'token' | 'exchange_tokens'> {
     token: string
-    exchange_tokens: { address: string }[]
+    exchange_tokens: Array<{ address: string }>
 }
 
 export enum ITO_Status {
@@ -113,7 +113,7 @@ export interface CampaignInfo {
     chain: string
     endTime: number
     startTime: number
-    nfts: { image: string }[]
+    nfts: Array<{ image: string }>
 }
 
 export interface ClaimParams {
diff --git a/packages/mask/src/plugins/MaskBox/type.ts b/packages/mask/src/plugins/MaskBox/type.ts
index ac12d96c65a3..063518d7aac7 100644
--- a/packages/mask/src/plugins/MaskBox/type.ts
+++ b/packages/mask/src/plugins/MaskBox/type.ts
@@ -76,8 +76,8 @@ export interface BoxMetadata {
     name: string
     mediaType: MediaType
     mediaUrl: string
-    activities: {
+    activities: Array<{
         title: string
         body: string
-    }[]
+    }>
 }
diff --git a/packages/mask/src/plugins/RedPacket/Worker/apis/erc20Redpacket.ts b/packages/mask/src/plugins/RedPacket/Worker/apis/erc20Redpacket.ts
index c3a96cc598f8..33d07a7d27e7 100644
--- a/packages/mask/src/plugins/RedPacket/Worker/apis/erc20Redpacket.ts
+++ b/packages/mask/src/plugins/RedPacket/Worker/apis/erc20Redpacket.ts
@@ -57,7 +57,7 @@ const RED_PACKET_FIELDS = `
 
 type RedpacketFromSubgraphType = {
     chain_id: ChainId
-    claimers: { name: string; address: string }[]
+    claimers: Array<{ name: string; address: string }>
     contract_address: string
     contract_version: number
     block_number: number
diff --git a/packages/mask/src/plugins/RedPacket/types.ts b/packages/mask/src/plugins/RedPacket/types.ts
index 824649e80d42..4d94b4e98a59 100644
--- a/packages/mask/src/plugins/RedPacket/types.ts
+++ b/packages/mask/src/plugins/RedPacket/types.ts
@@ -62,7 +62,7 @@ export interface RedPacketJSONPayload extends RedPacketBasic {
     token_type?: EthereumTokenType.Native | EthereumTokenType.ERC20
     token?: FungibleTokenDetailed
     token_address?: string
-    claimers?: { address: string; name: string }[]
+    claimers?: Array<{ address: string; name: string }>
     total_remaining?: string
 }
 
@@ -126,10 +126,10 @@ export interface NftRedPacketSubgraphInMask extends Omit<RedPacketBasic, 'is_ran
     chain_id: number
     message: string
     token_ids: string[]
-    claimers: {
+    claimers: Array<{
         name: string
         address: string
-    }[]
+    }>
     creator: {
         name: string
         address: string
diff --git a/packages/mask/src/plugins/Savings/constants.ts b/packages/mask/src/plugins/Savings/constants.ts
index 4f800312198b..83f06963c5e3 100644
--- a/packages/mask/src/plugins/Savings/constants.ts
+++ b/packages/mask/src/plugins/Savings/constants.ts
@@ -3,14 +3,14 @@ import { ChainId, createERC20Tokens, createNativeToken, FungibleTokenDetailed }
 export const SAVINGS_PLUGIN_NAME = 'Savings'
 export const SAVINGS_PLUGIN_ID = 'com.savings'
 
-export const LDO_PAIRS: [FungibleTokenDetailed, FungibleTokenDetailed][] = [
+export const LDO_PAIRS: Array<[FungibleTokenDetailed, FungibleTokenDetailed]> = [
     [
         createNativeToken(ChainId.Mainnet),
         createERC20Tokens('LDO_stETH_ADDRESS', 'Liquid staked Ether 2.0', 'stETH', 18)[ChainId.Mainnet],
     ],
 ]
 
-export const AAVE_PAIRS: [FungibleTokenDetailed, FungibleTokenDetailed][] = [
+export const AAVE_PAIRS: Array<[FungibleTokenDetailed, FungibleTokenDetailed]> = [
     [
         createERC20Tokens('USDT_ADDRESS', 'Tether USD', 'USDT', 6)[ChainId.Mainnet],
         createERC20Tokens('aUSDT_ADDRESS', 'Aave Interest bearing USDT', 'aUSDT', 6)[ChainId.Mainnet],
diff --git a/packages/mask/src/plugins/Savings/protocols/AAVEProtocol.ts b/packages/mask/src/plugins/Savings/protocols/AAVEProtocol.ts
index 2c684f3d64e9..9290417d100f 100644
--- a/packages/mask/src/plugins/Savings/protocols/AAVEProtocol.ts
+++ b/packages/mask/src/plugins/Savings/protocols/AAVEProtocol.ts
@@ -78,13 +78,13 @@ export class AAVEProtocol implements SavingsProtocol {
             })
             const fullResponse: {
                 data: {
-                    reserves: {
+                    reserves: Array<{
                         id: string
                         name: string
                         decimals: number
                         underlyingAsset: string
                         liquidityRate: number
-                    }[]
+                    }>
                 }
             } = await response.json()
             const liquidityRate = +fullResponse.data.reserves[0].liquidityRate
@@ -129,11 +129,11 @@ export class AAVEProtocol implements SavingsProtocol {
 
             const fullResponse: {
                 data: {
-                    reserves: {
+                    reserves: Array<{
                         aToken: {
                             id: string
                         }
-                    }[]
+                    }>
                 }
             } = await response.json()
 
diff --git a/packages/mask/src/plugins/Snapshot/Worker/apis/index.ts b/packages/mask/src/plugins/Snapshot/Worker/apis/index.ts
index 64411842eb66..5f266290aedf 100644
--- a/packages/mask/src/plugins/Snapshot/Worker/apis/index.ts
+++ b/packages/mask/src/plugins/Snapshot/Worker/apis/index.ts
@@ -113,7 +113,7 @@ export async function getScores(
     space: string,
     strategies: Strategy[],
 ) {
-    const scores: { [key in string]: number }[] = await ss.utils.getScores(
+    const scores: Array<{ [key in string]: number }> = await ss.utils.getScores(
         space,
         strategies,
         network,
diff --git a/packages/mask/src/plugins/Snapshot/types.ts b/packages/mask/src/plugins/Snapshot/types.ts
index 5959e80fad7d..d57fded9f0a8 100644
--- a/packages/mask/src/plugins/Snapshot/types.ts
+++ b/packages/mask/src/plugins/Snapshot/types.ts
@@ -89,11 +89,11 @@ export interface VoteItem {
     choice: string | undefined
     totalWeight: number | undefined
     choices:
-        | {
+        | Array<{
               index: number
               weight: number
               name: string
-          }[]
+          }>
         | undefined
     address: string
     authorIpfsHash: string
@@ -115,10 +115,10 @@ export type VoteItemList = {
 
 export interface ProposalResult {
     choice: string
-    powerDetail: {
+    powerDetail: Array<{
         power: number
         name: string
-    }[]
+    }>
     power: number
     percentage: number
 }
diff --git a/packages/mask/src/plugins/Trader/SNSAdaptor/trending/CoinMetadataTable.tsx b/packages/mask/src/plugins/Trader/SNSAdaptor/trending/CoinMetadataTable.tsx
index 7e77157fcb48..5193d749fe21 100644
--- a/packages/mask/src/plugins/Trader/SNSAdaptor/trending/CoinMetadataTable.tsx
+++ b/packages/mask/src/plugins/Trader/SNSAdaptor/trending/CoinMetadataTable.tsx
@@ -63,7 +63,7 @@ export function CoinMetadataTable(props: CoinMetadataTableProps) {
         ['Tech Docs', trending.coin.tech_docs_urls],
         ['Source Code', trending.coin.source_code_urls],
         ['Community', trending.coin.community_urls],
-    ] as [string, string[] | undefined][]
+    ] as Array<[string, string[] | undefined]>
 
     return (
         <TableContainer className={classes.container} component={Paper} elevation={0}>
diff --git a/packages/mask/src/plugins/Trader/SNSAdaptor/trending/LBPPriceChart.tsx b/packages/mask/src/plugins/Trader/SNSAdaptor/trending/LBPPriceChart.tsx
index 20f7dca725ae..baae9010c044 100644
--- a/packages/mask/src/plugins/Trader/SNSAdaptor/trending/LBPPriceChart.tsx
+++ b/packages/mask/src/plugins/Trader/SNSAdaptor/trending/LBPPriceChart.tsx
@@ -15,7 +15,7 @@ const DEFAULT_DIMENSION: Dimension = {
 }
 
 export interface PriceChartProps extends withClasses<'root'> {
-    data: { date: Date; value: number }[]
+    data: Array<{ date: Date; value: number }>
     width?: number
     height?: number
     currency: Currency
diff --git a/packages/mask/src/plugins/Trader/SNSAdaptor/trending/PriceChangedTable.tsx b/packages/mask/src/plugins/Trader/SNSAdaptor/trending/PriceChangedTable.tsx
index 21e3693aae00..77b758e5c011 100644
--- a/packages/mask/src/plugins/Trader/SNSAdaptor/trending/PriceChangedTable.tsx
+++ b/packages/mask/src/plugins/Trader/SNSAdaptor/trending/PriceChangedTable.tsx
@@ -56,7 +56,7 @@ export function PriceChangedTable({ market }: PriceChangedTableProps) {
         },
     ]
 
-    const filteredRecords = records.filter((record) => typeof record.percentage === 'number') as Required<Record>[]
+    const filteredRecords = records.filter((record) => typeof record.percentage === 'number') as Array<Required<Record>>
 
     return (
         <TableContainer className={classes.container}>
diff --git a/packages/mask/src/plugins/Trader/apis/LBP/index.ts b/packages/mask/src/plugins/Trader/apis/LBP/index.ts
index 6f9e848c3aa2..5f3aa16d4f09 100644
--- a/packages/mask/src/plugins/Trader/apis/LBP/index.ts
+++ b/packages/mask/src/plugins/Trader/apis/LBP/index.ts
@@ -18,10 +18,10 @@ async function fetchFromBalancerPoolSubgraph<T>(query: string) {
 
 export async function fetchLBP_PoolsByTokenAddress(address: string) {
     const data = await fetchFromBalancerPoolSubgraph<{
-        pools: {
+        pools: Array<{
             id: string
             createTime: number
-        }[]
+        }>
     }>(`
     {
         pools(
@@ -53,7 +53,7 @@ export async function fetchLBP_PoolTokenPrices(poolId: string, address: string,
         }
     `,
     )
-    const data = await fetchFromBalancerPoolSubgraph<Record<string, { price: string }[]>>(`
+    const data = await fetchFromBalancerPoolSubgraph<Record<string, Array<{ price: string }>>>(`
         query tokenPrices {
             ${queries.join('\n')}
         }
diff --git a/packages/mask/src/plugins/Trader/apis/coingecko/index.ts b/packages/mask/src/plugins/Trader/apis/coingecko/index.ts
index 9c73bf402fee..a0735a045a5e 100644
--- a/packages/mask/src/plugins/Trader/apis/coingecko/index.ts
+++ b/packages/mask/src/plugins/Trader/apis/coingecko/index.ts
@@ -77,7 +77,7 @@ export interface CoinInfo {
     platforms: Record<string, string>
     name: string
     symbol: string
-    tickers: {
+    tickers: Array<{
         base: string
         target: string
         market: {
@@ -108,7 +108,7 @@ export interface CoinInfo {
         trade_url: string
         coin_id: string
         target_coin_id?: string
-    }[]
+    }>
 }
 
 export async function getCoinInfo(coinId: string) {
diff --git a/packages/mask/src/plugins/Trader/apis/uniswap-health/index.ts b/packages/mask/src/plugins/Trader/apis/uniswap-health/index.ts
index 959e6798fd54..a59243a21705 100644
--- a/packages/mask/src/plugins/Trader/apis/uniswap-health/index.ts
+++ b/packages/mask/src/plugins/Trader/apis/uniswap-health/index.ts
@@ -20,14 +20,14 @@ export async function fetchLatestBlocks() {
     type status = {
         synced: string
         health: string
-        chains: {
+        chains: Array<{
             chainHeadBlock: {
                 number: number
             }
             latestBlock: {
                 number: number
             }
-        }[]
+        }>
     }
     const response = await fetchFromUniswapV2Health<{
         indexingStatusForCurrentVersion: status
diff --git a/packages/mask/src/plugins/Trader/apis/uniswap-v2-subgraph/index.ts b/packages/mask/src/plugins/Trader/apis/uniswap-v2-subgraph/index.ts
index dd59d68420f9..b70283cbc0ff 100644
--- a/packages/mask/src/plugins/Trader/apis/uniswap-v2-subgraph/index.ts
+++ b/packages/mask/src/plugins/Trader/apis/uniswap-v2-subgraph/index.ts
@@ -182,7 +182,7 @@ export async function fetchTokenDayData(address: string, date: Date) {
     const utcTimestamp = Date.UTC(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate())
     const data = await fetchFromUniswapV2Subgraph<{
         data: {
-            tokenDayData: {
+            tokenDayData: Array<{
                 id: string
                 date: number
                 priceUSD: string
@@ -192,7 +192,7 @@ export async function fetchTokenDayData(address: string, date: Date) {
                 dailyVolumeETH: number
                 dailyVolumeToken: number
                 dailyVolumeUSD: number
-            }[]
+            }>
         }
     }>(`
         {
@@ -317,7 +317,7 @@ export async function fetchPairData(pairAddress: string, blockNumber?: string) {
  */
 export async function fetchPricesByBlocks(
     tokenAddress: string,
-    blocks: { blockNumber?: string; timestamp: number }[],
+    blocks: Array<{ blockNumber?: string; timestamp: number }>,
     skipCount = 50,
 ) {
     // avoiding request entity too large
diff --git a/packages/mask/src/plugins/Trader/graphs/usePriceLineChart.ts b/packages/mask/src/plugins/Trader/graphs/usePriceLineChart.ts
index e6a8cd169539..59296bedbfde 100644
--- a/packages/mask/src/plugins/Trader/graphs/usePriceLineChart.ts
+++ b/packages/mask/src/plugins/Trader/graphs/usePriceLineChart.ts
@@ -5,7 +5,7 @@ import type { Dimension } from './useDimension'
 
 export function usePriceLineChart(
     svgRef: RefObject<SVGSVGElement>,
-    data: { date: Date; value: number }[],
+    data: Array<{ date: Date; value: number }>,
     dimension: Dimension,
     id: string,
     color = 'steelblue',
diff --git a/packages/mask/src/plugins/Trader/trader/uniswap/useAllCommonPairs.ts b/packages/mask/src/plugins/Trader/trader/uniswap/useAllCommonPairs.ts
index 04220f26f898..ac7928175153 100644
--- a/packages/mask/src/plugins/Trader/trader/uniswap/useAllCommonPairs.ts
+++ b/packages/mask/src/plugins/Trader/trader/uniswap/useAllCommonPairs.ts
@@ -24,8 +24,8 @@ export function useAllCurrencyCombinations(tradeProvider: TradeProvider, currenc
         return [...common, ...additionalA, ...additionalB].map((x) => toUniswapToken(chainId, x))
     }, [chainId, chainIdValid, tokenA?.address, tokenB?.address])
 
-    const basePairs: [Token, Token][] = useMemo(
-        () => flatMap(bases, (base): [Token, Token][] => bases.map((otherBase) => [base, otherBase])),
+    const basePairs: Array<[Token, Token]> = useMemo(
+        () => flatMap(bases, (base): Array<[Token, Token]> => bases.map((otherBase) => [base, otherBase])),
         [bases],
     )
 
@@ -73,7 +73,7 @@ export function useAllCommonPairs(tradeProvider: TradeProvider, currencyA?: Curr
     // only pass along valid pairs, non-duplicated pairs
     const allPairs_ = useMemo(() => {
         const filtered = new Map<string, Pair>()
-        for (const [state, pair] of allPairs as [PairState.EXISTS, Pair][]) {
+        for (const [state, pair] of allPairs as Array<[PairState.EXISTS, Pair]>) {
             // filter out invalid pairs
             if (state !== PairState.EXISTS) continue
             if (!pair) continue
diff --git a/packages/mask/src/plugins/Trader/trader/uniswap/useAllV3Routes.ts b/packages/mask/src/plugins/Trader/trader/uniswap/useAllV3Routes.ts
index b0d496ab37c2..6d2dff736c20 100644
--- a/packages/mask/src/plugins/Trader/trader/uniswap/useAllV3Routes.ts
+++ b/packages/mask/src/plugins/Trader/trader/uniswap/useAllV3Routes.ts
@@ -11,10 +11,10 @@ function computeAllRoutes(
     pools: Pool[],
     chainId: number,
     currentPath: Pool[] = [],
-    allPaths: Route<Currency, Currency>[] = [],
+    allPaths: Array<Route<Currency, Currency>> = [],
     startCurrencyIn: Currency = currencyIn,
     maxHops = 2,
-): Route<Currency, Currency>[] {
+): Array<Route<Currency, Currency>> {
     const tokenIn = currencyIn?.wrapped
     const tokenOut = currencyOut?.wrapped
     if (!tokenIn || !tokenOut) throw new Error('Missing tokenIn/tokenOut')
@@ -54,7 +54,7 @@ function computeAllRoutes(
 export function useAllV3Routes(
     currencyIn?: Currency,
     currencyOut?: Currency,
-): { loading: boolean; routes: Route<Currency, Currency>[] } {
+): { loading: boolean; routes: Array<Route<Currency, Currency>> } {
     const { targetChainId: chainId } = TargetChainIdContext.useContainer()
     const { pools, loading: poolsLoading } = useV3SwapPools(currencyIn, currencyOut)
     const singleHopOnly = useSingleHopOnly()
diff --git a/packages/mask/src/plugins/Trader/trader/uniswap/usePools.ts b/packages/mask/src/plugins/Trader/trader/uniswap/usePools.ts
index 79640191d3db..5614c9170847 100644
--- a/packages/mask/src/plugins/Trader/trader/uniswap/usePools.ts
+++ b/packages/mask/src/plugins/Trader/trader/uniswap/usePools.ts
@@ -19,12 +19,12 @@ export enum PoolState {
 
 export function usePools(
     tradeProvider: TradeProvider,
-    poolKeys: [Currency | undefined, Currency | undefined, FeeAmount | undefined][],
-): [PoolState, Pool | null][] {
+    poolKeys: Array<[Currency | undefined, Currency | undefined, FeeAmount | undefined]>,
+): Array<[PoolState, Pool | null]> {
     const { targetChainId: chainId } = TargetChainIdContext.useContainer()
     const context = useGetTradeContext(tradeProvider)
 
-    const transformed: ([Token, Token, FeeAmount] | null)[] = useMemo(() => {
+    const transformed: Array<[Token, Token, FeeAmount] | null> = useMemo(() => {
         return poolKeys.map(([currencyA, currencyB, feeAmount]) => {
             if (!chainId || !currencyA || !currencyB || !feeAmount) return null
 
@@ -111,7 +111,7 @@ export function usePool(
     currencyB: Currency | undefined,
     feeAmount: FeeAmount | undefined,
 ): [PoolState, Pool | null] {
-    const poolKeys: [Currency | undefined, Currency | undefined, FeeAmount | undefined][] = useMemo(
+    const poolKeys: Array<[Currency | undefined, Currency | undefined, FeeAmount | undefined]> = useMemo(
         () => [[currencyA, currencyB, feeAmount]],
         [currencyA, currencyB, feeAmount],
     )
diff --git a/packages/mask/src/plugins/Trader/trader/uniswap/useV3SwapPools.ts b/packages/mask/src/plugins/Trader/trader/uniswap/useV3SwapPools.ts
index 4e8d6591b71a..059f68186f7b 100644
--- a/packages/mask/src/plugins/Trader/trader/uniswap/useV3SwapPools.ts
+++ b/packages/mask/src/plugins/Trader/trader/uniswap/useV3SwapPools.ts
@@ -19,7 +19,7 @@ export function useV3SwapPools(
 } {
     const allCurrencyCombinations = useAllCurrencyCombinations(TradeProvider.UNISWAP_V3, currencyIn, currencyOut)
 
-    const allCurrencyCombinationsWithAllFees: [Token, Token, FeeAmount][] = useMemo(
+    const allCurrencyCombinationsWithAllFees: Array<[Token, Token, FeeAmount]> = useMemo(
         () =>
             allCurrencyCombinations.flatMap<[Token, Token, FeeAmount]>(([tokenA, tokenB]) => [
                 [tokenA, tokenB, FeeAmount.LOW],
diff --git a/packages/mask/src/plugins/Trader/trending/useCurrentCurrency.ts b/packages/mask/src/plugins/Trader/trending/useCurrentCurrency.ts
index bfa644cd3812..c71eef46e687 100644
--- a/packages/mask/src/plugins/Trader/trending/useCurrentCurrency.ts
+++ b/packages/mask/src/plugins/Trader/trending/useCurrentCurrency.ts
@@ -3,12 +3,12 @@ import { DataProvider } from '@masknet/public-api'
 const CURRENCIES_MAP: Record<
     DataProvider,
     | undefined
-    | {
+    | Array<{
           id: string
           name: string
           symbol: string
           description: string
-      }[]
+      }>
 > = {
     [DataProvider.COIN_GECKO]: [
         {
diff --git a/packages/mask/src/plugins/Trader/types/0x.ts b/packages/mask/src/plugins/Trader/types/0x.ts
index 5d7ad2e8c5f6..5175a9d86ed0 100644
--- a/packages/mask/src/plugins/Trader/types/0x.ts
+++ b/packages/mask/src/plugins/Trader/types/0x.ts
@@ -76,11 +76,11 @@ export interface SwapQuoteResponse {
 export interface SwapValidationErrorResponse {
     code: number
     reason: string
-    validationErrors: {
+    validationErrors: Array<{
         code: number
         field: string
         reason: string
-    }[]
+    }>
 }
 
 export interface SwapServerErrorResponse {
diff --git a/packages/mask/src/plugins/Trader/types/trader.ts b/packages/mask/src/plugins/Trader/types/trader.ts
index 956f1a8fc0f7..62ed8d28b0ff 100644
--- a/packages/mask/src/plugins/Trader/types/trader.ts
+++ b/packages/mask/src/plugins/Trader/types/trader.ts
@@ -92,7 +92,7 @@ export interface TradeComputed<T = unknown> {
     maximumSold: BigNumber
     minimumReceived: BigNumber
     fee: BigNumber
-    path?: (PartialRequired<NativeTokenDetailed, 'address'> | PartialRequired<ERC20TokenDetailed, 'address'>)[][]
+    path?: Array<Array<PartialRequired<NativeTokenDetailed, 'address'> | PartialRequired<ERC20TokenDetailed, 'address'>>>
     trade_?: T
 }
 
diff --git a/packages/mask/src/plugins/UnlockProtocol/Services.ts b/packages/mask/src/plugins/UnlockProtocol/Services.ts
index f18ca77677b2..5a3329a0095d 100644
--- a/packages/mask/src/plugins/UnlockProtocol/Services.ts
+++ b/packages/mask/src/plugins/UnlockProtocol/Services.ts
@@ -10,15 +10,15 @@ for (const [key, url] of Object.entries(graphEndpointKeyVal)) {
 }
 
 export interface verifyHolderResponse {
-    keyHolders: {
-        keys: {
+    keyHolders: Array<{
+        keys: Array<{
             expiration: number
             keyId: string
             lock: {
                 address: string
             }
-        }[]
-    }[]
+        }>
+    }>
 }
 
 const verifyHolder = async <verifyHolderResponse>(_lockAddress: string, _holder: string, _chain: number) => {
diff --git a/packages/mask/src/plugins/Wallet/apis/ens.ts b/packages/mask/src/plugins/Wallet/apis/ens.ts
index a422c0cdb61a..48ec09c400c9 100644
--- a/packages/mask/src/plugins/Wallet/apis/ens.ts
+++ b/packages/mask/src/plugins/Wallet/apis/ens.ts
@@ -17,10 +17,10 @@ export async function fetchAddressNamesByTwitterId(twitterId: string) {
     if (!twitterId) return []
     const data = await fetchFromENSTextResolverSubgraph<{
         twitterHandle?: {
-            domains: {
+            domains: Array<{
                 id: string
                 owner: string
-            }[]
+            }>
         }
     }>(`
         query twitterHandle {
diff --git a/packages/mask/src/plugins/Wallet/services/wallet/index.ts b/packages/mask/src/plugins/Wallet/services/wallet/index.ts
index 29ef45a18c76..62893f8f752e 100644
--- a/packages/mask/src/plugins/Wallet/services/wallet/index.ts
+++ b/packages/mask/src/plugins/Wallet/services/wallet/index.ts
@@ -51,11 +51,11 @@ export async function getWallet(address?: string) {
 }
 
 export async function getWallets(providerType?: ProviderType): Promise<
-    (Omit<WalletRecord, 'type'> & {
+    Array<Omit<WalletRecord, 'type'> & {
         configurable: boolean
         hasStoredKeyInfo: boolean
         hasDerivationPath: boolean
-    })[]
+    }>
 > {
     if (hasNativeAPI) {
         if (providerType && providerType !== ProviderType.MaskWallet) return []
@@ -112,11 +112,11 @@ export async function getDerivableAccounts(mnemonic: string, page: number, pageS
     })
     if (!imported?.StoredKey) throw new Error('Failed to import the wallet.')
 
-    const accounts: {
+    const accounts: Array<{
         index: number
         address: string
         derivationPath: string
-    }[] = []
+    }> = []
 
     for (let i = pageSize * page; i < pageSize * (page + 1); i += 1) {
         const derivationPath = `${HD_PATH_WITHOUT_INDEX_ETHEREUM}/${i}`
diff --git a/packages/mask/src/plugins/hooks/useLineChart.ts b/packages/mask/src/plugins/hooks/useLineChart.ts
index bd35c37089db..3555285d7133 100644
--- a/packages/mask/src/plugins/hooks/useLineChart.ts
+++ b/packages/mask/src/plugins/hooks/useLineChart.ts
@@ -5,7 +5,7 @@ import type { Dimension } from './useDimension'
 
 export function useLineChart(
     svgRef: RefObject<SVGSVGElement>,
-    data: { date: Date; value: number }[],
+    data: Array<{ date: Date; value: number }>,
     dimension: Dimension,
     id: string,
     opts: { color?: string; tickFormat?: string; formatTooltip?: Function },
diff --git a/packages/mask/src/plugins/hooks/usePriceLineChart.ts b/packages/mask/src/plugins/hooks/usePriceLineChart.ts
index f173a19c7e52..89998fc0966b 100644
--- a/packages/mask/src/plugins/hooks/usePriceLineChart.ts
+++ b/packages/mask/src/plugins/hooks/usePriceLineChart.ts
@@ -5,7 +5,7 @@ import { useLineChart } from './useLineChart'
 
 export function usePriceLineChart(
     svgRef: RefObject<SVGSVGElement>,
-    data: { date: Date; value: number }[],
+    data: Array<{ date: Date; value: number }>,
     dimension: Dimension,
     id: string,
     opts: { color?: string; sign?: string },
diff --git a/packages/mask/src/social-network/utils/create-post-context.ts b/packages/mask/src/social-network/utils/create-post-context.ts
index 240cf305a258..25650d2d0b90 100644
--- a/packages/mask/src/social-network/utils/create-post-context.ts
+++ b/packages/mask/src/social-network/utils/create-post-context.ts
@@ -33,7 +33,7 @@ import { difference } from 'lodash-unified'
 
 export function createSNSAdaptorSpecializedPostContext(create: PostContextSNSActions) {
     return function createPostContext(opt: PostContextCreation): PostContext {
-        const cancel: (Function | undefined)[] = []
+        const cancel: Array<Function | undefined> = []
         opt.signal?.addEventListener('abort', () => cancel.forEach((fn) => fn?.()))
 
         // #region Mentioned links
diff --git a/packages/mask/src/utils/hooks/useSuspense.ts b/packages/mask/src/utils/hooks/useSuspense.ts
index 9903775e2679..5b981f27dddd 100644
--- a/packages/mask/src/utils/hooks/useSuspense.ts
+++ b/packages/mask/src/utils/hooks/useSuspense.ts
@@ -1,6 +1,6 @@
 import { useUpdate } from 'react-use'
 
-export function useSuspense<T, U extends Array<any>>(
+export function useSuspense<T, U extends any[]>(
     id: string,
     args: U,
     cache: Map<string, [0, Promise<void>] | [1, T] | [2, Error]>,
diff --git a/packages/mask/src/utils/shadow-root/renderInShadowRoot.tsx b/packages/mask/src/utils/shadow-root/renderInShadowRoot.tsx
index f0166037968c..b43757e4740e 100644
--- a/packages/mask/src/utils/shadow-root/renderInShadowRoot.tsx
+++ b/packages/mask/src/utils/shadow-root/renderInShadowRoot.tsx
@@ -2,7 +2,7 @@ import { createReactRootShadowedPartial, setupPortalShadowRoot, CSSVariableInjec
 import { MaskUIRoot } from '../../UIRoot'
 import { useClassicMaskSNSTheme } from '../theme'
 
-const captureEvents: (keyof HTMLElementEventMap)[] = [
+const captureEvents: Array<keyof HTMLElementEventMap> = [
     'paste',
     'keydown',
     'keypress',
diff --git a/packages/plugin-infra/src/web3-types.ts b/packages/plugin-infra/src/web3-types.ts
index fcc289bd62a6..057cd24024b2 100644
--- a/packages/plugin-infra/src/web3-types.ts
+++ b/packages/plugin-infra/src/web3-types.ts
@@ -281,7 +281,7 @@ export declare namespace Web3Plugin {
                 providerType: string,
                 network: NetworkDescriptor,
                 pagination?: Pagination,
-            ) => Promise<Asset<FungibleToken>[]>
+            ) => Promise<Array<Asset<FungibleToken>>>
             /** Get non-fungible assets of given account. */
             getNonFungibleAssets?: (
                 address: string,
diff --git a/packages/plugins/Flow/src/apis/getFungibleAssets.ts b/packages/plugins/Flow/src/apis/getFungibleAssets.ts
index a1335e23a821..a3965e48982c 100644
--- a/packages/plugins/Flow/src/apis/getFungibleAssets.ts
+++ b/packages/plugins/Flow/src/apis/getFungibleAssets.ts
@@ -103,7 +103,7 @@ export async function getFungibleAssets(
     provider: string,
     network: Web3Plugin.NetworkDescriptor,
     pagination?: Pagination,
-): Promise<Web3Plugin.Asset<Web3Plugin.FungibleToken>[]> {
+): Promise<Array<Web3Plugin.Asset<Web3Plugin.FungibleToken>>> {
     const allSettled = await Promise.allSettled([
         getAssetFLOW(network.chainId, address),
         getAssetFUSD(network.chainId, address),
@@ -112,5 +112,5 @@ export async function getFungibleAssets(
 
     return allSettled
         .map((x) => (x.status === 'fulfilled' ? x.value : null))
-        .filter(Boolean) as Web3Plugin.Asset<Web3Plugin.FungibleToken>[]
+        .filter(Boolean) as Array<Web3Plugin.Asset<Web3Plugin.FungibleToken>>
 }
diff --git a/packages/plugins/RSS3/src/SNSAdaptor/components/DonationCard.tsx b/packages/plugins/RSS3/src/SNSAdaptor/components/DonationCard.tsx
index 3e6b365975ee..b012d9304989 100644
--- a/packages/plugins/RSS3/src/SNSAdaptor/components/DonationCard.tsx
+++ b/packages/plugins/RSS3/src/SNSAdaptor/components/DonationCard.tsx
@@ -8,10 +8,10 @@ export interface DonationCardProps extends HTMLProps<HTMLDivElement> {
     imageUrl: string
     name: string
     contribCount: number
-    contribDetails: {
+    contribDetails: Array<{
         token: string
         amount: string
-    }[]
+    }>
 }
 
 const useStyles = makeStyles()((theme) => ({
diff --git a/packages/plugins/RSS3/src/types.ts b/packages/plugins/RSS3/src/types.ts
index 5a94d76053a5..fbd9d744ac23 100644
--- a/packages/plugins/RSS3/src/types.ts
+++ b/packages/plugins/RSS3/src/types.ts
@@ -23,10 +23,10 @@ export interface GeneralAsset {
         animation_original_url?: string | null
         title?: string
         total_contribs?: number
-        token_contribs?: {
+        token_contribs?: Array<{
             token: string
             amount: string
-        }[]
+        }>
         start_date?: string
         end_date?: string
         country?: string
diff --git a/packages/plugins/Solana/src/apis/getFungibleAssets.ts b/packages/plugins/Solana/src/apis/getFungibleAssets.ts
index 7859f6a017ca..fb8073a36ca9 100644
--- a/packages/plugins/Solana/src/apis/getFungibleAssets.ts
+++ b/packages/plugins/Solana/src/apis/getFungibleAssets.ts
@@ -68,7 +68,7 @@ export async function getFungibleAssets(
     provider: string,
     network: Web3Plugin.NetworkDescriptor,
     pagination?: Pagination,
-): Promise<Web3Plugin.Asset<Web3Plugin.FungibleToken>[]> {
+): Promise<Array<Web3Plugin.Asset<Web3Plugin.FungibleToken>>> {
     const allSettled = await Promise.allSettled([
         getSolanaBalance(network.chainId, address).then((x) => [x]),
         getSplTokenList(network.chainId, address),
@@ -77,5 +77,5 @@ export async function getFungibleAssets(
     return allSettled
         .map((x) => (x.status === 'fulfilled' ? x.value : null))
         .flat()
-        .filter(Boolean) as Web3Plugin.Asset<Web3Plugin.FungibleToken>[]
+        .filter(Boolean) as Array<Web3Plugin.Asset<Web3Plugin.FungibleToken>>
 }
diff --git a/packages/plugins/Solana/src/apis/shared.ts b/packages/plugins/Solana/src/apis/shared.ts
index 54aa78d0697e..20b57481355d 100644
--- a/packages/plugins/Solana/src/apis/shared.ts
+++ b/packages/plugins/Solana/src/apis/shared.ts
@@ -49,7 +49,7 @@ export interface ProgramAccount {
     pubkey: string
 }
 
-export type GetProgramAccountsResponse = RpcResponse<Array<ProgramAccount>>
+export type GetProgramAccountsResponse = RpcResponse<ProgramAccount[]>
 
 let id = 0
 export async function requestRPC<T = unknown>(chainId: ChainId, options: RpcOptions): Promise<T> {
diff --git a/packages/plugins/example/src/Worker/index.ts b/packages/plugins/example/src/Worker/index.ts
index c9a0027ae6d5..f336e4386a26 100644
--- a/packages/plugins/example/src/Worker/index.ts
+++ b/packages/plugins/example/src/Worker/index.ts
@@ -10,7 +10,7 @@ interface File {
 interface Folder {
     type: 'folder'
     id: string
-    files: File['id'][]
+    files: Array<File['id']>
 }
 let storage: Plugin.Worker.DatabaseStorage<File | Folder> | undefined
 const worker: Plugin.Worker.Definition = {
diff --git a/packages/shared-base/src/Identifier/map.ts b/packages/shared-base/src/Identifier/map.ts
index 531ee0814f62..18b4311d65c3 100644
--- a/packages/shared-base/src/Identifier/map.ts
+++ b/packages/shared-base/src/Identifier/map.ts
@@ -7,10 +7,10 @@ import { PostIVIdentifier as D } from './post-iv'
 type I<T> = Iterable<readonly [string, T]>
 
 // you're free to add a new overload...
-export function convertRawMapToIdentifierMap<T>(it: I<T>, ...of: typeof A[]): Map<A, T>
-export function convertRawMapToIdentifierMap<T>(it: I<T>, ...of: typeof B[]): Map<B, T>
-export function convertRawMapToIdentifierMap<T>(it: I<T>, ...of: typeof C[]): Map<C, T>
-export function convertRawMapToIdentifierMap<T>(it: I<T>, ...of: typeof D[]): Map<D, T>
+export function convertRawMapToIdentifierMap<T>(it: I<T>, ...of: Array<typeof A>): Map<A, T>
+export function convertRawMapToIdentifierMap<T>(it: I<T>, ...of: Array<typeof B>): Map<B, T>
+export function convertRawMapToIdentifierMap<T>(it: I<T>, ...of: Array<typeof C>): Map<C, T>
+export function convertRawMapToIdentifierMap<T>(it: I<T>, ...of: Array<typeof D>): Map<D, T>
 export function convertRawMapToIdentifierMap<T>(it: I<T>, ...of: unknown[]): Map<Identifier, T> {
     const hasProfileIdentifier = of.includes(A)
     const hasECKeyIdentifier = of.includes(B)
diff --git a/packages/shared-base/src/NextID/type.ts b/packages/shared-base/src/NextID/type.ts
index 17c8f914b586..e6ab5e2d52bc 100644
--- a/packages/shared-base/src/NextID/type.ts
+++ b/packages/shared-base/src/NextID/type.ts
@@ -61,7 +61,7 @@ export interface NextIDStoragePayload {
 }
 export interface NextIDStorageInfo<T = unknown> {
     persona: string
-    proofs: NextIDStorageProofs<T>[]
+    proofs: Array<NextIDStorageProofs<T>>
 }
 export interface NextIDStorageProofs<T> {
     content: {
diff --git a/packages/shared/src/UI/components/ConcealableTabs/index.tsx b/packages/shared/src/UI/components/ConcealableTabs/index.tsx
index 6ea0aa321f2a..dc4c95a7ef59 100644
--- a/packages/shared/src/UI/components/ConcealableTabs/index.tsx
+++ b/packages/shared/src/UI/components/ConcealableTabs/index.tsx
@@ -106,7 +106,7 @@ interface TabOption<T> {
 }
 
 export interface ConcealableTabsProps<T> extends Omit<HTMLProps<HTMLDivElement>, 'onChange'> {
-    tabs: TabOption<T>[]
+    tabs: Array<TabOption<T>>
     selectedId?: T
     onChange?(id: T): void
     tail?: ReactNode
diff --git a/packages/shared/src/UI/components/MiniNetworkSelector/index.tsx b/packages/shared/src/UI/components/MiniNetworkSelector/index.tsx
index c3498dc4b812..aa64050dcd92 100644
--- a/packages/shared/src/UI/components/MiniNetworkSelector/index.tsx
+++ b/packages/shared/src/UI/components/MiniNetworkSelector/index.tsx
@@ -44,13 +44,13 @@ export interface NetworkSelectorMinProps {
         ID: string
         chainId: number
     } | null
-    networks: {
+    networks: Array<{
         ID: string
         isMainnet: boolean
         chainId: number
         icon: URL
         iconColor: string
-    }[]
+    }>
     onSelect(network: { chainId: number } | null): void
     hideAllNetworkButton?: boolean
     disabledNonCurrentNetwork?: boolean
diff --git a/packages/theme/src/ShadowRoot/Contexts.ts b/packages/theme/src/ShadowRoot/Contexts.ts
index fef9cfa0b3d3..91515aa2e9b8 100644
--- a/packages/theme/src/ShadowRoot/Contexts.ts
+++ b/packages/theme/src/ShadowRoot/Contexts.ts
@@ -4,6 +4,6 @@ import type { StyleSheet } from './ShadowRootStyleSheet'
 /** @internal */
 export const StyleSheetsContext = createContext<readonly StyleSheet[]>(null!)
 /** @internal */
-export const PreventEventPropagationListContext = createContext<(keyof HTMLElementEventMap)[]>([])
+export const PreventEventPropagationListContext = createContext<Array<keyof HTMLElementEventMap>>([])
 /** This context does not join any ShadowRoot related feature. */
 export const DisableShadowRootContext = createContext(false)
diff --git a/packages/theme/src/ShadowRoot/createReactRootShadowed.tsx b/packages/theme/src/ShadowRoot/createReactRootShadowed.tsx
index 32535b1a52af..66949d641135 100644
--- a/packages/theme/src/ShadowRoot/createReactRootShadowed.tsx
+++ b/packages/theme/src/ShadowRoot/createReactRootShadowed.tsx
@@ -20,7 +20,7 @@ export interface CreateRenderInShadowRootHostConfig {
      *
      * ! This is not a security boundary !
      */
-    preventEventPropagationList: (keyof HTMLElementEventMap)[]
+    preventEventPropagationList: Array<keyof HTMLElementEventMap>
     wrapJSX?(jsx: React.ReactChild): React.ReactChild
 }
 export interface ReactRootShadowed {
diff --git a/packages/theme/src/Theme/Provider.tsx b/packages/theme/src/Theme/Provider.tsx
index 2260bdc1a4d2..7ab86e6dcacf 100644
--- a/packages/theme/src/Theme/Provider.tsx
+++ b/packages/theme/src/Theme/Provider.tsx
@@ -2,7 +2,7 @@ import { CssBaseline, Theme, ThemeProvider } from '@mui/material'
 import { MaskIconPalette, MaskIconPaletteContext } from '@masknet/icons'
 import { CustomSnackbarProvider } from '../Components'
 
-function compose(init: React.ReactNode, ...f: ((children: React.ReactNode) => JSX.Element)[]) {
+function compose(init: React.ReactNode, ...f: Array<(children: React.ReactNode) => JSX.Element>) {
     // eslint-disable-next-line unicorn/no-array-reduce
     return f.reduceRight((prev, curr) => curr(prev), <>{init}</>)
 }
diff --git a/packages/theme/src/UIHelper/custom-ui-helper.tsx b/packages/theme/src/UIHelper/custom-ui-helper.tsx
index db8ed7aba8cd..233d13ffcf70 100644
--- a/packages/theme/src/UIHelper/custom-ui-helper.tsx
+++ b/packages/theme/src/UIHelper/custom-ui-helper.tsx
@@ -11,7 +11,7 @@ export function useStylesExtends<InternalKeys extends string, OverwrittenKeys ex
     return mergeClasses(defaultStyles.classes, configOverwrite.classes, props.classes) as any
 }
 
-export function mergeClasses(...args: (Partial<ClassNameMap<string>> | undefined)[]): Partial<ClassNameMap<string>> {
+export function mergeClasses(...args: Array<Partial<ClassNameMap<string>> | undefined>): Partial<ClassNameMap<string>> {
     args = args.filter(Boolean)
     if (args.length === 1) return args[0]!
     const result = {} as Partial<ClassNameMap<string>>
diff --git a/packages/theme/stories/utils/Material-UI.ts b/packages/theme/stories/utils/Material-UI.ts
index 94ef7291de68..953910f489cf 100644
--- a/packages/theme/stories/utils/Material-UI.ts
+++ b/packages/theme/stories/utils/Material-UI.ts
@@ -2,7 +2,7 @@ import type { ButtonProps, SelectProps, TextFieldProps } from '@mui/material'
 import type { ArgType, ArgTypes } from '@storybook/addons'
 import { argsOfArr, ControlType } from './args'
 function enumIn<T>(enums: {
-    [Prop in keyof T]?: (argsFromEnum: (enumString: NonNullable<T[Prop]>[], type?: ControlType) => ArgType) => ArgType
+    [Prop in keyof T]?: (argsFromEnum: (enumString: Array<NonNullable<T[Prop]>>, type?: ControlType) => ArgType) => ArgType
 }): ArgTypes {
     for (const key of Object.keys(enums) as Array<keyof T>) {
         enums[key] = (enums[key] as any)(argsOfArr)
diff --git a/packages/theme/stories/utils/args.ts b/packages/theme/stories/utils/args.ts
index 01a6609863f2..9561b40cc1c1 100644
--- a/packages/theme/stories/utils/args.ts
+++ b/packages/theme/stories/utils/args.ts
@@ -1,5 +1,5 @@
 export type ControlType = 'radio' | 'inline-radio' | 'check' | 'inline-check' | 'select' | 'multi-select'
-export function argsOfArr<T>(keys: NonNullable<T>[], type?: ControlType) {
+export function argsOfArr<T>(keys: Array<NonNullable<T>>, type?: ControlType) {
     if (type === undefined) {
         if (keys.length <= 6) type = 'inline-radio'
         else type = 'select'
diff --git a/packages/typed-message/base/utils/extract.ts b/packages/typed-message/base/utils/extract.ts
index 5a1220fe216a..2e1e5ba38ddc 100644
--- a/packages/typed-message/base/utils/extract.ts
+++ b/packages/typed-message/base/utils/extract.ts
@@ -27,10 +27,10 @@ export function extractTextFromTypedMessage(
     if (text.length) return Some(text.join(' '))
     return None
 }
-export function extractImageFromTypedMessage(message: TypedMessage | null): (string | Blob)[] {
+export function extractImageFromTypedMessage(message: TypedMessage | null): Array<string | Blob> {
     if (!message) return []
 
-    const image: (string | Blob)[] = []
+    const image: Array<string | Blob> = []
     function visitor(message: TypedMessage): void {
         if (isTypedMessageImage(message)) return void image.push(message.image)
         return forEachTypedMessageChild(message, visitor)
diff --git a/packages/typed-message/base/utils/internal.ts b/packages/typed-message/base/utils/internal.ts
index cd9523604cdb..eda1b255c5ea 100644
--- a/packages/typed-message/base/utils/internal.ts
+++ b/packages/typed-message/base/utils/internal.ts
@@ -8,11 +8,11 @@ export function createIsType<T extends TypedMessage>(x: T['type'], version?: num
     }
 }
 /** @internal */
-export function composeSome<Args extends any[]>(...fns: ((...args: Args) => boolean)[]) {
+export function composeSome<Args extends any[]>(...fns: Array<(...args: Args) => boolean>) {
     return (...args: Args) => fns.some((f) => f(...args))
 }
 
 /** @internal */
-export function composeEvery<Args extends any[]>(...fns: ((...args: Args) => boolean)[]) {
+export function composeEvery<Args extends any[]>(...fns: Array<(...args: Args) => boolean>) {
     return (...args: Args) => fns.every((f) => f(...args))
 }
diff --git a/packages/web3-constants/compile-constants.ts b/packages/web3-constants/compile-constants.ts
index ab288a6150c3..ef2c95494704 100644
--- a/packages/web3-constants/compile-constants.ts
+++ b/packages/web3-constants/compile-constants.ts
@@ -11,7 +11,7 @@ async function compileConstants(folderPath: string, names: string[]) {
         for (const name of Object.keys(constants)) {
             const values = constants[name]
             const defaultValue = getDefaultValue(Object.values(values)[0])
-            const pairs: [string, unknown][] = []
+            const pairs: Array<[string, unknown]> = []
             for (const name of names) {
                 pairs.push([name, values[name] ?? defaultValue])
             }
diff --git a/packages/web3-contracts/compile-contracts.ts b/packages/web3-contracts/compile-contracts.ts
index 24911661fd24..494476eb1c5d 100644
--- a/packages/web3-contracts/compile-contracts.ts
+++ b/packages/web3-contracts/compile-contracts.ts
@@ -6,7 +6,7 @@ import { run } from './utils'
 const ABIS_PATH = path.join(__dirname, 'abis')
 const GENERATED_PATH = path.join(__dirname, 'types')
 
-async function replaceFileAll(file: string, pairs: [string, string][]) {
+async function replaceFileAll(file: string, pairs: Array<[string, string]>) {
     let content = await fs.readFile(file, 'utf-8')
     for (const [pattern, value] of pairs) {
         content = content.replace(new RegExp(pattern, 'img'), value)
diff --git a/packages/web3-providers/src/opensea/types.ts b/packages/web3-providers/src/opensea/types.ts
index 9ee7062c7b14..efd8ce281dc2 100644
--- a/packages/web3-providers/src/opensea/types.ts
+++ b/packages/web3-providers/src/opensea/types.ts
@@ -80,11 +80,11 @@ export interface OpenSeaCollection extends OpenSeaFees {
     wiki_link?: string
     safelist_request_status: string
     owned_asset_count: number
-    primary_asset_contracts: {
+    primary_asset_contracts: Array<{
         address: string
         asset_contract_type: string
         symbol: string
-    }[]
+    }>
 }
 
 export interface OpenSeaResponse extends Asset {
@@ -104,19 +104,19 @@ export interface OpenSeaResponse extends Asset {
     image_thumbnail_url: string
     opensea_link: string
     external_link: string
-    traits: {
+    traits: Array<{
         trait_type: string
         value: string
-    }[]
+    }>
     num_sales: number
     last_sale: NonFungibleTokenAPI.AssetEvent | null
     background_color: string | null
     transfer_fee: string | null
     transfer_fee_payment_token: OpenSeaFungibleToken | null
-    top_ownerships: {
+    top_ownerships: Array<{
         owner: OpenSeaCustomAccount
         quantity: string
-    }[]
+    }>
     creator: OpenSeaCustomAccount
     endTime: string
 }
diff --git a/packages/web3-providers/src/rarible/index.ts b/packages/web3-providers/src/rarible/index.ts
index 4d660764186e..cdd1b548266e 100644
--- a/packages/web3-providers/src/rarible/index.ts
+++ b/packages/web3-providers/src/rarible/index.ts
@@ -36,7 +36,7 @@ async function fetchFromRarible<T>(url: string, path: string, init?: RequestInit
     return response.json() as Promise<T>
 }
 
-function getProfilesFromRarible(addresses: (string | undefined)[]) {
+function getProfilesFromRarible(addresses: Array<string | undefined>) {
     return fetchFromRarible<RaribleProfileResponse[]>(RaribleMainnetURL, '/profiles/list', {
         method: 'POST',
         body: JSON.stringify(addresses),
diff --git a/packages/web3-providers/src/rarible/types.ts b/packages/web3-providers/src/rarible/types.ts
index d772dcabc1d0..7616b1d8e9a1 100644
--- a/packages/web3-providers/src/rarible/types.ts
+++ b/packages/web3-providers/src/rarible/types.ts
@@ -58,10 +58,10 @@ export interface Creator {
 export interface Meta {
     name: string
     description: string
-    attributes: {
+    attributes: Array<{
         key: string
         value: string
-    }[]
+    }>
     image?: {
         meta: {
             PREVIEW: {
diff --git a/packages/web3-providers/src/types.ts b/packages/web3-providers/src/types.ts
index e33ba8eed336..ca204bd3db7e 100644
--- a/packages/web3-providers/src/types.ts
+++ b/packages/web3-providers/src/types.ts
@@ -40,10 +40,10 @@ export namespace RSS3BaseAPI {
             animation_original_url?: string | null
             title?: string
             total_contribs?: number
-            token_contribs?: {
+            token_contribs?: Array<{
                 token: string
                 amount: string
-            }[]
+            }>
             start_date?: string
             end_date?: string
             country?: string
@@ -204,13 +204,13 @@ export namespace NonFungibleTokenAPI {
         collection_name: string
         animation_url?: string
         end_time: Date | null
-        order_payment_tokens: (ERC20TokenDetailed | NativeTokenDetailed)[]
-        offer_payment_tokens: (ERC20TokenDetailed | NativeTokenDetailed)[]
+        order_payment_tokens: Array<ERC20TokenDetailed | NativeTokenDetailed>
+        offer_payment_tokens: Array<ERC20TokenDetailed | NativeTokenDetailed>
         slug: string | null
         desktopOrder?: AssetOrder
-        top_ownerships: {
+        top_ownerships: Array<{
             owner: AssetOwner
-        }[]
+        }>
         last_sale: AssetEvent | null
         response_: any
     }
@@ -464,10 +464,10 @@ export namespace TwitterBaseAPI {
                     name: string
                 }
             }
-            traits: {
+            traits: Array<{
                 trait_type: string
                 value: string
-            }[]
+            }>
         }
     }
     export interface AvatarInfo {
diff --git a/packages/web3-shared/evm/constants/getContractOwnerDomain.ts b/packages/web3-shared/evm/constants/getContractOwnerDomain.ts
index ae6757dc5d64..2e9077899143 100644
--- a/packages/web3-shared/evm/constants/getContractOwnerDomain.ts
+++ b/packages/web3-shared/evm/constants/getContractOwnerDomain.ts
@@ -13,7 +13,7 @@ import RedPacket from '@masknet/web3-constants/evm/red-packet.json'
 import Trader from '@masknet/web3-constants/evm/trader.json'
 import { filter, flatten, pick, uniq, values } from 'lodash-unified'
 
-const collect = <T extends Record<string, Record<string, string | number>>>(data: T, fields: (keyof T)[]): string[] => {
+const collect = <T extends Record<string, Record<string, string | number>>>(data: T, fields: Array<keyof T>): string[] => {
     const groupedByFields = values(pick(data, fields))
     const listOfAddresses = groupedByFields.map((v) => values(v))
     const listOfAddress = flatten(listOfAddresses)
diff --git a/packages/web3-shared/evm/hooks/useERC20TokenDetailed.ts b/packages/web3-shared/evm/hooks/useERC20TokenDetailed.ts
index 6fad5daaf80e..8703e37e037a 100644
--- a/packages/web3-shared/evm/hooks/useERC20TokenDetailed.ts
+++ b/packages/web3-shared/evm/hooks/useERC20TokenDetailed.ts
@@ -25,7 +25,7 @@ export function useERC20TokenDetailed(address?: string, token?: Partial<ERC20Tok
     }, [chainId, token, erc20TokenContract, erc20TokenBytes32Contract, address])
 }
 
-export function useFungibleTokensDetailed(listOfToken: Pick<FungibleToken, 'address' | 'type'>[], _chainId?: ChainId) {
+export function useFungibleTokensDetailed(listOfToken: Array<Pick<FungibleToken, 'address' | 'type'>>, _chainId?: ChainId) {
     const currentChainId = useChainId()
     const chainId = _chainId ? _chainId : currentChainId
     const listOfAddress = useMemo(() => listOfToken.map((t) => t.address), [JSON.stringify(listOfToken)])
diff --git a/packages/web3-shared/evm/hooks/useERC20TokensDetailedFromTokenLists.ts b/packages/web3-shared/evm/hooks/useERC20TokensDetailedFromTokenLists.ts
index 81a63449bb6c..d3c38f381bfd 100644
--- a/packages/web3-shared/evm/hooks/useERC20TokensDetailedFromTokenLists.ts
+++ b/packages/web3-shared/evm/hooks/useERC20TokensDetailedFromTokenLists.ts
@@ -12,9 +12,9 @@ import { EMPTY_LIST } from '@masknet/shared-base'
 export function useERC20TokensDetailedFromTokenLists(
     lists?: string[],
     keyword = '',
-    additionalTokens: (ERC20TokenDetailed | NativeTokenDetailed)[] = EMPTY_LIST,
+    additionalTokens: Array<ERC20TokenDetailed | NativeTokenDetailed> = EMPTY_LIST,
     targetChainId?: ChainId,
-): AsyncStateRetry<(ERC20TokenDetailed | NativeTokenDetailed)[]> {
+): AsyncStateRetry<Array<ERC20TokenDetailed | NativeTokenDetailed>> {
     // #region fetch token lists
     const currentChainId = useChainId()
     const chainId = targetChainId ?? currentChainId
diff --git a/packages/web3-shared/evm/hooks/useERC721TokenDetailed.ts b/packages/web3-shared/evm/hooks/useERC721TokenDetailed.ts
index cc9397ca4313..41b177ef1d99 100644
--- a/packages/web3-shared/evm/hooks/useERC721TokenDetailed.ts
+++ b/packages/web3-shared/evm/hooks/useERC721TokenDetailed.ts
@@ -39,7 +39,7 @@ export async function getERC721TokenDetailedFromOpensea(
         description: string
         image_url: string
         animation_url: string
-        top_ownerships: { owner: { address: string } }[]
+        top_ownerships: Array<{ owner: { address: string } }>
     }
 
     if (response.ok) {
diff --git a/packages/web3-shared/evm/hooks/useMulticall.ts b/packages/web3-shared/evm/hooks/useMulticall.ts
index 323d362272e2..f05a80aecb2a 100644
--- a/packages/web3-shared/evm/hooks/useMulticall.ts
+++ b/packages/web3-shared/evm/hooks/useMulticall.ts
@@ -192,7 +192,7 @@ export function useMulticallStateDecoded<
 export function useSingleContractMultipleData<T extends BaseContract, K extends keyof T['methods']>(
     contract: T | null,
     names: K[],
-    callDatas: Parameters<T['methods'][K]>[],
+    callDatas: Array<Parameters<T['methods'][K]>>,
     gasLimit = DEFAULT_GAS_LIMIT,
     chainId?: ChainId,
     blockNumber?: number,
@@ -241,7 +241,7 @@ export function useMultipleContractSingleData<T extends BaseContract, K extends
 export function useMultipleContractMultipleData<T extends BaseContract, K extends keyof T['methods']>(
     contracts: T[],
     names: K[],
-    callDatas: Parameters<T['methods'][K]>[],
+    callDatas: Array<Parameters<T['methods'][K]>>,
     gasLimit = DEFAULT_GAS_LIMIT,
     chainId?: ChainId,
 ) {

From 5128f38145c44499e520421d722322416697a75e Mon Sep 17 00:00:00 2001
From: Jack Works <jackworks@protonmail.com>
Date: Fri, 27 May 2022 12:11:48 +0800
Subject: [PATCH 05/17] fix: prettier

---
 packages/mask/src/components/shared/AbstractTab.tsx  | 12 +++++++-----
 packages/mask/src/plugins/Trader/types/trader.ts     |  4 +++-
 .../mask/src/plugins/Wallet/services/wallet/index.ts | 12 +++++++-----
 packages/plugins/Flow/src/apis/getFungibleAssets.ts  |  6 +++---
 packages/theme/stories/utils/Material-UI.ts          |  4 +++-
 .../evm/constants/getContractOwnerDomain.ts          |  5 ++++-
 .../web3-shared/evm/hooks/useERC20TokenDetailed.ts   |  5 ++++-
 7 files changed, 31 insertions(+), 17 deletions(-)

diff --git a/packages/mask/src/components/shared/AbstractTab.tsx b/packages/mask/src/components/shared/AbstractTab.tsx
index 3357f4f06564..fc124d5bbcfc 100644
--- a/packages/mask/src/components/shared/AbstractTab.tsx
+++ b/packages/mask/src/components/shared/AbstractTab.tsx
@@ -23,11 +23,13 @@ interface TabPanelProps extends BoxProps {
 
 export interface AbstractTabProps
     extends withClasses<'tab' | 'tabs' | 'tabPanel' | 'indicator' | 'focusTab' | 'tabPaper' | 'flexContainer'> {
-    tabs: Array<Omit<TabPanelProps, 'height' | 'minHeight'> & {
-        cb?: () => void
-        disableFocusRipple?: boolean
-        disableRipple?: boolean
-    }>
+    tabs: Array<
+        Omit<TabPanelProps, 'height' | 'minHeight'> & {
+            cb?: () => void
+            disableFocusRipple?: boolean
+            disableRipple?: boolean
+        }
+    >
     state?: readonly [number, (next: number) => void]
     index?: number
     disableFocusRipple?: boolean
diff --git a/packages/mask/src/plugins/Trader/types/trader.ts b/packages/mask/src/plugins/Trader/types/trader.ts
index 62ed8d28b0ff..20fa860c5e49 100644
--- a/packages/mask/src/plugins/Trader/types/trader.ts
+++ b/packages/mask/src/plugins/Trader/types/trader.ts
@@ -92,7 +92,9 @@ export interface TradeComputed<T = unknown> {
     maximumSold: BigNumber
     minimumReceived: BigNumber
     fee: BigNumber
-    path?: Array<Array<PartialRequired<NativeTokenDetailed, 'address'> | PartialRequired<ERC20TokenDetailed, 'address'>>>
+    path?: Array<
+        Array<PartialRequired<NativeTokenDetailed, 'address'> | PartialRequired<ERC20TokenDetailed, 'address'>>
+    >
     trade_?: T
 }
 
diff --git a/packages/mask/src/plugins/Wallet/services/wallet/index.ts b/packages/mask/src/plugins/Wallet/services/wallet/index.ts
index 62893f8f752e..96c990f49f0c 100644
--- a/packages/mask/src/plugins/Wallet/services/wallet/index.ts
+++ b/packages/mask/src/plugins/Wallet/services/wallet/index.ts
@@ -51,11 +51,13 @@ export async function getWallet(address?: string) {
 }
 
 export async function getWallets(providerType?: ProviderType): Promise<
-    Array<Omit<WalletRecord, 'type'> & {
-        configurable: boolean
-        hasStoredKeyInfo: boolean
-        hasDerivationPath: boolean
-    }>
+    Array<
+        Omit<WalletRecord, 'type'> & {
+            configurable: boolean
+            hasStoredKeyInfo: boolean
+            hasDerivationPath: boolean
+        }
+    >
 > {
     if (hasNativeAPI) {
         if (providerType && providerType !== ProviderType.MaskWallet) return []
diff --git a/packages/plugins/Flow/src/apis/getFungibleAssets.ts b/packages/plugins/Flow/src/apis/getFungibleAssets.ts
index a3965e48982c..8888c2d0fb8f 100644
--- a/packages/plugins/Flow/src/apis/getFungibleAssets.ts
+++ b/packages/plugins/Flow/src/apis/getFungibleAssets.ts
@@ -110,7 +110,7 @@ export async function getFungibleAssets(
         getAssetTether(network.chainId, address),
     ])
 
-    return allSettled
-        .map((x) => (x.status === 'fulfilled' ? x.value : null))
-        .filter(Boolean) as Array<Web3Plugin.Asset<Web3Plugin.FungibleToken>>
+    return allSettled.map((x) => (x.status === 'fulfilled' ? x.value : null)).filter(Boolean) as Array<
+        Web3Plugin.Asset<Web3Plugin.FungibleToken>
+    >
 }
diff --git a/packages/theme/stories/utils/Material-UI.ts b/packages/theme/stories/utils/Material-UI.ts
index 953910f489cf..2bc1c3fd4dc3 100644
--- a/packages/theme/stories/utils/Material-UI.ts
+++ b/packages/theme/stories/utils/Material-UI.ts
@@ -2,7 +2,9 @@ import type { ButtonProps, SelectProps, TextFieldProps } from '@mui/material'
 import type { ArgType, ArgTypes } from '@storybook/addons'
 import { argsOfArr, ControlType } from './args'
 function enumIn<T>(enums: {
-    [Prop in keyof T]?: (argsFromEnum: (enumString: Array<NonNullable<T[Prop]>>, type?: ControlType) => ArgType) => ArgType
+    [Prop in keyof T]?: (
+        argsFromEnum: (enumString: Array<NonNullable<T[Prop]>>, type?: ControlType) => ArgType,
+    ) => ArgType
 }): ArgTypes {
     for (const key of Object.keys(enums) as Array<keyof T>) {
         enums[key] = (enums[key] as any)(argsOfArr)
diff --git a/packages/web3-shared/evm/constants/getContractOwnerDomain.ts b/packages/web3-shared/evm/constants/getContractOwnerDomain.ts
index 2e9077899143..b38f5de4fe91 100644
--- a/packages/web3-shared/evm/constants/getContractOwnerDomain.ts
+++ b/packages/web3-shared/evm/constants/getContractOwnerDomain.ts
@@ -13,7 +13,10 @@ import RedPacket from '@masknet/web3-constants/evm/red-packet.json'
 import Trader from '@masknet/web3-constants/evm/trader.json'
 import { filter, flatten, pick, uniq, values } from 'lodash-unified'
 
-const collect = <T extends Record<string, Record<string, string | number>>>(data: T, fields: Array<keyof T>): string[] => {
+const collect = <T extends Record<string, Record<string, string | number>>>(
+    data: T,
+    fields: Array<keyof T>,
+): string[] => {
     const groupedByFields = values(pick(data, fields))
     const listOfAddresses = groupedByFields.map((v) => values(v))
     const listOfAddress = flatten(listOfAddresses)
diff --git a/packages/web3-shared/evm/hooks/useERC20TokenDetailed.ts b/packages/web3-shared/evm/hooks/useERC20TokenDetailed.ts
index 8703e37e037a..5577105a6757 100644
--- a/packages/web3-shared/evm/hooks/useERC20TokenDetailed.ts
+++ b/packages/web3-shared/evm/hooks/useERC20TokenDetailed.ts
@@ -25,7 +25,10 @@ export function useERC20TokenDetailed(address?: string, token?: Partial<ERC20Tok
     }, [chainId, token, erc20TokenContract, erc20TokenBytes32Contract, address])
 }
 
-export function useFungibleTokensDetailed(listOfToken: Array<Pick<FungibleToken, 'address' | 'type'>>, _chainId?: ChainId) {
+export function useFungibleTokensDetailed(
+    listOfToken: Array<Pick<FungibleToken, 'address' | 'type'>>,
+    _chainId?: ChainId,
+) {
     const currentChainId = useChainId()
     const chainId = _chainId ? _chainId : currentChainId
     const listOfAddress = useMemo(() => listOfToken.map((t) => t.address), [JSON.stringify(listOfToken)])

From d807a28f342ad5afbc1c8f5202ced17ed21755fb Mon Sep 17 00:00:00 2001
From: guanbinrui <52657989+guanbinrui@users.noreply.github.com>
Date: Fri, 27 May 2022 15:13:58 +0800
Subject: [PATCH 06/17] docs: add template for requesting a new EVM-compatible
 chain (#6364)

---
 .github/ISSUE_TEMPLATE/evm.md | 31 +++++++++++++++++++++++++++++++
 1 file changed, 31 insertions(+)
 create mode 100644 .github/ISSUE_TEMPLATE/evm.md

diff --git a/.github/ISSUE_TEMPLATE/evm.md b/.github/ISSUE_TEMPLATE/evm.md
new file mode 100644
index 000000000000..89ecabfdd35f
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/evm.md
@@ -0,0 +1,31 @@
+---
+name: Deploy Contract Request
+about: Request to deploy contracts on a new EVM-compatible chain.
+title: '[EVM Chain] Request to deploy contracts on '
+labels: ''
+assignees: DimensionDev/dev-smartcontract
+---
+
+Request to depoly contracts on <!-- Replace it with the chain name -->.
+
+<!-- If you are working on a bounty please link to the issue here. -->
+
+## Chain Info
+
+| Name | Content |
+| ---- | ------- |
+| Name | \- |
+| ChainId | \- |
+| Website | \- |
+
+
+## Checklist
+
+The following contracts are requested.
+
++ [RedPacket](https://github.com/DimensionDev/RedPacket)
++ [Initial Twitter Offer](https://github.com/DimensionDev/InitialTwitterOffering)
++ Dummy Qualification
++ BalanceChecker
++ Multicall
++ UniswapInterfaceMulticall

From 69e2db4c880d620f29c41f8e199017881cdc3ea7 Mon Sep 17 00:00:00 2001
From: Jack Works <jackworks@protonmail.com>
Date: Fri, 27 May 2022 15:58:56 +0800
Subject: [PATCH 07/17] remove provider-proxy package to merge 6002

---
 .github/workflows/deploy-proxy.yml            |  30 ---
 packages/provider-proxy/build.mjs             |  63 ------
 packages/provider-proxy/package.json          |  26 ---
 packages/provider-proxy/rollup.config.js      |  51 -----
 packages/provider-proxy/src/helper/request.ts |  23 --
 packages/provider-proxy/src/index.ts          |  14 --
 .../src/producers/fetchProxyVersion.ts        |  21 --
 .../src/producers/fungibleTokenAsset.ts       |  25 ---
 .../producers/nonFungibleCollectibleAsset.ts  |  55 -----
 .../nonFungibleCollectibleAssetV2.ts          |  55 -----
 .../producers/nonFungibleCollectionAsset.ts   |  45 ----
 packages/provider-proxy/src/types.ts          |  12 --
 packages/provider-proxy/tsconfig.json         |  16 --
 pnpm-lock.yaml                                | 197 ++++++++----------
 tsconfig.json                                 |   2 -
 15 files changed, 84 insertions(+), 551 deletions(-)
 delete mode 100644 .github/workflows/deploy-proxy.yml
 delete mode 100644 packages/provider-proxy/build.mjs
 delete mode 100644 packages/provider-proxy/package.json
 delete mode 100644 packages/provider-proxy/rollup.config.js
 delete mode 100644 packages/provider-proxy/src/helper/request.ts
 delete mode 100644 packages/provider-proxy/src/index.ts
 delete mode 100644 packages/provider-proxy/src/producers/fetchProxyVersion.ts
 delete mode 100644 packages/provider-proxy/src/producers/fungibleTokenAsset.ts
 delete mode 100644 packages/provider-proxy/src/producers/nonFungibleCollectibleAsset.ts
 delete mode 100644 packages/provider-proxy/src/producers/nonFungibleCollectibleAssetV2.ts
 delete mode 100644 packages/provider-proxy/src/producers/nonFungibleCollectionAsset.ts
 delete mode 100644 packages/provider-proxy/src/types.ts
 delete mode 100644 packages/provider-proxy/tsconfig.json

diff --git a/.github/workflows/deploy-proxy.yml b/.github/workflows/deploy-proxy.yml
deleted file mode 100644
index 9bd3176fa268..000000000000
--- a/.github/workflows/deploy-proxy.yml
+++ /dev/null
@@ -1,30 +0,0 @@
-name: Publish Proxy Package
-
-on:
-  workflow_dispatch:
-jobs:
-  build:
-    runs-on: ubuntu-20.04
-    permissions:
-      packages: write
-      contents: read
-    steps:
-      - uses: actions/checkout@v2
-        with:
-          ref: ${{ github.event.pull_request.head.sha }}
-          fetch-depth: 0
-      - uses: pnpm/action-setup@v2.2.1
-      - uses: actions/setup-node@v2
-        with:
-          cache: pnpm
-      - uses: DimensionDev/github-token-action@latest
-        with:
-          registry: true
-      - run: pnpm install
-      - run: pnpm build
-        name: Build solution
-      - run: pnpm build
-        name: Build provider-proxy Package
-        working-directory: packages/provider-proxy
-      - run: npm publish
-        working-directory: packages/provider-proxy/dist
diff --git a/packages/provider-proxy/build.mjs b/packages/provider-proxy/build.mjs
deleted file mode 100644
index 8afa346dc36d..000000000000
--- a/packages/provider-proxy/build.mjs
+++ /dev/null
@@ -1,63 +0,0 @@
-// @ts-check
-import { spawn } from 'child_process'
-import { readFile, writeFile } from 'fs/promises'
-import { join, resolve } from 'path'
-import { fileURLToPath } from 'url'
-import { format as formatDate } from 'date-fns'
-
-const __file = fileURLToPath(import.meta.url)
-const __dirname = resolve(__file, '../')
-const __root = join(__dirname, './dist')
-
-function awaitChildProcess(child) {
-    return new Promise((resolve, reject) => {
-        child.on('error', () => reject(child.exitCode || 0))
-        child.on('exit', (code) => resolve(code || 0))
-    })
-}
-
-const version = JSON.parse(await readFile(join(__dirname, 'package.json'), 'utf-8')).version
-const buildVersion = process.env.BUILD_VERSION ?? formatDate(Date.now(), 'yyyymmddHHMMss')
-const fullVersion = `${version}-${buildVersion}`
-
-const rollup = awaitChildProcess(
-    spawn(`PROXY_VERSION=${fullVersion} pnpm run build:rollup`, {
-        cwd: __dirname,
-        shell: true,
-        stdio: 'inherit',
-    }),
-)
-await rollup
-const packageJSON = {
-    name: '@dimensiondev/provider-proxy',
-    repository: 'https://github.com/DimensionDev/Maskbook',
-    version: fullVersion,
-    dependencies: {
-        // 'wallet.ts': '1.0.1',
-        'bignumber.js': '9.0.1',
-        'socket.io-client': '2.4.0',
-        'lodash-unified': '1.0.1',
-        'date-fns': '2.27.0',
-        urlcat: '^2.0.4',
-    },
-    main: './output.js',
-    types: './output.d.ts',
-    files: ['output.js', 'output.d.ts'],
-}
-await writeFile(join(__root, 'package.json'), JSON.stringify(packageJSON, undefined, 4))
-
-// validate if there is dependency missing
-await awaitChildProcess(
-    spawn('npm install', {
-        cwd: __root,
-        shell: true,
-        stdio: 'inherit',
-    }),
-)
-await awaitChildProcess(
-    spawn('node output.js', {
-        cwd: __root,
-        shell: true,
-        stdio: 'inherit',
-    }),
-)
diff --git a/packages/provider-proxy/package.json b/packages/provider-proxy/package.json
deleted file mode 100644
index 6f5c19a74aed..000000000000
--- a/packages/provider-proxy/package.json
+++ /dev/null
@@ -1,26 +0,0 @@
-{
-  "name": "@dimensiondev/provider-proxy",
-  "version": "0.0.1",
-  "scripts": {
-    "build": "node ./build.mjs",
-    "build:rollup": "rollup -c --environment PROXY_VERSION:$PROXY_VERSION"
-  },
-  "dependencies": {
-    "@masknet/plugin-infra": "workspace:*",
-    "@masknet/web3-providers": "workspace:*",
-    "@masknet/web3-shared-base": "workspace:*",
-    "@masknet/web3-shared-evm": "workspace:*",
-    "urlcat": "^2.0.4"
-  },
-  "devDependencies": {
-    "@rollup/plugin-alias": "^3.1.8",
-    "@rollup/plugin-commonjs": "^22.0.0",
-    "@rollup/plugin-json": "^4.1.0",
-    "@rollup/plugin-node-resolve": "^13.3.0",
-    "@rollup/plugin-replace": "^4.0.0",
-    "@rollup/plugin-sucrase": "^4.0.4",
-    "date-fns": "^2.28.0",
-    "rollup": "^2.73.0",
-    "rollup-plugin-dts": "4.2.1"
-  }
-}
diff --git a/packages/provider-proxy/rollup.config.js b/packages/provider-proxy/rollup.config.js
deleted file mode 100644
index d39b10ba756d..000000000000
--- a/packages/provider-proxy/rollup.config.js
+++ /dev/null
@@ -1,51 +0,0 @@
-import commonjs from '@rollup/plugin-commonjs'
-import node from '@rollup/plugin-node-resolve'
-import sucrase from '@rollup/plugin-sucrase'
-import json from '@rollup/plugin-json'
-import alias from '@rollup/plugin-alias'
-import dts from 'rollup-plugin-dts'
-import replace from '@rollup/plugin-replace'
-
-const config = {
-    input: './src/index.ts',
-    output: {
-        file: 'dist/output.js',
-        format: 'cjs',
-    },
-    plugins: [
-        commonjs(),
-        node(),
-        json(),
-        alias({
-            entries: [
-                { find: '@masknet/web3-shared-evm', replacement: '../web3-shared/evm/index.ts' },
-                { find: '@masknet/web3-shared-base', replacement: '../web3-shared/base/index.ts' },
-            ],
-        }),
-        sucrase({ transforms: ['typescript', 'jsx'] }),
-        replace({
-            'process.env.PROVIDER_API_ENV': JSON.stringify('proxy'),
-            'process.env.PROXY_VERSION': JSON.stringify(process.env.PROXY_VERSION),
-        }),
-    ],
-    external: (id) => {
-        if (id.startsWith('.')) return false
-        if (id.includes('@masknet')) return false
-        if (id.includes('node_modules')) return true
-        return false
-    },
-    treeshake: { moduleSideEffects: false, propertyReadSideEffects: false },
-}
-
-const dtsConfig = {
-    input: './dist/index.d.ts',
-    output: [{ file: './dist/output.d.ts', format: 'es' }],
-    plugins: [
-        dts({
-            respectExternal: true,
-        }),
-    ],
-    external: config.external,
-}
-
-export default [config, dtsConfig]
diff --git a/packages/provider-proxy/src/helper/request.ts b/packages/provider-proxy/src/helper/request.ts
deleted file mode 100644
index 3e11d6090d23..000000000000
--- a/packages/provider-proxy/src/helper/request.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import type { ProducerPushFunction } from '../types'
-import type { NonFungibleTokenAPI } from '@masknet/web3-providers'
-
-export async function collectAllPageDate<T>(
-    fetcher: (page: number, pageInfo: { [key in string]: unknown }) => Promise<NonFungibleTokenAPI.ProviderPageable<T>>,
-    pageSize: number,
-    handler?: ProducerPushFunction<T>,
-) {
-    let data: T[] = []
-    let hasNextPage = true
-    let page = 0
-    let pageInfo = {}
-    while (hasNextPage) {
-        const result = await fetcher(page, pageInfo)
-        await handler?.(result.data)
-        data = [...data, ...result.data]
-        hasNextPage = result.hasNextPage
-        pageInfo = result.nextPageInfo ?? {}
-        page = page + 1
-    }
-
-    return data
-}
diff --git a/packages/provider-proxy/src/index.ts b/packages/provider-proxy/src/index.ts
deleted file mode 100644
index bd464fb580ba..000000000000
--- a/packages/provider-proxy/src/index.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import type { RPCMethodRegistrationValue } from './types'
-import fetchProxyVersion from './producers/fetchProxyVersion'
-import fungibleTokenProducer from './producers/fungibleTokenAsset'
-import nonFungibleCollectionAsset from './producers/nonFungibleCollectionAsset'
-import nonFungibleCollectibleAsset from './producers/nonFungibleCollectibleAsset'
-import nonFungibleCollectibleAssetV2 from './producers/nonFungibleCollectibleAssetV2'
-
-export const producers: RPCMethodRegistrationValue[] = [
-    fetchProxyVersion,
-    fungibleTokenProducer,
-    nonFungibleCollectibleAsset,
-    nonFungibleCollectibleAssetV2,
-    nonFungibleCollectionAsset,
-]
diff --git a/packages/provider-proxy/src/producers/fetchProxyVersion.ts b/packages/provider-proxy/src/producers/fetchProxyVersion.ts
deleted file mode 100644
index dbd123973f37..000000000000
--- a/packages/provider-proxy/src/producers/fetchProxyVersion.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import type { ProducerPushFunction, RPCMethodRegistrationValue } from '../types'
-
-export function getProxyVersion() {
-    try {
-        return process.env.PROXY_VERSION ?? ''
-    } catch {
-        return ''
-    }
-}
-
-const fetchProxyVersion = async (push: ProducerPushFunction<string>): Promise<void> => {
-    await push([getProxyVersion()])
-}
-
-const producer: RPCMethodRegistrationValue<string, null> = {
-    method: 'mask.fetchProxyVersion',
-    producer: fetchProxyVersion,
-    distinctBy: (item) => item,
-}
-
-export default producer
diff --git a/packages/provider-proxy/src/producers/fungibleTokenAsset.ts b/packages/provider-proxy/src/producers/fungibleTokenAsset.ts
deleted file mode 100644
index ca78d22190f4..000000000000
--- a/packages/provider-proxy/src/producers/fungibleTokenAsset.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import type { Web3Plugin } from '@masknet/plugin-infra/web3'
-import { getAssetListFromDebank } from '@masknet/web3-providers'
-import type { ProducerArgBase, ProducerKeyFunction, ProducerPushFunction, RPCMethodRegistrationValue } from '../types'
-
-export interface FungibleTokenAssetArgs extends ProducerArgBase {
-    address: string
-}
-
-const fungibleTokenAsset = async (
-    push: ProducerPushFunction<Web3Plugin.Asset<Web3Plugin.FungibleToken>>,
-    getKeys: ProducerKeyFunction,
-    args: FungibleTokenAssetArgs,
-): Promise<void> => {
-    const { address } = args
-    const data = await getAssetListFromDebank(address)
-    await push(data)
-}
-
-const producer: RPCMethodRegistrationValue<Web3Plugin.Asset<Web3Plugin.FungibleToken>, FungibleTokenAssetArgs> = {
-    method: 'mask.fetchFungibleTokenAsset',
-    producer: fungibleTokenAsset,
-    distinctBy: (item) => `${item.id}_${item.chainId}`,
-}
-
-export default producer
diff --git a/packages/provider-proxy/src/producers/nonFungibleCollectibleAsset.ts b/packages/provider-proxy/src/producers/nonFungibleCollectibleAsset.ts
deleted file mode 100644
index e81802b995b1..000000000000
--- a/packages/provider-proxy/src/producers/nonFungibleCollectibleAsset.ts
+++ /dev/null
@@ -1,55 +0,0 @@
-import { getOpenSeaNFTList, getRaribleNFTList, getNFTScanNFTs } from '@masknet/web3-providers'
-import type { ERC721TokenDetailed } from '@masknet/web3-shared-evm'
-import type { ProducerArgBase, ProducerKeyFunction, ProducerPushFunction, RPCMethodRegistrationValue } from '../types'
-import { collectAllPageDate } from '../helper/request'
-
-export interface NonFungibleTokenAssetArgs extends ProducerArgBase {
-    address: string
-}
-
-const nonFungibleCollectibleAsset = async (
-    push: ProducerPushFunction<ERC721TokenDetailed>,
-    getKeys: ProducerKeyFunction,
-    args: NonFungibleTokenAssetArgs,
-): Promise<void> => {
-    const { address } = args
-    const size = 50
-    const openSeaApiKey = await getKeys('opensea')
-
-    try {
-        await collectAllPageDate<ERC721TokenDetailed>(
-            (page) => getOpenSeaNFTList(openSeaApiKey, address, page, size),
-            size,
-            push,
-        )
-    } finally {
-        try {
-            await collectAllPageDate<ERC721TokenDetailed>(
-                (page, pageInfo) => getRaribleNFTList(address, page, size, pageInfo),
-                size,
-                push,
-            )
-        } finally {
-            await collectAllPageDate<ERC721TokenDetailed>(
-                (page) => getNFTScanNFTs(address, 'erc721', page, size),
-                size,
-                push,
-            )
-
-            await collectAllPageDate<ERC721TokenDetailed>(
-                (page) => getNFTScanNFTs(address, 'erc1155', page, size),
-                size,
-                push,
-            )
-        }
-    }
-}
-
-const producer: RPCMethodRegistrationValue<ERC721TokenDetailed, NonFungibleTokenAssetArgs> = {
-    method: 'mask.fetchNonFungibleCollectibleAsset',
-    producer: nonFungibleCollectibleAsset,
-    distinctBy: (item) =>
-        `${item.tokenId.toLowerCase()}_${item.contractDetailed.address.toLowerCase()}_${item.contractDetailed.chainId}`,
-}
-
-export default producer
diff --git a/packages/provider-proxy/src/producers/nonFungibleCollectibleAssetV2.ts b/packages/provider-proxy/src/producers/nonFungibleCollectibleAssetV2.ts
deleted file mode 100644
index 71298f8eed69..000000000000
--- a/packages/provider-proxy/src/producers/nonFungibleCollectibleAssetV2.ts
+++ /dev/null
@@ -1,55 +0,0 @@
-import { getOpenSeaNFTList, getRaribleNFTList, getNFTScanNFTs } from '@masknet/web3-providers'
-import type { ERC721TokenDetailed } from '@masknet/web3-shared-evm'
-import type { ProducerArgBase, ProducerKeyFunction, ProducerPushFunction, RPCMethodRegistrationValue } from '../types'
-import { collectAllPageDate } from '../helper/request'
-
-export interface NonFungibleTokenAssetArgs extends ProducerArgBase {
-    address: string
-}
-
-const nonFungibleCollectibleAsset = async (
-    push: ProducerPushFunction<ERC721TokenDetailed>,
-    getKeys: ProducerKeyFunction,
-    args: NonFungibleTokenAssetArgs,
-): Promise<void> => {
-    const { address } = args
-    const size = 50
-    const openSeaApiKey = await getKeys('opensea')
-
-    try {
-        await collectAllPageDate<ERC721TokenDetailed>(
-            (page) => getOpenSeaNFTList(openSeaApiKey, address, page, size),
-            size,
-            push,
-        )
-    } finally {
-        const fromRarible = collectAllPageDate<ERC721TokenDetailed>(
-            (page, pageInfo) => getRaribleNFTList(address, page, size, pageInfo),
-            size,
-            push,
-        )
-
-        const formNFTScanERC721 = collectAllPageDate<ERC721TokenDetailed>(
-            (page) => getNFTScanNFTs(address, 'erc721', page, size),
-            size,
-            push,
-        )
-
-        const fromNFTScanERC1155 = collectAllPageDate<ERC721TokenDetailed>(
-            (page) => getNFTScanNFTs(address, 'erc1155', page, size),
-            size,
-            push,
-        )
-
-        await Promise.allSettled([fromRarible, formNFTScanERC721, fromNFTScanERC1155])
-    }
-}
-
-const producer: RPCMethodRegistrationValue<ERC721TokenDetailed, NonFungibleTokenAssetArgs> = {
-    method: 'mask.fetchNonFungibleCollectibleAssetV2',
-    producer: nonFungibleCollectibleAsset,
-    distinctBy: (item) =>
-        `${item.tokenId.toLowerCase()}_${item.contractDetailed.address.toLowerCase()}_${item.contractDetailed.chainId}`,
-}
-
-export default producer
diff --git a/packages/provider-proxy/src/producers/nonFungibleCollectionAsset.ts b/packages/provider-proxy/src/producers/nonFungibleCollectionAsset.ts
deleted file mode 100644
index 4a622cd6fd07..000000000000
--- a/packages/provider-proxy/src/producers/nonFungibleCollectionAsset.ts
+++ /dev/null
@@ -1,45 +0,0 @@
-import type { Web3Plugin } from '@masknet/plugin-infra/web3'
-import { getNFTScanNFTList, getOpenSeaCollectionList } from '@masknet/web3-providers'
-import { collectAllPageDate } from '../helper/request'
-import type { ProducerArgBase, ProducerKeyFunction, ProducerPushFunction, RPCMethodRegistrationValue } from '../types'
-
-interface NonFungibleCollectibleAssetArgs extends ProducerArgBase {
-    address: string
-}
-
-const nonFungibleCollectionAsset = async (
-    push: ProducerPushFunction<Web3Plugin.NonFungibleContract>,
-    getKeys: ProducerKeyFunction,
-    args: NonFungibleCollectibleAssetArgs,
-): Promise<void> => {
-    const { address } = args
-    const openSeaApiKey = await getKeys('opensea')
-
-    const pageSize = 50
-    const collectionsFromNFTScan = await getNFTScanNFTList(address)
-    await push(
-        collectionsFromNFTScan.map((x) => ({
-            id: x.contractDetailed.address,
-            chainId: x.contractDetailed.chainId,
-            name: x.contractDetailed.name,
-            symbol: x.contractDetailed.symbol,
-            address: x.contractDetailed.address,
-            iconURL: x.contractDetailed.iconURL,
-            balance: x.balance,
-        })),
-    )
-
-    const collectionsFromOpenSea = await collectAllPageDate<Web3Plugin.NonFungibleContract>(
-        (page: number) => getOpenSeaCollectionList(openSeaApiKey, address, page, pageSize),
-        pageSize,
-    )
-    await push(collectionsFromOpenSea)
-}
-
-const producer: RPCMethodRegistrationValue<Web3Plugin.NonFungibleContract, NonFungibleCollectibleAssetArgs> = {
-    method: 'mask.fetchNonFungibleCollectionAsset',
-    producer: nonFungibleCollectionAsset,
-    distinctBy: (item) => item.address,
-}
-
-export default producer
diff --git a/packages/provider-proxy/src/types.ts b/packages/provider-proxy/src/types.ts
deleted file mode 100644
index cb48133c2394..000000000000
--- a/packages/provider-proxy/src/types.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-export type ProducerPushFunction<T> = (item: T[]) => Promise<void>
-export type ProducerKeyFunction = (provider: string) => Promise<string>
-
-export interface ProducerArgBase {
-    size: number
-}
-
-export interface RPCMethodRegistrationValue<T extends unknown = unknown, TArgs extends unknown = any> {
-    method: string
-    producer(push: ProducerPushFunction<T>, getKey: ProducerKeyFunction, args: TArgs): Promise<void>
-    distinctBy(item: T): string
-}
diff --git a/packages/provider-proxy/tsconfig.json b/packages/provider-proxy/tsconfig.json
deleted file mode 100644
index fd8ba048eac1..000000000000
--- a/packages/provider-proxy/tsconfig.json
+++ /dev/null
@@ -1,16 +0,0 @@
-{
-  "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "rootDir": "./src/",
-    "outDir": "./dist/",
-    "tsBuildInfoFile": "./dist/.tsbuildinfo",
-    "emitDeclarationOnly": true
-  },
-  "include": ["./src", "./src/**/*.json"],
-  "references": [
-    { "path": "../plugin-infra" },
-    { "path": "../web3-providers" },
-    { "path": "../web3-shared/base" },
-    { "path": "../web3-shared/evm" }
-  ]
-}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 3a315e77d7e0..58a983fbca5d 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1012,39 +1012,6 @@ importers:
   packages/polyfills/types:
     specifiers: {}
 
-  packages/provider-proxy:
-    specifiers:
-      '@masknet/plugin-infra': workspace:*
-      '@masknet/web3-providers': workspace:*
-      '@masknet/web3-shared-base': workspace:*
-      '@masknet/web3-shared-evm': workspace:*
-      '@rollup/plugin-alias': ^3.1.8
-      '@rollup/plugin-commonjs': ^22.0.0
-      '@rollup/plugin-json': ^4.1.0
-      '@rollup/plugin-node-resolve': ^13.3.0
-      '@rollup/plugin-replace': ^4.0.0
-      '@rollup/plugin-sucrase': ^4.0.4
-      date-fns: ^2.28.0
-      rollup: ^2.73.0
-      rollup-plugin-dts: 4.2.1
-      urlcat: ^2.0.4
-    dependencies:
-      '@masknet/plugin-infra': link:../plugin-infra
-      '@masknet/web3-providers': link:../web3-providers
-      '@masknet/web3-shared-base': link:../web3-shared/base
-      '@masknet/web3-shared-evm': link:../web3-shared/evm
-      urlcat: 2.0.4
-    devDependencies:
-      '@rollup/plugin-alias': 3.1.9_rollup@2.73.0
-      '@rollup/plugin-commonjs': 22.0.0_rollup@2.73.0
-      '@rollup/plugin-json': 4.1.0_rollup@2.73.0
-      '@rollup/plugin-node-resolve': 13.3.0_rollup@2.73.0
-      '@rollup/plugin-replace': 4.0.0_rollup@2.73.0
-      '@rollup/plugin-sucrase': 4.0.4_rollup@2.73.0
-      date-fns: 2.28.0
-      rollup: 2.73.0
-      rollup-plugin-dts: 4.2.1_rollup@2.73.0
-
   packages/public-api:
     specifiers: {}
 
@@ -1483,7 +1450,7 @@ packages:
     dependencies:
       '@0xproject/utils': 0.2.4
       chalk: 2.4.2
-      glob: 7.2.3
+      glob: 7.2.0
       handlebars: 4.7.7
       lodash: 4.17.21
       mkdirp: 0.5.6
@@ -1498,7 +1465,7 @@ packages:
     dependencies:
       '@0xproject/utils': 0.3.4
       chalk: 2.4.2
-      glob: 7.2.3
+      glob: 7.2.0
       handlebars: 4.7.7
       lodash: 4.17.21
       mkdirp: 0.5.6
@@ -1526,12 +1493,12 @@ packages:
     dev: false
 
   /@0xproject/json-schemas/0.7.24:
-    resolution: {integrity: sha512-20MeFHMptuv0e58mjSLmW84m2HbYdmuxFeeXqGZjv047zBawONe2aXKqLX266XYjgNSif/cDVzdgh7/46J9MVQ==}
+    resolution: {integrity: sha1-IaErQ6sKtKowLQLEiRZozaNrbGQ=}
     engines: {node: '>=6.12'}
     dependencies:
       '@0xproject/typescript-typings': 0.3.2
       '@types/node': 17.0.34
-      jsonschema: 1.4.1
+      jsonschema: 1.4.0
       lodash.values: 4.3.0
     dev: false
 
@@ -1543,7 +1510,7 @@ packages:
     dev: false
 
   /@0xproject/types/0.7.0:
-    resolution: {integrity: sha512-LlTnq7raPnCioCokNy5CLDxZJeg3KtcHT4PBJD6BDiXYtNJxBWvL7/jr6JiwdjReNg7ihGi1265VKfFX7qukRw==}
+    resolution: {integrity: sha1-+tE5Je6SrU7hmAZopcsr7U3Kq48=}
     engines: {node: '>=6.12'}
     dependencies:
       '@types/node': 17.0.34
@@ -1551,7 +1518,7 @@ packages:
     dev: false
 
   /@0xproject/typescript-typings/0.3.2:
-    resolution: {integrity: sha512-sHwGTxerREyQhyXFHhZRHvy7PlbBUjsoVbxhf5f+9JasC+IhQ2Nv4uJFjOo16uUPPp7l+lsRUvK/ZwrdGRbFBA==}
+    resolution: {integrity: sha1-q8NgtEGv2pkxAEUMqDad+r91k2s=}
     engines: {node: '>=6.12'}
     dependencies:
       '@0xproject/types': 0.7.0
@@ -6971,6 +6938,7 @@ packages:
     dependencies:
       rollup: 2.73.0
       slash: 3.0.0
+    dev: false
 
   /@rollup/plugin-commonjs/22.0.0_rollup@2.73.0:
     resolution: {integrity: sha512-Ktvf2j+bAO+30awhbYoCaXpBcyPmJbaEUYClQns/+6SNCYFURbvBiNbWgHITEsIgDDWCDUclWRKEuf8cwZCFoQ==}
@@ -7017,6 +6985,7 @@ packages:
       '@rollup/pluginutils': 3.1.0_rollup@2.73.0
       magic-string: 0.25.9
       rollup: 2.73.0
+    dev: false
 
   /@rollup/plugin-sucrase/4.0.4_rollup@2.73.0:
     resolution: {integrity: sha512-YH4J8yoJb5EVnLhAwWxYAQNh2SJOR+SdZ6XdgoKEv6Kxm33riYkM8MlMaggN87UoISP52qAFyZ5ey56wu6umGg==}
@@ -11398,7 +11367,7 @@ packages:
     dev: true
 
   /array-uniq/1.0.3:
-    resolution: {integrity: sha512-MNha4BWQ6JbwhFhj03YK552f7cb3AzoE8SzeljgChvL1dl3IcvggXVz1DilzySZkCja+CXuZbdW7yATchWn8/Q==}
+    resolution: {integrity: sha1-r2rId6Jcx/dOBYiUdThY39sk/bY=}
     engines: {node: '>=0.10.0'}
 
   /array-unique/0.3.2:
@@ -11579,7 +11548,7 @@ packages:
     dev: true
 
   /async/1.5.2:
-    resolution: {integrity: sha512-nSVgobk4rv61R9PUSDtYt7mPVB2olxNR5RWJcAsH676/ef11bUZwvu7+RGYrYauVdDPcO519v68wRhXQtxsV9w==}
+    resolution: {integrity: sha1-7GphrlZIDAw8skHJVhjiCJL5Zyo=}
     dev: false
 
   /async/2.6.3:
@@ -11659,7 +11628,7 @@ packages:
     dev: false
 
   /axios/0.17.1:
-    resolution: {integrity: sha512-mZzWRyJeJ0rtK7e1/6iYBUzmeXjzei+1h1IvbedyU0sB52++tU5AU6r6TLXpwNVR0ebXIpvTVW+9CpWNyc1n8w==}
+    resolution: {integrity: sha1-LY4+XQvb1zJ/kbyBT1xXZg+Bgk0=}
     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
@@ -11693,7 +11662,7 @@ packages:
     dev: false
 
   /babel-code-frame/6.26.0:
-    resolution: {integrity: sha512-XqYMR2dfdGMW+hd0IUZ2PwK+fGeFkOxZJ0wY+JaQAHzt1Zx8LcvpiZD2NiGkEG8qx0CfkAOr5xt76d1e8vG90g==}
+    resolution: {integrity: sha1-Y/1D99weO7fONZR9uP42mj9Yx0s=}
     dependencies:
       chalk: 1.1.3
       esutils: 2.0.3
@@ -11740,7 +11709,7 @@ packages:
     dev: false
 
   /babel-helper-builder-binary-assignment-operator-visitor/6.24.1:
-    resolution: {integrity: sha512-gCtfYORSG1fUMX4kKraymq607FWgMWg+j42IFPc18kFQEsmtaibP4UrqsXt8FlEJle25HUd4tsoDR7H2wDhe9Q==}
+    resolution: {integrity: sha1-zORReto1b0IgvK6KAsKzRvmlZmQ=}
     dependencies:
       babel-helper-explode-assignable-expression: 6.24.1
       babel-runtime: 6.26.0
@@ -11750,7 +11719,7 @@ packages:
     dev: false
 
   /babel-helper-call-delegate/6.24.1:
-    resolution: {integrity: sha512-RL8n2NiEj+kKztlrVJM9JT1cXzzAdvWFh76xh/H1I4nKwunzE4INBXn8ieCZ+wh4zWszZk7NBS1s/8HR5jDkzQ==}
+    resolution: {integrity: sha1-7Oaqzdx25Bw0YfiL/Fdb0Nqi340=}
     dependencies:
       babel-helper-hoist-variables: 6.24.1
       babel-runtime: 6.26.0
@@ -11761,7 +11730,7 @@ packages:
     dev: false
 
   /babel-helper-define-map/6.26.0:
-    resolution: {integrity: sha512-bHkmjcC9lM1kmZcVpA5t2om2nzT/xiZpo6TJq7UlZ3wqKfzia4veeXbIhKvJXAMzhhEBd3cR1IElL5AenWEUpA==}
+    resolution: {integrity: sha1-pfVtq0GiX5fstJjH66ypgZ+Vvl8=}
     dependencies:
       babel-helper-function-name: 6.24.1
       babel-runtime: 6.26.0
@@ -11772,7 +11741,7 @@ packages:
     dev: false
 
   /babel-helper-explode-assignable-expression/6.24.1:
-    resolution: {integrity: sha512-qe5csbhbvq6ccry9G7tkXbzNtcDiH4r51rrPUbwwoTzZ18AqxWYRZT6AOmxrpxKnQBW0pYlBI/8vh73Z//78nQ==}
+    resolution: {integrity: sha1-8luCz33BBDPFX3BZLVdGQArCLKo=}
     dependencies:
       babel-runtime: 6.26.0
       babel-traverse: 6.26.0
@@ -11782,7 +11751,7 @@ packages:
     dev: false
 
   /babel-helper-function-name/6.24.1:
-    resolution: {integrity: sha512-Oo6+e2iX+o9eVvJ9Y5eKL5iryeRdsIkwRYheCuhYdVHsdEQysbc2z2QkqCLIYnNxkT5Ss3ggrHdXiDI7Dhrn4Q==}
+    resolution: {integrity: sha1-00dbjAPtmCQqJbSDUasYOZ01gKk=}
     dependencies:
       babel-helper-get-function-arity: 6.24.1
       babel-runtime: 6.26.0
@@ -11794,28 +11763,28 @@ packages:
     dev: false
 
   /babel-helper-get-function-arity/6.24.1:
-    resolution: {integrity: sha512-WfgKFX6swFB1jS2vo+DwivRN4NB8XUdM3ij0Y1gnC21y1tdBoe6xjVnd7NSI6alv+gZXCtJqvrTeMW3fR/c0ng==}
+    resolution: {integrity: sha1-j3eCqpNAfEHTqlCQj4mwMbG2hT0=}
     dependencies:
       babel-runtime: 6.26.0
       babel-types: 6.26.0
     dev: false
 
   /babel-helper-hoist-variables/6.24.1:
-    resolution: {integrity: sha512-zAYl3tqerLItvG5cKYw7f1SpvIxS9zi7ohyGHaI9cgDUjAT6YcY9jIEH5CstetP5wHIVSceXwNS7Z5BpJg+rOw==}
+    resolution: {integrity: sha1-HssnaJydJVE+rbyZFKc/VAi+enY=}
     dependencies:
       babel-runtime: 6.26.0
       babel-types: 6.26.0
     dev: false
 
   /babel-helper-optimise-call-expression/6.24.1:
-    resolution: {integrity: sha512-Op9IhEaxhbRT8MDXx2iNuMgciu2V8lDvYCNQbDGjdBNCjaMvyLf4wl4A3b8IgndCyQF8TwfgsQ8T3VD8aX1/pA==}
+    resolution: {integrity: sha1-96E0J7qfc/j0+pk8VKl4gtEkQlc=}
     dependencies:
       babel-runtime: 6.26.0
       babel-types: 6.26.0
     dev: false
 
   /babel-helper-regex/6.26.0:
-    resolution: {integrity: sha512-VlPiWmqmGJp0x0oK27Out1D+71nVVCTSdlbhIVoaBAj2lUgrNjBCRR9+llO4lTSb2O4r7PJg+RobRkhBrf6ofg==}
+    resolution: {integrity: sha1-MlxZ+QL4LyS3T6zu0DY5VPZJXnI=}
     dependencies:
       babel-runtime: 6.26.0
       babel-types: 6.26.0
@@ -11823,7 +11792,7 @@ packages:
     dev: false
 
   /babel-helper-remap-async-to-generator/6.24.1:
-    resolution: {integrity: sha512-RYqaPD0mQyQIFRu7Ho5wE2yvA/5jxqCIj/Lv4BXNq23mHYu/vxikOy2JueLiBxQknwapwrJeNCesvY0ZcfnlHg==}
+    resolution: {integrity: sha1-XsWBgnrXI/7N04HxySg5BnbkVRs=}
     dependencies:
       babel-helper-function-name: 6.24.1
       babel-runtime: 6.26.0
@@ -11835,7 +11804,7 @@ packages:
     dev: false
 
   /babel-helper-replace-supers/6.24.1:
-    resolution: {integrity: sha512-sLI+u7sXJh6+ToqDr57Bv973kCepItDhMou0xCP2YPVmR1jkHSCY+p1no8xErbV1Siz5QE8qKT1WIwybSWlqjw==}
+    resolution: {integrity: sha1-v22/5Dk40XNpohPKiov3S2qQqxo=}
     dependencies:
       babel-helper-optimise-call-expression: 6.24.1
       babel-messages: 6.23.0
@@ -11848,7 +11817,7 @@ packages:
     dev: false
 
   /babel-helpers/6.24.1:
-    resolution: {integrity: sha512-n7pFrqQm44TCYvrCDb0MqabAF+JUBq+ijBvNMUxpkLjJaAu32faIexewMumrH5KLLJ1HDyT0PTEqRyAe/GwwuQ==}
+    resolution: {integrity: sha1-NHHenK7DiOXIUOWX5Yom3fN2ArI=}
     dependencies:
       babel-runtime: 6.26.0
       babel-template: 6.26.0
@@ -11967,7 +11936,7 @@ packages:
     dev: true
 
   /babel-messages/6.23.0:
-    resolution: {integrity: sha512-Bl3ZiA+LjqaMtNYopA9TYE9HP1tQ+E5dLxE0XrAzcIJeK2UqF0/EaqXwBn9esd4UmTfEab+P+UYQ1GnioFIb/w==}
+    resolution: {integrity: sha1-8830cDhYA1sqKVHG7F7fbGLyYw4=}
     dependencies:
       babel-runtime: 6.26.0
     dev: false
@@ -11990,7 +11959,7 @@ packages:
     dev: true
 
   /babel-plugin-check-es2015-constants/6.22.0:
-    resolution: {integrity: sha512-B1M5KBP29248dViEo1owyY32lk1ZSH2DaNNrXLGt8lyjjHm7pBqAdQ7VKUPR6EEDO323+OvT3MQXbCin8ooWdA==}
+    resolution: {integrity: sha1-NRV7EBQm/S/9PaP3XH0ekYNbv4o=}
     dependencies:
       babel-runtime: 6.26.0
     dev: false
@@ -12191,11 +12160,11 @@ packages:
     dev: true
 
   /babel-plugin-syntax-async-functions/6.13.0:
-    resolution: {integrity: sha512-4Zp4unmHgw30A1eWI5EpACji2qMocisdXhAftfhXoSV9j0Tvj6nRFE3tOmRY912E0FMRm/L5xWE7MGVT2FoLnw==}
+    resolution: {integrity: sha1-ytnK0RkbWtY0vzCuCHI5HgZHvpU=}
     dev: false
 
   /babel-plugin-syntax-exponentiation-operator/6.13.0:
-    resolution: {integrity: sha512-Z/flU+T9ta0aIEKl1tGEmN/pZiI1uXmCiGFRegKacQfEJzp7iNsKloZmyJlQr+75FCJtiFfGIK03SiCvCt9cPQ==}
+    resolution: {integrity: sha1-nufoM3KQ2pUoggGmpX9BcDF4MN4=}
     dev: false
 
   /babel-plugin-syntax-jsx/6.18.0:
@@ -12203,11 +12172,11 @@ packages:
     dev: true
 
   /babel-plugin-syntax-trailing-function-commas/6.22.0:
-    resolution: {integrity: sha512-Gx9CH3Q/3GKbhs07Bszw5fPTlU+ygrOGfAhEt7W2JICwufpC4SuO0mG0+4NykPBSYPMJhqvVlDBU17qB1D+hMQ==}
+    resolution: {integrity: sha1-ugNgk3+NBuQBgKQ/4NVhb/9TLPM=}
     dev: false
 
   /babel-plugin-transform-async-to-generator/6.24.1:
-    resolution: {integrity: sha512-7BgYJujNCg0Ti3x0c/DL3tStvnKS6ktIYOmo9wginv/dfZOrbSZ+qG4IRRHMBOzZ5Awb1skTiAsQXg/+IWkZYw==}
+    resolution: {integrity: sha1-ZTbjeK/2yx1VF6wOQOs+n8jQh2E=}
     dependencies:
       babel-helper-remap-async-to-generator: 6.24.1
       babel-plugin-syntax-async-functions: 6.13.0
@@ -12217,19 +12186,19 @@ packages:
     dev: false
 
   /babel-plugin-transform-es2015-arrow-functions/6.22.0:
-    resolution: {integrity: sha512-PCqwwzODXW7JMrzu+yZIaYbPQSKjDTAsNNlK2l5Gg9g4rz2VzLnZsStvp/3c46GfXpwkyufb3NCyG9+50FF1Vg==}
+    resolution: {integrity: sha1-RSaSy3EdX3ncf4XkQM5BufJE0iE=}
     dependencies:
       babel-runtime: 6.26.0
     dev: false
 
   /babel-plugin-transform-es2015-block-scoped-functions/6.22.0:
-    resolution: {integrity: sha512-2+ujAT2UMBzYFm7tidUsYh+ZoIutxJ3pN9IYrF1/H6dCKtECfhmB8UkHVpyxDwkj0CYbQG35ykoz925TUnBc3A==}
+    resolution: {integrity: sha1-u8UbSflk1wy42OC5ToICRs46YUE=}
     dependencies:
       babel-runtime: 6.26.0
     dev: false
 
   /babel-plugin-transform-es2015-block-scoping/6.26.0:
-    resolution: {integrity: sha512-YiN6sFAQ5lML8JjCmr7uerS5Yc/EMbgg9G8ZNmk2E3nYX4ckHR01wrkeeMijEf5WHNK5TW0Sl0Uu3pv3EdOJWw==}
+    resolution: {integrity: sha1-1w9SmcEwjQXBL0Y4E7CgnnOxiV8=}
     dependencies:
       babel-runtime: 6.26.0
       babel-template: 6.26.0
@@ -12241,7 +12210,7 @@ packages:
     dev: false
 
   /babel-plugin-transform-es2015-classes/6.24.1:
-    resolution: {integrity: sha512-5Dy7ZbRinGrNtmWpquZKZ3EGY8sDgIVB4CU8Om8q8tnMLrD/m94cKglVcHps0BCTdZ0TJeeAWOq2TK9MIY6cag==}
+    resolution: {integrity: sha1-WkxYpQyclGHlZLSyo7+ryXolhNs=}
     dependencies:
       babel-helper-define-map: 6.26.0
       babel-helper-function-name: 6.24.1
@@ -12257,7 +12226,7 @@ packages:
     dev: false
 
   /babel-plugin-transform-es2015-computed-properties/6.24.1:
-    resolution: {integrity: sha512-C/uAv4ktFP/Hmh01gMTvYvICrKze0XVX9f2PdIXuriCSvUmV9j+u+BB9f5fJK3+878yMK6dkdcq+Ymr9mrcLzw==}
+    resolution: {integrity: sha1-b+Ko0WiV1WNPTNmZttNICjCBWbM=}
     dependencies:
       babel-runtime: 6.26.0
       babel-template: 6.26.0
@@ -12266,26 +12235,26 @@ packages:
     dev: false
 
   /babel-plugin-transform-es2015-destructuring/6.23.0:
-    resolution: {integrity: sha512-aNv/GDAW0j/f4Uy1OEPZn1mqD+Nfy9viFGBfQ5bZyT35YqOiqx7/tXdyfZkJ1sC21NyEsBdfDY6PYmLHF4r5iA==}
+    resolution: {integrity: sha1-mXux8auWf2gtKwh2/jWNYOdlxW0=}
     dependencies:
       babel-runtime: 6.26.0
     dev: false
 
   /babel-plugin-transform-es2015-duplicate-keys/6.24.1:
-    resolution: {integrity: sha512-ossocTuPOssfxO2h+Z3/Ea1Vo1wWx31Uqy9vIiJusOP4TbF7tPs9U0sJ9pX9OJPf4lXRGj5+6Gkl/HHKiAP5ug==}
+    resolution: {integrity: sha1-c+s9MQypaePvnskcU3QabxV2Qj4=}
     dependencies:
       babel-runtime: 6.26.0
       babel-types: 6.26.0
     dev: false
 
   /babel-plugin-transform-es2015-for-of/6.23.0:
-    resolution: {integrity: sha512-DLuRwoygCoXx+YfxHLkVx5/NpeSbVwfoTeBykpJK7JhYWlL/O8hgAK/reforUnZDlxasOrVPPJVI/guE3dCwkw==}
+    resolution: {integrity: sha1-9HyVsrYT3x0+zC/bdXNiPHUkhpE=}
     dependencies:
       babel-runtime: 6.26.0
     dev: false
 
   /babel-plugin-transform-es2015-function-name/6.24.1:
-    resolution: {integrity: sha512-iFp5KIcorf11iBqu/y/a7DK3MN5di3pNCzto61FqCNnUX4qeBwcV1SLqe10oXNnCaxBUImX3SckX2/o1nsrTcg==}
+    resolution: {integrity: sha1-g0yJhTvDaxrw86TF26qU/Y6sqos=}
     dependencies:
       babel-helper-function-name: 6.24.1
       babel-runtime: 6.26.0
@@ -12295,13 +12264,13 @@ packages:
     dev: false
 
   /babel-plugin-transform-es2015-literals/6.22.0:
-    resolution: {integrity: sha512-tjFl0cwMPpDYyoqYA9li1/7mGFit39XiNX5DKC/uCNjBctMxyL1/PT/l4rSlbvBG1pOKI88STRdUsWXB3/Q9hQ==}
+    resolution: {integrity: sha1-T1SgLWzWbPkVKAAZox0xklN3yi4=}
     dependencies:
       babel-runtime: 6.26.0
     dev: false
 
   /babel-plugin-transform-es2015-modules-amd/6.24.1:
-    resolution: {integrity: sha512-LnIIdGWIKdw7zwckqx+eGjcS8/cl8D74A3BpJbGjKTFFNJSMrjN4bIh22HY1AlkUbeLG6X6OZj56BDvWD+OeFA==}
+    resolution: {integrity: sha1-Oz5UAXI5hC1tGcMBHEvS8AoA0VQ=}
     dependencies:
       babel-plugin-transform-es2015-modules-commonjs: 6.26.2
       babel-runtime: 6.26.0
@@ -12322,7 +12291,7 @@ packages:
     dev: false
 
   /babel-plugin-transform-es2015-modules-systemjs/6.24.1:
-    resolution: {integrity: sha512-ONFIPsq8y4bls5PPsAWYXH/21Hqv64TBxdje0FvU3MhIV6QM2j5YS7KvAzg/nTIVLot2D2fmFQrFWCbgHlFEjg==}
+    resolution: {integrity: sha1-/4mhQrkRmpBhlfXxBuzzBdlAfSM=}
     dependencies:
       babel-helper-hoist-variables: 6.24.1
       babel-runtime: 6.26.0
@@ -12332,7 +12301,7 @@ packages:
     dev: false
 
   /babel-plugin-transform-es2015-modules-umd/6.24.1:
-    resolution: {integrity: sha512-LpVbiT9CLsuAIp3IG0tfbVo81QIhn6pE8xBJ7XSeCtFlMltuar5VuBV6y6Q45tpui9QWcy5i0vLQfCfrnF7Kiw==}
+    resolution: {integrity: sha1-rJl+YoXNGO1hdq22B9YCNErThGg=}
     dependencies:
       babel-plugin-transform-es2015-modules-amd: 6.24.1
       babel-runtime: 6.26.0
@@ -12342,7 +12311,7 @@ packages:
     dev: false
 
   /babel-plugin-transform-es2015-object-super/6.24.1:
-    resolution: {integrity: sha512-8G5hpZMecb53vpD3mjs64NhI1au24TAmokQ4B+TBFBjN9cVoGoOvotdrMMRmHvVZUEvqGUPWL514woru1ChZMA==}
+    resolution: {integrity: sha1-JM72muIcuDp/hgPa0CH1cusnj40=}
     dependencies:
       babel-helper-replace-supers: 6.24.1
       babel-runtime: 6.26.0
@@ -12351,7 +12320,7 @@ packages:
     dev: false
 
   /babel-plugin-transform-es2015-parameters/6.24.1:
-    resolution: {integrity: sha512-8HxlW+BB5HqniD+nLkQ4xSAVq3bR/pcYW9IigY+2y0dI+Y7INFeTbfAQr+63T3E4UDsZGjyb+l9txUnABWxlOQ==}
+    resolution: {integrity: sha1-V6w1GrScrxSpfNE7CfZv3wpiXys=}
     dependencies:
       babel-helper-call-delegate: 6.24.1
       babel-helper-get-function-arity: 6.24.1
@@ -12364,20 +12333,20 @@ packages:
     dev: false
 
   /babel-plugin-transform-es2015-shorthand-properties/6.24.1:
-    resolution: {integrity: sha512-mDdocSfUVm1/7Jw/FIRNw9vPrBQNePy6wZJlR8HAUBLybNp1w/6lr6zZ2pjMShee65t/ybR5pT8ulkLzD1xwiw==}
+    resolution: {integrity: sha1-JPh11nIch2YbvZmkYi5R8U3jiqA=}
     dependencies:
       babel-runtime: 6.26.0
       babel-types: 6.26.0
     dev: false
 
   /babel-plugin-transform-es2015-spread/6.22.0:
-    resolution: {integrity: sha512-3Ghhi26r4l3d0Js933E5+IhHwk0A1yiutj9gwvzmFbVV0sPMYk2lekhOufHBswX7NCoSeF4Xrl3sCIuSIa+zOg==}
+    resolution: {integrity: sha1-1taKmfia7cRTbIGlQujdnxdG+NE=}
     dependencies:
       babel-runtime: 6.26.0
     dev: false
 
   /babel-plugin-transform-es2015-sticky-regex/6.24.1:
-    resolution: {integrity: sha512-CYP359ADryTo3pCsH0oxRo/0yn6UsEZLqYohHmvLQdfS9xkf+MbCzE3/Kolw9OYIY4ZMilH25z/5CbQbwDD+lQ==}
+    resolution: {integrity: sha1-AMHNsaynERLN8M9hJsLta0V8zbw=}
     dependencies:
       babel-helper-regex: 6.26.0
       babel-runtime: 6.26.0
@@ -12385,19 +12354,19 @@ packages:
     dev: false
 
   /babel-plugin-transform-es2015-template-literals/6.22.0:
-    resolution: {integrity: sha512-x8b9W0ngnKzDMHimVtTfn5ryimars1ByTqsfBDwAqLibmuuQY6pgBQi5z1ErIsUOWBdw1bW9FSz5RZUojM4apg==}
+    resolution: {integrity: sha1-qEs0UPfp+PH2g51taH2oS7EjbY0=}
     dependencies:
       babel-runtime: 6.26.0
     dev: false
 
   /babel-plugin-transform-es2015-typeof-symbol/6.23.0:
-    resolution: {integrity: sha512-fz6J2Sf4gYN6gWgRZaoFXmq93X+Li/8vf+fb0sGDVtdeWvxC9y5/bTD7bvfWMEq6zetGEHpWjtzRGSugt5kNqw==}
+    resolution: {integrity: sha1-3sCfHN3/lLUqxz1QXITfWdzOs3I=}
     dependencies:
       babel-runtime: 6.26.0
     dev: false
 
   /babel-plugin-transform-es2015-unicode-regex/6.24.1:
-    resolution: {integrity: sha512-v61Dbbihf5XxnYjtBN04B/JBvsScY37R1cZT5r9permN1cp+b70DY3Ib3fIkgn1DI9U3tGgBJZVD8p/mE/4JbQ==}
+    resolution: {integrity: sha1-04sS9C6nMj9yk4fxinxa4frrNek=}
     dependencies:
       babel-helper-regex: 6.26.0
       babel-runtime: 6.26.0
@@ -12405,7 +12374,7 @@ packages:
     dev: false
 
   /babel-plugin-transform-exponentiation-operator/6.24.1:
-    resolution: {integrity: sha512-LzXDmbMkklvNhprr20//RStKVcT8Cu+SQtX18eMHLhjHf2yFzwtQ0S2f0jQ+89rokoNdmwoSqYzAhq86FxlLSQ==}
+    resolution: {integrity: sha1-KrDJx/MJj6SJB3cruBP+QejeOg4=}
     dependencies:
       babel-helper-builder-binary-assignment-operator-visitor: 6.24.1
       babel-plugin-syntax-exponentiation-operator: 6.13.0
@@ -12415,13 +12384,13 @@ packages:
     dev: false
 
   /babel-plugin-transform-regenerator/6.26.0:
-    resolution: {integrity: sha512-LS+dBkUGlNR15/5WHKe/8Neawx663qttS6AGqoOUhICc9d1KciBvtrQSuc0PI+CxQ2Q/S1aKuJ+u64GtLdcEZg==}
+    resolution: {integrity: sha1-4HA2lvveJ/Cj78rPi03KL3s6jy8=}
     dependencies:
       regenerator-transform: 0.10.1
     dev: false
 
   /babel-plugin-transform-strict-mode/6.24.1:
-    resolution: {integrity: sha512-j3KtSpjyLSJxNoCDrhwiJad8kw0gJ9REGj8/CqL0HeRyLnvUNYV9zcqluL6QJSXh3nfsLEmSLvwRfGzrgR96Pw==}
+    resolution: {integrity: sha1-1fr3qleKZbvlkc9e2uBKDGcCB1g=}
     dependencies:
       babel-runtime: 6.26.0
       babel-types: 6.26.0
@@ -12502,7 +12471,7 @@ packages:
     dev: true
 
   /babel-register/6.26.0:
-    resolution: {integrity: sha512-veliHlHX06wjaeY8xNITbveXSiI+ASFnOqvne/LaIJIqOWi2Ogmj91KOugEz/hoh/fwMhXNBJPCv8Xaz5CyM4A==}
+    resolution: {integrity: sha1-btAhFz4vy0htestFxgCahW9kcHE=}
     dependencies:
       babel-core: 6.26.3
       babel-runtime: 6.26.0
@@ -12516,14 +12485,14 @@ packages:
     dev: false
 
   /babel-runtime/6.26.0:
-    resolution: {integrity: sha512-ITKNuq2wKlW1fJg9sSW52eepoYgZBggvOAHC0u/CYu/qxQ9EVzThCgR69BnSXLHjy2f7SY5zaQ4yt7H9ZVxY2g==}
+    resolution: {integrity: sha1-llxwWGaOgrVde/4E/yM3vItWR/4=}
     dependencies:
       core-js: 2.6.12
       regenerator-runtime: 0.11.1
     dev: false
 
   /babel-template/6.26.0:
-    resolution: {integrity: sha512-PCOcLFW7/eazGUKIoqH97sO9A2UYMahsn/yRQ7uOk37iutwjq7ODtcTNF+iFDSHNfkctqsLRjLP7URnOx0T1fg==}
+    resolution: {integrity: sha1-3gPi0WOWsGn0bdn/+FIfsaDjXgI=}
     dependencies:
       babel-runtime: 6.26.0
       babel-traverse: 6.26.0
@@ -12535,7 +12504,7 @@ packages:
     dev: false
 
   /babel-traverse/6.26.0:
-    resolution: {integrity: sha512-iSxeXx7apsjCHe9c7n8VtRXGzI2Bk1rBSOJgCCjfyXb6v1aCqE1KSEpq/8SXuVN8Ka/Rh1WDTF0MDzkvTA4MIA==}
+    resolution: {integrity: sha1-RqnL1+3MYsjlwGTi0tjQ9ANXZu4=}
     dependencies:
       babel-code-frame: 6.26.0
       babel-messages: 6.23.0
@@ -12551,7 +12520,7 @@ packages:
     dev: false
 
   /babel-types/6.26.0:
-    resolution: {integrity: sha512-zhe3V/26rCWsEZK8kZN+HaQj5yQ1CilTObixFzKW1UWjqG7618Twz6YEsCnjfg5gBcJh02DrpCkS9h98ZqDY+g==}
+    resolution: {integrity: sha1-o7Bz+Uq0nrb6Vc1lInozQ4BjJJc=}
     dependencies:
       babel-runtime: 6.26.0
       esutils: 2.0.3
@@ -12560,7 +12529,7 @@ packages:
     dev: false
 
   /babelify/7.3.0:
-    resolution: {integrity: sha512-vID8Fz6pPN5pJMdlUnNFSfrlcx5MUule4k9aKs/zbZPyXxMTcRrB0M4Tarw22L8afr8eYSWxDPYCob3TdrqtlA==}
+    resolution: {integrity: sha1-qlau3nBn/XvVSWZu4W3ChQh+iOU=}
     dependencies:
       babel-core: 6.26.3
       object-assign: 4.1.1
@@ -12717,7 +12686,7 @@ packages:
       file-uri-to-path: 1.0.0
 
   /bintrees/1.0.2:
-    resolution: {integrity: sha512-VOMgTMwjAaUG580SXn3LacVgjurrbMme7ZZNYGSSV7mmtY6QQRh0Eg3pwIcntQ77DErK1L0NxkbetjcoXzVwKw==}
+    resolution: {integrity: sha1-SfiW1uhYpKSZ34XDj7OZua/4QPg=}
     dev: false
 
   /bip32/2.0.6:
@@ -13054,8 +13023,8 @@ packages:
     resolution: {integrity: sha512-WHVocJYavUwVgVViC0ORikPHQquXwVh939TaelZ4WDqpWgTX/FsGhl/+P4qBUAGcRvtOgDgC+xftNWWp2RUTAQ==}
     hasBin: true
     dependencies:
-      caniuse-lite: 1.0.30001341
-      electron-to-chromium: 1.4.137
+      caniuse-lite: 1.0.30001332
+      electron-to-chromium: 1.4.106
     dev: false
 
   /browserslist/4.20.2:
@@ -13172,7 +13141,7 @@ packages:
       node-gyp-build: 4.3.0
 
   /builtin-modules/1.1.1:
-    resolution: {integrity: sha512-wxXCdllwGhI2kCC0MnvTGYTMvnVZTvqgypkiTI8Pa5tcz2i6VqsqwYGgqwXji+4RgCzms6EajE4IxiUH6HH8nQ==}
+    resolution: {integrity: sha1-Jw8HbFpywC9bZaR9+Uxf46J4iS8=}
     engines: {node: '>=0.10.0'}
     dev: false
 
@@ -13354,7 +13323,6 @@ packages:
 
   /caniuse-lite/1.0.30001332:
     resolution: {integrity: sha512-10T30NYOEQtN6C11YGg411yebhvpnC6Z102+B95eAsN0oB6KUs01ivE8u+G6FMIRtIrVlYXhL+LUwQ3/hXwDWw==}
-    dev: true
 
   /caniuse-lite/1.0.30001341:
     resolution: {integrity: sha512-2SodVrFFtvGENGCv0ChVJIDQ0KPaS1cg7/qtfMaICgeMolDdo/Z2OD32F0Aq9yl6F4YFwGPBS5AaPqNYiW4PoA==}
@@ -13454,7 +13422,7 @@ packages:
     dev: false
 
   /checkpoint-store/1.1.0:
-    resolution: {integrity: sha512-J/NdY2WvIx654cc6LWSq/IYFFCUf75fFTgwzFnmbqyORH4MwgiQCgswLLKBGzmsyTI5V7i5bp/So6sMbDWhedg==}
+    resolution: {integrity: sha1-BOTLUWuRQziTWB5tRgGnjpVS6gY=}
     dependencies:
       functional-red-black-tree: 1.0.1
     dev: false
@@ -14913,6 +14881,7 @@ packages:
   /date-fns/2.28.0:
     resolution: {integrity: sha512-8d35hViGYx/QH0icHYCeLmsLmMUheMmTyV9Fcm6gvNwdw31yXXH+O85sOBJ+OLnLQMKZowvpKb6FgMIQjcpvQw==}
     engines: {node: '>=0.11'}
+    dev: false
 
   /debug/2.6.9:
     resolution: {integrity: sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==}
@@ -15614,7 +15583,6 @@ packages:
 
   /electron-to-chromium/1.4.106:
     resolution: {integrity: sha512-ZYfpVLULm67K7CaaGP7DmjyeMY4naxsbTy+syVVxT6QHI1Ww8XbJjmr9fDckrhq44WzCrcC5kH3zGpdusxwwqg==}
-    dev: true
 
   /electron-to-chromium/1.4.137:
     resolution: {integrity: sha512-0Rcpald12O11BUogJagX3HsCN3FE83DSqWjgXoHo5a72KUKMSfI39XBgJpgNNxS9fuGzytaFjE06kZkiVFy2qA==}
@@ -15937,10 +15905,9 @@ packages:
       object-inspect: 1.12.0
       object-keys: 1.1.1
       object.assign: 4.1.2
-      string.prototype.trimend: 1.0.4
-      string.prototype.trimstart: 1.0.4
-      unbox-primitive: 1.0.1
-    dev: true
+      string.prototype.trimend: 1.0.5
+      string.prototype.trimstart: 1.0.5
+      unbox-primitive: 1.0.2
 
   /es-abstract/1.20.1:
     resolution: {integrity: sha512-WEm2oBhfoI2sImeM4OF2zE2V3BYdSF+KnSi9Sidz51fQHd7+JuF8Xgcj9/0o+OWeIeIS/MiuNnlruQrJf16GQA==}
@@ -15969,6 +15936,7 @@ packages:
       string.prototype.trimend: 1.0.5
       string.prototype.trimstart: 1.0.5
       unbox-primitive: 1.0.2
+    dev: true
 
   /es-array-method-boxes-properly/1.0.0:
     resolution: {integrity: sha512-wd6JXUmyHmt8T5a2xreUwKcGPq6f1f+WwIJkijUqiGcJz1qqnZgP6XIK+QyIWU5lT7imeNxUll48bziG+TSYcA==}
@@ -17871,6 +17839,7 @@ packages:
       define-properties: 1.1.4
       es-abstract: 1.20.1
       functions-have-names: 1.2.3
+    dev: true
 
   /functional-red-black-tree/1.0.1:
     resolution: {integrity: sha1-GwqzvVU7Kg1jmdKcDj6gslIHgyc=}
@@ -20837,8 +20806,8 @@ packages:
     resolution: {integrity: sha1-P02uSpH6wxX3EGL4UhzCOfE2YoA=}
     engines: {'0': node >= 0.2.0}
 
-  /jsonschema/1.4.1:
-    resolution: {integrity: sha512-S6cATIPVv1z0IlxdN+zUk5EPjkGCdnhN4wVSBlvoUO1tOLJootbo9CquNJmbIh4yikWHiUedhRYrNPn1arpEmQ==}
+  /jsonschema/1.4.0:
+    resolution: {integrity: sha512-/YgW6pRMr6M7C+4o8kS+B/2myEpHCrxO4PEWnqJNBFMjn7EWXqlQ4tGwL6xTHeRplwuZmcAncdvfOad1nT2yMw==}
     dev: false
 
   /jsprim/1.4.2:
@@ -21419,6 +21388,7 @@ packages:
     engines: {node: '>=12'}
     dependencies:
       sourcemap-codec: 1.4.8
+    dev: false
 
   /make-dir/2.1.0:
     resolution: {integrity: sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==}
@@ -25154,6 +25124,7 @@ packages:
       rollup: 2.73.0
     optionalDependencies:
       '@babel/code-frame': 7.16.7
+    dev: false
 
   /rollup-plugin-terser/7.0.2_rollup@2.73.0:
     resolution: {integrity: sha512-w3iIaU4OxcF52UUXiZNsNeuXIMDvFrr+ZXK6bFZ0Q60qyVfq4uLptoS4bbq3paG3x216eQllFZX7zt6TIImguQ==}
@@ -26380,7 +26351,7 @@ packages:
     dependencies:
       call-bind: 1.0.2
       define-properties: 1.1.4
-      es-abstract: 1.20.1
+      es-abstract: 1.19.5
     dev: false
 
   /string.prototype.trimend/1.0.4:
@@ -26394,7 +26365,7 @@ packages:
     dependencies:
       call-bind: 1.0.2
       define-properties: 1.1.4
-      es-abstract: 1.20.1
+      es-abstract: 1.19.5
 
   /string.prototype.trimstart/1.0.4:
     resolution: {integrity: sha512-jh6e984OBfvxS50tdY2nRZnoC5/mLFKOREQfw8t5yytkoUsJRNxvI/E39qu1sD0OtWI3OC0XgKSmcWwziwYuZw==}
@@ -26407,7 +26378,7 @@ packages:
     dependencies:
       call-bind: 1.0.2
       define-properties: 1.1.4
-      es-abstract: 1.20.1
+      es-abstract: 1.19.5
 
   /string_decoder/0.10.31:
     resolution: {integrity: sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ=}
@@ -26692,7 +26663,7 @@ packages:
       defined: 1.0.0
       dotignore: 0.1.2
       for-each: 0.3.3
-      glob: 7.2.3
+      glob: 7.2.0
       has: 1.0.3
       inherits: 2.0.4
       is-regex: 1.1.4
@@ -27437,7 +27408,7 @@ packages:
       chalk: 2.4.2
       commander: 2.20.3
       diff: 4.0.2
-      glob: 7.2.3
+      glob: 7.2.0
       js-yaml: 3.14.1
       minimatch: 3.1.2
       mkdirp: 0.5.6
@@ -27468,7 +27439,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'
+      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'
     peerDependenciesMeta:
       typescript:
         optional: true
@@ -27479,7 +27450,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'
+      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'
     peerDependenciesMeta:
       typescript:
         optional: true
@@ -29970,7 +29941,7 @@ packages:
       ethereumjs-abi: github.com/ProjectWyvern/ethereumjs-abi/3d2d89641a6ad5984929b6ca4b646452ec74f73d
       ethereumjs-util: 5.2.1
       json-loader: 0.5.7
-      jsonschema: 1.4.1
+      jsonschema: 1.4.0
       lodash: 4.17.21
       web3: 0.20.7
     dev: false
@@ -29995,7 +29966,7 @@ packages:
       ethereumjs-abi: github.com/ProjectWyvern/ethereumjs-abi/3d2d89641a6ad5984929b6ca4b646452ec74f73d
       ethereumjs-util: 5.2.1
       json-loader: 0.5.7
-      jsonschema: 1.4.1
+      jsonschema: 1.4.0
       lodash: 4.17.21
       ts-node: 6.2.0
       tslint: 5.20.1_typescript@2.9.2
diff --git a/tsconfig.json b/tsconfig.json
index a01cc8449468..6b86438f9685 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -7,7 +7,6 @@
     { "path": "./packages/mask-sdk/main" },
     { "path": "./packages/mask-sdk/public-api" },
     { "path": "./packages/dashboard" },
-    { "path": "./packages/provider-proxy" },
     // Storybooks are considered as a "project" not depended by any other project
     { "path": "./packages/dashboard/stories" },
     { "path": "./packages/theme/stories" },
@@ -70,7 +69,6 @@
       "@masknet/mask-sdk": ["./packages/mask-sdk/server"],
       "@masknet/plugin-infra": ["./packages/plugin-infra/src"],
       "@masknet/global-types/*": ["./packages/polyfills/types/*"],
-      "@masknet/provider-proxy": ["./packages/provider-proxy/src"],
       "@masknet/public-api": ["./packages/public-api/src"],
       // @masknet/scripts is not listed. It does not mean to be installed as a dependency and not join the type check.
       "@masknet/shared": ["./packages/shared/src"],

From c362be87b7c94e907f5bfe9b06cefe2b1238f52f Mon Sep 17 00:00:00 2001
From: Jack Works <jackworks@protonmail.com>
Date: Fri, 27 May 2022 16:03:51 +0800
Subject: [PATCH 08/17] chore: small changes

---
 .i18n-codegen.json             | 63 ++++++++++++----------------------
 docs/blockchain-integration.md |  4 +++
 2 files changed, 25 insertions(+), 42 deletions(-)

diff --git a/.i18n-codegen.json b/.i18n-codegen.json
index 6b40857beeb0..48fd89fd6a66 100644
--- a/.i18n-codegen.json
+++ b/.i18n-codegen.json
@@ -32,8 +32,7 @@
                 "type": "i18next/react-hooks",
                 "hooks": "useSharedI18N",
                 "namespace": "shared",
-                "trans": "SharedTrans",
-                "sourceMap": "inline"
+                "trans": "SharedTrans"
             }
         },
         {
@@ -44,8 +43,7 @@
                 "type": "i18next/react-hooks",
                 "hooks": "useSharedBaseI18N",
                 "namespace": "shareBase",
-                "trans": "SharedBaseTrans",
-                "sourceMap": "inline"
+                "trans": "SharedBaseTrans"
             }
         },
         {
@@ -56,8 +54,7 @@
                 "type": "i18next/react-hooks",
                 "hooks": "useDashboardI18N",
                 "namespace": "dashboard",
-                "trans": "DashboardTrans",
-                "sourceMap": "inline"
+                "trans": "DashboardTrans"
             }
         },
         {
@@ -68,8 +65,7 @@
                 "type": "i18next/react-hooks",
                 "hooks": "useI18N",
                 "namespace": "io.mask.example",
-                "trans": "Translate",
-                "sourceMap": "inline"
+                "trans": "Translate"
             }
         },
         {
@@ -80,8 +76,7 @@
                 "type": "i18next/react-hooks",
                 "hooks": "useI18N",
                 "namespace": "io.mask.debugger",
-                "trans": "Translate",
-                "sourceMap": "inline"
+                "trans": "Translate"
             }
         },
         {
@@ -92,8 +87,7 @@
                 "type": "i18next/react-hooks",
                 "hooks": "useI18N",
                 "namespace": "com.maskbook.wallet",
-                "trans": "Translate",
-                "sourceMap": "inline"
+                "trans": "Translate"
             }
         },
         {
@@ -104,8 +98,7 @@
                 "type": "i18next/react-hooks",
                 "hooks": "useI18N",
                 "namespace": "com.mask.flow",
-                "trans": "Translate",
-                "sourceMap": "inline"
+                "trans": "Translate"
             }
         },
         {
@@ -116,8 +109,7 @@
                 "type": "i18next/react-hooks",
                 "hooks": "useI18N",
                 "namespace": "com.maskbook.fileservice",
-                "trans": "Translate",
-                "sourceMap": "inline"
+                "trans": "Translate"
             }
         },
         {
@@ -128,8 +120,7 @@
                 "type": "i18next/react-hooks",
                 "hooks": "useI18N",
                 "namespace": "com.maskbook.cyberconnect",
-                "trans": "Translate",
-                "sourceMap": "inline"
+                "trans": "Translate"
             }
         },
         {
@@ -140,8 +131,7 @@
                 "type": "i18next/react-hooks",
                 "hooks": "useI18N",
                 "namespace": "bio.rss3",
-                "trans": "Translate",
-                "sourceMap": "inline"
+                "trans": "Translate"
             }
         },
         {
@@ -152,8 +142,7 @@
                 "type": "i18next/react-hooks",
                 "hooks": "useI18N",
                 "namespace": "money.juicebox",
-                "trans": "Translate",
-                "sourceMap": "inline"
+                "trans": "Translate"
             }
         },
         {
@@ -164,8 +153,7 @@
                 "type": "i18next/react-hooks",
                 "hooks": "useI18N",
                 "namespace": "com.maskbook.solana",
-                "trans": "Translate",
-                "sourceMap": "inline"
+                "trans": "Translate"
             }
         },
         {
@@ -176,8 +164,7 @@
                 "type": "i18next/react-hooks",
                 "hooks": "useI18N",
                 "namespace": "com.mask.next_id",
-                "trans": "Translate",
-                "sourceMap": "inline"
+                "trans": "Translate"
             }
         },
         {
@@ -188,8 +175,7 @@
                 "type": "i18next/react-hooks",
                 "hooks": "useI18N",
                 "namespace": "__template__",
-                "trans": "Translate",
-                "sourceMap": "inline"
+                "trans": "Translate"
             }
         },
         {
@@ -200,8 +186,7 @@
                 "type": "i18next/react-hooks",
                 "hooks": "useI18N",
                 "namespace": "io.gopluslabs.security",
-                "trans": "Translate",
-                "sourceMap": "inline"
+                "trans": "Translate"
             }
         },
         {
@@ -212,8 +197,7 @@
                 "type": "i18next/react-hooks",
                 "hooks": "useI18N",
                 "namespace": "io.mask.cross-chain-bridge",
-                "trans": "Translate",
-                "sourceMap": "inline"
+                "trans": "Translate"
             }
         },
         {
@@ -224,8 +208,7 @@
                 "type": "i18next/react-hooks",
                 "hooks": "useI18N",
                 "namespace": "com.maskbook.red_packet",
-                "trans": "Translate",
-                "sourceMap": "inline"
+                "trans": "Translate"
             }
         },
         {
@@ -236,8 +219,7 @@
                 "type": "i18next/react-hooks",
                 "hooks": "useI18N",
                 "namespace": "com.maskbook.tip",
-                "trans": "Translate",
-                "sourceMap": "inline"
+                "trans": "Translate"
             }
         },
         {
@@ -248,8 +230,7 @@
                 "type": "i18next/react-hooks",
                 "hooks": "useI18N",
                 "namespace": "com.maskbook.avatar",
-                "trans": "Translate",
-                "sourceMap": "inline"
+                "trans": "Translate"
             }
         },
         {
@@ -260,8 +241,7 @@
                 "type": "i18next/react-hooks",
                 "hooks": "useI18N",
                 "namespace": "com.maskbook.trader",
-                "trans": "Translate",
-                "sourceMap": "inline"
+                "trans": "Translate"
             }
         },
         {
@@ -272,8 +252,7 @@
                 "type": "i18next/react-hooks",
                 "hooks": "useI18N",
                 "namespace": "com.maskbook.gitcoin",
-                "trans": "Translate",
-                "sourceMap": "inline"
+                "trans": "Translate"
             }
         }
     ]
diff --git a/docs/blockchain-integration.md b/docs/blockchain-integration.md
index 7b625e76c890..3e7fce495d56 100644
--- a/docs/blockchain-integration.md
+++ b/docs/blockchain-integration.md
@@ -1 +1,5 @@
 # Blockchain Integration
+
+Mask Network assumes many capabilities that a blockchain should have. For example, a blockchain uses an "address" to locate a crypto-identity, a wallet keeps the crypto stuff safe from risk, and a "block" contains many transactions that push the system to the next state.
+
+The fundamental of blockchain is neutral. We could leverage it to do anything. However, a few years ago, people found financial usage from it and heavily developed it. As a result, almost all blockchains support "tokens" natively to proof of ownership.

From 8e799ba899373090a28b472ee5499aae6b9a6ef5 Mon Sep 17 00:00:00 2001
From: Jack Works <jackworks@protonmail.com>
Date: Fri, 27 May 2022 19:03:53 +0800
Subject: [PATCH 09/17] docs(i18n): sync i18n files from Crowdin (#6363)

* New translations en-US.json (Japanese)
docs(i18n): sync translation en-US.json for Japanese

* New translations en-US.json (Chinese Simplified)
docs(i18n): sync translation en-US.json for Chinese Simplified

* New translations en-US.json (Quenya)
docs(i18n): sync translation en-US.json for Quenya

* New translations en-US.json (Quenya)
docs(i18n): sync translation en-US.json for Quenya

* New translations en-US.json (Chinese Simplified)
docs(i18n): sync translation en-US.json for Chinese Simplified

* New translations en-US.json (Chinese Simplified)
docs(i18n): sync translation en-US.json for Chinese Simplified

* New translations en-US.json (Korean)
docs(i18n): sync translation en-US.json for Korean

* New translations en-US.json (Quenya)
docs(i18n): sync translation en-US.json for Quenya

* New translations en-US.json (Chinese Traditional)
docs(i18n): sync translation en-US.json for Chinese Traditional

* New translations en-US.json (Chinese Simplified)
docs(i18n): sync translation en-US.json for Chinese Simplified

* New translations en-US.json (Quenya)
docs(i18n): sync translation en-US.json for Quenya
---
 packages/mask/shared-ui/locales/ja-JP.json    |  6 --
 packages/mask/shared-ui/locales/ko-KR.json    |  9 +-
 packages/mask/shared-ui/locales/qya-AA.json   | 39 +++++----
 packages/mask/shared-ui/locales/zh-CN.json    | 15 ++--
 packages/mask/shared-ui/locales/zh-TW.json    |  8 +-
 .../src/plugins/Gitcoin/locales/qya-AA.json   | 16 +++-
 .../src/plugins/Gitcoin/locales/zh-CN.json    | 14 ++-
 .../src/plugins/RedPacket/locales/qya-AA.json | 85 ++++++++++++++++++-
 .../src/plugins/RedPacket/locales/zh-CN.json  | 42 ++++++++-
 .../src/plugins/Trader/locales/qya-AA.json    |  4 +-
 .../src/plugins/Trader/locales/zh-CN.json     |  4 +-
 11 files changed, 190 insertions(+), 52 deletions(-)

diff --git a/packages/mask/shared-ui/locales/ja-JP.json b/packages/mask/shared-ui/locales/ja-JP.json
index 118edbbc103a..9cd3090de974 100644
--- a/packages/mask/shared-ui/locales/ja-JP.json
+++ b/packages/mask/shared-ui/locales/ja-JP.json
@@ -104,14 +104,8 @@
     "plugin_wallet_return_mobile_wallet_options": "モバイルウォレットのオプションに戻る",
     "plugin_wallet_view_qr_code": "QR コードを表示する",
     "plugin_red_packet_create_with_token": "{{symbol}} で投げ銭を作成する",
-    "plugin_gitcoin_readme": "このサービスを利用するにあたり、寄付金額の 5% が <fund>Gitcoin grants development fund</fund> に寄付されます",
     "plugin_gitcoin_select_a_token": "トークンを選択する",
-    "plugin_gitcoin_enter_an_amount": "量を決める",
-    "plugin_gitcoin_grant_not_available": "Grantは有効ではありません",
     "plugin_gitcoin_insufficient_balance": "{{symbol}} の残高が足りません",
-    "plugin_gitcoin_donate": "寄付する",
-    "plugin_gitcoin_last_updated": "最新の更新：",
-    "plugin_gitcoin_view_on": "Gitcoin で見る",
     "plugin_trader_swap": "スワップ",
     "plugin_trader_wrap": "ラップ",
     "plugin_trader_unwrap": "アンラップ",
diff --git a/packages/mask/shared-ui/locales/ko-KR.json b/packages/mask/shared-ui/locales/ko-KR.json
index b69cc4e22da5..6761f7a7923b 100644
--- a/packages/mask/shared-ui/locales/ko-KR.json
+++ b/packages/mask/shared-ui/locales/ko-KR.json
@@ -119,6 +119,7 @@
     "wallet_rename": "월렛 이름 바꾸기",
     "wallet_loading_nft_contract": "NFT 컨트렉트 로딩...",
     "wallet_search_contract_no_result": "검색 포준에 맞추는 결과나 컨트렉트 주소가 없습니다.",
+    "wallet_search_no_result": "결과 없음.",
     "wallet_airdrop_nft_unclaimed_title": "수령하지 않는 NFT 에어드랍:",
     "plugin_airdrop_nft_start_time": "시작 시간: {{date}}",
     "plugin_airdrop_nft_end_time": "종료 시간: {{date}}",
@@ -214,16 +215,8 @@
     "plugin_wallet_cancel_sign": "서명이 실패되었습니다.",
     "plugin_red_packet_create_with_token": "{{symbol}} 으로 빨간 백 만드는 중",
     "plugin_red_packet_nft_account_name": "지갑 계정",
-    "plugin_gitcoin_readme": "이 서비스를 이용하면 <fund>Gitcoin 개발 기금에 당신의 기여금</fund>의 5%를 기부할 것이다.",
-    "plugin_gitcoin_readme_fund_link": "https://gitcoin.co/grants/86/gitcoin-sustainability-fund",
     "plugin_gitcoin_select_a_token": "토큰 선택",
-    "plugin_gitcoin_enter_an_amount": "수액 입력",
-    "plugin_gitcoin_grant_not_available": "이용 불가",
     "plugin_gitcoin_insufficient_balance": "{{symbol}} 잔액 부족",
-    "plugin_gitcoin_donate": "기부",
-    "plugin_gitcoin_last_updated": "신규 업데이트",
-    "plugin_gitcoin_by": "By",
-    "plugin_gitcoin_view_on": "Gitcoin에서 보기",
     "plugin_trader_safety_alert_title": "토큰 안정성 알림",
     "plugin_trader_safety_alert": "누구나 ERC20 토큰을 만들고 이름을 지을 수 있다. 토큰이 없는 프로젝트를 대표한다고 주장하는 토큰과 현존 토큰의 가짜 버전을 만드는 경우도 많습니다. Etherscan과 마찬가지로 이 사이트는 모든 ERC20 토큰에 대한 분석을 자동으로 추적합니다. ERC20 토큰과 상호 작용하기 전에 미리 잘 조사하시길 바랍니다.",
     "plugin_trader_total_supply": "총 공급량",
diff --git a/packages/mask/shared-ui/locales/qya-AA.json b/packages/mask/shared-ui/locales/qya-AA.json
index ecb471a7d0e4..d1e180adb87d 100644
--- a/packages/mask/shared-ui/locales/qya-AA.json
+++ b/packages/mask/shared-ui/locales/qya-AA.json
@@ -1,4 +1,11 @@
 {
+    "promote_red_packet": "crwdns16898:0crwdne16898:0",
+    "promote_ito": "crwdns16900:0crwdne16900:0",
+    "promote_ito_short": "crwdns16902:0crwdne16902:0",
+    "promote_file_service": "crwdns16904:0crwdne16904:0",
+    "promote_savings": "crwdns16906:0{{amount}}crwdnd16906:0{{symbol}}crwdnd16906:0{{chain}}crwdnd16906:0{{account}}crwdne16906:0",
+    "promote_collectible": "crwdns16908:0crwdne16908:0",
+    "promote_snapshot": "crwdns16910:0crwdne16910:0",
     "database_backup": "crwdns10051:0crwdne10051:0",
     "database_overwrite": "crwdns10053:0crwdne10053:0",
     "database_clear": "crwdns10055:0crwdne10055:0",
@@ -46,9 +53,13 @@
     "application_settings_tab_plug_app-listed-placeholder": "crwdns16228:0crwdne16228:0",
     "application_settings_tab_plug_app-unlisted-placeholder": "crwdns16230:0crwdne16230:0",
     "additional_post_box__encrypted_post_pre": "crwdns3991:0{{encrypted}}crwdne3991:0",
-    "additional_post_box__encrypted_post_pre_red_packet_twitter_official_account": "crwdns9169:0{{account}}crwdnd9169:0{{encrypted}}crwdne9169:0",
-    "additional_post_box__encrypted_post_pre_red_packet": "crwdns3995:0{{encrypted}}crwdne3995:0",
-    "additional_post_box__steganography_post_pre": "crwdns3997:0{{random}}crwdne3997:0",
+    "additional_post_box__encrypted_post_pre_red_packet_twitter_official_account": "crwdns9169:0{{account}}crwdnd9169:0$t(promote_red_packet)crwdnd9169:0{{encrypted}}crwdne9169:0",
+    "additional_post_box__encrypted_post_pre_red_packet": "crwdns3995:0$t(promote_red_packet)crwdnd3995:0{{encrypted}}crwdne3995:0",
+    "additional_post_box__encrypted_post_pre_ito_twitter_official_account": "crwdns16912:0$t(promote_ito)crwdnd16912:0{{encrypted}}crwdne16912:0",
+    "additional_post_box__encrypted_post_pre_ito": "crwdns16914:0$t(promote_ito)crwdnd16914:0{{encrypted}}crwdne16914:0",
+    "additional_post_box__encrypted_post_pre_file_service_twitter_official_account": "crwdns16916:0$t(promote_file_service)crwdnd16916:0{{encrypted}}crwdne16916:0",
+    "additional_post_box__encrypted_post_pre_file_service": "crwdns16918:0$t(promote_file_service)crwdnd16918:0{{encrypted}}crwdne16918:0",
+    "additional_post_box__steganography_post_pre": "crwdns3997:0{{random}}crwdnd3997:0$t(promote_red_packet)crwdne3997:0",
     "auto_paste_failed_dialog_title": "crwdns3999:0crwdne3999:0",
     "auto_paste_failed_dialog_content": "crwdns4001:0crwdne4001:0",
     "auto_paste_failed_dialog_image_caption": "crwdns4003:0crwdne4003:0",
@@ -133,6 +144,9 @@
     "user_guide_tip_2": "crwdns9061:0crwdne9061:0",
     "user_guide_tip_3": "crwdns13019:0crwdne13019:0",
     "user_guide_tip_4": "crwdns16572:0crwdne16572:0",
+    "plugin_avatar_setup_share_title": "crwdns16920:0crwdne16920:0",
+    "plugin_avatar_setup_pfp_share": "crwdns16922:0crwdne16922:0",
+    "plugin_avatar_setup_success": "crwdns16924:0crwdne16924:0",
     "mask_network": "crwdns10321:0crwdne10321:0",
     "import": "crwdns4193:0crwdne4193:0",
     "no_search_result": "crwdns4217:0crwdne4217:0",
@@ -186,6 +200,7 @@
     "wallet_rename": "crwdns4489:0crwdne4489:0",
     "wallet_loading_nft_contract": "crwdns8135:0crwdne8135:0",
     "wallet_search_contract_no_result": "crwdns8137:0crwdne8137:0",
+    "wallet_search_no_result": "crwdns8139:0crwdne8139:0",
     "wallet_confirm_with_password": "crwdns10141:0crwdne10141:0",
     "wallet_airdrop_nft_unclaimed_title": "crwdns8093:0crwdne8093:0",
     "plugin_external_unknown_plugin": "crwdns10143:0crwdne10143:0",
@@ -335,18 +350,8 @@
     "plugin_nft_red_packet_create": "crwdns11875:0crwdne11875:0",
     "plugin_red_packet_nft_account_name": "crwdns8159:0crwdne8159:0",
     "plugin_red_packet_nft_shift_select_tip": "crwdns10819:0{{text}}crwdne10819:0",
-    "plugin_gitcoin_readme": "crwdns4789:0crwdne4789:0",
-    "plugin_gitcoin_readme_fund_link": "crwdns4791:0crwdne4791:0",
     "plugin_gitcoin_select_a_token": "crwdns4793:0crwdne4793:0",
-    "plugin_gitcoin_name": "crwdns16238:0crwdne16238:0",
-    "plugin_gitcoin_description": "crwdns16240:0crwdne16240:0",
-    "plugin_gitcoin_enter_an_amount": "crwdns4795:0crwdne4795:0",
-    "plugin_gitcoin_grant_not_available": "crwdns4797:0crwdne4797:0",
     "plugin_gitcoin_insufficient_balance": "crwdns4799:0{{symbol}}crwdne4799:0",
-    "plugin_gitcoin_donate": "crwdns4801:0crwdne4801:0",
-    "plugin_gitcoin_last_updated": "crwdns4803:0crwdne4803:0",
-    "plugin_gitcoin_by": "crwdns4805:0crwdne4805:0",
-    "plugin_gitcoin_view_on": "crwdns4807:0crwdne4807:0",
     "plugin_trader_fail_to_load": "crwdns10207:0crwdne10207:0",
     "plugin_trader_lbp_pool_in_balancer": "crwdns10209:0crwdne10209:0",
     "plugin_trader_swap_description": "crwdns16242:0crwdne16242:0",
@@ -535,10 +540,10 @@
     "plugin_ito_qualification_failed": "crwdns5139:0crwdne5139:0",
     "plugin_ito_congratulations": "crwdns5153:0crwdne5153:0",
     "plugin_ito_out_of_stock_hit": "crwdns5155:0crwdne5155:0",
-    "plugin_ito_claim_success_share": "crwdns5157:0{{user}}crwdnd5157:0{{account}}crwdnd5157:0{{symbol}}crwdnd5157:0{{link}}crwdne5157:0",
-    "plugin_ito_claim_success_share_no_official_account": "crwdns9179:0{{user}}crwdnd9179:0{{symbol}}crwdnd9179:0{{link}}crwdne9179:0",
-    "plugin_ito_claim_foreshow_share": "crwdns5159:0{{symbol}}crwdnd5159:0{{name}}crwdnd5159:0{{account}}crwdnd5159:0{{link}}crwdne5159:0",
-    "plugin_ito_claim_foreshow_share_no_official_account": "crwdns9181:0{{symbol}}crwdnd9181:0{{name}}crwdnd9181:0{{link}}crwdne9181:0",
+    "plugin_ito_claim_success_share": "crwdns5157:0{{user}}crwdnd5157:0{{account}}crwdnd5157:0{{symbol}}crwdnd5157:0$t(promote_ito_short)crwdnd5157:0{{link}}crwdne5157:0",
+    "plugin_ito_claim_success_share_no_official_account": "crwdns9179:0{{user}}crwdnd9179:0{{symbol}}crwdnd9179:0$t(promote_ito_short)crwdnd9179:0{{link}}crwdne9179:0",
+    "plugin_ito_claim_foreshow_share": "crwdns5159:0{{symbol}}crwdnd5159:0{{name}}crwdnd5159:0{{account}}crwdnd5159:0{{link}}crwdnd5159:0$t(promote_ito_short)crwdne5159:0",
+    "plugin_ito_claim_foreshow_share_no_official_account": "crwdns9181:0{{symbol}}crwdnd9181:0{{name}}crwdnd9181:0{{link}}crwdnd9181:0$t(promote_ito_short)crwdne9181:0",
     "plugin_ito_password": "crwdns5161:0{{password}}crwdne5161:0",
     "plugin_ito_status_no_start": "crwdns5163:0crwdne5163:0",
     "plugin_ito_status_ongoing": "crwdns5165:0crwdne5165:0",
diff --git a/packages/mask/shared-ui/locales/zh-CN.json b/packages/mask/shared-ui/locales/zh-CN.json
index 98ebee360881..a6ec9363bc23 100644
--- a/packages/mask/shared-ui/locales/zh-CN.json
+++ b/packages/mask/shared-ui/locales/zh-CN.json
@@ -1,4 +1,6 @@
 {
+    "promote_red_packet": "🧧🧧🧧 尝试给你的好友发送代币或 NFTs 红包，分享此时的喜悦吧！ 安装 Mask.io 发送你的第一个红包。",
+    "promote_file_service": "📃📃📃 尝试在推特上使用永久的、去中心化的文件存储功能。安装 Mask.io 上传并分享你的第一份永久的去中心化存储文件，由主流去中心化存储方案提供技术支持。",
     "database_backup": "备份数据库",
     "database_overwrite": "使用备份覆盖数据库",
     "database_clear": "清空数据库",
@@ -38,6 +40,10 @@
     "additional_post_box__encrypted_post_pre": "安装 #mask_io 解密此贴文 ！ {{encrypted}}",
     "additional_post_box__encrypted_post_pre_red_packet_twitter_official_account": "使用 #mask_io 来认领这个红包！@{{account}} {{encrypted}}",
     "additional_post_box__encrypted_post_pre_red_packet": "使用 #mask_io 来认领这个红包！@{{encrypted}}",
+    "additional_post_box__encrypted_post_pre_ito_twitter_official_account": "$t(promote_ito)\n {{encrypted}}",
+    "additional_post_box__encrypted_post_pre_ito": "$t(promote_ito) {{encrypted}}",
+    "additional_post_box__encrypted_post_pre_file_service_twitter_official_account": "$t(promote_file_service)\n {{encrypted}}",
+    "additional_post_box__encrypted_post_pre_file_service": "$t(promote_file_service) {{encrypted}}",
     "additional_post_box__steganography_post_pre": "此图片使用#mask_io加密。📪🔑 安装mask.io解密它。 {{random}}",
     "auto_paste_failed_dialog_title": "手动粘贴",
     "auto_paste_failed_dialog_content": "请复制下面的文本和图片(如果有的话)再进行发布。",
@@ -157,6 +163,7 @@
     "wallet_rename": "重新命名钱包",
     "wallet_loading_nft_contract": "正在加载 NFT 合约...",
     "wallet_search_contract_no_result": "没有结果或合同地址不符合查询标准。",
+    "wallet_search_no_result": "没有任何结果。",
     "wallet_confirm_with_password": "使用密码确认",
     "wallet_airdrop_nft_unclaimed_title": "未认领的NFT Airdrop：",
     "plugin_external_unknown_plugin": "发现新的未知Mask插件，您想要加载它们吗？",
@@ -293,16 +300,8 @@
     "plugin_nft_red_packet_create": "创建一个NFT红包",
     "plugin_red_packet_nft_account_name": "钱包账户",
     "plugin_red_packet_nft_shift_select_tip": "您也可以使用 <text>{{text}}</text> 选择多个NFT。",
-    "plugin_gitcoin_readme": "通过使用此服务，您将同时向 <fund>Gitcoin grants development fund</fund> 捐赠您5%捐款。",
-    "plugin_gitcoin_readme_fund_link": "https://gitcoin.co/gitcoin-sustainability-fund",
     "plugin_gitcoin_select_a_token": "选择代币",
-    "plugin_gitcoin_enter_an_amount": "输入数额",
-    "plugin_gitcoin_grant_not_available": "授权不可用",
     "plugin_gitcoin_insufficient_balance": "{{symbol}} 余额不足",
-    "plugin_gitcoin_donate": "捐赠",
-    "plugin_gitcoin_last_updated": "最新更新：",
-    "plugin_gitcoin_by": "提供者为：",
-    "plugin_gitcoin_view_on": "在 Gitcoin 上查看",
     "plugin_trader_fail_to_load": "无法加载趋势信息自  ",
     "plugin_trader_lbp_pool_in_balancer": "Balancer 的 LBP 池",
     "plugin_trader_tutorial": "教程",
diff --git a/packages/mask/shared-ui/locales/zh-TW.json b/packages/mask/shared-ui/locales/zh-TW.json
index 227d7a9a385e..1a335c4501db 100644
--- a/packages/mask/shared-ui/locales/zh-TW.json
+++ b/packages/mask/shared-ui/locales/zh-TW.json
@@ -98,6 +98,7 @@
     "wallet_name": "錢包名稱",
     "wallet_rename": "重新命名錢包",
     "wallet_loading_nft_contract": "加載NFT合約中...",
+    "wallet_search_no_result": "無結果",
     "wallet_confirm_with_password": "確認密碼",
     "wallet_airdrop_nft_unclaimed_title": "尚未認領的NFT空投",
     "plugin_external_loader_search_holder": "搜尋外部插件",
@@ -197,15 +198,8 @@
     "plugin_wallet_not_available_on": "{{network}} 不可用",
     "plugin_wallet_connect_wallet": "連接錢包",
     "plugin_red_packet_create_with_token": "使用 {{symbol}} 建立紅包",
-    "plugin_gitcoin_readme": "通過使用此服務，您還將向 <fund>Gitcoin grants development fund</fund> 捐款 5%",
     "plugin_gitcoin_select_a_token": "選擇一個代幣",
-    "plugin_gitcoin_enter_an_amount": "輸入一個金額",
-    "plugin_gitcoin_grant_not_available": "Grant 無法使用",
     "plugin_gitcoin_insufficient_balance": "{{symbol}} 餘額不足",
-    "plugin_gitcoin_donate": "捐款",
-    "plugin_gitcoin_last_updated": "最近更新：",
-    "plugin_gitcoin_by": "提供者為",
-    "plugin_gitcoin_view_on": "在 Gitcoin 觀看",
     "plugin_trader_tutorial": "新手教學",
     "plugin_trader_safety_agree": "我瞭解",
     "plugin_trader_total_supply": "供應總量",
diff --git a/packages/mask/src/plugins/Gitcoin/locales/qya-AA.json b/packages/mask/src/plugins/Gitcoin/locales/qya-AA.json
index 0967ef424bce..d9c126e1cd08 100644
--- a/packages/mask/src/plugins/Gitcoin/locales/qya-AA.json
+++ b/packages/mask/src/plugins/Gitcoin/locales/qya-AA.json
@@ -1 +1,15 @@
-{}
+{
+    "name": "crwdns16706:0crwdne16706:0",
+    "description": "crwdns16708:0crwdne16708:0",
+    "promote": "crwdns16710:0crwdne16710:0",
+    "select_a_token": "crwdns16712:0crwdne16712:0",
+    "grant_not_available": "crwdns16714:0crwdne16714:0",
+    "enter_an_amount": "crwdns16716:0crwdne16716:0",
+    "insufficient_balance": "crwdns16718:0{{symbol}}crwdne16718:0",
+    "gitcoin_readme": "crwdns16720:0crwdne16720:0",
+    "donate": "crwdns16722:0crwdne16722:0",
+    "last_updated": "crwdns16724:0crwdne16724:0",
+    "by": "crwdns16726:0crwdne16726:0",
+    "view_on": "crwdns16728:0crwdne16728:0",
+    "readme_fund_link": "crwdns16730:0crwdne16730:0"
+}
diff --git a/packages/mask/src/plugins/Gitcoin/locales/zh-CN.json b/packages/mask/src/plugins/Gitcoin/locales/zh-CN.json
index 0967ef424bce..2696e58e5e38 100644
--- a/packages/mask/src/plugins/Gitcoin/locales/zh-CN.json
+++ b/packages/mask/src/plugins/Gitcoin/locales/zh-CN.json
@@ -1 +1,13 @@
-{}
+{
+    "name": "Gitcoin",
+    "promote": "分享或浏览曾经捐助过或感兴趣的 Gitcoin 项目。",
+    "select_a_token": "选择代币",
+    "grant_not_available": "授权不可用",
+    "enter_an_amount": "输入数额",
+    "gitcoin_readme": "通过使用此服务，您将同时向 <fund>Gitcoin grants development fund</fund> 捐赠您5%捐款。",
+    "donate": "捐赠",
+    "last_updated": "最新更新：",
+    "by": "提供者为：",
+    "view_on": "在 Gitcoin 上查看",
+    "readme_fund_link": "https://gitcoin.co/grants/86/gitcoin-sustainability-fund"
+}
diff --git a/packages/mask/src/plugins/RedPacket/locales/qya-AA.json b/packages/mask/src/plugins/RedPacket/locales/qya-AA.json
index 0967ef424bce..0dec9e1e3e55 100644
--- a/packages/mask/src/plugins/RedPacket/locales/qya-AA.json
+++ b/packages/mask/src/plugins/RedPacket/locales/qya-AA.json
@@ -1 +1,84 @@
-{}
+{
+    "promote": "crwdns16732:0crwdne16732:0",
+    "promote_short": "crwdns16734:0crwdne16734:0",
+    "nft_shift_select_tip": "crwdns16736:0{{text}}crwdne16736:0",
+    "collections": "crwdns16738:0crwdne16738:0",
+    "select_a_token": "crwdns16740:0crwdne16740:0",
+    "search": "crwdns16742:0crwdne16742:0",
+    "loading_token": "crwdns16744:0crwdne16744:0",
+    "search_no_result": "crwdns16746:0crwdne16746:0",
+    "nft_already_added": "crwdns16748:0crwdne16748:0",
+    "nft_invalid_owner": "crwdns16750:0crwdne16750:0",
+    "nft_max_shares": "crwdns16752:0{{amount}}crwdne16752:0",
+    "nft_max_shares_tip": "crwdns16754:0{{amount, number}}crwdne16754:0",
+    "nft_non_existed_tip": "crwdns16756:0crwdne16756:0",
+    "nft_select_collection": "crwdns16758:0crwdne16758:0",
+    "completed": "crwdns16760:0crwdne16760:0",
+    "expired": "crwdns16762:0crwdne16762:0",
+    "nft_tip": "crwdns16764:0crwdne16764:0",
+    "nft_share_foreshow_message_not_twitter": "crwdns16766:0{{sender}}crwdnd16766:0{{network}}crwdnd16766:0{{payload}}crwdne16766:0",
+    "nft_share_foreshow_message": "crwdns16768:0{{sender}}crwdnd16768:0{{network}}crwdnd16768:0{{account}}crwdnd16768:0{{payload}}crwdne16768:0",
+    "nft_share_claimed_message_not_twitter": "crwdns16770:0{{sender}}crwdnd16770:0{{network}}crwdnd16770:0$t(promote_short)crwdnd16770:0{{payload}}crwdne16770:0",
+    "nft_share_claimed_message": "crwdns16772:0{{sender}}crwdnd16772:0{{network}}crwdnd16772:0{{account}}crwdnd16772:0$t(promote_short)crwdnd16772:0{{payload}}crwdne16772:0",
+    "nft_total_amount": "crwdns16774:0crwdne16774:0",
+    "nft_attached_message": "crwdns16776:0crwdne16776:0",
+    "nft_account_name": "crwdns16778:0crwdne16778:0",
+    "message_label": "crwdns16780:0crwdne16780:0",
+    "claiming": "crwdns16782:0crwdne16782:0",
+    "claim": "crwdns16784:0crwdne16784:0",
+    "data_broken": "crwdns16786:0{{duration}}crwdne16786:0",
+    "refund": "crwdns16788:0crwdne16788:0",
+    "empty": "crwdns16790:0crwdne16790:0",
+    "refunding": "crwdns16792:0crwdne16792:0",
+    "history_send": "crwdns16794:0crwdne16794:0",
+    "history_total_amount": "crwdns16796:0{{amount}}crwdnd16796:0{{symbol}}crwdne16796:0",
+    "history_split_mode": "crwdns16798:0{{mode}}crwdne16798:0",
+    "history_total_claimed_amount": "crwdns16800:0{{claimedAmount}}crwdnd16800:0{{amount}}crwdnd16800:0{{symbol}}crwdne16800:0",
+    "attached_message": "crwdns16802:0crwdne16802:0",
+    "indivisible": "crwdns16804:0{{amount}}crwdnd16804:0{{symbol}}crwdne16804:0",
+    "name": "crwdns16806:0crwdne16806:0",
+    "description": "crwdns16808:0crwdne16808:0",
+    "next": "crwdns16810:0crwdne16810:0",
+    "nft_approve_all_tip": "crwdns16812:0crwdne16812:0",
+    "nft_unapproved_tip": "crwdns16814:0crwdne16814:0",
+    "nft_select_partially_option": "crwdns16816:0crwdne16816:0",
+    "nft_select_all_option": "crwdns16818:0{{total}}crwdne16818:0",
+    "erc721_insufficient_balance": "crwdns16820:0crwdne16820:0",
+    "erc721_tab_title": "crwdns16822:0crwdne16822:0",
+    "erc20_tab_title": "crwdns16824:0crwdne16824:0",
+    "claimed": "crwdns16826:0crwdne16826:0",
+    "details": "crwdns16828:0crwdne16828:0",
+    "display_name": "crwdns16830:0crwdne16830:0",
+    "select_existing": "crwdns16832:0crwdne16832:0",
+    "create_new": "crwdns16834:0crwdne16834:0",
+    "send_symbol": "crwdns16836:0{{amount}}crwdnd16836:0{{symbol}}crwdne16836:0",
+    "back": "crwdns16838:0crwdne16838:0",
+    "hint": "crwdns16840:0crwdne16840:0",
+    "amount_total": "crwdns16842:0crwdne16842:0",
+    "amount_per_share": "crwdns16844:0crwdne16844:0",
+    "shares": "crwdns16846:0crwdne16846:0",
+    "average": "crwdns16848:0crwdne16848:0",
+    "random": "crwdns16850:0crwdne16850:0",
+    "split_mode": "crwdns16852:0crwdne16852:0",
+    "token": "crwdns16854:0crwdne16854:0",
+    "chain_not_supported": "crwdns16856:0{{chain}}crwdne16856:0",
+    "nft_no_history": "crwdns16858:0crwdne16858:0",
+    "history_claimed": "crwdns16860:0{{claimedShares}}crwdnd16860:0{{shares}}crwdne16860:0",
+    "send": "crwdns16862:0crwdne16862:0",
+    "history_duration": "crwdns16864:0{{startTime}}crwdnd16864:0{{endTime}}crwdne16864:0",
+    "best_wishes": "crwdns16866:0crwdne16866:0",
+    "nft_data_broken": "crwdns16868:0crwdne16868:0",
+    "from": "crwdns16870:0{{name}}crwdne16870:0",
+    "share_message_official_account": "crwdns16872:0{{sender}}crwdnd16872:0{{network}}crwdnd16872:0{{account}}crwdnd16872:0$t(promote_short)crwdnd16872:0{{payload}}crwdne16872:0",
+    "share_message_not_twitter": "crwdns16874:0{{sender}}crwdnd16874:0{{network}}crwdnd16874:0$t(promote_short)crwdnd16874:0{{payload}}crwdne16874:0",
+    "share_unclaimed_message_official_account": "crwdns16876:0{{sender}}crwdnd16876:0{{network}}crwdnd16876:0{{account}}crwdnd16876:0$t(promote_short)crwdnd16876:0{{payload}}crwdne16876:0",
+    "share_unclaimed_message_not_twitter": "crwdns16878:0{{sender}}crwdnd16878:0{{network}}crwdnd16878:0$t(promote_short)crwdnd16878:0{{payload}}crwdne16878:0",
+    "description_claimed": "crwdns16880:0{{amount}}crwdnd16880:0{{symbol}}crwdne16880:0",
+    "description_refund": "crwdns16882:0{{balance}}crwdnd16882:0{{symbol}}crwdne16882:0",
+    "description_refunded": "crwdns16884:0crwdne16884:0",
+    "description_expired": "crwdns16886:0crwdne16886:0",
+    "description_broken": "crwdns16888:0crwdne16888:0",
+    "description_empty": "crwdns16890:0crwdne16890:0",
+    "description_failover": "crwdns16892:0{{shares}}crwdnd16892:0{{total}}crwdnd16892:0{{symbol}}crwdne16892:0",
+    "recommend_feature_description": "crwdns16894:0crwdne16894:0"
+}
diff --git a/packages/mask/src/plugins/RedPacket/locales/zh-CN.json b/packages/mask/src/plugins/RedPacket/locales/zh-CN.json
index 0967ef424bce..2a91a240c6f2 100644
--- a/packages/mask/src/plugins/RedPacket/locales/zh-CN.json
+++ b/packages/mask/src/plugins/RedPacket/locales/zh-CN.json
@@ -1 +1,41 @@
-{}
+{
+    "collections": "收藏品",
+    "select_a_token": "选择代币",
+    "nft_max_shares": "NFT红包合约最多支持 {{amount}} 个NFT投放。",
+    "nft_max_shares_tip": "NFT红包合约最多支持 {{amount, number}} 个NFT投放。",
+    "nft_non_existed_tip": "Token ID <tokenIdList></tokenIdList> 不存在或不属于您。",
+    "nft_select_collection": "选择您的收藏品系列",
+    "completed": "已完成",
+    "expired": "已过期",
+    "nft_tip": "这是一个 NFT 红包。",
+    "nft_share_foreshow_message_not_twitter": "@{{sender}} 正在 {{network}} 网络上发送一个 NFT 红包。 \n{{payload}}",
+    "nft_share_foreshow_message": "@{{sender}} 正在 {{network}} 网络上发送一个 NFT 红包。关注@{{account}} (mask.io) 以获取NFT 红包。\n#mask_io #LuckyDrop\n{{payload}}",
+    "nft_share_claimed_message_not_twitter": "我刚从@{{sender}} 在 {{network}} 网络上认领了一个 NFT 红包。\n$t(promote_short)\n{{payload}}",
+    "nft_share_claimed_message": "我刚从@{{sender}} 在 {{network}} 网络上认领了一个 NFT 红包。关注@{{account}} (mask.io) 来获取红包。\n$t(promote_short)\n#mask_io #LuckyDrop\n{{payload}}",
+    "nft_total_amount": "总数",
+    "nft_attached_message": "附加信息",
+    "nft_account_name": "钱包账户",
+    "message_label": "标题",
+    "claiming": "认领中...",
+    "claim": "认领",
+    "data_broken": "由于数据损坏，此红包无法发送。请在 {{duration}} 之后申请退款。",
+    "refund": "退款",
+    "empty": "空的",
+    "refunding": "退款中",
+    "history_send": "发送",
+    "history_total_amount": "总额: {{amount}} {{symbol}}",
+    "history_split_mode": "分享模式：{{mode}}",
+    "history_total_claimed_amount": "总额： <span><strong>{{claimedAmount}}/{{amount}}</strong></span> {{symbol}}",
+    "attached_message": "附加信息",
+    "indivisible": "每个份额的最小金额为 {{amount}} {{symbol}}",
+    "next": "下一步",
+    "nft_approve_all_tip": "注意：在选择批准所有NFT时，合约中的所有NFT都将被授权默认销售，包括随后转移的NFT。",
+    "nft_select_partially_option": "选择部分",
+    "nft_select_all_option": "全部 ({{total}} NFT)",
+    "erc721_insufficient_balance": "余额不足",
+    "erc721_tab_title": "收藏品",
+    "erc20_tab_title": "代币",
+    "claimed": "已认领",
+    "details": "红包详情",
+    "display_name": "插件：红包"
+}
diff --git a/packages/mask/src/plugins/Trader/locales/qya-AA.json b/packages/mask/src/plugins/Trader/locales/qya-AA.json
index 0967ef424bce..6261786979e0 100644
--- a/packages/mask/src/plugins/Trader/locales/qya-AA.json
+++ b/packages/mask/src/plugins/Trader/locales/qya-AA.json
@@ -1 +1,3 @@
-{}
+{
+    "promote": "crwdns16896:0crwdne16896:0"
+}
diff --git a/packages/mask/src/plugins/Trader/locales/zh-CN.json b/packages/mask/src/plugins/Trader/locales/zh-CN.json
index 0967ef424bce..9666697afc42 100644
--- a/packages/mask/src/plugins/Trader/locales/zh-CN.json
+++ b/packages/mask/src/plugins/Trader/locales/zh-CN.json
@@ -1 +1,3 @@
-{}
+{
+    "promote": "在推特上即可完成加密货币的即时互换。安装 Mask.io ，尝试快速、低费用的代币互换功能。"
+}

From a3b50101d6b46e91c9ae6455687a5ab40d37b297 Mon Sep 17 00:00:00 2001
From: Jack Works <jackworks@protonmail.com>
Date: Sun, 29 May 2022 14:26:11 +0800
Subject: [PATCH 10/17] docs(i18n): sync i18n files from Crowdin (#6372)

* New translations en-US.json (Chinese Traditional)
docs(i18n): sync translation en-US.json for Chinese Traditional

* New translations en-US.json (Korean)
docs(i18n): sync translation en-US.json for Korean

* New translations en-US.json (Chinese Traditional)
docs(i18n): sync translation en-US.json for Chinese Traditional

* New translations en-US.json (Japanese)
docs(i18n): sync translation en-US.json for Japanese
---
 .../src/plugins/Gitcoin/locales/ja-JP.json    | 11 +++++++-
 .../src/plugins/Gitcoin/locales/ko-KR.json    | 11 +++++++-
 .../src/plugins/Gitcoin/locales/zh-TW.json    | 11 +++++++-
 .../src/plugins/RedPacket/locales/zh-TW.json  | 27 ++++++++++++++++++-
 4 files changed, 56 insertions(+), 4 deletions(-)

diff --git a/packages/mask/src/plugins/Gitcoin/locales/ja-JP.json b/packages/mask/src/plugins/Gitcoin/locales/ja-JP.json
index 0967ef424bce..aa9fe6ef67b7 100644
--- a/packages/mask/src/plugins/Gitcoin/locales/ja-JP.json
+++ b/packages/mask/src/plugins/Gitcoin/locales/ja-JP.json
@@ -1 +1,10 @@
-{}
+{
+    "select_a_token": "トークンを選択する",
+    "grant_not_available": "Grantは有効ではありません",
+    "enter_an_amount": "量を決める",
+    "insufficient_balance": "{{symbol}} の残高が足りません",
+    "gitcoin_readme": "このサービスを利用するにあたり、寄付金額の 5% が <fund>Gitcoin grants development fund</fund> に寄付されます",
+    "donate": "寄付する",
+    "last_updated": "最新の更新：",
+    "view_on": "Gitcoin で見る"
+}
diff --git a/packages/mask/src/plugins/Gitcoin/locales/ko-KR.json b/packages/mask/src/plugins/Gitcoin/locales/ko-KR.json
index 0967ef424bce..a6abcd5bad82 100644
--- a/packages/mask/src/plugins/Gitcoin/locales/ko-KR.json
+++ b/packages/mask/src/plugins/Gitcoin/locales/ko-KR.json
@@ -1 +1,10 @@
-{}
+{
+    "select_a_token": "토큰 선택",
+    "grant_not_available": "이용 불가",
+    "enter_an_amount": "수액 입력",
+    "insufficient_balance": "{{symbol}} 잔액 부족",
+    "gitcoin_readme": "이 서비스를 이용하면 <fund>Gitcoin 개발 기금에 당신의 기여금</fund>의 5%를 기부할 것이다.",
+    "donate": "기부",
+    "last_updated": "신규 업데이트",
+    "view_on": "Gitcoin에서 보기"
+}
diff --git a/packages/mask/src/plugins/Gitcoin/locales/zh-TW.json b/packages/mask/src/plugins/Gitcoin/locales/zh-TW.json
index 0967ef424bce..c5292c692f0f 100644
--- a/packages/mask/src/plugins/Gitcoin/locales/zh-TW.json
+++ b/packages/mask/src/plugins/Gitcoin/locales/zh-TW.json
@@ -1 +1,10 @@
-{}
+{
+    "select_a_token": "選擇一個代幣",
+    "enter_an_amount": "輸入一個金額",
+    "insufficient_balance": "{{symbol}} 餘額不足",
+    "gitcoin_readme": "通過使用此服務，您還將向 <fund>Gitcoin grants development fund</fund> 捐款 5%",
+    "donate": "捐款",
+    "last_updated": "最近更新：",
+    "by": "提供者為",
+    "view_on": "在 Gitcoin 觀看"
+}
diff --git a/packages/mask/src/plugins/RedPacket/locales/zh-TW.json b/packages/mask/src/plugins/RedPacket/locales/zh-TW.json
index 0967ef424bce..2e881836d62f 100644
--- a/packages/mask/src/plugins/RedPacket/locales/zh-TW.json
+++ b/packages/mask/src/plugins/RedPacket/locales/zh-TW.json
@@ -1 +1,26 @@
-{}
+{
+    "search": "搜尋",
+    "nft_already_added": "此收藏品已被添加",
+    "nft_invalid_owner": "此藏品不屬於你",
+    "completed": "已完成",
+    "expired": "已過期",
+    "nft_tip": "這是一個NFT紅包",
+    "nft_total_amount": "總額",
+    "nft_attached_message": "附加的訊息",
+    "message_label": "標題",
+    "claiming": "認領中...",
+    "claim": "認領",
+    "refund": "退款",
+    "empty": "空的",
+    "refunding": "退款中",
+    "history_send": "發送",
+    "history_total_amount": "總額: {{amount}} {{symbol}}",
+    "history_split_mode": "分割模式: {{mode}}",
+    "history_total_claimed_amount": "總共: <span><strong>{{claimedAmount}}/{{amount}}</strong></span> {{symbol}}",
+    "attached_message": "附加的訊息",
+    "next": "下一步",
+    "erc721_insufficient_balance": "餘額不足",
+    "erc20_tab_title": "代幣",
+    "claimed": "已領取",
+    "details": "紅包詳情"
+}

From 4d6a74c1dc543952ab7d82e5f278d1aefade47e1 Mon Sep 17 00:00:00 2001
From: guanbinrui <52657989+guanbinrui@users.noreply.github.com>
Date: Sun, 29 May 2022 17:00:21 +0800
Subject: [PATCH 11/17] doc: add RPC endpoint

---
 .github/ISSUE_TEMPLATE/evm.md | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/.github/ISSUE_TEMPLATE/evm.md b/.github/ISSUE_TEMPLATE/evm.md
index 89ecabfdd35f..e7298aaae56a 100644
--- a/.github/ISSUE_TEMPLATE/evm.md
+++ b/.github/ISSUE_TEMPLATE/evm.md
@@ -12,11 +12,12 @@ Request to depoly contracts on <!-- Replace it with the chain name -->.
 
 ## Chain Info
 
-| Name | Content |
-| ---- | ------- |
-| Name | \- |
-| ChainId | \- |
-| Website | \- |
+| Name         | Content |
+| ------------ | ------- |
+| Name         | \- |
+| ChainId      | \- |
+| Website      | \- |
+| RPC Endponit | \- |
 
 
 ## Checklist

From c109b878fd6da9b9c51505cc4b0244d2b5ee24fc Mon Sep 17 00:00:00 2001
From: guanbinrui <52657989+guanbinrui@users.noreply.github.com>
Date: Sun, 29 May 2022 22:05:27 +0800
Subject: [PATCH 12/17] refactor: transfer docs/ to docs.mask.io (#6314)

---
 docs/ARCHITECTURE.md                     |  53 -------
 docs/FAQ.md                              | 103 ------------
 docs/blockchain-integration.md           |   5 -
 docs/bounty-development-guide.md         |  74 ---------
 docs/concepts.md                         |  21 ---
 docs/css-in-js.md                        | 104 -------------
 docs/dependencies.md                     |   8 -
 docs/evm-integration.md                  | 122 ---------------
 docs/failed-checklist.md                 |  15 --
 docs/form-guide.md                       | 104 -------------
 docs/i18n-guide.md                       |  22 ---
 docs/local-or-remote-dialog.md           |  71 ---------
 docs/mask-flavored-jsonrpc-api.md        | 113 --------------
 docs/npm-scope.md                        |   9 --
 docs/payload-format/payload-container.md |  32 ----
 docs/payload-format/payload-v37.md       | 189 -----------------------
 docs/payload-format/typed-message.md     | 121 ---------------
 docs/plugin-development-guide.md         |  92 -----------
 docs/plugin-development-quickstart.md    |  31 ----
 docs/setup.md                            | 104 -------------
 docs/toc.md                              |  59 -------
 docs/wallet-integration.md               | 105 -------------
 22 files changed, 1557 deletions(-)
 delete mode 100644 docs/ARCHITECTURE.md
 delete mode 100644 docs/FAQ.md
 delete mode 100644 docs/blockchain-integration.md
 delete mode 100644 docs/bounty-development-guide.md
 delete mode 100644 docs/concepts.md
 delete mode 100644 docs/css-in-js.md
 delete mode 100644 docs/dependencies.md
 delete mode 100644 docs/evm-integration.md
 delete mode 100644 docs/failed-checklist.md
 delete mode 100644 docs/form-guide.md
 delete mode 100644 docs/i18n-guide.md
 delete mode 100644 docs/local-or-remote-dialog.md
 delete mode 100644 docs/mask-flavored-jsonrpc-api.md
 delete mode 100644 docs/npm-scope.md
 delete mode 100644 docs/payload-format/payload-container.md
 delete mode 100644 docs/payload-format/payload-v37.md
 delete mode 100644 docs/payload-format/typed-message.md
 delete mode 100644 docs/plugin-development-guide.md
 delete mode 100644 docs/plugin-development-quickstart.md
 delete mode 100644 docs/setup.md
 delete mode 100644 docs/toc.md
 delete mode 100644 docs/wallet-integration.md

diff --git a/docs/ARCHITECTURE.md b/docs/ARCHITECTURE.md
deleted file mode 100644
index e9c4c414a9c4..000000000000
--- a/docs/ARCHITECTURE.md
+++ /dev/null
@@ -1,53 +0,0 @@
----
-author: Jack-Works
-maintainer:
-  - Jack-Works
-  - Septs
----
-
-# Mask Network Architecture Overview
-
-![WIP](https://img.shields.io/badge/status-wip-orange.svg?style=flat-square)
-
-> This document describes the Mask Network protocols, the subsystems,
-> the interfaces, and how it all fits together.
-> It delegates non-interface details to other specs as much as possible.
-> This is meant as a top-level view of the protocol and how the system fits together.
-
-## Subsystems
-
-### Background service
-
-The entry point is `packages/mask/src/background-service.ts`
-
-Background service is like a "backend" or "server" in a normal web app.
-It is running on a web page that not visible to the user ([background page in Web Extensions][background-page]).
-The background page hosts mosts of our non-UI-related work in the Mask Network. If you see code like
-
-[background-page]: https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#background_scripts
-
-```js
-Services.Crypto.encrypt(...)
-```
-
-It is sending the request to the background service.
-
-### Content scripts
-
-The entry point is `packages/mask/src/content-script.ts`.
-
-All UI on the Twitter/Facebook are rendered by the content scripts.
-
-### Options page (or Dashboard)
-
-The entry point is `packages/mask/src/extension/options-page/index.tsx`.
-
-This is a normal web app that interacts with the background page.
-
-### Injected scripts
-
-The entry point is `packages/mask/src/extension/injected-script/index.ts`.
-
-Generally, you don't need to modify this. It provides the ability to change the main Realm of the web page. (Thus we can emulate some DOM events).
-
-![Architecture overview](https://user-images.githubusercontent.com/5390719/109270562-28f4a700-7849-11eb-9a7a-b364318bdeec.png)
diff --git a/docs/FAQ.md b/docs/FAQ.md
deleted file mode 100644
index 543bef8d0847..000000000000
--- a/docs/FAQ.md
+++ /dev/null
@@ -1,103 +0,0 @@
-# FAQ
-
-## How to resolve merge conflicts in `pnpm-lock.yaml`?
-
-Merge the target branch into yours and never mind those conflicts in `pnpm-lock.yaml`. And checkout the file to be the one on the target branch to revert changes your branch took in. Then run `pnpm install` to up the lockfile to date.
-
-E.g., your `feat/fantasy` branch conflicts with `develop` branch.
-
-```bash
-> git branch --show-current
-feat/fantasy
-
-# merge the develop branch and never manually handle the conflicts in lock file
-> git merge develop
-
-# check out the lock file from the base branch
-> git checkout develop -- pnpm-lock.yaml
-
-# up the lockfile to date
-> pnpm install
-```
-
-## Why my Git hooks don't work?
-
-```bash
-npx husky install # on project root directory
-```
-
-## How to fix cspell errors in CI?
-
-This project uses [cspell](https://github.com/streetsidesoftware/cspell) for checking typos. You can add unlisted words into `cspell.json` to bypass cspell checking. After you update the configuration file, you could run checking locally before pushing it to make sure your patch is working.
-
-```bash
-npx cspell lint pattern_that_match_your_files
-
-# e.g. check spell of the RSS3 plugin
-npx cspell lint ./packages/plugins/RSS3/**/*
-```
-
-Learn more: [`cspell.json`](https://cspell.org/configuration/#cspelljson)
-
-## Why were my components rendered many times?
-
-All components should working in [Strict Mode](https://reactjs.org/docs/strict-mode.html) and React 18 new [Strict Effects](https://github.com/reactwg/react-18/discussions/19).
-
-If you found your code not working correctly, please read the documentation above. In addition, you can comment out `<StrictMode />` temporarily to verify if it is a problem with your component not supporting Strict Mode.
-
-DO NOT remove `<StrictMode />`.
-
-## How to download CI builds?
-
-| Name                          | Description                                                             |
-| ----------------------------- | ----------------------------------------------------------------------- |
-| MaskNetwork.base.zip          | The default build, currently is the same as the Chromium build.         |
-| MaskNetwork.chromium-beta.zip | Build for Chromium based browsers with some insider features turned on. |
-| MaskNetwork.chromium.zip      | Build for Chromium based browsers                                       |
-| MaskNetwork.firefox.zip       | Build for Firefox                                                       |
-| MaskNetwork.gecko.zip         | Build for Android native Mask app                                       |
-| MaskNetwork.iOS.zip           | Build for iOS native Mask app                                           |
-
-You can download these builds in two places.
-
-- Github: Open the pull request page, and click the **Actions** tab. Then on the opened page, click the **build** sub-item on the **Compile** item. On the action detailed page, click the **Summary** tab. Now you can download builds on the **Artifacts** section.
-
-  E.g., <https://github.com/DimensionDev/Maskbook/actions/runs/2026749204>
-
-- CircleCI: Open the pull request page, and scroll down to the review status card. Click **Show all checks** to find the **
-  ci/circleci: build** item, and click the **details** link. On the opened CircleCI page, click the **ARTIFACTS** tab.
-
-  E.g., <https://app.circleci.com/pipelines/github/DimensionDev/Maskbook/24886/workflows/eeabcc93-6152-437f-a65d-24f0acee34a9/jobs/52795/artifacts>
-
-## How to resolve "No CORS Headers" problem
-
-Please contact the service maintainer to add CORS headers, the extension will send requests in following origins:
-
-| Browser  | Origin                                              |
-| -------- | --------------------------------------------------- |
-| Chromium | chrome-extension://jkoeaghipilijlahjplgbfiocjhldnap |
-| Firefox  | moz-extension://id                                  |
-
-The Chromium extension has a fixed id, but only on production mode. And the Firefox browser will set a new id each time it boots an extension. So, in summary, it's better to allow all origins which match the regexp below.
-
-```txt
-/.*-extension:\/\/[^\S]+/
-```
-
-If you cannot reach the service maintainer another workaround is to use a proxy server to add CORS headers. To enable it try to change the request URL into `https://cors.r2d2.to/?=[url]`.
-
-```ts
-// before
-fetch('https://api.com')
-
-// after
-fetch('https://cors.r2d2.to/?=https://api.com')
-```
-
-## How to clear the local settings?
-
-Open the background.html of the extension and execute the following scripts in the console.
-
-```js
-browser.storage.local.clear()
-```
diff --git a/docs/blockchain-integration.md b/docs/blockchain-integration.md
deleted file mode 100644
index 3e7fce495d56..000000000000
--- a/docs/blockchain-integration.md
+++ /dev/null
@@ -1,5 +0,0 @@
-# Blockchain Integration
-
-Mask Network assumes many capabilities that a blockchain should have. For example, a blockchain uses an "address" to locate a crypto-identity, a wallet keeps the crypto stuff safe from risk, and a "block" contains many transactions that push the system to the next state.
-
-The fundamental of blockchain is neutral. We could leverage it to do anything. However, a few years ago, people found financial usage from it and heavily developed it. As a result, almost all blockchains support "tokens" natively to proof of ownership.
diff --git a/docs/bounty-development-guide.md b/docs/bounty-development-guide.md
deleted file mode 100644
index 2e3f8887d93e..000000000000
--- a/docs/bounty-development-guide.md
+++ /dev/null
@@ -1,74 +0,0 @@
-# Bounty Development Guide
-
-Hi, Awesome people! Welcome to start a bounty task on Mask Network.
-
-## Tech Requirements
-
-Mask Network extension is written in TypeScript. The UI is written by React and [@mui](https://mui.com/) framework. We write CSS in [CSS-in-JS](css-in-js.md) style.
-
-We prefer widely adopting tech solutions that include:
-
-- [Web3.js](https://web3js.readthedocs.io/) Ethereum JavaScript API
-- [react-use](https://streamich.github.io/react-use/) React Hooks — 👍
-- [bignumber.js](https://mikemcl.github.io/bignumber.js/) A JavaScript library for arbitrary-precision arithmetic.
-- [lodash](https://lodash.com/docs/) A modern JavaScript utility library delivering modularity, performance & extras.
-- [urlcat](https://urlcat.dev/) A URL builder library for JavaScript.
-
-> If your bounty task is related to another project, it could have extra requirements that need to consider.
-
-If you are familiar with these libraries mentioned above, it will take less effort for you to get started.
-The codebase is open-sourced under the AGPLv3 license.
-
-## Packages
-
-After cloning the repository and [set up the development environment](setup.md). The codebase is constructed as a monorepo with many internal packages. Each package serves a specific purpose. Let's take a quick tour.
-
-### Core Packages
-
-- `packages/mask` The main extension which has multiple websites supports, keeps the user's data safe and hosts a plugin system.
-- `packages/encryption` The encryption & decryption of mask network.
-- `packages/plugin-infra` The definition of the plugin system, with a bunch of APIs to expose the core abilities to plugins.
-
-### Plugin Packages
-
-- `packages/plugins/*` All of integrated plugins.
-
-### Shared Packages
-
-- `packages/shared` Shared UI components and utilities.
-- `packages/shared-base` Shared types, constants, and atomic units. Must be as pure as possible and testable.
-
-### Web3 Packages
-
-- `packages/web3-constants` Each Web3 constant must set up for all known chain IDs.
-- `packages/web3-contracts` EVM contract ABIs and compiled TypeScript definitions.
-- `packages/web3-provider` A hub of APIs for external data source.
-- `packages/web3-shared-*` Shared hooks, utilities, types for each network.
-
-## Learn Through Examples
-
-Almost all bounty tasks for the Mask Network plugin relate to a plugin. After learning the basics, checkout those pull requests or plugins to learn quick from examples.
-
-### Dapp Plugins
-
-| Plugin      | Pull Request Links                                                                              |
-| ----------- | ----------------------------------------------------------------------------------------------- |
-| Collectible | <https://github.com/DimensionDev/Maskbook/pulls?q=is%3Apr+label%3A%22Plugin%3A+Collectibles%22> |
-| Trader      | <https://github.com/DimensionDev/Maskbook/pulls?q=is%3Apr+label%3A%22Plugin%3A+Trader%22>       |
-| Savings     | <https://github.com/DimensionDev/Maskbook/pulls?q=is%3Apr+label%3A%22Plugin%3A+Savings%22>      |
-
-### Network Plugins
-
-| Plugin     | Pull Request Links                                                                     |
-| ---------- | -------------------------------------------------------------------------------------- |
-| EVM Chains | <https://github.com/DimensionDev/Maskbook/pulls?q=is%3Apr+label%3A%22Plugin%3A+EVM%22> |
-
-## Pull Request Conversions
-
-After bounty hacker opening a pull request. Reviewer will label it with `Type: Bounty`, and update a status tag while the progress on-going.
-
-| Status              | Description                                                                  |
-| ------------------- | ---------------------------------------------------------------------------- |
-| `Bounty: Started`   | The DEV team noticed your request. You will receive comments from reviewers. |
-| `Bounty: Reviewed`  | The QA team noticed your request. You will receive bugs from reviewers.      |
-| `Bounty: Qualified` | Your request is qualifed. It will ship soon.                                 |
diff --git a/docs/concepts.md b/docs/concepts.md
deleted file mode 100644
index 8f2f9615e826..000000000000
--- a/docs/concepts.md
+++ /dev/null
@@ -1,21 +0,0 @@
-# Concepts
-
-## Persona
-
-## Post Payload
-
-## Wallet
-
-## Dashboard
-
-## Popup
-
-## SNS Provider
-
-## Wallet Provider
-
-## Plugin
-
-## Network
-
-## ChainId
diff --git a/docs/css-in-js.md b/docs/css-in-js.md
deleted file mode 100644
index d92374225867..000000000000
--- a/docs/css-in-js.md
+++ /dev/null
@@ -1,104 +0,0 @@
----
-author: Jack-Works
-maintainer:
-  - Jack-Works
-  - Septs
----
-
-# CSS in JS guide in Mask Network
-
-## General guides
-
-- ✅ For recommendations
-- &#9888; For warnings
-- 🚫 For forbidden
-- ✅ Use [the Box component provided by the library](https://next.material-ui.com/components/box/#main-content)
-  when the CSS is simple and only used once.
-- ✅ CSS custom variables is OK but do not abuse it.
-  Get the variable from the theme if it is possible.
-- ✅ CSS grid is OK but you may want to use the `Grid` component.
-  Choose the fit one based on your need.
-- 🚫 DO NOT use mystery abbreviations in the `sx` properties, e.g. `<Box sx={{ p: 5 }} />`
-  (DON'T) but `<Box sx={{ padding: 5 }}>` (DO, easier to read).
-
-## Guides on the `makeStyles` style
-
-```ts
-const useStyle = makeStyles<Props>()((theme) => ({
-  root: { margin: theme.spacing(4) },
-}))
-```
-
-### Change style of MUI components
-
-✅ DO
-
-```js
-<Button classes={{ disabled: classes.disabled }} />
-```
-
-## Guides on the `styled component`
-
-```js
-const Title = style.div`
-    display: flex;
-`
-```
-
-### ✅ &#9888; You can use `styled component` in the project
-
-#### 🚫 DO NOT use dynamic styles
-
-```js
-// 🚫 Bad
-const Title = style(Typography)(
-  ({ theme }) => `
-    margin-left: ${theme.spacing(4)};
-`,
-)
-
-// 🚫 Bad
-const Title = style(Typography)(({ theme }) => ({
-  marginLeft: theme.spacing(4),
-}))
-```
-
-### 🚫 Direct selector to the deeper elements of the library
-
-```js
-const Title = style.div`
-    & .Mui-Button-root { display: flex; }
-`
-```
-
-DO NOT do this.
-
-Reason: Not type-checked. Easy to get things wrong.
-
-### 🚫 Selector used in the styled component
-
-Please use `makeStyles` in this case.
-
-```js
-const Dialog1 = style(Dialog)`
-    & > .Mui-Some-Mui-Selector {}
-`
-```
-
-### ✅ `components` or `*Component` style
-
-Overwriting styles in this way is acceptable.
-
-```js
-const MyExample = styled(Example)`
-    /* CSS goes here */
-`
-
-// Use it via:
-<Parent components={{ example: MyExample }} />
-// Or:
-<Parent ExampleComponent={MyExample} />
-```
-
-&#9888; No every component has this kind of API that allowing to overwrite
-the inner component so this method may not be able to use.
diff --git a/docs/dependencies.md b/docs/dependencies.md
deleted file mode 100644
index 788a75dbdae4..000000000000
--- a/docs/dependencies.md
+++ /dev/null
@@ -1,8 +0,0 @@
-# Dependencies upgrading
-
-- `@dimensiondev/webextension-shim`: MUST match the version from the iOS side.
-- `@dimensiondev/stego-js`: See <https://github.com/DimensionDev/Maskbook/pull/2139>
-- `stream-http`: DO NOT upgrade to version 3, it is used as a polyfill in Webpack but version 3 seems breaking.
-- Blockchain related: contact @guanbinrui
-
-Other dependencies
diff --git a/docs/evm-integration.md b/docs/evm-integration.md
deleted file mode 100644
index 5a7d0a22ba42..000000000000
--- a/docs/evm-integration.md
+++ /dev/null
@@ -1,122 +0,0 @@
-# EVM Chain Integration
-
-It's easy to integrate an EVM-compatible chain into Mask Network. After you add a new `ChainId` and `NetworkType` in `packages/web3-shared/evm/types/index.ts`. You can follow the TypeScript compiler. By fixing these errors, the integration progress will keep moving forward. Here is a complete instruction list to ensure you wouldn't miss anything.
-
-## Integration Instructions
-
-### Setup Metadata
-
-- [ ] Add a logo image
-  - `packages/mask/src/plugins/EVM/assets/`
-- [ ] Add metadata data
-  - `packages/web3-shared/evm/assets/chains.json`
-- [ ] Add an HTTP RPC node
-  - `packages/web3-constants/evm/rpc.json`
-- [ ] Set network descriptor
-  - `PLUGIN_NETWORKS` in `packages/mask/src/plugins/EVM/constants.ts`
-
-### Setup External APIs
-
-Mask Network fetches on-chain data from various data sources. Therefore, you can configure the identification data of the chain on those providers.
-
-| Provider      | Configuration Path                               |
-| ------------- | ------------------------------------------------ |
-| DeBank        | `packages/web3-constants/evm/debank.json`        |
-| CoinGecko     | `packages/web3-constants/evm/coingecko.json`     |
-| CoinMarketCap | `packages/web3-constants/evm/coinmarketcap.json` |
-| Zerion        | `packages/web3-constants/evm/zerion.json`        |
-
-#### Learn more
-
-- <https://api.coingecko.com/api/v3/asset_platforms>
-
-### Web3 Constants Compile Config
-
-Add the chain name to `compileConstants()` in `packages/web3-constants/compile-constants.ts`.
-
-### Token List
-
-The team maintains a token list <https://github.com/DimensionDev/Mask-Token-List>. So free feel to create one for the chain. And add the token list link to `packages/web3-constants/evm/token-list.json`.
-
-### Token Icon
-
-The token icon could be read from the token list. Or in case of a network problem from a fallback link. Add the fallback links into `packages/web3-constants/evm/token-asset-base-url.json`.
-
-### DEX
-
-Mask Network has integrated Uniswap V2 and Uniswap V3 into the trader plugin. If the DEX of the chain is a fork from them can be easily configured. Learn more: `packages/web3-constants/evm/trader.json`.
-
-For API-based DEX, please ref to how other DEXes integrated:
-
-| DEX       | Pull Request Link                                    |
-| --------- | ---------------------------------------------------- |
-| DODO      | <https://github.com/DimensionDev/Maskbook/pull/3882> |
-| OpenOcean | <https://github.com/DimensionDev/Maskbook/pull/5198> |
-
-### Deploy Contracts
-
-If there is no one deployed [these contracts](https://github.com/DimensionDev/misc_smart_contract) on the chain. Please contact the team.
-
-- [ ] Multicall Contract
-- [ ] BalanceChecker
-- [ ] Other contracts from the Mask team
-
-### Translate JSON-RPC
-
-For a chain that follows a different JSON-RPC protocol with the [Ethereum](https://eth.wiki/json-rpc/API), a transactor is used to `encode` and `decode` each request and make the chain just like an EVM-compatible one.
-
-E.g., the CELO chain can pay the transaction fee with non-native tokens. It supports to use [`feeCurrency`](https://docs.celo.org/celo-codebase/protocol/transactions/erc20-transaction-fees) field to set the token address, which doesn't exist in the original [`eth_sendTransaction`](https://eth.wiki/json-rpc/API#eth_sendtransaction) payload. You can fulfill this requirement by a transactor without altering any JSON-RPC facilities.
-
-```ts
-class CeloTranslator extends Base {
-  override encode(context: Context) {
-    context.config = {
-      ...context.config,
-      feeCurrency: '0x0000000000000000000000000000000000000001', // suppose it's a token address
-    }
-  }
-}
-```
-
-### 🎉
-
-Congratulation! You have done the coding part.
-
-## Testing Checklist
-
-Here is the chain abilities checklist. If you are working on a bounty task, please do each task in list before inviting the team to review your pull request.
-
-- [ ] Check if the asset list and transaction history on the dashboard page work when you choose the chain as the network.
-  - Setup the chain for DeBank API.
-- [ ] Check if the trending view is working. Try to hover a new chain token in any tweets.
-
-  - Setup the chain for Coingecko API.
-  - Setup the chain for CoinMarketCap API.
-
-- [ ] Check if the gas estimate dialog is working.
-
-  - Setup the chain for CoinGecko API.
-
-- [ ] Trade with the DEX on the chain.
-
-  - Integrate a DEX for the chain.
-  - Estimate gas will be showed on DEX card and sort correctly.
-
-- [ ] Send a transaction and check if the explorer links are working.
-
-  - Setup metadata and RPC for the chain.
-  - Transaction sent to wallet with medium gas fee setting.
-  - Required to unlock ERC20 token before swapping ERC20 to any other tokens.
-
-- [ ] Transfer token on the transfer page of Dashboard and the wallet tab of the plugin popup.
-
-## Examples
-
-| Chain     | Pull Request Link                                    |
-| --------- | ---------------------------------------------------- |
-| CELO      | <https://github.com/DimensionDev/Maskbook/pull/5052> |
-| Fantom    | <https://github.com/DimensionDev/Maskbook/pull/5036> |
-| xDai      | <https://github.com/DimensionDev/Maskbook/pull/4140> |
-| Arbitrum  | <https://github.com/DimensionDev/Maskbook/pull/3558> |
-| Avalanche | <https://github.com/DimensionDev/Maskbook/pull/5289> |
-| Harmony   | <https://github.com/DimensionDev/Maskbook/pull/5835> |
diff --git a/docs/failed-checklist.md b/docs/failed-checklist.md
deleted file mode 100644
index 437f72e5ad89..000000000000
--- a/docs/failed-checklist.md
+++ /dev/null
@@ -1,15 +0,0 @@
-# Checklist
-
-## Build error / Runtime crash
-
-1. Run `npx gulp clean`, Cleanup cache and build files
-
-## CI failed
-
-1. Cannot connect to git@github.com, public key rejected
-   1. Run `npx gulp fix-lockfile`
-
-## I18n strings error
-
-1. Run `npx gulp sync-languages`
-1. Run `npx gulp i18n-codegen`
diff --git a/docs/form-guide.md b/docs/form-guide.md
deleted file mode 100644
index 2186017f0e68..000000000000
--- a/docs/form-guide.md
+++ /dev/null
@@ -1,104 +0,0 @@
-# Form Guide
-
-## General content
-
-We use [`react-hook-form`](https://react-hook-form.com/) and [`zod`](https://github.com/colinhacks/zod#error-formatting) to create the form. Here are the basic steps to create a simple form
-
-### 1. Use `zod` to create form field schema
-
-You can set error message with i18n, you can read this file to learn about [i18n](i18n-guide.md)
-
-```tsx
-import { z as zod } from 'zod'
-
-export function ComponentForm() {
-  const t = useComponentI18N() // Set error message with i18n.
-  const schema = zod.object({
-    name: zod.string(), // string
-    age: zod.number(t.needBeNumber()).positive(t.needGreaterThanZero()), // > 0
-    country: zod.string(t.countyNeedBeString()).optional(), // string | undefined
-    address: zod
-      .string()
-      .min(1)
-      .refine((address) => ValidAddress(address), t.InvalidAddress), // You can use other methods to validate this field
-  })
-
-  // ...
-}
-```
-
-### 2. Call `useForm` to get the method collection
-
-```tsx
-import { zodResolver } from '@hookform/resolvers/zod'
-import { useForm } from 'react-hook-form'
-
-const methods = useForm<formType>({
-  resolver: zodResolver(schema),
-  defaultValues: {
-    name: '',
-    age: 1,
-    address: '',
-  },
-})
-```
-
-`react-hook-form` provides [optional arguments](https://react-hook-form.com/api/useform), you can change it on demand.
-
-### 3. Create form UI with `Controller` and Material-UI component
-
-The `react-hook-form` provides the `Controller` component without import other packages to support UI libraries
-
-```tsx
-const {
-  control,
-  handleSubmit,
-  formState: { errors, dirtyFields, isDirty },
-} = useForm(options)
-
-const onSubmit = handleSubmit((data) => doSomething())
-
-return (
-  <form>
-    <Controller
-      render={({ field }) => <TextField {...field} helperText={errors.name?.message} error={dirtyFields.name} />}
-      name="name"
-    />
-    <Button onClick={onSubmit} disabled={!isValid} />
-  </form>
-)
-```
-
-## Caveats
-
-### Use `useFormContext` to get methods in children component
-
-In practice, you may need to get form methods in the children component. You can use `useFormContext` and `FormProvider` to resolve this problem.
-
-```tsx
-// Parent component
-const methods = useForm()
-return <FormProvider {...methods}>....</FormProvider>
-
-// Children component
-const { control, register, formState } = useFormContext()
-```
-
-### Set field
-
-Sometimes we need set some field from remote data. You can use `setValue` to change these field. If you want to trigger valid while setting the field, you can add the `shouldValid` option
-
-```tsx
-const { watch, setValue } = useForm()
-
-// You can use watch to monitor some field change
-const address = watch('address')
-useEffect(() => {
-  const { symbol } = fetchDataByAddress(address)
-  setValue('symbol', symbol, { shouldValid: true })
-}, [address])
-```
-
-### Be careful with watch
-
-Sometimes we need to listen to the field update to do something. Although you can use `watch` to react to a field. But it will cause extra renders and cause a potential performance problem. Try to use `getValues` if that suits you.
diff --git a/docs/i18n-guide.md b/docs/i18n-guide.md
deleted file mode 100644
index 25a41f69ee7d..000000000000
--- a/docs/i18n-guide.md
+++ /dev/null
@@ -1,22 +0,0 @@
-# Internationalization Guide (i18n guide)
-
-[![Crowdin](https://badges.crowdin.net/mask-network/localized.svg)](https://crowdin.com/project/mask-network)
-
-> We're currently not accepting new language support in Mask Network.
-
-## Submit community translation
-
-Welcome to <https://crowdin.com/project/mask-network> or you can join our [Discord server](https://discord.gg/4SVXvj7)
-
-## Caveats
-
-1. We using [ISO 639-1][iso-639-1] two-letter code for locale file names.
-
-2. Add a new language new support
-
-   Please send to [Discord server](https://discord.gg/4SVXvj7) - `idea` channel
-
-3. When add a new i18n text, add English version only,
-   leave the rest to professional translators
-
-[iso-639-1]: https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes
diff --git a/docs/local-or-remote-dialog.md b/docs/local-or-remote-dialog.md
deleted file mode 100644
index 18ae0e6167f5..000000000000
--- a/docs/local-or-remote-dialog.md
+++ /dev/null
@@ -1,71 +0,0 @@
----
-author: zhouhancheng
-maintainer:
-  - zhouhancheng
----
-
-# Local Dialog vs Remote Dialog
-
-## What is remote-dialog
-
-```ts
-function useRemoteControlledDialog<
-  T extends {
-    open: boolean
-  },
->(
-  event: UnboundedRegistry<T>,
-  onUpdateByRemote?: ((ev: T) => void) | undefined,
-  tabType?: 'self' | 'activated',
-): readonly [boolean, (ev: T) => void]
-```
-
-`remote-dialog` serves a special universal scene.
-
-e.g: Ethereum transaction state track dialog, Select wallet dialog, they are used at lot of places.
-
-It is a global singleton:
-
-```tsx
-export const EthereumPluginDefine: PluginConfig = {
-  PageComponent() {
-    return <TransactionDialog />
-  },
-}
-```
-
-## What is local-dialog
-
-`local-dialog` serves for detailed business logic.
-Its props provided by parent component,
-since it is part of the detailed business actually,
-its code located under the parent component which open/close it.
-
-```tsx
-<SnapshotCard>
-  //...
-  <VoteConfirmDialog
-    open={open}
-    loading={loading}
-    onClose={() => setOpen(false)}
-    choiceText={choices[choice - 1]}
-    message={message}
-    power={power}
-    onVoteConfirm={onVoteConfirm}
-  />
-</SnapshotCard>
-```
-
-## When not to use remote-dialog
-
-1. If you render `remote-dialog` under twitter timeline payload post component.
-   As you click the open dialog button, you will find several dialogs would be opened,
-   because each instance has been loaded
-   when there're multiple payload posts at the timeline and are listening to the open dialog event.
-
-2. `remote-dialog` loads in advance, usually it only loads once after the web page loads,
-   which leads to that data returned by its network request hooks isn't the latest.
-   Even a dialog is not rendered under on timeline,
-   there's only one instance rendered at the same time.
-   If you want it to fetch the latest network data each time when you open it,
-   consider using `local-dialog`.
diff --git a/docs/mask-flavored-jsonrpc-api.md b/docs/mask-flavored-jsonrpc-api.md
deleted file mode 100644
index 0403bdebfe94..000000000000
--- a/docs/mask-flavored-jsonrpc-api.md
+++ /dev/null
@@ -1,113 +0,0 @@
-<!-- markdownlint-disable no-duplicate-heading -->
-
-# Mask Flavored JSON RPC API
-
-## Transaction
-
-### `mask_watchTransaction`
-
-Periodically retrieve the transaction receipt and cache the result in the background.
-
-> Note: The [`eth_getTransactionReceipt`](https://eth.wiki/json-rpc/API#eth_gettransactionreceipt) will read receipt from the cache instead of the RPC provider. If you really need the instant receipt you should use `mask_getTransactionReceipt`.
-
-#### Parameters
-
-- `string` the hash of transaction
-- `config` the transaction config object. Learn more: [`eth_sendTransaction`](https://eth.wiki/json-rpc/API#eth_sendtransaction).
-
-#### Returns
-
-- `void`
-
-### `mask_unwatchTransaction`
-
-Stop watching a transaction. It means invoke [`eth_getTransactionReceipt`](https://eth.wiki/json-rpc/API#eth_gettransactionreceipt) with the given hash will always return `null`.
-
-#### Parameters
-
-- `string` the hash of transaction
-
-#### Returns
-
-- `void`
-
-### `mask_getTransactionReceipt`
-
-The non-hijacked version of [`eth_getTransactionReceipt`](https://eth.wiki/json-rpc/API#eth_gettransactionreceipt).
-
-### `mask_replaceTransaction`
-
-Replace a transaction with the given one.
-
-#### Parameters
-
-- `string` the hash of the transaction to be replaced
-- `config` the transaction config object. Learn more: [`eth_sendTransaction`](https://eth.wiki/json-rpc/API#eth_sendtransaction).
-
-#### Returns
-
-- `void`
-
-### `mask_cancelTransaction`
-
-Cancel the given transaction.
-
-#### Parameters
-
-- `string` the hash of the transaction to be canceled
-- `config` the transaction config object. Learn more: [`eth_sendTransaction`](https://eth.wiki/json-rpc/API#eth_sendtransaction).
-
-#### Returns
-
-- `void`
-
-### `mask_confirmTransaction`
-
-Confirm to send a risk transaction.
-
-#### Parameters
-
-- `void`
-
-#### Returns
-
-- `void`
-
-### `mask_rejectTransaction`
-
-Reject to send a risk transaction.
-
-#### Parameters
-
-- `void`
-
-#### Returns
-
-- `void`
-
-## Wallet
-
-### `mask_requestAccounts`
-
-Connect to any wallet on the back of Mask Network.
-
-#### Parameters
-
-- `number` or `void` the chain id of the expected chain
-- `string` or `void` the network id of the expected chain (`NetworkPluginID`)
-
-#### Returns
-
-- `void`
-
-### `mask_dismissAccounts`
-
-Disconnect with the connected wallet.
-
-#### Parameters
-
-- `void`
-
-#### Returns
-
-- `void`
diff --git a/docs/npm-scope.md b/docs/npm-scope.md
deleted file mode 100644
index 95120ca31878..000000000000
--- a/docs/npm-scope.md
+++ /dev/null
@@ -1,9 +0,0 @@
-# npm scope
-
-We controlled the following npm scope by [@yisiliu](https://github.com/yisiliu)
-
-- <https://npmjs.com/~dimensiondev>
-- <https://npmjs.com/~holoflows>
-- <https://npmjs.com/~maskbook>
-- <https://npmjs.com/~masknet>
-- <https://npmjs.com/~masknetwork>
diff --git a/docs/payload-format/payload-container.md b/docs/payload-format/payload-container.md
deleted file mode 100644
index 2101fe8f7a84..000000000000
--- a/docs/payload-format/payload-container.md
+++ /dev/null
@@ -1,32 +0,0 @@
-# `PayloadContainer`
-
-> Status: This format has not been shipped to production yet. It might change at any time.
-
-## Abstract
-
-This is a simple binary format that describes a binary message and its signature (optionally).
-
-It is used in the encryption of Mask Network.
-
-## Format
-
-The 0th byte is a switch. The interpretation of the rest part depends on the 0th byte.
-
-### 0th byte is `0x00`
-
-If the payload length is less than 33 bytes, it is invalid.
-
-- Byte 1 to 32 is the `SHA-256` hash of the `message`.
-- Byte 33 to the end is the `message`.
-
-### 0th byte is `0x01`
-
-- Byte 1 to the end is the `message`.
-
-### 0th-byte other value
-
-It's an invalid payload.
-
-## Next step
-
-Once you parsed the `message` out as a binary, you should further try to parse the `message` as a [Payload37](./payload-v37.md) object.
diff --git a/docs/payload-format/payload-v37.md b/docs/payload-format/payload-v37.md
deleted file mode 100644
index 3846bdf00741..000000000000
--- a/docs/payload-format/payload-v37.md
+++ /dev/null
@@ -1,189 +0,0 @@
-# Payload version -37
-
-> Status: This format has not been shipped to production yet. It might change at any time.
-
-## Abstract
-
-This is a binary format that is used to represent an encrypted message in the Mask Network.
-
-The implementor SHOULD implement a tolerate parser for the payload.
-
-## Encoding
-
-To avoid reinvention of a new binary format that is hard to parse/generate, this specification chooses to represent data in the [MessagePack][msgpack-spec] binary format.
-
-Type `Integer`, `Float`, `Nil`, `Boolean`, `String`, `Binary`, `Array` and `Map` are defined in the [msgpack specification][msgpack-spec]. Other type defined in this RFC is written in the TypeScript syntax.
-
-To avoid encoding field names into the binary (which is space-wasting), this RFC chooses to use a tuple (represented by `Array` in MessagePack), in which the order of the fields represented its meaning.
-
-In extra, we define the following helper types:
-
-```typescript
-type Number = Integer | Float
-type Any = Integer | Nil | Boolean | Float | String | Binary | Array<Any> | Map
-```
-
-In this specification, any form of MessagePack extension (like a timestamp) is NOT used. An implementation MAY treat data including extensions as invalid.
-
-`Array` in this specification is used as `Tuple` with an arbitrary size, which means items in the Array don't have to be the same type.
-
-> e.g. both `[1, "string"]` and `["string", 1]` are valid `Array`s that has the type `Array<String | Integer>`.
-> But if the order is meaningful, the type should be `[Integer, String]`.
-
-All Tuple in this specification MUST be treated as non-fixed length. This means `[1, "string", true]` is valid when `[Integer, String]` is required. An implementation MUST NOT fail due to the extra item unless especially specified.
-
-### `Payload37`
-
-```typescript
-type PayloadAlpha37 = [
-  version: Integer,
-  authorNetwork: String | SocialNetworkEnum | Nil,
-  authorID: String | Nil,
-  authorPublicKeyAlgorithm: String | PublicKeyAlgorithmEnum,
-  authorPublicKey: Binary | Nil,
-  encryption: Encryption,
-  data: Binary,
-]
-enum SocialNetworkEnum {
-  Facebook = 0,
-  Twitter = 1,
-  Instagram = 2,
-  Minds = 3,
-}
-enum PublicKeyAlgorithmEnum {
-  ed25519 = 0,
-  secp256p1 = 1, // P-256
-  secp256k1 = 2, // K-256
-}
-```
-
-#### `version` field
-
-This field represents the format version.
-
-The first and the current binary version is `0`.
-
-#### `authorNetwork` field
-
-This field represents the social network that the author of this payload belongs to.
-
-When it is `SocialNetworkEnum`, it represents a SocialNetwork that is supported by the Mask Network.
-
-When it is `String`, it represents a SocialNetwork cannot be expressed within the enum. e.g. A decentralized SNS like Mastodon.
-
-When it is `Nil`, it represents no information is available (due to software defeat or user choice to opt out).
-
-#### `authorID` field
-
-This field represents the identifiable ID of the author of this payload `Nil`.
-
-When it is `Nil`, it represents no information is available (due to software defeat or user choice to opt out).
-
-#### `authorPublicKeyAlgorithm` field
-
-This field represents the algorithm that the public key is using.
-
-When it is `PublicKeyAlgorithmEnum`, it represents a well-known asymmetric algorithm.
-
-When it is `String`, it represents an asymmetric algorithm that is not covered in this specification.
-
-The implementation MUST NOT fail if the algorithm is not supported.
-
-#### `authorPublicKey` field
-
-This field represents the public key of the author.
-
-The value is in the compressed format of the EC key.
-
-> TODO: clarify "compressed" format
-
-When it is `Nil`, it represents no information is available (due to software defeat or user choice to opt out).
-
-#### `encryption` field
-
-This field represents how this payload is encrypted. There are two types of encryption, `PublicEncrypted` and `PeerToPeerEncrypted`
-
-```typescript
-type Encryption = PublicEncrypted | PeerToPeerEncrypted
-enum EncryptionKind {
-  Public = 0,
-  PeerToPeer = 1,
-}
-```
-
-The `Encryption` type is a tagged Tuple (the first item is the tag).
-
-##### `PublicEncrypted`
-
-This type represents this payload is encrypted, but the AES key is shared with everyone (and encoded in the payload).
-
-This means the message is NOT privately encrypted.
-
-```typescript
-type PublicEncrypted = [
-  //
-  kind: EncryptionKind.Public,
-  AES_KEY: Binary,
-  iv: Binary,
-]
-```
-
-###### `AES_KEY`
-
-This field represents the raw AES-256-GCM key of this payload.
-
-###### `iv` field
-
-This field represents the iv used to encrypt the message.
-
-##### `PeerToPeerEncrypted`
-
-```typescript
-type PeerToPeerEncrypted = [
-  kind: EncryptionKind.PeerToPeer,
-  ownerAESKeyEncrypted: Binary,
-  iv: Binary,
-  authorEphemeralPublicKey: Map<PublicKeyAlgorithmEnum, Binary>,
-]
-```
-
-###### `ownerAESKeyEncrypted` field
-
-This field represents an encrypted AES key of this payload that is encrypted with the author's public key via ECDH.
-
-###### `authorEphemeralPublicKey` field
-
-This field is a Map of the compressed format of the EC key.
-
-> TODO: clarify "compressed" format
-
-The key indicates its format.
-
-The implementation MUST NOT fail when an unknown key appears.
-
-The implementation MUST ignore the invalid key for the given public key format.
-
-This field is used to support ephemeral encryption with different curves.
-
-#### `data` field
-
-This field represents the encrypted result of a [TypedMessage binary format](./typed-message.md).
-
-## References
-
-- secp256k1: <https://en.bitcoin.it/wiki/Secp256k1>
-- [MessagePack][msgpack-spec]
-
-[msgpack-spec]: https://github.com/msgpack/msgpack/blob/master/spec.md
-
-## Next step
-
-Once you parsed the `Payload37`, you should use the information in the payload to decrypt the message.
-
-Once the message is decrypted, you should parse the message by [the TypedMessage spec](./typed-message.md).
-
-## FAQ
-
-### Why the version number is negative?
-
-The pre 1.0 version of the Mask Network extension uses `-42` as its initial payload version. The number `42` comes from the book _The Hitchhiker's Guide to the Galaxy_ and the minus sign indicates this is an early version. When a new payload format is drafted, it's a natural idea that the version number should add by 1, therefore it should be `-41`. At the time of this spec written, the latest payload is version `-38`, therefore this spec follows the convention to mark the version as `-37`.
diff --git a/docs/payload-format/typed-message.md b/docs/payload-format/typed-message.md
deleted file mode 100644
index a50fc8a8bffd..000000000000
--- a/docs/payload-format/typed-message.md
+++ /dev/null
@@ -1,121 +0,0 @@
-# TypedMessage binary format
-
-<!-- markdownlint-disable no-duplicate-heading -->
-
-> Status: This format has not been shipped to production yet. It might change at any time.
-
-## Abstract
-
-This is a binary format that is used to represent a rich document (text, images, ...etc).
-
-## Encoding
-
-Following the [encoding convention of Payload37](./payload-v37.md#encoding).
-
-### `Document` type
-
-This is the top-most data type.
-
-```typescript
-type Document = [version: Integer, ...Any]
-```
-
-- When `version` is `0`:
-  - This is a `TypedMessageText`.
-  - It should be parsed in the following way:
-
-```typescript
-type Document = [version: 0, text: String, meta?: Map | Nil]
-```
-
-- When `version` is `1`:
-  - The rest of the fields are `TypedMessage`.
-  - It should be parsed in the following way:
-
-```typescript
-type Document = [version: 1, ...TypedMessage]
-
-function parse(doc: Array<any>) {
-  // drop the version field, and treat the rest as a TypedMessage
-  if (doc[0] === 1) return parseTypedMessage(doc.slice(1))
-}
-```
-
-### `TypedMessage`
-
-All `TypedMessage` must start with the following fields:
-
-```typescript
-type TypedMessageBase = [
-  type: TypedMessageTypeEnum | String,
-  version: Integer,
-  metadata: Map | Nil,
-  ...rest: Array<Any>,
-]
-enum TypedMessageTypeEnum {
-  Tuple = 0,
-  Text = 1,
-}
-```
-
-#### `type` field
-
-This field represents the type of this TypedMessage.
-
-It is a `TypedMessageTypeEnum` or a UTF-8 string.
-
-When it is `TypedMessageTypeEnum`, it represents a well-known TypedMessage defined in this specification.
-
-When it is a `String`, it represents a custom extension of TypedMessage.
-
-An implementation MAY ignore an unknown type or render a hint.
-
-#### `version`
-
-This field represents the version of this TypedMessage contains.
-
-#### `metadata`
-
-This field represents the metadata this TypedMessage contains.
-
-An implementation MUST NOT assume the data structure inside the metadata.
-
-### `TypedMessageText`
-
-```typescript
-type TypedMessageText = [
-  //
-  type: TypedMessageTypeEnum.Text,
-  metadata: Map | Nil,
-  content: String,
-  textFormat?: TextFormat,
-]
-enum TextFormat {
-  PlainText = 0,
-  Markdown = 1,
-}
-```
-
-#### `content` field
-
-This field represents a text message. The interpretation of content depends on the `textFormat` field.
-
-#### `textFormat` field
-
-This is an optional field that represents the interpretation of the `content` field.
-
-`PlainText` means it is plain text.
-
-`Markdown` means it is a Markdown. The Markdown flavor is not specified so the rendering effect might be different depending on the library.
-
-When decoding, the lack of content field should be treated as `TextFormat.PlainText`
-
-### `TypedMessageTuple`
-
-```typescript
-type TypedMessageTuple = [
-  type: TypedMessageTypeEnum.Tuple
-  metadata: Map | Nil,
-  items: Array<TypedMessageBase>,
-]
-```
diff --git a/docs/plugin-development-guide.md b/docs/plugin-development-guide.md
deleted file mode 100644
index 42c2ef8676cc..000000000000
--- a/docs/plugin-development-guide.md
+++ /dev/null
@@ -1,92 +0,0 @@
----
-author: Jack-Works
-maintainer:
-  - Jack-Works
-  - Septs
----
-
-# Plugin Development Guide
-
-## Run
-
-> npx gulp new-pkg
-
-To create a new plugin
-
-## Minimum File Structure
-
-The following folder is automatically created by the command above.
-
-```plaintext
-packages/mask/src/plugins/{your-plugin-name}
-├── README.md           # see `README driven development`
-├── index.ts            # Plugin registration
-├── base.ts             # Basic definition of a plugin
-├── constants.ts        # Constant definition, e.g: api end-point, etc
-├── types.ts            # Provide common typing definitions
-├── SNSAdaptor/index.ts # (Optional) Provide SNSAdaptor part of the plugin
-├── Dashboard/index.ts  # (Optional) Provide Dashboard part of the plugin
-├── Worker/index.ts     # (Optional) Provide Worker part of the plugin
-└── utils.ts            # Provide common utils function
-```
-
-## About `README.md` file
-
-see [README driven development](https://tom.preston-werner.com/2010/08/23/readme-driven-development.html)
-
-The file need to provide this information:
-
-- Feature-set as TODOs
-- Reference resource list
-- Known issues / Caveats
-
-## Plugin APIs
-
-- Plugin definition: `packages/plugin-infra/src/types.ts`
-- Database: `context.getDatabaseStorage()` (2nd parameter of the `init` method of your `Worker` definition). See example in `packages/plugins/example/src/Worker/index.ts`.
-- Message emitter: `createPluginMessage` exported from `@masknet/plugin-infra`
-- RPC: `createPluginRPC` exported from `@masknet/plugin-infra`
-- Metadata reader: `createTypedMessageMetadataReader` in `@masknet/shared-base`
-- React renderer with metadata reader: `createRenderWithMetadata` in `@masknet/shared-base`
-
-## Architecture
-
-The extension we talk about here is a bunch of code compiled and running in the Mask Network extension.
-This plugin system is for decoupling purposes.
-It doesn't allow load the new plugin dynamically without compiling the whole extension from the source code.
-If you're looking for a dynamic plugin system,
-you're probably looking for [External plugin][external-plugin] that still in the very early stage.
-
-[external-plugin]: https://github.com/DimensionDev/Maskbook/pull/2621
-
-### Plugin state
-
-- _Registered_, the default state. The plugin has been registered in the plug-in registry.
-- _Loaded_, the deferred definition of the plugin has been loaded.
-- _Activated_, the plugin is activated in the current context.
-
-State transition:
-
-- _Registered_ => _Loaded_
-- _Loaded_ => _Activated_ (enable/start the plugin)
-- _Activated_ => _Loaded_ (disable the plugin)
-
-## Metadata guide
-
-Metadata is JSON compatible data that's can be inserted into a post.
-
-The most common use case of the metadata is the following.
-
-Add a new entry in the composition dialogue, therefore,
-the user can interact with your plugin. When it's finished,
-you can insert your metadata into the post and it will be contained in the encrypted payload.
-When you see metadata in the post payload,
-you should render some UI to reveal the information in the metadata and allow the user to interact with it.
-
-Notice please treat the metadata you received as non trustable data,
-make sure you have validated the formats and the data range.
-We provided a utility to read the data from the post and validate it with JSON schema.
-
-## Form guide
-
-If you want to create a form in your plugin, please follow [Form guide](form-guide.md)
diff --git a/docs/plugin-development-quickstart.md b/docs/plugin-development-quickstart.md
deleted file mode 100644
index f547d25093ec..000000000000
--- a/docs/plugin-development-quickstart.md
+++ /dev/null
@@ -1,31 +0,0 @@
----
-author: Randolph
----
-
-# Quick start for Plugin Development
-
-## 1. Start a plugin file
-
-input following code to start a plugin file
-
-> npx gulp new-pkg
-
-...(a brief introduction about the files generated)
-
-## 2. How to inject ui
-
-1. change definitions in SNSAdaptor to add entry
-2. what is metadata and how to decode and encode metadata
-   if we want to inject ui in a post, we need metadata that contains related information
-3. write ui by our component
-
-## 3. How to interact with worker
-
-1. how to write Service to manage data
-2. a brief introduction about backend page
-
-## 4. How to interact with blockchain
-
-1. how to send a transaction
-2. how to get data stored in the blockchain
-3. a brief introduction about transaction process
diff --git a/docs/setup.md b/docs/setup.md
deleted file mode 100644
index 680a4b983d4f..000000000000
--- a/docs/setup.md
+++ /dev/null
@@ -1,104 +0,0 @@
-# Setup
-
-Hi, Welcome to the Mask Network. This guide will quickly take you through setting up the extension development environment.
-
-## Requirements
-
-Here is a snippet of engines requirements in the [`package.json`](../package.json) of Mask Network. As you can see, `NodeJS` and `pnpm` are required at least a specific version.
-
-We suggest you to use the latest Node.js version, and enable [corepack](https://nodejs.org/api/corepack.html).
-
-## Install
-
-### pnpm
-
-The [pnpm](https://pnpm.io/) is a disk space-efficient package manager. After NodeJS is preinstalled.
-
-If you have [corepack](https://nodejs.org/api/corepack.html) enabled, you can skip the `pnpm` section, `pnpm` is already available!
-
-If you want to setup pnpm manually, here is the [installation guide from pnpm](https://pnpm.io/installation).
-
-Now, you will need to have tools installed to start development.
-
-```bash
-pnpm install
-```
-
-> If you encounter with error `EACCES: permission denied, open...'`, please run `chown -R $USER /pathToYourProject/Mask` to solve.
-
-### Start the local development server
-
-For Chromium-based browsers (Chrome, Opera, Edge, etc.), please run `pnpm start`. It's preset of many development commands.
-
-If you need to develop in other environments (for example, Firefox), please run `npx dev --help` to see the documentation.
-
-### Load the extension into your browser
-
-Mask Network has a huge codebase, and it might take time to let the webpack fully startup. It outcomes the `dist/` folder, which contains the unpacked source files of a development version of the Mask Network extension.
-
-For Chrome,
-
-- Open `chrome://extensions` or `Settings -> Extensions`.
-- Turn on the `Developer mode` on the top right corner.
-- It will present a top toolbar with an action button `Load unpacked` on it. Click it and choose the `dist/` folder to load the unpacked version of the Mask Network extension. You can drag and drop the `dist` folder into this page.
-- If everything goes fine. Then, the Mask Network will guide you to the setup process.
-
-For Firefox, it's quite the same process.
-
-- Open `about:debugging#/runtime/this-firefox`
-- Click the `Load Temporary Add-on…` and select the `dist/` folder to load the unpacked extension.
-- If everything goes fine. The Mask Network will start to guide you to the setup process.
-
-## Debugging
-
-There is no difference between extension development and normal web development. In normal web development, you only have a single web page (SPA), but an extension could have more than one page.
-
-There is an invisible "background page" running all the time and an "options page" like a normal web page. Moreover, an extension could inject "content script" into the currently visiting web page.
-
-### Debug the background page
-
-The background page of the Mask Network extension maintains a bunch of fundamental services for front-end functions. Like Crypto Algorithm, Web3 SDKs, APIs to many third-party data providers, etc. They are stand-by all the time, once to be called for a specific task.
-
-To debug _background service_, click links right after **Inspect views**.
-
-![An image displaying Chrome extension manage page](https://user-images.githubusercontent.com/5390719/103509131-5ce0cb00-4e9d-11eb-9aec-b24b9888b863.png)
-
-### Debug the content script
-
-Mask Network only injects content script with permission from the user.
-
-For every new website that Mask Network is going to support, it will show a prompt dialog to ask permission dynamically, rather than asking for all permission when the plugin is installed.
-
-![An image displaying the Mask Network is asking the permission from the user](https://user-images.githubusercontent.com/52657989/158566232-30c52a17-0168-488c-a292-4fc4059ecb9c.png)
-
-To debug _content script_, open the dev tools in the web page, then you can select context as the following picture describes.
-
-![An image displaying how to select Mask Network as the debug context](https://user-images.githubusercontent.com/5390719/103509436-1a6bbe00-4e9e-11eb-9b18-bde021337944.png)
-
-It's important to select the correct context when you're debugging,
-otherwise, you cannot access all the global variables,
-_save as temp variables_ also fails.
-
-### Use React Devtools
-
-Run the following command to start the React Devtools. It doesn't work if you install it as a browser extension.
-
-> pnpx react-devtools
-
-And start the development by the following command:
-
-> pnpx dev --profile
-
-## Contribute your working
-
-### Git conversions
-
-The `develop` branch is our developing branch, and the `released` branch points to the latest released version.
-
-Your commit message should follow [Conventional Commits](https://www.conventionalcommits.org).
-
-### Using Git
-
-- [Using git rebase on the command line](https://docs.github.com/en/github/getting-started-with-github/using-git-rebase-on-the-command-line)
-- [Configuring a remote for a fork](https://docs.github.com/en/github/collaborating-with-issues-and-pull-requests/configuring-a-remote-for-a-fork)
-- [Syncing a fork](https://docs.github.com/en/github/collaborating-with-issues-and-pull-requests)
diff --git a/docs/toc.md b/docs/toc.md
deleted file mode 100644
index f7c90098a1f4..000000000000
--- a/docs/toc.md
+++ /dev/null
@@ -1,59 +0,0 @@
-# TOC
-
-## Quick Start
-
-## Setup
-
-[setup](./setup.md)
-
-## Concepts
-
-- Persona
-- Post Payload
-- Wallet
-- Dashboard
-- Pop up
-- SNS Provider
-- Wallet Provider
-- Plugin
-- Network (Network as Plugin)
-- ChainID
-
-## Guides
-
-- [Bounty Development Guide](./bounty-development-guide.md)
-- [Plugin Development Guide](./plugin-development-guide.md)
-- Website Integration Guide
-- Blockchain Integration Guide
-- [Wallet Integration Guide](./wallet-integration.md)
-- i18n
-- Form Guide
-
-## UI Components
-
-- shared
-- Mask Icons
-
-## Ecosystem
-
-- [MaskBox](https://box.mask.io/)
-- [MaskBridge](http://bridge.mask.io/)
-
-## Reference
-
-- TypedMessage
-- [Mask Flavored EVM JSON RPC methods](./mask-flavored-jsonrpc-api.md)
-- @mask/plugin-infra
-- @mask/web3-constants
-- @mask/web3-contracts
-- @mask/web3-shared
-- @mask/web3-providers
-
-## FAQ
-
-- Why there are two plugins folder in the codebase?
-- How to bypass the CSP constraint?
-- Help! My API server doesn’t return a CORS header.
-- How to read and clean my local settings?
-- How to fix cspell errors?
-- How to close react strict mode?
diff --git a/docs/wallet-integration.md b/docs/wallet-integration.md
deleted file mode 100644
index fafa581c988e..000000000000
--- a/docs/wallet-integration.md
+++ /dev/null
@@ -1,105 +0,0 @@
-# Wallet Integration
-
-Any wallet available in a browser environment can integrate into Mask Network. Well know wallets like [MetaMask](https://metamask.io/), [WalletConnect](https://docs.walletconnect.com/) and [Fortmatic](https://fortmatic.com/) have already been integrated. Besides that, Mask Network is also able to host accounts by itself.
-
-## Overview
-
-```txt
-   Front End Page                                 Background Page
-+------------------+                            +-----------------+
-|       User       | - Messaging API ---------- |  RPC Composer   |
-+------------------+                            +-----------------+
-                                                |                 |
-+------------------+                   +-----------------+   +-----------------+
-| Bridge Component | - Event Emitter-- |  Other Wallets  |   |   Mask Wallet   |
-+------------------+                   +-----------------+   +-----------------+
-         |                                                            |
-+------------------+                                                  |
-|    Wallet SDK    |                                                  |
-+------------------+                                                  |
-         |                                                            |
-         +------------------------- Network --------------------------+
-```
-
-Above is an architecture overview illustrating how Mask Network integrates multiple wallets simultaneously. Roughly speaking, it includes two parts: the bridge component on the front end, and the JSON-RPC composer on the background end. They communicate with each other by leveraging the [Messaging Passing API](https://developer.chrome.com/docs/extensions/mv3/messaging/).
-
-As a quick example to let you know how all stuff spins. Here is a UI button that will emit an `eth_getBlockNumber` request once it is clicked.
-
-```tsx
-import { useWeb3 } from '@masknet/web3-shared-evm'
-
-function Example() {
-  const web3 = useWeb3()
-  const onClick = useCallback(async () => {
-    const blockNumber = await web3.eth.getBlockNumber()
-    console.log(`The current block number is ${blockNumber}.`)
-  }, [web3])
-  return <button onClick={onClick}>Get Block Number</button>
-}
-```
-
-First of all, it creates a [Web3](https://web3js.readthedocs.io/) instance which redirects all JSON-RPC requests to the [request](https://github.com/DimensionDev/Maskbook/blob/develop/packages/mask/src/extension/background-script/EthereumServices/request.ts) service on the background page. If you'd like to read the source code, you will realise that there is a [Koa.js](https://koajs.com/) styled [composer](https://github.com/koajs/compose) built-in. A list of middleware is used and serve different purposes: a middleware stores transactions into DB, a middleware watches transaction status, a middleware notifies transaction progress, and so on.
-
-At the current stage, there are two kinds of wallets: Mask Wallet and other wallets.
-
-Mask Wallet sends requests to the network directly on the background page. If the request takes the response, then the user will get notified.
-
-But it's not that simple for other wallets. They are supported only on the front end. E.g., the [Fortmatic](https://docs.fortmatic.com/) SDK injects an iframe on the currently visiting page. Mask Network cannot invoke those SDKs on the background page as an extension. Because of that, they should take their requests to the front end and handle them there. Many mounted components, so-called `ProviderBridge`, listen to the `PROVIDER_RPC_REQUEST` event and call the corresponding SDK once they receive any request from the background. After the SKD finishes the work, they return the result to the bridged provider on the background page with the `PROVIDER_RPC_RESPONSE` event.
-
-It takes a quite long detour, but the benefit is all requests can leverage Mask Wallet abilities.
-
-## A Wallet on a bridged provider
-
-If the wallet that only works on the front end. It needs to use the bridged provider way.
-
-On the front end:
-
-- create a bridged provider by implementing the [`EIP1193Provider`](https://github.com/DimensionDev/Maskbook/blob/develop/packages/web3-shared/evm/types/index.ts) interface.
-- instantiate the bridged provider in [useBridgedProvider](https://github.com/DimensionDev/Maskbook/blob/develop/packages/mask/src/plugins/EVM/hooks/useBridgedProvider.ts) which was used by [`<ProviderBridge />`](https://github.com/DimensionDev/Maskbook/blob/develop/packages/mask/src/plugins/EVM/UI/components/ProviderBridge.tsx).
-- add a new `<ProviderBridge />` in the [EVM](https://github.com/DimensionDev/Maskbook/blob/develop/packages/mask/src/plugins/EVM/UI/SNSAdaptor/index.tsx) plugin to receive events from the background page.
-
-On the background page:
-
-- instantiate a [BridgedProvider](https://github.com/DimensionDev/Maskbook/blob/develop/packages/mask/src/extension/background-script/EthereumServices/providers/Bridged.ts) and add it into the supported list in [getProvider](https://github.com/DimensionDev/Maskbook/blob/develop/packages/mask/src/extension/background-script/EthereumServices/provider.ts).
-
-## A wallet without any UI
-
-If the wallet is totally UI free and can connect/disconnect by calling some APIs. It can send requests to those APIs directly.
-
-On the background page:
-
-- create a provider to extend from the [BaseProvider](https://github.com/DimensionDev/Maskbook/blob/develop/packages/mask/src/extension/background-script/EthereumServices/providers/MaskWallet.ts) interface and add it into the supported list in [getProvider](https://github.com/DimensionDev/Maskbook/blob/develop/packages/mask/src/extension/background-script/EthereumServices/provider.ts).
-
-## Interceptor
-
-The implementation of Ethereum JSON-RPC may very different between wallets. Those JSON-RPC requests will need some preprocessing before sending to the real wallet. Nevertheless, the Mask Network flavors a bunch of self-known RPC methods that were unknown to other wallets. Bypassing a such request will hit an unimplemented error.
-
-<!-- spell-checker: disable-next-line -->
-
-For this sake, the [`composer`](https://github.com/DimensionDev/Maskbook/blob/develop/packages/mask/src/extension/background-script/EthereumServices/composer.ts) creates a middleware for intercepting JSON-RPC requests. Here is a quick example that converts the Mask Network flavored [`mask_requestAccounts`](./mask-flavored-**jsonrpc**-api.md#mask_requestaccounts) into an Ethereum styled [`eth_accounts`](https://eth.wiki/json-rpc/API#eth_accounts).
-
-```ts
-export class Example implements Middleware<Context> {
-  async fn(context: Context, next: () => Promise<void>) {
-    switch (context.method) {
-      case EthereumMethodType.MASK_REQUEST_ACCOUNTS:
-        context.requestArguments = {
-          ...context.requestArguments,
-          method: EthereumMethodType.ETH_ACCOUNTS,
-        }
-        break
-      default:
-        break
-    }
-    await next()
-  }
-}
-```
-
-## Examples
-
-| Wallet        | Implementation |
-| ------------- | -------------- |
-| MetaMask      | \-             |
-| WalletConnect | \-             |
-| Fortmatic     | \-             |

From 2200750736d564e2b2972f4fa716990ddcaff8fe Mon Sep 17 00:00:00 2001
From: guanbinrui <52657989+guanbinrui@users.noreply.github.com>
Date: Sun, 29 May 2022 23:00:18 +0800
Subject: [PATCH 13/17] feat: EVM migration and Web3 Infra (#6371)

* refactor: migrate evm

Co-authored-by: guanbinrui <52657989+guanbinrui@users.noreply.github.com>
Co-authored-by: lelenei <72531217+lelenei@users.noreply.github.com>
Co-authored-by: Hancheng Zhou <z308114274@gmail.com>
Co-authored-by: UncleBill <billbill290@gmail.com>
Co-authored-by: Hom <yanzhihong23@qq.com>
Co-authored-by: BillyS <Billy@mask.io>
Co-authored-by: nuanyang233 <nuanyang233@gmail.com>
Co-authored-by: Randolph314 <97870249+Randolph314@users.noreply.github.com>
Co-authored-by: Lantt <laanfor@gmail.com>

* fix: eslint

* fix: type error

* chore: merge develop

* fix: build error

* fix: encode arrayBuffer

* fix: build error

* fix: build error

* fix: rollback @dimensiondev/kit to fix build error

* fix: build error

* fix: typo

* fix: build error

* fix: typo

* fix: unit test

* fix: lint errors

Co-authored-by: Jack Works <jackworks@protonmail.com>
Co-authored-by: lelenei <72531217+lelenei@users.noreply.github.com>
Co-authored-by: Hancheng Zhou <z308114274@gmail.com>
Co-authored-by: UncleBill <billbill290@gmail.com>
Co-authored-by: Hom <yanzhihong23@qq.com>
Co-authored-by: BillyS <Billy@mask.io>
Co-authored-by: nuanyang233 <nuanyang233@gmail.com>
Co-authored-by: Randolph314 <97870249+Randolph314@users.noreply.github.com>
Co-authored-by: Lantt <laanfor@gmail.com>
---
 .i18n-codegen.json                            |   11 +
 .prettierignore                               |    4 +
 cspell.json                                   |    3 +
 package.json                                  |    2 +-
 packages/dashboard/package.json               |    3 +
 .../components/DashboardFrame/Navigation.tsx  |    3 +-
 .../PageFrame/FeaturePromotions/index.tsx     |   19 +-
 packages/dashboard/src/hooks/useGasOptions.ts |   58 -
 .../src/initialization/Dashboard.tsx          |   53 +-
 .../src/initialization/PluginHost.ts          |   22 +-
 .../src/initialization/isolated_bridge.ts     |    4 +-
 .../components/CreateMnemonic/index.tsx       |    9 +-
 packages/dashboard/src/pages/Settings/api.ts  |    6 -
 .../Settings/components/DataSourceSetting.tsx |   21 -
 packages/dashboard/src/pages/Wallets/api.ts   |   12 -
 .../components/AddCollectibleDialog/index.tsx |   87 +-
 .../components/AddTokenConfirmUI/index.tsx    |    7 +-
 .../components/AddTokenFormUI/index.tsx       |    5 +-
 .../pages/Wallets/components/Assets/index.tsx |    7 +-
 .../Wallets/components/Balance/index.tsx      |   35 +-
 .../components/CollectibleCard/index.tsx      |   37 +-
 .../components/CollectibleList/index.tsx      |  106 +-
 .../CollectiblePlaceHolder/index.tsx          |    5 +-
 .../components/FungibleTokenTable/index.tsx   |  127 +-
 .../ChangeNetworkTip.tsx                      |    9 +-
 .../FungibleTokenTableRow/index.tsx           |   53 +-
 .../Wallets/components/History/index.tsx      |    4 +-
 .../Wallets/components/HistoryTable/index.tsx |   29 +-
 .../components/HistoryTableRow/index.tsx      |   45 +-
 .../components/ReceiveDialog/index.tsx        |  133 +-
 .../components/SelectTokenDialog/index.tsx    |    9 +-
 .../components/TransactionIcon/index.tsx      |    7 +-
 .../Wallets/components/Transfer/NFTCard.tsx   |    9 +-
 .../components/Transfer/SelectNFTList.tsx     |    5 +-
 .../components/Transfer/TransferERC20.tsx     |  102 +-
 .../components/Transfer/TransferERC721.tsx    |  194 +-
 .../Wallets/components/Transfer/index.tsx     |   14 +-
 .../Transfer/useNativeTokenPrice.ts           |   29 -
 .../components/WalletStateBar/index.tsx       |   49 +-
 .../WalletStateBar/useNetworkSelector.tsx     |   18 +-
 .../src/pages/Wallets/hooks/index.ts          |    2 -
 .../src/pages/Wallets/hooks/useAddressBook.ts |   13 -
 .../Wallets/hooks/useERC20TokensDetailed.ts   |   76 +-
 .../src/pages/Wallets/hooks/useGasConfig.ts   |   32 +-
 .../Wallets/hooks/useRecentTransactions.ts    |   21 -
 .../dashboard/src/pages/Wallets/index.tsx     |   52 +-
 .../pages/Wallets/utils/getTokenUSDValue.tsx  |    2 +-
 packages/dashboard/src/web3/context.ts        |  155 --
 .../components/Wallet/CollectibleCard.tsx     |   18 +-
 .../components/Wallet/ReceiveDialog.tsx       |    7 +-
 packages/dashboard/tsconfig.json              |    2 +
 .../main/GlobalVariableBridge/index.ts        |   31 +-
 packages/injected-script/main/communicate.ts  |   48 +-
 packages/injected-script/package.json         |    3 -
 packages/injected-script/sdk/Base.ts          |  101 +
 packages/injected-script/sdk/Coin98.ts        |   28 +
 packages/injected-script/sdk/MathWallet.ts    |   11 +
 packages/injected-script/sdk/MetaMask.ts      |   11 +
 packages/injected-script/sdk/Phantom.ts       |    7 +
 packages/injected-script/sdk/Solflare.ts      |   15 +
 packages/injected-script/sdk/WalletLink.ts    |   12 +
 packages/injected-script/sdk/bridgedCoin98.ts |   61 -
 .../injected-script/sdk/bridgedEthereum.ts    |   61 -
 packages/injected-script/sdk/bridgedSolana.ts |   97 -
 packages/injected-script/sdk/index.ts         |   59 +-
 packages/injected-script/sdk/tsconfig.json    |   12 +-
 packages/injected-script/shared/index.ts      |   47 +-
 .../background/services/crypto/decryption.ts  |    2 +-
 packages/mask/package.json                    |    5 +-
 .../TypedMessageRender/Components/Text.tsx    |    5 +-
 packages/mask/shared-ui/locales/en-US.json    |   52 +-
 packages/mask/shared-ui/locales/ja-JP.json    |   20 +
 packages/mask/shared-ui/locales/ko-KR.json    |   42 +
 packages/mask/shared-ui/locales/qya-AA.json   |   51 +-
 packages/mask/shared-ui/locales/zh-CN.json    |   46 +
 packages/mask/shared-ui/locales/zh-TW.json    |   35 +
 packages/mask/shared/flags.ts                 |    3 -
 packages/mask/src/UIRoot.tsx                  |   14 +-
 .../CompositionDialog/PluginEntryRender.tsx   |    3 +-
 .../InjectedComponents/ProfileTabContent.tsx  |    9 +-
 .../InjectedComponents/SearchResultBox.tsx    |    2 +-
 .../InjectedComponents/ToolboxUnstyled.tsx    |   25 +-
 .../components/shared/ApplicationBoard.tsx    |    4 +-
 .../mask/src/components/shared/NetworkTab.tsx |    4 +-
 .../shared/SelectWallet/WalletInList.tsx      |    3 +-
 .../mask/src/components/shared/TokenPrice.tsx |   17 +-
 .../shared/VerifyWallet/CurrentWalletBox.tsx  |   55 +-
 .../components/shared/VerifyWallet/Steps.tsx  |    8 +-
 .../WalletStatusBox/TransactionList.tsx       |   90 +-
 .../shared/WalletStatusBox/index.tsx          |   20 +-
 .../usePendingTransactions.tsx                |   27 +-
 packages/mask/src/env.d.ts                    |   11 -
 .../background-script/BackupService.ts        |   22 +-
 .../background-script/EthereumService.ts      |    5 -
 .../EthereumServices/network.ts               |  243 --
 .../EthereumServices/nonce.ts                 |  131 --
 .../EthereumServices/provider.ts              |  119 -
 .../providers/CustomNetwork.ts                |   12 -
 .../EthereumServices/providers/Fortmatic.ts   |   97 -
 .../EthereumServices/providers/Injected.ts    |  123 -
 .../EthereumServices/providers/MaskWallet.ts  |   89 -
 .../EthereumServices/providers/MetaMask.ts    |  112 -
 .../providers/WalletConnect.ts                |  119 -
 .../EthereumServices/request.ts               |  262 ---
 .../EthereumServices/rpc/abi.ts               |   66 -
 .../EthereumServices/rpc/index.ts             |  197 --
 .../EthereumServices/send.ts                  |  526 -----
 .../EthereumServices/web3.ts                  |   38 -
 .../Jobs/StartPluginWorker.ts                 |   19 +-
 .../background-script/SettingsService.ts      |   35 +-
 .../mask/src/extension/dashboard/index.tsx    |   38 +-
 .../DashboardComponents/ActionsBarNFT.tsx     |    8 +-
 .../CollectibleList/CollectibleCard.tsx       |   17 +-
 .../CollectibleList/CollectionIcon.tsx        |   14 +-
 .../CollectibleList/index.tsx                 |  517 +++--
 .../Wallet/HideTokenConfirm.tsx               |   64 +-
 .../DashboardDialogs/Wallet/TransferNFT.tsx   |   23 +-
 packages/mask/src/extension/popups/UI.tsx     |   50 +-
 .../components/NetworkSelector/index.tsx      |   40 +-
 .../components/WalletStateBar/index.tsx       |   11 +-
 .../pages/Personas/ConnectedWallets/UI.tsx    |    9 +-
 .../pages/Personas/ConnectedWallets/index.tsx |   10 +-
 .../pages/Personas/VerifyWallet/index.tsx     |   63 +-
 .../popups/pages/Swap/SwapBox/index.tsx       |    5 +-
 .../src/extension/popups/pages/Swap/index.tsx |   75 +-
 .../pages/Wallet/AddDeriveWallet/index.tsx    |   13 +-
 .../popups/pages/Wallet/AddToken/index.tsx    |   13 +-
 .../pages/Wallet/BackupWallet/index.tsx       |    2 +-
 .../pages/Wallet/ConnectWallet/index.tsx      |  111 +-
 .../Wallet/ContractInteraction/index.tsx      |  187 +-
 .../pages/Wallet/DeleteWallet/index.tsx       |   13 +-
 .../Wallet/GasSetting/GasSetting1559.tsx      |   98 +-
 .../Wallet/GasSetting/Prior1559GasSetting.tsx |   64 +-
 .../popups/pages/Wallet/GasSetting/index.tsx  |    8 +-
 .../popups/pages/Wallet/GasSetting/types.ts   |    6 +-
 .../pages/Wallet/GasSetting/useGasOptions.ts  |   45 -
 .../pages/Wallet/ImportWallet/index.tsx       |   38 +-
 .../Wallet/LegacyWalletRecovery/index.tsx     |    4 +-
 .../pages/Wallet/ReplaceTransaction/index.tsx |   80 +-
 .../pages/Wallet/SelectWallet/WalletItem.tsx  |   37 +-
 .../pages/Wallet/SelectWallet/index.tsx       |   86 +-
 .../popups/pages/Wallet/SignRequest/index.tsx |   36 +-
 .../pages/Wallet/SwitchWallet/WalletItem.tsx  |   62 +-
 .../pages/Wallet/SwitchWallet/index.tsx       |   44 +-
 .../popups/pages/Wallet/TokenDetail/index.tsx |   43 +-
 .../pages/Wallet/Transfer/AccountItem.tsx     |   11 +-
 .../Wallet/Transfer/Prior1559Transfer.tsx     |  105 +-
 .../pages/Wallet/Transfer/Transfer1559.tsx    |  146 +-
 .../popups/pages/Wallet/Transfer/index.tsx    |   16 +-
 .../pages/Wallet/WalletRecovery/index.tsx     |   14 +-
 .../pages/Wallet/WalletRename/index.tsx       |    5 +-
 .../pages/Wallet/WalletSettings/index.tsx     |   19 +-
 .../ActivityList/ActivityListItem.tsx         |   49 +-
 .../Wallet/components/ActivityList/index.tsx  |   76 +-
 .../Wallet/components/AssetsList/index.tsx    |   17 +-
 .../components/DeriveWalletTable/index.tsx    |    8 +-
 .../Wallet/components/WalletAssets/index.tsx  |    5 +-
 .../Wallet/components/WalletHeader/UI.tsx     |    8 +-
 .../Wallet/components/WalletHeader/index.tsx  |   32 +-
 .../Wallet/components/WalletInfo/index.tsx    |   16 +-
 .../Wallet/hooks/useSetWalletNameForm.ts      |    5 +-
 .../Wallet/hooks/useUnConfirmedRequest.ts     |   15 +-
 .../pages/Wallet/hooks/useWalletContext.ts    |   22 +-
 .../extension/popups/pages/Wallet/index.tsx   |   45 +-
 packages/mask/src/extension/popups/render.tsx |   28 +-
 packages/mask/src/extension/service.ts        |    2 -
 packages/mask/src/plugin-infra/host.ts        |   77 +-
 packages/mask/src/plugin-infra/register.js    |    5 +-
 .../ArtBlocks/SNSAdaptor/Collectible.tsx      |   21 +-
 .../ArtBlocks/SNSAdaptor/CollectionView.tsx   |    5 +-
 .../ArtBlocks/SNSAdaptor/DetailsView.tsx      |   17 +-
 .../ArtBlocks/SNSAdaptor/PurchaseDialog.tsx   |   43 +-
 .../ArtBlocks/hooks/useArtBlocksContract.ts   |   12 +-
 .../src/plugins/ArtBlocks/hooks/useProject.ts |    9 +-
 .../ArtBlocks/hooks/usePurchaseCallback.ts    |   14 +-
 .../src/plugins/ArtBlocks/hooks/useToken.ts   |    9 +-
 .../mask/src/plugins/ArtBlocks/pipes/index.ts |    3 +-
 .../Avatar/Application/NFTAvatarsDialog.tsx   |    2 +-
 .../plugins/Avatar/Application/NFTList.tsx    |    9 +-
 .../Avatar/Application/NFTListDialog.tsx      |   39 +-
 .../Avatar/Application/NFTListPage.tsx        |   42 +-
 .../Avatar/Application/UploadAvatarDialog.tsx |   14 +-
 .../Avatar/Application/WalletConnect.tsx      |   27 +-
 .../plugins/Avatar/Application/WalletList.tsx |   16 +-
 .../src/plugins/Avatar/SNSAdaptor/AddNFT.tsx  |   43 +-
 .../plugins/Avatar/SNSAdaptor/NFTAvatar.tsx   |   53 +-
 .../plugins/Avatar/SNSAdaptor/NFTImage.tsx    |   21 +-
 .../mask/src/plugins/Avatar/Services/bind.ts  |    4 +-
 .../mask/src/plugins/Avatar/Services/index.ts |    2 +-
 .../mask/src/plugins/Avatar/Services/rss3.ts  |    6 +-
 .../plugins/Avatar/hooks/useCheckAddress.ts   |    2 +-
 .../plugins/Avatar/hooks/useCollectibles.ts   |   21 +
 .../mask/src/plugins/Avatar/hooks/useNFT.ts   |   23 +-
 .../src/plugins/Avatar/hooks/useTokenOwner.ts |   31 +-
 .../src/plugins/Avatar/locales/en-US.json     |    2 +-
 packages/mask/src/plugins/Avatar/types.ts     |    6 +-
 .../mask/src/plugins/Avatar/utils/index.ts    |  106 +-
 .../Collectible/SNSAdaptor/Account.tsx        |    3 +-
 .../Collectible/SNSAdaptor/ArticleTab.tsx     |    8 +-
 .../Collectible/SNSAdaptor/Collectible.tsx    |   92 +-
 .../SNSAdaptor/CollectibleProviderIcon.tsx    |   15 +-
 .../Collectible/SNSAdaptor/HistoryTab/Row.tsx |   86 +-
 .../SNSAdaptor/HistoryTab/index.tsx           |   33 +-
 .../Collectible/SNSAdaptor/ListingTab.tsx     |   43 +-
 .../Collectible/SNSAdaptor/NFTPage.tsx        |   12 +-
 .../Collectible/SNSAdaptor/OfferTab.tsx       |   43 +-
 .../SNSAdaptor/{ => OpenSea}/ActionBar.tsx    |   44 +-
 .../{ => OpenSea}/CheckoutDialog.tsx          |   65 +-
 .../{ => OpenSea}/CheckoutOrder.tsx           |   50 +-
 .../{ => OpenSea}/ListingByHighestBidCard.tsx |   75 +-
 .../{ => OpenSea}/ListingByPriceCard.tsx      |   76 +-
 .../{ => OpenSea}/MakeOfferDialog.tsx         |  100 +-
 .../{ => OpenSea}/PostListingDialog.tsx       |   22 +-
 .../Collectible/SNSAdaptor/OrderRow.tsx       |   91 +-
 .../Collectible/SNSAdaptor/Pagination.tsx     |   56 -
 .../SNSAdaptor/SelectTokenListPanel.tsx       |   39 +-
 .../Collectible/SNSAdaptor/TokenTab.tsx       |   51 +-
 .../plugins/Collectible/SNSAdaptor/index.tsx  |   32 +-
 .../plugins/Collectible/SNSAdaptor/shared.tsx |   31 -
 .../src/plugins/Collectible/apis/index.ts     |    1 -
 .../Collectible/apis/openseaFromSDK.ts        |   42 -
 .../mask/src/plugins/Collectible/constants.ts |    3 +-
 .../Collectible/hooks/useAssetOrder.ts        |   60 +-
 .../Collectible/hooks/useCollectibleState.ts  |   68 +-
 .../plugins/Collectible/hooks/useOpenSea.ts   |   23 +
 .../src/plugins/Collectible/pipes/index.ts    |   95 +-
 .../plugins/Collectible/queries/OpenSea.ts    |  228 --
 .../mask/src/plugins/Collectible/services.ts  |    2 +-
 .../src/plugins/Collectible/types/index.ts    |    3 -
 .../src/plugins/Collectible/types/opensea.ts  |  248 --
 .../src/plugins/Collectible/types/rarible.ts  |  212 --
 .../CryptoartAI/SNSAdaptor/Account.tsx        |    5 +-
 .../CryptoartAI/SNSAdaptor/CheckoutDialog.tsx |   25 +-
 .../CryptoartAI/SNSAdaptor/Collectible.tsx    |   14 +-
 .../CryptoartAI/SNSAdaptor/HistoryTab/Row.tsx |    2 +-
 .../SNSAdaptor/HistoryTab/index.tsx           |    5 +-
 .../SNSAdaptor/MakeOfferDialog.tsx            |   41 +-
 .../CryptoartAI/SNSAdaptor/OfferTab.tsx       |    5 +-
 .../CryptoartAI/SNSAdaptor/OrderRow.tsx       |    2 +-
 .../CryptoartAI/SNSAdaptor/TokenTab.tsx       |   10 +-
 .../src/plugins/CryptoartAI/apis/index.ts     |    2 +-
 .../mask/src/plugins/CryptoartAI/constants.ts |   15 +-
 .../src/plugins/CryptoartAI/hooks/useAsset.ts |    9 +-
 .../hooks/useCryptoArtAI_Contract.ts          |   13 +-
 .../plugins/CryptoartAI/hooks/useEvents.ts    |    7 +-
 .../plugins/CryptoartAI/hooks/useOrders.ts    |    5 +-
 .../CryptoartAI/hooks/usePlaceBidCallback.ts  |   13 +-
 .../CryptoartAI/hooks/usePurchaseCallback.ts  |   13 +-
 .../src/plugins/EVM/UI/Dashboard/index.tsx    |   23 -
 .../src/plugins/EVM/UI/SNSAdaptor/index.tsx   |   26 -
 .../UI/Web3State/createGetLatestBalance.ts    |   10 -
 .../UI/Web3State/createNonFungibleToken.ts    |   27 -
 .../plugins/EVM/UI/Web3State/getAssetsFn.ts   |  239 --
 .../src/plugins/EVM/UI/Web3State/index.ts     |  158 --
 .../mask/src/plugins/EVM/UI/Web3UI/index.tsx  |   12 -
 .../UI/components/FortmaticProviderBridge.tsx |   83 -
 .../UI/components/InjectedProviderBridge.tsx  |   69 -
 .../UI/components/NetworkIconClickBait.tsx    |   72 -
 .../UI/components/ProviderIconClickBait.tsx   |  114 -
 packages/mask/src/plugins/EVM/base.ts         |   25 -
 packages/mask/src/plugins/EVM/constants.ts    |  246 --
 packages/mask/src/plugins/EVM/hooks/index.ts  |    8 -
 .../mask/src/plugins/EVM/hooks/useAsset.ts    |   41 -
 .../plugins/EVM/hooks/useBridgedProvider.ts   |   16 -
 .../mask/src/plugins/EVM/hooks/useHistory.ts  |   29 -
 .../EVM/hooks/useInjectedProviderReady.ts     |   10 -
 .../EVM/hooks/useInjectedProviderType.ts      |   31 -
 .../mask/src/plugins/EVM/hooks/useNetwork.ts  |    7 -
 .../mask/src/plugins/EVM/hooks/useOrders.ts   |   37 -
 .../mask/src/plugins/EVM/hooks/useProvider.ts |    7 -
 .../src/plugins/EVM/services/Asset/index.ts   |  132 --
 .../src/plugins/EVM/services/NFT/index.ts     |   92 -
 .../mask/src/plugins/EVM/services/index.ts    |    2 -
 .../mask/src/plugins/EVM/storage/index.ts     |   16 -
 packages/mask/src/plugins/EVM/types/index.ts  |    1 -
 packages/mask/src/plugins/EVM/utils/index.ts  |    1 -
 packages/mask/src/plugins/EVM/utils/token.ts  |   36 -
 .../components/ExternalPluginRenderer.tsx     |   11 +-
 .../External/components/PluginLoader.tsx      |    8 +-
 .../FindTruman/SNSAdaptor/FindTruman.tsx      |   17 +-
 .../FindTruman/SNSAdaptor/FtgPanel.tsx        |   13 +-
 .../FindTruman/SNSAdaptor/MainDialog.tsx      |    2 +-
 .../SNSAdaptor/ParticipatePanel.tsx           |    2 +-
 .../FindTruman/SNSAdaptor/PartsPanel.tsx      |    5 +-
 .../FindTruman/SNSAdaptor/PoapPanel.tsx       |    7 +-
 .../FindTruman/SNSAdaptor/PostInspector.tsx   |    5 +-
 .../plugins/FindTruman/Worker/apis/index.ts   |   10 +-
 packages/mask/src/plugins/FindTruman/base.ts  |   20 -
 .../plugins/Furucombo/UI/FurucomboView.tsx    |   19 +-
 .../src/plugins/Furucombo/UI/PoolView.tsx     |    7 +-
 .../Gitcoin/SNSAdaptor/DonateDialog.tsx       |   43 +-
 .../Gitcoin/SNSAdaptor/PreviewCard.tsx        |   24 +-
 .../src/plugins/Gitcoin/SNSAdaptor/index.tsx  |   24 +-
 packages/mask/src/plugins/Gitcoin/base.ts     |    9 -
 .../contracts/useBulkCheckoutWallet.ts        |   11 +-
 .../Gitcoin/hooks/useDonateCallback.ts        |   28 +-
 packages/mask/src/plugins/Gitcoin/types.tsx   |   16 +-
 .../plugins/GoodGhosting/SNSAdaptor/index.tsx |    7 +-
 .../plugins/GoodGhosting/UI/GameAction.tsx    |   17 +-
 .../GoodGhosting/UI/GameActionDialog.tsx      |   13 +-
 .../plugins/GoodGhosting/UI/GameStatsView.tsx |    3 +-
 .../plugins/GoodGhosting/UI/PersonalView.tsx  |   14 +-
 .../contracts/useGoodGhostingContract.ts      |    7 +-
 .../useGoodGhostingIncentivesContract.ts      |    6 +-
 .../GoodGhosting/hooks/useGameActions.ts      |   27 +-
 .../plugins/GoodGhosting/hooks/useGameInfo.ts |   14 +-
 .../GoodGhosting/hooks/useOtherPlayerInfo.ts  |    7 +-
 .../plugins/GoodGhosting/hooks/usePoolData.ts |   42 +-
 .../mask/src/plugins/GoodGhosting/types.tsx   |    7 +-
 .../mask/src/plugins/GoodGhosting/utils.ts    |   10 +-
 .../plugins/ITO/SNSAdaptor/ClaimAllDialog.tsx |  110 +-
 .../ITO/SNSAdaptor/CompositionDialog.tsx      |   17 +-
 .../plugins/ITO/SNSAdaptor/ConfirmDialog.tsx  |   23 +-
 .../src/plugins/ITO/SNSAdaptor/CreateForm.tsx |   33 +-
 .../ITO/SNSAdaptor/ExchangeTokenPanel.tsx     |   10 +-
 .../SNSAdaptor/ExchangeTokenPanelGroup.tsx    |    7 +-
 .../mask/src/plugins/ITO/SNSAdaptor/ITO.tsx   |   56 +-
 .../src/plugins/ITO/SNSAdaptor/ITO_Card.tsx   |    7 +-
 .../plugins/ITO/SNSAdaptor/NftAirdropCard.tsx |  372 ---
 .../src/plugins/ITO/SNSAdaptor/PoolInList.tsx |   43 +-
 .../src/plugins/ITO/SNSAdaptor/PoolList.tsx   |    7 +-
 .../plugins/ITO/SNSAdaptor/PostInspector.tsx  |   50 +-
 .../plugins/ITO/SNSAdaptor/RemindDialog.tsx   |   28 +-
 .../ITO/SNSAdaptor/SelectTokenAmountPanel.tsx |   22 +-
 .../plugins/ITO/SNSAdaptor/ShareDialog.tsx    |    6 +-
 .../src/plugins/ITO/SNSAdaptor/SwapDialog.tsx |   60 +-
 .../src/plugins/ITO/SNSAdaptor/SwapGuide.tsx  |   11 +-
 .../plugins/ITO/SNSAdaptor/UnlockDialog.tsx   |   32 +-
 .../SNSAdaptor/hooks/useAllPoolsAsSeller.ts   |   60 +-
 .../ITO/SNSAdaptor/hooks/useAvailability.ts   |   25 +-
 .../hooks/useAvailabilityComputed.ts          |   16 +-
 .../ITO/SNSAdaptor/hooks/useClaimAll.ts       |   15 +-
 .../ITO/SNSAdaptor/hooks/useClaimCallback.ts  |   21 +-
 .../SNSAdaptor/hooks/useDestructCallback.ts   |    9 +-
 .../hooks/useExchangeTokenAmountstate.ts      |    9 +-
 .../plugins/ITO/SNSAdaptor/hooks/useFill.ts   |   46 +-
 .../ITO/SNSAdaptor/hooks/useITO_Contract.ts   |   12 +-
 .../ITO/SNSAdaptor/hooks/useIfQualified.ts    |    9 +-
 .../SNSAdaptor/hooks/useMaskClaimCallback.ts  |   12 +-
 .../SNSAdaptor/hooks/useMaskITO_Contract.ts   |    9 +-
 .../ITO/SNSAdaptor/hooks/useMaskITO_Packet.ts |    8 +-
 .../ITO/SNSAdaptor/hooks/usePoolPayload.ts    |    7 +-
 .../ITO/SNSAdaptor/hooks/usePoolTradeInfo.ts  |    7 +-
 .../ITO/SNSAdaptor/hooks/useQualification.ts  |    8 +-
 .../hooks/useQualificationContract.ts         |   10 +-
 .../hooks/useQualificationVerify.ts           |   11 +-
 .../hooks/useSpaceStationCampaignInfo.ts      |   21 -
 .../hooks/useSpaceStationClaimable.ts         |   12 -
 ...SpaceStationClaimableTokenCountCallback.ts |   29 -
 .../hooks/useSpaceStationContract.ts          |    9 -
 .../useSpaceStationContractClaimCallback.ts   |   71 -
 .../ITO/SNSAdaptor/hooks/useSwapCallback.ts   |   48 +-
 .../mask/src/plugins/ITO/SNSAdaptor/index.tsx |   16 +-
 .../apis => SNSAdaptor/utils}/chain.ts        |   51 +-
 .../utils}/checkAvailability.ts               |   14 +-
 .../ITO/Worker/apis/spaceStationGalaxy.ts     |  185 --
 .../src/plugins/ITO/Worker/apis/subgraph.ts   |   31 +-
 .../mask/src/plugins/ITO/Worker/services.ts   |   52 +-
 packages/mask/src/plugins/ITO/base.ts         |   19 -
 packages/mask/src/plugins/ITO/types.ts        |   15 +-
 .../SNSAdaptor/components/DrawDialog.tsx      |   27 +-
 .../components/DrawResultDialog.tsx           |    5 +-
 .../SNSAdaptor/components/PreviewCard.tsx     |   25 +-
 .../SNSAdaptor/components/TokenCard.tsx       |   12 +-
 .../src/plugins/MaskBox/SNSAdaptor/index.tsx  |    3 +-
 .../src/plugins/MaskBox/hooks/useContext.ts   |   86 +-
 .../MaskBox/hooks/useMaskBoxContract.ts       |    7 +-
 .../hooks/useMaskBoxCreationSuccessEvent.ts   |    9 +-
 .../plugins/MaskBox/hooks/useMaskBoxInfo.ts   |    5 +-
 .../MaskBox/hooks/useMaskBoxMetadata.ts       |    4 +-
 .../hooks/useMaskBoxPurchasedTokens.ts        |    8 +-
 .../hooks/useMaskBoxQualificationContract.ts  |    7 +-
 .../plugins/MaskBox/hooks/useMaskBoxStatus.ts |    5 +-
 .../MaskBox/hooks/useMaskBoxTokensForSale.ts  |    5 +-
 .../plugins/MaskBox/hooks/useMerkleProof.ts   |    5 +-
 .../MaskBox/hooks/useOpenBoxGasLimit.ts       |    5 +-
 .../MaskBox/hooks/useOpenBoxTransaction.ts    |   14 +-
 .../plugins/MaskBox/hooks/useQualification.ts |    5 +-
 packages/mask/src/plugins/MaskBox/type.ts     |    5 +-
 packages/mask/src/plugins/NextID/base.ts      |    2 +-
 .../plugins/NextID/components/BindDialog.tsx  |    4 +-
 .../plugins/NextID/components/BindPanelUI.tsx |    3 +-
 .../plugins/NextID/components/BindingItem.tsx |   10 +-
 .../plugins/NextID/components/NextIdPage.tsx  |   14 +-
 .../NextID/components/UnbindConfirm.tsx       |    4 +-
 .../NextID/components/UnbindDialog.tsx        |    5 +-
 .../NextID/components/UnbindPanelUI.tsx       |    3 +-
 .../src/plugins/NextID/hooks/useWalletSign.ts |    4 +-
 .../src/plugins/Pets/SNSAdaptor/PetDialog.tsx |    2 +-
 .../plugins/Pets/SNSAdaptor/PetSetDialog.tsx  |   31 +-
 .../mask/src/plugins/Pets/Services/index.ts   |    5 +-
 .../mask/src/plugins/Pets/Services/rss3.ts    |   10 +-
 packages/mask/src/plugins/Pets/base.tsx       |    2 +-
 .../mask/src/plugins/Pets/hooks/useNfts.ts    |   53 +-
 .../mask/src/plugins/Pets/hooks/useUser.ts    |    7 +-
 packages/mask/src/plugins/Pets/types.ts       |    6 +-
 .../src/plugins/PoolTogether/UI/Account.tsx   |    2 +-
 .../plugins/PoolTogether/UI/AccountPool.tsx   |    5 +-
 .../plugins/PoolTogether/UI/DepositDialog.tsx |   25 +-
 .../plugins/PoolTogether/UI/NetworkView.tsx   |   16 +-
 .../PoolTogether/UI/PoolTogetherView.tsx      |   10 +-
 .../src/plugins/PoolTogether/UI/PoolView.tsx  |   10 +-
 .../src/plugins/PoolTogether/apis/index.ts    |    3 +-
 .../contracts/usePoolTogetherPool.ts          |    7 +-
 .../contracts/usePoolTogetherTicket.ts        |    7 +-
 .../PoolTogether/hooks/useAccountBalances.ts  |   15 +-
 .../PoolTogether/hooks/useDepositCallback.ts  |   14 +-
 .../plugins/PoolTogether/hooks/usePoolURL.ts  |    8 +-
 .../plugins/PoolTogether/hooks/usePools.ts    |   11 +-
 .../mask/src/plugins/PoolTogether/messages.ts |    5 +-
 .../Profile/SNSAdaptor/WalletsPage.tsx        |  128 --
 .../src/plugins/Profile/SNSAdaptor/index.ts   |    9 -
 .../mask/src/plugins/Profile/Worker/index.ts  |    9 -
 packages/mask/src/plugins/Profile/base.ts     |   16 -
 .../mask/src/plugins/Profile/constants.ts     |    5 -
 packages/mask/src/plugins/Profile/index.ts    |   16 -
 packages/mask/src/plugins/Profile/messages.ts |    9 -
 packages/mask/src/plugins/Profile/services.ts |   14 -
 packages/mask/src/plugins/Profile/types.ts    |    7 -
 .../plugins/RedPacket/SNSAdaptor/NftList.tsx  |   15 +-
 .../SNSAdaptor/NftRedPacketHistoryItem.tsx    |   22 +-
 .../SNSAdaptor/NftRedPacketHistoryList.tsx    |   10 +-
 .../SNSAdaptor/RedPacket/OperationFooter.tsx  |   27 +-
 .../RedPacket/SNSAdaptor/RedPacket/index.tsx  |   41 +-
 .../SNSAdaptor/RedPacketConfirmDialog.tsx     |   43 +-
 .../SNSAdaptor/RedPacketCreateNew.tsx         |    6 +-
 .../RedPacket/SNSAdaptor/RedPacketDialog.tsx  |   23 +-
 .../SNSAdaptor/RedPacketERC20Form.tsx         |   53 +-
 .../SNSAdaptor/RedPacketERC721Form.tsx        |   51 +-
 .../SNSAdaptor/RedPacketHistoryList.tsx       |   14 +-
 .../SNSAdaptor/RedPacketInHistoryList.tsx     |   49 +-
 .../RedPacket/SNSAdaptor/RedPacketInPost.tsx  |    9 +-
 .../RedPacket/SNSAdaptor/RedPacketNft.tsx     |   62 +-
 .../RedPacket/SNSAdaptor/RedPacketPast.tsx    |   11 +-
 .../SNSAdaptor/RedpacketNftConfirmDialog.tsx  |   53 +-
 .../SNSAdaptor/SelectNftTokenDialog.tsx       |   52 +-
 .../SNSAdaptor/hooks/useAvailability.ts       |   24 +-
 .../hooks/useAvailabilityComputed.ts          |   25 +-
 .../SNSAdaptor/hooks/useClaimCallback.ts      |   13 +-
 .../hooks/useClaimNftRedpacketCallback.ts     |   17 +-
 .../SNSAdaptor/hooks/useCreateCallback.tsx    |   47 +-
 .../hooks/useCreateNftRedpacketCallback.ts    |   17 +-
 .../hooks/useNftAvailabilityComputed.ts       |    8 +-
 .../hooks/useNftRedPacketContract.ts          |    8 +-
 .../SNSAdaptor/hooks/useRedPacketContract.ts  |   13 +-
 .../SNSAdaptor/hooks/useRedPacketHistory.ts   |   35 +-
 .../SNSAdaptor/hooks/useRefundCallback.ts     |    9 +-
 .../plugins/RedPacket/SNSAdaptor/index.tsx    |   24 +-
 .../apis => SNSAdaptor/utils}/chain.ts        |   23 +-
 .../utils}/checkAvailability.ts               |   13 +-
 .../RedPacket/Worker/apis/erc20Redpacket.ts   |   52 +-
 .../RedPacket/Worker/apis/nftRedpacket.ts     |   28 +-
 .../src/plugins/RedPacket/Worker/services.ts  |   22 +-
 packages/mask/src/plugins/RedPacket/base.ts   |    2 +-
 packages/mask/src/plugins/RedPacket/types.ts  |   39 +-
 .../Savings/SNSAdaptor/SavingsDialog.tsx      |   33 +-
 .../Savings/SNSAdaptor/SavingsForm.tsx        |  104 +-
 .../Savings/SNSAdaptor/SavingsTable.tsx       |   25 +-
 packages/mask/src/plugins/Savings/base.ts     |    2 +-
 .../mask/src/plugins/Savings/constants.ts     |    7 +-
 .../plugins/Savings/protocols/AAVEProtocol.ts |   12 +-
 .../plugins/Savings/protocols/LDOProtocol.ts  |    6 +-
 packages/mask/src/plugins/Savings/types.ts    |    9 +-
 .../Snapshot/SNSAdaptor/InformationCard.tsx   |   18 +-
 .../plugins/Snapshot/SNSAdaptor/Snapshot.tsx  |   13 +-
 .../src/plugins/Snapshot/SNSAdaptor/Vote.tsx  |    2 +-
 .../Snapshot/SNSAdaptor/VoteConfirmDialog.tsx |   10 +-
 .../plugins/Snapshot/SNSAdaptor/VotesCard.tsx |   14 +-
 .../Snapshot/SNSAdaptor/VotingCard.tsx        |   54 +-
 .../Snapshot/SNSAdaptor/hooks/usePower.ts     |    5 +-
 .../src/plugins/Snapshot/Worker/apis/index.ts |   72 +-
 .../mask/src/plugins/Snapshot/constants.ts    |    4 +
 packages/mask/src/plugins/Snapshot/utils.ts   |   28 +
 .../Tips/SNSAdaptor/TipsEntranceDialog.tsx    |   10 +-
 .../Tips/SNSAdaptor/bodyViews/AddWallet.tsx   |   89 +-
 .../Tips/SNSAdaptor/bodyViews/Setting.tsx     |    2 +-
 .../Tips/SNSAdaptor/components/WalletItem.tsx |   21 +-
 .../SNSAdaptor/components/WalletSwitch.tsx    |   27 +-
 .../components/WalletsByNetwork.tsx           |    2 +-
 .../src/plugins/Tips/SNSAdaptor/index.tsx     |    2 +-
 .../src/plugins/Tips/components/AddDialog.tsx |   41 +-
 .../Tips/components/NFTSection/NFTList.tsx    |   32 +-
 .../Tips/components/NFTSection/index.tsx      |   37 +-
 .../src/plugins/Tips/components/TipDialog.tsx |   36 +-
 .../src/plugins/Tips/components/TipForm.tsx   |   23 +-
 .../Tips/components/TokenSection/index.tsx    |   22 +-
 .../Tips/contexts/TargetChainIdContext.ts     |    6 +-
 .../plugins/Tips/contexts/Tip/TipContext.ts   |   12 +-
 .../Tips/contexts/Tip/TipTaskProvider.tsx     |   14 +-
 .../plugins/Tips/contexts/Tip/useNftTip.ts    |   36 +-
 .../Tips/contexts/Tip/useTipValidate.ts       |    6 +-
 .../plugins/Tips/contexts/Tip/useTokenTip.ts  |   16 +-
 .../Tips/hooks/useSupportedNetworks.ts        |    3 +-
 .../plugins/Tips/hooks/useTipsWalletsList.ts  |    2 +-
 .../mask/src/plugins/Tips/storage/index.ts    |   10 +-
 .../src/plugins/Trader/Dashboard/index.tsx    |    3 +-
 .../mask/src/plugins/Trader/LBP/useLBP.ts     |   22 -
 .../plugins/Trader/LBP/usePoolTokenPrices.ts  |    9 -
 .../src/plugins/Trader/LBP/usePoolTokens.ts   |    9 -
 .../mask/src/plugins/Trader/LBP/usePools.ts   |    9 -
 .../src/plugins/Trader/SNSAdaptor/cashTag.tsx |    9 +-
 .../src/plugins/Trader/SNSAdaptor/index.tsx   |   21 +-
 .../SNSAdaptor/trader/ConfirmDialog.tsx       |   30 +-
 .../SNSAdaptor/trader/Gas1559Settings.tsx     |   33 +-
 .../trader/GasPrior1559Settings.tsx           |   41 +-
 .../SNSAdaptor/trader/InputTokenPanel.tsx     |   12 +-
 .../SNSAdaptor/trader/SettingsDialog.tsx      |    8 +-
 .../Trader/SNSAdaptor/trader/TradeForm.tsx    |   30 +-
 .../Trader/SNSAdaptor/trader/TradeView.tsx    |    3 +-
 .../Trader/SNSAdaptor/trader/Trader.tsx       |   48 +-
 .../Trader/SNSAdaptor/trader/TraderDialog.tsx |    9 +-
 .../Trader/SNSAdaptor/trader/TraderInfo.tsx   |   14 +-
 .../SNSAdaptor/trader/hooks/useGasConfig.ts   |   44 +-
 .../trader/hooks/useSortedTrades.ts           |   20 +-
 .../trader/hooks/useUpdateBalance.ts          |   21 +-
 .../SNSAdaptor/trending/CoinMarketTable.tsx   |    2 +-
 .../SNSAdaptor/trending/CoinSafetyAlert.tsx   |    8 +-
 .../Trader/SNSAdaptor/trending/LBPPanel.tsx   |  142 --
 .../SNSAdaptor/trending/LBPPriceChart.tsx     |   70 -
 .../SNSAdaptor/trending/TickersTable.tsx      |    3 +-
 .../Trader/SNSAdaptor/trending/TraderView.tsx |   52 +-
 .../SNSAdaptor/trending/TrendingPopper.tsx    |    8 +-
 .../SNSAdaptor/trending/TrendingViewDeck.tsx  |   10 +-
 .../mask/src/plugins/Trader/apis/LBP/LBP.json |   12 -
 .../mask/src/plugins/Trader/apis/LBP/index.ts |  105 -
 .../src/plugins/Trader/apis/balancer/index.ts |   69 +-
 .../apis/bancor/calculateMinimumReturn.ts     |    6 +-
 .../src/plugins/Trader/apis/blocks/index.ts   |   34 +-
 .../mask/src/plugins/Trader/apis/index.ts     |    1 -
 .../src/plugins/Trader/apis/trader/index.ts   |    4 +-
 .../plugins/Trader/apis/trending/hotfix.ts    |   73 +-
 .../src/plugins/Trader/apis/trending/index.ts |   81 +-
 .../Trader/apis/uniswap-health/index.ts       |   16 +-
 .../Trader/apis/uniswap-v2-subgraph/index.ts  |   81 +-
 .../src/plugins/Trader/apis/uniswap/index.ts  |   50 +-
 packages/mask/src/plugins/Trader/base.ts      |    4 +-
 .../src/plugins/Trader/constants/types.ts     |    7 +-
 .../balancer/useExchangeProxyContract.ts      |    5 +-
 .../contracts/uniswap/usePairContract.ts      |   11 +-
 .../contracts/uniswap/usePoolContract.ts      |   11 +-
 .../contracts/uniswap/useQuoterContract.ts    |    5 +-
 .../contracts/uniswap/useRouterV2Contract.ts  |    7 +-
 .../uniswap/useSwapRouterContract.ts          |    7 +-
 .../src/plugins/Trader/helpers/uniswap.ts     |   38 +-
 packages/mask/src/plugins/Trader/index.ts     |    3 +-
 packages/mask/src/plugins/Trader/pipes.ts     |    2 +-
 packages/mask/src/plugins/Trader/settings.ts  |    8 -
 .../mask/src/plugins/Trader/storage/index.ts  |   28 +
 .../src/plugins/Trader/trader/0x/useTrade.ts  |   90 +-
 .../Trader/trader/0x/useTradeCallback.ts      |   15 +-
 .../Trader/trader/0x/useTradeComputed.ts      |    8 +-
 .../Trader/trader/0x/useTradeGasLimit.ts      |    9 +-
 .../Trader/trader/balancer/useTrade.ts        |   57 +-
 .../trader/balancer/useTradeCallback.ts       |   20 +-
 .../trader/balancer/useTradeComputed.ts       |    8 +-
 .../trader/balancer/useTradeGasLimit.ts       |   14 +-
 .../plugins/Trader/trader/bancor/useTrade.ts  |   77 +-
 .../Trader/trader/bancor/useTradeCallback.ts  |   12 +-
 .../Trader/trader/bancor/useTradeComputed.ts  |    9 +-
 .../Trader/trader/bancor/useTradeGasLimit.ts  |    9 +-
 .../trader/blocks/useLatestBlockNumber.ts     |    5 +-
 .../plugins/Trader/trader/dodo/useTrade.ts    |   81 +-
 .../Trader/trader/dodo/useTradeCallback.ts    |   10 +-
 .../Trader/trader/dodo/useTradeComputed.ts    |    8 +-
 .../Trader/trader/dodo/useTradeGasLimit.ts    |   15 +-
 .../plugins/Trader/trader/native/useTrade.ts  |   10 +-
 .../Trader/trader/native/useTradeCallback.ts  |    7 +-
 .../Trader/trader/native/useTradeComputed.ts  |   12 +-
 .../Trader/trader/openocean/useTrade.ts       |   83 +-
 .../trader/openocean/useTradeCallback.ts      |   12 +-
 .../trader/openocean/useTradeComputed.ts      |    8 +-
 .../trader/openocean/useTradeGasLimit.ts      |   17 +-
 .../trader/uniswap/useAllCommonPairs.ts       |    4 +-
 .../plugins/Trader/trader/uniswap/usePairs.ts |    4 +-
 .../plugins/Trader/trader/uniswap/usePools.ts |    4 +-
 .../plugins/Trader/trader/uniswap/useTrade.ts |   16 +-
 .../Trader/trader/uniswap/useTradeCallback.ts |   16 +-
 .../Trader/trader/uniswap/useTradeComputed.ts |    8 +-
 .../Trader/trader/uniswap/useTradeGasLimit.ts |    9 +-
 .../trader/uniswap/useTradeParameters.ts      |    9 +-
 .../trader/uniswap/useTransactionDeadline.ts  |    6 +-
 .../Trader/trader/uniswap/useUniswapV2Like.ts |    9 +-
 .../Trader/trader/uniswap/useV3BestTrade.ts   |    2 +-
 .../trader/useAllProviderTradeContext.ts      |   11 +-
 .../Trader/trader/useAllTradeComputed.ts      |    8 +-
 .../Trader/trader/useNativeTradeGasLimit.ts   |   11 +-
 .../Trader/trader/useTargetBlockNumber.ts     |   12 +-
 .../Trader/trader/useTargetChainIdContext.ts  |    6 +-
 .../Trader/trader/useTradeApproveComputed.ts  |   10 +-
 .../Trader/trending/useAvailableCoins.ts      |    8 +-
 .../trending/useAvailableDataProviders.ts     |    7 +-
 .../trending/useAvailableTraderProviders.ts   |    6 +-
 .../Trader/trending/useCurrentDataProvider.ts |    7 +-
 .../plugins/Trader/trending/usePriceStats.ts  |    5 +-
 .../plugins/Trader/trending/useTrending.ts    |   15 +-
 .../mask/src/plugins/Trader/types/bancor.ts   |    7 +-
 .../mask/src/plugins/Trader/types/dodo.ts     |    7 +-
 .../src/plugins/Trader/types/openocean.ts     |    7 +-
 .../mask/src/plugins/Trader/types/trader.ts   |   27 +-
 .../Transak/hooks/useTransakAllowanceCoin.ts  |    7 +-
 .../SNSAdaptor/UnlockProtocolDialog.tsx       |    9 +-
 .../SNSAdaptor/UnlockProtocolInPost.tsx       |   25 +-
 .../mask/src/plugins/UnlockProtocol/base.ts   |    2 +-
 .../plugins/UnlockProtocol/utils/crypto.ts    |    6 +-
 .../src/plugins/Wallet/Dashboard/index.tsx    |   10 +-
 .../ConnectionProgress.tsx                    |   36 +-
 .../SNSAdaptor/ConnectWalletDialog/index.tsx  |  211 +-
 .../GasSettingDialog/GasSetting.tsx           |    8 +-
 .../GasSettingDialog/GasSetting1559.tsx       |  167 +-
 .../GasSettingDialog/GasSettingBar.tsx        |   28 +-
 .../GasSettingDialog/Prior1559GasSetting.tsx  |  119 +-
 .../SNSAdaptor/GasSettingDialog/index.tsx     |   10 +-
 .../SNSAdaptor/GasSettingDialog/types.ts      |    8 +-
 .../Wallet/SNSAdaptor/RenameWalletDialog.tsx  |   78 -
 .../RestoreLegacyWalletDialog/index.tsx       |   69 -
 .../SNSAdaptor/RiskWarningDialog/index.tsx    |   40 +-
 .../SNSAdaptor/SelectNftContractDialog.tsx    |  126 +-
 .../PluginProviderRender.tsx                  |   96 +-
 .../SNSAdaptor/SelectProviderDialog/index.tsx |   88 +-
 .../Wallet/SNSAdaptor/SelectWalletDialog.tsx  |   83 -
 .../Wallet/SNSAdaptor/TransactionDialog.tsx   |   23 +-
 .../SNSAdaptor/TransactionSnackbar/index.tsx  |  132 +-
 .../FirefoxPlatform.tsx                       |   11 -
 .../WalletConnectQRCodeDialog/Icons.tsx       |  181 --
 .../WalletConnectQRCodeDialog/QRCodeModel.tsx |   36 -
 .../WalletConnectQRCodeDialog/README.md       |   21 -
 .../SafariPlatform.tsx                        |   53 -
 .../WalletConnectQRCodeDialog/index.tsx       |  106 -
 .../TransactionDescription.tsx                |  167 --
 .../getITO_Description.tsx                    |   47 -
 .../getNFTRedpacketDescription.tsx            |   20 -
 .../getRedpacketDescription.tsx               |   60 -
 .../contractMethodDescription/index.ts        |   13 -
 .../SNSAdaptor/WalletStatusDialog/index.tsx   |    9 +-
 .../SNSAdaptor/WalletStatusDialog/type.ts     |    7 -
 .../src/plugins/Wallet/SNSAdaptor/index.tsx   |    8 -
 .../mask/src/plugins/Wallet/apis/debank.ts    |   59 -
 packages/mask/src/plugins/Wallet/apis/ens.ts  |   39 -
 .../mask/src/plugins/Wallet/apis/metaswap.ts  |   13 -
 .../mask/src/plugins/Wallet/apis/nftscan.ts   |   75 -
 .../mask/src/plugins/Wallet/apis/opensea.ts   |  161 --
 .../mask/src/plugins/Wallet/apis/zerion.ts    |   87 -
 packages/mask/src/plugins/Wallet/constants.ts |    7 +-
 .../src/plugins/Wallet/database/Plugin.db.ts  |   20 +-
 .../src/plugins/Wallet/database/Wallet.db.ts  |   37 +-
 .../mask/src/plugins/Wallet/database/types.ts |   61 -
 packages/mask/src/plugins/Wallet/helpers.ts   |   37 +-
 .../mask/src/plugins/Wallet/hooks/index.ts    |    5 -
 .../hooks/useClearRecentTransactions.ts       |   13 -
 .../Wallet/hooks/useRecentTransactions.ts     |   24 -
 .../hooks/useRemoveRecentTransaction.ts       |   16 -
 .../src/plugins/Wallet/hooks/useTokenPrice.ts |   67 -
 .../hooks/useWalletRiskWarningDialog.ts       |   23 -
 .../mask/src/plugins/Wallet/pipes/index.ts    |   35 +-
 .../src/plugins/Wallet/services/account.ts    |  104 +-
 .../plugins/Wallet/services/addressBook.ts    |   62 -
 .../src/plugins/Wallet/services/assets.ts     |  207 --
 .../mask/src/plugins/Wallet/services/cloud.ts |   36 -
 .../src/plugins/Wallet/services/domain.ts     |  103 -
 .../src/plugins/Wallet/services/erc1155.ts    |   25 -
 .../mask/src/plugins/Wallet/services/erc20.ts |   79 -
 .../src/plugins/Wallet/services/erc721.ts     |   60 -
 .../plugins/Wallet/services/estimateGasFee.ts |    6 -
 .../src/plugins/Wallet/services/gasPrice.ts   |    6 -
 .../src/plugins/Wallet/services/helpers.ts    |   81 +-
 .../mask/src/plugins/Wallet/services/index.ts |   11 +-
 .../plugins/Wallet/services/legacyWallet.ts   |   47 +-
 .../src/plugins/Wallet/services/nftscan.ts    |    5 -
 .../mask/src/plugins/Wallet/services/rpc.ts   |    2 +-
 .../src/plugins/Wallet/services/tokenPrice.ts |  120 -
 .../Wallet/services/transaction/database.ts   |  115 -
 .../Wallet/services/transaction/helpers.ts    |   96 -
 .../Wallet/services/transaction/index.ts      |  116 -
 .../Wallet/services/transaction/progress.ts   |   59 -
 .../Wallet/services/transaction/watcher.ts    |  237 --
 .../plugins/Wallet/services/transactions.ts   |  133 --
 .../Wallet/services/wallet/database/index.ts  |    1 -
 .../Wallet/services/wallet/database/token.ts  |  158 --
 .../Wallet/services/wallet/database/wallet.ts |  119 +-
 .../plugins/Wallet/services/wallet/index.ts   |  146 +-
 .../plugins/Wallet/services/wallet/locker.ts  |    2 +-
 .../services/wallet/maskwallet/index.ts       |   88 -
 .../plugins/Wallet/services/wallet/type.ts    |   24 +-
 packages/mask/src/plugins/Wallet/settings.ts  |   51 +-
 .../mask/src/plugins/Wallet/types/debank.ts   |  163 --
 .../mask/src/plugins/Wallet/types/index.ts    |    8 +-
 .../mask/src/plugins/Wallet/types/metaswap.ts |   13 -
 .../src/plugins/Wallet/types/portfolio.ts     |   35 -
 .../mask/src/plugins/Wallet/types/zerion.ts   |  146 --
 .../src/plugins/dHEDGE/UI/InvestDialog.tsx    |   29 +-
 .../mask/src/plugins/dHEDGE/UI/PoolStats.tsx  |    2 +-
 .../mask/src/plugins/dHEDGE/UI/PoolView.tsx   |   16 +-
 .../src/plugins/dHEDGE/UI/PoolViewDeck.tsx    |   10 +-
 .../plugins/dHEDGE/contracts/useDHedgePool.ts |   15 +-
 .../plugins/dHEDGE/hooks/useInvestCallback.ts |   17 +-
 .../src/plugins/dHEDGE/hooks/useManager.ts    |    2 +-
 .../mask/src/plugins/dHEDGE/hooks/usePool.ts  |    8 +-
 .../src/plugins/hooks/usePriceLineChart.ts    |    2 +-
 packages/mask/src/settings/listener.ts        |   18 -
 packages/mask/src/settings/settings.ts        |   10 +-
 .../injection/NFT/ProfileNFTAvatar.tsx        |   19 +-
 .../injection/NFT/NFTAvatarSettingDialog.tsx  |   11 +-
 .../injection/NFT/NFTAvatarInTwitter.tsx      |    9 +-
 packages/mask/src/social-network/ui.ts        |   28 +-
 packages/mask/src/tsconfig.json               |    5 +-
 packages/mask/src/utils/native-rpc/Web.ts     |   17 +-
 packages/mask/src/web3/UI/ChainBoundary.tsx   |  232 ++
 .../src/web3/UI/ERC721ContractSelectPanel.tsx |   67 +-
 packages/mask/src/web3/UI/EthereumBlockie.tsx |    2 +-
 .../src/web3/UI/EthereumChainBoundary.tsx     |  323 ---
 .../UI/EthereumERC20TokenApprovedBoundary.tsx |   11 +-
 .../EthereumERC721TokenApprovedBoundary.tsx   |   28 +-
 packages/mask/src/web3/UI/SelectTokenChip.tsx |    9 +-
 .../mask/src/web3/UI/TokenAmountPanel.tsx     |   11 +-
 ...undary.tsx => WalletConnectedBoundary.tsx} |   37 +-
 packages/mask/src/web3/context.ts             |  265 ---
 packages/mask/utils-pure/index.ts             |    1 -
 packages/mask/web-workers/wallet.ts           |   38 -
 packages/plugin-infra/package.json            |   23 +-
 packages/plugin-infra/src/entry-web3-evm.ts   |    1 +
 packages/plugin-infra/src/entry-web3.ts       |    4 +-
 packages/plugin-infra/src/hooks/index.ts      |    2 -
 .../src/hooks/useActivatedPluginWeb3State.ts  |    6 +-
 .../src/hooks/useActivatedPluginWeb3UI.ts     |    6 +-
 .../src/hooks/useAllPluginsWeb3State.ts       |   11 +-
 .../plugin-infra/src/hooks/useLookupDomain.ts |   16 -
 .../src/hooks/useReverseAddress.ts            |   14 -
 .../plugin-infra/src/manager/sns-adaptor.ts   |   40 +-
 packages/plugin-infra/src/manager/store.ts    |   40 +-
 packages/plugin-infra/src/types.ts            |  262 ++-
 .../plugin-infra/src/utils/subscription.ts    |   10 +
 .../plugin-infra/src/web3-helpers/index.ts    |  217 ++
 .../src/web3-state/AddressBook.ts             |   58 +
 .../plugin-infra/src/web3-state/Connection.ts |   80 +
 packages/plugin-infra/src/web3-state/Hub.ts   |   37 +
 .../plugin-infra/src/web3-state/Identity.ts   |   23 +
 .../src/web3-state/NameService.ts             |   74 +
 .../plugin-infra/src/web3-state/Others.ts     |   79 +
 .../plugin-infra/src/web3-state/Provider.ts   |  189 ++
 .../src/web3-state/RiskWarning.ts             |   55 +
 .../plugin-infra/src/web3-state/Settings.ts   |   37 +
 packages/plugin-infra/src/web3-state/Token.ts |  144 ++
 .../src/web3-state/Transaction.ts             |  185 ++
 .../src/web3-state/TransactionFormatter.ts    |   30 +
 .../src/web3-state/TransactionWatcher.ts      |  165 ++
 .../plugin-infra/src/web3-state/Wallet.ts     |   25 +
 packages/plugin-infra/src/web3-state/index.ts |   14 +
 packages/plugin-infra/src/web3-types.ts       |  470 +---
 packages/plugin-infra/src/web3/Context.tsx    |  135 +-
 packages/plugin-infra/src/web3/EVM/index.ts   |   25 +
 .../src/web3/EVM}/useBalanceChecker.ts        |    9 +-
 .../plugin-infra/src/web3/EVM/useContract.ts  |   37 +
 .../src/web3/EVM/useERC1155TokenContract.ts   |    8 +
 .../src/web3/EVM}/useERC165.ts                |   13 +-
 .../src/web3/EVM/useERC165Contract.ts         |    9 +
 .../src/web3/EVM}/useERC20TokenAllowance.ts   |   15 +-
 .../web3/EVM}/useERC20TokenApproveCallback.ts |   18 +-
 .../web3/EVM/useERC20TokenBytes32Contract.ts  |   13 +
 .../src/web3/EVM/useERC20TokenContract.ts     |   13 +
 .../src/web3/EVM/useERC20TokenTotalSupply.ts  |   13 +
 .../EVM}/useERC20TokenTransferCallback.ts     |   19 +-
 .../EVM}/useERC721ContractIsApproveForAll.ts  |    9 +-
 ...eERC721ContractSetApproveForAllCallback.ts |   15 +-
 .../src/web3/EVM/useERC721TokenByIndex.ts     |   19 +
 .../src/web3/EVM/useERC721TokenContract.ts    |    9 +
 .../src/web3/EVM/useERC721TokenContracts.ts   |    9 +
 .../EVM}/useERC721TokenTransferCallback.ts    |   19 +-
 .../plugin-infra/src/web3/EVM/useGasLimit.ts  |   51 +
 .../src/web3/EVM/useGetPastLogsParams.ts      |   32 +
 .../src/web3/EVM}/useMulticall.ts             |   23 +-
 .../src/web3/EVM}/useMulticallContract.ts     |    9 +-
 .../EVM}/useNativeTokenTransferCallback.ts    |   18 +-
 .../EVM}/useNativeTokenWrapperCallback.ts     |   12 +-
 .../src/web3/EVM/useNonFungibleOwnerTokens.ts |   61 +
 .../src/web3/EVM/useReverseLookupContract.ts  |   10 +
 .../src/web3/EVM}/useTokenTransferCallback.ts |   12 +-
 .../src/web3/EVM}/useTransactionCallback.ts   |    4 +-
 .../src/web3/EVM/useTransactionState.ts       |   13 +
 .../src/web3/EVM}/useWrappedEtherContract.ts  |    9 +-
 packages/plugin-infra/src/web3/index.ts       |   79 +-
 packages/plugin-infra/src/web3/useAccount.ts  |   19 +-
 .../plugin-infra/src/web3/useAddressBook.ts   |    9 +
 .../plugin-infra/src/web3/useAddressNames.ts  |   20 +
 .../plugin-infra/src/web3/useAllowTestnet.ts  |   11 +-
 .../plugin-infra/src/web3/useAssetType.ts     |    6 -
 packages/plugin-infra/src/web3/useBalance.ts  |   21 +-
 packages/plugin-infra/src/web3/useBeat.ts     |   47 +-
 .../plugin-infra/src/web3/useBlockNumber.ts   |   19 +-
 .../src/web3/useBlockTimestamp.ts             |   20 +
 .../src/web3/useBlockedFungibleTokens.ts      |   23 +
 .../src/web3/useBlockedNonFungibleTokens.ts   |   23 +
 .../src/web3}/useBlockie.ts                   |    0
 .../plugin-infra/src/web3/useChainColor.ts    |   17 +-
 .../src/web3/useChainDescriptor.ts            |   14 +
 .../plugin-infra/src/web3/useChainDetailed.ts |    9 -
 packages/plugin-infra/src/web3/useChainId.ts  |   22 +-
 .../src/web3/useChainIdMainnet.ts             |   16 +
 .../src/web3/useChainIdMatched.ts             |   11 +
 .../src/web3/useChainIdSupport.ts             |   17 +
 .../plugin-infra/src/web3/useChainIdValid.ts  |   24 +-
 .../src/web3/useClearTransactionsCallback.ts  |   19 +
 .../src/web3/useCollectibleType.ts            |    6 -
 .../plugin-infra/src/web3/useCurrencyType.ts  |   11 +-
 .../src/web3/useDefaultChainId.ts             |   17 +
 .../src/web3/useDefaultNetworkType.ts         |   17 +
 .../plugin-infra/src/web3/useFungibleAsset.ts |   23 +
 .../src/web3/useFungibleAssetSourceType.ts    |    9 +
 .../src/web3/useFungibleAssets.ts             |   27 +
 .../plugin-infra/src/web3/useFungibleToken.ts |   22 +
 .../src/web3/useFungibleTokenBalance.ts       |   19 +
 .../src/web3/useFungibleTokenPrice.ts         |   21 +
 .../src/web3/useFungibleTokenWatched.ts       |   20 +
 .../src/web3/useFungibleTokens.ts             |   20 +
 .../src/web3/useFungibleTokensBalance.ts      |   23 +
 .../web3/useFungibleTokensFromTokenList.ts    |   21 +
 .../plugin-infra/src/web3/useGasOptionType.ts |    9 +
 .../plugin-infra/src/web3/useGasOptions.ts    |   20 +
 packages/plugin-infra/src/web3/useGasPrice.ts |   12 +
 .../src/web3}/useImageChecker.ts              |    0
 .../plugin-infra/src/web3/useLookupAddress.ts |   17 +
 packages/plugin-infra/src/web3/useNameType.ts |    6 -
 .../plugin-infra/src/web3/useNativeToken.ts   |    9 +
 .../src/web3/useNativeTokenAddress.ts         |   16 +
 .../src/web3/useNativeTokenBalance.ts         |   20 +
 .../src/web3/useNativeTokenPrice.ts           |   22 +
 .../src/web3/useNetworkDescriptor.ts          |   15 +-
 .../src/web3/useNetworkDescriptors.ts         |   12 +-
 .../plugin-infra/src/web3/useNetworkType.ts   |   20 +-
 .../src/web3/useNonFungibleAsset.ts           |   25 +
 .../src/web3/useNonFungibleAssetSourceType.ts |    9 +
 .../src/web3/useNonFungibleAssets.ts          |   28 +
 .../src/web3/useNonFungibleCollections.ts     |   26 +
 .../src/web3/useNonFungibleToken.ts           |   24 +
 .../src/web3/useNonFungibleTokenBalance.ts    |   22 +
 .../src/web3/useNonFungibleTokenContract.ts   |   23 +
 .../src/web3/useNonFungibleTokenPrice.ts      |   27 +
 .../src/web3/useNonFungibleTokens.ts          |   21 +
 .../src/web3/useNonFungibleTokensBalance.ts   |   23 +
 .../web3/useNonFungibleTokensFromTokenList.ts |   21 +
 .../src/web3/useProviderDescriptor.ts         |   13 +-
 .../src/web3/useProviderDescriptors.ts        |   12 +-
 .../plugin-infra/src/web3/useProviderReady.ts |   18 +
 .../plugin-infra/src/web3/useProviderType.ts  |   18 +-
 .../src/web3/useRecentTransactions.ts         |   21 +
 .../src/web3/useRemoveTransaction.ts          |   26 +
 .../src/web3/useReverseAddress.ts             |   20 +
 .../src/web3/useRiskWarningApproved.ts        |    9 +
 .../plugin-infra/src/web3/useSchemaType.ts    |   21 +
 .../src/web3}/useSocketOnce.ts                |    0
 .../plugin-infra/src/web3/useTokenPrice.ts    |    7 -
 .../src/web3/useTransactionType.ts            |    6 -
 .../plugin-infra/src/web3/useTransactions.ts  |   17 +
 .../src/web3/useTrustedFungibleTokens.ts      |   23 +
 .../src/web3/useTrustedNonFungibleTokens.ts   |   23 +
 packages/plugin-infra/src/web3/useWallet.ts   |   17 +-
 .../plugin-infra/src/web3/useWalletPrimary.ts |   11 +-
 packages/plugin-infra/src/web3/useWallets.ts  |   11 +-
 packages/plugin-infra/src/web3/useWeb3.ts     |   28 +
 .../src/web3/useWeb3Connection.ts             |   31 +
 packages/plugin-infra/src/web3/useWeb3Hub.ts  |   33 +
 .../plugin-infra/src/web3/useWeb3Provider.ts  |   31 +
 .../plugin-infra/src/web3/useWeb3State.ts     |    8 +-
 packages/plugin-infra/src/web3/useWeb3UI.ts   |    8 +-
 .../plugin-infra/src/web3/useZeroAddress.ts   |   10 +
 packages/plugin-infra/tsconfig.json           |    4 +
 .../src/SNSAdaptor/CrossChainBridgeDialog.tsx |    1 +
 packages/plugins/CyberConnect/package.json    |    1 +
 .../src/SNSAdaptor/ConnectButton.tsx          |   10 +-
 packages/plugins/CyberConnect/src/base.tsx    |   13 -
 packages/plugins/CyberConnect/tsconfig.json   |    1 +
 .../plugins/DAO/src/components/DAOPage.tsx    |    2 +-
 .../src/SNSAdaptor/components/TabContent.tsx  |    8 +-
 packages/plugins/EVM/package.json             |   46 +
 .../plugins/EVM/src/UI/Dashboard/index.tsx    |   46 +
 .../plugins/EVM/src/UI/SNSAdaptor/index.tsx   |   46 +
 .../EVM => plugins/EVM/src}/Worker/index.ts   |    0
 packages/plugins/EVM/src/assets/nft.png       |  Bin 0 -> 12065 bytes
 packages/plugins/EVM/src/base.ts              |   19 +
 packages/plugins/EVM/src/constants/index.ts   |    5 +
 packages/plugins/EVM/src/env.d.ts             |   10 +
 packages/plugins/EVM/src/hooks/index.ts       |    1 +
 .../plugins/EVM/src/hooks/useProviderReady.ts |    7 +
 .../plugins/EVM => plugins/EVM/src}/index.ts  |   33 +-
 packages/plugins/EVM/src/locales/en-US.json   |    1 +
 packages/plugins/EVM/src/locales/index.ts     |    6 +
 packages/plugins/EVM/src/locales/languages.ts |   19 +
 .../EVM => plugins/EVM/src}/messages.ts       |   18 -
 .../types.ts => plugins/EVM/src/services.ts}  |    0
 packages/plugins/EVM/src/settings/index.ts    |    6 +
 packages/plugins/EVM/src/state/AddressBook.ts |   25 +
 packages/plugins/EVM/src/state/Connection.ts  |   42 +
 .../EVM/src/state/Connection/composer.ts      |  211 ++
 .../EVM/src/state/Connection/connection.ts    |  677 ++++++
 .../EVM/src/state/Connection}/error.ts        |   14 +-
 .../Connection/interceptors/MaskWallet.ts     |   79 +
 .../state/Connection/interceptors/MetaMask.ts |   18 +
 .../Connection/interceptors/WalletConnect.ts  |   30 +
 .../Connection/middleware/AddressBook.ts      |   41 +
 .../Connection/middleware/Interceptor.ts      |   22 +
 .../src/state/Connection/middleware/Nonce.ts  |  156 ++
 .../src/state/Connection/middleware/Popup.ts  |   96 +
 .../src/state/Connection/middleware/Squash.ts |   78 +
 .../Connection/middleware/Transaction.ts      |   66 +
 .../state/Connection/middleware/Translator.ts |   24 +
 .../EVM/src/state/Connection/provider.ts      |   26 +
 .../src/state/Connection/providers/Base.ts    |   95 +
 .../Connection/providers/BaseInjected.ts      |   74 +
 .../src/state/Connection/providers/Coin98.ts  |   10 +
 .../Connection/providers/CustomNetwork.ts     |    4 +
 .../state/Connection/providers/Fortmatic.ts   |  111 +
 .../state/Connection/providers/MaskWallet.ts  |  139 ++
 .../state/Connection/providers/MathWallet.ts  |   10 +
 .../state/Connection/providers/MetaMask.ts    |   26 +
 .../src/state/Connection/providers/Torus.ts   |   95 +
 .../Connection/providers/WalletConnect.ts     |  178 ++
 .../state/Connection/providers/WalletLink.ts  |   10 +
 .../src/state/Connection/translators/Base.ts  |   62 +
 .../src/state/Connection/translators/Celo.ts  |   11 +
 .../Connection/translators/Optimistic.ts      |   11 +
 .../state/Connection/translators/Polygon.ts   |   27 +
 .../plugins/EVM/src/state/Connection/types.ts |   77 +
 .../plugins/EVM/src/state/Connection/utils.ts |   10 +
 packages/plugins/EVM/src/state/Hub.ts         |   20 +
 .../state/Hub/TokenIconSpecialIconList.json   |  197 ++
 packages/plugins/EVM/src/state/Hub/hub.ts     |  206 ++
 packages/plugins/EVM/src/state/Hub/types.ts   |    4 +
 .../plugins/EVM/src/state/IdentityService.ts  |  106 +
 packages/plugins/EVM/src/state/NameService.ts |   61 +
 packages/plugins/EVM/src/state/Others.ts      |   38 +
 packages/plugins/EVM/src/state/Provider.ts    |   61 +
 packages/plugins/EVM/src/state/RiskWarning.ts |   23 +
 packages/plugins/EVM/src/state/Settings.ts    |    8 +
 packages/plugins/EVM/src/state/Token.ts       |   26 +
 packages/plugins/EVM/src/state/Transaction.ts |   24 +
 .../EVM/src/state/TransactionFormatter.ts     |  143 ++
 .../EVM/src/state/TransactionFormatter/abi.ts |   68 +
 .../TransactionFormatter/descriptors/Base.ts  |   24 +
 .../descriptors/Cancel.ts                     |   11 +
 .../descriptors/ContractDeployment.ts         |   24 +
 .../TransactionFormatter/descriptors/ERC20.ts |   44 +
 .../TransactionFormatter/descriptors/ITO.ts   |   31 +
 .../descriptors/RedPacket.ts                  |   42 +
 .../descriptors/TransferToken.ts              |   23 +
 .../descriptors/Uniswap.ts                    |   16 +
 .../src/state/TransactionFormatter/types.ts   |   35 +
 .../src/state/TransactionFormatter/utils.ts   |   14 +
 .../EVM/src/state/TransactionWatcher.ts       |   12 +
 .../src/state/TransactionWatcher/checker.ts   |    4 +
 .../checkers/AccountChecker.ts                |    8 +
 .../checkers/ReceiptChecker.ts                |    8 +
 packages/plugins/EVM/src/state/Wallet.ts      |    8 +
 packages/plugins/EVM/src/state/index.ts       |   60 +
 packages/plugins/EVM/src/types/index.ts       |    9 +
 packages/plugins/EVM/tsconfig.json            |   20 +
 packages/plugins/FileService/src/helpers.ts   |    5 +-
 packages/plugins/Flow/package.json            |    8 +-
 .../plugins/Flow/src/UI/Dashboard/index.tsx   |   46 +-
 .../plugins/Flow/src/UI/SNSAdaptor/index.tsx  |   44 +-
 .../plugins/Flow/src/UI/Web3State/index.ts    |   62 -
 packages/plugins/Flow/src/UI/Web3UI/index.tsx |    9 -
 .../UI/components/ProviderIconClickBait.tsx   |   38 -
 ...getFungibleAssets.ts => fungibleAssets.ts} |   70 +-
 packages/plugins/Flow/src/apis/index.ts       |    2 +-
 packages/plugins/Flow/src/base.ts             |   16 +-
 packages/plugins/Flow/src/constants.ts        |   37 +-
 packages/plugins/Flow/src/env.d.ts            |   36 +-
 .../plugins/Flow/src/helpers/formatter.ts     |    9 +
 packages/plugins/Flow/src/helpers/token.ts    |   29 +-
 packages/plugins/Flow/src/index.ts            |   31 +-
 packages/plugins/Flow/src/settings/index.ts   |    6 +
 .../plugins/Flow/src/state/AddressBook.ts     |   25 +
 packages/plugins/Flow/src/state/Connection.ts |   46 +
 .../Flow/src/state/Connection/connection.ts   |  225 ++
 .../Flow/src/state/Connection/provider.ts     |   11 +
 .../src/state/Connection/providers/Base.ts    |   34 +
 .../src/state/Connection/providers/Blocto.ts  |   24 +
 .../src/state/Connection/providers/Dapper.ts  |    4 +
 .../src/state/Connection/providers/Ledger.ts  |    4 +
 .../Flow/src/state/Connection/types.ts        |   11 +
 packages/plugins/Flow/src/state/Hub.ts        |   20 +
 packages/plugins/Flow/src/state/Hub/hub.ts    |  172 ++
 packages/plugins/Flow/src/state/Hub/types.ts  |    4 +
 packages/plugins/Flow/src/state/Others.ts     |   47 +
 packages/plugins/Flow/src/state/Provider.ts   |   48 +
 packages/plugins/Flow/src/state/Settings.ts   |    8 +
 .../plugins/Flow/src/state/Transaction.ts     |   25 +
 packages/plugins/Flow/src/state/Wallet.ts     |    8 +
 packages/plugins/Flow/src/state/index.ts      |   36 +
 packages/plugins/Flow/src/storage/index.ts    |   18 -
 packages/plugins/Flow/src/types.ts            |    3 -
 packages/plugins/Flow/tsconfig.json           |    2 +
 packages/plugins/GoPlusSecurity/package.json  |    1 +
 .../src/SNSAdaptor/components/SearchBox.tsx   |   24 +-
 .../src/SNSAdaptor/components/TokenPanel.tsx  |   18 +-
 packages/plugins/GoPlusSecurity/src/base.ts   |    1 -
 packages/plugins/GoPlusSecurity/tsconfig.json |    8 +-
 .../plugins/RSS3/src/SNSAdaptor/TabCard.tsx   |   10 +-
 .../plugins/RSS3/src/SNSAdaptor/index.tsx     |   19 +-
 packages/plugins/RSS3/src/base.ts             |    3 +-
 packages/plugins/Solana/package.json          |    9 +
 .../plugins/Solana/src/UI/Dashboard/index.tsx |   46 +-
 .../Solana/src/UI/SNSAdaptor/index.tsx        |   47 +-
 .../plugins/Solana/src/UI/Web3State/index.ts  |   66 -
 .../plugins/Solana/src/UI/Web3UI/index.tsx    |    8 -
 .../UI/components/ProviderIconClickBait.tsx   |   30 +-
 .../Solana/src/apis/getFungibleAssets.ts      |   47 +-
 .../Solana/src/apis/getNonFungibleAssets.ts   |   41 +-
 packages/plugins/Solana/src/assets/torus.png  |  Bin 0 -> 3975 bytes
 packages/plugins/Solana/src/base.ts           |   16 +-
 packages/plugins/Solana/src/constants.ts      |   39 +-
 packages/plugins/Solana/src/env.d.ts          |    1 +
 .../plugins/Solana/src/helpers/formatter.ts   |   12 -
 packages/plugins/Solana/src/helpers/index.ts  |    1 -
 packages/plugins/Solana/src/helpers/token.ts  |   29 +-
 packages/plugins/Solana/src/index.ts          |   32 +-
 packages/plugins/Solana/src/settings/index.ts |    6 +
 .../plugins/Solana/src/state/AddressBook.ts   |   25 +
 .../plugins/Solana/src/state/Connection.ts    |   42 +
 .../Solana/src/state/Connection/connection.ts |  246 ++
 .../Solana/src/state/Connection/provider.ts   |   13 +
 .../src/state/Connection/providers/Base.ts    |   52 +
 .../Connection/providers/BaseInjected.ts      |   63 +
 .../src/state/Connection/providers/Coin98.ts  |   48 +
 .../src/state/Connection/providers/Phantom.ts |   42 +
 .../Connection/providers/SolflareProvider.ts  |   28 +
 .../src/state/Connection/providers/Sollet.ts  |   54 +
 .../Solana/src/state/Connection/types.ts      |   21 +
 packages/plugins/Solana/src/state/Hub.ts      |   20 +
 packages/plugins/Solana/src/state/Hub/hub.ts  |  144 ++
 .../plugins/Solana/src/state/Hub/types.ts     |    4 +
 packages/plugins/Solana/src/state/Others.ts   |   36 +
 packages/plugins/Solana/src/state/Provider.ts |   48 +
 packages/plugins/Solana/src/state/Settings.ts |    8 +
 packages/plugins/Solana/src/state/Token.ts    |   26 +
 .../plugins/Solana/src/state/Transaction.ts   |   23 +
 packages/plugins/Solana/src/state/Wallet.ts   |    8 +
 packages/plugins/Solana/src/state/index.ts    |   39 +
 packages/plugins/Solana/src/storage/index.ts  |   17 -
 packages/plugins/Solana/src/types.ts          |    3 -
 packages/plugins/Solana/src/utils.ts          |    7 -
 packages/plugins/Solana/src/utils/index.ts    |   28 +
 packages/plugins/Solana/src/wallet/connect.ts |   46 -
 packages/plugins/Solana/src/wallet/index.ts   |    1 -
 packages/plugins/Solana/tsconfig.json         |    3 +-
 packages/plugins/Wallet/package.json          |    1 +
 packages/plugins/Wallet/src/constants.ts      |   10 -
 packages/plugins/Wallet/src/messages.ts       |  123 +-
 packages/plugins/Wallet/tsconfig.json         |    1 +
 packages/plugins/tsconfig.json                |    2 +
 packages/public-api/src/web.ts                |   48 +-
 packages/shared-base/src/Identifier/ec-key.ts |    2 +-
 packages/shared-base/src/Messages/Mask.ts     |   27 +-
 packages/shared-base/src/Site/index.ts        |   43 +
 packages/shared-base/src/index.ts             |    3 +-
 .../src/onDemandWorker}/index.ts              |    0
 .../shared-base/src/utils/asyncIterator.ts    |    5 +
 .../src/utils/createValueRefWithReady.ts      |   26 +
 packages/shared-base/src/utils/index.ts       |    2 +
 .../shared-base/src/utils/subscription.ts     |   18 +-
 packages/shared/package.json                  |    1 +
 .../src/UI/components/AddressViewer/index.tsx |   38 +-
 .../src/UI/components/AssetPlayer/index.tsx   |   13 +-
 .../UI/components/ERC20TokenList/index.tsx    |  159 --
 .../FungibleTokenItem.tsx}                    |  103 +-
 .../UI/components/FungibleTokenList/index.tsx |  192 ++
 .../NFTCardStyledAssetPlayer/index.tsx        |   21 +-
 .../UI/components/ReversedAddress/index.tsx   |   13 +-
 .../UI/components/SelectTokenChip/index.tsx   |    9 +-
 .../UI/components/TokenAmountPanel/index.tsx  |    9 +-
 .../src/UI/components/TokenIcon/index.tsx     |   60 +-
 packages/shared/src/UI/components/index.ts    |    2 +-
 packages/shared/src/UI/index.ts               |    1 -
 .../evm/TokenPicker/SelectTokenDialog.tsx     |   24 +-
 .../src/contexts/evm/TokenPicker/index.tsx    |   79 +-
 packages/shared/src/hooks/index.ts            |    1 +
 packages/shared/src/hooks/useImageFailOver.ts |   27 +
 .../shared/src/hooks/useOpenShareTxDialog.tsx |   10 +-
 packages/shared/src/index.ts                  |    2 -
 packages/shared/src/utils/index.ts            |   68 +
 packages/shared/tsconfig.json                 |    9 +-
 packages/web3-constants/evm/lbp.json          |   25 -
 packages/web3-constants/evm/rpc.json          |    2 +-
 packages/web3-constants/evm/token-list.json   |   27 +-
 packages/web3-constants/flow/chain.json       |   18 +
 packages/web3-constants/solana/chain.json     |   22 +
 packages/web3-contracts/abis/ERC165.json      |   21 +
 packages/web3-contracts/types/ERC165.d.ts     |   33 +
 packages/web3-providers/package.json          |    1 +
 packages/web3-providers/src/NFTScan/index.ts  |  138 +-
 .../web3-providers/src/coingecko/constants.ts |    1 -
 .../web3-providers/src/coingecko/index.ts     |   42 +-
 packages/web3-providers/src/debank/format.ts  |  126 +-
 packages/web3-providers/src/debank/index.ts   |  122 +-
 packages/web3-providers/src/debank/type.ts    |    1 +
 .../web3-providers/src/gopluslabs/index.ts    |   10 +-
 packages/web3-providers/src/hooks/index.ts    |    1 -
 .../hooks/useERC721TokenDetailedOwnerList.ts  |  100 -
 packages/web3-providers/src/index.ts          |   21 +-
 packages/web3-providers/src/mask/index.ts     |   86 +
 packages/web3-providers/src/mask/prepare.ts   |   15 +
 packages/web3-providers/src/mask/worker.ts    |   26 +
 packages/web3-providers/src/metaswap/index.ts |   35 +
 packages/web3-providers/src/metaswap/types.ts |   13 +
 packages/web3-providers/src/opensea/index.ts  |  527 +++--
 packages/web3-providers/src/opensea/types.ts  |   73 +-
 packages/web3-providers/src/rarible/index.ts  |  324 ++-
 .../web3-providers/src/risk-warning/index.ts  |   22 +
 packages/web3-providers/src/rss3/index.ts     |   51 +-
 .../web3-providers/src/token-list/index.ts    |   72 +-
 .../web3-providers/src/token-price/index.ts   |   21 -
 packages/web3-providers/src/types.ts          |  336 +--
 packages/web3-providers/src/zerion/format.ts  |   98 +-
 packages/web3-providers/src/zerion/index.ts   |  107 +-
 packages/web3-providers/src/zora/index.ts     |  690 +++---
 packages/web3-shared/base/package.json        |    6 +
 .../web3-shared/base/src/helpers/index.ts     |    3 -
 .../base/src/helpers/lookupTable.ts           |    7 -
 .../web3-shared/base/src/helpers/types.ts     |    1 -
 packages/web3-shared/base/src/hooks/index.ts  |    1 -
 .../web3-shared/base/src/hooks/useBeat.ts     |   17 -
 packages/web3-shared/base/src/index.ts        |    3 +-
 packages/web3-shared/base/src/specs/index.ts  |  964 ++++++++
 .../web3-shared/base/src/utils/address.ts     |   19 +
 .../web3-shared/base/src/utils/balance.ts     |   29 +
 .../constants.ts => utils/constant.ts}        |   30 +-
 .../web3-shared/base/src/utils/currency.ts    |    7 +
 packages/web3-shared/base/src/utils/index.ts  |    9 +
 .../web3-shared/base/src/utils/pagination.ts  |    7 +
 .../web3-shared/base/src/utils/predicate.ts   |    3 +
 .../web3-shared/base/src/utils/resolver.ts    |  159 ++
 packages/web3-shared/base/src/utils/token.ts  |  139 ++
 packages/web3-shared/base/src/utils/types.ts  |   13 +
 packages/web3-shared/base/tsconfig.json       |    2 +-
 .../evm}/assets/arbitrum.png                  |  Bin
 .../EVM => web3-shared/evm}/assets/aurora.png |  Bin
 .../evm}/assets/avalanche.png                 |  Bin
 .../evm}/assets/binance.png                   |  Bin
 .../EVM => web3-shared/evm}/assets/celo.png   |  Bin
 .../EVM => web3-shared/evm}/assets/coin98.png |  Bin
 .../evm}/assets/coinbase.png                  |  Bin
 .../evm}/assets/conflux.png                   |  Bin
 .../evm}/assets/ethereum.png                  |  Bin
 .../EVM => web3-shared/evm}/assets/fantom.png |  Bin
 .../evm}/assets/fortmatic.png                 |  Bin
 .../evm}/assets/harmony.png                   |  Bin
 .../evm}/assets/lucky_drop.png                |  Bin
 .../evm}/assets/maskwallet.png                |  Bin
 .../evm}/assets/mathwallet.png                |  Bin
 .../evm}/assets/metamask.png                  |  Bin
 .../EVM => web3-shared/evm}/assets/nfts.png   |  Bin
 .../evm}/assets/polygon.png                   |  Bin
 packages/web3-shared/evm/assets/torus.png     |  Bin 0 -> 3975 bytes
 .../evm}/assets/walletconnect.png             |  Bin
 .../EVM => web3-shared/evm}/assets/xdai.png   |  Bin
 packages/web3-shared/evm/constants/README.md  |   11 -
 .../evm/{assets => constants}/chains.json     | 2020 +++++++++--------
 .../web3-shared/evm/constants/constants.ts    |   61 +-
 .../web3-shared/evm/constants/descriptors.ts  |  334 +++
 packages/web3-shared/evm/constants/index.ts   |    2 +-
 packages/web3-shared/evm/constants/tokens.ts  |   22 +-
 packages/web3-shared/evm/constants/utils.ts   |   58 -
 packages/web3-shared/evm/context/index.tsx    |   62 -
 packages/web3-shared/evm/context/type.ts      |   89 -
 packages/web3-shared/evm/contracts/index.ts   |    5 -
 .../evm/contracts/useERC1155TokenContract.ts  |    8 -
 .../contracts/useERC20TokenBytes32Contract.ts |   13 -
 .../evm/contracts/useERC20TokenContract.ts    |   13 -
 .../evm/contracts/useERC721TokenContract.ts   |    9 -
 .../evm/contracts/useERC721TokenContracts.ts  |    8 -
 .../evm/contracts/useReverseLookupContract.ts |   11 -
 packages/web3-shared/evm/hooks/index.ts       |   72 -
 packages/web3-shared/evm/hooks/useAccount.ts  |   10 -
 .../evm/hooks/useAddERC20TokenCallback.ts     |   15 -
 .../web3-shared/evm/hooks/useAddressNames.ts  |   26 -
 .../web3-shared/evm/hooks/useAllowTestnet.ts  |    5 -
 packages/web3-shared/evm/hooks/useAssets.ts   |   57 -
 .../evm/hooks/useAssetsByTokenList.ts         |   59 -
 .../evm/hooks/useAssetsFromChain.ts           |   53 -
 .../evm/hooks/useAssetsFromProvider.ts        |   25 -
 .../web3-shared/evm/hooks/useAssetsMerged.ts  |   27 -
 packages/web3-shared/evm/hooks/useBalance.ts  |   16 -
 .../web3-shared/evm/hooks/useBlockNumber.ts   |   15 -
 .../web3-shared/evm/hooks/useChainColor.ts    |    7 -
 .../web3-shared/evm/hooks/useChainDetailed.ts |    5 -
 .../evm/hooks/useChainEIP1159Supported.ts     |    6 -
 packages/web3-shared/evm/hooks/useChainId.ts  |   29 -
 .../web3-shared/evm/hooks/useChainIdValid.ts  |    5 -
 .../web3-shared/evm/hooks/useCollectibles.ts  |   62 -
 packages/web3-shared/evm/hooks/useContract.ts |   42 -
 .../evm/hooks/useCurrentBlockTimestamp.ts     |   18 -
 packages/web3-shared/evm/hooks/useENSLabel.ts |   34 -
 .../evm/hooks/useERC1155TokenAssetDetailed.ts |   14 -
 .../evm/hooks/useERC20TokenBalance.ts         |   30 -
 .../evm/hooks/useERC20TokenDetailed.ts        |   93 -
 .../useERC20TokenDetailedFromTokenLists.ts    |   20 -
 .../evm/hooks/useERC20TokenTotalSupply.ts     |   14 -
 .../web3-shared/evm/hooks/useERC20Tokens.ts   |   15 -
 .../useERC20TokensDetailedFromTokenLists.ts   |   64 -
 .../evm/hooks/useERC721ContractBalance.ts     |   15 -
 .../evm/hooks/useERC721ContractDetailed.ts    |   64 -
 .../evm/hooks/useERC721TokenByIndex.ts        |   14 -
 .../evm/hooks/useERC721TokenDetailed.ts       |  155 --
 .../hooks/useERC721TokenDetailedCallback.ts   |   48 -
 .../web3-shared/evm/hooks/useERC721Tokens.ts  |   15 -
 .../evm/hooks/useEthereumTokenType.ts         |   42 -
 .../evm/hooks/useFungibleTokenBalance.ts      |   24 -
 .../evm/hooks/useFungibleTokenDetailed.ts     |   29 -
 .../evm/hooks/useFungibleTokenWatched.tsx     |   34 -
 packages/web3-shared/evm/hooks/useGasLimit.ts |   47 -
 packages/web3-shared/evm/hooks/useGasPrice.ts |   14 -
 .../evm/hooks/useGetPastLogsParams.ts         |   29 -
 .../evm/hooks/useNativeTokenBalance.ts        |   17 -
 .../evm/hooks/useNativeTokenDetailed.ts       |    9 -
 .../web3-shared/evm/hooks/useNetworkType.ts   |    5 -
 .../web3-shared/evm/hooks/useProviderType.ts  |    5 -
 .../web3-shared/evm/hooks/useResolveENS.ts    |   11 -
 packages/web3-shared/evm/hooks/useSocket.ts   |   65 -
 .../web3-shared/evm/hooks/useTokensBalance.ts |   28 -
 .../evm/hooks/useTransactionState.ts          |   45 -
 .../web3-shared/evm/hooks/useTransactions.ts  |   29 -
 .../evm/hooks/useTrustERC20TokenCallback.ts   |   17 -
 .../evm/hooks/useTrustedERC20Tokens.ts        |   15 -
 packages/web3-shared/evm/hooks/useWallet.ts   |    9 -
 .../web3-shared/evm/hooks/useWalletPrimary.ts |    6 -
 packages/web3-shared/evm/hooks/useWallets.ts  |   13 -
 packages/web3-shared/evm/hooks/useWeb3.ts     |    9 -
 .../web3-shared/evm/hooks/useWeb3Provider.ts  |   21 -
 packages/web3-shared/evm/index.ts             |    4 -
 packages/web3-shared/evm/package.json         |   10 +-
 packages/web3-shared/evm/pipes/index.ts       |  241 +-
 .../web3-shared/evm/providers/Fortmatic.ts    |   61 -
 packages/web3-shared/evm/types/index.ts       |  551 +----
 packages/web3-shared/evm/utils/abi.ts         |   24 +
 packages/web3-shared/evm/utils/address.ts     |   30 +-
 packages/web3-shared/evm/utils/chain.ts       |    5 +
 .../web3-shared/evm/utils/chainDetailed.ts    |  156 --
 packages/web3-shared/evm/utils/contract.ts    |   55 +
 packages/web3-shared/evm/utils/domain.ts      |    8 +
 packages/web3-shared/evm/utils/enum.ts        |    7 -
 packages/web3-shared/evm/utils/formatter.ts   |   42 +-
 packages/web3-shared/evm/utils/index.ts       |    7 +-
 packages/web3-shared/evm/utils/misc.ts        |    3 -
 packages/web3-shared/evm/utils/payload.ts     |   73 +-
 packages/web3-shared/evm/utils/provider.ts    |  131 +-
 packages/web3-shared/evm/utils/resolver.ts    |   12 +
 packages/web3-shared/evm/utils/token.ts       |  314 +--
 packages/web3-shared/evm/utils/transaction.ts |   38 +-
 packages/web3-shared/flow/assets/FUSD.png     |  Bin 0 -> 732 bytes
 packages/web3-shared/flow/assets/blocto.png   |  Bin 0 -> 6902 bytes
 packages/web3-shared/flow/assets/flow.png     |  Bin 0 -> 3063 bytes
 packages/web3-shared/flow/assets/tUSD.png     |  Bin 0 -> 4245 bytes
 .../web3-shared/flow/constants/constants.ts   |   14 +
 .../web3-shared/flow/constants/descriptors.ts |  102 +
 packages/web3-shared/flow/constants/index.ts  |   13 +-
 .../web3-shared/flow/constants/primitives.ts  |    1 +
 packages/web3-shared/flow/env.d.ts            | 1357 ++++++++++-
 packages/web3-shared/flow/index.ts            |    2 +-
 packages/web3-shared/flow/package.json        |    9 +-
 packages/web3-shared/flow/pipes/index.ts      |   44 -
 packages/web3-shared/flow/sdk/index.ts        |    5 +-
 packages/web3-shared/flow/tsconfig.json       |    2 +-
 packages/web3-shared/flow/types.ts            |   34 +
 packages/web3-shared/flow/utils/address.ts    |   16 +
 packages/web3-shared/flow/utils/domain.ts     |    8 +
 packages/web3-shared/flow/utils/index.ts      |    3 +
 packages/web3-shared/flow/utils/resolver.ts   |   17 +
 packages/web3-shared/solana/assets/coin98.png |  Bin 0 -> 8825 bytes
 .../web3-shared/solana/assets/phantom.png     |  Bin 0 -> 8430 bytes
 packages/web3-shared/solana/assets/solana.png |  Bin 0 -> 10204 bytes
 .../web3-shared/solana/assets/solflare.png    |  Bin 0 -> 2162 bytes
 packages/web3-shared/solana/assets/sollet.png |  Bin 0 -> 21894 bytes
 packages/web3-shared/solana/assets/usdc.png   |  Bin 0 -> 5716 bytes
 packages/web3-shared/solana/coin98.png        |  Bin 0 -> 8825 bytes
 .../web3-shared/solana/constants/constants.ts |   10 +
 .../solana/constants/descriptors.ts           |  179 ++
 .../web3-shared/solana/constants/index.ts     |    9 +-
 .../solana/constants/primitives.ts            |    1 +
 packages/web3-shared/solana/index.ts          |    2 +-
 packages/web3-shared/solana/package.json      |    7 +
 packages/web3-shared/solana/pipes/index.ts    |   45 -
 packages/web3-shared/solana/tsconfig.json     |    7 +-
 packages/web3-shared/solana/types.ts          |   53 +
 packages/web3-shared/solana/utils/address.ts  |   26 +
 packages/web3-shared/solana/utils/domain.ts   |    3 +
 packages/web3-shared/solana/utils/index.ts    |    3 +
 packages/web3-shared/solana/utils/resolver.ts |   14 +
 pnpm-lock.yaml                                | 1069 +++++++--
 tsconfig.json                                 |    1 +
 1288 files changed, 25960 insertions(+), 26619 deletions(-)
 delete mode 100644 packages/dashboard/src/hooks/useGasOptions.ts
 delete mode 100644 packages/dashboard/src/pages/Settings/components/DataSourceSetting.tsx
 delete mode 100644 packages/dashboard/src/pages/Wallets/api.ts
 delete mode 100644 packages/dashboard/src/pages/Wallets/components/Transfer/useNativeTokenPrice.ts
 delete mode 100644 packages/dashboard/src/pages/Wallets/hooks/useAddressBook.ts
 delete mode 100644 packages/dashboard/src/pages/Wallets/hooks/useRecentTransactions.ts
 delete mode 100644 packages/dashboard/src/web3/context.ts
 create mode 100644 packages/injected-script/sdk/Base.ts
 create mode 100644 packages/injected-script/sdk/Coin98.ts
 create mode 100644 packages/injected-script/sdk/MathWallet.ts
 create mode 100644 packages/injected-script/sdk/MetaMask.ts
 create mode 100644 packages/injected-script/sdk/Phantom.ts
 create mode 100644 packages/injected-script/sdk/Solflare.ts
 create mode 100644 packages/injected-script/sdk/WalletLink.ts
 delete mode 100644 packages/injected-script/sdk/bridgedCoin98.ts
 delete mode 100644 packages/injected-script/sdk/bridgedEthereum.ts
 delete mode 100644 packages/injected-script/sdk/bridgedSolana.ts
 delete mode 100644 packages/mask/src/extension/background-script/EthereumService.ts
 delete mode 100644 packages/mask/src/extension/background-script/EthereumServices/network.ts
 delete mode 100644 packages/mask/src/extension/background-script/EthereumServices/nonce.ts
 delete mode 100644 packages/mask/src/extension/background-script/EthereumServices/provider.ts
 delete mode 100644 packages/mask/src/extension/background-script/EthereumServices/providers/CustomNetwork.ts
 delete mode 100644 packages/mask/src/extension/background-script/EthereumServices/providers/Fortmatic.ts
 delete mode 100644 packages/mask/src/extension/background-script/EthereumServices/providers/Injected.ts
 delete mode 100644 packages/mask/src/extension/background-script/EthereumServices/providers/MaskWallet.ts
 delete mode 100644 packages/mask/src/extension/background-script/EthereumServices/providers/MetaMask.ts
 delete mode 100644 packages/mask/src/extension/background-script/EthereumServices/providers/WalletConnect.ts
 delete mode 100644 packages/mask/src/extension/background-script/EthereumServices/request.ts
 delete mode 100644 packages/mask/src/extension/background-script/EthereumServices/rpc/abi.ts
 delete mode 100644 packages/mask/src/extension/background-script/EthereumServices/rpc/index.ts
 delete mode 100644 packages/mask/src/extension/background-script/EthereumServices/send.ts
 delete mode 100644 packages/mask/src/extension/background-script/EthereumServices/web3.ts
 delete mode 100644 packages/mask/src/extension/popups/pages/Wallet/GasSetting/useGasOptions.ts
 create mode 100644 packages/mask/src/plugins/Avatar/hooks/useCollectibles.ts
 rename packages/mask/src/plugins/Collectible/SNSAdaptor/{ => OpenSea}/ActionBar.tsx (65%)
 rename packages/mask/src/plugins/Collectible/SNSAdaptor/{ => OpenSea}/CheckoutDialog.tsx (79%)
 rename packages/mask/src/plugins/Collectible/SNSAdaptor/{ => OpenSea}/CheckoutOrder.tsx (66%)
 rename packages/mask/src/plugins/Collectible/SNSAdaptor/{ => OpenSea}/ListingByHighestBidCard.tsx (71%)
 rename packages/mask/src/plugins/Collectible/SNSAdaptor/{ => OpenSea}/ListingByPriceCard.tsx (84%)
 rename packages/mask/src/plugins/Collectible/SNSAdaptor/{ => OpenSea}/MakeOfferDialog.tsx (76%)
 rename packages/mask/src/plugins/Collectible/SNSAdaptor/{ => OpenSea}/PostListingDialog.tsx (74%)
 delete mode 100644 packages/mask/src/plugins/Collectible/SNSAdaptor/Pagination.tsx
 delete mode 100644 packages/mask/src/plugins/Collectible/SNSAdaptor/shared.tsx
 delete mode 100644 packages/mask/src/plugins/Collectible/apis/index.ts
 delete mode 100644 packages/mask/src/plugins/Collectible/apis/openseaFromSDK.ts
 create mode 100644 packages/mask/src/plugins/Collectible/hooks/useOpenSea.ts
 delete mode 100644 packages/mask/src/plugins/Collectible/queries/OpenSea.ts
 delete mode 100644 packages/mask/src/plugins/Collectible/types/opensea.ts
 delete mode 100644 packages/mask/src/plugins/Collectible/types/rarible.ts
 delete mode 100644 packages/mask/src/plugins/EVM/UI/Dashboard/index.tsx
 delete mode 100644 packages/mask/src/plugins/EVM/UI/SNSAdaptor/index.tsx
 delete mode 100644 packages/mask/src/plugins/EVM/UI/Web3State/createGetLatestBalance.ts
 delete mode 100644 packages/mask/src/plugins/EVM/UI/Web3State/createNonFungibleToken.ts
 delete mode 100644 packages/mask/src/plugins/EVM/UI/Web3State/getAssetsFn.ts
 delete mode 100644 packages/mask/src/plugins/EVM/UI/Web3State/index.ts
 delete mode 100644 packages/mask/src/plugins/EVM/UI/Web3UI/index.tsx
 delete mode 100644 packages/mask/src/plugins/EVM/UI/components/FortmaticProviderBridge.tsx
 delete mode 100644 packages/mask/src/plugins/EVM/UI/components/InjectedProviderBridge.tsx
 delete mode 100644 packages/mask/src/plugins/EVM/UI/components/NetworkIconClickBait.tsx
 delete mode 100644 packages/mask/src/plugins/EVM/UI/components/ProviderIconClickBait.tsx
 delete mode 100644 packages/mask/src/plugins/EVM/base.ts
 delete mode 100644 packages/mask/src/plugins/EVM/constants.ts
 delete mode 100644 packages/mask/src/plugins/EVM/hooks/index.ts
 delete mode 100644 packages/mask/src/plugins/EVM/hooks/useAsset.ts
 delete mode 100644 packages/mask/src/plugins/EVM/hooks/useBridgedProvider.ts
 delete mode 100644 packages/mask/src/plugins/EVM/hooks/useHistory.ts
 delete mode 100644 packages/mask/src/plugins/EVM/hooks/useInjectedProviderReady.ts
 delete mode 100644 packages/mask/src/plugins/EVM/hooks/useInjectedProviderType.ts
 delete mode 100644 packages/mask/src/plugins/EVM/hooks/useNetwork.ts
 delete mode 100644 packages/mask/src/plugins/EVM/hooks/useOrders.ts
 delete mode 100644 packages/mask/src/plugins/EVM/hooks/useProvider.ts
 delete mode 100644 packages/mask/src/plugins/EVM/services/Asset/index.ts
 delete mode 100644 packages/mask/src/plugins/EVM/services/NFT/index.ts
 delete mode 100644 packages/mask/src/plugins/EVM/services/index.ts
 delete mode 100644 packages/mask/src/plugins/EVM/storage/index.ts
 delete mode 100644 packages/mask/src/plugins/EVM/types/index.ts
 delete mode 100644 packages/mask/src/plugins/EVM/utils/index.ts
 delete mode 100644 packages/mask/src/plugins/EVM/utils/token.ts
 delete mode 100644 packages/mask/src/plugins/ITO/SNSAdaptor/NftAirdropCard.tsx
 delete mode 100644 packages/mask/src/plugins/ITO/SNSAdaptor/hooks/useSpaceStationCampaignInfo.ts
 delete mode 100644 packages/mask/src/plugins/ITO/SNSAdaptor/hooks/useSpaceStationClaimable.ts
 delete mode 100644 packages/mask/src/plugins/ITO/SNSAdaptor/hooks/useSpaceStationClaimableTokenCountCallback.ts
 delete mode 100644 packages/mask/src/plugins/ITO/SNSAdaptor/hooks/useSpaceStationContract.ts
 delete mode 100644 packages/mask/src/plugins/ITO/SNSAdaptor/hooks/useSpaceStationContractClaimCallback.ts
 rename packages/mask/src/plugins/ITO/{Worker/apis => SNSAdaptor/utils}/chain.ts (87%)
 rename packages/mask/src/plugins/ITO/{Worker/apis => SNSAdaptor/utils}/checkAvailability.ts (80%)
 delete mode 100644 packages/mask/src/plugins/ITO/Worker/apis/spaceStationGalaxy.ts
 delete mode 100644 packages/mask/src/plugins/Profile/SNSAdaptor/WalletsPage.tsx
 delete mode 100644 packages/mask/src/plugins/Profile/SNSAdaptor/index.ts
 delete mode 100644 packages/mask/src/plugins/Profile/Worker/index.ts
 delete mode 100644 packages/mask/src/plugins/Profile/base.ts
 delete mode 100644 packages/mask/src/plugins/Profile/constants.ts
 delete mode 100644 packages/mask/src/plugins/Profile/index.ts
 delete mode 100644 packages/mask/src/plugins/Profile/messages.ts
 delete mode 100644 packages/mask/src/plugins/Profile/services.ts
 delete mode 100644 packages/mask/src/plugins/Profile/types.ts
 rename packages/mask/src/plugins/RedPacket/{Worker/apis => SNSAdaptor/utils}/chain.ts (88%)
 rename packages/mask/src/plugins/RedPacket/{Worker/apis => SNSAdaptor/utils}/checkAvailability.ts (75%)
 create mode 100644 packages/mask/src/plugins/Snapshot/utils.ts
 delete mode 100644 packages/mask/src/plugins/Trader/LBP/useLBP.ts
 delete mode 100644 packages/mask/src/plugins/Trader/LBP/usePoolTokenPrices.ts
 delete mode 100644 packages/mask/src/plugins/Trader/LBP/usePoolTokens.ts
 delete mode 100644 packages/mask/src/plugins/Trader/LBP/usePools.ts
 delete mode 100644 packages/mask/src/plugins/Trader/SNSAdaptor/trending/LBPPanel.tsx
 delete mode 100644 packages/mask/src/plugins/Trader/SNSAdaptor/trending/LBPPriceChart.tsx
 delete mode 100644 packages/mask/src/plugins/Trader/apis/LBP/LBP.json
 delete mode 100644 packages/mask/src/plugins/Trader/apis/LBP/index.ts
 create mode 100644 packages/mask/src/plugins/Trader/storage/index.ts
 delete mode 100644 packages/mask/src/plugins/Wallet/SNSAdaptor/RenameWalletDialog.tsx
 delete mode 100644 packages/mask/src/plugins/Wallet/SNSAdaptor/RestoreLegacyWalletDialog/index.tsx
 delete mode 100644 packages/mask/src/plugins/Wallet/SNSAdaptor/SelectWalletDialog.tsx
 delete mode 100644 packages/mask/src/plugins/Wallet/SNSAdaptor/WalletConnectQRCodeDialog/FirefoxPlatform.tsx
 delete mode 100644 packages/mask/src/plugins/Wallet/SNSAdaptor/WalletConnectQRCodeDialog/Icons.tsx
 delete mode 100644 packages/mask/src/plugins/Wallet/SNSAdaptor/WalletConnectQRCodeDialog/QRCodeModel.tsx
 delete mode 100644 packages/mask/src/plugins/Wallet/SNSAdaptor/WalletConnectQRCodeDialog/README.md
 delete mode 100644 packages/mask/src/plugins/Wallet/SNSAdaptor/WalletConnectQRCodeDialog/SafariPlatform.tsx
 delete mode 100644 packages/mask/src/plugins/Wallet/SNSAdaptor/WalletConnectQRCodeDialog/index.tsx
 delete mode 100644 packages/mask/src/plugins/Wallet/SNSAdaptor/WalletStatusDialog/TransactionDescription.tsx
 delete mode 100644 packages/mask/src/plugins/Wallet/SNSAdaptor/WalletStatusDialog/contractMethodDescription/getITO_Description.tsx
 delete mode 100644 packages/mask/src/plugins/Wallet/SNSAdaptor/WalletStatusDialog/contractMethodDescription/getNFTRedpacketDescription.tsx
 delete mode 100644 packages/mask/src/plugins/Wallet/SNSAdaptor/WalletStatusDialog/contractMethodDescription/getRedpacketDescription.tsx
 delete mode 100644 packages/mask/src/plugins/Wallet/SNSAdaptor/WalletStatusDialog/contractMethodDescription/index.ts
 delete mode 100644 packages/mask/src/plugins/Wallet/SNSAdaptor/WalletStatusDialog/type.ts
 delete mode 100644 packages/mask/src/plugins/Wallet/apis/debank.ts
 delete mode 100644 packages/mask/src/plugins/Wallet/apis/ens.ts
 delete mode 100644 packages/mask/src/plugins/Wallet/apis/metaswap.ts
 delete mode 100644 packages/mask/src/plugins/Wallet/apis/nftscan.ts
 delete mode 100644 packages/mask/src/plugins/Wallet/apis/opensea.ts
 delete mode 100644 packages/mask/src/plugins/Wallet/apis/zerion.ts
 delete mode 100644 packages/mask/src/plugins/Wallet/hooks/useClearRecentTransactions.ts
 delete mode 100644 packages/mask/src/plugins/Wallet/hooks/useRecentTransactions.ts
 delete mode 100644 packages/mask/src/plugins/Wallet/hooks/useRemoveRecentTransaction.ts
 delete mode 100644 packages/mask/src/plugins/Wallet/hooks/useTokenPrice.ts
 delete mode 100644 packages/mask/src/plugins/Wallet/hooks/useWalletRiskWarningDialog.ts
 delete mode 100644 packages/mask/src/plugins/Wallet/services/addressBook.ts
 delete mode 100644 packages/mask/src/plugins/Wallet/services/assets.ts
 delete mode 100644 packages/mask/src/plugins/Wallet/services/cloud.ts
 delete mode 100644 packages/mask/src/plugins/Wallet/services/domain.ts
 delete mode 100644 packages/mask/src/plugins/Wallet/services/erc1155.ts
 delete mode 100644 packages/mask/src/plugins/Wallet/services/erc20.ts
 delete mode 100644 packages/mask/src/plugins/Wallet/services/erc721.ts
 delete mode 100644 packages/mask/src/plugins/Wallet/services/estimateGasFee.ts
 delete mode 100644 packages/mask/src/plugins/Wallet/services/gasPrice.ts
 delete mode 100644 packages/mask/src/plugins/Wallet/services/nftscan.ts
 delete mode 100644 packages/mask/src/plugins/Wallet/services/tokenPrice.ts
 delete mode 100644 packages/mask/src/plugins/Wallet/services/transaction/database.ts
 delete mode 100644 packages/mask/src/plugins/Wallet/services/transaction/helpers.ts
 delete mode 100644 packages/mask/src/plugins/Wallet/services/transaction/index.ts
 delete mode 100644 packages/mask/src/plugins/Wallet/services/transaction/progress.ts
 delete mode 100644 packages/mask/src/plugins/Wallet/services/transaction/watcher.ts
 delete mode 100644 packages/mask/src/plugins/Wallet/services/transactions.ts
 delete mode 100644 packages/mask/src/plugins/Wallet/services/wallet/database/token.ts
 delete mode 100644 packages/mask/src/plugins/Wallet/services/wallet/maskwallet/index.ts
 delete mode 100644 packages/mask/src/plugins/Wallet/types/debank.ts
 delete mode 100644 packages/mask/src/plugins/Wallet/types/metaswap.ts
 delete mode 100644 packages/mask/src/plugins/Wallet/types/portfolio.ts
 delete mode 100644 packages/mask/src/plugins/Wallet/types/zerion.ts
 create mode 100644 packages/mask/src/web3/UI/ChainBoundary.tsx
 delete mode 100644 packages/mask/src/web3/UI/EthereumChainBoundary.tsx
 rename packages/mask/src/web3/UI/{EthereumWalletConnectedBoundary.tsx => WalletConnectedBoundary.tsx} (79%)
 delete mode 100644 packages/mask/src/web3/context.ts
 delete mode 100644 packages/mask/web-workers/wallet.ts
 create mode 100644 packages/plugin-infra/src/entry-web3-evm.ts
 delete mode 100644 packages/plugin-infra/src/hooks/useLookupDomain.ts
 delete mode 100644 packages/plugin-infra/src/hooks/useReverseAddress.ts
 create mode 100644 packages/plugin-infra/src/utils/subscription.ts
 create mode 100644 packages/plugin-infra/src/web3-helpers/index.ts
 create mode 100644 packages/plugin-infra/src/web3-state/AddressBook.ts
 create mode 100644 packages/plugin-infra/src/web3-state/Connection.ts
 create mode 100644 packages/plugin-infra/src/web3-state/Hub.ts
 create mode 100644 packages/plugin-infra/src/web3-state/Identity.ts
 create mode 100644 packages/plugin-infra/src/web3-state/NameService.ts
 create mode 100644 packages/plugin-infra/src/web3-state/Others.ts
 create mode 100644 packages/plugin-infra/src/web3-state/Provider.ts
 create mode 100644 packages/plugin-infra/src/web3-state/RiskWarning.ts
 create mode 100644 packages/plugin-infra/src/web3-state/Settings.ts
 create mode 100644 packages/plugin-infra/src/web3-state/Token.ts
 create mode 100644 packages/plugin-infra/src/web3-state/Transaction.ts
 create mode 100644 packages/plugin-infra/src/web3-state/TransactionFormatter.ts
 create mode 100644 packages/plugin-infra/src/web3-state/TransactionWatcher.ts
 create mode 100644 packages/plugin-infra/src/web3-state/Wallet.ts
 create mode 100644 packages/plugin-infra/src/web3-state/index.ts
 create mode 100644 packages/plugin-infra/src/web3/EVM/index.ts
 rename packages/{web3-shared/evm/contracts => plugin-infra/src/web3/EVM}/useBalanceChecker.ts (57%)
 create mode 100644 packages/plugin-infra/src/web3/EVM/useContract.ts
 create mode 100644 packages/plugin-infra/src/web3/EVM/useERC1155TokenContract.ts
 rename packages/{web3-shared/evm/hooks => plugin-infra/src/web3/EVM}/useERC165.ts (63%)
 create mode 100644 packages/plugin-infra/src/web3/EVM/useERC165Contract.ts
 rename packages/{web3-shared/evm/hooks => plugin-infra/src/web3/EVM}/useERC20TokenAllowance.ts (53%)
 rename packages/{web3-shared/evm/hooks => plugin-infra/src/web3/EVM}/useERC20TokenApproveCallback.ts (86%)
 create mode 100644 packages/plugin-infra/src/web3/EVM/useERC20TokenBytes32Contract.ts
 create mode 100644 packages/plugin-infra/src/web3/EVM/useERC20TokenContract.ts
 create mode 100644 packages/plugin-infra/src/web3/EVM/useERC20TokenTotalSupply.ts
 rename packages/{web3-shared/evm/hooks => plugin-infra/src/web3/EVM}/useERC20TokenTransferCallback.ts (75%)
 rename packages/{web3-shared/evm/hooks => plugin-infra/src/web3/EVM}/useERC721ContractIsApproveForAll.ts (65%)
 rename packages/{web3-shared/evm/hooks => plugin-infra/src/web3/EVM}/useERC721ContractSetApproveForAllCallback.ts (75%)
 create mode 100644 packages/plugin-infra/src/web3/EVM/useERC721TokenByIndex.ts
 create mode 100644 packages/plugin-infra/src/web3/EVM/useERC721TokenContract.ts
 create mode 100644 packages/plugin-infra/src/web3/EVM/useERC721TokenContracts.ts
 rename packages/{web3-shared/evm/hooks => plugin-infra/src/web3/EVM}/useERC721TokenTransferCallback.ts (75%)
 create mode 100644 packages/plugin-infra/src/web3/EVM/useGasLimit.ts
 create mode 100644 packages/plugin-infra/src/web3/EVM/useGetPastLogsParams.ts
 rename packages/{web3-shared/evm/hooks => plugin-infra/src/web3/EVM}/useMulticall.ts (92%)
 rename packages/{web3-shared/evm/contracts => plugin-infra/src/web3/EVM}/useMulticallContract.ts (57%)
 rename packages/{web3-shared/evm/hooks => plugin-infra/src/web3/EVM}/useNativeTokenTransferCallback.ts (79%)
 rename packages/{web3-shared/evm/hooks => plugin-infra/src/web3/EVM}/useNativeTokenWrapperCallback.ts (92%)
 create mode 100644 packages/plugin-infra/src/web3/EVM/useNonFungibleOwnerTokens.ts
 create mode 100644 packages/plugin-infra/src/web3/EVM/useReverseLookupContract.ts
 rename packages/{web3-shared/evm/hooks => plugin-infra/src/web3/EVM}/useTokenTransferCallback.ts (69%)
 rename packages/{web3-shared/evm/hooks => plugin-infra/src/web3/EVM}/useTransactionCallback.ts (94%)
 create mode 100644 packages/plugin-infra/src/web3/EVM/useTransactionState.ts
 rename packages/{web3-shared/evm/contracts => plugin-infra/src/web3/EVM}/useWrappedEtherContract.ts (57%)
 create mode 100644 packages/plugin-infra/src/web3/useAddressBook.ts
 create mode 100644 packages/plugin-infra/src/web3/useAddressNames.ts
 delete mode 100644 packages/plugin-infra/src/web3/useAssetType.ts
 create mode 100644 packages/plugin-infra/src/web3/useBlockTimestamp.ts
 create mode 100644 packages/plugin-infra/src/web3/useBlockedFungibleTokens.ts
 create mode 100644 packages/plugin-infra/src/web3/useBlockedNonFungibleTokens.ts
 rename packages/{web3-shared/evm/hooks => plugin-infra/src/web3}/useBlockie.ts (100%)
 create mode 100644 packages/plugin-infra/src/web3/useChainDescriptor.ts
 delete mode 100644 packages/plugin-infra/src/web3/useChainDetailed.ts
 create mode 100644 packages/plugin-infra/src/web3/useChainIdMainnet.ts
 create mode 100644 packages/plugin-infra/src/web3/useChainIdMatched.ts
 create mode 100644 packages/plugin-infra/src/web3/useChainIdSupport.ts
 create mode 100644 packages/plugin-infra/src/web3/useClearTransactionsCallback.ts
 delete mode 100644 packages/plugin-infra/src/web3/useCollectibleType.ts
 create mode 100644 packages/plugin-infra/src/web3/useDefaultChainId.ts
 create mode 100644 packages/plugin-infra/src/web3/useDefaultNetworkType.ts
 create mode 100644 packages/plugin-infra/src/web3/useFungibleAsset.ts
 create mode 100644 packages/plugin-infra/src/web3/useFungibleAssetSourceType.ts
 create mode 100644 packages/plugin-infra/src/web3/useFungibleAssets.ts
 create mode 100644 packages/plugin-infra/src/web3/useFungibleToken.ts
 create mode 100644 packages/plugin-infra/src/web3/useFungibleTokenBalance.ts
 create mode 100644 packages/plugin-infra/src/web3/useFungibleTokenPrice.ts
 create mode 100644 packages/plugin-infra/src/web3/useFungibleTokenWatched.ts
 create mode 100644 packages/plugin-infra/src/web3/useFungibleTokens.ts
 create mode 100644 packages/plugin-infra/src/web3/useFungibleTokensBalance.ts
 create mode 100644 packages/plugin-infra/src/web3/useFungibleTokensFromTokenList.ts
 create mode 100644 packages/plugin-infra/src/web3/useGasOptionType.ts
 create mode 100644 packages/plugin-infra/src/web3/useGasOptions.ts
 create mode 100644 packages/plugin-infra/src/web3/useGasPrice.ts
 rename packages/{web3-shared/evm/hooks => plugin-infra/src/web3}/useImageChecker.ts (100%)
 create mode 100644 packages/plugin-infra/src/web3/useLookupAddress.ts
 delete mode 100644 packages/plugin-infra/src/web3/useNameType.ts
 create mode 100644 packages/plugin-infra/src/web3/useNativeToken.ts
 create mode 100644 packages/plugin-infra/src/web3/useNativeTokenAddress.ts
 create mode 100644 packages/plugin-infra/src/web3/useNativeTokenBalance.ts
 create mode 100644 packages/plugin-infra/src/web3/useNativeTokenPrice.ts
 create mode 100644 packages/plugin-infra/src/web3/useNonFungibleAsset.ts
 create mode 100644 packages/plugin-infra/src/web3/useNonFungibleAssetSourceType.ts
 create mode 100644 packages/plugin-infra/src/web3/useNonFungibleAssets.ts
 create mode 100644 packages/plugin-infra/src/web3/useNonFungibleCollections.ts
 create mode 100644 packages/plugin-infra/src/web3/useNonFungibleToken.ts
 create mode 100644 packages/plugin-infra/src/web3/useNonFungibleTokenBalance.ts
 create mode 100644 packages/plugin-infra/src/web3/useNonFungibleTokenContract.ts
 create mode 100644 packages/plugin-infra/src/web3/useNonFungibleTokenPrice.ts
 create mode 100644 packages/plugin-infra/src/web3/useNonFungibleTokens.ts
 create mode 100644 packages/plugin-infra/src/web3/useNonFungibleTokensBalance.ts
 create mode 100644 packages/plugin-infra/src/web3/useNonFungibleTokensFromTokenList.ts
 create mode 100644 packages/plugin-infra/src/web3/useProviderReady.ts
 create mode 100644 packages/plugin-infra/src/web3/useRecentTransactions.ts
 create mode 100644 packages/plugin-infra/src/web3/useRemoveTransaction.ts
 create mode 100644 packages/plugin-infra/src/web3/useReverseAddress.ts
 create mode 100644 packages/plugin-infra/src/web3/useRiskWarningApproved.ts
 create mode 100644 packages/plugin-infra/src/web3/useSchemaType.ts
 rename packages/{web3-shared/evm/hooks => plugin-infra/src/web3}/useSocketOnce.ts (100%)
 delete mode 100644 packages/plugin-infra/src/web3/useTokenPrice.ts
 delete mode 100644 packages/plugin-infra/src/web3/useTransactionType.ts
 create mode 100644 packages/plugin-infra/src/web3/useTransactions.ts
 create mode 100644 packages/plugin-infra/src/web3/useTrustedFungibleTokens.ts
 create mode 100644 packages/plugin-infra/src/web3/useTrustedNonFungibleTokens.ts
 create mode 100644 packages/plugin-infra/src/web3/useWeb3.ts
 create mode 100644 packages/plugin-infra/src/web3/useWeb3Connection.ts
 create mode 100644 packages/plugin-infra/src/web3/useWeb3Hub.ts
 create mode 100644 packages/plugin-infra/src/web3/useWeb3Provider.ts
 create mode 100644 packages/plugin-infra/src/web3/useZeroAddress.ts
 create mode 100644 packages/plugins/EVM/package.json
 create mode 100644 packages/plugins/EVM/src/UI/Dashboard/index.tsx
 create mode 100644 packages/plugins/EVM/src/UI/SNSAdaptor/index.tsx
 rename packages/{mask/src/plugins/EVM => plugins/EVM/src}/Worker/index.ts (100%)
 create mode 100644 packages/plugins/EVM/src/assets/nft.png
 create mode 100644 packages/plugins/EVM/src/base.ts
 create mode 100644 packages/plugins/EVM/src/constants/index.ts
 create mode 100644 packages/plugins/EVM/src/env.d.ts
 create mode 100644 packages/plugins/EVM/src/hooks/index.ts
 create mode 100644 packages/plugins/EVM/src/hooks/useProviderReady.ts
 rename packages/{mask/src/plugins/EVM => plugins/EVM/src}/index.ts (58%)
 create mode 100644 packages/plugins/EVM/src/locales/en-US.json
 create mode 100644 packages/plugins/EVM/src/locales/index.ts
 create mode 100644 packages/plugins/EVM/src/locales/languages.ts
 rename packages/{mask/src/plugins/EVM => plugins/EVM/src}/messages.ts (57%)
 rename packages/{mask/src/plugins/EVM/types.ts => plugins/EVM/src/services.ts} (100%)
 create mode 100644 packages/plugins/EVM/src/settings/index.ts
 create mode 100644 packages/plugins/EVM/src/state/AddressBook.ts
 create mode 100644 packages/plugins/EVM/src/state/Connection.ts
 create mode 100644 packages/plugins/EVM/src/state/Connection/composer.ts
 create mode 100644 packages/plugins/EVM/src/state/Connection/connection.ts
 rename packages/{mask/src/extension/background-script/EthereumServices => plugins/EVM/src/state/Connection}/error.ts (83%)
 create mode 100644 packages/plugins/EVM/src/state/Connection/interceptors/MaskWallet.ts
 create mode 100644 packages/plugins/EVM/src/state/Connection/interceptors/MetaMask.ts
 create mode 100644 packages/plugins/EVM/src/state/Connection/interceptors/WalletConnect.ts
 create mode 100644 packages/plugins/EVM/src/state/Connection/middleware/AddressBook.ts
 create mode 100644 packages/plugins/EVM/src/state/Connection/middleware/Interceptor.ts
 create mode 100644 packages/plugins/EVM/src/state/Connection/middleware/Nonce.ts
 create mode 100644 packages/plugins/EVM/src/state/Connection/middleware/Popup.ts
 create mode 100644 packages/plugins/EVM/src/state/Connection/middleware/Squash.ts
 create mode 100644 packages/plugins/EVM/src/state/Connection/middleware/Transaction.ts
 create mode 100644 packages/plugins/EVM/src/state/Connection/middleware/Translator.ts
 create mode 100644 packages/plugins/EVM/src/state/Connection/provider.ts
 create mode 100644 packages/plugins/EVM/src/state/Connection/providers/Base.ts
 create mode 100644 packages/plugins/EVM/src/state/Connection/providers/BaseInjected.ts
 create mode 100644 packages/plugins/EVM/src/state/Connection/providers/Coin98.ts
 create mode 100644 packages/plugins/EVM/src/state/Connection/providers/CustomNetwork.ts
 create mode 100644 packages/plugins/EVM/src/state/Connection/providers/Fortmatic.ts
 create mode 100644 packages/plugins/EVM/src/state/Connection/providers/MaskWallet.ts
 create mode 100644 packages/plugins/EVM/src/state/Connection/providers/MathWallet.ts
 create mode 100644 packages/plugins/EVM/src/state/Connection/providers/MetaMask.ts
 create mode 100644 packages/plugins/EVM/src/state/Connection/providers/Torus.ts
 create mode 100644 packages/plugins/EVM/src/state/Connection/providers/WalletConnect.ts
 create mode 100644 packages/plugins/EVM/src/state/Connection/providers/WalletLink.ts
 create mode 100644 packages/plugins/EVM/src/state/Connection/translators/Base.ts
 create mode 100644 packages/plugins/EVM/src/state/Connection/translators/Celo.ts
 create mode 100644 packages/plugins/EVM/src/state/Connection/translators/Optimistic.ts
 create mode 100644 packages/plugins/EVM/src/state/Connection/translators/Polygon.ts
 create mode 100644 packages/plugins/EVM/src/state/Connection/types.ts
 create mode 100644 packages/plugins/EVM/src/state/Connection/utils.ts
 create mode 100644 packages/plugins/EVM/src/state/Hub.ts
 create mode 100644 packages/plugins/EVM/src/state/Hub/TokenIconSpecialIconList.json
 create mode 100644 packages/plugins/EVM/src/state/Hub/hub.ts
 create mode 100644 packages/plugins/EVM/src/state/Hub/types.ts
 create mode 100644 packages/plugins/EVM/src/state/IdentityService.ts
 create mode 100644 packages/plugins/EVM/src/state/NameService.ts
 create mode 100644 packages/plugins/EVM/src/state/Others.ts
 create mode 100644 packages/plugins/EVM/src/state/Provider.ts
 create mode 100644 packages/plugins/EVM/src/state/RiskWarning.ts
 create mode 100644 packages/plugins/EVM/src/state/Settings.ts
 create mode 100644 packages/plugins/EVM/src/state/Token.ts
 create mode 100644 packages/plugins/EVM/src/state/Transaction.ts
 create mode 100644 packages/plugins/EVM/src/state/TransactionFormatter.ts
 create mode 100644 packages/plugins/EVM/src/state/TransactionFormatter/abi.ts
 create mode 100644 packages/plugins/EVM/src/state/TransactionFormatter/descriptors/Base.ts
 create mode 100644 packages/plugins/EVM/src/state/TransactionFormatter/descriptors/Cancel.ts
 create mode 100644 packages/plugins/EVM/src/state/TransactionFormatter/descriptors/ContractDeployment.ts
 create mode 100644 packages/plugins/EVM/src/state/TransactionFormatter/descriptors/ERC20.ts
 create mode 100644 packages/plugins/EVM/src/state/TransactionFormatter/descriptors/ITO.ts
 create mode 100644 packages/plugins/EVM/src/state/TransactionFormatter/descriptors/RedPacket.ts
 create mode 100644 packages/plugins/EVM/src/state/TransactionFormatter/descriptors/TransferToken.ts
 create mode 100644 packages/plugins/EVM/src/state/TransactionFormatter/descriptors/Uniswap.ts
 create mode 100644 packages/plugins/EVM/src/state/TransactionFormatter/types.ts
 create mode 100644 packages/plugins/EVM/src/state/TransactionFormatter/utils.ts
 create mode 100644 packages/plugins/EVM/src/state/TransactionWatcher.ts
 create mode 100644 packages/plugins/EVM/src/state/TransactionWatcher/checker.ts
 create mode 100644 packages/plugins/EVM/src/state/TransactionWatcher/checkers/AccountChecker.ts
 create mode 100644 packages/plugins/EVM/src/state/TransactionWatcher/checkers/ReceiptChecker.ts
 create mode 100644 packages/plugins/EVM/src/state/Wallet.ts
 create mode 100644 packages/plugins/EVM/src/state/index.ts
 create mode 100644 packages/plugins/EVM/src/types/index.ts
 create mode 100644 packages/plugins/EVM/tsconfig.json
 delete mode 100644 packages/plugins/Flow/src/UI/Web3State/index.ts
 delete mode 100644 packages/plugins/Flow/src/UI/Web3UI/index.tsx
 delete mode 100644 packages/plugins/Flow/src/UI/components/ProviderIconClickBait.tsx
 rename packages/plugins/Flow/src/apis/{getFungibleAssets.ts => fungibleAssets.ts} (65%)
 create mode 100644 packages/plugins/Flow/src/settings/index.ts
 create mode 100644 packages/plugins/Flow/src/state/AddressBook.ts
 create mode 100644 packages/plugins/Flow/src/state/Connection.ts
 create mode 100644 packages/plugins/Flow/src/state/Connection/connection.ts
 create mode 100644 packages/plugins/Flow/src/state/Connection/provider.ts
 create mode 100644 packages/plugins/Flow/src/state/Connection/providers/Base.ts
 create mode 100644 packages/plugins/Flow/src/state/Connection/providers/Blocto.ts
 create mode 100644 packages/plugins/Flow/src/state/Connection/providers/Dapper.ts
 create mode 100644 packages/plugins/Flow/src/state/Connection/providers/Ledger.ts
 create mode 100644 packages/plugins/Flow/src/state/Connection/types.ts
 create mode 100644 packages/plugins/Flow/src/state/Hub.ts
 create mode 100644 packages/plugins/Flow/src/state/Hub/hub.ts
 create mode 100644 packages/plugins/Flow/src/state/Hub/types.ts
 create mode 100644 packages/plugins/Flow/src/state/Others.ts
 create mode 100644 packages/plugins/Flow/src/state/Provider.ts
 create mode 100644 packages/plugins/Flow/src/state/Settings.ts
 create mode 100644 packages/plugins/Flow/src/state/Transaction.ts
 create mode 100644 packages/plugins/Flow/src/state/Wallet.ts
 create mode 100644 packages/plugins/Flow/src/state/index.ts
 delete mode 100644 packages/plugins/Flow/src/storage/index.ts
 delete mode 100644 packages/plugins/Flow/src/types.ts
 delete mode 100644 packages/plugins/Solana/src/UI/Web3State/index.ts
 delete mode 100644 packages/plugins/Solana/src/UI/Web3UI/index.tsx
 create mode 100644 packages/plugins/Solana/src/assets/torus.png
 create mode 100644 packages/plugins/Solana/src/env.d.ts
 delete mode 100644 packages/plugins/Solana/src/helpers/formatter.ts
 create mode 100644 packages/plugins/Solana/src/settings/index.ts
 create mode 100644 packages/plugins/Solana/src/state/AddressBook.ts
 create mode 100644 packages/plugins/Solana/src/state/Connection.ts
 create mode 100644 packages/plugins/Solana/src/state/Connection/connection.ts
 create mode 100644 packages/plugins/Solana/src/state/Connection/provider.ts
 create mode 100644 packages/plugins/Solana/src/state/Connection/providers/Base.ts
 create mode 100644 packages/plugins/Solana/src/state/Connection/providers/BaseInjected.ts
 create mode 100644 packages/plugins/Solana/src/state/Connection/providers/Coin98.ts
 create mode 100644 packages/plugins/Solana/src/state/Connection/providers/Phantom.ts
 create mode 100644 packages/plugins/Solana/src/state/Connection/providers/SolflareProvider.ts
 create mode 100644 packages/plugins/Solana/src/state/Connection/providers/Sollet.ts
 create mode 100644 packages/plugins/Solana/src/state/Connection/types.ts
 create mode 100644 packages/plugins/Solana/src/state/Hub.ts
 create mode 100644 packages/plugins/Solana/src/state/Hub/hub.ts
 create mode 100644 packages/plugins/Solana/src/state/Hub/types.ts
 create mode 100644 packages/plugins/Solana/src/state/Others.ts
 create mode 100644 packages/plugins/Solana/src/state/Provider.ts
 create mode 100644 packages/plugins/Solana/src/state/Settings.ts
 create mode 100644 packages/plugins/Solana/src/state/Token.ts
 create mode 100644 packages/plugins/Solana/src/state/Transaction.ts
 create mode 100644 packages/plugins/Solana/src/state/Wallet.ts
 create mode 100644 packages/plugins/Solana/src/state/index.ts
 delete mode 100644 packages/plugins/Solana/src/storage/index.ts
 delete mode 100644 packages/plugins/Solana/src/types.ts
 delete mode 100644 packages/plugins/Solana/src/utils.ts
 create mode 100644 packages/plugins/Solana/src/utils/index.ts
 delete mode 100644 packages/plugins/Solana/src/wallet/connect.ts
 delete mode 100644 packages/plugins/Solana/src/wallet/index.ts
 create mode 100644 packages/shared-base/src/Site/index.ts
 rename packages/{mask/utils-pure/OnDemandWorker => shared-base/src/onDemandWorker}/index.ts (100%)
 create mode 100644 packages/shared-base/src/utils/asyncIterator.ts
 create mode 100644 packages/shared-base/src/utils/createValueRefWithReady.ts
 delete mode 100644 packages/shared/src/UI/components/ERC20TokenList/index.tsx
 rename packages/shared/src/UI/components/{ERC20TokenList/ERC20TokenListItem.tsx => FungibleTokenList/FungibleTokenItem.tsx} (62%)
 create mode 100644 packages/shared/src/UI/components/FungibleTokenList/index.tsx
 create mode 100644 packages/shared/src/hooks/useImageFailOver.ts
 create mode 100644 packages/shared/src/utils/index.ts
 delete mode 100644 packages/web3-constants/evm/lbp.json
 create mode 100644 packages/web3-constants/flow/chain.json
 create mode 100644 packages/web3-constants/solana/chain.json
 create mode 100644 packages/web3-contracts/abis/ERC165.json
 create mode 100644 packages/web3-contracts/types/ERC165.d.ts
 delete mode 100644 packages/web3-providers/src/coingecko/constants.ts
 delete mode 100644 packages/web3-providers/src/hooks/index.ts
 delete mode 100644 packages/web3-providers/src/hooks/useERC721TokenDetailedOwnerList.ts
 create mode 100644 packages/web3-providers/src/mask/index.ts
 create mode 100644 packages/web3-providers/src/mask/prepare.ts
 create mode 100644 packages/web3-providers/src/mask/worker.ts
 create mode 100644 packages/web3-providers/src/metaswap/index.ts
 create mode 100644 packages/web3-providers/src/metaswap/types.ts
 create mode 100644 packages/web3-providers/src/risk-warning/index.ts
 delete mode 100644 packages/web3-providers/src/token-price/index.ts
 delete mode 100644 packages/web3-shared/base/src/helpers/index.ts
 delete mode 100644 packages/web3-shared/base/src/helpers/lookupTable.ts
 delete mode 100644 packages/web3-shared/base/src/helpers/types.ts
 delete mode 100644 packages/web3-shared/base/src/hooks/index.ts
 delete mode 100644 packages/web3-shared/base/src/hooks/useBeat.ts
 create mode 100644 packages/web3-shared/base/src/specs/index.ts
 create mode 100644 packages/web3-shared/base/src/utils/address.ts
 create mode 100644 packages/web3-shared/base/src/utils/balance.ts
 rename packages/web3-shared/base/src/{helpers/constants.ts => utils/constant.ts} (70%)
 create mode 100644 packages/web3-shared/base/src/utils/currency.ts
 create mode 100644 packages/web3-shared/base/src/utils/pagination.ts
 create mode 100644 packages/web3-shared/base/src/utils/predicate.ts
 create mode 100644 packages/web3-shared/base/src/utils/resolver.ts
 create mode 100644 packages/web3-shared/base/src/utils/token.ts
 create mode 100644 packages/web3-shared/base/src/utils/types.ts
 rename packages/{mask/src/plugins/EVM => web3-shared/evm}/assets/arbitrum.png (100%)
 rename packages/{mask/src/plugins/EVM => web3-shared/evm}/assets/aurora.png (100%)
 rename packages/{mask/src/plugins/EVM => web3-shared/evm}/assets/avalanche.png (100%)
 rename packages/{mask/src/plugins/EVM => web3-shared/evm}/assets/binance.png (100%)
 rename packages/{mask/src/plugins/EVM => web3-shared/evm}/assets/celo.png (100%)
 rename packages/{mask/src/plugins/EVM => web3-shared/evm}/assets/coin98.png (100%)
 rename packages/{mask/src/plugins/EVM => web3-shared/evm}/assets/coinbase.png (100%)
 rename packages/{mask/src/plugins/EVM => web3-shared/evm}/assets/conflux.png (100%)
 rename packages/{mask/src/plugins/EVM => web3-shared/evm}/assets/ethereum.png (100%)
 rename packages/{mask/src/plugins/EVM => web3-shared/evm}/assets/fantom.png (100%)
 rename packages/{mask/src/plugins/EVM => web3-shared/evm}/assets/fortmatic.png (100%)
 rename packages/{mask/src/plugins/EVM => web3-shared/evm}/assets/harmony.png (100%)
 rename packages/{mask/src/plugins/EVM => web3-shared/evm}/assets/lucky_drop.png (100%)
 rename packages/{mask/src/plugins/EVM => web3-shared/evm}/assets/maskwallet.png (100%)
 rename packages/{mask/src/plugins/EVM => web3-shared/evm}/assets/mathwallet.png (100%)
 rename packages/{mask/src/plugins/EVM => web3-shared/evm}/assets/metamask.png (100%)
 rename packages/{mask/src/plugins/EVM => web3-shared/evm}/assets/nfts.png (100%)
 rename packages/{mask/src/plugins/EVM => web3-shared/evm}/assets/polygon.png (100%)
 create mode 100644 packages/web3-shared/evm/assets/torus.png
 rename packages/{mask/src/plugins/EVM => web3-shared/evm}/assets/walletconnect.png (100%)
 rename packages/{mask/src/plugins/EVM => web3-shared/evm}/assets/xdai.png (100%)
 delete mode 100644 packages/web3-shared/evm/constants/README.md
 rename packages/web3-shared/evm/{assets => constants}/chains.json (66%)
 create mode 100644 packages/web3-shared/evm/constants/descriptors.ts
 delete mode 100644 packages/web3-shared/evm/constants/utils.ts
 delete mode 100644 packages/web3-shared/evm/context/index.tsx
 delete mode 100644 packages/web3-shared/evm/context/type.ts
 delete mode 100644 packages/web3-shared/evm/contracts/index.ts
 delete mode 100644 packages/web3-shared/evm/contracts/useERC1155TokenContract.ts
 delete mode 100644 packages/web3-shared/evm/contracts/useERC20TokenBytes32Contract.ts
 delete mode 100644 packages/web3-shared/evm/contracts/useERC20TokenContract.ts
 delete mode 100644 packages/web3-shared/evm/contracts/useERC721TokenContract.ts
 delete mode 100644 packages/web3-shared/evm/contracts/useERC721TokenContracts.ts
 delete mode 100644 packages/web3-shared/evm/contracts/useReverseLookupContract.ts
 delete mode 100644 packages/web3-shared/evm/hooks/index.ts
 delete mode 100644 packages/web3-shared/evm/hooks/useAccount.ts
 delete mode 100644 packages/web3-shared/evm/hooks/useAddERC20TokenCallback.ts
 delete mode 100644 packages/web3-shared/evm/hooks/useAddressNames.ts
 delete mode 100644 packages/web3-shared/evm/hooks/useAllowTestnet.ts
 delete mode 100644 packages/web3-shared/evm/hooks/useAssets.ts
 delete mode 100644 packages/web3-shared/evm/hooks/useAssetsByTokenList.ts
 delete mode 100644 packages/web3-shared/evm/hooks/useAssetsFromChain.ts
 delete mode 100644 packages/web3-shared/evm/hooks/useAssetsFromProvider.ts
 delete mode 100644 packages/web3-shared/evm/hooks/useAssetsMerged.ts
 delete mode 100644 packages/web3-shared/evm/hooks/useBalance.ts
 delete mode 100644 packages/web3-shared/evm/hooks/useBlockNumber.ts
 delete mode 100644 packages/web3-shared/evm/hooks/useChainColor.ts
 delete mode 100644 packages/web3-shared/evm/hooks/useChainDetailed.ts
 delete mode 100644 packages/web3-shared/evm/hooks/useChainEIP1159Supported.ts
 delete mode 100644 packages/web3-shared/evm/hooks/useChainId.ts
 delete mode 100644 packages/web3-shared/evm/hooks/useChainIdValid.ts
 delete mode 100644 packages/web3-shared/evm/hooks/useCollectibles.ts
 delete mode 100644 packages/web3-shared/evm/hooks/useContract.ts
 delete mode 100644 packages/web3-shared/evm/hooks/useCurrentBlockTimestamp.ts
 delete mode 100644 packages/web3-shared/evm/hooks/useENSLabel.ts
 delete mode 100644 packages/web3-shared/evm/hooks/useERC1155TokenAssetDetailed.ts
 delete mode 100644 packages/web3-shared/evm/hooks/useERC20TokenBalance.ts
 delete mode 100644 packages/web3-shared/evm/hooks/useERC20TokenDetailed.ts
 delete mode 100644 packages/web3-shared/evm/hooks/useERC20TokenDetailedFromTokenLists.ts
 delete mode 100644 packages/web3-shared/evm/hooks/useERC20TokenTotalSupply.ts
 delete mode 100644 packages/web3-shared/evm/hooks/useERC20Tokens.ts
 delete mode 100644 packages/web3-shared/evm/hooks/useERC20TokensDetailedFromTokenLists.ts
 delete mode 100644 packages/web3-shared/evm/hooks/useERC721ContractBalance.ts
 delete mode 100644 packages/web3-shared/evm/hooks/useERC721ContractDetailed.ts
 delete mode 100644 packages/web3-shared/evm/hooks/useERC721TokenByIndex.ts
 delete mode 100644 packages/web3-shared/evm/hooks/useERC721TokenDetailed.ts
 delete mode 100644 packages/web3-shared/evm/hooks/useERC721TokenDetailedCallback.ts
 delete mode 100644 packages/web3-shared/evm/hooks/useERC721Tokens.ts
 delete mode 100644 packages/web3-shared/evm/hooks/useEthereumTokenType.ts
 delete mode 100644 packages/web3-shared/evm/hooks/useFungibleTokenBalance.ts
 delete mode 100644 packages/web3-shared/evm/hooks/useFungibleTokenDetailed.ts
 delete mode 100644 packages/web3-shared/evm/hooks/useFungibleTokenWatched.tsx
 delete mode 100644 packages/web3-shared/evm/hooks/useGasLimit.ts
 delete mode 100644 packages/web3-shared/evm/hooks/useGasPrice.ts
 delete mode 100644 packages/web3-shared/evm/hooks/useGetPastLogsParams.ts
 delete mode 100644 packages/web3-shared/evm/hooks/useNativeTokenBalance.ts
 delete mode 100644 packages/web3-shared/evm/hooks/useNativeTokenDetailed.ts
 delete mode 100644 packages/web3-shared/evm/hooks/useNetworkType.ts
 delete mode 100644 packages/web3-shared/evm/hooks/useProviderType.ts
 delete mode 100644 packages/web3-shared/evm/hooks/useResolveENS.ts
 delete mode 100644 packages/web3-shared/evm/hooks/useSocket.ts
 delete mode 100644 packages/web3-shared/evm/hooks/useTokensBalance.ts
 delete mode 100644 packages/web3-shared/evm/hooks/useTransactionState.ts
 delete mode 100644 packages/web3-shared/evm/hooks/useTransactions.ts
 delete mode 100644 packages/web3-shared/evm/hooks/useTrustERC20TokenCallback.ts
 delete mode 100644 packages/web3-shared/evm/hooks/useTrustedERC20Tokens.ts
 delete mode 100644 packages/web3-shared/evm/hooks/useWallet.ts
 delete mode 100644 packages/web3-shared/evm/hooks/useWalletPrimary.ts
 delete mode 100644 packages/web3-shared/evm/hooks/useWallets.ts
 delete mode 100644 packages/web3-shared/evm/hooks/useWeb3.ts
 delete mode 100644 packages/web3-shared/evm/hooks/useWeb3Provider.ts
 delete mode 100644 packages/web3-shared/evm/providers/Fortmatic.ts
 create mode 100644 packages/web3-shared/evm/utils/abi.ts
 create mode 100644 packages/web3-shared/evm/utils/chain.ts
 delete mode 100644 packages/web3-shared/evm/utils/chainDetailed.ts
 create mode 100644 packages/web3-shared/evm/utils/contract.ts
 delete mode 100644 packages/web3-shared/evm/utils/enum.ts
 delete mode 100644 packages/web3-shared/evm/utils/misc.ts
 create mode 100644 packages/web3-shared/evm/utils/resolver.ts
 create mode 100644 packages/web3-shared/flow/assets/FUSD.png
 create mode 100644 packages/web3-shared/flow/assets/blocto.png
 create mode 100644 packages/web3-shared/flow/assets/flow.png
 create mode 100644 packages/web3-shared/flow/assets/tUSD.png
 create mode 100644 packages/web3-shared/flow/constants/constants.ts
 create mode 100644 packages/web3-shared/flow/constants/descriptors.ts
 create mode 100644 packages/web3-shared/flow/constants/primitives.ts
 delete mode 100644 packages/web3-shared/flow/pipes/index.ts
 create mode 100644 packages/web3-shared/flow/utils/address.ts
 create mode 100644 packages/web3-shared/flow/utils/domain.ts
 create mode 100644 packages/web3-shared/flow/utils/index.ts
 create mode 100644 packages/web3-shared/flow/utils/resolver.ts
 create mode 100644 packages/web3-shared/solana/assets/coin98.png
 create mode 100644 packages/web3-shared/solana/assets/phantom.png
 create mode 100644 packages/web3-shared/solana/assets/solana.png
 create mode 100644 packages/web3-shared/solana/assets/solflare.png
 create mode 100644 packages/web3-shared/solana/assets/sollet.png
 create mode 100644 packages/web3-shared/solana/assets/usdc.png
 create mode 100644 packages/web3-shared/solana/coin98.png
 create mode 100644 packages/web3-shared/solana/constants/constants.ts
 create mode 100644 packages/web3-shared/solana/constants/descriptors.ts
 create mode 100644 packages/web3-shared/solana/constants/primitives.ts
 delete mode 100644 packages/web3-shared/solana/pipes/index.ts
 create mode 100644 packages/web3-shared/solana/utils/address.ts
 create mode 100644 packages/web3-shared/solana/utils/domain.ts
 create mode 100644 packages/web3-shared/solana/utils/index.ts
 create mode 100644 packages/web3-shared/solana/utils/resolver.ts

diff --git a/.i18n-codegen.json b/.i18n-codegen.json
index 48fd89fd6a66..831ba5bd6430 100644
--- a/.i18n-codegen.json
+++ b/.i18n-codegen.json
@@ -145,6 +145,17 @@
                 "trans": "Translate"
             }
         },
+        {
+            "input": "./packages/plugins/EVM/src/locales/en-US.json",
+            "output": "./packages/plugins/EVM/src/locales/i18n_generated",
+            "parser": { "type": "i18next", "contextSeparator": "$", "pluralSeparator": "_" },
+            "generator": {
+                "type": "i18next/react-hooks",
+                "hooks": "useI18N",
+                "namespace": "com.mask.evm",
+                "trans": "Translate"
+            }
+        },
         {
             "input": "./packages/plugins/Solana/src/locales/en-US.json",
             "output": "./packages/plugins/Solana/src/locales/i18n_generated",
diff --git a/.prettierignore b/.prettierignore
index b3703149f7e7..0f8cab04ff43 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -168,3 +168,7 @@ common/autoinstallers/*/.npmrc
 packages/storybook-shared/*.js
 packages/storybook-shared/*.map
 packages/storybook-shared/*.d.ts
+
+# Requires Prettier support for typescript 4.7
+# https://github.com/prettier/prettier/issues/12640
+packages/web3-shared/base/src/specs/index.ts
diff --git a/cspell.json b/cspell.json
index 4dbe240d7ac5..91230b4de721 100644
--- a/cspell.json
+++ b/cspell.json
@@ -141,6 +141,7 @@
         "pressable",
         "promi",
         "proxied",
+        "portto",
         "pushstate",
         "pvtsutils",
         "qrcode",
@@ -170,6 +171,7 @@
         "subrepo",
         "sushiswap",
         "swappable",
+        "solflare",
         "testid",
         "thegraph",
         "timelock",
@@ -185,6 +187,7 @@
         "typechain",
         "typehash",
         "typeson",
+        "toruslabs",
         "unencrypted",
         "unreviewed",
         "unstake",
diff --git a/package.json b/package.json
index 627d5fa00fad..634ec7a4ab43 100644
--- a/package.json
+++ b/package.json
@@ -28,7 +28,7 @@
     "spellcheck": "cspell lint --no-must-find-files"
   },
   "dependencies": {
-    "@dimensiondev/kit": "0.0.0-20220228054820-f2378be",
+    "@dimensiondev/kit": "0.0.0-20220501022859-60d5533",
     "@emotion/cache": "^11.7.1",
     "@emotion/react": "^11.9.0",
     "@emotion/serialize": "^1.0.3",
diff --git a/packages/dashboard/package.json b/packages/dashboard/package.json
index d2d156cf0f55..b14d4407dc72 100644
--- a/packages/dashboard/package.json
+++ b/packages/dashboard/package.json
@@ -19,6 +19,7 @@
     "@masknet/backup-format": "workspace:*",
     "@masknet/icons": "workspace:*",
     "@masknet/plugin-example": "workspace:*",
+    "@masknet/plugin-evm": "workspace:*",
     "@masknet/plugin-flow": "workspace:*",
     "@masknet/plugin-infra": "workspace:*",
     "@masknet/plugin-solana": "workspace:*",
@@ -32,6 +33,8 @@
     "@masknet/web3-providers": "workspace:*",
     "@masknet/web3-shared-base": "workspace:*",
     "@masknet/web3-shared-evm": "workspace:*",
+    "@masknet/web3-shared-solana": "workspace:*",
+    "@masknet/web3-shared-flow": "workspace:*",
     "@msgpack/msgpack": "^2.7.2",
     "@servie/events": "^3.0.0",
     "@types/color": "^3.0.3",
diff --git a/packages/dashboard/src/components/DashboardFrame/Navigation.tsx b/packages/dashboard/src/components/DashboardFrame/Navigation.tsx
index e6c47ef72ec6..00e45b050a9b 100644
--- a/packages/dashboard/src/components/DashboardFrame/Navigation.tsx
+++ b/packages/dashboard/src/components/DashboardFrame/Navigation.tsx
@@ -30,7 +30,8 @@ import {
 import { useDashboardI18N } from '../../locales'
 import { MaskColorVar } from '@masknet/theme'
 import { DashboardRoutes } from '@masknet/shared-base'
-import { NetworkPluginID, useCurrentWeb3NetworkPluginID } from '@masknet/plugin-infra/web3'
+import { NetworkPluginID } from '@masknet/web3-shared-base'
+import { useCurrentWeb3NetworkPluginID } from '@masknet/plugin-infra/web3'
 
 const ListItemLinkUnStyled = ({ to, ...props }: ListItemProps & { to: string }) => {
     const navigate = useNavigate()
diff --git a/packages/dashboard/src/components/PageFrame/FeaturePromotions/index.tsx b/packages/dashboard/src/components/PageFrame/FeaturePromotions/index.tsx
index a2533c89433e..7d44196acfe0 100644
--- a/packages/dashboard/src/components/PageFrame/FeaturePromotions/index.tsx
+++ b/packages/dashboard/src/components/PageFrame/FeaturePromotions/index.tsx
@@ -1,9 +1,10 @@
 import { memo, useCallback, useMemo } from 'react'
 import { useNavigate } from 'react-router-dom'
 import { makeStyles } from '@masknet/theme'
-import { openWindow, useRemoteControlledDialog } from '@masknet/shared-base-ui'
-import { useAccount } from '@masknet/web3-shared-evm'
-import { PluginMessages, Services } from '../../../API'
+import { openWindow } from '@masknet/shared-base-ui'
+import { useAccount } from '@masknet/plugin-infra/web3'
+import { Services } from '../../../API'
+import { NetworkPluginID } from '@masknet/web3-shared-base'
 import { PersonaContext } from '../../../pages/Personas/hooks/usePersonaContext'
 import { DashboardRoutes, EnhanceableSite } from '@masknet/shared-base'
 import { PluginId } from '@masknet/plugin-infra'
@@ -31,10 +32,10 @@ const useStyles = makeStyles()((theme) => ({
 export const FeaturePromotions = memo(() => {
     const { classes } = useStyles()
     const navigate = useNavigate()
-    const account = useAccount()
+    const account = useAccount(NetworkPluginID.PLUGIN_EVM)
 
     const { currentPersona, connectPersona } = PersonaContext.useContainer()
-    const { setDialog: setBuyDialog } = useRemoteControlledDialog(PluginMessages.Transak.buyTokenDialogUpdated)
+    // const { setDialog: setBuyDialog } = useRemoteControlledDialog(PluginMessages.Transak.buyTokenDialogUpdated)
 
     const isConnectedTwitter = useMemo(() => {
         if (!currentPersona) return false
@@ -46,10 +47,10 @@ export const FeaturePromotions = memo(() => {
     }, [currentPersona])
 
     const openTransakDialog = useCallback(() => {
-        setBuyDialog({
-            open: true,
-            address: account ?? '',
-        })
+        // setBuyDialog({
+        //     open: true,
+        //     address: account ?? '',
+        // })
     }, [])
 
     const openTwitter = (pluginId: string) => async () => {
diff --git a/packages/dashboard/src/hooks/useGasOptions.ts b/packages/dashboard/src/hooks/useGasOptions.ts
deleted file mode 100644
index c9f42b64bb11..000000000000
--- a/packages/dashboard/src/hooks/useGasOptions.ts
+++ /dev/null
@@ -1,58 +0,0 @@
-import { GasOption, isEIP1559Supported, useChainId } from '@masknet/web3-shared-evm'
-import { useMemo } from 'react'
-import { useAsync } from 'react-use'
-import { useDashboardI18N } from '../locales'
-import { PluginServices } from '../API'
-
-const { Wallet: WalletRPC } = PluginServices
-export function useGasOptions() {
-    const t = useDashboardI18N()
-    const chainId = useChainId()
-    const is1559Supported = useMemo(() => isEIP1559Supported(chainId), [chainId])
-    const { value: gasFromMetaMask, loading: getFromMetaMaskLoading } = useAsync(async () => {
-        if (!is1559Supported) return
-
-        return WalletRPC.getEstimateGasFees(chainId)
-    }, [is1559Supported, chainId])
-
-    // #region Get gas options from debank
-    const { value: gasFromDebank, loading: getFromDebankLoading } = useAsync(async () => {
-        if (is1559Supported) return
-        const response = await WalletRPC.getGasPriceDictFromDeBank(chainId)
-        if (!response) return null
-        return {
-            low: response.data.slow.price,
-            medium: response.data.normal.price,
-            high: response.data.fast.price,
-        }
-    }, [is1559Supported, chainId])
-    // #endregion
-
-    const gasOptions = is1559Supported ? gasFromMetaMask : gasFromDebank
-
-    const options = useMemo(() => {
-        return [
-            {
-                title: t.wallet_gas_fee_settings_low(),
-                gasOption: GasOption.Low,
-                gasPrice: gasOptions?.low ?? 0,
-            },
-            {
-                title: t.wallet_gas_fee_settings_medium(),
-                gasOption: GasOption.Medium,
-                gasPrice: gasOptions?.medium ?? 0,
-            },
-            {
-                title: t.wallet_gas_fee_settings_high(),
-                gasOption: GasOption.High,
-                gasPrice: gasOptions?.high ?? 0,
-            },
-        ]
-    }, [is1559Supported, gasOptions])
-
-    return {
-        value: options,
-        loading: is1559Supported ? getFromMetaMaskLoading : getFromDebankLoading,
-        gasOptions,
-    }
-}
diff --git a/packages/dashboard/src/initialization/Dashboard.tsx b/packages/dashboard/src/initialization/Dashboard.tsx
index c16bcb6cc643..83b4c5155b97 100644
--- a/packages/dashboard/src/initialization/Dashboard.tsx
+++ b/packages/dashboard/src/initialization/Dashboard.tsx
@@ -10,19 +10,15 @@ import {
 import { I18NextProviderHMR, SharedContextProvider } from '@masknet/shared'
 import { ErrorBoundary } from '@masknet/shared-base-ui'
 import { createInjectHooksRenderer, useActivatedPluginsDashboard } from '@masknet/plugin-infra/dashboard'
-import { NetworkPluginID, PluginsWeb3ContextProvider, useAllPluginsWeb3State } from '@masknet/plugin-infra/web3'
-import { Web3Provider } from '@masknet/web3-shared-evm'
-
+import { PluginsWeb3ContextProvider, useAllPluginsWeb3State } from '@masknet/plugin-infra/web3'
 import { i18NextInstance } from '@masknet/shared-base'
 
 import '../utils/kv-storage'
 
 import './PluginHost'
 import { Pages } from '../pages/routes'
-import { Web3Context } from '../web3/context'
 import { useAppearance, usePluginID } from '../pages/Personas/api'
 import { PersonaContext } from '../pages/Personas/hooks/usePersonaContext'
-import { fixWeb3State } from '../../../mask/src/plugins/EVM/UI/Web3State'
 
 const PluginRender = createInjectHooksRenderer(useActivatedPluginsDashboard, (x) => x.GlobalInjection)
 
@@ -30,9 +26,6 @@ export default function DashboardRoot() {
     const pluginID = usePluginID()
     const PluginsWeb3State = useAllPluginsWeb3State()
 
-    // TODO: migrate EVM plugin
-    fixWeb3State(PluginsWeb3State[NetworkPluginID.PLUGIN_EVM], Web3Context)
-
     // #region theme
     const appearance = useAppearance()
     const mode = useSystemPreferencePalette()
@@ -47,28 +40,26 @@ export default function DashboardRoot() {
     // #endregion
 
     return (
-        <Web3Provider value={Web3Context}>
-            <PluginsWeb3ContextProvider pluginID={pluginID} value={PluginsWeb3State}>
-                <I18NextProviderHMR i18n={i18NextInstance}>
-                    <StyledEngineProvider injectFirst>
-                        <ThemeProvider theme={theme}>
-                            <PersonaContext.Provider>
-                                <ErrorBoundary>
-                                    <CssBaseline />
-                                    <CustomSnackbarProvider>
-                                        <SharedContextProvider>
-                                            <HashRouter>
-                                                <Pages />
-                                                <PluginRender />
-                                            </HashRouter>
-                                        </SharedContextProvider>
-                                    </CustomSnackbarProvider>
-                                </ErrorBoundary>
-                            </PersonaContext.Provider>
-                        </ThemeProvider>
-                    </StyledEngineProvider>
-                </I18NextProviderHMR>
-            </PluginsWeb3ContextProvider>
-        </Web3Provider>
+        <PluginsWeb3ContextProvider pluginID={pluginID} value={PluginsWeb3State}>
+            <I18NextProviderHMR i18n={i18NextInstance}>
+                <StyledEngineProvider injectFirst>
+                    <ThemeProvider theme={theme}>
+                        <PersonaContext.Provider>
+                            <ErrorBoundary>
+                                <CssBaseline />
+                                <CustomSnackbarProvider>
+                                    <SharedContextProvider>
+                                        <HashRouter>
+                                            <Pages />
+                                        </HashRouter>
+                                        <PluginRender />
+                                    </SharedContextProvider>
+                                </CustomSnackbarProvider>
+                            </ErrorBoundary>
+                        </PersonaContext.Provider>
+                    </ThemeProvider>
+                </StyledEngineProvider>
+            </I18NextProviderHMR>
+        </PluginsWeb3ContextProvider>
     )
 }
diff --git a/packages/dashboard/src/initialization/PluginHost.ts b/packages/dashboard/src/initialization/PluginHost.ts
index 272c30c82d69..848bb1d4954f 100644
--- a/packages/dashboard/src/initialization/PluginHost.ts
+++ b/packages/dashboard/src/initialization/PluginHost.ts
@@ -2,9 +2,9 @@ import './plugins'
 
 import { Emitter } from '@servie/events'
 import { startPluginDashboard, Plugin } from '@masknet/plugin-infra/dashboard'
+import { createI18NBundle, i18NextInstance } from '@masknet/shared-base'
 import { Services, Messages } from '../API'
-import { createI18NBundle, createSubscriptionFromAsync, i18NextInstance } from '@masknet/shared-base'
-import { InMemoryStorages, PersistentStorages } from '../utils/kv-storage'
+import { createSharedContext } from '../../../mask/src/plugin-infra/host'
 
 const PluginHost: Plugin.__Host.Host<Plugin.Dashboard.DashboardContext> = {
     minimalMode: {
@@ -16,23 +16,7 @@ const PluginHost: Plugin.__Host.Host<Plugin.Dashboard.DashboardContext> = {
     addI18NResource(plugin, resource) {
         createI18NBundle(plugin, resource)(i18NextInstance)
     },
-    createContext: (pluginID, signal) => {
-        const currentPersonaSub = createSubscriptionFromAsync(
-            Services.Settings.getCurrentPersonaIdentifier,
-            undefined,
-            Messages.events.currentPersonaIdentifier.on,
-            signal,
-        )
-        return {
-            createKVStorage(type, defaultValues) {
-                if (type === 'memory') return InMemoryStorages.Plugin.createSubScope(pluginID, defaultValues, signal)
-                else return PersistentStorages.Plugin.createSubScope(pluginID, defaultValues, signal)
-            },
-            personaSign: Services.Identity.signWithPersona,
-            walletSign: Services.Ethereum.personalSign,
-            currentPersona: currentPersonaSub,
-        }
-    },
+    createContext: createSharedContext,
 }
 setTimeout(() => {
     Messages.events.pluginMinimalModeChanged.on(([id, status]) => {
diff --git a/packages/dashboard/src/initialization/isolated_bridge.ts b/packages/dashboard/src/initialization/isolated_bridge.ts
index 9e941f0812b0..e7b621e94ac0 100644
--- a/packages/dashboard/src/initialization/isolated_bridge.ts
+++ b/packages/dashboard/src/initialization/isolated_bridge.ts
@@ -24,11 +24,9 @@ function installPluginService() {
     const Wallet = channelOf('com.maskbook.wallet')
     const Transak = channelOf('com.maskbook.transak')
     const Swap = channelOf('com.maskbook.trader')
-    const Pets = channelOf('com.maskbook.pets')
-    setPluginMessages({ Wallet, Transak, Swap, Pets })
+    setPluginMessages({ Wallet, Transak, Swap })
     setPluginServices({
         Wallet: initRPCBridge(PluginMessages.Wallet.events.rpc),
-        Swap: initRPCBridge(PluginMessages.Swap.rpc),
     })
 }
 
diff --git a/packages/dashboard/src/pages/CreateMaskWallet/components/CreateMnemonic/index.tsx b/packages/dashboard/src/pages/CreateMaskWallet/components/CreateMnemonic/index.tsx
index fc44340b5553..d672c8b0df22 100644
--- a/packages/dashboard/src/pages/CreateMaskWallet/components/CreateMnemonic/index.tsx
+++ b/packages/dashboard/src/pages/CreateMaskWallet/components/CreateMnemonic/index.tsx
@@ -3,7 +3,6 @@ import { Alert, Box, Button, Typography } from '@mui/material'
 import { makeStyles, MaskColorVar } from '@masknet/theme'
 import { InfoIcon, RefreshIcon } from '@masknet/icons'
 import { useDashboardI18N } from '../../../../locales'
-import { ChainId, ProviderType } from '@masknet/web3-shared-evm'
 import { MnemonicReveal } from '../../../../components/Mnemonic'
 import { VerifyMnemonicDialog } from '../VerifyMnemonicDialog'
 import { useAsyncFn, useAsyncRetry } from 'react-use'
@@ -115,14 +114,10 @@ const CreateMnemonic = memo(() => {
         const account = await Services.Settings.getSelectedWalletAddress()
 
         if (!account) {
-            await PluginServices.Wallet.updateAccount({
+            await PluginServices.Wallet.updateMaskAccount({
                 account: address_,
-                providerType: ProviderType.MaskWallet,
             })
-            const chainId = searchParams.get('chainId')
-            if (chainId) {
-                await PluginServices.Wallet.selectAccount([address_], Number(chainId) as ChainId)
-            }
+            await PluginServices.Wallet.selectMaskAccount([address_])
         }
 
         return address_
diff --git a/packages/dashboard/src/pages/Settings/api.ts b/packages/dashboard/src/pages/Settings/api.ts
index 894e2bfbd781..2d922ef5b290 100644
--- a/packages/dashboard/src/pages/Settings/api.ts
+++ b/packages/dashboard/src/pages/Settings/api.ts
@@ -1,15 +1,9 @@
 import { createGlobalState } from '@masknet/shared-base-ui'
 import { Messages, Services } from '../../API'
-import type { DataProvider } from '@masknet/public-api'
 import type { AccountType, BackupFileInfo, Scenario, Locale } from './type'
 
 export const [useLanguage] = createGlobalState(Services.Settings.getLanguage, Messages.events.languageSettings.on)
 
-export const [useTrendingDataSource] = createGlobalState<DataProvider>(
-    Services.Settings.getTrendingDataSource,
-    Messages.events.currentDataProviderSettings.on,
-)
-
 const BASE_RUL = 'https://vaalh28dbi.execute-api.ap-east-1.amazonaws.com/api'
 
 interface BackupBaseRequest {
diff --git a/packages/dashboard/src/pages/Settings/components/DataSourceSetting.tsx b/packages/dashboard/src/pages/Settings/components/DataSourceSetting.tsx
deleted file mode 100644
index b89cd5166e09..000000000000
--- a/packages/dashboard/src/pages/Settings/components/DataSourceSetting.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import { MenuItem } from '@mui/material'
-import SettingSelect from './SettingSelect'
-import { useTrendingDataSource } from '../api'
-import { Services } from '../../../API'
-import { MarketTrendProvider } from '../../../type'
-
-export default function DataSourceSetting() {
-    const source = useTrendingDataSource()
-    const handleChange = (event: any) => {
-        const value = event.target.value
-        Services.Settings.setTrendingDataSource(value)
-    }
-
-    return (
-        <SettingSelect value={source} onChange={handleChange}>
-            <MenuItem value={MarketTrendProvider.COIN_GECKO}>CoinGecko</MenuItem>
-            <MenuItem value={MarketTrendProvider.COIN_MARKET_CAP}>CoinMarketCap</MenuItem>
-            <MenuItem value={MarketTrendProvider.UNISWAP_INFO}>Uniswap Info</MenuItem>
-        </SettingSelect>
-    )
-}
diff --git a/packages/dashboard/src/pages/Wallets/api.ts b/packages/dashboard/src/pages/Wallets/api.ts
deleted file mode 100644
index d16731b30b45..000000000000
--- a/packages/dashboard/src/pages/Wallets/api.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { createGlobalState } from '@masknet/shared-base-ui'
-import { Messages, Services } from '../../API'
-
-export const [useCurrentCollectibleDataProvider] = createGlobalState(
-    Services.Settings.getCurrentCollectibleDataProvider,
-    (x) => Messages.events.currentNonFungibleAssetDataProviderSettings.on(x),
-)
-
-export const [useCurrentSelectedWalletNetwork] = createGlobalState(
-    Services.Settings.getCurrentSelectedWalletNetwork,
-    (x) => Messages.events.currentNetworkSettings.on(x),
-)
diff --git a/packages/dashboard/src/pages/Wallets/components/AddCollectibleDialog/index.tsx b/packages/dashboard/src/pages/Wallets/components/AddCollectibleDialog/index.tsx
index 05e0a75d6da2..1037b19e6ec9 100644
--- a/packages/dashboard/src/pages/Wallets/components/AddCollectibleDialog/index.tsx
+++ b/packages/dashboard/src/pages/Wallets/components/AddCollectibleDialog/index.tsx
@@ -1,19 +1,13 @@
-import { FormEvent, memo, useCallback, useEffect, useState } from 'react'
+import { FormEvent, memo, useEffect, useState } from 'react'
 import { MaskDialog, MaskTextField } from '@masknet/theme'
 import { Box, Button, DialogActions, DialogContent } from '@mui/material'
-import {
-    EthereumTokenType,
-    isSameAddress,
-    useERC721ContractDetailed,
-    useERC721TokenDetailedCallback,
-    useWallet,
-} from '@masknet/web3-shared-evm'
+import { NetworkPluginID } from '@masknet/web3-shared-base'
 import { EthereumAddress } from 'wallet.ts'
 import { useDashboardI18N } from '../../../../locales'
 import { z } from 'zod'
 import { Controller, useForm } from 'react-hook-form'
 import { zodResolver } from '@hookform/resolvers/zod'
-import { PluginServices } from '../../../../API'
+import { useWeb3Connection, useWallet, useChainId } from '@masknet/plugin-infra/web3'
 
 export interface AddCollectibleDialogProps {
     open: boolean
@@ -31,41 +25,48 @@ enum FormErrorType {
 }
 
 export const AddCollectibleDialog = memo<AddCollectibleDialogProps>(({ open, onClose }) => {
-    const wallet = useWallet()
+    const wallet = useWallet(NetworkPluginID.PLUGIN_EVM)
     const [address, setAddress] = useState('')
-    const { value: contractDetailed, loading: contractDetailLoading } = useERC721ContractDetailed(address)
-    const [tokenId, setTokenId, erc721TokenDetailedCallback] = useERC721TokenDetailedCallback(contractDetailed)
-
-    const onSubmit = useCallback(async () => {
-        if (contractDetailLoading || !wallet) return
-
-        const tokenInDB = await PluginServices.Wallet.getToken(EthereumTokenType.ERC721, address, tokenId)
-        if (tokenInDB) throw new Error(FormErrorType.Added)
-
-        const tokenDetailed = await erc721TokenDetailedCallback()
-
-        if (
-            (tokenDetailed && !isSameAddress(tokenDetailed.info.owner, wallet.address)) ||
-            !tokenDetailed ||
-            !tokenDetailed.info.owner
-        ) {
-            throw new Error(FormErrorType.NotExist)
-        } else {
-            await PluginServices.Wallet.addToken(tokenDetailed)
-            onClose()
-        }
-    }, [contractDetailLoading, wallet, address, tokenId, erc721TokenDetailedCallback])
-
-    return (
-        <AddCollectibleDialogUI
-            open={open}
-            onClose={onClose}
-            address={address}
-            onAddressChange={setAddress}
-            onTokenIdChange={setTokenId}
-            onSubmit={onSubmit}
-        />
-    )
+    const [tokenId, setTokenId] = useState('')
+    const connection = useWeb3Connection(NetworkPluginID.PLUGIN_EVM)
+    const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
+
+    return null
+
+    // const [tokenId, setTokenId, erc721TokenDetailedCallback] = useERC721TokenDetailedCallback(contractDetailed)
+
+    // const onSubmit = useCallback(async () => {
+    //     if (contractDetailLoading || !wallet) return
+
+    //     const tokenInDB = await PluginServices.Wallet.getToken(SchemaType.ERC721, address, tokenId)
+    //     if (tokenInDB) throw new Error(FormErrorType.Added)
+
+    //     const tokenDetailed = await connection?.getNonFungibleToken(address ?? '', tokenId, {
+    //         chainId,
+    //     })
+
+    //     if (
+    //         (tokenDetailed && !isSameAddress(tokenDetailed.info.owner, wallet.address)) ||
+    //         !tokenDetailed ||
+    //         !tokenDetailed.info.owner
+    //     ) {
+    //         throw new Error(FormErrorType.NotExist)
+    //     } else {
+    //         await PluginServices.Wallet.addToken(tokenDetailed)
+    //         onClose()
+    //     }
+    // }, [contractDetailLoading, wallet, address, tokenId, erc721TokenDetailedCallback])
+
+    // return (
+    //     <AddCollectibleDialogUI
+    //         open={open}
+    //         onClose={onClose}
+    //         address={address}
+    //         onAddressChange={setAddress}
+    //         onTokenIdChange={setTokenId}
+    //         onSubmit={onSubmit}
+    //     />
+    // )
 })
 
 export interface AddCollectibleDialogUIProps {
diff --git a/packages/dashboard/src/pages/Wallets/components/AddTokenConfirmUI/index.tsx b/packages/dashboard/src/pages/Wallets/components/AddTokenConfirmUI/index.tsx
index be023076b0c5..3e559f0f5522 100644
--- a/packages/dashboard/src/pages/Wallets/components/AddTokenConfirmUI/index.tsx
+++ b/packages/dashboard/src/pages/Wallets/components/AddTokenConfirmUI/index.tsx
@@ -2,14 +2,15 @@ import { memo } from 'react'
 import { useDashboardI18N } from '../../../../locales'
 import { Box, Button, DialogActions, DialogContent, Stack, Typography } from '@mui/material'
 import { makeStyles } from '@masknet/theme'
-import type { ERC20TokenDetailed } from '@masknet/web3-shared-evm'
 import { TokenIcon } from '@masknet/shared'
 import { useFormContext } from 'react-hook-form'
+import type { FungibleToken } from '@masknet/web3-shared-base'
+import type { ChainId, SchemaType } from '@masknet/web3-shared-evm'
 
 export interface AddTokenConfirmUIProps {
     onBack: () => void
     onConfirm: () => void
-    token?: ERC20TokenDetailed
+    token?: FungibleToken<ChainId, SchemaType.ERC20>
     balance?: string
 }
 
@@ -58,7 +59,7 @@ export const AddTokenConfirmUI = memo<AddTokenConfirmUIProps>(({ token, balance,
                                 address={token?.address ?? ''}
                                 name={token?.name}
                                 chainId={token?.chainId}
-                                logoURI={token?.logoURI}
+                                logoURI={token?.logoURL}
                                 AvatarProps={{ sx: { width: 48, height: 48 } }}
                             />
                             <Typography className={classes.confirmTitle} sx={{ marginLeft: 1.2 }}>
diff --git a/packages/dashboard/src/pages/Wallets/components/AddTokenFormUI/index.tsx b/packages/dashboard/src/pages/Wallets/components/AddTokenFormUI/index.tsx
index 64a925333c93..aa94b934baac 100644
--- a/packages/dashboard/src/pages/Wallets/components/AddTokenFormUI/index.tsx
+++ b/packages/dashboard/src/pages/Wallets/components/AddTokenFormUI/index.tsx
@@ -2,13 +2,14 @@ import { memo } from 'react'
 import { useDashboardI18N } from '../../../../locales'
 import { Button, DialogActions, DialogContent, TextField } from '@mui/material'
 import { makeStyles } from '@masknet/theme'
-import type { ERC20TokenDetailed } from '@masknet/web3-shared-evm'
 import { useFormContext, Controller } from 'react-hook-form'
+import type { ChainId, SchemaType } from '@masknet/web3-shared-evm'
+import type { FungibleToken } from '@masknet/web3-shared-base'
 
 export interface AddTokenFormUIProps {
     onNext: () => void
     onClose: () => void
-    token?: ERC20TokenDetailed
+    token?: FungibleToken<ChainId, SchemaType.ERC20>
 }
 
 const useStyles = makeStyles()((theme) => ({
diff --git a/packages/dashboard/src/pages/Wallets/components/Assets/index.tsx b/packages/dashboard/src/pages/Wallets/components/Assets/index.tsx
index 0dfc10391166..53927168aa98 100644
--- a/packages/dashboard/src/pages/Wallets/components/Assets/index.tsx
+++ b/packages/dashboard/src/pages/Wallets/components/Assets/index.tsx
@@ -1,9 +1,10 @@
-import { type Web3Plugin, NetworkPluginID, useCurrentWeb3NetworkPluginID } from '@masknet/plugin-infra/web3'
+import { memo, useEffect, useState } from 'react'
+import { useCurrentWeb3NetworkPluginID, Web3Helper } from '@masknet/plugin-infra/web3'
 import { makeStyles, useTabs } from '@masknet/theme'
 import { TabContext, TabList, TabPanel } from '@mui/lab'
 import { Box, Button, Tab } from '@mui/material'
-import { memo, useEffect, useState } from 'react'
 import { usePickToken } from '@masknet/shared'
+import { NetworkPluginID } from '@masknet/web3-shared-base'
 import { ContentContainer } from '../../../../components/ContentContainer'
 import { useDashboardI18N } from '../../../../locales'
 import { AddCollectibleDialog } from '../AddCollectibleDialog'
@@ -38,7 +39,7 @@ export enum AssetTab {
 const assetTabs = [AssetTab.Token, AssetTab.Collectibles] as const
 
 interface TokenAssetsProps {
-    network: Web3Plugin.NetworkDescriptor | null
+    network: Web3Helper.NetworkDescriptorAll | null
 }
 
 export const Assets = memo<TokenAssetsProps>(({ network }) => {
diff --git a/packages/dashboard/src/pages/Wallets/components/Balance/index.tsx b/packages/dashboard/src/pages/Wallets/components/Balance/index.tsx
index 88763228ff6d..c631b671625e 100644
--- a/packages/dashboard/src/pages/Wallets/components/Balance/index.tsx
+++ b/packages/dashboard/src/pages/Wallets/components/Balance/index.tsx
@@ -1,13 +1,14 @@
+import { memo } from 'react'
+import { noop } from 'lodash-unified'
 import { CardIcon, DownloadIcon, MaskWalletIcon, SendIcon, SwapIcon } from '@masknet/icons'
-import type { Web3Plugin } from '@masknet/plugin-infra/web3'
 import { MiniNetworkSelector } from '@masknet/shared'
 import { DashboardRoutes } from '@masknet/shared-base'
 import { MaskColorVar } from '@masknet/theme'
+import type { NetworkDescriptor, NetworkPluginID } from '@masknet/web3-shared-base'
 import { Box, Button, buttonClasses, styled, Typography } from '@mui/material'
-import { noop } from 'lodash-unified'
-import { memo } from 'react'
 import { useDashboardI18N } from '../../../../locales'
 import { useIsMatched } from '../../hooks'
+import type { Web3Helper } from '@masknet/plugin-infra/web3'
 
 const BalanceContainer = styled('div')(
     ({ theme }) => `
@@ -75,10 +76,23 @@ export interface BalanceCardProps {
     onBuy(): void
     onSwap(): void
     onReceive(): void
-    networks: Web3Plugin.NetworkDescriptor[]
-    selectedNetwork: Web3Plugin.NetworkDescriptor | null
+    networks: Array<
+        NetworkDescriptor<
+            Web3Helper.Definition[NetworkPluginID]['ChainId'],
+            Web3Helper.Definition[NetworkPluginID]['NetworkType']
+        >
+    >
+    selectedNetwork: NetworkDescriptor<
+        Web3Helper.Definition[NetworkPluginID]['ChainId'],
+        Web3Helper.Definition[NetworkPluginID]['NetworkType']
+    > | null
     showOperations: boolean
-    onSelectNetwork(network: Web3Plugin.NetworkDescriptor | null): void
+    onSelectNetwork(
+        network: NetworkDescriptor<
+            Web3Helper.Definition[NetworkPluginID]['ChainId'],
+            Web3Helper.Definition[NetworkPluginID]['NetworkType']
+        > | null,
+    ): void
 }
 
 export const Balance = memo<BalanceCardProps>(
@@ -114,9 +128,12 @@ export const Balance = memo<BalanceCardProps>(
                             disabledNonCurrentNetwork={isDisabledNonCurrentChainSelect}
                             selectedNetwork={selectedNetwork}
                             networks={networks}
-                            onSelect={(network: Web3Plugin.NetworkDescriptor | null) =>
-                                networks.length <= 1 ? noop : onSelectNetwork(network)
-                            }
+                            onSelect={(
+                                network: NetworkDescriptor<
+                                    Web3Helper.Definition[NetworkPluginID]['ChainId'],
+                                    Web3Helper.Definition[NetworkPluginID]['NetworkType']
+                                > | null,
+                            ) => (networks.length <= 1 ? noop : onSelectNetwork(network))}
                         />
                     </BalanceDisplayContainer>
                 </Box>
diff --git a/packages/dashboard/src/pages/Wallets/components/CollectibleCard/index.tsx b/packages/dashboard/src/pages/Wallets/components/CollectibleCard/index.tsx
index 106b6bf9ad8d..eefdac98ecd6 100644
--- a/packages/dashboard/src/pages/Wallets/components/CollectibleCard/index.tsx
+++ b/packages/dashboard/src/pages/Wallets/components/CollectibleCard/index.tsx
@@ -1,17 +1,18 @@
 import { memo, useEffect, useMemo, useRef, useState } from 'react'
+import { useHoverDirty } from 'react-use'
+import { WalletIcon, NFTCardStyledAssetPlayer } from '@masknet/shared'
 import { Box, Button, Link, Tooltip, Typography } from '@mui/material'
 import { makeStyles, MaskColorVar } from '@masknet/theme'
+import { NetworkPluginID, NonFungibleAsset } from '@masknet/web3-shared-base'
 import { CollectiblePlaceholder } from '../CollectiblePlaceHolder'
-import { useHoverDirty } from 'react-use'
 import { useDashboardI18N } from '../../../../locales'
-import { WalletIcon, NFTCardStyledAssetPlayer } from '@masknet/shared'
 import { ChangeNetworkTip } from '../FungibleTokenTableRow/ChangeNetworkTip'
 import {
-    NetworkPluginID,
-    useNetworkDescriptor,
+    useChainId,
     useCurrentWeb3NetworkPluginID,
+    useNetworkDescriptor,
     useWeb3State,
-    Web3Plugin,
+    Web3Helper,
 } from '@masknet/plugin-infra/web3'
 
 const useStyles = makeStyles()((theme) => ({
@@ -94,20 +95,23 @@ const useStyles = makeStyles()((theme) => ({
 }))
 
 export interface CollectibleCardProps {
-    chainId: number
-    token: Web3Plugin.NonFungibleToken
+    token: NonFungibleAsset<
+        Web3Helper.Definition[NetworkPluginID]['ChainId'],
+        Web3Helper.Definition[NetworkPluginID]['SchemaType']
+    >
     onSend(): void
     renderOrder: number
 }
 
-export const CollectibleCard = memo<CollectibleCardProps>(({ chainId, token, onSend, renderOrder }) => {
+export const CollectibleCard = memo<CollectibleCardProps>(({ token, onSend, renderOrder }) => {
     const t = useDashboardI18N()
-    const { Utils } = useWeb3State()
+    const chainId = useChainId()
     const { classes } = useStyles()
     const ref = useRef(null)
+    const { Others } = useWeb3State() as Web3Helper.Web3StateAll
     const [isHoveringTooltip, setHoveringTooltip] = useState(false)
     const isHovering = useHoverDirty(ref)
-    const networkDescriptor = useNetworkDescriptor(token.contract?.chainId)
+    const networkDescriptor = useNetworkDescriptor(undefined, token.contract?.chainId)
     const isOnCurrentChain = useMemo(() => chainId === token.contract?.chainId, [chainId, token])
     const currentPluginId = useCurrentWeb3NetworkPluginID()
 
@@ -119,10 +123,9 @@ export const CollectibleCard = memo<CollectibleCardProps>(({ chainId, token, onS
     const sendable = currentPluginId === NetworkPluginID.PLUGIN_EVM
     const showSendButton = (isHovering || isHoveringTooltip) && sendable
 
-    let nftLink
-    if (Utils?.resolveNonFungibleTokenLink && token.contract) {
-        nftLink = Utils?.resolveNonFungibleTokenLink?.(token.contract?.chainId, token.contract.address, token.tokenId)
-    }
+    const nftLink = useMemo(() => {
+        return Others?.explorerResolver.nonFungibleTokenLink(token.chainId, token.address, token.tokenId)
+    }, [currentPluginId, token.chainId, token.address, token.tokenId])
 
     return (
         <Box className={`${classes.container} ${isHovering || isHoveringTooltip ? classes.hover : ''}`} ref={ref}>
@@ -130,7 +133,7 @@ export const CollectibleCard = memo<CollectibleCardProps>(({ chainId, token, onS
                 <Box className={classes.chainIcon}>
                     <WalletIcon networkIcon={networkDescriptor?.icon} size={20} />
                 </Box>
-                {(token.metadata?.assetURL || token.metadata?.iconURL) && token.contract ? (
+                {(token.metadata?.mediaURL || token.metadata?.imageURL) && token.contract ? (
                     <Link
                         target={nftLink ? '_blank' : '_self'}
                         rel="noopener noreferrer"
@@ -142,7 +145,7 @@ export const CollectibleCard = memo<CollectibleCardProps>(({ chainId, token, onS
                                 contractAddress={token.contract.address}
                                 chainId={token.contract.chainId}
                                 renderOrder={renderOrder}
-                                url={token.metadata.assetURL || token.metadata.iconURL}
+                                url={token.metadata.imageURL || token.metadata.mediaURL}
                                 tokenId={token.tokenId}
                                 classes={{
                                     loadingFailImage: classes.loadingFailImage,
@@ -183,7 +186,7 @@ export const CollectibleCard = memo<CollectibleCardProps>(({ chainId, token, onS
                         </Box>
                     ) : (
                         <Typography className={classes.name} color="textPrimary" variant="body2" onClick={onSend}>
-                            {token.name || token.tokenId}
+                            {token.metadata?.name || token.tokenId}
                         </Typography>
                     )}
                 </Box>
diff --git a/packages/dashboard/src/pages/Wallets/components/CollectibleList/index.tsx b/packages/dashboard/src/pages/Wallets/components/CollectibleList/index.tsx
index d41558f5516b..cf03dcd06f4a 100644
--- a/packages/dashboard/src/pages/Wallets/components/CollectibleList/index.tsx
+++ b/packages/dashboard/src/pages/Wallets/components/CollectibleList/index.tsx
@@ -2,22 +2,20 @@ import { Dispatch, memo, SetStateAction, useCallback, useEffect, useRef, useStat
 import { useNavigate } from 'react-router-dom'
 import { Box, Stack, TablePagination } from '@mui/material'
 import { makeStyles } from '@masknet/theme'
+import { NetworkPluginID, NonFungibleToken } from '@masknet/web3-shared-base'
 import { LoadingPlaceholder } from '../../../../components/LoadingPlaceholder'
-import { DashboardRoutes, EMPTY_LIST } from '@masknet/shared-base'
+import { DashboardRoutes } from '@masknet/shared-base'
 import { EmptyPlaceholder } from '../EmptyPlaceholder'
 import { CollectibleCard } from '../CollectibleCard'
 import { useDashboardI18N } from '../../../../locales'
-import { PluginMessages } from '../../../../API'
 import { TransferTab } from '../Transfer'
 import {
-    useNetworkDescriptor,
-    useWeb3State as useWeb3PluginState,
-    Web3Plugin,
     useAccount,
     useCurrentWeb3NetworkPluginID,
-    NetworkPluginID,
+    useNetworkDescriptor,
+    useNonFungibleAssets,
+    Web3Helper,
 } from '@masknet/plugin-infra/web3'
-import { useAsyncRetry } from 'react-use'
 
 const useStyles = makeStyles()({
     root: {
@@ -37,7 +35,7 @@ const useStyles = makeStyles()({
 })
 
 interface CollectibleListProps {
-    selectedNetwork: Web3Plugin.NetworkDescriptor | null
+    selectedNetwork: Web3Helper.NetworkDescriptorAll | null
 }
 
 const ITEM_SIZE = {
@@ -49,42 +47,45 @@ export const CollectibleList = memo<CollectibleListProps>(({ selectedNetwork })
     const [page, setPage] = useState(0)
     const navigate = useNavigate()
     const account = useAccount()
-    const { Asset } = useWeb3PluginState()
+    const { value = [], error, retry, loading } = useNonFungibleAssets()
     const network = useNetworkDescriptor()
     const [loadingSize, setLoadingSize] = useState(0)
-    const [renderData, setRenderData] = useState<Web3Plugin.NonFungibleToken[]>([])
+    const [renderData, setRenderData] = useState<
+        Array<
+            NonFungibleToken<
+                Web3Helper.Definition[NetworkPluginID]['ChainId'],
+                Web3Helper.Definition[NetworkPluginID]['SchemaType']
+            >
+        >
+    >([])
 
-    const {
-        value = { data: EMPTY_LIST, hasNextPage: false },
-        error: collectiblesError,
-        loading: isQuerying,
-        retry,
-    } = useAsyncRetry(
-        async () => Asset?.getNonFungibleAssets?.(account, { page, size: 20 }, undefined, selectedNetwork || undefined),
-        [account, Asset?.getNonFungibleAssets, network, selectedNetwork],
-    )
     useEffect(() => {
-        const unsubscribeTokens = PluginMessages.Wallet.events.erc721TokensUpdated.on(() => retry())
-        const unsubscribeSocket = PluginMessages.Wallet.events.socketMessageUpdated.on((info) => {
-            if (!info.done) {
-                retry()
-            }
-        })
-        return () => {
-            unsubscribeTokens()
-            unsubscribeSocket()
-        }
+        // const unsubscribeTokens = PluginMessages.Wallet.events.erc721TokensUpdated.on(() => retry())
+        // const unsubscribeSocket = PluginMessages.Wallet.events.socketMessageUpdated.on((info) => {
+        //     if (!info.done) {
+        //         retry()
+        //     }
+        // })
+        // return () => {
+        //     unsubscribeTokens()
+        //     unsubscribeSocket()
+        // }
     }, [retry])
 
     useEffect(() => {
         if (!loadingSize) return
-        const render = value.data.slice(page * loadingSize, (page + 1) * loadingSize)
+        const render = value.slice(page * loadingSize, (page + 1) * loadingSize)
         setRenderData(render)
-    }, [value.data, loadingSize, page])
+    }, [value, loadingSize, page])
 
     const currentPluginId = useCurrentWeb3NetworkPluginID()
     const onSend = useCallback(
-        (detail: Web3Plugin.NonFungibleToken) => {
+        (
+            detail: NonFungibleToken<
+                Web3Helper.Definition[NetworkPluginID]['ChainId'],
+                Web3Helper.Definition[NetworkPluginID]['SchemaType']
+            >,
+        ) => {
             // Sending NFT is only available on EVM currently.
             if (currentPluginId !== NetworkPluginID.PLUGIN_EVM) return
             navigate(DashboardRoutes.WalletsTransfer, {
@@ -97,19 +98,18 @@ export const CollectibleList = memo<CollectibleListProps>(({ selectedNetwork })
         [currentPluginId],
     )
 
-    const hasNextPage = (page + 1) * loadingSize < value.data.length
-    const isLoading = renderData.length === 0 && isQuerying
+    const hasNextPage = (page + 1) * loadingSize < value.length
+    const isLoading = renderData.length === 0 && loading
 
     return (
         <CollectibleListUI
             isLoading={isLoading}
-            isEmpty={!!collectiblesError || renderData.length === 0}
+            isEmpty={!!error || renderData.length === 0}
             page={page}
             onPageChange={setPage}
             hasNextPage={hasNextPage}
-            showPagination={!isQuerying && !(page === 0 && !hasNextPage)}
+            showPagination={!loading && !(page === 0 && !hasNextPage)}
             dataSource={renderData}
-            chainId={network?.chainId ?? 1}
             onSend={onSend}
             setLoadingSize={(size) => setLoadingSize(size)}
         />
@@ -118,30 +118,29 @@ export const CollectibleList = memo<CollectibleListProps>(({ selectedNetwork })
 
 export interface CollectibleListUIProps {
     page: number
-    onPageChange: Dispatch<SetStateAction<number>>
     hasNextPage: boolean
     isLoading: boolean
     isEmpty: boolean
     showPagination: boolean
-    chainId: number
-    dataSource: Web3Plugin.NonFungibleToken[]
-    onSend(detail: Web3Plugin.NonFungibleToken): void
+    chainId?: Web3Helper.ChainIdAll
+    dataSource: Array<
+        NonFungibleToken<
+            Web3Helper.Definition[NetworkPluginID]['ChainId'],
+            Web3Helper.Definition[NetworkPluginID]['SchemaType']
+        >
+    >
+    onSend(
+        detail: NonFungibleToken<
+            Web3Helper.Definition[NetworkPluginID]['ChainId'],
+            Web3Helper.Definition[NetworkPluginID]['SchemaType']
+        >,
+    ): void
+    onPageChange: Dispatch<SetStateAction<number>>
     setLoadingSize(fn: (pre: number | undefined) => number): void
 }
 
 export const CollectibleListUI = memo<CollectibleListUIProps>(
-    ({
-        page,
-        onPageChange,
-        isLoading,
-        isEmpty,
-        hasNextPage,
-        showPagination,
-        chainId,
-        dataSource,
-        onSend,
-        setLoadingSize,
-    }) => {
+    ({ page, onPageChange, isLoading, isEmpty, hasNextPage, showPagination, dataSource, onSend, setLoadingSize }) => {
         const t = useDashboardI18N()
         const { classes } = useStyles()
         const ref = useRef<HTMLDivElement>(null)
@@ -167,7 +166,6 @@ export const CollectibleListUI = memo<CollectibleListUIProps>(
                             {dataSource.map((x, index) => (
                                 <div className={classes.card} key={index}>
                                     <CollectibleCard
-                                        chainId={chainId}
                                         token={x}
                                         renderOrder={index}
                                         // TODO: transfer not support multi chain, should remove is after supported
diff --git a/packages/dashboard/src/pages/Wallets/components/CollectiblePlaceHolder/index.tsx b/packages/dashboard/src/pages/Wallets/components/CollectiblePlaceHolder/index.tsx
index cb0b20053a85..4e05e0e5da26 100644
--- a/packages/dashboard/src/pages/Wallets/components/CollectiblePlaceHolder/index.tsx
+++ b/packages/dashboard/src/pages/Wallets/components/CollectiblePlaceHolder/index.tsx
@@ -1,10 +1,11 @@
 import { memo } from 'react'
 import { MiniMaskIcon } from '@masknet/icons'
 import { makeStyles, MaskColorVar } from '@masknet/theme'
-import { useDashboardI18N } from '../../../../locales'
 import { WalletIcon } from '@masknet/shared'
 import { Box } from '@mui/material'
 import { useNetworkDescriptor } from '@masknet/plugin-infra/web3'
+import { NetworkPluginID } from '@masknet/web3-shared-base'
+import { useDashboardI18N } from '../../../../locales'
 
 const useStyles = makeStyles()({
     container: {
@@ -44,7 +45,7 @@ export interface CollectiblePlaceHolderProps {
 export const CollectiblePlaceholder = memo<CollectiblePlaceHolderProps>(({ chainId }) => {
     const { classes } = useStyles()
     const t = useDashboardI18N()
-    const networkDescriptor = useNetworkDescriptor(chainId)
+    const networkDescriptor = useNetworkDescriptor(NetworkPluginID.PLUGIN_EVM, chainId)
 
     return (
         <div className={classes.container}>
diff --git a/packages/dashboard/src/pages/Wallets/components/FungibleTokenTable/index.tsx b/packages/dashboard/src/pages/Wallets/components/FungibleTokenTable/index.tsx
index e2236f600657..d0b80f54abf1 100644
--- a/packages/dashboard/src/pages/Wallets/components/FungibleTokenTable/index.tsx
+++ b/packages/dashboard/src/pages/Wallets/components/FungibleTokenTable/index.tsx
@@ -1,25 +1,17 @@
-import { memo, useCallback, useEffect, useState } from 'react'
+import { memo, useCallback, useEffect } from 'react'
+import { useNavigate } from 'react-router-dom'
+import BigNumber from 'bignumber.js'
 import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from '@mui/material'
 import { makeStyles, MaskColorVar } from '@masknet/theme'
 import { useDashboardI18N } from '../../../../locales'
 import { EmptyPlaceholder } from '../EmptyPlaceholder'
 import { LoadingPlaceholder } from '../../../../components/LoadingPlaceholder'
 import { FungibleTokenTableRow } from '../FungibleTokenTableRow'
-import { useWeb3State } from '@masknet/web3-shared-evm'
-import BigNumber from 'bignumber.js'
-import { useRemoteControlledDialog } from '@masknet/shared-base-ui'
+import { formatBalance, FungibleAsset, NetworkPluginID } from '@masknet/web3-shared-base'
+import { DashboardRoutes, EMPTY_LIST } from '@masknet/shared-base'
+import { useCurrentWeb3NetworkPluginID, useFungibleAssets, useWeb3State, Web3Helper } from '@masknet/plugin-infra/web3'
 import { PluginMessages } from '../../../../API'
-import { DashboardRoutes } from '@masknet/shared-base'
-import { useNavigate } from 'react-router-dom'
-import { useAsync } from 'react-use'
-import {
-    useNetworkDescriptor,
-    useWeb3State as useWeb3PluginState,
-    Web3Plugin,
-    useAccount,
-    NetworkPluginID,
-    useCurrentWeb3NetworkPluginID,
-} from '@masknet/plugin-infra/web3'
+import { useRemoteControlledDialog } from '@masknet/shared-base-ui'
 
 const useStyles = makeStyles()((theme) => ({
     container: {
@@ -69,53 +61,57 @@ interface TokenTableProps {
 
 export const FungibleTokenTable = memo<TokenTableProps>(({ selectedChainId }) => {
     const navigate = useNavigate()
-    const account = useAccount()
-    const { Asset } = useWeb3PluginState()
-    const { portfolioProvider } = useWeb3State()
-    const network = useNetworkDescriptor()
-    const [tokenUpdateCount, setTokenUpdateCount] = useState(0)
-    const { setDialog: openSwapDialog } = useRemoteControlledDialog(PluginMessages.Swap.swapDialogUpdated)
-
     const {
-        error: detailedTokensError,
-        loading: detailedTokensLoading,
-        value: detailedTokens,
-    } = useAsync(
-        async () => Asset?.getFungibleAssets?.(account, portfolioProvider, network!),
-        [account, Asset, portfolioProvider, tokenUpdateCount],
-    )
+        value: fungibleAssets = EMPTY_LIST,
+        loading: fungibleAssetsLoading,
+        error: fungibleAssetsError,
+    } = useFungibleAssets(NetworkPluginID.PLUGIN_EVM)
+    const { setDialog: openSwapDialog } = useRemoteControlledDialog(PluginMessages.Swap.swapDialogUpdated)
 
     useEffect(() => {
-        PluginMessages.Wallet.events.erc20TokensUpdated.on(() =>
-            setTimeout(() => setTokenUpdateCount((prev) => prev + 1), 100),
-        )
+        // PluginMessages.Wallet.events.erc20TokensUpdated.on(() =>
+        //     setTimeout(() => setTokenUpdateCount((prev) => prev + 1), 100),
+        // )
     }, [])
 
-    const onSwap = useCallback((token: Web3Plugin.FungibleToken) => {
-        openSwapDialog({
-            open: true,
-            traderProps: {
-                defaultInputCoin: {
-                    id: token.id,
-                    name: token.name || '',
-                    symbol: token.symbol || '',
-                    contract_address: token.address,
-                    decimals: token.decimals,
+    const onSwap = useCallback(
+        (
+            token: FungibleAsset<
+                Web3Helper.Definition[NetworkPluginID]['ChainId'],
+                Web3Helper.Definition[NetworkPluginID]['SchemaType']
+            >,
+        ) => {
+            openSwapDialog({
+                open: true,
+                traderProps: {
+                    defaultInputCoin: {
+                        id: token.id,
+                        name: token.name || '',
+                        symbol: token.symbol || '',
+                        contract_address: token.address,
+                        decimals: token.decimals,
+                    },
                 },
-            },
-        })
-    }, [])
+            })
+        },
+        [],
+    )
 
     const onSend = useCallback(
-        (token: Web3Plugin.FungibleToken) => navigate(DashboardRoutes.WalletsTransfer, { state: { token } }),
+        (
+            token: FungibleAsset<
+                Web3Helper.Definition[NetworkPluginID]['ChainId'],
+                Web3Helper.Definition[NetworkPluginID]['SchemaType']
+            >,
+        ) => navigate(DashboardRoutes.WalletsTransfer, { state: { token } }),
         [],
     )
 
     return (
         <TokenTableUI
-            isLoading={detailedTokensLoading}
-            isEmpty={!detailedTokensLoading && (!!detailedTokensError || !detailedTokens?.length)}
-            dataSource={(detailedTokens ?? []).filter((x) => !selectedChainId || x.chainId === selectedChainId)}
+            isLoading={fungibleAssetsLoading}
+            isEmpty={!fungibleAssetsLoading && (!!fungibleAssetsError || !fungibleAssets?.length)}
+            dataSource={fungibleAssets.filter((x) => !selectedChainId || x.chainId === selectedChainId)}
             onSwap={onSwap}
             onSend={onSend}
         />
@@ -125,16 +121,31 @@ export const FungibleTokenTable = memo<TokenTableProps>(({ selectedChainId }) =>
 export interface TokenTableUIProps {
     isLoading: boolean
     isEmpty: boolean
-    dataSource: Array<Web3Plugin.Asset<Web3Plugin.FungibleToken>>
-    onSwap(token: Web3Plugin.FungibleToken): void
-    onSend(token: Web3Plugin.FungibleToken): void
+    dataSource: Array<
+        FungibleAsset<
+            Web3Helper.Definition[NetworkPluginID]['ChainId'],
+            Web3Helper.Definition[NetworkPluginID]['SchemaType']
+        >
+    >
+    onSwap(
+        token: FungibleAsset<
+            Web3Helper.Definition[NetworkPluginID]['ChainId'],
+            Web3Helper.Definition[NetworkPluginID]['SchemaType']
+        >,
+    ): void
+    onSend(
+        token: FungibleAsset<
+            Web3Helper.Definition[NetworkPluginID]['ChainId'],
+            Web3Helper.Definition[NetworkPluginID]['SchemaType']
+        >,
+    ): void
 }
 
 export const TokenTableUI = memo<TokenTableUIProps>(({ onSwap, onSend, isLoading, isEmpty, dataSource }) => {
     const t = useDashboardI18N()
     const { classes } = useStyles()
     const currentPluginId = useCurrentWeb3NetworkPluginID()
-    const { Utils } = useWeb3PluginState()
+    const { Others } = useWeb3State()
 
     return (
         <TableContainer className={classes.container}>
@@ -171,11 +182,9 @@ export const TokenTableUI = memo<TokenTableUIProps>(({ onSwap, onSend, isLoading
                         <TableBody>
                             {dataSource
                                 .sort((first, second) => {
-                                    const firstValue = new BigNumber(
-                                        Utils?.formatBalance?.(first.balance, first.token.decimals) ?? '',
-                                    )
+                                    const firstValue = new BigNumber(formatBalance(first.balance, first.decimals) ?? '')
                                     const secondValue = new BigNumber(
-                                        Utils?.formatBalance?.(second.balance, second.token.decimals) ?? '',
+                                        formatBalance(second.balance, second.decimals) ?? '',
                                     )
 
                                     if (firstValue.isEqualTo(secondValue)) return 0
@@ -184,8 +193,8 @@ export const TokenTableUI = memo<TokenTableUIProps>(({ onSwap, onSend, isLoading
                                 })
                                 .map((asset, index) => (
                                     <FungibleTokenTableRow
-                                        onSend={() => onSend(asset.token)}
-                                        onSwap={() => onSwap(asset.token)}
+                                        onSend={() => onSend(asset)}
+                                        onSwap={() => onSwap(asset)}
                                         asset={asset}
                                         key={index}
                                     />
diff --git a/packages/dashboard/src/pages/Wallets/components/FungibleTokenTableRow/ChangeNetworkTip.tsx b/packages/dashboard/src/pages/Wallets/components/FungibleTokenTableRow/ChangeNetworkTip.tsx
index 25741491728f..4a28680f46cf 100644
--- a/packages/dashboard/src/pages/Wallets/components/FungibleTokenTableRow/ChangeNetworkTip.tsx
+++ b/packages/dashboard/src/pages/Wallets/components/FungibleTokenTableRow/ChangeNetworkTip.tsx
@@ -2,7 +2,7 @@ import { memo } from 'react'
 import { Link, Typography } from '@mui/material'
 import { useDashboardI18N } from '../../../../locales'
 import { MaskColorVar } from '@masknet/theme'
-import { useNetworkDescriptors, useProviderDescriptor, useWeb3UI } from '@masknet/plugin-infra/web3'
+import { useNetworkDescriptors, useProviderDescriptor, useWeb3UI, Web3Helper } from '@masknet/plugin-infra/web3'
 
 interface ChangeNetworkTipProps {
     chainId?: number
@@ -11,9 +11,10 @@ interface ChangeNetworkTipProps {
 export const ChangeNetworkTip = memo<ChangeNetworkTipProps>(({ chainId }) => {
     const t = useDashboardI18N()
 
-    const providerDescriptor = useProviderDescriptor()
-    const { NetworkIconClickBait } = useWeb3UI().SelectNetworkMenu ?? {}
-    const networkDescriptors = useNetworkDescriptors()
+    const providerDescriptor = useProviderDescriptor() as Web3Helper.ProviderDescriptorAll
+    const networkDescriptors = useNetworkDescriptors() as Web3Helper.NetworkDescriptorAll[]
+    const Web3UI = useWeb3UI() as Web3Helper.Web3UIAll
+    const { NetworkIconClickBait } = Web3UI.SelectNetworkMenu ?? {}
     const targetNetwork = networkDescriptors.find((x) => x.chainId === chainId)
 
     if (!chainId) return null
diff --git a/packages/dashboard/src/pages/Wallets/components/FungibleTokenTableRow/index.tsx b/packages/dashboard/src/pages/Wallets/components/FungibleTokenTableRow/index.tsx
index 90edd2545002..6b2a962805ec 100644
--- a/packages/dashboard/src/pages/Wallets/components/FungibleTokenTableRow/index.tsx
+++ b/packages/dashboard/src/pages/Wallets/components/FungibleTokenTableRow/index.tsx
@@ -4,19 +4,25 @@ import { Box, Button, TableCell, TableRow, Tooltip, Typography } from '@mui/mate
 import { getMaskColor, makeStyles } from '@masknet/theme'
 import { FormattedCurrency, TokenIcon, WalletIcon } from '@masknet/shared'
 import {
-    CurrencyType,
-    NetworkPluginID,
     useChainId,
     useNetworkDescriptors,
     useCurrentWeb3NetworkPluginID,
     useWeb3State,
-    Web3Plugin,
+    Web3Helper,
 } from '@masknet/plugin-infra/web3'
+import {
+    CurrencyType,
+    formatBalance,
+    formatCurrency,
+    FungibleAsset,
+    NetworkPluginID,
+    pow10,
+    toFixed,
+} from '@masknet/web3-shared-base'
 import { ChainId } from '@masknet/web3-shared-evm'
 import { useDashboardI18N } from '../../../../locales'
 import { ChangeNetworkTip } from './ChangeNetworkTip'
 import { getTokenUSDValue } from '../../utils/getTokenUSDValue'
-import { pow10, toFixed } from '@masknet/web3-shared-base'
 
 const useStyles = makeStyles()((theme) => ({
     icon: {
@@ -66,7 +72,10 @@ const useStyles = makeStyles()((theme) => ({
 }))
 
 export interface TokenTableRowProps {
-    asset: Web3Plugin.Asset<Web3Plugin.FungibleToken>
+    asset: FungibleAsset<
+        Web3Helper.Definition[NetworkPluginID]['ChainId'],
+        Web3Helper.Definition[NetworkPluginID]['SchemaType']
+    >
     onSwap(): void
     onSend(): void
 }
@@ -75,10 +84,10 @@ export const FungibleTokenTableRow = memo<TokenTableRowProps>(({ asset, onSend,
     const t = useDashboardI18N()
     const { classes } = useStyles()
     const currentChainId = useChainId()
-    const { Utils } = useWeb3State()
+    const { Others } = useWeb3State()
     const networkDescriptors = useNetworkDescriptors()
     const currentPluginId = useCurrentWeb3NetworkPluginID()
-    const isOnCurrentChain = useMemo(() => currentChainId === asset.token.chainId, [asset, currentChainId])
+    const isOnCurrentChain = useMemo(() => currentChainId === asset.chainId, [asset, currentChainId])
 
     return (
         <TableRow className={classes.row}>
@@ -87,30 +96,30 @@ export const FungibleTokenTableRow = memo<TokenTableRowProps>(({ asset, onSend,
                     <Box position="relative">
                         <TokenIcon
                             classes={{ icon: classes.icon }}
-                            address={asset.token.address}
-                            name={asset.token.name}
-                            chainId={asset.token.chainId}
-                            logoURI={asset.logoURI || asset.token.logoURI}
+                            address={asset.address}
+                            name={asset.name}
+                            chainId={asset.chainId}
+                            logoURI={asset.logoURL || asset.logoURL}
                             AvatarProps={{ sx: { width: 36, height: 36 } }}
                         />
                         <Box className={classes.chainIcon}>
                             <WalletIcon
                                 size={16}
-                                networkIcon={networkDescriptors.find((x) => x.chainId === asset.token.chainId)?.icon}
+                                networkIcon={networkDescriptors.find((x) => x.chainId === asset.chainId)?.icon}
                             />
                         </Box>
                     </Box>
-                    <Typography className={classes.symbol}>{asset.token.symbol}</Typography>
+                    <Typography className={classes.symbol}>{asset.symbol}</Typography>
                 </Box>
             </TableCell>
             <TableCell className={classes.cell} align="center" variant="body">
-                <Typography>{toFixed(Utils?.formatBalance?.(asset.balance, asset.token.decimals) ?? '', 6)}</Typography>
+                <Typography>{toFixed(formatBalance(asset.balance, asset.decimals) ?? '', 6)}</Typography>
             </TableCell>
             <TableCell className={classes.cell} align="center" variant="body">
                 <Typography>
                     {asset.price?.[CurrencyType.USD]
                         ? new BigNumber(asset.price[CurrencyType.USD] ?? '').gt(pow10(-6))
-                            ? Utils?.formatCurrency?.(Number.parseFloat(asset.price[CurrencyType.USD] ?? ''), '$')
+                            ? formatCurrency(Number.parseFloat(asset.price[CurrencyType.USD] ?? ''))
                             : '<0.000001'
                         : '-'}
                 </Typography>
@@ -122,8 +131,8 @@ export const FungibleTokenTableRow = memo<TokenTableRowProps>(({ asset, onSend,
                     ) : (
                         <FormattedCurrency
                             value={getTokenUSDValue(asset.value).toFixed(2)}
-                            sign="$"
-                            formatter={Utils?.formatCurrency}
+                            sign="USD"
+                            formatter={formatCurrency}
                         />
                     )}
                 </Typography>
@@ -133,7 +142,7 @@ export const FungibleTokenTableRow = memo<TokenTableRowProps>(({ asset, onSend,
                     <Tooltip
                         disableHoverListener={isOnCurrentChain}
                         disableTouchListener
-                        title={<ChangeNetworkTip chainId={asset.token.chainId} />}
+                        title={<ChangeNetworkTip chainId={asset.chainId} />}
                         placement="top"
                         classes={{ tooltip: classes.tip, arrow: classes.tipArrow }}
                         arrow>
@@ -152,9 +161,9 @@ export const FungibleTokenTableRow = memo<TokenTableRowProps>(({ asset, onSend,
                         </span>
                     </Tooltip>
                     <Tooltip
-                        disableHoverListener={isOnCurrentChain || asset.token.chainId === ChainId.Conflux}
+                        disableHoverListener={isOnCurrentChain || asset.chainId !== ChainId.Conflux}
                         disableTouchListener
-                        title={<ChangeNetworkTip chainId={asset.token.chainId} />}
+                        title={<ChangeNetworkTip chainId={asset.chainId} />}
                         placement="top"
                         classes={{ tooltip: classes.tip, arrow: classes.tipArrow }}
                         arrow>
@@ -162,11 +171,11 @@ export const FungibleTokenTableRow = memo<TokenTableRowProps>(({ asset, onSend,
                             <Button
                                 size="small"
                                 style={
-                                    !isOnCurrentChain || asset.token.chainId === ChainId.Conflux
+                                    !isOnCurrentChain || asset.chainId === ChainId.Conflux
                                         ? { pointerEvents: 'none' }
                                         : {}
                                 }
-                                disabled={!isOnCurrentChain || asset.token.chainId === ChainId.Conflux}
+                                disabled={!isOnCurrentChain || asset.chainId === ChainId.Conflux}
                                 variant="outlined"
                                 color="secondary"
                                 onClick={onSwap}
diff --git a/packages/dashboard/src/pages/Wallets/components/History/index.tsx b/packages/dashboard/src/pages/Wallets/components/History/index.tsx
index 95262b8cda61..6711e29626cf 100644
--- a/packages/dashboard/src/pages/Wallets/components/History/index.tsx
+++ b/packages/dashboard/src/pages/Wallets/components/History/index.tsx
@@ -2,7 +2,7 @@ import { makeStyles } from '@masknet/theme'
 import { memo } from 'react'
 import { ContentContainer } from '../../../../components/ContentContainer'
 import { HistoryTable } from '../HistoryTable'
-import type { ChainId } from '@masknet/web3-shared-evm'
+import type { Web3Helper } from '@masknet/plugin-infra/web3'
 
 const useStyles = makeStyles()({
     container: {
@@ -15,7 +15,7 @@ const useStyles = makeStyles()({
 })
 
 interface HistoryProps {
-    selectedChainId: ChainId
+    selectedChainId: Web3Helper.ChainIdAll
 }
 
 export const History = memo<HistoryProps>(({ selectedChainId }) => {
diff --git a/packages/dashboard/src/pages/Wallets/components/HistoryTable/index.tsx b/packages/dashboard/src/pages/Wallets/components/HistoryTable/index.tsx
index 9eda90f1df67..3a45aecdfdbd 100644
--- a/packages/dashboard/src/pages/Wallets/components/HistoryTable/index.tsx
+++ b/packages/dashboard/src/pages/Wallets/components/HistoryTable/index.tsx
@@ -1,5 +1,4 @@
 import { Dispatch, memo, SetStateAction, useState } from 'react'
-import { ChainId, Transaction, useAccount, useTransactions } from '@masknet/web3-shared-evm'
 import { useUpdateEffect } from 'react-use'
 import { useDashboardI18N } from '../../../../locales'
 import { Box, Table, TableBody, TableCell, TableContainer, TableHead, TablePagination, TableRow } from '@mui/material'
@@ -8,6 +7,10 @@ import { LoadingPlaceholder } from '../../../../components/LoadingPlaceholder'
 import { EmptyPlaceholder } from '../EmptyPlaceholder'
 import { HistoryTableRow } from '../HistoryTableRow'
 import { noop } from 'lodash-unified'
+import { useAccount, useTransactions, Web3Helper } from '@masknet/plugin-infra/web3'
+import { NetworkPluginID, Transaction } from '@masknet/web3-shared-base'
+import { EMPTY_LIST } from '@masknet/shared-base'
+import type { ChainId, SchemaType } from '@masknet/web3-shared-evm'
 
 const useStyles = makeStyles()((theme) => ({
     container: {
@@ -43,19 +46,13 @@ const useStyles = makeStyles()((theme) => ({
 }))
 
 interface HistoryTableProps {
-    selectedChainId: ChainId
+    selectedChainId: Web3Helper.ChainIdAll
 }
 
 export const HistoryTable = memo<HistoryTableProps>(({ selectedChainId }) => {
     const [page, setPage] = useState(0)
-    const account = useAccount()
-    const {
-        value = { transactions: [], hasNextPage: false },
-        loading: transactionLoading,
-        error: transactionError,
-    } = useTransactions(account, page, 50, selectedChainId)
-
-    const { transactions = [], hasNextPage } = value
+    const account = useAccount(NetworkPluginID.PLUGIN_EVM)
+    const { value, loading } = useTransactions()
 
     useUpdateEffect(() => {
         setPage(0)
@@ -65,10 +62,10 @@ export const HistoryTable = memo<HistoryTableProps>(({ selectedChainId }) => {
         <HistoryTableUI
             page={page}
             onPageChange={setPage}
-            hasNextPage={hasNextPage}
-            isLoading={transactionLoading}
-            isEmpty={!!transactionError || !transactions.length}
-            dataSource={transactions}
+            hasNextPage={false}
+            isLoading={loading}
+            isEmpty={!value?.data?.length}
+            dataSource={(value?.data ?? EMPTY_LIST) as Array<Transaction<ChainId, SchemaType>>}
             selectedChainId={selectedChainId}
         />
     )
@@ -80,8 +77,8 @@ export interface HistoryTableUIProps {
     hasNextPage: boolean
     isLoading: boolean
     isEmpty: boolean
-    dataSource: Transaction[]
-    selectedChainId: ChainId
+    dataSource: Array<Transaction<ChainId, SchemaType>>
+    selectedChainId: Web3Helper.ChainIdAll
 }
 
 export const HistoryTableUI = memo<HistoryTableUIProps>(
diff --git a/packages/dashboard/src/pages/Wallets/components/HistoryTableRow/index.tsx b/packages/dashboard/src/pages/Wallets/components/HistoryTableRow/index.tsx
index 89e97440f657..98d4df72a29a 100644
--- a/packages/dashboard/src/pages/Wallets/components/HistoryTableRow/index.tsx
+++ b/packages/dashboard/src/pages/Wallets/components/HistoryTableRow/index.tsx
@@ -1,13 +1,14 @@
+import { memo } from 'react'
+import classNames from 'classnames'
+import formatDateTime from 'date-fns/format'
 import { LinkOutIcon } from '@masknet/icons'
-import { useReverseAddress, useWeb3State } from '@masknet/plugin-infra/web3'
+import { useReverseAddress, useWeb3State, Web3Helper } from '@masknet/plugin-infra/web3'
 import { makeStyles, MaskColorVar } from '@masknet/theme'
-import type { Transaction } from '@masknet/web3-shared-evm'
-import { ChainId, DebankTransactionDirection, ZerionTransactionDirection } from '@masknet/web3-shared-evm'
+import { ChainId, DebankTransactionDirection, SchemaType, ZerionTransactionDirection } from '@masknet/web3-shared-evm'
 import { Box, Link, Stack, TableCell, TableRow, Typography } from '@mui/material'
-import classNames from 'classnames'
-import formatDateTime from 'date-fns/format'
-import { memo } from 'react'
 import { TransactionIcon } from '../TransactionIcon'
+import type { Transaction } from '@masknet/web3-shared-base'
+import BigNumber from 'bignumber.js'
 
 const useStyles = makeStyles()((theme) => ({
     type: {
@@ -48,12 +49,12 @@ const useStyles = makeStyles()((theme) => ({
 }))
 
 export interface HistoryTableRowProps {
-    transaction: Transaction
-    selectedChainId: ChainId
+    transaction: Transaction<ChainId, SchemaType>
+    selectedChainId: Web3Helper.ChainIdAll
 }
 
 export const HistoryTableRow = memo<HistoryTableRowProps>(({ transaction, selectedChainId }) => {
-    const { value: domain } = useReverseAddress(transaction.toAddress)
+    const { value: domain } = useReverseAddress(undefined, transaction.to)
 
     const transactionType = (transaction.type ?? '').replace(/_/g, ' ')
 
@@ -68,7 +69,7 @@ export const HistoryTableRow = memo<HistoryTableRowProps>(({ transaction, select
 })
 
 export interface HistoryTableRowUIProps extends HistoryTableRowProps {
-    selectedChainId: ChainId
+    selectedChainId: Web3Helper.ChainIdAll
     formattedType: string
     domain?: string
 }
@@ -76,29 +77,29 @@ export interface HistoryTableRowUIProps extends HistoryTableRowProps {
 export const HistoryTableRowUI = memo<HistoryTableRowUIProps>(
     ({ transaction, selectedChainId, formattedType, domain }) => {
         const { classes } = useStyles()
-        const { Utils } = useWeb3State()
+        const { Others } = useWeb3State() as Web3Helper.Web3StateAll
         return (
             <TableRow className={classes.hover}>
                 <TableCell className={classes.cell} align="center" variant="body">
                     <Box style={{ display: 'flex', alignItems: 'center' }}>
                         <TransactionIcon
-                            transactionType={transaction.transactionType}
+                            transactionType={transaction.type}
                             type={transaction.type}
-                            address={transaction.toAddress}
-                            failed={transaction.failed}
+                            address={transaction.to}
+                            failed={transaction.status === 0}
                         />
                         <Stack pl={2}>
                             <Typography textAlign="left" className={classes.type} variant="body2">
                                 {formattedType}
                             </Typography>
                             <Typography fontSize={12} textAlign="left" color={MaskColorVar.textSecondary}>
-                                {formatDateTime(transaction.timeAt, 'yyyy-MM-dd HH:mm')}
+                                {formatDateTime(transaction.timestamp, 'yyyy-MM-dd HH:mm')}
                             </Typography>
                         </Stack>
                     </Box>
                 </TableCell>
                 <TableCell className={classes.cell} align="center">
-                    {transaction.pairs.map((pair, index) => {
+                    {transaction.tokens.map((pair, index) => {
                         const direction =
                             pair.direction === DebankTransactionDirection.SEND ||
                             pair.direction === ZerionTransactionDirection.OUT
@@ -111,7 +112,11 @@ export const HistoryTableRowUI = memo<HistoryTableRowUIProps>(
                                 direction="row">
                                 <Box width="50%" flexGrow={0} flexShrink={0} textAlign="right">
                                     <span>{direction ? '-' : '+'}</span>
-                                    <span>{pair.amount.toFixed(pair.amount < 1 ? 6 : 2)}</span>
+                                    <span>
+                                        {new BigNumber(pair.amount).toFixed(
+                                            new BigNumber(pair.amount).toNumber() < 1 ? 6 : 2,
+                                        )}
+                                    </span>
                                 </Box>
                                 <Box width="50%" flexGrow={0} flexShrink={0} textAlign="left">
                                     <Typography variant="body2" color={MaskColorVar.textPrimary}>
@@ -125,13 +130,11 @@ export const HistoryTableRowUI = memo<HistoryTableRowUIProps>(
                 <TableCell className={classes.cell} align="center">
                     <Box className={classes.link}>
                         <Typography variant="body2">
-                            {domain
-                                ? Utils?.formatDomainName?.(domain)
-                                : Utils?.formatAddress?.(transaction.toAddress, 4)}
+                            {domain ? Others?.formatDomainName?.(domain) : Others?.formatAddress?.(transaction.to, 4)}
                         </Typography>
                         <Link
                             sx={{ height: 21 }}
-                            href={Utils?.resolveTransactionLink?.(selectedChainId, transaction.id)}
+                            href={Others?.explorerResolver.transactionLink(selectedChainId, transaction.id)}
                             target="_blank"
                             rel="noopener noreferrer">
                             <LinkOutIcon className={classes.linkIcon} />
diff --git a/packages/dashboard/src/pages/Wallets/components/ReceiveDialog/index.tsx b/packages/dashboard/src/pages/Wallets/components/ReceiveDialog/index.tsx
index 7e33574c0887..6deec8af71aa 100644
--- a/packages/dashboard/src/pages/Wallets/components/ReceiveDialog/index.tsx
+++ b/packages/dashboard/src/pages/Wallets/components/ReceiveDialog/index.tsx
@@ -1,13 +1,12 @@
 import { memo } from 'react'
-import { useDashboardI18N } from '../../../../locales'
+import { useCopyToClipboard } from 'react-use'
 import { MaskColorVar, MaskDialog, makeStyles } from '@masknet/theme'
 import { QRCode, useSnackbarCallback } from '@masknet/shared'
 import { DialogContent, Typography, DialogActions, Button } from '@mui/material'
+import { useChainId, useReverseAddress, useWeb3State, Web3Helper } from '@masknet/plugin-infra/web3'
+import { chainResolver } from '@masknet/web3-shared-evm'
 import { WalletQRCodeContainer } from '../../../../components/WalletQRCodeContainer'
-import { useCopyToClipboard } from 'react-use'
-import { useCurrentSelectedWalletNetwork } from '../../api'
-import { NetworkType, resolveNetworkAddressPrefix } from '@masknet/web3-shared-evm'
-import { useReverseAddress, useWeb3State } from '@masknet/plugin-infra/web3'
+import { useDashboardI18N } from '../../../../locales'
 
 const useStyles = makeStyles()((theme) => ({
     paper: {
@@ -30,84 +29,82 @@ const useStyles = makeStyles()((theme) => ({
 
 export interface ReceiveDialogProps {
     open: boolean
-    chainName: string
-    walletAddress: string
+    address: string
     onClose: () => void
 }
 
-export const ReceiveDialog = memo<ReceiveDialogProps>(({ open, chainName, walletAddress, onClose }) => {
-    const currentSelectedWalletNetwork = useCurrentSelectedWalletNetwork()
-    const { value: domain } = useReverseAddress(walletAddress)
-    const { Utils } = useWeb3State()
+export const ReceiveDialog = memo<ReceiveDialogProps>(({ open, address, onClose }) => {
+    const { Others } = useWeb3State()
+
+    const chainId = useChainId()
+    const { value: domain } = useReverseAddress(undefined, address)
+
     return (
         <ReceiveDialogUI
             open={open}
-            chainName={chainName}
-            walletAddress={walletAddress}
-            domain={domain}
+            chainId={chainId}
+            address={address}
+            domain={Others?.formatDomainName(domain)}
             onClose={onClose}
-            currentNetworkType={currentSelectedWalletNetwork}
-            formatDomainName={Utils?.formatDomainName}
         />
     )
 })
 
 export interface ReceiveDialogUIProps extends ReceiveDialogProps {
-    currentNetworkType: NetworkType
+    chainId: Web3Helper.ChainIdAll
     domain?: string
-    formatDomainName?: (domain?: string, size?: number) => string | undefined
 }
 
-export const ReceiveDialogUI = memo<ReceiveDialogUIProps>(
-    ({ open, currentNetworkType, chainName, onClose, walletAddress, domain, formatDomainName }) => {
-        const { classes } = useStyles()
-        const t = useDashboardI18N()
-        const [, copyToClipboard] = useCopyToClipboard()
-        const copyWalletAddress = useSnackbarCallback({
-            executor: async (address: string) => copyToClipboard(address),
-            deps: [],
-            successText: t.wallets_address_copied(),
-        })
-        // TODO: The <QRCode /> text prop protocol maybe correct and requires confirmation
-        return (
-            <MaskDialog
-                open={open}
-                title={t.wallets_balance_Receive()}
-                onClose={onClose}
-                DialogProps={{
-                    classes: { paper: classes.paper },
-                }}>
-                <DialogContent className={classes.container}>
-                    <Typography sx={{ marginBottom: 3.5 }}>{t.wallets_receive_tips({ chainName })}</Typography>
-                    <WalletQRCodeContainer width={286} height={286} border={{ borderWidth: 15, borderHeight: 2 }}>
-                        <QRCode
-                            text={`${resolveNetworkAddressPrefix(currentNetworkType)}:${walletAddress}`}
-                            options={{ width: 282 }}
-                            canvasProps={{
-                                style: { display: 'block', margin: 'auto' },
-                            }}
-                        />
-                    </WalletQRCodeContainer>
-                    <Typography variant="body2" className={classes.addressTitle}>
-                        {t.wallets_address()}
-                    </Typography>
-
-                    {domain && formatDomainName ? (
-                        <Typography variant="body2" className={classes.address}>
-                            {formatDomainName(domain)}
-                        </Typography>
-                    ) : null}
+export const ReceiveDialogUI = memo<ReceiveDialogUIProps>(({ open, chainId, address, domain, onClose }) => {
+    const t = useDashboardI18N()
+    const { classes } = useStyles()
+    const [, copyToClipboard] = useCopyToClipboard()
+    const copyAddress = useSnackbarCallback({
+        executor: async (address: string) => copyToClipboard(address),
+        deps: [],
+        successText: t.wallets_address_copied(),
+    })
+    // TODO: The <QRCode /> text prop protocol maybe correct and requires confirmation
+    return (
+        <MaskDialog
+            open={open}
+            title={t.wallets_balance_Receive()}
+            onClose={onClose}
+            DialogProps={{
+                classes: { paper: classes.paper },
+            }}>
+            <DialogContent className={classes.container}>
+                <Typography sx={{ marginBottom: 3.5 }}>
+                    {t.wallets_receive_tips({ chainName: chainResolver.chainName(chainId as number) ?? '' })}
+                </Typography>
+                <WalletQRCodeContainer width={286} height={286} border={{ borderWidth: 15, borderHeight: 2 }}>
+                    <QRCode
+                        text={`${chainResolver.chainPrefix(chainId as number)}:${address}`}
+                        options={{ width: 282 }}
+                        canvasProps={{
+                            style: { display: 'block', margin: 'auto' },
+                        }}
+                    />
+                </WalletQRCodeContainer>
+                <Typography variant="body2" className={classes.addressTitle}>
+                    {t.wallets_address()}
+                </Typography>
 
+                {domain ? (
                     <Typography variant="body2" className={classes.address}>
-                        {walletAddress}
+                        {domain}
                     </Typography>
-                </DialogContent>
-                <DialogActions>
-                    <Button size="medium" onClick={() => copyWalletAddress(walletAddress)}>
-                        {t.wallets_address_copy()}
-                    </Button>
-                </DialogActions>
-            </MaskDialog>
-        )
-    },
-)
+                ) : null}
+
+                <Typography variant="body2" className={classes.address}>
+                    {address}
+                </Typography>
+            </DialogContent>
+            <DialogActions>
+                <Button size="medium" onClick={() => copyAddress(address)}>
+                    {t.wallets_address_copy()}
+                </Button>
+            </DialogActions>
+        </MaskDialog>
+    )
+})
diff --git a/packages/dashboard/src/pages/Wallets/components/SelectTokenDialog/index.tsx b/packages/dashboard/src/pages/Wallets/components/SelectTokenDialog/index.tsx
index dd2ce2717fd5..10528de822ea 100644
--- a/packages/dashboard/src/pages/Wallets/components/SelectTokenDialog/index.tsx
+++ b/packages/dashboard/src/pages/Wallets/components/SelectTokenDialog/index.tsx
@@ -1,14 +1,15 @@
 import { memo } from 'react'
 import { MaskDialog } from '@masknet/theme'
 import { useDashboardI18N } from '../../../../locales'
-import { ERC20TokenList } from '@masknet/shared'
+import { FungibleTokenList } from '@masknet/shared'
 import { DialogContent } from '@mui/material'
-import type { FungibleTokenDetailed } from '@masknet/web3-shared-evm'
+import type { FungibleToken } from '@masknet/web3-shared-base'
+import type { ChainId, SchemaType } from '@masknet/web3-shared-evm'
 
 export interface SelectTokenDialogProps {
     open: boolean
     onClose: () => void
-    onSelect?(token: FungibleTokenDetailed | null): void
+    onSelect?(token: FungibleToken<ChainId, SchemaType> | null): void
 }
 
 // todo use remote dialog for add token list dialog
@@ -18,7 +19,7 @@ export const SelectTokenDialog = memo<SelectTokenDialogProps>(({ open, onClose,
     return (
         <MaskDialog maxWidth="md" open={open} title={t.wallets_add_token()} onClose={onClose}>
             <DialogContent>
-                <ERC20TokenList onSelect={onSelect} />
+                <FungibleTokenList onSelect={onSelect} />
             </DialogContent>
         </MaskDialog>
     )
diff --git a/packages/dashboard/src/pages/Wallets/components/TransactionIcon/index.tsx b/packages/dashboard/src/pages/Wallets/components/TransactionIcon/index.tsx
index acd6fd483c64..26c68d834126 100644
--- a/packages/dashboard/src/pages/Wallets/components/TransactionIcon/index.tsx
+++ b/packages/dashboard/src/pages/Wallets/components/TransactionIcon/index.tsx
@@ -1,6 +1,7 @@
 import { memo, useMemo } from 'react'
 import { CloseIcon, DownloadIcon, InteractionIcon, ITOIcon, RedPacketIcon, UploadIcon } from '@masknet/icons'
-import { FilterTransactionType, isSameAddress, TransactionType, useRedPacketConstants } from '@masknet/web3-shared-evm'
+import { isSameAddress } from '@masknet/web3-shared-base'
+import { FilterTransactionType, TransactionType, useRedPacketConstants } from '@masknet/web3-shared-evm'
 import { makeStyles, MaskColorVar } from '@masknet/theme'
 import { Box } from '@mui/material'
 import classNames from 'classnames'
@@ -29,7 +30,7 @@ const useStyles = makeStyles()(() => ({
 
 export interface TransactionIconProps {
     type?: string
-    transactionType: string
+    transactionType?: string
     address: string
     failed: boolean
 }
@@ -52,7 +53,7 @@ export interface TransactionIconUIProps {
     isRedPacket: boolean
     isFailed: boolean
     type?: string
-    transactionType: string
+    transactionType?: string
 }
 
 export const TransactionIconUI = memo<TransactionIconUIProps>(({ isFailed, isRedPacket, type, transactionType }) => {
diff --git a/packages/dashboard/src/pages/Wallets/components/Transfer/NFTCard.tsx b/packages/dashboard/src/pages/Wallets/components/Transfer/NFTCard.tsx
index 936f25160b62..7cbb411891cf 100644
--- a/packages/dashboard/src/pages/Wallets/components/Transfer/NFTCard.tsx
+++ b/packages/dashboard/src/pages/Wallets/components/Transfer/NFTCard.tsx
@@ -1,9 +1,10 @@
-import type { ERC721TokenDetailed } from '@masknet/web3-shared-evm'
 import { memo, useMemo, useState } from 'react'
 import { Checkbox, ImageListItem, ImageListItemBar, Box } from '@mui/material'
 import { getMaskColor, makeStyles, MaskColorVar } from '@masknet/theme'
 import { CheckedBorderIcon, CheckedIcon } from '@masknet/icons'
 import { NFTCardStyledAssetPlayer } from '@masknet/shared'
+import type { NonFungibleToken } from '@masknet/web3-shared-base'
+import type { ChainId, SchemaType } from '@masknet/web3-shared-evm'
 
 const useStyles = makeStyles()({
     card: {
@@ -60,7 +61,7 @@ const useStyles = makeStyles()({
 })
 
 export interface NFTCardProps {
-    token: ERC721TokenDetailed
+    token: NonFungibleToken<ChainId, SchemaType>
     selectedTokenId: string
     onSelect(tokenId: string): void
     renderOrder: number
@@ -103,8 +104,8 @@ export const NFTCard = memo<NFTCardProps>(({ token, selectedTokenId, onSelect, r
             }}
             className={isDisabled ? classes.disabled : ''}>
             <NFTCardStyledAssetPlayer
-                contractAddress={token.contractDetailed.address}
-                chainId={token.contractDetailed.chainId}
+                contractAddress={token.address}
+                chainId={token.chainId}
                 tokenId={token.tokenId}
                 setERC721TokenName={setName}
                 renderOrder={renderOrder}
diff --git a/packages/dashboard/src/pages/Wallets/components/Transfer/SelectNFTList.tsx b/packages/dashboard/src/pages/Wallets/components/Transfer/SelectNFTList.tsx
index 2dc7444bc261..9a4da8ee614c 100644
--- a/packages/dashboard/src/pages/Wallets/components/Transfer/SelectNFTList.tsx
+++ b/packages/dashboard/src/pages/Wallets/components/Transfer/SelectNFTList.tsx
@@ -1,13 +1,14 @@
-import type { ERC721TokenDetailed } from '@masknet/web3-shared-evm'
 import { memo, useMemo } from 'react'
 import { Box, ImageList, Typography, ImageListItem, Stack } from '@mui/material'
 import { NFTCard } from './NFTCard'
 import { LoadingAnimation } from '@masknet/shared'
 import { MaskColorVar } from '@masknet/theme'
 import { useDashboardI18N } from '../../../../locales'
+import type { NonFungibleToken } from '@masknet/web3-shared-base'
+import type { ChainId, SchemaType } from '@masknet/web3-shared-evm'
 
 interface SelectNFTListProps {
-    list: ERC721TokenDetailed[]
+    list: Array<NonFungibleToken<ChainId, SchemaType>>
     selectedTokenId: string
     loading: boolean
     error?: boolean
diff --git a/packages/dashboard/src/pages/Wallets/components/Transfer/TransferERC20.tsx b/packages/dashboard/src/pages/Wallets/components/Transfer/TransferERC20.tsx
index 8b28406f77b6..f544b66511ab 100644
--- a/packages/dashboard/src/pages/Wallets/components/Transfer/TransferERC20.tsx
+++ b/packages/dashboard/src/pages/Wallets/components/Transfer/TransferERC20.tsx
@@ -1,46 +1,52 @@
 import { RightIcon } from '@masknet/icons'
+import { useGasLimit, useTokenTransferCallback } from '@masknet/plugin-infra/web3-evm'
 import {
-    NetworkPluginID,
-    TokenType,
+    useChainId,
+    useFungibleTokenBalance,
+    useGasPrice,
     useLookupAddress,
     useNetworkDescriptor,
     useWeb3State,
-    Web3Plugin,
+    useNativeToken,
+    useNativeTokenPrice,
 } from '@masknet/plugin-infra/web3'
-import { NetworkType } from '@masknet/public-api'
 import { FormattedAddress, TokenAmountPanel, usePickToken } from '@masknet/shared'
 import { MaskColorVar, MaskTextField } from '@masknet/theme'
-import { isGreaterThan, isZero, multipliedBy, rightShift } from '@masknet/web3-shared-base'
+import {
+    TokenType,
+    FungibleToken,
+    isGreaterThan,
+    isSameAddress,
+    isZero,
+    multipliedBy,
+    NetworkPluginID,
+    rightShift,
+} from '@masknet/web3-shared-base'
 import {
     addGasMargin,
-    EthereumTokenType,
+    SchemaType,
     formatWeiToEther,
-    FungibleTokenDetailed,
-    isEIP1559Supported,
-    isSameAddress,
-    useChainId,
-    useFungibleTokenBalance,
-    useGasLimit,
-    useGasPrice,
-    useNativeTokenDetailed,
     useTokenConstants,
-    useTokenTransferCallback,
+    ChainId,
+    chainResolver,
+    explorerResolver,
+    isValidAddress,
+    NetworkType,
 } from '@masknet/web3-shared-evm'
 import TuneIcon from '@mui/icons-material/Tune'
 import { Box, Button, IconButton, Link, Popover, Stack, Typography } from '@mui/material'
 import BigNumber from 'bignumber.js'
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useUpdateEffect } from 'react-use'
-import { EthereumAddress } from 'wallet.ts'
 import { useDashboardI18N } from '../../../../locales'
 import { useGasConfig } from '../../hooks/useGasConfig'
-import { useNativeTokenPrice } from './useNativeTokenPrice'
 
-interface TransferERC20Props {
-    token: FungibleTokenDetailed | Web3Plugin.FungibleToken
+export interface TransferERC20Props {
+    token: FungibleToken<ChainId, SchemaType>
 }
 
 const GAS_LIMIT = 21000
+
 export const TransferERC20 = memo<TransferERC20Props>(({ token }) => {
     const t = useDashboardI18N()
     const { NATIVE_TOKEN_ADDRESS } = useTokenConstants()
@@ -53,14 +59,14 @@ export const TransferERC20 = memo<TransferERC20Props>(({ token }) => {
     const network = useNetworkDescriptor()
     const [gasLimit_, setGasLimit_] = useState(0)
 
-    const { value: defaultGasPrice = '0' } = useGasPrice()
+    const { value: defaultGasPrice = '0' } = useGasPrice(NetworkPluginID.PLUGIN_EVM)
 
-    const [selectedToken, setSelectedToken] = useState<FungibleTokenDetailed | Web3Plugin.FungibleToken>(token)
+    const [selectedToken, setSelectedToken] = useState(token)
     const pickToken = usePickToken()
-    const chainId = useChainId()
-    const is1559Supported = useMemo(() => isEIP1559Supported(chainId), [chainId])
+    const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
+    const is1559Supported = useMemo(() => chainResolver.isSupport(chainId, 'EIP1559'), [chainId])
 
-    const { Utils } = useWeb3State()
+    const { Others } = useWeb3State()
 
     useEffect(() => {
         setSelectedToken(token)
@@ -68,22 +74,22 @@ export const TransferERC20 = memo<TransferERC20Props>(({ token }) => {
 
     // workaround: transferERC20 should support non-evm network
     const isNativeToken = isSameAddress(selectedToken?.address, NATIVE_TOKEN_ADDRESS)
-    const tokenType = isNativeToken ? EthereumTokenType.Native : EthereumTokenType.ERC20
+    const tokenType = isNativeToken ? SchemaType.Native : SchemaType.ERC20
 
     // balance
-    const { value: tokenBalance = '0', retry: refetchTokenBalance } = useFungibleTokenBalance(
-        tokenType,
+    const { value: tokenBalance = '0', retry: tokenBalanceRetry } = useFungibleTokenBalance(
+        NetworkPluginID.PLUGIN_EVM,
         selectedToken?.address ?? '',
     )
-    const nativeToken = useNativeTokenDetailed()
-    const nativeTokenPrice = useNativeTokenPrice()
+    const nativeToken = useNativeToken(NetworkPluginID.PLUGIN_EVM)
+    const nativeTokenPrice = useNativeTokenPrice(NetworkPluginID.PLUGIN_EVM)
 
     // #region resolve ENS domain
     const {
         value: registeredAddress = '',
         error: resolveDomainError,
         loading: resolveDomainLoading,
-    } = useLookupAddress(address, NetworkPluginID.PLUGIN_EVM)
+    } = useLookupAddress(NetworkPluginID.PLUGIN_EVM, address)
     // #endregion
 
     // transfer amount
@@ -91,12 +97,12 @@ export const TransferERC20 = memo<TransferERC20Props>(({ token }) => {
     const erc20GasLimit = useGasLimit(
         selectedToken.type === TokenType.Fungible
             ? selectedToken.symbol === nativeToken.value?.symbol
-                ? EthereumTokenType.Native
-                : EthereumTokenType.ERC20
-            : selectedToken.type,
+                ? SchemaType.Native
+                : SchemaType.ERC20
+            : selectedToken.schema,
         selectedToken.address,
         transferAmount,
-        EthereumAddress.isValid(address) ? address : registeredAddress,
+        isValidAddress(address) ? address : registeredAddress,
     )
     const { gasConfig, onCustomGasSetting, gasLimit, maxFee } = useGasConfig(gasLimit_, GAS_LIMIT)
 
@@ -110,14 +116,14 @@ export const TransferERC20 = memo<TransferERC20Props>(({ token }) => {
         const price = is1559Supported && maxFee ? new BigNumber(maxFee) : gasPrice
         return multipliedBy(gasLimit, price)
     }, [gasLimit, gasPrice, maxFee, is1559Supported])
-    const gasFeeInUsd = formatWeiToEther(gasFee).multipliedBy(nativeTokenPrice)
+    const gasFeeInUsd = formatWeiToEther(gasFee).multipliedBy(nativeTokenPrice.value ?? 0)
 
     const maxAmount = useMemo(() => {
         const price = is1559Supported && maxFee ? new BigNumber(maxFee) : gasPrice
         const gasFee = multipliedBy(addGasMargin(gasLimit), price)
 
         let amount_ = new BigNumber(tokenBalance || '0')
-        amount_ = selectedToken.type === EthereumTokenType.Native ? amount_.minus(gasFee) : amount_
+        amount_ = selectedToken.schema === SchemaType.Native ? amount_.minus(gasFee) : amount_
         return BigNumber.max(0, amount_).toFixed()
     }, [tokenBalance, gasPrice, selectedToken?.type, amount, gasLimit, maxFee, is1559Supported])
 
@@ -125,18 +131,18 @@ export const TransferERC20 = memo<TransferERC20Props>(({ token }) => {
 
     const onTransfer = useCallback(async () => {
         let hash: string | undefined
-        if (EthereumAddress.isValid(address)) {
+        if (isValidAddress(address)) {
             hash = await transferCallback(transferAmount, address, gasConfig, memo)
-        } else if (Utils?.isValidDomain?.(address)) {
+        } else if (Others?.isValidDomain?.(address)) {
             hash = await transferCallback(transferAmount, registeredAddress, gasConfig, memo)
         }
         if (typeof hash === 'string') {
             setMemo('')
             setAddress('')
             setAmount('')
-            refetchTokenBalance()
+            tokenBalanceRetry()
         }
-    }, [transferAmount, address, memo, selectedToken.decimals, transferCallback, gasConfig, registeredAddress, Utils])
+    }, [transferAmount, address, memo, selectedToken.decimals, transferCallback, gasConfig, registeredAddress, Others])
 
     // #region validation
     const validationMessage = useMemo(() => {
@@ -144,9 +150,9 @@ export const TransferERC20 = memo<TransferERC20Props>(({ token }) => {
         if (isGreaterThan(rightShift(amount, selectedToken.decimals), maxAmount))
             return t.wallets_transfer_error_insufficient_balance({ symbol: selectedToken.symbol ?? '' })
         if (!address) return t.wallets_transfer_error_address_absence()
-        if (!(EthereumAddress.isValid(address) || Utils?.isValidDomain?.(address)))
+        if (!(isValidAddress(address) || Others?.isValidDomain?.(address)))
             return t.wallets_transfer_error_invalid_address()
-        if (Utils?.isValidDomain?.(address) && (resolveDomainError || !registeredAddress)) {
+        if (Others?.isValidDomain?.(address) && (resolveDomainError || !registeredAddress)) {
             if (network?.type !== NetworkType.Ethereum) return t.wallet_transfer_error_no_ens_support()
             return t.wallet_transfer_error_no_address_has_been_set_name()
         }
@@ -158,10 +164,10 @@ export const TransferERC20 = memo<TransferERC20Props>(({ token }) => {
         tokenBalance,
         selectedToken,
         amount,
-        Utils,
         registeredAddress,
         resolveDomainError,
         network,
+        Others,
     ])
     // #endregion
 
@@ -171,7 +177,7 @@ export const TransferERC20 = memo<TransferERC20Props>(({ token }) => {
             return (
                 <Box style={{ padding: 10, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                     <Link
-                        href={Utils?.resolveDomainLink?.(address)}
+                        href={explorerResolver.domainLink(chainId, address)}
                         target="_blank"
                         rel="noopener noreferrer"
                         underline="none">
@@ -184,7 +190,7 @@ export const TransferERC20 = memo<TransferERC20Props>(({ token }) => {
                             {address}
                         </Typography>
                         <Typography fontSize={14} lineHeight="20px" style={{ color: MaskColorVar.textSecondary }}>
-                            <FormattedAddress address={registeredAddress} size={4} formatter={Utils?.formatAddress} />
+                            <FormattedAddress address={registeredAddress} size={4} formatter={Others?.formatAddress} />
                         </Typography>
                     </Link>
                     <RightIcon />
@@ -202,7 +208,7 @@ export const TransferERC20 = memo<TransferERC20Props>(({ token }) => {
                     </Box>
                 )
             }
-            if (Utils?.isValidDomain?.(address) && resolveDomainError) {
+            if (Others?.isValidDomain?.(address) && resolveDomainError) {
                 return (
                     <Box style={{ padding: '25px 10px' }}>
                         <Typography color="#FF5F5F" fontSize={16} fontWeight={500} lineHeight="22px">
@@ -217,7 +223,7 @@ export const TransferERC20 = memo<TransferERC20Props>(({ token }) => {
     }, [
         registeredAddress,
         address,
-        Utils?.isValidDomain,
+        Others?.isValidDomain,
         MaskColorVar,
         resolveDomainError,
         network?.type,
@@ -268,7 +274,7 @@ export const TransferERC20 = memo<TransferERC20Props>(({ token }) => {
                         maxAmount={maxAmount}
                         balance={tokenBalance}
                         label={t.wallets_transfer_amount()}
-                        token={selectedToken as FungibleTokenDetailed}
+                        token={selectedToken}
                         onAmountChange={setAmount}
                         SelectTokenChip={{
                             loading: false,
diff --git a/packages/dashboard/src/pages/Wallets/components/Transfer/TransferERC721.tsx b/packages/dashboard/src/pages/Wallets/components/Transfer/TransferERC721.tsx
index 3f546e33fd4c..4056869e28fc 100644
--- a/packages/dashboard/src/pages/Wallets/components/Transfer/TransferERC721.tsx
+++ b/packages/dashboard/src/pages/Wallets/components/Transfer/TransferERC721.tsx
@@ -1,46 +1,46 @@
-import { zodResolver } from '@hookform/resolvers/zod'
-import { RightIcon } from '@masknet/icons'
-import { NetworkPluginID, useLookupAddress, useNetworkDescriptor, useWeb3State } from '@masknet/plugin-infra/web3'
-import { WalletMessages } from '@masknet/plugin-wallet'
-import { NetworkType } from '@masknet/public-api'
-import { FormattedAddress } from '@masknet/shared'
-import { DashboardRoutes } from '@masknet/shared-base'
-import { useRemoteControlledDialog } from '@masknet/shared-base-ui'
 import { makeStyles, MaskColorVar, MaskTextField } from '@masknet/theme'
-import { useERC721TokenDetailedOwnerList } from '@masknet/web3-providers'
-import { multipliedBy } from '@masknet/web3-shared-base'
-import {
-    ERC721ContractDetailed,
-    ERC721TokenDetailed,
-    EthereumTokenType,
-    formatWeiToEther,
-    isSameAddress,
-    isValidAddress,
-    useAccount,
-    useChainId,
-    useGasLimit,
-    useGasPrice,
-    useNativeTokenDetailed,
-    useTokenTransferCallback,
-} from '@masknet/web3-shared-evm'
-import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown'
-import TuneIcon from '@mui/icons-material/Tune'
 import { Box, Button, IconButton, Link, Popover, Stack, Typography } from '@mui/material'
-import { unionBy } from 'lodash-unified'
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import { Controller, useForm } from 'react-hook-form'
-import { useLocation, useNavigate } from 'react-router-dom'
 import { useAsync, useUpdateEffect } from 'react-use'
 import { v4 as uuid } from 'uuid'
-import { EthereumAddress } from 'wallet.ts'
-import { z } from 'zod'
-import { Services } from '../../../../API'
-import { LoadingPlaceholder } from '../../../../components/LoadingPlaceholder'
+import {
+    isSameAddress,
+    NonFungibleToken,
+    NonFungibleTokenContract,
+    multipliedBy,
+    NetworkPluginID,
+} from '@masknet/web3-shared-base'
+import { SchemaType, formatWeiToEther, NetworkType, ChainId, explorerResolver } from '@masknet/web3-shared-evm'
+// import { useERC721TokenDetailedOwnerList } from '@masknet/web3-providers'
+import { FormattedAddress } from '@masknet/shared'
 import { useDashboardI18N } from '../../../../locales'
-import { useGasConfig } from '../../hooks/useGasConfig'
+import { WalletMessages } from '@masknet/plugin-wallet'
 import { SelectNFTList } from './SelectNFTList'
+import { LoadingPlaceholder } from '../../../../components/LoadingPlaceholder'
+import { z } from 'zod'
+import { EthereumAddress } from 'wallet.ts'
+import { Controller, useForm } from 'react-hook-form'
+import { zodResolver } from '@hookform/resolvers/zod'
+import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown'
+import TuneIcon from '@mui/icons-material/Tune'
+import { useNavigate, useLocation } from 'react-router-dom'
+import { DashboardRoutes } from '@masknet/shared-base'
+import { useRemoteControlledDialog } from '@masknet/shared-base-ui'
+import { useGasConfig } from '../../hooks/useGasConfig'
+import { unionBy } from 'lodash-unified'
 import { TransferTab } from './types'
-import { useNativeTokenPrice } from './useNativeTokenPrice'
+import {
+    useAccount,
+    useChainId,
+    useGasPrice,
+    useLookupAddress,
+    useNetworkDescriptor,
+    useWeb3State,
+    useNativeToken,
+    useNativeTokenPrice,
+} from '@masknet/plugin-infra/web3'
+import { RightIcon } from '@masknet/icons'
+import { useGasLimit, useTokenTransferCallback } from '@masknet/plugin-infra/web3-evm'
 
 const useStyles = makeStyles()((theme) => ({
     disabled: {
@@ -58,14 +58,14 @@ const GAS_LIMIT = 30000
 
 export const TransferERC721 = memo(() => {
     const t = useDashboardI18N()
-    const chainId = useChainId()
+    const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
     const anchorEl = useRef<HTMLDivElement | null>(null)
 
     const { state } = useLocation() as {
-        state: { erc721Token?: ERC721TokenDetailed; type?: TransferTab } | null
+        state: { erc721Token?: NonFungibleToken<ChainId, SchemaType>; type?: TransferTab } | null
     }
     const { classes } = useStyles()
-    const [defaultToken, setDefaultToken] = useState<ERC721TokenDetailed | null>(null)
+    const [defaultToken, setDefaultToken] = useState<NonFungibleToken<ChainId, SchemaType> | null>(null)
     const navigate = useNavigate()
     const [popoverOpen, setPopoverOpen] = useState(false)
     const [recipientError, setRecipientError] = useState<{
@@ -73,18 +73,22 @@ export const TransferERC721 = memo(() => {
         message: string
     } | null>(null)
     const [minPopoverWidth, setMinPopoverWidth] = useState(0)
-    const [contract, setContract] = useState<ERC721ContractDetailed>()
+    const [contract, setContract] = useState<NonFungibleTokenContract<ChainId, SchemaType>>()
     const [id] = useState(uuid)
     const [gasLimit_, setGasLimit_] = useState(0)
     const network = useNetworkDescriptor()
-    const { Utils } = useWeb3State()
+    const { Others } = useWeb3State()
+
+    const account = useAccount(NetworkPluginID.PLUGIN_EVM)
+    const nativeToken = useNativeToken(NetworkPluginID.PLUGIN_EVM)
+    const nativeTokenPrice = useNativeTokenPrice(NetworkPluginID.PLUGIN_EVM)
 
     // form
     const schema = z.object({
         recipient: z
             .string()
             .refine(
-                (address) => EthereumAddress.isValid(address) || Utils?.isValidDomain?.(address),
+                (address) => EthereumAddress.isValid(address) || Others?.isValidDomain?.(address),
                 t.wallets_incorrect_address(),
             ),
         contract: z.string().min(1, t.wallets_collectible_contract_is_empty()),
@@ -106,11 +110,11 @@ export const TransferERC721 = memo(() => {
     useEffect(() => {
         if (!state) return
         if (!state.erc721Token || state.type !== TransferTab.Collectibles) return
-        if (state.erc721Token.contractDetailed.chainId !== chainId) return
-        if (contract && !isSameAddress(contract.address, state.erc721Token.contractDetailed.address)) return
+        if (state.erc721Token.chainId !== chainId) return
+        if (!isSameAddress(contract?.address, state.erc721Token.address)) return
 
-        setContract(state.erc721Token.contractDetailed)
-        setValue('contract', state.erc721Token.contractDetailed.name)
+        setContract(state.erc721Token.contract)
+        setValue('contract', state.erc721Token.contract?.name ?? '')
         setValue('tokenId', state.erc721Token.tokenId)
         setDefaultToken(state.erc721Token)
     }, [state])
@@ -122,35 +126,34 @@ export const TransferERC721 = memo(() => {
         value: registeredAddress = '',
         error: resolveDomainError,
         loading: resolveDomainLoading,
-    } = useLookupAddress(allFormFields.recipient, NetworkPluginID.PLUGIN_EVM)
+    } = useLookupAddress(NetworkPluginID.PLUGIN_EVM, allFormFields.recipient)
     // #endregion
 
     // #region check contract address and account address
     useAsync(async () => {
-        const recipient = allFormFields.recipient
-        setRecipientError(null)
-        if (!recipient && !registeredAddress) return
-        if (!isValidAddress(recipient) && !isValidAddress(registeredAddress)) return
-
-        clearErrors()
-        if (isSameAddress(recipient, account) || isSameAddress(registeredAddress, account)) {
-            setRecipientError({
-                type: 'account',
-                message: t.wallets_transfer_error_same_address_with_current_account(),
-            })
-        }
-        const result = await Services.Ethereum.getCode(recipient)
-        if (result !== '0x') {
-            setRecipientError({
-                type: 'contractAddress',
-                message: t.wallets_transfer_error_is_contract_address(),
-            })
-        }
+        // const recipient = allFormFields.recipient
+        // setRecipientError(null)
+        // if (!recipient && !registeredAddress) return
+        // if (!isValidAddress(recipient) && !isValidAddress(registeredAddress)) return
+        // clearErrors()
+        // if (isSameAddress(recipient, account) || isSameAddress(registeredAddress, account)) {
+        //     setRecipientError({
+        //         type: 'account',
+        //         message: t.wallets_transfer_error_same_address_with_current_account(),
+        //     })
+        // }
+        // const result = await EVM_RPC.getCode(recipient)
+        // if (result !== '0x') {
+        //     setRecipientError({
+        //         type: 'contractAddress',
+        //         message: t.wallets_transfer_error_is_contract_address(),
+        //     })
+        // }
     }, [allFormFields.recipient, clearErrors, registeredAddress])
     // #endregion
 
     const erc721GasLimit = useGasLimit(
-        EthereumTokenType.ERC721,
+        SchemaType.ERC721,
         contract?.address,
         undefined,
         EthereumAddress.isValid(allFormFields.recipient) ? allFormFields.recipient : registeredAddress,
@@ -162,11 +165,8 @@ export const TransferERC721 = memo(() => {
     }, [erc721GasLimit.value])
     const { gasConfig, onCustomGasSetting, gasLimit } = useGasConfig(gasLimit_, GAS_LIMIT)
 
-    const account = useAccount()
-    const nativeToken = useNativeTokenDetailed()
-    const nativeTokenPrice = useNativeTokenPrice()
     const [{ loading: isTransferring }, transferCallback] = useTokenTransferCallback(
-        EthereumTokenType.ERC721,
+        SchemaType.ERC721,
         contract?.address ?? '',
     )
 
@@ -174,47 +174,47 @@ export const TransferERC721 = memo(() => {
     const { value: defaultGasPrice = '0' } = useGasPrice()
     const gasPrice = gasConfig.gasPrice || defaultGasPrice
     const gasFee = useMemo(() => multipliedBy(gasLimit, gasPrice), [gasLimit, gasPrice])
-    const gasFeeInUsd = formatWeiToEther(gasFee).multipliedBy(nativeTokenPrice)
+    const gasFeeInUsd = formatWeiToEther(gasFee).multipliedBy(nativeTokenPrice.value ?? 0)
 
     // dialog
     const { setDialog: setSelectContractDialog } = useRemoteControlledDialog(
         WalletMessages.events.selectNftContractDialogUpdated,
         (ev) => {
-            if (ev.open || !ev.contract || ev.uuid !== id) return
-            if (!contract || (contract && !isSameAddress(contract.address, ev.contract.address))) {
-                if (
-                    contract &&
-                    defaultToken &&
-                    !isSameAddress(contract.address, defaultToken.contractDetailed.address)
-                ) {
-                    setDefaultToken(null)
-                }
-                setValue('contract', ev.contract.name || ev.contract.address, { shouldValidate: true })
-                setContract(ev.contract)
-                setValue('tokenId', '')
-            }
+            // if (ev.open || !ev.contract || ev.uuid !== id) return
+            // if (!contract || (contract && !isSameAddress(contract.address, ev.contract.address))) {
+            //     if (contract && defaultToken && !isSameAddress(contract.address, defaultToken.address)) {
+            //         setDefaultToken(null)
+            //     }
+            //     setValue('contract', ev.contract.name || ev.contract.address, { shouldValidate: true })
+            //     setContract(ev.contract)
+            //     setValue('tokenId', '')
+            // }
         },
     )
 
-    const {
-        asyncRetry: { loading: loadingOwnerList },
-        tokenDetailedOwnerList = [],
-        refreshing,
-    } = useERC721TokenDetailedOwnerList(contract, account)
+    // const {
+    //     asyncRetry: { loading: loadingOwnerList },
+    //     tokenDetailedOwnerList = [],
+    //     refreshing,
+    // } = useERC721TokenDetailedOwnerList(contract, account)
+
+    const loadingOwnerList = false
+    const tokenDetailedOwnerList: Array<NonFungibleToken<ChainId, SchemaType>> = []
+    const refreshing = false
 
     const onTransfer = useCallback(
         async (data: FormInputs) => {
             let hash: string | undefined
             if (EthereumAddress.isValid(data.recipient)) {
                 hash = await transferCallback(data.tokenId, data.recipient, gasConfig)
-            } else if (Utils?.isValidDomain?.(data.recipient) && EthereumAddress.isValid(registeredAddress)) {
+            } else if (Others?.isValidDomain?.(data.recipient) && EthereumAddress.isValid(registeredAddress)) {
                 hash = await transferCallback(data.tokenId, registeredAddress, gasConfig)
             }
             if (typeof hash === 'string') {
                 navigate(DashboardRoutes.WalletsHistory)
             }
         },
-        [transferCallback, contract?.address, gasConfig, registeredAddress, Utils?.isValidDomain, navigate],
+        [transferCallback, contract?.address, gasConfig, registeredAddress, Others?.isValidDomain],
     )
 
     const ensContent = useMemo(() => {
@@ -223,7 +223,7 @@ export const TransferERC721 = memo(() => {
             return (
                 <Box style={{ padding: 10, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                     <Link
-                        href={Utils?.resolveDomainLink?.(allFormFields.recipient)}
+                        href={explorerResolver.domainLink(chainId, allFormFields.recipient)}
                         target="_blank"
                         rel="noopener noreferrer"
                         underline="none">
@@ -235,7 +235,7 @@ export const TransferERC721 = memo(() => {
                             {allFormFields.recipient}
                         </Typography>
                         <Typography fontSize={14} lineHeight="20px" style={{ color: MaskColorVar.textSecondary }}>
-                            <FormattedAddress address={registeredAddress} size={4} formatter={Utils?.formatAddress} />
+                            <FormattedAddress address={registeredAddress} size={4} formatter={Others?.formatAddress} />
                         </Typography>
                     </Link>
                     <RightIcon />
@@ -253,7 +253,7 @@ export const TransferERC721 = memo(() => {
                     </Box>
                 )
             }
-            if (Utils?.isValidDomain?.(allFormFields.recipient) && resolveDomainError) {
+            if (Others?.isValidDomain?.(allFormFields.recipient) && resolveDomainError) {
                 return (
                     <Box style={{ padding: '25px 10px' }}>
                         <Typography color="#FF5F5F" fontSize={16} fontWeight={500} lineHeight="22px">
@@ -267,7 +267,7 @@ export const TransferERC721 = memo(() => {
     }, [
         allFormFields.recipient,
         resolveDomainError,
-        Utils?.isValidDomain,
+        Others?.isValidDomain,
         resolveDomainLoading,
         network,
         registeredAddress,
@@ -278,10 +278,10 @@ export const TransferERC721 = memo(() => {
     }, [ensContent])
 
     const contractIcon = useMemo(() => {
-        if (!contract?.iconURL) return null
+        if (!contract?.logoURL) return null
         return (
             <Box width={20} height={20} mr={1}>
-                <img style={{ borderRadius: 10 }} width="20px" height="20px" src={contract.iconURL} alt="" />
+                <img style={{ borderRadius: 10 }} width="20px" height="20px" src={contract.logoURL} alt="" />
             </Box>
         )
     }, [contract])
diff --git a/packages/dashboard/src/pages/Wallets/components/Transfer/index.tsx b/packages/dashboard/src/pages/Wallets/components/Transfer/index.tsx
index 4bd3a214af25..13a58bd68212 100644
--- a/packages/dashboard/src/pages/Wallets/components/Transfer/index.tsx
+++ b/packages/dashboard/src/pages/Wallets/components/Transfer/index.tsx
@@ -4,12 +4,14 @@ import { Box, Tab } from '@mui/material'
 import { useTabs } from '@masknet/theme'
 import { TabContext, TabList, TabPanel } from '@mui/lab'
 import { TransferERC20 } from './TransferERC20'
-import { ERC721TokenDetailed, useNativeTokenDetailed } from '@masknet/web3-shared-evm'
 import { useLocation } from 'react-router-dom'
 import { useDashboardI18N } from '../../../../locales'
 import { TransferERC721 } from './TransferERC721'
 import { TransferTab } from './types'
-import type { Web3Plugin } from '@masknet/plugin-infra/web3'
+import { FungibleToken, NetworkPluginID } from '@masknet/web3-shared-base'
+import type { ChainId, SchemaType } from '@masknet/web3-shared-evm'
+import { useNativeToken } from '@masknet/plugin-infra/web3'
+
 const assetTabs = [TransferTab.Token, TransferTab.Collectibles] as const
 
 export * from './types'
@@ -17,9 +19,13 @@ export * from './types'
 export const Transfer = memo(() => {
     const t = useDashboardI18N()
     const { state } = useLocation() as {
-        state: { token?: Web3Plugin.FungibleToken; erc721Token?: ERC721TokenDetailed; type?: TransferTab } | null
+        state: {
+            token?: FungibleToken<ChainId, SchemaType>
+            erc721Token?: FungibleToken<ChainId, SchemaType>
+            type?: TransferTab
+        } | null
     }
-    const { value: nativeToken } = useNativeTokenDetailed()
+    const { value: nativeToken } = useNativeToken(NetworkPluginID.PLUGIN_EVM)
     const transferTabsLabel: Record<TransferTab, string> = {
         [TransferTab.Token]: t.wallets_assets_token(),
         [TransferTab.Collectibles]: t.wallets_assets_collectibles(),
diff --git a/packages/dashboard/src/pages/Wallets/components/Transfer/useNativeTokenPrice.ts b/packages/dashboard/src/pages/Wallets/components/Transfer/useNativeTokenPrice.ts
deleted file mode 100644
index e906bc79387e..000000000000
--- a/packages/dashboard/src/pages/Wallets/components/Transfer/useNativeTokenPrice.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import { useCallback, useEffect, useState } from 'react'
-import { useInterval } from 'react-use'
-import { CryptoPrice, CurrencyType, getCoinGeckoCoinId, useChainId } from '@masknet/web3-shared-evm'
-import { UPDATE_CHAIN_STATE_DELAY } from '@masknet/plugin-wallet'
-
-const URL_BASE = 'https://api.coingecko.com/api/v3'
-async function getNativeTokenPrice(tokenId: string, currency: CurrencyType) {
-    const requestPath = `${URL_BASE}/simple/price?ids=${tokenId}&vs_currencies=${currency}`
-    const prices = await fetch(requestPath).then((r) => r.json() as Promise<CryptoPrice>)
-    return prices
-}
-
-const USD = CurrencyType.USD
-
-export function useNativeTokenPrice() {
-    const chainId = useChainId()
-    const coinId = getCoinGeckoCoinId(chainId)
-    const [price, setPrice] = useState(0)
-
-    const trackPrice = useCallback(() => {
-        if (!coinId) return
-        getNativeTokenPrice(coinId, USD).then((result) => setPrice(result[coinId][USD]))
-    }, [coinId])
-
-    useEffect(trackPrice, [trackPrice])
-    useInterval(trackPrice, UPDATE_CHAIN_STATE_DELAY)
-
-    return price
-}
diff --git a/packages/dashboard/src/pages/Wallets/components/WalletStateBar/index.tsx b/packages/dashboard/src/pages/Wallets/components/WalletStateBar/index.tsx
index 6a67cf0cc5a9..11aaa86280f4 100644
--- a/packages/dashboard/src/pages/Wallets/components/WalletStateBar/index.tsx
+++ b/packages/dashboard/src/pages/Wallets/components/WalletStateBar/index.tsx
@@ -1,6 +1,6 @@
 import React, { FC, memo } from 'react'
 import { Box, Button, Stack, Typography } from '@mui/material'
-import { ProviderType, TransactionStatusType } from '@masknet/web3-shared-evm'
+import { ProviderType } from '@masknet/web3-shared-evm'
 import { makeStyles, MaskColorVar } from '@masknet/theme'
 import { FormattedAddress, LoadingAnimation, WalletIcon } from '@masknet/shared'
 import { useRemoteControlledDialog } from '@masknet/shared-base-ui'
@@ -9,14 +9,15 @@ import {
     useProviderDescriptor,
     useWallet,
     useWeb3State,
-    Web3Plugin,
     useReverseAddress,
+    useRecentTransactions,
+    Web3Helper,
+    useAccount,
 } from '@masknet/plugin-infra/web3'
-import { EMPTY_LIST } from '@masknet/shared-base'
 import { PluginMessages } from '../../../../API'
-import { useRecentTransactions } from '../../hooks/useRecentTransactions'
 import { useDashboardI18N } from '../../../../locales'
 import { useNetworkSelector } from './useNetworkSelector'
+import { NetworkPluginID, TransactionStatusType } from '@masknet/web3-shared-base'
 
 const useStyles = makeStyles()((theme) => ({
     bar: {
@@ -63,12 +64,11 @@ const useStyles = makeStyles()((theme) => ({
 export const WalletStateBar = memo(() => {
     const t = useDashboardI18N()
 
+    const account = useAccount()
     const wallet = useWallet()
-    const networkDescriptor = useNetworkDescriptor()
-    const providerDescriptor = useProviderDescriptor()
-    const { value: pendingTransactions = EMPTY_LIST } = useRecentTransactions({
-        status: TransactionStatusType.NOT_DEPEND,
-    })
+    const networkDescriptor = useNetworkDescriptor() as Web3Helper.NetworkDescriptorAll
+    const providerDescriptor = useProviderDescriptor() as Web3Helper.ProviderDescriptorAll
+    const pendingTransactions = useRecentTransactions(NetworkPluginID.PLUGIN_EVM, TransactionStatusType.NOT_DEPEND)
 
     const { openDialog: openWalletStatusDialog } = useRemoteControlledDialog(
         PluginMessages.Wallet.events.walletStatusDialogUpdated,
@@ -80,15 +80,16 @@ export const WalletStateBar = memo(() => {
 
     const [menu, openMenu] = useNetworkSelector()
 
-    const { value: domain } = useReverseAddress(wallet?.address)
+    const { value: domain } = useReverseAddress(NetworkPluginID.PLUGIN_EVM, account)
 
-    if (!wallet) {
+    if (!account) {
         return <Button onClick={openConnectWalletDialog}>{t.wallets_connect_wallet_connect()}</Button>
     }
     return (
         <WalletStateBarUI
             isPending={!!pendingTransactions.length}
-            wallet={wallet}
+            name={wallet?.name ?? providerDescriptor.name}
+            address={account}
             domain={domain}
             network={networkDescriptor}
             provider={providerDescriptor}
@@ -101,9 +102,10 @@ export const WalletStateBar = memo(() => {
 
 interface WalletStateBarUIProps {
     isPending: boolean
-    network?: Web3Plugin.NetworkDescriptor
-    provider?: Web3Plugin.ProviderDescriptor
-    wallet?: Web3Plugin.Wallet
+    network?: Web3Helper.NetworkDescriptorAll
+    provider?: Web3Helper.ProviderDescriptorAll
+    name?: string
+    address?: string
     domain?: string
     openConnectWalletDialog(): void
     openMenu: ReturnType<typeof useNetworkSelector>[1]
@@ -113,7 +115,8 @@ export const WalletStateBarUI: FC<React.PropsWithChildren<WalletStateBarUIProps>
     isPending,
     network,
     provider,
-    wallet,
+    name,
+    address,
     domain,
     openConnectWalletDialog,
     openMenu,
@@ -121,9 +124,9 @@ export const WalletStateBarUI: FC<React.PropsWithChildren<WalletStateBarUIProps>
 }) => {
     const t = useDashboardI18N()
     const { classes } = useStyles()
-    const { Utils } = useWeb3State()
+    const { Others } = useWeb3State()
 
-    if (!wallet || !network || !provider) return null
+    if (!network || !provider) return null
 
     return (
         <Stack justifyContent="center" direction="row" alignItems="center">
@@ -165,19 +168,19 @@ export const WalletStateBarUI: FC<React.PropsWithChildren<WalletStateBarUIProps>
                 <Box sx={{ userSelect: 'none' }}>
                     {provider.type !== ProviderType.MaskWallet ? (
                         <Box fontSize={16} display="flex" alignItems="center">
-                            {domain && Utils?.formatDomainName ? Utils.formatDomainName(domain) : provider.name}
+                            {domain && Others?.formatDomainName ? Others.formatDomainName(domain) : provider.name}
                         </Box>
                     ) : (
                         <Box fontSize={16} display="flex" alignItems="center">
-                            {wallet.name}
-                            {domain && Utils?.formatDomainName ? (
-                                <Typography className={classes.domain}>{Utils.formatDomainName(domain)}</Typography>
+                            {name}
+                            {domain && Others?.formatDomainName ? (
+                                <Typography className={classes.domain}>{Others.formatDomainName(domain)}</Typography>
                             ) : null}
                         </Box>
                     )}
 
                     <Box fontSize={12}>
-                        <FormattedAddress address={wallet.address} size={10} formatter={Utils?.formatAddress} />
+                        <FormattedAddress address={address} size={10} formatter={Others?.formatAddress} />
                     </Box>
                 </Box>
             </Stack>
diff --git a/packages/dashboard/src/pages/Wallets/components/WalletStateBar/useNetworkSelector.tsx b/packages/dashboard/src/pages/Wallets/components/WalletStateBar/useNetworkSelector.tsx
index a221eba8c480..48229a080206 100644
--- a/packages/dashboard/src/pages/Wallets/components/WalletStateBar/useNetworkSelector.tsx
+++ b/packages/dashboard/src/pages/Wallets/components/WalletStateBar/useNetworkSelector.tsx
@@ -2,7 +2,14 @@ import { MenuItem, Stack, Typography } from '@mui/material'
 import { makeStyles } from '@masknet/theme'
 import { SuccessIcon } from '@masknet/icons'
 import { WalletIcon, useMenu } from '@masknet/shared'
-import { useChainId, useNetworkDescriptors, useProviderDescriptor, useWeb3UI } from '@masknet/plugin-infra/web3'
+import type { NetworkPluginID } from '@masknet/web3-shared-base'
+import {
+    useChainId,
+    useNetworkDescriptors,
+    useProviderDescriptor,
+    useWeb3UI,
+    Web3Helper,
+} from '@masknet/plugin-infra/web3'
 
 const useStyles = makeStyles()((theme) => ({
     item: {
@@ -18,13 +25,14 @@ const useStyles = makeStyles()((theme) => ({
     },
 }))
 
-export const useNetworkSelector = () => {
+export const useNetworkSelector = (pluginID?: NetworkPluginID) => {
     const { classes } = useStyles()
 
     const currentChainId = useChainId()
-    const providerDescriptor = useProviderDescriptor()
-    const networkDescriptors = useNetworkDescriptors()
-    const { NetworkIconClickBait } = useWeb3UI().SelectNetworkMenu ?? {}
+    const providerDescriptor = useProviderDescriptor() as Web3Helper.ProviderDescriptorAll
+    const networkDescriptors = useNetworkDescriptors() as Web3Helper.NetworkDescriptorAll[]
+    const Web3UI = useWeb3UI() as Web3Helper.Web3UIAll
+    const { NetworkIconClickBait } = Web3UI.SelectNetworkMenu ?? {}
 
     const networkMenu = useMenu(
         ...(networkDescriptors
diff --git a/packages/dashboard/src/pages/Wallets/hooks/index.ts b/packages/dashboard/src/pages/Wallets/hooks/index.ts
index ad00f5de33a3..25e929f50f28 100644
--- a/packages/dashboard/src/pages/Wallets/hooks/index.ts
+++ b/packages/dashboard/src/pages/Wallets/hooks/index.ts
@@ -1,5 +1,3 @@
-export * from './useAddressBook'
 export * from './useERC20TokensDetailed'
 export * from './useGasConfig'
 export * from './useIsMatched'
-export * from './useRecentTransactions'
diff --git a/packages/dashboard/src/pages/Wallets/hooks/useAddressBook.ts b/packages/dashboard/src/pages/Wallets/hooks/useAddressBook.ts
deleted file mode 100644
index fbba94c40961..000000000000
--- a/packages/dashboard/src/pages/Wallets/hooks/useAddressBook.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { useEffect } from 'react'
-import { useChainId } from '@masknet/web3-shared-evm'
-import { useAsyncRetry } from 'react-use'
-import { PluginMessages, PluginServices } from '../../../API'
-
-export function useAddressBook() {
-    const chainId = useChainId()
-    const result = useAsyncRetry(async () => PluginServices.Wallet.getAllAddress(chainId), [chainId])
-
-    useEffect(() => PluginMessages.Wallet.events.addressBookUpdated.on(result.retry), [result.retry])
-
-    return result
-}
diff --git a/packages/dashboard/src/pages/Wallets/hooks/useERC20TokensDetailed.ts b/packages/dashboard/src/pages/Wallets/hooks/useERC20TokensDetailed.ts
index 3d5d5cad4ab0..0d11d923afaa 100644
--- a/packages/dashboard/src/pages/Wallets/hooks/useERC20TokensDetailed.ts
+++ b/packages/dashboard/src/pages/Wallets/hooks/useERC20TokensDetailed.ts
@@ -1,49 +1,43 @@
-import {
-    EthereumTokenType,
-    isSameAddress,
-    useAssetsFromChain,
-    useERC20TokensDetailedFromTokenLists,
-    useNativeTokenDetailed,
-    useTokenConstants,
-    useTokenListConstants,
-} from '@masknet/web3-shared-evm'
-import { uniqBy } from 'lodash-unified'
-import { useMemo } from 'react'
-
 export function useERC20TokensDetailed() {
-    const { ERC20 } = useTokenListConstants()
-    const { value: nativeTokenDetailed } = useNativeTokenDetailed()
-    const { value: erc20TokensDetailed = [], loading: erc20TokensDetailedLoading } =
-        useERC20TokensDetailedFromTokenLists(ERC20)
+    // const { FUNGIBLE_TOKEN_LISTS = [] } = useTokenListConstants()
+    // const { value: nativeTokenDetailed } = useFungibleToken(NetworkPluginID.PLUGIN_EVM)
+    // const { value: erc20TokensDetailed = [], loading: erc20TokensDetailedLoading } = useFungibleTokensFromTokenList(
+    //     NetworkPluginID.PLUGIN_EVM,
+    // )
 
-    // #region mask token
-    const { MASK_ADDRESS } = useTokenConstants()
-    // #endregion
+    // // #region mask token
+    // const { MASK_ADDRESS } = useTokenConstants()
+    // // #endregion
 
-    const tokens = useMemo(
-        () =>
-            uniqBy(
-                nativeTokenDetailed ? [nativeTokenDetailed, ...erc20TokensDetailed] : [...erc20TokensDetailed],
-                (x) => x.address.toLowerCase(),
-            ).sort((a, z) => {
-                if (a.type === EthereumTokenType.Native) return -1
-                if (z.type === EthereumTokenType.Native) return 1
-                if (isSameAddress(a.address, MASK_ADDRESS)) return -1
-                if (isSameAddress(z.address, MASK_ADDRESS)) return 1
-                return 0
-            }),
-        [nativeTokenDetailed, erc20TokensDetailed.length],
-    )
+    // const tokens = useMemo(
+    //     () =>
+    //         uniqBy(
+    //             nativeTokenDetailed ? [nativeTokenDetailed, ...erc20TokensDetailed] : [...erc20TokensDetailed],
+    //             (x) => x.address.toLowerCase(),
+    //         ).sort((a, z) => {
+    //             if (a.type === SchemaType.Native) return -1
+    //             if (z.type === SchemaType.Native) return 1
+    //             if (isSameAddress(a.address, MASK_ADDRESS)) return -1
+    //             if (isSameAddress(z.address, MASK_ADDRESS)) return 1
+    //             return 0
+    //         }),
+    //     [nativeTokenDetailed, erc20TokensDetailed.length],
+    // )
 
-    const {
-        value: assetsDetailedChain = [],
-        loading: assetsDetailedChainLoading,
-        error: assetsDetailedChainError,
-    } = useAssetsFromChain(tokens)
+    // const {
+    //     value: assetsDetailedChain = [],
+    //     loading: assetsDetailedChainLoading,
+    //     error: assetsDetailedChainError,
+    // } = useAssetsFromChain(tokens)
 
+    // return {
+    //     value: assetsDetailedChain,
+    //     loading: erc20TokensDetailedLoading || assetsDetailedChainLoading,
+    //     error: assetsDetailedChainError,
+    // }
     return {
-        value: assetsDetailedChain,
-        loading: erc20TokensDetailedLoading || assetsDetailedChainLoading,
-        error: assetsDetailedChainError,
+        value: [],
+        loading: false,
+        error: undefined,
     }
 }
diff --git a/packages/dashboard/src/pages/Wallets/hooks/useGasConfig.ts b/packages/dashboard/src/pages/Wallets/hooks/useGasConfig.ts
index 51b62436afaf..4b28631e388c 100644
--- a/packages/dashboard/src/pages/Wallets/hooks/useGasConfig.ts
+++ b/packages/dashboard/src/pages/Wallets/hooks/useGasConfig.ts
@@ -1,24 +1,25 @@
 import { useEffect, useMemo, useState } from 'react'
 import { toHex } from 'web3-utils'
 import BigNumber from 'bignumber.js'
-import { formatGweiToWei, GasOption, isEIP1559Supported, useChainId, useGasPrice } from '@masknet/web3-shared-evm'
+import { chainResolver, formatGweiToWei } from '@masknet/web3-shared-evm'
 import { useRemoteControlledDialog } from '@masknet/shared-base-ui'
 import { WalletMessages } from '@masknet/plugin-wallet'
-import { useGasOptions } from '../../../hooks/useGasOptions'
+import { useChainId, useGasOptions, useGasPrice } from '@masknet/plugin-infra/web3'
+import { GasOptionType, NetworkPluginID } from '@masknet/web3-shared-base'
 
 export const useGasConfig = (gasLimit: number, minGasLimit: number) => {
-    const chainId = useChainId()
+    const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
 
     const [gasLimit_, setGasLimit_] = useState(0)
     const [customGasPrice, setCustomGasPrice] = useState<BigNumber.Value>(0)
-    const [gasOption, setGasOption] = useState<GasOption>(GasOption.Medium)
+    const [gasOption, setGasOption] = useState<GasOptionType>(GasOptionType.NORMAL)
     const [maxFee, setMaxFee] = useState<BigNumber.Value>(0)
     const [priorityFee, setPriorityFee] = useState<BigNumber.Value>(0)
 
-    const is1559Supported = useMemo(() => isEIP1559Supported(chainId), [chainId])
-    const { value: defaultGasPrice = '0' } = useGasPrice()
+    const is1559Supported = useMemo(() => chainResolver.isSupport(chainId, 'EIP1559'), [chainId])
+    const { value: defaultGasPrice = '0' } = useGasPrice(NetworkPluginID.PLUGIN_EVM)
     const gasPrice = customGasPrice || defaultGasPrice
-    const { gasOptions } = useGasOptions()
+    const { value: gasOptions } = useGasOptions(NetworkPluginID.PLUGIN_EVM)
 
     const { setDialog: setGasSettingDialog, closeDialog } = useRemoteControlledDialog(
         WalletMessages.events.gasSettingDialogUpdated,
@@ -44,29 +45,28 @@ export const useGasConfig = (gasLimit: number, minGasLimit: number) => {
         if (!gasOptions) return
 
         if (is1559Supported) {
-            const gasLevel = gasOptions.medium as Exclude<typeof gasOptions.medium, number>
+            const gasLevel = gasOptions.normal
             setMaxFee((oldVal) => {
-                return !oldVal ? formatGweiToWei(gasLevel?.suggestedMaxFeePerGas ?? 0) : oldVal
+                return !oldVal ? formatGweiToWei(gasLevel?.suggestedMaxFeePerGas ?? '0') : oldVal
             })
             setPriorityFee((oldVal) => {
-                return !oldVal ? formatGweiToWei(gasLevel?.suggestedMaxPriorityFeePerGas ?? 0) : oldVal
+                return !oldVal ? formatGweiToWei(gasLevel?.suggestedMaxPriorityFeePerGas ?? '0') : oldVal
             })
         } else {
-            setCustomGasPrice((oldVal) => (!oldVal ? (gasOptions.medium as number) : oldVal))
+            setCustomGasPrice((oldVal) => (!oldVal ? gasOptions.normal.suggestedMaxFeePerGas : oldVal))
         }
-    }, [is1559Supported, gasOptions?.medium])
+    }, [is1559Supported, gasOptions?.normal])
 
     useEffect(() => {
         if (!gasOptions) return
-
         if (is1559Supported) {
-            const gasLevel = gasOptions.medium as Exclude<typeof gasOptions.medium, number>
+            const gasLevel = gasOptions.normal
             setMaxFee(formatGweiToWei(gasLevel?.suggestedMaxFeePerGas ?? 0))
             setPriorityFee(formatGweiToWei(gasLevel?.suggestedMaxPriorityFeePerGas ?? 0))
         } else {
-            setCustomGasPrice(gasOptions.medium as number)
+            setCustomGasPrice(gasOptions.normal.suggestedMaxFeePerGas)
         }
-    }, [chainId, gasOptions?.medium])
+    }, [chainId, gasOptions?.normal])
 
     const gasConfig = useMemo(() => {
         return is1559Supported
diff --git a/packages/dashboard/src/pages/Wallets/hooks/useRecentTransactions.ts b/packages/dashboard/src/pages/Wallets/hooks/useRecentTransactions.ts
deleted file mode 100644
index 96e38d16f58b..000000000000
--- a/packages/dashboard/src/pages/Wallets/hooks/useRecentTransactions.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { useEffect } from 'react'
-import { useAsyncRetry } from 'react-use'
-import { useAccount, useChainId } from '@masknet/web3-shared-evm'
-import { PluginMessages, PluginServices } from '../../../API'
-import type { RecentTransactionOptions } from '../../../../../mask/src/plugins/Wallet/services'
-
-// todo: should merge in plugin infra package when plugin infra ready
-export function useRecentTransactions(options?: RecentTransactionOptions) {
-    const account = useAccount()
-    const chainId = useChainId()
-
-    const result = useAsyncRetry(async () => {
-        if (!account) return []
-        return PluginServices.Wallet.getRecentTransactions(chainId, account, options)
-    }, [chainId, account, JSON.stringify(options)])
-
-    useEffect(() => PluginMessages.Wallet.events.transactionStateUpdated.on(result.retry), [result.retry])
-    useEffect(() => PluginMessages.Wallet.events.transactionsUpdated.on(result.retry), [result.retry])
-
-    return result
-}
diff --git a/packages/dashboard/src/pages/Wallets/index.tsx b/packages/dashboard/src/pages/Wallets/index.tsx
index d211a8c7eace..413fbdd66e2e 100644
--- a/packages/dashboard/src/pages/Wallets/index.tsx
+++ b/packages/dashboard/src/pages/Wallets/index.tsx
@@ -1,22 +1,19 @@
 import {
     getRegisteredWeb3Networks,
-    NetworkPluginID,
     useAccount,
     useChainId,
-    useNetworkDescriptor,
     useCurrentWeb3NetworkPluginID,
-    useWallet,
+    useFungibleAssets,
+    useNetworkDescriptor,
     useWallets,
-    useWeb3State as useWeb3PluginState,
-    Web3Plugin,
+    Web3Helper,
 } from '@masknet/plugin-infra/web3'
+import { DashboardRoutes, EMPTY_LIST, relativeRouteOf } from '@masknet/shared-base'
 import { useRemoteControlledDialog } from '@masknet/shared-base-ui'
-import { DashboardRoutes, relativeRouteOf } from '@masknet/shared-base'
-import { useWeb3State } from '@masknet/web3-shared-evm'
+import { NetworkPluginID } from '@masknet/web3-shared-base'
 import BigNumber from 'bignumber.js'
 import { useEffect, useMemo, useState } from 'react'
 import { Route, Routes, useLocation, useNavigate } from 'react-router-dom'
-import { useAsync } from 'react-use'
 import { PluginMessages } from '../../API'
 import { PageFrame } from '../../components/PageFrame'
 import { useDashboardI18N } from '../../locales'
@@ -31,16 +28,14 @@ import { StartUp } from './StartUp'
 import { getTokenUSDValue } from './utils/getTokenUSDValue'
 
 const r = relativeRouteOf(DashboardRoutes.Wallets)
+
 function Wallets() {
-    const wallet = useWallet()
+    const t = useDashboardI18N()
     const wallets = useWallets()
     const navigate = useNavigate()
-    const t = useDashboardI18N()
-    const currentChainId = useChainId()
-    const { Asset } = useWeb3PluginState()
+    const chainId = useChainId()
     const account = useAccount()
-    const { portfolioProvider } = useWeb3State()
-    const network = useNetworkDescriptor()
+    const { value: fungibleAssets = EMPTY_LIST } = useFungibleAssets(NetworkPluginID.PLUGIN_EVM)
 
     const { pathname } = useLocation()
     const isWalletPath = useIsMatched(DashboardRoutes.Wallets)
@@ -50,19 +45,15 @@ function Wallets() {
     const [receiveOpen, setReceiveOpen] = useState(false)
 
     const networks = getRegisteredWeb3Networks()
-    const networkDescriptor = useNetworkDescriptor()
     const pluginId = useCurrentWeb3NetworkPluginID()
-    const [selectedNetwork, setSelectedNetwork] = useState<Web3Plugin.NetworkDescriptor | null>(
+    const networkDescriptor = useNetworkDescriptor() as Web3Helper.NetworkDescriptorAll
+    const [selectedNetwork, setSelectedNetwork] = useState<Web3Helper.NetworkDescriptorAll | null>(
         networkDescriptor ?? null,
     )
 
-    const { openDialog: openBuyDialog } = useRemoteControlledDialog(PluginMessages.Transak.buyTokenDialogUpdated)
+    const { openDialog: openBuyDialog } = useRemoteControlledDialog(PluginMessages.Transak?.buyTokenDialogUpdated)
     const { openDialog: openSwapDialog } = useRemoteControlledDialog(PluginMessages.Swap.swapDialogUpdated)
 
-    const { value: detailedTokens } = useAsync(
-        async () => Asset?.getFungibleAssets?.(account, portfolioProvider, network!),
-        [account, Asset, portfolioProvider, network],
-    )
     const renderNetworks = useMemo(() => {
         return networks.filter((x) => pluginId === x.networkSupporterPluginID && x.isMainnet)
     }, [networks, pluginId])
@@ -87,13 +78,13 @@ function Wallets() {
     }, [pathname, defaultNetwork])
 
     const balance = useMemo(() => {
-        if (!detailedTokens || !detailedTokens.length) return 0
+        if (!fungibleAssets || !fungibleAssets.length) return 0
 
-        const values = detailedTokens
+        const values = fungibleAssets
             .filter((x) => (selectedNetwork ? x.chainId === selectedNetwork.chainId : true))
             .map((y) => getTokenUSDValue(y.value))
         return BigNumber.sum(...values).toNumber()
-    }, [selectedNetwork, detailedTokens])
+    }, [selectedNetwork, fungibleAssets])
 
     const pateTitle = useMemo(() => {
         if (wallets.length === 0) return t.create_wallet_form_title()
@@ -107,7 +98,7 @@ function Wallets() {
 
     return (
         <PageFrame title={pateTitle} noBackgroundFill primaryAction={<WalletStateBar />}>
-            {!wallet ? (
+            {!account ? (
                 <StartUp />
             ) : (
                 <>
@@ -127,18 +118,13 @@ function Wallets() {
                         <Route path={r(DashboardRoutes.WalletsTransfer)} element={<Transfer />} />
                         <Route
                             path={r(DashboardRoutes.WalletsHistory)}
-                            element={<History selectedChainId={selectedNetwork?.chainId ?? currentChainId} />}
+                            element={<History selectedChainId={selectedNetwork?.chainId ?? chainId} />}
                         />
                     </Routes>
                 </>
             )}
-            {wallet ? (
-                <ReceiveDialog
-                    open={receiveOpen}
-                    chainName="Ethereum"
-                    walletAddress={wallet.address ?? ''}
-                    onClose={() => setReceiveOpen(false)}
-                />
+            {account ? (
+                <ReceiveDialog open={receiveOpen} address={account} onClose={() => setReceiveOpen(false)} />
             ) : null}
         </PageFrame>
     )
diff --git a/packages/dashboard/src/pages/Wallets/utils/getTokenUSDValue.tsx b/packages/dashboard/src/pages/Wallets/utils/getTokenUSDValue.tsx
index 92ae2df56215..80d01ae43070 100644
--- a/packages/dashboard/src/pages/Wallets/utils/getTokenUSDValue.tsx
+++ b/packages/dashboard/src/pages/Wallets/utils/getTokenUSDValue.tsx
@@ -1,4 +1,4 @@
-import { CurrencyType } from '@masknet/plugin-infra/web3'
+import { CurrencyType } from '@masknet/web3-shared-base'
 
 export const getTokenUSDValue = (value?: { [key in CurrencyType]?: string }) =>
     value ? Number.parseFloat(value[CurrencyType.USD] ?? '') : 0
diff --git a/packages/dashboard/src/web3/context.ts b/packages/dashboard/src/web3/context.ts
deleted file mode 100644
index d97ac196dc69..000000000000
--- a/packages/dashboard/src/web3/context.ts
+++ /dev/null
@@ -1,155 +0,0 @@
-import type { Subscription } from 'use-subscription'
-import {
-    ChainId,
-    ERC1155TokenDetailed,
-    ERC721TokenDetailed,
-    FungibleAssetProvider,
-    ProviderType,
-    ERC20TokenDetailed,
-    EthereumTokenType,
-    NetworkType,
-    Web3ProviderType,
-    isInjectedProvider,
-} from '@masknet/web3-shared-evm'
-import { getProxyWebsocketInstance } from '@masknet/web3-shared-base'
-import { Services, Messages, PluginServices, PluginMessages } from '../API'
-import { TokenList } from '@masknet/web3-providers'
-
-export const Web3Context: Web3ProviderType = {
-    allowTestnet: createSubscriptionFromAsync(Services.Settings.getWalletAllowTestChain, false, () => {
-        return () => {}
-    }),
-    account: createSubscriptionFromAsync(
-        async () => {
-            const providerType = await Services.Settings.getCurrentSelectedWalletProvider()
-            if (isInjectedProvider(providerType) || providerType === ProviderType.Fortmatic) return ''
-            return Services.Settings.getSelectedWalletAddress()
-        },
-        '',
-        (callback) => {
-            const a = Messages.events.currentAccountSettings.on(callback)
-            const b = Messages.events.currentProviderSettings.on(callback)
-            return () => void [a(), b()]
-        },
-    ),
-    tokenPrices: createSubscriptionFromAsync(
-        Services.Settings.getTokenPrices,
-        {},
-        Messages.events.currentTokenPricesSettings.on,
-    ),
-    chainId: createSubscriptionFromAsync(
-        Services.Settings.getChainId,
-        ChainId.Mainnet,
-        Messages.events.currentChainIdSettings.on,
-    ),
-    providerType: createSubscriptionFromAsync(
-        Services.Settings.getCurrentSelectedWalletProvider,
-        ProviderType.MaskWallet,
-        Messages.events.currentProviderSettings.on,
-    ),
-    networkType: createSubscriptionFromAsync(
-        Services.Settings.getCurrentSelectedWalletNetwork,
-        NetworkType.Ethereum,
-        Messages.events.currentNetworkSettings.on,
-    ),
-    walletPrimary: createSubscriptionFromAsync(
-        PluginServices.Wallet.getWalletPrimary,
-        null,
-        PluginMessages.Wallet.events.walletsUpdated.on,
-    ),
-    wallets: createSubscriptionFromAsync(
-        PluginServices.Wallet.getWallets,
-        [],
-        PluginMessages.Wallet.events.walletsUpdated.on,
-    ),
-    erc20Tokens: createSubscriptionFromAsync(
-        () => PluginServices.Wallet.getTokens<ERC20TokenDetailed>(EthereumTokenType.ERC20),
-        [],
-        PluginMessages.Wallet.events.erc20TokensUpdated.on,
-    ),
-    erc721Tokens: createSubscriptionFromAsync(
-        () => PluginServices.Wallet.getTokens<ERC721TokenDetailed>(EthereumTokenType.ERC721),
-        [],
-        PluginMessages.Wallet.events.erc721TokensUpdated.on,
-    ),
-    erc1155Tokens: createSubscriptionFromAsync(
-        () => PluginServices.Wallet.getTokens<ERC1155TokenDetailed>(EthereumTokenType.ERC1155),
-        [],
-        PluginMessages.Wallet.events.erc1155TokensUpdated.on,
-    ),
-    portfolioProvider: createSubscriptionFromAsync(
-        Services.Settings.getCurrentPortfolioDataProvider,
-        FungibleAssetProvider.DEBANK,
-        Messages.events.currentFungibleAssetDataProviderSettings.on,
-    ),
-
-    addToken: PluginServices.Wallet.addToken,
-    removeToken: PluginServices.Wallet.removeToken,
-    trustToken: PluginServices.Wallet.trustToken,
-    blockToken: PluginServices.Wallet.blockToken,
-
-    request: Services.Ethereum.request,
-
-    getAssetsList: PluginServices.Wallet.getAssetsList,
-    getAssetsListNFT: PluginServices.Wallet.getAssetsListNFT,
-    getCollectionsNFT: PluginServices.Wallet.getCollectionsNFT,
-    getAddressNamesList: PluginServices.Wallet.getAddressNames,
-    getTransactionList: PluginServices.Wallet.getTransactionList,
-    fetchERC20TokensFromTokenLists: TokenList.fetchERC20TokensFromTokenLists,
-    providerSocket: getProxyWebsocketInstance((info) =>
-        PluginMessages.Wallet.events.socketMessageUpdated.sendToAll(info),
-    ),
-}
-
-// double check
-function createSubscriptionFromAsync<T>(
-    f: () => Promise<T>,
-    defaultValue: T,
-    onChange: (callback: () => void) => () => void,
-): Subscription<T> {
-    // 0 - idle, 1 - updating state, > 1 - waiting state
-    let beats = 0
-    let state = defaultValue
-    const { subscribe, trigger } = getEventTarget()
-    f()
-        .then((v) => (state = v))
-        .finally(trigger)
-    const flush = async () => {
-        state = await f()
-        beats -= 1
-        if (beats > 0) {
-            beats = 1
-            setTimeout(flush, 0)
-        } else if (beats < 0) {
-            beats = 0
-        }
-        trigger()
-    }
-    return {
-        getCurrentValue: () => state,
-        subscribe: (sub) => {
-            const a = subscribe(sub)
-            const b = onChange(async () => {
-                beats += 1
-                if (beats === 1) flush()
-            })
-            return () => void [a(), b()]
-        },
-    }
-}
-
-function getEventTarget() {
-    const event = new EventTarget()
-    const EVENT = 'event'
-    let timer: ReturnType<typeof setTimeout>
-    function trigger() {
-        clearTimeout(timer)
-        // delay to update state to ensure that all settings to be synced globally
-        timer = setTimeout(() => event.dispatchEvent(new Event(EVENT)), 600)
-    }
-    function subscribe(f: () => void) {
-        event.addEventListener(EVENT, f)
-        return () => event.removeEventListener(EVENT, f)
-    }
-    return { trigger, subscribe }
-}
diff --git a/packages/dashboard/stories/components/Wallet/CollectibleCard.tsx b/packages/dashboard/stories/components/Wallet/CollectibleCard.tsx
index 580fce31c65c..9eb9a44101b1 100644
--- a/packages/dashboard/stories/components/Wallet/CollectibleCard.tsx
+++ b/packages/dashboard/stories/components/Wallet/CollectibleCard.tsx
@@ -1,32 +1,36 @@
 import { story } from '@masknet/storybook-shared'
+import { TokenType } from '@masknet/web3-shared-base'
+import { SchemaType } from '@masknet/web3-shared-evm'
 import { CollectibleCard as C } from '../../../src/pages/Wallets/components/CollectibleCard'
-import { TokenType } from '@masknet/plugin-infra/web3'
 
 const { meta, of } = story(C)
 
 export default meta({ title: 'Components/Wallet/Collectible Card' })
 export const CollectibleCard = of({
     args: {
-        chainId: 1,
         token: {
             id: 'token_id',
             chainId: 1,
             tokenId: '608932',
+            address: '',
             type: TokenType.NonFungible,
-            name: 'Rarible 1155',
-            description: '',
-            owner: 'test_owner',
+            schema: SchemaType.ERC721,
+            owner: {
+                nickname: 'test_owner',
+            },
             metadata: {
+                chainId: 1,
                 name: 'Rarible 1155',
+                symbol: 'RAB',
                 description: '',
                 mediaType: '',
             },
             contract: {
-                id: 'address',
-                address: 'address',
                 chainId: 1,
                 name: '',
                 symbol: '',
+                address: 'address',
+                schema: SchemaType.ERC721,
             },
         },
         onSend() {},
diff --git a/packages/dashboard/stories/components/Wallet/ReceiveDialog.tsx b/packages/dashboard/stories/components/Wallet/ReceiveDialog.tsx
index 0605dd6ab693..3cf9b1b35df2 100644
--- a/packages/dashboard/stories/components/Wallet/ReceiveDialog.tsx
+++ b/packages/dashboard/stories/components/Wallet/ReceiveDialog.tsx
@@ -1,7 +1,6 @@
 import { story } from '@masknet/storybook-shared'
-import { ReceiveDialogUI as C } from '../../../src/pages/Wallets/components/ReceiveDialog'
 import { action } from '@storybook/addon-actions'
-import { NetworkType } from '@masknet/web3-shared-evm'
+import { ReceiveDialogUI as C } from '../../../src/pages/Wallets/components/ReceiveDialog'
 
 const { meta, of } = story(C)
 
@@ -11,8 +10,6 @@ export const ReceiveDialog = of({
     args: {
         open: true,
         onClose: action('onClose'),
-        chainName: 'Ethereum',
-        walletAddress: '0xFD7A5D91AF554ACD8ED07c7911E8556a7D20D88a',
-        currentNetworkType: NetworkType.Ethereum,
+        address: '0xFD7A5D91AF554ACD8ED07c7911E8556a7D20D88a',
     },
 })
diff --git a/packages/dashboard/tsconfig.json b/packages/dashboard/tsconfig.json
index cfb7a22eb371..f65c8ec8ec49 100644
--- a/packages/dashboard/tsconfig.json
+++ b/packages/dashboard/tsconfig.json
@@ -18,6 +18,8 @@
     { "path": "../web3-providers" },
     { "path": "../icons/" },
     { "path": "../plugin-infra" },
+    { "path": "../plugins/Solana/" },
+    { "path": "../plugins/EVM/" },
     { "path": "../plugins/Flow/" },
     { "path": "../plugins/Wallet/" },
     { "path": "../backup-format/" },
diff --git a/packages/injected-script/main/GlobalVariableBridge/index.ts b/packages/injected-script/main/GlobalVariableBridge/index.ts
index c9569d02f980..c832ab3981a6 100644
--- a/packages/injected-script/main/GlobalVariableBridge/index.ts
+++ b/packages/injected-script/main/GlobalVariableBridge/index.ts
@@ -13,14 +13,27 @@ function read(path: string) {
     const fragments = apply(split, path, ['.' as any])
     let result: any = window
     while (fragments.length !== 0) {
-        const key = apply(shift, fragments, [])
-        result = key ? result[key] : result
+        try {
+            const key = apply(shift, fragments, [])
+            result = key ? result[key] : result
+        } catch {
+            return
+        }
     }
     return result
 }
 
 export function access(path: string, id: number, property: string) {
-    handlePromise(id, () => read(path)[property])
+    handlePromise(id, () => {
+        const item = read(path)[property]
+
+        // the public key cannot transfer correctly between pages, since stringify it manually
+        if (path === 'solflare' && property === 'publicKey') {
+            return item.toBase58()
+        }
+
+        return item
+    })
 }
 
 export function callRequest(path: string, id: number, request: unknown) {
@@ -37,16 +50,22 @@ export function bindEvent(path: string, bridgeEvent: keyof InternalEvents, event
     read(path).on(
         event,
         clone_into((...args: any[]) => {
-            sendEvent(bridgeEvent, event, args)
+            // TODO: type unsound
+            sendEvent(bridgeEvent, path, event, args)
         }),
     )
 }
 
 function untilInner(name: string) {
     if (has(window, name)) return apply<(result: true) => Promise<true>>(resolve, Promise, [true])
-    return new Promise<true>((r) => {
+
+    let restCheckTimes = 150 // 30s
+
+    return new Promise<true>((resolve) => {
         function check() {
-            if (has(window, name)) return r(true)
+            restCheckTimes -= 1
+            if (restCheckTimes < 0) return
+            if (has(window, name)) return resolve(true)
             apply(setTimeout, window, [check, 200])
         }
         check()
diff --git a/packages/injected-script/main/communicate.ts b/packages/injected-script/main/communicate.ts
index 44489e68e40a..ffc597ebf0ed 100644
--- a/packages/injected-script/main/communicate.ts
+++ b/packages/injected-script/main/communicate.ts
@@ -27,43 +27,19 @@ document.addEventListener(CustomEventId, (e) => {
         case 'resolvePromise':
             return
 
-        // solana
-        case 'solanaBridgeRequestListen':
-            return apply(bindEvent, null, ['solana', 'solanaBridgeOnEvent', ...r[1]])
-        case 'solanaBridgeExecute':
-            return apply(execute, null, [...r[1]])
-        case 'solanaBridgeSendRequest':
-            return apply(callRequest, null, ['solana', ...r[1]])
-        case 'solanaBridgePrimitiveAccess':
-            return apply(access, null, ['solana', ...r[1]])
-        case 'untilSolanaBridgeOnline':
-            return apply(until, null, ['solana', ...r[1]])
-        case 'solanaBridgeOnEvent':
-            return
-
-        // ethereum
-        case 'ethBridgeRequestListen':
-            return apply(bindEvent, null, ['ethereum', 'ethBridgeOnEvent', ...r[1]])
-        case 'ethBridgeSendRequest':
-            return apply(callRequest, null, ['ethereum', ...r[1]])
-        case 'ethBridgePrimitiveAccess':
-            return apply(access, null, ['ethereum', ...r[1]])
-        case 'untilEthBridgeOnline':
-            return apply(until, null, ['ethereum', ...r[1]])
-        case 'ethBridgeOnEvent':
-            return
-
-        // coin98
-        case 'coin98BridgeRequestListen':
-            return apply(bindEvent, null, ['coin98.provider', 'coin98BridgeOnEvent', ...r[1]])
-        case 'coin98BridgeSendRequest':
-            return apply(callRequest, null, ['coin98.provider', ...r[1]])
-        case 'coin98BridgePrimitiveAccess':
-            return apply(access, null, ['coin98.provider', ...r[1]])
-        case 'untilCoin98BridgeOnline':
-            return apply(until, null, ['coin98', ...r[1]])
-        case 'coin98BridgeOnEvent':
+        // web3
+        case 'web3BridgeBindEvent':
+            return apply(bindEvent, null, r[1])
+        case 'web3BridgeEmitEvent':
             return
+        case 'web3BridgeSendRequest':
+            return apply(callRequest, null, r[1])
+        case 'web3BridgePrimitiveAccess':
+            return apply(access, null, r[1])
+        case 'web3UntilBridgeOnline':
+            return apply(until, null, r[1])
+        case 'web3BridgeExecute':
+            return apply(execute, null, r[1])
 
         default:
             const neverEvent: never = r[0]
diff --git a/packages/injected-script/package.json b/packages/injected-script/package.json
index 308b4efd55ff..9d322954c7cb 100644
--- a/packages/injected-script/package.json
+++ b/packages/injected-script/package.json
@@ -13,9 +13,6 @@
     "build": "rollup -c",
     "start": "rollup -c -w"
   },
-  "dependencies": {
-    "web3-core-helpers": "1.7.3"
-  },
   "devDependencies": {
     "@rollup/plugin-sucrase": "^4.0.4",
     "rollup": "^2.73.0",
diff --git a/packages/injected-script/sdk/Base.ts b/packages/injected-script/sdk/Base.ts
new file mode 100644
index 000000000000..253aa966ec3f
--- /dev/null
+++ b/packages/injected-script/sdk/Base.ts
@@ -0,0 +1,101 @@
+import { createPromise, sendEvent } from './utils'
+
+export class InjectedProvider {
+    private events = new Map<string, Set<Function>>()
+    private isReadyInternal = false
+    private isConnectedInternal = false
+
+    constructor(public pathname: string) {
+        this.startup()
+    }
+
+    private async startup() {
+        await this.untilAvailable()
+
+        this.on('connected', () => {
+            this.isConnectedInternal = true
+        })
+        this.on('disconnect', () => {
+            this.isConnectedInternal = false
+        })
+
+        this.isConnectedInternal = (await this.getProperty('isConnected')) as boolean
+    }
+
+    get isReady() {
+        return this.isReadyInternal
+    }
+
+    get isConnected() {
+        return this.isConnectedInternal
+    }
+
+    /**
+     * Build the connection.
+     */
+    connect(options: unknown): Promise<unknown> {
+        return createPromise((id) => sendEvent('web3BridgeExecute', [this.pathname, 'connect'].join('.'), id, options))
+    }
+
+    /**
+     * Break the connections.
+     */
+    disconnect(): Promise<void> {
+        return createPromise((id) => sendEvent('web3BridgeExecute', [this.pathname, 'disconnect'].join('.'), id))
+    }
+
+    /**
+     * Wait until the sdk object injected into the page.
+     */
+    async untilAvailable(validator: () => Promise<boolean> = () => Promise.resolve(true)): Promise<void> {
+        await createPromise((id) => sendEvent('web3UntilBridgeOnline', this.pathname.split('.')[0], id))
+        if (await validator()) {
+            this.isReadyInternal = true
+        }
+    }
+
+    /**
+     * Send RPC request to the sdk object.
+     */
+    request(data: unknown): Promise<unknown> {
+        return createPromise((id) => sendEvent('web3BridgeExecute', [this.pathname, 'request'].join('.'), id, data))
+    }
+
+    /**
+     * Add event listener on the sdk object.
+     */
+    on(event: string, callback: (...args: any) => void): () => void {
+        if (!this.events.has(event)) {
+            this.events.set(event, new Set())
+            sendEvent('web3BridgeBindEvent', this.pathname, 'web3BridgeEmitEvent', event)
+        }
+        const set = this.events.get(event)!
+        set.add(callback)
+        return () => void set.delete(callback)
+    }
+
+    /**
+     * Remove event listener from the sdk object.
+     */
+    off(event: string, callback: (...args: any) => void): void {
+        this.events.get(event)?.delete(callback)
+    }
+
+    /**
+     * Emit event and invoke registered listeners
+     */
+    emit(event: string, data: unknown[]) {
+        for (const f of this.events.get(event) || []) {
+            try {
+                Reflect.apply(f, null, data)
+            } catch {}
+        }
+    }
+
+    /**
+     * Access primitive property on the sdk object.
+     */
+    getProperty(key: string): Promise<unknown> {
+        return createPromise((id) => sendEvent('web3BridgePrimitiveAccess', this.pathname, id, key))
+    }
+}
diff --git a/packages/injected-script/sdk/Coin98.ts b/packages/injected-script/sdk/Coin98.ts
new file mode 100644
index 000000000000..58512549ea7a
--- /dev/null
+++ b/packages/injected-script/sdk/Coin98.ts
@@ -0,0 +1,28 @@
+import type { RequestArguments } from 'web3-core'
+import { InjectedProvider } from './Base'
+
+export enum Coin98ProviderType {
+    EVM = 1,
+    Solana = 2,
+    Near = 3,
+}
+
+export class Coin98Provider extends InjectedProvider {
+    constructor(protected type: Coin98ProviderType) {
+        const pathnameMap: Record<Coin98ProviderType, string> = {
+            [Coin98ProviderType.EVM]: 'coin98.provider',
+            [Coin98ProviderType.Near]: 'coin98.near',
+            [Coin98ProviderType.Solana]: 'coin98.sol',
+        }
+
+        super(pathnameMap[type])
+    }
+
+    override async request(data: RequestArguments): Promise<unknown> {
+        // coin98 cannot handle it correctly (test with coin98 v6.0.3)
+        if (data.method === 'eth_chainId') {
+            return this.getProperty('chainId')
+        }
+        return super.request(data)
+    }
+}
diff --git a/packages/injected-script/sdk/MathWallet.ts b/packages/injected-script/sdk/MathWallet.ts
new file mode 100644
index 000000000000..b426c3db3b76
--- /dev/null
+++ b/packages/injected-script/sdk/MathWallet.ts
@@ -0,0 +1,11 @@
+import { InjectedProvider } from './Base'
+
+export class MathWalletProvider extends InjectedProvider {
+    constructor() {
+        super('ethereum')
+    }
+
+    override async untilAvailable(): Promise<void> {
+        await super.untilAvailable(() => super.getProperty('isMathWallet') as Promise<boolean>)
+    }
+}
diff --git a/packages/injected-script/sdk/MetaMask.ts b/packages/injected-script/sdk/MetaMask.ts
new file mode 100644
index 000000000000..10e4d5182991
--- /dev/null
+++ b/packages/injected-script/sdk/MetaMask.ts
@@ -0,0 +1,11 @@
+import { InjectedProvider } from './Base'
+
+export class MetaMaskProvider extends InjectedProvider {
+    constructor() {
+        super('ethereum')
+    }
+
+    override async untilAvailable(): Promise<void> {
+        await super.untilAvailable(() => super.getProperty('isMetaMask') as Promise<boolean>)
+    }
+}
diff --git a/packages/injected-script/sdk/Phantom.ts b/packages/injected-script/sdk/Phantom.ts
new file mode 100644
index 000000000000..0065b8d0c715
--- /dev/null
+++ b/packages/injected-script/sdk/Phantom.ts
@@ -0,0 +1,7 @@
+import { InjectedProvider } from './Base'
+
+export class PhantomProvider extends InjectedProvider {
+    constructor() {
+        super('phantom.solana')
+    }
+}
diff --git a/packages/injected-script/sdk/Solflare.ts b/packages/injected-script/sdk/Solflare.ts
new file mode 100644
index 000000000000..11f969b779a1
--- /dev/null
+++ b/packages/injected-script/sdk/Solflare.ts
@@ -0,0 +1,15 @@
+import { InjectedProvider } from './Base'
+
+export class SolflareProvider extends InjectedProvider {
+    constructor() {
+        super('solflare')
+    }
+
+    override async connect(options: unknown): Promise<unknown> {
+        await super.connect(options)
+        const publicKey = (await super.getProperty('publicKey')) as string
+        return {
+            publicKey,
+        }
+    }
+}
diff --git a/packages/injected-script/sdk/WalletLink.ts b/packages/injected-script/sdk/WalletLink.ts
new file mode 100644
index 000000000000..d0003022cdd8
--- /dev/null
+++ b/packages/injected-script/sdk/WalletLink.ts
@@ -0,0 +1,12 @@
+import { InjectedProvider } from './Base'
+import { createPromise, sendEvent } from './utils'
+
+export class WalletLinkProvider extends InjectedProvider {
+    constructor() {
+        super('walletLinkExtension')
+    }
+
+    override connect(options: unknown): Promise<void> {
+        return createPromise((id) => sendEvent('web3BridgeExecute', [this.pathname, 'enable'].join('.'), id, options))
+    }
+}
diff --git a/packages/injected-script/sdk/bridgedCoin98.ts b/packages/injected-script/sdk/bridgedCoin98.ts
deleted file mode 100644
index f39a1f9843b5..000000000000
--- a/packages/injected-script/sdk/bridgedCoin98.ts
+++ /dev/null
@@ -1,61 +0,0 @@
-import type { RequestArguments } from 'web3-core'
-import type { JsonRpcPayload, JsonRpcResponse } from 'web3-core-helpers'
-import type { EthereumProvider } from '../shared'
-import { createPromise, sendEvent } from './utils'
-
-function request(data: RequestArguments) {
-    return createPromise((id) => sendEvent('coin98BridgeSendRequest', id, data))
-}
-
-function send(payload: JsonRpcPayload, callback: (error: Error | null, result?: JsonRpcResponse) => void) {
-    createPromise((id) =>
-        sendEvent('coin98BridgeSendRequest', id, {
-            method: payload.method,
-            params: payload.params,
-        }),
-    ).then(
-        (value) => {
-            callback(null, {
-                jsonrpc: '2.0',
-                id: payload.id as number,
-                result: value,
-            })
-        },
-        (error) => {
-            if (error instanceof Error) callback(error)
-        },
-    )
-}
-
-/** Interact with the current ethereum provider */
-export const bridgedCoin98Provider: EthereumProvider = {
-    request,
-    send,
-    sendAsync: send,
-    on(event, callback) {
-        if (!bridgedCoin98.has(event)) {
-            bridgedCoin98.set(event, new Set())
-            sendEvent('coin98BridgeRequestListen', event)
-        }
-        const map = bridgedCoin98.get(event)!
-        map.add(callback)
-        return () => void map.delete(callback)
-    },
-    getProperty(key) {
-        return createPromise((id) => sendEvent('coin98BridgePrimitiveAccess', id, key))
-    },
-    untilAvailable() {
-        return createPromise((id) => sendEvent('untilCoin98BridgeOnline', id))
-    },
-}
-
-const bridgedCoin98 = new Map<string, Set<Function>>()
-/** @internal */
-export function onCoin98Event(event: string, data: unknown[]) {
-    for (const f of bridgedCoin98.get(event) || []) {
-        try {
-            Reflect.apply(f, null, data)
-        } catch {}
-    }
-    return
-}
diff --git a/packages/injected-script/sdk/bridgedEthereum.ts b/packages/injected-script/sdk/bridgedEthereum.ts
deleted file mode 100644
index 27354de35bce..000000000000
--- a/packages/injected-script/sdk/bridgedEthereum.ts
+++ /dev/null
@@ -1,61 +0,0 @@
-import type { RequestArguments } from 'web3-core'
-import type { JsonRpcPayload, JsonRpcResponse } from 'web3-core-helpers'
-import type { EthereumProvider } from '../shared'
-import { createPromise, sendEvent } from './utils'
-
-function request(data: RequestArguments) {
-    return createPromise((id) => sendEvent('ethBridgeSendRequest', id, data))
-}
-
-function send(payload: JsonRpcPayload, callback: (error: Error | null, result?: JsonRpcResponse) => void) {
-    createPromise((id) =>
-        sendEvent('ethBridgeSendRequest', id, {
-            method: payload.method,
-            params: payload.params,
-        }),
-    ).then(
-        (value) => {
-            callback(null, {
-                jsonrpc: '2.0',
-                id: payload.id as number,
-                result: value,
-            })
-        },
-        (error) => {
-            if (error instanceof Error) callback(error)
-        },
-    )
-}
-
-/** Interact with the current ethereum provider */
-export const bridgedEthereumProvider: EthereumProvider = {
-    request,
-    send,
-    sendAsync: send,
-    on(event, callback) {
-        if (!bridgedEthereum.has(event)) {
-            bridgedEthereum.set(event, new Set())
-            sendEvent('ethBridgeRequestListen', event)
-        }
-        const map = bridgedEthereum.get(event)!
-        map.add(callback)
-        return () => void map.delete(callback)
-    },
-    getProperty(key) {
-        return createPromise((id) => sendEvent('ethBridgePrimitiveAccess', id, key))
-    },
-    untilAvailable() {
-        return createPromise((id) => sendEvent('untilEthBridgeOnline', id))
-    },
-}
-
-const bridgedEthereum = new Map<string, Set<Function>>()
-/** @internal */
-export function onEthEvent(event: string, data: unknown[]) {
-    for (const f of bridgedEthereum.get(event) || []) {
-        try {
-            Reflect.apply(f, null, data)
-        } catch {}
-    }
-    return
-}
diff --git a/packages/injected-script/sdk/bridgedSolana.ts b/packages/injected-script/sdk/bridgedSolana.ts
deleted file mode 100644
index bfa57053a617..000000000000
--- a/packages/injected-script/sdk/bridgedSolana.ts
+++ /dev/null
@@ -1,97 +0,0 @@
-import type { RequestArguments } from 'web3-core'
-import type { JsonRpcPayload, JsonRpcResponse } from 'web3-core-helpers'
-import { createPromise, sendEvent } from './utils'
-
-function request(data: RequestArguments) {
-    return createPromise((id) => sendEvent('solanaBridgeSendRequest', id, data))
-}
-
-function send(payload: JsonRpcPayload, callback: (error: Error | null, result?: JsonRpcResponse) => void) {
-    createPromise((id) =>
-        sendEvent('solanaBridgeSendRequest', id, {
-            method: payload.method,
-            params: payload.params,
-        }),
-    ).then(
-        (value) => {
-            callback(null, {
-                jsonrpc: '2.0',
-                id: payload.id as number,
-                result: value,
-            })
-        },
-        (error) => {
-            if (error instanceof Error) callback(error)
-        },
-    )
-}
-
-let isConnected = false
-/** Interact with the current solana provider */
-export const bridgedSolanaProvider: BridgedSolanaProvider = {
-    connect(opts) {
-        return createPromise((id) => sendEvent('solanaBridgeExecute', 'solana.connect', id, opts))
-    },
-    request,
-    send,
-    sendAsync: send,
-    on(event, callback) {
-        if (!bridgedSolana.has(event)) {
-            bridgedSolana.set(event, new Set())
-            sendEvent('solanaBridgeRequestListen', event)
-        }
-        const map = bridgedSolana.get(event)!
-        map.add(callback)
-        return () => void map.delete(callback)
-    },
-    getProperty(key) {
-        return createPromise((id) => sendEvent('solanaBridgePrimitiveAccess', id, key))
-    },
-    isConnected,
-    untilAvailable() {
-        return createPromise((id) => sendEvent('untilSolanaBridgeOnline', id))
-    },
-}
-
-async function watchConnectStatus() {
-    const connected = await bridgedSolanaProvider.getProperty('isConnected')
-    if (connected !== undefined) {
-        isConnected = connected
-    }
-    bridgedSolanaProvider.on('connected', () => {
-        isConnected = true
-    })
-    bridgedSolanaProvider.on('disconnect', () => {
-        isConnected = false
-    })
-}
-watchConnectStatus()
-
-export interface BridgedSolanaProvider {
-    // _bn: result of serialization
-    connect(opts?: { onlyIfTrusted: boolean }): Promise<{ publicKey: { _bn: string } }>
-    /** Wait for window.solana object appears. */
-    untilAvailable(): Promise<true>
-    /** Send JSON RPC to the solana provider. */
-    request(data: RequestArguments): Promise<unknown>
-    /** Send JSON RPC  */
-    send(payload: JsonRpcPayload, callback: (error: Error | null, result?: JsonRpcResponse) => void): void
-    /** Async send JSON RPC  */
-    sendAsync(payload: JsonRpcPayload, callback: (error: Error | null, result?: JsonRpcResponse) => void): void
-    /** Add event listener */
-    on(event: string, callback: (...args: any) => void): () => void
-    /** Access primitive property on the window.solana object. */
-    getProperty(key: 'isPhantom' | 'isConnected'): Promise<boolean | undefined>
-    /** Call window.solana.isConnected */
-    isConnected: boolean
-}
-const bridgedSolana = new Map<string, Set<Function>>()
-/** @internal */
-export function onSolanaEvent(event: string, data: unknown[]) {
-    for (const f of bridgedSolana.get(event) || []) {
-        try {
-            Reflect.apply(f, null, data)
-        } catch {}
-    }
-    return
-}
diff --git a/packages/injected-script/sdk/index.ts b/packages/injected-script/sdk/index.ts
index 5c0b8e0d8afa..3a0555c8dd27 100644
--- a/packages/injected-script/sdk/index.ts
+++ b/packages/injected-script/sdk/index.ts
@@ -1,12 +1,21 @@
 import { CustomEventId, decodeEvent } from '../shared'
-import { onEthEvent } from './bridgedEthereum'
-import { onCoin98Event } from './bridgedCoin98'
-import { onSolanaEvent } from './bridgedSolana'
+import { Coin98Provider, Coin98ProviderType } from './Coin98'
+import { PhantomProvider } from './Phantom'
+import { SolflareProvider } from './Solflare'
+import { MetaMaskProvider } from './MetaMask'
 import { sendEvent, rejectPromise, resolvePromise } from './utils'
+import { MathWalletProvider } from './MathWallet'
+import { WalletLinkProvider } from './WalletLink'
 
-export { bridgedEthereumProvider } from './bridgedEthereum'
-export { bridgedCoin98Provider } from './bridgedCoin98'
-export { bridgedSolanaProvider } from './bridgedSolana'
+export type { EthereumProvider, InternalEvents } from '../shared'
+
+export const injectedCoin98EVMProvider = new Coin98Provider(Coin98ProviderType.EVM)
+export const injectedCoin98SolanaProvider = new Coin98Provider(Coin98ProviderType.Solana)
+export const injectedPhantomProvider = new PhantomProvider()
+export const injectedSolflareProvider = new SolflareProvider()
+export const injectedMetaMaskProvider = new MetaMaskProvider()
+export const injectedMathWalletProvider = new MathWalletProvider()
+export const injectedWalletLinkProvider = new WalletLinkProvider()
 
 export function pasteText(text: string) {
     sendEvent('paste', text)
@@ -39,29 +48,29 @@ document.addEventListener(CustomEventId, (e) => {
         case 'rejectPromise':
             return rejectPromise(...r[1])
 
-        case 'ethBridgeOnEvent':
-            return onEthEvent(...r[1])
-        case 'coin98BridgeOnEvent':
-            return onCoin98Event(...r[1])
-        case 'solanaBridgeOnEvent':
-            return onSolanaEvent(...r[1])
-        case 'ethBridgeSendRequest':
-        case 'ethBridgePrimitiveAccess':
-        case 'ethBridgeRequestListen':
-        case 'coin98BridgeSendRequest':
-        case 'coin98BridgePrimitiveAccess':
-        case 'coin98BridgeRequestListen':
-        case 'solanaBridgeSendRequest':
-        case 'solanaBridgePrimitiveAccess':
-        case 'solanaBridgeRequestListen':
-        case 'solanaBridgeExecute':
+        case 'web3BridgeEmitEvent':
+            const [pathname, eventName, data] = r[1]
+            const provider = [
+                injectedCoin98EVMProvider,
+                injectedCoin98SolanaProvider,
+                injectedPhantomProvider,
+                injectedMetaMaskProvider,
+                injectedMathWalletProvider,
+                injectedWalletLinkProvider,
+            ].find((x) => x.pathname === pathname)
+
+            provider?.emit(eventName, data)
+            return
+
+        case 'web3BridgeBindEvent':
+        case 'web3BridgeSendRequest':
+        case 'web3BridgeExecute':
+        case 'web3UntilBridgeOnline':
+        case 'web3BridgePrimitiveAccess':
         case 'input':
         case 'paste':
         case 'pasteImage':
         case 'instagramUpload':
-        case 'untilEthBridgeOnline':
-        case 'untilCoin98BridgeOnline':
-        case 'untilSolanaBridgeOnline':
         case 'hookInputUploadOnce':
             break
         default:
diff --git a/packages/injected-script/sdk/tsconfig.json b/packages/injected-script/sdk/tsconfig.json
index a7c4f0e0842b..4b3dd476cc66 100644
--- a/packages/injected-script/sdk/tsconfig.json
+++ b/packages/injected-script/sdk/tsconfig.json
@@ -5,6 +5,16 @@
     "outDir": "../dist/sdk",
     "tsBuildInfoFile": "../dist/sdk.tsbuildinfo"
   },
-  "files": ["./index.ts", "./bridgedEthereum.ts", "./bridgedCoin98.ts", "./bridgedSolana.ts", "utils.ts"],
+  "files": [
+    "index.ts",
+    "Base.ts",
+    "Phantom.ts",
+    "Solflare.ts",
+    "Coin98.ts",
+    "MetaMask.ts",
+    "MathWallet.ts",
+    "WalletLink.ts",
+    "utils.ts"
+  ],
   "references": [{ "path": "../shared/" }]
 }
diff --git a/packages/injected-script/shared/index.ts b/packages/injected-script/shared/index.ts
index c42978c4288b..c69bb30fb17c 100644
--- a/packages/injected-script/shared/index.ts
+++ b/packages/injected-script/shared/index.ts
@@ -1,5 +1,4 @@
 import type { RequestArguments } from 'web3-core'
-import type { JsonRpcPayload, JsonRpcResponse } from 'web3-core-helpers'
 
 export const CustomEventId = 'c8a6c18e-f6a3-472a-adf3-5335deb80db6'
 export interface InternalEvents {
@@ -19,45 +18,19 @@ export interface InternalEvents {
      */
     hookInputUploadOnce: [format: string, fileName: string, file: number[], triggerOnActiveElementNow: boolean]
 
-    // #region Eth inpage provider bridge
+    // #region web3 bridge
     /** Request the bridge to listen on an event. */
-    ethBridgeRequestListen: [eventName: string]
+    web3BridgeBindEvent: [path: string, responseEventName: keyof InternalEvents, eventName: string]
     /** When a event happened. */
-    ethBridgeOnEvent: [eventName: string, data: unknown[]]
+    web3BridgeEmitEvent: [path: string, eventName: string, data: unknown[]]
     /** Send JSON RPC request. */
-    ethBridgeSendRequest: [req_id: number, request: unknown]
+    web3BridgeSendRequest: [path: string, req_id: number, request: unknown]
     /** Access primitive property on the window.ethereum object. */
-    ethBridgePrimitiveAccess: [req_id: number, property: string]
+    web3BridgePrimitiveAccess: [path: string, req_id: number, property: string]
     /** Wait until window.ethereum appears */
-    untilEthBridgeOnline: [req_id: number]
-    // #endregion
-
-    // #region Eth inpage provider bridge
-    /** Request the bridge to listen on an event. */
-    coin98BridgeRequestListen: [eventName: string]
-    /** When a event happened. */
-    coin98BridgeOnEvent: [eventName: string, data: unknown[]]
-    /** Send JSON RPC request. */
-    coin98BridgeSendRequest: [req_id: number, request: unknown]
-    /** Access primitive property on the window.ethereum object. */
-    coin98BridgePrimitiveAccess: [req_id: number, property: string]
-    /** Wait until window.ethereum appears */
-    untilCoin98BridgeOnline: [req_id: number]
-    // #endregion
-
-    // #region Solana inpage provider bridge
+    web3UntilBridgeOnline: [path: string, req_id: number]
     /** Request the bridge to call function. */
-    solanaBridgeExecute: [path: string, req_id: number, opts?: { onlyIfTrusted: boolean }]
-    /** Request the bridge to listen on an event. */
-    solanaBridgeRequestListen: [eventName: string]
-    /** When a event happened. */
-    solanaBridgeOnEvent: [eventName: string, data: unknown[]]
-    /** Send JSON RPC request. */
-    solanaBridgeSendRequest: [req_id: number, request: unknown]
-    /** Access primitive property on the window.solana object. */
-    solanaBridgePrimitiveAccess: [req_id: number, property: string]
-    /** Wait until window.solana appears */
-    untilSolanaBridgeOnline: [req_id: number]
+    web3BridgeExecute: [path: string, req_id: number, opts?: unknown]
     // #endregion
 
     /** A simple RPC. */
@@ -72,12 +45,10 @@ export interface EthereumProvider {
     untilAvailable(): Promise<true>
     /** Send JSON RPC to the ethereum provider. */
     request(data: RequestArguments): Promise<unknown>
-    /** Send JSON RPC  */
-    send(payload: JsonRpcPayload, callback: (error: Error | null, result?: JsonRpcResponse) => void): void
-    /** Async send JSON RPC  */
-    sendAsync(payload: JsonRpcPayload, callback: (error: Error | null, result?: JsonRpcResponse) => void): void
     /** Add event listener */
     on(event: string, callback: (...args: any) => void): () => void
+    /** Remove event listener */
+    off(event: string, callback: (...args: any) => void): void
     /** Access primitive property on the ethereum object. */
     getProperty(key: string): Promise<boolean | undefined>
 }
diff --git a/packages/mask/background/services/crypto/decryption.ts b/packages/mask/background/services/crypto/decryption.ts
index 5f8fcca2131e..dc520dfaa1dc 100644
--- a/packages/mask/background/services/crypto/decryption.ts
+++ b/packages/mask/background/services/crypto/decryption.ts
@@ -101,7 +101,7 @@ async function* decryption(payload: string | Uint8Array, context: DecryptionCont
     }
     const id = new PostIVIdentifier(
         SocialNetworkEnumToProfileDomain(currentSocialNetwork),
-        encodeArrayBuffer(iv.buffer),
+        encodeArrayBuffer(new Uint8Array(iv.buffer)),
     )
     // #endregion
 
diff --git a/packages/mask/package.json b/packages/mask/package.json
index b905e413fdd2..a8850fcb04b6 100644
--- a/packages/mask/package.json
+++ b/packages/mask/package.json
@@ -6,7 +6,6 @@
     "@balancer-labs/sor": "^1.0.0",
     "@dimensiondev/holoflows-kit": "^0.9.0-20220520093249-0870919",
     "@dimensiondev/mask-wallet-core": "0.1.0-20211013082857-eb62e5f",
-    "@dimensiondev/metamask-extension-provider": "3.0.6-20210519045409-1835d4d",
     "@dimensiondev/secp256k1-webcrypto": "1.0.0-20220412114204-be816df",
     "@ethersproject/abi": "^5.4.0",
     "@ethersproject/address": "^5.0.4",
@@ -26,6 +25,7 @@
     "@masknet/plugin-debugger": "workspace:*",
     "@masknet/plugin-example": "workspace:*",
     "@masknet/plugin-file-service": "workspace:*",
+    "@masknet/plugin-evm": "workspace:*",
     "@masknet/plugin-flow": "workspace:*",
     "@masknet/plugin-go-plus-security": "workspace:*",
     "@masknet/plugin-infra": "workspace:*",
@@ -61,13 +61,11 @@
     "@types/react-virtualized-auto-sizer": "^1.0.1",
     "@types/react-window": "^1.8.4",
     "@types/remarkable": "^2.0.3",
-    "@types/socket.io-client": "^1.4.36",
     "@types/use-subscription": "^1.0.0",
     "@types/uuid": "^8.3.4",
     "@uniswap/sdk-core": "^3.0.1",
     "@uniswap/v2-sdk": "3.0.0-alpha.2",
     "@uniswap/v3-sdk": "^3.3.2",
-    "@walletconnect/client": "^1.2.2",
     "anchorme": "^2.1.2",
     "assert": "^2.0.0",
     "async-call-rpc": "^6.0.2",
@@ -82,7 +80,6 @@
     "date-fns": "^2.28.0",
     "elliptic": "^6.5.3",
     "ethereumjs-util": "^7.1.0",
-    "ethjs-ens": "^2.0.1",
     "event-iterator": "^2.0.0",
     "fuse.js": "^6.6.2",
     "graphql": "^15.5.1",
diff --git a/packages/mask/shared-ui/TypedMessageRender/Components/Text.tsx b/packages/mask/shared-ui/TypedMessageRender/Components/Text.tsx
index 19437b576d23..da45c6f35cbd 100644
--- a/packages/mask/shared-ui/TypedMessageRender/Components/Text.tsx
+++ b/packages/mask/shared-ui/TypedMessageRender/Components/Text.tsx
@@ -2,6 +2,8 @@ import { memo, PropsWithChildren, useCallback } from 'react'
 import { Typography, Link as MaterialLink } from '@mui/material'
 import type { RenderFragmentsContextType } from '@masknet/typed-message/dom'
 import { useActivatedPluginsSNSAdaptor } from '@masknet/plugin-infra/content-script'
+import { useChainId } from '@masknet/plugin-infra/web3'
+import { NetworkPluginID } from '@masknet/web3-shared-base'
 
 export const Container = memo(function Container(props: PropsWithChildren<{}>) {
     return (
@@ -20,6 +22,7 @@ export const Link = memo(function Anchor(props: RenderFragmentsContextType.LinkP
 })
 
 export function useTagEnhancer(kind: 'hash' | 'cash', content: string) {
+    const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
     const plugin = useActivatedPluginsSNSAdaptor(false)
         .filter((x) => x.enhanceTag)
         .at(0)
@@ -32,7 +35,7 @@ export function useTagEnhancer(kind: 'hash' | 'cash', content: string) {
     )
     const onMouseEnter: React.EventHandler<React.MouseEvent<HTMLAnchorElement>> = useCallback(
         (event) => {
-            const cancel = plugin?.enhanceTag?.onHover?.(kind, content, event)
+            const cancel = plugin?.enhanceTag?.onHover?.(kind, content, event, chainId)
             event.currentTarget.addEventListener('mouseleave', () => cancel?.(), { once: true })
         },
         [plugin],
diff --git a/packages/mask/shared-ui/locales/en-US.json b/packages/mask/shared-ui/locales/en-US.json
index 5852e1f06d72..5a3beacdb0c7 100644
--- a/packages/mask/shared-ui/locales/en-US.json
+++ b/packages/mask/shared-ui/locales/en-US.json
@@ -292,7 +292,7 @@
     "plugin_wallet_connected_with": "Connected with",
     "plugin_wallet_connecting_with": "Connecting with",
     "plugin_wallet_metamask_error_already_request": "You've opened the popup, please confirm.",
-    "plugin_wallet_connect_tip": "Please make sure that your {{providerName}} wallet is provided by the offical <providerLink>{{providerShortenLink}}</providerLink>.",
+    "plugin_wallet_connect_tip": "Please make sure that your {{providerName}} wallet is provided by the official <providerLink>{{providerShortenLink}}</providerLink>.",
     "plugin_wallet_select_a_nft_contract": "Select an NFT Contract",
     "plugin_wallet_select_a_nft_owner": "Select an NFT Contract Owner",
     "plugin_wallet_select_a_nft_operator": "Select an NFT Contract Operator",
@@ -346,6 +346,54 @@
     "plugin_nft_avatar_recommend_feature_description": "Set your NFT as profile picture with exclusive aura",
     "application_hint": "Socialize and show off your NFTs. People can bid,buy, view your valuable NFTs without leaving Twitter.",
     "plugin_red_packet_create": "Create a Lucky Drop",
+    "plugin_red_packet_claimed": "Claimed",
+    "plugin_red_packet_erc20_tab_title": "Token",
+    "plugin_red_packet_erc721_tab_title": "Collectibles",
+    "plugin_red_packet_name": "Lucky Drop",
+    "plugin_red_packet_recommend_feature_description": "Astonish your friends with a surprise gift",
+    "plugin_red_packet_description": "Gift crypto or NFTs to any users, first come, first served.",
+    "plugin_red_packet_erc721_insufficient_balance": "Insufficient Balance",
+    "plugin_red_packet_details": "Lucky Drop Details",
+    "plugin_red_packet_split_mode": "Split Mode",
+    "plugin_red_packet_average": "Average",
+    "plugin_red_packet_random": "Random",
+    "plugin_red_packet_shares": "Shares",
+    "plugin_red_packet_best_wishes": "Best Wishes!",
+    "plugin_red_packet_create_new": "New",
+    "plugin_red_packet_claim": "Claim",
+    "plugin_red_packet_claiming": "Claiming...",
+    "plugin_red_packet_refund": "Refund",
+    "plugin_red_packet_empty": "Empty",
+    "plugin_red_packet_data_broken": "The Lucky Drop can’t be sent due to data damage. Please withdraw the assets after {{duration}}.",
+    "plugin_red_packet_refunding": "Refunding",
+    "plugin_red_packet_select_existing": "Past",
+    "plugin_red_packet_share_unclaimed_message_official_account": "Hi friends, I just found a lucky drop sent by @{{sender}} on {{network}} network. Follow @{{account}} (mask.io) to claim lucky drops.\n#mask_io #LuckyDrop\n{{payload}}",
+    "plugin_red_packet_share_unclaimed_message_not_twitter": "Hi friends, I just found a lucky drop sent by @{{sender}} on {{network}} network. \n{{payload}}",
+    "plugin_red_packet_share_message_official_account": "I just claimed a lucky drop from @{{sender}} on {{network}} network. Follow @{{account}} (mask.io) to claim lucky drops.\n#mask_io #LuckyDrop\n{{payload}}",
+    "plugin_red_packet_share_message_not_twitter": "I just claimed a lucky drop from @{{sender}} on {{network}} network. \n{{payload}}",
+    "plugin_red_packet_nft_share_foreshow_message": "@{{sender}} is sending an NFT lucky drop on {{network}} network. Follow @{{account}} (mask.io) to claim NFT lucky drops.\n#mask_io #LuckyDrop\n{{payload}}",
+    "plugin_red_packet_nft_share_foreshow_message_not_twitter": "@{{sender}} is sending an NFT lucky drop on {{network}} network. \n{{payload}}",
+    "plugin_red_packet_nft_share_claimed_message": "I just claimed an NFT lucky drop from @{{sender}} on {{network}} network. Follow @{{account}} (mask.io) to claim NFT lucky drops.\n#mask_io #LuckyDrop\n{{payload}}",
+    "plugin_red_packet_nft_share_claimed_message_not_twitter": "I just claimed an NFT lucky drop from @{{sender}} on {{network}} network. \n{{payload}}",
+    "plugin_red_packet_nft_tip": "This is an NFT lucky drop.",
+    "plugin_red_packet_nft_no_history": "You haven’t created any NFT lucky drop yet. Try to create and share lucky with your friends.",
+    "plugin_red_packet_attached_message": "Attached Message",
+    "plugin_red_packet_from": "From: @{{name}}",
+    "plugin_red_packet_description_claimed": "You got {{amount}} {{symbol}}",
+    "plugin_red_packet_description_expired": "The Lucky Drop is expired.",
+    "plugin_red_packet_description_refunded": "The Lucky Drop has been refunded.",
+    "plugin_red_packet_description_refund": "You could refund {{balance}} {{symbol}}.",
+    "plugin_red_packet_description_empty": "The Lucky Drop is empty.",
+    "plugin_red_packet_description_broken": "The Lucky Drop is broken.",
+    "plugin_red_packet_description_failover": "{{shares}} shares / {{total}} {{symbol}}",
+    "plugin_red_packet_amount_per_share": "Amount per Share",
+    "plugin_red_packet_send_symbol": "Send {{amount}} {{symbol}}",
+    "plugin_red_packet_amount_total": "Amount Total",
+    "plugin_red_packet_next": "Next",
+    "plugin_red_packet_back": "Back",
+    "plugin_red_packet_hint": "You can withdraw the remaining balance 24 hours after the Lucky Drop is sent.",
+    "plugin_red_packet_token": "Token",
+    "plugin_red_packet_message_label": "Title",
     "plugin_red_packet_create_with_token": "Create a Lucky Drop with {{amount}} {{symbol}}",
     "plugin_nft_red_packet_create": "Create an NFT Lucky Drop",
     "plugin_red_packet_nft_account_name": "Wallet account",
@@ -641,7 +689,7 @@
     "plugin_collectible_invalid_reserve_price": "Invalid reserve price",
     "plugin_collectible_place_a_bid": "Place a Bid",
     "plugin_collectible_make_an_offer": "Make an Offer",
-    "plugin_collectible_approved_by_open_sea": "By checking this box, I acknowledge that this item has not been reviewed or approved by OpenSea.",
+    "plugin_collectible_approved_by_opensea": "By checking this box, I acknowledge that this item has not been reviewed or approved by OpenSea.",
     "plugin_collectible_legal_text": "By checking this box, I agree to OpenSea's <terms>Terms of Service</terms>.",
     "plugin_collectibles_name": "Collectibles",
     "plugin_collectibles_description": "Display specific information of collectibles in OpenSea and Rarible, make an offer directly on social media.",
diff --git a/packages/mask/shared-ui/locales/ja-JP.json b/packages/mask/shared-ui/locales/ja-JP.json
index 9cd3090de974..a17925a94eff 100644
--- a/packages/mask/shared-ui/locales/ja-JP.json
+++ b/packages/mask/shared-ui/locales/ja-JP.json
@@ -103,6 +103,26 @@
     "plugin_wallet_on_connect_in_firefox": "接続する",
     "plugin_wallet_return_mobile_wallet_options": "モバイルウォレットのオプションに戻る",
     "plugin_wallet_view_qr_code": "QR コードを表示する",
+    "plugin_red_packet_display_name": "プラグイン: 投げ銭",
+    "plugin_red_packet_split_mode": "分割モード",
+    "plugin_red_packet_average": "平均",
+    "plugin_red_packet_random": "ランダム",
+    "plugin_red_packet_shares": "株数",
+    "plugin_red_packet_best_wishes": "幸運を祈ります！",
+    "plugin_red_packet_create_new": "新しい投げ銭を作成",
+    "plugin_red_packet_claim": "受け取る",
+    "plugin_red_packet_refund": "無効",
+    "plugin_red_packet_select_existing": "既存の投げ銭を選択",
+    "plugin_red_packet_attached_message": "メッセージを追加",
+    "plugin_red_packet_from": "送信者：{{name}}",
+    "plugin_red_packet_description_expired": "期限切れです",
+    "plugin_red_packet_description_refunded": "無効です",
+    "plugin_red_packet_description_refund": "{{balance}}{{symbol}}を受け取れます",
+    "plugin_red_packet_description_empty": "期限切れです",
+    "plugin_red_packet_description_broken": "破損しています",
+    "plugin_red_packet_description_failover": "{{amount}} {{symbol}} / {{shares}} 株",
+    "plugin_red_packet_amount_per_share": "1株当たりの金額",
+    "plugin_red_packet_send_symbol": "{{symbol}} を送る",
     "plugin_red_packet_create_with_token": "{{symbol}} で投げ銭を作成する",
     "plugin_gitcoin_select_a_token": "トークンを選択する",
     "plugin_gitcoin_insufficient_balance": "{{symbol}} の残高が足りません",
diff --git a/packages/mask/shared-ui/locales/ko-KR.json b/packages/mask/shared-ui/locales/ko-KR.json
index 6761f7a7923b..cbc72eac9dfa 100644
--- a/packages/mask/shared-ui/locales/ko-KR.json
+++ b/packages/mask/shared-ui/locales/ko-KR.json
@@ -213,6 +213,48 @@
     "plugin_wallet_connect_wallet": "월렛 연결",
     "plugin_wallet_name_placeholder": "1-12 자 입력하세요",
     "plugin_wallet_cancel_sign": "서명이 실패되었습니다.",
+    "plugin_red_packet_display_name": "플러그인: 빨간 백",
+    "plugin_red_packet_erc20_tab_title": "토큰",
+    "plugin_red_packet_erc721_tab_title": "수집품",
+    "plugin_red_packet_erc721_insufficient_balance": "잔액 부족",
+    "plugin_red_packet_details": "행운 드랍 디테일",
+    "plugin_red_packet_split_mode": "분할 모드",
+    "plugin_red_packet_average": "평균",
+    "plugin_red_packet_random": "렌덤",
+    "plugin_red_packet_shares": "공유",
+    "plugin_red_packet_best_wishes": "행운을 빌어요!",
+    "plugin_red_packet_create_new": "새로운 것 만들기",
+    "plugin_red_packet_claim": "수령",
+    "plugin_red_packet_claiming": "수령 중...",
+    "plugin_red_packet_refund": "반환",
+    "plugin_red_packet_empty": "비어 있음",
+    "plugin_red_packet_data_broken": "데이터 손상으로 인해 레드 패킷을 보낼 수 없습니다. {{duration}} 후 자산을 인출할 수 있습니다.",
+    "plugin_red_packet_refunding": "환급 중",
+    "plugin_red_packet_select_existing": "기존 빨간 백 선택",
+    "plugin_red_packet_share_message_official_account": "{{network}} 네트워크에서 @{{sender}}의 레트 패킷을 받았어요. @{{account}} (mask.io) 팔로우하고 레드 패킷을 받으세요.\n#mask_io #LuckyDrop\n{{payload}}",
+    "plugin_red_packet_share_message_not_twitter": "{{network}} 에서 @{{sender}} 의 레드 패킷을 클레임했습니다.\n{{payload}}",
+    "plugin_red_packet_nft_share_foreshow_message": "@{{network}} 네트워크에서 @{{sender}} 레트 패킷을 보내고 있습니다. @{{account}} (mask.io) 팔로우하고 NFT 레드 패킷을 받으세요.\n#mask_io #LuckyDrop\n{{payload}}",
+    "plugin_red_packet_nft_share_foreshow_message_not_twitter": "@{{network}} 네트워크에서 @{{sender}} NFT 레트 패킷을 보내고 있습니다. \n{{payload}}",
+    "plugin_red_packet_nft_share_claimed_message": "{{network}} 네트워크에서 @{{sender}}의 NFT 레트 패킷을 받았어요. @{{account}} (mask.io) 팔로우하고 NFT 레드 패킷을 받으세요.\n#mask_io #LuckyDrop\n{{payload}}",
+    "plugin_red_packet_nft_share_claimed_message_not_twitter": "{{network}} 에서 @{{sender}} 의 NFT 레드 패킷을 클레임했습니다.\n{{payload}}",
+    "plugin_red_packet_nft_tip": "이것은 NFT 레드 패킷입니다.",
+    "plugin_red_packet_attached_message": "첨부 메시지",
+    "plugin_red_packet_from": "보낸사람: {{name}}",
+    "plugin_red_packet_description_claimed": "이미 수령하였습니다.",
+    "plugin_red_packet_description_expired": "이 빨간 백 이미 만료되었습니다.",
+    "plugin_red_packet_description_refunded": "이 빨간 백 이미 반환되었습니다.",
+    "plugin_red_packet_description_refund": "{{balance}} {{symbol} 반환 가능합니다.",
+    "plugin_red_packet_description_empty": "빈 빨간 백입니다.",
+    "plugin_red_packet_description_broken": "파손된 빨간 백입니다.",
+    "plugin_red_packet_description_failover": "{{name}} / {{shares}}에서  / {{total}} {{symbol}} 공유합니다.",
+    "plugin_red_packet_amount_per_share": "공유 총액",
+    "plugin_red_packet_send_symbol": "{{symbol}} 보내기",
+    "plugin_red_packet_amount_total": "총액",
+    "plugin_red_packet_next": "다음",
+    "plugin_red_packet_back": "뒤로",
+    "plugin_red_packet_hint": "레드 패킷이 공유된 후 24시간 후에 나머지 잔액을 인출할 수 있습니다.",
+    "plugin_red_packet_token": "토큰",
+    "plugin_red_packet_message_label": "제목",
     "plugin_red_packet_create_with_token": "{{symbol}} 으로 빨간 백 만드는 중",
     "plugin_red_packet_nft_account_name": "지갑 계정",
     "plugin_gitcoin_select_a_token": "토큰 선택",
diff --git a/packages/mask/shared-ui/locales/qya-AA.json b/packages/mask/shared-ui/locales/qya-AA.json
index d1e180adb87d..5cccbfe12ae0 100644
--- a/packages/mask/shared-ui/locales/qya-AA.json
+++ b/packages/mask/shared-ui/locales/qya-AA.json
@@ -344,8 +344,57 @@
     "plugin_wallet_name_placeholder": "crwdns4705:0crwdne4705:0",
     "plugin_wallet_cancel_sign": "crwdns4709:0crwdne4709:0",
     "plugin_nft_avatar_recommend_feature_description": "crwdns16626:0crwdne16626:0",
-    "application_hint": "crwdns16628:0crwdne16628:0",
     "plugin_red_packet_create": "crwdns11873:0crwdne11873:0",
+    "plugin_red_packet_display_name": "crwdns4711:0crwdne4711:0",
+    "application_hint": "crwdns16628:0crwdne16628:0",
+    "plugin_red_packet_claimed": "crwdns10205:0crwdne10205:0",
+    "plugin_red_packet_erc20_tab_title": "crwdns8143:0crwdne8143:0",
+    "plugin_red_packet_erc721_tab_title": "crwdns8145:0crwdne8145:0",
+    "plugin_red_packet_name": "crwdns16234:0crwdne16234:0",
+    "plugin_red_packet_recommend_feature_description": "crwdns16544:0crwdne16544:0",
+    "plugin_red_packet_description": "crwdns16236:0crwdne16236:0",
+    "plugin_red_packet_erc721_insufficient_balance": "crwdns8147:0crwdne8147:0",
+    "plugin_red_packet_details": "crwdns9071:0crwdne9071:0",
+    "plugin_red_packet_split_mode": "crwdns4713:0crwdne4713:0",
+    "plugin_red_packet_average": "crwdns4715:0crwdne4715:0",
+    "plugin_red_packet_random": "crwdns4717:0crwdne4717:0",
+    "plugin_red_packet_shares": "crwdns4719:0crwdne4719:0",
+    "plugin_red_packet_best_wishes": "crwdns4721:0crwdne4721:0",
+    "plugin_red_packet_create_new": "crwdns4723:0crwdne4723:0",
+    "plugin_red_packet_claim": "crwdns4725:0crwdne4725:0",
+    "plugin_red_packet_claiming": "crwdns4727:0crwdne4727:0",
+    "plugin_red_packet_refund": "crwdns4729:0crwdne4729:0",
+    "plugin_red_packet_empty": "crwdns4731:0crwdne4731:0",
+    "plugin_red_packet_data_broken": "crwdns7999:0{{duration}}crwdne7999:0",
+    "plugin_red_packet_refunding": "crwdns4733:0crwdne4733:0",
+    "plugin_red_packet_select_existing": "crwdns4735:0crwdne4735:0",
+    "plugin_red_packet_share_unclaimed_message_official_account": "crwdns14614:0{{sender}}crwdnd14614:0{{network}}crwdnd14614:0{{account}}crwdnd14614:0{{payload}}crwdne14614:0",
+    "plugin_red_packet_share_unclaimed_message_not_twitter": "crwdns14616:0{{sender}}crwdnd14616:0{{network}}crwdnd14616:0{{payload}}crwdne14616:0",
+    "plugin_red_packet_share_message_official_account": "crwdns9175:0{{sender}}crwdnd9175:0{{network}}crwdnd9175:0{{account}}crwdnd9175:0{{payload}}crwdne9175:0",
+    "plugin_red_packet_share_message_not_twitter": "crwdns9177:0{{sender}}crwdnd9177:0{{network}}crwdnd9177:0{{payload}}crwdne9177:0",
+    "plugin_red_packet_nft_share_foreshow_message": "crwdns8151:0{{sender}}crwdnd8151:0{{network}}crwdnd8151:0{{account}}crwdnd8151:0{{payload}}crwdne8151:0",
+    "plugin_red_packet_nft_share_foreshow_message_not_twitter": "crwdns9011:0{{sender}}crwdnd9011:0{{network}}crwdnd9011:0{{payload}}crwdne9011:0",
+    "plugin_red_packet_nft_share_claimed_message": "crwdns8153:0{{sender}}crwdnd8153:0{{network}}crwdnd8153:0{{account}}crwdnd8153:0{{payload}}crwdne8153:0",
+    "plugin_red_packet_nft_share_claimed_message_not_twitter": "crwdns9013:0{{sender}}crwdnd9013:0{{network}}crwdnd9013:0{{payload}}crwdne9013:0",
+    "plugin_red_packet_nft_tip": "crwdns8155:0crwdne8155:0",
+    "plugin_red_packet_nft_no_history": "crwdns12991:0crwdne12991:0",
+    "plugin_red_packet_attached_message": "crwdns4739:0crwdne4739:0",
+    "plugin_red_packet_from": "crwdns4741:0{{name}}crwdne4741:0",
+    "plugin_red_packet_description_claimed": "crwdns4743:0{{amount}}crwdnd4743:0{{symbol}}crwdne4743:0",
+    "plugin_red_packet_description_expired": "crwdns4745:0crwdne4745:0",
+    "plugin_red_packet_description_refunded": "crwdns4747:0crwdne4747:0",
+    "plugin_red_packet_description_refund": "crwdns4749:0{{balance}}crwdnd4749:0{{symbol}}crwdne4749:0",
+    "plugin_red_packet_description_empty": "crwdns4751:0crwdne4751:0",
+    "plugin_red_packet_description_broken": "crwdns4753:0crwdne4753:0",
+    "plugin_red_packet_description_failover": "crwdns4755:0{{shares}}crwdnd4755:0{{total}}crwdnd4755:0{{symbol}}crwdne4755:0",
+    "plugin_red_packet_amount_per_share": "crwdns4761:0crwdne4761:0",
+    "plugin_red_packet_send_symbol": "crwdns4763:0{{amount}}crwdnd4763:0{{symbol}}crwdne4763:0",
+    "plugin_red_packet_amount_total": "crwdns4765:0crwdne4765:0",
+    "plugin_red_packet_next": "crwdns4767:0crwdne4767:0",
+    "plugin_red_packet_back": "crwdns4769:0crwdne4769:0",
+    "plugin_red_packet_hint": "crwdns4771:0crwdne4771:0",
+    "plugin_red_packet_token": "crwdns4773:0crwdne4773:0",
+    "plugin_red_packet_message_label": "crwdns8157:0crwdne8157:0",
     "plugin_red_packet_create_with_token": "crwdns4775:0{{amount}}crwdnd4775:0{{symbol}}crwdne4775:0",
     "plugin_nft_red_packet_create": "crwdns11875:0crwdne11875:0",
     "plugin_red_packet_nft_account_name": "crwdns8159:0crwdne8159:0",
diff --git a/packages/mask/shared-ui/locales/zh-CN.json b/packages/mask/shared-ui/locales/zh-CN.json
index a6ec9363bc23..00a4ece5ee23 100644
--- a/packages/mask/shared-ui/locales/zh-CN.json
+++ b/packages/mask/shared-ui/locales/zh-CN.json
@@ -296,6 +296,52 @@
     "plugin_wallet_name_placeholder": "输入1-12 个字符",
     "plugin_wallet_cancel_sign": "签名已取消。",
     "plugin_red_packet_create": "创建一个红包",
+    "plugin_red_packet_display_name": "插件：红包",
+    "plugin_red_packet_claimed": "已认领",
+    "plugin_red_packet_erc20_tab_title": "代币",
+    "plugin_red_packet_erc721_tab_title": "收藏品",
+    "plugin_red_packet_erc721_insufficient_balance": "余额不足",
+    "plugin_red_packet_details": "红包详情",
+    "plugin_red_packet_split_mode": "分享模式",
+    "plugin_red_packet_average": "平均",
+    "plugin_red_packet_random": "随机",
+    "plugin_red_packet_shares": "份额",
+    "plugin_red_packet_best_wishes": "祝好运！",
+    "plugin_red_packet_create_new": "新建",
+    "plugin_red_packet_claim": "认领",
+    "plugin_red_packet_claiming": "认领中...",
+    "plugin_red_packet_refund": "退款",
+    "plugin_red_packet_empty": "空的",
+    "plugin_red_packet_data_broken": "由于数据损坏，此红包无法发送。请在 {{duration}} 之后申请退款。",
+    "plugin_red_packet_refunding": "退款中",
+    "plugin_red_packet_select_existing": "历史红包",
+    "plugin_red_packet_share_unclaimed_message_official_account": "朋友们，我刚刚发现 @{{sender}} 在 {{network}} 网络发送了一个红包。 关注 @{{account}} (mask.io) 以获取红包。\n#mask_io #LuckyDrop\n{{payload}}",
+    "plugin_red_packet_share_unclaimed_message_not_twitter": "朋友们，我刚刚发现 @{{sender}} 在 {{network}} 网络发送了一个红包。\n{{payload}}",
+    "plugin_red_packet_share_message_official_account": "我刚从@{{sender}} 在 {{network}} 网络上认领了一个红包。关注@{{account}} (mask.io) 来获取红包。\n#mask_io #LuckyDrop\n{{payload}}",
+    "plugin_red_packet_share_message_not_twitter": "我刚从@{{sender}} 在 {{network}} 网络上认领了一个红包。\n{{payload}}",
+    "plugin_red_packet_nft_share_foreshow_message": "@{{sender}} 正在 {{network}} 网络上发送一个 NFT 红包。关注@{{account}} (mask.io) 以获取NFT 红包。\n#mask_io #LuckyDrop\n{{payload}}",
+    "plugin_red_packet_nft_share_foreshow_message_not_twitter": "@{{sender}} 正在 {{network}} 网络上发送一个 NFT 红包。 \n{{payload}}",
+    "plugin_red_packet_nft_share_claimed_message": "我刚从@{{sender}} 在 {{network}} 网络上认领了一个 NFT 红包。关注@{{account}} (mask.io) 来获取红包。\n#mask_io #LuckyDrop\n{{payload}}",
+    "plugin_red_packet_nft_share_claimed_message_not_twitter": "我刚从@{{sender}} 在 {{network}} 网络上认领了一个 NFT 红包。\n{{payload}}",
+    "plugin_red_packet_nft_tip": "这是一个 NFT 红包。",
+    "plugin_red_packet_nft_no_history": "您还没有创建任何NFT红包。尝试创建红包并与您的朋友分享。",
+    "plugin_red_packet_attached_message": "附加信息",
+    "plugin_red_packet_from": "来自：@{{name}}",
+    "plugin_red_packet_description_claimed": "你获得了 {{amount}} {{symbol}}",
+    "plugin_red_packet_description_expired": "此红包已过期。",
+    "plugin_red_packet_description_refunded": "此红包已退款。",
+    "plugin_red_packet_description_refund": "您可以退回 {{balance}} {{symbol}}。",
+    "plugin_red_packet_description_empty": "此红包是空的。",
+    "plugin_red_packet_description_broken": "此红包已被损坏。",
+    "plugin_red_packet_description_failover": "{{shares}} 份额 / {{total}} {{symbol}} 总金额",
+    "plugin_red_packet_amount_per_share": "单个份额",
+    "plugin_red_packet_send_symbol": "发送 {{amount}} {{symbol}}",
+    "plugin_red_packet_amount_total": "总额",
+    "plugin_red_packet_next": "下一步",
+    "plugin_red_packet_back": "返回",
+    "plugin_red_packet_hint": "你可以在红包发送的24小时后提取红包余额。",
+    "plugin_red_packet_token": "代币",
+    "plugin_red_packet_message_label": "标题",
     "plugin_red_packet_create_with_token": "使用 {{symbol}} 创建红包",
     "plugin_nft_red_packet_create": "创建一个NFT红包",
     "plugin_red_packet_nft_account_name": "钱包账户",
diff --git a/packages/mask/shared-ui/locales/zh-TW.json b/packages/mask/shared-ui/locales/zh-TW.json
index 1a335c4501db..c6583d80d3f6 100644
--- a/packages/mask/shared-ui/locales/zh-TW.json
+++ b/packages/mask/shared-ui/locales/zh-TW.json
@@ -197,6 +197,41 @@
     "plugin_wallet_switch_network_under_going": "切換至 {{network}} 中",
     "plugin_wallet_not_available_on": "{{network}} 不可用",
     "plugin_wallet_connect_wallet": "連接錢包",
+    "plugin_red_packet_display_name": "插件：紅包",
+    "plugin_red_packet_claimed": "已認領",
+    "plugin_red_packet_erc20_tab_title": "代幣",
+    "plugin_red_packet_erc721_tab_title": "收藏品",
+    "plugin_red_packet_erc721_insufficient_balance": "餘額不足",
+    "plugin_red_packet_details": "紅包詳情",
+    "plugin_red_packet_split_mode": "分割模式",
+    "plugin_red_packet_average": "平均",
+    "plugin_red_packet_random": "隨機",
+    "plugin_red_packet_shares": "分享數",
+    "plugin_red_packet_best_wishes": "祝好運！",
+    "plugin_red_packet_create_new": "建立新的",
+    "plugin_red_packet_claim": "認領",
+    "plugin_red_packet_claiming": "認領中...",
+    "plugin_red_packet_refund": "退款",
+    "plugin_red_packet_empty": "空的",
+    "plugin_red_packet_refunding": "退款中",
+    "plugin_red_packet_select_existing": "選擇已存在的",
+    "plugin_red_packet_nft_tip": "這是一個NFT紅包",
+    "plugin_red_packet_attached_message": "附加的訊息",
+    "plugin_red_packet_from": "寄送人：{{name}}",
+    "plugin_red_packet_description_claimed": "你已經認領了 {{amount}} {{symbol}}。",
+    "plugin_red_packet_description_expired": "這個紅包已過期。",
+    "plugin_red_packet_description_refunded": "這個紅包已經被退款了。",
+    "plugin_red_packet_description_refund": "你可以退款 {{balance}} {{symbol}}。",
+    "plugin_red_packet_description_empty": "這個紅包是空的。",
+    "plugin_red_packet_description_broken": "這個紅包壞了",
+    "plugin_red_packet_description_failover": "寄送人 {{name}} / {{shares}} 分享數 / {{total}} {{symbol}}",
+    "plugin_red_packet_amount_per_share": "每次分享總額",
+    "plugin_red_packet_send_symbol": "送出 {{symbol}}",
+    "plugin_red_packet_amount_total": "總額",
+    "plugin_red_packet_next": "繼續",
+    "plugin_red_packet_back": "返回",
+    "plugin_red_packet_token": "代幣",
+    "plugin_red_packet_message_label": "標題",
     "plugin_red_packet_create_with_token": "使用 {{symbol}} 建立紅包",
     "plugin_gitcoin_select_a_token": "選擇一個代幣",
     "plugin_gitcoin_insufficient_balance": "{{symbol}} 餘額不足",
diff --git a/packages/mask/shared/flags.ts b/packages/mask/shared/flags.ts
index a92a11370e38..e419af0b7097 100644
--- a/packages/mask/shared/flags.ts
+++ b/packages/mask/shared/flags.ts
@@ -24,11 +24,8 @@ export const Flags = {
     toolbox_enabled: webOnly,
     /** Prohibit the use of test networks in production */
     wallet_allow_testnet: betaOrInsiderOnly || process.env.NODE_ENV !== 'production',
-    LBP_whitelist_enabled: process.env.NODE_ENV === 'production',
     // #endregion
 
-    EIP1559_enabled: true,
-
     bsc_enabled: true,
     polygon_enabled: true,
     arbitrum_enabled: true,
diff --git a/packages/mask/src/UIRoot.tsx b/packages/mask/src/UIRoot.tsx
index 9d7c5eefe82b..f4efbceb2acc 100644
--- a/packages/mask/src/UIRoot.tsx
+++ b/packages/mask/src/UIRoot.tsx
@@ -1,16 +1,13 @@
 import { Suspense } from 'react'
-import { Web3Provider } from '@masknet/web3-shared-evm'
 import { StyledEngineProvider, Theme } from '@mui/material'
-import { NetworkPluginID, PluginsWeb3ContextProvider, useAllPluginsWeb3State } from '@masknet/plugin-infra/web3'
+import { PluginsWeb3ContextProvider, useAllPluginsWeb3State } from '@masknet/plugin-infra/web3'
 import { I18NextProviderHMR, SharedContextProvider } from '@masknet/shared'
 import { ErrorBoundary, ErrorBoundaryBuildInfoContext, useValueRef } from '@masknet/shared-base-ui'
 import { i18NextInstance } from '@masknet/shared-base'
-import { Web3Context } from './web3/context'
 import { buildInfoMarkdown } from './utils/BuildInfoMarkdown'
 import { activatedSocialNetworkUI } from './social-network'
 import { isFacebook } from './social-network-adaptor/facebook.com/base'
 import { pluginIDSettings } from './settings/settings'
-import { fixWeb3State } from './plugins/EVM/UI/Web3State'
 import { getBackgroundColor } from './utils'
 import { isTwitter } from './social-network-adaptor/twitter.com/base'
 import { MaskThemeProvider } from '@masknet/theme'
@@ -37,19 +34,12 @@ export function MaskUIRoot({ children, kind, useTheme }: MaskUIRootProps) {
     const pluginID = useValueRef(pluginIDSettings)
     const PluginsWeb3State = useAllPluginsWeb3State()
 
-    // TODO: migrate EVM plugin
-    fixWeb3State(PluginsWeb3State[NetworkPluginID.PLUGIN_EVM], Web3Context)
-
     return compose(
         children,
         (jsx) => <Suspense fallback={null} children={jsx} />,
         (jsx) => <ErrorBoundaryBuildInfoContext.Provider value={buildInfoMarkdown} children={jsx} />,
         (jsx) => <ErrorBoundary children={jsx} />,
-        (jsx) => (
-            <Web3Provider value={Web3Context}>
-                <PluginsWeb3ContextProvider pluginID={pluginID} value={PluginsWeb3State} children={jsx} />
-            </Web3Provider>
-        ),
+        (jsx) => <PluginsWeb3ContextProvider pluginID={pluginID} value={PluginsWeb3State} children={jsx} />,
         (jsx) => <I18NextProviderHMR i18n={i18NextInstance} children={jsx} />,
         kind === 'page' ? (jsx) => <StyledEngineProvider injectFirst children={jsx} /> : identity,
         (jsx) => (
diff --git a/packages/mask/src/components/CompositionDialog/PluginEntryRender.tsx b/packages/mask/src/components/CompositionDialog/PluginEntryRender.tsx
index 018425f6fa70..b1e41f6c209d 100644
--- a/packages/mask/src/components/CompositionDialog/PluginEntryRender.tsx
+++ b/packages/mask/src/components/CompositionDialog/PluginEntryRender.tsx
@@ -5,7 +5,7 @@ import {
     PluginI18NFieldRender,
     usePluginI18NField,
 } from '@masknet/plugin-infra/content-script'
-import { useCurrentWeb3NetworkPluginID } from '@masknet/plugin-infra/web3'
+import { useChainId, useCurrentWeb3NetworkPluginID } from '@masknet/plugin-infra/web3'
 import { ErrorBoundary } from '@masknet/shared-base-ui'
 import { Result } from 'ts-results'
 import { RedPacketPluginID } from '../../plugins/RedPacket/constants'
@@ -13,7 +13,6 @@ import { ITO_PluginID } from '../../plugins/ITO/constants'
 import { ClickableChip } from '../shared/SelectRecipients/ClickableChip'
 import { makeStyles } from '@masknet/theme'
 import { useCallback, useState, useRef, forwardRef, memo, useImperativeHandle, useMemo } from 'react'
-import { useChainId } from '@masknet/web3-shared-evm'
 import { Trans } from 'react-i18next'
 const useStyles = makeStyles()((theme) => ({
     sup: {
diff --git a/packages/mask/src/components/InjectedComponents/ProfileTabContent.tsx b/packages/mask/src/components/InjectedComponents/ProfileTabContent.tsx
index aaf461822524..077d37edc208 100644
--- a/packages/mask/src/components/InjectedComponents/ProfileTabContent.tsx
+++ b/packages/mask/src/components/InjectedComponents/ProfileTabContent.tsx
@@ -4,11 +4,11 @@ import {
     useActivatedPluginsSNSAdaptor,
     usePluginI18NField,
 } from '@masknet/plugin-infra/content-script'
-import { useAvailablePlugins } from '@masknet/plugin-infra/web3'
+import { useAddressNames, useAvailablePlugins } from '@masknet/plugin-infra/web3'
 import { ConcealableTabs } from '@masknet/shared'
 import { EMPTY_LIST, NextIDPlatform } from '@masknet/shared-base'
 import { makeStyles, useStylesExtends } from '@masknet/theme'
-import { useAddressNames } from '@masknet/web3-shared-evm'
+import { NetworkPluginID } from '@masknet/web3-shared-base'
 import { Box, CircularProgress, Typography } from '@mui/material'
 import { first } from 'lodash-unified'
 import { useEffect, useMemo, useState } from 'react'
@@ -50,7 +50,10 @@ export function ProfileTabContent(props: ProfileTabContentProps) {
     const identity = useCurrentVisitingIdentity()
     const { currentConnectedPersona } = usePersonaConnectStatus()
     const platform = activatedSocialNetworkUI.configuration.nextIDConfig?.platform as NextIDPlatform
-    const { value: addressNames = EMPTY_LIST, loading: loadingAddressNames } = useAddressNames(identity)
+    const { value: addressNames = EMPTY_LIST, loading: loadingAddressNames } = useAddressNames(
+        NetworkPluginID.PLUGIN_EVM,
+        identity,
+    )
     const { value: personaList = EMPTY_LIST, loading: loadingPersonaList } = useNextIDBoundByPlatform(
         platform as NextIDPlatform,
         identity.identifier?.userId,
diff --git a/packages/mask/src/components/InjectedComponents/SearchResultBox.tsx b/packages/mask/src/components/InjectedComponents/SearchResultBox.tsx
index c917be2bf891..5d09af03a749 100644
--- a/packages/mask/src/components/InjectedComponents/SearchResultBox.tsx
+++ b/packages/mask/src/components/InjectedComponents/SearchResultBox.tsx
@@ -1,7 +1,7 @@
 import { createInjectHooksRenderer, useActivatedPluginsSNSAdaptor } from '@masknet/plugin-infra/content-script'
 
 const PluginRenderer = createInjectHooksRenderer(
-    useActivatedPluginsSNSAdaptor.visibility.useNotMinimalMode,
+    useActivatedPluginsSNSAdaptor.visibility.useAnyMode,
     (x) => x.SearchResultBox,
 )
 
diff --git a/packages/mask/src/components/InjectedComponents/ToolboxUnstyled.tsx b/packages/mask/src/components/InjectedComponents/ToolboxUnstyled.tsx
index 6a2593c93cca..09d5be7955ad 100644
--- a/packages/mask/src/components/InjectedComponents/ToolboxUnstyled.tsx
+++ b/packages/mask/src/components/InjectedComponents/ToolboxUnstyled.tsx
@@ -10,17 +10,17 @@ import {
     ListItemText as MuiListItemText,
     Box,
 } from '@mui/material'
-import { TransactionStatusType } from '@masknet/web3-shared-evm'
+import { TransactionStatusType } from '@masknet/web3-shared-base'
 import {
     useNetworkDescriptor,
     useProviderDescriptor,
     useAccount,
-    useWallet,
     useChainColor,
     useChainIdValid,
-    useChainDetailed,
     useWeb3State,
     useReverseAddress,
+    useChainIdMainnet,
+    useRecentTransactions,
 } from '@masknet/plugin-infra/web3'
 import { useCallback, useEffect } from 'react'
 import { WalletIcon } from '@masknet/shared'
@@ -28,7 +28,6 @@ import { useRemoteControlledDialog } from '@masknet/shared-base-ui'
 import { WalletMessages } from '../../plugins/Wallet/messages'
 import { useI18N } from '../../utils'
 import { hasNativeAPI, nativeAPI } from '../../../shared/native-rpc'
-import { useRecentTransactions } from '../../plugins/Wallet/hooks/useRecentTransactions'
 import GuideStep from '../GuideStep'
 import { AccountBalanceWalletIcon } from '@masknet/icons'
 import { makeStyles } from '@masknet/theme'
@@ -205,16 +204,13 @@ function ToolboxHintForWallet(props: ToolboxHintProps) {
 function useToolbox() {
     const { t } = useI18N()
     const account = useAccount()
-    const selectedWallet = useWallet()
     const chainColor = useChainColor()
     const chainIdValid = useChainIdValid()
-    const chainDetailed = useChainDetailed()
-    const { Utils } = useWeb3State()
+    const chainIdMainnet = useChainIdMainnet()
+    const { Others } = useWeb3State()
 
     // #region recent pending transactions
-    const { value: pendingTransactions = [] } = useRecentTransactions({
-        status: TransactionStatusType.NOT_DEPEND,
-    })
+    const pendingTransactions = useRecentTransactions(undefined, TransactionStatusType.NOT_DEPEND)
     // #endregion
 
     // #region Wallet
@@ -226,15 +222,15 @@ function useToolbox() {
     )
     // #endregion
 
-    const isWalletValid = !!account && selectedWallet && chainIdValid
+    const isWalletValid = !!account && chainIdValid
 
-    const { value: domain } = useReverseAddress(account)
+    const { value: domain } = useReverseAddress(undefined, account)
 
     function renderButtonText() {
         if (!account) return t('plugin_wallet_connect_wallet')
         if (!chainIdValid) return t('plugin_wallet_wrong_network')
         if (pendingTransactions.length <= 0)
-            return Utils?.formatDomainName?.(domain) || Utils?.formatAddress?.(account, 4) || account
+            return Others?.formatDomainName?.(domain) || Others?.formatAddress?.(account, 4) || account
         return (
             <>
                 <span style={{ marginRight: 12 }}>
@@ -255,8 +251,7 @@ function useToolbox() {
 
     const walletTitle = renderButtonText()
 
-    const shouldDisplayChainIndicator =
-        account && chainIdValid && chainDetailed?.network && chainDetailed.network !== 'mainnet'
+    const shouldDisplayChainIndicator = account && chainIdValid && !chainIdMainnet
     return {
         openWallet,
         isWalletValid,
diff --git a/packages/mask/src/components/shared/ApplicationBoard.tsx b/packages/mask/src/components/shared/ApplicationBoard.tsx
index bba3a2fd9cfc..777f5128dfd1 100644
--- a/packages/mask/src/components/shared/ApplicationBoard.tsx
+++ b/packages/mask/src/components/shared/ApplicationBoard.tsx
@@ -1,9 +1,9 @@
 import { useContext, createContext, PropsWithChildren, useMemo, useCallback, useEffect } from 'react'
 import { makeStyles, getMaskColor } from '@masknet/theme'
 import { Typography } from '@mui/material'
-import { useChainId } from '@masknet/web3-shared-evm'
 import { useActivatedPluginsSNSAdaptor } from '@masknet/plugin-infra/content-script'
-import { useCurrentWeb3NetworkPluginID, useAccount, NetworkPluginID } from '@masknet/plugin-infra/web3'
+import { useCurrentWeb3NetworkPluginID, useAccount, useChainId } from '@masknet/plugin-infra/web3'
+import { NetworkPluginID } from '@masknet/web3-shared-base'
 import { formatPersonaPublicKey } from '@masknet/shared-base'
 import { getCurrentSNSNetwork } from '../../social-network-adaptor/utils'
 import { activatedSocialNetworkUI } from '../../social-network'
diff --git a/packages/mask/src/components/shared/NetworkTab.tsx b/packages/mask/src/components/shared/NetworkTab.tsx
index 6087c1306c27..9118b57fb286 100644
--- a/packages/mask/src/components/shared/NetworkTab.tsx
+++ b/packages/mask/src/components/shared/NetworkTab.tsx
@@ -1,6 +1,6 @@
 import { makeStyles, MaskColorVar, useStylesExtends } from '@masknet/theme'
 import AbstractTab, { AbstractTabProps } from './AbstractTab'
-import { ChainId, getChainDetailed } from '@masknet/web3-shared-evm'
+import { ChainId, chainResolver } from '@masknet/web3-shared-evm'
 import { isDashboardPage } from '@masknet/shared-base'
 
 interface StyleProps {
@@ -59,7 +59,7 @@ export function NetworkTab(props: NetworkTabProps) {
     })
 
     const tabProps: AbstractTabProps = {
-        tabs: chains.map((chainId) => createTabItem(getChainDetailed(chainId)?.chain ?? 'Unknown', chainId)),
+        tabs: chains.map((chainId) => createTabItem(chainResolver.chainName(chainId) ?? 'Unknown', chainId)),
         index: chains.indexOf(chainId),
         classes,
         hasOnlyOneChild: true,
diff --git a/packages/mask/src/components/shared/SelectWallet/WalletInList.tsx b/packages/mask/src/components/shared/SelectWallet/WalletInList.tsx
index d109e73c35b3..589bab99144e 100644
--- a/packages/mask/src/components/shared/SelectWallet/WalletInList.tsx
+++ b/packages/mask/src/components/shared/SelectWallet/WalletInList.tsx
@@ -3,7 +3,8 @@ import ListItemButton from '@mui/material/ListItemButton'
 import { makeStyles, useStylesExtends } from '@masknet/theme'
 import CheckIcon from '@mui/icons-material/Check'
 import type { DefaultComponentProps } from '@mui/material/OverridableComponent'
-import { formatEthereumAddress, useBlockie, Wallet } from '@masknet/web3-shared-evm'
+import { formatEthereumAddress, Wallet } from '@masknet/web3-shared-evm'
+import { useBlockie } from '@masknet/plugin-infra/web3'
 import { useI18N } from '../../../utils'
 
 const useStyle = makeStyles()((theme) => ({
diff --git a/packages/mask/src/components/shared/TokenPrice.tsx b/packages/mask/src/components/shared/TokenPrice.tsx
index fb6818ece882..0c2d255667e4 100644
--- a/packages/mask/src/components/shared/TokenPrice.tsx
+++ b/packages/mask/src/components/shared/TokenPrice.tsx
@@ -1,8 +1,8 @@
 import type { FC, HTMLProps } from 'react'
 import type BigNumber from 'bignumber.js'
-import { ChainId, CurrencyType, isZeroAddress } from '@masknet/web3-shared-evm'
-import { useNativeTokenPrice, useTokenPrice } from '../../plugins/Wallet/hooks/useTokenPrice'
-import { multipliedBy } from '@masknet/web3-shared-base'
+import { ChainId, isZeroAddress } from '@masknet/web3-shared-evm'
+import { CurrencyType, multipliedBy, NetworkPluginID } from '@masknet/web3-shared-base'
+import { useFungibleTokenPrice, useNativeTokenPrice } from '@masknet/plugin-infra/web3'
 
 interface TokenPriceProps extends Omit<HTMLProps<HTMLSpanElement>, 'children'> {
     chainId: ChainId
@@ -18,8 +18,15 @@ export const TokenPrice: FC<TokenPriceProps> = ({
     currencyType = CurrencyType.USD,
     ...rest
 }) => {
-    const tokenPrice = useTokenPrice(chainId, contractAddress?.toLowerCase(), currencyType)
-    const nativeTokenPrice = useNativeTokenPrice(chainId)
+    const { value: tokenPrice = 0 } = useFungibleTokenPrice(
+        NetworkPluginID.PLUGIN_EVM,
+        contractAddress?.toLowerCase(),
+        {
+            chainId,
+            currencyType,
+        },
+    )
+    const { value: nativeTokenPrice = 0 } = useNativeTokenPrice(NetworkPluginID.PLUGIN_EVM, { chainId })
     const price = isZeroAddress(contractAddress) ? nativeTokenPrice : tokenPrice
     return <span {...rest}>${multipliedBy(amount, price).toFixed(2)}</span>
 }
diff --git a/packages/mask/src/components/shared/VerifyWallet/CurrentWalletBox.tsx b/packages/mask/src/components/shared/VerifyWallet/CurrentWalletBox.tsx
index 2226ba0b7573..1585e82c42e3 100644
--- a/packages/mask/src/components/shared/VerifyWallet/CurrentWalletBox.tsx
+++ b/packages/mask/src/components/shared/VerifyWallet/CurrentWalletBox.tsx
@@ -1,9 +1,17 @@
-import { ExternalLink } from 'react-feather'
-import { ChainId, ProviderType, NetworkType, useAccount, useProviderType } from '@masknet/web3-shared-evm'
-import { Button, Link, Typography } from '@mui/material'
-import { makeStyles } from '@masknet/theme'
-import { useWeb3State, useNetworkDescriptor, useProviderDescriptor, Web3Plugin } from '@masknet/plugin-infra/web3'
+import {
+    useAccount,
+    useNetworkDescriptor,
+    useProviderDescriptor,
+    useProviderType,
+    useReverseAddress,
+    useWeb3State,
+} from '@masknet/plugin-infra/web3'
 import { FormattedAddress, WalletIcon } from '@masknet/shared'
+import { makeStyles } from '@masknet/theme'
+import { Account, NetworkPluginID } from '@masknet/web3-shared-base'
+import { ChainId, ProviderType } from '@masknet/web3-shared-evm'
+import { Button, Link, Typography } from '@mui/material'
+import { ExternalLink } from 'react-feather'
 import { useI18N } from '../../../utils'
 
 const useStyles = makeStyles()((theme) => ({
@@ -86,7 +94,9 @@ const useStyles = makeStyles()((theme) => ({
     },
 }))
 interface CurrentWalletBox {
-    wallet: Web3Plugin.ConnectionResult<ChainId, NetworkType, ProviderType>
+    wallet: Account<ChainId> & {
+        providerType: ProviderType
+    }
     walletName?: string
     changeWallet: () => void
     notInPop?: boolean
@@ -95,13 +105,13 @@ export function CurrentWalletBox(props: CurrentWalletBox) {
     const { t } = useI18N()
     const { classes } = useStyles()
     const { wallet, walletName, notInPop, changeWallet } = props
-    const providerType = useProviderType()
-    const providerDescriptor = useProviderDescriptor(wallet.providerType ?? providerType)
-    const networkDescriptor = useNetworkDescriptor(wallet.networkType)
-    const frontAccount = useAccount()
+    const providerType = useProviderType(NetworkPluginID.PLUGIN_EVM)
+    const providerDescriptor = useProviderDescriptor(NetworkPluginID.PLUGIN_EVM, providerType)
+    const networkDescriptor = useNetworkDescriptor(NetworkPluginID.PLUGIN_EVM)
+    const frontAccount = useAccount(NetworkPluginID.PLUGIN_EVM)
     const account = notInPop ? frontAccount : wallet.account
-    const { Utils } = useWeb3State() ?? {}
-
+    const { Others } = useWeb3State(NetworkPluginID.PLUGIN_EVM) ?? {}
+    const { value: domain } = useReverseAddress(NetworkPluginID.PLUGIN_EVM, wallet.account)
     return account ? (
         <section className={classes.currentAccount}>
             <WalletIcon
@@ -112,16 +122,31 @@ export function CurrentWalletBox(props: CurrentWalletBox) {
             />
             <div className={classes.accountInfo}>
                 <div className={classes.infoRow}>
-                    <Typography className={classes.accountName}>{walletName}</Typography>
+                    {providerType !== ProviderType.MaskWallet ? (
+                        <Typography className={classes.accountName}>
+                            {domain && Others?.formatDomainName
+                                ? Others.formatDomainName(domain)
+                                : providerDescriptor?.name}
+                        </Typography>
+                    ) : (
+                        <>
+                            <Typography className={classes.accountName}>
+                                {walletName ?? providerDescriptor?.name}
+                            </Typography>
+                            {domain && Others?.formatDomainName ? (
+                                <Typography className={classes.domain}>{Others.formatDomainName(domain)}</Typography>
+                            ) : null}
+                        </>
+                    )}
                 </div>
                 <div className={classes.infoRow}>
                     <Typography className={classes.address} variant="body2" title={account}>
-                        <FormattedAddress address={account} size={4} formatter={Utils?.formatAddress} />
+                        <FormattedAddress address={account} size={4} formatter={Others?.formatAddress} />
                     </Typography>
 
                     <Link
                         className={classes.link}
-                        href={Utils?.resolveAddressLink?.(wallet.chainId, wallet.account) ?? ''}
+                        href={Others?.explorerResolver.addressLink?.(wallet.chainId, account) ?? ''}
                         target="_blank"
                         title={t('plugin_wallet_view_on_explorer')}
                         rel="noopener noreferrer">
diff --git a/packages/mask/src/components/shared/VerifyWallet/Steps.tsx b/packages/mask/src/components/shared/VerifyWallet/Steps.tsx
index b407d054dea6..110be98a396f 100644
--- a/packages/mask/src/components/shared/VerifyWallet/Steps.tsx
+++ b/packages/mask/src/components/shared/VerifyWallet/Steps.tsx
@@ -13,8 +13,8 @@ import { ImageIcon } from '@masknet/shared'
 import { Typography } from '@mui/material'
 import { useEffect } from 'react'
 import { useI18N } from '../../../utils'
-import type { Web3Plugin } from '@masknet/plugin-infra/src/web3-types'
-import type { ChainId, NetworkType, ProviderType } from '@masknet/web3-shared-evm'
+import type { Account } from '@masknet/web3-shared-base'
+import type { ChainId, ProviderType } from '@masknet/web3-shared-evm'
 import { LoadingButton } from '@mui/lab'
 import ActionButton from '../../../extension/options-page/DashboardComponents/ActionButton'
 
@@ -99,7 +99,9 @@ export enum SignSteps {
 interface StepsProps {
     step: SignSteps
     nickname?: string
-    wallet: Web3Plugin.ConnectionResult<ChainId, NetworkType, ProviderType>
+    wallet: Account<ChainId> & {
+        providerType: ProviderType
+    }
     disableConfirm?: boolean
     confirmLoading: boolean
     notInPop?: boolean
diff --git a/packages/mask/src/components/shared/WalletStatusBox/TransactionList.tsx b/packages/mask/src/components/shared/WalletStatusBox/TransactionList.tsx
index 3e729c601caa..f7d0141c4d05 100644
--- a/packages/mask/src/components/shared/WalletStatusBox/TransactionList.tsx
+++ b/packages/mask/src/components/shared/WalletStatusBox/TransactionList.tsx
@@ -1,24 +1,14 @@
+import { FC, forwardRef, useCallback, useMemo, useState } from 'react'
+import { useAsync } from 'react-use'
 import { LinkOutIcon } from '@masknet/icons'
-import { useWeb3State } from '@masknet/plugin-infra/web3'
-import { WalletMessages } from '@masknet/plugin-wallet'
+import { useChainId, useWeb3, useWeb3State, Web3Helper } from '@masknet/plugin-infra/web3'
 import { makeStyles } from '@masknet/theme'
-import {
-    ChainId,
-    getContractOwnerDomain,
-    isSameAddress,
-    TransactionStateType,
-    TransactionStatusType,
-    useChainId,
-    useWeb3,
-} from '@masknet/web3-shared-evm'
+import { isSameAddress, RecentTransaction, TransactionStatusType } from '@masknet/web3-shared-base'
+import { getContractOwnerDomain } from '@masknet/web3-shared-evm'
 import { Grid, GridProps, Link, List, ListItem, ListProps, Stack, Typography } from '@mui/material'
 import classnames from 'classnames'
 import format from 'date-fns/format'
 import { noop } from 'lodash-unified'
-import { FC, forwardRef, useCallback, useEffect, useMemo, useState } from 'react'
-import { useAsync } from 'react-use'
-import Services from '../../../extension/service'
-import type { RecentTransaction } from '../../../plugins/Wallet/services/transaction'
 import { useI18N } from '../../../utils'
 
 const useStyles = makeStyles()((theme) => ({
@@ -78,44 +68,46 @@ const statusTextColorMap: Record<TransactionStatusType, string> = {
     [TransactionStatusType.NOT_DEPEND]: '#FFB915',
     [TransactionStatusType.SUCCEED]: '#60DFAB',
     [TransactionStatusType.FAILED]: '#FF5F5F',
-    [TransactionStatusType.CANCELLED]: '#FF5F5F',
 }
 const getContractFunctionName = async (data: string | undefined) => {
     if (!data) return null
     const sig = data.slice(0, 10)
-    const name = await Services.Ethereum.getContractFunctionName(sig)
-    return name ? name.replace(/_/g, ' ') : 'Contract Interaction'
+    // const name = await Services.Ethereum.getContractFunctionName(sig)
+    // return name ? name.replace(/_/g, ' ') : 'Contract Interaction'
+    return ''
 }
 
 interface TransactionProps extends GridProps {
-    chainId: ChainId
-    transaction: RecentTransaction
-    onClear?(tx: RecentTransaction): void
+    chainId: Web3Helper.ChainIdAll
+    transaction: RecentTransaction<Web3Helper.ChainIdAll, Web3Helper.TransactionAll>
+    onClear?(tx: RecentTransaction<Web3Helper.ChainIdAll, Web3Helper.TransactionAll>): void
 }
 const Transaction: FC<TransactionProps> = ({ chainId, transaction: tx, onClear = noop, ...rest }) => {
     const { t } = useI18N()
-    const { Utils } = useWeb3State()
     const { classes, theme } = useStyles()
 
     const statusTextMap: Record<TransactionStatusType, string> = {
         [TransactionStatusType.NOT_DEPEND]: t('recent_transaction_pending'),
         [TransactionStatusType.SUCCEED]: t('recent_transaction_success'),
         [TransactionStatusType.FAILED]: t('recent_transaction_failed'),
-        [TransactionStatusType.CANCELLED]: t('recent_transaction_cancelled'),
     }
 
     const web3 = useWeb3()
+    const { Others } = useWeb3State() as Web3Helper.Web3StateAll
+
     const { value: targetAddress } = useAsync(async () => {
-        if (tx.receipt?.contractAddress) return tx.receipt.contractAddress
-        if (tx.payload?.params?.[0].to) return tx.payload.params[0].to as string
-        const transaction = await web3.eth.getTransaction(tx.hash)
-        return transaction.to
+        return ''
+        // if (tx.receipt?.contractAddress) return tx.receipt.contractAddress
+        // if (tx.payload?.params?.[0].to) return tx.payload.params[0].to as string
+        // const transaction = await web3?.eth.getTransaction(tx.hash)
+        // return transaction.to
     }, [web3, tx])
     const address = (targetAddress || '').toLowerCase()
-    const txData = tx.payload?.params?.[0].data as string | undefined
+    // const txData = tx.payload?.params?.[0].data as string | undefined
     const { value: functionName } = useAsync(async () => {
-        return getContractFunctionName(txData)
-    }, [txData])
+        return ''
+        // return getContractFunctionName(txData)
+    }, [])
 
     const handleClear = useCallback(() => {
         onClear(tx)
@@ -125,19 +117,19 @@ const Transaction: FC<TransactionProps> = ({ chainId, transaction: tx, onClear =
 
     const [txStatus, setTxStatus] = useState(tx.status)
 
-    useEffect(() => {
-        return WalletMessages.events.transactionStateUpdated.on((data) => {
-            if ('receipt' in data && tx.hash === data.receipt?.transactionHash) {
-                switch (data.type) {
-                    case TransactionStateType.CONFIRMED:
-                        setTxStatus(TransactionStatusType.SUCCEED)
-                        break
-                    case TransactionStateType.FAILED:
-                        setTxStatus(TransactionStatusType.FAILED)
-                }
-            }
-        })
-    }, [tx.hash])
+    // useEffect(() => {
+    //     return WalletMessages.events.transactionStateUpdated.on((data) => {
+    //         if ('receipt' in data && tx.id === data.receipt?.transactionHash) {
+    //             switch (data.type) {
+    //                 case TransactionStateType.CONFIRMED:
+    //                     setTxStatus(TransactionStatusType.SUCCEED)
+    //                     break
+    //                 case TransactionStateType.FAILED:
+    //                     setTxStatus(TransactionStatusType.FAILED)
+    //             }
+    //         }
+    //     })
+    // }, [tx.id])
 
     return (
         <Grid container {...rest}>
@@ -151,19 +143,19 @@ const Transaction: FC<TransactionProps> = ({ chainId, transaction: tx, onClear =
                         {functionName}
                     </Typography>
                     <Typography className={classes.timestamp} variant="body1" color={theme.palette.text.secondary}>
-                        {format(tx.at, 'yyyy.MM.dd hh:mm')}
+                        {format(tx.createdAt, 'yyyy.MM.dd hh:mm')}
                     </Typography>
                 </Stack>
             </Grid>
             <Grid item className={classes.cell} flexGrow={1} md={4} justifyContent="right">
                 <Typography variant="body1">
                     {address && isSameAddress(domainOrAddress, address)
-                        ? Utils?.formatAddress?.(address, 4)
+                        ? Others?.formatAddress?.(address, 4)
                         : domainOrAddress || address}
                 </Typography>
                 <Link
                     className={classes.link}
-                    href={Utils?.resolveTransactionLink?.(chainId, tx.hash)}
+                    href={Others?.explorerResolver.transactionLink?.(chainId, tx.id)}
                     target="_blank"
                     rel="noopener noreferrer">
                     <LinkOutIcon className={classes.linkIcon} />
@@ -186,8 +178,8 @@ const Transaction: FC<TransactionProps> = ({ chainId, transaction: tx, onClear =
 }
 
 interface Props extends ListProps {
-    transactions: RecentTransaction[]
-    onClear?(tx: RecentTransaction): void
+    transactions: Array<RecentTransaction<Web3Helper.ChainIdAll, Web3Helper.TransactionAll>>
+    onClear?(tx: RecentTransaction<Web3Helper.ChainIdAll, Web3Helper.TransactionAll>): void
 }
 
 export const TransactionList: FC<Props> = forwardRef(({ className, transactions, onClear = noop, ...rest }, ref) => {
@@ -197,7 +189,7 @@ export const TransactionList: FC<Props> = forwardRef(({ className, transactions,
     return (
         <List className={classnames(classes.list, className)} {...rest} ref={ref}>
             {transactions.map((tx) => (
-                <ListItem key={tx.hash} className={classes.listItem}>
+                <ListItem key={tx.id} className={classes.listItem}>
                     <Transaction className={classes.transaction} transaction={tx} chainId={chainId} onClear={onClear} />
                 </ListItem>
             ))}
diff --git a/packages/mask/src/components/shared/WalletStatusBox/index.tsx b/packages/mask/src/components/shared/WalletStatusBox/index.tsx
index f0f8eb6f7a2d..85c3dcd1b279 100644
--- a/packages/mask/src/components/shared/WalletStatusBox/index.tsx
+++ b/packages/mask/src/components/shared/WalletStatusBox/index.tsx
@@ -7,6 +7,7 @@ import {
     useReverseAddress,
     useWallet,
     useWeb3State,
+    Web3Helper,
 } from '@masknet/plugin-infra/web3'
 import { FormattedAddress, useSnackbarCallback, WalletIcon } from '@masknet/shared'
 import { isDashboardPage } from '@masknet/shared-base'
@@ -105,9 +106,8 @@ export function WalletStatusBox(props: WalletStatusBox) {
     const providerType = useProviderType()
     const providerDescriptor = useProviderDescriptor()
     const networkDescriptor = useNetworkDescriptor()
-    const { Utils } = useWeb3State() ?? {}
-
-    const { value: domain } = useReverseAddress(account)
+    const { Others } = useWeb3State() as Web3Helper.Web3StateAll
+    const { value: domain } = useReverseAddress(undefined, account)
 
     // #region copy addr to clipboard
     const [, copyToClipboard] = useCopyToClipboard()
@@ -150,8 +150,8 @@ export function WalletStatusBox(props: WalletStatusBox) {
                     <div className={classes.infoRow} style={{ marginBottom: 6 }}>
                         {providerType !== ProviderType.MaskWallet ? (
                             <Typography className={classes.accountName}>
-                                {domain && Utils?.formatDomainName
-                                    ? Utils.formatDomainName(domain)
+                                {domain && Others?.formatDomainName
+                                    ? Others.formatDomainName(domain)
                                     : providerDescriptor?.name}
                             </Typography>
                         ) : (
@@ -159,15 +159,17 @@ export function WalletStatusBox(props: WalletStatusBox) {
                                 <Typography className={classes.accountName}>
                                     {wallet?.name ?? providerDescriptor?.name}
                                 </Typography>
-                                {domain && Utils?.formatDomainName ? (
-                                    <Typography className={classes.domain}>{Utils.formatDomainName(domain)}</Typography>
+                                {domain && Others?.formatDomainName ? (
+                                    <Typography className={classes.domain}>
+                                        {Others.formatDomainName(domain)}
+                                    </Typography>
                                 ) : null}
                             </>
                         )}
                     </div>
                     <div className={classes.infoRow}>
                         <Typography className={classes.address} variant="body2" title={account}>
-                            <FormattedAddress address={account} size={4} formatter={Utils?.formatAddress} />
+                            <FormattedAddress address={account} size={4} formatter={Others?.formatAddress} />
                         </Typography>
                         <Link
                             className={classes.link}
@@ -179,7 +181,7 @@ export function WalletStatusBox(props: WalletStatusBox) {
                         </Link>
                         <Link
                             className={classes.link}
-                            href={Utils?.resolveAddressLink?.(chainId, account) ?? ''}
+                            href={Others?.explorerResolver.addressLink?.(chainId, account) ?? ''}
                             target="_blank"
                             title={t('plugin_wallet_view_on_explorer')}
                             rel="noopener noreferrer">
diff --git a/packages/mask/src/components/shared/WalletStatusBox/usePendingTransactions.tsx b/packages/mask/src/components/shared/WalletStatusBox/usePendingTransactions.tsx
index fe2f39e54a01..ac1abe4f7b9c 100644
--- a/packages/mask/src/components/shared/WalletStatusBox/usePendingTransactions.tsx
+++ b/packages/mask/src/components/shared/WalletStatusBox/usePendingTransactions.tsx
@@ -1,14 +1,13 @@
-import { EMPTY_LIST } from '@masknet/shared-base'
+import {
+    useClearTransactionsCallback,
+    useRemoveTransactionCallback,
+    useRecentTransactions,
+} from '@masknet/plugin-infra/web3'
 import { makeStyles } from '@masknet/theme'
-import { TransactionStatusType } from '@masknet/web3-shared-evm'
+import { TransactionStatusType } from '@masknet/web3-shared-base'
 import { Typography } from '@mui/material'
 import classnames from 'classnames'
 import { useState } from 'react'
-import {
-    useClearRecentTransactions,
-    useRecentTransactions,
-    useRemoveRecentTransaction,
-} from '../../../plugins/Wallet/hooks'
 import { useI18N } from '../../../utils'
 import { TransactionList } from './TransactionList'
 
@@ -37,18 +36,16 @@ export function usePendingTransactions() {
     const { t } = useI18N()
 
     // #region recent pending transactions
-    const { value: pendingTransactions = EMPTY_LIST } = useRecentTransactions({
-        status: TransactionStatusType.NOT_DEPEND,
-    })
+    const pendingTransactions = useRecentTransactions(undefined, TransactionStatusType.NOT_DEPEND)
 
     // frozenTxes would not be reactive to pendingTransactions,
     // it would be recreated then the list shows up.
     const [meltedTxHashes, setMeltedTxHashes] = useState<string[]>([])
 
-    const clearRecentTxes = useClearRecentTransactions()
-    const removeRecentTx = useRemoveRecentTransaction()
+    const clearRecentTxes = useClearTransactionsCallback()
+    const removeRecentTx = useRemoveTransactionCallback()
 
-    const transactions = pendingTransactions.slice(0, 5).filter((tx) => !meltedTxHashes.includes(tx.hash))
+    const transactions = pendingTransactions.slice(0, 5).filter((tx) => !meltedTxHashes.includes(tx.id))
     // #endregion
     const summary = pendingTransactions.length ? (
         <section className={classes.summaryWrapper}>
@@ -74,8 +71,8 @@ export function usePendingTransactions() {
         <TransactionList
             transactions={transactions}
             onClear={(tx) => {
-                setMeltedTxHashes((list) => [...list, tx.hash])
-                removeRecentTx(tx.hash)
+                setMeltedTxHashes((list) => [...list, tx.id])
+                removeRecentTx(tx.id)
             }}
         />
     )
diff --git a/packages/mask/src/env.d.ts b/packages/mask/src/env.d.ts
index 9996c0915d7e..2359dc684c18 100644
--- a/packages/mask/src/env.d.ts
+++ b/packages/mask/src/env.d.ts
@@ -4,14 +4,3 @@
 /// <reference types="@masknet/global-types/webpack" />
 /// <reference types="@masknet/global-types/flag" />
 /// <reference types="@masknet/global-types/dom" />
-
-declare module 'ethjs-ens' {
-    import { provider as Provider } from 'web3-core'
-    import { ChainId } from '../../web3-shared/evm'
-
-    export default class Ens {
-        constructor(options: { provider: Provider; network: ChainId }) {}
-        lookup(name: string): Promise<string>
-        reverse(address: string): Promise<string>
-    }
-}
diff --git a/packages/mask/src/extension/background-script/BackupService.ts b/packages/mask/src/extension/background-script/BackupService.ts
index 6c97ebfeb4a1..611800f67790 100644
--- a/packages/mask/src/extension/background-script/BackupService.ts
+++ b/packages/mask/src/extension/background-script/BackupService.ts
@@ -3,7 +3,7 @@ export * from '../../../background/services/backup'
 import { assertEnvironment, Environment } from '@dimensiondev/holoflows-kit'
 assertEnvironment(Environment.ManifestBackground)
 
-import { currySameAddress, isSameAddress, ProviderType } from '@masknet/web3-shared-evm'
+import { currySameAddress, isSameAddress } from '@masknet/web3-shared-base'
 import {
     exportMnemonic,
     exportPrivateKey,
@@ -96,14 +96,16 @@ delegateWalletRestore(async function (backup) {
 async function backupAllWallets(): Promise<NormalizedBackup.WalletBackup[]> {
     const allSettled = await Promise.allSettled(
         (
-            await getWallets(ProviderType.MaskWallet)
-        ).map(async (wallet) => {
-            return {
-                ...wallet,
-                mnemonic: wallet.derivationPath ? await exportMnemonic(wallet.address) : undefined,
-                privateKey: wallet.derivationPath ? undefined : await exportPrivateKey(wallet.address),
-            }
-        }),
+            await getWallets()
+        )
+            .filter((x) => x.storedKeyInfo)
+            .map(async (wallet) => {
+                return {
+                    ...wallet,
+                    mnemonic: wallet.derivationPath ? await exportMnemonic(wallet.address) : undefined,
+                    privateKey: wallet.derivationPath ? undefined : await exportPrivateKey(wallet.address),
+                }
+            }),
     )
     const wallets_ = allSettled.map((x) => (x.status === 'fulfilled' ? WalletRecordToJSONFormat(x.value) : null))
     if (wallets_.some((x) => !x)) throw new Error('Failed to backup wallets.')
@@ -111,7 +113,7 @@ async function backupAllWallets(): Promise<NormalizedBackup.WalletBackup[]> {
 }
 
 async function backupAllLegacyWallets(): Promise<NormalizedBackup.WalletBackup[]> {
-    const x = await getLegacyWallets(ProviderType.MaskWallet)
+    const x = await getLegacyWallets()
     return x.map(LegacyWalletRecordToJSONFormat)
 }
 
diff --git a/packages/mask/src/extension/background-script/EthereumService.ts b/packages/mask/src/extension/background-script/EthereumService.ts
deleted file mode 100644
index 583984838923..000000000000
--- a/packages/mask/src/extension/background-script/EthereumService.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export * from './EthereumServices/request'
-export * from './EthereumServices/provider'
-export * from './EthereumServices/nonce'
-export * from './EthereumServices/network'
-export * from './EthereumServices/rpc'
diff --git a/packages/mask/src/extension/background-script/EthereumServices/network.ts b/packages/mask/src/extension/background-script/EthereumServices/network.ts
deleted file mode 100644
index 363c92387c6a..000000000000
--- a/packages/mask/src/extension/background-script/EthereumServices/network.ts
+++ /dev/null
@@ -1,243 +0,0 @@
-import type {
-    SignedTransaction,
-    Transaction,
-    TransactionConfig,
-    TransactionReceipt,
-    PastLogsOptions,
-    Log,
-} from 'web3-core'
-import { toHex } from 'web3-utils'
-import {
-    ChainId,
-    EthereumChainDetailed,
-    EthereumMethodType,
-    RequestOptions,
-    SendOverrides,
-} from '@masknet/web3-shared-evm'
-import { request } from './request'
-
-export async function getChainId(overrides?: SendOverrides) {
-    return request<string>(
-        {
-            method: EthereumMethodType.ETH_CHAIN_ID,
-        },
-        overrides,
-    )
-}
-
-export async function getAccounts(overrides?: SendOverrides) {
-    return request<string[]>(
-        {
-            method: EthereumMethodType.ETH_ACCOUNTS,
-        },
-        overrides,
-    )
-}
-
-export async function getCode(address: string, overrides?: SendOverrides) {
-    return request<string>(
-        {
-            method: EthereumMethodType.ETH_GET_CODE,
-            params: [address, 'latest'],
-        },
-        overrides,
-    )
-}
-
-export async function getGasPrice(overrides?: SendOverrides) {
-    return request<string>(
-        {
-            method: EthereumMethodType.ETH_GAS_PRICE,
-        },
-        overrides,
-    )
-}
-
-export async function getBlockNumber(overrides?: SendOverrides) {
-    const blockNumber = await request<string>(
-        {
-            method: EthereumMethodType.ETH_BLOCK_NUMBER,
-        },
-        overrides,
-    )
-    return Number.parseInt(blockNumber, 16) || 0
-}
-
-export async function getBalance(address: string, overrides?: SendOverrides) {
-    return request<string>(
-        {
-            method: EthereumMethodType.ETH_GET_BALANCE,
-            params: [address, 'latest'],
-        },
-        overrides,
-    )
-}
-
-export async function getTransactionByHash(hash: string, overrides?: SendOverrides) {
-    return request<Transaction>(
-        {
-            method: EthereumMethodType.ETH_GET_TRANSACTION_BY_HASH,
-            params: [hash],
-        },
-        overrides,
-    )
-}
-
-export async function getTransactionReceipt(hash: string, overrides?: SendOverrides) {
-    return request<TransactionReceipt | null>(
-        {
-            method: EthereumMethodType.MASK_GET_TRANSACTION_RECEIPT,
-            params: [hash],
-        },
-        overrides,
-    )
-}
-
-export async function getTransactionCount(address: string, overrides?: SendOverrides) {
-    const count = await request<string>(
-        {
-            method: EthereumMethodType.ETH_GET_TRANSACTION_COUNT,
-            params: [address, 'latest'],
-        },
-        overrides,
-    )
-    return Number.parseInt(count, 16) || 0
-}
-
-export async function getPendingTransactions(address: string, overrides?: SendOverrides) {
-    const filterId = await request<string>(
-        {
-            method: EthereumMethodType.ETH_NEW_PENDING_TRANSACTION_FILTER,
-            params: [],
-        },
-        overrides,
-    )
-    const transactions = await request<string[]>(
-        {
-            method: EthereumMethodType.ETH_GET_FILTER_CHANGES,
-            params: [filterId],
-        },
-        overrides,
-    )
-    return transactions
-}
-
-export async function call(config: TransactionConfig, overrides?: SendOverrides) {
-    return request<string>(
-        {
-            method: EthereumMethodType.ETH_CALL,
-            params: [config, 'latest'],
-        },
-        overrides,
-    )
-}
-
-export async function estimateGas(config: TransactionConfig, overrides?: SendOverrides) {
-    const gas = await request<string>(
-        {
-            method: EthereumMethodType.ETH_ESTIMATE_GAS,
-            params: [config],
-        },
-        overrides,
-    )
-    return Number.parseInt(gas, 16) || 0
-}
-
-export async function sign(dataToSign: string, address: string, overrides?: SendOverrides) {
-    return request<string>(
-        {
-            method: EthereumMethodType.ETH_SIGN,
-            params: [dataToSign, address],
-        },
-        overrides,
-    )
-}
-
-export async function personalSign(
-    dataToSign: string,
-    address: string,
-    password?: string,
-    overrides?: SendOverrides,
-    requestOptions?: RequestOptions,
-) {
-    return request<string>(
-        {
-            method: EthereumMethodType.PERSONAL_SIGN,
-            params: [dataToSign, address, password].filter((x) => typeof x !== 'undefined'),
-        },
-        overrides,
-        requestOptions,
-    )
-}
-
-export async function typedDataSign(address: string, dataToSign: string, overrides?: SendOverrides) {
-    return request<string>(
-        {
-            method: EthereumMethodType.ETH_SIGN_TYPED_DATA,
-            params: [address, dataToSign],
-        },
-        overrides,
-    )
-}
-
-export async function addEthereumChain(
-    chainDetailed: EthereumChainDetailed,
-    address?: string,
-    overrides?: SendOverrides,
-) {
-    return request<boolean>(
-        {
-            method: EthereumMethodType.WALLET_ADD_ETHEREUM_CHAIN,
-            params: [chainDetailed, address].filter(Boolean),
-        },
-        overrides,
-    )
-}
-
-export async function switchEthereumChain(chainId: ChainId, overrides?: SendOverrides) {
-    return request<boolean>(
-        {
-            method: EthereumMethodType.WALLET_SWITCH_ETHEREUM_CHAIN,
-            params: [
-                {
-                    chainId: toHex(chainId),
-                },
-            ],
-        },
-        overrides,
-    )
-}
-
-export async function signTransaction(config: TransactionConfig, overrides?: SendOverrides) {
-    return request<SignedTransaction>(
-        {
-            method: EthereumMethodType.ETH_SIGN_TRANSACTION,
-            params: [config],
-        },
-        overrides,
-    )
-}
-
-export async function sendTransaction(config: TransactionConfig, overrides?: SendOverrides) {
-    return request<string>(
-        {
-            method: EthereumMethodType.ETH_SEND_TRANSACTION,
-            params: [config],
-        },
-        overrides,
-    )
-}
-
-export async function getPastLogs(config: PastLogsOptions, overrides?: SendOverrides) {
-    return new Promise<Log[]>((resolve, reject) =>
-        request<Log[]>(
-            {
-                method: EthereumMethodType.ETH_GET_LOGS,
-                params: [config],
-            },
-            overrides,
-        )
-            .then((result) => resolve(result))
-            .catch(() => resolve([])),
-    )
-}
diff --git a/packages/mask/src/extension/background-script/EthereumServices/nonce.ts b/packages/mask/src/extension/background-script/EthereumServices/nonce.ts
deleted file mode 100644
index 54a828312be7..000000000000
--- a/packages/mask/src/extension/background-script/EthereumServices/nonce.ts
+++ /dev/null
@@ -1,131 +0,0 @@
-import { ProviderType } from '@masknet/web3-shared-evm'
-import { EthereumAddress } from 'wallet.ts'
-import { getTransactionCount } from './network'
-import { currentMaskWalletChainIdSettings } from '../../../plugins/Wallet/settings'
-
-class NonceManager {
-    constructor(private address: string) {}
-    private nonce = NonceManager.INITIAL_NONCE
-    private locked = false
-    private tasks: Array<() => void> = []
-
-    private lock() {
-        this.locked = true
-    }
-    private unlock() {
-        this.locked = false
-    }
-    private continue() {
-        if (!this.locked) this.tasks.shift()?.()
-    }
-    private async getRemoteNonce() {
-        return new Promise<number>(async (resolve, reject) => {
-            const callback = (e: unknown, nonce?: number) => {
-                if (e) reject(e)
-                // TODO: is 0 a correct value if nonce is undefined?
-                else resolve(nonce ?? 0)
-                this.unlock()
-                this.continue()
-            }
-            const run = async () => {
-                try {
-                    this.lock()
-                    callback(
-                        null,
-                        // Only mask wallets need to use Nonce
-                        await getTransactionCount(this.address, {
-                            providerType: ProviderType.MaskWallet,
-                            chainId: currentMaskWalletChainIdSettings.value,
-                        }),
-                    )
-                } catch (error) {
-                    callback(error)
-                }
-            }
-            if (this.locked) this.tasks.push(run)
-            else run()
-        })
-    }
-    private async setLocalNonce(nonce: number) {
-        return new Promise<void>(async (resolve, reject) => {
-            const callback = (e: Error | null) => {
-                if (e) reject(e)
-                else resolve()
-                this.unlock()
-                this.continue()
-            }
-            const run = async () => {
-                this.lock()
-                this.nonce = nonce
-                callback(null)
-            }
-            if (this.locked) this.tasks.push(run)
-            else run()
-        })
-    }
-
-    public async getNonce() {
-        const nonce = this.nonce === NonceManager.INITIAL_NONCE ? await this.getRemoteNonce() : this.nonce
-        await this.setLocalNonce(nonce)
-        return nonce
-    }
-    public async setNonce(nonce: number) {
-        await this.setLocalNonce(nonce)
-    }
-    public async resetNonce() {
-        const nonce = await this.getRemoteNonce()
-        await this.setLocalNonce(nonce)
-    }
-
-    static INITIAL_NONCE = -1
-}
-
-const cache = new Map<string, NonceManager>()
-
-/**
- * Get current available nonce, call commitNonce() after the transaction succeed
- * @param address the account address
- */
-export function getNonce(address_: string) {
-    const address = EthereumAddress.checksumAddress(address_)
-    if (!cache.has(address)) cache.set(address, new NonceManager(address))
-    return cache.get(address)!.getNonce()
-}
-
-/**
- * Commit to a new nonce only call when transaction succeed
- * @param address the account address
- */
-export async function commitNonce(address_: string) {
-    const address = EthereumAddress.checksumAddress(address_)
-    if (!cache.has(address)) cache.set(address, new NonceManager(address))
-    return setNonce(address, (await cache.get(address)!.getNonce()) + 1)
-}
-
-/**
- * Set a new nonce regardless the old one
- * @param address the account address
- * @param nonce the new nonce
- */
-export function setNonce(address_: string, nonce: number) {
-    const address = EthereumAddress.checksumAddress(address_)
-    if (!cache.has(address)) cache.set(address, new NonceManager(address))
-    return cache.get(address)!.setNonce(nonce)
-}
-
-/**
- * Sync local nonce to remote one (depend on your current node)
- * @param address the account address
- */
-export function resetNonce(address_: string) {
-    const address = EthereumAddress.checksumAddress(address_)
-    if (!cache.has(address)) cache.set(address, new NonceManager(address))
-    return cache.get(address)!.resetNonce()
-}
-
-/**
- * Sync all nonces
- */
-export async function resetAllNonce() {
-    await Promise.all(Array.from(cache.values()).map((m) => m.resetNonce()))
-}
diff --git a/packages/mask/src/extension/background-script/EthereumServices/provider.ts b/packages/mask/src/extension/background-script/EthereumServices/provider.ts
deleted file mode 100644
index 633c9c06999a..000000000000
--- a/packages/mask/src/extension/background-script/EthereumServices/provider.ts
+++ /dev/null
@@ -1,119 +0,0 @@
-import { first } from 'lodash-unified'
-import { defer } from '@dimensiondev/kit'
-import type { ChainId, ProviderType } from '@masknet/web3-shared-evm'
-import * as MaskWallet from './providers/MaskWallet'
-import * as MetaMask from './providers/MetaMask'
-import * as WalletConnect from './providers/WalletConnect'
-import * as CustomNetwork from './providers/CustomNetwork'
-import * as Injected from './providers/Injected'
-import * as Fortmatic from './providers/Fortmatic'
-
-// #region connect WalletConnect
-// Step 1: Generate the connection URI and render a QRCode for scanning by the user
-export async function createConnectionURI() {
-    return (await WalletConnect.createConnector()).uri
-}
-
-// Step 2: If user confirmed the request we will receive the 'connect' event
-type Account = { account?: string; chainId: ChainId }
-let deferredConnect: Promise<Account> | null = null
-let resolveConnect: ((result: Account) => void) | undefined
-let rejectConnect: ((error: Error) => void) | undefined
-
-export async function connectWalletConnect() {
-    const [deferred, resolve, reject] = defer<Account>()
-
-    deferredConnect = deferred
-    resolveConnect = resolve
-    rejectConnect = reject
-    createWalletConnect().then(resolve, reject)
-
-    return deferred
-}
-
-export async function createWalletConnect() {
-    const connector = await WalletConnect.createConnectorIfNeeded()
-
-    if (connector.connected)
-        return {
-            account: first(connector.accounts),
-            chainId: connector.chainId,
-        }
-
-    const { accounts, chainId } = await WalletConnect.requestAccounts()
-    return {
-        account: first(accounts),
-        chainId,
-    }
-}
-
-export async function untilWalletConnect() {
-    if (!deferredConnect) throw new Error('No connection.')
-    return deferredConnect
-}
-
-export async function cancelWalletConnect() {
-    rejectConnect?.(new Error('User rejected the request.'))
-}
-// #endregion
-
-export async function connectMaskWallet(expectedChainId: ChainId) {
-    const { accounts, chainId } = await MaskWallet.requestAccounts(expectedChainId)
-    return {
-        account: first(accounts),
-        chainId,
-    }
-}
-
-export async function connectMetaMask() {
-    const { accounts, chainId } = await MetaMask.requestAccounts()
-    return {
-        account: first(accounts),
-        chainId,
-    }
-}
-
-// #region fortmatic
-export async function connectFortmatic(expectedChainId: ChainId) {
-    const { accounts, chainId } = await Fortmatic.requestAccounts(expectedChainId)
-    return {
-        account: first(accounts),
-        chainId,
-    }
-}
-
-export async function disconnectFortmatic(expectedChainId: ChainId) {
-    await Fortmatic.dismissAccounts(expectedChainId)
-}
-// #endregion
-
-export async function connectCustomNetwork() {
-    const { accounts, chainId } = await CustomNetwork.requestAccounts()
-    return {
-        account: first(accounts),
-        chainId,
-    }
-}
-
-// #region connect injected provider
-export async function connectInjected() {
-    const { accounts, chainId } = await Injected.requestAccounts()
-    return {
-        account: first(accounts),
-        chainId,
-    }
-}
-
-export async function notifyInjectedEvent(name: string, event: unknown, providerType: ProviderType) {
-    switch (name) {
-        case 'accountsChanged':
-            await Injected.onAccountsChanged(event as string[], providerType)
-            break
-        case 'chainChanged':
-            await Injected.onChainIdChanged(event as string, providerType)
-            break
-        default:
-            throw new Error(`Unknown event name: ${name}.`)
-    }
-}
-// #endregion
diff --git a/packages/mask/src/extension/background-script/EthereumServices/providers/CustomNetwork.ts b/packages/mask/src/extension/background-script/EthereumServices/providers/CustomNetwork.ts
deleted file mode 100644
index ff7182ca9ffa..000000000000
--- a/packages/mask/src/extension/background-script/EthereumServices/providers/CustomNetwork.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { ChainId } from '@masknet/web3-shared-evm'
-
-export function createWeb3() {
-    throw new Error('To be implemented.')
-}
-
-export async function requestAccounts() {
-    return {
-        accounts: [],
-        chainId: ChainId.Mainnet,
-    }
-}
diff --git a/packages/mask/src/extension/background-script/EthereumServices/providers/Fortmatic.ts b/packages/mask/src/extension/background-script/EthereumServices/providers/Fortmatic.ts
deleted file mode 100644
index 2116fb6d9127..000000000000
--- a/packages/mask/src/extension/background-script/EthereumServices/providers/Fortmatic.ts
+++ /dev/null
@@ -1,97 +0,0 @@
-import Web3 from 'web3'
-import type { RequestArguments } from 'web3-core'
-import type { JsonRpcPayload, JsonRpcResponse } from 'web3-core-helpers'
-import { defer } from '@dimensiondev/kit'
-import { ChainId, EthereumMethodType } from '@masknet/web3-shared-evm'
-import { EVM_Messages } from '../../../../plugins/EVM/messages'
-import { resetAccount } from '../../../../plugins/Wallet/services'
-
-// #region redirect requests to the content page
-let id = 0
-
-async function request(requestArguments: RequestArguments) {
-    id += 1
-    const requestId = id
-    const [deferred, resolve, reject] = defer<any, Error | null>()
-
-    function onResponse({ payload, result, error }: EVM_Messages['FORTMATIC_PROVIDER_RPC_RESPONSE']) {
-        if (payload.id !== requestId) return
-        if (error) reject(error)
-        else resolve(result)
-    }
-
-    setTimeout(
-        () => reject(new Error('The request is timeout.')),
-        requestArguments.method === EthereumMethodType.MASK_LOGIN_FORTMATIC ? 3 * 60 * 1000 : 45 * 1000,
-    )
-    EVM_Messages.events.FORTMATIC_PROVIDER_RPC_RESPONSE.on(onResponse)
-    EVM_Messages.events.FORTMATIC_PROVIDER_RPC_REQUEST.sendToVisiblePages({
-        payload: {
-            jsonrpc: '2.0',
-            id: requestId,
-            params: [],
-            ...requestArguments,
-        },
-    })
-
-    deferred.finally(() => {
-        EVM_Messages.events.FORTMATIC_PROVIDER_RPC_RESPONSE.off(onResponse)
-    })
-
-    return deferred
-}
-
-function send(payload: JsonRpcPayload, callback: (error: Error | null, response?: JsonRpcResponse) => void) {
-    request({
-        method: payload.method,
-        params: payload.params,
-    })
-        .then((result) => {
-            callback(null, {
-                id: payload.id as number,
-                jsonrpc: '2.0',
-                result,
-            })
-        })
-        .catch((error) => {
-            callback(error)
-        })
-}
-// #endregion
-
-let web3: Web3 | null = null
-
-export function createProvider() {
-    return {
-        request,
-        send,
-        sendAsync: send,
-    }
-}
-
-export function createWeb3() {
-    if (web3) return web3
-    web3 = new Web3(createProvider())
-    return web3
-}
-
-export async function requestAccounts(expectedChainId: ChainId) {
-    const provider = createProvider()
-    const response = await provider.request({
-        method: EthereumMethodType.MASK_LOGIN_FORTMATIC,
-        params: [expectedChainId],
-    })
-    return response as {
-        chainId: ChainId
-        accounts: string[]
-    }
-}
-
-export async function dismissAccounts(expectedChainId: ChainId) {
-    const provider = createProvider()
-    await provider.request({
-        method: EthereumMethodType.MASK_LOGOUT_FORTMATIC,
-        params: [expectedChainId],
-    })
-    resetAccount()
-}
diff --git a/packages/mask/src/extension/background-script/EthereumServices/providers/Injected.ts b/packages/mask/src/extension/background-script/EthereumServices/providers/Injected.ts
deleted file mode 100644
index 461e7e6c6089..000000000000
--- a/packages/mask/src/extension/background-script/EthereumServices/providers/Injected.ts
+++ /dev/null
@@ -1,123 +0,0 @@
-import { first } from 'lodash-unified'
-import { defer } from '@dimensiondev/kit'
-import Web3 from 'web3'
-import type { RequestArguments } from 'web3-core'
-import type { JsonRpcPayload, JsonRpcResponse } from 'web3-core-helpers'
-import { ChainId, EthereumMethodType, ProviderType } from '@masknet/web3-shared-evm'
-import { EVM_Messages } from '../../../../plugins/EVM/messages'
-import { currentChainIdSettings, currentProviderSettings } from '../../../../plugins/Wallet/settings'
-import { updateAccount } from '../../../../plugins/Wallet/services'
-
-// #region redirect requests to the content page
-let id = 0
-
-async function request(requestArguments: RequestArguments) {
-    id += 1
-    const requestId = id
-    const [deferred, resolve, reject] = defer<any, Error | null>()
-
-    function onResponse({ payload, result, error }: EVM_Messages['INJECTED_PROVIDER_RPC_RESPONSE']) {
-        if (payload.id !== requestId) return
-        if (error) reject(error)
-        else resolve(result)
-    }
-
-    setTimeout(
-        () => reject(new Error('The request is timeout.')),
-        requestArguments.method === EthereumMethodType.ETH_REQUEST_ACCOUNTS ? 3 * 60 * 1000 : 45 * 1000,
-    )
-    EVM_Messages.events.INJECTED_PROVIDER_RPC_RESPONSE.on(onResponse)
-    EVM_Messages.events.INJECTED_PROVIDER_RPC_REQUEST.sendToVisiblePages({
-        payload: {
-            jsonrpc: '2.0',
-            id: requestId,
-            params: [],
-            ...requestArguments,
-        },
-    })
-
-    deferred.finally(() => {
-        EVM_Messages.events.INJECTED_PROVIDER_RPC_RESPONSE.off(onResponse)
-    })
-
-    return deferred
-}
-
-function send(payload: JsonRpcPayload, callback: (error: Error | null, response?: JsonRpcResponse) => void) {
-    request({
-        method: payload.method,
-        params: payload.params,
-    })
-        .then((result) => {
-            callback(null, {
-                id: payload.id as number,
-                jsonrpc: '2.0',
-                result,
-            })
-        })
-        .catch((error) => {
-            callback(error)
-        })
-}
-// #endregion
-
-let web3: Web3 | null = null
-
-export function createProvider() {
-    return {
-        request,
-        send,
-        sendAsync: send,
-    }
-}
-
-export function createWeb3() {
-    if (web3) return web3
-    web3 = new Web3(createProvider())
-    return web3
-}
-
-export async function requestAccounts() {
-    const web3 = createWeb3()
-    const chainId = await web3.eth.getChainId()
-    const accounts = await web3.eth.requestAccounts()
-    return {
-        chainId,
-        accounts,
-    }
-}
-
-export async function ensureConnectedAndUnlocked() {
-    const web3 = createWeb3()
-    try {
-        const accounts = await web3.eth.requestAccounts()
-        throw accounts
-    } catch (error) {
-        const accounts = error
-        if (Array.isArray(accounts)) {
-            if (accounts.length === 0) throw new Error('Injected Web3 is locked or it has not connected any accounts.')
-            else if (accounts.length > 0) return // valid
-        }
-        // Any other error means failed to connect injected web3
-        throw new Error('Failed to connect to injected Web3.')
-    }
-}
-
-export async function onAccountsChanged(accounts: string[], providerType: ProviderType) {
-    if (currentProviderSettings.value !== providerType) return
-    await updateAccount({
-        account: first(accounts),
-        providerType,
-    })
-}
-
-export async function onChainIdChanged(id: string, providerType: ProviderType) {
-    if (currentProviderSettings.value !== providerType) return
-
-    // learn more: https://docs.metamask.io/guide/ethereum-provider.html#chain-ids and https://chainid.network/
-    const chainId = Number.parseInt(id, 16) || ChainId.Mainnet
-    if (currentChainIdSettings.value === chainId) return
-    await updateAccount({
-        chainId,
-    })
-}
diff --git a/packages/mask/src/extension/background-script/EthereumServices/providers/MaskWallet.ts b/packages/mask/src/extension/background-script/EthereumServices/providers/MaskWallet.ts
deleted file mode 100644
index 39ed6db6b0f1..000000000000
--- a/packages/mask/src/extension/background-script/EthereumServices/providers/MaskWallet.ts
+++ /dev/null
@@ -1,89 +0,0 @@
-import MaskWallet from 'web3'
-import type { HttpProvider } from 'web3-core'
-import { PopupRoutes } from '@masknet/shared-base'
-import { ChainId, getChainRPC, ProviderType } from '@masknet/web3-shared-evm'
-import { currentChainIdSettings } from '../../../../plugins/Wallet/settings'
-import { openPopupWindow } from '../../../../../background/services/helper'
-import { WalletRPC } from '../../../../plugins/Wallet/messages'
-
-// #region providers
-const providerPool = new Map<string, HttpProvider>()
-
-export function createProvider(url: string): HttpProvider {
-    const provider =
-        providerPool.get(url) ??
-        new MaskWallet.providers.HttpProvider(url, {
-            timeout: 20000, // ms
-            // @ts-ignore
-            clientConfig: {
-                keepalive: true,
-                keepaliveInterval: 1, // ms
-            },
-            reconnect: {
-                auto: true,
-                delay: 5000, // ms
-                maxAttempts: Number.MAX_SAFE_INTEGER,
-                onTimeout: true,
-            },
-        })
-    providerPool.set(url, provider)
-    return provider
-}
-// #endregion
-
-// #region web3 instances
-const instancePool = new Map<string, MaskWallet>()
-const SEED = Math.floor(Math.random() * 4)
-
-function createWeb3Instance(provider: HttpProvider) {
-    return (
-        instancePool.get(provider.host) ??
-        (() => {
-            const newInstance = new MaskWallet(provider)
-            instancePool.set(provider.host, newInstance)
-            return newInstance
-        })()
-    )
-}
-
-export function createWeb3({
-    url = '',
-    chainId = currentChainIdSettings.value,
-    privKeys = [],
-}: {
-    url?: string
-    chainId?: ChainId
-    privKeys?: string[]
-} = {}) {
-    url = url || getChainRPC(chainId, SEED)
-    const provider = createProvider(url)
-    const web3 = createWeb3Instance(provider)
-    if (privKeys.length) {
-        web3.eth.accounts.wallet.clear()
-        privKeys.forEach((k) => k && k !== '0x' && web3.eth.accounts.wallet.add(k))
-    }
-    return web3
-}
-// #endregion
-
-export async function requestAccounts(chainId: ChainId) {
-    const wallets = await WalletRPC.getWallets(ProviderType.MaskWallet)
-    return new Promise<{
-        chainId: ChainId
-        accounts: string[]
-    }>(async (resolve, reject) => {
-        try {
-            await WalletRPC.selectAccountPrepare((accounts, chainId) => {
-                resolve({
-                    chainId,
-                    accounts,
-                })
-            })
-            await openPopupWindow(wallets.length > 0 ? PopupRoutes.SelectWallet : undefined, {
-                chainId,
-            })
-        } catch {
-            reject(new Error('Failed to connect to Mask Network.'))
-        }
-    })
-}
diff --git a/packages/mask/src/extension/background-script/EthereumServices/providers/MetaMask.ts b/packages/mask/src/extension/background-script/EthereumServices/providers/MetaMask.ts
deleted file mode 100644
index 57e4f1b66bff..000000000000
--- a/packages/mask/src/extension/background-script/EthereumServices/providers/MetaMask.ts
+++ /dev/null
@@ -1,112 +0,0 @@
-import Web3 from 'web3'
-import type { provider as Provider } from 'web3-core'
-import { first } from 'lodash-unified'
-import createMetaMaskProvider, { MetaMaskInpageProvider } from '@dimensiondev/metamask-extension-provider'
-import { ChainId, ProviderType } from '@masknet/web3-shared-evm'
-import { delay } from '@dimensiondev/kit'
-import { updateAccount } from '../../../../plugins/Wallet/services'
-import { currentChainIdSettings, currentProviderSettings } from '../../../../plugins/Wallet/settings'
-import { replaceRecentTransaction } from '../../../../plugins/Wallet/services/transaction/database'
-
-let provider: MetaMaskInpageProvider | null = null
-let web3: Web3 | null = null
-
-async function onAccountsChanged(accounts: string[]) {
-    if (currentProviderSettings.value !== ProviderType.MetaMask) return
-    await updateAccount({
-        account: first(accounts),
-        providerType: ProviderType.MetaMask,
-        chainId: typeof provider?.chainId === 'string' ? Number.parseInt(provider.chainId, 16) : undefined,
-    })
-}
-
-async function onChainIdChanged(id: string) {
-    if (currentProviderSettings.value !== ProviderType.MetaMask) return
-
-    // learn more: https://docs.metamask.io/guide/ethereum-provider.html#chain-ids and https://chainid.network/
-    const chainId = Number.parseInt(id, 16) || ChainId.Mainnet
-    if (currentChainIdSettings.value === chainId) return
-    await updateAccount({
-        chainId,
-    })
-}
-
-async function onMessage(message: {
-    type: 'tx_replacement'
-    data: {
-        oldTx: string
-        newTx: string
-        nonce: string
-        from: string
-    }
-}) {
-    if (message.type !== 'tx_replacement') return
-    await replaceRecentTransaction(
-        currentChainIdSettings.value,
-        message.data.from,
-        message.data.oldTx,
-        message.data.newTx,
-    )
-}
-
-export async function createProvider() {
-    if (provider?.chainId) return provider
-    provider = createMetaMaskProvider()
-
-    // wait for building the connection
-    await delay(1000)
-
-    if (!provider || provider.chainId === null) {
-        provider = null
-        throw new Error('Unable to create provider.')
-    }
-
-    provider.on('accountsChanged', onAccountsChanged as (...args: unknown[]) => void)
-    provider.on('chainChanged', onChainIdChanged as (...args: unknown[]) => void)
-    provider.on('message', onMessage as (...args: unknown[]) => void)
-    return provider
-}
-
-// MetaMask provider can be wrapped into web3 lib directly.
-// https://github.com/MetaMask/extension-provider
-export async function createWeb3() {
-    const provider_ = (await createProvider()) as Provider
-    if (!web3) web3 = new Web3(provider_)
-    else web3.setProvider(provider_)
-    return web3
-}
-
-export async function requestAccounts() {
-    const web3 = await createWeb3()
-    const chainId = await web3.eth.getChainId()
-    const accounts = await web3.eth.requestAccounts()
-    return {
-        chainId,
-        accounts,
-    }
-}
-
-export async function ensureConnectedAndUnlocked() {
-    const web3 = await createWeb3()
-    try {
-        const accounts = await web3.eth.requestAccounts()
-        throw accounts
-    } catch (error) {
-        const accounts = error
-        if (Array.isArray(accounts)) {
-            if (accounts.length === 0) throw new Error('MetaMask is locked or it has not connected any accounts.')
-            else if (accounts.length > 0) return // valid
-        }
-        // Any other error means failed to connect MetaMask
-        throw new Error('Failed to connect to MetaMask.')
-    }
-}
-
-export async function isUnlocked() {
-    try {
-        // it's an experimental API. we should not depend on.
-        return provider?._metamask?.isUnlocked() ?? false
-    } catch {
-        return false
-    }
-}
diff --git a/packages/mask/src/extension/background-script/EthereumServices/providers/WalletConnect.ts b/packages/mask/src/extension/background-script/EthereumServices/providers/WalletConnect.ts
deleted file mode 100644
index 14e20bc09ccb..000000000000
--- a/packages/mask/src/extension/background-script/EthereumServices/providers/WalletConnect.ts
+++ /dev/null
@@ -1,119 +0,0 @@
-import { first } from 'lodash-unified'
-import type { JsonRpcResponse } from 'web3-core-helpers'
-import WalletConnect from '@walletconnect/client'
-import type { IJsonRpcRequest } from '@walletconnect/types'
-import { ProviderType, ChainId } from '@masknet/web3-shared-evm'
-import * as MaskWallet from './MaskWallet'
-import { resetAccount, updateAccount } from '../../../../plugins/Wallet/services'
-import { currentChainIdSettings, currentProviderSettings } from '../../../../plugins/Wallet/settings'
-
-let connector: WalletConnect | null = null
-
-/**
- * Create a new connector and destroy the previous one if exists
- */
-export async function createConnector() {
-    if (connector?.connected) return connector
-
-    // create a new connector
-    connector = new WalletConnect({
-        bridge: 'https://uniswap.bridge.walletconnect.org',
-        clientMeta: {
-            name: 'Mask Network',
-            description: 'Mask Network',
-            url: 'https://mask.io',
-            icons: ['https://mask.io/apple-touch-icon.png'],
-        },
-    })
-    connector.on('connect', onConnect)
-    connector.on('session_update', onUpdate)
-    connector.on('disconnect', onDisconnect)
-    connector.on('error', onDisconnect)
-    if (!connector.connected) await connector.createSession()
-    return connector
-}
-
-export async function createConnectorIfNeeded() {
-    if (connector) return connector
-    return createConnector()
-}
-
-// #region rpc
-export async function signPersonalMessage(data: string, address: string, password: string) {
-    if (!connector) throw new Error('Connection Lost.')
-    return (await connector.signPersonalMessage([data, address, password])) as string
-}
-
-export async function signTypedDataMessage(data: string, address: string) {
-    if (!connector) throw new Error('Connection Lost.')
-    return (await connector.signTypedData([data, address])) as string
-}
-
-export async function sendCustomRequest(payload: IJsonRpcRequest) {
-    if (!connector) throw new Error('Connection Lost.')
-    return (await connector.sendCustomRequest(payload as IJsonRpcRequest)) as JsonRpcResponse
-}
-// #endregion
-
-// Wrap promise as PromiEvent because WalletConnect returns transaction hash only
-// docs: https://docs.walletconnect.org/client-api
-export function createWeb3({ chainId = currentChainIdSettings.value }: { chainId?: ChainId } = {}) {
-    return MaskWallet.createWeb3({
-        chainId,
-    })
-}
-// #endregion
-
-/**
- * Request accounts from WalletConnect
- * @param timeout
- */
-export async function requestAccounts() {
-    const connector_ = await createConnectorIfNeeded()
-    return new Promise<{ accounts: string[]; chainId: ChainId }>(async (resolve, reject) => {
-        function resolve_() {
-            resolve({
-                accounts: connector_.accounts,
-                chainId: connector_.chainId,
-            })
-        }
-        if (connector_.accounts.length) {
-            resolve_()
-            return
-        }
-        connector_.on('connect', resolve_)
-        connector_.on('update', resolve_)
-        connector_.on('error', reject)
-    })
-}
-
-const onConnect = () => onUpdate(null)
-
-const onUpdate = async (
-    error: Error | null,
-    payload?: {
-        params: Array<{
-            chainId: number
-            accounts: string[]
-        }>
-    },
-) => {
-    if (error) return
-    if (!connector?.accounts.length) return
-    if (currentProviderSettings.value !== ProviderType.WalletConnect) return
-    await updateAccount({
-        name: connector.peerMeta?.name,
-        account: first(connector.accounts),
-        chainId: connector.chainId,
-        providerType: ProviderType.WalletConnect,
-    })
-}
-
-const onDisconnect = async (error: Error | null) => {
-    if (connector?.connected) await connector.killSession()
-    connector = null
-    if (currentProviderSettings.value !== ProviderType.WalletConnect) return
-    await resetAccount({
-        providerType: ProviderType.WalletConnect,
-    })
-}
diff --git a/packages/mask/src/extension/background-script/EthereumServices/request.ts b/packages/mask/src/extension/background-script/EthereumServices/request.ts
deleted file mode 100644
index acaa98c14af6..000000000000
--- a/packages/mask/src/extension/background-script/EthereumServices/request.ts
+++ /dev/null
@@ -1,262 +0,0 @@
-import type { RequestArguments, TransactionConfig } from 'web3-core'
-import type { JsonRpcPayload, JsonRpcResponse } from 'web3-core-helpers'
-import {
-    EthereumMethodType,
-    EthereumTransactionConfig,
-    formatGweiToWei,
-    formatWeiToGwei,
-    isEIP1559Supported,
-    ProviderType,
-    RequestOptions,
-    SendOverrides,
-    TransactionStateType,
-} from '@masknet/web3-shared-evm'
-import {
-    currentChainIdSettings,
-    currentMaskWalletAccountSettings,
-    currentMaskWalletChainIdSettings,
-    currentProviderSettings,
-} from '../../../plugins/Wallet/settings'
-import { WalletRPC } from '../../../plugins/Wallet/messages'
-import { INTERNAL_nativeSend, INTERNAL_send } from './send'
-import { defer } from '@dimensiondev/kit'
-import { hasNativeAPI, nativeAPI } from '../../../../shared/native-rpc'
-import { openPopupWindow, removePopupWindow } from '../../../../background/services/helper'
-import { toHex } from 'web3-utils'
-import { isLessThan } from '@masknet/web3-shared-base'
-
-let id = 0
-
-const UNCONFIRMED_CALLBACK_MAP = new Map<number, (error: Error | null, response?: JsonRpcResponse) => void>()
-const RISK_METHOD_LIST = [
-    EthereumMethodType.ETH_SIGN,
-    EthereumMethodType.PERSONAL_SIGN,
-    EthereumMethodType.ETH_SIGN_TYPED_DATA,
-    EthereumMethodType.ETH_DECRYPT,
-    EthereumMethodType.ETH_GET_ENCRYPTION_PUBLIC_KEY,
-    EthereumMethodType.ETH_SEND_TRANSACTION,
-]
-
-function getSendMethod() {
-    if (hasNativeAPI && nativeAPI) return INTERNAL_nativeSend
-    return INTERNAL_send
-}
-
-function getPayloadId(payload: JsonRpcPayload) {
-    return typeof payload.id === 'string' ? Number.parseInt(payload.id, 10) : payload.id
-}
-
-function isRiskMethod(method: EthereumMethodType) {
-    return RISK_METHOD_LIST.includes(method)
-}
-
-function isSendMethod(method: EthereumMethodType) {
-    return method === EthereumMethodType.ETH_SEND_TRANSACTION
-}
-
-async function requestSend(
-    payload: JsonRpcPayload,
-    callback: (error: Error | null, response?: JsonRpcResponse) => void,
-    overrides?: SendOverrides,
-    options?: RequestOptions,
-) {
-    id += 1
-    const notifyProgress = isSendMethod(payload.method as EthereumMethodType)
-    const { providerType = currentProviderSettings.value } = overrides ?? {}
-
-    const chainId =
-        overrides?.chainId ??
-        (providerType === ProviderType.MaskWallet
-            ? currentMaskWalletChainIdSettings.value
-            : currentChainIdSettings.value)
-
-    const { popupsWindow = true } = options ?? {}
-
-    const payload_ = {
-        ...payload,
-        id,
-    }
-
-    if (payload_.method === EthereumMethodType.ETH_SEND_TRANSACTION) {
-        const [config] = payload_.params as [EthereumTransactionConfig]
-
-        // If the default gas config be less than low option, force reset it
-        if (isEIP1559Supported(chainId)) {
-            const results = await WalletRPC.getEstimateGasFees(chainId)
-
-            if (
-                results?.low?.suggestedMaxFeePerGas &&
-                results?.medium &&
-                (isLessThan(
-                    config?.maxFeePerGas ? formatWeiToGwei(config.maxFeePerGas) : 0,
-                    results.low.suggestedMaxFeePerGas,
-                ) ||
-                    isLessThan(
-                        config?.maxPriorityFeePerGas ? formatWeiToGwei(config.maxPriorityFeePerGas) : 0,
-                        results.low.suggestedMaxPriorityFeePerGas,
-                    ))
-            ) {
-                payload_.params![0] = {
-                    ...config,
-                    maxFeePerGas: toHex(formatGweiToWei(results.medium.suggestedMaxFeePerGas).toFixed(0)),
-                    maxPriorityFeePerGas: toHex(
-                        formatGweiToWei(results.medium.suggestedMaxPriorityFeePerGas).toFixed(0),
-                    ),
-                }
-            }
-        } else {
-            const results = await WalletRPC.getGasPriceDictFromDeBank(chainId)
-            if (results?.data.slow.price && isLessThan((config?.gasPrice as string) ?? 0, results.data.slow.price)) {
-                payload_.params![0] = {
-                    ...config,
-                    gasPrice: toHex(results.data.normal.price),
-                }
-            }
-        }
-    }
-
-    const hijackedCallback = (error: Error | null, response?: JsonRpcResponse) => {
-        if (error && notifyProgress)
-            WalletRPC.notifyPayloadProgress(payload_, {
-                type: TransactionStateType.FAILED,
-                error,
-            })
-        callback(error, response)
-    }
-
-    // redirect risk rpc to the mask wallet
-    if (
-        !hasNativeAPI &&
-        providerType === ProviderType.MaskWallet &&
-        isRiskMethod(payload_.method as EthereumMethodType)
-    ) {
-        try {
-            if (notifyProgress)
-                WalletRPC.addProgress({
-                    payload: payload_,
-                    state: {
-                        type: TransactionStateType.WAIT_FOR_CONFIRMING,
-                    },
-                })
-            await WalletRPC.pushUnconfirmedRequest(payload_)
-        } catch (error) {
-            hijackedCallback(error instanceof Error ? error : new Error('Failed to add request.'))
-            return
-        }
-        UNCONFIRMED_CALLBACK_MAP.set(payload_.id, hijackedCallback)
-        if (popupsWindow) openPopupWindow()
-        return
-    }
-    if (notifyProgress)
-        WalletRPC.addProgress({
-            payload,
-            state: {
-                type:
-                    providerType === ProviderType.MaskWallet
-                        ? TransactionStateType.UNKNOWN
-                        : TransactionStateType.WAIT_FOR_CONFIRMING,
-            },
-        })
-    getSendMethod()(payload_, hijackedCallback, overrides)
-}
-
-export async function request<T extends unknown>(
-    requestArguments: RequestArguments,
-    overrides?: SendOverrides,
-    options?: RequestOptions,
-) {
-    return new Promise<T>(async (resolve, reject) => {
-        requestSend(
-            {
-                jsonrpc: '2.0',
-                id,
-                params: [],
-                ...requestArguments,
-            },
-            (error, response) => {
-                if (error || response?.error) reject(error ?? response?.error)
-                else resolve(response?.result)
-            },
-            overrides,
-            options,
-        )
-    })
-}
-
-export async function confirmRequest(payload: JsonRpcPayload, disableClose?: boolean) {
-    const pid = getPayloadId(payload)
-    if (!pid) return
-    const [deferred, resolve, reject] = defer<JsonRpcResponse | undefined, Error>()
-    getSendMethod()(
-        payload,
-        (error, response) => {
-            UNCONFIRMED_CALLBACK_MAP.get(pid)?.(error, response)
-            if (error) reject(error)
-            else if (response?.error) reject(new Error(`Failed to send transaction: ${response.error}`))
-            else {
-                WalletRPC.deleteUnconfirmedRequest(payload)
-                    .then(() => {
-                        if (disableClose) return
-                        return removePopupWindow()
-                    })
-                    .then(() => {
-                        UNCONFIRMED_CALLBACK_MAP.delete(pid)
-                    })
-                resolve(response)
-            }
-        },
-        {
-            account: currentMaskWalletAccountSettings.value,
-            chainId: currentMaskWalletChainIdSettings.value,
-            providerType: ProviderType.MaskWallet,
-        },
-    )
-    return deferred
-}
-
-export async function rejectRequest(payload: JsonRpcPayload) {
-    const pid = getPayloadId(payload)
-    if (!pid) return
-    UNCONFIRMED_CALLBACK_MAP.get(pid)?.(new Error('User rejected!'))
-    await WalletRPC.deleteUnconfirmedRequest(payload)
-    await removePopupWindow()
-    UNCONFIRMED_CALLBACK_MAP.delete(pid)
-}
-
-export async function replaceRequest(hash: string, payload: JsonRpcPayload, overrides?: TransactionConfig) {
-    const pid = getPayloadId(payload)
-    if (!pid || payload.method !== EthereumMethodType.ETH_SEND_TRANSACTION) return
-
-    const [config] = payload.params as [TransactionConfig]
-    return request<string>(
-        {
-            method: EthereumMethodType.MASK_REPLACE_TRANSACTION,
-            params: [
-                hash,
-                {
-                    ...config,
-                    ...overrides,
-                },
-            ],
-        },
-        {
-            account: currentMaskWalletAccountSettings.value,
-            chainId: currentMaskWalletChainIdSettings.value,
-            providerType: ProviderType.MaskWallet,
-        },
-    )
-}
-
-export async function cancelRequest(hash: string, payload: JsonRpcPayload, overrides?: TransactionConfig) {
-    const pid = getPayloadId(payload)
-    if (!pid || payload.method !== EthereumMethodType.ETH_SEND_TRANSACTION) return
-
-    const [config] = payload.params as [TransactionConfig]
-    return replaceRequest(hash, payload, {
-        ...config,
-        ...overrides,
-        to: config.from as string,
-        data: '0x',
-        value: '0x0',
-    })
-}
diff --git a/packages/mask/src/extension/background-script/EthereumServices/rpc/abi.ts b/packages/mask/src/extension/background-script/EthereumServices/rpc/abi.ts
deleted file mode 100644
index 0bf230349bc6..000000000000
--- a/packages/mask/src/extension/background-script/EthereumServices/rpc/abi.ts
+++ /dev/null
@@ -1,66 +0,0 @@
-import type { AbiItem } from 'web3-utils'
-import * as ABICoder from 'web3-eth-abi'
-
-// built in abis
-import BulkCheckout from '@masknet/web3-contracts/abis/BulkCheckout.json'
-import ITO2 from '@masknet/web3-contracts/abis/ITO2.json'
-import NftHappyRedPacket from '@masknet/web3-contracts/abis/NftHappyRedPacket.json'
-import HappyRedPacketV4 from '@masknet/web3-contracts/abis/HappyRedPacketV4.json'
-import ERC20 from '@masknet/web3-contracts/abis/ERC20.json'
-import RouterV2ABI from '@masknet/web3-contracts/abis/RouterV2.json'
-import SwapRouter from '@masknet/web3-contracts/abis/SwapRouter.json'
-import MaskBox from '@masknet/web3-contracts/abis/MaskBox.json'
-
-// fix the type error
-const coder = ABICoder as unknown as ABICoder.AbiCoder
-
-type InternalItem = {
-    name: string
-    parameters: Array<{
-        name: string
-        type: string
-    }>
-}
-
-const ABI_MAP: Map<string, InternalItem> = new Map()
-
-export function readABI(sig?: string) {
-    if (!sig) return
-    return ABI_MAP.get(sig)
-}
-
-// #region construct built-in abis
-function constructABI(abi: AbiItem[]) {
-    abi.forEach((x) => {
-        if (x.type !== 'function') return
-        if (x.stateMutability === 'pure' || x.stateMutability === 'view') return
-        const { name, inputs = [] } = x
-        if (!name) return
-        try {
-            const sig = coder.encodeFunctionSignature(`${x.name}(${inputs.map((y) => y.type).join(',')})`)
-            if (ABI_MAP.has(sig))
-                console.warn(`The signature of ${`${x.name}(${inputs.map((y) => y.type).join(',')})`} already exists.`)
-            ABI_MAP.set(sig, {
-                name,
-                parameters:
-                    inputs.map((y) => ({
-                        name: y.name,
-                        type: y.type,
-                    })) ?? [],
-            })
-        } catch (error) {
-            console.log('Failed to encode function signature from below ABI:')
-            console.log(x)
-        }
-    })
-}
-
-constructABI(BulkCheckout as AbiItem[]) // donate gitcoin grants
-constructABI(ITO2 as AbiItem[])
-constructABI(NftHappyRedPacket as AbiItem[])
-constructABI(HappyRedPacketV4 as AbiItem[])
-constructABI(MaskBox as AbiItem[])
-constructABI(ERC20 as AbiItem[])
-constructABI(RouterV2ABI as AbiItem[]) // uniswap V2 like
-constructABI(SwapRouter as AbiItem[]) // uniswap V3 like
-// #endregion
diff --git a/packages/mask/src/extension/background-script/EthereumServices/rpc/index.ts b/packages/mask/src/extension/background-script/EthereumServices/rpc/index.ts
deleted file mode 100644
index a57e7e9851c2..000000000000
--- a/packages/mask/src/extension/background-script/EthereumServices/rpc/index.ts
+++ /dev/null
@@ -1,197 +0,0 @@
-import * as ABICoder from 'web3-eth-abi'
-import {
-    isSameAddress,
-    EthereumRpcComputed,
-    EthereumRpcType,
-    EthereumMethodType,
-    getChainDetailedCAIP,
-    ZERO_ADDRESS,
-    isZeroAddress,
-} from '@masknet/web3-shared-evm'
-import type { TransactionConfig } from 'web3-core'
-import type { JsonRpcPayload } from 'web3-core-helpers'
-import { getCode } from '../network'
-import { readABI } from './abi'
-import { isZero } from '@masknet/web3-shared-base'
-
-// fix the type error
-const coder = ABICoder as unknown as ABICoder.AbiCoder
-
-function isEmptyHex(hex: string) {
-    return !hex || ['0x', '0x0'].includes(hex)
-}
-
-function getData(tx: TransactionConfig) {
-    const { data } = tx
-    if (!data) return
-    if (isEmptyHex(data)) return
-    if (!data.startsWith('0x')) return `0x${data}`
-    return data
-}
-
-function getTo(tx: TransactionConfig) {
-    const { to } = tx
-    if (!to) return ZERO_ADDRESS
-    if (isEmptyHex(to)) return ZERO_ADDRESS
-    return to
-}
-
-function getFunctionSignature(tx: TransactionConfig) {
-    const data = getData(tx)
-    return data?.slice(0, 10)
-}
-
-function getFunctionParameters(tx: TransactionConfig) {
-    const data = getData(tx)
-    return data?.slice(10)
-}
-
-export async function getComputedPayload(payload: JsonRpcPayload): Promise<EthereumRpcComputed | undefined> {
-    switch (payload.method) {
-        // sign
-        case EthereumMethodType.ETH_SIGN:
-        case EthereumMethodType.PERSONAL_SIGN:
-            return {
-                type: EthereumRpcType.SIGN,
-                to: payload.params![1],
-                data: payload.params![0],
-            }
-        case EthereumMethodType.ETH_SIGN_TYPED_DATA:
-            return {
-                type: EthereumRpcType.SIGN_TYPED_DATA,
-                to: payload.params![0],
-                data: payload.params![1],
-            }
-
-        // decrypt
-        case EthereumMethodType.ETH_DECRYPT:
-            return {
-                type: EthereumRpcType.ETH_DECRYPT,
-                to: payload.params![1],
-                secret: payload.params![0],
-            }
-        case EthereumMethodType.ETH_GET_ENCRYPTION_PUBLIC_KEY:
-            return {
-                type: EthereumRpcType.ETH_GET_ENCRYPTION_PUBLIC_KEY,
-                account: payload.params![0],
-            }
-
-        // asset
-        case EthereumMethodType.WATCH_ASSET:
-        case EthereumMethodType.WATCH_ASSET_LEGACY:
-            return {
-                type: EthereumRpcType.WATCH_ASSET,
-                asset: payload.params![0],
-            }
-
-        // wallet
-        case EthereumMethodType.WALLET_SWITCH_ETHEREUM_CHAIN:
-            return {
-                type: EthereumRpcType.WALLET_SWITCH_ETHEREUM_CHAIN,
-                chain: getChainDetailedCAIP(Number.parseInt(payload.params![0], 16)),
-            }
-        case EthereumMethodType.WALLET_ADD_ETHEREUM_CHAIN:
-            return {
-                type: EthereumRpcType.WALLET_SWITCH_ETHEREUM_CHAIN,
-                chain: payload.params![0],
-            }
-
-        // contract interaction
-        case EthereumMethodType.ETH_SEND_TRANSACTION:
-            return getSendTransactionComputedPayload(payload) as Promise<EthereumRpcComputed | undefined>
-
-        default:
-            return
-    }
-}
-export function getContractFunctionName(signature: string) {
-    const abi = readABI(signature)
-    return abi?.name
-}
-
-export type ComputedPayload =
-    | undefined
-    | {
-          type: EthereumRpcType.CONTRACT_INTERACTION
-          name?: string
-          parameters?: Record<string, string | undefined>
-          _tx: any
-      }
-    | {
-          type: EthereumRpcType.CONTRACT_DEPLOYMENT
-          code: string
-          _tx: any
-      }
-    | {
-          type: EthereumRpcType.SEND_ETHER | EthereumRpcType.CANCEL
-          _tx: any
-      }
-export async function getSendTransactionComputedPayload(payload: JsonRpcPayload): Promise<ComputedPayload | undefined> {
-    const config =
-        payload.method === EthereumMethodType.MASK_REPLACE_TRANSACTION ? payload.params![1] : payload.params![0]
-    const from = (config.from as string | undefined) ?? ''
-    const value = (config.value as string | undefined) ?? '0x0'
-    const data = getData(config)
-    const to = getTo(config)
-    const signature = getFunctionSignature(config)
-    const parameters = getFunctionParameters(config)
-
-    if (data) {
-        // contract interaction
-        const abi = readABI(signature)
-
-        if (abi) {
-            try {
-                return {
-                    type: EthereumRpcType.CONTRACT_INTERACTION,
-                    name: abi.name,
-                    parameters: coder.decodeParameters(abi.parameters, parameters ?? ''),
-                    _tx: config,
-                }
-            } catch {
-                // do nothing
-            }
-        }
-
-        // contract deployment
-        if (isZeroAddress(to)) {
-            return {
-                type: EthereumRpcType.CONTRACT_DEPLOYMENT,
-                code: data,
-                _tx: config,
-            }
-        }
-    }
-
-    if (to) {
-        let code = ''
-        try {
-            code = await getCode(to)
-        } catch {
-            code = ''
-        }
-
-        // cancel tx
-        if (isSameAddress(from, to) && isZero(value)) {
-            return {
-                type: EthereumRpcType.CANCEL,
-                _tx: config,
-            }
-        }
-
-        // send ether
-        if (isEmptyHex(code)) {
-            return {
-                type: EthereumRpcType.SEND_ETHER,
-                _tx: config,
-            }
-        } else {
-            return {
-                type: EthereumRpcType.CONTRACT_INTERACTION,
-                _tx: config,
-            }
-        }
-    }
-
-    return
-}
diff --git a/packages/mask/src/extension/background-script/EthereumServices/send.ts b/packages/mask/src/extension/background-script/EthereumServices/send.ts
deleted file mode 100644
index f13fc170f3b5..000000000000
--- a/packages/mask/src/extension/background-script/EthereumServices/send.ts
+++ /dev/null
@@ -1,526 +0,0 @@
-import { EthereumAddress } from 'wallet.ts'
-import { toHex } from 'web3-utils'
-import type { HttpProvider } from 'web3-core'
-import type { JsonRpcPayload, JsonRpcResponse } from 'web3-core-helpers'
-import { toBuffer } from 'ethereumjs-util'
-import { safeUnreachable } from '@dimensiondev/kit'
-import {
-    addGasMargin,
-    ChainId,
-    EthereumErrorType,
-    EthereumMethodType,
-    EthereumRpcType,
-    isEIP1559Supported,
-    isSameAddress,
-    ProviderType,
-    SendOverrides,
-    getPayloadHash,
-    getPayloadConfig,
-    getPayloadChainId,
-    getTransactionHash,
-    isZeroAddress,
-    getPayloadAccount,
-} from '@masknet/web3-shared-evm'
-import type { IJsonRpcRequest } from '@walletconnect/types'
-import * as MetaMask from './providers/MetaMask'
-import * as Injected from './providers/Injected'
-import * as WalletConnect from './providers/WalletConnect'
-import * as Fortmatic from './providers/Fortmatic'
-import { getWallet } from '../../../plugins/Wallet/services'
-import { createWeb3 } from './web3'
-import { commitNonce, getNonce, resetNonce } from './nonce'
-import {
-    currentAccountSettings,
-    currentChainIdSettings,
-    currentProviderSettings,
-} from '../../../plugins/Wallet/settings'
-import { Flags } from '../../../../shared'
-import { nativeAPI } from '../../../../shared/native-rpc'
-import { WalletRPC } from '../../../plugins/Wallet/messages'
-import { getSendTransactionComputedPayload, ComputedPayload } from './rpc'
-import { getError, hasError } from './error'
-import { signTypedData, SignTypedDataVersion } from '@metamask/eth-sig-util'
-
-function isReadOnlyMethod(payload: JsonRpcPayload) {
-    return [
-        EthereumMethodType.ETH_GET_CODE,
-        EthereumMethodType.ETH_GAS_PRICE,
-        EthereumMethodType.ETH_BLOCK_NUMBER,
-        EthereumMethodType.ETH_GET_BALANCE,
-        EthereumMethodType.ETH_GET_TRANSACTION_BY_HASH,
-        EthereumMethodType.ETH_GET_TRANSACTION_RECEIPT,
-        EthereumMethodType.MASK_GET_TRANSACTION_RECEIPT,
-        EthereumMethodType.ETH_GET_TRANSACTION_COUNT,
-        EthereumMethodType.ETH_ESTIMATE_GAS,
-        EthereumMethodType.ETH_CALL,
-        EthereumMethodType.ETH_GET_LOGS,
-    ].includes(payload.method as EthereumMethodType)
-}
-
-function isSignableMethod(payload: JsonRpcPayload) {
-    return [
-        EthereumMethodType.ETH_SIGN,
-        EthereumMethodType.PERSONAL_SIGN,
-        EthereumMethodType.ETH_SIGN_TRANSACTION,
-        EthereumMethodType.MASK_REPLACE_TRANSACTION,
-        EthereumMethodType.ETH_SIGN_TYPED_DATA,
-        EthereumMethodType.ETH_SEND_TRANSACTION,
-    ].includes(payload.method as EthereumMethodType)
-}
-
-function getTo(computedPayload: ComputedPayload) {
-    if (!computedPayload) return ''
-    switch (computedPayload.type) {
-        case EthereumRpcType.SEND_ETHER:
-            return (computedPayload._tx.to as string) ?? ''
-        case EthereumRpcType.CONTRACT_INTERACTION:
-            if (['transfer', 'transferFrom'].includes(computedPayload.name ?? ''))
-                return (computedPayload.parameters?.to as string) ?? ''
-    }
-    return ''
-}
-
-async function handleTransferTransaction(chainId: ChainId, payload: JsonRpcPayload) {
-    if (payload.method !== EthereumMethodType.ETH_SEND_TRANSACTION) return
-    const computedPayload = await getSendTransactionComputedPayload(payload)
-    if (!computedPayload) return
-
-    const from = (computedPayload._tx.from as string) ?? ''
-    const to = getTo(computedPayload)
-
-    if (!isSameAddress(from, to) && !isZeroAddress(to)) await WalletRPC.addAddress(chainId, to)
-}
-
-function handleRecentTransaction(
-    chainId: ChainId,
-    account: string,
-    payload: JsonRpcPayload,
-    response: JsonRpcResponse | undefined,
-) {
-    const hash = getTransactionHash(response)
-    if (!hash) return
-    WalletRPC.watchTransaction(chainId, hash, payload)
-    WalletRPC.addRecentTransaction(chainId, account, hash, payload)
-}
-
-function handleReplaceRecentTransaction(
-    chainId: ChainId,
-    previousHash: string,
-    account: string,
-    payload: JsonRpcPayload,
-    response: JsonRpcResponse | undefined,
-) {
-    const hash = getTransactionHash(response)
-    if (!hash) return
-    WalletRPC.watchTransaction(chainId, hash, payload)
-    WalletRPC.replaceRecentTransaction(chainId, account, previousHash, hash, payload)
-}
-
-async function handleNonce(
-    chainId: ChainId,
-    account: string,
-    error: Error | null,
-    response: JsonRpcResponse | undefined,
-) {
-    if (chainId !== currentChainIdSettings.value) return
-    const error_ = (error ?? response?.error) as { message: string } | undefined
-    const message = error_?.message ?? ''
-    if (!EthereumAddress.isValid(account)) return
-    // nonce too low
-    // nonce too high
-    // transaction too old
-    const isGeneralErrorNonce = /\bnonce|transaction\b/im.test(message) && /\b(low|high|old)\b/im.test(message)
-    const isAuroraErrorNonce = message.includes('ERR_INCORRECT_NONCE')
-    if (isGeneralErrorNonce || isAuroraErrorNonce) resetNonce(account)
-    else if (!error_) commitNonce(account)
-}
-
-/**
- * This API is only used internally. Please use requestSend instead in order to share the same payload id globally.
- * @param payload
- * @param callback
- * @param sendOverrides
- */
-export async function INTERNAL_send(
-    payload: JsonRpcPayload,
-    callback: (error: Error | null, response?: JsonRpcResponse) => void,
-    {
-        chainId = currentChainIdSettings.value,
-        account = currentAccountSettings.value,
-        providerType = currentProviderSettings.value,
-    }: SendOverrides = {},
-) {
-    const chainIdFinally = getPayloadChainId(payload) ?? chainId
-    const accountFinally = getPayloadAccount(payload) ?? account
-    const wallet = providerType === ProviderType.MaskWallet ? await getWallet(accountFinally) : null
-    const privKey = isSignableMethod(payload) && wallet ? await WalletRPC.exportPrivateKey(wallet.address) : undefined
-    const web3 = await createWeb3({
-        chainId: chainIdFinally,
-        privKeys: privKey ? [privKey] : [],
-        providerType: isReadOnlyMethod(payload) ? ProviderType.MaskWallet : providerType,
-    })
-    const provider = web3.currentProvider as HttpProvider | undefined
-
-    // unable to create provider
-    if (!provider) {
-        callback(new Error('Failed to create provider.'))
-        return
-    }
-
-    // illegal payload
-    if (typeof payload.id === 'undefined') {
-        callback(new Error('Unknown payload id.'))
-        return
-    }
-
-    async function personalSign() {
-        const [data, address] = payload.params as [string, string]
-        switch (providerType) {
-            case ProviderType.MaskWallet:
-                try {
-                    const signed = await web3.eth.sign(data, address)
-                    callback(null, {
-                        jsonrpc: '2.0',
-                        id: payload.id as number,
-                        result: signed,
-                    })
-                } catch (error) {
-                    callback(getError(error, null, EthereumErrorType.ERR_SIGN_MESSAGE))
-                }
-                break
-            case ProviderType.MetaMask:
-                await MetaMask.ensureConnectedAndUnlocked()
-                provider?.send(
-                    {
-                        ...payload,
-                        params: [data, address, ''],
-                    },
-                    callback,
-                )
-                break
-            case ProviderType.WalletConnect:
-                try {
-                    callback(null, {
-                        jsonrpc: '2.0',
-                        id: payload.id as number,
-                        result: await WalletConnect.signPersonalMessage(data, address, ''),
-                    })
-                } catch (error) {
-                    callback(getError(error, null, EthereumErrorType.ERR_SIGN_MESSAGE))
-                }
-                break
-            case ProviderType.Coin98:
-            case ProviderType.WalletLink:
-            case ProviderType.MathWallet:
-                try {
-                    callback(null, {
-                        jsonrpc: '2.0',
-                        id: payload.id as number,
-                        result: await Injected.createProvider().request({
-                            method: EthereumMethodType.PERSONAL_SIGN,
-                            params: payload.params,
-                        }),
-                    })
-                } catch (error) {
-                    callback(getError(error, null, EthereumErrorType.ERR_SIGN_MESSAGE))
-                }
-                break
-            case ProviderType.Fortmatic:
-                try {
-                    callback(null, {
-                        jsonrpc: '2.0',
-                        id: payload.id as number,
-                        result: await Fortmatic.createProvider().request({
-                            method: EthereumMethodType.PERSONAL_SIGN,
-                            params: payload.params,
-                        }),
-                    })
-                } catch (error) {
-                    callback(getError(error, null, EthereumErrorType.ERR_SIGN_MESSAGE))
-                }
-                break
-            case ProviderType.CustomNetwork:
-                throw new Error('To be implemented.')
-            default:
-                safeUnreachable(providerType)
-        }
-    }
-
-    async function typedDataSign() {
-        const [address, dataToSign] = payload.params as [string, string]
-        switch (providerType) {
-            case ProviderType.MaskWallet:
-                const signed = signTypedData({
-                    privateKey: toBuffer('0x' + privKey),
-                    data: JSON.parse(dataToSign),
-                    version: SignTypedDataVersion.V4,
-                })
-                try {
-                    callback(null, {
-                        jsonrpc: '2.0',
-                        id: payload.id as number,
-                        result: signed,
-                    })
-                } catch (error) {
-                    callback(getError(error, null, EthereumErrorType.ERR_SIGN_MESSAGE))
-                }
-                break
-            case ProviderType.WalletConnect:
-                try {
-                    callback(null, {
-                        jsonrpc: '2.0',
-                        id: payload.id as number,
-                        result: await WalletConnect.signTypedDataMessage(address, dataToSign),
-                    })
-                } catch (error) {
-                    callback(getError(error, null, EthereumErrorType.ERR_SIGN_MESSAGE))
-                }
-                break
-            default:
-                provider?.send(payload, callback)
-        }
-    }
-
-    async function sendTransaction() {
-        const hash = getPayloadHash(payload)
-        const config = getPayloadConfig(payload)
-
-        if (!config) {
-            callback(getError(null, null, EthereumErrorType.ERR_SEND_TRANSACTION))
-            return
-        }
-
-        // add nonce
-        if (providerType === ProviderType.MaskWallet && config.from && !config.nonce)
-            config.nonce = await getNonce(config.from as string)
-
-        // add gas margin
-        if (config.gas) config.gas = addGasMargin(config.gas).toString()
-        config.gas = toHex(config.gas ?? '0')
-
-        // add chain id
-        if (!config.chainId) config.chainId = chainIdFinally
-
-        // if the transaction is eip-1559, need to remove gasPrice from the config,
-        if (Flags.EIP1559_enabled && isEIP1559Supported(chainIdFinally)) {
-            config.gasPrice = undefined
-        } else {
-            config.maxFeePerGas = undefined
-            config.maxPriorityFeePerGas = undefined
-        }
-
-        // send the transaction
-        switch (providerType) {
-            case ProviderType.MaskWallet:
-                if (!wallet?.storedKeyInfo || !privKey) {
-                    callback(getError(null, null, EthereumErrorType.ERR_SIGN_TRANSACTION))
-                    return
-                }
-
-                // send the signed transaction
-                const signed = await web3.eth.accounts.signTransaction(config, privKey)
-                if (!signed.rawTransaction) {
-                    callback(getError(null, null, EthereumErrorType.ERR_SIGN_TRANSACTION))
-                    return
-                }
-
-                provider?.send(
-                    {
-                        ...payload,
-                        method: EthereumMethodType.ETH_SEND_RAW_TRANSACTION,
-                        params: [signed.rawTransaction],
-                    },
-                    (error, response) => {
-                        callback(
-                            hasError(error, response)
-                                ? getError(error, response, EthereumErrorType.ERR_SEND_TRANSACTION)
-                                : null,
-                            response,
-                        )
-                        switch (payload.method) {
-                            case EthereumMethodType.ETH_SEND_TRANSACTION:
-                                handleNonce(chainIdFinally, accountFinally, error, response)
-                                handleTransferTransaction(chainIdFinally, payload)
-                                handleRecentTransaction(chainIdFinally, accountFinally, payload, response)
-                                break
-                            case EthereumMethodType.MASK_REPLACE_TRANSACTION:
-                                handleReplaceRecentTransaction(chainIdFinally, hash, accountFinally, payload, response)
-                                break
-                        }
-                    },
-                )
-                break
-            case ProviderType.MetaMask:
-                try {
-                    await MetaMask.ensureConnectedAndUnlocked()
-                    provider?.send(payload, (error, response) => {
-                        callback(
-                            hasError(error, response)
-                                ? getError(error, response, EthereumErrorType.ERR_SEND_TRANSACTION)
-                                : null,
-                            response,
-                        )
-                        handleTransferTransaction(chainIdFinally, payload)
-                        handleRecentTransaction(chainIdFinally, accountFinally, payload, response)
-                    })
-                } catch (error) {
-                    callback(getError(error, null, EthereumErrorType.ERR_SEND_TRANSACTION))
-                    break
-                }
-                break
-            case ProviderType.WalletConnect:
-                try {
-                    const response = await WalletConnect.sendCustomRequest(payload as IJsonRpcRequest)
-                    callback(null, response)
-                    handleTransferTransaction(chainIdFinally, payload)
-                    handleRecentTransaction(chainIdFinally, accountFinally, payload, response)
-                } catch (error) {
-                    callback(getError(error, null, EthereumErrorType.ERR_SEND_TRANSACTION))
-                }
-                break
-            case ProviderType.Coin98:
-            case ProviderType.WalletLink:
-            case ProviderType.MathWallet:
-                await Injected.ensureConnectedAndUnlocked()
-                Injected.createProvider().send(payload, (error, response) => {
-                    callback(
-                        hasError(error, response)
-                            ? getError(error, response, EthereumErrorType.ERR_SEND_TRANSACTION)
-                            : null,
-                        response,
-                    )
-                    handleTransferTransaction(chainIdFinally, payload)
-                    handleRecentTransaction(chainIdFinally, accountFinally, payload, response)
-                })
-                break
-            case ProviderType.Fortmatic:
-                Fortmatic.createProvider().send(payload, (error, response) => {
-                    callback(
-                        hasError(error, response)
-                            ? getError(error, response, EthereumErrorType.ERR_SEND_TRANSACTION)
-                            : null,
-                        response,
-                    )
-                    handleTransferTransaction(chainIdFinally, payload)
-                    handleRecentTransaction(chainIdFinally, accountFinally, payload, response)
-                })
-                break
-            case ProviderType.CustomNetwork:
-                throw new Error('To be implemented.')
-            default:
-                safeUnreachable(providerType)
-        }
-    }
-
-    async function getTransactionReceipt() {
-        const [hash] = payload.params as [string]
-
-        // redirect receipt queries to tx watcher
-        const transaction = await WalletRPC.getRecentTransaction(chainIdFinally, accountFinally, hash, {
-            receipt: true,
-        })
-
-        try {
-            callback(null, {
-                id: payload.id,
-                jsonrpc: payload.jsonrpc,
-                result: transaction?.receipt ?? null,
-            } as JsonRpcResponse)
-        } catch {
-            callback(null, {
-                id: payload.id,
-                jsonrpc: payload.jsonrpc,
-                result: null,
-            } as JsonRpcResponse)
-        }
-    }
-
-    try {
-        switch (payload.method) {
-            case EthereumMethodType.ETH_ACCOUNTS:
-                callback(null, {
-                    id: payload.id,
-                    jsonrpc: payload.jsonrpc,
-                    result: [accountFinally],
-                } as JsonRpcResponse)
-                break
-            case EthereumMethodType.ETH_GET_TRANSACTION_RECEIPT:
-                await getTransactionReceipt()
-                break
-            case EthereumMethodType.PERSONAL_SIGN:
-                await personalSign()
-                break
-            case EthereumMethodType.ETH_SIGN_TYPED_DATA:
-                await typedDataSign()
-                break
-            case EthereumMethodType.ETH_SEND_TRANSACTION:
-                await sendTransaction()
-                break
-            case EthereumMethodType.MASK_GET_TRANSACTION_RECEIPT:
-                provider.send(
-                    {
-                        ...payload,
-                        method: EthereumMethodType.ETH_GET_TRANSACTION_RECEIPT,
-                    },
-                    callback,
-                )
-                break
-            case EthereumMethodType.MASK_REPLACE_TRANSACTION:
-                if (providerType !== ProviderType.MaskWallet)
-                    throw new Error(`Cannot replace transaction for ${providerType}.`)
-                await sendTransaction()
-                break
-            default:
-                provider.send(payload, callback)
-                break
-        }
-    } catch (error) {
-        callback(getError(error, null, 'Failed to send request.'))
-    }
-}
-
-/**
- * This API redirects requests to the native app.
- * @param payload
- * @param callback
- * @param sendOverrides
- */
-export async function INTERNAL_nativeSend(
-    payload: JsonRpcPayload,
-    callback: (error: Error | null, response?: JsonRpcResponse) => void,
-    { account = currentAccountSettings.value, chainId = currentChainIdSettings.value }: SendOverrides = {},
-) {
-    const chainIdFinally = getPayloadChainId(payload) ?? chainId
-    const accountFinally = getPayloadAccount(payload) ?? account
-    const config = getPayloadConfig(payload)
-    if (config && !config.chainId) config.chainId = chainIdFinally
-    if (payload.method === EthereumMethodType.MASK_GET_TRANSACTION_RECEIPT)
-        payload.method = EthereumMethodType.ETH_GET_TRANSACTION_RECEIPT
-
-    try {
-        let response: JsonRpcResponse | undefined
-        if (nativeAPI?.type === 'Android') {
-            const jsonResponse = await nativeAPI?.api.sendJsonString(JSON.stringify(payload))
-            response = JSON.parse(jsonResponse)
-        } else {
-            const _ = await nativeAPI?.api.send(payload)
-            if (_) {
-                const { error, ...rest } = _
-                response = { ...rest }
-                if (error) response.error = { message: error }
-            }
-        }
-        callback(null, response)
-        if (payload.method === EthereumMethodType.ETH_SEND_TRANSACTION) {
-            handleNonce(chainIdFinally, accountFinally, null, response)
-            handleTransferTransaction(chainIdFinally, payload)
-            handleRecentTransaction(chainIdFinally, accountFinally, payload, response)
-        }
-    } catch (error) {
-        if (!(error instanceof Error)) return
-        callback(error, undefined)
-        if (payload.method === EthereumMethodType.ETH_SEND_TRANSACTION) {
-            handleNonce(chainIdFinally, accountFinally, error, undefined)
-        }
-    }
-}
diff --git a/packages/mask/src/extension/background-script/EthereumServices/web3.ts b/packages/mask/src/extension/background-script/EthereumServices/web3.ts
deleted file mode 100644
index 7ac048b8e847..000000000000
--- a/packages/mask/src/extension/background-script/EthereumServices/web3.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-import { ProviderType } from '@masknet/web3-shared-evm'
-import { unreachable } from '@dimensiondev/kit'
-import * as MaskWallet from './providers/MaskWallet'
-import * as MetaMask from './providers/MetaMask'
-import * as WalletConnect from './providers/WalletConnect'
-import * as Injected from './providers/Injected'
-import * as Fortmatic from './providers/Fortmatic'
-import { currentChainIdSettings, currentProviderSettings } from '../../../plugins/Wallet/settings'
-
-export async function createWeb3({
-    chainId = currentChainIdSettings.value,
-    providerType = currentProviderSettings.value,
-    privKeys = [] as string[],
-} = {}) {
-    switch (providerType) {
-        case ProviderType.MaskWallet:
-            return MaskWallet.createWeb3({
-                chainId,
-                privKeys,
-            })
-        case ProviderType.MetaMask:
-            return MetaMask.createWeb3()
-        case ProviderType.WalletConnect:
-            return WalletConnect.createWeb3({
-                chainId,
-            })
-        case ProviderType.Coin98:
-        case ProviderType.WalletLink:
-        case ProviderType.MathWallet:
-            return Injected.createWeb3()
-        case ProviderType.Fortmatic:
-            return Fortmatic.createWeb3()
-        case ProviderType.CustomNetwork:
-            throw new Error('To be implemented.')
-        default:
-            unreachable(providerType)
-    }
-}
diff --git a/packages/mask/src/extension/background-script/Jobs/StartPluginWorker.ts b/packages/mask/src/extension/background-script/Jobs/StartPluginWorker.ts
index 20a108bdcfde..9ad270d96164 100644
--- a/packages/mask/src/extension/background-script/Jobs/StartPluginWorker.ts
+++ b/packages/mask/src/extension/background-script/Jobs/StartPluginWorker.ts
@@ -1,9 +1,6 @@
 import { startPluginWorker, Plugin } from '@masknet/plugin-infra/background-worker'
-import { createSubscriptionFromAsync } from '@masknet/shared-base'
-import { InMemoryStorages, MaskMessages, PersistentStorages } from '../../../../shared'
 import { createPluginDatabase } from '../../../../background/database/plugin-db'
-import { createPluginHost } from '../../../plugin-infra/host'
-import { Services } from '../../service'
+import { createPluginHost, createSharedContext } from '../../../plugin-infra/host'
 export default function (signal: AbortSignal) {
     startPluginWorker(createPluginHost(signal, createWorkerContext))
 }
@@ -11,22 +8,10 @@ export default function (signal: AbortSignal) {
 function createWorkerContext(pluginID: string, signal: AbortSignal): Plugin.Worker.WorkerContext {
     let storage: Plugin.Worker.DatabaseStorage<any> = undefined!
 
-    const currentPersonaSub = createSubscriptionFromAsync(
-        Services.Settings.getCurrentPersonaIdentifier,
-        undefined,
-        MaskMessages.events.currentPersonaIdentifier.on,
-        signal,
-    )
     return {
+        ...createSharedContext(pluginID, signal),
         getDatabaseStorage() {
             return storage || (storage = createPluginDatabase(pluginID, signal))
         },
-        createKVStorage(type, defaultValues) {
-            if (type === 'memory') return InMemoryStorages.Plugin.createSubScope(pluginID, defaultValues, signal)
-            else return PersistentStorages.Plugin.createSubScope(pluginID, defaultValues, signal)
-        },
-        personaSign: Services.Identity.signWithPersona,
-        walletSign: Services.Ethereum.personalSign,
-        currentPersona: currentPersonaSub,
     }
 }
diff --git a/packages/mask/src/extension/background-script/SettingsService.ts b/packages/mask/src/extension/background-script/SettingsService.ts
index 384325828e4c..552e3ec153a4 100644
--- a/packages/mask/src/extension/background-script/SettingsService.ts
+++ b/packages/mask/src/extension/background-script/SettingsService.ts
@@ -8,18 +8,7 @@ import {
     currentPluginMinimalModeNOTEnabled,
     pluginIDSettings,
 } from '../../settings/settings'
-import { currentDataProviderSettings } from '../../plugins/Trader/settings'
-import {
-    currentAccountSettings,
-    currentNetworkSettings,
-    currentProviderSettings,
-    currentChainIdSettings,
-    currentFungibleAssetDataProviderSettings,
-    currentNonFungibleAssetDataProviderSettings,
-    currentGasOptionsSettings,
-    currentTokenPricesSettings,
-} from '../../plugins/Wallet/settings'
-import { Flags, MaskMessages } from '../../../shared'
+import { MaskMessages } from '../../../shared'
 import { queryPersonasDB } from '../../../background/database/persona/db'
 
 export * from '../../../background/services/settings'
@@ -38,28 +27,6 @@ function create<T>(settings: InternalSettings<T>) {
 export const [getPluginID, setPluginID] = create(pluginIDSettings)
 export const [getTheme, setTheme] = create(appearanceSettings)
 export const [getLanguage, setLanguage] = create(languageSettings)
-export const [getChainId, setChainId] = create(currentChainIdSettings)
-export const [getTokenPrices, setTokenPrices] = create(currentTokenPricesSettings)
-export const [getGasOptions, setGasOptions] = create(currentGasOptionsSettings)
-export const [getGasPrice, setGasPrice] = create(currentGasOptionsSettings)
-export const [getTrendingDataSource, setTrendingDataSource] = create(currentDataProviderSettings)
-export const [getCurrentSelectedWalletProvider, setCurrentSelectedWalletProvider] = create(currentProviderSettings)
-
-export const [getCurrentSelectedWalletNetwork, setCurrentSelectedWalletNetwork] = create(currentNetworkSettings)
-
-export const [getSelectedWalletAddress, setSelectedWalletAddress] = create(currentAccountSettings)
-
-export const [getCurrentPortfolioDataProvider, setCurrentPortfolioDataProvider] = create(
-    currentFungibleAssetDataProviderSettings,
-)
-
-export const [getCurrentCollectibleDataProvider, setCurrentCollectibleDataProvider] = create(
-    currentNonFungibleAssetDataProviderSettings,
-)
-
-export async function getWalletAllowTestChain() {
-    return Flags.wallet_allow_testnet
-}
 
 export async function getCurrentPersonaIdentifier(): Promise<PersonaIdentifier | undefined> {
     await currentPersonaIdentifier.readyPromise
diff --git a/packages/mask/src/extension/dashboard/index.tsx b/packages/mask/src/extension/dashboard/index.tsx
index 79aaec76e3bb..1305a375dec4 100644
--- a/packages/mask/src/extension/dashboard/index.tsx
+++ b/packages/mask/src/extension/dashboard/index.tsx
@@ -1,28 +1,28 @@
 // @ts-ignore in case circle dependency make typescript complains
 import { setService, setPluginMessages, setMessages, setPluginServices, IntegratedDashboard } from '@masknet/dashboard'
+import { startPluginDashboard } from '@masknet/plugin-infra/dashboard'
 import Services from '../service'
 import { WalletRPC, WalletMessages } from '../../plugins/Wallet/messages'
-import { PluginTransakMessages } from '../../plugins/Transak/messages'
-import { PluginTraderMessages, PluginTraderRPC } from '../../plugins/Trader/messages'
-import { PluginPetMessages } from '../../plugins/Pets/messages'
+// import { PluginTransakMessages } from '../../plugins/Transak/messages'
+// import { PluginTraderMessages, PluginTraderRPC } from '../../plugins/Trader/messages'
+// import { PluginPetMessages } from '../../plugins/Pets/messages'
 import { MaskMessages } from '../../utils/messages'
-import { startPluginDashboard } from '@masknet/plugin-infra/dashboard'
-import { createPluginHost } from '../../plugin-infra/host'
+import { createPluginHost, createSharedContext } from '../../plugin-infra/host'
 import type { DashboardPluginMessages, DashboardPluginServices } from '@masknet/shared'
 import { createNormalReactRoot } from '../../utils/createNormalReactRoot'
-import { InMemoryStorages, PersistentStorages } from '../../../shared/kv-storage'
 import { status } from '../../setup.ui'
-import { createSubscriptionFromAsync } from '@masknet/shared-base'
+import { PluginTransakMessages } from '../../plugins/Transak/messages'
+import { PluginTraderMessages } from '../../plugins/Trader/messages'
 
 const msg: DashboardPluginMessages = {
     Wallet: WalletMessages,
     Swap: PluginTraderMessages,
     Transak: PluginTransakMessages,
-    Pets: PluginPetMessages,
+    // Pets: PluginPetMessages,
 }
 const rpc: DashboardPluginServices = {
     Wallet: WalletRPC,
-    Swap: PluginTraderRPC,
+    // Swap: PluginTraderRPC,
 }
 // @ts-ignore To avoid build failure due to the circular project reference
 setService(Services)
@@ -32,23 +32,5 @@ setMessages(MaskMessages)
 setPluginServices(rpc)
 // @ts-ignore
 setPluginMessages(msg)
-startPluginDashboard(
-    createPluginHost(undefined, (pluginID, signal) => {
-        const currentPersonaSub = createSubscriptionFromAsync(
-            Services.Settings.getCurrentPersonaIdentifier,
-            undefined,
-            MaskMessages.events.currentPersonaIdentifier.on,
-            signal,
-        )
-        return {
-            createKVStorage(type, defaultValues) {
-                if (type === 'memory') return InMemoryStorages.Plugin.createSubScope(pluginID, defaultValues, signal)
-                else return PersistentStorages.Plugin.createSubScope(pluginID, defaultValues, signal)
-            },
-            personaSign: Services.Identity.signWithPersona,
-            walletSign: Services.Ethereum.personalSign,
-            currentPersona: currentPersonaSub,
-        }
-    }),
-)
+startPluginDashboard(createPluginHost(undefined, createSharedContext))
 status.then(() => createNormalReactRoot(<IntegratedDashboard />))
diff --git a/packages/mask/src/extension/options-page/DashboardComponents/ActionsBarNFT.tsx b/packages/mask/src/extension/options-page/DashboardComponents/ActionsBarNFT.tsx
index c3dae3f12d68..b99f0123ef89 100644
--- a/packages/mask/src/extension/options-page/DashboardComponents/ActionsBarNFT.tsx
+++ b/packages/mask/src/extension/options-page/DashboardComponents/ActionsBarNFT.tsx
@@ -2,10 +2,12 @@ import { useCallback } from 'react'
 import { IconButton, MenuItem } from '@mui/material'
 import { makeStyles, useStylesExtends } from '@masknet/theme'
 import MoreHorizIcon from '@mui/icons-material/MoreHoriz'
-import { Wallet, ERC721TokenDetailed, EthereumTokenType, useChainIdValid } from '@masknet/web3-shared-evm'
+import { Wallet, SchemaType, ChainId } from '@masknet/web3-shared-evm'
 import { useMenu, useI18N } from '../../../utils'
 import { useModal } from '../DashboardDialogs/Base'
 import { DashboardWalletHideTokenConfirmDialog, DashboardWalletTransferDialogNFT } from '../DashboardDialogs/Wallet'
+import { useChainIdValid } from '@masknet/plugin-infra/web3'
+import type { NonFungibleToken } from '@masknet/web3-shared-base'
 
 const useStyles = makeStyles()((theme) => ({
     more: {
@@ -15,7 +17,7 @@ const useStyles = makeStyles()((theme) => ({
 
 export interface ActionsBarNFT_Props extends withClasses<'more'> {
     wallet: Wallet
-    token: ERC721TokenDetailed
+    token: NonFungibleToken<ChainId, SchemaType>
 }
 
 export function ActionsBarNFT(props: ActionsBarNFT_Props) {
@@ -29,7 +31,7 @@ export function ActionsBarNFT(props: ActionsBarNFT_Props) {
     const [transferDialog, , openTransferDialogOpen] = useModal(DashboardWalletTransferDialogNFT)
     const [hideTokenConfirmDialog, , openHideTokenConfirmDialog] = useModal(DashboardWalletHideTokenConfirmDialog)
     const [menu, openMenu] = useMenu([
-        token.contractDetailed.type === EthereumTokenType.ERC721 ? (
+        token.schema === SchemaType.ERC721 ? (
             <MenuItem key="transfer" disabled={!chainIdValid} onClick={() => openTransferDialogOpen({ token })}>
                 {t('transfer')}
             </MenuItem>
diff --git a/packages/mask/src/extension/options-page/DashboardComponents/CollectibleList/CollectibleCard.tsx b/packages/mask/src/extension/options-page/DashboardComponents/CollectibleList/CollectibleCard.tsx
index 904b03e508ea..41bbf9ac37f7 100644
--- a/packages/mask/src/extension/options-page/DashboardComponents/CollectibleList/CollectibleCard.tsx
+++ b/packages/mask/src/extension/options-page/DashboardComponents/CollectibleList/CollectibleCard.tsx
@@ -1,8 +1,9 @@
 import { Card, Link, useTheme } from '@mui/material'
 import { makeStyles } from '@masknet/theme'
-import { Wallet, ERC721TokenDetailed, resolveCollectibleLink, NonFungibleAssetProvider } from '@masknet/web3-shared-evm'
+import type { Wallet, NonFungibleAssetProvider, ChainId, SchemaType } from '@masknet/web3-shared-evm'
 import { NFTCardStyledAssetPlayer } from '@masknet/shared'
 import { ActionsBarNFT } from '../ActionsBarNFT'
+import type { NonFungibleToken } from '@masknet/web3-shared-base'
 
 const useStyles = makeStyles()((theme) => ({
     root: {
@@ -56,7 +57,7 @@ const useStyles = makeStyles()((theme) => ({
 export interface CollectibleCardProps {
     provider: NonFungibleAssetProvider
     wallet?: Wallet
-    token: ERC721TokenDetailed
+    token: NonFungibleToken<ChainId, SchemaType>
     readonly?: boolean
     renderOrder: number
 }
@@ -66,20 +67,16 @@ export function CollectibleCard(props: CollectibleCardProps) {
     const { classes } = useStyles()
     const theme = useTheme()
     return (
-        <Link
-            target="_blank"
-            rel="noopener noreferrer"
-            className={classes.linkWrapper}
-            href={resolveCollectibleLink(token.contractDetailed.chainId, provider, token)}>
+        <Link target="_blank" rel="noopener noreferrer" className={classes.linkWrapper}>
             <div className={classes.blocker} />
             <Card className={classes.root}>
                 {readonly || !wallet ? null : (
                     <ActionsBarNFT classes={{ more: classes.icon }} wallet={wallet} token={token} />
                 )}
                 <NFTCardStyledAssetPlayer
-                    contractAddress={token.contractDetailed.address}
-                    chainId={token.contractDetailed.chainId}
-                    url={token.info.mediaUrl}
+                    contractAddress={token.address}
+                    chainId={token.chainId}
+                    url={token.metadata?.mediaURL}
                     renderOrder={renderOrder}
                     tokenId={token.tokenId}
                     classes={{
diff --git a/packages/mask/src/extension/options-page/DashboardComponents/CollectibleList/CollectionIcon.tsx b/packages/mask/src/extension/options-page/DashboardComponents/CollectibleList/CollectionIcon.tsx
index 991b8eb01fa6..c11e978ffed2 100644
--- a/packages/mask/src/extension/options-page/DashboardComponents/CollectibleList/CollectionIcon.tsx
+++ b/packages/mask/src/extension/options-page/DashboardComponents/CollectibleList/CollectionIcon.tsx
@@ -4,8 +4,8 @@ import { Image } from '../../../../components/shared/Image'
 import { makeStyles } from '@masknet/theme'
 import { TokenIcon } from '@masknet/shared'
 import classNames from 'classnames'
-import type { ERC721ContractDetailed } from '@masknet/web3-shared-evm'
-import { isSameAddress } from '@masknet/web3-shared-evm'
+import { isSameAddress, NonFungibleToken } from '@masknet/web3-shared-base'
+import type { ChainId, SchemaType } from '@masknet/web3-shared-evm'
 
 const useStyles = makeStyles()((theme) => ({
     collectionWrap: {
@@ -33,7 +33,7 @@ const useStyles = makeStyles()((theme) => ({
 
 interface CollectionIconProps {
     selectedCollection?: string
-    collection?: ERC721ContractDetailed
+    collection?: NonFungibleToken<ChainId, SchemaType>
     onClick?(): void
 }
 
@@ -49,7 +49,7 @@ export const CollectionIcon = memo<CollectionIconProps>(({ collection, onClick,
             PopperProps={{
                 disablePortal: true,
             }}
-            title={collection.name}
+            title={collection.metadata?.name ?? ''}
             arrow>
             <Box
                 className={classNames(
@@ -57,18 +57,18 @@ export const CollectionIcon = memo<CollectionIconProps>(({ collection, onClick,
                     isSameAddress(collection.address, selectedCollection) ? classes.selected : '',
                 )}
                 onClick={onClick}>
-                {collection.iconURL ? (
+                {collection.collection?.iconURL ? (
                     <Image
                         width={24}
                         height={24}
                         component="img"
                         className={classes.collectionImg}
-                        src={collection.iconURL}
+                        src={collection.collection?.iconURL}
                     />
                 ) : (
                     <TokenIcon
                         classes={{ icon: classes.collectionImg }}
-                        name={collection.name}
+                        name={collection.collection?.name}
                         address={collection.address}
                     />
                 )}
diff --git a/packages/mask/src/extension/options-page/DashboardComponents/CollectibleList/index.tsx b/packages/mask/src/extension/options-page/DashboardComponents/CollectibleList/index.tsx
index 5ce0d2948847..c866f0fcd77b 100644
--- a/packages/mask/src/extension/options-page/DashboardComponents/CollectibleList/index.tsx
+++ b/packages/mask/src/extension/options-page/DashboardComponents/CollectibleList/index.tsx
@@ -1,27 +1,15 @@
-import { createContext, useEffect, useMemo, useState } from 'react'
-import { useValueRef } from '@masknet/shared-base-ui'
-import {
-    AddressName,
-    ChainId,
-    ERC721ContractDetailed,
-    ERC721TokenDetailed,
-    isSameAddress,
-    NonFungibleAssetProvider,
-    SocketState,
-    useCollectibles,
-    useCollections,
-    Wallet,
-} from '@masknet/web3-shared-evm'
-import { Box, Button, Skeleton, Stack, styled, Typography } from '@mui/material'
-import { makeStyles, useStylesExtends } from '@masknet/theme'
-import { currentNonFungibleAssetDataProviderSettings } from '../../../../plugins/Wallet/settings'
-import { useI18N } from '../../../../utils'
+import { createContext } from 'react'
+import type { IdentityAddress, NonFungibleAsset } from '@masknet/web3-shared-base'
+import type { ChainId, NonFungibleAssetProvider, SchemaType, Wallet } from '@masknet/web3-shared-evm'
+import { Button, styled, Typography } from '@mui/material'
+import { makeStyles } from '@masknet/theme'
 import { CollectibleCard } from './CollectibleCard'
-import { WalletMessages } from '@masknet/plugin-wallet'
-import { CollectionIcon } from './CollectionIcon'
-import { uniqBy } from 'lodash-unified'
-import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown'
-import { ReversedAddress } from '@masknet/shared'
+// import { useI18N } from '../../../../utils'
+// import { CollectionIcon } from './CollectionIcon'
+// import { uniqBy } from 'lodash-unified'
+// import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown'
+// import { ReversedAddress } from '@masknet/shared'
+// import { useNonFungibleAssets } from '@masknet/plugin-infra/web3'
 
 export const CollectibleContext = createContext<{
     collectiblesRetry: () => void
@@ -115,7 +103,7 @@ const useStyles = makeStyles()((theme) => ({
 interface CollectibleItemProps {
     provider: NonFungibleAssetProvider
     wallet?: Wallet
-    token: ERC721TokenDetailed
+    token: NonFungibleAsset<ChainId, SchemaType>
     readonly?: boolean
     renderOrder: number
 }
@@ -134,7 +122,7 @@ function CollectibleItem(props: CollectibleItemProps) {
             />
             <div className={classes.description}>
                 <Typography className={classes.name} color="textPrimary" variant="body2">
-                    {token.info.name}
+                    {token.metadata?.name}
                 </Typography>
             </div>
         </div>
@@ -144,7 +132,7 @@ function CollectibleItem(props: CollectibleItemProps) {
 interface CollectibleListUIProps extends withClasses<'empty' | 'button' | 'text'> {
     provider: NonFungibleAssetProvider
     wallet?: Wallet
-    collectibles: ERC721TokenDetailed[]
+    collectibles: Array<NonFungibleAsset<ChainId, SchemaType>>
     loading: boolean
     collectiblesRetry: () => void
     error: string | undefined
@@ -152,268 +140,277 @@ interface CollectibleListUIProps extends withClasses<'empty' | 'button' | 'text'
     hasRetry?: boolean
 }
 function CollectibleListUI(props: CollectibleListUIProps) {
-    const { provider, wallet, collectibles, loading, collectiblesRetry, error, readonly, hasRetry = true } = props
-    const { t } = useI18N()
-    const classes = useStylesExtends(useStyles(), props)
+    return null
+    // const { provider, wallet, collectibles, loading, collectiblesRetry, error, readonly, hasRetry = true } = props
+    // const { t } = useI18N()
+    // const classes = useStylesExtends(useStyles(), props)
 
-    useEffect(() => WalletMessages.events.erc721TokensUpdated.on(collectiblesRetry))
+    // // useEffect(() => WalletMessages.events.erc721TokensUpdated.on(collectiblesRetry))
 
-    return (
-        <CollectibleContext.Provider value={{ collectiblesRetry }}>
-            <Box className={classes.container}>
-                {loading && (
-                    <Box className={classes.root}>
-                        {Array.from({ length: 3 })
-                            .fill(0)
-                            .map((_, i) => (
-                                <Box className={classes.card} display="flex" flexDirection="column" key={i}>
-                                    <Skeleton animation="wave" variant="rectangular" width={172} height={172} />
-                                    <Skeleton
-                                        animation="wave"
-                                        variant="text"
-                                        width={172}
-                                        height={20}
-                                        style={{ marginTop: 4 }}
-                                    />
-                                </Box>
-                            ))}
-                    </Box>
-                )}
-                {error || (collectibles.length === 0 && !loading) ? (
-                    <Box className={classes.text}>
-                        <Typography color="textSecondary">{t('dashboard_no_collectible_found')}</Typography>
-                        {hasRetry ? (
-                            <Button className={classes.button} variant="text" onClick={() => collectiblesRetry()}>
-                                {t('plugin_collectible_retry')}
-                            </Button>
-                        ) : null}
-                    </Box>
-                ) : (
-                    <Box className={classes.root}>
-                        {collectibles.map((token, index) => (
-                            <CollectibleItem
-                                renderOrder={index}
-                                token={token}
-                                provider={provider}
-                                wallet={wallet}
-                                readonly={readonly}
-                                key={index}
-                            />
-                        ))}
-                    </Box>
-                )}
-            </Box>
-        </CollectibleContext.Provider>
-    )
+    // return (
+    //     <CollectibleContext.Provider value={{ collectiblesRetry }}>
+    //         <Box className={classes.container}>
+    //             {loading && (
+    //                 <Box className={classes.root}>
+    //                     {Array.from({ length: 3 })
+    //                         .fill(0)
+    //                         .map((_, i) => (
+    //                             <Box className={classes.card} display="flex" flexDirection="column" key={i}>
+    //                                 <Skeleton animation="wave" variant="rectangular" width={172} height={172} />
+    //                                 <Skeleton
+    //                                     animation="wave"
+    //                                     variant="text"
+    //                                     width={172}
+    //                                     height={20}
+    //                                     style={{ marginTop: 4 }}
+    //                                 />
+    //                             </Box>
+    //                         ))}
+    //                 </Box>
+    //             )}
+    //             {error || (collectibles.length === 0 && !loading) ? (
+    //                 <Box className={classes.text}>
+    //                     <Typography color="textSecondary">{t('dashboard_no_collectible_found')}</Typography>
+    //                     {hasRetry ? (
+    //                         <Button className={classes.button} variant="text" onClick={() => collectiblesRetry()}>
+    //                             {t('plugin_collectible_retry')}
+    //                         </Button>
+    //                     ) : null}
+    //                 </Box>
+    //             ) : (
+    //                 <Box className={classes.root}>
+    //                     {collectibles.map((token, index) => (
+    //                         <CollectibleItem
+    //                             renderOrder={index}
+    //                             token={token}
+    //                             provider={provider}
+    //                             wallet={wallet}
+    //                             readonly={readonly}
+    //                             key={index}
+    //                         />
+    //                     ))}
+    //                 </Box>
+    //             )}
+    //         </Box>
+    //     </CollectibleContext.Provider>
+    // )
 }
 
 export interface CollectibleListProps extends withClasses<'empty' | 'button'> {
     address: string
-    collectibles: ERC721TokenDetailed[]
+    collectibles: Array<NonFungibleAsset<ChainId, SchemaType>>
     error?: string
     loading: boolean
     retry(): void
 }
 
 export function CollectibleList(props: CollectibleListProps) {
-    const { address, collectibles, error, loading, retry } = props
-    const provider = useValueRef(currentNonFungibleAssetDataProviderSettings)
-    const classes = props.classes ?? {}
+    return null
+    // const { address, collectibles, error, loading, retry } = props
+    // const classes = props.classes ?? {}
 
-    return (
-        <CollectibleListUI
-            classes={classes}
-            provider={provider}
-            collectibles={collectibles}
-            loading={loading}
-            collectiblesRetry={retry}
-            error={error}
-            readonly
-            hasRetry={!!address}
-        />
-    )
+    // return (
+    //     <CollectibleListUI
+    //         classes={classes}
+    //         // TODO: create currentNonFungibleAssetDataProviderSettings for collectible plugin
+    //         // provider={}
+    //         collectibles={collectibles}
+    //         loading={loading}
+    //         collectiblesRetry={retry}
+    //         error={error}
+    //         readonly
+    //         hasRetry={!!address}
+    //     />
+    // )
 }
 
 export function CollectionList({
     addressName,
     onSelectAddress,
 }: {
-    addressName: AddressName
+    addressName: IdentityAddress
     onSelectAddress: (event: React.MouseEvent<HTMLButtonElement>) => void
 }) {
-    const chainId = ChainId.Mainnet
-    const { t } = useI18N()
-    const { classes } = useStyles()
-    const [selectedCollection, setSelectedCollection] = useState<ERC721ContractDetailed | 'all' | undefined>('all')
-    const { resolvedAddress: address } = addressName
+    return null
+    // const chainId = ChainId.Mainnet
+    // const { t } = useI18N()
+    // const { classes } = useStyles()
+    // const [selectedCollection, setSelectedCollection] = useState<
+    //     NonFungibleAsset<ChainId, SchemaType> | 'all' | undefined
+    // >('all')
+    // const { address } = addressName
 
-    useEffect(() => {
-        setSelectedCollection('all')
-    }, [address])
+    // useEffect(() => {
+    //     setSelectedCollection('all')
+    // }, [address])
 
-    const { data: collectionsFormRemote } = useCollections(address, chainId)
-    const {
-        data: collectibles,
-        state: loadingCollectibleDone,
-        retry: retryFetchCollectible,
-    } = useCollectibles(address, chainId)
+    // const { value: collectionsFormRemote } = useNonFungibleAssets(NetworkPluginID.PLUGIN_EVM, SchemaType.ERC721, {
+    //     account: address,
+    // })
+    // const {
+    //     value: collectibles,
+    //     state: loadingCollectibleDone,
+    //     retry: retryFetchCollectible,
+    // } = useNonFungibleAssets(NetworkPluginID.PLUGIN_EVM, address, chainId)
 
-    const isLoading = loadingCollectibleDone !== SocketState.done
+    // const isLoading = loadingCollectibleDone !== SocketState.done
 
-    const renderWithRarible = useMemo(() => {
-        if (isLoading) return []
-        return collectibles.filter((item) => !item.collection)
-    }, [collectibles?.length])
+    // const renderWithRarible = useMemo(() => {
+    //     if (isLoading) return []
+    //     return collectibles.filter((item) => !item.collection)
+    // }, [collectibles?.length])
 
-    const renderCollectibles = useMemo(() => {
-        if (selectedCollection === 'all') return collectibles
-        if (!selectedCollection) return collectibles.filter((x) => !x.collection)
+    // const renderCollectibles = useMemo(() => {
+    //     if (selectedCollection === 'all') return collectibles
+    //     if (!selectedCollection) return collectibles.filter((x) => !x.collection)
 
-        return (collectibles ?? []).filter((x) => {
-            return isSameAddress(selectedCollection.address, x.contractDetailed.address)
-        })
-    }, [selectedCollection, collectibles.length])
+    //     return (collectibles ?? []).filter((x) => {
+    //         return isSameAddress(selectedCollection.address, x.contractDetailed.address)
+    //     })
+    // }, [selectedCollection, collectibles.length])
 
-    const collections = useMemo(() => {
-        return uniqBy(
-            collectibles.map((x) => x.contractDetailed),
-            (x) => x.address.toLowerCase(),
-        ).map((x) => {
-            const item = collectionsFormRemote.find((c) => isSameAddress(c.address, x.address))
-            if (item) {
-                return {
-                    name: item.name,
-                    symbol: item.name,
-                    baseURI: item.iconURL,
-                    iconURL: item.iconURL,
-                    address: item.address,
-                } as ERC721ContractDetailed
-            }
-            return x
-        })
-    }, [collectibles.length, collectionsFormRemote.length])
+    // const collections = useMemo(() => {
+    //     return uniqBy(
+    //         collectibles.map((x) => x.contractDetailed),
+    //         (x) => x.address.toLowerCase(),
+    //     ).map((x) => {
+    //         const item = collectionsFormRemote.find((c) => isSameAddress(c.address, x.address))
+    //         if (item) {
+    //             return {
+    //                 id: item.address,
+    //                 chainId: ChainId.Mainnet,
+    //                 schema: SchemaType.ERC721,
+    //                 name: item.name,
+    //                 symbol: item.name,
+    //                 logoURL: item.iconURL,
+    //                 address: item.address,
+    //             } as NonFungibleTokenContract<ChainId, SchemaType>
+    //         }
+    //         return x
+    //     })
+    // }, [collectibles.length, collectionsFormRemote.length])
 
-    if (!isLoading && !collectibles.length)
-        return (
-            <>
-                {addressName && (
-                    <Stack direction="row" height={42} justifyContent="flex-end" alignItems="center" px={2}>
-                        <Box display="flex" alignItems="center" justifyContent="flex-end" flexWrap="wrap">
-                            <Button
-                                onClick={onSelectAddress}
-                                className={classes.button}
-                                variant="outlined"
-                                size="small">
-                                <ReversedAddress address={addressName.resolvedAddress} />
-                                <KeyboardArrowDownIcon />
-                            </Button>
-                        </Box>
-                    </Stack>
-                )}
-                <Box display="flex" alignItems="center" justifyContent="center">
-                    <Typography color="textPrimary" sx={{ paddingTop: 4, paddingBottom: 4 }}>
-                        {t('dashboard_no_collectible_found')}
-                    </Typography>
-                </Box>
-            </>
-        )
+    // if (!isLoading && !collectibles.length)
+    //     return (
+    //         <>
+    //             {addressName && (
+    //                 <Stack direction="row" height={42} justifyContent="flex-end" alignItems="center" px={2}>
+    //                     <Box display="flex" alignItems="center" justifyContent="flex-end" flexWrap="wrap">
+    //                         <Button
+    //                             onClick={onSelectAddress}
+    //                             className={classes.button}
+    //                             variant="outlined"
+    //                             size="small">
+    //                             <ReversedAddress address={addressName.address} />
+    //                             <KeyboardArrowDownIcon />
+    //                         </Button>
+    //                     </Box>
+    //                 </Stack>
+    //             )}
+    //             <Box display="flex" alignItems="center" justifyContent="center">
+    //                 <Typography color="textPrimary" sx={{ paddingTop: 4, paddingBottom: 4 }}>
+    //                     {t('dashboard_no_collectible_found')}
+    //                 </Typography>
+    //             </Box>
+    //         </>
+    //     )
 
-    return (
-        <Box>
-            <Stack direction="row" justifyContent="space-between" alignItems="center" px={2}>
-                <Stack display="inline-flex">
-                    <AllNetworkButton className={classes.networkSelected} onClick={() => setSelectedCollection('all')}>
-                        ALL
-                    </AllNetworkButton>
-                    <Typography align="center" color={(theme) => theme.palette.primary.main} fontSize="12px">
-                        {t('dashboard_collectible_menu_all', {
-                            count: collectibles.length,
-                        })}
-                    </Typography>
-                </Stack>
-                <Box display="flex" alignItems="center" justifyContent="flex-end" flexWrap="wrap">
-                    <Button onClick={onSelectAddress} className={classes.button} variant="outlined" size="small">
-                        <ReversedAddress address={addressName.resolvedAddress} />
-                        <KeyboardArrowDownIcon />
-                    </Button>
-                </Box>
-            </Stack>
-            <Stack spacing={1} direction="row" mt={1.5}>
-                <Box sx={{ flexGrow: 1 }}>
-                    <Box>
-                        {!selectedCollection && selectedCollection !== 'all' && (
-                            <Box display="flex" alignItems="center">
-                                <Typography
-                                    className={classes.name}
-                                    color="textPrimary"
-                                    variant="body2"
-                                    sx={{ fontSize: '16px' }}>
-                                    Other
-                                    {loadingCollectibleDone && renderCollectibles.length
-                                        ? `(${renderCollectibles.length})`
-                                        : null}
-                                </Typography>
-                            </Box>
-                        )}
-                        {selectedCollection && selectedCollection !== 'all' && (
-                            <Box display="flex" alignItems="center">
-                                <CollectionIcon collection={selectedCollection} />
-                                <Typography
-                                    className={classes.name}
-                                    color="textPrimary"
-                                    variant="body2"
-                                    sx={{ fontSize: '16px' }}>
-                                    {selectedCollection.name}
-                                    {loadingCollectibleDone && renderCollectibles.length
-                                        ? `(${renderCollectibles.length})`
-                                        : null}
-                                </Typography>
-                            </Box>
-                        )}
-                        <CollectibleList
-                            address={address}
-                            retry={retryFetchCollectible}
-                            collectibles={renderCollectibles}
-                            loading={loadingCollectibleDone !== SocketState.done && renderCollectibles.length === 0}
-                        />
-                    </Box>
-                </Box>
-                <Box>
-                    {collections.map((x, i) => {
-                        return (
-                            <Box
-                                display="flex"
-                                key={i}
-                                alignItems="center"
-                                justifyContent="center"
-                                sx={{ marginTop: '8px', marginBottom: '12px', minWidth: 30, maxHeight: 24 }}>
-                                <CollectionIcon
-                                    selectedCollection={
-                                        selectedCollection === 'all' ? undefined : selectedCollection?.address
-                                    }
-                                    collection={x}
-                                    onClick={() => setSelectedCollection(x)}
-                                />
-                            </Box>
-                        )
-                    })}
-                    {!!renderWithRarible.length && (
-                        <Box
-                            key="other"
-                            display="flex"
-                            alignItems="center"
-                            justifyContent="center"
-                            sx={{ marginTop: '8px', marginBottom: '12px', minWidth: 30, maxHeight: 24 }}>
-                            <CollectionIcon
-                                selectedCollection={
-                                    selectedCollection === 'all' ? undefined : selectedCollection?.address
-                                }
-                                onClick={() => setSelectedCollection(undefined)}
-                            />
-                        </Box>
-                    )}
-                </Box>
-            </Stack>
-        </Box>
-    )
+    // return (
+    //     <Box>
+    //         <Stack direction="row" justifyContent="space-between" alignItems="center" px={2}>
+    //             <Stack display="inline-flex">
+    //                 <AllNetworkButton className={classes.networkSelected} onClick={() => setSelectedCollection('all')}>
+    //                     ALL
+    //                 </AllNetworkButton>
+    //                 <Typography align="center" color={(theme) => theme.palette.primary.main} fontSize="12px">
+    //                     {t('dashboard_collectible_menu_all', {
+    //                         count: collectibles.length,
+    //                     })}
+    //                 </Typography>
+    //             </Stack>
+    //             <Box display="flex" alignItems="center" justifyContent="flex-end" flexWrap="wrap">
+    //                 <Button onClick={onSelectAddress} className={classes.button} variant="outlined" size="small">
+    //                     <ReversedAddress address={addressName.address} />
+    //                     <KeyboardArrowDownIcon />
+    //                 </Button>
+    //             </Box>
+    //         </Stack>
+    //         <Stack spacing={1} direction="row" mt={1.5}>
+    //             <Box sx={{ flexGrow: 1 }}>
+    //                 <Box>
+    //                     {!selectedCollection && selectedCollection !== 'all' && (
+    //                         <Box display="flex" alignItems="center">
+    //                             <Typography
+    //                                 className={classes.name}
+    //                                 color="textPrimary"
+    //                                 variant="body2"
+    //                                 sx={{ fontSize: '16px' }}>
+    //                                 Other
+    //                                 {loadingCollectibleDone && renderCollectibles.length
+    //                                     ? `(${renderCollectibles.length})`
+    //                                     : null}
+    //                             </Typography>
+    //                         </Box>
+    //                     )}
+    //                     {selectedCollection && selectedCollection !== 'all' && (
+    //                         <Box display="flex" alignItems="center">
+    //                             <CollectionIcon collection={selectedCollection} />
+    //                             <Typography
+    //                                 className={classes.name}
+    //                                 color="textPrimary"
+    //                                 variant="body2"
+    //                                 sx={{ fontSize: '16px' }}>
+    //                                 {selectedCollection.metadata?.name}
+    //                                 {loadingCollectibleDone && renderCollectibles.length
+    //                                     ? `(${renderCollectibles.length})`
+    //                                     : null}
+    //                             </Typography>
+    //                         </Box>
+    //                     )}
+    //                     <CollectibleList
+    //                         address={address}
+    //                         retry={retryFetchCollectible}
+    //                         collectibles={renderCollectibles}
+    //                         loading={renderCollectibles.length === 0}
+    //                     />
+    //                 </Box>
+    //             </Box>
+    //             <Box>
+    //                 {collections.map((x, i) => {
+    //                     return (
+    //                         <Box
+    //                             display="flex"
+    //                             key={i}
+    //                             alignItems="center"
+    //                             justifyContent="center"
+    //                             sx={{ marginTop: '8px', marginBottom: '12px', minWidth: 30, maxHeight: 24 }}>
+    //                             <CollectionIcon
+    //                                 selectedCollection={
+    //                                     selectedCollection === 'all' ? undefined : selectedCollection?.address
+    //                                 }
+    //                                 collection={x}
+    //                                 onClick={() => setSelectedCollection(x)}
+    //                             />
+    //                         </Box>
+    //                     )
+    //                 })}
+    //                 {!!renderWithRarible.length && (
+    //                     <Box
+    //                         key="other"
+    //                         display="flex"
+    //                         alignItems="center"
+    //                         justifyContent="center"
+    //                         sx={{ marginTop: '8px', marginBottom: '12px', minWidth: 30, maxHeight: 24 }}>
+    //                         <CollectionIcon
+    //                             selectedCollection={
+    //                                 selectedCollection === 'all' ? undefined : selectedCollection?.address
+    //                             }
+    //                             onClick={() => setSelectedCollection(undefined)}
+    //                         />
+    //                     </Box>
+    //                 )}
+    //             </Box>
+    //         </Stack>
+    //     </Box>
+    // )
 }
diff --git a/packages/mask/src/extension/options-page/DashboardDialogs/Wallet/HideTokenConfirm.tsx b/packages/mask/src/extension/options-page/DashboardDialogs/Wallet/HideTokenConfirm.tsx
index 38a48bd74250..b6776c6e93a2 100644
--- a/packages/mask/src/extension/options-page/DashboardDialogs/Wallet/HideTokenConfirm.tsx
+++ b/packages/mask/src/extension/options-page/DashboardDialogs/Wallet/HideTokenConfirm.tsx
@@ -1,49 +1,53 @@
 import { Trash2 as TrashIcon } from 'react-feather'
 import { Button, Box, BoxProps } from '@mui/material'
-import { unreachable } from '@dimensiondev/kit'
-import {
-    ERC20TokenDetailed,
-    ERC721TokenDetailed,
-    EthereumTokenType,
-    FungibleTokenDetailed,
-    isNativeTokenAddress,
-} from '@masknet/web3-shared-evm'
+import { SchemaType, isNativeTokenAddress, ChainId } from '@masknet/web3-shared-evm'
 import { useSnackbarCallback } from '@masknet/shared'
-import { WalletRPC } from '../../../../plugins/Wallet/messages'
 import { useI18N } from '../../../../utils'
 import { DebounceButton } from '../../DashboardComponents/ActionButton'
 import { DashboardDialogCore, DashboardDialogWrapper, WrappedDialogProps } from '../Base'
 import type { Wallet } from '@masknet/web3-shared-evm'
 import { makeStyles } from '@masknet/theme'
 import classNames from 'classnames'
+import type { FungibleToken, NonFungibleToken } from '@masknet/web3-shared-base'
 
 export function DashboardWalletHideTokenConfirmDialog(
-    props: WrappedDialogProps<{ wallet: Wallet; token: FungibleTokenDetailed | ERC721TokenDetailed }>,
+    props: WrappedDialogProps<{
+        wallet: Wallet
+        token: FungibleToken<ChainId, SchemaType> | NonFungibleToken<ChainId, SchemaType>
+    }>,
 ) {
     const { wallet, token } = props.ComponentProps!
     const { t } = useI18N()
     const tokenAddress =
-        (token as FungibleTokenDetailed).address ?? (token as ERC721TokenDetailed).contractDetailed.address
-    const tokenName = (token as FungibleTokenDetailed).name ?? (token as ERC721TokenDetailed).info.name
+        (token as FungibleToken<ChainId, SchemaType.Native | SchemaType.ERC20>).address ??
+        (token as NonFungibleToken<ChainId, SchemaType>).contract?.address
+    const tokenName =
+        (token as FungibleToken<ChainId, SchemaType.Native | SchemaType.ERC20>).name ??
+        (token as NonFungibleToken<ChainId, SchemaType>).metadata?.name
     const onConfirm = useSnackbarCallback(
-        () => {
-            const type = ((token as FungibleTokenDetailed).type ??
-                (token as ERC721TokenDetailed).contractDetailed.type) as
-                | EthereumTokenType.Native
-                | EthereumTokenType.ERC20
-                | EthereumTokenType.ERC721
-            switch (type) {
-                case EthereumTokenType.Native:
-                    throw new Error('Unable to hide the native token.')
-                case EthereumTokenType.ERC20:
-                    return WalletRPC.updateWalletToken(wallet.address, token as ERC20TokenDetailed, {
-                        strategy: 'block',
-                    })
-                case EthereumTokenType.ERC721:
-                    return WalletRPC.removeToken(token as ERC721TokenDetailed)
-                default:
-                    unreachable(type)
-            }
+        async () => {
+            return
+            // const schema = ((token as FungibleToken<ChainId, SchemaType.Native | SchemaType.ERC20>).schema ??
+            //     (token as NonFungibleToken<ChainId, SchemaType.ERC721>).schema) as
+            //     | SchemaType.Native
+            //     | SchemaType.ERC20
+            //     | SchemaType.ERC721
+            // switch (schema) {
+            //     case SchemaType.Native:
+            //         throw new Error('Unable to hide the native token.')
+            //     case SchemaType.ERC20:
+            //         return WalletRPC.updateWalletToken(
+            //             wallet.address,
+            //             token as FungibleToken<ChainId, SchemaType.ERC20>,
+            //             {
+            //                 strategy: 'block',
+            //             },
+            //         )
+            //     case SchemaType.ERC721:
+            //         return WalletRPC.removeToken(token as NonFungibleToken<ChainId, SchemaType.ERC721>)
+            //     default:
+            //         unreachable(schema)
+            // }
         },
         [wallet.address, token],
         props.onClose,
diff --git a/packages/mask/src/extension/options-page/DashboardDialogs/Wallet/TransferNFT.tsx b/packages/mask/src/extension/options-page/DashboardDialogs/Wallet/TransferNFT.tsx
index f6983243d16a..bd504b825864 100644
--- a/packages/mask/src/extension/options-page/DashboardDialogs/Wallet/TransferNFT.tsx
+++ b/packages/mask/src/extension/options-page/DashboardDialogs/Wallet/TransferNFT.tsx
@@ -1,14 +1,16 @@
-import { useOpenShareTxDialog } from '@masknet/shared'
-import { makeStyles } from '@masknet/theme'
-import { ERC721TokenDetailed, useTokenTransferCallback } from '@masknet/web3-shared-evm'
 import { Button, TextField } from '@mui/material'
+import { makeStyles } from '@masknet/theme'
 import { useCallback, useContext, useMemo, useState } from 'react'
 import { EthereumAddress } from 'wallet.ts'
+import type { ChainId, SchemaType } from '@masknet/web3-shared-evm'
+import { useI18N } from '../../../../utils'
 import { Image } from '../../../../components/shared/Image'
 import { MaskIconOutlined } from '../../../../resources/MaskIcon'
-import { useI18N } from '../../../../utils'
 import { CollectibleContext } from '../../DashboardComponents/CollectibleList'
 import { DashboardDialogCore, DashboardDialogWrapper, WrappedDialogProps } from '../Base'
+import type { NonFungibleToken } from '@masknet/web3-shared-base'
+import { useTokenTransferCallback } from '@masknet/plugin-infra/web3-evm'
+import { useOpenShareTxDialog } from '@masknet/shared'
 
 const useTransferDialogStylesNFT = makeStyles()((theme) => ({
     root: {
@@ -24,7 +26,9 @@ const useTransferDialogStylesNFT = makeStyles()((theme) => ({
     },
 }))
 
-export function DashboardWalletTransferDialogNFT(props: WrappedDialogProps<{ token: ERC721TokenDetailed }>) {
+export function DashboardWalletTransferDialogNFT(
+    props: WrappedDialogProps<{ token: NonFungibleToken<ChainId, SchemaType> }>,
+) {
     const { token } = props.ComponentProps!
     const { onClose } = props
 
@@ -35,10 +39,7 @@ export function DashboardWalletTransferDialogNFT(props: WrappedDialogProps<{ tok
     const { collectiblesRetry } = useContext(CollectibleContext)
 
     // #region transfer tokens
-    const [{ loading }, transferCallback] = useTokenTransferCallback(
-        token.contractDetailed.type,
-        token.contractDetailed.address,
-    )
+    const [{ loading }, transferCallback] = useTokenTransferCallback(token.schema, token.address)
 
     const openShareTxDialog = useOpenShareTxDialog()
     const onTransfer = useCallback(async () => {
@@ -66,13 +67,13 @@ export function DashboardWalletTransferDialogNFT(props: WrappedDialogProps<{ tok
             <DashboardDialogWrapper
                 primary={t('wallet_transfer_title')}
                 icon={
-                    token.info.mediaUrl ? (
+                    token.metadata?.mediaURL ? (
                         <Image
                             component="img"
                             width={160}
                             height={220}
                             style={{ objectFit: 'contain' }}
-                            src={token.info.mediaUrl}
+                            src={token.metadata.mediaURL}
                         />
                     ) : (
                         <MaskIconOutlined className={classes.placeholder} />
diff --git a/packages/mask/src/extension/popups/UI.tsx b/packages/mask/src/extension/popups/UI.tsx
index 72f0d9e9b5ad..56cbec3aa866 100644
--- a/packages/mask/src/extension/popups/UI.tsx
+++ b/packages/mask/src/extension/popups/UI.tsx
@@ -5,8 +5,6 @@ import { PopupRoutes } from '@masknet/shared-base'
 import { usePopupFullPageTheme } from '../../utils/theme/useClassicMaskFullPageTheme'
 import '../../social-network-adaptor/browser-action'
 import { PopupContext } from './hook/usePopupContext'
-import { Web3Provider } from '@masknet/web3-shared-evm'
-import { PopupWeb3Context } from '../../web3/context'
 import { PopupFrame } from './components/PopupFrame'
 import { MaskUIRoot } from '../../UIRoot'
 import { PageTitleContext } from './context'
@@ -31,31 +29,29 @@ export default function Popups() {
     return (
         <MaskUIRoot useTheme={usePopupTheme} kind="page">
             <PopupSnackbarProvider>
-                <Web3Provider value={PopupWeb3Context}>
-                    <PopupContext.Provider>
-                        <PageTitleContext.Provider value={{ title, setTitle }}>
-                            <HashRouter>
-                                <Routes>
-                                    <Route path={PopupRoutes.Personas + '/*'} element={frame(<Personas />)} />
-                                    <Route path={PopupRoutes.Wallet + '/*'} element={frame(<Wallet />)} />
-                                    <Route path={PopupRoutes.Swap} element={<SwapPage />} />
-                                    <Route path={PopupRoutes.RequestPermission} element={<RequestPermissionPage />} />
-                                    <Route
-                                        path={PopupRoutes.PermissionAwareRedirect}
-                                        element={<PermissionAwareRedirect />}
-                                    />
-                                    <Route
-                                        path={PopupRoutes.ThirdPartyRequestPermission}
-                                        element={<ThirdPartyRequestPermission />}
-                                    />
-                                    <Route path="*" element={<Navigate replace to={PopupRoutes.Personas} />} />
-                                </Routes>
-                                {/* TODO: Should only load plugins when the page is plugin-aware. */}
-                                <PluginRender />
-                            </HashRouter>
-                        </PageTitleContext.Provider>
-                    </PopupContext.Provider>
-                </Web3Provider>
+                <PopupContext.Provider>
+                    <PageTitleContext.Provider value={{ title, setTitle }}>
+                        <HashRouter>
+                            <Routes>
+                                <Route path={PopupRoutes.Personas + '/*'} element={frame(<Personas />)} />
+                                <Route path={PopupRoutes.Wallet + '/*'} element={frame(<Wallet />)} />
+                                <Route path={PopupRoutes.Swap} element={<SwapPage />} />
+                                <Route path={PopupRoutes.RequestPermission} element={<RequestPermissionPage />} />
+                                <Route
+                                    path={PopupRoutes.PermissionAwareRedirect}
+                                    element={<PermissionAwareRedirect />}
+                                />
+                                <Route
+                                    path={PopupRoutes.ThirdPartyRequestPermission}
+                                    element={<ThirdPartyRequestPermission />}
+                                />
+                                <Route path="*" element={<Navigate replace to={PopupRoutes.Personas} />} />
+                            </Routes>
+                            {/* TODO: Should only load plugins when the page is plugin-aware. */}
+                            <PluginRender />
+                        </HashRouter>
+                    </PageTitleContext.Provider>
+                </PopupContext.Provider>
             </PopupSnackbarProvider>
         </MaskUIRoot>
     )
diff --git a/packages/mask/src/extension/popups/components/NetworkSelector/index.tsx b/packages/mask/src/extension/popups/components/NetworkSelector/index.tsx
index 61f2aa5dfe41..90c6d22eea49 100644
--- a/packages/mask/src/extension/popups/components/NetworkSelector/index.tsx
+++ b/packages/mask/src/extension/popups/components/NetworkSelector/index.tsx
@@ -2,13 +2,20 @@ import { memo, useCallback } from 'react'
 import { Box, MenuItem, Typography } from '@mui/material'
 import { makeStyles } from '@masknet/theme'
 import { Flags } from '../../../../../shared'
-import { ChainId, ProviderType, useAccount, useChainId } from '@masknet/web3-shared-evm'
-import { getRegisteredWeb3Networks, NetworkPluginID, Web3Plugin } from '@masknet/plugin-infra/web3'
-import { currentMaskWalletAccountSettings, currentProviderSettings } from '../../../../plugins/Wallet/settings'
+import { ChainId, ProviderType, NetworkType } from '@masknet/web3-shared-evm'
+import {
+    getRegisteredWeb3Networks,
+    useAccount,
+    useChainId,
+    Web3Helper,
+    useWeb3State,
+    useProviderType,
+} from '@masknet/plugin-infra/web3'
+import { currentMaskWalletAccountSettings } from '../../../../plugins/Wallet/settings'
 import { ChainIcon, useMenuConfig, WalletIcon } from '@masknet/shared'
-import { useValueRef } from '@masknet/shared-base-ui'
 import { ArrowDownRound } from '@masknet/icons'
 import { WalletRPC } from '../../../../plugins/Wallet/messages'
+import { NetworkDescriptor, NetworkPluginID } from '@masknet/web3-shared-base'
 
 const useStyles = makeStyles()((theme) => ({
     root: {
@@ -50,16 +57,18 @@ const useStyles = makeStyles()((theme) => ({
 }))
 
 export const NetworkSelector = memo(() => {
-    const networks = getRegisteredWeb3Networks()
-    const account = useAccount()
-    const chainId = useChainId()
-    const providerType = useValueRef(currentProviderSettings)
+    const networks = getRegisteredWeb3Networks().filter(
+        (x) => x.networkSupporterPluginID === NetworkPluginID.PLUGIN_EVM,
+    ) as Array<NetworkDescriptor<ChainId, NetworkType>>
+
+    const web3State = useWeb3State(NetworkPluginID.PLUGIN_EVM)
+    const account = useAccount(NetworkPluginID.PLUGIN_EVM)
+    const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
+    const providerType = useProviderType(NetworkPluginID.PLUGIN_EVM)
     const onChainChange = useCallback(
-        async (chainId: ChainId) => {
+        async (chainId: Web3Helper.Definition[NetworkPluginID.PLUGIN_EVM]['ChainId']) => {
             if (providerType === ProviderType.MaskWallet) {
-                await WalletRPC.updateAccount({
-                    chainId,
-                })
+                await web3State.Provider?.connect(chainId, ProviderType.MaskWallet)
             }
             return WalletRPC.updateMaskAccount({
                 chainId,
@@ -79,14 +88,13 @@ export const NetworkSelector = memo(() => {
 })
 
 export interface NetworkSelectorUIProps {
-    currentNetwork: Web3Plugin.NetworkDescriptor
-    networks: Web3Plugin.NetworkDescriptor[]
+    currentNetwork: NetworkDescriptor<ChainId, NetworkType>
+    networks: Array<NetworkDescriptor<ChainId, NetworkType>>
     onChainChange: (chainId: ChainId) => void
 }
 
-export const NetworkSelectorUI = memo<NetworkSelectorUIProps>(({ currentNetwork, onChainChange }) => {
+export const NetworkSelectorUI = memo<NetworkSelectorUIProps>(({ currentNetwork, onChainChange, networks }) => {
     const { classes } = useStyles()
-    const networks = getRegisteredWeb3Networks()
 
     const [menu, openMenu] = useMenuConfig(
         networks
diff --git a/packages/mask/src/extension/popups/components/WalletStateBar/index.tsx b/packages/mask/src/extension/popups/components/WalletStateBar/index.tsx
index a6defa097ebf..166c85d84856 100644
--- a/packages/mask/src/extension/popups/components/WalletStateBar/index.tsx
+++ b/packages/mask/src/extension/popups/components/WalletStateBar/index.tsx
@@ -2,10 +2,11 @@ import { FC, memo } from 'react'
 import { LoadingIcon } from '@masknet/icons'
 import { FormattedAddress, WalletIcon } from '@masknet/shared'
 import { makeStyles } from '@masknet/theme'
-import { NetworkPluginID, useProviderDescriptor, useWeb3State } from '@masknet/plugin-infra/web3'
+import { useProviderDescriptor, useWeb3State } from '@masknet/plugin-infra/web3'
 import { formatEthereumAddress, ProviderType } from '@masknet/web3-shared-evm'
+import { NetworkPluginID } from '@masknet/web3-shared-base'
 import { Box, Stack, StackProps, Typography } from '@mui/material'
-import { NetworkSelector } from '../../components/NetworkSelector'
+import { NetworkSelector } from '../NetworkSelector'
 import { useI18N } from '../../../../utils'
 
 const useStyles = makeStyles()((theme) => ({
@@ -40,8 +41,8 @@ export const WalletStateBarUI: FC<WalletStateBarUIProps> = memo(
     ({ isPending, walletAddress, walletName, openConnectWalletDialog, children, domain, ...rest }) => {
         const { t } = useI18N()
         const { classes } = useStyles()
-        const { Utils } = useWeb3State()
-        const providerDescriptor = useProviderDescriptor(ProviderType.MaskWallet, NetworkPluginID.PLUGIN_EVM)
+        const { Others } = useWeb3State()
+        const providerDescriptor = useProviderDescriptor(NetworkPluginID.PLUGIN_EVM, ProviderType.MaskWallet)
 
         if (!providerDescriptor) return null
 
@@ -72,7 +73,7 @@ export const WalletStateBarUI: FC<WalletStateBarUIProps> = memo(
                             {walletName ?? '-'}
                             {domain ? (
                                 <Typography fontSize={14} marginLeft={1}>
-                                    {Utils?.formatDomainName?.(domain)}
+                                    {Others?.formatDomainName?.(domain)}
                                 </Typography>
                             ) : null}
                         </Box>
diff --git a/packages/mask/src/extension/popups/pages/Personas/ConnectedWallets/UI.tsx b/packages/mask/src/extension/popups/pages/Personas/ConnectedWallets/UI.tsx
index 8e532097d390..59c2d0bab29d 100644
--- a/packages/mask/src/extension/popups/pages/Personas/ConnectedWallets/UI.tsx
+++ b/packages/mask/src/extension/popups/pages/Personas/ConnectedWallets/UI.tsx
@@ -1,7 +1,7 @@
 import { memo, useCallback, useState } from 'react'
 import { makeStyles } from '@masknet/theme'
-import { ChainId, formatEthereumAddress, resolveAddressLinkOnExplorer } from '@masknet/web3-shared-evm'
-import { NetworkPluginID, useNetworkDescriptor } from '@masknet/plugin-infra/web3'
+import { ChainId, explorerResolver, formatEthereumAddress } from '@masknet/web3-shared-evm'
+import { useNetworkDescriptor } from '@masknet/plugin-infra/web3'
 import { FormattedAddress, ImageIcon } from '@masknet/shared'
 import { Button, Link, Typography } from '@mui/material'
 import { CopyIconButton } from '../../../components/CopyIconButton'
@@ -9,6 +9,7 @@ import { CircleLoadingIcon, DeleteIcon, EmptyIcon, PopupLinkIcon } from '@maskne
 import type { ConnectedWalletInfo } from '../type'
 import { DisconnectWalletDialog } from '../components/DisconnectWalletDialog'
 import { useI18N } from '../../../../../utils'
+import { NetworkPluginID } from '@masknet/web3-shared-base'
 
 const useStyles = makeStyles()(() => ({
     container: {
@@ -122,7 +123,7 @@ export const ConnectedWalletsUI = memo<ConnectedWalletsUIProps>(
         }, [])
 
         // TODO: remove this after next dot id support multiple chain
-        const networkDescriptor = useNetworkDescriptor(ChainId.Mainnet, NetworkPluginID.PLUGIN_EVM)
+        const networkDescriptor = useNetworkDescriptor(NetworkPluginID.PLUGIN_EVM, ChainId.Mainnet)
 
         if (loading)
             return (
@@ -152,7 +153,7 @@ export const ConnectedWalletsUI = memo<ConnectedWalletsUIProps>(
                                     <CopyIconButton text={wallet.identity} className={classes.icon} />
                                     <Link
                                         style={{ width: 16, height: 16 }}
-                                        href={resolveAddressLinkOnExplorer(chainId, wallet.identity ?? '')}
+                                        href={explorerResolver.addressLink(chainId, wallet.identity ?? '')}
                                         target="_blank"
                                         rel="noopener noreferrer">
                                         <PopupLinkIcon className={classes.icon} />
diff --git a/packages/mask/src/extension/popups/pages/Personas/ConnectedWallets/index.tsx b/packages/mask/src/extension/popups/pages/Personas/ConnectedWallets/index.tsx
index c7ecbc8a9e26..e3bb5ab38390 100644
--- a/packages/mask/src/extension/popups/pages/Personas/ConnectedWallets/index.tsx
+++ b/packages/mask/src/extension/popups/pages/Personas/ConnectedWallets/index.tsx
@@ -3,8 +3,8 @@ import { useTitle } from '../../../hook/useTitle'
 import { useI18N } from '../../../../../utils'
 import { ConnectedWalletsUI } from './UI'
 import { PersonaContext } from '../hooks/usePersonaContext'
-import { NetworkPluginID, useChainId, useWallets, useWeb3State } from '@masknet/plugin-infra/web3'
-import { isSameAddress } from '@masknet/web3-shared-evm'
+import { useChainId, useWallets, useWeb3State } from '@masknet/plugin-infra/web3'
+import { isSameAddress, NetworkPluginID } from '@masknet/web3-shared-base'
 import { NextIDAction, NextIDPlatform, PopupRoutes } from '@masknet/shared-base'
 import { useAsync, useAsyncFn } from 'react-use'
 import { compact, sortBy } from 'lodash-unified'
@@ -16,7 +16,7 @@ import { useLocation, useNavigate } from 'react-router-dom'
 
 const ConnectedWallets = memo(() => {
     const { t } = useI18N()
-    const chainId = useChainId()
+    const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
     const { NameService } = useWeb3State(NetworkPluginID.PLUGIN_EVM)
     const wallets = useWallets()
     const navigate = useNavigate()
@@ -32,7 +32,7 @@ const ConnectedWallets = memo(() => {
         const results = await Promise.all(
             proofs.map(async (x, index) => {
                 if (x.platform === NextIDPlatform.Ethereum) {
-                    const domain = await NameService?.reverse?.(x.identity)
+                    const domain = await NameService?.reverse?.(chainId, x.identity)
 
                     if (domain)
                         return {
@@ -68,7 +68,7 @@ const ConnectedWallets = memo(() => {
                 return x
             })
             .reverse()
-    }, [wallets, NameService, proofs])
+    }, [wallets, NameService, proofs, chainId])
 
     const [confirmState, onConfirmRelease] = useAsyncFn(
         async (wallet?: ConnectedWalletInfo) => {
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 43bc7b3a90a3..0014cd2b9eaf 100644
--- a/packages/mask/src/extension/popups/pages/Personas/VerifyWallet/index.tsx
+++ b/packages/mask/src/extension/popups/pages/Personas/VerifyWallet/index.tsx
@@ -1,19 +1,11 @@
+import urlcat from 'urlcat'
 import { memo, useEffect, useMemo } from 'react'
 import { useAsync, useAsyncFn, useLocation } from 'react-use'
 import { useNavigate } from 'react-router-dom'
 import { EMPTY_LIST, NextIDAction, NextIDPlatform, PopupRoutes } from '@masknet/shared-base'
 import { makeStyles, usePopupCustomSnackbar } from '@masknet/theme'
 import { NextIDProof } from '@masknet/web3-providers'
-import {
-    ChainId,
-    EthereumRpcType,
-    isSameAddress,
-    NetworkType,
-    ProviderType,
-    resolveProviderName,
-    useWallets,
-} from '@masknet/web3-shared-evm'
-import type { Web3Plugin } from '@masknet/plugin-infra/dist/web3-types'
+import { ChainId, providerResolver, ProviderType } from '@masknet/web3-shared-evm'
 import { SignSteps, Steps } from '../../../../../components/shared/VerifyWallet/Steps'
 import Services from '../../../../service'
 import { PersonaContext } from '../hooks/usePersonaContext'
@@ -21,8 +13,8 @@ import { useTitle } from '../../../hook/useTitle'
 import { useI18N } from '../../../../../utils'
 import { useUnconfirmedRequest } from '../../Wallet/hooks/useUnConfirmedRequest'
 import { PopupContext } from '../../../hook/usePopupContext'
-import urlcat from 'urlcat'
-import { useReverseAddress, useWeb3State } from '@masknet/plugin-infra/web3'
+import { Account, isSameAddress, NetworkPluginID } from '@masknet/web3-shared-base'
+import { useReverseAddress, useWallets, useWeb3Connection, useWeb3State } from '@masknet/plugin-infra/web3'
 
 const useStyles = makeStyles()((theme) => ({
     container: {
@@ -40,13 +32,18 @@ const VerifyWallet = memo(() => {
     const { signed, setSigned } = PopupContext.useContainer()
     const navigate = useNavigate()
     const location = useLocation()
+
+    const wallet: Account<ChainId> & {
+        providerType: ProviderType
+        address?: string
+    } = location.state.usr
+
     const { showSnackbar } = usePopupCustomSnackbar()
     const { value: request } = useUnconfirmedRequest()
-    const wallet: Web3Plugin.ConnectionResult<ChainId, NetworkType, ProviderType> = location.state.usr
-    const { value: domain } = useReverseAddress(wallet.account)
-    const { Utils } = useWeb3State() ?? {}
-    const wallets = useWallets()
-
+    const { Others } = useWeb3State(NetworkPluginID.PLUGIN_EVM)
+    const wallets = useWallets(NetworkPluginID.PLUGIN_EVM)
+    const connection = useWeb3Connection(NetworkPluginID.PLUGIN_EVM)
+    const { value: domain } = useReverseAddress(NetworkPluginID.PLUGIN_EVM, wallet?.account)
     const { value: bounds } = useAsync(async () => {
         if (!wallet.account) return EMPTY_LIST
         return NextIDProof.queryExistedBindingByPlatform(NextIDPlatform.Ethereum, wallet.account)
@@ -64,13 +61,14 @@ const VerifyWallet = memo(() => {
     }, [bounds])
 
     const walletName = () => {
-        if (domain && Utils?.formatDomainName) return Utils.formatDomainName(domain)
-        if (wallet.providerType !== ProviderType.MaskWallet) return `${resolveProviderName(wallet.providerType)} Wallet`
+        if (domain && Others?.formatDomainName) return Others.formatDomainName(domain)
+        if (wallet.providerType !== ProviderType.MaskWallet)
+            return `${providerResolver.providerName(wallet.providerType)} Wallet`
         return wallets.find((x) => isSameAddress(x.address, wallet.account))?.name ?? 'Wallet'
     }
 
     useEffect(() => {
-        if (request?.computedPayload?.type !== EthereumRpcType.SIGN) return
+        // if (request?.computedPayload?.type !== EthereumRpcType.SIGN) return
 
         navigate(urlcat(PopupRoutes.WalletSignRequest, { goBack: true }), {
             state: wallet,
@@ -107,19 +105,14 @@ const VerifyWallet = memo(() => {
     const [{ value: walletSignState }, walletSign] = useAsyncFn(async () => {
         if (!payload || !currentPersona?.identifier.publicKeyAsHex) return false
         try {
-            const walletSig = await Services.Ethereum.personalSign(
-                payload.signPayload,
-                wallet.account,
-                '',
-                {
-                    chainId: wallet.chainId,
-                    account: wallet.account,
-                    providerType: wallet.providerType,
-                },
-                { popupsWindow: false },
-            )
+            const walletSignature = await connection?.signMessage(payload.signPayload, 'personaSign', {
+                chainId: wallet.chainId,
+                account: wallet.account,
+                providerType: wallet.providerType,
+                popupsWindow: false,
+            })
 
-            if (!walletSig) throw new Error('Wallet sign failed')
+            if (!walletSignature) throw new Error('Wallet sign failed')
             await NextIDProof.bindProof(
                 payload.uuid,
                 currentPersona.identifier.publicKeyAsHex,
@@ -128,7 +121,7 @@ const VerifyWallet = memo(() => {
                 wallet.account,
                 payload.createdAt,
                 {
-                    walletSignature: walletSig,
+                    walletSignature,
                     signature,
                 },
             )
@@ -140,10 +133,10 @@ const VerifyWallet = memo(() => {
             showSnackbar(t('popups_verify_wallet_sign_failed'), { variant: 'error' })
             return false
         }
-    }, [currentPersona?.identifier.publicKeyAsHex, payload, wallet, signature])
+    }, [currentPersona?.identifier.publicKeyAsHex, payload, wallet, signature, connection])
 
     const changeWallet = () => {
-        navigate(urlcat(PopupRoutes.ConnectWallet, { goBack: true }))
+        navigate(PopupRoutes.ConnectWallet)
     }
 
     const [{ loading: confirmLoading, value: step = SignSteps.Ready }, handleConfirm] = useAsyncFn(async () => {
diff --git a/packages/mask/src/extension/popups/pages/Swap/SwapBox/index.tsx b/packages/mask/src/extension/popups/pages/Swap/SwapBox/index.tsx
index 4cc50f93e4d0..d4a0a4b932bd 100644
--- a/packages/mask/src/extension/popups/pages/Swap/SwapBox/index.tsx
+++ b/packages/mask/src/extension/popups/pages/Swap/SwapBox/index.tsx
@@ -1,15 +1,16 @@
-import { useChainId } from '@masknet/web3-shared-evm'
+import { useChainId } from '@masknet/plugin-infra/web3'
 import { useMemo } from 'react'
 import { useNavigate, useLocation } from 'react-router-dom'
 import { useUpdateEffect } from 'react-use'
 import { Trader } from '../../../../../plugins/Trader/SNSAdaptor/trader/Trader'
 import type { Coin } from '../../../../../plugins/Trader/types'
 import { PopupRoutes } from '@masknet/shared-base'
+import { NetworkPluginID } from '@masknet/web3-shared-base'
 
 export function SwapBox() {
     const location = useLocation()
     const navigate = useNavigate()
-    const chainId = useChainId()
+    const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
 
     const coin = useMemo(() => {
         if (!location.search) return undefined
diff --git a/packages/mask/src/extension/popups/pages/Swap/index.tsx b/packages/mask/src/extension/popups/pages/Swap/index.tsx
index 7386a1ab1b48..24a9fa499fd8 100644
--- a/packages/mask/src/extension/popups/pages/Swap/index.tsx
+++ b/packages/mask/src/extension/popups/pages/Swap/index.tsx
@@ -1,17 +1,15 @@
+import { useCallback } from 'react'
 import { Appearance, applyMaskColorVars, makeStyles } from '@masknet/theme'
-import { TransactionStatusType, useChainId, useWallet, Web3Provider } from '@masknet/web3-shared-evm'
 import { ThemeProvider, Typography } from '@mui/material'
 import { SharedContextProvider } from '@masknet/shared'
-import { useCallback } from 'react'
-import { useRecentTransactions } from '../../../../plugins/Wallet/hooks/useRecentTransactions'
+import { TransactionStatusType, NetworkPluginID } from '@masknet/web3-shared-base'
 import Services from '../../../service'
 import { WalletStateBarUI } from '../../components/WalletStateBar'
 import { SwapBox } from './SwapBox'
-import { SwapWeb3Context } from '../../../../web3/context'
 import { PopupRoutes } from '@masknet/shared-base'
 import { useI18N } from '../../../../utils'
 import { useSwapPageTheme } from '../../../../utils/theme/useSwapPageTheme'
-import { NetworkPluginID, useReverseAddress } from '@masknet/plugin-infra/web3'
+import { useChainId, useReverseAddress, useRecentTransactions, useWallet } from '@masknet/plugin-infra/web3'
 import { TargetChainIdContext } from '../../../../plugins/Trader/trader/useTargetChainIdContext'
 import { AllProviderTradeContext } from '../../../../plugins/Trader/trader/useAllProviderTradeContext'
 
@@ -68,53 +66,48 @@ const useStyles = makeStyles()((theme) => {
 export default function SwapPage() {
     const { t } = useI18N()
     const { classes } = useStyles()
-    const chainId = useChainId()
+    const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
+    const wallet = useWallet(NetworkPluginID.PLUGIN_EVM)
     const theme = useSwapPageTheme()
-    const { value: pendingTransactions = [] } = useRecentTransactions({
-        status: TransactionStatusType.NOT_DEPEND,
-    })
-    const wallet = useWallet()
+    const pendingTransactions = useRecentTransactions(NetworkPluginID.PLUGIN_EVM, TransactionStatusType.NOT_DEPEND)
     const openPopupsWindow = useCallback(() => {
         Services.Helper.openPopupWindow(PopupRoutes.SelectWallet, {
             chainId,
-            internal: true,
         })
     }, [chainId])
 
-    const { value: domain } = useReverseAddress(wallet?.address, NetworkPluginID.PLUGIN_EVM)
+    const { value: domain } = useReverseAddress(NetworkPluginID.PLUGIN_EVM, wallet?.address)
 
     applyMaskColorVars(document.body, Appearance.light)
 
     return (
-        <Web3Provider value={SwapWeb3Context}>
-            <ThemeProvider theme={theme}>
-                <SharedContextProvider>
-                    <div className={classes.page}>
-                        <div className={classes.container}>
-                            <header className={classes.header}>
-                                <WalletStateBarUI
-                                    className={classes.walletStateBar}
-                                    isPending={pendingTransactions.length > 0}
-                                    openConnectWalletDialog={openPopupsWindow}
-                                    walletName={wallet?.name}
-                                    domain={domain}
-                                    walletAddress={wallet?.address}
-                                />
-                            </header>
-                            <main className={classes.main}>
-                                <Typography variant="h1" className={classes.title}>
-                                    {t('plugin_trader_swap')}
-                                </Typography>
-                                <TargetChainIdContext.Provider>
-                                    <AllProviderTradeContext.Provider>
-                                        <SwapBox />
-                                    </AllProviderTradeContext.Provider>
-                                </TargetChainIdContext.Provider>
-                            </main>
-                        </div>
+        <ThemeProvider theme={theme}>
+            <SharedContextProvider>
+                <div className={classes.page}>
+                    <div className={classes.container}>
+                        <header className={classes.header}>
+                            <WalletStateBarUI
+                                className={classes.walletStateBar}
+                                isPending={pendingTransactions.length > 0}
+                                openConnectWalletDialog={openPopupsWindow}
+                                walletName={wallet?.name}
+                                domain={domain}
+                                walletAddress={wallet?.address}
+                            />
+                        </header>
+                        <main className={classes.main}>
+                            <Typography variant="h1" className={classes.title}>
+                                {t('plugin_trader_swap')}
+                            </Typography>
+                            <TargetChainIdContext.Provider>
+                                <AllProviderTradeContext.Provider>
+                                    <SwapBox />
+                                </AllProviderTradeContext.Provider>
+                            </TargetChainIdContext.Provider>
+                        </main>
                     </div>
-                </SharedContextProvider>
-            </ThemeProvider>
-        </Web3Provider>
+                </div>
+            </SharedContextProvider>
+        </ThemeProvider>
     )
 }
diff --git a/packages/mask/src/extension/popups/pages/Wallet/AddDeriveWallet/index.tsx b/packages/mask/src/extension/popups/pages/Wallet/AddDeriveWallet/index.tsx
index 27a6eb20d567..33f52c6c8da3 100644
--- a/packages/mask/src/extension/popups/pages/Wallet/AddDeriveWallet/index.tsx
+++ b/packages/mask/src/extension/popups/pages/Wallet/AddDeriveWallet/index.tsx
@@ -6,11 +6,12 @@ import { HD_PATH_WITHOUT_INDEX_ETHEREUM } from '@masknet/plugin-wallet'
 import { useAsync, useAsyncFn } from 'react-use'
 import { WalletRPC } from '../../../../../plugins/Wallet/messages'
 import { DeriveWalletTable } from '../components/DeriveWalletTable'
-import { currySameAddress, ProviderType, useWallets } from '@masknet/web3-shared-evm'
+import { currySameAddress, NetworkPluginID } from '@masknet/web3-shared-base'
+import { useWallets } from '@masknet/plugin-infra/web3'
 import { useI18N } from '../../../../../utils'
 import { LoadingButton } from '@mui/lab'
 import { PopupRoutes } from '@masknet/shared-base'
-import { currentAccountSettings, currentMaskWalletAccountSettings } from '../../../../../plugins/Wallet/settings'
+import { currentMaskWalletAccountSettings } from '../../../../../plugins/Wallet/settings'
 import { first } from 'lodash-unified'
 import { useTitle } from '../../../hook/useTitle'
 
@@ -78,7 +79,7 @@ const AddDeriveWallet = memo(() => {
     const location = useLocation()
     const state = location.state as any as { mnemonic?: string } | undefined
     const { classes } = useStyles()
-    const wallets = useWallets(ProviderType.MaskWallet)
+    const wallets = useWallets(NetworkPluginID.PLUGIN_EVM)
     const walletName = new URLSearchParams(location.search).get('name')
     const { mnemonic } = state || {}
 
@@ -143,12 +144,6 @@ const AddDeriveWallet = memo(() => {
                     account: firstWallet,
                 })
             }
-            if (!currentAccountSettings.value) {
-                await WalletRPC.updateAccount({
-                    account: firstWallet,
-                    providerType: ProviderType.MaskWallet,
-                })
-            }
         }
         navigate(PopupRoutes.Wallet, { replace: true })
     }, [mnemonic, walletName, wallets.length])
diff --git a/packages/mask/src/extension/popups/pages/Wallet/AddToken/index.tsx b/packages/mask/src/extension/popups/pages/Wallet/AddToken/index.tsx
index 0b1e207d5c09..3de7f9c1f87a 100644
--- a/packages/mask/src/extension/popups/pages/Wallet/AddToken/index.tsx
+++ b/packages/mask/src/extension/popups/pages/Wallet/AddToken/index.tsx
@@ -1,8 +1,8 @@
 import { memo } from 'react'
 import { Button, Stack, Typography } from '@mui/material'
 import { makeStyles } from '@masknet/theme'
-import { useWallet } from '@masknet/web3-shared-evm'
-import { ERC20TokenList } from '@masknet/shared'
+import { FungibleTokenList } from '@masknet/shared'
+import { useBlockedFungibleTokens } from '@masknet/plugin-infra/web3'
 import { useI18N } from '../../../../../utils'
 import { useNavigate } from 'react-router-dom'
 import { useTitle } from '../../../hook/useTitle'
@@ -40,11 +40,9 @@ const useStyles = makeStyles()({
 
 const AddToken = memo(() => {
     const { t } = useI18N()
-    const wallet = useWallet()
     const { classes } = useStyles()
     const navigate = useNavigate()
-
-    const excludeTokens = Array.from(wallet?.erc20_token_whitelist ?? [])
+    const blackList = useBlockedFungibleTokens()
 
     useTitle(t('add_token'))
 
@@ -52,7 +50,10 @@ const AddToken = memo(() => {
         <>
             <div className={classes.content}>
                 <Typography className={classes.label}>{t('popups_wallet_token')}</Typography>
-                <ERC20TokenList FixedSizeListProps={{ height: 340, itemSize: 54 }} blacklist={excludeTokens} />
+                <FungibleTokenList
+                    blacklist={blackList.map((x) => x.address)}
+                    FixedSizeListProps={{ height: 340, itemSize: 54 }}
+                />
             </div>
             <Stack height="100%" sx={{ px: 2, pb: 2 }} justifyContent="center" alignItems="center">
                 <Button fullWidth className={classes.button} onClick={() => navigate(-1)}>
diff --git a/packages/mask/src/extension/popups/pages/Wallet/BackupWallet/index.tsx b/packages/mask/src/extension/popups/pages/Wallet/BackupWallet/index.tsx
index 847d5a199bac..8f3021620b8c 100644
--- a/packages/mask/src/extension/popups/pages/Wallet/BackupWallet/index.tsx
+++ b/packages/mask/src/extension/popups/pages/Wallet/BackupWallet/index.tsx
@@ -4,7 +4,7 @@ import { Button, styled, Tab, tabClasses, Tabs, tabsClasses, Typography } from '
 import { makeStyles } from '@masknet/theme'
 import { TabContext, TabPanel } from '@mui/lab'
 import { File as FileIcon } from '@masknet/icons'
-import { useWallet } from '@masknet/web3-shared-evm'
+import { useWallet } from '@masknet/plugin-infra/web3'
 import { WalletRPC } from '../../../../../plugins/Wallet/messages'
 import { useI18N } from '../../../../../utils'
 import { PasswordField } from '../../../components/PasswordField'
diff --git a/packages/mask/src/extension/popups/pages/Wallet/ConnectWallet/index.tsx b/packages/mask/src/extension/popups/pages/Wallet/ConnectWallet/index.tsx
index 1e1fcf65e1ae..9606dd4de759 100644
--- a/packages/mask/src/extension/popups/pages/Wallet/ConnectWallet/index.tsx
+++ b/packages/mask/src/extension/popups/pages/Wallet/ConnectWallet/index.tsx
@@ -1,22 +1,22 @@
 import urlcat from 'urlcat'
-import { memo, useCallback } from 'react'
+import React, { memo, useCallback } from 'react'
 import { useMount } from 'react-use'
 import { makeStyles } from '@masknet/theme'
 import { Typography } from '@mui/material'
 import { useNavigate } from 'react-router-dom'
-import { PopupRoutes } from '@masknet/shared-base'
+import { ExtensionSite, PopupRoutes } from '@masknet/shared-base'
+import { NetworkPluginID } from '@masknet/web3-shared-base'
 import { ChainId, ProviderType } from '@masknet/web3-shared-evm'
 import {
     getRegisteredWeb3Networks,
     getRegisteredWeb3Providers,
-    NetworkPluginID,
+    useWeb3State,
     useWeb3UI,
-    Web3Plugin,
+    Web3Helper,
 } from '@masknet/plugin-infra/web3'
 import { useTitle } from '../../../hook/useTitle'
 import { useI18N } from '../../../../../utils'
 import { PopupContext } from '../../../hook/usePopupContext'
-import { useWalletLockStatus } from '../hooks/useWalletLockStatus'
 
 const useStyles = makeStyles()((theme) => ({
     box: {
@@ -63,46 +63,48 @@ const ConnectWalletPage = memo(() => {
     const navigate = useNavigate()
 
     const { setSigned } = PopupContext.useContainer()
-    const { isLocked, loading: getLockStatusLoading } = useWalletLockStatus()
 
     // connect to ethereum mainnet
     const network = getRegisteredWeb3Networks().find(
         (x) => x.networkSupporterPluginID === NetworkPluginID.PLUGIN_EVM && x.chainId === ChainId.Mainnet,
-    )
+    ) as Web3Helper.Web3NetworkDescriptor<NetworkPluginID.PLUGIN_EVM> | undefined
     const providers = getRegisteredWeb3Providers().filter(
         (x) => x.providerAdaptorPluginID === NetworkPluginID.PLUGIN_EVM,
-    )
+    ) as Array<Web3Helper.Web3ProviderDescriptor<NetworkPluginID.PLUGIN_EVM>>
+
     const { ProviderIconClickBait } = useWeb3UI(NetworkPluginID.PLUGIN_EVM).SelectProviderDialog ?? {}
+    const { Connection } = useWeb3State(NetworkPluginID.PLUGIN_EVM)
 
     const onClick = useCallback(
-        (network: Web3Plugin.NetworkDescriptor, provider: Web3Plugin.ProviderDescriptor) => {
-            if (provider.type !== ProviderType.MaskWallet) return
-            if (isLocked && !getLockStatusLoading) {
-                navigate(urlcat(PopupRoutes.Unlock, { from: PopupRoutes.SelectWallet, goBack: true, popup: true }))
+        async (
+            network: Web3Helper.Web3NetworkDescriptor<NetworkPluginID.PLUGIN_EVM>,
+            provider: Web3Helper.Web3ProviderDescriptor<NetworkPluginID.PLUGIN_EVM>,
+        ) => {
+            if (provider.type === ProviderType.MaskWallet) {
+                navigate(
+                    urlcat(PopupRoutes.SelectWallet, {
+                        popup: true,
+                    }),
+                )
                 return
             }
-            navigate(
-                urlcat(PopupRoutes.SelectWallet, {
-                    popup: true,
-                }),
-            )
-        },
-        [isLocked, getLockStatusLoading],
-    )
 
-    const onSubmit = useCallback(
-        async (
-            network: Web3Plugin.NetworkDescriptor,
-            provider: Web3Plugin.ProviderDescriptor,
-            result?: Web3Plugin.ConnectionResult,
-        ) => {
+            const connection = await Connection?.getConnection?.({
+                chainId: network.chainId,
+                providerType: provider.type,
+            })
+
+            const account = await connection?.connect()
+
             navigate(PopupRoutes.VerifyWallet, {
-                state: result,
+                state: {
+                    ...account,
+                    providerType: provider.type,
+                },
             })
         },
         [],
     )
-
     useTitle(t('plugin_wallet_on_connect'))
 
     useMount(() => {
@@ -110,29 +112,42 @@ const ConnectWalletPage = memo(() => {
     })
     if (!network) return null
 
+    const createProvider = (
+        provider: Web3Helper.Web3ProviderDescriptor<NetworkPluginID.PLUGIN_EVM>,
+        options?: {
+            onClick: () => void
+        },
+    ) => {
+        return (
+            <div className={classes.walletItem} onClick={options?.onClick}>
+                <img src={provider.icon.toString()} className={classes.walletIcon} />
+                <Typography className={classes.walletName}>{provider.name}</Typography>
+            </div>
+        )
+    }
+
     return (
         <div className={classes.box}>
             <div className={classes.container}>
-                {providers.map((provider) => {
-                    return ProviderIconClickBait ? (
-                        <ProviderIconClickBait
-                            key={provider.ID}
-                            network={network}
-                            provider={provider}
-                            onClick={onClick}
-                            onSubmit={onSubmit}>
-                            <div className={classes.walletItem}>
-                                <img src={provider.icon.toString()} className={classes.walletIcon} />
-                                <Typography className={classes.walletName}>{provider.name}</Typography>
-                            </div>
-                        </ProviderIconClickBait>
-                    ) : (
-                        <div className={classes.walletItem} key={provider.ID}>
-                            <img src={provider.icon.toString()} className={classes.walletIcon} />
-                            <Typography className={classes.walletName}>{provider.name}</Typography>
-                        </div>
-                    )
-                })}
+                {providers
+                    .filter((x) => (x.enableRequirements?.supportedExtensionSites ?? []).includes(ExtensionSite.Popup))
+                    .map((provider) => {
+                        return ProviderIconClickBait ? (
+                            <ProviderIconClickBait
+                                key={provider.ID}
+                                network={network}
+                                provider={provider}
+                                onClick={onClick}>
+                                {createProvider(provider)}
+                            </ProviderIconClickBait>
+                        ) : (
+                            <React.Fragment key={provider.ID}>
+                                {createProvider(provider, {
+                                    onClick: () => onClick(network, provider),
+                                })}
+                            </React.Fragment>
+                        )
+                    })}
             </div>
         </div>
     )
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 e078b8609af5..28cc23efae8d 100644
--- a/packages/mask/src/extension/popups/pages/Wallet/ContractInteraction/index.tsx
+++ b/packages/mask/src/extension/popups/pages/Wallet/ContractInteraction/index.tsx
@@ -3,35 +3,40 @@ import { useAsync, useAsyncFn, useUpdateEffect } from 'react-use'
 import { useLocation, useNavigate } from 'react-router-dom'
 import { makeStyles } from '@masknet/theme'
 import { useUnconfirmedRequest } from '../hooks/useUnConfirmedRequest'
-import {
-    EthereumRpcType,
-    EthereumTokenType,
-    formatBalance,
-    formatCurrency,
-    formatGweiToWei,
-    formatWeiToEther,
-    getChainIdFromNetworkType,
-    isEIP1559Supported,
-    useChainId,
-    useERC20TokenDetailed,
-    useEthereumTokenType,
-    useNativeTokenDetailed,
-    useNetworkType,
-} from '@masknet/web3-shared-evm'
+import { formatGweiToWei, formatWeiToEther, SchemaType } from '@masknet/web3-shared-evm'
 import { FormattedBalance, FormattedCurrency, TokenIcon } from '@masknet/shared'
 import { Link, Typography } from '@mui/material'
 import { useI18N } from '../../../../../utils'
 import { PopupRoutes } from '@masknet/shared-base'
 import { LoadingButton } from '@mui/lab'
 import { unreachable } from '@dimensiondev/kit'
-import { WalletRPC } from '../../../../../plugins/Wallet/messages'
-import Services from '../../../../service'
 import BigNumber from 'bignumber.js'
-import { useNativeTokenPrice, useTokenPrice } from '../../../../../plugins/Wallet/hooks/useTokenPrice'
 import { LoadingPlaceholder } from '../../../components/LoadingPlaceholder'
 import { toHex } from 'web3-utils'
-import { NetworkPluginID, useReverseAddress, useWeb3State } from '@masknet/plugin-infra/web3'
-import { isGreaterThan, leftShift, pow10, ZERO } from '@masknet/web3-shared-base'
+import {
+    useChainId,
+    useChainIdSupport,
+    useFungibleToken,
+    useFungibleTokenPrice,
+    useGasOptions,
+    useNativeToken,
+    useNativeTokenPrice,
+    useNetworkType,
+    useReverseAddress,
+    useSchemaType,
+    useWeb3Connection,
+    useWeb3State,
+} from '@masknet/plugin-infra/web3'
+import {
+    formatBalance,
+    formatCurrency,
+    isGreaterThan,
+    leftShift,
+    NetworkPluginID,
+    pow10,
+    TransactionDescriptorType,
+    ZERO,
+} from '@masknet/web3-shared-base'
 import { CopyIconButton } from '../../../components/CopyIconButton'
 import { useTitle } from '../../../hook/useTitle'
 
@@ -146,8 +151,10 @@ const ContractInteraction = memo(() => {
     const { classes } = useStyles()
     const location = useLocation()
     const navigate = useNavigate()
-    const chainId = useChainId()
-    const networkType = useNetworkType()
+    const { Others } = useWeb3State(NetworkPluginID.PLUGIN_EVM)
+    const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
+    const networkType = useNetworkType(NetworkPluginID.PLUGIN_EVM)
+    const connection = useWeb3Connection(NetworkPluginID.PLUGIN_EVM)
     const [transferError, setTransferError] = useState(false)
     const { value: request, loading: requestLoading } = useUnconfirmedRequest()
 
@@ -163,109 +170,103 @@ const ContractInteraction = memo(() => {
         isNativeTokenInteraction,
         contractAddress,
     } = useMemo(() => {
-        const type = request?.computedPayload?.type
+        const type = request?.formatterTransaction?.type
         if (!type) return {}
 
         switch (type) {
-            case EthereumRpcType.CONTRACT_INTERACTION:
-                switch (request.computedPayload.name) {
+            case TransactionDescriptorType.INTERACTION:
+                switch (request.transactionContext?.name) {
                     case 'approve':
                         return {
                             isNativeTokenInteraction: false,
-                            typeName: t('popups_wallet_token_unlock_permission'),
-                            tokenAddress: request.computedPayload._tx.to,
-                            to: request.computedPayload._tx.to,
-                            gas: request.computedPayload._tx.gas,
-                            gasPrice: request.computedPayload._tx.gasPrice,
-                            maxFeePerGas: request.computedPayload._tx.maxFeePerGas,
-                            maxPriorityFeePerGas: request.computedPayload._tx.maxPriorityFeePerGas,
-                            amount: request.computedPayload.parameters?.value,
+                            typeName: request.formatterTransaction?.title,
+                            tokenAddress: request.computedPayload?.to,
+                            to: request.computedPayload?.to,
+                            gas: request.computedPayload?.gas,
+                            gasPrice: request.computedPayload?.gasPrice,
+                            maxFeePerGas: request.computedPayload?.maxFeePerGas,
+                            maxPriorityFeePerGas: request.computedPayload?.maxPriorityFeePerGas,
+                            amount: request.transactionContext.parameters?.value,
                         }
                     case 'transfer':
                     case 'transferFrom':
                         return {
                             isNativeTokenInteraction: false,
                             typeName: t('popups_wallet_contract_interaction_transfer'),
-                            tokenAddress: request.computedPayload._tx.to,
-                            to: request.computedPayload.parameters?.to,
-                            gas: request.computedPayload._tx.gas,
-                            gasPrice: request.computedPayload._tx.gasPrice,
-                            maxFeePerGas: request.computedPayload._tx.maxFeePerGas,
-                            maxPriorityFeePerGas: request.computedPayload._tx.maxPriorityFeePerGas,
-                            amount: request.computedPayload.parameters?.value,
-                            contractAddress: request.computedPayload._tx.to,
+                            tokenAddress: request.computedPayload?.to,
+                            to: request.transactionContext.parameters?.to,
+                            gas: request.computedPayload?.gas,
+                            gasPrice: request.computedPayload?.gasPrice,
+                            maxFeePerGas: request.computedPayload?.maxFeePerGas,
+                            maxPriorityFeePerGas: request.computedPayload?.maxPriorityFeePerGas,
+                            amount: request.transactionContext.parameters?.value,
+                            contractAddress: request.computedPayload?.to,
                         }
                     default:
                         return {
                             isNativeTokenInteraction: true,
                             typeName: t('popups_wallet_contract_interaction'),
-                            tokenAddress: request.computedPayload._tx.to,
-                            to: request.computedPayload._tx.to,
-                            gas: request.computedPayload._tx.gas,
-                            gasPrice: request.computedPayload._tx.gasPrice,
-                            maxFeePerGas: request.computedPayload._tx.maxFeePerGas,
-                            maxPriorityFeePerGas: request.computedPayload._tx.maxPriorityFeePerGas,
-                            amount: request.computedPayload._tx.value,
+                            tokenAddress: request.computedPayload?.to,
+                            to: request.computedPayload?.to,
+                            gas: request.computedPayload?.gas,
+                            gasPrice: request.computedPayload?.gasPrice,
+                            maxFeePerGas: request.computedPayload?.maxFeePerGas,
+                            maxPriorityFeePerGas: request.computedPayload?.maxPriorityFeePerGas,
+                            amount: request.computedPayload?.value,
                         }
                 }
-            case EthereumRpcType.SEND_ETHER:
+            case TransactionDescriptorType.TRANSFER:
                 return {
                     isNativeTokenInteraction: true,
                     typeName: t('wallet_transfer_send'),
-                    tokenAddress: request.computedPayload._tx.to,
-                    to: request.computedPayload._tx.to,
-                    gas: request.computedPayload._tx.gas,
-                    gasPrice: request.computedPayload._tx.gasPrice,
-                    maxFeePerGas: request.computedPayload._tx.maxFeePerGas,
-                    maxPriorityFeePerGas: request.computedPayload._tx.maxPriorityFeePerGas,
-                    amount: request.computedPayload._tx.value,
+                    tokenAddress: request.computedPayload?.to,
+                    to: request.computedPayload?.to,
+                    gas: request.computedPayload?.gas,
+                    gasPrice: request.computedPayload?.gasPrice,
+                    maxFeePerGas: request.computedPayload?.maxFeePerGas,
+                    maxPriorityFeePerGas: request.computedPayload?.maxPriorityFeePerGas,
+                    amount: request.computedPayload?.value,
                 }
-            case EthereumRpcType.CONTRACT_DEPLOYMENT:
-            case EthereumRpcType.ETH_DECRYPT:
-            case EthereumRpcType.ETH_GET_ENCRYPTION_PUBLIC_KEY:
-            case EthereumRpcType.WATCH_ASSET:
-            case EthereumRpcType.WALLET_SWITCH_ETHEREUM_CHAIN:
-            case EthereumRpcType.CANCEL:
-            case EthereumRpcType.RETRY:
-            case EthereumRpcType.SIGN:
-            case EthereumRpcType.SIGN_TYPED_DATA:
+            case TransactionDescriptorType.DEPLOYMENT:
+            case TransactionDescriptorType.RETRY:
+            case TransactionDescriptorType.CANCEL:
                 throw new Error('To be implemented.')
             default:
                 unreachable(type)
         }
     }, [request, t])
 
-    const contractType = useEthereumTokenType(contractAddress)
+    const { value: contractType } = useSchemaType(NetworkPluginID.PLUGIN_EVM, contractAddress)
 
     // token detailed
-    const { value: nativeToken } = useNativeTokenDetailed()
-    const { value: token } = useERC20TokenDetailed(isNativeTokenInteraction ? '' : tokenAddress)
+    const { value: nativeToken } = useNativeToken(NetworkPluginID.PLUGIN_EVM)
+    const { value: token } = useFungibleToken(NetworkPluginID.PLUGIN_EVM, isNativeTokenInteraction ? '' : tokenAddress)
 
     // gas price
+    const isSupport1559 = useChainIdSupport(NetworkPluginID.PLUGIN_EVM, chainId, 'EIP1559')
+    const { value: gasOptions } = useGasOptions(NetworkPluginID.PLUGIN_EVM)
     const { value: defaultPrices } = useAsync(async () => {
-        if (isEIP1559Supported(chainId) && !maxFeePerGas && !maxPriorityFeePerGas) {
-            const response = await WalletRPC.getEstimateGasFees(chainId)
+        if (isSupport1559 && !maxFeePerGas && !maxPriorityFeePerGas) {
             // Gwei to wei
             return {
                 maxPriorityFeePerGas: toHex(
-                    formatGweiToWei(response?.medium?.suggestedMaxPriorityFeePerGas ?? 0).toFixed(0),
+                    formatGweiToWei(gasOptions?.normal.suggestedMaxPriorityFeePerGas ?? 0).toFixed(0),
                 ),
-                maxFeePerGas: toHex(formatGweiToWei(response?.medium?.suggestedMaxFeePerGas ?? 0).toFixed(0)),
+                maxFeePerGas: toHex(formatGweiToWei(gasOptions?.normal.suggestedMaxFeePerGas ?? 0).toFixed(0)),
             }
         } else if (!gasPrice) {
-            const response = await WalletRPC.getGasPriceDictFromDeBank(chainId)
             return {
-                gasPrice: response?.data.normal.price ?? 0,
+                gasPrice: gasOptions?.normal.suggestedMaxFeePerGas ?? 0,
             }
         }
         return {}
-    }, [gasPrice, maxPriorityFeePerGas, maxFeePerGas, networkType, chainId])
+    }, [gasPrice, maxPriorityFeePerGas, maxFeePerGas, networkType, chainId, gasOptions, isSupport1559])
 
     // handlers
     const [{ loading }, handleConfirm] = useAsyncFn(async () => {
         if (request) {
             try {
-                await Services.Ethereum.confirmRequest(request.payload)
+                await connection?.confirmRequest?.()
                 navigate(-1)
             } catch (error_) {
                 setTransferError(true)
@@ -276,14 +277,14 @@ const ContractInteraction = memo(() => {
 
     const [{ loading: rejectLoading }, handleReject] = useAsyncFn(async () => {
         if (!request) return
-        await Services.Ethereum.rejectRequest(request.payload)
+        await connection?.rejectRequest?.()
         navigate(PopupRoutes.Wallet, { replace: true })
     }, [request])
 
     // Wei
-    const gasPriceEIP1559 = new BigNumber(maxFeePerGas ?? defaultPrices?.maxFeePerGas ?? 0, 16)
+    const gasPriceEIP1559 = new BigNumber((maxFeePerGas as number) ?? defaultPrices?.maxFeePerGas ?? 0, 16)
     const gasPricePriorEIP1559 = new BigNumber((gasPrice as string) ?? defaultPrices?.gasPrice ?? 0)
-    const gasFee = (isEIP1559Supported(getChainIdFromNetworkType(networkType)) ? gasPriceEIP1559 : gasPricePriorEIP1559)
+    const gasFee = (isSupport1559 ? gasPriceEIP1559 : gasPricePriorEIP1559)
         .multipliedBy(gas ?? 0)
         .integerValue()
         .toFixed()
@@ -293,17 +294,23 @@ const ContractInteraction = memo(() => {
     const tokenDecimals = isNativeTokenInteraction ? nativeToken?.decimals : token?.decimals
 
     // token estimated value
-    const tokenPrice = useTokenPrice(chainId, !isNativeTokenInteraction ? token?.address : undefined)
-    const nativeTokenPrice = useNativeTokenPrice(nativeToken?.chainId)
+    const { value: tokenPrice } = useFungibleTokenPrice(
+        NetworkPluginID.PLUGIN_EVM,
+        !isNativeTokenInteraction ? token?.address : undefined,
+    )
+    const { value: nativeTokenPrice } = useNativeTokenPrice(NetworkPluginID.PLUGIN_EVM)
     const tokenValueUSD =
-        contractType && [EthereumTokenType.ERC721, EthereumTokenType.ERC1155].includes(contractType)
+        contractType && [SchemaType.ERC721, SchemaType.ERC1155].includes(contractType)
             ? ZERO
             : leftShift(tokenAmount, tokenDecimals)
                   .times((!isNativeTokenInteraction ? tokenPrice : nativeTokenPrice) ?? 0)
                   .toString()
 
-    const totalUSD = new BigNumber(formatWeiToEther(gasFee)).times(nativeTokenPrice).plus(tokenValueUSD).toString()
-    //
+    const totalUSD = new BigNumber(formatWeiToEther(gasFee))
+        .times(nativeTokenPrice ?? 0)
+        .plus(tokenValueUSD)
+        .toString()
+
     console.log('DEBUG: ContractInteraction')
     console.log({
         amount,
@@ -327,8 +334,8 @@ const ContractInteraction = memo(() => {
 
     useTitle(typeName ?? t('popups_wallet_contract_interaction'))
 
-    const { value: domain } = useReverseAddress(to, NetworkPluginID.PLUGIN_EVM)
-    const { Utils } = useWeb3State()
+    const { value: domain } = useReverseAddress(NetworkPluginID.PLUGIN_EVM, to)
+
     return requestLoading ? (
         <LoadingPlaceholder />
     ) : (
@@ -336,13 +343,13 @@ const ContractInteraction = memo(() => {
             <main className={classes.container}>
                 <div className={classes.info}>
                     <Typography className={classes.title}>{typeName}</Typography>
-                    {domain && Utils?.formatDomainName ? (
-                        <Typography className={classes.domain}>{Utils?.formatDomainName(domain)}</Typography>
+                    {domain && Others?.formatDomainName ? (
+                        <Typography className={classes.domain}>{Others?.formatDomainName(domain)}</Typography>
                     ) : null}
                     <Typography className={classes.secondary} style={{ wordBreak: 'break-all' }}>
                         {to}
-                        {request?.computedPayload?.type === EthereumRpcType.CONTRACT_INTERACTION &&
-                        request.computedPayload.name === 'approve' &&
+                        {request?.formatterTransaction?.type === TransactionDescriptorType.INTERACTION &&
+                        request?.transactionContext?.name === 'approve' &&
                         to ? (
                             <CopyIconButton text={to} className={classes.copy} />
                         ) : null}
diff --git a/packages/mask/src/extension/popups/pages/Wallet/DeleteWallet/index.tsx b/packages/mask/src/extension/popups/pages/Wallet/DeleteWallet/index.tsx
index 0d57529ee6e6..4b66d6b5793a 100644
--- a/packages/mask/src/extension/popups/pages/Wallet/DeleteWallet/index.tsx
+++ b/packages/mask/src/extension/popups/pages/Wallet/DeleteWallet/index.tsx
@@ -3,14 +3,15 @@ import { Button, Typography } from '@mui/material'
 import { makeStyles } from '@masknet/theme'
 import { WalletIcon, WarningIcon } from '@masknet/icons'
 import { useNavigate } from 'react-router-dom'
-import { ProviderType, useWallet, formatEthereumAddress } from '@masknet/web3-shared-evm'
+import { formatEthereumAddress } from '@masknet/web3-shared-evm'
 import { PopupRoutes } from '@masknet/shared-base'
 import { first } from 'lodash-unified'
 import { FormattedAddress } from '@masknet/shared'
 import { WalletRPC } from '../../../../../plugins/Wallet/messages'
 import { useI18N } from '../../../../../utils'
 import { PasswordField } from '../../../components/PasswordField'
-import { currentAccountSettings, currentMaskWalletAccountSettings } from '../../../../../plugins/Wallet/settings'
+import { currentMaskWalletAccountSettings } from '../../../../../plugins/Wallet/settings'
+import { useWallet } from '@masknet/plugin-infra/web3'
 import { WalletContext } from '../hooks/useWalletContext'
 import { useTitle } from '../../../hook/useTitle'
 
@@ -110,7 +111,7 @@ const DeleteWallet = memo(() => {
         if (wallet?.address) {
             try {
                 await WalletRPC.removeWallet(wallet.address, password)
-                const wallets = await WalletRPC.getWallets(ProviderType.MaskWallet)
+                const wallets = await WalletRPC.getWallets()
 
                 const otherWalletAddress = first(wallets)?.address
 
@@ -122,12 +123,6 @@ const DeleteWallet = memo(() => {
                     currentMaskWalletAccountSettings.value = ''
                 }
 
-                if (currentAccountSettings.value === wallet.address) {
-                    await WalletRPC.updateAccount({
-                        account: first(wallets)?.address ?? '',
-                        providerType: ProviderType.MaskWallet,
-                    })
-                }
                 navigate(PopupRoutes.Wallet, { replace: true })
             } catch (error) {
                 if (error instanceof Error) {
diff --git a/packages/mask/src/extension/popups/pages/Wallet/GasSetting/GasSetting1559.tsx b/packages/mask/src/extension/popups/pages/Wallet/GasSetting/GasSetting1559.tsx
index eccebfb0b555..e9d3ad65a185 100644
--- a/packages/mask/src/extension/popups/pages/Wallet/GasSetting/GasSetting1559.tsx
+++ b/packages/mask/src/extension/popups/pages/Wallet/GasSetting/GasSetting1559.tsx
@@ -1,18 +1,11 @@
-import { makeStyles } from '@masknet/theme'
+import { z as zod } from 'zod'
 import { memo, useEffect, useMemo, useState } from 'react'
-import {
-    EthereumRpcType,
-    formatGweiToEther,
-    formatGweiToWei,
-    useChainId,
-    useNativeTokenDetailed,
-    useWeb3,
-} from '@masknet/web3-shared-evm'
 import { useAsync, useAsyncFn, useUpdateEffect } from 'react-use'
+import { makeStyles } from '@masknet/theme'
+import { formatGweiToEther, formatGweiToWei } from '@masknet/web3-shared-evm'
 import { WalletRPC } from '../../../../../plugins/Wallet/messages'
 import BigNumber from 'bignumber.js'
 import { useI18N } from '../../../../../utils'
-import { z as zod } from 'zod'
 import { Controller, useForm } from 'react-hook-form'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { Typography } from '@mui/material'
@@ -21,18 +14,21 @@ import { LoadingButton } from '@mui/lab'
 import { isEmpty } from 'lodash-unified'
 import { useUnconfirmedRequest } from '../hooks/useUnConfirmedRequest'
 import { useNavigate } from 'react-router-dom'
-import { useNativeTokenPrice } from '../../../../../plugins/Wallet/hooks/useTokenPrice'
 import { PopupRoutes } from '@masknet/shared-base'
 import { toHex, fromWei } from 'web3-utils'
 import {
+    GasOptionType,
     isGreaterThan,
     isGreaterThanOrEqualTo,
     isLessThan,
     isLessThanOrEqualTo,
     isPositive,
     multipliedBy,
+    NetworkPluginID,
     toFixed,
+    TransactionDescriptorType,
 } from '@masknet/web3-shared-base'
+import { useChainId, useGasOptions, useNativeToken, useNativeTokenPrice, useWeb3 } from '@masknet/plugin-infra/web3'
 
 const useStyles = makeStyles()((theme) => ({
     options: {
@@ -118,68 +114,66 @@ const HIGH_FEE_WARNING_MULTIPLIER = 1.5
 export const GasSetting1559 = memo(() => {
     const { t } = useI18N()
     const { classes } = useStyles()
-    const web3 = useWeb3()
-    const chainId = useChainId()
+    const web3 = useWeb3(NetworkPluginID.PLUGIN_EVM)
+    const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
     const navigate = useNavigate()
     const [selected, setOption] = useState<number | null>(null)
     const [getGasLimitError, setGetGasLimitError] = useState(false)
-    const { value: nativeToken } = useNativeTokenDetailed()
-    const nativeTokenPrice = useNativeTokenPrice(nativeToken?.chainId)
+    const { value: nativeToken } = useNativeToken(NetworkPluginID.PLUGIN_EVM)
+    const { value: nativeTokenPrice = 0 } = useNativeTokenPrice(NetworkPluginID.PLUGIN_EVM, {
+        chainId: nativeToken?.chainId,
+    })
 
     const { value, loading: getValueLoading } = useUnconfirmedRequest()
-
-    // #region Get suggest gas options data from meta swap api
-    const { value: gasOptions, loading: getGasOptionsLoading } = useAsync(async () => {
-        return WalletRPC.getEstimateGasFees(chainId)
-    }, [chainId])
-    // #endregion
+    const { value: gasOptions, loading: getGasOptionsLoading } = useGasOptions(NetworkPluginID.PLUGIN_EVM)
 
     // #region Gas options
     const options = useMemo(
         () => [
             {
                 title: t('popups_wallet_gas_fee_settings_low'),
-                content: gasOptions?.low,
+                content: gasOptions?.[GasOptionType.SLOW],
             },
             {
                 title: t('popups_wallet_gas_fee_settings_medium'),
-                content: gasOptions?.medium,
+                content: gasOptions?.[GasOptionType.NORMAL],
             },
             {
                 title: t('popups_wallet_gas_fee_settings_high'),
-                content: gasOptions?.high,
+                content: gasOptions?.[GasOptionType.FAST],
             },
         ],
         [gasOptions],
     )
     // #endregion
 
-    // #region If the payload type be SEND_ETHER or CONTRACT_INTERACTION, get the gas from the payload
+    // #region If the payload type be TRANSFER or INTERACTION, get the gas from the payload
     const gas = useMemo(() => {
         if (
             value &&
-            (value?.computedPayload?.type === EthereumRpcType.SEND_ETHER ||
-                value?.computedPayload?.type === EthereumRpcType.CONTRACT_INTERACTION)
+            (value?.formatterTransaction?.type === TransactionDescriptorType.TRANSFER ||
+                value?.formatterTransaction?.type === TransactionDescriptorType.INTERACTION)
         ) {
-            return new BigNumber(value?.computedPayload?._tx.gas ?? 0).toNumber()
+            return new BigNumber(value?.formatterTransaction?._tx.gas ?? 0).toNumber()
         }
         return 0
     }, [value])
     // #endregion
 
-    // #region If the payload type be SEND_ETHER or CONTRACT_INTERACTION, estimate min gas limit by tx data
+    // #region If the payload type be TRANSFER or INTERACTION, estimate min gas limit by tx data
     const { value: minGasLimit } = useAsync(async () => {
         if (
             value &&
-            (value?.computedPayload?.type === EthereumRpcType.SEND_ETHER ||
-                value?.computedPayload?.type === EthereumRpcType.CONTRACT_INTERACTION)
+            (value?.formatterTransaction?.type === TransactionDescriptorType.TRANSFER ||
+                value?.formatterTransaction?.type === TransactionDescriptorType.INTERACTION)
         ) {
             try {
+                if (!web3) return 0
                 return web3.eth.estimateGas({
-                    data: value.computedPayload._tx.data,
-                    from: value.computedPayload._tx.from,
-                    to: value.computedPayload._tx.to,
-                    value: value.computedPayload._tx.value,
+                    data: value.formatterTransaction._tx.data,
+                    from: value.formatterTransaction._tx.from,
+                    to: value.formatterTransaction._tx.to,
+                    value: value.formatterTransaction._tx.value,
                 })
             } catch {
                 setGetGasLimitError(true)
@@ -236,23 +230,30 @@ export const GasSetting1559 = memo(() => {
         },
     })
 
-    // #region If the payload type be SEND_ETHER or CONTRACT_INTERACTION and there are maxFeePerGas and maxPriorityFeePerGas parameters on tx, set them to the form data
+    // #region If the payload type be TRANSFER or INTERACTION and there are maxFeePerGas and maxPriorityFeePerGas parameters on tx, set them to the form data
     useUpdateEffect(() => {
         if (
-            value?.computedPayload?.type === EthereumRpcType.SEND_ETHER ||
-            value?.computedPayload?.type === EthereumRpcType.CONTRACT_INTERACTION
+            value?.formatterTransaction?.type === TransactionDescriptorType.TRANSFER ||
+            value?.formatterTransaction?.type === TransactionDescriptorType.INTERACTION
         ) {
             if (
-                value?.computedPayload?.type === EthereumRpcType.CONTRACT_INTERACTION &&
-                !['transfer', 'transferFrom', 'approve'].includes(value?.computedPayload.name)
+                value?.formatterTransaction?.type === TransactionDescriptorType.INTERACTION &&
+                value?.transactionContext?.name &&
+                !['transfer', 'transferFrom', 'approve'].includes(value?.transactionContext?.name)
             ) {
                 setOption(1)
-            } else if (value?.computedPayload._tx.maxFeePerGas && value?.computedPayload._tx.maxPriorityFeePerGas) {
+            } else if (
+                value?.formatterTransaction._tx.maxFeePerGas &&
+                value?.formatterTransaction._tx.maxPriorityFeePerGas
+            ) {
                 setValue(
                     'maxPriorityFeePerGas',
-                    fromWei(toFixed(value.computedPayload._tx.maxPriorityFeePerGas), 'gwei'),
+                    fromWei(toFixed(value.formatterTransaction._tx.maxPriorityFeePerGas as string), 'gwei'),
+                )
+                setValue(
+                    'maxFeePerGas',
+                    fromWei(toFixed(value.formatterTransaction._tx.maxFeePerGas as string), 'gwei'),
                 )
-                setValue('maxFeePerGas', fromWei(toFixed(value.computedPayload._tx.maxFeePerGas), 'gwei'))
             } else {
                 setOption(1)
             }
@@ -301,12 +302,15 @@ export const GasSetting1559 = memo(() => {
     // #region These are additional form rules that need to be prompted for but do not affect the validation of the form
     const maxPriorFeeHelperText = useMemo(() => {
         if (getGasOptionsLoading) return undefined
-        if (isLessThan(maxPriorityFeePerGas, gasOptions?.low?.suggestedMaxPriorityFeePerGas ?? 0))
+        if (isLessThan(maxPriorityFeePerGas, gasOptions?.[GasOptionType.SLOW]?.suggestedMaxPriorityFeePerGas ?? 0))
             return t('wallet_transfer_error_max_priority_gas_fee_too_low')
         if (
             isGreaterThan(
                 maxPriorityFeePerGas,
-                multipliedBy(gasOptions?.high?.suggestedMaxPriorityFeePerGas ?? 0, HIGH_FEE_WARNING_MULTIPLIER),
+                multipliedBy(
+                    gasOptions?.[GasOptionType.FAST]?.suggestedMaxPriorityFeePerGas ?? 0,
+                    HIGH_FEE_WARNING_MULTIPLIER,
+                ),
             )
         )
             return t('wallet_transfer_error_max_priority_gas_fee_too_high')
@@ -315,12 +319,12 @@ export const GasSetting1559 = memo(() => {
 
     const maxFeeGasHelperText = useMemo(() => {
         if (getGasOptionsLoading) return undefined
-        if (isLessThan(maxFeePerGas, gasOptions?.estimatedBaseFee ?? 0))
+        if (isLessThan(maxFeePerGas, gasOptions?.[GasOptionType.SLOW]?.estimatedBaseFee ?? 0))
             return t('wallet_transfer_error_max_fee_too_low')
         if (
             isGreaterThan(
                 maxFeePerGas,
-                multipliedBy(gasOptions?.high?.suggestedMaxFeePerGas ?? 0, HIGH_FEE_WARNING_MULTIPLIER),
+                multipliedBy(gasOptions?.[GasOptionType.FAST]?.suggestedMaxFeePerGas ?? 0, HIGH_FEE_WARNING_MULTIPLIER),
             )
         )
             return t('wallet_transfer_error_max_fee_too_high')
diff --git a/packages/mask/src/extension/popups/pages/Wallet/GasSetting/Prior1559GasSetting.tsx b/packages/mask/src/extension/popups/pages/Wallet/GasSetting/Prior1559GasSetting.tsx
index fcbc87fb0df9..ff5f4bb7a794 100644
--- a/packages/mask/src/extension/popups/pages/Wallet/GasSetting/Prior1559GasSetting.tsx
+++ b/packages/mask/src/extension/popups/pages/Wallet/GasSetting/Prior1559GasSetting.tsx
@@ -1,5 +1,5 @@
 import { makeStyles } from '@masknet/theme'
-import { isLessThan, pow10 } from '@masknet/web3-shared-base'
+import { GasOptionType, isLessThan, NetworkPluginID, pow10, TransactionDescriptorType } from '@masknet/web3-shared-base'
 import { memo, useEffect, useMemo, useState } from 'react'
 import { useI18N } from '../../../../../utils'
 import { useAsync, useAsyncFn, useUpdateEffect } from 'react-use'
@@ -7,13 +7,9 @@ import { WalletRPC } from '../../../../../plugins/Wallet/messages'
 import { useUnconfirmedRequest } from '../hooks/useUnConfirmedRequest'
 import {
     ChainId,
-    EthereumRpcType,
     formatGweiToWei,
     formatWeiToEther,
     formatWeiToGwei,
-    useChainId,
-    useNativeTokenDetailed,
-    useWeb3,
     ChainIdOptionalRecord,
 } from '@masknet/web3-shared-evm'
 import BigNumber from 'bignumber.js'
@@ -25,9 +21,9 @@ import { StyledInput } from '../../../components/StyledInput'
 import { LoadingButton } from '@mui/lab'
 import { isEmpty } from 'lodash-unified'
 import { useNavigate } from 'react-router-dom'
-import { useNativeTokenPrice } from '../../../../../plugins/Wallet/hooks/useTokenPrice'
 import { PopupRoutes } from '@masknet/shared-base'
 import { toHex } from 'web3-utils'
+import { useChainId, useGasOptions, useNativeToken, useNativeTokenPrice, useWeb3 } from '@masknet/plugin-infra/web3'
 
 const useStyles = makeStyles()((theme) => ({
     options: {
@@ -102,28 +98,26 @@ const minGasPriceOfChain: ChainIdOptionalRecord<BigNumber.Value> = {
 export const Prior1559GasSetting = memo(() => {
     const { t } = useI18N()
     const { classes } = useStyles()
-    const web3 = useWeb3()
-    const chainId = useChainId()
+    const web3 = useWeb3(NetworkPluginID.PLUGIN_EVM)
+    const { value: gasOptions_ } = useGasOptions(NetworkPluginID.PLUGIN_EVM)
+    const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
     const { value, loading: getValueLoading } = useUnconfirmedRequest()
     const [getGasLimitError, setGetGasLimitError] = useState(false)
     const navigate = useNavigate()
     const [selected, setOption] = useState<number | null>(null)
-    const { value: nativeToken } = useNativeTokenDetailed()
-
-    const nativeTokenPrice = useNativeTokenPrice(nativeToken?.chainId)
+    const { value: nativeToken } = useNativeToken(NetworkPluginID.PLUGIN_EVM)
+    const { value: nativeTokenPrice = 0 } = useNativeTokenPrice(NetworkPluginID.PLUGIN_EVM, {
+        chainId: nativeToken?.chainId,
+    })
 
     // #region Get gas options from debank
-    const { value: gasOptions } = useAsync(async () => {
-        const response = await WalletRPC.getGasPriceDictFromDeBank(chainId)
-
-        if (!response) return null
-
+    const gasOptions = useMemo(() => {
         return {
-            slow: response.data.slow.price,
-            standard: response.data.normal.price,
-            fast: response.data.fast.price,
+            slow: gasOptions_?.[GasOptionType.SLOW].suggestedMaxFeePerGas ?? 0,
+            standard: gasOptions_?.[GasOptionType.NORMAL].suggestedMaxFeePerGas ?? 0,
+            fast: gasOptions_?.[GasOptionType.FAST].suggestedMaxFeePerGas ?? 0,
         }
-    }, [chainId])
+    }, [chainId, gasOptions_])
     // #endregion
 
     const options = useMemo(
@@ -132,15 +126,15 @@ export const Prior1559GasSetting = memo(() => {
                 ? [
                       {
                           title: t('popups_wallet_gas_fee_settings_low'),
-                          gasPrice: gasOptions?.slow ?? 0,
+                          gasPrice: gasOptions.slow,
                       },
                       {
                           title: t('popups_wallet_gas_fee_settings_medium'),
-                          gasPrice: gasOptions?.standard ?? 0,
+                          gasPrice: gasOptions.standard,
                       },
                       {
                           title: t('popups_wallet_gas_fee_settings_high'),
-                          gasPrice: gasOptions?.fast ?? 0,
+                          gasPrice: gasOptions.fast,
                       },
                   ]
                 : null,
@@ -150,10 +144,10 @@ export const Prior1559GasSetting = memo(() => {
     const gas = useMemo(() => {
         if (
             value &&
-            (value?.computedPayload?.type === EthereumRpcType.SEND_ETHER ||
-                value?.computedPayload?.type === EthereumRpcType.CONTRACT_INTERACTION)
+            (value?.formatterTransaction?.type === TransactionDescriptorType.TRANSFER ||
+                value?.formatterTransaction?.type === TransactionDescriptorType.INTERACTION)
         ) {
-            return new BigNumber(value?.computedPayload?._tx.gas ?? 0).toNumber()
+            return new BigNumber(value?.formatterTransaction?._tx.gas ?? 0).toNumber()
         }
         return 0
     }, [value])
@@ -161,11 +155,11 @@ export const Prior1559GasSetting = memo(() => {
     const { value: minGasLimit } = useAsync(async () => {
         if (
             value &&
-            (value?.computedPayload?.type === EthereumRpcType.SEND_ETHER ||
-                value?.computedPayload?.type === EthereumRpcType.CONTRACT_INTERACTION)
+            (value?.formatterTransaction?.type === TransactionDescriptorType.TRANSFER ||
+                value?.formatterTransaction?.type === TransactionDescriptorType.INTERACTION)
         ) {
             try {
-                return web3.eth.estimateGas(value.computedPayload._tx)
+                return web3?.eth.estimateGas(value.formatterTransaction._tx) ?? 0
             } catch {
                 return 0
             }
@@ -207,17 +201,17 @@ export const Prior1559GasSetting = memo(() => {
 
     useUpdateEffect(() => {
         if (
-            value?.computedPayload?.type === EthereumRpcType.SEND_ETHER ||
-            value?.computedPayload?.type === EthereumRpcType.CONTRACT_INTERACTION
+            value?.formatterTransaction?.type === TransactionDescriptorType.TRANSFER ||
+            value?.formatterTransaction?.type === TransactionDescriptorType.INTERACTION
         ) {
             // if rpc payload contain gas price, set it to default values
-            if (value?.computedPayload._tx.gasPrice) {
-                const minGasPrice = minGasPriceOfChain[chainId]
+            if (value?.formatterTransaction._tx.gasPrice) {
+                const minGasPrice = minGasPriceOfChain[chainId as ChainId]
                 // if the gas price in payload is lower than minimum value
-                if (minGasPrice && isLessThan(value.computedPayload._tx.gasPrice as number, minGasPrice)) {
+                if (minGasPrice && isLessThan(value.formatterTransaction._tx.gasPrice as number, minGasPrice)) {
                     setValue('gasPrice', formatWeiToGwei(minGasPrice).toString())
                 }
-                setValue('gasPrice', formatWeiToGwei(value.computedPayload._tx.gasPrice as number).toString())
+                setValue('gasPrice', formatWeiToGwei(value.formatterTransaction._tx.gasPrice as number).toString())
             } else {
                 setOption(1)
             }
diff --git a/packages/mask/src/extension/popups/pages/Wallet/GasSetting/index.tsx b/packages/mask/src/extension/popups/pages/Wallet/GasSetting/index.tsx
index d959c2941e3a..75deb9cb0e24 100644
--- a/packages/mask/src/extension/popups/pages/Wallet/GasSetting/index.tsx
+++ b/packages/mask/src/extension/popups/pages/Wallet/GasSetting/index.tsx
@@ -1,10 +1,12 @@
 import { memo } from 'react'
 import { makeStyles } from '@masknet/theme'
 import { Typography } from '@mui/material'
-import { isEIP1559Supported, useChainId } from '@masknet/web3-shared-evm'
+import { chainResolver } from '@masknet/web3-shared-evm'
 import { useI18N } from '../../../../../utils'
 import { GasSetting1559 } from './GasSetting1559'
 import { Prior1559GasSetting } from './Prior1559GasSetting'
+import { useChainId } from '@masknet/plugin-infra/web3'
+import { NetworkPluginID } from '@masknet/web3-shared-base'
 import { useTitle } from '../../../hook/useTitle'
 
 const useStyles = makeStyles()(() => ({
@@ -29,7 +31,7 @@ const useStyles = makeStyles()(() => ({
 const GasSetting = memo(() => {
     const { t } = useI18N()
     const { classes } = useStyles()
-    const chainId = useChainId()
+    const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
     useTitle(t('popups_gas_fee_settings'))
     return (
         <main className={classes.container}>
@@ -37,7 +39,7 @@ const GasSetting = memo(() => {
                 {t('popups_wallet_gas_fee_settings')}
             </Typography>
             <Typography className={classes.description}>{t('popups_wallet_gas_fee_settings_description')}</Typography>
-            {isEIP1559Supported(chainId) ? <GasSetting1559 /> : <Prior1559GasSetting />}
+            {chainResolver.isSupport(chainId, 'EIP1559') ? <GasSetting1559 /> : <Prior1559GasSetting />}
         </main>
     )
 })
diff --git a/packages/mask/src/extension/popups/pages/Wallet/GasSetting/types.ts b/packages/mask/src/extension/popups/pages/Wallet/GasSetting/types.ts
index 90020abe7cec..f27f70a1c029 100644
--- a/packages/mask/src/extension/popups/pages/Wallet/GasSetting/types.ts
+++ b/packages/mask/src/extension/popups/pages/Wallet/GasSetting/types.ts
@@ -1,9 +1,9 @@
-import type { GasOption } from '@masknet/web3-shared-evm'
+import type { GasOptionType } from '@masknet/web3-shared-base'
 
 export interface GasSettingProps {
     gasLimit?: number | string
     onGasLimitChange?: (newVal: number | string) => void
-    gasOption?: GasOption
-    onGasOptionChange?: (newOption: GasOption) => void
+    gasOptionType?: GasOptionType
+    onGasOptionTypeChange?: (newOptionType: GasOptionType) => void
     onConfirm?: (options: { gasPrice: number; gasLimit: number | string }) => void
 }
diff --git a/packages/mask/src/extension/popups/pages/Wallet/GasSetting/useGasOptions.ts b/packages/mask/src/extension/popups/pages/Wallet/GasSetting/useGasOptions.ts
deleted file mode 100644
index f6e40ad7c087..000000000000
--- a/packages/mask/src/extension/popups/pages/Wallet/GasSetting/useGasOptions.ts
+++ /dev/null
@@ -1,45 +0,0 @@
-import { useMemo } from 'react'
-import { useAsync } from 'react-use'
-import { useChainId, GasOption } from '@masknet/web3-shared-evm'
-import { WalletRPC } from '../../../../../plugins/Wallet/messages'
-import { useI18N } from '../../../../../utils'
-
-export function useGasOptions() {
-    const chainId = useChainId()
-    const { t } = useI18N()
-
-    // #region Get gas options from debank
-    const { value: gasOptions } = useAsync(async () => {
-        const response = await WalletRPC.getGasPriceDictFromDeBank(chainId)
-        if (!response) return { slow: 0, standard: 0, fast: 0 }
-        const { data } = response
-        return {
-            slow: data.slow.price,
-            standard: data.normal.price,
-            fast: data.fast.price,
-        }
-    }, [chainId])
-    // #endregion
-
-    const options = useMemo(
-        () => [
-            {
-                title: t('popups_wallet_gas_fee_settings_low'),
-                gasOption: GasOption.Low,
-                gasPrice: gasOptions?.slow ?? 0,
-            },
-            {
-                title: t('popups_wallet_gas_fee_settings_medium'),
-                gasOption: GasOption.Medium,
-                gasPrice: gasOptions?.standard ?? 0,
-            },
-            {
-                title: t('popups_wallet_gas_fee_settings_high'),
-                gasOption: GasOption.High,
-                gasPrice: gasOptions?.fast ?? 0,
-            },
-        ],
-        [gasOptions],
-    )
-    return { options, gasOptions }
-}
diff --git a/packages/mask/src/extension/popups/pages/Wallet/ImportWallet/index.tsx b/packages/mask/src/extension/popups/pages/Wallet/ImportWallet/index.tsx
index c2c03d6a1101..d226ae090c32 100644
--- a/packages/mask/src/extension/popups/pages/Wallet/ImportWallet/index.tsx
+++ b/packages/mask/src/extension/popups/pages/Wallet/ImportWallet/index.tsx
@@ -17,8 +17,10 @@ import Services from '../../../../service'
 import { getDerivableAccounts } from '../../../../../plugins/Wallet/services'
 import { PageHeader } from '../components/PageHeader'
 import { PasswordField } from '../../../components/PasswordField'
-import { currentAccountSettings, currentMaskWalletAccountSettings } from '../../../../../plugins/Wallet/settings'
-import { ProviderType, useChainId } from '@masknet/web3-shared-evm'
+import { currentMaskWalletAccountSettings } from '../../../../../plugins/Wallet/settings'
+import { ProviderType } from '@masknet/web3-shared-evm'
+import { useWeb3Connection } from '@masknet/plugin-infra/web3'
+import { NetworkPluginID } from '@masknet/web3-shared-base'
 import { useTitle } from '../../../hook/useTitle'
 
 const useStyles = makeStyles()({
@@ -110,7 +112,7 @@ const useStyles = makeStyles()({
 const ImportWallet = memo(() => {
     const { t } = useI18N()
     const navigate = useNavigate()
-    const chainId = useChainId()
+    const connection = useWeb3Connection(NetworkPluginID.PLUGIN_EVM)
     const { classes } = useStyles()
     const [currentTab, onChange, tabs] = useTabs('mnemonic', 'json', 'privateKey')
     const [mnemonic, setMnemonic] = useState('')
@@ -175,32 +177,22 @@ const ImportWallet = memo(() => {
                                     account: wallet,
                                 })
                             }
-                            if (!currentAccountSettings.value) {
-                                await WalletRPC.updateAccount({
-                                    account: wallet,
-                                    providerType: ProviderType.MaskWallet,
-                                })
-                            }
-                            await WalletRPC.selectAccount([wallet], chainId)
+                            await WalletRPC.selectMaskAccount([wallet])
                             navigate(PopupRoutes.Wallet, { replace: true })
                             await Services.Helper.removePopupWindow()
                             break
                         case tabs.privateKey:
                             const privateKeyWallet = await WalletRPC.recoverWalletFromPrivateKey(data.name, privateKey)
-                            if (!currentMaskWalletAccountSettings.value) {
-                                await WalletRPC.updateMaskAccount({
-                                    account: privateKeyWallet,
-                                })
-                            }
+                            await WalletRPC.updateMaskAccount({
+                                account: privateKeyWallet,
+                            })
+                            await WalletRPC.selectMaskAccount([privateKeyWallet])
 
-                            if (!currentAccountSettings.value) {
-                                await WalletRPC.updateAccount({
-                                    account: privateKeyWallet,
-                                    providerType: ProviderType.MaskWallet,
-                                })
-                            }
+                            await connection?.connect({
+                                account: privateKeyWallet,
+                                providerType: ProviderType.MaskWallet,
+                            })
 
-                            await WalletRPC.selectAccount([privateKeyWallet], chainId)
                             await Services.Helper.removePopupWindow()
                             navigate(PopupRoutes.Wallet, { replace: true })
                             break
@@ -214,7 +206,7 @@ const ImportWallet = memo(() => {
                 }
             }
         },
-        [mnemonic, currentTab, keyStoreContent, keyStorePassword, privateKey, disabled, chainId, history, tabs],
+        [mnemonic, currentTab, keyStoreContent, keyStorePassword, privateKey, disabled, history, tabs],
     )
 
     const onSubmit = handleSubmit(onDerivedWallet)
diff --git a/packages/mask/src/extension/popups/pages/Wallet/LegacyWalletRecovery/index.tsx b/packages/mask/src/extension/popups/pages/Wallet/LegacyWalletRecovery/index.tsx
index cf745e4176a1..29b2a8df90ef 100644
--- a/packages/mask/src/extension/popups/pages/Wallet/LegacyWalletRecovery/index.tsx
+++ b/packages/mask/src/extension/popups/pages/Wallet/LegacyWalletRecovery/index.tsx
@@ -1,7 +1,7 @@
 import { memo } from 'react'
 import { useAsyncFn, useAsyncRetry } from 'react-use'
 import { Controller } from 'react-hook-form'
-import { ProviderType, formatEthereumAddress } from '@masknet/web3-shared-evm'
+import { formatEthereumAddress } from '@masknet/web3-shared-evm'
 import { makeStyles } from '@masknet/theme'
 import { PageHeader } from '../components/PageHeader'
 import { useI18N } from '../../../../../utils'
@@ -88,7 +88,7 @@ const WalletRecovery = memo(() => {
 
     const { value: legacyWallets = [], loading: getLegacyWalletsLoading } = useAsyncRetry(async () => {
         const now = new Date()
-        const wallets = await WalletRPC.getLegacyWallets(ProviderType.MaskWallet)
+        const wallets = await WalletRPC.getLegacyWallets()
         if (!wallets.length) return []
         return wallets.filter((x) => (x.mnemonic || x._public_key_) && x.updatedAt < now)
     }, [])
diff --git a/packages/mask/src/extension/popups/pages/Wallet/ReplaceTransaction/index.tsx b/packages/mask/src/extension/popups/pages/Wallet/ReplaceTransaction/index.tsx
index fadffb31eab0..49a06f67d451 100644
--- a/packages/mask/src/extension/popups/pages/Wallet/ReplaceTransaction/index.tsx
+++ b/packages/mask/src/extension/popups/pages/Wallet/ReplaceTransaction/index.tsx
@@ -3,17 +3,7 @@ import { useNavigate, useLocation } from 'react-router-dom'
 import { ReplaceType } from '../type'
 import { makeStyles } from '@masknet/theme'
 import { Box, Typography } from '@mui/material'
-import { useNativeTokenPrice } from '../../../../../plugins/Wallet/hooks/useTokenPrice'
-import {
-    EthereumTransactionConfig,
-    formatGweiToEther,
-    formatGweiToWei,
-    formatWeiToGwei,
-    getChainIdFromNetworkType,
-    isEIP1559Supported,
-    useNativeTokenDetailed,
-    useNetworkType,
-} from '@masknet/web3-shared-evm'
+import { formatGweiToEther, formatGweiToWei, formatWeiToGwei } from '@masknet/web3-shared-evm'
 import { z as zod } from 'zod'
 import BigNumber from 'bignumber.js'
 import { useI18N } from '../../../../../utils'
@@ -23,11 +13,18 @@ import { zodResolver } from '@hookform/resolvers/zod'
 import { StyledInput } from '../../../components/StyledInput'
 import { LoadingButton } from '@mui/lab'
 import { isEmpty } from 'lodash-unified'
-import { useAsyncFn } from 'react-use'
+import { useAsync, useAsyncFn } from 'react-use'
 import { useContainer } from 'unstated-next'
 import { WalletContext } from '../hooks/useWalletContext'
-import Services from '../../../../service'
-import { isLessThanOrEqualTo, isPositive, multipliedBy } from '@masknet/web3-shared-base'
+import { isLessThanOrEqualTo, isPositive, multipliedBy, NetworkPluginID } from '@masknet/web3-shared-base'
+import {
+    useChainId,
+    useWeb3State,
+    useNativeToken,
+    useNativeTokenPrice,
+    useChainIdSupport,
+    useWeb3Connection,
+} from '@masknet/plugin-infra/web3'
 import { useTitle } from '../../../hook/useTitle'
 
 const useStyles = makeStyles()({
@@ -69,18 +66,29 @@ const ReplaceTransaction = memo(() => {
     const type = search.get('type') as ReplaceType
     const [errorMessage, setErrorMessage] = useState('')
     const { transaction } = useContainer(WalletContext)
+    const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
+    const { TransactionFormatter } = useWeb3State(NetworkPluginID.PLUGIN_EVM)
+    const connection = useWeb3Connection(NetworkPluginID.PLUGIN_EVM)
+    const { value: formatterTransaction } = useAsync(async () => {
+        if (!TransactionFormatter?.formatTransaction || !transaction) return
+
+        return TransactionFormatter.formatTransaction(chainId, transaction)
+    }, [transaction, TransactionFormatter, chainId])
 
-    const defaultGas = transaction?.computedPayload?._tx.gas ?? 0
-    const defaultGasPrice = transaction?.computedPayload?._tx.gasPrice ?? 0
+    const { value: transactionContext } = useAsync(async () => {
+        if (!TransactionFormatter?.createContext || !transaction) return
+        return TransactionFormatter.createContext(chainId, transaction)
+    }, [transaction, TransactionFormatter, chainId])
 
-    const defaultMaxFeePerGas = (transaction?.computedPayload?._tx as EthereumTransactionConfig).maxFeePerGas ?? 0
-    const defaultMaxPriorityFeePerGas =
-        (transaction?.computedPayload?._tx as EthereumTransactionConfig).maxPriorityFeePerGas ?? 0
+    const defaultGas = formatterTransaction?._tx.gas ?? 0
+    const defaultGasPrice = formatterTransaction?._tx.gasPrice ?? 0
 
-    const { value: nativeToken } = useNativeTokenDetailed()
-    const nativeTokenPrice = useNativeTokenPrice(nativeToken?.chainId)
-    const networkType = useNetworkType()
-    const is1559 = isEIP1559Supported(getChainIdFromNetworkType(networkType))
+    const defaultMaxFeePerGas = formatterTransaction?._tx.maxFeePerGas ?? 0
+    const defaultMaxPriorityFeePerGas = formatterTransaction?._tx.maxPriorityFeePerGas ?? 0
+
+    const { value: nativeToken } = useNativeToken(NetworkPluginID.PLUGIN_EVM)
+    const { value: nativeTokenPrice } = useNativeTokenPrice(NetworkPluginID.PLUGIN_EVM)
+    const is1559 = useChainIdSupport(NetworkPluginID.PLUGIN_EVM, chainId, 'EIP1559')
 
     const schema = useMemo(() => {
         return zod
@@ -145,9 +153,9 @@ const ReplaceTransaction = memo(() => {
     const [{ loading }, handleConfirm] = useAsyncFn(
         async (data: zod.infer<typeof schema>) => {
             try {
-                if (transaction?.payload) {
-                    const config = transaction.payload.params!.map((param) => ({
-                        ...param,
+                if (transactionContext?.parameters) {
+                    const config = {
+                        ...formatterTransaction?._tx,
                         gas: toHex(new BigNumber(data.gas).toString()),
                         ...(is1559
                             ? {
@@ -157,18 +165,14 @@ const ReplaceTransaction = memo(() => {
                                   maxFeePerGas: toHex(formatGweiToWei(data.maxFeePerGas ?? 0).toString()),
                               }
                             : { gasPrice: toHex(formatGweiToWei(data.gasPrice ?? 0).toString()) }),
-                    }))
+                    }
+
+                    if (!transaction || !formatterTransaction) return
 
                     if (type === ReplaceType.CANCEL) {
-                        await Services.Ethereum.cancelRequest(transaction.hash, {
-                            ...transaction.payload,
-                            params: config,
-                        })
+                        await connection?.cancelRequest(transaction?.id, config)
                     } else {
-                        await Services.Ethereum.replaceRequest(transaction.hash, {
-                            ...transaction.payload,
-                            params: config,
-                        })
+                        await connection?.replaceRequest(transaction?.id, config)
                     }
 
                     navigate(-1)
@@ -183,7 +187,7 @@ const ReplaceTransaction = memo(() => {
                 }
             }
         },
-        [transaction, is1559, type],
+        [transactionContext, is1559, type, transaction],
     )
 
     const onSubmit = handleSubmit((data) => handleConfirm(data))
@@ -202,7 +206,9 @@ const ReplaceTransaction = memo(() => {
                     </Typography>
                     <Typography>
                         {t('popups_wallet_gas_fee_settings_usd', {
-                            usd: formatGweiToEther(gasFee).times(nativeTokenPrice).toPrecision(3),
+                            usd: formatGweiToEther(gasFee)
+                                .times(nativeTokenPrice ?? 0)
+                                .toPrecision(3),
                         })}
                     </Typography>
                 </Box>
diff --git a/packages/mask/src/extension/popups/pages/Wallet/SelectWallet/WalletItem.tsx b/packages/mask/src/extension/popups/pages/Wallet/SelectWallet/WalletItem.tsx
index eab9111a29c8..c79a66391880 100644
--- a/packages/mask/src/extension/popups/pages/Wallet/SelectWallet/WalletItem.tsx
+++ b/packages/mask/src/extension/popups/pages/Wallet/SelectWallet/WalletItem.tsx
@@ -1,12 +1,11 @@
-import type { Wallet } from '@masknet/web3-shared-evm'
-import { formatEthereumAddress } from '@masknet/web3-shared-evm'
-import { makeStyles } from '@masknet/theme'
 import { memo } from 'react'
+import { NetworkPluginID, Wallet } from '@masknet/web3-shared-base'
+import { makeStyles } from '@masknet/theme'
 import { MaskWalletIcon, SuccessIcon } from '@masknet/icons'
 import { ListItem, ListItemText, Typography } from '@mui/material'
 import { FormattedAddress } from '@masknet/shared'
 import { CopyIconButton } from '../../../components/CopyIconButton'
-import { NetworkPluginID, useReverseAddress, useWeb3State } from '@masknet/plugin-infra/web3'
+import { useReverseAddress, useWeb3State } from '@masknet/plugin-infra/web3'
 
 const useStyles = makeStyles()({
     item: {
@@ -53,25 +52,29 @@ export interface WalletItemProps {
 
 export const WalletItem = memo<WalletItemProps>(({ wallet, onClick, isSelected }) => {
     const { classes } = useStyles()
-    const { Utils } = useWeb3State()
-    const { value: domain } = useReverseAddress(wallet.address, NetworkPluginID.PLUGIN_EVM)
+    const { Others } = useWeb3State()
+    const { value: domain } = useReverseAddress(NetworkPluginID.PLUGIN_EVM, wallet.address)
 
     return (
         <ListItem className={classes.item} onClick={onClick}>
             <MaskWalletIcon />
             <ListItemText className={classes.text}>
-                <Typography className={classes.name}>
-                    <Typography component="span"> {wallet.name}</Typography>
-                    {domain && Utils?.formatDomainName ? (
-                        <Typography component="span">({Utils.formatDomainName(domain)})</Typography>
-                    ) : null}
-                </Typography>
-                <Typography className={classes.address}>
-                    <FormattedAddress address={wallet.address} size={4} formatter={formatEthereumAddress} />
-                    <CopyIconButton className={classes.copy} text={wallet.address} />
-                </Typography>
+                <div className={classes.listItem}>
+                    <div>
+                        <Typography className={classes.name}>
+                            <Typography component="span"> {wallet.name}</Typography>
+                            {domain && Others?.formatDomainName ? (
+                                <Typography component="span">{Others.formatDomainName(domain)}</Typography>
+                            ) : null}
+                        </Typography>
+                        <Typography className={classes.address}>
+                            <FormattedAddress address={wallet.address} size={12} formatter={Others?.formatAddress} />
+                            <CopyIconButton className={classes.copy} text={wallet.address} />
+                        </Typography>
+                    </div>
+                    {isSelected ? <SuccessIcon /> : null}
+                </div>
             </ListItemText>
-            {isSelected ? <SuccessIcon style={{ marginLeft: 8, fontSize: 18 }} /> : null}
         </ListItem>
     )
 })
diff --git a/packages/mask/src/extension/popups/pages/Wallet/SelectWallet/index.tsx b/packages/mask/src/extension/popups/pages/Wallet/SelectWallet/index.tsx
index 8f5298e72d6e..62bc44b10dfa 100644
--- a/packages/mask/src/extension/popups/pages/Wallet/SelectWallet/index.tsx
+++ b/packages/mask/src/extension/popups/pages/Wallet/SelectWallet/index.tsx
@@ -1,26 +1,24 @@
-import { memo, useCallback, useEffect, useMemo, useState } from 'react'
+import { memo, useCallback, useEffect, useState } from 'react'
 import { useLocation, useNavigate } from 'react-router-dom'
 import { first } from 'lodash-unified'
 import { makeStyles } from '@masknet/theme'
-import {
-    ChainId,
-    getNetworkName,
-    getNetworkTypeFromChainId,
-    isSameAddress,
-    ProviderType,
-    useAccount,
-    useChainIdValid,
-    useWallets,
-} from '@masknet/web3-shared-evm'
+import { isSameAddress, NetworkPluginID } from '@masknet/web3-shared-base'
+import { ChainId, ProviderType } from '@masknet/web3-shared-evm'
 import { Button, List, Typography } from '@mui/material'
 import { WalletRPC } from '../../../../../plugins/Wallet/messages'
-import { currentProviderSettings } from '../../../../../plugins/Wallet/settings'
 import { useI18N } from '../../../../../utils'
 import Services from '../../../../service'
 import { WalletItem } from './WalletItem'
-import { ChainIcon, WalletIcon } from '@masknet/shared'
+import {
+    useAccount,
+    useChainIdValid,
+    useWallets,
+    getRegisteredWeb3Networks,
+    Web3Helper,
+    useChainId,
+} from '@masknet/plugin-infra/web3'
+import { ChainIcon } from '@masknet/shared'
 import { PopupRoutes } from '@masknet/shared-base'
-import { getRegisteredWeb3Networks } from '@masknet/plugin-infra/web3'
 
 const useStyles = makeStyles()({
     content: {
@@ -96,35 +94,33 @@ const SelectWallet = memo(() => {
     const { classes } = useStyles()
     const location = useLocation()
     const navigate = useNavigate()
-    const wallet = useAccount()
-    const wallets = useWallets(ProviderType.MaskWallet)
 
-    const [selected, setSelected] = useState(wallet)
+    const networks = getRegisteredWeb3Networks().filter(
+        (x) => x.networkSupporterPluginID === NetworkPluginID.PLUGIN_EVM,
+    ) as Array<Web3Helper.Web3NetworkDescriptor<NetworkPluginID.PLUGIN_EVM>>
 
     const search = new URLSearchParams(location.search)
-
-    const chainIdSearched = search.get('chainId')
     // The previous page is popup page
     const isPopup = search.get('popup')
-    // Swap page also uses SelectWallet, but changing wallet in Swap page
-    // should not affect other pages, for example, dashboard.
-    // So we make Swap page 'internal' for popups
-    const isInternal = search.get('internal')
+    // The opener need to switch to specific chain
+    const chainIdSearched = search.get('chainId')
+    const account = useAccount(NetworkPluginID.PLUGIN_EVM)
+    const chainId = useChainId(
+        NetworkPluginID.PLUGIN_EVM,
+        chainIdSearched ? (Number.parseInt(chainIdSearched, 10) as ChainId) : undefined,
+    )
+    const chainIdValid = useChainIdValid(NetworkPluginID.PLUGIN_EVM, chainId)
+    const wallets = useWallets(NetworkPluginID.PLUGIN_EVM).filter((x) => x.hasStoredKeyInfo)
 
-    const chainId = chainIdSearched ? (Number.parseInt(chainIdSearched, 10) as ChainId) : ChainId.Mainnet
-    const chainIdValid = useChainIdValid()
+    const [selected, setSelected] = useState(account)
 
-    const networks = getRegisteredWeb3Networks()
-    const currentNetwork = useMemo(
-        () => networks.find((x) => x.chainId === chainId) ?? networks[0],
-        [networks, chainId],
-    )
+    const currentNetwork = networks.find((x) => x.chainId === chainId)
 
     const handleCancel = useCallback(async () => {
         if (isPopup) {
             navigate(-1)
         } else {
-            await WalletRPC.selectAccount([], ChainId.Mainnet)
+            await WalletRPC.selectMaskAccount([])
             await Services.Helper.removePopupWindow()
         }
     }, [isPopup])
@@ -135,7 +131,6 @@ const SelectWallet = memo(() => {
                 state: {
                     chainId,
                     account: selected,
-                    networkType: getNetworkTypeFromChainId(chainId),
                     providerType: ProviderType.MaskWallet,
                 },
             })
@@ -146,16 +141,11 @@ const SelectWallet = memo(() => {
             chainId,
             account: selected,
         })
-        if (currentProviderSettings.value === ProviderType.MaskWallet || !isInternal) {
-            await WalletRPC.updateAccount({
-                chainId,
-                account: selected,
-                providerType: ProviderType.MaskWallet,
-            })
+        if (chainId) {
+            await WalletRPC.selectMaskAccount([selected])
         }
-        await WalletRPC.selectAccount([selected], chainId)
         return Services.Helper.removePopupWindow()
-    }, [chainId, selected, isPopup, isInternal])
+    }, [chainId, selected, isPopup])
 
     useEffect(() => {
         if (!selected && wallets.length) setSelected(first(wallets)?.address ?? '')
@@ -164,22 +154,20 @@ const SelectWallet = memo(() => {
     return chainIdValid ? (
         <>
             <div className={classes.content}>
-                <div className={classes.header}>
-                    <div className={classes.network}>
-                        <div className={classes.iconWrapper}>
-                            {currentNetwork.isMainnet ? (
-                                <WalletIcon networkIcon={currentNetwork.icon} size={20} />
-                            ) : (
+                {currentNetwork ? (
+                    <div className={classes.header}>
+                        <div className={classes.network}>
+                            <div className={classes.iconWrapper}>
                                 <ChainIcon
                                     color={currentNetwork.iconColor}
                                     size={20}
                                     classes={{ point: classes.colorChainICon }}
                                 />
-                            )}
+                            </div>
+                            <Typography className={classes.title}>{currentNetwork.name}</Typography>
                         </div>
-                        <Typography className={classes.title}>{getNetworkName(chainId)}</Typography>
                     </div>
-                </div>
+                ) : null}
                 <List dense className={classes.list}>
                     {wallets.map((item, index) => (
                         <WalletItem
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 3cd2a0fa4e11..86022d44d015 100644
--- a/packages/mask/src/extension/popups/pages/Wallet/SignRequest/index.tsx
+++ b/packages/mask/src/extension/popups/pages/Wallet/SignRequest/index.tsx
@@ -1,5 +1,5 @@
 import { memo, useMemo, useState } from 'react'
-import { useAsyncFn, useLocation } from 'react-use'
+import { useAsyncFn } from 'react-use'
 import { useLocation as useRouteLocation, useNavigate } from 'react-router-dom'
 import { LoadingButton } from '@mui/lab'
 import { toUtf8 } from 'web3-utils'
@@ -7,11 +7,11 @@ import { useUnconfirmedRequest } from '../hooks/useUnConfirmedRequest'
 import { makeStyles } from '@masknet/theme'
 import { Typography } from '@mui/material'
 import { useI18N } from '../../../../../utils'
-import { ChainId, EthereumRpcType, NetworkType, ProviderType, useWallet } from '@masknet/web3-shared-evm'
-import Services from '../../../../service'
+import { useWallet, useWeb3Connection } from '@masknet/plugin-infra/web3'
 import { PopupRoutes } from '@masknet/shared-base'
 import { useTitle } from '../../../hook/useTitle'
-import type { Web3Plugin } from '@masknet/plugin-infra/dist/web3-types'
+import { EthereumMethodType } from '@masknet/web3-shared-evm'
+import { NetworkPluginID } from '@masknet/web3-shared-base'
 
 const useStyles = makeStyles()(() => ({
     container: {
@@ -84,24 +84,24 @@ const useStyles = makeStyles()(() => ({
 
 const SignRequest = memo(() => {
     const { t } = useI18N()
-    const location = useLocation()
     const routeLocation = useRouteLocation()
     const navigate = useNavigate()
     const { classes } = useStyles()
     const { value } = useUnconfirmedRequest()
+    const connection = useWeb3Connection(NetworkPluginID.PLUGIN_EVM)
     const wallet = useWallet()
     const [transferError, setTransferError] = useState(false)
 
-    const selectedWallet: Web3Plugin.ConnectionResult<ChainId, NetworkType, ProviderType> = location.state.usr
-
     const { data, address } = useMemo(() => {
         if (
-            value?.computedPayload?.type === EthereumRpcType.SIGN ||
-            value?.computedPayload?.type === EthereumRpcType.SIGN_TYPED_DATA
+            (value?.payload?.method === EthereumMethodType.ETH_SIGN ||
+                value?.payload?.method === EthereumMethodType.ETH_SIGN_TYPED_DATA) &&
+            value.computedPayload?.data
         ) {
-            let message = value.computedPayload.data
+            let message = value.computedPayload?.data
+
             try {
-                message = toUtf8(value.computedPayload.data)
+                message = toUtf8(value.computedPayload?.data)
             } catch (error) {
                 console.log(error)
             }
@@ -117,23 +117,21 @@ const SignRequest = memo(() => {
     }, [value])
 
     const [{ loading }, handleConfirm] = useAsyncFn(async () => {
-        const goBack = new URLSearchParams(routeLocation.search).get('goBack')
-
-        if (value) {
+        if (value && connection?.confirmRequest) {
             try {
-                await Services.Ethereum.confirmRequest(value.payload, !!goBack)
+                await connection.confirmRequest()
                 navigate(-1)
             } catch (error_) {
                 setTransferError(true)
             }
         }
-    }, [value, routeLocation.search, selectedWallet])
+    }, [value, routeLocation.search, connection])
 
     const [{ loading: rejectLoading }, handleReject] = useAsyncFn(async () => {
-        if (!value) return
-        await Services.Ethereum.rejectRequest(value.payload)
+        if (!value || !connection?.rejectRequest) return
+        await connection.rejectRequest()
         navigate(PopupRoutes.Wallet, { replace: true })
-    }, [value])
+    }, [value, connection])
 
     useTitle(t('popups_wallet_signature_request_title'))
 
diff --git a/packages/mask/src/extension/popups/pages/Wallet/SwitchWallet/WalletItem.tsx b/packages/mask/src/extension/popups/pages/Wallet/SwitchWallet/WalletItem.tsx
index 79200150f80d..6f683b046a54 100644
--- a/packages/mask/src/extension/popups/pages/Wallet/SwitchWallet/WalletItem.tsx
+++ b/packages/mask/src/extension/popups/pages/Wallet/SwitchWallet/WalletItem.tsx
@@ -1,16 +1,12 @@
-import type { Wallet } from '@masknet/web3-shared-evm'
-import { formatEthereumAddress } from '@masknet/web3-shared-evm'
+import { memo } from 'react'
 import { makeStyles } from '@masknet/theme'
-import { memo, useCallback } from 'react'
-import { EditIcon, MaskWalletIcon, SettingIcon, SuccessIcon } from '@masknet/icons'
-import { NetworkPluginID, useReverseAddress, useWeb3State } from '@masknet/plugin-infra/web3'
+import { formatEthereumAddress } from '@masknet/web3-shared-evm'
+import { NetworkPluginID, Wallet } from '@masknet/web3-shared-base'
+import { useReverseAddress, useWeb3State } from '@masknet/plugin-infra/web3'
+import { MaskWalletIcon, SuccessIcon } from '@masknet/icons'
 import { ListItem, ListItemText, Typography } from '@mui/material'
 import { FormattedAddress } from '@masknet/shared'
 import { CopyIconButton } from '../../../components/CopyIconButton'
-import { WalletContext } from '../hooks/useWalletContext'
-import { useNavigate } from 'react-router-dom'
-import { PopupRoutes } from '@masknet/shared-base'
-import { useHover } from 'react-use'
 
 const useStyles = makeStyles()({
     item: {
@@ -69,53 +65,25 @@ export interface WalletItemProps {
 
 export const WalletItem = memo<WalletItemProps>(({ wallet, onClick, isSelected }) => {
     const { classes } = useStyles()
-    const { Utils } = useWeb3State()
-    const navigate = useNavigate()
-    const { setSelectedWallet } = WalletContext.useContainer()
-    const { value: domain } = useReverseAddress(wallet.address, NetworkPluginID.PLUGIN_EVM)
-
-    const handleRename = useCallback(
-        (event: React.MouseEvent<HTMLOrSVGElement>) => {
-            event.stopPropagation()
-            setSelectedWallet(wallet)
-            navigate(PopupRoutes.WalletRename)
-        },
-        [wallet],
-    )
+    const { Others } = useWeb3State()
+    const { value: domain } = useReverseAddress(NetworkPluginID.PLUGIN_EVM, wallet.address)
 
-    const handleEdit = useCallback(
-        (event: React.MouseEvent<HTMLOrSVGElement>) => {
-            event.stopPropagation()
-            setSelectedWallet(wallet)
-            navigate(PopupRoutes.WalletSettings)
-        },
-        [wallet],
-    )
-
-    const [element] = useHover((isHovering) => (
+    return (
         <ListItem className={classes.item} onClick={onClick} style={{ paddingRight: isSelected ? 10 : 42 }}>
             <MaskWalletIcon />
             <ListItemText className={classes.text}>
                 <Typography className={classes.name}>
-                    <Typography component="span" display="flex" alignItems="center">
-                        {wallet.name}
-                        {domain && Utils?.formatDomainName ? (
-                            <Typography component="span" className={classes.domain}>
-                                ({Utils.formatDomainName(domain)})
-                            </Typography>
-                        ) : null}
-                        {isHovering ? <EditIcon className={classes.edit} onClick={handleRename} /> : null}
-                    </Typography>
+                    <Typography component="span">{wallet.name}</Typography>
+                    {domain && Others?.formatDomainName ? (
+                        <Typography component="span">{Others.formatDomainName(domain)}</Typography>
+                    ) : null}
                 </Typography>
                 <Typography className={classes.address}>
-                    <FormattedAddress address={wallet.address} size={4} formatter={formatEthereumAddress} />
+                    <FormattedAddress address={wallet.address} size={16} formatter={formatEthereumAddress} />
                     <CopyIconButton className={classes.copy} text={wallet.address} />
-                    <SettingIcon className={classes.setting} onClick={handleEdit} />
                 </Typography>
             </ListItemText>
-            {isSelected ? <SuccessIcon style={{ marginLeft: 8, fontSize: 18 }} /> : null}
+            {isSelected ? <SuccessIcon style={{ marginLeft: 8 }} /> : null}
         </ListItem>
-    ))
-
-    return element
+    )
 })
diff --git a/packages/mask/src/extension/popups/pages/Wallet/SwitchWallet/index.tsx b/packages/mask/src/extension/popups/pages/Wallet/SwitchWallet/index.tsx
index 918694786c52..db4f2fd6a434 100644
--- a/packages/mask/src/extension/popups/pages/Wallet/SwitchWallet/index.tsx
+++ b/packages/mask/src/extension/popups/pages/Wallet/SwitchWallet/index.tsx
@@ -1,15 +1,16 @@
 import { memo, useCallback } from 'react'
 import { Button, List } from '@mui/material'
 import { makeStyles } from '@masknet/theme'
-import { isSameAddress, ProviderType, useWallet, useWallets, useWalletPrimary } from '@masknet/web3-shared-evm'
+import { isSameAddress, NetworkPluginID } from '@masknet/web3-shared-base'
 import { useNavigate } from 'react-router-dom'
 import { PopupRoutes } from '@masknet/shared-base'
 import { useI18N } from '../../../../../utils'
 import { WalletRPC } from '../../../../../plugins/Wallet/messages'
-import { currentProviderSettings } from '../../../../../plugins/Wallet/settings'
+import { NetworkSelector } from '../../../components/NetworkSelector'
 import { WalletItem } from './WalletItem'
 import { MAX_WALLET_LIMIT } from '@masknet/shared'
 import classNames from 'classnames'
+import { useWallet, useWalletPrimary, useWallets } from '@masknet/plugin-infra/web3'
 
 const useStyles = makeStyles()({
     header: {
@@ -25,9 +26,9 @@ const useStyles = makeStyles()({
         flexDirection: 'column',
     },
     list: {
-        backgroundColor: '#F7F9FA',
+        backgroundColor: '#ffffff',
         padding: 0,
-        height: 'calc(100vh - 132px)',
+        height: 'calc(100vh - 168px)',
         overflow: 'auto',
     },
     item: {
@@ -43,7 +44,7 @@ const useStyles = makeStyles()({
     },
     copy: {
         fontSize: 12,
-        fill: '#1C68F3',
+        stroke: '#1C68F3',
         marginLeft: 4,
         cursor: 'pointer',
     },
@@ -75,19 +76,17 @@ const useStyles = makeStyles()({
     secondaryButton: {
         backgroundColor: '#F7F9FA',
         color: '#1C68F3',
-        '&: hover': {
-            backgroundColor: '#dee0e1',
-        },
     },
 })
 
 const SwitchWallet = memo(() => {
     const { t } = useI18N()
-    const walletPrimary = useWalletPrimary()
     const { classes } = useStyles()
+
     const navigate = useNavigate()
-    const wallet = useWallet()
-    const wallets = useWallets(ProviderType.MaskWallet)
+    const wallet = useWallet(NetworkPluginID.PLUGIN_EVM)
+    const wallets = useWallets(NetworkPluginID.PLUGIN_EVM)
+    const walletPrimary = useWalletPrimary(NetworkPluginID.PLUGIN_EVM)
 
     const handleClickCreate = useCallback(() => {
         if (!walletPrimary) {
@@ -98,21 +97,24 @@ const SwitchWallet = memo(() => {
         } else {
             navigate(PopupRoutes.CreateWallet)
         }
-    }, [walletPrimary])
-
-    const handleSelect = useCallback(async (address: string) => {
-        await WalletRPC.updateMaskAccount({
-            account: address,
-        })
+    }, [walletPrimary, history])
 
-        if (currentProviderSettings.value === ProviderType.MaskWallet)
-            await WalletRPC.updateAccount({ account: address, providerType: ProviderType.MaskWallet })
+    const handleSelect = useCallback(
+        async (address: string | undefined) => {
+            await WalletRPC.updateMaskAccount({
+                account: address,
+            })
 
-        navigate(PopupRoutes.Wallet, { replace: true })
-    }, [])
+            navigate(PopupRoutes.Wallet, { replace: true })
+        },
+        [history],
+    )
 
     return (
         <>
+            <div className={classes.header}>
+                <NetworkSelector />
+            </div>
             <div className={classes.content}>
                 <List dense className={classes.list}>
                     {wallets.map((item, index) => (
diff --git a/packages/mask/src/extension/popups/pages/Wallet/TokenDetail/index.tsx b/packages/mask/src/extension/popups/pages/Wallet/TokenDetail/index.tsx
index a84260055a5d..1b4b946a31d4 100644
--- a/packages/mask/src/extension/popups/pages/Wallet/TokenDetail/index.tsx
+++ b/packages/mask/src/extension/popups/pages/Wallet/TokenDetail/index.tsx
@@ -12,19 +12,14 @@ import { getTokenUSDValue } from '../../../../../plugins/Wallet/helpers'
 import { InteractionCircleIcon } from '@masknet/icons'
 import { useI18N } from '../../../../../utils'
 import { PluginTransakMessages } from '../../../../../plugins/Transak/messages'
-import {
-    formatBalance,
-    formatCurrency,
-    isSameAddress,
-    useNativeTokenDetailed,
-    useWallet,
-} from '@masknet/web3-shared-evm'
 import Services from '../../../../service'
 import { compact, intersectionWith } from 'lodash-unified'
 import urlcat from 'urlcat'
 import { ActivityList } from '../components/ActivityList'
 import { openWindow } from '@masknet/shared-base-ui'
 import { useTitle } from '../../../hook/useTitle'
+import { formatBalance, formatCurrency, isSameAddress, NetworkPluginID } from '@masknet/web3-shared-base'
+import { useNativeToken, useWallet } from '@masknet/plugin-infra/web3'
 
 const useStyles = makeStyles()({
     content: {
@@ -69,10 +64,10 @@ const useStyles = makeStyles()({
 const TokenDetail = memo(() => {
     const { t } = useI18N()
     const { classes } = useStyles()
-    const wallet = useWallet()
+    const wallet = useWallet(NetworkPluginID.PLUGIN_EVM)
     const navigate = useNavigate()
     const { currentToken } = useContainer(WalletContext)
-    const { value: nativeToken } = useNativeTokenDetailed()
+    const { value: nativeToken } = useNativeToken(NetworkPluginID.PLUGIN_EVM)
 
     const { value: isActiveSocialNetwork } = useAsync(async () => {
         const urls = compact((await browser.tabs.query({ active: true })).map((tab) => tab.url))
@@ -88,12 +83,12 @@ const TokenDetail = memo(() => {
             PluginTransakMessages.buyTokenDialogUpdated.sendToVisiblePages({
                 open: true,
                 address: wallet?.address ?? '',
-                code: currentToken?.token.symbol ?? currentToken?.token.name,
+                code: currentToken?.symbol ?? currentToken?.name,
             })
         } else {
             const url = urlcat('dashboard.html#', 'labs', {
                 open: 'Transak',
-                code: currentToken?.token.symbol ?? currentToken?.token.name,
+                code: currentToken?.symbol ?? currentToken?.name,
             })
             openWindow(browser.runtime.getURL(url), 'BUY_DIALOG')
         }
@@ -103,13 +98,13 @@ const TokenDetail = memo(() => {
         const url = urlcat(
             'popups.html#/',
             PopupRoutes.Swap,
-            !isSameAddress(nativeToken?.address, currentToken?.token.address)
+            !isSameAddress(nativeToken?.address, currentToken?.address)
                 ? {
-                      id: currentToken?.token.address,
-                      name: currentToken?.token.name,
-                      symbol: currentToken?.token.symbol,
-                      contract_address: currentToken?.token.address,
-                      decimals: currentToken?.token.decimals,
+                      id: currentToken?.address,
+                      name: currentToken?.name,
+                      symbol: currentToken?.symbol,
+                      contract_address: currentToken?.address,
+                      decimals: currentToken?.decimals,
                   }
                 : {},
         )
@@ -125,17 +120,17 @@ const TokenDetail = memo(() => {
             <div className={classes.content}>
                 <TokenIcon
                     classes={{ icon: classes.tokenIcon }}
-                    address={currentToken.token.address}
-                    name={currentToken.token.name}
-                    chainId={currentToken.token.chainId}
-                    logoURI={currentToken.token.logoURI}
+                    address={currentToken.address}
+                    name={currentToken.name}
+                    chainId={currentToken.chainId}
+                    logoURI={currentToken.logoURL}
                     AvatarProps={{ sx: { width: 24, height: 24 } }}
                 />
                 <Typography className={classes.balance}>
                     <FormattedBalance
                         value={currentToken.balance}
-                        decimals={currentToken.token.decimals}
-                        symbol={currentToken.token.symbol}
+                        decimals={currentToken.decimals}
+                        symbol={currentToken.symbol}
                         significant={4}
                         formatter={formatBalance}
                     />
@@ -158,7 +153,7 @@ const TokenDetail = memo(() => {
                     </div>
                 </div>
             </div>
-            <ActivityList tokenAddress={currentToken.token.address} />
+            <ActivityList tokenAddress={currentToken.address} />
         </>
     )
 })
diff --git a/packages/mask/src/extension/popups/pages/Wallet/Transfer/AccountItem.tsx b/packages/mask/src/extension/popups/pages/Wallet/Transfer/AccountItem.tsx
index e10a20883830..e62913ffeda5 100644
--- a/packages/mask/src/extension/popups/pages/Wallet/Transfer/AccountItem.tsx
+++ b/packages/mask/src/extension/popups/pages/Wallet/Transfer/AccountItem.tsx
@@ -1,9 +1,10 @@
 import { memo } from 'react'
 import { MenuItem, Typography } from '@mui/material'
 import { FormattedAddress } from '@masknet/shared'
+import { NetworkPluginID } from '@masknet/web3-shared-base'
 import { formatEthereumAddress } from '@masknet/web3-shared-evm'
 import { makeStyles } from '@masknet/theme'
-import { NetworkPluginID, useReverseAddress, useWeb3State } from '@masknet/plugin-infra/web3'
+import { useReverseAddress, useWeb3State } from '@masknet/plugin-infra/web3'
 
 const useStyles = makeStyles()({
     menuItem: {
@@ -36,16 +37,16 @@ export interface AccountItemProps {
 
 export const AccountItem = memo<AccountItemProps>(({ account, onClick }) => {
     const { classes } = useStyles()
-    const { Utils } = useWeb3State()
-    const { value: domain } = useReverseAddress(account.address, NetworkPluginID.PLUGIN_EVM)
+    const { Others } = useWeb3State()
+    const { value: domain } = useReverseAddress(NetworkPluginID.PLUGIN_EVM, account.address)
 
     return (
         <MenuItem className={classes.menuItem} onClick={onClick}>
             <Typography display="flex">
                 {account.name}
-                {domain && Utils?.formatDomainName ? (
+                {domain && Others?.formatDomainName ? (
                     <Typography component="span" className={classes.domain}>
-                        {Utils.formatDomainName(domain)}
+                        {Others.formatDomainName(domain)}
                     </Typography>
                 ) : null}
             </Typography>
diff --git a/packages/mask/src/extension/popups/pages/Wallet/Transfer/Prior1559Transfer.tsx b/packages/mask/src/extension/popups/pages/Wallet/Transfer/Prior1559Transfer.tsx
index 10ef1fda1fa4..2717f6143661 100644
--- a/packages/mask/src/extension/popups/pages/Wallet/Transfer/Prior1559Transfer.tsx
+++ b/packages/mask/src/extension/popups/pages/Wallet/Transfer/Prior1559Transfer.tsx
@@ -3,21 +3,19 @@ import { useI18N } from '../../../../../utils'
 import { z as zod } from 'zod'
 import BigNumber from 'bignumber.js'
 import { EthereumAddress } from 'wallet.ts'
+import { formatGweiToWei, formatWeiToGwei, formatEthereumAddress, ChainId, SchemaType } from '@masknet/web3-shared-evm'
 import {
-    Asset,
-    EthereumTokenType,
-    formatBalance,
-    formatGweiToWei,
-    formatWeiToGwei,
-    formatEthereumAddress,
-    useChainId,
-    useGasLimit,
-    useTokenTransferCallback,
-    useWallet,
-    useFungibleTokenBalance,
+    isZero,
+    isGreaterThan,
+    isGreaterThanOrEqualTo,
+    multipliedBy,
+    rightShift,
     isSameAddress,
-} from '@masknet/web3-shared-evm'
-import { isZero, isGreaterThan, isGreaterThanOrEqualTo, multipliedBy, rightShift } from '@masknet/web3-shared-base'
+    formatBalance,
+    NetworkPluginID,
+    FungibleAsset,
+    GasOptionType,
+} from '@masknet/web3-shared-base'
 import { Controller, FormProvider, useForm, useFormContext } from 'react-hook-form'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { useAsync, useAsyncFn, useUpdateEffect } from 'react-use'
@@ -31,10 +29,16 @@ import { makeStyles } from '@masknet/theme'
 import { ExpandMore } from '@mui/icons-material'
 import { useNavigate } from 'react-router-dom'
 import { LoadingButton } from '@mui/lab'
-import { WalletRPC } from '../../../../../plugins/Wallet/messages'
 import { toHex } from 'web3-utils'
-import Services from '../../../../service'
 import { TransferAddressError } from '../type'
+import {
+    useChainId,
+    useFungibleTokenBalance,
+    useWallet,
+    useWeb3Connection,
+    useWeb3Hub,
+} from '@masknet/plugin-infra/web3'
+import { useGasLimit, useTokenTransferCallback } from '@masknet/plugin-infra/web3-evm'
 
 const useStyles = makeStyles()({
     container: {
@@ -145,7 +149,7 @@ const useStyles = makeStyles()({
 })
 
 export interface Prior1559TransferProps {
-    selectedAsset?: Asset
+    selectedAsset?: FungibleAsset<ChainId, SchemaType>
     otherWallets: Array<{ name: string; address: string }>
     openAssetMenu: (anchorElOrEvent: HTMLElement | SyntheticEvent<HTMLElement>) => void
 }
@@ -153,8 +157,10 @@ export interface Prior1559TransferProps {
 export const Prior1559Transfer = memo<Prior1559TransferProps>(({ selectedAsset, openAssetMenu, otherWallets }) => {
     const { t } = useI18N()
     const { classes } = useStyles()
-    const wallet = useWallet()
-    const chainId = useChainId()
+    const connection = useWeb3Connection(NetworkPluginID.PLUGIN_EVM)
+    const wallet = useWallet(NetworkPluginID.PLUGIN_EVM)
+    const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
+    const hub = useWeb3Hub(NetworkPluginID.PLUGIN_EVM)
     const [minGasLimitContext, setMinGasLimitContext] = useState(0)
     const navigate = useNavigate()
 
@@ -169,13 +175,13 @@ export const Prior1559Transfer = memo<Prior1559TransferProps>(({ selectedAsset,
             amount: zod
                 .string()
                 .refine((amount) => {
-                    const transferAmount = rightShift(amount || '0', selectedAsset?.token.decimals)
+                    const transferAmount = rightShift(amount || '0', selectedAsset?.decimals)
                     return !!transferAmount || !isZero(transferAmount)
                 }, t('wallet_transfer_error_amount_absence'))
                 .refine((amount) => {
-                    const transferAmount = rightShift(amount || '0', selectedAsset?.token.decimals)
+                    const transferAmount = rightShift(amount || '0', selectedAsset?.decimals)
                     return !isGreaterThan(transferAmount, selectedAsset?.balance ?? 0)
-                }, t('wallet_transfer_error_insufficient_balance', { symbol: selectedAsset?.token.symbol })),
+                }, t('wallet_transfer_error_insufficient_balance', { symbol: selectedAsset?.symbol })),
             gasLimit: zod
                 .string()
                 .min(1, t('wallet_transfer_error_gas_limit_absence'))
@@ -226,7 +232,8 @@ export const Prior1559Transfer = memo<Prior1559TransferProps>(({ selectedAsset,
             })
             return
         }
-        const result = await Services.Ethereum.getCode(address)
+
+        const result = await connection?.getCode(address)
 
         if (result !== '0x') {
             setAddressTip({
@@ -234,42 +241,40 @@ export const Prior1559Transfer = memo<Prior1559TransferProps>(({ selectedAsset,
                 message: t('wallet_transfer_error_is_contract_address'),
             })
         }
-    }, [address, EthereumAddress.isValid, methods.clearErrors])
+    }, [address, EthereumAddress.isValid, methods.clearErrors, connection])
 
     // #region Set default gas price
     useAsync(async () => {
-        const gasOptions = await WalletRPC.getGasPriceDictFromDeBank(chainId)
+        const gasOptions = await hub?.getGasOptions?.(chainId)
+
         const gasPrice = methods.getValues('gasPrice')
         if (gasOptions && !gasPrice) {
-            const gasPrice = new BigNumber(gasOptions.data.fast.price)
+            const gasPrice = new BigNumber(gasOptions[GasOptionType.FAST].suggestedMaxFeePerGas)
             methods.setValue('gasPrice', formatWeiToGwei(gasPrice).toString())
         }
-    }, [methods.setValue, methods.getValues, chainId])
+    }, [methods.setValue, methods.getValues, chainId, hub])
     // #endregion
 
     // #region Get min gas limit with amount and recipient address
     const { value: minGasLimit, error } = useGasLimit(
-        selectedAsset?.token.type,
-        selectedAsset?.token.address,
-        rightShift(amount ? amount : 0, selectedAsset?.token.decimals).toFixed(),
+        selectedAsset?.schema,
+        selectedAsset?.address,
+        rightShift(amount ? amount : 0, selectedAsset?.decimals).toFixed(),
         EthereumAddress.isValid(address) ? address : '',
     )
     // #endregion
 
     const { value: tokenBalance = '0' } = useFungibleTokenBalance(
-        selectedAsset?.token?.type ?? EthereumTokenType.Native,
-        selectedAsset?.token?.address ?? '',
+        NetworkPluginID.PLUGIN_EVM,
+        selectedAsset?.address ?? '',
     )
 
     const maxAmount = useMemo(() => {
         let amount_ = new BigNumber(tokenBalance || '0')
-        amount_ =
-            selectedAsset?.token.type === EthereumTokenType.Native
-                ? amount_.minus(multipliedBy(30000, gasPrice))
-                : amount_
+        amount_ = selectedAsset?.schema === SchemaType.Native ? amount_.minus(multipliedBy(30000, gasPrice)) : amount_
 
         return BigNumber.max(0, amount_).toFixed()
-    }, [selectedAsset?.balance, gasPrice, selectedAsset?.token.type, tokenBalance])
+    }, [selectedAsset?.balance, gasPrice, selectedAsset?.type, tokenBalance])
 
     // #region set default gasLimit
     useUpdateEffect(() => {
@@ -280,17 +285,17 @@ export const Prior1559Transfer = memo<Prior1559TransferProps>(({ selectedAsset,
     // #endregion
 
     const [_, transferCallback] = useTokenTransferCallback(
-        selectedAsset?.token.type ?? EthereumTokenType.Native,
-        selectedAsset?.token.address ?? '',
+        selectedAsset?.schema ?? SchemaType.Native,
+        selectedAsset?.address ?? '',
     )
 
     const handleMaxClick = useCallback(() => {
-        methods.setValue('amount', formatBalance(maxAmount, selectedAsset?.token.decimals))
+        methods.setValue('amount', formatBalance(maxAmount, selectedAsset?.decimals))
     }, [methods.setValue, selectedAsset, maxAmount])
 
     const [{ loading }, onSubmit] = useAsyncFn(
         async (data: zod.infer<typeof schema>) => {
-            const transferAmount = rightShift(data.amount || '0', selectedAsset?.token.decimals).toFixed()
+            const transferAmount = rightShift(data.amount || '0', selectedAsset?.decimals).toFixed()
             await transferCallback(transferAmount, data.address, {
                 gasPrice: toHex(formatGweiToWei(data.gasPrice).toString()),
                 gas: new BigNumber(data.gasLimit).toNumber(),
@@ -368,7 +373,7 @@ export interface Prior1559TransferUIProps {
     openAccountMenu: (anchorElOrEvent: HTMLElement | SyntheticEvent<HTMLElement>) => void
     openAssetMenu: (anchorElOrEvent: HTMLElement | SyntheticEvent<HTMLElement>) => void
     handleMaxClick: () => void
-    selectedAsset?: Asset
+    selectedAsset?: FungibleAsset<ChainId, SchemaType>
     handleCancel: () => void
     handleConfirm: () => void
     confirmLoading: boolean
@@ -403,10 +408,10 @@ export const Prior1559TransferUI = memo<Prior1559TransferUIProps>(
 
         const { RE_MATCH_WHOLE_AMOUNT, RE_MATCH_FRACTION_AMOUNT } = useMemo(
             () => ({
-                RE_MATCH_FRACTION_AMOUNT: new RegExp(`^\\.\\d{0,${selectedAsset?.token.decimals}}$`), // .ddd...d
-                RE_MATCH_WHOLE_AMOUNT: new RegExp(`^\\d*\\.?\\d{0,${selectedAsset?.token.decimals}}$`), // d.ddd...d
+                RE_MATCH_FRACTION_AMOUNT: new RegExp(`^\\.\\d{0,${selectedAsset?.decimals}}$`), // .ddd...d
+                RE_MATCH_WHOLE_AMOUNT: new RegExp(`^\\d*\\.?\\d{0,${selectedAsset?.decimals}}$`), // d.ddd...d
             }),
-            [selectedAsset?.token.decimals],
+            [selectedAsset?.decimals],
         )
 
         const {
@@ -463,8 +468,8 @@ export const Prior1559TransferUI = memo<Prior1559TransferUIProps>(
                             {t('wallet_balance')}:
                             <FormattedBalance
                                 value={maxAmount}
-                                decimals={selectedAsset?.token?.decimals}
-                                symbol={selectedAsset?.token?.symbol}
+                                decimals={selectedAsset?.decimals}
+                                symbol={selectedAsset?.symbol}
                                 significant={6}
                                 formatter={formatBalance}
                             />
@@ -510,9 +515,9 @@ export const Prior1559TransferUI = memo<Prior1559TransferUIProps>(
                                                     icon={
                                                         <TokenIcon
                                                             classes={{ icon: classes.icon }}
-                                                            address={selectedAsset?.token.address ?? ''}
-                                                            name={selectedAsset?.token.name}
-                                                            logoURI={selectedAsset?.token.logoURI}
+                                                            address={selectedAsset?.address ?? ''}
+                                                            name={selectedAsset?.name}
+                                                            logoURI={selectedAsset?.logoURL}
                                                         />
                                                     }
                                                     deleteIcon={<ChevronDown className={classes.icon} />}
@@ -520,7 +525,7 @@ export const Prior1559TransferUI = memo<Prior1559TransferUIProps>(
                                                     size="small"
                                                     variant="outlined"
                                                     clickable
-                                                    label={selectedAsset?.token.symbol}
+                                                    label={selectedAsset?.symbol}
                                                     onDelete={noop}
                                                 />
                                             </Box>
diff --git a/packages/mask/src/extension/popups/pages/Wallet/Transfer/Transfer1559.tsx b/packages/mask/src/extension/popups/pages/Wallet/Transfer/Transfer1559.tsx
index b250aa196786..61785b3106b4 100644
--- a/packages/mask/src/extension/popups/pages/Wallet/Transfer/Transfer1559.tsx
+++ b/packages/mask/src/extension/popups/pages/Wallet/Transfer/Transfer1559.tsx
@@ -1,38 +1,32 @@
 import { memo, ReactElement, SyntheticEvent, useCallback, useMemo, useRef, useState } from 'react'
-import { useI18N } from '../../../../../utils'
 import {
     addGasMargin,
-    Asset,
-    EthereumTokenType,
-    formatBalance,
+    ChainId,
+    explorerResolver,
     formatEthereumAddress,
     formatGweiToEther,
     formatGweiToWei,
-    isSameAddress,
     NetworkType,
-    useChainId,
-    useFungibleTokenBalance,
-    useGasLimit,
-    useNativeTokenDetailed,
-    useNetworkType,
-    useTokenTransferCallback,
-    useWallet,
+    SchemaType,
 } from '@masknet/web3-shared-evm'
 import {
+    formatBalance,
+    FungibleAsset,
     isGreaterThan,
     isGreaterThanOrEqualTo,
     isLessThan,
     isLessThanOrEqualTo,
     isPositive,
+    isSameAddress,
     isZero,
     multipliedBy,
+    NetworkPluginID,
     rightShift,
 } from '@masknet/web3-shared-base'
 import { z as zod } from 'zod'
 import { EthereumAddress } from 'wallet.ts'
 import BigNumber from 'bignumber.js'
 import { useAsync, useAsyncFn, useUpdateEffect } from 'react-use'
-import { WalletRPC } from '../../../../../plugins/Wallet/messages'
 import { Controller, FormProvider, useForm, useFormContext } from 'react-hook-form'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { makeStyles } from '@masknet/theme'
@@ -45,12 +39,23 @@ import { noop } from 'lodash-unified'
 import { ExpandMore } from '@mui/icons-material'
 import { useNavigate } from 'react-router-dom'
 import { LoadingButton } from '@mui/lab'
-import { useNativeTokenPrice } from '../../../../../plugins/Wallet/hooks/useTokenPrice'
 import { toHex } from 'web3-utils'
-import { NetworkPluginID, useLookupAddress, useWeb3State } from '@masknet/plugin-infra/web3'
+import {
+    useChainId,
+    useFungibleToken,
+    useFungibleTokenBalance,
+    useLookupAddress,
+    useNativeTokenPrice,
+    useNetworkType,
+    useWallet,
+    useWeb3State,
+    useWeb3Connection,
+    useGasOptions,
+} from '@masknet/plugin-infra/web3'
 import { AccountItem } from './AccountItem'
-import Services from '../../../../service'
 import { TransferAddressError } from '../type'
+import { useI18N } from '../../../../../utils'
+import { useGasLimit, useTokenTransferCallback } from '@masknet/plugin-infra/web3-evm'
 
 const useStyles = makeStyles()({
     container: {
@@ -175,7 +180,7 @@ const useStyles = makeStyles()({
 })
 const MIN_GAS_LIMIT = 21000
 export interface Transfer1559Props {
-    selectedAsset?: Asset
+    selectedAsset?: FungibleAsset<ChainId, SchemaType>
     otherWallets: Array<{ name: string; address: string }>
     openAssetMenu: (anchorElOrEvent: HTMLElement | SyntheticEvent<HTMLElement>) => void
 }
@@ -185,22 +190,26 @@ const HIGH_FEE_WARNING_MULTIPLIER = 1.5
 export const Transfer1559 = memo<Transfer1559Props>(({ selectedAsset, openAssetMenu, otherWallets }) => {
     const { t } = useI18N()
     const { classes } = useStyles()
-    const wallet = useWallet()
 
-    const chainId = useChainId()
-    const network = useNetworkType()
+    const wallet = useWallet(NetworkPluginID.PLUGIN_EVM)
+    const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
+    const network = useNetworkType(NetworkPluginID.PLUGIN_EVM)
+    const connection = useWeb3Connection(NetworkPluginID.PLUGIN_EVM)
+    const { Others } = useWeb3State(NetworkPluginID.PLUGIN_EVM)
+    const { value: nativeToken } = useFungibleToken(NetworkPluginID.PLUGIN_EVM)
+
     const navigate = useNavigate()
 
     const [minGasLimitContext, setMinGasLimitContext] = useState(0)
     const [addressTip, setAddressTip] = useState<{ type: TransferAddressError; message: string } | null>()
 
-    const { value: nativeToken } = useNativeTokenDetailed()
-
-    const etherPrice = useNativeTokenPrice(nativeToken?.chainId)
-
-    const { value: estimateGasFees } = useAsync(async () => WalletRPC.getEstimateGasFees(chainId), [chainId])
+    const { value: etherPrice } = useNativeTokenPrice(NetworkPluginID.PLUGIN_EVM, {
+        chainId: nativeToken?.chainId,
+    })
 
-    const { Utils } = useWeb3State()
+    const { value: estimateGasFees } = useGasOptions(NetworkPluginID.PLUGIN_EVM, {
+        chainId,
+    })
 
     const schema = useMemo(() => {
         return zod
@@ -209,19 +218,19 @@ export const Transfer1559 = memo<Transfer1559Props>(({ selectedAsset, openAssetM
                     .string()
                     .min(1, t('wallet_transfer_error_address_absence'))
                     .refine(
-                        (address) => EthereumAddress.isValid(address) || Utils?.isValidDomain?.(address),
+                        (address) => EthereumAddress.isValid(address) || Others?.isValidDomain?.(address),
                         t('wallet_transfer_error_invalid_address'),
                     ),
                 amount: zod
                     .string()
                     .refine((amount) => {
-                        const transferAmount = rightShift(amount || '0', selectedAsset?.token.decimals)
+                        const transferAmount = rightShift(amount || '0', selectedAsset?.decimals)
                         return !!transferAmount || !isZero(transferAmount)
                     }, t('wallet_transfer_error_amount_absence'))
                     .refine((amount) => {
-                        const transferAmount = rightShift(amount || '0', selectedAsset?.token.decimals)
+                        const transferAmount = rightShift(amount || '0', selectedAsset?.decimals)
                         return !isGreaterThan(transferAmount, selectedAsset?.balance ?? 0)
-                    }, t('wallet_transfer_error_insufficient_balance', { symbol: selectedAsset?.token.symbol })),
+                    }, t('wallet_transfer_error_insufficient_balance', { symbol: selectedAsset?.symbol })),
                 gasLimit: zod
                     .string()
                     .min(1, t('wallet_transfer_error_gas_limit_absence'))
@@ -234,14 +243,14 @@ export const Transfer1559 = memo<Transfer1559Props>(({ selectedAsset, openAssetM
                     .min(1, t('wallet_transfer_error_max_priority_fee_absence'))
                     .refine(isPositive, t('wallet_transfer_error_max_priority_gas_fee_positive'))
                     .refine((value) => {
-                        return isGreaterThanOrEqualTo(value, estimateGasFees?.low?.suggestedMaxPriorityFeePerGas ?? 0)
+                        return isGreaterThanOrEqualTo(value, estimateGasFees?.slow?.suggestedMaxPriorityFeePerGas ?? 0)
                     }, t('wallet_transfer_error_max_priority_gas_fee_too_low'))
                     .refine(
                         (value) =>
                             isLessThan(
                                 value,
                                 multipliedBy(
-                                    estimateGasFees?.high?.suggestedMaxPriorityFeePerGas ?? 0,
+                                    estimateGasFees?.fast?.suggestedMaxPriorityFeePerGas ?? 0,
                                     HIGH_FEE_WARNING_MULTIPLIER,
                                 ),
                             ),
@@ -251,7 +260,7 @@ export const Transfer1559 = memo<Transfer1559Props>(({ selectedAsset, openAssetM
                     .string()
                     .min(1, t('wallet_transfer_error_max_fee_absence'))
                     .refine(
-                        (value) => isGreaterThanOrEqualTo(value, estimateGasFees?.low?.suggestedMaxFeePerGas ?? 0),
+                        (value) => isGreaterThanOrEqualTo(value, estimateGasFees?.slow?.suggestedMaxFeePerGas ?? 0),
                         t('wallet_transfer_error_max_fee_too_low'),
                     )
                     .refine(
@@ -259,7 +268,7 @@ export const Transfer1559 = memo<Transfer1559Props>(({ selectedAsset, openAssetM
                             isLessThan(
                                 value,
                                 multipliedBy(
-                                    estimateGasFees?.high?.suggestedMaxFeePerGas ?? 0,
+                                    estimateGasFees?.fast?.suggestedMaxFeePerGas ?? 0,
                                     HIGH_FEE_WARNING_MULTIPLIER,
                                 ),
                             ),
@@ -270,7 +279,7 @@ export const Transfer1559 = memo<Transfer1559Props>(({ selectedAsset, openAssetM
                 message: t('wallet_transfer_error_max_priority_gas_fee_imbalance'),
                 path: ['maxFeePerGas'],
             })
-    }, [wallet, selectedAsset, minGasLimitContext, estimateGasFees, Utils])
+    }, [wallet, selectedAsset, minGasLimitContext, estimateGasFees, Others])
 
     const methods = useForm<zod.infer<typeof schema>>({
         shouldUnregister: false,
@@ -279,7 +288,7 @@ export const Transfer1559 = memo<Transfer1559Props>(({ selectedAsset, openAssetM
         defaultValues: {
             address: '',
             amount: '',
-            gasLimit: selectedAsset?.token.type === EthereumTokenType.Native ? '21000' : '0',
+            gasLimit: selectedAsset?.schema === SchemaType.Native ? '21000' : '0',
             maxPriorityFeePerGas: '',
             maxFeePerGas: '',
         },
@@ -298,7 +307,7 @@ export const Transfer1559 = memo<Transfer1559Props>(({ selectedAsset, openAssetM
         value: registeredAddress = '',
         error: resolveDomainError,
         loading: resolveDomainLoading,
-    } = useLookupAddress(address, NetworkPluginID.PLUGIN_EVM)
+    } = useLookupAddress(NetworkPluginID.PLUGIN_EVM, address)
     // #endregion
 
     // #region check address or registered address type
@@ -313,7 +322,7 @@ export const Transfer1559 = memo<Transfer1559Props>(({ selectedAsset, openAssetM
         }
 
         // The input is ens domain but the binding address cannot be found
-        if (Utils?.isValidDomain?.(address) && (resolveDomainError || !registeredAddress)) {
+        if (Others?.isValidDomain?.(address) && (resolveDomainError || !registeredAddress)) {
             setAddressTip({
                 type: TransferAddressError.RESOLVE_FAILED,
                 message: t('wallet_transfer_error_no_address_has_been_set_name'),
@@ -336,7 +345,7 @@ export const Transfer1559 = memo<Transfer1559Props>(({ selectedAsset, openAssetM
             return
         }
 
-        const result = await Services.Ethereum.getCode(address)
+        const result = await connection?.getCode?.(address)
 
         if (result !== '0x') {
             setAddressTip({
@@ -351,29 +360,29 @@ export const Transfer1559 = memo<Transfer1559Props>(({ selectedAsset, openAssetM
         methods.clearErrors,
         wallet?.address,
         resolveDomainError,
-        Utils,
+        Others,
     ])
     // #endregion
 
     // #region Get min gas limit with amount and recipient address
     const { value: minGasLimit } = useGasLimit(
-        selectedAsset?.token.type,
-        selectedAsset?.token.address,
-        rightShift(amount ?? 0, selectedAsset?.token.decimals).toFixed(),
+        selectedAsset?.schema,
+        selectedAsset?.address,
+        rightShift(amount ?? 0, selectedAsset?.decimals).toFixed(),
         EthereumAddress.isValid(address) ? address : registeredAddress,
     )
     // #endregion
 
     const { value: tokenBalance = '0' } = useFungibleTokenBalance(
-        selectedAsset?.token?.type ?? EthereumTokenType.Native,
-        selectedAsset?.token?.address ?? '',
+        NetworkPluginID.PLUGIN_EVM,
+        selectedAsset?.address ?? '',
     )
 
     const maxAmount = useMemo(() => {
         const gasFee = formatGweiToWei(maxFeePerGas ?? 0).multipliedBy(addGasMargin(minGasLimit ?? MIN_GAS_LIMIT))
         let amount_ = new BigNumber(tokenBalance ?? 0)
-        amount_ = selectedAsset?.token.type === EthereumTokenType.Native ? amount_.minus(gasFee) : amount_
-        return formatBalance(BigNumber.max(0, amount_).toFixed(), selectedAsset?.token.decimals)
+        amount_ = selectedAsset?.schema === SchemaType.Native ? amount_.minus(gasFee) : amount_
+        return formatBalance(BigNumber.max(0, amount_).toFixed(), selectedAsset?.decimals)
     }, [selectedAsset, maxFeePerGas, minGasLimit, tokenBalance])
 
     // #region set default gasLimit
@@ -387,15 +396,15 @@ export const Transfer1559 = memo<Transfer1559Props>(({ selectedAsset, openAssetM
     // #region set default Max priority gas fee and max fee
     useUpdateEffect(() => {
         if (!estimateGasFees) return
-        const { medium } = estimateGasFees
-        methods.setValue('maxFeePerGas', new BigNumber(medium?.suggestedMaxFeePerGas ?? 0).toString())
-        methods.setValue('maxPriorityFeePerGas', new BigNumber(medium?.suggestedMaxPriorityFeePerGas ?? 0).toString())
+        const { normal } = estimateGasFees
+        methods.setValue('maxFeePerGas', new BigNumber(normal?.suggestedMaxFeePerGas ?? 0).toString())
+        methods.setValue('maxPriorityFeePerGas', new BigNumber(normal?.suggestedMaxPriorityFeePerGas ?? 0).toString())
     }, [estimateGasFees, methods.setValue])
     // #endregion
 
     const [_, transferCallback] = useTokenTransferCallback(
-        selectedAsset?.token.type ?? EthereumTokenType.Native,
-        selectedAsset?.token.address ?? '',
+        selectedAsset?.schema ?? SchemaType.Native,
+        selectedAsset?.address ?? '',
     )
 
     const handleMaxClick = useCallback(() => {
@@ -404,10 +413,10 @@ export const Transfer1559 = memo<Transfer1559Props>(({ selectedAsset, openAssetM
 
     const [{ loading, error }, onSubmit] = useAsyncFn(
         async (data: zod.infer<typeof schema>) => {
-            const transferAmount = rightShift(data.amount || '0', selectedAsset?.token.decimals).toFixed()
+            const transferAmount = rightShift(data.amount || '0', selectedAsset?.decimals).toFixed()
 
             // If input address is ens domain, use registeredAddress to transfer
-            if (Utils?.isValidDomain?.(data.address)) {
+            if (Others?.isValidDomain?.(data.address)) {
                 await transferCallback(transferAmount, registeredAddress, {
                     maxFeePerGas: toHex(formatGweiToWei(data.maxFeePerGas).toFixed(0)),
                     maxPriorityFeePerGas: toHex(formatGweiToWei(data.maxPriorityFeePerGas).toFixed(0)),
@@ -422,7 +431,7 @@ export const Transfer1559 = memo<Transfer1559Props>(({ selectedAsset, openAssetM
                 gas: new BigNumber(data.gasLimit).toNumber(),
             })
         },
-        [selectedAsset, transferCallback, registeredAddress, Utils],
+        [selectedAsset, transferCallback, registeredAddress, Others],
     )
 
     const [menu, openMenu] = useMenuConfig(
@@ -464,11 +473,11 @@ export const Transfer1559 = memo<Transfer1559Props>(({ selectedAsset, openAssetM
             )
         }
 
-        if (registeredAddress && !resolveDomainError && Utils?.resolveDomainLink)
+        if (registeredAddress && !resolveDomainError)
             return (
                 <Box display="flex" justifyContent="space-between" alignItems="center" py={2.5} px={1.5}>
                     <Link
-                        href={Utils.resolveDomainLink(address)}
+                        href={explorerResolver.domainLink(ChainId.Mainnet, address)}
                         target="_blank"
                         rel="noopener noreferrer"
                         underline="none">
@@ -492,7 +501,6 @@ export const Transfer1559 = memo<Transfer1559Props>(({ selectedAsset, openAssetM
         address,
         addressTip,
         registeredAddress,
-        Utils?.resolveDomainLink,
         methods.formState.errors.address?.type,
         resolveDomainLoading,
         resolveDomainError,
@@ -505,7 +513,7 @@ export const Transfer1559 = memo<Transfer1559Props>(({ selectedAsset, openAssetM
                 openAccountMenu={openMenu}
                 openAssetMenu={openAssetMenu}
                 handleMaxClick={handleMaxClick}
-                etherPrice={etherPrice}
+                etherPrice={etherPrice ?? 0}
                 selectedAsset={selectedAsset}
                 handleCancel={() => navigate(-1)}
                 handleConfirm={methods.handleSubmit(onSubmit)}
@@ -522,7 +530,7 @@ export interface Transfer1559UIProps {
     openAccountMenu: (anchorElOrEvent: HTMLElement | SyntheticEvent<HTMLElement>) => void
     openAssetMenu: (anchorElOrEvent: HTMLElement | SyntheticEvent<HTMLElement>) => void
     handleMaxClick: () => void
-    selectedAsset?: Asset
+    selectedAsset?: FungibleAsset<ChainId, SchemaType>
     etherPrice: number
     handleCancel: () => void
     handleConfirm: () => void
@@ -558,10 +566,10 @@ export const Transfer1559TransferUI = memo<Transfer1559UIProps>(
 
         const { RE_MATCH_WHOLE_AMOUNT, RE_MATCH_FRACTION_AMOUNT } = useMemo(
             () => ({
-                RE_MATCH_FRACTION_AMOUNT: new RegExp(`^\\.\\d{0,${selectedAsset?.token.decimals}}$`), // .ddd...d
-                RE_MATCH_WHOLE_AMOUNT: new RegExp(`^\\d*\\.?\\d{0,${selectedAsset?.token.decimals}}$`), // d.ddd...d
+                RE_MATCH_FRACTION_AMOUNT: new RegExp(`^\\.\\d{0,${selectedAsset?.decimals}}$`), // .ddd...d
+                RE_MATCH_WHOLE_AMOUNT: new RegExp(`^\\d*\\.?\\d{0,${selectedAsset?.decimals}}$`), // d.ddd...d
             }),
-            [selectedAsset?.token.decimals],
+            [selectedAsset?.decimals],
         )
 
         const {
@@ -626,8 +634,8 @@ export const Transfer1559TransferUI = memo<Transfer1559UIProps>(
                             {t('wallet_balance')}:
                             <FormattedBalance
                                 value={selectedAsset?.balance}
-                                decimals={selectedAsset?.token?.decimals}
-                                symbol={selectedAsset?.token?.symbol}
+                                decimals={selectedAsset?.decimals}
+                                symbol={selectedAsset?.symbol}
                                 significant={6}
                                 formatter={formatBalance}
                             />
@@ -673,9 +681,9 @@ export const Transfer1559TransferUI = memo<Transfer1559UIProps>(
                                                     icon={
                                                         <TokenIcon
                                                             classes={{ icon: classes.icon }}
-                                                            address={selectedAsset?.token.address ?? ''}
-                                                            name={selectedAsset?.token.name}
-                                                            logoURI={selectedAsset?.token.logoURI}
+                                                            address={selectedAsset?.address ?? ''}
+                                                            name={selectedAsset?.name}
+                                                            logoURI={selectedAsset?.logoURL}
                                                         />
                                                     }
                                                     deleteIcon={<ChevronDown className={classes.icon} />}
@@ -683,7 +691,7 @@ export const Transfer1559TransferUI = memo<Transfer1559UIProps>(
                                                     size="small"
                                                     variant="outlined"
                                                     clickable
-                                                    label={selectedAsset?.token.symbol}
+                                                    label={selectedAsset?.symbol}
                                                     onDelete={noop}
                                                 />
                                             </Box>
diff --git a/packages/mask/src/extension/popups/pages/Wallet/Transfer/index.tsx b/packages/mask/src/extension/popups/pages/Wallet/Transfer/index.tsx
index a73ffce4e32d..7980bd33aabd 100644
--- a/packages/mask/src/extension/popups/pages/Wallet/Transfer/index.tsx
+++ b/packages/mask/src/extension/popups/pages/Wallet/Transfer/index.tsx
@@ -1,12 +1,14 @@
 import { memo, useMemo, useState } from 'react'
 import { MenuItem, Typography } from '@mui/material'
 import { makeStyles } from '@masknet/theme'
-import { formatBalance, isEIP1559Supported, ProviderType, useChainId, useWallets } from '@masknet/web3-shared-evm'
+import { chainResolver } from '@masknet/web3-shared-evm'
 import { FormattedBalance, TokenIcon, useMenu } from '@masknet/shared'
 import { useContainer } from 'unstated-next'
 import { WalletContext } from '../hooks/useWalletContext'
 import { Transfer1559 } from './Transfer1559'
 import { Prior1559Transfer } from './Prior1559Transfer'
+import { useChainId, useWallets } from '@masknet/plugin-infra/web3'
+import { NetworkPluginID, formatBalance } from '@masknet/web3-shared-base'
 import { useI18N } from '../../../../../utils'
 import { useTitle } from '../../../hook/useTitle'
 
@@ -28,8 +30,8 @@ const useStyles = makeStyles()({
 const Transfer = memo(() => {
     const { t } = useI18N()
     const { classes } = useStyles()
-    const chainId = useChainId()
-    const wallets = useWallets(ProviderType.MaskWallet)
+    const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
+    const wallets = useWallets(NetworkPluginID.PLUGIN_EVM)
     const { assets, currentToken } = useContainer(WalletContext)
     const [selectedAsset, setSelectedAsset] = useState(currentToken)
 
@@ -43,13 +45,13 @@ const Transfer = memo(() => {
             return (
                 <MenuItem key={index} className={classes.assetItem} onClick={() => setSelectedAsset(asset)}>
                     <div className={classes.assetSymbol}>
-                        <TokenIcon address={asset.token.address} />
-                        <Typography>{asset.token.symbol}</Typography>
+                        <TokenIcon address={asset.address} />
+                        <Typography>{asset.symbol}</Typography>
                     </div>
                     <Typography>
                         <FormattedBalance
                             value={asset.balance}
-                            decimals={asset.token.decimals}
+                            decimals={asset.decimals}
                             significant={4}
                             formatter={formatBalance}
                         />
@@ -63,7 +65,7 @@ const Transfer = memo(() => {
 
     return (
         <>
-            {isEIP1559Supported(chainId) ? (
+            {chainResolver.isSupport(chainId, 'EIP1559') ? (
                 <Transfer1559 selectedAsset={selectedAsset} otherWallets={otherWallets} openAssetMenu={openAssetMenu} />
             ) : (
                 <Prior1559Transfer
diff --git a/packages/mask/src/extension/popups/pages/Wallet/WalletRecovery/index.tsx b/packages/mask/src/extension/popups/pages/Wallet/WalletRecovery/index.tsx
index 0fa0369733e6..e8603e22e2e5 100644
--- a/packages/mask/src/extension/popups/pages/Wallet/WalletRecovery/index.tsx
+++ b/packages/mask/src/extension/popups/pages/Wallet/WalletRecovery/index.tsx
@@ -4,7 +4,7 @@ import { PageHeader } from '../components/PageHeader'
 import { MaskMessages, useI18N } from '../../../../../utils'
 import { useLocation } from 'react-router-dom'
 import { useAsync, useAsyncFn } from 'react-use'
-import { formatEthereumAddress } from '@masknet/web3-shared-evm'
+import { ChainId, formatEthereumAddress, ProviderType } from '@masknet/web3-shared-evm'
 import Services from '../../../../service'
 import { LoadingPlaceholder } from '../../../components/LoadingPlaceholder'
 import { Typography } from '@mui/material'
@@ -18,7 +18,8 @@ import { PasswordField } from '../../../components/PasswordField'
 import { WalletRPC } from '../../../../../plugins/Wallet/messages'
 import { LoadingButton } from '@mui/lab'
 import { currentPersonaIdentifier } from '../../../../../settings/settings'
-import { useTitle } from '../../../hook/useTitle'
+import { useWeb3State } from '@masknet/plugin-infra/web3'
+import { NetworkPluginID } from '@masknet/web3-shared-base'
 
 const useStyles = makeStyles()({
     container: {
@@ -78,6 +79,8 @@ const WalletRecovery = memo(() => {
     const { classes } = useStyles()
     const location = useLocation()
 
+    const web3State = useWeb3State(NetworkPluginID.PLUGIN_EVM)
+
     const currentPersona = useValueRef(currentPersonaIdentifier)
 
     const backupId = new URLSearchParams(location.search).get('backupId')
@@ -124,17 +127,14 @@ const WalletRecovery = memo(() => {
                 await Services.Backup.restoreUnconfirmedBackup({ id: backupId, action: 'confirm' })
 
                 // Set default wallet
-                if (json.wallets) await WalletRPC.setDefaultWallet()
-
+                if (json.wallets) await web3State.Provider?.connect(ChainId.Mainnet, ProviderType.MaskWallet)
                 // Send event after successful recovery
                 MaskMessages.events.restoreSuccess.sendToAll(undefined)
 
                 await Services.Helper.removePopupWindow()
             }
         }
-    }, [onSubmit, hasPassword, currentPersona, backupId])
-
-    useTitle(t('popups_recovery_wallet'))
+    }, [onSubmit, hasPassword, currentPersona, backupId, web3State])
 
     return loading || getHasPasswordLoading ? (
         <LoadingPlaceholder />
diff --git a/packages/mask/src/extension/popups/pages/Wallet/WalletRename/index.tsx b/packages/mask/src/extension/popups/pages/Wallet/WalletRename/index.tsx
index a24120209fc9..e904f283ad3b 100644
--- a/packages/mask/src/extension/popups/pages/Wallet/WalletRename/index.tsx
+++ b/packages/mask/src/extension/popups/pages/Wallet/WalletRename/index.tsx
@@ -1,7 +1,6 @@
 import { memo } from 'react'
 import { makeStyles } from '@masknet/theme'
 import { StyledInput } from '../../../components/StyledInput'
-import { useWallet } from '@masknet/web3-shared-evm'
 import { WalletRPC } from '../../../../../plugins/Wallet/messages'
 import { useNavigate } from 'react-router-dom'
 import { useI18N } from '../../../../../utils'
@@ -12,6 +11,8 @@ import { Controller } from 'react-hook-form'
 import { useSetWalletNameForm } from '../hooks/useSetWalletNameForm'
 import { WalletContext } from '../hooks/useWalletContext'
 import { useTitle } from '../../../hook/useTitle'
+import { useWallet } from '@masknet/plugin-infra/web3'
+import { NetworkPluginID } from '@masknet/web3-shared-base'
 
 const useStyles = makeStyles()({
     header: {
@@ -47,7 +48,7 @@ const WalletRename = memo(() => {
     const navigate = useNavigate()
     const { classes } = useStyles()
     const { selectedWallet } = WalletContext.useContainer()
-    const currentWallet = useWallet()
+    const currentWallet = useWallet(NetworkPluginID.PLUGIN_EVM)
     const wallet = selectedWallet ?? currentWallet
 
     const {
diff --git a/packages/mask/src/extension/popups/pages/Wallet/WalletSettings/index.tsx b/packages/mask/src/extension/popups/pages/Wallet/WalletSettings/index.tsx
index 5770488d7601..20c96f7ae9c7 100644
--- a/packages/mask/src/extension/popups/pages/Wallet/WalletSettings/index.tsx
+++ b/packages/mask/src/extension/popups/pages/Wallet/WalletSettings/index.tsx
@@ -5,13 +5,14 @@ import { memo } from 'react'
 import { useNavigate } from 'react-router-dom'
 import { PopupRoutes } from '@masknet/shared-base'
 import { useI18N } from '../../../../../utils'
-import { formatEthereumAddress, resolveAddressLinkOnExplorer, useChainId, useWallet } from '@masknet/web3-shared-evm'
-import { NetworkPluginID, useReverseAddress, useWeb3State } from '@masknet/plugin-infra/web3'
+import { explorerResolver, formatEthereumAddress } from '@masknet/web3-shared-evm'
+import { useChainId, useReverseAddress, useWallet, useWeb3State } from '@masknet/plugin-infra/web3'
 import { FormattedAddress } from '@masknet/shared'
 import { CopyIconButton } from '../../../components/CopyIconButton'
 import { WalletContext } from '../hooks/useWalletContext'
 import { Navigator } from '../../../components/Navigator'
 import { useTitle } from '../../../hook/useTitle'
+import { NetworkPluginID } from '@masknet/web3-shared-base'
 
 const useStyles = makeStyles()((theme) => ({
     header: {
@@ -69,16 +70,16 @@ const useStyles = makeStyles()((theme) => ({
 const WalletSettings = memo(() => {
     const { t } = useI18N()
     const navigate = useNavigate()
-    const chainId = useChainId()
+    const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
+    const currentWallet = useWallet(NetworkPluginID.PLUGIN_EVM)
     const { selectedWallet } = WalletContext.useContainer()
-    const currentWallet = useWallet()
 
     const wallet = selectedWallet ?? currentWallet
 
     const { classes } = useStyles()
 
-    const { value: domain } = useReverseAddress(wallet?.address ?? '', NetworkPluginID.PLUGIN_EVM)
-    const { Utils } = useWeb3State()
+    const { value: domain } = useReverseAddress(NetworkPluginID.PLUGIN_EVM, wallet?.address ?? '')
+    const { Others } = useWeb3State()
 
     useTitle(t('popups_wallet_setting'))
 
@@ -91,9 +92,9 @@ const WalletSettings = memo(() => {
                 <div>
                     <Box display="flex" justifyContent="space-between" alignItems="center">
                         <Typography className={classes.name}>{wallet.name}</Typography>
-                        {domain && Utils?.formatDomainName ? (
+                        {domain && Others?.formatDomainName ? (
                             <Typography className={classes.name} style={{ marginLeft: 4 }}>
-                                ({Utils?.formatDomainName(domain)})
+                                ({Others?.formatDomainName(domain)})
                             </Typography>
                         ) : null}
                     </Box>
@@ -116,7 +117,7 @@ const WalletSettings = memo(() => {
                         </ListItem>
                     ) : null}
                     <Link
-                        href={resolveAddressLinkOnExplorer(chainId, wallet?.address ?? '')}
+                        href={explorerResolver.addressLink(chainId, wallet?.address ?? '')}
                         target="_blank"
                         rel="noopener noreferrer">
                         <ListItem className={classes.item}>
diff --git a/packages/mask/src/extension/popups/pages/Wallet/components/ActivityList/ActivityListItem.tsx b/packages/mask/src/extension/popups/pages/Wallet/components/ActivityList/ActivityListItem.tsx
index 645cbc461771..2278a91a341a 100644
--- a/packages/mask/src/extension/popups/pages/Wallet/components/ActivityList/ActivityListItem.tsx
+++ b/packages/mask/src/extension/popups/pages/Wallet/components/ActivityList/ActivityListItem.tsx
@@ -1,13 +1,18 @@
-import type { RecentTransaction } from '../../../../../../plugins/Wallet/services'
-import { makeStyles } from '@masknet/theme'
 import { memo, useMemo } from 'react'
+import { makeStyles } from '@masknet/theme'
 import { Box, Button, ListItem, ListItemText, Typography } from '@mui/material'
-import { formatEthereumAddress, TransactionStatusType } from '@masknet/web3-shared-evm'
+import {
+    NetworkPluginID,
+    RecentTransaction,
+    TransactionDescriptorType,
+    TransactionStatusType,
+} from '@masknet/web3-shared-base'
+import type { ChainId, Transaction } from '@masknet/web3-shared-evm'
 import { ArrowRightIcon, CircleCloseIcon, InteractionCircleIcon, LoaderIcon, UploadIcon } from '@masknet/icons'
-import { RecentTransactionDescription } from '../../../../../../plugins/Wallet/SNSAdaptor/WalletStatusDialog/TransactionDescription'
 import formatDateTime from 'date-fns/format'
 import { useI18N } from '../../../../../../utils'
-import { NetworkPluginID, useReverseAddress, useWeb3State } from '@masknet/plugin-infra/web3'
+import { useReverseAddress, useWeb3State, useChainId } from '@masknet/plugin-infra/web3'
+import { useAsync } from 'react-use'
 
 const useStyles = makeStyles()({
     item: {
@@ -61,7 +66,7 @@ const useStyles = makeStyles()({
 
 export interface ActivityListItemProps {
     toAddress?: string
-    transaction: RecentTransaction
+    transaction: RecentTransaction<ChainId, Transaction> & { _tx: Transaction }
     onSpeedUpClick: (e: React.MouseEvent<HTMLButtonElement>) => void
     onCancelClick: (e: React.MouseEvent<HTMLButtonElement>) => void
 }
@@ -70,31 +75,36 @@ export const ActivityListItem = memo<ActivityListItemProps>(
     ({ transaction, toAddress, onSpeedUpClick, onCancelClick }) => {
         const { t } = useI18N()
         const { classes } = useStyles()
-        const { Utils } = useWeb3State()
-        const { value: domain } = useReverseAddress(toAddress, NetworkPluginID.PLUGIN_EVM)
+        const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
+        const { Others, TransactionFormatter } = useWeb3State(NetworkPluginID.PLUGIN_EVM)
+        const { value: domain } = useReverseAddress(NetworkPluginID.PLUGIN_EVM, toAddress)
+
+        const { value: formatterTransaction } = useAsync(async () => {
+            if (!TransactionFormatter) return
+            return TransactionFormatter.formatTransaction(chainId, transaction)
+        }, [transaction, TransactionFormatter, chainId])
 
-        const transactionComputedPayloadName =
-            transaction.computedPayload && 'name' in transaction.computedPayload && transaction.computedPayload.name
         const transactionIcon = useMemo(() => {
             switch (transaction.status) {
                 case TransactionStatusType.NOT_DEPEND:
                     return <LoaderIcon className={classes.loader} />
-                case TransactionStatusType.CANCELLED:
                 case TransactionStatusType.SUCCEED:
-                    if (transactionComputedPayloadName === 'transfer') return <UploadIcon className={classes.send} />
+                    if (formatterTransaction?.type === TransactionDescriptorType.TRANSFER)
+                        return <UploadIcon className={classes.send} />
                     return <InteractionCircleIcon className={classes.interaction} />
                 case TransactionStatusType.FAILED:
                 default:
                     return <CircleCloseIcon style={{ fill: 'none' }} />
             }
-        }, [transaction.status, transactionComputedPayloadName])
+        }, [formatterTransaction])
+
+        if (!formatterTransaction) return null
+
         return (
             <ListItem className={classes.item}>
                 {transactionIcon}
                 <ListItemText style={{ marginLeft: 15 }}>
-                    <Typography className={classes.description}>
-                        <RecentTransactionDescription {...transaction} />
-                    </Typography>
+                    <Typography className={classes.description}>{formatterTransaction.description}</Typography>
 
                     {transaction.status === TransactionStatusType.NOT_DEPEND ? (
                         <Typography fontSize={12} color="#FFB915" fontWeight={600} lineHeight="16px">
@@ -102,10 +112,11 @@ export const ActivityListItem = memo<ActivityListItemProps>(
                         </Typography>
                     ) : (
                         <Typography className={classes.secondaryDesc}>
-                            {transaction.at ? `${formatDateTime(transaction.at, 'MMM dd')}.  ` : null}
+                            {transaction.createdAt ? `${formatDateTime(transaction.createdAt, 'MMM dd')}.  ` : null}
                             {toAddress
                                 ? t('popups_wallet_activity_to_address', {
-                                      address: Utils?.formatDomainName?.(domain) || formatEthereumAddress(toAddress, 4),
+                                      address:
+                                          Others?.formatDomainName?.(domain) || Others?.formatAddress(toAddress, 4),
                                   })
                                 : null}
                         </Typography>
@@ -113,7 +124,7 @@ export const ActivityListItem = memo<ActivityListItemProps>(
 
                     {transaction.status === TransactionStatusType.NOT_DEPEND ? (
                         <Box display="flex" mt={1}>
-                            {!transaction.payloadReplacement ? (
+                            {Object.keys(transaction.candidates).length === 1 ? (
                                 <Button className={classes.button} variant="contained" onClick={onSpeedUpClick}>
                                     {t('speed_up')}
                                 </Button>
diff --git a/packages/mask/src/extension/popups/pages/Wallet/components/ActivityList/index.tsx b/packages/mask/src/extension/popups/pages/Wallet/components/ActivityList/index.tsx
index 11ed0a8a9d8b..ab3a7672b380 100644
--- a/packages/mask/src/extension/popups/pages/Wallet/components/ActivityList/index.tsx
+++ b/packages/mask/src/extension/popups/pages/Wallet/components/ActivityList/index.tsx
@@ -1,25 +1,17 @@
 import urlcat from 'urlcat'
-import type { TransactionReceipt } from 'web3-core'
 import { memo, useState } from 'react'
 import { useNavigate } from 'react-router-dom'
 import { makeStyles } from '@masknet/theme'
 import { useContainer } from 'unstated-next'
 import { Button, Link, List } from '@mui/material'
-import {
-    ChainId,
-    EthereumRpcType,
-    isNativeTokenAddress,
-    isSameAddress,
-    resolveTransactionLinkOnExplorer,
-    useChainId,
-} from '@masknet/web3-shared-evm'
+import { NetworkPluginID, RecentTransaction } from '@masknet/web3-shared-base'
+import type { ChainId, Transaction } from '@masknet/web3-shared-evm'
 import { PopupRoutes } from '@masknet/shared-base'
 import { WalletContext } from '../../hooks/useWalletContext'
-import type { RecentTransaction } from '../../../../../../plugins/Wallet/services'
 import { useI18N } from '../../../../../../utils'
 import { ReplaceType } from '../../type'
 import { ActivityListItem } from './ActivityListItem'
-import type { ComputedPayload } from '../../../../../background-script/EthereumService'
+import { useChainId, useWeb3State } from '@masknet/plugin-infra/web3'
 
 const useStyles = makeStyles()({
     list: {
@@ -100,32 +92,25 @@ export interface ActivityListProps {
 
 export const ActivityList = memo<ActivityListProps>(({ tokenAddress }) => {
     const { transactions } = useContainer(WalletContext)
+    const { Others } = useWeb3State(NetworkPluginID.PLUGIN_EVM)
+    const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
 
-    const dataSource =
-        transactions?.filter((transaction) => {
-            if (!tokenAddress) return true
-            else if (isNativeTokenAddress(tokenAddress))
-                return transaction.computedPayload?.type === EthereumRpcType.SEND_ETHER
-            else if (
-                transaction.computedPayload?.type === EthereumRpcType.CONTRACT_INTERACTION &&
-                (transaction.computedPayload?.name === 'transfer' ||
-                    transaction.computedPayload?.name === 'transferFrom')
-            ) {
-                return isSameAddress(transaction.computedPayload?._tx?.to, tokenAddress)
-            }
-            return false
-        }) ?? []
-
-    const chainId = useChainId()
-    return <ActivityListUI dataSource={dataSource} chainId={chainId} />
+    return (
+        <ActivityListUI
+            dataSource={transactions ?? []}
+            chainId={chainId}
+            formatterTransactionLink={Others?.explorerResolver.transactionLink}
+        />
+    )
 })
 
 export interface ActivityListUIProps {
-    dataSource: RecentTransaction[]
+    dataSource: Array<RecentTransaction<ChainId, Transaction> & { _tx: Transaction }>
     chainId: ChainId
+    formatterTransactionLink?: (chainId: ChainId, id: string) => string
 }
 
-export const ActivityListUI = memo<ActivityListUIProps>(({ dataSource, chainId }) => {
+export const ActivityListUI = memo<ActivityListUIProps>(({ dataSource, chainId, formatterTransactionLink }) => {
     const { classes } = useStyles()
     const { t } = useI18N()
     const [isExpand, setExpand] = useState(!(dataSource.length > 3))
@@ -138,20 +123,16 @@ export const ActivityListUI = memo<ActivityListUIProps>(({ dataSource, chainId }
         <>
             <List dense className={classes.list}>
                 {dataSource.slice(0, !isExpand ? 3 : undefined).map((transaction, index) => {
-                    const toAddress = getToAddress(transaction.receipt, transaction.computedPayload)
                     return (
                         <Link
-                            href={resolveTransactionLinkOnExplorer(
-                                chainId,
-                                transaction.receipt?.transactionHash ?? transaction.hash,
-                            )}
+                            href={formatterTransactionLink?.(chainId, transaction.id)}
                             target="_blank"
                             rel="noopener noreferrer"
                             key={index}
                             style={{ textDecoration: 'none' }}>
                             <ActivityListItem
                                 transaction={transaction}
-                                toAddress={toAddress}
+                                toAddress={transaction._tx.to}
                                 onSpeedUpClick={(e) => {
                                     e.preventDefault()
                                     setTransaction(transaction)
@@ -185,26 +166,3 @@ export const ActivityListUI = memo<ActivityListUIProps>(({ dataSource, chainId }
         </>
     )
 })
-
-function getToAddress(receipt?: TransactionReceipt | null, computedPayload?: ComputedPayload | null) {
-    if (!computedPayload) return undefined
-    const type = computedPayload.type
-    switch (type) {
-        case EthereumRpcType.SEND_ETHER:
-            return receipt?.to
-        case EthereumRpcType.CONTRACT_INTERACTION:
-            switch (computedPayload.name) {
-                case 'transfer':
-                case 'transferFrom':
-                    return computedPayload.parameters?.to
-                case 'approve':
-                default:
-                    return receipt?.to
-            }
-        case EthereumRpcType.CONTRACT_DEPLOYMENT:
-            return receipt?.to
-        case EthereumRpcType.CANCEL:
-        default:
-            return undefined
-    }
-}
diff --git a/packages/mask/src/extension/popups/pages/Wallet/components/AssetsList/index.tsx b/packages/mask/src/extension/popups/pages/Wallet/components/AssetsList/index.tsx
index c6b017372d63..49414ebd395b 100644
--- a/packages/mask/src/extension/popups/pages/Wallet/components/AssetsList/index.tsx
+++ b/packages/mask/src/extension/popups/pages/Wallet/components/AssetsList/index.tsx
@@ -1,7 +1,7 @@
 import { memo, useCallback } from 'react'
 import { useNavigate } from 'react-router-dom'
 import { useContainer } from 'unstated-next'
-import { Asset, formatBalance } from '@masknet/web3-shared-evm'
+import type { ChainId, SchemaType } from '@masknet/web3-shared-evm'
 import { PopupRoutes } from '@masknet/shared-base'
 import { List, ListItem, ListItemText } from '@mui/material'
 import { makeStyles } from '@masknet/theme'
@@ -9,6 +9,7 @@ import { ArrowRightIcon } from '@masknet/icons'
 import { TokenIcon, FormattedBalance } from '@masknet/shared'
 import { WalletContext } from '../../hooks/useWalletContext'
 import { isNaN } from 'lodash-unified'
+import { formatBalance, FungibleAsset } from '@masknet/web3-shared-base'
 
 const useStyles = makeStyles()({
     list: {
@@ -41,6 +42,8 @@ const useStyles = makeStyles()({
     },
 })
 
+type Asset = FungibleAsset<ChainId, SchemaType>
+
 export const AssetsList = memo(() => {
     const navigate = useNavigate()
     const { assets, setCurrentToken } = useContainer(WalletContext)
@@ -65,18 +68,18 @@ export const AssetsListUI = memo<AssetsListUIProps>(({ dataSource, onItemClick }
                     <ListItem key={index} className={classes.item} onClick={() => onItemClick(asset)}>
                         <TokenIcon
                             classes={{ icon: classes.tokenIcon }}
-                            address={asset.token.address}
-                            name={asset.token.name}
-                            chainId={asset.token.chainId}
-                            logoURI={asset.token.logoURI}
+                            address={asset.address}
+                            name={asset.name}
+                            chainId={asset.chainId}
+                            logoURI={asset.logoURL}
                             AvatarProps={{ sx: { width: 20, height: 20 } }}
                         />
                         <ListItemText className={classes.text}>
                             <FormattedBalance
                                 classes={{ symbol: classes.symbol, balance: classes.balance }}
                                 value={isNaN(asset.balance) ? 0 : asset.balance}
-                                decimals={isNaN(asset.token.decimals) ? 0 : asset.token.decimals}
-                                symbol={asset.token.symbol}
+                                decimals={isNaN(asset.decimals) ? 0 : asset.decimals}
+                                symbol={asset.symbol}
                                 significant={6}
                                 formatter={formatBalance}
                             />
diff --git a/packages/mask/src/extension/popups/pages/Wallet/components/DeriveWalletTable/index.tsx b/packages/mask/src/extension/popups/pages/Wallet/components/DeriveWalletTable/index.tsx
index 0c625ce957aa..9f5c426d2316 100644
--- a/packages/mask/src/extension/popups/pages/Wallet/components/DeriveWalletTable/index.tsx
+++ b/packages/mask/src/extension/popups/pages/Wallet/components/DeriveWalletTable/index.tsx
@@ -14,8 +14,10 @@ import {
 import { makeStyles } from '@masknet/theme'
 import { FormattedAddress, FormattedBalance } from '@masknet/shared'
 import { CheckedBorderIcon, CheckedIcon } from '@masknet/icons'
-import { formatBalance, formatEthereumAddress, useWeb3 } from '@masknet/web3-shared-evm'
+import { formatEthereumAddress } from '@masknet/web3-shared-evm'
 import { useI18N } from '../../../../../../utils'
+import { useWeb3 } from '@masknet/plugin-infra/web3'
+import { formatBalance, NetworkPluginID } from '@masknet/web3-shared-base'
 
 const useStyles = makeStyles()({
     header: {
@@ -104,8 +106,8 @@ export interface DeriveWalletTableRowProps {
 }
 export const DeriveWalletTableRow = memo<DeriveWalletTableRowProps>(({ address, added, onCheck, selected }) => {
     const { classes } = useStyles()
-    const web3 = useWeb3()
-    const { loading, value: balance } = useAsync(async () => web3.eth.getBalance(address), [web3, address])
+    const web3 = useWeb3(NetworkPluginID.PLUGIN_EVM)
+    const { loading, value: balance } = useAsync(async () => web3?.eth.getBalance(address) ?? '0', [web3, address])
 
     return (
         <TableRow key={address}>
diff --git a/packages/mask/src/extension/popups/pages/Wallet/components/WalletAssets/index.tsx b/packages/mask/src/extension/popups/pages/Wallet/components/WalletAssets/index.tsx
index 8a2d9ac92a67..c2053f4bccc1 100644
--- a/packages/mask/src/extension/popups/pages/Wallet/components/WalletAssets/index.tsx
+++ b/packages/mask/src/extension/popups/pages/Wallet/components/WalletAssets/index.tsx
@@ -11,7 +11,8 @@ import { useContainer } from 'unstated-next'
 import { WalletContext } from '../../hooks/useWalletContext'
 import { LoadingPlaceholder } from '../../../../components/LoadingPlaceholder'
 import { Navigator } from '../../../../components/Navigator'
-import { useWallet } from '@masknet/web3-shared-evm'
+import { useWallet } from '@masknet/plugin-infra/web3'
+import { NetworkPluginID } from '@masknet/web3-shared-base'
 
 const useStyles = makeStyles()({
     content: {
@@ -75,7 +76,7 @@ enum WalletTabs {
 
 export const WalletAssets = memo(() => {
     const navigate = useNavigate()
-    const wallet = useWallet()
+    const wallet = useWallet(NetworkPluginID.PLUGIN_EVM)
     return wallet ? <WalletAssetsUI onAddTokenClick={() => navigate(PopupRoutes.AddToken)} /> : null
 })
 
diff --git a/packages/mask/src/extension/popups/pages/Wallet/components/WalletHeader/UI.tsx b/packages/mask/src/extension/popups/pages/Wallet/components/WalletHeader/UI.tsx
index a5f2cf5e5d73..145581a79350 100644
--- a/packages/mask/src/extension/popups/pages/Wallet/components/WalletHeader/UI.tsx
+++ b/packages/mask/src/extension/popups/pages/Wallet/components/WalletHeader/UI.tsx
@@ -2,10 +2,10 @@ import { makeStyles } from '@masknet/theme'
 import { memo, MouseEvent } from 'react'
 import { Box, Link, Typography } from '@mui/material'
 import { CopyIconButton } from '../../../../components/CopyIconButton'
-import type { Web3Plugin } from '@masknet/plugin-infra/web3'
 import { ChainIcon, FormattedAddress, WalletIcon } from '@masknet/shared'
-import { ChainId, Wallet, formatEthereumAddress, resolveAddressLinkOnExplorer } from '@masknet/web3-shared-evm'
+import { ChainId, formatEthereumAddress, explorerResolver, NetworkType } from '@masknet/web3-shared-evm'
 import { ArrowDropIcon, MaskBlueIcon, PopupLinkIcon } from '@masknet/icons'
+import type { NetworkDescriptor, Wallet } from '@masknet/web3-shared-base'
 
 const useStyles = makeStyles()(() => ({
     container: {
@@ -77,7 +77,7 @@ const useStyles = makeStyles()(() => ({
     },
 }))
 interface WalletHeaderUIProps {
-    currentNetwork: Web3Plugin.NetworkDescriptor
+    currentNetwork: NetworkDescriptor<ChainId, NetworkType>
     chainId: ChainId
     onOpenNetworkSelector: (event: MouseEvent<HTMLDivElement>) => void
     onActionClick: () => void
@@ -133,7 +133,7 @@ export const WalletHeaderUI = memo<WalletHeaderUIProps>(
                             <Link
                                 onClick={(event) => event.stopPropagation()}
                                 style={{ width: 12, height: 12 }}
-                                href={resolveAddressLinkOnExplorer(chainId, wallet.address ?? '')}
+                                href={explorerResolver.addressLink(chainId, wallet.address ?? '')}
                                 target="_blank"
                                 rel="noopener noreferrer">
                                 <PopupLinkIcon className={classes.icon} />
diff --git a/packages/mask/src/extension/popups/pages/Wallet/components/WalletHeader/index.tsx b/packages/mask/src/extension/popups/pages/Wallet/components/WalletHeader/index.tsx
index b3418b5fdf25..40fa7127b746 100644
--- a/packages/mask/src/extension/popups/pages/Wallet/components/WalletHeader/index.tsx
+++ b/packages/mask/src/extension/popups/pages/Wallet/components/WalletHeader/index.tsx
@@ -2,16 +2,22 @@ import { memo, useCallback, useMemo } from 'react'
 import { makeStyles } from '@masknet/theme'
 import { useMatch, useNavigate } from 'react-router-dom'
 import { PopupRoutes } from '@masknet/shared-base'
-import { ChainId, useChainId, ProviderType, useWallet } from '@masknet/web3-shared-evm'
+import type { ChainId, NetworkType } from '@masknet/web3-shared-evm'
 import { WalletHeaderUI } from './UI'
-import { getRegisteredWeb3Networks, NetworkPluginID, useAccount } from '@masknet/plugin-infra/web3'
+import {
+    getRegisteredWeb3Networks,
+    useAccount,
+    useChainId,
+    useProviderType,
+    useWallet,
+} from '@masknet/plugin-infra/web3'
 import { Flags } from '../../../../../../../shared'
 import { MenuItem, Typography } from '@mui/material'
 import { useMenuConfig, WalletIcon, ChainIcon } from '@masknet/shared'
-import { currentMaskWalletAccountSettings, currentProviderSettings } from '../../../../../../plugins/Wallet/settings'
+import { currentMaskWalletAccountSettings } from '../../../../../../plugins/Wallet/settings'
 import { WalletRPC } from '../../../../../../plugins/Wallet/messages'
-import { useValueRef } from '@masknet/shared-base-ui'
 import { NormalHeader } from '../../../../components/NormalHeader'
+import { NetworkDescriptor, NetworkPluginID } from '@masknet/web3-shared-base'
 
 const useStyles = makeStyles()({
     menu: {
@@ -25,13 +31,16 @@ const useStyles = makeStyles()({
 export const WalletHeader = memo(() => {
     const { classes } = useStyles()
 
-    const account = useAccount()
-    const chainId = useChainId()
-    const wallet = useWallet()
     const navigate = useNavigate()
-    const providerType = useValueRef(currentProviderSettings)
+    const account = useAccount(NetworkPluginID.PLUGIN_EVM)
+    const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
+    const wallet = useWallet(NetworkPluginID.PLUGIN_EVM)
+    const providerType = useProviderType(NetworkPluginID.PLUGIN_EVM)
+
+    const networks = getRegisteredWeb3Networks().filter(
+        (x) => x.networkSupporterPluginID === NetworkPluginID.PLUGIN_EVM,
+    ) as Array<NetworkDescriptor<ChainId, NetworkType>>
 
-    const networks = getRegisteredWeb3Networks()
     const currentNetwork = useMemo(
         () => networks.find((x) => x.chainId === chainId) ?? networks[0],
         [networks, chainId],
@@ -44,11 +53,6 @@ export const WalletHeader = memo(() => {
 
     const onChainChange = useCallback(
         async (chainId: ChainId) => {
-            if (providerType === ProviderType.MaskWallet) {
-                await WalletRPC.updateAccount({
-                    chainId,
-                })
-            }
             return WalletRPC.updateMaskAccount({
                 chainId,
                 account: currentMaskWalletAccountSettings.value,
diff --git a/packages/mask/src/extension/popups/pages/Wallet/components/WalletInfo/index.tsx b/packages/mask/src/extension/popups/pages/Wallet/components/WalletInfo/index.tsx
index 329a9700a0ad..f244427aba2f 100644
--- a/packages/mask/src/extension/popups/pages/Wallet/components/WalletInfo/index.tsx
+++ b/packages/mask/src/extension/popups/pages/Wallet/components/WalletInfo/index.tsx
@@ -1,14 +1,15 @@
 import { memo } from 'react'
+import { useNavigate, useLocation, useMatch } from 'react-router-dom'
 import { Box, Typography } from '@mui/material'
 import { makeStyles } from '@masknet/theme'
 import { MoreHoriz } from '@mui/icons-material'
 import { EditIcon, MaskWalletIcon } from '@masknet/icons'
 import { FormattedAddress } from '@masknet/shared'
-import { useNavigate, useLocation, useMatch } from 'react-router-dom'
 import { PopupRoutes } from '@masknet/shared-base'
-import { formatEthereumAddress, useWallet } from '@masknet/web3-shared-evm'
+import { NetworkPluginID } from '@masknet/web3-shared-base'
+import { formatEthereumAddress } from '@masknet/web3-shared-evm'
 import { CopyIconButton } from '../../../../components/CopyIconButton'
-import { NetworkPluginID, useReverseAddress, useWeb3State } from '@masknet/plugin-infra/web3'
+import { useReverseAddress, useWallet, useWeb3State } from '@masknet/plugin-infra/web3'
 
 const useStyles = makeStyles()({
     container: {
@@ -64,12 +65,11 @@ const useStyles = makeStyles()({
 })
 
 export const WalletInfo = memo(() => {
-    const wallet = useWallet()
+    const wallet = useWallet(NetworkPluginID.PLUGIN_EVM)
     const navigate = useNavigate()
     const address = new URLSearchParams(useLocation().search).get('address')
-
-    const { value: domain } = useReverseAddress(address ?? wallet?.address, NetworkPluginID.PLUGIN_EVM)
-    const { Utils } = useWeb3State()
+    const { value: domain } = useReverseAddress(NetworkPluginID.PLUGIN_EVM, address ?? wallet?.address)
+    const { Others } = useWeb3State()
 
     const excludePath = useMatch(PopupRoutes.WalletSettings)
 
@@ -83,7 +83,7 @@ export const WalletInfo = memo(() => {
             onSettingClick={() => navigate(PopupRoutes.WalletSettings)}
             hideSettings={!!excludePath}
             domain={domain}
-            formatDomainName={Utils?.formatDomainName}
+            formatDomainName={Others?.formatDomainName}
         />
     )
 })
diff --git a/packages/mask/src/extension/popups/pages/Wallet/hooks/useSetWalletNameForm.ts b/packages/mask/src/extension/popups/pages/Wallet/hooks/useSetWalletNameForm.ts
index c688bf612a52..5a46f5770ae8 100644
--- a/packages/mask/src/extension/popups/pages/Wallet/hooks/useSetWalletNameForm.ts
+++ b/packages/mask/src/extension/popups/pages/Wallet/hooks/useSetWalletNameForm.ts
@@ -1,7 +1,8 @@
 import { z as zod } from 'zod'
 import { useForm, UseFormReturn } from 'react-hook-form'
 import { zodResolver } from '@hookform/resolvers/zod'
-import { useWallets } from '@masknet/web3-shared-evm'
+import { useWallets } from '@masknet/plugin-infra/web3'
+import { NetworkPluginID } from '@masknet/web3-shared-base'
 
 const schema = zod.object({
     name: zod.string().min(1).max(12),
@@ -9,7 +10,7 @@ const schema = zod.object({
 export function useSetWalletNameForm(
     defaultName?: string,
 ): UseFormReturn<{ name: string }, object> & { schema: typeof schema } {
-    const wallets = useWallets()
+    const wallets = useWallets(NetworkPluginID.PLUGIN_EVM)
 
     const formValue = useForm<zod.infer<typeof schema>>({
         mode: 'onChange',
diff --git a/packages/mask/src/extension/popups/pages/Wallet/hooks/useUnConfirmedRequest.ts b/packages/mask/src/extension/popups/pages/Wallet/hooks/useUnConfirmedRequest.ts
index e15421ad5f6b..c3f8a2ce4189 100644
--- a/packages/mask/src/extension/popups/pages/Wallet/hooks/useUnConfirmedRequest.ts
+++ b/packages/mask/src/extension/popups/pages/Wallet/hooks/useUnConfirmedRequest.ts
@@ -1,17 +1,28 @@
 import { useAsyncRetry } from 'react-use'
 import { WalletRPC } from '../../../../../plugins/Wallet/messages'
-import Services from '../../../../service'
 import { useEffect } from 'react'
 import { WalletMessages } from '@masknet/plugin-wallet'
+import { getPayloadConfig } from '@masknet/web3-shared-evm'
+import { useChainId, useWeb3State } from '@masknet/plugin-infra/web3'
+import { NetworkPluginID } from '@masknet/web3-shared-base'
 
 export const useUnconfirmedRequest = () => {
+    const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
+    const { TransactionFormatter } = useWeb3State(NetworkPluginID.PLUGIN_EVM)
     const result = useAsyncRetry(async () => {
         const payload = await WalletRPC.topUnconfirmedRequest()
         if (!payload) return
-        const computedPayload = await Services.Ethereum.getComputedPayload(payload)
+        const computedPayload = getPayloadConfig(payload)
+
+        if (!computedPayload) return { payload }
+
+        const formatterTransaction = await TransactionFormatter?.formatTransaction(chainId, computedPayload)
+        const transactionContext = await TransactionFormatter?.createContext(chainId, computedPayload)
         return {
             payload,
             computedPayload,
+            formatterTransaction,
+            transactionContext,
         }
     }, [])
 
diff --git a/packages/mask/src/extension/popups/pages/Wallet/hooks/useWalletContext.ts b/packages/mask/src/extension/popups/pages/Wallet/hooks/useWalletContext.ts
index f0e2d407ad7c..2b2734684d80 100644
--- a/packages/mask/src/extension/popups/pages/Wallet/hooks/useWalletContext.ts
+++ b/packages/mask/src/extension/popups/pages/Wallet/hooks/useWalletContext.ts
@@ -1,24 +1,20 @@
 import { useState } from 'react'
 import { createContainer } from 'unstated-next'
-import { useAssets, useTrustedERC20Tokens, Asset, useChainDetailed, Wallet } from '@masknet/web3-shared-evm'
-import { useRecentTransactions } from '../../../../../plugins/Wallet/hooks/useRecentTransactions'
-import type { RecentTransaction } from '../../../../../plugins/Wallet/services'
+import { useChainId, useRecentTransactions, useFungibleAssets } from '@masknet/plugin-infra/web3'
+import { FungibleAsset, NetworkPluginID, RecentTransaction, Wallet } from '@masknet/web3-shared-base'
+import type { ChainId, SchemaType, Transaction } from '@masknet/web3-shared-evm'
 
 function useWalletContext() {
-    const chainDetailed = useChainDetailed()
-    const erc20Tokens = useTrustedERC20Tokens()
-    const { value: assets, loading } = useAssets(erc20Tokens)
-    const { value: transactions } = useRecentTransactions({
-        receipt: true,
-        computedPayload: true,
-    })
-    const [currentToken, setCurrentToken] = useState<Asset>()
-    const [transaction, setTransaction] = useState<RecentTransaction | null>()
+    const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
+    const { value: assets, loading } = useFungibleAssets(NetworkPluginID.PLUGIN_EVM)
+    const transactions = useRecentTransactions(NetworkPluginID.PLUGIN_EVM)
+    const [currentToken, setCurrentToken] = useState<FungibleAsset<ChainId, SchemaType>>()
+    const [transaction, setTransaction] = useState<RecentTransaction<ChainId, Transaction>>()
     const [selectedWallet, setSelectedWallet] = useState<Wallet | null>()
     return {
         currentToken,
         setCurrentToken,
-        assets: assets.filter((asset) => asset.token.chainId === chainDetailed?.chainId),
+        assets: assets?.filter((asset) => asset.chainId === chainId) ?? [],
         transactions,
         assetsLoading: loading,
         transaction,
diff --git a/packages/mask/src/extension/popups/pages/Wallet/index.tsx b/packages/mask/src/extension/popups/pages/Wallet/index.tsx
index d92e23141335..968c38702f36 100644
--- a/packages/mask/src/extension/popups/pages/Wallet/index.tsx
+++ b/packages/mask/src/extension/popups/pages/Wallet/index.tsx
@@ -1,5 +1,4 @@
 import { WalletStartUp } from './components/StartUp'
-import { EthereumRpcType, useWallet } from '@masknet/web3-shared-evm'
 import { WalletAssets } from './components/WalletAssets'
 import { Route, Routes, useNavigate, useLocation } from 'react-router-dom'
 import { lazy, Suspense, useEffect } from 'react'
@@ -8,11 +7,14 @@ import { WalletContext } from './hooks/useWalletContext'
 import { LoadingPlaceholder } from '../../components/LoadingPlaceholder'
 import { useAsyncRetry } from 'react-use'
 import { WalletMessages, WalletRPC } from '../../../../plugins/Wallet/messages'
-import Services from '../../../service'
 import SelectWallet from './SelectWallet'
 import { useWalletLockStatus } from './hooks/useWalletLockStatus'
 import urlcat from 'urlcat'
 import { WalletHeader } from './components/WalletHeader'
+import { useChainId, useWallet, useWeb3State } from '@masknet/plugin-infra/web3'
+import { NetworkPluginID, TransactionDescriptorType } from '@masknet/web3-shared-base'
+import { EthereumMethodType, getPayloadConfig } from '@masknet/web3-shared-evm'
+
 const ImportWallet = lazy(() => import('./ImportWallet'))
 const AddDeriveWallet = lazy(() => import('./AddDeriveWallet'))
 const WalletSettings = lazy(() => import('./WalletSettings'))
@@ -34,14 +36,13 @@ const LegacyWalletRecovery = lazy(() => import('./LegacyWalletRecovery'))
 const ReplaceTransaction = lazy(() => import('./ReplaceTransaction'))
 const ConnectWallet = lazy(() => import('./ConnectWallet'))
 
-const exclusionDetectLocked = [PopupRoutes.Unlock, PopupRoutes.ConnectWallet]
-
 const r = relativeRouteOf(PopupRoutes.Wallet)
 export default function Wallet() {
-    const wallet = useWallet()
+    const wallet = useWallet(NetworkPluginID.PLUGIN_EVM)
     const location = useLocation()
     const navigate = useNavigate()
-
+    const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
+    const { TransactionFormatter } = useWeb3State(NetworkPluginID.PLUGIN_EVM)
     const { isLocked, loading: getLockStatusLoading } = useWalletLockStatus()
 
     const { loading, retry } = useAsyncRetry(async () => {
@@ -54,34 +55,36 @@ export default function Wallet() {
             ].some((item) => item === location.pathname)
         )
             return
-
         const payload = await WalletRPC.topUnconfirmedRequest()
         if (!payload) return
+        const computedPayload = getPayloadConfig(payload)
+        if (!computedPayload) return
 
-        const computedPayload = await Services.Ethereum.getComputedPayload(payload)
-        const value = {
-            payload,
-            computedPayload,
+        const formatterTransaction = await TransactionFormatter?.formatTransaction(chainId, computedPayload)
+
+        if (
+            formatterTransaction &&
+            [TransactionDescriptorType.INTERACTION, TransactionDescriptorType.TRANSFER].includes(
+                formatterTransaction.type,
+            )
+        ) {
+            navigate(PopupRoutes.ContractInteraction, { replace: true })
         }
 
-        if (value?.computedPayload) {
-            switch (value.computedPayload.type) {
-                case EthereumRpcType.SIGN:
-                case EthereumRpcType.SIGN_TYPED_DATA:
+        if (computedPayload) {
+            switch (payload.method) {
+                case EthereumMethodType.ETH_SIGN:
+                case EthereumMethodType.ETH_SIGN_TYPED_DATA:
                     navigate(PopupRoutes.WalletSignRequest, { replace: true })
                     break
-                case EthereumRpcType.CONTRACT_INTERACTION:
-                case EthereumRpcType.SEND_ETHER:
-                    navigate(PopupRoutes.ContractInteraction, { replace: true })
-                    break
                 default:
                     break
             }
         }
-    }, [location.search, location.pathname])
+    }, [location.search, location.pathname, chainId])
 
     useEffect(() => {
-        if (!(isLocked && !getLockStatusLoading && !exclusionDetectLocked.some((x) => x === location.pathname))) return
+        if (!(isLocked && !getLockStatusLoading && location.pathname !== PopupRoutes.Unlock)) return
         navigate(urlcat(PopupRoutes.Unlock, { from: location.pathname }), { replace: true })
     }, [isLocked, location.pathname, getLockStatusLoading])
 
diff --git a/packages/mask/src/extension/popups/render.tsx b/packages/mask/src/extension/popups/render.tsx
index 264c7fc796fc..c38758d2a722 100644
--- a/packages/mask/src/extension/popups/render.tsx
+++ b/packages/mask/src/extension/popups/render.tsx
@@ -1,32 +1,10 @@
 import { startPluginDashboard } from '@masknet/plugin-infra/dashboard'
-import { createNormalReactRoot, MaskMessages } from '../../utils'
-import { createPluginHost } from '../../plugin-infra/host'
-import { Services } from '../service'
+import { createNormalReactRoot } from '../../utils'
+import { createPluginHost, createSharedContext } from '../../plugin-infra/host'
 import { status } from '../../setup.ui'
 import Popups from './UI'
-import { InMemoryStorages, PersistentStorages } from '../../../shared/kv-storage'
-import { createSubscriptionFromAsync } from '@masknet/shared-base'
 
 status.then(() => createNormalReactRoot(<Popups />))
 
 // TODO: Should only load plugins when the page is plugin-aware.
-
-startPluginDashboard(
-    createPluginHost(undefined, (pluginID, signal) => {
-        const currentPersonaSub = createSubscriptionFromAsync(
-            Services.Settings.getCurrentPersonaIdentifier,
-            undefined,
-            MaskMessages.events.currentPersonaIdentifier.on,
-            signal,
-        )
-        return {
-            createKVStorage(type, defaultValues) {
-                if (type === 'memory') return InMemoryStorages.Plugin.createSubScope(pluginID, defaultValues, signal)
-                else return PersistentStorages.Plugin.createSubScope(pluginID, defaultValues, signal)
-            },
-            personaSign: Services.Identity.signWithPersona,
-            walletSign: Services.Ethereum.personalSign,
-            currentPersona: currentPersonaSub,
-        }
-    }),
-)
+startPluginDashboard(createPluginHost(undefined, createSharedContext))
diff --git a/packages/mask/src/extension/service.ts b/packages/mask/src/extension/service.ts
index 754274da7808..cd748dff8099 100644
--- a/packages/mask/src/extension/service.ts
+++ b/packages/mask/src/extension/service.ts
@@ -25,7 +25,6 @@ export const Services = {
     Identity: add(() => import('../../background/services/identity'), 'Identity'),
     Backup: add(() => import('./background-script/BackupService'), 'Backup'),
     Helper: add(() => import('../../background/services/helper'), 'Helper'),
-    Ethereum: add(() => import('./background-script/EthereumService'), 'Ethereum'),
     SocialNetwork: add(() => import('./background-script/SocialNetworkService'), 'SocialNetwork'),
     Settings: add(() => import('./background-script/SettingsService'), 'Settings'),
     ThirdPartyPlugin: add(() => import('./background-script/ThirdPartyPlugin'), 'ThirdPartyPlugin'),
@@ -44,7 +43,6 @@ if (process.env.manifest === '2' && import.meta.webpackHot && isEnvironment(Envi
             '../../background/services/identity',
             './background-script/BackupService',
             '../../background/services/helper',
-            './background-script/EthereumService',
             './background-script/SettingsService',
             './background-script/ThirdPartyPlugin',
             './background-script/SocialNetworkService',
diff --git a/packages/mask/src/plugin-infra/host.ts b/packages/mask/src/plugin-infra/host.ts
index a2896190c9c5..636505a6f475 100644
--- a/packages/mask/src/plugin-infra/host.ts
+++ b/packages/mask/src/plugin-infra/host.ts
@@ -1,11 +1,86 @@
 // All plugin manager need to call createPluginHost so let's register plugins implicitly.
 import './register'
 
+import type { JsonRpcPayload, JsonRpcResponse } from 'web3-core-helpers'
 import type { Plugin } from '@masknet/plugin-infra'
 import { Emitter } from '@servie/events'
 import { MaskMessages } from '../../shared/messages'
 import Services from '../extension/service'
-import { createI18NBundle, i18NextInstance } from '@masknet/shared-base'
+import {
+    createI18NBundle,
+    createSubscriptionFromAsync,
+    createSubscriptionFromValueRef,
+    EMPTY_LIST,
+    i18NextInstance,
+} from '@masknet/shared-base'
+import { InMemoryStorages, PersistentStorages } from '../../shared'
+import { nativeAPI, hasNativeAPI } from '../../shared/native-rpc'
+import { currentMaskWalletAccountSettings, currentMaskWalletChainIdSettings } from '../plugins/Wallet/settings'
+import { WalletMessages, WalletRPC } from '../plugins/Wallet/messages'
+
+export function createSharedContext(pluginID: string, signal: AbortSignal): Plugin.Shared.SharedContext {
+    return {
+        createKVStorage<T extends object>(type: 'memory' | 'persistent', name: string, defaultValues: T) {
+            if (type === 'memory')
+                return InMemoryStorages.Plugin.createSubScope(`${pluginID}_${name}`, defaultValues, signal)
+            else return PersistentStorages.Plugin.createSubScope(`${pluginID}_${name}`, defaultValues, signal)
+        },
+
+        nativeType: nativeAPI?.type,
+        hasNativeAPI,
+
+        send: async (payload: JsonRpcPayload) => {
+            if (nativeAPI?.type === 'iOS') {
+                return nativeAPI.api.send(payload) as unknown as JsonRpcResponse
+            } else {
+                const response = await nativeAPI?.api.sendJsonString(JSON.stringify(payload))
+                if (!response) throw new Error('Failed to send request to native APP.')
+                return JSON.parse(response) as JsonRpcResponse
+            }
+        },
+
+        openPopupWindow: Services.Helper.openPopupWindow,
+        closePopupWindow: Services.Helper.removePopupWindow,
+
+        account: createSubscriptionFromValueRef(currentMaskWalletAccountSettings),
+        chainId: createSubscriptionFromValueRef(currentMaskWalletChainIdSettings),
+
+        currentPersona: createSubscriptionFromAsync(
+            Services.Settings.getCurrentPersonaIdentifier,
+            undefined,
+            MaskMessages.events.currentPersonaIdentifier.on,
+            signal,
+        ),
+
+        wallets: createSubscriptionFromAsync(
+            () => WalletRPC.getWallets(),
+            EMPTY_LIST,
+            WalletMessages.events.walletsUpdated.on,
+        ),
+        walletPrimary: createSubscriptionFromAsync(
+            () => WalletRPC.getWalletPrimary(),
+            null,
+            WalletMessages.events.walletsUpdated.on,
+        ),
+
+        personaSignMessage: Services.Identity.signWithPersona,
+
+        updateAccount: WalletRPC.updateMaskAccount,
+        resetAccount: WalletRPC.resetMaskAccount,
+        selectAccountPrepare: WalletRPC.selectMaskAccountPrepare,
+
+        signTransaction: WalletRPC.signTransaction,
+        signTypedData: WalletRPC.signTypedData,
+        signPersonalMessage: WalletRPC.signPersonalMessage,
+
+        addWallet: WalletRPC.updateWallet,
+        updateWallet: WalletRPC.updateWallet,
+        removeWallet: WalletRPC.removeWallet,
+
+        shiftUnconfirmedRequest: WalletRPC.shiftUnconfirmedRequest,
+        pushUnconfirmedRequest: WalletRPC.pushUnconfirmedRequest,
+    }
+}
 
 export function createPluginHost<Context>(
     signal: AbortSignal | undefined,
diff --git a/packages/mask/src/plugin-infra/register.js b/packages/mask/src/plugin-infra/register.js
index 2c38073d8643..4e253d8cae1a 100644
--- a/packages/mask/src/plugin-infra/register.js
+++ b/packages/mask/src/plugin-infra/register.js
@@ -13,13 +13,13 @@ import '@masknet/plugin-cyberconnect'
 import '@masknet/plugin-go-plus-security'
 import '@masknet/plugin-cross-chain-bridge'
 import '../plugins/Wallet'
-import '../plugins/EVM'
+import '@masknet/plugin-evm'
 import '../plugins/RedPacket'
 import '../plugins/ITO'
 import '../plugins/Snapshot'
 import '../plugins/Savings'
 import '../plugins/Collectible'
-import '../plugins/External'
+// import '../plugins/External'
 import '../plugins/Transak'
 import '../plugins/Gitcoin'
 import '../plugins/Polls'
@@ -33,7 +33,6 @@ import '../plugins/Avatar'
 import '../plugins/Furucombo'
 import '../plugins/MaskBox'
 import '../plugins/NextID'
-// import '../plugins/Profile'
 import '../plugins/Pets'
 import '../plugins/CryptoartAI'
 import '../plugins/FindTruman'
diff --git a/packages/mask/src/plugins/ArtBlocks/SNSAdaptor/Collectible.tsx b/packages/mask/src/plugins/ArtBlocks/SNSAdaptor/Collectible.tsx
index cf764d336c71..54ac7d765065 100644
--- a/packages/mask/src/plugins/ArtBlocks/SNSAdaptor/Collectible.tsx
+++ b/packages/mask/src/plugins/ArtBlocks/SNSAdaptor/Collectible.tsx
@@ -1,15 +1,17 @@
-import { useI18N } from '../../../utils'
-import { Tab, Tabs, Paper, Card, CardHeader, CardContent, Link, Typography, Avatar, Box } from '@mui/material'
 import { useState } from 'react'
+import { Tab, Tabs, Paper, Card, CardHeader, CardContent, Link, Typography, Avatar, Box } from '@mui/material'
 import { makeStyles } from '@masknet/theme'
+import { NetworkPluginID } from '@masknet/web3-shared-base'
+import { useChainId } from '@masknet/plugin-infra/web3'
+import { useI18N } from '../../../utils'
 import { CollectionView } from './CollectionView'
 import { DetailsView } from './DetailsView'
-import { ChainId, formatWeiToEther, useChainId } from '@masknet/web3-shared-evm'
+import { ChainId, formatWeiToEther } from '@masknet/web3-shared-evm'
 import { useFetchProject } from '../hooks/useProject'
 import { ActionBar } from './ActionBar'
 import { resolveProjectLinkOnArtBlocks, resolveUserLinkOnArtBlocks } from '../pipes'
 import { ArtBlocksLogoUrl } from '../constants'
-import { EthereumChainBoundary } from '../../../web3/UI/EthereumChainBoundary'
+import { ChainBoundary } from '../../../web3/UI/ChainBoundary'
 
 const useStyles = makeStyles()((theme) => {
     return {
@@ -60,7 +62,7 @@ interface CollectibleProps {
 export function Collectible(props: CollectibleProps) {
     const { t } = useI18N()
     const { classes } = useStyles()
-    const chainId = useChainId()
+    const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
     const [tabIndex, setTabIndex] = useState(0)
 
     const { value, loading, error } = useFetchProject(props.projectId)
@@ -68,7 +70,7 @@ export function Collectible(props: CollectibleProps) {
 
     if (loading) return <Typography align="center">{t('loading')}</Typography>
 
-    if (error || !value)
+    if (error || !project)
         return (
             <Typography align="center" color="textPrimary">
                 {t('plugin_artblocks_smt_wrong')}
@@ -132,9 +134,12 @@ export function Collectible(props: CollectibleProps) {
                 </CardContent>
             </Card>
             <Box sx={{ flex: 1, display: 'flex', padding: 1.5 }}>
-                <EthereumChainBoundary chainId={props.chainId ?? chainId} renderInTimeline>
+                <ChainBoundary
+                    expectedPluginID={NetworkPluginID.PLUGIN_EVM}
+                    expectedChainId={props.chainId ?? chainId}
+                    renderInTimeline>
                     <ActionBar project={project} />
-                </EthereumChainBoundary>
+                </ChainBoundary>
             </Box>
         </>
     )
diff --git a/packages/mask/src/plugins/ArtBlocks/SNSAdaptor/CollectionView.tsx b/packages/mask/src/plugins/ArtBlocks/SNSAdaptor/CollectionView.tsx
index bb477728ab8e..74456aea4b03 100644
--- a/packages/mask/src/plugins/ArtBlocks/SNSAdaptor/CollectionView.tsx
+++ b/packages/mask/src/plugins/ArtBlocks/SNSAdaptor/CollectionView.tsx
@@ -4,7 +4,8 @@ import { useTheme } from '@mui/material/styles'
 import { MobileStepper, Button, Box, Paper, Typography, Skeleton, Link } from '@mui/material'
 import { KeyboardArrowLeft, KeyboardArrowRight, OpenInNew } from '@mui/icons-material'
 import { makeStyles } from '@masknet/theme'
-import { useChainId } from '@masknet/web3-shared-evm'
+import { useChainId } from '@masknet/plugin-infra/web3'
+import { NetworkPluginID } from '@masknet/web3-shared-base'
 import { resolveImageLinkOnArtBlocks, resolveTokenLinkOnArtBlocks } from '../pipes'
 import { buildTokenId } from '../utils'
 import type { Project } from '../types'
@@ -82,7 +83,7 @@ export function CollectionView(props: CollectionProps) {
     const { project } = props
     const [isImageLoaded, setImageLoaded] = useState(false)
     const [activeStep, setActiveStep] = useState(1)
-    const chainId = useChainId()
+    const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
 
     const currentSelectedToken = {
         tokenId: buildTokenId(Number(project.projectId), activeStep - 1),
diff --git a/packages/mask/src/plugins/ArtBlocks/SNSAdaptor/DetailsView.tsx b/packages/mask/src/plugins/ArtBlocks/SNSAdaptor/DetailsView.tsx
index 8618514b58b2..414584aeb33a 100644
--- a/packages/mask/src/plugins/ArtBlocks/SNSAdaptor/DetailsView.tsx
+++ b/packages/mask/src/plugins/ArtBlocks/SNSAdaptor/DetailsView.tsx
@@ -1,12 +1,8 @@
 import { FormattedAddress } from '@masknet/shared'
 import { makeStyles } from '@masknet/theme'
-import {
-    formatEthereumAddress,
-    formatWeiToEther,
-    getChainName,
-    resolveAddressLinkOnExplorer,
-    useChainId,
-} from '@masknet/web3-shared-evm'
+import { formatEthereumAddress, formatWeiToEther, chainResolver, explorerResolver } from '@masknet/web3-shared-evm'
+import { useChainId, useWeb3State } from '@masknet/plugin-infra/web3'
+import { NetworkPluginID } from '@masknet/web3-shared-base'
 import { OpenInNew } from '@mui/icons-material'
 import { Typography, Box, Link } from '@mui/material'
 import BigNumber from 'bignumber.js'
@@ -60,7 +56,8 @@ export function DetailsView(props: DetailsViewProps) {
     const { classes } = useStyles()
     const { project } = props
     const { t } = useI18N()
-    const chainId = useChainId() as number
+    const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
+    const { Others } = useWeb3State(NetworkPluginID.PLUGIN_EVM)
 
     const artistName = ` ${project.artistName}`
     const invocations = `${project.invocations} of ${project.maxInvocations}`
@@ -130,12 +127,12 @@ export function DetailsView(props: DetailsViewProps) {
 
                 <Box className={classes.meta_row}>
                     <Typography variant="body2">{t('plugin_artblocks_blockchain_row')}</Typography>
-                    <Typography variant="body2">{getChainName(chainId)}</Typography>
+                    <Typography variant="body2">{chainResolver.chainName(chainId)}</Typography>
                 </Box>
                 <Box className={classes.meta_row}>
                     <Typography variant="body2">{t('plugin_artblocks_contract_row')}</Typography>
                     <Link
-                        href={resolveAddressLinkOnExplorer(chainId, project.contract.id)}
+                        href={explorerResolver.transactionLink(chainId, project.contract.id)}
                         target="_blank"
                         rel="noopener noreferrer">
                         <Typography variant="body2">
diff --git a/packages/mask/src/plugins/ArtBlocks/SNSAdaptor/PurchaseDialog.tsx b/packages/mask/src/plugins/ArtBlocks/SNSAdaptor/PurchaseDialog.tsx
index 21fa65afa4b9..0aaf83acab0f 100644
--- a/packages/mask/src/plugins/ArtBlocks/SNSAdaptor/PurchaseDialog.tsx
+++ b/packages/mask/src/plugins/ArtBlocks/SNSAdaptor/PurchaseDialog.tsx
@@ -1,13 +1,9 @@
+import { useCallback, useMemo, useState } from 'react'
+import { Trans } from 'react-i18next'
 import { InjectedDialog, TokenAmountPanel, useOpenShareTxDialog, useShowConfirm } from '@masknet/shared'
 import { makeStyles } from '@masknet/theme'
-import { leftShift } from '@masknet/web3-shared-base'
-import {
-    ERC20TokenDetailed,
-    EthereumTokenType,
-    FungibleTokenDetailed,
-    useArtBlocksConstants,
-    useFungibleTokenWatched,
-} from '@masknet/web3-shared-evm'
+import { FungibleToken, leftShift, NetworkPluginID } from '@masknet/web3-shared-base'
+import { SchemaType, useArtBlocksConstants, ChainId } from '@masknet/web3-shared-evm'
 import {
     Card,
     CardActions,
@@ -18,16 +14,15 @@ import {
     Link,
     Typography,
 } from '@mui/material'
-import { useCallback, useMemo, useState } from 'react'
-import { Trans } from 'react-i18next'
-import { usePostLink } from '../../../components/DataSource/usePostInfo'
 import ActionButton from '../../../extension/options-page/DashboardComponents/ActionButton'
+import { WalletConnectedBoundary } from '../../../web3/UI/WalletConnectedBoundary'
+import { useFungibleTokenWatched } from '@masknet/plugin-infra/web3'
+import { usePostLink } from '../../../components/DataSource/usePostInfo'
 import { activatedSocialNetworkUI } from '../../../social-network'
 import { isFacebook } from '../../../social-network-adaptor/facebook.com/base'
 import { isTwitter } from '../../../social-network-adaptor/twitter.com/base'
 import { useI18N } from '../../../utils'
 import { EthereumERC20TokenApprovedBoundary } from '../../../web3/UI/EthereumERC20TokenApprovedBoundary'
-import { EthereumWalletConnectedBoundary } from '../../../web3/UI/EthereumWalletConnectedBoundary'
 import { usePurchaseCallback } from '../hooks/usePurchaseCallback'
 import type { Project } from '../types'
 
@@ -58,23 +53,23 @@ export function PurchaseDialog(props: ActionBarProps) {
     const { classes } = useStyles()
     const { project, open, onClose } = props
 
-    const { token, balance } = useFungibleTokenWatched({
-        type: project.currencySymbol === 'ETH' || !project.currencySymbol ? 0 : 1,
-        address: project.currencyAddress ? project.currencyAddress : '',
-    })
+    const { token, balance } = useFungibleTokenWatched(
+        NetworkPluginID.PLUGIN_EVM,
+        project.currencyAddress ? project.currencyAddress : '',
+    )
 
     const [ToS_Checked, setToS_Checked] = useState(false)
     const [{ loading: isPurchasing }, purchaseCallback] = usePurchaseCallback(
         project.projectId,
         project.pricePerTokenInWei,
-        token.value?.type,
+        token.value?.schema,
     )
     const price = useMemo(
         () => leftShift(project.pricePerTokenInWei, token.value?.decimals),
         [project.pricePerTokenInWei, token.value?.decimals],
     )
-
     const postLink = usePostLink()
+
     const shareText = [
         t(
             isTwitter(activatedSocialNetworkUI) || isFacebook(activatedSocialNetworkUI)
@@ -142,7 +137,7 @@ export function PurchaseDialog(props: ActionBarProps) {
                             label={t('plugin_artblocks_price_per_mint')}
                             amount={price.toString()}
                             balance={balance.value ?? '0'}
-                            token={token.value as FungibleTokenDetailed}
+                            token={token.value as FungibleToken<ChainId, SchemaType>}
                             onAmountChange={() => {}}
                         />
                         <FormControlLabel
@@ -173,17 +168,17 @@ export function PurchaseDialog(props: ActionBarProps) {
                         />
                     </CardContent>
                     <CardActions>
-                        <EthereumWalletConnectedBoundary>
-                            {token.value?.type === EthereumTokenType.Native ? actionButton : null}
-                            {token.value?.type === EthereumTokenType.ERC20 ? (
+                        <WalletConnectedBoundary>
+                            {token.value?.schema === SchemaType.Native ? actionButton : null}
+                            {token.value?.schema === SchemaType.ERC20 ? (
                                 <EthereumERC20TokenApprovedBoundary
                                     amount={project.pricePerTokenInWei}
                                     spender={spender}
-                                    token={token.value as ERC20TokenDetailed}>
+                                    token={token.value}>
                                     {actionButton}
                                 </EthereumERC20TokenApprovedBoundary>
                             ) : null}
-                        </EthereumWalletConnectedBoundary>
+                        </WalletConnectedBoundary>
                     </CardActions>
                 </Card>
             </DialogContent>
diff --git a/packages/mask/src/plugins/ArtBlocks/hooks/useArtBlocksContract.ts b/packages/mask/src/plugins/ArtBlocks/hooks/useArtBlocksContract.ts
index 3f75f28411fa..f65d9d2581ec 100644
--- a/packages/mask/src/plugins/ArtBlocks/hooks/useArtBlocksContract.ts
+++ b/packages/mask/src/plugins/ArtBlocks/hooks/useArtBlocksContract.ts
@@ -1,14 +1,14 @@
 import type { AbiItem } from 'web3-utils'
-import { useContract, useArtBlocksConstants } from '@masknet/web3-shared-evm'
+import { useContract } from '@masknet/plugin-infra/web3-evm'
+import { useArtBlocksConstants } from '@masknet/web3-shared-evm'
 import ArtBlocksCoreContractABI from '@masknet/web3-contracts/abis/ArtBlocksMinterContract.json'
 
 import type { ArtBlocksMinterContract } from '@masknet/web3-contracts/types/ArtBlocksMinterContract'
+import { useChainId } from '@masknet/plugin-infra/web3'
+import { NetworkPluginID } from '@masknet/web3-shared-base'
 
 export function useArtBlocksContract() {
     const { GEN_ART_721_MINTER } = useArtBlocksConstants()
-    const genArt721MinterContract = useContract<ArtBlocksMinterContract>(
-        GEN_ART_721_MINTER,
-        ArtBlocksCoreContractABI as AbiItem[],
-    )
-    return genArt721MinterContract
+    const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
+    return useContract<ArtBlocksMinterContract>(chainId, GEN_ART_721_MINTER, ArtBlocksCoreContractABI as AbiItem[])
 }
diff --git a/packages/mask/src/plugins/ArtBlocks/hooks/useProject.ts b/packages/mask/src/plugins/ArtBlocks/hooks/useProject.ts
index bf833669a492..07f314f76ef2 100644
--- a/packages/mask/src/plugins/ArtBlocks/hooks/useProject.ts
+++ b/packages/mask/src/plugins/ArtBlocks/hooks/useProject.ts
@@ -1,11 +1,12 @@
+import { NetworkPluginID } from '@masknet/web3-shared-base'
 import { fetchProject } from '../apis'
-import { useAsync } from 'react-use'
-import { useChainId } from '@masknet/web3-shared-evm'
+import { useAsyncRetry } from 'react-use'
+import { useChainId } from '@masknet/plugin-infra/web3'
 
 export function useFetchProject(projectId: string) {
-    const chainId = useChainId()
+    const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
 
-    return useAsync(async () => {
+    return useAsyncRetry(async () => {
         if (!projectId) return null
 
         return fetchProject(chainId, projectId)
diff --git a/packages/mask/src/plugins/ArtBlocks/hooks/usePurchaseCallback.ts b/packages/mask/src/plugins/ArtBlocks/hooks/usePurchaseCallback.ts
index 77dd05ef5df4..42bd8fed4fd5 100644
--- a/packages/mask/src/plugins/ArtBlocks/hooks/usePurchaseCallback.ts
+++ b/packages/mask/src/plugins/ArtBlocks/hooks/usePurchaseCallback.ts
@@ -1,19 +1,21 @@
+import { useAccount, useChainId } from '@masknet/plugin-infra/web3'
 import type { PayableTx } from '@masknet/web3-contracts/types/types'
-import { EthereumTokenType, TransactionEventType, useAccount, useChainId } from '@masknet/web3-shared-evm'
+import { NetworkPluginID } from '@masknet/web3-shared-base'
+import { SchemaType, TransactionEventType } from '@masknet/web3-shared-evm'
 import BigNumber from 'bignumber.js'
 import { useAsyncFn } from 'react-use'
 import { useArtBlocksContract } from './useArtBlocksContract'
 
-export function usePurchaseCallback(projectId: string, amount: string, tokenType?: number) {
-    const account = useAccount()
-    const chainId = useChainId()
+export function usePurchaseCallback(projectId: string, amount: string, schema?: SchemaType) {
+    const account = useAccount(NetworkPluginID.PLUGIN_EVM)
+    const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
 
     const genArt721MinterContract = useArtBlocksContract()
 
     return useAsyncFn(async () => {
         if (!genArt721MinterContract) return
 
-        const value = new BigNumber(tokenType === EthereumTokenType.Native ? amount : 0).toFixed()
+        const value = new BigNumber(schema === SchemaType.Native ? amount : 0).toFixed()
         const config = {
             from: account,
             value,
@@ -40,5 +42,5 @@ export function usePurchaseCallback(projectId: string, amount: string, tokenType
                     reject(error)
                 })
         })
-    }, [account, amount, chainId, genArt721MinterContract, tokenType])
+    }, [account, amount, chainId, genArt721MinterContract])
 }
diff --git a/packages/mask/src/plugins/ArtBlocks/hooks/useToken.ts b/packages/mask/src/plugins/ArtBlocks/hooks/useToken.ts
index 7dc92e4cafbf..23333706533c 100644
--- a/packages/mask/src/plugins/ArtBlocks/hooks/useToken.ts
+++ b/packages/mask/src/plugins/ArtBlocks/hooks/useToken.ts
@@ -1,11 +1,12 @@
+import { useAsyncRetry } from 'react-use'
+import { useChainId } from '@masknet/plugin-infra/web3'
+import { NetworkPluginID } from '@masknet/web3-shared-base'
 import { fetchToken } from '../apis'
-import { useAsync } from 'react-use'
-import { useChainId } from '@masknet/web3-shared-evm'
 
 export function useFetchToken(tokenId: number) {
-    const chainId = useChainId()
+    const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
 
-    return useAsync(async () => {
+    return useAsyncRetry(async () => {
         if (!tokenId) return null
 
         return fetchToken(chainId, tokenId)
diff --git a/packages/mask/src/plugins/ArtBlocks/pipes/index.ts b/packages/mask/src/plugins/ArtBlocks/pipes/index.ts
index 0d5423f3771d..55ff9ad0bb0e 100644
--- a/packages/mask/src/plugins/ArtBlocks/pipes/index.ts
+++ b/packages/mask/src/plugins/ArtBlocks/pipes/index.ts
@@ -1,4 +1,5 @@
-import { ChainId, createLookupTableResolver } from '@masknet/web3-shared-evm'
+import { ChainId } from '@masknet/web3-shared-evm'
+import { createLookupTableResolver } from '@masknet/web3-shared-base'
 import urlcat from 'urlcat'
 import {
     ArtBlocksRopstenUrl,
diff --git a/packages/mask/src/plugins/Avatar/Application/NFTAvatarsDialog.tsx b/packages/mask/src/plugins/Avatar/Application/NFTAvatarsDialog.tsx
index d76817e316b6..3c2ef4a3cb51 100644
--- a/packages/mask/src/plugins/Avatar/Application/NFTAvatarsDialog.tsx
+++ b/packages/mask/src/plugins/Avatar/Application/NFTAvatarsDialog.tsx
@@ -7,7 +7,7 @@ import type { SelectTokenInfo, TokenInfo } from '../types'
 import { PersonaPage } from './PersonaPage'
 import { DialogContent } from '@mui/material'
 import { useI18N } from '../locales/i18n_generated'
-import { isSameAddress } from '@masknet/web3-shared-evm'
+import { isSameAddress } from '@masknet/web3-shared-base'
 import { makeStyles } from '@masknet/theme'
 
 const useStyles = makeStyles()((theme) => ({
diff --git a/packages/mask/src/plugins/Avatar/Application/NFTList.tsx b/packages/mask/src/plugins/Avatar/Application/NFTList.tsx
index eb9615527ce4..35ab6e8e0167 100644
--- a/packages/mask/src/plugins/Avatar/Application/NFTList.tsx
+++ b/packages/mask/src/plugins/Avatar/Application/NFTList.tsx
@@ -1,5 +1,6 @@
 import { makeStyles, useTabs } from '@masknet/theme'
-import { ChainId, ERC721TokenDetailed } from '@masknet/web3-shared-evm'
+import type { NonFungibleToken } from '@masknet/web3-shared-base'
+import { ChainId, SchemaType } from '@masknet/web3-shared-evm'
 import { TabContext, TabPanel } from '@mui/lab'
 import { Tab, Tabs, Typography } from '@mui/material'
 import { Application_NFT_LIST_PAGE, SUPPORTED_CHAIN_IDS } from '../constants'
@@ -33,9 +34,9 @@ const useStyles = makeStyles<{ currentTab: Application_NFT_LIST_PAGE }>()((theme
 interface NFTListProps {
     address: string
     tokenInfo?: TokenInfo
-    onSelect: (token: ERC721TokenDetailed) => void
+    onSelect: (token: NonFungibleToken<ChainId, SchemaType>) => void
     onChangePage?: (page: Application_NFT_LIST_PAGE) => void
-    tokens?: ERC721TokenDetailed[]
+    tokens?: Array<NonFungibleToken<ChainId, SchemaType>>
     children?: React.ReactElement
 }
 
@@ -89,7 +90,7 @@ export function NFTList(props: NFTListProps) {
             {SUPPORTED_CHAIN_IDS.map((x, i) => (
                 <TabPanel key={i} value={x === ChainId.Mainnet ? tabs.ETH : tabs.Polygon} className={classes.tabPanel}>
                     <NFTListPage
-                        tokens={tokens.filter((y) => y.contractDetailed.chainId === x) ?? []}
+                        tokens={tokens.filter((y) => y.chainId === x) ?? []}
                         tokenInfo={tokenInfo}
                         chainId={x}
                         address={address}
diff --git a/packages/mask/src/plugins/Avatar/Application/NFTListDialog.tsx b/packages/mask/src/plugins/Avatar/Application/NFTListDialog.tsx
index 1488f4fc3deb..e0eef7044b40 100644
--- a/packages/mask/src/plugins/Avatar/Application/NFTListDialog.tsx
+++ b/packages/mask/src/plugins/Avatar/Application/NFTListDialog.tsx
@@ -1,5 +1,7 @@
 import { makeStyles, useCustomSnackbar } from '@masknet/theme'
-import { ChainId, ERC721TokenDetailed, isSameAddress, SocketState, useCollectibles } from '@masknet/web3-shared-evm'
+import { ChainId, SchemaType } from '@masknet/web3-shared-evm'
+import { isSameAddress, NetworkPluginID, NonFungibleToken } from '@masknet/web3-shared-base'
+import { useCollectibles } from '../hooks/useCollectibles'
 import { Box, Button, DialogActions, DialogContent, Skeleton, Stack, Typography } from '@mui/material'
 import { useCallback, useState, useEffect } from 'react'
 import { downloadUrl } from '../../../utils'
@@ -11,7 +13,7 @@ import { Translate, useI18N } from '../locales'
 import { AddressNames } from './WalletList'
 import { NFTList } from './NFTList'
 import { Application_NFT_LIST_PAGE } from '../constants'
-import { NetworkPluginID, useAccount, useCurrentWeb3NetworkPluginID } from '@masknet/plugin-infra/web3'
+import { useChainId, useAccount, useCurrentWeb3NetworkPluginID } from '@masknet/plugin-infra/web3'
 import { NFTWalletConnect } from './WalletConnect'
 
 const useStyles = makeStyles()((theme) => ({
@@ -73,9 +75,9 @@ const useStyles = makeStyles()((theme) => ({
     },
 }))
 
-function isSameToken(token?: ERC721TokenDetailed, tokenInfo?: TokenInfo) {
+function isSameToken(token?: NonFungibleToken<ChainId, SchemaType>, tokenInfo?: TokenInfo) {
     if (!token && !tokenInfo) return false
-    return isSameAddress(token?.contractDetailed.address, tokenInfo?.address) && token?.tokenId === tokenInfo?.tokenId
+    return isSameAddress(token?.address, tokenInfo?.address) && token?.tokenId === tokenInfo?.tokenId
 }
 interface NFTListDialogProps {
     onNext: () => void
@@ -87,14 +89,14 @@ interface NFTListDialogProps {
 export function NFTListDialog(props: NFTListDialogProps) {
     const { onNext, wallets, onSelected, tokenInfo } = props
     const { classes } = useStyles()
-
-    const account = useAccount()
+    const account = useAccount(NetworkPluginID.PLUGIN_EVM)
+    const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
     const [open_, setOpen_] = useState(false)
     const [selectedAccount, setSelectedAccount] = useState('')
-    const [selectedToken, setSelectedToken] = useState<ERC721TokenDetailed>()
+    const [selectedToken, setSelectedToken] = useState<NonFungibleToken<ChainId, SchemaType>>()
     const [disabled, setDisabled] = useState(false)
     const t = useI18N()
-    const [tokens, setTokens] = useState<ERC721TokenDetailed[]>([])
+    const [tokens, setTokens] = useState<Array<NonFungibleToken<ChainId, SchemaType>>>([])
     const [currentPage, setCurrentPage] = useState<Application_NFT_LIST_PAGE>(
         Application_NFT_LIST_PAGE.Application_nft_tab_eth_page,
     )
@@ -102,27 +104,22 @@ export function NFTListDialog(props: NFTListDialogProps) {
     const POLYGON_PAGE = Application_NFT_LIST_PAGE.Application_nft_tab_polygon_page
 
     const currentPluginId = useCurrentWeb3NetworkPluginID()
-    const {
-        data: collectibles,
-        error,
-        retry,
-        state,
-    } = useCollectibles(selectedAccount, currentPage !== POLYGON_PAGE ? ChainId.Mainnet : ChainId.Matic)
+    const { collectibles, retry, error, loading } = useCollectibles()
 
     const { showSnackbar } = useCustomSnackbar()
     const onChange = useCallback((address: string) => {
         setSelectedAccount(address)
     }, [])
 
-    const onSelect = (token: ERC721TokenDetailed) => {
+    const onSelect = (token: NonFungibleToken<ChainId, SchemaType>) => {
         setSelectedToken(token)
     }
 
     const onSave = useCallback(async () => {
-        if (!selectedToken?.info?.imageURL) return
+        if (!selectedToken?.metadata?.imageURL) return
         setDisabled(true)
         try {
-            const image = await downloadUrl(selectedToken.info.imageURL)
+            const image = await downloadUrl(selectedToken.metadata.imageURL)
             onSelected({ image: URL.createObjectURL(image), account: selectedAccount, token: selectedToken })
             onNext()
             setDisabled(false)
@@ -146,8 +143,8 @@ export function NFTListDialog(props: NFTListDialogProps) {
 
     useEffect(() => setSelectedAccount(account || wallets?.[0]?.identity || ''), [account, wallets])
 
-    const onAddClick = (token: ERC721TokenDetailed) => {
-        setTokens((_tokens) => uniqBy([..._tokens, token], (x) => x.contractDetailed.address && x.tokenId))
+    const onAddClick = (token: NonFungibleToken<ChainId, SchemaType>) => {
+        setTokens((_tokens) => uniqBy([..._tokens, token], (x) => x.contract?.address && x.tokenId))
     }
 
     const onChangePage = (name: Application_NFT_LIST_PAGE) => {
@@ -206,7 +203,7 @@ export function NFTListDialog(props: NFTListDialogProps) {
     const NoNFTList = () => {
         if (currentPage === POLYGON_PAGE && tokens.length === 0) return AddCollectible
         else if (currentPage === POLYGON_PAGE && tokens.length) return
-        if (state !== SocketState.done) {
+        if (loading) {
             return LoadStatus
         }
         if (error) {
@@ -241,7 +238,7 @@ export function NFTListDialog(props: NFTListDialogProps) {
                         address={selectedAccount}
                         onSelect={onSelect}
                         onChangePage={onChangePage}
-                        tokens={uniqBy([...tokens, ...collectibles], (x) => x.contractDetailed.address && x.tokenId)}
+                        tokens={uniqBy([...tokens, ...collectibles], (x) => x.contract?.address && x.id)}
                         children={NoNFTList()}
                     />
                 )}
diff --git a/packages/mask/src/plugins/Avatar/Application/NFTListPage.tsx b/packages/mask/src/plugins/Avatar/Application/NFTListPage.tsx
index 065ead46a817..d8afc8b3dd32 100644
--- a/packages/mask/src/plugins/Avatar/Application/NFTListPage.tsx
+++ b/packages/mask/src/plugins/Avatar/Application/NFTListPage.tsx
@@ -1,11 +1,7 @@
+import { useImageChecker } from '@masknet/plugin-infra/web3'
 import { makeStyles } from '@masknet/theme'
-import {
-    ChainId,
-    createERC721Token,
-    ERC721TokenDetailed,
-    EthereumTokenType,
-    useImageChecker,
-} from '@masknet/web3-shared-evm'
+import type { NonFungibleToken } from '@masknet/web3-shared-base'
+import { ChainId, createERC721Token, SchemaType } from '@masknet/web3-shared-evm'
 import { Box, Skeleton } from '@mui/material'
 import { useState } from 'react'
 import { NFTImage } from '../SNSAdaptor/NFTImage'
@@ -49,31 +45,19 @@ interface NFTListPageProps {
     chainId: ChainId
     address: string
     tokenInfo?: TokenInfo
-    tokens: ERC721TokenDetailed[]
-    onSelect?: (token: ERC721TokenDetailed) => void
+    tokens: Array<NonFungibleToken<ChainId, SchemaType>>
+    onSelect?: (token: NonFungibleToken<ChainId, SchemaType>) => void
     children?: React.ReactElement
 }
 
 export function NFTListPage(props: NFTListPageProps) {
     const { classes } = useStyles()
     const { onSelect, chainId, tokenInfo, tokens, children } = props
-    const [selectedToken, setSelectedToken] = useState<ERC721TokenDetailed | undefined>(
-        tokenInfo
-            ? createERC721Token(
-                  {
-                      name: '',
-                      address: tokenInfo.address,
-                      chainId,
-                      symbol: '',
-                      type: EthereumTokenType.ERC721,
-                  },
-                  {},
-                  tokenInfo.tokenId,
-              )
-            : undefined,
+    const [selectedToken, setSelectedToken] = useState<NonFungibleToken<ChainId, SchemaType> | undefined>(
+        tokenInfo ? createERC721Token(chainId, tokenInfo.address, tokenInfo.tokenId) : undefined,
     )
 
-    const onChange = (token: ERC721TokenDetailed) => {
+    const onChange = (token: NonFungibleToken<ChainId, SchemaType>) => {
         if (!token) return
         setSelectedToken(token)
         onSelect?.(token)
@@ -84,7 +68,7 @@ export function NFTListPage(props: NFTListPageProps) {
             <Box className={classes.root}>
                 <Box className={classes.gallery}>
                     {children ??
-                        tokens.map((token: ERC721TokenDetailed, i) => (
+                        tokens.map((token: NonFungibleToken<ChainId, SchemaType>, i) => (
                             <NFTImageCollectibleAvatar
                                 key={i}
                                 token={token}
@@ -99,14 +83,14 @@ export function NFTListPage(props: NFTListPageProps) {
 }
 
 interface NFTImageCollectibleAvatarProps {
-    token: ERC721TokenDetailed
-    onChange: (token: ERC721TokenDetailed) => void
-    selectedToken?: ERC721TokenDetailed
+    token: NonFungibleToken<ChainId, SchemaType>
+    onChange: (token: NonFungibleToken<ChainId, SchemaType>) => void
+    selectedToken?: NonFungibleToken<ChainId, SchemaType>
 }
 
 function NFTImageCollectibleAvatar({ token, onChange, selectedToken }: NFTImageCollectibleAvatarProps) {
     const { classes } = useStyles()
-    const { value: isImageToken, loading } = useImageChecker(token.info?.imageURL)
+    const { value: isImageToken, loading } = useImageChecker(token.metadata?.imageURL)
 
     if (loading)
         return (
diff --git a/packages/mask/src/plugins/Avatar/Application/UploadAvatarDialog.tsx b/packages/mask/src/plugins/Avatar/Application/UploadAvatarDialog.tsx
index c310ea817d8e..48654698c1ad 100644
--- a/packages/mask/src/plugins/Avatar/Application/UploadAvatarDialog.tsx
+++ b/packages/mask/src/plugins/Avatar/Application/UploadAvatarDialog.tsx
@@ -3,7 +3,8 @@ import AvatarEditor from 'react-avatar-editor'
 import { makeStyles, useCustomSnackbar } from '@masknet/theme'
 import { useCallback, useState } from 'react'
 import { NextIDStorage, Twitter, TwitterBaseAPI } from '@masknet/web3-providers'
-import type { ERC721TokenDetailed } from '@masknet/web3-shared-evm'
+import { ChainId, SchemaType } from '@masknet/web3-shared-evm'
+import type { NonFungibleToken } from '@masknet/web3-shared-base'
 import { getAvatarId } from '../../../social-network-adaptor/twitter.com/utils/user'
 import { usePersonaConnectStatus } from '../../../components/DataSource/usePersonaConnectStatus'
 import { BindingProof, fromHex, PersonaIdentifier, ProfileIdentifier, toBase64 } from '@masknet/shared-base'
@@ -33,7 +34,7 @@ interface UploadAvatarDialogProps {
     account?: string
     isBindAccount?: boolean
     image?: string | File
-    token?: ERC721TokenDetailed
+    token?: NonFungibleToken<ChainId, SchemaType>
     proof?: BindingProof
     onBack: () => void
     onClose: () => void
@@ -84,22 +85,23 @@ async function saveToNextID(info: NextIDAvatarMeta, persona?: PersonaIdentifier,
 async function Save(
     account: string,
     isBindAccount: boolean,
-    token: ERC721TokenDetailed,
+    token: NonFungibleToken<ChainId, SchemaType>,
     data: AvatarInfo,
     persona: PersonaIdentifier,
     proof: BindingProof,
     identifier: ProfileIdentifier,
 ) {
-    if (!data) return false
+    if (!data || !token.contract?.address) return false
 
     const info: NextIDAvatarMeta = {
         nickname: data.nickname,
         userId: data.userId,
         imageUrl: data.imageUrl,
         avatarId: data.avatarId,
-        address: token.contractDetailed.address,
+        address: token.contract?.address,
         tokenId: token.tokenId,
-        chainId: token.contractDetailed.chainId,
+        chainId: token.contract?.chainId ?? ChainId.Mainnet,
+        schema: token.contract?.schema ?? SchemaType.ERC20,
     }
 
     if (isBindAccount) {
diff --git a/packages/mask/src/plugins/Avatar/Application/WalletConnect.tsx b/packages/mask/src/plugins/Avatar/Application/WalletConnect.tsx
index 14f261fad9cd..cdfc012139c2 100644
--- a/packages/mask/src/plugins/Avatar/Application/WalletConnect.tsx
+++ b/packages/mask/src/plugins/Avatar/Application/WalletConnect.tsx
@@ -1,14 +1,15 @@
 import { WalletMessages } from '@masknet/plugin-wallet'
 import { useRemoteControlledDialog } from '@masknet/shared-base-ui'
 import { makeStyles, useStylesExtends } from '@masknet/theme'
-import { resolveProviderHomeLink, useProviderType } from '@masknet/web3-shared-evm'
+import { providerResolver } from '@masknet/web3-shared-evm'
+import { useProviderType } from '@masknet/plugin-infra/web3'
 import { Box, Button, Link, Typography } from '@mui/material'
 import { WalletIcon } from '../assets/wallet'
 import LaunchIcon from '@mui/icons-material/Launch'
 import { useI18N } from '../locales/i18n_generated'
 import type { HTMLProps } from 'react'
 import { ApplicationSmallIcon } from '../assets/application'
-import { NetworkPluginID } from '@masknet/plugin-infra/web3'
+import { NetworkPluginID } from '@masknet/web3-shared-base'
 
 const useStyles = makeStyles()((theme) => ({
     root: {
@@ -47,7 +48,7 @@ interface NFTWalletConnectProps extends withClasses<'root'> {}
 
 export function NFTWalletConnect(props: NFTWalletConnectProps) {
     const classes = useStylesExtends(useStyles(), props)
-    const providerType = useProviderType()
+    const providerType = useProviderType(NetworkPluginID.PLUGIN_EVM)
     const t = useI18N()
 
     const { setDialog: openSelectProviderDialog } = useRemoteControlledDialog(
@@ -71,19 +72,21 @@ export function NFTWalletConnect(props: NFTWalletConnectProps) {
                 <Typography variant="body1" sx={{ marginLeft: 0.5 }} color="#07101b" fontWeight={500}>
                     Mask Network
                 </Typography>
-                <Link
-                    className={classes.link}
-                    href={resolveProviderHomeLink(providerType)}
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    onClick={stop}>
-                    <LaunchIcon fontSize="small" />
-                </Link>
+                {providerType ? (
+                    <Link
+                        className={classes.link}
+                        href={providerResolver.providerHomeLink(providerType)}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        onClick={stop}>
+                        <LaunchIcon fontSize="small" />
+                    </Link>
+                ) : null}
             </Box>
             <Rectangle className={classes.rectangle} />
             <Box className={classes.button}>
                 <Button
-                    onClick={() => openSelectProviderDialog({ open: true, pluginID: NetworkPluginID.PLUGIN_EVM })}
+                    onClick={() => openSelectProviderDialog({ open: true })}
                     style={{ width: 254, backgroundColor: '#07101b', color: 'white', borderRadius: 9999 }}
                     startIcon={<WalletIcon style={{ width: 18, height: 18 }} />}>
                     {t.connect_your_wallet()}
diff --git a/packages/mask/src/plugins/Avatar/Application/WalletList.tsx b/packages/mask/src/plugins/Avatar/Application/WalletList.tsx
index aebe972e725b..34cc3bd4aa5d 100644
--- a/packages/mask/src/plugins/Avatar/Application/WalletList.tsx
+++ b/packages/mask/src/plugins/Avatar/Application/WalletList.tsx
@@ -1,6 +1,6 @@
 import { ImageIcon, useSnackbarCallback } from '@masknet/shared'
 import { makeStyles, MaskColorVar, ShadowRootMenu, ShadowRootTooltip, useStylesExtends } from '@masknet/theme'
-import { isSameAddress } from '@masknet/web3-shared-evm'
+import { isSameAddress, NetworkPluginID } from '@masknet/web3-shared-base'
 import { Button, Divider, IconProps, Link, ListItemIcon, MenuItem, Stack, Typography, useTheme } from '@mui/material'
 import { memo, useCallback, useEffect, useState } from 'react'
 import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown'
@@ -11,7 +11,6 @@ import { WalletMessages } from '@masknet/plugin-wallet'
 import { NFTWalletConnect } from './WalletConnect'
 import { BindingProof, PopupRoutes } from '@masknet/shared-base'
 import {
-    NetworkPluginID,
     useChainId,
     useCurrentWeb3NetworkPluginID,
     useNetworkDescriptor,
@@ -28,6 +27,7 @@ import { VerifyIcon } from '../assets/verify'
 import { noop } from 'lodash-unified'
 import { Verify2Icon } from '../assets/Verify2'
 import { formatAddress } from '../utils'
+import { explorerResolver } from '@masknet/web3-shared-evm'
 
 const useStyles = makeStyles()((theme) => ({
     root: {
@@ -111,7 +111,7 @@ export function AddressNames(props: AddressNamesProps) {
     }, [chainId])
 
     const onConnectWallet = useCallback(() => {
-        openSelectProviderDialog({ open: true, pluginID: NetworkPluginID.PLUGIN_EVM })
+        openSelectProviderDialog({ open: true })
         onClose()
     }, [openSelectProviderDialog, onClose])
 
@@ -260,14 +260,14 @@ interface WalletUIProps {
 }
 
 function WalletUI(props: WalletUIProps) {
-    const { Utils } = useWeb3State()
+    const { Others } = useWeb3State()
     const { isETH, address, verify = false } = props
 
     const { classes } = useWalletUIStyles()
-    const chainId = useChainId()
+    const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
     const currentPluginId = useCurrentWeb3NetworkPluginID()
-    const networkDescriptor = useNetworkDescriptor(chainId, isETH ? NetworkPluginID.PLUGIN_EVM : currentPluginId)
-    const { value: domain } = useReverseAddress(address, NetworkPluginID.PLUGIN_EVM)
+    const networkDescriptor = useNetworkDescriptor(isETH ? NetworkPluginID.PLUGIN_EVM : currentPluginId, chainId)
+    const { value: domain } = useReverseAddress(NetworkPluginID.PLUGIN_EVM, address)
     if (!address) return null
     return (
         <Stack direction="row" alignItems="center" justifyContent="center">
@@ -291,7 +291,7 @@ function WalletUI(props: WalletUIProps) {
                     <CopyIconButton text={address} className={classes.copy} />
                     <Link
                         className={classes.link}
-                        href={Utils?.resolveAddressLink?.(chainId, address) ?? ''}
+                        href={explorerResolver.addressLink?.(chainId, address) ?? ''}
                         target="_blank"
                         title="View on Explorer"
                         rel="noopener noreferrer">
diff --git a/packages/mask/src/plugins/Avatar/SNSAdaptor/AddNFT.tsx b/packages/mask/src/plugins/Avatar/SNSAdaptor/AddNFT.tsx
index 2dc642f172f3..d5967f8494ce 100644
--- a/packages/mask/src/plugins/Avatar/SNSAdaptor/AddNFT.tsx
+++ b/packages/mask/src/plugins/Avatar/SNSAdaptor/AddNFT.tsx
@@ -1,11 +1,11 @@
 import { makeStyles } from '@masknet/theme'
-import { ChainId, ERC721TokenDetailed, isSameAddress, useAccount } from '@masknet/web3-shared-evm'
+import type { ChainId, SchemaType } from '@masknet/web3-shared-evm'
 import { Button, DialogContent, InputBase, Typography } from '@mui/material'
 import { useCallback, useState } from 'react'
 import { InjectedDialog } from '@masknet/shared'
 import { useI18N } from '../../../utils'
-import { createNFT } from '../utils'
-import { WalletRPC } from '../../Wallet/messages'
+import { useAccount, useWeb3Connection } from '@masknet/plugin-infra/web3'
+import { isSameAddress, NetworkPluginID, NonFungibleToken } from '@masknet/web3-shared-base'
 
 const useStyles = makeStyles()((theme) => ({
     root: {},
@@ -37,18 +37,19 @@ export interface AddNFTProps {
     account?: string
     onClose: () => void
     chainId?: ChainId
-    onAddClick?: (token: ERC721TokenDetailed) => void
+    onAddClick?: (token: NonFungibleToken<ChainId, SchemaType>) => void
     open: boolean
     title?: string
 }
 export function AddNFT(props: AddNFTProps) {
+    const { onClose, open, onAddClick, title, chainId, account } = props
     const { t } = useI18N()
     const { classes } = useStyles()
     const [address, setAddress] = useState('')
     const [tokenId, setTokenId] = useState('')
     const [message, setMessage] = useState('')
-    const { onClose, open, onAddClick, title, chainId, account } = props
-    const _account = useAccount()
+    const _account = useAccount(NetworkPluginID.PLUGIN_EVM)
+    const connection = useWeb3Connection(NetworkPluginID.PLUGIN_EVM, { chainId })
 
     const onClick = useCallback(async () => {
         if (!address) {
@@ -60,22 +61,20 @@ export function AddNFT(props: AddNFTProps) {
             return
         }
 
-        createNFT(address, tokenId, chainId)
-            .then(async (token) => {
-                if (chainId && token && token.contractDetailed.chainId !== chainId) {
-                    setMessage('chain does not match.')
-                    return
-                }
-                if (!token || !isSameAddress(token?.info.owner, account ?? _account)) {
-                    setMessage(t('nft_owner_hint'))
-                    return
-                }
-                await WalletRPC.addToken(token)
-                onAddClick?.(token)
-                handleClose()
-            })
-            .catch((error) => setMessage(t('nft_owner_hint')))
-    }, [tokenId, address, onAddClick, onClose])
+        const token = await connection?.getNonFungibleToken(address, tokenId, { chainId })
+        if (token) {
+            if (chainId && token && token.contract?.chainId !== chainId) {
+                setMessage('chain does not match.')
+                return
+            }
+            if (!token || !isSameAddress(token?.contract?.owner, account ?? _account)) {
+                setMessage(t('nft_owner_hint'))
+                return
+            }
+            onAddClick?.(token)
+            handleClose()
+        }
+    }, [tokenId, address, onAddClick, onClose, connection, chainId])
 
     const onAddressChange = useCallback((address: string) => {
         setMessage('')
diff --git a/packages/mask/src/plugins/Avatar/SNSAdaptor/NFTAvatar.tsx b/packages/mask/src/plugins/Avatar/SNSAdaptor/NFTAvatar.tsx
index c9b9a5b13d30..8cbe2d2be27b 100644
--- a/packages/mask/src/plugins/Avatar/SNSAdaptor/NFTAvatar.tsx
+++ b/packages/mask/src/plugins/Avatar/SNSAdaptor/NFTAvatar.tsx
@@ -3,21 +3,16 @@ import { uniqBy } from 'lodash-unified'
 import { WalletMessages } from '@masknet/plugin-wallet'
 import { useRemoteControlledDialog } from '@masknet/shared-base-ui'
 import { makeStyles, useStylesExtends } from '@masknet/theme'
-import {
-    ChainId,
-    SocketState,
-    ERC721TokenDetailed,
-    useChainId,
-    useCollectibles,
-    useImageChecker,
-} from '@masknet/web3-shared-evm'
+import type { ChainId, SchemaType } from '@masknet/web3-shared-evm'
 import { Box, Button, Skeleton, Typography } from '@mui/material'
 import { useI18N } from '../../../utils'
-import { EthereumChainBoundary } from '../../../web3/UI/EthereumChainBoundary'
 import { AddNFT } from './AddNFT'
 import { NFTImage } from './NFTImage'
-import { useAccount } from '@masknet/plugin-infra/web3'
+import { useAccount, useChainId, useImageChecker } from '@masknet/plugin-infra/web3'
 import { ReversedAddress } from '@masknet/shared'
+import { NetworkPluginID, NonFungibleToken } from '@masknet/web3-shared-base'
+import { ChainBoundary } from '../../../web3/UI/ChainBoundary'
+import { useCollectibles } from '../hooks/useCollectibles'
 
 const useStyles = makeStyles()((theme) => ({
     root: {},
@@ -88,20 +83,20 @@ const useStyles = makeStyles()((theme) => ({
 }))
 
 export interface NFTAvatarProps extends withClasses<'root'> {
-    onChange: (token: ERC721TokenDetailed) => void
+    onChange: (token: NonFungibleToken<ChainId, SchemaType>) => void
     hideWallet?: boolean
 }
 
 export function NFTAvatar(props: NFTAvatarProps) {
     const { onChange, hideWallet } = props
     const classes = useStylesExtends(useStyles(), props)
-    const account = useAccount()
-    const chainId = useChainId()
-    const [selectedToken, setSelectedToken] = useState<ERC721TokenDetailed | undefined>()
+    const account = useAccount(NetworkPluginID.PLUGIN_EVM)
+    const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
+    const [selectedToken, setSelectedToken] = useState<NonFungibleToken<ChainId, SchemaType> | undefined>()
     const [open_, setOpen_] = useState(false)
-    const [collectibles_, setCollectibles_] = useState<ERC721TokenDetailed[]>([])
+    const [collectibles_, setCollectibles_] = useState<Array<NonFungibleToken<ChainId, SchemaType>>>([])
     const { t } = useI18N()
-    const { data: collectibles, error, retry, state } = useCollectibles(account, ChainId.Mainnet)
+    const { collectibles, error, retry, loading } = useCollectibles()
 
     const onClick = useCallback(async () => {
         if (!selectedToken) return
@@ -109,9 +104,9 @@ export function NFTAvatar(props: NFTAvatarProps) {
         setSelectedToken(undefined)
     }, [onChange, selectedToken])
 
-    const onAddClick = useCallback((token: ERC721TokenDetailed) => {
+    const onAddClick = useCallback((token: NonFungibleToken<ChainId, SchemaType>) => {
         setSelectedToken(token)
-        setCollectibles_((tokens) => uniqBy([token, ...tokens], (x) => x.contractDetailed.address && x.tokenId))
+        setCollectibles_((tokens) => uniqBy([token, ...tokens], (x) => x.contract?.address && x.tokenId))
     }, [])
 
     const { openDialog: openSelectProviderDialog } = useRemoteControlledDialog(
@@ -155,17 +150,17 @@ export function NFTAvatar(props: NFTAvatarProps) {
                         </Typography>
                     ) : null}
                 </Box>
-                <EthereumChainBoundary hiddenConnectButton chainId={chainId}>
+                <ChainBoundary expectedPluginID={NetworkPluginID.PLUGIN_EVM} expectedChainId={chainId}>
                     <Box className={classes.galleryItem}>
                         <Box className={classes.gallery}>
-                            {state !== SocketState.done && collectibles.length === 0
+                            {loading && !collectibles?.length
                                 ? LoadStatus
-                                : error || (collectibles.length === 0 && collectibles_.length === 0)
+                                : error || (!collectibles?.length && !collectibles_.length)
                                 ? Retry
                                 : uniqBy(
-                                      [...collectibles_, ...collectibles],
-                                      (x) => x.contractDetailed.address && x.tokenId,
-                                  ).map((token: ERC721TokenDetailed, i) => (
+                                      [...collectibles_, ...(collectibles ?? [])],
+                                      (x) => x.contract?.address && x.tokenId,
+                                  ).map((token: NonFungibleToken<ChainId, SchemaType>, i) => (
                                       <NFTImageCollectibleAvatar
                                           key={i}
                                           token={token}
@@ -184,21 +179,21 @@ export function NFTAvatar(props: NFTAvatarProps) {
                             </Button>
                         </Box>
                     </Box>
-                </EthereumChainBoundary>
+                </ChainBoundary>
             </Box>
             <AddNFT open={open_} onClose={() => setOpen_(false)} onAddClick={onAddClick} />
         </>
     )
 }
 interface NFTImageCollectibleAvatarProps {
-    token: ERC721TokenDetailed
-    setSelectedToken: React.Dispatch<React.SetStateAction<ERC721TokenDetailed | undefined>>
-    selectedToken?: ERC721TokenDetailed
+    token: NonFungibleToken<ChainId, SchemaType>
+    setSelectedToken: React.Dispatch<React.SetStateAction<NonFungibleToken<ChainId, SchemaType> | undefined>>
+    selectedToken?: NonFungibleToken<ChainId, SchemaType>
 }
 
 function NFTImageCollectibleAvatar({ token, setSelectedToken, selectedToken }: NFTImageCollectibleAvatarProps) {
     const { classes } = useStyles()
-    const { value: isImageToken, loading } = useImageChecker(token.info?.imageURL)
+    const { value: isImageToken, loading } = useImageChecker(token.metadata?.imageURL)
     if (loading)
         return (
             <div className={classes.skeletonBox}>
diff --git a/packages/mask/src/plugins/Avatar/SNSAdaptor/NFTImage.tsx b/packages/mask/src/plugins/Avatar/SNSAdaptor/NFTImage.tsx
index 5a019eb2032c..262ffffe653c 100644
--- a/packages/mask/src/plugins/Avatar/SNSAdaptor/NFTImage.tsx
+++ b/packages/mask/src/plugins/Avatar/SNSAdaptor/NFTImage.tsx
@@ -1,6 +1,7 @@
-import { makeStyles } from '@masknet/theme'
-import { ERC721TokenDetailed, isSameAddress } from '@masknet/web3-shared-evm'
 import classNames from 'classnames'
+import { makeStyles } from '@masknet/theme'
+import { isSameAddress, NonFungibleToken } from '@masknet/web3-shared-base'
+import type { ChainId, SchemaType } from '@masknet/web3-shared-evm'
 import { SelectedIcon } from '../assets/selected'
 
 const useStyles = makeStyles()((theme) => ({
@@ -36,18 +37,14 @@ const useStyles = makeStyles()((theme) => ({
 }))
 
 interface NFTImageProps {
-    token: ERC721TokenDetailed
-    selectedToken?: ERC721TokenDetailed
-    onChange: (token: ERC721TokenDetailed) => void
     showBadge?: boolean
+    token: NonFungibleToken<ChainId, SchemaType>
+    selectedToken?: NonFungibleToken<ChainId, SchemaType>
+    onChange: (token: NonFungibleToken<ChainId, SchemaType>) => void
 }
 
-function isSameNFT(a: ERC721TokenDetailed, b?: ERC721TokenDetailed) {
-    return (
-        isSameAddress(a.contractDetailed.address, b?.contractDetailed.address) &&
-        a.contractDetailed.chainId === b?.contractDetailed.chainId &&
-        a.tokenId === b?.tokenId
-    )
+function isSameNFT(a: NonFungibleToken<ChainId, SchemaType>, b?: NonFungibleToken<ChainId, SchemaType>) {
+    return isSameAddress(a.address, b?.address) && a.chainId === b?.chainId && a.tokenId === b?.tokenId
 }
 
 export function NFTImage(props: NFTImageProps) {
@@ -58,7 +55,7 @@ export function NFTImage(props: NFTImageProps) {
         <div className={classes.imgBackground}>
             <img
                 onClick={() => onChange(token)}
-                src={token.info.imageURL}
+                src={token.metadata?.imageURL}
                 className={classNames(classes.image, isSameNFT(token, selectedToken) ? classes.selected : '')}
             />
             {showBadge && isSameNFT(token, selectedToken) ? <SelectedIcon className={classes.icon} /> : null}
diff --git a/packages/mask/src/plugins/Avatar/Services/bind.ts b/packages/mask/src/plugins/Avatar/Services/bind.ts
index af699bd59d86..ecdb02f6074d 100644
--- a/packages/mask/src/plugins/Avatar/Services/bind.ts
+++ b/packages/mask/src/plugins/Avatar/Services/bind.ts
@@ -1,5 +1,5 @@
-import { ChainId, isSameAddress } from '@masknet/web3-shared-evm'
-import { NetworkPluginID } from '@masknet/plugin-infra/web3'
+import { NetworkPluginID, isSameAddress } from '@masknet/web3-shared-base'
+import { ChainId } from '@masknet/web3-shared-evm'
 import addSeconds from 'date-fns/addSeconds'
 import { KeyValue } from '@masknet/web3-providers'
 import { NFT_AVATAR_DB_NAME, NFT_AVATAR_DB_NAME_STORAGE } from '../constants'
diff --git a/packages/mask/src/plugins/Avatar/Services/index.ts b/packages/mask/src/plugins/Avatar/Services/index.ts
index c59479fc0d79..b8f63413f182 100644
--- a/packages/mask/src/plugins/Avatar/Services/index.ts
+++ b/packages/mask/src/plugins/Avatar/Services/index.ts
@@ -1,4 +1,4 @@
-import type { NetworkPluginID } from '@masknet/plugin-infra/web3'
+import type { NetworkPluginID } from '@masknet/web3-shared-base'
 import type { AvatarMetaDB } from '../types'
 import { getNFTAvatarFromJSON } from './db'
 import { getUserAddress, setUserAddress } from './bind'
diff --git a/packages/mask/src/plugins/Avatar/Services/rss3.ts b/packages/mask/src/plugins/Avatar/Services/rss3.ts
index 311d98b9f9b2..050fef2c063f 100644
--- a/packages/mask/src/plugins/Avatar/Services/rss3.ts
+++ b/packages/mask/src/plugins/Avatar/Services/rss3.ts
@@ -1,8 +1,8 @@
-import { personalSign } from '../../../extension/background-script/EthereumService'
 import type { AvatarMetaDB } from '../types'
 import addSeconds from 'date-fns/addSeconds'
 import { RSS3 } from '@masknet/web3-providers'
 import type { RSS3_KEY_SNS } from '../constants'
+import { WalletRPC } from '../../Wallet/messages'
 
 interface NFTRSSNode {
     signature: string
@@ -34,7 +34,7 @@ async function _getNFTAvatarFromRSS(
     snsKey: RSS3_KEY_SNS,
 ): Promise<NFTRSSNode | undefined> {
     const rss = RSS3.createRSS3(address, async (message: string) => {
-        return personalSign(message, address)
+        return WalletRPC.signPersonalMessage(message, address)
     })
 
     const nfts = await RSS3.getFileData<Record<string, NFTRSSNode>>(rss, address, snsKey)
@@ -46,7 +46,7 @@ async function _getNFTAvatarFromRSS(
 
 export async function saveNFTAvatarToRSS(address: string, nft: AvatarMetaDB, signature: string, snsKey: RSS3_KEY_SNS) {
     const rss = RSS3.createRSS3(address, async (message: string) => {
-        return personalSign(message, address)
+        return WalletRPC.signPersonalMessage(message, address)
     })
 
     let _nfts = await RSS3.getFileData<Record<string, NFTRSSNode>>(rss, address, snsKey)
diff --git a/packages/mask/src/plugins/Avatar/hooks/useCheckAddress.ts b/packages/mask/src/plugins/Avatar/hooks/useCheckAddress.ts
index 354f1b36671e..b269b29fdc02 100644
--- a/packages/mask/src/plugins/Avatar/hooks/useCheckAddress.ts
+++ b/packages/mask/src/plugins/Avatar/hooks/useCheckAddress.ts
@@ -1,4 +1,4 @@
-import { isSameAddress } from '@masknet/web3-shared-evm'
+import { isSameAddress } from '@masknet/web3-shared-base'
 import { useAsync } from 'react-use'
 import { activatedSocialNetworkUI } from '../../../social-network'
 import { PluginNFTAvatarRPC } from '../messages'
diff --git a/packages/mask/src/plugins/Avatar/hooks/useCollectibles.ts b/packages/mask/src/plugins/Avatar/hooks/useCollectibles.ts
new file mode 100644
index 000000000000..95b9332b0aa2
--- /dev/null
+++ b/packages/mask/src/plugins/Avatar/hooks/useCollectibles.ts
@@ -0,0 +1,21 @@
+import { useNonFungibleAssets } from '@masknet/plugin-infra/web3'
+import { NetworkPluginID, NonFungibleToken } from '@masknet/web3-shared-base'
+import { ChainId, SchemaType } from '@masknet/web3-shared-evm'
+
+export function useCollectibles() {
+    const {
+        value: assets = [],
+        error,
+        retry,
+        loading,
+    } = useNonFungibleAssets(NetworkPluginID.PLUGIN_EVM, SchemaType.ERC721)
+
+    const collectibles = assets.map((x) => {
+        return {
+            contract: x.contract,
+            metadata: x.metadata,
+            tokenId: x.id,
+        } as NonFungibleToken<ChainId, SchemaType>
+    })
+    return { collectibles, error, retry, loading }
+}
diff --git a/packages/mask/src/plugins/Avatar/hooks/useNFT.ts b/packages/mask/src/plugins/Avatar/hooks/useNFT.ts
index 5e3c0344e83b..43fb46eb2285 100644
--- a/packages/mask/src/plugins/Avatar/hooks/useNFT.ts
+++ b/packages/mask/src/plugins/Avatar/hooks/useNFT.ts
@@ -1,32 +1,31 @@
 import { ChainId } from '@masknet/web3-shared-evm'
 import { useAsyncRetry } from 'react-use'
 import type { NFT } from '../types'
-import { getNFT, getNFTByChain } from '../utils'
+import { useWeb3Connection } from '@masknet/plugin-infra/web3'
+import { NetworkPluginID } from '@masknet/web3-shared-base'
 
 const NFTCache = new Map<string, Promise<NFT | undefined>>()
 export function useNFT(address: string, tokenId: string, chainId?: ChainId) {
+    const connection = useWeb3Connection(NetworkPluginID.PLUGIN_EVM, { chainId })
     return useAsyncRetry(async () => {
         if (!address || !tokenId) return
         let f = NFTCache.get(`${address}-${tokenId}-${chainId ?? ChainId.Mainnet}`)
         if (!f) {
-            f = _getNFT(address, tokenId, chainId ?? ChainId.Mainnet)
+            f = _getNFT(connection, address, tokenId, chainId)
             NFTCache.set(`${address}-${tokenId}-${chainId ?? ChainId.Mainnet}`, f)
         }
         return f
-    }, [address, tokenId, NFTCache, getNFT, chainId])
+    }, [address, tokenId, NFTCache, connection, chainId])
 }
 
-async function _getNFT(address: string, tokenId: string, chainId: ChainId) {
-    if (chainId === ChainId.Mainnet) {
-        return getNFT(address, tokenId)
-    }
-    const nft = await getNFTByChain(address, tokenId, chainId)
+async function _getNFT(connection: any, address: string, tokenId: string, chainId?: ChainId) {
+    const nft = await connection.getNonFungibleToken(address, tokenId, { chainId })
     return {
         amount: '0',
-        name: nft?.contractDetailed.name ?? '',
-        symbol: nft?.contractDetailed.symbol ?? 'ETH',
-        image: nft?.info.imageURL ?? '',
-        owner: nft?.info.owner ?? '',
+        name: nft?.contract?.name ?? '',
+        symbol: nft?.contract?.symbol ?? 'ETH',
+        image: nft?.metadata?.imageURL ?? '',
+        owner: nft?.contract?.owner ?? '',
         slug: '',
     }
 }
diff --git a/packages/mask/src/plugins/Avatar/hooks/useTokenOwner.ts b/packages/mask/src/plugins/Avatar/hooks/useTokenOwner.ts
index 878dd96181cd..9d4c1d5098dd 100644
--- a/packages/mask/src/plugins/Avatar/hooks/useTokenOwner.ts
+++ b/packages/mask/src/plugins/Avatar/hooks/useTokenOwner.ts
@@ -1,37 +1,24 @@
-import {
-    ChainId,
-    isSameAddress,
-    safeNonPayableTransactionCall,
-    useAccount,
-    useERC721TokenContract,
-} from '@masknet/web3-shared-evm'
 import { useAsyncRetry } from 'react-use'
+import { isSameAddress, NetworkPluginID } from '@masknet/web3-shared-base'
 import { activatedSocialNetworkUI } from '../../../social-network'
 import { PluginNFTAvatarRPC } from '../messages'
-import { getNFTByOpensea } from '../utils'
 import { usePersonas } from './usePersonas'
+import { useWeb3Connection } from '@masknet/plugin-infra/web3'
+import type { ChainId } from '@masknet/web3-shared-evm'
 
 export function useTokenOwner(address: string, tokenId: string, chainId?: ChainId) {
-    const ERC721Contract = useERC721TokenContract(address, chainId ?? ChainId.Mainnet)
+    const connection = useWeb3Connection(NetworkPluginID.PLUGIN_EVM, { chainId })
     return useAsyncRetry(async () => {
-        if (!ERC721Contract || !tokenId) return
-        const nft = await getNFTByOpensea(address, tokenId)
-        if (nft) return nft
-        const allSettled = await Promise.allSettled([
-            safeNonPayableTransactionCall(ERC721Contract?.methods.ownerOf(tokenId)),
-            safeNonPayableTransactionCall(ERC721Contract.methods.name()),
-            safeNonPayableTransactionCall(ERC721Contract.methods.symbol()),
-        ])
-        const result = allSettled.map((x) => (x.status === 'fulfilled' ? x.value : undefined))
-        return { owner: result[0], name: result[1], symbol: result[2] }
-    }, [ERC721Contract, tokenId])
+        if (!address || !tokenId || !connection) return
+        const token = await connection.getNonFungibleToken(address, tokenId, { chainId })
+        return { owner: token?.contract?.owner, name: token?.contract?.name, symbol: token?.contract?.symbol }
+    }, [connection, tokenId, address])
 }
 
 export function useCheckTokenOwner(userId: string, owner?: string) {
-    const account = useAccount()
     const { value: persona, loading } = usePersonas(userId)
     const { value: address, loading: loadingAddress } = useAsyncRetry(
-        () => PluginNFTAvatarRPC.getAddress(userId, activatedSocialNetworkUI.networkIdentifier),
+        async () => PluginNFTAvatarRPC.getAddress(userId, activatedSocialNetworkUI.networkIdentifier),
         [userId],
     )
 
diff --git a/packages/mask/src/plugins/Avatar/locales/en-US.json b/packages/mask/src/plugins/Avatar/locales/en-US.json
index a267c4b7a6bb..8975dd037d62 100644
--- a/packages/mask/src/plugins/Avatar/locales/en-US.json
+++ b/packages/mask/src/plugins/Avatar/locales/en-US.json
@@ -9,7 +9,7 @@
     "connect_your_wallet": "Connect your wallet",
     "upload_avatar_failed_message": "Sorry, failed to save NFT Avatar. Please set again.",
     "upload_avatar_success_message": "Update NFT Avatar Success!",
-    "collectible_not_found": "Can' find it.",
+    "collectible_not_found": "No collectible found.",
     "add_collectible": "Add Collectibles",
     "set_avatar_title": "Set NFT Avatar",
     "set_PFP_title": "Set NFT PFP",
diff --git a/packages/mask/src/plugins/Avatar/types.ts b/packages/mask/src/plugins/Avatar/types.ts
index 8fddf38cc416..c276fb5401a6 100644
--- a/packages/mask/src/plugins/Avatar/types.ts
+++ b/packages/mask/src/plugins/Avatar/types.ts
@@ -1,4 +1,5 @@
-import type { ChainId, ERC721TokenDetailed } from '@masknet/web3-shared-evm'
+import type { NonFungibleToken } from '@masknet/web3-shared-base'
+import type { ChainId, SchemaType } from '@masknet/web3-shared-evm'
 
 export interface AvatarMetaDB {
     userId: string
@@ -6,6 +7,7 @@ export interface AvatarMetaDB {
     address: string
     avatarId: string
     chainId?: ChainId
+    schema?: SchemaType
 }
 
 export interface NFT {
@@ -19,7 +21,7 @@ export interface NFT {
 
 export interface SelectTokenInfo {
     account: string
-    token: ERC721TokenDetailed
+    token: NonFungibleToken<ChainId, SchemaType>
     image: string
 }
 
diff --git a/packages/mask/src/plugins/Avatar/utils/index.ts b/packages/mask/src/plugins/Avatar/utils/index.ts
index 3c03939f0808..6045a81c0be4 100644
--- a/packages/mask/src/plugins/Avatar/utils/index.ts
+++ b/packages/mask/src/plugins/Avatar/utils/index.ts
@@ -1,111 +1,17 @@
 import { first, isNull } from 'lodash-unified'
-import {
-    ChainId,
-    NonFungibleAssetProvider,
-    formatBalance,
-    createContract,
-    createWeb3,
-    getERC721ContractDetailed,
-    getERC721TokenDetailedFromChain,
-    ERC721TokenDetailed,
-    getERC721TokenAssetFromChain,
-} from '@masknet/web3-shared-evm'
-import { EVM_RPC } from '../../EVM/messages'
 import Services from '../../../extension/service'
-import { getOrderUnitPrice, NextIDProof, NextIDStorage, NonFungibleTokenAPI } from '@masknet/web3-providers'
-import { ZERO } from '@masknet/web3-shared-base'
+import { NextIDProof, NextIDStorage } from '@masknet/web3-providers'
+import { formatBalance, NonFungibleTokenEvent } from '@masknet/web3-shared-base'
 import BigNumber from 'bignumber.js'
 import { activatedSocialNetworkUI } from '../../../social-network'
 import type { NextIDPersonaBindings, NextIDPlatform } from '@masknet/shared-base'
 import type { NextIDAvatarMeta } from '../types'
 import { PLUGIN_ID } from '../constants'
-import type { ERC721 } from '@masknet/web3-contracts/types/ERC721'
-import type { AbiItem } from 'web3-utils'
-import ERC721ABI from '@masknet/web3-contracts/abis/ERC721.json'
+import type { ChainId, SchemaType } from '@masknet/web3-shared-evm'
 
-function getLastSalePrice(lastSale?: NonFungibleTokenAPI.AssetEvent | null) {
-    if (!lastSale?.total_price || !lastSale?.payment_token?.decimals) return
-    return formatBalance(lastSale.total_price, lastSale.payment_token.decimals)
-}
-
-export async function getNFTByOpensea(address: string, tokenId: string) {
-    const asset = await EVM_RPC.getAsset({
-        address,
-        tokenId,
-        chainId: ChainId.Mainnet,
-        provider: NonFungibleAssetProvider.OPENSEA,
-    })
-
-    if (!asset) return
-    return {
-        name: asset?.name ?? '',
-        symbol: asset?.desktopOrder?.payment_token_contract?.symbol ?? 'ETH',
-        owner: asset?.top_ownerships[0].owner.address ?? '',
-    }
-}
-
-export async function getNFT(address: string, tokenId: string) {
-    const asset = await EVM_RPC.getAsset({
-        address,
-        tokenId,
-        chainId: ChainId.Mainnet,
-        provider: NonFungibleAssetProvider.OPENSEA,
-    })
-    const amount =
-        getOrderUnitPrice(
-            asset?.desktopOrder?.current_price,
-            asset?.desktopOrder?.payment_token_contract?.decimals ?? 0,
-            asset?.desktopOrder?.quantity ?? '1',
-        ) ??
-        getLastSalePrice(asset?.last_sale) ??
-        ZERO
-    return {
-        amount: new BigNumber(amount).toFixed(),
-        name: asset?.name ?? '',
-        symbol: asset?.desktopOrder?.payment_token_contract?.symbol ?? 'ETH',
-        image: asset?.image_url ?? '',
-        owner: asset?.top_ownerships?.[0]?.owner.address ?? '',
-        slug: asset?.slug ?? '',
-    }
-}
-
-export async function getNFTByChain(
-    address: string,
-    tokenId: string,
-    chainId: ChainId,
-): Promise<ERC721TokenDetailed | undefined> {
-    const web3 = createWeb3(Services.Ethereum.request, () => ({
-        chainId,
-    }))
-    const contract = createContract<ERC721>(web3, address, ERC721ABI as AbiItem[])
-    if (!contract) return
-
-    const contractDetailed = await getERC721ContractDetailed(contract, address, chainId)
-    const tokenDetailedFromChain = await getERC721TokenDetailedFromChain(contractDetailed, contract, tokenId)
-    if (!tokenDetailedFromChain) return
-    const info = await getERC721TokenAssetFromChain(tokenDetailedFromChain?.info.tokenURI)
-    const owner = await contract.methods.ownerOf(tokenId).call()
-    if (info && tokenDetailedFromChain) {
-        tokenDetailedFromChain.info = {
-            ...info,
-            owner,
-            ...tokenDetailedFromChain.info,
-            hasTokenDetailed: true,
-            name: info?.name ?? tokenDetailedFromChain?.info.name ?? '',
-        }
-    }
-    return tokenDetailedFromChain
-}
-
-export async function createNFT(address: string, tokenId: string, chainId?: ChainId) {
-    const token = await getNFTByChain(address, tokenId, chainId ?? ChainId.Mainnet)
-    if (token) return token
-    return EVM_RPC.getNFT({
-        address,
-        tokenId,
-        chainId: chainId ?? ChainId.Mainnet,
-        provider: chainId === ChainId.Matic ? NonFungibleAssetProvider.NFTSCAN : NonFungibleAssetProvider.OPENSEA,
-    })
+function getLastSalePrice(lastSale?: NonFungibleTokenEvent<ChainId, SchemaType> | null) {
+    if (!lastSale?.price?.usd || !lastSale.paymentToken?.decimals) return
+    return formatBalance(lastSale.price.usd, lastSale.paymentToken.decimals)
 }
 
 export async function getImage(image: string): Promise<string> {
diff --git a/packages/mask/src/plugins/Collectible/SNSAdaptor/Account.tsx b/packages/mask/src/plugins/Collectible/SNSAdaptor/Account.tsx
index d7f384142837..f8baabf1b34d 100644
--- a/packages/mask/src/plugins/Collectible/SNSAdaptor/Account.tsx
+++ b/packages/mask/src/plugins/Collectible/SNSAdaptor/Account.tsx
@@ -1,5 +1,6 @@
 import { useI18N } from '../../../utils'
-import { useAccount, isSameAddress } from '@masknet/web3-shared-evm'
+import { isSameAddress } from '@masknet/web3-shared-base'
+import { useAccount } from '@masknet/plugin-infra/web3'
 
 export interface AccountProps {
     address?: string
diff --git a/packages/mask/src/plugins/Collectible/SNSAdaptor/ArticleTab.tsx b/packages/mask/src/plugins/Collectible/SNSAdaptor/ArticleTab.tsx
index de18a192d279..e66d25696d56 100644
--- a/packages/mask/src/plugins/Collectible/SNSAdaptor/ArticleTab.tsx
+++ b/packages/mask/src/plugins/Collectible/SNSAdaptor/ArticleTab.tsx
@@ -57,16 +57,16 @@ export function ArticleTab(props: ArticleTabProps) {
 
     return useMemo(() => {
         if (!asset.value) return null
+        // TODO: Migrate `hasNativeAPI` to `@masknet/shared` to use it in <NFTCardStyledAssetPlayer /> directly.
         const resourceUrl = hasNativeAPI
-            ? asset.value.image_url || asset.value.animation_url
-            : asset.value.animation_url || asset.value.image_url
+            ? asset.value.metadata?.imageURL || asset.value.metadata?.mediaURL
+            : asset.value.metadata?.mediaURL || asset.value.metadata?.imageURL
         return (
             <CollectibleTab>
                 <div className={classes.body}>
-                    {/* Todo: Migrate `hasNativeAPI` to `@masknet/shared` to use it in <NFTCardStyledAssetPlayer /> directly.  */}
                     <NFTCardStyledAssetPlayer url={resourceUrl} classes={classes} isNative={hasNativeAPI} />
                 </div>
             </CollectibleTab>
         )
-    }, [asset.value?.animation_url, asset.value?.image_url, classes])
+    }, [asset.value?.metadata?.mediaURL, asset.value?.metadata?.imageURL, classes])
 }
diff --git a/packages/mask/src/plugins/Collectible/SNSAdaptor/Collectible.tsx b/packages/mask/src/plugins/Collectible/SNSAdaptor/Collectible.tsx
index 212bac2f1a27..3d68bc13a100 100644
--- a/packages/mask/src/plugins/Collectible/SNSAdaptor/Collectible.tsx
+++ b/packages/mask/src/plugins/Collectible/SNSAdaptor/Collectible.tsx
@@ -1,14 +1,13 @@
-import { ReactElement, useCallback } from 'react'
+import type { ReactElement } from 'react'
 import { Box, Button, CardActions, CardContent, CardHeader, Link, Paper, Tab, Tabs, Typography } from '@mui/material'
 import { makeStyles, MaskColorVar } from '@masknet/theme'
 import { Trans } from 'react-i18next'
-import { findIndex } from 'lodash-unified'
 import formatDateTime from 'date-fns/format'
 import isValidDate from 'date-fns/isValid'
 import isAfter from 'date-fns/isAfter'
 import VerifiedUserIcon from '@mui/icons-material/VerifiedUser'
 import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown'
-import { useI18N, useSwitcher } from '../../../utils'
+import { useI18N } from '../../../utils'
 import { ArticleTab } from './ArticleTab'
 import { TokenTab } from './TokenTab'
 import { OfferTab } from './OfferTab'
@@ -17,15 +16,12 @@ import { HistoryTab } from './HistoryTab'
 import { LinkingAvatar } from './LinkingAvatar'
 import { CollectibleState } from '../hooks/useCollectibleState'
 import { CollectibleCard } from './CollectibleCard'
-import { CollectibleProviderIcon } from './CollectibleProviderIcon'
 import { CollectibleTab } from '../types'
 import { resolveAssetLinkOnCurrentProvider, resolveCollectibleProviderName } from '../pipes'
-import { ActionBar } from './ActionBar'
-import { NonFungibleAssetProvider, useChainId } from '@masknet/web3-shared-evm'
-import { getEnumAsArray } from '@dimensiondev/kit'
-import { FootnoteMenu, FootnoteMenuOption } from '../../Trader/SNSAdaptor/trader/FootnoteMenu'
-import { LoadingAnimation } from '@masknet/shared'
+import { ActionBar } from './OpenSea/ActionBar'
 import { Markdown } from '../../Snapshot/SNSAdaptor/Markdown'
+import { useChainId } from '@masknet/plugin-infra/web3'
+import { CurrencyType, NetworkPluginID, SourceType } from '@masknet/web3-shared-base'
 
 const useStyles = makeStyles()((theme) => {
     return {
@@ -123,25 +119,25 @@ export interface CollectibleProps {}
 export function Collectible(props: CollectibleProps) {
     const { t } = useI18N()
     const { classes } = useStyles()
-    const chainId = useChainId()
+    const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
     const { token, asset, provider, setProvider, tabIndex, setTabIndex } = CollectibleState.useContainer()
 
-    // #region sync with settings
-    const collectibleProviderOptions = getEnumAsArray(NonFungibleAssetProvider)
-    const onDataProviderChange = useCallback((option: FootnoteMenuOption) => {
-        setProvider(option.value as NonFungibleAssetProvider)
-    }, [])
-    // #endregion
+    // // #region sync with settings
+    // const collectibleProviderOptions = getEnumAsArray(NonFungibleAssetProvider)
+    // const onDataProviderChange = useCallback((option: FootnoteMenuOption) => {
+    //     setProvider(option.value as NonFungibleAssetProvider)
+    // }, [])
+    // // #endregion
 
-    // #region provider switcher
-    const CollectibleProviderSwitcher = useSwitcher(
-        provider,
-        setProvider,
-        getEnumAsArray(NonFungibleAssetProvider).map((x) => x.value),
-        resolveCollectibleProviderName,
-        true,
-    )
-    // #endregion
+    // // #region provider switcher
+    // const CollectibleProviderSwitcher = useSwitcher(
+    //     provider,
+    //     setProvider,
+    //     getEnumAsArray(NonFungibleAssetProvider).map((x) => x.value),
+    //     resolveCollectibleProviderName,
+    //     true,
+    // )
+    // // #endregion
 
     if (!asset.value || !token)
         return (
@@ -150,7 +146,7 @@ export function Collectible(props: CollectibleProps) {
                     Failed to load your collectible on {resolveCollectibleProviderName(provider)}.
                 </Typography>
                 <Box alignItems="center" sx={{ padding: 1, display: 'flex', flexDirection: 'row', width: '100%' }}>
-                    <Box sx={{ flex: 1, padding: 1 }}> {CollectibleProviderSwitcher}</Box>
+                    {/* <Box sx={{ flex: 1, padding: 1 }}> {CollectibleProviderSwitcher}</Box> */}
                     <Box sx={{ flex: 1, padding: 1 }}>
                         <Button
                             variant="contained"
@@ -191,20 +187,17 @@ export function Collectible(props: CollectibleProps) {
     }
 
     const _asset = asset.value
-    const endDate = _asset.end_time
+    const endDate = _asset.auction?.endAt
     return (
         <>
             <CollectibleCard classes={{ root: classes.root }}>
                 <CardHeader
                     avatar={
                         <LinkingAvatar
-                            href={_asset.collectionLinkUrl}
-                            title={_asset.owner?.user?.username ?? _asset.owner?.address ?? ''}
+                            href={_asset.link ?? ''}
+                            title={_asset.owner?.nickname ?? _asset.owner?.address ?? ''}
                             src={
-                                _asset.collection?.image_url ??
-                                _asset.creator?.profile_img_url ??
-                                _asset.owner?.profile_img_url ??
-                                ''
+                                _asset.collection?.iconURL ?? _asset.creator?.avatarURL ?? _asset.owner?.avatarURL ?? ''
                             }
                         />
                     }
@@ -221,34 +214,37 @@ export function Collectible(props: CollectibleProps) {
                                         token.tokenId,
                                         provider,
                                     )}>
-                                    {_asset.name ?? ''}
+                                    {_asset.metadata?.name ?? ''}
                                 </Link>
                             ) : (
-                                _asset.name ?? ''
+                                _asset.metadata?.name ?? ''
                             )}
-                            {_asset.safelist_request_status === 'verified' ? (
+                            {_asset.collection?.verified ? (
                                 <VerifiedUserIcon color="primary" fontSize="small" sx={{ marginLeft: 0.5 }} />
                             ) : null}
                         </Typography>
                     }
                     subheader={
                         <>
-                            {_asset.description ? (
+                            {_asset.metadata?.description ? (
                                 <Box display="flex" alignItems="center">
                                     <Typography className={classes.subtitle} component="div" variant="body2">
-                                        <Markdown classes={{ root: classes.markdown }} content={_asset.description} />
+                                        <Markdown
+                                            classes={{ root: classes.markdown }}
+                                            content={_asset.metadata.description}
+                                        />
                                     </Typography>
                                 </Box>
                             ) : null}
 
-                            {_asset?.current_price ? (
+                            {_asset?.price?.[CurrencyType.USD] ? (
                                 <Box display="flex" alignItems="center" sx={{ marginTop: 1 }}>
                                     <Typography className={classes.description} component="span">
                                         <Trans
                                             i18nKey="plugin_collectible_description"
                                             values={{
-                                                price: _asset?.current_price,
-                                                symbol: _asset?.current_symbol,
+                                                price: _asset?.price[CurrencyType.USD],
+                                                symbol: CurrencyType.USD,
                                             }}
                                         />
                                     </Typography>
@@ -272,19 +268,13 @@ export function Collectible(props: CollectibleProps) {
                         }}>
                         {tabs}
                     </Tabs>
-                    <Paper className={classes.body}>
-                        {(asset.loading && (
-                            <div className={classes.loading}>
-                                <LoadingAnimation />
-                            </div>
-                        )) || <>{renderTab(tabIndex)}</>}
-                    </Paper>
+                    <Paper className={classes.body}>{renderTab(tabIndex)}</Paper>
                 </CardContent>
                 <CardActions className={classes.footer}>
                     {/* flex to make foot menu right */}
                     <div />
                     <div className={classes.footMenu}>
-                        <FootnoteMenu
+                        {/* <FootnoteMenu
                             options={collectibleProviderOptions.map((x) => ({
                                 name: (
                                     <>
@@ -298,7 +288,7 @@ export function Collectible(props: CollectibleProps) {
                             }))}
                             selectedIndex={findIndex(collectibleProviderOptions, (x) => x.value === provider)}
                             onChange={onDataProviderChange}
-                        />
+                        /> */}
                         <ArrowDropDownIcon />
                     </div>
                 </CardActions>
@@ -312,7 +302,7 @@ export function Collectible(props: CollectibleProps) {
                     </Typography>
                 </Box>
             )}
-            {provider === NonFungibleAssetProvider.OPENSEA ? <ActionBar /> : null}
+            {provider === SourceType.OpenSea ? <ActionBar /> : null}
         </>
     )
 }
diff --git a/packages/mask/src/plugins/Collectible/SNSAdaptor/CollectibleProviderIcon.tsx b/packages/mask/src/plugins/Collectible/SNSAdaptor/CollectibleProviderIcon.tsx
index 370d5441737d..d2b4c83ec131 100644
--- a/packages/mask/src/plugins/Collectible/SNSAdaptor/CollectibleProviderIcon.tsx
+++ b/packages/mask/src/plugins/Collectible/SNSAdaptor/CollectibleProviderIcon.tsx
@@ -2,8 +2,7 @@ import { makeStyles } from '@masknet/theme'
 import { OpenSeaIcon } from '../../../resources/OpenSeaIcon'
 import { RaribleIcon } from '../../../resources/RaribleIcon'
 import { ZoraIcon } from '../../../resources/ZoraIcon'
-import { unreachable } from '@dimensiondev/kit'
-import { NonFungibleAssetProvider } from '@masknet/web3-shared-evm'
+import { SourceType } from '@masknet/web3-shared-base'
 
 const useStyles = makeStyles()({
     opensea: {
@@ -26,21 +25,21 @@ const useStyles = makeStyles()({
 const NFTScanIcon = new URL('../../../resources/NFTScanIcon.png', import.meta.url).toString()
 
 export interface CollectibleProviderIconProps {
-    provider: NonFungibleAssetProvider
+    provider: SourceType
 }
 
 export function CollectibleProviderIcon(props: CollectibleProviderIconProps) {
     const { classes } = useStyles()
     switch (props.provider) {
-        case NonFungibleAssetProvider.NFTSCAN:
+        case SourceType.NFTScan:
             return <img src={NFTScanIcon} className={classes.NFTScan} />
-        case NonFungibleAssetProvider.OPENSEA:
+        case SourceType.OpenSea:
             return <OpenSeaIcon classes={{ root: classes.opensea }} viewBox="0 0 16 16" />
-        case NonFungibleAssetProvider.RARIBLE:
+        case SourceType.Rarible:
             return <RaribleIcon classes={{ root: classes.rarible }} viewBox="0 0 16 16" />
-        case NonFungibleAssetProvider.ZORA:
+        case SourceType.Zora:
             return <ZoraIcon classes={{ root: classes.rarible }} viewBox="0 0 16 16" />
         default:
-            unreachable(props.provider)
+            return <></>
     }
 }
diff --git a/packages/mask/src/plugins/Collectible/SNSAdaptor/HistoryTab/Row.tsx b/packages/mask/src/plugins/Collectible/SNSAdaptor/HistoryTab/Row.tsx
index 8b6b0e4d33b8..bca24f160d36 100644
--- a/packages/mask/src/plugins/Collectible/SNSAdaptor/HistoryTab/Row.tsx
+++ b/packages/mask/src/plugins/Collectible/SNSAdaptor/HistoryTab/Row.tsx
@@ -1,16 +1,13 @@
+import { useMemo } from 'react'
 import { Avatar, Link, TableCell, TableRow, Typography } from '@mui/material'
 import { makeStyles } from '@masknet/theme'
-import LinkIcon from '@mui/icons-material/Link'
 import { FormattedBalance } from '@masknet/shared'
-import { formatBalance, NonFungibleAssetProvider } from '@masknet/web3-shared-evm'
+import type { ChainId, SchemaType } from '@masknet/web3-shared-evm'
+import { getOrderUnitPrice } from '@masknet/web3-providers'
+import { CurrencyType, formatBalance, NonFungibleTokenEvent, SourceType } from '@masknet/web3-shared-base'
 import { formatElapsed } from '../../../Wallet/formatter'
-import { useMemo } from 'react'
 import { CollectibleState } from '../../hooks/useCollectibleState'
-import { resolveOpenSeaAssetEventType, resolveRaribleAssetEventType } from '../../pipes'
 import { Account } from '../Account'
-import { getOrderUnitPrice, NonFungibleTokenAPI } from '@masknet/web3-providers'
-import type { OpenSeaAssetEventType } from '../../types/opensea'
-import type { RaribleEventType } from '../../types'
 
 const useStyles = makeStyles()((theme) => {
     return {
@@ -42,7 +39,7 @@ const useStyles = makeStyles()((theme) => {
 })
 
 interface Props {
-    event: NonFungibleTokenAPI.History
+    event: NonFungibleTokenEvent<ChainId, SchemaType>
     isDifferenceToken?: boolean
 }
 
@@ -51,12 +48,12 @@ export function Row({ event, isDifferenceToken }: Props) {
     const { provider } = CollectibleState.useContainer()
 
     const unitPrice = useMemo(() => {
-        if (provider === NonFungibleAssetProvider.RARIBLE || !isDifferenceToken || !event.price) return null
+        if (provider === SourceType.Rarible || !isDifferenceToken || !event.price) return null
 
         return getOrderUnitPrice(
-            event.price.price ?? 0,
-            event.price.paymentToken?.decimals,
-            event.price.quantity,
+            event.price?.[CurrencyType.USD] ?? '0',
+            event.paymentToken?.decimals,
+            event.quantity,
         )?.toString()
     }, [event, isDifferenceToken, provider])
 
@@ -64,36 +61,31 @@ export function Row({ event, isDifferenceToken }: Props) {
         <TableRow>
             <TableCell>
                 <Typography className={classes.content} variant="body2">
-                    {provider === NonFungibleAssetProvider.OPENSEA
-                        ? resolveOpenSeaAssetEventType(
-                              event.eventType as OpenSeaAssetEventType,
-                              event.accountPair.from?.username,
-                          )
-                        : resolveRaribleAssetEventType(event.eventType as RaribleEventType)}
+                    {event.type}
                 </Typography>
             </TableCell>
             {isDifferenceToken ? (
                 <>
                     <TableCell>
                         <Typography className={classes.content} variant="body2">
-                            {event.price?.paymentToken?.image_url && (
-                                <Link href={event.price.asset?.permalink} target="_blank" rel="noopener noreferrer">
+                            {event.paymentToken?.logoURL && (
+                                <Link href={event.assetPermalink} target="_blank" rel="noopener noreferrer">
                                     <img
-                                        src={event.price.paymentToken.image_url}
+                                        src={event.paymentToken.logoURL}
                                         className={classes.token}
-                                        alt={event.price.asset?.asset_contract.symbol}
+                                        alt={event.assetPermalink}
                                     />
                                 </Link>
                             )}
                             {unitPrice}
-                            {event.price?.paymentToken?.symbol}
+                            {event.paymentToken?.symbol}
                         </Typography>
                     </TableCell>
                     <TableCell>
                         <Typography className={classes.content} variant="body2">
                             <FormattedBalance
-                                value={event.price?.quantity ?? 0}
-                                decimals={event.price?.asset?.decimals ?? 0}
+                                value={event.quantity ?? 0}
+                                decimals={event.paymentToken?.decimals ?? 0}
                                 formatter={formatBalance}
                             />
                         </Typography>
@@ -102,58 +94,46 @@ export function Row({ event, isDifferenceToken }: Props) {
             ) : (
                 <TableCell>
                     <Typography className={classes.content} variant="body2">
-                        {event.price && provider === NonFungibleAssetProvider.OPENSEA
-                            ? formatBalance(event.price.quantity, event.price?.asset?.decimals ?? 0)
-                            : event.price?.quantity ?? ''}
+                        {event.price && provider === SourceType.OpenSea
+                            ? formatBalance(event.quantity, event.paymentToken?.decimals ?? 0)
+                            : event.quantity ?? ''}
                     </Typography>
                 </TableCell>
             )}
             <TableCell>
-                {event.accountPair.from && (
+                {event.from && (
                     <Link
-                        href={event.accountPair.from.link}
-                        title={event.accountPair.from.username ?? event.accountPair.from.address ?? ''}
+                        href={event.from.link}
+                        title={event.from.nickname ?? event.from.address ?? ''}
                         target="_blank"
                         className={classes.account}
                         rel="noopener noreferrer">
-                        <Avatar src={event.accountPair.from.imageUrl} className={classes.avatar} />
+                        <Avatar src={event.from.avatarURL} className={classes.avatar} />
                         <Typography className={classes.accountName} variant="body2">
-                            <Account
-                                username={event.accountPair.from.username}
-                                address={event.accountPair.from.address?.slice(2, 8)}
-                            />
+                            <Account username={event.from.nickname} address={event.from.address?.slice(2, 8)} />
                         </Typography>
                     </Link>
                 )}
             </TableCell>
             <TableCell>
-                {event.accountPair.to && (
+                {event.to && (
                     <Link
-                        href={event.accountPair.to.link}
-                        title={event.accountPair.to.username ?? event.accountPair.to.address ?? ''}
+                        href={event.to.link}
+                        title={event.to.nickname ?? event.to.address ?? ''}
                         target="_blank"
                         className={classes.account}
                         rel="noopener noreferrer">
-                        <Avatar src={event.accountPair.to.imageUrl} className={classes.avatar} />
+                        <Avatar src={event.to.avatarURL} className={classes.avatar} />
                         <Typography className={classes.accountName} variant="body2">
-                            <Account username={event.accountPair.to.username} address={event.accountPair.to.address} />
+                            <Account username={event.to.nickname} address={event.to.address} />
                         </Typography>
                     </Link>
                 )}
             </TableCell>
             <TableCell className={classes.relativeTime}>
-                {event.transactionBlockExplorerLink ? (
-                    <Link href={event.transactionBlockExplorerLink} target="_blank" rel="noopener noreferrer">
-                        <Typography className={classes.content} variant="body2">
-                            {formatElapsed(event.timestamp)}
-                            <LinkIcon fontSize="inherit" />
-                        </Typography>
-                    </Link>
-                ) : (
-                    <Typography className={classes.content} color="primary" variant="body2">
-                        {formatElapsed(event.timestamp)}
-                    </Typography>
-                )}
+                <Typography className={classes.content} color="primary" variant="body2">
+                    {formatElapsed(event.timestamp)}
+                </Typography>
             </TableCell>
         </TableRow>
     )
diff --git a/packages/mask/src/plugins/Collectible/SNSAdaptor/HistoryTab/index.tsx b/packages/mask/src/plugins/Collectible/SNSAdaptor/HistoryTab/index.tsx
index 44320d07aa84..89d13c93b5ba 100644
--- a/packages/mask/src/plugins/Collectible/SNSAdaptor/HistoryTab/index.tsx
+++ b/packages/mask/src/plugins/Collectible/SNSAdaptor/HistoryTab/index.tsx
@@ -5,9 +5,9 @@ import { useI18N } from '../../../../utils'
 import { CollectibleTab } from '../CollectibleTab'
 import { CollectibleState } from '../../hooks/useCollectibleState'
 import { Row } from './Row'
-import { TableListPagination } from '../Pagination'
 import { LoadingAnimation } from '@masknet/shared'
-import { NonFungibleAssetProvider } from '@masknet/web3-shared-evm'
+import { SourceType } from '@masknet/web3-shared-base'
+import { EMPTY_LIST } from '@masknet/shared-base'
 
 const useStyles = makeStyles()((theme) => {
     return {
@@ -42,23 +42,24 @@ export interface HistoryTabProps {}
 export function HistoryTab(props: HistoryTabProps) {
     const { t } = useI18N()
     const { classes } = useStyles()
-    const { provider, events, eventPage, setEventPage } = CollectibleState.useContainer()
+    const { asset, provider } = CollectibleState.useContainer()
+
+    const events = asset.value?.events ?? EMPTY_LIST
 
     // #region If there is a different asset, the unit price and quantity should be displayed
     const isDifferenceToken = useMemo(() => {
-        if (provider === NonFungibleAssetProvider.OPENSEA)
-            return events.value?.data.some((item) => item.price?.asset?.asset_contract.symbol !== 'ETH')
+        if (provider === SourceType.OpenSea) return events.some((item) => item.paymentToken?.symbol !== 'ETH')
         else return false
-    }, [events.value, provider])
+    }, [events, provider])
     // #endregion
 
-    if (events.loading)
+    if (asset.loading)
         return (
             <div className={classes.empty}>
                 <LoadingAnimation />
             </div>
         )
-    if (!events.value || events.error || !events.value?.data.length)
+    if (events.length)
         return (
             <Table size="small" stickyHeader>
                 <TableBody className={classes.empty}>
@@ -70,7 +71,7 @@ export function HistoryTab(props: HistoryTabProps) {
                                     marginTop: 1,
                                 }}
                                 variant="text"
-                                onClick={() => events.retry()}>
+                                onClick={() => asset.retry()}>
                                 {t('plugin_collectible_retry')}
                             </Button>
                         </TableCell>
@@ -99,20 +100,10 @@ export function HistoryTab(props: HistoryTabProps) {
                     </TableRow>
                 </TableHead>
                 <TableBody>
-                    {events.value.data.map((order) => (
-                        <Row key={order.id} event={order} isDifferenceToken={isDifferenceToken} />
+                    {events.map((event) => (
+                        <Row key={event.id} event={event} isDifferenceToken={isDifferenceToken} />
                     ))}
                 </TableBody>
-                {(provider === NonFungibleAssetProvider.OPENSEA && events.value.data.length) || eventPage > 0 ? (
-                    <TableListPagination
-                        handlePrevClick={() => setEventPage((prev) => prev - 1)}
-                        handleNextClick={() => setEventPage((prev) => prev + 1)}
-                        prevDisabled={eventPage === 0}
-                        nextDisabled={!events.value.hasNextPage}
-                        page={eventPage}
-                        pageCount={10}
-                    />
-                ) : null}
             </Table>
         </CollectibleTab>
     )
diff --git a/packages/mask/src/plugins/Collectible/SNSAdaptor/ListingTab.tsx b/packages/mask/src/plugins/Collectible/SNSAdaptor/ListingTab.tsx
index 15366d7dff68..42328ac13be9 100644
--- a/packages/mask/src/plugins/Collectible/SNSAdaptor/ListingTab.tsx
+++ b/packages/mask/src/plugins/Collectible/SNSAdaptor/ListingTab.tsx
@@ -6,10 +6,9 @@ import { useI18N } from '../../../utils'
 import { CollectibleState } from '../hooks/useCollectibleState'
 import { CollectibleTab } from './CollectibleTab'
 import { OrderRow } from './OrderRow'
-import { TableListPagination } from './Pagination'
-import { NonFungibleAssetProvider, useAccount } from '@masknet/web3-shared-evm'
-import { isOne, isZero } from '@masknet/web3-shared-base'
+import { CurrencyType, isOne, isZero, OrderSide, SourceType } from '@masknet/web3-shared-base'
 import { LoadingAnimation } from '@masknet/shared'
+import { EMPTY_LIST } from '@masknet/shared-base'
 
 const useStyles = makeStyles()((theme) => {
     return {
@@ -40,18 +39,18 @@ const useStyles = makeStyles()((theme) => {
 export function ListingTab() {
     const { t } = useI18N()
     const { classes } = useStyles()
-    const account = useAccount()
-    const { token, asset, provider, orders, orderPage, setOrderPage } = CollectibleState.useContainer()
+    const { asset, provider } = CollectibleState.useContainer()
+
+    const orders = asset.value?.orders?.filter((x) => x.side === OrderSide.Sell) ?? EMPTY_LIST
 
     const isDifferenceToken = useMemo(() => {
-        if (provider === NonFungibleAssetProvider.OPENSEA) {
+        if (provider === SourceType.OpenSea) {
             return (
-                orders.value?.data.some(
+                orders.some(
                     (item) =>
-                        (item.payment_token_contract?.symbol !== 'WETH' &&
-                            item.payment_token_contract?.symbol !== 'ETH') ||
+                        (item.paymentToken?.symbol !== 'WETH' && item.paymentToken?.symbol !== 'ETH') ||
                         (item.quantity && !isOne(item.quantity)),
-                ) && orders.value?.data.filter((item) => isZero(item.expiration_time ?? 0)).length === 0
+                ) && orders.filter((item) => isZero(item.expiredAt ?? 0)).length === 0
             )
         } else {
             return false
@@ -59,17 +58,17 @@ export function ListingTab() {
     }, [provider, orders])
 
     const dataSource = useMemo(() => {
-        if (!orders.value || !orders.value?.data.length) return []
-        return orders.value.data.sort((a, b) => {
-            const current = new BigNumber(a.current_price ?? 0)
-            const next = new BigNumber(b.current_price ?? 0)
+        if (!orders.length) return []
+        return orders.sort((a, b) => {
+            const current = new BigNumber(a.price?.[CurrencyType.USD] ?? 0)
+            const next = new BigNumber(b.price?.[CurrencyType.USD] ?? 0)
             if (current.isLessThan(next)) return -1
             else if (current.isGreaterThan(next)) return 1
             return 0
         })
     }, [orders, asset.value])
 
-    if (asset.loading || orders.loading)
+    if (asset.loading)
         return (
             <div className={classes.empty}>
                 <LoadingAnimation />
@@ -112,7 +111,7 @@ export function ListingTab() {
                         ) : (
                             <>
                                 <TableCell>{t('plugin_collectible_price')}</TableCell>
-                                {provider === NonFungibleAssetProvider.OPENSEA ? (
+                                {provider === SourceType.OpenSea ? (
                                     <TableCell>{t('plugin_collectible_expiration')}</TableCell>
                                 ) : null}
                             </>
@@ -121,19 +120,9 @@ export function ListingTab() {
                 </TableHead>
                 <TableBody>
                     {dataSource.map((order) => (
-                        <OrderRow key={order.order_hash} order={order} isDifferenceToken={isDifferenceToken} />
+                        <OrderRow key={order.hash} order={order} isDifferenceToken={isDifferenceToken} />
                     ))}
                 </TableBody>
-                {(provider === NonFungibleAssetProvider.OPENSEA && dataSource.length) || orderPage > 0 ? (
-                    <TableListPagination
-                        handlePrevClick={() => setOrderPage((prev) => prev - 1)}
-                        handleNextClick={() => setOrderPage((prev) => prev + 1)}
-                        prevDisabled={orderPage === 0}
-                        nextDisabled={dataSource.length < 10}
-                        page={orderPage}
-                        pageCount={10}
-                    />
-                ) : null}
             </Table>
         </CollectibleTab>
     )
diff --git a/packages/mask/src/plugins/Collectible/SNSAdaptor/NFTPage.tsx b/packages/mask/src/plugins/Collectible/SNSAdaptor/NFTPage.tsx
index 303f1a0b5dfb..e463784558fd 100644
--- a/packages/mask/src/plugins/Collectible/SNSAdaptor/NFTPage.tsx
+++ b/packages/mask/src/plugins/Collectible/SNSAdaptor/NFTPage.tsx
@@ -1,10 +1,10 @@
 import { useState } from 'react'
 import { getMaskColor, makeStyles, ShadowRootMenu } from '@masknet/theme'
 import { MenuItem } from '@mui/material'
-import type { AddressName } from '@masknet/web3-shared-evm'
 import { CollectionList } from '../../../extension/options-page/DashboardComponents/CollectibleList'
 import { first, uniqBy } from 'lodash-unified'
 import { ReversedAddress } from '@masknet/shared'
+import type { IdentityAddress } from '@masknet/web3-shared-base'
 
 const useStyles = makeStyles()((theme) => ({
     root: {
@@ -43,7 +43,7 @@ const useStyles = makeStyles()((theme) => ({
 }))
 
 export interface NFTPageProps {
-    addressNames?: AddressName[]
+    addressNames?: IdentityAddress[]
 }
 
 export function NFTPage(props: NFTPageProps) {
@@ -54,7 +54,7 @@ export function NFTPage(props: NFTPageProps) {
     const [selectedAddress, setSelectedAddress] = useState(first(addressNames))
     const onOpen = (event: React.MouseEvent<HTMLButtonElement>) => setAnchorEl(event.currentTarget)
     const onClose = () => setAnchorEl(null)
-    const onSelect = (option: AddressName) => {
+    const onSelect = (option: IdentityAddress) => {
         setSelectedAddress(option)
         onClose()
     }
@@ -68,10 +68,10 @@ export function NFTPage(props: NFTPageProps) {
                 onClose={onClose}
                 anchorEl={anchorEl}
                 PaperProps={{ style: { maxHeight: 192 } }}>
-                {uniqBy(addressNames ?? [], (x) => x.resolvedAddress.toLowerCase()).map((x) => {
+                {uniqBy(addressNames ?? [], (x) => x.address.toLowerCase()).map((x) => {
                     return (
-                        <MenuItem key={x.resolvedAddress} value={x.resolvedAddress} onClick={() => onSelect(x)}>
-                            <ReversedAddress address={x.resolvedAddress} />
+                        <MenuItem key={x.address} value={x.address} onClick={() => onSelect(x)}>
+                            <ReversedAddress address={x.address} />
                         </MenuItem>
                     )
                 })}
diff --git a/packages/mask/src/plugins/Collectible/SNSAdaptor/OfferTab.tsx b/packages/mask/src/plugins/Collectible/SNSAdaptor/OfferTab.tsx
index 6e1bba72f0c9..f12d9cc7d468 100644
--- a/packages/mask/src/plugins/Collectible/SNSAdaptor/OfferTab.tsx
+++ b/packages/mask/src/plugins/Collectible/SNSAdaptor/OfferTab.tsx
@@ -5,9 +5,8 @@ import { useI18N } from '../../../utils'
 import { CollectibleState } from '../hooks/useCollectibleState'
 import { CollectibleTab } from './CollectibleTab'
 import { OrderRow } from './OrderRow'
-import { TableListPagination } from './Pagination'
-import { isOne, isZero } from '@masknet/web3-shared-base'
-import { NonFungibleAssetProvider } from '@masknet/web3-shared-evm'
+import { isOne, isZero, OrderSide, SourceType } from '@masknet/web3-shared-base'
+import { EMPTY_LIST } from '@masknet/shared-base'
 import { LoadingAnimation } from '@masknet/shared'
 
 const useStyles = makeStyles()((theme) => {
@@ -39,35 +38,31 @@ const useStyles = makeStyles()((theme) => {
 export function OfferTab() {
     const { t } = useI18N()
     const { classes } = useStyles()
-    const { asset, provider, offers, offerPage, setOfferPage } = CollectibleState.useContainer()
+    const { asset, provider } = CollectibleState.useContainer()
+
+    const offers = asset.value?.orders?.filter((x) => x.side === OrderSide.Buy) ?? EMPTY_LIST
 
     const isDifferenceToken = useMemo(() => {
-        if (provider === NonFungibleAssetProvider.OPENSEA) {
+        if (provider === SourceType.OpenSea) {
             return (
-                offers.value?.data.some(
+                offers.some(
                     (item) =>
-                        (item.payment_token_contract?.symbol !== 'WETH' &&
-                            item.payment_token_contract?.symbol !== 'ETH') ||
+                        (item.paymentToken?.symbol !== 'WETH' && item.paymentToken?.symbol !== 'ETH') ||
                         (item.quantity && !isOne(item.quantity)),
-                ) && offers.value.data.filter((item) => isZero(item.expiration_time ?? 0)).length === 0
+                ) && offers.filter((item) => isZero(item.expiredAt ?? 0)).length === 0
             )
         } else {
             return false
         }
     }, [provider, offers])
 
-    const dataSource = useMemo(() => {
-        if (!offers.value?.data.length) return []
-        return offers.value.data
-    }, [offers])
-
-    if (asset.loading || offers.loading)
+    if (asset.loading)
         return (
             <div className={classes.empty}>
                 <LoadingAnimation />
             </div>
         )
-    if (!offers.value?.data.length || asset.error || !dataSource.length)
+    if (!offers.length || asset.error)
         return (
             <Table size="small" stickyHeader>
                 <TableBody className={classes.empty}>
@@ -102,7 +97,7 @@ export function OfferTab() {
                         ) : (
                             <>
                                 <TableCell>{t('plugin_collectible_price')}</TableCell>
-                                {provider === NonFungibleAssetProvider.OPENSEA ? (
+                                {provider === SourceType.OpenSea ? (
                                     <TableCell>{t('plugin_collectible_expiration')}</TableCell>
                                 ) : null}
                             </>
@@ -110,20 +105,10 @@ export function OfferTab() {
                     </TableRow>
                 </TableHead>
                 <TableBody>
-                    {dataSource.map((order) => (
-                        <OrderRow key={order.order_hash} order={order} isDifferenceToken={isDifferenceToken} />
+                    {offers.map((order) => (
+                        <OrderRow key={order.hash} order={order} isDifferenceToken={isDifferenceToken} />
                     ))}
                 </TableBody>
-                {(provider === NonFungibleAssetProvider.OPENSEA && dataSource.length) || offerPage > 0 ? (
-                    <TableListPagination
-                        handlePrevClick={() => setOfferPage((prev) => prev - 1)}
-                        handleNextClick={() => setOfferPage((prev) => prev + 1)}
-                        prevDisabled={offerPage === 0}
-                        nextDisabled={dataSource.length < 10}
-                        page={offerPage}
-                        pageCount={10}
-                    />
-                ) : null}
             </Table>
         </CollectibleTab>
     )
diff --git a/packages/mask/src/plugins/Collectible/SNSAdaptor/ActionBar.tsx b/packages/mask/src/plugins/Collectible/SNSAdaptor/OpenSea/ActionBar.tsx
similarity index 65%
rename from packages/mask/src/plugins/Collectible/SNSAdaptor/ActionBar.tsx
rename to packages/mask/src/plugins/Collectible/SNSAdaptor/OpenSea/ActionBar.tsx
index 01215c1def57..7b6cda385941 100644
--- a/packages/mask/src/plugins/Collectible/SNSAdaptor/ActionBar.tsx
+++ b/packages/mask/src/plugins/Collectible/SNSAdaptor/OpenSea/ActionBar.tsx
@@ -1,14 +1,16 @@
 import { Box } from '@mui/material'
 import { makeStyles } from '@masknet/theme'
-import { useI18N } from '../../../utils'
-import { CollectibleState } from '../hooks/useCollectibleState'
-import ActionButton from '../../../extension/options-page/DashboardComponents/ActionButton'
-import { useControlledDialog } from '../../../utils/hooks/useControlledDialog'
+import { useI18N } from '../../../../utils'
+import { CollectibleState } from '../../hooks/useCollectibleState'
+import ActionButton from '../../../../extension/options-page/DashboardComponents/ActionButton'
+import { useControlledDialog } from '../../../../utils/hooks/useControlledDialog'
 import { MakeOfferDialog } from './MakeOfferDialog'
 import { PostListingDialog } from './PostListingDialog'
 import { CheckoutDialog } from './CheckoutDialog'
-import { EthereumChainBoundary } from '../../../web3/UI/EthereumChainBoundary'
-import { ChainId } from '@masknet/web3-shared-evm'
+import { ChainBoundary } from '../../../../web3/UI/ChainBoundary'
+import { useAccount, useChainId } from '@masknet/plugin-infra/web3'
+import { isSameAddress, NetworkPluginID } from '@masknet/web3-shared-base'
+import { useAssetOrder } from '../../hooks/useAssetOrder'
 
 const useStyles = makeStyles()((theme) => {
     return {
@@ -31,8 +33,10 @@ export interface ActionBarProps {}
 export function ActionBar(props: ActionBarProps) {
     const { t } = useI18N()
     const { classes } = useStyles()
-    const { asset, assetOrder } = CollectibleState.useContainer()
-    const assets = asset.value
+    const { asset } = CollectibleState.useContainer()
+    const account = useAccount(NetworkPluginID.PLUGIN_EVM)
+    const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
+    const { value: assetOrder } = useAssetOrder(asset.value?.address, asset.value?.tokenId)
 
     const {
         open: openCheckoutDialog,
@@ -47,10 +51,11 @@ export function ActionBar(props: ActionBarProps) {
     } = useControlledDialog()
 
     if (!asset.value) return null
+    const isOwner = isSameAddress(asset.value.owner?.address, account)
     return (
         <Box className={classes.root} sx={{ padding: 1.5 }} display="flex" justifyContent="center">
-            <EthereumChainBoundary chainId={ChainId.Mainnet} renderInTimeline>
-                {!asset.value.isOwner && asset.value.is_auction && assetOrder.value ? (
+            <ChainBoundary expectedPluginID={NetworkPluginID.PLUGIN_EVM} expectedChainId={chainId}>
+                {!isOwner && asset.value.auction ? (
                     <ActionButton
                         className={classes.button}
                         color="primary"
@@ -59,7 +64,7 @@ export function ActionBar(props: ActionBarProps) {
                         {t('plugin_collectible_buy_now')}
                     </ActionButton>
                 ) : null}
-                {!asset.value.isOwner && asset.value.is_auction ? (
+                {!isOwner && asset.value.auction ? (
                     <ActionButton
                         className={classes.button}
                         color="primary"
@@ -70,7 +75,7 @@ export function ActionBar(props: ActionBarProps) {
                     </ActionButton>
                 ) : null}
 
-                {!asset.value.isOwner && !asset.value.is_auction ? (
+                {!isOwner && !asset.value.auction ? (
                     <ActionButton
                         className={classes.button}
                         color="primary"
@@ -79,7 +84,7 @@ export function ActionBar(props: ActionBarProps) {
                         {t('plugin_collectible_make_offer')}
                     </ActionButton>
                 ) : null}
-                {assets?.isOwner ? (
+                {isOwner ? (
                     <ActionButton
                         className={classes.button}
                         color="primary"
@@ -89,14 +94,19 @@ export function ActionBar(props: ActionBarProps) {
                     </ActionButton>
                 ) : null}
                 <CheckoutDialog
-                    asset={asset}
+                    asset={asset.value}
                     order={assetOrder}
                     open={openCheckoutDialog}
                     onClose={onCloseCheckoutDialog}
                 />
-                <MakeOfferDialog asset={asset} open={openOfferDialog} onClose={onCloseOfferDialog} />
-                <PostListingDialog asset={asset} open={openListingDialog} onClose={onCloseListingDialog} />
-            </EthereumChainBoundary>
+                <PostListingDialog asset={asset.value} open={openListingDialog} onClose={onCloseListingDialog} />
+                <MakeOfferDialog
+                    asset={asset.value}
+                    order={assetOrder}
+                    open={openOfferDialog}
+                    onClose={onCloseOfferDialog}
+                />
+            </ChainBoundary>
         </Box>
     )
 }
diff --git a/packages/mask/src/plugins/Collectible/SNSAdaptor/CheckoutDialog.tsx b/packages/mask/src/plugins/Collectible/SNSAdaptor/OpenSea/CheckoutDialog.tsx
similarity index 79%
rename from packages/mask/src/plugins/Collectible/SNSAdaptor/CheckoutDialog.tsx
rename to packages/mask/src/plugins/Collectible/SNSAdaptor/OpenSea/CheckoutDialog.tsx
index bc520c67f29e..b116d0126e40 100644
--- a/packages/mask/src/plugins/Collectible/SNSAdaptor/CheckoutDialog.tsx
+++ b/packages/mask/src/plugins/Collectible/SNSAdaptor/OpenSea/CheckoutDialog.tsx
@@ -12,20 +12,20 @@ import {
 } from '@mui/material'
 import { makeStyles } from '@masknet/theme'
 import { Trans } from 'react-i18next'
-import { EthereumTokenType, useAccount, useFungibleTokenWatched } from '@masknet/web3-shared-evm'
-import { UnreviewedWarning } from './UnreviewedWarning'
-import { useI18N } from '../../../utils'
+import type { ChainId, SchemaType } from '@masknet/web3-shared-evm'
+import { UnreviewedWarning } from '../UnreviewedWarning'
+import { useI18N } from '../../../../utils'
 import { useRemoteControlledDialog } from '@masknet/shared-base-ui'
 import { InjectedDialog } from '@masknet/shared'
-import ActionButton, { ActionButtonPromise } from '../../../extension/options-page/DashboardComponents/ActionButton'
-import { EthereumWalletConnectedBoundary } from '../../../web3/UI/EthereumWalletConnectedBoundary'
-import { PluginCollectibleRPC } from '../messages'
-import { PluginTraderMessages } from '../../Trader/messages'
+import ActionButton, { ActionButtonPromise } from '../../../../extension/options-page/DashboardComponents/ActionButton'
+import { WalletConnectedBoundary } from '../../../../web3/UI/WalletConnectedBoundary'
+import { PluginTraderMessages } from '../../../Trader/messages'
 import { CheckoutOrder } from './CheckoutOrder'
-import type { useAsset } from '../../EVM/hooks/useAsset'
-import type { useAssetOrder } from '../hooks/useAssetOrder'
-import type { Coin } from '../../Trader/types'
-import { isGreaterThan } from '@masknet/web3-shared-base'
+import type { Coin } from '../../../Trader/types'
+import { isGreaterThan, NetworkPluginID, NonFungibleAsset } from '@masknet/web3-shared-base'
+import { useAccount, useChainId, useFungibleTokenWatched } from '@masknet/plugin-infra/web3'
+import type { Order } from 'opensea-js/lib/types'
+import { useOpenSea } from '../../hooks/useOpenSea'
 
 const useStyles = makeStyles()((theme) => {
     return {
@@ -56,37 +56,34 @@ const useStyles = makeStyles()((theme) => {
 })
 
 export interface CheckoutDialogProps {
-    asset?: ReturnType<typeof useAsset>
-    order: ReturnType<typeof useAssetOrder>
+    asset?: NonFungibleAsset<ChainId, SchemaType>
+    order?: Order
     open: boolean
     onClose: () => void
 }
 
 export function CheckoutDialog(props: CheckoutDialogProps) {
-    const { asset, open, onClose, order } = props
-    const isVerified = asset?.value?.is_verified ?? false
+    const { asset, order, open, onClose } = props
+    const isVerified = asset?.collection?.verified ?? false
     const { t } = useI18N()
     const { classes } = useStyles()
-    const account = useAccount()
-
+    const account = useAccount(NetworkPluginID.PLUGIN_EVM)
+    const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
+    const opensea = useOpenSea(chainId)
     const [unreviewedChecked, setUnreviewedChecked] = useState(false)
     const [ToS_Checked, setToS_Checked] = useState(false)
     const [insufficientBalance, setInsufficientBalance] = useState(false)
-    const { token, balance } = useFungibleTokenWatched({
-        type: EthereumTokenType.Native,
-        address: order.value?.paymentTokenContract?.address ?? '',
-    })
+    const { token, balance } = useFungibleTokenWatched(NetworkPluginID.PLUGIN_EVM, order?.paymentToken ?? '')
     const onCheckout = useCallback(async () => {
-        if (!asset?.value) return
-        if (!asset.value.token_id || !asset.value.token_address) return
-        if (!order.value) return
+        if (!asset?.tokenId || !asset.address) return
+        if (!order || !opensea) return
 
-        await PluginCollectibleRPC.fulfillOrder({
-            order: order.value,
+        await opensea.fulfillOrder({
+            order,
             accountAddress: account,
             recipientAddress: account,
         })
-    }, [asset?.value, account, order?.value])
+    }, [account, asset, order, opensea])
 
     const { setDialog: openSwapDialog } = useRemoteControlledDialog(PluginTraderMessages.swapDialogUpdated)
 
@@ -107,14 +104,14 @@ export function CheckoutDialog(props: CheckoutDialogProps) {
     }, [token.value, openSwapDialog])
 
     const validationMessage = useMemo(() => {
-        if (isGreaterThan(order?.value?.basePrice ?? 0, balance.value ?? 0)) {
+        if (isGreaterThan(order?.basePrice ?? 0, balance.value ?? 0)) {
             setInsufficientBalance(true)
             return t('plugin_collectible_insufficient_balance')
         }
         if (!isVerified && !unreviewedChecked) return t('plugin_collectible_ensure_unreviewed_item')
         if (!isVerified && !ToS_Checked) return t('plugin_collectible_check_tos_document')
         return ''
-    }, [isVerified, unreviewedChecked, ToS_Checked, order.value])
+    }, [isVerified, unreviewedChecked, ToS_Checked, order])
 
     return (
         <InjectedDialog title={t('plugin_collectible_checkout')} open={open} onClose={onClose}>
@@ -181,7 +178,7 @@ export function CheckoutDialog(props: CheckoutDialogProps) {
                         </Box>
                     </CardContent>
                     <CardActions className={classes.footer}>
-                        <EthereumWalletConnectedBoundary>
+                        <WalletConnectedBoundary>
                             <Box className={classes.buttons} display="flex" alignItems="center" justifyContent="center">
                                 <ActionButtonPromise
                                     className={classes.button}
@@ -196,19 +193,17 @@ export function CheckoutDialog(props: CheckoutDialogProps) {
                                     completeOnClick={onClose}
                                     failedOnClick="use executor"
                                 />
-                                {asset?.value?.isOrderWeth || insufficientBalance ? (
+                                {insufficientBalance ? (
                                     <ActionButton
                                         className={classes.button}
                                         variant="contained"
                                         size="large"
                                         onClick={onConvertClick}>
-                                        {insufficientBalance
-                                            ? t('plugin_collectible_get_more_token', { token: token.value?.symbol })
-                                            : t('plugin_collectible_convert_eth')}
+                                        {t('plugin_collectible_get_more_token', { token: token.value?.symbol })}
                                     </ActionButton>
                                 ) : null}
                             </Box>
-                        </EthereumWalletConnectedBoundary>
+                        </WalletConnectedBoundary>
                     </CardActions>
                 </Card>
             </DialogContent>
diff --git a/packages/mask/src/plugins/Collectible/SNSAdaptor/CheckoutOrder.tsx b/packages/mask/src/plugins/Collectible/SNSAdaptor/OpenSea/CheckoutOrder.tsx
similarity index 66%
rename from packages/mask/src/plugins/Collectible/SNSAdaptor/CheckoutOrder.tsx
rename to packages/mask/src/plugins/Collectible/SNSAdaptor/OpenSea/CheckoutOrder.tsx
index 1e427db55724..4faf01b0badf 100644
--- a/packages/mask/src/plugins/Collectible/SNSAdaptor/CheckoutOrder.tsx
+++ b/packages/mask/src/plugins/Collectible/SNSAdaptor/OpenSea/CheckoutOrder.tsx
@@ -1,11 +1,12 @@
 import { Table, TableHead, TableBody, TableRow, TableCell, Typography, Link } from '@mui/material'
 import { makeStyles } from '@masknet/theme'
-import { Image } from '../../../components/shared/Image'
-import { ERC20TokenDetailed, useChainId, formatBalance } from '@masknet/web3-shared-evm'
-import { resolveAssetLinkOnCurrentProvider } from '../pipes'
-import { useI18N } from '../../../utils'
+import { Image } from '../../../../components/shared/Image'
+import { CurrencyType, formatBalance, NetworkPluginID } from '@masknet/web3-shared-base'
+import { resolveAssetLinkOnCurrentProvider } from '../../pipes'
+import { useI18N } from '../../../../utils'
 import type { Order } from 'opensea-js/lib/types'
-import { CollectibleState } from '../hooks/useCollectibleState'
+import { CollectibleState } from '../../hooks/useCollectibleState'
+import { useChainId } from '@masknet/plugin-infra/web3'
 
 const useStyles = makeStyles()((theme) => ({
     itemInfo: {
@@ -17,23 +18,24 @@ const useStyles = makeStyles()((theme) => ({
     },
 }))
 
-export function CheckoutOrder() {
+export interface CheckoutOrderProps {
+    order?: Order
+}
+
+export function CheckoutOrder({ order }: CheckoutOrderProps) {
     const { t } = useI18N()
-    const { token, asset, assetOrder, provider } = CollectibleState.useContainer()
-    const order = assetOrder?.value ?? asset?.value?.desktopOrder
     const { classes } = useStyles()
-    const chainId = useChainId()
-    if (!asset?.value || !token) return null
-    if (!order) return null
+    const { token, asset, provider } = CollectibleState.useContainer()
+    const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
+
+    if (!asset?.value || !token || !order) return null
+
+    const price = (order as Order).currentPrice ?? asset.value.price?.[CurrencyType.USD]
 
-    const price = (order as Order).currentPrice ?? asset.value.current_price
     const getPrice = () => {
-        if (!price) return 'error'
-        const decimal = asset.value?.response_.collection.payment_tokens.find((item: ERC20TokenDetailed) => {
-            return item.symbol === asset.value?.current_symbol
-        })?.decimals
-        if (!decimal) return 'error'
-        return formatBalance(price, decimal) ?? 'error'
+        const decimals = order.paymentTokenContract?.decimals
+        if (!decimals) return 'error'
+        return formatBalance(price, decimals) ?? 'error'
     }
 
     return (
@@ -48,9 +50,9 @@ export function CheckoutOrder() {
                 <TableRow>
                     <TableCell>
                         <div className={classes.itemInfo}>
-                            <Image height={80} width={80} src={asset.value?.image_url ?? ''} />
+                            <Image height={80} width={80} src={asset.value?.metadata?.imageURL ?? ''} />
                             <div className={classes.texts}>
-                                <Typography>{asset.value.collection_name ?? ''}</Typography>
+                                <Typography>{asset.value.collection?.name ?? ''}</Typography>
                                 {token.contractAddress && token.tokenId ? (
                                     <Link
                                         color="primary"
@@ -62,17 +64,17 @@ export function CheckoutOrder() {
                                             token.tokenId,
                                             provider,
                                         )}>
-                                        <Typography>{asset.value.name ?? ''}</Typography>
+                                        <Typography>{asset.value.metadata?.name ?? ''}</Typography>
                                     </Link>
                                 ) : (
-                                    <Typography>{asset.value.name ?? ''}</Typography>
+                                    <Typography>{asset.value.metadata?.name ?? ''}</Typography>
                                 )}
                             </div>
                         </div>
                     </TableCell>
                     <TableCell align="right">
                         <Typography>
-                            {getPrice()} {asset.value.current_symbol}
+                            {getPrice()} {asset.value.metadata?.symbol}
                         </Typography>
                     </TableCell>
                 </TableRow>
@@ -82,7 +84,7 @@ export function CheckoutOrder() {
                     </TableCell>
                     <TableCell align="right">
                         <Typography>
-                            {getPrice()} {asset.value.current_symbol}
+                            {getPrice()} {asset.value.metadata?.symbol}
                         </Typography>
                     </TableCell>
                 </TableRow>
diff --git a/packages/mask/src/plugins/Collectible/SNSAdaptor/ListingByHighestBidCard.tsx b/packages/mask/src/plugins/Collectible/SNSAdaptor/OpenSea/ListingByHighestBidCard.tsx
similarity index 71%
rename from packages/mask/src/plugins/Collectible/SNSAdaptor/ListingByHighestBidCard.tsx
rename to packages/mask/src/plugins/Collectible/SNSAdaptor/OpenSea/ListingByHighestBidCard.tsx
index a95a27a5861b..3732f25d9a9e 100644
--- a/packages/mask/src/plugins/Collectible/SNSAdaptor/ListingByHighestBidCard.tsx
+++ b/packages/mask/src/plugins/Collectible/SNSAdaptor/OpenSea/ListingByHighestBidCard.tsx
@@ -1,25 +1,20 @@
+import { first } from 'lodash-unified'
 import { useCallback, useEffect, useMemo, useState } from 'react'
 import { Card, CardActions, CardContent } from '@mui/material'
 import { makeStyles } from '@masknet/theme'
-import {
-    EthereumTokenType,
-    FungibleTokenDetailed,
-    FungibleTokenWatched,
-    isNativeTokenAddress,
-    useAccount,
-} from '@masknet/web3-shared-evm'
-import { isZero, isLessThan } from '@masknet/web3-shared-base'
+import { ChainId, isNativeTokenAddress, SchemaType } from '@masknet/web3-shared-evm'
+import { isZero, isLessThan, NetworkPluginID, NonFungibleAsset, FungibleToken } from '@masknet/web3-shared-base'
 import formatDateTime from 'date-fns/format'
-import { useI18N } from '../../../utils'
-import { ActionButtonPromise } from '../../../extension/options-page/DashboardComponents/ActionButton'
-import { SelectTokenAmountPanel } from '../../ITO/SNSAdaptor/SelectTokenAmountPanel'
-import { EthereumWalletConnectedBoundary } from '../../../web3/UI/EthereumWalletConnectedBoundary'
-import { DateTimePanel } from '../../../web3/UI/DateTimePanel'
-import { PluginCollectibleRPC } from '../messages'
-import { toAsset } from '../helpers'
+import { useI18N } from '../../../../utils'
+import { ActionButtonPromise } from '../../../../extension/options-page/DashboardComponents/ActionButton'
+import { SelectTokenAmountPanel } from '../../../ITO/SNSAdaptor/SelectTokenAmountPanel'
+import { WalletConnectedBoundary } from '../../../../web3/UI/WalletConnectedBoundary'
+import { DateTimePanel } from '../../../../web3/UI/DateTimePanel'
+import { toAsset } from '../../helpers'
 import getUnixTime from 'date-fns/getUnixTime'
-import type { useAsset } from '../../EVM/hooks'
-import { isWyvernSchemaName } from '../utils'
+import { isWyvernSchemaName } from '../../utils'
+import { useAccount, useChainId, useFungibleTokenWatched } from '@masknet/plugin-infra/web3'
+import { useOpenSea } from '../../hooks/useOpenSea'
 
 const useStyles = makeStyles()((theme) => ({
     footer: {
@@ -42,18 +37,22 @@ const useStyles = makeStyles()((theme) => ({
 export interface ListingByHighestBidCardProps {
     open: boolean
     onClose: () => void
-    asset?: ReturnType<typeof useAsset>
-    tokenWatched: FungibleTokenWatched
-    paymentTokens: FungibleTokenDetailed[]
+    asset?: NonFungibleAsset<ChainId, SchemaType>
+    paymentTokens: Array<FungibleToken<ChainId, SchemaType>>
 }
 
 export function ListingByHighestBidCard(props: ListingByHighestBidCardProps) {
-    const { asset, tokenWatched, paymentTokens, open, onClose } = props
-    const { amount, token, balance, setAmount, setToken } = tokenWatched
+    const { asset, paymentTokens, open, onClose } = props
     const { t } = useI18N()
     const { classes } = useStyles()
+    const { amount, token, balance, setAmount, setAddress } = useFungibleTokenWatched(
+        NetworkPluginID.PLUGIN_EVM,
+        first(paymentTokens)?.address,
+    )
 
-    const account = useAccount()
+    const account = useAccount(NetworkPluginID.PLUGIN_EVM)
+    const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
+    const opensea = useOpenSea(chainId)
 
     const [reservePrice, setReservePrice] = useState('')
     const [expirationDateTime, setExpirationDateTime] = useState(new Date())
@@ -67,16 +66,14 @@ export function ListingByHighestBidCard(props: ListingByHighestBidCardProps) {
     }, [amount, reservePrice, expirationDateTime])
 
     const onPostListing = useCallback(async () => {
-        if (!asset?.value) return
-        if (!asset.value.token_id || !asset.value.token_address) return
-        if (!token?.value) return
-        if (token.value.type !== EthereumTokenType.ERC20) return
-        const schemaName = asset.value.asset_contract?.schemaName
-        await PluginCollectibleRPC.createSellOrder({
+        if (!opensea) return
+        if (!asset?.tokenId || !asset.address) return
+        if (token?.value?.schema !== SchemaType.ERC20) return
+        await opensea.createSellOrder({
             asset: toAsset({
-                tokenId: asset.value.token_id,
-                tokenAddress: asset.value.token_address,
-                schemaName: isWyvernSchemaName(schemaName) ? schemaName : undefined,
+                tokenId: asset.tokenId,
+                tokenAddress: asset.address,
+                schemaName: isWyvernSchemaName(asset.schema) ? asset.schema : undefined,
             }),
             accountAddress: account,
             startAmount: Number.parseFloat(amount),
@@ -85,7 +82,7 @@ export function ListingByHighestBidCard(props: ListingByHighestBidCardProps) {
             waitForHighestBid: true,
             paymentTokenAddress: token.value.address, // english auction must be erc20 token
         })
-    }, [asset?.value, token, amount, account, reservePrice, expirationDateTime])
+    }, [asset, token, amount, account, reservePrice, expirationDateTime, opensea])
 
     useEffect(() => {
         setAmount('')
@@ -99,10 +96,10 @@ export function ListingByHighestBidCard(props: ListingByHighestBidCardProps) {
                 <SelectTokenAmountPanel
                     amount={amount}
                     balance={balance.value ?? '0'}
-                    token={token.value as FungibleTokenDetailed}
+                    token={token.value}
                     disableNativeToken={!paymentTokens.some(isNativeTokenAddress)}
                     onAmountChange={setAmount}
-                    onTokenChange={setToken}
+                    onTokenChange={(x) => setAddress(x.address)}
                     TokenAmountPanelProps={{
                         classes: {
                             root: classes.panel,
@@ -122,8 +119,8 @@ export function ListingByHighestBidCard(props: ListingByHighestBidCardProps) {
                     amount={reservePrice}
                     balance={balance.value ?? '0'}
                     onAmountChange={setReservePrice}
-                    token={token.value as FungibleTokenDetailed}
-                    onTokenChange={setToken}
+                    token={token.value}
+                    onTokenChange={(x) => setAddress(x.address)}
                     TokenAmountPanelProps={{
                         classes: {
                             root: classes.panel,
@@ -147,7 +144,7 @@ export function ListingByHighestBidCard(props: ListingByHighestBidCardProps) {
                 />
             </CardContent>
             <CardActions className={classes.footer}>
-                <EthereumWalletConnectedBoundary>
+                <WalletConnectedBoundary>
                     <ActionButtonPromise
                         className={classes.button}
                         variant="contained"
@@ -162,7 +159,7 @@ export function ListingByHighestBidCard(props: ListingByHighestBidCardProps) {
                         completeOnClick={onClose}
                         failedOnClick="use executor"
                     />
-                </EthereumWalletConnectedBoundary>
+                </WalletConnectedBoundary>
             </CardActions>
         </Card>
     )
diff --git a/packages/mask/src/plugins/Collectible/SNSAdaptor/ListingByPriceCard.tsx b/packages/mask/src/plugins/Collectible/SNSAdaptor/OpenSea/ListingByPriceCard.tsx
similarity index 84%
rename from packages/mask/src/plugins/Collectible/SNSAdaptor/ListingByPriceCard.tsx
rename to packages/mask/src/plugins/Collectible/SNSAdaptor/OpenSea/ListingByPriceCard.tsx
index 5298a3be0235..965d9ac1debb 100644
--- a/packages/mask/src/plugins/Collectible/SNSAdaptor/ListingByPriceCard.tsx
+++ b/packages/mask/src/plugins/Collectible/SNSAdaptor/OpenSea/ListingByPriceCard.tsx
@@ -2,25 +2,20 @@ import { ChangeEvent, useCallback, useEffect, useMemo, useState } from 'react'
 import { EthereumAddress } from 'wallet.ts'
 import { Box, Card, CardActions, CardContent, Checkbox, FormControlLabel, TextField, Typography } from '@mui/material'
 import { makeStyles } from '@masknet/theme'
-import {
-    EthereumTokenType,
-    FungibleTokenDetailed,
-    FungibleTokenWatched,
-    isNativeTokenAddress,
-    useAccount,
-} from '@masknet/web3-shared-evm'
-import { isZero, isGreaterThan } from '@masknet/web3-shared-base'
+import { ChainId, isNativeTokenAddress, SchemaType } from '@masknet/web3-shared-evm'
+import { isZero, isGreaterThan, NetworkPluginID, FungibleToken, NonFungibleAsset } from '@masknet/web3-shared-base'
 import formatDateTime from 'date-fns/format'
-import { useI18N } from '../../../utils'
-import { ActionButtonPromise } from '../../../extension/options-page/DashboardComponents/ActionButton'
-import { SelectTokenAmountPanel } from '../../ITO/SNSAdaptor/SelectTokenAmountPanel'
-import { EthereumWalletConnectedBoundary } from '../../../web3/UI/EthereumWalletConnectedBoundary'
-import { DateTimePanel } from '../../../web3/UI/DateTimePanel'
-import { PluginCollectibleRPC } from '../messages'
-import { toAsset } from '../helpers'
+import { useI18N } from '../../../../utils'
+import { ActionButtonPromise } from '../../../../extension/options-page/DashboardComponents/ActionButton'
+import { SelectTokenAmountPanel } from '../../../ITO/SNSAdaptor/SelectTokenAmountPanel'
+import { WalletConnectedBoundary } from '../../../../web3/UI/WalletConnectedBoundary'
+import { DateTimePanel } from '../../../../web3/UI/DateTimePanel'
+import { toAsset } from '../../helpers'
 import getUnixTime from 'date-fns/getUnixTime'
-import type { useAsset } from '../../EVM/hooks'
-import { isWyvernSchemaName } from '../utils'
+import { first } from 'lodash-unified'
+import { isWyvernSchemaName } from '../../utils'
+import { useAccount, useChainId, useFungibleTokenWatched } from '@masknet/plugin-infra/web3'
+import { useOpenSea } from '../../hooks/useOpenSea'
 
 const useStyles = makeStyles()((theme) => {
     return {
@@ -51,18 +46,22 @@ const useStyles = makeStyles()((theme) => {
 export interface ListingByPriceCardProps {
     open: boolean
     onClose: () => void
-    asset?: ReturnType<typeof useAsset>
-    tokenWatched: FungibleTokenWatched
-    paymentTokens: FungibleTokenDetailed[]
+    asset?: NonFungibleAsset<ChainId, SchemaType>
+    paymentTokens: Array<FungibleToken<ChainId, SchemaType>>
 }
 
 export function ListingByPriceCard(props: ListingByPriceCardProps) {
-    const { asset, tokenWatched, paymentTokens, open, onClose } = props
-    const { amount, token, balance, setAmount, setToken } = tokenWatched
+    const { asset, paymentTokens, open, onClose } = props
+    const { amount, token, balance, setAmount, setAddress } = useFungibleTokenWatched(
+        NetworkPluginID.PLUGIN_EVM,
+        first(paymentTokens)?.address,
+    )
     const { t } = useI18N()
     const { classes } = useStyles()
 
-    const account = useAccount()
+    const account = useAccount(NetworkPluginID.PLUGIN_EVM)
+    const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
+    const opensea = useOpenSea(chainId)
 
     const [scheduleTime, setScheduleTime] = useState(new Date())
     const [expirationTime, setExpirationTime] = useState(new Date())
@@ -96,16 +95,14 @@ export function ListingByPriceCard(props: ListingByPriceCardProps) {
     ])
 
     const onPostListing = useCallback(async () => {
-        if (!asset?.value) return
-        if (!asset.value.token_id || !asset.value.token_address) return
-        if (!token?.value) return
-        if (token.value.type !== EthereumTokenType.Native && token.value.type !== EthereumTokenType.ERC20) return
-        const schemaName = asset.value.asset_contract?.schemaName
-        await PluginCollectibleRPC.createSellOrder({
+        if (!opensea) return
+        if (!asset?.id || !asset.address) return
+        if (token.value?.schema !== SchemaType.Native && token.value?.schema !== SchemaType.ERC20) return
+        await opensea.createSellOrder({
             asset: toAsset({
-                tokenId: asset.value.token_id,
-                tokenAddress: asset.value.token_address,
-                schemaName: isWyvernSchemaName(schemaName) ? schemaName : undefined,
+                tokenId: asset.tokenId,
+                tokenAddress: asset.address,
+                schemaName: isWyvernSchemaName(asset.schema) ? asset.schema : undefined,
             }),
             accountAddress: account,
             startAmount: Number.parseFloat(amount),
@@ -115,7 +112,7 @@ export function ListingByPriceCard(props: ListingByPriceCardProps) {
             buyerAddress: privacyChecked ? buyerAddress : undefined,
         })
     }, [
-        asset?.value,
+        asset,
         token,
         amount,
         account,
@@ -126,6 +123,7 @@ export function ListingByPriceCard(props: ListingByPriceCardProps) {
         endingPriceChecked,
         futureTimeChecked,
         privacyChecked,
+        opensea,
     ])
 
     useEffect(() => {
@@ -142,10 +140,10 @@ export function ListingByPriceCard(props: ListingByPriceCardProps) {
                 <SelectTokenAmountPanel
                     amount={amount}
                     balance={balance.value ?? '0'}
-                    token={token.value as FungibleTokenDetailed}
+                    token={token.value}
                     disableNativeToken={!paymentTokens.some(isNativeTokenAddress)}
                     onAmountChange={setAmount}
-                    onTokenChange={setToken}
+                    onTokenChange={(x) => setAddress(x.address)}
                     TokenAmountPanelProps={{
                         label: endingPriceChecked
                             ? t('plugin_collectible_starting_price')
@@ -170,8 +168,8 @@ export function ListingByPriceCard(props: ListingByPriceCardProps) {
                         amount={endingAmount}
                         balance={balance.value ?? '0'}
                         onAmountChange={setEndingAmount}
-                        token={token.value as FungibleTokenDetailed}
-                        onTokenChange={setToken}
+                        token={token.value}
+                        onTokenChange={(x) => setAddress(x.address)}
                         TokenAmountPanelProps={{
                             label: t('plugin_collectible_ending_price'),
                             disableToken: true,
@@ -281,7 +279,7 @@ export function ListingByPriceCard(props: ListingByPriceCardProps) {
                 </Box>
             </CardContent>
             <CardActions className={classes.footer}>
-                <EthereumWalletConnectedBoundary>
+                <WalletConnectedBoundary>
                     <ActionButtonPromise
                         className={classes.button}
                         variant="contained"
@@ -296,7 +294,7 @@ export function ListingByPriceCard(props: ListingByPriceCardProps) {
                         completeOnClick={onClose}
                         failedOnClick="use executor"
                     />
-                </EthereumWalletConnectedBoundary>
+                </WalletConnectedBoundary>
             </CardActions>
         </Card>
     )
diff --git a/packages/mask/src/plugins/Collectible/SNSAdaptor/MakeOfferDialog.tsx b/packages/mask/src/plugins/Collectible/SNSAdaptor/OpenSea/MakeOfferDialog.tsx
similarity index 76%
rename from packages/mask/src/plugins/Collectible/SNSAdaptor/MakeOfferDialog.tsx
rename to packages/mask/src/plugins/Collectible/SNSAdaptor/OpenSea/MakeOfferDialog.tsx
index 6dd545540db2..0e01f77cddd6 100644
--- a/packages/mask/src/plugins/Collectible/SNSAdaptor/MakeOfferDialog.tsx
+++ b/packages/mask/src/plugins/Collectible/SNSAdaptor/OpenSea/MakeOfferDialog.tsx
@@ -1,4 +1,5 @@
 import { ChangeEvent, useState, useCallback, useMemo, useEffect } from 'react'
+import { Trans } from 'react-i18next'
 import {
     DialogContent,
     Box,
@@ -13,32 +14,25 @@ import {
 import { makeStyles } from '@masknet/theme'
 import { first, uniqBy } from 'lodash-unified'
 import BigNumber from 'bignumber.js'
-import {
-    FungibleTokenDetailed,
-    EthereumTokenType,
-    useAccount,
-    useFungibleTokenWatched,
-    useChainId,
-} from '@masknet/web3-shared-evm'
 import formatDateTime from 'date-fns/format'
-import { useI18N } from '../../../utils'
+import { useI18N } from '../../../../utils'
 import { InjectedDialog } from '@masknet/shared'
 import { useRemoteControlledDialog } from '@masknet/shared-base-ui'
-import { UnreviewedWarning } from './UnreviewedWarning'
-import ActionButton, { ActionButtonPromise } from '../../../extension/options-page/DashboardComponents/ActionButton'
-import { DateTimePanel } from '../../../web3/UI/DateTimePanel'
-import { PluginCollectibleRPC } from '../messages'
-import { toAsset } from '../helpers'
-import { PluginTraderMessages } from '../../Trader/messages'
-import { Trans } from 'react-i18next'
+import { UnreviewedWarning } from '.././UnreviewedWarning'
+import ActionButton, { ActionButtonPromise } from '../../../../extension/options-page/DashboardComponents/ActionButton'
+import { DateTimePanel } from '../../../../web3/UI/DateTimePanel'
+import { toAsset } from '../../helpers'
+import { PluginTraderMessages } from '../../../Trader/messages'
 import getUnixTime from 'date-fns/getUnixTime'
-import type { useAsset } from '../../EVM/hooks'
-import { rightShift, ZERO } from '@masknet/web3-shared-base'
-import type { Coin } from '../../Trader/types'
-import { SelectTokenListPanel } from './SelectTokenListPanel'
-import { isWyvernSchemaName } from '../utils'
-import { EthereumChainBoundary } from '../../../web3/UI/EthereumChainBoundary'
-import { activatedSocialNetworkUI } from '../../../social-network'
+import { CurrencyType, NetworkPluginID, NonFungibleAsset, rightShift, ZERO } from '@masknet/web3-shared-base'
+import type { Coin } from '../../../Trader/types'
+import { SelectTokenListPanel } from '.././SelectTokenListPanel'
+import { isWyvernSchemaName } from '../../utils'
+import { ChainBoundary } from '../../../../web3/UI/ChainBoundary'
+import { useAccount, useChainId, useFungibleTokenWatched } from '@masknet/plugin-infra/web3'
+import { ChainId, SchemaType } from '@masknet/web3-shared-evm'
+import type { Order } from 'opensea-js/lib/types'
+import { useOpenSea } from '../../hooks/useOpenSea'
 
 const useStyles = makeStyles()((theme) => {
     return {
@@ -70,21 +64,22 @@ const useStyles = makeStyles()((theme) => {
 })
 
 export interface MakeOfferDialogProps {
-    asset?: ReturnType<typeof useAsset>
     open: boolean
+    asset?: NonFungibleAsset<ChainId, SchemaType>
+    order?: Order
     onClose: () => void
 }
 
 export function MakeOfferDialog(props: MakeOfferDialogProps) {
     const { asset, open, onClose } = props
 
-    const isAuction = asset?.value?.is_auction ?? false
-    const isVerified = asset?.value?.is_verified ?? false
-    const leastPrice =
-        asset?.value && asset.value.desktopOrder ? new BigNumber(asset.value.desktopOrder.current_price ?? '0') : ZERO
+    const isAuction = !!asset?.auction
+    const isVerified = asset?.collection?.verified ?? false
+    const desktopOrder = first(asset?.orders)
+    const leastPrice = desktopOrder ? new BigNumber(desktopOrder.price?.[CurrencyType.USD] ?? '0') : ZERO
 
     const paymentTokens = uniqBy(
-        [...(asset?.value?.offer_payment_tokens ?? []), ...(asset?.value?.order_payment_tokens ?? [])],
+        [...(asset?.auction?.offerTokens ?? []), ...(asset?.auction?.orderTokens ?? [])],
         (x) => x.address,
     )
 
@@ -93,34 +88,37 @@ export function MakeOfferDialog(props: MakeOfferDialogProps) {
     const { t } = useI18N()
     const { classes } = useStyles()
 
-    const account = useAccount()
-    const chainId = useChainId()
+    const account = useAccount(NetworkPluginID.PLUGIN_EVM)
+    const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
+    const opensea = useOpenSea(chainId)
     const [expirationDateTime, setExpirationDateTime] = useState(new Date())
     const [unreviewedChecked, setUnreviewedChecked] = useState(false)
     const [ToS_Checked, setToS_Checked] = useState(false)
     const [insufficientBalance, setInsufficientBalance] = useState(false)
 
-    const { amount, token, balance, setAmount, setToken } = useFungibleTokenWatched(selectedPaymentToken)
+    const { amount, token, balance, setAmount, setAddress } = useFungibleTokenWatched(
+        NetworkPluginID.PLUGIN_EVM,
+        selectedPaymentToken?.address,
+    )
 
     const onMakeOffer = useCallback(async () => {
-        if (!asset?.value) return
-        if (!asset.value.token_id || !asset.value.token_address) return
+        if (!asset) return
+        if (!asset.tokenId || !asset.address) return
         if (!token?.value) return
-        if (token.value.type !== EthereumTokenType.Native && token.value.type !== EthereumTokenType.ERC20) return
-        const schemaName = asset.value.asset_contract?.schemaName
-        await PluginCollectibleRPC.createBuyOrder({
+        if (token.value.schema !== SchemaType.Native && token.value.schema !== SchemaType.ERC20) return
+        const schemaName = asset.contract?.schema
+        await opensea?.createBuyOrder({
             asset: toAsset({
-                tokenId: asset.value.token_id,
-                tokenAddress: asset.value.token_address,
+                tokenId: asset.tokenId,
+                tokenAddress: asset.address,
                 schemaName: isWyvernSchemaName(schemaName) ? schemaName : undefined,
             }),
             accountAddress: account,
             startAmount: Number.parseFloat(amount),
             expirationTime: !isAuction ? getUnixTime(expirationDateTime) : undefined,
-            paymentTokenAddress: token.value.type === EthereumTokenType.Native ? undefined : token.value.address,
+            paymentTokenAddress: token.value.schema === SchemaType.Native ? undefined : token.value.address,
         })
-        activatedSocialNetworkUI.utils.share?.(t('promote_collectible'))
-    }, [asset?.value, token, account, amount, expirationDateTime, isAuction, t])
+    }, [asset, token, account, amount, expirationDateTime, isAuction, opensea])
 
     const { setDialog: openSwapDialog } = useRemoteControlledDialog(PluginTraderMessages.swapDialogUpdated)
 
@@ -164,7 +162,8 @@ export function MakeOfferDialog(props: MakeOfferDialogProps) {
         return ''
     }, [amount, balance.value, expirationDateTime, isVerified, isAuction, unreviewedChecked, ToS_Checked])
 
-    if (!asset?.value) return null
+    if (!asset) return null
+
     return (
         <InjectedDialog
             title={isAuction ? t('plugin_collectible_place_a_bid') : t('plugin_collectible_make_an_offer')}
@@ -181,9 +180,9 @@ export function MakeOfferDialog(props: MakeOfferDialogProps) {
                         <SelectTokenListPanel
                             amount={amount}
                             balance={balance.value ?? '0'}
-                            token={token.value as FungibleTokenDetailed}
+                            token={token.value}
                             onAmountChange={setAmount}
-                            onTokenChange={setToken}
+                            onTokenChange={(x) => setAddress(x.address)}
                             tokens={paymentTokens}
                         />
 
@@ -238,14 +237,14 @@ export function MakeOfferDialog(props: MakeOfferDialogProps) {
                                 }
                                 label={
                                     <Typography variant="body2">
-                                        {t('plugin_collectible_approved_by_open_sea')}
+                                        {t('plugin_collectible_approved_by_opensea')}
                                     </Typography>
                                 }
                             />
                         )}
                     </CardContent>
                     <CardActions className={classes.footer}>
-                        <EthereumChainBoundary chainId={chainId}>
+                        <ChainBoundary expectedPluginID={NetworkPluginID.PLUGIN_EVM} expectedChainId={chainId}>
                             <Box className={classes.buttons} display="flex" alignItems="center" justifyContent="center">
                                 <ActionButtonPromise
                                     className={classes.button}
@@ -265,20 +264,17 @@ export function MakeOfferDialog(props: MakeOfferDialogProps) {
                                     completeOnClick={onClose}
                                     failedOnClick="use executor"
                                 />
-                                {(isAuction ? asset.value?.isCollectionWeth : asset.value?.isOrderWeth) ||
-                                insufficientBalance ? (
+                                {insufficientBalance ? (
                                     <ActionButton
                                         className={classes.button}
                                         variant="contained"
                                         size="large"
                                         onClick={onConvertClick}>
-                                        {insufficientBalance
-                                            ? t('plugin_collectible_get_more_token', { token: token.value?.symbol })
-                                            : t('plugin_collectible_convert_eth')}
+                                        {t('plugin_collectible_get_more_token', { token: token.value?.symbol })}
                                     </ActionButton>
                                 ) : null}
                             </Box>
-                        </EthereumChainBoundary>
+                        </ChainBoundary>
                     </CardActions>
                 </Card>
             </DialogContent>
diff --git a/packages/mask/src/plugins/Collectible/SNSAdaptor/PostListingDialog.tsx b/packages/mask/src/plugins/Collectible/SNSAdaptor/OpenSea/PostListingDialog.tsx
similarity index 74%
rename from packages/mask/src/plugins/Collectible/SNSAdaptor/PostListingDialog.tsx
rename to packages/mask/src/plugins/Collectible/SNSAdaptor/OpenSea/PostListingDialog.tsx
index d49080160c56..290666f31d48 100644
--- a/packages/mask/src/plugins/Collectible/SNSAdaptor/PostListingDialog.tsx
+++ b/packages/mask/src/plugins/Collectible/SNSAdaptor/OpenSea/PostListingDialog.tsx
@@ -1,13 +1,12 @@
 import { useState } from 'react'
 import { DialogContent, Tab, Tabs } from '@mui/material'
 import { makeStyles } from '@masknet/theme'
-import { useI18N } from '../../../utils'
 import { InjectedDialog } from '@masknet/shared'
+import type { ChainId, SchemaType } from '@masknet/web3-shared-evm'
+import type { NonFungibleAsset } from '@masknet/web3-shared-base'
+import { useI18N } from '../../../../utils'
 import { ListingByPriceCard } from './ListingByPriceCard'
 import { ListingByHighestBidCard } from './ListingByHighestBidCard'
-import { useFungibleTokenWatched } from '@masknet/web3-shared-evm'
-import { first } from 'lodash-unified'
-import type { useAsset } from '../../EVM/hooks/useAsset'
 
 const useStyles = makeStyles()((theme) => {
     return {
@@ -27,19 +26,17 @@ const useStyles = makeStyles()((theme) => {
 })
 
 export interface PostListingDialogProps {
-    asset?: ReturnType<typeof useAsset>
+    asset?: NonFungibleAsset<ChainId, SchemaType>
     open: boolean
     onClose: () => void
 }
 
 export function PostListingDialog(props: PostListingDialogProps) {
     const { asset, open, onClose } = props
-    const paymentTokens = asset?.value?.offer_payment_tokens ?? []
-    const selectedPaymentToken = first(paymentTokens)
+    const paymentTokens = asset?.auction?.offerTokens ?? []
 
     const { t } = useI18N()
     const { classes } = useStyles()
-    const tokenWatched = useFungibleTokenWatched(selectedPaymentToken)
 
     const [tabIndex, setTabIndex] = useState(0)
     const tabs = [
@@ -64,18 +61,11 @@ export function PostListingDialog(props: PostListingDialogProps) {
                     {tabs}
                 </Tabs>
                 {tabIndex === 0 ? (
-                    <ListingByPriceCard
-                        asset={asset}
-                        tokenWatched={tokenWatched}
-                        paymentTokens={paymentTokens}
-                        open={open}
-                        onClose={onClose}
-                    />
+                    <ListingByPriceCard asset={asset} paymentTokens={paymentTokens} open={open} onClose={onClose} />
                 ) : null}
                 {tabIndex === 1 ? (
                     <ListingByHighestBidCard
                         asset={asset}
-                        tokenWatched={tokenWatched}
                         paymentTokens={paymentTokens}
                         open={open}
                         onClose={onClose}
diff --git a/packages/mask/src/plugins/Collectible/SNSAdaptor/OrderRow.tsx b/packages/mask/src/plugins/Collectible/SNSAdaptor/OrderRow.tsx
index b7e6d9c1f330..bf75e3ec836e 100644
--- a/packages/mask/src/plugins/Collectible/SNSAdaptor/OrderRow.tsx
+++ b/packages/mask/src/plugins/Collectible/SNSAdaptor/OrderRow.tsx
@@ -1,20 +1,19 @@
-import { useMemo } from 'react'
 import { Avatar, Link, TableCell, TableRow, Typography } from '@mui/material'
 import { makeStyles } from '@masknet/theme'
-
+import { ChainId, explorerResolver, SchemaType } from '@masknet/web3-shared-evm'
 import {
-    ChainId,
+    isOne,
+    isZero,
     formatBalance,
-    NonFungibleAssetProvider,
-    resolveAddressLinkOnExplorer,
-} from '@masknet/web3-shared-evm'
-import { isOne, isZero } from '@masknet/web3-shared-base'
+    NonFungibleTokenOrder,
+    SourceType,
+    CurrencyType,
+} from '@masknet/web3-shared-base'
 import { CollectibleState } from '../hooks/useCollectibleState'
 import { Account } from './Account'
 import { FormattedBalance } from '@masknet/shared'
-import { getOrderUnitPrice, NonFungibleTokenAPI } from '@masknet/web3-providers'
+import { getOrderUnitPrice } from '@masknet/web3-providers'
 import formatDistanceToNow from 'date-fns/formatDistanceToNow'
-import urlcat from 'urlcat'
 
 const useStyles = makeStyles()((theme) => {
     return {
@@ -55,7 +54,7 @@ const useStyles = makeStyles()((theme) => {
 })
 
 interface IRowProps {
-    order: NonFungibleTokenAPI.AssetOrder
+    order: NonFungibleTokenOrder<ChainId, SchemaType>
     isDifferenceToken?: boolean
     acceptable?: boolean
 }
@@ -63,24 +62,20 @@ interface IRowProps {
 export function OrderRow({ order, isDifferenceToken }: IRowProps) {
     const { classes } = useStyles()
     const { provider } = CollectibleState.useContainer()
-    const address = order.maker_account?.user?.username || order.maker_account?.address || ''
-
-    const link = useMemo(() => {
-        return provider === NonFungibleAssetProvider.OPENSEA
-            ? urlcat('https://opensea.io/accounts/:address', { address })
-            : order.maker_account?.link
-    }, [order, provider, address])
+    const address = order.maker?.nickname || order.maker?.address || ''
 
     return (
         <TableRow>
             <TableCell>
-                <Link href={link} title={address} target="_blank" className={classes.account} rel="noopener noreferrer">
-                    <Avatar src={order.maker_account?.profile_img_url} className={classes.avatar} />
+                <Link
+                    href={order.maker?.link}
+                    title={address}
+                    target="_blank"
+                    className={classes.account}
+                    rel="noopener noreferrer">
+                    <Avatar src={order.maker?.avatarURL} className={classes.avatar} />
                     <Typography className={classes.accountName}>
-                        <Account
-                            address={order.maker_account?.address}
-                            username={order.maker_account?.user?.username}
-                        />
+                        <Account address={order.maker?.address} username={order.maker?.nickname} />
                     </Typography>
                 </Link>
             </TableCell>
@@ -89,27 +84,30 @@ export function OrderRow({ order, isDifferenceToken }: IRowProps) {
                     <TableCell>
                         <Typography className={classes.content}>
                             <>
-                                {provider === NonFungibleAssetProvider.OPENSEA ? (
+                                {provider === SourceType.OpenSea ? (
                                     <Link
-                                        href={resolveAddressLinkOnExplorer(ChainId.Mainnet, order.payment_token!)}
+                                        href={explorerResolver.addressLink(
+                                            ChainId.Mainnet,
+                                            order.paymentToken?.address ?? '',
+                                        )}
                                         target="_blank"
                                         rel="noopener noreferrer"
                                         className={classes.tokenLink}>
-                                        {order.payment_token_contract?.image_url && (
+                                        {order.paymentToken?.logoURL && (
                                             <img
-                                                src={order.payment_token_contract.image_url}
+                                                src={order.paymentToken.logoURL}
                                                 className={classes.token}
-                                                alt={order.payment_token_contract?.symbol}
+                                                alt={order.paymentToken?.symbol}
                                             />
                                         )}
                                     </Link>
                                 ) : null}
                                 {getOrderUnitPrice(
-                                    order.current_price,
-                                    order.payment_token_contract?.decimals,
+                                    order.price?.[CurrencyType.USD],
+                                    order.paymentToken?.decimals,
                                     order.quantity,
-                                )?.toFixed()}{' '}
-                                {order.payment_token_contract?.symbol}
+                                )}{' '}
+                                {order.paymentToken?.symbol}
                             </>
                         </Typography>
                     </TableCell>
@@ -127,37 +125,38 @@ export function OrderRow({ order, isDifferenceToken }: IRowProps) {
                 <>
                     <TableCell>
                         <Typography style={{ display: 'flex' }} className={classes.content}>
-                            {provider === NonFungibleAssetProvider.OPENSEA ? (
+                            {provider === SourceType.OpenSea ? (
                                 <Link
-                                    href={resolveAddressLinkOnExplorer(ChainId.Mainnet, order.payment_token!)}
+                                    href={explorerResolver.addressLink(
+                                        ChainId.Mainnet,
+                                        order.paymentToken?.address ?? '',
+                                    )}
                                     target="_blank"
                                     rel="noopener noreferrer"
                                     className={classes.tokenLink}>
-                                    {order.payment_token_contract?.image_url ? (
+                                    {order.paymentToken?.logoURL ? (
                                         <img
-                                            src={order.payment_token_contract.image_url}
+                                            src={order.paymentToken.logoURL}
                                             className={classes.token}
-                                            alt={order.payment_token_contract?.symbol}
+                                            alt={order.paymentToken?.symbol}
                                         />
                                     ) : null}
                                 </Link>
                             ) : null}
                             {getOrderUnitPrice(
-                                order.current_price,
-                                order.payment_token_contract?.decimals,
+                                order.price?.[CurrencyType.USD],
+                                order.paymentToken?.decimals,
                                 order.quantity,
                             )?.toString()}{' '}
-                            {provider === NonFungibleAssetProvider.OPENSEA
-                                ? order.payment_token_contract?.symbol ?? ''
-                                : 'ETH'}
+                            {provider === SourceType.OpenSea ? order.paymentToken?.symbol ?? '' : 'ETH'}
                         </Typography>
                     </TableCell>
-                    {provider === NonFungibleAssetProvider.OPENSEA ? (
+                    {provider === SourceType.OpenSea ? (
                         <TableCell>
                             <Typography className={classes.content}>
-                                {order.expiration_time &&
-                                    !isZero(order.expiration_time) &&
-                                    formatDistanceToNow(new Date(order.expiration_time * 1000), {
+                                {order.expiredAt &&
+                                    !isZero(order.expiredAt) &&
+                                    formatDistanceToNow(new Date(order.expiredAt * 1000), {
                                         addSuffix: true,
                                     })}
                             </Typography>
diff --git a/packages/mask/src/plugins/Collectible/SNSAdaptor/Pagination.tsx b/packages/mask/src/plugins/Collectible/SNSAdaptor/Pagination.tsx
deleted file mode 100644
index 0a3a7055f26b..000000000000
--- a/packages/mask/src/plugins/Collectible/SNSAdaptor/Pagination.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import { memo } from 'react'
-import { TableFooter, TablePagination, TableRow } from '@mui/material'
-import { makeStyles } from '@masknet/theme'
-
-const useStyles = makeStyles()({
-    spacer: {
-        flex: 0,
-    },
-    toolbar: {
-        minHeight: 'unset',
-        paddingLeft: 16,
-    },
-    actions: {
-        marginLeft: 0,
-    },
-})
-
-export interface TableListPaginationProps {
-    handlePrevClick: () => void
-    handleNextClick: () => void
-    prevDisabled: boolean
-    nextDisabled: boolean
-    page: number
-    pageCount: number
-}
-
-export const TableListPagination = memo(
-    ({ handlePrevClick, handleNextClick, prevDisabled, nextDisabled, page, pageCount }: TableListPaginationProps) => {
-        const { classes } = useStyles()
-        return (
-            <TableFooter>
-                <TableRow>
-                    <TablePagination
-                        rowsPerPage={pageCount}
-                        rowsPerPageOptions={[pageCount]}
-                        count={-1}
-                        page={page}
-                        classes={classes}
-                        onPageChange={() => {}}
-                        labelDisplayedRows={() => null}
-                        backIconButtonProps={{
-                            onClick: handlePrevClick,
-                            size: 'small',
-                            disabled: prevDisabled,
-                        }}
-                        nextIconButtonProps={{
-                            onClick: handleNextClick,
-                            size: 'small',
-                            disabled: nextDisabled,
-                        }}
-                    />
-                </TableRow>
-            </TableFooter>
-        )
-    },
-)
diff --git a/packages/mask/src/plugins/Collectible/SNSAdaptor/SelectTokenListPanel.tsx b/packages/mask/src/plugins/Collectible/SNSAdaptor/SelectTokenListPanel.tsx
index fcce62a5a556..7b01c67ec91a 100644
--- a/packages/mask/src/plugins/Collectible/SNSAdaptor/SelectTokenListPanel.tsx
+++ b/packages/mask/src/plugins/Collectible/SNSAdaptor/SelectTokenListPanel.tsx
@@ -1,4 +1,3 @@
-import { formatBalance, FungibleTokenDetailed, isSameAddress } from '@masknet/web3-shared-evm'
 import { FormControl, InputAdornment, ListItemIcon, MenuItem, OutlinedInput, Typography } from '@mui/material'
 import { useI18N, useMenu } from '../../../utils'
 import { useEffect, useState, useCallback, useRef, useMemo, ChangeEvent } from 'react'
@@ -6,15 +5,8 @@ import { FormattedBalance, TokenIcon } from '@masknet/shared'
 import { makeStyles } from '@masknet/theme'
 import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown'
 import Check from '@mui/icons-material/Check'
-
-export interface SelectTokenPanelProps {
-    amount: string
-    balance: string
-    token?: FungibleTokenDetailed
-    onAmountChange: (amount: string) => void
-    onTokenChange: (token: FungibleTokenDetailed) => void
-    tokens?: FungibleTokenDetailed[]
-}
+import type { ChainId, SchemaType } from '@masknet/web3-shared-evm'
+import { FungibleToken, isSameAddress, formatBalance } from '@masknet/web3-shared-base'
 
 const MIN_AMOUNT_LENGTH = 1
 const MAX_AMOUNT_LENGTH = 79
@@ -33,7 +25,6 @@ const useStyles = makeStyles()((theme) => ({
         height: 24,
     },
     input: {},
-
     check: {
         flex: 1,
         display: 'flex',
@@ -41,19 +32,27 @@ const useStyles = makeStyles()((theme) => ({
         color: theme.palette.text.primary,
     },
 }))
+
+export interface SelectTokenPanelProps {
+    amount: string
+    balance: string
+    token?: FungibleToken<ChainId, SchemaType>
+    onAmountChange: (amount: string) => void
+    onTokenChange: (token: FungibleToken<ChainId, SchemaType>) => void
+    tokens?: Array<FungibleToken<ChainId, SchemaType>>
+}
+
 export function SelectTokenListPanel(props: SelectTokenPanelProps) {
-    const { t } = useI18N()
     const { amount, balance, token, onAmountChange, onTokenChange, tokens = [] } = props
-    const ref = useRef<HTMLElement>(null)
 
+    const { t } = useI18N()
+    const ref = useRef<HTMLElement>(null)
     const { classes } = useStyles()
-
     const [haveMenu, setHaveMenu] = useState(true)
 
     const width = useMemo(() => {
         if (!ref.current) return
-        const style = window.getComputedStyle(ref.current)
-        return style.width
+        return window.getComputedStyle(ref.current).width
     }, [ref.current])
 
     useEffect(() => {
@@ -73,7 +72,7 @@ export function SelectTokenListPanel(props: SelectTokenPanelProps) {
                             classes={{ icon: classes.icon }}
                             address={x.address}
                             name={x.name}
-                            logoURI={x.logoURI}
+                            logoURI={x.logoURL}
                         />
                     </ListItemIcon>
                     <Typography variant="inherit">{x.symbol}</Typography>
@@ -129,14 +128,14 @@ export function SelectTokenListPanel(props: SelectTokenPanelProps) {
                     {t('plugin_collectible_price')}
                 </Typography>
                 <Typography variant="body1" color="colorPrimary">
-                    {t('wallet_balance')}:
+                    <span style={{ marginRight: 4 }}>{t('wallet_balance')}:</span>
                     <FormattedBalance
                         value={balance}
                         decimals={token?.decimals}
                         significant={6}
                         formatter={formatBalance}
                     />
-                    {token?.symbol}
+                    <span style={{ marginLeft: 4 }}>{token?.symbol}</span>
                 </Typography>
             </div>
             <FormControl className={classes.input} variant="outlined" fullWidth>
@@ -168,7 +167,7 @@ export function SelectTokenListPanel(props: SelectTokenPanelProps) {
                                         classes={{ icon: classes.icon }}
                                         address={token?.address}
                                         name={token?.name}
-                                        logoURI={token?.logoURI}
+                                        logoURI={token?.logoURL}
                                     />
                                     <Typography
                                         variant="inherit"
diff --git a/packages/mask/src/plugins/Collectible/SNSAdaptor/TokenTab.tsx b/packages/mask/src/plugins/Collectible/SNSAdaptor/TokenTab.tsx
index 25215939a860..18762d2ba263 100644
--- a/packages/mask/src/plugins/Collectible/SNSAdaptor/TokenTab.tsx
+++ b/packages/mask/src/plugins/Collectible/SNSAdaptor/TokenTab.tsx
@@ -4,16 +4,12 @@ import { useI18N } from '../../../utils'
 import { CollectibleTab } from './CollectibleTab'
 import { CollectibleState } from '../hooks/useCollectibleState'
 import { FormattedAddress } from '@masknet/shared'
-import {
-    resolveAddressLinkOnExplorer,
-    getChainName,
-    ChainId,
-    useChainId,
-    formatEthereumAddress,
-} from '@masknet/web3-shared-evm'
+import { ChainId, chainResolver, explorerResolver, formatEthereumAddress } from '@masknet/web3-shared-evm'
 import { Markdown } from '../../Snapshot/SNSAdaptor/Markdown'
 import { Account } from './Account'
 import { resolveTraitLinkOnOpenSea, resolveUserUrlOnCurrentProvider } from '../pipes'
+import { useChainId } from '@masknet/plugin-infra/web3'
+import { NetworkPluginID } from '@masknet/web3-shared-base'
 
 const useStyles = makeStyles()((theme) => {
     return {
@@ -66,10 +62,11 @@ export interface TokenTabProps {}
 export function TokenTab(props: TokenTabProps) {
     const { t } = useI18N()
     const { classes } = useStyles()
-    const chainId = useChainId()
+    const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
     const { token, asset, provider } = CollectibleState.useContainer()
 
     if (!asset.value) return null
+
     return (
         <CollectibleTab classes={{ content: classes.content }}>
             <Box className={classes.container}>
@@ -82,16 +79,13 @@ export function TokenTab(props: TokenTabProps) {
                         <Link
                             href={resolveUserUrlOnCurrentProvider(
                                 chainId,
-                                asset.value.creator.address,
+                                asset.value.creator?.address ?? '',
                                 provider,
-                                asset.value.creator.user?.username,
+                                asset.value.creator.nickname,
                             )}
                             target="_blank"
                             rel="noopener noreferrer">
-                            <Account
-                                address={asset.value.creator.address}
-                                username={asset.value.creator.user?.username}
-                            />
+                            <Account address={asset.value.creator.address} username={asset.value.creator.nickname} />
                         </Link>
                     </Typography>
                 ) : asset.value.owner ? (
@@ -100,20 +94,17 @@ export function TokenTab(props: TokenTabProps) {
                         <Link
                             href={resolveUserUrlOnCurrentProvider(
                                 chainId,
-                                asset.value.owner?.address,
+                                asset.value.owner?.address ?? '',
                                 provider,
-                                asset.value.owner?.user?.username,
+                                asset.value.owner?.nickname,
                             )}
                             target="_blank"
                             rel="noopener noreferrer">
-                            <Account
-                                address={asset.value.owner?.user?.username}
-                                username={asset.value.owner?.address}
-                            />
+                            <Account address={asset.value.owner?.nickname} username={asset.value.owner?.address} />
                         </Link>
                     </Typography>
                 ) : null}
-                <Markdown classes={{ root: classes.markdown }} content={asset.value?.description ?? ''} />
+                <Markdown classes={{ root: classes.markdown }} content={asset.value?.metadata?.description ?? ''} />
             </Box>
 
             {asset.value.traits?.length ? (
@@ -123,20 +114,20 @@ export function TokenTab(props: TokenTabProps) {
                     </Typography>
 
                     <Box className={classes.trait_content}>
-                        {asset.value.traits.map(({ trait_type, value }, key) => (
+                        {asset.value.traits.map(({ type, value }, key) => (
                             <Link
                                 underline="none"
                                 key={key}
                                 href={
-                                    asset.value?.slug
-                                        ? resolveTraitLinkOnOpenSea(chainId, asset.value.slug, trait_type, value)
+                                    asset.value?.collection?.slug
+                                        ? resolveTraitLinkOnOpenSea(chainId, asset.value.collection?.slug, type, value)
                                         : ''
                                 }
                                 target="_blank"
                                 rel="noopener noreferrer">
                                 <Paper className={classes.trait} variant="outlined">
                                     <Typography variant="body2" color="primary">
-                                        {trait_type}
+                                        {type}
                                     </Typography>
                                     <Typography variant="body2">{value}</Typography>
                                 </Paper>
@@ -146,13 +137,13 @@ export function TokenTab(props: TokenTabProps) {
                 </Box>
             ) : null}
 
-            {asset.value.asset_contract ? (
+            {asset.value.contract ? (
                 <Box className={classes.container}>
                     <Typography variant="body1" sx={{ marginBottom: 1 }}>
-                        {t('plugin_collectible_about')} {asset.value.asset_contract.name}
+                        {t('plugin_collectible_about')} {asset.value.contract.name}
                     </Typography>
                     <Typography className={classes.description} variant="body2">
-                        {asset.value.asset_contract?.description}
+                        {asset.value.metadata?.description}
                     </Typography>
                 </Box>
             ) : null}
@@ -165,7 +156,7 @@ export function TokenTab(props: TokenTabProps) {
                 <Box className={classes.chain_row}>
                     <Typography variant="body2">{t('plugin_collectible_contract_address')}</Typography>
                     <Link
-                        href={resolveAddressLinkOnExplorer(ChainId.Mainnet, token?.contractAddress ?? '')}
+                        href={explorerResolver.addressLink(ChainId.Mainnet, token?.contractAddress ?? '')}
                         target="_blank"
                         rel="noopener noreferrer">
                         <Typography variant="body2">
@@ -185,7 +176,7 @@ export function TokenTab(props: TokenTabProps) {
                 </Box>
                 <Box className={classes.chain_row}>
                     <Typography variant="body2">{t('plugin_collectible_block_chain')}</Typography>
-                    <Typography variant="body2">{getChainName(chainId)}</Typography>
+                    <Typography variant="body2">{chainResolver.chainName(chainId)}</Typography>
                 </Box>
             </Box>
         </CollectibleTab>
diff --git a/packages/mask/src/plugins/Collectible/SNSAdaptor/index.tsx b/packages/mask/src/plugins/Collectible/SNSAdaptor/index.tsx
index 3a423c5b1412..d0c8ff0679f6 100644
--- a/packages/mask/src/plugins/Collectible/SNSAdaptor/index.tsx
+++ b/packages/mask/src/plugins/Collectible/SNSAdaptor/index.tsx
@@ -6,9 +6,9 @@ import { checkUrl, getAssetInfoFromURL, getRelevantUrl } from '../utils'
 import { PLUGIN_ID } from '../constants'
 import { extractTextFromTypedMessage } from '@masknet/typed-message'
 import { NFTPage } from './NFTPage'
-import { AddressName, AddressNameType } from '@masknet/web3-shared-evm'
 import { Trans } from 'react-i18next'
 import { CollectiblesIcon } from '@masknet/icons'
+import { IdentityAddress, IdentityAddressType } from '@masknet/web3-shared-base'
 
 const sns: Plugin.SNSAdaptor.Definition = {
     ...base,
@@ -34,30 +34,30 @@ const sns: Plugin.SNSAdaptor.Definition = {
             label: 'NFTs',
             priority: 1,
             UI: {
-                TabContent: ({ addressNames = [] }) => <NFTPage addressNames={addressNames as AddressName[]} />,
+                TabContent: ({ addressNames = [] }) => <NFTPage addressNames={addressNames as IdentityAddress[]} />,
             },
             Utils: {
                 addressNameSorter: (a, z) => {
-                    if (a.type === AddressNameType.ENS) return -1
-                    if (z.type === AddressNameType.ENS) return 1
+                    if (a.type === IdentityAddressType.ENS) return -1
+                    if (z.type === IdentityAddressType.ENS) return 1
 
-                    if (a.type === AddressNameType.UNS) return -1
-                    if (z.type === AddressNameType.UNS) return 1
+                    if (a.type === IdentityAddressType.UNS) return -1
+                    if (z.type === IdentityAddressType.UNS) return 1
 
-                    if (a.type === AddressNameType.DNS) return -1
-                    if (z.type === AddressNameType.DNS) return 1
+                    if (a.type === IdentityAddressType.DNS) return -1
+                    if (z.type === IdentityAddressType.DNS) return 1
 
-                    if (a.type === AddressNameType.RSS3) return -1
-                    if (z.type === AddressNameType.RSS3) return 1
+                    if (a.type === IdentityAddressType.RSS3) return -1
+                    if (z.type === IdentityAddressType.RSS3) return 1
 
-                    if (a.type === AddressNameType.ADDRESS) return -1
-                    if (z.type === AddressNameType.ADDRESS) return 1
+                    if (a.type === IdentityAddressType.ADDRESS) return -1
+                    if (z.type === IdentityAddressType.ADDRESS) return 1
 
-                    if (a.type === AddressNameType.GUN) return -1
-                    if (z.type === AddressNameType.GUN) return 1
+                    if (a.type === IdentityAddressType.GUN) return -1
+                    if (z.type === IdentityAddressType.GUN) return 1
 
-                    if (a.type === AddressNameType.THE_GRAPH) return -1
-                    if (z.type === AddressNameType.THE_GRAPH) return 1
+                    if (a.type === IdentityAddressType.THE_GRAPH) return -1
+                    if (z.type === IdentityAddressType.THE_GRAPH) return 1
 
                     return 0
                 },
diff --git a/packages/mask/src/plugins/Collectible/SNSAdaptor/shared.tsx b/packages/mask/src/plugins/Collectible/SNSAdaptor/shared.tsx
deleted file mode 100644
index 7500c105cd90..000000000000
--- a/packages/mask/src/plugins/Collectible/SNSAdaptor/shared.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import { Skeleton, Table, TableBody, TableCell, TableFooter, TableHead, TableRow } from '@mui/material'
-
-export const loadingTable = (
-    <Table size="small">
-        <TableHead>
-            <TableRow>
-                <TableCell>
-                    <Skeleton animation="wave" variant="rectangular" width="100%" height={22} />
-                </TableCell>
-            </TableRow>
-        </TableHead>
-        <TableBody>
-            {Array.from({ length: 5 })
-                .fill(0)
-                .map((_, i) => (
-                    <TableRow key={i}>
-                        <TableCell>
-                            <Skeleton animation="wave" variant="rectangular" width="100%" height={14} />
-                        </TableCell>
-                    </TableRow>
-                ))}
-        </TableBody>
-        <TableFooter>
-            <TableRow>
-                <TableCell>
-                    <Skeleton animation="wave" variant="rectangular" width="100%" height={28} />
-                </TableCell>
-            </TableRow>
-        </TableFooter>
-    </Table>
-)
diff --git a/packages/mask/src/plugins/Collectible/apis/index.ts b/packages/mask/src/plugins/Collectible/apis/index.ts
deleted file mode 100644
index da51c15f303e..000000000000
--- a/packages/mask/src/plugins/Collectible/apis/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './openseaFromSDK'
diff --git a/packages/mask/src/plugins/Collectible/apis/openseaFromSDK.ts b/packages/mask/src/plugins/Collectible/apis/openseaFromSDK.ts
deleted file mode 100644
index be0954b9b489..000000000000
--- a/packages/mask/src/plugins/Collectible/apis/openseaFromSDK.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-import { OpenSeaPort } from 'opensea-js'
-import { ChainId, createExternalProvider } from '@masknet/web3-shared-evm'
-import { request } from '../../../extension/background-script/EthereumService'
-import { resolveOpenSeaNetwork } from '../pipes'
-import { OpenSeaAPI_Key, ReferrerAddress } from '../constants'
-
-function createOpenSeaPortChain(chainId: ChainId.Mainnet | ChainId.Rinkeby) {
-    return new OpenSeaPort(
-        createExternalProvider(request),
-        {
-            networkName: resolveOpenSeaNetwork(chainId),
-            apiKey: OpenSeaAPI_Key,
-        },
-        console.log,
-    )
-}
-
-function createOpenSeaPort(chainId?: ChainId) {
-    return createOpenSeaPortChain(chainId === ChainId.Rinkeby ? ChainId.Rinkeby : ChainId.Mainnet)
-}
-
-export async function getAssetFromSDK(tokenAddress: string, tokenId: string) {
-    return createOpenSeaPort().api.getAsset({ tokenAddress, tokenId })
-}
-
-export async function createBuyOrder(payload: Parameters<OpenSeaPort['createBuyOrder']>[0]) {
-    return createOpenSeaPort().createBuyOrder({
-        referrerAddress: ReferrerAddress,
-        ...payload,
-    })
-}
-
-export async function createSellOrder(payload: Parameters<OpenSeaPort['createSellOrder']>[0]) {
-    return createOpenSeaPort().createSellOrder(payload)
-}
-
-export async function fulfillOrder(payload: Parameters<OpenSeaPort['fulfillOrder']>[0]) {
-    return createOpenSeaPort().fulfillOrder({
-        referrerAddress: ReferrerAddress,
-        ...payload,
-    })
-}
diff --git a/packages/mask/src/plugins/Collectible/constants.ts b/packages/mask/src/plugins/Collectible/constants.ts
index 15e3bab7f736..65e2309325f2 100644
--- a/packages/mask/src/plugins/Collectible/constants.ts
+++ b/packages/mask/src/plugins/Collectible/constants.ts
@@ -6,7 +6,8 @@ export const PLUGIN_ID = PluginId.Collectible
 export const PLUGIN_META_KEY = `${PluginId.Collectible}:1`
 
 export const openseaHostnames = ['opensea.io', 'testnets.opensea.io']
-export const openseaPathnameRegexMatcher = /^\/assets\/(?:ethereum\/)?(0x[\dA-Fa-f]{40})\/(\d+)/
+export const openseaPathnameRegexMatcher = /^\/assets\/(0x[\dA-Fa-f]{40})\/(\d+)/
+
 export const raribleHostnames = ['rarible.com', 'app.rarible.com', 'ropsten.rarible.com']
 export const rariblePathnameRegexMatcher = /^\/token\/(0x[\dA-Fa-f]{40}):(\d+)/
 
diff --git a/packages/mask/src/plugins/Collectible/hooks/useAssetOrder.ts b/packages/mask/src/plugins/Collectible/hooks/useAssetOrder.ts
index 068223e11a47..da45882c031d 100644
--- a/packages/mask/src/plugins/Collectible/hooks/useAssetOrder.ts
+++ b/packages/mask/src/plugins/Collectible/hooks/useAssetOrder.ts
@@ -1,41 +1,31 @@
-import { unreachable } from '@dimensiondev/kit'
-import { getOrderUnitPrice } from '@masknet/web3-providers'
-import { ZERO } from '@masknet/web3-shared-base'
-import { NonFungibleAssetProvider } from '@masknet/web3-shared-evm'
 import { head } from 'lodash-unified'
-import type { Order } from 'opensea-js/lib/types'
 import { useAsyncRetry } from 'react-use'
-import { PluginCollectibleRPC } from '../messages'
-import type { AssetOrder, CollectibleToken } from '../types'
+import type { Order } from 'opensea-js/lib/types'
+import { useChainId } from '@masknet/plugin-infra/web3'
+import { getOrderUnitPrice } from '@masknet/web3-providers'
+import { NetworkPluginID, ZERO } from '@masknet/web3-shared-base'
+import type { AssetOrder } from '../../../../../web3-providers/src/opensea/types'
+import { isOpenSeaSupportedChainId } from '../pipes'
+import { useOpenSea } from './useOpenSea'
 
-export function useAssetOrder(provider: NonFungibleAssetProvider, token?: CollectibleToken) {
+export function useAssetOrder(address?: string, tokenId?: string) {
+    const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
+    const SDK = useOpenSea(isOpenSeaSupportedChainId(chainId) ? chainId : undefined)
     return useAsyncRetry(async () => {
-        if (!token?.contractAddress || !token?.tokenId) return
-        switch (provider) {
-            case NonFungibleAssetProvider.OPENSEA:
-                const openSeaResponse = await PluginCollectibleRPC.getAssetFromSDK(token.contractAddress, token.tokenId)
-                const getPrice = (order: Order | AssetOrder) => {
-                    const _order = order as AssetOrder
-                    return (
-                        getOrderUnitPrice(
-                            _order.currentPrice,
-                            _order.paymentTokenContract?.decimals,
-                            _order.quantity,
-                        ) ?? ZERO
-                    )
-                }
-
-                const sellOrders = openSeaResponse.sellOrders ?? []
-                const desktopOrder = head(sellOrders.sort((a, b) => getPrice(a).toNumber() - getPrice(b).toNumber()))
-                return desktopOrder
-            case NonFungibleAssetProvider.RARIBLE:
-                return
-            case NonFungibleAssetProvider.NFTSCAN:
-                return
-            case NonFungibleAssetProvider.ZORA:
-                return
-            default:
-                unreachable(provider)
+        if (!address || !tokenId) return
+        const asset = await SDK?.api.getAsset({
+            tokenAddress: address,
+            tokenId,
+        })
+        const getPrice = (order: Order | AssetOrder) => {
+            const _order = order as AssetOrder
+            return (
+                getOrderUnitPrice(_order.current_bounty, _order.payment_token_contract?.decimals, _order.quantity) ??
+                ZERO
+            )
         }
-    }, [provider, token?.contractAddress, token?.tokenId])
+
+        const sellOrders = asset?.sellOrders ?? []
+        return head(sellOrders.sort((a, b) => getPrice(a).toNumber() - getPrice(b).toNumber()))
+    }, [address, tokenId, SDK])
 }
diff --git a/packages/mask/src/plugins/Collectible/hooks/useCollectibleState.ts b/packages/mask/src/plugins/Collectible/hooks/useCollectibleState.ts
index f3f79d40d886..43bc54e1ffd7 100644
--- a/packages/mask/src/plugins/Collectible/hooks/useCollectibleState.ts
+++ b/packages/mask/src/plugins/Collectible/hooks/useCollectibleState.ts
@@ -1,81 +1,25 @@
 import { useState } from 'react'
 import { createContainer } from 'unstated-next'
-import { OrderSide } from 'opensea-js/lib/types'
-import { NonFungibleAssetProvider } from '@masknet/web3-shared-evm'
 import { CollectibleTab, CollectibleToken } from '../types'
-import { useAsset, useHistory, useOrders } from '../../EVM/hooks'
-import { useAssetOrder } from './useAssetOrder'
-import type { AsyncStateRetry } from 'react-use/lib/useAsyncRetry'
-// Make TypeScript happy
-type T = AsyncStateRetry<CollectibleToken | null>
+import { useNonFungibleAsset } from '@masknet/plugin-infra/web3'
+import { NetworkPluginID, SourceType } from '@masknet/web3-shared-base'
 
 function useCollectibleState(token?: CollectibleToken) {
     const [tabIndex, setTabIndex] = useState(CollectibleTab.ARTICLE)
+    const [provider, setProvider] = useState(SourceType.OpenSea)
 
-    const [provider, setProvider] = useState(NonFungibleAssetProvider.OPENSEA)
-
-    const asset = useAsset(token?.contractAddress ?? '', token?.tokenId ?? '', provider)
-    // #region asset order from sdk
-    const assetOrder = useAssetOrder(provider, token)
-    // #endregion
-
-    // #region offers
-    const [offerPage, setOfferPage] = useState(0)
-    const offers = useOrders(
-        provider,
-        offerPage,
-        50,
-        tabIndex === CollectibleTab.OFFER ? token?.contractAddress : undefined,
-        tabIndex === CollectibleTab.OFFER ? token?.tokenId : undefined,
-        OrderSide.Buy,
-    )
-    // #endregion
-
-    // #region orders
-    const [orderPage, setOrderPage] = useState(0)
-    const orders = useOrders(
-        provider,
-        orderPage,
-        50,
-        tabIndex === CollectibleTab.LISTING ? token?.contractAddress : undefined,
-        tabIndex === CollectibleTab.LISTING ? token?.tokenId : undefined,
-        OrderSide.Sell,
-    )
-    // #endregion
-
-    // #region events
-    const [eventPage, setEventPage] = useState(0)
-    const events = useHistory(
-        provider,
-        eventPage,
-        50,
-        tabIndex === CollectibleTab.HISTORY ? token?.contractAddress : undefined,
-        tabIndex === CollectibleTab.HISTORY ? token?.tokenId : undefined,
-    )
-    // #endregion
+    const asset = useNonFungibleAsset(NetworkPluginID.PLUGIN_EVM, token?.contractAddress ?? '', token?.tokenId ?? '', {
+        sourceType: provider,
+    })
 
     return {
         token,
         asset,
-        assetOrder,
-
         provider,
         setProvider,
 
         tabIndex,
         setTabIndex,
-
-        offers,
-        offerPage,
-        setOfferPage,
-
-        orders,
-        orderPage,
-        setOrderPage,
-
-        events,
-        eventPage,
-        setEventPage,
     }
 }
 
diff --git a/packages/mask/src/plugins/Collectible/hooks/useOpenSea.ts b/packages/mask/src/plugins/Collectible/hooks/useOpenSea.ts
new file mode 100644
index 000000000000..544f048590e0
--- /dev/null
+++ b/packages/mask/src/plugins/Collectible/hooks/useOpenSea.ts
@@ -0,0 +1,23 @@
+import { useMemo } from 'react'
+import { OpenSeaPort } from 'opensea-js'
+import { useWeb3Provider } from '@masknet/plugin-infra/web3'
+import type { ChainId } from '@masknet/web3-shared-evm'
+import { NetworkPluginID } from '@masknet/web3-shared-base'
+import { OpenSeaAPI_Key } from '../constants'
+import { isOpenSeaSupportedChainId, resolveOpenSeaNetwork } from '../pipes'
+
+export function useOpenSea(chainId?: ChainId) {
+    const web3Provider = useWeb3Provider(NetworkPluginID.PLUGIN_EVM)
+
+    return useMemo(() => {
+        if (!chainId || !isOpenSeaSupportedChainId(chainId) || !web3Provider) return
+        return new OpenSeaPort(
+            web3Provider,
+            {
+                apiKey: OpenSeaAPI_Key,
+                networkName: resolveOpenSeaNetwork(chainId),
+            },
+            console.log,
+        )
+    }, [web3Provider])
+}
diff --git a/packages/mask/src/plugins/Collectible/pipes/index.ts b/packages/mask/src/plugins/Collectible/pipes/index.ts
index 1ea89c4e626f..3590ddb458fb 100644
--- a/packages/mask/src/plugins/Collectible/pipes/index.ts
+++ b/packages/mask/src/plugins/Collectible/pipes/index.ts
@@ -1,47 +1,23 @@
-import { identity } from 'lodash-unified'
+import urlcat from 'urlcat'
 import { Network } from 'opensea-js'
-import { ChainId, createLookupTableResolver, NonFungibleAssetProvider } from '@masknet/web3-shared-evm'
+import { ChainId } from '@masknet/web3-shared-evm'
+import { createLookupTableResolver, createPredicate, SourceType } from '@masknet/web3-shared-base'
 import {
-    NullAddress,
     RaribleRopstenUserURL,
     RaribleUserURL,
     RaribleRinkebyUserURL,
     OpenSeaMainnetURL,
     OpenSeaTestnetURL,
 } from '../constants'
-import { OpenSeaAssetEventType, RaribleEventType } from '../types'
-import urlcat from 'urlcat'
 
-export function resolveOpenSeaAssetEventType(eventType: OpenSeaAssetEventType, fromUserName?: string) {
-    switch (eventType) {
-        case OpenSeaAssetEventType.CREATED:
-            return fromUserName === NullAddress ? 'Created' : 'List'
-        case OpenSeaAssetEventType.SUCCESSFUL:
-            return 'Sale'
-        case OpenSeaAssetEventType.CANCELLED:
-            return 'Cancel'
-        case OpenSeaAssetEventType.BID_WITHDRAWN:
-            return 'Bid Cancel'
-        case OpenSeaAssetEventType.BID_ENTERED:
-            return 'Bid'
-        case OpenSeaAssetEventType.TRANSFER:
-            return fromUserName === NullAddress ? 'Created' : 'Transfer'
-        case OpenSeaAssetEventType.OFFER_ENTERED:
-            return 'Offer'
-        default:
-            return eventType
-    }
-}
+type RaribleSupportedChainId = ChainId.Mainnet | ChainId.Ropsten | ChainId.Rinkeby
+type OpenSeaSupportedChainId = ChainId.Mainnet | ChainId.Rinkeby
+type ZoraSupportedChainId = ChainId.Mainnet
 
-export const resolveRaribleAssetEventType = createLookupTableResolver<RaribleEventType, string>(
-    {
-        [RaribleEventType.BUY]: 'Buy',
-        [RaribleEventType.OFFER]: 'Offer',
-        [RaribleEventType.ORDER]: 'Order',
-        [RaribleEventType.TRANSFER]: 'Transfer',
-    },
-    identity,
-)
+export const isOpenSeaSupportedChainId = createPredicate<ChainId, ChainId.Mainnet | ChainId.Rinkeby>([
+    ChainId.Mainnet,
+    ChainId.Rinkeby,
+])
 
 export const resolveOpenSeaNetwork = createLookupTableResolver<ChainId.Mainnet | ChainId.Rinkeby, Network>(
     {
@@ -51,19 +27,21 @@ export const resolveOpenSeaNetwork = createLookupTableResolver<ChainId.Mainnet |
     Network.Main,
 )
 
-export const resolveCollectibleProviderName = createLookupTableResolver<NonFungibleAssetProvider, string>(
+export const resolveCollectibleProviderName = createLookupTableResolver<SourceType, string>(
     {
-        [NonFungibleAssetProvider.OPENSEA]: 'OpenSea',
-        [NonFungibleAssetProvider.RARIBLE]: 'Rarible',
-        [NonFungibleAssetProvider.NFTSCAN]: 'NFTScan',
-        [NonFungibleAssetProvider.ZORA]: 'Zora',
+        [SourceType.DeBank]: '',
+        [SourceType.Zerion]: '',
+        [SourceType.RSS3]: 'RSS3',
+        [SourceType.OpenSea]: 'OpenSea',
+        [SourceType.Rarible]: 'Rarible',
+        [SourceType.NFTScan]: 'NFTScan',
+        [SourceType.Zora]: 'Zora',
     },
     (providerType) => {
         throw new Error(`Unknown provider type: ${providerType}.`)
     },
 )
 
-type RaribleSupportedChainId = ChainId.Mainnet | ChainId.Ropsten | ChainId.Rinkeby
 export const resolveRaribleUserNetwork = createLookupTableResolver<RaribleSupportedChainId, string>(
     {
         [ChainId.Mainnet]: RaribleUserURL,
@@ -73,7 +51,6 @@ export const resolveRaribleUserNetwork = createLookupTableResolver<RaribleSuppor
     RaribleUserURL,
 )
 
-type OpenSeaSupportedChainId = ChainId.Mainnet | ChainId.Rinkeby
 export const resolveLinkOnOpenSea = createLookupTableResolver<OpenSeaSupportedChainId, string>(
     {
         [ChainId.Mainnet]: OpenSeaMainnetURL,
@@ -91,7 +68,6 @@ export const resolveLinkOnRarible = createLookupTableResolver<RaribleSupportedCh
     'https://rarible.com',
 )
 
-type ZoraSupportedChainId = ChainId.Mainnet
 export const resolveLinkOnZora = createLookupTableResolver<ZoraSupportedChainId, string>(
     {
         [ChainId.Mainnet]: 'https://zora.co',
@@ -107,26 +83,21 @@ export function resolveTraitLinkOnOpenSea(chainId: ChainId, slug: string, search
     return `https://opensea.io/assets/${slug}?search[stringTraits][0][name]=${search}&search[stringTraits][0][values][0]=${value}`
 }
 
-export function resolveAssetLinkOnCurrentProvider(
-    chainId: ChainId,
-    address: string,
-    id: string,
-    provider: NonFungibleAssetProvider,
-) {
+export function resolveAssetLinkOnCurrentProvider(chainId: ChainId, address: string, id: string, provider: SourceType) {
     switch (provider) {
-        case NonFungibleAssetProvider.OPENSEA:
+        case SourceType.OpenSea:
             return urlcat(resolveLinkOnOpenSea(chainId as OpenSeaSupportedChainId), '/assets/:address/:id', {
                 address,
                 id,
             })
-        case NonFungibleAssetProvider.RARIBLE:
+        case SourceType.Rarible:
             return urlcat(resolveLinkOnRarible(chainId as RaribleSupportedChainId), '/token/:address/:id', {
                 address,
                 id,
             })
-        case NonFungibleAssetProvider.NFTSCAN:
+        case SourceType.NFTScan:
             return ''
-        case NonFungibleAssetProvider.ZORA:
+        case SourceType.Zora:
             return urlcat(resolveLinkOnZora(chainId as ZoraSupportedChainId), '/collections/:address/:id', {
                 address,
                 id,
@@ -139,35 +110,35 @@ export function resolveAssetLinkOnCurrentProvider(
 export function resolveUserUrlOnCurrentProvider(
     chainId: ChainId,
     address: string,
-    provider: NonFungibleAssetProvider,
+    provider: SourceType,
     username?: string,
 ) {
     switch (provider) {
-        case NonFungibleAssetProvider.RARIBLE:
+        case SourceType.Rarible:
             return urlcat(resolveRaribleUserNetwork(chainId as RaribleSupportedChainId), `/${address}`)
-        case NonFungibleAssetProvider.OPENSEA:
+        case SourceType.OpenSea:
             return urlcat(resolveLinkOnOpenSea(chainId as OpenSeaSupportedChainId), `/${username ?? ''}`)
-        case NonFungibleAssetProvider.NFTSCAN:
+        case SourceType.NFTScan:
             return ''
-        case NonFungibleAssetProvider.ZORA:
+        case SourceType.Zora:
             return urlcat(resolveLinkOnZora(chainId as ZoraSupportedChainId), `/${address}`)
         default:
             return ''
     }
 }
 
-export function resolveAvatarLinkOnCurrentProvider(chainId: ChainId, asset: any, provider: NonFungibleAssetProvider) {
+export function resolveAvatarLinkOnCurrentProvider(chainId: ChainId, asset: any, provider: SourceType) {
     switch (provider) {
-        case NonFungibleAssetProvider.OPENSEA:
+        case SourceType.OpenSea:
             return urlcat(resolveLinkOnOpenSea(chainId as OpenSeaSupportedChainId), `/collection/${asset.slug ?? ''}`)
-        case NonFungibleAssetProvider.RARIBLE:
+        case SourceType.Rarible:
             return urlcat(
                 resolveLinkOnRarible(chainId as RaribleSupportedChainId),
                 `/collection/${asset.token_address ?? ''}`,
             )
-        case NonFungibleAssetProvider.NFTSCAN:
+        case SourceType.NFTScan:
             return ''
-        case NonFungibleAssetProvider.ZORA:
+        case SourceType.Zora:
             return ''
         default:
             return ''
diff --git a/packages/mask/src/plugins/Collectible/queries/OpenSea.ts b/packages/mask/src/plugins/Collectible/queries/OpenSea.ts
deleted file mode 100644
index fac1ceead19b..000000000000
--- a/packages/mask/src/plugins/Collectible/queries/OpenSea.ts
+++ /dev/null
@@ -1,228 +0,0 @@
-export const OpenSeaEventHistoryQuery = `
-    query EventHistoryQuery(
-        $archetype: ArchetypeInputType
-        $bundle: BundleSlug
-        $collections: [CollectionSlug!]
-        $categories: [CollectionSlug!]
-        $eventTypes: [EventType!]
-        $cursor: String
-        $count: Int = 10
-        $showAll: Boolean = false
-        $identity: IdentityInputType
-    ) {
-        ...EventHistory_data_3WnwJ9
-    }
-
-    fragment AccountLink_data on AccountType {
-        address
-        chain {
-            identifier
-            id
-        }
-        user {
-            publicUsername
-            id
-        }
-        ...ProfileImage_data
-        ...wallet_accountKey
-    }
-
-    fragment AssetCell_asset on AssetType {
-        collection {
-            name
-            id
-        }
-        name
-        ...AssetMedia_asset
-        ...asset_url
-    }
-
-    fragment AssetCell_assetBundle on AssetBundleType {
-        assetQuantities(first: 2) {
-            edges {
-                node {
-                    asset {
-                        collection {
-                            name
-                            id
-                        }
-                        name
-                        ...AssetMedia_asset
-                        ...asset_url
-                        id
-                    }
-                    relayId
-                    id
-                }
-            }
-        }
-        name
-        slug
-    }
-
-    fragment AssetMedia_asset on AssetType {
-        animationUrl
-        backgroundColor
-        collection {
-            description
-            displayData {
-                cardDisplayStyle
-            }
-            imageUrl
-            hidden
-            name
-            slug
-            id
-        }
-        description
-        name
-        tokenId
-        imageUrl
-    }
-
-    fragment AssetQuantity_data on AssetQuantityType {
-        asset {
-            ...Price_data
-            id
-        }
-        quantity
-    }
-
-    fragment EventHistory_data_3WnwJ9 on Query {
-        assetEvents(
-            after: $cursor
-            bundle: $bundle
-            archetype: $archetype
-            first: $count
-            categories: $categories
-            collections: $collections
-            eventTypes: $eventTypes
-            identity: $identity
-            includeHidden: true
-        ) {
-            edges {
-                node {
-                    assetBundle @include(if: $showAll) {
-                        ...AssetCell_assetBundle
-                        id
-                    }
-                    assetQuantity {
-                        asset @include(if: $showAll) {
-                            ...AssetCell_asset
-                            id
-                        }
-                        ...quantity_data
-                        id
-                    }
-                    relayId
-                    eventTimestamp
-                    eventType
-                    customEventName
-                    devFee {
-                        quantity
-                        ...AssetQuantity_data
-                        id
-                    }
-                    devFeePaymentEvent {
-                        ...EventTimestamp_data
-                        id
-                    }
-                    fromAccount {
-                        address
-                        ...AccountLink_data
-                        id
-                    }
-                    price {
-                        quantity
-                        ...AssetQuantity_data
-                        id
-                    }
-                    endingPrice {
-                        quantity
-                        ...AssetQuantity_data
-                        id
-                    }
-                    seller {
-                        ...AccountLink_data
-                        id
-                    }
-                    toAccount {
-                        ...AccountLink_data
-                        id
-                    }
-                    winnerAccount {
-                        ...AccountLink_data
-                        id
-                    }
-                    ...EventTimestamp_data
-                    id
-                    __typename
-                }
-                cursor
-            }
-            pageInfo {
-                endCursor
-                hasNextPage
-            }
-        }
-    }
-
-    fragment EventTimestamp_data on AssetEventType {
-        eventTimestamp
-        transaction {
-            blockExplorerLink
-            id
-        }
-    }
-
-    fragment Price_data on AssetType {
-        decimals
-        imageUrl
-        symbol
-        usdSpotPrice
-        assetContract {
-            blockExplorerLink
-            id
-        }
-    }
-
-    fragment ProfileImage_data on AccountType {
-        imageUrl
-        address
-        chain {
-            identifier
-            id
-        }
-    }
-
-    fragment asset_url on AssetType {
-        assetContract {
-            account {
-                address
-                chain {
-                    identifier
-                    id
-                }
-                id
-            }
-            id
-        }
-        tokenId
-    }
-
-    fragment quantity_data on AssetQuantityType {
-        asset {
-            decimals
-            id
-        }
-        quantity
-    }
-
-    fragment wallet_accountKey on AccountType {
-        address
-        chain {
-            identifier
-            id
-        }
-    }
-`
diff --git a/packages/mask/src/plugins/Collectible/services.ts b/packages/mask/src/plugins/Collectible/services.ts
index 5914b704d67f..336ce12bb910 100644
--- a/packages/mask/src/plugins/Collectible/services.ts
+++ b/packages/mask/src/plugins/Collectible/services.ts
@@ -1 +1 @@
-export * from './apis'
+export {}
diff --git a/packages/mask/src/plugins/Collectible/types/index.ts b/packages/mask/src/plugins/Collectible/types/index.ts
index 42749043aa32..956bd8ed8370 100644
--- a/packages/mask/src/plugins/Collectible/types/index.ts
+++ b/packages/mask/src/plugins/Collectible/types/index.ts
@@ -1,9 +1,6 @@
 import type { WyvernSchemaName } from 'opensea-js/lib/types'
 import type { ChainId } from '@masknet/web3-shared-evm'
 
-export * from './opensea'
-export * from './rarible'
-
 export interface CollectibleJSON_Payload {
     chain_id: ChainId
     address: string
diff --git a/packages/mask/src/plugins/Collectible/types/opensea.ts b/packages/mask/src/plugins/Collectible/types/opensea.ts
deleted file mode 100644
index 929bccf9b03d..000000000000
--- a/packages/mask/src/plugins/Collectible/types/opensea.ts
+++ /dev/null
@@ -1,248 +0,0 @@
-import type { OpenSeaPort } from 'opensea-js'
-import type {
-    AssetContractType,
-    AuctionType,
-    OpenSeaAccount,
-    TokenStandardVersion,
-    WyvernSchemaName,
-} from 'opensea-js/lib/types'
-
-export type CreateSellOrderPayload = Parameters<OpenSeaPort['createSellOrder']>[0]
-
-export interface OpenSeaCustomTrait {
-    trait_type: string
-    value: string
-}
-
-export interface OpenSeaCustomAccount extends OpenSeaAccount {
-    profile_img_url: string
-}
-
-export interface OpenSeaFungibleToken {
-    image_url?: string
-    eth_price?: string
-    usd_price?: string
-    name: string
-    symbol: string
-    decimals: number
-    address: string
-}
-
-export interface OpenSeaCustomCollection extends OpenSeaCollection {
-    safelist_request_status: string
-    payment_tokens: OpenSeaFungibleToken[]
-    slug: string
-}
-
-interface AssetToken {
-    address: string
-    decimals: number
-    eth_price: string
-    id: number
-    image_url: string
-    name: string
-    symbol: string
-    usd_price: string
-}
-
-export enum OpenSeaAssetEventType {
-    CREATED = 'CREATED',
-    SUCCESSFUL = 'SUCCESSFUL',
-    CANCELLED = 'CANCELLED',
-    OFFER_ENTERED = 'OFFER_ENTERED',
-    BID_ENTERED = 'BID_ENTERED',
-    BID_WITHDRAWN = 'BID_WITHDRAWN',
-    TRANSFER = 'TRANSFER',
-    APPROVE = 'APPROVE',
-    COMPOSITION_CREATED = 'COMPOSITION_CREATED',
-    CUSTOM = 'CUSTOM',
-    PAYOUT = 'PAYOUT',
-}
-
-export interface OpenSeaAssetEvent {
-    id: string
-    event_type: OpenSeaAssetEventType
-    from_account?: OpenSeaCustomAccount
-    to_account?: OpenSeaCustomAccount
-    seller?: OpenSeaCustomAccount
-    winner_account?: OpenSeaCustomAccount
-    asset: {
-        id: string
-        decimals: number
-        image_url: string
-        image_original_url: string
-        image_preview_url: string
-        asset_contract: {
-            symbol: string
-        }
-        permalink: string
-    }
-    payment_token: OpenSeaFungibleToken
-    quantity: string
-    ending_price: string
-    bid_amount: string
-    starting_price: string
-    transaction: {
-        blockExplorerLink: string
-        id: string
-    }
-    assetQuantity: {
-        asset: {
-            decimals?: number
-            id: string
-        }
-        quantity: string
-        id: string
-    }
-    created_date: string
-}
-
-export interface OpenSeaAssetEventResponse {
-    pageInfo: {
-        hasNextPage: boolean
-        endCursor: string
-    }
-    edges: OpenSeaAssetEvent[]
-}
-
-// #region opensea fetch response
-export interface OpenSeaFees {
-    opensea_seller_fee_basis_points: number
-    opensea_buyer_fee_basis_points: number
-    dev_seller_fee_basis_points: number
-    dev_buyer_fee_basis_points: number
-}
-
-export interface Asset {
-    token_id: string | null
-    token_address: string
-    schema_name?: WyvernSchemaName
-    version?: TokenStandardVersion
-    name?: string
-    decimals?: number
-}
-
-export interface OpenSeaAssetContract extends OpenSeaFees {
-    name: string
-    address: string
-    type: AssetContractType
-    schema_name: WyvernSchemaName
-    seller_fee_basis_points: number
-    buyer_fee_basis_points: number
-    description: string
-    token_symbol: string
-    image_url: string
-    stats?: object
-    traits?: object[]
-    external_link?: string
-    wiki_link?: string
-}
-
-interface NumericalTraitStats {
-    min: number
-    max: number
-}
-interface StringTraitStats {
-    [key: string]: number
-}
-
-export interface OpenSeaTraitStats {
-    [traitName: string]: NumericalTraitStats | StringTraitStats
-}
-
-export interface OpenSeaCollection extends OpenSeaFees {
-    name: string
-    slug: string
-    editors: string[]
-    hidden: boolean
-    featured: boolean
-    created_date: string
-    description: string
-    image_url: string
-    largeImage_url: string
-    featured_image_url: string
-    stats: object
-    display_data: object
-    payment_tokens: OpenSeaFungibleToken[]
-    payout_address?: string
-    trait_stats: OpenSeaTraitStats
-    external_link?: string
-    wiki_link?: string
-    safelist_request_status: string
-}
-
-export interface AssetOrder {
-    created_time?: string
-    current_price?: string
-    current_bounty?: string
-    maker_account?: OpenSeaCustomAccount
-    taker_account?: OpenSeaCustomAccount
-    payment_token?: string
-    payment_token_contract?: OpenSeaFungibleToken
-    fee_recipient_account?: OpenSeaFungibleToken
-    cancelled_or_finalized?: boolean
-    marked_invalid?: boolean
-    approved_on_chain: boolean
-    listing_time: number
-    side: number
-    quantity: string
-    expiration_time: number
-    order_hash: string
-    base_price?: string
-    currentPrice?: string
-    paymentTokenContract?: OpenSeaFungibleToken
-}
-
-export interface OpenSeaResponse extends Asset {
-    animation_url: string
-    asset_contract: OpenSeaAssetContract
-    collection: OpenSeaCollection
-    name: string
-    description: string
-    owner: OpenSeaCustomAccount
-    orders: AssetOrder[] | null
-    buy_orders: AssetOrder[] | null
-    sell_orders: AssetOrder[] | null
-    is_presale: boolean
-    image_url: string
-    image_preview_url: string
-    image_url_original: string
-    image_url_thumbnail: string
-    opensea_link: string
-    external_link: string
-    traits: OpenSeaCustomTrait[]
-    num_sales: number
-    last_sale: AssetEvent | null
-    background_color: string | null
-    transfer_fee: string | null
-    transfer_fee_payment_token: OpenSeaFungibleToken | null
-    top_ownerships: Array<{
-        owner: OpenSeaCustomAccount
-        quantity: string
-    }>
-    creator: OpenSeaCustomAccount
-    endTime: string
-}
-
-export interface AssetEvent {
-    event_type: OpenSeaAssetEventType
-    event_timestamp: number
-    auction_type: AuctionType
-    total_price: string
-    transaction: Transaction | null
-    payment_token: OpenSeaFungibleToken | null
-}
-
-export interface Transaction {
-    from_account: OpenSeaCustomAccount
-    to_account: OpenSeaCustomAccount
-    created_date: string
-    modified_date: string
-    transaction_hash: string
-    transaction_index: string
-    block_number: string
-    block_hash: string
-    timestamp: number
-}
-
-// #endregion
diff --git a/packages/mask/src/plugins/Collectible/types/rarible.ts b/packages/mask/src/plugins/Collectible/types/rarible.ts
deleted file mode 100644
index 772dc83e6877..000000000000
--- a/packages/mask/src/plugins/Collectible/types/rarible.ts
+++ /dev/null
@@ -1,212 +0,0 @@
-import type { WyvernSchemaName } from 'opensea-js/lib/types'
-
-export interface RaribleTransferItem {
-    type: string
-    from: string
-}
-
-export interface Royalty {
-    recipient: string
-    value: number
-}
-
-export interface Attribute {
-    key: string
-    value: string
-}
-
-export interface Salt {
-    value: string
-    type: string
-}
-
-export enum RARIBLE_FEATURES {
-    APPROVE_FOR_ALL = 'APPROVE_FOR_ALL',
-    SET_URI_PREFIX = 'SET_URI_PREFIX',
-    BURN = 'BURN',
-    MINT_WITH_ADDRESS = 'MINT_WITH_ADDRESS',
-    SECONDARY_SALE_FEES = 'SECONDARY_SALE_FEES',
-}
-
-export interface Ownership {
-    id: string
-    token: string
-    tokenId: string
-    owner: string
-    value: number
-    date: Date
-    price: number
-    priceEth: number
-    buyToken: string
-    buyTokenId: string
-    status: string
-    selling: number
-    sold: number
-    stock: number
-    signature: string
-    pending: RaribleTransferItem[]
-    blacklisted: boolean
-    creator: string
-    verified: boolean
-    categories: string[]
-    likes: number
-}
-
-export interface Creator {
-    account: string
-    value: number
-}
-
-export interface Meta {
-    name: string
-    description: string
-    attributes: Array<{
-        key: string
-        value: string
-    }>
-    image: {
-        meta: {
-            PREVIEW: {
-                type: string
-                width: number
-                height: number
-            }
-        }
-        url: {
-            BIG: string
-            ORIGINAL: string
-            PREVIEW: string
-        }
-        name: string
-    }
-    animation?: {
-        meta: {
-            PREVIEW: {
-                type: string
-                width: number
-                height: number
-            }
-        }
-        url: {
-            BIG: string
-            ORIGINAL: string
-            PREVIEW: string
-        }
-    }
-}
-
-export interface RaribleNFTItemMapResponse {
-    contract: string
-    creators: Creator[]
-    date: string
-    deleted: boolean
-    id: string
-    lazySupply: string
-    meta: Meta
-    owners: string[]
-    royalties: Royalty[]
-    pending: RaribleTransferItem[]
-    supply: string
-    tokenId: string
-}
-
-export interface RaribleNFTOwnershipResponse extends RaribleNFTItemMapResponse {
-    ownership: Ownership
-}
-
-export interface Tag {
-    name: string
-    source: string
-}
-
-export interface RaribleCollectibleResponse {
-    '@class': string
-    id: string
-    name: string
-    symbol: string
-    status: string
-    features: RARIBLE_FEATURES[]
-    standard: WyvernSchemaName
-    startBlockNumber: number
-    pic: string
-    cover: string
-    indexable: boolean
-    volume: number
-    editors: any[]
-    tags: Tag[]
-    version: number
-    description?: string
-    shortUrl: string
-}
-
-export enum RaribleProfileType {
-    USER = 'USER',
-    COLLECTION = 'COLLECTION',
-}
-
-export interface RaribleProfileResponse {
-    blacklisted: boolean
-    cover: string
-    followers: number
-    followings: number
-    has3Box: boolean
-    id: string
-    image: string
-    name?: string
-    description?: string
-    type: RaribleProfileType
-}
-
-export interface RaribleOfferResponse {
-    token: string
-    tokenId: string
-    assetType: string
-    maker: string
-    salt: Salt
-    buyValue: number
-    buyToken: string
-    buyTokenId: string
-    buyAssetType: string
-    value: number
-    signature: string
-    updateDate: Date
-    importantUpdateDate: Date
-    updateStateDate: Date
-    contractVersion: number
-    fee: number
-    sold: number
-    canceled: boolean
-    pending: RaribleTransferItem[]
-    buyPriceEth: number
-    version: number
-    id: string
-    active: boolean
-    buyPrice: number
-    sellPrice: number
-    buyStock: number
-}
-
-export interface RaribleOrder extends RaribleOfferResponse {
-    ownerInfo: RaribleProfileResponse
-}
-
-export enum RaribleEventType {
-    ORDER = 'order',
-    BUY = 'buy',
-    TRANSFER = 'transfer',
-    OFFER = 'offer',
-}
-
-export interface RaribleHistory {
-    '@type': RaribleEventType
-    id: string
-    owner: string
-    value: number
-    price: number
-    buyToken: string
-    buyTokenId: string
-    buyer?: string
-    from?: string
-    date: Date
-    transactionHash: string
-}
diff --git a/packages/mask/src/plugins/CryptoartAI/SNSAdaptor/Account.tsx b/packages/mask/src/plugins/CryptoartAI/SNSAdaptor/Account.tsx
index 2abe8ecd5ecb..6a67234d2ce0 100644
--- a/packages/mask/src/plugins/CryptoartAI/SNSAdaptor/Account.tsx
+++ b/packages/mask/src/plugins/CryptoartAI/SNSAdaptor/Account.tsx
@@ -1,5 +1,6 @@
 import { useI18N } from '../../../utils'
-import { useAccount, isSameAddress } from '@masknet/web3-shared-evm'
+import { NetworkPluginID, isSameAddress } from '@masknet/web3-shared-base'
+import { useAccount } from '@masknet/plugin-infra/web3'
 
 export interface AccountProps {
     address?: string
@@ -7,7 +8,7 @@ export interface AccountProps {
 }
 
 export function Account({ address, username }: AccountProps) {
-    const account = useAccount()
+    const account = useAccount(NetworkPluginID.PLUGIN_EVM)
     const { t } = useI18N()
 
     return <>{isSameAddress(account, address ?? '') ? t('plugin_collectible_you') : username || address?.slice(2, 8)}</>
diff --git a/packages/mask/src/plugins/CryptoartAI/SNSAdaptor/CheckoutDialog.tsx b/packages/mask/src/plugins/CryptoartAI/SNSAdaptor/CheckoutDialog.tsx
index c77ac410ffc7..d4a17a513cb7 100644
--- a/packages/mask/src/plugins/CryptoartAI/SNSAdaptor/CheckoutDialog.tsx
+++ b/packages/mask/src/plugins/CryptoartAI/SNSAdaptor/CheckoutDialog.tsx
@@ -1,18 +1,19 @@
+import { useCallback, useMemo } from 'react'
+import BigNumber from 'bignumber.js'
+import { first } from 'lodash-unified'
 import { InjectedDialog, useOpenShareTxDialog } from '@masknet/shared'
 import { makeStyles } from '@masknet/theme'
-import { formatBalance, useChainId, useFungibleTokenWatched } from '@masknet/web3-shared-evm'
 import { Box, Card, CardActions, CardContent, DialogContent, Link, Typography } from '@mui/material'
-import BigNumber from 'bignumber.js'
-import { first } from 'lodash-unified'
-import { useCallback, useMemo } from 'react'
 import ActionButton from '../../../extension/options-page/DashboardComponents/ActionButton'
+import { WalletConnectedBoundary } from '../../../web3/UI/WalletConnectedBoundary'
+import type { useAsset } from '../hooks/useAsset'
+import { usePurchaseCallback } from '../hooks/usePurchaseCallback'
 import { activatedSocialNetworkUI } from '../../../social-network'
-import { isFacebook } from '../../../social-network-adaptor/facebook.com/base'
 import { isTwitter } from '../../../social-network-adaptor/twitter.com/base'
+import { isFacebook } from '../../../social-network-adaptor/facebook.com/base'
+import { useChainId, useFungibleTokenWatched } from '@masknet/plugin-infra/web3'
+import { NetworkPluginID, formatBalance } from '@masknet/web3-shared-base'
 import { useI18N } from '../../../utils'
-import { EthereumWalletConnectedBoundary } from '../../../web3/UI/EthereumWalletConnectedBoundary'
-import type { useAsset } from '../hooks/useAsset'
-import { usePurchaseCallback } from '../hooks/usePurchaseCallback'
 import { resolveAssetLinkOnCryptoartAI, resolvePaymentTokensOnCryptoartAI } from '../pipes'
 
 const useStyles = makeStyles()((theme) => {
@@ -83,11 +84,11 @@ export function CheckoutDialog(props: CheckoutDialogProps) {
     const { t } = useI18N()
     const { classes } = useStyles()
 
-    const chainId = useChainId()
+    const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
 
     const paymentTokens = resolvePaymentTokensOnCryptoartAI(chainId) ?? []
     const selectedPaymentToken = first(paymentTokens)
-    const { token, balance } = useFungibleTokenWatched(selectedPaymentToken)
+    const { token, balance } = useFungibleTokenWatched(NetworkPluginID.PLUGIN_EVM, selectedPaymentToken?.address)
 
     const [{ loading: isPurchasing }, purchaseCallback] = usePurchaseCallback(
         asset?.value?.editionNumber ?? '0',
@@ -177,7 +178,7 @@ export function CheckoutDialog(props: CheckoutDialogProps) {
                         </Box>
                     </CardContent>
                     <CardActions className={classes.footer}>
-                        <EthereumWalletConnectedBoundary>
+                        <WalletConnectedBoundary>
                             <ActionButton
                                 loading={isPurchasing}
                                 className={classes.button}
@@ -187,7 +188,7 @@ export function CheckoutDialog(props: CheckoutDialogProps) {
                                 onClick={purchase}>
                                 {validationMessage || t('plugin_cryptoartai_buy_now')}
                             </ActionButton>
-                        </EthereumWalletConnectedBoundary>
+                        </WalletConnectedBoundary>
                     </CardActions>
                 </Card>
             </DialogContent>
diff --git a/packages/mask/src/plugins/CryptoartAI/SNSAdaptor/Collectible.tsx b/packages/mask/src/plugins/CryptoartAI/SNSAdaptor/Collectible.tsx
index 60243d746ad8..dc4ee925953c 100644
--- a/packages/mask/src/plugins/CryptoartAI/SNSAdaptor/Collectible.tsx
+++ b/packages/mask/src/plugins/CryptoartAI/SNSAdaptor/Collectible.tsx
@@ -15,8 +15,9 @@ import { TabState, TransactionType } from '../types'
 import { resolveAssetLinkOnCryptoartAI, resolveWebLinkOnCryptoartAI } from '../pipes'
 import { Markdown } from '../../Snapshot/SNSAdaptor/Markdown'
 import { ActionBar } from './ActionBar'
-import { useChainId } from '@masknet/web3-shared-evm'
-import { EthereumChainBoundary } from '../../../web3/UI/EthereumChainBoundary'
+import { useChainId } from '@masknet/plugin-infra/web3'
+import { NetworkPluginID } from '@masknet/web3-shared-base'
+import { ChainBoundary } from '../../../web3/UI/ChainBoundary'
 
 const useStyles = makeStyles()((theme) => {
     return {
@@ -76,7 +77,7 @@ export interface CollectibleProps {}
 export function Collectible(props: CollectibleProps) {
     const { t } = useI18N()
     const { classes } = useStyles()
-    const chainId = useChainId()
+    const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
     const { asset, events, tabIndex, setTabIndex, chainId: expectChainId } = CollectibleState.useContainer()
 
     const assetSource = useMemo(() => {
@@ -266,9 +267,12 @@ export function Collectible(props: CollectibleProps) {
                 </CardContent>
             </CollectibleCard>
             <Box sx={{ display: 'flex', width: 'calc(100% - 24px)', padding: 1.5 }}>
-                <EthereumChainBoundary chainId={expectChainId ?? chainId} renderInTimeline>
+                <ChainBoundary
+                    expectedPluginID={NetworkPluginID.PLUGIN_EVM}
+                    expectedChainId={expectChainId ?? chainId}
+                    renderInTimeline>
                     <ActionBar />
-                </EthereumChainBoundary>
+                </ChainBoundary>
             </Box>
         </>
     )
diff --git a/packages/mask/src/plugins/CryptoartAI/SNSAdaptor/HistoryTab/Row.tsx b/packages/mask/src/plugins/CryptoartAI/SNSAdaptor/HistoryTab/Row.tsx
index 484a7779803c..1eacd7aa9462 100644
--- a/packages/mask/src/plugins/CryptoartAI/SNSAdaptor/HistoryTab/Row.tsx
+++ b/packages/mask/src/plugins/CryptoartAI/SNSAdaptor/HistoryTab/Row.tsx
@@ -59,7 +59,7 @@ export function Row({ event, chainId }: Props) {
                     target="_blank"
                     className={classes.account}
                     rel="noopener noreferrer">
-                    <Avatar src={event.avatorPath} className={classes.avatar} />
+                    <Avatar src={event.avatarPath} className={classes.avatar} />
                     <Typography className={classes.accountName} variant="body2">
                         <Account
                             username={truncate(event.operatorName, {
diff --git a/packages/mask/src/plugins/CryptoartAI/SNSAdaptor/HistoryTab/index.tsx b/packages/mask/src/plugins/CryptoartAI/SNSAdaptor/HistoryTab/index.tsx
index 414c31b64ace..3ebecf70bf81 100644
--- a/packages/mask/src/plugins/CryptoartAI/SNSAdaptor/HistoryTab/index.tsx
+++ b/packages/mask/src/plugins/CryptoartAI/SNSAdaptor/HistoryTab/index.tsx
@@ -1,5 +1,6 @@
 import { Button, Table, TableBody, TableCell, TableHead, TableRow, Typography } from '@mui/material'
-import { useChainId } from '@masknet/web3-shared-evm'
+import { useChainId } from '@masknet/plugin-infra/web3'
+import { NetworkPluginID } from '@masknet/web3-shared-base'
 import { makeStyles } from '@masknet/theme'
 import { useI18N } from '../../../../utils'
 import { CollectibleTab } from '../CollectibleTab'
@@ -37,7 +38,7 @@ export interface HistoryTabProps {}
 export function HistoryTab(props: HistoryTabProps) {
     const { t } = useI18N()
     const { classes } = useStyles()
-    const chainId = useChainId()
+    const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
     const { events } = CollectibleState.useContainer()
 
     if (events.loading) return <LoadingTable />
diff --git a/packages/mask/src/plugins/CryptoartAI/SNSAdaptor/MakeOfferDialog.tsx b/packages/mask/src/plugins/CryptoartAI/SNSAdaptor/MakeOfferDialog.tsx
index 996abe12d642..fec469141dce 100644
--- a/packages/mask/src/plugins/CryptoartAI/SNSAdaptor/MakeOfferDialog.tsx
+++ b/packages/mask/src/plugins/CryptoartAI/SNSAdaptor/MakeOfferDialog.tsx
@@ -1,25 +1,21 @@
+import { useEffect, useMemo, useState, useCallback } from 'react'
 import { InjectedDialog, useOpenShareTxDialog } from '@masknet/shared'
 import { makeStyles } from '@masknet/theme'
-import {
-    formatBalance,
-    FungibleTokenDetailed,
-    isNativeTokenAddress,
-    useChainId,
-    useFungibleTokenWatched,
-} from '@masknet/web3-shared-evm'
-import { Box, Card, CardActions, CardContent, DialogContent, Link } from '@mui/material'
-import BigNumber from 'bignumber.js'
 import { first } from 'lodash-unified'
-import { useCallback, useEffect, useMemo, useState } from 'react'
-import ActionButton from '../../../extension/options-page/DashboardComponents/ActionButton'
-import { activatedSocialNetworkUI } from '../../../social-network'
-import { isFacebook } from '../../../social-network-adaptor/facebook.com/base'
-import { isTwitter } from '../../../social-network-adaptor/twitter.com/base'
+import BigNumber from 'bignumber.js'
+import { isNativeTokenAddress } from '@masknet/web3-shared-evm'
+import { Box, Card, CardActions, CardContent, DialogContent, Link } from '@mui/material'
 import { useI18N } from '../../../utils'
-import { EthereumWalletConnectedBoundary } from '../../../web3/UI/EthereumWalletConnectedBoundary'
+import ActionButton from '../../../extension/options-page/DashboardComponents/ActionButton'
 import { SelectTokenAmountPanel } from '../../ITO/SNSAdaptor/SelectTokenAmountPanel'
+import { WalletConnectedBoundary } from '../../../web3/UI/WalletConnectedBoundary'
 import type { useAsset } from '../hooks/useAsset'
 import { usePlaceBidCallback } from '../hooks/usePlaceBidCallback'
+import { activatedSocialNetworkUI } from '../../../social-network'
+import { isTwitter } from '../../../social-network-adaptor/twitter.com/base'
+import { isFacebook } from '../../../social-network-adaptor/facebook.com/base'
+import { formatBalance, NetworkPluginID } from '@masknet/web3-shared-base'
+import { useChainId, useFungibleTokenWatched } from '@masknet/plugin-infra/web3'
 import { resolveAssetLinkOnCryptoartAI, resolvePaymentTokensOnCryptoartAI } from '../pipes'
 
 const useStyles = makeStyles()((theme) => {
@@ -87,12 +83,15 @@ export function MakeOfferDialog(props: MakeOfferDialogProps) {
     const is24Auction = assetSource?.is24Auction ?? false
     const isVerified = (!assetSource?.isSoldOut && !assetSource?.is_owner) ?? false
 
-    const chainId = useChainId()
+    const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
 
     const paymentTokens = resolvePaymentTokensOnCryptoartAI(chainId) ?? []
     const selectedPaymentToken = first(paymentTokens)
 
-    const { amount, token, balance, setAmount, setToken } = useFungibleTokenWatched(selectedPaymentToken)
+    const { amount, token, balance, setAmount, setAddress } = useFungibleTokenWatched(
+        NetworkPluginID.PLUGIN_EVM,
+        selectedPaymentToken?.address,
+    )
 
     const [atLeastBidValue, setAtLeastBidValue] = useState(0)
     useEffect(() => {
@@ -189,10 +188,10 @@ export function MakeOfferDialog(props: MakeOfferDialogProps) {
                         <SelectTokenAmountPanel
                             amount={amount}
                             balance={balance.value ?? '0'}
-                            token={token.value as FungibleTokenDetailed}
+                            token={token.value}
                             disableNativeToken={!paymentTokens.some(isNativeTokenAddress)}
                             onAmountChange={setAmount}
-                            onTokenChange={setToken}
+                            onTokenChange={(x) => setAddress(x.address)}
                             TokenAmountPanelProps={{
                                 label: t('plugin_collectible_price'),
                             }}
@@ -226,7 +225,7 @@ export function MakeOfferDialog(props: MakeOfferDialogProps) {
                         ) : null}
                     </CardContent>
                     <CardActions className={classes.footer}>
-                        <EthereumWalletConnectedBoundary>
+                        <WalletConnectedBoundary>
                             <Box className={classes.buttons} display="flex" alignItems="center" justifyContent="center">
                                 <ActionButton
                                     loading={isPlacingBid}
@@ -243,7 +242,7 @@ export function MakeOfferDialog(props: MakeOfferDialogProps) {
                                         )}
                                 </ActionButton>
                             </Box>
-                        </EthereumWalletConnectedBoundary>
+                        </WalletConnectedBoundary>
                     </CardActions>
                 </Card>
             </DialogContent>
diff --git a/packages/mask/src/plugins/CryptoartAI/SNSAdaptor/OfferTab.tsx b/packages/mask/src/plugins/CryptoartAI/SNSAdaptor/OfferTab.tsx
index 3bb4e55b9d80..6901069c459f 100644
--- a/packages/mask/src/plugins/CryptoartAI/SNSAdaptor/OfferTab.tsx
+++ b/packages/mask/src/plugins/CryptoartAI/SNSAdaptor/OfferTab.tsx
@@ -1,6 +1,7 @@
 import { useMemo } from 'react'
 import { Box, Button, Table, TableBody, TableCell, TableHead, TableRow, Typography } from '@mui/material'
-import { useChainId } from '@masknet/web3-shared-evm'
+import { useChainId } from '@masknet/plugin-infra/web3'
+import { NetworkPluginID } from '@masknet/web3-shared-base'
 import { makeStyles } from '@masknet/theme'
 import { useI18N } from '../../../utils'
 import { CollectibleState } from '../hooks/useCollectibleState'
@@ -53,7 +54,7 @@ const useStyles = makeStyles()((theme) => {
 export function OfferTab() {
     const { t } = useI18N()
     const { classes } = useStyles()
-    const chainId = useChainId()
+    const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
     const { asset, offers } = CollectibleState.useContainer()
 
     const assetSource = useMemo(() => {
diff --git a/packages/mask/src/plugins/CryptoartAI/SNSAdaptor/OrderRow.tsx b/packages/mask/src/plugins/CryptoartAI/SNSAdaptor/OrderRow.tsx
index fd7e2f1cd8c4..11e74366148f 100644
--- a/packages/mask/src/plugins/CryptoartAI/SNSAdaptor/OrderRow.tsx
+++ b/packages/mask/src/plugins/CryptoartAI/SNSAdaptor/OrderRow.tsx
@@ -72,7 +72,7 @@ export function OrderRow({ event, chainId }: IRowProps) {
                     target="_blank"
                     className={classes.account}
                     rel="noopener noreferrer">
-                    <Avatar src={event.avatorPath} className={classes.avatar} />
+                    <Avatar src={event.avatarPath} className={classes.avatar} />
                     <Typography className={classes.accountName} variant="body2">
                         <Account
                             username={truncate(event.operatorName, {
diff --git a/packages/mask/src/plugins/CryptoartAI/SNSAdaptor/TokenTab.tsx b/packages/mask/src/plugins/CryptoartAI/SNSAdaptor/TokenTab.tsx
index 1fe543694b1f..3ba515b2cdbb 100644
--- a/packages/mask/src/plugins/CryptoartAI/SNSAdaptor/TokenTab.tsx
+++ b/packages/mask/src/plugins/CryptoartAI/SNSAdaptor/TokenTab.tsx
@@ -5,10 +5,12 @@ import { useI18N } from '../../../utils'
 import { CollectibleTab } from './CollectibleTab'
 import { CollectibleState } from '../hooks/useCollectibleState'
 import { FormattedAddress } from '@masknet/shared'
-import { resolveAddressLinkOnExplorer, getChainName, useChainId, formatEthereumAddress } from '@masknet/web3-shared-evm'
+import { ChainId, chainResolver, explorerResolver, formatEthereumAddress } from '@masknet/web3-shared-evm'
 import { Markdown } from '../../Snapshot/SNSAdaptor/Markdown'
 import { Account } from './Account'
 import { resolveWebLinkOnCryptoartAI } from '../pipes'
+import { NetworkPluginID } from '@masknet/web3-shared-base'
+import { useChainId } from '@masknet/plugin-infra/web3'
 
 const useStyles = makeStyles()((theme) => {
     return {
@@ -65,7 +67,7 @@ export interface TokenTabProps {}
 export function TokenTab(props: TokenTabProps) {
     const { t } = useI18N()
     const { classes } = useStyles()
-    const chainId = useChainId()
+    const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
     const { token, asset } = CollectibleState.useContainer()
 
     const assetSource = useMemo(() => {
@@ -147,7 +149,7 @@ export function TokenTab(props: TokenTabProps) {
                 <Box className={classes.chain_row}>
                     <Typography variant="body2">{t('plugin_collectible_contract_address')}</Typography>
                     <Link
-                        href={resolveAddressLinkOnExplorer(chainId, token?.contractAddress ?? '')}
+                        href={explorerResolver.addressLink(chainId ?? ChainId.Mainnet, token?.contractAddress ?? '')}
                         target="_blank"
                         rel="noopener noreferrer">
                         <Typography variant="body2">
@@ -167,7 +169,7 @@ export function TokenTab(props: TokenTabProps) {
                 </Box>
                 <Box className={classes.chain_row}>
                     <Typography variant="body2">{t('plugin_collectible_block_chain')}</Typography>
-                    <Typography variant="body2">{getChainName(chainId)}</Typography>
+                    <Typography variant="body2">{chainResolver.chainName(chainId)}</Typography>
                 </Box>
             </Box>
         </CollectibleTab>
diff --git a/packages/mask/src/plugins/CryptoartAI/apis/index.ts b/packages/mask/src/plugins/CryptoartAI/apis/index.ts
index dc1aed1c45cb..91c501268396 100644
--- a/packages/mask/src/plugins/CryptoartAI/apis/index.ts
+++ b/packages/mask/src/plugins/CryptoartAI/apis/index.ts
@@ -48,7 +48,7 @@ export async function getAsset(tokenId: string, chainId?: ChainId) {
                       {
                           ownerAddress: fetchResponse.data.creatorInfo.ethAddress,
                           ownerName: fetchResponse.data.creatorInfo.username,
-                          ownerAvator: fetchResponse.data.creatorInfo.avatorPath,
+                          ownerAvatar: fetchResponse.data.creatorInfo.avatarPath,
                           ownerRoleType: fetchResponse.data.creatorInfo.roleType,
                       },
                   ]
diff --git a/packages/mask/src/plugins/CryptoartAI/constants.ts b/packages/mask/src/plugins/CryptoartAI/constants.ts
index cd8cff989f6e..7b3e231b9e30 100644
--- a/packages/mask/src/plugins/CryptoartAI/constants.ts
+++ b/packages/mask/src/plugins/CryptoartAI/constants.ts
@@ -1,5 +1,6 @@
 import { PluginId } from '@masknet/plugin-infra'
-import { ChainId, ZERO_ADDRESS } from '@masknet/web3-shared-evm'
+import { FungibleToken, TokenType } from '@masknet/web3-shared-base'
+import { ChainId, SchemaType, ZERO_ADDRESS } from '@masknet/web3-shared-evm'
 
 export const PLUGIN_NAME = 'CRYPTOART.AI'
 export const PLUGIN_DESCRIPTION = 'The decentralized world of CryptoArt.'
@@ -12,13 +13,15 @@ export const mainNetwork = {
     hostname: 'cryptoart.ai',
     endpoint: 'https://api.cryptoart.ai',
     paymentToken: {
-        type: 0,
+        id: ZERO_ADDRESS,
+        schema: SchemaType.Native,
+        type: TokenType.Fungible,
         chainId: ChainId.Mainnet,
         address: ZERO_ADDRESS,
         decimals: 18,
         name: 'Ether',
         symbol: 'ETH',
-    },
+    } as FungibleToken<ChainId, SchemaType>,
 }
 
 export const testNetwork = {
@@ -26,11 +29,13 @@ export const testNetwork = {
     hostname: 'testweb.cryptoart.ai',
     endpoint: 'https://apitest.cryptoart.ai',
     paymentToken: {
-        type: 0,
+        id: ZERO_ADDRESS,
+        schema: SchemaType.Native,
+        type: TokenType.Fungible,
         chainId: ChainId.Kovan,
         address: ZERO_ADDRESS,
         decimals: 18,
         name: 'Kovan Ether',
         symbol: 'KOV',
-    },
+    } as FungibleToken<ChainId, SchemaType>,
 }
diff --git a/packages/mask/src/plugins/CryptoartAI/hooks/useAsset.ts b/packages/mask/src/plugins/CryptoartAI/hooks/useAsset.ts
index 606a65cb4a59..b819c8919083 100644
--- a/packages/mask/src/plugins/CryptoartAI/hooks/useAsset.ts
+++ b/packages/mask/src/plugins/CryptoartAI/hooks/useAsset.ts
@@ -1,8 +1,9 @@
-import { useAccount, useChainId, useTokenConstants, isSameAddress } from '@masknet/web3-shared-evm'
 import { useAsyncRetry } from 'react-use'
+import { isSameAddress, NetworkPluginID } from '@masknet/web3-shared-base'
+import { useTokenConstants } from '@masknet/web3-shared-evm'
+import { useAccount, useChainId } from '@masknet/plugin-infra/web3'
 import { toTokenIdentifier } from '../utils'
 import type { Token } from '../types'
-
 import { getAsset } from '../apis'
 
 interface OwnerProps {
@@ -10,8 +11,8 @@ interface OwnerProps {
 }
 
 export function useAsset(token?: Token) {
-    const account = useAccount()
-    const chainId = useChainId()
+    const account = useAccount(NetworkPluginID.PLUGIN_EVM)
+    const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
     const { WNATIVE_ADDRESS } = useTokenConstants()
 
     return useAsyncRetry(async () => {
diff --git a/packages/mask/src/plugins/CryptoartAI/hooks/useCryptoArtAI_Contract.ts b/packages/mask/src/plugins/CryptoartAI/hooks/useCryptoArtAI_Contract.ts
index 7bff90145df4..bf03f5968af1 100644
--- a/packages/mask/src/plugins/CryptoartAI/hooks/useCryptoArtAI_Contract.ts
+++ b/packages/mask/src/plugins/CryptoartAI/hooks/useCryptoArtAI_Contract.ts
@@ -5,19 +5,26 @@ import CANFTMarket_ABI from '@masknet/web3-contracts/abis/CryptoArtAICANFTMarket
 import type { CryptoArtAIKnownOriginDigitalAssetV2 } from '@masknet/web3-contracts/types/CryptoArtAIKnownOriginDigitalAssetV2'
 import type { CryptoArtAIArtistAcceptingBidsV2 } from '@masknet/web3-contracts/types/CryptoArtAIArtistAcceptingBidsV2'
 import type { CryptoArtAICANFTMarket } from '@masknet/web3-contracts/types/CryptoArtAICANFTMarket'
-import { useContract, useCryptoArtAIConstants } from '@masknet/web3-shared-evm'
+import { ChainId, useCryptoArtAIConstants } from '@masknet/web3-shared-evm'
+import { useContract } from '@masknet/plugin-infra/web3-evm'
 
-export function useCryptoArtAI_Contract() {
+export function useCryptoArtAI_Contract(chainId?: ChainId) {
     const { KNOWN_ORIGIN_DIGITAL_ASSET_V2, ARTIST_ACCEPTING_BIDS_V2, CANFT_MARKET } = useCryptoArtAIConstants()
     const KnownOriginDigitalAssetV2_CONTRACT = useContract<CryptoArtAIKnownOriginDigitalAssetV2>(
+        chainId,
         KNOWN_ORIGIN_DIGITAL_ASSET_V2,
         KnownOriginDigitalAssetV2_ABI as AbiItem[],
     )
     const ArtistAcceptingBidsV2_CONTRACT = useContract<CryptoArtAIArtistAcceptingBidsV2>(
+        chainId,
         ARTIST_ACCEPTING_BIDS_V2,
         ArtistAcceptingBidsV2_ABI as AbiItem[],
     )
-    const CANFTMarket_CONTRACT = useContract<CryptoArtAICANFTMarket>(CANFT_MARKET, CANFTMarket_ABI as AbiItem[])
+    const CANFTMarket_CONTRACT = useContract<CryptoArtAICANFTMarket>(
+        chainId,
+        CANFT_MARKET,
+        CANFTMarket_ABI as AbiItem[],
+    )
 
     return {
         knownOriginDigitalAssetV2_contract: KnownOriginDigitalAssetV2_CONTRACT,
diff --git a/packages/mask/src/plugins/CryptoartAI/hooks/useEvents.ts b/packages/mask/src/plugins/CryptoartAI/hooks/useEvents.ts
index a4c62b390637..75de72166bad 100644
--- a/packages/mask/src/plugins/CryptoartAI/hooks/useEvents.ts
+++ b/packages/mask/src/plugins/CryptoartAI/hooks/useEvents.ts
@@ -1,12 +1,13 @@
 import { useAsyncRetry } from 'react-use'
-import { useChainId } from '@masknet/web3-shared-evm'
+import { useChainId } from '@masknet/plugin-infra/web3'
+import { NetworkPluginID } from '@masknet/web3-shared-base'
 import type { Token } from '../types'
 import { toTokenIdentifier } from '../utils'
 
 import { getEvents } from '../apis'
 
 export function useEvents(token?: Token) {
-    const chainId = useChainId()
+    const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
     return useAsyncRetry(async () => {
         if (!token) {
             return {
@@ -19,7 +20,7 @@ export function useEvents(token?: Token) {
         return {
             data: assetEvents.map((event: any) => {
                 return {
-                    avatorPath: event.avatorPath,
+                    avatarPath: event.avatarPath,
                     award: event.award,
                     createTime: event.createTime,
                     operatorAddress: event.operatorAddress,
diff --git a/packages/mask/src/plugins/CryptoartAI/hooks/useOrders.ts b/packages/mask/src/plugins/CryptoartAI/hooks/useOrders.ts
index 4f76cf24a6f2..21a4a4aff0f9 100644
--- a/packages/mask/src/plugins/CryptoartAI/hooks/useOrders.ts
+++ b/packages/mask/src/plugins/CryptoartAI/hooks/useOrders.ts
@@ -1,12 +1,13 @@
 import { useAsyncRetry } from 'react-use'
-import { useChainId } from '@masknet/web3-shared-evm'
+import { useChainId } from '@masknet/plugin-infra/web3'
+import { NetworkPluginID } from '@masknet/web3-shared-base'
 import { OrderSide } from 'opensea-js/lib/types'
 import type { Token } from '../types'
 import { toTokenIdentifier } from '../utils'
 import { getOrders } from '../apis'
 
 export function useOrders(token?: Token, side = OrderSide.Buy) {
-    const chainId = useChainId()
+    const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
     return useAsyncRetry(async () => {
         if (!token) return
 
diff --git a/packages/mask/src/plugins/CryptoartAI/hooks/usePlaceBidCallback.ts b/packages/mask/src/plugins/CryptoartAI/hooks/usePlaceBidCallback.ts
index 8b8c1e965ac5..5af17d182c0a 100644
--- a/packages/mask/src/plugins/CryptoartAI/hooks/usePlaceBidCallback.ts
+++ b/packages/mask/src/plugins/CryptoartAI/hooks/usePlaceBidCallback.ts
@@ -1,13 +1,14 @@
-import type { NonPayableTx } from '@masknet/web3-contracts/types/types'
-import { toFixed } from '@masknet/web3-shared-base'
-import { TransactionEventType, useAccount, useChainId, ZERO_ADDRESS } from '@masknet/web3-shared-evm'
 import { useAsyncFn } from 'react-use'
+import { ZERO_ADDRESS, TransactionEventType } from '@masknet/web3-shared-evm'
+import type { NonPayableTx } from '@masknet/web3-contracts/types/types'
 import { useCryptoArtAI_Contract } from './useCryptoArtAI_Contract'
+import { NetworkPluginID, toFixed } from '@masknet/web3-shared-base'
+import { useAccount, useChainId } from '@masknet/plugin-infra/web3'
 
 export function usePlaceBidCallback(is24Auction: boolean, editionNumber: string) {
-    const account = useAccount()
-    const chainId = useChainId()
-    const { artistAcceptingBidsV2_contract, cANFTMarket_contract } = useCryptoArtAI_Contract()
+    const account = useAccount(NetworkPluginID.PLUGIN_EVM)
+    const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
+    const { artistAcceptingBidsV2_contract, cANFTMarket_contract } = useCryptoArtAI_Contract(chainId)
 
     return useAsyncFn(
         async (priceInWei: number) => {
diff --git a/packages/mask/src/plugins/CryptoartAI/hooks/usePurchaseCallback.ts b/packages/mask/src/plugins/CryptoartAI/hooks/usePurchaseCallback.ts
index 019e818b1183..f1e50ef197d6 100644
--- a/packages/mask/src/plugins/CryptoartAI/hooks/usePurchaseCallback.ts
+++ b/packages/mask/src/plugins/CryptoartAI/hooks/usePurchaseCallback.ts
@@ -1,13 +1,14 @@
-import type { NonPayableTx } from '@masknet/web3-contracts/types/types'
-import { toFixed } from '@masknet/web3-shared-base'
-import { TransactionEventType, useAccount, useChainId } from '@masknet/web3-shared-evm'
 import { useAsyncFn } from 'react-use'
+import type { NonPayableTx } from '@masknet/web3-contracts/types/types'
+import { TransactionEventType } from '@masknet/web3-shared-evm'
 import { useCryptoArtAI_Contract } from './useCryptoArtAI_Contract'
+import { NetworkPluginID, toFixed } from '@masknet/web3-shared-base'
+import { useAccount, useChainId } from '@masknet/plugin-infra/web3'
 
 export function usePurchaseCallback(editionNumber: string, priceInWei: number) {
-    const account = useAccount()
-    const chainId = useChainId()
-    const { knownOriginDigitalAssetV2_contract } = useCryptoArtAI_Contract()
+    const account = useAccount(NetworkPluginID.PLUGIN_EVM)
+    const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
+    const { knownOriginDigitalAssetV2_contract } = useCryptoArtAI_Contract(chainId)
 
     return useAsyncFn(async () => {
         if (!knownOriginDigitalAssetV2_contract) return
diff --git a/packages/mask/src/plugins/EVM/UI/Dashboard/index.tsx b/packages/mask/src/plugins/EVM/UI/Dashboard/index.tsx
deleted file mode 100644
index c9626e315b9d..000000000000
--- a/packages/mask/src/plugins/EVM/UI/Dashboard/index.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import type { Plugin } from '@masknet/plugin-infra'
-import { base } from '../../base'
-import { Web3UI } from '../Web3UI'
-import { setupStorage, StorageDefaultValue } from '../../storage'
-import { FortmaticProviderBridge } from '../components/FortmaticProviderBridge'
-
-const sns: Plugin.SNSAdaptor.Definition = {
-    ...base,
-    init(signal, context) {
-        setupStorage(context.createKVStorage('memory', StorageDefaultValue))
-    },
-    Web3UI,
-    Web3State: {},
-    GlobalInjection() {
-        return (
-            <>
-                <FortmaticProviderBridge />
-            </>
-        )
-    },
-}
-
-export default sns
diff --git a/packages/mask/src/plugins/EVM/UI/SNSAdaptor/index.tsx b/packages/mask/src/plugins/EVM/UI/SNSAdaptor/index.tsx
deleted file mode 100644
index 73e575532b10..000000000000
--- a/packages/mask/src/plugins/EVM/UI/SNSAdaptor/index.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import type { Plugin } from '@masknet/plugin-infra'
-import { base } from '../../base'
-import { Web3UI } from '../Web3UI'
-import { setupStorage, StorageDefaultValue } from '../../storage'
-import { InjectedProviderBridge } from '../components/InjectedProviderBridge'
-import { FortmaticProviderBridge } from '../components/FortmaticProviderBridge'
-
-const sns: Plugin.SNSAdaptor.Definition = {
-    ...base,
-    init(signal, context) {
-        setupStorage(context.createKVStorage('memory', StorageDefaultValue))
-    },
-    Web3UI,
-    Web3State: {},
-    GlobalInjection() {
-        return (
-            <>
-                <InjectedProviderBridge type="ethereum" />
-                <InjectedProviderBridge type="coin98" />
-                <FortmaticProviderBridge />
-            </>
-        )
-    },
-}
-
-export default sns
diff --git a/packages/mask/src/plugins/EVM/UI/Web3State/createGetLatestBalance.ts b/packages/mask/src/plugins/EVM/UI/Web3State/createGetLatestBalance.ts
deleted file mode 100644
index 44e8a0cb8449..000000000000
--- a/packages/mask/src/plugins/EVM/UI/Web3State/createGetLatestBalance.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { ChainId, Web3ProviderType, createWeb3 } from '@masknet/web3-shared-evm'
-
-export function createGetLatestBalance(context: Web3ProviderType) {
-    return (chainId: ChainId, account: string) => {
-        const web3 = createWeb3(context.request, () => ({
-            chainId,
-        }))
-        return web3.eth.getBalance(account)
-    }
-}
diff --git a/packages/mask/src/plugins/EVM/UI/Web3State/createNonFungibleToken.ts b/packages/mask/src/plugins/EVM/UI/Web3State/createNonFungibleToken.ts
deleted file mode 100644
index 042d9a508c93..000000000000
--- a/packages/mask/src/plugins/EVM/UI/Web3State/createNonFungibleToken.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import { TokenType, Web3Plugin } from '@masknet/plugin-infra/web3'
-import type { ERC721TokenDetailed } from '@masknet/web3-shared-evm'
-
-export function createNonFungibleToken(token: ERC721TokenDetailed) {
-    return {
-        ...token,
-        id: `${token.contractDetailed.address}_${token.tokenId}`,
-        tokenId: token.tokenId,
-        chainId: token.contractDetailed.chainId,
-        type: TokenType.NonFungible,
-        name: token.info.name ?? `${token.contractDetailed.name} ${token.tokenId}`,
-        description: token.info.description ?? '',
-        owner: token.info.owner,
-        contract: {
-            ...token.contractDetailed,
-            type: TokenType.NonFungible,
-            id: token.contractDetailed.address,
-        },
-        metadata: {
-            name: token.info.name ?? `${token.contractDetailed.name} ${token.tokenId}`,
-            description: token.info.description ?? '',
-            mediaType: 'Unknown',
-            iconURL: token.contractDetailed.iconURL,
-            assetURL: token.info.mediaUrl,
-        },
-    } as Web3Plugin.NonFungibleToken
-}
diff --git a/packages/mask/src/plugins/EVM/UI/Web3State/getAssetsFn.ts b/packages/mask/src/plugins/EVM/UI/Web3State/getAssetsFn.ts
deleted file mode 100644
index 31feb1eb43ff..000000000000
--- a/packages/mask/src/plugins/EVM/UI/Web3State/getAssetsFn.ts
+++ /dev/null
@@ -1,239 +0,0 @@
-import {
-    getRegisteredWeb3Networks,
-    NetworkPluginID,
-    Pageable,
-    Pagination,
-    TokenType,
-    Web3Plugin,
-} from '@masknet/plugin-infra/web3'
-import BalanceCheckerABI from '@masknet/web3-contracts/abis/BalanceChecker.json'
-import ERC721ABI from '@masknet/web3-contracts/abis/ERC721.json'
-import type { ERC721 } from '@masknet/web3-contracts/types/ERC721'
-import { TokenPrice } from '@masknet/web3-providers'
-import { pow10 } from '@masknet/web3-shared-base'
-import {
-    ChainId,
-    createContract,
-    createExternalProvider,
-    createNativeToken,
-    CurrencyType,
-    ERC721TokenDetailed,
-    formatEthereumAddress,
-    FungibleAssetProvider,
-    getCoinGeckoCoinId,
-    getERC721TokenAssetFromChain,
-    getERC721TokenDetailedFromChain,
-    getEthereumConstants,
-    isSameAddress,
-    PriceRecord,
-    Web3ProviderType,
-} from '@masknet/web3-shared-evm'
-import BigNumber from 'bignumber.js'
-import { uniqBy } from 'lodash-unified'
-import Web3 from 'web3'
-import type { AbiItem } from 'web3-utils'
-import { makeSortAssertWithoutChainFn } from '../../utils/token'
-import { createGetLatestBalance } from './createGetLatestBalance'
-import { createNonFungibleToken } from './createNonFungibleToken'
-
-// tokens unavailable neither from api or balance checker.
-// https://forum.conflux.fun/t/how-to-upvote-debank-proposal-for-conflux-espace-integration/13935
-const TokenUnavailableFromDebankList = [ChainId.Conflux]
-
-export const getFungibleAssetsFn =
-    (context: Web3ProviderType) =>
-    async (address: string, providerType: string, network: Web3Plugin.NetworkDescriptor, pagination?: Pagination) => {
-        const chainId = context.chainId.getCurrentValue()
-        const wallet = context.wallets.getCurrentValue().find((x) => isSameAddress(x.address, address))
-        const networks = getRegisteredWeb3Networks().filter(
-            (x) => NetworkPluginID.PLUGIN_EVM === x.networkSupporterPluginID && x.isMainnet,
-        )
-        const supportedNetworkIds = networks.map((x) => x.chainId)
-        const trustedTokens = uniqBy(
-            context.erc20Tokens
-                .getCurrentValue()
-                .filter((x) => wallet?.erc20_token_whitelist.has(formatEthereumAddress(x.address))),
-            (x) => `${x.chainId}_${formatEthereumAddress(x.address)}`,
-        )
-
-        const web3 = new Web3(
-            createExternalProvider(context.request, context.getSendOverrides, context.getRequestOptions),
-        )
-        const { BALANCE_CHECKER_ADDRESS } = getEthereumConstants(chainId)
-        const dataFromProvider = await context.getAssetsList(address, FungibleAssetProvider.DEBANK)
-        const assetsFromProvider = dataFromProvider
-            .map<Web3Plugin.Asset<Web3Plugin.FungibleToken>>((x) => ({
-                id: x.token.address,
-                chainId: x.token.chainId,
-                balance: x.balance,
-                price: x.price,
-                value: x.value,
-                logoURI: x.logoURI,
-                token: {
-                    ...x.token,
-                    name: x.token.name ?? 'Unknown Token',
-                    symbol: x.token.symbol ?? 'Unknown',
-                    id: x.token.address,
-                    chainId: x.token.chainId,
-                    type: TokenType.Fungible,
-                },
-            }))
-            .filter((x) => supportedNetworkIds.includes(x.chainId))
-
-        const balanceCheckerContract = createContract(
-            web3,
-            BALANCE_CHECKER_ADDRESS ?? '',
-            BalanceCheckerABI as AbiItem[],
-        )
-
-        let balanceList: string[] = []
-
-        if (BALANCE_CHECKER_ADDRESS && balanceCheckerContract) {
-            try {
-                balanceList = await balanceCheckerContract?.methods
-                    .balances(
-                        [address],
-                        trustedTokens.map((x) => x.address),
-                    )
-                    .call({
-                        from: address,
-                    })
-                if (balanceList.length !== trustedTokens?.length) return assetsFromProvider
-            } catch {
-                balanceList = []
-            }
-        }
-
-        const assetFromChain = balanceList.map(
-            (balance, idx): Web3Plugin.Asset<Web3Plugin.FungibleToken> => ({
-                id: trustedTokens[idx].address,
-                chainId,
-                token: {
-                    ...trustedTokens[idx],
-                    id: trustedTokens[idx].address,
-                    type: TokenType.Fungible,
-                    name: trustedTokens[idx].name ?? 'Unknown Token',
-                    symbol: trustedTokens[idx].symbol ?? 'Unknown',
-                },
-                balance,
-            }),
-        )
-
-        const allTokens = [...assetsFromProvider, ...assetFromChain]
-
-        const getBalance = createGetLatestBalance(context)
-        const allRequest = TokenUnavailableFromDebankList.map(async (x) => {
-            const balance = await getBalance(x, address)
-            const coinId = getCoinGeckoCoinId(x)
-            const price = (await TokenPrice.getNativeTokenPrice([coinId], CurrencyType.USD))[coinId]
-
-            return {
-                chainId: x,
-                price,
-                balance,
-            }
-        })
-
-        const tokenUnavailableFromDebankResults = (await Promise.allSettled(allRequest))
-            .map((x) => (x.status === 'fulfilled' ? x.value : null))
-            .filter((x) => Boolean(x)) as Array<{
-            chainId: ChainId
-            balance: string
-            price: PriceRecord
-        }>
-
-        const nativeTokens: Array<Web3Plugin.Asset<Web3Plugin.FungibleToken>> = networks
-            .filter(
-                (t) =>
-                    t.isMainnet &&
-                    !allTokens.find(
-                        (x) =>
-                            x.token.chainId === t.chainId &&
-                            isSameAddress(x.token.id, createNativeToken(x.chainId).address),
-                    ),
-            )
-            .map((x) => {
-                const nativeToken = createNativeToken(x.chainId)
-                const result = tokenUnavailableFromDebankResults.find((y) => y.chainId === x.chainId)
-                return {
-                    id: nativeToken.address,
-                    chainId: x.chainId,
-                    token: { ...nativeToken, id: nativeToken.address!, type: TokenType.Fungible },
-                    balance: result?.balance ?? '0',
-                    price: result?.price,
-                    value: {
-                        [CurrencyType.USD]: new BigNumber(result?.balance ?? '0')
-                            .dividedBy(pow10(nativeToken.decimals))
-                            .multipliedBy(result ? result.price[CurrencyType.USD] : '0')
-                            .toFixed(),
-                    },
-                }
-            })
-
-        return uniqBy(
-            [...nativeTokens, ...allTokens],
-            (x) => `${x.token.chainId}_${formatEthereumAddress(x.token.id)}`,
-        ).sort(makeSortAssertWithoutChainFn())
-    }
-
-export const getNonFungibleTokenFn =
-    (context: Web3ProviderType) =>
-    async (
-        address: string,
-        pagination: Pagination,
-        providerType?: string,
-        network?: Web3Plugin.NetworkDescriptor,
-    ): Promise<Pageable<Web3Plugin.NonFungibleToken>> => {
-        const socket = await context.providerSocket
-        let tokenInDb: ERC721TokenDetailed[] = []
-        // validate and show trusted erc721 token in first page
-        if (pagination?.page === 0) {
-            const trustedTokens = context.erc721Tokens.getCurrentValue()
-            const calls = trustedTokens.map(async (x) => {
-                const web3 = new Web3(
-                    createExternalProvider(
-                        context.request,
-                        () => ({
-                            ...context.getSendOverrides?.(),
-                            chainId: x.contractDetailed.chainId,
-                        }),
-                        context.getRequestOptions,
-                    ),
-                )
-                const contract = createContract<ERC721>(web3, x.contractDetailed.address, ERC721ABI as AbiItem[])
-                if (!contract) return null
-                const tokenDetailed = await getERC721TokenDetailedFromChain(x.contractDetailed, contract, x.tokenId)
-                const info = await getERC721TokenAssetFromChain(tokenDetailed?.info.tokenURI)
-                if (tokenDetailed && info)
-                    tokenDetailed.info = {
-                        ...info,
-                        ...tokenDetailed.info,
-                        hasTokenDetailed: true,
-                        name: info.name ?? tokenDetailed.info.name,
-                    }
-                return tokenDetailed
-            })
-
-            const fromChain = await Promise.all(calls)
-            tokenInDb = fromChain.filter(Boolean) as any[]
-        }
-
-        const socketId = `mask.fetchNonFungibleCollectibleAsset_${address}`
-        socket.send({
-            id: socketId,
-            method: 'mask.fetchNonFungibleCollectibleAsset',
-            params: { address, pageSize: 40 },
-        })
-
-        const tokenFromProvider = socket.getResult<ERC721TokenDetailed>(socketId)
-        const allData: Web3Plugin.NonFungibleToken[] = [...tokenInDb, ...tokenFromProvider]
-            .map(createNonFungibleToken)
-            .filter((x) => isSameAddress(x.owner, address))
-            .filter((x) => !network || x.chainId === network.chainId)
-
-        return {
-            hasNextPage: tokenFromProvider.length === pagination?.size ?? 20,
-            currentPage: pagination?.page ?? 0,
-            data: allData,
-        }
-    }
diff --git a/packages/mask/src/plugins/EVM/UI/Web3State/index.ts b/packages/mask/src/plugins/EVM/UI/Web3State/index.ts
deleted file mode 100644
index d1c19308641b..000000000000
--- a/packages/mask/src/plugins/EVM/UI/Web3State/index.ts
+++ /dev/null
@@ -1,158 +0,0 @@
-import Ens from 'ethjs-ens'
-import type { Web3Plugin } from '@masknet/plugin-infra/web3'
-import {
-    ChainId,
-    formatBalance,
-    formatCurrency,
-    formatEthereumAddress,
-    getChainDetailed,
-    isChainIdValid,
-    isSameAddress,
-    isValidAddress,
-    NetworkType,
-    NonFungibleAssetProvider,
-    resolveAddressLinkOnExplorer,
-    resolveBlockLinkOnExplorer,
-    resolveChainColor,
-    resolveChainFullName,
-    resolveChainName,
-    resolveCollectibleLink,
-    resolveTransactionLinkOnExplorer,
-    Web3ProviderType,
-    isValidDomain,
-    resolveDomainLink,
-    formatDomainName,
-    isZeroAddress,
-    createWeb3,
-    createExternalProvider,
-} from '@masknet/web3-shared-evm'
-import { getStorage } from '../../storage'
-
-import { getFungibleAssetsFn, getNonFungibleTokenFn } from './getAssetsFn'
-import { createGetLatestBalance } from './createGetLatestBalance'
-const ZERO_X_ERROR_ADDRESS = '0x'
-
-export function fixWeb3State(state?: Web3Plugin.ObjectCapabilities.Capabilities, context?: Web3ProviderType) {
-    if (!state || !context) return
-
-    state.Shared = state.Shared ?? {
-        allowTestnet: context.allowTestnet,
-        chainId: context.chainId,
-        account: context.account,
-        networkType: context.networkType,
-        providerType: context.providerType,
-        walletPrimary: context.walletPrimary,
-        wallets: context.wallets,
-    }
-    state.Asset = state.Asset ?? {
-        getFungibleAssets: getFungibleAssetsFn(context),
-        getNonFungibleAssets: getNonFungibleTokenFn(context),
-    }
-    state.NameService = state.NameService ?? {
-        lookup: async (domain: string) => {
-            const chainId = context.chainId.getCurrentValue()
-            const network = context.networkType.getCurrentValue()
-
-            // Only support Ethereum on evm
-            if (network !== NetworkType.Ethereum) return undefined
-
-            const domainAddressBook = getStorage().domainAddressBook.value
-
-            const cacheAddress = domainAddressBook[chainId]?.[domain]
-            if (cacheAddress && isValidAddress(cacheAddress)) return cacheAddress
-
-            const address = await new Ens({
-                provider: createExternalProvider(context.request, context.getSendOverrides, context.getRequestOptions),
-                network: chainId,
-            }).lookup(domain)
-
-            if (isZeroAddress(address) || isSameAddress(address, ZERO_X_ERROR_ADDRESS) || !isValidAddress(address)) {
-                return undefined
-            }
-
-            if (address)
-                await getStorage().domainAddressBook.setValue({
-                    ...domainAddressBook,
-                    [chainId]: {
-                        ...domainAddressBook[chainId],
-                        ...{ [address]: domain, [domain]: address },
-                    },
-                })
-
-            return address
-        },
-        reverse: async (address: string) => {
-            if (!isValidAddress(address)) return undefined
-            const chainId = context.chainId.getCurrentValue()
-            const network = context.networkType.getCurrentValue()
-
-            // Only support Ethereum on evm
-            if (network !== NetworkType.Ethereum) return undefined
-
-            const domainAddressBook = getStorage().domainAddressBook.value
-            const cacheDomain = domainAddressBook[chainId]?.[address]
-            if (cacheDomain) return cacheDomain
-
-            try {
-                const domain = await new Ens({
-                    provider: createExternalProvider(
-                        context.request,
-                        context.getSendOverrides,
-                        context.getRequestOptions,
-                    ),
-                    network: chainId,
-                }).reverse(address)
-
-                if (isZeroAddress(domain) || isSameAddress(domain, ZERO_X_ERROR_ADDRESS)) {
-                    return undefined
-                }
-
-                if (domain)
-                    await getStorage().domainAddressBook.setValue({
-                        ...domainAddressBook,
-                        [chainId]: {
-                            ...domainAddressBook[chainId],
-                            ...{ [address]: domain, [domain]: address },
-                        },
-                    })
-
-                return domain
-            } catch {
-                return undefined
-            }
-        },
-    }
-    state.Utils = state.Utils ?? {
-        getLatestBalance: createGetLatestBalance(context),
-        getLatestBlockNumber: (chainId: ChainId) => {
-            const web3 = createWeb3(context.request, () => ({
-                chainId,
-            }))
-            return web3.eth.getBlockNumber()
-        },
-
-        getChainDetailed,
-        isChainIdValid,
-
-        formatAddress: formatEthereumAddress,
-        formatCurrency,
-        formatBalance,
-
-        resolveChainName,
-        resolveChainFullName,
-        resolveChainColor,
-
-        resolveTransactionLink: resolveTransactionLinkOnExplorer,
-        resolveAddressLink: resolveAddressLinkOnExplorer,
-        resolveBlockLink: resolveBlockLinkOnExplorer,
-        isValidDomain,
-        resolveDomainLink,
-        formatDomainName,
-        resolveNonFungibleTokenLink: (chainId: ChainId, address: string, tokenId: string) =>
-            resolveCollectibleLink(chainId as ChainId, NonFungibleAssetProvider.OPENSEA, {
-                contractDetailed: { address },
-                tokenId,
-            } as unknown as any),
-    }
-    return state
-}
diff --git a/packages/mask/src/plugins/EVM/UI/Web3UI/index.tsx b/packages/mask/src/plugins/EVM/UI/Web3UI/index.tsx
deleted file mode 100644
index fd596bf68290..000000000000
--- a/packages/mask/src/plugins/EVM/UI/Web3UI/index.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import type { Web3Plugin } from '@masknet/plugin-infra/web3'
-import { NetworkIconClickBait } from '../components/NetworkIconClickBait'
-import { ProviderIconClickBait } from '../components/ProviderIconClickBait'
-
-export const Web3UI: Web3Plugin.UI.UI = {
-    SelectNetworkMenu: {
-        NetworkIconClickBait,
-    },
-    SelectProviderDialog: {
-        ProviderIconClickBait,
-    },
-}
diff --git a/packages/mask/src/plugins/EVM/UI/components/FortmaticProviderBridge.tsx b/packages/mask/src/plugins/EVM/UI/components/FortmaticProviderBridge.tsx
deleted file mode 100644
index e40b72649b54..000000000000
--- a/packages/mask/src/plugins/EVM/UI/components/FortmaticProviderBridge.tsx
+++ /dev/null
@@ -1,83 +0,0 @@
-import { useCallback, useEffect } from 'react'
-import { useMount } from 'react-use'
-import { first } from 'lodash-unified'
-import {
-    ChainId,
-    EthereumMethodType,
-    isFortmaticSupported,
-    ProviderType,
-    FortmaticProvider as Fortmatic,
-} from '@masknet/web3-shared-evm'
-import { NetworkPluginID, useChainId, useProviderType } from '@masknet/plugin-infra/web3'
-import { isDashboardPage, isPopupPage } from '@masknet/shared-base'
-import { EVM_Messages } from '../../messages'
-import { WalletRPC } from '../../../Wallet/messages'
-import Services from '../../../../extension/service'
-
-export interface FortmaticProviderBridgeProps {}
-
-export function FortmaticProviderBridge(props: FortmaticProviderBridgeProps) {
-    const chainId = useChainId<ChainId>(NetworkPluginID.PLUGIN_EVM)
-    const providerType = useProviderType<ProviderType>(NetworkPluginID.PLUGIN_EVM)
-
-    const onMounted = useCallback(async () => {
-        if (isDashboardPage() || isPopupPage()) return
-        if (providerType !== ProviderType.Fortmatic) return
-        const connected = await Services.Ethereum.connectFortmatic(
-            isFortmaticSupported(chainId) ? chainId : ChainId.Mainnet,
-        )
-        await WalletRPC.updateAccount({
-            account: connected.account,
-            chainId: connected.chainId,
-            providerType,
-        })
-    }, [chainId, providerType])
-
-    useEffect(() => {
-        return EVM_Messages.events.FORTMATIC_PROVIDER_RPC_REQUEST.on(async ({ payload }) => {
-            const handleResponse = (error: unknown, result?: any) => {
-                if (error) {
-                    EVM_Messages.events.FORTMATIC_PROVIDER_RPC_RESPONSE.sendToBackgroundPage({
-                        payload,
-                        error: error instanceof Error ? error : new Error(),
-                    })
-                    return
-                }
-                EVM_Messages.events.FORTMATIC_PROVIDER_RPC_RESPONSE.sendToBackgroundPage({
-                    payload,
-                    result,
-                    error: null,
-                })
-            }
-
-            const chainIdFinally = (
-                payload.method === EthereumMethodType.MASK_LOGIN_FORTMATIC ? first<ChainId>(payload.params) : chainId
-            ) as Fortmatic.ChainIdFortmatic
-            if (!chainIdFinally || !isFortmaticSupported(chainIdFinally)) throw new Error('Not supported.')
-
-            try {
-                switch (payload.method) {
-                    case EthereumMethodType.MASK_LOGIN_FORTMATIC:
-                        handleResponse(null, {
-                            chainId: chainIdFinally,
-                            accounts: await Fortmatic.login(chainIdFinally),
-                        })
-                        break
-                    case EthereumMethodType.MASK_LOGOUT_FORTMATIC:
-                        handleResponse(null, await Fortmatic.logout(chainIdFinally))
-                        break
-                    default:
-                        const provider = Fortmatic.createProvider(chainIdFinally)
-                        handleResponse(null, await provider.send(payload.method, payload.params))
-                        break
-                }
-            } catch (error) {
-                handleResponse(error)
-            }
-        })
-    }, [chainId])
-
-    useMount(onMounted)
-
-    return null
-}
diff --git a/packages/mask/src/plugins/EVM/UI/components/InjectedProviderBridge.tsx b/packages/mask/src/plugins/EVM/UI/components/InjectedProviderBridge.tsx
deleted file mode 100644
index 2c9ba648e372..000000000000
--- a/packages/mask/src/plugins/EVM/UI/components/InjectedProviderBridge.tsx
+++ /dev/null
@@ -1,69 +0,0 @@
-import { useEffect, useCallback } from 'react'
-import { useMount } from 'react-use'
-import { ProviderType, isInjectedProvider, ChainId } from '@masknet/web3-shared-evm'
-import { NetworkPluginID, useChainId, useProviderType } from '@masknet/plugin-infra/web3'
-import { isDashboardPage, isPopupPage } from '@masknet/shared-base'
-import { EVM_Messages } from '../../messages'
-import Services from '../../../../extension/service'
-import { WalletRPC } from '../../../Wallet/messages'
-import { useBridgedProvider } from '../../hooks'
-
-export interface InjectedProviderBridgeProps {
-    type: 'ethereum' | 'coin98'
-}
-
-export function InjectedProviderBridge(props: InjectedProviderBridgeProps) {
-    const chainId = useChainId<ChainId>(NetworkPluginID.PLUGIN_EVM)
-    const providerType = useProviderType<ProviderType>(NetworkPluginID.PLUGIN_EVM)
-    const bridgedProvider = useBridgedProvider(props.type)
-
-    const onMounted = useCallback(async () => {
-        if (isDashboardPage() || isPopupPage()) return
-        if (providerType !== ProviderType.Coin98) return
-        const connected = await Services.Ethereum.connectInjected()
-        await WalletRPC.updateAccount({
-            account: connected.account,
-            chainId: connected.chainId,
-            providerType,
-        })
-    }, [chainId, providerType])
-
-    useEffect(() => {
-        return EVM_Messages.events.INJECTED_PROVIDER_RPC_REQUEST.on(async ({ payload }) => {
-            try {
-                const result = await bridgedProvider.request({
-                    method: payload.method,
-                    params: payload.params,
-                })
-                EVM_Messages.events.INJECTED_PROVIDER_RPC_RESPONSE.sendToBackgroundPage({
-                    payload,
-                    result,
-                    error: null,
-                })
-            } catch (error) {
-                EVM_Messages.events.INJECTED_PROVIDER_RPC_RESPONSE.sendToBackgroundPage({
-                    payload,
-                    error: error instanceof Error ? error : new Error(),
-                })
-            }
-        })
-    }, [bridgedProvider])
-
-    useEffect(() => {
-        return bridgedProvider.on('accountsChanged', async (event) => {
-            if (!isInjectedProvider(providerType)) return
-            Services.Ethereum.notifyInjectedEvent('accountsChanged', event, providerType)
-        })
-    }, [providerType, bridgedProvider])
-
-    useEffect(() => {
-        return bridgedProvider.on('chainChanged', (event) => {
-            if (!isInjectedProvider(providerType)) return
-            Services.Ethereum.notifyInjectedEvent('chainChanged', event, providerType)
-        })
-    }, [providerType, bridgedProvider])
-
-    useMount(onMounted)
-
-    return null
-}
diff --git a/packages/mask/src/plugins/EVM/UI/components/NetworkIconClickBait.tsx b/packages/mask/src/plugins/EVM/UI/components/NetworkIconClickBait.tsx
deleted file mode 100644
index a10310cdc8c1..000000000000
--- a/packages/mask/src/plugins/EVM/UI/components/NetworkIconClickBait.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-import { useCallback, cloneElement, isValidElement } from 'react'
-import { unreachable } from '@dimensiondev/kit'
-import type { Web3Plugin } from '@masknet/plugin-infra/web3'
-import { useRemoteControlledDialog } from '@masknet/shared-base-ui'
-import { getChainIdFromNetworkType, isFortmaticSupported, NetworkType, ProviderType } from '@masknet/web3-shared-evm'
-import { WalletMessages } from '../../../Wallet/messages'
-
-export function NetworkIconClickBait({
-    network,
-    provider,
-    children,
-    onClick,
-    onSubmit,
-}: Web3Plugin.UI.NetworkIconClickBaitProps) {
-    // #region connect wallet dialog
-    const { setDialog: setConnectWalletDialog } = useRemoteControlledDialog(
-        WalletMessages.events.connectWalletDialogUpdated,
-        (ev) => {
-            if (ev.open) return
-            if (ev.result?.providerType === providerType && ev.result?.networkType === networkType)
-                onSubmit?.(network, provider, ev.result)
-        },
-    )
-    // #endregion
-
-    const providerType = provider?.type as ProviderType | undefined
-    const networkType = network.type as NetworkType
-
-    const onClickNetwork = useCallback(async () => {
-        if (!providerType) return
-
-        switch (providerType) {
-            case ProviderType.MaskWallet:
-            case ProviderType.MetaMask:
-            case ProviderType.WalletConnect:
-            case ProviderType.Coin98:
-            case ProviderType.WalletLink:
-            case ProviderType.MathWallet:
-            case ProviderType.Fortmatic:
-                setConnectWalletDialog({
-                    open: true,
-                    providerType,
-                    networkType,
-                })
-                break
-            case ProviderType.CustomNetwork:
-                throw new Error('To be implemented.')
-            default:
-                unreachable(providerType)
-        }
-        onClick?.(network, provider)
-    }, [network, provider, onClick])
-
-    if (!providerType) return null
-
-    // hide fortmatic for some networks because of incomplete supporting
-    if (providerType === ProviderType.Fortmatic && !isFortmaticSupported(getChainIdFromNetworkType(networkType)))
-        return null
-
-    return (
-        <>
-            {isValidElement<object>(children)
-                ? cloneElement(children, {
-                      ...children.props,
-                      ...{
-                          onClick: onClickNetwork,
-                      },
-                  })
-                : children}
-        </>
-    )
-}
diff --git a/packages/mask/src/plugins/EVM/UI/components/ProviderIconClickBait.tsx b/packages/mask/src/plugins/EVM/UI/components/ProviderIconClickBait.tsx
deleted file mode 100644
index 9e8e88c7f3f6..000000000000
--- a/packages/mask/src/plugins/EVM/UI/components/ProviderIconClickBait.tsx
+++ /dev/null
@@ -1,114 +0,0 @@
-import { useCallback, cloneElement, isValidElement } from 'react'
-import { unreachable } from '@dimensiondev/kit'
-import type { Web3Plugin } from '@masknet/plugin-infra/web3'
-import { openWindow, useRemoteControlledDialog } from '@masknet/shared-base-ui'
-import { isDashboardPage, isPopupPage } from '@masknet/shared-base'
-import {
-    getChainIdFromNetworkType,
-    isFortmaticSupported,
-    isInjectedProvider,
-    NetworkType,
-    ProviderType,
-    resolveProviderDownloadLink,
-} from '@masknet/web3-shared-evm'
-import { WalletMessages } from '../../../Wallet/messages'
-import { useInjectedProviderType } from '../../hooks'
-
-export function ProviderIconClickBait({
-    network,
-    provider,
-    children,
-    onClick,
-    onSubmit,
-}: Web3Plugin.UI.ProviderIconClickBaitProps) {
-    const providerType = provider.type as ProviderType
-    const networkType = network.type as NetworkType
-
-    // #region connect wallet dialog
-    const { setDialog: setConnectWalletDialog } = useRemoteControlledDialog(
-        WalletMessages.events.connectWalletDialogUpdated,
-        (ev) => {
-            if (ev.open) return
-            if (!ev.result) return
-            if (ev.result?.providerType === providerType && ev.result?.networkType === networkType)
-                onSubmit?.(network, provider, ev.result)
-        },
-    )
-    // #endregion
-
-    const injectedEthereumProviderType = useInjectedProviderType('ethereum')
-    const injectedCoin98ProviderType = useInjectedProviderType('coin98')
-
-    const onClickProvider = useCallback(async () => {
-        // open the download page
-        if (isInjectedProvider(providerType)) {
-            const isProviderAvailable =
-                providerType === ProviderType.Coin98
-                    ? providerType === injectedCoin98ProviderType
-                    : providerType === injectedEthereumProviderType
-
-            if (!isProviderAvailable) {
-                const downloadLink = resolveProviderDownloadLink(providerType)
-                openWindow(downloadLink)
-                return
-            }
-        }
-
-        // it's not necessary to open the connection dialog on popup page.
-        // it will switch to the wallet selection page directly.
-        if (isPopupPage() && providerType === ProviderType.MaskWallet) {
-            onClick?.(network, provider)
-            return
-        }
-
-        switch (providerType) {
-            case ProviderType.MaskWallet:
-            case ProviderType.MetaMask:
-            case ProviderType.WalletConnect:
-            case ProviderType.Coin98:
-            case ProviderType.WalletLink:
-            case ProviderType.MathWallet:
-            case ProviderType.Fortmatic:
-                setConnectWalletDialog({
-                    open: true,
-                    providerType,
-                    networkType,
-                })
-                break
-            case ProviderType.CustomNetwork:
-                throw new Error('To be implemented.')
-            default:
-                unreachable(providerType)
-        }
-        onClick?.(network, provider)
-    }, [network, provider, injectedEthereumProviderType, injectedCoin98ProviderType, onClick])
-
-    // hide injected provider on dashboard
-    if (isInjectedProvider(providerType) && isDashboardPage()) return null
-
-    // hide fortmatic for some networks because of incomplete supporting
-    if (providerType === ProviderType.Fortmatic && !isFortmaticSupported(getChainIdFromNetworkType(networkType)))
-        return null
-
-    // hide coin98
-    if (providerType === ProviderType.Coin98) return null
-
-    // hide fortmatic on dashboard
-    if (providerType === ProviderType.Fortmatic && isDashboardPage()) return null
-
-    // coinbase and mathwallet are blocked by CSP
-    if ([ProviderType.WalletLink, ProviderType.MathWallet].includes(providerType)) return null
-
-    return (
-        <>
-            {isValidElement<object>(children)
-                ? cloneElement(children, {
-                      ...children.props,
-                      ...{
-                          onClick: onClickProvider,
-                      },
-                  })
-                : children}
-        </>
-    )
-}
diff --git a/packages/mask/src/plugins/EVM/base.ts b/packages/mask/src/plugins/EVM/base.ts
deleted file mode 100644
index 3cee00d2295a..000000000000
--- a/packages/mask/src/plugins/EVM/base.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import type { Plugin } from '@masknet/plugin-infra'
-import {
-    PLUGIN_ID,
-    PLUGIN_NAME,
-    PLUGIN_DESCRIPTION,
-    PLUGIN_PROVIDERS,
-    PLUGIN_NETWORKS,
-    PLUGIN_APPLICATION_CATEGORIES,
-} from './constants'
-
-export const base: Plugin.Shared.Definition = {
-    ID: PLUGIN_ID,
-
-    name: { fallback: PLUGIN_NAME },
-    description: { fallback: PLUGIN_DESCRIPTION },
-    publisher: { name: { fallback: 'Mask Network' }, link: 'https://mask.io/' },
-    enableRequirement: {
-        architecture: { app: true, web: true },
-        networks: { type: 'opt-out', networks: {} },
-        target: 'stable',
-    },
-    declareApplicationCategories: PLUGIN_APPLICATION_CATEGORIES,
-    declareWeb3Networks: PLUGIN_NETWORKS,
-    declareWeb3Providers: PLUGIN_PROVIDERS,
-}
diff --git a/packages/mask/src/plugins/EVM/constants.ts b/packages/mask/src/plugins/EVM/constants.ts
deleted file mode 100644
index 69a6e0b9523c..000000000000
--- a/packages/mask/src/plugins/EVM/constants.ts
+++ /dev/null
@@ -1,246 +0,0 @@
-import { NetworkPluginID, Web3Plugin } from '@masknet/plugin-infra/web3'
-import { ChainId, NetworkType, ProviderType } from '@masknet/web3-shared-evm'
-
-export const PLUGIN_ID = NetworkPluginID.PLUGIN_EVM
-export const PLUGIN_NAME = 'EVM'
-export const PLUGIN_DESCRIPTION = ''
-export const PLUGIN_NETWORKS: Web3Plugin.NetworkDescriptor[] = [
-    {
-        ID: `${PLUGIN_ID}_ethereum`,
-        networkSupporterPluginID: PLUGIN_ID,
-        chainId: ChainId.Mainnet,
-        type: NetworkType.Ethereum,
-        name: 'Ethereum',
-        icon: new URL('./assets/ethereum.png', import.meta.url),
-        iconColor: 'rgb(28, 104, 243)',
-        isMainnet: true,
-    },
-    {
-        ID: `${PLUGIN_ID}_ropsten`,
-        networkSupporterPluginID: PLUGIN_ID,
-        chainId: ChainId.Ropsten,
-        type: NetworkType.Ethereum,
-        name: 'Ropsten',
-        icon: new URL('./assets/ethereum.png', import.meta.url),
-        iconColor: 'rgb(255, 65, 130)',
-        isMainnet: false,
-    },
-    {
-        ID: `${PLUGIN_ID}_kovan`,
-        networkSupporterPluginID: PLUGIN_ID,
-        chainId: ChainId.Kovan,
-        type: NetworkType.Ethereum,
-        name: 'Kovan',
-        icon: new URL('./assets/ethereum.png', import.meta.url),
-        iconColor: 'rgb(133, 89, 255)',
-        isMainnet: false,
-    },
-    {
-        ID: `${PLUGIN_ID}_rinkeby`,
-        networkSupporterPluginID: PLUGIN_ID,
-        chainId: ChainId.Rinkeby,
-        type: NetworkType.Ethereum,
-        name: 'Rinkeby',
-        icon: new URL('./assets/ethereum.png', import.meta.url),
-        iconColor: 'rgb(133, 89, 255)',
-        isMainnet: false,
-    },
-    {
-        ID: `${PLUGIN_ID}_gorli`,
-        networkSupporterPluginID: PLUGIN_ID,
-        chainId: ChainId.Gorli,
-        type: NetworkType.Ethereum,
-        name: 'G\xf6rli',
-        icon: new URL('./assets/ethereum.png', import.meta.url),
-        iconColor: 'rgb(48, 153, 242)',
-        isMainnet: false,
-    },
-    {
-        ID: `${PLUGIN_ID}_bsc`,
-        networkSupporterPluginID: PLUGIN_ID,
-        chainId: ChainId.BSC,
-        type: NetworkType.Binance,
-        name: 'BNB Chain',
-        icon: new URL('./assets/binance.png', import.meta.url),
-        iconColor: 'rgb(240, 185, 10)',
-        isMainnet: true,
-    },
-    {
-        ID: `${PLUGIN_ID}_bsct`,
-        networkSupporterPluginID: PLUGIN_ID,
-        chainId: ChainId.BSCT,
-        type: NetworkType.Binance,
-        name: 'BSCT',
-        icon: new URL('./assets/binance.png', import.meta.url),
-        iconColor: 'rgb(240, 185, 10)',
-        isMainnet: false,
-    },
-    {
-        ID: `${PLUGIN_ID}_polygon`,
-        networkSupporterPluginID: PLUGIN_ID,
-        chainId: ChainId.Matic,
-        type: NetworkType.Polygon,
-        name: 'Polygon',
-        icon: new URL('./assets/polygon.png', import.meta.url),
-        iconColor: 'rgb(119, 62, 225)',
-        isMainnet: true,
-    },
-    {
-        ID: `${PLUGIN_ID}_mumbai`,
-        networkSupporterPluginID: PLUGIN_ID,
-        chainId: ChainId.Mumbai,
-        type: NetworkType.Polygon,
-        name: 'Mumbai',
-        icon: new URL('./assets/polygon.png', import.meta.url),
-        iconColor: 'rgb(119, 62, 225)',
-        isMainnet: false,
-    },
-    {
-        ID: `${PLUGIN_ID}_arbitrum`,
-        networkSupporterPluginID: PLUGIN_ID,
-        chainId: ChainId.Arbitrum,
-        type: NetworkType.Arbitrum,
-        name: 'Arbitrum One',
-        icon: new URL('./assets/arbitrum.png', import.meta.url),
-        iconColor: 'rgb(36, 150, 238)',
-        isMainnet: true,
-    },
-    {
-        ID: `${PLUGIN_ID}_arbitrum_rinkeby`,
-        networkSupporterPluginID: PLUGIN_ID,
-        chainId: ChainId.Arbitrum_Rinkeby,
-        type: NetworkType.Arbitrum,
-        name: 'Arbitrum Rinkeby',
-        icon: new URL('./assets/arbitrum.png', import.meta.url),
-        iconColor: 'rgb(36, 150, 238)',
-        isMainnet: false,
-    },
-    {
-        ID: `${PLUGIN_ID}_xdai`,
-        networkSupporterPluginID: PLUGIN_ID,
-        chainId: ChainId.xDai,
-        type: NetworkType.xDai,
-        name: 'Gnosis',
-        icon: new URL('./assets/xdai.png', import.meta.url),
-        iconColor: 'rgb(73, 169, 166)',
-        isMainnet: true,
-    },
-    {
-        ID: `${PLUGIN_ID}_celo`,
-        networkSupporterPluginID: PLUGIN_ID,
-        chainId: ChainId.Celo,
-        type: NetworkType.Celo,
-        name: 'Celo',
-        icon: new URL('./assets/celo.png', import.meta.url),
-        iconColor: 'rgb(53, 208, 127)',
-        isMainnet: false,
-    },
-    {
-        ID: `${PLUGIN_ID}_fantom`,
-        networkSupporterPluginID: PLUGIN_ID,
-        chainId: ChainId.Fantom,
-        type: NetworkType.Fantom,
-        name: 'Fantom',
-        icon: new URL('./assets/fantom.png', import.meta.url),
-        iconColor: 'rgb(73, 169, 166)',
-        isMainnet: true,
-    },
-    {
-        ID: `${PLUGIN_ID}_avalanche`,
-        networkSupporterPluginID: PLUGIN_ID,
-        chainId: ChainId.Avalanche,
-        type: NetworkType.Avalanche,
-        name: 'Avalanche',
-        icon: new URL('./assets/avalanche.png', import.meta.url),
-        iconColor: 'rgb(232, 65, 66)',
-        isMainnet: true,
-    },
-    {
-        ID: `${PLUGIN_ID}_aurora`,
-        networkSupporterPluginID: PLUGIN_ID,
-        chainId: ChainId.Aurora,
-        type: NetworkType.Aurora,
-        name: 'Aurora',
-        icon: new URL('./assets/aurora.png', import.meta.url),
-        iconColor: 'rgb(112, 212, 74)',
-        isMainnet: true,
-    },
-    {
-        ID: `${PLUGIN_ID}_harmony`,
-        networkSupporterPluginID: PLUGIN_ID,
-        chainId: ChainId.Harmony,
-        type: NetworkType.Harmony,
-        name: 'Harmony',
-        icon: new URL('./assets/harmony.png', import.meta.url),
-        iconColor: 'rgb(40, 201, 213)',
-        isMainnet: true,
-    },
-    {
-        ID: `${PLUGIN_ID}_conflux`,
-        networkSupporterPluginID: PLUGIN_ID,
-        chainId: ChainId.Conflux,
-        type: NetworkType.Conflux,
-        name: 'Conflux',
-        icon: new URL('./assets/conflux.png', import.meta.url),
-        iconColor: 'rgb(112, 212, 74)',
-        isMainnet: true,
-    },
-]
-export const PLUGIN_PROVIDERS: Web3Plugin.ProviderDescriptor[] = [
-    {
-        ID: `${PLUGIN_ID}_maskwallet`,
-        providerAdaptorPluginID: PLUGIN_ID,
-        type: ProviderType.MaskWallet,
-        name: 'Mask Network',
-        icon: new URL('./assets/maskwallet.png', import.meta.url),
-    },
-    {
-        ID: `${PLUGIN_ID}_metamask`,
-        providerAdaptorPluginID: PLUGIN_ID,
-        type: ProviderType.MetaMask,
-        name: 'MetaMask',
-        icon: new URL('./assets/metamask.png', import.meta.url),
-    },
-    {
-        ID: `${PLUGIN_ID}_walletconnect`,
-        providerAdaptorPluginID: PLUGIN_ID,
-        type: ProviderType.WalletConnect,
-        name: 'WalletConnect',
-        icon: new URL('./assets/walletconnect.png', import.meta.url),
-    },
-    {
-        ID: `${PLUGIN_ID}_coin98`,
-        providerAdaptorPluginID: PLUGIN_ID,
-        type: ProviderType.Coin98,
-        name: 'Coin98',
-        icon: new URL('./assets/coin98.png', import.meta.url),
-    },
-    {
-        ID: `${PLUGIN_ID}_walletlink`,
-        providerAdaptorPluginID: PLUGIN_ID,
-        type: ProviderType.WalletLink,
-        name: 'Coinbase',
-        icon: new URL('./assets/coinbase.png', import.meta.url),
-    },
-    {
-        ID: `${PLUGIN_ID}_mathwallet`,
-        providerAdaptorPluginID: PLUGIN_ID,
-        type: ProviderType.MathWallet,
-        name: 'MathWallet',
-        icon: new URL('./assets/mathwallet.png', import.meta.url),
-    },
-    {
-        ID: `${PLUGIN_ID}_fortmatic`,
-        providerAdaptorPluginID: PLUGIN_ID,
-        type: ProviderType.Fortmatic,
-        name: 'Fortmatic',
-        icon: new URL('./assets/fortmatic.png', import.meta.url),
-    },
-]
-export const PLUGIN_APPLICATION_CATEGORIES: Web3Plugin.ApplicationCategoryDescriptor[] = [
-    {
-        ID: `${PLUGIN_ID}_category_nfts`,
-        name: 'NFTs',
-        icon: new URL('./assets/nfts.png', import.meta.url),
-    },
-]
diff --git a/packages/mask/src/plugins/EVM/hooks/index.ts b/packages/mask/src/plugins/EVM/hooks/index.ts
deleted file mode 100644
index bc525d6f548e..000000000000
--- a/packages/mask/src/plugins/EVM/hooks/index.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-export * from './useAsset'
-export * from './useHistory'
-export * from './useOrders'
-export * from './useNetwork'
-export * from './useProvider'
-export * from './useBridgedProvider'
-export * from './useInjectedProviderReady'
-export * from './useInjectedProviderType'
diff --git a/packages/mask/src/plugins/EVM/hooks/useAsset.ts b/packages/mask/src/plugins/EVM/hooks/useAsset.ts
deleted file mode 100644
index 4ee7eba31865..000000000000
--- a/packages/mask/src/plugins/EVM/hooks/useAsset.ts
+++ /dev/null
@@ -1,41 +0,0 @@
-import { useAsyncRetry } from 'react-use'
-import {
-    NonFungibleAssetProvider,
-    currySameAddress,
-    isSameAddress,
-    useAccount,
-    useChainId,
-    useTokenConstants,
-    resolveIPFSLinkFromURL,
-    ChainId,
-} from '@masknet/web3-shared-evm'
-import { EVM_RPC } from '../messages'
-import { resolveAvatarLinkOnCurrentProvider } from '../../Collectible/pipes'
-
-export function useAsset(address: string, tokenId: string, provider: NonFungibleAssetProvider) {
-    const account = useAccount()
-    const chainId = useChainId()
-    const { WNATIVE_ADDRESS } = useTokenConstants()
-
-    return useAsyncRetry(async () => {
-        const asset = await EVM_RPC.getAsset({
-            address,
-            tokenId,
-            chainId: provider === NonFungibleAssetProvider.OPENSEA ? ChainId.Mainnet : chainId,
-            provider,
-        })
-        if (!asset) return
-        return {
-            ...asset,
-            image_url: resolveIPFSLinkFromURL(asset?.image_url ?? ''),
-            isOrderWeth: isSameAddress(asset?.desktopOrder?.payment_token ?? '', WNATIVE_ADDRESS) ?? false,
-            isCollectionWeth: asset?.collection?.payment_tokens?.some(currySameAddress(WNATIVE_ADDRESS)) ?? false,
-            isOwner: asset?.top_ownerships.some((item) => isSameAddress(item.owner.address, account)) ?? false,
-            collectionLinkUrl: resolveAvatarLinkOnCurrentProvider(
-                provider === NonFungibleAssetProvider.OPENSEA ? ChainId.Mainnet : chainId,
-                asset,
-                provider,
-            ),
-        }
-    }, [account, chainId, WNATIVE_ADDRESS, address, tokenId, provider])
-}
diff --git a/packages/mask/src/plugins/EVM/hooks/useBridgedProvider.ts b/packages/mask/src/plugins/EVM/hooks/useBridgedProvider.ts
deleted file mode 100644
index 88c732f1e6c6..000000000000
--- a/packages/mask/src/plugins/EVM/hooks/useBridgedProvider.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { useMemo } from 'react'
-import { unreachable } from '@dimensiondev/kit'
-import { bridgedCoin98Provider, bridgedEthereumProvider } from '@masknet/injected-script'
-
-export function useBridgedProvider(type: 'ethereum' | 'coin98') {
-    return useMemo(() => {
-        switch (type) {
-            case 'ethereum':
-                return bridgedEthereumProvider
-            case 'coin98':
-                return bridgedCoin98Provider
-            default:
-                unreachable(type)
-        }
-    }, [type])
-}
diff --git a/packages/mask/src/plugins/EVM/hooks/useHistory.ts b/packages/mask/src/plugins/EVM/hooks/useHistory.ts
deleted file mode 100644
index 6764060c7704..000000000000
--- a/packages/mask/src/plugins/EVM/hooks/useHistory.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import { useAsyncRetry } from 'react-use'
-import type { AsyncStateRetry } from 'react-use/lib/useAsyncRetry'
-import type { NonFungibleTokenAPI } from '@masknet/web3-providers'
-import { NonFungibleAssetProvider, useChainId } from '@masknet/web3-shared-evm'
-import { EVM_RPC } from '../messages'
-
-export function useHistory(
-    provider: NonFungibleAssetProvider,
-    page: number,
-    size: number,
-    address?: string,
-    tokenId?: string,
-): AsyncStateRetry<{ data: NonFungibleTokenAPI.History[]; hasNextPage: boolean }> {
-    const chainId = useChainId()
-    return useAsyncRetry(async () => {
-        if (!address || !tokenId)
-            return {
-                data: [],
-                hasNextPage: false,
-            }
-
-        const histories = await EVM_RPC.getHistory({ address, tokenId, chainId, provider, page, size })
-
-        return {
-            data: histories,
-            hasNextPage: histories.length === size,
-        }
-    }, [address, tokenId, chainId, provider, page, size])
-}
diff --git a/packages/mask/src/plugins/EVM/hooks/useInjectedProviderReady.ts b/packages/mask/src/plugins/EVM/hooks/useInjectedProviderReady.ts
deleted file mode 100644
index a8645bb3075f..000000000000
--- a/packages/mask/src/plugins/EVM/hooks/useInjectedProviderReady.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { useAsyncRetry } from 'react-use'
-import { useBridgedProvider } from './useBridgedProvider'
-
-export function useInjectedProviderReady(type: 'ethereum' | 'coin98') {
-    const bridgedProvider = useBridgedProvider(type)
-    const { value: available = false } = useAsyncRetry(async () => {
-        return bridgedProvider.untilAvailable()
-    }, [bridgedProvider])
-    return available
-}
diff --git a/packages/mask/src/plugins/EVM/hooks/useInjectedProviderType.ts b/packages/mask/src/plugins/EVM/hooks/useInjectedProviderType.ts
deleted file mode 100644
index b944a24895e0..000000000000
--- a/packages/mask/src/plugins/EVM/hooks/useInjectedProviderType.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import { useAsyncRetry } from 'react-use'
-import { ProviderType } from '@masknet/web3-shared-evm'
-import { useBridgedProvider } from './useBridgedProvider'
-import { useInjectedProviderReady } from './useInjectedProviderReady'
-
-export function useInjectedProviderType(type: 'ethereum' | 'coin98') {
-    const bridgedProvider = useBridgedProvider(type)
-    const injectedProviderReady = useInjectedProviderReady(type)
-    const { value: injectedProviderType } = useAsyncRetry(async () => {
-        if (!injectedProviderReady) return
-
-        // WalletLink (Coinbase)
-        const isWalletLink = await bridgedProvider.getProperty('isWalletLink')
-        if (isWalletLink) return ProviderType.WalletLink
-
-        // Coin98 under ethereum
-        const isCoin98 = await bridgedProvider.getProperty('isCoin98')
-        if (isCoin98) return ProviderType.Coin98
-
-        // mathwallet
-        const isMathWallet = await bridgedProvider.getProperty('isMathWallet')
-        if (isMathWallet) return ProviderType.MathWallet
-
-        // metamask
-        const isMetaMask = await bridgedProvider.getProperty('isMetaMask')
-        if (isMetaMask) return ProviderType.MetaMask
-
-        return
-    }, [injectedProviderReady, bridgedProvider])
-    return injectedProviderType
-}
diff --git a/packages/mask/src/plugins/EVM/hooks/useNetwork.ts b/packages/mask/src/plugins/EVM/hooks/useNetwork.ts
deleted file mode 100644
index c7aabe856c6b..000000000000
--- a/packages/mask/src/plugins/EVM/hooks/useNetwork.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { useNetworkType } from '@masknet/web3-shared-evm'
-import { PLUGIN_NETWORKS } from '../constants'
-
-export function useNetwork() {
-    const networkType = useNetworkType()
-    return PLUGIN_NETWORKS.find((x) => x.type === networkType) ?? null
-}
diff --git a/packages/mask/src/plugins/EVM/hooks/useOrders.ts b/packages/mask/src/plugins/EVM/hooks/useOrders.ts
deleted file mode 100644
index 39e0b2588d8a..000000000000
--- a/packages/mask/src/plugins/EVM/hooks/useOrders.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-import { useAsyncRetry } from 'react-use'
-import type { AsyncStateRetry } from 'react-use/lib/useAsyncRetry'
-import { NonFungibleTokenAPI } from '@masknet/web3-providers'
-import { NonFungibleAssetProvider, useChainId } from '@masknet/web3-shared-evm'
-import { EVM_RPC } from '../messages'
-
-export function useOrders(
-    provider: NonFungibleAssetProvider,
-    page: number,
-    size: number,
-    address?: string,
-    tokenId?: string,
-    side?: NonFungibleTokenAPI.OrderSide,
-): AsyncStateRetry<{ data: NonFungibleTokenAPI.AssetOrder[]; hasNextPage: boolean }> {
-    const chainId = useChainId()
-    return useAsyncRetry(async () => {
-        if (!address || !tokenId)
-            return {
-                data: [],
-                hasNextPage: false,
-            }
-        const orders = await EVM_RPC.getOrders({
-            address,
-            tokenId,
-            side: side ?? NonFungibleTokenAPI.OrderSide.Sell,
-            chainId,
-            provider,
-            page,
-            size,
-        })
-
-        return {
-            data: orders,
-            hasNextPage: orders.length === size,
-        }
-    }, [address, tokenId, side, chainId])
-}
diff --git a/packages/mask/src/plugins/EVM/hooks/useProvider.ts b/packages/mask/src/plugins/EVM/hooks/useProvider.ts
deleted file mode 100644
index 6cb1ade139bc..000000000000
--- a/packages/mask/src/plugins/EVM/hooks/useProvider.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { useProviderType } from '@masknet/web3-shared-evm'
-import { PLUGIN_PROVIDERS } from '../constants'
-
-export function useProvider() {
-    const providerType = useProviderType()
-    return PLUGIN_PROVIDERS.find((x) => x.type === providerType) ?? null
-}
diff --git a/packages/mask/src/plugins/EVM/services/Asset/index.ts b/packages/mask/src/plugins/EVM/services/Asset/index.ts
deleted file mode 100644
index 63fbd5adebe6..000000000000
--- a/packages/mask/src/plugins/EVM/services/Asset/index.ts
+++ /dev/null
@@ -1,132 +0,0 @@
-import { unreachable } from '@dimensiondev/kit'
-import { ChainId, NonFungibleAssetProvider } from '@masknet/web3-shared-evm'
-import { NonFungibleTokenAPI, OpenSea, Rarible, Zora } from '@masknet/web3-providers'
-
-export interface AssetOption {
-    address: string
-    tokenId: string
-    chainId: ChainId
-    provider: NonFungibleAssetProvider
-}
-
-export interface OrderOption {
-    address: string
-    tokenId: string
-    side: NonFungibleTokenAPI.OrderSide
-    chainId: ChainId
-    provider: NonFungibleAssetProvider
-    page: number
-    size: number
-}
-
-export interface ListOption {
-    address: string
-    tokenId: string
-    chainId: ChainId
-    provider: NonFungibleAssetProvider
-}
-
-export interface HistoryOption {
-    address: string
-    tokenId: string
-    chainId: ChainId
-    provider: NonFungibleAssetProvider
-    page: number
-    size: number
-}
-
-export interface CollectionOption {
-    address: string
-    chainId: ChainId
-    provider: NonFungibleAssetProvider
-    page: number
-    size: number
-}
-
-const defaultPageableData = {
-    data: [],
-    hasNextPage: false,
-}
-
-export async function getAsset(options: AssetOption) {
-    switch (options.provider) {
-        case NonFungibleAssetProvider.OPENSEA:
-            return OpenSea.getAsset(options.address, options.tokenId, { chainId: options.chainId })
-        case NonFungibleAssetProvider.NFTSCAN:
-            return
-        case NonFungibleAssetProvider.RARIBLE:
-            return Rarible.getAsset(options.address, options.tokenId, { chainId: options.chainId })
-        case NonFungibleAssetProvider.ZORA:
-            return Zora.getAsset(options.address, options.tokenId)
-        default:
-            unreachable(options.provider)
-    }
-}
-
-export async function getOrders(options: OrderOption) {
-    const { provider, address, tokenId, side, chainId, page, size } = options
-    switch (provider) {
-        case NonFungibleAssetProvider.OPENSEA:
-            return OpenSea.getOrders(address, tokenId, side, {
-                chainId,
-                page,
-                size,
-            })
-        case NonFungibleAssetProvider.NFTSCAN:
-            return []
-        case NonFungibleAssetProvider.RARIBLE:
-            return Rarible.getOrders(address, tokenId, side, { chainId })
-        case NonFungibleAssetProvider.ZORA:
-            return Zora.getOrders(address, tokenId, side)
-        default:
-            unreachable(provider)
-    }
-}
-
-export async function getListings(options: ListOption) {
-    const { address, tokenId, chainId, provider } = options
-    switch (provider) {
-        case NonFungibleAssetProvider.OPENSEA:
-            return []
-        case NonFungibleAssetProvider.NFTSCAN:
-            return []
-        case NonFungibleAssetProvider.RARIBLE:
-            return Rarible.getListings(address, tokenId, { chainId })
-        case NonFungibleAssetProvider.ZORA:
-            return Zora.getListings(address, tokenId)
-        default:
-            unreachable(provider)
-    }
-}
-
-export async function getHistory(options: HistoryOption) {
-    const { address, tokenId, chainId, provider, page, size } = options
-    switch (provider) {
-        case NonFungibleAssetProvider.OPENSEA:
-            return OpenSea.getHistory(address, tokenId, { chainId, page, size })
-        case NonFungibleAssetProvider.NFTSCAN:
-            return []
-        case NonFungibleAssetProvider.RARIBLE:
-            return Rarible.getHistory(address, tokenId)
-        case NonFungibleAssetProvider.ZORA:
-            return Zora.getHistory(address, tokenId)
-        default:
-            unreachable(provider)
-    }
-}
-
-export async function getCollections(options: CollectionOption) {
-    const { address, chainId, provider, page, size } = options
-    switch (provider) {
-        case NonFungibleAssetProvider.OPENSEA:
-            return OpenSea.getCollections(address, { chainId, page, size })
-        case NonFungibleAssetProvider.RARIBLE:
-            return defaultPageableData
-        case NonFungibleAssetProvider.NFTSCAN:
-            return defaultPageableData
-        case NonFungibleAssetProvider.ZORA:
-            return defaultPageableData
-        default:
-            unreachable(provider)
-    }
-}
diff --git a/packages/mask/src/plugins/EVM/services/NFT/index.ts b/packages/mask/src/plugins/EVM/services/NFT/index.ts
deleted file mode 100644
index d4fb2dcc7005..000000000000
--- a/packages/mask/src/plugins/EVM/services/NFT/index.ts
+++ /dev/null
@@ -1,92 +0,0 @@
-import { OpenSea, Rarible, NFTScan, Zora } from '@masknet/web3-providers'
-import { unreachable } from '@dimensiondev/kit'
-import { ChainId, NonFungibleAssetProvider } from '@masknet/web3-shared-evm'
-
-export interface NFTOption {
-    address: string
-    tokenId: string
-    chainId: ChainId
-    provider: NonFungibleAssetProvider
-}
-
-export interface BalanceOption {
-    address: string
-    chainId: ChainId
-    provider: NonFungibleAssetProvider
-}
-
-export interface ContractOption {
-    contractAddress: string
-    chainId: ChainId
-    provider: NonFungibleAssetProvider
-}
-
-export interface NFTsByPaginationOption {
-    from: string
-    chainId: ChainId
-    provider: NonFungibleAssetProvider
-    page: number
-    size: number
-    pageInfo?: { [key in string]: unknown }
-}
-
-export async function getNFT(options: NFTOption) {
-    const { address, tokenId, chainId, provider } = options
-    switch (provider) {
-        case NonFungibleAssetProvider.OPENSEA:
-            return OpenSea.getToken(address, tokenId, chainId)
-        case NonFungibleAssetProvider.NFTSCAN:
-            return NFTScan.getToken(address, tokenId)
-        case NonFungibleAssetProvider.RARIBLE:
-            return Rarible.getToken(address, tokenId)
-        case NonFungibleAssetProvider.ZORA:
-            return Zora.getToken(address, tokenId)
-        default:
-            unreachable(provider)
-    }
-}
-
-export async function getNFTBalance(options: BalanceOption) {
-    const { address, chainId, provider } = options
-    switch (provider) {
-        case NonFungibleAssetProvider.RARIBLE:
-        case NonFungibleAssetProvider.OPENSEA:
-        case NonFungibleAssetProvider.NFTSCAN:
-        case NonFungibleAssetProvider.ZORA:
-            return NFTScan.getContractBalance(address)
-
-        default:
-            unreachable(provider)
-    }
-}
-
-export async function getNFTContract(options: ContractOption) {
-    const { contractAddress, chainId, provider } = options
-    switch (provider) {
-        case NonFungibleAssetProvider.OPENSEA:
-        case NonFungibleAssetProvider.NFTSCAN:
-            return OpenSea.getContract(contractAddress, chainId)
-        case NonFungibleAssetProvider.RARIBLE:
-            return
-        case NonFungibleAssetProvider.ZORA:
-            return
-        default:
-            unreachable(provider)
-    }
-}
-
-export async function getNFTsByPagination(options: NFTsByPaginationOption) {
-    const { provider, from, chainId, page, size } = options
-    switch (provider) {
-        case NonFungibleAssetProvider.OPENSEA:
-            return OpenSea.getTokens(from, options)
-        case NonFungibleAssetProvider.NFTSCAN:
-            return NFTScan.getTokens(from, options)
-        case NonFungibleAssetProvider.RARIBLE:
-            return Rarible.getTokens(from, options)
-        case NonFungibleAssetProvider.ZORA:
-            return Rarible.getTokens(from, options)
-        default:
-            unreachable(provider)
-    }
-}
diff --git a/packages/mask/src/plugins/EVM/services/index.ts b/packages/mask/src/plugins/EVM/services/index.ts
deleted file mode 100644
index 01ad64779b05..000000000000
--- a/packages/mask/src/plugins/EVM/services/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './Asset'
-export * from './NFT'
diff --git a/packages/mask/src/plugins/EVM/storage/index.ts b/packages/mask/src/plugins/EVM/storage/index.ts
deleted file mode 100644
index d2c8548ec648..000000000000
--- a/packages/mask/src/plugins/EVM/storage/index.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import type { ScopedStorage } from '@masknet/shared-base'
-import type { Web3Plugin } from '@masknet/plugin-infra/web3'
-
-export const StorageDefaultValue = {
-    domainAddressBook: {} as Web3Plugin.DomainAddressBook,
-}
-
-let storage: ScopedStorage<typeof StorageDefaultValue> = null!
-
-export function setupStorage(_: typeof storage) {
-    storage = _
-}
-
-export function getStorage() {
-    return storage.storage
-}
diff --git a/packages/mask/src/plugins/EVM/types/index.ts b/packages/mask/src/plugins/EVM/types/index.ts
deleted file mode 100644
index 336ce12bb910..000000000000
--- a/packages/mask/src/plugins/EVM/types/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export {}
diff --git a/packages/mask/src/plugins/EVM/utils/index.ts b/packages/mask/src/plugins/EVM/utils/index.ts
deleted file mode 100644
index 336ce12bb910..000000000000
--- a/packages/mask/src/plugins/EVM/utils/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export {}
diff --git a/packages/mask/src/plugins/EVM/utils/token.ts b/packages/mask/src/plugins/EVM/utils/token.ts
deleted file mode 100644
index 4f4a79f990a5..000000000000
--- a/packages/mask/src/plugins/EVM/utils/token.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-import type { Web3Plugin } from '@masknet/plugin-infra/web3'
-import { CurrencyType, formatBalance, getTokenConstants, isSameAddress } from '@masknet/web3-shared-evm'
-
-// TODO: remove
-export const getTokenUSDValue = (token: Web3Plugin.Asset) =>
-    token.value ? Number.parseFloat(token.value?.[CurrencyType.USD] ?? '') : 0
-
-export const getBalanceValue = (asset: Web3Plugin.Asset<Web3Plugin.FungibleToken>) =>
-    Number.parseFloat(formatBalance(asset.balance, asset.token.decimals))
-
-export const getTokenChainIdValue = (asset: Web3Plugin.Asset) => {
-    const { NATIVE_TOKEN_ADDRESS } = getTokenConstants()
-    return isSameAddress(asset.token.id, NATIVE_TOKEN_ADDRESS) ? 1 / asset.token.chainId : 0
-}
-
-export const makeSortAssertWithoutChainFn = () => {
-    return (a: Web3Plugin.Asset<Web3Plugin.FungibleToken>, b: Web3Plugin.Asset<Web3Plugin.FungibleToken>) => {
-        // Token with high usd value estimation has priority
-        const valueDifference = getTokenUSDValue(b) - getTokenUSDValue(a)
-        if (valueDifference !== 0) return valueDifference
-
-        // native token sort
-        const chainValueDifference = getTokenChainIdValue(b) - getTokenChainIdValue(a)
-        if (chainValueDifference !== 0) return chainValueDifference
-
-        // Token with big balance has priority
-        if (getBalanceValue(a) > getBalanceValue(b)) return -1
-        if (getBalanceValue(a) < getBalanceValue(b)) return 1
-
-        // Sorted by alphabet
-        if ((a.token.name ?? '') > (b.token.name ?? '')) return 1
-        if ((a.token.name ?? '') < (b.token.name ?? '')) return -1
-
-        return 0
-    }
-}
diff --git a/packages/mask/src/plugins/External/components/ExternalPluginRenderer.tsx b/packages/mask/src/plugins/External/components/ExternalPluginRenderer.tsx
index 55a619f869bd..d1ca5a23c812 100644
--- a/packages/mask/src/plugins/External/components/ExternalPluginRenderer.tsx
+++ b/packages/mask/src/plugins/External/components/ExternalPluginRenderer.tsx
@@ -1,9 +1,6 @@
 import type { ExternalPluginLoadDetails } from '../types'
-import { Card, CardHeader, CardContent, Typography, Link, Button } from '@mui/material'
-import Services from '../../../extension/service'
-import { MaskExternalPluginPreviewRenderer, RenderContext } from '@masknet/external-plugin-previewer'
-import { PermissionAwareRedirectOf } from '../../../extension/popups'
-import { createThirdPartyPopupContext } from '../sns-context'
+import { Card, CardHeader, Typography, Link, Button } from '@mui/material'
+// import { PermissionAwareRedirectOf } from '../../../extension/popups'
 import { useExternalPluginManifest, useExternalPluginTemplate } from '../loader'
 import { useI18N } from '../../../utils'
 
@@ -47,7 +44,7 @@ export function ExternalPluginRenderer(props: ExternalPluginLoadDetails) {
                     </>
                 }
             />
-            <CardContent>
+            {/* <CardContent>
                 <RenderContext.Provider
                     value={{
                         permissionAwareOpen(url: string) {
@@ -68,7 +65,7 @@ export function ExternalPluginRenderer(props: ExternalPluginLoadDetails) {
                         template={template.value}
                     />
                 </RenderContext.Provider>
-            </CardContent>
+            </CardContent> */}
         </Card>
     )
 }
diff --git a/packages/mask/src/plugins/External/components/PluginLoader.tsx b/packages/mask/src/plugins/External/components/PluginLoader.tsx
index af18b55a6b73..14b31c869ab1 100644
--- a/packages/mask/src/plugins/External/components/PluginLoader.tsx
+++ b/packages/mask/src/plugins/External/components/PluginLoader.tsx
@@ -19,10 +19,8 @@ import {
 } from '@mui/material'
 import { useState } from 'react'
 import { Result } from 'ts-results'
-import { PermissionAwareRedirectOf } from '../../../extension/popups'
-import Services from '../../../extension/service'
+// import { PermissionAwareRedirectOf } from '../../../extension/popups'
 import { useExternalPluginManifest } from '../loader'
-import { createThirdPartyPopupContext } from '../sns-context'
 import { Link as LinkIcon, Person as PublisherIcon, Description as DescriptionIcon } from '@mui/icons-material'
 import { useI18N } from '../../../utils'
 import { Trans } from 'react-i18next'
@@ -131,7 +129,7 @@ function Loader(props: { url: string }) {
                     <ListItemText primary="Description" secondary={loading ? skeleton : value?.description ?? ''} />
                 </ListItem>
             </List>
-            <Box sx={{ display: 'flex', flexDirection: 'row-reverse' }}>
+            {/* <Box sx={{ display: 'flex', flexDirection: 'row-reverse' }}>
                 {contribution ? (
                     <Button
                         variant="contained"
@@ -146,7 +144,7 @@ function Loader(props: { url: string }) {
                         {t('plugin_external_get_started')}
                     </Button>
                 ) : null}
-            </Box>
+            </Box> */}
         </Box>
     )
 }
diff --git a/packages/mask/src/plugins/FindTruman/SNSAdaptor/FindTruman.tsx b/packages/mask/src/plugins/FindTruman/SNSAdaptor/FindTruman.tsx
index 7ae5daa187d2..b36ca1ba1918 100644
--- a/packages/mask/src/plugins/FindTruman/SNSAdaptor/FindTruman.tsx
+++ b/packages/mask/src/plugins/FindTruman/SNSAdaptor/FindTruman.tsx
@@ -19,9 +19,10 @@ import StageCard from './StageCard'
 import EncryptionCard from './EncryptionCard'
 import CompletionCard from './CompletionCard'
 import { PluginWalletConnectIcon } from '@masknet/icons'
-import { EthereumWalletConnectedBoundary } from '../../../web3/UI/EthereumWalletConnectedBoundary'
-import { EthereumChainBoundary } from '../../../web3/UI/EthereumChainBoundary'
-import { useChainId } from '@masknet/web3-shared-evm'
+import { WalletConnectedBoundary } from '../../../web3/UI/WalletConnectedBoundary'
+import { ChainBoundary } from '../../../web3/UI/ChainBoundary'
+import { useChainId } from '@masknet/plugin-infra/web3'
+import { NetworkPluginID } from '@masknet/web3-shared-base'
 
 const useStyles = makeStyles()((theme) => {
     return {
@@ -151,7 +152,7 @@ export function getPostTypeTitle(t: FindTrumanI18nFunction, postType: PostType)
 export function FindTruman(props: FindTrumanProps) {
     const { classes } = useStyles()
     const { address, t } = useContext(FindTrumanContext)
-    const chainId = useChainId()
+    const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
     const {
         postType,
         clueId,
@@ -271,13 +272,13 @@ export function FindTruman(props: FindTrumanProps) {
             </Card>
 
             <Box style={{ padding: 12 }}>
-                <EthereumChainBoundary chainId={chainId} renderInTimeline>
-                    <EthereumWalletConnectedBoundary
-                        startIcon={<PluginWalletConnectIcon style={{ fontSize: 18 }} />}
+                <ChainBoundary expectedPluginID={NetworkPluginID.PLUGIN_EVM} expectedChainId={chainId} renderInTimeline>
+                    <WalletConnectedBoundary
                         classes={{ button: classes.button }}
                         renderInTimeline
+                        startIcon={<PluginWalletConnectIcon style={{ fontSize: 18 }} />}
                     />
-                </EthereumChainBoundary>
+                </ChainBoundary>
             </Box>
         </>
     )
diff --git a/packages/mask/src/plugins/FindTruman/SNSAdaptor/FtgPanel.tsx b/packages/mask/src/plugins/FindTruman/SNSAdaptor/FtgPanel.tsx
index f51409b36e96..13eb0033e9a5 100644
--- a/packages/mask/src/plugins/FindTruman/SNSAdaptor/FtgPanel.tsx
+++ b/packages/mask/src/plugins/FindTruman/SNSAdaptor/FtgPanel.tsx
@@ -1,4 +1,4 @@
-import { useAccount, useERC721TokenContract, formatNFT_TokenId } from '@masknet/web3-shared-evm'
+import { formatTokenId } from '@masknet/web3-shared-evm'
 import { makeStyles } from '@masknet/theme'
 import { Box, Button, Link, Typography } from '@mui/material'
 import { useAsync } from 'react-use'
@@ -8,6 +8,9 @@ import FusionFtg from './FusionFtg'
 import { useContext } from 'react'
 import { FindTrumanContext } from '../context'
 import { getPartName } from './PartsPanel'
+import { useAccount, useChainId } from '@masknet/plugin-infra/web3'
+import { NetworkPluginID } from '@masknet/web3-shared-base'
+import { useERC721TokenContract } from '@masknet/plugin-infra/web3-evm'
 
 const useStyles = makeStyles()((theme) => ({
     ftgCover: {
@@ -51,9 +54,9 @@ interface FtgPanelProps {}
 export default function FtgPanel(props: FtgPanelProps) {
     const { classes } = useStyles()
     const { t, const: consts } = useContext(FindTrumanContext)
-    const account = useAccount()
-
-    const ftgContract = useERC721TokenContract(consts?.ftgAddress)
+    const account = useAccount(NetworkPluginID.PLUGIN_EVM)
+    const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
+    const ftgContract = useERC721TokenContract(chainId, consts?.ftgAddress)
 
     const { value: ftgs } = useAsync(async () => {
         try {
@@ -143,7 +146,7 @@ function FtgItem(props: { ftg: FtgInfo }) {
                 </Typography>
                 <FtgInfoRow
                     title={t('plugin_find_truman_dialog_ftg_info_token')}
-                    value={formatNFT_TokenId(ftg.tokenId, 2)}
+                    value={formatTokenId(ftg.tokenId, 2)}
                 />
                 <FtgInfoRow title={t('plugin_find_truman_dialog_ftg_info_blockchain')} value="Ethereum" />
                 <FtgInfoRow title={t('plugin_find_truman_dialog_ftg_info_standard')} value="ERC721 Enumerable" />
diff --git a/packages/mask/src/plugins/FindTruman/SNSAdaptor/MainDialog.tsx b/packages/mask/src/plugins/FindTruman/SNSAdaptor/MainDialog.tsx
index 047e2f4a0194..26e7fb73936f 100644
--- a/packages/mask/src/plugins/FindTruman/SNSAdaptor/MainDialog.tsx
+++ b/packages/mask/src/plugins/FindTruman/SNSAdaptor/MainDialog.tsx
@@ -3,7 +3,7 @@ import { makeStyles } from '@masknet/theme'
 import { useContext, useEffect, useState } from 'react'
 import { useI18N } from '../../../utils'
 import { InjectedDialog, InjectedDialogProps } from '@masknet/shared'
-import { useAccount } from '@masknet/web3-shared-evm'
+import { useAccount } from '@masknet/plugin-infra/web3'
 import { fetchConst, fetchUserParticipatedStoryStatus } from '../Worker/apis'
 import type { UserStoryStatus, FindTrumanConst } from '../types'
 import { BorderLinearProgress } from './ResultCard'
diff --git a/packages/mask/src/plugins/FindTruman/SNSAdaptor/ParticipatePanel.tsx b/packages/mask/src/plugins/FindTruman/SNSAdaptor/ParticipatePanel.tsx
index 930e67e15ff3..3516a27554ec 100644
--- a/packages/mask/src/plugins/FindTruman/SNSAdaptor/ParticipatePanel.tsx
+++ b/packages/mask/src/plugins/FindTruman/SNSAdaptor/ParticipatePanel.tsx
@@ -1,4 +1,4 @@
-import { useAccount } from '@masknet/web3-shared-evm'
+import { useAccount } from '@masknet/plugin-infra/web3'
 import { makeStyles, useStylesExtends, useTabs } from '@masknet/theme'
 import { useAsyncRetry } from 'react-use'
 import { fetchQuestions, fetchUserStoryStatus, submitCompletion, submitPoll, submitPuzzle } from '../Worker/apis'
diff --git a/packages/mask/src/plugins/FindTruman/SNSAdaptor/PartsPanel.tsx b/packages/mask/src/plugins/FindTruman/SNSAdaptor/PartsPanel.tsx
index 00ca5c8ba097..a0a6618e1165 100644
--- a/packages/mask/src/plugins/FindTruman/SNSAdaptor/PartsPanel.tsx
+++ b/packages/mask/src/plugins/FindTruman/SNSAdaptor/PartsPanel.tsx
@@ -1,4 +1,5 @@
-import { useAccount, formatNFT_TokenId } from '@masknet/web3-shared-evm'
+import { useAccount } from '@masknet/plugin-infra/web3'
+import { formatTokenId } from '@masknet/web3-shared-evm'
 import { makeStyles } from '@masknet/theme'
 import { useControlledDialog } from '../../../utils'
 import { useAsyncRetry } from 'react-use'
@@ -338,7 +339,7 @@ function QuestDialog(props: QuestDialogProps) {
     const { t, const: consts } = useContext(FindTrumanContext)
 
     const poapIds = useMemo(() => {
-        return quest.poaps.map((e) => formatNFT_TokenId(e.tokenId.toString(), 2)).join(', ')
+        return quest.poaps.map((e) => formatTokenId(e.tokenId.toString(), 2)).join(', ')
     }, [quest])
 
     const availablePoap = useMemo(() => {
diff --git a/packages/mask/src/plugins/FindTruman/SNSAdaptor/PoapPanel.tsx b/packages/mask/src/plugins/FindTruman/SNSAdaptor/PoapPanel.tsx
index 2a55cf25f02f..12815dfcc68f 100644
--- a/packages/mask/src/plugins/FindTruman/SNSAdaptor/PoapPanel.tsx
+++ b/packages/mask/src/plugins/FindTruman/SNSAdaptor/PoapPanel.tsx
@@ -1,10 +1,11 @@
-import { useAccount } from '@masknet/web3-shared-evm'
 import { makeStyles } from '@masknet/theme'
 import { useAsync } from 'react-use'
 import { fetchUserPoap } from '../Worker/apis'
 import { Box, Button, Grid, Skeleton, Typography } from '@mui/material'
-import React, { useContext } from 'react'
+import { useContext } from 'react'
 import { FindTrumanContext } from '../context'
+import { useAccount } from '@masknet/plugin-infra/web3'
+import { NetworkPluginID } from '@masknet/web3-shared-base'
 
 const useStyles = makeStyles()((theme, props) => ({
     skeleton: {
@@ -37,7 +38,7 @@ interface PoapPanelProps {}
 export default function PoapPanel(props: PoapPanelProps) {
     const { classes } = useStyles()
     const { t, const: consts } = useContext(FindTrumanContext)
-    const account = useAccount()
+    const account = useAccount(NetworkPluginID.PLUGIN_EVM)
 
     const { value: poaps, loading } = useAsync(async () => {
         return account ? fetchUserPoap(account) : undefined
diff --git a/packages/mask/src/plugins/FindTruman/SNSAdaptor/PostInspector.tsx b/packages/mask/src/plugins/FindTruman/SNSAdaptor/PostInspector.tsx
index cb0d575c75d7..015f825b04a1 100644
--- a/packages/mask/src/plugins/FindTruman/SNSAdaptor/PostInspector.tsx
+++ b/packages/mask/src/plugins/FindTruman/SNSAdaptor/PostInspector.tsx
@@ -11,7 +11,7 @@ import {
     UserPollStatus,
     UserStoryStatus,
 } from '../types'
-import { useAccount } from '@masknet/web3-shared-evm'
+import { useAccount } from '@masknet/plugin-infra/web3'
 import { useEffect, useState } from 'react'
 import {
     fetchPollResult,
@@ -27,6 +27,7 @@ import {
 } from '../Worker/apis'
 import getUnixTime from 'date-fns/getUnixTime'
 import { useConst } from './hooks/useConst'
+import { NetworkPluginID } from '@masknet/web3-shared-base'
 
 export interface PostInspectorProps {
     url: string
@@ -34,7 +35,7 @@ export interface PostInspectorProps {
 
 export function PostInspector(props: PostInspectorProps) {
     const { url } = props
-    const account = useAccount().toLowerCase()
+    const account = useAccount(NetworkPluginID.PLUGIN_EVM).toLowerCase()
     const { consts, t } = useConst()
 
     const [, , , _storyId, , _targetId] = new URL(url).hash.split('/')
diff --git a/packages/mask/src/plugins/FindTruman/Worker/apis/index.ts b/packages/mask/src/plugins/FindTruman/Worker/apis/index.ts
index 231dc9df2030..d9bf2b652a9c 100644
--- a/packages/mask/src/plugins/FindTruman/Worker/apis/index.ts
+++ b/packages/mask/src/plugins/FindTruman/Worker/apis/index.ts
@@ -1,5 +1,5 @@
 import urlcat from 'urlcat'
-import Services from '../../../../extension/service'
+import { WalletRPC } from '../../../Wallet/messages'
 import {
     DecryptedClue,
     ExchangeStatus,
@@ -75,7 +75,7 @@ export function fetchPollResult(pollId: string) {
 }
 
 export async function submitPuzzle(address: string, data: SubmitPuzzleParams) {
-    const sig = await Services.Ethereum.personalSign(JSON.stringify(data), address)
+    const sig = await WalletRPC.signPersonalMessage(JSON.stringify(data), address)
     return request<string>('/puzzles/submit', {
         method: 'POST',
         body: JSON.stringify({ data, sig }),
@@ -83,7 +83,7 @@ export async function submitPuzzle(address: string, data: SubmitPuzzleParams) {
 }
 
 export async function submitPoll(address: string, data: SubmitPollParams) {
-    const sig = await Services.Ethereum.personalSign(JSON.stringify(data), address)
+    const sig = await WalletRPC.signPersonalMessage(JSON.stringify(data), address)
     return request<string>('/polls/submit', {
         method: 'POST',
         body: JSON.stringify({ data, sig }),
@@ -100,7 +100,7 @@ export async function submitCompletion(address: string, params: SubmitCompletion
             answers,
         },
     }
-    const sig = await Services.Ethereum.personalSign(JSON.stringify(data), address)
+    const sig = await WalletRPC.signPersonalMessage(JSON.stringify(data), address)
     return request<string>('/subjective_questions/_/answer', {
         method: 'POST',
         body: JSON.stringify({ data, sig }),
@@ -124,7 +124,7 @@ export function fetchMysteryBoxInfo(id: number) {
 }
 
 export async function openMysteryBox(address: string, data: OpenMysteryBoxParams) {
-    const sig = await Services.Ethereum.personalSign(JSON.stringify(data), address)
+    const sig = await WalletRPC.signPersonalMessage(JSON.stringify(data), address)
     return request<MysteryBox>('/mystery-boxes/_/open', {
         method: 'POST',
         body: JSON.stringify({ data, sig }),
diff --git a/packages/mask/src/plugins/FindTruman/base.ts b/packages/mask/src/plugins/FindTruman/base.ts
index ad23830b6f09..4895ed1f8934 100644
--- a/packages/mask/src/plugins/FindTruman/base.ts
+++ b/packages/mask/src/plugins/FindTruman/base.ts
@@ -1,6 +1,4 @@
 import type { Plugin } from '@masknet/plugin-infra'
-import { NetworkPluginID } from '@masknet/plugin-infra/web3'
-import { ChainId } from '@masknet/web3-shared-evm'
 import { FIND_TRUMAN_PLUGIN_ID, FIND_TRUMAN_PLUGIN_NAME } from './constants'
 
 export const base: Plugin.Shared.Definition = {
@@ -14,24 +12,6 @@ export const base: Plugin.Shared.Definition = {
         architecture: { app: true, web: true },
         networks: { type: 'opt-out', networks: {} },
         target: 'stable',
-        web3: {
-            [NetworkPluginID.PLUGIN_EVM]: {
-                supportedChainIds: [
-                    ChainId.Mainnet,
-                    ChainId.BSC,
-                    ChainId.Matic,
-                    ChainId.Arbitrum,
-                    ChainId.xDai,
-                    ChainId.Fantom,
-                    ChainId.Avalanche,
-                    ChainId.Aurora,
-                    ChainId.Conflux,
-                    ChainId.Harmony,
-                ],
-            },
-            [NetworkPluginID.PLUGIN_FLOW]: { supportedChainIds: [] },
-            [NetworkPluginID.PLUGIN_SOLANA]: { supportedChainIds: [] },
-        },
     },
     contribution: {
         postContent: new Set([
diff --git a/packages/mask/src/plugins/Furucombo/UI/FurucomboView.tsx b/packages/mask/src/plugins/Furucombo/UI/FurucomboView.tsx
index 94c4318ccd9c..2a7c9e28d9c9 100644
--- a/packages/mask/src/plugins/Furucombo/UI/FurucomboView.tsx
+++ b/packages/mask/src/plugins/Furucombo/UI/FurucomboView.tsx
@@ -1,9 +1,10 @@
+import { useChainId } from '@masknet/plugin-infra/web3'
+import { isSameAddress, NetworkPluginID } from '@masknet/web3-shared-base'
 import { makeStyles, MaskColorVar } from '@masknet/theme'
-import { isSameAddress, useChainId } from '@masknet/web3-shared-evm'
 import { Card, CardContent, Tabs, Tab, Typography, Paper, CircularProgress, Button, Stack, Box } from '@mui/material'
 import { useState } from 'react'
 import { useI18N } from '../../../utils/i18n-next-ui'
-import { EthereumChainBoundary } from '../../../web3/UI/EthereumChainBoundary'
+import { ChainBoundary } from '../../../web3/UI/ChainBoundary'
 import { useFetchPools } from '../hooks/usePool'
 import type { Investable } from '../types'
 import { InvestmentsView } from './InvestmentsView'
@@ -53,7 +54,7 @@ export function FurucomboView(props: PoolViewProps) {
     const { t } = useI18N()
     const { classes } = useStyles()
     const [tabIndex, setTabIndex] = useState(0)
-    const currentChainId = useChainId()
+    const currentChainId = useChainId(NetworkPluginID.PLUGIN_EVM)
 
     const { value, loading, error, retry } = useFetchPools()
 
@@ -93,7 +94,11 @@ export function FurucomboView(props: PoolViewProps) {
                 </Typography>
 
                 <Box sx={{ padding: 1.5 }}>
-                    <EthereumChainBoundary chainId={props.chainId} renderInTimeline />
+                    <ChainBoundary
+                        expectedPluginID={NetworkPluginID.PLUGIN_EVM}
+                        expectedChainId={props.chainId}
+                        renderInTimeline
+                    />
                 </Box>
             </>
         )
@@ -119,7 +124,11 @@ export function FurucomboView(props: PoolViewProps) {
                 </CardContent>
             </Card>
             <Box sx={{ padding: 1.5 }}>
-                <EthereumChainBoundary chainId={props.chainId} renderInTimeline />
+                <ChainBoundary
+                    expectedPluginID={NetworkPluginID.PLUGIN_EVM}
+                    expectedChainId={props.chainId}
+                    renderInTimeline
+                />
             </Box>
         </>
     )
diff --git a/packages/mask/src/plugins/Furucombo/UI/PoolView.tsx b/packages/mask/src/plugins/Furucombo/UI/PoolView.tsx
index 4b8ae7705579..efdb78392e7b 100644
--- a/packages/mask/src/plugins/Furucombo/UI/PoolView.tsx
+++ b/packages/mask/src/plugins/Furucombo/UI/PoolView.tsx
@@ -1,5 +1,6 @@
+import { useAccount, useChainIdMatched } from '@masknet/plugin-infra/web3'
 import { makeStyles } from '@masknet/theme'
-import { useAccount, useChainIdMatched } from '@masknet/web3-shared-evm'
+import { NetworkPluginID } from '@masknet/web3-shared-base'
 import { Button, Divider, Grid, Typography, Container } from '@mui/material'
 import { FurucomboIcon } from '../../../resources/FurucomboIcon'
 import { useI18N } from '../../../utils'
@@ -88,8 +89,8 @@ export function PoolView(props: PoolProps) {
     const { classes } = useStyles()
     const { t } = useI18N()
     const { category, chainId, address, name, protocol, liquidity, apy, angels } = props.investable
-    const account = useAccount()
-    const isValidChainId = useChainIdMatched(chainId)
+    const account = useAccount(NetworkPluginID.PLUGIN_EVM)
+    const isValidChainId = useChainIdMatched(NetworkPluginID.PLUGIN_EVM, chainId)
 
     const displayRewardIcon = (rewardToken: Token) => {
         if (rewardToken.symbol === 'WMATIC') return <WmaticIcon />
diff --git a/packages/mask/src/plugins/Gitcoin/SNSAdaptor/DonateDialog.tsx b/packages/mask/src/plugins/Gitcoin/SNSAdaptor/DonateDialog.tsx
index ee480fa8ef58..d8999c95dad8 100644
--- a/packages/mask/src/plugins/Gitcoin/SNSAdaptor/DonateDialog.tsx
+++ b/packages/mask/src/plugins/Gitcoin/SNSAdaptor/DonateDialog.tsx
@@ -1,29 +1,21 @@
+import { useCallback, useMemo, useState } from 'react'
 import { InjectedDialog, useOpenShareTxDialog, usePickToken } from '@masknet/shared'
 import { useRemoteControlledDialog } from '@masknet/shared-base-ui'
 import { makeStyles, useStylesExtends } from '@masknet/theme'
-import { rightShift } from '@masknet/web3-shared-base'
-import {
-    EthereumTokenType,
-    formatBalance,
-    FungibleTokenDetailed,
-    useAccount,
-    useChainId,
-    useFungibleTokenBalance,
-    useGitcoinConstants,
-    useNativeTokenDetailed,
-} from '@masknet/web3-shared-evm'
+import { formatBalance, FungibleToken, NetworkPluginID, rightShift } from '@masknet/web3-shared-base'
+import { ChainId, SchemaType, useGitcoinConstants } from '@masknet/web3-shared-evm'
+import { useAccount, useChainId, useFungibleToken, useFungibleTokenBalance } from '@masknet/plugin-infra/web3'
 import { DialogContent, Link, Typography } from '@mui/material'
-import { useCallback, useMemo, useState } from 'react'
 import ActionButton from '../../../extension/options-page/DashboardComponents/ActionButton'
 import { activatedSocialNetworkUI } from '../../../social-network'
 import { isFacebook } from '../../../social-network-adaptor/facebook.com/base'
 import { isTwitter } from '../../../social-network-adaptor/twitter.com/base'
+import { Translate, useI18N } from '../locales'
 import { useI18N as useBaseI18N } from '../../../utils'
 import { EthereumERC20TokenApprovedBoundary } from '../../../web3/UI/EthereumERC20TokenApprovedBoundary'
-import { EthereumWalletConnectedBoundary } from '../../../web3/UI/EthereumWalletConnectedBoundary'
+import { WalletConnectedBoundary } from '../../../web3/UI/WalletConnectedBoundary'
 import { TokenAmountPanel } from '../../../web3/UI/TokenAmountPanel'
 import { useDonateCallback } from '../hooks/useDonateCallback'
-import { Translate, useI18N } from '../locales'
 import { PluginGitcoinMessages } from '../messages'
 
 const useStyles = makeStyles()((theme) => ({
@@ -60,10 +52,11 @@ export function DonateDialog(props: DonateDialogProps) {
     const [postLink, setPostLink] = useState<string | URL>('')
 
     // context
-    const account = useAccount()
-    const chainId = useChainId()
-    const nativeTokenDetailed = useNativeTokenDetailed()
-    const { BULK_CHECKOUT_ADDRESS } = useGitcoinConstants()
+    const account = useAccount(NetworkPluginID.PLUGIN_EVM)
+    const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
+    const nativeTokenDetailed = useFungibleToken(NetworkPluginID.PLUGIN_EVM)
+
+    const { BULK_CHECKOUT_ADDRESS } = useGitcoinConstants(chainId)
 
     // #region remote controlled dialog
     const { open, closeDialog: closeDonationDialog } = useRemoteControlledDialog(
@@ -78,11 +71,11 @@ export function DonateDialog(props: DonateDialogProps) {
     // #endregion
 
     // #region the selected token
-    const [token = nativeTokenDetailed.value, setToken] = useState<FungibleTokenDetailed | undefined>(
+    const [token = nativeTokenDetailed.value, setToken] = useState<FungibleToken<ChainId, SchemaType> | undefined>(
         nativeTokenDetailed.value,
     )
-    const tokenBalance = useFungibleTokenBalance(token?.type ?? EthereumTokenType.Native, token?.address ?? '')
-    // #endregion
+
+    const tokenBalance = useFungibleTokenBalance(NetworkPluginID.PLUGIN_EVM)
 
     // #region select token dialog
     const pickToken = usePickToken()
@@ -100,7 +93,9 @@ export function DonateDialog(props: DonateDialogProps) {
     const amount = rightShift(rawAmount || '0', token?.decimals)
     // #endregion
 
+    // #region blocking
     const [{ loading }, donateCallback] = useDonateCallback(address ?? '', amount.toFixed(), token)
+    // #endregion
 
     const cashTag = isTwitter(activatedSocialNetworkUI) ? '$' : ''
 
@@ -172,11 +167,11 @@ export function DonateDialog(props: DonateDialogProps) {
                             }}
                         />
                     </Typography>
-                    <EthereumWalletConnectedBoundary>
+                    <WalletConnectedBoundary>
                         <EthereumERC20TokenApprovedBoundary
                             amount={amount.toFixed()}
                             spender={BULK_CHECKOUT_ADDRESS}
-                            token={token.type === EthereumTokenType.ERC20 ? token : undefined}>
+                            token={token.schema === SchemaType.ERC20 ? token : undefined}>
                             <ActionButton
                                 loading={loading}
                                 className={classes.button}
@@ -188,7 +183,7 @@ export function DonateDialog(props: DonateDialogProps) {
                                 {validationMessage || t.donate()}
                             </ActionButton>
                         </EthereumERC20TokenApprovedBoundary>
-                    </EthereumWalletConnectedBoundary>
+                    </WalletConnectedBoundary>
                 </DialogContent>
             </InjectedDialog>
         </div>
diff --git a/packages/mask/src/plugins/Gitcoin/SNSAdaptor/PreviewCard.tsx b/packages/mask/src/plugins/Gitcoin/SNSAdaptor/PreviewCard.tsx
index 142ab0b521c5..3f498ce03bc9 100644
--- a/packages/mask/src/plugins/Gitcoin/SNSAdaptor/PreviewCard.tsx
+++ b/packages/mask/src/plugins/Gitcoin/SNSAdaptor/PreviewCard.tsx
@@ -1,17 +1,18 @@
 import { useCallback } from 'react'
+import urlcat from 'urlcat'
 import { Box, Card, Typography, Button, Avatar, CircularProgress, useTheme } from '@mui/material'
 import { makeStyles } from '@masknet/theme'
 import QueryBuilderIcon from '@mui/icons-material/QueryBuilder'
 import VerifiedUserIcon from '@mui/icons-material/VerifiedUser'
+import { useRemoteControlledDialog } from '@masknet/shared-base-ui'
 import { useI18N as useBaseI18N } from '../../../utils'
 import { useI18N } from '../locales'
-import { useRemoteControlledDialog } from '@masknet/shared-base-ui'
 import { useGrant } from '../hooks/useGrant'
 import { PluginGitcoinMessages } from '../messages'
-import urlcat from 'urlcat'
 import { usePostLink } from '../../../components/DataSource/usePostInfo'
-import { NetworkPluginID, useChainId } from '@masknet/plugin-infra/web3'
-import { EthereumChainBoundary } from '../../../web3/UI/EthereumChainBoundary'
+import { useChainId } from '@masknet/plugin-infra/web3'
+import { ChainBoundary } from '../../../web3/UI/ChainBoundary'
+import { NetworkPluginID } from '@masknet/web3-shared-base'
 import { ChainId } from '@masknet/web3-shared-evm'
 
 const useStyles = makeStyles()((theme) => ({
@@ -83,7 +84,7 @@ const useStyles = makeStyles()((theme) => ({
     },
 }))
 
-interface PreviewCardProps {
+export interface PreviewCardProps {
     id: string
 }
 
@@ -93,7 +94,6 @@ export function PreviewCard(props: PreviewCardProps) {
     const { classes } = useStyles()
     const { value: grant, error, loading, retry } = useGrant(props.id)
     const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
-    const isGitCoinSupported = (chainId: ChainId) => [ChainId.Mainnet, ChainId.Matic].includes(chainId)
     const theme = useTheme()
 
     // #region the donation dialog
@@ -187,9 +187,13 @@ export function PreviewCard(props: PreviewCardProps) {
                     </Button>
                 </Box>
                 <Box sx={{ flex: 1, padding: 1.5 }}>
-                    <EthereumChainBoundary
-                        chainId={isGitCoinSupported(chainId) ? chainId : ChainId.Mainnet}
-                        renderInTimeline>
+                    <ChainBoundary
+                        expectedPluginID={NetworkPluginID.PLUGIN_EVM}
+                        expectedChainId={ChainId.Mainnet}
+                        predicate={(pluginID, chainId) =>
+                            pluginID === NetworkPluginID.PLUGIN_EVM &&
+                            [ChainId.Mainnet, ChainId.Matic].includes(chainId)
+                        }>
                         <Button
                             variant="contained"
                             fullWidth
@@ -203,7 +207,7 @@ export function PreviewCard(props: PreviewCardProps) {
                             onClick={onDonate}>
                             {t.donate()}
                         </Button>
-                    </EthereumChainBoundary>
+                    </ChainBoundary>
                 </Box>
             </Box>
         </>
diff --git a/packages/mask/src/plugins/Gitcoin/SNSAdaptor/index.tsx b/packages/mask/src/plugins/Gitcoin/SNSAdaptor/index.tsx
index 1ffb8a4109eb..f0792704ed93 100644
--- a/packages/mask/src/plugins/Gitcoin/SNSAdaptor/index.tsx
+++ b/packages/mask/src/plugins/Gitcoin/SNSAdaptor/index.tsx
@@ -1,15 +1,19 @@
-import { GitcoinIcon } from '@masknet/icons'
-import { Plugin, PluginId, usePluginWrapper, usePostInfoDetails } from '@masknet/plugin-infra/content-script'
-import { parseURL } from '@masknet/shared-base'
-import { extractTextFromTypedMessage } from '@masknet/typed-message'
 import { useMemo } from 'react'
+import { ChainId } from '@masknet/web3-shared-evm'
+import { usePostInfoDetails, Plugin, usePluginWrapper, PluginId } from '@masknet/plugin-infra/content-script'
+import { useChainId } from '@masknet/plugin-infra/web3'
+import { NetworkPluginID } from '@masknet/web3-shared-base'
+import { extractTextFromTypedMessage } from '@masknet/typed-message'
+import { parseURL } from '@masknet/shared-base'
+import { GitcoinIcon } from '@masknet/icons'
+import { PreviewCard } from './PreviewCard'
 import { Trans } from 'react-i18next'
 import { base } from '../base'
-import { PLUGIN_META_KEY, PLUGIN_NAME } from '../constants'
+import { PLUGIN_NAME, PLUGIN_META_KEY } from '../constants'
 import { DonateDialog } from './DonateDialog'
-import { PreviewCard } from './PreviewCard'
 
 const isGitcoin = (x: string): boolean => /^https:\/\/gitcoin.co\/grants\/\d+/.test(x)
+const isGitCoinSupported = (chainId: ChainId) => [ChainId.Mainnet, ChainId.Matic].includes(chainId)
 
 const sns: Plugin.SNSAdaptor.Definition = {
     ...base,
@@ -45,10 +49,18 @@ const sns: Plugin.SNSAdaptor.Definition = {
             tutorialLink: 'https://realmasknetwork.notion.site/98ed83784ed4446a8a13fa685c7bddfb',
         },
     ],
+    wrapperProps: {
+        icon: (
+            <GitcoinIcon
+                style={{ width: 24, height: 24, filter: 'drop-shadow(0px 6px 12px rgba(255, 159, 10, 0.2))' }}
+            />
+        ),
+    },
 }
 
 function Renderer(props: React.PropsWithChildren<{ url: string }>) {
     const [id = ''] = props.url.match(/\d+/) ?? []
+    const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
     usePluginWrapper(true)
     return <PreviewCard id={id} />
 }
diff --git a/packages/mask/src/plugins/Gitcoin/base.ts b/packages/mask/src/plugins/Gitcoin/base.ts
index 399adeb050cb..78aa50e571dd 100644
--- a/packages/mask/src/plugins/Gitcoin/base.ts
+++ b/packages/mask/src/plugins/Gitcoin/base.ts
@@ -1,6 +1,4 @@
 import type { Plugin } from '@masknet/plugin-infra'
-import { NetworkPluginID } from '@masknet/plugin-infra/web3'
-import { ChainId } from '@masknet/web3-shared-evm'
 import { PLUGIN_ID, PLUGIN_NAME, PLUGIN_DESCRIPTION } from './constants'
 import { languages } from './locales/languages'
 
@@ -13,13 +11,6 @@ export const base: Plugin.Shared.Definition = {
         architecture: { app: true, web: true },
         networks: { type: 'opt-out', networks: {} },
         target: 'stable',
-        web3: {
-            [NetworkPluginID.PLUGIN_EVM]: {
-                supportedChainIds: [ChainId.Mainnet, ChainId.Rinkeby, ChainId.Matic, ChainId.Mumbai],
-            },
-            [NetworkPluginID.PLUGIN_FLOW]: { supportedChainIds: [] },
-            [NetworkPluginID.PLUGIN_SOLANA]: { supportedChainIds: [] },
-        },
     },
     contribution: { postContent: new Set([/https:\/\/gitcoin.co\/grants\/\d+/]) },
     i18n: languages,
diff --git a/packages/mask/src/plugins/Gitcoin/contracts/useBulkCheckoutWallet.ts b/packages/mask/src/plugins/Gitcoin/contracts/useBulkCheckoutWallet.ts
index 16d844d82495..aa9aec128670 100644
--- a/packages/mask/src/plugins/Gitcoin/contracts/useBulkCheckoutWallet.ts
+++ b/packages/mask/src/plugins/Gitcoin/contracts/useBulkCheckoutWallet.ts
@@ -1,9 +1,10 @@
+import type { AbiItem } from 'web3-utils'
 import BulkCheckoutABI from '@masknet/web3-contracts/abis/BulkCheckout.json'
 import type { BulkCheckout } from '@masknet/web3-contracts/types/BulkCheckout'
-import { useContract, useGitcoinConstants } from '@masknet/web3-shared-evm'
-import type { AbiItem } from 'web3-utils'
+import { ChainId, useGitcoinConstants } from '@masknet/web3-shared-evm'
+import { useContract } from '@masknet/plugin-infra/web3-evm'
 
-export function useBulkCheckoutContract() {
-    const { BULK_CHECKOUT_ADDRESS } = useGitcoinConstants()
-    return useContract<BulkCheckout>(BULK_CHECKOUT_ADDRESS, BulkCheckoutABI as AbiItem[])
+export function useBulkCheckoutContract(chainId: ChainId) {
+    const { BULK_CHECKOUT_ADDRESS } = useGitcoinConstants(chainId)
+    return useContract<BulkCheckout>(chainId, BULK_CHECKOUT_ADDRESS, BulkCheckoutABI as AbiItem[])
 }
diff --git a/packages/mask/src/plugins/Gitcoin/hooks/useDonateCallback.ts b/packages/mask/src/plugins/Gitcoin/hooks/useDonateCallback.ts
index c85572035151..e507a0358af3 100644
--- a/packages/mask/src/plugins/Gitcoin/hooks/useDonateCallback.ts
+++ b/packages/mask/src/plugins/Gitcoin/hooks/useDonateCallback.ts
@@ -1,15 +1,10 @@
-import type { PayableTx } from '@masknet/web3-contracts/types/types'
-import { toFixed } from '@masknet/web3-shared-base'
-import {
-    EthereumTokenType,
-    FungibleTokenDetailed,
-    TransactionEventType,
-    useAccount,
-    useGitcoinConstants,
-} from '@masknet/web3-shared-evm'
-import BigNumber from 'bignumber.js'
 import { useMemo } from 'react'
 import { useAsyncFn } from 'react-use'
+import BigNumber from 'bignumber.js'
+import type { PayableTx } from '@masknet/web3-contracts/types/types'
+import { FungibleToken, NetworkPluginID, toFixed } from '@masknet/web3-shared-base'
+import { ChainId, SchemaType, TransactionEventType, useGitcoinConstants } from '@masknet/web3-shared-evm'
+import { useAccount, useChainId } from '@masknet/plugin-infra/web3'
 import { useBulkCheckoutContract } from '../contracts/useBulkCheckoutWallet'
 
 /**
@@ -18,11 +13,12 @@ import { useBulkCheckoutContract } from '../contracts/useBulkCheckoutWallet'
  * @param amount
  * @param token
  */
-export function useDonateCallback(address: string, amount: string, token?: FungibleTokenDetailed) {
+export function useDonateCallback(address: string, amount: string, token?: FungibleToken<ChainId, SchemaType>) {
     const { GITCOIN_ETH_ADDRESS, GITCOIN_TIP_PERCENTAGE } = useGitcoinConstants()
-    const bulkCheckoutContract = useBulkCheckoutContract()
 
-    const account = useAccount()
+    const account = useAccount(NetworkPluginID.PLUGIN_EVM)
+    const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
+    const bulkCheckoutContract = useBulkCheckoutContract(chainId)
 
     const donations = useMemo((): Array<[string, string, string]> => {
         if (!address || !token) return []
@@ -31,12 +27,12 @@ export function useDonateCallback(address: string, amount: string, token?: Fungi
         const grantAmount = new BigNumber(amount).minus(tipAmount)
         return [
             [
-                token.type === EthereumTokenType.Native ? GITCOIN_ETH_ADDRESS : token.address, // token
+                token.schema === SchemaType.Native ? GITCOIN_ETH_ADDRESS : token.address, // token
                 tipAmount.toFixed(), // amount
                 address, // dest
             ],
             [
-                token.type === EthereumTokenType.Native ? GITCOIN_ETH_ADDRESS : token.address, // token
+                token.schema === SchemaType.Native ? GITCOIN_ETH_ADDRESS : token.address, // token
                 grantAmount.toFixed(), // amount
                 address, // dest
             ],
@@ -49,7 +45,7 @@ export function useDonateCallback(address: string, amount: string, token?: Fungi
         }
 
         // estimate gas and compose transaction
-        const value = toFixed(token.type === EthereumTokenType.Native ? amount : 0)
+        const value = toFixed(token.schema === SchemaType.Native ? amount : 0)
         const config = {
             from: account,
             gas: await bulkCheckoutContract.methods
diff --git a/packages/mask/src/plugins/Gitcoin/types.tsx b/packages/mask/src/plugins/Gitcoin/types.tsx
index f15e76b6f82e..bced40b8fdc8 100644
--- a/packages/mask/src/plugins/Gitcoin/types.tsx
+++ b/packages/mask/src/plugins/Gitcoin/types.tsx
@@ -1,23 +1,11 @@
 import type BigNumber from 'bignumber.js'
-import type { ERC20TokenRecord } from '../Wallet/database/types'
-import type { ChainId, EthereumTokenType } from '@masknet/web3-shared-evm'
+import type { ChainId, SchemaType } from '@masknet/web3-shared-evm'
 
 export enum GitcoinGrantFailedReason {
     InvalidURL = 0,
     FetchFailed = 1,
 }
 
-// #endregion
-// #region gitcoin
-export interface GitcoinDonationPayload {
-    donor_address: string
-    donation_address: string
-    donation_total: BigNumber
-    chainId: ChainId
-    token_type: EthereumTokenType
-    token?: Pick<ERC20TokenRecord, 'address' | 'name' | 'decimals' | 'symbol'>
-}
-
 export interface GitcoinDonationRecord {
     /** web3 network tag enum. Mainnet or Rinkeby */
     chainId: ChainId
@@ -32,7 +20,7 @@ export interface GitcoinDonationRecord {
     /** The donation value which for project owner */
     donation_value: BigNumber
     /** token type tag for red packet */
-    token_type: EthereumTokenType
+    token_type: SchemaType
     /** The tip transaction hash */
     tip_transaction_hash?: string
     /** The tip value for Gitcoin maintainer */
diff --git a/packages/mask/src/plugins/GoodGhosting/SNSAdaptor/index.tsx b/packages/mask/src/plugins/GoodGhosting/SNSAdaptor/index.tsx
index 71f28a3b99ef..9aa335c7c232 100644
--- a/packages/mask/src/plugins/GoodGhosting/SNSAdaptor/index.tsx
+++ b/packages/mask/src/plugins/GoodGhosting/SNSAdaptor/index.tsx
@@ -7,7 +7,8 @@ import { Trans } from 'react-i18next'
 import { PreviewCard } from '../UI/PreviewCard'
 import { ChainId } from '@masknet/web3-shared-evm'
 import { base } from '../base'
-import { EthereumChainBoundary } from '../../../web3/UI/EthereumChainBoundary'
+import { ChainBoundary } from '../../../web3/UI/ChainBoundary'
+import { NetworkPluginID } from '@masknet/web3-shared-base'
 
 const isGoodGhosting = (x: string): boolean => /^https:\/\/goodghosting.com/.test(x)
 
@@ -51,9 +52,9 @@ function Renderer(props: React.PropsWithChildren<{ url: string }>) {
     usePluginWrapper(true)
 
     return (
-        <EthereumChainBoundary chainId={ChainId.Matic} renderInTimeline>
+        <ChainBoundary expectedPluginID={NetworkPluginID.PLUGIN_EVM} expectedChainId={ChainId.Matic} renderInTimeline>
             <PreviewCard id={id} />
-        </EthereumChainBoundary>
+        </ChainBoundary>
     )
 }
 
diff --git a/packages/mask/src/plugins/GoodGhosting/UI/GameAction.tsx b/packages/mask/src/plugins/GoodGhosting/UI/GameAction.tsx
index 25f07815dde2..31309fc5d150 100644
--- a/packages/mask/src/plugins/GoodGhosting/UI/GameAction.tsx
+++ b/packages/mask/src/plugins/GoodGhosting/UI/GameAction.tsx
@@ -1,11 +1,4 @@
-import {
-    formatBalance,
-    resolveTransactionLinkOnExplorer,
-    TransactionStateType,
-    useChainId,
-    useERC20TokenDetailed,
-    DAI,
-} from '@masknet/web3-shared-evm'
+import { TransactionStateType, DAI, explorerResolver } from '@masknet/web3-shared-evm'
 import { Button, Typography, Link } from '@mui/material'
 import { makeStyles } from '@masknet/theme'
 import { useState } from 'react'
@@ -15,6 +8,8 @@ import type { GoodGhostingInfo } from '../types'
 import { GameActionDialog } from './GameActionDialog'
 import { useGameToken } from '../hooks/usePoolData'
 import { isGameActionError } from '../utils'
+import { formatBalance, NetworkPluginID } from '@masknet/web3-shared-base'
+import { useChainId, useFungibleToken } from '@masknet/plugin-infra/web3'
 
 const useStyles = makeStyles()((theme) => ({
     button: {
@@ -28,7 +23,7 @@ interface GameActionProps {
 }
 
 export function GameAction(props: GameActionProps) {
-    const chainId = useChainId()
+    const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
     const gameToken = useGameToken()
 
     const { classes } = useStyles()
@@ -45,7 +40,7 @@ export function GameAction(props: GameActionProps) {
         value: tokenDetailed,
         loading: loadingToken,
         error: errorToken,
-    } = useERC20TokenDetailed(DAI[chainId]?.address)
+    } = useFungibleToken(NetworkPluginID.PLUGIN_EVM, DAI[chainId]?.address)
 
     if (loadingToken || errorToken) return <></>
 
@@ -58,7 +53,7 @@ export function GameAction(props: GameActionProps) {
             props.info.refresh()
         } catch (error) {
             if (isGameActionError(error) && error.transactionHash) {
-                const link = resolveTransactionLinkOnExplorer(chainId, error.transactionHash)
+                const link = explorerResolver.transactionLink(chainId, error.transactionHash)
                 if (error.gameActionStatus === TransactionStateType.CONFIRMED) {
                     setErrorState({
                         message: t('plugin_good_ghosting_tx_fail'),
diff --git a/packages/mask/src/plugins/GoodGhosting/UI/GameActionDialog.tsx b/packages/mask/src/plugins/GoodGhosting/UI/GameActionDialog.tsx
index 5e02a0039cb7..9b3f7cffb13d 100644
--- a/packages/mask/src/plugins/GoodGhosting/UI/GameActionDialog.tsx
+++ b/packages/mask/src/plugins/GoodGhosting/UI/GameActionDialog.tsx
@@ -1,13 +1,14 @@
 import { Box, Button, DialogContent, DialogActions, Typography } from '@mui/material'
 import { makeStyles } from '@masknet/theme'
 import { InjectedDialog } from '@masknet/shared'
-import { EthereumWalletConnectedBoundary } from '../../../web3/UI/EthereumWalletConnectedBoundary'
-import { ERC20TokenDetailed, formatBalance, useERC20TokenBalance } from '@masknet/web3-shared-evm'
+import { WalletConnectedBoundary } from '../../../web3/UI/WalletConnectedBoundary'
+import type { ChainId, SchemaType } from '@masknet/web3-shared-evm'
 import type { GoodGhostingInfo } from '../types'
 import { EthereumERC20TokenApprovedBoundary } from '../../../web3/UI/EthereumERC20TokenApprovedBoundary'
 import { useI18N } from '../../../utils'
 import { useGameToken } from '../hooks/usePoolData'
-import { isGreaterThanOrEqualTo } from '@masknet/web3-shared-base'
+import { formatBalance, FungibleToken, isGreaterThanOrEqualTo, NetworkPluginID } from '@masknet/web3-shared-base'
+import { useFungibleTokenBalance } from '@masknet/plugin-infra/web3'
 
 const useStyles = makeStyles()((theme) => ({
     content: {
@@ -38,7 +39,7 @@ interface GameActionDialogProps {
     actionText: string
     onAction: () => void
     onClose: () => void
-    token: ERC20TokenDetailed | undefined
+    token: FungibleToken<ChainId, SchemaType> | undefined
     info: GoodGhostingInfo
     needsApprove: boolean
 }
@@ -54,7 +55,7 @@ export function GameActionDialog(props: GameActionDialogProps) {
         loading: loadingTokenBalance,
         error: errorTokenBalance,
         retry: retryLoadTokenBalance,
-    } = useERC20TokenBalance(gameToken.address)
+    } = useFungibleTokenBalance(NetworkPluginID.PLUGIN_EVM, gameToken.address)
 
     const hasSufficientBalance =
         !loadingTokenBalance && !errorTokenBalance && isGreaterThanOrEqualTo(tokenBalance, info.segmentPayment)
@@ -130,7 +131,7 @@ export function GameActionDialog(props: GameActionDialogProps) {
                 </Box>
             </DialogContent>
             <DialogActions>
-                <EthereumWalletConnectedBoundary>{action}</EthereumWalletConnectedBoundary>
+                <WalletConnectedBoundary>{action}</WalletConnectedBoundary>
             </DialogActions>
         </InjectedDialog>
     )
diff --git a/packages/mask/src/plugins/GoodGhosting/UI/GameStatsView.tsx b/packages/mask/src/plugins/GoodGhosting/UI/GameStatsView.tsx
index f28555074d68..f8c9abce188a 100644
--- a/packages/mask/src/plugins/GoodGhosting/UI/GameStatsView.tsx
+++ b/packages/mask/src/plugins/GoodGhosting/UI/GameStatsView.tsx
@@ -1,4 +1,3 @@
-import { formatBalance } from '@masknet/web3-shared-evm'
 import { Grid, Typography, Box, Button } from '@mui/material'
 import { makeStyles } from '@masknet/theme'
 import type { AsyncStateRetry } from 'react-use/lib/useAsyncRetry'
@@ -7,7 +6,7 @@ import { CircularDataDisplay } from './CircularDataDisplay'
 import { useGameToken, useRewardToken } from '../hooks/usePoolData'
 import { useI18N } from '../../../utils'
 import { getGameFinancialData, getPlayerStandings, getReadableInterval } from '../utils'
-import { toFixed } from '@masknet/web3-shared-base'
+import { formatBalance, toFixed } from '@masknet/web3-shared-base'
 
 const useStyles = makeStyles()((theme) => ({
     infoRow: {
diff --git a/packages/mask/src/plugins/GoodGhosting/UI/PersonalView.tsx b/packages/mask/src/plugins/GoodGhosting/UI/PersonalView.tsx
index 98069e381dff..2ced64408e7d 100644
--- a/packages/mask/src/plugins/GoodGhosting/UI/PersonalView.tsx
+++ b/packages/mask/src/plugins/GoodGhosting/UI/PersonalView.tsx
@@ -1,10 +1,4 @@
-import {
-    formatBalance,
-    formatEthereumAddress,
-    resolveTransactionLinkOnExplorer,
-    TransactionStateType,
-    useChainId,
-} from '@masknet/web3-shared-evm'
+import { explorerResolver, formatEthereumAddress, TransactionStateType } from '@masknet/web3-shared-evm'
 import { Grid, Typography, Button, Link } from '@mui/material'
 import { makeStyles } from '@masknet/theme'
 import { useState } from 'react'
@@ -15,6 +9,8 @@ import type { GoodGhostingInfo, Player } from '../types'
 import { getPlayerStatus, isGameActionError, PlayerStatus } from '../utils'
 import BigNumber from 'bignumber.js'
 import { FormattedBalance } from '@masknet/shared'
+import { useChainId } from '@masknet/plugin-infra/web3'
+import { formatBalance, NetworkPluginID } from '@masknet/web3-shared-base'
 
 const useStyles = makeStyles()((theme) => ({
     infoRow: {
@@ -44,7 +40,7 @@ interface PersonalViewProps {
 export function PersonalView(props: PersonalViewProps) {
     const { t } = useI18N()
     const { classes } = useStyles()
-    const chainId = useChainId()
+    const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
     const gameToken = useGameToken()
     const { canEarlyWithdraw, earlyWithdraw } = useEarlyWithdraw(props.info)
     const [buttonEnabled, setButtonEnabled] = useState(true)
@@ -67,7 +63,7 @@ export function PersonalView(props: PersonalViewProps) {
             await earlyWithdraw()
         } catch (error) {
             if (isGameActionError(error) && error.transactionHash) {
-                const link = resolveTransactionLinkOnExplorer(chainId, error.transactionHash)
+                const link = explorerResolver.transactionLink(chainId, error.transactionHash)
                 if (error.gameActionStatus === TransactionStateType.CONFIRMED) {
                     setErrorState({
                         message: t('plugin_good_ghosting_tx_fail'),
diff --git a/packages/mask/src/plugins/GoodGhosting/contracts/useGoodGhostingContract.ts b/packages/mask/src/plugins/GoodGhosting/contracts/useGoodGhostingContract.ts
index 98f705cb194e..f0a4b64a24f4 100644
--- a/packages/mask/src/plugins/GoodGhosting/contracts/useGoodGhostingContract.ts
+++ b/packages/mask/src/plugins/GoodGhosting/contracts/useGoodGhostingContract.ts
@@ -1,8 +1,9 @@
 import type { AbiItem } from 'web3-utils'
 import type { GoodGhostingPolygon } from '@masknet/web3-contracts/types/GoodGhostingPolygon'
 import GoodGhostingPolygonABI from '@masknet/web3-contracts/abis/GoodGhostingPolygon.json'
-import { useContract } from '@masknet/web3-shared-evm'
+import { useContract } from '@masknet/plugin-infra/web3-evm'
+import type { ChainId } from '@masknet/web3-shared-evm'
 
-export function useGoodGhostingContract(address: string) {
-    return useContract<GoodGhostingPolygon>(address, GoodGhostingPolygonABI as AbiItem[])
+export function useGoodGhostingContract(chainId: ChainId, address: string) {
+    return useContract<GoodGhostingPolygon>(chainId, address, GoodGhostingPolygonABI as AbiItem[])
 }
diff --git a/packages/mask/src/plugins/GoodGhosting/contracts/useGoodGhostingIncentivesContract.ts b/packages/mask/src/plugins/GoodGhosting/contracts/useGoodGhostingIncentivesContract.ts
index aa8c26ee6ac6..9a1c651f914f 100644
--- a/packages/mask/src/plugins/GoodGhosting/contracts/useGoodGhostingIncentivesContract.ts
+++ b/packages/mask/src/plugins/GoodGhosting/contracts/useGoodGhostingIncentivesContract.ts
@@ -1,11 +1,13 @@
 import type { AbiItem } from 'web3-utils'
 import type { GoodGhostingIncentives } from '@masknet/web3-contracts/types/GoodGhostingIncentives'
 import GoodGhostingIncentivesABI from '@masknet/web3-contracts/abis/GoodGhostingIncentives.json'
-import { useContract, useGoodGhostingConstants } from '@masknet/web3-shared-evm'
+import { ChainId, useGoodGhostingConstants } from '@masknet/web3-shared-evm'
+import { useContract } from '@masknet/plugin-infra/web3-evm'
 
-export function useGoodGhostingIncentiveContract() {
+export function useGoodGhostingIncentiveContract(chainId: ChainId) {
     const { GOOD_GHOSTING_INCENTIVES_CONTRACT_ADDRESS } = useGoodGhostingConstants()
     return useContract<GoodGhostingIncentives>(
+        chainId,
         GOOD_GHOSTING_INCENTIVES_CONTRACT_ADDRESS,
         GoodGhostingIncentivesABI as AbiItem[],
     )
diff --git a/packages/mask/src/plugins/GoodGhosting/hooks/useGameActions.ts b/packages/mask/src/plugins/GoodGhosting/hooks/useGameActions.ts
index 9d193e293a44..2d1273871a2c 100644
--- a/packages/mask/src/plugins/GoodGhosting/hooks/useGameActions.ts
+++ b/packages/mask/src/plugins/GoodGhosting/hooks/useGameActions.ts
@@ -1,12 +1,15 @@
-import { TransactionEventType, TransactionStateType, useAccount, useGasPrice } from '@masknet/web3-shared-evm'
+import { TransactionEventType, TransactionStateType } from '@masknet/web3-shared-evm'
 import { useGoodGhostingContract } from '../contracts/useGoodGhostingContract'
 import type { GoodGhostingInfo } from '../types'
 import { getPlayerStatus, PlayerStatus } from '../utils'
 import type { TransactionReceipt } from 'web3-core'
+import { useAccount, useChainId } from '@masknet/plugin-infra/web3'
+import { NetworkPluginID } from '@masknet/web3-shared-base'
 
 export function useJoinGame(info: GoodGhostingInfo) {
-    const account = useAccount()
-    const contract = useGoodGhostingContract(info.contractAddress)
+    const account = useAccount(NetworkPluginID.PLUGIN_EVM)
+    const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
+    const contract = useGoodGhostingContract(chainId, info.contractAddress)
     const canJoinGame =
         (!info.currentPlayer || info.currentPlayer.canRejoin) &&
         info.currentSegment === 0 &&
@@ -51,9 +54,9 @@ export function useJoinGame(info: GoodGhostingInfo) {
 }
 
 export function useMakeDeposit(info: GoodGhostingInfo) {
-    const account = useAccount()
-    const contract = useGoodGhostingContract(info.contractAddress)
-    const gasPrice = useGasPrice()
+    const account = useAccount(NetworkPluginID.PLUGIN_EVM)
+    const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
+    const contract = useGoodGhostingContract(chainId, info.contractAddress)
 
     const status = getPlayerStatus(info, info.currentPlayer)
     const canMakeDeposit =
@@ -95,9 +98,9 @@ export function useMakeDeposit(info: GoodGhostingInfo) {
 }
 
 export function useWithdraw(info: GoodGhostingInfo) {
-    const account = useAccount()
-    const contract = useGoodGhostingContract(info.contractAddress)
-    const gasPrice = useGasPrice()
+    const account = useAccount(NetworkPluginID.PLUGIN_EVM)
+    const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
+    const contract = useGoodGhostingContract(chainId, info.contractAddress)
 
     const canWithdraw = info.currentPlayer && !info.currentPlayer.withdrawn && info.gameHasEnded
 
@@ -133,9 +136,9 @@ export function useWithdraw(info: GoodGhostingInfo) {
 }
 
 export function useEarlyWithdraw(info: GoodGhostingInfo) {
-    const account = useAccount()
-    const contract = useGoodGhostingContract(info.contractAddress)
-    const gasPrice = useGasPrice()
+    const account = useAccount(NetworkPluginID.PLUGIN_EVM)
+    const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
+    const contract = useGoodGhostingContract(chainId, info.contractAddress)
 
     const canEarlyWithdraw =
         info.currentPlayer && !info.currentPlayer.withdrawn && info.currentSegment < info.lastSegment
diff --git a/packages/mask/src/plugins/GoodGhosting/hooks/useGameInfo.ts b/packages/mask/src/plugins/GoodGhosting/hooks/useGameInfo.ts
index cc22a06884f4..2a4c0ce9131c 100644
--- a/packages/mask/src/plugins/GoodGhosting/hooks/useGameInfo.ts
+++ b/packages/mask/src/plugins/GoodGhosting/hooks/useGameInfo.ts
@@ -1,10 +1,4 @@
-import {
-    isZeroAddress,
-    useAccount,
-    useGoodGhostingConstants,
-    useSingleContractMultipleData,
-    ZERO_ADDRESS,
-} from '@masknet/web3-shared-evm'
+import { isZeroAddress, useGoodGhostingConstants, ZERO_ADDRESS } from '@masknet/web3-shared-evm'
 import { useMemo } from 'react'
 import { useAsyncRetry } from 'react-use'
 import type { AsyncStateRetry } from 'react-use/lib/useAsyncRetry'
@@ -13,6 +7,9 @@ import type { GameMetaData, GoodGhostingInfo, Player, TimelineEvent } from '../t
 import { useI18N } from '../../../utils'
 import addSeconds from 'date-fns/addSeconds'
 import Services from '../../../extension/service'
+import { useAccount, useChainId } from '@masknet/plugin-infra/web3'
+import { useSingleContractMultipleData } from '@masknet/plugin-infra/web3-evm'
+import { NetworkPluginID } from '@masknet/web3-shared-base'
 
 export function useGameContractAddress(id: string) {
     const { GOOD_GHOSTING_CONTRACT_ADDRESS_FILE } = useGoodGhostingConstants()
@@ -31,7 +28,8 @@ export function useGameContractAddress(id: string) {
 }
 
 export function useGameInfo(gameData: GameMetaData) {
-    const contract = useGoodGhostingContract(gameData.contractAddress)
+    const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
+    const contract = useGoodGhostingContract(chainId, gameData.contractAddress)
     const account = useAccount()
     const { names, callDatas } = useMemo(() => {
         const names = [
diff --git a/packages/mask/src/plugins/GoodGhosting/hooks/useOtherPlayerInfo.ts b/packages/mask/src/plugins/GoodGhosting/hooks/useOtherPlayerInfo.ts
index f524db70776b..ac10a2cf6458 100644
--- a/packages/mask/src/plugins/GoodGhosting/hooks/useOtherPlayerInfo.ts
+++ b/packages/mask/src/plugins/GoodGhosting/hooks/useOtherPlayerInfo.ts
@@ -1,12 +1,15 @@
-import { useSingleContractMultipleData } from '@masknet/web3-shared-evm'
 import { useMemo } from 'react'
 import { useAsyncRetry } from 'react-use'
 import type { AsyncStateRetry } from 'react-use/lib/useAsyncRetry'
+import { useSingleContractMultipleData } from '@masknet/plugin-infra/web3-evm'
+import { useChainId } from '@masknet/plugin-infra/web3'
+import { NetworkPluginID } from '@masknet/web3-shared-base'
 import { useGoodGhostingContract } from '../contracts/useGoodGhostingContract'
 import type { GoodGhostingInfo, Player } from '../types'
 
 export function useOtherPlayerInfo(info: GoodGhostingInfo) {
-    const contract = useGoodGhostingContract(info.contractAddress)
+    const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
+    const contract = useGoodGhostingContract(chainId, info.contractAddress)
 
     const { addressNames, addressCallDatas } = useMemo(
         () => ({
diff --git a/packages/mask/src/plugins/GoodGhosting/hooks/usePoolData.ts b/packages/mask/src/plugins/GoodGhosting/hooks/usePoolData.ts
index 9554eac89111..9544077ece29 100644
--- a/packages/mask/src/plugins/GoodGhosting/hooks/usePoolData.ts
+++ b/packages/mask/src/plugins/GoodGhosting/hooks/usePoolData.ts
@@ -1,11 +1,7 @@
-import {
-    useAssets,
-    useChainId,
-    useERC20TokenContract,
-    useERC20TokenDetailed,
-    DAI,
-    WNATIVE as WETH,
-} from '@masknet/web3-shared-evm'
+import { useERC20TokenContract } from '@masknet/plugin-infra/web3-evm'
+import { useChainId, useFungibleToken, useFungibleAssets } from '@masknet/plugin-infra/web3'
+import { NetworkPluginID } from '@masknet/web3-shared-base'
+import { DAI, WNATIVE as WETH } from '@masknet/web3-shared-evm'
 import { useState } from 'react'
 import { useAsyncRetry } from 'react-use'
 import type { AsyncStateRetry } from 'react-use/lib/useAsyncRetry'
@@ -14,11 +10,12 @@ import { useGoodGhostingIncentiveContract } from '../contracts/useGoodGhostingIn
 import type { GameAssets, GoodGhostingInfo, LendingPoolData } from '../types'
 
 export function usePoolData(info: GoodGhostingInfo) {
+    const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
     const rewardToken = useRewardToken()
-    const contract = useGoodGhostingContract(info.contractAddress)
-    const adaiContract = useERC20TokenContract(info.adaiTokenAddress)
-    const rewardTokenContract = useERC20TokenContract(rewardToken.address)
-    const incentivesContract = useGoodGhostingIncentiveContract()
+    const contract = useGoodGhostingContract(chainId, info.contractAddress)
+    const adaiContract = useERC20TokenContract(chainId, info.adaiTokenAddress)
+    const rewardTokenContract = useERC20TokenContract(chainId, rewardToken.address)
+    const incentivesContract = useGoodGhostingIncentiveContract(chainId)
     const [currentData, setCurrentData] = useState<LendingPoolData>()
 
     const asyncResult = useAsyncRetry(async () => {
@@ -45,16 +42,17 @@ export function usePoolData(info: GoodGhostingInfo) {
 }
 
 export function useGameToken() {
-    const chainId = useChainId()
+    const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
     return DAI[chainId]
 }
 
 export function useRewardToken() {
-    const chainId = useChainId()
+    const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
     return WETH[chainId]
 }
 
 export function usePoolAssets(): AsyncStateRetry<GameAssets> {
+    const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
     const gameToken = useGameToken()
     const rewardToken = useRewardToken()
 
@@ -63,17 +61,19 @@ export function usePoolAssets(): AsyncStateRetry<GameAssets> {
         loading: gameTokenLoading,
         error: gameTokenError,
         retry: gameTokenRetry,
-    } = useERC20TokenDetailed(gameToken.address)
+    } = useFungibleToken(NetworkPluginID.PLUGIN_EVM, gameToken.address, {
+        chainId,
+    })
     const {
         value: rewardTokenDetailed,
         loading: rewardTokenLoading,
         error: rewardTokenError,
         retry: rewardTokenRetry,
-    } = useERC20TokenDetailed(rewardToken.address)
+    } = useFungibleToken(NetworkPluginID.PLUGIN_EVM, rewardToken.address, {
+        chainId,
+    })
 
-    const assets = gameTokenDetailed && rewardTokenDetailed ? [gameTokenDetailed, rewardTokenDetailed] : []
-
-    const { value, loading, error, retry } = useAssets(assets)
+    const { value, loading, error, retry } = useFungibleAssets(NetworkPluginID.PLUGIN_EVM)
 
     const assetRetry = () => {
         if (gameTokenError) gameTokenRetry()
@@ -83,8 +83,8 @@ export function usePoolAssets(): AsyncStateRetry<GameAssets> {
 
     let gameAssets
     if (value?.length) {
-        const gameAsset = value.find((asset) => asset.token.address === gameToken.address)
-        const rewardAsset = value.find((asset) => asset.token.address === rewardToken.address)
+        const gameAsset = value.find((asset) => asset.address === gameToken.address)
+        const rewardAsset = value.find((asset) => asset.address === rewardToken.address)
         gameAssets = {
             gameAsset,
             rewardAsset,
diff --git a/packages/mask/src/plugins/GoodGhosting/types.tsx b/packages/mask/src/plugins/GoodGhosting/types.tsx
index 71070b0e7666..88c640155245 100644
--- a/packages/mask/src/plugins/GoodGhosting/types.tsx
+++ b/packages/mask/src/plugins/GoodGhosting/types.tsx
@@ -1,5 +1,6 @@
-import type { Asset, TransactionStateType } from '@masknet/web3-shared-evm'
 import type BigNumber from 'bignumber.js'
+import type { FungibleAsset } from '@masknet/web3-shared-base'
+import type { ChainId, SchemaType, TransactionStateType } from '@masknet/web3-shared-evm'
 
 export interface GameMetaData {
     contractAddress: string
@@ -61,8 +62,8 @@ export interface GameFinancialData {
 }
 
 export interface GameAssets {
-    gameAsset: Asset
-    rewardAsset: Asset
+    gameAsset: FungibleAsset<ChainId, SchemaType>
+    rewardAsset: FungibleAsset<ChainId, SchemaType>
 }
 
 export interface GameActionError {
diff --git a/packages/mask/src/plugins/GoodGhosting/utils.ts b/packages/mask/src/plugins/GoodGhosting/utils.ts
index 67bbd242743b..c321733f9ec8 100644
--- a/packages/mask/src/plugins/GoodGhosting/utils.ts
+++ b/packages/mask/src/plugins/GoodGhosting/utils.ts
@@ -12,9 +12,9 @@ import addSeconds from 'date-fns/addSeconds'
 import differenceInDays from 'date-fns/differenceInDays'
 import formatDuration from 'date-fns/formatDuration'
 import isBefore from 'date-fns/isBefore'
-import { CurrencyType, TransactionStateType } from '@masknet/web3-shared-evm'
+import { TransactionStateType } from '@masknet/web3-shared-evm'
 import BigNumber from 'bignumber.js'
-import { isZero, multipliedBy, ZERO } from '@masknet/web3-shared-base'
+import { CurrencyType, isZero, multipliedBy, ZERO } from '@masknet/web3-shared-base'
 
 export enum PlayerStatus {
     Winning = 'winning',
@@ -99,7 +99,7 @@ export function getGameFinancialData(
         ? ZERO
         : new BigNumber(poolData.totalAdai).minus(info.totalGamePrincipal)
     const gameInterest = new BigNumber(info.gameHasEnded ? info.totalGameInterest : rawPoolInterest).multipliedBy(
-        assets.gameAsset?.price ? assets.gameAsset?.price[CurrencyType.USD] : 1,
+        assets.gameAsset?.price ? assets.gameAsset?.price[CurrencyType.USD] ?? 1 : 1,
     )
 
     const gameRewards = new BigNumber(poolData.reward)
@@ -108,7 +108,7 @@ export function getGameFinancialData(
                 ? new BigNumber(playerStandings.winning).multipliedBy(info.rewardsPerPlayer)
                 : poolData.incentives,
         )
-        .multipliedBy(assets.rewardAsset?.price ? assets.rewardAsset?.price[CurrencyType.USD] : 0)
+        .multipliedBy(assets.rewardAsset?.price ? assets.rewardAsset?.price[CurrencyType.USD] ?? 0 : 0)
 
     const totalEarnings = gameInterest.plus(gameRewards)
     const winnerGains = totalEarnings.div(playerStandings.winning || 1)
@@ -121,7 +121,7 @@ export function getGameFinancialData(
     const dividend = winnerGains.multipliedBy(365)
     const divisor = expectedPayment
         .multipliedBy(gameDuration)
-        .multipliedBy(assets.gameAsset?.price ? assets.gameAsset?.price[CurrencyType.USD] : 1)
+        .multipliedBy(assets.gameAsset?.price ? assets.gameAsset?.price[CurrencyType.USD] ?? 1 : 1)
 
     const poolAPY = dividend.dividedBy(divisor).multipliedBy(100)
 
diff --git a/packages/mask/src/plugins/ITO/SNSAdaptor/ClaimAllDialog.tsx b/packages/mask/src/plugins/ITO/SNSAdaptor/ClaimAllDialog.tsx
index ce75f3efdb90..e383101eb036 100644
--- a/packages/mask/src/plugins/ITO/SNSAdaptor/ClaimAllDialog.tsx
+++ b/packages/mask/src/plugins/ITO/SNSAdaptor/ClaimAllDialog.tsx
@@ -1,35 +1,30 @@
-import { PluginId, useActivatedPlugin } from '@masknet/plugin-infra/dom'
-import { useCurrentWeb3NetworkPluginID } from '@masknet/plugin-infra/web3'
-import { FormattedBalance, InjectedDialog, useOpenShareTxDialog } from '@masknet/shared'
-import { makeStyles, SnackbarProvider } from '@masknet/theme'
 import {
-    ChainId,
-    EthereumTokenType,
-    formatBalance,
-    isSameAddress,
     useAccount,
     useChainId,
-    useERC20TokenDetailed,
-    useFungibleTokensDetailed,
-    useITOConstants,
-} from '@masknet/web3-shared-evm'
-import { CircularProgress, DialogContent, List, ListItem, Typography, useTheme } from '@mui/material'
-import classNames from 'classnames'
-import formatDateTime from 'date-fns/format'
+    useFungibleToken,
+    useCurrentWeb3NetworkPluginID,
+    useFungibleTokens,
+} from '@masknet/plugin-infra/web3'
+import { PluginId, useActivatedPlugin } from '@masknet/plugin-infra/dom'
+import { useState, useLayoutEffect, useRef, useCallback } from 'react'
 import { flatten, uniq } from 'lodash-unified'
-import { useCallback, useLayoutEffect, useRef, useState } from 'react'
-import { Flags } from '../../../../shared'
+import formatDateTime from 'date-fns/format'
+import { SnackbarProvider, makeStyles } from '@masknet/theme'
+import { InjectedDialog, FormattedBalance, useOpenShareTxDialog } from '@masknet/shared'
+import { DialogContent, CircularProgress, Typography, List, ListItem, useTheme } from '@mui/material'
+import { formatBalance, NetworkPluginID, isSameAddress, FungibleToken } from '@masknet/web3-shared-base'
+import { useITOConstants, ChainId, SchemaType } from '@masknet/web3-shared-evm'
+import classNames from 'classnames'
 import { NetworkTab } from '../../../components/shared/NetworkTab'
 import { WalletStatusBox } from '../../../components/shared/WalletStatusBox'
-import ActionButton from '../../../extension/options-page/DashboardComponents/ActionButton'
 import { useI18N } from '../../../utils'
-import { EthereumChainBoundary } from '../../../web3/UI/EthereumChainBoundary'
-import { EthereumWalletConnectedBoundary } from '../../../web3/UI/EthereumWalletConnectedBoundary'
-import type { SwappedTokenType } from '../types'
+import { Flags } from '../../../../shared'
 import { useClaimAll } from './hooks/useClaimAll'
 import { useClaimCallback } from './hooks/useClaimCallback'
-import { useSpaceStationCampaignInfo } from './hooks/useSpaceStationCampaignInfo'
-import { NftAirdropCard } from './NftAirdropCard'
+import ActionButton from '../../../extension/options-page/DashboardComponents/ActionButton'
+import { WalletConnectedBoundary } from '../../../web3/UI/WalletConnectedBoundary'
+import { ChainBoundary } from '../../../web3/UI/ChainBoundary'
+import type { SwappedTokenType } from '../types'
 
 interface StyleProps {
     shortITOwrapper: boolean
@@ -231,27 +226,22 @@ export function ClaimAllDialog(props: ClaimAllDialogProps) {
     const pluginId = useCurrentWeb3NetworkPluginID()
     const chainIdList = ITO_Definition?.enableRequirement.web3?.[pluginId]?.supportedChainIds ?? []
     const DialogRef = useRef<HTMLDivElement>(null)
-    const account = useAccount()
-    const currentChainId = useChainId()
-    const {
-        value: campaignInfos,
-        loading: loadingAirdrop,
-        retry: retryAirdrop,
-    } = useSpaceStationCampaignInfo(account, Flags.nft_airdrop_enabled)
+    const account = useAccount(NetworkPluginID.PLUGIN_EVM)
+    const currentChainId = useChainId(NetworkPluginID.PLUGIN_EVM)
 
     const [chainId, setChainId] = useState(chainIdList.includes(currentChainId) ? currentChainId : ChainId.Mainnet)
     const { value: _swappedTokens, loading: _loading, retry } = useClaimAll(account, chainId)
-    const { value: swappedTokensWithDetailed = [], loading: loadingTokenDetailed } = useFungibleTokensDetailed(
-        (_swappedTokens ?? []).map((t) => ({
-            address: t.token.address,
-            type: EthereumTokenType.ERC20,
-        })),
-        chainId,
+    const { value: swappedTokensWithDetailed = [], loading: loadingTokenDetailed } = useFungibleTokens(
+        NetworkPluginID.PLUGIN_EVM,
+        (_swappedTokens ?? []).map((t) => t.token.address) ?? [],
+        {
+            chainId,
+        },
     )
     const loading = _loading || loadingTokenDetailed
     const swappedTokens = _swappedTokens?.map((t) => {
         const tokenDetailed = swappedTokensWithDetailed.find((v) => isSameAddress(t.token.address, v.address))
-        if (tokenDetailed) t.token = tokenDetailed
+        if (tokenDetailed) t.token = tokenDetailed as FungibleToken<ChainId, SchemaType.ERC20 | SchemaType.Native>
         return t
     })
     const { ITO2_CONTRACT_ADDRESS } = useITOConstants(chainId)
@@ -259,7 +249,6 @@ export function ClaimAllDialog(props: ClaimAllDialogProps) {
     const claimablePids = uniq(flatten(swappedTokens?.filter((t) => t.isClaimable).map((t) => t.pids)))
 
     const [{ loading: isClaiming }, claimCallback] = useClaimCallback(claimablePids, ITO2_CONTRACT_ADDRESS)
-
     const openShareTxDialog = useOpenShareTxDialog()
     const claim = useCallback(async () => {
         const hash = await claimCallback()
@@ -271,9 +260,8 @@ export function ClaimAllDialog(props: ClaimAllDialogProps) {
             },
         })
     }, [claimCallback, openShareTxDialog, retry])
-    const showNftAirdrop = chainId === ChainId.Matic && campaignInfos && Flags.nft_airdrop_enabled
     const { classes } = useStyles({
-        shortITOwrapper: (showNftAirdrop && (!swappedTokens || swappedTokens.length === 0)) || !showNftAirdrop,
+        shortITOwrapper: !swappedTokens || swappedTokens.length === 0,
     })
     const [initLoading, setInitLoading] = useState(true)
     useLayoutEffect(() => {
@@ -296,16 +284,6 @@ export function ClaimAllDialog(props: ClaimAllDialogProps) {
                         <NetworkTab chainId={chainId} setChainId={setChainId} classes={classes} chains={chainIdList} />
                     </div>
                     <div className={classes.contentWrapper} ref={DialogRef}>
-                        {(showNftAirdrop || loadingAirdrop) &&
-                        chainId === ChainId.Matic &&
-                        Flags.nft_airdrop_enabled ? (
-                            <NftAirdropCard
-                                campaignInfos={campaignInfos!}
-                                loading={loadingAirdrop}
-                                retry={retryAirdrop}
-                            />
-                        ) : null}
-
                         {loading || initLoading || !swappedTokens ? (
                             <div className={classes.emptyContentWrapper}>
                                 <CircularProgress size={24} />
@@ -314,30 +292,30 @@ export function ClaimAllDialog(props: ClaimAllDialogProps) {
                             <div className={classes.content}>
                                 <Content swappedTokens={swappedTokens} chainId={chainId} />
                             </div>
-                        ) : !showNftAirdrop && !loadingAirdrop ? (
+                        ) : (
                             <div className={classes.emptyContentWrapper}>
                                 <Typography color="textPrimary">{t('plugin_ito_no_claimable_token')} </Typography>
                             </div>
-                        ) : null}
+                        )}
                         {(swappedTokens && swappedTokens.length > 0) ||
                         (chainId === ChainId.Matic && Flags.nft_airdrop_enabled) ? (
                             <div className={classes.actionButtonWrapper}>
-                                <EthereumChainBoundary
-                                    chainId={chainId}
+                                <ChainBoundary
+                                    expectedPluginID={NetworkPluginID.PLUGIN_EVM}
+                                    expectedChainId={chainId}
                                     classes={{ switchButton: classes.claimAllButton }}
                                     noSwitchNetworkTip
                                     ActionButtonPromiseProps={{
                                         size: 'large',
-                                    }}
-                                    disablePadding
-                                    switchButtonStyle={{
-                                        minHeight: 'auto',
-                                        width: '100%',
-                                        fontSize: 18,
-                                        fontWeight: 400,
+                                        sx: {
+                                            minHeight: 'auto',
+                                            width: '100%',
+                                            fontSize: 18,
+                                            fontWeight: 400,
+                                        },
                                     }}>
                                     {swappedTokens?.length ? (
-                                        <EthereumWalletConnectedBoundary
+                                        <WalletConnectedBoundary
                                             classes={{
                                                 connectWallet: classes.claimAllButton,
                                             }}>
@@ -350,11 +328,11 @@ export function ClaimAllDialog(props: ClaimAllDialogProps) {
                                                 onClick={claim}>
                                                 {t('plugin_ito_claim_all')}
                                             </ActionButton>
-                                        </EthereumWalletConnectedBoundary>
+                                        </WalletConnectedBoundary>
                                     ) : (
                                         <div />
                                     )}
-                                </EthereumChainBoundary>
+                                </ChainBoundary>
                             </div>
                         ) : null}
                     </div>
@@ -393,7 +371,9 @@ function SwappedToken({ i, swappedToken, chainId }: SwappedTokensProps) {
     const { t } = useI18N()
     const theme = useTheme()
     const { classes } = useStyles({ shortITOwrapper: false })
-    const { value: _token } = useERC20TokenDetailed(swappedToken.token.address, undefined, chainId)
+    const { value: _token } = useFungibleToken(NetworkPluginID.PLUGIN_EVM, swappedToken.token.address, {
+        chainId,
+    })
     const token = _token ?? swappedToken.token
     return (
         <ListItem key={i} className={classes.tokenCard}>
diff --git a/packages/mask/src/plugins/ITO/SNSAdaptor/CompositionDialog.tsx b/packages/mask/src/plugins/ITO/SNSAdaptor/CompositionDialog.tsx
index 0b58fa0450a0..c0073c603506 100644
--- a/packages/mask/src/plugins/ITO/SNSAdaptor/CompositionDialog.tsx
+++ b/packages/mask/src/plugins/ITO/SNSAdaptor/CompositionDialog.tsx
@@ -3,14 +3,13 @@ import { InjectedDialog, InjectedDialogProps, useOpenShareTxDialog } from '@mask
 import { EnhanceableSite } from '@masknet/shared-base'
 import { useRemoteControlledDialog } from '@masknet/shared-base-ui'
 import { makeStyles } from '@masknet/theme'
-import { useAccount, useChainId, useITOConstants } from '@masknet/web3-shared-evm'
+import { useITOConstants } from '@masknet/web3-shared-evm'
 import { DialogContent } from '@mui/material'
 import { omit, set } from 'lodash-unified'
 import { useCallback, useEffect, useState } from 'react'
 import Web3Utils from 'web3-utils'
 import { useCurrentIdentity, useCurrentLinkedPersona } from '../../../components/DataSource/useActivatedUI'
 import AbstractTab, { AbstractTabProps } from '../../../components/shared/AbstractTab'
-import Services from '../../../extension/service'
 import { activatedSocialNetworkUI } from '../../../social-network'
 import { useI18N } from '../../../utils'
 import { WalletMessages } from '../../Wallet/messages'
@@ -20,8 +19,10 @@ import { DialogTabs, JSON_PayloadInMask } from '../types'
 import { ConfirmDialog } from './ConfirmDialog'
 import { CreateForm } from './CreateForm'
 import { payloadOutMask } from './helpers'
-import { PoolSettings, useFillCallback } from './hooks/useFill'
 import { PoolList } from './PoolList'
+import { useAccount, useChainId, useWeb3Connection } from '@masknet/plugin-infra/web3'
+import { NetworkPluginID } from '@masknet/web3-shared-base'
+import { PoolSettings, useFillCallback } from './hooks/useFill'
 
 interface StyleProps {
     snsId: string
@@ -54,8 +55,9 @@ export interface CompositionDialogProps extends withClasses<'root'>, Omit<Inject
 export function CompositionDialog(props: CompositionDialogProps) {
     const { t } = useI18N()
 
-    const account = useAccount()
-    const chainId = useChainId()
+    const account = useAccount(NetworkPluginID.PLUGIN_EVM)
+    const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
+    const connection = useWeb3Connection(NetworkPluginID.PLUGIN_EVM, { chainId })
     const { classes } = useStyles({ snsId: activatedSocialNetworkUI.networkIdentifier })
     const { attachMetadata, dropMetadata } = useCompositionContext()
 
@@ -148,7 +150,10 @@ export function CompositionDialog(props: CompositionDialogProps) {
         async (payload: JSON_PayloadInMask) => {
             if (!payload.password) {
                 const [, title] = payload.message.split(MSG_DELIMITER)
-                payload.password = await Services.Ethereum.personalSign(Web3Utils.sha3(title) ?? '', account)
+                payload.password =
+                    (await connection?.signMessage(Web3Utils.sha3(title) ?? '', 'personaSign', {
+                        account,
+                    })) ?? ''
             }
             if (!payload.password) {
                 alert('Failed to sign the password.')
diff --git a/packages/mask/src/plugins/ITO/SNSAdaptor/ConfirmDialog.tsx b/packages/mask/src/plugins/ITO/SNSAdaptor/ConfirmDialog.tsx
index 26897ad7184f..6143e43afe12 100644
--- a/packages/mask/src/plugins/ITO/SNSAdaptor/ConfirmDialog.tsx
+++ b/packages/mask/src/plugins/ITO/SNSAdaptor/ConfirmDialog.tsx
@@ -1,15 +1,13 @@
 import { FormattedAddress, FormattedBalance } from '@masknet/shared'
 import {
-    formatBalance,
     formatEthereumAddress,
-    FungibleTokenDetailed,
     isNativeTokenAddress,
-    resolveAddressLinkOnExplorer,
-    resolveTokenLinkOnExplorer,
-    useChainId,
+    explorerResolver,
     useITOConstants,
+    SchemaType,
+    ChainId,
 } from '@masknet/web3-shared-evm'
-import { ONE } from '@masknet/web3-shared-base'
+import { formatBalance, FungibleToken, NetworkPluginID, ONE } from '@masknet/web3-shared-base'
 import { Card, Grid, IconButton, Link, Paper, Typography } from '@mui/material'
 import { makeStyles } from '@masknet/theme'
 import LaunchIcon from '@mui/icons-material/Launch'
@@ -20,6 +18,7 @@ import ActionButton from '../../../extension/options-page/DashboardComponents/Ac
 import { useI18N } from '../../../utils'
 import type { PoolSettings } from './hooks/useFill'
 import { decodeRegionCode, regionCodes } from './hooks/useRegion'
+import { useChainId } from '@masknet/plugin-infra/web3'
 
 const useSwapItemStyles = makeStyles()({
     root: {
@@ -30,9 +29,9 @@ const useSwapItemStyles = makeStyles()({
     },
 })
 interface SwapItemProps {
-    token?: FungibleTokenDetailed
+    token?: FungibleToken<ChainId, SchemaType>
+    swap?: FungibleToken<ChainId, SchemaType>
     swapAmount?: string
-    swap?: FungibleTokenDetailed
 }
 
 function SwapItem(props: SwapItemProps) {
@@ -119,7 +118,7 @@ export function ConfirmDialog(props: ConfirmDialogProps) {
     const { poolSettings, loading, onDone, onBack, onClose } = props
     const { t } = useI18N()
     const { classes } = useStyles()
-    const chainId = useChainId()
+    const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
     const { DEFAULT_QUALIFICATION2_ADDRESS } = useITOConstants()
     const showQualification =
         poolSettings?.advanceSettingData.contract &&
@@ -148,10 +147,10 @@ export function ConfirmDialog(props: ConfirmDialogProps) {
                         <Typography variant="body1" component="span">
                             {poolSettings?.token?.symbol}
                         </Typography>
-                        {isNativeTokenAddress(poolSettings?.token) ? null : (
+                        {isNativeTokenAddress(poolSettings?.token?.address) ? null : (
                             <Link
                                 className={classes.link}
-                                href={resolveTokenLinkOnExplorer(poolSettings?.token!)}
+                                href={explorerResolver.fungibleTokenLink(chainId, poolSettings?.token?.address!)}
                                 target="_blank"
                                 rel="noopener noreferrer"
                                 onClick={stop}>
@@ -252,7 +251,7 @@ export function ConfirmDialog(props: ConfirmDialogProps) {
                         <Grid item xs={6}>
                             <Paper className={classes.data}>
                                 <Link
-                                    href={resolveAddressLinkOnExplorer(chainId, poolSettings?.qualificationAddress!)}
+                                    href={explorerResolver.addressLink(chainId, poolSettings?.qualificationAddress!)}
                                     target="_blank"
                                     rel="noopener noreferrer">
                                     <Typography>
diff --git a/packages/mask/src/plugins/ITO/SNSAdaptor/CreateForm.tsx b/packages/mask/src/plugins/ITO/SNSAdaptor/CreateForm.tsx
index c8bae09984d3..da550cdc86b2 100644
--- a/packages/mask/src/plugins/ITO/SNSAdaptor/CreateForm.tsx
+++ b/packages/mask/src/plugins/ITO/SNSAdaptor/CreateForm.tsx
@@ -1,13 +1,5 @@
-import {
-    ERC20TokenDetailed,
-    EthereumTokenType,
-    formatAmount,
-    formatBalance,
-    useAccount,
-    useITOConstants,
-    useFungibleTokenBalance,
-} from '@masknet/web3-shared-evm'
-import { isGreaterThan, isZero } from '@masknet/web3-shared-base'
+import { SchemaType, formatAmount, useITOConstants, ChainId } from '@masknet/web3-shared-evm'
+import { formatBalance, isGreaterThan, isZero, NetworkPluginID, FungibleToken } from '@masknet/web3-shared-base'
 import { Box, CircularProgress, Stack, TextField, Typography } from '@mui/material'
 import { makeStyles, useStylesExtends } from '@masknet/theme'
 import CheckIcon from '@mui/icons-material/Check'
@@ -22,7 +14,7 @@ import ActionButton from '../../../extension/options-page/DashboardComponents/Ac
 import { sliceTextByUILength, useI18N } from '../../../utils'
 import { DateTimePanel } from '../../../web3/UI/DateTimePanel'
 import { EthereumERC20TokenApprovedBoundary } from '../../../web3/UI/EthereumERC20TokenApprovedBoundary'
-import { EthereumWalletConnectedBoundary } from '../../../web3/UI/EthereumWalletConnectedBoundary'
+import { WalletConnectedBoundary } from '../../../web3/UI/WalletConnectedBoundary'
 import type { ExchangeTokenAndAmountState } from './hooks/useExchangeTokenAmountstate'
 import type { PoolSettings } from './hooks/useFill'
 import { useQualificationVerify } from './hooks/useQualificationVerify'
@@ -30,6 +22,7 @@ import { decodeRegionCode, encodeRegionCode, regionCodes, useRegionSelect } from
 import { AdvanceSettingData, AdvanceSetting } from './AdvanceSetting'
 import { ExchangeTokenPanelGroup } from './ExchangeTokenPanelGroup'
 import { RegionSelect } from './RegionSelect'
+import { useAccount, useFungibleTokenBalance } from '@masknet/plugin-infra/web3'
 
 const useStyles = makeStyles()((theme) => {
     const smallQuery = `@media (max-width: ${theme.breakpoints.values.sm}px)`
@@ -126,7 +119,7 @@ export function CreateForm(props: CreateFormProps) {
     const { t } = useI18N()
     const classes = useStylesExtends(useStyles(), props)
 
-    const account = useAccount()
+    const account = useAccount(NetworkPluginID.PLUGIN_EVM)
     const { ITO2_CONTRACT_ADDRESS, DEFAULT_QUALIFICATION2_ADDRESS } = useITOConstants()
 
     const currentIdentity = useCurrentIdentity()
@@ -180,7 +173,7 @@ export function CreateForm(props: CreateFormProps) {
 
     // balance
     const { value: tokenBalance = '0' } = useFungibleTokenBalance(
-        tokenAndAmount?.token?.type ?? EthereumTokenType.Native,
+        NetworkPluginID.PLUGIN_EVM,
         tokenAndAmount?.token?.address ?? '',
     )
 
@@ -242,10 +235,12 @@ export function CreateForm(props: CreateFormProps) {
             name: senderName,
             title: message,
             limit: formatAmount(totalOfPerWallet || '0', first?.token?.decimals),
-            token: first?.token as ERC20TokenDetailed,
+            token: first?.token as FungibleToken<ChainId, SchemaType.ERC20>,
             total: formatAmount(first?.amount || '0', first?.token?.decimals),
             exchangeAmounts: rest.map((item) => formatAmount(item.amount || '0', item?.token?.decimals)),
-            exchangeTokens: rest.map((item) => item.token!),
+            exchangeTokens: rest.map((item) => item.token!) as Array<
+                FungibleToken<ChainId, SchemaType.ERC20 | SchemaType.Native>
+            >,
             qualificationAddress: qualificationAddress_,
             startTime,
             endTime,
@@ -468,13 +463,11 @@ export function CreateForm(props: CreateFormProps) {
                 </Box>
             ) : null}
             <Box className={classes.line}>
-                <EthereumWalletConnectedBoundary>
+                <WalletConnectedBoundary>
                     <EthereumERC20TokenApprovedBoundary
                         amount={inputTokenAmount}
                         spender={ITO2_CONTRACT_ADDRESS}
-                        token={
-                            tokenAndAmount?.token?.type === EthereumTokenType.ERC20 ? tokenAndAmount.token : undefined
-                        }>
+                        token={tokenAndAmount?.token?.schema === SchemaType.ERC20 ? tokenAndAmount.token : undefined}>
                         <ActionButton
                             className={classes.button}
                             fullWidth
@@ -485,7 +478,7 @@ export function CreateForm(props: CreateFormProps) {
                             {validationMessage || t('plugin_ito_next')}
                         </ActionButton>
                     </EthereumERC20TokenApprovedBoundary>
-                </EthereumWalletConnectedBoundary>
+                </WalletConnectedBoundary>
             </Box>
         </>
     )
diff --git a/packages/mask/src/plugins/ITO/SNSAdaptor/ExchangeTokenPanel.tsx b/packages/mask/src/plugins/ITO/SNSAdaptor/ExchangeTokenPanel.tsx
index 130a27b8411c..9d322d893fad 100644
--- a/packages/mask/src/plugins/ITO/SNSAdaptor/ExchangeTokenPanel.tsx
+++ b/packages/mask/src/plugins/ITO/SNSAdaptor/ExchangeTokenPanel.tsx
@@ -1,5 +1,5 @@
 import { makeStyles } from '@masknet/theme'
-import { EthereumTokenType, FungibleTokenDetailed, useFungibleTokenBalance } from '@masknet/web3-shared-evm'
+import type { ChainId, SchemaType } from '@masknet/web3-shared-evm'
 import AddIcon from '@mui/icons-material/AddOutlined'
 import RemoveIcon from '@mui/icons-material/RemoveOutlined'
 import { IconButton, Paper } from '@mui/material'
@@ -8,6 +8,8 @@ import { usePickToken } from '@masknet/shared'
 import { useI18N } from '../../../utils'
 import type { TokenAmountPanelProps } from '../../../web3/UI/TokenAmountPanel'
 import { TokenAmountPanel } from '../../../web3/UI/TokenAmountPanel'
+import { FungibleToken, NetworkPluginID } from '@masknet/web3-shared-base'
+import { useFungibleTokenBalance } from '@masknet/plugin-infra/web3'
 
 const useStyles = makeStyles()((theme) => ({
     root: {
@@ -43,8 +45,8 @@ export interface ExchangeTokenPanelProps {
 
     disableBalance: boolean
     isSell: boolean
-    exchangeToken: FungibleTokenDetailed | undefined
-    onExchangeTokenChange: (token: FungibleTokenDetailed, key: string) => void
+    exchangeToken: FungibleToken<ChainId, SchemaType> | undefined
+    onExchangeTokenChange: (token: FungibleToken<ChainId, SchemaType>, key: string) => void
 
     onAdd: () => void
     onRemove: () => void
@@ -98,7 +100,7 @@ export function ExchangeTokenPanel(props: ExchangeTokenPanelProps) {
 
     // #region balance
     const { value: tokenBalance = '0', loading: loadingTokenBalance } = useFungibleTokenBalance(
-        exchangeToken?.type ?? EthereumTokenType.Native,
+        NetworkPluginID.PLUGIN_EVM,
         exchangeToken?.address ?? '',
     )
     // #endregion
diff --git a/packages/mask/src/plugins/ITO/SNSAdaptor/ExchangeTokenPanelGroup.tsx b/packages/mask/src/plugins/ITO/SNSAdaptor/ExchangeTokenPanelGroup.tsx
index 786d783f8bc9..7e393bb18015 100644
--- a/packages/mask/src/plugins/ITO/SNSAdaptor/ExchangeTokenPanelGroup.tsx
+++ b/packages/mask/src/plugins/ITO/SNSAdaptor/ExchangeTokenPanelGroup.tsx
@@ -3,7 +3,6 @@ import { InputAdornment } from '@mui/material'
 import { makeStyles } from '@masknet/theme'
 import { v4 as uuid } from 'uuid'
 import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward'
-import type { FungibleTokenDetailed } from '@masknet/web3-shared-evm'
 import { useI18N } from '../../../utils'
 import { ITO_EXCHANGE_RATION_MAX } from '../constants'
 import {
@@ -12,6 +11,8 @@ import {
     useExchangeTokenAndAmount,
 } from './hooks/useExchangeTokenAmountstate'
 import { ExchangeTokenPanel } from './ExchangeTokenPanel'
+import type { FungibleToken } from '@masknet/web3-shared-base'
+import type { ChainId, SchemaType } from '@masknet/web3-shared-evm'
 
 const useStyles = makeStyles()((theme) => ({
     arrow: {
@@ -24,7 +25,7 @@ const useStyles = makeStyles()((theme) => ({
 }))
 
 export interface ExchangeTokenPanelGroupProps {
-    token: FungibleTokenDetailed | undefined
+    token: FungibleToken<ChainId, SchemaType> | undefined
     origin: ExchangeTokenAndAmountState[]
     onTokenAmountChange: (data: ExchangeTokenAndAmountState[]) => void
 }
@@ -58,7 +59,7 @@ export function ExchangeTokenPanelGroup(props: ExchangeTokenPanelGroupProps) {
     )
 
     const onTokenChange = useCallback(
-        (token: FungibleTokenDetailed, key: string) => {
+        (token: FungibleToken<ChainId, SchemaType>, key: string) => {
             dispatchExchangeTokenArray({
                 type: ExchangeTokenAndAmountActionType.UPDATE_TOKEN,
                 token,
diff --git a/packages/mask/src/plugins/ITO/SNSAdaptor/ITO.tsx b/packages/mask/src/plugins/ITO/SNSAdaptor/ITO.tsx
index 325506b44221..782a14d987e0 100644
--- a/packages/mask/src/plugins/ITO/SNSAdaptor/ITO.tsx
+++ b/packages/mask/src/plugins/ITO/SNSAdaptor/ITO.tsx
@@ -1,17 +1,22 @@
 import { useCallback, useEffect, useMemo, useState } from 'react'
 import {
-    formatBalance,
     formatEthereumAddress,
-    FungibleTokenDetailed,
-    getChainDetailed,
-    isSameAddress,
-    resolveLinkOnExplorer,
-    useAccount,
-    useChainId,
     useTokenConstants,
     isNativeTokenAddress,
+    explorerResolver,
+    chainResolver,
+    ChainId,
+    SchemaType,
 } from '@masknet/web3-shared-evm'
-import { isZero, ZERO, isGreaterThan } from '@masknet/web3-shared-base'
+import {
+    isZero,
+    ZERO,
+    isGreaterThan,
+    NetworkPluginID,
+    isSameAddress,
+    formatBalance,
+    FungibleToken,
+} from '@masknet/web3-shared-base'
 import { useRemoteControlledDialog } from '@masknet/shared-base-ui'
 import { Box, Card, Link, Typography } from '@mui/material'
 import { makeStyles } from '@masknet/theme'
@@ -19,7 +24,7 @@ import OpenInNewIcon from '@mui/icons-material/OpenInNew'
 import { BigNumber } from 'bignumber.js'
 import classNames from 'classnames'
 import formatDateTime from 'date-fns/format'
-import urlcat from 'urlcat'
+import { startCase } from 'lodash-unified'
 import { EnhanceableSite } from '@masknet/shared-base'
 import { usePostLink } from '../../../components/DataSource/usePostInfo'
 import ActionButton from '../../../extension/options-page/DashboardComponents/ActionButton'
@@ -40,10 +45,10 @@ import { StyledLinearProgress } from './StyledLinearProgress'
 import { SwapGuide, SwapStatus } from './SwapGuide'
 import { isFacebook } from '../../../social-network-adaptor/facebook.com/base'
 import { isTwitter } from '../../../social-network-adaptor/twitter.com/base'
+import { useAccount, useChainId } from '@masknet/plugin-infra/web3'
 import { SharedIcon, PluginWalletConnectIcon } from '@masknet/icons'
-import { EthereumWalletConnectedBoundary } from '../../../web3/UI/EthereumWalletConnectedBoundary'
-import { EthereumChainBoundary } from '../../../web3/UI/EthereumChainBoundary'
-import { startCase } from 'lodash-unified'
+import { WalletConnectedBoundary } from '../../../web3/UI/WalletConnectedBoundary'
+import { ChainBoundary } from '../../../web3/UI/ChainBoundary'
 
 export interface IconProps {
     size?: number
@@ -206,8 +211,8 @@ const useStyles = makeStyles<StyleProps>()((theme, props) => ({
 // #region token item
 interface TokenItemProps {
     price: string
-    token: FungibleTokenDetailed
-    exchangeToken: FungibleTokenDetailed
+    token: FungibleToken<ChainId, SchemaType>
+    exchangeToken: FungibleToken<ChainId, SchemaType>
 }
 
 const TokenItem = ({ price, token, exchangeToken }: TokenItemProps) => {
@@ -219,12 +224,12 @@ const TokenItem = ({ price, token, exchangeToken }: TokenItemProps) => {
             <TokenIcon
                 classes={{ icon: classes.tokenIcon }}
                 address={exchangeToken.address}
-                logoURI={exchangeToken.logoURI}
+                logoURI={exchangeToken.logoURL}
             />
             <Typography component="span">
                 <strong>{price}</strong>{' '}
                 {isSameAddress(exchangeToken.address, NATIVE_TOKEN_ADDRESS)
-                    ? getChainDetailed(exchangeToken.chainId)?.nativeCurrency.symbol
+                    ? chainResolver.nativeCurrency(exchangeToken.chainId)?.symbol
                     : exchangeToken.symbol}{' '}
                 / {token.symbol}
             </Typography>
@@ -240,9 +245,9 @@ export interface ITO_Props {
 
 export function ITO(props: ITO_Props) {
     // context
-    const account = useAccount()
+    const account = useAccount(NetworkPluginID.PLUGIN_EVM)
+    const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
     const postLink = usePostLink()
-    const chainId = useChainId()
     const [, destructCallback] = useDestructCallback(props.payload.contract_address)
     const [openClaimDialog, setOpenClaimDialog] = useState(false)
     const [claimDialogStatus, setClaimDialogStatus] = useState(SwapStatus.Remind)
@@ -613,9 +618,7 @@ export function ITO(props: ITO_Props) {
                     })}
                     <Link
                         className={classes.tokenLink}
-                        href={urlcat(resolveLinkOnExplorer(token.chainId), '/token/:address', {
-                            address: token.address,
-                        })}
+                        href={explorerResolver.fungibleTokenLink(token.chainId, token.address)}
                         target="_blank"
                         rel="noopener noreferrer">
                         <OpenInNewIcon fontSize="small" className={classes.totalIcon} />
@@ -737,8 +740,11 @@ export function ITO(props: ITO_Props) {
                                     </ActionButton>
                                 </Box>
                                 <Box style={{ padding: 12, flex: 1 }}>
-                                    <EthereumChainBoundary chainId={payload.chain_id} renderInTimeline>
-                                        <EthereumWalletConnectedBoundary
+                                    <ChainBoundary
+                                        expectedPluginID={NetworkPluginID.PLUGIN_EVM}
+                                        expectedChainId={payload.chain_id}
+                                        renderInTimeline>
+                                        <WalletConnectedBoundary
                                             hideRiskWarningConfirmed
                                             startIcon={<PluginWalletConnectIcon style={{ fontSize: 18 }} />}
                                             classes={{ button: classes.actionButton }}>
@@ -756,8 +762,8 @@ export function ITO(props: ITO_Props) {
                                                     ? startCase((ifQualified as Qual_V2).errorMsg)
                                                     : null}
                                             </ActionButton>
-                                        </EthereumWalletConnectedBoundary>
-                                    </EthereumChainBoundary>
+                                        </WalletConnectedBoundary>
+                                    </ChainBoundary>
                                 </Box>
                             </>
                         )
diff --git a/packages/mask/src/plugins/ITO/SNSAdaptor/ITO_Card.tsx b/packages/mask/src/plugins/ITO/SNSAdaptor/ITO_Card.tsx
index 51abcf080811..a075ed0152d7 100644
--- a/packages/mask/src/plugins/ITO/SNSAdaptor/ITO_Card.tsx
+++ b/packages/mask/src/plugins/ITO/SNSAdaptor/ITO_Card.tsx
@@ -1,7 +1,7 @@
+import type { ChainId, SchemaType } from '@masknet/web3-shared-evm'
+import { Alert, Box, Skeleton, Typography } from '@mui/material'
 import { useOpenShareTxDialog } from '@masknet/shared'
 import { makeStyles, useStylesExtends } from '@masknet/theme'
-import { ERC20TokenDetailed, formatBalance } from '@masknet/web3-shared-evm'
-import { Alert, Box, Skeleton, Typography } from '@mui/material'
 import { useCallback, useEffect } from 'react'
 import { usePostLink } from '../../../components/DataSource/usePostInfo'
 import ActionButton from '../../../extension/options-page/DashboardComponents/ActionButton'
@@ -11,6 +11,7 @@ import { isTwitter } from '../../../social-network-adaptor/twitter.com/base'
 import { useI18N } from '../../../utils/i18n-next-ui'
 import { useMaskClaimCallback } from './hooks/useMaskClaimCallback'
 import { useMaskITO_Packet } from './hooks/useMaskITO_Packet'
+import { FungibleToken, formatBalance } from '@masknet/web3-shared-base'
 
 const useStyles = makeStyles()((theme) => ({
     root: {
@@ -49,7 +50,7 @@ const useStyles = makeStyles()((theme) => ({
 }))
 
 export interface ITO_CardProps extends withClasses<never> {
-    token?: ERC20TokenDetailed
+    token?: FungibleToken<ChainId, SchemaType.ERC20>
     onUpdateAmount: (amount: string) => void
     onUpdateBalance: () => void
 }
diff --git a/packages/mask/src/plugins/ITO/SNSAdaptor/NftAirdropCard.tsx b/packages/mask/src/plugins/ITO/SNSAdaptor/NftAirdropCard.tsx
deleted file mode 100644
index 0b480f32d41d..000000000000
--- a/packages/mask/src/plugins/ITO/SNSAdaptor/NftAirdropCard.tsx
+++ /dev/null
@@ -1,372 +0,0 @@
-import formatDateTime from 'date-fns/format'
-import { ChainId, useAccount, resolveTransactionLinkOnExplorer, useChainId } from '@masknet/web3-shared-evm'
-import { EthereumWalletConnectedBoundary } from '../../../web3/UI/EthereumWalletConnectedBoundary'
-import { Box, Typography, Button, TextField, CircularProgress, Link } from '@mui/material'
-import { useSpaceStationClaimableTokenCountCallback } from './hooks/useSpaceStationClaimableTokenCountCallback'
-import { useSpaceStationContractClaimCallback } from './hooks/useSpaceStationContractClaimCallback'
-import { useI18N } from '../../../utils'
-import { useState, useEffect, useCallback } from 'react'
-import { makeStyles, useCustomSnackbar, OptionsObject } from '@masknet/theme'
-import OpenInNewIcon from '@mui/icons-material/OpenInNew'
-import CloseIcon from '@mui/icons-material/Close'
-import classNames from 'classnames'
-import type { CampaignInfo } from '../types'
-import ActionButton from '../../../extension/options-page/DashboardComponents/ActionButton'
-
-const useStyles = makeStyles()((theme) => ({
-    root: {
-        color: '#fff',
-        width: 496,
-        padding: 20,
-        borderRadius: 12,
-        marginLeft: 'auto',
-        marginRight: 'auto',
-        marginBottom: theme.spacing(1),
-        background: 'linear-gradient(rgba(234, 69, 96, 1), rgba(255, 126, 172, 1))',
-    },
-    title: {
-        fontSize: 20,
-        fontWeight: 500,
-        marginBottom: theme.spacing(1),
-    },
-    text: {
-        fontSize: 16,
-    },
-    subText: {
-        borderTop: '1px solid rgba(255, 255, 255, 0.1)',
-        paddingTop: 4,
-        marginTop: 4,
-        fontSize: 14,
-    },
-    claimTimeWrapper: {
-        display: 'flex',
-        justifyContent: 'space-between',
-        marginBottom: theme.spacing(1.5),
-    },
-    claimWrapper: {
-        display: 'inline-flex',
-        flexDirection: 'column',
-        alignItems: 'center',
-        justifyContent: 'center',
-        paddingBottom: theme.spacing(2),
-        marginBottom: theme.spacing(0),
-        marginRight: theme.spacing(1),
-    },
-    claimParent: {
-        width: '100%',
-        display: 'flex',
-        flexWrap: 'wrap',
-    },
-    checkWrapper: {
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-        marginTop: theme.spacing(1),
-        marginBottom: theme.spacing(1),
-    },
-    nftImage: {
-        width: '100%',
-        borderRadius: 4,
-    },
-    imgWrapper: {
-        display: 'inline-block',
-        width: 65,
-        height: 85,
-        border: '1px solid rgba(255, 255, 255, 0.2)',
-        borderRadius: 5,
-        marginBottom: theme.spacing(1),
-    },
-    gallery: {
-        marginBottom: theme.spacing(0.5),
-        whiteSpace: 'nowrap',
-    },
-    actionButton: {
-        height: 30,
-        minHeight: 30,
-        width: 80,
-        background: 'rgba(255, 255, 255, 0.2)',
-        '&:hover': {
-            background: 'rgba(255, 255, 255, 0.4)',
-        },
-        '&.Mui-disabled': { color: '#fff', opacity: 0.6, background: 'rgba(255, 255, 255, 0.2)' },
-    },
-    actionCheckButton: {
-        height: 40,
-        minHeight: 40,
-        width: 130,
-    },
-    connectWallet: {
-        width: 200,
-        minHeight: 30,
-        whiteSpace: 'nowrap',
-    },
-    disabledButton: {
-        color: '#fff',
-    },
-    address: {
-        width: 340,
-        color: '#fff',
-        '& fieldset': {
-            borderColor: '#fff !important',
-        },
-    },
-    addressInput: {
-        color: '#fff',
-        padding: 13,
-    },
-    chainBoundary: {
-        display: 'none',
-    },
-    loading: {
-        margin: theme.spacing(0, 1),
-        color: 'rgba(255, 255, 255, 0.4)',
-    },
-    snackbarContent: {
-        color: '#fff',
-        display: 'flex',
-        width: 250,
-        marginLeft: theme.spacing(0.5),
-        justifyContent: 'space-between',
-        alignItems: 'center',
-    },
-    snackbarTipContent: {
-        display: 'flex',
-        flexDirection: 'column',
-    },
-    snackbarTip: {
-        fontSize: 13,
-        display: 'flex',
-        alignItems: 'self-start',
-    },
-    snackbarIcon: {
-        marginLeft: theme.spacing(0.3),
-        height: 17,
-        width: 17,
-        cursor: 'pointer',
-    },
-    whiteText: {
-        color: '#fff',
-    },
-    closeIcon: {
-        cursor: 'pointer',
-    },
-}))
-
-interface NftAirdropCardProps {
-    campaignInfos: Array<{
-        campaignInfo: CampaignInfo
-        claimableInfo: {
-            claimable: boolean
-            claimed: boolean
-        }
-    }>
-    loading: boolean
-    retry: () => void
-}
-
-export function NftAirdropCard(props: NftAirdropCardProps) {
-    const { t } = useI18N()
-    const [checkAddress, setCheckAddress] = useState('')
-    const now = Date.now()
-    const { campaignInfos, loading, retry } = props
-
-    const [
-        spaceStationClaimableCount,
-        setSpaceStationClaimableCount,
-        spaceStationAccountClaimableCallback,
-        spaceStationAccountClaimableLoading,
-    ] = useSpaceStationClaimableTokenCountCallback()
-    const account = useAccount()
-    const currentChainId = useChainId()
-    const { classes } = useStyles()
-
-    const claimableCount = campaignInfos?.filter((info) => info.claimableInfo.claimable).length ?? 0
-
-    useEffect(() => {
-        setCheckAddress('')
-        setSpaceStationClaimableCount(undefined)
-    }, [account, currentChainId])
-
-    useEffect(() => {
-        setSpaceStationClaimableCount(undefined)
-    }, [checkAddress])
-
-    return loading ? (
-        <Box className={classes.root}>
-            <CircularProgress size={16} className={classes.loading} />
-        </Box>
-    ) : (
-        <Box className={classes.root}>
-            <Typography className={classes.title}>{t('plugin_ito_launch_campaign')}</Typography>
-            <div className={classes.claimTimeWrapper}>
-                <Typography className={classes.text}>{t('wallet_airdrop_nft_unclaimed_title')}</Typography>
-
-                <Typography className={classes.text}>
-                    {now < campaignInfos[0].campaignInfo.startTime * 1000
-                        ? t('plugin_airdrop_nft_start_time', {
-                              date: formatDateTime(campaignInfos[0].campaignInfo.startTime * 1000, 'yyyy-MM-dd HH:mm'),
-                          })
-                        : t('plugin_airdrop_nft_end_time', {
-                              date: formatDateTime(campaignInfos[0].campaignInfo.endTime * 1000, 'yyyy-MM-dd HH:mm'),
-                          })}
-                </Typography>
-            </div>
-            <div className={classes.claimParent}>
-                {campaignInfos.map((v, i) => {
-                    return v.claimableInfo.claimable ? (
-                        <div key={i}>
-                            <ClaimItem campaignInfo={v.campaignInfo} claimed={v.claimableInfo.claimed} retry={retry} />
-                        </div>
-                    ) : null
-                })}
-            </div>
-            <Typography className={classes.text}>
-                {t('plugin_ito_total_claimable_count')}
-                {claimableCount} {claimableCount > 1 ? 'items' : 'item'},
-            </Typography>
-
-            <Typography className={classes.subText}>{t('plugin_airdrop_nft_check_address')}</Typography>
-            <div className={classes.checkWrapper}>
-                <TextField
-                    value={checkAddress}
-                    onChange={(e) => setCheckAddress(e.target.value)}
-                    className={classes.address}
-                    InputProps={{ classes: { input: classes.addressInput } }}
-                    placeholder="Enter your wallet address"
-                />
-                <Button
-                    disabled={spaceStationAccountClaimableLoading || checkAddress === ''}
-                    onClick={async () => spaceStationAccountClaimableCallback(checkAddress)}
-                    classes={{ disabled: classes.disabledButton }}
-                    className={classNames(classes.actionButton, classes.actionCheckButton)}>
-                    {spaceStationAccountClaimableLoading ? (
-                        <CircularProgress size={16} className={classes.loading} />
-                    ) : null}
-                    <span>{t('plugin_airdrop_nft_check')}</span>
-                </Button>
-            </div>
-
-            <Typography className={classes.text}>
-                {spaceStationClaimableCount === undefined
-                    ? null
-                    : spaceStationClaimableCount
-                    ? t('plugin_airdrop_nft_number_to_claim', {
-                          count: spaceStationClaimableCount,
-                          name: spaceStationClaimableCount > 1 ? 'NFTs' : 'NFT',
-                      })
-                    : t('plugin_airdrop_nft_none_to_claim')}
-            </Typography>
-        </Box>
-    )
-}
-
-interface ClaimItemProps {
-    campaignInfo: CampaignInfo
-    claimed: boolean
-    retry: () => void
-}
-
-function ClaimItem(props: ClaimItemProps) {
-    const { t } = useI18N()
-    const { campaignInfo, claimed, retry } = props
-    const currentChainId = useChainId()
-    const [claimState, claimCallback] = useSpaceStationContractClaimCallback(campaignInfo)
-    const now = Date.now()
-    const { classes } = useStyles()
-    const { showSnackbar, closeSnackbar } = useCustomSnackbar()
-    const snackbarOptions = {
-        preventDuplicate: true,
-        anchorOrigin: {
-            vertical: 'top',
-            horizontal: 'center',
-        },
-    }
-    const claim = useCallback(async () => {
-        const hash = await claimCallback()
-        if (typeof hash === 'string') {
-            showSnackbar(
-                <div className={classes.snackbarContent}>
-                    <div className={classes.snackbarTipContent}>
-                        <Typography>{t('plugin_airdrop_nft_claim_all')}</Typography>
-                        <Typography className={classes.snackbarTip}>
-                            <span>{t('plugin_airdrop_nft_claim_successful')}</span>
-                            <Link
-                                className={classes.whiteText}
-                                target="_blank"
-                                rel="noopener noreferrer"
-                                href={resolveTransactionLinkOnExplorer(ChainId.Mumbai, hash)}>
-                                <OpenInNewIcon className={classes.snackbarIcon} />
-                            </Link>
-                        </Typography>
-                    </div>
-                    <CloseIcon onClick={() => closeSnackbar()} className={classes.closeIcon} />
-                </div>,
-                {
-                    variant: 'success',
-                    ...snackbarOptions,
-                } as OptionsObject,
-            )
-
-            retry()
-        } else {
-            showSnackbar(
-                <div className={classes.snackbarContent}>
-                    <div className={classes.snackbarTipContent}>
-                        <Typography>{t('plugin_airdrop_nft_claim_all')}</Typography>
-                        <Typography className={classes.snackbarTip}>{t('plugin_airdrop_nft_claim_failed')}</Typography>
-                    </div>
-                    <CloseIcon onClick={() => closeSnackbar()} className={classes.closeIcon} />
-                </div>,
-                {
-                    variant: 'error',
-                    ...snackbarOptions,
-                } as OptionsObject,
-            )
-        }
-    }, [showSnackbar])
-
-    const unClaimable =
-        now < campaignInfo.startTime * 1000 ||
-        now > campaignInfo.endTime * 1000 ||
-        !(currentChainId === ChainId.Matic) ||
-        claimed
-
-    return (
-        <>
-            <div className={classes.claimWrapper}>
-                <div className={classes.gallery}>
-                    {campaignInfo.nfts.map((nft, i) => (
-                        <div className={classes.imgWrapper} key={i}>
-                            <img src={nft.image} className={classes.nftImage} />
-                        </div>
-                    ))}
-                </div>
-                <div>
-                    <EthereumWalletConnectedBoundary
-                        hideRiskWarningConfirmed
-                        classes={{
-                            connectWallet: classNames(classes.actionButton, classes.connectWallet),
-                            gasFeeButton: classNames(classes.actionButton, classes.connectWallet),
-                            invalidButton: classNames(classes.actionButton, classes.connectWallet),
-                            unlockMetaMask: classNames(classes.actionButton, classes.connectWallet),
-                        }}>
-                        <ActionButton
-                            disabled={claimState.loading || unClaimable}
-                            loading={claimState.loading || unClaimable}
-                            classes={{ disabled: classes.disabledButton }}
-                            onClick={claim}
-                            className={classes.actionButton}>
-                            <span>
-                                {claimed
-                                    ? t('plugin_airdrop_nft_claimed')
-                                    : now > campaignInfo.endTime * 1000
-                                    ? t('plugin_airdrop_nft_expired')
-                                    : t('plugin_airdrop_nft_claim')}
-                            </span>
-                        </ActionButton>
-                    </EthereumWalletConnectedBoundary>
-                </div>
-            </div>
-        </>
-    )
-}
diff --git a/packages/mask/src/plugins/ITO/SNSAdaptor/PoolInList.tsx b/packages/mask/src/plugins/ITO/SNSAdaptor/PoolInList.tsx
index 67441435125f..b52bc9a14226 100644
--- a/packages/mask/src/plugins/ITO/SNSAdaptor/PoolInList.tsx
+++ b/packages/mask/src/plugins/ITO/SNSAdaptor/PoolInList.tsx
@@ -1,16 +1,13 @@
 import { FormattedBalance, TokenIcon } from '@masknet/shared'
+import { SchemaType, useTokenConstants, chainResolver, ChainId } from '@masknet/web3-shared-evm'
 import {
-    EthereumTokenType,
+    isZero,
     formatBalance,
-    FungibleTokenInitial,
-    getChainDetailed,
+    NetworkPluginID,
     isSameAddress,
-    useAccount,
-    useFungibleTokenDetailed,
-    useFungibleTokensDetailed,
-    useTokenConstants,
-} from '@masknet/web3-shared-evm'
-import { isZero } from '@masknet/web3-shared-base'
+    FungibleToken,
+    TokenType,
+} from '@masknet/web3-shared-base'
 import {
     Box,
     Card,
@@ -37,6 +34,7 @@ import { useDestructCallback } from './hooks/useDestructCallback'
 import { omit } from 'lodash-unified'
 import { useSubscription } from 'use-subscription'
 import { PersistentStorages } from '../../../../shared'
+import { useAccount, useFungibleToken, useFungibleTokens } from '@masknet/plugin-infra/web3'
 import { useCallback } from 'react'
 
 const useStyles = makeStyles()((theme) => {
@@ -142,8 +140,8 @@ export function PoolInList(props: PoolInListProps) {
 
     const isDebugging = useSubscription(PersistentStorages.Settings.storage.debugging.subscription)
     // #region Fetch tokens detailed
-    const { value: _tokenDetailed } = useFungibleTokenDetailed(
-        EthereumTokenType.ERC20,
+    const { value: _tokenDetailed } = useFungibleToken(
+        NetworkPluginID.PLUGIN_EVM,
         (pool as JSON_PayloadFromChain).token_address ?? (pool as JSON_PayloadInMask).token.address,
     )
     const poolToken = (pool as JSON_PayloadInMask).token ?? _tokenDetailed
@@ -153,12 +151,19 @@ export function PoolInList(props: PoolInListProps) {
               (v) =>
                   ({
                       address: v,
-                      type: isSameAddress(v, NATIVE_TOKEN_ADDRESS) ? EthereumTokenType.Native : EthereumTokenType.ERC20,
-                  } as Pick<FungibleTokenInitial, 'address' | 'type'>),
+                      schema: isSameAddress(v, NATIVE_TOKEN_ADDRESS) ? SchemaType.Native : SchemaType.ERC20,
+                      type: TokenType.Fungible,
+                  } as Pick<
+                      FungibleToken<ChainId, SchemaType.ERC20 | SchemaType.Native>,
+                      'address' | 'type' | 'schema'
+                  >),
           )
         : []
 
-    const { value: _exchangeTokens } = useFungibleTokensDetailed(_poolTokens)
+    const { value: _exchangeTokens } = useFungibleTokens(
+        NetworkPluginID.PLUGIN_EVM,
+        _poolTokens.map((x) => x.address),
+    )
     const exchangeTokens = (pool as JSON_PayloadInMask).exchange_tokens ?? _exchangeTokens
     // #endregion
 
@@ -184,7 +189,7 @@ export function PoolInList(props: PoolInListProps) {
     )
     // #endregion
 
-    const account = useAccount()
+    const account = useAccount(NetworkPluginID.PLUGIN_EVM)
     const { computed: availabilityComputed, loading: loadingAvailability } = useAvailabilityComputed(pool)
     const { value: tradeInfo, loading: loadingTradeInfo } = usePoolTradeInfo(pool.pid, account)
     const title = pool.message.split(MSG_DELIMITER)[1] ?? pool.message
@@ -210,7 +215,7 @@ export function PoolInList(props: PoolInListProps) {
                         fullWidth
                         size="small"
                         variant="contained"
-                        onClick={() => destruct(pool.pid)}>
+                        onClick={() => destructCallback(pool.pid)}>
                         {t('plugin_ito_withdraw')}
                     </ActionButton>
                 ) : canSend ? (
@@ -244,8 +249,8 @@ export function PoolInList(props: PoolInListProps) {
                     <TokenIcon
                         classes={{ icon: classes.icon }}
                         address={poolToken.address}
-                        logoURI={poolToken.logoURI}
                         name={poolToken.symbol}
+                        logoURI={poolToken.logoURL}
                     />
                 </Box>
                 <Box className={classes.content}>
@@ -333,7 +338,7 @@ export function PoolInList(props: PoolInListProps) {
                                                 size="small"
                                                 style={{ whiteSpace: 'nowrap' }}>
                                                 {isSameAddress(token.address, NATIVE_TOKEN_ADDRESS)
-                                                    ? getChainDetailed(token.chainId)?.nativeCurrency.symbol
+                                                    ? chainResolver.nativeCurrency(token.chainId)?.symbol
                                                     : token.symbol}
                                             </TableCell>
                                             <TableCell className={classes.cell} align="center" size="small">
@@ -347,7 +352,7 @@ export function PoolInList(props: PoolInListProps) {
                                                     6,
                                                 )}{' '}
                                                 {isSameAddress(token.address, NATIVE_TOKEN_ADDRESS)
-                                                    ? getChainDetailed(token.chainId)?.nativeCurrency.symbol
+                                                    ? chainResolver.nativeCurrency(token.chainId)?.symbol
                                                     : token.symbol}{' '}
                                                 / {poolToken.symbol}
                                             </TableCell>
diff --git a/packages/mask/src/plugins/ITO/SNSAdaptor/PoolList.tsx b/packages/mask/src/plugins/ITO/SNSAdaptor/PoolList.tsx
index 0e8c8ab8152b..d87d2d7c5a96 100644
--- a/packages/mask/src/plugins/ITO/SNSAdaptor/PoolList.tsx
+++ b/packages/mask/src/plugins/ITO/SNSAdaptor/PoolList.tsx
@@ -1,11 +1,12 @@
-import { useAccount } from '@masknet/web3-shared-evm'
+import { useRef } from 'react'
 import { Box, CircularProgress, Typography } from '@mui/material'
 import { makeStyles } from '@masknet/theme'
 import { useAllPoolsAsSeller } from './hooks/useAllPoolsAsSeller'
 import type { JSON_PayloadInMask } from '../types'
 import { PoolInList } from './PoolInList'
-import { useRef } from 'react'
 import { useI18N } from '../../../utils'
+import { useAccount } from '@masknet/plugin-infra/web3'
+import { NetworkPluginID } from '@masknet/web3-shared-base'
 
 const useStyles = makeStyles()((theme) => ({
     root: {
@@ -31,7 +32,7 @@ export interface PoolListProps {
 export function PoolList(props: PoolListProps) {
     const { classes } = useStyles()
     const { t } = useI18N()
-    const account = useAccount()
+    const account = useAccount(NetworkPluginID.PLUGIN_EVM)
     const { value = { loadMore: true, pools: [] }, loading, retry } = useAllPoolsAsSeller(account)
     const { pools } = value
     const containerRef = useRef<HTMLDivElement>(null)
diff --git a/packages/mask/src/plugins/ITO/SNSAdaptor/PostInspector.tsx b/packages/mask/src/plugins/ITO/SNSAdaptor/PostInspector.tsx
index 52c86b533f36..c6d2ddac6950 100644
--- a/packages/mask/src/plugins/ITO/SNSAdaptor/PostInspector.tsx
+++ b/packages/mask/src/plugins/ITO/SNSAdaptor/PostInspector.tsx
@@ -1,20 +1,13 @@
 import { useCallback, useMemo } from 'react'
-import {
-    useChainId,
-    useFungibleTokenDetailed,
-    EthereumTokenType,
-    FungibleTokenDetailed,
-    FungibleTokenInitial,
-    useFungibleTokensDetailed,
-    isSameAddress,
-    useTokenConstants,
-} from '@masknet/web3-shared-evm'
+import { ChainId, SchemaType, useTokenConstants } from '@masknet/web3-shared-evm'
 import { isCompactPayload } from './helpers'
 import { usePoolPayload } from './hooks/usePoolPayload'
 import type { JSON_PayloadInMask } from '../types'
 import { ITO, ITO_Error, ITO_Loading } from './ITO'
-import { useClassicMaskSNSPluginTheme } from '../../../utils'
+import { NetworkPluginID, isSameAddress, FungibleToken, TokenType } from '@masknet/web3-shared-base'
 import { ThemeProvider } from '@mui/material'
+import { useChainId, useFungibleToken, useFungibleTokens } from '@masknet/plugin-infra/web3'
+import { useClassicMaskSNSPluginTheme } from '../../../utils'
 
 export interface PostInspectorProps {
     payload: JSON_PayloadInMask
@@ -25,7 +18,7 @@ export function PostInspector(props: PostInspectorProps) {
     const isCompactPayload_ = isCompactPayload(props.payload)
     const { NATIVE_TOKEN_ADDRESS } = useTokenConstants()
 
-    const chainId = useChainId()
+    const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
     const {
         value: payload,
         error,
@@ -36,16 +29,15 @@ export function PostInspector(props: PostInspectorProps) {
     const _payload = payload ?? props.payload
     // To meet the max allowance of the data size of image steganography, we need to
     //  cut off some properties, such as save the token address string only.
-    const token = _payload.token as unknown as string | FungibleTokenDetailed
+    const token = _payload.token as unknown as string | FungibleToken<ChainId, SchemaType>
     const {
         value: tokenDetailed,
         loading: _loadingToken,
         retry: retryToken,
-    } = useFungibleTokenDetailed(
-        EthereumTokenType.ERC20,
-        typeof token === 'string' ? (token as string) : (token as FungibleTokenDetailed).address,
-        undefined,
-        _payload.chain_id,
+    } = useFungibleToken(
+        NetworkPluginID.PLUGIN_EVM,
+        typeof token === 'string' ? (token as string) : (token as FungibleToken<ChainId, SchemaType>).address,
+        { chainId: _payload.chain_id },
     )
 
     const exchangeFungibleTokens = useMemo(
@@ -54,11 +46,13 @@ export function PostInspector(props: PostInspectorProps) {
                 (t) =>
                     ({
                         address: t.address,
-                        type: isSameAddress(t.address, NATIVE_TOKEN_ADDRESS)
-                            ? EthereumTokenType.Native
-                            : EthereumTokenType.ERC20,
+                        schema: isSameAddress(t.address, NATIVE_TOKEN_ADDRESS) ? SchemaType.Native : SchemaType.ERC20,
                         chainId: _payload.chain_id,
-                    } as Pick<FungibleTokenInitial, 'address' | 'type'>),
+                        type: TokenType.Fungible,
+                    } as Pick<
+                        FungibleToken<ChainId, SchemaType.ERC20 | SchemaType.Native>,
+                        'address' | 'type' | 'schema' | 'chainId'
+                    >),
             ),
         [JSON.stringify(_payload.exchange_tokens)],
     )
@@ -67,7 +61,9 @@ export function PostInspector(props: PostInspectorProps) {
         value: exchangeTokensDetailed,
         loading: loadingExchangeTokensDetailed,
         retry: retryExchangeTokensDetailed,
-    } = useFungibleTokensDetailed(exchangeFungibleTokens, _payload.chain_id)
+    } = useFungibleTokens(NetworkPluginID.PLUGIN_EVM, (exchangeFungibleTokens ?? []).map((t) => t.address) ?? [], {
+        chainId: _payload.chain_id,
+    })
 
     const retry = useCallback(() => {
         retryPayload()
@@ -90,7 +86,13 @@ export function PostInspector(props: PostInspectorProps) {
                 pid={pid}
                 payload={
                     typeof token === 'string'
-                        ? { ..._payload, token: tokenDetailed!, exchange_tokens: exchangeTokensDetailed! }
+                        ? {
+                              ..._payload,
+                              token: tokenDetailed! as FungibleToken<ChainId, SchemaType.ERC20 | SchemaType.Native>,
+                              exchange_tokens: exchangeTokensDetailed! as Array<
+                                  FungibleToken<ChainId, SchemaType.ERC20 | SchemaType.Native>
+                              >,
+                          }
                         : _payload
                 }
             />
diff --git a/packages/mask/src/plugins/ITO/SNSAdaptor/RemindDialog.tsx b/packages/mask/src/plugins/ITO/SNSAdaptor/RemindDialog.tsx
index f82610b19195..f8a8b9189aee 100644
--- a/packages/mask/src/plugins/ITO/SNSAdaptor/RemindDialog.tsx
+++ b/packages/mask/src/plugins/ITO/SNSAdaptor/RemindDialog.tsx
@@ -5,17 +5,10 @@ import { makeStyles, useStylesExtends } from '@masknet/theme'
 import { FormattedAddress, TokenIcon } from '@masknet/shared'
 import { useI18N } from '../../../utils'
 import ActionButton from '../../../extension/options-page/DashboardComponents/ActionButton'
-import {
-    ChainId,
-    FungibleTokenDetailed,
-    resolveLinkOnExplorer,
-    resolveNetworkName,
-    formatEthereumAddress,
-    useERC20TokenDetailedFromTokenLists,
-    useNetworkType,
-} from '@masknet/web3-shared-evm'
+import { ChainId, formatEthereumAddress, explorerResolver, networkResolver, SchemaType } from '@masknet/web3-shared-evm'
 import { SwapStatus } from './SwapGuide'
-import urlcat from 'urlcat'
+import { useNetworkType } from '@masknet/plugin-infra/web3'
+import { FungibleToken, NetworkPluginID } from '@masknet/web3-shared-base'
 
 const useStyles = makeStyles()((theme) => ({
     reminderText: {
@@ -120,7 +113,7 @@ const useStyles = makeStyles()((theme) => ({
 }))
 
 export interface RemindDialogProps extends withClasses<'root'> {
-    token: FungibleTokenDetailed
+    token: FungibleToken<ChainId, SchemaType>
     chainId: ChainId
     setStatus: (status: SwapStatus) => void
 }
@@ -131,15 +124,14 @@ export function RemindDialog(props: RemindDialogProps) {
     const { t } = useI18N()
     const classes = useStylesExtends(useStyles(), {})
     const [agreeReminder, setAgreeReminder] = useState(false)
-    const networkType = useNetworkType()
-    const { tokensDetailed } = useERC20TokenDetailedFromTokenLists(token.address)
+    const networkType = useNetworkType(NetworkPluginID.PLUGIN_EVM)
 
     return (
         <>
             <section className={classes.wrapper}>
                 <Typography variant="body1" className={classNames(classes.reminderText, classes.reminderTextFirst)}>
                     {t('plugin_ito_dialog_claim_reminder_text1', {
-                        networkType: resolveNetworkName(networkType),
+                        networkType: networkResolver.networkName(networkType),
                     })}
                 </Typography>
                 <Typography variant="body1" className={classes.reminderText}>
@@ -153,11 +145,7 @@ export function RemindDialog(props: RemindDialogProps) {
                 </Typography>
             </section>
             <section className={classNames(classes.wrapper, classes.tokenWrapper)}>
-                <TokenIcon
-                    address={token.address}
-                    classes={{ icon: classes.tokenIcon }}
-                    logoURI={tokensDetailed?.logoURI}
-                />
+                <TokenIcon address={token.address} classes={{ icon: classes.tokenIcon }} logoURI={token?.logoURL} />
                 <div className={classes.tokenTextWrapper}>
                     <Typography variant="h5" className={classes.tokenSymbol}>
                         {token.name}
@@ -166,7 +154,7 @@ export function RemindDialog(props: RemindDialogProps) {
                         target="_blank"
                         className={classes.tokenLink}
                         rel="noopener noreferrer"
-                        href={urlcat(resolveLinkOnExplorer(chainId), '/token/:address', { address: token.address })}>
+                        href={explorerResolver.fungibleTokenLink(chainId, token.address)}>
                         <Typography variant="body2">
                             <FormattedAddress address={token.address} size={4} formatter={formatEthereumAddress} /> (
                             {t('plugin_ito_view_on_explorer')})
diff --git a/packages/mask/src/plugins/ITO/SNSAdaptor/SelectTokenAmountPanel.tsx b/packages/mask/src/plugins/ITO/SNSAdaptor/SelectTokenAmountPanel.tsx
index b367f351497e..4b402daf6e41 100644
--- a/packages/mask/src/plugins/ITO/SNSAdaptor/SelectTokenAmountPanel.tsx
+++ b/packages/mask/src/plugins/ITO/SNSAdaptor/SelectTokenAmountPanel.tsx
@@ -1,16 +1,30 @@
-import { ERC20TokenListProps, usePickToken } from '@masknet/shared'
-import type { FungibleTokenDetailed } from '@masknet/web3-shared-evm'
 import { useCallback } from 'react'
+import type { MaskFixedSizeListProps, MaskTextFieldProps } from '@masknet/theme'
+import { usePickToken } from '@masknet/shared'
+import type { FungibleToken } from '@masknet/web3-shared-base'
+import type { ChainId, SchemaType } from '@masknet/web3-shared-evm'
 import { TokenAmountPanel, TokenAmountPanelProps } from '../../../web3/UI/TokenAmountPanel'
 
+interface ERC20TokenListProps extends withClasses<'list' | 'placeholder'> {
+    targetChainId?: ChainId
+    whitelist?: string[]
+    blacklist?: string[]
+    tokens?: Array<FungibleToken<ChainId, SchemaType>>
+    selectedTokens?: string[]
+    disableSearch?: boolean
+    onSelect?(token: FungibleToken<ChainId, SchemaType> | null): void
+    FixedSizeListProps?: Partial<MaskFixedSizeListProps>
+    SearchTextFieldProps?: MaskTextFieldProps
+}
+
 export interface SelectTokenAmountPanelProps {
     amount: string
     balance: string
-    token?: FungibleTokenDetailed
+    token?: FungibleToken<ChainId, SchemaType>
     disableNativeToken?: boolean
     disableSearchBar?: boolean
     onAmountChange: (amount: string) => void
-    onTokenChange: (token: FungibleTokenDetailed) => void
+    onTokenChange: (token: FungibleToken<ChainId, SchemaType>) => void
     FungibleTokenListProps?: Partial<ERC20TokenListProps>
     TokenAmountPanelProps?: Partial<TokenAmountPanelProps>
 }
diff --git a/packages/mask/src/plugins/ITO/SNSAdaptor/ShareDialog.tsx b/packages/mask/src/plugins/ITO/SNSAdaptor/ShareDialog.tsx
index b1a47ff623ca..8b17d949b6ed 100644
--- a/packages/mask/src/plugins/ITO/SNSAdaptor/ShareDialog.tsx
+++ b/packages/mask/src/plugins/ITO/SNSAdaptor/ShareDialog.tsx
@@ -1,6 +1,6 @@
 import { makeStyles, useStylesExtends } from '@masknet/theme'
-import { isZero } from '@masknet/web3-shared-base'
-import { formatBalance, FungibleTokenDetailed } from '@masknet/web3-shared-evm'
+import { FungibleToken, formatBalance, isZero } from '@masknet/web3-shared-base'
+import type { ChainId, SchemaType } from '@masknet/web3-shared-evm'
 import { Box, Typography } from '@mui/material'
 import type { BigNumber } from 'bignumber.js'
 import { useCallback } from 'react'
@@ -55,7 +55,7 @@ const useStyles = makeStyles()((theme) => ({
 
 export interface ShareDialogProps extends withClasses<'root'> {
     shareSuccessText: string | undefined
-    token: FungibleTokenDetailed
+    token: FungibleToken<ChainId, SchemaType>
     actualSwapAmount: BigNumber.Value
     poolName: string
     onClose: () => void
diff --git a/packages/mask/src/plugins/ITO/SNSAdaptor/SwapDialog.tsx b/packages/mask/src/plugins/ITO/SNSAdaptor/SwapDialog.tsx
index d30ee47822e0..2caae441e3c6 100644
--- a/packages/mask/src/plugins/ITO/SNSAdaptor/SwapDialog.tsx
+++ b/packages/mask/src/plugins/ITO/SNSAdaptor/SwapDialog.tsx
@@ -1,20 +1,21 @@
-import { useOpenShareTxDialog, usePickToken } from '@masknet/shared'
 import { openWindow } from '@masknet/shared-base-ui'
+import { usePickToken, useOpenShareTxDialog } from '@masknet/shared'
 import { makeStyles, useStylesExtends } from '@masknet/theme'
-import { leftShift, rightShift, ZERO } from '@masknet/web3-shared-base'
 import {
-    ChainId,
+    leftShift,
+    NetworkPluginID,
+    rightShift,
+    ZERO,
+    FungibleToken,
     currySameAddress,
-    EthereumTokenType,
     formatBalance,
-    FungibleTokenDetailed,
+} from '@masknet/web3-shared-base'
+import {
+    ChainId,
+    SchemaType,
     isNativeTokenAddress,
-    isSameAddress,
-    resolveTransactionLinkOnExplorer,
-    useChainId,
-    useFungibleTokenBalance,
-    useFungibleTokenDetailed,
     useTokenConstants,
+    explorerResolver,
 } from '@masknet/web3-shared-evm'
 import { CircularProgress, Slider, Typography } from '@mui/material'
 import BigNumber from 'bignumber.js'
@@ -22,13 +23,13 @@ import { useCallback, useEffect, useMemo, useState } from 'react'
 import ActionButton from '../../../extension/options-page/DashboardComponents/ActionButton'
 import { useI18N } from '../../../utils'
 import { EthereumERC20TokenApprovedBoundary } from '../../../web3/UI/EthereumERC20TokenApprovedBoundary'
-import { EthereumWalletConnectedBoundary } from '../../../web3/UI/EthereumWalletConnectedBoundary'
+import { WalletConnectedBoundary } from '../../../web3/UI/WalletConnectedBoundary'
 import { TokenAmountPanel } from '../../../web3/UI/TokenAmountPanel'
-import { WalletRPC } from '../../Wallet/messages'
 import type { JSON_PayloadInMask } from '../types'
 import { useQualificationVerify } from './hooks/useQualificationVerify'
 import { useSwapCallback } from './hooks/useSwapCallback'
 import { SwapStatus } from './SwapGuide'
+import { useChainId, useFungibleToken, useFungibleTokenBalance, useWeb3State } from '@masknet/plugin-infra/web3'
 
 const useStyles = makeStyles()((theme) => ({
     button: {
@@ -85,7 +86,7 @@ const useStyles = makeStyles()((theme) => ({
 }))
 
 export interface SwapDialogProps extends withClasses<'root'> {
-    exchangeTokens: FungibleTokenDetailed[]
+    exchangeTokens: Array<FungibleToken<ChainId, SchemaType.ERC20 | SchemaType.Native>>
     payload: JSON_PayloadInMask
     initAmount: BigNumber
     tokenAmount: BigNumber
@@ -95,7 +96,7 @@ export interface SwapDialogProps extends withClasses<'root'> {
     setStatus: (status: SwapStatus) => void
     chainId: ChainId
     account: string
-    token: FungibleTokenDetailed
+    token: FungibleToken<ChainId, SchemaType>
 }
 
 export function SwapDialog(props: SwapDialogProps) {
@@ -113,20 +114,16 @@ export function SwapDialog(props: SwapDialogProps) {
         exchangeTokens,
     } = props
 
-    const chainId = useChainId()
+    const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
+    const { Token } = useWeb3State(NetworkPluginID.PLUGIN_EVM)
     const classes = useStylesExtends(useStyles(), props)
     const { NATIVE_TOKEN_ADDRESS } = useTokenConstants()
     const [ratio, setRatio] = useState<BigNumber>(
         new BigNumber(payload.exchange_amounts[0 * 2]).dividedBy(payload.exchange_amounts[0 * 2 + 1]),
     )
-    const { value: initToken } = useFungibleTokenDetailed(
-        isSameAddress(NATIVE_TOKEN_ADDRESS, payload.exchange_tokens[0].address)
-            ? EthereumTokenType.Native
-            : EthereumTokenType.ERC20,
-        payload.exchange_tokens[0].address,
-    )
+    const { value: initToken } = useFungibleToken(NetworkPluginID.PLUGIN_EVM, payload.exchange_tokens[0].address)
 
-    const [swapToken, setSwapToken] = useState<FungibleTokenDetailed | undefined>(undefined)
+    const [swapToken, setSwapToken] = useState<FungibleToken<ChainId, SchemaType> | undefined>(undefined)
 
     useEffect(() => {
         setSwapToken(initToken)
@@ -165,7 +162,7 @@ export function SwapDialog(props: SwapDialogProps) {
 
     // #region balance
     const { value: tokenBalance = '0' } = useFungibleTokenBalance(
-        swapToken ? swapToken.type : EthereumTokenType.Native,
+        NetworkPluginID.PLUGIN_EVM,
         swapToken ? swapToken.address : NATIVE_TOKEN_ADDRESS,
     )
     // #endregion
@@ -200,15 +197,12 @@ export function SwapDialog(props: SwapDialogProps) {
             setActualSwapAmount(to_value)
             setStatus(SwapStatus.Share)
             setTimeout(() => {
-                openWindow(resolveTransactionLinkOnExplorer(chainId, receipt.transactionHash))
+                openWindow(explorerResolver.transactionLink(chainId, receipt.transactionHash))
             }, 2000)
         }
-        if (payload.token.type !== EthereumTokenType.ERC20) return
-        await WalletRPC.addToken(payload.token)
-        await WalletRPC.updateWalletToken(account, payload.token, { strategy: 'trust' })
-    }, [swapCallback, payload.token.address, openShareTxDialog])
-
-    // #endregion
+        if (payload.token.schema !== SchemaType.ERC20) return
+        await Token?.addToken?.(payload.token)
+    }, [swapCallback, payload.token, Token])
 
     const validationMessage = useMemo(() => {
         if (swapAmount.isZero() || tokenAmount.isZero() || swapAmount.dividedBy(ratio).isLessThan(1))
@@ -271,11 +265,11 @@ export function SwapDialog(props: SwapDialogProps) {
                 {t('plugin_ito_swap_only_once_remind')}
             </Typography>
             <section className={classes.swapButtonWrapper}>
-                <EthereumWalletConnectedBoundary>
+                <WalletConnectedBoundary>
                     <EthereumERC20TokenApprovedBoundary
                         amount={swapAmount.toFixed()}
                         spender={payload.contract_address}
-                        token={swapToken.type === EthereumTokenType.ERC20 ? swapToken : undefined}>
+                        token={swapToken.schema === SchemaType.ERC20 ? swapToken : undefined}>
                         <ActionButton
                             loading={isSwapping}
                             className={classes.button}
@@ -291,7 +285,7 @@ export function SwapDialog(props: SwapDialogProps) {
                             )}
                         </ActionButton>
                     </EthereumERC20TokenApprovedBoundary>
-                </EthereumWalletConnectedBoundary>
+                </WalletConnectedBoundary>
             </section>
         </>
     ) : null
diff --git a/packages/mask/src/plugins/ITO/SNSAdaptor/SwapGuide.tsx b/packages/mask/src/plugins/ITO/SNSAdaptor/SwapGuide.tsx
index 429c546fcb71..0b5da86300f4 100644
--- a/packages/mask/src/plugins/ITO/SNSAdaptor/SwapGuide.tsx
+++ b/packages/mask/src/plugins/ITO/SNSAdaptor/SwapGuide.tsx
@@ -1,5 +1,5 @@
-import { ERC20TokenDetailed, useAccount, useChainId, isSameAddress, useTokenConstants } from '@masknet/web3-shared-evm'
-import { ZERO } from '@masknet/web3-shared-base'
+import { ZERO, NetworkPluginID, isSameAddress, FungibleToken } from '@masknet/web3-shared-base'
+import { useTokenConstants, ChainId, SchemaType } from '@masknet/web3-shared-evm'
 import { DialogContent } from '@mui/material'
 import { makeStyles } from '@masknet/theme'
 import BigNumber from 'bignumber.js'
@@ -10,6 +10,7 @@ import { RemindDialog } from './RemindDialog'
 import { ShareDialog } from './ShareDialog'
 import { SwapDialog, SwapDialogProps } from './SwapDialog'
 import { UnlockDialog } from './UnlockDialog'
+import { useAccount, useChainId } from '@masknet/plugin-infra/web3'
 
 export enum SwapStatus {
     Remind = 0,
@@ -67,8 +68,8 @@ export function SwapGuide(props: SwapGuideProps) {
     const initAmount = ZERO
     const [tokenAmount, setTokenAmount] = useState<BigNumber>(initAmount)
     const [actualSwapAmount, setActualSwapAmount] = useState<BigNumber.Value>(0)
-    const chainId = useChainId()
-    const account = useAccount()
+    const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
+    const account = useAccount(NetworkPluginID.PLUGIN_EVM)
 
     const SwapTitle: Record<SwapStatus, string> = {
         [SwapStatus.Remind]: t('plugin_ito_dialog_swap_reminder_title'),
@@ -104,7 +105,7 @@ export function SwapGuide(props: SwapGuideProps) {
                                     tokens={
                                         payload.exchange_tokens.filter(
                                             (x) => !isSameAddress(NATIVE_TOKEN_ADDRESS, x.address),
-                                        ) as ERC20TokenDetailed[]
+                                        ) as Array<FungibleToken<ChainId, SchemaType.ERC20>>
                                     }
                                 />
                             )
diff --git a/packages/mask/src/plugins/ITO/SNSAdaptor/UnlockDialog.tsx b/packages/mask/src/plugins/ITO/SNSAdaptor/UnlockDialog.tsx
index 39afec2f26fe..0275f1258cff 100644
--- a/packages/mask/src/plugins/ITO/SNSAdaptor/UnlockDialog.tsx
+++ b/packages/mask/src/plugins/ITO/SNSAdaptor/UnlockDialog.tsx
@@ -1,24 +1,16 @@
 import { makeStyles } from '@masknet/theme'
-import { isGreaterThan, rightShift } from '@masknet/web3-shared-base'
+import { formatBalance, FungibleToken, isGreaterThan, NetworkPluginID, rightShift } from '@masknet/web3-shared-base'
 import { useCallback, useState } from 'react'
-import {
-    ERC20TokenDetailed,
-    EthereumTokenType,
-    formatBalance,
-    formatEthereumAddress,
-    resolveAddressLinkOnExplorer,
-    useChainId,
-    useFungibleTokenBalance,
-    useITOConstants,
-} from '@masknet/web3-shared-evm'
+import { SchemaType, formatEthereumAddress, explorerResolver, useITOConstants, ChainId } from '@masknet/web3-shared-evm'
 import { Link, Typography } from '@mui/material'
 import { Trans } from 'react-i18next'
 import { usePickToken } from '@masknet/shared'
 import ActionButton from '../../../extension/options-page/DashboardComponents/ActionButton'
 import { useI18N } from '../../../utils'
 import { EthereumERC20TokenApprovedBoundary } from '../../../web3/UI/EthereumERC20TokenApprovedBoundary'
-import { EthereumWalletConnectedBoundary } from '../../../web3/UI/EthereumWalletConnectedBoundary'
+import { WalletConnectedBoundary } from '../../../web3/UI/WalletConnectedBoundary'
 import { TokenAmountPanel } from '../../../web3/UI/TokenAmountPanel'
+import { useChainId, useFungibleTokenBalance } from '@masknet/plugin-infra/web3'
 
 function isMoreThanMillion(allowance: string, decimals: number) {
     return isGreaterThan(allowance, `100000000000e${decimals}`) // 100 billion
@@ -36,7 +28,7 @@ const useStyles = makeStyles()((theme) => ({
 }))
 
 export interface UnlockDialogProps {
-    tokens: ERC20TokenDetailed[]
+    tokens: Array<FungibleToken<ChainId, SchemaType.ERC20>>
 }
 
 export function UnlockDialog(props: UnlockDialogProps) {
@@ -45,10 +37,10 @@ export function UnlockDialog(props: UnlockDialogProps) {
     const { classes } = useStyles()
 
     const { ITO2_CONTRACT_ADDRESS } = useITOConstants()
-    const chainId = useChainId()
+    const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
 
     // #region select token
-    const [token, setToken] = useState<ERC20TokenDetailed>(tokens[0])
+    const [token, setToken] = useState<FungibleToken<ChainId, SchemaType.ERC20>>(tokens[0])
     const pickToken = usePickToken()
     const onSelectTokenChipClick = useCallback(async () => {
         const picked = await pickToken({
@@ -57,14 +49,14 @@ export function UnlockDialog(props: UnlockDialogProps) {
             selectedTokens: token?.address ? [token.address] : [],
             whitelist: tokens.map((x) => x.address),
         })
-        if (picked) setToken(picked as ERC20TokenDetailed)
+        if (picked) setToken(picked as FungibleToken<ChainId, SchemaType.ERC20>)
     }, [tokens, token?.address])
     // #endregion
     // #region amount
     const [rawAmount, setRawAmount] = useState('')
     const amount = rightShift(rawAmount || '0', token?.decimals)
     const { value: tokenBalance = '0', loading: loadingTokenBalance } = useFungibleTokenBalance(
-        token?.type ?? EthereumTokenType.Native,
+        NetworkPluginID.PLUGIN_EVM,
         token?.address ?? '',
     )
     // #endregion
@@ -93,7 +85,7 @@ export function UnlockDialog(props: UnlockDialogProps) {
                                 <Link
                                     target="_blank"
                                     rel="noopener noreferrer"
-                                    href={resolveAddressLinkOnExplorer(chainId, ITO2_CONTRACT_ADDRESS)}
+                                    href={explorerResolver.addressLink(chainId, ITO2_CONTRACT_ADDRESS)}
                                 />
                             ),
                         }}
@@ -104,7 +96,7 @@ export function UnlockDialog(props: UnlockDialogProps) {
                     />
                 </Typography>
             ) : null}
-            <EthereumWalletConnectedBoundary>
+            <WalletConnectedBoundary>
                 <EthereumERC20TokenApprovedBoundary
                     amount={amount.toFixed()}
                     spender={ITO2_CONTRACT_ADDRESS}
@@ -122,7 +114,7 @@ export function UnlockDialog(props: UnlockDialogProps) {
                         </ActionButton>
                     )}
                 </EthereumERC20TokenApprovedBoundary>
-            </EthereumWalletConnectedBoundary>
+            </WalletConnectedBoundary>
         </div>
     )
 }
diff --git a/packages/mask/src/plugins/ITO/SNSAdaptor/hooks/useAllPoolsAsSeller.ts b/packages/mask/src/plugins/ITO/SNSAdaptor/hooks/useAllPoolsAsSeller.ts
index b728e91596d4..935eacaf63bb 100644
--- a/packages/mask/src/plugins/ITO/SNSAdaptor/hooks/useAllPoolsAsSeller.ts
+++ b/packages/mask/src/plugins/ITO/SNSAdaptor/hooks/useAllPoolsAsSeller.ts
@@ -1,22 +1,70 @@
+import { useBlockNumber, useChainId, useWeb3Connection, Web3Helper } from '@masknet/plugin-infra/web3'
+import { NetworkPluginID } from '@masknet/web3-shared-base'
+import { ChainId, getITOConstants } from '@masknet/web3-shared-evm'
 import { useRef, useEffect } from 'react'
 import { useAsyncRetry } from 'react-use'
-import { PluginITO_RPC } from '../../messages'
 import type { PoolFromNetwork } from '../../types'
-import { useBlockNumber, useChainId } from '@masknet/web3-shared-evm'
+import * as chain from '../utils/chain'
+import { PluginITO_RPC } from '../../messages'
+import { EMPTY_LIST } from '@masknet/shared-base'
 
 export function useAllPoolsAsSeller(address: string) {
     const allPoolsRef = useRef<PoolFromNetwork[]>([])
-    const chainId = useChainId()
-    const { value: blockNumber = 0 } = useBlockNumber()
+    const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
+    const connection = useWeb3Connection(NetworkPluginID.PLUGIN_EVM, { chainId })
+    const { value: blockNumber = 0 } = useBlockNumber(NetworkPluginID.PLUGIN_EVM)
 
     useEffect(() => {
         allPoolsRef.current = []
     }, [chainId])
 
     return useAsyncRetry(async () => {
-        const _pools = await PluginITO_RPC.getAllPoolsAsSeller(address, blockNumber, chainId)
+        if (!connection)
+            return {
+                pools: EMPTY_LIST,
+                loadMore: false,
+            }
+        const _pools = await getAllPoolsAsSeller(address, blockNumber, chainId, connection)
         const pools = _pools.filter((a) => !allPoolsRef.current.map((b) => b.pool.pid).includes(a.pool.pid))
         allPoolsRef.current = allPoolsRef.current.concat(pools)
         return { pools: allPoolsRef.current, loadMore: pools.length > 0 }
-    }, [address, blockNumber, chainId])
+    }, [address, blockNumber, chainId, connection])
+}
+
+async function getAllPoolsAsSeller(
+    address: string,
+    endBlock: number,
+    chainId: ChainId,
+    connection: Web3Helper.Web3Connection<NetworkPluginID.PLUGIN_EVM>,
+) {
+    if (!connection) return []
+
+    const { ITO2_CONTRACT_CREATION_BLOCK_HEIGHT } = getITOConstants(chainId)
+
+    // #region Get data from chain.
+    const poolsFromChain = await chain.getAllPoolsAsSeller(
+        chainId,
+        ITO2_CONTRACT_CREATION_BLOCK_HEIGHT,
+        endBlock,
+        address,
+        connection,
+    )
+    // #endregion
+
+    // #region Inject password from database
+    const poolsFromDB = await PluginITO_RPC.getAllPoolsAsSellerFromDatabase(poolsFromChain)
+    return poolsFromChain
+        .map((x) => {
+            const pool = poolsFromDB.find((y) => y.payload.pid === x.pool.pid)
+            if (!pool) return x
+            return {
+                ...x,
+                pool: {
+                    ...x.pool,
+                    password: pool.payload.password,
+                },
+            }
+        })
+        .filter((x) => x.pool.chain_id === chainId)
+    // #endregion
 }
diff --git a/packages/mask/src/plugins/ITO/SNSAdaptor/hooks/useAvailability.ts b/packages/mask/src/plugins/ITO/SNSAdaptor/hooks/useAvailability.ts
index 025f0de90334..dff71debd70e 100644
--- a/packages/mask/src/plugins/ITO/SNSAdaptor/hooks/useAvailability.ts
+++ b/packages/mask/src/plugins/ITO/SNSAdaptor/hooks/useAvailability.ts
@@ -1,16 +1,23 @@
 import { useAsyncRetry } from 'react-use'
-import { useAccount, useITOConstants, isSameAddress, ChainId } from '@masknet/web3-shared-evm'
-import { checkAvailability } from '../../Worker/apis/checkAvailability'
+import { NetworkPluginID, isSameAddress } from '@masknet/web3-shared-base'
+import { useITOConstants } from '@masknet/web3-shared-evm'
+import { checkAvailability } from '../utils/checkAvailability'
+import { useAccount, useChainId, Web3Helper, useWeb3Connection } from '@masknet/plugin-infra/web3'
 
-export function useAvailability(id: string, contract_address: string, chainId: ChainId, from?: string) {
-    const account = useAccount()
-    const fromAccount = from ?? account
+export function useAvailability(
+    id: string,
+    contractAddress: string,
+    options?: Web3Helper.Web3ConnectionOptions<NetworkPluginID.PLUGIN_EVM>,
+) {
+    const account = useAccount(NetworkPluginID.PLUGIN_EVM, options?.account)
+    const chainId = useChainId(NetworkPluginID.PLUGIN_EVM, options?.chainId)
+    const connection = useWeb3Connection(NetworkPluginID.PLUGIN_EVM, { chainId })
 
     const { ITO_CONTRACT_ADDRESS } = useITOConstants()
-    const isV1 = isSameAddress(contract_address ?? '', ITO_CONTRACT_ADDRESS)
+    const isV1 = isSameAddress(contractAddress ?? '', ITO_CONTRACT_ADDRESS)
 
     return useAsyncRetry(async () => {
-        if (!id || !contract_address) return null
-        return checkAvailability(id, account || fromAccount, contract_address, chainId, isV1)
-    }, [id, account, fromAccount, chainId])
+        if (!id || !contractAddress || !connection) return null
+        return checkAvailability(id, account, contractAddress, chainId, connection, isV1)
+    }, [id, account, chainId, connection, isV1, contractAddress])
 }
diff --git a/packages/mask/src/plugins/ITO/SNSAdaptor/hooks/useAvailabilityComputed.ts b/packages/mask/src/plugins/ITO/SNSAdaptor/hooks/useAvailabilityComputed.ts
index 1682c08a1010..8c0bcd519321 100644
--- a/packages/mask/src/plugins/ITO/SNSAdaptor/hooks/useAvailabilityComputed.ts
+++ b/packages/mask/src/plugins/ITO/SNSAdaptor/hooks/useAvailabilityComputed.ts
@@ -1,20 +1,20 @@
 import { compact } from 'lodash-unified'
-import { useChainId, useITOConstants } from '@masknet/web3-shared-evm'
+import { useITOConstants } from '@masknet/web3-shared-evm'
 import isAfter from 'date-fns/isAfter'
 import { JSON_PayloadInMask, JSON_PayloadFromChain, ITO_Status } from '../../types'
 import { useAvailability } from './useAvailability'
 import { useQualification } from './useQualification'
 import { ITO_CONTRACT_BASE_TIMESTAMP } from '../../constants'
+import { useChainId } from '@masknet/plugin-infra/web3'
+import { NetworkPluginID } from '@masknet/web3-shared-base'
 
 export function useAvailabilityComputed(payload: JSON_PayloadInMask | JSON_PayloadFromChain) {
-    const chainId = useChainId()
+    const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
     const { DEFAULT_QUALIFICATION2_ADDRESS } = useITOConstants()
-    const asyncResult = useAvailability(
-        payload.pid,
-        payload.contract_address,
-        payload.chain_id ?? chainId,
-        payload.seller.address,
-    )
+    const asyncResult = useAvailability(payload.pid, payload.contract_address, {
+        account: payload.seller.address,
+        chainId: payload.chain_id ?? chainId,
+    })
     const { value: availability, loading: loadingITO } = asyncResult
     const qualificationAddress =
         payload.qualification_address ?? availability?.qualification_addr ?? DEFAULT_QUALIFICATION2_ADDRESS
diff --git a/packages/mask/src/plugins/ITO/SNSAdaptor/hooks/useClaimAll.ts b/packages/mask/src/plugins/ITO/SNSAdaptor/hooks/useClaimAll.ts
index e830ca868afc..d53f5a621b9c 100644
--- a/packages/mask/src/plugins/ITO/SNSAdaptor/hooks/useClaimAll.ts
+++ b/packages/mask/src/plugins/ITO/SNSAdaptor/hooks/useClaimAll.ts
@@ -1,8 +1,10 @@
+import { useRef, useEffect } from 'react'
 import { useAsyncRetry } from 'react-use'
-import { PluginITO_RPC } from '../../messages'
 import type { SwappedTokenType } from '../../types'
-import { ChainId, useBlockNumber } from '@masknet/web3-shared-evm'
-import { useRef, useEffect } from 'react'
+import * as chain from '../utils/chain'
+import type { ChainId } from '@masknet/web3-shared-evm'
+import { useBlockNumber, useWeb3Connection } from '@masknet/plugin-infra/web3'
+import { NetworkPluginID } from '@masknet/web3-shared-base'
 
 export function useClaimAll(swapperAddress: string, chainId: ChainId) {
     const allPoolsRef = useRef<SwappedTokenType[]>([])
@@ -11,10 +13,11 @@ export function useClaimAll(swapperAddress: string, chainId: ChainId) {
         allPoolsRef.current = []
     }, [chainId])
 
-    const { value: blockNumber = 0 } = useBlockNumber(chainId)
+    const { value: blockNumber = 0 } = useBlockNumber(NetworkPluginID.PLUGIN_EVM, { chainId })
+    const connection = useWeb3Connection(NetworkPluginID.PLUGIN_EVM, { chainId })
     const asyncResult = useAsyncRetry(async () => {
-        if (allPoolsRef.current.length > 0) return allPoolsRef.current
-        const results = await PluginITO_RPC.getClaimAllPools(chainId, blockNumber, swapperAddress)
+        if (allPoolsRef.current.length > 0 || !connection) return allPoolsRef.current
+        const results = await chain.getClaimAllPools(chainId, blockNumber, swapperAddress, connection)
         allPoolsRef.current = results
         return allPoolsRef.current
     }, [swapperAddress, blockNumber, chainId])
diff --git a/packages/mask/src/plugins/ITO/SNSAdaptor/hooks/useClaimCallback.ts b/packages/mask/src/plugins/ITO/SNSAdaptor/hooks/useClaimCallback.ts
index 741022b70777..c19b35837c7f 100644
--- a/packages/mask/src/plugins/ITO/SNSAdaptor/hooks/useClaimCallback.ts
+++ b/packages/mask/src/plugins/ITO/SNSAdaptor/hooks/useClaimCallback.ts
@@ -1,24 +1,27 @@
-import type { NonPayableTx } from '@masknet/web3-contracts/types/types'
-import { isSameAddress, TransactionEventType, useAccount, useChainId, useITOConstants } from '@masknet/web3-shared-evm'
-import stringify from 'json-stable-stringify'
 import { useAsyncFn } from 'react-use'
-import { checkAvailability } from '../../Worker/apis/checkAvailability'
+import stringify from 'json-stable-stringify'
+import type { NonPayableTx } from '@masknet/web3-contracts/types/types'
+import { NetworkPluginID, isSameAddress } from '@masknet/web3-shared-base'
+import { TransactionEventType, useITOConstants } from '@masknet/web3-shared-evm'
 import { useITO_Contract } from './useITO_Contract'
+import { checkAvailability } from '../utils/checkAvailability'
+import { useAccount, useChainId, useWeb3Connection } from '@masknet/plugin-infra/web3'
 
 export function useClaimCallback(pids: string[], contractAddress: string | undefined) {
-    const account = useAccount()
-    const chainId = useChainId()
+    const account = useAccount(NetworkPluginID.PLUGIN_EVM)
+    const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
+    const connection = useWeb3Connection(NetworkPluginID.PLUGIN_EVM, { chainId })
     const { ITO_CONTRACT_ADDRESS } = useITOConstants()
-    const { contract: ITO_Contract } = useITO_Contract(contractAddress)
+    const { contract: ITO_Contract } = useITO_Contract(chainId, contractAddress)
 
     const isV1 = isSameAddress(ITO_CONTRACT_ADDRESS ?? '', contractAddress)
     return useAsyncFn(async () => {
-        if (!ITO_Contract || !contractAddress || pids.length === 0) return
+        if (!ITO_Contract || !contractAddress || pids.length === 0 || !connection) return
 
         // check if already claimed
         try {
             const availabilityList = await Promise.all(
-                pids.map((pid) => checkAvailability(pid, account, contractAddress, chainId, isV1)),
+                pids.map((pid) => checkAvailability(pid, account, contractAddress, chainId, connection, isV1)),
             )
             const isClaimed = availabilityList.some((availability) => availability.claimed)
 
diff --git a/packages/mask/src/plugins/ITO/SNSAdaptor/hooks/useDestructCallback.ts b/packages/mask/src/plugins/ITO/SNSAdaptor/hooks/useDestructCallback.ts
index 2176cfce5699..319614ec8b09 100644
--- a/packages/mask/src/plugins/ITO/SNSAdaptor/hooks/useDestructCallback.ts
+++ b/packages/mask/src/plugins/ITO/SNSAdaptor/hooks/useDestructCallback.ts
@@ -1,11 +1,14 @@
+import { useAccount, useChainId } from '@masknet/plugin-infra/web3'
 import type { NonPayableTx } from '@masknet/web3-contracts/types/types'
-import { TransactionEventType, useAccount } from '@masknet/web3-shared-evm'
+import { NetworkPluginID } from '@masknet/web3-shared-base'
+import { TransactionEventType } from '@masknet/web3-shared-evm'
 import { useAsyncFn } from 'react-use'
 import { useITO_Contract } from './useITO_Contract'
 
 export function useDestructCallback(ito_address: string) {
-    const account = useAccount()
-    const { contract: ITO_Contract } = useITO_Contract(ito_address)
+    const account = useAccount(NetworkPluginID.PLUGIN_EVM)
+    const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
+    const { contract: ITO_Contract } = useITO_Contract(chainId, ito_address)
 
     return useAsyncFn(
         async (id: string) => {
diff --git a/packages/mask/src/plugins/ITO/SNSAdaptor/hooks/useExchangeTokenAmountstate.ts b/packages/mask/src/plugins/ITO/SNSAdaptor/hooks/useExchangeTokenAmountstate.ts
index bb913d35fdc2..197c46fcdfe0 100644
--- a/packages/mask/src/plugins/ITO/SNSAdaptor/hooks/useExchangeTokenAmountstate.ts
+++ b/packages/mask/src/plugins/ITO/SNSAdaptor/hooks/useExchangeTokenAmountstate.ts
@@ -1,11 +1,12 @@
 import { v4 as uuid } from 'uuid'
 import { useReducer } from 'react'
-import type { FungibleTokenDetailed } from '@masknet/web3-shared-evm'
+import type { FungibleToken } from '@masknet/web3-shared-base'
+import type { ChainId, SchemaType } from '@masknet/web3-shared-evm'
 
 export interface ExchangeTokenAndAmountState {
     key: string
     amount: string
-    token?: FungibleTokenDetailed
+    token?: FungibleToken<ChainId, SchemaType>
 }
 
 export enum ExchangeTokenAndAmountActionType {
@@ -20,7 +21,7 @@ export type ExchangeTokenAndAmountAction =
           type: ExchangeTokenAndAmountActionType.ADD
           key: string
           amount: string
-          token?: FungibleTokenDetailed
+          token?: FungibleToken<ChainId, SchemaType>
       }
     | {
           type: ExchangeTokenAndAmountActionType.REMOVE
@@ -33,7 +34,7 @@ export type ExchangeTokenAndAmountAction =
       }
     | {
           type: ExchangeTokenAndAmountActionType.UPDATE_TOKEN
-          token?: FungibleTokenDetailed
+          token?: FungibleToken<ChainId, SchemaType>
           key: string
       }
 
diff --git a/packages/mask/src/plugins/ITO/SNSAdaptor/hooks/useFill.ts b/packages/mask/src/plugins/ITO/SNSAdaptor/hooks/useFill.ts
index e65395a050c6..3d866f03734e 100644
--- a/packages/mask/src/plugins/ITO/SNSAdaptor/hooks/useFill.ts
+++ b/packages/mask/src/plugins/ITO/SNSAdaptor/hooks/useFill.ts
@@ -1,24 +1,18 @@
-import type { ITO2 } from '@masknet/web3-contracts/types/ITO2'
-import type { NonPayableTx } from '@masknet/web3-contracts/types/types'
-import { isGreaterThan, ONE } from '@masknet/web3-shared-base'
-import {
-    ERC20TokenDetailed,
-    FAKE_SIGN_PASSWORD,
-    FungibleTokenDetailed,
-    TransactionEventType,
-    useAccount,
-    useChainId,
-    useWeb3,
-} from '@masknet/web3-shared-evm'
-import BigNumber from 'bignumber.js'
 import { omit } from 'lodash-unified'
 import { useAsync, useAsyncFn } from 'react-use'
+import BigNumber from 'bignumber.js'
+import { sha3 } from 'web3-utils'
 import type { TransactionReceipt } from 'web3-core'
-import Web3Utils from 'web3-utils'
+import type { ITO2 } from '@masknet/web3-contracts/types/ITO2'
+import type { NonPayableTx } from '@masknet/web3-contracts/types/types'
+import { TransactionEventType, ChainId, SchemaType, FAKE_SIGN_PASSWORD } from '@masknet/web3-shared-evm'
+import { useAccount, useChainId, useWeb3 } from '@masknet/plugin-infra/web3'
+import { FungibleToken, isGreaterThan, NetworkPluginID, ONE } from '@masknet/web3-shared-base'
 import { ITO_CONTRACT_BASE_TIMESTAMP, MSG_DELIMITER } from '../../constants'
 import type { AdvanceSettingData } from '../AdvanceSetting'
 import { gcd, sortTokens } from '../helpers'
 import { useITO_Contract } from './useITO_Contract'
+import { useI18N } from '../../../../utils'
 
 export interface PoolSettings {
     password: string
@@ -32,8 +26,8 @@ export interface PoolSettings {
     total: string
     qualificationAddress: string
     exchangeAmounts: string[]
-    exchangeTokens: FungibleTokenDetailed[]
-    token?: ERC20TokenDetailed
+    exchangeTokens: Array<FungibleToken<ChainId, SchemaType.ERC20 | SchemaType.Native>>
+    token?: FungibleToken<ChainId, SchemaType.ERC20>
     advanceSettingData: AdvanceSettingData
 }
 
@@ -53,19 +47,20 @@ type paramsObjType = {
     now: number
     invalidTokenAt: number
     exchangeAmounts: string[]
-    exchangeTokens: FungibleTokenDetailed[]
-    token: ERC20TokenDetailed | undefined
+    exchangeTokens: Array<FungibleToken<ChainId, SchemaType.ERC20 | SchemaType.Native>>
+    token: FungibleToken<ChainId, SchemaType.ERC20> | undefined
 }
 
 export function useFillCallback(poolSettings?: PoolSettings) {
-    const web3 = useWeb3()
-    const account = useAccount()
-    const chainId = useChainId()
-    const { contract: ITO_Contract } = useITO_Contract()
+    const { t } = useI18N()
+    const web3 = useWeb3(NetworkPluginID.PLUGIN_EVM)
+    const account = useAccount(NetworkPluginID.PLUGIN_EVM)
+    const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
+    const { contract: ITO_Contract } = useITO_Contract(chainId)
     const paramResult = useFillParams(poolSettings)
 
     const [state, fillCallback] = useAsyncFn(async () => {
-        if (!poolSettings) return
+        if (!web3 || !poolSettings) return
 
         const { password, startTime, endTime, token, unlockTime } = poolSettings
 
@@ -85,7 +80,7 @@ export function useFillCallback(poolSettings?: PoolSettings) {
         if (!signedPassword) {
             return
         }
-        params[0] = Web3Utils.sha3(signedPassword)!
+        params[0] = sha3(signedPassword)!
 
         // the given settings is valid
         const settings: PoolSettings = {
@@ -127,7 +122,8 @@ export function useFillCallback(poolSettings?: PoolSettings) {
 }
 
 export function useFillParams(poolSettings: PoolSettings | undefined) {
-    const { contract: ITO_Contract } = useITO_Contract()
+    const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
+    const { contract: ITO_Contract } = useITO_Contract(chainId)
 
     return useAsync(async () => {
         if (!poolSettings || !ITO_Contract) return null
diff --git a/packages/mask/src/plugins/ITO/SNSAdaptor/hooks/useITO_Contract.ts b/packages/mask/src/plugins/ITO/SNSAdaptor/hooks/useITO_Contract.ts
index 6abb4d1575cf..134821aac0b8 100644
--- a/packages/mask/src/plugins/ITO/SNSAdaptor/hooks/useITO_Contract.ts
+++ b/packages/mask/src/plugins/ITO/SNSAdaptor/hooks/useITO_Contract.ts
@@ -3,12 +3,14 @@ import ITO_ABI from '@masknet/web3-contracts/abis/ITO.json'
 import ITO2_ABI from '@masknet/web3-contracts/abis/ITO2.json'
 import type { ITO } from '@masknet/web3-contracts/types/ITO'
 import type { ITO2 } from '@masknet/web3-contracts/types/ITO2'
-import { useITOConstants, useContract, isSameAddress } from '@masknet/web3-shared-evm'
+import { isSameAddress } from '@masknet/web3-shared-base'
+import { useITOConstants, ChainId } from '@masknet/web3-shared-evm'
+import { useContract } from '@masknet/plugin-infra/web3-evm'
 
-export function useITO_Contract(contractAddress?: string) {
-    const { ITO_CONTRACT_ADDRESS, ITO2_CONTRACT_ADDRESS } = useITOConstants()
-    const ITO_CONTRACT = useContract<ITO>(ITO_CONTRACT_ADDRESS, ITO_ABI as AbiItem[])
-    const ITO2_CONTRACT = useContract<ITO2>(ITO2_CONTRACT_ADDRESS, ITO2_ABI as AbiItem[])
+export function useITO_Contract(chainId?: ChainId, contractAddress?: string) {
+    const { ITO_CONTRACT_ADDRESS, ITO2_CONTRACT_ADDRESS } = useITOConstants(chainId)
+    const ITO_CONTRACT = useContract<ITO>(chainId, ITO_CONTRACT_ADDRESS, ITO_ABI as AbiItem[])
+    const ITO2_CONTRACT = useContract<ITO2>(chainId, ITO2_CONTRACT_ADDRESS, ITO2_ABI as AbiItem[])
 
     return contractAddress && isSameAddress(contractAddress, ITO_CONTRACT_ADDRESS)
         ? { contract: ITO_CONTRACT, version: 1 }
diff --git a/packages/mask/src/plugins/ITO/SNSAdaptor/hooks/useIfQualified.ts b/packages/mask/src/plugins/ITO/SNSAdaptor/hooks/useIfQualified.ts
index d7b655333501..8418bf33ecb1 100644
--- a/packages/mask/src/plugins/ITO/SNSAdaptor/hooks/useIfQualified.ts
+++ b/packages/mask/src/plugins/ITO/SNSAdaptor/hooks/useIfQualified.ts
@@ -1,13 +1,14 @@
 import { useAsyncRetry } from 'react-use'
-import { useAccount, useChainId } from '@masknet/web3-shared-evm'
 import type { Qualification } from '@masknet/web3-contracts/types/Qualification'
 import type { Qualification2 } from '@masknet/web3-contracts/types/Qualification2'
 import { useQualificationContract } from './useQualificationContract'
+import { useAccount, useChainId } from '@masknet/plugin-infra/web3'
+import { NetworkPluginID } from '@masknet/web3-shared-base'
 
 export function useIfQualified(address: string, ito_address: string) {
-    const account = useAccount()
-    const chainId = useChainId()
-    const { contract: qualificationContract, version } = useQualificationContract(address, ito_address)
+    const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
+    const account = useAccount(NetworkPluginID.PLUGIN_EVM)
+    const { contract: qualificationContract, version } = useQualificationContract(chainId, address, ito_address)
 
     return useAsyncRetry(async () => {
         if (!qualificationContract) return false
diff --git a/packages/mask/src/plugins/ITO/SNSAdaptor/hooks/useMaskClaimCallback.ts b/packages/mask/src/plugins/ITO/SNSAdaptor/hooks/useMaskClaimCallback.ts
index bf8f1900aa9e..39a5c72f201f 100644
--- a/packages/mask/src/plugins/ITO/SNSAdaptor/hooks/useMaskClaimCallback.ts
+++ b/packages/mask/src/plugins/ITO/SNSAdaptor/hooks/useMaskClaimCallback.ts
@@ -1,12 +1,14 @@
-import type { NonPayableTx } from '@masknet/web3-contracts/types/types'
-import { TransactionEventType, useAccount, useChainId } from '@masknet/web3-shared-evm'
 import { useAsyncFn } from 'react-use'
+import type { NonPayableTx } from '@masknet/web3-contracts/types/types'
+import { TransactionEventType } from '@masknet/web3-shared-evm'
 import { useMaskITO_Contract } from './useMaskITO_Contract'
+import { useAccount, useChainId } from '@masknet/plugin-infra/web3'
+import { NetworkPluginID } from '@masknet/web3-shared-base'
 
 export function useMaskClaimCallback() {
-    const account = useAccount()
-    const chainId = useChainId()
-    const MaskITO_Contract = useMaskITO_Contract()
+    const account = useAccount(NetworkPluginID.PLUGIN_EVM)
+    const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
+    const MaskITO_Contract = useMaskITO_Contract(chainId)
 
     return useAsyncFn(async () => {
         if (!MaskITO_Contract) return
diff --git a/packages/mask/src/plugins/ITO/SNSAdaptor/hooks/useMaskITO_Contract.ts b/packages/mask/src/plugins/ITO/SNSAdaptor/hooks/useMaskITO_Contract.ts
index 602c92ba639e..a1b1f69361d8 100644
--- a/packages/mask/src/plugins/ITO/SNSAdaptor/hooks/useMaskITO_Contract.ts
+++ b/packages/mask/src/plugins/ITO/SNSAdaptor/hooks/useMaskITO_Contract.ts
@@ -1,9 +1,10 @@
+import type { AbiItem } from 'web3-utils'
 import MaskITO_ABI from '@masknet/web3-contracts/abis/MaskITO.json'
 import type { MaskITO } from '@masknet/web3-contracts/types/MaskITO'
-import { useContract, useITOConstants } from '@masknet/web3-shared-evm'
-import type { AbiItem } from 'web3-utils'
+import { ChainId, useITOConstants } from '@masknet/web3-shared-evm'
+import { useContract } from '@masknet/plugin-infra/web3-evm'
 
-export function useMaskITO_Contract() {
+export function useMaskITO_Contract(chainId?: ChainId) {
     const { MASK_ITO_CONTRACT_ADDRESS } = useITOConstants()
-    return useContract<MaskITO>(MASK_ITO_CONTRACT_ADDRESS, MaskITO_ABI as AbiItem[])
+    return useContract<MaskITO>(chainId, MASK_ITO_CONTRACT_ADDRESS, MaskITO_ABI as AbiItem[])
 }
diff --git a/packages/mask/src/plugins/ITO/SNSAdaptor/hooks/useMaskITO_Packet.ts b/packages/mask/src/plugins/ITO/SNSAdaptor/hooks/useMaskITO_Packet.ts
index 2684ee4bc2cc..f10995af73fa 100644
--- a/packages/mask/src/plugins/ITO/SNSAdaptor/hooks/useMaskITO_Packet.ts
+++ b/packages/mask/src/plugins/ITO/SNSAdaptor/hooks/useMaskITO_Packet.ts
@@ -1,10 +1,12 @@
+import { useAccount, useChainId } from '@masknet/plugin-infra/web3'
+import { NetworkPluginID } from '@masknet/web3-shared-base'
 import { useAsyncRetry } from 'react-use'
-import { useAccount } from '@masknet/web3-shared-evm'
 import { useMaskITO_Contract } from './useMaskITO_Contract'
 
 export function useMaskITO_Packet() {
-    const account = useAccount()
-    const MaskITO_Contract = useMaskITO_Contract()
+    const account = useAccount(NetworkPluginID.PLUGIN_EVM)
+    const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
+    const MaskITO_Contract = useMaskITO_Contract(chainId)
     return useAsyncRetry(async () => {
         if (!MaskITO_Contract) return
         const [unlockTime, claimable = '0'] = await Promise.all([
diff --git a/packages/mask/src/plugins/ITO/SNSAdaptor/hooks/usePoolPayload.ts b/packages/mask/src/plugins/ITO/SNSAdaptor/hooks/usePoolPayload.ts
index 871642bab592..83b9225a4638 100644
--- a/packages/mask/src/plugins/ITO/SNSAdaptor/hooks/usePoolPayload.ts
+++ b/packages/mask/src/plugins/ITO/SNSAdaptor/hooks/usePoolPayload.ts
@@ -1,9 +1,12 @@
 import { useAsyncRetry } from 'react-use'
+import { useChainId } from '@masknet/plugin-infra/web3'
+import { NetworkPluginID } from '@masknet/web3-shared-base'
 import { PluginITO_RPC } from '../../messages'
 
 export function usePoolPayload(pid: string) {
+    const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
     return useAsyncRetry(async () => {
         if (!pid) return
-        return PluginITO_RPC.getPool(pid)
-    }, [pid])
+        return PluginITO_RPC.getPool(pid, chainId)
+    }, [pid, chainId])
 }
diff --git a/packages/mask/src/plugins/ITO/SNSAdaptor/hooks/usePoolTradeInfo.ts b/packages/mask/src/plugins/ITO/SNSAdaptor/hooks/usePoolTradeInfo.ts
index 7e210d5ec8cc..a021ffb44934 100644
--- a/packages/mask/src/plugins/ITO/SNSAdaptor/hooks/usePoolTradeInfo.ts
+++ b/packages/mask/src/plugins/ITO/SNSAdaptor/hooks/usePoolTradeInfo.ts
@@ -1,4 +1,6 @@
 import { useAsyncRetry } from 'react-use'
+import { useChainId } from '@masknet/plugin-infra/web3'
+import { NetworkPluginID } from '@masknet/web3-shared-base'
 import { PluginITO_RPC } from '../../messages'
 
 /**
@@ -7,8 +9,9 @@ import { PluginITO_RPC } from '../../messages'
  * @param trader
  */
 export function usePoolTradeInfo(pid: string, trader: string) {
+    const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
     return useAsyncRetry(async () => {
         if (!pid || !trader) return
-        return PluginITO_RPC.getTradeInfo(pid, trader)
-    }, [pid, trader])
+        return PluginITO_RPC.getTradeInfo(pid, trader, chainId)
+    }, [pid, trader, chainId])
 }
diff --git a/packages/mask/src/plugins/ITO/SNSAdaptor/hooks/useQualification.ts b/packages/mask/src/plugins/ITO/SNSAdaptor/hooks/useQualification.ts
index 8a1d0e4a397f..f84af29eb9e8 100644
--- a/packages/mask/src/plugins/ITO/SNSAdaptor/hooks/useQualification.ts
+++ b/packages/mask/src/plugins/ITO/SNSAdaptor/hooks/useQualification.ts
@@ -1,10 +1,12 @@
 import { useAsyncRetry } from 'react-use'
-import { useAccount } from '@masknet/web3-shared-evm'
+import { useAccount, useChainId } from '@masknet/plugin-infra/web3'
+import { NetworkPluginID } from '@masknet/web3-shared-base'
 import { useQualificationContract } from './useQualificationContract'
 
 export function useQualification(qualification_address: string, ito_address: string) {
-    const account = useAccount()
-    const { contract: qualificationContract } = useQualificationContract(qualification_address, ito_address)
+    const account = useAccount(NetworkPluginID.PLUGIN_EVM)
+    const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
+    const { contract: qualificationContract } = useQualificationContract(chainId, qualification_address, ito_address)
 
     return useAsyncRetry(async () => {
         const startTime = await qualificationContract!.methods.get_start_time().call({ from: account })
diff --git a/packages/mask/src/plugins/ITO/SNSAdaptor/hooks/useQualificationContract.ts b/packages/mask/src/plugins/ITO/SNSAdaptor/hooks/useQualificationContract.ts
index e458e5be9e61..7954e86f9a2c 100644
--- a/packages/mask/src/plugins/ITO/SNSAdaptor/hooks/useQualificationContract.ts
+++ b/packages/mask/src/plugins/ITO/SNSAdaptor/hooks/useQualificationContract.ts
@@ -3,12 +3,14 @@ import type { Qualification } from '@masknet/web3-contracts/types/Qualification'
 import type { Qualification2 } from '@masknet/web3-contracts/types/Qualification2'
 import QualificationABI from '@masknet/web3-contracts/abis/Qualification.json'
 import Qualification2ABI from '@masknet/web3-contracts/abis/Qualification2.json'
-import { useContract, isSameAddress, useITOConstants } from '@masknet/web3-shared-evm'
+import { isSameAddress } from '@masknet/web3-shared-base'
+import { ChainId, useITOConstants } from '@masknet/web3-shared-evm'
+import { useContract } from '@masknet/plugin-infra/web3-evm'
 
-export function useQualificationContract(address?: string, ito_address?: string) {
+export function useQualificationContract(chainId?: ChainId, address?: string, ito_address?: string) {
     const { ITO_CONTRACT_ADDRESS } = useITOConstants()
-    const QLF_CONTRACT = useContract<Qualification>(address, QualificationABI as AbiItem[])
-    const QLF2_CONTRACT = useContract<Qualification2>(address, Qualification2ABI as AbiItem[])
+    const QLF_CONTRACT = useContract<Qualification>(chainId, address, QualificationABI as AbiItem[])
+    const QLF2_CONTRACT = useContract<Qualification2>(chainId, address, Qualification2ABI as AbiItem[])
 
     return isSameAddress(ito_address, ITO_CONTRACT_ADDRESS)
         ? {
diff --git a/packages/mask/src/plugins/ITO/SNSAdaptor/hooks/useQualificationVerify.ts b/packages/mask/src/plugins/ITO/SNSAdaptor/hooks/useQualificationVerify.ts
index 25598d81f645..1d9b5e6037bc 100644
--- a/packages/mask/src/plugins/ITO/SNSAdaptor/hooks/useQualificationVerify.ts
+++ b/packages/mask/src/plugins/ITO/SNSAdaptor/hooks/useQualificationVerify.ts
@@ -7,12 +7,15 @@ import {
     QUALIFICATION_HAS_START_TIME_INTERFACE_ID,
     QUALIFICATION_HAS_LUCKY_INTERFACE_ID,
 } from '../../constants'
-import { useAccount, useERC165 } from '@masknet/web3-shared-evm'
 import { useQualificationContract } from './useQualificationContract'
+import { useAccount, useChainId } from '@masknet/plugin-infra/web3'
+import { NetworkPluginID } from '@masknet/web3-shared-base'
+import { useERC165 } from '@masknet/plugin-infra/web3-evm'
 
-export function useQualificationVerify(address: string, ito_address?: string) {
-    const account = useAccount()
-    const { contract: qualificationContract, version } = useQualificationContract(address, ito_address)
+export function useQualificationVerify(address?: string, ito_address?: string) {
+    const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
+    const account = useAccount(NetworkPluginID.PLUGIN_EVM)
+    const { contract: qualificationContract, version } = useQualificationContract(chainId, address, ito_address)
     const { value: isQualificationHasLucky, loading: loadingQualificationHasLucky } = useERC165<
         Qualification | Qualification2
     >(qualificationContract, address, QUALIFICATION_HAS_LUCKY_INTERFACE_ID)
diff --git a/packages/mask/src/plugins/ITO/SNSAdaptor/hooks/useSpaceStationCampaignInfo.ts b/packages/mask/src/plugins/ITO/SNSAdaptor/hooks/useSpaceStationCampaignInfo.ts
deleted file mode 100644
index 3c8965dd3ba0..000000000000
--- a/packages/mask/src/plugins/ITO/SNSAdaptor/hooks/useSpaceStationCampaignInfo.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { useAsyncRetry } from 'react-use'
-import { getCampaignInfo, getClaimableTokenCount } from '../../Worker/apis/spaceStationGalaxy'
-
-export const CAMPAIGN_ID_LIST = [160, 175, 176, 177, 178, 179, 180]
-
-export function useSpaceStationCampaignInfo(address: string, nftAirdropEnabled: boolean) {
-    return useAsyncRetry(async () => {
-        if (!address || !nftAirdropEnabled) return []
-        return Promise.all(
-            CAMPAIGN_ID_LIST.map(async (id) => {
-                const campaignInfo = await getCampaignInfo(id)
-                const data = await getClaimableTokenCount(address, id)
-                const claimableInfo = {
-                    claimable: data.maxCount - data.usedCount > 0,
-                    claimed: data.maxCount > 0 && data.maxCount - data.usedCount === 0,
-                }
-                return { campaignInfo, claimableInfo }
-            }),
-        )
-    }, [address])
-}
diff --git a/packages/mask/src/plugins/ITO/SNSAdaptor/hooks/useSpaceStationClaimable.ts b/packages/mask/src/plugins/ITO/SNSAdaptor/hooks/useSpaceStationClaimable.ts
deleted file mode 100644
index 935a6f13545f..000000000000
--- a/packages/mask/src/plugins/ITO/SNSAdaptor/hooks/useSpaceStationClaimable.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { getClaimableTokenCount } from '../../Worker/apis/spaceStationGalaxy'
-import { useAsyncRetry } from 'react-use'
-
-export function useSpaceStationClaimable(address: string, id: number) {
-    return useAsyncRetry(async () => {
-        const data = await getClaimableTokenCount(address, id)
-        return {
-            claimable: data.maxCount - data.usedCount > 0,
-            claimed: data.maxCount > 0 && data.maxCount - data.usedCount === 0,
-        }
-    }, [address])
-}
diff --git a/packages/mask/src/plugins/ITO/SNSAdaptor/hooks/useSpaceStationClaimableTokenCountCallback.ts b/packages/mask/src/plugins/ITO/SNSAdaptor/hooks/useSpaceStationClaimableTokenCountCallback.ts
deleted file mode 100644
index 624f57136c35..000000000000
--- a/packages/mask/src/plugins/ITO/SNSAdaptor/hooks/useSpaceStationClaimableTokenCountCallback.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import { getClaimableTokenCount } from '../../Worker/apis/spaceStationGalaxy'
-import { CAMPAIGN_ID_LIST } from './useSpaceStationCampaignInfo'
-import { useCallback, useState } from 'react'
-
-export function useSpaceStationClaimableTokenCountCallback() {
-    const [spaceStationAccountClaimableLoading, setSpaceStationAccountClaimableLoading] = useState(false)
-    const [spaceStationClaimableCount, setSpaceStationClaimableCount] = useState<number | undefined>(undefined)
-    const spaceStationAccountClaimableCallback = useCallback(
-        async (address: string) => {
-            setSpaceStationAccountClaimableLoading(true)
-            const data = await Promise.all(
-                CAMPAIGN_ID_LIST.map(async (id) => {
-                    const claimableCount = await getClaimableTokenCount(address, id)
-                    return claimableCount.maxCount - claimableCount.usedCount > 0
-                }),
-            )
-            setSpaceStationAccountClaimableLoading(false)
-            setSpaceStationClaimableCount(data.filter((v) => Boolean(v)).length)
-        },
-        [setSpaceStationAccountClaimableLoading, getClaimableTokenCount, setSpaceStationAccountClaimableLoading],
-    )
-
-    return [
-        spaceStationClaimableCount,
-        setSpaceStationClaimableCount,
-        spaceStationAccountClaimableCallback,
-        spaceStationAccountClaimableLoading,
-    ] as const
-}
diff --git a/packages/mask/src/plugins/ITO/SNSAdaptor/hooks/useSpaceStationContract.ts b/packages/mask/src/plugins/ITO/SNSAdaptor/hooks/useSpaceStationContract.ts
deleted file mode 100644
index 7411f79059aa..000000000000
--- a/packages/mask/src/plugins/ITO/SNSAdaptor/hooks/useSpaceStationContract.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import type { AbiItem } from 'web3-utils'
-import spaceStationGalaxy_ABI from '@masknet/web3-contracts/abis/SpaceStationGalaxy.json'
-import type { SpaceStationGalaxy } from '@masknet/web3-contracts/types/SpaceStationGalaxy'
-import { useSpaceStationGalaxyConstants, useContract } from '@masknet/web3-shared-evm'
-
-export function useSpaceStationContract() {
-    const { CONTRACT_ADDRESS } = useSpaceStationGalaxyConstants()
-    return useContract<SpaceStationGalaxy>(CONTRACT_ADDRESS, spaceStationGalaxy_ABI as AbiItem[])
-}
diff --git a/packages/mask/src/plugins/ITO/SNSAdaptor/hooks/useSpaceStationContractClaimCallback.ts b/packages/mask/src/plugins/ITO/SNSAdaptor/hooks/useSpaceStationContractClaimCallback.ts
deleted file mode 100644
index ab72cf70ea35..000000000000
--- a/packages/mask/src/plugins/ITO/SNSAdaptor/hooks/useSpaceStationContractClaimCallback.ts
+++ /dev/null
@@ -1,71 +0,0 @@
-import type { SpaceStationGalaxy } from '@masknet/web3-contracts/types/SpaceStationGalaxy'
-import type { NonPayableTx } from '@masknet/web3-contracts/types/types'
-import { TransactionEventType, useAccount, useSpaceStationGalaxyConstants } from '@masknet/web3-shared-evm'
-import { useAsyncFn } from 'react-use'
-import Services from '../../../../extension/service'
-import type { CampaignInfo } from '../../types'
-import { getAccountClaimSignature, mutationParticipate } from '../../Worker/apis/spaceStationGalaxy'
-import { useSpaceStationContract } from './useSpaceStationContract'
-
-export function useSpaceStationContractClaimCallback(campaignInfo: CampaignInfo) {
-    const account = useAccount()
-    const spaceStationContract = useSpaceStationContract()
-    const { CONTRACT_ADDRESS } = useSpaceStationGalaxyConstants()
-
-    return useAsyncFn(async () => {
-        if (!CONTRACT_ADDRESS || !spaceStationContract || !campaignInfo) {
-            return
-        }
-
-        const useSignature = await Services.Ethereum.personalSign(
-            `${campaignInfo.name}
-
-${campaignInfo.description}`,
-            account,
-        )
-
-        const { allow, signature, verifyIDs, nftCoreAddress, powahs } = await getAccountClaimSignature(
-            useSignature,
-            account,
-            campaignInfo.chain,
-            campaignInfo.id,
-        )
-
-        if (!allow) {
-            throw new Error('Not allowed to claim.')
-        }
-        const params = [campaignInfo.id, nftCoreAddress, verifyIDs[0], powahs[0], signature] as Parameters<
-            SpaceStationGalaxy['methods']['claim']
-        >
-        // estimate gas and compose transaction
-        const config = {
-            from: account,
-            gas: await spaceStationContract.methods.claim(...params).estimateGas({ from: account }),
-        }
-        return new Promise<string>(async (resolve, reject) => {
-            spaceStationContract.methods
-                .claim(...params)
-                .send(config as NonPayableTx)
-                .on(TransactionEventType.TRANSACTION_HASH, async (hash) => {
-                    const participated = await mutationParticipate(
-                        useSignature,
-                        account,
-                        campaignInfo.chain,
-                        campaignInfo.id,
-                        hash,
-                        verifyIDs,
-                    )
-
-                    if (!participated) {
-                        throw new Error('Failed to claim')
-                    }
-                })
-                .on(TransactionEventType.CONFIRMATION, (no, receipt) => {
-                    resolve(receipt.transactionHash)
-                })
-                .on(TransactionEventType.ERROR, (error) => {
-                    reject(error)
-                })
-        })
-    }, [account, campaignInfo, CONTRACT_ADDRESS, spaceStationContract])
-}
diff --git a/packages/mask/src/plugins/ITO/SNSAdaptor/hooks/useSwapCallback.ts b/packages/mask/src/plugins/ITO/SNSAdaptor/hooks/useSwapCallback.ts
index 238ca8c190e7..76ef223a5680 100644
--- a/packages/mask/src/plugins/ITO/SNSAdaptor/hooks/useSwapCallback.ts
+++ b/packages/mask/src/plugins/ITO/SNSAdaptor/hooks/useSwapCallback.ts
@@ -1,45 +1,50 @@
-import { fromHex, toHex } from '@masknet/shared-base'
+import { useAsyncFn } from 'react-use'
+import type { TransactionReceipt } from 'web3-core'
+import Web3Utils from 'web3-utils'
 import type { ITO } from '@masknet/web3-contracts/types/ITO'
 import type { ITO2 } from '@masknet/web3-contracts/types/ITO2'
 import type { Qualification } from '@masknet/web3-contracts/types/Qualification'
 import type { Qualification2 } from '@masknet/web3-contracts/types/Qualification2'
 import type { PayableTx } from '@masknet/web3-contracts/types/types'
-import { isPositive, isZero, toFixed } from '@masknet/web3-shared-base'
+import { ChainId, SchemaType, TransactionEventType, useITOConstants } from '@masknet/web3-shared-evm'
 import {
-    currySameAddress,
-    EthereumTokenType,
-    FungibleTokenDetailed,
     isSameAddress,
-    TransactionEventType,
-    useAccount,
-    useChainId,
-    useITOConstants,
-} from '@masknet/web3-shared-evm'
-import { useAsyncFn } from 'react-use'
-import type { TransactionReceipt } from 'web3-core'
-import Web3Utils from 'web3-utils'
-import type { JSON_PayloadInMask } from '../../types'
-import { checkAvailability } from '../../Worker/apis/checkAvailability'
+    isPositive,
+    isZero,
+    NetworkPluginID,
+    toFixed,
+    FungibleToken,
+    currySameAddress,
+} from '@masknet/web3-shared-base'
+import { useI18N } from '../../../../utils'
+import { fromHex, toHex } from '@masknet/shared-base'
 import { useITO_Contract } from './useITO_Contract'
 import { useQualificationContract } from './useQualificationContract'
+import type { JSON_PayloadInMask } from '../../types'
+import { checkAvailability } from '../utils/checkAvailability'
+import { useAccount, useChainId, useWeb3Connection } from '@masknet/plugin-infra/web3'
 
 export function useSwapCallback(
     payload: JSON_PayloadInMask,
     total: string,
-    token: Partial<FungibleTokenDetailed>,
+    token: Partial<FungibleToken<ChainId, SchemaType>>,
     isQualificationHasLucky = false,
 ) {
-    const account = useAccount()
-    const chainId = useChainId()
+    const { t } = useI18N()
+
+    const account = useAccount(NetworkPluginID.PLUGIN_EVM)
+    const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
+    const connection = useWeb3Connection(NetworkPluginID.PLUGIN_EVM, { chainId })
     const { ITO_CONTRACT_ADDRESS } = useITOConstants()
-    const { contract: ITO_Contract, version } = useITO_Contract(payload.contract_address)
+    const { contract: ITO_Contract, version } = useITO_Contract(chainId, payload.contract_address)
     const { contract: qualificationContract } = useQualificationContract(
+        chainId,
         payload.qualification_address,
         payload.contract_address,
     )
 
     return useAsyncFn(async () => {
-        if (!ITO_Contract || !qualificationContract || !payload) return
+        if (!ITO_Contract || !qualificationContract || !payload || !connection) return
 
         const { pid, password } = payload
 
@@ -77,6 +82,7 @@ export function useSwapCallback(
                 account,
                 payload.contract_address,
                 chainId,
+                connection,
                 isSameAddress(payload.contract_address, ITO_CONTRACT_ADDRESS),
             )
             if (isZero(availability.remaining)) {
@@ -109,7 +115,7 @@ export function useSwapCallback(
         ] as Parameters<ITO2['methods']['swap']>
 
         // estimate gas and compose transaction
-        const value = toFixed(token.type === EthereumTokenType.Native ? total : 0)
+        const value = toFixed(token.schema === SchemaType.Native ? total : 0)
         const config = {
             from: account,
             gas: isQualificationHasLucky
diff --git a/packages/mask/src/plugins/ITO/SNSAdaptor/index.tsx b/packages/mask/src/plugins/ITO/SNSAdaptor/index.tsx
index defdb691d080..3ee2b545856b 100644
--- a/packages/mask/src/plugins/ITO/SNSAdaptor/index.tsx
+++ b/packages/mask/src/plugins/ITO/SNSAdaptor/index.tsx
@@ -2,13 +2,7 @@ import { type Plugin, usePluginWrapper } from '@masknet/plugin-infra/content-scr
 import { useState } from 'react'
 import { ItoLabelIcon } from '../assets/ItoLabelIcon'
 import { makeStyles } from '@masknet/theme'
-import {
-    formatEthereumAddress,
-    formatBalance,
-    useFungibleTokenDetailed,
-    EthereumTokenType,
-} from '@masknet/web3-shared-evm'
-import { Trans } from 'react-i18next'
+import { formatEthereumAddress } from '@masknet/web3-shared-evm'
 import { PostInspector } from './PostInspector'
 import { base } from '../base'
 import { ITO_MetaKey_1, ITO_MetaKey_2, MSG_DELIMITER } from '../constants'
@@ -20,6 +14,9 @@ import { MarketsIcon, MarketsClaimIcon } from '@masknet/icons'
 import { ApplicationEntry } from '@masknet/shared'
 import { CrossIsolationMessages } from '@masknet/shared-base'
 import { ClaimAllDialog } from './ClaimAllDialog'
+import { useFungibleToken } from '@masknet/plugin-infra/web3'
+import { formatBalance, NetworkPluginID } from '@masknet/web3-shared-base'
+import { Trans } from 'react-i18next'
 
 const useStyles = makeStyles()((theme) => ({
     root: {
@@ -136,10 +133,7 @@ interface BadgeProps {
 }
 function Badge({ payload }: BadgeProps) {
     const { classes } = useStyles()
-    const { value: tokenDetailed, loading: loadingToken } = useFungibleTokenDetailed(
-        EthereumTokenType.ERC20,
-        payload.token,
-    )
+    const { value: tokenDetailed, loading: loadingToken } = useFungibleToken(NetworkPluginID.PLUGIN_EVM, payload.token)
     const balance = formatBalance(payload.total, tokenDetailed?.decimals)
     const symbol = tokenDetailed?.symbol ?? tokenDetailed?.name ?? 'Token'
     const sellerName = payload.seller.name
diff --git a/packages/mask/src/plugins/ITO/Worker/apis/chain.ts b/packages/mask/src/plugins/ITO/SNSAdaptor/utils/chain.ts
similarity index 87%
rename from packages/mask/src/plugins/ITO/Worker/apis/chain.ts
rename to packages/mask/src/plugins/ITO/SNSAdaptor/utils/chain.ts
index 302bbc539fed..f4dc25d8b672 100644
--- a/packages/mask/src/plugins/ITO/Worker/apis/chain.ts
+++ b/packages/mask/src/plugins/ITO/SNSAdaptor/utils/chain.ts
@@ -1,22 +1,16 @@
-import {
-    ChainId,
-    getExplorerConstants,
-    getITOConstants,
-    isSameAddress,
-    FungibleTokenDetailed,
-    EthereumTokenType,
-} from '@masknet/web3-shared-evm'
-import { Interface } from '@ethersproject/abi'
-import ITO_ABI from '@masknet/web3-contracts/abis/ITO2.json'
 import urlcat from 'urlcat'
 import { first } from 'lodash-unified'
 import BigNumber from 'bignumber.js'
+import isAfter from 'date-fns/isAfter'
+import isEqual from 'date-fns/isEqual'
+import { isSameAddress, FungibleToken, TokenType, NetworkPluginID } from '@masknet/web3-shared-base'
+import { ChainId, getExplorerConstants, getITOConstants, SchemaType } from '@masknet/web3-shared-evm'
+import { Interface } from '@ethersproject/abi'
+import ITO_ABI from '@masknet/web3-contracts/abis/ITO2.json'
 import type { PoolFromNetwork, JSON_PayloadFromChain, SwappedTokenType } from '../../types'
 import { MSG_DELIMITER, ITO_CONTRACT_BASE_TIMESTAMP } from '../../constants'
-import { getTransactionReceipt } from '../../../../extension/background-script/EthereumService'
 import { checkAvailability } from './checkAvailability'
-import isAfter from 'date-fns/isAfter'
-import isEqual from 'date-fns/isEqual'
+import type { Web3Helper } from '@masknet/plugin-infra/src/web3-helpers'
 
 const interFace = new Interface(ITO_ABI)
 
@@ -33,6 +27,7 @@ export async function getAllPoolsAsSeller(
     startBlock: number | undefined,
     endBlock: number,
     sellerAddress: string,
+    connection: Web3Helper.Web3Connection<NetworkPluginID.PLUGIN_EVM>,
 ) {
     const { EXPLORER_API, API_KEYS = [] } = getExplorerConstants(chainId)
     const { ITO2_CONTRACT_ADDRESS } = getITOConstants(chainId)
@@ -132,7 +127,7 @@ export async function getAllPoolsAsSeller(
 
     const eventLogResponse = await Promise.allSettled(
         payloadList.map(async (entity) => {
-            const result = await getTransactionReceipt(entity.hash)
+            const result = await connection.getTransactionReceipt(entity.hash, { chainId })
             if (!result) return null
 
             const log = result.logs.find((log) => isSameAddress(log.address, ITO2_CONTRACT_ADDRESS))
@@ -153,6 +148,7 @@ export async function getAllPoolsAsSeller(
                 entity.payload.seller.address,
                 entity.payload.contract_address,
                 chainId,
+                connection,
             )
 
             entity.payload.total_remaining = new BigNumber(data.remaining).toString()
@@ -172,11 +168,16 @@ export async function getAllPoolsAsSeller(
         .filter((v) => Boolean(v)) as PoolFromNetwork[]
 }
 
-export async function getClaimAllPools(chainId: ChainId, endBlock: number, swapperAddress: string) {
+export async function getClaimAllPools(
+    chainId: ChainId,
+    endBlock: number,
+    swapperAddress: string,
+    connection: Web3Helper.Web3Connection<NetworkPluginID.PLUGIN_EVM>,
+) {
     const { EXPLORER_API, API_KEYS = [] } = getExplorerConstants(chainId)
     const { ITO2_CONTRACT_ADDRESS, ITO2_CONTRACT_CREATION_BLOCK_HEIGHT: startBlock } = getITOConstants(chainId)
 
-    if (!EXPLORER_API || !ITO2_CONTRACT_ADDRESS || !startBlock) return []
+    if (!EXPLORER_API || !ITO2_CONTRACT_ADDRESS || !startBlock || !connection) return []
     // #region
     // 1. Filter out `swap` transactions,
     // 2. Retrieve payload major data from its decoded input param.
@@ -231,7 +232,13 @@ export async function getClaimAllPools(chainId: ChainId, endBlock: number, swapp
     const swapRawFilteredData = (
         await Promise.allSettled(
             swapRawData.map(async (value) => {
-                const availability = await checkAvailability(value.pid, swapperAddress, ITO2_CONTRACT_ADDRESS, chainId)
+                const availability = await checkAvailability(
+                    value.pid,
+                    swapperAddress,
+                    ITO2_CONTRACT_ADDRESS,
+                    chainId,
+                    connection,
+                )
                 const unlockTime = new Date(Number(availability.unlock_time) * 1000)
                 if (isEqual(unlockTime, new Date(ITO_CONTRACT_BASE_TIMESTAMP)) || availability.claimed) return null
 
@@ -251,7 +258,7 @@ export async function getClaimAllPools(chainId: ChainId, endBlock: number, swapp
     const swappedTokenUnmergedList = (
         await Promise.allSettled(
             swapRawFilteredData.map(async (value) => {
-                const result = await getTransactionReceipt(value.txHash, { chainId })
+                const result = await connection.getTransactionReceipt(value.txHash, { chainId })
                 if (!result) return null
                 const log = result.logs.find((log) => isSameAddress(log.address, ITO2_CONTRACT_ADDRESS))
                 if (!log) return null
@@ -266,7 +273,13 @@ export async function getClaimAllPools(chainId: ChainId, endBlock: number, swapp
                     amount: new BigNumber(Number(eventParams.to_value)),
                     isClaimable: value.isClaimable,
                     unlockTime: value.unlockTime,
-                    token: { address: eventParams.to_address, type: EthereumTokenType.ERC20 } as FungibleTokenDetailed,
+                    token: {
+                        id: eventParams.to_address,
+                        address: eventParams.to_address,
+                        type: TokenType.Fungible,
+                        schema: SchemaType.ERC20,
+                        chainId,
+                    } as FungibleToken<ChainId, SchemaType.ERC20>,
                 }
             }),
         )
diff --git a/packages/mask/src/plugins/ITO/Worker/apis/checkAvailability.ts b/packages/mask/src/plugins/ITO/SNSAdaptor/utils/checkAvailability.ts
similarity index 80%
rename from packages/mask/src/plugins/ITO/Worker/apis/checkAvailability.ts
rename to packages/mask/src/plugins/ITO/SNSAdaptor/utils/checkAvailability.ts
index ebc4b89e617d..c5672968ce77 100644
--- a/packages/mask/src/plugins/ITO/Worker/apis/checkAvailability.ts
+++ b/packages/mask/src/plugins/ITO/SNSAdaptor/utils/checkAvailability.ts
@@ -3,15 +3,23 @@ import ITO2_ABI from '@masknet/web3-contracts/abis/ITO2.json'
 import type { ChainId } from '@masknet/web3-shared-evm'
 import { Interface } from '@ethersproject/abi'
 import type { Availability } from '../../types'
-import Services from '../../../../extension/service'
+import type { Web3Helper } from '@masknet/plugin-infra/src/web3-helpers'
+import type { NetworkPluginID } from '@masknet/web3-shared-base'
 
 const interFaceV1 = new Interface(ITO_ABI)
 const interFaceV2 = new Interface(ITO2_ABI)
 
 // ITO Contract readonly method, read it no matter on whatever chains you are.
-export async function checkAvailability(pid: string, from: string, to: string, chainId: ChainId, isV1 = false) {
+export async function checkAvailability(
+    pid: string,
+    from: string,
+    to: string,
+    chainId: ChainId,
+    connection: Web3Helper.Web3Connection<NetworkPluginID.PLUGIN_EVM>,
+    isV1 = false,
+) {
     const callData = (isV1 ? interFaceV1 : interFaceV2).encodeFunctionData('check_availability', [pid])
-    const data = await Services.Ethereum.call(
+    const data = await connection.callTransaction(
         {
             to,
             from,
diff --git a/packages/mask/src/plugins/ITO/Worker/apis/spaceStationGalaxy.ts b/packages/mask/src/plugins/ITO/Worker/apis/spaceStationGalaxy.ts
deleted file mode 100644
index 9380fb990c71..000000000000
--- a/packages/mask/src/plugins/ITO/Worker/apis/spaceStationGalaxy.ts
+++ /dev/null
@@ -1,185 +0,0 @@
-import { ChainId, getSpaceStationGalaxyConstants } from '@masknet/web3-shared-evm'
-import stringify from 'json-stable-stringify'
-import { EthereumAddress } from 'wallet.ts'
-import type { ClaimableCount, CampaignInfo, ClaimParams } from '../../types'
-
-export const CAMPAIGN_ID = 160
-const WHITE_LIST_INFO_FIELD = `
-    maxCount
-    usedCount
-`
-
-async function fetchFromSubgraph<T>(query: string) {
-    const subgraphURL = getSpaceStationGalaxyConstants(ChainId.Matic)?.SUBGRAPH_URL
-    if (!subgraphURL) return null
-    const response = await fetch(subgraphURL, {
-        method: 'POST',
-        body: stringify({ query }),
-        headers: {
-            'content-type': 'application/json',
-        },
-    })
-
-    const { data } = (await response.json()) as {
-        data: T
-    }
-    return data
-}
-
-export async function getClaimableTokenCount(address: string, id: number): Promise<ClaimableCount> {
-    const data = await fetchFromSubgraph<{
-        campaign: {
-            whitelistInfo: ClaimableCount
-        }
-    }>(`
-    {
-        campaign(id: ${id}) {
-            whitelistInfo(address: "${address.toLowerCase()}") {
-                ${WHITE_LIST_INFO_FIELD}
-            }
-        }
-    }
-    `)
-    if (!data || !EthereumAddress.isValid(address)) return { maxCount: -1, usedCount: 0 }
-
-    const {
-        campaign: { whitelistInfo },
-    } = data
-
-    return whitelistInfo
-}
-
-export async function getCampaignInfo(id: number): Promise<CampaignInfo> {
-    const data = await fetchFromSubgraph<{
-        campaign: {
-            name: string
-            description: string
-            chain: string
-            endTime: number
-            startTime: number
-            gamification: {
-                nfts: Array<{ nft: { image: string } }>
-            }
-        }
-    }>(`
-    {
-        campaign(id: ${id}) {
-            chain
-            name
-            endTime
-            startTime
-            description
-            gamification {
-                nfts {
-                  nft {
-                    image
-                  }
-                }
-              }
-        }
-    }
-    `)
-
-    if (!data) throw new Error('Failed to load payload.')
-
-    const {
-        campaign: {
-            chain,
-            name,
-            description,
-            endTime,
-            startTime,
-            gamification: { nfts },
-        },
-    } = data
-
-    return {
-        id,
-        chain,
-        name,
-        description,
-        endTime,
-        startTime,
-        nfts: nfts.map((v) => v.nft),
-    }
-}
-
-// (Matic) Mask Social Defi Alliance
-// https://bulletlabs.notion.site/f798356212604dc7b3c6f8fbf066de21
-export async function getAccountClaimSignature(
-    userSignature: string,
-    account: string,
-    chain: string,
-    id: number,
-): Promise<ClaimParams> {
-    const data = await fetchFromSubgraph<{
-        prepareParticipate: {
-            allow: boolean
-            signature: string
-            mintFuncInfo: {
-                verifyIDs: number[]
-                nftCoreAddress: string
-                powahs: number[]
-            }
-        }
-    }>(`
-      mutation {
-        prepareParticipate(input: {
-            signature:"${userSignature}",
-            campaignID: ${id},
-            address: "${account}",
-            mintCount: 1,
-            chain: ${chain}
-        }){
-            allow
-            signature
-            mintFuncInfo {
-                nftCoreAddress
-                verifyIDs
-                powahs
-            }
-        }
-      }
-    `)
-
-    if (!data?.prepareParticipate.mintFuncInfo)
-        return { allow: false, signature: '', verifyIDs: [], nftCoreAddress: '', powahs: [] }
-
-    const {
-        prepareParticipate: {
-            allow,
-            signature,
-            mintFuncInfo: { verifyIDs, nftCoreAddress, powahs },
-        },
-    } = data
-
-    return { allow, signature, verifyIDs, nftCoreAddress, powahs }
-}
-
-export async function mutationParticipate(
-    userSignature: string,
-    account: string,
-    chain: string,
-    id: number,
-    txHash: string,
-    verifyIDs: number[],
-) {
-    const data = await fetchFromSubgraph<{ participate: { participated: boolean } }>(`
-    mutation {
-        participate(input: {
-            signature:"${userSignature}",
-            campaignID: ${id},
-            address: "${account}",
-            tx: "${txHash}",
-            verifyIDs: ${verifyIDs},
-            chain: ${chain}
-        }){
-            participated
-        }
-    }
-    `)
-
-    if (!data) throw new Error('Failed to load payload.')
-
-    return data.participate.participated
-}
diff --git a/packages/mask/src/plugins/ITO/Worker/apis/subgraph.ts b/packages/mask/src/plugins/ITO/Worker/apis/subgraph.ts
index 9cba129fa129..b33bd5b85d09 100644
--- a/packages/mask/src/plugins/ITO/Worker/apis/subgraph.ts
+++ b/packages/mask/src/plugins/ITO/Worker/apis/subgraph.ts
@@ -1,7 +1,6 @@
 import { ChainId, getITOConstants } from '@masknet/web3-shared-evm'
 import stringify from 'json-stable-stringify'
 import { first, omit } from 'lodash-unified'
-import { currentChainIdSettings } from '../../../Wallet/settings'
 import { payloadIntoMask } from '../../SNSAdaptor/helpers'
 import type { JSON_PayloadOutMask, PoolFromNetwork } from '../../types'
 
@@ -45,8 +44,8 @@ const POOL_FIELDS = `
     }
 `
 
-async function fetchFromMarketSubgraph<T>(query: string, chainId?: ChainId) {
-    const subgraphURL = getITOConstants(chainId ? chainId : currentChainIdSettings.value).SUBGRAPH_URL
+async function fetchFromMarketSubgraph<T>(chainId: ChainId, query: string) {
+    const subgraphURL = getITOConstants(chainId).SUBGRAPH_URL
     if (!subgraphURL) return null
     try {
         const response = await fetch(subgraphURL, {
@@ -66,7 +65,7 @@ async function fetchFromMarketSubgraph<T>(query: string, chainId?: ChainId) {
     }
 }
 
-export async function getTradeInfo(pid: string, trader: string) {
+export async function getTradeInfo(chainId: ChainId, pid: string, trader: string) {
     const data = await fetchFromMarketSubgraph<{
         buyInfos: Array<{
             buyer: {
@@ -94,7 +93,9 @@ export async function getTradeInfo(pid: string, trader: string) {
             token: JSON_PayloadOutMask['token']
             amount: string
         }>
-    }>(`
+    }>(
+        chainId,
+        `
     {
         buyInfos (where: { pool: "${pid.toLowerCase()}", buyer: "${trader.toLowerCase()}" }) {
             buyer {
@@ -120,7 +121,8 @@ export async function getTradeInfo(pid: string, trader: string) {
             amount
         }
     }
-    `)
+    `,
+    )
 
     if (!data?.buyInfos) throw new Error('Failed to load trade info.')
     return {
@@ -130,22 +132,25 @@ export async function getTradeInfo(pid: string, trader: string) {
     }
 }
 
-export async function getPool(pid: string) {
+export async function getPool(chainId: ChainId, pid: string) {
     const data = await fetchFromMarketSubgraph<{
         pool: JSON_PayloadOutMask | null
-    }>(`
+    }>(
+        chainId,
+        `
     {
         pool (id: "${pid.toLowerCase()}") {
             ${POOL_FIELDS}
         }
     }
-    `)
+    `,
+    )
 
     if (!data?.pool) throw new Error('Failed to load payload.')
     return payloadIntoMask(data.pool)
 }
 
-export async function getAllPoolsAsSeller(address: string, page: number, chainId: ChainId) {
+export async function getAllPoolsAsSeller(chainId: ChainId, address: string, page: number) {
     const data = await fetchFromMarketSubgraph<{
         sellInfos: Array<{
             pool: JSON_PayloadOutMask & {
@@ -154,6 +159,7 @@ export async function getAllPoolsAsSeller(address: string, page: number, chainId
             }
         }>
     }>(
+        chainId,
         `
     {
         sellInfos ( orderBy: timestamp, orderDirection: desc, first: 50, skip: ${
@@ -167,7 +173,6 @@ export async function getAllPoolsAsSeller(address: string, page: number, chainId
         }
     }
     `,
-        chainId,
     )
     if (!data?.sellInfos) return []
 
@@ -181,7 +186,7 @@ export async function getAllPoolsAsSeller(address: string, page: number, chainId
     })
 }
 
-export async function getAllPoolsAsBuyer(address: string, chainId: ChainId) {
+export async function getAllPoolsAsBuyer(chainId: ChainId, address: string) {
     const data = await fetchFromMarketSubgraph<{
         buyInfos: Array<{
             pool: JSON_PayloadOutMask & {
@@ -190,6 +195,7 @@ export async function getAllPoolsAsBuyer(address: string, chainId: ChainId) {
             }
         }>
     }>(
+        chainId,
         `
     {
         buyInfos (where: { buyer: "${address.toLowerCase()}" }) {
@@ -201,7 +207,6 @@ export async function getAllPoolsAsBuyer(address: string, chainId: ChainId) {
         }
     }
     `,
-        chainId,
     )
     if (!data?.buyInfos) return []
     return data.buyInfos.map((x) => {
diff --git a/packages/mask/src/plugins/ITO/Worker/services.ts b/packages/mask/src/plugins/ITO/Worker/services.ts
index 23e035654f35..b60a938a6f9d 100644
--- a/packages/mask/src/plugins/ITO/Worker/services.ts
+++ b/packages/mask/src/plugins/ITO/Worker/services.ts
@@ -1,55 +1,27 @@
-import type { JSON_PayloadInMask, PoolRecord } from '../types'
+import type { JSON_PayloadInMask, PoolRecord, PoolFromNetwork } from '../types'
 import * as subgraph from './apis/subgraph'
-import * as chain from './apis/chain'
 import * as database from './database'
-import { getChainDetailed, ChainId, getITOConstants } from '@masknet/web3-shared-evm'
+import { ChainId, chainResolver } from '@masknet/web3-shared-evm'
 
-export async function getTradeInfo(pid: string, trader: string) {
-    const tradeInfo = await subgraph.getTradeInfo(pid, trader)
+export async function getTradeInfo(pid: string, trader: string, chainId: ChainId) {
+    const tradeInfo = await subgraph.getTradeInfo(chainId, pid, trader)
     return tradeInfo
 }
 
-export async function getPool(pid: string) {
-    const poolFromChain = await subgraph.getPool(pid)
+export async function getPool(pid: string, chainId: ChainId) {
+    const poolFromChain = await subgraph.getPool(chainId, pid)
     const poolFromDB = await database.getPoolFromDB(pid)
     if (poolFromDB?.payload.password) poolFromChain.password = poolFromDB.payload.password
     return poolFromChain
 }
 
-export async function getAllPoolsAsSeller(address: string, endBlock: number, chainId: ChainId) {
-    const { ITO2_CONTRACT_CREATION_BLOCK_HEIGHT } = getITOConstants(chainId)
-
-    // #region Get data from chain.
-    const poolsFromChain = await chain.getAllPoolsAsSeller(
-        chainId,
-        ITO2_CONTRACT_CREATION_BLOCK_HEIGHT,
-        endBlock,
-        address,
-    )
-    // #endregion
-
-    // #region Inject password from database
-    const poolsFromDB = await database.getAllPoolsAsSeller(poolsFromChain.map((x) => x.pool.pid))
-    return poolsFromChain
-        .map((x) => {
-            const pool = poolsFromDB.find((y) => y.payload.pid === x.pool.pid)
-            if (!pool) return x
-            return {
-                ...x,
-                pool: {
-                    ...x.pool,
-                    password: pool.payload.password,
-                },
-            }
-        })
-        .filter((x) => x.pool.chain_id === chainId)
-    // #endregion
+export async function getAllPoolsAsSellerFromDatabase(poolsFromChain: PoolFromNetwork[]) {
+    return database.getAllPoolsAsSeller(poolsFromChain.map((x) => x.pool.pid))
 }
 
 export async function getAllPoolsAsBuyer(address: string, chainId: ChainId) {
-    const chainDetailed = getChainDetailed(chainId)
-    if (!chainDetailed) return []
-    const pools = await subgraph.getAllPoolsAsBuyer(address, chainId)
+    if (!chainResolver.isValid(chainId)) return []
+    const pools = await subgraph.getAllPoolsAsBuyer(chainId, address)
     return pools.filter((x) => x.pool.chain_id === chainId)
 }
 
@@ -69,7 +41,3 @@ export async function discoverPool(from: string, payload: JSON_PayloadInMask) {
     }
     await database.addPoolIntoDB(record)
 }
-
-export async function getClaimAllPools(chainId: ChainId, endBlock: number, swapperAddress: string) {
-    return chain.getClaimAllPools(chainId, endBlock, swapperAddress)
-}
diff --git a/packages/mask/src/plugins/ITO/base.ts b/packages/mask/src/plugins/ITO/base.ts
index 2fc3c7dd2742..eddc066a64c6 100644
--- a/packages/mask/src/plugins/ITO/base.ts
+++ b/packages/mask/src/plugins/ITO/base.ts
@@ -1,6 +1,4 @@
 import type { Plugin } from '@masknet/plugin-infra'
-import { NetworkPluginID } from '@masknet/plugin-infra/web3'
-import { ChainId } from '@masknet/web3-shared-evm'
 import { ITO_MetaKey_1, ITO_MetaKey_2, ITO_PluginID } from './constants'
 
 export const base: Plugin.Shared.Definition = {
@@ -17,23 +15,6 @@ export const base: Plugin.Shared.Definition = {
             networks: {},
         },
         target: 'stable',
-        web3: {
-            [NetworkPluginID.PLUGIN_EVM]: {
-                supportedChainIds: [
-                    ChainId.Mainnet,
-                    ChainId.BSC,
-                    ChainId.Matic,
-                    ChainId.Arbitrum,
-                    ChainId.xDai,
-                    ChainId.Aurora,
-                    ChainId.Avalanche,
-                    ChainId.Fantom,
-                    ChainId.Harmony,
-                ],
-            },
-            [NetworkPluginID.PLUGIN_FLOW]: { supportedChainIds: [] },
-            [NetworkPluginID.PLUGIN_SOLANA]: { supportedChainIds: [] },
-        },
     },
     contribution: { metadataKeys: new Set([ITO_MetaKey_1, ITO_MetaKey_2]) },
 }
diff --git a/packages/mask/src/plugins/ITO/types.ts b/packages/mask/src/plugins/ITO/types.ts
index 7e7649c54dae..7afd0385674d 100644
--- a/packages/mask/src/plugins/ITO/types.ts
+++ b/packages/mask/src/plugins/ITO/types.ts
@@ -1,4 +1,5 @@
-import type { ChainId, FungibleTokenDetailed, FungibleTokenOutMask } from '@masknet/web3-shared-evm'
+import type { ChainId, SchemaType } from '@masknet/web3-shared-evm'
+import type { FungibleToken } from '@masknet/web3-shared-base'
 import type BigNumber from 'bignumber.js'
 
 export interface JSON_PayloadInMask {
@@ -19,9 +20,9 @@ export interface JSON_PayloadInMask {
     unlock_time?: number
     qualification_address: string
     creation_time: number
-    token: FungibleTokenDetailed
+    token: FungibleToken<ChainId, SchemaType.Native | SchemaType.ERC20>
     exchange_amounts: string[]
-    exchange_tokens: FungibleTokenDetailed[]
+    exchange_tokens: Array<FungibleToken<ChainId, SchemaType.Native | SchemaType.ERC20>>
     regions: string
     block_number?: number
 }
@@ -39,17 +40,21 @@ export interface PoolFromNetwork {
 
 export interface ClaimablePool {
     pid: string
-    token: FungibleTokenDetailed
+    token: FungibleToken<ChainId, SchemaType.Native | SchemaType.ERC20>
 }
 
 export interface SwappedTokenType {
     pids: string[]
     amount: BigNumber
-    token: FungibleTokenDetailed
+    token: FungibleToken<ChainId, SchemaType.Native | SchemaType.ERC20>
     isClaimable: boolean
     unlockTime: Date
 }
 
+export type FungibleTokenOutMask = Omit<FungibleToken<ChainId, SchemaType.Native | SchemaType.ERC20>, 'chainId'> & {
+    chain_id: ChainId
+}
+
 export interface JSON_PayloadOutMask extends Omit<JSON_PayloadInMask, 'token' | 'exchange_tokens'> {
     token: FungibleTokenOutMask
     exchange_tokens: FungibleTokenOutMask[]
diff --git a/packages/mask/src/plugins/MaskBox/SNSAdaptor/components/DrawDialog.tsx b/packages/mask/src/plugins/MaskBox/SNSAdaptor/components/DrawDialog.tsx
index 3f9dc5c8773c..5e7ce5e2d2f3 100644
--- a/packages/mask/src/plugins/MaskBox/SNSAdaptor/components/DrawDialog.tsx
+++ b/packages/mask/src/plugins/MaskBox/SNSAdaptor/components/DrawDialog.tsx
@@ -2,25 +2,18 @@ import { useCallback } from 'react'
 import { useContainer } from 'unstated-next'
 import { makeStyles } from '@masknet/theme'
 import { Add, Remove } from '@mui/icons-material'
-import { useProviderDescriptor } from '@masknet/plugin-infra/web3'
+import { useAccount, useChainId, useProviderDescriptor } from '@masknet/plugin-infra/web3'
 import { FormattedAddress, FormattedBalance, ImageIcon, InjectedDialog } from '@masknet/shared'
 import { Box, Button, DialogContent, TextField, Typography } from '@mui/material'
-import {
-    formatBalance,
-    formatEthereumAddress,
-    useAccount,
-    useChainId,
-    useMaskBoxConstants,
-    EthereumTokenType,
-} from '@masknet/web3-shared-evm'
+import { formatEthereumAddress, SchemaType, useMaskBoxConstants } from '@masknet/web3-shared-evm'
+import { formatBalance, multipliedBy, NetworkPluginID } from '@masknet/web3-shared-base'
 import ActionButton from '../../../../extension/options-page/DashboardComponents/ActionButton'
 import { EthereumERC20TokenApprovedBoundary } from '../../../../web3/UI/EthereumERC20TokenApprovedBoundary'
-import { EthereumWalletConnectedBoundary } from '../../../../web3/UI/EthereumWalletConnectedBoundary'
+import { WalletConnectedBoundary } from '../../../../web3/UI/WalletConnectedBoundary'
 import type { BoxInfo } from '../../type'
 import { GasSettingBar } from '../../../Wallet/SNSAdaptor/GasSettingDialog/GasSettingBar'
 import { TokenPrice } from '../../../../components/shared/TokenPrice'
 import { Context } from '../../hooks/useContext'
-import { multipliedBy } from '@masknet/web3-shared-base'
 
 const useStyles = makeStyles()((theme) => ({
     main: {
@@ -111,8 +104,8 @@ export function DrawDialog(props: DrawDialogProps) {
     } = useContainer(Context)
 
     const providerDescriptor = useProviderDescriptor()
-    const account = useAccount()
-    const chainId = useChainId()
+    const account = useAccount(NetworkPluginID.PLUGIN_EVM)
+    const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
 
     const onCount = useCallback(
         (step: number) => {
@@ -262,13 +255,11 @@ export function DrawDialog(props: DrawDialogProps) {
                     </Box>
                 </Box>
 
-                <EthereumWalletConnectedBoundary>
+                <WalletConnectedBoundary>
                     <EthereumERC20TokenApprovedBoundary
                         amount={multipliedBy(paymentTokenPrice, paymentCount).toFixed()}
                         spender={MASK_BOX_CONTRACT_ADDRESS}
-                        token={
-                            paymentTokenDetailed?.type === EthereumTokenType.ERC20 ? paymentTokenDetailed : undefined
-                        }
+                        token={paymentTokenDetailed?.schema === SchemaType.ERC20 ? paymentTokenDetailed : undefined}
                         ActionButtonProps={{ size: 'medium', sx: { marginTop: 2 } }}>
                         <ActionButton
                             size="medium"
@@ -280,7 +271,7 @@ export function DrawDialog(props: DrawDialogProps) {
                             {isBalanceInsufficient ? 'Insufficient balance' : drawing ? 'Drawing' : 'Draw'}
                         </ActionButton>
                     </EthereumERC20TokenApprovedBoundary>
-                </EthereumWalletConnectedBoundary>
+                </WalletConnectedBoundary>
             </DialogContent>
         </InjectedDialog>
     )
diff --git a/packages/mask/src/plugins/MaskBox/SNSAdaptor/components/DrawResultDialog.tsx b/packages/mask/src/plugins/MaskBox/SNSAdaptor/components/DrawResultDialog.tsx
index e371a827b775..61a800829945 100644
--- a/packages/mask/src/plugins/MaskBox/SNSAdaptor/components/DrawResultDialog.tsx
+++ b/packages/mask/src/plugins/MaskBox/SNSAdaptor/components/DrawResultDialog.tsx
@@ -2,7 +2,6 @@ import { difference } from 'lodash-unified'
 import { useContainer } from 'unstated-next'
 import { makeStyles } from '@masknet/theme'
 import { Box, DialogContent } from '@mui/material'
-import type { ERC721ContractDetailed } from '@masknet/web3-shared-evm'
 import type { BoxInfo } from '../../type'
 import { TokenCard } from './TokenCard'
 import { InjectedDialog } from '@masknet/shared'
@@ -10,6 +9,8 @@ import ActionButton from '../../../../extension/options-page/DashboardComponents
 import { activatedSocialNetworkUI } from '../../../../social-network'
 import { usePostLink } from '../../../../components/DataSource/usePostInfo'
 import { Context } from '../../hooks/useContext'
+import type { NonFungibleTokenContract } from '@masknet/web3-shared-base'
+import type { ChainId, SchemaType } from '@masknet/web3-shared-evm'
 import { SharedIcon } from '@masknet/icons'
 
 const useStyles = makeStyles()((theme) => ({
@@ -31,7 +32,7 @@ export interface DrawResultDialogProps {
     open: boolean
     onClose: () => void
     boxInfo: BoxInfo
-    contractDetailed?: ERC721ContractDetailed
+    contractDetailed?: NonFungibleTokenContract<ChainId, SchemaType>
 }
 
 export function DrawResultDialog(props: DrawResultDialogProps) {
diff --git a/packages/mask/src/plugins/MaskBox/SNSAdaptor/components/PreviewCard.tsx b/packages/mask/src/plugins/MaskBox/SNSAdaptor/components/PreviewCard.tsx
index bacbc617e7b8..33449abcb449 100644
--- a/packages/mask/src/plugins/MaskBox/SNSAdaptor/components/PreviewCard.tsx
+++ b/packages/mask/src/plugins/MaskBox/SNSAdaptor/components/PreviewCard.tsx
@@ -1,18 +1,21 @@
-import { makeStyles } from '@masknet/theme'
-import { formatBalance, useChainId, useTransactionCallback } from '@masknet/web3-shared-evm'
-import { Box, Button, CircularProgress, Typography, useTheme } from '@mui/material'
 import { useCallback, useMemo, useState } from 'react'
 import { useContainer } from 'unstated-next'
-import AbstractTab, { AbstractTabProps } from '../../../../components/shared/AbstractTab'
+import { makeStyles } from '@masknet/theme'
+import { Box, Button, CircularProgress, Typography, useTheme } from '@mui/material'
+import { WalletConnectedBoundary } from '../../../../web3/UI/WalletConnectedBoundary'
 import ActionButton from '../../../../extension/options-page/DashboardComponents/ActionButton'
-import { EthereumChainBoundary } from '../../../../web3/UI/EthereumChainBoundary'
-import { EthereumWalletConnectedBoundary } from '../../../../web3/UI/EthereumWalletConnectedBoundary'
 import { Context } from '../../hooks/useContext'
 import { BoxState, CardTab } from '../../type'
 import { ArticlesTab } from './ArticlesTab'
 import { DetailsTab } from './DetailsTab'
 import { DrawDialog } from './DrawDialog'
 import { DrawResultDialog } from './DrawResultDialog'
+import { useTransactionCallback } from '@masknet/plugin-infra/web3-evm'
+import { ChainBoundary } from '../../../../web3/UI/ChainBoundary'
+import { useChainId } from '@masknet/plugin-infra/web3'
+import { formatBalance, NetworkPluginID } from '@masknet/web3-shared-base'
+import type { AbstractTabProps } from '../../../../components/shared/AbstractTab'
+import AbstractTab from '../../../../components/shared/AbstractTab'
 
 const useTabsStyles = makeStyles()((theme) => ({
     tab: {
@@ -57,7 +60,7 @@ export function PreviewCard(props: PreviewCardProps) {
     const state = useState(CardTab.Articles)
     const [openDrawDialog, setOpenDrawDialog] = useState(false)
     const [openDrawResultDialog, setOpenDrawResultDialog] = useState(false)
-    const chainId = useChainId()
+    const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
     const theme = useTheme()
 
     const {
@@ -213,8 +216,8 @@ export function PreviewCard(props: PreviewCardProps) {
                 />
             </Box>
             <Box style={{ padding: 12 }}>
-                <EthereumChainBoundary chainId={chainId} renderInTimeline>
-                    <EthereumWalletConnectedBoundary
+                <ChainBoundary expectedPluginID={NetworkPluginID.PLUGIN_EVM} expectedChainId={chainId} renderInTimeline>
+                    <WalletConnectedBoundary
                         ActionButtonProps={{ size: 'medium' }}
                         classes={{ button: tabClasses.button }}
                         renderInTimeline>
@@ -245,8 +248,8 @@ export function PreviewCard(props: PreviewCardProps) {
                                 )
                             })()}
                         </ActionButton>
-                    </EthereumWalletConnectedBoundary>
-                </EthereumChainBoundary>
+                    </WalletConnectedBoundary>
+                </ChainBoundary>
             </Box>
         </>
     )
diff --git a/packages/mask/src/plugins/MaskBox/SNSAdaptor/components/TokenCard.tsx b/packages/mask/src/plugins/MaskBox/SNSAdaptor/components/TokenCard.tsx
index c4a83dd3bbf1..fbd6b1c037de 100644
--- a/packages/mask/src/plugins/MaskBox/SNSAdaptor/components/TokenCard.tsx
+++ b/packages/mask/src/plugins/MaskBox/SNSAdaptor/components/TokenCard.tsx
@@ -1,6 +1,8 @@
+import { useNonFungibleToken } from '@masknet/plugin-infra/web3'
 import { makeStyles } from '@masknet/theme'
-import { ERC721ContractDetailed, NonFungibleAssetProvider, useERC721TokenDetailed } from '@masknet/web3-shared-evm'
-import { Typography, CircularProgress } from '@mui/material'
+import { NetworkPluginID, NonFungibleTokenContract } from '@masknet/web3-shared-base'
+import { ChainId, NonFungibleAssetProvider, SchemaType } from '@masknet/web3-shared-evm'
+import { CircularProgress, Typography } from '@mui/material'
 import { memo } from 'react'
 import { CollectibleCard } from '../../../../extension/options-page/DashboardComponents/CollectibleList/CollectibleCard'
 
@@ -19,14 +21,14 @@ const useStyles = makeStyles()((theme) => ({
 
 export interface TokenCardProps {
     tokenId: string
-    contractDetailed: ERC721ContractDetailed
+    contractDetailed: NonFungibleTokenContract<ChainId, SchemaType>
     renderOrder: number
 }
 
 export const TokenCard = memo<TokenCardProps>((props: TokenCardProps) => {
     const { contractDetailed, tokenId, renderOrder } = props
     const { classes } = useStyles()
-    const { tokenDetailed } = useERC721TokenDetailed(contractDetailed, tokenId)
+    const { value: tokenDetailed } = useNonFungibleToken(NetworkPluginID.PLUGIN_EVM, contractDetailed.address, tokenId)
 
     return tokenDetailed ? (
         <>
@@ -38,7 +40,7 @@ export const TokenCard = memo<TokenCardProps>((props: TokenCardProps) => {
             />
             <div className={classes.title}>
                 <Typography className={classes.name} color="textSecondary" variant="body2">
-                    {tokenDetailed.info.name ?? tokenId}
+                    {tokenDetailed.contract?.name ?? tokenId}
                 </Typography>
             </div>
         </>
diff --git a/packages/mask/src/plugins/MaskBox/SNSAdaptor/index.tsx b/packages/mask/src/plugins/MaskBox/SNSAdaptor/index.tsx
index 51fec2cdb271..759733af6ee5 100644
--- a/packages/mask/src/plugins/MaskBox/SNSAdaptor/index.tsx
+++ b/packages/mask/src/plugins/MaskBox/SNSAdaptor/index.tsx
@@ -25,7 +25,8 @@ const sns: Plugin.SNSAdaptor.Definition = {
         return <Renderer url={link} />
     },
     PostInspector: function Component() {
-        const link = usePostInfoDetails.mentionedLinks().find(isMaskBox)
+        const links = usePostInfoDetails.mentionedLinks()
+        const link = links.find(isMaskBox)
         if (!link) return null
         return <Renderer url={link} />
     },
diff --git a/packages/mask/src/plugins/MaskBox/hooks/useContext.ts b/packages/mask/src/plugins/MaskBox/hooks/useContext.ts
index b1eb10182c59..69ba6b3d6b26 100644
--- a/packages/mask/src/plugins/MaskBox/hooks/useContext.ts
+++ b/packages/mask/src/plugins/MaskBox/hooks/useContext.ts
@@ -8,25 +8,7 @@ import { omit, clamp, first, uniq } from 'lodash-unified'
 import BigNumber from 'bignumber.js'
 import { createContainer } from 'unstated-next'
 import { unreachable } from '@dimensiondev/kit'
-import {
-    ChainId,
-    isSameAddress,
-    useERC20TokenBalance,
-    useNativeTokenBalance,
-    useTokenConstants,
-    useFungibleTokensDetailed,
-    EthereumTokenType,
-    useChainId,
-    useAccount,
-    useERC20TokenAllowance,
-    useERC20TokenDetailed,
-    useERC721ContractDetailed,
-    useMaskBoxConstants,
-    ZERO_ADDRESS,
-    isZeroAddress,
-    isNativeTokenAddress,
-    formatBalance,
-} from '@masknet/web3-shared-evm'
+import { ChainId, useTokenConstants, useMaskBoxConstants, ZERO_ADDRESS, isZeroAddress } from '@masknet/web3-shared-evm'
 import type { NonPayableTx } from '@masknet/web3-contracts/types/types'
 import { BoxInfo, BoxState } from '../type'
 import { useMaskBoxInfo } from './useMaskBoxInfo'
@@ -40,24 +22,34 @@ import { useOpenBoxTransaction } from './useOpenBoxTransaction'
 import { useMaskBoxMetadata } from './useMaskBoxMetadata'
 import { useQualification } from './useQualification'
 import {
+    formatBalance,
     isGreaterThan,
     isGreaterThanOrEqualTo,
     isLessThanOrEqualTo,
+    isSameAddress,
     multipliedBy,
-    useBeat,
+    NetworkPluginID,
 } from '@masknet/web3-shared-base'
+import {
+    useAccount,
+    useBalance,
+    useFungibleToken,
+    useFungibleTokenBalance,
+    useFungibleTokens,
+    useNonFungibleTokenContract,
+} from '@masknet/plugin-infra/web3'
+import { EMPTY_LIST } from '@masknet/shared-base'
+import { useERC20TokenAllowance } from '@masknet/plugin-infra/web3-evm'
 
 function useContext(initialState?: { boxId: string; hashRoot: string }) {
     const now = new Date()
-    const beat = useBeat()
-    const account = useAccount()
-    const chainId = useChainId()
+    const account = useAccount(NetworkPluginID.PLUGIN_EVM)
     const { NATIVE_TOKEN_ADDRESS } = useTokenConstants(ChainId.Mainnet)
     const { MASK_BOX_CONTRACT_ADDRESS } = useMaskBoxConstants()
     const coder = ABICoder as unknown as ABICoder.AbiCoder
 
     const [boxId, setBoxId] = useState(initialState?.boxId ?? '')
-    const [rootHash, setRootHash] = useState(initialState?.hashRoot || '')
+    const rootHash = initialState?.hashRoot || ''
     const [paymentTokenAddress, setPaymentTokenAddress] = useState('')
 
     // #region the box info
@@ -76,17 +68,12 @@ function useContext(initialState?: { boxId: string; hashRoot: string }) {
     } = useMaskBoxStatus(boxId)
     const { value: maskBoxCreationSuccessEvent = null, retry: retryMaskBoxCreationSuccessEvent } =
         useMaskBoxCreationSuccessEvent(maskBoxInfo?.creator ?? '', maskBoxInfo?.nft_address ?? '', boxId)
-    const { value: paymentTokens = [] } = useFungibleTokensDetailed(
-        maskBoxStatus?.payment?.map(([address]) => {
-            return {
-                type: isNativeTokenAddress(address) ? EthereumTokenType.Native : EthereumTokenType.ERC20,
-                address,
-            }
-        }) ?? [],
-        chainId,
+    const { value: paymentTokens = EMPTY_LIST } = useFungibleTokens(
+        NetworkPluginID.PLUGIN_EVM,
+        maskBoxStatus?.payment?.map(([address]) => address) ?? [],
     )
-    const { value: allTokens = [], retry: retryMaskBoxTokensForSale } = useMaskBoxTokensForSale(boxId)
-    const { value: purchasedTokens = [], retry: retryMaskBoxPurchasedTokens } = useMaskBoxPurchasedTokens(
+    const { value: allTokens = EMPTY_LIST, retry: retryMaskBoxTokensForSale } = useMaskBoxTokensForSale(boxId)
+    const { value: purchasedTokens = EMPTY_LIST, retry: retryMaskBoxPurchasedTokens } = useMaskBoxPurchasedTokens(
         boxId,
         account,
     )
@@ -137,14 +124,7 @@ function useContext(initialState?: { boxId: string; hashRoot: string }) {
             holderMinTokenAmount: maskBoxInfo.holder_min_token_amount,
         }
         return info
-    }, [
-        allTokens.join(),
-        purchasedTokens.join(),
-        paymentTokens?.map((x) => x.address).join(),
-        maskBoxInfo,
-        maskBoxStatus,
-        maskBoxCreationSuccessEvent,
-    ])
+    }, [allTokens, purchasedTokens, paymentTokens, maskBoxInfo, maskBoxStatus, maskBoxCreationSuccessEvent])
     // #endregion
 
     // #region qualification
@@ -162,8 +142,11 @@ function useContext(initialState?: { boxId: string; hashRoot: string }) {
     const notInWhiteList = value?.message === 'leaf not found'
 
     // at least hold token amount
-    const { value: holderToken } = useERC20TokenDetailed(boxInfo?.holderTokenAddress)
-    const { value: holderTokenBalance = '0' } = useERC20TokenBalance(holderToken?.address)
+    const { value: holderToken } = useFungibleToken(NetworkPluginID.PLUGIN_EVM, boxInfo?.holderTokenAddress)
+    const { value: holderTokenBalance = '0' } = useFungibleTokenBalance(
+        NetworkPluginID.PLUGIN_EVM,
+        holderToken?.address,
+    )
     const holderMinTokenAmountBN = new BigNumber(boxInfo?.holderMinTokenAmount ?? 0)
     const insufficientHolderToken =
         isGreaterThan(holderMinTokenAmountBN, 0) && !holderMinTokenAmountBN.lte(holderTokenBalance)
@@ -199,7 +182,6 @@ function useContext(initialState?: { boxId: string; hashRoot: string }) {
         rootHash,
         notInWhiteList,
         insufficientHolderToken,
-        beat,
     ])
 
     const boxStateMessage = useMemo(() => {
@@ -237,7 +219,7 @@ function useContext(initialState?: { boxId: string; hashRoot: string }) {
             default:
                 unreachable(boxState)
         }
-    }, [holderToken, boxState, boxInfo?.startAt, qualification, beat])
+    }, [holderToken, boxState, boxInfo?.startAt, qualification])
 
     useEffect(() => {
         if (!boxInfo || boxInfo.started) return
@@ -245,14 +227,17 @@ function useContext(initialState?: { boxId: string; hashRoot: string }) {
         if (boxInfo.startAt < now) {
             retryMaskBoxStatus()
         }
-    }, [boxInfo, beat])
+    }, [boxInfo])
 
     // #region the box metadata
     const { value: boxMetadata, retry: retryBoxMetadata } = useMaskBoxMetadata(boxId, boxInfo?.creator ?? '')
     // #endregion
 
     // #region the erc721 contract detailed
-    const { value: contractDetailed } = useERC721ContractDetailed(maskBoxInfo?.nft_address)
+    const { value: contractDetailed } = useNonFungibleTokenContract(
+        NetworkPluginID.PLUGIN_EVM,
+        maskBoxInfo?.nft_address,
+    )
     // #endregion
 
     // #region the payment count
@@ -274,8 +259,9 @@ function useContext(initialState?: { boxId: string; hashRoot: string }) {
     // #endregion
 
     // #region the payment token
-    const { value: paymentNativeTokenBalance = '0' } = useNativeTokenBalance()
-    const { value: paymentERC20TokenBalance = '0' } = useERC20TokenBalance(
+    const { value: paymentNativeTokenBalance = '0' } = useBalance()
+    const { value: paymentERC20TokenBalance = '0' } = useFungibleTokenBalance(
+        NetworkPluginID.PLUGIN_EVM,
         isSameAddress(paymentTokenAddress, NATIVE_TOKEN_ADDRESS) ? '' : paymentTokenAddress,
     )
     const paymentTokenInfo = boxInfo?.payments.find((x) => isSameAddress(x.token.address, paymentTokenAddress))
diff --git a/packages/mask/src/plugins/MaskBox/hooks/useMaskBoxContract.ts b/packages/mask/src/plugins/MaskBox/hooks/useMaskBoxContract.ts
index 1c9a7c0df2a0..9b5895fd5318 100644
--- a/packages/mask/src/plugins/MaskBox/hooks/useMaskBoxContract.ts
+++ b/packages/mask/src/plugins/MaskBox/hooks/useMaskBoxContract.ts
@@ -1,9 +1,10 @@
 import type { AbiItem } from 'web3-utils'
 import type { MaskBox } from '@masknet/web3-contracts/types/MaskBox'
 import MASK_BOX_ABI from '@masknet/web3-contracts/abis/MaskBox.json'
-import { useContract, useMaskBoxConstants } from '@masknet/web3-shared-evm'
+import { ChainId, useMaskBoxConstants } from '@masknet/web3-shared-evm'
+import { useContract } from '@masknet/plugin-infra/web3-evm'
 
-export function useMaskBoxContract() {
+export function useMaskBoxContract(chainId: ChainId) {
     const { MASK_BOX_CONTRACT_ADDRESS } = useMaskBoxConstants()
-    return useContract<MaskBox>(MASK_BOX_CONTRACT_ADDRESS, MASK_BOX_ABI as AbiItem[])
+    return useContract<MaskBox>(chainId, MASK_BOX_CONTRACT_ADDRESS, MASK_BOX_ABI as AbiItem[])
 }
diff --git a/packages/mask/src/plugins/MaskBox/hooks/useMaskBoxCreationSuccessEvent.ts b/packages/mask/src/plugins/MaskBox/hooks/useMaskBoxCreationSuccessEvent.ts
index 41ca5aabee95..bc41bb2c0f19 100644
--- a/packages/mask/src/plugins/MaskBox/hooks/useMaskBoxCreationSuccessEvent.ts
+++ b/packages/mask/src/plugins/MaskBox/hooks/useMaskBoxCreationSuccessEvent.ts
@@ -1,16 +1,19 @@
 import { first } from 'lodash-unified'
 import { useAsyncRetry } from 'react-use'
 import type { CreationSuccess } from '@masknet/web3-contracts/types/MaskBox'
-import { useBlockNumber, useMaskBoxConstants } from '@masknet/web3-shared-evm'
+import { useMaskBoxConstants } from '@masknet/web3-shared-evm'
 import { useMaskBoxContract } from './useMaskBoxContract'
+import { NetworkPluginID } from '@masknet/web3-shared-base'
+import { useBlockNumber, useChainId } from '@masknet/plugin-infra/web3'
 
 // dynamically set the block range window size
 const FRAGMENT_SIZE = 3000
 const MAX_PAGE_SIZE = 10
 
 export function useMaskBoxCreationSuccessEvent(creatorAddress: string, tokenAddress: string, boxId: string) {
-    const { value: blockNumber = 0 } = useBlockNumber()
-    const maskBoxContract = useMaskBoxContract()
+    const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
+    const { value: blockNumber = 0 } = useBlockNumber(NetworkPluginID.PLUGIN_EVM)
+    const maskBoxContract = useMaskBoxContract(chainId)
     const { MASK_BOX_CONTRACT_FROM_BLOCK = Math.max(0, blockNumber - FRAGMENT_SIZE) } = useMaskBoxConstants()
 
     return useAsyncRetry(async () => {
diff --git a/packages/mask/src/plugins/MaskBox/hooks/useMaskBoxInfo.ts b/packages/mask/src/plugins/MaskBox/hooks/useMaskBoxInfo.ts
index 37e0bfaa3b7e..877a8b8b6104 100644
--- a/packages/mask/src/plugins/MaskBox/hooks/useMaskBoxInfo.ts
+++ b/packages/mask/src/plugins/MaskBox/hooks/useMaskBoxInfo.ts
@@ -1,8 +1,11 @@
+import { useChainId } from '@masknet/plugin-infra/web3'
+import { NetworkPluginID } from '@masknet/web3-shared-base'
 import { useAsyncRetry } from 'react-use'
 import { useMaskBoxContract } from './useMaskBoxContract'
 
 export function useMaskBoxInfo(id: string | number) {
-    const maskBoxContract = useMaskBoxContract()
+    const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
+    const maskBoxContract = useMaskBoxContract(chainId)
     return useAsyncRetry(async () => {
         if (!maskBoxContract) return null
         return maskBoxContract.methods.getBoxInfo(id).call()
diff --git a/packages/mask/src/plugins/MaskBox/hooks/useMaskBoxMetadata.ts b/packages/mask/src/plugins/MaskBox/hooks/useMaskBoxMetadata.ts
index 01cce7c99f88..77e2c31e12dd 100644
--- a/packages/mask/src/plugins/MaskBox/hooks/useMaskBoxMetadata.ts
+++ b/packages/mask/src/plugins/MaskBox/hooks/useMaskBoxMetadata.ts
@@ -1,10 +1,10 @@
+import { isValidAddress } from '@masknet/web3-shared-evm'
 import { useAsyncRetry } from 'react-use'
-import { EthereumAddress } from 'wallet.ts'
 import { MaskBoxRPC } from '../messages'
 
 export function useMaskBoxMetadata(boxId: string, creator: string) {
     return useAsyncRetry(async () => {
-        if (!boxId || !creator || !EthereumAddress.isValid(creator)) return
+        if (!boxId || !creator || !isValidAddress(creator)) return
         return MaskBoxRPC.getMaskBoxMetadata(boxId, creator)
     }, [creator])
 }
diff --git a/packages/mask/src/plugins/MaskBox/hooks/useMaskBoxPurchasedTokens.ts b/packages/mask/src/plugins/MaskBox/hooks/useMaskBoxPurchasedTokens.ts
index 3602531946cc..b244ee68d3ec 100644
--- a/packages/mask/src/plugins/MaskBox/hooks/useMaskBoxPurchasedTokens.ts
+++ b/packages/mask/src/plugins/MaskBox/hooks/useMaskBoxPurchasedTokens.ts
@@ -1,10 +1,14 @@
 import { useAsyncRetry } from 'react-use'
+import { useChainId } from '@masknet/plugin-infra/web3'
+import { EMPTY_LIST } from '@masknet/shared-base'
+import { NetworkPluginID } from '@masknet/web3-shared-base'
 import { useMaskBoxContract } from './useMaskBoxContract'
 
 export function useMaskBoxPurchasedTokens(id: string | number, customer: string) {
-    const maskBoxContract = useMaskBoxContract()
+    const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
+    const maskBoxContract = useMaskBoxContract(chainId)
     return useAsyncRetry(async () => {
-        if (!maskBoxContract) return []
+        if (!maskBoxContract) return EMPTY_LIST
         return maskBoxContract.methods.getPurchasedNft(id, customer).call()
     }, [id, customer, maskBoxContract])
 }
diff --git a/packages/mask/src/plugins/MaskBox/hooks/useMaskBoxQualificationContract.ts b/packages/mask/src/plugins/MaskBox/hooks/useMaskBoxQualificationContract.ts
index b013cb1f3d64..a2a9bbb80b1b 100644
--- a/packages/mask/src/plugins/MaskBox/hooks/useMaskBoxQualificationContract.ts
+++ b/packages/mask/src/plugins/MaskBox/hooks/useMaskBoxQualificationContract.ts
@@ -1,8 +1,9 @@
 import type { AbiItem } from 'web3-utils'
-import { useContract } from '@masknet/web3-shared-evm'
+import type { ChainId } from '@masknet/web3-shared-evm'
 import type { MaskBoxQualification } from '@masknet/web3-contracts/types/MaskBoxQualification'
 import MASK_BOX_QUALIFICATION_CONTRACT from '@masknet/web3-contracts/abis/MaskBoxQualification.json'
+import { useContract } from '@masknet/plugin-infra/web3-evm'
 
-export function useMaskBoxQualificationContract(address?: string) {
-    return useContract<MaskBoxQualification>(address, MASK_BOX_QUALIFICATION_CONTRACT as AbiItem[])
+export function useMaskBoxQualificationContract(chainId: ChainId, address?: string) {
+    return useContract<MaskBoxQualification>(chainId, address, MASK_BOX_QUALIFICATION_CONTRACT as AbiItem[])
 }
diff --git a/packages/mask/src/plugins/MaskBox/hooks/useMaskBoxStatus.ts b/packages/mask/src/plugins/MaskBox/hooks/useMaskBoxStatus.ts
index cf52338dfeb9..99f1d251bcd5 100644
--- a/packages/mask/src/plugins/MaskBox/hooks/useMaskBoxStatus.ts
+++ b/packages/mask/src/plugins/MaskBox/hooks/useMaskBoxStatus.ts
@@ -1,8 +1,11 @@
+import { useChainId } from '@masknet/plugin-infra/web3'
+import { NetworkPluginID } from '@masknet/web3-shared-base'
 import { useAsyncRetry } from 'react-use'
 import { useMaskBoxContract } from './useMaskBoxContract'
 
 export function useMaskBoxStatus(id: string | number) {
-    const maskBoxContract = useMaskBoxContract()
+    const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
+    const maskBoxContract = useMaskBoxContract(chainId)
     return useAsyncRetry(async () => {
         if (!maskBoxContract) return null
         return maskBoxContract.methods.getBoxStatus(id).call()
diff --git a/packages/mask/src/plugins/MaskBox/hooks/useMaskBoxTokensForSale.ts b/packages/mask/src/plugins/MaskBox/hooks/useMaskBoxTokensForSale.ts
index 34917c0058b9..d47020548ba3 100644
--- a/packages/mask/src/plugins/MaskBox/hooks/useMaskBoxTokensForSale.ts
+++ b/packages/mask/src/plugins/MaskBox/hooks/useMaskBoxTokensForSale.ts
@@ -1,8 +1,11 @@
 import { useAsyncRetry } from 'react-use'
+import { useChainId } from '@masknet/plugin-infra/web3'
+import { NetworkPluginID } from '@masknet/web3-shared-base'
 import { useMaskBoxContract } from './useMaskBoxContract'
 
 export function useMaskBoxTokensForSale(id: string | number) {
-    const maskBoxContract = useMaskBoxContract()
+    const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
+    const maskBoxContract = useMaskBoxContract(chainId)
     return useAsyncRetry(async () => {
         if (!maskBoxContract) return []
         return maskBoxContract.methods.getNftListForSale(id, 0, 100).call()
diff --git a/packages/mask/src/plugins/MaskBox/hooks/useMerkleProof.ts b/packages/mask/src/plugins/MaskBox/hooks/useMerkleProof.ts
index 3d4c0b08e22b..93271e3dd386 100644
--- a/packages/mask/src/plugins/MaskBox/hooks/useMerkleProof.ts
+++ b/packages/mask/src/plugins/MaskBox/hooks/useMerkleProof.ts
@@ -1,9 +1,10 @@
 import { useAsyncRetry } from 'react-use'
-import { useAccount } from '@masknet/web3-shared-evm'
+import { useAccount } from '@masknet/plugin-infra/web3'
+import { NetworkPluginID } from '@masknet/web3-shared-base'
 import { getMerkleProof } from '../apis'
 
 export function useMerkelProof(root?: string) {
-    const account = useAccount()
+    const account = useAccount(NetworkPluginID.PLUGIN_EVM)
     return useAsyncRetry(async () => {
         if (!root) return
 
diff --git a/packages/mask/src/plugins/MaskBox/hooks/useOpenBoxGasLimit.ts b/packages/mask/src/plugins/MaskBox/hooks/useOpenBoxGasLimit.ts
index 3028608f0f2c..8f639d9d3b1f 100644
--- a/packages/mask/src/plugins/MaskBox/hooks/useOpenBoxGasLimit.ts
+++ b/packages/mask/src/plugins/MaskBox/hooks/useOpenBoxGasLimit.ts
@@ -1,9 +1,12 @@
 import { useMemo } from 'react'
 import type { PayableTx } from '@masknet/web3-contracts/types/types'
 import { useMaskBoxContract } from './useMaskBoxContract'
+import { NetworkPluginID } from '@masknet/web3-shared-base'
+import { useChainId } from '@masknet/plugin-infra/web3'
 
 export function useOpenBoxGasLimit(parameters: [string, string, string, string], config: PayableTx) {
-    const maskBoxContract = useMaskBoxContract()
+    const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
+    const maskBoxContract = useMaskBoxContract(chainId)
 
     return useMemo(() => {
         if (!maskBoxContract) return '0'
diff --git a/packages/mask/src/plugins/MaskBox/hooks/useOpenBoxTransaction.ts b/packages/mask/src/plugins/MaskBox/hooks/useOpenBoxTransaction.ts
index 2a59d7016ae9..963ce746f7c1 100644
--- a/packages/mask/src/plugins/MaskBox/hooks/useOpenBoxTransaction.ts
+++ b/packages/mask/src/plugins/MaskBox/hooks/useOpenBoxTransaction.ts
@@ -1,20 +1,22 @@
 import { useMemo } from 'react'
 import type { NonPayableTx } from '@masknet/web3-contracts/types/types'
-import { EthereumTokenType, FungibleTokenDetailed, useAccount } from '@masknet/web3-shared-evm'
+import { FungibleToken, multipliedBy, NetworkPluginID } from '@masknet/web3-shared-base'
+import { useAccount, useChainId } from '@masknet/plugin-infra/web3'
+import { ChainId, SchemaType } from '@masknet/web3-shared-evm'
 import { useMaskBoxContract } from './useMaskBoxContract'
-import { multipliedBy } from '@masknet/web3-shared-base'
 
 export function useOpenBoxTransaction(
     boxId: string,
     amount: number,
     paymentTokenIndex: number,
     paymentTokenPrice: string,
-    paymentTokenDetailed: FungibleTokenDetailed | null,
+    paymentTokenDetailed: FungibleToken<ChainId, SchemaType> | null,
     proof?: string,
     overrides?: NonPayableTx | null,
 ) {
-    const account = useAccount()
-    const maskBoxContract = useMaskBoxContract()
+    const account = useAccount(NetworkPluginID.PLUGIN_EVM)
+    const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
+    const maskBoxContract = useMaskBoxContract(chainId)
     return useMemo(() => {
         if (!boxId || amount <= 0 || !maskBoxContract) return
         return {
@@ -22,7 +24,7 @@ export function useOpenBoxTransaction(
                 ...overrides,
                 from: account,
                 value:
-                    paymentTokenDetailed?.type === EthereumTokenType.Native
+                    paymentTokenDetailed?.schema === SchemaType.Native
                         ? multipliedBy(paymentTokenPrice, amount).toFixed()
                         : undefined,
             },
diff --git a/packages/mask/src/plugins/MaskBox/hooks/useQualification.ts b/packages/mask/src/plugins/MaskBox/hooks/useQualification.ts
index c409f937d8f2..8c320cb42eff 100644
--- a/packages/mask/src/plugins/MaskBox/hooks/useQualification.ts
+++ b/packages/mask/src/plugins/MaskBox/hooks/useQualification.ts
@@ -1,8 +1,11 @@
+import { useChainId } from '@masknet/plugin-infra/web3'
+import { NetworkPluginID } from '@masknet/web3-shared-base'
 import { useAsyncRetry } from 'react-use'
 import { useMaskBoxQualificationContract } from './useMaskBoxQualificationContract'
 
 export function useQualification(address?: string, account?: string, proof?: string) {
-    const qualificationContract = useMaskBoxQualificationContract(address)
+    const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
+    const qualificationContract = useMaskBoxQualificationContract(chainId, address)
     const { value: qualification = { qualified: false, error_msg: '' } } = useAsyncRetry(async () => {
         if (!qualificationContract || !account) return null
         return qualificationContract.methods.is_qualified(account, proof ?? '0x00').call({
diff --git a/packages/mask/src/plugins/MaskBox/type.ts b/packages/mask/src/plugins/MaskBox/type.ts
index 063518d7aac7..3728bb9a79ff 100644
--- a/packages/mask/src/plugins/MaskBox/type.ts
+++ b/packages/mask/src/plugins/MaskBox/type.ts
@@ -1,4 +1,5 @@
-import type { FungibleTokenDetailed } from '@masknet/web3-shared-evm'
+import type { FungibleToken } from '@masknet/web3-shared-base'
+import type { ChainId, SchemaType } from '@masknet/web3-shared-evm'
 
 export enum CardTab {
     Articles = 0,
@@ -34,7 +35,7 @@ export interface PaymentOption {
 }
 
 export interface PaymentInfo {
-    token: FungibleTokenDetailed
+    token: FungibleToken<ChainId, SchemaType>
     price: string
     receivableAmount: string
 }
diff --git a/packages/mask/src/plugins/NextID/base.ts b/packages/mask/src/plugins/NextID/base.ts
index ad143c0d6227..5f54d1f829f4 100644
--- a/packages/mask/src/plugins/NextID/base.ts
+++ b/packages/mask/src/plugins/NextID/base.ts
@@ -1,5 +1,5 @@
 import { CurrentSNSNetwork, Plugin } from '@masknet/plugin-infra'
-import { NetworkPluginID } from '@masknet/plugin-infra/web3'
+import { NetworkPluginID } from '@masknet/web3-shared-base'
 import { ChainId } from '@masknet/web3-shared-evm'
 import { PLUGIN_DESCRIPTION, PLUGIN_ID, PLUGIN_NAME } from './constants'
 import { languages } from './locales/languages'
diff --git a/packages/mask/src/plugins/NextID/components/BindDialog.tsx b/packages/mask/src/plugins/NextID/components/BindDialog.tsx
index 385a23aac06c..f2ca866e8822 100644
--- a/packages/mask/src/plugins/NextID/components/BindDialog.tsx
+++ b/packages/mask/src/plugins/NextID/components/BindDialog.tsx
@@ -1,7 +1,7 @@
 import { memo } from 'react'
 import { useI18N } from '../locales'
 import { useAsyncRetry } from 'react-use'
-import { isSameAddress } from '@masknet/web3-shared-evm'
+import { isSameAddress, NetworkPluginID } from '@masknet/web3-shared-base'
 import type { Binding, PersonaInformation } from '@masknet/shared-base'
 import { NextIDAction, NextIDPlatform } from '@masknet/shared-base'
 import { BindPanelUI } from './BindPanelUI'
@@ -23,7 +23,7 @@ interface BindDialogProps {
 }
 
 export const BindDialog = memo<BindDialogProps>(({ open, onClose, persona, onBound, bounds }) => {
-    const account = useAccount()
+    const account = useAccount(NetworkPluginID.PLUGIN_EVM)
     const t = useI18N()
     const { showSnackbar } = useCustomSnackbar()
     const currentIdentifier = persona.identifier
diff --git a/packages/mask/src/plugins/NextID/components/BindPanelUI.tsx b/packages/mask/src/plugins/NextID/components/BindPanelUI.tsx
index 8250fd7dddc5..827605737568 100644
--- a/packages/mask/src/plugins/NextID/components/BindPanelUI.tsx
+++ b/packages/mask/src/plugins/NextID/components/BindPanelUI.tsx
@@ -7,7 +7,8 @@ import DoneIcon from '@mui/icons-material/Done'
 import { useI18N } from '../locales'
 import { getMaskColor, makeStyles, MaskColorVar } from '@masknet/theme'
 import { InjectedDialog, LoadingAnimation } from '@masknet/shared'
-import { NetworkPluginID, useCurrentWeb3NetworkPluginID } from '@masknet/plugin-infra/web3'
+import { NetworkPluginID } from '@masknet/web3-shared-base'
+import { useCurrentWeb3NetworkPluginID } from '@masknet/plugin-infra/web3'
 import { formatPersonaFingerprint, PersonaInformation } from '@masknet/shared-base'
 
 const useStyles = makeStyles()((theme) => ({
diff --git a/packages/mask/src/plugins/NextID/components/BindingItem.tsx b/packages/mask/src/plugins/NextID/components/BindingItem.tsx
index 8a618c8cbbd2..e4cf8e767908 100644
--- a/packages/mask/src/plugins/NextID/components/BindingItem.tsx
+++ b/packages/mask/src/plugins/NextID/components/BindingItem.tsx
@@ -1,4 +1,4 @@
-import { ChainId, formatEthereumAddress } from '@masknet/web3-shared-evm'
+import { ChainId, explorerResolver, formatEthereumAddress } from '@masknet/web3-shared-evm'
 import { Box, Link, Stack, Typography } from '@mui/material'
 import { memo } from 'react'
 import { NextIDPlatform } from '@masknet/shared-base'
@@ -6,7 +6,8 @@ import { DeleteIcon } from '@masknet/icons'
 import { makeStyles } from '@masknet/theme'
 import { CopyIconButton } from './CopyIconButton'
 import { ExternalLink } from 'react-feather'
-import { NetworkPluginID, useNetworkDescriptor, useWeb3State } from '@masknet/plugin-infra/web3'
+import { NetworkPluginID } from '@masknet/web3-shared-base'
+import { useNetworkDescriptor } from '@masknet/plugin-infra/web3'
 import { useI18N } from '../locales'
 import { ImageIcon } from '@masknet/shared'
 import { TipButton } from '../../../plugins/Tips/components'
@@ -66,9 +67,8 @@ interface Item {
 
 export const BindingItem = memo<Item>(({ platform, identity, tipable, deletable, onUnBind }) => {
     const t = useI18N()
-    const { Utils } = useWeb3State() ?? {}
     const { classes } = useStyles()
-    const networkDescriptor = useNetworkDescriptor(ChainId.Mainnet, NetworkPluginID.PLUGIN_EVM)
+    const networkDescriptor = useNetworkDescriptor(NetworkPluginID.PLUGIN_EVM, ChainId.Mainnet)
     const visitingPersona = useCurrentVisitingIdentity()
 
     if (platform === NextIDPlatform.Ethereum) {
@@ -80,7 +80,7 @@ export const BindingItem = memo<Item>(({ platform, identity, tipable, deletable,
                     <CopyIconButton text={identity} className={classes.copy} />
                     <Link
                         className={classes.link}
-                        href={Utils?.resolveAddressLink?.(1, identity) ?? ''}
+                        href={explorerResolver.addressLink(ChainId.Mainnet, identity) ?? ''}
                         target="_blank"
                         title={t.view_on_explorer()}
                         rel="noopener noreferrer">
diff --git a/packages/mask/src/plugins/NextID/components/NextIdPage.tsx b/packages/mask/src/plugins/NextID/components/NextIdPage.tsx
index 9ffbed296835..c152434516ab 100644
--- a/packages/mask/src/plugins/NextID/components/NextIdPage.tsx
+++ b/packages/mask/src/plugins/NextID/components/NextIdPage.tsx
@@ -1,7 +1,8 @@
-import { NextIDPlatform } from '@masknet/shared-base'
+import { EMPTY_LIST, NextIDPlatform } from '@masknet/shared-base'
 import { makeStyles } from '@masknet/theme'
 import { NextIDProof } from '@masknet/web3-providers'
 import { Box, Button, Skeleton, Stack, Typography } from '@mui/material'
+import { uniqBy } from 'lodash-unified'
 import { useMemo, useState } from 'react'
 import { useAsync, useAsyncRetry } from 'react-use'
 import { useCurrentVisitingIdentity, useLastRecognizedIdentity } from '../../../components/DataSource/useActivatedUI'
@@ -109,7 +110,12 @@ export function NextIdPage({ personaList }: NextIdPageProps) {
         firstTab.click()
     }
 
-    if (personaActionButton && isOwn) {
+    const ethereumProofs = useMemo(() => {
+        const proofs = bindings?.proofs.filter((proof) => proof.platform === NextIDPlatform.Ethereum)
+        return proofs ? uniqBy(proofs, (v) => v.identity) : EMPTY_LIST
+    }, [bindings?.proofs])
+
+    if (personaActionButton) {
         return (
             <Stack justifyContent="center" direction="row" mt="24px">
                 {personaActionButton}
@@ -148,12 +154,12 @@ export function NextIdPage({ personaList }: NextIdPageProps) {
         )
     }
 
-    if (bindings?.proofs.filter((proof) => proof.platform === NextIDPlatform.Ethereum).length) {
+    if (ethereumProofs.length) {
         return (
             <>
                 <Box>
                     <Box>
-                        {bindings.proofs.map((x) => (
+                        {ethereumProofs.map((x) => (
                             <BindingItem
                                 deletable={isOwn}
                                 tipable={tipable}
diff --git a/packages/mask/src/plugins/NextID/components/UnbindConfirm.tsx b/packages/mask/src/plugins/NextID/components/UnbindConfirm.tsx
index a4ad27542a64..c271919f22ef 100644
--- a/packages/mask/src/plugins/NextID/components/UnbindConfirm.tsx
+++ b/packages/mask/src/plugins/NextID/components/UnbindConfirm.tsx
@@ -47,7 +47,7 @@ export enum DialogTabs {
 export const UnbindConfirm = memo<UnbindConfirmProps>(({ onClose, unbindAddress, onConfirm }) => {
     const t = useI18N()
     const { classes } = useStyles()
-    const { Utils } = useWeb3State()
+    const { Others } = useWeb3State()
 
     const [isVisible, setVisible] = useState(true)
 
@@ -59,7 +59,7 @@ export const UnbindConfirm = memo<UnbindConfirmProps>(({ onClose, unbindAddress,
         <MaskDialog open={!!unbindAddress && isVisible} maxWidth="xs" title="">
             <DialogContent className={classes.wrapper}>
                 <Box className={classes.title}>
-                    {t.delete()} {Utils?.formatAddress?.(unbindAddress, 4)} &#xFF1F;
+                    {t.delete()} {Others?.formatAddress?.(unbindAddress, 4)} &#xFF1F;
                 </Box>
                 <Box className={classes.content}>{t.disconnect_warning()}</Box>
                 <Button className={classes.confirmButton} onClick={handleConfirm}>
diff --git a/packages/mask/src/plugins/NextID/components/UnbindDialog.tsx b/packages/mask/src/plugins/NextID/components/UnbindDialog.tsx
index 89fd2a65acd8..a2d6626b7c79 100644
--- a/packages/mask/src/plugins/NextID/components/UnbindDialog.tsx
+++ b/packages/mask/src/plugins/NextID/components/UnbindDialog.tsx
@@ -1,7 +1,8 @@
 import { memo, useCallback, useState } from 'react'
 import { useI18N } from '../locales'
 import { useAsyncRetry } from 'react-use'
-import { isSameAddress, useAccount } from '@masknet/web3-shared-evm'
+import { isSameAddress, NetworkPluginID } from '@masknet/web3-shared-base'
+import { useAccount } from '@masknet/plugin-infra/web3'
 import type { Binding, PersonaInformation } from '@masknet/shared-base'
 import { NextIDAction, NextIDPlatform } from '@masknet/shared-base'
 import { useCustomSnackbar } from '@masknet/theme'
@@ -23,7 +24,7 @@ interface VerifyWalletDialogProps {
 }
 
 export const UnbindDialog = memo<VerifyWalletDialogProps>(({ unbindAddress, onClose, persona, onUnBound, bounds }) => {
-    const account = useAccount()
+    const account = useAccount(NetworkPluginID.PLUGIN_EVM)
     const t = useI18N()
 
     const [openSecondDialog, setSecondDialog] = useState(false)
diff --git a/packages/mask/src/plugins/NextID/components/UnbindPanelUI.tsx b/packages/mask/src/plugins/NextID/components/UnbindPanelUI.tsx
index fbfa5b301972..66b33f97be44 100644
--- a/packages/mask/src/plugins/NextID/components/UnbindPanelUI.tsx
+++ b/packages/mask/src/plugins/NextID/components/UnbindPanelUI.tsx
@@ -7,7 +7,8 @@ import DoneIcon from '@mui/icons-material/Done'
 import { useI18N } from '../locales'
 import { getMaskColor, makeStyles, MaskColorVar } from '@masknet/theme'
 import { InjectedDialog, LoadingAnimation } from '@masknet/shared'
-import { NetworkPluginID, useCurrentWeb3NetworkPluginID } from '@masknet/plugin-infra/web3'
+import { NetworkPluginID } from '@masknet/web3-shared-base'
+import { useCurrentWeb3NetworkPluginID } from '@masknet/plugin-infra/web3'
 import AbstractTab, { AbstractTabProps } from '../../../components/shared/AbstractTab'
 import { formatPersonaFingerprint, PersonaInformation } from '@masknet/shared-base'
 
diff --git a/packages/mask/src/plugins/NextID/hooks/useWalletSign.ts b/packages/mask/src/plugins/NextID/hooks/useWalletSign.ts
index 9c55d608ff62..b93af42ddeac 100644
--- a/packages/mask/src/plugins/NextID/hooks/useWalletSign.ts
+++ b/packages/mask/src/plugins/NextID/hooks/useWalletSign.ts
@@ -1,6 +1,6 @@
 import { useCustomSnackbar } from '@masknet/theme'
 import { useAsyncFn, useUpdateEffect } from 'react-use'
-import Services from '../../../extension/service'
+import { WalletRPC } from '../../Wallet/messages'
 import { useI18N } from '../locales'
 
 export const useWalletSign = (message?: string, address?: string) => {
@@ -13,7 +13,7 @@ export const useWalletSign = (message?: string, address?: string) => {
             if (!address || !message) return
             try {
                 showSnackbar(t.notify_wallet_sign(), { processing: true, message: t.notify_wallet_sign_confirm() })
-                const result = await Services.Ethereum.personalSign(message, address)
+                const result = await WalletRPC.signPersonalMessage(message, address)
                 return result
             } catch {
                 showSnackbar(t.notify_wallet_sign(), { variant: 'error', message: t.notify_wallet_sign_cancel() })
diff --git a/packages/mask/src/plugins/Pets/SNSAdaptor/PetDialog.tsx b/packages/mask/src/plugins/Pets/SNSAdaptor/PetDialog.tsx
index 43b6a5c96385..a92adc0dc122 100644
--- a/packages/mask/src/plugins/Pets/SNSAdaptor/PetDialog.tsx
+++ b/packages/mask/src/plugins/Pets/SNSAdaptor/PetDialog.tsx
@@ -1,6 +1,6 @@
 import { useState } from 'react'
 import { useAsync, useTimeout } from 'react-use'
-import type { Constant } from '@masknet/web3-shared-evm/constants/utils'
+import type { Constant } from '@masknet/web3-shared-base'
 import { useRemoteControlledDialog } from '@masknet/shared-base-ui'
 import { InjectedDialog } from '@masknet/shared'
 import { DialogContent } from '@mui/material'
diff --git a/packages/mask/src/plugins/Pets/SNSAdaptor/PetSetDialog.tsx b/packages/mask/src/plugins/Pets/SNSAdaptor/PetSetDialog.tsx
index 41b3e294de67..de046894210f 100644
--- a/packages/mask/src/plugins/Pets/SNSAdaptor/PetSetDialog.tsx
+++ b/packages/mask/src/plugins/Pets/SNSAdaptor/PetSetDialog.tsx
@@ -1,6 +1,7 @@
 import { useState, useMemo, ReactNode } from 'react'
 import { useTimeout } from 'react-use'
-import { isSameAddress, ChainId } from '@masknet/web3-shared-evm'
+import { Constant, isSameAddress, NetworkPluginID } from '@masknet/web3-shared-base'
+import { ChainId } from '@masknet/web3-shared-evm'
 import { makeStyles, useStylesExtends, useCustomSnackbar, ShadowRootPopper } from '@masknet/theme'
 import { useValueRef } from '@masknet/shared-base-ui'
 import {
@@ -15,7 +16,6 @@ import {
     Checkbox,
 } from '@mui/material'
 import { LoadingButton } from '@mui/lab'
-import type { Constant } from '@masknet/web3-shared-evm/constants/utils'
 import { PluginPetMessages, PluginPetRPC } from '../messages'
 import { initMeta, initCollection, GLB3DIcon } from '../constants'
 import { PreviewBox } from './PreviewBox'
@@ -24,7 +24,7 @@ import { useUser, useNFTs, useNFTsExtra } from '../hooks'
 import { useI18N } from '../../../utils'
 import { ImageLoader } from './ImageLoader'
 import { petShowSettings } from '../settings'
-import { EthereumChainBoundary } from '../../../web3/UI/EthereumChainBoundary'
+import { ChainBoundary } from '../../../web3/UI/ChainBoundary'
 
 const useStyles = makeStyles()((theme) => ({
     desBox: {
@@ -136,7 +136,7 @@ export function PetSetDialog({ configNFTs, onClose }: PetSetDialogProps) {
             return
         }
         setLoading(true)
-        const chosenToken = collection.tokens.find((item) => item.mediaUrl === metaData.image)
+        const chosenToken = collection.tokens.find((item) => item?.metadata?.imageURL === metaData.image)
         const meta = {
             ...metaData,
             userId: user.userId,
@@ -172,12 +172,12 @@ export function PetSetDialog({ configNFTs, onClose }: PetSetDialogProps) {
 
     const onImageChange = (v: OwnerERC721TokenInfo | null) => {
         setTokenInfoSelect(v)
-        setInputTokenName(v?.name ?? '')
+        setInputTokenName(v?.metadata?.name ?? '')
         setMetaData({
             ...metaData,
             userId: user.userId,
             tokenId: v?.tokenId ?? '',
-            image: v?.mediaUrl ?? '',
+            image: v?.metadata?.imageURL ?? '',
             type: v?.glbSupport ? ImageType.GLB : ImageType.NORMAL,
         })
         setImageError(false)
@@ -192,12 +192,12 @@ export function PetSetDialog({ configNFTs, onClose }: PetSetDialogProps) {
     const imageChose = useMemo(() => {
         if (!metaData.image) return ''
         const imageChosen = collection.tokens.find((item) => item.tokenId === metaData.tokenId)
-        return imageChosen?.mediaUrl
+        return imageChosen?.metadata?.imageURL
     }, [metaData.image, collection.tokens])
 
     const renderImg = (address: string) => {
         const matched = extraData.find((item) => isSameAddress(item.address, address))
-        return <ImageLoader className={classes.thumbnail} src={matched?.iconURL ?? ''} />
+        return <ImageLoader className={classes.thumbnail} src={matched?.logoURL ?? ''} />
     }
 
     const paperComponent = (children: ReactNode | undefined) => <Box className={classes.boxPaper}>{children}</Box>
@@ -246,13 +246,15 @@ export function PetSetDialog({ configNFTs, onClose }: PetSetDialogProps) {
                 options={collection.tokens}
                 inputValue={inputTokenName}
                 onChange={(_event, newValue) => onImageChange(newValue)}
-                getOptionLabel={(option) => option.name ?? ''}
+                getOptionLabel={(option) => option?.metadata?.name ?? ''}
                 PaperComponent={({ children }) => paperComponent(children)}
                 PopperComponent={ShadowRootPopper}
                 renderOption={(props, option) => (
                     <Box component="li" className={classes.itemFix} {...props}>
-                        {!option.glbSupport ? <img className={classes.thumbnail} src={option.mediaUrl} /> : null}
-                        <Typography>{option.name}</Typography>
+                        {!option.glbSupport ? (
+                            <img className={classes.thumbnail} src={option?.metadata?.imageURL} />
+                        ) : null}
+                        <Typography>{option?.metadata?.name}</Typography>
                         {option.glbSupport ? <img className={classes.glbIcon} src={GLB3DIcon} /> : null}
                     </Box>
                 )}
@@ -302,8 +304,9 @@ export function PetSetDialog({ configNFTs, onClose }: PetSetDialogProps) {
                     label={t('plugin_pets_dialog_check_title')}
                     sx={{ marginTop: '4px' }}
                 />
-                <EthereumChainBoundary
-                    chainId={ChainId.Mainnet}
+                <ChainBoundary
+                    expectedPluginID={NetworkPluginID.PLUGIN_EVM}
+                    expectedChainId={ChainId.Mainnet}
                     noSwitchNetworkTip
                     ActionButtonPromiseProps={{
                         size: 'large',
@@ -320,7 +323,7 @@ export function PetSetDialog({ configNFTs, onClose }: PetSetDialogProps) {
                         disabled={!collection.name || !metaData.image}>
                         {t('plugin_pets_dialog_btn')}
                     </LoadingButton>
-                </EthereumChainBoundary>
+                </ChainBoundary>
                 <Box className={classes.desBox}>
                     <Typography className={classes.des}>{t('plugin_pets_dialog_created')}</Typography>
                     <Typography className={classes.des}>{t('plugin_pets_dialog_powered')}</Typography>
diff --git a/packages/mask/src/plugins/Pets/Services/index.ts b/packages/mask/src/plugins/Pets/Services/index.ts
index b1b8d4342232..5a93471db96a 100644
--- a/packages/mask/src/plugins/Pets/Services/index.ts
+++ b/packages/mask/src/plugins/Pets/Services/index.ts
@@ -1,11 +1,12 @@
 import { getCustomEssayFromRSS, getConfigNFTsFromRSS, saveCustomEssayToRSS } from './rss3'
-import { personalSign } from '../../../extension/background-script/EthereumService'
+// import { personalSign } from '../../../extension/background-script/EthereumService'
 import type { PetMetaDB } from '../types'
+import { WalletRPC } from '../../Wallet/messages'
 
 export * from './storage'
 
 export async function saveEssay(address: string, petMeta: PetMetaDB, userId: string): Promise<PetMetaDB | undefined> {
-    const signature = await personalSign(userId, address)
+    const signature = await WalletRPC.signPersonalMessage(userId, address)
     return saveCustomEssayToRSS(address, petMeta, signature)
 }
 
diff --git a/packages/mask/src/plugins/Pets/Services/rss3.ts b/packages/mask/src/plugins/Pets/Services/rss3.ts
index b791720afa30..e4586190087f 100644
--- a/packages/mask/src/plugins/Pets/Services/rss3.ts
+++ b/packages/mask/src/plugins/Pets/Services/rss3.ts
@@ -1,15 +1,15 @@
 import { RSS3 } from '@masknet/web3-providers'
-import type { Constant } from '@masknet/web3-shared-evm/constants/utils'
-import { personalSign } from '../../../extension/background-script/EthereumService'
+import type { Constant } from '@masknet/web3-shared-base/src/utils/types'
 import type { ConfigRSSNode, EssayRSSNode, PetMetaDB } from '../types'
 import { NFTS_CONFIG_ADDRESS } from '../constants'
+import { WalletRPC } from '../../Wallet/messages'
 
 const cache = new Map<string, Record<string, Constant> | undefined>()
 
 export async function getCustomEssayFromRSS(address: string): Promise<PetMetaDB | undefined> {
     if (!address) return
     const rss = RSS3.createRSS3(address, async (message: string) => {
-        return personalSign(message, address)
+        return WalletRPC.signPersonalMessage(message, address)
     })
     const data = await RSS3.getFileData<EssayRSSNode>(rss, address, '_pet')
     return data?.essay
@@ -18,7 +18,7 @@ export async function getCustomEssayFromRSS(address: string): Promise<PetMetaDB
 export async function saveCustomEssayToRSS(address: string, essay: PetMetaDB, signature: string) {
     if (!address) return
     const rss = RSS3.createRSS3(address, async (message: string) => {
-        return personalSign(message, address)
+        return WalletRPC.signPersonalMessage(message, address)
     })
     await RSS3.setFileData<EssayRSSNode>(rss, address, '_pet', { address, signature, essay })
     return essay
@@ -28,7 +28,7 @@ export async function getConfigNFTsFromRSS() {
     const v = cache.get(NFTS_CONFIG_ADDRESS)
     if (v) return v
     const rss = RSS3.createRSS3(NFTS_CONFIG_ADDRESS, async (message: string) => {
-        return personalSign(message, NFTS_CONFIG_ADDRESS)
+        return WalletRPC.signPersonalMessage(message, NFTS_CONFIG_ADDRESS)
     })
     const data = await RSS3.getFileData<ConfigRSSNode>(rss, NFTS_CONFIG_ADDRESS, '_pet_nfts')
     cache.set(NFTS_CONFIG_ADDRESS, data?.essay)
diff --git a/packages/mask/src/plugins/Pets/base.tsx b/packages/mask/src/plugins/Pets/base.tsx
index 732ca96c2691..57d86722941f 100644
--- a/packages/mask/src/plugins/Pets/base.tsx
+++ b/packages/mask/src/plugins/Pets/base.tsx
@@ -1,5 +1,5 @@
 import { CurrentSNSNetwork, Plugin } from '@masknet/plugin-infra'
-import { NetworkPluginID } from '@masknet/plugin-infra/web3'
+import { NetworkPluginID } from '@masknet/web3-shared-base'
 import { ChainId } from '@masknet/web3-shared-evm'
 import { PetsPluginID } from './constants'
 
diff --git a/packages/mask/src/plugins/Pets/hooks/useNfts.ts b/packages/mask/src/plugins/Pets/hooks/useNfts.ts
index 4a65fa7a4cc9..7ad0ef0644c8 100644
--- a/packages/mask/src/plugins/Pets/hooks/useNfts.ts
+++ b/packages/mask/src/plugins/Pets/hooks/useNfts.ts
@@ -2,25 +2,24 @@ import { useEffect, useMemo, useState } from 'react'
 import { useAsync } from 'react-use'
 import { OpenSea } from '@masknet/web3-providers'
 import {
-    useChainId,
-    useCollectibles,
-    ERC721TokenDetailed,
+    NetworkPluginID,
     isSameAddress,
-    ERC721ContractDetailed,
-    SocketState,
-    resolveIPFSLink,
-    Constant,
+    NonFungibleTokenContract,
     transform,
-} from '@masknet/web3-shared-evm'
+    NonFungibleAsset,
+    Constant,
+} from '@masknet/web3-shared-base'
+import { resolveIPFSLink, ChainId, SchemaType } from '@masknet/web3-shared-evm'
 import { cloneDeep, findLastIndex } from 'lodash-unified'
 import { delay } from '@dimensiondev/kit'
 import type { User, FilterContract } from '../types'
 import { Punk3D } from '../constants'
+import { useChainId, useNonFungibleAssets } from '@masknet/plugin-infra/web3'
 
 function useInitNFTs(config: Record<string, Constant> | undefined) {
     return useMemo(() => {
         if (!config) return []
-        const nftList = transform(config)()
+        const nftList = transform(ChainId, config)()
         return Object.keys(nftList).map((i) => {
             const value = nftList[i as keyof typeof nftList]
             return { name: i, contract: value as string, tokens: [] }
@@ -31,28 +30,26 @@ function useInitNFTs(config: Record<string, Constant> | undefined) {
 export function useNFTs(user: User | undefined, configNFTs: Record<string, Constant> | undefined) {
     const initContracts = useInitNFTs(configNFTs)
     const [nfts, setNfts] = useState<FilterContract[]>(initContracts)
-    const chainId = useChainId()
-    const [fetchTotal, setFetchTotal] = useState<ERC721TokenDetailed[]>([])
-    const { data: collectibles, state } = useCollectibles(user?.address ?? '', chainId)
+    const [fetchTotal, setFetchTotal] = useState<Array<NonFungibleAsset<ChainId, SchemaType>>>([])
+    const { value: collectibles } = useNonFungibleAssets(NetworkPluginID.PLUGIN_EVM)
     useEffect(() => {
         if (!initContracts.length) return
         const tempNFTs: FilterContract[] = cloneDeep(initContracts)
-        if (collectibles.length && (state === SocketState.done || state === SocketState.sent)) {
+        if (collectibles?.length) {
             const total = [...fetchTotal, ...collectibles]
             setFetchTotal(total)
             for (const NFT of total) {
-                const sameNFT = tempNFTs.find((temp) => isSameAddress(temp.contract, NFT.contractDetailed.address))
+                const sameNFT = tempNFTs.find((temp) => isSameAddress(temp.contract, NFT.address))
                 if (!sameNFT) continue
-                const isPunk =
-                    isSameAddress(NFT.contractDetailed.address, Punk3D.contract) && NFT.tokenId === Punk3D.tokenId
-                if (isPunk) {
-                    NFT.info.mediaUrl = Punk3D.url
+                const isPunk = isSameAddress(NFT.address, Punk3D.contract) && NFT.tokenId === Punk3D.tokenId
+                if (isPunk && NFT.metadata) {
+                    NFT.metadata.imageURL = Punk3D.url
                 }
-                const glbSupport = NFT.info.mediaUrl?.endsWith('.glb') || isPunk
-                if (NFT.info.mediaUrl?.includes('ipfs://')) {
-                    NFT.info.mediaUrl = resolveIPFSLink(NFT.info.mediaUrl.replace('ipfs://', ''))
+                const glbSupport = NFT.metadata?.imageURL?.endsWith('.glb') || isPunk
+                if (NFT.metadata?.imageURL?.includes('ipfs://')) {
+                    NFT.metadata.imageURL = resolveIPFSLink(NFT.metadata.imageURL.replace('ipfs://', ''))
                 }
-                const item = { ...NFT.info, tokenId: NFT.tokenId, glbSupport }
+                const item = { ...NFT, tokenId: NFT.tokenId, glbSupport }
                 const sameTokenIndex = findLastIndex(sameNFT.tokens, (v) => v.tokenId === NFT.tokenId)
                 if (sameTokenIndex === -1) {
                     sameNFT.tokens.push(item)
@@ -63,21 +60,21 @@ export function useNFTs(user: User | undefined, configNFTs: Record<string, Const
         }
         setNfts(tempNFTs)
         return () => {}
-    }, [JSON.stringify(user), JSON.stringify(collectibles), state, JSON.stringify(initContracts)])
+    }, [JSON.stringify(user), JSON.stringify(collectibles), JSON.stringify(initContracts)])
     return nfts
 }
 
 export function useNFTsExtra(configNFTs: Record<string, Constant> | undefined) {
     const initContracts = useInitNFTs(configNFTs)
     const [retry, setRetry] = useState(0)
-    const chainId = useChainId()
-    const [extra, setExtra] = useState<ERC721ContractDetailed[]>([])
+    const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
+    const [extra, setExtra] = useState<Array<NonFungibleTokenContract<ChainId, SchemaType>>>([])
     useAsync(async () => {
         if (!initContracts.length) return
         if (retry > 2) return
         let requests = []
         if (!extra.length) {
-            requests = initContracts.map((nft) => OpenSea.getContract(nft.contract, chainId))
+            requests = initContracts.map((nft) => OpenSea.getContract(nft.contract, { chainId }))
         } else {
             // openSea api request should not immediately
             await delay(3000)
@@ -85,10 +82,10 @@ export function useNFTsExtra(configNFTs: Record<string, Constant> | undefined) {
                 if (nft.symbol && nft.name !== 'Unknown Token') {
                     return Promise.resolve(nft)
                 }
-                return OpenSea.getContract(initContracts[index].contract, chainId)
+                return OpenSea.getContract(initContracts[index].contract, { chainId })
             })
         }
-        const lists: ERC721ContractDetailed[] = await Promise.all(requests)
+        const lists: Array<NonFungibleTokenContract<ChainId, SchemaType>> = await Promise.all(requests)
         setExtra(lists)
         setRetry(retry + 1)
     }, [retry, JSON.stringify(initContracts)])
diff --git a/packages/mask/src/plugins/Pets/hooks/useUser.ts b/packages/mask/src/plugins/Pets/hooks/useUser.ts
index d6baaca6c7cb..506c630d655d 100644
--- a/packages/mask/src/plugins/Pets/hooks/useUser.ts
+++ b/packages/mask/src/plugins/Pets/hooks/useUser.ts
@@ -1,13 +1,14 @@
-import { useAsync } from 'react-use'
 import { useEffect, useState } from 'react'
-import { useWallet } from '@masknet/web3-shared-evm'
+import { useAsync } from 'react-use'
 import type { User } from '../types'
 import { useCurrentVisitingIdentity, useLastRecognizedIdentity } from '../../../components/DataSource/useActivatedUI'
 import { PluginPetRPC } from '../messages'
+import { useWallet } from '@masknet/plugin-infra/web3'
+import { NetworkPluginID } from '@masknet/web3-shared-base'
 
 export function useUser() {
     const [user, setUser] = useState<User>({ userId: '', address: '' })
-    const wallet = useWallet()
+    const wallet = useWallet(NetworkPluginID.PLUGIN_EVM)
     const whoAmI = useLastRecognizedIdentity()
     useEffect(() => {
         if (!(wallet?.address && whoAmI?.identifier?.userId)) return
diff --git a/packages/mask/src/plugins/Pets/types.ts b/packages/mask/src/plugins/Pets/types.ts
index 44759423b244..94eb95190f1a 100644
--- a/packages/mask/src/plugins/Pets/types.ts
+++ b/packages/mask/src/plugins/Pets/types.ts
@@ -1,5 +1,5 @@
-import type { ERC721TokenInfo } from '@masknet/web3-shared-evm'
-import type { Constant } from '@masknet/web3-shared-evm/constants/utils'
+import type { Constant, NonFungibleAsset } from '@masknet/web3-shared-base'
+import type { ChainId, SchemaType } from '@masknet/web3-shared-evm'
 
 export interface PetsDialogEvent {
     open: boolean
@@ -39,7 +39,7 @@ export interface User {
     address: string
 }
 
-export interface OwnerERC721TokenInfo extends ERC721TokenInfo {
+export interface OwnerERC721TokenInfo extends NonFungibleAsset<ChainId, SchemaType> {
     tokenId: string
     glbSupport: boolean
 }
diff --git a/packages/mask/src/plugins/PoolTogether/UI/Account.tsx b/packages/mask/src/plugins/PoolTogether/UI/Account.tsx
index 013cdc5be9e5..086d5459a18e 100644
--- a/packages/mask/src/plugins/PoolTogether/UI/Account.tsx
+++ b/packages/mask/src/plugins/PoolTogether/UI/Account.tsx
@@ -1,6 +1,6 @@
 import { RefreshIcon } from '@masknet/icons'
 import { DarkColor } from '@masknet/theme/base'
-import { formatBalance } from '@masknet/web3-shared-evm'
+import { formatBalance } from '@masknet/web3-shared-base'
 import { CircularProgress, Grid, Link, Typography } from '@mui/material'
 import { makeStyles } from '@masknet/theme'
 import { useI18N } from '../../../utils'
diff --git a/packages/mask/src/plugins/PoolTogether/UI/AccountPool.tsx b/packages/mask/src/plugins/PoolTogether/UI/AccountPool.tsx
index 7826c5f093e2..df916e3ad88c 100644
--- a/packages/mask/src/plugins/PoolTogether/UI/AccountPool.tsx
+++ b/packages/mask/src/plugins/PoolTogether/UI/AccountPool.tsx
@@ -1,6 +1,7 @@
 import { TokenIcon } from '@masknet/shared'
 import { DarkColor } from '@masknet/theme/base'
-import { formatBalance, useChainId } from '@masknet/web3-shared-evm'
+import { formatBalance, NetworkPluginID } from '@masknet/web3-shared-base'
+import { useChainId } from '@masknet/plugin-infra/web3'
 import { Grid, Link, Typography } from '@mui/material'
 import { makeStyles } from '@masknet/theme'
 import { PoolTogetherTrophy } from '@masknet/icons'
@@ -115,7 +116,7 @@ export function AccountPool(props: AccountPoolProps) {
     const { t } = useI18N()
     const { classes } = useStyles()
     const poolURL = useManagePoolURL(accountPool.pool)
-    const chainId = useChainId()
+    const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
 
     const balance = formatBalance(
         accountPool.account.ticketBalance,
diff --git a/packages/mask/src/plugins/PoolTogether/UI/DepositDialog.tsx b/packages/mask/src/plugins/PoolTogether/UI/DepositDialog.tsx
index dd5eac95ed72..90a626d276bf 100644
--- a/packages/mask/src/plugins/PoolTogether/UI/DepositDialog.tsx
+++ b/packages/mask/src/plugins/PoolTogether/UI/DepositDialog.tsx
@@ -1,14 +1,8 @@
 import { InjectedDialog, useOpenShareTxDialog, usePickToken } from '@masknet/shared'
 import { useRemoteControlledDialog } from '@masknet/shared-base-ui'
 import { keyframes, makeStyles } from '@masknet/theme'
-import { isZero, rightShift } from '@masknet/web3-shared-base'
-import {
-    EthereumTokenType,
-    FungibleTokenDetailed,
-    useAccount,
-    useFungibleTokenBalance,
-    ZERO_ADDRESS,
-} from '@masknet/web3-shared-evm'
+import { FungibleToken, isZero, NetworkPluginID, rightShift } from '@masknet/web3-shared-base'
+import { ChainId, SchemaType, ZERO_ADDRESS } from '@masknet/web3-shared-evm'
 import { DialogContent, Grid, Typography } from '@mui/material'
 import { useCallback, useEffect, useMemo, useState } from 'react'
 import ActionButton from '../../../extension/options-page/DashboardComponents/ActionButton'
@@ -17,7 +11,7 @@ import { isFacebook } from '../../../social-network-adaptor/facebook.com/base'
 import { isTwitter } from '../../../social-network-adaptor/twitter.com/base'
 import { useI18N } from '../../../utils/i18n-next-ui'
 import { EthereumERC20TokenApprovedBoundary } from '../../../web3/UI/EthereumERC20TokenApprovedBoundary'
-import { EthereumWalletConnectedBoundary } from '../../../web3/UI/EthereumWalletConnectedBoundary'
+import { WalletConnectedBoundary } from '../../../web3/UI/WalletConnectedBoundary'
 import { TokenAmountPanel } from '../../../web3/UI/TokenAmountPanel'
 import { PluginTraderMessages } from '../../Trader/messages'
 import type { Coin } from '../../Trader/types'
@@ -25,6 +19,7 @@ import { useDepositCallback } from '../hooks/useDepositCallback'
 import { PluginPoolTogetherMessages } from '../messages'
 import type { Pool } from '../types'
 import { calculateOdds, getPrizePeriod } from '../utils'
+import { useAccount, useFungibleTokenBalance } from '@masknet/plugin-infra/web3'
 
 const rainbow_animation = keyframes`
     0% {
@@ -79,11 +74,11 @@ export function DepositDialog() {
     const { t } = useI18N()
     const { classes } = useStyles()
     const [pool, setPool] = useState<Pool>()
-    const [token, setToken] = useState<FungibleTokenDetailed>()
+    const [token, setToken] = useState<FungibleToken<ChainId, SchemaType>>()
     const [odds, setOdds] = useState<string>()
 
     // context
-    const account = useAccount()
+    const account = useAccount(NetworkPluginID.PLUGIN_EVM)
 
     // #region remote controlled dialog
     const { open, closeDialog: onClose } = useRemoteControlledDialog(
@@ -116,7 +111,7 @@ export function DepositDialog() {
         value: tokenBalance = '0',
         loading: loadingTokenBalance,
         retry: retryLoadTokenBalance,
-    } = useFungibleTokenBalance(token?.type ?? EthereumTokenType.Native, token?.address ?? '')
+    } = useFungibleTokenBalance(NetworkPluginID.PLUGIN_EVM, token?.address ?? '')
     // #endregion
 
     useEffect(() => {
@@ -240,7 +235,7 @@ export function DepositDialog() {
                             }}
                         />
                     </form>
-                    <EthereumWalletConnectedBoundary>
+                    <WalletConnectedBoundary>
                         {isZero(tokenBalance) ? (
                             <ActionButton
                                 className={classes.button}
@@ -255,7 +250,7 @@ export function DepositDialog() {
                             <EthereumERC20TokenApprovedBoundary
                                 amount={amount.toFixed()}
                                 spender={pool.prizePool.address}
-                                token={token?.type === EthereumTokenType.ERC20 ? token : undefined}>
+                                token={token?.schema === SchemaType.ERC20 ? token : undefined}>
                                 <ActionButton
                                     className={classes.button}
                                     fullWidth
@@ -267,7 +262,7 @@ export function DepositDialog() {
                                 </ActionButton>
                             </EthereumERC20TokenApprovedBoundary>
                         )}
-                    </EthereumWalletConnectedBoundary>
+                    </WalletConnectedBoundary>
                     {odds ? (
                         <Grid container direction="column" className={classes.odds}>
                             <Grid item>
diff --git a/packages/mask/src/plugins/PoolTogether/UI/NetworkView.tsx b/packages/mask/src/plugins/PoolTogether/UI/NetworkView.tsx
index 0e06251f70b9..953036169db3 100644
--- a/packages/mask/src/plugins/PoolTogether/UI/NetworkView.tsx
+++ b/packages/mask/src/plugins/PoolTogether/UI/NetworkView.tsx
@@ -1,9 +1,9 @@
-import { NetworkPluginID, useNetworkDescriptor } from '@masknet/plugin-infra/web3'
-import { ChainId, getChainDetailed } from '@masknet/web3-shared-evm'
+import { useNetworkDescriptor } from '@masknet/plugin-infra/web3'
+import { ChainId, chainResolver } from '@masknet/web3-shared-evm'
 import { Typography } from '@mui/material'
 import { makeStyles, useStylesExtends } from '@masknet/theme'
 import { ImageIcon } from '@masknet/shared'
-import { getNetworkColor } from '../utils'
+import { NetworkPluginID } from '@masknet/web3-shared-base'
 
 const useStyles = makeStyles()((theme) => ({
     root: {
@@ -24,15 +24,11 @@ interface NetworkViewProps extends withClasses<never> {
 export const NetworkView = (props: NetworkViewProps) => {
     const classes = useStylesExtends(useStyles(), props)
     const { chainId = ChainId.Mainnet } = props
-    const networkProvider = useNetworkDescriptor(undefined, NetworkPluginID.PLUGIN_EVM)
-
-    const chainDetail = getChainDetailed(chainId)
-    const color = getNetworkColor(chainDetail?.chainId ?? ChainId.Mainnet)
-
+    const networkProvider = useNetworkDescriptor(NetworkPluginID.PLUGIN_EVM)
     return (
-        <Typography variant="subtitle2" color={color} className={classes.root}>
+        <Typography variant="subtitle2" color={chainResolver.chainColor(chainId)} className={classes.root}>
             <ImageIcon classes={{ icon: classes.icon }} icon={networkProvider?.icon} />
-            {chainDetail?.fullName}
+            {chainResolver.chainFullName(chainId)}
         </Typography>
     )
 }
diff --git a/packages/mask/src/plugins/PoolTogether/UI/PoolTogetherView.tsx b/packages/mask/src/plugins/PoolTogether/UI/PoolTogetherView.tsx
index f54e5da1a10e..ebaa7b4b49fa 100644
--- a/packages/mask/src/plugins/PoolTogether/UI/PoolTogetherView.tsx
+++ b/packages/mask/src/plugins/PoolTogether/UI/PoolTogetherView.tsx
@@ -1,6 +1,7 @@
 import { RefreshIcon } from '@masknet/icons'
 import { DarkColor } from '@masknet/theme/base'
 import { ChainId, usePoolTogetherConstants } from '@masknet/web3-shared-evm'
+import { NetworkPluginID } from '@masknet/web3-shared-base'
 import { Box, Card, CardContent, CircularProgress, Paper, Tab, Tabs, Typography } from '@mui/material'
 import { makeStyles } from '@masknet/theme'
 import React, { useState, useEffect } from 'react'
@@ -9,7 +10,7 @@ import { usePool, usePools } from '../hooks/usePools'
 import type { Pool } from '../types'
 import { Account } from './Account'
 import { PoolsView } from './PoolsView'
-import { EthereumChainBoundary } from '../../../web3/UI/EthereumChainBoundary'
+import { ChainBoundary } from '../../../web3/UI/ChainBoundary'
 
 const useStyles = makeStyles()((theme) => ({
     root: {
@@ -147,9 +148,10 @@ export function PoolTogetherView(props: PoolTogetherViewProps) {
                 </CardContent>
             </Card>
             <Box style={{ padding: 12 }}>
-                <EthereumChainBoundary
-                    chainId={ChainId.Mainnet}
-                    isValidChainId={(chainId) => [ChainId.Mainnet, ChainId.Matic].includes(chainId)}
+                <ChainBoundary
+                    expectedPluginID={NetworkPluginID.PLUGIN_EVM}
+                    expectedChainId={ChainId.Mainnet}
+                    predicate={(pluginId, chainId) => [ChainId.Mainnet, ChainId.Matic].includes(chainId)}
                     renderInTimeline
                 />
             </Box>
diff --git a/packages/mask/src/plugins/PoolTogether/UI/PoolView.tsx b/packages/mask/src/plugins/PoolTogether/UI/PoolView.tsx
index 883d734b2ab1..99c9c73bec7f 100644
--- a/packages/mask/src/plugins/PoolTogether/UI/PoolView.tsx
+++ b/packages/mask/src/plugins/PoolTogether/UI/PoolView.tsx
@@ -2,7 +2,6 @@ import { first } from 'lodash-unified'
 import type { Pool } from '../types'
 import { Typography, Grid, CircularProgress, Button } from '@mui/material'
 import { makeStyles } from '@masknet/theme'
-import { useAccount, useChainId, useERC20TokenDetailed } from '@masknet/web3-shared-evm'
 import { RefreshIcon } from '@masknet/icons'
 import { usePoolURL } from '../hooks/usePoolURL'
 import { CountdownView } from './CountdownView'
@@ -13,7 +12,8 @@ import { NetworkView } from './NetworkView'
 import { useI18N } from '../../../utils'
 import { TokenIcon } from '@masknet/shared'
 import { useRemoteControlledDialog } from '@masknet/shared-base-ui'
-import { NetworkPluginID, useCurrentWeb3NetworkPluginID } from '@masknet/plugin-infra/web3'
+import { useChainId, useFungibleToken, useCurrentWeb3NetworkPluginID, useAccount } from '@masknet/plugin-infra/web3'
+import { NetworkPluginID } from '@masknet/web3-shared-base'
 
 const useStyles = makeStyles()((theme) => ({
     root: {
@@ -170,11 +170,11 @@ export function PoolView(props: PoolProps) {
     const { t } = useI18N()
 
     const poolURL = usePoolURL(pool)
-    const chainId = useChainId()
+    const account = useAccount(NetworkPluginID.PLUGIN_EVM)
+    const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
     const [prize, setPrize] = useState('TBD')
     const [period, setPeriod] = useState('Custom Period')
     const currentPluginID = useCurrentWeb3NetworkPluginID()
-    const account = useAccount()
 
     // #region pool token
     const {
@@ -182,7 +182,7 @@ export function PoolView(props: PoolProps) {
         loading: loadingToken,
         retry: retryToken,
         error: errorToken,
-    } = useERC20TokenDetailed(pool.tokens.underlyingToken.address)
+    } = useFungibleToken(NetworkPluginID.PLUGIN_EVM, pool.tokens.underlyingToken.address)
     // #endregion
 
     // #region process data
diff --git a/packages/mask/src/plugins/PoolTogether/apis/index.ts b/packages/mask/src/plugins/PoolTogether/apis/index.ts
index 8071e7237e49..65a7f1c2f7f6 100644
--- a/packages/mask/src/plugins/PoolTogether/apis/index.ts
+++ b/packages/mask/src/plugins/PoolTogether/apis/index.ts
@@ -1,4 +1,5 @@
-import { ChainId, formatBalance } from '@masknet/web3-shared-evm'
+import type { ChainId } from '@masknet/web3-shared-evm'
+import { formatBalance } from '@masknet/web3-shared-base'
 import { API_URL } from '../constants'
 import type { Pool, TokenFaucet } from '../types'
 
diff --git a/packages/mask/src/plugins/PoolTogether/contracts/usePoolTogetherPool.ts b/packages/mask/src/plugins/PoolTogether/contracts/usePoolTogetherPool.ts
index 6cde2c00e6e0..a3e15a469b51 100644
--- a/packages/mask/src/plugins/PoolTogether/contracts/usePoolTogetherPool.ts
+++ b/packages/mask/src/plugins/PoolTogether/contracts/usePoolTogetherPool.ts
@@ -1,8 +1,9 @@
 import type { AbiItem } from 'web3-utils'
 import PoolTogetherPoolABI from '@masknet/web3-contracts/abis/PoolTogetherPool.json'
 import type { PoolTogetherPool } from '@masknet/web3-contracts/types/PoolTogetherPool'
-import { useContract } from '@masknet/web3-shared-evm'
+import { useContract } from '@masknet/plugin-infra/web3-evm'
+import type { ChainId } from '@masknet/web3-shared-evm'
 
-export function usePoolTogetherPoolContract(address?: string) {
-    return useContract<PoolTogetherPool>(address, PoolTogetherPoolABI as AbiItem[])
+export function usePoolTogetherPoolContract(chainId: ChainId, address?: string) {
+    return useContract<PoolTogetherPool>(chainId, address, PoolTogetherPoolABI as AbiItem[])
 }
diff --git a/packages/mask/src/plugins/PoolTogether/contracts/usePoolTogetherTicket.ts b/packages/mask/src/plugins/PoolTogether/contracts/usePoolTogetherTicket.ts
index ebfd8b217d2c..dc068de34a65 100644
--- a/packages/mask/src/plugins/PoolTogether/contracts/usePoolTogetherTicket.ts
+++ b/packages/mask/src/plugins/PoolTogether/contracts/usePoolTogetherTicket.ts
@@ -1,8 +1,9 @@
 import type { AbiItem } from 'web3-utils'
 import PoolTogetherTicketABI from '@masknet/web3-contracts/abis/PoolTogetherTicket.json'
 import type { PoolTogetherTicket } from '@masknet/web3-contracts/types/PoolTogetherTicket'
-import { useContracts } from '@masknet/web3-shared-evm'
+import { useContracts } from '@masknet/plugin-infra/web3-evm'
+import type { ChainId } from '@masknet/web3-shared-evm'
 
-export function usePoolTogetherTicketContracts(addresses: string[]) {
-    return useContracts<PoolTogetherTicket>(addresses, PoolTogetherTicketABI as AbiItem[])
+export function usePoolTogetherTicketContracts(chainId: ChainId, addresses: string[]) {
+    return useContracts<PoolTogetherTicket>(chainId, addresses, PoolTogetherTicketABI as AbiItem[])
 }
diff --git a/packages/mask/src/plugins/PoolTogether/hooks/useAccountBalances.ts b/packages/mask/src/plugins/PoolTogether/hooks/useAccountBalances.ts
index 64e575ac9356..5514bf7435e8 100644
--- a/packages/mask/src/plugins/PoolTogether/hooks/useAccountBalances.ts
+++ b/packages/mask/src/plugins/PoolTogether/hooks/useAccountBalances.ts
@@ -1,19 +1,24 @@
 import { useMemo } from 'react'
-import { useAccount, useMultipleContractSingleData, ZERO_ADDRESS } from '@masknet/web3-shared-evm'
+import { ZERO_ADDRESS } from '@masknet/web3-shared-evm'
 import { usePoolTogetherTicketContracts } from '../contracts/usePoolTogetherTicket'
 import type { PoolTogetherTicket } from '@masknet/web3-contracts/types/PoolTogetherTicket'
 import { useAsyncRetry } from 'react-use'
 import type { AccountPool, Pool } from '../types'
+import { useAccount, useChainId } from '@masknet/plugin-infra/web3'
+import { NetworkPluginID } from '@masknet/web3-shared-base'
+import { useMultipleContractSingleData } from '@masknet/plugin-infra/web3-evm'
 
 /**
  * A callback for getting account balances of ticket pools
  * @param pools
  */
 export function useAccountBalance(pools: Pool[]) {
-    const account = useAccount()
-    const ticketContracts = usePoolTogetherTicketContracts(pools.map((pool) => pool.tokens.ticket.address)).filter(
-        Boolean,
-    ) as PoolTogetherTicket[]
+    const account = useAccount(NetworkPluginID.PLUGIN_EVM)
+    const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
+    const ticketContracts = usePoolTogetherTicketContracts(
+        chainId,
+        pools.map((pool) => pool.tokens.ticket.address),
+    ).filter(Boolean) as PoolTogetherTicket[]
 
     const [results, calls, _, callback] = useMultipleContractSingleData(
         ticketContracts,
diff --git a/packages/mask/src/plugins/PoolTogether/hooks/useDepositCallback.ts b/packages/mask/src/plugins/PoolTogether/hooks/useDepositCallback.ts
index c8b0ae64b8a7..4d6472eefe13 100644
--- a/packages/mask/src/plugins/PoolTogether/hooks/useDepositCallback.ts
+++ b/packages/mask/src/plugins/PoolTogether/hooks/useDepositCallback.ts
@@ -1,6 +1,8 @@
-import { EthereumTokenType, FungibleTokenDetailed, TransactionEventType, useAccount } from '@masknet/web3-shared-evm'
 import BigNumber from 'bignumber.js'
 import { useAsyncFn } from 'react-use'
+import { TransactionEventType, ChainId, SchemaType } from '@masknet/web3-shared-evm'
+import { FungibleToken, NetworkPluginID } from '@masknet/web3-shared-base'
+import { useAccount, useChainId } from '@masknet/plugin-infra/web3'
 import { usePoolTogetherPoolContract } from '../contracts/usePoolTogetherPool'
 
 /**
@@ -16,11 +18,11 @@ export function useDepositCallback(
     amount: string,
     controlledToken: string,
     referrer: string,
-    token?: FungibleTokenDetailed,
+    token?: FungibleToken<ChainId, SchemaType>,
 ) {
-    const poolContract = usePoolTogetherPoolContract(address)
-
-    const account = useAccount()
+    const account = useAccount(NetworkPluginID.PLUGIN_EVM)
+    const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
+    const poolContract = usePoolTogetherPoolContract(chainId, address)
 
     return useAsyncFn(async () => {
         if (!token || !poolContract) {
@@ -30,7 +32,7 @@ export function useDepositCallback(
         // step 1: estimate gas
         const config = {
             from: account,
-            value: new BigNumber(token.type === EthereumTokenType.Native ? amount : 0).toFixed(),
+            value: new BigNumber(token.schema === SchemaType.Native ? amount : 0).toFixed(),
         }
         const estimatedGas = await poolContract.methods
             .depositTo(account, amount, controlledToken, referrer)
diff --git a/packages/mask/src/plugins/PoolTogether/hooks/usePoolURL.ts b/packages/mask/src/plugins/PoolTogether/hooks/usePoolURL.ts
index 407c9ed6460a..8a30ef81de0d 100644
--- a/packages/mask/src/plugins/PoolTogether/hooks/usePoolURL.ts
+++ b/packages/mask/src/plugins/PoolTogether/hooks/usePoolURL.ts
@@ -1,9 +1,11 @@
-import { ChainId, useChainId } from '@masknet/web3-shared-evm'
+import { useChainId } from '@masknet/plugin-infra/web3'
+import { NetworkPluginID } from '@masknet/web3-shared-base'
+import { ChainId } from '@masknet/web3-shared-evm'
 import { APP_URL, COMMUNITY_URL } from '../constants'
 import type { Pool } from '../types'
 
 export function usePoolURL(pool: Pool) {
-    const chainId = useChainId()
+    const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
     const chainName = (ChainId[chainId] as keyof typeof ChainId).toLowerCase()
 
     return pool.isCommunityPool
@@ -12,7 +14,7 @@ export function usePoolURL(pool: Pool) {
 }
 
 export function useManagePoolURL(pool: Pool) {
-    const chainId = useChainId()
+    const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
     const chainName = (ChainId[chainId] as keyof typeof ChainId).toLowerCase()
 
     return pool.isCommunityPool
diff --git a/packages/mask/src/plugins/PoolTogether/hooks/usePools.ts b/packages/mask/src/plugins/PoolTogether/hooks/usePools.ts
index d3f1a53f5e07..04fb342a8257 100644
--- a/packages/mask/src/plugins/PoolTogether/hooks/usePools.ts
+++ b/packages/mask/src/plugins/PoolTogether/hooks/usePools.ts
@@ -1,19 +1,22 @@
-import { createContract, formatBalance, useChainId, useWeb3 } from '@masknet/web3-shared-evm'
+import { createContract } from '@masknet/web3-shared-evm'
 import { useAsyncRetry } from 'react-use'
 import { usePoolTogetherPoolContract } from '../contracts/usePoolTogetherPool'
 import { PluginPooltogetherRPC } from '../messages'
 import PoolTogetherPrizeStrategyABI from '@masknet/web3-contracts/abis/PoolTogetherPrizeStrategy.json'
 import type { PoolTogetherPrizeStrategy } from '@masknet/web3-contracts/types/PoolTogetherPrizeStrategy'
 import type { AbiItem } from 'web3-utils'
+import { useChainId, useWeb3 } from '@masknet/plugin-infra/web3'
+import { NetworkPluginID, formatBalance } from '@masknet/web3-shared-base'
 
 export function usePools() {
-    const chainId = useChainId()
+    const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
     return useAsyncRetry(() => PluginPooltogetherRPC.fetchPools(chainId), [chainId])
 }
 
 export function usePool(address: string | undefined, subgraphUrl: string | undefined, isCommunityPool: boolean) {
-    const poolContract = usePoolTogetherPoolContract(address)
-    const web3 = useWeb3()
+    const web3 = useWeb3(NetworkPluginID.PLUGIN_EVM)
+    const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
+    const poolContract = usePoolTogetherPoolContract(chainId, address)
 
     return useAsyncRetry(async () => {
         if (!address || !subgraphUrl || !poolContract) return undefined
diff --git a/packages/mask/src/plugins/PoolTogether/messages.ts b/packages/mask/src/plugins/PoolTogether/messages.ts
index 5e6e92fc23f3..e2792423f198 100644
--- a/packages/mask/src/plugins/PoolTogether/messages.ts
+++ b/packages/mask/src/plugins/PoolTogether/messages.ts
@@ -1,5 +1,6 @@
-import type { ERC20TokenDetailed } from '@masknet/web3-shared-evm'
 import { createPluginMessage, PluginMessageEmitter, createPluginRPC } from '@masknet/plugin-infra'
+import type { FungibleToken } from '@masknet/web3-shared-base'
+import type { ChainId, SchemaType } from '@masknet/web3-shared-evm'
 import { POOLTOGETHER_PLUGIN_ID } from './constants'
 import type { Pool } from './types'
 
@@ -7,7 +8,7 @@ type DepositDialogUpdated =
     | {
           open: true
           pool: Pool
-          token: ERC20TokenDetailed
+          token: FungibleToken<ChainId, SchemaType>
       }
     | {
           open: false
diff --git a/packages/mask/src/plugins/Profile/SNSAdaptor/WalletsPage.tsx b/packages/mask/src/plugins/Profile/SNSAdaptor/WalletsPage.tsx
deleted file mode 100644
index e64bc48591af..000000000000
--- a/packages/mask/src/plugins/Profile/SNSAdaptor/WalletsPage.tsx
+++ /dev/null
@@ -1,128 +0,0 @@
-import { useMemo } from 'react'
-import { Trans } from 'react-i18next'
-import { useCopyToClipboard } from 'react-use'
-import { Copy, ExternalLink } from 'react-feather'
-import { RewardIcon } from '@masknet/icons'
-import { makeStyles } from '@masknet/theme'
-import { WalletMessages } from '@masknet/plugin-wallet'
-import { NetworkPluginID, useNetworkDescriptor } from '@masknet/plugin-infra/web3'
-import { ImageIcon, useSnackbarCallback } from '@masknet/shared'
-import { useRemoteControlledDialog } from '@masknet/shared-base-ui'
-import { formatEthereumAddress, resolveAddressLinkOnExplorer, useChainId, useWallets } from '@masknet/web3-shared-evm'
-import { Button, Link, List, ListItem, ListItemIcon, ListItemText, Typography } from '@mui/material'
-import { useI18N } from '../../../utils'
-
-const useStyles = makeStyles()((theme) => ({
-    root: {
-        justifyContent: 'center',
-        alignItems: 'center',
-        display: 'flex',
-        flexDirection: 'column',
-    },
-    connect: {
-        borderRadius: 9999,
-        marginTop: 32,
-    },
-    message: {
-        marginTop: 32,
-    },
-    icon: {
-        width: 20,
-        height: 20,
-        minWidth: 'unset',
-        marginRight: theme.spacing(1),
-    },
-
-    link: {
-        color: theme.palette.text.secondary,
-        fontSize: 14,
-        display: 'flex',
-        alignItems: 'center',
-    },
-    linkIcon: {
-        marginLeft: theme.spacing(1),
-    },
-    address: {
-        display: 'flex',
-    },
-}))
-export function WalletsPage() {
-    const { classes } = useStyles()
-    const { t } = useI18N()
-    const chainId = useChainId()
-    const wallets = useWallets()
-    const networkDescriptor = useNetworkDescriptor(undefined, NetworkPluginID.PLUGIN_EVM)
-    const { openDialog: openSelectWalletDialog } = useRemoteControlledDialog(
-        WalletMessages.events.walletStatusDialogUpdated,
-    )
-
-    // #region copy addr to clipboard
-    const [, copyToClipboard] = useCopyToClipboard()
-    const onCopy = useSnackbarCallback({
-        executor: async (ev: React.MouseEvent<HTMLAnchorElement>, address) => copyToClipboard(address),
-        deps: [],
-        successText: t('copy_success_of_wallet_addr'),
-    })
-    // #endregion
-
-    const walletsList = useMemo(() => {
-        return (
-            <List>
-                {wallets.map((wallet, i) => (
-                    <ListItem key={i}>
-                        <ListItemIcon className={classes.icon}>
-                            <ImageIcon size={20} icon={networkDescriptor?.icon} />
-                        </ListItemIcon>
-                        <ListItemIcon className={classes.address}>
-                            <Typography variant="body1" color="textPrimary">
-                                {formatEthereumAddress(wallet.address, 4)}
-                            </Typography>
-                            <Link
-                                className={classes.link}
-                                underline="none"
-                                component="button"
-                                title="Copy Address"
-                                onClick={(e: React.MouseEvent<HTMLAnchorElement>) => onCopy(e, wallet.address)}>
-                                <Copy className={classes.linkIcon} size={14} />
-                            </Link>
-                            <Link
-                                className={classes.link}
-                                href={resolveAddressLinkOnExplorer(chainId, wallet.address)}
-                                target="_blank"
-                                title="View on Explorer"
-                                rel="noopener noreferrer">
-                                <ExternalLink className={classes.linkIcon} size={14} />
-                            </Link>
-                        </ListItemIcon>
-                        <ListItemText />
-                        <ListItemIcon>
-                            <RewardIcon />
-                            {t('tip')}
-                        </ListItemIcon>
-                    </ListItem>
-                ))}
-            </List>
-        )
-    }, [wallets])
-
-    return (
-        <>
-            {wallets.length === 0 ? (
-                <div className={classes.root}>
-                    <Typography variant="body1" color="textPrimary" align="center" className={classes.message}>
-                        <Trans i18nKey="plugin_profile_no_wallets" />
-                    </Typography>
-                    <Button
-                        className={classes.connect}
-                        size="small"
-                        variant="contained"
-                        onClick={openSelectWalletDialog}>
-                        {t('plugin_wallet_on_connect')}
-                    </Button>
-                </div>
-            ) : (
-                walletsList
-            )}
-        </>
-    )
-}
diff --git a/packages/mask/src/plugins/Profile/SNSAdaptor/index.ts b/packages/mask/src/plugins/Profile/SNSAdaptor/index.ts
deleted file mode 100644
index cbabb7a159eb..000000000000
--- a/packages/mask/src/plugins/Profile/SNSAdaptor/index.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import type { Plugin } from '@masknet/plugin-infra'
-import { base } from '../base'
-
-const sns: Plugin.SNSAdaptor.Definition = {
-    ...base,
-    init(signal) {},
-}
-
-export default sns
diff --git a/packages/mask/src/plugins/Profile/Worker/index.ts b/packages/mask/src/plugins/Profile/Worker/index.ts
deleted file mode 100644
index 824d930b57e1..000000000000
--- a/packages/mask/src/plugins/Profile/Worker/index.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import type { Plugin } from '@masknet/plugin-infra'
-import { base } from '../base'
-import '../messages'
-
-const worker: Plugin.Worker.Definition = {
-    ...base,
-    init(signal) {},
-}
-export default worker
diff --git a/packages/mask/src/plugins/Profile/base.ts b/packages/mask/src/plugins/Profile/base.ts
deleted file mode 100644
index 17ac9541c9e6..000000000000
--- a/packages/mask/src/plugins/Profile/base.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { PLUGIN_ID } from './constants'
-import { CurrentSNSNetwork, Plugin } from '@masknet/plugin-infra'
-
-export const base: Plugin.Shared.Definition = {
-    ID: PLUGIN_ID,
-    name: { fallback: 'Profile' },
-    description: {
-        fallback: 'Improve profile.',
-    },
-    publisher: { name: { fallback: 'Mask Network' }, link: 'https://mask.io/' },
-    enableRequirement: {
-        architecture: { app: true, web: true },
-        networks: { type: 'opt-in', networks: { [CurrentSNSNetwork.Twitter]: true } },
-        target: 'stable',
-    },
-}
diff --git a/packages/mask/src/plugins/Profile/constants.ts b/packages/mask/src/plugins/Profile/constants.ts
deleted file mode 100644
index 155836f6b955..000000000000
--- a/packages/mask/src/plugins/Profile/constants.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import { PluginId } from '@masknet/plugin-infra'
-
-export const PLUGIN_ID = PluginId.Profile
-export const PLUGIN_NAME = 'Profile'
-export const PLUGIN_DESCRIPTION = 'Profile'
diff --git a/packages/mask/src/plugins/Profile/index.ts b/packages/mask/src/plugins/Profile/index.ts
deleted file mode 100644
index eb51ba0afe25..000000000000
--- a/packages/mask/src/plugins/Profile/index.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { registerPlugin } from '@masknet/plugin-infra'
-import { base } from './base'
-
-registerPlugin({
-    ...base,
-    SNSAdaptor: {
-        load: () => import('./SNSAdaptor'),
-        hotModuleReload: (hot) =>
-            import.meta.webpackHot && import.meta.webpackHot.accept('./SNSAdaptor', () => hot(import('./SNSAdaptor'))),
-    },
-    Worker: {
-        load: () => import('./Worker'),
-        hotModuleReload: (hot) =>
-            import.meta.webpackHot && import.meta.webpackHot.accept('./Worker', () => hot(import('./Worker'))),
-    },
-})
diff --git a/packages/mask/src/plugins/Profile/messages.ts b/packages/mask/src/plugins/Profile/messages.ts
deleted file mode 100644
index 82acf8d7c337..000000000000
--- a/packages/mask/src/plugins/Profile/messages.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { createPluginMessage, PluginMessageEmitter, createPluginRPC } from '@masknet/plugin-infra'
-import { PLUGIN_ID } from './constants'
-
-interface ProfileMessages {
-    rpc: unknown
-}
-
-export const PluginProfileMessages: PluginMessageEmitter<ProfileMessages> = createPluginMessage(PLUGIN_ID)
-export const PluginProfileRPC = createPluginRPC(PLUGIN_ID, () => import('./services'), PluginProfileMessages.rpc)
diff --git a/packages/mask/src/plugins/Profile/services.ts b/packages/mask/src/plugins/Profile/services.ts
deleted file mode 100644
index 810fd057564d..000000000000
--- a/packages/mask/src/plugins/Profile/services.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import urlcat from 'urlcat'
-
-interface NameInfo {
-    rnsName: string
-    ensName: string | null
-    address: string
-}
-
-export async function getRSS3AddressById(id: string) {
-    if (!id) return ''
-    const url = urlcat('https://rss3.domains/name/:id', { id })
-    const rsp = (await (await fetch(url)).json()) as NameInfo
-    return rsp.address
-}
diff --git a/packages/mask/src/plugins/Profile/types.ts b/packages/mask/src/plugins/Profile/types.ts
deleted file mode 100644
index c30c4f968f9d..000000000000
--- a/packages/mask/src/plugins/Profile/types.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-export enum PageTags {
-    WalletTag = 'Wallets',
-    NFTTag = 'NFTs',
-    DonationTag = 'Donations',
-    FootprintTag = 'Footprints',
-    DAOTag = 'DAO',
-}
diff --git a/packages/mask/src/plugins/RedPacket/SNSAdaptor/NftList.tsx b/packages/mask/src/plugins/RedPacket/SNSAdaptor/NftList.tsx
index ba5f31bf2a4f..9438384321da 100644
--- a/packages/mask/src/plugins/RedPacket/SNSAdaptor/NftList.tsx
+++ b/packages/mask/src/plugins/RedPacket/SNSAdaptor/NftList.tsx
@@ -1,10 +1,11 @@
 import { makeStyles, MaskColorVar } from '@masknet/theme'
-import { ERC721ContractDetailed, formatNFT_TokenId } from '@masknet/web3-shared-evm'
+import { ChainId, formatTokenId, SchemaType } from '@masknet/web3-shared-evm'
 import { List, ListItem, ListProps, Typography } from '@mui/material'
 import classnames from 'classnames'
 import { FC, HTMLProps, useState } from 'react'
+import { useI18N } from '../../../utils'
 import { NFTCardStyledAssetPlayer } from '@masknet/shared'
-import { useI18N } from '../locales'
+import type { NonFungibleTokenContract } from '@masknet/web3-shared-base'
 
 const useStyles = makeStyles()((theme) => {
     const smallQuery = `@media (max-width: ${theme.breakpoints.values.sm}px)`
@@ -92,16 +93,16 @@ const useStyles = makeStyles()((theme) => {
 })
 
 interface NftItemProps extends HTMLProps<HTMLDivElement> {
-    contract: ERC721ContractDetailed
+    contract: NonFungibleTokenContract<ChainId, SchemaType>
     tokenId: string
     claimed?: boolean
     renderOrder: number
 }
 
 export const NftItem: FC<NftItemProps> = ({ contract, tokenId, className, claimed, renderOrder, ...rest }) => {
-    const t = useI18N()
+    const { t } = useI18N()
     const { classes } = useStyles()
-    const [name, setName] = useState(formatNFT_TokenId(tokenId, 2))
+    const [name, setName] = useState(formatTokenId(tokenId, 2))
 
     return (
         <div className={classnames(className, classes.nft)} {...rest}>
@@ -116,13 +117,13 @@ export const NftItem: FC<NftItemProps> = ({ contract, tokenId, className, claime
                 setERC721TokenName={setName}
             />
             <Typography className={classes.name}>{name}</Typography>
-            {claimed && <Typography className={classes.claimedBadge}>{t.claimed()}</Typography>}
+            {claimed && <Typography className={classes.claimedBadge}>{t('plugin_red_packet_claimed')}</Typography>}
         </div>
     )
 }
 
 interface NftListProps extends ListProps {
-    contract: ERC721ContractDetailed
+    contract: NonFungibleTokenContract<ChainId, SchemaType>
     statusList: boolean[]
     tokenIds: string[]
 }
diff --git a/packages/mask/src/plugins/RedPacket/SNSAdaptor/NftRedPacketHistoryItem.tsx b/packages/mask/src/plugins/RedPacket/SNSAdaptor/NftRedPacketHistoryItem.tsx
index 1b767ead5a4f..4c74fe141a75 100644
--- a/packages/mask/src/plugins/RedPacket/SNSAdaptor/NftRedPacketHistoryItem.tsx
+++ b/packages/mask/src/plugins/RedPacket/SNSAdaptor/NftRedPacketHistoryItem.tsx
@@ -5,7 +5,9 @@ import { TokenIcon } from '@masknet/shared'
 import { useRemoteControlledDialog } from '@masknet/shared-base-ui'
 import { makeStyles } from '@masknet/theme'
 import { WalletMessages } from '@masknet/plugin-wallet'
-import { ERC721ContractDetailed, useAccount, useERC721ContractDetailed } from '@masknet/web3-shared-evm'
+import { NetworkPluginID, NonFungibleTokenContract } from '@masknet/web3-shared-base'
+import { useAccount, useNonFungibleTokenContract } from '@masknet/plugin-infra/web3'
+import type { ChainId, SchemaType } from '@masknet/web3-shared-evm'
 import { Box, ListItem, Typography } from '@mui/material'
 import ActionButton from '../../../extension/options-page/DashboardComponents/ActionButton'
 import { dateTimeFormat } from '../../ITO/assets/formatDate'
@@ -142,25 +144,28 @@ const useStyles = makeStyles()((theme) => {
 
 export interface NftRedPacketHistoryItemProps {
     history: NftRedPacketHistory
-    onSend: (history: NftRedPacketHistory, contract: ERC721ContractDetailed) => void
+    onSend: (history: NftRedPacketHistory, contract: NonFungibleTokenContract<ChainId, SchemaType.ERC721>) => void
     onShowPopover: (anchorEl: HTMLElement, text: string) => void
     onHidePopover: () => void
 }
 export const NftRedPacketHistoryItem: FC<NftRedPacketHistoryItemProps> = memo(
     ({ history, onSend, onShowPopover, onHidePopover }) => {
-        const account = useAccount()
+        const account = useAccount(NetworkPluginID.PLUGIN_EVM)
         const t = useI18N()
         const { classes } = useStyles()
         const {
             computed: { canSend, isPasswordValid },
         } = useNftAvailabilityComputed(account, history.payload)
-        const { value: contractDetailed } = useERC721ContractDetailed(history.token_contract.address)
+        const { value: contractDetailed } = useNonFungibleTokenContract(
+            NetworkPluginID.PLUGIN_EVM,
+            history.token_contract.address,
+        )
         const { closeDialog: closeApplicationBoardDialog } = useRemoteControlledDialog(
             WalletMessages.events.ApplicationDialogUpdated,
         )
         const handleSend = useCallback(() => {
             if (!(canSend && contractDetailed && isPasswordValid)) return
-            onSend(history, contractDetailed)
+            onSend(history, contractDetailed as NonFungibleTokenContract<ChainId, SchemaType.ERC721>)
             closeApplicationBoardDialog()
         }, [onSend, closeApplicationBoardDialog, canSend, history, contractDetailed, isPasswordValid])
 
@@ -224,12 +229,7 @@ export const NftRedPacketHistoryItem: FC<NftRedPacketHistoryItemProps> = memo(
                         </section>
                         <section className={classes.nftList}>
                             <NftList
-                                contract={
-                                    {
-                                        address: history.token_contract.address,
-                                        chainId: history.token_contract.chain_id,
-                                    } as ERC721ContractDetailed
-                                }
+                                contract={history.token_contract}
                                 statusList={bitStatusList}
                                 tokenIds={history.token_ids}
                             />
diff --git a/packages/mask/src/plugins/RedPacket/SNSAdaptor/NftRedPacketHistoryList.tsx b/packages/mask/src/plugins/RedPacket/SNSAdaptor/NftRedPacketHistoryList.tsx
index dc8e88b63923..d7b2425ac5e3 100644
--- a/packages/mask/src/plugins/RedPacket/SNSAdaptor/NftRedPacketHistoryList.tsx
+++ b/packages/mask/src/plugins/RedPacket/SNSAdaptor/NftRedPacketHistoryList.tsx
@@ -1,7 +1,9 @@
 import { useScrollBottomEvent } from '@masknet/shared-base-ui'
 import { makeStyles } from '@masknet/theme'
 import classNames from 'classnames'
-import { ERC721ContractDetailed, useAccount, useChainId, ChainId } from '@masknet/web3-shared-evm'
+import { useAccount, useChainId } from '@masknet/plugin-infra/web3'
+import { NetworkPluginID, NonFungibleTokenContract } from '@masknet/web3-shared-base'
+import { ChainId, SchemaType } from '@masknet/web3-shared-evm'
 import { List, Popper, Typography } from '@mui/material'
 import { useRef, useState } from 'react'
 import type { NftRedPacketHistory } from '../types'
@@ -76,15 +78,15 @@ const useStyles = makeStyles<void, 'atBottom'>()((theme, _, refs) => {
 })
 
 interface Props {
-    onSend: (history: NftRedPacketHistory, contract: ERC721ContractDetailed) => void
+    onSend: (history: NftRedPacketHistory, contract: NonFungibleTokenContract<ChainId, SchemaType.ERC721>) => void
 }
 
 export function NftRedPacketHistoryList({ onSend }: Props) {
     const { classes } = useStyles()
     const { t: tr } = useBaseI18n()
     const t = useI18N()
-    const account = useAccount()
-    const chainId = useChainId()
+    const account = useAccount(NetworkPluginID.PLUGIN_EVM)
+    const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
     const { histories, fetchMore, loading } = useNftRedPacketHistory(account, chainId)
     const containerRef = useRef(null)
     const [popperText, setPopperText] = useState('')
diff --git a/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacket/OperationFooter.tsx b/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacket/OperationFooter.tsx
index 06e1d7d1f0b7..70336182ee5b 100644
--- a/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacket/OperationFooter.tsx
+++ b/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacket/OperationFooter.tsx
@@ -1,13 +1,15 @@
-import { PluginWalletConnectIcon, SharedIcon } from '@masknet/icons'
+import { useAccount, useChainId } from '@masknet/plugin-infra/web3'
 import { WalletMessages } from '@masknet/plugin-wallet'
 import { useRemoteControlledDialog } from '@masknet/shared-base-ui'
-import { ChainId, useAccount, useChainIdValid } from '@masknet/web3-shared-evm'
+import { NetworkPluginID } from '@masknet/web3-shared-base'
+import { ChainId } from '@masknet/web3-shared-evm'
 import { Box, useTheme } from '@mui/material'
+import { SharedIcon, PluginWalletConnectIcon } from '@masknet/icons'
 import ActionButton from '../../../../extension/options-page/DashboardComponents/ActionButton'
-import { EthereumChainBoundary } from '../../../../web3/UI/EthereumChainBoundary'
 import { useI18N as useBaseI18n } from '../../../../utils'
-import { EthereumWalletConnectedBoundary } from '../../../../web3/UI/EthereumWalletConnectedBoundary'
 import { useI18N } from '../../locales'
+import { ChainBoundary } from '../../../../web3/UI/ChainBoundary'
+import { WalletConnectedBoundary } from '../../../../web3/UI/WalletConnectedBoundary'
 import { useStyles } from './useStyles'
 
 interface OperationFooterProps {
@@ -31,8 +33,8 @@ export function OperationFooter({
     const { classes } = useStyles()
     const { t: tr } = useBaseI18n()
     const t = useI18N()
-    const account = useAccount()
-    const chainIdValid = useChainIdValid()
+    const account = useAccount(NetworkPluginID.PLUGIN_EVM)
+    const chainIdValid = useChainId(NetworkPluginID.PLUGIN_EVM)
     const theme = useTheme()
 
     // #region remote controlled select provider dialog
@@ -82,13 +84,16 @@ export function OperationFooter({
 
     return (
         <Box style={{ flex: 1, padding: 12 }}>
-            <EthereumChainBoundary chainId={chainId ?? ChainId.Mainnet} renderInTimeline>
-                <EthereumWalletConnectedBoundary
+            <ChainBoundary
+                expectedPluginID={NetworkPluginID.PLUGIN_EVM}
+                expectedChainId={chainId ?? ChainId.Mainnet}
+                renderInTimeline>
+                <WalletConnectedBoundary
                     hideRiskWarningConfirmed
                     startIcon={<PluginWalletConnectIcon style={{ fontSize: 18 }} />}
                     renderInTimeline
                     classes={{
-                        button: classes.walletButton,
+                        connectWallet: classes.connectWallet,
                     }}>
                     <Box className={classes.footer}>
                         {canRefund ? null : (
@@ -110,8 +115,8 @@ export function OperationFooter({
                         )}
                         <ObtainButton />
                     </Box>
-                </EthereumWalletConnectedBoundary>
-            </EthereumChainBoundary>
+                </WalletConnectedBoundary>
+            </ChainBoundary>
         </Box>
     )
 }
diff --git a/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacket/index.tsx b/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacket/index.tsx
index d1f52642f190..7ce2df4920d3 100644
--- a/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacket/index.tsx
+++ b/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacket/index.tsx
@@ -1,29 +1,23 @@
-import { useOpenShareTxDialog } from '@masknet/shared'
-import {
-    ChainId,
-    formatBalance,
-    getChainIdFromName,
-    resolveNetworkName,
-    useAccount,
-    useNetworkType,
-    useWeb3,
-} from '@masknet/web3-shared-evm'
-import { Card, Typography } from '@mui/material'
 import classNames from 'classnames'
 import { useCallback, useMemo } from 'react'
+import { Card, Typography } from '@mui/material'
+import { ChainId, chainResolver, networkResolver } from '@masknet/web3-shared-evm'
+import { useOpenShareTxDialog } from '@masknet/shared'
 import { usePostLink } from '../../../../components/DataSource/usePostInfo'
 import { activatedSocialNetworkUI } from '../../../../social-network'
 import { isFacebook } from '../../../../social-network-adaptor/facebook.com/base'
 import { isTwitter } from '../../../../social-network-adaptor/twitter.com/base'
 import { useI18N as useBaseI18n } from '../../../../utils'
 import { useI18N } from '../../locales'
-import type { RedPacketAvailability, RedPacketJSONPayload } from '../../types'
+import type { RedPacketJSONPayload } from '../../types'
 import { RedPacketStatus } from '../../types'
 import { useAvailabilityComputed } from '../hooks/useAvailabilityComputed'
 import { useClaimCallback } from '../hooks/useClaimCallback'
 import { useRefundCallback } from '../hooks/useRefundCallback'
 import { OperationFooter } from './OperationFooter'
 import { useStyles } from './useStyles'
+import { NetworkPluginID, formatBalance } from '@masknet/web3-shared-base'
+import { useAccount, useNetworkType, useWeb3 } from '@masknet/plugin-infra/web3'
 
 export interface RedPacketProps {
     payload: RedPacketJSONPayload
@@ -37,9 +31,9 @@ export function RedPacket(props: RedPacketProps) {
     const { classes } = useStyles()
 
     // context
-    const web3 = useWeb3()
-    const account = useAccount()
-    const networkType = useNetworkType()
+    const web3 = useWeb3(NetworkPluginID.PLUGIN_EVM)
+    const account = useAccount(NetworkPluginID.PLUGIN_EVM)
+    const networkType = useNetworkType(NetworkPluginID.PLUGIN_EVM)
 
     // #region token detailed
     const {
@@ -61,7 +55,7 @@ export function RedPacket(props: RedPacketProps) {
         payload.contract_version,
         account,
         payload.rpid,
-        payload.contract_version > 3 ? web3.eth.accounts.sign(account, payload.password).signature : payload.password,
+        payload.contract_version > 3 ? web3?.eth.accounts.sign(account, payload.password).signature : payload.password,
     )
 
     const shareText = useMemo(() => {
@@ -70,7 +64,7 @@ export function RedPacket(props: RedPacketProps) {
         const shareTextOption = {
             sender: payload.sender.name,
             payload: postLink.toString(),
-            network: resolveNetworkName(networkType),
+            network: networkResolver.networkName(networkType) ?? 'Mainnet',
             account: isTwitter(activatedSocialNetworkUI) ? tr('twitter_account') : tr('facebook_account'),
         }
         if (listOfStatus.includes(RedPacketStatus.claimed) || claimTxHash) {
@@ -110,16 +104,13 @@ export function RedPacket(props: RedPacketProps) {
     }, [canClaim, canRefund, claimCallback, isRefunded, openShareTxDialog])
 
     const myStatus = useMemo(() => {
+        if (!availability) return ''
         if (token && listOfStatus.includes(RedPacketStatus.claimed))
             return t.description_claimed(
-                (availability as RedPacketAvailability).claimed_amount
+                availability.claimed_amount
                     ? {
-                          amount: formatBalance(
-                              (availability as RedPacketAvailability).claimed_amount,
-                              token.decimals,
-                              8,
-                          ),
-                          symbol: token.symbol || '-',
+                          amount: formatBalance(availability.claimed_amount, token.decimals, 8),
+                          symbol: token.symbol,
                       }
                     : { amount: '-', symbol: '-' },
             )
@@ -190,7 +181,7 @@ export function RedPacket(props: RedPacketProps) {
             </Card>
             {listOfStatus.includes(RedPacketStatus.empty) ? null : (
                 <OperationFooter
-                    chainId={getChainIdFromName(payload.network ?? '') ?? ChainId.Mainnet}
+                    chainId={chainResolver.chainId(payload.network ?? '') ?? ChainId.Mainnet}
                     canClaim={canClaim}
                     canRefund={canRefund}
                     isClaiming={isClaiming}
diff --git a/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketConfirmDialog.tsx b/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketConfirmDialog.tsx
index 601ee15fcc2b..29f1cd2773dc 100644
--- a/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketConfirmDialog.tsx
+++ b/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketConfirmDialog.tsx
@@ -1,26 +1,18 @@
 import BigNumber from 'bignumber.js'
 import classNames from 'classnames'
 import { useCallback, useEffect, useMemo, useRef } from 'react'
-import {
-    formatBalance,
-    getChainName,
-    isNativeTokenAddress,
-    resolveTokenLinkOnExplorer,
-    useAccount,
-    useChainId,
-    useNetworkType,
-    useRedPacketConstants,
-    useWeb3,
-} from '@masknet/web3-shared-evm'
+import { chainResolver, explorerResolver, isNativeTokenAddress, useRedPacketConstants } from '@masknet/web3-shared-evm'
 import { Grid, Link, Paper, Typography } from '@mui/material'
 import { makeStyles } from '@masknet/theme'
 import LaunchIcon from '@mui/icons-material/Launch'
 import { FormattedBalance, useOpenShareTxDialog } from '@masknet/shared'
 import ActionButton from '../../../extension/options-page/DashboardComponents/ActionButton'
+import { useI18N } from '../locales'
 import { RedPacketSettings, useCreateCallback } from './hooks/useCreateCallback'
+import { useAccount, useChainId, useNetworkType, useWeb3 } from '@masknet/plugin-infra/web3'
+import { NetworkPluginID, formatBalance } from '@masknet/web3-shared-base'
 import type { RedPacketJSONPayload, RedPacketRecord } from '../types'
 import { RedPacketRPC } from '../messages'
-import { useI18N } from '../locales'
 
 const useStyles = makeStyles()((theme) => ({
     link: {
@@ -85,10 +77,9 @@ export interface ConfirmRedPacketFormProps {
 
 export function RedPacketConfirmDialog(props: ConfirmRedPacketFormProps) {
     const t = useI18N()
-    const { onBack, settings, onClose, onCreated } = props
+    const { onBack, settings, onCreated, onClose } = props
     const { classes } = useStyles()
-    const chainId = useChainId()
-
+    const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
     useEffect(() => {
         if (settings?.token?.chainId !== chainId) onClose()
     }, [chainId, onClose])
@@ -97,9 +88,13 @@ export function RedPacketConfirmDialog(props: ConfirmRedPacketFormProps) {
     // password should remain the same rather than change each time when createState change,
     //  otherwise password in database would be different from creating red-packet.
     const contract_version = 4
-    const web3 = useWeb3()
-    const account = useAccount()
-    const { address: publicKey, privateKey } = useMemo(() => web3.eth.accounts.create(), [])
+    const web3 = useWeb3(NetworkPluginID.PLUGIN_EVM)
+    const account = useAccount(NetworkPluginID.PLUGIN_EVM)
+    const networkType = useNetworkType(NetworkPluginID.PLUGIN_EVM)
+    const { address: publicKey, privateKey } = useMemo(
+        () => web3?.eth.accounts.create() ?? { address: '', privateKey: '' },
+        [web3],
+    )!
     const [{ loading: isCreating }, createCallback] = useCreateCallback(settings!, contract_version, publicKey)
     const openShareTxDialog = useOpenShareTxDialog()
     const createRedpacket = useCallback(async () => {
@@ -139,7 +134,7 @@ export function RedPacketConfirmDialog(props: ConfirmRedPacketFormProps) {
             password: privateKey,
             contract_version,
         }
-        RedPacketRPC.discoverRedPacket(record)
+        RedPacketRPC.discoverRedPacket(record, chainId)
 
         // output the redpacket as JSON payload
         onCreated(payload.current)
@@ -148,11 +143,11 @@ export function RedPacketConfirmDialog(props: ConfirmRedPacketFormProps) {
 
     // assemble JSON payload
     const payload = useRef<RedPacketJSONPayload>({
-        network: getChainName(chainId),
+        network: chainResolver.chainName(chainId),
     } as RedPacketJSONPayload)
 
     const { HAPPY_RED_PACKET_ADDRESS_V4 } = useRedPacketConstants()
-    const networkType = useNetworkType()
+
     useEffect(() => {
         const contractAddress = HAPPY_RED_PACKET_ADDRESS_V4
         if (!contractAddress) {
@@ -161,11 +156,9 @@ export function RedPacketConfirmDialog(props: ConfirmRedPacketFormProps) {
         }
         payload.current.contract_address = contractAddress
         payload.current.contract_version = contract_version
-        payload.current.network = getChainName(chainId)
+        payload.current.network = chainResolver.chainName(chainId)
     }, [chainId, networkType, contract_version])
 
-    // #endregion
-
     return (
         <Grid container spacing={2} className={classNames(classes.grid, classes.gridWrapper)}>
             <Grid item xs={12}>
@@ -185,7 +178,7 @@ export function RedPacketConfirmDialog(props: ConfirmRedPacketFormProps) {
                         <Link
                             color="textPrimary"
                             className={classes.link}
-                            href={resolveTokenLinkOnExplorer(settings?.token!)}
+                            href={explorerResolver.fungibleTokenLink(chainId, settings?.token?.address ?? '')}
                             target="_blank"
                             rel="noopener noreferrer"
                             onClick={stop}>
diff --git a/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketCreateNew.tsx b/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketCreateNew.tsx
index 3ceac4ff3cbd..89315e24f61c 100644
--- a/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketCreateNew.tsx
+++ b/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketCreateNew.tsx
@@ -1,5 +1,7 @@
 import { makeStyles } from '@masknet/theme'
-import { useChainId, ChainId } from '@masknet/web3-shared-evm'
+import { ChainId } from '@masknet/web3-shared-evm'
+import { NetworkPluginID } from '@masknet/web3-shared-base'
+import { useChainId } from '@masknet/plugin-infra/web3'
 import { RedPacketFormProps, RedPacketERC20Form } from './RedPacketERC20Form'
 import { RedPacketERC721Form } from './RedPacketERC721Form'
 import AbstractTab, { AbstractTabProps } from '../../../components/shared/AbstractTab'
@@ -51,7 +53,7 @@ export function RedPacketCreateNew(props: RedPacketFormProps & { state: readonly
     const { origin, onNext, onChange, onClose, state } = props
     const t = useI18N()
     const { classes } = useStyles({ snsId: activatedSocialNetworkUI.networkIdentifier })
-    const chainId = useChainId()
+    const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
 
     const tabProps: AbstractTabProps = {
         tabs: [
diff --git a/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketDialog.tsx b/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketDialog.tsx
index 5e4e92c5d94a..089ff4eb1383 100644
--- a/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketDialog.tsx
+++ b/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketDialog.tsx
@@ -1,10 +1,11 @@
+import { useCallback, useState } from 'react'
 import { useCompositionContext } from '@masknet/plugin-infra/content-script'
+import { useAccount, useChainId, useWeb3Connection } from '@masknet/plugin-infra/web3'
 import { InjectedDialog } from '@masknet/shared'
 import { useRemoteControlledDialog } from '@masknet/shared-base-ui'
 import { makeStyles } from '@masknet/theme'
-import { useAccount, useChainId } from '@masknet/web3-shared-evm'
+import { NetworkPluginID } from '@masknet/web3-shared-base'
 import { DialogContent } from '@mui/material'
-import { useCallback, useState } from 'react'
 import Web3Utils from 'web3-utils'
 import {
     useCurrentIdentity,
@@ -12,7 +13,6 @@ import {
     useLastRecognizedIdentity,
 } from '../../../components/DataSource/useActivatedUI'
 import AbstractTab, { AbstractTabProps } from '../../../components/shared/AbstractTab'
-import Services from '../../../extension/service'
 import { useI18N } from '../locales'
 import { WalletMessages } from '../../Wallet/messages'
 import { RedPacketMetaKey } from '../constants'
@@ -64,12 +64,12 @@ interface RedPacketDialogProps extends withClasses<never> {
 
 export default function RedPacketDialog(props: RedPacketDialogProps) {
     const t = useI18N()
-    const chainId = useChainId()
-    const account = useAccount()
     const { classes } = useStyles()
     const { attachMetadata, dropMetadata } = useCompositionContext()
     const state = useState(DialogTabs.create)
-
+    const connection = useWeb3Connection(NetworkPluginID.PLUGIN_EVM)
+    const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
+    const account = useAccount(NetworkPluginID.PLUGIN_EVM)
     const [settings, setSettings] = useState<RedPacketSettings>()
 
     const onClose = useCallback(() => {
@@ -81,9 +81,8 @@ export default function RedPacketDialog(props: RedPacketDialogProps) {
     }, [props, state])
 
     const currentIdentity = useCurrentIdentity()
-
-    const { value: linkedPersona } = useCurrentLinkedPersona()
     const lastRecognized = useLastRecognizedIdentity()
+    const { value: linkedPersona } = useCurrentLinkedPersona()
     const senderName =
         lastRecognized.identifier?.userId ?? currentIdentity?.identifier.userId ?? linkedPersona?.nickname
     const { closeDialog: closeApplicationBoardDialog } = useRemoteControlledDialog(
@@ -97,9 +96,11 @@ export default function RedPacketDialog(props: RedPacketDialogProps) {
                     payload.password = prompt('Please enter the password of the lucky drop:', '') ?? ''
                 } else if (payload.contract_version > 1 && payload.contract_version < 4) {
                     // just sign out the password if it is lost.
-                    payload.password = await Services.Ethereum.personalSign(
+                    if (!connection) return
+                    payload.password = await connection.signMessage(
                         Web3Utils.sha3(payload.sender.message) ?? '',
-                        account,
+                        'personaSign',
+                        { account },
                     )
                     payload.password = payload.password!.slice(2)
                 }
@@ -112,7 +113,7 @@ export default function RedPacketDialog(props: RedPacketDialogProps) {
             onClose()
             closeApplicationBoardDialog()
         },
-        [onClose, chainId, senderName],
+        [onClose, chainId, senderName, connection],
     )
 
     const [step, setStep] = useState(CreateRedPacketPageStep.NewRedPacketPage)
diff --git a/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketERC20Form.tsx b/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketERC20Form.tsx
index 1055ed3cbb27..7ace50f4b897 100644
--- a/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketERC20Form.tsx
+++ b/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketERC20Form.tsx
@@ -1,15 +1,14 @@
 import { makeStyles, useStylesExtends } from '@masknet/theme'
-import { isGreaterThan, isZero, multipliedBy, rightShift } from '@masknet/web3-shared-base'
 import {
-    EthereumTokenType,
+    FungibleToken,
+    isGreaterThan,
+    isZero,
+    multipliedBy,
+    NetworkPluginID,
+    rightShift,
     formatBalance,
-    FungibleTokenDetailed,
-    useAccount,
-    useChainId,
-    useFungibleTokenBalance,
-    useNativeTokenDetailed,
-    useRedPacketConstants,
-} from '@masknet/web3-shared-evm'
+} from '@masknet/web3-shared-base'
+import { ChainId, SchemaType, useRedPacketConstants } from '@masknet/web3-shared-evm'
 import { FormControl, InputLabel, MenuItem, Select, TextField } from '@mui/material'
 import BigNumber from 'bignumber.js'
 import { omit } from 'lodash-unified'
@@ -20,10 +19,11 @@ import ActionButton from '../../../extension/options-page/DashboardComponents/Ac
 import { useI18N } from '../locales'
 import { useI18N as useBaseI18n } from '../../../utils'
 import { EthereumERC20TokenApprovedBoundary } from '../../../web3/UI/EthereumERC20TokenApprovedBoundary'
-import { EthereumWalletConnectedBoundary } from '../../../web3/UI/EthereumWalletConnectedBoundary'
+import { WalletConnectedBoundary } from '../../../web3/UI/WalletConnectedBoundary'
 import { TokenAmountPanel } from '../../../web3/UI/TokenAmountPanel'
 import { RED_PACKET_DEFAULT_SHARES, RED_PACKET_MAX_SHARES, RED_PACKET_MIN_SHARES } from '../constants'
 import type { RedPacketSettings } from './hooks/useCreateCallback'
+import { useAccount, useChainId, useFungibleToken, useFungibleTokenBalance } from '@masknet/plugin-infra/web3'
 
 // seconds of 1 day
 const duration = 60 * 60 * 24
@@ -88,21 +88,25 @@ export function RedPacketERC20Form(props: RedPacketFormProps) {
     const classes = useStylesExtends(useStyles(), props)
     const { onChange, onNext, origin } = props
     // context
-    const account = useAccount()
-    const chainId = useChainId()
+    const account = useAccount(NetworkPluginID.PLUGIN_EVM)
+    const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
     const { HAPPY_RED_PACKET_ADDRESS_V4 } = useRedPacketConstants()
 
     // #region select token
-    const { value: nativeTokenDetailed } = useNativeTokenDetailed()
-    const [token = nativeTokenDetailed, setToken] = useState<FungibleTokenDetailed | undefined>(origin?.token)
+    const { value: nativeTokenDetailed } = useFungibleToken(NetworkPluginID.PLUGIN_EVM, undefined, { chainId })
+    const [token = nativeTokenDetailed, setToken] = useState<
+        FungibleToken<ChainId, SchemaType.Native | SchemaType.ERC20> | undefined
+    >(origin?.token)
+
     const pickToken = usePickToken()
     const onSelectTokenChipClick = useCallback(async () => {
         const picked = await pickToken({
             disableNativeToken: false,
             selectedTokens: token ? [token.address] : [],
+            chainId,
         })
-        if (picked) setToken(picked)
-    }, [pickToken, token?.address])
+        if (picked) setToken(picked as FungibleToken<ChainId, SchemaType.Native | SchemaType.ERC20>)
+    }, [pickToken, token?.address, chainId])
     // #endregion
 
     // #region packet settings
@@ -140,7 +144,7 @@ export function RedPacketERC20Form(props: RedPacketFormProps) {
     const isDivisible = !totalAmount.dividedBy(shares).isLessThan(1)
 
     useEffect(() => {
-        setToken(nativeTokenDetailed)
+        setToken(nativeTokenDetailed as FungibleToken<ChainId, SchemaType.Native | SchemaType.ERC20>)
     }, [chainId, nativeTokenDetailed])
 
     useEffect(() => {
@@ -149,8 +153,9 @@ export function RedPacketERC20Form(props: RedPacketFormProps) {
 
     // balance
     const { value: tokenBalance = '0', loading: loadingTokenBalance } = useFungibleTokenBalance(
-        token?.type ?? EthereumTokenType.Native,
+        NetworkPluginID.PLUGIN_EVM,
         token?.address ?? '',
+        { chainId },
     )
     // #endregion
 
@@ -177,10 +182,12 @@ export function RedPacketERC20Form(props: RedPacketFormProps) {
             name: senderName,
             message: message || t.best_wishes(),
             shares: shares || 0,
-            token: token ? (omit(token, ['logoURI']) as FungibleTokenDetailed) : undefined,
+            token: token
+                ? (omit(token, ['logoURI']) as FungibleToken<ChainId, SchemaType.ERC20 | SchemaType.Native>)
+                : undefined,
             total: totalAmount.toFixed(),
         }),
-        [isRandom, senderName, message, t.best_wishes(), shares, token, totalAmount],
+        [isRandom, senderName, message, t, shares, token, totalAmount],
     )
 
     const onClick = useCallback(() => {
@@ -272,10 +279,10 @@ export function RedPacketERC20Form(props: RedPacketFormProps) {
                     value={message}
                 />
             </div>
-            <EthereumWalletConnectedBoundary>
+            <WalletConnectedBoundary>
                 <EthereumERC20TokenApprovedBoundary
                     amount={totalAmount.toFixed()}
-                    token={token?.type === EthereumTokenType.ERC20 ? token : undefined}
+                    token={token?.schema === SchemaType.ERC20 ? token : undefined}
                     spender={HAPPY_RED_PACKET_ADDRESS_V4}>
                     <ActionButton
                         variant="contained"
@@ -287,7 +294,7 @@ export function RedPacketERC20Form(props: RedPacketFormProps) {
                         {validationMessage || t.next()}
                     </ActionButton>
                 </EthereumERC20TokenApprovedBoundary>
-            </EthereumWalletConnectedBoundary>
+            </WalletConnectedBoundary>
         </>
     )
 }
diff --git a/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketERC721Form.tsx b/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketERC721Form.tsx
index b53e3f69a5da..159de96d719d 100644
--- a/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketERC721Form.tsx
+++ b/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketERC721Form.tsx
@@ -5,17 +5,9 @@ import { useI18N } from '../locales'
 import classNames from 'classnames'
 import ActionButton from '../../../extension/options-page/DashboardComponents/ActionButton'
 import { ERC721ContractSelectPanel } from '../../../web3/UI/ERC721ContractSelectPanel'
-import { EthereumWalletConnectedBoundary } from '../../../web3/UI/EthereumWalletConnectedBoundary'
+import { WalletConnectedBoundary } from '../../../web3/UI/WalletConnectedBoundary'
 import { EthereumERC721TokenApprovedBoundary } from '../../../web3/UI/EthereumERC721TokenApprovedBoundary'
-import {
-    ERC721ContractDetailed,
-    ERC721TokenDetailed,
-    useAccount,
-    useChainId,
-    useNftRedPacketConstants,
-    formatNFT_TokenId,
-} from '@masknet/web3-shared-evm'
-import { useERC721TokenDetailedOwnerList } from '@masknet/web3-providers'
+import { ChainId, SchemaType, useNftRedPacketConstants, formatTokenId } from '@masknet/web3-shared-evm'
 import CheckIcon from '@mui/icons-material/Check'
 import CloseIcon from '@mui/icons-material/Close'
 import AddCircleOutlineIcon from '@mui/icons-material/AddCircleOutline'
@@ -25,6 +17,9 @@ import { RedpacketNftConfirmDialog } from './RedpacketNftConfirmDialog'
 import { NFTCardStyledAssetPlayer } from '@masknet/shared'
 import { NFTSelectOption } from '../types'
 import { NFT_RED_PACKET_MAX_SHARES } from '../constants'
+import { useAccount, useChainId } from '@masknet/plugin-infra/web3'
+import { useNonFungibleOwnerTokens } from '@masknet/plugin-infra/web3-evm'
+import { NetworkPluginID, NonFungibleTokenContract, NonFungibleToken } from '@masknet/web3-shared-base'
 
 const useStyles = makeStyles()((theme) => {
     return {
@@ -208,9 +203,9 @@ export function RedPacketERC721Form(props: RedPacketERC721FormProps) {
     const [balance, setBalance] = useState(0)
     const [selectOption, setSelectOption] = useState<NFTSelectOption | undefined>(undefined)
     const [openConfirmDialog, setOpenConfirmDialog] = useState(false)
-    const account = useAccount()
-    const chainId = useChainId()
-    const [contract, setContract] = useState<ERC721ContractDetailed>()
+    const account = useAccount(NetworkPluginID.PLUGIN_EVM)
+    const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
+    const [contract, setContract] = useState<NonFungibleTokenContract<ChainId, SchemaType.ERC721>>()
     const [manualSelectedTokenDetailedList, setExistTokenDetailedList] = useState<OrderedERC721Token[]>([])
     const [onceAllSelectedTokenDetailedList, setAllTokenDetailedList] = useState<OrderedERC721Token[]>([])
     const tokenDetailedList =
@@ -220,11 +215,18 @@ export function RedPacketERC721Form(props: RedPacketERC721FormProps) {
         asyncRetry: { loading: loadingOwnerList },
         tokenDetailedOwnerList: _tokenDetailedOwnerList = [],
         clearTokenDetailedOwnerList,
-    } = useERC721TokenDetailedOwnerList(contract, account)
+    } = useNonFungibleOwnerTokens(contract?.address ?? '', account, chainId, balance)
     const tokenDetailedOwnerList = _tokenDetailedOwnerList.map((v, index) => ({ ...v, index } as OrderedERC721Token))
-    const removeToken = useCallback((token: ERC721TokenDetailed) => {
-        setExistTokenDetailedList((list) => list.filter((t) => t.tokenId !== token.tokenId))
-    }, [])
+    const removeToken = useCallback(
+        (token: NonFungibleToken<ChainId, SchemaType.ERC721>) => {
+            ;(selectOption === NFTSelectOption.Partial ? setExistTokenDetailedList : setAllTokenDetailedList)((list) =>
+                list.filter((t) => t.tokenId !== token.tokenId),
+            )
+
+            setSelectOption(NFTSelectOption.Partial)
+        },
+        [selectOption, setSelectOption, setExistTokenDetailedList, setAllTokenDetailedList],
+    )
 
     const maxSelectShares = Math.min(NFT_RED_PACKET_MAX_SHARES, tokenDetailedOwnerList.length)
 
@@ -270,6 +272,7 @@ export function RedPacketERC721Form(props: RedPacketERC721FormProps) {
                 <ERC721ContractSelectPanel
                     contract={contract}
                     onContractChange={setContract}
+                    balance={balance}
                     onBalanceChange={setBalance}
                 />
                 {contract && balance ? (
@@ -343,7 +346,7 @@ export function RedPacketERC721Form(props: RedPacketERC721FormProps) {
                         <Typography className={classes.approveAllTip}>{t.nft_approve_all_tip()}</Typography>
                     </>
                 ) : null}
-                <EthereumWalletConnectedBoundary>
+                <WalletConnectedBoundary>
                     <EthereumERC721TokenApprovedBoundary
                         validationMessage={validationMessage}
                         owner={account}
@@ -358,7 +361,7 @@ export function RedPacketERC721Form(props: RedPacketERC721FormProps) {
                             {t.next()}
                         </ActionButton>
                     </EthereumERC721TokenApprovedBoundary>
-                </EthereumWalletConnectedBoundary>
+                </WalletConnectedBoundary>
             </Box>
             {open ? (
                 <SelectNftTokenDialog
@@ -387,20 +390,20 @@ export function RedPacketERC721Form(props: RedPacketERC721FormProps) {
 
 interface NFTCardProps {
     token: OrderedERC721Token
-    removeToken: (token: ERC721TokenDetailed) => void
+    removeToken: (token: NonFungibleToken<ChainId, SchemaType.ERC721>) => void
     renderOrder: number
 }
 
 function NFTCard(props: NFTCardProps) {
     const { token, removeToken, renderOrder } = props
     const { classes } = useStyles()
-    const [name, setName] = useState(formatNFT_TokenId(token.tokenId, 2))
+    const [name, setName] = useState(formatTokenId(token.tokenId, 2))
     return (
         <ListItem className={classNames(classes.tokenSelectorWrapper)}>
             <NFTCardStyledAssetPlayer
-                contractAddress={token.contractDetailed.address}
-                chainId={token.contractDetailed.chainId}
-                url={token.info.mediaUrl || token.info.imageURL}
+                contractAddress={token.contract?.address}
+                chainId={token.chainId}
+                url={token.metadata?.mediaURL || token.metadata?.imageURL}
                 tokenId={token.tokenId}
                 renderOrder={renderOrder}
                 setERC721TokenName={setName}
diff --git a/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketHistoryList.tsx b/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketHistoryList.tsx
index 9b6b77edcc0a..bb388d57f596 100644
--- a/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketHistoryList.tsx
+++ b/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketHistoryList.tsx
@@ -1,11 +1,11 @@
 import { Typography, List } from '@mui/material'
 import { makeStyles } from '@masknet/theme'
 import type { RedPacketJSONPayload } from '../types'
-import { useAccount, useChainId } from '@masknet/web3-shared-evm'
 import { RedPacketInHistoryList } from './RedPacketInHistoryList'
 import { useRedPacketHistory } from './hooks/useRedPacketHistory'
-import { useEffect } from 'react'
 import { useI18N } from '../../../utils'
+import { useAccount, useChainId } from '@masknet/plugin-infra/web3'
+import { NetworkPluginID } from '@masknet/web3-shared-base'
 
 const useStyles = makeStyles()((theme) => {
     const smallQuery = `@media (max-width: ${theme.breakpoints.values.sm}px)`
@@ -39,13 +39,9 @@ export function RedPacketHistoryList(props: RedPacketHistoryListProps) {
     const { onSelect } = props
     const { t } = useI18N()
     const { classes } = useStyles()
-    const account = useAccount()
-    const chainId = useChainId()
-    const { value: histories, loading, retry } = useRedPacketHistory(account, chainId)
-
-    useEffect(() => {
-        retry()
-    }, [chainId])
+    const account = useAccount(NetworkPluginID.PLUGIN_EVM)
+    const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
+    const { value: histories, loading } = useRedPacketHistory(account, chainId)
 
     if (loading) {
         return (
diff --git a/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketInHistoryList.tsx b/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketInHistoryList.tsx
index 1a2595f81691..e0b38628ba89 100644
--- a/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketInHistoryList.tsx
+++ b/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketInHistoryList.tsx
@@ -1,30 +1,23 @@
-import { TokenIcon } from '@masknet/shared'
-import { makeStyles } from '@masknet/theme'
-import {
-    ERC20TokenDetailed,
-    EthereumTokenType,
-    formatBalance,
-    FungibleTokenDetailed,
-    isSameAddress,
-    NativeTokenDetailed,
-    useAccount,
-    useFungibleTokenDetailed,
-    useTokenConstants,
-} from '@masknet/web3-shared-evm'
-import { Box, ListItem, Popper, Theme, Typography, useMediaQuery } from '@mui/material'
+import { MouseEvent, useCallback, useState } from 'react'
 import BigNumber from 'bignumber.js'
 import classNames from 'classnames'
+import { Box, ListItem, Typography, Popper, useMediaQuery, Theme } from '@mui/material'
+import { makeStyles } from '@masknet/theme'
+import { omit, pick } from 'lodash-unified'
+import { TokenIcon } from '@masknet/shared'
+import { ChainId, SchemaType, useTokenConstants } from '@masknet/web3-shared-evm'
 import intervalToDuration from 'date-fns/intervalToDuration'
 import nextDay from 'date-fns/nextDay'
-import { omit, pick } from 'lodash-unified'
-import { MouseEvent, useCallback, useState } from 'react'
 import ActionButton from '../../../extension/options-page/DashboardComponents/ActionButton'
+import { useI18N as useBaseI18N } from '../../../utils'
 import { Translate, useI18N } from '../locales'
 import { dateTimeFormat } from '../../ITO/assets/formatDate'
 import { StyledLinearProgress } from '../../ITO/SNSAdaptor/StyledLinearProgress'
 import { RedPacketJSONPayload, RedPacketJSONPayloadFromChain, RedPacketStatus } from '../types'
 import { useAvailabilityComputed } from './hooks/useAvailabilityComputed'
 import { useRefundCallback } from './hooks/useRefundCallback'
+import { useAccount, useFungibleToken } from '@masknet/plugin-infra/web3'
+import { formatBalance, FungibleToken, NetworkPluginID } from '@masknet/web3-shared-base'
 
 const useStyles = makeStyles()((theme) => {
     const smallQuery = `@media (max-width: ${theme.breakpoints.values.sm}px)`
@@ -182,10 +175,11 @@ export interface RedPacketInHistoryListProps {
     onSelect: (payload: RedPacketJSONPayload) => void
 }
 export function RedPacketInHistoryList(props: RedPacketInHistoryListProps) {
-    const account = useAccount()
     const { history, onSelect } = props
+    const i18n = useBaseI18N()
     const t = useI18N()
     const { classes } = useStyles()
+    const account = useAccount(NetworkPluginID.PLUGIN_EVM)
     const isSmall = useMediaQuery((theme: Theme) => theme.breakpoints.down('sm'))
     const {
         computed: { canRefund, canSend, listOfStatus, isPasswordValid },
@@ -200,22 +194,19 @@ export function RedPacketInHistoryList(props: RedPacketInHistoryListProps) {
     const tokenAddress =
         (history as RedPacketJSONPayload).token?.address ?? (history as RedPacketJSONPayloadFromChain).token_address
 
-    const { value: tokenDetailed } = useFungibleTokenDetailed(
-        isSameAddress(NATIVE_TOKEN_ADDRESS, tokenAddress) ? EthereumTokenType.Native : EthereumTokenType.ERC20,
-        tokenAddress ?? '',
-    )
+    const { value: tokenDetailed } = useFungibleToken(NetworkPluginID.PLUGIN_EVM, tokenAddress ?? '')
 
     const historyToken = {
         ...pick(tokenDetailed ?? (history as RedPacketJSONPayload).token, ['decimals', 'symbol']),
         address: tokenAddress,
-    } as ERC20TokenDetailed | NativeTokenDetailed
+    } as FungibleToken<ChainId, SchemaType.Native | SchemaType.ERC20>
 
     const onSendOrRefund = useCallback(async () => {
         if (canRefund) {
             await refundCallback()
             revalidateAvailability()
         }
-        if (canSend) onSelect(removeUselessSendParams({ ...history, token: historyToken as FungibleTokenDetailed }))
+        if (canSend) onSelect(removeUselessSendParams({ ...history, token: historyToken }))
     }, [onSelect, refundCallback, canRefund, canSend, history, historyToken])
 
     // #region password lost tips
@@ -238,7 +229,7 @@ export function RedPacketInHistoryList(props: RedPacketInHistoryListProps) {
                     classes={{ icon: classes.icon }}
                     address={historyToken?.address ?? ''}
                     name={historyToken?.name}
-                    logoURI={historyToken?.logoURI}
+                    logoURI={historyToken?.logoURL}
                 />
                 <Box className={classes.content}>
                     <section className={classes.section}>
@@ -257,7 +248,7 @@ export function RedPacketInHistoryList(props: RedPacketInHistoryListProps) {
                             <Typography variant="body1" className={classNames(classes.info, classes.message)}>
                                 {t.history_total_amount({
                                     amount: formatBalance(history.total, historyToken?.decimals, 6),
-                                    symbol: historyToken?.symbol!,
+                                    symbol: historyToken?.symbol,
                                 })}
                             </Typography>
                             <Typography variant="body1" className={classNames(classes.info, classes.message)}>
@@ -319,8 +310,8 @@ export function RedPacketInHistoryList(props: RedPacketInHistoryListProps) {
                                     strong: <strong />,
                                 }}
                                 values={{
-                                    claimedShares: history.claimers?.length.toString() ?? '0',
-                                    shares: history.shares.toString(),
+                                    claimedShares: String(history.claimers?.length ?? 0),
+                                    shares: String(history.shares),
                                 }}
                             />
                         </Typography>
@@ -337,7 +328,7 @@ export function RedPacketInHistoryList(props: RedPacketInHistoryListProps) {
                                         historyToken?.decimals,
                                         6,
                                     ),
-                                    symbol: historyToken?.symbol!,
+                                    symbol: historyToken?.symbol,
                                 }}
                             />
                         </Typography>
@@ -351,6 +342,6 @@ export function RedPacketInHistoryList(props: RedPacketInHistoryListProps) {
 function removeUselessSendParams(payload: RedPacketJSONPayload): RedPacketJSONPayload {
     return {
         ...omit(payload, ['block_number', 'claimers']),
-        token: omit(payload.token, ['logoURI']) as FungibleTokenDetailed,
+        token: omit(payload.token, ['logoURI']) as FungibleToken<ChainId, SchemaType.Native | SchemaType.ERC20>,
     }
 }
diff --git a/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketInPost.tsx b/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketInPost.tsx
index 34b1ccf1126b..81eb67375955 100644
--- a/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketInPost.tsx
+++ b/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketInPost.tsx
@@ -1,9 +1,11 @@
 import { useEffect } from 'react'
-import type { RedPacketJSONPayload, RedPacketRecord } from '../types'
+import { useChainId } from '@masknet/plugin-infra/web3'
+import { NetworkPluginID } from '@masknet/web3-shared-base'
 import { usePostInfoDetails } from '@masknet/plugin-infra/content-script'
 import { RedPacket } from './RedPacket'
 import { RedPacketRPC } from '../messages'
 import { activatedSocialNetworkUI } from '../../../social-network'
+import type { RedPacketJSONPayload, RedPacketRecord } from '../types'
 
 export interface RedPacketInPostProps {
     payload: RedPacketJSONPayload
@@ -11,6 +13,7 @@ export interface RedPacketInPostProps {
 
 export function RedPacketInPost(props: RedPacketInPostProps) {
     const { payload } = props
+    const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
 
     // #region discover red packet
     const postIdentifier = usePostInfoDetails.identifier()
@@ -24,8 +27,8 @@ export function RedPacketInPost(props: RedPacketInPostProps) {
             password: payload.password,
             contract_version: payload.contract_version,
         }
-        RedPacketRPC.discoverRedPacket(record)
-    }, [fromUrl])
+        RedPacketRPC.discoverRedPacket(record, chainId)
+    }, [fromUrl, chainId])
     // #endregion
 
     return <RedPacket payload={payload} />
diff --git a/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketNft.tsx b/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketNft.tsx
index 62b11814cbc8..80900ebd13c4 100644
--- a/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketNft.tsx
+++ b/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketNft.tsx
@@ -1,31 +1,26 @@
-import { PluginWalletConnectIcon, SharedIcon } from '@masknet/icons'
-import { NFTCardStyledAssetPlayer } from '@masknet/shared'
-import { openWindow } from '@masknet/shared-base-ui'
 import { makeStyles } from '@masknet/theme'
-import {
-    resolveAddressLinkOnExplorer,
-    resolveNetworkName,
-    TransactionStateType,
-    useAccount,
-    useNetworkType,
-    useWeb3,
-} from '@masknet/web3-shared-evm'
+import { explorerResolver, TransactionStateType, networkResolver } from '@masknet/web3-shared-evm'
 import LaunchIcon from '@mui/icons-material/Launch'
-import { Box, Button, Card, CardContent, CardHeader, CardMedia, Link, Skeleton, Typography } from '@mui/material'
-import classNames from 'classnames'
+import { Card, CardHeader, Typography, Link, CardMedia, CardContent, Button, Box, Skeleton } from '@mui/material'
 import { useCallback, useEffect, useMemo, useState } from 'react'
-import { usePostLink } from '../../../components/DataSource/usePostInfo'
 import ActionButton from '../../../extension/options-page/DashboardComponents/ActionButton'
-import { activatedSocialNetworkUI } from '../../../social-network'
-import { isFacebook } from '../../../social-network-adaptor/facebook.com/base'
-import { isTwitter } from '../../../social-network-adaptor/twitter.com/base'
 import { useI18N as useBaseI18N } from '../../../utils'
-import { EthereumChainBoundary } from '../../../web3/UI/EthereumChainBoundary'
-import { EthereumWalletConnectedBoundary } from '../../../web3/UI/EthereumWalletConnectedBoundary'
 import { useI18N } from '../locales'
+import { WalletConnectedBoundary } from '../../../web3/UI/WalletConnectedBoundary'
 import type { RedPacketNftJSONPayload } from '../types'
-import { useAvailabilityNftRedPacket } from './hooks/useAvailabilityNftRedPacket'
 import { useClaimNftRedpacketCallback } from './hooks/useClaimNftRedpacketCallback'
+import { useAvailabilityNftRedPacket } from './hooks/useAvailabilityNftRedPacket'
+import classNames from 'classnames'
+import { usePostLink } from '../../../components/DataSource/usePostInfo'
+import { activatedSocialNetworkUI } from '../../../social-network'
+import { isTwitter } from '../../../social-network-adaptor/twitter.com/base'
+import { isFacebook } from '../../../social-network-adaptor/facebook.com/base'
+import { NFTCardStyledAssetPlayer } from '@masknet/shared'
+import { openWindow } from '@masknet/shared-base-ui'
+import { useAccount, useNetworkType, useWeb3 } from '@masknet/plugin-infra/web3'
+import { NetworkPluginID } from '@masknet/web3-shared-base'
+import { PluginWalletConnectIcon, SharedIcon } from '@masknet/icons'
+import { ChainBoundary } from '../../../web3/UI/ChainBoundary'
 
 const useStyles = makeStyles()((theme) => ({
     root: {
@@ -253,8 +248,8 @@ export function RedPacketNft({ payload }: RedPacketNftProps) {
     const { t: i18n } = useBaseI18N()
     const t = useI18N()
     const { classes } = useStyles()
-    const web3 = useWeb3()
-    const account = useAccount()
+    const web3 = useWeb3(NetworkPluginID.PLUGIN_EVM)
+    const account = useAccount(NetworkPluginID.PLUGIN_EVM)
 
     const {
         value: availability,
@@ -265,13 +260,13 @@ export function RedPacketNft({ payload }: RedPacketNftProps) {
     const [claimState, claimCallback, resetCallback] = useClaimNftRedpacketCallback(
         payload.id,
         availability?.totalAmount,
-        web3.eth.accounts.sign(account, payload.privateKey).signature,
+        web3?.eth.accounts.sign(account, payload.privateKey).signature ?? '',
     )
 
     const isClaiming = claimState.type === TransactionStateType.WAIT_FOR_CONFIRMING
 
     const openAddressLinkOnExplorer = useCallback(() => {
-        openWindow(resolveAddressLinkOnExplorer(payload.chainId, payload.contractAddress))
+        openWindow(explorerResolver.addressLink(payload.chainId, payload.contractAddress))
     }, [payload])
 
     const [sourceType, setSourceType] = useState('')
@@ -296,13 +291,13 @@ export function RedPacketNft({ payload }: RedPacketNftProps) {
     const rpNftImg = new URL('./assets/redpacket.nft.png', import.meta.url).toString()
     // #region on share
     const postLink = usePostLink()
-    const networkType = useNetworkType()
+    const networkType = useNetworkType(NetworkPluginID.PLUGIN_EVM)
     const shareText = useMemo(() => {
         const isTwitterOrFacebook = isTwitter(activatedSocialNetworkUI) || isFacebook(activatedSocialNetworkUI)
         const options = {
             sender: payload.senderName,
             payload: postLink.toString(),
-            network: resolveNetworkName(networkType),
+            network: networkResolver.networkName(networkType) || '',
             account: isTwitter(activatedSocialNetworkUI) ? i18n('twitter_account') : i18n('facebook_account'),
         }
         if (availability?.isClaimed) {
@@ -440,15 +435,18 @@ export function RedPacketNft({ payload }: RedPacketNftProps) {
                     </Box>
                     {availability.isClaimed ? null : (
                         <Box sx={{ flex: 1, padding: 1.5 }}>
-                            <EthereumChainBoundary chainId={payload.chainId} renderInTimeline>
-                                <EthereumWalletConnectedBoundary
-                                    renderInTimeline
+                            <ChainBoundary
+                                expectedPluginID={NetworkPluginID.PLUGIN_EVM}
+                                expectedChainId={payload.chainId}
+                                renderInTimeline>
+                                <WalletConnectedBoundary
                                     startIcon={<PluginWalletConnectIcon style={{ fontSize: 18 }} />}
                                     classes={{
                                         connectWallet: classes.button,
                                         unlockMetaMask: classes.button,
                                         gasFeeButton: classes.button,
-                                    }}>
+                                    }}
+                                    renderInTimeline>
                                     <ActionButton
                                         variant="contained"
                                         loading={isClaiming}
@@ -458,8 +456,8 @@ export function RedPacketNft({ payload }: RedPacketNftProps) {
                                         fullWidth>
                                         {isClaiming ? t.claiming() : t.claim()}
                                     </ActionButton>
-                                </EthereumWalletConnectedBoundary>
-                            </EthereumChainBoundary>
+                                </WalletConnectedBoundary>
+                            </ChainBoundary>
                         </Box>
                     )}
                 </Box>
diff --git a/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketPast.tsx b/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketPast.tsx
index 40f166399cf0..cdb07f46c948 100644
--- a/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketPast.tsx
+++ b/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedPacketPast.tsx
@@ -1,4 +1,4 @@
-import { useChainId, ChainId } from '@masknet/web3-shared-evm'
+import { ChainId, SchemaType } from '@masknet/web3-shared-evm'
 import { makeStyles } from '@masknet/theme'
 import { useCallback, useState } from 'react'
 import AbstractTab, { AbstractTabProps } from '../../../components/shared/AbstractTab'
@@ -10,7 +10,8 @@ import type { NftRedPacketHistory, RedPacketJSONPayload } from '../types'
 import { RedPacketNftMetaKey } from '../constants'
 import { useCompositionContext } from '@masknet/plugin-infra/content-script'
 import { useCurrentIdentity, useCurrentLinkedPersona } from '../../../components/DataSource/useActivatedUI'
-import type { ERC721ContractDetailed } from '@masknet/web3-shared-evm'
+import { useChainId } from '@masknet/plugin-infra/web3'
+import { NetworkPluginID, NonFungibleTokenContract } from '@masknet/web3-shared-base'
 
 enum RpTypeTabs {
     ERC20 = 0,
@@ -61,7 +62,7 @@ export function RedPacketPast({ onSelect, onClose }: Props) {
     const t = useI18N()
     const { classes } = useStyles()
     const state = useState(RpTypeTabs.ERC20)
-    const chainId = useChainId()
+    const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
 
     const currentIdentity = useCurrentIdentity()
 
@@ -70,7 +71,7 @@ export function RedPacketPast({ onSelect, onClose }: Props) {
     const senderName = currentIdentity?.identifier.userId ?? linkedPersona?.nickname ?? 'Unknown User'
     const { attachMetadata } = useCompositionContext()
     const handleSendNftRedpacket = useCallback(
-        (history: NftRedPacketHistory, contractDetailed: ERC721ContractDetailed) => {
+        (history: NftRedPacketHistory, contractDetailed: NonFungibleTokenContract<ChainId, SchemaType.ERC721>) => {
             const { rpid, txid, duration, message, payload } = history
             attachMetadata(RedPacketNftMetaKey, {
                 id: rpid,
@@ -80,7 +81,7 @@ export function RedPacketPast({ onSelect, onClose }: Props) {
                 senderName,
                 contractName: contractDetailed.name,
                 contractAddress: contractDetailed.address,
-                contractTokenURI: contractDetailed.iconURL ?? '',
+                contractTokenURI: contractDetailed.logoURL ?? '',
                 privateKey: payload.password,
                 chainId: history.chain_id,
             })
diff --git a/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedpacketNftConfirmDialog.tsx b/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedpacketNftConfirmDialog.tsx
index 3b96cc508aee..b34454c7a906 100644
--- a/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedpacketNftConfirmDialog.tsx
+++ b/packages/mask/src/plugins/RedPacket/SNSAdaptor/RedpacketNftConfirmDialog.tsx
@@ -2,34 +2,32 @@ import { useMemo, useCallback, useEffect, useState } from 'react'
 import { makeStyles } from '@masknet/theme'
 import {
     formatEthereumAddress,
-    resolveAddressLinkOnExplorer,
-    useChainId,
-    useWallet,
-    useAccount,
-    ERC721ContractDetailed,
-    ERC721TokenDetailed,
-    useWeb3,
+    explorerResolver,
+    ChainId,
+    SchemaType,
     TransactionStateType,
     isNativeTokenAddress,
-    formatNFT_TokenId,
+    formatTokenId,
 } from '@masknet/web3-shared-evm'
 import { InjectedDialog, NFTCardStyledAssetPlayer } from '@masknet/shared'
 import { useRemoteControlledDialog } from '@masknet/shared-base-ui'
 import classNames from 'classnames'
 import { Button, Grid, Link, Typography, DialogContent, List, ListItem } from '@mui/material'
 import ActionButton from '../../../extension/options-page/DashboardComponents/ActionButton'
-import { EthereumWalletConnectedBoundary } from '../../../web3/UI/EthereumWalletConnectedBoundary'
+import { WalletConnectedBoundary } from '../../../web3/UI/WalletConnectedBoundary'
 import LaunchIcon from '@mui/icons-material/Launch'
 import { useI18N as useBaseI18N } from '../../../utils'
+import { useI18N } from '../locales'
 import { useCreateNftRedpacketCallback } from './hooks/useCreateNftRedpacketCallback'
 import { useCurrentIdentity } from '../../../components/DataSource/useActivatedUI'
 import { useCompositionContext } from '@masknet/plugin-infra/content-script'
 import { RedPacketNftMetaKey } from '../constants'
 import { WalletMessages } from '../../Wallet/messages'
 import { RedPacketRPC } from '../messages'
+import { useAccount, useChainId, useWallet, useWeb3 } from '@masknet/plugin-infra/web3'
+import { NetworkPluginID, NonFungibleTokenContract, NonFungibleToken } from '@masknet/web3-shared-base'
 import { useAsync } from 'react-use'
 import Services from '../../../extension/service'
-import { useI18N } from '../locales'
 
 const useStyles = makeStyles()((theme) => ({
     root: {
@@ -155,22 +153,25 @@ export interface RedpacketNftConfirmDialogProps {
     open: boolean
     onBack: () => void
     onClose: () => void
-    contract: ERC721ContractDetailed
-    tokenList: ERC721TokenDetailed[]
+    contract: NonFungibleTokenContract<ChainId, SchemaType.ERC721>
+    tokenList: Array<NonFungibleToken<ChainId, SchemaType.ERC721>>
     message: string
 }
 export function RedpacketNftConfirmDialog(props: RedpacketNftConfirmDialogProps) {
     const { classes } = useStyles()
     const { open, onBack, onClose, message, contract, tokenList } = props
-    const wallet = useWallet()
-    const account = useAccount()
-    const chainId = useChainId()
-    const web3 = useWeb3()
+    const wallet = useWallet(NetworkPluginID.PLUGIN_EVM)
+    const account = useAccount(NetworkPluginID.PLUGIN_EVM)
+    const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
+    const web3 = useWeb3(NetworkPluginID.PLUGIN_EVM)
     const { attachMetadata } = useCompositionContext()
 
     const { t: i18n } = useBaseI18N()
     const t = useI18N()
-    const { address: publicKey, privateKey } = useMemo(() => web3.eth.accounts.create(), [])
+    const { address: publicKey, privateKey } = useMemo(
+        () => web3?.eth.accounts.create() ?? { address: '', privateKey: '' },
+        [web3],
+    )!
     const duration = 60 * 60 * 24
     const currentIdentity = useCurrentIdentity()
 
@@ -205,7 +206,7 @@ export function RedpacketNftConfirmDialog(props: RedpacketNftConfirmDialogProps)
                 senderName,
                 contractName: contract.name,
                 contractAddress: contract.address,
-                contractTokenURI: contract.iconURL ?? '',
+                contractTokenURI: contract.logoURL ?? '',
                 contractVersion: 1,
                 privateKey,
                 chainId: contract.chainId,
@@ -253,11 +254,11 @@ export function RedpacketNftConfirmDialog(props: RedpacketNftConfirmDialogProps)
                             align="right"
                             className={classNames(classes.account, classes.bold, classes.text)}>
                             ({wallet?.name}) {formatEthereumAddress(account, 4)}
-                            {isNativeTokenAddress(wallet) ? null : (
+                            {isNativeTokenAddress(wallet?.address) ? null : (
                                 <Link
                                     color="textPrimary"
                                     className={classes.link}
-                                    href={resolveAddressLinkOnExplorer(chainId, account)}
+                                    href={explorerResolver.addressLink(chainId, account)}
                                     target="_blank"
                                     rel="noopener noreferrer"
                                     onClick={stop}>
@@ -333,7 +334,7 @@ export function RedpacketNftConfirmDialog(props: RedpacketNftConfirmDialogProps)
                         </Button>
                     </Grid>
                     <Grid item xs={6}>
-                        <EthereumWalletConnectedBoundary
+                        <WalletConnectedBoundary
                             classes={{
                                 connectWallet: classNames(classes.button, classes.sendButton),
                                 unlockMetaMask: classNames(classes.button, classes.sendButton),
@@ -351,7 +352,7 @@ export function RedpacketNftConfirmDialog(props: RedpacketNftConfirmDialogProps)
                                     symbol: tokenList.length > 1 ? 'NFTs' : 'NFT',
                                 })}
                             </ActionButton>
-                        </EthereumWalletConnectedBoundary>
+                        </WalletConnectedBoundary>
                     </Grid>
                 </Grid>
             </DialogContent>
@@ -360,19 +361,19 @@ export function RedpacketNftConfirmDialog(props: RedpacketNftConfirmDialogProps)
 }
 
 interface NFTCardProps {
-    token: ERC721TokenDetailed
+    token: NonFungibleToken<ChainId, SchemaType.ERC721>
     renderOrder: number
 }
 
 function NFTCard(props: NFTCardProps) {
     const { token, renderOrder } = props
     const { classes } = useStyles()
-    const [name, setName] = useState(formatNFT_TokenId(token.tokenId, 2))
+    const [name, setName] = useState(formatTokenId(token.tokenId, 2))
     return (
         <ListItem className={classNames(classes.tokenSelectorWrapper)}>
             <NFTCardStyledAssetPlayer
-                contractAddress={token.contractDetailed.address}
-                chainId={token.contractDetailed.chainId}
+                contractAddress={token.contract?.address}
+                chainId={token.contract?.chainId}
                 tokenId={token.tokenId}
                 renderOrder={renderOrder}
                 setERC721TokenName={setName}
diff --git a/packages/mask/src/plugins/RedPacket/SNSAdaptor/SelectNftTokenDialog.tsx b/packages/mask/src/plugins/RedPacket/SNSAdaptor/SelectNftTokenDialog.tsx
index acf9198e6695..4f061472601f 100644
--- a/packages/mask/src/plugins/RedPacket/SNSAdaptor/SelectNftTokenDialog.tsx
+++ b/packages/mask/src/plugins/RedPacket/SNSAdaptor/SelectNftTokenDialog.tsx
@@ -1,14 +1,9 @@
 import classNames from 'classnames'
 import { InjectedDialog, NFTCardStyledAssetPlayer } from '@masknet/shared'
-import {
-    ERC721TokenDetailed,
-    ERC721ContractDetailed,
-    useERC721TokenDetailedCallback,
-    useAccount,
-    isSameAddress,
-    formatNFT_TokenId,
-} from '@masknet/web3-shared-evm'
+import { NetworkPluginID, isSameAddress, NonFungibleToken, NonFungibleTokenContract } from '@masknet/web3-shared-base'
+import { SchemaType, formatTokenId, ChainId } from '@masknet/web3-shared-evm'
 import { useI18N as useBaseI18N } from '../../../utils'
+import { Translate, useI18N } from '../locales'
 import { DialogContent, Box, InputBase, Paper, Button, Typography, ListItem, CircularProgress } from '@mui/material'
 import QuestionMarkIcon from '@mui/icons-material/QuestionMark'
 import { makeStyles, ShadowRootTooltip } from '@masknet/theme'
@@ -18,7 +13,7 @@ import CheckIcon from '@mui/icons-material/Check'
 import { useUpdate } from 'react-use'
 import { findLastIndex } from 'lodash-unified'
 import { NFT_RED_PACKET_MAX_SHARES } from '../constants'
-import { useI18N, Translate } from '../locales'
+import { useAccount, useChainId, useWeb3Connection } from '@masknet/plugin-infra/web3'
 
 interface StyleProps {
     isSelectSharesExceed: boolean
@@ -298,13 +293,13 @@ const useStyles = makeStyles<StyleProps>()((theme, props) => ({
     },
 }))
 
-export type OrderedERC721Token = ERC721TokenDetailed & { index: number }
+export type OrderedERC721Token = NonFungibleToken<ChainId, SchemaType.ERC721> & { index: number }
 
 export interface SelectNftTokenDialogProps extends withClasses<never> {
     open: boolean
     loadingOwnerList: boolean
     onClose: () => void
-    contract: ERC721ContractDetailed | null | undefined
+    contract: NonFungibleTokenContract<ChainId, SchemaType.ERC721> | null | undefined
     existTokenDetailedList: OrderedERC721Token[]
     tokenDetailedOwnerList: OrderedERC721Token[]
     setExistTokenDetailedList: React.Dispatch<React.SetStateAction<OrderedERC721Token[]>>
@@ -322,13 +317,15 @@ export function SelectNftTokenDialog(props: SelectNftTokenDialogProps) {
     } = props
     const { t: tr } = useBaseI18N()
     const t = useI18N()
-    const account = useAccount()
+    const account = useAccount(NetworkPluginID.PLUGIN_EVM)
     const [tokenDetailed, setTokenDetailed] = useState<OrderedERC721Token>()
     const [searched, setSearched] = useState(false)
     const [tokenDetailedSelectedList, setTokenDetailedSelectedList] =
         useState<OrderedERC721Token[]>(existTokenDetailedList)
     const [loadingToken, setLoadingToken] = useState(false)
-    const [tokenId, setTokenId, erc721TokenDetailedCallback] = useERC721TokenDetailedCallback(contract)
+    const [tokenId, setTokenId] = useState('')
+    const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
+    const connection = useWeb3Connection(NetworkPluginID.PLUGIN_EVM)
     const [tokenIdListInput, setTokenIdListInput] = useState<string>('')
     const [tokenIdFilterList, setTokenIdFilterList] = useState<string[]>([])
     const [nonExistedTokenIdList, setNonExistedTokenIdList] = useState<string[]>([])
@@ -402,11 +399,13 @@ export function SelectNftTokenDialog(props: SelectNftTokenDialogProps) {
     // #region fetch token detail
     const onSearch = useCallback(async () => {
         setLoadingToken(true)
-        const _tokenDetailed = await erc721TokenDetailedCallback()
-        setTokenDetailed(_tokenDetailed?.info.owner ? { ..._tokenDetailed, index: 0 } : undefined)
+        const _tokenDetailed = (await connection?.getNonFungibleToken(contract?.address ?? '', tokenId, {
+            chainId,
+        })) as NonFungibleToken<ChainId, SchemaType.ERC721>
+        setTokenDetailed(_tokenDetailed?.contract?.owner ? { ..._tokenDetailed, index: 0 } : undefined)
         setSearched(true)
         setLoadingToken(false)
-    }, [erc721TokenDetailedCallback])
+    }, [connection, contract, tokenId, chainId])
 
     useEffect(() => {
         setTokenDetailed(undefined)
@@ -417,7 +416,7 @@ export function SelectNftTokenDialog(props: SelectNftTokenDialogProps) {
         if (tokenDetailedOwnerList.length > 0) setTokenDetailed(undefined)
     }, [tokenDetailedOwnerList.length])
 
-    const isOwner = isSameAddress(account, tokenDetailed?.info.owner) || tokenDetailedSelectedList.length > 0
+    const isOwner = isSameAddress(account, tokenDetailed?.contract?.owner) || tokenDetailedSelectedList.length > 0
     const isAdded = existTokenDetailedList.map((t) => t.tokenId).includes(tokenDetailed?.tokenId ?? '')
     // #endregion
 
@@ -488,7 +487,7 @@ export function SelectNftTokenDialog(props: SelectNftTokenDialogProps) {
                                 <NFTCardStyledAssetPlayer
                                     contractAddress={contract.address}
                                     chainId={contract.chainId}
-                                    url={tokenDetailed.info.mediaUrl}
+                                    url={tokenDetailed.metadata?.mediaURL}
                                     tokenId={tokenId}
                                     classes={{
                                         loadingFailImage: classes.loadingFailImage,
@@ -498,7 +497,7 @@ export function SelectNftTokenDialog(props: SelectNftTokenDialogProps) {
                                 />
                                 <div className={classes.selectWrapperNftNameWrapper}>
                                     <Typography className={classes.selectWrapperNftName} color="textSecondary">
-                                        {tokenDetailed.info.name}
+                                        {tokenDetailed.contract?.name}
                                     </Typography>
                                 </div>
                             </Box>
@@ -569,12 +568,12 @@ export function SelectNftTokenDialog(props: SelectNftTokenDialogProps) {
                             <Box className={classes.noResultBox}>
                                 <Typography>{loadingToken ? t.loading_token() : t.search_no_result()}</Typography>
                             </Box>
-                        ) : tokenDetailed?.info.name ? (
+                        ) : tokenDetailed?.contract?.name ? (
                             <Box className={classNames(classes.wrapper, classes.nftWrapper)}>
-                                <img className={classes.nftImg} src={tokenDetailed?.info.mediaUrl} />
+                                <img className={classes.nftImg} src={tokenDetailed?.metadata?.mediaURL} />
                                 <div className={classes.nftNameWrapper}>
                                     <Typography className={classes.nftName} color="textSecondary">
-                                        {tokenDetailed?.info.name}
+                                        {tokenDetailed?.contract.name}
                                     </Typography>
                                 </div>
                             </Box>
@@ -721,14 +720,15 @@ interface NFTCardProps {
 function NFTCard(props: NFTCardProps) {
     const { findToken, token, tokenIdFilterList, isSelectSharesExceed, renderOrder, selectToken } = props
     const { classes } = useStyles({ isSelectSharesExceed })
+
     return (
         <ListItem className={classes.selectWrapper}>
             <NFTCardStyledAssetPlayer
-                url={token.info.mediaUrl}
-                contractAddress={token.contractDetailed.address}
+                url={token.metadata?.mediaURL}
+                contractAddress={token.contract?.address}
                 tokenId={token.tokenId}
                 renderOrder={renderOrder}
-                chainId={token.contractDetailed.chainId}
+                chainId={token.contract?.chainId}
                 classes={{
                     loadingFailImage: classes.loadingFailImage,
                     iframe: classes.iframe,
@@ -737,7 +737,7 @@ function NFTCard(props: NFTCardProps) {
             />
             <div className={classes.selectWrapperNftNameWrapper}>
                 <Typography className={classes.selectWrapperNftName} color="textSecondary">
-                    {formatNFT_TokenId(token.tokenId, 2)}
+                    {formatTokenId(token.tokenId, 2)}
                 </Typography>
             </div>
 
diff --git a/packages/mask/src/plugins/RedPacket/SNSAdaptor/hooks/useAvailability.ts b/packages/mask/src/plugins/RedPacket/SNSAdaptor/hooks/useAvailability.ts
index 090137577199..edc42284db0f 100644
--- a/packages/mask/src/plugins/RedPacket/SNSAdaptor/hooks/useAvailability.ts
+++ b/packages/mask/src/plugins/RedPacket/SNSAdaptor/hooks/useAvailability.ts
@@ -1,15 +1,25 @@
 import { useAsyncRetry } from 'react-use'
-import type { ChainId } from '@masknet/web3-shared-evm'
+import type { HappyRedPacketV4 } from '@masknet/web3-contracts/types/HappyRedPacketV4'
 import { useRedPacketContract } from './useRedPacketContract'
+import { useAccount, useChainId, Web3Helper, useWeb3Connection } from '@masknet/plugin-infra/web3'
+import { NetworkPluginID } from '@masknet/web3-shared-base'
+
+export function useAvailability(
+    id: string,
+    contract_address: string,
+    version: number,
+    options?: Web3Helper.Web3ConnectionOptions<NetworkPluginID.PLUGIN_EVM>,
+) {
+    const account = useAccount(NetworkPluginID.PLUGIN_EVM, options?.account)
+    const chainId = useChainId(NetworkPluginID.PLUGIN_EVM, options?.chainId)
+    const redPacketContract = useRedPacketContract(chainId, version) as HappyRedPacketV4
+    const connection = useWeb3Connection(NetworkPluginID.PLUGIN_EVM, { chainId })
 
-export function useAvailability(version: number, from: string, id: string, redpacketChainId: ChainId) {
-    const redPacketContract = useRedPacketContract(version, redpacketChainId)
     return useAsyncRetry(async () => {
-        if (!id) return null
-        if (!redPacketContract) return null
+        if (!id || !connection || !contract_address || !redPacketContract) return null
         return redPacketContract.methods.check_availability(id).call({
             // check availability is ok w/o account
-            from,
+            from: account,
         })
-    }, [id, from, redpacketChainId, redPacketContract])
+    }, [id, account, chainId, connection, contract_address, version])
 }
diff --git a/packages/mask/src/plugins/RedPacket/SNSAdaptor/hooks/useAvailabilityComputed.ts b/packages/mask/src/plugins/RedPacket/SNSAdaptor/hooks/useAvailabilityComputed.ts
index 3f6c347adbd9..36ae52c75a2f 100644
--- a/packages/mask/src/plugins/RedPacket/SNSAdaptor/hooks/useAvailabilityComputed.ts
+++ b/packages/mask/src/plugins/RedPacket/SNSAdaptor/hooks/useAvailabilityComputed.ts
@@ -1,6 +1,8 @@
 import { compact } from 'lodash-unified'
-import { isSameAddress, useChainId, getChainIdFromName, ChainId } from '@masknet/web3-shared-evm'
-import { RedPacketJSONPayload, RedPacketStatus, RedPacketAvailability } from '../../types'
+import { useChainId } from '@masknet/plugin-infra/web3'
+import { NetworkPluginID, isSameAddress } from '@masknet/web3-shared-base'
+import { ChainId, networkResolver, NetworkType } from '@masknet/web3-shared-evm'
+import { RedPacketJSONPayload, RedPacketStatus } from '../../types'
 import { useAvailability } from './useAvailability'
 
 /**
@@ -8,12 +10,19 @@ import { useAvailability } from './useAvailability'
  * @param payload
  */
 export function useAvailabilityComputed(account: string, payload: RedPacketJSONPayload) {
-    const chainId = useChainId()
-    const parsedChainId = getChainIdFromName(payload.network ?? '') ?? ChainId.Mainnet
-    const asyncResult = useAvailability(payload.contract_version, account, payload.rpid, parsedChainId)
+    const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
+    const parsedChainId =
+        payload.token?.chainId ??
+        networkResolver.networkChainId((payload.network ?? '') as NetworkType) ??
+        ChainId.Mainnet
+
+    const asyncResult = useAvailability(payload.rpid, payload.contract_address, payload.contract_version, {
+        account,
+        chainId: parsedChainId,
+    })
 
     const result = asyncResult
-    const availability = result.value as RedPacketAvailability
+    const availability = result.value
 
     if (!availability)
         return {
@@ -27,8 +36,8 @@ export function useAvailabilityComputed(account: string, payload: RedPacketJSONP
         }
     const isEmpty = availability.balance === '0'
     const isExpired = availability.expired
-    const isClaimed = availability.claimed_amount ? availability.claimed_amount !== '0' : availability.ifclaimed
-    const isRefunded = isEmpty && Number.parseInt(availability.claimed, 10) < Number.parseInt(availability.total, 10)
+    const isClaimed = availability.claimed_amount !== '0'
+    const isRefunded = isEmpty && availability.claimed < availability.total
     const isCreator = isSameAddress(payload?.sender.address ?? '', account)
     const isPasswordValid = Boolean(payload.password && payload.password !== 'PASSWORD INVALID')
     return {
diff --git a/packages/mask/src/plugins/RedPacket/SNSAdaptor/hooks/useClaimCallback.ts b/packages/mask/src/plugins/RedPacket/SNSAdaptor/hooks/useClaimCallback.ts
index 8f278bb307c1..891dfac7447a 100644
--- a/packages/mask/src/plugins/RedPacket/SNSAdaptor/hooks/useClaimCallback.ts
+++ b/packages/mask/src/plugins/RedPacket/SNSAdaptor/hooks/useClaimCallback.ts
@@ -1,13 +1,16 @@
-import type { HappyRedPacketV1 } from '@masknet/web3-contracts/types/HappyRedPacketV1'
-import type { HappyRedPacketV4 } from '@masknet/web3-contracts/types/HappyRedPacketV4'
-import type { NonPayableTx } from '@masknet/web3-contracts/types/types'
-import { TransactionEventType } from '@masknet/web3-shared-evm'
 import { useAsyncFn } from 'react-use'
 import Web3Utils from 'web3-utils'
 import { useRedPacketContract } from './useRedPacketContract'
+import type { NonPayableTx } from '@masknet/web3-contracts/types/types'
+import { TransactionEventType } from '@masknet/web3-shared-evm'
+import type { HappyRedPacketV1 } from '@masknet/web3-contracts/types/HappyRedPacketV1'
+import type { HappyRedPacketV4 } from '@masknet/web3-contracts/types/HappyRedPacketV4'
+import { useChainId } from '@masknet/plugin-infra/web3'
+import { NetworkPluginID } from '@masknet/web3-shared-base'
 
 export function useClaimCallback(version: number, from: string, id?: string, password?: string) {
-    const redPacketContract = useRedPacketContract(version)
+    const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
+    const redPacketContract = useRedPacketContract(chainId, version)
     return useAsyncFn(async () => {
         if (!redPacketContract || !id || !password) return
 
diff --git a/packages/mask/src/plugins/RedPacket/SNSAdaptor/hooks/useClaimNftRedpacketCallback.ts b/packages/mask/src/plugins/RedPacket/SNSAdaptor/hooks/useClaimNftRedpacketCallback.ts
index ce38c49247d7..b4ca6a370df6 100644
--- a/packages/mask/src/plugins/RedPacket/SNSAdaptor/hooks/useClaimNftRedpacketCallback.ts
+++ b/packages/mask/src/plugins/RedPacket/SNSAdaptor/hooks/useClaimNftRedpacketCallback.ts
@@ -1,21 +1,18 @@
-import {
-    useAccount,
-    useChainId,
-    useTransactionState,
-    TransactionStateType,
-    TransactionEventType,
-} from '@masknet/web3-shared-evm'
+import { useCallback } from 'react'
 import type { TransactionReceipt } from 'web3-core'
+import { useAccount, useChainId } from '@masknet/plugin-infra/web3'
+import { NetworkPluginID } from '@masknet/web3-shared-base'
+import { TransactionStateType, TransactionEventType } from '@masknet/web3-shared-evm'
 import { useNftRedPacketContract } from './useNftRedPacketContract'
 import type { NonPayableTx } from '@masknet/web3-contracts/types/types'
 import type { NftRedPacket } from '@masknet/web3-contracts/types/NftRedPacket'
-import { useCallback } from 'react'
+import { useTransactionState } from '@masknet/plugin-infra/web3-evm'
 
 const EXTRA_GAS_PER_NFT = 335
 
 export function useClaimNftRedpacketCallback(id: string, totalAmount: number | undefined, signedMsg: string) {
-    const account = useAccount()
-    const chainId = useChainId()
+    const account = useAccount(NetworkPluginID.PLUGIN_EVM)
+    const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
     const nftRedPacketContract = useNftRedPacketContract()
     const [claimState, setClaimState] = useTransactionState()
     const claimCallback = useCallback(async () => {
diff --git a/packages/mask/src/plugins/RedPacket/SNSAdaptor/hooks/useCreateCallback.tsx b/packages/mask/src/plugins/RedPacket/SNSAdaptor/hooks/useCreateCallback.tsx
index f5b967e28b4c..17e92d95980a 100644
--- a/packages/mask/src/plugins/RedPacket/SNSAdaptor/hooks/useCreateCallback.tsx
+++ b/packages/mask/src/plugins/RedPacket/SNSAdaptor/hooks/useCreateCallback.tsx
@@ -1,19 +1,13 @@
-import type { HappyRedPacketV4 } from '@masknet/web3-contracts/types/HappyRedPacketV4'
-import type { PayableTx } from '@masknet/web3-contracts/types/types'
-import { isLessThan, toFixed } from '@masknet/web3-shared-base'
-import {
-    EthereumTokenType,
-    FungibleTokenDetailed,
-    TransactionEventType,
-    useAccount,
-    useChainId,
-    useTokenConstants,
-} from '@masknet/web3-shared-evm'
-import { omit } from 'lodash-unified'
 import { useCallback } from 'react'
 import { useAsyncFn } from 'react-use'
-import type { TransactionReceipt } from 'web3-core'
 import Web3Utils from 'web3-utils'
+import type { TransactionReceipt } from 'web3-core'
+import { useAccount, useChainId } from '@masknet/plugin-infra/web3'
+import type { HappyRedPacketV4 } from '@masknet/web3-contracts/types/HappyRedPacketV4'
+import type { PayableTx } from '@masknet/web3-contracts/types/types'
+import { FungibleToken, isLessThan, NetworkPluginID, toFixed } from '@masknet/web3-shared-base'
+import { ChainId, SchemaType, TransactionEventType, useTokenConstants } from '@masknet/web3-shared-evm'
+import { omit } from 'lodash-unified'
 import { useRedPacketContract } from './useRedPacketContract'
 
 export interface RedPacketSettings {
@@ -23,7 +17,7 @@ export interface RedPacketSettings {
     total: string
     name: string
     message: string
-    token?: FungibleTokenDetailed
+    token?: FungibleToken<ChainId, SchemaType.Native | SchemaType.ERC20>
 }
 
 type ParamsObjType = {
@@ -37,7 +31,7 @@ type ParamsObjType = {
     tokenType: number
     tokenAddress: string
     total: string
-    token?: FungibleTokenDetailed
+    token?: FungibleToken<ChainId, SchemaType.Native | SchemaType.ERC20>
 }
 
 function checkParams(paramsObj: ParamsObjType) {
@@ -49,7 +43,7 @@ function checkParams(paramsObj: ParamsObjType) {
         throw new Error('At least 1 person should be able to claim the lucky drop.')
     }
 
-    if (paramsObj.tokenType !== EthereumTokenType.Native && paramsObj.tokenType !== EthereumTokenType.ERC20) {
+    if (paramsObj.tokenType !== SchemaType.Native && paramsObj.tokenType !== SchemaType.ERC20) {
         throw new Error('Token not supported')
     }
 
@@ -65,15 +59,16 @@ interface CreateParams {
 }
 
 export function useCreateParams(redPacketSettings: RedPacketSettings | undefined, version: number, publicKey: string) {
-    const redPacketContract = useRedPacketContract(version)
-    const { NATIVE_TOKEN_ADDRESS } = useTokenConstants()
-    const account = useAccount()
+    const account = useAccount(NetworkPluginID.PLUGIN_EVM)
+    const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
+    const { NATIVE_TOKEN_ADDRESS } = useTokenConstants(chainId)
+    const redPacketContract = useRedPacketContract(chainId, version)
     const getCreateParams = useCallback(async (): Promise<CreateParams | null> => {
         if (!redPacketSettings || !redPacketContract) return null
         const { duration, isRandom, message, name, shares, total, token } = redPacketSettings
         const seed = Math.random().toString()
-        const tokenType = token!.type === EthereumTokenType.Native ? 0 : 1
-        const tokenAddress = token!.type === EthereumTokenType.Native ? NATIVE_TOKEN_ADDRESS : token!.address
+        const tokenType = token!.schema === SchemaType.Native ? 0 : 1
+        const tokenAddress = token!.schema === SchemaType.Native ? NATIVE_TOKEN_ADDRESS : token!.address
         if (!tokenAddress) {
             return null
         }
@@ -101,7 +96,7 @@ export function useCreateParams(redPacketSettings: RedPacketSettings | undefined
         const params = Object.values(omit(paramsObj, ['token'])) as MethodParameters
 
         let gasError: Error | null = null
-        const value = toFixed(paramsObj.token?.type === EthereumTokenType.Native ? total : 0)
+        const value = toFixed(paramsObj.token?.schema === SchemaType.Native ? total : 0)
 
         const gas = await (redPacketContract as HappyRedPacketV4).methods
             .create_red_packet(...params)
@@ -117,9 +112,9 @@ export function useCreateParams(redPacketSettings: RedPacketSettings | undefined
 }
 
 export function useCreateCallback(redPacketSettings: RedPacketSettings, version: number, publicKey: string) {
-    const account = useAccount()
-    const chainId = useChainId()
-    const redPacketContract = useRedPacketContract(version)
+    const account = useAccount(NetworkPluginID.PLUGIN_EVM)
+    const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
+    const redPacketContract = useRedPacketContract(chainId, version)
     const getCreateParams = useCreateParams(redPacketSettings, version, publicKey)
 
     return useAsyncFn(async () => {
@@ -141,7 +136,7 @@ export function useCreateCallback(redPacketSettings: RedPacketSettings, version:
         }
 
         // estimate gas and compose transaction
-        const value = toFixed(token.type === EthereumTokenType.Native ? paramsObj.total : 0)
+        const value = toFixed(token.schema === SchemaType.Native ? paramsObj.total : 0)
         const config: PayableTx = {
             from: account,
             value,
diff --git a/packages/mask/src/plugins/RedPacket/SNSAdaptor/hooks/useCreateNftRedpacketCallback.ts b/packages/mask/src/plugins/RedPacket/SNSAdaptor/hooks/useCreateNftRedpacketCallback.ts
index 42b3d1094e65..1358efabc182 100644
--- a/packages/mask/src/plugins/RedPacket/SNSAdaptor/hooks/useCreateNftRedpacketCallback.ts
+++ b/packages/mask/src/plugins/RedPacket/SNSAdaptor/hooks/useCreateNftRedpacketCallback.ts
@@ -1,14 +1,11 @@
-import {
-    useTransactionState,
-    useAccount,
-    useChainId,
-    TransactionStateType,
-    TransactionEventType,
-} from '@masknet/web3-shared-evm'
+import { useCallback } from 'react'
 import type { TransactionReceipt } from 'web3-core'
 import Web3Utils from 'web3-utils'
 import { EthereumAddress } from 'wallet.ts'
-import { useCallback } from 'react'
+import { NetworkPluginID } from '@masknet/web3-shared-base'
+import { useTransactionState } from '@masknet/plugin-infra/web3-evm'
+import { TransactionStateType, TransactionEventType } from '@masknet/web3-shared-evm'
+import { useAccount, useChainId } from '@masknet/plugin-infra/web3'
 import type { NftRedPacket } from '@masknet/web3-contracts/types/NftRedPacket'
 import { useNftRedPacketContract } from './useNftRedPacketContract'
 import type { NonPayableTx } from '@masknet/web3-contracts/types/types'
@@ -20,8 +17,8 @@ export function useCreateNftRedpacketCallback(
     contractAddress: string,
     tokenIdList: string[],
 ) {
-    const account = useAccount()
-    const chainId = useChainId()
+    const account = useAccount(NetworkPluginID.PLUGIN_EVM)
+    const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
     const [createState, setCreateState] = useTransactionState()
     const nftRedPacketContract = useNftRedPacketContract()
     const createCallback = useCallback(
diff --git a/packages/mask/src/plugins/RedPacket/SNSAdaptor/hooks/useNftAvailabilityComputed.ts b/packages/mask/src/plugins/RedPacket/SNSAdaptor/hooks/useNftAvailabilityComputed.ts
index 8d7634a98f64..c2f1ffd50d5c 100644
--- a/packages/mask/src/plugins/RedPacket/SNSAdaptor/hooks/useNftAvailabilityComputed.ts
+++ b/packages/mask/src/plugins/RedPacket/SNSAdaptor/hooks/useNftAvailabilityComputed.ts
@@ -1,6 +1,8 @@
 import { useMemo } from 'react'
 import { compact } from 'lodash-unified'
-import { isSameAddress, useChainId, getChainIdFromName, ChainId } from '@masknet/web3-shared-evm'
+import { useChainId } from '@masknet/plugin-infra/web3'
+import { isSameAddress, NetworkPluginID } from '@masknet/web3-shared-base'
+import { ChainId, chainResolver } from '@masknet/web3-shared-evm'
 import { NftRedPacketJSONPayload, RedPacketStatus } from '../../types'
 import { useAvailabilityNftRedPacket } from './useAvailabilityNftRedPacket'
 
@@ -9,7 +11,7 @@ import { useAvailabilityNftRedPacket } from './useAvailabilityNftRedPacket'
  * @param payload
  */
 export function useNftAvailabilityComputed(account: string, payload: NftRedPacketJSONPayload) {
-    const chainId = useChainId()
+    const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
     const asyncResult = useAvailabilityNftRedPacket(payload?.rpid, account)
 
     const result = asyncResult
@@ -31,7 +33,7 @@ export function useNftAvailabilityComputed(account: string, payload: NftRedPacke
         const isExpired = availability.expired
         const isClaimed = availability.isClaimed
         const isCreator = isSameAddress(payload?.sender.address ?? '', account)
-        const parsedChainId = getChainIdFromName(payload.network ?? '') ?? ChainId.Mainnet
+        const parsedChainId = chainResolver.chainId(payload.network ?? '') ?? ChainId.Mainnet
 
         const isSameChain = parsedChainId === chainId
         const isPasswordValid = !!payload.password && payload.password !== 'PASSWORD INVALID'
diff --git a/packages/mask/src/plugins/RedPacket/SNSAdaptor/hooks/useNftRedPacketContract.ts b/packages/mask/src/plugins/RedPacket/SNSAdaptor/hooks/useNftRedPacketContract.ts
index 14dabadf3fe6..6f71c7728b07 100644
--- a/packages/mask/src/plugins/RedPacket/SNSAdaptor/hooks/useNftRedPacketContract.ts
+++ b/packages/mask/src/plugins/RedPacket/SNSAdaptor/hooks/useNftRedPacketContract.ts
@@ -1,10 +1,10 @@
+import type { AbiItem } from 'web3-utils'
 import NftRedPacketABI from '@masknet/web3-contracts/abis/NftRedPacket.json'
-import { ChainId, useContract, useNftRedPacketConstants } from '@masknet/web3-shared-evm'
+import { ChainId, useNftRedPacketConstants } from '@masknet/web3-shared-evm'
 import type { NftRedPacket } from '@masknet/web3-contracts/types/NftRedPacket'
-import type { AbiItem } from 'web3-utils'
+import { useContract } from '@masknet/plugin-infra/web3-evm'
 
 export function useNftRedPacketContract(chainId?: ChainId) {
     const { RED_PACKET_NFT_ADDRESS } = useNftRedPacketConstants(chainId)
-    const contract = useContract<NftRedPacket>(RED_PACKET_NFT_ADDRESS, NftRedPacketABI as AbiItem[], chainId)
-    return contract
+    return useContract<NftRedPacket>(chainId, RED_PACKET_NFT_ADDRESS, NftRedPacketABI as AbiItem[])
 }
diff --git a/packages/mask/src/plugins/RedPacket/SNSAdaptor/hooks/useRedPacketContract.ts b/packages/mask/src/plugins/RedPacket/SNSAdaptor/hooks/useRedPacketContract.ts
index 2b0039114616..cd9db0e6047d 100644
--- a/packages/mask/src/plugins/RedPacket/SNSAdaptor/hooks/useRedPacketContract.ts
+++ b/packages/mask/src/plugins/RedPacket/SNSAdaptor/hooks/useRedPacketContract.ts
@@ -1,3 +1,4 @@
+import { useContract } from '@masknet/plugin-infra/web3-evm'
 import HappyRedPacketV1ABI from '@masknet/web3-contracts/abis/HappyRedPacketV1.json'
 import HappyRedPacketV2ABI from '@masknet/web3-contracts/abis/HappyRedPacketV2.json'
 import HappyRedPacketV3ABI from '@masknet/web3-contracts/abis/HappyRedPacketV3.json'
@@ -6,20 +7,20 @@ import type { HappyRedPacketV1 } from '@masknet/web3-contracts/types/HappyRedPac
 import type { HappyRedPacketV2 } from '@masknet/web3-contracts/types/HappyRedPacketV2'
 import type { HappyRedPacketV3 } from '@masknet/web3-contracts/types/HappyRedPacketV3'
 import type { HappyRedPacketV4 } from '@masknet/web3-contracts/types/HappyRedPacketV4'
-import { useContract, useRedPacketConstants, ChainId } from '@masknet/web3-shared-evm'
+import { ChainId, useRedPacketConstants } from '@masknet/web3-shared-evm'
 import type { AbiItem } from 'web3-utils'
 
-export function useRedPacketContract(version: number, chainId?: ChainId) {
+export function useRedPacketContract(chainId: ChainId, version: number) {
     const {
         HAPPY_RED_PACKET_ADDRESS_V1: addressV1,
         HAPPY_RED_PACKET_ADDRESS_V2: addressV2,
         HAPPY_RED_PACKET_ADDRESS_V3: addressV3,
         HAPPY_RED_PACKET_ADDRESS_V4: addressV4,
     } = useRedPacketConstants(chainId)
-    const v1 = useContract<HappyRedPacketV1>(addressV1, HappyRedPacketV1ABI as AbiItem[], chainId)
-    const v2 = useContract<HappyRedPacketV2>(addressV2, HappyRedPacketV2ABI as AbiItem[], chainId)
-    const v3 = useContract<HappyRedPacketV3>(addressV3, HappyRedPacketV3ABI as AbiItem[], chainId)
-    const v4 = useContract<HappyRedPacketV4>(addressV4, HappyRedPacketV4ABI as AbiItem[], chainId)
+    const v1 = useContract<HappyRedPacketV1>(chainId, addressV1, HappyRedPacketV1ABI as AbiItem[])
+    const v2 = useContract<HappyRedPacketV2>(chainId, addressV2, HappyRedPacketV2ABI as AbiItem[])
+    const v3 = useContract<HappyRedPacketV3>(chainId, addressV3, HappyRedPacketV3ABI as AbiItem[])
+    const v4 = useContract<HappyRedPacketV4>(chainId, addressV4, HappyRedPacketV4ABI as AbiItem[])
     const versions = [v1, v2, v3, v4] as const
     return versions[version - 1]
 }
diff --git a/packages/mask/src/plugins/RedPacket/SNSAdaptor/hooks/useRedPacketHistory.ts b/packages/mask/src/plugins/RedPacket/SNSAdaptor/hooks/useRedPacketHistory.ts
index f92452c1e630..5706c16c864d 100644
--- a/packages/mask/src/plugins/RedPacket/SNSAdaptor/hooks/useRedPacketHistory.ts
+++ b/packages/mask/src/plugins/RedPacket/SNSAdaptor/hooks/useRedPacketHistory.ts
@@ -1,11 +1,36 @@
 import { useAsyncRetry } from 'react-use'
+import { NetworkPluginID } from '@masknet/web3-shared-base'
+import { ChainId, getRedPacketConstants } from '@masknet/web3-shared-evm'
+import { useBlockNumber, useWeb3Connection, Web3Helper } from '@masknet/plugin-infra/web3'
+import * as chain from '../utils/chain'
 import { RedPacketRPC } from '../../messages'
-import { ChainId, useBlockNumber } from '@masknet/web3-shared-evm'
 
 export function useRedPacketHistory(address: string, chainId: ChainId) {
-    const { value: blockNumber = 0 } = useBlockNumber()
+    const { value: blockNumber = 0 } = useBlockNumber(NetworkPluginID.PLUGIN_EVM)
+    const connection = useWeb3Connection(NetworkPluginID.PLUGIN_EVM, { chainId })
+
     return useAsyncRetry(async () => {
-        if (!blockNumber) return []
-        return RedPacketRPC.getRedPacketHistory(address, chainId, blockNumber)
-    }, [address, chainId, blockNumber])
+        if (!blockNumber || !connection) return []
+
+        return getRedPacketHistory(address, chainId, blockNumber, connection)
+    }, [address, chainId, blockNumber, connection])
+}
+
+async function getRedPacketHistory(
+    address: string,
+    chainId: ChainId,
+    endBlock: number,
+    connection: Web3Helper.Web3Connection<NetworkPluginID.PLUGIN_EVM>,
+) {
+    const { HAPPY_RED_PACKET_ADDRESS_V4_BLOCK_HEIGHT } = getRedPacketConstants(chainId)
+    const redpacketsFromChain = await chain.getRedPacketHistory(
+        chainId,
+        HAPPY_RED_PACKET_ADDRESS_V4_BLOCK_HEIGHT,
+        endBlock,
+        address,
+        connection,
+    )
+    // #region Inject password from database
+    return RedPacketRPC.getRedPacketHistoryFromDatabase(redpacketsFromChain)
+    // #endregion
 }
diff --git a/packages/mask/src/plugins/RedPacket/SNSAdaptor/hooks/useRefundCallback.ts b/packages/mask/src/plugins/RedPacket/SNSAdaptor/hooks/useRefundCallback.ts
index 84eb3389f35a..819bf6550d9e 100644
--- a/packages/mask/src/plugins/RedPacket/SNSAdaptor/hooks/useRefundCallback.ts
+++ b/packages/mask/src/plugins/RedPacket/SNSAdaptor/hooks/useRefundCallback.ts
@@ -1,12 +1,15 @@
-import type { NonPayableTx } from '@masknet/web3-contracts/types/types'
-import { TransactionEventType } from '@masknet/web3-shared-evm'
 import { useState } from 'react'
 import { useAsyncFn } from 'react-use'
 import { useRedPacketContract } from './useRedPacketContract'
+import { TransactionEventType } from '@masknet/web3-shared-evm'
+import type { NonPayableTx } from '@masknet/web3-contracts/types/types'
+import { useChainId } from '@masknet/plugin-infra/web3'
+import { NetworkPluginID } from '@masknet/web3-shared-base'
 
 export function useRefundCallback(version: number, from: string, id?: string) {
+    const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
     const [isRefunded, setIsRefunded] = useState(false)
-    const redPacketContract = useRedPacketContract(version)
+    const redPacketContract = useRedPacketContract(chainId, version)
 
     const [state, refundCallback] = useAsyncFn(async () => {
         if (!redPacketContract || !id) return
diff --git a/packages/mask/src/plugins/RedPacket/SNSAdaptor/index.tsx b/packages/mask/src/plugins/RedPacket/SNSAdaptor/index.tsx
index d1ec432b53a0..e7fed99afd0e 100644
--- a/packages/mask/src/plugins/RedPacket/SNSAdaptor/index.tsx
+++ b/packages/mask/src/plugins/RedPacket/SNSAdaptor/index.tsx
@@ -1,12 +1,5 @@
 import { type Plugin, usePluginWrapper, PluginId } from '@masknet/plugin-infra/content-script'
-import {
-    ChainId,
-    EthereumTokenType,
-    formatBalance,
-    getChainDetailed,
-    getChainIdFromName,
-    useERC20TokenDetailed,
-} from '@masknet/web3-shared-evm'
+import { ChainId, SchemaType, chainResolver, networkResolver, NetworkType } from '@masknet/web3-shared-evm'
 import { base } from '../base'
 import { RedPacketMetaKey, RedPacketNftMetaKey } from '../constants'
 import {
@@ -23,6 +16,8 @@ import { Trans } from 'react-i18next'
 import { RedPacketIcon, NFTRedPacketIcon } from '@masknet/icons'
 import { CrossIsolationMessages } from '@masknet/shared-base'
 import { ApplicationEntry } from '@masknet/shared'
+import { useFungibleToken } from '@masknet/plugin-infra/web3'
+import { NetworkPluginID, formatBalance } from '@masknet/web3-shared-base'
 
 function Render(props: React.PropsWithChildren<{ name: string }>) {
     usePluginWrapper(true, { name: props.name })
@@ -149,12 +144,13 @@ interface ERC20RedpacketBadgeProps {
 
 function ERC20RedpacketBadge(props: ERC20RedpacketBadgeProps) {
     const { payload } = props
-    const { value: fetchedToken } = useERC20TokenDetailed(payload.token?.address ?? payload.token_address)
-    const chainId = getChainIdFromName(payload.network ?? '') ?? ChainId.Mainnet
-    const chainDetailed = getChainDetailed(chainId)
-    const tokenDetailed =
-        payload.token?.type === EthereumTokenType.Native ? chainDetailed?.nativeCurrency : fetchedToken ?? payload.token
-
+    const { value: fetchedToken } = useFungibleToken(
+        NetworkPluginID.PLUGIN_EVM,
+        payload.token?.address ?? payload.token?.address,
+    )
+    const chainId = networkResolver.networkChainId((payload.network ?? '') as NetworkType) ?? ChainId.Mainnet
+    const nativeCurrency = chainResolver.nativeCurrency(chainId)
+    const tokenDetailed = payload.token?.schema === SchemaType.Native ? nativeCurrency : payload.token ?? fetchedToken
     return (
         <div style={containerStyle}>
             <RedPacketIcon style={badgeSvgIconSize} /> A Lucky Drop with{' '}
diff --git a/packages/mask/src/plugins/RedPacket/Worker/apis/chain.ts b/packages/mask/src/plugins/RedPacket/SNSAdaptor/utils/chain.ts
similarity index 88%
rename from packages/mask/src/plugins/RedPacket/Worker/apis/chain.ts
rename to packages/mask/src/plugins/RedPacket/SNSAdaptor/utils/chain.ts
index 66029ca049c1..650abaeb9175 100644
--- a/packages/mask/src/plugins/RedPacket/Worker/apis/chain.ts
+++ b/packages/mask/src/plugins/RedPacket/SNSAdaptor/utils/chain.ts
@@ -1,18 +1,13 @@
 import urlcat from 'urlcat'
 import type BigNumber from 'bignumber.js'
 import { first } from 'lodash-unified'
-import {
-    ChainId,
-    getExplorerConstants,
-    getRedPacketConstants,
-    isSameAddress,
-    getChainName,
-} from '@masknet/web3-shared-evm'
+import { isSameAddress, NetworkPluginID } from '@masknet/web3-shared-base'
+import { ChainId, chainResolver, getExplorerConstants, getRedPacketConstants } from '@masknet/web3-shared-evm'
 import { Interface } from '@ethersproject/abi'
 import type { RedPacketJSONPayloadFromChain } from '../../types'
-import { getTransactionReceipt } from '../../../../extension/background-script/EthereumService'
 import REDPACKET_ABI from '@masknet/web3-contracts/abis/HappyRedPacketV4.json'
 import { checkAvailability } from './checkAvailability'
+import type { Web3Helper } from '@masknet/plugin-infra/src/web3-helpers'
 
 const interFace = new Interface(REDPACKET_ABI)
 
@@ -21,6 +16,7 @@ export async function getRedPacketHistory(
     startBlock: number | undefined,
     endBlock: number,
     senderAddress: string,
+    connection: Web3Helper.Web3Connection<NetworkPluginID.PLUGIN_EVM>,
 ) {
     const { EXPLORER_API, API_KEYS = [] } = getExplorerConstants(chainId)
     const { HAPPY_RED_PACKET_ADDRESS_V4 } = getRedPacketConstants(chainId)
@@ -84,7 +80,7 @@ export async function getRedPacketHistory(
                 duration: decodedInputParam._duration.toNumber() * 1000,
                 block_number: Number(txType.blockNumber),
                 contract_version: 4,
-                network: getChainName(chainId),
+                network: chainResolver.chainNetworkType(chainId),
                 token_address: decodedInputParam._token_addr,
                 sender: {
                     address: senderAddress,
@@ -119,13 +115,11 @@ export async function getRedPacketHistory(
 
     const eventLogResponse = await Promise.allSettled(
         payloadList.map(async (payload) => {
-            const result = await getTransactionReceipt(payload.txid)
-
+            const result = await connection.getTransactionReceipt(payload.txid)
             if (!result) return null
 
             const log = result.logs.find((log) => isSameAddress(log.address, HAPPY_RED_PACKET_ADDRESS_V4))
             if (!log) return null
-
             const eventParams = interFace.decodeEventLog(
                 'CreationSuccess',
                 log.data,
@@ -136,11 +130,16 @@ export async function getRedPacketHistory(
             payload.creation_time = eventParams.creation_time.toNumber() * 1000
 
             // 4. retrieve `claimers` and `total_remaining`
+            // const r = await redPacketContract.methods.check_availability(payload.rpid).call({
+            //     from: payload.sender.address,
+            // })
+
             const data = await checkAvailability(
                 payload.rpid,
                 payload.sender.address,
                 payload.contract_address,
                 chainId,
+                connection,
             )
 
             payload.claimers = Array.from({ length: data.claimed }).map(() => ({ address: '', name: '' }))
diff --git a/packages/mask/src/plugins/RedPacket/Worker/apis/checkAvailability.ts b/packages/mask/src/plugins/RedPacket/SNSAdaptor/utils/checkAvailability.ts
similarity index 75%
rename from packages/mask/src/plugins/RedPacket/Worker/apis/checkAvailability.ts
rename to packages/mask/src/plugins/RedPacket/SNSAdaptor/utils/checkAvailability.ts
index 259786f11ab7..760fd3e2f453 100644
--- a/packages/mask/src/plugins/RedPacket/Worker/apis/checkAvailability.ts
+++ b/packages/mask/src/plugins/RedPacket/SNSAdaptor/utils/checkAvailability.ts
@@ -2,14 +2,21 @@ import REDPACKET_ABI from '@masknet/web3-contracts/abis/HappyRedPacketV4.json'
 import type { ChainId } from '@masknet/web3-shared-evm'
 import { Interface } from '@ethersproject/abi'
 import type { RedpacketAvailability } from '../../types'
-import Services from '../../../../extension/service'
+import type { Web3Helper } from '@masknet/plugin-infra/src/web3-helpers'
+import type { NetworkPluginID } from '@masknet/web3-shared-base'
 
 const interFace = new Interface(REDPACKET_ABI)
 
 // red-packet contract readonly method, read it no matter on whatever chains you are.
-export async function checkAvailability(pid: string, from: string, to: string, chainId: ChainId) {
+export async function checkAvailability(
+    pid: string,
+    from: string,
+    to: string,
+    chainId: ChainId,
+    connection: Web3Helper.Web3Connection<NetworkPluginID.PLUGIN_EVM>,
+) {
     const callData = interFace.encodeFunctionData('check_availability', [pid])
-    const data = await Services.Ethereum.call(
+    const data = await connection.callTransaction(
         {
             to,
             from,
diff --git a/packages/mask/src/plugins/RedPacket/Worker/apis/erc20Redpacket.ts b/packages/mask/src/plugins/RedPacket/Worker/apis/erc20Redpacket.ts
index 33d07a7d27e7..0cc6105e7a19 100644
--- a/packages/mask/src/plugins/RedPacket/Worker/apis/erc20Redpacket.ts
+++ b/packages/mask/src/plugins/RedPacket/Worker/apis/erc20Redpacket.ts
@@ -1,17 +1,8 @@
-import {
-    ChainId,
-    FungibleTokenDetailed,
-    FungibleTokenOutMask,
-    getTokenConstants,
-    getRedPacketConstants,
-    resolveChainName,
-    isSameAddress,
-    getChainDetailed,
-} from '@masknet/web3-shared-evm'
+import { isSameAddress, FungibleToken } from '@masknet/web3-shared-base'
+import { ChainId, SchemaType, getTokenConstants, getRedPacketConstants, chainResolver } from '@masknet/web3-shared-evm'
 import stringify from 'json-stable-stringify'
 import { first } from 'lodash-unified'
 import { tokenIntoMask } from '../../../ITO/SNSAdaptor/helpers'
-import { currentChainIdSettings } from '../../../Wallet/settings'
 import type { RedPacketJSONPayload } from '../../types'
 
 const TOKEN_FIELDS = `
@@ -68,14 +59,16 @@ type RedpacketFromSubgraphType = {
     message: string
     rpid: string
     shares: number
-    token: FungibleTokenOutMask
+    token: Omit<FungibleToken<ChainId, SchemaType.ERC20 | SchemaType.Native>, 'chainId'> & {
+        chain_id: ChainId
+    }
     total: string
     total_remaining: string
     txid: string
 }
 
-async function fetchFromRedPacketSubgraph<T>(query: string) {
-    const { SUBGRAPH_URL } = getRedPacketConstants(currentChainIdSettings.value)
+async function fetchFromRedPacketSubgraph<T>(chainId: ChainId, query: string) {
+    const { SUBGRAPH_URL } = getRedPacketConstants(chainId)
     if (!SUBGRAPH_URL) return null
     try {
         const response = await fetch(SUBGRAPH_URL, {
@@ -92,36 +85,45 @@ async function fetchFromRedPacketSubgraph<T>(query: string) {
     }
 }
 
-export async function getRedPacketTxid(rpid: string) {
-    const data = await fetchFromRedPacketSubgraph<{ redPackets: RedpacketFromSubgraphType[] }>(`
+export async function getRedPacketTxid(chainId: ChainId, rpid: string) {
+    const data = await fetchFromRedPacketSubgraph<{ redPackets: RedpacketFromSubgraphType[] }>(
+        chainId,
+        `
     {
         redPackets (where: { rpid: "${rpid.toLowerCase()}" }) {
             txid
         }
     }
-    `)
+    `,
+    )
     return first(data?.redPackets)?.txid
 }
 
-export async function getRedPacketHistory(address: string, chainId: ChainId) {
-    const { NATIVE_TOKEN_ADDRESS } = getTokenConstants(currentChainIdSettings.value)
+export async function getRedPacketHistory(chainId: ChainId, address: string) {
+    const { NATIVE_TOKEN_ADDRESS } = getTokenConstants(chainId)
 
-    const data = await fetchFromRedPacketSubgraph<{ redPackets: RedpacketFromSubgraphType[] }>(`
+    const data = await fetchFromRedPacketSubgraph<{ redPackets: RedpacketFromSubgraphType[] }>(
+        chainId,
+        `
     {
         redPackets (where: { creator: "${address.toLowerCase()}" }) {
             ${RED_PACKET_FIELDS}
         }
     }
-    `)
+    `,
+    )
 
     if (!data?.redPackets) return []
 
     return data.redPackets
         .map((x) => {
-            const token = tokenIntoMask({ ...x.token }) as FungibleTokenDetailed
+            const token = tokenIntoMask({ ...x.token }) as FungibleToken<ChainId, SchemaType.ERC20 | SchemaType.Native>
             if (isSameAddress(x.token.address, NATIVE_TOKEN_ADDRESS)) {
-                token.name = getChainDetailed(x.token.chain_id)?.nativeCurrency.name
-                token.symbol = getChainDetailed(chainId)?.nativeCurrency.symbol
+                const nativeCurrency = chainResolver.nativeCurrency(x.token.chain_id ?? chainId)
+                if (nativeCurrency) {
+                    token.name = nativeCurrency.name
+                    token.symbol = nativeCurrency.symbol
+                }
             }
 
             const redpacketPayload: RedPacketJSONPayload = {
@@ -140,7 +142,7 @@ export async function getRedPacketHistory(address: string, chainId: ChainId) {
                     message: x.message,
                 },
                 contract_version: x.contract_version,
-                network: resolveChainName(x.chain_id),
+                network: chainResolver.chainName(x.chain_id),
                 token,
                 claimers: x.claimers,
                 total_remaining: x.total_remaining,
diff --git a/packages/mask/src/plugins/RedPacket/Worker/apis/nftRedpacket.ts b/packages/mask/src/plugins/RedPacket/Worker/apis/nftRedpacket.ts
index ca93128a0483..54cce3b4cccf 100644
--- a/packages/mask/src/plugins/RedPacket/Worker/apis/nftRedpacket.ts
+++ b/packages/mask/src/plugins/RedPacket/Worker/apis/nftRedpacket.ts
@@ -1,8 +1,7 @@
-import { EthereumTokenType, getChainName, getNftRedPacketConstants } from '@masknet/web3-shared-evm'
+import { getNftRedPacketConstants, chainResolver, ChainId } from '@masknet/web3-shared-evm'
 import stringify from 'json-stable-stringify'
 import { first, pick } from 'lodash-unified'
 import { tokenIntoMask } from '../../../ITO/SNSAdaptor/helpers'
-import { currentChainIdSettings } from '../../../Wallet/settings'
 import type {
     NftRedPacketHistory,
     NftRedPacketJSONPayload,
@@ -62,8 +61,8 @@ const RED_PACKET_FIELDS = `
     }
 `
 
-async function fetchFromNFTRedPacketSubgraph<T>(query: string) {
-    const subgraphURL = getNftRedPacketConstants(currentChainIdSettings.value).SUBGRAPH_URL
+async function fetchFromNFTRedPacketSubgraph<T>(chainId: ChainId, query: string) {
+    const subgraphURL = getNftRedPacketConstants(chainId).SUBGRAPH_URL
     if (!subgraphURL) return null
     const response = await fetch(subgraphURL, {
         method: 'POST',
@@ -76,20 +75,25 @@ async function fetchFromNFTRedPacketSubgraph<T>(query: string) {
     return data
 }
 
-export async function getNftRedPacketTxid(rpid: string) {
-    const data = await fetchFromNFTRedPacketSubgraph<{ redPackets: NftRedPacketSubgraphOutMask[] }>(`
+export async function getNftRedPacketTxid(chainId: ChainId, rpid: string) {
+    const data = await fetchFromNFTRedPacketSubgraph<{ redPackets: NftRedPacketSubgraphOutMask[] }>(
+        chainId,
+        `
     {
         nftredPackets (where: { rpid: "${rpid.toLowerCase()}" }) {
             ${RED_PACKET_FIELDS}
         }
     }
-    `)
+    `,
+    )
     return first(data?.redPackets)?.txid
 }
 
 const PAGE_SIZE = 5
-export async function getNftRedPacketHistory(address: string, page: number) {
-    const data = await fetchFromNFTRedPacketSubgraph<{ nftredPackets: NftRedPacketSubgraphOutMask[] }>(`
+export async function getNftRedPacketHistory(chainId: ChainId, address: string, page: number) {
+    const data = await fetchFromNFTRedPacketSubgraph<{ nftredPackets: NftRedPacketSubgraphOutMask[] }>(
+        chainId,
+        `
     {
         nftredPackets (
           where: { creator: "${address.toLowerCase()}" },
@@ -101,7 +105,8 @@ export async function getNftRedPacketHistory(address: string, page: number) {
             ${RED_PACKET_FIELDS}
         }
     }
-    `)
+    `,
+    )
     if (!data?.nftredPackets) return []
     return data.nftredPackets.map((x) => {
         const nftRedPacketSubgraphInMask = {
@@ -111,7 +116,7 @@ export async function getNftRedPacketHistory(address: string, page: number) {
             creation_time: x.creation_time * 1000,
         } as NftRedPacketSubgraphInMask
         const redPacketBasic = pick(nftRedPacketSubgraphInMask, redPacketBasicKeys)
-        const network = getChainName(nftRedPacketSubgraphInMask.chain_id)
+        const network = chainResolver.chainNetworkType(nftRedPacketSubgraphInMask.chain_id)
         const sender = {
             address: nftRedPacketSubgraphInMask.creator.address,
             name: nftRedPacketSubgraphInMask.creator.name,
@@ -120,7 +125,6 @@ export async function getNftRedPacketHistory(address: string, page: number) {
         const payload = {
             sender,
             network,
-            token_type: EthereumTokenType.ERC721,
             token: pick(nftRedPacketSubgraphInMask.token, ['symbol', 'address', 'name', 'decimals']),
             ...redPacketBasic,
         } as NftRedPacketJSONPayload
diff --git a/packages/mask/src/plugins/RedPacket/Worker/services.ts b/packages/mask/src/plugins/RedPacket/Worker/services.ts
index b788f2e7f0af..bc4ed1b89e15 100644
--- a/packages/mask/src/plugins/RedPacket/Worker/services.ts
+++ b/packages/mask/src/plugins/RedPacket/Worker/services.ts
@@ -1,31 +1,21 @@
-import { ChainId, getRedPacketConstants } from '@masknet/web3-shared-evm'
-import type { RedPacketRecord } from '../types'
+import type { ChainId } from '@masknet/web3-shared-evm'
+import type { RedPacketRecord, RedPacketJSONPayloadFromChain } from '../types'
 import * as subgraph from './apis/subgraph'
-import * as chain from './apis/chain'
 import * as database from './database'
 import * as nftDb from './databaseForNft'
 
 export { addRedPacketNft, getRedPacketNft, updateRedPacketNft } from './databaseForNft'
 
-export async function discoverRedPacket(record: RedPacketRecord) {
+export async function discoverRedPacket(record: RedPacketRecord, chainId: ChainId) {
     if (record.contract_version === 1) {
-        const txid = await subgraph.getRedPacketTxid(record.id)
+        const txid = await subgraph.getRedPacketTxid(chainId, record.id)
         if (!txid) return
         record.id = txid
     }
     database.addRedPacket(record)
 }
 
-export async function getRedPacketHistory(address: string, chainId: ChainId, endBlock: number) {
-    const { HAPPY_RED_PACKET_ADDRESS_V4_BLOCK_HEIGHT } = getRedPacketConstants(chainId)
-
-    const redpacketsFromChain = await chain.getRedPacketHistory(
-        chainId,
-        HAPPY_RED_PACKET_ADDRESS_V4_BLOCK_HEIGHT,
-        endBlock,
-        address,
-    )
-
+export async function getRedPacketHistoryFromDatabase(redpacketsFromChain: RedPacketJSONPayloadFromChain[]) {
     // #region Inject password from database
     const redpacketsFromDatabase = await database.getAllRedpackets(redpacketsFromChain.map((x) => x.txid))
     return redpacketsFromChain.map((x) => {
@@ -40,7 +30,7 @@ export async function getRedPacketHistory(address: string, chainId: ChainId, end
 }
 
 export async function getNftRedPacketHistory(address: string, chainId: ChainId, page: number) {
-    const histories = await subgraph.getNftRedPacketHistory(address, page)
+    const histories = await subgraph.getNftRedPacketHistory(chainId, address, page)
     const historiesWithPassword = []
     for (const history of histories) {
         const record = await nftDb.getRedPacketNft(history.txid)
diff --git a/packages/mask/src/plugins/RedPacket/base.ts b/packages/mask/src/plugins/RedPacket/base.ts
index c1fe7aa7fc8b..3c2fc14a4bb2 100644
--- a/packages/mask/src/plugins/RedPacket/base.ts
+++ b/packages/mask/src/plugins/RedPacket/base.ts
@@ -1,5 +1,5 @@
 import type { Plugin } from '@masknet/plugin-infra'
-import { NetworkPluginID } from '@masknet/plugin-infra/web3'
+import { NetworkPluginID } from '@masknet/web3-shared-base'
 import { ChainId } from '@masknet/web3-shared-evm'
 import { RedPacketMetaKey, RedPacketNftMetaKey, RedPacketPluginID } from './constants'
 import { languages } from './locales/languages'
diff --git a/packages/mask/src/plugins/RedPacket/types.ts b/packages/mask/src/plugins/RedPacket/types.ts
index 4d94b4e98a59..2e8d32a6078b 100644
--- a/packages/mask/src/plugins/RedPacket/types.ts
+++ b/packages/mask/src/plugins/RedPacket/types.ts
@@ -1,11 +1,5 @@
-import type { ERC20TokenRecord } from '../Wallet/database/types'
-import type {
-    EthereumTokenType,
-    FungibleTokenDetailed,
-    ChainId,
-    ERC721TokenDetailed,
-    ERC721TokenOutMask,
-} from '@masknet/web3-shared-evm'
+import type { FungibleToken, NonFungibleToken, NonFungibleTokenContract } from '@masknet/web3-shared-base'
+import type { SchemaType, ChainId } from '@masknet/web3-shared-evm'
 
 // #region erc20 red packet
 export interface RedPacketRecord {
@@ -52,16 +46,14 @@ interface RedPacketBasic {
 }
 
 export interface RedPacketJSONPayload extends RedPacketBasic {
+    contract_version: number
     sender: {
         address: string
         name: string
         message: string
     }
-    contract_version: number
     network?: string
-    token_type?: EthereumTokenType.Native | EthereumTokenType.ERC20
-    token?: FungibleTokenDetailed
-    token_address?: string
+    token?: FungibleToken<ChainId, SchemaType.Native | SchemaType.ERC20>
     claimers?: Array<{ address: string; name: string }>
     total_remaining?: string
 }
@@ -96,15 +88,14 @@ export interface RedPacketNftJSONPayload {
 }
 
 export interface NftRedPacketJSONPayload extends RedPacketBasic {
+    contract_version: number
     sender: {
         address: string
         name: string
         message: string
     }
-    contract_version: number
     network?: string
-    token_type: EthereumTokenType.ERC721
-    token?: Pick<ERC20TokenRecord, 'address' | 'name' | 'decimals' | 'symbol'>
+    token?: Pick<FungibleToken<ChainId, SchemaType>, 'address' | 'name' | 'decimals' | 'symbol'>
 }
 
 export enum NFTSelectOption {
@@ -112,16 +103,10 @@ export enum NFTSelectOption {
     Partial = 'Partial',
 }
 
-interface ERC721TokenContract {
-    address: string
-    name: string
-    symbol: string
-    chain_id: number
-}
-
 export interface NftRedPacketSubgraphInMask extends Omit<RedPacketBasic, 'is_random'> {
-    token: ERC721TokenDetailed
-    token_contract: ERC721TokenContract
+    token: NonFungibleToken<ChainId, SchemaType>
+    contract_version: number
+    token_contract: NonFungibleTokenContract<ChainId, SchemaType>
     address: string
     chain_id: number
     message: string
@@ -137,8 +122,12 @@ export interface NftRedPacketSubgraphInMask extends Omit<RedPacketBasic, 'is_ran
     total_remaining: string
 }
 
+export type NonFungibleTokenOutMask = Omit<NonFungibleToken<ChainId, SchemaType.ERC721>, 'chainId'> & {
+    chain_id: ChainId
+}
+
 export interface NftRedPacketSubgraphOutMask extends Omit<NftRedPacketSubgraphInMask, 'token'> {
-    token: ERC721TokenOutMask
+    token: NonFungibleTokenOutMask
 }
 
 export interface NftRedPacketHistory extends NftRedPacketSubgraphInMask {
diff --git a/packages/mask/src/plugins/Savings/SNSAdaptor/SavingsDialog.tsx b/packages/mask/src/plugins/Savings/SNSAdaptor/SavingsDialog.tsx
index 86eadc23d02e..dee2a02a2b79 100644
--- a/packages/mask/src/plugins/Savings/SNSAdaptor/SavingsDialog.tsx
+++ b/packages/mask/src/plugins/Savings/SNSAdaptor/SavingsDialog.tsx
@@ -6,14 +6,10 @@ import { FolderTabPanel, FolderTabs } from '@masknet/theme'
 import {
     createContract,
     ChainId,
-    FungibleTokenDetailed,
-    getChainIdFromNetworkType,
-    useChainId,
-    useWeb3,
-    EthereumTokenType,
-    useFungibleTokensDetailed,
+    SchemaType,
     getAaveConstants,
     ZERO_ADDRESS,
+    networkResolver,
 } from '@masknet/web3-shared-evm'
 import { useI18N } from '../../../utils'
 import { InjectedDialog } from '@masknet/shared'
@@ -33,7 +29,8 @@ import { AAVEProtocol } from '../protocols/AAVEProtocol'
 import { LDO_PAIRS } from '../constants'
 import type { AbiItem } from 'web3-utils'
 import { flatten, compact, chunk } from 'lodash-unified'
-
+import { useChainId, useFungibleTokens, useWeb3 } from '@masknet/plugin-infra/web3'
+import { FungibleToken, NetworkPluginID } from '@masknet/web3-shared-base'
 export interface SavingsDialogProps {
     open: boolean
     onClose?: () => void
@@ -44,16 +41,16 @@ export function SavingsDialog({ open, onClose }: SavingsDialogProps) {
     const isDashboard = isDashboardPage()
     const { classes } = useStyles({ isDashboard })
 
-    const currentChainId = useChainId()
+    const currentChainId = useChainId(NetworkPluginID.PLUGIN_EVM)
     const [chainId, setChainId] = useState<ChainId>(currentChainId)
+    const web3 = useWeb3(NetworkPluginID.PLUGIN_EVM, { chainId })
 
-    const web3 = useWeb3({ chainId })
     const [tab, setTab] = useState<TabType>(TabType.Deposit)
     const [selectedProtocol, setSelectedProtocol] = useState<SavingsProtocol | null>(null)
 
     const { value: chains = EMPTY_LIST } = useAsync(async () => {
         const networks = await WalletRPC.getSupportedNetworks()
-        return networks.map((network) => getChainIdFromNetworkType(network))
+        return networks.map((network) => networkResolver.networkChainId(network))
     }, [])
 
     const { value: aaveTokens } = useAsync(async () => {
@@ -78,18 +75,20 @@ export function SavingsDialog({ open, onClose }: SavingsDialogProps) {
         })
     }, [web3, chainId])
 
-    const { value: detailedAaveTokens } = useFungibleTokensDetailed(
-        compact(flatten(aaveTokens ?? [])).map((m) => {
-            return { address: m, type: EthereumTokenType.ERC20 }
-        }) ?? [],
-        chainId,
+    const { value: detailedAaveTokens } = useFungibleTokens(
+        NetworkPluginID.PLUGIN_EVM,
+        compact(flatten(aaveTokens ?? [])),
+        {
+            chainId,
+        },
     )
 
     const protocols = useMemo(
         () => [
             ...LDO_PAIRS.filter((x) => x[0].chainId === chainId).map((pair) => new LidoProtocol(pair)),
             ...chunk(detailedAaveTokens, 2).map(
-                (pair) => new AAVEProtocol(pair as [FungibleTokenDetailed, FungibleTokenDetailed]),
+                (pair) =>
+                    new AAVEProtocol(pair as [FungibleToken<ChainId, SchemaType>, FungibleToken<ChainId, SchemaType>]),
             ),
         ],
         [chainId, detailedAaveTokens, tab],
@@ -128,7 +127,7 @@ export function SavingsDialog({ open, onClose }: SavingsDialogProps) {
                                         chainId={chainId}
                                         setChainId={setChainId}
                                         classes={classes}
-                                        chains={chains}
+                                        chains={chains.filter(Boolean) as ChainId[]}
                                     />
                                 </div>
                                 <div className={classes.tableTabWrapper}>
diff --git a/packages/mask/src/plugins/Savings/SNSAdaptor/SavingsForm.tsx b/packages/mask/src/plugins/Savings/SNSAdaptor/SavingsForm.tsx
index 47d5a9576b6c..e95fb556534c 100644
--- a/packages/mask/src/plugins/Savings/SNSAdaptor/SavingsForm.tsx
+++ b/packages/mask/src/plugins/Savings/SNSAdaptor/SavingsForm.tsx
@@ -1,42 +1,44 @@
+import { useState, useCallback, useMemo } from 'react'
+import { useAsync, useAsyncFn } from 'react-use'
+import type { AbiItem } from 'web3-utils'
+import BigNumber from 'bignumber.js'
 import { unreachable } from '@dimensiondev/kit'
-import { FormattedCurrency, LoadingAnimation, TokenAmountPanel, TokenIcon, useOpenShareTxDialog } from '@masknet/shared'
-import { useRemoteControlledDialog } from '@masknet/shared-base-ui'
-import AaveLendingPoolAddressProviderABI from '@masknet/web3-contracts/abis/AaveLendingPoolAddressProvider.json'
-import type { AaveLendingPoolAddressProvider } from '@masknet/web3-contracts/types/AaveLendingPoolAddressProvider'
-import { isLessThan, rightShift } from '@masknet/web3-shared-base'
 import {
-    createContract,
-    createERC20Token,
+    isLessThan,
+    rightShift,
     createLookupTableResolver,
-    EthereumTokenType,
+    NetworkPluginID,
+    ZERO,
+    isSameAddress,
     formatBalance,
     formatCurrency,
+} from '@masknet/web3-shared-base'
+import {
+    createContract,
+    createERC20Token,
+    SchemaType,
     getAaveConstants,
-    isSameAddress,
-    resolveChainName,
-    useAccount,
-    useFungibleTokenBalance,
     useTokenConstants,
-    useWeb3,
     ZERO_ADDRESS,
+    chainResolver,
 } from '@masknet/web3-shared-evm'
-import { Typography } from '@mui/material'
-import BigNumber from 'bignumber.js'
-import { useCallback, useMemo, useState } from 'react'
-import { useAsync, useAsyncFn } from 'react-use'
-import type { AbiItem } from 'web3-utils'
-import { ActionButtonPromise } from '../../../extension/options-page/DashboardComponents/ActionButton'
-import { activatedSocialNetworkUI } from '../../../social-network'
-import { isTwitter } from '../../../social-network-adaptor/twitter.com/base'
+import { useAccount, useFungibleTokenBalance, useFungibleTokenPrice, useWeb3 } from '@masknet/plugin-infra/web3'
+import { FormattedCurrency, LoadingAnimation, TokenAmountPanel, TokenIcon, useOpenShareTxDialog } from '@masknet/shared'
+import type { AaveLendingPoolAddressProvider } from '@masknet/web3-contracts/types/AaveLendingPoolAddressProvider'
+import AaveLendingPoolAddressProviderABI from '@masknet/web3-contracts/abis/AaveLendingPoolAddressProvider.json'
+import { useRemoteControlledDialog } from '@masknet/shared-base-ui'
 import { useI18N } from '../../../utils'
-import { EthereumChainBoundary } from '../../../web3/UI/EthereumChainBoundary'
-import { EthereumERC20TokenApprovedBoundary } from '../../../web3/UI/EthereumERC20TokenApprovedBoundary'
-import { EthereumWalletConnectedBoundary } from '../../../web3/UI/EthereumWalletConnectedBoundary'
+import { WalletConnectedBoundary } from '../../../web3/UI/WalletConnectedBoundary'
+import { ChainBoundary } from '../../../web3/UI/ChainBoundary'
+import { ActionButtonPromise } from '../../../extension/options-page/DashboardComponents/ActionButton'
 import { PluginTraderMessages } from '../../Trader/messages'
 import type { Coin } from '../../Trader/types'
-import { useTokenPrice } from '../../Wallet/hooks/useTokenPrice'
 import { ProtocolType, SavingsProtocol, TabType } from '../types'
 import { useStyles } from './SavingsFormStyles'
+import { EthereumERC20TokenApprovedBoundary } from '../../../web3/UI/EthereumERC20TokenApprovedBoundary'
+import { Typography } from '@mui/material'
+import { isTwitter } from '../../../social-network-adaptor/twitter.com/base'
+import { activatedSocialNetworkUI } from '../../../social-network'
 
 export interface SavingsFormProps {
     chainId: number
@@ -57,13 +59,13 @@ export function SavingsForm({ chainId, protocol, tab, onClose }: SavingsFormProp
     const { t } = useI18N()
     const { classes } = useStyles()
 
-    const web3 = useWeb3({ chainId })
-    const account = useAccount()
+    const web3 = useWeb3(NetworkPluginID.PLUGIN_EVM, { chainId })
+    const account = useAccount(NetworkPluginID.PLUGIN_EVM)
     const { NATIVE_TOKEN_ADDRESS } = useTokenConstants()
     const [inputAmount, setInputAmount] = useState('')
-    const [estimatedGas, setEstimatedGas] = useState<BigNumber.Value>(new BigNumber('0'))
+    const [estimatedGas, setEstimatedGas] = useState<BigNumber.Value>(ZERO)
 
-    const { value: nativeTokenBalance } = useFungibleTokenBalance(EthereumTokenType.Native, '', chainId)
+    const { value: nativeTokenBalance } = useFungibleTokenBalance(NetworkPluginID.PLUGIN_EVM, '', { chainId })
 
     const { setDialog: openSwapDialog } = useRemoteControlledDialog(PluginTraderMessages.swapDialogUpdated)
 
@@ -85,11 +87,9 @@ export function SavingsForm({ chainId, protocol, tab, onClose }: SavingsFormProp
 
     // #region form variables
     const { value: inputTokenBalance } = useFungibleTokenBalance(
-        isSameAddress(protocol.bareToken.address, NATIVE_TOKEN_ADDRESS)
-            ? EthereumTokenType.Native
-            : protocol.bareToken.type ?? EthereumTokenType.Native,
+        NetworkPluginID.PLUGIN_EVM,
         protocol.bareToken.address,
-        chainId,
+        { chainId },
     )
     const tokenAmount = useMemo(
         () => new BigNumber(rightShift(inputAmount || '0', protocol.bareToken.decimals)),
@@ -101,7 +101,7 @@ export function SavingsForm({ chainId, protocol, tab, onClose }: SavingsFormProp
     )
 
     const { loading } = useAsync(async () => {
-        if (!(tokenAmount.toNumber() > 0)) return
+        if (!web3 || !(tokenAmount.toNumber() > 0)) return
         try {
             setEstimatedGas(
                 tab === TabType.Deposit
@@ -129,9 +129,10 @@ export function SavingsForm({ chainId, protocol, tab, onClose }: SavingsFormProp
         return ''
     }, [inputAmount, tokenAmount, nativeTokenBalance, balanceAsBN])
 
-    const tokenPrice = useTokenPrice(
-        chainId,
+    const { value: tokenPrice = 0 } = useFungibleTokenPrice(
+        NetworkPluginID.PLUGIN_EVM,
         !isSameAddress(protocol.bareToken.address, NATIVE_TOKEN_ADDRESS) ? protocol.bareToken.address : undefined,
+        { chainId },
     )
 
     const tokenValueUSD = useMemo(
@@ -155,8 +156,8 @@ export function SavingsForm({ chainId, protocol, tab, onClose }: SavingsFormProp
 
         return {
             approveToken:
-                token.type === EthereumTokenType.ERC20
-                    ? createERC20Token(chainId, token.address, token.decimals, token.name, token.symbol)
+                token.schema === SchemaType.ERC20
+                    ? createERC20Token(chainId, token.address, token.name, token.symbol, token.decimals)
                     : undefined,
             approveAmount: new BigNumber(inputAmount).shiftedBy(token.decimals),
             approveAddress: poolAddress,
@@ -167,10 +168,11 @@ export function SavingsForm({ chainId, protocol, tab, onClose }: SavingsFormProp
     const shareText = t('promote_savings', {
         amount: inputAmount,
         symbol: protocol.bareToken.symbol,
-        chain: resolveChainName(chainId),
+        chain: chainResolver.chainName(chainId),
         account: isTwitter(activatedSocialNetworkUI) ? t('twitter_account') : t('facebook_account'),
     })
     const [, executor] = useAsyncFn(async () => {
+        if (!web3) return
         switch (tab) {
             case TabType.Deposit:
                 const hash = await protocol.deposit(account, chainId, web3, tokenAmount)
@@ -210,17 +212,17 @@ export function SavingsForm({ chainId, protocol, tab, onClose }: SavingsFormProp
     const buttonDom = useMemo(() => {
         if (tab === TabType.Deposit)
             return (
-                <EthereumChainBoundary
-                    chainId={chainId}
+                <ChainBoundary
+                    expectedPluginID={NetworkPluginID.PLUGIN_EVM}
+                    expectedChainId={chainId}
                     noSwitchNetworkTip
-                    disablePadding
                     ActionButtonPromiseProps={{
                         fullWidth: true,
                         classes: { root: classes.button, disabled: classes.disabledButton },
                         color: 'primary',
                         style: { padding: '13px 0', marginTop: 0 },
                     }}>
-                    <EthereumWalletConnectedBoundary
+                    <WalletConnectedBoundary
                         ActionButtonProps={{ color: 'primary', classes: { root: classes.button } }}
                         classes={{ connectWallet: classes.connectWallet, button: classes.button }}>
                         <EthereumERC20TokenApprovedBoundary
@@ -247,22 +249,22 @@ export function SavingsForm({ chainId, protocol, tab, onClose }: SavingsFormProp
                                 executor={executor}
                             />
                         </EthereumERC20TokenApprovedBoundary>
-                    </EthereumWalletConnectedBoundary>
-                </EthereumChainBoundary>
+                    </WalletConnectedBoundary>
+                </ChainBoundary>
             )
 
         return (
-            <EthereumChainBoundary
-                chainId={chainId}
+            <ChainBoundary
+                expectedPluginID={NetworkPluginID.PLUGIN_EVM}
+                expectedChainId={chainId}
                 noSwitchNetworkTip
-                disablePadding
                 ActionButtonPromiseProps={{
                     fullWidth: true,
                     classes: { root: classes.button, disabled: classes.disabledButton },
                     color: 'primary',
                     style: { padding: '13px 0', marginTop: 0 },
                 }}>
-                <EthereumWalletConnectedBoundary
+                <WalletConnectedBoundary
                     ActionButtonProps={{ color: 'primary', classes: { root: classes.button } }}
                     classes={{ connectWallet: classes.connectWallet, button: classes.button }}>
                     <ActionButtonPromise
@@ -279,8 +281,8 @@ export function SavingsForm({ chainId, protocol, tab, onClose }: SavingsFormProp
                         noUpdateEffect
                         executor={executor}
                     />
-                </EthereumWalletConnectedBoundary>
-            </EthereumChainBoundary>
+                </WalletConnectedBoundary>
+            </ChainBoundary>
         )
     }, [executor, validationMessage, needsSwap, protocol, tab, approvalData, chainId])
 
diff --git a/packages/mask/src/plugins/Savings/SNSAdaptor/SavingsTable.tsx b/packages/mask/src/plugins/Savings/SNSAdaptor/SavingsTable.tsx
index 161dd223be89..91d4171c1f78 100644
--- a/packages/mask/src/plugins/Savings/SNSAdaptor/SavingsTable.tsx
+++ b/packages/mask/src/plugins/Savings/SNSAdaptor/SavingsTable.tsx
@@ -2,12 +2,13 @@ import { useAsync } from 'react-use'
 import { makeStyles } from '@masknet/theme'
 import { Box, Button, Grid, Typography } from '@mui/material'
 import { FormattedBalance, TokenIcon } from '@masknet/shared'
-import { isZero, rightShift } from '@masknet/web3-shared-base'
-import { ChainId, formatBalance, isSameAddress, useAccount, useAssets, useWeb3 } from '@masknet/web3-shared-evm'
+import { CircleLoadingIcon, DirectIcon } from '@masknet/icons'
+import { isZero, rightShift, formatBalance, isSameAddress, NetworkPluginID } from '@masknet/web3-shared-base'
+import type { ChainId, Web3 } from '@masknet/web3-shared-evm'
 import { ProviderIconURLs } from './IconURL'
 import { useI18N } from '../../../utils'
 import { SavingsProtocol, TabType } from '../types'
-import { CircleLoadingIcon, DirectIcon } from '@masknet/icons'
+import { useAccount, useWeb3, useFungibleAssets } from '@masknet/plugin-infra/web3'
 
 const useStyles = makeStyles()((theme, props) => ({
     containerWrap: {
@@ -103,21 +104,17 @@ export function SavingsTable({ chainId, tab, protocols, setTab, setSelectedProto
     const { t } = useI18N()
     const { classes } = useStyles()
 
-    const web3 = useWeb3({ chainId })
+    const web3 = useWeb3(NetworkPluginID.PLUGIN_EVM, { chainId })
+    const account = useAccount(NetworkPluginID.PLUGIN_EVM)
 
-    const account = useAccount()
-
-    const { value: assets, loading: getAssetsLoading } = useAssets(
-        protocols.map((x) => x.bareToken),
-        chainId,
-    )
+    const { value: assets, loading: getAssetsLoading } = useFungibleAssets(NetworkPluginID.PLUGIN_EVM)
 
     // Only fetch protocol APR and Balance on chainId change
     const { loading } = useAsync(async () => {
         await Promise.all(
             protocols.map(async (protocol) => {
-                protocol.updateApr(chainId, web3)
-                protocol.updateBalance(chainId, web3, account)
+                protocol.updateApr(chainId, web3 as Web3)
+                protocol.updateBalance(chainId, web3 as Web3, account)
             }),
         )
     }, [chainId, web3, account, protocols])
@@ -178,8 +175,8 @@ export function SavingsTable({ chainId, tab, protocols, setTab, setSelectedProto
                                         <FormattedBalance
                                             value={
                                                 tab === TabType.Deposit
-                                                    ? assets.find((x) =>
-                                                          isSameAddress(x.token.address, protocol.bareToken.address),
+                                                    ? assets!.find((x) =>
+                                                          isSameAddress(x.address, protocol.bareToken.address),
                                                       )?.balance
                                                     : protocol.balance
                                             }
diff --git a/packages/mask/src/plugins/Savings/base.ts b/packages/mask/src/plugins/Savings/base.ts
index 617e7809ef65..51b9ef9821f1 100644
--- a/packages/mask/src/plugins/Savings/base.ts
+++ b/packages/mask/src/plugins/Savings/base.ts
@@ -1,5 +1,5 @@
 import type { Plugin } from '@masknet/plugin-infra'
-import { NetworkPluginID } from '@masknet/plugin-infra/web3'
+import { NetworkPluginID } from '@masknet/web3-shared-base'
 import { ChainId } from '@masknet/web3-shared-evm'
 import { SAVINGS_PLUGIN_ID } from './constants'
 
diff --git a/packages/mask/src/plugins/Savings/constants.ts b/packages/mask/src/plugins/Savings/constants.ts
index 83f06963c5e3..5aea64af3f1a 100644
--- a/packages/mask/src/plugins/Savings/constants.ts
+++ b/packages/mask/src/plugins/Savings/constants.ts
@@ -1,16 +1,17 @@
-import { ChainId, createERC20Tokens, createNativeToken, FungibleTokenDetailed } from '@masknet/web3-shared-evm'
+import type { FungibleToken } from '@masknet/web3-shared-base'
+import { ChainId, createERC20Tokens, createNativeToken, SchemaType } from '@masknet/web3-shared-evm'
 
 export const SAVINGS_PLUGIN_NAME = 'Savings'
 export const SAVINGS_PLUGIN_ID = 'com.savings'
 
-export const LDO_PAIRS: Array<[FungibleTokenDetailed, FungibleTokenDetailed]> = [
+export const LDO_PAIRS: Array<[FungibleToken<ChainId, SchemaType>, FungibleToken<ChainId, SchemaType>]> = [
     [
         createNativeToken(ChainId.Mainnet),
         createERC20Tokens('LDO_stETH_ADDRESS', 'Liquid staked Ether 2.0', 'stETH', 18)[ChainId.Mainnet],
     ],
 ]
 
-export const AAVE_PAIRS: Array<[FungibleTokenDetailed, FungibleTokenDetailed]> = [
+export const AAVE_PAIRS: Array<[FungibleToken<ChainId, SchemaType>, FungibleToken<ChainId, SchemaType>]> = [
     [
         createERC20Tokens('USDT_ADDRESS', 'Tether USD', 'USDT', 6)[ChainId.Mainnet],
         createERC20Tokens('aUSDT_ADDRESS', 'Aave Interest bearing USDT', 'aUSDT', 6)[ChainId.Mainnet],
diff --git a/packages/mask/src/plugins/Savings/protocols/AAVEProtocol.ts b/packages/mask/src/plugins/Savings/protocols/AAVEProtocol.ts
index 9290417d100f..4c1ddaf1e699 100644
--- a/packages/mask/src/plugins/Savings/protocols/AAVEProtocol.ts
+++ b/packages/mask/src/plugins/Savings/protocols/AAVEProtocol.ts
@@ -1,21 +1,21 @@
+import BigNumber from 'bignumber.js'
+import type Web3 from 'web3'
+import type { AbiItem } from 'web3-utils'
 import AaveLendingPoolABI from '@masknet/web3-contracts/abis/AaveLendingPool.json'
 import AaveLendingPoolAddressProviderABI from '@masknet/web3-contracts/abis/AaveLendingPoolAddressProvider.json'
 import ERC20ABI from '@masknet/web3-contracts/abis/ERC20.json'
 import type { AaveLendingPool } from '@masknet/web3-contracts/types/AaveLendingPool'
 import type { AaveLendingPoolAddressProvider } from '@masknet/web3-contracts/types/AaveLendingPoolAddressProvider'
 import type { ERC20 } from '@masknet/web3-contracts/types/ERC20'
-import { pow10, ZERO } from '@masknet/web3-shared-base'
+import { FungibleToken, pow10, ZERO } from '@masknet/web3-shared-base'
 import {
     ChainId,
     createContract,
-    FungibleTokenDetailed,
     getAaveConstants,
+    SchemaType,
     TransactionEventType,
     ZERO_ADDRESS,
 } from '@masknet/web3-shared-evm'
-import BigNumber from 'bignumber.js'
-import type Web3 from 'web3'
-import type { AbiItem } from 'web3-utils'
 import { ProtocolType, SavingsProtocol } from '../types'
 
 export class AAVEProtocol implements SavingsProtocol {
@@ -24,7 +24,7 @@ export class AAVEProtocol implements SavingsProtocol {
     private _apr = '0.00'
     private _balance = ZERO
 
-    constructor(readonly pair: [FungibleTokenDetailed, FungibleTokenDetailed]) {}
+    constructor(readonly pair: [FungibleToken<ChainId, SchemaType>, FungibleToken<ChainId, SchemaType>]) {}
 
     get type() {
         return ProtocolType.AAVE
diff --git a/packages/mask/src/plugins/Savings/protocols/LDOProtocol.ts b/packages/mask/src/plugins/Savings/protocols/LDOProtocol.ts
index 47abded02c94..a7a6744162c8 100644
--- a/packages/mask/src/plugins/Savings/protocols/LDOProtocol.ts
+++ b/packages/mask/src/plugins/Savings/protocols/LDOProtocol.ts
@@ -4,12 +4,12 @@ import BigNumber from 'bignumber.js'
 import {
     ChainId,
     createContract,
-    FungibleTokenDetailed,
     getLidoConstants,
+    SchemaType,
     TransactionEventType,
     ZERO_ADDRESS,
 } from '@masknet/web3-shared-evm'
-import { ZERO } from '@masknet/web3-shared-base'
+import { FungibleToken, ZERO } from '@masknet/web3-shared-base'
 import type { Lido } from '@masknet/web3-contracts/types/Lido'
 import LidoABI from '@masknet/web3-contracts/abis/Lido.json'
 import { ProtocolType, SavingsProtocol } from '../types'
@@ -20,7 +20,7 @@ export class LidoProtocol implements SavingsProtocol {
 
     readonly type = ProtocolType.Lido
 
-    constructor(readonly pair: [FungibleTokenDetailed, FungibleTokenDetailed]) {}
+    constructor(readonly pair: [FungibleToken<ChainId, SchemaType>, FungibleToken<ChainId, SchemaType>]) {}
 
     get apr() {
         return this._apr
diff --git a/packages/mask/src/plugins/Savings/types.ts b/packages/mask/src/plugins/Savings/types.ts
index b497fd9fc2c3..135b796a111d 100644
--- a/packages/mask/src/plugins/Savings/types.ts
+++ b/packages/mask/src/plugins/Savings/types.ts
@@ -1,6 +1,7 @@
 import type Web3 from 'web3'
 import type BigNumber from 'bignumber.js'
-import type { ChainId, FungibleTokenDetailed } from '@masknet/web3-shared-evm'
+import type { ChainId, SchemaType } from '@masknet/web3-shared-evm'
+import type { FungibleToken } from '@masknet/web3-shared-base'
 
 export enum TabType {
     Deposit = 'deposit',
@@ -27,10 +28,10 @@ export interface SavingsProtocol {
     /**
      * combine a bare token and a staked token with being a pair
      */
-    readonly pair: [FungibleTokenDetailed, FungibleTokenDetailed]
+    readonly pair: [FungibleToken<ChainId, SchemaType>, FungibleToken<ChainId, SchemaType>]
 
-    readonly bareToken: FungibleTokenDetailed
-    readonly stakeToken: FungibleTokenDetailed
+    readonly bareToken: FungibleToken<ChainId, SchemaType>
+    readonly stakeToken: FungibleToken<ChainId, SchemaType>
 
     updateApr(chainId: ChainId, web3: Web3): Promise<void>
     updateBalance(chainId: ChainId, web3: Web3, account: string): Promise<void>
diff --git a/packages/mask/src/plugins/Snapshot/SNSAdaptor/InformationCard.tsx b/packages/mask/src/plugins/Snapshot/SNSAdaptor/InformationCard.tsx
index 9c57725cb484..9db85f13ced1 100644
--- a/packages/mask/src/plugins/Snapshot/SNSAdaptor/InformationCard.tsx
+++ b/packages/mask/src/plugins/Snapshot/SNSAdaptor/InformationCard.tsx
@@ -1,10 +1,4 @@
-import {
-    formatEthereumAddress,
-    resolveAddressLinkOnExplorer,
-    resolveBlockLinkOnExplorer,
-    resolveIPFSLink,
-    useChainId,
-} from '@masknet/web3-shared-evm'
+import { formatEthereumAddress, explorerResolver, resolveIPFSLink } from '@masknet/web3-shared-evm'
 import { Avatar, Box, Link, Typography } from '@mui/material'
 import { makeStyles } from '@masknet/theme'
 import OpenInNew from '@mui/icons-material/OpenInNew'
@@ -16,6 +10,8 @@ import { EthereumBlockie } from '../../../web3/UI/EthereumBlockie'
 import { SnapshotContext } from '../context'
 import { useProposal } from './hooks/useProposal'
 import { SnapshotCard } from './SnapshotCard'
+import { useChainId } from '@masknet/plugin-infra/web3'
+import { NetworkPluginID } from '@masknet/web3-shared-base'
 
 export interface InformationCardProps {}
 
@@ -64,7 +60,7 @@ export function InfoField(props: InfoFieldProps) {
 export function InformationCard(props: InformationCardProps) {
     const { classes } = useStyles()
     const { t } = useI18N()
-    const chainId = useChainId()
+    const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
 
     const identifier = useContext(SnapshotContext)
     const { payload: proposal } = useProposal(identifier.id)
@@ -83,7 +79,7 @@ export function InformationCard(props: InformationCardProps) {
                                     className={classes.link}
                                     target="_blank"
                                     rel="noopener"
-                                    href={resolveAddressLinkOnExplorer(chainId, strategy.params.address)}>
+                                    href={explorerResolver.addressLink(chainId, strategy.params.address)}>
                                     <TokenIcon address={strategy.params.address} />
                                 </Link>
                             ))}
@@ -94,7 +90,7 @@ export function InformationCard(props: InformationCardProps) {
                         className={classes.link}
                         target="_blank"
                         rel="noopener"
-                        href={resolveAddressLinkOnExplorer(chainId, proposal.address)}>
+                        href={explorerResolver.addressLink(chainId, proposal.address)}>
                         <div className={classes.avatarWrapper}>
                             {proposal.authorAvatar ? (
                                 <Avatar src={resolveIPFSLink(proposal.authorAvatar)} className={classes.avatar} />
@@ -120,7 +116,7 @@ export function InformationCard(props: InformationCardProps) {
                         className={classes.link}
                         target="_blank"
                         rel="noopener"
-                        href={resolveBlockLinkOnExplorer(chainId, snapshot)}>
+                        href={explorerResolver.blockLink(chainId, Number.parseInt(snapshot, 10))}>
                         {snapshot}
                         <OpenInNew fontSize="small" />
                     </Link>
diff --git a/packages/mask/src/plugins/Snapshot/SNSAdaptor/Snapshot.tsx b/packages/mask/src/plugins/Snapshot/SNSAdaptor/Snapshot.tsx
index 8b25af25e4e5..c1603f37b75c 100644
--- a/packages/mask/src/plugins/Snapshot/SNSAdaptor/Snapshot.tsx
+++ b/packages/mask/src/plugins/Snapshot/SNSAdaptor/Snapshot.tsx
@@ -5,8 +5,9 @@ import { SnapshotContext } from '../context'
 import { useProposal } from './hooks/useProposal'
 import { ProposalTab } from './ProposalTab'
 import { ProgressTab } from './ProgressTab'
-import { useChainId } from '@masknet/web3-shared-evm'
-import { EthereumChainBoundary } from '../../../web3/UI/EthereumChainBoundary'
+import { ChainBoundary } from '../../../web3/UI/ChainBoundary'
+import { useChainId } from '@masknet/plugin-infra/web3'
+import { NetworkPluginID } from '@masknet/web3-shared-base'
 
 const useStyles = makeStyles()((theme) => {
     return {
@@ -73,7 +74,7 @@ export function Snapshot() {
     const { classes } = useStyles()
     const identifier = useContext(SnapshotContext)
     const { payload: proposal } = useProposal(identifier.id)
-    const chainId = useChainId()
+    const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
     const [tabIndex, setTabIndex] = useState(0)
     const tabs = [
         <Tab className={classes.tab} key="proposal" label="Proposal" />,
@@ -126,7 +127,11 @@ export function Snapshot() {
                 </CardContent>
             </Card>
             <Box style={{ padding: 12 }}>
-                <EthereumChainBoundary chainId={chainId} renderInTimeline />
+                <ChainBoundary
+                    expectedPluginID={NetworkPluginID.PLUGIN_EVM}
+                    expectedChainId={chainId}
+                    renderInTimeline
+                />
             </Box>
         </>
     )
diff --git a/packages/mask/src/plugins/Snapshot/SNSAdaptor/Vote.tsx b/packages/mask/src/plugins/Snapshot/SNSAdaptor/Vote.tsx
index f106f366b420..5ff087260fce 100644
--- a/packages/mask/src/plugins/Snapshot/SNSAdaptor/Vote.tsx
+++ b/packages/mask/src/plugins/Snapshot/SNSAdaptor/Vote.tsx
@@ -1,7 +1,7 @@
-import { useBlockie } from '@masknet/web3-shared-evm'
 import { Avatar, Box } from '@mui/material'
 import { makeStyles } from '@masknet/theme'
 import type { VoteItem as VoteType } from '../types'
+import { useBlockie } from '@masknet/plugin-infra/web3'
 
 const useStyles = makeStyles()({
     avatar: {
diff --git a/packages/mask/src/plugins/Snapshot/SNSAdaptor/VoteConfirmDialog.tsx b/packages/mask/src/plugins/Snapshot/SNSAdaptor/VoteConfirmDialog.tsx
index 54ab254ce7a0..1a7ca569c8d5 100644
--- a/packages/mask/src/plugins/Snapshot/SNSAdaptor/VoteConfirmDialog.tsx
+++ b/packages/mask/src/plugins/Snapshot/SNSAdaptor/VoteConfirmDialog.tsx
@@ -12,11 +12,11 @@ import {
 import { makeStyles } from '@masknet/theme'
 import millify from 'millify'
 import OpenInNew from '@mui/icons-material/OpenInNew'
-import { resolveBlockLinkOnExplorer, ChainId } from '@masknet/web3-shared-evm'
+import { ChainId, explorerResolver } from '@masknet/web3-shared-evm'
 import { useI18N } from '../../../utils'
 import { InjectedDialog } from '@masknet/shared'
 import { InfoField } from './InformationCard'
-import { EthereumWalletConnectedBoundary } from '../../../web3/UI/EthereumWalletConnectedBoundary'
+import { WalletConnectedBoundary } from '../../../web3/UI/WalletConnectedBoundary'
 
 const useStyles = makeStyles()((theme) => ({
     card: {
@@ -87,7 +87,7 @@ export function VoteConfirmDialog(props: VoteConfirmDialogProps) {
                                     className={classes.link}
                                     target="_blank"
                                     rel="noopener"
-                                    href={resolveBlockLinkOnExplorer(ChainId.Mainnet, snapshot)}>
+                                    href={explorerResolver.blockLink(ChainId.Mainnet, Number.parseInt(snapshot, 10))}>
                                     {snapshot}
                                     <OpenInNew fontSize="small" />
                                 </Link>
@@ -100,7 +100,7 @@ export function VoteConfirmDialog(props: VoteConfirmDialogProps) {
                 </Card>
             </DialogContent>
             <DialogActions>
-                <EthereumWalletConnectedBoundary
+                <WalletConnectedBoundary
                     offChain
                     classes={{ connectWallet: classes.button, unlockMetaMask: classes.button }}>
                     <Button
@@ -116,7 +116,7 @@ export function VoteConfirmDialog(props: VoteConfirmDialogProps) {
                             t('plugin_snapshot_vote')
                         )}
                     </Button>
-                </EthereumWalletConnectedBoundary>
+                </WalletConnectedBoundary>
             </DialogActions>
         </InjectedDialog>
     )
diff --git a/packages/mask/src/plugins/Snapshot/SNSAdaptor/VotesCard.tsx b/packages/mask/src/plugins/Snapshot/SNSAdaptor/VotesCard.tsx
index b473f4db44aa..31f656a33e54 100644
--- a/packages/mask/src/plugins/Snapshot/SNSAdaptor/VotesCard.tsx
+++ b/packages/mask/src/plugins/Snapshot/SNSAdaptor/VotesCard.tsx
@@ -1,10 +1,4 @@
-import {
-    formatEthereumAddress,
-    resolveAddressLinkOnExplorer,
-    resolveIPFSLink,
-    useChainId,
-    formatPercentage,
-} from '@masknet/web3-shared-evm'
+import { formatEthereumAddress, explorerResolver, resolveIPFSLink, formatPercentage } from '@masknet/web3-shared-evm'
 import { Avatar, Badge, Box, Link, List, ListItem, Typography } from '@mui/material'
 import { makeStyles, ShadowRootTooltip } from '@masknet/theme'
 import classNames from 'classnames'
@@ -18,6 +12,8 @@ import { useVotes } from './hooks/useVotes'
 import { LoadingCard } from './LoadingCard'
 import { LoadingFailCard } from './LoadingFailCard'
 import { SnapshotCard } from './SnapshotCard'
+import { useChainId } from '@masknet/plugin-infra/web3'
+import { NetworkPluginID } from '@masknet/web3-shared-base'
 
 const useStyles = makeStyles()((theme) => {
     return {
@@ -77,7 +73,7 @@ const useStyles = makeStyles()((theme) => {
 })
 
 function Content() {
-    const chainId = useChainId()
+    const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
     const identifier = useContext(SnapshotContext)
     const { payload: votes } = useVotes(identifier)
     const { classes } = useStyles()
@@ -109,7 +105,7 @@ function Content() {
                                 className={classNames(classes.link, classes.ellipsisText)}
                                 target="_blank"
                                 rel="noopener"
-                                href={resolveAddressLinkOnExplorer(chainId, v.address)}>
+                                href={explorerResolver.addressLink(chainId, v.address)}>
                                 <Box className={classes.avatarWrapper}>
                                     {v.authorAvatar ? (
                                         <Avatar src={resolveIPFSLink(v.authorAvatar)} className={classes.avatar} />
diff --git a/packages/mask/src/plugins/Snapshot/SNSAdaptor/VotingCard.tsx b/packages/mask/src/plugins/Snapshot/SNSAdaptor/VotingCard.tsx
index 068d235a77f1..e4c5e8cf18d3 100644
--- a/packages/mask/src/plugins/Snapshot/SNSAdaptor/VotingCard.tsx
+++ b/packages/mask/src/plugins/Snapshot/SNSAdaptor/VotingCard.tsx
@@ -3,7 +3,9 @@ import classNames from 'classnames'
 import { Button } from '@mui/material'
 import { makeStyles } from '@masknet/theme'
 import { SnapshotContext } from '../context'
-import { useAccount } from '@masknet/web3-shared-evm'
+import { toChecksumAddress } from 'web3-utils'
+import { useAccount, useChainId, useWeb3Connection, useCurrentWeb3NetworkPluginID } from '@masknet/plugin-infra/web3'
+import { NetworkPluginID } from '@masknet/web3-shared-base'
 import { useSnackbarCallback } from '@masknet/shared'
 import { useI18N } from '../../../utils'
 import { PluginSnapshotRPC } from '../messages'
@@ -12,8 +14,8 @@ import { useProposal } from './hooks/useProposal'
 import { usePower } from './hooks/usePower'
 import { VoteConfirmDialog } from './VoteConfirmDialog'
 import { useRetry } from './hooks/useRetry'
-import { NetworkPluginID, useCurrentWeb3NetworkPluginID } from '@masknet/plugin-infra/web3'
-import { activatedSocialNetworkUI } from '../../../social-network'
+import { SNAPSHOT_VOTE_DOMAIN } from '../constants'
+import { getSnapshotVoteType } from '../utils'
 
 const useStyles = makeStyles()((theme) => {
     return {
@@ -42,8 +44,10 @@ export function VotingCard() {
     const { t } = useI18N()
     const { classes } = useStyles()
     const identifier = useContext(SnapshotContext)
+    const connection = useWeb3Connection(NetworkPluginID.PLUGIN_EVM)
     const { payload: proposal } = useProposal(identifier.id)
-    const account = useAccount()
+    const account = useAccount(NetworkPluginID.PLUGIN_EVM)
+    const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
     const { value: power } = usePower(identifier)
     const choices = proposal.choices
     const [choice, setChoice] = useState(0)
@@ -55,10 +59,46 @@ export function VotingCard() {
     const onVoteConfirm = useSnackbarCallback(
         async () => {
             setLoading(true)
-            await PluginSnapshotRPC.vote(identifier, choice, account, proposal.type)
-            activatedSocialNetworkUI.utils.share?.(t('promote_snapshot'))
+            const message = {
+                from: toChecksumAddress(account),
+                space: identifier.space,
+                timestamp: Math.floor(Date.now() / 1e3),
+                proposal: identifier.id,
+                choice: proposal.type === 'single-choice' ? choice : [choice],
+                metadata: JSON.stringify({}),
+            }
+
+            const domain = SNAPSHOT_VOTE_DOMAIN
+
+            const types = getSnapshotVoteType(proposal.type)
+
+            const data = {
+                message,
+                domain,
+                types,
+            }
+            const sig = await connection?.signMessage(
+                JSON.stringify({
+                    domain,
+                    types: {
+                        EIP712Domain: [
+                            { name: 'name', type: 'string' },
+                            { name: 'version', type: 'string' },
+                        ],
+                        Vote: types.Vote,
+                    },
+                    primaryType: 'Vote',
+                    message,
+                }),
+                'typedDataSign',
+                { account: toChecksumAddress(account) },
+            )
+
+            const body = JSON.stringify({ data, sig, address: toChecksumAddress(account) })
+
+            return PluginSnapshotRPC.vote(body)
         },
-        [choice, identifier, account, proposal.type, t],
+        [choice, identifier, account, proposal, connection, chainId],
         () => {
             setLoading(false)
             setOpen(false)
diff --git a/packages/mask/src/plugins/Snapshot/SNSAdaptor/hooks/usePower.ts b/packages/mask/src/plugins/Snapshot/SNSAdaptor/hooks/usePower.ts
index 664a656d01fa..86a1d813c69d 100644
--- a/packages/mask/src/plugins/Snapshot/SNSAdaptor/hooks/usePower.ts
+++ b/packages/mask/src/plugins/Snapshot/SNSAdaptor/hooks/usePower.ts
@@ -1,5 +1,6 @@
 import { useAsyncRetry } from 'react-use'
-import { useAccount } from '@masknet/web3-shared-evm'
+import { useAccount } from '@masknet/plugin-infra/web3'
+import { NetworkPluginID } from '@masknet/web3-shared-base'
 import { PluginSnapshotRPC } from '../../messages'
 import type { ProposalIdentifier } from '../../types'
 import { useProposal } from './useProposal'
@@ -8,7 +9,7 @@ import { find, sumBy } from 'lodash-unified'
 export function usePower(identifier: ProposalIdentifier) {
     const { payload: proposal } = useProposal(identifier.id)
 
-    const account = useAccount()
+    const account = useAccount(NetworkPluginID.PLUGIN_EVM)
     return useAsyncRetry(async () => {
         if (!account) return 0
         const scores = await PluginSnapshotRPC.getScores(
diff --git a/packages/mask/src/plugins/Snapshot/Worker/apis/index.ts b/packages/mask/src/plugins/Snapshot/Worker/apis/index.ts
index 5f266290aedf..4b38b195362a 100644
--- a/packages/mask/src/plugins/Snapshot/Worker/apis/index.ts
+++ b/packages/mask/src/plugins/Snapshot/Worker/apis/index.ts
@@ -1,6 +1,5 @@
 import ss from '@snapshot-labs/snapshot.js'
-import type { Proposal, Profile3Box, ProposalIdentifier, VoteSuccess, RawVote, Strategy } from '../../types'
-import Services from '../../../../extension/service'
+import type { Proposal, Profile3Box, VoteSuccess, RawVote, Strategy } from '../../types'
 import { transform } from 'lodash-unified'
 import { SNAPSHOT_GET_SCORE_API } from '../../constants'
 
@@ -128,79 +127,14 @@ export async function getScores(
     )
 }
 
-export async function vote(identifier: ProposalIdentifier, choice: number, address: string, voteType: string) {
-    const message = {
-        from: address,
-        space: identifier.space,
-        timestamp: Math.floor(Date.now() / 1e3),
-        proposal: identifier.id,
-        choice: voteType === 'single-choice' ? choice : [choice],
-        metadata: JSON.stringify({}),
-    }
-
-    const domain = {
-        name: 'snapshot',
-        version: '0.1.4',
-    }
-
-    const types = {
-        Vote: [
-            {
-                name: 'from',
-                type: 'address',
-            },
-            {
-                name: 'space',
-                type: 'string',
-            },
-            {
-                name: 'timestamp',
-                type: 'uint64',
-            },
-            {
-                name: 'proposal',
-                type: 'string',
-            },
-            {
-                name: 'choice',
-                type: voteType === 'single-choice' ? 'uint32' : 'uint32[]',
-            },
-            {
-                name: 'metadata',
-                type: 'string',
-            },
-        ],
-    }
-
-    const data = {
-        message,
-        domain,
-        types,
-    }
-
-    const sig = await Services.Ethereum.typedDataSign(
-        address,
-        JSON.stringify({
-            domain,
-            types: {
-                EIP712Domain: [
-                    { name: 'name', type: 'string' },
-                    { name: 'version', type: 'string' },
-                ],
-                Vote: types.Vote,
-            },
-            primaryType: 'Vote',
-            message,
-        }),
-    )
-
+export async function vote(body: string) {
     const response = await fetch('https://hub.snapshot.org/api/msg', {
         method: 'POST',
         headers: {
             Accept: 'application/json',
             'Content-Type': 'application/json',
         },
-        body: JSON.stringify({ data, sig, address }),
+        body,
     })
 
     const result: VoteSuccess = await response.json()
diff --git a/packages/mask/src/plugins/Snapshot/constants.ts b/packages/mask/src/plugins/Snapshot/constants.ts
index 2be59a45d7f4..a82d65d45502 100644
--- a/packages/mask/src/plugins/Snapshot/constants.ts
+++ b/packages/mask/src/plugins/Snapshot/constants.ts
@@ -1,3 +1,7 @@
 export const SNAPSHOT_PLUGIN_NAME = 'Snapshot'
 export const SNAPSHOT_PLUGIN_ID = 'org.snapshot'
 export const SNAPSHOT_GET_SCORE_API = 'https://cors.r2d2.to/?https://score.snapshot.org/api/scores'
+export const SNAPSHOT_VOTE_DOMAIN = {
+    name: 'snapshot',
+    version: '0.1.4',
+}
diff --git a/packages/mask/src/plugins/Snapshot/utils.ts b/packages/mask/src/plugins/Snapshot/utils.ts
new file mode 100644
index 000000000000..d358e35a4afa
--- /dev/null
+++ b/packages/mask/src/plugins/Snapshot/utils.ts
@@ -0,0 +1,28 @@
+export const getSnapshotVoteType = (type: string) => ({
+    Vote: [
+        {
+            name: 'from',
+            type: 'address',
+        },
+        {
+            name: 'space',
+            type: 'string',
+        },
+        {
+            name: 'timestamp',
+            type: 'uint64',
+        },
+        {
+            name: 'proposal',
+            type: 'string',
+        },
+        {
+            name: 'choice',
+            type: type === 'single-choice' ? 'uint32' : 'uint32[]',
+        },
+        {
+            name: 'metadata',
+            type: 'string',
+        },
+    ],
+})
diff --git a/packages/mask/src/plugins/Tips/SNSAdaptor/TipsEntranceDialog.tsx b/packages/mask/src/plugins/Tips/SNSAdaptor/TipsEntranceDialog.tsx
index a0173773b961..37f02d5eb945 100644
--- a/packages/mask/src/plugins/Tips/SNSAdaptor/TipsEntranceDialog.tsx
+++ b/packages/mask/src/plugins/Tips/SNSAdaptor/TipsEntranceDialog.tsx
@@ -1,4 +1,3 @@
-import { NetworkPluginID } from '@masknet/plugin-infra/web3'
 import { WalletMessages } from '@masknet/plugin-wallet'
 import { InjectedDialog, LoadingAnimation } from '@masknet/shared'
 import {
@@ -11,7 +10,6 @@ import {
 import { useRemoteControlledDialog } from '@masknet/shared-base-ui'
 import { makeStyles, useCustomSnackbar } from '@masknet/theme'
 import { NextIDProof } from '@masknet/web3-providers'
-import { useAccount } from '@masknet/web3-shared-evm'
 import { LoadingButton } from '@mui/lab'
 import { Button, ButtonProps, DialogContent } from '@mui/material'
 import formatDateTime from 'date-fns/format'
@@ -30,6 +28,9 @@ import WalletsView from './bodyViews/Wallets'
 import { EmptyStatus } from './components/EmptyStatus'
 import { VerifyAlertLine } from './components/VerifyAlertLine'
 import { WalletsByNetwork } from './components/WalletsByNetwork'
+import { useAccount } from '@masknet/plugin-infra/web3'
+import { NetworkPluginID } from '@masknet/web3-shared-base'
+
 export interface TipsEntranceDialogProps {
     open: boolean
     onClose: () => void
@@ -102,8 +103,8 @@ export function TipsEntranceDialog({ open, onClose }: TipsEntranceDialogProps) {
     const [rawWalletList, setRawWalletList] = useState<BindingProof[]>([])
     const supportedNetworkIds = [NetworkPluginID.PLUGIN_EVM]
     const { showSnackbar } = useCustomSnackbar()
-    const account = useAccount()
-    const nowTime = formatDateTime(new Date(), 'yyyy-MM-dd HH:mm')
+    const account = useAccount(NetworkPluginID.PLUGIN_EVM)
+    const nowTime = useMemo(() => formatDateTime(new Date(), 'yyyy-MM-dd HH:mm'), [])
 
     const { value: currentPersonaIdentifier } = useAsyncRetry(() => {
         setShowAlert(true)
@@ -189,7 +190,6 @@ export function TipsEntranceDialog({ open, onClose }: TipsEntranceDialogProps) {
         } else {
             setDialog({
                 open: true,
-                pluginID: NetworkPluginID.PLUGIN_EVM,
             })
         }
     }, [account])
diff --git a/packages/mask/src/plugins/Tips/SNSAdaptor/bodyViews/AddWallet.tsx b/packages/mask/src/plugins/Tips/SNSAdaptor/bodyViews/AddWallet.tsx
index 003eac38a0a3..cec9a8ce3ff3 100644
--- a/packages/mask/src/plugins/Tips/SNSAdaptor/bodyViews/AddWallet.tsx
+++ b/packages/mask/src/plugins/Tips/SNSAdaptor/bodyViews/AddWallet.tsx
@@ -1,19 +1,8 @@
 import { BindingProof, NextIDAction, NextIDPlatform, PersonaInformation } from '@masknet/shared-base'
 import { WalletMessages } from '@masknet/plugin-wallet'
 import { useRemoteControlledDialog } from '@masknet/shared-base-ui'
-import {
-    ChainId,
-    isSameAddress,
-    NetworkType,
-    ProviderType,
-    resolveProviderName,
-    useAccount,
-    useChainId,
-    useNetworkType,
-    useProviderType,
-    useWallet,
-} from '@masknet/web3-shared-evm'
-import { memo, useCallback } from 'react'
+import { ProviderType } from '@masknet/web3-shared-evm'
+import { memo, useMemo } from 'react'
 import { SignSteps, Steps } from '../../../../components/shared/VerifyWallet/Steps'
 import { useAsync, useAsyncFn } from 'react-use'
 import { NextIDProof } from '@masknet/web3-providers'
@@ -21,13 +10,16 @@ import Services from '../../../../extension/service'
 import { useCustomSnackbar } from '@masknet/theme'
 import formatDateTime from 'date-fns/format'
 import {
-    NetworkPluginID,
+    useChainId,
     useProviderDescriptor,
+    useProviderType,
     useReverseAddress,
+    useWallet,
+    useWeb3Connection,
     useWeb3State,
-    Web3Plugin,
 } from '@masknet/plugin-infra/web3'
 import { useI18N } from '../../locales'
+import { isSameAddress, NetworkPluginID } from '@masknet/web3-shared-base'
 
 interface AddWalletViewProps {
     currentPersona: PersonaInformation
@@ -38,38 +30,35 @@ interface AddWalletViewProps {
 const AddWalletView = memo(({ currentPersona, bindings, onCancel }: AddWalletViewProps) => {
     const t = useI18N()
     const { showSnackbar } = useCustomSnackbar()
-    const providerType = useProviderType()
-    const wallet = {
-        ...useWallet(),
-        account: useAccount(),
-        networkType: useNetworkType(),
-        chainId: useChainId(),
-        providerType,
-    }
-    const { value: domain } = useReverseAddress(wallet.account)
-    const { Utils } = useWeb3State() ?? {}
+    const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
+    const providerType = useProviderType(NetworkPluginID.PLUGIN_EVM)
+    const wallet = useWallet(NetworkPluginID.PLUGIN_EVM)
+    const { value: domain } = useReverseAddress(NetworkPluginID.PLUGIN_EVM, wallet?.address)
+    const { Others } = useWeb3State(NetworkPluginID.PLUGIN_EVM)
+    const connection = useWeb3Connection(NetworkPluginID.PLUGIN_EVM)
+
     const isNotEvm = useProviderDescriptor()?.providerAdaptorPluginID !== NetworkPluginID.PLUGIN_EVM
-    const nowTime = formatDateTime(new Date(), 'yyyy-MM-dd HH:mm')
-    const isBound = bindings.some((x) => isSameAddress(x.identity, wallet.account))
+    const nowTime = useMemo(() => formatDateTime(new Date(), 'yyyy-MM-dd HH:mm'), [])
+    const isBound = bindings.some((x) => isSameAddress(x.identity, wallet?.address))
 
     const walletName = () => {
-        if (isNotEvm) return `${resolveProviderName(providerType)} Wallet`
-        if (domain && Utils?.formatDomainName) return Utils.formatDomainName(domain)
-        if (![wallet.providerType, providerType].includes(ProviderType.MaskWallet))
-            return `${resolveProviderName(wallet.providerType ?? providerType)} Wallet`
-        return wallet.name ?? 'Wallet'
+        if (isNotEvm && providerType) return `${Others?.providerResolver.providerName(providerType)} Wallet`
+        if (domain && Others?.formatDomainName) return Others.formatDomainName(domain)
+        if (providerType && providerType !== ProviderType.MaskWallet)
+            return `${Others?.providerResolver.providerName(providerType)} Wallet`
+        return wallet?.name ?? 'Wallet'
     }
 
     const { value: payload, loading: payloadLoading } = useAsync(async () => {
-        if (!currentPersona || !wallet.account) return
+        if (!currentPersona || !wallet?.address) return
         return NextIDProof.createPersonaPayload(
             currentPersona.identifier.publicKeyAsHex,
             NextIDAction.Create,
-            wallet.account,
+            wallet.address,
             NextIDPlatform.Ethereum,
             'default',
         )
-    }, [currentPersona?.identifier, wallet.address])
+    }, [currentPersona?.identifier, wallet?.address])
 
     const [{ value: signature }, personaSilentSign] = useAsyncFn(async () => {
         if (!payload || !currentPersona?.identifier) return
@@ -93,16 +82,16 @@ const AddWalletView = memo(({ currentPersona, bindings, onCancel }: AddWalletVie
     }, [currentPersona?.identifier, payload])
 
     const [{ value: walletSignState }, walletSign] = useAsyncFn(async () => {
-        if (!payload || !currentPersona || !wallet.account) return false
+        if (!payload || !currentPersona || !wallet?.address) return false
         try {
-            const walletSig = await Services.Ethereum.personalSign(payload.signPayload, wallet.account)
+            const walletSig = await connection?.signMessage(payload.signPayload, wallet.address)
             if (!walletSig) throw new Error('Wallet sign failed')
             await NextIDProof.bindProof(
                 payload.uuid,
                 currentPersona.identifier.publicKeyAsHex,
                 NextIDAction.Create,
                 NextIDPlatform.Ethereum,
-                wallet.account,
+                wallet.address,
                 payload.createdAt,
                 {
                     walletSignature: walletSig,
@@ -115,7 +104,7 @@ const AddWalletView = memo(({ currentPersona, bindings, onCancel }: AddWalletVie
             showSnackbar(t.tip_wallet_sign_error(), { variant: 'error', message: nowTime })
             return false
         }
-    }, [currentPersona?.identifier, payload, signature])
+    }, [currentPersona?.identifier, payload, signature, connection])
     const [{ loading: confirmLoading, value: step = SignSteps.Ready }, handleConfirm] = useAsyncFn(async () => {
         try {
             if (walletSignState) {
@@ -137,29 +126,27 @@ const AddWalletView = memo(({ currentPersona, bindings, onCancel }: AddWalletVie
             return SignSteps.Ready
         }
     }, [signature, walletSignState, walletSign, personaSilentSign])
-    const { setDialog } = useRemoteControlledDialog(WalletMessages.events.selectProviderDialogUpdated)
-    const changeWallet = useCallback(() => {
-        setDialog({
-            open: true,
-            pluginID: NetworkPluginID.PLUGIN_EVM,
-        })
-    }, [])
-    if (!currentPersona || !wallet) return null
+    const { openDialog } = useRemoteControlledDialog(WalletMessages.events.selectProviderDialogUpdated)
+    if (!currentPersona || !wallet || !providerType) return null
 
     return (
         <div>
             <Steps
                 isBound={isBound}
                 notEvm={isNotEvm}
-                notConnected={!wallet.account}
-                wallet={wallet as Web3Plugin.ConnectionResult<ChainId, NetworkType, ProviderType>}
+                notConnected={!wallet?.address}
+                wallet={{
+                    account: wallet.address,
+                    chainId,
+                    providerType,
+                }}
                 walletName={walletName()}
                 nickname={currentPersona.nickname}
                 step={step}
                 confirmLoading={confirmLoading || payloadLoading}
-                disableConfirm={isBound || isNotEvm || !wallet.account}
+                disableConfirm={isBound || isNotEvm || !wallet.address}
                 notInPop
-                changeWallet={changeWallet}
+                changeWallet={openDialog}
                 onConfirm={handleConfirm}
                 onCustomCancel={onCancel}
             />
diff --git a/packages/mask/src/plugins/Tips/SNSAdaptor/bodyViews/Setting.tsx b/packages/mask/src/plugins/Tips/SNSAdaptor/bodyViews/Setting.tsx
index 4d34e01a91fb..0ce8f9213d8d 100644
--- a/packages/mask/src/plugins/Tips/SNSAdaptor/bodyViews/Setting.tsx
+++ b/packages/mask/src/plugins/Tips/SNSAdaptor/bodyViews/Setting.tsx
@@ -3,8 +3,8 @@ import type { BindingProof } from '@masknet/shared-base'
 import { makeStyles } from '@masknet/theme'
 import { Typography } from '@mui/material'
 import { WalletSwitch } from '../components/WalletSwitch'
-import { NetworkPluginID } from '@masknet/plugin-infra/web3'
 import { ChainId } from '@masknet/web3-shared-evm'
+import { NetworkPluginID } from '@masknet/web3-shared-base'
 
 const useStyles = makeStyles()((theme) => ({
     container: {
diff --git a/packages/mask/src/plugins/Tips/SNSAdaptor/components/WalletItem.tsx b/packages/mask/src/plugins/Tips/SNSAdaptor/components/WalletItem.tsx
index e5e1e4fea13e..6ad1b40fecb0 100644
--- a/packages/mask/src/plugins/Tips/SNSAdaptor/components/WalletItem.tsx
+++ b/packages/mask/src/plugins/Tips/SNSAdaptor/components/WalletItem.tsx
@@ -1,7 +1,8 @@
-import { useReverseAddress, useWeb3State } from '@masknet/plugin-infra/web3'
+import { useReverseAddress, useWallets, useWeb3State } from '@masknet/plugin-infra/web3'
 import { FormattedAddress, useSnackbarCallback } from '@masknet/shared'
 import { makeStyles } from '@masknet/theme'
-import { ChainId, formatEthereumAddress, isSameAddress, useWallets } from '@masknet/web3-shared-evm'
+import { NetworkPluginID } from '@masknet/web3-shared-base'
+import { ChainId, formatEthereumAddress } from '@masknet/web3-shared-evm'
 import { Link, Typography } from '@mui/material'
 import { useMemo } from 'react'
 import { useCopyToClipboard } from 'react-use'
@@ -98,8 +99,8 @@ export function WalletItem({
     const { classes } = useStyles()
     const t = useI18N()
     const [, copyToClipboard] = useCopyToClipboard()
-    const { value: domain } = useReverseAddress(address)
-    const { Utils } = useWeb3State() ?? {}
+    const { value: domain } = useReverseAddress(NetworkPluginID.PLUGIN_EVM, address)
+    const { Others } = useWeb3State(NetworkPluginID.PLUGIN_EVM) ?? {}
     const onCopy = useSnackbarCallback(
         async (ev: React.MouseEvent<HTMLAnchorElement>) => {
             ev.stopPropagation()
@@ -111,13 +112,13 @@ export function WalletItem({
         undefined,
         t.tip_copy_success_of_wallet_addr(),
     )
-    const wallets = useWallets()
+    const wallets = useWallets(NetworkPluginID.PLUGIN_EVM)
 
     const walletName = useMemo(() => {
-        if (domain && Utils?.formatDomainName) {
-            return Utils.formatDomainName(domain)
+        if (domain && Others?.formatDomainName) {
+            return Others.formatDomainName(domain)
         }
-        const currentWallet = wallets.find((x) => isSameAddress(x.address, address))
+        const currentWallet = wallets.find((x) => Others?.isSameAddress(x.address, address))
         const name = currentWallet?.name
         return name !== undefined && currentWallet?.hasStoredKeyInfo ? name : fallbackName
     }, [address, domain, fallbackName])
@@ -153,7 +154,7 @@ export function WalletItem({
                 </div>
                 <div className={classes.infoRow}>
                     <Typography className={classes.address} variant="body2" title={address}>
-                        <FormattedAddress address={address} size={4} formatter={Utils?.formatAddress} />
+                        <FormattedAddress address={address} size={4} formatter={Others?.formatAddress} />
                     </Typography>
                     <Link
                         className={classes.link}
@@ -168,7 +169,7 @@ export function WalletItem({
                     </Link>
                     <Link
                         className={classes.link}
-                        href={Utils?.resolveAddressLink?.(ChainId.Mainnet, address) ?? ''}
+                        href={Others?.explorerResolver.addressLink?.(ChainId.Mainnet, address) ?? ''}
                         target="_blank"
                         title={t.view_on_explorer()}
                         rel="noopener noreferrer">
diff --git a/packages/mask/src/plugins/Tips/SNSAdaptor/components/WalletSwitch.tsx b/packages/mask/src/plugins/Tips/SNSAdaptor/components/WalletSwitch.tsx
index 7edddefeacb2..80a213b0ccef 100644
--- a/packages/mask/src/plugins/Tips/SNSAdaptor/components/WalletSwitch.tsx
+++ b/packages/mask/src/plugins/Tips/SNSAdaptor/components/WalletSwitch.tsx
@@ -3,8 +3,9 @@ import { Link, Switch, Typography } from '@mui/material'
 import { FormattedAddress } from '@masknet/shared'
 import { useI18N } from '../../../../utils'
 import { ExternalLink } from 'react-feather'
-import { NetworkPluginID, useWeb3State } from '@masknet/plugin-infra/web3'
+import { useWeb3State } from '@masknet/plugin-infra/web3'
 import type { ChainId } from '@masknet/web3-shared-evm'
+import { NetworkPluginID } from '@masknet/web3-shared-base'
 
 const useStyles = makeStyles()((theme) => ({
     currentAccount: {
@@ -54,19 +55,19 @@ interface WalletSwitchProps {
     index: number
 }
 
+const resolveNetworkName = (pluginId: NetworkPluginID) => {
+    const walletNameByNetwork = {
+        [NetworkPluginID.PLUGIN_EVM]: 'EVM wallet',
+        [NetworkPluginID.PLUGIN_SOLANA]: 'Solana wallet',
+        [NetworkPluginID.PLUGIN_FLOW]: 'Flow wallet',
+    }
+    return walletNameByNetwork[pluginId]
+}
 export function WalletSwitch({ type, address, isPublic, chainId, index, onChange }: WalletSwitchProps) {
     const { classes } = useStyles()
     const { t } = useI18N()
-    const { Utils } = useWeb3State() ?? {}
+    const { Others } = useWeb3State(NetworkPluginID.PLUGIN_EVM)
 
-    const resolveNetworkName = () => {
-        const walletNameByNetwork = {
-            [NetworkPluginID.PLUGIN_EVM]: 'EVM wallet',
-            [NetworkPluginID.PLUGIN_SOLANA]: 'Solana wallet',
-            [NetworkPluginID.PLUGIN_FLOW]: 'Flow wallet',
-        }
-        return walletNameByNetwork[type]
-    }
     const onSwitch = (e: React.ChangeEvent<HTMLInputElement>) => {
         onChange(index, e.target.checked)
     }
@@ -74,16 +75,16 @@ export function WalletSwitch({ type, address, isPublic, chainId, index, onChange
         <div className={classes.currentAccount}>
             <div className={classes.accountInfo}>
                 <div className={classes.infoRow}>
-                    <Typography className={classes.accountName}>{resolveNetworkName()}</Typography>
+                    <Typography className={classes.accountName}>{resolveNetworkName(type)}</Typography>
                 </div>
                 <div className={classes.infoRow}>
                     <Typography className={classes.address} variant="body2" title={address}>
-                        <FormattedAddress address={address} size={4} formatter={Utils?.formatAddress} />
+                        <FormattedAddress address={address} size={4} formatter={Others?.formatAddress} />
                     </Typography>
 
                     <Link
                         className={classes.link}
-                        href={Utils?.resolveAddressLink?.(chainId, address) ?? ''}
+                        href={Others?.explorerResolver.addressLink(chainId, address) ?? ''}
                         target="_blank"
                         title={t('plugin_wallet_view_on_explorer')}
                         rel="noopener noreferrer">
diff --git a/packages/mask/src/plugins/Tips/SNSAdaptor/components/WalletsByNetwork.tsx b/packages/mask/src/plugins/Tips/SNSAdaptor/components/WalletsByNetwork.tsx
index 02e55219b81c..33ca39f23841 100644
--- a/packages/mask/src/plugins/Tips/SNSAdaptor/components/WalletsByNetwork.tsx
+++ b/packages/mask/src/plugins/Tips/SNSAdaptor/components/WalletsByNetwork.tsx
@@ -5,7 +5,7 @@ import { makeStyles } from '@masknet/theme'
 import { Typography } from '@mui/material'
 import { useI18N } from '../../locales'
 import { WalletItem } from './WalletItem'
-import type { NetworkPluginID } from '@masknet/plugin-infra/src/web3-types'
+import type { NetworkPluginID } from '@masknet/web3-shared-base'
 
 const useStyles = makeStyles()((theme) => ({
     container: {
diff --git a/packages/mask/src/plugins/Tips/SNSAdaptor/index.tsx b/packages/mask/src/plugins/Tips/SNSAdaptor/index.tsx
index 8800886982fa..a8977d125c60 100644
--- a/packages/mask/src/plugins/Tips/SNSAdaptor/index.tsx
+++ b/packages/mask/src/plugins/Tips/SNSAdaptor/index.tsx
@@ -12,7 +12,7 @@ import { TipsEntranceDialog } from './TipsEntranceDialog'
 const sns: Plugin.SNSAdaptor.Definition = {
     ...base,
     init(_, context) {
-        setupStorage(context.createKVStorage('memory', storageDefaultValue))
+        setupStorage(context.createKVStorage('memory', '', storageDefaultValue))
     },
     ApplicationEntries: [
         (() => {
diff --git a/packages/mask/src/plugins/Tips/components/AddDialog.tsx b/packages/mask/src/plugins/Tips/components/AddDialog.tsx
index 6d910f090ad4..ec0408d987b3 100644
--- a/packages/mask/src/plugins/Tips/components/AddDialog.tsx
+++ b/packages/mask/src/plugins/Tips/components/AddDialog.tsx
@@ -1,20 +1,19 @@
-import { useNetworkDescriptors } from '@masknet/plugin-infra/web3'
-import { ImageIcon, InjectedDialog, InjectedDialogProps } from '@masknet/shared'
-import { makeStyles } from '@masknet/theme'
 import {
-    ERC721TokenDetailed,
-    getERC721ContractDetailed,
-    getERC721TokenDetailed,
-    isSameAddress,
     useAccount,
     useChainId,
-    useERC721TokenContract,
-} from '@masknet/web3-shared-evm'
+    useNetworkDescriptors,
+    useWeb3Connection,
+    useWeb3State,
+} from '@masknet/plugin-infra/web3'
+import { useERC721TokenContract } from '@masknet/plugin-infra/web3-evm'
+import { ImageIcon, InjectedDialog, InjectedDialogProps } from '@masknet/shared'
+import { makeStyles } from '@masknet/theme'
+import { isSameAddress, NetworkPluginID, NonFungibleToken } from '@masknet/web3-shared-base'
+import type { ChainId, SchemaType } from '@masknet/web3-shared-evm'
 import { Button, DialogContent, FormControl, TextField, Typography } from '@mui/material'
 import { FC, useCallback, useEffect, useMemo, useState } from 'react'
 import { useAsyncFn } from 'react-use'
 import { EthereumAddress } from 'wallet.ts'
-import { WalletRPC } from '../../Wallet/messages'
 import { useI18N } from '../locales'
 
 const useStyles = makeStyles()((theme) => ({
@@ -46,19 +45,21 @@ const useStyles = makeStyles()((theme) => ({
 }))
 
 interface Props extends InjectedDialogProps {
-    onAdd?(token: ERC721TokenDetailed): void
+    onAdd?(token: NonFungibleToken<ChainId, SchemaType>): void
 }
 
 export const AddDialog: FC<Props> = ({ onAdd, onClose, ...rest }) => {
     const { classes } = useStyles()
-    const chainId = useChainId()
-    const account = useAccount()
+    const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
+    const account = useAccount(NetworkPluginID.PLUGIN_EVM)
     const [contractAddress, setContractAddress] = useState('')
     const [tokenId, setTokenId] = useState('')
+    const { Token } = useWeb3State(NetworkPluginID.PLUGIN_EVM)
+    const web3Connection = useWeb3Connection(NetworkPluginID.PLUGIN_EVM)
     const t = useI18N()
-    const allNetworks = useNetworkDescriptors()
+    const allNetworks = useNetworkDescriptors(NetworkPluginID.PLUGIN_EVM)
     const network = useMemo(() => allNetworks.find((n) => n.chainId === chainId), [allNetworks, chainId])
-    const erc721TokenContract = useERC721TokenContract(contractAddress)
+    const erc721TokenContract = useERC721TokenContract(chainId, contractAddress)
 
     const [, checkOwner] = useAsyncFn(async () => {
         if (!erc721TokenContract || !account) return false
@@ -88,19 +89,13 @@ export const AddDialog: FC<Props> = ({ onAdd, onClose, ...rest }) => {
             setMessage(t.tip_add_collectibles_error())
             return
         }
-        const erc721ContractDetailed = await getERC721ContractDetailed(erc721TokenContract, contractAddress, chainId)
-        const erc721TokenDetailed = await getERC721TokenDetailed(
-            erc721ContractDetailed,
-            erc721TokenContract,
-            tokenId,
-            chainId,
-        )
+        const erc721TokenDetailed = await web3Connection?.getNonFungibleToken(contractAddress, tokenId, { chainId })
 
         if (!erc721TokenDetailed) {
             setMessage(t.tip_add_collectibles_error())
             return
         }
-        await WalletRPC.addToken(erc721TokenDetailed)
+        await Token?.addToken?.(erc721TokenDetailed)
         onAdd?.(erc721TokenDetailed)
         reset()
     }, [onAdd, t, contractAddress, tokenId])
diff --git a/packages/mask/src/plugins/Tips/components/NFTSection/NFTList.tsx b/packages/mask/src/plugins/Tips/components/NFTSection/NFTList.tsx
index 4fe997d244f6..ae3ea6f1edea 100644
--- a/packages/mask/src/plugins/Tips/components/NFTSection/NFTList.tsx
+++ b/packages/mask/src/plugins/Tips/components/NFTSection/NFTList.tsx
@@ -1,7 +1,8 @@
-import { useWeb3State, Web3Plugin } from '@masknet/plugin-infra/web3'
+import { useChainId, useWeb3State } from '@masknet/plugin-infra/web3'
 import { NFTCardStyledAssetPlayer } from '@masknet/shared'
 import { makeStyles, ShadowRootTooltip } from '@masknet/theme'
-import { formatNFT_TokenId, isSameAddress, useChainId } from '@masknet/web3-shared-evm'
+import { isSameAddress, NetworkPluginID, NonFungibleToken } from '@masknet/web3-shared-base'
+import type { ChainId, SchemaType } from '@masknet/web3-shared-evm'
 import { Checkbox, Link, List, ListItem, Radio } from '@mui/material'
 import classnames from 'classnames'
 import { noop } from 'lodash-unified'
@@ -10,7 +11,7 @@ import type { TipNFTKeyPair } from '../../types'
 
 interface Props {
     selectedPairs: TipNFTKeyPair[]
-    tokens: Web3Plugin.NonFungibleToken[]
+    tokens: Array<NonFungibleToken<ChainId, SchemaType>>
     onChange?: (id: string | null, contractAddress: string) => void
     limit?: number
     className: string
@@ -85,17 +86,17 @@ const useStyles = makeStyles()((theme) => ({
 }))
 
 interface NFTItemProps {
-    token: Web3Plugin.NonFungibleToken
+    token: NonFungibleToken<ChainId, SchemaType>
 }
 
 export const NFTItem: FC<NFTItemProps> = ({ token }) => {
     const { classes } = useStyles()
-    const chainId = useChainId()
+    const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
     return (
         <NFTCardStyledAssetPlayer
             chainId={chainId}
             contractAddress={token.contract?.address}
-            url={token.info?.imageURL ?? token.metadata?.assetURL}
+            url={token.metadata?.imageURL ?? token.metadata?.imageURL}
             tokenId={token.tokenId}
             classes={{
                 loadingFailImage: classes.loadingFailImage,
@@ -124,26 +125,25 @@ export const NFTList: FC<Props> = ({ selectedPairs, tokens, onChange, limit = 1,
     )
 
     const SelectComponent = isRadio ? Radio : Checkbox
-    const { Utils } = useWeb3State()
+    const { Others } = useWeb3State(NetworkPluginID.PLUGIN_EVM)
 
     return (
         <List className={classnames(classes.list, className)}>
             {tokens.map((token) => {
                 const selected = includes(selectedPairs, [token.contract?.address!, token.tokenId])
                 const disabled = !isRadio && reachedLimit && !selected
-                const link =
-                    Utils?.resolveNonFungibleTokenLink && token.contract
-                        ? Utils.resolveNonFungibleTokenLink(
-                              token.contract.chainId,
-                              token.contract.address,
-                              token.tokenId,
-                          )
-                        : undefined
+                const link = token.contract
+                    ? Others?.explorerResolver?.nonFungibleTokenLink(
+                          token.contract.chainId,
+                          token.contract.address,
+                          token.tokenId,
+                      )
+                    : undefined
                 return (
                     <ShadowRootTooltip
                         classes={{ tooltip: classes.tooltip }}
                         key={token.tokenId}
-                        title={`${token.contract?.name} ${formatNFT_TokenId(token.tokenId, 2)}`}
+                        title={`${token.contract?.name} ${Others?.formatTokenId(token.tokenId, 2)}`}
                         placement="top"
                         arrow>
                         <ListItem
diff --git a/packages/mask/src/plugins/Tips/components/NFTSection/index.tsx b/packages/mask/src/plugins/Tips/components/NFTSection/index.tsx
index 849b82601caf..a6a8d65d0f45 100644
--- a/packages/mask/src/plugins/Tips/components/NFTSection/index.tsx
+++ b/packages/mask/src/plugins/Tips/components/NFTSection/index.tsx
@@ -1,13 +1,12 @@
-import { useNetworkDescriptor, useWeb3State as useWeb3PluginState } from '@masknet/plugin-infra/web3'
+import { useNonFungibleAssets } from '@masknet/plugin-infra/web3'
 import { EMPTY_LIST } from '@masknet/shared-base'
 import { makeStyles } from '@masknet/theme'
-import { isSameAddress, useAccount } from '@masknet/web3-shared-evm'
+import { isSameAddress, NetworkPluginID } from '@masknet/web3-shared-base'
 import { Button, CircularProgress, Typography } from '@mui/material'
 import classnames from 'classnames'
 import { uniqWith } from 'lodash-unified'
 import { FC, HTMLProps, useEffect, useMemo, useState } from 'react'
-import { useAsyncFn, useTimeoutFn } from 'react-use'
-import { WalletMessages } from '../../../Wallet/messages'
+import { useTimeoutFn } from 'react-use'
 import { useTip } from '../../contexts'
 import { useI18N } from '../../locales'
 import type { TipNFTKeyPair } from '../../types'
@@ -60,15 +59,10 @@ export const NFTSection: FC<Props> = ({ className, onAddToken, onEmpty, ...rest
     const { erc721Address, erc721TokenId, setErc721TokenId, setErc721Address } = useTip()
     const { classes } = useStyles()
     const t = useI18N()
-    const account = useAccount()
     const selectedPairs: TipNFTKeyPair[] = useMemo(
         () => (erc721Address && erc721TokenId ? [[erc721Address, erc721TokenId]] : []),
         [erc721TokenId, erc721TokenId],
     )
-    const { Asset } = useWeb3PluginState()
-
-    const networkDescriptor = useNetworkDescriptor()
-
     // Cannot get the loading status of fetching via websocket
     // loading status of `useAsyncRetry` is not the real status
     const [guessLoading, setGuessLoading] = useState(true)
@@ -76,30 +70,7 @@ export const NFTSection: FC<Props> = ({ className, onAddToken, onEmpty, ...rest
         setGuessLoading(false)
     }, 10000)
 
-    const [{ value = { data: EMPTY_LIST }, loading }, fetchTokens] = useAsyncFn(async () => {
-        const result = await Asset?.getNonFungibleAssets?.(account, { page: 0 }, undefined, networkDescriptor)
-        return result
-    }, [account, Asset?.getNonFungibleAssets, networkDescriptor])
-
-    useEffect(() => {
-        fetchTokens()
-    }, [fetchTokens])
-
-    useEffect(() => {
-        const unsubscribeTokens = WalletMessages.events.erc721TokensUpdated.on(fetchTokens)
-        const unsubscribeSocket = WalletMessages.events.socketMessageUpdated.on((info) => {
-            setGuessLoading(info.done)
-            if (!info.done) {
-                fetchTokens()
-            }
-        })
-        return () => {
-            unsubscribeTokens()
-            unsubscribeSocket()
-        }
-    }, [fetchTokens])
-
-    const fetchedTokens = value?.data ?? EMPTY_LIST
+    const { value: fetchedTokens = EMPTY_LIST, loading } = useNonFungibleAssets(NetworkPluginID.PLUGIN_EVM)
 
     const tokens = useMemo(() => {
         return uniqWith(fetchedTokens, (v1, v2) => {
diff --git a/packages/mask/src/plugins/Tips/components/TipDialog.tsx b/packages/mask/src/plugins/Tips/components/TipDialog.tsx
index cd54cf22a667..6da5f84fdb6c 100644
--- a/packages/mask/src/plugins/Tips/components/TipDialog.tsx
+++ b/packages/mask/src/plugins/Tips/components/TipDialog.tsx
@@ -1,8 +1,11 @@
 import { Drop2Icon, LinkOutIcon, SuccessIcon } from '@masknet/icons'
 import { PluginId, useActivatedPlugin } from '@masknet/plugin-infra/dom'
 import {
+    useAccount,
+    useChainId,
     useCurrentWeb3NetworkPluginID,
     useNetworkDescriptor,
+    useNonFungibleToken,
     useProviderDescriptor,
     useReverseAddress,
     useWeb3State,
@@ -11,7 +14,7 @@ import { InjectedDialog, NFTCardStyledAssetPlayer, WalletIcon } from '@masknet/s
 import { EMPTY_LIST } from '@masknet/shared-base'
 import { useRemoteControlledDialog } from '@masknet/shared-base-ui'
 import { makeStyles } from '@masknet/theme'
-import { ERC721TokenDetailed, useAccount, useChainId, useERC721TokenDetailed } from '@masknet/web3-shared-evm'
+import type { ChainId, SchemaType } from '@masknet/web3-shared-evm'
 import { DialogContent, Link, Typography } from '@mui/material'
 import { useCallback, useMemo } from 'react'
 import { useBoolean } from 'react-use'
@@ -25,6 +28,7 @@ import { TipType } from '../types'
 import { AddDialog } from './AddDialog'
 import { ConfirmModal } from './common/ConfirmModal'
 import { TipForm } from './TipForm'
+import { NetworkPluginID, NonFungibleToken } from '@masknet/web3-shared-base'
 
 const useStyles = makeStyles()((theme) => ({
     dialog: {
@@ -185,9 +189,13 @@ export function TipDialog({ open = false, onClose }: TipDialogProps) {
         return message
     }, [amount, isTokenTip, erc721Contract?.name, token, recipient, recipientSnsId, t])
 
-    const { tokenDetailed: erc721Token } = useERC721TokenDetailed(erc721Contract, erc721TokenId)
+    const { value: erc721Token } = useNonFungibleToken(
+        NetworkPluginID.PLUGIN_EVM,
+        erc721Contract?.address,
+        erc721TokenId ?? '',
+    )
 
-    const chainId = useChainId()
+    const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
     const successMessage = useMemo(() => {
         if (isTokenTip) return t.send_tip_successfully()
         if (erc721Token)
@@ -196,8 +204,8 @@ export function TipDialog({ open = false, onClose }: TipDialogProps) {
                     <div className={classes.nftContainer}>
                         <NFTCardStyledAssetPlayer
                             chainId={chainId}
-                            contractAddress={erc721Token.contractDetailed.address}
-                            url={erc721Token.info.mediaUrl}
+                            contractAddress={erc721Token.address}
+                            url={erc721Token.metadata?.mediaURL}
                             tokenId={erc721Token.tokenId}
                             classes={{
                                 loadingFailImage: classes.loadingFailImage,
@@ -207,7 +215,7 @@ export function TipDialog({ open = false, onClose }: TipDialogProps) {
                     <Typography className={classes.nftMessageText}>
                         {t.send_specific_tip_successfully({
                             amount: '1',
-                            name: erc721Token.info.name || 'NFT',
+                            name: erc721Token.contract?.name || 'NFT',
                         })}
                     </Typography>
                 </div>
@@ -223,11 +231,11 @@ export function TipDialog({ open = false, onClose }: TipDialogProps) {
     const networkDescriptor = useNetworkDescriptor()
     const providerDescriptor = useProviderDescriptor()
 
-    const { Utils } = useWeb3State()
-    const account = useAccount()
-    const { value: domain } = useReverseAddress(account)
+    const { Others } = useWeb3State(NetworkPluginID.PLUGIN_EVM)
+    const account = useAccount(NetworkPluginID.PLUGIN_EVM)
+    const { value: domain } = useReverseAddress(NetworkPluginID.PLUGIN_EVM, account)
     const walletTitle =
-        Utils?.formatDomainName?.(domain) || Utils?.formatAddress?.(account, 4) || providerDescriptor?.name
+        Others?.formatDomainName?.(domain) || Others?.formatAddress?.(account, 4) || providerDescriptor?.name
 
     // #region change provider
     const { openDialog: openSelectProviderDialog } = useRemoteControlledDialog(
@@ -239,8 +247,8 @@ export function TipDialog({ open = false, onClose }: TipDialogProps) {
         return openSelectProviderDialog()
     }, [openSelectProviderDialog, hasNativeAPI])
 
-    const handleAddToken = useCallback((token: ERC721TokenDetailed) => {
-        setErc721Address(token.contractDetailed.address ?? '')
+    const handleAddToken = useCallback((token: NonFungibleToken<ChainId, SchemaType>) => {
+        setErc721Address(token.address ?? '')
         setErc721TokenId(token.tokenId)
         openAddTokenDialog(false)
     }, [])
@@ -259,10 +267,10 @@ export function TipDialog({ open = false, onClose }: TipDialogProps) {
                 </Typography>
 
                 <Typography ml={1} className={classes.walletAddress}>
-                    {Utils?.formatAddress?.(account, 4)}
+                    {Others?.formatAddress?.(account, 4)}
                     <Link
                         className={classes.link}
-                        href={account ? Utils?.resolveAddressLink?.(chainId, account) ?? '' : ''}
+                        href={account ? Others?.explorerResolver.addressLink(chainId, account) ?? '' : ''}
                         target="_blank"
                         rel="noopener noreferrer">
                         <LinkOutIcon className={classes.linkIcon} />
diff --git a/packages/mask/src/plugins/Tips/components/TipForm.tsx b/packages/mask/src/plugins/Tips/components/TipForm.tsx
index bf3f9a293baf..1c90dda00301 100644
--- a/packages/mask/src/plugins/Tips/components/TipForm.tsx
+++ b/packages/mask/src/plugins/Tips/components/TipForm.tsx
@@ -1,8 +1,9 @@
-import { useWeb3State } from '@masknet/plugin-infra/web3'
+import { useAccount, useChainId, useWeb3State } from '@masknet/plugin-infra/web3'
 import { WalletMessages } from '@masknet/plugin-wallet'
 import { useRemoteControlledDialog } from '@masknet/shared-base-ui'
 import { makeStyles } from '@masknet/theme'
-import { ChainId, useAccount, useChainId } from '@masknet/web3-shared-evm'
+import { NetworkPluginID } from '@masknet/web3-shared-base'
+import { ChainId } from '@masknet/web3-shared-evm'
 import {
     Box,
     BoxProps,
@@ -18,7 +19,7 @@ import {
 import classnames from 'classnames'
 import { FC, memo, useCallback, useRef, useState } from 'react'
 import ActionButton from '../../../extension/options-page/DashboardComponents/ActionButton'
-import { EthereumChainBoundary } from '../../../web3/UI/EthereumChainBoundary'
+import { ChainBoundary } from '../../../web3/UI/ChainBoundary'
 import { TargetChainIdContext, useTip, useTipValidate } from '../contexts'
 import { useI18N } from '../locales'
 import { TipType } from '../types'
@@ -94,7 +95,7 @@ interface Props extends BoxProps {
 
 export const TipForm: FC<Props> = memo(({ className, onAddToken, onSent, ...rest }) => {
     const t = useI18N()
-    const currentChainId = useChainId()
+    const currentChainId = useChainId(NetworkPluginID.PLUGIN_EVM)
     const { targetChainId: chainId } = TargetChainIdContext.useContainer()
     const { classes } = useStyles()
     const {
@@ -107,9 +108,9 @@ export const TipForm: FC<Props> = memo(({ className, onAddToken, onSent, ...rest
         setTipType,
     } = useTip()
     const [isValid, validateMessage] = useTipValidate()
-    const { Utils } = useWeb3State()
+    const { Others } = useWeb3State(NetworkPluginID.PLUGIN_EVM)
     const selectRef = useRef(null)
-    const account = useAccount()
+    const account = useAccount(NetworkPluginID.PLUGIN_EVM)
     const { openDialog: openSelectProviderDialog } = useRemoteControlledDialog(
         WalletMessages.events.selectProviderDialogUpdated,
     )
@@ -152,7 +153,7 @@ export const TipForm: FC<Props> = memo(({ className, onAddToken, onSent, ...rest
                         }}>
                         {recipientAddresses.map((address) => (
                             <MenuItem key={address} value={address}>
-                                {Utils?.formatDomainName?.(address) || address}
+                                {Others?.formatDomainName?.(address) || address}
                             </MenuItem>
                         ))}
                     </Select>
@@ -187,10 +188,10 @@ export const TipForm: FC<Props> = memo(({ className, onAddToken, onSent, ...rest
                 )}
             </div>
             {account ? (
-                <EthereumChainBoundary
-                    chainId={chainId}
+                <ChainBoundary
+                    expectedPluginID={NetworkPluginID.PLUGIN_EVM}
+                    expectedChainId={chainId}
                     noSwitchNetworkTip
-                    disablePadding
                     ActionButtonPromiseProps={{
                         fullWidth: true,
                         classes: { root: classes.button, disabled: classes.disabledButton },
@@ -205,7 +206,7 @@ export const TipForm: FC<Props> = memo(({ className, onAddToken, onSent, ...rest
                         onClick={send}>
                         {buttonLabel}
                     </ActionButton>
-                </EthereumChainBoundary>
+                </ChainBoundary>
             ) : (
                 <ActionButton
                     variant="contained"
diff --git a/packages/mask/src/plugins/Tips/components/TokenSection/index.tsx b/packages/mask/src/plugins/Tips/components/TokenSection/index.tsx
index bf08d00bc56b..3a241b638d13 100644
--- a/packages/mask/src/plugins/Tips/components/TokenSection/index.tsx
+++ b/packages/mask/src/plugins/Tips/components/TokenSection/index.tsx
@@ -1,11 +1,7 @@
+import { useFungibleTokenBalance, useGasPrice, useWeb3State } from '@masknet/plugin-infra/web3'
 import { usePickToken } from '@masknet/shared'
-import {
-    EthereumTokenType,
-    isNativeTokenAddress,
-    useFungibleTokenBalance,
-    useGasPrice,
-    isEIP1559Supported,
-} from '@masknet/web3-shared-evm'
+import { NetworkPluginID } from '@masknet/web3-shared-base'
+import { isNativeTokenAddress } from '@masknet/web3-shared-evm'
 import BigNumber from 'bignumber.js'
 import { FC, useCallback, useEffect, useMemo } from 'react'
 import { TokenAmountPanel } from '../../../../web3/UI/TokenAmountPanel'
@@ -16,14 +12,16 @@ const GAS_LIMIT = 21000
 export const TokenSection: FC = () => {
     const { token, setToken, amount, setAmount, isSending, setGasConfig } = useTip()
     const { targetChainId: chainId } = TargetChainIdContext.useContainer()
+    const { Others } = useWeb3State(NetworkPluginID.PLUGIN_EVM)
+
     // balance
     const { value: tokenBalance = '0', loading: loadingTokenBalance } = useFungibleTokenBalance(
-        token?.type || EthereumTokenType.Native,
-        token?.address || '',
-        chainId,
+        NetworkPluginID.PLUGIN_EVM,
+        token?.address,
+        { chainId },
     )
     const { gasPrice, gasConfig } = useGasConfig(chainId)
-    const { value: defaultGasPrice = '1' } = useGasPrice(chainId)
+    const { value: defaultGasPrice = '1' } = useGasPrice(NetworkPluginID.PLUGIN_EVM, { chainId })
     const isNativeToken = useMemo(() => isNativeTokenAddress(token?.address), [token?.address])
 
     const maxAmount = useMemo(() => {
@@ -36,7 +34,7 @@ export const TokenSection: FC = () => {
     useEffect(() => {
         if (isNativeToken) {
             setGasConfig(
-                isEIP1559Supported(chainId)
+                Others?.chainResolver.isSupport(chainId, '1559')
                     ? {
                           gas: GAS_LIMIT,
                           maxFeePerGas: gasConfig?.maxFeePerGas || defaultGasPrice,
diff --git a/packages/mask/src/plugins/Tips/contexts/TargetChainIdContext.ts b/packages/mask/src/plugins/Tips/contexts/TargetChainIdContext.ts
index ad2d904a03a7..ca90dceef5f6 100644
--- a/packages/mask/src/plugins/Tips/contexts/TargetChainIdContext.ts
+++ b/packages/mask/src/plugins/Tips/contexts/TargetChainIdContext.ts
@@ -1,9 +1,11 @@
-import { ChainId, useChainId } from '@masknet/web3-shared-evm'
 import { useEffect, useState } from 'react'
 import { createContainer } from 'unstated-next'
+import type { ChainId } from '@masknet/web3-shared-evm'
+import { NetworkPluginID } from '@masknet/web3-shared-base'
+import { useChainId } from '@masknet/plugin-infra/web3'
 
 function useTargetChainId() {
-    const chainId = useChainId()
+    const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
     const [targetChainId, setTargetChainId] = useState<ChainId>(chainId)
 
     useEffect(() => {
diff --git a/packages/mask/src/plugins/Tips/contexts/Tip/TipContext.ts b/packages/mask/src/plugins/Tips/contexts/Tip/TipContext.ts
index a223b6c987b3..ce9669fe6eba 100644
--- a/packages/mask/src/plugins/Tips/contexts/Tip/TipContext.ts
+++ b/packages/mask/src/plugins/Tips/contexts/Tip/TipContext.ts
@@ -1,5 +1,5 @@
-import type { Web3Plugin } from '@masknet/plugin-infra/web3'
-import type { ERC721ContractDetailed, FungibleTokenDetailed, GasConfig } from '@masknet/web3-shared-evm'
+import type { FungibleToken, NonFungibleToken, NonFungibleTokenContract } from '@masknet/web3-shared-base'
+import type { ChainId, GasConfig, SchemaType } from '@masknet/web3-shared-evm'
 import { noop } from 'lodash-unified'
 import { createContext, Dispatch, SetStateAction } from 'react'
 import { TipType } from '../../types'
@@ -11,18 +11,18 @@ export interface ContextOptions {
     tipType: TipType
     setTipType: Dispatch<SetStateAction<TipType>>
     recipients: string[]
-    token: FungibleTokenDetailed | null
-    setToken: Dispatch<SetStateAction<FungibleTokenDetailed | null>>
+    token: FungibleToken<ChainId, SchemaType> | null
+    setToken: Dispatch<SetStateAction<FungibleToken<ChainId, SchemaType> | null>>
     amount: string
     setAmount: Dispatch<SetStateAction<string>>
     erc721TokenId: string | null
     setErc721TokenId: Dispatch<SetStateAction<string | null>>
-    erc721Contract: ERC721ContractDetailed | null
+    erc721Contract: NonFungibleTokenContract<ChainId, SchemaType> | null
     erc721Address: string
     setErc721Address: Dispatch<SetStateAction<string>>
     sendTip: () => Promise<string | undefined>
     isSending: boolean
-    storedTokens: Web3Plugin.NonFungibleToken[]
+    storedTokens: Array<NonFungibleToken<ChainId, SchemaType>>
     reset: () => void
     setGasConfig: Dispatch<SetStateAction<GasConfig | undefined>>
 }
diff --git a/packages/mask/src/plugins/Tips/contexts/Tip/TipTaskProvider.tsx b/packages/mask/src/plugins/Tips/contexts/Tip/TipTaskProvider.tsx
index acefd3c30e9e..3407c5e24985 100644
--- a/packages/mask/src/plugins/Tips/contexts/Tip/TipTaskProvider.tsx
+++ b/packages/mask/src/plugins/Tips/contexts/Tip/TipTaskProvider.tsx
@@ -1,4 +1,6 @@
-import { GasConfig, useChainId, useERC721ContractDetailed, useNativeTokenDetailed } from '@masknet/web3-shared-evm'
+import { useChainId, useFungibleToken, useNonFungibleTokenContract } from '@masknet/plugin-infra/web3'
+import { NetworkPluginID } from '@masknet/web3-shared-base'
+import type { GasConfig } from '@masknet/web3-shared-evm'
 import { FC, useContext, useEffect, useMemo, useState } from 'react'
 import { useSubscription } from 'use-subscription'
 import { getStorage } from '../../storage'
@@ -13,18 +15,20 @@ interface Props {
 }
 
 export const TipTaskProvider: FC<React.PropsWithChildren<Props>> = ({ children, task }) => {
+    const { targetChainId } = TargetChainIdContext.useContainer()
     const [recipient, setRecipient] = useState('')
     const [tipType, setTipType] = useState<TipType>(TipType.Token)
     const [amount, setAmount] = useState('')
-    const { targetChainId } = TargetChainIdContext.useContainer()
-    const chainId = useChainId()
+    const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
     const [erc721Address, setErc721Address] = useState<string>('')
-    const { value: nativeTokenDetailed = null } = useNativeTokenDetailed(targetChainId)
+    const { value: nativeTokenDetailed = null } = useFungibleToken(NetworkPluginID.PLUGIN_EVM, undefined, {
+        chainId: targetChainId,
+    })
     const [token, setToken] = useState<ContextOptions['token']>(nativeTokenDetailed)
     const [erc721TokenId, setErc721TokenId] = useState<ContextOptions['erc721TokenId']>(null)
     const storedTokens = useSubscription(getStorage().addedTokens.subscription)
 
-    const { value: erc721Contract } = useERC721ContractDetailed(erc721Address)
+    const { value: erc721Contract } = useNonFungibleTokenContract(NetworkPluginID.PLUGIN_EVM, erc721Address)
 
     useEffect(() => {
         setTipType(TipType.Token)
diff --git a/packages/mask/src/plugins/Tips/contexts/Tip/useNftTip.ts b/packages/mask/src/plugins/Tips/contexts/Tip/useNftTip.ts
index f1f1d40a23c0..51344d93d3f0 100644
--- a/packages/mask/src/plugins/Tips/contexts/Tip/useNftTip.ts
+++ b/packages/mask/src/plugins/Tips/contexts/Tip/useNftTip.ts
@@ -1,36 +1,26 @@
-import {
-    EthereumTokenType,
-    useERC721ContractDetailed,
-    useERC721TokenDetailedCallback,
-    useTokenTransferCallback,
-} from '@masknet/web3-shared-evm'
-import { useCallback, useEffect } from 'react'
-import { WalletRPC } from '../../../Wallet/messages'
+import { useCallback } from 'react'
+import { useERC721TokenTransferCallback } from '@masknet/plugin-infra/web3-evm'
+import { useWeb3Connection, useChainId, useWeb3State } from '@masknet/plugin-infra/web3'
+import { NetworkPluginID } from '@masknet/web3-shared-base'
 import type { TipTuple } from './type'
 
 export function useNftTip(recipient: string, tokenId: string | null, contractAddress?: string): TipTuple {
-    const [{ loading: isTransferring }, transferCallback] = useTokenTransferCallback(
-        EthereumTokenType.ERC721,
-        contractAddress || '',
-    )
-    const { value: contractDetailed } = useERC721ContractDetailed(contractAddress)
-    const [, setTokenId, erc721TokenDetailedCallback] = useERC721TokenDetailedCallback(contractDetailed)
-
-    useEffect(() => {
-        if (tokenId) {
-            setTokenId(tokenId)
-        }
-    }, [tokenId])
+    const connection = useWeb3Connection(NetworkPluginID.PLUGIN_EVM)
+    const { Token } = useWeb3State(NetworkPluginID.PLUGIN_EVM)
+    const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
+    const [{ loading: isTransferring }, transferCallback] = useERC721TokenTransferCallback(contractAddress || '')
 
     const sendTip = useCallback(async () => {
         if (!tokenId || !contractAddress) return
         const hash = await transferCallback(tokenId, recipient)
-        const tokenDetailed = await erc721TokenDetailedCallback()
+        const tokenDetailed = await connection?.getNonFungibleToken(contractAddress ?? '', tokenId, {
+            chainId,
+        })
         if (tokenDetailed) {
-            await WalletRPC.removeToken(tokenDetailed)
+            await Token?.removeToken?.(tokenDetailed)
         }
         return hash
-    }, [tokenId, contractAddress, erc721TokenDetailedCallback, recipient, transferCallback])
+    }, [tokenId, contractAddress, recipient, transferCallback])
 
     return [isTransferring, sendTip]
 }
diff --git a/packages/mask/src/plugins/Tips/contexts/Tip/useTipValidate.ts b/packages/mask/src/plugins/Tips/contexts/Tip/useTipValidate.ts
index 2eca80b4dc8d..0135fe72d022 100644
--- a/packages/mask/src/plugins/Tips/contexts/Tip/useTipValidate.ts
+++ b/packages/mask/src/plugins/Tips/contexts/Tip/useTipValidate.ts
@@ -1,5 +1,5 @@
-import { isGreaterThan, isLessThanOrEqualTo, rightShift } from '@masknet/web3-shared-base'
-import { EthereumTokenType, useFungibleTokenBalance } from '@masknet/web3-shared-evm'
+import { useFungibleTokenBalance } from '@masknet/plugin-infra/web3'
+import { isGreaterThan, isLessThanOrEqualTo, NetworkPluginID, rightShift } from '@masknet/web3-shared-base'
 import { useContext, useMemo } from 'react'
 import { useI18N } from '../../locales'
 import { TipType } from '../../types'
@@ -9,7 +9,7 @@ type ValidationTuple = [isValid: boolean, message?: string]
 
 export function useTipValidate(): ValidationTuple {
     const { tipType, amount, token, erc721TokenId, erc721Address } = useContext(TipContext)
-    const { value: balance = '0' } = useFungibleTokenBalance(token?.type || EthereumTokenType.Native, token?.address)
+    const { value: balance = '0' } = useFungibleTokenBalance(NetworkPluginID.PLUGIN_EVM, token?.address)
     const t = useI18N()
 
     const result: ValidationTuple = useMemo(() => {
diff --git a/packages/mask/src/plugins/Tips/contexts/Tip/useTokenTip.ts b/packages/mask/src/plugins/Tips/contexts/Tip/useTokenTip.ts
index ba9e4b71d2f5..20468eb15f2f 100644
--- a/packages/mask/src/plugins/Tips/contexts/Tip/useTokenTip.ts
+++ b/packages/mask/src/plugins/Tips/contexts/Tip/useTokenTip.ts
@@ -1,18 +1,12 @@
-import { rightShift } from '@masknet/web3-shared-base'
-import {
-    EthereumTokenType,
-    FungibleTokenDetailed,
-    GasConfig,
-    isSameAddress,
-    useTokenConstants,
-    useTokenTransferCallback,
-} from '@masknet/web3-shared-evm'
+import { useTokenTransferCallback } from '@masknet/plugin-infra/web3-evm'
+import { FungibleToken, isSameAddress, rightShift } from '@masknet/web3-shared-base'
+import { ChainId, GasConfig, SchemaType, useTokenConstants } from '@masknet/web3-shared-evm'
 import { useCallback } from 'react'
 import type { TipTuple } from './type'
 
 export function useTokenTip(
     recipient: string,
-    token: FungibleTokenDetailed | null,
+    token: FungibleToken<ChainId, SchemaType> | null,
     amount: string,
     gasConfig?: GasConfig,
 ): TipTuple {
@@ -20,7 +14,7 @@ export function useTokenTip(
 
     const isNativeToken = isSameAddress(token?.address, NATIVE_TOKEN_ADDRESS)
 
-    const assetType = isNativeToken ? EthereumTokenType.Native : EthereumTokenType.ERC20
+    const assetType = isNativeToken ? SchemaType.Native : SchemaType.ERC20
     const [{ loading: isTransferring }, transferCallback] = useTokenTransferCallback(assetType, token?.address || '')
 
     const sendTip = useCallback(async () => {
diff --git a/packages/mask/src/plugins/Tips/hooks/useSupportedNetworks.ts b/packages/mask/src/plugins/Tips/hooks/useSupportedNetworks.ts
index f810eabfbeb5..61a3b6270dd6 100644
--- a/packages/mask/src/plugins/Tips/hooks/useSupportedNetworks.ts
+++ b/packages/mask/src/plugins/Tips/hooks/useSupportedNetworks.ts
@@ -1,8 +1,7 @@
-import { NetworkPluginID } from '@masknet/plugin-infra/web3'
 import { EVMChainsIcon, SolanaIcon, FlowIcon } from '@masknet/icons'
 import type { OverridableComponent } from '@mui/material/OverridableComponent'
 import type { SvgIconTypeMap } from '@mui/material'
-
+import { NetworkPluginID } from '@masknet/web3-shared-base'
 export interface SupportedNetworkMap {
     name: string
     icon: OverridableComponent<SvgIconTypeMap<{}, 'svg'>>
diff --git a/packages/mask/src/plugins/Tips/hooks/useTipsWalletsList.ts b/packages/mask/src/plugins/Tips/hooks/useTipsWalletsList.ts
index 606b72c064d5..160dd8e605ca 100644
--- a/packages/mask/src/plugins/Tips/hooks/useTipsWalletsList.ts
+++ b/packages/mask/src/plugins/Tips/hooks/useTipsWalletsList.ts
@@ -1,7 +1,7 @@
 import { BindingProof, EMPTY_LIST, NextIDStorageInfo } from '@masknet/shared-base'
-import { isSameAddress } from '@masknet/web3-shared-evm'
 import { PluginId } from '@masknet/plugin-infra'
 import { sortBy } from 'lodash-unified'
+import { isSameAddress } from '@masknet/web3-shared-base'
 
 export function useTipsWalletsList(
     proofList: BindingProof[] | undefined,
diff --git a/packages/mask/src/plugins/Tips/storage/index.ts b/packages/mask/src/plugins/Tips/storage/index.ts
index 42a43acd8696..87ce2d8923f9 100644
--- a/packages/mask/src/plugins/Tips/storage/index.ts
+++ b/packages/mask/src/plugins/Tips/storage/index.ts
@@ -1,10 +1,10 @@
-import type { Web3Plugin } from '@masknet/plugin-infra/web3'
-import type { ScopedStorage } from '@masknet/shared-base'
-import { isSameAddress } from '@masknet/web3-shared-evm'
 import { remove } from 'lodash-unified'
+import type { ScopedStorage } from '@masknet/shared-base'
+import { NonFungibleToken, isSameAddress } from '@masknet/web3-shared-base'
+import type { ChainId, SchemaType } from '@masknet/web3-shared-evm'
 
 interface StorageValue {
-    addedTokens: Web3Plugin.NonFungibleToken[]
+    addedTokens: Array<NonFungibleToken<ChainId, SchemaType>>
 }
 
 export const storageDefaultValue = {
@@ -26,7 +26,7 @@ export function getTokens() {
     return storage.storage.addedTokens.value
 }
 
-export function storeToken(token: Web3Plugin.NonFungibleToken) {
+export function storeToken(token: NonFungibleToken<ChainId, SchemaType>) {
     const tokens = [token, ...getTokens()]
     storage.storage.addedTokens.setValue(tokens)
 }
diff --git a/packages/mask/src/plugins/Trader/Dashboard/index.tsx b/packages/mask/src/plugins/Trader/Dashboard/index.tsx
index e021aaa09f44..44346ce09468 100644
--- a/packages/mask/src/plugins/Trader/Dashboard/index.tsx
+++ b/packages/mask/src/plugins/Trader/Dashboard/index.tsx
@@ -1,8 +1,9 @@
 import type { Plugin } from '@masknet/plugin-infra'
 import { base } from '../base'
 import { TraderDialog } from '../SNSAdaptor/trader/TraderDialog'
+import type { ChainId } from '@masknet/web3-shared-evm'
 
-const dashboard: Plugin.Dashboard.Definition = {
+const dashboard: Plugin.Dashboard.Definition<ChainId> = {
     ...base,
     init(signal) {},
     GlobalInjection: function Component() {
diff --git a/packages/mask/src/plugins/Trader/LBP/useLBP.ts b/packages/mask/src/plugins/Trader/LBP/useLBP.ts
deleted file mode 100644
index 38206c525638..000000000000
--- a/packages/mask/src/plugins/Trader/LBP/useLBP.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { ERC20TokenDetailed, isSameAddress } from '@masknet/web3-shared-evm'
-import LBP from '../apis/LBP/LBP.json'
-import { useMemo } from 'react'
-import { Flags } from '../../../../shared'
-
-export function useLBP(token?: ERC20TokenDetailed) {
-    return useMemo(() => {
-        if (!token) return
-        // read LBP from the whitelist
-        const LBP_ = LBP.find((x) => isSameAddress(x.token.address, token.address))
-        return (
-            LBP_ ??
-            (Flags.LBP_whitelist_enabled
-                ? undefined
-                : {
-                      name: `${token.name} LBP`,
-                      duration: 3 /* months */ * 30 /* days */ * 24 /* hours */ * 60 /* minutes */ * 60 /* seconds */,
-                      token,
-                  })
-        )
-    }, [token?.address])
-}
diff --git a/packages/mask/src/plugins/Trader/LBP/usePoolTokenPrices.ts b/packages/mask/src/plugins/Trader/LBP/usePoolTokenPrices.ts
deleted file mode 100644
index 816c3405f17f..000000000000
--- a/packages/mask/src/plugins/Trader/LBP/usePoolTokenPrices.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { useAsyncRetry } from 'react-use'
-import { PluginTraderRPC } from '../messages'
-
-export function usePoolTokenPrices(address: string, duration: number, size: number) {
-    return useAsyncRetry(async () => {
-        if (!address) return []
-        return PluginTraderRPC.fetchTokenPrices(address, duration, size)
-    }, [address, duration, size])
-}
diff --git a/packages/mask/src/plugins/Trader/LBP/usePoolTokens.ts b/packages/mask/src/plugins/Trader/LBP/usePoolTokens.ts
deleted file mode 100644
index b8194303af1d..000000000000
--- a/packages/mask/src/plugins/Trader/LBP/usePoolTokens.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { useAsyncRetry } from 'react-use'
-import { PluginTraderRPC } from '../messages'
-
-export function usePoolTokens(address: string, duration: number, size: number) {
-    return useAsyncRetry(async () => {
-        if (!address) return []
-        return PluginTraderRPC.fetchPoolTokens(address, duration, size)
-    }, [address, duration, size])
-}
diff --git a/packages/mask/src/plugins/Trader/LBP/usePools.ts b/packages/mask/src/plugins/Trader/LBP/usePools.ts
deleted file mode 100644
index 15e3d3e52b52..000000000000
--- a/packages/mask/src/plugins/Trader/LBP/usePools.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { useAsyncRetry } from 'react-use'
-import { PluginTraderRPC } from '../messages'
-
-export function usePools(address: string) {
-    return useAsyncRetry(async () => {
-        if (!address) return []
-        return PluginTraderRPC.fetchLBP_PoolsByTokenAddress(address)
-    }, [address])
-}
diff --git a/packages/mask/src/plugins/Trader/SNSAdaptor/cashTag.tsx b/packages/mask/src/plugins/Trader/SNSAdaptor/cashTag.tsx
index 83ba0f48be8d..08b1d045a3ed 100644
--- a/packages/mask/src/plugins/Trader/SNSAdaptor/cashTag.tsx
+++ b/packages/mask/src/plugins/Trader/SNSAdaptor/cashTag.tsx
@@ -1,13 +1,16 @@
 import { PluginTraderMessages, PluginTraderRPC } from '../messages'
 import { TagType } from '../types'
+import type { ChainId } from '@masknet/web3-shared-evm'
 import type { Plugin } from '@masknet/plugin-infra'
+import type { Web3Helper } from '@masknet/plugin-infra/web3'
+import type { NetworkPluginID } from '@masknet/web3-shared-base'
 
-export const enhanceTag: Plugin.SNSAdaptor.Definition['enhanceTag'] = {
-    onHover(kind, content, event) {
+export const enhanceTag: Plugin.SNSAdaptor.Definition<ChainId>['enhanceTag'] = {
+    onHover(kind, content, event, chainId: Web3Helper.Definition[NetworkPluginID.PLUGIN_EVM]['ChainId']) {
         const element = event.currentTarget
         const timer = setTimeout(async () => {
             const type = kind === 'cash' ? TagType.CASH : TagType.HASH
-            const dataProviders = await PluginTraderRPC.getAvailableDataProviders(type, content)
+            const dataProviders = await PluginTraderRPC.getAvailableDataProviders(chainId, type, content)
             if (!dataProviders.length) return
             PluginTraderMessages.cashTagObserved.sendToLocal({
                 name: content,
diff --git a/packages/mask/src/plugins/Trader/SNSAdaptor/index.tsx b/packages/mask/src/plugins/Trader/SNSAdaptor/index.tsx
index a6f9ab174c5c..0eba0d4e5d54 100644
--- a/packages/mask/src/plugins/Trader/SNSAdaptor/index.tsx
+++ b/packages/mask/src/plugins/Trader/SNSAdaptor/index.tsx
@@ -9,10 +9,27 @@ import { enhanceTag } from './cashTag'
 import { ApplicationEntry } from '@masknet/shared'
 import { SwapColorfulIcon } from '@masknet/icons'
 import { PluginTraderMessages } from '../messages'
+import { setupStorage, storageDefaultValue } from '../storage'
+import type { ChainId } from '@masknet/web3-shared-evm'
 
-const sns: Plugin.SNSAdaptor.Definition = {
+const sns: Plugin.SNSAdaptor.Definition<
+    ChainId,
+    unknown,
+    unknown,
+    unknown,
+    unknown,
+    unknown,
+    unknown,
+    unknown,
+    unknown,
+    unknown,
+    unknown,
+    unknown
+> = {
     ...base,
-    init(signal) {},
+    init(signal, context) {
+        setupStorage(context.createKVStorage('persistent', '', storageDefaultValue))
+    },
     SearchResultBox: SearchResultInspector,
     GlobalInjection: function Component() {
         return (
diff --git a/packages/mask/src/plugins/Trader/SNSAdaptor/trader/ConfirmDialog.tsx b/packages/mask/src/plugins/Trader/SNSAdaptor/trader/ConfirmDialog.tsx
index b0073a1ae351..29e06f43bec1 100644
--- a/packages/mask/src/plugins/Trader/SNSAdaptor/trader/ConfirmDialog.tsx
+++ b/packages/mask/src/plugins/Trader/SNSAdaptor/trader/ConfirmDialog.tsx
@@ -2,18 +2,16 @@ import { CramIcon, InfoIcon, RetweetIcon } from '@masknet/icons'
 import { FormattedAddress, FormattedBalance, InjectedDialog, TokenIcon } from '@masknet/shared'
 import { isDashboardPage } from '@masknet/shared-base'
 import { useValueRef } from '@masknet/shared-base-ui'
+import type { TradeComputed } from '../../types'
+import type { ChainId, SchemaType } from '@masknet/web3-shared-evm'
 import { makeStyles, MaskColorVar, useStylesExtends } from '@masknet/theme'
-import { isZero, multipliedBy } from '@masknet/web3-shared-base'
 import {
     createNativeToken,
-    formatBalance,
     formatEthereumAddress,
     formatPercentage,
     formatUSD,
     formatWeiToEther,
-    FungibleTokenDetailed,
-    resolveAddressLinkOnExplorer,
-    Wallet,
+    explorerResolver,
 } from '@masknet/web3-shared-evm'
 import { Alert, Box, Button, DialogActions, DialogContent, Link, Typography } from '@mui/material'
 import BigNumber from 'bignumber.js'
@@ -21,12 +19,12 @@ import { useCallback, useEffect, useMemo, useState } from 'react'
 import { ExternalLink } from 'react-feather'
 import { useUpdateEffect } from 'react-use'
 import { useI18N } from '../../../../utils'
-import { useNativeTokenPrice } from '../../../Wallet/hooks/useTokenPrice'
-import { ONE_BIPS } from '../../constants'
+import { FungibleToken, isZero, multipliedBy, NetworkPluginID, formatBalance, Wallet } from '@masknet/web3-shared-base'
+import { TargetChainIdContext } from '../../trader/useTargetChainIdContext'
 import { currentSlippageSettings } from '../../settings'
+import { useNativeTokenPrice } from '@masknet/plugin-infra/web3'
+import { ONE_BIPS } from '../../constants'
 import { AllProviderTradeContext } from '../../trader/useAllProviderTradeContext'
-import { TargetChainIdContext } from '../../trader/useTargetChainIdContext'
-import type { TradeComputed } from '../../types'
 import { useGreatThanSlippageSetting } from './hooks/useGreatThanSlippageSetting'
 
 const useStyles = makeStyles<{ isDashboard: boolean }>()((theme, { isDashboard }) => ({
@@ -120,13 +118,13 @@ const MAX_SLIPPAGE = 1000
 export interface ConfirmDialogUIProps extends withClasses<never> {
     open: boolean
     trade: TradeComputed
-    inputToken: FungibleTokenDetailed
-    outputToken: FungibleTokenDetailed
+    inputToken: FungibleToken<ChainId, SchemaType>
+    outputToken: FungibleToken<ChainId, SchemaType>
     gas?: number
     gasPrice?: string
     onConfirm: () => void
     onClose?: () => void
-    wallet?: Wallet
+    wallet?: Wallet | null
 }
 
 export function ConfirmDialogUI(props: ConfirmDialogUIProps) {
@@ -152,7 +150,7 @@ export function ConfirmDialogUI(props: ConfirmDialogUIProps) {
 
     // #region gas price
     const nativeToken = createNativeToken(chainId)
-    const tokenPrice = useNativeTokenPrice(chainId)
+    const { value: tokenPrice = 0 } = useNativeTokenPrice(NetworkPluginID.PLUGIN_EVM, { chainId })
 
     const gasFee = useMemo(() => {
         return gas && gasPrice ? multipliedBy(gasPrice, gas).integerValue().toFixed() : '0'
@@ -233,7 +231,7 @@ export function ConfirmDialogUI(props: ConfirmDialogUIProps) {
                                     style={{ color: 'inherit', height: 20 }}
                                     target="_blank"
                                     rel="noopener noreferrer"
-                                    href={resolveAddressLinkOnExplorer(chainId, wallet.address)}>
+                                    href={explorerResolver.addressLink(chainId, wallet.address)}>
                                     <ExternalLink style={{ marginLeft: 5 }} size={20} />
                                 </Link>
                             ) : null}
@@ -245,7 +243,7 @@ export function ConfirmDialogUI(props: ConfirmDialogUIProps) {
                             <TokenIcon
                                 classes={{ icon: classes.tokenIcon }}
                                 address={inputToken.address}
-                                logoURI={inputToken.logoURI}
+                                logoURI={inputToken.logoURL}
                             />
                             <FormattedBalance
                                 value={inputAmount.toFixed() ?? '0'}
@@ -262,7 +260,7 @@ export function ConfirmDialogUI(props: ConfirmDialogUIProps) {
                             <TokenIcon
                                 classes={{ icon: classes.tokenIcon }}
                                 address={outputToken.address}
-                                logoURI={outputToken.logoURI}
+                                logoURI={outputToken.logoURL}
                             />
                             <FormattedBalance
                                 value={outputAmount.toFixed() ?? '0'}
diff --git a/packages/mask/src/plugins/Trader/SNSAdaptor/trader/Gas1559Settings.tsx b/packages/mask/src/plugins/Trader/SNSAdaptor/trader/Gas1559Settings.tsx
index dd0fee0ffc0c..1868c400c799 100644
--- a/packages/mask/src/plugins/Trader/SNSAdaptor/trader/Gas1559Settings.tsx
+++ b/packages/mask/src/plugins/Trader/SNSAdaptor/trader/Gas1559Settings.tsx
@@ -1,10 +1,8 @@
 import { memo, useCallback, useEffect, useMemo, useState } from 'react'
-import { useAsync } from 'react-use'
-import { WalletRPC } from '../../../Wallet/messages'
 import { I18NFunction, useI18N } from '../../../../utils'
 import { Accordion, AccordionDetails, AccordionSummary, Box, TextField, Typography } from '@mui/material'
 import { makeStyles, MaskColorVar } from '@masknet/theme'
-import { formatGweiToWei, GasOptionConfig, useChainId } from '@masknet/web3-shared-evm'
+import { formatGweiToWei, GasOptionConfig } from '@masknet/web3-shared-evm'
 import classnames from 'classnames'
 import { z as zod } from 'zod'
 import BigNumber from 'bignumber.js'
@@ -15,14 +13,17 @@ import { fromWei, toHex } from 'web3-utils'
 import { isEmpty } from 'lodash-unified'
 import ActionButton from '../../../../extension/options-page/DashboardComponents/ActionButton'
 import {
+    GasOptionType,
     isGreaterThan,
     isLessThan,
     isLessThanOrEqualTo,
     isPositive,
     multipliedBy,
+    NetworkPluginID,
     toFixed,
 } from '@masknet/web3-shared-base'
 import { isDashboardPage } from '@masknet/shared-base'
+import { useGasOptions } from '@masknet/plugin-infra/web3'
 
 const useStyles = makeStyles<{ isDashboard: boolean }>()((theme, { isDashboard }) => ({
     option: {
@@ -152,28 +153,24 @@ export const Gas1559Settings = memo<Gas1559SettingsProps>(
         const { t } = useI18N()
         const isDashboard = isDashboardPage()
         const { classes } = useStyles({ isDashboard })
-        const chainId = useChainId()
-
         const [selected, setOption] = useState<number | null>(1)
 
-        const { value: gasOptions, loading: getGasOptionsLoading } = useAsync(async () => {
-            return WalletRPC.getEstimateGasFees(chainId)
-        }, [chainId])
+        const { value: gasOptions, loading: getGasOptionsLoading } = useGasOptions(NetworkPluginID.PLUGIN_EVM)
 
         // #region Gas Options
         const options = useMemo(
             () => [
                 {
                     title: t('plugin_trader_gas_setting_instant'),
-                    content: gasOptions?.low,
+                    content: gasOptions?.[GasOptionType.SLOW],
                 },
                 {
                     title: t('plugin_trader_gas_setting_medium'),
-                    content: gasOptions?.medium,
+                    content: gasOptions?.[GasOptionType.NORMAL],
                 },
                 {
                     title: t('plugin_trader_gas_setting_high'),
-                    content: gasOptions?.high,
+                    content: gasOptions?.[GasOptionType.FAST],
                 },
             ],
             [gasOptions],
@@ -201,12 +198,15 @@ export const Gas1559Settings = memo<Gas1559SettingsProps>(
         // #region These are additional form rules that need to be prompted for but do not affect the validation of the form
         const maxPriorFeeHelperText = useMemo(() => {
             if (getGasOptionsLoading) return undefined
-            if (isLessThan(maxPriorityFeePerGas, gasOptions?.low?.suggestedMaxPriorityFeePerGas ?? 0))
+            if (isLessThan(maxPriorityFeePerGas, gasOptions?.[GasOptionType.SLOW]?.suggestedMaxPriorityFeePerGas ?? 0))
                 return t('wallet_transfer_error_max_priority_gas_fee_too_low')
             if (
                 isGreaterThan(
                     maxPriorityFeePerGas,
-                    multipliedBy(gasOptions?.high?.suggestedMaxPriorityFeePerGas ?? 0, HIGH_FEE_WARNING_MULTIPLIER),
+                    multipliedBy(
+                        gasOptions?.[GasOptionType.FAST]?.suggestedMaxPriorityFeePerGas ?? 0,
+                        HIGH_FEE_WARNING_MULTIPLIER,
+                    ),
                 )
             )
                 return t('wallet_transfer_error_max_priority_gas_fee_too_high')
@@ -215,12 +215,15 @@ export const Gas1559Settings = memo<Gas1559SettingsProps>(
 
         const maxFeeGasHelperText = useMemo(() => {
             if (getGasOptionsLoading) return undefined
-            if (isLessThan(maxFeePerGas, gasOptions?.estimatedBaseFee ?? 0))
+            if (isLessThan(maxFeePerGas, gasOptions?.[GasOptionType.SLOW]?.estimatedBaseFee ?? 0))
                 return t('wallet_transfer_error_max_fee_too_low')
             if (
                 isGreaterThan(
                     maxFeePerGas,
-                    multipliedBy(gasOptions?.high?.suggestedMaxFeePerGas ?? 0, HIGH_FEE_WARNING_MULTIPLIER),
+                    multipliedBy(
+                        gasOptions?.[GasOptionType.FAST]?.suggestedMaxFeePerGas ?? 0,
+                        HIGH_FEE_WARNING_MULTIPLIER,
+                    ),
                 )
             )
                 return t('wallet_transfer_error_max_fee_too_high')
diff --git a/packages/mask/src/plugins/Trader/SNSAdaptor/trader/GasPrior1559Settings.tsx b/packages/mask/src/plugins/Trader/SNSAdaptor/trader/GasPrior1559Settings.tsx
index d7cf98a8ac0f..95e2ce88b239 100644
--- a/packages/mask/src/plugins/Trader/SNSAdaptor/trader/GasPrior1559Settings.tsx
+++ b/packages/mask/src/plugins/Trader/SNSAdaptor/trader/GasPrior1559Settings.tsx
@@ -1,24 +1,17 @@
 import { memo, useCallback, useMemo, useState } from 'react'
-import { useAsync, useUpdateEffect } from 'react-use'
-import { WalletRPC } from '../../../Wallet/messages'
-import {
-    formatGweiToWei,
-    formatWeiToEther,
-    formatWeiToGwei,
-    GasOptionConfig,
-    useChainId,
-    useNativeTokenDetailed,
-} from '@masknet/web3-shared-evm'
+import { useUpdateEffect } from 'react-use'
+import { formatGweiToWei, formatWeiToEther, formatWeiToGwei, GasOptionConfig } from '@masknet/web3-shared-evm'
 import { useI18N } from '../../../../utils'
 import { Accordion, AccordionDetails, AccordionSummary, Box, TextField, Typography } from '@mui/material'
 import { makeStyles, MaskColorVar } from '@masknet/theme'
 import classnames from 'classnames'
-import { useNativeTokenPrice } from '../../../Wallet/hooks/useTokenPrice'
 import { ExpandMore } from '@mui/icons-material'
 import { toHex } from 'web3-utils'
 import BigNumber from 'bignumber.js'
 import ActionButton from '../../../../extension/options-page/DashboardComponents/ActionButton'
 import { isDashboardPage } from '@masknet/shared-base'
+import { useChainId, useFungibleToken, useGasOptions, useNativeTokenPrice } from '@masknet/plugin-infra/web3'
+import { GasOptionType, NetworkPluginID } from '@masknet/web3-shared-base'
 
 const useStyles = makeStyles<{ isDashboard: boolean }>()((theme, { isDashboard }) => ({
     container: {
@@ -117,7 +110,8 @@ interface GasPrior1559SettingsProps {
 
 export const GasPrior1559Settings = memo<GasPrior1559SettingsProps>(
     ({ onCancel, onSave: onSave_, gasConfig, onSaveSlippage }) => {
-        const chainId = useChainId()
+        const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
+        const { value: gasOptions_ } = useGasOptions(NetworkPluginID.PLUGIN_EVM)
         const isDashboard = isDashboardPage()
         const { classes } = useStyles({ isDashboard })
         const { t } = useI18N()
@@ -125,27 +119,24 @@ export const GasPrior1559Settings = memo<GasPrior1559SettingsProps>(
         const [customGasPrice, setCustomGasPrice] = useState('0')
 
         // #region Get gas options from debank
-        const { value: gasOptions } = useAsync(async () => {
-            const response = await WalletRPC.getGasPriceDictFromDeBank(chainId)
-            if (!response) return { slow: 0, standard: 0, fast: 0 }
-
+        const gasOptions = useMemo(() => {
             return {
-                slow: response.data.slow.price,
-                standard: response.data.normal.price,
-                fast: response.data.fast.price,
+                slow: gasOptions_?.[GasOptionType.SLOW].suggestedMaxFeePerGas ?? 0,
+                standard: gasOptions_?.[GasOptionType.NORMAL].suggestedMaxFeePerGas ?? 0,
+                fast: gasOptions_?.[GasOptionType.FAST].suggestedMaxFeePerGas ?? 0,
             }
-        }, [chainId])
+        }, [chainId, gasOptions_])
         // #endregion
 
         const options = useMemo(
             () => [
                 {
                     title: t('plugin_trader_gas_setting_standard'),
-                    gasPrice: gasOptions?.standard ?? 0,
+                    gasPrice: gasOptions?.standard,
                 },
                 {
                     title: t('plugin_trader_gas_setting_fast'),
-                    gasPrice: gasOptions?.fast ?? 0,
+                    gasPrice: gasOptions?.fast,
                 },
                 {
                     title: t('plugin_trader_gas_setting_custom'),
@@ -156,8 +147,10 @@ export const GasPrior1559Settings = memo<GasPrior1559SettingsProps>(
             [gasOptions, customGasPrice],
         )
 
-        const { value: nativeToken } = useNativeTokenDetailed()
-        const nativeTokenPrice = useNativeTokenPrice(nativeToken?.chainId)
+        const { value: nativeToken } = useFungibleToken(NetworkPluginID.PLUGIN_EVM)
+        const { value: nativeTokenPrice = 0 } = useNativeTokenPrice(NetworkPluginID.PLUGIN_EVM, {
+            chainId: nativeToken?.chainId,
+        })
 
         // #region Confirm function
         const handleConfirm = useCallback(() => {
diff --git a/packages/mask/src/plugins/Trader/SNSAdaptor/trader/InputTokenPanel.tsx b/packages/mask/src/plugins/Trader/SNSAdaptor/trader/InputTokenPanel.tsx
index fd6b8c40844c..f3ef7febef83 100644
--- a/packages/mask/src/plugins/Trader/SNSAdaptor/trader/InputTokenPanel.tsx
+++ b/packages/mask/src/plugins/Trader/SNSAdaptor/trader/InputTokenPanel.tsx
@@ -1,13 +1,14 @@
 import { ChangeEvent, memo, useCallback, useMemo } from 'react'
 import { useI18N } from '../../../../utils'
-import { FungibleTokenDetailed, isZeroAddress, formatBalance, formatCurrency } from '@masknet/web3-shared-evm'
+import { isZeroAddress, SchemaType } from '@masknet/web3-shared-evm'
 import { Box, Chip, chipClasses, TextField, Typography } from '@mui/material'
 import { FormattedBalance, SelectTokenChip, SelectTokenChipProps, FormattedCurrency } from '@masknet/shared'
 import { makeStyles, MaskColorVar } from '@masknet/theme'
-import { useTokenPrice } from '../../../Wallet/hooks/useTokenPrice'
 import type { ChainId } from '@masknet/web3-shared-evm'
 import BigNumber from 'bignumber.js'
 import { isDashboardPage } from '@masknet/shared-base'
+import { useFungibleTokenPrice } from '@masknet/plugin-infra/web3'
+import { FungibleToken, NetworkPluginID, formatBalance, formatCurrency } from '@masknet/web3-shared-base'
 
 const useStyles = makeStyles<{ isDashboard: boolean }>()((theme, { isDashboard }) => ({
     filledInput: {
@@ -86,7 +87,7 @@ export interface InputTokenPanelProps extends withClasses<'root'> {
     amount: string
     chainId: ChainId
 
-    token?: FungibleTokenDetailed | null
+    token?: FungibleToken<ChainId, SchemaType> | null
     onAmountChange: (amount: string) => void
     SelectTokenChip?: Partial<SelectTokenChipProps>
 }
@@ -115,9 +116,10 @@ export const InputTokenPanel = memo<InputTokenPanelProps>(
             [onAmountChange, RE_MATCH_FRACTION_AMOUNT, RE_MATCH_WHOLE_AMOUNT],
         )
 
-        const tokenPrice = useTokenPrice(
-            chainId,
+        const { value: tokenPrice = 0 } = useFungibleTokenPrice(
+            NetworkPluginID.PLUGIN_EVM,
             !isZeroAddress(token?.address) ? token?.address.toLowerCase() : undefined,
+            { chainId },
         )
 
         const tokenValueUSD = useMemo(
diff --git a/packages/mask/src/plugins/Trader/SNSAdaptor/trader/SettingsDialog.tsx b/packages/mask/src/plugins/Trader/SNSAdaptor/trader/SettingsDialog.tsx
index 95d5176f9000..93e465149962 100644
--- a/packages/mask/src/plugins/Trader/SNSAdaptor/trader/SettingsDialog.tsx
+++ b/packages/mask/src/plugins/Trader/SNSAdaptor/trader/SettingsDialog.tsx
@@ -10,8 +10,10 @@ import { PluginTraderMessages } from '../../messages'
 import { ExpandMore } from '@mui/icons-material'
 import { Gas1559Settings } from './Gas1559Settings'
 import { GasPrior1559Settings } from './GasPrior1559Settings'
-import { GasOptionConfig, isEIP1559Supported, useChainId } from '@masknet/web3-shared-evm'
+import { chainResolver, GasOptionConfig } from '@masknet/web3-shared-evm'
 import { InfoIcon } from '@masknet/icons'
+import { NetworkPluginID } from '@masknet/web3-shared-base'
+import { useChainId } from '@masknet/plugin-infra/web3'
 
 const useStyles = makeStyles()((theme) => {
     return {
@@ -62,7 +64,7 @@ export function SettingsDialog(props: SettingsDialogProps) {
     const classes = useStylesExtends(useStyles(), props)
 
     const slippage = useValueRef(currentSlippageSettings)
-    const chainId = useChainId()
+    const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
 
     const [gasConfig, setGasConfig] = useState<GasOptionConfig>()
     const [unconfirmedSlippage, setUnconfirmedSlippage] = useState(slippage)
@@ -115,7 +117,7 @@ export function SettingsDialog(props: SettingsDialogProps) {
                         </Alert>
                     ) : null}
                 </Accordion>
-                {isEIP1559Supported(chainId) ? (
+                {chainResolver.isSupport(chainId, 'EIP1559') ? (
                     <Gas1559Settings
                         onCancel={closeDialog}
                         onSave={onSubmit}
diff --git a/packages/mask/src/plugins/Trader/SNSAdaptor/trader/TradeForm.tsx b/packages/mask/src/plugins/Trader/SNSAdaptor/trader/TradeForm.tsx
index a1ab6a7b79e5..6a6bea4157c8 100644
--- a/packages/mask/src/plugins/Trader/SNSAdaptor/trader/TradeForm.tsx
+++ b/packages/mask/src/plugins/Trader/SNSAdaptor/trader/TradeForm.tsx
@@ -4,9 +4,15 @@ import { makeStyles, MaskColorVar } from '@masknet/theme'
 import { InputTokenPanel } from './InputTokenPanel'
 import { Box, chipClasses, Collapse, IconButton, Tooltip, Typography } from '@mui/material'
 import { useRemoteControlledDialog } from '@masknet/shared-base-ui'
-import type { FungibleTokenDetailed, Wallet } from '@masknet/web3-shared-evm'
-import { EthereumTokenType, formatBalance, formatPercentage } from '@masknet/web3-shared-evm'
-import { isLessThan, rightShift } from '@masknet/web3-shared-base'
+import { ChainId, formatPercentage, SchemaType } from '@masknet/web3-shared-evm'
+import {
+    FungibleToken,
+    isLessThan,
+    formatBalance,
+    NetworkPluginID,
+    rightShift,
+    Wallet,
+} from '@masknet/web3-shared-base'
 import { TokenPanelType, TradeInfo } from '../../types'
 import BigNumber from 'bignumber.js'
 import { first, noop } from 'lodash-unified'
@@ -24,7 +30,7 @@ import { EthereumERC20TokenApprovedBoundary } from '../../../../web3/UI/Ethereum
 import ActionButton from '../../../../extension/options-page/DashboardComponents/ActionButton'
 import { useTradeApproveComputed } from '../../trader/useTradeApproveComputed'
 import { HelpOutline, ArrowDownward } from '@mui/icons-material'
-import { EthereumChainBoundary } from '../../../../web3/UI/EthereumChainBoundary'
+import { ChainBoundary } from '../../../../web3/UI/ChainBoundary'
 import { useUpdateEffect } from 'react-use'
 import { TargetChainIdContext } from '../../trader/useTargetChainIdContext'
 import { isDashboardPage, isPopupPage } from '@masknet/shared-base'
@@ -174,10 +180,10 @@ const useStyles = makeStyles<{ isDashboard: boolean; isPopup: boolean }>()((them
 })
 
 export interface AllTradeFormProps {
-    wallet?: Wallet
+    wallet?: Wallet | null
     inputAmount: string
-    inputToken?: FungibleTokenDetailed
-    outputToken?: FungibleTokenDetailed
+    inputToken?: FungibleToken<ChainId, SchemaType>
+    outputToken?: FungibleToken<ChainId, SchemaType>
     inputTokenBalance?: string
     outputTokenBalance?: string
     onInputAmountChange: (amount: string) => void
@@ -452,10 +458,10 @@ export const TradeForm = memo<AllTradeFormProps>(
                     </Box>
                     {wallet ? (
                         <Box className={classes.section}>
-                            <EthereumChainBoundary
-                                chainId={chainId}
+                            <ChainBoundary
+                                expectedPluginID={NetworkPluginID.PLUGIN_EVM}
+                                expectedChainId={chainId}
                                 noSwitchNetworkTip
-                                disablePadding
                                 className={classes.chainBoundary}
                                 ActionButtonPromiseProps={{
                                     fullWidth: true,
@@ -467,7 +473,7 @@ export const TradeForm = memo<AllTradeFormProps>(
                                     amount={approveAmount.toFixed()}
                                     token={
                                         !isNativeTokenWrapper(focusedTrade?.value ?? null) &&
-                                        approveToken?.type === EthereumTokenType.ERC20 &&
+                                        approveToken?.schema === SchemaType.ERC20 &&
                                         !!approveAmount.toNumber()
                                             ? approveToken
                                             : undefined
@@ -545,7 +551,7 @@ export const TradeForm = memo<AllTradeFormProps>(
                                         )
                                     }
                                 />
-                            </EthereumChainBoundary>
+                            </ChainBoundary>
                         </Box>
                     ) : null}
                 </Box>
diff --git a/packages/mask/src/plugins/Trader/SNSAdaptor/trader/TradeView.tsx b/packages/mask/src/plugins/Trader/SNSAdaptor/trader/TradeView.tsx
index 00fd1223f3cb..423e46ddb54c 100644
--- a/packages/mask/src/plugins/Trader/SNSAdaptor/trader/TradeView.tsx
+++ b/packages/mask/src/plugins/Trader/SNSAdaptor/trader/TradeView.tsx
@@ -2,6 +2,7 @@ import { makeStyles, useStylesExtends } from '@masknet/theme'
 import { Trader, TraderProps } from './Trader'
 import { AllProviderTradeContext } from '../../trader/useAllProviderTradeContext'
 import { useChainId } from '@masknet/plugin-infra/web3'
+import { NetworkPluginID } from '@masknet/web3-shared-base'
 
 const useStyles = makeStyles()((theme) => {
     return {
@@ -31,7 +32,7 @@ export interface TradeViewProps extends withClasses<'root'> {
 
 export function TradeView(props: TradeViewProps) {
     const { TraderProps } = props
-    const chainId = useChainId()
+    const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
     const classes = useStylesExtends(useStyles(), props)
     return (
         <div className={classes.root}>
diff --git a/packages/mask/src/plugins/Trader/SNSAdaptor/trader/Trader.tsx b/packages/mask/src/plugins/Trader/SNSAdaptor/trader/Trader.tsx
index 656592bc4d28..574feb7e7a32 100644
--- a/packages/mask/src/plugins/Trader/SNSAdaptor/trader/Trader.tsx
+++ b/packages/mask/src/plugins/Trader/SNSAdaptor/trader/Trader.tsx
@@ -1,19 +1,13 @@
 import { delay } from '@dimensiondev/kit'
 import { useOpenShareTxDialog, usePickToken } from '@masknet/shared'
 import { makeStyles, useStylesExtends } from '@masknet/theme'
+import { NetworkPluginID, isSameAddress, FungibleToken, formatBalance } from '@masknet/web3-shared-base'
 import {
     ChainId,
     createERC20Token,
     createNativeToken,
-    EthereumTokenType,
-    formatBalance,
-    FungibleTokenDetailed,
-    isSameAddress,
-    useChainId,
-    useChainIdValid,
-    useFungibleTokenBalance,
+    SchemaType,
     useTokenConstants,
-    useWallet,
     UST,
 } from '@masknet/web3-shared-evm'
 import { useCallback, useEffect, useMemo, useState } from 'react'
@@ -34,6 +28,7 @@ import { ConfirmDialog } from './ConfirmDialog'
 import { useGasConfig } from './hooks/useGasConfig'
 import { useSortedTrades } from './hooks/useSortedTrades'
 import { useUpdateBalance } from './hooks/useUpdateBalance'
+import { useChainId, useChainIdValid, useFungibleTokenBalance, useWallet } from '@masknet/plugin-infra/web3'
 import { SettingsDialog } from './SettingsDialog'
 import { TradeForm } from './TradeForm'
 
@@ -49,21 +44,21 @@ export interface TraderProps extends withClasses<'root'> {
     coin?: Coin
     defaultInputCoin?: Coin
     defaultOutputCoin?: Coin
-    tokenDetailed?: FungibleTokenDetailed
+    tokenDetailed?: FungibleToken<ChainId, SchemaType>
     chainId?: ChainId
 }
 
 export function Trader(props: TraderProps) {
     const { defaultOutputCoin, coin, chainId: targetChainId, defaultInputCoin } = props
     const [focusedTrade, setFocusTrade] = useState<TradeInfo>()
-    const wallet = useWallet()
-    const currentChainId = useChainId()
+    const wallet = useWallet(NetworkPluginID.PLUGIN_EVM)
+    const currentChainId = useChainId(NetworkPluginID.PLUGIN_EVM)
     const chainId = targetChainId ?? currentChainId
-    const chainIdValid = useChainIdValid()
+    const chainIdValid = useChainIdValid(NetworkPluginID.PLUGIN_EVM)
     const { NATIVE_TOKEN_ADDRESS } = useTokenConstants()
     const classes = useStylesExtends(useStyles(), props)
-    const { t: tr } = useBaseI18N()
     const t = useI18N()
+    const { t: tr } = useBaseI18N()
     const { setTargetChainId } = TargetChainIdContext.useContainer()
 
     // #region trade state
@@ -101,7 +96,7 @@ export function Trader(props: TraderProps) {
             if (!coin?.contract_address) return
             dispatchTradeStore({
                 type,
-                token: createERC20Token(chainId, coin.contract_address, coin.decimals, coin.name, coin.symbol),
+                token: createERC20Token(chainId, coin.contract_address, coin.name, coin.symbol, coin.decimals),
             })
         },
         [chainId],
@@ -120,7 +115,7 @@ export function Trader(props: TraderProps) {
         // if coin be native token and input token also be native token, reset it
         if (
             isSameAddress(coin.contract_address, NATIVE_TOKEN_ADDRESS) &&
-            inputToken?.type === EthereumTokenType.Native &&
+            inputToken?.schema === SchemaType.Native &&
             coin.symbol === inputToken.symbol
         ) {
             dispatchTradeStore({
@@ -141,9 +136,9 @@ export function Trader(props: TraderProps) {
                 ? createERC20Token(
                       chainId,
                       defaultInputCoin.contract_address,
-                      defaultInputCoin.decimals,
                       defaultInputCoin.name,
                       defaultInputCoin.symbol,
+                      defaultInputCoin.decimals,
                   )
                 : undefined,
         })
@@ -158,28 +153,19 @@ export function Trader(props: TraderProps) {
 
     // #region update balance
     const { value: inputTokenBalance_, loading: loadingInputTokenBalance } = useFungibleTokenBalance(
-        isSameAddress(inputToken?.address, NATIVE_TOKEN_ADDRESS)
-            ? EthereumTokenType.Native
-            : inputToken?.type ?? EthereumTokenType.Native,
+        NetworkPluginID.PLUGIN_EVM,
         inputToken?.address ?? '',
-        chainId,
+        { chainId },
     )
 
     const { value: outputTokenBalance_, loading: loadingOutputTokenBalance } = useFungibleTokenBalance(
-        isSameAddress(outputToken?.address, NATIVE_TOKEN_ADDRESS)
-            ? EthereumTokenType.Native
-            : outputToken?.type ?? EthereumTokenType.Native,
+        NetworkPluginID.PLUGIN_EVM,
         outputToken?.address ?? '',
-        chainId,
+        { chainId },
     )
 
     useEffect(() => {
-        if (
-            !inputToken ||
-            inputToken.type === EthereumTokenType.Native ||
-            !inputTokenBalance_ ||
-            loadingInputTokenBalance
-        ) {
+        if (!inputToken || inputToken.schema === SchemaType.Native || !inputTokenBalance_ || loadingInputTokenBalance) {
             return
         }
         dispatchTradeStore({
@@ -191,7 +177,7 @@ export function Trader(props: TraderProps) {
     useEffect(() => {
         if (
             !outputToken ||
-            outputToken.type === EthereumTokenType.Native ||
+            outputToken.schema === SchemaType.Native ||
             !outputTokenBalance_ ||
             loadingOutputTokenBalance
         ) {
diff --git a/packages/mask/src/plugins/Trader/SNSAdaptor/trader/TraderDialog.tsx b/packages/mask/src/plugins/Trader/SNSAdaptor/trader/TraderDialog.tsx
index e5417e20234d..742b53064c3f 100644
--- a/packages/mask/src/plugins/Trader/SNSAdaptor/trader/TraderDialog.tsx
+++ b/packages/mask/src/plugins/Trader/SNSAdaptor/trader/TraderDialog.tsx
@@ -1,8 +1,8 @@
 import { useEffect, useState } from 'react'
 import { PluginId } from '@masknet/plugin-infra'
 import { useActivatedPlugin } from '@masknet/plugin-infra/dom'
-import { useCurrentWeb3NetworkPluginID } from '@masknet/plugin-infra/web3'
-import { ChainId, useChainId, useChainIdValid } from '@masknet/web3-shared-evm'
+import { useChainId, useChainIdValid, useCurrentWeb3NetworkPluginID } from '@masknet/plugin-infra/web3'
+import type { ChainId } from '@masknet/web3-shared-evm'
 import { DialogContent } from '@mui/material'
 import { useRemoteControlledDialog } from '@masknet/shared-base-ui'
 import { InjectedDialog } from '@masknet/shared'
@@ -16,6 +16,7 @@ import { WalletStatusBox } from '../../../../components/shared/WalletStatusBox'
 import { NetworkTab } from '../../../../components/shared/NetworkTab'
 import { useUpdateEffect } from 'react-use'
 import { isDashboardPage } from '@masknet/shared-base'
+import { NetworkPluginID } from '@masknet/web3-shared-base'
 
 const useStyles = makeStyles()((theme) => ({
     walletStatusBox: {
@@ -71,8 +72,8 @@ export function TraderDialog({ open, onClose }: TraderDialogProps) {
     const chainIdList = traderDefinition?.enableRequirement.web3?.[pluginID]?.supportedChainIds ?? []
     const { t } = useI18N()
     const { classes } = useStyles()
-    const currentChainId = useChainId()
-    const chainIdValid = useChainIdValid()
+    const currentChainId = useChainId(NetworkPluginID.PLUGIN_EVM)
+    const chainIdValid = useChainIdValid(NetworkPluginID.PLUGIN_EVM)
     const [traderProps, setTraderProps] = useState<TraderProps>()
     const [chainId, setChainId] = useState<ChainId>(currentChainId)
 
diff --git a/packages/mask/src/plugins/Trader/SNSAdaptor/trader/TraderInfo.tsx b/packages/mask/src/plugins/Trader/SNSAdaptor/trader/TraderInfo.tsx
index 475a1a910c56..d622be66df93 100644
--- a/packages/mask/src/plugins/Trader/SNSAdaptor/trader/TraderInfo.tsx
+++ b/packages/mask/src/plugins/Trader/SNSAdaptor/trader/TraderInfo.tsx
@@ -1,27 +1,21 @@
 import { memo, useMemo } from 'react'
 import type { TradeInfo } from '../../types'
 import { makeStyles, MaskColorVar } from '@masknet/theme'
-import {
-    createNativeToken,
-    formatBalance,
-    formatPercentage,
-    formatUSD,
-    formatWeiToEther,
-} from '@masknet/web3-shared-evm'
+import { createNativeToken, formatPercentage, formatUSD, formatWeiToEther } from '@masknet/web3-shared-evm'
 import { Box, CircularProgress, TextField, Typography } from '@mui/material'
 import { resolveTradeProviderName } from '../../pipes'
 import { FormattedBalance } from '@masknet/shared'
 import { isDashboardPage } from '@masknet/shared-base'
-import { multipliedBy } from '@masknet/web3-shared-base'
+import { multipliedBy, NetworkPluginID, formatBalance } from '@masknet/web3-shared-base'
 import { useI18N } from '../../../../utils'
 import classnames from 'classnames'
 import { BestTradeIcon, TriangleWarning } from '@masknet/icons'
 import { useAsyncRetry } from 'react-use'
 import { PluginTraderRPC } from '../../messages'
 import { TradeProvider } from '@masknet/public-api'
-import { useNativeTokenPrice } from '../../../Wallet/hooks/useTokenPrice'
 import { TargetChainIdContext } from '../../trader/useTargetChainIdContext'
 import { useGreatThanSlippageSetting } from './hooks/useGreatThanSlippageSetting'
+import { useNativeTokenPrice } from '@masknet/plugin-infra/web3'
 
 const useStyles = makeStyles<{ isDashboard: boolean }>()((theme, { isDashboard }) => ({
     trade: {
@@ -105,7 +99,7 @@ export const TraderInfo = memo<TraderInfoProps>(({ trade, gasPrice, isBest, onCl
     // #endregion
 
     const nativeToken = createNativeToken(targetChainId)
-    const tokenPrice = useNativeTokenPrice(targetChainId)
+    const { value: tokenPrice = 0 } = useNativeTokenPrice(NetworkPluginID.PLUGIN_EVM, { chainId: targetChainId })
 
     const gasFee = useMemo(() => {
         return trade.gas.value && gasPrice ? multipliedBy(gasPrice, trade.gas.value).integerValue().toFixed() : 0
diff --git a/packages/mask/src/plugins/Trader/SNSAdaptor/trader/hooks/useGasConfig.ts b/packages/mask/src/plugins/Trader/SNSAdaptor/trader/hooks/useGasConfig.ts
index 364405756024..b29116c95897 100644
--- a/packages/mask/src/plugins/Trader/SNSAdaptor/trader/hooks/useGasConfig.ts
+++ b/packages/mask/src/plugins/Trader/SNSAdaptor/trader/hooks/useGasConfig.ts
@@ -1,42 +1,32 @@
 import { useState } from 'react'
 import { useAsync } from 'react-use'
-import BigNumber from 'bignumber.js'
-import type { ChainId, GasOptionConfig } from '@masknet/web3-shared-evm'
-import { formatGweiToWei, isEIP1559Supported } from '@masknet/web3-shared-evm'
-import { WalletRPC } from '../../../../Wallet/messages'
+import { GasOptionConfig, formatGweiToWei, ChainId } from '@masknet/web3-shared-evm'
+import { useGasOptions } from '@masknet/plugin-infra/web3'
+import { GasOptionType, NetworkPluginID } from '@masknet/web3-shared-base'
 
+// TODO: support multiple chain
 export function useGasConfig(chainId: ChainId) {
     const [gasConfig, setGasConfig] = useState<GasOptionConfig | undefined>()
+    const { value: gasOptions_ } = useGasOptions(NetworkPluginID.PLUGIN_EVM)
     const { value: gasPrice } = useAsync(async () => {
         try {
-            if (isEIP1559Supported(chainId)) {
-                const response = await WalletRPC.getEstimateGasFees(chainId)
-                const maxFeePerGas = formatGweiToWei(response?.medium?.suggestedMaxFeePerGas ?? 0).toFixed(0)
-                const maxPriorityFeePerGas = formatGweiToWei(
-                    response?.medium?.suggestedMaxPriorityFeePerGas ?? 0,
-                ).toFixed(0)
-                setGasConfig({
-                    maxFeePerGas,
-                    maxPriorityFeePerGas,
-                })
+            const maxFeePerGas = formatGweiToWei(
+                gasOptions_?.[GasOptionType.NORMAL]?.suggestedMaxFeePerGas ?? 0,
+            ).toFixed(0)
+            const maxPriorityFeePerGas = formatGweiToWei(
+                gasOptions_?.[GasOptionType.NORMAL]?.suggestedMaxPriorityFeePerGas ?? 0,
+            ).toFixed(0)
 
-                return maxFeePerGas
-            } else {
-                const response = await WalletRPC.getGasPriceDictFromDeBank(chainId)
-                const gasPrice = response?.data.normal.price
-                    ? new BigNumber(response.data.normal.price).toString()
-                    : undefined
-                setGasConfig({
-                    gasPrice,
-                })
-
-                return gasPrice
-            }
+            setGasConfig({
+                maxFeePerGas,
+                maxPriorityFeePerGas,
+            })
+            return maxFeePerGas
         } catch (err) {
             setGasConfig(undefined)
             return
         }
-    }, [chainId])
+    }, [chainId, gasOptions_])
 
     return { gasPrice, gasConfig, setGasConfig }
 }
diff --git a/packages/mask/src/plugins/Trader/SNSAdaptor/trader/hooks/useSortedTrades.ts b/packages/mask/src/plugins/Trader/SNSAdaptor/trader/hooks/useSortedTrades.ts
index 7c9de8b7597e..23683b3a4470 100644
--- a/packages/mask/src/plugins/Trader/SNSAdaptor/trader/hooks/useSortedTrades.ts
+++ b/packages/mask/src/plugins/Trader/SNSAdaptor/trader/hooks/useSortedTrades.ts
@@ -1,21 +1,27 @@
 import type { TradeInfo } from '../../../types'
 import { useMemo } from 'react'
-import { isGreaterThan, isLessThan, multipliedBy } from '@masknet/web3-shared-base'
+import { isGreaterThan, isLessThan, multipliedBy, NetworkPluginID, formatBalance } from '@masknet/web3-shared-base'
 import { MINIMUM_AMOUNT } from '../../../constants'
 import BigNumber from 'bignumber.js'
-import { useNativeTokenPrice, useTokenPrice } from '../../../../Wallet/hooks/useTokenPrice'
-import { ChainId, EthereumTokenType, formatBalance, useNativeTokenDetailed } from '@masknet/web3-shared-evm'
+import { ChainId, SchemaType } from '@masknet/web3-shared-evm'
 import { AllProviderTradeContext } from '../../../trader/useAllProviderTradeContext'
+import { useFungibleToken, useFungibleTokenPrice, useNativeTokenPrice } from '@masknet/plugin-infra/web3'
 
 export function useSortedTrades(traders: TradeInfo[], chainId: ChainId, gasPrice?: string) {
-    const { value: nativeToken } = useNativeTokenDetailed(chainId)
-    const nativeTokenPrice = useNativeTokenPrice(chainId)
+    const { value: nativeToken } = useFungibleToken(NetworkPluginID.PLUGIN_EVM, '', { chainId })
+    const { value: nativeTokenPrice = 0 } = useNativeTokenPrice(NetworkPluginID.PLUGIN_EVM, { chainId })
 
     const {
         tradeState: [{ outputToken }],
     } = AllProviderTradeContext.useContainer()
 
-    const outputTokenPrice = useTokenPrice(chainId, outputToken?.address.toLowerCase())
+    const { value: outputTokenPrice = 0 } = useFungibleTokenPrice(
+        NetworkPluginID.PLUGIN_EVM,
+        outputToken?.address.toLowerCase(),
+        {
+            chainId,
+        },
+    )
 
     return useMemo(() => {
         if (outputToken && nativeToken && (outputTokenPrice || nativeTokenPrice)) {
@@ -36,7 +42,7 @@ export function useSortedTrades(traders: TradeInfo[], chainId: ChainId, gasPrice
                         const finalPrice = new BigNumber(
                             formatBalance(trade.value.outputAmount, outputToken.decimals, 2),
                         )
-                            .times(outputToken.type !== EthereumTokenType.Native ? outputTokenPrice : nativeTokenPrice)
+                            .times(outputToken.schema !== SchemaType.Native ? outputTokenPrice : nativeTokenPrice)
                             .minus(gasFeeUSD)
 
                         return {
diff --git a/packages/mask/src/plugins/Trader/SNSAdaptor/trader/hooks/useUpdateBalance.ts b/packages/mask/src/plugins/Trader/SNSAdaptor/trader/hooks/useUpdateBalance.ts
index b3eda92e983b..cd67adff90f9 100644
--- a/packages/mask/src/plugins/Trader/SNSAdaptor/trader/hooks/useUpdateBalance.ts
+++ b/packages/mask/src/plugins/Trader/SNSAdaptor/trader/hooks/useUpdateBalance.ts
@@ -1,22 +1,19 @@
-import {
-    ChainId,
-    EthereumTokenType,
-    isSameAddress,
-    useAccount,
-    useBalance,
-    useTokenConstants,
-} from '@masknet/web3-shared-evm'
 import { useEffect } from 'react'
+import { useAccount, useBalance } from '@masknet/plugin-infra/web3'
+import { NetworkPluginID, isSameAddress } from '@masknet/web3-shared-base'
+import { ChainId, SchemaType, useTokenConstants } from '@masknet/web3-shared-evm'
 import { AllProviderTradeActionType, AllProviderTradeContext } from '../../../trader/useAllProviderTradeContext'
 
 export function useUpdateBalance(chainId: ChainId) {
-    const currentAccount = useAccount()
+    const currentAccount = useAccount(NetworkPluginID.PLUGIN_EVM)
     const { NATIVE_TOKEN_ADDRESS } = useTokenConstants()
 
     const {
         tradeState: [{ inputToken, outputToken }, dispatchTradeStore],
     } = AllProviderTradeContext.useContainer()
-    const balance = useBalance(chainId)
+    const balance = useBalance(NetworkPluginID.PLUGIN_EVM, {
+        chainId,
+    })
 
     useEffect(() => {
         if (currentAccount) return
@@ -34,7 +31,7 @@ export function useUpdateBalance(chainId: ChainId) {
 
     useEffect(() => {
         if (!currentAccount) return
-        const value = inputToken?.type === EthereumTokenType.Native ? balance.value : '0'
+        const value = inputToken?.schema === SchemaType.Native ? balance.value : '0'
         dispatchTradeStore({
             type: AllProviderTradeActionType.UPDATE_INPUT_TOKEN_BALANCE,
             balance: value || '0',
@@ -44,7 +41,7 @@ export function useUpdateBalance(chainId: ChainId) {
     useEffect(() => {
         if (!currentAccount) return
         const value =
-            outputToken?.type === EthereumTokenType.Native || isSameAddress(outputToken?.address, NATIVE_TOKEN_ADDRESS)
+            outputToken?.schema === SchemaType.Native || isSameAddress(outputToken?.address, NATIVE_TOKEN_ADDRESS)
                 ? balance.value
                 : '0'
         dispatchTradeStore({
diff --git a/packages/mask/src/plugins/Trader/SNSAdaptor/trending/CoinMarketTable.tsx b/packages/mask/src/plugins/Trader/SNSAdaptor/trending/CoinMarketTable.tsx
index e8fcd6eb8f7f..176970e71701 100644
--- a/packages/mask/src/plugins/Trader/SNSAdaptor/trending/CoinMarketTable.tsx
+++ b/packages/mask/src/plugins/Trader/SNSAdaptor/trending/CoinMarketTable.tsx
@@ -2,7 +2,7 @@ import { Paper, Table, TableBody, TableCell, TableContainer, TableHead, TableRow
 import { makeStyles } from '@masknet/theme'
 import { DataProvider } from '@masknet/public-api'
 import { FormattedCurrency } from '@masknet/shared'
-import { formatCurrency } from '@masknet/web3-shared-evm'
+import { formatCurrency } from '@masknet/web3-shared-base'
 import type { Trending } from '../../types'
 import { useI18N } from '../../../../utils'
 
diff --git a/packages/mask/src/plugins/Trader/SNSAdaptor/trending/CoinSafetyAlert.tsx b/packages/mask/src/plugins/Trader/SNSAdaptor/trending/CoinSafetyAlert.tsx
index 0ce86571d685..3bed24f706e2 100644
--- a/packages/mask/src/plugins/Trader/SNSAdaptor/trending/CoinSafetyAlert.tsx
+++ b/packages/mask/src/plugins/Trader/SNSAdaptor/trending/CoinSafetyAlert.tsx
@@ -3,7 +3,7 @@ import { makeStyles } from '@masknet/theme'
 import { useI18N } from '../../../../utils'
 import type { Coin } from '../../types'
 import { useApprovedTokens } from '../../trending/useApprovedTokens'
-import { resolveTokenLinkOnExplorer, ChainId, EthereumTokenType } from '@masknet/web3-shared-evm'
+import { ChainId, explorerResolver } from '@masknet/web3-shared-evm'
 
 const useStyles = makeStyles()((theme) => {
     return {
@@ -46,11 +46,7 @@ export function CoinSafetyAlert(props: CoinSafetyAlertProps) {
                         color="primary"
                         target="_blank"
                         rel="noopener noreferrer"
-                        href={resolveTokenLinkOnExplorer({
-                            type: EthereumTokenType.Native,
-                            address: coin.contract_address,
-                            chainId: ChainId.Mainnet,
-                        })}>
+                        href={explorerResolver.fungibleTokenLink(ChainId.Mainnet, coin.contract_address)}>
                         {t('plugin_trader_view_on_etherscan')}
                     </Link>
                     <Button variant="contained" className={classes.approve} onClick={onApprove}>
diff --git a/packages/mask/src/plugins/Trader/SNSAdaptor/trending/LBPPanel.tsx b/packages/mask/src/plugins/Trader/SNSAdaptor/trending/LBPPanel.tsx
deleted file mode 100644
index e235b4997d9a..000000000000
--- a/packages/mask/src/plugins/Trader/SNSAdaptor/trending/LBPPanel.tsx
+++ /dev/null
@@ -1,142 +0,0 @@
-import type { ERC20TokenDetailed } from '@masknet/web3-shared-evm'
-import { formatEthereumAddress, useTokenConstants } from '@masknet/web3-shared-evm'
-import { Button, CircularProgress, IconButton, Link, Typography } from '@mui/material'
-import { makeStyles, useStylesExtends } from '@masknet/theme'
-import RefreshIcon from '@mui/icons-material/Refresh'
-import { useI18N } from '../../../../utils'
-import { usePools } from '../../LBP/usePools'
-import { usePoolTokenPrices } from '../../LBP/usePoolTokenPrices'
-import type { Currency } from '../../types'
-import { LBPPriceChart } from './LBPPriceChart'
-
-const useStyles = makeStyles()((theme) => ({
-    root: {
-        paddingBottom: theme.spacing(2),
-    },
-    chart: {
-        position: 'relative',
-    },
-    introduce: {
-        fontSize: 14,
-        margin: theme.spacing(1, 0),
-        padding: theme.spacing(0, 2.5),
-    },
-    placeholder: {
-        color: theme.palette.text.secondary,
-        padding: theme.spacing(2, 2, 0),
-        textAlign: 'center',
-    },
-    connect: {
-        padding: theme.spacing(0, 2.5),
-        display: 'flex',
-        justifyContent: 'flex-end',
-        '& > div': {
-            width: 'auto',
-        },
-    },
-    progress: {
-        zIndex: 1,
-        bottom: theme.spacing(1),
-        right: theme.spacing(1),
-        position: 'absolute',
-    },
-    retry: {
-        zIndex: 1,
-        bottom: theme.spacing(1),
-        right: theme.spacing(1),
-        position: 'absolute',
-    },
-}))
-
-export interface LBPPanelProps extends withClasses<never> {
-    duration: number
-    token: ERC20TokenDetailed
-    currency: Currency
-}
-
-export function LBPPanel(props: LBPPanelProps) {
-    const { token, duration } = props
-    const { t } = useI18N()
-    const classes = useStylesExtends(useStyles(), props)
-
-    const { USDC_ADDRESS } = useTokenConstants()
-    const { value: pools = [], loading: poolsLoading, error: poolsError } = usePools(token.address)
-    const {
-        value: prices = [],
-        loading: pricesLoading,
-        error: pricesError,
-        retry: pricesRetry,
-    } = usePoolTokenPrices(token.address, duration, 100)
-
-    if (!pools.length)
-        return (
-            <div className={classes.root}>
-                <div className={classes.chart}>
-                    <Typography className={classes.placeholder}>{t('plugin_trader_no_pools_found')}</Typography>
-                </div>
-            </div>
-        )
-
-    return (
-        <div className={classes.root}>
-            <div className={classes.chart}>
-                {pricesLoading || poolsLoading ? (
-                    <CircularProgress className={classes.progress} color="primary" size={15} />
-                ) : pricesError || poolsError ? (
-                    <IconButton
-                        className={classes.retry}
-                        size="small"
-                        onClick={() => {
-                            pricesRetry()
-                        }}>
-                        <RefreshIcon />
-                    </IconButton>
-                ) : null}
-                <LBPPriceChart
-                    data={
-                        pricesLoading || poolsLoading
-                            ? []
-                            : prices.map((x) => ({
-                                  date: new Date(x.timestamp * 1000),
-                                  value: x.price,
-                              }))
-                    }
-                    currency={props.currency}
-                />
-            </div>
-            <Typography className={classes.introduce}>
-                {t('plugin_trader_lbp_intro', { symbol: token.symbol ?? 'Tokens' })}
-            </Typography>
-            <Typography className={classes.introduce}>
-                <Link href="https://link.medium.com/0kfZVzGx8db" target="_blank" rel="noopener noreferrer">
-                    {t('plugin_trader_what_is_lbp')}
-                </Link>
-                ,{' '}
-                <Link
-                    href="https://news.mask.io/2021/02/24/mask-lbp-tutorial"
-                    target="_blank"
-                    rel="noopener noreferrer">
-                    {t('plugin_trader_tutorial')}
-                </Link>{' '}
-                and{' '}
-                <Link
-                    href={`https://pools.balancer.exchange/#/pool/${pools[0].id}/`}
-                    target="_blank"
-                    rel="noopener noreferrer">
-                    {token.symbol} {t('plugin_trader_lbp_pool_in_balancer')}
-                </Link>
-                .
-            </Typography>
-            <div className={classes.connect}>
-                <Button
-                    color="primary"
-                    variant="contained"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    href={`https://balancer.exchange/#/swap/${formatEthereumAddress(token.address)}/${USDC_ADDRESS}`}>
-                    {t('plugin_trader_buy')}
-                </Button>
-            </div>
-        </div>
-    )
-}
diff --git a/packages/mask/src/plugins/Trader/SNSAdaptor/trending/LBPPriceChart.tsx b/packages/mask/src/plugins/Trader/SNSAdaptor/trending/LBPPriceChart.tsx
deleted file mode 100644
index baae9010c044..000000000000
--- a/packages/mask/src/plugins/Trader/SNSAdaptor/trending/LBPPriceChart.tsx
+++ /dev/null
@@ -1,70 +0,0 @@
-import { useEffect, useRef, useState } from 'react'
-import { useWindowSize } from 'react-use'
-import { makeStyles, useStylesExtends } from '@masknet/theme'
-import { useDimension, Dimension } from '../../../hooks/useDimension'
-import { usePriceLineChart } from '../../../hooks/usePriceLineChart'
-import type { Currency } from '../../types'
-
-const DEFAULT_DIMENSION: Dimension = {
-    top: 32,
-    right: 16,
-    bottom: 32,
-    left: 16,
-    width: 598,
-    height: 269,
-}
-
-export interface PriceChartProps extends withClasses<'root'> {
-    data: Array<{ date: Date; value: number }>
-    width?: number
-    height?: number
-    currency: Currency
-}
-
-const useStyles = makeStyles()({
-    root: {
-        position: 'relative',
-    },
-    svg: {
-        display: 'block',
-    },
-})
-
-export function LBPPriceChart(props: PriceChartProps) {
-    const { data } = props
-    const classes = useStylesExtends(useStyles(), props)
-    const rootRef = useRef<HTMLDivElement>(null)
-    const svgRef = useRef<SVGSVGElement>(null)
-
-    const { width } = useWindowSize()
-    const [responsiveWidth, setResponsiveWidth] = useState(DEFAULT_DIMENSION.width)
-    const [responsiveHeight, setResponsiveHeight] = useState(DEFAULT_DIMENSION.height)
-
-    useEffect(() => {
-        if (!rootRef.current) return
-        setResponsiveWidth(rootRef.current.getBoundingClientRect().width || DEFAULT_DIMENSION.width)
-        setResponsiveHeight(rootRef.current.getBoundingClientRect().height || DEFAULT_DIMENSION.height)
-    }, [width /* redraw canvas if window width resize */])
-
-    const dimension = {
-        ...DEFAULT_DIMENSION,
-        width: responsiveWidth,
-        height: responsiveHeight,
-    }
-
-    useDimension(svgRef, dimension)
-    usePriceLineChart(svgRef, data, dimension, 'x-lbp-price-line-chart', { sign: props.currency.symbol })
-
-    return (
-        <div className={classes.root} ref={rootRef}>
-            <svg
-                className={classes.svg}
-                ref={svgRef}
-                width={dimension.width}
-                height={dimension.height}
-                viewBox={`0 0 ${dimension.width} ${dimension.height}`}
-                preserveAspectRatio="xMidYMid meet"
-            />
-        </div>
-    )
-}
diff --git a/packages/mask/src/plugins/Trader/SNSAdaptor/trending/TickersTable.tsx b/packages/mask/src/plugins/Trader/SNSAdaptor/trending/TickersTable.tsx
index d0e92a71847d..1a78cd74aa8c 100644
--- a/packages/mask/src/plugins/Trader/SNSAdaptor/trending/TickersTable.tsx
+++ b/packages/mask/src/plugins/Trader/SNSAdaptor/trending/TickersTable.tsx
@@ -1,7 +1,8 @@
 import { Link, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Typography } from '@mui/material'
 import { makeStyles } from '@masknet/theme'
 import { FormattedCurrency } from '@masknet/shared'
-import { formatEthereumAddress, formatCurrency } from '@masknet/web3-shared-evm'
+import { formatEthereumAddress } from '@masknet/web3-shared-evm'
+import { formatCurrency } from '@masknet/web3-shared-base'
 import { useI18N } from '../../../../utils'
 import type { Ticker } from '../../types'
 import { DataProvider } from '@masknet/public-api'
diff --git a/packages/mask/src/plugins/Trader/SNSAdaptor/trending/TraderView.tsx b/packages/mask/src/plugins/Trader/SNSAdaptor/trending/TraderView.tsx
index 80b9a646debf..486faa009a00 100644
--- a/packages/mask/src/plugins/Trader/SNSAdaptor/trending/TraderView.tsx
+++ b/packages/mask/src/plugins/Trader/SNSAdaptor/trending/TraderView.tsx
@@ -1,7 +1,7 @@
-import { useState, useEffect } from 'react'
+import { useState, useEffect, useMemo } from 'react'
 import { Link, Tab, Tabs } from '@mui/material'
 import { makeStyles } from '@masknet/theme'
-import { useI18N, useSettingsSwitcher } from '../../../../utils'
+import { useI18N } from '../../../../utils'
 import type { TagType } from '../../types'
 import { DataProvider } from '@masknet/public-api'
 import { resolveDataProviderName, resolveDataProviderLink } from '../../pipes'
@@ -17,16 +17,13 @@ import { CoinMarketPanel } from './CoinMarketPanel'
 import { TrendingViewError } from './TrendingViewError'
 import { TrendingViewSkeleton } from './TrendingViewSkeleton'
 import { TrendingViewDeck } from './TrendingViewDeck'
-import { currentDataProviderSettings } from '../../settings'
 import { useAvailableCoins } from '../../trending/useAvailableCoins'
 import { usePreferredCoinId } from '../../trending/useCurrentCoinId'
-import {
-    EthereumTokenType,
-    useFungibleTokenDetailed,
-    useChainIdValid,
-    useNetworkType,
-    isNativeTokenSymbol,
-} from '@masknet/web3-shared-evm'
+import { isNativeTokenSymbol } from '@masknet/web3-shared-evm'
+import { useChainIdValid, useFungibleToken, useNetworkType } from '@masknet/plugin-infra/web3'
+import { NetworkPluginID } from '@masknet/web3-shared-base'
+import { setStorage } from '../../storage'
+import ActionButton from '../../../../extension/options-page/DashboardComponents/ActionButton'
 
 const useStyles = makeStyles<{ isPopper: boolean }>()((theme, props) => {
     return {
@@ -110,10 +107,9 @@ export function TraderView(props: TraderViewProps) {
     const { classes } = useStyles({ isPopper })
     const dataProvider = useCurrentDataProvider(dataProviders)
     const [tabIndex, setTabIndex] = useState(dataProvider !== DataProvider.UNISWAP_INFO ? 1 : 0)
-    const chainIdValid = useChainIdValid()
-
+    const chainIdValid = useChainIdValid(NetworkPluginID.PLUGIN_EVM)
     // #region track network type
-    const networkType = useNetworkType()
+    const networkType = useNetworkType(NetworkPluginID.PLUGIN_EVM)
     useEffect(() => setTabIndex(0), [networkType])
     // #endregion
 
@@ -135,8 +131,8 @@ export function TraderView(props: TraderViewProps) {
     const coinSymbol = (trending?.coin.symbol || '').toLowerCase()
 
     // #region swap
-    const { value: tokenDetailed } = useFungibleTokenDetailed(
-        coinSymbol === 'eth' ? EthereumTokenType.Native : EthereumTokenType.ERC20,
+    const { value: tokenDetailed } = useFungibleToken(
+        NetworkPluginID.PLUGIN_EVM,
         coinSymbol === 'eth' ? '' : trending?.coin.contract_address ?? '',
     )
     // #endregion
@@ -155,13 +151,25 @@ export function TraderView(props: TraderViewProps) {
     })
     // #endregion
 
-    // #region current data provider switcher
-    const DataProviderSwitcher = useSettingsSwitcher(
-        currentDataProviderSettings,
-        dataProviders,
-        resolveDataProviderName,
-    )
-    // #endregion
+    // // #region current data provider switcher
+    const DataProviderSwitcher = useMemo(() => {
+        if (dataProviders.length === 0) return
+        if (typeof dataProvider === 'undefined') return dataProviders[0]
+        const indexOf = dataProviders.indexOf(dataProvider)
+        if (indexOf === -1) return
+        const nextOption = indexOf === dataProviders.length - 1 ? dataProviders[0] : dataProviders[indexOf + 1]
+
+        return (
+            <ActionButton
+                sx={{ marginTop: 1 }}
+                color="primary"
+                variant="contained"
+                onClick={() => setStorage(nextOption)}>
+                Switch to {resolveDataProviderName(nextOption)}
+            </ActionButton>
+        )
+    }, [dataProvider, resolveDataProviderName])
+    // // #endregion
 
     // #region api ready callback
     useEffect(() => {
diff --git a/packages/mask/src/plugins/Trader/SNSAdaptor/trending/TrendingPopper.tsx b/packages/mask/src/plugins/Trader/SNSAdaptor/trending/TrendingPopper.tsx
index 2f6754bc355c..9ea42aae7917 100644
--- a/packages/mask/src/plugins/Trader/SNSAdaptor/trending/TrendingPopper.tsx
+++ b/packages/mask/src/plugins/Trader/SNSAdaptor/trending/TrendingPopper.tsx
@@ -1,11 +1,11 @@
 import { useState, useEffect, useRef, useCallback } from 'react'
-import { Popper, ClickAwayListener, PopperProps, Fade } from '@mui/material'
 import { useLocation, useWindowScroll } from 'react-use'
+import { Popper, ClickAwayListener, PopperProps, Fade } from '@mui/material'
+import type { DataProvider } from '@masknet/public-api'
+import { useRemoteControlledDialog } from '@masknet/shared-base-ui'
 import { PluginTraderMessages } from '../../messages'
 import { WalletMessages } from '../../../Wallet/messages'
 import type { TagType } from '../../types'
-import type { DataProvider } from '@masknet/public-api'
-import { useRemoteControlledDialog } from '@masknet/shared-base-ui'
 import { PluginTransakMessages } from '../../../Transak/messages'
 
 export interface TrendingPopperProps {
@@ -27,8 +27,6 @@ export function TrendingPopper(props: TrendingPopperProps) {
     const onFreezed = useCallback((ev: { open: boolean }) => setFreezed(ev.open), [])
     useRemoteControlledDialog(WalletMessages.events.walletStatusDialogUpdated, onFreezed)
     useRemoteControlledDialog(WalletMessages.events.selectProviderDialogUpdated, onFreezed)
-    useRemoteControlledDialog(WalletMessages.events.selectWalletDialogUpdated, onFreezed)
-    useRemoteControlledDialog(WalletMessages.events.walletConnectQRCodeDialogUpdated, onFreezed)
     useRemoteControlledDialog(PluginTransakMessages.buyTokenDialogUpdated, onFreezed)
     useRemoteControlledDialog(PluginTraderMessages.swapSettingsUpdated, onFreezed)
     // #endregion
diff --git a/packages/mask/src/plugins/Trader/SNSAdaptor/trending/TrendingViewDeck.tsx b/packages/mask/src/plugins/Trader/SNSAdaptor/trending/TrendingViewDeck.tsx
index a53f5c086ccc..6a4140625cff 100644
--- a/packages/mask/src/plugins/Trader/SNSAdaptor/trending/TrendingViewDeck.tsx
+++ b/packages/mask/src/plugins/Trader/SNSAdaptor/trending/TrendingViewDeck.tsx
@@ -14,15 +14,17 @@ import { PriceChanged } from './PriceChanged'
 import { Linking } from './Linking'
 import { TrendingCard, TrendingCardProps } from './TrendingCard'
 import { PluginTransakMessages } from '../../../Transak/messages'
-import { useAccount, formatCurrency } from '@masknet/web3-shared-evm'
 import type { FootnoteMenuOption } from '../trader/FootnoteMenu'
 import { TradeFooter } from '../trader/TradeFooter'
-import { currentDataProviderSettings, getCurrentPreferredCoinIdSettings } from '../../settings'
+import { getCurrentPreferredCoinIdSettings } from '../../settings'
 import { CoinMenu, CoinMenuOption } from './CoinMenu'
 import { useTransakAllowanceCoin } from '../../../Transak/hooks/useTransakAllowanceCoin'
 import { CoinSafetyAlert } from './CoinSafetyAlert'
 import { PluginId } from '@masknet/plugin-infra'
 import { useActivatedPluginsSNSAdaptor } from '@masknet/plugin-infra/content-script'
+import { useAccount } from '@masknet/plugin-infra/web3'
+import { formatCurrency, NetworkPluginID } from '@masknet/web3-shared-base'
+import { setStorage } from '../../storage'
 
 const useStyles = makeStyles()((theme) => {
     return {
@@ -119,7 +121,7 @@ export function TrendingViewDeck(props: TrendingViewDeckProps) {
 
     // #region buy
     const transakPluginEnabled = useActivatedPluginsSNSAdaptor('any').find((x) => x.ID === PluginId.Transak)
-    const account = useAccount()
+    const account = useAccount(NetworkPluginID.PLUGIN_EVM)
     const isAllowanceCoin = useTransakAllowanceCoin(coin)
     const { setDialog: setBuyDialog } = useRemoteControlledDialog(PluginTransakMessages.buyTokenDialogUpdated)
 
@@ -134,7 +136,7 @@ export function TrendingViewDeck(props: TrendingViewDeckProps) {
 
     // #region sync with settings
     const onDataProviderChange = useCallback((option: FootnoteMenuOption) => {
-        currentDataProviderSettings.value = option.value as DataProvider
+        setStorage(option.value as DataProvider)
     }, [])
     // #endregion
 
diff --git a/packages/mask/src/plugins/Trader/apis/LBP/LBP.json b/packages/mask/src/plugins/Trader/apis/LBP/LBP.json
deleted file mode 100644
index 62d9c9d106e1..000000000000
--- a/packages/mask/src/plugins/Trader/apis/LBP/LBP.json
+++ /dev/null
@@ -1,12 +0,0 @@
-[
-    {
-        "name": "Mask Network LBP",
-        "duration": 129600,
-        "token": {
-            "address": "0x69af81e73A73B40adF4f3d4223Cd9b1ECE623074",
-            "decimals": 18,
-            "name": "Mask Network",
-            "symbol": "MASK"
-        }
-    }
-]
diff --git a/packages/mask/src/plugins/Trader/apis/LBP/index.ts b/packages/mask/src/plugins/Trader/apis/LBP/index.ts
deleted file mode 100644
index 5f3aa16d4f09..000000000000
--- a/packages/mask/src/plugins/Trader/apis/LBP/index.ts
+++ /dev/null
@@ -1,105 +0,0 @@
-import { getLBPConstants } from '@masknet/web3-shared-evm'
-import stringify from 'json-stable-stringify'
-import { currentChainIdSettings } from '../../../Wallet/settings'
-
-async function fetchFromBalancerPoolSubgraph<T>(query: string) {
-    const subgraphURL = getLBPConstants(currentChainIdSettings.value).BALANCER_POOLS_SUBGRAPH_URL
-    if (!subgraphURL) return null
-    const response = await fetch(subgraphURL, {
-        method: 'POST',
-        mode: 'cors',
-        body: stringify({ query }),
-    })
-    const { data } = (await response.json()) as {
-        data: T
-    }
-    return data
-}
-
-export async function fetchLBP_PoolsByTokenAddress(address: string) {
-    const data = await fetchFromBalancerPoolSubgraph<{
-        pools: Array<{
-            id: string
-            createTime: number
-        }>
-    }>(`
-    {
-        pools(
-            orderBy: swapsCount,
-            orderDirection: desc,
-            where: {
-                rights_contains: ["canChangeWeights"],
-                tokensList_contains: ["${address.toLowerCase()}"]
-            }
-        ) {
-          id
-          createTime
-        }
-    }`)
-    if (!data?.pools) throw new Error('Failed to load pools.')
-    return data.pools
-}
-
-export async function fetchLBP_PoolTokenPrices(poolId: string, address: string, blockNumbers: string[]) {
-    const queries = blockNumbers.map(
-        (x) => `
-        b${x}: tokenPrices (
-            where: { poolTokenId: "${poolId.toLowerCase()}-${address.toLowerCase()}" },
-            block: {
-                number: ${x}
-            }
-        ) {
-            price
-        }
-    `,
-    )
-    const data = await fetchFromBalancerPoolSubgraph<Record<string, Array<{ price: string }>>>(`
-        query tokenPrices {
-            ${queries.join('\n')}
-        }
-    `)
-    if (!data) return []
-    return Object.keys(data)
-        .map((x) => ({
-            price: data[x][0]?.price ?? '0',
-            blockNumber: x.slice(1),
-        }))
-        .sort((a, z) => Number.parseInt(a.blockNumber, 10) - Number.parseInt(z.blockNumber, 10))
-}
-
-interface LBPPoolToken {
-    address: string
-    balance: string
-    denormWeight: string
-}
-
-export async function fetchLBP_PoolTokens(poolId: string, blockNumbers: string[]) {
-    const queries = blockNumbers.map(
-        (x) => `
-        b${x}: pools (
-            where: {
-                id: "${poolId.toLowerCase()}"
-            },
-            block: {
-                number: ${x}
-            }
-        ) {
-            tokens {
-                address
-                balance
-                denormWeight
-            }
-        }`,
-    )
-
-    const data = await fetchFromBalancerPoolSubgraph<Record<string, { tokens: LBPPoolToken[] }>>(`
-        query poolTokens {
-            ${queries.join('\n')}
-        }
-    `)
-    if (!data) return []
-    return Object.keys(data).map((x) => ({
-        tokens: data[x].tokens,
-        blockNumber: x.slice(1),
-    }))
-}
diff --git a/packages/mask/src/plugins/Trader/apis/balancer/index.ts b/packages/mask/src/plugins/Trader/apis/balancer/index.ts
index 011191a2ab43..26625189694f 100644
--- a/packages/mask/src/plugins/Trader/apis/balancer/index.ts
+++ b/packages/mask/src/plugins/Trader/apis/balancer/index.ts
@@ -1,20 +1,17 @@
 import { SOR } from '@balancer-labs/sor'
 import { JsonRpcProvider } from '@ethersproject/providers'
-import { ChainId, getRPCConstants, getTraderConstants, isSameAddress } from '@masknet/web3-shared-evm'
+import { isSameAddress } from '@masknet/web3-shared-base'
+import { ChainId, getRPCConstants, getTraderConstants } from '@masknet/web3-shared-evm'
 import BigNumber from 'bignumber.js'
 import { first, memoize } from 'lodash-unified'
-import { currentChainIdSettings } from '../../../Wallet/settings'
 import { BALANCER_MAX_NO_POOLS, BALANCER_SOR_GAS_PRICE, BALANCER_SWAP_TYPE } from '../../constants'
-import { getFutureTimestamps } from '../../helpers/blocks'
 import type { Route } from '../../types'
-import { fetchBlockNumbersByTimestamps } from '../blocks'
-import { fetchLBP_PoolsByTokenAddress, fetchLBP_PoolTokenPrices, fetchLBP_PoolTokens } from '../LBP'
 
 // #region create cached SOR
 const createSOR_ = memoize(
     (chainId: ChainId) => {
-        const { RPC } = getRPCConstants(chainId)
-        const providerURL = first(RPC)
+        const { RPC_URLS } = getRPCConstants(chainId)
+        const providerURL = first(RPC_URLS)
         if (!providerURL) throw new Error('Unknown chain id.')
         return new SOR(
             // we choose a fixed provider cause it's only used here.
@@ -38,13 +35,12 @@ function createSOR(chainId: ChainId) {
 }
 // #endregion
 
-export async function updatePools(force = false, chainId?: ChainId) {
-    const currentChainId = chainId ?? currentChainIdSettings.value
-    const sor = createSOR(currentChainId)
+export async function updatePools(force = false, chainId = ChainId.Mainnet) {
+    const sor = createSOR(chainId)
 
     // this fetches all pools list from URL in constructor then onChain balances using Multicall
     if (!sor.isAllFetched || force) {
-        sor.poolsUrl = `${getTraderConstants(currentChainId).BALANCER_POOLS_URL}?timestamp=${Date.now()}`
+        sor.poolsUrl = `${getTraderConstants(chainId).BALANCER_POOLS_URL}?timestamp=${Date.now()}`
         await sor.fetchPools()
     }
 }
@@ -54,9 +50,8 @@ export async function getSwaps(
     tokenOut: string,
     swapType: BALANCER_SWAP_TYPE,
     amount: string,
-    targetChainId?: ChainId,
+    chainId = ChainId.Mainnet,
 ) {
-    const chainId = targetChainId ?? currentChainIdSettings.value
     const sor = createSOR(chainId)
 
     // this calculates the cost to make a swap which is used as an input to sor to allow it to make gas efficient recommendations.
@@ -125,51 +120,3 @@ export async function getSwaps(
         routes,
     }
 }
-
-export async function fetchTokenPrices(address: string, duration: number, size: number) {
-    // use the first pool sorted by swap count (desc)
-    const pools = await fetchLBP_PoolsByTokenAddress(address)
-    const pool = first(pools)
-    if (!pool) return []
-
-    // create timestamps by given duration and size
-    const timestamps = getFutureTimestamps(pool.createTime, duration, size)
-
-    // expand timestamps to block numbers
-    const blockNumbers = await fetchBlockNumbersByTimestamps(timestamps)
-    if (!blockNumbers.length) return []
-
-    // fetch the token prices in the pool
-    const prices = await fetchLBP_PoolTokenPrices(
-        pool.id,
-        address,
-        blockNumbers.map((x) => x.blockNumber),
-    )
-
-    // compose the result as timestamp and price pairs
-    return prices.map((x, i) => ({
-        timestamp: timestamps[i],
-        blockNumber: x.blockNumber,
-        price: Number.parseFloat(x.price),
-    }))
-}
-
-export async function fetchPoolTokens(address: string, duration: number, size: number) {
-    // use the first pool sorted by swap count (desc)
-    const pools = await fetchLBP_PoolsByTokenAddress(address)
-    const pool = first(pools)
-    if (!pool) return []
-
-    // create timestamps by given duration and size
-    const timestamps = getFutureTimestamps(pool.createTime, duration, size)
-
-    // expand timestamps to block numbers
-    const blockNumbers = await fetchBlockNumbersByTimestamps(timestamps)
-    if (!blockNumbers.length) return []
-
-    const poolTokens = await fetchLBP_PoolTokens(
-        pool.id,
-        blockNumbers.map((x) => x.blockNumber),
-    )
-    return []
-}
diff --git a/packages/mask/src/plugins/Trader/apis/bancor/calculateMinimumReturn.ts b/packages/mask/src/plugins/Trader/apis/bancor/calculateMinimumReturn.ts
index 7674144e4f0c..a3b2f52d6ada 100644
--- a/packages/mask/src/plugins/Trader/apis/bancor/calculateMinimumReturn.ts
+++ b/packages/mask/src/plugins/Trader/apis/bancor/calculateMinimumReturn.ts
@@ -1,14 +1,14 @@
-import type { FungibleTokenDetailed } from '@masknet/web3-shared-evm'
-import { leftShift, ONE, rightShift } from '@masknet/web3-shared-base'
+import { FungibleToken, leftShift, ONE, rightShift } from '@masknet/web3-shared-base'
 import BigNumber from 'bignumber.js'
 import { BIPS_BASE } from '../../constants'
+import type { Web3Helper } from '@masknet/plugin-infra/web3'
 
 export const calculateMinimumReturn = ({
     toToken,
     toAmount,
     slippage,
 }: {
-    toToken: FungibleTokenDetailed
+    toToken: FungibleToken<Web3Helper.ChainIdAll, Web3Helper.SchemaTypeAll>
     toAmount: string | undefined
     slippage: number
 }): string => {
diff --git a/packages/mask/src/plugins/Trader/apis/blocks/index.ts b/packages/mask/src/plugins/Trader/apis/blocks/index.ts
index d8ccef8460ee..50929c108587 100644
--- a/packages/mask/src/plugins/Trader/apis/blocks/index.ts
+++ b/packages/mask/src/plugins/Trader/apis/blocks/index.ts
@@ -1,14 +1,13 @@
-import { getTrendingConstants } from '@masknet/web3-shared-evm'
+import { ChainId, getTrendingConstants } from '@masknet/web3-shared-evm'
 import stringify from 'json-stable-stringify'
 import { chunk, first, flatten } from 'lodash-unified'
-import { currentChainIdSettings } from '../../../Wallet/settings'
 
 interface Block {
     number: string
 }
 
-async function fetchFromEthereumBlocksSubgraph<T>(query: string) {
-    const subgraphURL = getTrendingConstants(currentChainIdSettings.value).ETHEREUM_BLOCKS_SUBGRAPH_URL
+async function fetchFromEthereumBlocksSubgraph<T>(chainId: ChainId, query: string) {
+    const subgraphURL = getTrendingConstants(chainId).ETHEREUM_BLOCKS_SUBGRAPH_URL
     if (!subgraphURL) return null
     const response = await fetch(subgraphURL, {
         method: 'POST',
@@ -25,10 +24,12 @@ async function fetchFromEthereumBlocksSubgraph<T>(query: string) {
  * Fetches the block number near the given timestamp.
  * @param timestamp
  */
-export async function fetchBlockNumberByTimestamp(timestamp: number) {
+export async function fetchBlockNumberByTimestamp(chainId: ChainId, timestamp: number) {
     const data = await fetchFromEthereumBlocksSubgraph<{
         blocks: Block[]
-    }>(`
+    }>(
+        chainId,
+        `
     {
         blocks (
             first: 1,
@@ -41,7 +42,8 @@ export async function fetchBlockNumberByTimestamp(timestamp: number) {
             number
         }
     }
-    `)
+    `,
+    )
     return first(data?.blocks)?.number
 }
 
@@ -50,7 +52,7 @@ export async function fetchBlockNumberByTimestamp(timestamp: number) {
  * @param timestamps
  * @param skipCount
  */
-export async function fetchBlockNumbersByTimestamps(timestamps: number[], skipCount = 100) {
+export async function fetchBlockNumbersByTimestamps(chainId: ChainId, timestamps: number[], skipCount = 100) {
     // avoiding request entity too large
     const chunkTimestamps = chunk(timestamps, skipCount)
 
@@ -72,11 +74,14 @@ export async function fetchBlockNumbersByTimestamps(timestamps: number[], skipCo
                 `
             })
 
-            return fetchFromEthereumBlocksSubgraph<Record<string, Block[]>>(`
+            return fetchFromEthereumBlocksSubgraph<Record<string, Block[]>>(
+                chainId,
+                `
                 query blocks {
                     ${queries}
                 }
-            `)
+            `,
+            )
         }),
     )
 
@@ -96,7 +101,7 @@ export async function fetchBlockNumbersByTimestamps(timestamps: number[], skipCo
  * the timestamps can't have too much item
  * @param timestamps
  */
-export async function fetchBlockNumbersObjectByTimestamps(timestamps: number[]) {
+export async function fetchBlockNumbersObjectByTimestamps(chainId: ChainId, timestamps: number[]) {
     const queries = timestamps.map((x) => {
         return `
             t${x}: blocks(
@@ -112,11 +117,14 @@ export async function fetchBlockNumbersObjectByTimestamps(timestamps: number[])
         `
     })
 
-    const data = await fetchFromEthereumBlocksSubgraph<Record<string, Block[]>>(`
+    const data = await fetchFromEthereumBlocksSubgraph<Record<string, Block[]>>(
+        chainId,
+        `
         query blocks {
             ${queries}
         }
-    `)
+    `,
+    )
 
     const result: Record<string, string | undefined> = {}
     if (!data) return result
diff --git a/packages/mask/src/plugins/Trader/apis/index.ts b/packages/mask/src/plugins/Trader/apis/index.ts
index ed4fa7e0fd63..e7cad8fd8b83 100644
--- a/packages/mask/src/plugins/Trader/apis/index.ts
+++ b/packages/mask/src/plugins/Trader/apis/index.ts
@@ -3,7 +3,6 @@ export * from './balancer'
 export * from './trader'
 export * from './trending'
 export * from './blocks'
-export * from './LBP'
 export * from './dodo'
 export * from './bancor'
 export * from './openocean'
diff --git a/packages/mask/src/plugins/Trader/apis/trader/index.ts b/packages/mask/src/plugins/Trader/apis/trader/index.ts
index c36a2ebde6f3..23310f16c3d8 100644
--- a/packages/mask/src/plugins/Trader/apis/trader/index.ts
+++ b/packages/mask/src/plugins/Trader/apis/trader/index.ts
@@ -1,9 +1,9 @@
 import { safeUnreachable } from '@dimensiondev/kit'
 import { TradeProvider } from '@masknet/public-api'
-import { ChainId, getNetworkTypeFromChainId, NetworkType } from '@masknet/web3-shared-evm'
+import { ChainId, chainResolver, NetworkType } from '@masknet/web3-shared-evm'
 
 export async function getAvailableTraderProviders(chainId: ChainId) {
-    const networkType = getNetworkTypeFromChainId(chainId)
+    const networkType = chainResolver.chainNetworkType(chainId)
     if (!networkType) return []
     switch (networkType) {
         case NetworkType.Ethereum:
diff --git a/packages/mask/src/plugins/Trader/apis/trending/hotfix.ts b/packages/mask/src/plugins/Trader/apis/trending/hotfix.ts
index eb37a74837a1..42364fe00d97 100644
--- a/packages/mask/src/plugins/Trader/apis/trending/hotfix.ts
+++ b/packages/mask/src/plugins/Trader/apis/trending/hotfix.ts
@@ -1,49 +1,43 @@
-import {
-    getChainIdFromNetworkType,
-    getCoinGeckoConstants,
-    getCoinMarketCapConstants,
-    NetworkType,
-} from '@masknet/web3-shared-evm'
+import { getEnumAsArray } from '@dimensiondev/kit'
+import { ChainId, getCoinGeckoConstants, getCoinMarketCapConstants } from '@masknet/web3-shared-evm'
 import { TagType } from '../../types'
 import { DataProvider } from '@masknet/public-api'
 import MIRRORED_TOKENS from './mirrored_tokens.json'
 import STOCKS_KEYWORDS from './stocks.json'
 import CASHTAG_KEYWORDS from './cashtag.json'
 import HASHTAG_KEYWORDS from './hashtag.json'
-import { currentNetworkSettings } from '../../../Wallet/settings'
-import { getEnumAsArray } from '@dimensiondev/kit'
 
 const BLACKLIST_MAP: {
     [key in DataProvider]: {
-        [key in NetworkType]?: string[]
+        [key in ChainId]?: string[]
     }
 } = {
     [DataProvider.COIN_MARKET_CAP]: {
-        [NetworkType.Ethereum]: [
+        [ChainId.Mainnet]: [
             '8410', // NFTX Hashmasks Index
         ],
     },
     [DataProvider.COIN_GECKO]: {
-        [NetworkType.Ethereum]: ['swaptoken', 'nftx-hashmasks-index'],
+        [ChainId.Mainnet]: ['swaptoken', 'nftx-hashmasks-index'],
     },
     // use token address as id and all letters should be lower-case
     [DataProvider.UNISWAP_INFO]: {
-        [NetworkType.Ethereum]: [],
+        [ChainId.Mainnet]: [],
     },
 }
 
 const KEYWORD_ALIAS_MAP: {
     [key in DataProvider]: {
-        [key in NetworkType]?: Record<string, string>
+        [key in ChainId]?: Record<string, string>
     }
 } = {
     [DataProvider.COIN_MARKET_CAP]: {
-        [NetworkType.Ethereum]: {
+        [ChainId.Mainnet]: {
             NYFI: 'n0031',
         },
     },
     [DataProvider.COIN_GECKO]: {
-        [NetworkType.Ethereum]: {
+        [ChainId.Mainnet]: {
             NYFI: 'n0031',
         },
     },
@@ -52,17 +46,17 @@ const KEYWORD_ALIAS_MAP: {
 
 const KEYWORD_ID_MAP: {
     [key in DataProvider]: {
-        [key in NetworkType]?: Record<string, string>
+        [key in ChainId]?: Record<string, string>
     }
 } = {
     [DataProvider.COIN_MARKET_CAP]: {
-        [NetworkType.Ethereum]: {
+        [ChainId.Mainnet]: {
             UNI: '7083',
             YAM: '7131', // YAM v3
         },
     },
     [DataProvider.COIN_GECKO]: {
-        [NetworkType.Ethereum]: {
+        [ChainId.Mainnet]: {
             UNI: 'uniswap',
         },
     },
@@ -71,23 +65,23 @@ const KEYWORD_ID_MAP: {
 
 const ID_ADDRESS_MAP: {
     [key in DataProvider]: {
-        [key in NetworkType]?: Record<string, string>
+        [key in ChainId]?: Record<string, string>
     }
 } = {
     [DataProvider.COIN_MARKET_CAP]: {
-        [NetworkType.Ethereum]: {
+        [ChainId.Mainnet]: {
             '6747': '0x32a7c02e79c4ea1008dd6564b35f131428673c41', // CRUST
             '8536': '0x69af81e73A73B40adF4f3d4223Cd9b1ECE623074', // MASK
         },
-        [NetworkType.Polygon]: {
+        [ChainId.Matic]: {
             '8536': '0x2B9E7ccDF0F4e5B24757c1E1a80e311E34Cb10c7', // MASK
         },
     },
     [DataProvider.COIN_GECKO]: {
-        [NetworkType.Ethereum]: {
+        [ChainId.Mainnet]: {
             'crust-network': '0x32a7c02e79c4ea1008dd6564b35f131428673c41', // CRUST
         },
-        [NetworkType.Polygon]: {
+        [ChainId.Matic]: {
             'mask-network': '0x2B9E7ccDF0F4e5B24757c1E1a80e311E34Cb10c7', // MASK
         },
     },
@@ -96,7 +90,7 @@ const ID_ADDRESS_MAP: {
 
 const NETWORK_ID_MAP: {
     [key in DataProvider]: {
-        [key in NetworkType]?: string
+        [key in ChainId]?: string
     }
 } = {
     [DataProvider.COIN_GECKO]: {},
@@ -104,33 +98,32 @@ const NETWORK_ID_MAP: {
     [DataProvider.UNISWAP_INFO]: {},
 }
 
-getEnumAsArray(NetworkType).map(({ value: networkType }) => {
-    const chainId = getChainIdFromNetworkType(networkType)
-    NETWORK_ID_MAP[DataProvider.COIN_GECKO][networkType] = getCoinGeckoConstants(chainId).PLATFORM_ID ?? ''
-    NETWORK_ID_MAP[DataProvider.COIN_MARKET_CAP][networkType] = getCoinMarketCapConstants(chainId).CHAIN_ID ?? ''
+getEnumAsArray(ChainId).map(({ value: chainId }) => {
+    NETWORK_ID_MAP[DataProvider.COIN_GECKO][chainId] = getCoinGeckoConstants(chainId).PLATFORM_ID ?? ''
+    NETWORK_ID_MAP[DataProvider.COIN_MARKET_CAP][chainId] = getCoinMarketCapConstants(chainId).CHAIN_ID ?? ''
 })
 
-export function resolveAlias(keyword: string, dataProvider: DataProvider) {
+export function resolveAlias(chainId: ChainId, keyword: string, dataProvider: DataProvider) {
     if (dataProvider === DataProvider.UNISWAP_INFO) return keyword
-    return KEYWORD_ALIAS_MAP[dataProvider][currentNetworkSettings.value]?.[keyword.toUpperCase()] ?? keyword
+    return KEYWORD_ALIAS_MAP[dataProvider][chainId]?.[keyword.toUpperCase()] ?? keyword
 }
 
-export function resolveCoinId(keyword: string, dataProvider: DataProvider) {
-    return KEYWORD_ID_MAP[dataProvider][currentNetworkSettings.value]?.[keyword.toUpperCase()]
+export function resolveCoinId(chainId: ChainId, keyword: string, dataProvider: DataProvider) {
+    return KEYWORD_ID_MAP[dataProvider][chainId]?.[keyword.toUpperCase()]
 }
 
-export function resolveCoinAddress(id: string, dataProvider: DataProvider) {
-    return ID_ADDRESS_MAP[dataProvider][currentNetworkSettings.value]?.[id]
+export function resolveCoinAddress(chainId: ChainId, id: string, dataProvider: DataProvider) {
+    return ID_ADDRESS_MAP[dataProvider][chainId]?.[id]
 }
 
-export function resolveNetworkType(id: string, dataProvider: DataProvider) {
-    if (dataProvider === DataProvider.UNISWAP_INFO) return NetworkType.Ethereum
-    const networks = NETWORK_ID_MAP[dataProvider]
-    return Object.entries(networks).find(([_, key]) => key === id)?.[0]
+export function resolveChainId(id: string, dataProvider: DataProvider) {
+    if (dataProvider === DataProvider.UNISWAP_INFO) return ChainId.Mainnet
+    const chainIds = NETWORK_ID_MAP[dataProvider]
+    return Object.entries(chainIds).find(([_, key]) => key === id)?.[0]
 }
 
-export function isBlockedId(id: string, dataProvider: DataProvider) {
-    return BLACKLIST_MAP[dataProvider][currentNetworkSettings.value]?.includes(id)
+export function isBlockedId(chainId: ChainId, id: string, dataProvider: DataProvider) {
+    return BLACKLIST_MAP[dataProvider][chainId]?.includes(id)
 }
 
 export function isBlockedKeyword(type: TagType, keyword: string) {
diff --git a/packages/mask/src/plugins/Trader/apis/trending/index.ts b/packages/mask/src/plugins/Trader/apis/trending/index.ts
index 8949ef40297d..5d31f6b7ff22 100644
--- a/packages/mask/src/plugins/Trader/apis/trending/index.ts
+++ b/packages/mask/src/plugins/Trader/apis/trending/index.ts
@@ -11,12 +11,11 @@ import {
     isBlockedKeyword,
     isMirroredKeyword,
     resolveAlias,
+    resolveChainId,
     resolveCoinAddress,
     resolveCoinId,
-    resolveNetworkType,
 } from './hotfix'
-import { getNetworkTypeFromChainId, NetworkType } from '@masknet/web3-shared-evm'
-import { currentChainIdSettings, currentNetworkSettings } from '../../../Wallet/settings'
+import { ChainId, chainResolver, NetworkType } from '@masknet/web3-shared-evm'
 import { Days } from '../../SNSAdaptor/trending/PriceChartDaysControl'
 
 /**
@@ -87,7 +86,7 @@ const coinNamespace = new Map<
     }
 >()
 
-async function updateCache(dataProvider: DataProvider, keyword?: string) {
+async function updateCache(chainId: ChainId, dataProvider: DataProvider, keyword?: string) {
     try {
         // uniswap update cache with keyword
         if (dataProvider === DataProvider.UNISWAP_INFO) {
@@ -99,8 +98,8 @@ async function updateCache(dataProvider: DataProvider, keyword?: string) {
                     lastUpdated: new Date(),
                 })
             const cache = coinNamespace.get(dataProvider)!
-            const coins = (await uniswapAPI.getAllCoinsByKeyword(keyword)).filter(
-                (x) => !isBlockedId(x.id, dataProvider),
+            const coins = (await uniswapAPI.getAllCoinsByKeyword(chainId, keyword)).filter(
+                (x) => !isBlockedId(chainId, x.id, dataProvider),
             )
             if (coins.length) {
                 cache.supportedSymbolsSet.add(keyword.toLowerCase())
@@ -111,7 +110,7 @@ async function updateCache(dataProvider: DataProvider, keyword?: string) {
         }
 
         // other providers fetch all of supported coins
-        const coins = (await getCoins(dataProvider)).filter((x) => !isBlockedId(x.id, dataProvider))
+        const coins = (await getCoins(dataProvider)).filter((x) => !isBlockedId(chainId, x.id, dataProvider))
         const coinsGrouped = groupBy(coins, (x) => x.symbol.toLowerCase())
         coinNamespace.set(dataProvider, {
             supportedSymbolsSet: new Set<string>(Object.keys(coinsGrouped)),
@@ -128,20 +127,25 @@ function isCacheExpired(dataProvider: DataProvider) {
     return Date.now() - lastUpdated > CRYPTOCURRENCY_MAP_EXPIRES_AT
 }
 
-export async function checkAvailabilityOnDataProvider(keyword: string, type: TagType, dataProvider: DataProvider) {
+export async function checkAvailabilityOnDataProvider(
+    chainId: ChainId,
+    keyword: string,
+    type: TagType,
+    dataProvider: DataProvider,
+) {
     if (isBlockedKeyword(type, keyword)) return false
     // for uniswap we check availability by fetching token info dynamically
-    if (dataProvider === DataProvider.UNISWAP_INFO) await updateCache(dataProvider, keyword)
+    if (dataProvider === DataProvider.UNISWAP_INFO) await updateCache(chainId, dataProvider, keyword)
     // cache never built before update in blocking way
-    else if (!coinNamespace.has(dataProvider)) await updateCache(dataProvider)
+    else if (!coinNamespace.has(dataProvider)) await updateCache(chainId, dataProvider)
     // data fetched before update in nonblocking way
-    else if (isCacheExpired(dataProvider)) updateCache(dataProvider)
+    else if (isCacheExpired(dataProvider)) updateCache(chainId, dataProvider)
     const symbols = coinNamespace.get(dataProvider)?.supportedSymbolsSet
-    return symbols?.has(resolveAlias(keyword, dataProvider).toLowerCase()) ?? false
+    return symbols?.has(resolveAlias(chainId, keyword, dataProvider).toLowerCase()) ?? false
 }
 
-export async function getAvailableDataProviders(type?: TagType, keyword?: string) {
-    const networkType = getNetworkTypeFromChainId(currentChainIdSettings.value)
+export async function getAvailableDataProviders(chainId: ChainId, type?: TagType, keyword?: string) {
+    const networkType = chainResolver.chainNetworkType(chainId)
     if (!networkType) return []
     if (!type || !keyword)
         return getEnumAsArray(DataProvider)
@@ -154,22 +158,32 @@ export async function getAvailableDataProviders(type?: TagType, keyword?: string
                 async (x) =>
                     [
                         x.value,
-                        await checkAvailabilityOnDataProvider(resolveAlias(keyword, x.value), type, x.value),
+                        await checkAvailabilityOnDataProvider(
+                            chainId,
+                            resolveAlias(chainId, keyword, x.value),
+                            type,
+                            x.value,
+                        ),
                     ] as const,
             ),
     )
     return checked.filter(([, y]) => y).map(([x]) => x)
 }
 
-export async function getAvailableCoins(keyword: string, type: TagType, dataProvider: DataProvider) {
-    if (!(await checkAvailabilityOnDataProvider(keyword, type, dataProvider))) return []
+export async function getAvailableCoins(chainId: ChainId, keyword: string, type: TagType, dataProvider: DataProvider) {
+    if (!(await checkAvailabilityOnDataProvider(chainId, keyword, type, dataProvider))) return []
     const ids = coinNamespace.get(dataProvider)?.supportedSymbolIdsMap
-    return ids?.get(resolveAlias(keyword, dataProvider).toLowerCase()) ?? []
+    return ids?.get(resolveAlias(chainId, keyword, dataProvider).toLowerCase()) ?? []
 }
 // #endregion
 
 // #region get trending info
-async function getCoinTrending(id: string, currency: Currency, dataProvider: DataProvider): Promise<Trending> {
+async function getCoinTrending(
+    chainId: ChainId,
+    id: string,
+    currency: Currency,
+    dataProvider: DataProvider,
+): Promise<Trending> {
     switch (dataProvider) {
         case DataProvider.COIN_GECKO:
             const info = await coinGeckoAPI.getCoinInfo(id)
@@ -216,10 +230,10 @@ async function getCoinTrending(id: string, currency: Currency, dataProvider: Dat
                     twitter_url,
                     telegram_url,
                     contract_address:
-                        resolveCoinAddress(id, DataProvider.COIN_GECKO) ??
+                        resolveCoinAddress(chainId, id, DataProvider.COIN_GECKO) ??
                         info.platforms[
                             Object.keys(info.platforms).find(
-                                (x) => resolveNetworkType(x, DataProvider.COIN_GECKO) === currentNetworkSettings.value,
+                                (x) => resolveChainId(x, DataProvider.COIN_GECKO) === chainId,
                             ) ?? ''
                         ],
                 },
@@ -281,11 +295,9 @@ async function getCoinTrending(id: string, currency: Currency, dataProvider: Dat
                     market_cap_rank: quotesInfo?.[id]?.cmc_rank,
                     description: coinInfo.description,
                     contract_address:
-                        resolveCoinAddress(id, DataProvider.COIN_MARKET_CAP) ??
+                        resolveCoinAddress(chainId, id, DataProvider.COIN_MARKET_CAP) ??
                         coinInfo.contract_address.find(
-                            (x) =>
-                                resolveNetworkType(x.platform.coin.id, DataProvider.COIN_MARKET_CAP) ===
-                                currentNetworkSettings.value,
+                            (x) => resolveChainId(x.platform.coin.id, DataProvider.COIN_MARKET_CAP) === chainId,
                         )?.contract_address,
                 },
                 currency,
@@ -330,7 +342,7 @@ async function getCoinTrending(id: string, currency: Currency, dataProvider: Dat
                 }
             return trending
         case DataProvider.UNISWAP_INFO:
-            const { token, marketInfo, tickersInfo } = await uniswapAPI.getCoinInfo(id)
+            const { token, marketInfo, tickersInfo } = await uniswapAPI.getCoinInfo(chainId, id)
             return {
                 currency,
                 dataProvider: DataProvider.UNISWAP_INFO,
@@ -354,18 +366,24 @@ async function getCoinTrending(id: string, currency: Currency, dataProvider: Dat
     }
 }
 
-export async function getCoinTrendingById(id: string, currency: Currency, dataProvider: DataProvider) {
-    return getCoinTrending(id, currency, dataProvider)
+export async function getCoinTrendingById(
+    chainId: ChainId,
+    id: string,
+    currency: Currency,
+    dataProvider: DataProvider,
+) {
+    return getCoinTrending(chainId, id, currency, dataProvider)
 }
 
 export async function getCoinTrendingByKeyword(
+    chainId: ChainId,
     keyword: string,
     tagType: TagType,
     currency: Currency,
     dataProvider: DataProvider,
 ) {
     // check if the keyword is supported by given data provider
-    const coins = await getAvailableCoins(keyword, tagType, dataProvider)
+    const coins = await getAvailableCoins(chainId, keyword, tagType, dataProvider)
     if (!coins.length) return null
 
     // prefer coins on the ethereum network
@@ -373,7 +391,8 @@ export async function getCoinTrendingByKeyword(
     if (!coin) return null
 
     return getCoinTrendingById(
-        resolveCoinId(resolveAlias(keyword, dataProvider), dataProvider) ?? coin.id,
+        chainId,
+        resolveCoinId(chainId, resolveAlias(chainId, keyword, dataProvider), dataProvider) ?? coin.id,
         currency,
         dataProvider,
     )
@@ -382,6 +401,7 @@ export async function getCoinTrendingByKeyword(
 
 // #region get price stats info
 export async function getPriceStats(
+    chainId: ChainId,
     id: string,
     currency: Currency,
     days: number,
@@ -423,6 +443,7 @@ export async function getPriceStats(
                 return 300 // 5m
             })()
             return uniswapAPI.getPriceStats(
+                chainId,
                 id,
                 currency,
                 uniswap_interval,
diff --git a/packages/mask/src/plugins/Trader/apis/uniswap-health/index.ts b/packages/mask/src/plugins/Trader/apis/uniswap-health/index.ts
index a59243a21705..0cc0e78e1107 100644
--- a/packages/mask/src/plugins/Trader/apis/uniswap-health/index.ts
+++ b/packages/mask/src/plugins/Trader/apis/uniswap-health/index.ts
@@ -1,10 +1,9 @@
-import { getTrendingConstants } from '@masknet/web3-shared-evm'
+import { ChainId, getTrendingConstants } from '@masknet/web3-shared-evm'
 import stringify from 'json-stable-stringify'
 import { first } from 'lodash-unified'
-import { currentChainIdSettings } from '../../../Wallet/settings'
 
-async function fetchFromUniswapV2Health<T>(query: string) {
-    const subgraphURL = getTrendingConstants(currentChainIdSettings.value).UNISWAP_V2_HEALTH_URL
+async function fetchFromUniswapV2Health<T>(chainId: ChainId, query: string) {
+    const subgraphURL = getTrendingConstants(chainId).UNISWAP_V2_HEALTH_URL
     if (!subgraphURL) return null
     const response = await fetch(subgraphURL, {
         method: 'POST',
@@ -16,7 +15,7 @@ async function fetchFromUniswapV2Health<T>(query: string) {
     return data
 }
 
-export async function fetchLatestBlocks() {
+export async function fetchLatestBlocks(chainId: ChainId) {
     type status = {
         synced: string
         health: string
@@ -31,7 +30,9 @@ export async function fetchLatestBlocks() {
     }
     const response = await fetchFromUniswapV2Health<{
         indexingStatusForCurrentVersion: status
-    }>(`
+    }>(
+        chainId,
+        `
       query health {
         indexingStatusForCurrentVersion(subgraphName: "uniswap/uniswap-v2") {
           synced
@@ -46,7 +47,8 @@ export async function fetchLatestBlocks() {
           }
         }
       }
-    `)
+    `,
+    )
 
     const latestBlock = first(response?.indexingStatusForCurrentVersion.chains)?.latestBlock.number
     const headBlock = first(response?.indexingStatusForCurrentVersion.chains)?.chainHeadBlock.number
diff --git a/packages/mask/src/plugins/Trader/apis/uniswap-v2-subgraph/index.ts b/packages/mask/src/plugins/Trader/apis/uniswap-v2-subgraph/index.ts
index b70283cbc0ff..e3751656d168 100644
--- a/packages/mask/src/plugins/Trader/apis/uniswap-v2-subgraph/index.ts
+++ b/packages/mask/src/plugins/Trader/apis/uniswap-v2-subgraph/index.ts
@@ -1,7 +1,6 @@
-import { getTrendingConstants } from '@masknet/web3-shared-evm'
+import { ChainId, getTrendingConstants } from '@masknet/web3-shared-evm'
 import stringify from 'json-stable-stringify'
 import { chunk, first, flatten } from 'lodash-unified'
-import { currentChainIdSettings } from '../../../Wallet/settings'
 
 const TokenFields = `
   fragment TokenFields on Token {
@@ -88,8 +87,8 @@ export type Bundle = {
     ethPrice: number
 }
 
-async function fetchFromUniswapV2Subgraph<T>(query: string) {
-    const subgraphURL = getTrendingConstants(currentChainIdSettings.value).UNISWAP_V2_SUBGRAPH_URL
+async function fetchFromUniswapV2Subgraph<T>(chainId: ChainId, query: string) {
+    const subgraphURL = getTrendingConstants(chainId).UNISWAP_V2_SUBGRAPH_URL
     if (!subgraphURL) return null
     const response = await fetch(subgraphURL, {
         method: 'POST',
@@ -106,16 +105,19 @@ async function fetchFromUniswapV2Subgraph<T>(query: string) {
  * Fetch Ether price of given block
  * @param blockNumber if don't give, will return latest price
  */
-export async function fetchEtherPriceByBlockNumber(blockNumber?: string) {
+export async function fetchEtherPriceByBlockNumber(chainId: ChainId, blockNumber?: string) {
     const data = await fetchFromUniswapV2Subgraph<{
         bundles: Bundle[]
-    }>(`
+    }>(
+        chainId,
+        `
         query bundles {
             bundles(where: { id: 1 } ${blockNumber ? `block: { number: ${blockNumber} }` : ''}) {
                 ethPrice
             }
         }
-    `)
+    `,
+    )
     if (!data?.bundles) return
     return first(data.bundles)?.ethPrice
 }
@@ -124,7 +126,7 @@ export async function fetchEtherPriceByBlockNumber(blockNumber?: string) {
  * Fetch Ether price of list of blocks
  * @param blockNumbers
  */
-export async function fetchEtherPricesByBlockNumbers(blockNumbers: Array<string | undefined>) {
+export async function fetchEtherPricesByBlockNumbers(chainId: ChainId, blockNumbers: Array<string | undefined>) {
     const queries = blockNumbers.map((x) => {
         return `
             b${x}: bundle(id: "1", ${x ? `block: { number: ${x} }` : ''}) {
@@ -132,11 +134,14 @@ export async function fetchEtherPricesByBlockNumbers(blockNumbers: Array<string
             }
         `
     })
-    const data = await fetchFromUniswapV2Subgraph<Record<string, Bundle>>(`
+    const data = await fetchFromUniswapV2Subgraph<Record<string, Bundle>>(
+        chainId,
+        `
         query bundles {
             ${queries.join('\n')}
         }
-    `)
+    `,
+    )
 
     const result: Record<string, number | undefined> = {}
     if (!data) return result
@@ -151,7 +156,7 @@ export async function fetchEtherPricesByBlockNumbers(blockNumbers: Array<string
  * Fetches tokens for an array of symbols (case-sensitive).
  * @param keyword
  */
-export async function fetchTokensByKeyword(keyword: string) {
+export async function fetchTokensByKeyword(chainId: ChainId, keyword: string) {
     // thegraph does not support case-insensitive searching
     // so cased keywords will be added too
     const listOfKeywords = [keyword, keyword.toLowerCase(), keyword.toUpperCase()]
@@ -162,7 +167,9 @@ export async function fetchTokensByKeyword(keyword: string) {
         symbol: string
         decimals: number
     }
-    const data = await fetchFromUniswapV2Subgraph<{ tokens: Token[] }>(`
+    const data = await fetchFromUniswapV2Subgraph<{ tokens: Token[] }>(
+        chainId,
+        `
         query tokens {
             tokens (where: { symbol_in: ${stringify(listOfKeywords)} }, orderBy: tradeVolume, orderDirection: desc) {
                 id
@@ -171,14 +178,15 @@ export async function fetchTokensByKeyword(keyword: string) {
                 decimals
             }
         }
-    `)
+    `,
+    )
     return data?.tokens ?? []
 }
 
 /**
  * Fetch the daily token data.
  */
-export async function fetchTokenDayData(address: string, date: Date) {
+export async function fetchTokenDayData(chainId: ChainId, address: string, date: Date) {
     const utcTimestamp = Date.UTC(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate())
     const data = await fetchFromUniswapV2Subgraph<{
         data: {
@@ -194,7 +202,9 @@ export async function fetchTokenDayData(address: string, date: Date) {
                 dailyVolumeUSD: number
             }>
         }
-    }>(`
+    }>(
+        chainId,
+        `
         {
             tokenDayDatas(first: 1000, orderBy: date, date: ${utcTimestamp}, where: { token: ${address} }) {
                 id
@@ -208,7 +218,8 @@ export async function fetchTokenDayData(address: string, date: Date) {
                 dailyVolumeUSD
             }
         }
-    `)
+    `,
+    )
     return first(data?.data.tokenDayData)
 }
 
@@ -217,12 +228,14 @@ export async function fetchTokenDayData(address: string, date: Date) {
  * @param address
  * @param blockNumber
  */
-export async function fetchTokenData(address: string, blockNumber?: string) {
+export async function fetchTokenData(chainId: ChainId, address: string, blockNumber?: string) {
     const data = await fetchFromUniswapV2Subgraph<{
         tokens: Token[]
         pairs0: Pair[]
         pairs1: Pair[]
-    }>(`
+    }>(
+        chainId,
+        `
         ${TokenFields}
         ${PairFields}
         query tokens {
@@ -236,7 +249,8 @@ export async function fetchTokenData(address: string, blockNumber?: string) {
                 ...PairFields
             }
         }
-    `)
+    `,
+    )
 
     return {
         token: first(data?.tokens),
@@ -248,10 +262,11 @@ export async function fetchTokenData(address: string, blockNumber?: string) {
  * fetch pairs bulk data
  * @param pairList
  */
-export async function fetchPairsBulk(pairList: string[]) {
+export async function fetchPairsBulk(chainId: ChainId, pairList: string[]) {
     const data = await fetchFromUniswapV2Subgraph<{
         pairs: Pair[]
     }>(
+        chainId,
         `
            ${PairFields}
            query pairs {
@@ -272,10 +287,12 @@ export async function fetchPairsBulk(pairList: string[]) {
  * @param pairs
  * @param blockNumber
  */
-export async function fetchPairsHistoricalBulk(pairs: string[], blockNumber?: string) {
+export async function fetchPairsHistoricalBulk(chainId: ChainId, pairs: string[], blockNumber?: string) {
     const data = await fetchFromUniswapV2Subgraph<{
         pairs: Pair[]
-    }>(`
+    }>(
+        chainId,
+        `
             ${PairFields}
             query pairs {
                 pairs(first: 200, where: { id_in: ${stringify(
@@ -284,7 +301,8 @@ export async function fetchPairsHistoricalBulk(pairs: string[], blockNumber?: st
                     ...PairFields
                 }
             }
-    `)
+    `,
+    )
 
     return data?.pairs ?? []
 }
@@ -294,17 +312,20 @@ export async function fetchPairsHistoricalBulk(pairs: string[], blockNumber?: st
  * @param pairAddress
  * @param blockNumber
  */
-export async function fetchPairData(pairAddress: string, blockNumber?: string) {
+export async function fetchPairData(chainId: ChainId, pairAddress: string, blockNumber?: string) {
     const data = await fetchFromUniswapV2Subgraph<{
         pairs: Pair[]
-    }>(`
+    }>(
+        chainId,
+        `
          ${PairFields}
          query pairs {
             pairs(${blockNumber ? `block : {number: ${blockNumber}}` : ''} where: { id: "${pairAddress}"} ) {
                 ...PairFields
             }
         }
-    `)
+    `,
+    )
 
     return first(data?.pairs)
 }
@@ -316,6 +337,7 @@ export async function fetchPairData(pairAddress: string, blockNumber?: string) {
  * @param skipCount
  */
 export async function fetchPricesByBlocks(
+    chainId: ChainId,
     tokenAddress: string,
     blocks: Array<{ blockNumber?: string; timestamp: number }>,
     skipCount = 50,
@@ -340,12 +362,15 @@ export async function fetchPricesByBlocks(
             `,
             )
 
-            return fetchFromUniswapV2Subgraph<Record<string, { ethPrice?: string; derivedETH?: string }>>(`
+            return fetchFromUniswapV2Subgraph<Record<string, { ethPrice?: string; derivedETH?: string }>>(
+                chainId,
+                `
                 query blocks {
                     ${queries}
                     ${blockQueries}
                 }
-            `)
+            `,
+            )
         }),
     )
 
diff --git a/packages/mask/src/plugins/Trader/apis/uniswap/index.ts b/packages/mask/src/plugins/Trader/apis/uniswap/index.ts
index dfc6a152cf90..dc395f90be04 100644
--- a/packages/mask/src/plugins/Trader/apis/uniswap/index.ts
+++ b/packages/mask/src/plugins/Trader/apis/uniswap/index.ts
@@ -18,6 +18,7 @@ import {
 } from '../blocks'
 import { fetchLatestBlocks } from '../uniswap-health'
 import { isGreaterThan, isLessThanOrEqualTo } from '@masknet/web3-shared-base'
+import type { ChainId } from '@masknet/web3-shared-evm'
 
 type Value = string | number | BigNumber | undefined
 
@@ -107,7 +108,7 @@ export function getAllCoins() {
     throw new Error('For uniswap all coins are available by default.')
 }
 
-export async function getAllCoinsByKeyword(keyword: string): Promise<Coin[]> {
+export async function getAllCoinsByKeyword(chainId: ChainId, keyword: string): Promise<Coin[]> {
     keyword = keyword.toLowerCase()
     if (keyword === 'mask') {
         return [
@@ -122,7 +123,7 @@ export async function getAllCoinsByKeyword(keyword: string): Promise<Coin[]> {
         ]
     }
 
-    const tokens = await fetchTokensByKeyword(keyword)
+    const tokens = await fetchTokensByKeyword(chainId, keyword)
 
     const coins: Coin[] = tokens.map((x) => ({
         ...x,
@@ -154,9 +155,10 @@ export async function getAllCoinsByKeyword(keyword: string): Promise<Coin[]> {
 
 /**
  * Get coin info by id
+ * @param chainId ChainId
  * @param id the token address
  */
-export async function getCoinInfo(id: string) {
+export async function getCoinInfo(chainId: ChainId, id: string) {
     // #region get timestamps from one hour ago, ,one day ago, a week ago
     const { utcOneHourBack, utcOneDayBack, utcWeekBack, utcTwoWeekBack, utcOneMonthBack, utcOneYearBack } =
         getTimestampForChanges()
@@ -170,7 +172,7 @@ export async function getCoinInfo(id: string) {
         [`t${utcTwoWeekBack}`]: twoWeekBlock,
         [`t${utcOneMonthBack}`]: oneMonthBlock,
         [`t${utcOneYearBack}`]: oneYearBlock,
-    } = await fetchBlockNumbersObjectByTimestamps([
+    } = await fetchBlockNumbersObjectByTimestamps(chainId, [
         utcOneHourBack,
         utcOneDayBack,
         utcWeekBack,
@@ -181,7 +183,7 @@ export async function getCoinInfo(id: string) {
     // #region
 
     // #region get ether price
-    const ethPrice = await fetchEtherPriceByBlockNumber()
+    const ethPrice = await fetchEtherPriceByBlockNumber(chainId)
     const {
         [`b${oneHourBlock}`]: oneHourBackEthPrice,
         [`b${oneDayBlock}`]: oneDayBackEthPrice,
@@ -189,7 +191,7 @@ export async function getCoinInfo(id: string) {
         [`b${twoWeekBlock}`]: twoWeekBackEthPrice,
         [`b${oneMonthBlock}`]: oneMonthBackEthPrice,
         [`b${oneYearBlock}`]: oneYearBackEthPrice,
-    } = await fetchEtherPricesByBlockNumbers([
+    } = await fetchEtherPricesByBlockNumbers(chainId, [
         oneHourBlock,
         oneDayBlock,
         weekBlock,
@@ -209,13 +211,13 @@ export async function getCoinInfo(id: string) {
         { token: oneMonthToken },
         { token: oneYearToken },
     ] = await Promise.all([
-        fetchTokenData(id),
-        fetchTokenData(id, oneHourBlock),
-        fetchTokenData(id, oneDayBlock),
-        fetchTokenData(id, weekBlock),
-        fetchTokenData(id, twoWeekBlock),
-        fetchTokenData(id, oneMonthBlock),
-        fetchTokenData(id, oneYearBlock),
+        fetchTokenData(chainId, id),
+        fetchTokenData(chainId, id, oneHourBlock),
+        fetchTokenData(chainId, id, oneDayBlock),
+        fetchTokenData(chainId, id, weekBlock),
+        fetchTokenData(chainId, id, twoWeekBlock),
+        fetchTokenData(chainId, id, oneMonthBlock),
+        fetchTokenData(chainId, id, oneYearBlock),
     ])
     // #endregion
 
@@ -262,7 +264,10 @@ export async function getCoinInfo(id: string) {
     // #endregion
 
     // #region get pairs data
-    const pairsData = await getBulkPairData(allPairs?.map(({ id }) => id))
+    const pairsData = await getBulkPairData(
+        chainId,
+        allPairs?.map(({ id }) => id),
+    )
     // #endregion
 
     return {
@@ -302,13 +307,13 @@ export async function getCoinInfo(id: string) {
     }
 }
 
-export async function getBulkPairData(pairList: string[]) {
+export async function getBulkPairData(chainId: ChainId, pairList: string[]) {
     type Data = Pair | undefined
     const { utcOneDayBack } = getTimestampForChanges()
-    const oneDayBlock = await fetchBlockNumberByTimestamp(utcOneDayBack)
-    const current = await fetchPairsBulk(pairList)
+    const oneDayBlock = await fetchBlockNumberByTimestamp(chainId, utcOneDayBack)
+    const current = await fetchPairsBulk(chainId, pairList)
 
-    const oneDayResult = await fetchPairsHistoricalBulk(pairList, oneDayBlock)
+    const oneDayResult = await fetchPairsHistoricalBulk(chainId, pairList, oneDayBlock)
 
     const oneDayData = Object.fromEntries(oneDayResult.map((pair): [string, Data] => [pair.id, pair]))
 
@@ -316,7 +321,7 @@ export async function getBulkPairData(pairList: string[]) {
         current?.map(async (pair) => {
             let oneDayHistory = oneDayData[pair.id]
             if (!oneDayHistory) {
-                oneDayHistory = await fetchPairData(pair.id, oneDayBlock)
+                oneDayHistory = await fetchPairData(chainId, pair.id, oneDayBlock)
             }
 
             const oneDayVolumeUSD = new BigNumber(pair.volumeUSD).minus(oneDayHistory?.volumeUSD ?? 0).toNumber()
@@ -349,13 +354,14 @@ export async function getBulkPairData(pairList: string[]) {
 }
 
 export async function getPriceStats(
+    chainId: ChainId,
     id: string,
     currency: Currency,
     interval: number,
     startTime: number,
     endTime: number,
 ) {
-    const [latestBlock] = await fetchLatestBlocks()
+    const [latestBlock] = await fetchLatestBlocks(chainId)
 
     // create an array of hour start times until we reach current hour
     // buffer by half your to catch case where graph isn't to latest block
@@ -370,7 +376,7 @@ export async function getPriceStats(
         return []
     }
 
-    let blocks = await fetchBlockNumbersByTimestamps(timestamps)
+    let blocks = await fetchBlockNumbersByTimestamps(chainId, timestamps)
 
     if (!blocks || blocks.length === 0) {
         return []
@@ -380,7 +386,7 @@ export async function getPriceStats(
         blocks = blocks.filter((block) => block.blockNumber && isLessThanOrEqualTo(block?.blockNumber, latestBlock))
     }
 
-    const prices = await fetchPricesByBlocks(id, blocks)
+    const prices = await fetchPricesByBlocks(chainId, id, blocks)
 
     return prices.map(({ timestamp, derivedETH, ethPrice }) => {
         return [timestamp, new BigNumber(ethPrice ?? 0).multipliedBy(derivedETH ?? 0).toNumber()] as Stat
diff --git a/packages/mask/src/plugins/Trader/base.ts b/packages/mask/src/plugins/Trader/base.ts
index e9970b26ff6b..7ae069e8d5db 100644
--- a/packages/mask/src/plugins/Trader/base.ts
+++ b/packages/mask/src/plugins/Trader/base.ts
@@ -1,10 +1,10 @@
 import type { Plugin } from '@masknet/plugin-infra'
-import { NetworkPluginID } from '@masknet/plugin-infra/web3'
+import { NetworkPluginID } from '@masknet/web3-shared-base'
 import { ChainId } from '@masknet/web3-shared-evm'
 import { PLUGIN_ID } from './constants'
 import { languages } from './locales/languages'
 
-export const base: Plugin.Shared.Definition = {
+export const base: Plugin.Shared.Definition<ChainId> = {
     ID: PLUGIN_ID,
     name: { fallback: 'Trader' },
     description: { fallback: 'View trending of cryptocurrencies, swap ERC20 tokens in various DEX markets.' },
diff --git a/packages/mask/src/plugins/Trader/constants/types.ts b/packages/mask/src/plugins/Trader/constants/types.ts
index 4e63859878b8..63ae5de5123f 100644
--- a/packages/mask/src/plugins/Trader/constants/types.ts
+++ b/packages/mask/src/plugins/Trader/constants/types.ts
@@ -1,9 +1,10 @@
-import type { ERC20TokenDetailed, ChainIdOptionalRecord } from '@masknet/web3-shared-evm'
+import type { FungibleToken } from '@masknet/web3-shared-base'
+import type { ChainIdOptionalRecord, ChainId, SchemaType } from '@masknet/web3-shared-evm'
 
 export interface ERC20TokenTable {
-    [tokenAddress: string]: ERC20TokenDetailed[]
+    [tokenAddress: string]: Array<FungibleToken<ChainId, SchemaType.ERC20>>
 }
 
 export type ERC20TokenCustomizedBase = Readonly<ChainIdOptionalRecord<ERC20TokenTable>>
 
-export type ERC20AgainstToken = Readonly<ChainIdOptionalRecord<ERC20TokenDetailed[]>>
+export type ERC20AgainstToken = Readonly<ChainIdOptionalRecord<Array<FungibleToken<ChainId, SchemaType.ERC20>>>>
diff --git a/packages/mask/src/plugins/Trader/contracts/balancer/useExchangeProxyContract.ts b/packages/mask/src/plugins/Trader/contracts/balancer/useExchangeProxyContract.ts
index 0d2e707df03d..1ddafe069d0d 100644
--- a/packages/mask/src/plugins/Trader/contracts/balancer/useExchangeProxyContract.ts
+++ b/packages/mask/src/plugins/Trader/contracts/balancer/useExchangeProxyContract.ts
@@ -1,9 +1,10 @@
 import type { AbiItem } from 'web3-utils'
 import ExchangeProxyABI from '@masknet/web3-contracts/abis/ExchangeProxy.json'
 import type { ExchangeProxy } from '@masknet/web3-contracts/types/ExchangeProxy'
-import { ChainId, useContract, useTraderConstants } from '@masknet/web3-shared-evm'
+import { ChainId, useTraderConstants } from '@masknet/web3-shared-evm'
+import { useContract } from '@masknet/plugin-infra/web3-evm'
 
 export function useExchangeProxyContract(chainId?: ChainId) {
     const { BALANCER_EXCHANGE_PROXY_ADDRESS } = useTraderConstants(chainId)
-    return useContract<ExchangeProxy>(BALANCER_EXCHANGE_PROXY_ADDRESS, ExchangeProxyABI as AbiItem[], chainId)
+    return useContract<ExchangeProxy>(chainId, BALANCER_EXCHANGE_PROXY_ADDRESS, ExchangeProxyABI as AbiItem[])
 }
diff --git a/packages/mask/src/plugins/Trader/contracts/uniswap/usePairContract.ts b/packages/mask/src/plugins/Trader/contracts/uniswap/usePairContract.ts
index bdb977472aa1..651596f52fa7 100644
--- a/packages/mask/src/plugins/Trader/contracts/uniswap/usePairContract.ts
+++ b/packages/mask/src/plugins/Trader/contracts/uniswap/usePairContract.ts
@@ -1,12 +1,13 @@
 import type { AbiItem } from 'web3-utils'
 import type { Pair } from '@masknet/web3-contracts/types/Pair'
 import PairABI from '@masknet/web3-contracts/abis/Pair.json'
-import { ChainId, useContract, useContracts } from '@masknet/web3-shared-evm'
+import type { ChainId } from '@masknet/web3-shared-evm'
+import { useContract, useContracts } from '@masknet/plugin-infra/web3-evm'
 
-export function usePairContract(address: string, chainId?: ChainId) {
-    return useContract<Pair>(address, PairABI as AbiItem[], chainId)
+export function usePairContract(chainId?: ChainId, address?: string) {
+    return useContract<Pair>(chainId, address, PairABI as AbiItem[])
 }
 
-export function usePairContracts(listOfAddress: string[], chainId?: ChainId) {
-    return useContracts<Pair>(listOfAddress, PairABI as AbiItem[], chainId)
+export function usePairContracts(chainId?: ChainId, listOfAddress: string[] = []) {
+    return useContracts<Pair>(chainId, listOfAddress, PairABI as AbiItem[])
 }
diff --git a/packages/mask/src/plugins/Trader/contracts/uniswap/usePoolContract.ts b/packages/mask/src/plugins/Trader/contracts/uniswap/usePoolContract.ts
index 332d2e39585b..301c937d4659 100644
--- a/packages/mask/src/plugins/Trader/contracts/uniswap/usePoolContract.ts
+++ b/packages/mask/src/plugins/Trader/contracts/uniswap/usePoolContract.ts
@@ -1,12 +1,13 @@
+import { useContract, useContracts } from '@masknet/plugin-infra/web3-evm'
 import PoolStateV3ABI from '@masknet/web3-contracts/abis/PoolStateV3.json'
 import type { PoolStateV3 } from '@masknet/web3-contracts/types/PoolStateV3'
-import { ChainId, useContract, useContracts } from '@masknet/web3-shared-evm'
+import type { ChainId } from '@masknet/web3-shared-evm'
 import type { AbiItem } from 'web3-utils'
 
-export function usePoolContract(address: string) {
-    return useContract<PoolStateV3>(address, PoolStateV3ABI as AbiItem[])
+export function usePoolContract(chainId?: ChainId, address?: string) {
+    return useContract<PoolStateV3>(chainId, address, PoolStateV3ABI as AbiItem[])
 }
 
-export function usePoolContracts(listOfAddress: string[], chainId?: ChainId) {
-    return useContracts<PoolStateV3>(listOfAddress, PoolStateV3ABI as AbiItem[], chainId)
+export function usePoolContracts(chainId?: ChainId, listOfAddress: string[] = []) {
+    return useContracts<PoolStateV3>(chainId, listOfAddress, PoolStateV3ABI as AbiItem[])
 }
diff --git a/packages/mask/src/plugins/Trader/contracts/uniswap/useQuoterContract.ts b/packages/mask/src/plugins/Trader/contracts/uniswap/useQuoterContract.ts
index 2ff8636ae904..425ebd22fc29 100644
--- a/packages/mask/src/plugins/Trader/contracts/uniswap/useQuoterContract.ts
+++ b/packages/mask/src/plugins/Trader/contracts/uniswap/useQuoterContract.ts
@@ -1,9 +1,10 @@
 import QuoterABI from '@masknet/web3-contracts/abis/Quoter.json'
 import type { Quoter } from '@masknet/web3-contracts/types/Quoter'
-import { ChainId, useContract, useTraderConstants } from '@masknet/web3-shared-evm'
+import { ChainId, useTraderConstants } from '@masknet/web3-shared-evm'
+import { useContract } from '@masknet/plugin-infra/web3-evm'
 import type { AbiItem } from 'web3-utils'
 
 export function useQuoterContract(chainId?: ChainId) {
     const { UNISWAP_V3_QUOTER_ADDRESS } = useTraderConstants(chainId)
-    return useContract<Quoter>(UNISWAP_V3_QUOTER_ADDRESS, QuoterABI as AbiItem[], chainId)
+    return useContract<Quoter>(chainId, UNISWAP_V3_QUOTER_ADDRESS, QuoterABI as AbiItem[])
 }
diff --git a/packages/mask/src/plugins/Trader/contracts/uniswap/useRouterV2Contract.ts b/packages/mask/src/plugins/Trader/contracts/uniswap/useRouterV2Contract.ts
index 07580f224eef..bc8332ad8bb6 100644
--- a/packages/mask/src/plugins/Trader/contracts/uniswap/useRouterV2Contract.ts
+++ b/packages/mask/src/plugins/Trader/contracts/uniswap/useRouterV2Contract.ts
@@ -1,8 +1,9 @@
 import type { AbiItem } from 'web3-utils'
 import RouterV2ABI from '@masknet/web3-contracts/abis/RouterV2.json'
 import type { RouterV2 } from '@masknet/web3-contracts/types/RouterV2'
-import { ChainId, useContract } from '@masknet/web3-shared-evm'
+import type { ChainId } from '@masknet/web3-shared-evm'
+import { useContract } from '@masknet/plugin-infra/web3-evm'
 
-export function useRouterV2Contract(address?: string, chainId?: ChainId) {
-    return useContract<RouterV2>(address, RouterV2ABI as AbiItem[], chainId)
+export function useRouterV2Contract(chainId?: ChainId, address?: string) {
+    return useContract<RouterV2>(chainId, address, RouterV2ABI as AbiItem[])
 }
diff --git a/packages/mask/src/plugins/Trader/contracts/uniswap/useSwapRouterContract.ts b/packages/mask/src/plugins/Trader/contracts/uniswap/useSwapRouterContract.ts
index df9b5c1e57e2..32e0ebf2c5eb 100644
--- a/packages/mask/src/plugins/Trader/contracts/uniswap/useSwapRouterContract.ts
+++ b/packages/mask/src/plugins/Trader/contracts/uniswap/useSwapRouterContract.ts
@@ -1,8 +1,9 @@
 import type { AbiItem } from 'web3-utils'
 import SwapRouterABI from '@masknet/web3-contracts/abis/SwapRouter.json'
 import type { SwapRouter } from '@masknet/web3-contracts/types/SwapRouter'
-import { ChainId, useContract } from '@masknet/web3-shared-evm'
+import type { ChainId } from '@masknet/web3-shared-evm'
+import { useContract } from '@masknet/plugin-infra/web3-evm'
 
-export function useSwapRouterContract(address?: string, chainId?: ChainId) {
-    return useContract<SwapRouter>(address, SwapRouterABI as AbiItem[], chainId)
+export function useSwapRouterContract(chainId?: ChainId, address?: string) {
+    return useContract<SwapRouter>(chainId, address, SwapRouterABI as AbiItem[])
 }
diff --git a/packages/mask/src/plugins/Trader/helpers/uniswap.ts b/packages/mask/src/plugins/Trader/helpers/uniswap.ts
index 304ea34e3ed3..2e4a850aed0f 100644
--- a/packages/mask/src/plugins/Trader/helpers/uniswap.ts
+++ b/packages/mask/src/plugins/Trader/helpers/uniswap.ts
@@ -1,17 +1,10 @@
 import JSBI from 'jsbi'
 import { memoize } from 'lodash-unified'
 import BigNumber from 'bignumber.js'
-import { Currency, Token, CurrencyAmount, TradeType, Percent, Price, Ether } from '@uniswap/sdk-core'
+import { Currency, CurrencyAmount, Ether, Percent, Price, Token, TradeType } from '@uniswap/sdk-core'
 import type { Trade } from '@uniswap/v2-sdk'
-import {
-    formatEthereumAddress,
-    ChainId,
-    EthereumTokenType,
-    FungibleTokenDetailed,
-    isSameAddress,
-    WNATIVE,
-} from '@masknet/web3-shared-evm'
-import { pow10, isGreaterThan } from '@masknet/web3-shared-base'
+import { ChainId, formatEthereumAddress, SchemaType, WNATIVE } from '@masknet/web3-shared-evm'
+import { FungibleToken, isGreaterThan, isSameAddress, pow10, TokenType } from '@masknet/web3-shared-base'
 import { ONE_HUNDRED_PERCENT, ZERO_PERCENT } from '../constants'
 
 export function swapErrorToUserReadableMessage(error: any): string {
@@ -58,19 +51,22 @@ export function toUniswapPercent(numerator: number, denominator: number) {
     return new Percent(JSBI.BigInt(numerator), JSBI.BigInt(denominator))
 }
 
-export function toUniswapCurrency(chainId: ChainId, token?: FungibleTokenDetailed): Currency | undefined {
+export function toUniswapCurrency(
+    chainId: ChainId,
+    token?: FungibleToken<ChainId, SchemaType.Native | SchemaType.ERC20>,
+): Currency | undefined {
     try {
         if (!token) return
         const extendedEther = ExtendedEther.onChain(chainId)
         const weth = toUniswapToken(chainId, WNATIVE[chainId])
         if (weth && isSameAddress(token.address, weth.address)) return weth
-        return token.type === EthereumTokenType.Native ? extendedEther : toUniswapToken(chainId, token)
+        return token.schema === SchemaType.Native ? extendedEther : toUniswapToken(chainId, token)
     } catch {
         return
     }
 }
 
-export function toUniswapToken(chainId: ChainId, token: FungibleTokenDetailed) {
+export function toUniswapToken(chainId: ChainId, token: FungibleToken<ChainId, SchemaType.Native | SchemaType.ERC20>) {
     return new Token(
         toUniswapChainId(chainId),
         formatEthereumAddress(token.address),
@@ -80,7 +76,11 @@ export function toUniswapToken(chainId: ChainId, token: FungibleTokenDetailed) {
     )
 }
 
-export function toUniswapCurrencyAmount(chainId: ChainId, token?: FungibleTokenDetailed, amount?: string) {
+export function toUniswapCurrencyAmount(
+    chainId: ChainId,
+    token?: FungibleToken<ChainId, SchemaType.Native | SchemaType.ERC20>,
+    amount?: string,
+) {
     if (!token || !amount) return
     const currency = toUniswapCurrency(chainId, token)
     if (!currency) return
@@ -106,15 +106,17 @@ export function uniswapPriceTo(price: Price<Currency, Currency>) {
 
 export function uniswapTokenTo(token: Token) {
     return {
-        type: ['eth', 'matic', 'bnb'].includes(token.name?.toLowerCase() ?? '')
-            ? EthereumTokenType.Native
-            : EthereumTokenType.ERC20,
+        type: TokenType.Fungible,
         name: token.name,
         symbol: token.symbol,
         decimals: token.decimals,
         address: formatEthereumAddress(token.address),
         chainId: uniswapChainIdTo(token.chainId),
-    } as FungibleTokenDetailed
+        schema: ['eth', 'matic', 'bnb'].includes(token.name?.toLowerCase() ?? '')
+            ? SchemaType.Native
+            : SchemaType.ERC20,
+        id: token.symbol,
+    } as FungibleToken<ChainId, SchemaType.Native | SchemaType.ERC20>
 }
 
 export function uniswapCurrencyAmountTo(currencyAmount: CurrencyAmount<Currency>) {
diff --git a/packages/mask/src/plugins/Trader/index.ts b/packages/mask/src/plugins/Trader/index.ts
index 1d5f0d92d308..b8ddaf48f9b8 100644
--- a/packages/mask/src/plugins/Trader/index.ts
+++ b/packages/mask/src/plugins/Trader/index.ts
@@ -1,7 +1,8 @@
 import { registerPlugin } from '@masknet/plugin-infra'
 import { base } from './base'
+import type { ChainId } from '@masknet/web3-shared-evm'
 
-registerPlugin({
+registerPlugin<ChainId>({
     ...base,
     SNSAdaptor: {
         load: () => import('./SNSAdaptor'),
diff --git a/packages/mask/src/plugins/Trader/pipes.ts b/packages/mask/src/plugins/Trader/pipes.ts
index 314831b4388d..ddd843c48fc5 100644
--- a/packages/mask/src/plugins/Trader/pipes.ts
+++ b/packages/mask/src/plugins/Trader/pipes.ts
@@ -1,5 +1,5 @@
 import { DataProvider, TradeProvider } from '@masknet/public-api'
-import { createLookupTableResolver } from '@masknet/web3-shared-evm'
+import { createLookupTableResolver } from '@masknet/web3-shared-base'
 
 export const resolveDataProviderName = createLookupTableResolver<DataProvider, string>(
     {
diff --git a/packages/mask/src/plugins/Trader/settings.ts b/packages/mask/src/plugins/Trader/settings.ts
index d34219eaece5..bcef1ae327c5 100644
--- a/packages/mask/src/plugins/Trader/settings.ts
+++ b/packages/mask/src/plugins/Trader/settings.ts
@@ -14,14 +14,6 @@ export const currentSlippageSettings = createGlobalSettings(`${PLUGIN_ID}+slippa
  */
 export const currentSingleHopOnlySettings = createGlobalSettings(`${PLUGIN_ID}+singleHopOnly`, false)
 
-/**
- * The default data provider
- */
-export const currentDataProviderSettings = createGlobalSettings<DataProvider>(
-    `${PLUGIN_ID}+dataProvider`,
-    DataProvider.COIN_GECKO,
-)
-
 // #region trade provider general settings
 export interface TradeProviderSettings {
     pools: ZrxTradePool[]
diff --git a/packages/mask/src/plugins/Trader/storage/index.ts b/packages/mask/src/plugins/Trader/storage/index.ts
new file mode 100644
index 000000000000..94420c3a8758
--- /dev/null
+++ b/packages/mask/src/plugins/Trader/storage/index.ts
@@ -0,0 +1,28 @@
+import { DataProvider } from '@masknet/public-api'
+import type { ScopedStorage } from '@masknet/shared-base'
+
+interface StorageValue {
+    dataProvider: DataProvider
+}
+
+export const storageDefaultValue = {
+    dataProvider: DataProvider.COIN_GECKO,
+}
+
+let storage: ScopedStorage<StorageValue> = null!
+
+export function setupStorage(_: typeof storage) {
+    storage = _
+}
+
+export function getStorage() {
+    return storage.storage
+}
+
+export function setStorage(dataProvider: DataProvider) {
+    storage.storage.dataProvider.setValue(dataProvider)
+}
+
+export function getDataProvider() {
+    return storage.storage.dataProvider
+}
diff --git a/packages/mask/src/plugins/Trader/trader/0x/useTrade.ts b/packages/mask/src/plugins/Trader/trader/0x/useTrade.ts
index 84c7e8c513d2..7e37c6bc1fc8 100644
--- a/packages/mask/src/plugins/Trader/trader/0x/useTrade.ts
+++ b/packages/mask/src/plugins/Trader/trader/0x/useTrade.ts
@@ -1,9 +1,9 @@
 import {
-    FungibleTokenDetailed,
-    getNetworkTypeFromChainId,
+    ChainId,
+    chainResolver,
     isNativeTokenAddress,
     NetworkType,
-    useAccount,
+    SchemaType,
     useTokenConstants,
 } from '@masknet/web3-shared-evm'
 import { safeUnreachable } from '@dimensiondev/kit'
@@ -11,10 +11,10 @@ import { ZRX_AFFILIATE_ADDRESS } from '../../constants'
 import { PluginTraderRPC } from '../../messages'
 import { SwapQuoteResponse, TradeStrategy } from '../../types'
 import { useSlippageTolerance } from '../0x/useSlippageTolerance'
-import { currentNetworkSettings } from '../../../Wallet/settings'
 import { TargetChainIdContext } from '../useTargetChainIdContext'
-import { useDoubleBlockBeatRetry } from '@masknet/plugin-infra/web3'
+import { useAccount, useDoubleBlockBeatRetry, useNetworkType } from '@masknet/plugin-infra/web3'
 import type { AsyncStateRetry } from 'react-use/lib/useAsyncRetry'
+import { FungibleToken, NetworkPluginID } from '@masknet/web3-shared-base'
 
 const NATIVE_TOKEN_ADDRESS = '0xeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee'
 
@@ -47,49 +47,55 @@ export function useTrade(
     strategy: TradeStrategy,
     inputAmount: string,
     outputAmount: string,
-    inputToken?: FungibleTokenDetailed,
-    outputToken?: FungibleTokenDetailed,
+    inputToken?: FungibleToken<ChainId, SchemaType.Native | SchemaType.ERC20>,
+    outputToken?: FungibleToken<ChainId, SchemaType.Native | SchemaType.ERC20>,
     temporarySlippage?: number,
 ): AsyncStateRetry<SwapQuoteResponse | null> {
-    const account = useAccount()
+    const account = useAccount(NetworkPluginID.PLUGIN_EVM)
+    const networkType = useNetworkType(NetworkPluginID.PLUGIN_EVM)
     const { targetChainId } = TargetChainIdContext.useContainer()
     const { NATIVE_TOKEN_ADDRESS } = useTokenConstants(targetChainId)
 
     const slippageSetting = useSlippageTolerance()
     const slippage = temporarySlippage || slippageSetting
-    return useDoubleBlockBeatRetry(async () => {
-        if (!inputToken || !outputToken) return null
-        const isExactIn = strategy === TradeStrategy.ExactIn
-        if (inputAmount === '0' && isExactIn) return null
-        if (outputAmount === '0' && !isExactIn) return null
+    return useDoubleBlockBeatRetry(
+        NetworkPluginID.PLUGIN_EVM,
+        async () => {
+            if (!inputToken || !outputToken) return null
+            const isExactIn = strategy === TradeStrategy.ExactIn
+            if (inputAmount === '0' && isExactIn) return null
+            if (outputAmount === '0' && !isExactIn) return null
 
-        const sellToken = isNativeTokenAddress(inputToken)
-            ? getNativeTokenLabel(getNetworkTypeFromChainId(targetChainId) ?? currentNetworkSettings.value)
-            : inputToken.address
-        const buyToken = isNativeTokenAddress(outputToken)
-            ? getNativeTokenLabel(getNetworkTypeFromChainId(targetChainId) ?? currentNetworkSettings.value)
-            : outputToken.address
-        return PluginTraderRPC.swapQuote(
-            {
-                sellToken,
-                buyToken,
-                takerAddress: account,
-                sellAmount: isExactIn ? inputAmount : void 0,
-                buyAmount: isExactIn ? void 0 : outputAmount,
-                skipValidation: true,
-                slippagePercentage: slippage,
-                affiliateAddress: ZRX_AFFILIATE_ADDRESS,
-            },
-            getNetworkTypeFromChainId(targetChainId) ?? currentNetworkSettings.value,
-        )
-    }, [
-        NATIVE_TOKEN_ADDRESS,
-        account,
-        strategy,
-        inputAmount,
-        outputAmount,
-        inputToken?.address,
-        outputToken?.address,
-        slippage,
-    ])
+            const sellToken = isNativeTokenAddress(inputToken)
+                ? getNativeTokenLabel(chainResolver.chainNetworkType(targetChainId) ?? networkType)
+                : inputToken.address
+            const buyToken = isNativeTokenAddress(outputToken)
+                ? getNativeTokenLabel(chainResolver.chainNetworkType(targetChainId) ?? networkType)
+                : outputToken.address
+            return PluginTraderRPC.swapQuote(
+                {
+                    sellToken,
+                    buyToken,
+                    takerAddress: account,
+                    sellAmount: isExactIn ? inputAmount : void 0,
+                    buyAmount: isExactIn ? void 0 : outputAmount,
+                    skipValidation: true,
+                    slippagePercentage: slippage,
+                    affiliateAddress: ZRX_AFFILIATE_ADDRESS,
+                },
+                chainResolver.chainNetworkType(targetChainId) ?? networkType,
+            )
+        },
+        [
+            NATIVE_TOKEN_ADDRESS,
+            networkType,
+            account,
+            strategy,
+            inputAmount,
+            outputAmount,
+            inputToken?.address,
+            outputToken?.address,
+            slippage,
+        ],
+    )
 }
diff --git a/packages/mask/src/plugins/Trader/trader/0x/useTradeCallback.ts b/packages/mask/src/plugins/Trader/trader/0x/useTradeCallback.ts
index e9fe5f6bf659..21cb63220a97 100644
--- a/packages/mask/src/plugins/Trader/trader/0x/useTradeCallback.ts
+++ b/packages/mask/src/plugins/Trader/trader/0x/useTradeCallback.ts
@@ -1,18 +1,19 @@
-import { GasOptionConfig, TransactionEventType, useAccount, useWeb3 } from '@masknet/web3-shared-evm'
-import stringify from 'json-stable-stringify'
-import { pick } from 'lodash-unified'
 import { useMemo } from 'react'
 import { useAsyncFn } from 'react-use'
+import { pick } from 'lodash-unified'
+import stringify from 'json-stable-stringify'
 import type { TransactionConfig } from 'web3-core'
+import { GasOptionConfig, TransactionEventType } from '@masknet/web3-shared-evm'
 import type { SwapQuoteResponse, TradeComputed } from '../../types'
 import { TargetChainIdContext } from '../useTargetChainIdContext'
 import { SUPPORTED_CHAIN_ID_LIST } from './constants'
+import { NetworkPluginID } from '@masknet/web3-shared-base'
+import { useAccount, useWeb3 } from '@masknet/plugin-infra/web3'
 
 export function useTradeCallback(tradeComputed: TradeComputed<SwapQuoteResponse> | null, gasConfig?: GasOptionConfig) {
-    const account = useAccount()
     const { targetChainId: chainId } = TargetChainIdContext.useContainer()
-
-    const web3 = useWeb3({ chainId })
+    const account = useAccount(NetworkPluginID.PLUGIN_EVM)
+    const web3 = useWeb3(NetworkPluginID.PLUGIN_EVM, { chainId })
 
     // compose transaction config
     const config = useMemo(() => {
@@ -26,7 +27,7 @@ export function useTradeCallback(tradeComputed: TradeComputed<SwapQuoteResponse>
 
     return useAsyncFn(async () => {
         // validate config
-        if (!account || !config || !tradeComputed) {
+        if (!web3 || !account || !config || !tradeComputed) {
             return
         }
 
diff --git a/packages/mask/src/plugins/Trader/trader/0x/useTradeComputed.ts b/packages/mask/src/plugins/Trader/trader/0x/useTradeComputed.ts
index dfbff0a435c0..7e31d5a11cd5 100644
--- a/packages/mask/src/plugins/Trader/trader/0x/useTradeComputed.ts
+++ b/packages/mask/src/plugins/Trader/trader/0x/useTradeComputed.ts
@@ -1,14 +1,14 @@
 import { useMemo } from 'react'
 import BigNumber from 'bignumber.js'
-import type { FungibleTokenDetailed } from '@masknet/web3-shared-evm'
-import { ZERO } from '@masknet/web3-shared-base'
+import { FungibleToken, ZERO } from '@masknet/web3-shared-base'
 import type { SwapQuoteResponse, TradeComputed, TradeStrategy } from '../../types'
+import type { ChainId, SchemaType } from '@masknet/web3-shared-evm'
 
 export function useTradeComputed(
     trade: SwapQuoteResponse | null,
     strategy: TradeStrategy,
-    inputToken?: FungibleTokenDetailed,
-    outputToken?: FungibleTokenDetailed,
+    inputToken?: FungibleToken<ChainId, SchemaType.Native | SchemaType.ERC20>,
+    outputToken?: FungibleToken<ChainId, SchemaType.Native | SchemaType.ERC20>,
 ) {
     return useMemo(() => {
         if (!trade) return null
diff --git a/packages/mask/src/plugins/Trader/trader/0x/useTradeGasLimit.ts b/packages/mask/src/plugins/Trader/trader/0x/useTradeGasLimit.ts
index 0808a70150a0..0016927458df 100644
--- a/packages/mask/src/plugins/Trader/trader/0x/useTradeGasLimit.ts
+++ b/packages/mask/src/plugins/Trader/trader/0x/useTradeGasLimit.ts
@@ -2,15 +2,16 @@ import type { TradeComputed, SwapQuoteResponse } from '../../types'
 import { useMemo } from 'react'
 import { TargetChainIdContext } from '../useTargetChainIdContext'
 import { SUPPORTED_CHAIN_ID_LIST } from './constants'
-import { useAccount, useWeb3 } from '@masknet/web3-shared-evm'
 import { pick } from 'lodash-unified'
 import { useAsync } from 'react-use'
+import { useAccount, useWeb3 } from '@masknet/plugin-infra/web3'
+import { NetworkPluginID } from '@masknet/web3-shared-base'
 
 export function useTradeGasLimit(tradeComputed: TradeComputed<SwapQuoteResponse> | null) {
     const { targetChainId } = TargetChainIdContext.useContainer()
 
-    const web3 = useWeb3({ chainId: targetChainId })
-    const account = useAccount()
+    const web3 = useWeb3(NetworkPluginID.PLUGIN_EVM, { chainId: targetChainId })
+    const account = useAccount(NetworkPluginID.PLUGIN_EVM)
     const config = useMemo(() => {
         if (!account || !tradeComputed?.trade_) return null
         return {
@@ -20,7 +21,7 @@ export function useTradeGasLimit(tradeComputed: TradeComputed<SwapQuoteResponse>
     }, [account, tradeComputed])
 
     return useAsync(async () => {
-        if (!tradeComputed?.trade_ || !SUPPORTED_CHAIN_ID_LIST.includes(targetChainId) || !config) return 0
+        if (!web3 || !tradeComputed?.trade_ || !SUPPORTED_CHAIN_ID_LIST.includes(targetChainId) || !config) return 0
         return web3.eth.estimateGas(config)
     }, [targetChainId, tradeComputed, config, web3])
 }
diff --git a/packages/mask/src/plugins/Trader/trader/balancer/useTrade.ts b/packages/mask/src/plugins/Trader/trader/balancer/useTrade.ts
index 388429f7c16c..753706a366c5 100644
--- a/packages/mask/src/plugins/Trader/trader/balancer/useTrade.ts
+++ b/packages/mask/src/plugins/Trader/trader/balancer/useTrade.ts
@@ -1,39 +1,52 @@
 import { useDoubleBlockBeatRetry } from '@masknet/plugin-infra/web3'
-import { FungibleTokenDetailed, isNativeTokenAddress, useTokenConstants } from '@masknet/web3-shared-evm'
+import { ChainId, isNativeTokenAddress, SchemaType, useTokenConstants } from '@masknet/web3-shared-evm'
 import { BALANCER_SWAP_TYPE } from '../../constants'
 import { PluginTraderRPC } from '../../messages'
 import { SwapResponse, TradeStrategy } from '../../types'
 import { TargetChainIdContext } from '../useTargetChainIdContext'
 import type { AsyncStateRetry } from 'react-use/lib/useAsyncRetry'
+import { FungibleToken, NetworkPluginID } from '@masknet/web3-shared-base'
 
 export function useTrade(
     strategy: TradeStrategy,
     inputAmount: string,
     outputAmount: string,
-    inputToken?: FungibleTokenDetailed,
-    outputToken?: FungibleTokenDetailed,
+    inputToken?: FungibleToken<ChainId, SchemaType.Native | SchemaType.ERC20>,
+    outputToken?: FungibleToken<ChainId, SchemaType.Native | SchemaType.ERC20>,
 ): AsyncStateRetry<SwapResponse | null> {
     const { targetChainId } = TargetChainIdContext.useContainer()
     const { WNATIVE_ADDRESS } = useTokenConstants(targetChainId)
 
-    return useDoubleBlockBeatRetry(async () => {
-        if (!WNATIVE_ADDRESS) return null
-        if (!inputToken || !outputToken) return null
-        const isExactIn = strategy === TradeStrategy.ExactIn
-        if (inputAmount === '0' && isExactIn) return null
-        if (outputAmount === '0' && !isExactIn) return null
-        // the WETH address is used for looking for available pools
-        const sellToken = isNativeTokenAddress(inputToken) ? WNATIVE_ADDRESS : inputToken.address
-        const buyToken = isNativeTokenAddress(outputToken) ? WNATIVE_ADDRESS : outputToken.address
-        const { swaps, routes } = await PluginTraderRPC.getSwaps(
-            sellToken,
-            buyToken,
-            isExactIn ? BALANCER_SWAP_TYPE.EXACT_IN : BALANCER_SWAP_TYPE.EXACT_OUT,
-            isExactIn ? inputAmount : outputAmount,
+    return useDoubleBlockBeatRetry(
+        NetworkPluginID.PLUGIN_EVM,
+        async () => {
+            if (!WNATIVE_ADDRESS) return null
+            if (!inputToken || !outputToken) return null
+            const isExactIn = strategy === TradeStrategy.ExactIn
+            if (inputAmount === '0' && isExactIn) return null
+            if (outputAmount === '0' && !isExactIn) return null
+            // the WETH address is used for looking for available pools
+            const sellToken = isNativeTokenAddress(inputToken) ? WNATIVE_ADDRESS : inputToken.address
+            const buyToken = isNativeTokenAddress(outputToken) ? WNATIVE_ADDRESS : outputToken.address
+            const { swaps, routes } = await PluginTraderRPC.getSwaps(
+                sellToken,
+                buyToken,
+                isExactIn ? BALANCER_SWAP_TYPE.EXACT_IN : BALANCER_SWAP_TYPE.EXACT_OUT,
+                isExactIn ? inputAmount : outputAmount,
+                targetChainId,
+            )
+            // no pool found
+            if (!swaps[0].length) return null
+            return { swaps, routes } as SwapResponse
+        },
+        [
+            WNATIVE_ADDRESS,
+            strategy,
             targetChainId,
-        )
-        // no pool found
-        if (!swaps[0].length) return null
-        return { swaps, routes } as SwapResponse
-    }, [WNATIVE_ADDRESS, strategy, targetChainId, inputAmount, outputAmount, inputToken?.address, outputToken?.address])
+            inputAmount,
+            outputAmount,
+            inputToken?.address,
+            outputToken?.address,
+        ],
+    )
 }
diff --git a/packages/mask/src/plugins/Trader/trader/balancer/useTradeCallback.ts b/packages/mask/src/plugins/Trader/trader/balancer/useTradeCallback.ts
index fab9c033011e..3dcffad28395 100644
--- a/packages/mask/src/plugins/Trader/trader/balancer/useTradeCallback.ts
+++ b/packages/mask/src/plugins/Trader/trader/balancer/useTradeCallback.ts
@@ -1,16 +1,12 @@
 import type { ExchangeProxy } from '@masknet/web3-contracts/types/ExchangeProxy'
 import type { PayableTx } from '@masknet/web3-contracts/types/types'
-import {
-    EthereumTokenType,
-    GasOptionConfig,
-    TransactionEventType,
-    useAccount,
-    useTraderConstants,
-} from '@masknet/web3-shared-evm'
+import { SchemaType, GasOptionConfig, TransactionEventType, useTraderConstants } from '@masknet/web3-shared-evm'
 import { useAsyncFn } from 'react-use'
 import { SLIPPAGE_DEFAULT } from '../../constants'
 import { SwapResponse, TradeComputed, TradeStrategy } from '../../types'
 import { TargetChainIdContext } from '../useTargetChainIdContext'
+import { useAccount } from '@masknet/plugin-infra/web3'
+import { NetworkPluginID } from '@masknet/web3-shared-base'
 import { useTradeAmount } from './useTradeAmount'
 
 export function useTradeCallback(
@@ -19,7 +15,7 @@ export function useTradeCallback(
     allowedSlippage = SLIPPAGE_DEFAULT,
     gasConfig?: GasOptionConfig,
 ) {
-    const account = useAccount()
+    const account = useAccount(NetworkPluginID.PLUGIN_EVM)
     const { targetChainId: chainId } = TargetChainIdContext.useContainer()
     const { BALANCER_ETH_ADDRESS } = useTraderConstants(chainId)
 
@@ -51,9 +47,9 @@ export function useTradeCallback(
 
         // balancer use a different address for the native token
         const inputTokenAddress =
-            trade.inputToken.type === EthereumTokenType.Native ? BALANCER_ETH_ADDRESS : trade.inputToken.address
+            trade.inputToken.schema === SchemaType.Native ? BALANCER_ETH_ADDRESS : trade.inputToken.address
         const outputTokenAddress =
-            trade.outputToken.type === EthereumTokenType.Native ? BALANCER_ETH_ADDRESS : trade.outputToken.address
+            trade.outputToken.schema === SchemaType.Native ? BALANCER_ETH_ADDRESS : trade.outputToken.address
 
         const tx =
             trade.strategy === TradeStrategy.ExactIn
@@ -73,9 +69,9 @@ export function useTradeCallback(
 
         // trade with the native token
         let transactionValue = '0'
-        if (trade.strategy === TradeStrategy.ExactIn && trade.inputToken.type === EthereumTokenType.Native)
+        if (trade.strategy === TradeStrategy.ExactIn && trade.inputToken.schema === SchemaType.Native)
             transactionValue = trade.inputAmount.toFixed()
-        else if (trade.strategy === TradeStrategy.ExactOut && trade.outputToken.type === EthereumTokenType.Native)
+        else if (trade.strategy === TradeStrategy.ExactOut && trade.outputToken.schema === SchemaType.Native)
             transactionValue = trade.outputAmount.toFixed()
 
         // send transaction and wait for hash
diff --git a/packages/mask/src/plugins/Trader/trader/balancer/useTradeComputed.ts b/packages/mask/src/plugins/Trader/trader/balancer/useTradeComputed.ts
index f804607e0ec8..5d43a24152fa 100644
--- a/packages/mask/src/plugins/Trader/trader/balancer/useTradeComputed.ts
+++ b/packages/mask/src/plugins/Trader/trader/balancer/useTradeComputed.ts
@@ -1,8 +1,8 @@
 import { useMemo } from 'react'
 import BigNumber from 'bignumber.js'
-import type { FungibleTokenDetailed } from '@masknet/web3-shared-evm'
-import { ZERO } from '@masknet/web3-shared-base'
+import { FungibleToken, ZERO } from '@masknet/web3-shared-base'
 import { SwapResponse, TradeComputed, TradeStrategy } from '../../types'
+import type { ChainId, SchemaType } from '@masknet/web3-shared-evm'
 
 const MIN_VALUE = new BigNumber('1e-5')
 
@@ -11,8 +11,8 @@ export function useTradeComputed(
     strategy: TradeStrategy,
     inputAmount: string,
     outputAmount: string,
-    inputToken?: FungibleTokenDetailed,
-    outputToken?: FungibleTokenDetailed,
+    inputToken?: FungibleToken<ChainId, SchemaType.Native | SchemaType.ERC20>,
+    outputToken?: FungibleToken<ChainId, SchemaType.Native | SchemaType.ERC20>,
 ) {
     return useMemo(() => {
         if (!trade) return null
diff --git a/packages/mask/src/plugins/Trader/trader/balancer/useTradeGasLimit.ts b/packages/mask/src/plugins/Trader/trader/balancer/useTradeGasLimit.ts
index 2eabef9cb05b..f41644e441ee 100644
--- a/packages/mask/src/plugins/Trader/trader/balancer/useTradeGasLimit.ts
+++ b/packages/mask/src/plugins/Trader/trader/balancer/useTradeGasLimit.ts
@@ -2,15 +2,17 @@ import type { SwapResponse, TradeComputed } from '../../types'
 import { useAsync } from 'react-use'
 import type { AsyncState } from 'react-use/lib/useAsyncFn'
 import { TradeStrategy } from '../../types'
-import { EthereumTokenType, useAccount, useTraderConstants } from '@masknet/web3-shared-evm'
+import { SchemaType, useTraderConstants } from '@masknet/web3-shared-evm'
 import { TargetChainIdContext } from '../useTargetChainIdContext'
 import { useExchangeProxyContract } from '../../contracts/balancer/useExchangeProxyContract'
 import type { ExchangeProxy } from '@masknet/web3-contracts/types/ExchangeProxy'
 import { useTradeAmount } from './useTradeAmount'
 import { SLIPPAGE_DEFAULT } from '../../constants'
+import { NetworkPluginID } from '@masknet/web3-shared-base'
+import { useAccount } from '@masknet/plugin-infra/web3'
 
 export function useTradeGasLimit(trade: TradeComputed<SwapResponse> | null): AsyncState<number> {
-    const account = useAccount()
+    const account = useAccount(NetworkPluginID.PLUGIN_EVM)
     const { targetChainId } = TargetChainIdContext.useContainer()
     const exchangeProxyContract = useExchangeProxyContract(targetChainId)
     const { BALANCER_ETH_ADDRESS } = useTraderConstants(targetChainId)
@@ -40,15 +42,15 @@ export function useTradeGasLimit(trade: TradeComputed<SwapResponse> | null): Asy
         )
 
         const inputTokenAddress =
-            trade.inputToken.type === EthereumTokenType.Native ? BALANCER_ETH_ADDRESS : trade.inputToken.address
+            trade.inputToken.schema === SchemaType.Native ? BALANCER_ETH_ADDRESS : trade.inputToken.address
         const outputTokenAddress =
-            trade.outputToken.type === EthereumTokenType.Native ? BALANCER_ETH_ADDRESS : trade.outputToken.address
+            trade.outputToken.schema === SchemaType.Native ? BALANCER_ETH_ADDRESS : trade.outputToken.address
 
         // trade with the native token
         let transactionValue = '0'
-        if (trade.strategy === TradeStrategy.ExactIn && trade.inputToken.type === EthereumTokenType.Native)
+        if (trade.strategy === TradeStrategy.ExactIn && trade.inputToken.schema === SchemaType.Native)
             transactionValue = trade.inputAmount.toFixed()
-        else if (trade.strategy === TradeStrategy.ExactOut && trade.outputToken.type === EthereumTokenType.Native)
+        else if (trade.strategy === TradeStrategy.ExactOut && trade.outputToken.schema === SchemaType.Native)
             transactionValue = trade.outputAmount.toFixed()
 
         const tx =
diff --git a/packages/mask/src/plugins/Trader/trader/bancor/useTrade.ts b/packages/mask/src/plugins/Trader/trader/bancor/useTrade.ts
index c8b7b095a1b7..783afcee85d1 100644
--- a/packages/mask/src/plugins/Trader/trader/bancor/useTrade.ts
+++ b/packages/mask/src/plugins/Trader/trader/bancor/useTrade.ts
@@ -1,25 +1,24 @@
 import {
-    FungibleTokenDetailed,
-    useAccount,
     useTokenConstants,
     useTraderConstants,
     ChainId,
     isNativeTokenAddress,
+    SchemaType,
 } from '@masknet/web3-shared-evm'
 import { PluginTraderRPC } from '../../messages'
 import { SwapBancorRequest, TradeStrategy } from '../../types'
 import { useSlippageTolerance } from './useSlippageTolerance'
 import { TargetChainIdContext } from '../useTargetChainIdContext'
-import { leftShift } from '@masknet/web3-shared-base'
-import { useDoubleBlockBeatRetry } from '@masknet/plugin-infra/web3'
+import { FungibleToken, leftShift, NetworkPluginID } from '@masknet/web3-shared-base'
+import { useAccount, useDoubleBlockBeatRetry } from '@masknet/plugin-infra/web3'
 import type { AsyncStateRetry } from 'react-use/lib/useAsyncRetry'
 
 export function useTrade(
     strategy: TradeStrategy,
     inputAmountWei: string,
     outputAmountWei: string,
-    inputToken?: FungibleTokenDetailed,
-    outputToken?: FungibleTokenDetailed,
+    inputToken?: FungibleToken<ChainId, SchemaType.Native | SchemaType.ERC20>,
+    outputToken?: FungibleToken<ChainId, SchemaType.Native | SchemaType.ERC20>,
     temporarySlippage?: number,
 ): AsyncStateRetry<SwapBancorRequest | null> {
     const slippageSetting = useSlippageTolerance()
@@ -27,46 +26,50 @@ export function useTrade(
     const { targetChainId: chainId } = TargetChainIdContext.useContainer()
     const { NATIVE_TOKEN_ADDRESS } = useTokenConstants(chainId)
     const { BANCOR_ETH_ADDRESS } = useTraderConstants(chainId)
-    const user = useAccount()
+    const user = useAccount(NetworkPluginID.PLUGIN_EVM)
 
     const inputAmount = leftShift(inputAmountWei, inputToken?.decimals).toFixed()
     const outputAmount = leftShift(outputAmountWei, outputToken?.decimals).toFixed()
     const isExactIn = strategy === TradeStrategy.ExactIn
 
-    return useDoubleBlockBeatRetry(async () => {
-        if (!inputToken || !outputToken) return null
-        if (inputAmountWei === '0' && isExactIn) return null
-        if (outputAmountWei === '0' && !isExactIn) return null
-        if (![ChainId.Mainnet, ChainId.Ropsten].includes(chainId)) return null
+    return useDoubleBlockBeatRetry(
+        NetworkPluginID.PLUGIN_EVM,
+        async () => {
+            if (!inputToken || !outputToken) return null
+            if (inputAmountWei === '0' && isExactIn) return null
+            if (outputAmountWei === '0' && !isExactIn) return null
+            if (![ChainId.Mainnet, ChainId.Ropsten].includes(chainId)) return null
 
-        const fromToken = isNativeTokenAddress(inputToken)
-            ? { ...inputToken, address: BANCOR_ETH_ADDRESS ?? '' }
-            : inputToken
+            const fromToken = isNativeTokenAddress(inputToken)
+                ? { ...inputToken, address: BANCOR_ETH_ADDRESS ?? '' }
+                : inputToken
 
-        const toToken = isNativeTokenAddress(outputToken)
-            ? { ...outputToken, address: BANCOR_ETH_ADDRESS ?? '' }
-            : outputToken
+            const toToken = isNativeTokenAddress(outputToken)
+                ? { ...outputToken, address: BANCOR_ETH_ADDRESS ?? '' }
+                : outputToken
 
-        return PluginTraderRPC.swapBancor({
+            return PluginTraderRPC.swapBancor({
+                strategy,
+                fromToken,
+                toToken,
+                fromAmount: isExactIn ? inputAmount : void 0,
+                toAmount: isExactIn ? void 0 : outputAmount,
+                slippage,
+                user,
+                chainId: chainId as ChainId.Mainnet | ChainId.Ropsten,
+                minimumReceived: '',
+            })
+        },
+        [
+            NATIVE_TOKEN_ADDRESS,
             strategy,
-            fromToken,
-            toToken,
-            fromAmount: isExactIn ? inputAmount : void 0,
-            toAmount: isExactIn ? void 0 : outputAmount,
+            inputAmountWei,
+            outputAmountWei,
+            inputToken?.address,
+            outputToken?.address,
             slippage,
             user,
-            chainId: chainId as ChainId.Mainnet | ChainId.Ropsten,
-            minimumReceived: '',
-        })
-    }, [
-        NATIVE_TOKEN_ADDRESS,
-        strategy,
-        inputAmountWei,
-        outputAmountWei,
-        inputToken?.address,
-        outputToken?.address,
-        slippage,
-        user,
-        chainId,
-    ])
+            chainId,
+        ],
+    )
 }
diff --git a/packages/mask/src/plugins/Trader/trader/bancor/useTradeCallback.ts b/packages/mask/src/plugins/Trader/trader/bancor/useTradeCallback.ts
index 2a2565fdb1af..5bba3529f878 100644
--- a/packages/mask/src/plugins/Trader/trader/bancor/useTradeCallback.ts
+++ b/packages/mask/src/plugins/Trader/trader/bancor/useTradeCallback.ts
@@ -1,16 +1,18 @@
-import { GasOptionConfig, TransactionEventType, useAccount, useWeb3 } from '@masknet/web3-shared-evm'
-import stringify from 'json-stable-stringify'
 import { pick } from 'lodash-unified'
 import { useMemo } from 'react'
 import { useAsyncFn } from 'react-use'
+import stringify from 'json-stable-stringify'
+import { NetworkPluginID } from '@masknet/web3-shared-base'
+import { useAccount, useWeb3 } from '@masknet/plugin-infra/web3'
+import { GasOptionConfig, TransactionEventType } from '@masknet/web3-shared-evm'
 import { PluginTraderRPC } from '../../messages'
 import type { SwapBancorRequest, TradeComputed } from '../../types'
 import { TargetChainIdContext } from '../useTargetChainIdContext'
 
 export function useTradeCallback(tradeComputed: TradeComputed<SwapBancorRequest> | null, gasConfig?: GasOptionConfig) {
     const { targetChainId: chainId } = TargetChainIdContext.useContainer()
-    const web3 = useWeb3({ chainId })
-    const account = useAccount()
+    const web3 = useWeb3(NetworkPluginID.PLUGIN_EVM, { chainId })
+    const account = useAccount(NetworkPluginID.PLUGIN_EVM)
 
     const trade: SwapBancorRequest | null = useMemo(() => {
         if (!account || !tradeComputed?.trade_) return null
@@ -18,7 +20,7 @@ export function useTradeCallback(tradeComputed: TradeComputed<SwapBancorRequest>
     }, [account, tradeComputed])
 
     return useAsyncFn(async () => {
-        if (!account || !trade) {
+        if (!account || !trade || !web3) {
             return
         }
 
diff --git a/packages/mask/src/plugins/Trader/trader/bancor/useTradeComputed.ts b/packages/mask/src/plugins/Trader/trader/bancor/useTradeComputed.ts
index 1364e5ec4fd7..58e8cc965bcc 100644
--- a/packages/mask/src/plugins/Trader/trader/bancor/useTradeComputed.ts
+++ b/packages/mask/src/plugins/Trader/trader/bancor/useTradeComputed.ts
@@ -1,13 +1,12 @@
 import { useMemo } from 'react'
-import type { FungibleTokenDetailed } from '@masknet/web3-shared-evm'
-import { rightShift, ZERO } from '@masknet/web3-shared-base'
+import { FungibleToken, rightShift, ZERO } from '@masknet/web3-shared-base'
 import type { SwapBancorRequest, TradeComputed, TradeStrategy } from '../../types'
-
+import type { SchemaType, ChainId } from '@masknet/web3-shared-evm'
 export function useTradeComputed(
     trade: SwapBancorRequest | null,
     strategy: TradeStrategy,
-    inputToken?: FungibleTokenDetailed,
-    outputToken?: FungibleTokenDetailed,
+    inputToken?: FungibleToken<ChainId, SchemaType.Native | SchemaType.ERC20>,
+    outputToken?: FungibleToken<ChainId, SchemaType.Native | SchemaType.ERC20>,
 ) {
     return useMemo(() => {
         if (!trade) return null
diff --git a/packages/mask/src/plugins/Trader/trader/bancor/useTradeGasLimit.ts b/packages/mask/src/plugins/Trader/trader/bancor/useTradeGasLimit.ts
index 36e3e43e97e1..9dc76f8d8a7e 100644
--- a/packages/mask/src/plugins/Trader/trader/bancor/useTradeGasLimit.ts
+++ b/packages/mask/src/plugins/Trader/trader/bancor/useTradeGasLimit.ts
@@ -2,15 +2,16 @@ import { useMemo } from 'react'
 import { useAsync } from 'react-use'
 import type { AsyncState } from 'react-use/lib/useAsyncFn'
 import { pick } from 'lodash-unified'
-import { useAccount, useWeb3 } from '@masknet/web3-shared-evm'
 import type { SwapBancorRequest, TradeComputed } from '../../types'
 import { TargetChainIdContext } from '../useTargetChainIdContext'
 import { PluginTraderRPC } from '../../messages'
+import { useAccount, useWeb3 } from '@masknet/plugin-infra/web3'
+import { NetworkPluginID } from '@masknet/web3-shared-base'
 
 export function useTradeGasLimit(tradeComputed: TradeComputed<SwapBancorRequest> | null): AsyncState<number> {
     const { targetChainId } = TargetChainIdContext.useContainer()
-    const account = useAccount()
-    const web3 = useWeb3({ chainId: targetChainId })
+    const account = useAccount(NetworkPluginID.PLUGIN_EVM)
+    const web3 = useWeb3(NetworkPluginID.PLUGIN_EVM, { chainId: targetChainId })
 
     const trade: SwapBancorRequest | null = useMemo(() => {
         if (!account || !tradeComputed?.trade_) return null
@@ -18,7 +19,7 @@ export function useTradeGasLimit(tradeComputed: TradeComputed<SwapBancorRequest>
     }, [account, tradeComputed])
 
     return useAsync(async () => {
-        if (!account || !trade) return 0
+        if (!account || !trade || !web3) return 0
 
         const [data, err] = await PluginTraderRPC.swapTransactionBancor(trade)
 
diff --git a/packages/mask/src/plugins/Trader/trader/blocks/useLatestBlockNumber.ts b/packages/mask/src/plugins/Trader/trader/blocks/useLatestBlockNumber.ts
index 3ef2c33c332f..fc627ed48253 100644
--- a/packages/mask/src/plugins/Trader/trader/blocks/useLatestBlockNumber.ts
+++ b/packages/mask/src/plugins/Trader/trader/blocks/useLatestBlockNumber.ts
@@ -1,6 +1,8 @@
 import { useAsyncRetry } from 'react-use'
 import { getPastTimestamps } from '../../helpers/blocks'
 import { PluginTraderRPC } from '../../messages'
+import { useChainId } from '@masknet/plugin-infra/web3'
+import { NetworkPluginID } from '@masknet/web3-shared-base'
 
 /**
  * The latest block numbers (ethereum)
@@ -8,8 +10,9 @@ import { PluginTraderRPC } from '../../messages'
  * @param size the max size of each subgraph request can be returned
  */
 export function useLatestBlockNumbers(duration: number, size = 50) {
+    const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
     return useAsyncRetry(async () => {
         const timestamps = getPastTimestamps(duration, size)
-        return PluginTraderRPC.fetchBlockNumbersByTimestamps(timestamps)
+        return PluginTraderRPC.fetchBlockNumbersByTimestamps(chainId, timestamps)
     }, [])
 }
diff --git a/packages/mask/src/plugins/Trader/trader/dodo/useTrade.ts b/packages/mask/src/plugins/Trader/trader/dodo/useTrade.ts
index 79020852c220..dcfcc698e68b 100644
--- a/packages/mask/src/plugins/Trader/trader/dodo/useTrade.ts
+++ b/packages/mask/src/plugins/Trader/trader/dodo/useTrade.ts
@@ -1,7 +1,7 @@
 import {
-    FungibleTokenDetailed,
+    ChainId,
     isNativeTokenAddress,
-    useAccount,
+    SchemaType,
     useRPCConstants,
     useTokenConstants,
     useTraderConstants,
@@ -11,55 +11,60 @@ import type { SwapRouteData, TradeStrategy } from '../../types'
 import { useSlippageTolerance } from './useSlippageTolerance'
 import { first } from 'lodash-unified'
 import { TargetChainIdContext } from '../useTargetChainIdContext'
-import { useDoubleBlockBeatRetry } from '@masknet/plugin-infra/web3'
+import { useAccount, useDoubleBlockBeatRetry } from '@masknet/plugin-infra/web3'
 import type { AsyncStateRetry } from 'react-use/lib/useAsyncRetry'
+import { FungibleToken, NetworkPluginID } from '@masknet/web3-shared-base'
 
 export function useTrade(
     strategy: TradeStrategy,
     inputAmount: string,
     outputAmount: string,
-    inputToken?: FungibleTokenDetailed,
-    outputToken?: FungibleTokenDetailed,
+    inputToken?: FungibleToken<ChainId, SchemaType.Native | SchemaType.ERC20>,
+    outputToken?: FungibleToken<ChainId, SchemaType.Native | SchemaType.ERC20>,
     temporarySlippage?: number,
 ): AsyncStateRetry<SwapRouteData | null> {
     const slippageSetting = useSlippageTolerance()
     const slippage = temporarySlippage || slippageSetting
     const { targetChainId: chainId } = TargetChainIdContext.useContainer()
     const { NATIVE_TOKEN_ADDRESS } = useTokenConstants(chainId)
-    const { RPC } = useRPCConstants(chainId)
-    const providerURL = first(RPC)
+    const { RPC_URLS } = useRPCConstants(chainId)
+    const providerURL = first(RPC_URLS)
     const { DODO_ETH_ADDRESS } = useTraderConstants(chainId)
-    const account = useAccount()
+    const account = useAccount(NetworkPluginID.PLUGIN_EVM)
 
-    return useDoubleBlockBeatRetry(async () => {
-        if (!inputToken || !outputToken) return null
-        if (inputAmount === '0') return null
-        const sellToken = isNativeTokenAddress(inputToken)
-            ? { ...inputToken, address: DODO_ETH_ADDRESS ?? '' }
-            : inputToken
-        const buyToken = isNativeTokenAddress(outputToken)
-            ? { ...outputToken, address: DODO_ETH_ADDRESS ?? '' }
-            : outputToken
-        return PluginTraderRPC.swapRoute({
-            isNativeSellToken: isNativeTokenAddress(inputToken),
-            fromToken: sellToken,
-            toToken: buyToken,
-            fromAmount: inputAmount,
-            slippage: slippage / 100,
-            userAddr: account,
-            rpc: providerURL,
+    return useDoubleBlockBeatRetry(
+        NetworkPluginID.PLUGIN_EVM,
+        async () => {
+            if (!inputToken || !outputToken) return null
+            if (inputAmount === '0') return null
+            const sellToken = isNativeTokenAddress(inputToken)
+                ? { ...inputToken, address: DODO_ETH_ADDRESS ?? '' }
+                : inputToken
+            const buyToken = isNativeTokenAddress(outputToken)
+                ? { ...outputToken, address: DODO_ETH_ADDRESS ?? '' }
+                : outputToken
+            return PluginTraderRPC.swapRoute({
+                isNativeSellToken: isNativeTokenAddress(inputToken),
+                fromToken: sellToken,
+                toToken: buyToken,
+                fromAmount: inputAmount,
+                slippage: slippage / 100,
+                userAddr: account,
+                rpc: providerURL,
+                chainId,
+            })
+        },
+        [
+            NATIVE_TOKEN_ADDRESS,
+            strategy,
+            inputAmount,
+            outputAmount,
+            inputToken?.address,
+            outputToken?.address,
+            slippage,
+            account,
+            providerURL,
             chainId,
-        })
-    }, [
-        NATIVE_TOKEN_ADDRESS,
-        strategy,
-        inputAmount,
-        outputAmount,
-        inputToken?.address,
-        outputToken?.address,
-        slippage,
-        account,
-        providerURL,
-        chainId,
-    ])
+        ],
+    )
 }
diff --git a/packages/mask/src/plugins/Trader/trader/dodo/useTradeCallback.ts b/packages/mask/src/plugins/Trader/trader/dodo/useTradeCallback.ts
index ad41ea9da640..2e386417945a 100644
--- a/packages/mask/src/plugins/Trader/trader/dodo/useTradeCallback.ts
+++ b/packages/mask/src/plugins/Trader/trader/dodo/useTradeCallback.ts
@@ -1,4 +1,4 @@
-import { GasOptionConfig, useAccount, useWeb3 } from '@masknet/web3-shared-evm'
+import { useAccount, useWeb3 } from '@masknet/plugin-infra/web3'
 import stringify from 'json-stable-stringify'
 import { pick } from 'lodash-unified'
 import { useMemo } from 'react'
@@ -6,14 +6,16 @@ import { useAsyncFn } from 'react-use'
 import type { TransactionConfig } from 'web3-core'
 import type { SwapRouteSuccessResponse, TradeComputed } from '../../types'
 import { TargetChainIdContext } from '../useTargetChainIdContext'
+import { NetworkPluginID } from '@masknet/web3-shared-base'
+import type { GasOptionConfig } from '@masknet/web3-shared-evm'
 
 export function useTradeCallback(
     tradeComputed: TradeComputed<SwapRouteSuccessResponse> | null,
     gasConfig?: GasOptionConfig,
 ) {
-    const account = useAccount()
     const { targetChainId: chainId } = TargetChainIdContext.useContainer()
-    const web3 = useWeb3({ chainId })
+    const account = useAccount(NetworkPluginID.PLUGIN_EVM)
+    const web3 = useWeb3(NetworkPluginID.PLUGIN_EVM, { chainId })
 
     // compose transaction config
     const config = useMemo(() => {
@@ -26,7 +28,7 @@ export function useTradeCallback(
 
     return useAsyncFn(async () => {
         // validate config
-        if (!account || !config) {
+        if (!account || !config || !web3) {
             return
         }
 
diff --git a/packages/mask/src/plugins/Trader/trader/dodo/useTradeComputed.ts b/packages/mask/src/plugins/Trader/trader/dodo/useTradeComputed.ts
index 28cceab06655..3b36dd89e9e0 100644
--- a/packages/mask/src/plugins/Trader/trader/dodo/useTradeComputed.ts
+++ b/packages/mask/src/plugins/Trader/trader/dodo/useTradeComputed.ts
@@ -1,14 +1,14 @@
 import BigNumber from 'bignumber.js'
 import { useMemo } from 'react'
-import type { FungibleTokenDetailed } from '@masknet/web3-shared-evm'
-import { rightShift, ZERO } from '@masknet/web3-shared-base'
+import { FungibleToken, rightShift, ZERO } from '@masknet/web3-shared-base'
 import { SwapRouteData, TradeComputed, TradeStrategy } from '../../types'
+import type { ChainId, SchemaType } from '@masknet/web3-shared-evm'
 
 export function useTradeComputed(
     trade: SwapRouteData | null,
     strategy: TradeStrategy,
-    inputToken?: FungibleTokenDetailed,
-    outputToken?: FungibleTokenDetailed,
+    inputToken?: FungibleToken<ChainId, SchemaType.Native | SchemaType.ERC20>,
+    outputToken?: FungibleToken<ChainId, SchemaType.Native | SchemaType.ERC20>,
 ) {
     return useMemo(() => {
         if (!trade) return null
diff --git a/packages/mask/src/plugins/Trader/trader/dodo/useTradeGasLimit.ts b/packages/mask/src/plugins/Trader/trader/dodo/useTradeGasLimit.ts
index 7d366ffc0877..69629c515ce5 100644
--- a/packages/mask/src/plugins/Trader/trader/dodo/useTradeGasLimit.ts
+++ b/packages/mask/src/plugins/Trader/trader/dodo/useTradeGasLimit.ts
@@ -1,16 +1,17 @@
-import type { SwapRouteData, TradeComputed } from '../../types'
 import { useMemo } from 'react'
-import { useAccount, useWeb3 } from '@masknet/web3-shared-evm'
-import { TargetChainIdContext } from '../useTargetChainIdContext'
+import { useAsync } from 'react-use'
 import { pick } from 'lodash-unified'
+import type { SwapRouteData, TradeComputed } from '../../types'
+import { TargetChainIdContext } from '../useTargetChainIdContext'
 import type { TransactionConfig } from 'web3-core'
-import { useAsync } from 'react-use'
 import type { AsyncState } from 'react-use/lib/useAsyncFn'
+import { NetworkPluginID } from '@masknet/web3-shared-base'
+import { useAccount, useWeb3 } from '@masknet/plugin-infra/web3'
 
 export function useTradeGasLimit(tradeComputed: TradeComputed<SwapRouteData> | null): AsyncState<number> {
     const { targetChainId } = TargetChainIdContext.useContainer()
-    const web3 = useWeb3({ chainId: targetChainId })
-    const account = useAccount()
+    const web3 = useWeb3(NetworkPluginID.PLUGIN_EVM, { chainId: targetChainId })
+    const account = useAccount(NetworkPluginID.PLUGIN_EVM)
     const config = useMemo(() => {
         if (!account || !tradeComputed?.trade_) return null
         return {
@@ -20,7 +21,7 @@ export function useTradeGasLimit(tradeComputed: TradeComputed<SwapRouteData> | n
     }, [account, tradeComputed])
 
     return useAsync(async () => {
-        if (!config) return 0
+        if (!config || !web3) return 0
         return web3.eth.estimateGas(config)
     }, [config, web3])
 }
diff --git a/packages/mask/src/plugins/Trader/trader/native/useTrade.ts b/packages/mask/src/plugins/Trader/trader/native/useTrade.ts
index f3d4188b5311..1171378eb17a 100644
--- a/packages/mask/src/plugins/Trader/trader/native/useTrade.ts
+++ b/packages/mask/src/plugins/Trader/trader/native/useTrade.ts
@@ -1,8 +1,12 @@
 import { useAsyncRetry } from 'react-use'
-import { EthereumTokenType, FungibleTokenDetailed, isSameAddress, useTokenConstants } from '@masknet/web3-shared-evm'
+import { FungibleToken, isSameAddress } from '@masknet/web3-shared-base'
+import { ChainId, SchemaType, useTokenConstants } from '@masknet/web3-shared-evm'
 import { TargetChainIdContext } from '../useTargetChainIdContext'
 
-export function useTrade(inputToken?: FungibleTokenDetailed, outputToken?: FungibleTokenDetailed) {
+export function useTrade(
+    inputToken?: FungibleToken<ChainId, SchemaType.Native | SchemaType.ERC20>,
+    outputToken?: FungibleToken<ChainId, SchemaType.Native | SchemaType.ERC20>,
+) {
     const { targetChainId } = TargetChainIdContext.useContainer()
     const { WNATIVE_ADDRESS } = useTokenConstants(targetChainId)
 
@@ -10,7 +14,7 @@ export function useTrade(inputToken?: FungibleTokenDetailed, outputToken?: Fungi
     return useAsyncRetry(async () => {
         if (!inputToken || !outputToken) return false
         // none of the tokens is native token
-        if (inputToken.type !== EthereumTokenType.Native && outputToken.type !== EthereumTokenType.Native) return false
+        if (inputToken.schema !== SchemaType.Native && outputToken.schema !== SchemaType.Native) return false
         // none of the tokens is wrapped native token
         if (!isSameAddress(inputToken.address, WNATIVE_ADDRESS) && !isSameAddress(outputToken.address, WNATIVE_ADDRESS))
             return false
diff --git a/packages/mask/src/plugins/Trader/trader/native/useTradeCallback.ts b/packages/mask/src/plugins/Trader/trader/native/useTradeCallback.ts
index 55dcbe295763..9163d4298326 100644
--- a/packages/mask/src/plugins/Trader/trader/native/useTradeCallback.ts
+++ b/packages/mask/src/plugins/Trader/trader/native/useTradeCallback.ts
@@ -1,5 +1,6 @@
-import { EthereumTokenType, GasOptionConfig, useNativeTokenWrapperCallback } from '@masknet/web3-shared-evm'
 import { useAsyncFn } from 'react-use'
+import { useNativeTokenWrapperCallback } from '@masknet/plugin-infra/web3-evm'
+import { SchemaType, GasOptionConfig } from '@masknet/web3-shared-evm'
 import { TradeComputed, TradeStrategy } from '../../types'
 import type { NativeTokenWrapper } from './useTradeComputed'
 
@@ -15,8 +16,8 @@ export function useTradeCallback(trade: TradeComputed<NativeTokenWrapper> | null
 
         let result: string | undefined
         if (
-            (trade.strategy === TradeStrategy.ExactIn && trade.inputToken.type === EthereumTokenType.Native) ||
-            (trade.strategy === TradeStrategy.ExactOut && trade.outputToken.type === EthereumTokenType.Native)
+            (trade.strategy === TradeStrategy.ExactIn && trade.inputToken.schema === SchemaType.Native) ||
+            (trade.strategy === TradeStrategy.ExactOut && trade.outputToken.schema === SchemaType.Native)
         ) {
             result = await wrapCallback(tradeAmount, gasConfig)
         } else {
diff --git a/packages/mask/src/plugins/Trader/trader/native/useTradeComputed.ts b/packages/mask/src/plugins/Trader/trader/native/useTradeComputed.ts
index cae847904236..6c9fbac2124d 100644
--- a/packages/mask/src/plugins/Trader/trader/native/useTradeComputed.ts
+++ b/packages/mask/src/plugins/Trader/trader/native/useTradeComputed.ts
@@ -1,7 +1,7 @@
 import { useMemo } from 'react'
 import BigNumber from 'bignumber.js'
-import { EthereumTokenType, FungibleTokenDetailed } from '@masknet/web3-shared-evm'
-import { ZERO } from '@masknet/web3-shared-base'
+import { ChainId, SchemaType } from '@masknet/web3-shared-evm'
+import { FungibleToken, ZERO } from '@masknet/web3-shared-base'
 import { TradeComputed, TradeStrategy } from '../../types'
 
 export interface NativeTokenWrapper {
@@ -21,8 +21,8 @@ export function useTradeComputed(
     strategy: TradeStrategy,
     inputAmount: string,
     outputAmount: string,
-    inputToken?: FungibleTokenDetailed,
-    outputToken?: FungibleTokenDetailed,
+    inputToken?: FungibleToken<ChainId, SchemaType.Native | SchemaType.ERC20>,
+    outputToken?: FungibleToken<ChainId, SchemaType.Native | SchemaType.ERC20>,
 ) {
     return useMemo((): TradeComputed<NativeTokenWrapper> | null => {
         if (!isNativeTokenWrapper) return null
@@ -46,8 +46,8 @@ export function useTradeComputed(
             fee: ZERO,
             trade_: {
                 isWrap:
-                    (strategy === TradeStrategy.ExactIn && inputToken?.type === EthereumTokenType.Native) ||
-                    (strategy === TradeStrategy.ExactOut && outputToken?.type === EthereumTokenType.Native),
+                    (strategy === TradeStrategy.ExactIn && inputToken?.schema === SchemaType.Native) ||
+                    (strategy === TradeStrategy.ExactOut && outputToken?.schema === SchemaType.Native),
                 isNativeTokenWrapper,
             },
         }
diff --git a/packages/mask/src/plugins/Trader/trader/openocean/useTrade.ts b/packages/mask/src/plugins/Trader/trader/openocean/useTrade.ts
index ae5ecd5bf934..41156e7292e3 100644
--- a/packages/mask/src/plugins/Trader/trader/openocean/useTrade.ts
+++ b/packages/mask/src/plugins/Trader/trader/openocean/useTrade.ts
@@ -1,8 +1,8 @@
 import { first } from 'lodash-unified'
 import {
-    FungibleTokenDetailed,
+    ChainId,
     isNativeTokenAddress,
-    useAccount,
+    SchemaType,
     useRPCConstants,
     useTokenConstants,
     useTraderConstants,
@@ -12,56 +12,61 @@ import type { SwapOOData, TradeStrategy } from '../../types'
 import { TargetChainIdContext } from '../useTargetChainIdContext'
 import { useSlippageTolerance } from './useSlippageTolerance'
 import { OPENOCEAN_SUPPORTED_CHAINS } from './constants'
-import { useDoubleBlockBeatRetry } from '@masknet/plugin-infra/web3'
+import { useAccount, useDoubleBlockBeatRetry } from '@masknet/plugin-infra/web3'
 import type { AsyncStateRetry } from 'react-use/lib/useAsyncRetry'
+import { FungibleToken, NetworkPluginID } from '@masknet/web3-shared-base'
 
 export function useTrade(
     strategy: TradeStrategy,
     inputAmount: string,
     outputAmount: string,
-    inputToken?: FungibleTokenDetailed,
-    outputToken?: FungibleTokenDetailed,
+    inputToken?: FungibleToken<ChainId, SchemaType.Native | SchemaType.ERC20>,
+    outputToken?: FungibleToken<ChainId, SchemaType.Native | SchemaType.ERC20>,
     temporarySlippage?: number,
 ): AsyncStateRetry<SwapOOData | null> {
     const { NATIVE_TOKEN_ADDRESS } = useTokenConstants()
     const slippageSetting = useSlippageTolerance()
     const slippage = temporarySlippage || slippageSetting
     const { targetChainId } = TargetChainIdContext.useContainer()
-    const { RPC } = useRPCConstants(targetChainId)
-    const providerURL = first(RPC)
+    const { RPC_URLS } = useRPCConstants(targetChainId)
+    const providerURL = first(RPC_URLS)
     const { OPENOCEAN_ETH_ADDRESS } = useTraderConstants(targetChainId)
-    const account = useAccount()
+    const account = useAccount(NetworkPluginID.PLUGIN_EVM)
 
-    return useDoubleBlockBeatRetry(async () => {
-        if (!OPENOCEAN_SUPPORTED_CHAINS.includes(targetChainId)) return null
-        if (!inputToken || !outputToken) return null
-        if (inputAmount === '0') return null
-        const sellToken = isNativeTokenAddress(inputToken.address)
-            ? { ...inputToken, address: OPENOCEAN_ETH_ADDRESS ?? '' }
-            : inputToken
-        const buyToken = isNativeTokenAddress(outputToken.address)
-            ? { ...outputToken, address: OPENOCEAN_ETH_ADDRESS ?? '' }
-            : outputToken
-        return PluginTraderRPC.swapOO({
-            isNativeSellToken: isNativeTokenAddress(inputToken.address),
-            fromToken: sellToken,
-            toToken: buyToken,
-            fromAmount: inputAmount,
+    return useDoubleBlockBeatRetry(
+        NetworkPluginID.PLUGIN_EVM,
+        async () => {
+            if (!OPENOCEAN_SUPPORTED_CHAINS.includes(targetChainId)) return null
+            if (!inputToken || !outputToken) return null
+            if (inputAmount === '0') return null
+            const sellToken = isNativeTokenAddress(inputToken.address)
+                ? { ...inputToken, address: OPENOCEAN_ETH_ADDRESS ?? '' }
+                : inputToken
+            const buyToken = isNativeTokenAddress(outputToken.address)
+                ? { ...outputToken, address: OPENOCEAN_ETH_ADDRESS ?? '' }
+                : outputToken
+            return PluginTraderRPC.swapOO({
+                isNativeSellToken: isNativeTokenAddress(inputToken.address),
+                fromToken: sellToken,
+                toToken: buyToken,
+                fromAmount: inputAmount,
+                slippage,
+                userAddr: account,
+                rpc: providerURL,
+                chainId: targetChainId,
+            })
+        },
+        [
+            NATIVE_TOKEN_ADDRESS,
+            strategy,
+            inputAmount,
+            outputAmount,
+            inputToken?.address,
+            outputToken?.address,
             slippage,
-            userAddr: account,
-            rpc: providerURL,
-            chainId: targetChainId,
-        })
-    }, [
-        NATIVE_TOKEN_ADDRESS,
-        strategy,
-        inputAmount,
-        outputAmount,
-        inputToken?.address,
-        outputToken?.address,
-        slippage,
-        account,
-        providerURL,
-        targetChainId,
-    ])
+            account,
+            providerURL,
+            targetChainId,
+        ],
+    )
 }
diff --git a/packages/mask/src/plugins/Trader/trader/openocean/useTradeCallback.ts b/packages/mask/src/plugins/Trader/trader/openocean/useTradeCallback.ts
index d624ef0a320e..af16b1aa1588 100644
--- a/packages/mask/src/plugins/Trader/trader/openocean/useTradeCallback.ts
+++ b/packages/mask/src/plugins/Trader/trader/openocean/useTradeCallback.ts
@@ -1,18 +1,20 @@
-import { GasOptionConfig, useAccount, useChainId, useWeb3 } from '@masknet/web3-shared-evm'
 import stringify from 'json-stable-stringify'
 import { pick } from 'lodash-unified'
 import { useMemo } from 'react'
 import { useAsyncFn } from 'react-use'
 import type { TransactionConfig } from 'web3-core'
+import type { GasOptionConfig } from '@masknet/web3-shared-evm'
 import type { SwapOOSuccessResponse, TradeComputed } from '../../types'
+import { NetworkPluginID } from '@masknet/web3-shared-base'
+import { useAccount, useChainId, useWeb3 } from '@masknet/plugin-infra/web3'
 
 export function useTradeCallback(
     tradeComputed: TradeComputed<SwapOOSuccessResponse> | null,
     gasConfig?: GasOptionConfig,
 ) {
-    const web3 = useWeb3()
-    const account = useAccount()
-    const chainId = useChainId()
+    const web3 = useWeb3(NetworkPluginID.PLUGIN_EVM)
+    const account = useAccount(NetworkPluginID.PLUGIN_EVM)
+    const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
 
     // compose transaction config
     const config = useMemo(() => {
@@ -25,7 +27,7 @@ export function useTradeCallback(
 
     return useAsyncFn(async () => {
         // validate config
-        if (!account || !config) {
+        if (!account || !config || !web3) {
             return
         }
 
diff --git a/packages/mask/src/plugins/Trader/trader/openocean/useTradeComputed.ts b/packages/mask/src/plugins/Trader/trader/openocean/useTradeComputed.ts
index 01475f4b4f9b..6271a49fee26 100644
--- a/packages/mask/src/plugins/Trader/trader/openocean/useTradeComputed.ts
+++ b/packages/mask/src/plugins/Trader/trader/openocean/useTradeComputed.ts
@@ -1,14 +1,14 @@
 import BigNumber from 'bignumber.js'
 import { useMemo } from 'react'
-import type { FungibleTokenDetailed } from '@masknet/web3-shared-evm'
-import { ZERO, pow10 } from '@masknet/web3-shared-base'
+import { ZERO, pow10, FungibleToken } from '@masknet/web3-shared-base'
 import { SwapOOData, TradeComputed, TradeStrategy } from '../../types'
+import type { ChainId, SchemaType } from '@masknet/web3-shared-evm'
 
 export function useTradeComputed(
     trade: SwapOOData | null,
     strategy: TradeStrategy,
-    inputToken?: FungibleTokenDetailed,
-    outputToken?: FungibleTokenDetailed,
+    inputToken?: FungibleToken<ChainId, SchemaType>,
+    outputToken?: FungibleToken<ChainId, SchemaType>,
 ) {
     return useMemo(() => {
         if (!trade) return null
diff --git a/packages/mask/src/plugins/Trader/trader/openocean/useTradeGasLimit.ts b/packages/mask/src/plugins/Trader/trader/openocean/useTradeGasLimit.ts
index 4be78c1c26f9..69d29e5b9538 100644
--- a/packages/mask/src/plugins/Trader/trader/openocean/useTradeGasLimit.ts
+++ b/packages/mask/src/plugins/Trader/trader/openocean/useTradeGasLimit.ts
@@ -1,18 +1,19 @@
-import type { SwapOOData, TradeComputed } from '../../types'
 import { useMemo } from 'react'
-import { useAccount, useWeb3 } from '@masknet/web3-shared-evm'
-import { TargetChainIdContext } from '../useTargetChainIdContext'
-import { pick } from 'lodash-unified'
-import type { TransactionConfig } from 'web3-core'
 import { useAsync } from 'react-use'
 import type { AsyncState } from 'react-use/lib/useAsyncFn'
+import { pick } from 'lodash-unified'
 import BigNumber from 'bignumber.js'
+import type { TransactionConfig } from 'web3-core'
+import type { SwapOOData, TradeComputed } from '../../types'
+import { TargetChainIdContext } from '../useTargetChainIdContext'
+import { useAccount, useWeb3 } from '@masknet/plugin-infra/web3'
+import { NetworkPluginID } from '@masknet/web3-shared-base'
 
 export function useTradeGasLimit(tradeComputed: TradeComputed<SwapOOData> | null): AsyncState<number> {
     const { targetChainId } = TargetChainIdContext.useContainer()
 
-    const web3 = useWeb3({ chainId: targetChainId })
-    const account = useAccount()
+    const web3 = useWeb3(NetworkPluginID.PLUGIN_EVM, { chainId: targetChainId })
+    const account = useAccount(NetworkPluginID.PLUGIN_EVM)
     const config = useMemo(() => {
         if (!account || !tradeComputed?.trade_) return null
         return {
@@ -23,7 +24,7 @@ export function useTradeGasLimit(tradeComputed: TradeComputed<SwapOOData> | null
 
     return useAsync(async () => {
         if (tradeComputed?.trade_?.estimatedGas) return new BigNumber(tradeComputed.trade_.estimatedGas).toNumber()
-        if (!config) return 0
+        if (!config || !web3) return 0
         return web3.eth.estimateGas(config)
     }, [config, web3, tradeComputed?.trade_?.estimatedGas])
 }
diff --git a/packages/mask/src/plugins/Trader/trader/uniswap/useAllCommonPairs.ts b/packages/mask/src/plugins/Trader/trader/uniswap/useAllCommonPairs.ts
index ac7928175153..851a6c8f49ee 100644
--- a/packages/mask/src/plugins/Trader/trader/uniswap/useAllCommonPairs.ts
+++ b/packages/mask/src/plugins/Trader/trader/uniswap/useAllCommonPairs.ts
@@ -2,16 +2,16 @@ import { useMemo } from 'react'
 import { flatMap } from 'lodash-unified'
 import type { Pair } from '@uniswap/v2-sdk'
 import type { Currency, Token } from '@uniswap/sdk-core'
-import { isChainIdValid } from '@masknet/web3-shared-evm'
 import { toUniswapToken } from '../../helpers'
 import { PairState, usePairs } from './usePairs'
 import type { TradeProvider } from '@masknet/public-api'
 import { useGetTradeContext } from '../useGetTradeContext'
 import { TargetChainIdContext } from '../useTargetChainIdContext'
+import { chainResolver } from '@masknet/web3-shared-evm'
 
 export function useAllCurrencyCombinations(tradeProvider: TradeProvider, currencyA?: Currency, currencyB?: Currency) {
     const { targetChainId: chainId } = TargetChainIdContext.useContainer()
-    const chainIdValid = isChainIdValid(chainId)
+    const chainIdValid = chainResolver.isValid(chainId)
     const context = useGetTradeContext(tradeProvider)
 
     const [tokenA, tokenB] = chainIdValid ? [currencyA?.wrapped, currencyB?.wrapped] : [undefined, undefined]
diff --git a/packages/mask/src/plugins/Trader/trader/uniswap/usePairs.ts b/packages/mask/src/plugins/Trader/trader/uniswap/usePairs.ts
index 3582a101dfe5..b2bbf72b0dc5 100644
--- a/packages/mask/src/plugins/Trader/trader/uniswap/usePairs.ts
+++ b/packages/mask/src/plugins/Trader/trader/uniswap/usePairs.ts
@@ -4,13 +4,13 @@ import { numberToHex } from 'web3-utils'
 import { Pair } from '@uniswap/v2-sdk'
 import { CurrencyAmount, Token } from '@uniswap/sdk-core'
 import { EMPTY_LIST } from '@masknet/shared-base'
-import { useMultipleContractSingleData } from '@masknet/web3-shared-evm'
 import { getPairAddress } from '../../helpers'
 import { usePairContracts } from '../../contracts/uniswap/usePairContract'
 import type { TradeProvider } from '@masknet/public-api'
 import { useGetTradeContext } from '../useGetTradeContext'
 import { TargetChainIdContext } from '../useTargetChainIdContext'
 import { useTargetBlockNumber } from '../useTargetBlockNumber'
+import { useMultipleContractSingleData } from '@masknet/plugin-infra/web3-evm'
 
 export enum PairState {
     NOT_EXISTS = 0,
@@ -39,7 +39,7 @@ export function usePairs(tradeProvider: TradeProvider, tokenPairs: readonly Toke
     const { value: targetBlockNumber } = useTargetBlockNumber(targetChainId)
 
     // get reserves for each pair
-    const contracts = usePairContracts([...new Set(listOfPairAddress.filter(Boolean) as string[])], targetChainId)
+    const contracts = usePairContracts(targetChainId, [...new Set(listOfPairAddress.filter(Boolean) as string[])])
 
     const [results, calls, _, callback] = useMultipleContractSingleData(
         contracts,
diff --git a/packages/mask/src/plugins/Trader/trader/uniswap/usePools.ts b/packages/mask/src/plugins/Trader/trader/uniswap/usePools.ts
index 5614c9170847..5d042225e765 100644
--- a/packages/mask/src/plugins/Trader/trader/uniswap/usePools.ts
+++ b/packages/mask/src/plugins/Trader/trader/uniswap/usePools.ts
@@ -2,13 +2,13 @@ import { useMemo } from 'react'
 import { useAsyncRetry } from 'react-use'
 import { computePoolAddress, Pool, FeeAmount } from '@uniswap/v3-sdk'
 import type { Token, Currency } from '@uniswap/sdk-core'
-import { MulticallStateType, useMultipleContractSingleData } from '@masknet/web3-shared-evm'
 import { usePoolContracts } from '../../contracts/uniswap/usePoolContract'
 import type { TradeProvider } from '@masknet/public-api'
 import { useGetTradeContext } from '../useGetTradeContext'
 import { TargetChainIdContext } from '../useTargetChainIdContext'
 import { useTargetBlockNumber } from '../useTargetBlockNumber'
 import { isZero } from '@masknet/web3-shared-base'
+import { MulticallStateType, useMultipleContractSingleData } from '@masknet/plugin-infra/web3-evm'
 
 export enum PoolState {
     LOADING = 0,
@@ -53,7 +53,7 @@ export function usePools(
         }
     }, [chainId, transformed, context?.FACTORY_CONTRACT_ADDRESS])
 
-    const poolContracts = usePoolContracts(poolAddresses, chainId)
+    const poolContracts = usePoolContracts(chainId, poolAddresses)
 
     const { value: targetBlockNumber } = useTargetBlockNumber(chainId)
 
diff --git a/packages/mask/src/plugins/Trader/trader/uniswap/useTrade.ts b/packages/mask/src/plugins/Trader/trader/uniswap/useTrade.ts
index 7253bad0bb93..5065c1077513 100644
--- a/packages/mask/src/plugins/Trader/trader/uniswap/useTrade.ts
+++ b/packages/mask/src/plugins/Trader/trader/uniswap/useTrade.ts
@@ -1,18 +1,18 @@
-import type { FungibleTokenDetailed } from '@masknet/web3-shared-evm'
-import { isZero } from '@masknet/web3-shared-base'
+import { FungibleToken, isZero } from '@masknet/web3-shared-base'
 import { TradeStrategy } from '../../types'
 import { toUniswapCurrencyAmount, toUniswapCurrency } from '../../helpers'
 import { useV2BestTradeExactIn, useV2BestTradeExactOut } from './useV2BestTrade'
 import { useV3BestTradeExactIn, useV3BestTradeExactOut } from './useV3BestTrade'
 import type { TradeProvider } from '@masknet/public-api'
 import { TargetChainIdContext } from '../useTargetChainIdContext'
+import type { ChainId, SchemaType } from '@masknet/web3-shared-evm'
 
 function useTrade(
     strategy: TradeStrategy = TradeStrategy.ExactIn,
     inputAmount: string,
     outputAmount: string,
-    inputToken?: FungibleTokenDetailed,
-    outputToken?: FungibleTokenDetailed,
+    inputToken?: FungibleToken<ChainId, SchemaType.Native | SchemaType.ERC20>,
+    outputToken?: FungibleToken<ChainId, SchemaType.Native | SchemaType.ERC20>,
 ) {
     const isExactIn = strategy === TradeStrategy.ExactIn
     const isTradable = !isZero(inputAmount) || !isZero(outputAmount)
@@ -44,8 +44,8 @@ export function useV2Trade(
     strategy: TradeStrategy = TradeStrategy.ExactIn,
     inputAmount: string,
     outputAmount: string,
-    inputToken?: FungibleTokenDetailed,
-    outputToken?: FungibleTokenDetailed,
+    inputToken?: FungibleToken<ChainId, SchemaType.Native | SchemaType.ERC20>,
+    outputToken?: FungibleToken<ChainId, SchemaType.Native | SchemaType.ERC20>,
 ) {
     const { isNotAvailable, isExactIn, tradeAmount, inputCurrency, outputCurrency } = useTrade(
         strategy,
@@ -84,8 +84,8 @@ export function useV3Trade(
     strategy: TradeStrategy = TradeStrategy.ExactIn,
     inputAmount: string,
     outputAmount: string,
-    inputToken?: FungibleTokenDetailed,
-    outputToken?: FungibleTokenDetailed,
+    inputToken?: FungibleToken<ChainId, SchemaType.Native | SchemaType.ERC20>,
+    outputToken?: FungibleToken<ChainId, SchemaType.Native | SchemaType.ERC20>,
 ) {
     const { isNotAvailable, isExactIn, tradeAmount, inputCurrency, outputCurrency } = useTrade(
         strategy,
diff --git a/packages/mask/src/plugins/Trader/trader/uniswap/useTradeCallback.ts b/packages/mask/src/plugins/Trader/trader/uniswap/useTradeCallback.ts
index 2c7f592dd1a4..d315c7716d91 100644
--- a/packages/mask/src/plugins/Trader/trader/uniswap/useTradeCallback.ts
+++ b/packages/mask/src/plugins/Trader/trader/uniswap/useTradeCallback.ts
@@ -1,12 +1,14 @@
+import { useAsyncFn } from 'react-use'
+import BigNumber from 'bignumber.js'
 import type { TradeProvider } from '@masknet/public-api'
-import { GasOptionConfig, TransactionEventType, useAccount, useWeb3 } from '@masknet/web3-shared-evm'
 import type { SwapParameters } from '@uniswap/v2-sdk'
-import BigNumber from 'bignumber.js'
-import { useAsyncFn } from 'react-use'
+import { GasOptionConfig, TransactionEventType } from '@masknet/web3-shared-evm'
+import { useSwapParameters as useTradeParameters } from './useTradeParameters'
 import { swapErrorToUserReadableMessage } from '../../helpers'
 import type { SwapCall, Trade, TradeComputed } from '../../types'
 import { TargetChainIdContext } from '../useTargetChainIdContext'
-import { useSwapParameters as useTradeParameters } from './useTradeParameters'
+import { useAccount, useWeb3 } from '@masknet/plugin-infra/web3'
+import { NetworkPluginID } from '@masknet/web3-shared-base'
 
 interface FailedCall {
     parameters: SwapParameters
@@ -34,12 +36,12 @@ export function useTradeCallback(
     allowedSlippage?: number,
 ) {
     const { targetChainId } = TargetChainIdContext.useContainer()
-    const web3 = useWeb3({ chainId: targetChainId })
-    const account = useAccount()
+    const web3 = useWeb3(NetworkPluginID.PLUGIN_EVM, { chainId: targetChainId })
+    const account = useAccount(NetworkPluginID.PLUGIN_EVM)
     const tradeParameters = useTradeParameters(trade, tradeProvider, allowedSlippage)
 
     return useAsyncFn(async () => {
-        if (!tradeParameters.length) {
+        if (!tradeParameters.length || !web3) {
             return
         }
 
diff --git a/packages/mask/src/plugins/Trader/trader/uniswap/useTradeComputed.ts b/packages/mask/src/plugins/Trader/trader/uniswap/useTradeComputed.ts
index d882a30c6995..8d4523f25b92 100644
--- a/packages/mask/src/plugins/Trader/trader/uniswap/useTradeComputed.ts
+++ b/packages/mask/src/plugins/Trader/trader/uniswap/useTradeComputed.ts
@@ -1,5 +1,4 @@
-import type { FungibleTokenDetailed } from '@masknet/web3-shared-evm'
-import { ZERO } from '@masknet/web3-shared-base'
+import { FungibleToken, ZERO } from '@masknet/web3-shared-base'
 import { Trade as V2Trade } from '@uniswap/v2-sdk'
 import { TradeType } from '@uniswap/sdk-core'
 import {
@@ -12,11 +11,12 @@ import {
 import { Trade, TradeComputed, TradeStrategy } from '../../types'
 import { useSlippageTolerance } from './useSlippageTolerance'
 import { useTradeBreakdown } from './useTradeBreakdown'
+import type { ChainId, SchemaType } from '@masknet/web3-shared-evm'
 
 export function useTradeComputed(
     trade: Trade | null,
-    inputToken?: FungibleTokenDetailed,
-    outputToken?: FungibleTokenDetailed,
+    inputToken?: FungibleToken<ChainId, SchemaType.Native | SchemaType.ERC20>,
+    outputToken?: FungibleToken<ChainId, SchemaType.Native | SchemaType.ERC20>,
     temporarySlippage?: number,
 ): TradeComputed<Trade> | null {
     const slippageSetting = useSlippageTolerance()
diff --git a/packages/mask/src/plugins/Trader/trader/uniswap/useTradeGasLimit.ts b/packages/mask/src/plugins/Trader/trader/uniswap/useTradeGasLimit.ts
index 34845e5f4fdb..d7eed15f3055 100644
--- a/packages/mask/src/plugins/Trader/trader/uniswap/useTradeGasLimit.ts
+++ b/packages/mask/src/plugins/Trader/trader/uniswap/useTradeGasLimit.ts
@@ -1,5 +1,6 @@
 import type { Trade, TradeComputed, SwapCall } from '../../types'
-import { useAccount, useWeb3 } from '@masknet/web3-shared-evm'
+import { useAccount, useWeb3 } from '@masknet/plugin-infra/web3'
+import { NetworkPluginID } from '@masknet/web3-shared-base'
 import { useSwapParameters as useTradeParameters } from './useTradeParameters'
 import type { TradeProvider } from '@masknet/public-api'
 import { TargetChainIdContext } from '../useTargetChainIdContext'
@@ -31,11 +32,13 @@ interface FailedCall extends SwapCallEstimate {
 
 export function useTradeGasLimit(trade: TradeComputed<Trade> | null, tradeProvider: TradeProvider): AsyncState<number> {
     const { targetChainId } = TargetChainIdContext.useContainer()
-    const web3 = useWeb3({ chainId: targetChainId })
-    const account = useAccount()
+    const web3 = useWeb3(NetworkPluginID.PLUGIN_EVM, { chainId: targetChainId })
+    const account = useAccount(NetworkPluginID.PLUGIN_EVM)
     const tradeParameters = useTradeParameters(trade, tradeProvider)
 
     return useAsync(async () => {
+        if (!web3) return 0
+
         // step 1: estimate each trade parameter
         const estimatedCalls: SwapCallEstimate[] = await Promise.all(
             tradeParameters.map(async (x) => {
diff --git a/packages/mask/src/plugins/Trader/trader/uniswap/useTradeParameters.ts b/packages/mask/src/plugins/Trader/trader/uniswap/useTradeParameters.ts
index 379094e94146..8d5b055a93e2 100644
--- a/packages/mask/src/plugins/Trader/trader/uniswap/useTradeParameters.ts
+++ b/packages/mask/src/plugins/Trader/trader/uniswap/useTradeParameters.ts
@@ -3,7 +3,8 @@ import JSBI from 'jsbi'
 import { Percent, TradeType } from '@uniswap/sdk-core'
 import { Router, Trade as V2Trade } from '@uniswap/v2-sdk'
 import { SLIPPAGE_DEFAULT } from '../../constants'
-import { useAccount } from '@masknet/web3-shared-evm'
+import { useAccount } from '@masknet/plugin-infra/web3'
+import { NetworkPluginID } from '@masknet/web3-shared-base'
 import type { SwapCall, Trade, TradeComputed } from '../../types'
 import { SwapRouter } from '@uniswap/v3-sdk'
 import { useRouterV2Contract } from '../../contracts/uniswap/useRouterV2Contract'
@@ -55,12 +56,12 @@ export function useSwapParameters(
     tradeProvider?: TradeProvider,
     allowedSlippage: number = SLIPPAGE_DEFAULT, // in bips
 ) {
-    const account = useAccount()
+    const account = useAccount(NetworkPluginID.PLUGIN_EVM)
     const context = useGetTradeContext(tradeProvider)
     const { targetChainId } = TargetChainIdContext.useContainer()
     const deadline = useTransactionDeadline()
-    const routerV2Contract = useRouterV2Contract(context?.ROUTER_CONTRACT_ADDRESS, targetChainId)
-    const swapRouterContract = useSwapRouterContract(context?.ROUTER_CONTRACT_ADDRESS, targetChainId)
+    const routerV2Contract = useRouterV2Contract(targetChainId, context?.ROUTER_CONTRACT_ADDRESS)
+    const swapRouterContract = useSwapRouterContract(targetChainId, context?.ROUTER_CONTRACT_ADDRESS)
 
     return useMemo<SwapCall[]>(() => {
         if (!account || !trade?.trade_ || !deadline) return []
diff --git a/packages/mask/src/plugins/Trader/trader/uniswap/useTransactionDeadline.ts b/packages/mask/src/plugins/Trader/trader/uniswap/useTransactionDeadline.ts
index ee1685d2bcc2..830e0f2f4168 100644
--- a/packages/mask/src/plugins/Trader/trader/uniswap/useTransactionDeadline.ts
+++ b/packages/mask/src/plugins/Trader/trader/uniswap/useTransactionDeadline.ts
@@ -1,12 +1,14 @@
 import { useMemo } from 'react'
 import BigNumber from 'bignumber.js'
-import { ChainId, useCurrentBlockTimestamp } from '@masknet/web3-shared-evm'
+import { ChainId } from '@masknet/web3-shared-evm'
 import { DEFAULT_TRANSACTION_DEADLINE, L2_TRANSACTION_DEADLINE } from '../../constants'
 import { TargetChainIdContext } from '../useTargetChainIdContext'
+import { useBlockTimestamp } from '@masknet/plugin-infra/web3'
+import { NetworkPluginID } from '@masknet/web3-shared-base'
 
 export function useTransactionDeadline() {
     const { targetChainId: chainId } = TargetChainIdContext.useContainer()
-    const { value: timestamp } = useCurrentBlockTimestamp(chainId)
+    const { value: timestamp } = useBlockTimestamp(NetworkPluginID.PLUGIN_EVM, { chainId })
 
     return useMemo(() => {
         if (!timestamp) return
diff --git a/packages/mask/src/plugins/Trader/trader/uniswap/useUniswapV2Like.ts b/packages/mask/src/plugins/Trader/trader/uniswap/useUniswapV2Like.ts
index 8810653e8857..62a204ffe81e 100644
--- a/packages/mask/src/plugins/Trader/trader/uniswap/useUniswapV2Like.ts
+++ b/packages/mask/src/plugins/Trader/trader/uniswap/useUniswapV2Like.ts
@@ -1,16 +1,17 @@
-import type { FungibleTokenDetailed } from '@masknet/web3-shared-evm'
 import type { TradeProvider } from '@masknet/public-api'
-
+import type { ChainId, SchemaType } from '@masknet/web3-shared-evm'
 import { useV2Trade as useUniswapV2Trade } from './useTrade'
 import { TradeStrategy } from '../../types'
 import { useTradeComputed as useUniswapTradeComputed } from './useTradeComputed'
 import { useTradeGasLimit as useUniswapTradeGasLimit } from './useTradeGasLimit'
+import type { FungibleToken } from '@masknet/web3-shared-base'
+
 export function useUniswapV2Like(
     tradeProviders: TradeProvider[],
     traderProvider: TradeProvider,
     inputAmount_: string,
-    inputToken?: FungibleTokenDetailed,
-    outputToken?: FungibleTokenDetailed,
+    inputToken?: FungibleToken<ChainId, SchemaType.Native | SchemaType.ERC20>,
+    outputToken?: FungibleToken<ChainId, SchemaType.Native | SchemaType.ERC20>,
 ) {
     const isTrader = tradeProviders.some((x) => x === traderProvider)
     const trader_ = useUniswapV2Trade(
diff --git a/packages/mask/src/plugins/Trader/trader/uniswap/useV3BestTrade.ts b/packages/mask/src/plugins/Trader/trader/uniswap/useV3BestTrade.ts
index d4b44d4dc3af..1ecb279347af 100644
--- a/packages/mask/src/plugins/Trader/trader/uniswap/useV3BestTrade.ts
+++ b/packages/mask/src/plugins/Trader/trader/uniswap/useV3BestTrade.ts
@@ -6,10 +6,10 @@ import { Currency, CurrencyAmount, TradeType } from '@uniswap/sdk-core'
 import { encodeRouteToPath, Route, Trade } from '@uniswap/v3-sdk'
 import { useQuoterContract } from '../../contracts/uniswap/useQuoterContract'
 import { useAllV3Routes } from './useAllV3Routes'
-import { useSingleContractMultipleData } from '@masknet/web3-shared-evm'
 import { DEFAULT_MULTICALL_GAS_LIMIT } from '../../constants'
 import { TargetChainIdContext } from '../useTargetChainIdContext'
 import { useTargetBlockNumber } from '../useTargetBlockNumber'
+import { useSingleContractMultipleData } from '@masknet/plugin-infra/web3-evm'
 
 export enum V3TradeState {
     LOADING = 0,
diff --git a/packages/mask/src/plugins/Trader/trader/useAllProviderTradeContext.ts b/packages/mask/src/plugins/Trader/trader/useAllProviderTradeContext.ts
index 3e5eb2dae62d..cdff1617e00a 100644
--- a/packages/mask/src/plugins/Trader/trader/useAllProviderTradeContext.ts
+++ b/packages/mask/src/plugins/Trader/trader/useAllProviderTradeContext.ts
@@ -1,12 +1,13 @@
-import type { FungibleTokenDetailed } from '@masknet/web3-shared-evm'
 import { useReducer, useState } from 'react'
 import { useAllTradeComputed } from './useAllTradeComputed'
 import { createContainer } from 'unstated-next'
+import type { FungibleToken } from '@masknet/web3-shared-base'
+import type { ChainId, SchemaType } from '@masknet/web3-shared-evm'
 
 export interface AllProviderTradeState {
     inputAmount: string
-    inputToken?: FungibleTokenDetailed
-    outputToken?: FungibleTokenDetailed
+    inputToken?: FungibleToken<ChainId, SchemaType.Native | SchemaType.ERC20>
+    outputToken?: FungibleToken<ChainId, SchemaType.Native | SchemaType.ERC20>
     inputTokenBalance: string
     outputTokenBalance: string
 }
@@ -22,11 +23,11 @@ export enum AllProviderTradeActionType {
 export type AllProviderSwapAction =
     | {
           type: AllProviderTradeActionType.UPDATE_INPUT_TOKEN
-          token?: FungibleTokenDetailed
+          token?: FungibleToken<ChainId, SchemaType.Native | SchemaType.ERC20>
       }
     | {
           type: AllProviderTradeActionType.UPDATE_OUTPUT_TOKEN
-          token?: FungibleTokenDetailed
+          token?: FungibleToken<ChainId, SchemaType.Native | SchemaType.ERC20>
       }
     | {
           type: AllProviderTradeActionType.UPDATE_INPUT_AMOUNT
diff --git a/packages/mask/src/plugins/Trader/trader/useAllTradeComputed.ts b/packages/mask/src/plugins/Trader/trader/useAllTradeComputed.ts
index 852cb59ba64d..0d5b2407433c 100644
--- a/packages/mask/src/plugins/Trader/trader/useAllTradeComputed.ts
+++ b/packages/mask/src/plugins/Trader/trader/useAllTradeComputed.ts
@@ -1,6 +1,5 @@
 import { EMPTY_LIST } from '@masknet/shared-base'
-import type { FungibleTokenDetailed } from '@masknet/web3-shared-evm'
-import { multipliedBy, pow10 } from '@masknet/web3-shared-base'
+import { FungibleToken, multipliedBy, pow10 } from '@masknet/web3-shared-base'
 import { useTrade as useNativeTokenTrade } from './native/useTrade'
 import { useTradeComputed as useNativeTokenTradeComputed } from './native/useTradeComputed'
 import { SwapOOData, TagType, TradeInfo, TradeStrategy } from '../types'
@@ -28,11 +27,12 @@ import { useAvailableTraderProviders } from '../trending/useAvailableTraderProvi
 import { useNativeTradeGasLimit } from './useNativeTradeGasLimit'
 import { TargetChainIdContext } from './useTargetChainIdContext'
 import type { TradeComputed } from '../types'
+import type { ChainId, SchemaType } from '@masknet/web3-shared-evm'
 
 export function useAllTradeComputed(
     inputAmount: string,
-    inputToken?: FungibleTokenDetailed,
-    outputToken?: FungibleTokenDetailed,
+    inputToken?: FungibleToken<ChainId, SchemaType.Native | SchemaType.ERC20>,
+    outputToken?: FungibleToken<ChainId, SchemaType.Native | SchemaType.ERC20>,
     temporarySlippage?: number,
 ): TradeInfo[] {
     const { targetChainId } = TargetChainIdContext.useContainer()
diff --git a/packages/mask/src/plugins/Trader/trader/useNativeTradeGasLimit.ts b/packages/mask/src/plugins/Trader/trader/useNativeTradeGasLimit.ts
index 1200c61b530b..b432f4115bd2 100644
--- a/packages/mask/src/plugins/Trader/trader/useNativeTradeGasLimit.ts
+++ b/packages/mask/src/plugins/Trader/trader/useNativeTradeGasLimit.ts
@@ -1,15 +1,18 @@
-import { ChainId, EthereumTokenType, useAccount, useNativeTokenWrapperContract } from '@masknet/web3-shared-evm'
+import { ChainId, SchemaType } from '@masknet/web3-shared-evm'
 import { useAsync } from 'react-use'
 import type { TradeComputed } from '../types'
 import type { NativeTokenWrapper } from './native/useTradeComputed'
 import { TradeStrategy } from '../types'
 import type { AsyncState } from 'react-use/lib/useAsyncFn'
+import { useAccount } from '@masknet/plugin-infra/web3'
+import { NetworkPluginID } from '@masknet/web3-shared-base'
+import { useNativeTokenWrapperContract } from '@masknet/plugin-infra/web3-evm'
 
 export function useNativeTradeGasLimit(
     trade: TradeComputed<NativeTokenWrapper> | null,
     chainId?: ChainId,
 ): AsyncState<number> {
-    const account = useAccount()
+    const account = useAccount(NetworkPluginID.PLUGIN_EVM)
     const wrapperContract = useNativeTokenWrapperContract(chainId)
 
     return useAsync(async () => {
@@ -20,8 +23,8 @@ export function useNativeTradeGasLimit(
         if (!tradeAmount || !wrapperContract) return 0
 
         if (
-            (trade.strategy === TradeStrategy.ExactIn && trade.inputToken.type === EthereumTokenType.Native) ||
-            (trade.strategy === TradeStrategy.ExactOut && trade.outputToken.type === EthereumTokenType.Native)
+            (trade.strategy === TradeStrategy.ExactIn && trade.inputToken.schema === SchemaType.Native) ||
+            (trade.strategy === TradeStrategy.ExactOut && trade.outputToken.schema === SchemaType.Native)
         ) {
             return wrapperContract.methods.deposit().estimateGas({ from: account, value: tradeAmount })
         }
diff --git a/packages/mask/src/plugins/Trader/trader/useTargetBlockNumber.ts b/packages/mask/src/plugins/Trader/trader/useTargetBlockNumber.ts
index 17b121456374..79619657a361 100644
--- a/packages/mask/src/plugins/Trader/trader/useTargetBlockNumber.ts
+++ b/packages/mask/src/plugins/Trader/trader/useTargetBlockNumber.ts
@@ -1,12 +1,14 @@
 import { useAsync } from 'react-use'
 import type { AsyncState } from 'react-use/lib/useAsyncFn'
-import { ChainId, useChainId, useWeb3 } from '@masknet/web3-shared-evm'
+import type { ChainId } from '@masknet/web3-shared-evm'
+import { useChainId, useWeb3 } from '@masknet/plugin-infra/web3'
+import { NetworkPluginID } from '@masknet/web3-shared-base'
 
 export function useTargetBlockNumber(targetChainId?: ChainId): AsyncState<number> {
-    const chainId = useChainId()
-    const web3 = useWeb3({ chainId })
+    const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
+    const web3 = useWeb3(NetworkPluginID.PLUGIN_EVM, { chainId })
     return useAsync(async () => {
-        if (targetChainId === chainId) return undefined
-        return web3.eth.getBlockNumber()
+        if (targetChainId === chainId) return
+        return web3?.eth.getBlockNumber()
     }, [targetChainId, chainId, web3])
 }
diff --git a/packages/mask/src/plugins/Trader/trader/useTargetChainIdContext.ts b/packages/mask/src/plugins/Trader/trader/useTargetChainIdContext.ts
index 546098e36725..74fe5f9df34b 100644
--- a/packages/mask/src/plugins/Trader/trader/useTargetChainIdContext.ts
+++ b/packages/mask/src/plugins/Trader/trader/useTargetChainIdContext.ts
@@ -1,9 +1,11 @@
-import { ChainId, useChainId } from '@masknet/web3-shared-evm'
 import { useState } from 'react'
+import { NetworkPluginID } from '@masknet/web3-shared-base'
+import type { ChainId } from '@masknet/web3-shared-evm'
 import { createContainer } from 'unstated-next'
+import { useChainId } from '@masknet/plugin-infra/web3'
 
 export function useTargetChainIdContext() {
-    const chainId = useChainId()
+    const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
     const [targetChainId, setTargetChainId] = useState<ChainId>(chainId)
 
     return {
diff --git a/packages/mask/src/plugins/Trader/trader/useTradeApproveComputed.ts b/packages/mask/src/plugins/Trader/trader/useTradeApproveComputed.ts
index 6b6ff1f4bf7b..390bb6ebfaf8 100644
--- a/packages/mask/src/plugins/Trader/trader/useTradeApproveComputed.ts
+++ b/packages/mask/src/plugins/Trader/trader/useTradeApproveComputed.ts
@@ -1,6 +1,6 @@
 import { useMemo } from 'react'
-import { createERC20Token, EthereumTokenType, FungibleTokenDetailed } from '@masknet/web3-shared-evm'
-import { ZERO } from '@masknet/web3-shared-base'
+import { ChainId, createERC20Token, SchemaType } from '@masknet/web3-shared-evm'
+import { FungibleToken, ZERO } from '@masknet/web3-shared-base'
 import { TradeProvider } from '@masknet/public-api'
 import type { SwapQuoteResponse, TradeComputed } from '../types'
 import { useGetTradeContext } from './useGetTradeContext'
@@ -9,7 +9,7 @@ import { TargetChainIdContext } from './useTargetChainIdContext'
 export function useTradeApproveComputed(
     trade: TradeComputed<unknown> | null,
     provider?: TradeProvider,
-    token?: FungibleTokenDetailed,
+    token?: FungibleToken<ChainId, SchemaType>,
 ) {
     const { targetChainId: chainId } = TargetChainIdContext.useContainer()
     const context = useGetTradeContext(provider)
@@ -17,8 +17,8 @@ export function useTradeApproveComputed(
     return useMemo(() => {
         return {
             approveToken:
-                token?.type === EthereumTokenType.ERC20
-                    ? createERC20Token(chainId, token.address, token.decimals, token.name, token.symbol)
+                token?.schema === SchemaType.ERC20
+                    ? createERC20Token(chainId, token.address, token.name, token.symbol, token.decimals)
                     : null,
             approveAmount: trade ? trade.inputAmount : ZERO,
             approveAddress: (() => {
diff --git a/packages/mask/src/plugins/Trader/trending/useAvailableCoins.ts b/packages/mask/src/plugins/Trader/trending/useAvailableCoins.ts
index d3c7f85c8715..21aca17966e0 100644
--- a/packages/mask/src/plugins/Trader/trending/useAvailableCoins.ts
+++ b/packages/mask/src/plugins/Trader/trending/useAvailableCoins.ts
@@ -3,10 +3,14 @@ import type { AsyncState } from 'react-use/lib/useAsyncFn'
 import { PluginTraderRPC } from '../messages'
 import type { Coin, TagType } from '../types'
 import type { DataProvider } from '@masknet/public-api'
+import { useChainId } from '@masknet/plugin-infra/web3'
+import { NetworkPluginID } from '@masknet/web3-shared-base'
 
 export function useAvailableCoins(type: TagType, keyword: string, dataProvider: DataProvider): AsyncState<Coin[]> {
+    const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
+
     return useAsync(async () => {
         if (!keyword) return []
-        return PluginTraderRPC.getAvailableCoins(keyword, type, dataProvider)
-    }, [dataProvider, type, keyword])
+        return PluginTraderRPC.getAvailableCoins(chainId, keyword, type, dataProvider)
+    }, [dataProvider, type, keyword, chainId])
 }
diff --git a/packages/mask/src/plugins/Trader/trending/useAvailableDataProviders.ts b/packages/mask/src/plugins/Trader/trending/useAvailableDataProviders.ts
index 98df5e2037b0..7af010bc9a05 100644
--- a/packages/mask/src/plugins/Trader/trending/useAvailableDataProviders.ts
+++ b/packages/mask/src/plugins/Trader/trending/useAvailableDataProviders.ts
@@ -1,13 +1,14 @@
 import { useAsync } from 'react-use'
-import { useChainId } from '@masknet/web3-shared-evm'
+import { useChainId } from '@masknet/plugin-infra/web3'
+import { NetworkPluginID } from '@masknet/web3-shared-base'
 import { PluginTraderRPC } from '../messages'
 import type { TagType } from '../types'
 import type { DataProvider } from '@masknet/public-api'
 import type { AsyncState } from 'react-use/lib/useAsyncFn'
 
 export function useAvailableDataProviders(type?: TagType, keyword?: string): AsyncState<DataProvider[]> {
-    const chainId = useChainId()
+    const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
     return useAsync(async () => {
-        return PluginTraderRPC.getAvailableDataProviders(type, keyword)
+        return PluginTraderRPC.getAvailableDataProviders(chainId, type, keyword)
     }, [chainId, type, keyword])
 }
diff --git a/packages/mask/src/plugins/Trader/trending/useAvailableTraderProviders.ts b/packages/mask/src/plugins/Trader/trending/useAvailableTraderProviders.ts
index c6ec5f13e87a..089c296f4b65 100644
--- a/packages/mask/src/plugins/Trader/trending/useAvailableTraderProviders.ts
+++ b/packages/mask/src/plugins/Trader/trending/useAvailableTraderProviders.ts
@@ -1,16 +1,18 @@
 import { useAsync } from 'react-use'
-import { ChainId, useChainId } from '@masknet/web3-shared-evm'
+import type { ChainId } from '@masknet/web3-shared-evm'
 import type { TradeProvider } from '@masknet/public-api'
 import type { AsyncState } from 'react-use/lib/useAsyncFn'
 import { PluginTraderRPC } from '../messages'
 import type { TagType } from '../types'
+import { NetworkPluginID } from '@masknet/web3-shared-base'
+import { useChainId } from '@masknet/plugin-infra/web3'
 
 export function useAvailableTraderProviders(
     type?: TagType,
     keyword?: string,
     targetChainId?: ChainId,
 ): AsyncState<TradeProvider[]> {
-    const currentChainId = useChainId()
+    const currentChainId = useChainId(NetworkPluginID.PLUGIN_EVM)
     const chainId = targetChainId ?? currentChainId
     return useAsync(async () => {
         return PluginTraderRPC.getAvailableTraderProviders(chainId)
diff --git a/packages/mask/src/plugins/Trader/trending/useCurrentDataProvider.ts b/packages/mask/src/plugins/Trader/trending/useCurrentDataProvider.ts
index 02e2ca0716c5..1450e5a30771 100644
--- a/packages/mask/src/plugins/Trader/trending/useCurrentDataProvider.ts
+++ b/packages/mask/src/plugins/Trader/trending/useCurrentDataProvider.ts
@@ -1,10 +1,11 @@
 import { useState, useEffect } from 'react'
 import type { DataProvider } from '@masknet/public-api'
-import { useValueRef } from '@masknet/shared-base-ui'
-import { currentDataProviderSettings } from '../settings'
+import { useSubscription } from 'use-subscription'
+import { getDataProvider } from '../storage'
 
 export function useCurrentDataProvider(availableDataProviders: DataProvider[]) {
-    const currentDataProvider = useValueRef<DataProvider>(currentDataProviderSettings)
+    const currentDataProvider = useSubscription(getDataProvider().subscription)
+
     const [dataProvider, setDataProvider] = useState(currentDataProvider)
 
     // sync data provider
diff --git a/packages/mask/src/plugins/Trader/trending/usePriceStats.ts b/packages/mask/src/plugins/Trader/trending/usePriceStats.ts
index e34fd0acfeed..5fc7e019def5 100644
--- a/packages/mask/src/plugins/Trader/trending/usePriceStats.ts
+++ b/packages/mask/src/plugins/Trader/trending/usePriceStats.ts
@@ -4,6 +4,8 @@ import type { DataProvider } from '@masknet/public-api'
 import { isUndefined } from 'lodash-unified'
 import { PluginTraderRPC } from '../messages'
 import { Days } from '../SNSAdaptor/trending/PriceChartDaysControl'
+import { useChainId } from '@masknet/plugin-infra/web3'
+import { NetworkPluginID } from '@masknet/web3-shared-base'
 
 interface Options {
     coinId?: string
@@ -13,8 +15,9 @@ interface Options {
 }
 
 export function usePriceStats({ coinId, currency, days = Days.MAX, dataProvider }: Options) {
+    const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
     return useAsyncRetry(async () => {
         if (isUndefined(days) || isUndefined(coinId) || isUndefined(dataProvider) || isUndefined(currency)) return []
-        return PluginTraderRPC.getPriceStats(coinId, currency, days, dataProvider)
+        return PluginTraderRPC.getPriceStats(chainId, coinId, currency, days, dataProvider)
     }, [coinId, dataProvider, currency?.id, days])
 }
diff --git a/packages/mask/src/plugins/Trader/trending/useTrending.ts b/packages/mask/src/plugins/Trader/trending/useTrending.ts
index 48ef378d33ae..eff393771735 100644
--- a/packages/mask/src/plugins/Trader/trending/useTrending.ts
+++ b/packages/mask/src/plugins/Trader/trending/useTrending.ts
@@ -1,12 +1,13 @@
-import { useChainId, useERC20TokenDetailed } from '@masknet/web3-shared-evm'
 import { useAsync } from 'react-use'
 import { PluginTraderRPC } from '../messages'
 import type { Coin, TagType } from '../types'
 import type { DataProvider } from '@masknet/public-api'
 import { useCurrentCurrency } from './useCurrentCurrency'
+import { NetworkPluginID } from '@masknet/web3-shared-base'
+import { useChainId, useFungibleToken } from '@masknet/plugin-infra/web3'
 
 export function useTrendingByKeyword(tagType: TagType, keyword: string, dataProvider: DataProvider) {
-    const chainId = useChainId()
+    const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
     const currency = useCurrentCurrency(dataProvider)
     const {
         value: trending,
@@ -15,9 +16,9 @@ export function useTrendingByKeyword(tagType: TagType, keyword: string, dataProv
     } = useAsync(async () => {
         if (!keyword) return null
         if (!currency) return null
-        return PluginTraderRPC.getCoinTrendingByKeyword(keyword, tagType, currency, dataProvider)
+        return PluginTraderRPC.getCoinTrendingByKeyword(chainId, keyword, tagType, currency, dataProvider)
     }, [chainId, dataProvider, currency?.id, keyword])
-    const { value: detailedToken } = useERC20TokenDetailed(trending?.coin.contract_address)
+    const { value: detailedToken } = useFungibleToken(NetworkPluginID.PLUGIN_EVM, trending?.coin.contract_address)
     const coin = {
         ...trending?.coin,
         decimals: trending?.coin.decimals || detailedToken?.decimals || 0,
@@ -38,7 +39,7 @@ export function useTrendingByKeyword(tagType: TagType, keyword: string, dataProv
 }
 
 export function useTrendingById(id: string, dataProvider: DataProvider) {
-    const chainId = useChainId()
+    const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
     const currency = useCurrentCurrency(dataProvider)
     const {
         value: trending,
@@ -47,10 +48,10 @@ export function useTrendingById(id: string, dataProvider: DataProvider) {
     } = useAsync(async () => {
         if (!id) return null
         if (!currency) return null
-        return PluginTraderRPC.getCoinTrendingById(id, currency, dataProvider)
+        return PluginTraderRPC.getCoinTrendingById(chainId, id, currency, dataProvider)
     }, [chainId, dataProvider, currency?.id, id])
 
-    const { value: detailedToken } = useERC20TokenDetailed(trending?.coin.contract_address)
+    const { value: detailedToken } = useFungibleToken(NetworkPluginID.PLUGIN_EVM, trending?.coin.contract_address)
 
     const coin = {
         ...trending?.coin,
diff --git a/packages/mask/src/plugins/Trader/types/bancor.ts b/packages/mask/src/plugins/Trader/types/bancor.ts
index aa78a7f150be..4cde5e7459a4 100644
--- a/packages/mask/src/plugins/Trader/types/bancor.ts
+++ b/packages/mask/src/plugins/Trader/types/bancor.ts
@@ -1,11 +1,12 @@
-import type { FungibleTokenDetailed, ChainId } from '@masknet/web3-shared-evm'
+import type { ChainId, SchemaType } from '@masknet/web3-shared-evm'
 import type { TradeStrategy } from '../types'
+import type { FungibleToken } from '@masknet/web3-shared-base'
 
 export type SwapBancorRequest = {
     strategy: TradeStrategy
     slippage: number
-    fromToken: FungibleTokenDetailed
-    toToken: FungibleTokenDetailed
+    fromToken: FungibleToken<ChainId, SchemaType.Native | SchemaType.ERC20>
+    toToken: FungibleToken<ChainId, SchemaType.Native | SchemaType.ERC20>
     fromAmount: string | undefined
     toAmount: string | undefined
     user: string
diff --git a/packages/mask/src/plugins/Trader/types/dodo.ts b/packages/mask/src/plugins/Trader/types/dodo.ts
index 70a7da521522..3653c32cb4c3 100644
--- a/packages/mask/src/plugins/Trader/types/dodo.ts
+++ b/packages/mask/src/plugins/Trader/types/dodo.ts
@@ -1,9 +1,10 @@
-import type { FungibleTokenDetailed } from '@masknet/web3-shared-evm'
+import type { FungibleToken } from '@masknet/web3-shared-base'
+import type { ChainId, SchemaType } from '@masknet/web3-shared-evm'
 
 export interface SwapRouteRequest {
     isNativeSellToken: boolean
-    fromToken: FungibleTokenDetailed
-    toToken: FungibleTokenDetailed
+    fromToken: FungibleToken<ChainId, SchemaType.Native | SchemaType.ERC20>
+    toToken: FungibleToken<ChainId, SchemaType.Native | SchemaType.ERC20>
     fromAmount: string
     slippage: number
     userAddr: string
diff --git a/packages/mask/src/plugins/Trader/types/openocean.ts b/packages/mask/src/plugins/Trader/types/openocean.ts
index 1f9ce4f37695..7854271a0dcb 100644
--- a/packages/mask/src/plugins/Trader/types/openocean.ts
+++ b/packages/mask/src/plugins/Trader/types/openocean.ts
@@ -1,9 +1,10 @@
-import type { FungibleTokenDetailed } from '@masknet/web3-shared-evm'
+import type { FungibleToken } from '@masknet/web3-shared-base'
+import type { ChainId, SchemaType } from '@masknet/web3-shared-evm'
 
 export interface SwapOORequest {
     isNativeSellToken: boolean
-    fromToken: FungibleTokenDetailed
-    toToken: FungibleTokenDetailed
+    fromToken: FungibleToken<ChainId, SchemaType.Native | SchemaType.ERC20>
+    toToken: FungibleToken<ChainId, SchemaType.Native | SchemaType.ERC20>
     fromAmount: string
     slippage: number
     userAddr?: string
diff --git a/packages/mask/src/plugins/Trader/types/trader.ts b/packages/mask/src/plugins/Trader/types/trader.ts
index 20fa860c5e49..a1e1f9f24a74 100644
--- a/packages/mask/src/plugins/Trader/types/trader.ts
+++ b/packages/mask/src/plugins/Trader/types/trader.ts
@@ -1,11 +1,7 @@
 import type BigNumber from 'bignumber.js'
-import type {
-    FungibleTokenDetailed,
-    NativeTokenDetailed,
-    ERC20TokenDetailed,
-    ChainIdOptionalRecord,
-} from '@masknet/web3-shared-evm'
+import type { ChainId, ChainIdOptionalRecord, SchemaType } from '@masknet/web3-shared-evm'
 import type { TradeProvider } from '@masknet/public-api'
+import type { FungibleToken } from '@masknet/web3-shared-base'
 
 export enum WarningLevel {
     LOW = 1,
@@ -83,8 +79,8 @@ export enum ZrxTradePool {
 
 export interface TradeComputed<T = unknown> {
     strategy: TradeStrategy
-    inputToken?: FungibleTokenDetailed
-    outputToken?: FungibleTokenDetailed
+    inputToken?: FungibleToken<ChainId, SchemaType.Native | SchemaType.ERC20>
+    outputToken?: FungibleToken<ChainId, SchemaType.Native | SchemaType.ERC20>
     inputAmount: BigNumber
     outputAmount: BigNumber
     executionPrice: BigNumber
@@ -93,7 +89,10 @@ export interface TradeComputed<T = unknown> {
     minimumReceived: BigNumber
     fee: BigNumber
     path?: Array<
-        Array<PartialRequired<NativeTokenDetailed, 'address'> | PartialRequired<ERC20TokenDetailed, 'address'>>
+        Array<
+            | PartialRequired<FungibleToken<ChainId, SchemaType.Native>, 'address'>
+            | PartialRequired<FungibleToken<ChainId, SchemaType.ERC20>, 'address'>
+        >
     >
     trade_?: T
 }
@@ -117,9 +116,13 @@ export interface TradeContext {
     ROUTER_CONTRACT_ADDRESS?: string
     FACTORY_CONTRACT_ADDRESS?: string
     SPENDER_CONTRACT_ADDRESS?: string
-    ADDITIONAL_TOKENS?: ChainIdOptionalRecord<Record<string, ERC20TokenDetailed[]>>
-    AGAINST_TOKENS?: ChainIdOptionalRecord<ERC20TokenDetailed[]>
-    CUSTOM_TOKENS?: ChainIdOptionalRecord<Record<string, ERC20TokenDetailed[]>>
+    ADDITIONAL_TOKENS?: ChainIdOptionalRecord<
+        Record<string, Array<FungibleToken<ChainId, SchemaType.Native | SchemaType.ERC20>>>
+    >
+    AGAINST_TOKENS?: ChainIdOptionalRecord<Array<FungibleToken<ChainId, SchemaType.Native | SchemaType.ERC20>>>
+    CUSTOM_TOKENS?: ChainIdOptionalRecord<
+        Record<string, Array<FungibleToken<ChainId, SchemaType.Native | SchemaType.ERC20>>>
+    >
 }
 
 export interface TradeInfo {
diff --git a/packages/mask/src/plugins/Transak/hooks/useTransakAllowanceCoin.ts b/packages/mask/src/plugins/Transak/hooks/useTransakAllowanceCoin.ts
index 1a011f27ff3a..f5242601f1be 100644
--- a/packages/mask/src/plugins/Transak/hooks/useTransakAllowanceCoin.ts
+++ b/packages/mask/src/plugins/Transak/hooks/useTransakAllowanceCoin.ts
@@ -1,5 +1,4 @@
 import { useAsync } from 'react-use'
-import type { Coin } from '../../Trader/types/trending'
 
 const ENV = {
     production: 'https://api.transak.com/api/v2/currencies/crypto-currencies',
@@ -9,13 +8,13 @@ const ENV = {
 
 const URL = ENV[process.env.NODE_ENV]
 
-export function useTransakAllowanceCoin(coin: Coin): boolean {
+export function useTransakAllowanceCoin(token: { address?: string; symbol: string }): boolean {
     return useAsync(async () => {
-        if (coin.contract_address) {
+        if (token.address) {
             const allowanceList = await fetch(URL, { method: 'GET' })
                 .then((res) => res.json())
                 .then((res) => res.response)
-            return allowanceList.map((val: Coin) => val.symbol).includes(coin.symbol)
+            return allowanceList.map((val: { symbol: string }) => val.symbol).includes(token.symbol)
         }
         return false
     }).value
diff --git a/packages/mask/src/plugins/UnlockProtocol/SNSAdaptor/UnlockProtocolDialog.tsx b/packages/mask/src/plugins/UnlockProtocol/SNSAdaptor/UnlockProtocolDialog.tsx
index 6ea34011834d..2e8a9ddccd0e 100644
--- a/packages/mask/src/plugins/UnlockProtocol/SNSAdaptor/UnlockProtocolDialog.tsx
+++ b/packages/mask/src/plugins/UnlockProtocol/SNSAdaptor/UnlockProtocolDialog.tsx
@@ -1,4 +1,4 @@
-import { useAccount, useChainId } from '@masknet/web3-shared-evm'
+import { useAccount, useChainId } from '@masknet/plugin-infra/web3'
 import { DialogActions, DialogContent, DialogProps, Chip, Button, InputBase } from '@mui/material'
 import { useEffect, useState } from 'react'
 import { InjectedDialog } from '@masknet/shared'
@@ -9,6 +9,7 @@ import { PluginUnlockProtocolRPC } from '../messages'
 import { SelectRecipientsUnlockDialogUI } from './SelectRecipientsUnlockDialog'
 import { useCompositionContext } from '@masknet/plugin-infra/content-script'
 import { makeStyles } from '@masknet/theme'
+import { NetworkPluginID } from '@masknet/web3-shared-base'
 
 interface UnlockProtocolDialogProps extends withClasses<'wrapper'> {
     open: boolean
@@ -26,9 +27,10 @@ const useStyles = makeStyles()(() => ({
 export default function UnlockProtocolDialog(props: UnlockProtocolDialogProps) {
     const { t } = useI18N()
     const [open, setOpen] = useState(false)
-    const address = useAccount()
     const { classes } = useStyles()
-    const [currentUnlockChain, setCurrentUnlockChain] = useState(useChainId())
+    const address = useAccount(NetworkPluginID.PLUGIN_EVM)
+    const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
+    const [currentUnlockChain, setCurrentUnlockChain] = useState(chainId)
     const [currentUnlockPost, setCurrentUnlockPost] = useState('')
     const [currentUnlockTarget, setCurrentUnlockTarget] = useState<UnlockLocks[]>(() => [])
     const [availableUnlockTarget, setAvailableUnlockTarget] = useState<UnlockLocks[]>(() => [])
@@ -41,7 +43,6 @@ export default function UnlockProtocolDialog(props: UnlockProtocolDialogProps) {
                 }
             })
             .catch((error) => {
-                console.error(error)
                 setAvailableUnlockTarget([
                     {
                         lock: {
diff --git a/packages/mask/src/plugins/UnlockProtocol/SNSAdaptor/UnlockProtocolInPost.tsx b/packages/mask/src/plugins/UnlockProtocol/SNSAdaptor/UnlockProtocolInPost.tsx
index 01a30f0fc86e..071605f8c51c 100644
--- a/packages/mask/src/plugins/UnlockProtocol/SNSAdaptor/UnlockProtocolInPost.tsx
+++ b/packages/mask/src/plugins/UnlockProtocol/SNSAdaptor/UnlockProtocolInPost.tsx
@@ -4,10 +4,11 @@ import React, { useEffect, useState } from 'react'
 import { useI18N } from '../../../utils'
 import { paywallUrl } from '../constants'
 import { renderWithUnlockProtocolMetadata, UnlockProtocolMetadataReader } from '../helpers'
-import { useAccount, useChainId } from '@masknet/web3-shared-evm'
+import { useAccount, useChainId } from '@masknet/plugin-infra/web3'
 import { PluginUnlockProtocolRPC } from '../messages'
-import { EthereumChainBoundary } from '../../../web3/UI/EthereumChainBoundary'
+import { ChainBoundary } from '../../../web3/UI/ChainBoundary'
 import { usePluginWrapper } from '@masknet/plugin-infra/dom'
+import { NetworkPluginID } from '@masknet/web3-shared-base'
 
 interface UnlockProtocolInPostProps {
     message: TypedMessage
@@ -17,8 +18,8 @@ export default function UnlockProtocolInPost(props: UnlockProtocolInPostProps) {
     const { t } = useI18N()
     const { message } = props
     const [content, setContent] = useState('')
-    const address = useAccount()
-    const chain = useChainId()
+    const address = useAccount(NetworkPluginID.PLUGIN_EVM)
+    const chain = useChainId(NetworkPluginID.PLUGIN_EVM)
     const [redirectUrl, setRedirectUrl] = useState('')
 
     useEffect(() => {
@@ -63,9 +64,13 @@ export default function UnlockProtocolInPost(props: UnlockProtocolInPostProps) {
             ? renderWithUnlockProtocolMetadata(props.message.meta, (r) => {
                   return (
                       <Render>
-                          <EthereumChainBoundary chainId={chain} noSwitchNetworkTip={false} renderInTimeline>
+                          <ChainBoundary
+                              expectedPluginID={NetworkPluginID.PLUGIN_EVM}
+                              expectedChainId={chain}
+                              noSwitchNetworkTip={false}
+                              renderInTimeline>
                               <Typography color="textPrimary">{content}</Typography>
-                          </EthereumChainBoundary>
+                          </ChainBoundary>
                       </Render>
                   )
               })
@@ -95,10 +100,14 @@ export default function UnlockProtocolInPost(props: UnlockProtocolInPostProps) {
             ? renderWithUnlockProtocolMetadata(props.message.meta, (r) => {
                   return (
                       <Render>
-                          <EthereumChainBoundary chainId={chain} noSwitchNetworkTip={false} renderInTimeline>
+                          <ChainBoundary
+                              expectedPluginID={NetworkPluginID.PLUGIN_EVM}
+                              expectedChainId={chain}
+                              noSwitchNetworkTip={false}
+                              renderInTimeline>
                               <Typography color="textPrimary">"{t('loading')}"</Typography>
                               <br />
-                          </EthereumChainBoundary>
+                          </ChainBoundary>
                       </Render>
                   )
               })
diff --git a/packages/mask/src/plugins/UnlockProtocol/base.ts b/packages/mask/src/plugins/UnlockProtocol/base.ts
index 12b8a1a7ecb9..4754dec47b1a 100644
--- a/packages/mask/src/plugins/UnlockProtocol/base.ts
+++ b/packages/mask/src/plugins/UnlockProtocol/base.ts
@@ -1,4 +1,4 @@
-import { NetworkPluginID } from '@masknet/plugin-infra/web3'
+import { NetworkPluginID } from '@masknet/web3-shared-base'
 import type { Plugin } from '@masknet/plugin-infra'
 import { ChainId } from '@masknet/web3-shared-evm'
 import { pluginDescription, pluginName, pluginId, pluginMetaKey } from './constants'
diff --git a/packages/mask/src/plugins/UnlockProtocol/utils/crypto.ts b/packages/mask/src/plugins/UnlockProtocol/utils/crypto.ts
index b6545922d720..6385e9b56593 100644
--- a/packages/mask/src/plugins/UnlockProtocol/utils/crypto.ts
+++ b/packages/mask/src/plugins/UnlockProtocol/utils/crypto.ts
@@ -14,7 +14,11 @@ export async function encryptUnlockData(content: string): Promise<{
     )
     const exportKey = await crypto.subtle.exportKey('raw', key)
 
-    return { iv: encodeArrayBuffer(iv), key: encodeArrayBuffer(exportKey), encrypted: encodeArrayBuffer(encrypted) }
+    return {
+        iv: encodeArrayBuffer(new Uint8Array(iv)),
+        key: encodeArrayBuffer(new Uint8Array(exportKey)),
+        encrypted: encodeArrayBuffer(encrypted),
+    }
 }
 
 export async function decryptUnlockData(
diff --git a/packages/mask/src/plugins/Wallet/Dashboard/index.tsx b/packages/mask/src/plugins/Wallet/Dashboard/index.tsx
index 5e832820dbb1..aa93340b85e4 100644
--- a/packages/mask/src/plugins/Wallet/Dashboard/index.tsx
+++ b/packages/mask/src/plugins/Wallet/Dashboard/index.tsx
@@ -2,16 +2,12 @@ import type { Plugin } from '@masknet/plugin-infra'
 import { base } from '@masknet/plugin-wallet'
 import { SelectNftContractDialog } from '../SNSAdaptor/SelectNftContractDialog'
 import { SelectProviderDialog } from '../SNSAdaptor/SelectProviderDialog'
-import { SelectWalletDialog } from '../SNSAdaptor/SelectWalletDialog'
-import { WalletConnectQRCodeDialog } from '../SNSAdaptor/WalletConnectQRCodeDialog'
 import { WalletStatusDialog } from '../SNSAdaptor/WalletStatusDialog'
-import { WalletRenameWalletDialog } from '../SNSAdaptor/RenameWalletDialog'
 import { TransactionDialog } from '../SNSAdaptor/TransactionDialog'
 import { ConnectWalletDialog } from '../SNSAdaptor/ConnectWalletDialog'
 import { WalletRiskWarningDialog } from '../SNSAdaptor/RiskWarningDialog'
 import { GasSettingDialog } from '../SNSAdaptor/GasSettingDialog'
 import { TransactionSnackbar } from '../SNSAdaptor/TransactionSnackbar'
-import { RestoreLegacyWalletDialog } from '../SNSAdaptor/RestoreLegacyWalletDialog'
 
 const dashboard: Plugin.Dashboard.Definition = {
     ...base,
@@ -19,16 +15,12 @@ const dashboard: Plugin.Dashboard.Definition = {
     GlobalInjection: function Component() {
         return (
             <>
-                <TransactionDialog />
-                <SelectWalletDialog />
                 <SelectProviderDialog />
+                <TransactionDialog />
                 <SelectNftContractDialog />
                 <WalletStatusDialog />
                 <ConnectWalletDialog />
-                <WalletConnectQRCodeDialog />
-                <WalletRenameWalletDialog />
                 <WalletRiskWarningDialog />
-                <RestoreLegacyWalletDialog />
                 <GasSettingDialog />
                 <TransactionSnackbar />
             </>
diff --git a/packages/mask/src/plugins/Wallet/SNSAdaptor/ConnectWalletDialog/ConnectionProgress.tsx b/packages/mask/src/plugins/Wallet/SNSAdaptor/ConnectWalletDialog/ConnectionProgress.tsx
index 48e377ee54f3..7cd8e844b94c 100644
--- a/packages/mask/src/plugins/Wallet/SNSAdaptor/ConnectWalletDialog/ConnectionProgress.tsx
+++ b/packages/mask/src/plugins/Wallet/SNSAdaptor/ConnectWalletDialog/ConnectionProgress.tsx
@@ -1,18 +1,13 @@
+import { Trans } from 'react-i18next'
+import { ImageIcon } from '@masknet/shared'
+import type { NetworkPluginID } from '@masknet/web3-shared-base'
 import type { AsyncStateRetry } from 'react-use/lib/useAsyncRetry'
 import { Box, Card, CircularProgress, Typography, Paper, Link } from '@mui/material'
 import { useStylesExtends, makeStyles, MaskColorVar } from '@masknet/theme'
-import { ImageIcon } from '@masknet/shared'
-import { WarningTriangleIcon } from '@masknet/icons'
-import { NetworkPluginID, useProviderDescriptor } from '@masknet/plugin-infra/web3'
-import {
-    ProviderType,
-    resolveProviderName,
-    resolveProviderShortenLink,
-    resolveProviderHomeLink,
-} from '@masknet/web3-shared-evm'
+import { useProviderDescriptor, useWeb3State, Web3Helper } from '@masknet/plugin-infra/web3'
 import ActionButton from '../../../../extension/options-page/DashboardComponents/ActionButton'
 import { useI18N } from '../../../../utils'
-import { Trans } from 'react-i18next'
+import { WarningTriangleIcon } from '@masknet/icons'
 
 const useStyles = makeStyles()((theme) => ({
     content: {
@@ -46,18 +41,23 @@ const useStyles = makeStyles()((theme) => ({
 }))
 
 export interface ConnectionProgressProps extends withClasses<never> {
-    providerType: ProviderType
+    pluginID: NetworkPluginID
+    providerType: Web3Helper.Definition[NetworkPluginID]['ProviderType']
     connection: AsyncStateRetry<true>
 }
 
 export function ConnectionProgress(props: ConnectionProgressProps) {
-    const { providerType, connection } = props
+    const { pluginID, providerType, connection } = props
     const { value: connected, loading, error, retry } = connection
 
     const { t } = useI18N()
     const classes = useStylesExtends(useStyles(), props)
 
-    const providerDescriptor = useProviderDescriptor(providerType, NetworkPluginID.PLUGIN_EVM)
+    const { Others } = useWeb3State(pluginID) as Web3Helper.Web3StateAll
+    const providerDescriptor = useProviderDescriptor(pluginID, providerType)
+
+    if (!Others) return null
+
     return (
         <>
             <Paper elevation={0}>
@@ -69,7 +69,7 @@ export function ConnectionProgress(props: ConnectionProgressProps) {
                                 {loading
                                     ? t('plugin_wallet_connecting_with')
                                     : t(connected ? 'plugin_wallet_connected_with' : 'plugin_wallet_connect_with')}{' '}
-                                {resolveProviderName(providerType)}
+                                {Others.providerResolver.providerName(providerType)}
                             </Typography>
                             {loading ? (
                                 <Box display="flex" alignItems="center">
@@ -102,20 +102,20 @@ export function ConnectionProgress(props: ConnectionProgressProps) {
                     <Trans
                         i18nKey="plugin_wallet_connect_tip"
                         components={{
-                            providerLink: resolveProviderHomeLink(providerType) ? (
+                            providerLink: Others.providerResolver.providerHomeLink(providerType) ? (
                                 <Link
                                     className={classes.tipLink}
                                     target="_blank"
                                     rel="noopener noreferrer"
-                                    href={resolveProviderHomeLink(providerType)}
+                                    href={Others.providerResolver.providerHomeLink(providerType)}
                                 />
                             ) : (
                                 <span />
                             ),
                         }}
                         values={{
-                            providerName: resolveProviderName(providerType),
-                            providerShortenLink: resolveProviderShortenLink(providerType),
+                            providerName: Others.providerResolver.providerName(providerType),
+                            providerShortenLink: Others.providerResolver.providerShortenLink(providerType),
                         }}
                     />
                 </Typography>
diff --git a/packages/mask/src/plugins/Wallet/SNSAdaptor/ConnectWalletDialog/index.tsx b/packages/mask/src/plugins/Wallet/SNSAdaptor/ConnectWalletDialog/index.tsx
index e19bf8cf3d20..471152cd7672 100644
--- a/packages/mask/src/plugins/Wallet/SNSAdaptor/ConnectWalletDialog/index.tsx
+++ b/packages/mask/src/plugins/Wallet/SNSAdaptor/ConnectWalletDialog/index.tsx
@@ -1,205 +1,80 @@
-import { useCallback, useEffect, useState } from 'react'
+import { useState } from 'react'
 import { useAsyncRetry } from 'react-use'
 import { DialogContent } from '@mui/material'
-import { makeStyles, usePopupCustomSnackbar } from '@masknet/theme'
-import { safeUnreachable, delay } from '@dimensiondev/kit'
-import {
-    ChainId,
-    getChainDetailedCAIP,
-    getChainIdFromNetworkType,
-    NetworkType,
-    ProviderType,
-    resolveNetworkName,
-    resolveProviderName,
-} from '@masknet/web3-shared-evm'
-import { useRemoteControlledDialog } from '@masknet/shared-base-ui'
 import { InjectedDialog } from '@masknet/shared'
+import { makeStyles, useStylesExtends } from '@masknet/theme'
+import { useRemoteControlledDialog } from '@masknet/shared-base-ui'
+import { useWeb3State, Web3Helper } from '@masknet/plugin-infra/web3'
+import type { NetworkPluginID } from '@masknet/web3-shared-base'
 import { WalletMessages } from '../../messages'
 import { ConnectionProgress } from './ConnectionProgress'
-import Services from '../../../../extension/service'
-import { isPopupPage } from '@masknet/shared-base'
-import { LoadingPlaceholder } from '../../../../extension/popups/components/LoadingPlaceholder'
-import { useI18N } from '../../../../utils'
+import { pluginIDSettings } from '../../../../settings/settings'
 
 const useStyles = makeStyles()((theme) => ({
     content: {
         padding: theme.spacing(2.5),
     },
-    popupDialog: {
-        width: 200,
-        margin: 'auto',
-    },
-    popupDialogPaper: {
-        backgroundColor: 'transparent',
-    },
-    popupDialogContent: {
-        backgroundColor: 'rgba(0, 0, 0, 0.8)',
-    },
 }))
 
 export interface ConnectWalletDialogProps {}
 
 export function ConnectWalletDialog(props: ConnectWalletDialogProps) {
-    const { t } = useI18N()
-    const { classes } = useStyles()
-    const [providerType, setProviderType] = useState<ProviderType | undefined>()
-    const [networkType, setNetworkType] = useState<NetworkType | undefined>()
+    const classes = useStylesExtends(useStyles(), props)
 
-    // #region remote controlled dialog
-    const {
-        open,
-        closeDialog,
-        setDialog: setConnectWalletDialog,
-    } = useRemoteControlledDialog(WalletMessages.events.connectWalletDialogUpdated, (ev) => {
-        if (!ev.open) return
-        setProviderType(ev.providerType)
-        setNetworkType(ev.networkType)
-    })
-    // #endregion
+    const [pluginID, setPluginID] = useState<NetworkPluginID>()
+    const [providerType, setProviderType] = useState<Web3Helper.Definition[NetworkPluginID]['ProviderType']>()
+    const [networkType, setNetworkType] = useState<Web3Helper.Definition[NetworkPluginID]['NetworkType']>()
 
-    // #region walletconnect
-    const { setDialog: setWalletConnectDialog } = useRemoteControlledDialog(
-        WalletMessages.events.walletConnectQRCodeDialogUpdated,
+    // #region remote controlled dialog
+    const { open, setDialog: setConnectWalletDialog } = useRemoteControlledDialog(
+        WalletMessages.events.connectWalletDialogUpdated,
+        (ev) => {
+            if (!ev.open) return
+            setPluginID(ev.network.networkSupporterPluginID)
+            setNetworkType(ev.network.type)
+            setProviderType(ev.provider.type)
+        },
     )
     // #endregion
 
-    const connectTo = useCallback(async () => {
-        if (!networkType) throw new Error('Unknown network type.')
-        if (!providerType) throw new Error('Unknown provider type.')
-
-        // read the chain detailed from the built-in chain list
-        const expectedChainId = getChainIdFromNetworkType(networkType)
-        const chainDetailedCAIP = getChainDetailedCAIP(expectedChainId)
-        if (!chainDetailedCAIP) throw new Error('Unknown network type.')
-
-        // a short time loading makes the user fells better
-        await delay(1000)
-        let account: string | undefined
-        let chainId: ChainId | undefined
-
-        switch (providerType) {
-            case ProviderType.MaskWallet:
-                ;({ account, chainId } = await Services.Ethereum.connectMaskWallet(expectedChainId))
-                break
-            case ProviderType.MetaMask:
-                ;({ account, chainId } = await Services.Ethereum.connectMetaMask())
-                break
-            case ProviderType.WalletConnect:
-                // create wallet connect QR code URI
-                const uri = await Services.Ethereum.createConnectionURI()
-                if (!uri) throw new Error('Failed to create connection URI.')
-
-                // open the QR code dialog
-                setWalletConnectDialog({
-                    open: true,
-                    uri,
-                })
-
-                // wait for walletconnect to be connected
-                ;({ account, chainId } = await Services.Ethereum.connectWalletConnect())
-                break
-            case ProviderType.Coin98:
-            case ProviderType.WalletLink:
-            case ProviderType.MathWallet:
-                ;({ account, chainId } = await Services.Ethereum.connectInjected())
-                break
-            case ProviderType.Fortmatic:
-                ;({ account, chainId } = await Services.Ethereum.connectFortmatic(expectedChainId))
-                break
-            case ProviderType.CustomNetwork:
-                throw new Error('To be implemented.')
-            default:
-                safeUnreachable(providerType)
-                break
-        }
+    const { Connection, Others } = useWeb3State(pluginID) as Web3Helper.Web3StateAll
 
-        // connection failed
-        if (!account || !networkType) throw new Error(`Failed to connect to ${resolveProviderName(providerType)}.`)
-
-        // switch to the expected chain
-        if (chainId !== expectedChainId) {
-            try {
-                const overrides = {
-                    chainId: expectedChainId,
-                    providerType,
-                }
-
-                // the coin98 wallet cannot handle add/switch RPC provider correctly
-                // it will always add a new RPC provider even if the network exists
-                if (providerType !== ProviderType.Coin98) {
-                    await Promise.race([
-                        delay(30 /* seconds */ * 1000 /* milliseconds */).then(() => {
-                            throw new Error('Timeout!')
-                        }),
-                        networkType === NetworkType.Ethereum
-                            ? Services.Ethereum.switchEthereumChain(ChainId.Mainnet, overrides)
-                            : Services.Ethereum.addEthereumChain(chainDetailedCAIP, account, overrides),
-                    ])
-                }
-
-                // recheck
-                const chainIdHex = await Services.Ethereum.getChainId(overrides)
-                if (Number.parseInt(chainIdHex, 16) !== expectedChainId) throw new Error('Failed to switch chain.')
-            } catch {
-                throw new Error(`Make sure your wallet is on the ${resolveNetworkName(networkType)} network.`)
-            }
-        }
+    const connection = useAsyncRetry<true>(async () => {
+        if (!open) return true
 
-        return {
-            account,
-            chainId: expectedChainId,
-            networkType,
+        if (!networkType || !providerType || !Others || !Connection) throw new Error('Failed to connect to provider.')
+
+        const chainId = Others?.networkResolver.networkChainId(networkType)
+        if (!chainId) throw new Error('Failed to connect to provider.')
+
+        const connection = await Connection.getConnection?.({
+            chainId,
             providerType,
-        }
-    }, [networkType, providerType])
+        })
+        if (!connection) throw new Error('Failed to build connection.')
 
-    const connection = useAsyncRetry<true>(async () => {
-        if (!open) return true
+        await connection.connect()
+
+        if (pluginID) {
+            pluginIDSettings.value = pluginID
+        }
 
         setConnectWalletDialog({
             open: false,
-            result: await connectTo(),
         })
 
         return true
-    }, [open, connectTo, setConnectWalletDialog])
+    }, [open])
 
-    const { showSnackbar } = usePopupCustomSnackbar()
-    useEffect(() => {
-        if (!isPopupPage() || !connection.error) return
-        setConnectWalletDialog({
-            open: false,
-        })
-        showSnackbar(connection.error.message, {
-            variant: 'error',
-        })
-    }, [connection.error, showSnackbar])
-
-    if (!providerType) return null
-
-    if (isPopupPage()) {
-        return (
-            <InjectedDialog
-                className={classes.popupDialog}
-                open={open}
-                hideBackdrop
-                disableBackdropClick
-                PaperProps={{
-                    className: classes.popupDialogPaper,
-                    elevation: 0,
-                }}
-                BackdropProps={{}}>
-                <DialogContent className={classes.popupDialogContent}>
-                    <LoadingPlaceholder title={t('connecting')} titleColor="#ffffff" iconColor="#ffffff" />
-                </DialogContent>
-            </InjectedDialog>
-        )
-    }
+    if (!pluginID || !providerType) return null
 
     return (
-        <InjectedDialog title={`Connect to ${resolveProviderName(providerType)}`} open={open} onClose={closeDialog}>
+        <InjectedDialog
+            title={`Connect to ${Others?.providerResolver.providerName(providerType)}`}
+            open={open}
+            onClose={() => setConnectWalletDialog({ open: false })}>
             <DialogContent className={classes.content}>
-                <ConnectionProgress providerType={providerType} connection={connection} />
+                <ConnectionProgress pluginID={pluginID} providerType={providerType} connection={connection} />
             </DialogContent>
         </InjectedDialog>
     )
diff --git a/packages/mask/src/plugins/Wallet/SNSAdaptor/GasSettingDialog/GasSetting.tsx b/packages/mask/src/plugins/Wallet/SNSAdaptor/GasSettingDialog/GasSetting.tsx
index e67f273d53d8..e74cd98c64bd 100644
--- a/packages/mask/src/plugins/Wallet/SNSAdaptor/GasSettingDialog/GasSetting.tsx
+++ b/packages/mask/src/plugins/Wallet/SNSAdaptor/GasSettingDialog/GasSetting.tsx
@@ -1,11 +1,13 @@
 import type { FC } from 'react'
-import { isEIP1559Supported, useChainId } from '@masknet/web3-shared-evm'
+import { NetworkPluginID } from '@masknet/web3-shared-base'
+import { chainResolver } from '@masknet/web3-shared-evm'
+import { useChainId } from '@masknet/plugin-infra/web3'
 import { GasSetting1559 } from './GasSetting1559'
 import { Prior1559GasSetting } from './Prior1559GasSetting'
 import type { GasSettingProps } from './types'
 
 export const GasSetting: FC<GasSettingProps> = (props) => {
-    const chainId = useChainId()
-    const is1559Supported = isEIP1559Supported(chainId)
+    const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
+    const is1559Supported = chainResolver.isSupport(chainId, 'EIP1559')
     return is1559Supported ? <GasSetting1559 {...props} /> : <Prior1559GasSetting {...props} />
 }
diff --git a/packages/mask/src/plugins/Wallet/SNSAdaptor/GasSettingDialog/GasSetting1559.tsx b/packages/mask/src/plugins/Wallet/SNSAdaptor/GasSettingDialog/GasSetting1559.tsx
index 460fa722c2c8..27ac7569f0f2 100644
--- a/packages/mask/src/plugins/Wallet/SNSAdaptor/GasSettingDialog/GasSetting1559.tsx
+++ b/packages/mask/src/plugins/Wallet/SNSAdaptor/GasSettingDialog/GasSetting1559.tsx
@@ -1,69 +1,67 @@
+import { z as zod } from 'zod'
 import { zodResolver } from '@hookform/resolvers/zod'
-import {
-    formatGweiToEther,
-    useChainId,
-    useNativeTokenDetailed,
-    GasOption,
-    formatGweiToWei,
-} from '@masknet/web3-shared-evm'
+import { FC, memo, useCallback, useEffect, useMemo, useState } from 'react'
+import { useUpdateEffect } from 'react-use'
+import { Controller, useForm } from 'react-hook-form'
+import { formatGweiToEther, formatGweiToWei, useTokenConstants } from '@masknet/web3-shared-evm'
 import { Typography } from '@mui/material'
 import { LoadingButton } from '@mui/lab'
 import BigNumber from 'bignumber.js'
 import { isEmpty, noop } from 'lodash-unified'
-import { FC, memo, useCallback, useEffect, useMemo, useState } from 'react'
-import { Controller, useForm } from 'react-hook-form'
-import { useAsync, useUpdateEffect } from 'react-use'
-import { z as zod } from 'zod'
-import { StyledInput } from '../../../../extension/popups/components/StyledInput'
+// import { StyledInput } from '../../../../extension/popups/components/StyledInput'
 import { useI18N } from '../../../../utils'
-import { WalletRPC } from '../../messages'
-import { useNativeTokenPrice } from '../../hooks/useTokenPrice'
 import { useGasSettingStyles } from './useGasSettingStyles'
 import type { GasSettingProps } from './types'
 import {
+    GasOptionType,
     isGreaterThan,
     isGreaterThanOrEqualTo,
     isLessThan,
     isLessThanOrEqualTo,
     isPositive,
     multipliedBy,
+    NetworkPluginID,
     toFixed,
 } from '@masknet/web3-shared-base'
+import { useChainId, useFungibleTokenBalance, useGasOptions } from '@masknet/plugin-infra/web3'
 
 const HIGH_FEE_WARNING_MULTIPLIER = 1.5
 
 export const GasSetting1559: FC<GasSettingProps> = memo(
-    ({ gasLimit, minGasLimit = 0, gasOption = GasOption.Medium, onConfirm = noop }) => {
-        const { classes } = useGasSettingStyles()
+    ({ gasLimit, minGasLimit = 0, gasOptionType = GasOptionType.NORMAL, onConfirm = noop }) => {
         const { t } = useI18N()
-        const chainId = useChainId()
-        const [selectedGasOption, setGasOption] = useState<GasOption | null>(gasOption)
-        const { value: nativeToken } = useNativeTokenDetailed()
-        const nativeTokenPrice = useNativeTokenPrice(nativeToken?.chainId)
+        const { classes } = useGasSettingStyles()
+        const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
+        const { NATIVE_TOKEN_ADDRESS } = useTokenConstants(chainId)
 
-        // #region Get suggest gas options data from meta swap api
-        const { value: gasOptions, loading: getGasOptionsLoading } = useAsync(async () => {
-            return WalletRPC.getEstimateGasFees(chainId)
-        }, [chainId])
-        // #endregion
+        const [selectedGasOption, setGasOptionType] = useState<GasOptionType | null>(gasOptionType)
+        const { value: nativeTokenPrice = 0 } = useFungibleTokenBalance(
+            NetworkPluginID.PLUGIN_EVM,
+            NATIVE_TOKEN_ADDRESS,
+            {
+                chainId,
+            },
+        )
+
+        const { value: gasOptions, loading: getGasOptionsLoading } = useGasOptions(NetworkPluginID.PLUGIN_EVM)
 
         // #region Gas options
         const options = useMemo(
             () => [
                 {
                     title: t('popups_wallet_gas_fee_settings_low'),
-                    gasOption: GasOption.Low,
-                    content: gasOptions?.low,
+                    gasOption: GasOptionType.SLOW,
+                    content: gasOptions?.[GasOptionType.SLOW],
                 },
                 {
                     title: t('popups_wallet_gas_fee_settings_medium'),
-                    gasOption: GasOption.Medium,
-                    content: gasOptions?.medium,
+                    gasOption: GasOptionType.NORMAL,
+                    content: gasOptions?.[GasOptionType.NORMAL],
                 },
                 {
                     title: t('popups_wallet_gas_fee_settings_high'),
-                    gasOption: GasOption.High,
-                    content: gasOptions?.high,
+                    gasOption: GasOptionType.FAST,
+                    content: gasOptions?.[GasOptionType.FAST],
                 },
             ],
             [gasOptions],
@@ -160,12 +158,15 @@ export const GasSetting1559: FC<GasSettingProps> = memo(
         // #region These are additional form rules that need to be prompted for but do not affect the validation of the form
         const maxPriorFeeHelperText = useMemo(() => {
             if (getGasOptionsLoading) return undefined
-            if (isLessThan(maxPriorityFeePerGas, gasOptions?.low?.suggestedMaxPriorityFeePerGas ?? 0))
+            if (isLessThan(maxPriorityFeePerGas, gasOptions?.[GasOptionType.SLOW]?.suggestedMaxPriorityFeePerGas ?? 0))
                 return t('wallet_transfer_error_max_priority_gas_fee_too_low')
             if (
                 isGreaterThan(
                     maxPriorityFeePerGas,
-                    multipliedBy(gasOptions?.high?.suggestedMaxPriorityFeePerGas ?? 0, HIGH_FEE_WARNING_MULTIPLIER),
+                    multipliedBy(
+                        gasOptions?.[GasOptionType.FAST]?.suggestedMaxPriorityFeePerGas ?? 0,
+                        HIGH_FEE_WARNING_MULTIPLIER,
+                    ),
                 )
             )
                 return t('wallet_transfer_error_max_priority_gas_fee_too_high')
@@ -174,12 +175,15 @@ export const GasSetting1559: FC<GasSettingProps> = memo(
 
         const maxFeeGasHelperText = useMemo(() => {
             if (getGasOptionsLoading) return undefined
-            if (isLessThan(maxFeePerGas, gasOptions?.estimatedBaseFee ?? 0))
+            if (isLessThan(maxFeePerGas, gasOptions?.[GasOptionType.SLOW].estimatedBaseFee ?? 0))
                 return t('wallet_transfer_error_max_fee_too_low')
             if (
                 isGreaterThan(
                     maxFeePerGas,
-                    multipliedBy(gasOptions?.high?.suggestedMaxFeePerGas ?? 0, HIGH_FEE_WARNING_MULTIPLIER),
+                    multipliedBy(
+                        gasOptions?.[GasOptionType.FAST]?.suggestedMaxFeePerGas ?? 0,
+                        HIGH_FEE_WARNING_MULTIPLIER,
+                    ),
                 )
             )
                 return t('wallet_transfer_error_max_fee_too_high')
@@ -193,7 +197,7 @@ export const GasSetting1559: FC<GasSettingProps> = memo(
                     {options.map(({ title, content, gasOption }, index) => (
                         <div
                             key={index}
-                            onClick={() => setGasOption(gasOption)}
+                            onClick={() => setGasOptionType(gasOption)}
                             className={selectedGasOption === gasOption ? classes.selected : undefined}>
                             <Typography className={classes.optionsTitle}>{title}</Typography>
                             <Typography component="div">
@@ -216,20 +220,21 @@ export const GasSetting1559: FC<GasSettingProps> = memo(
                     <Controller
                         control={control}
                         render={({ field }) => {
-                            return (
-                                <StyledInput
-                                    {...field}
-                                    onChange={(e) => {
-                                        setGasOption(null)
-                                        field.onChange(e)
-                                    }}
-                                    error={!!errors.gasLimit?.message}
-                                    helperText={errors.gasLimit?.message}
-                                    inputProps={{
-                                        pattern: '^[0-9]*[.,]?[0-9]*$',
-                                    }}
-                                />
-                            )
+                            return <></>
+                            // return (
+                            //     <StyledInput
+                            //         {...field}
+                            //         onChange={(e) => {
+                            //             setGasOptionType(null)
+                            //             field.onChange(e)
+                            //         }}
+                            //         error={!!errors.gasLimit?.message}
+                            //         helperText={errors.gasLimit?.message}
+                            //         inputProps={{
+                            //             pattern: '^[0-9]*[.,]?[0-9]*$',
+                            //         }}
+                            //     />
+                            // )
                         }}
                         name="gasLimit"
                     />
@@ -249,20 +254,23 @@ export const GasSetting1559: FC<GasSettingProps> = memo(
                     </Typography>
                     <Controller
                         control={control}
-                        render={({ field }) => (
-                            <StyledInput
-                                {...field}
-                                onChange={(e) => {
-                                    setGasOption(null)
-                                    field.onChange(e)
-                                }}
-                                error={!!errors.maxPriorityFeePerGas?.message || !!maxPriorFeeHelperText}
-                                helperText={errors.maxPriorityFeePerGas?.message || maxPriorFeeHelperText}
-                                inputProps={{
-                                    pattern: '^[0-9]*[.,]?[0-9]*$',
-                                }}
-                            />
-                        )}
+                        render={({ field }) => {
+                            return <></>
+                            // return (
+                            //     <StyledInput
+                            //         {...field}
+                            //         onChange={(e) => {
+                            //             setGasOptionType(null)
+                            //             field.onChange(e)
+                            //         }}
+                            //         error={!!errors.maxPriorityFeePerGas?.message || !!maxPriorFeeHelperText}
+                            //         helperText={errors.maxPriorityFeePerGas?.message || maxPriorFeeHelperText}
+                            //         inputProps={{
+                            //             pattern: '^[0-9]*[.,]?[0-9]*$',
+                            //         }}
+                            //     />
+                            // )
+                        }}
                         name="maxPriorityFeePerGas"
                     />
                     <Typography className={classes.label}>
@@ -281,20 +289,23 @@ export const GasSetting1559: FC<GasSettingProps> = memo(
                     </Typography>
                     <Controller
                         control={control}
-                        render={({ field }) => (
-                            <StyledInput
-                                {...field}
-                                onChange={(e) => {
-                                    setGasOption(null)
-                                    field.onChange(e)
-                                }}
-                                error={!!errors.maxFeePerGas?.message || !!maxFeeGasHelperText}
-                                helperText={errors.maxFeePerGas?.message || maxFeeGasHelperText}
-                                inputProps={{
-                                    pattern: '^[0-9]*[.,]?[0-9]*$',
-                                }}
-                            />
-                        )}
+                        render={({ field }) => {
+                            return <></>
+                            // return (
+                            //     <StyledInput
+                            //         {...field}
+                            //         onChange={(e) => {
+                            //             setGasOptionType(null)
+                            //             field.onChange(e)
+                            //         }}
+                            //         error={!!errors.maxFeePerGas?.message || !!maxFeeGasHelperText}
+                            //         helperText={errors.maxFeePerGas?.message || maxFeeGasHelperText}
+                            //         inputProps={{
+                            //             pattern: '^[0-9]*[.,]?[0-9]*$',
+                            //         }}
+                            //     />
+                            // )
+                        }}
                         name="maxFeePerGas"
                     />
                 </form>
diff --git a/packages/mask/src/plugins/Wallet/SNSAdaptor/GasSettingDialog/GasSettingBar.tsx b/packages/mask/src/plugins/Wallet/SNSAdaptor/GasSettingDialog/GasSettingBar.tsx
index a713935827df..8f65d46f57ab 100644
--- a/packages/mask/src/plugins/Wallet/SNSAdaptor/GasSettingDialog/GasSettingBar.tsx
+++ b/packages/mask/src/plugins/Wallet/SNSAdaptor/GasSettingDialog/GasSettingBar.tsx
@@ -1,20 +1,14 @@
 import { useMemo, useState, useEffect, useCallback } from 'react'
 import BigNumber from 'bignumber.js'
-import {
-    formatWeiToEther,
-    GasOption,
-    isEIP1559Supported,
-    useChainId,
-    useGasPrice,
-    useNativeTokenDetailed,
-} from '@masknet/web3-shared-evm'
+import { chainResolver, formatWeiToEther } from '@masknet/web3-shared-evm'
 import { Tune } from '@mui/icons-material'
 import { useRemoteControlledDialog } from '@masknet/shared-base-ui'
 import type { NonPayableTx } from '@masknet/web3-contracts/types/types'
 import { Box, IconButton, Typography } from '@mui/material'
 import { WalletMessages } from '../../messages'
 import { TokenPrice } from '../../../../components/shared/TokenPrice'
-import { multipliedBy } from '@masknet/web3-shared-base'
+import { GasOptionType, multipliedBy, NetworkPluginID } from '@masknet/web3-shared-base'
+import { useChainId, useFungibleToken, useGasPrice } from '@masknet/plugin-infra/web3'
 
 export interface GasSettingBarProps {
     gasLimit: number
@@ -27,15 +21,15 @@ export interface GasSettingBarProps {
 export function GasSettingBar(props: GasSettingBarProps) {
     const { gasLimit, gasPrice, maxFee, priorityFee, onChange } = props
 
-    const chainId = useChainId()
-    const { value: nativeTokenDetailed } = useNativeTokenDetailed()
-    const { value: gasPriceDefault = '0' } = useGasPrice()
+    const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
+    const { value: nativeTokenDetailed } = useFungibleToken(NetworkPluginID.PLUGIN_EVM)
+    const { value: gasPriceDefault = '0' } = useGasPrice(NetworkPluginID.PLUGIN_EVM)
 
-    const [gasOption, setGasOption] = useState<GasOption>(GasOption.Medium)
+    const [gasOption, setGasOptionType] = useState<GasOptionType>(GasOptionType.NORMAL)
     const { setDialog: setGasSettingDialog } = useRemoteControlledDialog(WalletMessages.events.gasSettingDialogUpdated)
     const onOpenGasSettingDialog = useCallback(() => {
         setGasSettingDialog(
-            isEIP1559Supported(chainId)
+            chainResolver.isSupport(chainId, 'EIP1559')
                 ? {
                       open: true,
                       gasLimit,
@@ -56,9 +50,9 @@ export function GasSettingBar(props: GasSettingBarProps) {
     useEffect(() => {
         return WalletMessages.events.gasSettingDialogUpdated.on((evt) => {
             if (evt.open) return
-            if (evt.gasOption) setGasOption(evt.gasOption)
+            if (evt.gasOption) setGasOptionType(evt.gasOption)
             onChange(
-                (isEIP1559Supported(chainId)
+                (chainResolver.isSupport(chainId, 'EIP1559')
                     ? {
                           gas: evt.gasLimit,
                           maxFeePerGas: evt.maxFee,
@@ -75,7 +69,7 @@ export function GasSettingBar(props: GasSettingBarProps) {
     const gasFee = useMemo(() => {
         return multipliedBy(
             gasLimit,
-            isEIP1559Supported(chainId) && maxFee ? new BigNumber(maxFee) : gasPrice ?? gasPriceDefault,
+            chainResolver.isSupport(chainId, 'EIP1559') && maxFee ? new BigNumber(maxFee) : gasPrice ?? gasPriceDefault,
         )
     }, [chainId, gasLimit, gasPrice, maxFee, gasPriceDefault])
 
diff --git a/packages/mask/src/plugins/Wallet/SNSAdaptor/GasSettingDialog/Prior1559GasSetting.tsx b/packages/mask/src/plugins/Wallet/SNSAdaptor/GasSettingDialog/Prior1559GasSetting.tsx
index 725775c21af7..885525778f9b 100644
--- a/packages/mask/src/plugins/Wallet/SNSAdaptor/GasSettingDialog/Prior1559GasSetting.tsx
+++ b/packages/mask/src/plugins/Wallet/SNSAdaptor/GasSettingDialog/Prior1559GasSetting.tsx
@@ -1,29 +1,20 @@
 import { zodResolver } from '@hookform/resolvers/zod'
-import {
-    formatWeiToEther,
-    formatWeiToGwei,
-    GasOption,
-    useChainId,
-    useNativeTokenDetailed,
-    ChainIdOptionalRecord,
-    ChainId,
-} from '@masknet/web3-shared-evm'
+import { formatWeiToEther, formatWeiToGwei, ChainIdOptionalRecord, ChainId } from '@masknet/web3-shared-evm'
 import { Typography } from '@mui/material'
 import { LoadingButton } from '@mui/lab'
 import BigNumber from 'bignumber.js'
 import { isEmpty, noop } from 'lodash-unified'
 import { FC, memo, useCallback, useEffect, useMemo, useState } from 'react'
 import { Controller, useForm } from 'react-hook-form'
-import { useAsync, useUpdateEffect } from 'react-use'
+import { useUpdateEffect } from 'react-use'
 import { toWei } from 'web3-utils'
 import { z as zod } from 'zod'
-import { StyledInput } from '../../../../extension/popups/components/StyledInput'
+// import { StyledInput } from '../../../../extension/popups/components/StyledInput'
 import { useI18N } from '../../../../utils'
-import { WalletRPC } from '../../../Wallet/messages'
-import { useNativeTokenPrice } from '../../hooks/useTokenPrice'
 import type { GasSettingProps } from './types'
 import { useGasSettingStyles } from './useGasSettingStyles'
-import { pow10 } from '@masknet/web3-shared-base'
+import { GasOptionType, NetworkPluginID, pow10 } from '@masknet/web3-shared-base'
+import { useChainId, useFungibleToken, useGasOptions, useFungibleTokenPrice } from '@masknet/plugin-infra/web3'
 
 const minGasPriceOfChain: ChainIdOptionalRecord<BigNumber.Value> = {
     [ChainId.BSC]: pow10(9).multipliedBy(5), // 5 Gwei
@@ -32,28 +23,18 @@ const minGasPriceOfChain: ChainIdOptionalRecord<BigNumber.Value> = {
 }
 
 export const Prior1559GasSetting: FC<GasSettingProps> = memo(
-    ({ gasLimit, minGasLimit = 0, gasOption = GasOption.Medium, onConfirm = noop }) => {
+    ({ gasLimit, minGasLimit = 0, gasOptionType = GasOptionType.NORMAL, onConfirm = noop }) => {
         const { classes } = useGasSettingStyles()
         const { t } = useI18N()
-        const chainId = useChainId()
-        const [selectedGasOption, setGasOption] = useState<GasOption | null>(gasOption)
-        const { value: nativeToken } = useNativeTokenDetailed()
+        const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
+        const [selectedGasOption, setGasOptionType] = useState<GasOptionType | null>(gasOptionType)
+        const { value: nativeToken } = useFungibleToken(NetworkPluginID.PLUGIN_EVM)
 
-        const nativeTokenPrice = useNativeTokenPrice(nativeToken?.chainId)
-
-        // #region Get gas options from debank
-        const { value: gasOptions, loading: getGasOptionsLoading } = useAsync(async () => {
-            const response = await WalletRPC.getGasPriceDictFromDeBank(chainId)
-
-            if (!response) return null
+        const { value: nativeTokenPrice = 0 } = useFungibleTokenPrice(NetworkPluginID.PLUGIN_EVM, '', {
+            chainId: nativeToken?.chainId,
+        })
 
-            return {
-                slow: response.data.slow.price,
-                standard: response.data.normal.price,
-                fast: response.data.fast.price,
-            }
-        }, [chainId])
-        // #endregion
+        const { value: gasOptions, loading: getGasOptionsLoading } = useGasOptions(NetworkPluginID.PLUGIN_EVM)
 
         const options = useMemo(
             () =>
@@ -61,18 +42,18 @@ export const Prior1559GasSetting: FC<GasSettingProps> = memo(
                     ? [
                           {
                               title: t('popups_wallet_gas_fee_settings_low'),
-                              gasOption: GasOption.Low,
-                              gasPrice: gasOptions?.slow ?? 0,
+                              gasOption: GasOptionType.SLOW,
+                              gasPrice: gasOptions[GasOptionType.SLOW].suggestedMaxFeePerGas ?? '0',
                           },
                           {
                               title: t('popups_wallet_gas_fee_settings_medium'),
-                              gasOption: GasOption.Medium,
-                              gasPrice: gasOptions?.standard ?? 0,
+                              gasOption: GasOptionType.NORMAL,
+                              gasPrice: gasOptions[GasOptionType.NORMAL].suggestedMaxFeePerGas ?? '0',
                           },
                           {
                               title: t('popups_wallet_gas_fee_settings_high'),
-                              gasOption: GasOption.High,
-                              gasPrice: gasOptions?.fast ?? 0,
+                              gasOption: GasOptionType.FAST,
+                              gasPrice: gasOptions[GasOptionType.FAST].suggestedMaxFeePerGas ?? 0,
                           },
                       ]
                     : null,
@@ -144,7 +125,7 @@ export const Prior1559GasSetting: FC<GasSettingProps> = memo(
                         {options.map(({ title, gasPrice, gasOption }, index) => (
                             <div
                                 key={gasOption}
-                                onClick={() => setGasOption(gasOption)}
+                                onClick={() => setGasOptionType(gasOption)}
                                 className={selectedGasOption === gasOption ? classes.selected : undefined}>
                                 <Typography className={classes.optionsTitle}>{title}</Typography>
                                 <Typography>{formatWeiToGwei(gasPrice ?? 0).toString()} Gwei</Typography>
@@ -165,40 +146,44 @@ export const Prior1559GasSetting: FC<GasSettingProps> = memo(
                     <Controller
                         control={control}
                         render={({ field }) => {
-                            return (
-                                <StyledInput
-                                    {...field}
-                                    onChange={(e) => {
-                                        setGasOption(null)
-                                        field.onChange(e)
-                                    }}
-                                    error={!!errors.gasLimit?.message}
-                                    helperText={errors.gasLimit?.message}
-                                    inputProps={{
-                                        pattern: '^[0-9]*[.,]?[0-9]*$',
-                                    }}
-                                />
-                            )
+                            return <></>
+                            // return (
+                            //     <StyledInput
+                            //         {...field}
+                            //         onChange={(e) => {
+                            //             setGasOptionType(null)
+                            //             field.onChange(e)
+                            //         }}
+                            //         error={!!errors.gasLimit?.message}
+                            //         helperText={errors.gasLimit?.message}
+                            //         inputProps={{
+                            //             pattern: '^[0-9]*[.,]?[0-9]*$',
+                            //         }}
+                            //     />
+                            // )
                         }}
                         name="gasLimit"
                     />
                     <Typography className={classes.label}>{t('popups_wallet_gas_price')}</Typography>
                     <Controller
                         control={control}
-                        render={({ field }) => (
-                            <StyledInput
-                                {...field}
-                                onChange={(e) => {
-                                    setGasOption(null)
-                                    field.onChange(e)
-                                }}
-                                error={!!errors.gasPrice?.message}
-                                helperText={errors.gasPrice?.message}
-                                inputProps={{
-                                    pattern: '^[0-9]*[.,]?[0-9]*$',
-                                }}
-                            />
-                        )}
+                        render={({ field }) => {
+                            return <></>
+                            // return (
+                            //     <StyledInput
+                            //         {...field}
+                            //         onChange={(e) => {
+                            //             setGasOptionType(null)
+                            //             field.onChange(e)
+                            //         }}
+                            //         error={!!errors.gasPrice?.message}
+                            //         helperText={errors.gasPrice?.message}
+                            //         inputProps={{
+                            //             pattern: '^[0-9]*[.,]?[0-9]*$',
+                            //         }}
+                            //     />
+                            // )
+                        }}
                         name="gasPrice"
                     />
                 </form>
diff --git a/packages/mask/src/plugins/Wallet/SNSAdaptor/GasSettingDialog/index.tsx b/packages/mask/src/plugins/Wallet/SNSAdaptor/GasSettingDialog/index.tsx
index 62f0ba6d1d5c..d5111436e333 100644
--- a/packages/mask/src/plugins/Wallet/SNSAdaptor/GasSettingDialog/index.tsx
+++ b/packages/mask/src/plugins/Wallet/SNSAdaptor/GasSettingDialog/index.tsx
@@ -4,9 +4,9 @@ import { WalletMessages } from '@masknet/plugin-wallet'
 import { makeStyles } from '@masknet/theme'
 import { useRemoteControlledDialog } from '@masknet/shared-base-ui'
 import { InjectedDialog } from '@masknet/shared'
-import { GasOption } from '@masknet/web3-shared-evm'
 import { useI18N } from '../../../../utils'
 import { GasSetting } from './GasSetting'
+import { GasOptionType } from '@masknet/web3-shared-base'
 
 const useStyles = makeStyles()((theme) => ({
     content: {
@@ -17,14 +17,14 @@ const useStyles = makeStyles()((theme) => ({
 export const GasSettingDialog: FC = () => {
     const { t } = useI18N()
     const { classes } = useStyles()
-    const [gasOption, setGasOption] = useState<GasOption>(GasOption.Medium)
+    const [gasOptionType, setGasOptionType] = useState<GasOptionType>(GasOptionType.NORMAL)
     const [gasLimit, setGasLimit] = useState(0)
     const [minGasLimit, setMinGasLimit] = useState(0)
     const { open, closeDialog, setDialog } = useRemoteControlledDialog(
         WalletMessages.events.gasSettingDialogUpdated,
         (evt) => {
             if (!evt.open) return
-            if (evt.gasOption) setGasOption(evt.gasOption)
+            if (evt.gasOption) setGasOptionType(evt.gasOption)
             if (evt.gasLimit) setGasLimit(evt.gasLimit)
             if (evt.minGasLimit !== undefined) setMinGasLimit(evt.minGasLimit)
         },
@@ -37,8 +37,8 @@ export const GasSettingDialog: FC = () => {
                     gasLimit={gasLimit}
                     minGasLimit={minGasLimit}
                     onGasLimitChange={setGasLimit}
-                    gasOption={gasOption}
-                    onGasOptionChange={setGasOption}
+                    gasOptionType={gasOptionType}
+                    onGasOptionChange={setGasOptionType}
                     onConfirm={({ gasPrice, gasLimit, maxFee, priorityFee, gasOption }) => {
                         setDialog({
                             open: false,
diff --git a/packages/mask/src/plugins/Wallet/SNSAdaptor/GasSettingDialog/types.ts b/packages/mask/src/plugins/Wallet/SNSAdaptor/GasSettingDialog/types.ts
index 0b0d9bae7e64..cf1afeb43072 100644
--- a/packages/mask/src/plugins/Wallet/SNSAdaptor/GasSettingDialog/types.ts
+++ b/packages/mask/src/plugins/Wallet/SNSAdaptor/GasSettingDialog/types.ts
@@ -1,18 +1,18 @@
-import type { GasOption } from '@masknet/web3-shared-evm'
+import type { GasOptionType } from '@masknet/web3-shared-base'
 
 interface EIP1559ConfirmOptions {
     gasLimit: number
     gasPrice?: string
     maxFee?: string
     priorityFee?: string
-    gasOption: GasOption | null
+    gasOption: GasOptionType | null
 }
 
 export interface GasSettingProps {
     gasLimit?: number
     minGasLimit?: number
     onGasLimitChange?: (newGasLimit: number) => void
-    gasOption?: GasOption
-    onGasOptionChange?: (newOption: GasOption) => void
+    gasOptionType?: GasOptionType
+    onGasOptionChange?: (newOption: GasOptionType) => void
     onConfirm?: (options: EIP1559ConfirmOptions) => void
 }
diff --git a/packages/mask/src/plugins/Wallet/SNSAdaptor/RenameWalletDialog.tsx b/packages/mask/src/plugins/Wallet/SNSAdaptor/RenameWalletDialog.tsx
deleted file mode 100644
index d0c8c77695d3..000000000000
--- a/packages/mask/src/plugins/Wallet/SNSAdaptor/RenameWalletDialog.tsx
+++ /dev/null
@@ -1,78 +0,0 @@
-import { useCallback, useState } from 'react'
-import { Button, DialogContent, DialogActions, TextField } from '@mui/material'
-import { makeStyles } from '@masknet/theme'
-import type { Wallet } from '@masknet/web3-shared-evm'
-import { WalletMessages, WalletRPC } from '../messages'
-import { useRemoteControlledDialog } from '@masknet/shared-base-ui'
-import { InjectedDialog, useSnackbarCallback } from '@masknet/shared'
-import { useI18N } from '../../../utils/i18n-next-ui'
-
-const useStyles = makeStyles()((theme) => ({
-    content: {
-        padding: theme.spacing(2, 4, 3),
-    },
-    dialogActions: {
-        alignItems: 'center',
-        padding: theme.spacing(3, 5),
-    },
-    actionButton: {},
-}))
-
-export function WalletRenameWalletDialog() {
-    const { t } = useI18N()
-    const { classes } = useStyles()
-    const [name, setName] = useState('')
-    const [wallet, setWallet] = useState<Wallet | null>(null)
-    const { open, setDialog } = useRemoteControlledDialog(WalletMessages.events.walletRenameDialogUpdated)
-    WalletMessages.events.walletRenameDialogUpdated.on((data) => {
-        if (!data.open) return
-        setName(data.wallet?.name ?? '')
-        setWallet(data.wallet)
-    })
-    const handleClose = useCallback(() => {
-        setDialog({
-            open: false,
-            wallet: null,
-        })
-    }, [])
-    const handleRename = useSnackbarCallback(
-        () => {
-            if (!wallet?.address) {
-                throw new Error('Not select wallet yet.')
-            }
-            return WalletRPC.renameWallet(wallet.address, name)
-        },
-        [wallet?.address],
-        handleClose,
-    )
-
-    return (
-        <InjectedDialog title={t('wallet_rename')} open={open} onClose={handleClose} maxWidth="xs">
-            <DialogContent className={classes.content}>
-                <TextField
-                    label={t('wallet_rename')}
-                    fullWidth
-                    autoFocus
-                    inputProps={{ maxLength: 12 }}
-                    value={name}
-                    onChange={(e) => setName(e.target.value)}
-                    placeholder={t('plugin_wallet_name_placeholder')}
-                    onKeyPress={(event) => event.key === 'Enter' && handleRename()}
-                />
-            </DialogContent>
-            <DialogActions className={classes.dialogActions}>
-                <Button fullWidth color="inherit" variant="outlined" onClick={handleClose}>
-                    {t('confirm')}
-                </Button>
-                <Button
-                    className={classes.actionButton}
-                    variant="contained"
-                    onClick={handleRename}
-                    disabled={!name}
-                    fullWidth>
-                    {t('cancel')}
-                </Button>
-            </DialogActions>
-        </InjectedDialog>
-    )
-}
diff --git a/packages/mask/src/plugins/Wallet/SNSAdaptor/RestoreLegacyWalletDialog/index.tsx b/packages/mask/src/plugins/Wallet/SNSAdaptor/RestoreLegacyWalletDialog/index.tsx
deleted file mode 100644
index 25d21fd38af3..000000000000
--- a/packages/mask/src/plugins/Wallet/SNSAdaptor/RestoreLegacyWalletDialog/index.tsx
+++ /dev/null
@@ -1,69 +0,0 @@
-import { useCallback, useEffect } from 'react'
-import { useAsyncRetry } from 'react-use'
-import { useRemoteControlledDialog } from '@masknet/shared-base-ui'
-import { InjectedDialog } from '@masknet/shared'
-import { Box } from '@mui/system'
-import { makeStyles } from '@masknet/theme'
-import { ProviderType } from '@masknet/web3-shared-evm'
-import { Button, DialogContent, Typography } from '@mui/material'
-import { PopupRoutes } from '@masknet/shared-base'
-import { WalletMessages, WalletRPC } from '../../messages'
-import { useI18N } from '../../../../utils'
-
-const useStyles = makeStyles()((theme) => ({
-    button: {
-        display: 'flex',
-        alignItems: 'flex-start',
-        flexDirection: 'column',
-    },
-    title: {
-        display: 'block',
-    },
-}))
-
-export function RestoreLegacyWalletDialog() {
-    const { t } = useI18N()
-    const { classes } = useStyles()
-    // const navigate = useNavigate()
-    const { open, setDialog } = useRemoteControlledDialog(WalletMessages.events.restoreLegacyWalletDialogUpdated)
-
-    const onClose = useCallback(() => {
-        setDialog({ open: false })
-    }, [setDialog])
-
-    const { value: legacyWallets = [] } = useAsyncRetry(async () => {
-        const now = new Date()
-        const wallets = await WalletRPC.getLegacyWallets(ProviderType.MaskWallet)
-        if (!wallets.length) return []
-        return wallets.filter((x) => (x.mnemonic || x._public_key_) && x.updatedAt < now)
-    }, [])
-
-    useEffect(() => {
-        if (!legacyWallets.length) return
-        if (!location.href.includes('popups.html')) return
-        if (location.hash.includes(PopupRoutes.LegacyWalletRecovered) || location.hash.includes(PopupRoutes.Unlock))
-            return
-        setDialog({ open: true })
-    }, [legacyWallets.map((x) => x.address).join()])
-
-    const onRestore = useCallback(async () => {
-        // !!! invalid navigation !!!
-        // navigate(PopupRoutes.LegacyWalletRecovered)
-        onClose()
-    }, [onClose, history])
-
-    return (
-        <InjectedDialog open={open} maxWidth="xs" onClose={onClose}>
-            <DialogContent>
-                <Typography className={classes.title} color="textPrimary" variant="body2" component="div">
-                    {t('popups_wallet_dialog_legacy_wallet_tip')}
-                </Typography>
-                <Box display="flex" justifyContent="center">
-                    <Button variant="contained" onClick={onRestore} sx={{ marginTop: 2 }}>
-                        {t('confirm')}
-                    </Button>
-                </Box>
-            </DialogContent>
-        </InjectedDialog>
-    )
-}
diff --git a/packages/mask/src/plugins/Wallet/SNSAdaptor/RiskWarningDialog/index.tsx b/packages/mask/src/plugins/Wallet/SNSAdaptor/RiskWarningDialog/index.tsx
index 19b6b54280de..7fa7ab880e2e 100644
--- a/packages/mask/src/plugins/Wallet/SNSAdaptor/RiskWarningDialog/index.tsx
+++ b/packages/mask/src/plugins/Wallet/SNSAdaptor/RiskWarningDialog/index.tsx
@@ -1,14 +1,15 @@
-import { useCallback } from 'react'
+import { useCallback, useState } from 'react'
 import classnames from 'classnames'
 import { Trans } from 'react-i18next'
-import { useRemoteControlledDialog } from '@masknet/shared-base-ui'
 import { InjectedDialog } from '@masknet/shared'
-import { formatEthereumAddress, useAccount } from '@masknet/web3-shared-evm'
-import PriorityHighIcon from '@mui/icons-material/PriorityHigh'
+import { useRemoteControlledDialog } from '@masknet/shared-base-ui'
 import { Avatar, Button, DialogActions, DialogContent, Paper, Typography } from '@mui/material'
 import { getMaskColor, makeStyles, useCustomSnackbar } from '@masknet/theme'
+import { useWeb3State } from '@masknet/plugin-infra/web3'
+import type { NetworkPluginID } from '@masknet/web3-shared-base'
+import PriorityHighIcon from '@mui/icons-material/PriorityHigh'
 import { useI18N, useMatchXS } from '../../../../utils'
-import { WalletMessages, WalletRPC } from '../../messages'
+import { WalletMessages } from '../../messages'
 import { ActionButtonPromise } from '../../../../extension/options-page/DashboardComponents/ActionButton'
 
 const useStyles = makeStyles()((theme) => ({
@@ -59,15 +60,26 @@ const useStyles = makeStyles()((theme) => ({
 export function WalletRiskWarningDialog() {
     const { t } = useI18N()
     const { classes } = useStyles()
-    const account = useAccount()
     const { showSnackbar } = useCustomSnackbar()
     const isMobile = useMatchXS()
-    const { open, setDialog } = useRemoteControlledDialog(WalletMessages.events.walletRiskWarningDialogUpdated)
+
+    const [account, setAccount] = useState('')
+    const [pluginID, setPluginID] = useState<NetworkPluginID>()
+
+    const { RiskWarning, Others } = useWeb3State(pluginID)
+
+    const { open, setDialog: setRiskWarningDialog } = useRemoteControlledDialog(
+        WalletMessages.events.walletRiskWarningDialogUpdated,
+        (ev) => {
+            if (!ev.open) return
+            setAccount(ev.account)
+            setPluginID(ev.pluginID)
+        },
+    )
 
     const onClose = useCallback(async () => {
-        setDialog({ open: false, type: 'cancel' })
-        if (account) await WalletRPC.setRiskWarningConfirmed(account, false)
-    }, [setDialog])
+        setRiskWarningDialog({ open: false })
+    }, [setRiskWarningDialog])
 
     const onConfirm = useCallback(async () => {
         if (!account) {
@@ -77,9 +89,9 @@ export function WalletRiskWarningDialog() {
             })
             return
         }
-        await WalletRPC.confirmRiskWarning(account)
-        setDialog({ open: false, type: 'confirm' })
-    }, [showSnackbar, account, setDialog])
+        await RiskWarning?.approve?.(account)
+        setRiskWarningDialog({ open: false })
+    }, [showSnackbar, account, setRiskWarningDialog])
 
     return (
         <InjectedDialog
@@ -108,7 +120,7 @@ export function WalletRiskWarningDialog() {
                             {t('nft_wallet_label')}
                         </Typography>
                         <Typography variant="body1" color="textPrimary" className={classes.texts}>
-                            {isMobile ? formatEthereumAddress(account, 5) : account}
+                            {isMobile ? Others?.formatAddress(account, 5) : account}
                         </Typography>
                     </Paper>
                 </Paper>
diff --git a/packages/mask/src/plugins/Wallet/SNSAdaptor/SelectNftContractDialog.tsx b/packages/mask/src/plugins/Wallet/SNSAdaptor/SelectNftContractDialog.tsx
index 08c8328735cf..f4314fd4182b 100644
--- a/packages/mask/src/plugins/Wallet/SNSAdaptor/SelectNftContractDialog.tsx
+++ b/packages/mask/src/plugins/Wallet/SNSAdaptor/SelectNftContractDialog.tsx
@@ -1,28 +1,18 @@
 import { useCallback, useMemo, useState } from 'react'
 import { makeStyles } from '@masknet/theme'
-import { Avatar, Box, CircularProgress, DialogContent, Link, List, ListItem, Typography } from '@mui/material'
-import {
-    ERC721ContractDetailed,
-    EthereumTokenType,
-    formatEthereumAddress,
-    resolveAddressLinkOnExplorer,
-    SocketState,
-    useAccount,
-    useChainId,
-    useCollections,
-    useERC721ContractDetailed,
-    useERC721Tokens,
-} from '@masknet/web3-shared-evm'
+import { Avatar, Box, DialogContent, Link, List, ListItem, Typography, CircularProgress } from '@mui/material'
+import { SchemaType, explorerResolver, ChainId } from '@masknet/web3-shared-evm'
+import { WyvernSchemaName } from 'opensea-js/lib/types'
 import { useRemoteControlledDialog } from '@masknet/shared-base-ui'
 import { InjectedDialog } from '@masknet/shared'
 import { WalletMessages } from '../messages'
 import { useI18N } from '../../../utils'
 import { EthereumAddress } from 'wallet.ts'
-import { SearchInput } from '../../../extension/options-page/DashboardComponents/SearchInput'
 import OpenInNewIcon from '@mui/icons-material/OpenInNew'
 import Fuse from 'fuse.js'
-import { unionBy } from 'lodash-unified'
-import type { NonFungibleTokenAPI } from '@masknet/web3-providers'
+import { SearchInput } from '../../../extension/options-page/DashboardComponents/SearchInput'
+import { useChainId, useNonFungibleCollections, useNonFungibleTokenContract } from '@masknet/plugin-infra/web3'
+import { NetworkPluginID, NonFungibleTokenContract } from '@masknet/web3-shared-base'
 
 const useStyles = makeStyles()((theme) => ({
     search: {
@@ -120,11 +110,9 @@ export function SelectNftContractDialog(props: SelectNftContractDialogProps) {
     const { t } = useI18N()
     const { classes } = useStyles()
 
-    const chainId = useChainId()
-
     const [id, setId] = useState('')
     const [keyword, setKeyword] = useState('')
-    const account = useAccount()
+    const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
 
     // #region remote controlled dialog
     const { open, setDialog } = useRemoteControlledDialog(
@@ -135,7 +123,7 @@ export function SelectNftContractDialog(props: SelectNftContractDialogProps) {
         },
     )
     const onSubmit = useCallback(
-        (contract: ERC721ContractDetailed) => {
+        (contract: NonFungibleTokenContract<ChainId, SchemaType>) => {
             setKeyword('')
             setDialog({
                 open: false,
@@ -154,30 +142,23 @@ export function SelectNftContractDialog(props: SelectNftContractDialogProps) {
     }, [id, setDialog])
     // #endregion
 
-    const { data: assets, state: loadingCollectionState } = useCollections(account, chainId, open)
+    const { value: assets = [], loading } = useNonFungibleCollections(NetworkPluginID.PLUGIN_EVM, chainId)
 
-    const erc721InDb = useERC721Tokens()
-    const allContractsInDb = unionBy(
-        erc721InDb.map((x) => ({ ...x.contractDetailed, address: formatEthereumAddress(x.contractDetailed.address) })),
-        'address',
-    ).map((x) => ({ contractDetailed: x, balance: undefined }))
-
-    const renderAssets = assets.map((x) => ({
-        contractDetailed: {
-            type: EthereumTokenType.ERC721,
-            address: x.address,
-            chainId,
-            name: x.name,
-            symbol: x.symbol,
-            baseURI: x.iconURL,
-            iconURL: x.iconURL,
-        } as ERC721ContractDetailed,
-        balance: x.balance,
-    }))
-
-    const contractList = renderAssets
-        ? unionBy([...renderAssets, ...allContractsInDb], 'contractDetailed.address')
-        : allContractsInDb
+    const contractList = assets
+        .filter((x) => x.schema_name === WyvernSchemaName.ERC721)
+        .map(
+            (x) =>
+                ({
+                    address: x.address,
+                    chainId,
+                    schema: SchemaType.ERC721,
+                    name: x.name,
+                    symbol: x.symbol,
+                    baseURI: x.iconURL,
+                    iconURL: x.iconURL,
+                    balance: x.balance,
+                } as NonFungibleTokenContract<ChainId, SchemaType>),
+        )
 
     // #region fuse
     const fuse = useMemo(
@@ -187,9 +168,9 @@ export function SelectNftContractDialog(props: SelectNftContractDialogProps) {
                 threshold: 0.45,
                 minMatchCharLength: 3,
                 keys: [
-                    { name: 'contractDetailed.name', weight: 0.5 },
-                    { name: 'contractDetailed.symbol', weight: 0.8 },
-                    { name: 'contractDetailed.address', weight: 1 },
+                    { name: 'name', weight: 0.5 },
+                    { name: 'symbol', weight: 0.8 },
+                    { name: 'address', weight: 1 },
                 ],
             }),
         [contractList],
@@ -209,15 +190,8 @@ export function SelectNftContractDialog(props: SelectNftContractDialogProps) {
                         }}
                     />
                 </div>
-                {loadingCollectionState === SocketState.done && (
-                    <SearchResultBox
-                        keyword={keyword}
-                        contractList={contractList}
-                        searchedTokenList={searchedTokenList}
-                        onSubmit={onSubmit}
-                    />
-                )}
-                {loadingCollectionState !== SocketState.done && (
+
+                {loading ? (
                     <Box
                         display="flex"
                         alignItems="center"
@@ -225,6 +199,13 @@ export function SelectNftContractDialog(props: SelectNftContractDialogProps) {
                         sx={{ paddingTop: 4, paddingBottom: 4 }}>
                         <CircularProgress size={24} />
                     </Box>
+                ) : (
+                    <SearchResultBox
+                        keyword={keyword}
+                        contractList={contractList}
+                        searchedTokenList={searchedTokenList}
+                        onSubmit={onSubmit}
+                    />
                 )}
             </DialogContent>
         </InjectedDialog>
@@ -233,17 +214,17 @@ export function SelectNftContractDialog(props: SelectNftContractDialogProps) {
 
 export interface SearchResultBoxProps extends withClasses<never> {
     keyword: string
-    contractList: NonFungibleTokenAPI.ContractBalance[]
-    searchedTokenList: NonFungibleTokenAPI.ContractBalance[]
-    onSubmit: (contract: ERC721ContractDetailed) => void
+    contractList: Array<NonFungibleTokenContract<ChainId, SchemaType>>
+    searchedTokenList: Array<NonFungibleTokenContract<ChainId, SchemaType>>
+    onSubmit: (contract: NonFungibleTokenContract<ChainId, SchemaType>) => void
 }
 
 function SearchResultBox(props: SearchResultBoxProps) {
     const { keyword, searchedTokenList, onSubmit, contractList } = props
+    const { t } = useI18N()
     const { classes } = useStyles()
     const isValid = EthereumAddress.isValid(keyword)
-    const { value: contractDetailed, loading } = useERC721ContractDetailed(keyword)
-    const { t } = useI18N()
+    const { value: contractDetailed = null, loading } = useNonFungibleTokenContract(NetworkPluginID.PLUGIN_EVM, keyword)
     return (
         <div className={classes.searchBox}>
             {keyword !== '' && searchedTokenList.length === 0 ? (
@@ -259,7 +240,7 @@ function SearchResultBox(props: SearchResultBoxProps) {
                         </Box>
                     ) : (
                         <List>
-                            <ContractListItem key="0" onSubmit={onSubmit} contract={{ contractDetailed }} />
+                            <ContractListItem key="0" onSubmit={onSubmit} contract={contractDetailed} />
                         </List>
                     )}
                 </div>
@@ -277,33 +258,30 @@ function SearchResultBox(props: SearchResultBoxProps) {
 }
 
 interface ContractListItemProps {
-    contract: NonFungibleTokenAPI.ContractBalance
-    onSubmit: (contract: ERC721ContractDetailed) => void
+    contract: NonFungibleTokenContract<ChainId, SchemaType>
+    onSubmit: (contract: NonFungibleTokenContract<ChainId, SchemaType>) => void
 }
 
 function ContractListItem(props: ContractListItemProps) {
     const { onSubmit, contract } = props
     const { classes } = useStyles()
-    const chainId = contract.contractDetailed.chainId
-
+    console.log({ contract })
     return (
         <div style={{ position: 'relative' }}>
-            <ListItem className={classes.listItem} onClick={() => onSubmit(contract.contractDetailed)}>
-                <Avatar className={classes.icon} src={contract.contractDetailed.iconURL} />
+            <ListItem className={classes.listItem} onClick={() => onSubmit(contract)}>
+                <Avatar className={classes.icon} src={contract.iconURL} />
                 <Typography className={classes.contractName}>
-                    {contract.contractDetailed.name}{' '}
-                    {contract.contractDetailed.symbol && contract.contractDetailed.symbol !== 'UNKNOWN'
-                        ? '(' + contract.contractDetailed.symbol + ')'
-                        : ''}
+                    {contract.name}{' '}
+                    {contract.symbol && contract.symbol !== 'UNKNOWN' ? '(' + contract.symbol + ')' : ''}
                 </Typography>
                 {contract.balance ? <Typography className={classes.balance}>{contract.balance}</Typography> : null}
             </ListItem>
             <div className={classes.address}>
-                <Typography onClick={() => onSubmit(contract.contractDetailed)} className={classes.addressText}>
-                    {contract.contractDetailed.address}
+                <Typography onClick={() => onSubmit(contract)} className={classes.addressText}>
+                    {contract.address}
                 </Typography>
                 <Link
-                    href={resolveAddressLinkOnExplorer(chainId, contract.contractDetailed.address)}
+                    href={explorerResolver.addressLink(contract.chainId, contract.address)}
                     target="_blank"
                     rel="noopener noreferrer">
                     <OpenInNewIcon className={classes.openIcon} fontSize="small" />
diff --git a/packages/mask/src/plugins/Wallet/SNSAdaptor/SelectProviderDialog/PluginProviderRender.tsx b/packages/mask/src/plugins/Wallet/SNSAdaptor/SelectProviderDialog/PluginProviderRender.tsx
index f7937415e4ed..f79a8e43e45d 100644
--- a/packages/mask/src/plugins/Wallet/SNSAdaptor/SelectProviderDialog/PluginProviderRender.tsx
+++ b/packages/mask/src/plugins/Wallet/SNSAdaptor/SelectProviderDialog/PluginProviderRender.tsx
@@ -1,14 +1,18 @@
+import { useMemo } from 'react'
+import { first } from 'lodash-unified'
 import { SelectedIcon } from '@masknet/icons'
-import type { NetworkPluginID, Web3Plugin } from '@masknet/plugin-infra/web3'
 import { ImageIcon } from '@masknet/shared'
+import { getSiteType } from '@masknet/shared-base'
+import type { Web3Helper, Web3Plugin } from '@masknet/plugin-infra/web3'
+import type { NetworkPluginID } from '@masknet/web3-shared-base'
 import { makeStyles, ShadowRootTooltip } from '@masknet/theme'
 import { Box, List, ListItem, Typography } from '@mui/material'
-import { first } from 'lodash-unified'
 import { useI18N } from '../../../../utils'
 import { ProviderIcon } from './ProviderIcon'
 
 const useStyles = makeStyles()((theme) => {
     const smallQuery = `@media (max-width: ${theme.breakpoints.values.sm}px)`
+
     return {
         root: {
             display: 'flex',
@@ -88,15 +92,29 @@ const useStyles = makeStyles()((theme) => {
 })
 
 export interface PluginProviderRenderProps {
-    networks: Web3Plugin.NetworkDescriptor[]
-    providers: Web3Plugin.ProviderDescriptor[]
-    undeterminedPluginID?: string
+    networks: Web3Helper.NetworkDescriptorAll[]
+    providers: Web3Helper.ProviderDescriptorAll[]
+    undeterminedPluginID?: NetworkPluginID
     undeterminedNetworkID?: string
-    setUndeterminedPluginID: (id: NetworkPluginID) => void
-    setUndeterminedNetworkID: (id: string) => void
-    NetworkIconClickBait?: React.ComponentType<Web3Plugin.UI.NetworkIconClickBaitProps>
-    ProviderIconClickBait?: React.ComponentType<Web3Plugin.UI.ProviderIconClickBaitProps>
-    onSubmit: (result?: Web3Plugin.ConnectionResult) => Promise<void>
+    onNetworkIconClicked: (network: Web3Helper.NetworkDescriptorAll) => void
+    onProviderIconClicked: (
+        network: Web3Helper.NetworkDescriptorAll,
+        provider: Web3Helper.ProviderDescriptorAll,
+    ) => void
+    NetworkIconClickBait?: React.ComponentType<
+        Web3Plugin.UI.NetworkIconClickBaitProps<
+            Web3Helper.Definition[NetworkPluginID]['ChainId'],
+            Web3Helper.Definition[NetworkPluginID]['ProviderType'],
+            Web3Helper.Definition[NetworkPluginID]['NetworkType']
+        >
+    >
+    ProviderIconClickBait?: React.ComponentType<
+        Web3Plugin.UI.ProviderIconClickBaitProps<
+            Web3Helper.Definition[NetworkPluginID]['ChainId'],
+            Web3Helper.Definition[NetworkPluginID]['ProviderType'],
+            Web3Helper.Definition[NetworkPluginID]['NetworkType']
+        >
+    >
 }
 
 export function PluginProviderRender({
@@ -104,14 +122,18 @@ export function PluginProviderRender({
     providers,
     undeterminedPluginID,
     undeterminedNetworkID,
-    setUndeterminedPluginID,
-    setUndeterminedNetworkID,
     NetworkIconClickBait,
     ProviderIconClickBait,
-    onSubmit,
+    onNetworkIconClicked,
+    onProviderIconClicked,
 }: PluginProviderRenderProps) {
     const { classes } = useStyles()
     const { t } = useI18N()
+
+    const selectedNetwork = useMemo(() => {
+        return networks.find((x) => x.ID === undeterminedNetworkID) ?? first(networks)!
+    }, [undeterminedNetworkID, networks.map((x) => x.ID).join()])
+
     return (
         <>
             <Box className={classes.root}>
@@ -127,8 +149,7 @@ export function PluginProviderRender({
                                     className={classes.networkItem}
                                     key={network.ID}
                                     onClick={() => {
-                                        setUndeterminedPluginID(network.networkSupporterPluginID as NetworkPluginID)
-                                        setUndeterminedNetworkID(network.ID)
+                                        onNetworkIconClicked(network)
                                     }}>
                                     <ShadowRootTooltip title={network.name} placement="top">
                                         <div className={classes.iconWrapper}>
@@ -155,35 +176,42 @@ export function PluginProviderRender({
                     <List className={classes.wallets}>
                         {providers
                             .filter((x) => x.providerAdaptorPluginID === undeterminedPluginID)
-                            .map((provider) =>
-                                ProviderIconClickBait ? (
-                                    <ProviderIconClickBait
-                                        key={provider.ID}
-                                        network={
-                                            networks.find((x) => x.ID === undeterminedNetworkID) ?? first(networks)!
-                                        }
-                                        provider={provider}
-                                        onSubmit={(network, provider, result) => {
-                                            onSubmit(result)
-                                        }}>
-                                        <ListItem className={classes.walletItem} key={provider.ID}>
+                            .filter((y) => y.enableRequirements?.supportedChainIds?.includes(selectedNetwork.chainId))
+                            .filter((z) => {
+                                const siteType = getSiteType()
+                                if (!siteType) return false
+                                return [
+                                    ...(z.enableRequirements?.supportedEnhanceableSites ?? []),
+                                    ...(z.enableRequirements?.supportedExtensionSites ?? []),
+                                ].includes(siteType)
+                            })
+                            .map((provider) => (
+                                <ListItem
+                                    className={classes.walletItem}
+                                    key={provider.ID}
+                                    onClick={() => {
+                                        onProviderIconClicked(selectedNetwork, provider)
+                                    }}>
+                                    {ProviderIconClickBait ? (
+                                        <ProviderIconClickBait
+                                            key={provider.ID}
+                                            network={selectedNetwork}
+                                            provider={provider}>
                                             <ProviderIcon
                                                 className={classes.providerIcon}
                                                 icon={provider.icon}
                                                 name={provider.name}
                                             />
-                                        </ListItem>
-                                    </ProviderIconClickBait>
-                                ) : (
-                                    <ListItem className={classes.walletItem} key={provider.ID}>
+                                        </ProviderIconClickBait>
+                                    ) : (
                                         <ProviderIcon
                                             className={classes.providerIcon}
                                             icon={provider.icon}
                                             name={provider.name}
                                         />
-                                    </ListItem>
-                                ),
-                            )}
+                                    )}
+                                </ListItem>
+                            ))}
                     </List>
                 </section>
             </Box>
diff --git a/packages/mask/src/plugins/Wallet/SNSAdaptor/SelectProviderDialog/index.tsx b/packages/mask/src/plugins/Wallet/SNSAdaptor/SelectProviderDialog/index.tsx
index b904b7ce0510..ac3645828113 100644
--- a/packages/mask/src/plugins/Wallet/SNSAdaptor/SelectProviderDialog/index.tsx
+++ b/packages/mask/src/plugins/Wallet/SNSAdaptor/SelectProviderDialog/index.tsx
@@ -1,26 +1,21 @@
 import { useCallback, useEffect, useState } from 'react'
 import { makeStyles } from '@masknet/theme'
 import { DialogContent } from '@mui/material'
-import { useRemoteControlledDialog, useValueRef } from '@masknet/shared-base-ui'
+import { openWindow, useRemoteControlledDialog, useValueRef } from '@masknet/shared-base-ui'
 import { InjectedDialog } from '@masknet/shared'
 import {
     getRegisteredWeb3Networks,
     getRegisteredWeb3Providers,
-    NetworkPluginID,
     useNetworkDescriptor,
-    useNetworkType,
+    useWeb3State,
     useWeb3UI,
-    Web3Plugin,
+    Web3Helper,
 } from '@masknet/plugin-infra/web3'
-import { isDashboardPage } from '@masknet/shared-base'
-import type { ChainId, NetworkType, ProviderType } from '@masknet/web3-shared-evm'
 import { useI18N } from '../../../../utils/i18n-next-ui'
-import { WalletMessages, WalletRPC } from '../../messages'
+import { WalletMessages } from '../../messages'
 import { hasNativeAPI, nativeAPI } from '../../../../../shared/native-rpc'
 import { PluginProviderRender } from './PluginProviderRender'
 import { pluginIDSettings } from '../../../../settings/settings'
-import { useUpdateEffect } from 'react-use'
-import { delay } from '@dimensiondev/kit'
 
 const useStyles = makeStyles()((theme) => ({
     content: {
@@ -37,55 +32,59 @@ export interface SelectProviderDialogProps {}
 export function SelectProviderDialog(props: SelectProviderDialogProps) {
     const { t } = useI18N()
     const { classes } = useStyles()
-    const [underPluginID, setUnderPluginID] = useState<NetworkPluginID | undefined>()
+
     // #region remote controlled dialog logic
-    // #endregion
-    const { open, closeDialog } = useRemoteControlledDialog(
-        WalletMessages.events.selectProviderDialogUpdated,
-        (ev?) => {
-            if (!ev?.open) return
-            setUnderPluginID(ev?.pluginID)
-        },
+    const { open, closeDialog } = useRemoteControlledDialog(WalletMessages.events.selectProviderDialogUpdated)
+    const { setDialog: setConnectWalletDialog } = useRemoteControlledDialog(
+        WalletMessages.events.connectWalletDialogUpdated,
     )
+    // #endregion
+
     // #region native app
     useEffect(() => {
         if (!open) return
         if (hasNativeAPI) nativeAPI?.api.misc_openCreateWalletView()
-    }, [open, underPluginID])
+    }, [open])
     // #endregion
 
-    const isDashboard = isDashboardPage()
     const networks = getRegisteredWeb3Networks()
-    const showNetworks = underPluginID ? networks.filter((x) => x.networkSupporterPluginID === underPluginID) : networks
     const providers = getRegisteredWeb3Providers()
-    const pluginID = useValueRef(pluginIDSettings) as NetworkPluginID
-    const network = useNetworkDescriptor()
-    const [confirmedState, setConfirmedState] = useState(false)
+    const pluginID = useValueRef(pluginIDSettings)
+    const network = useNetworkDescriptor() as Web3Helper.NetworkDescriptorAll
     const [undeterminedPluginID, setUndeterminedPluginID] = useState(pluginID)
-    const [undeterminedNetworkID, setUndeterminedNetworkID] = useState(network?.ID ?? NetworkPluginID.PLUGIN_EVM)
-    const undeterminedNetwork = useNetworkDescriptor(undeterminedNetworkID, undeterminedPluginID)
+    const [undeterminedNetworkID, setUndeterminedNetworkID] = useState(network?.ID)
 
-    const networkType = useNetworkType(undeterminedPluginID)
+    const Web3State = useWeb3State(undeterminedPluginID) as Web3Helper.Web3StateAll
+    const { Others, Provider } = Web3State
 
-    const { NetworkIconClickBait, ProviderIconClickBait } = useWeb3UI(undeterminedPluginID).SelectProviderDialog ?? {}
+    const { NetworkIconClickBait, ProviderIconClickBait } =
+        (useWeb3UI(undeterminedPluginID) as Web3Helper.Web3UIAll).SelectProviderDialog ?? {}
 
-    const onSubmit = useCallback(async (result?: Web3Plugin.ConnectionResult) => {
-        if (result)
-            await WalletRPC.updateAccount(result as Web3Plugin.ConnectionResult<ChainId, NetworkType, ProviderType>)
-        await delay(1000)
-        setConfirmedState(true)
+    const onNetworkIconClicked = useCallback((network: Web3Helper.NetworkDescriptorAll) => {
+        setUndeterminedPluginID(network.networkSupporterPluginID)
+        setUndeterminedNetworkID(network.ID)
     }, [])
 
-    useUpdateEffect(() => {
-        if (!confirmedState) return
+    const onProviderIconClicked = useCallback(
+        async (network: Web3Helper.NetworkDescriptorAll, provider: Web3Helper.ProviderDescriptorAll) => {
+            if (!(await Provider?.isReady(provider.type))) {
+                const downloadLink = Others?.providerResolver.providerDownloadLink(provider.type)
+                if (downloadLink) openWindow(downloadLink)
+                return
+            }
+
+            closeDialog()
 
-        if (undeterminedNetwork?.type === networkType) {
-            pluginIDSettings.value = undeterminedPluginID
-        }
-        setConfirmedState(false)
-        closeDialog()
-        if (isDashboard) WalletMessages.events.walletStatusDialogUpdated.sendToLocal({ open: false })
-    }, [networkType, undeterminedNetwork?.type, undeterminedPluginID, closeDialog, isDashboard, confirmedState])
+            // TODO:
+            // refactor to use react-router-dom
+            setConnectWalletDialog({
+                open: true,
+                network,
+                provider,
+            })
+        },
+        [Others, Provider, closeDialog],
+    )
 
     // not available for the native app
     if (hasNativeAPI) return null
@@ -94,15 +93,14 @@ export function SelectProviderDialog(props: SelectProviderDialogProps) {
         <InjectedDialog title={t('plugin_wallet_select_provider_dialog_title')} open={open} onClose={closeDialog}>
             <DialogContent className={classes.content}>
                 <PluginProviderRender
-                    networks={showNetworks}
+                    networks={networks}
                     providers={providers}
                     undeterminedPluginID={undeterminedPluginID}
                     undeterminedNetworkID={undeterminedNetworkID}
-                    setUndeterminedPluginID={setUndeterminedPluginID}
-                    setUndeterminedNetworkID={setUndeterminedNetworkID}
+                    onNetworkIconClicked={onNetworkIconClicked}
+                    onProviderIconClicked={onProviderIconClicked}
                     NetworkIconClickBait={NetworkIconClickBait}
                     ProviderIconClickBait={ProviderIconClickBait}
-                    onSubmit={onSubmit}
                 />
             </DialogContent>
         </InjectedDialog>
diff --git a/packages/mask/src/plugins/Wallet/SNSAdaptor/SelectWalletDialog.tsx b/packages/mask/src/plugins/Wallet/SNSAdaptor/SelectWalletDialog.tsx
deleted file mode 100644
index a283ba043d4c..000000000000
--- a/packages/mask/src/plugins/Wallet/SNSAdaptor/SelectWalletDialog.tsx
+++ /dev/null
@@ -1,83 +0,0 @@
-import { useState, useCallback } from 'react'
-import { Button, DialogActions, DialogContent } from '@mui/material'
-import { makeStyles, useStylesExtends } from '@masknet/theme'
-import { ProviderType, useWallets, useWallet, NetworkType } from '@masknet/web3-shared-evm'
-import { useRemoteControlledDialog } from '@masknet/shared-base-ui'
-import { InjectedDialog } from '@masknet/shared'
-import { DashboardRoutes } from '@masknet/shared-base'
-import { delay } from '@dimensiondev/kit'
-import { useI18N } from '../../../utils'
-import { WalletMessages, WalletRPC } from '../messages'
-import { WalletInList } from '../../../components/shared/SelectWallet/WalletInList'
-import Services from '../../../extension/service'
-
-const useStyles = makeStyles()({
-    content: {
-        padding: 0,
-        minHeight: 300,
-    },
-})
-
-interface SelectWalletDialogUIProps extends withClasses<never> {}
-
-function SelectWalletDialogUI(props: SelectWalletDialogUIProps) {
-    const { t } = useI18N()
-    const classes = useStylesExtends(useStyles(), props)
-
-    const wallets = useWallets(ProviderType.MaskWallet)
-    const selectedWallet = useWallet()
-
-    // #region remote controlled dialog logic
-    const [networkType, setNetworkType] = useState<NetworkType | undefined>()
-    const { open, closeDialog } = useRemoteControlledDialog(WalletMessages.events.selectWalletDialogUpdated, (ev) => {
-        if (!ev.open) return
-        setNetworkType(ev.networkType)
-    })
-    // #endregion
-
-    const onSelect = useCallback(
-        async (address: string) => {
-            closeDialog()
-            await WalletRPC.updateAccount({
-                account: address,
-                providerType: ProviderType.MaskWallet,
-                networkType,
-            })
-        },
-        [networkType, closeDialog],
-    )
-
-    // #region create new wallet
-    const onCreate = useCallback(async () => {
-        closeDialog()
-        await delay(100)
-        await Services.Helper.openDashboard(DashboardRoutes.CreateMaskWallet, `create=${Date.now()}`)
-    }, [history, closeDialog])
-    // #endregion
-
-    return (
-        <InjectedDialog open={open} onClose={closeDialog} title={t('plugin_wallet_select_a_wallet')} maxWidth="xs">
-            <DialogContent className={classes.content}>
-                {wallets.map((wallet) => (
-                    <WalletInList
-                        key={wallet.address}
-                        wallet={wallet}
-                        selected={selectedWallet?.address === wallet.address}
-                        onClick={() => onSelect(wallet.address)}
-                    />
-                ))}
-            </DialogContent>
-            <DialogActions>
-                <Button variant="text" onClick={onCreate}>
-                    {t('plugin_wallet_on_create')}
-                </Button>
-            </DialogActions>
-        </InjectedDialog>
-    )
-}
-
-export interface SelectWalletDialogProps extends SelectWalletDialogUIProps {}
-
-export function SelectWalletDialog(props: SelectWalletDialogProps) {
-    return <SelectWalletDialogUI {...props} />
-}
diff --git a/packages/mask/src/plugins/Wallet/SNSAdaptor/TransactionDialog.tsx b/packages/mask/src/plugins/Wallet/SNSAdaptor/TransactionDialog.tsx
index 11deb19696fd..df65e9b69cfb 100644
--- a/packages/mask/src/plugins/Wallet/SNSAdaptor/TransactionDialog.tsx
+++ b/packages/mask/src/plugins/Wallet/SNSAdaptor/TransactionDialog.tsx
@@ -1,19 +1,16 @@
+import { useCallback, useState } from 'react'
 import { InjectedDialog } from '@masknet/shared'
 import { useRemoteControlledDialog } from '@masknet/shared-base-ui'
 import { makeStyles, useStylesExtends } from '@masknet/theme'
-import {
-    resolveTransactionLinkOnExplorer,
-    TransactionState,
-    TransactionStateType,
-    useChainId,
-} from '@masknet/web3-shared-evm'
-import DoneIcon from '@mui/icons-material/Done'
-import WarningIcon from '@mui/icons-material/Warning'
 import { Button, CircularProgress, DialogActions, DialogContent, Link, Typography } from '@mui/material'
-import { useCallback, useState } from 'react'
-import { activatedSocialNetworkUI } from '../../../social-network'
+import WarningIcon from '@mui/icons-material/Warning'
+import DoneIcon from '@mui/icons-material/Done'
+import { TransactionState, TransactionStateType, explorerResolver } from '@masknet/web3-shared-evm'
 import { useI18N } from '../../../utils'
 import { WalletMessages } from '../messages'
+import { activatedSocialNetworkUI } from '../../../social-network'
+import { useChainId } from '@masknet/plugin-infra/web3'
+import { NetworkPluginID } from '@masknet/web3-shared-base'
 
 const useStyles = makeStyles()((theme) => ({
     content: {
@@ -46,7 +43,7 @@ function TransactionDialogUI(props: TransactionDialogUIProps) {
     const { t } = useI18N()
     const classes = useStylesExtends(useStyles(), props)
 
-    const chainId = useChainId()
+    const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
 
     // #region remote controlled dialog
     const [state, setState] = useState<TransactionState | null>(null)
@@ -94,7 +91,7 @@ function TransactionDialogUI(props: TransactionDialogUIProps) {
                         <Typography>
                             <Link
                                 className={classes.link}
-                                href={resolveTransactionLinkOnExplorer(chainId, state.hash)}
+                                href={explorerResolver.transactionLink(chainId, state.hash)}
                                 target="_blank"
                                 rel="noopener noreferrer">
                                 {t('plugin_wallet_view_on_explorer')}
@@ -117,7 +114,7 @@ function TransactionDialogUI(props: TransactionDialogUIProps) {
                         <Typography>
                             <Link
                                 className={classes.link}
-                                href={resolveTransactionLinkOnExplorer(chainId, state.receipt.transactionHash)}
+                                href={explorerResolver.transactionLink(chainId, state.receipt.transactionHash)}
                                 target="_blank"
                                 rel="noopener noreferrer">
                                 {t('plugin_wallet_view_on_explorer')}
diff --git a/packages/mask/src/plugins/Wallet/SNSAdaptor/TransactionSnackbar/index.tsx b/packages/mask/src/plugins/Wallet/SNSAdaptor/TransactionSnackbar/index.tsx
index b488c7527b6e..cbd03d52c681 100644
--- a/packages/mask/src/plugins/Wallet/SNSAdaptor/TransactionSnackbar/index.tsx
+++ b/packages/mask/src/plugins/Wallet/SNSAdaptor/TransactionSnackbar/index.tsx
@@ -1,18 +1,13 @@
-import { ReactNode, useCallback, useEffect, useRef } from 'react'
+import { useCallback, useEffect, useRef, useState } from 'react'
+import { useAsync } from 'react-use'
 import { Link } from '@mui/material'
 import LaunchIcon from '@mui/icons-material/Launch'
-import type { TransactionReceipt } from 'web3-core'
-import {
-    createLookupTableResolver,
-    resolveTransactionLinkOnExplorer,
-    TransactionState,
-    TransactionStateType,
-    useChainId,
-} from '@masknet/web3-shared-evm'
+import { createLookupTableResolver, TransactionStatusType } from '@masknet/web3-shared-base'
+import { useWeb3State, Web3Helper } from '@masknet/plugin-infra/web3'
 import { makeStyles, ShowSnackbarOptions, SnackbarKey, SnackbarMessage, useCustomSnackbar } from '@masknet/theme'
+import { isPopupPage } from '@masknet/shared-base'
+import type { TransactionProgressEvent } from '@masknet/plugin-wallet'
 import { WalletMessages } from '../../messages'
-import { RecentTransactionDescription } from '../WalletStatusDialog/TransactionDescription'
-import Services from '../../../../extension/service'
 import { useI18N } from '../../../../utils'
 
 const useStyles = makeStyles()({
@@ -23,49 +18,38 @@ const useStyles = makeStyles()({
 })
 
 export function TransactionSnackbar() {
-    const chainId = useChainId()
     const { classes } = useStyles()
-    const { showSnackbar, closeSnackbar } = useCustomSnackbar()
     const { t } = useI18N()
+    const { showSnackbar, closeSnackbar } = useCustomSnackbar()
     const snackbarKeyRef = useRef<SnackbarKey>()
+
+    const [progress, setProgress] = useState<TransactionProgressEvent>()
+    const { Others, TransactionFormatter } = useWeb3State(progress?.pluginID) as Web3Helper.Web3StateAll
+
     const resolveSnackbarConfig = createLookupTableResolver<
-        TransactionStateType,
+        TransactionStatusType,
         Pick<ShowSnackbarOptions, 'message' | 'processing' | 'variant'>
     >(
         {
-            [TransactionStateType.WAIT_FOR_CONFIRMING]: {
+            [TransactionStatusType.NOT_DEPEND]: {
                 processing: true,
                 variant: 'default',
                 message: t('plugin_wallet_snackbar_wait_for_confirming'),
             },
-            [TransactionStateType.HASH]: {
-                processing: true,
-                variant: 'default',
-                message: t('plugin_wallet_snackbar_hash'),
-            },
-            [TransactionStateType.CONFIRMED]: {
+            [TransactionStatusType.SUCCEED]: {
                 processing: false,
                 variant: 'success',
                 message: t('plugin_wallet_snackbar_confirmed'),
             },
-            [TransactionStateType.RECEIPT]: {
-                processing: false,
-                variant: 'success',
-                message: t('plugin_wallet_snackbar_success'),
-            },
-            [TransactionStateType.FAILED]: {
+            [TransactionStatusType.FAILED]: {
                 processing: false,
                 variant: 'error',
                 message: t('plugin_wallet_snackbar_failed'),
             },
-            [TransactionStateType.UNKNOWN]: {
-                processing: false,
-                variant: 'error',
-                message: '',
-            },
         },
         {},
     )
+
     const showSingletonSnackbar = useCallback(
         (title: SnackbarMessage, options: ShowSnackbarOptions) => {
             if (snackbarKeyRef.current !== undefined) closeSnackbar(snackbarKeyRef.current)
@@ -77,69 +61,35 @@ export function TransactionSnackbar() {
         [showSnackbar, closeSnackbar],
     )
 
-    const getTitle = useCallback((state: TransactionState, payload: any, hash?: string) => {
-        return (
-            <RecentTransactionDescription
-                hash={hash ?? ''}
-                computedPayload={payload}
-                receipt={(state as { receipt: TransactionReceipt }).receipt}
-            />
-        )
-    }, [])
-
-    const getFullMessage = useCallback(
-        (message: ReactNode, hash?: string) => {
-            if (!hash) return message
-            const link = resolveTransactionLinkOnExplorer(chainId, hash)
-            return (
-                <Link className={classes.link} color="inherit" href={link} target="_blank" rel="noopener noreferrer">
-                    {message} <LaunchIcon sx={{ ml: 1 }} fontSize="inherit" />
-                </Link>
-            )
-        },
-        [chainId],
+    useEffect(() =>
+        WalletMessages.events.transactionProgressUpdated.on((progress) => {
+            // disable transaction snackbar on popup page
+            if (!isPopupPage()) setProgress(progress)
+        }),
     )
 
-    useEffect(() => {
-        return WalletMessages.events.transactionProgressUpdated.on(async (progress) => {
-            if (location.href.includes('popups.html')) return
-            if (progress.state.type === TransactionStateType.UNKNOWN) return
-
-            const payload = await Services.Ethereum.getSendTransactionComputedPayload(progress.payload)
-            const config = resolveSnackbarConfig(progress.state.type)
-            const hash =
-                (progress.state as { hash?: string }).hash ??
-                (progress.state as { receipt?: TransactionReceipt }).receipt?.transactionHash
+    useAsync(async () => {
+        if (!progress) return
 
-            const transactionComputedPayloadName = (payload && 'name' in payload && payload.name) || ''
-            if (
-                ['swapExactETHForTokens', 'swapExactTokensForETH', 'swapExactTokensForTokens'].includes(
-                    transactionComputedPayloadName,
-                )
-            ) {
-                if (progress.state.type === TransactionStateType.CONFIRMED) {
-                    showSingletonSnackbar(t('plugin_wallet_snackbar_swap_successful'), {
-                        ...config,
-                        ...{ message: getFullMessage(getTitle(progress.state, payload, hash), hash) },
-                    })
-                    return
-                }
+        const computed = await TransactionFormatter?.formatTransaction?.(progress.chainId, progress.transaction)
+        if (!computed) return
 
-                if (progress.state.type === TransactionStateType.FAILED) {
-                    showSingletonSnackbar(t('plugin_wallet_snackbar_swap_token'), {
-                        ...config,
-                        ...{ message: getFullMessage('Transaction failed', hash) },
-                    })
-                    return
-                }
-            }
-
-            showSingletonSnackbar(getTitle(progress.state, payload, hash), {
-                ...config,
-                ...{ message: getFullMessage(config.message, hash) },
-            } as ShowSnackbarOptions)
-        })
-    }, [getTitle, getFullMessage])
+        showSingletonSnackbar(computed.title, {
+            ...resolveSnackbarConfig(progress.status),
+            ...{
+                message: (
+                    <Link
+                        className={classes.link}
+                        color="inherit"
+                        href={Others?.explorerResolver.transactionLink?.(progress.chainId, progress.transactionId)}
+                        target="_blank"
+                        rel="noopener noreferrer">
+                        {computed.description} <LaunchIcon sx={{ ml: 1 }} fontSize="inherit" />
+                    </Link>
+                ),
+            },
+        } as ShowSnackbarOptions)
+    }, [progress])
 
     return null
 }
diff --git a/packages/mask/src/plugins/Wallet/SNSAdaptor/WalletConnectQRCodeDialog/FirefoxPlatform.tsx b/packages/mask/src/plugins/Wallet/SNSAdaptor/WalletConnectQRCodeDialog/FirefoxPlatform.tsx
deleted file mode 100644
index cee0e80dec89..000000000000
--- a/packages/mask/src/plugins/Wallet/SNSAdaptor/WalletConnectQRCodeDialog/FirefoxPlatform.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Button } from '@mui/material'
-import { useI18N } from '../../../../utils'
-
-export const FirefoxPlatform: React.FC<{ uri: string }> = ({ uri }) => {
-    const { t } = useI18N()
-    return (
-        <Button variant="contained" onClick={() => open(uri)}>
-            {t('plugin_wallet_on_connect_in_firefox')}
-        </Button>
-    )
-}
diff --git a/packages/mask/src/plugins/Wallet/SNSAdaptor/WalletConnectQRCodeDialog/Icons.tsx b/packages/mask/src/plugins/Wallet/SNSAdaptor/WalletConnectQRCodeDialog/Icons.tsx
deleted file mode 100644
index 71a66b2c4de0..000000000000
--- a/packages/mask/src/plugins/Wallet/SNSAdaptor/WalletConnectQRCodeDialog/Icons.tsx
+++ /dev/null
@@ -1,181 +0,0 @@
-import { SvgIcon, SvgIconProps } from '@mui/material'
-
-export const TrustIcon: React.FC<SvgIconProps> = (props) => (
-    <SvgIcon {...props}>
-        <svg viewBox="0 0 128 128" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <rect width="128" height="128" rx="24" fill="#3375BB" />
-            <path
-                fillRule="evenodd"
-                clipRule="evenodd"
-                d="M96.685 31.485c1.149 0 2.236.472 3.036 1.272a4.29 4.29 0 011.23 3.056c-.205 12.223-.676 21.575-1.558 28.98-.862 7.403-2.154 12.9-4.102 17.35-1.313 2.974-2.933 5.435-4.84 7.527-2.564 2.769-5.497 4.778-8.696 6.686-1.368.818-2.79 1.625-4.282 2.473-3.183 1.807-6.683 3.795-10.649 6.448a4.242 4.242 0 01-4.737 0c-4.027-2.684-7.573-4.696-10.785-6.519-.714-.405-1.412-.8-2.095-1.192-3.753-2.174-7.137-4.246-10.09-7.24-1.97-1.969-3.671-4.369-5.025-7.22-1.846-3.814-3.097-8.428-4.02-14.397-1.23-7.978-1.846-18.417-2.071-32.896a4.274 4.274 0 011.21-3.056 4.35 4.35 0 013.056-1.272h1.763c5.435.021 17.433-.512 27.81-8.593a4.278 4.278 0 015.23 0c10.378 8.08 22.376 8.614 27.831 8.593h1.784zm-9.536 47.93c1.333-2.748 2.44-6.542 3.281-11.998 1.005-6.522 1.62-15.382 1.908-27.44-6.4-.185-17.392-1.416-27.872-8.47-10.48 7.034-21.473 8.264-27.851 8.47.225 9.967.676 17.72 1.394 23.81.82 6.932 1.99 11.629 3.446 14.93.964 2.195 2.03 3.775 3.302 5.169 1.702 1.867 3.855 3.405 6.788 5.168 1.217.73 2.558 1.49 4.018 2.316 2.601 1.472 5.58 3.158 8.903 5.273 3.262-2.08 6.197-3.749 8.768-5.21.775-.44 1.517-.863 2.225-1.271 3.61-2.072 6.275-3.794 8.265-5.804 1.333-1.374 2.42-2.871 3.425-4.943z"
-                fill="#fff"
-            />
-        </svg>
-    </SvgIcon>
-)
-
-export const IMTokenIcon: React.FC<SvgIconProps> = (props) => (
-    <SvgIcon {...props}>
-        <svg viewBox="0 0 128 128" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <rect width="128" height="128" rx="24" fill="url(#paint0_linear)" />
-            <path
-                d="M105.782 36.041c2.77 37.67-21.348 55.475-42.97 57.374-20.1 1.765-39.022-10.636-40.681-29.69-1.37-15.74 8.32-22.441 15.933-23.11 7.83-.689 14.41 4.733 14.982 11.297.55 6.311-3.373 9.184-6.1 9.423-2.158.19-4.872-1.125-5.117-3.948-.21-2.426.707-2.757.483-5.334-.399-4.588-4.384-5.123-6.566-4.933-2.64.232-7.431 3.326-6.759 11.033.676 7.774 8.1 13.916 17.832 13.062 10.503-.921 17.815-9.131 18.364-20.646a4.2 4.2 0 01.375-1.768l.004-.014c.113-.242.245-.473.395-.693a9.37 9.37 0 01.883-1.118c.004-.01.004-.01.01-.01.27-.306.596-.637.964-.992 4.587-4.346 21.11-14.595 36.735-11.35a1.565 1.565 0 011.233 1.417z"
-                fill="#fff"
-            />
-            <defs>
-                <linearGradient id="paint0_linear" x1="128" y1="54.5" x2="0" y2="55" gradientUnits="userSpaceOnUse">
-                    <stop stopColor="#11C3D1" />
-                    <stop offset="1" stopColor="#057EB8" />
-                </linearGradient>
-            </defs>
-        </svg>
-    </SvgIcon>
-)
-
-export const RainbowIcon: React.FC<SvgIconProps> = (props) => (
-    <SvgIcon {...props}>
-        <svg viewBox="0 0 128 128" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <rect width="128" height="128" fill="url(#paint0_linear)" rx="24" />
-            <path
-                fill="url(#paint1_radial)"
-                d="M72.527 100.659c0-24.87-20.072-45.034-44.83-45.034H22v11.09c0 3.162 2.55 5.723 5.696 5.723 15.515 0 28.094 12.636 28.094 28.221 0 2.951 2.382 5.341 5.317 5.341h11.42v-5.341z"
-            />
-            <path
-                fill="url(#paint2_radial)"
-                d="M89.263 100.659c0-34.103-27.618-61.846-61.567-61.846H22v16.812h5.696c24.72 0 44.83 20.203 44.83 45.034V106h16.737v-5.341z"
-            />
-            <path
-                fill="url(#paint3_radial)"
-                d="M27.696 38.813c34.003 0 61.567 27.69 61.567 61.846V106h11.42c2.938 0 5.317-2.39 5.317-5.341 0-21.01-8.144-40.765-22.935-55.62C68.277 30.181 48.61 22 27.696 22 24.55 22 22 24.56 22 27.722v11.09h5.696z"
-            />
-            <defs>
-                <radialGradient
-                    id="paint1_radial"
-                    cx="0"
-                    cy="0"
-                    r="1"
-                    gradientTransform="matrix(35.56535 -34.37578 34.64161 35.84038 23.943 103.361)"
-                    gradientUnits="userSpaceOnUse">
-                    <stop offset=".662" stopColor="#01B1E2" />
-                    <stop offset="1" stopColor="#01D64F" />
-                </radialGradient>
-                <radialGradient
-                    id="paint2_radial"
-                    cx="0"
-                    cy="0"
-                    r="1"
-                    gradientTransform="rotate(-44.956 139.17 26.446) scale(69.6855 70.0822)"
-                    gradientUnits="userSpaceOnUse">
-                    <stop offset=".76" stopColor="#FE0" />
-                    <stop offset=".973" stopColor="#FFA000" />
-                </radialGradient>
-                <radialGradient
-                    id="paint3_radial"
-                    cx="0"
-                    cy="0"
-                    r="1"
-                    gradientTransform="matrix(61.26799 -59.14432 59.4229 61.55657 22 106.063)"
-                    gradientUnits="userSpaceOnUse">
-                    <stop offset=".81" stopColor="#EE3E1D" />
-                    <stop offset="1" stopColor="#8854C4" />
-                </radialGradient>
-                <linearGradient id="paint0_linear" x1="64" x2="64" y1="0" y2="128" gradientUnits="userSpaceOnUse">
-                    <stop stopColor="#164299" />
-                    <stop offset="1" stopColor="#001E59" />
-                </linearGradient>
-            </defs>
-        </svg>
-    </SvgIcon>
-)
-
-export const MetaMaskIcon: React.FC<SvgIconProps> = (props) => (
-    <SvgIcon {...props}>
-        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 128 128">
-            <rect width="128" height="128" fill="#fff" rx="24" />
-            <path
-                fill="#E17726"
-                stroke="#E17726"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                d="M99.85 28L69.09 50.81l5.72-13.44L99.85 28z"
-            />
-            <path
-                fill="#E27625"
-                stroke="#E27625"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                d="M28.9 28l30.48 23.03-5.44-13.66L28.9 28zM88.78 80.9l-8.19 12.53 17.53 4.83 5.02-17.1-14.36-.27zM25.65 81.17l4.99 17.1 17.5-4.84-8.16-12.54-14.33.28z"
-            />
-            <path
-                fill="#E27625"
-                stroke="#E27625"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                d="M47.19 59.73l-4.87 7.36 17.34.79-.58-18.7-11.9 10.55zM81.57 59.73L69.5 48.96l-.4 18.92 17.35-.8-4.87-7.35zM48.14 93.43l10.5-5.08-9.04-7.06-1.46 12.14zM70.13 88.35l10.47 5.08-1.43-12.14-9.04 7.06z"
-            />
-            <path
-                fill="#D5BFB2"
-                stroke="#D5BFB2"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                d="M80.59 93.43l-10.47-5.08.85 6.81-.09 2.89 9.7-4.62zM48.13 93.43l9.73 4.62-.06-2.89.83-6.81-10.5 5.08z"
-            />
-            <path
-                fill="#233447"
-                stroke="#233447"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                d="M58.05 76.79l-8.7-2.56 6.14-2.82 2.56 5.38zM70.7 76.79l2.56-5.38 6.17 2.82-8.73 2.56z"
-            />
-            <path
-                fill="#CC6228"
-                stroke="#CC6228"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                d="M48.13 93.43l1.52-12.53-9.68.27 8.16 12.26zM79.1 80.9l1.48 12.53 8.19-12.26-9.68-.27zM86.44 67.09l-17.35.79 1.62 8.9 2.55-5.37 6.18 2.82 7-7.14zM49.34 74.23l6.14-2.82 2.56 5.38 1.61-8.91-17.34-.8 7.03 7.15z"
-            />
-            <path
-                fill="#E27525"
-                stroke="#E27525"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                d="M42.3 67.09l7.28 14.2-.24-7.06-7.03-7.14zM79.42 74.23l-.27 7.06 7.27-14.2-7 7.14zM59.65 67.88l-1.61 8.9 2.04 10.53.45-13.87-.88-5.56zM69.08 67.88l-.85 5.53.43 13.9L70.7 76.8l-1.62-8.91z"
-            />
-            <path
-                fill="#F5841F"
-                stroke="#F5841F"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                d="M70.7 76.79L68.66 87.3l1.46 1.04 9.04-7.06.27-7.06-8.73 2.56zM49.35 74.23l.24 7.06 9.04 7.06 1.46-1.04-2.04-10.52-8.7-2.56z"
-            />
-            <path
-                fill="#C0AC9D"
-                stroke="#C0AC9D"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                d="M70.89 98.05l.09-2.89-.8-.67H58.57l-.76.67.06 2.89-9.73-4.62 3.4 2.8 6.91 4.77h11.84l6.94-4.78 3.37-2.8-9.7 4.63z"
-            />
-            <path
-                fill="#161616"
-                stroke="#161616"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                d="M70.13 88.35l-1.46-1.04h-8.59l-1.46 1.04-.82 6.81.76-.67H70.2l.79.67-.85-6.81z"
-            />
-            <path
-                fill="#763E1A"
-                stroke="#763E1A"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                d="M101.16 52.3l2.58-12.59L99.84 28 70.13 50.05l11.44 9.67 16.16 4.72 3.56-4.17-1.55-1.12 2.46-2.25-1.89-1.46 2.47-1.89-1.61-1.25zM25 39.71l2.62 12.6-1.68 1.24 2.5 1.89-1.89 1.46 2.47 2.25-1.56 1.12 3.56 4.17 16.16-4.72 11.44-9.67L28.9 28 25 39.71z"
-            />
-            <path
-                fill="#F5841F"
-                stroke="#F5841F"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                d="M97.73 64.44l-16.16-4.71 4.87 7.36-7.27 14.2 9.61-.12h14.36l-5.41-16.73zM47.19 59.73l-16.16 4.71-5.38 16.73h14.33l9.61.12-7.27-14.2 4.87-7.36zM69.1 67.88l1.03-17.83 4.69-12.68H53.94l4.69 12.68 1.03 17.83.4 5.6.03 13.83h8.58l.03-13.84.4-5.6z"
-            />
-        </svg>
-    </SvgIcon>
-)
diff --git a/packages/mask/src/plugins/Wallet/SNSAdaptor/WalletConnectQRCodeDialog/QRCodeModel.tsx b/packages/mask/src/plugins/Wallet/SNSAdaptor/WalletConnectQRCodeDialog/QRCodeModel.tsx
deleted file mode 100644
index 2b17ee8f4ed0..000000000000
--- a/packages/mask/src/plugins/Wallet/SNSAdaptor/WalletConnectQRCodeDialog/QRCodeModel.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import { Grid, Typography } from '@mui/material'
-import { makeStyles } from '@masknet/theme'
-import { useI18N } from '../../../../utils'
-import { QRCode } from '@masknet/shared'
-
-const useStyles = makeStyles()((theme) => ({
-    container: {
-        display: 'flex',
-        flexDirection: 'column',
-        alignItems: 'center',
-        justifyContent: 'center',
-    },
-    tip: { fontSize: 14, marginBottom: theme.spacing(2) },
-    onCopy: { marginTop: theme.spacing(1) },
-}))
-
-export const QRCodeModel: React.FC<{
-    uri: string
-}> = ({ uri }) => {
-    const { t } = useI18N()
-
-    const { classes } = useStyles()
-    const style: React.CSSProperties = {
-        width: '80%',
-        display: 'block',
-        margin: 'auto',
-    }
-    return (
-        <Grid className={classes.container}>
-            <Typography className={classes.tip} color="textSecondary">
-                {t('plugin_wallet_qr_code_with_wallet_connect')}
-            </Typography>
-            <QRCode text={uri} canvasProps={{ style }} />
-        </Grid>
-    )
-}
diff --git a/packages/mask/src/plugins/Wallet/SNSAdaptor/WalletConnectQRCodeDialog/README.md b/packages/mask/src/plugins/Wallet/SNSAdaptor/WalletConnectQRCodeDialog/README.md
deleted file mode 100644
index 2f4684e4f2cb..000000000000
--- a/packages/mask/src/plugins/Wallet/SNSAdaptor/WalletConnectQRCodeDialog/README.md
+++ /dev/null
@@ -1,21 +0,0 @@
-# Wallet Connect Mobile Link
-
-## Feature Set
-
-- [x] Firefox Platform (Android only)
-- [x] Safari Platform (iOS only)
-- [x] Otherwise Platform (on QRCode)
-
-## Related discussion
-
-- <https://github.com/DimensionDev/Maskbook/issues/1777>
-
-## Pull requests
-
-- <https://github.com/DimensionDev/Maskbook/pull/1930>
-- <https://github.com/DimensionDev/Maskbook/pull/1931>
-
-## UI Design
-
-- <https://www.figma.com/file/xxHFHHzRgN2E90xCOB83ae/Dashboard?node-id=1144%3A6747>
-- <https://www.figma.com/file/xxHFHHzRgN2E90xCOB83ae/Dashboard?node-id=1945%3A5205>
diff --git a/packages/mask/src/plugins/Wallet/SNSAdaptor/WalletConnectQRCodeDialog/SafariPlatform.tsx b/packages/mask/src/plugins/Wallet/SNSAdaptor/WalletConnectQRCodeDialog/SafariPlatform.tsx
deleted file mode 100644
index 7076453818c2..000000000000
--- a/packages/mask/src/plugins/Wallet/SNSAdaptor/WalletConnectQRCodeDialog/SafariPlatform.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-import { ImageList, ImageListItem, SvgIconProps } from '@mui/material'
-import { makeStyles } from '@masknet/theme'
-import { map } from 'lodash-unified'
-import { createElement } from 'react'
-import { useI18N } from '../../../../utils'
-import { Provider } from '../Provider'
-import { IMTokenIcon, MetaMaskIcon, RainbowIcon, TrustIcon } from './Icons'
-import urlcat from 'urlcat'
-import { openWindow } from '@masknet/shared-base-ui'
-
-const useStyles = makeStyles()({
-    container: { display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center' },
-    grid: { width: '100%' },
-    icon: { fontSize: 45 },
-})
-interface WalletProvider {
-    name: string
-    logo: React.ComponentType<SvgIconProps>
-    protocol: string
-}
-
-const providers: WalletProvider[] = [
-    { name: 'MetaMask', logo: MetaMaskIcon, protocol: 'https://metamask.app.link/wc' },
-    { name: 'Rainbow', logo: RainbowIcon, protocol: 'https://rnbwapp.com/wc' },
-    { name: 'Trust', logo: TrustIcon, protocol: 'https://link.trustwallet.com/wc' },
-    { name: 'imToken', logo: IMTokenIcon, protocol: 'imtokenv2://wc' },
-]
-
-export const SafariPlatform: React.FC<{ uri: string }> = ({ uri }) => {
-    const { t } = useI18N()
-    const { classes } = useStyles()
-    const makeConnect = (link: string) => () => openWindow(urlcat(link, { uri }))
-    const descriptionMapping: Record<string, string> = {
-        MetaMask: t('plugin_wallet_connect_safari_metamask'),
-        Rainbow: t('plugin_wallet_connect_safari_rainbow'),
-        Trust: t('plugin_wallet_connect_safari_trust'),
-        imToken: t('plugin_wallet_connect_safari_im_token'),
-    }
-    return (
-        <ImageList className={classes.grid} gap={16} rowHeight={183}>
-            {map(providers, ({ name, logo, protocol }, key) => (
-                <ImageListItem key={key}>
-                    <Provider
-                        name={name}
-                        logo={createElement(logo, { className: classes.icon, viewBox: '0 0 45 45' })}
-                        description={descriptionMapping[name]}
-                        onClick={makeConnect(protocol)}
-                    />
-                </ImageListItem>
-            ))}
-        </ImageList>
-    )
-}
diff --git a/packages/mask/src/plugins/Wallet/SNSAdaptor/WalletConnectQRCodeDialog/index.tsx b/packages/mask/src/plugins/Wallet/SNSAdaptor/WalletConnectQRCodeDialog/index.tsx
deleted file mode 100644
index 29f60f158d17..000000000000
--- a/packages/mask/src/plugins/Wallet/SNSAdaptor/WalletConnectQRCodeDialog/index.tsx
+++ /dev/null
@@ -1,106 +0,0 @@
-import { useState } from 'react'
-import { useAsync } from 'react-use'
-import { Button, DialogActions, DialogContent } from '@mui/material'
-import { makeStyles } from '@masknet/theme'
-import { useRemoteControlledDialog } from '@masknet/shared-base-ui'
-import { InjectedDialog } from '@masknet/shared'
-import { useI18N } from '../../../../utils'
-import { WalletMessages } from '../../messages'
-import Services from '../../../../extension/service'
-import { SafariPlatform } from './SafariPlatform'
-import { FirefoxPlatform } from './FirefoxPlatform'
-import { QRCodeModel } from './QRCodeModel'
-
-const useStyles = makeStyles()({
-    container: {
-        display: 'flex',
-        flexDirection: 'column',
-        alignItems: 'center',
-        justifyContent: 'center',
-    },
-    actions: {
-        display: 'flex',
-        flexDirection: 'column',
-        alignItems: 'center',
-        justifyContent: 'center',
-        height: '30%',
-    },
-})
-export const WalletConnectQRCodeDialog: React.FC = () => {
-    const [uri, setURI] = useState('')
-
-    // #region remote controlled dialog logic
-    const { open, closeDialog } = useRemoteControlledDialog(
-        WalletMessages.events.walletConnectQRCodeDialogUpdated,
-        (ev) => ev.open && setURI(ev.uri),
-    )
-    // #endregion
-
-    useAsync(async () => {
-        if (!open) return
-        try {
-            await Services.Ethereum.untilWalletConnect()
-        } catch {
-            // do nothing
-        } finally {
-            closeDialog()
-        }
-    }, [open])
-
-    let mode: QRCodeDialogProps['mode'] = 'qrcode'
-    if (process.env.architecture === 'app' && process.env.engine === 'firefox') {
-        mode = 'firefox'
-    } else if (process.env.architecture === 'app' && process.env.engine === 'safari') {
-        mode = 'safari'
-    }
-    return (
-        <QRCodeDialog
-            uri={uri}
-            open={open}
-            mode={mode}
-            onClose={async () => {
-                await Services.Ethereum.cancelWalletConnect()
-                closeDialog()
-            }}
-        />
-    )
-}
-
-export interface QRCodeDialogProps {
-    uri: string
-    open: boolean
-    onClose(): void
-    mode?: 'qrcode' | 'firefox' | 'safari'
-}
-
-export const QRCodeDialog: React.FC<QRCodeDialogProps> = ({ uri, open, onClose, mode }) => {
-    const { t } = useI18N()
-    const { classes } = useStyles()
-    const [qrMode, setQRMode] = useState(false)
-    const PlatformSelector: React.FC = () => {
-        if (!uri) {
-            return null
-        } else if (qrMode || mode === 'qrcode') {
-            return <QRCodeModel uri={uri} />
-        } else if (mode === 'firefox') {
-            return <FirefoxPlatform uri={uri} />
-        } else if (mode === 'safari') {
-            return <SafariPlatform uri={uri} />
-        }
-        return <QRCodeModel uri={uri} />
-    }
-    return (
-        <InjectedDialog open={open} onClose={onClose} title={t('plugin_wallet_connect_dialog_title')}>
-            <DialogContent className={classes.container}>
-                <PlatformSelector />
-            </DialogContent>
-            <DialogActions className={classes.actions}>
-                {mode !== 'qrcode' && (
-                    <Button variant="contained" onClick={() => setQRMode(!qrMode)}>
-                        {t(qrMode ? 'plugin_wallet_return_mobile_wallet_options' : 'plugin_wallet_view_qr_code')}
-                    </Button>
-                )}
-            </DialogActions>
-        </InjectedDialog>
-    )
-}
diff --git a/packages/mask/src/plugins/Wallet/SNSAdaptor/WalletStatusDialog/TransactionDescription.tsx b/packages/mask/src/plugins/Wallet/SNSAdaptor/WalletStatusDialog/TransactionDescription.tsx
deleted file mode 100644
index 876f383f8569..000000000000
--- a/packages/mask/src/plugins/Wallet/SNSAdaptor/WalletStatusDialog/TransactionDescription.tsx
+++ /dev/null
@@ -1,167 +0,0 @@
-import type { TransactionReceipt } from 'web3-core'
-import { first, last } from 'lodash-unified'
-import {
-    ChainId,
-    useNativeTokenDetailed,
-    EthereumRpcType,
-    useChainId,
-    formatBalance,
-    NativeTokenDetailed,
-    ERC20TokenDetailed,
-    FungibleTokenDetailed,
-    useERC20TokenDetailed,
-} from '@masknet/web3-shared-evm'
-import { pow10 } from '@masknet/web3-shared-base'
-import { getContractMethodDescription } from './contractMethodDescription'
-import type { ComputedPayload } from '../../../../extension/background-script/EthereumServices/rpc'
-
-function getTokenAmountDescription(amount = '0', tokenDetailed?: FungibleTokenDetailed, negative?: boolean) {
-    const symbol = negative ? '- ' : ''
-    const value = pow10(9 + (tokenDetailed?.decimals ?? 18)).isGreaterThanOrEqualTo(amount)
-        ? formatBalance(amount, tokenDetailed?.decimals ?? 0, 4)
-        : 'infinite'
-    const token = tokenDetailed?.symbol?.trim()
-    return `${symbol}${value} ${token ?? ''}`
-}
-
-function getTransactionDescription(
-    chainId: ChainId,
-    nativeTokenDetailed?: NativeTokenDetailed | ERC20TokenDetailed,
-    tokenDetailed?: ERC20TokenDetailed,
-    computedPayload?: ComputedPayload | null,
-) {
-    if (!computedPayload) return
-    const type = computedPayload.type
-
-    switch (type) {
-        case EthereumRpcType.SEND_ETHER:
-            return `Send token -${getTokenAmountDescription(
-                computedPayload._tx.value as string | undefined,
-                nativeTokenDetailed,
-            )}`
-        case EthereumRpcType.CONTRACT_INTERACTION:
-            switch (computedPayload.name) {
-                case 'approve':
-                    return `Approve spend ${getTokenAmountDescription(
-                        computedPayload.parameters?.value,
-                        tokenDetailed,
-                    )}`
-                case 'transfer':
-                case 'transferFrom':
-                    return `Transfer token ${getTokenAmountDescription(
-                        computedPayload.parameters?.value,
-                        tokenDetailed,
-                        true,
-                    )}`
-                case 'swapExactETHForTokens':
-                    const inputAmount = formatBalance(computedPayload._tx.value, nativeTokenDetailed?.decimals, 2)
-                    const outputAmount = formatBalance(
-                        computedPayload.parameters!.amountOutMin,
-                        tokenDetailed?.decimals,
-                        2,
-                    )
-                    return `Swap ${inputAmount} ${nativeTokenDetailed?.symbol} for ${outputAmount} ${tokenDetailed?.symbol}`
-                case 'swapExactTokensForETH':
-                    const inAmount = formatBalance(computedPayload.parameters!.amountIn, tokenDetailed?.decimals, 2)
-                    const outAmount = formatBalance(
-                        computedPayload.parameters!.amountOutMin,
-                        nativeTokenDetailed?.decimals,
-                        2,
-                    )
-                    return `Swap ${inAmount} ${tokenDetailed?.symbol} for ${outAmount} ${nativeTokenDetailed?.symbol}`
-                case 'swapExactTokensForTokens':
-                    const amountIn = formatBalance(
-                        computedPayload.parameters!.amountIn,
-                        nativeTokenDetailed?.decimals,
-                        2,
-                    )
-                    const amountOut = formatBalance(
-                        computedPayload.parameters!.amountOutMin,
-                        tokenDetailed?.decimals,
-                        2,
-                    )
-                    return `Swap ${amountIn} ${nativeTokenDetailed?.symbol} for ${amountOut} ${tokenDetailed?.symbol}`
-                default:
-                    const description = getContractMethodDescription(
-                        { name: computedPayload.name ?? '', chainId, address: computedPayload._tx.to ?? '' },
-                        computedPayload,
-                    )
-                    return (
-                        description ??
-                        `${computedPayload.name ?? 'Contract Interaction'} ${
-                            computedPayload._tx.value
-                                ? getTokenAmountDescription(
-                                      computedPayload._tx.value as string | undefined,
-                                      nativeTokenDetailed,
-                                      true,
-                                  )
-                                : ''
-                        }`
-                    )
-            }
-        case EthereumRpcType.CONTRACT_DEPLOYMENT:
-            return `Contract Deployment ${getTokenAmountDescription(
-                computedPayload._tx.value as string | undefined,
-                nativeTokenDetailed,
-                true,
-            )}`
-        case EthereumRpcType.CANCEL:
-            return 'Cancel Transaction'
-        default:
-            return
-    }
-}
-
-export interface RecentTransactionDescriptionProps {
-    hash: string
-    receipt?: TransactionReceipt | null
-    computedPayload?: ComputedPayload | null
-}
-
-export function RecentTransactionDescription(props: RecentTransactionDescriptionProps) {
-    const chainId = useChainId()
-    const { hash, computedPayload } = props
-    const { loading: getNativeTokenLoading, value: nativeTokenDetailed } = useNativeTokenDetailed()
-    let inputTokenAddress: string | undefined = ''
-    let tokenAddress: string | undefined = ''
-
-    if (computedPayload?.type === EthereumRpcType.CONTRACT_INTERACTION) {
-        switch (computedPayload.name) {
-            case 'approve':
-            case 'transfer':
-            case 'transferFrom':
-                tokenAddress = computedPayload._tx.to
-                break
-            case 'swapExactETHForTokens':
-                tokenAddress = last(computedPayload.parameters!.path)
-                break
-            case 'swapExactTokensForETH':
-                tokenAddress = first(computedPayload.parameters!.path)
-                break
-            case 'swapExactTokensForTokens':
-                inputTokenAddress = first(computedPayload.parameters!.path)
-                tokenAddress = last(computedPayload.parameters!.path)
-                break
-            case 'create_red_packet':
-                tokenAddress = computedPayload.parameters!._token_addr
-                break
-            default:
-                tokenAddress = ''
-        }
-    }
-
-    const { loading: getInputERC20TokenLoading, value: inputTokenDetailed } = useERC20TokenDetailed(inputTokenAddress)
-
-    const { loading: getERC20TokenLoading, value: tokenDetailed } = useERC20TokenDetailed(tokenAddress)
-
-    return !getNativeTokenLoading && !getERC20TokenLoading && !getInputERC20TokenLoading ? (
-        <span>
-            {getTransactionDescription(
-                chainId,
-                inputTokenAddress ? inputTokenDetailed : nativeTokenDetailed,
-                tokenDetailed,
-                computedPayload,
-            ) ?? hash}
-        </span>
-    ) : null
-}
diff --git a/packages/mask/src/plugins/Wallet/SNSAdaptor/WalletStatusDialog/contractMethodDescription/getITO_Description.tsx b/packages/mask/src/plugins/Wallet/SNSAdaptor/WalletStatusDialog/contractMethodDescription/getITO_Description.tsx
deleted file mode 100644
index 69f9c670de74..000000000000
--- a/packages/mask/src/plugins/Wallet/SNSAdaptor/WalletStatusDialog/contractMethodDescription/getITO_Description.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import { getITOConstants, isSameAddress, useERC20TokenDetailed, formatBalance } from '@masknet/web3-shared-evm'
-import type { ComputedPayload } from '../../../../../extension/background-script/EthereumServices/rpc'
-import { useI18N } from '../../../../../utils'
-import type { ContractMethodInfo } from '../type'
-
-export function getITO_Description({ name, address, chainId }: ContractMethodInfo, computedPayload: ComputedPayload) {
-    const { ITO2_CONTRACT_ADDRESS } = getITOConstants(chainId)
-    if (!isSameAddress(address, ITO2_CONTRACT_ADDRESS)) return undefined
-
-    const transactionComputedPayloadParams =
-        (computedPayload && 'parameters' in computedPayload && computedPayload.parameters) || undefined
-
-    switch (name) {
-        case 'fill_pool':
-            return (
-                <FillPoolDescription
-                    tokenAddress={transactionComputedPayloadParams?._token_addr ?? ''}
-                    tokenAmount={transactionComputedPayloadParams?._total_tokens!}
-                />
-            )
-        default:
-            return undefined
-    }
-}
-
-interface FillPoolDescriptionProps {
-    tokenAddress: string
-    tokenAmount: string
-}
-
-function FillPoolDescription(props: FillPoolDescriptionProps) {
-    const { tokenAddress, tokenAmount } = props
-
-    const { value: token } = useERC20TokenDetailed(tokenAddress)
-    const { t } = useI18N()
-
-    return (
-        <span>
-            {token && tokenAddress
-                ? t('plugin_ito_transaction_dialog_summary', {
-                      amount: formatBalance(tokenAmount, token.decimals),
-                      symbol: token.symbol,
-                  })
-                : t('plugin_ito_transaction_dialog_summary_with_no_token')}
-        </span>
-    )
-}
diff --git a/packages/mask/src/plugins/Wallet/SNSAdaptor/WalletStatusDialog/contractMethodDescription/getNFTRedpacketDescription.tsx b/packages/mask/src/plugins/Wallet/SNSAdaptor/WalletStatusDialog/contractMethodDescription/getNFTRedpacketDescription.tsx
deleted file mode 100644
index 92c434ecbe92..000000000000
--- a/packages/mask/src/plugins/Wallet/SNSAdaptor/WalletStatusDialog/contractMethodDescription/getNFTRedpacketDescription.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import { getNftRedPacketConstants, isSameAddress } from '@masknet/web3-shared-evm'
-import { i18n } from '../../../../../../shared-ui/locales_legacy'
-import type { ComputedPayload } from '../../../../../extension/background-script/EthereumServices/rpc'
-import type { ContractMethodInfo } from '../type'
-
-export function getNFTRedpacketDescription(
-    { name, address, chainId }: ContractMethodInfo,
-    computedPayload: ComputedPayload,
-) {
-    const { RED_PACKET_NFT_ADDRESS } = getNftRedPacketConstants(chainId)
-
-    if (!isSameAddress(address, RED_PACKET_NFT_ADDRESS)) return undefined
-
-    switch (name) {
-        case 'create_red_packet':
-            return i18n.t('plugin_nft_red_packet_create')
-        default:
-            return undefined
-    }
-}
diff --git a/packages/mask/src/plugins/Wallet/SNSAdaptor/WalletStatusDialog/contractMethodDescription/getRedpacketDescription.tsx b/packages/mask/src/plugins/Wallet/SNSAdaptor/WalletStatusDialog/contractMethodDescription/getRedpacketDescription.tsx
deleted file mode 100644
index 344b5fbf14f4..000000000000
--- a/packages/mask/src/plugins/Wallet/SNSAdaptor/WalletStatusDialog/contractMethodDescription/getRedpacketDescription.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import {
-    getRedPacketConstants,
-    isSameAddress,
-    useERC20TokenDetailed,
-    formatBalance,
-    isNativeTokenAddress,
-    useNativeTokenDetailed,
-} from '@masknet/web3-shared-evm'
-import type { ComputedPayload } from '../../../../../extension/background-script/EthereumServices/rpc'
-import { useI18N } from '../../../../../utils'
-import type { ContractMethodInfo } from '../type'
-
-export function getRedpacketDescription(
-    { name, address, chainId }: ContractMethodInfo,
-    computedPayload: ComputedPayload,
-) {
-    const { HAPPY_RED_PACKET_ADDRESS_V4 } = getRedPacketConstants(chainId)
-
-    if (!isSameAddress(address, HAPPY_RED_PACKET_ADDRESS_V4)) return undefined
-
-    const transactionComputedPayloadParams =
-        (computedPayload && 'parameters' in computedPayload && computedPayload.parameters) || undefined
-
-    switch (name) {
-        case 'create_red_packet':
-            return (
-                <CreateRedpacketDescription
-                    tokenAddress={transactionComputedPayloadParams?._token_addr ?? ''}
-                    tokenAmount={transactionComputedPayloadParams?._total_tokens!}
-                />
-            )
-        default:
-            return undefined
-    }
-}
-
-interface CreateRedpacketDescriptionProps {
-    tokenAddress: string
-    tokenAmount: string
-}
-
-export function CreateRedpacketDescription(props: CreateRedpacketDescriptionProps) {
-    const { tokenAddress, tokenAmount } = props
-    const { t } = useI18N()
-
-    const { value: nativeToken } = useNativeTokenDetailed()
-    const { value: tokenDetailed } = useERC20TokenDetailed(tokenAddress)
-    const token = isNativeTokenAddress(tokenAddress) ? nativeToken : tokenDetailed
-
-    return (
-        <span>
-            {token && tokenAddress
-                ? t('plugin_red_packet_create_with_token', {
-                      amount: formatBalance(tokenAmount, token.decimals),
-                      symbol: token.symbol,
-                  })
-                : t('plugin_red_packet_create')}
-        </span>
-    )
-}
diff --git a/packages/mask/src/plugins/Wallet/SNSAdaptor/WalletStatusDialog/contractMethodDescription/index.ts b/packages/mask/src/plugins/Wallet/SNSAdaptor/WalletStatusDialog/contractMethodDescription/index.ts
deleted file mode 100644
index 745e8af0a3e9..000000000000
--- a/packages/mask/src/plugins/Wallet/SNSAdaptor/WalletStatusDialog/contractMethodDescription/index.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { getRedpacketDescription } from './getRedpacketDescription'
-import { getITO_Description } from './getITO_Description'
-import { getNFTRedpacketDescription } from './getNFTRedpacketDescription'
-import type { ContractMethodInfo } from '../type'
-import type { ComputedPayload } from '../../../../../extension/background-script/EthereumServices/rpc'
-
-export function getContractMethodDescription(contractMethodInfo: ContractMethodInfo, computedPayload: ComputedPayload) {
-    return (
-        getRedpacketDescription(contractMethodInfo, computedPayload) ??
-        getITO_Description(contractMethodInfo, computedPayload) ??
-        getNFTRedpacketDescription(contractMethodInfo, computedPayload)
-    )
-}
diff --git a/packages/mask/src/plugins/Wallet/SNSAdaptor/WalletStatusDialog/index.tsx b/packages/mask/src/plugins/Wallet/SNSAdaptor/WalletStatusDialog/index.tsx
index 4990f9dc09e4..f029007590c5 100644
--- a/packages/mask/src/plugins/Wallet/SNSAdaptor/WalletStatusDialog/index.tsx
+++ b/packages/mask/src/plugins/Wallet/SNSAdaptor/WalletStatusDialog/index.tsx
@@ -1,11 +1,12 @@
 import { useCallback } from 'react'
 import { DialogActions, DialogContent, Typography } from '@mui/material'
 import ErrorIcon from '@mui/icons-material/Error'
+import { makeStyles } from '@masknet/theme'
 import { useRemoteControlledDialog } from '@masknet/shared-base-ui'
 import { InjectedDialog } from '@masknet/shared'
 import { CrossIsolationMessages } from '@masknet/shared-base'
-import { useChainIdValid } from '@masknet/web3-shared-evm'
-import { makeStyles } from '@masknet/theme'
+import { NetworkPluginID } from '@masknet/web3-shared-base'
+import { useChainIdValid } from '@masknet/plugin-infra/web3'
 import { WalletStatusBox } from '../../../../components/shared/WalletStatusBox'
 import { useI18N } from '../../../../utils'
 import { WalletMessages } from '../../messages'
@@ -44,7 +45,7 @@ export function WalletStatusDialog(props: WalletStatusDialogProps) {
     const { t } = useI18N()
 
     const { classes } = useStyles()
-    const chainIdValid = useChainIdValid()
+    const chainIdValid = useChainIdValid(NetworkPluginID.PLUGIN_EVM)
 
     // #region remote controlled dialog logic
     const { open, closeDialog: _closeDialog } = useRemoteControlledDialog(
@@ -63,7 +64,7 @@ export function WalletStatusDialog(props: WalletStatusDialogProps) {
     return (
         <InjectedDialog title="Mask Network" open={open} onClose={closeDialog} maxWidth="sm">
             <DialogContent className={classes.content}>
-                <WalletStatusBox showPendingTransaction />
+                <WalletStatusBox />
             </DialogContent>
             {!chainIdValid ? (
                 <DialogActions className={classes.footer}>
diff --git a/packages/mask/src/plugins/Wallet/SNSAdaptor/WalletStatusDialog/type.ts b/packages/mask/src/plugins/Wallet/SNSAdaptor/WalletStatusDialog/type.ts
deleted file mode 100644
index 30449a045443..000000000000
--- a/packages/mask/src/plugins/Wallet/SNSAdaptor/WalletStatusDialog/type.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import type { ChainId } from '@masknet/web3-shared-evm'
-
-export interface ContractMethodInfo {
-    name: string
-    address: string
-    chainId: ChainId
-}
diff --git a/packages/mask/src/plugins/Wallet/SNSAdaptor/index.tsx b/packages/mask/src/plugins/Wallet/SNSAdaptor/index.tsx
index 61aac56e2886..17c44b166165 100644
--- a/packages/mask/src/plugins/Wallet/SNSAdaptor/index.tsx
+++ b/packages/mask/src/plugins/Wallet/SNSAdaptor/index.tsx
@@ -2,16 +2,12 @@ import type { Plugin } from '@masknet/plugin-infra'
 import { base } from '@masknet/plugin-wallet'
 import { SelectNftContractDialog } from './SelectNftContractDialog'
 import { SelectProviderDialog } from './SelectProviderDialog'
-import { SelectWalletDialog } from './SelectWalletDialog'
-import { WalletConnectQRCodeDialog } from './WalletConnectQRCodeDialog'
 import { WalletStatusDialog } from './WalletStatusDialog'
-import { WalletRenameWalletDialog } from './RenameWalletDialog'
 import { TransactionDialog } from './TransactionDialog'
 import { ConnectWalletDialog } from './ConnectWalletDialog'
 import { WalletRiskWarningDialog } from './RiskWarningDialog'
 import { GasSettingDialog } from './GasSettingDialog'
 import { TransactionSnackbar } from './TransactionSnackbar'
-import { RestoreLegacyWalletDialog } from './RestoreLegacyWalletDialog'
 import { ApplicationBoardDialog } from '../../../components/shared/ApplicationBoardDialog'
 
 const sns: Plugin.SNSAdaptor.Definition = {
@@ -21,16 +17,12 @@ const sns: Plugin.SNSAdaptor.Definition = {
         return (
             <>
                 <TransactionDialog />
-                <SelectWalletDialog />
                 <SelectProviderDialog />
                 <SelectNftContractDialog />
                 <WalletStatusDialog />
                 <ApplicationBoardDialog />
                 <ConnectWalletDialog />
-                <WalletConnectQRCodeDialog />
-                <WalletRenameWalletDialog />
                 <WalletRiskWarningDialog />
-                <RestoreLegacyWalletDialog />
                 <GasSettingDialog />
                 <TransactionSnackbar />
             </>
diff --git a/packages/mask/src/plugins/Wallet/apis/debank.ts b/packages/mask/src/plugins/Wallet/apis/debank.ts
deleted file mode 100644
index e64de5fe31d7..000000000000
--- a/packages/mask/src/plugins/Wallet/apis/debank.ts
+++ /dev/null
@@ -1,59 +0,0 @@
-import type { HistoryResponse, GasPriceDictResponse, WalletTokenRecord } from '../types'
-import urlcat from 'urlcat'
-import { ChainId, formatGweiToWei, getDeBankConstants } from '@masknet/web3-shared-evm'
-
-const DEBANK_API = 'https://api.debank.com'
-const DEBANK_OPEN_API = 'https://openapi.debank.com'
-
-export async function getTransactionList(address: string, chainId: ChainId) {
-    const { CHAIN_ID = '' } = getDeBankConstants(chainId)
-    if (!CHAIN_ID) return null
-    const response = await fetch(`${DEBANK_API}/history/list?user_addr=${address.toLowerCase()}&chain=${CHAIN_ID}`)
-    return (await response.json()) as HistoryResponse
-}
-
-export async function getAssetsList(address: string) {
-    const response = await fetch(
-        `${DEBANK_OPEN_API}/v1/user/token_list?is_all=true&has_balance=true&id=${address.toLowerCase()}`,
-    )
-    try {
-        const records = ((await response.json()) ?? []) as WalletTokenRecord[]
-        return records.map((x) => ({
-            ...x,
-            id: x.id === 'bsc' ? 'bnb' : x.id,
-            chain: x.chain === 'bsc' ? 'bnb' : x.chain,
-        }))
-    } catch {
-        return []
-    }
-}
-
-const auroraChainOnDebank = getDeBankConstants(ChainId.Aurora).CHAIN_ID
-const harmonyChainOnDebank = getDeBankConstants(ChainId.Harmony).CHAIN_ID
-const arbitrumChainOnDebank = getDeBankConstants(ChainId.Arbitrum).CHAIN_ID
-const fieldKeys = ['fast', 'normal', 'slow'] as const
-/**
- * Debank's data might be outdated, like gas price for aurora which requires 1 Gwei at least
- * https://twitter.com/AlexAuroraDev/status/1490353255817302016
- * Once debank fixes it, we will remove this modifier.
- */
-function gasModifier(gasDict: GasPriceDictResponse, chain: string) {
-    if ([auroraChainOnDebank, arbitrumChainOnDebank].includes(chain)) {
-        fieldKeys.forEach((fieldKey) => {
-            const field = gasDict.data[fieldKey]
-            field.price = Math.max(field.price, formatGweiToWei(1).toNumber())
-        })
-    }
-    return gasDict
-}
-
-export async function getGasPriceDict(chainId: ChainId) {
-    const { CHAIN_ID = '' } = getDeBankConstants(chainId)
-    if (!CHAIN_ID) return null
-    const response = await fetch(urlcat(DEBANK_API, '/chain/gas_price_dict_v2', { chain: CHAIN_ID }))
-    const result = await response.json()
-    if (result.error_code === 0) {
-        return gasModifier(result as GasPriceDictResponse, CHAIN_ID)
-    }
-    return null
-}
diff --git a/packages/mask/src/plugins/Wallet/apis/ens.ts b/packages/mask/src/plugins/Wallet/apis/ens.ts
deleted file mode 100644
index 48ec09c400c9..000000000000
--- a/packages/mask/src/plugins/Wallet/apis/ens.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-import stringify from 'json-stable-stringify'
-
-const subgraphURL = 'https://api.thegraph.com/subgraphs/name/dimensiondev/ens-text-resolver-subgraph'
-async function fetchFromENSTextResolverSubgraph<T>(query: string) {
-    const response = await fetch(subgraphURL, {
-        method: 'POST',
-        mode: 'cors',
-        body: stringify({ query }),
-    })
-    const { data } = (await response.json()) as {
-        data: T
-    }
-    return data
-}
-
-export async function fetchAddressNamesByTwitterId(twitterId: string) {
-    if (!twitterId) return []
-    const data = await fetchFromENSTextResolverSubgraph<{
-        twitterHandle?: {
-            domains: Array<{
-                id: string
-                owner: string
-            }>
-        }
-    }>(`
-        query twitterHandle {
-            twitterHandle(id: "${twitterId}") {
-                id
-                raw
-                domains {
-                    id
-                    owner
-                }
-            }
-        }
-    `)
-    if (!data?.twitterHandle) return []
-    return data.twitterHandle.domains
-}
diff --git a/packages/mask/src/plugins/Wallet/apis/metaswap.ts b/packages/mask/src/plugins/Wallet/apis/metaswap.ts
deleted file mode 100644
index 520735eef320..000000000000
--- a/packages/mask/src/plugins/Wallet/apis/metaswap.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import type { ChainId } from '@masknet/web3-shared-evm'
-import urlcat from 'urlcat'
-import type { estimateSuggestResponse } from '../types/metaswap'
-
-const METASWAP_API = 'https://gas-api.metaswap.codefi.network/'
-
-export async function getSuggestedGasFees(chainId: ChainId) {
-    if (chainId) {
-        const response = await fetch(urlcat(METASWAP_API, '/networks/:chainId/suggestedGasFees', { chainId }))
-        return (await response.json()) as estimateSuggestResponse
-    }
-    return undefined
-}
diff --git a/packages/mask/src/plugins/Wallet/apis/nftscan.ts b/packages/mask/src/plugins/Wallet/apis/nftscan.ts
deleted file mode 100644
index 5abae3b81d92..000000000000
--- a/packages/mask/src/plugins/Wallet/apis/nftscan.ts
+++ /dev/null
@@ -1,75 +0,0 @@
-import { ERC721ContractDetailed, EthereumTokenType, ChainId, formatEthereumAddress } from '@masknet/web3-shared-evm'
-
-const NFTSCAN_ID = 't9k2o5GC'
-const NFTSCAN_SECRET = '21da1d638ef5d0bf76e37aa5c2da7fd789ade9e3'
-const NFTSCAN_URL = 'https://restapi.nftscan.com'
-const NFTSCAN_BASE_API = `${NFTSCAN_URL}/api/v1`
-
-let token = ''
-let token_expiration = 0
-
-async function getToken() {
-    const params = new URLSearchParams()
-    params.append('apiKey', NFTSCAN_ID)
-    params.append('apiSecret', NFTSCAN_SECRET)
-    const response = await fetch(`${NFTSCAN_URL}/gw/token?${params.toString()}`, {
-        mode: 'cors',
-    })
-
-    const { data }: { data: { accessToken: string; expiration: number } } = await response.json()
-    token = data.accessToken
-    token_expiration = Date.now() + data.expiration * 1000
-}
-
-export async function findAssets(address: string) {
-    if (token === '' || Date.now() > token_expiration) {
-        await getToken()
-    }
-
-    const response = await fetch(`${NFTSCAN_BASE_API}/getGroupByNftContract`, {
-        headers: {
-            'content-type': 'application/json',
-            'Access-Token': token,
-        },
-        method: 'POST',
-        body: JSON.stringify({
-            erc: 'erc721',
-            user_address: address,
-        }),
-    })
-
-    if (!response.ok) return null
-
-    type NFT_Assets = {
-        nft_asset: any[]
-        nft_asset_count: number
-        nft_contract_address: string
-        nft_platform_count: number
-        nft_platform_describe: string
-        nft_platform_image: string
-        nft_platform_name: string
-    }
-
-    const { data }: { data: NFT_Assets[] | null } = await response.json()
-
-    return data
-        ? data
-              .map((value) => {
-                  const contractDetailed: ERC721ContractDetailed = {
-                      name: value.nft_platform_name,
-                      symbol: '',
-                      address: formatEthereumAddress(value.nft_contract_address),
-                      type: EthereumTokenType.ERC721,
-                      chainId: ChainId.Mainnet,
-                  }
-
-                  const balance = value.nft_asset_count
-
-                  return {
-                      contractDetailed,
-                      balance,
-                  }
-              })
-              .sort((a, b) => b.balance - a.balance)
-        : null
-}
diff --git a/packages/mask/src/plugins/Wallet/apis/opensea.ts b/packages/mask/src/plugins/Wallet/apis/opensea.ts
deleted file mode 100644
index f483dd5b9707..000000000000
--- a/packages/mask/src/plugins/Wallet/apis/opensea.ts
+++ /dev/null
@@ -1,161 +0,0 @@
-import { ChainId } from '@masknet/web3-shared-evm'
-import urlcat from 'urlcat'
-import { OPENSEA_API_KEY } from '../constants'
-
-interface AssetContract {
-    address: string
-    asset_contract_type: string
-    created_date: string
-    name: string
-    nft_version: string
-    opensea_version: unknown | null
-    owner: unknown | null
-    schema_name: 'ERC721' | 'ERC1155'
-    symbol: string
-    total_supply: string
-    description: string | null
-    external_link: string | null
-    image_url: string | null
-    default_to_fiat: boolean
-    dev_buyer_fee_basis_points: number
-    dev_seller_fee_basis_points: number
-    only_proxied_transfers: boolean
-    opensea_buyer_fee_basis_points: number
-    opensea_seller_fee_basis_points: number
-    buyer_fee_basis_points: number
-    seller_fee_basis_points: number
-    payout_address: string | null
-}
-
-interface AssetOwner {
-    user: {
-        username: string | null
-    }
-    profile_img_url: string | null
-    address: string | null
-    config: string | null
-    discord_id: string | null
-}
-
-interface AssetCollection {
-    banner_image_url: string | null
-    chat_url: string | null
-    created_date: string
-    default_to_fiat: boolean
-    description: string | null
-    dev_buyer_fee_basis_points: string
-    dev_seller_fee_basis_points: string
-    discord_url: string | null
-    display_data: {
-        card_display_style: 'contain' | 'padded'
-        images: unknown[]
-    }
-    external_url: string | null
-    featured: boolean
-    featured_image_url: string | null
-    hidden: boolean
-    safelist_request_status: 'not_requested' | 'verified'
-    image_url: string | null
-    is_subject_to_whitelist: boolean
-    large_image_url: string | null
-    medium_username: string | null
-    name: string
-    only_proxied_transfers: boolean
-    opensea_buyer_fee_basis_points: string
-    opensea_seller_fee_basis_points: string
-    payout_address: string | null
-    require_email: boolean
-    short_description: string | null
-    slug: string
-    telegram_url: string | null
-    twitter_username: string | null
-    instagram_username: string | null
-    wiki_url: string | null
-}
-
-interface AssetCreator {
-    user: {
-        username: string | null
-    }
-    profile_img_url: string
-    address: string
-    config: string
-    discord_id: string
-}
-
-export interface Asset {
-    id: number
-    token_id: string
-    num_sales: number
-    background_color: string | null
-    image_url: string | null
-    image_preview_url: string | null
-    image_thumbnail_url: string | null
-    image_original_url: string | null
-    animation_url: string | null
-    animation_original_url: string | null
-    name: string
-    description: string
-    external_link: string
-    asset_contract: AssetContract
-    owner: AssetOwner
-    permalink: string
-    collection: AssetCollection
-    decimals: number
-    sell_orders: unknown[]
-    creator: AssetCreator
-    traits: unknown[]
-    last_sale: unknown | null
-    top_bid: unknown | null
-    listing_date: unknown | null
-    is_presale: boolean
-    transfer_fee_payment_token: unknown | null
-    transfer_fee: unknown | null
-}
-
-export interface AssetsListResponse {
-    assets: Asset[]
-}
-
-export interface CollectionsResponse {
-    collections: AssetCollection[]
-}
-
-interface BaseOptions {
-    chainId?: ChainId
-    page?: number
-    size?: number
-}
-
-const SUPPORTED_CHAIN_ID_LIST = [ChainId.Mainnet, ChainId.Rinkeby]
-
-export function getAssetsList(from: string, opts: BaseOptions & { collection?: string }): Promise<AssetsListResponse> {
-    const { chainId = ChainId.Mainnet, page = 0, size = 50, collection } = opts
-    if (!SUPPORTED_CHAIN_ID_LIST.includes(chainId)) return Promise.resolve({ assets: [] })
-    return request(chainId, '/api/v1/assets', {
-        owner: from.toLowerCase(),
-        limit: size,
-        offset: size * page,
-        collection,
-    })
-}
-
-export function getCollections(owner: string, opts: BaseOptions): Promise<CollectionsResponse> {
-    const { chainId = ChainId.Mainnet, page = 0, size = 300 } = opts
-    if (!SUPPORTED_CHAIN_ID_LIST.includes(chainId)) return Promise.resolve({ collections: [] })
-    return request(chainId, '/api/v1/collections', {
-        asset_owner: owner.toLowerCase(),
-        limit: size,
-        offset: size * page,
-    })
-}
-
-async function request<T>(chainId: ChainId, requestPath: string, params: object): Promise<T> {
-    const domain = chainId === ChainId.Mainnet ? 'https://api.opensea.io' : 'https://rinkeby-api.opensea.io'
-    const response = await fetch(urlcat(domain, requestPath, params), {
-        method: 'GET',
-        mode: 'cors',
-        headers: { 'x-api-key': OPENSEA_API_KEY },
-    })
-    return response.json()
-}
diff --git a/packages/mask/src/plugins/Wallet/apis/zerion.ts b/packages/mask/src/plugins/Wallet/apis/zerion.ts
deleted file mode 100644
index 053bedcdaaf3..000000000000
--- a/packages/mask/src/plugins/Wallet/apis/zerion.ts
+++ /dev/null
@@ -1,87 +0,0 @@
-import io from 'socket.io-client'
-import type {
-    SocketRequestBody,
-    SocketNameSpace,
-    SocketResponseBody,
-    ZerionTransactionResponseBody,
-    ZerionAssetResponseBody,
-} from '../types'
-
-const ZERION_API = 'wss://api-v4.zerion.io'
-// cspell:disable-next-line
-const ZERION_TOKEN = 'Mask.yEUEfDnoxgLBwNEcYPVussxxjdrGwapj'
-
-let socket: SocketIOClient.Socket | null = null
-
-function createSocket() {
-    if (socket?.connected) return socket
-    if (socket) socket.removeAllListeners()
-    return (socket = io(`${ZERION_API}/address`, {
-        transports: ['websocket'],
-        query: {
-            api_token: ZERION_TOKEN,
-        },
-        // disable the auto reconnection
-        reconnection: false,
-    }))
-}
-
-function verify(request: SocketRequestBody, response: any) {
-    // each value in request payload must be found in response meta
-    return Object.keys(request.payload).every((key) => {
-        const requestValue = request.payload[key]
-        const responseMetaValue = response.meta[key]
-        if (typeof requestValue === 'object') {
-            return JSON.stringify(requestValue) === JSON.stringify(responseMetaValue)
-        }
-        return responseMetaValue === requestValue
-    })
-}
-
-function subscribeFromZerion(socketNamespace: SocketNameSpace, requestBody: SocketRequestBody) {
-    return new Promise<SocketResponseBody>((resolve) => {
-        const { socket, namespace } = socketNamespace
-        const model = requestBody.scope[0]
-        socket.emit('subscribe', requestBody)
-        socket.on(`received ${namespace} ${model}`, (data: SocketResponseBody) => {
-            if (verify(requestBody, data)) {
-                resolve(data)
-            }
-        })
-    })
-}
-
-export async function getTransactionList(address: string, scope: string, page?: number, size = 30) {
-    return (await subscribeFromZerion(
-        {
-            namespace: 'address',
-            socket: createSocket(),
-        },
-        {
-            scope: [scope],
-            payload: {
-                address,
-                currency: 'usd',
-                transactions_limit: size,
-                transactions_offset: (page ?? 0) * size,
-                transactions_search_query: '',
-            },
-        },
-    )) as ZerionTransactionResponseBody
-}
-
-export async function getAssetsList(address: string, scope: string) {
-    return (await subscribeFromZerion(
-        {
-            namespace: 'address',
-            socket: createSocket(),
-        },
-        {
-            scope: [scope],
-            payload: {
-                address,
-                currency: 'usd',
-            },
-        },
-    )) as ZerionAssetResponseBody
-}
diff --git a/packages/mask/src/plugins/Wallet/constants.ts b/packages/mask/src/plugins/Wallet/constants.ts
index 8d2236530d36..5e13a80febdb 100644
--- a/packages/mask/src/plugins/Wallet/constants.ts
+++ b/packages/mask/src/plugins/Wallet/constants.ts
@@ -1,8 +1,3 @@
-export {
-    PLUGIN_ID,
-    HD_PATH_WITHOUT_INDEX_ETHEREUM,
-    JSON_RPC_ERROR_CODE,
-    UPDATE_CHAIN_STATE_DELAY,
-} from '@masknet/plugin-wallet'
+export { PLUGIN_ID, HD_PATH_WITHOUT_INDEX_ETHEREUM, UPDATE_CHAIN_STATE_DELAY } from '@masknet/plugin-wallet'
 
 export const OPENSEA_API_KEY = 'c38fe2446ee34f919436c32db480a2e3'
diff --git a/packages/mask/src/plugins/Wallet/database/Plugin.db.ts b/packages/mask/src/plugins/Wallet/database/Plugin.db.ts
index dd3672d7e261..dd74e5576161 100644
--- a/packages/mask/src/plugins/Wallet/database/Plugin.db.ts
+++ b/packages/mask/src/plugins/Wallet/database/Plugin.db.ts
@@ -1,23 +1,7 @@
-import type { AddressBookChunk } from '../services/addressBook'
-import type { RecentTransactionChunk } from '../services/transaction/database'
-import type {
-    ERC1155TokenRecord,
-    ERC20TokenRecord,
-    ERC721TokenRecord,
-    SecretRecord,
-    WalletRecord,
-} from '../services/wallet/type'
+import type { SecretRecord, WalletRecord } from '../services/wallet/type'
 import type { Plugin } from '@masknet/plugin-infra'
 
-export let PluginDB: Plugin.Worker.DatabaseStorage<
-    | AddressBookChunk
-    | RecentTransactionChunk
-    | WalletRecord
-    | SecretRecord
-    | ERC20TokenRecord
-    | ERC721TokenRecord
-    | ERC1155TokenRecord
->
+export let PluginDB: Plugin.Worker.DatabaseStorage<WalletRecord | SecretRecord>
 
 export function setupDatabase(x: typeof PluginDB) {
     PluginDB = x
diff --git a/packages/mask/src/plugins/Wallet/database/Wallet.db.ts b/packages/mask/src/plugins/Wallet/database/Wallet.db.ts
index 32dc42d3f9ee..4b268cd94b39 100644
--- a/packages/mask/src/plugins/Wallet/database/Wallet.db.ts
+++ b/packages/mask/src/plugins/Wallet/database/Wallet.db.ts
@@ -1,13 +1,6 @@
 import { DBSchema, openDB } from 'idb/with-async-ittr'
 import { createDBAccess } from '../../../../background/database/utils/openDB'
-import type {
-    ERC1155TokenRecordInDatabase,
-    ERC20TokenRecordInDatabase,
-    TransactionChunkRecordInDatabase,
-    UnconfirmedRequestChunkRecordInDatabase,
-    LegacyWalletRecordInDatabase,
-} from './types'
-import type { ERC721TokenRecordInDatabase } from '@masknet/web3-shared-evm'
+import type { LegacyWalletRecordInDatabase, UnconfirmedRequestChunkRecordInDatabase } from './types'
 
 function path<T>(x: T) {
     return x
@@ -17,18 +10,8 @@ export const createWalletDBAccess = createDBAccess(() => {
     return openDB<WalletDB>('maskbook-plugin-wallet', 9, {
         async upgrade(db, oldVersion, newVersion, tx) {
             function v0_v1() {
-                db.createObjectStore('ERC20Token', { keyPath: path<keyof ERC20TokenRecordInDatabase>('address') })
                 db.createObjectStore('Wallet', { keyPath: path<keyof LegacyWalletRecordInDatabase>('address') })
             }
-            function v5_v6() {
-                db.createObjectStore('ERC721Token', { keyPath: path<keyof ERC721TokenRecordInDatabase>('record_id') })
-                db.createObjectStore('ERC1155Token', { keyPath: path<keyof ERC1155TokenRecordInDatabase>('record_id') })
-            }
-            function v7_v8() {
-                db.createObjectStore('TransactionChunk', {
-                    keyPath: path<keyof TransactionChunkRecordInDatabase>('record_id'),
-                })
-            }
             function v8_v9() {
                 const pluginStore = 'PluginStore'
                 db.objectStoreNames.contains(pluginStore as any) && db.deleteObjectStore(pluginStore as any)
@@ -38,8 +21,6 @@ export const createWalletDBAccess = createDBAccess(() => {
             }
 
             if (oldVersion < 1) v0_v1()
-            if (oldVersion < 6) v5_v6()
-            if (oldVersion < 8) v7_v8()
             if (oldVersion < 9) v8_v9()
         },
     })
@@ -50,24 +31,8 @@ export interface WalletDB extends DBSchema {
         value: LegacyWalletRecordInDatabase
         key: string
     }
-    TransactionChunk: {
-        value: TransactionChunkRecordInDatabase
-        key: string
-    }
     UnconfirmedRequestChunk: {
         value: UnconfirmedRequestChunkRecordInDatabase
         key: string
     }
-    ERC20Token: {
-        value: ERC20TokenRecordInDatabase
-        key: string
-    }
-    ERC721Token: {
-        value: ERC721TokenRecordInDatabase
-        key: string
-    }
-    ERC1155Token: {
-        value: ERC1155TokenRecordInDatabase
-        key: string
-    }
 }
diff --git a/packages/mask/src/plugins/Wallet/database/types.ts b/packages/mask/src/plugins/Wallet/database/types.ts
index db90a7472533..acf5cdcc89f6 100644
--- a/packages/mask/src/plugins/Wallet/database/types.ts
+++ b/packages/mask/src/plugins/Wallet/database/types.ts
@@ -1,38 +1,5 @@
-import type { ChainId, TransactionStatusType } from '@masknet/web3-shared-evm'
 import type { JsonRpcPayload } from 'web3-core-helpers'
 
-export interface ERC20TokenRecord {
-    /** contract address */
-    address: string
-    /** eth chain id */
-    chainId: ChainId
-    /** token name */
-    name: string
-    /** token decimal */
-    decimals: number
-    /** token symbol */
-    symbol: string
-}
-
-export interface ERC1155TokenRecord {
-    /** contract address */
-    address: string
-    /** eth chain id */
-    chainId: ChainId
-    /** token name */
-    name: string
-    /** token id */
-    tokenId: string
-    /** asset uri */
-    uri?: string
-    /** asset name */
-    assetName?: string
-    /** asset description */
-    assetDescription?: string
-    /** asset img uri */
-    assetImage?: string
-}
-
 export interface LegacyWalletRecord {
     /** ethereum hex address */
     address: string
@@ -61,24 +28,6 @@ export interface LegacyWalletRecord {
     updatedAt: Date
 }
 
-export interface TransactionRecord {
-    /** A hash labels a transaction uniquely */
-    hash: string
-    /** Status type of transaction: SUCCEED, FAILED or NOT_DEPEND */
-    status: TransactionStatusType
-}
-
-export interface TransactionChunkRecord {
-    /** The transaction owner's address */
-    address: string
-    /** The chain id of network */
-    chain_id: ChainId
-    /** A chunk of recent transactions */
-    transactions: TransactionRecord[]
-    createdAt: Date
-    updatedAt: Date
-}
-
 export interface UnconfirmedRequestChunkRecord {
     /** A chunk of unconfirmed rpc requests */
     requests: JsonRpcPayload[]
@@ -86,18 +35,8 @@ export interface UnconfirmedRequestChunkRecord {
     updatedAt: Date
 }
 
-export interface ERC20TokenRecordInDatabase extends ERC20TokenRecord {}
-
-export interface ERC1155TokenRecordInDatabase extends ERC1155TokenRecord {
-    record_id: string
-}
-
 export interface LegacyWalletRecordInDatabase extends LegacyWalletRecord {}
 
-export interface TransactionChunkRecordInDatabase extends TransactionChunkRecord {
-    record_id: string
-}
-
 export interface UnconfirmedRequestChunkRecordInDatabase extends UnconfirmedRequestChunkRecord {
     record_id: string
 }
diff --git a/packages/mask/src/plugins/Wallet/helpers.ts b/packages/mask/src/plugins/Wallet/helpers.ts
index e0ff38408e7b..fb09a1c371c0 100644
--- a/packages/mask/src/plugins/Wallet/helpers.ts
+++ b/packages/mask/src/plugins/Wallet/helpers.ts
@@ -1,34 +1,5 @@
-import { Asset, CurrencyType, ERC721TokenDetailed, isSameAddress } from '@masknet/web3-shared-evm'
-import type { ERC20TokenRecord, ERC1155TokenRecord } from './database/types'
+import { CurrencyType, FungibleAsset } from '@masknet/web3-shared-base'
+import type { ChainId, SchemaType } from '@masknet/web3-shared-evm'
 
-export function ERC20TokenComparer(a: ERC20TokenRecord | null, b: ERC20TokenRecord | null) {
-    if (!a || !b) return false
-    return isSameAddress(a.address, b.address)
-}
-
-export function ERC20TokenArrayComparer(a: ERC20TokenRecord[], b: ERC20TokenRecord[]) {
-    if (a.length !== b.length) return false
-    return a.every((token, index) => ERC20TokenComparer(token, b[index]))
-}
-
-export function ERC721TokenComparer(a: ERC721TokenDetailed | null, b: ERC721TokenDetailed | null) {
-    if (!a || !b) return false
-    return a.tokenId === b.tokenId
-}
-
-export function ERC721TokenArrayComparer(a: ERC721TokenDetailed[], b: ERC721TokenDetailed[]) {
-    if (a.length !== b.length) return false
-    return a.every((token, index) => ERC721TokenComparer(token, b[index]))
-}
-
-export function ERC1155TokenComparer(a: ERC1155TokenRecord | null, b: ERC1155TokenRecord | null) {
-    if (!a || !b) return false
-    return a.tokenId === b.tokenId
-}
-
-export function ERC1155TokenArrayComparer(a: ERC1155TokenRecord[], b: ERC1155TokenRecord[]) {
-    if (a.length !== b.length) return false
-    return a.every((token, index) => ERC1155TokenComparer(token, b[index]))
-}
-
-export const getTokenUSDValue = (token: Asset) => (token.value ? Number.parseFloat(token.value[CurrencyType.USD]) : 0)
+export const getTokenUSDValue = (token: FungibleAsset<ChainId, SchemaType>) =>
+    token.value ? Number.parseFloat(token.price?.[CurrencyType.USD] ?? '0') : 0
diff --git a/packages/mask/src/plugins/Wallet/hooks/index.ts b/packages/mask/src/plugins/Wallet/hooks/index.ts
index cc9748c4d96b..04cd5484b85f 100644
--- a/packages/mask/src/plugins/Wallet/hooks/index.ts
+++ b/packages/mask/src/plugins/Wallet/hooks/index.ts
@@ -1,6 +1 @@
-export * from './useClearRecentTransactions'
 export * from './useMnemonicWordsPuzzle'
-export * from './useRecentTransactions'
-export * from './useRemoveRecentTransaction'
-export * from './useTokenPrice'
-export * from './useWalletRiskWarningDialog'
diff --git a/packages/mask/src/plugins/Wallet/hooks/useClearRecentTransactions.ts b/packages/mask/src/plugins/Wallet/hooks/useClearRecentTransactions.ts
deleted file mode 100644
index 8b27813f6ca9..000000000000
--- a/packages/mask/src/plugins/Wallet/hooks/useClearRecentTransactions.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { useAccount, useChainId } from '@masknet/web3-shared-evm'
-import { useCallback } from 'react'
-import { WalletRPC } from '../messages'
-
-export function useClearRecentTransactions() {
-    const account = useAccount()
-    const chainId = useChainId()
-
-    return useCallback(async () => {
-        if (!account) return
-        await WalletRPC.clearRecentTransactions(chainId, account)
-    }, [chainId, account])
-}
diff --git a/packages/mask/src/plugins/Wallet/hooks/useRecentTransactions.ts b/packages/mask/src/plugins/Wallet/hooks/useRecentTransactions.ts
deleted file mode 100644
index 6e857e32f3ad..000000000000
--- a/packages/mask/src/plugins/Wallet/hooks/useRecentTransactions.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import { NetworkPluginID, useCurrentWeb3NetworkPluginID } from '@masknet/plugin-infra/web3'
-import { WalletMessages } from '@masknet/plugin-wallet'
-import { useAccount, useChainId } from '@masknet/web3-shared-evm'
-import { useEffect } from 'react'
-import { useAsyncRetry } from 'react-use'
-import { WalletRPC } from '../messages'
-import type { RecentTransactionOptions } from '../services'
-
-export function useRecentTransactions(options?: RecentTransactionOptions) {
-    const account = useAccount()
-    const chainId = useChainId()
-    const pluginId = useCurrentWeb3NetworkPluginID()
-
-    const result = useAsyncRetry(async () => {
-        // Show recent evm transactions only.
-        if (!account || pluginId !== NetworkPluginID.PLUGIN_EVM) return []
-        return WalletRPC.getRecentTransactions(chainId, account, options)
-    }, [chainId, account, JSON.stringify(options), pluginId])
-
-    useEffect(() => WalletMessages.events.transactionStateUpdated.on(result.retry), [result.retry])
-    useEffect(() => WalletMessages.events.transactionsUpdated.on(result.retry), [result.retry])
-
-    return result
-}
diff --git a/packages/mask/src/plugins/Wallet/hooks/useRemoveRecentTransaction.ts b/packages/mask/src/plugins/Wallet/hooks/useRemoveRecentTransaction.ts
deleted file mode 100644
index 16feb00654b3..000000000000
--- a/packages/mask/src/plugins/Wallet/hooks/useRemoveRecentTransaction.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { useAccount, useChainId } from '@masknet/web3-shared-evm'
-import { useCallback } from 'react'
-import { WalletRPC } from '../messages'
-
-export function useRemoveRecentTransaction() {
-    const account = useAccount()
-    const chainId = useChainId()
-
-    return useCallback(
-        async (hash: string) => {
-            if (!account || !hash) return
-            return WalletRPC.removeRecentTransaction(chainId, account, hash)
-        },
-        [chainId, account],
-    )
-}
diff --git a/packages/mask/src/plugins/Wallet/hooks/useTokenPrice.ts b/packages/mask/src/plugins/Wallet/hooks/useTokenPrice.ts
deleted file mode 100644
index 9fdbcb213d41..000000000000
--- a/packages/mask/src/plugins/Wallet/hooks/useTokenPrice.ts
+++ /dev/null
@@ -1,67 +0,0 @@
-import { useEffect, useState } from 'react'
-import { pollingTask } from '@masknet/shared-base'
-import { UPDATE_CHAIN_STATE_DELAY } from '@masknet/plugin-wallet'
-import { WalletRPC } from '../messages'
-import { currentTokenPricesSettings } from '../settings'
-import { ChainId, CurrencyType, getCoinGeckoCoinId, getCoinGeckoPlatformId } from '@masknet/web3-shared-evm'
-
-const task = pollingTask(
-    async () => {
-        await WalletRPC.kickToUpdateTokenPrices()
-        return false
-    },
-    {
-        autoStart: false,
-        delay: UPDATE_CHAIN_STATE_DELAY,
-    },
-)
-export function useTokenPrice(
-    chainId: ChainId | undefined,
-    contractAddress: string | undefined,
-    currencyType: CurrencyType = CurrencyType.USD,
-) {
-    let platformId: string | undefined = undefined
-    let coinId: string | undefined = undefined
-    if (chainId) {
-        platformId = getCoinGeckoPlatformId(chainId)
-        coinId = getCoinGeckoCoinId(chainId)
-    }
-
-    const category = (contractAddress || coinId)?.toLowerCase()
-
-    const [price, setPrice] = useState(0)
-    useEffect(() => {
-        // start the polling task
-        task.reset()
-        return () => task.cancel()
-    }, [])
-
-    useEffect(() => {
-        if (!category) return
-
-        if (contractAddress && platformId) {
-            WalletRPC.trackContract(platformId, contractAddress)
-            WalletRPC.updateTokenPrices()
-        }
-        if (!contractAddress) {
-            WalletRPC.trackNativeToken(category)
-            WalletRPC.updateNativeTokenPrices()
-        }
-        return currentTokenPricesSettings.addListener((newVal) => {
-            const value = newVal[category!]?.[currencyType] ?? 0
-            setPrice(value)
-        })
-    }, [platformId, category, contractAddress])
-    useEffect(() => {
-        if (!category) return
-        const currentTokenPrices = currentTokenPricesSettings.value
-        setPrice(currentTokenPrices[category]?.[currencyType] ?? 0)
-    }, [category, currencyType])
-
-    if (!category) return 0
-    return price
-}
-
-export function useNativeTokenPrice(chainId: ChainId | undefined, currencyType: CurrencyType = CurrencyType.USD) {
-    return useTokenPrice(chainId, undefined, currencyType)
-}
diff --git a/packages/mask/src/plugins/Wallet/hooks/useWalletRiskWarningDialog.ts b/packages/mask/src/plugins/Wallet/hooks/useWalletRiskWarningDialog.ts
deleted file mode 100644
index b59f2f08fef9..000000000000
--- a/packages/mask/src/plugins/Wallet/hooks/useWalletRiskWarningDialog.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { useEffect, useState } from 'react'
-import { useRemoteControlledDialog } from '@masknet/shared-base-ui'
-import { useAccount } from '@masknet/web3-shared-evm'
-import { WalletMessages, WalletRPC } from '../messages'
-
-export const useWalletRiskWarningDialog = () => {
-    const account = useAccount()
-    const [isConfirmed, setConfirmed] = useState(false)
-
-    const fetchRiskWarningStatus = () => {
-        if (!account) setConfirmed(false)
-        else WalletRPC.getRiskWarningConfirmed(account).then((confirmed) => setConfirmed(confirmed ?? false))
-    }
-
-    const { openDialog } = useRemoteControlledDialog(
-        WalletMessages.events.walletRiskWarningDialogUpdated,
-        fetchRiskWarningStatus,
-    )
-
-    useEffect(fetchRiskWarningStatus, [account])
-
-    return { isConfirmed, openDialog }
-}
diff --git a/packages/mask/src/plugins/Wallet/pipes/index.ts b/packages/mask/src/plugins/Wallet/pipes/index.ts
index 648e54554d7e..7ad234528701 100644
--- a/packages/mask/src/plugins/Wallet/pipes/index.ts
+++ b/packages/mask/src/plugins/Wallet/pipes/index.ts
@@ -1,14 +1,11 @@
 import { unreachable } from '@dimensiondev/kit'
 import {
-    ChainId,
-    createLookupTableResolver,
     FilterTransactionType,
     NetworkType,
     FungibleAssetProvider,
-    getChainIdFromNetworkType,
     getZerionConstants,
+    networkResolver,
 } from '@masknet/web3-shared-evm'
-import type { SocketRequestAssetScope } from '../types'
 
 export function resolvePortfolioDataProviderName(provider: FungibleAssetProvider) {
     switch (provider) {
@@ -33,35 +30,9 @@ export function resolveDebankTransactionType(category: string) {
 }
 
 export function resolveZerionAssetsScopeName(networkType: NetworkType) {
-    return getZerionConstants(getChainIdFromNetworkType(networkType)).ASSETS_SCOPE_NAME ?? ''
+    return getZerionConstants(networkResolver.networkChainId(networkType)).ASSETS_SCOPE_NAME ?? ''
 }
 
 export function resolveZerionTransactionsScopeName(networkType: NetworkType) {
-    return getZerionConstants(getChainIdFromNetworkType(networkType)).TRANSACTIONS_SCOPE_NAME ?? ''
+    return getZerionConstants(networkResolver.networkChainId(networkType)).TRANSACTIONS_SCOPE_NAME ?? ''
 }
-
-export const resolveChainByScope = createLookupTableResolver<
-    SocketRequestAssetScope,
-    {
-        chain: string
-        chainId?: ChainId
-    }
->(
-    {
-        assets: {
-            chain: 'eth',
-            chainId: ChainId.Mainnet,
-        },
-        'bsc-assets': {
-            chain: 'bsc',
-            chainId: ChainId.BSC,
-        },
-        'polygon-assets': {
-            chain: 'matic',
-            chainId: ChainId.Matic,
-        },
-    },
-    {
-        chain: 'unknown',
-    },
-)
diff --git a/packages/mask/src/plugins/Wallet/services/account.ts b/packages/mask/src/plugins/Wallet/services/account.ts
index a5c866b20fc9..ef298d56ff6e 100644
--- a/packages/mask/src/plugins/Wallet/services/account.ts
+++ b/packages/mask/src/plugins/Wallet/services/account.ts
@@ -1,76 +1,15 @@
-import { first } from 'lodash-unified'
 import { EthereumAddress } from 'wallet.ts'
-import {
-    ChainId,
-    getChainIdFromNetworkType,
-    getNetworkTypeFromChainId,
-    NetworkType,
-    ProviderType,
-} from '@masknet/web3-shared-evm'
+import { ChainId, chainResolver, networkResolver, NetworkType } from '@masknet/web3-shared-evm'
 import {
     currentMaskWalletAccountSettings,
-    currentAccountSettings,
-    currentChainIdSettings,
     currentMaskWalletChainIdSettings,
     currentMaskWalletNetworkSettings,
-    currentNetworkSettings,
-    currentProviderSettings,
 } from '../settings'
-import { getWallets, hasWallet, updateWallet } from './wallet'
-import { hasNativeAPI, nativeAPI } from '../../../../shared/native-rpc'
 import { Flags } from '../../../../shared'
 
-export async function updateAccount(
-    options: {
-        name?: string
-        account?: string
-        chainId?: ChainId
-        networkType?: NetworkType
-        providerType?: ProviderType
-    } = {},
-) {
-    if (options.chainId && !options.networkType) options.networkType = getNetworkTypeFromChainId(options.chainId)
-    if (!options.chainId && options.networkType) options.chainId = getChainIdFromNetworkType(options.networkType)
-
-    // make sure account and provider type to be updating both
-    if ((options.account && !options.providerType) || (options.account === undefined && options.providerType))
-        throw new Error('Account and provider type must be updating both')
-
-    const { name, account, chainId, providerType, networkType } = options
-
-    // update wallet in the DB
-    if (
-        account &&
-        providerType &&
-        EthereumAddress.isValid(account) &&
-        providerType !== ProviderType.MaskWallet &&
-        !(await hasWallet(account))
-    ) {
-        await updateWallet(account, {})
-    }
-
-    // update global settings
-    if (chainId) {
-        currentChainIdSettings.value = chainId
-        if (hasNativeAPI) {
-            nativeAPI?.api.wallet_switchBlockChain({ networkId: chainId })
-        }
-    }
-    if (networkType) currentNetworkSettings.value = networkType
-    if (account !== undefined) currentAccountSettings.value = account
-    if (providerType) currentProviderSettings.value = providerType
-    if (currentProviderSettings.value === ProviderType.MaskWallet) {
-        await updateMaskAccount({
-            account,
-            chainId,
-            networkType,
-        })
-    }
-}
-
 export async function updateMaskAccount(options: { account?: string; chainId?: ChainId; networkType?: NetworkType }) {
-    if (options.chainId && !options.networkType) options.networkType = getNetworkTypeFromChainId(options.chainId)
-    if (!options.chainId && options.networkType) options.chainId = getChainIdFromNetworkType(options.networkType)
+    if (options.chainId && !options.networkType) options.networkType = chainResolver.chainNetworkType(options.chainId)
+    if (!options.chainId && options.networkType) options.chainId = networkResolver.networkChainId(options.networkType)
 
     const { account, chainId, networkType } = options
     if (chainId) currentMaskWalletChainIdSettings.value = chainId
@@ -78,45 +17,24 @@ export async function updateMaskAccount(options: { account?: string; chainId?: C
     if (account && EthereumAddress.isValid(account)) currentMaskWalletAccountSettings.value = account
 }
 
-export async function resetAccount(
-    options: {
-        account?: string
-        chainId?: ChainId
-        networkType?: NetworkType
-        providerType?: ProviderType
-    } = {},
-) {
-    const { account = '', chainId, networkType, providerType } = options
-    currentAccountSettings.value = account
-    if (providerType === ProviderType.MaskWallet) currentMaskWalletAccountSettings.value = account
-    if (chainId) currentChainIdSettings.value = chainId
-    if (networkType) currentNetworkSettings.value = networkType
-    if (providerType) currentProviderSettings.value = providerType
+export async function resetMaskAccount() {
+    currentMaskWalletChainIdSettings.value = ChainId.Mainnet
+    currentMaskWalletNetworkSettings.value = NetworkType.Ethereum
+    currentMaskWalletAccountSettings.value = ''
 }
 
 // #region select wallet with popups
-let callbackMemorized: (accounts: string[], chainId: ChainId) => void | undefined
+let callbackMemorized: (accounts: string[]) => void | undefined
 
-export async function selectAccountPrepare(callback: (accounts: string[], chainId: ChainId) => void) {
+export async function selectMaskAccountPrepare(callback: (accounts: string[]) => void) {
     callbackMemorized = callback
 }
 
-export async function selectAccount(accounts: string[], chainId: ChainId) {
-    callbackMemorized?.(accounts, chainId)
+export async function selectMaskAccount(accounts: string[]) {
+    callbackMemorized?.(accounts)
 }
 // #endregion
 
-export async function setDefaultWallet() {
-    if (currentAccountSettings.value) return
-    const wallets = await getWallets()
-    const address = first(wallets)?.address
-    if (address)
-        await updateAccount({
-            account: address,
-            providerType: ProviderType.MaskWallet,
-        })
-}
-
 export async function getSupportedNetworks() {
     return [
         NetworkType.Ethereum,
diff --git a/packages/mask/src/plugins/Wallet/services/addressBook.ts b/packages/mask/src/plugins/Wallet/services/addressBook.ts
deleted file mode 100644
index 6a012d9df718..000000000000
--- a/packages/mask/src/plugins/Wallet/services/addressBook.ts
+++ /dev/null
@@ -1,62 +0,0 @@
-import { uniqBy } from 'lodash-unified'
-import { WalletMessages } from '@masknet/plugin-wallet'
-import { ChainId, formatEthereumAddress, isSameAddress } from '@masknet/web3-shared-evm'
-import { PluginDB } from '../database/Plugin.db'
-
-const MAX_ADDRESS_BOOK_SIZE = 20
-
-export interface Record {
-    name: string
-    address: string
-}
-
-export interface AddressBookChunk {
-    id: ChainId
-    type: 'address-book'
-    records: Record[]
-    createdAt: Date
-    updatedAt: Date
-}
-
-export async function getAllAddress(chainId: ChainId) {
-    const chunk = await PluginDB.get('address-book', chainId)
-    return chunk?.records ?? []
-}
-
-export async function addAddress(chainId: ChainId, address: string) {
-    const now = new Date()
-    const address_ = formatEthereumAddress(address)
-    const chunk = await PluginDB.get('address-book', chainId)
-    await PluginDB.add({
-        id: chainId,
-        type: 'address-book',
-        records: uniqBy(
-            [
-                {
-                    name: address_,
-                    address: address_,
-                },
-                // place old address last
-                ...(chunk?.records ?? []),
-            ],
-            (x) => x.address,
-        ).slice(0, MAX_ADDRESS_BOOK_SIZE),
-        createdAt: chunk?.createdAt ?? now,
-        updatedAt: now,
-    })
-    WalletMessages.events.addressBookUpdated.sendToAll()
-}
-
-export async function removeAddress(chainId: ChainId, address: string) {
-    const now = new Date()
-    const chunk = await PluginDB.get('address-book', chainId)
-    if (!chunk) return
-    await PluginDB.add({
-        id: chainId,
-        type: 'address-book',
-        records: chunk.records.filter((x) => !isSameAddress(x.address, address)) ?? [],
-        createdAt: chunk.createdAt,
-        updatedAt: now,
-    })
-    WalletMessages.events.addressBookUpdated.sendToAll()
-}
diff --git a/packages/mask/src/plugins/Wallet/services/assets.ts b/packages/mask/src/plugins/Wallet/services/assets.ts
deleted file mode 100644
index 52fca9a4808c..000000000000
--- a/packages/mask/src/plugins/Wallet/services/assets.ts
+++ /dev/null
@@ -1,207 +0,0 @@
-import { unreachable } from '@dimensiondev/kit'
-import { leftShift, multipliedBy, rightShift, toFixed } from '@masknet/web3-shared-base'
-import {
-    Asset,
-    ChainId,
-    NonFungibleAssetProvider,
-    createERC20Token,
-    createNativeToken,
-    CurrencyType,
-    EthereumTokenType,
-    ERC721TokenDetailed,
-    formatEthereumAddress,
-    getChainIdFromName,
-    getTokenConstants,
-    isChainIdMainnet,
-    NetworkType,
-    FungibleAssetProvider,
-    getChainShortName,
-    getChainIdFromNetworkType,
-    ERC721TokenCollectionInfo,
-    isNativeTokenSymbol as isNativeToken,
-} from '@masknet/web3-shared-evm'
-import BigNumber from 'bignumber.js'
-import { values } from 'lodash-unified'
-import { EthereumAddress } from 'wallet.ts'
-import { EVM_RPC } from '../../EVM/messages'
-import * as DebankAPI from '../apis/debank'
-import * as ZerionAPI from '../apis/zerion'
-import { resolveChainByScope, resolveZerionAssetsScopeName } from '../pipes'
-import type {
-    SocketRequestAssetScope,
-    WalletTokenRecord,
-    ZerionAddressAsset,
-    ZerionAddressCovalentAsset,
-    ZerionAsset,
-    ZerionCovalentAsset,
-} from '../types'
-
-export async function getCollectionsNFT(
-    address: string,
-    chainId: ChainId,
-    provider: NonFungibleAssetProvider,
-    page?: number,
-    size?: number,
-): Promise<{ collections: ERC721TokenCollectionInfo[]; hasNextPage: boolean }> {
-    if (provider === NonFungibleAssetProvider.OPENSEA) {
-        const { data, hasNextPage } = await EVM_RPC.getCollections({
-            address,
-            chainId,
-            provider,
-            page: page ?? 0,
-            size: size ?? 50,
-        })
-
-        return {
-            collections: data,
-            hasNextPage,
-        }
-    }
-
-    return {
-        collections: [],
-        hasNextPage: false,
-    }
-}
-
-export async function getAssetsListNFT(
-    address: string,
-    chainId: ChainId,
-    provider: NonFungibleAssetProvider,
-    page?: number,
-    size?: number,
-    collection?: string,
-    continuation?: string,
-): Promise<{ assets: ERC721TokenDetailed[]; hasNextPage: boolean }> {
-    if (!EthereumAddress.isValid(address))
-        return {
-            assets: [],
-            hasNextPage: false,
-        }
-    const pageInfo = { collection, continuation }
-    const { data, hasNextPage } = await EVM_RPC.getNFTsByPagination({
-        from: address,
-        chainId,
-        provider,
-        page: page ?? 0,
-        size: size ?? 50,
-        pageInfo,
-    })
-    return {
-        assets: data,
-        hasNextPage,
-    }
-}
-
-const filterAssetType = ['compound', 'trash', 'uniswap', 'uniswap-v2', 'nft']
-
-export async function getAssetsList(
-    address: string,
-    provider: FungibleAssetProvider,
-    network?: NetworkType,
-): Promise<Asset[]> {
-    if (!EthereumAddress.isValid(address)) return []
-    switch (provider) {
-        case FungibleAssetProvider.ZERION:
-            let result: Asset[] = []
-            // xdai-assets is not support
-            const scopes = network
-                ? [resolveZerionAssetsScopeName(network)]
-                : ['assets', 'bsc-assets', 'polygon-assets', 'arbitrum-assets', 'avalanche-assets']
-            for (const scope of scopes) {
-                const { meta, payload } = await ZerionAPI.getAssetsList(address, scope)
-                if (meta.status !== 'ok') throw new Error('Fail to load assets.')
-
-                const assets = Object.entries(payload).map(([key, value]) => {
-                    if (key === 'assets') {
-                        const assetsList = (values(value) as ZerionAddressAsset[]).filter(
-                            ({ asset }) =>
-                                asset.is_displayable &&
-                                !filterAssetType.some((type) => type === asset.type) &&
-                                asset.icon_url,
-                        )
-                        return formatAssetsFromZerion(assetsList, key)
-                    }
-
-                    return formatAssetsFromZerion(
-                        values(value) as ZerionAddressCovalentAsset[],
-                        key as SocketRequestAssetScope,
-                    )
-                })
-
-                result = [...result, ...assets.flat()]
-            }
-
-            return result
-        case FungibleAssetProvider.DEBANK:
-            const data = await DebankAPI.getAssetsList(address)
-            return formatAssetsFromDebank(data, network)
-        default:
-            unreachable(provider)
-    }
-}
-
-function formatAssetsFromDebank(data: WalletTokenRecord[], network?: NetworkType) {
-    return data
-        .filter((x) => getChainIdFromName(x.chain))
-        .filter((x) => !network || getChainIdFromName(x.chain) === getChainIdFromNetworkType(network))
-        .filter((x) => x.is_verified)
-        .map((y): Asset => {
-            const chainIdFromChain = getChainIdFromName(y.chain) ?? ChainId.Mainnet
-            // the asset id is the token address or the name of the chain
-            const chainIdFromId = getChainIdFromName(y.id)
-            return {
-                chain: getChainShortName(chainIdFromChain).toLowerCase(),
-                token:
-                    chainIdFromId && isChainIdMainnet(chainIdFromId)
-                        ? createNativeToken(chainIdFromChain)
-                        : createERC20Token(
-                              chainIdFromChain,
-                              formatEthereumAddress(y.id),
-                              y.decimals,
-                              y.name,
-                              y.symbol,
-                              y.logo_url ? [y.logo_url] : undefined,
-                          ),
-                balance: rightShift(y.amount, y.decimals).toFixed(),
-                price: {
-                    [CurrencyType.USD]: toFixed(y.price),
-                },
-                value: {
-                    [CurrencyType.USD]: multipliedBy(y.price ?? 0, y.amount).toFixed(),
-                },
-                logoURI: y.logo_url,
-            }
-        })
-}
-
-function formatAssetsFromZerion(
-    data: ZerionAddressAsset[] | ZerionAddressCovalentAsset[],
-    scope: SocketRequestAssetScope,
-) {
-    return data.map(({ asset, quantity }) => {
-        const balance = leftShift(quantity, asset.decimals).toNumber()
-        const value = (asset as ZerionAsset).price?.value ?? (asset as ZerionCovalentAsset).value ?? 0
-
-        return {
-            token: {
-                name: asset.name,
-                symbol: asset.symbol,
-                decimals: asset.decimals,
-                address: isNativeToken(asset.symbol) ? getTokenConstants().NATIVE_TOKEN_ADDRESS : asset.asset_code,
-                chainId: resolveChainByScope(scope).chainId,
-                type: isNativeToken(asset.symbol) ? EthereumTokenType.Native : EthereumTokenType.ERC20,
-                logoURI: asset.icon_url,
-            },
-            chain: resolveChainByScope(scope).chain,
-            balance: quantity,
-            price: {
-                usd: new BigNumber(value).toString(),
-            },
-            value: {
-                usd: multipliedBy(balance, value).toString(),
-            },
-            logoURI: asset.icon_url,
-        }
-    }) as Asset[]
-}
diff --git a/packages/mask/src/plugins/Wallet/services/cloud.ts b/packages/mask/src/plugins/Wallet/services/cloud.ts
deleted file mode 100644
index 9ee06cc19fe0..000000000000
--- a/packages/mask/src/plugins/Wallet/services/cloud.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-import { __deprecated__getStorage, __deprecated__setStorage } from '../../../../background/services/helper'
-
-const HOST_MAP = {
-    production: 'https://backup.mask.io/api',
-    development: 'https://vaalh28dbi.execute-api.ap-east-1.amazonaws.com/api',
-    test: 'https://vaalh28dbi.execute-api.ap-east-1.amazonaws.com/api',
-}
-
-const COULD_BASE_URL = HOST_MAP[process.env.NODE_ENV]
-const RISK_WARNING_KEY = 'com.maskbook.agreement+riskWarning'
-
-export const setRiskWarningConfirmed = (address: string, confirmed: boolean) =>
-    __deprecated__setStorage<Record<string, boolean>>(
-        RISK_WARNING_KEY,
-        { [address]: confirmed },
-        { howToUpdate: 'merge' },
-    )
-
-export const getRiskWarningConfirmed = async (address: string) => {
-    const allStatus = await __deprecated__getStorage<Record<string, boolean>>(RISK_WARNING_KEY)
-    return allStatus?.[address]
-}
-
-const sendRiskWarningConfirm = (address: string, pluginId?: string) =>
-    fetch(`${COULD_BASE_URL}/v1/risk_warning/confirm`, {
-        method: 'POST',
-        body: JSON.stringify({
-            address,
-            plugin_id: pluginId ?? '',
-        }),
-    })
-
-export const confirmRiskWarning = async (address: string, pluginId?: string) => {
-    await setRiskWarningConfirmed(address, true)
-    await sendRiskWarningConfirm(address, pluginId)
-}
diff --git a/packages/mask/src/plugins/Wallet/services/domain.ts b/packages/mask/src/plugins/Wallet/services/domain.ts
deleted file mode 100644
index 4b097fa364d8..000000000000
--- a/packages/mask/src/plugins/Wallet/services/domain.ts
+++ /dev/null
@@ -1,103 +0,0 @@
-import { EthereumAddress } from 'wallet.ts'
-import { AddressName, AddressNameType, ChainId, isZeroAddress, ProviderType } from '@masknet/web3-shared-evm'
-import { createWeb3 } from '../../../extension/background-script/EthereumServices/web3'
-import { PluginProfileRPC } from '../../Profile/messages'
-import { PluginNFTAvatarRPC } from '../../Avatar/messages'
-
-const ENS_RE = /\S{1,256}\.(eth|kred|xyz|luxe)\b/
-const ADDRESS_FULL = /0x\w+/
-// xxx.cheers.bio xxx.rss3.bio
-const RSS3_URL_RE = /https?:\/\/(?<name>[\w.]+)\.(rss3|cheers)\.bio/
-const RSS3_RNS_RE = /(?<name>[\w.]+)\.rss3/
-
-function isValidAddress(address: string) {
-    return address && EthereumAddress.isValid(address) && !isZeroAddress(address)
-}
-
-function getEthereumName(twitterId: string, nickname: string, bio: string) {
-    const [matched] = nickname.match(ENS_RE) ?? bio.match(ENS_RE) ?? []
-    if (matched) return matched
-    return twitterId && !twitterId.endsWith('.eth') ? `${twitterId}.eth` : twitterId
-}
-
-function getRSS3Id(nickname: string, profileURL: string, bio: string) {
-    const matched =
-        nickname.match(RSS3_RNS_RE) || profileURL.match(RSS3_URL_RE) || bio.match(RSS3_URL_RE) || bio.match(RSS3_RNS_RE)
-    return matched?.groups?.name ?? ''
-}
-
-function getAddress(text: string) {
-    const [matched] = text.match(ADDRESS_FULL) ?? []
-    if (matched && EthereumAddress.isValid(matched)) return matched
-    return ''
-}
-
-async function getResolvedENS(label: string) {
-    const web3 = await createWeb3({
-        chainId: ChainId.Mainnet,
-        providerType: ProviderType.MaskWallet,
-    })
-    return web3.eth.ens.getAddress(label)
-}
-
-export async function getAddressNames(identity: {
-    identifier: {
-        userId: string
-        network: string
-    }
-    avatar?: string
-    bio?: string
-    nickname?: string
-    homepage?: string
-}) {
-    const { identifier, bio = '', nickname = '', homepage = '' } = identity
-
-    const address = getAddress(bio)
-    const ethereumName = getEthereumName(identifier.userId ?? '', nickname, bio)
-    const RSS3Id = getRSS3Id(nickname, homepage, bio)
-
-    const allSettled = await Promise.allSettled([
-        getResolvedENS(ethereumName),
-        PluginProfileRPC.getRSS3AddressById(RSS3Id),
-        PluginNFTAvatarRPC.getAddress(identifier.userId ?? '', identifier.network),
-    ])
-
-    const getSettledAddress = (result: PromiseSettledResult<string>) => {
-        return result.status === 'fulfilled' ? result.value : ''
-    }
-
-    const addressENS = getSettledAddress(allSettled[0])
-    const addressRSS3 = getSettledAddress(allSettled[1])
-    const addressGUN = getSettledAddress(allSettled[2])
-
-    return [
-        isValidAddress(address)
-            ? {
-                  type: AddressNameType.ADDRESS,
-                  label: address,
-                  resolvedAddress: address,
-              }
-            : null,
-        isValidAddress(addressENS)
-            ? {
-                  type: AddressNameType.ENS,
-                  label: ethereumName,
-                  resolvedAddress: addressENS,
-              }
-            : null,
-        isValidAddress(addressRSS3)
-            ? {
-                  type: AddressNameType.RSS3,
-                  label: `${RSS3Id}.rss3`,
-                  resolvedAddress: addressRSS3,
-              }
-            : null,
-        isValidAddress(addressGUN)
-            ? {
-                  type: AddressNameType.GUN,
-                  label: addressGUN,
-                  resolvedAddress: addressGUN,
-              }
-            : null,
-    ].filter(Boolean) as AddressName[]
-}
diff --git a/packages/mask/src/plugins/Wallet/services/erc1155.ts b/packages/mask/src/plugins/Wallet/services/erc1155.ts
deleted file mode 100644
index 2dd13d6ee41f..000000000000
--- a/packages/mask/src/plugins/Wallet/services/erc1155.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { ERC1155TokenDetailed, formatEthereumAddress } from '@masknet/web3-shared-evm'
-import { createTransaction } from '../../../../background/database/utils/openDB'
-import { createWalletDBAccess } from '../database/Wallet.db'
-import { WalletMessages } from '../messages'
-import { ERC1155TokenRecordIntoDB } from './helpers'
-
-/** @deprecated */
-export async function getERC1155Tokens() {
-    const t = createTransaction(await createWalletDBAccess(), 'readonly')('ERC1155Token', 'Wallet')
-    return t.objectStore('ERC1155Token').getAll()
-}
-
-/** @deprecated */
-export async function addERC1155Token(token: ERC1155TokenDetailed) {
-    const t = createTransaction(await createWalletDBAccess(), 'readwrite')('ERC1155Token', 'Wallet')
-    await t.objectStore('ERC1155Token').put(ERC1155TokenRecordIntoDB(token))
-    WalletMessages.events.erc1155TokensUpdated.sendToAll(undefined)
-}
-
-/** @deprecated */
-export async function removeERC1155Token(token: PartialRequired<ERC1155TokenDetailed, 'address'>) {
-    const t = createTransaction(await createWalletDBAccess(), 'readwrite')('ERC1155Token', 'Wallet')
-    await t.objectStore('ERC1155Token').delete(formatEthereumAddress(token.address))
-    WalletMessages.events.erc1155TokensUpdated.sendToAll(undefined)
-}
diff --git a/packages/mask/src/plugins/Wallet/services/erc20.ts b/packages/mask/src/plugins/Wallet/services/erc20.ts
deleted file mode 100644
index 570e69defbf3..000000000000
--- a/packages/mask/src/plugins/Wallet/services/erc20.ts
+++ /dev/null
@@ -1,79 +0,0 @@
-import Fuse from 'fuse.js'
-import { EthereumAddress } from 'wallet.ts'
-import { ERC20TokenDetailed, EthereumTokenType, formatEthereumAddress, isSameAddress } from '@masknet/web3-shared-evm'
-import { createTransaction } from '../../../../background/database/utils/openDB'
-import { createWalletDBAccess } from '../database/Wallet.db'
-import { WalletMessages } from '../messages'
-import { ERC20TokenRecordIntoDB, ERC20TokenRecordOutDB } from './helpers'
-import type { ERC20TokenRecord } from '../database/types'
-import { queryTransactionPaged } from '../../../database/helpers/pagination'
-
-/** @deprecated */
-export async function getERC20TokensCount() {
-    const t = createTransaction(await createWalletDBAccess(), 'readonly')('ERC20Token', 'Wallet')
-    return t.objectStore('ERC20Token').count()
-}
-
-/** @deprecated */
-export async function getERC20Tokens() {
-    const t = createTransaction(await createWalletDBAccess(), 'readonly')('ERC20Token', 'Wallet')
-    const tokens = await t.objectStore('ERC20Token').getAll()
-    return tokens.map(ERC20TokenRecordOutDB).map(
-        (x): ERC20TokenDetailed => ({
-            type: EthereumTokenType.ERC20,
-            ...x,
-        }),
-    )
-}
-
-const fuse = new Fuse([] as ERC20TokenRecord[], {
-    shouldSort: true,
-    threshold: 0.45,
-    minMatchCharLength: 1,
-    keys: [
-        { name: 'name', weight: 0.8 },
-        { name: 'symbol', weight: 0.2 },
-    ],
-})
-
-/** @deprecated */
-export async function getERC20TokensPaged(index: number, count: number, query?: string) {
-    const t = createTransaction(await createWalletDBAccess(), 'readonly')('ERC20Token')
-    const tokens = await queryTransactionPaged(t, 'ERC20Token', {
-        skip: index * count,
-        count,
-        predicate: (record) => {
-            if (!query) return true
-            if (EthereumAddress.isValid(query) && !isSameAddress(query, record.address)) return false
-            fuse.setCollection([record])
-            return !!fuse.search(query).length
-        },
-    })
-    return tokens.map(ERC20TokenRecordOutDB).map(
-        (x): ERC20TokenDetailed => ({
-            type: EthereumTokenType.ERC20,
-            ...x,
-        }),
-    )
-}
-
-/** @deprecated */
-export async function addERC20Token(token: ERC20TokenDetailed) {
-    const t = createTransaction(await createWalletDBAccess(), 'readwrite')('ERC20Token', 'Wallet')
-    await t.objectStore('ERC20Token').put(
-        ERC20TokenRecordIntoDB({
-            ...token,
-            name: token.name ?? '',
-            symbol: token.symbol ?? '',
-            decimals: token.decimals ?? 0,
-        }),
-    )
-    WalletMessages.events.erc20TokensUpdated.sendToAll(undefined)
-}
-
-/** @deprecated */
-export async function removeERC20Token(token: PartialRequired<ERC20TokenDetailed, 'address'>) {
-    const t = createTransaction(await createWalletDBAccess(), 'readwrite')('ERC20Token', 'Wallet')
-    await t.objectStore('ERC20Token').delete(formatEthereumAddress(token.address))
-    WalletMessages.events.erc20TokensUpdated.sendToAll(undefined)
-}
diff --git a/packages/mask/src/plugins/Wallet/services/erc721.ts b/packages/mask/src/plugins/Wallet/services/erc721.ts
deleted file mode 100644
index e8837159020a..000000000000
--- a/packages/mask/src/plugins/Wallet/services/erc721.ts
+++ /dev/null
@@ -1,60 +0,0 @@
-import Fuse from 'fuse.js'
-import { EthereumAddress } from 'wallet.ts'
-import { ERC721TokenDetailed, isSameAddress } from '@masknet/web3-shared-evm'
-import { createTransaction } from '../../../../background/database/utils/openDB'
-import { createWalletDBAccess } from '../database/Wallet.db'
-import { WalletMessages } from '../messages'
-import { ERC721TokenRecordIntoDB, ERC721TokenRecordOutDB, getERC721TokenRecordIntoDBKey } from './helpers'
-import { queryTransactionPaged } from '../../../database/helpers/pagination'
-
-/** @deprecated */
-export async function getERC721Tokens() {
-    const t = createTransaction(await createWalletDBAccess(), 'readonly')('ERC721Token')
-    return t.objectStore('ERC721Token').getAll()
-}
-
-/** @deprecated */
-export async function getERC721Token(address: string, tokenId: string) {
-    const t = createTransaction(await createWalletDBAccess(), 'readonly')('ERC721Token')
-    return t.objectStore('ERC721Token').get(getERC721TokenRecordIntoDBKey(address, tokenId))
-}
-
-const fuse = new Fuse([] as ERC721TokenDetailed[], {
-    shouldSort: true,
-    threshold: 0.45,
-    minMatchCharLength: 1,
-    keys: [
-        { name: 'name', weight: 0.8 },
-        { name: 'symbol', weight: 0.2 },
-    ],
-})
-
-/** @deprecated */
-export async function getERC721TokensPaged(index: number, count: number, query?: string) {
-    const t = createTransaction(await createWalletDBAccess(), 'readonly')('ERC721Token')
-    const records = await queryTransactionPaged(t, 'ERC721Token', {
-        skip: index * count,
-        count,
-        predicate: (record) => {
-            if (!query) return true
-            if (EthereumAddress.isValid(query) && !isSameAddress(query, record.contractDetailed.address)) return false
-            fuse.setCollection([record])
-            return !!fuse.search(query).length
-        },
-    })
-    return records.map(ERC721TokenRecordOutDB)
-}
-
-/** @deprecated */
-export async function addERC721Token(token: ERC721TokenDetailed) {
-    const t = createTransaction(await createWalletDBAccess(), 'readwrite')('ERC721Token', 'Wallet')
-    await t.objectStore('ERC721Token').put(ERC721TokenRecordIntoDB(token))
-    WalletMessages.events.erc721TokensUpdated.sendToAll(undefined)
-}
-
-/** @deprecated */
-export async function removeERC721Token(token: ERC721TokenDetailed) {
-    const t = createTransaction(await createWalletDBAccess(), 'readwrite')('ERC721Token', 'Wallet')
-    await t.objectStore('ERC721Token').delete(ERC721TokenRecordIntoDB(token).record_id)
-    WalletMessages.events.erc721TokensUpdated.sendToAll(undefined)
-}
diff --git a/packages/mask/src/plugins/Wallet/services/estimateGasFee.ts b/packages/mask/src/plugins/Wallet/services/estimateGasFee.ts
deleted file mode 100644
index 5a3e00931706..000000000000
--- a/packages/mask/src/plugins/Wallet/services/estimateGasFee.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { getSuggestedGasFees } from '../apis/metaswap'
-import type { ChainId } from '@masknet/web3-shared-evm'
-
-export async function getEstimateGasFees(chainId: ChainId) {
-    return getSuggestedGasFees(chainId)
-}
diff --git a/packages/mask/src/plugins/Wallet/services/gasPrice.ts b/packages/mask/src/plugins/Wallet/services/gasPrice.ts
deleted file mode 100644
index 633f0883d5eb..000000000000
--- a/packages/mask/src/plugins/Wallet/services/gasPrice.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import type { ChainId } from '@masknet/web3-shared-evm'
-import { getGasPriceDict } from '../apis/debank'
-
-export function getGasPriceDictFromDeBank(chainId: ChainId) {
-    return getGasPriceDict(chainId)
-}
diff --git a/packages/mask/src/plugins/Wallet/services/helpers.ts b/packages/mask/src/plugins/Wallet/services/helpers.ts
index ce9465d6e110..c370d7876231 100644
--- a/packages/mask/src/plugins/Wallet/services/helpers.ts
+++ b/packages/mask/src/plugins/Wallet/services/helpers.ts
@@ -1,23 +1,7 @@
-import { omit } from 'lodash-unified'
 import type { IDBPSafeTransaction } from '../../../../background/database/utils/openDB'
 import type { WalletDB } from '../database/Wallet.db'
-import type {
-    ERC1155TokenRecord,
-    ERC1155TokenRecordInDatabase,
-    ERC20TokenRecord,
-    ERC20TokenRecordInDatabase,
-    LegacyWalletRecord,
-    TransactionChunkRecord,
-    TransactionChunkRecordInDatabase,
-    LegacyWalletRecordInDatabase,
-} from '../database/types'
-import {
-    ChainId,
-    formatEthereumAddress,
-    getChainIdFromName,
-    ERC721TokenDetailed,
-    ERC721TokenRecordInDatabase,
-} from '@masknet/web3-shared-evm'
+import type { LegacyWalletRecord, LegacyWalletRecordInDatabase } from '../database/types'
+import { formatEthereumAddress } from '@masknet/web3-shared-evm'
 
 export async function getWalletByAddress(t: IDBPSafeTransaction<WalletDB, ['Wallet'], 'readonly'>, address: string) {
     const record = await t.objectStore('Wallet').get(formatEthereumAddress(address))
@@ -41,64 +25,3 @@ export function LegacyWalletRecordOutDB(x: LegacyWalletRecordInDatabase) {
     record.erc1155_token_blacklist = x.erc1155_token_blacklist ?? new Set()
     return record
 }
-
-export function ERC20TokenRecordIntoDB(x: ERC20TokenRecord) {
-    x.address = formatEthereumAddress(x.address)
-    return x as ERC20TokenRecordInDatabase
-}
-
-export function ERC20TokenRecordOutDB(x: ERC20TokenRecordInDatabase) {
-    const record = x as ERC20TokenRecord
-    {
-        // fix: network has been renamed to chainId
-        const record_ = record as any
-        if (!record.chainId) record.chainId = getChainIdFromName(record_.network) ?? ChainId.Mainnet
-    }
-    record.address = formatEthereumAddress(record.address)
-    return record
-}
-
-export function getERC721TokenRecordIntoDBKey(address: string, tokenId: string) {
-    return `${formatEthereumAddress(address)}_${tokenId}`
-}
-
-export function ERC721TokenRecordIntoDB(x: ERC721TokenDetailed) {
-    const record: ERC721TokenRecordInDatabase = {
-        ...x,
-        // NFT cannot be divided and store each token separately
-        record_id: getERC721TokenRecordIntoDBKey(x.contractDetailed.address, x.tokenId),
-    }
-    return record
-}
-
-export function ERC721TokenRecordOutDB(x: ERC721TokenRecordInDatabase) {
-    const record: ERC721TokenDetailed = omit(x, 'record_id')
-    return record
-}
-
-export function ERC1155TokenRecordIntoDB(x: ERC1155TokenRecord) {
-    const record: ERC1155TokenRecordInDatabase = {
-        ...x,
-        // NFT cannot be divided and store each token separately
-        record_id: `${formatEthereumAddress(x.address)}_${x.tokenId}`,
-    }
-    return record
-}
-
-export function ERC1155TokenRecordOutDB(x: ERC1155TokenRecordInDatabase) {
-    const record: ERC1155TokenRecord = omit(x, 'record_id')
-    return record
-}
-
-export function TransactionChunkRecordIntoDB(x: TransactionChunkRecord) {
-    const record: TransactionChunkRecordInDatabase = {
-        ...x,
-        record_id: `${x.chain_id}_${formatEthereumAddress(x.address)}`,
-    }
-    return record
-}
-
-export function TransactionChunkRecordOutDB(x: TransactionChunkRecordInDatabase) {
-    const record: TransactionChunkRecord = omit(x, 'record_id')
-    return record
-}
diff --git a/packages/mask/src/plugins/Wallet/services/index.ts b/packages/mask/src/plugins/Wallet/services/index.ts
index 6039539ac5d6..8de0d72d3c63 100644
--- a/packages/mask/src/plugins/Wallet/services/index.ts
+++ b/packages/mask/src/plugins/Wallet/services/index.ts
@@ -1,14 +1,5 @@
-export * from './addressBook'
 export * from './account'
-export * from './assets'
-export * from './transactions'
-export * from './transaction'
-export * from './rpc'
 export * from './keystore'
-export * from './gasPrice'
-export * from './domain'
-export * from './cloud'
-export * from './estimateGasFee'
-export * from './tokenPrice'
 export * from './wallet/index'
 export * from './legacyWallet'
+export * from './rpc'
diff --git a/packages/mask/src/plugins/Wallet/services/legacyWallet.ts b/packages/mask/src/plugins/Wallet/services/legacyWallet.ts
index accc5f0b8911..019d7a85b196 100644
--- a/packages/mask/src/plugins/Wallet/services/legacyWallet.ts
+++ b/packages/mask/src/plugins/Wallet/services/legacyWallet.ts
@@ -2,22 +2,16 @@ import * as bip39 from 'bip39'
 import { EthereumAddress, HDKey } from 'wallet.ts'
 import { BigNumber } from 'bignumber.js'
 import { ec as EC } from 'elliptic'
-import { first } from 'lodash-unified'
 import { createTransaction } from '../../../../background/database/utils/openDB'
 import { createWalletDBAccess } from '../database/Wallet.db'
 import type { LegacyWalletRecord } from '../database/types'
 import { fromHex, toHex } from '@masknet/shared-base'
-import { currySameAddress, isSameAddress, ProviderType } from '@masknet/web3-shared-evm'
+import { isSameAddress } from '@masknet/web3-shared-base'
 import { LegacyWalletRecordOutDB } from './helpers'
-import { currentAccountSettings, currentProviderSettings } from '../settings'
 import { HD_PATH_WITHOUT_INDEX_ETHEREUM } from '../constants'
 import { hasNativeAPI } from '../../../../shared/native-rpc'
-import { getAccounts } from '../../../extension/background-script/EthereumService'
 
 function sortWallet(a: LegacyWalletRecord, b: LegacyWalletRecord) {
-    const address = currentAccountSettings.value
-    if (a.address === address) return -1
-    if (b.address === address) return 1
     if (a.updatedAt > b.updatedAt) return -1
     if (a.updatedAt < b.updatedAt) return 1
     if (a.createdAt > b.createdAt) return -1
@@ -25,43 +19,10 @@ function sortWallet(a: LegacyWalletRecord, b: LegacyWalletRecord) {
     return 0
 }
 
-function createWalletRecord(address: string, name: string): LegacyWalletRecord {
-    const now = new Date()
-    return {
-        address,
-        name,
-        erc20_token_whitelist: new Set(),
-        erc20_token_blacklist: new Set(),
-        erc721_token_whitelist: new Set(),
-        erc721_token_blacklist: new Set(),
-        erc1155_token_whitelist: new Set(),
-        erc1155_token_blacklist: new Set(),
-        mnemonic: [],
-        passphrase: '',
-        createdAt: now,
-        updatedAt: now,
-    }
-}
-
-export async function gatLegacyWallet(address: string = currentAccountSettings.value) {
-    const wallets = await getLegacyWallets()
-    return wallets.find(currySameAddress(address))
-}
-
-export async function getLegacyWallets(provider?: ProviderType) {
-    if (hasNativeAPI) {
-        const accounts = await getAccounts()
-        const address = first(accounts) ?? ''
-        if (!address) return []
-        return [createWalletRecord(address, 'Mask Network')]
-    }
-
+export async function getLegacyWallets() {
+    if (hasNativeAPI) return []
     const wallets = await getAllWalletRecords()
-    if (provider === ProviderType.MaskWallet) return wallets.filter((x) => x._private_key_ || x.mnemonic.length)
-    if (provider === currentProviderSettings.value)
-        return wallets.filter(currySameAddress(currentAccountSettings.value))
-    if (provider) return []
-    return wallets
+    return wallets.filter((x) => x._private_key_ || x.mnemonic.length)
 }
 
 export async function getLegacyWalletRecords() {
diff --git a/packages/mask/src/plugins/Wallet/services/nftscan.ts b/packages/mask/src/plugins/Wallet/services/nftscan.ts
deleted file mode 100644
index a60ff1ec9011..000000000000
--- a/packages/mask/src/plugins/Wallet/services/nftscan.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import * as nftscan from '../apis/nftscan'
-
-export async function nftscanFindAssets(address: string) {
-    return nftscan.findAssets(address)
-}
diff --git a/packages/mask/src/plugins/Wallet/services/rpc.ts b/packages/mask/src/plugins/Wallet/services/rpc.ts
index 9f382cbebab6..7bfddae5e7c0 100644
--- a/packages/mask/src/plugins/Wallet/services/rpc.ts
+++ b/packages/mask/src/plugins/Wallet/services/rpc.ts
@@ -23,7 +23,7 @@ export async function topUnconfirmedRequest() {
     return first(await getUnconfirmedRequests())
 }
 
-export async function popUnconfirmedRequest() {
+export async function shiftUnconfirmedRequest() {
     const now = new Date()
     const t = createTransaction(await createWalletDBAccess(), 'readwrite')('UnconfirmedRequestChunk')
 
diff --git a/packages/mask/src/plugins/Wallet/services/tokenPrice.ts b/packages/mask/src/plugins/Wallet/services/tokenPrice.ts
deleted file mode 100644
index 4e82783b2d3c..000000000000
--- a/packages/mask/src/plugins/Wallet/services/tokenPrice.ts
+++ /dev/null
@@ -1,120 +0,0 @@
-import { CryptoPrice, CurrencyType } from '@masknet/web3-shared-evm'
-import { pollingTask } from '@masknet/shared-base'
-import { startEffects } from '../../../../utils-pure'
-import { UPDATE_CHAIN_STATE_DELAY } from '../constants'
-import { currentTokenPricesSettings } from '../settings'
-import { uniq } from 'lodash-unified'
-import { TokenPrice } from '@masknet/web3-providers'
-
-const { run } = startEffects(import.meta.webpackHot)
-
-function updateCurrentPrices(data: CryptoPrice) {
-    const currentPrices: CryptoPrice = { ...currentTokenPricesSettings.value }
-    Object.keys(data).forEach((category) => {
-        Object.keys(data[category]).forEach((currency) => {
-            currentPrices[category] = {
-                ...currentPrices[category],
-                [currency]: data[category][currency],
-            }
-        })
-    })
-    currentTokenPricesSettings.value = currentPrices
-}
-
-let tokenTrackingCount = 0
-let nativeTokenCount = 0
-
-export function kickToUpdateTokenPrices() {
-    tokenTrackingCount += 1
-    nativeTokenCount += 1
-}
-
-const trackingContracts: Record<string, string[]> = Object.create(null)
-export function trackContract(platform: string, address: string) {
-    trackingContracts[platform] = uniq([...(trackingContracts[platform] ?? []), address])
-}
-
-export async function updateTokenPrices() {
-    // reset the polling task cause it will be called from service call
-    resetPoolTask()
-
-    // forget those passed beats
-    tokenTrackingCount = 0
-
-    // update chain state
-    try {
-        const platforms = Object.keys(trackingContracts)
-        await Promise.allSettled(
-            platforms.map(async (platform) => {
-                const prices = await TokenPrice.getTokenPrices(platform, trackingContracts[platform], CurrencyType.USD)
-                updateCurrentPrices(prices)
-            }),
-        )
-    } finally {
-        // reset the polling if chain state updated successfully
-        resetPoolTask()
-    }
-}
-
-const trackingNativeTokenIds: string[] = []
-export function trackNativeToken(id: string) {
-    if (!trackingNativeTokenIds.includes(id)) {
-        trackingNativeTokenIds.push(id)
-    }
-}
-
-export async function updateNativeTokenPrices() {
-    // reset the polling task cause it will be called from service call
-    resetPoolTask()
-
-    // forget those passed beats
-    nativeTokenCount = 0
-
-    // update chain state
-    try {
-        const prices = await TokenPrice.getNativeTokenPrice(trackingNativeTokenIds, CurrencyType.USD)
-        updateCurrentPrices(prices)
-    } catch {
-        // do nothing
-    } finally {
-        // reset the polling if chain state updated successfully
-        resetPoolTask()
-    }
-}
-
-let resetPoolTask: () => void = () => {}
-
-// poll the newest chain state
-run(() => {
-    const { reset, cancel } = pollingTask(
-        async () => {
-            if (tokenTrackingCount > 0) {
-                await updateTokenPrices()
-            }
-            if (nativeTokenCount > 0) {
-                await updateNativeTokenPrices()
-            }
-            return false
-        },
-        {
-            delay: UPDATE_CHAIN_STATE_DELAY,
-        },
-    )
-    resetPoolTask = reset
-    return cancel
-})
-const ETH_PRICE_POLLING_DELAY = 30 /* seconds */ * 1000 /* milliseconds */
-run(() => {
-    trackNativeToken('ethereum')
-    const { cancel } = pollingTask(
-        async () => {
-            updateNativeTokenPrices()
-            return false
-        },
-        {
-            autoStart: true,
-            delay: ETH_PRICE_POLLING_DELAY,
-        },
-    )
-    return cancel
-})
diff --git a/packages/mask/src/plugins/Wallet/services/transaction/database.ts b/packages/mask/src/plugins/Wallet/services/transaction/database.ts
deleted file mode 100644
index 3678ac111846..000000000000
--- a/packages/mask/src/plugins/Wallet/services/transaction/database.ts
+++ /dev/null
@@ -1,115 +0,0 @@
-import { uniqBy } from 'lodash-unified'
-import type { JsonRpcPayload } from 'web3-core-helpers'
-import { WalletMessages } from '@masknet/plugin-wallet'
-import { ChainId, formatEthereumAddress } from '@masknet/web3-shared-evm'
-import { currentChainIdSettings } from '../../settings'
-import { PluginDB } from '../../database/Plugin.db'
-
-export const MAX_RECENT_TRANSACTIONS_SIZE = 20
-
-export interface RecentTransaction {
-    at: Date
-    hash: string
-    hashReplacement?: string
-    payload: JsonRpcPayload
-    payloadReplacement?: JsonRpcPayload
-}
-
-export interface RecentTransactionChunk {
-    id: string // chainId + address
-    chainId: ChainId
-    address: string
-    type: 'recent-transactions'
-    transactions: RecentTransaction[]
-    createdAt: Date
-    updatedAt: Date
-}
-
-function getRecordId(chainId: ChainId, address: string) {
-    return `${chainId}_${formatEthereumAddress(address)}`
-}
-
-export async function addRecentTransaction(chainId: ChainId, address: string, hash: string, payload: JsonRpcPayload) {
-    const now = new Date()
-    const recordId = getRecordId(chainId, address)
-    const chunk = await PluginDB.get('recent-transactions', recordId)
-    await PluginDB.add({
-        type: 'recent-transactions',
-        id: recordId,
-        chainId,
-        address: formatEthereumAddress(address),
-        transactions: uniqBy(
-            [
-                {
-                    at: now,
-                    hash,
-                    payload,
-                },
-                // place old transactions last
-                ...(chunk?.transactions ?? []),
-            ],
-            (x) => x.hash,
-        ).slice(0, MAX_RECENT_TRANSACTIONS_SIZE),
-        createdAt: chunk?.createdAt ?? now,
-        updatedAt: now,
-    })
-    WalletMessages.events.transactionsUpdated.sendToAll()
-}
-
-export async function replaceRecentTransaction(
-    chainId: ChainId,
-    address: string,
-    oldHash: string,
-    newHash: string,
-    newPayload?: JsonRpcPayload,
-) {
-    const now = new Date()
-    const recordId = getRecordId(chainId, address)
-    const chunk = await PluginDB.get('recent-transactions', recordId)
-    const transaction = chunk?.transactions.find((x) => x.hash === oldHash)
-    if (!transaction) throw new Error('Failed to find the old transaction.')
-    if (transaction.hash === newHash) return
-    transaction.hashReplacement = newHash
-    if (newPayload) {
-        transaction.payloadReplacement = newPayload
-    }
-    await PluginDB.add({
-        type: 'recent-transactions',
-        id: recordId,
-        chainId,
-        address: formatEthereumAddress(address),
-        transactions: chunk?.transactions ?? [],
-        createdAt: chunk?.createdAt ?? now,
-        updatedAt: now,
-    })
-    WalletMessages.events.transactionsUpdated.sendToAll()
-}
-
-export async function removeRecentTransaction(chainId: ChainId, address: string, hash: string) {
-    const now = new Date()
-    const recordId = getRecordId(chainId, address)
-    const chunk = await PluginDB.get('recent-transactions', recordId)
-    if (!chunk) return
-    await PluginDB.add({
-        type: 'recent-transactions',
-        id: recordId,
-        chainId: currentChainIdSettings.value,
-        address: formatEthereumAddress(address),
-        transactions: chunk.transactions.filter((x) => x.hash !== hash),
-        createdAt: chunk.createdAt,
-        updatedAt: now,
-    })
-    WalletMessages.events.transactionsUpdated.sendToAll()
-}
-
-export async function getRecentTransactions(chainId: ChainId, address: string) {
-    const recordId = getRecordId(chainId, address)
-    const chunk = await PluginDB.get('recent-transactions', recordId)
-    return chunk?.transactions ?? []
-}
-
-export async function clearRecentTransactions(chainId: ChainId, address: string) {
-    const recordId = getRecordId(chainId, address)
-    await PluginDB.remove('recent-transactions', recordId)
-    WalletMessages.events.transactionsUpdated.sendToAll()
-}
diff --git a/packages/mask/src/plugins/Wallet/services/transaction/helpers.ts b/packages/mask/src/plugins/Wallet/services/transaction/helpers.ts
deleted file mode 100644
index 00c624ecec12..000000000000
--- a/packages/mask/src/plugins/Wallet/services/transaction/helpers.ts
+++ /dev/null
@@ -1,96 +0,0 @@
-import { sha3, toHex } from 'web3-utils'
-import type { JsonRpcPayload } from 'web3-core-helpers'
-import type { Transaction, TransactionConfig, TransactionReceipt } from 'web3-core'
-import {
-    TransactionState,
-    TransactionStateType,
-    TransactionStatusType,
-    EthereumMethodType,
-} from '@masknet/web3-shared-evm'
-import { unreachable } from '@dimensiondev/kit'
-
-export function toPayload(transaction: Transaction): JsonRpcPayload {
-    return {
-        jsonrpc: '2.0',
-        id: '0',
-        method: EthereumMethodType.ETH_SEND_TRANSACTION,
-        params: [
-            {
-                from: transaction.from,
-                to: transaction.to,
-                value: transaction.value,
-                gas: transaction.gas,
-                gasPrice: transaction.gasPrice,
-                data: transaction.input,
-                nonce: transaction.nonce,
-            },
-        ],
-    }
-}
-
-export function getPayloadConfig(payload: JsonRpcPayload) {
-    if (!payload.id || payload.method !== EthereumMethodType.ETH_SEND_TRANSACTION) return
-    const [config] = payload.params as [TransactionConfig]
-    return config
-}
-
-export function getPayloadFrom(payload: JsonRpcPayload) {
-    const config = getPayloadConfig(payload)
-    return config?.from as string | undefined
-}
-
-export function getPayloadId(payload: JsonRpcPayload) {
-    const config = getPayloadConfig(payload)
-    if (!config) return ''
-    const { from, to, data = '0x0', value = '0x0' } = config
-    if (!from || !to) return ''
-    return sha3([from, to, data, value].join('_')) ?? ''
-}
-
-export function getTransactionId(transaction: Transaction | null) {
-    if (!transaction) return ''
-    const { from, to, input, value } = transaction
-    return sha3([from, to, input || '0x0', toHex(value || '0x0') || '0x0'].join('_')) ?? ''
-}
-
-export function getReceiptStatus(receipt: TransactionReceipt | null) {
-    if (!receipt) return TransactionStatusType.NOT_DEPEND
-    const status = receipt.status as unknown as string
-    if (receipt.status === false || ['0', '0x', '0x0'].includes(status)) return TransactionStatusType.FAILED
-    if (receipt.status === true || ['1', '0x1'].includes(status)) {
-        return TransactionStatusType.SUCCEED
-    }
-    return TransactionStatusType.NOT_DEPEND
-}
-
-export function getTransactionState(receipt: TransactionReceipt): TransactionState {
-    if (receipt.blockNumber) {
-        const status = getReceiptStatus(receipt)
-        switch (status) {
-            case TransactionStatusType.SUCCEED:
-                return {
-                    type: TransactionStateType.CONFIRMED,
-                    no: 0,
-                    receipt,
-                }
-            case TransactionStatusType.FAILED:
-                return {
-                    type: TransactionStateType.FAILED,
-                    receipt,
-                    error: new Error('FAILED'),
-                }
-            case TransactionStatusType.NOT_DEPEND:
-                return {
-                    type: TransactionStateType.FAILED,
-                    receipt,
-                    error: new Error('Invalid transaction status.'),
-                }
-            default:
-                unreachable(status)
-        }
-    }
-    return {
-        type: TransactionStateType.RECEIPT,
-        receipt,
-    }
-}
diff --git a/packages/mask/src/plugins/Wallet/services/transaction/index.ts b/packages/mask/src/plugins/Wallet/services/transaction/index.ts
deleted file mode 100644
index eae7ec4b268f..000000000000
--- a/packages/mask/src/plugins/Wallet/services/transaction/index.ts
+++ /dev/null
@@ -1,116 +0,0 @@
-import type { TransactionReceipt } from 'web3-core'
-import type { JsonRpcPayload } from 'web3-core-helpers'
-import type { ChainId, TransactionStatusType } from '@masknet/web3-shared-evm'
-import {
-    getSendTransactionComputedPayload,
-    ComputedPayload,
-} from '../../../../extension/background-script/EthereumService'
-import * as database from './database'
-import * as watcher from './watcher'
-import * as helpers from './helpers'
-
-export * from './progress'
-export * from './watcher'
-
-export interface RecentTransactionOptions {
-    status?: TransactionStatusType
-    receipt?: boolean
-    computedPayload?: boolean
-}
-
-export interface RecentTransaction {
-    at: Date
-    hash: string
-    hashReplacement?: string
-    status: TransactionStatusType
-    receipt?: TransactionReceipt | null
-    payload?: JsonRpcPayload
-    payloadReplacement?: JsonRpcPayload
-    computedPayload?: ComputedPayload
-}
-
-export async function addRecentTransaction(chainId: ChainId, address: string, hash: string, payload: JsonRpcPayload) {
-    await database.addRecentTransaction(chainId, address, hash, payload)
-}
-
-export async function removeRecentTransaction(chainId: ChainId, address: string, hash: string) {
-    await database.removeRecentTransaction(chainId, address, hash)
-}
-
-export async function replaceRecentTransaction(
-    chainId: ChainId,
-    address: string,
-    hash: string,
-    newHash: string,
-    payload: JsonRpcPayload,
-) {
-    await database.replaceRecentTransaction(chainId, address, hash, newHash, payload)
-}
-
-export async function clearRecentTransactions(chainId: ChainId, address: string) {
-    await database.clearRecentTransactions(chainId, address)
-}
-
-export async function getRecentTransaction(
-    chainId: ChainId,
-    address: string,
-    hash: string,
-    options?: RecentTransactionOptions,
-) {
-    const transactions = await getRecentTransactions(chainId, address, options)
-    return transactions.find((x) => x.hash === hash)
-}
-
-export async function getRecentTransactions(
-    chainId: ChainId,
-    address: string,
-    options?: RecentTransactionOptions,
-): Promise<RecentTransaction[]> {
-    const transactions = await database.getRecentTransactions(chainId, address)
-    const allSettled = await Promise.allSettled(
-        transactions.map<Promise<RecentTransaction>>(
-            async ({ at, hash, hashReplacement, payload, payloadReplacement }) => {
-                const receipt =
-                    (await watcher.getReceipt(chainId, hash)) ||
-                    (await (hashReplacement ? watcher.getReceipt(chainId, hashReplacement) : null))
-
-                // if it cannot found receipt, then start the watching progress
-                // in case the user just refreshed the background page
-                if (!receipt) {
-                    watcher.watchTransaction(chainId, hash, payload)
-                    if (hashReplacement && payloadReplacement)
-                        watcher.watchTransaction(chainId, hashReplacement, payloadReplacement)
-                }
-
-                const tx: RecentTransaction = {
-                    at,
-                    hash,
-                    hashReplacement,
-                    payload,
-                    payloadReplacement,
-                    status: helpers.getReceiptStatus(receipt),
-                    receipt,
-                }
-
-                if (!options?.receipt) {
-                    delete tx.receipt
-                }
-
-                if (options?.computedPayload) {
-                    tx.computedPayload = await getSendTransactionComputedPayload(payloadReplacement ?? payload)
-                }
-
-                return tx
-            },
-        ),
-    )
-
-    // compose result
-    const transaction_: RecentTransaction[] = []
-    allSettled.forEach((x) =>
-        x.status === 'fulfilled' && (typeof options?.status !== 'undefined' ? x.value.status === options?.status : true)
-            ? transaction_.push(x.value)
-            : undefined,
-    )
-    return transaction_
-}
diff --git a/packages/mask/src/plugins/Wallet/services/transaction/progress.ts b/packages/mask/src/plugins/Wallet/services/transaction/progress.ts
deleted file mode 100644
index c0ca0c9b9cfc..000000000000
--- a/packages/mask/src/plugins/Wallet/services/transaction/progress.ts
+++ /dev/null
@@ -1,59 +0,0 @@
-import type { Transaction } from 'web3-core'
-import type { JsonRpcPayload } from 'web3-core-helpers'
-import { WalletMessages } from '@masknet/plugin-wallet'
-import { isFinalState, isNextStateAvailable, TransactionState } from '@masknet/web3-shared-evm'
-import * as helpers from './helpers'
-
-export interface TransactionProgress {
-    state: TransactionState
-    payload: JsonRpcPayload
-}
-
-const watched: Map<string, TransactionProgress> = new Map()
-
-export function addProgress({ state, payload }: TransactionProgress) {
-    const progressId = helpers.getPayloadId(payload)
-    if (!progressId) return
-    if (watched.has(progressId)) return
-
-    watched.set(progressId, {
-        payload,
-        state,
-    })
-    updateProgressState(progressId, state)
-}
-
-export function removeProgress(progressId: string) {
-    watched.delete(progressId)
-}
-
-export function removeAllProgress() {
-    watched.clear()
-}
-
-function updateProgressState(progressId: string, state: TransactionState) {
-    const progress = watched.get(progressId)
-    if (!progress) return
-
-    progress.state = state
-    WalletMessages.events.transactionProgressUpdated.sendToAll(progress)
-
-    // stop watch progress
-    if (isFinalState(progress.state.type)) removeProgress(progressId)
-}
-
-export function notifyProgress(progressId: string, state: TransactionState) {
-    const progress = watched.get(progressId)
-    if (!progress) return
-    if (isNextStateAvailable(progress.state.type, state.type)) updateProgressState(progressId, state)
-}
-
-export function notifyPayloadProgress(payload: JsonRpcPayload, state: TransactionState) {
-    const progressId = helpers.getPayloadId(payload)
-    notifyProgress(progressId, state)
-}
-
-export function notifyTransactionProgress(transaction: Transaction, state: TransactionState) {
-    const progressId = helpers.getTransactionId(transaction)
-    notifyProgress(progressId, state)
-}
diff --git a/packages/mask/src/plugins/Wallet/services/transaction/watcher.ts b/packages/mask/src/plugins/Wallet/services/transaction/watcher.ts
deleted file mode 100644
index 3b9a2eaf3ac7..000000000000
--- a/packages/mask/src/plugins/Wallet/services/transaction/watcher.ts
+++ /dev/null
@@ -1,237 +0,0 @@
-import { first, uniqBy } from 'lodash-unified'
-import type { TransactionReceipt } from 'web3-core'
-import type { JsonRpcPayload } from 'web3-core-helpers'
-import { WalletMessages } from '@masknet/plugin-wallet'
-import { Explorer } from '@masknet/web3-providers'
-import { ChainId, getExplorerConstants, isSameAddress, TransactionStateType } from '@masknet/web3-shared-evm'
-import * as EthereumService from '../../../../extension/background-script/EthereumService'
-import * as progress from './progress'
-import * as helpers from './helpers'
-import { currentChainIdSettings } from '../../settings'
-import { WalletRPC } from '../../messages'
-
-interface StorageItem {
-    at: number
-    limits: number
-    payload: JsonRpcPayload
-    receipt: Promise<TransactionReceipt | null> | null
-}
-
-class Storage {
-    static MAX_ITEM_SIZE = 40
-
-    private map = new Map<ChainId, Map<string, StorageItem>>()
-
-    private getStorage(chainId: ChainId) {
-        if (!this.map.has(chainId)) this.map.set(chainId, new Map())
-        return this.map.get(chainId)!
-    }
-
-    public hasItem(chainId: ChainId, hash: string) {
-        return this.getStorage(chainId).has(hash)
-    }
-
-    public getItem(chainId: ChainId, hash: string) {
-        return this.getStorage(chainId).get(hash)
-    }
-
-    public setItem(chainId: ChainId, hash: string, transaction: StorageItem) {
-        this.getStorage(chainId).set(hash, transaction)
-    }
-
-    public removeItem(chainId: ChainId, hash: string) {
-        this.getStorage(chainId).delete(hash)
-    }
-
-    public getItems(chainId: ChainId) {
-        const map = this.getStorage(chainId)
-        return map ? [...map.entries()].sort(([, a], [, z]) => z.at - a.at) : []
-    }
-
-    public getWatched(chainId: ChainId) {
-        return this.getItems(chainId).slice(0, Storage.MAX_ITEM_SIZE)
-    }
-
-    public getUnwatched(chainId: ChainId) {
-        return this.getItems(chainId).slice(Storage.MAX_ITEM_SIZE)
-    }
-
-    public getWatchedAccounts(chainId: ChainId) {
-        return uniqBy(
-            this.getWatched(chainId)
-                .map(([_, transaction]) => helpers.getPayloadFrom(transaction.payload))
-                .filter(Boolean) as string[],
-            (x) => x.toLowerCase(),
-        )
-    }
-
-    public getUnwatchedAccounts(chainId: ChainId) {
-        return uniqBy(
-            this.getUnwatched(chainId)
-                .map(([_, transaction]) => helpers.getPayloadFrom(transaction.payload))
-                .filter(Boolean) as string[],
-            (x) => x.toLowerCase(),
-        )
-    }
-}
-
-let timer: NodeJS.Timer | null = null
-const storage = new Storage()
-const CHECK_TIMES = 30
-const CHECK_DELAY = 30 * 1000 // seconds
-const CHECK_LATEST_SIZE = 5
-
-async function getTransactionReceipt(chainId: ChainId, hash: string) {
-    try {
-        const transaction = await EthereumService.getTransactionByHash(hash, {
-            chainId,
-        })
-        if (!transaction) return null
-
-        progress.notifyTransactionProgress(transaction, {
-            type: TransactionStateType.HASH,
-            hash,
-        })
-
-        const receipt = await EthereumService.getTransactionReceipt(hash, {
-            chainId,
-        })
-        if (!receipt) return null
-
-        const transactionState = helpers.getTransactionState(receipt)
-        progress.notifyTransactionProgress(transaction, transactionState)
-        WalletMessages.events.transactionStateUpdated.sendToAll(transactionState)
-        return receipt
-    } catch {
-        return null
-    }
-}
-
-async function checkReceipt(chainId: ChainId) {
-    await Promise.allSettled(
-        storage.getWatched(chainId).map(async ([hash, transaction]) => {
-            const receipt = await storage.getItem(chainId, hash)?.receipt
-            if (receipt) return
-            storage.setItem(chainId, hash, {
-                ...transaction,
-                receipt: getTransactionReceipt(chainId, hash),
-            })
-        }),
-    )
-}
-
-async function checkAccount(chainId: ChainId, account: string) {
-    const { API_KEYS = [], EXPLORER_API = '' } = getExplorerConstants(chainId)
-
-    const watchedTransactions = storage.getWatched(chainId)
-    const latestTransactions = await Explorer.getLatestTransactions(account, EXPLORER_API, {
-        offset: CHECK_LATEST_SIZE,
-        apikey: first(API_KEYS),
-    })
-
-    for (const latestTransaction of latestTransactions) {
-        const [watchedHash, watchedTransaction] =
-            watchedTransactions.find(([hash, transaction]) => {
-                // the transaction hash exact matched
-                if (latestTransaction.hash === hash) return true
-
-                // the transaction signature id exact matched
-                if (!transaction.payload) return false
-                if (helpers.getTransactionId(latestTransaction) === helpers.getPayloadId(transaction.payload))
-                    return true
-
-                // the transaction nonce exact matched
-                const config = helpers.getPayloadConfig(transaction.payload)
-                if (!config) return false
-                return (
-                    isSameAddress(latestTransaction.from, config.from as string) &&
-                    latestTransaction.nonce === config.nonce
-                )
-            }) ?? []
-
-        if (!watchedHash || !watchedTransaction?.payload || watchedHash === latestTransaction.hash) continue
-
-        // replace the original transaction in DB
-        await WalletRPC.replaceRecentTransaction(
-            chainId,
-            account,
-            watchedHash,
-            latestTransaction.hash,
-            watchedTransaction.payload,
-        )
-
-        // update receipt in cache
-        storage.removeItem(chainId, watchedHash)
-        storage.setItem(chainId, latestTransaction.hash, {
-            ...watchedTransaction,
-            payload: helpers.toPayload(latestTransaction),
-            receipt: getTransactionReceipt(chainId, latestTransaction.hash),
-        })
-    }
-}
-
-async function check() {
-    // stop any pending task
-    stopCheck()
-
-    const chainId = currentChainIdSettings.value
-
-    // unwatch legacy transactions
-    storage.getUnwatched(chainId).forEach(([hash]) => unwatchTransaction(chainId, hash))
-
-    // update limits
-    storage.getWatched(chainId).forEach(([hash, transaction]) => {
-        storage.setItem(chainId, hash, {
-            ...transaction,
-            limits: Math.max(0, transaction.limits - 1),
-        })
-    })
-
-    try {
-        await checkReceipt(chainId)
-        for (const account of storage.getWatchedAccounts(chainId)) await checkAccount(chainId, account)
-    } catch (error) {
-        // do nothing
-    }
-
-    // check if all transaction receipts were found
-    const allSettled = await Promise.allSettled(
-        storage.getWatched(chainId).map(([, transaction]) => transaction.receipt),
-    )
-    if (allSettled.every((x) => x.status === 'fulfilled' && x.value)) return
-
-    // kick to the next round
-    startCheck(true)
-}
-
-function startCheck(force: boolean) {
-    if (force) stopCheck()
-    if (timer === null) {
-        timer = setTimeout(check, CHECK_DELAY)
-    }
-}
-
-function stopCheck() {
-    if (timer !== null) clearTimeout(timer)
-    timer = null
-}
-
-export async function getReceipt(chainId: ChainId, hash: string) {
-    return storage.getItem(chainId, hash)?.receipt ?? null
-}
-
-export async function watchTransaction(chainId: ChainId, hash: string, payload: JsonRpcPayload) {
-    if (!storage.hasItem(chainId, hash)) {
-        storage.setItem(chainId, hash, {
-            at: Date.now(),
-            payload,
-            limits: CHECK_TIMES,
-            receipt: Promise.resolve(null),
-        })
-    }
-    startCheck(false)
-}
-
-export function unwatchTransaction(chainId: ChainId, hash: string) {
-    storage.removeItem(chainId, hash)
-}
diff --git a/packages/mask/src/plugins/Wallet/services/transactions.ts b/packages/mask/src/plugins/Wallet/services/transactions.ts
deleted file mode 100644
index 785982516d06..000000000000
--- a/packages/mask/src/plugins/Wallet/services/transactions.ts
+++ /dev/null
@@ -1,133 +0,0 @@
-import { leftShift, multipliedBy } from '@masknet/web3-shared-base'
-import { NetworkType, FungibleAssetProvider, getChainIdFromNetworkType } from '@masknet/web3-shared-evm'
-import { isNil } from 'lodash-unified'
-import * as DeBankAPI from '../apis/debank'
-import * as ZerionApi from '../apis/zerion'
-import { resolveDebankTransactionType, resolveZerionTransactionsScopeName } from '../pipes'
-import {
-    DebankTransactionDirection,
-    HistoryResponse,
-    Transaction,
-    ZerionRBDTransactionType,
-    ZerionTransactionItem,
-    ZerionTransactionStatus,
-} from '../types'
-
-export async function getTransactionList(
-    address: string,
-    network: NetworkType,
-    provider: FungibleAssetProvider,
-    page?: number,
-    size = 30,
-): Promise<{
-    transactions: Transaction[]
-    hasNextPage: boolean
-}> {
-    if (provider === FungibleAssetProvider.DEBANK) {
-        const response = await DeBankAPI.getTransactionList(address, getChainIdFromNetworkType(network))
-        if (!response)
-            return {
-                transactions: [],
-                hasNextPage: false,
-            }
-        const { data, error_code } = response
-        if (error_code !== 0) throw new Error('Fail to load transactions.')
-        return {
-            transactions: fromDeBank(data),
-            hasNextPage: false,
-        }
-    } else if (provider === FungibleAssetProvider.ZERION) {
-        const scope = resolveZerionTransactionsScopeName(network)
-        if (!scope)
-            return {
-                transactions: [],
-                hasNextPage: false,
-            }
-        const { payload, meta } = await ZerionApi.getTransactionList(address, scope, page)
-        if (meta.status !== 'ok') throw new Error('Fail to load transactions.')
-        return {
-            transactions: fromZerion(payload.transactions),
-            hasNextPage: payload.transactions.length === size,
-        }
-    }
-    return {
-        transactions: [],
-        hasNextPage: false,
-    }
-}
-
-function fromDeBank({ cate_dict, history_list, token_dict }: HistoryResponse['data']) {
-    return history_list
-        .filter((transaction) => transaction.tx?.name || transaction.cate_id)
-        .filter(({ cate_id }) => cate_id !== 'approve')
-        .map((transaction) => {
-            let type = transaction.tx?.name
-            if (!type && !isNil(transaction.cate_id)) {
-                type = cate_dict[transaction.cate_id].name
-            } else if (type === '') {
-                type = 'contract interaction'
-            }
-            return {
-                type,
-                id: transaction.id,
-                timeAt: new Date(transaction.time_at * 1000),
-                toAddress: transaction.other_addr,
-                failed: transaction.tx?.status === 0,
-                pairs: [
-                    ...transaction.sends.map(({ amount, token_id }) => ({
-                        name: token_dict[token_id]?.name,
-                        symbol: token_dict[token_id]?.optimized_symbol,
-                        address: token_id,
-                        direction: DebankTransactionDirection.SEND,
-                        amount,
-                        logoURI: token_dict[token_id].logo_url,
-                    })),
-                    ...transaction.receives.map(({ amount, token_id }) => ({
-                        name: token_dict[token_id]?.name,
-                        symbol: token_dict[token_id]?.optimized_symbol,
-                        address: token_id,
-                        direction: DebankTransactionDirection.RECEIVE,
-                        amount,
-                        logoURI: token_dict[token_id]?.logo_url,
-                    })),
-                ],
-                gasFee: transaction.tx
-                    ? { eth: transaction.tx.eth_gas_fee, usd: transaction.tx.usd_gas_fee }
-                    : undefined,
-                transactionType: resolveDebankTransactionType(transaction.cate_id),
-            }
-        })
-}
-
-function fromZerion(data: ZerionTransactionItem[]) {
-    return data
-        .filter(({ type }) => type !== ZerionRBDTransactionType.AUTHORIZE)
-        .map((transaction) => {
-            const ethGasFee = leftShift(transaction.fee?.value ?? 0, 18).toString()
-            const usdGasFee = multipliedBy(ethGasFee, transaction.fee?.price ?? 0).toString()
-
-            return {
-                type: transaction.type,
-                id: transaction.hash,
-                timeAt: new Date(transaction.mined_at * 1000),
-                toAddress: transaction.address_to ?? '',
-                failed: transaction.status === ZerionTransactionStatus.FAILED,
-                pairs:
-                    transaction.changes?.map(({ asset, direction, value }) => {
-                        return {
-                            name: asset.name,
-                            symbol: asset.symbol,
-                            address: asset.asset_code,
-                            direction,
-                            amount: leftShift(value, asset.decimals).toNumber(),
-                            logoURI: asset.icon_url,
-                        }
-                    }) ?? [],
-                gasFee: {
-                    eth: Number(ethGasFee),
-                    usd: Number(usdGasFee),
-                },
-                transactionType: transaction.type,
-            }
-        })
-}
diff --git a/packages/mask/src/plugins/Wallet/services/wallet/database/index.ts b/packages/mask/src/plugins/Wallet/services/wallet/database/index.ts
index b4c244e75950..f17ce3916e9a 100644
--- a/packages/mask/src/plugins/Wallet/services/wallet/database/index.ts
+++ b/packages/mask/src/plugins/Wallet/services/wallet/database/index.ts
@@ -1,3 +1,2 @@
-export * from './token'
 export * from './wallet'
 export * from './secret'
diff --git a/packages/mask/src/plugins/Wallet/services/wallet/database/token.ts b/packages/mask/src/plugins/Wallet/services/wallet/database/token.ts
deleted file mode 100644
index c1d7494b126f..000000000000
--- a/packages/mask/src/plugins/Wallet/services/wallet/database/token.ts
+++ /dev/null
@@ -1,158 +0,0 @@
-import { omit } from 'lodash-unified'
-import {
-    ERC1155TokenDetailed,
-    ERC20TokenDetailed,
-    ERC721TokenDetailed,
-    EthereumTokenType,
-    NonFungibleTokenDetailed,
-} from '@masknet/web3-shared-evm'
-import { unreachable } from '@dimensiondev/kit'
-import { WalletMessages } from '@masknet/plugin-wallet'
-import { PluginDB } from '../../../database/Plugin.db'
-import { asyncIteratorToArray } from '../../../../../utils'
-import { currentChainIdSettings } from '../../../settings'
-import type { ERC20TokenRecord, ERC721TokenRecord, ERC1155TokenRecord } from '../type'
-import * as walletDB from './wallet'
-
-type DatabaseTokenType = EthereumTokenType.ERC20 | EthereumTokenType.ERC721 | EthereumTokenType.ERC1155
-type DatabaseTokenDetailed = ERC20TokenDetailed | NonFungibleTokenDetailed
-type DatabaseTokenRecord = ERC20TokenRecord | ERC721TokenRecord | ERC1155TokenRecord
-
-const MAX_TOKEN_COUNT = 49
-
-function getRecordId(address: string, tokenId?: string) {
-    const recordId = `${currentChainIdSettings.value}_${address}`
-    return tokenId ? `${recordId}_${tokenId}` : recordId
-}
-
-function getTokenId(tokenDetailed: DatabaseTokenDetailed) {
-    return (tokenDetailed as ERC721TokenDetailed).tokenId
-}
-
-function getTokenAddress(tokenDetailed: DatabaseTokenDetailed) {
-    return (
-        (tokenDetailed as ERC20TokenDetailed | ERC1155TokenDetailed).address ||
-        (tokenDetailed as ERC721TokenDetailed).contractDetailed.address
-    )
-}
-
-function getTokenType(tokenDetailed: DatabaseTokenDetailed) {
-    return (
-        (tokenDetailed as ERC20TokenDetailed | ERC1155TokenDetailed).type ||
-        (tokenDetailed as ERC721TokenDetailed).contractDetailed.type
-    )
-}
-
-function getDatabaseType(type: DatabaseTokenType) {
-    switch (type) {
-        case EthereumTokenType.ERC20:
-            return 'erc20'
-        case EthereumTokenType.ERC721:
-            return 'erc721'
-        case EthereumTokenType.ERC1155:
-            return 'erc1155'
-        default:
-            unreachable(type)
-    }
-}
-
-function getEventMessage(type: DatabaseTokenType) {
-    switch (type) {
-        case EthereumTokenType.ERC20:
-            return WalletMessages.events.erc20TokensUpdated
-        case EthereumTokenType.ERC721:
-            return WalletMessages.events.erc721TokensUpdated
-        case EthereumTokenType.ERC1155:
-            return WalletMessages.events.erc1155TokensUpdated
-        default:
-            unreachable(type)
-    }
-}
-
-function TokenRecordOutDatabase(type: DatabaseTokenType, token: DatabaseTokenRecord) {
-    const token_ = {
-        ...omit(token, ['id', 'type', 'created', 'updated']),
-        type,
-    }
-    switch (type) {
-        case EthereumTokenType.ERC20:
-            return token_ as ERC20TokenDetailed
-        case EthereumTokenType.ERC721:
-            return token_ as ERC721TokenDetailed
-        case EthereumTokenType.ERC1155:
-            return token_ as ERC1155TokenDetailed
-        default:
-            throw new Error('Unknown token type.')
-    }
-}
-
-export async function hasToken(type: DatabaseTokenType, address: string, tokenId?: string) {
-    return PluginDB.has(getDatabaseType(type), getRecordId(address, tokenId))
-}
-
-export async function getToken(type: DatabaseTokenType, address: string, tokenId?: string) {
-    return PluginDB.get(getDatabaseType(type), getRecordId(address, tokenId))
-}
-
-export async function getTokens<T extends DatabaseTokenDetailed>(type: DatabaseTokenType) {
-    const tokens = await asyncIteratorToArray(PluginDB.iterate(getDatabaseType(type)))
-    return tokens
-        .map((x) => x.value)
-        .sort((a, z) => z.createdAt.getTime() - a.createdAt.getTime())
-        .slice(0, MAX_TOKEN_COUNT)
-        .map((x) => TokenRecordOutDatabase(type, x) as T)
-}
-
-export async function getTokensCount(type: DatabaseTokenType) {
-    return (await getTokens(type)).length
-}
-
-export async function getTokensPaged(type: DatabaseTokenType, index: number, count: number) {
-    let read = 0
-    const records: DatabaseTokenRecord[] = []
-    for await (const { value: record } of PluginDB.iterate(getDatabaseType(type))) {
-        if (read > (index + 1) * count) break
-        if (read < index * count) continue
-        records.push(record)
-        read += 1
-    }
-    return records.map((x) => TokenRecordOutDatabase(type, x))
-}
-
-export async function addToken(token: DatabaseTokenDetailed) {
-    const type = getTokenType(token)
-    const tokenId = getTokenId(token)
-    const address = getTokenAddress(token)
-    if (await hasToken(type, address)) throw new Error(`Token ${address} already exists.`)
-    const now = new Date()
-    // @ts-ignore
-    await PluginDB.add({
-        ...token,
-        id: getRecordId(address, tokenId),
-        type: getDatabaseType(type),
-        createdAt: now,
-        updatedAt: now,
-    })
-    getEventMessage(type).sendToAll()
-}
-
-export async function removeToken(token: DatabaseTokenDetailed) {
-    const type = getTokenType(token)
-    const tokenId = getTokenId(token)
-    const address = getTokenAddress(token)
-    if (!(await hasToken(type, address, tokenId))) throw new Error(`Failed to remove token ${address}.`)
-    await PluginDB.remove(getDatabaseType(type), getRecordId(address, tokenId))
-    getEventMessage(type).sendToAll()
-}
-
-export function trustToken(address: string, token: ERC20TokenDetailed | NonFungibleTokenDetailed) {
-    return walletDB.updateWalletToken(address, token, {
-        strategy: 'trust',
-    })
-}
-
-export function blockToken(address: string, token: ERC20TokenDetailed | NonFungibleTokenDetailed) {
-    return walletDB.updateWalletToken(address, token, {
-        strategy: 'block',
-    })
-}
diff --git a/packages/mask/src/plugins/Wallet/services/wallet/database/wallet.ts b/packages/mask/src/plugins/Wallet/services/wallet/database/wallet.ts
index 8549fa494528..f2627b2fd56c 100644
--- a/packages/mask/src/plugins/Wallet/services/wallet/database/wallet.ts
+++ b/packages/mask/src/plugins/Wallet/services/wallet/database/wallet.ts
@@ -1,21 +1,10 @@
-import { omit, pick } from 'lodash-unified'
+import { omit } from 'lodash-unified'
 import { api } from '@dimensiondev/mask-wallet-core/proto'
 import { WalletMessages } from '@masknet/plugin-wallet'
-import {
-    currySameAddress,
-    NonFungibleTokenDetailed,
-    ERC1155TokenDetailed,
-    ERC20TokenDetailed,
-    ERC721TokenDetailed,
-    EthereumTokenType,
-    formatEthereumAddress,
-    isSameAddress,
-    ProviderType,
-} from '@masknet/web3-shared-evm'
-import { EthereumAddress } from 'wallet.ts'
-import { asyncIteratorToArray } from '../../../../../utils'
+import { asyncIteratorToArray } from '@masknet/shared-base'
+import { formatEthereumAddress, isValidAddress } from '@masknet/web3-shared-evm'
 import { PluginDB } from '../../../database/Plugin.db'
-import { currentMaskWalletAccountSettings, currentAccountSettings, currentProviderSettings } from '../../../settings'
+import { currentMaskWalletAccountSettings } from '../../../settings'
 import type { WalletRecord } from '../type'
 
 function WalletRecordOutDB(record: WalletRecord) {
@@ -29,7 +18,7 @@ function WalletRecordOutDB(record: WalletRecord) {
 
 export async function getWallet(address = currentMaskWalletAccountSettings.value) {
     if (!address) return null
-    if (!EthereumAddress.isValid(address)) throw new Error('Not a valid address.')
+    if (!isValidAddress(address)) throw new Error('Not a valid address.')
     const wallet = (await PluginDB.get('wallet', formatEthereumAddress(address))) ?? null
     return wallet ? WalletRecordOutDB(wallet) : null
 }
@@ -62,25 +51,18 @@ export async function hasStoredKeyInfoRequired(storedKeyInfo?: api.IStoredKeyInf
     return has
 }
 
-export async function getWallets(provider?: ProviderType) {
+export async function getWallets() {
     const wallets = (await asyncIteratorToArray(PluginDB.iterate('wallet'))).map((x) => x.value)
-    const address =
-        provider === ProviderType.MaskWallet ? currentMaskWalletAccountSettings.value : currentAccountSettings.value
 
-    wallets.sort((a, z) => {
-        if (isSameAddress(a.address, address)) return -1
-        if (isSameAddress(z.address, address)) return 1
-        if (a.updatedAt > z.updatedAt) return -1
-        if (a.updatedAt < z.updatedAt) return 1
-        if (a.createdAt > z.createdAt) return -1
-        if (a.createdAt < z.createdAt) return 1
-        return 0
-    })
-    if (provider === ProviderType.MaskWallet) return wallets.filter((x) => x.storedKeyInfo).map(WalletRecordOutDB)
-    if (provider === currentProviderSettings.value)
-        return wallets.filter(currySameAddress(address)).map(WalletRecordOutDB)
-    if (provider) return []
-    return wallets.map(WalletRecordOutDB)
+    return wallets
+        .sort((a, z) => {
+            if (a.updatedAt > z.updatedAt) return -1
+            if (a.updatedAt < z.updatedAt) return 1
+            if (a.createdAt > z.createdAt) return -1
+            if (a.createdAt < z.createdAt) return 1
+            return 0
+        })
+        .map(WalletRecordOutDB)
 }
 
 export async function addWallet(
@@ -103,12 +85,6 @@ export async function addWallet(
         name: name?.trim() || `Account ${(await getWallets()).length + 1}`,
         derivationPath,
         storedKeyInfo,
-        erc20_token_whitelist: new Set(),
-        erc20_token_blacklist: new Set(),
-        erc721_token_whitelist: new Set(),
-        erc721_token_blacklist: new Set(),
-        erc1155_token_whitelist: new Set(),
-        erc1155_token_blacklist: new Set(),
         createdAt: now,
         updatedAt: now,
     })
@@ -128,12 +104,6 @@ export async function updateWallet(
         id: address_,
         address: address_,
         name: `Account ${(await getWallets()).length + 1}`,
-        erc20_token_whitelist: new Set(),
-        erc20_token_blacklist: new Set(),
-        erc721_token_whitelist: new Set(),
-        erc721_token_blacklist: new Set(),
-        erc1155_token_whitelist: new Set(),
-        erc1155_token_blacklist: new Set(),
         ...wallet,
         ...updates,
         createdAt: wallet?.createdAt ?? now,
@@ -146,62 +116,3 @@ export async function deleteWallet(address: string) {
     await PluginDB.remove('wallet', address)
     WalletMessages.events.walletsUpdated.sendToAll(undefined)
 }
-
-export async function updateWalletToken(
-    address: string,
-    token: ERC20TokenDetailed | NonFungibleTokenDetailed,
-    { strategy }: { strategy: 'block' | 'trust' },
-) {
-    const wallet = await getWalletRequired(address)
-    const tokenAddress =
-        (token as ERC20TokenDetailed | ERC1155TokenDetailed).address ||
-        (token as ERC721TokenDetailed).contractDetailed.address
-    const tokenAddressChecksummed = formatEthereumAddress(tokenAddress)
-    const tokenType =
-        (token as ERC20TokenDetailed | ERC1155TokenDetailed).type ||
-        (token as ERC721TokenDetailed).contractDetailed.type
-
-    const operationMap: Record<
-        EthereumTokenType.ERC20 | EthereumTokenType.ERC721 | EthereumTokenType.ERC1155,
-        Record<'block' | 'trust', Set<string>>
-    > = {
-        [EthereumTokenType.ERC20]: {
-            block: wallet.erc20_token_blacklist,
-            trust: wallet.erc20_token_whitelist,
-        },
-        [EthereumTokenType.ERC721]: {
-            block: wallet.erc721_token_blacklist,
-            trust: wallet.erc721_token_whitelist,
-        },
-        [EthereumTokenType.ERC1155]: {
-            block: wallet.erc1155_token_blacklist,
-            trust: wallet.erc1155_token_whitelist,
-        },
-    }
-
-    const set = operationMap[tokenType][strategy]
-    const reverseSet = operationMap[tokenType][strategy === 'block' ? 'trust' : 'block']
-
-    let updated = false
-    if (!set.has(tokenAddressChecksummed)) {
-        set.add(tokenAddressChecksummed)
-        updated = true
-    }
-    if (reverseSet.has(tokenAddressChecksummed)) {
-        set.delete(tokenAddressChecksummed)
-        updated = true
-    }
-    if (!updated) return
-    await updateWallet(
-        address,
-        pick(wallet, [
-            'erc20_token_blacklist',
-            'erc20_token_whitelist',
-            'erc721_token_blacklist',
-            'erc721_token_whitelist',
-            'erc1155_token_blacklist',
-            'erc1155_token_whitelist',
-        ]),
-    )
-    WalletMessages.events.walletsUpdated.sendToAll(undefined)
-}
diff --git a/packages/mask/src/plugins/Wallet/services/wallet/index.ts b/packages/mask/src/plugins/Wallet/services/wallet/index.ts
index 96c990f49f0c..1ef2f4c32890 100644
--- a/packages/mask/src/plugins/Wallet/services/wallet/index.ts
+++ b/packages/mask/src/plugins/Wallet/services/wallet/index.ts
@@ -1,15 +1,16 @@
 import * as bip39 from 'bip39'
 import { first, last } from 'lodash-unified'
 import { toHex } from 'web3-utils'
-import type { TransactionConfig } from 'web3-core'
+import { toBuffer } from 'ethereumjs-util'
+import { personalSign, signTypedData as signTypedData_, SignTypedDataVersion } from '@metamask/eth-sig-util'
 import { encodeText } from '@dimensiondev/kit'
-import { formatEthereumAddress, isSameAddress, ProviderType } from '@masknet/web3-shared-evm'
+import { isSameAddress } from '@masknet/web3-shared-base'
+import type { Transaction } from '@masknet/web3-shared-evm'
+import { Mask } from '@masknet/web3-providers'
 import { api } from '@dimensiondev/mask-wallet-core/proto'
 import { MAX_DERIVE_COUNT, HD_PATH_WITHOUT_INDEX_ETHEREUM } from '@masknet/plugin-wallet'
-import * as sdk from './maskwallet'
 import * as database from './database'
 import * as password from './password'
-import * as EthereumServices from '../../../../extension/background-script/EthereumService'
 import { hasNativeAPI } from '../../../../../shared/native-rpc'
 import type { WalletRecord } from './type'
 
@@ -20,21 +21,8 @@ function bumpDerivationPath(path = `${HD_PATH_WITHOUT_INDEX_ETHEREUM}/0`) {
     return [...splitted.slice(0, -1), index + 1].join('/')
 }
 
-// token db
-export {
-    getToken,
-    getTokens,
-    getTokensCount,
-    getTokensPaged,
-    hasToken,
-    addToken,
-    removeToken,
-    trustToken,
-    blockToken,
-} from './database/token'
-
 // wallet db
-export { hasWallet, updateWallet, updateWalletToken } from './database/wallet'
+export { hasWallet, updateWallet } from './database/wallet'
 
 // password
 export { setPassword, hasPassword, verifyPassword, changePassword, validatePassword, clearPassword } from './password'
@@ -44,13 +32,13 @@ export { isLocked, lockWallet, unlockWallet } from './locker'
 
 export async function getWallet(address?: string) {
     if (hasNativeAPI) {
-        const wallets = await getWallets(ProviderType.MaskWallet)
+        const wallets = await getWallets()
         return wallets.find((x) => isSameAddress(x.address, address))
     }
     return database.getWallet(address)
 }
 
-export async function getWallets(providerType?: ProviderType): Promise<
+export async function getWallets(): Promise<
     Array<
         Omit<WalletRecord, 'type'> & {
             configurable: boolean
@@ -59,36 +47,28 @@ export async function getWallets(providerType?: ProviderType): Promise<
         }
     >
 > {
-    if (hasNativeAPI) {
-        if (providerType && providerType !== ProviderType.MaskWallet) return []
-
-        // read wallet from rpc
-        const accounts = await EthereumServices.getAccounts()
-        const address = first(accounts) ?? ''
-        if (!address) return []
-
-        const now = new Date()
-        const address_ = formatEthereumAddress(address)
-        return [
-            {
-                id: address_,
-                name: 'Mask Network',
-                address: address_,
-                createdAt: now,
-                updatedAt: now,
-                erc20_token_blacklist: new Set(),
-                erc20_token_whitelist: new Set(),
-                erc721_token_whitelist: new Set(),
-                erc721_token_blacklist: new Set(),
-                erc1155_token_whitelist: new Set(),
-                erc1155_token_blacklist: new Set(),
-                configurable: false,
-                hasStoredKeyInfo: false,
-                hasDerivationPath: false,
-            },
-        ]
-    }
-    return database.getWallets(providerType)
+    // if (hasNativeAPI) {
+    //     // read wallet from rpc
+    //     const accounts = await EVM_RPC.getAccounts()
+    //     const address = first(accounts) ?? ''
+    //     if (!address) return []
+
+    //     const now = new Date()
+    //     const address_ = formatEthereumAddress(address)
+    //     return [
+    //         {
+    //             id: address_,
+    //             name: 'Mask Network',
+    //             address: address_,
+    //             createdAt: now,
+    //             updatedAt: now,
+    //             configurable: false,
+    //             hasStoredKeyInfo: false,
+    //             hasDerivationPath: false,
+    //         },
+    //     ]
+    // }
+    return database.getWallets()
 }
 
 export function createMnemonicWords() {
@@ -99,7 +79,7 @@ export async function getWalletPrimary() {
     if (hasNativeAPI) return null
     return (
         first(
-            (await database.getWallets(ProviderType.MaskWallet))
+            (await database.getWallets())
                 .filter((x) => x.storedKeyInfo?.type === api.StoredKeyType.Mnemonic)
                 .sort((a, z) => a.createdAt.getTime() - z.createdAt.getTime()),
         ) ?? null
@@ -108,7 +88,7 @@ export async function getWalletPrimary() {
 
 export async function getDerivableAccounts(mnemonic: string, page: number, pageSize = 10) {
     const oneTimePassword = 'MASK'
-    const imported = await sdk.importMnemonic({
+    const imported = await Mask.importMnemonic({
         mnemonic,
         password: oneTimePassword,
     })
@@ -122,7 +102,7 @@ export async function getDerivableAccounts(mnemonic: string, page: number, pageS
 
     for (let i = pageSize * page; i < pageSize * (page + 1); i += 1) {
         const derivationPath = `${HD_PATH_WITHOUT_INDEX_ETHEREUM}/${i}`
-        const created = await sdk.createAccountOfCoinAtPath({
+        const created = await Mask.createAccountOfCoinAtPath({
             coin: api.Coin.Ethereum,
             password: oneTimePassword,
             derivationPath,
@@ -138,16 +118,10 @@ export async function getDerivableAccounts(mnemonic: string, page: number, pageS
     return accounts
 }
 
-export async function signTransaction(
-    address: string,
-    config: TransactionConfig & {
-        maxFeePerGas?: string
-        maxPriorityFeePerGas?: string
-    },
-) {
+export async function signTransaction(address: string, config: Transaction) {
     const password_ = await password.INTERNAL_getPasswordRequired()
     const wallet = await database.getWalletRequired(address)
-    return sdk.signTransaction({
+    const signed = await Mask.signTransaction({
         password: password_,
         coin: api.Coin.Ethereum,
         storedKeyData: wallet.storedKeyInfo?.data,
@@ -156,13 +130,31 @@ export async function signTransaction(
             gas_limit: config.gas?.toString() ?? '0x0',
             gas_price: config.gasPrice?.toString() ?? '0x0',
             chain_id: config.chainId ? toHex(config.chainId?.toString()) : '0x1',
-            max_fee_per_gas: config.maxFeePerGas ?? '0x0',
-            max_inclusion_fee_per_gas: config.maxFeePerGas ?? '0x0',
+            max_fee_per_gas: (config.maxFeePerGas as string | undefined) ?? '0x0',
+            max_inclusion_fee_per_gas: (config.maxFeePerGas as string | undefined) ?? '0x0',
             nonce: config.nonce ? toHex(config.nonce) : '0x0',
             to_address: config.to,
             payload: config.data ? encodeText(config.data) : new Uint8Array(),
         },
     })
+
+    if (!signed?.sign_output?.encoded) throw new Error('Failed to sign transaction.')
+    return `0x${Buffer.from(signed.sign_output.encoded).toString('hex')}`
+}
+
+export async function signPersonalMessage(address: string, message: string, password?: string) {
+    return personalSign({
+        privateKey: toBuffer(`0x${await exportPrivateKey(address, password)}`),
+        data: message,
+    })
+}
+
+export async function signTypedData(address: string, data: string, password?: string) {
+    return signTypedData_({
+        privateKey: toBuffer(`0x${await exportPrivateKey(address, password)}`),
+        data: JSON.parse(data),
+        version: SignTypedDataVersion.V4,
+    })
 }
 
 export async function deriveWallet(name: string) {
@@ -192,7 +184,7 @@ export async function deriveWallet(name: string) {
         latestDerivationPath = bumpDerivationPath(latestDerivationPath)
 
         // derive a new wallet
-        const created = await sdk.createAccountOfCoinAtPath({
+        const created = await Mask.createAccountOfCoinAtPath({
             coin: api.Coin.Ethereum,
             name,
             password: password_,
@@ -210,7 +202,7 @@ export async function deriveWallet(name: string) {
         })
 
         // found a valid candidate, get the private key of it
-        const exported = await sdk.exportPrivateKeyOfPath({
+        const exported = await Mask.exportPrivateKeyOfPath({
             coin: api.Coin.Ethereum,
             password: password_,
             derivationPath: latestDerivationPath,
@@ -247,7 +239,7 @@ export async function exportMnemonic(address: string, unverifiedPassword?: strin
     const wallet = await database.getWalletRequired(address)
     if (wallet.storedKeyInfo?.type !== api.StoredKeyType.Mnemonic)
         throw new Error(`Cannot export mnemonic words of ${address}.`)
-    const exported = await sdk.exportMnemonic({
+    const exported = await Mask.exportMnemonic({
         password: password_,
         StoredKeyData: wallet.storedKeyInfo.data,
     })
@@ -261,13 +253,13 @@ export async function exportPrivateKey(address: string, unverifiedPassword?: str
     const wallet = await database.getWalletRequired(address)
     if (!wallet.storedKeyInfo) throw new Error(`Cannot export private key of ${address}.`)
     const exported = wallet.derivationPath
-        ? await sdk.exportPrivateKeyOfPath({
+        ? await Mask.exportPrivateKeyOfPath({
               coin: api.Coin.Ethereum,
               derivationPath: wallet.derivationPath ?? `${HD_PATH_WITHOUT_INDEX_ETHEREUM}/0`,
               password: password_,
               StoredKeyData: wallet.storedKeyInfo.data,
           })
-        : await sdk.exportPrivateKey({
+        : await Mask.exportPrivateKey({
               coin: api.Coin.Ethereum,
               password: password_,
               StoredKeyData: wallet.storedKeyInfo.data,
@@ -283,14 +275,14 @@ export async function exportKeyStoreJSON(address: string, unverifiedPassword?: s
     const wallet = await database.getWalletRequired(address)
     if (!wallet.storedKeyInfo) throw new Error(`Cannot export private key of ${address}.`)
     const exported = wallet.derivationPath
-        ? await sdk.exportKeyStoreJSONOfPath({
+        ? await Mask.exportKeyStoreJSONOfPath({
               coin: api.Coin.Ethereum,
               derivationPath: wallet.derivationPath ?? `${HD_PATH_WITHOUT_INDEX_ETHEREUM}/0`,
               password: password_,
               newPassword: unverifiedPassword,
               StoredKeyData: wallet.storedKeyInfo.data,
           })
-        : await sdk.exportKeyStoreJSONOfAddress({
+        : await Mask.exportKeyStoreJSONOfAddress({
               coin: api.Coin.Ethereum,
               password: password_,
               newPassword: unverifiedPassword,
@@ -306,14 +298,14 @@ export async function recoverWalletFromMnemonic(
     derivationPath = `${HD_PATH_WITHOUT_INDEX_ETHEREUM}/0`,
 ) {
     const password_ = await password.INTERNAL_getPasswordRequired()
-    const imported = await sdk.importMnemonic({
+    const imported = await Mask.importMnemonic({
         mnemonic,
         password: password_,
     })
     if (!imported?.StoredKey) throw new Error('Failed to import the wallet.')
 
     if (await database.hasStoredKeyInfo(imported.StoredKey)) {
-        const exported = await sdk.exportPrivateKeyOfPath({
+        const exported = await Mask.exportPrivateKeyOfPath({
             coin: api.Coin.Ethereum,
             derivationPath,
             password: password_,
@@ -322,7 +314,7 @@ export async function recoverWalletFromMnemonic(
         if (!exported?.privateKey) throw new Error(`Failed to export private key at path: ${derivationPath}`)
         return recoverWalletFromPrivateKey(name, exported.privateKey)
     } else {
-        const created = await sdk.createAccountOfCoinAtPath({
+        const created = await Mask.createAccountOfCoinAtPath({
             coin: api.Coin.Ethereum,
             name,
             password: password_,
@@ -336,14 +328,14 @@ export async function recoverWalletFromMnemonic(
 
 export async function recoverWalletFromPrivateKey(name: string, privateKey: string) {
     const password_ = await password.INTERNAL_getPasswordRequired()
-    const imported = await sdk.importPrivateKey({
+    const imported = await Mask.importPrivateKey({
         coin: api.Coin.Ethereum,
         name,
         password: password_,
         privateKey: privateKey.replace(/^0x/, '').trim(),
     })
     if (!imported?.StoredKey) throw new Error('Failed to import the wallet.')
-    const created = await sdk.createAccountOfCoinAtPath({
+    const created = await Mask.createAccountOfCoinAtPath({
         coin: api.Coin.Ethereum,
         name,
         password: password_,
@@ -356,7 +348,7 @@ export async function recoverWalletFromPrivateKey(name: string, privateKey: stri
 
 export async function recoverWalletFromKeyStoreJSON(name: string, json: string, jsonPassword: string) {
     const password_ = await password.INTERNAL_getPasswordRequired()
-    const imported = await sdk.importJSON({
+    const imported = await Mask.importJSON({
         coin: api.Coin.Ethereum,
         json,
         keyStoreJsonPassword: jsonPassword,
@@ -364,7 +356,7 @@ export async function recoverWalletFromKeyStoreJSON(name: string, json: string,
         password: password_,
     })
     if (!imported?.StoredKey) throw new Error('Failed to import the wallet.')
-    const created = await sdk.createAccountOfCoinAtPath({
+    const created = await Mask.createAccountOfCoinAtPath({
         coin: api.Coin.Ethereum,
         derivationPath: null,
         name,
diff --git a/packages/mask/src/plugins/Wallet/services/wallet/locker.ts b/packages/mask/src/plugins/Wallet/services/wallet/locker.ts
index 5c8b8ee8d81c..278cb67af4c1 100644
--- a/packages/mask/src/plugins/Wallet/services/wallet/locker.ts
+++ b/packages/mask/src/plugins/Wallet/services/wallet/locker.ts
@@ -1,6 +1,6 @@
 import { currentMaskWalletLockStatusSettings } from '../../settings'
 import * as password from './password'
-import { LockStatus } from '@masknet/web3-shared-evm'
+import { LockStatus } from '../../types'
 import { WalletMessages } from '../../messages'
 
 export async function isLocked() {
diff --git a/packages/mask/src/plugins/Wallet/services/wallet/maskwallet/index.ts b/packages/mask/src/plugins/Wallet/services/wallet/maskwallet/index.ts
deleted file mode 100644
index a87397a82688..000000000000
--- a/packages/mask/src/plugins/Wallet/services/wallet/maskwallet/index.ts
+++ /dev/null
@@ -1,88 +0,0 @@
-import { api } from '@dimensiondev/mask-wallet-core/proto'
-import { OnDemandWorker } from '../../../../../../utils-pure'
-import type { Input, Output } from '../../../../../../web-workers/wallet'
-
-type Request = InstanceType<typeof api.MWRequest>
-type Response = InstanceType<typeof api.MWResponse>
-
-const Worker = new OnDemandWorker(new URL('../../../../../../web-workers/wallet.ts', import.meta.url), {
-    name: 'MaskWallet',
-})
-
-enum ErrorCode {
-    KdfParamsInvalid = '-3001',
-    PasswordIncorrect = '-3002',
-    InvalidKeyIvLength = '-3003',
-    InvalidCiphertext = '-3004',
-    InvalidPrivateKey = '-3005',
-    InvalidPublicKey = '-3006',
-    InvalidMnemonic = '-3007',
-    InvalidSeed = '-3008',
-    InvalidDerivationPath = '-3009',
-    InvalidKeyStoreJSON = '-3010',
-    NotSupportedPublicKeyType = '-3011',
-    NotSupportedCurve = '-3012',
-    NotSupportedCipher = '-3013',
-}
-
-const ErrorMessage = {
-    [ErrorCode.KdfParamsInvalid]: 'Invalid kdf parameters.',
-    [ErrorCode.PasswordIncorrect]: 'Incorrect payment password.',
-    [ErrorCode.InvalidKeyIvLength]: 'Invalid key IV length.',
-    [ErrorCode.InvalidCiphertext]: 'Invalid cipher text.',
-    [ErrorCode.InvalidPrivateKey]: 'Invalid private key.',
-    [ErrorCode.InvalidPublicKey]: 'Invalid public key.',
-    [ErrorCode.InvalidMnemonic]: 'Invalid mnemonic words.',
-    [ErrorCode.InvalidSeed]: 'Invalid seed.',
-    [ErrorCode.InvalidDerivationPath]: 'Invalid derivation path.',
-    [ErrorCode.InvalidKeyStoreJSON]: 'Invalid keystore JSON.',
-    [ErrorCode.NotSupportedPublicKeyType]: 'Not supported public key type.',
-    [ErrorCode.NotSupportedCurve]: 'Not supported curve.',
-    [ErrorCode.NotSupportedCipher]: 'Not supported cipher.',
-}
-
-function send<I extends keyof Request, O extends keyof Response>(input: I, output: O) {
-    return (value: Request[I]) => {
-        return new Promise<Response[O]>((resolve, reject) => {
-            const req: Input = { id: Math.random(), data: { [input]: value } }
-            Worker.postMessage(req)
-            Worker.addEventListener('message', function f(message) {
-                if (message.data.id !== req.id) return
-
-                Worker.removeEventListener('message', f)
-                const data: Output = message.data
-                if (data.response.error)
-                    return reject(
-                        new Error(ErrorMessage[data.response.error.errorCode as ErrorCode] || 'Unknown Error'),
-                    )
-                resolve(data.response[output])
-            })
-        })
-    }
-}
-
-export const Coin = api.Coin
-export const StoredKeyType = api.StoredKeyType
-export const StoredKeyImportType = api.StoredKeyImportType
-export const StoredKeyExportType = api.StoredKeyExportType
-
-export const loadStoredKey = send('param_load_stored_key', 'resp_load_stored_key')
-export const createStoredKey = send('param_create_stored_key', 'resp_create_stored_key')
-export const importPrivateKey = send('param_import_private_key', 'resp_import_private_key')
-export const importMnemonic = send('param_import_mnemonic', 'resp_import_mnemonic')
-export const importJSON = send('param_import_json', 'resp_import_json')
-export const createAccountOfCoinAtPath = send(
-    'param_create_account_of_coin_at_path',
-    'resp_create_account_of_coin_at_path',
-)
-export const exportPrivateKey = send('param_export_private_key', 'resp_export_private_key')
-export const exportPrivateKeyOfPath = send('param_export_private_key_of_path', 'resp_export_private_key')
-export const exportMnemonic = send('param_export_mnemonic', 'resp_export_mnemonic')
-export const exportKeyStoreJSONOfAddress = send('param_export_key_store_json_of_address', 'resp_export_key_store_json')
-export const exportKeyStoreJSONOfPath = send('param_export_key_store_json_of_path', 'resp_export_key_store_json')
-export const exportUpdateKeyStorePassword = send('param_update_key_store_password', 'resp_update_key_store_password')
-export const signTransaction = send('param_sign_transaction', 'resp_sign_transaction')
-export const getLibVersion = send('param_get_version', 'resp_get_version')
-export const validate = send('param_validation', 'resp_validate')
-export const getSupportImportTypes = send('param_get_stored_key_import_type', 'resp_get_stored_key_import_type')
-export const getSupportExportTypes = send('param_get_stored_key_export_type', 'resp_get_stored_key_export_type')
diff --git a/packages/mask/src/plugins/Wallet/services/wallet/type.ts b/packages/mask/src/plugins/Wallet/services/wallet/type.ts
index f31fb4f372b7..0615bccfc8c7 100644
--- a/packages/mask/src/plugins/Wallet/services/wallet/type.ts
+++ b/packages/mask/src/plugins/Wallet/services/wallet/type.ts
@@ -1,27 +1,5 @@
 import type { api } from '@dimensiondev/mask-wallet-core/proto'
-import type { ERC1155TokenDetailed, ERC20TokenDetailed, ERC721TokenDetailed, Wallet } from '@masknet/web3-shared-evm'
-
-export interface ERC20TokenRecord extends Omit<ERC20TokenDetailed, 'type'> {
-    id: string
-    type: 'erc20'
-    createdAt: Date
-    updatedAt: Date
-}
-
-export interface ERC721TokenRecord extends ERC721TokenDetailed {
-    id: string
-    type: 'erc721'
-    createdAt: Date
-    updatedAt: Date
-}
-
-export interface ERC1155TokenRecord extends Omit<ERC1155TokenDetailed, 'type'> {
-    id: string
-    type: 'erc1155'
-    createdAt: Date
-    updatedAt: Date
-}
-
+import type { Wallet } from '@masknet/web3-shared-evm'
 export interface WalletRecord extends Omit<Wallet, 'configurable' | 'hasStoredKeyInfo' | 'hasDerivationPath'> {
     id: string
     type: 'wallet'
diff --git a/packages/mask/src/plugins/Wallet/settings.ts b/packages/mask/src/plugins/Wallet/settings.ts
index f92053a39da9..adf4ad63971b 100644
--- a/packages/mask/src/plugins/Wallet/settings.ts
+++ b/packages/mask/src/plugins/Wallet/settings.ts
@@ -1,16 +1,7 @@
-import { isEqual } from 'lodash-unified'
-import { createComplexGlobalSettings, createGlobalSettings } from '../../settings/createSettings'
-import {
-    ChainId,
-    NonFungibleAssetProvider,
-    CryptoPrice,
-    GasOptions,
-    NetworkType,
-    FungibleAssetProvider,
-    ProviderType,
-    LockStatus,
-} from '@masknet/web3-shared-evm'
+import { createGlobalSettings } from '../../settings/createSettings'
+import { ChainId, NetworkType } from '@masknet/web3-shared-evm'
 import { PLUGIN_ID } from './constants'
+import { LockStatus } from './types'
 
 export const currentMaskWalletAccountSettings = createGlobalSettings(`${PLUGIN_ID}+selectedMaskWalletAddress`, '')
 
@@ -25,39 +16,3 @@ export const currentMaskWalletLockStatusSettings = createGlobalSettings<LockStat
     `${PLUGIN_ID}+maskWalletLockStatus`,
     LockStatus.INIT,
 )
-
-export const currentAccountSettings = createGlobalSettings(`${PLUGIN_ID}+selectedWalletAddress`, '')
-
-export const currentChainIdSettings = createGlobalSettings<ChainId>(`${PLUGIN_ID}+chainId`, ChainId.Mainnet)
-
-export const currentNetworkSettings = createGlobalSettings<NetworkType>(
-    `${PLUGIN_ID}+selectedWalletNetwork`,
-    NetworkType.Ethereum,
-)
-
-export const currentProviderSettings = createGlobalSettings<ProviderType>(
-    `${PLUGIN_ID}+selectedWalletProvider`,
-    ProviderType.MaskWallet,
-)
-
-export const currentFungibleAssetDataProviderSettings = createGlobalSettings<FungibleAssetProvider>(
-    `${PLUGIN_ID}+fungibleAssetProvider`,
-    FungibleAssetProvider.DEBANK,
-)
-
-export const currentNonFungibleAssetDataProviderSettings = createGlobalSettings<NonFungibleAssetProvider>(
-    `${PLUGIN_ID}+nonFungibleAssetProvider`,
-    NonFungibleAssetProvider.OPENSEA,
-)
-
-export const currentGasOptionsSettings = createComplexGlobalSettings<GasOptions | null>(
-    `${PLUGIN_ID}+gasOptions`,
-    null,
-    isEqual,
-)
-
-export const currentTokenPricesSettings = createComplexGlobalSettings<CryptoPrice>(
-    `${PLUGIN_ID}+tokenPrices`,
-    {},
-    isEqual,
-)
diff --git a/packages/mask/src/plugins/Wallet/types/debank.ts b/packages/mask/src/plugins/Wallet/types/debank.ts
deleted file mode 100644
index de4774be8edb..000000000000
--- a/packages/mask/src/plugins/Wallet/types/debank.ts
+++ /dev/null
@@ -1,163 +0,0 @@
-export enum DebankTransactionDirection {
-    SEND = 'send',
-    RECEIVE = 'receive',
-}
-
-export interface DictItem {
-    id: string
-    name: string
-}
-
-export interface ProjectItem {
-    id: string
-    log_url: string
-    name: Omit<DictItem, 'id'>
-}
-
-export interface TokenItem {
-    decimals: number
-    display_symbol?: string
-    id: string
-    is_core: boolean
-    is_swap_common?: boolean
-    is_swap_hot?: boolean
-    is_verified: boolean
-    logo_url: string
-    name: string
-    optimized_symbol: string
-    price: number
-    symbol: string
-    time_at: number
-}
-
-export interface HistoryItem {
-    cate_id: keyof HistoryResponse['data']['cate_dict']
-    // TODO: implement debt_liquidated
-    debt_liquidated: null
-    id: string
-    other_addr: string
-    project_id?: string
-    receives: AmountTokenPair[]
-    sends: AmountTokenPair[]
-    spot_trade?: SpotTrade
-    time_at: number
-    token_approve?: TokenApprove
-    tx?: Record
-}
-
-export interface AmountTokenPair {
-    amount: number
-    to_addr: string
-    token_id: string
-}
-
-export interface SpotTrade {
-    dex_id: string
-    pay_token_amount: number
-    pay_token_id: string
-    receive_token_amount: number
-    receive_token_id: string
-}
-
-export interface TokenApprove {
-    spender: string
-    token_id: string
-    value: number
-}
-
-export interface Record {
-    eth_gas_fee: number
-    from_addr: string
-    name: string
-    // Note: this is JSON string
-    params: string
-    // Note: 0 - failed, 1 - succeed
-    status: 0 | 1
-    to_addr: string
-    usd_gas_fee: number
-    value: number
-}
-
-export interface HistoryRecord {
-    cate_dict: {
-        approve: DictItem
-        receive: DictItem
-        send: DictItem
-        spot_trade: DictItem
-    }
-    history_list: HistoryItem[]
-    project_dict: {
-        [key in string]: ProjectItem
-    }
-    token_dict: {
-        [key in string | 'eth']: TokenItem
-    }
-}
-
-export interface BalanceRecord {
-    balance: number
-    // TODO: convert to enum
-    chain: 'eth' | 'bsc' | string
-    decimals: number
-    display_symbol: null
-    id: 'eth' | string
-    is_core: boolean
-    is_swap_common: boolean
-    is_swap_hot: null
-    is_verified: boolean
-    logo_url: string
-    name: string
-    optimized_symbol: string
-    price: number
-    symbol: string
-    time_at: null
-}
-
-export interface WalletTokenRecord {
-    id: 'eth' | string
-    amount: string
-    is_wallet: boolean
-    protocol_id: string
-    chain: 'eth' | 'bsc' | string
-    decimals: number
-    display_symbol: null
-    is_core: boolean
-    is_verified: boolean
-    logo_url: string
-    name: string
-    optimized_symbol: string
-    price: number
-    symbol: string
-    time_at: null
-}
-
-export interface HistoryResponse {
-    data: HistoryRecord
-    error_code: number
-    _cache_seconds: number
-    _seconds: number
-}
-
-export interface BalanceListResponse {
-    data?: BalanceRecord[]
-    error_code: number
-    _cache_seconds: number
-    _seconds: number
-}
-
-export interface GasPriceRecord {
-    estimated_seconds: number
-    front_tx_count: number
-    price: number
-}
-
-export interface GasPriceDictResponse {
-    data: {
-        fast: GasPriceRecord
-        normal: GasPriceRecord
-        slow: GasPriceRecord
-        update_at: number
-    }
-    error_code: number
-    _seconds: number
-}
diff --git a/packages/mask/src/plugins/Wallet/types/index.ts b/packages/mask/src/plugins/Wallet/types/index.ts
index 89d30ef60a59..f20ad395c979 100644
--- a/packages/mask/src/plugins/Wallet/types/index.ts
+++ b/packages/mask/src/plugins/Wallet/types/index.ts
@@ -1,3 +1,5 @@
-export * from './zerion'
-export * from './debank'
-export * from './portfolio'
+export enum LockStatus {
+    INIT = 0,
+    UNLOCK = 1,
+    LOCKED = 2,
+}
diff --git a/packages/mask/src/plugins/Wallet/types/metaswap.ts b/packages/mask/src/plugins/Wallet/types/metaswap.ts
deleted file mode 100644
index 03e7352efebc..000000000000
--- a/packages/mask/src/plugins/Wallet/types/metaswap.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-export interface estimateSuggestOption {
-    maxWaitTimeEstimate: number
-    minWaitTimeEstimate: number
-    suggestedMaxFeePerGas: string
-    suggestedMaxPriorityFeePerGas: string
-}
-
-export interface estimateSuggestResponse {
-    estimatedBaseFee: string
-    low?: estimateSuggestOption
-    medium?: estimateSuggestOption
-    high?: estimateSuggestOption
-}
diff --git a/packages/mask/src/plugins/Wallet/types/portfolio.ts b/packages/mask/src/plugins/Wallet/types/portfolio.ts
deleted file mode 100644
index 870419673b60..000000000000
--- a/packages/mask/src/plugins/Wallet/types/portfolio.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-import type { ZerionTransactionDirection } from './zerion'
-import type { DebankTransactionDirection } from './debank'
-
-export enum FilterTransactionType {
-    ALL = 'all',
-    SEND = 'send',
-    RECEIVE = 'receive',
-}
-
-export type TransactionDirection = ZerionTransactionDirection | DebankTransactionDirection
-
-export interface TransactionPair {
-    name: string
-    symbol: string
-    address: string
-    direction: TransactionDirection
-    amount: number
-    logoURI?: string
-}
-
-export type TransactionGasFee = {
-    eth: number
-    usd: number
-}
-
-export interface Transaction {
-    type: string | undefined
-    id: string
-    timeAt: Date
-    toAddress: string
-    failed: boolean
-    pairs: TransactionPair[]
-    gasFee: TransactionGasFee | undefined
-    transactionType: string
-}
diff --git a/packages/mask/src/plugins/Wallet/types/zerion.ts b/packages/mask/src/plugins/Wallet/types/zerion.ts
deleted file mode 100644
index d39248b20e6e..000000000000
--- a/packages/mask/src/plugins/Wallet/types/zerion.ts
+++ /dev/null
@@ -1,146 +0,0 @@
-export type SocketNameSpace = {
-    namespace: string
-    socket: SocketIOClient.Socket
-}
-
-export type SocketRequestAssetScope = 'assets' | 'bsc-assets' | 'polygon-assets'
-
-export type SocketRequestBody = {
-    scope: string[]
-    payload: Record<string, any>
-}
-
-export interface SocketResponseBody {
-    meta: { status: string }
-    payload: Record<string, any>
-}
-
-export enum ZerionRBDTransactionType {
-    SEND = 'send',
-    RECEIVE = 'receive',
-    TRADE = 'trade',
-    AUTHORIZE = 'authorize',
-    EXECUTION = 'execution',
-    DEPLOYMENT = 'deployment',
-    CANCEL = 'cancel',
-    DEPOSIT = 'deposit',
-    WITHDRAW = 'withdraw',
-    BORROW = 'borrow',
-    REPAY = 'repay',
-    STAKE = 'stake',
-    UNSTAKE = 'unstake',
-    CLAIM = 'claim',
-}
-
-export enum ZerionTransactionStatus {
-    CONFIRMED = 'confirmed',
-    FAILED = 'failed',
-    PENDING = 'pending',
-}
-
-export enum ZerionTransactionDirection {
-    IN = 'in',
-    OUT = 'out',
-    SELF = 'self',
-}
-
-export interface ZerionPrice {
-    value: number
-    changed_at: number
-    relative_change_24h?: number
-}
-
-export interface ZerionAsset {
-    asset_code: string
-    name: string
-    symbol: string
-    decimals: number
-    type: string
-    is_displayable: boolean
-    is_verified: boolean
-    icon_url?: string
-    price?: ZerionPrice
-}
-
-export interface ZerionCovalentAsset {
-    asset_code: string
-    name: string
-    symbol: string
-    decimals: number
-    icon_url?: string
-    value: number
-}
-
-export interface ZerionAddressAsset {
-    asset: ZerionAsset
-    quantity: string
-}
-
-export interface ZerionAddressCovalentAsset {
-    asset: ZerionCovalentAsset
-    quantity: string
-}
-
-export interface ZerionTransactionChange {
-    asset: ZerionAsset
-    value: number
-    direction: ZerionTransactionDirection
-    address_from: string
-    address_to: string
-    price?: number
-}
-
-export interface ZerionTransactionFee {
-    value: number
-    price: number
-}
-
-export interface ZerionTransactionItem {
-    id: string
-    type: ZerionRBDTransactionType
-    protocol: string
-    mined_at: number
-    block_number: number
-    status: ZerionTransactionStatus
-    hash: string
-    direction?: ZerionTransactionDirection
-    address_from?: string
-    address_to?: string
-    contract?: string
-    nonce?: number
-    changes?: ZerionTransactionChange[]
-    fee?: ZerionTransactionFee
-    meta?: string
-}
-
-export interface ZerionTransactionResponseBody extends SocketResponseBody {
-    meta: {
-        status: string
-        address: string
-        addresses: string[]
-        currency: string
-        transactions_limit: number
-        transactions_offset: number
-        transactions_search_query: string
-    }
-    payload: {
-        transactions: ZerionTransactionItem[]
-    }
-}
-
-type ZerionAssetResponseBodyPayload = {
-    assets: Record<string, ZerionAddressAsset>
-    'bsc-assets': Record<string, ZerionAddressCovalentAsset>
-    'polygon-assets': Record<string, ZerionAddressCovalentAsset>
-}
-
-export interface ZerionAssetResponseBody extends SocketResponseBody {
-    meta: {
-        address: string
-        addresses: string[]
-        asset_codes: string[]
-        currency: string
-        status: string
-    }
-    payload: Partial<ZerionAssetResponseBodyPayload>
-}
diff --git a/packages/mask/src/plugins/dHEDGE/UI/InvestDialog.tsx b/packages/mask/src/plugins/dHEDGE/UI/InvestDialog.tsx
index d636468993f7..d44507e27798 100644
--- a/packages/mask/src/plugins/dHEDGE/UI/InvestDialog.tsx
+++ b/packages/mask/src/plugins/dHEDGE/UI/InvestDialog.tsx
@@ -1,14 +1,9 @@
 import { InjectedDialog, useOpenShareTxDialog, usePickToken } from '@masknet/shared'
 import { useRemoteControlledDialog } from '@masknet/shared-base-ui'
 import { makeStyles } from '@masknet/theme'
-import { isZero, rightShift } from '@masknet/web3-shared-base'
-import {
-    EthereumTokenType,
-    formatBalance,
-    FungibleTokenDetailed,
-    useAccount,
-    useFungibleTokenBalance,
-} from '@masknet/web3-shared-evm'
+import { useAccount, useFungibleTokenBalance } from '@masknet/plugin-infra/web3'
+import { formatBalance, FungibleToken, isZero, NetworkPluginID, rightShift } from '@masknet/web3-shared-base'
+import { ChainId, SchemaType } from '@masknet/web3-shared-evm'
 import { DialogContent } from '@mui/material'
 import { useCallback, useMemo, useState } from 'react'
 import ActionButton from '../../../extension/options-page/DashboardComponents/ActionButton'
@@ -17,7 +12,7 @@ import { isFacebook } from '../../../social-network-adaptor/facebook.com/base'
 import { isTwitter } from '../../../social-network-adaptor/twitter.com/base'
 import { useI18N } from '../../../utils/i18n-next-ui'
 import { EthereumERC20TokenApprovedBoundary } from '../../../web3/UI/EthereumERC20TokenApprovedBoundary'
-import { EthereumWalletConnectedBoundary } from '../../../web3/UI/EthereumWalletConnectedBoundary'
+import { WalletConnectedBoundary } from '../../../web3/UI/WalletConnectedBoundary'
 import { TokenAmountPanel } from '../../../web3/UI/TokenAmountPanel'
 import { PluginTraderMessages } from '../../Trader/messages'
 import type { Coin } from '../../Trader/types'
@@ -52,11 +47,11 @@ export function InvestDialog() {
     const { t } = useI18N()
     const { classes } = useStyles()
     const [pool, setPool] = useState<Pool>()
-    const [token, setToken] = useState<FungibleTokenDetailed>()
+    const [token, setToken] = useState<FungibleToken<ChainId, SchemaType>>()
     const [allowedTokens, setAllowedTokens] = useState<string[]>()
 
     // context
-    const account = useAccount()
+    const account = useAccount(NetworkPluginID.PLUGIN_EVM)
 
     // #region remote controlled dialog
     const { open, closeDialog } = useRemoteControlledDialog(PluginDHedgeMessages.InvestDialogUpdated, (ev) => {
@@ -90,7 +85,7 @@ export function InvestDialog() {
         value: tokenBalance = '0',
         loading: loadingTokenBalance,
         retry: retryLoadTokenBalance,
-    } = useFungibleTokenBalance(token?.type ?? EthereumTokenType.Native, token?.address ?? '')
+    } = useFungibleTokenBalance(NetworkPluginID.PLUGIN_EVM, token?.address ?? '')
     // #endregion
 
     // #region blocking
@@ -152,10 +147,6 @@ export function InvestDialog() {
     }, [token, openSwapDialog])
     // #endregion
 
-    // #region transaction dialog
-
-    // on close transaction dialog
-
     // #region submit button
     const validationMessage = useMemo(() => {
         if (!account) return t('plugin_wallet_connect_a_wallet')
@@ -188,7 +179,7 @@ export function InvestDialog() {
                             }}
                         />
                     </form>
-                    <EthereumWalletConnectedBoundary>
+                    <WalletConnectedBoundary>
                         {isZero(tokenBalance) ? (
                             <ActionButton
                                 className={classes.button}
@@ -203,7 +194,7 @@ export function InvestDialog() {
                             <EthereumERC20TokenApprovedBoundary
                                 amount={amount.toFixed()}
                                 spender={pool.address}
-                                token={token?.type === EthereumTokenType.ERC20 ? token : undefined}>
+                                token={token?.schema === SchemaType.ERC20 ? token : undefined}>
                                 <ActionButton
                                     className={classes.button}
                                     fullWidth
@@ -215,7 +206,7 @@ export function InvestDialog() {
                                 </ActionButton>
                             </EthereumERC20TokenApprovedBoundary>
                         )}
-                    </EthereumWalletConnectedBoundary>
+                    </WalletConnectedBoundary>
                 </DialogContent>
             </InjectedDialog>
         </div>
diff --git a/packages/mask/src/plugins/dHEDGE/UI/PoolStats.tsx b/packages/mask/src/plugins/dHEDGE/UI/PoolStats.tsx
index ad79a113f30a..01fa5d83cc51 100644
--- a/packages/mask/src/plugins/dHEDGE/UI/PoolStats.tsx
+++ b/packages/mask/src/plugins/dHEDGE/UI/PoolStats.tsx
@@ -7,7 +7,7 @@ import { formatAmountPostfix } from '../utils'
 import DOMPurify from 'isomorphic-dompurify'
 import { POOL_DESCRIPTION_LIMIT } from '../constants'
 import BigNumber from 'bignumber.js'
-import { formatBalance } from '@masknet/web3-shared-evm'
+import { formatBalance } from '@masknet/web3-shared-base'
 
 const DIGIT_LENGTH = 18
 
diff --git a/packages/mask/src/plugins/dHEDGE/UI/PoolView.tsx b/packages/mask/src/plugins/dHEDGE/UI/PoolView.tsx
index 9b544abf2b1b..39484f074db4 100644
--- a/packages/mask/src/plugins/dHEDGE/UI/PoolView.tsx
+++ b/packages/mask/src/plugins/dHEDGE/UI/PoolView.tsx
@@ -1,14 +1,16 @@
+import { useState } from 'react'
 import { RefreshIcon } from '@masknet/icons'
-import { useChainId } from '@masknet/web3-shared-evm'
 import { Box, Card, CardContent, CardHeader, CircularProgress, Paper, Tab, Tabs, Typography } from '@mui/material'
 import { makeStyles } from '@masknet/theme'
-import { useState } from 'react'
 import { useI18N } from '../../../utils/i18n-next-ui'
 import { useFetchPool, usePoolDepositAssets } from '../hooks/usePool'
 import { PerformanceChart } from './PerformanceChart'
 import { PoolStats } from './PoolStats'
 import { PoolViewDeck } from './PoolViewDeck'
-import { EthereumChainBoundary } from '../../../web3/UI/EthereumChainBoundary'
+import { useChainId } from '@masknet/plugin-infra/web3'
+import { ChainId } from '@masknet/web3-shared-evm'
+import { NetworkPluginID } from '@masknet/web3-shared-base'
+import { ChainBoundary } from '../../../web3/UI/ChainBoundary'
 
 const useStyles = makeStyles()((theme) => ({
     root: {
@@ -61,7 +63,7 @@ interface PoolViewProps {
 export function PoolView(props: PoolViewProps) {
     const { t } = useI18N()
     const { classes } = useStyles()
-    const currentChainId = useChainId()
+    const currentChainId = useChainId(NetworkPluginID.PLUGIN_EVM)
 
     // #region allowed tokens
     const { value: pool, error, loading, retry } = useFetchPool(props.address ?? '')
@@ -132,7 +134,11 @@ export function PoolView(props: PoolViewProps) {
                 </CardContent>
             </Card>
             <Box sx={{ display: 'flex', width: 'calc(100% - 24px)', padding: 1.5 }}>
-                <EthereumChainBoundary chainId={pool.chainId} renderInTimeline />
+                <ChainBoundary
+                    expectedPluginID={NetworkPluginID.PLUGIN_EVM}
+                    expectedChainId={pool?.chainId ?? ChainId.Mainnet}
+                    renderInTimeline
+                />
             </Box>
         </>
     )
diff --git a/packages/mask/src/plugins/dHEDGE/UI/PoolViewDeck.tsx b/packages/mask/src/plugins/dHEDGE/UI/PoolViewDeck.tsx
index 8274f0abb469..b053c41d2f71 100644
--- a/packages/mask/src/plugins/dHEDGE/UI/PoolViewDeck.tsx
+++ b/packages/mask/src/plugins/dHEDGE/UI/PoolViewDeck.tsx
@@ -1,4 +1,5 @@
-import { resolveAddressLinkOnExplorer, useAccount, useChainId } from '@masknet/web3-shared-evm'
+import { explorerResolver } from '@masknet/web3-shared-evm'
+import { useAccount, useChainId } from '@masknet/plugin-infra/web3'
 import { Avatar, Button, Grid, Link, Typography } from '@mui/material'
 import { makeStyles } from '@masknet/theme'
 import BigNumber from 'bignumber.js'
@@ -9,6 +10,7 @@ import { useI18N } from '../../../utils/i18n-next-ui'
 import { useAvatar } from '../hooks/useManager'
 import { PluginDHedgeMessages } from '../messages'
 import type { Pool } from '../types'
+import { NetworkPluginID } from '@masknet/web3-shared-base'
 
 const useStyles = makeStyles()((theme) => ({
     root: {
@@ -64,8 +66,8 @@ export function PoolViewDeck(props: PoolDeckProps) {
     const { t } = useI18N()
 
     const blockie = useAvatar(pool.managerAddress)
-    const chainId = useChainId()
-    const account = useAccount()
+    const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
+    const account = useAccount(NetworkPluginID.PLUGIN_EVM)
 
     // #region manager share
     const managerShare = new BigNumber(pool.balanceOfManager)
@@ -109,7 +111,7 @@ export function PoolViewDeck(props: PoolDeckProps) {
                                         <Link
                                             target="_blank"
                                             rel="noopener noreferrer"
-                                            href={resolveAddressLinkOnExplorer(chainId, pool.managerAddress)}
+                                            href={explorerResolver.addressLink(chainId, pool.managerAddress)}
                                         />
                                     ),
                                 }}
diff --git a/packages/mask/src/plugins/dHEDGE/contracts/useDHedgePool.ts b/packages/mask/src/plugins/dHEDGE/contracts/useDHedgePool.ts
index 31e19082b969..2818df0be412 100644
--- a/packages/mask/src/plugins/dHEDGE/contracts/useDHedgePool.ts
+++ b/packages/mask/src/plugins/dHEDGE/contracts/useDHedgePool.ts
@@ -5,16 +5,17 @@ import DHedgePoolManagerABI from '@masknet/web3-contracts/abis/DHedgePoolManager
 import type { DHedgePoolV1 } from '@masknet/web3-contracts/types/DHedgePoolV1'
 import type { DHedgePoolV2 } from '@masknet/web3-contracts/types/DHedgePoolV2'
 import type { DHedgePoolManager } from '@masknet/web3-contracts/types/DHedgePoolManager'
-import { useContract } from '@masknet/web3-shared-evm'
+import { useContract } from '@masknet/plugin-infra/web3-evm'
+import type { ChainId } from '@masknet/web3-shared-evm'
 
-export function useDHedgePoolV1Contract(address?: string) {
-    return useContract<DHedgePoolV1>(address, DHedgePoolV1ABI as AbiItem[])
+export function useDHedgePoolV1Contract(chainId: ChainId, address?: string) {
+    return useContract<DHedgePoolV1>(chainId, address, DHedgePoolV1ABI as AbiItem[])
 }
 
-export function useDHedgePoolV2Contract(address?: string) {
-    return useContract<DHedgePoolV2>(address, DHedgePoolV2ABI as AbiItem[])
+export function useDHedgePoolV2Contract(chainId: ChainId, address?: string) {
+    return useContract<DHedgePoolV2>(chainId, address, DHedgePoolV2ABI as AbiItem[])
 }
 
-export function useDHedgePoolManagerContract(address?: string) {
-    return useContract<DHedgePoolManager>(address, DHedgePoolManagerABI as AbiItem[])
+export function useDHedgePoolManagerContract(chainId: ChainId, address?: string) {
+    return useContract<DHedgePoolManager>(chainId, address, DHedgePoolManagerABI as AbiItem[])
 }
diff --git a/packages/mask/src/plugins/dHEDGE/hooks/useInvestCallback.ts b/packages/mask/src/plugins/dHEDGE/hooks/useInvestCallback.ts
index ec087c129d64..80c4f77d39e8 100644
--- a/packages/mask/src/plugins/dHEDGE/hooks/useInvestCallback.ts
+++ b/packages/mask/src/plugins/dHEDGE/hooks/useInvestCallback.ts
@@ -1,5 +1,6 @@
-import { toFixed } from '@masknet/web3-shared-base'
-import { EthereumTokenType, FungibleTokenDetailed, TransactionEventType, useAccount } from '@masknet/web3-shared-evm'
+import { useAccount, useChainId } from '@masknet/plugin-infra/web3'
+import { FungibleToken, NetworkPluginID, toFixed } from '@masknet/web3-shared-base'
+import { ChainId, SchemaType, TransactionEventType } from '@masknet/web3-shared-evm'
 import { useAsyncFn } from 'react-use'
 import { useDHedgePoolV1Contract, useDHedgePoolV2Contract } from '../contracts/useDHedgePool'
 import { Pool, PoolType } from '../types'
@@ -10,11 +11,11 @@ import { Pool, PoolType } from '../types'
  * @param amount
  * @param token
  */
-export function useInvestCallback(pool: Pool | undefined, amount: string, token?: FungibleTokenDetailed) {
-    const poolV1Contract = useDHedgePoolV1Contract(pool?.address ?? '')
-    const poolV2Contract = useDHedgePoolV2Contract(pool?.address ?? '')
-
-    const account = useAccount()
+export function useInvestCallback(pool: Pool | undefined, amount: string, token?: FungibleToken<ChainId, SchemaType>) {
+    const account = useAccount(NetworkPluginID.PLUGIN_EVM)
+    const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
+    const poolV1Contract = useDHedgePoolV1Contract(chainId, pool?.address ?? '')
+    const poolV2Contract = useDHedgePoolV2Contract(chainId, pool?.address ?? '')
 
     return useAsyncFn(async () => {
         if (!token || !poolV1Contract || !poolV2Contract) return
@@ -22,7 +23,7 @@ export function useInvestCallback(pool: Pool | undefined, amount: string, token?
         // step 1: estimate gas
         const config = {
             from: account,
-            value: toFixed(token.type === EthereumTokenType.Native ? amount : 0),
+            value: toFixed(token.schema === SchemaType.Native ? amount : 0),
         }
 
         const deposit = () => {
diff --git a/packages/mask/src/plugins/dHEDGE/hooks/useManager.ts b/packages/mask/src/plugins/dHEDGE/hooks/useManager.ts
index 6d556c210b42..8e985ebab4e4 100644
--- a/packages/mask/src/plugins/dHEDGE/hooks/useManager.ts
+++ b/packages/mask/src/plugins/dHEDGE/hooks/useManager.ts
@@ -1,4 +1,4 @@
-import { useBlockie } from '@masknet/web3-shared-evm'
+import { useBlockie } from '@masknet/plugin-infra/web3'
 import { BLOCKIES_OPTIONS } from '../constants'
 
 export function useAvatar(address: string) {
diff --git a/packages/mask/src/plugins/dHEDGE/hooks/usePool.ts b/packages/mask/src/plugins/dHEDGE/hooks/usePool.ts
index 4c507d90689d..012f0d76af64 100644
--- a/packages/mask/src/plugins/dHEDGE/hooks/usePool.ts
+++ b/packages/mask/src/plugins/dHEDGE/hooks/usePool.ts
@@ -3,7 +3,9 @@ import { API_URL } from '../constants'
 import { PluginDHedgeRPC } from '../messages'
 import { Period, Pool, PoolType } from '../types'
 import { useDHedgePoolManagerContract } from '../contracts/useDHedgePool'
-import { useChainId, useTokenConstants } from '@masknet/web3-shared-evm'
+import { useTokenConstants } from '@masknet/web3-shared-evm'
+import { useChainId } from '@masknet/plugin-infra/web3'
+import { NetworkPluginID } from '@masknet/web3-shared-base'
 
 export function useFetchPool(address: string) {
     return useAsyncRetry(async () => {
@@ -20,9 +22,9 @@ export function useFetchPoolHistory(address: string, period: Period, sort = true
 }
 
 export function usePoolDepositAssets(pool?: Pool) {
-    const chainId = useChainId()
     const { sUSD_ADDRESS } = useTokenConstants()
-    const poolManagerContract = useDHedgePoolManagerContract(pool?.managerLogicAddress)
+    const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
+    const poolManagerContract = useDHedgePoolManagerContract(chainId, pool?.managerLogicAddress)
     return useAsyncRetry(async () => {
         if (!pool) return
         if (pool.poolType === PoolType.v1) return sUSD_ADDRESS ? [sUSD_ADDRESS] : undefined
diff --git a/packages/mask/src/plugins/hooks/usePriceLineChart.ts b/packages/mask/src/plugins/hooks/usePriceLineChart.ts
index 89998fc0966b..201c16690627 100644
--- a/packages/mask/src/plugins/hooks/usePriceLineChart.ts
+++ b/packages/mask/src/plugins/hooks/usePriceLineChart.ts
@@ -1,6 +1,6 @@
 import type { RefObject } from 'react'
 import type { Dimension } from './useDimension'
-import { formatCurrency } from '@masknet/web3-shared-evm'
+import { formatCurrency } from '@masknet/web3-shared-base'
 import { useLineChart } from './useLineChart'
 
 export function usePriceLineChart(
diff --git a/packages/mask/src/settings/listener.ts b/packages/mask/src/settings/listener.ts
index 0e9732de33ec..92cd76a264dc 100644
--- a/packages/mask/src/settings/listener.ts
+++ b/packages/mask/src/settings/listener.ts
@@ -1,15 +1,5 @@
 import { appearanceSettings, pluginIDSettings, languageSettings, currentPersonaIdentifier } from './settings'
 import type { MaskSettingsEvents } from '@masknet/shared-base'
-import {
-    currentAccountSettings,
-    currentChainIdSettings,
-    currentNonFungibleAssetDataProviderSettings,
-    currentNetworkSettings,
-    currentFungibleAssetDataProviderSettings,
-    currentProviderSettings,
-    currentTokenPricesSettings,
-} from '../plugins/Wallet/settings'
-import { currentDataProviderSettings } from '../plugins/Trader/settings'
 import type { InternalSettings } from './createSettings'
 
 type ToBeListedSettings = { [key in keyof MaskSettingsEvents]: InternalSettings<MaskSettingsEvents[key]> }
@@ -18,14 +8,6 @@ export function ToBeListened(): ToBeListedSettings {
         appearanceSettings,
         pluginIDSettings,
         languageSettings,
-        currentChainIdSettings,
-        currentTokenPricesSettings,
-        currentDataProviderSettings,
-        currentProviderSettings,
-        currentNetworkSettings,
-        currentAccountSettings,
-        currentFungibleAssetDataProviderSettings,
-        currentNonFungibleAssetDataProviderSettings,
         currentPersonaIdentifier,
     }
 }
diff --git a/packages/mask/src/settings/settings.ts b/packages/mask/src/settings/settings.ts
index bca6441c484f..2e68285ed93b 100644
--- a/packages/mask/src/settings/settings.ts
+++ b/packages/mask/src/settings/settings.ts
@@ -1,15 +1,15 @@
-import { createGlobalSettings, createNetworkSettings, createComplexNetworkSettings } from './createSettings'
-import { LaunchPage } from './types'
+import { isEqual } from 'lodash-unified'
 import { Appearance } from '@masknet/theme'
 import { LanguageOptions } from '@masknet/public-api'
 import { updateLanguage } from '@masknet/shared-base'
-import { PLUGIN_ID } from '../plugins/EVM/constants'
-import { isEqual } from 'lodash-unified'
+import { NetworkPluginID } from '@masknet/web3-shared-base'
+import { LaunchPage } from './types'
+import { createGlobalSettings, createNetworkSettings, createComplexNetworkSettings } from './createSettings'
 
 export const appearanceSettings = createGlobalSettings<Appearance>('appearance', Appearance.default)
 export const languageSettings = createGlobalSettings<LanguageOptions>('language', LanguageOptions.__auto__)
 languageSettings.addListener(updateLanguage)
-export const pluginIDSettings = createGlobalSettings('pluginID', PLUGIN_ID)
+export const pluginIDSettings = createGlobalSettings<NetworkPluginID>('pluginID', NetworkPluginID.PLUGIN_EVM)
 export const userGuideVersion = createGlobalSettings('userGuideVersion', 'v2')
 
 export const currentSetupGuideStatus = createNetworkSettings('currentSetupGuideStatus', '')
diff --git a/packages/mask/src/social-network-adaptor/facebook.com/injection/NFT/ProfileNFTAvatar.tsx b/packages/mask/src/social-network-adaptor/facebook.com/injection/NFT/ProfileNFTAvatar.tsx
index 5c6ccacab634..3238dd82874f 100644
--- a/packages/mask/src/social-network-adaptor/facebook.com/injection/NFT/ProfileNFTAvatar.tsx
+++ b/packages/mask/src/social-network-adaptor/facebook.com/injection/NFT/ProfileNFTAvatar.tsx
@@ -13,11 +13,12 @@ import {
 } from '../../utils/selector'
 import { useCallback, useEffect } from 'react'
 import { toPNG } from '../../../../plugins/Avatar/utils'
-import type { ERC721TokenDetailed } from '@masknet/web3-shared-evm'
 import { useCurrentVisitingIdentity } from '../../../../components/DataSource/useActivatedUI'
 import { getAvatarId } from '../../utils/user'
 import { isMobileFacebook } from '../../utils/isMobile'
 import { InMemoryStorages } from '../../../../../shared'
+import type { NonFungibleToken } from '@masknet/web3-shared-base'
+import type { ChainId, SchemaType } from '@masknet/web3-shared-evm'
 
 export async function injectProfileNFTAvatarInFaceBook(signal: AbortSignal) {
     if (!isMobileFacebook) {
@@ -61,9 +62,9 @@ function NFTAvatarInFacebookFirstStep() {
     const identity = useCurrentVisitingIdentity()
 
     const onChange = useCallback(
-        async (token: ERC721TokenDetailed) => {
-            if (!token.info.imageURL) return
-            const image = await toPNG(token.info.imageURL)
+        async (token: NonFungibleToken<ChainId, SchemaType>) => {
+            if (!token.metadata?.imageURL || !token.contract?.address) return
+            const image = await toPNG(token.metadata.imageURL)
             if (!image) return
             if (!identity.identifier) return
 
@@ -72,7 +73,7 @@ function NFTAvatarInFacebookFirstStep() {
             MaskMessages.events.NFTAvatarUpdated.sendToLocal({
                 userId: identity.identifier.userId,
                 avatarId: '',
-                address: token.contractDetailed.address,
+                address: token.contract.address,
                 tokenId: token.tokenId,
             })
         },
@@ -140,16 +141,16 @@ function NFTAvatarListInFaceBookMobile() {
     const identity = useCurrentVisitingIdentity()
 
     const onChange = useCallback(
-        async (token: ERC721TokenDetailed) => {
-            if (!token.info.imageURL) return
-            const image = await toPNG(token.info.imageURL)
+        async (token: NonFungibleToken<ChainId, SchemaType>) => {
+            if (!token.metadata?.imageURL || !token.contract?.address) return
+            const image = await toPNG(token.metadata.imageURL)
             if (!image) return
 
             await changeImageToActiveElementsOnMobile(image)
 
             identity.identifier &&
                 InMemoryStorages.FacebookNFTEventOnMobile.storage.userId.setValue(identity.identifier.userId)
-            InMemoryStorages.FacebookNFTEventOnMobile.storage.address.setValue(token.contractDetailed.address)
+            InMemoryStorages.FacebookNFTEventOnMobile.storage.address.setValue(token.contract?.address)
             InMemoryStorages.FacebookNFTEventOnMobile.storage.tokenId.setValue(token.tokenId)
         },
         [identity],
diff --git a/packages/mask/src/social-network-adaptor/instagram.com/injection/NFT/NFTAvatarSettingDialog.tsx b/packages/mask/src/social-network-adaptor/instagram.com/injection/NFT/NFTAvatarSettingDialog.tsx
index 0f5bd46a0d2e..d21fcf9529db 100644
--- a/packages/mask/src/social-network-adaptor/instagram.com/injection/NFT/NFTAvatarSettingDialog.tsx
+++ b/packages/mask/src/social-network-adaptor/instagram.com/injection/NFT/NFTAvatarSettingDialog.tsx
@@ -8,7 +8,6 @@ import { InjectedDialog } from '@masknet/shared'
 import { DialogContent } from '@mui/material'
 import { NFTAvatar } from '../../../../plugins/Avatar/SNSAdaptor/NFTAvatar'
 import { DialogStackingProvider, makeStyles } from '@masknet/theme'
-import type { ERC721TokenDetailed } from '@masknet/web3-shared-evm'
 import { Instagram } from '@masknet/web3-providers'
 import { useWallet } from '@masknet/plugin-infra/web3'
 import { PluginNFTAvatarRPC } from '../../../../plugins/Avatar/messages'
@@ -16,6 +15,8 @@ import type { AvatarMetaDB } from '../../../../plugins/Avatar/types'
 import { RSS3_KEY_SNS } from '../../../../plugins/Avatar/constants'
 import { activatedSocialNetworkUI } from '../../../../social-network'
 import { delay } from '@dimensiondev/kit'
+import type { NonFungibleToken } from '@masknet/web3-shared-base'
+import type { ChainId, SchemaType } from '@masknet/web3-shared-evm'
 
 const useStyles = makeStyles()(() => ({
     root: {
@@ -32,11 +33,11 @@ export function NFTAvatarSettingDialog() {
     const identity = useCurrentVisitingIdentity()
 
     const onChange = useCallback(
-        async (token: ERC721TokenDetailed) => {
+        async (token: NonFungibleToken<ChainId, SchemaType>) => {
             try {
-                if (!token.info.imageURL) return
+                if (!token.metadata?.imageURL || !token.contract?.address) return
                 if (!identity.identifier) return
-                const image = await toPNG(token.info.imageURL)
+                const image = await toPNG(token.metadata.imageURL)
                 if (!image || !wallet) return
 
                 await Instagram.uploadUserAvatar(image, identity.identifier.userId)
@@ -60,7 +61,7 @@ export function NFTAvatarSettingDialog() {
                     {
                         userId: identity.identifier.userId,
                         tokenId: token.tokenId,
-                        address: token.contractDetailed.address,
+                        address: token.contract.address,
                         avatarId: getAvatarId(metaTag.content),
                     } as AvatarMetaDB,
                     identity.identifier.network,
diff --git a/packages/mask/src/social-network-adaptor/twitter.com/injection/NFT/NFTAvatarInTwitter.tsx b/packages/mask/src/social-network-adaptor/twitter.com/injection/NFT/NFTAvatarInTwitter.tsx
index b8a0682dcea7..ce0af479168f 100644
--- a/packages/mask/src/social-network-adaptor/twitter.com/injection/NFT/NFTAvatarInTwitter.tsx
+++ b/packages/mask/src/social-network-adaptor/twitter.com/injection/NFT/NFTAvatarInTwitter.tsx
@@ -4,7 +4,7 @@ import { MutationObserverWatcher } from '@dimensiondev/holoflows-kit'
 import { makeStyles } from '@masknet/theme'
 import { useEffect, useMemo, useRef, useState } from 'react'
 import { useCurrentVisitingIdentity } from '../../../../components/DataSource/useActivatedUI'
-import { resolveOpenSeaLink, useWallet } from '@masknet/web3-shared-evm'
+import { resolveOpenSeaLink } from '@masknet/web3-shared-evm'
 import type { AvatarMetaDB } from '../../../../plugins/Avatar/types'
 import { getAvatarId } from '../../utils/user'
 import { PluginNFTAvatarRPC } from '../../../../plugins/Avatar/messages'
@@ -16,9 +16,12 @@ import { trim } from 'lodash-unified'
 import { RSS3_KEY_SNS } from '../../../../plugins/Avatar/constants'
 import { openWindow } from '@masknet/shared-base-ui'
 import { usePersonaNFTAvatar } from '../../../../plugins/Avatar/hooks/usePersonaNFTAvatar'
-import { NFTCardStyledAssetPlayer, useShowConfirm } from '@masknet/shared'
+import { NFTCardStyledAssetPlayer } from '@masknet/shared'
 import { Box, Typography } from '@mui/material'
 import { activatedSocialNetworkUI } from '../../../../social-network'
+import { useWallet } from '@masknet/plugin-infra/web3'
+import { NetworkPluginID } from '@masknet/web3-shared-base'
+import { useShowConfirm } from '../../../../../../shared/src/contexts/common'
 
 export function injectNFTAvatarInTwitter(signal: AbortSignal) {
     const watcher = new MutationObserverWatcher(searchTwitterAvatarSelector())
@@ -54,7 +57,7 @@ function NFTAvatarInTwitter() {
     const rainBowElement = useRef<Element | null>()
     const borderElement = useRef<Element | null>()
     const identity = useCurrentVisitingIdentity()
-    const wallet = useWallet()
+    const wallet = useWallet(NetworkPluginID.PLUGIN_EVM)
     const { value: _avatar } = usePersonaNFTAvatar(
         identity.identifier?.userId ?? '',
         getAvatarId(identity.avatar ?? ''),
diff --git a/packages/mask/src/social-network/ui.ts b/packages/mask/src/social-network/ui.ts
index cdb08a3142e9..e3d21d5f2ed1 100644
--- a/packages/mask/src/social-network/ui.ts
+++ b/packages/mask/src/social-network/ui.ts
@@ -1,21 +1,14 @@
 import '../utils/debug/general'
 import Services from '../extension/service'
-import { Flags, InMemoryStorages, PersistentStorages } from '../../shared'
+import { Flags } from '../../shared'
 import type { SocialNetworkUI } from './types'
 import { currentSetupGuideStatus } from '../settings/settings'
 import type { SetupGuideCrossContextStatus } from '../settings/types'
-import {
-    ECKeyIdentifier,
-    createSubscriptionFromAsync,
-    PersonaIdentifier,
-    EnhanceableSite,
-    i18NextInstance,
-    createSubscriptionFromValueRef,
-} from '@masknet/shared-base'
+import { ECKeyIdentifier, EnhanceableSite, i18NextInstance, createSubscriptionFromValueRef } from '@masknet/shared-base'
 import { Environment, assertNotEnvironment, ValueRef } from '@dimensiondev/holoflows-kit'
 import { IdentityResolved, startPluginSNSAdaptor } from '@masknet/plugin-infra/content-script'
 import { getCurrentIdentifier, getCurrentSNSNetwork } from '../social-network-adaptor/utils'
-import { createPluginHost } from '../plugin-infra/host'
+import { createPluginHost, createSharedContext } from '../plugin-infra/host'
 import { definedSocialNetworkUIs } from './define'
 import { setupShadowRootPortal, MaskMessages } from '../utils'
 import { delay, waitDocumentReadyState } from '@dimensiondev/kit'
@@ -114,12 +107,6 @@ export async function activateSocialNetworkUIInner(ui_deferred: SocialNetworkUI.
     startPluginSNSAdaptor(
         getCurrentSNSNetwork(ui.networkIdentifier),
         createPluginHost(signal, (pluginID, signal) => {
-            const personaSub = createSubscriptionFromAsync(
-                Services.Settings.getCurrentPersonaIdentifier,
-                undefined as PersonaIdentifier | undefined,
-                MaskMessages.events.currentPersonaIdentifier.on,
-                signal,
-            )
             const empty = new ValueRef<IdentityResolved | undefined>(undefined)
             const lastRecognizedSub = createSubscriptionFromValueRef(
                 ui.collecting.identityProvider?.recognized || empty,
@@ -130,14 +117,7 @@ export async function activateSocialNetworkUIInner(ui_deferred: SocialNetworkUI.
                 signal,
             )
             return {
-                createKVStorage(type, defaultValues) {
-                    if (type === 'memory')
-                        return InMemoryStorages.Plugin.createSubScope(pluginID, defaultValues, signal)
-                    else return PersistentStorages.Plugin.createSubScope(pluginID, defaultValues, signal)
-                },
-                personaSign: Services.Identity.signWithPersona,
-                walletSign: Services.Ethereum.personalSign,
-                currentPersona: personaSub,
+                ...createSharedContext(pluginID, signal),
                 lastRecognizedProfile: lastRecognizedSub,
                 currentVisitingProfile: currentVisitingSub,
             }
diff --git a/packages/mask/src/tsconfig.json b/packages/mask/src/tsconfig.json
index 5be5ef7a1573..4612413a8ac3 100644
--- a/packages/mask/src/tsconfig.json
+++ b/packages/mask/src/tsconfig.json
@@ -30,8 +30,11 @@
     { "path": "../../icons" },
     { "path": "../../plugin-infra" },
     { "path": "../../plugins/Wallet" },
-    { "path": "../../plugins/Flow" },
+    { "path": "../../plugins/DAO" },
     { "path": "../../plugins/FileService" },
+    { "path": "../../plugins/EVM" },
+    { "path": "../../plugins/Flow" },
+    { "path": "../../plugins/Solana" },
     { "path": "../../external-plugin-previewer" },
     { "path": "../../injected-script/sdk" },
     { "path": "../../mask-sdk/server" },
diff --git a/packages/mask/src/utils/native-rpc/Web.ts b/packages/mask/src/utils/native-rpc/Web.ts
index 4e4fd3bcfbde..440d8b32f615 100644
--- a/packages/mask/src/utils/native-rpc/Web.ts
+++ b/packages/mask/src/utils/native-rpc/Web.ts
@@ -13,7 +13,6 @@ import { launchPageSettings } from '../../settings/settings'
 import Services from '../../extension/service'
 import { WalletMessages } from '@masknet/plugin-wallet'
 import { WalletRPC } from '../../plugins/Wallet/messages'
-import { ProviderType } from '@masknet/web3-shared-evm'
 import { MaskMessages } from '../messages'
 
 const stringToPersonaIdentifier = (input: string) => ECKeyIdentifier.from(input).unwrap()
@@ -44,8 +43,6 @@ export const MaskNetworkAPI: MaskNetworkAPIs = {
     },
     app_isPluginEnabled: ({ pluginID }) => Services.Settings.getPluginMinimalModeEnabled(pluginID).then((x) => !x),
     app_setPluginStatus: ({ pluginID, enabled }) => Services.Settings.setPluginMinimalModeEnabled(pluginID, !enabled),
-    settings_getTrendingDataSource: () => Services.Settings.getTrendingDataSource(),
-    settings_setTrendingDataSource: ({ provider }) => Services.Settings.setTrendingDataSource(provider),
     settings_getLaunchPageSettings: async () => launchPageSettings.value,
     settings_getTheme: () => Services.Settings.getTheme(),
     settings_setTheme: ({ theme }) => Services.Settings.setTheme(theme),
@@ -164,16 +161,16 @@ export const MaskNetworkAPI: MaskNetworkAPIs = {
         })
     },
     wallet_updateEthereumAccount: async ({ account }) => {
-        await WalletRPC.updateAccount({
-            account,
-            providerType: ProviderType.MaskWallet,
-        })
+        // await WalletRPC.updateAccount({
+        //     account,
+        //     providerType: ProviderType.MaskWallet,
+        // })
         WalletMessages.events.walletsUpdated.sendToAll()
     },
     wallet_updateEthereumChainId: async ({ chainId }) => {
-        await WalletRPC.updateAccount({
-            chainId,
-        })
+        // await WalletRPC.updateAccount({
+        //     chainId,
+        // })
     },
     wallet_getLegacyWalletInfo: async () => {
         const wallets = await WalletRPC.getLegacyWalletRecords()
diff --git a/packages/mask/src/web3/UI/ChainBoundary.tsx b/packages/mask/src/web3/UI/ChainBoundary.tsx
new file mode 100644
index 000000000000..7e852652107d
--- /dev/null
+++ b/packages/mask/src/web3/UI/ChainBoundary.tsx
@@ -0,0 +1,232 @@
+import React, { useCallback, useMemo } from 'react'
+import { Box, Typography, useTheme } from '@mui/material'
+import { makeStyles, MaskColorVar, ShadowRootTooltip, useStylesExtends } from '@masknet/theme'
+import {
+    useCurrentWeb3NetworkPluginID,
+    useAccount,
+    useNetworkDescriptor,
+    useChainId,
+    useAllowTestnet,
+    useProviderType,
+    Web3Helper,
+    useWeb3State,
+    useWeb3Connection,
+} from '@masknet/plugin-infra/web3'
+import { ProviderType } from '@masknet/web3-shared-evm'
+import { useRemoteControlledDialog } from '@masknet/shared-base-ui'
+import { delay } from '@dimensiondev/kit'
+import ActionButton, {
+    ActionButtonPromise,
+    ActionButtonPromiseProps,
+} from '../../extension/options-page/DashboardComponents/ActionButton'
+import { useI18N } from '../../utils'
+import { WalletMessages } from '../../plugins/Wallet/messages'
+import { WalletIcon } from '@masknet/shared'
+import { PluginWalletConnectIcon } from '@masknet/icons'
+import { NetworkPluginID } from '@masknet/web3-shared-base'
+
+const useStyles = makeStyles()((theme) => ({
+    action: {
+        textAlign: 'center',
+        margin: theme.spacing(1),
+        width: '100%',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        marginBottom: 48,
+    },
+    tooltip: {
+        borderRadius: 4,
+        padding: 10,
+    },
+}))
+
+export interface ChainBoundaryProps<T extends NetworkPluginID> extends withClasses<'switchButton'> {
+    /** The expected network plugin ID */
+    expectedPluginID: T
+    /** The expected sub-network under the network plugin */
+    expectedChainId: Web3Helper.Definition[T]['ChainId']
+    /** Judge the network is available for children components */
+    predicate?: (actualPluginID: NetworkPluginID, actualChainId: Web3Helper.Definition[T]['ChainId']) => boolean
+
+    className?: string
+    noSwitchNetworkTip?: boolean
+    hiddenConnectButton?: boolean
+    children?: React.ReactNode
+    renderInTimeline?: boolean
+    ActionButtonPromiseProps?: Partial<ActionButtonPromiseProps>
+}
+
+export function ChainBoundary<T extends NetworkPluginID>(props: ChainBoundaryProps<T>) {
+    const {
+        noSwitchNetworkTip = true,
+        expectedPluginID,
+        expectedChainId,
+        predicate = (actualPluginID, actualChainId) =>
+            actualPluginID === expectedPluginID && actualChainId === expectedChainId,
+    } = props
+
+    const { t } = useI18N()
+    const theme = useTheme()
+    const classes = useStylesExtends(useStyles(), props)
+
+    const actualPluginID = useCurrentWeb3NetworkPluginID()
+    const { Others: actualOthers } = useWeb3State(actualPluginID) as Web3Helper.Web3StateAll
+    const actualChainId = useChainId(actualPluginID)
+    const actualProviderType = useProviderType(actualPluginID)
+    const actualChainName = actualOthers?.chainResolver.chainName(actualChainId)
+
+    const { Others: expectedOthers } = useWeb3State(expectedPluginID) as Web3Helper.Web3StateAll
+    const expectedConnection = useWeb3Connection(expectedPluginID) as Web3Helper.Web3ConnectionAll
+    const expectedAllowTestnet = useAllowTestnet(expectedPluginID)
+    const expectedAccount = useAccount(expectedPluginID)
+    const expectedChainName = expectedOthers?.chainResolver.chainName(expectedChainId)
+    const expectedNetworkDescriptor = useNetworkDescriptor(NetworkPluginID.PLUGIN_EVM, expectedChainId)
+    const expectedChainAllowed = expectedOthers?.chainResolver.isValid(expectedChainId, expectedAllowTestnet)
+
+    const isPluginIDMatched = actualPluginID === expectedPluginID
+    const isMatched = predicate(actualPluginID, actualChainId)
+
+    const { openDialog: openSelectProviderDialog } = useRemoteControlledDialog(
+        WalletMessages.events.selectProviderDialogUpdated,
+    )
+
+    const onSwitchChain = useCallback(async () => {
+        // a short time loading makes the user fells better
+        await delay(1000)
+
+        if (!expectedChainAllowed) return
+
+        if (!isPluginIDMatched || actualProviderType === ProviderType.WalletConnect) {
+            openSelectProviderDialog()
+            return
+        }
+        if (!isMatched) {
+            await expectedConnection?.connect({
+                chainId: expectedChainId,
+            })
+        }
+    }, [
+        expectedChainAllowed,
+        isMatched,
+        isPluginIDMatched,
+        actualProviderType,
+        expectedChainId,
+        expectedConnection,
+        openSelectProviderDialog,
+    ])
+
+    // TODO: will remove this and extract new boundary for timeline
+    const buttonProps = useMemo(() => {
+        return {
+            ...(props.renderInTimeline
+                ? {
+                      variant: 'contained',
+                      fullWidth: true,
+                      sx: {
+                          backgroundColor: theme.palette.maskColor.dark,
+                          color: theme.palette.maskColor.white,
+                          '&:hover': {
+                              backgroundColor: theme.palette.maskColor.dark,
+                          },
+                      },
+                  }
+                : {}),
+            ...props.ActionButtonPromiseProps,
+        } as Partial<ActionButtonPromiseProps>
+    }, [props.ActionButtonPromiseProps, props.renderInTimeline])
+
+    const renderBox = (children?: React.ReactNode, tips?: string) => {
+        return (
+            <ShadowRootTooltip title={tips ?? ''} classes={{ tooltip: classes.tooltip }} arrow placement="top">
+                <Box
+                    className={props.className}
+                    sx={{ flex: 1 }}
+                    display="flex"
+                    flexDirection="column"
+                    alignItems="center">
+                    {children}
+                </Box>
+            </ShadowRootTooltip>
+        )
+    }
+
+    if (!expectedAccount)
+        return renderBox(
+            <>
+                {!props.hiddenConnectButton ? (
+                    <ActionButton
+                        startIcon={<PluginWalletConnectIcon />}
+                        variant="contained"
+                        size={props.ActionButtonPromiseProps?.size}
+                        sx={{
+                            backgroundColor: theme.palette.maskColor?.dark,
+                            width: '100%',
+                            color: 'white',
+                            '&:hover': {
+                                backgroundColor: theme.palette.maskColor?.dark,
+                            },
+                            margin: 0,
+                            lineHeight: 0,
+                            paddingTop: 1.25,
+                            paddingBottom: 1.25,
+                        }}
+                        onClick={openSelectProviderDialog}
+                        {...buttonProps}>
+                        {t('plugin_wallet_connect_wallet')}
+                    </ActionButton>
+                ) : null}
+            </>,
+        )
+
+    if (isMatched) return <>{props.children}</>
+
+    return renderBox(
+        <>
+            {!noSwitchNetworkTip ? (
+                <Typography color={MaskColorVar.errorPlugin}>
+                    <span>
+                        {t('plugin_wallet_not_available_on', {
+                            network: actualChainName,
+                        })}
+                    </span>
+                </Typography>
+            ) : null}
+            {expectedChainAllowed ? (
+                <ActionButtonPromise
+                    startIcon={
+                        <WalletIcon
+                            networkIcon={expectedNetworkDescriptor?.icon} // switch the icon to meet design
+                            isBorderColorNotDefault
+                            size={18}
+                        />
+                    }
+                    sx={
+                        props.ActionButtonPromiseProps?.sx ?? {
+                            backgroundColor: theme.palette.maskColor?.dark,
+                            width: '100%',
+                            color: 'white',
+                            '&:hover': {
+                                backgroundColor: theme.palette.maskColor?.dark,
+                            },
+                            padding: 1,
+                            margin: 0,
+                        }
+                    }
+                    style={{ borderRadius: 10, paddingTop: 11, paddingBottom: 11 }}
+                    init={<span>{t('plugin_wallet_switch_network', { network: expectedChainName })}</span>}
+                    waiting={t('plugin_wallet_switch_network_under_going', {
+                        network: expectedChainName,
+                    })}
+                    complete={t('plugin_wallet_switch_network', { network: expectedChainName })}
+                    failed={t('retry')}
+                    executor={onSwitchChain}
+                    completeOnClick={onSwitchChain}
+                    failedOnClick="use executor"
+                    {...buttonProps}
+                />
+            ) : null}
+        </>,
+        actualProviderType === ProviderType.WalletConnect ? t('plugin_wallet_connect_tips') : '',
+    )
+}
diff --git a/packages/mask/src/web3/UI/ERC721ContractSelectPanel.tsx b/packages/mask/src/web3/UI/ERC721ContractSelectPanel.tsx
index b1f10e3091fb..ece6f959ec88 100644
--- a/packages/mask/src/web3/UI/ERC721ContractSelectPanel.tsx
+++ b/packages/mask/src/web3/UI/ERC721ContractSelectPanel.tsx
@@ -1,23 +1,15 @@
-import { useState, useCallback, useEffect } from 'react'
+import { useState, useCallback } from 'react'
 import { v4 as uuid } from 'uuid'
-import {
-    ChainId,
-    ERC721ContractDetailed,
-    EthereumTokenType,
-    isSameAddress,
-    SocketState,
-    useAccount,
-    useCollections,
-    useERC721ContractBalance,
-} from '@masknet/web3-shared-evm'
+import { ChainId, SchemaType } from '@masknet/web3-shared-evm'
 import classNames from 'classnames'
 import { EthereumAddress } from 'wallet.ts'
-import { Box, CircularProgress, Typography } from '@mui/material'
+import { Box, Typography } from '@mui/material'
 import { makeStyles } from '@masknet/theme'
 import { useRemoteControlledDialog } from '@masknet/shared-base-ui'
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
 import { SelectNftContractDialogEvent, WalletMessages } from '../../plugins/Wallet/messages'
 import { useI18N } from '../../utils'
+import type { NonFungibleTokenContract } from '@masknet/web3-shared-base'
 
 interface StyleProps {
     hasIcon: boolean
@@ -73,44 +65,16 @@ const useStyles = makeStyles<StyleProps>()((theme, props) => {
 export interface ERC721TokenSelectPanelProps {
     label?: string
     chainId?: ChainId
-    onContractChange: (contract: ERC721ContractDetailed) => void
-    onBalanceChange?: (balance: number) => void
-    contract: ERC721ContractDetailed | null | undefined
+    onContractChange: (contract: NonFungibleTokenContract<ChainId, SchemaType.ERC721>) => void
+    onBalanceChange: (balance: number) => void
+    balance: number
+    contract: NonFungibleTokenContract<ChainId, SchemaType.ERC721> | null | undefined
 }
 export function ERC721ContractSelectPanel(props: ERC721TokenSelectPanelProps) {
-    const { onContractChange, onBalanceChange, contract, label, chainId = ChainId.Mainnet } = props
-    const account = useAccount()
-    const { classes } = useStyles({ hasIcon: Boolean(contract?.iconURL) })
-    const { value: balanceFromChain, loading: loadingFromChain } = useERC721ContractBalance(contract?.address, account)
-    const { data: assets, state: loadingBalanceFromRemoteState } = useCollections(account, chainId, !!contract)
-
-    const convertedAssets = assets.map((x) => ({
-        contractDetailed: {
-            type: EthereumTokenType.ERC721,
-            address: x.address,
-            chainId,
-            name: x.name,
-            symbol: x.symbol,
-            baseURI: x.iconURL,
-            iconURL: x.iconURL,
-        } as ERC721ContractDetailed,
-        balance: x.balance,
-    }))
-
+    const { onContractChange, onBalanceChange, contract, label, chainId = ChainId.Mainnet, balance } = props
+    const { classes } = useStyles({ hasIcon: Boolean(contract?.logoURL) })
     const { t } = useI18N()
 
-    const balanceFromRemote = convertedAssets
-        ? convertedAssets.find((asset) => isSameAddress(asset.contractDetailed.address, contract?.address))?.balance
-        : undefined
-
-    const balance = balanceFromChain ? Number(balanceFromChain) : balanceFromRemote ?? 0
-
-    useEffect(() => {
-        onBalanceChange?.(balance)
-    }, [onBalanceChange, balance])
-
-    const loading = (loadingFromChain || loadingBalanceFromRemoteState !== SocketState.done) && !balance
-
     // #region select contract
     const [id] = useState(uuid)
 
@@ -119,9 +83,10 @@ export function ERC721ContractSelectPanel(props: ERC721TokenSelectPanelProps) {
         useCallback(
             (ev: SelectNftContractDialogEvent) => {
                 if (ev.open || !ev.contract || ev.uuid !== id) return
-                onContractChange(ev.contract)
+                onContractChange(ev.contract as NonFungibleTokenContract<ChainId, SchemaType.ERC721>)
+                onBalanceChange(ev.contract?.balance ?? 0)
             },
-            [id, onContractChange],
+            [id, onContractChange, onBalanceChange],
         ),
     )
 
@@ -140,9 +105,7 @@ export function ERC721ContractSelectPanel(props: ERC721TokenSelectPanelProps) {
                 <Typography className={classes.title} color="textSecondary" variant="body2" component="span">
                     {label ?? t('collectibles_name')}
                 </Typography>
-                {!contract?.address || !EthereumAddress.isValid(contract.address) ? null : loading ? (
-                    <CircularProgress size={16} />
-                ) : (
+                {!contract?.address || !EthereumAddress.isValid(contract.address) ? null : (
                     <Typography className={classes.title} color="textSecondary" variant="body2" component="span">
                         {t('wallet_balance')}: {balance ? balance : '0'}
                     </Typography>
@@ -150,7 +113,7 @@ export function ERC721ContractSelectPanel(props: ERC721TokenSelectPanelProps) {
             </div>
             <div className={classNames(classes.wrapper, classes.pointer)} onClick={openDialog}>
                 <div className={classes.tokenWrapper}>
-                    {contract?.iconURL ? <img className={classes.icon} src={contract?.iconURL} /> : null}
+                    {contract?.logoURL ? <img className={classes.icon} src={contract?.logoURL} /> : null}
                     {contract?.name ? (
                         <Typography className={classes.nftName} color="textPrimary">
                             {contract?.name}
diff --git a/packages/mask/src/web3/UI/EthereumBlockie.tsx b/packages/mask/src/web3/UI/EthereumBlockie.tsx
index 89156144e58c..720205befa33 100644
--- a/packages/mask/src/web3/UI/EthereumBlockie.tsx
+++ b/packages/mask/src/web3/UI/EthereumBlockie.tsx
@@ -1,4 +1,4 @@
-import { useBlockie } from '@masknet/web3-shared-evm'
+import { useBlockie } from '@masknet/plugin-infra/web3'
 import { Avatar, AvatarProps } from '@mui/material'
 import { makeStyles, useStylesExtends } from '@masknet/theme'
 
diff --git a/packages/mask/src/web3/UI/EthereumChainBoundary.tsx b/packages/mask/src/web3/UI/EthereumChainBoundary.tsx
deleted file mode 100644
index b8ce3786dd41..000000000000
--- a/packages/mask/src/web3/UI/EthereumChainBoundary.tsx
+++ /dev/null
@@ -1,323 +0,0 @@
-import React, { useCallback, useMemo } from 'react'
-import { Box, Typography, Theme, useTheme } from '@mui/material'
-import { makeStyles, MaskColorVar, ShadowRootTooltip, useStylesExtends } from '@masknet/theme'
-import type { SxProps } from '@mui/system'
-import { useActivatedPlugin } from '@masknet/plugin-infra/dom'
-import {
-    NetworkPluginID,
-    useCurrentWeb3NetworkPluginID,
-    useAccount,
-    useNetworkDescriptor,
-} from '@masknet/plugin-infra/web3'
-import {
-    ChainId,
-    getChainDetailedCAIP,
-    getChainName,
-    getNetworkTypeFromChainId,
-    isChainIdValid,
-    NetworkType,
-    ProviderType,
-    resolveNetworkName,
-    useAllowTestnet,
-    useChainId,
-} from '@masknet/web3-shared-evm'
-import { useValueRef, useRemoteControlledDialog } from '@masknet/shared-base-ui'
-import { delay } from '@dimensiondev/kit'
-import ActionButton, {
-    ActionButtonPromise,
-    ActionButtonPromiseProps,
-} from '../../extension/options-page/DashboardComponents/ActionButton'
-import { currentProviderSettings } from '../../plugins/Wallet/settings'
-import { useI18N } from '../../utils'
-import { WalletMessages, WalletRPC } from '../../plugins/Wallet/messages'
-import Services from '../../extension/service'
-import { WalletIcon } from '@masknet/shared'
-import { PluginWalletConnectIcon } from '@masknet/icons'
-
-const useStyles = makeStyles()((theme) => ({
-    action: {
-        textAlign: 'center',
-        margin: theme.spacing(1),
-        width: '100%',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        marginBottom: 48,
-    },
-    tooltip: {
-        borderRadius: 4,
-        padding: 10,
-    },
-    switchButton: {
-        borderRadius: 999,
-    },
-}))
-
-export interface EthereumChainBoundaryProps extends withClasses<'switchButton'> {
-    className?: string
-    chainId: ChainId
-    noSwitchNetworkTip?: boolean
-    disablePadding?: boolean
-    hiddenConnectButton?: boolean
-    switchButtonStyle?: SxProps<Theme>
-    children?: React.ReactNode
-    isValidChainId?: (actualChainId: ChainId, expectedChainId: ChainId) => boolean
-    renderInTimeline?: boolean
-    ActionButtonPromiseProps?: Partial<ActionButtonPromiseProps>
-}
-
-export function EthereumChainBoundary(props: EthereumChainBoundaryProps) {
-    const { t } = useI18N()
-    const theme = useTheme()
-    const pluginID = useCurrentWeb3NetworkPluginID()
-    const plugin = useActivatedPlugin(pluginID, 'any')
-
-    const account = useAccount()
-    const chainId = useChainId()
-
-    const allowTestnet = useAllowTestnet()
-    const providerType = useValueRef(currentProviderSettings)
-
-    const { noSwitchNetworkTip = true } = props
-    const classes = useStylesExtends(useStyles(), props)
-    const expectedChainId = props.chainId
-    const expectedNetwork = getChainName(expectedChainId)
-
-    const actualChainId = chainId
-    const actualNetwork = getChainName(actualChainId)
-
-    // if false then it will not guide the user to switch the network
-    const isAllowed =
-        isChainIdValid(expectedChainId, allowTestnet) &&
-        !!account &&
-        providerType !== ProviderType.Coin98 &&
-        providerType !== ProviderType.Fortmatic
-
-    // is the actual chain id matched with the expected one?
-    const isChainMatched = actualChainId === expectedChainId
-    const isPluginMatched = pluginID === NetworkPluginID.PLUGIN_EVM
-
-    // is the actual chain id a valid one even if it does not match with the expected one?
-    const isValid = props?.isValidChainId?.(actualChainId, expectedChainId) ?? false
-
-    const { openDialog: openSelectProviderDialog } = useRemoteControlledDialog(
-        WalletMessages.events.selectProviderDialogUpdated,
-    )
-
-    const networkDescriptor = useNetworkDescriptor(expectedChainId, NetworkPluginID.PLUGIN_EVM)
-    // request ethereum-compatible network
-    const networkType = getNetworkTypeFromChainId(expectedChainId)
-
-    const onSwitchChain = useCallback(async () => {
-        // a short time loading makes the user fells better
-        await delay(1000)
-
-        if (!isAllowed) return
-
-        const switchToChain = async () => {
-            // read the chain detailed from the built-in chain list
-            const chainDetailedCAIP = getChainDetailedCAIP(expectedChainId)
-            if (!chainDetailedCAIP) throw new Error('Unknown network type.')
-
-            // if mask wallet was used it can switch network automatically
-            if (providerType === ProviderType.MaskWallet) {
-                await WalletRPC.updateAccount({
-                    chainId: expectedChainId,
-                })
-                return
-            }
-
-            if (!networkType) return
-            try {
-                const overrides = {
-                    chainId: expectedChainId,
-                    providerType,
-                }
-                await Promise.race([
-                    (async () => {
-                        await delay(30 /* seconds */ * 1000 /* milliseconds */)
-                        throw new Error('Timeout!')
-                    })(),
-                    networkType === NetworkType.Ethereum
-                        ? Services.Ethereum.switchEthereumChain(expectedChainId, overrides)
-                        : Services.Ethereum.addEthereumChain(chainDetailedCAIP, account, overrides),
-                ])
-
-                // recheck
-                const chainIdHex = await Services.Ethereum.getChainId(overrides)
-                if (Number.parseInt(chainIdHex, 16) !== expectedChainId) throw new Error('Failed to switch chain.')
-            } catch {
-                throw new Error(
-                    `Switch Chain Error: Make sure your wallet is on the ${resolveNetworkName(networkType)} network.`,
-                )
-            }
-        }
-
-        if (providerType === ProviderType.WalletConnect && networkType) {
-            openSelectProviderDialog()
-            return
-        }
-
-        if (!isPluginMatched) {
-            openSelectProviderDialog()
-            return
-        }
-        if (!isChainMatched) await switchToChain()
-    }, [account, isAllowed, isChainMatched, isPluginMatched, providerType, expectedChainId])
-
-    // TODO: will remove this and extract new boundary for timeline
-    const buttonProps = useMemo(() => {
-        return {
-            ...(props.renderInTimeline
-                ? {
-                      variant: 'contained',
-                      fullWidth: true,
-                      sx: {
-                          backgroundColor: theme.palette.maskColor.dark,
-                          color: theme.palette.maskColor.white,
-                          '&:hover': {
-                              backgroundColor: theme.palette.maskColor.dark,
-                          },
-                      },
-                  }
-                : {}),
-            ...props.ActionButtonPromiseProps,
-        } as Partial<ActionButtonPromiseProps>
-    }, [props.ActionButtonPromiseProps, props.renderInTimeline])
-
-    const renderBox = (children?: React.ReactNode, tips?: string) => {
-        return (
-            <ShadowRootTooltip title={tips ?? ''} classes={{ tooltip: classes.tooltip }} arrow placement="top">
-                <Box
-                    className={props.className}
-                    sx={{ flex: 1 }}
-                    display="flex"
-                    flexDirection="column"
-                    alignItems="center">
-                    {children}
-                </Box>
-            </ShadowRootTooltip>
-        )
-    }
-
-    if (!account)
-        return renderBox(
-            <>
-                {!props.hiddenConnectButton ? (
-                    <ActionButton
-                        fullWidth
-                        startIcon={<PluginWalletConnectIcon style={{ fontSize: 18 }} />}
-                        variant="contained"
-                        size={props.ActionButtonPromiseProps?.size}
-                        sx={{ marginTop: 1.5 }}
-                        onClick={openSelectProviderDialog}
-                        {...buttonProps}>
-                        {t('plugin_wallet_connect_wallet')}
-                    </ActionButton>
-                ) : null}
-            </>,
-        )
-
-    if ((isChainMatched && isPluginMatched) || isValid) return <>{props.children}</>
-
-    if (!isAllowed)
-        return renderBox(
-            <Typography color={MaskColorVar.textPluginColor} sx={{ paddingBottom: 1 }}>
-                <span>
-                    {t('plugin_wallet_not_available_on', {
-                        network: actualNetwork,
-                    })}
-                </span>
-            </Typography>,
-        )
-
-    if (pluginID !== NetworkPluginID.PLUGIN_EVM) {
-        return renderBox(
-            <>
-                {!noSwitchNetworkTip ? (
-                    <Typography color={MaskColorVar.errorPlugin}>
-                        <span>
-                            {t('plugin_wallet_not_available_on', {
-                                network: plugin?.name?.fallback ?? 'Unknown Plugin',
-                            })}
-                        </span>
-                    </Typography>
-                ) : null}
-                {isAllowed ? (
-                    <ActionButtonPromise
-                        className={classes.switchButton}
-                        startIcon={
-                            <WalletIcon
-                                networkIcon={networkDescriptor?.icon} // switch the icon to meet design
-                                isBorderColorNotDefault
-                                size={18}
-                            />
-                        }
-                        sx={props.switchButtonStyle}
-                        init={
-                            <span>
-                                {t('plugin_wallet_connect_network', {
-                                    network: 'EVM',
-                                })}
-                            </span>
-                        }
-                        waiting={t('plugin_wallet_connect_network_under_going', {
-                            network: 'EVM',
-                        })}
-                        complete={t('plugin_wallet_connect_network', {
-                            network: 'EVM',
-                        })}
-                        failed={t('retry')}
-                        executor={onSwitchChain}
-                        completeOnClick={onSwitchChain}
-                        failedOnClick="use executor"
-                        fullWidth
-                        {...buttonProps}
-                    />
-                ) : null}
-            </>,
-        )
-    }
-
-    return renderBox(
-        <>
-            {!noSwitchNetworkTip ? (
-                <Typography color={MaskColorVar.errorPlugin}>
-                    <span>
-                        {t('plugin_wallet_not_available_on', {
-                            network: actualNetwork,
-                        })}
-                    </span>
-                </Typography>
-            ) : null}
-            {isAllowed ? (
-                <ActionButtonPromise
-                    startIcon={
-                        <WalletIcon
-                            networkIcon={networkDescriptor?.icon} // switch the icon to meet design
-                            isBorderColorNotDefault
-                            size={18}
-                        />
-                    }
-                    sx={props.switchButtonStyle}
-                    init={
-                        <span>
-                            {t('plugin_wallet_switch_network', { network: expectedNetwork.replace('Mainnet', '') })}
-                        </span>
-                    }
-                    waiting={t('plugin_wallet_switch_network_under_going', {
-                        network: expectedNetwork.replace('Mainnet', ''),
-                    })}
-                    complete={t('plugin_wallet_switch_network', { network: expectedNetwork.replace('Mainnet', '') })}
-                    failed={t('retry')}
-                    executor={onSwitchChain}
-                    completeOnClick={onSwitchChain}
-                    failedOnClick="use executor"
-                    fullWidth
-                    {...buttonProps}
-                />
-            ) : null}
-        </>,
-        providerType === ProviderType.WalletConnect ? t('plugin_wallet_connect_tips') : '',
-    )
-}
diff --git a/packages/mask/src/web3/UI/EthereumERC20TokenApprovedBoundary.tsx b/packages/mask/src/web3/UI/EthereumERC20TokenApprovedBoundary.tsx
index 7ae770d3fc76..ce788fcd7dac 100644
--- a/packages/mask/src/web3/UI/EthereumERC20TokenApprovedBoundary.tsx
+++ b/packages/mask/src/web3/UI/EthereumERC20TokenApprovedBoundary.tsx
@@ -1,15 +1,12 @@
 import React, { useCallback } from 'react'
 import { Grid, Box } from '@mui/material'
 import { makeStyles } from '@masknet/theme'
-import {
-    ApproveStateType,
-    ERC20TokenDetailed,
-    formatBalance,
-    useERC20TokenApproveCallback,
-} from '@masknet/web3-shared-evm'
+import type { ChainId, SchemaType } from '@masknet/web3-shared-evm'
 import { unreachable } from '@dimensiondev/kit'
 import { useI18N } from '../../utils'
 import ActionButton, { ActionButtonProps } from '../../extension/options-page/DashboardComponents/ActionButton'
+import { FungibleToken, formatBalance } from '@masknet/web3-shared-base'
+import { ApproveStateType, useERC20TokenApproveCallback } from '@masknet/plugin-infra/web3-evm'
 
 const useStyles = makeStyles()((theme) => ({
     button: {
@@ -43,7 +40,7 @@ const useStyles = makeStyles()((theme) => ({
 export interface EthereumERC20TokenApprovedBoundaryProps {
     amount: string
     spender?: string
-    token?: ERC20TokenDetailed
+    token?: FungibleToken<ChainId, SchemaType>
     fallback?: React.ReactNode
     children?: React.ReactNode | ((allowance: string) => React.ReactNode)
     render?: (disable: boolean) => React.ReactNode
diff --git a/packages/mask/src/web3/UI/EthereumERC721TokenApprovedBoundary.tsx b/packages/mask/src/web3/UI/EthereumERC721TokenApprovedBoundary.tsx
index e84035bd6bf9..a47c9174e5a0 100644
--- a/packages/mask/src/web3/UI/EthereumERC721TokenApprovedBoundary.tsx
+++ b/packages/mask/src/web3/UI/EthereumERC721TokenApprovedBoundary.tsx
@@ -1,16 +1,16 @@
+import { explorerResolver, ChainId, SchemaType } from '@masknet/web3-shared-evm'
+import OpenInNewIcon from '@mui/icons-material/OpenInNew'
+import { useI18N } from '../../utils'
 import { makeStyles, useCustomSnackbar, useStylesExtends } from '@masknet/theme'
+import { Typography, Link } from '@mui/material'
+import ActionButton, { ActionButtonProps } from '../../extension/options-page/DashboardComponents/ActionButton'
+import { useMemo, useCallback } from 'react'
+import { EthereumAddress } from 'wallet.ts'
+import type { NonFungibleTokenContract } from '@masknet/web3-shared-base'
 import {
-    ERC721ContractDetailed,
-    resolveTransactionLinkOnExplorer,
     useERC721ContractIsApproveForAll,
     useERC721ContractSetApproveForAllCallback,
-} from '@masknet/web3-shared-evm'
-import OpenInNewIcon from '@mui/icons-material/OpenInNew'
-import { Link, Typography } from '@mui/material'
-import { useCallback, useMemo } from 'react'
-import { EthereumAddress } from 'wallet.ts'
-import ActionButton, { ActionButtonProps } from '../../extension/options-page/DashboardComponents/ActionButton'
-import { useI18N } from '../../utils'
+} from '@masknet/plugin-infra/web3-evm'
 
 const useStyles = makeStyles()(() => ({
     snackBarText: {
@@ -36,7 +36,7 @@ const useStyles = makeStyles()(() => ({
 export interface EthereumERC712TokenApprovedBoundaryProps extends withClasses<'approveButton'> {
     children?: React.ReactNode
     owner: string | undefined
-    contractDetailed: ERC721ContractDetailed | undefined
+    contractDetailed: NonFungibleTokenContract<ChainId, SchemaType.ERC721> | undefined
     validationMessage?: string
     operator: string | undefined
     ActionButtonProps?: ActionButtonProps
@@ -66,7 +66,7 @@ export function EthereumERC721TokenApprovedBoundary(props: EthereumERC712TokenAp
                     {t('plugin_wallet_approve_all_nft_successfully', { symbol: contractDetailed?.symbol })}
                 </Typography>
                 <Link
-                    href={resolveTransactionLinkOnExplorer(contractDetailed!.chainId, hash)}
+                    href={explorerResolver.transactionLink(contractDetailed!.chainId, hash)}
                     target="_blank"
                     rel="noopener noreferrer"
                     className={classes.snackBarLink}>
@@ -104,7 +104,7 @@ export function EthereumERC721TokenApprovedBoundary(props: EthereumERC712TokenAp
                     symbol: contractDetailed?.symbol
                         ? contractDetailed.symbol.toLowerCase() === 'unknown'
                             ? 'All'
-                            : contractDetailed.symbol
+                            : contractDetailed?.symbol
                         : 'All',
                 })}
             </ActionButton>
@@ -144,9 +144,9 @@ export function EthereumERC721TokenApprovedBoundary(props: EthereumERC712TokenAp
                 {...props.ActionButtonProps}>
                 {t('plugin_wallet_approve_all_nft', {
                     symbol: contractDetailed?.symbol
-                        ? contractDetailed.symbol.toLowerCase() === 'unknown'
+                        ? contractDetailed?.symbol.toLowerCase() === 'unknown'
                             ? 'All'
-                            : contractDetailed.symbol
+                            : contractDetailed?.symbol
                         : 'All',
                 })}
             </ActionButton>
diff --git a/packages/mask/src/web3/UI/SelectTokenChip.tsx b/packages/mask/src/web3/UI/SelectTokenChip.tsx
index 9e870faf6aac..a52e2ae541ae 100644
--- a/packages/mask/src/web3/UI/SelectTokenChip.tsx
+++ b/packages/mask/src/web3/UI/SelectTokenChip.tsx
@@ -5,7 +5,8 @@ import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
 import ErrorIcon from '@mui/icons-material/Error'
 import { noop } from 'lodash-unified'
 import { TokenIcon } from '@masknet/shared'
-import type { FungibleTokenDetailed } from '@masknet/web3-shared-evm'
+import type { ChainId, SchemaType } from '@masknet/web3-shared-evm'
+import type { FungibleToken } from '@masknet/web3-shared-base'
 import { useI18N } from '../../utils'
 
 const useStyles = makeStyles()((theme) => {
@@ -30,7 +31,7 @@ const useStyles = makeStyles()((theme) => {
 })
 
 export interface SelectTokenChipProps {
-    token?: FungibleTokenDetailed | null
+    token?: FungibleToken<ChainId, SchemaType> | null
     error?: Error
     loading?: boolean
     readonly?: boolean
@@ -65,7 +66,7 @@ export function SelectTokenChip(props: SelectTokenChipProps) {
         return (
             <Chip
                 className={classes.chip}
-                icon={<TokenIcon address={token.address} name={token.name} logoURI={token.logoURI} />}
+                icon={<TokenIcon address={token.address} name={token.name} logoURI={token.logoURL} />}
                 deleteIcon={<ErrorIcon className={classes.icon} />}
                 label={token.symbol}
                 color="default"
@@ -85,7 +86,7 @@ export function SelectTokenChip(props: SelectTokenChipProps) {
                     classes={{ icon: classes.tokenIcon }}
                     address={token.address}
                     name={token.name}
-                    logoURI={token.logoURI}
+                    logoURI={token.logoURL}
                 />
             }
             deleteIcon={readonly ? undefined : <ExpandMoreIcon className={classes.icon} />}
diff --git a/packages/mask/src/web3/UI/TokenAmountPanel.tsx b/packages/mask/src/web3/UI/TokenAmountPanel.tsx
index 3c1dc4fcef20..9d1aeecd1999 100644
--- a/packages/mask/src/web3/UI/TokenAmountPanel.tsx
+++ b/packages/mask/src/web3/UI/TokenAmountPanel.tsx
@@ -4,8 +4,8 @@ import BigNumber from 'bignumber.js'
 import { makeStyles, useStylesExtends } from '@masknet/theme'
 import { Box, Chip, ChipProps, InputProps, TextField, TextFieldProps, Typography } from '@mui/material'
 import { FormattedBalance } from '@masknet/shared'
-import type { FungibleTokenDetailed } from '@masknet/web3-shared-evm'
-import { useWeb3State } from '@masknet/plugin-infra/web3'
+import type { ChainId, SchemaType } from '@masknet/web3-shared-evm'
+import { formatBalance, FungibleToken } from '@masknet/web3-shared-base'
 import { SelectTokenChip, SelectTokenChipProps } from './SelectTokenChip'
 import { useI18N } from '../../utils'
 
@@ -55,7 +55,7 @@ export interface TokenAmountPanelProps extends withClasses<'root'> {
     disableToken?: boolean
     disableBalance?: boolean
     label: string
-    token?: FungibleTokenDetailed | null
+    token?: FungibleToken<ChainId, SchemaType> | null
     onAmountChange: (amount: string) => void
     InputProps?: Partial<InputProps>
     MaxChipProps?: Partial<ChipProps>
@@ -81,7 +81,6 @@ export function TokenAmountPanel(props: TokenAmountPanelProps) {
     const { t } = useI18N()
 
     const classes = useStylesExtends(useStyles(), props)
-    const { Utils } = useWeb3State()
 
     // #region update amount by self
     const { RE_MATCH_WHOLE_AMOUNT, RE_MATCH_FRACTION_AMOUNT } = useMemo(
@@ -145,7 +144,7 @@ export function TokenAmountPanel(props: TokenAmountPanelProps) {
                                     value={balance}
                                     decimals={token.decimals}
                                     significant={6}
-                                    formatter={Utils?.formatBalance}
+                                    formatter={formatBalance}
                                 />
                             </Typography>
                         ) : null}
@@ -171,7 +170,7 @@ export function TokenAmountPanel(props: TokenAmountPanelProps) {
                                             .dividedBy(maxAmountShares)
                                             .decimalPlaces(0, 1)
                                         onAmountChange(
-                                            Utils?.formatBalance?.(amount, token.decimals, maxAmountSignificant) ?? '0',
+                                            formatBalance(amount, token.decimals, maxAmountSignificant) ?? '0',
                                         )
                                     }}
                                     {...MaxChipProps}
diff --git a/packages/mask/src/web3/UI/EthereumWalletConnectedBoundary.tsx b/packages/mask/src/web3/UI/WalletConnectedBoundary.tsx
similarity index 79%
rename from packages/mask/src/web3/UI/EthereumWalletConnectedBoundary.tsx
rename to packages/mask/src/web3/UI/WalletConnectedBoundary.tsx
index 068df0359364..83d709eacca6 100644
--- a/packages/mask/src/web3/UI/EthereumWalletConnectedBoundary.tsx
+++ b/packages/mask/src/web3/UI/WalletConnectedBoundary.tsx
@@ -4,9 +4,14 @@ import { useRemoteControlledDialog } from '@masknet/shared-base-ui'
 import ActionButton, { ActionButtonProps } from '../../extension/options-page/DashboardComponents/ActionButton'
 import { WalletMessages } from '../../plugins/Wallet/messages'
 import { useI18N } from '../../utils'
-import { useAccount, useChainIdValid, useNativeTokenBalance } from '@masknet/web3-shared-evm'
 import { isZero } from '@masknet/web3-shared-base'
-import { useWalletRiskWarningDialog } from '../../plugins/Wallet/hooks/useWalletRiskWarningDialog'
+import {
+    useAccount,
+    useChainId,
+    useCurrentWeb3NetworkPluginID,
+    useNativeTokenBalance,
+    useRiskWarningApproved,
+} from '@masknet/plugin-infra/web3'
 
 const useStyles = makeStyles()((theme) => ({
     button: {
@@ -24,7 +29,7 @@ const useStyles = makeStyles()((theme) => ({
     },
 }))
 
-export interface EthereumWalletConnectedBoundaryProps
+export interface WalletConnectedBoundaryProps
     extends withClasses<'connectWallet' | 'unlockMetaMask' | 'gasFeeButton' | 'invalidButton' | 'button'> {
     offChain?: boolean
     children?: React.ReactNode
@@ -34,30 +39,30 @@ export interface EthereumWalletConnectedBoundaryProps
     renderInTimeline?: boolean
 }
 
-export function EthereumWalletConnectedBoundary(props: EthereumWalletConnectedBoundaryProps) {
+export function WalletConnectedBoundary(props: WalletConnectedBoundaryProps) {
     const { children = null, offChain = false, hideRiskWarningConfirmed = false, renderInTimeline = false } = props
 
     const { t } = useI18N()
     const classes = useStylesExtends(useStyles(), props)
 
+    const pluginID = useCurrentWeb3NetworkPluginID()
     const account = useAccount()
-    const chainIdValid = useChainIdValid()
+    const chainIdValid = useChainId()
     const nativeTokenBalance = useNativeTokenBalance()
+    const approved = useRiskWarningApproved()
 
-    // #region remote controlled confirm risk warning
-    const { isConfirmed: isRiskWarningConfirmed, openDialog: openRiskWarningDialog } = useWalletRiskWarningDialog()
-    // #endregion
-
-    // #region remote controlled select provider dialog
+    const { setDialog: setRiskWarningDialog } = useRemoteControlledDialog(
+        WalletMessages.events.walletRiskWarningDialogUpdated,
+    )
     const { openDialog: openSelectProviderDialog } = useRemoteControlledDialog(
         WalletMessages.events.selectProviderDialogUpdated,
     )
-    // #endregion
 
     // TODO: will remove  this and extract new boundary for timeline
     const buttonClass = classNames(
         classNames(classes.button, classes.connectWallet, renderInTimeline ? classes.timeline : null),
     )
+
     if (!account)
         return (
             <ActionButton
@@ -71,13 +76,19 @@ export function EthereumWalletConnectedBoundary(props: EthereumWalletConnectedBo
             </ActionButton>
         )
 
-    if (!isRiskWarningConfirmed && !hideRiskWarningConfirmed)
+    if (!approved && !hideRiskWarningConfirmed)
         return (
             <ActionButton
                 className={buttonClass}
                 fullWidth
                 variant="contained"
-                onClick={openRiskWarningDialog}
+                onClick={() => {
+                    setRiskWarningDialog({
+                        open: true,
+                        account,
+                        pluginID,
+                    })
+                }}
                 {...props.ActionButtonProps}>
                 {t('plugin_wallet_confirm_risk_warning')}
             </ActionButton>
diff --git a/packages/mask/src/web3/context.ts b/packages/mask/src/web3/context.ts
deleted file mode 100644
index 3c3489b05712..000000000000
--- a/packages/mask/src/web3/context.ts
+++ /dev/null
@@ -1,265 +0,0 @@
-import { noop } from 'lodash-unified'
-import type { Subscription } from 'use-subscription'
-import {
-    ERC20TokenDetailed,
-    ERC721TokenDetailed,
-    ERC1155TokenDetailed,
-    EthereumTokenType,
-    ProviderType,
-    Web3ProviderType,
-    resolveProviderInjectedKey,
-    isInjectedProvider,
-    AddressNameType,
-    createWeb3,
-    ChainId,
-    createContract,
-    isSameAddress,
-} from '@masknet/web3-shared-evm'
-import { isPopupPage } from '@masknet/shared-base'
-import { bridgedCoin98Provider, bridgedEthereumProvider } from '@masknet/injected-script'
-import {
-    currentAccountSettings,
-    currentNetworkSettings,
-    currentProviderSettings,
-    currentChainIdSettings,
-    currentFungibleAssetDataProviderSettings,
-    currentTokenPricesSettings,
-    currentMaskWalletChainIdSettings,
-    currentMaskWalletNetworkSettings,
-    currentMaskWalletAccountSettings,
-} from '../plugins/Wallet/settings'
-import { WalletMessages, WalletRPC } from '../plugins/Wallet/messages'
-import type { InternalSettings } from '../settings/createSettings'
-import { Flags, isAndroidApp } from '../../shared'
-import Services from '../extension/service'
-import { getProxyWebsocketInstance } from '@masknet/web3-shared-base'
-import { TokenList, Twitter } from '@masknet/web3-providers'
-import type { ERC721 } from '@masknet/web3-contracts/types/ERC721'
-import type { AbiItem } from 'web3-utils'
-import ERC721ABI from '@masknet/web3-contracts/abis/ERC721.json'
-import CryptoPunks from '@masknet/web3-contracts/abis/CryptoPunks.json'
-
-const PUNK_CONTRACT_ADDRESS = '0xb47e3cd837ddf8e4c57f05d70ab865de6e193bbb'
-async function getTokenOwner(address: string, tokenId: string) {
-    const web3 = createWeb3(Services.Ethereum.request, () => ({
-        chainId: ChainId.Mainnet,
-    }))
-    if (isSameAddress(address, PUNK_CONTRACT_ADDRESS)) {
-        const PUNKContract = createContract(web3, PUNK_CONTRACT_ADDRESS, CryptoPunks as AbiItem[])
-        return PUNKContract?.methods.punkIndexToAddress(tokenId).call()
-    }
-    const ERC721Contract = createContract<ERC721>(web3, address, ERC721ABI as AbiItem[])
-    return ERC721Contract?.methods.ownerOf(tokenId).call()
-}
-
-function createWeb3Context(disablePopup = false, isMask = false): Web3ProviderType {
-    return {
-        allowTestnet: createStaticSubscription(() => Flags.wallet_allow_testnet),
-        chainId: createSubscriptionFromSettings(isMask ? currentMaskWalletChainIdSettings : currentChainIdSettings),
-        account: createSubscriptionFromAsync(
-            async () => {
-                try {
-                    await currentAccountSettings.readyPromise
-                    await currentMaskWalletAccountSettings.readyPromise
-                    await currentProviderSettings.readyPromise
-                } catch (error) {
-                    // do nothing
-                }
-
-                const account = isMask ? currentMaskWalletAccountSettings.value : currentAccountSettings.value
-                const providerType = currentProviderSettings.value
-
-                if (isPopupPage()) return account
-                if (providerType === ProviderType.Fortmatic) return account
-                if (!isInjectedProvider(providerType)) return account
-
-                try {
-                    const bridgedProvider =
-                        providerType === ProviderType.Coin98 ? bridgedCoin98Provider : bridgedEthereumProvider
-                    const injectedKey = resolveProviderInjectedKey(providerType)
-                    if (!injectedKey) return ''
-                    const propertyValue = await bridgedProvider.getProperty(injectedKey)
-                    if (propertyValue === true) return account
-                    return ''
-                } catch (error) {
-                    return ''
-                }
-            },
-            '',
-            (callback) => {
-                const a = currentAccountSettings.addListener(callback)
-                const b = currentMaskWalletAccountSettings.addListener(callback)
-                const c = currentProviderSettings.addListener(callback)
-                return () => void [a(), b(), c()]
-            },
-        ),
-        tokenPrices: createSubscriptionFromSettings(currentTokenPricesSettings),
-        walletPrimary: createSubscriptionFromAsync(
-            WalletRPC.getWalletPrimary,
-            null,
-            WalletMessages.events.walletsUpdated.on,
-        ),
-        wallets: createSubscriptionFromAsync(WalletRPC.getWallets, [], WalletMessages.events.walletsUpdated.on),
-        providerType: isMask
-            ? createStaticSubscription(() => ProviderType.MaskWallet)
-            : createSubscriptionFromSettings(currentProviderSettings),
-        networkType: createSubscriptionFromSettings(isMask ? currentMaskWalletNetworkSettings : currentNetworkSettings),
-        erc20Tokens: createSubscriptionFromAsync(
-            () => WalletRPC.getTokens<ERC20TokenDetailed>(EthereumTokenType.ERC20),
-            [],
-            WalletMessages.events.erc20TokensUpdated.on,
-        ),
-        erc721Tokens: createSubscriptionFromAsync(
-            () => WalletRPC.getTokens<ERC721TokenDetailed>(EthereumTokenType.ERC721),
-            [],
-            WalletMessages.events.erc721TokensUpdated.on,
-        ),
-        erc1155Tokens: createSubscriptionFromAsync(
-            () => WalletRPC.getTokens<ERC1155TokenDetailed>(EthereumTokenType.ERC1155),
-            [],
-            WalletMessages.events.erc1155TokensUpdated.on,
-        ),
-        portfolioProvider: createSubscriptionFromSettings(currentFungibleAssetDataProviderSettings),
-
-        addToken: WalletRPC.addToken,
-        removeToken: WalletRPC.removeToken,
-        trustToken: WalletRPC.trustToken,
-        blockToken: WalletRPC.blockToken,
-
-        request: Services.Ethereum.request,
-        getSendOverrides: () =>
-            isMask
-                ? {
-                      account: currentMaskWalletAccountSettings.value,
-                      chainId: currentMaskWalletChainIdSettings.value,
-                      providerType: ProviderType.MaskWallet,
-                  }
-                : {
-                      account: currentAccountSettings.value,
-                      chainId: currentChainIdSettings.value,
-                      providerType: currentProviderSettings.value,
-                  },
-        getRequestOptions: () => ({ popupsWindow: !disablePopup }),
-
-        getAssetsList: WalletRPC.getAssetsList,
-        getAssetsListNFT: WalletRPC.getAssetsListNFT,
-        getCollectionsNFT: WalletRPC.getCollectionsNFT,
-        getAddressNamesList: async (identity: Parameters<typeof WalletRPC.getAddressNames>[0]) => {
-            const addressNames = await WalletRPC.getAddressNames(identity)
-            if (identity.identifier.network === 'twitter.com') {
-                const result = await Twitter.getUserNftContainer(identity.identifier.userId ?? '')
-                if (result?.type_name.toUpperCase() === 'ERC721') {
-                    const contractAddress = await getTokenOwner(result.address, result.token_id)
-                    if (contractAddress)
-                        return [
-                            ...addressNames,
-                            {
-                                type: AddressNameType.TWITTER_BLUE,
-                                label: contractAddress,
-                                resolvedAddress: contractAddress,
-                            },
-                        ]
-                }
-            }
-            return addressNames
-        },
-        getTransactionList: WalletRPC.getTransactionList,
-        fetchERC20TokensFromTokenLists: TokenList.fetchERC20TokensFromTokenLists,
-        providerSocket: getProxyWebsocketInstance((info) => WalletMessages.events.socketMessageUpdated.sendToAll(info)),
-    }
-}
-
-export const Web3Context = createWeb3Context(false, false)
-export const PopupWeb3Context = createWeb3Context(true, true)
-export const SwapWeb3Context = createWeb3Context(false, true)
-
-// utils
-function createSubscriptionFromSettings<T>(settings: InternalSettings<T>): Subscription<T> {
-    const { trigger, subscribe } = getEventTarget()
-    settings.readyPromise.finally(trigger)
-    return {
-        getCurrentValue: () => {
-            if (!settings.ready) throw settings.readyPromise
-            return settings.value
-        },
-        subscribe: (f) => {
-            const a = subscribe(f)
-            const b = settings.addListener(() => trigger())
-            return () => void [a(), b()]
-        },
-    }
-}
-
-function createStaticSubscription<T>(getter: () => T) {
-    return {
-        getCurrentValue: getter,
-        subscribe: () => noop,
-    }
-}
-
-function createSubscriptionFromAsync<T>(
-    f: () => Promise<T>,
-    defaultValue: T,
-    onChange: (callback: () => void) => () => void,
-): Subscription<T> {
-    // 0 - idle, 1 - updating state, > 1 - waiting state
-    let beats = 0
-    let state = defaultValue
-    let isLoading = true
-    const { subscribe, trigger } = getEventTarget()
-    const init = f()
-        .then((v) => {
-            state = v
-        })
-        .finally(trigger)
-        .finally(() => (isLoading = false))
-    const flush = async () => {
-        state = await f()
-        beats -= 1
-        if (beats > 0) {
-            beats = 1
-            setTimeout(flush, 0)
-        } else if (beats < 0) {
-            beats = 0
-        }
-        trigger()
-    }
-    return {
-        getCurrentValue: isAndroidApp
-            ? () => state
-            : () => {
-                  if (isLoading) throw init
-                  return state
-              },
-        subscribe: (sub) => {
-            const a = subscribe(sub)
-            const b = onChange(
-                isAndroidApp
-                    ? async () => {
-                          beats += 1
-                          if (beats === 1) await flush()
-                      }
-                    : () => {
-                          beats += 1
-                          if (beats === 1) flush()
-                      },
-            )
-            return () => void [a(), b()]
-        },
-    }
-}
-function getEventTarget() {
-    const event = new EventTarget()
-    const EVENT = 'event'
-    let timer: ReturnType<typeof setTimeout>
-    function trigger() {
-        clearTimeout(timer)
-        // delay to update state to ensure that all settings to be synced globally
-        timer = setTimeout(() => event.dispatchEvent(new Event(EVENT)), 600)
-    }
-    function subscribe(f: () => void) {
-        event.addEventListener(EVENT, f)
-        return () => event.removeEventListener(EVENT, f)
-    }
-    return { trigger, subscribe }
-}
diff --git a/packages/mask/utils-pure/index.ts b/packages/mask/utils-pure/index.ts
index 3a1a43716896..2fac638a4b21 100644
--- a/packages/mask/utils-pure/index.ts
+++ b/packages/mask/utils-pure/index.ts
@@ -1,4 +1,3 @@
 export * from './type'
 export * from './hmr'
 export * from './crypto'
-export * from './OnDemandWorker'
diff --git a/packages/mask/web-workers/wallet.ts b/packages/mask/web-workers/wallet.ts
deleted file mode 100644
index b736c7772f4c..000000000000
--- a/packages/mask/web-workers/wallet.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-import './prepare'
-import type { api } from '@dimensiondev/mask-wallet-core/proto'
-// How to interact with this worker:
-export type Input = { id: number; data: api.IMWRequest }
-export type Output = { id: number; response: api.MWResponse }
-
-async function load() {
-    if (process.env.manifest === '3') {
-        return import('@dimensiondev/mask-wallet-core/bundle')
-    } else {
-        const { default: init, ...rest } = await import('@dimensiondev/mask-wallet-core/web')
-        // @ts-expect-error
-        await init()
-        return rest
-    }
-}
-const promise = (async () => {
-    const { request } = await load()
-    const { api } = await import('@dimensiondev/mask-wallet-core/proto')
-    return { request, api }
-})()
-
-self.addEventListener('message', async (ev: MessageEvent) => {
-    const { api, request } = await promise
-
-    const { id, data } = ev.data as Input
-    if (!id) return
-
-    try {
-        const payload = api.MWRequest.encode(data).finish()
-        const wasmResult = request(payload)
-        const response = api.MWResponse.decode(wasmResult)
-        self.postMessage({ id, response })
-    } catch (error) {
-        const out: Output = { id, response: { error: { errorMsg: String(error) } } }
-        self.postMessage(out)
-    }
-})
diff --git a/packages/plugin-infra/package.json b/packages/plugin-infra/package.json
index 5a0ded8adac5..c1c2c2addc6b 100644
--- a/packages/plugin-infra/package.json
+++ b/packages/plugin-infra/package.json
@@ -13,6 +13,11 @@
       "webpack": "./src/entry-web3.ts",
       "default": "./dist/entry-web3.js"
     },
+    "./web3-evm": {
+      "types": "./dist/entry-web3-evm.d.ts",
+      "webpack": "./src/entry-web3-evm.ts",
+      "default": "./dist/entry-web3-evm.js"
+    },
     "./dom": {
       "types": "./dist/entry-dom.d.ts",
       "webpack": "./src/entry-dom.ts",
@@ -40,6 +45,9 @@
       "web3": [
         "./dist/entry-web3.d.ts"
       ],
+      "web3-evm": [
+        "./dist/entry-web3-evm.d.ts"
+      ],
       "dom": [
         "./dist/entry-dom.d.ts"
       ],
@@ -56,19 +64,32 @@
   },
   "dependencies": {
     "@dimensiondev/holoflows-kit": "^0.9.0-20220520093249-0870919",
+    "@dimensiondev/mask-wallet-core": "0.1.0-20211013082857-eb62e5f",
     "@masknet/encryption": "workspace:*",
     "@masknet/shared-base": "workspace:*",
     "@masknet/shared-base-ui": "workspace:*",
     "@masknet/theme": "workspace:*",
     "@masknet/typed-message": "workspace:*",
+    "@masknet/web3-constants": "workspace:*",
+    "@masknet/web3-contracts": "workspace:*",
     "@masknet/web3-shared-base": "workspace:*",
+    "@masknet/web3-shared-evm": "workspace:*",
+    "@masknet/web3-shared-flow": "workspace:*",
+    "@masknet/web3-shared-solana": "workspace:*",
     "@servie/events": "^3.0.0",
+    "@types/ethereum-blockies": "^0.1.0",
     "@types/use-subscription": "^1.0.0",
     "async-call-rpc": "^6.0.2",
     "bignumber.js": "^9.0.2",
+    "ethereum-blockies": "^0.1.1",
     "react-use": "^17.3.2",
     "unstated-next": "^1.1.0",
-    "use-subscription": "1.6.0"
+    "urlcat": "^2.0.4",
+    "use-subscription": "1.6.0",
+    "wallet.ts": "^1.0.1",
+    "web3": "1.7.3",
+    "web3-core-helpers": "1.7.3",
+    "web3-utils": "1.7.3"
   },
   "peerDependencies": {
     "react-i18next": "^11.15.3"
diff --git a/packages/plugin-infra/src/entry-web3-evm.ts b/packages/plugin-infra/src/entry-web3-evm.ts
new file mode 100644
index 000000000000..29a02d8a64b9
--- /dev/null
+++ b/packages/plugin-infra/src/entry-web3-evm.ts
@@ -0,0 +1 @@
+export * from './web3/EVM'
diff --git a/packages/plugin-infra/src/entry-web3.ts b/packages/plugin-infra/src/entry-web3.ts
index f10b434742c9..0c423ce8a9a9 100644
--- a/packages/plugin-infra/src/entry-web3.ts
+++ b/packages/plugin-infra/src/entry-web3.ts
@@ -1,11 +1,11 @@
 export * from './web3'
 export * from './web3-types'
+export * from './web3-state'
+export * from './web3-helpers'
 export {
     useActivatedPluginWeb3State,
     useActivatedPluginWeb3UI,
     useAllPluginsWeb3State,
-    useLookupAddress,
-    useReverseAddress,
     useAvailablePlugins,
 } from './hooks'
 export { getRegisteredWeb3Networks, getRegisteredWeb3Providers } from './manager/store'
diff --git a/packages/plugin-infra/src/hooks/index.ts b/packages/plugin-infra/src/hooks/index.ts
index 9ebf21266102..3d16de3701b4 100644
--- a/packages/plugin-infra/src/hooks/index.ts
+++ b/packages/plugin-infra/src/hooks/index.ts
@@ -3,7 +3,5 @@ export * from './useActivatedPluginWeb3UI'
 export * from './useActivatedPluginWeb3State'
 export * from './useAllPluginsWeb3State'
 export * from './useAvailablePlugins'
-export * from './useLookupDomain'
-export * from './useReverseAddress'
 export * from './useI18N'
 export { type PluginWrapperMethods, type PluginWrapperComponent, usePluginWrapper } from './usePluginWrapper'
diff --git a/packages/plugin-infra/src/hooks/useActivatedPluginWeb3State.ts b/packages/plugin-infra/src/hooks/useActivatedPluginWeb3State.ts
index 769c39f1ed9e..0589cfed1d5e 100644
--- a/packages/plugin-infra/src/hooks/useActivatedPluginWeb3State.ts
+++ b/packages/plugin-infra/src/hooks/useActivatedPluginWeb3State.ts
@@ -1,6 +1,8 @@
+import type { NetworkPluginID } from '@masknet/web3-shared-base'
+import type { Web3Helper } from '../web3-helpers'
 import { useActivatedPlugin } from './useActivatedPlugin'
 
-export function useActivatedPluginWeb3State(pluginID: string) {
+export function useActivatedPluginWeb3State<T extends NetworkPluginID>(pluginID: T) {
     const activatedPlugin = useActivatedPlugin(pluginID, 'any')
-    return activatedPlugin?.Web3State ?? null
+    return (activatedPlugin?.Web3State ?? {}) as Web3Helper.Web3State<T>
 }
diff --git a/packages/plugin-infra/src/hooks/useActivatedPluginWeb3UI.ts b/packages/plugin-infra/src/hooks/useActivatedPluginWeb3UI.ts
index cfbf11f0388c..5f0df6fc0951 100644
--- a/packages/plugin-infra/src/hooks/useActivatedPluginWeb3UI.ts
+++ b/packages/plugin-infra/src/hooks/useActivatedPluginWeb3UI.ts
@@ -1,6 +1,8 @@
+import type { NetworkPluginID } from '@masknet/web3-shared-base'
+import type { Web3Helper } from '../entry-web3'
 import { useActivatedPlugin } from './useActivatedPlugin'
 
-export function useActivatedPluginWeb3UI(pluginID: string) {
+export function useActivatedPluginWeb3UI<T extends NetworkPluginID>(pluginID: T) {
     const activatedPlugin = useActivatedPlugin(pluginID, 'any')
-    return activatedPlugin?.Web3UI ?? null
+    return (activatedPlugin?.Web3UI ?? {}) as Web3Helper.Web3UI<T>
 }
diff --git a/packages/plugin-infra/src/hooks/useAllPluginsWeb3State.ts b/packages/plugin-infra/src/hooks/useAllPluginsWeb3State.ts
index 812584b89b59..68c33daee5c2 100644
--- a/packages/plugin-infra/src/hooks/useAllPluginsWeb3State.ts
+++ b/packages/plugin-infra/src/hooks/useAllPluginsWeb3State.ts
@@ -1,14 +1,13 @@
+import type { NetworkPluginID } from '@masknet/web3-shared-base'
 import { useActivatedPluginsDashboard } from '../manager/dashboard'
 import { useActivatedPluginsSNSAdaptor } from '../manager/sns-adaptor'
-import type { Web3Plugin } from '../web3-types'
+import type { Web3Helper } from '../web3-helpers'
 
-type Capabilities = Web3Plugin.ObjectCapabilities.Capabilities
-
-export function useAllPluginsWeb3State() {
+export function useAllPluginsWeb3State<T extends NetworkPluginID>() {
     const pluginsSNSAdaptor = useActivatedPluginsSNSAdaptor('any')
     const pluginsDashboard = useActivatedPluginsDashboard()
     const entries = [...pluginsSNSAdaptor, ...pluginsDashboard]
         .filter((definition) => definition.Web3State)
-        .map((definition): [string, Capabilities] => [definition.ID, definition.Web3State!])
-    return Object.fromEntries(entries) as Record<string, Capabilities>
+        .map((definition) => [definition.ID, definition.Web3State])
+    return Object.fromEntries(entries) as Record<string, Web3Helper.Web3State<T>>
 }
diff --git a/packages/plugin-infra/src/hooks/useLookupDomain.ts b/packages/plugin-infra/src/hooks/useLookupDomain.ts
deleted file mode 100644
index 8467424f03fc..000000000000
--- a/packages/plugin-infra/src/hooks/useLookupDomain.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { useChainId, useWeb3State } from '../web3'
-import { useAsync } from 'react-use'
-import type { NetworkPluginID } from '../web3-types'
-
-export function useLookupAddress(domain: string, pluginId?: NetworkPluginID) {
-    const { NameService, Utils } = useWeb3State(pluginId)
-
-    const chainId = useChainId(pluginId)
-
-    return useAsync(async () => {
-        if (NameService?.lookup && Utils?.isValidDomain?.(domain)) {
-            return NameService.lookup(domain)
-        }
-        return ''
-    }, [NameService, Utils, domain, chainId])
-}
diff --git a/packages/plugin-infra/src/hooks/useReverseAddress.ts b/packages/plugin-infra/src/hooks/useReverseAddress.ts
deleted file mode 100644
index b5cc84abf8ed..000000000000
--- a/packages/plugin-infra/src/hooks/useReverseAddress.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import type { NetworkPluginID } from '../web3-types'
-import { useChainId, useWeb3State } from '../web3'
-import { useAsync } from 'react-use'
-
-export function useReverseAddress(address?: string, pluginId?: NetworkPluginID) {
-    const { NameService } = useWeb3State(pluginId)
-
-    const chainId = useChainId(pluginId)
-
-    return useAsync(async () => {
-        if (!address) return undefined
-        return NameService?.reverse?.(address)
-    }, [NameService, address, chainId])
-}
diff --git a/packages/plugin-infra/src/manager/sns-adaptor.ts b/packages/plugin-infra/src/manager/sns-adaptor.ts
index 9635844ca9b7..b3474f8a8672 100644
--- a/packages/plugin-infra/src/manager/sns-adaptor.ts
+++ b/packages/plugin-infra/src/manager/sns-adaptor.ts
@@ -1,9 +1,10 @@
+import { useMemo } from 'react'
 import { useSubscription, Subscription } from 'use-subscription'
+import { unreachable } from '@dimensiondev/kit'
+import type { NetworkPluginID } from '@masknet/web3-shared-base'
 import { createManager } from './manage'
 import { getPluginDefine } from './store'
 import type { CurrentSNSNetwork, Plugin } from '../types'
-import type { NetworkPluginID } from '../web3-types'
-import { unreachable } from '@dimensiondev/kit'
 
 const { events, activated, startDaemon, minimalMode } = createManager((def) => def.SNSAdaptor)
 
@@ -18,10 +19,12 @@ const minimalModeSub: Subscription<string[]> = {
 export function useActivatedPluginsSNSAdaptor(minimalModeEqualsTo: 'any' | boolean) {
     const minimalMode = useSubscription(minimalModeSub)
     const result = useSubscription(activatedSub)
-    if (minimalModeEqualsTo === 'any') return result
-    else if (minimalModeEqualsTo === true) return result.filter((x) => minimalMode.includes(x.ID))
-    else if (minimalModeEqualsTo === false) return result.filter((x) => !minimalMode.includes(x.ID))
-    unreachable(minimalModeEqualsTo)
+    return useMemo(() => {
+        if (minimalModeEqualsTo === 'any') return result
+        else if (minimalModeEqualsTo === true) return result.filter((x) => minimalMode.includes(x.ID))
+        else if (minimalModeEqualsTo === false) return result.filter((x) => !minimalMode.includes(x.ID))
+        unreachable(minimalModeEqualsTo)
+    }, [result, minimalMode, minimalModeEqualsTo])
 }
 useActivatedPluginsSNSAdaptor.visibility = {
     useMinimalMode: useActivatedPluginsSNSAdaptor.bind(null, true),
@@ -42,17 +45,20 @@ export function useIsMinimalMode(pluginID: string) {
 export function useActivatedPluginSNSAdaptor(pluginID: string, minimalModeEqualsTo: 'any' | boolean) {
     const plugins = useActivatedPluginsSNSAdaptor(minimalModeEqualsTo)
     const minimalMode = useSubscription(minimalModeSub)
-    const result = plugins.find((x) => x.ID === pluginID)
-    if (!result) return result
-    if (minimalModeEqualsTo === 'any') return result
-    else if (minimalModeEqualsTo === true) {
-        if (minimalMode.includes(result.ID)) return result
-        return undefined
-    } else if (minimalModeEqualsTo === false) {
-        if (minimalMode.includes(result.ID)) return undefined
-        return result
-    }
-    unreachable(minimalModeEqualsTo)
+
+    return useMemo(() => {
+        const result = plugins.find((x) => x.ID === pluginID)
+        if (!result) return result
+        if (minimalModeEqualsTo === 'any') return result
+        else if (minimalModeEqualsTo === true) {
+            if (minimalMode.includes(result.ID)) return result
+            return undefined
+        } else if (minimalModeEqualsTo === false) {
+            if (minimalMode.includes(result.ID)) return undefined
+            return result
+        }
+        unreachable(minimalModeEqualsTo)
+    }, [pluginID, plugins, minimalMode, minimalModeEqualsTo])
 }
 
 export function useActivatedPluginSNSAdaptor_Web3Supported(chainId: number, pluginID: string) {
diff --git a/packages/plugin-infra/src/manager/store.ts b/packages/plugin-infra/src/manager/store.ts
index 2f93090bdab4..bd0ea8e6bd32 100644
--- a/packages/plugin-infra/src/manager/store.ts
+++ b/packages/plugin-infra/src/manager/store.ts
@@ -1,6 +1,7 @@
 // DO NOT import React in this file. This file is also used by worker.
 import type { Plugin } from '../types'
 import { memoize } from 'lodash-unified'
+import type { Web3Helper } from '../web3-helpers'
 
 const __registered = new Map<string, Plugin.DeferredDefinition>()
 
@@ -11,9 +12,40 @@ export function getPluginDefine(id: string) {
     return __registered.get(id)
 }
 
-export function registerPlugin(def: Plugin.DeferredDefinition) {
+export function registerPlugin<
+    ChainId = unknown,
+    SchemaType = unknown,
+    ProviderType = unknown,
+    NetworkType = unknown,
+    Signature = unknown,
+    GasOption = unknown,
+    Block = unknown,
+    Transaction = unknown,
+    TransactionReceipt = unknown,
+    TransactionDetailed = unknown,
+    TransactionSignature = unknown,
+    TransactionParameter = unknown,
+    Web3 = unknown,
+>(
+    def: Plugin.DeferredDefinition<
+        ChainId,
+        SchemaType,
+        ProviderType,
+        NetworkType,
+        Signature,
+        GasOption,
+        Block,
+        Transaction,
+        TransactionReceipt,
+        TransactionDetailed,
+        TransactionSignature,
+        TransactionParameter,
+        Web3
+    >,
+) {
     if (__registered.has(def.ID)) return
     if (!__meetRegisterRequirement(def)) return
+    // @ts-ignore
     __registered.set(def.ID, def)
     getRegisteredWeb3Networks_memo.cache.clear?.()
     getRegisteredWeb3Providers_memo.cache.clear?.()
@@ -34,11 +66,13 @@ const getRegisteredWeb3Networks_memo = memoize(() => {
 const getRegisteredWeb3Providers_memo = memoize(() => {
     return getRegisteredPluginsSort_EVM_Ahead().flatMap((x) => x.declareWeb3Providers || [])
 })
+
 export function getRegisteredWeb3Networks() {
-    return getRegisteredWeb3Networks_memo()
+    return getRegisteredWeb3Networks_memo() as Web3Helper.NetworkDescriptorAll[]
 }
+
 export function getRegisteredWeb3Providers() {
-    return getRegisteredWeb3Providers_memo()
+    return getRegisteredWeb3Providers_memo() as Web3Helper.ProviderDescriptorAll[]
 }
 
 function __meetRegisterRequirement(def: Plugin.Shared.Definition) {
diff --git a/packages/plugin-infra/src/types.ts b/packages/plugin-infra/src/types.ts
index 7022f50697aa..c601434c8304 100644
--- a/packages/plugin-infra/src/types.ts
+++ b/packages/plugin-infra/src/types.ts
@@ -1,8 +1,19 @@
 /* eslint @dimensiondev/unicode/specific-set: ["error", { "only": "code" }] */
 import type React from 'react'
 import type { Option, Result } from 'ts-results'
+import type { JsonRpcPayload, JsonRpcResponse } from 'web3-core-helpers'
 import type { TypedMessage } from '@masknet/typed-message'
-import type { ScopedStorage, ProfileIdentifier, PersonaIdentifier } from '@masknet/shared-base'
+import type { ScopedStorage, ProfileIdentifier, PersonaIdentifier, PopupRoutes } from '@masknet/shared-base'
+import type {
+    ChainDescriptor,
+    IdentityAddress,
+    NetworkDescriptor,
+    ProviderDescriptor,
+    SocialIdentity,
+    Wallet,
+    Web3EnableRequirement,
+} from '@masknet/web3-shared-base'
+import type { SchemaType, Transaction } from '@masknet/web3-shared-evm'
 import type { Emitter } from '@servie/events'
 import type { Web3Plugin } from './web3-types'
 import type { Subscription } from 'use-subscription'
@@ -44,11 +55,60 @@ export declare namespace Plugin {
      * DeferredDefinition should not contain any functionality of the plugin expects the loader.
      * If the plugin is not providing some of the functionality, please can omit that field.
      */
-    export interface DeferredDefinition extends Shared.Definition {
+    export interface DeferredDefinition<
+        ChainId = unknown,
+        SchemaType = unknown,
+        ProviderType = unknown,
+        NetworkType = unknown,
+        Signature = unknown,
+        GasOption = unknown,
+        Block = unknown,
+        Transaction = unknown,
+        TransactionReceipt = unknown,
+        TransactionDetailed = unknown,
+        TransactionSignature = unknown,
+        TransactionParameter = unknown,
+        Web3 = unknown,
+        Web3Provider = unknown,
+    > extends Shared.Definition<ChainId, ProviderType, NetworkType> {
         /** Load the SNSAdaptor part of the plugin. */
-        SNSAdaptor?: Loader<SNSAdaptor.Definition>
+        SNSAdaptor?: Loader<
+            SNSAdaptor.Definition<
+                ChainId,
+                SchemaType,
+                ProviderType,
+                NetworkType,
+                Signature,
+                GasOption,
+                Block,
+                Transaction,
+                TransactionReceipt,
+                TransactionDetailed,
+                TransactionSignature,
+                TransactionParameter,
+                Web3,
+                Web3Provider
+            >
+        >
         /** Load the Dashboard part of the plugin. */
-        Dashboard?: Loader<Dashboard.Definition>
+        Dashboard?: Loader<
+            Dashboard.Definition<
+                ChainId,
+                SchemaType,
+                ProviderType,
+                NetworkType,
+                Signature,
+                GasOption,
+                Block,
+                Transaction,
+                TransactionReceipt,
+                TransactionDetailed,
+                TransactionSignature,
+                TransactionParameter,
+                Web3,
+                Web3Provider
+            >
+        >
         /** Load the Worker part of the plugin. */
         Worker?: Loader<Worker.Definition>
         /** Load the General UI of the plugin. */
@@ -64,14 +124,69 @@ export namespace Plugin.Shared {
         /**
          * A lightweight K/V storage used to store some simple data.
          */
-        createKVStorage<T extends object>(type: 'memory' | 'persistent', defaultValues: T): ScopedStorage<T>
-        /** Sign a message with persona */
-        personaSign(payload: PersonaSignRequest): Promise<PersonaSignResult>
-        /** Sign a message with wallet */
-        walletSign(message: string, address: string): Promise<string>
+        createKVStorage<T extends object>(
+            type: 'memory' | 'persistent',
+            name: string,
+            defaultValues: T,
+        ): ScopedStorage<T>
+        /** The selected account of Mask Wallet */
+        account: Subscription<string>
+        /** The selected chainId of Mask Wallet */
+        chainId: Subscription<number>
+        /** The selected persona */
         currentPersona: Subscription<PersonaIdentifier | undefined>
+        /** Get all wallets */
+        wallets: Subscription<Wallet[]>
+        /** Get the primary wallet */
+        walletPrimary: Subscription<Wallet | null>
+
+        /** Native platform type */
+        nativeType?: 'Android' | 'iOS'
+        /** Native API supported */
+        hasNativeAPI: boolean
+        /** Send request to native API */
+        send(payload: JsonRpcPayload): Promise<JsonRpcResponse>
+
+        /** Open popup window */
+        openPopupWindow(route?: PopupRoutes, params?: Record<string, any>): Promise<void>
+        /** Close popup window */
+        closePopupWindow(): Promise<void>
+
+        /** Update Mask Wallet account */
+        updateAccount(account: {
+            account?: string
+            chainId?: number
+            networkType?: string
+            providerType?: string
+        }): Promise<void>
+        /** Reset Mask Wallet account */
+        resetAccount(): Promise<void>
+        /** Prepare to select a Mask Wallet account */
+        selectAccountPrepare(callback: (accounts: string[]) => void): Promise<void>
+
+        /** Sign a message with persona */
+        personaSignMessage(payload: PersonaSignRequest): Promise<PersonaSignResult>
+
+        /** Sign transaction */
+        signTransaction(address: string, transaction: Transaction): Promise<string>
+        /** Sign personal message, aka. eth.personal.sign() */
+        signPersonalMessage(address: string, message: string): Promise<string>
+        /** Sign typed data */
+        signTypedData(address: string, message: string): Promise<string>
+
+        /** Add a new wallet */
+        addWallet(id: string, wallet: Wallet): Promise<void>
+        /** Update a wallet */
+        updateWallet(id: string, wallet: Partial<Wallet>): Promise<void>
+        /** Remove a old wallet */
+        removeWallet(id: string, password?: string): Promise<void>
+
+        /** get the latest unconfirmed request */
+        shiftUnconfirmedRequest(): Promise<JsonRpcPayload | undefined>
+        /** add an unconfirmed request */
+        pushUnconfirmedRequest(payload: JsonRpcPayload): Promise<JsonRpcPayload>
     }
-    export interface Definition {
+    export interface Definition<ChainId = unknown, ProviderType = unknown, NetworkType = unknown> {
         /**
          * ID of the plugin. It should be unique.
          * @example "com.mask.wallet"
@@ -106,12 +221,12 @@ export namespace Plugin.Shared {
         experimentalMark?: boolean
         /** i18n resources of this plugin */
         i18n?: I18NResource
+        /** Introduce sub-network information. */
+        declareWeb3Chains?: Array<ChainDescriptor<ChainId, SchemaType, NetworkType>>
         /** Introduce networks information. */
-        declareWeb3Networks?: Web3Plugin.NetworkDescriptor[]
+        declareWeb3Networks?: Array<NetworkDescriptor<ChainId, NetworkType>>
         /** Introduce wallet providers information. */
-        declareWeb3Providers?: Web3Plugin.ProviderDescriptor[]
-        /** Introduce application category information. */
-        declareApplicationCategories?: Web3Plugin.ApplicationCategoryDescriptor[]
+        declareWeb3Providers?: Array<ProviderDescriptor<ChainId, ProviderType>>
         /**
          * Declare what this plugin provides.
          *
@@ -157,7 +272,7 @@ export namespace Plugin.Shared {
         /** The SNS Network this plugin supports. */
         networks: SupportedNetworksDeclare
         /** The Web3 Network this plugin supports */
-        web3?: Web3Plugin.EnableRequirement
+        web3?: Web3EnableRequirement
     }
     export interface SupportedNetworksDeclare {
         /**
@@ -219,7 +334,22 @@ export namespace Plugin.SNSAdaptor {
         lastRecognizedProfile: Subscription<IdentityResolved | undefined>
         currentVisitingProfile: Subscription<IdentityResolved | undefined>
     }
-    export interface Definition extends Shared.DefinitionDeferred<SNSAdaptorContext> {
+    export interface Definition<
+        ChainId = unknown,
+        SchemaType = unknown,
+        ProviderType = unknown,
+        NetworkType = unknown,
+        Signature = unknown,
+        GasOption = unknown,
+        Block = unknown,
+        Transaction = unknown,
+        TransactionReceipt = unknown,
+        TransactionDetailed = unknown,
+        TransactionSignature = unknown,
+        TransactionParameter = unknown,
+        Web3 = unknown,
+        Web3Provider = unknown,
+    > extends Shared.DefinitionDeferred<SNSAdaptorContext> {
         /** This UI will be rendered for each post found. */
         PostInspector?: InjectUI<{}>
         /** This UI will be rendered for action of each post found. */
@@ -231,9 +361,24 @@ export namespace Plugin.SNSAdaptor {
         /** This UI will be rendered into the global scope of an SNS. */
         GlobalInjection?: InjectUI<{}>
         /** This is a chunk of web3 UIs to be rendered into various places of Mask UI. */
-        Web3UI?: Web3Plugin.UI.UI
+        Web3UI?: Web3Plugin.UI.UI<ChainId, ProviderType, NetworkType>
         /** This is the context of the currently chosen network. */
-        Web3State?: Web3Plugin.ObjectCapabilities.Capabilities
+        Web3State?: Web3Plugin.ObjectCapabilities.Capabilities<
+            ChainId,
+            SchemaType,
+            ProviderType,
+            NetworkType,
+            Signature,
+            GasOption,
+            Block,
+            Transaction,
+            TransactionReceipt,
+            TransactionDetailed,
+            TransactionSignature,
+            TransactionParameter,
+            Web3,
+            Web3Provider
+        >
         /** This UI will be an entry to the plugin in the Composition dialog of Mask. */
         CompositionDialogEntry?: CompositionDialogEntry
         /** This UI will be use when there is known badges. */
@@ -249,7 +394,12 @@ export namespace Plugin.SNSAdaptor {
          */
         enhanceTag?: {
             onClick?: (kind: 'cash' | 'hash', content: string, event: React.MouseEvent<HTMLAnchorElement>) => void
-            onHover?: (kind: 'cash' | 'hash', content: string, event: React.MouseEvent<HTMLAnchorElement>) => () => void
+            onHover?: (
+                kind: 'cash' | 'hash',
+                content: string,
+                event: React.MouseEvent<HTMLAnchorElement>,
+                chainId: ChainId,
+            ) => () => void
         }
     }
     // #region Composition entry
@@ -357,19 +507,21 @@ export namespace Plugin.SNSAdaptor {
         title?: string
         backgroundGradient?: string
     }
+    export interface ProfileSlider {
+        ID: string
 
-    export interface ProfileIdentity {
-        avatar?: string
-        bio?: string
-        homepage?: string
-        nickname?: string
-        identifier?: ProfileIdentifier
-    }
-
-    export interface ProfileAddress {
-        type: string
-        label: string
-        resolvedAddress: string
+        /**
+         * The name of the slider card
+         */
+        label: I18NStringField | string
+        /**
+         * Used to order the sliders
+         */
+        priority: number
+        /**
+         * The injected UI
+         */
+        children: InjectUI<{}>
     }
 
     export interface ProfileTab {
@@ -389,8 +541,8 @@ export namespace Plugin.SNSAdaptor {
              * The injected tab content
              */
             TabContent: InjectUI<{
-                identity?: ProfileIdentity
-                addressNames?: ProfileAddress[]
+                identity?: SocialIdentity
+                addressNames?: IdentityAddress[]
                 personaList?: string[]
             }>
         }
@@ -398,12 +550,12 @@ export namespace Plugin.SNSAdaptor {
             /**
              * If it returns false, this tab will not be displayed.
              */
-            shouldDisplay?(identity?: ProfileIdentity, addressNames?: ProfileAddress[]): boolean
+            shouldDisplay?(identity?: SocialIdentity, addressNames?: IdentityAddress[]): boolean
 
             /**
              * Sort address name in expected order.
              */
-            addressNameSorter?: (a: ProfileAddress, z: ProfileAddress) => number
+            addressNameSorter?: (a: IdentityAddress, z: IdentityAddress) => number
         }
     }
 }
@@ -412,15 +564,43 @@ export namespace Plugin.SNSAdaptor {
 export namespace Plugin.Dashboard {
     export interface DashboardContext extends Shared.SharedContext {}
     // As you can see we currently don't have so much use case for an API here.
-    export interface Definition extends Shared.DefinitionDeferred<DashboardContext> {
+    export interface Definition<
+        ChainId = unknown,
+        SchemaType = unknown,
+        ProviderType = unknown,
+        NetworkType = unknown,
+        Signature = unknown,
+        GasOption = unknown,
+        Block = unknown,
+        Transaction = unknown,
+        TransactionReceipt = unknown,
+        TransactionDetailed = unknown,
+        TransactionSignature = unknown,
+        TransactionParameter = unknown,
+        Web3 = unknown,
+        Web3Provider = unknown,
+    > extends Shared.DefinitionDeferred<DashboardContext> {
         /** This UI will be injected into the global scope of the Dashboard. */
         GlobalInjection?: InjectUI<{}>
-        /**
-         * This is a chunk of web3 UIs to be rendered into various places of Mask UI.
-         */
-        Web3UI?: Web3Plugin.UI.UI
+        /** This is a chunk of web3 UIs to be rendered into various places of Mask UI. */
+        Web3UI?: Web3Plugin.UI.UI<ChainId, ProviderType, NetworkType>
         /** This is the context of the currently chosen network. */
-        Web3State?: Web3Plugin.ObjectCapabilities.Capabilities
+        Web3State?: Web3Plugin.ObjectCapabilities.Capabilities<
+            ChainId,
+            SchemaType,
+            ProviderType,
+            NetworkType,
+            Signature,
+            GasOption,
+            Block,
+            Transaction,
+            TransactionReceipt,
+            TransactionDetailed,
+            TransactionSignature,
+            TransactionParameter,
+            Web3,
+            Web3Provider
+        >
         /** Plugin DO NOT need to define this. This will be auto set by the plugin host. */
         __general_ui__?: GeneralUI.DefinitionDeferred
     }
diff --git a/packages/plugin-infra/src/utils/subscription.ts b/packages/plugin-infra/src/utils/subscription.ts
new file mode 100644
index 000000000000..19298ee78b32
--- /dev/null
+++ b/packages/plugin-infra/src/utils/subscription.ts
@@ -0,0 +1,10 @@
+import { createConstantSubscription } from '@masknet/shared-base'
+
+export const ZERO = createConstantSubscription(0)
+export const UNDEFINED = createConstantSubscription(undefined)
+export const EMPTY_STRING = createConstantSubscription('')
+export const EMPTY_ARRAY = createConstantSubscription([])
+export const EMPTY_OBJECT = createConstantSubscription({})
+export const TRUE = createConstantSubscription(true)
+export const FALSE = createConstantSubscription(false)
+export const NULL = createConstantSubscription(null)
diff --git a/packages/plugin-infra/src/web3-helpers/index.ts b/packages/plugin-infra/src/web3-helpers/index.ts
new file mode 100644
index 000000000000..70b125556047
--- /dev/null
+++ b/packages/plugin-infra/src/web3-helpers/index.ts
@@ -0,0 +1,217 @@
+import type {
+    Connection,
+    ConnectionOptions,
+    Hub,
+    HubOptions,
+    NetworkDescriptor,
+    NetworkPluginID,
+    ConnectionState,
+    ProviderDescriptor,
+    ProviderState,
+} from '@masknet/web3-shared-base'
+import type * as EVM from '@masknet/web3-shared-evm'
+import type * as Flow from '@masknet/web3-shared-flow'
+import type * as Solana from '@masknet/web3-shared-solana'
+import type { Web3Plugin } from '../web3-types'
+
+export declare namespace Web3Helper {
+    export type Definition = {
+        [NetworkPluginID.PLUGIN_EVM]: {
+            ChainId: EVM.ChainId
+            SchemaType: EVM.SchemaType
+            ProviderType: EVM.ProviderType
+            NetworkType: EVM.NetworkType
+            Signature: EVM.Signature
+            GasOption: EVM.GasOption
+            Block: EVM.Block
+            Transaction: EVM.Transaction
+            TransactionReceipt: EVM.TransactionReceipt
+            TransactionDetailed: EVM.TransactionDetailed
+            TransactionSignature: EVM.TransactionSignature
+            TransactionParameter: EVM.TransactionParameter
+            Web3Provider: EVM.Web3Provider
+            Web3: EVM.Web3
+        }
+        [NetworkPluginID.PLUGIN_FLOW]: {
+            ChainId: Flow.ChainId
+            SchemaType: Flow.SchemaType
+            ProviderType: Flow.ProviderType
+            NetworkType: Flow.NetworkType
+            Signature: Flow.Signature
+            GasOption: Flow.GasOption
+            Block: Flow.Block
+            Transaction: Flow.Transaction
+            TransactionReceipt: Flow.TransactionReceipt
+            TransactionDetailed: Flow.TransactionDetailed
+            TransactionSignature: Flow.TransactionSignature
+            TransactionParameter: Flow.TransactionParameter
+            Web3Provider: Flow.Web3Provider
+            Web3: Flow.Web3
+        }
+        [NetworkPluginID.PLUGIN_SOLANA]: {
+            ChainId: Solana.ChainId
+            SchemaType: Solana.SchemaType
+            ProviderType: Solana.ProviderType
+            NetworkType: Solana.NetworkType
+            Signature: Solana.Signature
+            GasOption: Solana.GasOption
+            Block: Solana.Block
+            Transaction: Solana.Transaction
+            TransactionReceipt: Solana.TransactionReceipt
+            TransactionDetailed: Solana.TransactionDetailed
+            TransactionSignature: Solana.TransactionSignature
+            TransactionParameter: Solana.TransactionParameter
+            Web3Provider: Solana.Web3Provider
+            Web3: Solana.Web3
+        }
+    }
+
+    export type Web3ProviderDescriptor<T extends NetworkPluginID = never> = T extends never
+        ? never
+        : ProviderDescriptor<Definition[T]['ChainId'], Definition[T]['ProviderType']>
+
+    export type Web3NetworkDescriptor<T extends NetworkPluginID = never> = T extends never
+        ? never
+        : NetworkDescriptor<Definition[T]['ChainId'], Definition[T]['NetworkType']>
+
+    export type Web3<T extends NetworkPluginID = never> = T extends never ? never : Definition[T]['Web3']
+
+    export type Web3Provider<T extends NetworkPluginID = never> = T extends never
+        ? never
+        : Definition[T]['Web3Provider']
+
+    export type Web3ProviderState<T extends NetworkPluginID = never> = T extends never
+        ? never
+        : ProviderState<Definition[T]['ChainId'], Definition[T]['ProviderType'], Definition[T]['NetworkType']>
+
+    export type Web3ConnectionState<T extends NetworkPluginID = never> = T extends never
+        ? never
+        : ConnectionState<
+              Definition[T]['ChainId'],
+              Definition[T]['SchemaType'],
+              Definition[T]['ProviderType'],
+              Definition[T]['Signature'],
+              Definition[T]['Block'],
+              Definition[T]['Transaction'],
+              Definition[T]['TransactionReceipt'],
+              Definition[T]['TransactionDetailed'],
+              Definition[T]['TransactionSignature'],
+              Definition[T]['Web3'],
+              Definition[T]['Web3Provider']
+          >
+
+    export type Web3ConnectionOptions<T extends NetworkPluginID = never> = T extends never
+        ? never
+        : ConnectionOptions<Definition[T]['ChainId'], Definition[T]['ProviderType'], Definition[T]['Transaction']>
+
+    export type Web3Connection<T extends NetworkPluginID = never> = T extends never
+        ? never
+        : Connection<
+              Definition[T]['ChainId'],
+              Definition[T]['SchemaType'],
+              Definition[T]['ProviderType'],
+              Definition[T]['Signature'],
+              Definition[T]['Block'],
+              Definition[T]['Transaction'],
+              Definition[T]['TransactionReceipt'],
+              Definition[T]['TransactionDetailed'],
+              Definition[T]['TransactionSignature'],
+              Definition[T]['Web3'],
+              Definition[T]['Web3Provider']
+          >
+    export type Web3HubOptions<T extends NetworkPluginID = never> = T extends never
+        ? never
+        : HubOptions<Definition[T]['ChainId']>
+    export type Web3Hub<T extends NetworkPluginID = never> = T extends never
+        ? never
+        : Hub<Definition[T]['ChainId'], Definition[T]['SchemaType'], Definition[T]['GasOption']>
+    export type Web3State<T extends NetworkPluginID = never> = T extends never
+        ? never
+        : Web3Plugin.ObjectCapabilities.Capabilities<
+              Definition[T]['ChainId'],
+              Definition[T]['SchemaType'],
+              Definition[T]['ProviderType'],
+              Definition[T]['NetworkType'],
+              Definition[T]['Signature'],
+              Definition[T]['GasOption'],
+              Definition[T]['Block'],
+              Definition[T]['Transaction'],
+              Definition[T]['TransactionReceipt'],
+              Definition[T]['TransactionDetailed'],
+              Definition[T]['TransactionSignature'],
+              Definition[T]['TransactionParameter'],
+              Definition[T]['Web3'],
+              Definition[T]['Web3Provider']
+          >
+
+    export type Web3UI<T extends NetworkPluginID = never> = T extends never
+        ? never
+        : Web3Plugin.UI.UI<Definition[T]['ChainId'], Definition[T]['ProviderType'], Definition[T]['NetworkType']>
+
+    export type ChainIdAll = Definition[NetworkPluginID]['ChainId']
+    export type SchemaTypeAll = Definition[NetworkPluginID]['SchemaType']
+    export type ProviderTypeAll = Definition[NetworkPluginID]['ProviderType']
+    export type NetworkTypeAll = Definition[NetworkPluginID]['NetworkType']
+    export type SignatureAll = Definition[NetworkPluginID]['Signature']
+    export type GasOptionAll = Definition[NetworkPluginID]['GasOption']
+    export type BlockAll = Definition[NetworkPluginID]['Block']
+    export type TransactionAll = Definition[NetworkPluginID]['Transaction']
+    export type TransactionReceiptAll = Definition[NetworkPluginID]['TransactionReceipt']
+    export type TransactionDetailedAll = Definition[NetworkPluginID]['TransactionDetailed']
+    export type TransactionSignatureAll = Definition[NetworkPluginID]['TransactionSignature']
+    export type TransactionParameterAll = Definition[NetworkPluginID]['TransactionParameter']
+    export type Web3All = Definition[NetworkPluginID]['Web3']
+
+    export type NetworkDescriptorAll = NetworkDescriptor<
+        Definition[NetworkPluginID]['ChainId'],
+        Definition[NetworkPluginID]['NetworkType']
+    >
+
+    export type ProviderDescriptorAll = ProviderDescriptor<
+        Definition[NetworkPluginID]['ChainId'],
+        Definition[NetworkPluginID]['ProviderType']
+    >
+
+    export type Web3ConnectionAll = Connection<
+        Definition[NetworkPluginID]['ChainId'],
+        Definition[NetworkPluginID]['SchemaType'],
+        Definition[NetworkPluginID]['ProviderType'],
+        Definition[NetworkPluginID]['Signature'],
+        Definition[NetworkPluginID]['Block'],
+        Definition[NetworkPluginID]['Transaction'],
+        Definition[NetworkPluginID]['TransactionReceipt'],
+        Definition[NetworkPluginID]['TransactionDetailed'],
+        Definition[NetworkPluginID]['TransactionSignature'],
+        Definition[NetworkPluginID]['Web3'],
+        Definition[NetworkPluginID]['Web3Provider']
+    >
+    export type Web3HubAll = Hub<
+        Definition[NetworkPluginID]['ChainId'],
+        Definition[NetworkPluginID]['SchemaType'],
+        Definition[NetworkPluginID]['GasOption'],
+        Definition[NetworkPluginID]['Transaction']
+    >
+
+    export type Web3StateAll = Web3Plugin.ObjectCapabilities.Capabilities<
+        Definition[NetworkPluginID]['ChainId'],
+        Definition[NetworkPluginID]['SchemaType'],
+        Definition[NetworkPluginID]['ProviderType'],
+        Definition[NetworkPluginID]['NetworkType'],
+        Definition[NetworkPluginID]['Signature'],
+        Definition[NetworkPluginID]['GasOption'],
+        Definition[NetworkPluginID]['Block'],
+        Definition[NetworkPluginID]['Transaction'],
+        Definition[NetworkPluginID]['TransactionReceipt'],
+        Definition[NetworkPluginID]['TransactionDetailed'],
+        Definition[NetworkPluginID]['TransactionSignature'],
+        Definition[NetworkPluginID]['TransactionParameter'],
+        Definition[NetworkPluginID]['Web3'],
+        Definition[NetworkPluginID]['Web3Provider']
+    >
+
+    export type Web3UIAll = Web3Plugin.UI.UI<
+        Definition[NetworkPluginID]['ChainId'],
+        Definition[NetworkPluginID]['ProviderType'],
+        Definition[NetworkPluginID]['NetworkType']
+    >
+}
diff --git a/packages/plugin-infra/src/web3-state/AddressBook.ts b/packages/plugin-infra/src/web3-state/AddressBook.ts
new file mode 100644
index 000000000000..a1e8a4626821
--- /dev/null
+++ b/packages/plugin-infra/src/web3-state/AddressBook.ts
@@ -0,0 +1,58 @@
+import { uniqBy } from 'lodash-unified'
+import type { Subscription } from 'use-subscription'
+import { mapSubscription, mergeSubscription, StorageItem } from '@masknet/shared-base'
+import type { AddressBookState as Web3AddressBookState } from '@masknet/web3-shared-base'
+import type { Plugin } from '../types'
+
+export class AddressBookState<
+    ChainId extends number,
+    AddressBook extends Record<ChainId, string[]> = Record<ChainId, string[]>,
+> implements Web3AddressBookState<ChainId>
+{
+    protected storage: StorageItem<AddressBook> = null!
+    public addressBook?: Subscription<string[]>
+
+    constructor(
+        protected context: Plugin.Shared.SharedContext,
+        protected defaultValue: AddressBook,
+        protected subscriptions: {
+            chainId?: Subscription<ChainId>
+        },
+        protected options: {
+            isValidAddress(a: string): boolean
+            isSameAddress(a: string, b: string): boolean
+            formatAddress(a: string): string
+        },
+    ) {
+        const { storage } = this.context
+            .createKVStorage('persistent', 'AddressBook', {})
+            .createSubScope('AddressBook', {
+                value: defaultValue,
+            })
+        this.storage = storage.value
+
+        if (this.subscriptions.chainId) {
+            this.addressBook = mapSubscription(
+                mergeSubscription(this.subscriptions.chainId, this.storage.subscription),
+                ([chainId, addressBook]) => addressBook[chainId],
+            )
+        }
+    }
+
+    async addAddress(chainId: ChainId, address: string) {
+        if (!this.options.isValidAddress(address)) throw new Error(`Invalid address: ${address}`)
+        const all = this.storage.value
+        await this.storage.setValue({
+            ...all,
+            [chainId]: uniqBy([...all[chainId], this.options.formatAddress(address)], (x) => x.toLowerCase()),
+        })
+    }
+    async removeAddress(chainId: ChainId, address: string) {
+        if (!this.options.isValidAddress(address)) throw new Error(`Invalid address: ${address}`)
+        const all = this.storage.value
+        await this.storage.setValue({
+            ...all,
+            [chainId]: all[chainId].filter((x) => this.options.isSameAddress(x, address)),
+        })
+    }
+}
diff --git a/packages/plugin-infra/src/web3-state/Connection.ts b/packages/plugin-infra/src/web3-state/Connection.ts
new file mode 100644
index 000000000000..ed810495f75f
--- /dev/null
+++ b/packages/plugin-infra/src/web3-state/Connection.ts
@@ -0,0 +1,80 @@
+import type { Subscription } from 'use-subscription'
+import type { Connection, ConnectionOptions, ConnectionState as Web3ConnectionState } from '@masknet/web3-shared-base'
+
+export class ConnectionState<
+    ChainId,
+    SchemaType,
+    ProviderType,
+    Signature,
+    Block,
+    Transaction,
+    TransactionReceipt,
+    TransactionDetailed,
+    TransactionSignature,
+    Web3,
+    Web3Provider,
+    Web3ConnectionOptions extends ConnectionOptions<ChainId, ProviderType, Transaction> = ConnectionOptions<
+        ChainId,
+        ProviderType,
+        Transaction
+    >,
+> implements
+        Web3ConnectionState<
+            ChainId,
+            SchemaType,
+            ProviderType,
+            Signature,
+            Block,
+            Transaction,
+            TransactionReceipt,
+            TransactionDetailed,
+            TransactionSignature,
+            Web3,
+            Web3Provider,
+            Web3ConnectionOptions
+        >
+{
+    constructor(
+        protected createConnection: (
+            chainId?: ChainId,
+            account?: string,
+            providerType?: ProviderType,
+        ) => Connection<
+            ChainId,
+            SchemaType,
+            ProviderType,
+            Signature,
+            Block,
+            Transaction,
+            TransactionReceipt,
+            TransactionDetailed,
+            TransactionSignature,
+            Web3,
+            Web3Provider,
+            Web3ConnectionOptions
+        >,
+        protected subscription: {
+            account?: Subscription<string>
+            chainId?: Subscription<ChainId>
+            providerType?: Subscription<ProviderType>
+        },
+    ) {}
+
+    async getWeb3(options?: Web3ConnectionOptions) {
+        const connection = await this.getConnection(options)
+        return connection.getWeb3(options)
+    }
+
+    async getWeb3Provider(options?: Web3ConnectionOptions) {
+        const connection = await this.getConnection(options)
+        return connection.getWeb3Provider(options)
+    }
+
+    async getConnection(options?: Web3ConnectionOptions) {
+        return this.createConnection(
+            options?.chainId ?? this.subscription.chainId?.getCurrentValue(),
+            options?.account ?? this.subscription.account?.getCurrentValue(),
+            options?.providerType ?? this.subscription.providerType?.getCurrentValue(),
+        )
+    }
+}
diff --git a/packages/plugin-infra/src/web3-state/Hub.ts b/packages/plugin-infra/src/web3-state/Hub.ts
new file mode 100644
index 000000000000..6b513629a39d
--- /dev/null
+++ b/packages/plugin-infra/src/web3-state/Hub.ts
@@ -0,0 +1,37 @@
+import type { Subscription } from 'use-subscription'
+import type { HubState as Web3HubState, Hub, HubOptions, SourceType, CurrencyType } from '@masknet/web3-shared-base'
+
+const SIZE_PER_PAGE = 50
+const MAX_PAGE_SIZE = 25
+
+export class HubState<ChainId, SchemaType, GasOption> implements Web3HubState<ChainId, SchemaType, GasOption> {
+    constructor(
+        protected createHub: (
+            chainId?: ChainId,
+            account?: string,
+            sourceType?: SourceType,
+            currencyType?: CurrencyType,
+            sizePerPage?: number,
+            maxPageSize?: number,
+        ) => Hub<ChainId, SchemaType, GasOption>,
+        protected subscription: {
+            account?: Subscription<string>
+            chainId?: Subscription<ChainId>
+            sourceType?: Subscription<SourceType>
+            currencyType?: Subscription<CurrencyType>
+        },
+    ) {}
+
+    getHub(options?: HubOptions<ChainId>) {
+        return Promise.resolve(
+            this.createHub(
+                options?.chainId ?? this.subscription.chainId?.getCurrentValue(),
+                options?.account ?? this.subscription.account?.getCurrentValue(),
+                options?.sourceType ?? this.subscription.sourceType?.getCurrentValue(),
+                options?.currencyType ?? this.subscription.currencyType?.getCurrentValue(),
+                SIZE_PER_PAGE,
+                MAX_PAGE_SIZE,
+            ),
+        )
+    }
+}
diff --git a/packages/plugin-infra/src/web3-state/Identity.ts b/packages/plugin-infra/src/web3-state/Identity.ts
new file mode 100644
index 000000000000..d142d557ddc7
--- /dev/null
+++ b/packages/plugin-infra/src/web3-state/Identity.ts
@@ -0,0 +1,23 @@
+import type { StorageItem } from '@masknet/shared-base'
+import type {
+    IdentityAddress,
+    SocialIdentity,
+    IdentityServiceState as Web3SocialIdentityState,
+} from '@masknet/web3-shared-base'
+
+export class IdentityServiceState<
+    ChainId,
+    IdentityBook extends Record<string, IdentityAddress[]> = Record<string, IdentityAddress[]>,
+> implements Web3SocialIdentityState
+{
+    protected storage: StorageItem<IdentityBook> = null!
+
+    private getIdentityID(identity: SocialIdentity) {
+        if (!identity.identifier) return ''
+        return `${identity.identifier.network}_${identity.identifier.userId}`
+    }
+
+    async lookup(identity: SocialIdentity): Promise<IdentityAddress[]> {
+        return this.storage.value[this.getIdentityID(identity)]
+    }
+}
diff --git a/packages/plugin-infra/src/web3-state/NameService.ts b/packages/plugin-infra/src/web3-state/NameService.ts
new file mode 100644
index 000000000000..8a35a60b522e
--- /dev/null
+++ b/packages/plugin-infra/src/web3-state/NameService.ts
@@ -0,0 +1,74 @@
+import type { Subscription } from 'use-subscription'
+import { mapSubscription, mergeSubscription, StorageItem } from '@masknet/shared-base'
+import type { NameServiceState as Web3NameServiceState } from '@masknet/web3-shared-base'
+import type { Plugin } from '../types'
+
+export class NameServiceState<
+    ChainId extends number,
+    DomainBook extends Record<string, string> = Record<string, string>,
+    DomainBooks extends Record<ChainId, DomainBook> = Record<ChainId, DomainBook>,
+> implements Web3NameServiceState<ChainId, DomainBook>
+{
+    protected storage: StorageItem<DomainBooks> = null!
+    public domainBook?: Subscription<DomainBook>
+
+    constructor(
+        protected context: Plugin.Shared.SharedContext,
+        protected defaultValue: DomainBooks,
+        protected subscriptions: {
+            chainId?: Subscription<ChainId>
+        },
+        protected options: {
+            isValidName(a: string): boolean
+            isValidAddress(a: string): boolean
+            formatAddress(a: string): string
+        },
+    ) {
+        const { storage } = context.createKVStorage('memory', 'NameService', {}).createSubScope('NameService', {
+            value: defaultValue,
+        })
+        this.storage = storage.value
+
+        if (this.subscriptions.chainId) {
+            this.domainBook = mapSubscription(
+                mergeSubscription(this.subscriptions.chainId, this.storage.subscription),
+                ([chainId, domainBook]) => domainBook[chainId],
+            )
+        }
+    }
+
+    async addName(chainId: ChainId, address: string, name: string) {
+        if (!this.options.isValidAddress(address)) return
+        const all = this.storage.value
+        await this.storage.setValue({
+            ...all,
+            [chainId]: {
+                ...all[chainId],
+                [this.options.formatAddress(address)]: name,
+            },
+        })
+    }
+
+    async addAddress(chainId: ChainId, name: string, address: string) {
+        if (!this.options.isValidAddress(address)) return
+        const all = this.storage.value
+        await this.storage.setValue({
+            ...all,
+            [chainId]: {
+                ...all[chainId],
+                [name]: this.options.formatAddress(address),
+            },
+        })
+    }
+
+    async lookup(chainId: ChainId, name: string) {
+        const address = this.storage.value[chainId][name]
+        if (!this.options.isValidAddress(address)) return
+        return address
+    }
+
+    async reverse(chainId: ChainId, address: string) {
+        if (!this.options.isValidAddress(address)) return
+        return this.storage.value[chainId][this.options.formatAddress(address)]
+    }
+}
diff --git a/packages/plugin-infra/src/web3-state/Others.ts b/packages/plugin-infra/src/web3-state/Others.ts
new file mode 100644
index 000000000000..4f14a408a385
--- /dev/null
+++ b/packages/plugin-infra/src/web3-state/Others.ts
@@ -0,0 +1,79 @@
+import {
+    ChainDescriptor,
+    createChainResolver,
+    createExplorerResolver,
+    createNetworkResolver,
+    createProviderResolver,
+    isSameAddress,
+    NetworkDescriptor,
+    ProviderDescriptor,
+    OthersState as Web3OthersState,
+} from '@masknet/web3-shared-base'
+import type { Plugin } from '../types'
+
+export class OthersState<ChainId, SchemaType, ProviderType, NetworkType>
+    implements Web3OthersState<ChainId, SchemaType, ProviderType, NetworkType>
+{
+    constructor(
+        protected context: Plugin.Shared.SharedContext,
+        protected options: {
+            /** Default address or nullish address */
+            defaultAddress: string
+            /** Default block time in seconds */
+            defaultBlockDelay: number
+            /** Built-in chain descriptors */
+            chainDescriptors: Array<ChainDescriptor<ChainId, SchemaType, NetworkType>>
+            /** Built-in network descriptors */
+            networkDescriptors: Array<NetworkDescriptor<ChainId, NetworkType>>
+            /** Built-in provider descriptors */
+            providerDescriptors: Array<ProviderDescriptor<ChainId, ProviderType>>
+        },
+    ) {}
+
+    getDefaultChainId(): ChainId {
+        throw new Error('Method not implemented.')
+    }
+    getDefaultNetworkType(): NetworkType {
+        throw new Error('Method not implemented.')
+    }
+
+    chainResolver = createChainResolver<ChainId, SchemaType, NetworkType>(this.options.chainDescriptors)
+    explorerResolver = createExplorerResolver<ChainId, SchemaType, NetworkType>(this.options.chainDescriptors)
+    providerResolver = createProviderResolver<ChainId, ProviderType>(this.options.providerDescriptors)
+    networkResolver = createNetworkResolver<ChainId, NetworkType>(this.options.networkDescriptors)
+
+    getZeroAddress(chainId?: ChainId | undefined): string {
+        return this.options.defaultAddress
+    }
+    getNativeTokenAddress(chainId?: ChainId | undefined): string {
+        return this.options.defaultAddress
+    }
+    getMaskTokenAddress(chainId?: ChainId | undefined): string | undefined {
+        return
+    }
+    getAverageBlockDelay(chainId: ChainId, scale = 1): number {
+        return this.options.defaultBlockDelay * scale * 1000
+    }
+
+    isSameAddress = isSameAddress
+
+    isValidChain(chainId: ChainId, testnet = false): boolean {
+        return this.options.chainDescriptors.find((x) => x.chainId === chainId)?.network === 'mainnet' || testnet
+    }
+    isValidDomain(domain: string): boolean {
+        throw new Error('Method not implemented.')
+    }
+    isValidAddress(address: string): boolean {
+        throw new Error('Method not implemented.')
+    }
+
+    formatAddress(address: string, size?: number | undefined): string {
+        throw new Error('Method not implemented.')
+    }
+    formatTokenId(id?: string | undefined, size?: number | undefined): string {
+        throw new Error('Method not implemented.')
+    }
+    formatDomainName(domain?: string | undefined, size?: number | undefined): string {
+        throw new Error('Method not implemented.')
+    }
+}
diff --git a/packages/plugin-infra/src/web3-state/Provider.ts b/packages/plugin-infra/src/web3-state/Provider.ts
new file mode 100644
index 000000000000..49279cfa9571
--- /dev/null
+++ b/packages/plugin-infra/src/web3-state/Provider.ts
@@ -0,0 +1,189 @@
+import { clone, first } from 'lodash-unified'
+import type { Subscription } from 'use-subscription'
+import { delay } from '@dimensiondev/kit'
+import {
+    EnhanceableSite,
+    ExtensionSite,
+    getSiteType,
+    mapSubscription,
+    mergeSubscription,
+    StorageObject,
+} from '@masknet/shared-base'
+import type { Account, WalletProvider, ProviderState as Web3ProviderState } from '@masknet/web3-shared-base'
+import type { Plugin } from '../types'
+
+export interface ProviderStorage<Account, ProviderType extends string> {
+    /** Providers map to account settings. */
+    accounts: Record<ProviderType, Account>
+    /** Sites map to provider type. */
+    providers: Record<EnhanceableSite | ExtensionSite, ProviderType>
+}
+
+export class ProviderState<
+    ChainId extends number,
+    ProviderType extends string,
+    NetworkType extends string,
+    Web3Provider,
+    Web3,
+> implements Web3ProviderState<ChainId, ProviderType, NetworkType>
+{
+    protected site = getSiteType()
+    protected storage: StorageObject<ProviderStorage<Account<ChainId>, ProviderType>> = null!
+
+    public account?: Subscription<string>
+    public chainId?: Subscription<ChainId>
+    public networkType?: Subscription<NetworkType>
+    public providerType?: Subscription<ProviderType>
+
+    constructor(
+        protected context: Plugin.Shared.SharedContext,
+        protected providers: Record<ProviderType, WalletProvider<ChainId, ProviderType, Web3Provider, Web3>>,
+        protected defaultValue: ProviderStorage<Account<ChainId>, ProviderType>,
+        protected options: {
+            isValidAddress(a?: string): boolean
+            isValidChainId(a?: number): boolean
+            isSameAddress(a?: string, b?: string): boolean
+            getDefaultChainId(): ChainId
+            getDefaultNetworkType(): NetworkType
+            getNetworkTypeFromChainId(chainId: ChainId): NetworkType
+        },
+    ) {
+        const { storage } = this.context
+            .createKVStorage('memory', 'Provider', {})
+            .createSubScope('Provider', defaultValue)
+        this.storage = storage
+
+        this.setupSubscriptions()
+        this.setupProviders()
+    }
+
+    private setupSubscriptions() {
+        const site = this.site
+        if (!site) return
+
+        this.providerType = mapSubscription(this.storage.providers.subscription, (providers) => providers[site])
+
+        this.chainId = mapSubscription(
+            mergeSubscription(this.providerType, this.storage.accounts.subscription),
+            ([providerType, accounts]) => accounts[providerType].chainId,
+        )
+        this.account = mapSubscription(
+            mergeSubscription(this.providerType, this.storage.accounts.subscription),
+            ([providerType, accounts]) => accounts[providerType].account,
+        )
+        this.networkType = mapSubscription(
+            mergeSubscription(this.providerType, this.storage.accounts.subscription),
+            ([providerType, accounts]) => this.options.getNetworkTypeFromChainId(accounts[providerType].chainId),
+        )
+    }
+
+    private setupProviders() {
+        Object.entries(this.providers).forEach((entry) => {
+            const [providerType, provider] = entry as [
+                ProviderType,
+                WalletProvider<ChainId, ProviderType, Web3Provider, Web3>,
+            ]
+
+            provider.emitter.on('chainId', async (chainId) => {
+                await this.setAccount(providerType, {
+                    chainId: Number.parseInt(chainId, 16) as ChainId,
+                })
+            })
+            provider.emitter.on('accounts', async (accounts) => {
+                const account = first(accounts)
+                if (account && this.options.isValidAddress(account))
+                    await this.setAccount(providerType, {
+                        account,
+                    })
+            })
+            provider.emitter.on('disconnect', async () => {
+                await this.setAccount(providerType, {
+                    account: '',
+                    chainId: this.options.getDefaultChainId(),
+                })
+            })
+        })
+    }
+
+    private async setAccount(providerType: ProviderType, account: Partial<Account<ChainId>>) {
+        const siteType = getSiteType()
+        if (!siteType) return
+
+        const account_ = this.storage.accounts.value[providerType]
+        const accountCopied = clone(account)
+
+        if (accountCopied.account !== '' && !this.options.isValidAddress(accountCopied.account))
+            delete accountCopied.account
+        if (!this.options.isValidChainId(accountCopied.chainId ?? 0)) delete accountCopied.chainId
+
+        const needToUpdateAccount =
+            accountCopied.account === '' || !this.options.isSameAddress(account_.account, account.account)
+        const needToUpdateChainId = accountCopied.chainId && account_.chainId !== accountCopied.chainId
+        const needToUpdateProviderType = this.storage.providers.value[siteType] !== providerType
+
+        if (needToUpdateAccount || needToUpdateChainId) {
+            await this.storage.accounts.setValue({
+                ...this.storage.accounts.value,
+                [providerType]: {
+                    ...account_,
+                    ...accountCopied,
+                },
+            })
+        }
+
+        if (needToUpdateProviderType) {
+            await this.storage.providers.setValue({
+                ...this.storage.providers.value,
+                [siteType]: providerType,
+            })
+        }
+    }
+
+    isReady(providerType: ProviderType) {
+        return this.providers[providerType].ready
+    }
+
+    untilReady(providerType: ProviderType) {
+        return this.providers[providerType].readyPromise
+    }
+
+    async connect(chainId: ChainId, providerType: ProviderType) {
+        const provider = this.providers[providerType]
+
+        // compose the connection result
+        const account = await provider.connect(chainId)
+
+        // failed to connect provider
+        if (!account.account) throw new Error('Failed to connect provider.')
+
+        // switch the sub-network to the expected one
+        if (chainId !== account.chainId) {
+            await Promise.race([
+                (async () => {
+                    await delay(30 /* seconds */ * 1000 /* milliseconds */)
+                    throw new Error('Timeout!')
+                })(),
+                provider.switchChain(chainId),
+            ])
+            account.chainId = chainId
+        }
+
+        // update local storage
+        await this.setAccount(providerType, account)
+
+        provider.emitter.emit('connect', account)
+        return account
+    }
+
+    async disconnect(providerType: ProviderType) {
+        const provider = this.providers[providerType]
+        await provider.disconnect()
+
+        // update local storage
+        await this.setAccount(providerType, {
+            account: '',
+        })
+
+        provider.emitter.emit('disconnect', providerType)
+    }
+}
diff --git a/packages/plugin-infra/src/web3-state/RiskWarning.ts b/packages/plugin-infra/src/web3-state/RiskWarning.ts
new file mode 100644
index 000000000000..3c368916544d
--- /dev/null
+++ b/packages/plugin-infra/src/web3-state/RiskWarning.ts
@@ -0,0 +1,55 @@
+import type { Subscription } from 'use-subscription'
+import { mapSubscription, mergeSubscription, StorageItem } from '@masknet/shared-base'
+import type { RiskWarningState as Web3RiskWarningState } from '@masknet/web3-shared-base'
+import type { Plugin } from '../types'
+
+interface ConfirmationBook {
+    [key: string]: boolean
+}
+
+export class RiskWarningState implements Web3RiskWarningState {
+    protected storage: StorageItem<ConfirmationBook> = null!
+
+    public approved?: Subscription<boolean>
+
+    constructor(
+        protected context: Plugin.Shared.SharedContext,
+        protected subscriptions: {
+            account?: Subscription<string>
+        },
+        protected options: {
+            formatAddress(a: string): string
+        },
+    ) {
+        const { storage } = this.context.createKVStorage('memory', 'RiskWarning', {}).createSubScope('RiskWarning', {
+            value: {},
+        })
+
+        this.storage = storage.value
+
+        if (this.subscriptions.account) {
+            this.approved = mapSubscription(
+                mergeSubscription(this.subscriptions.account, this.storage.subscription),
+                ([account, storage]) => storage[this.options.formatAddress(account)],
+            )
+        }
+    }
+
+    async isApproved(address: string) {
+        return Reflect.has(this.storage.value, this.options.formatAddress(address))
+    }
+
+    async approve(address: string, pluginID?: string | undefined) {
+        await this.storage.setValue({
+            ...this.storage.value,
+            [this.options.formatAddress(address)]: true,
+        })
+    }
+
+    async revoke(address: string, pluginID?: string | undefined) {
+        await this.storage.setValue({
+            ...this.storage.value,
+            [this.options.formatAddress(address)]: false,
+        })
+    }
+}
diff --git a/packages/plugin-infra/src/web3-state/Settings.ts b/packages/plugin-infra/src/web3-state/Settings.ts
new file mode 100644
index 000000000000..05dd443973fd
--- /dev/null
+++ b/packages/plugin-infra/src/web3-state/Settings.ts
@@ -0,0 +1,37 @@
+import type { Subscription } from 'use-subscription'
+import { createConstantSubscription, StorageObject } from '@masknet/shared-base'
+import { CurrencyType, GasOptionType, SourceType, SettingsState as Web3SettingsState } from '@masknet/web3-shared-base'
+import type { Plugin } from '../types'
+
+export interface SettingsStorage {
+    currencyType: CurrencyType
+    gasOptionType: GasOptionType
+    fungibleAssetSourceType: SourceType
+    nonFungibleAssetSourceType: SourceType
+}
+
+export class SettingsState implements Web3SettingsState {
+    protected storage: StorageObject<SettingsStorage> = null!
+
+    public allowTestnet?: Subscription<boolean>
+    public currencyType?: Subscription<CurrencyType>
+    public gasOptionType?: Subscription<GasOptionType>
+    public fungibleAssetSourceType?: Subscription<SourceType>
+    public nonFungibleAssetSourceType?: Subscription<SourceType>
+
+    constructor(context: Plugin.Shared.SharedContext) {
+        const { storage } = context.createKVStorage('memory', 'Settings', {}).createSubScope('Settings', {
+            currencyType: CurrencyType.USD,
+            gasOptionType: GasOptionType.NORMAL,
+            fungibleAssetSourceType: SourceType.DeBank,
+            nonFungibleAssetSourceType: SourceType.OpenSea,
+        })
+        this.storage = storage
+
+        this.allowTestnet = createConstantSubscription(process.env.NODE_ENV === 'development')
+        this.currencyType = this.storage.currencyType.subscription
+        this.gasOptionType = this.storage.gasOptionType.subscription
+        this.fungibleAssetSourceType = this.storage.fungibleAssetSourceType.subscription
+        this.nonFungibleAssetSourceType = this.storage.nonFungibleAssetSourceType.subscription
+    }
+}
diff --git a/packages/plugin-infra/src/web3-state/Token.ts b/packages/plugin-infra/src/web3-state/Token.ts
new file mode 100644
index 000000000000..312d003eb0c8
--- /dev/null
+++ b/packages/plugin-infra/src/web3-state/Token.ts
@@ -0,0 +1,144 @@
+import { uniqBy } from 'lodash-unified'
+import type { Subscription } from 'use-subscription'
+import { mapSubscription, mergeSubscription, StorageObject } from '@masknet/shared-base'
+import {
+    FungibleToken,
+    NonFungibleToken,
+    Token,
+    TokenType,
+    TokenState as Web3TokenState,
+} from '@masknet/web3-shared-base'
+import type { Plugin } from '../types'
+
+export interface TokenStorage<ChainId, SchemaType> {
+    fungibleTokens: Array<FungibleToken<ChainId, SchemaType>>
+    nonFungibleTokens: Array<NonFungibleToken<ChainId, SchemaType>>
+    fungibleTokenBlockedBy: Record<string, string[]>
+    nonFungibleTokenBlockedBy: Record<string, string[]>
+}
+
+export class TokenState<ChainId, SchemaType> implements Web3TokenState<ChainId, SchemaType> {
+    protected storage: StorageObject<TokenStorage<ChainId, SchemaType>> = null!
+
+    public trustedFungibleTokens?: Subscription<Array<FungibleToken<ChainId, SchemaType>>>
+    public trustedNonFungibleTokens?: Subscription<Array<NonFungibleToken<ChainId, SchemaType>>>
+    public blockedFungibleTokens?: Subscription<Array<FungibleToken<ChainId, SchemaType>>>
+    public blockedNonFungibleTokens?: Subscription<Array<NonFungibleToken<ChainId, SchemaType>>>
+
+    constructor(
+        protected context: Plugin.Shared.SharedContext,
+        protected defaultValue: TokenStorage<ChainId, SchemaType>,
+        protected subscriptions: {
+            account?: Subscription<string>
+        },
+        protected options: {
+            isValidAddress(a: string): boolean
+            isSameAddress(a: string, b: string): boolean
+            formatAddress(a: string): string
+        },
+    ) {
+        const { storage } = context.createKVStorage('persistent', 'Token', {}).createSubScope('Token', defaultValue)
+        this.storage = storage
+
+        if (this.subscriptions.account) {
+            this.trustedFungibleTokens = mapSubscription(
+                mergeSubscription(
+                    this.subscriptions.account,
+                    this.storage.fungibleTokens.subscription,
+                    this.storage.fungibleTokenBlockedBy.subscription,
+                ),
+                ([account, tokens, blockedBy]) => tokens.filter((x) => !blockedBy[account]?.includes(x.address)),
+            )
+            this.trustedNonFungibleTokens = mapSubscription(
+                mergeSubscription(
+                    this.subscriptions.account,
+                    this.storage.nonFungibleTokens.subscription,
+                    this.storage.nonFungibleTokenBlockedBy.subscription,
+                ),
+                ([account, tokens, blockedBy]) => tokens.filter((x) => !blockedBy[account]?.includes(x.address)),
+            )
+            this.blockedFungibleTokens = mapSubscription(
+                mergeSubscription(
+                    this.subscriptions.account,
+                    this.storage.fungibleTokens.subscription,
+                    this.storage.fungibleTokenBlockedBy.subscription,
+                ),
+                ([account, tokens, blockedBy]) => tokens.filter((x) => blockedBy[account]?.includes(x.address)),
+            )
+            this.blockedNonFungibleTokens = mapSubscription(
+                mergeSubscription(
+                    this.subscriptions.account,
+                    this.storage.nonFungibleTokens.subscription,
+                    this.storage.nonFungibleTokenBlockedBy.subscription,
+                ),
+                ([account, tokens, blockedBy]) => tokens.filter((x) => blockedBy[account]?.includes(x.address)),
+            )
+        }
+    }
+
+    private async addOrRemoveToken(token: Token<ChainId, SchemaType>, strategy: 'add' | 'remove') {
+        if (!this.options.isValidAddress(token.address)) throw new Error('Not a valid token.')
+
+        const address = this.options.formatAddress(token.address)
+        const tokens: Array<Token<ChainId, SchemaType>> =
+            token.type === TokenType.Fungible ? this.storage.fungibleTokens.value : this.storage.nonFungibleTokens.value
+        const tokensUpdated =
+            strategy === 'add'
+                ? uniqBy(
+                      [
+                          {
+                              ...token,
+                              id: address,
+                              address,
+                          },
+                          ...tokens,
+                      ],
+                      (x) => x.id,
+                  )
+                : tokens.filter((x) => !this.options.isSameAddress(x.address, address))
+
+        if (token.type === TokenType.Fungible) {
+            await this.storage.fungibleTokens.setValue(tokensUpdated as Array<FungibleToken<ChainId, SchemaType>>)
+        } else {
+            await this.storage.nonFungibleTokens.setValue(tokensUpdated as Array<NonFungibleToken<ChainId, SchemaType>>)
+        }
+    }
+
+    private async blockOrUnblockToken(address: string, token: Token<ChainId, SchemaType>, strategy: 'trust' | 'block') {
+        if (!this.options.isValidAddress(token.address)) throw new Error('Not a valid token.')
+
+        const address_ = this.options.formatAddress(address)
+        const blocked =
+            token.type === TokenType.Fungible
+                ? this.storage.fungibleTokenBlockedBy.value
+                : this.storage.nonFungibleTokenBlockedBy.value
+        const blockedUpdated = {
+            ...blocked,
+            [address_]:
+                strategy === 'trust'
+                    ? blocked[address_]?.filter((x) => !this.options.isSameAddress(x, token.address))
+                    : uniqBy([this.options.formatAddress(token.address), ...(blocked[address_] ?? [])], (x) =>
+                          x.toLowerCase(),
+                      ),
+        }
+
+        if (token.type === TokenType.Fungible) {
+            await this.storage.fungibleTokenBlockedBy.setValue(blockedUpdated)
+        } else {
+            await this.storage.nonFungibleTokenBlockedBy.setValue(blockedUpdated)
+        }
+    }
+
+    async addToken(token: Token<ChainId, SchemaType>) {
+        this.addOrRemoveToken(token, 'add')
+    }
+    async removeToken(token: Token<ChainId, SchemaType>) {
+        this.addOrRemoveToken(token, 'remove')
+    }
+    async trustToken(address: string, token: Token<ChainId, SchemaType>) {
+        this.blockOrUnblockToken(address, token, 'trust')
+    }
+    async blockToken(address: string, token: Token<ChainId, SchemaType>) {
+        this.blockOrUnblockToken(address, token, 'block')
+    }
+}
diff --git a/packages/plugin-infra/src/web3-state/Transaction.ts b/packages/plugin-infra/src/web3-state/Transaction.ts
new file mode 100644
index 000000000000..d63bf8f9a370
--- /dev/null
+++ b/packages/plugin-infra/src/web3-state/Transaction.ts
@@ -0,0 +1,185 @@
+import type { Subscription } from 'use-subscription'
+import { mapSubscription, mergeSubscription, StorageItem } from '@masknet/shared-base'
+import {
+    RecentTransaction,
+    TransactionStatusType,
+    TransactionState as Web3TransactionState,
+} from '@masknet/web3-shared-base'
+import type { Plugin } from '../types'
+
+export type TransactionStorage<ChainId, Transaction> = Record<
+    // @ts-ignore
+    ChainId,
+    Partial<
+        Record<
+            // address
+            string,
+            Array<RecentTransaction<ChainId, Transaction>>
+        >
+    >
+>
+
+export class TransactionState<ChainId, Transaction> implements Web3TransactionState<ChainId, Transaction> {
+    static MAX_RECORD_SIZE = 20
+
+    protected storage: StorageItem<TransactionStorage<ChainId, Transaction>> = null!
+    public transactions?: Subscription<Array<RecentTransaction<ChainId, Transaction>>>
+
+    constructor(
+        protected context: Plugin.Shared.SharedContext,
+        protected defaultValue: TransactionStorage<ChainId, Transaction>,
+        protected subscriptions: {
+            account?: Subscription<string>
+            chainId?: Subscription<ChainId>
+        },
+        protected options: {
+            formatAddress(a: string): string
+        },
+    ) {
+        const { storage } = this.context
+            .createKVStorage('persistent', 'Transaction', {})
+            .createSubScope('Transaction', {
+                value: defaultValue,
+            })
+        this.storage = storage.value
+
+        if (this.subscriptions.chainId && this.subscriptions.account) {
+            this.transactions = mapSubscription(
+                mergeSubscription(this.subscriptions.chainId, this.subscriptions.account, this.storage.subscription),
+                ([chainId, account, transactionStorage]) =>
+                    transactionStorage[chainId][this.options.formatAddress(account)] ?? [],
+            )
+        }
+    }
+
+    async addTransaction(chainId: ChainId, address: string, id: string, transaction: Transaction) {
+        const now = new Date()
+        const all = this.storage.value
+        const address_ = this.options.formatAddress(address)
+
+        // to ensure that the transaction doesn't exist
+        const transaction_ = all[chainId][address_]?.find((x) => Object.keys(x.candidates).includes(id))
+        if (transaction_) return
+
+        const transactions: Array<RecentTransaction<ChainId, Transaction>> = [
+            // new records go first then we will remove it last
+            {
+                id,
+                indexId: id,
+                chainId,
+                createdAt: now,
+                updatedAt: now,
+                status: TransactionStatusType.NOT_DEPEND,
+                candidates: {
+                    [id]: transaction as Transaction,
+                },
+            },
+            ...(all[chainId][address_] ?? []),
+        ]
+
+        await this.storage.setValue({
+            ...all,
+            // @ts-ignore
+            [chainId]: {
+                ...all[chainId],
+                [address_]: transactions.slice(0, TransactionState.MAX_RECORD_SIZE),
+            },
+        })
+    }
+
+    async replaceTransaction(chainId: ChainId, address: string, id: string, newId: string, transaction: Transaction) {
+        const now = new Date()
+        const all = this.storage.value
+        const address_ = this.options.formatAddress(address)
+
+        // to ensure that the transaction exists
+        const transaction_ = all[chainId][address_]?.find((x) => Object.keys(x.candidates).includes(id))
+        if (!transaction_) return
+
+        const transactions: Array<RecentTransaction<ChainId, Transaction>> = (all[chainId][address_] ?? []).map((x) =>
+            Object.keys(x.candidates).includes(id)
+                ? {
+                      ...x,
+                      indexId: newId,
+                      candidates: {
+                          ...x.candidates,
+                          [newId]: transaction,
+                      },
+                      updatedAt: now,
+                  }
+                : x,
+        )
+
+        await this.storage.setValue({
+            ...all,
+            // @ts-ignore
+            [chainId]: {
+                ...all[chainId],
+                [address_]: transactions,
+            },
+        })
+    }
+
+    async updateTransaction(
+        chainId: ChainId,
+        address: string,
+        id: string,
+        status: Exclude<TransactionStatusType, TransactionStatusType.NOT_DEPEND>,
+    ) {
+        const now = new Date()
+        const all = this.storage.value
+        const address_ = this.options.formatAddress(address)
+
+        // to ensure that the transaction exists
+        const transaction_ = all[chainId][address_]?.find((x) => Object.keys(x.candidates).includes(id))
+        if (!transaction_) return
+
+        const transactions: Array<RecentTransaction<ChainId, Transaction>> = (all[chainId][address_] ?? []).map((x) =>
+            Object.keys(x.candidates).includes(id)
+                ? {
+                      ...x,
+                      indexId: id,
+                      status,
+                      updatedAt: now,
+                  }
+                : x,
+        )
+
+        await this.storage.setValue({
+            ...all,
+            // @ts-ignore
+            [chainId]: {
+                ...all[chainId],
+                [address_]: transactions,
+            },
+        })
+    }
+
+    async removeTransaction(chainId: ChainId, address: string, id: string) {
+        const all = this.storage.value
+        const address_ = this.options.formatAddress(address)
+
+        await this.storage.setValue({
+            ...all,
+            // @ts-ignore
+            [chainId]: {
+                ...all[chainId],
+                [address_]: all[chainId][address_]?.filter((x) => !Object.keys(x.candidates).includes(id)),
+            },
+        })
+    }
+
+    async clearTransactions(chainId: ChainId, address: string) {
+        const all = this.storage.value
+        const address_ = this.options.formatAddress(address)
+
+        await this.storage.setValue({
+            ...all,
+            // @ts-ignore
+            [chainId]: {
+                ...all[chainId],
+                [address_]: [],
+            },
+        })
+    }
+}
diff --git a/packages/plugin-infra/src/web3-state/TransactionFormatter.ts b/packages/plugin-infra/src/web3-state/TransactionFormatter.ts
new file mode 100644
index 000000000000..861e069e1d5e
--- /dev/null
+++ b/packages/plugin-infra/src/web3-state/TransactionFormatter.ts
@@ -0,0 +1,30 @@
+import type { Plugin } from '../types'
+import type {
+    TransactionContext,
+    TransactionDescriptor,
+    TransactionFormatterState as Web3TransactionFormatterState,
+} from '@masknet/web3-shared-base'
+
+export class TransactionFormatterState<ChainId, TransactionParameter, Transaction>
+    implements Web3TransactionFormatterState<ChainId, TransactionParameter, Transaction>
+{
+    constructor(context: Plugin.Shared.SharedContext) {}
+
+    async formatTransaction(chainId: ChainId, transaction: Transaction) {
+        const context = await this.createContext(chainId, transaction)
+        return this.createDescriptor(chainId, transaction, context)
+    }
+    createContext(
+        chainId: ChainId,
+        transaction: Transaction,
+    ): Promise<TransactionContext<ChainId, TransactionParameter>> {
+        throw new Error('Method not implemented.')
+    }
+    createDescriptor(
+        chainId: ChainId,
+        transaction: Transaction,
+        context: TransactionContext<ChainId, TransactionParameter>,
+    ): Promise<TransactionDescriptor<ChainId, Transaction>> {
+        throw new Error('Method not implemented.')
+    }
+}
diff --git a/packages/plugin-infra/src/web3-state/TransactionWatcher.ts b/packages/plugin-infra/src/web3-state/TransactionWatcher.ts
new file mode 100644
index 000000000000..d98b42b50b7d
--- /dev/null
+++ b/packages/plugin-infra/src/web3-state/TransactionWatcher.ts
@@ -0,0 +1,165 @@
+import { Emitter } from '@servie/events'
+import {
+    TransactionChecker,
+    TransactionStatusType,
+    WatchEvents,
+    TransactionWatcherState as Web3TransactionWatcherState,
+} from '@masknet/web3-shared-base'
+import type { Plugin } from '../types'
+
+interface StorageItem<ChainId, Transaction> {
+    at: number
+    id: string
+    chainId: ChainId
+    status: TransactionStatusType
+    transaction: Transaction
+}
+
+class Storage<ChainId, Transaction> {
+    static MAX_ITEM_SIZE = 40
+
+    private map = new Map<ChainId, Map<string, StorageItem<ChainId, Transaction>>>()
+
+    private getStorage(chainId: ChainId) {
+        if (!this.map.has(chainId)) this.map.set(chainId, new Map())
+        return this.map.get(chainId)!
+    }
+
+    public hasItem(chainId: ChainId, id: string) {
+        return this.getStorage(chainId).has(id)
+    }
+
+    public getItem(chainId: ChainId, id: string) {
+        return this.getStorage(chainId).get(id)
+    }
+
+    public setItem(chainId: ChainId, id: string, transaction: StorageItem<ChainId, Transaction>) {
+        this.getStorage(chainId).set(id, transaction)
+    }
+
+    public removeItem(chainId: ChainId, id: string) {
+        this.getStorage(chainId).delete(id)
+    }
+
+    public getItems(chainId: ChainId) {
+        const map = this.getStorage(chainId)
+        return map ? [...map.entries()].sort(([, a], [, z]) => z.at - a.at) : []
+    }
+
+    public getWatched(chainId: ChainId) {
+        return this.getItems(chainId).slice(0, Storage.MAX_ITEM_SIZE)
+    }
+
+    public getUnwatched(chainId: ChainId) {
+        return this.getItems(chainId).slice(Storage.MAX_ITEM_SIZE)
+    }
+}
+
+class Watcher<ChainId, Transaction> {
+    static LATEST_TRANSACTION_SIZE = 5
+
+    private timer: NodeJS.Timeout | null = null
+    private storage = new Storage<ChainId, Transaction>()
+
+    constructor(
+        protected checkers: Array<TransactionChecker<ChainId>>,
+        protected options: {
+            delay: number
+            onNotify: (id: string, status: TransactionStatusType) => void
+        },
+    ) {}
+
+    private async check(chainId: ChainId) {
+        // stop any pending task
+        this.stopCheck()
+
+        // unwatch legacy transactions
+        this.storage.getUnwatched(chainId).forEach(([id]) => this.unwatchTransaction(chainId, id))
+
+        // check if all transactions were sealed
+        const watchedTransactions = this.storage
+            .getWatched(chainId)
+            .filter(([, x]) => x.status !== TransactionStatusType.NOT_DEPEND)
+        if (!watchedTransactions.length) return
+
+        for (const [id] of watchedTransactions) {
+            for (const checker of this.checkers) {
+                const status = await checker.checkStatus(chainId, id)
+                if (status !== TransactionStatusType.NOT_DEPEND) this.options.onNotify(id, status)
+            }
+        }
+
+        // kick to the next round
+        this.startCheck(chainId)
+    }
+
+    private startCheck(chainId: ChainId) {
+        this.stopCheck()
+        if (this.timer === null) {
+            this.timer = setTimeout(this.check.bind(this, chainId), this.options.delay)
+        }
+    }
+
+    private stopCheck() {
+        if (this.timer !== null) clearTimeout(this.timer)
+        this.timer = null
+    }
+
+    public watchTransaction(chainId: ChainId, id: string, transaction: Transaction) {
+        if (!this.storage.hasItem(chainId, id)) {
+            this.storage.setItem(chainId, id, {
+                at: Date.now(),
+                id,
+                chainId,
+                status: TransactionStatusType.NOT_DEPEND,
+                transaction,
+            })
+        }
+        this.startCheck(chainId)
+    }
+
+    public unwatchTransaction(chainId: ChainId, id: string) {
+        this.storage.removeItem(chainId, id)
+    }
+}
+
+export class TransactionWatcherState<ChainId, Transaction>
+    implements Web3TransactionWatcherState<ChainId, Transaction>
+{
+    private watchers: Map<ChainId, Watcher<ChainId, Transaction>> = new Map()
+
+    emitter: Emitter<WatchEvents> = new Emitter()
+
+    constructor(
+        protected context: Plugin.Shared.SharedContext,
+        protected checkers: Array<TransactionChecker<ChainId>>,
+        protected options: {
+            /** Default block delay in seconds */
+            defaultBlockDelay: number
+        },
+    ) {}
+
+    private getWatcher(chainId: ChainId) {
+        if (!this.watchers.has(chainId))
+            this.watchers.set(
+                chainId,
+                new Watcher(this.checkers, {
+                    delay: this.options.defaultBlockDelay * 1000,
+                    onNotify: this.notifyTransaction.bind(this),
+                }),
+            )
+        return this.watchers.get(chainId)!
+    }
+
+    watchTransaction(chainId: ChainId, id: string, transaction: Transaction) {
+        this.getWatcher(chainId).watchTransaction(chainId, id, transaction)
+    }
+
+    unwatchTransaction(chainId: ChainId, id: string) {
+        this.getWatcher(chainId).unwatchTransaction(chainId, id)
+    }
+
+    notifyTransaction(id: string, status: TransactionStatusType) {
+        this.emitter.emit('progress', id, status)
+    }
+}
diff --git a/packages/plugin-infra/src/web3-state/Wallet.ts b/packages/plugin-infra/src/web3-state/Wallet.ts
new file mode 100644
index 000000000000..37719f7ab8e0
--- /dev/null
+++ b/packages/plugin-infra/src/web3-state/Wallet.ts
@@ -0,0 +1,25 @@
+import type { Subscription } from 'use-subscription'
+import type { Wallet, WalletState as Web3WalletState } from '@masknet/web3-shared-base'
+import type { Plugin } from '../types'
+
+export class WalletState implements Web3WalletState {
+    public wallets?: Subscription<Wallet[]>
+    public walletPrimary?: Subscription<Wallet | null>
+
+    constructor(protected context: Plugin.Shared.SharedContext) {
+        this.wallets = context.wallets
+        this.walletPrimary = context.walletPrimary
+    }
+
+    async getAllWallets() {
+        return this.context.wallets.getCurrentValue()
+    }
+
+    async addWallet(id: string, wallet: Wallet) {
+        return this.context.addWallet(id, wallet)
+    }
+
+    async removeWallet(id: string) {
+        return this.context.removeWallet(id)
+    }
+}
diff --git a/packages/plugin-infra/src/web3-state/index.ts b/packages/plugin-infra/src/web3-state/index.ts
new file mode 100644
index 000000000000..99c0423a4099
--- /dev/null
+++ b/packages/plugin-infra/src/web3-state/index.ts
@@ -0,0 +1,14 @@
+export * from './AddressBook'
+export * from './NameService'
+export * from './RiskWarning'
+export * from './Settings'
+export * from './Token'
+export * from './Hub'
+export * from './Transaction'
+export * from './TransactionFormatter'
+export * from './TransactionWatcher'
+export * from './Connection'
+export * from './Provider'
+export * from './Identity'
+export * from './Wallet'
+export * from './Others'
diff --git a/packages/plugin-infra/src/web3-types.ts b/packages/plugin-infra/src/web3-types.ts
index 057cd24024b2..2125d1b2213b 100644
--- a/packages/plugin-infra/src/web3-types.ts
+++ b/packages/plugin-infra/src/web3-types.ts
@@ -1,408 +1,108 @@
-import type { BigNumber } from 'bignumber.js'
-import type { Subscription } from 'use-subscription'
+import type {
+    NetworkDescriptor,
+    ProviderDescriptor,
+    AddressBookState,
+    NameServiceState,
+    RiskWarningState,
+    SettingsState,
+    TokenState,
+    TransactionState,
+    TransactionFormatterState,
+    TransactionWatcherState,
+    ConnectionState,
+    ProviderState,
+    WalletState,
+    OthersState,
+    IdentityServiceState,
+    HubState,
+} from '@masknet/web3-shared-base'
 import type { Plugin } from './types'
 
-export interface Pagination {
-    /** The item size of each page. */
-    size?: number
-    /** The page index. */
-    page?: number
-}
-
-export interface Pageable<T> {
-    currentPage: number
-    hasNextPage: boolean
-    data: T[]
-}
-/**
- * A network plugin defines the way to connect to a single chain.
- */
-export enum NetworkPluginID {
-    PLUGIN_EVM = 'com.mask.evm',
-    PLUGIN_FLOW = 'com.mask.flow',
-    PLUGIN_SOLANA = 'com.mask.solana',
-}
-
-export enum CurrencyType {
-    NATIVE = 'native',
-    BTC = 'btc',
-    USD = 'usd',
-}
-
-export enum TokenType {
-    Fungible = 'Fungible',
-    NonFungible = 'NonFungible',
-}
-
-export type Color =
-    | `rgb(${number}, ${number}, ${number})`
-    | `rgba(${number}, ${number}, ${number}, ${number})`
-    | `#${string}${string}${string}${string}${string}${string}`
-    | `#${string}${string}${string}`
-    | `hsl(${number}, ${number}%, ${number}%)`
-
-// Borrow from @masknet/web3-shared-evm
-interface ERC721TokenInfo {
-    name?: string
-    description?: string
-    tokenURI?: string
-    mediaUrl?: string
-    imageURL?: string
-    owner?: string
-    // loading tokenURI
-    hasTokenDetailed?: boolean
-}
-
 export declare namespace Web3Plugin {
-    /**
-     * Plugin can declare what chain it supports to trigger side effects (e.g. create a new transaction).
-     * When the current chain is not supported, the composition entry will be hidden.
-     */
-    export type EnableRequirement = Partial<
-        Record<
-            NetworkPluginID,
-            {
-                supportedChainIds?: number[]
-            }
-        >
-    >
-
-    export interface NetworkDescriptor {
-        /** An unique ID for each network */
-        ID: string
-        /** The ID of a plugin that provides the functionality of this network. */
-        networkSupporterPluginID: string
-        /** The chain id */
-        chainId: number
-        /** The network type */
-        type: string
-        /** The network icon */
-        icon: URL
-        /** The network icon in fixed color */
-        iconColor: Color
-        /** The network name */
-        name: string
-        /** Is a mainnet network */
-        isMainnet: boolean
-    }
-    export interface ProviderDescriptor {
-        /** An unique ID for each wallet provider */
-        ID: string
-        /** The ID of a plugin that provides the adoption of this provider. */
-        providerAdaptorPluginID: string
-        /** The provider type */
-        type: string
-        /** The provider icon */
-        icon: URL
-        /** The provider name */
-        name: string
-    }
-
-    export interface ConnectionResult<ChainId = number, NetworkType = string, ProviderType = string> {
-        account: string
-        chainId: ChainId
-        networkType: NetworkType
-        providerType: ProviderType
-    }
-
-    export interface ApplicationCategoryDescriptor {
-        /** An unique ID for each category */
-        ID: string
-        /** The category icon */
-        icon: URL
-        /** The category name */
-        name: string
-    }
-
-    export interface CryptoPrice {
-        [token: string]: {
-            [key in CurrencyType]?: number
-        }
-    }
-    export interface ChainDetailed {
-        name: string
-        chainId: number
-        fullName?: string
-        shortName?: string
-        chainName?: string
-        network?: string // mainnet
-    }
-    export interface Wallet {
-        /** User define wallet name. Default address.prefix(6) */
-        name: string
-        /** The address of wallet */
-        address: string
-        /** true: Mask Wallet, false: External Wallet */
-        hasStoredKeyInfo: boolean
-        /** true: Derivable Wallet. false: UnDerivable Wallet */
-        hasDerivationPath: boolean
-    }
-    export interface Asset<T extends Token = Token> {
-        id: string
-        chainId: number
-        balance: string
-        /** estimated price */
-        price?: {
-            [key in CurrencyType]?: string
-        }
-        /** estimated value */
-        value?: {
-            [key in CurrencyType]?: string
-        }
-        logoURI?: string
-        token: T
-    }
-
-    export interface AddressName {
-        id: string
-        /** eg. vitalik.eth */
-        label: string
-        /** eg. 0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045 */
-        ownerAddress: string
-        /** eg. 0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045 */
-        resolvedAddress?: string
-    }
-
-    export interface Transaction {
-        id: string
-        type: string
-        title: string
-        from: string
-        to: string
-        timestamp: string
-        /** 0: failed 1: succeed */
-        status: 0 | 1
-        /** estimated tx fee */
-        fee: {
-            [key in CurrencyType]?: string
-        }
-    }
-
-    export interface Token {
-        id: string
-        chainId: number
-    }
-
-    export interface FungibleToken extends Token {
-        id: string
-        type: TokenType.Fungible
-        address: string
-        decimals?: number
-        name: string
-        symbol: string
-        logoURI?: string | string[]
-    }
-
-    export interface NonFungibleContract {
-        id: string
-        chainId: number
-        name: string
-        symbol: string
-        address: string
-        iconURL?: string
-        balance?: number
-    }
-
-    export interface FungibleTokenMetadata {
-        name: string
-        symbol: string
-        decimals: number
-        iconURL?: string
-        token: FungibleToken
-    }
-
-    export interface NonFungibleTokenMetadata {
-        name: string
-        description: string
-        mediaType: string
-        iconURL?: string
-        assetURL?: string
-    }
-
-    export interface NonFungibleToken extends Token {
-        // chainId_contractAddress_tokenId
-        id: string
-        tokenId: string
-        type: TokenType.NonFungible
-        name: string
-        description?: string
-        owner?: string
-        metadata?: NonFungibleTokenMetadata
-        info?: ERC721TokenInfo
-        contract?: NonFungibleContract
-    }
-
-    export interface TokenList {
-        name: string
-        description?: string
-        tokens: Token[]
-    }
-
-    export type DomainAddressBook = {
-        [chainId: number]: Record<string, string> | undefined
-    }
-
     export namespace ObjectCapabilities {
-        export interface SharedState {
-            allowTestnet?: Subscription<boolean>
-            /** The ID of currently chosen sub-network. */
-            chainId?: Subscription<number>
-            /** The address of the currently chosen wallet. */
-            account?: Subscription<string>
-            /** The network type. */
-            networkType?: Subscription<string | undefined>
-            /** The wallet provider type. */
-            providerType?: Subscription<string | undefined>
-            /** The asset data provider. */
-            assetType?: Subscription<string | undefined>
-            /** The address name data provider. */
-            nameType?: Subscription<string | undefined>
-            /** The collectible data provider. */
-            collectibleType?: Subscription<string | undefined>
-            /** The transaction data provider. */
-            transactionType?: Subscription<string | undefined>
-            /** The currency of estimated values and prices. */
-            currencyType?: Subscription<CurrencyType>
-            /** The tracked token prices which stored as address and price pairs. */
-            prices?: Subscription<CryptoPrice>
-            /** The currently stored wallet by MaskWallet. */
-            wallets?: Subscription<Wallet[]>
-            /** The default derivable wallet. */
-            walletPrimary?: Subscription<Wallet | null>
-            /** The user added fungible tokens. */
-            fungibleTokens?: Subscription<FungibleToken[]>
-            /** The user added non-fungible tokens. */
-            nonFungibleTokens?: Subscription<NonFungibleToken[]>
-        }
-        export interface AssetState {
-            /** Get fungible assets of given account. */
-            getFungibleAssets?: (
-                address: string,
-                providerType: string,
-                network: NetworkDescriptor,
-                pagination?: Pagination,
-            ) => Promise<Array<Asset<FungibleToken>>>
-            /** Get non-fungible assets of given account. */
-            getNonFungibleAssets?: (
-                address: string,
-                pagination: Pagination,
-                providerType?: string,
-                network?: NetworkDescriptor,
-            ) => Promise<Pageable<NonFungibleToken>>
-        }
-        export interface NameServiceState {
-            lookup?: (domain: string) => Promise<string | undefined>
-            reverse?: (address: string) => Promise<string | undefined>
-        }
-        export interface TokenState {
-            addToken: (token: Token) => Promise<void>
-            removeToken: (token: Token) => Promise<void>
-            trustToken: (token: Token) => Promise<void>
-            blockToken: (token: Token) => Promise<void>
-        }
-        export interface ProviderState {
-            /** Get latest transactions of given account. */
-            getTransactions: (
-                address: string,
-                providerType: string,
-                network: NetworkDescriptor,
-                pagination?: Pagination,
-            ) => Promise<Transaction[]>
-        }
-        export interface TokenListState {
-            /** Get the token lists of supported fungible tokens. */
-            getFungibleTokenLists: (
-                address: string,
-                providerType: string,
-                network: NetworkDescriptor,
-                pagination?: Pagination,
-            ) => Promise<TokenList[]>
-            /** Get the token lists of supported non-fungible tokens. */
-            getNonFungibleTokenLists: (
-                address: string,
-                providerType: string,
-                network: NetworkDescriptor,
-                pagination?: Pagination,
-            ) => Promise<TokenList[]>
-        }
-        export interface Others {
-            getLatestBlockNumber?: (chainId: number) => Promise<number>
-            getLatestBalance?: (chainId: number, account: string) => Promise<string>
-
-            isChainIdValid?: (chainId: number, allowTestnet: boolean) => boolean
-            getChainDetailed?: (chainId: number) => ChainDetailed | undefined
-            getFungibleTokenMetadata?: (token: FungibleToken) => Promise<FungibleTokenMetadata>
-            getNonFungibleTokenMetadata?: (token: NonFungibleToken) => Promise<NonFungibleTokenMetadata>
-
-            formatAddress?: (address: string, size?: number) => string
-            formatCurrency?: (value: BigNumber.Value, sign?: string, symbol?: string) => string
-            formatBalance?: (value: BigNumber.Value, decimals?: number, significant?: number) => string
-
-            resolveChainName?: (chainId: number) => string
-            resolveChainFullName?: (chainId: number) => string
-            resolveChainColor?: (chainId: number) => string
-
-            resolveTransactionLink?: (chainId: number, transactionId: string) => string
-            resolveAddressLink?: (chainId: number, address: string) => string
-            resolveNonFungibleTokenLink?: (chainId: number, address: string, tokenId: string) => string
-            resolveBlockLink?: (chainId: number, blockNumber: string) => string
-
-            resolveDomainLink?: (domain: string) => string
-            isValidDomain?: (domain: string) => boolean
-            formatDomainName?: (domain?: string, size?: number) => string | undefined
-
-            getAverageBlockDelay?: (chainId: number, scale?: number) => number
-        }
-        export interface Capabilities {
-            Shared?: SharedState
-            Asset?: AssetState
-            NameService?: NameServiceState
-            Token?: TokenState
-            Provider?: ProviderState
-            TokenList?: TokenListState
-            Utils?: Others
+        export interface Capabilities<
+            ChainId,
+            SchemaType,
+            ProviderType,
+            NetworkType,
+            Signature,
+            GasOption,
+            Block,
+            Transaction,
+            TransactionReceipt,
+            TransactionDetailed,
+            TransactionSignature,
+            TransactionParameter,
+            Web3,
+            Web3Provider,
+        > {
+            AddressBook?: AddressBookState<ChainId>
+            Hub?: HubState<ChainId, SchemaType, GasOption>
+            IdentityService?: IdentityServiceState
+            NameService?: NameServiceState<ChainId>
+            RiskWarning?: RiskWarningState
+            Settings?: SettingsState
+            Token?: TokenState<ChainId, SchemaType>
+            Transaction?: TransactionState<ChainId, Transaction>
+            TransactionFormatter?: TransactionFormatterState<ChainId, TransactionParameter, Transaction>
+            TransactionWatcher?: TransactionWatcherState<ChainId, Transaction>
+            Connection?: ConnectionState<
+                ChainId,
+                SchemaType,
+                ProviderType,
+                Signature,
+                Block,
+                Transaction,
+                TransactionReceipt,
+                TransactionDetailed,
+                TransactionSignature,
+                Web3,
+                Web3Provider
+            >
+            Provider?: ProviderState<ChainId, ProviderType, NetworkType>
+            Wallet?: WalletState
+            Others?: OthersState<ChainId, SchemaType, ProviderType, NetworkType>
         }
     }
     export namespace UI {
-        export interface NetworkIconClickBaitProps {
-            network: NetworkDescriptor
-            provider?: ProviderDescriptor
+        export interface NetworkIconClickBaitProps<ChainId, ProviderType, NetworkType> {
+            network: NetworkDescriptor<ChainId, NetworkType>
+            provider?: ProviderDescriptor<ChainId, ProviderType>
             children?: React.ReactNode
-            /** Invoke if network icon clicked */
-            onClick?: (network: NetworkDescriptor, provider?: ProviderDescriptor) => void
-            /** Invoke if connection submit */
-            onSubmit?: (network: NetworkDescriptor, provider?: ProviderDescriptor, result?: ConnectionResult) => void
-        }
-        export interface ProviderIconClickBaitProps {
-            network: NetworkDescriptor
-            provider: ProviderDescriptor
+            onClick?: (
+                network: NetworkDescriptor<ChainId, NetworkType>,
+                provider?: ProviderDescriptor<ChainId, ProviderType>,
+            ) => void
+        }
+        export interface ProviderIconClickBaitProps<ChainId, ProviderType, NetworkType> {
+            network: NetworkDescriptor<ChainId, NetworkType>
+            provider: ProviderDescriptor<ChainId, ProviderType>
             children?: React.ReactNode
-            /** Invoke if provider icon clicked */
-            onClick?: (network: NetworkDescriptor, provider: ProviderDescriptor) => void
-            /** Invoke if connection submit */
-            onSubmit?: (network: NetworkDescriptor, provider: ProviderDescriptor, result?: ConnectionResult) => void
-        }
-        export interface ApplicationCategoryIconClickBaitProps {
-            category: ApplicationCategoryDescriptor
+            onClick?: (
+                network: NetworkDescriptor<ChainId, NetworkType>,
+                provider: ProviderDescriptor<ChainId, ProviderType>,
+            ) => void
         }
         export interface AddressFormatterProps {
             address: string
             size?: number
         }
-        export interface UI {
+        export interface UI<ChainId, ProviderType, NetworkType> {
             SelectNetworkMenu?: {
                 /** This UI will receive network icon as children component, and the plugin may hook click handle on it. */
-                NetworkIconClickBait?: Plugin.InjectUIReact<UI.NetworkIconClickBaitProps>
+                NetworkIconClickBait?: Plugin.InjectUIReact<
+                    UI.NetworkIconClickBaitProps<ChainId, ProviderType, NetworkType>
+                >
             }
             SelectProviderDialog?: {
                 /** This UI will receive network icon as children component, and the plugin may hook click handle on it. */
-                NetworkIconClickBait?: Plugin.InjectUIReact<UI.NetworkIconClickBaitProps>
+                NetworkIconClickBait?: Plugin.InjectUIReact<
+                    UI.NetworkIconClickBaitProps<ChainId, ProviderType, NetworkType>
+                >
                 /** This UI will receive provider icon as children component, and the plugin may hook click handle on it. */
-                ProviderIconClickBait?: Plugin.InjectUIReact<UI.ProviderIconClickBaitProps>
-            }
-            WalletStatusDialog?: {
-                /** This UI will receive application category icon as children component, and the plugin may hook click handle on it. */
-                ApplicationCategoryIconClickBait?: Plugin.InjectUIReact<UI.ApplicationCategoryIconClickBaitProps>
+                ProviderIconClickBait?: Plugin.InjectUIReact<
+                    UI.ProviderIconClickBaitProps<ChainId, ProviderType, NetworkType>
+                >
             }
         }
     }
diff --git a/packages/plugin-infra/src/web3/Context.tsx b/packages/plugin-infra/src/web3/Context.tsx
index be8fd9e12190..b12bf58f86bf 100644
--- a/packages/plugin-infra/src/web3/Context.tsx
+++ b/packages/plugin-infra/src/web3/Context.tsx
@@ -1,107 +1,62 @@
-import React, { createContext, useContext, useMemo } from 'react'
-import { createContainer } from 'unstated-next'
-import { useSubscription } from 'use-subscription'
-import { CurrencyType, NetworkPluginID, Web3Plugin } from '../web3-types'
-import { createConstantSubscription } from '@masknet/shared-base'
-
-// constant subscriptions
-const ZERO = createConstantSubscription(0)
-const ZERO_STRING = createConstantSubscription('0')
-const USD_CURRENCY = createConstantSubscription(CurrencyType.USD)
-const EMPTY_STRING = createConstantSubscription('')
-const EMPTY_ARRAY = createConstantSubscription([])
-const EMPTY_OBJECT = createConstantSubscription({})
-const FALSE = createConstantSubscription(false)
-const NULL = createConstantSubscription(null)
+import React, { createContext, useContext } from 'react'
+import { NetworkPluginID } from '@masknet/web3-shared-base'
+import { EMPTY_OBJECT } from '@masknet/shared-base'
+import type { Web3Helper } from '../web3-helpers'
+
+interface Web3Context<T extends NetworkPluginID> {
+    account?: string
+    chainId?: Web3Helper.Definition[T]['ChainId']
+    networkType?: Web3Helper.Definition[T]['NetworkType']
+    providerType?: Web3Helper.Definition[T]['ProviderType']
+}
 
 const PluginIDContext = createContext(NetworkPluginID.PLUGIN_EVM)
 
-const PluginsWeb3Context = createContext<Record<string, Web3Plugin.ObjectCapabilities.Capabilities>>(null!)
-
-function usePluginsWeb3Context() {
-    const context = useContext(PluginsWeb3Context)
-    if (!context) throw new Error('This hook should be used in a provider.')
-    return context
-}
-
-function usePluginWeb3State(pluginID: string, context: Record<string, Web3Plugin.ObjectCapabilities.Capabilities>) {
-    const pluginContext = context[pluginID]
+const PluginWeb3Context = createContext<Web3Context<NetworkPluginID>>(EMPTY_OBJECT)
 
-    const { Shared, Utils } = pluginContext ?? {}
-    const allowTestnet = useSubscription(Shared?.allowTestnet ?? FALSE)
-    const chainId = useSubscription(Shared?.chainId ?? ZERO)
-    const account = useSubscription(Shared?.account ?? EMPTY_STRING)
-    const networkType = useSubscription(Shared?.networkType ?? EMPTY_STRING)
-    const providerType = useSubscription(Shared?.providerType ?? EMPTY_STRING)
-    const assetType = useSubscription(Shared?.assetType ?? EMPTY_STRING)
-    const nameType = useSubscription(Shared?.nameType ?? EMPTY_STRING)
-    const collectibleType = useSubscription(Shared?.collectibleType ?? EMPTY_STRING)
-    const transactionType = useSubscription(Shared?.transactionType ?? EMPTY_STRING)
-    const currencyType = useSubscription(Shared?.currencyType ?? USD_CURRENCY)
-    const prices = useSubscription(Shared?.prices ?? NULL)
-    const walletPrimary = useSubscription(Shared?.walletPrimary ?? NULL)
-    const wallets = useSubscription(Shared?.wallets ?? EMPTY_ARRAY)
-    const fungibleTokens = useSubscription(Shared?.fungibleTokens ?? EMPTY_ARRAY)
-    const nonFungibleTokens = useSubscription(Shared?.nonFungibleTokens ?? EMPTY_ARRAY)
+const PluginsWeb3Context = createContext<Record<NetworkPluginID, Web3Helper.Web3State<NetworkPluginID>>>(null!)
 
-    return {
-        allowTestnet,
-        chainId,
-        account,
-        networkType,
-        providerType,
-        assetType,
-        nameType,
-        collectibleType,
-        transactionType,
-        currencyType,
-        prices,
-        walletPrimary,
-        wallets,
-        fungibleTokens,
-        nonFungibleTokens,
-    }
+export function PluginWeb3ContextProvider<T extends NetworkPluginID>({
+    pluginID,
+}: { pluginID: T } & React.ProviderProps<Web3Context<T>>) {
+    return <PluginWeb3Context.Provider value={EMPTY_OBJECT} />
 }
 
-function usePluginsWeb3State() {
-    const context = usePluginsWeb3Context()
-    const pluginStateEVM = usePluginWeb3State(NetworkPluginID.PLUGIN_EVM, context)
-    const pluginStateFlow = usePluginWeb3State(NetworkPluginID.PLUGIN_FLOW, context)
-    const pluginStateSolana = usePluginWeb3State(NetworkPluginID.PLUGIN_SOLANA, context)
-    return useMemo(
-        () => ({
-            [NetworkPluginID.PLUGIN_EVM]: pluginStateEVM,
-            [NetworkPluginID.PLUGIN_FLOW]: pluginStateFlow,
-            [NetworkPluginID.PLUGIN_SOLANA]: pluginStateSolana,
-        }),
-        [pluginStateEVM, pluginStateFlow, pluginStateSolana],
+export function PluginsWeb3ContextProvider<T extends NetworkPluginID>({
+    pluginID,
+    value,
+    children,
+}: { pluginID: T } & React.ProviderProps<Record<NetworkPluginID, Web3Helper.Web3State<T>>>) {
+    return (
+        <PluginIDContext.Provider value={pluginID}>
+            <PluginsWeb3Context.Provider value={value}>
+                <PluginWeb3Context.Provider value={EMPTY_OBJECT}>{children}</PluginWeb3Context.Provider>
+            </PluginsWeb3Context.Provider>
+        </PluginIDContext.Provider>
     )
 }
 
-export function useCurrentWeb3NetworkPluginID() {
-    return useContext(PluginIDContext)
+export function useCurrentWeb3NetworkPluginID(expectedPluginID?: NetworkPluginID) {
+    const pluginID = useContext(PluginIDContext)
+    return expectedPluginID ?? pluginID
 }
 
-const PluginsWeb3StateContext = createContainer(usePluginsWeb3State)
+export function useCurrentWeb3NetworkAccount<T extends NetworkPluginID>(pluginID?: T) {
+    const pluginWeb3Context = useContext(PluginWeb3Context)
+    return pluginWeb3Context.account as string | undefined
+}
 
-export const usePluginsWeb3StateContext = PluginsWeb3StateContext.useContainer
+export function useCurrentWeb3NetworkChainId<T extends NetworkPluginID>(pluginID?: T) {
+    const pluginWeb3Context = useContext(PluginWeb3Context)
+    return pluginWeb3Context.chainId as Web3Helper.Definition[T]['ChainId'] | undefined
+}
 
-export function usePluginWeb3StateContext(expectedPluginID?: NetworkPluginID) {
-    const pluginID = useCurrentWeb3NetworkPluginID()
-    const pluginsWeb3State = usePluginsWeb3StateContext()
-    return pluginsWeb3State[expectedPluginID ?? pluginID] ?? {}
+export function useCurrentWeb3NetworkProviderType<T extends NetworkPluginID>(pluginID?: T) {
+    const pluginWeb3Context = useContext(PluginWeb3Context)
+    return pluginWeb3Context.providerType as Web3Helper.Definition[T]['ProviderType'] | undefined
 }
 
-export function PluginsWeb3ContextProvider({
-    pluginID,
-    value,
-    children,
-}: { pluginID: string } & React.ProviderProps<Record<string, Web3Plugin.ObjectCapabilities.Capabilities>>) {
-    return (
-        <PluginIDContext.Provider value={pluginID as NetworkPluginID}>
-            <PluginsWeb3Context.Provider value={value}>
-                <PluginsWeb3StateContext.Provider>{children}</PluginsWeb3StateContext.Provider>
-            </PluginsWeb3Context.Provider>
-        </PluginIDContext.Provider>
-    )
+export function useCurrentWeb3NetworkNetworkType<T extends NetworkPluginID>(pluginID?: T) {
+    const pluginWeb3Context = useContext(PluginWeb3Context)
+    return pluginWeb3Context.networkType as Web3Helper.Definition[T]['NetworkType'] | undefined
 }
diff --git a/packages/plugin-infra/src/web3/EVM/index.ts b/packages/plugin-infra/src/web3/EVM/index.ts
new file mode 100644
index 000000000000..36d592ccec0b
--- /dev/null
+++ b/packages/plugin-infra/src/web3/EVM/index.ts
@@ -0,0 +1,25 @@
+export * from './useERC165'
+export * from './useERC20TokenAllowance'
+export * from './useERC20TokenTotalSupply'
+export * from './useERC20TokenApproveCallback'
+export * from './useERC20TokenTransferCallback'
+export * from './useERC721TokenByIndex'
+export * from './useERC721ContractIsApproveForAll'
+export * from './useERC721ContractSetApproveForAllCallback'
+export * from './useERC721TokenTransferCallback'
+export * from './useMulticall'
+export * from './useNativeTokenTransferCallback'
+export * from './useNativeTokenWrapperCallback'
+export * from './useTokenTransferCallback'
+export * from './useTransactionState'
+export * from './useTransactionCallback'
+export * from './useGetPastLogsParams'
+export * from './useGasLimit'
+
+export * from './useContract'
+export * from './useERC20TokenContract'
+export * from './useERC721TokenContract'
+export * from './useERC721TokenContracts'
+export * from './useERC1155TokenContract'
+export * from './useWrappedEtherContract'
+export * from './useNonFungibleOwnerTokens'
diff --git a/packages/web3-shared/evm/contracts/useBalanceChecker.ts b/packages/plugin-infra/src/web3/EVM/useBalanceChecker.ts
similarity index 57%
rename from packages/web3-shared/evm/contracts/useBalanceChecker.ts
rename to packages/plugin-infra/src/web3/EVM/useBalanceChecker.ts
index 91c4059b9dff..e2612a32c66a 100644
--- a/packages/web3-shared/evm/contracts/useBalanceChecker.ts
+++ b/packages/plugin-infra/src/web3/EVM/useBalanceChecker.ts
@@ -1,11 +1,10 @@
+import type { AbiItem } from 'web3-utils'
 import BalanceCheckerABI from '@masknet/web3-contracts/abis/BalanceChecker.json'
 import type { BalanceChecker } from '@masknet/web3-contracts/types/BalanceChecker'
-import type { AbiItem } from 'web3-utils'
-import { useEthereumConstants } from '../constants'
-import { useContract } from '../hooks/useContract'
-import type { ChainId } from '../types'
+import { ChainId, useEthereumConstants } from '@masknet/web3-shared-evm'
+import { useContract } from './useContract'
 
 export function useBalanceCheckerContract(chainId?: ChainId) {
     const { BALANCE_CHECKER_ADDRESS } = useEthereumConstants(chainId)
-    return useContract<BalanceChecker>(BALANCE_CHECKER_ADDRESS, BalanceCheckerABI as AbiItem[], chainId)
+    return useContract<BalanceChecker>(chainId, BALANCE_CHECKER_ADDRESS, BalanceCheckerABI as AbiItem[])
 }
diff --git a/packages/plugin-infra/src/web3/EVM/useContract.ts b/packages/plugin-infra/src/web3/EVM/useContract.ts
new file mode 100644
index 000000000000..f28a77bca828
--- /dev/null
+++ b/packages/plugin-infra/src/web3/EVM/useContract.ts
@@ -0,0 +1,37 @@
+import { useMemo } from 'react'
+import type { AbiItem } from 'web3-utils'
+import { EMPTY_LIST } from '@masknet/shared-base'
+import { NetworkPluginID } from '@masknet/web3-shared-base'
+import { ChainId, createContract } from '@masknet/web3-shared-evm'
+import type { BaseContract } from '@masknet/web3-contracts/types/types'
+import { useWeb3 } from '../useWeb3'
+
+/**
+ * Create a contract which will forward its all transactions to the
+ * EthereumService in the background page and decode the result of calls automatically
+ * @param address
+ * @param ABI
+ * @param chainId
+ */
+export function useContract<T extends BaseContract>(chainId?: ChainId, address = '', ABI: AbiItem[] = EMPTY_LIST) {
+    const web3 = useWeb3(NetworkPluginID.PLUGIN_EVM, { chainId })
+    return useMemo(() => createContract<T>(web3, address, ABI), [web3, address, ABI])
+}
+
+/**
+ * Create many contracts with same ABI
+ * @param listOfAddress
+ * @param ABI
+ * @param chainId
+ */
+export function useContracts<T extends BaseContract>(
+    chainId?: ChainId,
+    listOfAddress: string[] = [],
+    ABI: AbiItem[] = [],
+) {
+    const web3 = useWeb3(NetworkPluginID.PLUGIN_EVM, { chainId })
+    return useMemo(
+        () => listOfAddress.map((address) => createContract<T>(web3, address, ABI)).filter(Boolean) as T[],
+        [web3, JSON.stringify(listOfAddress), ABI],
+    )
+}
diff --git a/packages/plugin-infra/src/web3/EVM/useERC1155TokenContract.ts b/packages/plugin-infra/src/web3/EVM/useERC1155TokenContract.ts
new file mode 100644
index 000000000000..54d8a91b7f7f
--- /dev/null
+++ b/packages/plugin-infra/src/web3/EVM/useERC1155TokenContract.ts
@@ -0,0 +1,8 @@
+import type { AbiItem } from 'web3-utils'
+import ERC1155 from '@masknet/web3-contracts/abis/ERC1155.json'
+import type { ChainId } from '@masknet/web3-shared-evm'
+import { useContract } from './useContract'
+
+export function useERC1155TokenContract(chainId: ChainId, address: string) {
+    return useContract(chainId, address, ERC1155 as AbiItem[])
+}
diff --git a/packages/web3-shared/evm/hooks/useERC165.ts b/packages/plugin-infra/src/web3/EVM/useERC165.ts
similarity index 63%
rename from packages/web3-shared/evm/hooks/useERC165.ts
rename to packages/plugin-infra/src/web3/EVM/useERC165.ts
index 197baba2a3fd..7475ec73c873 100644
--- a/packages/web3-shared/evm/hooks/useERC165.ts
+++ b/packages/plugin-infra/src/web3/EVM/useERC165.ts
@@ -1,20 +1,17 @@
 import { useAsyncRetry } from 'react-use'
 import type { BaseContract } from '@masknet/web3-contracts/types/types'
-import { useAccount } from './useAccount'
 
 export const ERC165_INTERFACE_ID = '0x01ffc9a7'
 
-export function useERC165<T extends BaseContract>(contract: T | null, address: string, interfaceId: string) {
-    const account = useAccount()
-
+export function useERC165<T extends BaseContract>(contract: T | null, address?: string, interfaceId?: string) {
     return useAsyncRetry<boolean>(async () => {
-        if (!contract) return false
+        if (!contract || !address || !interfaceId) return false
         try {
-            const isERC165 = await contract.methods.supportsInterface(ERC165_INTERFACE_ID).call({ from: account })
-            const isVerify = await contract.methods.supportsInterface(interfaceId).call({ from: account })
+            const isERC165 = await contract.methods.supportsInterface(ERC165_INTERFACE_ID).call()
+            const isVerify = await contract.methods.supportsInterface(interfaceId).call()
             return isERC165 && isVerify
         } catch {
             return false
         }
-    }, [account, address, interfaceId])
+    }, [address, interfaceId])
 }
diff --git a/packages/plugin-infra/src/web3/EVM/useERC165Contract.ts b/packages/plugin-infra/src/web3/EVM/useERC165Contract.ts
new file mode 100644
index 000000000000..60b725bd8d3c
--- /dev/null
+++ b/packages/plugin-infra/src/web3/EVM/useERC165Contract.ts
@@ -0,0 +1,9 @@
+import type { AbiItem } from 'web3-utils'
+import ERC165ABI from '@masknet/web3-contracts/abis/ERC165.json'
+import type { ERC165 } from '@masknet/web3-contracts/types/ERC165'
+import type { ChainId } from '@masknet/web3-shared-evm'
+import { useContract } from './useContract'
+
+export function useERC165Contract(chainId?: ChainId, address?: string) {
+    return useContract<ERC165>(chainId, address, ERC165ABI as AbiItem[])
+}
diff --git a/packages/web3-shared/evm/hooks/useERC20TokenAllowance.ts b/packages/plugin-infra/src/web3/EVM/useERC20TokenAllowance.ts
similarity index 53%
rename from packages/web3-shared/evm/hooks/useERC20TokenAllowance.ts
rename to packages/plugin-infra/src/web3/EVM/useERC20TokenAllowance.ts
index 57c185906349..ebcd6cd1a15a 100644
--- a/packages/web3-shared/evm/hooks/useERC20TokenAllowance.ts
+++ b/packages/plugin-infra/src/web3/EVM/useERC20TokenAllowance.ts
@@ -1,13 +1,14 @@
-import { useBeatRetry } from '@masknet/web3-shared-base'
+import { NetworkPluginID } from '@masknet/web3-shared-base'
 import type { AsyncStateRetry } from 'react-use/lib/useAsyncRetry'
-import { useERC20TokenContract } from '../contracts/useERC20TokenContract'
-import { useAccount } from './useAccount'
-import { useChainId } from './useChainId'
+import { useAccount } from '../useAccount'
+import { useBeatRetry } from '../useBeat'
+import { useChainId } from '../useChainId'
+import { useERC20TokenContract } from './useERC20TokenContract'
 
 export function useERC20TokenAllowance(address?: string, spender?: string): AsyncStateRetry<string> {
-    const account = useAccount()
-    const chainId = useChainId()
-    const erc20Contract = useERC20TokenContract(address)
+    const account = useAccount(NetworkPluginID.PLUGIN_EVM)
+    const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
+    const erc20Contract = useERC20TokenContract(chainId, address)
     return useBeatRetry(
         async () => {
             if (!account || !spender || !erc20Contract) return '0'
diff --git a/packages/web3-shared/evm/hooks/useERC20TokenApproveCallback.ts b/packages/plugin-infra/src/web3/EVM/useERC20TokenApproveCallback.ts
similarity index 86%
rename from packages/web3-shared/evm/hooks/useERC20TokenApproveCallback.ts
rename to packages/plugin-infra/src/web3/EVM/useERC20TokenApproveCallback.ts
index 2e52b2049043..8302173b3fad 100644
--- a/packages/web3-shared/evm/hooks/useERC20TokenApproveCallback.ts
+++ b/packages/plugin-infra/src/web3/EVM/useERC20TokenApproveCallback.ts
@@ -1,13 +1,14 @@
 import type { NonPayableTx } from '@masknet/web3-contracts/types/types'
-import { isLessThan, toFixed } from '@masknet/web3-shared-base'
+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 '../contracts/useERC20TokenContract'
-import { TransactionEventType } from '../types'
-import { useAccount } from './useAccount'
+import { useERC20TokenContract } from './useERC20TokenContract'
 import { useERC20TokenAllowance } from './useERC20TokenAllowance'
-import { useERC20TokenBalance } from './useERC20TokenBalance'
+import { useChainId } from '../useChainId'
+import { useAccount } from '../useAccount'
+import { useFungibleTokenBalance } from '../../entry-web3'
+import { TransactionEventType } from '@masknet/web3-shared-evm'
 
 const MaxUint256 = toFixed('0xffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff')
 
@@ -21,8 +22,9 @@ export enum ApproveStateType {
 }
 
 export function useERC20TokenApproveCallback(address?: string, amount?: string, spender?: string) {
-    const account = useAccount()
-    const erc20Contract = useERC20TokenContract(address)
+    const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
+    const account = useAccount(NetworkPluginID.PLUGIN_EVM)
+    const erc20Contract = useERC20TokenContract(chainId, address)
 
     // read the approved information from the chain
     const {
@@ -30,7 +32,7 @@ export function useERC20TokenApproveCallback(address?: string, amount?: string,
         loading: loadingBalance,
         error: errorBalance,
         retry: revalidateBalance,
-    } = useERC20TokenBalance(address)
+    } = useFungibleTokenBalance(NetworkPluginID.PLUGIN_EVM, address)
     const {
         value: allowance = '0',
         loading: loadingAllowance,
diff --git a/packages/plugin-infra/src/web3/EVM/useERC20TokenBytes32Contract.ts b/packages/plugin-infra/src/web3/EVM/useERC20TokenBytes32Contract.ts
new file mode 100644
index 000000000000..8a2e095b3ec5
--- /dev/null
+++ b/packages/plugin-infra/src/web3/EVM/useERC20TokenBytes32Contract.ts
@@ -0,0 +1,13 @@
+import type { AbiItem } from 'web3-utils'
+import ERC20Bytes32ABI from '@masknet/web3-contracts/abis/ERC20Bytes32.json'
+import type { ERC20Bytes32 } from '@masknet/web3-contracts/types/ERC20Bytes32'
+import type { ChainId } from '@masknet/web3-shared-evm'
+import { useContract, useContracts } from './useContract'
+
+export function useERC20TokenBytes32Contract(chainId?: ChainId, address?: string) {
+    return useContract<ERC20Bytes32>(chainId, address, ERC20Bytes32ABI as AbiItem[])
+}
+
+export function useERC20TokenBytes32Contracts(chainId?: ChainId, listOfAddress: string[] = []) {
+    return useContracts<ERC20Bytes32>(chainId, listOfAddress, ERC20Bytes32ABI as AbiItem[])
+}
diff --git a/packages/plugin-infra/src/web3/EVM/useERC20TokenContract.ts b/packages/plugin-infra/src/web3/EVM/useERC20TokenContract.ts
new file mode 100644
index 000000000000..777c9206a760
--- /dev/null
+++ b/packages/plugin-infra/src/web3/EVM/useERC20TokenContract.ts
@@ -0,0 +1,13 @@
+import type { AbiItem } from 'web3-utils'
+import ERC20ABI from '@masknet/web3-contracts/abis/ERC20.json'
+import type { ERC20 } from '@masknet/web3-contracts/types/ERC20'
+import type { ChainId } from '@masknet/web3-shared-evm'
+import { useContract, useContracts } from './useContract'
+
+export function useERC20TokenContract(chainId?: ChainId, address?: string) {
+    return useContract<ERC20>(chainId, address, ERC20ABI as AbiItem[])
+}
+
+export function useERC20TokenContracts(chainId?: ChainId, listOfAddress: string[] = []) {
+    return useContracts<ERC20>(chainId, listOfAddress, ERC20ABI as AbiItem[])
+}
diff --git a/packages/plugin-infra/src/web3/EVM/useERC20TokenTotalSupply.ts b/packages/plugin-infra/src/web3/EVM/useERC20TokenTotalSupply.ts
new file mode 100644
index 000000000000..0ab09f9e5685
--- /dev/null
+++ b/packages/plugin-infra/src/web3/EVM/useERC20TokenTotalSupply.ts
@@ -0,0 +1,13 @@
+import { useAsyncRetry } from 'react-use'
+import { NetworkPluginID } from '@masknet/web3-shared-base'
+import { useChainId } from '../useChainId'
+import { useERC20TokenContract } from './useERC20TokenContract'
+
+export function useERC20TokenTotalSupply(address?: string) {
+    const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
+    const erc20TokenContract = useERC20TokenContract(chainId, address)
+    return useAsyncRetry(async () => {
+        if (!erc20TokenContract) return
+        return erc20TokenContract?.methods.totalSupply().call()
+    }, [chainId, erc20TokenContract])
+}
diff --git a/packages/web3-shared/evm/hooks/useERC20TokenTransferCallback.ts b/packages/plugin-infra/src/web3/EVM/useERC20TokenTransferCallback.ts
similarity index 75%
rename from packages/web3-shared/evm/hooks/useERC20TokenTransferCallback.ts
rename to packages/plugin-infra/src/web3/EVM/useERC20TokenTransferCallback.ts
index 3af617ce48fa..0c726de4236d 100644
--- a/packages/web3-shared/evm/hooks/useERC20TokenTransferCallback.ts
+++ b/packages/plugin-infra/src/web3/EVM/useERC20TokenTransferCallback.ts
@@ -1,14 +1,15 @@
-import type { NonPayableTx } from '@masknet/web3-contracts/types/types'
-import { isGreaterThan, isZero } from '@masknet/web3-shared-base'
 import { useAsyncFn } from 'react-use'
-import { EthereumAddress } from 'wallet.ts'
-import { useERC20TokenContract } from '../contracts/useERC20TokenContract'
-import { GasConfig, TransactionEventType } from '../types'
-import { useAccount } from './useAccount'
+import type { NonPayableTx } from '@masknet/web3-contracts/types/types'
+import { isGreaterThan, isZero, NetworkPluginID } from '@masknet/web3-shared-base'
+import { GasConfig, TransactionEventType, isValidAddress } from '@masknet/web3-shared-evm'
+import { useERC20TokenContract } from './useERC20TokenContract'
+import { useAccount } from '../useAccount'
+import { useChainId } from '../useChainId'
 
 export function useERC20TokenTransferCallback(address?: string, amount?: string, recipient?: string) {
-    const account = useAccount()
-    const erc20Contract = useERC20TokenContract(address)
+    const account = useAccount(NetworkPluginID.PLUGIN_EVM)
+    const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
+    const erc20Contract = useERC20TokenContract(chainId, address)
 
     return useAsyncFn(
         async (amount?: string, recipient?: string, gasConfig?: GasConfig) => {
@@ -17,7 +18,7 @@ export function useERC20TokenTransferCallback(address?: string, amount?: string,
             }
 
             // error: invalid recipient address
-            if (!EthereumAddress.isValid(recipient)) return
+            if (!isValidAddress(recipient)) return
 
             // error: insufficient balance
             const balance = await erc20Contract.methods.balanceOf(account).call()
diff --git a/packages/web3-shared/evm/hooks/useERC721ContractIsApproveForAll.ts b/packages/plugin-infra/src/web3/EVM/useERC721ContractIsApproveForAll.ts
similarity index 65%
rename from packages/web3-shared/evm/hooks/useERC721ContractIsApproveForAll.ts
rename to packages/plugin-infra/src/web3/EVM/useERC721ContractIsApproveForAll.ts
index 78e5d59d05b2..9b0afb34c568 100644
--- a/packages/web3-shared/evm/hooks/useERC721ContractIsApproveForAll.ts
+++ b/packages/plugin-infra/src/web3/EVM/useERC721ContractIsApproveForAll.ts
@@ -1,6 +1,8 @@
 import { useAsyncRetry } from 'react-use'
-import { useERC721TokenContract } from '../contracts/useERC721TokenContract'
-import { safeNonPayableTransactionCall } from '../utils'
+import { NetworkPluginID } from '@masknet/web3-shared-base'
+import { safeNonPayableTransactionCall } from '@masknet/web3-shared-evm'
+import { useERC721TokenContract } from './useERC721TokenContract'
+import { useChainId } from '../useChainId'
 
 /**
  * @param contractAddress NFT contract address.
@@ -13,7 +15,8 @@ export function useERC721ContractIsApproveForAll(
     owner: string | undefined,
     operator: string | undefined,
 ) {
-    const erc721TokenContract = useERC721TokenContract(contractAddress)
+    const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
+    const erc721TokenContract = useERC721TokenContract(chainId, contractAddress)
     return useAsyncRetry(async () => {
         if (!erc721TokenContract || !owner || !operator) return
         return safeNonPayableTransactionCall(erc721TokenContract.methods.isApprovedForAll(owner, operator))
diff --git a/packages/web3-shared/evm/hooks/useERC721ContractSetApproveForAllCallback.ts b/packages/plugin-infra/src/web3/EVM/useERC721ContractSetApproveForAllCallback.ts
similarity index 75%
rename from packages/web3-shared/evm/hooks/useERC721ContractSetApproveForAllCallback.ts
rename to packages/plugin-infra/src/web3/EVM/useERC721ContractSetApproveForAllCallback.ts
index 99c2cf200196..5f9cf4bc03e9 100644
--- a/packages/web3-shared/evm/hooks/useERC721ContractSetApproveForAllCallback.ts
+++ b/packages/plugin-infra/src/web3/EVM/useERC721ContractSetApproveForAllCallback.ts
@@ -1,9 +1,10 @@
 import type { NonPayableTx } from '@masknet/web3-contracts/types/types'
+import { NetworkPluginID } from '@masknet/web3-shared-base'
+import { TransactionEventType } from '@masknet/web3-shared-evm'
 import { useAsyncFn } from 'react-use'
-import { useERC721TokenContract } from '../contracts'
-import { TransactionEventType } from '../types'
-import { useAccount } from './useAccount'
-import { useChainId } from './useChainId'
+import { useChainId } from '../../entry-web3'
+import { useAccount } from '../useAccount'
+import { useERC721TokenContract } from './useERC721TokenContract'
 
 /**
  * @param contractAddress NFT contract Address.
@@ -15,9 +16,9 @@ export function useERC721ContractSetApproveForAllCallback(
     operator: string | undefined,
     approved: boolean,
 ) {
-    const account = useAccount()
-    const chainId = useChainId()
-    const erc721TokenContract = useERC721TokenContract(contractAddress)
+    const account = useAccount(NetworkPluginID.PLUGIN_EVM)
+    const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
+    const erc721TokenContract = useERC721TokenContract(chainId, contractAddress)
 
     return useAsyncFn(async () => {
         if (!erc721TokenContract || !contractAddress || !operator) {
diff --git a/packages/plugin-infra/src/web3/EVM/useERC721TokenByIndex.ts b/packages/plugin-infra/src/web3/EVM/useERC721TokenByIndex.ts
new file mode 100644
index 000000000000..faecedc68444
--- /dev/null
+++ b/packages/plugin-infra/src/web3/EVM/useERC721TokenByIndex.ts
@@ -0,0 +1,19 @@
+import { useAsync } from 'react-use'
+import { NetworkPluginID, NonFungibleToken } from '@masknet/web3-shared-base'
+import type { ChainId, SchemaType } from '@masknet/web3-shared-evm'
+import type { AsyncState } from 'react-use/lib/useAsyncFn'
+import { useERC721TokenContract } from './useERC721TokenContract'
+import { useChainId } from '../useChainId'
+
+export function useERC721TokenByIndex(
+    token?: NonFungibleToken<ChainId, SchemaType.ERC721>,
+    index = 0,
+): AsyncState<string | undefined> {
+    const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
+    const erc721Contract = useERC721TokenContract(chainId, token?.address)
+
+    return useAsync(async () => {
+        if (!erc721Contract) return
+        return erc721Contract.methods.tokenByIndex(index).call()
+    }, [chainId, erc721Contract, index])
+}
diff --git a/packages/plugin-infra/src/web3/EVM/useERC721TokenContract.ts b/packages/plugin-infra/src/web3/EVM/useERC721TokenContract.ts
new file mode 100644
index 000000000000..c413e4ada196
--- /dev/null
+++ b/packages/plugin-infra/src/web3/EVM/useERC721TokenContract.ts
@@ -0,0 +1,9 @@
+import type { AbiItem } from 'web3-utils'
+import ERC721ABI from '@masknet/web3-contracts/abis/ERC721.json'
+import type { ERC721 } from '@masknet/web3-contracts/types/ERC721'
+import type { ChainId } from '@masknet/web3-shared-evm'
+import { useContract } from './useContract'
+
+export function useERC721TokenContract(chainId?: ChainId, address?: string) {
+    return useContract<ERC721>(chainId, address, ERC721ABI as AbiItem[])
+}
diff --git a/packages/plugin-infra/src/web3/EVM/useERC721TokenContracts.ts b/packages/plugin-infra/src/web3/EVM/useERC721TokenContracts.ts
new file mode 100644
index 000000000000..69d72406262a
--- /dev/null
+++ b/packages/plugin-infra/src/web3/EVM/useERC721TokenContracts.ts
@@ -0,0 +1,9 @@
+import type { AbiItem } from 'web3-utils'
+import ERC721ABI from '@masknet/web3-contracts/abis/ERC721.json'
+import type { ERC721 } from '@masknet/web3-contracts/types/ERC721'
+import type { ChainId } from '@masknet/web3-shared-evm'
+import { useContracts } from './useContract'
+
+export function useERC721TokenContracts(chainId: ChainId, listOfAddress: string[] = []) {
+    return useContracts<ERC721>(chainId, listOfAddress, ERC721ABI as AbiItem[])
+}
diff --git a/packages/web3-shared/evm/hooks/useERC721TokenTransferCallback.ts b/packages/plugin-infra/src/web3/EVM/useERC721TokenTransferCallback.ts
similarity index 75%
rename from packages/web3-shared/evm/hooks/useERC721TokenTransferCallback.ts
rename to packages/plugin-infra/src/web3/EVM/useERC721TokenTransferCallback.ts
index 1078d9939bd8..35f02668d089 100644
--- a/packages/web3-shared/evm/hooks/useERC721TokenTransferCallback.ts
+++ b/packages/plugin-infra/src/web3/EVM/useERC721TokenTransferCallback.ts
@@ -1,21 +1,22 @@
-import type { NonPayableTx } from '@masknet/web3-contracts/types/types'
 import { useAsyncFn } from 'react-use'
-import { EthereumAddress } from 'wallet.ts'
-import { useERC721TokenContract } from '../contracts/useERC721TokenContract'
-import { GasConfig, TransactionEventType } from '../types'
-import { isSameAddress } from '../utils'
-import { useAccount } from './useAccount'
+import type { NonPayableTx } from '@masknet/web3-contracts/types/types'
+import { isSameAddress, NetworkPluginID } from '@masknet/web3-shared-base'
+import { isValidAddress, GasConfig, TransactionEventType } from '@masknet/web3-shared-evm'
+import { useERC721TokenContract } from './useERC721TokenContract'
+import { useAccount } from '../useAccount'
+import { useChainId } from '../useChainId'
 
 export function useERC721TokenTransferCallback(address?: string) {
-    const account = useAccount()
-    const erc721Contract = useERC721TokenContract(address)
+    const account = useAccount(NetworkPluginID.PLUGIN_EVM)
+    const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
+    const erc721Contract = useERC721TokenContract(chainId, address)
 
     return useAsyncFn(
         async (tokenId?: string, recipient?: string, gasConfig?: GasConfig) => {
             if (!account || !recipient || !tokenId || !erc721Contract) return
 
             // error: invalid recipient address
-            if (!EthereumAddress.isValid(recipient)) return
+            if (!isValidAddress(recipient)) return
 
             // error: invalid ownership
             const ownerOf = await erc721Contract.methods.ownerOf(tokenId).call()
diff --git a/packages/plugin-infra/src/web3/EVM/useGasLimit.ts b/packages/plugin-infra/src/web3/EVM/useGasLimit.ts
new file mode 100644
index 000000000000..d975a124f404
--- /dev/null
+++ b/packages/plugin-infra/src/web3/EVM/useGasLimit.ts
@@ -0,0 +1,51 @@
+import { useAsync } from 'react-use'
+import { unreachable } from '@dimensiondev/kit'
+import type { AsyncState } from 'react-use/lib/useAsyncFn'
+import { NetworkPluginID } from '@masknet/web3-shared-base'
+import { SchemaType } from '@masknet/web3-shared-evm'
+import { useERC20TokenContract } from './useERC20TokenContract'
+import { useERC721TokenContract } from './useERC721TokenContract'
+import { useWeb3 } from '../useWeb3'
+import { useAccount } from '../useAccount'
+import { useChainId } from '../useChainId'
+
+export function useGasLimit(
+    type?: SchemaType,
+    contractAddress?: string,
+    amount?: string,
+    recipient?: string,
+    tokenId?: string,
+): AsyncState<number> {
+    const web3 = useWeb3(NetworkPluginID.PLUGIN_EVM)
+    const account = useAccount(NetworkPluginID.PLUGIN_EVM)
+    const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
+    const erc20Contract = useERC20TokenContract(chainId, contractAddress)
+    const erc721Contract = useERC721TokenContract(chainId, contractAddress)
+
+    return useAsync(async () => {
+        if (!web3 || !recipient || type === undefined) return 0
+        if ((type === SchemaType.ERC20 && !amount) || !contractAddress) return 0
+        if ((type === SchemaType.ERC721 && !tokenId) || !contractAddress) return 0
+
+        switch (type) {
+            case SchemaType.Native:
+                return web3.eth.estimateGas({
+                    from: account,
+                    to: recipient,
+                    value: amount,
+                })
+            case SchemaType.ERC20:
+                return erc20Contract?.methods.transfer(recipient, amount ?? 0).estimateGas({
+                    from: account,
+                })
+            case SchemaType.ERC721:
+                return erc721Contract?.methods.transferFrom(account, recipient, tokenId ?? '').estimateGas({
+                    from: account,
+                })
+            case SchemaType.ERC1155:
+                throw new Error('To be implemented')
+            default:
+                unreachable(type)
+        }
+    }, [erc20Contract, type, amount, account, recipient, tokenId])
+}
diff --git a/packages/plugin-infra/src/web3/EVM/useGetPastLogsParams.ts b/packages/plugin-infra/src/web3/EVM/useGetPastLogsParams.ts
new file mode 100644
index 000000000000..63c4082a208e
--- /dev/null
+++ b/packages/plugin-infra/src/web3/EVM/useGetPastLogsParams.ts
@@ -0,0 +1,32 @@
+import { useMemo } from 'react'
+import { toHex } from 'web3-utils'
+import type { PastLogsOptions } from 'web3-core'
+
+// There's a getPastLogs block range limitation which differ from RPCs.
+//  So we need to split one large range request to multiple small ones.
+export function useGetPastLogsParams(
+    fromBlock: number | undefined,
+    currentBlock: number,
+    maxBlockRange: number,
+    params: Partial<PastLogsOptions>,
+) {
+    return useMemo(() => {
+        if (!fromBlock || fromBlock > currentBlock) return []
+        let count = 1
+        const queryParams = []
+        while (fromBlock + count * maxBlockRange < currentBlock) {
+            queryParams.push({
+                fromBlock: toHex(fromBlock + (count - 1) * maxBlockRange),
+                toBlock: toHex(fromBlock + count * maxBlockRange),
+                ...params,
+            })
+            count += 1
+        }
+        queryParams.push({
+            fromBlock: toHex(fromBlock + (count - 1) * maxBlockRange),
+            toBlock: toHex(currentBlock),
+            ...params,
+        })
+        return queryParams
+    }, [fromBlock, currentBlock, maxBlockRange, params])
+}
diff --git a/packages/web3-shared/evm/hooks/useMulticall.ts b/packages/plugin-infra/src/web3/EVM/useMulticall.ts
similarity index 92%
rename from packages/web3-shared/evm/hooks/useMulticall.ts
rename to packages/plugin-infra/src/web3/EVM/useMulticall.ts
index f05a80aecb2a..b5093df0d75e 100644
--- a/packages/web3-shared/evm/hooks/useMulticall.ts
+++ b/packages/plugin-infra/src/web3/EVM/useMulticall.ts
@@ -1,12 +1,12 @@
 import { useState, useCallback, useMemo } from 'react'
 import type { AbiOutput } from 'web3-utils'
-import type { ChainId, UnboxTransactionObject } from '../types'
+import { NetworkPluginID } from '@masknet/web3-shared-base'
+import { ChainId, decodeOutputString, UnboxTransactionObject } from '@masknet/web3-shared-evm'
 import type { BaseContract, NonPayableTx } from '@masknet/web3-contracts/types/types'
-import { useMulticallContract } from '../contracts/useMulticallContract'
-import { decodeOutputString } from '../utils'
-import { useWeb3 } from './useWeb3'
-import { useBlockNumber } from './useBlockNumber'
-import { useChainId } from './useChainId'
+import { useMulticallContract } from './useMulticallContract'
+import { useChainId } from '../useChainId'
+import { useBlockNumber } from '../useBlockNumber'
+import { useWeb3 } from '../useWeb3'
 
 // #region types
 // [target, gasLimit, callData]
@@ -103,9 +103,9 @@ export type MulticallState =
  * @param calls
  */
 export function useMulticallCallback(targetChainId?: ChainId, targetBlockNumber?: number) {
-    const currentChainId = useChainId()
+    const currentChainId = useChainId(NetworkPluginID.PLUGIN_EVM)
     const chainId = targetChainId ?? currentChainId
-    const { value: defaultBlockNumber = 0 } = useBlockNumber()
+    const { value: defaultBlockNumber = 0 } = useBlockNumber(NetworkPluginID.PLUGIN_EVM)
     const blockNumber = targetBlockNumber ?? defaultBlockNumber
     const multicallContract = useMulticallContract(chainId)
     const [multicallState, setMulticallState] = useState<MulticallState>({
@@ -113,7 +113,7 @@ export function useMulticallCallback(targetChainId?: ChainId, targetBlockNumber?
     })
     const multicallCallback = useCallback(
         async (calls: Call[], overrides?: NonPayableTx) => {
-            if (calls.length === 0 || !multicallContract) {
+            if (calls.length === 0 || !multicallContract || !chainId) {
                 setMulticallState({
                     type: MulticallStateType.UNKNOWN,
                 })
@@ -165,11 +165,10 @@ export function useMulticallStateDecoded<
     K extends keyof T['methods'],
     R extends UnboxTransactionObject<ReturnType<T['methods'][K]>>,
 >(contracts: T[], names: K[], state: MulticallState, chainId?: ChainId) {
-    const web3 = useWeb3({ chainId })
+    const web3 = useWeb3(NetworkPluginID.PLUGIN_EVM, { chainId })
     type Result = { succeed: boolean; gasUsed: string } & ({ error: any; value: null } | { error: null; value: R })
     return useMemo(() => {
-        if (state.type !== MulticallStateType.SUCCEED) return []
-        if (contracts.length !== state.results.length) return []
+        if (!web3 || state.type !== MulticallStateType.SUCCEED || contracts.length !== state.results.length) return []
         return state.results.map(([succeed, gasUsed, result], index): Result => {
             // the ignore formatter for better reading
             // prettier-ignore
diff --git a/packages/web3-shared/evm/contracts/useMulticallContract.ts b/packages/plugin-infra/src/web3/EVM/useMulticallContract.ts
similarity index 57%
rename from packages/web3-shared/evm/contracts/useMulticallContract.ts
rename to packages/plugin-infra/src/web3/EVM/useMulticallContract.ts
index 220e18523c7e..d3f8ec39f788 100644
--- a/packages/web3-shared/evm/contracts/useMulticallContract.ts
+++ b/packages/plugin-infra/src/web3/EVM/useMulticallContract.ts
@@ -1,11 +1,10 @@
+import type { AbiItem } from 'web3-utils'
 import MulticallABI from '@masknet/web3-contracts/abis/Multicall.json'
 import type { Multicall } from '@masknet/web3-contracts/types/Multicall'
-import type { AbiItem } from 'web3-utils'
-import { useEthereumConstants } from '../constants'
-import { useContract } from '../hooks/useContract'
-import type { ChainId } from '../types'
+import { ChainId, useEthereumConstants } from '@masknet/web3-shared-evm'
+import { useContract } from './useContract'
 
 export function useMulticallContract(chainId?: ChainId) {
     const { MULTICALL_ADDRESS } = useEthereumConstants(chainId)
-    return useContract<Multicall>(MULTICALL_ADDRESS, MulticallABI as AbiItem[], chainId)
+    return useContract<Multicall>(chainId, MULTICALL_ADDRESS, MulticallABI as AbiItem[])
 }
diff --git a/packages/web3-shared/evm/hooks/useNativeTokenTransferCallback.ts b/packages/plugin-infra/src/web3/EVM/useNativeTokenTransferCallback.ts
similarity index 79%
rename from packages/web3-shared/evm/hooks/useNativeTokenTransferCallback.ts
rename to packages/plugin-infra/src/web3/EVM/useNativeTokenTransferCallback.ts
index 4c598d8c543c..5729634a4cde 100644
--- a/packages/web3-shared/evm/hooks/useNativeTokenTransferCallback.ts
+++ b/packages/plugin-infra/src/web3/EVM/useNativeTokenTransferCallback.ts
@@ -1,20 +1,20 @@
-import { isGreaterThan, isZero } from '@masknet/web3-shared-base'
 import { useAsyncFn } from 'react-use'
 import { EthereumAddress } from 'wallet.ts'
 import { toHex } from 'web3-utils'
-import { GasConfig, TransactionEventType } from '../types'
-import { useAccount } from './useAccount'
-import { useChainId } from './useChainId'
-import { useWeb3 } from './useWeb3'
+import { isGreaterThan, isZero, NetworkPluginID } from '@masknet/web3-shared-base'
+import { GasConfig, TransactionEventType } from '@masknet/web3-shared-evm'
+import { useWeb3 } from '../useWeb3'
+import { useChainId } from '../useChainId'
+import { useAccount } from '../useAccount'
 
 export function useNativeTransferCallback() {
-    const web3 = useWeb3()
-    const account = useAccount()
-    const chainId = useChainId()
+    const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
+    const account = useAccount(NetworkPluginID.PLUGIN_EVM)
+    const web3 = useWeb3(NetworkPluginID.PLUGIN_EVM)
 
     return useAsyncFn(
         async (amount?: string, recipient?: string, gasConfig?: GasConfig, memo?: string) => {
-            if (!account || !recipient || !amount || isZero(amount)) return
+            if (!account || !recipient || !amount || isZero(amount) || !web3) return
 
             // error: invalid recipient address
             if (!EthereumAddress.isValid(recipient)) return
diff --git a/packages/web3-shared/evm/hooks/useNativeTokenWrapperCallback.ts b/packages/plugin-infra/src/web3/EVM/useNativeTokenWrapperCallback.ts
similarity index 92%
rename from packages/web3-shared/evm/hooks/useNativeTokenWrapperCallback.ts
rename to packages/plugin-infra/src/web3/EVM/useNativeTokenWrapperCallback.ts
index cd742c2c19c6..0df77bd97f50 100644
--- a/packages/web3-shared/evm/hooks/useNativeTokenWrapperCallback.ts
+++ b/packages/plugin-infra/src/web3/EVM/useNativeTokenWrapperCallback.ts
@@ -1,12 +1,12 @@
-import type { NonPayableTx, PayableTx } from '@masknet/web3-contracts/types/types'
-import { isLessThan, isZero } from '@masknet/web3-shared-base'
 import { useCallback } from 'react'
-import { useNativeTokenWrapperContract } from '../contracts/useWrappedEtherContract'
-import { ChainId, GasOptionConfig, TransactionEventType } from '../types'
-import { useAccount } from './useAccount'
+import type { NonPayableTx, PayableTx } from '@masknet/web3-contracts/types/types'
+import { isLessThan, isZero, NetworkPluginID } from '@masknet/web3-shared-base'
+import { ChainId, GasOptionConfig, TransactionEventType } from '@masknet/web3-shared-evm'
+import { useNativeTokenWrapperContract } from './useWrappedEtherContract'
+import { useAccount } from '../useAccount'
 
 export function useNativeTokenWrapperCallback(chainId?: ChainId) {
-    const account = useAccount()
+    const account = useAccount(NetworkPluginID.PLUGIN_EVM)
     const wrapperContract = useNativeTokenWrapperContract(chainId)
 
     const wrapCallback = useCallback(
diff --git a/packages/plugin-infra/src/web3/EVM/useNonFungibleOwnerTokens.ts b/packages/plugin-infra/src/web3/EVM/useNonFungibleOwnerTokens.ts
new file mode 100644
index 000000000000..3154acd3d15c
--- /dev/null
+++ b/packages/plugin-infra/src/web3/EVM/useNonFungibleOwnerTokens.ts
@@ -0,0 +1,61 @@
+import type { ChainId, SchemaType } from '@masknet/web3-shared-evm'
+import { useAsyncRetry } from 'react-use'
+import { useRef } from 'react'
+import { NonFungibleToken, NetworkPluginID } from '@masknet/web3-shared-base'
+import { useWeb3Connection } from '../useWeb3Connection'
+
+import { useERC721TokenContract } from './useERC721TokenContract'
+
+export const ERC721_ENUMERABLE_INTERFACE_ID = '0x780e9d63'
+
+export function useNonFungibleOwnerTokens(
+    contractAddress: string,
+    ownerAccount: string,
+    chainId: ChainId,
+    _balance?: number,
+) {
+    const allListRef = useRef<Array<NonFungibleToken<ChainId, SchemaType.ERC721>>>([])
+    const nonFungibleTokenContract = useERC721TokenContract(chainId, contractAddress ?? '')
+    const connection = useWeb3Connection(NetworkPluginID.PLUGIN_EVM, { chainId })
+
+    const asyncRetry = useAsyncRetry(async () => {
+        if (!contractAddress || !ownerAccount || !connection || !nonFungibleTokenContract) return
+
+        const isEnumerable = await nonFungibleTokenContract.methods
+            .supportsInterface(ERC721_ENUMERABLE_INTERFACE_ID)
+            .call()
+
+        const balance =
+            _balance === undefined
+                ? Number.parseInt(await nonFungibleTokenContract.methods.balanceOf(ownerAccount).call(), 10)
+                : _balance
+
+        if (!isEnumerable || !balance) return
+
+        const allRequest = Array.from({ length: balance }, async (_v, i) => {
+            const tokenId = await nonFungibleTokenContract.methods.tokenOfOwnerByIndex(ownerAccount, i).call()
+
+            if (!tokenId) return
+
+            return [contractAddress, tokenId] as [string, string]
+        })
+
+        const listOfPairs = (await Promise.allSettled(allRequest))
+            .map((x) => (x.status === 'fulfilled' ? x.value : undefined))
+            .filter((value) => value) as Array<[string, string]>
+
+        if (!listOfPairs.length) return
+
+        allListRef.current = (
+            await Promise.all(listOfPairs?.map((x) => connection.getNonFungibleToken(x[0], x[1])) ?? [])
+        ).filter((x) => x.contract?.balance) as Array<NonFungibleToken<ChainId, SchemaType.ERC721>>
+    }, [contractAddress, ownerAccount, chainId, connection, nonFungibleTokenContract, _balance])
+
+    const clearTokenDetailedOwnerList = () => (allListRef.current = [])
+
+    return {
+        asyncRetry,
+        tokenDetailedOwnerList: allListRef.current,
+        clearTokenDetailedOwnerList,
+    }
+}
diff --git a/packages/plugin-infra/src/web3/EVM/useReverseLookupContract.ts b/packages/plugin-infra/src/web3/EVM/useReverseLookupContract.ts
new file mode 100644
index 000000000000..58213858d937
--- /dev/null
+++ b/packages/plugin-infra/src/web3/EVM/useReverseLookupContract.ts
@@ -0,0 +1,10 @@
+import type { AbiItem } from 'web3-utils'
+import ReverseRecordsABI from '@masknet/web3-contracts/abis/ReverseRecords.json'
+import type { ReverseRecords } from '@masknet/web3-contracts/types/ReverseRecords'
+import { ChainId, useEthereumConstants } from '@masknet/web3-shared-evm'
+import { useContract } from './useContract'
+
+export function useReverseRecordsContract(chainId?: ChainId) {
+    const { ENS_REVERSE_RECORDS_ADDRESS } = useEthereumConstants(chainId ?? ChainId.Mainnet)
+    return useContract<ReverseRecords>(chainId, ENS_REVERSE_RECORDS_ADDRESS, ReverseRecordsABI as AbiItem[])
+}
diff --git a/packages/web3-shared/evm/hooks/useTokenTransferCallback.ts b/packages/plugin-infra/src/web3/EVM/useTokenTransferCallback.ts
similarity index 69%
rename from packages/web3-shared/evm/hooks/useTokenTransferCallback.ts
rename to packages/plugin-infra/src/web3/EVM/useTokenTransferCallback.ts
index 67b9a04f3675..b4a1a3771fab 100644
--- a/packages/web3-shared/evm/hooks/useTokenTransferCallback.ts
+++ b/packages/plugin-infra/src/web3/EVM/useTokenTransferCallback.ts
@@ -1,22 +1,22 @@
 import { unreachable } from '@dimensiondev/kit'
-import { EthereumTokenType } from '../types'
+import { SchemaType } from '@masknet/web3-shared-evm'
 import { useERC20TokenTransferCallback } from './useERC20TokenTransferCallback'
 import { useERC721TokenTransferCallback } from './useERC721TokenTransferCallback'
 import { useNativeTransferCallback } from './useNativeTokenTransferCallback'
 
-export function useTokenTransferCallback(type: EthereumTokenType, address: string) {
+export function useTokenTransferCallback(type: SchemaType, address: string) {
     const r1 = useNativeTransferCallback()
     const r2 = useERC20TokenTransferCallback(address)
     const r3 = useERC721TokenTransferCallback(address)
     const type_ = type
     switch (type_) {
-        case EthereumTokenType.Native:
+        case SchemaType.Native:
             return r1
-        case EthereumTokenType.ERC20:
+        case SchemaType.ERC20:
             return r2
-        case EthereumTokenType.ERC721:
+        case SchemaType.ERC721:
             return r3
-        case EthereumTokenType.ERC1155:
+        case SchemaType.ERC1155:
             throw new Error('To be implemented.')
         default:
             unreachable(type_)
diff --git a/packages/web3-shared/evm/hooks/useTransactionCallback.ts b/packages/plugin-infra/src/web3/EVM/useTransactionCallback.ts
similarity index 94%
rename from packages/web3-shared/evm/hooks/useTransactionCallback.ts
rename to packages/plugin-infra/src/web3/EVM/useTransactionCallback.ts
index a2f6d92d0f7e..7f7417a1de74 100644
--- a/packages/web3-shared/evm/hooks/useTransactionCallback.ts
+++ b/packages/plugin-infra/src/web3/EVM/useTransactionCallback.ts
@@ -1,7 +1,7 @@
-import type { PayableTransactionObject, PayableTx } from '@masknet/web3-contracts/types/types'
 import { omit } from 'lodash-unified'
 import { useAsyncFn } from 'react-use'
-import { TransactionEventType } from '../types'
+import type { PayableTransactionObject, PayableTx } from '@masknet/web3-contracts/types/types'
+import { TransactionEventType } from '@masknet/web3-shared-evm'
 
 export function useTransactionCallback<T extends unknown>(
     config: PayableTx | undefined,
diff --git a/packages/plugin-infra/src/web3/EVM/useTransactionState.ts b/packages/plugin-infra/src/web3/EVM/useTransactionState.ts
new file mode 100644
index 000000000000..c6351c8e9eb9
--- /dev/null
+++ b/packages/plugin-infra/src/web3/EVM/useTransactionState.ts
@@ -0,0 +1,13 @@
+import { useReducer } from 'react'
+import { isNextStateAvailable, TransactionState, TransactionStateType } from '@masknet/web3-shared-evm'
+
+function txStateReducer(state: TransactionState, nextState: TransactionState) {
+    const allowed = nextState.type === TransactionStateType.UNKNOWN || isNextStateAvailable(state.type, nextState.type)
+    return allowed ? nextState : state
+}
+
+export function useTransactionState() {
+    return useReducer(txStateReducer, {
+        type: TransactionStateType.UNKNOWN,
+    })
+}
diff --git a/packages/web3-shared/evm/contracts/useWrappedEtherContract.ts b/packages/plugin-infra/src/web3/EVM/useWrappedEtherContract.ts
similarity index 57%
rename from packages/web3-shared/evm/contracts/useWrappedEtherContract.ts
rename to packages/plugin-infra/src/web3/EVM/useWrappedEtherContract.ts
index 9e2f33d8b58f..590c37cc8799 100644
--- a/packages/web3-shared/evm/contracts/useWrappedEtherContract.ts
+++ b/packages/plugin-infra/src/web3/EVM/useWrappedEtherContract.ts
@@ -1,11 +1,10 @@
+import type { AbiItem } from 'web3-utils'
 import WETH_ABI from '@masknet/web3-contracts/abis/WETH.json'
 import type { WETH } from '@masknet/web3-contracts/types/WETH'
-import type { AbiItem } from 'web3-utils'
-import { useTokenConstants } from '../constants'
-import { useContract } from '../hooks/useContract'
-import type { ChainId } from '../types'
+import { ChainId, useTokenConstants } from '@masknet/web3-shared-evm'
+import { useContract } from './useContract'
 
 export function useNativeTokenWrapperContract(chainId?: ChainId) {
     const { WNATIVE_ADDRESS } = useTokenConstants(chainId)
-    return useContract<WETH>(WNATIVE_ADDRESS, WETH_ABI as AbiItem[], chainId)
+    return useContract<WETH>(chainId, WNATIVE_ADDRESS, WETH_ABI as AbiItem[])
 }
diff --git a/packages/plugin-infra/src/web3/index.ts b/packages/plugin-infra/src/web3/index.ts
index e78bb7e9fe2d..9358f70d3159 100644
--- a/packages/plugin-infra/src/web3/index.ts
+++ b/packages/plugin-infra/src/web3/index.ts
@@ -1,27 +1,80 @@
+export * from './Context'
+
 export * from './useAccount'
+export * from './useAddressBook'
+export * from './useAddressNames'
 export * from './useAllowTestnet'
-export * from './useAssetType'
 export * from './useBalance'
 export * from './useBeat'
 export * from './useBlockNumber'
-export * from './useChainId'
+export * from './useBlockTimestamp'
+export * from './useBlockedFungibleTokens'
+export * from './useBlockedNonFungibleTokens'
+export * from './useBlockie'
 export * from './useChainColor'
+export * from './useChainDescriptor'
+export * from './useChainId'
+export * from './useChainIdMainnet'
+export * from './useChainIdMatched'
+export * from './useChainIdSupport'
 export * from './useChainIdValid'
-export * from './useChainDetailed'
-export * from './useCollectibleType'
-export * from './useNameType'
-export * from './useNetworkType'
-export * from './useProviderType'
+export * from './useClearTransactionsCallback'
+export * from './useCurrencyType'
+export * from './useDefaultChainId'
+export * from './useDefaultNetworkType'
+export * from './useFungibleAsset'
+export * from './useFungibleAssetSourceType'
+export * from './useFungibleAssets'
+export * from './useFungibleToken'
+export * from './useFungibleTokenBalance'
+export * from './useFungibleTokenPrice'
+export * from './useFungibleTokenWatched'
+export * from './useFungibleTokens'
+export * from './useFungibleTokensBalance'
+export * from './useFungibleTokensFromTokenList'
+export * from './useGasOptionType'
+export * from './useGasOptions'
+export * from './useGasPrice'
+export * from './useImageChecker'
+export * from './useLookupAddress'
+export * from './useNativeToken'
+export * from './useNativeTokenAddress'
+export * from './useNativeTokenBalance'
+export * from './useNativeTokenPrice'
 export * from './useNetworkDescriptor'
-export * from './useProviderDescriptor'
 export * from './useNetworkDescriptors'
+export * from './useNetworkType'
+export * from './useNonFungibleAsset'
+export * from './useNonFungibleAssetSourceType'
+export * from './useNonFungibleAssets'
+export * from './useNonFungibleCollections'
+export * from './useNonFungibleTokenBalance'
+export * from './useNonFungibleTokenContract'
+export * from './useNonFungibleTokenPrice'
+export * from './useNonFungibleTokens'
+export * from './useNonFungibleTokensBalance'
+export * from './useNonFungibleTokensFromTokenList'
+export * from './useNonFungibleToken'
+export * from './useProviderDescriptor'
 export * from './useProviderDescriptors'
-export * from './useTokenPrice'
-export * from './useTransactionType'
+export * from './useProviderReady'
+export * from './useProviderType'
+export * from './useRemoveTransaction'
+export * from './useReverseAddress'
+export * from './useRiskWarningApproved'
+export * from './useSchemaType'
+export * from './useSocketOnce'
+export * from './useRecentTransactions'
+export * from './useTransactions'
+export * from './useTrustedFungibleTokens'
+export * from './useTrustedNonFungibleTokens'
 export * from './useWallet'
 export * from './useWalletPrimary'
 export * from './useWallets'
-export * from './useWeb3UI'
+export * from './useWeb3'
+export * from './useWeb3Provider'
+export * from './useWeb3Connection'
+export * from './useWeb3Hub'
 export * from './useWeb3State'
-
-export * from './Context'
+export * from './useWeb3UI'
+export * from './useZeroAddress'
diff --git a/packages/plugin-infra/src/web3/useAccount.ts b/packages/plugin-infra/src/web3/useAccount.ts
index bbb938a2964a..636ac5b17eb6 100644
--- a/packages/plugin-infra/src/web3/useAccount.ts
+++ b/packages/plugin-infra/src/web3/useAccount.ts
@@ -1,11 +1,12 @@
-import { first } from 'lodash-unified'
-import type { NetworkPluginID } from '../web3-types'
-import { usePluginWeb3StateContext } from './Context'
+import { useSubscription } from 'use-subscription'
+import type { NetworkPluginID } from '@masknet/web3-shared-base'
+import { useWeb3State } from './useWeb3State'
+import { UNDEFINED } from '../utils/subscription'
+import { useCurrentWeb3NetworkAccount } from './Context'
 
-/**
- * Get the address of the default wallet
- */
-export function useAccount(pluginID?: NetworkPluginID) {
-    const { account, wallets } = usePluginWeb3StateContext(pluginID)
-    return process.env.architecture === 'app' ? first(wallets)?.address ?? '' : account
+export function useAccount<T extends NetworkPluginID>(pluginID?: T, expectedAccount?: string) {
+    const { Provider } = useWeb3State<T>(pluginID)
+    const currentAccount = useCurrentWeb3NetworkAccount(pluginID)
+    const defaultAccount = useSubscription(Provider?.account ?? UNDEFINED)
+    return expectedAccount ?? currentAccount ?? defaultAccount ?? ''
 }
diff --git a/packages/plugin-infra/src/web3/useAddressBook.ts b/packages/plugin-infra/src/web3/useAddressBook.ts
new file mode 100644
index 000000000000..fd83d7e904a0
--- /dev/null
+++ b/packages/plugin-infra/src/web3/useAddressBook.ts
@@ -0,0 +1,9 @@
+import { useSubscription } from 'use-subscription'
+import type { NetworkPluginID } from '@masknet/web3-shared-base'
+import { useWeb3State } from './useWeb3State'
+import { EMPTY_OBJECT } from '../utils/subscription'
+
+export function useAddressBook<T extends NetworkPluginID>(pluginID?: T) {
+    const { AddressBook } = useWeb3State(pluginID)
+    return useSubscription(AddressBook?.addressBook ?? EMPTY_OBJECT)
+}
diff --git a/packages/plugin-infra/src/web3/useAddressNames.ts b/packages/plugin-infra/src/web3/useAddressNames.ts
new file mode 100644
index 000000000000..1b95d481398a
--- /dev/null
+++ b/packages/plugin-infra/src/web3/useAddressNames.ts
@@ -0,0 +1,20 @@
+import { useAsyncRetry } from 'react-use'
+import { EMPTY_LIST } from '@masknet/shared-base'
+import type { NetworkPluginID, IdentityAddress, SocialIdentity } from '@masknet/web3-shared-base'
+import { useWeb3State } from './useWeb3State'
+
+export function useAddressNames<T extends NetworkPluginID>(
+    pluginID?: T,
+    identity?: SocialIdentity,
+    sorter?: (a: IdentityAddress, z: IdentityAddress) => number,
+) {
+    type Lookup = (identity: SocialIdentity) => Promise<IdentityAddress[]>
+
+    const { IdentityService } = useWeb3State(pluginID)
+
+    return useAsyncRetry(async () => {
+        if (!identity || !IdentityService?.lookup) return EMPTY_LIST
+        const listOfAddress = (await (IdentityService.lookup as Lookup)(identity)) ?? EMPTY_LIST
+        return sorter && listOfAddress.length ? listOfAddress.sort(sorter) : listOfAddress
+    }, [identity, sorter, IdentityService])
+}
diff --git a/packages/plugin-infra/src/web3/useAllowTestnet.ts b/packages/plugin-infra/src/web3/useAllowTestnet.ts
index ef3f8dcb5109..4ba7d1cf9f0f 100644
--- a/packages/plugin-infra/src/web3/useAllowTestnet.ts
+++ b/packages/plugin-infra/src/web3/useAllowTestnet.ts
@@ -1,6 +1,9 @@
-import type { NetworkPluginID } from '../web3-types'
-import { usePluginWeb3StateContext } from './Context'
+import { useSubscription } from 'use-subscription'
+import type { NetworkPluginID } from '@masknet/web3-shared-base'
+import { useWeb3State } from './useWeb3State'
+import { TRUE, FALSE } from '../utils/subscription'
 
-export function useAllowTestnet(pluginID?: NetworkPluginID) {
-    return usePluginWeb3StateContext(pluginID).allowTestnet
+export function useAllowTestnet<T extends NetworkPluginID>(pluginID?: T) {
+    const { Settings } = useWeb3State(pluginID)
+    return useSubscription(Settings?.allowTestnet ?? (process.env.NODE_ENV === 'development' ? TRUE : FALSE))
 }
diff --git a/packages/plugin-infra/src/web3/useAssetType.ts b/packages/plugin-infra/src/web3/useAssetType.ts
deleted file mode 100644
index 77abbf95a1a2..000000000000
--- a/packages/plugin-infra/src/web3/useAssetType.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import type { NetworkPluginID } from '../web3-types'
-import { usePluginWeb3StateContext } from './Context'
-
-export function useAssetType<T extends string>(pluginID?: NetworkPluginID) {
-    return usePluginWeb3StateContext(pluginID).assetType as T
-}
diff --git a/packages/plugin-infra/src/web3/useBalance.ts b/packages/plugin-infra/src/web3/useBalance.ts
index bc04e875028a..3622cbc08f55 100644
--- a/packages/plugin-infra/src/web3/useBalance.ts
+++ b/packages/plugin-infra/src/web3/useBalance.ts
@@ -1,16 +1,17 @@
 import { useAsyncRetry } from 'react-use'
-import { useAccount, useChainId, useWeb3State } from '.'
-import type { NetworkPluginID } from '../web3-types'
+import type { NetworkPluginID } from '@masknet/web3-shared-base'
+import type { Web3Helper } from '../web3-helpers'
+import { useAccount } from './useAccount'
+import { useWeb3Connection } from './useWeb3Connection'
 
-export function useBalance(expectedChainId?: number, expectedAccount?: string, pluginID?: NetworkPluginID) {
-    const { Utils } = useWeb3State()
-    const defaultChainId = useChainId(pluginID)
-    const defaultAccount = useAccount(pluginID)
+export function useBalance<T extends NetworkPluginID>(pluginID?: T, options?: Web3Helper.Web3ConnectionOptions<T>) {
+    type GetBalance = (account: string, options?: Web3Helper.Web3ConnectionOptions<T>) => Promise<string>
 
-    const chainId = expectedChainId ?? defaultChainId
-    const account = expectedAccount ?? defaultAccount
+    const account = useAccount(pluginID, options?.account)
+    const connection = useWeb3Connection(pluginID, options)
 
     return useAsyncRetry(async () => {
-        return Utils?.getLatestBalance?.(chainId, account) ?? '0'
-    }, [account, chainId, Utils])
+        if (!connection) return '0'
+        return (connection.getBalance as GetBalance)(account)
+    }, [account, connection])
 }
diff --git a/packages/plugin-infra/src/web3/useBeat.ts b/packages/plugin-infra/src/web3/useBeat.ts
index 29166bf02a47..5e1ffa2017a9 100644
--- a/packages/plugin-infra/src/web3/useBeat.ts
+++ b/packages/plugin-infra/src/web3/useBeat.ts
@@ -1,20 +1,45 @@
-import type { DependencyList } from 'react'
+import { DependencyList, useState } from 'react'
+import { useAsyncRetry, useTimeoutFn } from 'react-use'
+import type { NetworkPluginID } from '@masknet/web3-shared-base'
 import type { AsyncStateRetry } from 'react-use/lib/useAsyncRetry'
-import { useBeatRetry } from '@masknet/web3-shared-base'
-import { useWeb3State } from '.'
+import { useWeb3State } from './useWeb3State'
 import { useChainId } from './useChainId'
 
 const DEFAULT_SINGLE_BLOCK_DELAY = 15 * 1000
 const DEFAULT_DOUBLE_BLOCK_DELAY = DEFAULT_SINGLE_BLOCK_DELAY * 2
 
-export function useSingleBlockBeatRetry<T>(fn: () => Promise<T>, deps: DependencyList = []): AsyncStateRetry<T> {
-    const chainId = useChainId()
-    const { Utils } = useWeb3State()
-    return useBeatRetry(fn, Utils?.getAverageBlockDelay?.(chainId) ?? DEFAULT_SINGLE_BLOCK_DELAY, deps)
+export function useBeat(delay = 1000) {
+    const [beat, setBeat] = useState(0)
+    const [, , reset] = useTimeoutFn(() => {
+        setBeat((x) => (x + 1) % Number.MAX_SAFE_INTEGER)
+        reset()
+    }, delay)
+    return beat
 }
 
-export function useDoubleBlockBeatRetry<T>(fn: () => Promise<T>, deps: DependencyList = []): AsyncStateRetry<T> {
-    const chainId = useChainId()
-    const { Utils } = useWeb3State()
-    return useBeatRetry(fn, Utils?.getAverageBlockDelay?.(chainId, 2) ?? DEFAULT_DOUBLE_BLOCK_DELAY, deps)
+export function useBeatRetry<T>(fn: () => Promise<T>, delay = 1000, deps: DependencyList = []): AsyncStateRetry<T> {
+    const beat = useBeat(delay)
+    return useAsyncRetry(fn, deps.concat(beat))
+}
+
+export function useSingleBlockBeatRetry<T extends NetworkPluginID, R>(
+    pluginID: T,
+    fn: () => Promise<R>,
+    deps: DependencyList = [],
+): AsyncStateRetry<R> {
+    const chainId = useChainId(pluginID)
+    const { Others } = useWeb3State(pluginID)
+    // @ts-ignore
+    return useBeatRetry(fn, Others?.getAverageBlockDelay?.(chainId) ?? DEFAULT_SINGLE_BLOCK_DELAY, deps)
+}
+
+export function useDoubleBlockBeatRetry<T extends NetworkPluginID, R>(
+    pluginID: T,
+    fn: () => Promise<R>,
+    deps: DependencyList = [],
+): AsyncStateRetry<R> {
+    const chainId = useChainId(pluginID)
+    const { Others } = useWeb3State(pluginID)
+    // @ts-ignore
+    return useBeatRetry(fn, Others?.getAverageBlockDelay?.(chainId, 2) ?? DEFAULT_DOUBLE_BLOCK_DELAY, deps)
 }
diff --git a/packages/plugin-infra/src/web3/useBlockNumber.ts b/packages/plugin-infra/src/web3/useBlockNumber.ts
index e642024c9910..a34b00150819 100644
--- a/packages/plugin-infra/src/web3/useBlockNumber.ts
+++ b/packages/plugin-infra/src/web3/useBlockNumber.ts
@@ -1,14 +1,17 @@
 import { useAsyncRetry } from 'react-use'
-import { useChainId, useWeb3State } from '.'
-import type { NetworkPluginID } from '../web3-types'
+import type { NetworkPluginID } from '@masknet/web3-shared-base'
+import type { Web3Helper } from '../web3-helpers'
+import { useChainId } from './useChainId'
+import { useWeb3Connection } from './useWeb3Connection'
 
-export function useBlockNumber(expectedChainId?: number, pluginID?: NetworkPluginID) {
-    const { Utils } = useWeb3State()
-    const defaultChainId = useChainId(pluginID)
+export function useBlockNumber<T extends NetworkPluginID>(pluginID?: T, options?: Web3Helper.Web3ConnectionOptions<T>) {
+    type GetBlockNumber = (options?: Web3Helper.Web3ConnectionOptions<T>) => Promise<number>
 
-    const chainId = expectedChainId ?? defaultChainId
+    const chainId = useChainId(pluginID, options?.chainId)
+    const connection = useWeb3Connection(pluginID, options)
 
     return useAsyncRetry(async () => {
-        return Utils?.getLatestBlockNumber?.(chainId)
-    }, [Utils, chainId])
+        if (!connection) return 0
+        return (connection.getBlockNumber as GetBlockNumber)()
+    }, [chainId, connection])
 }
diff --git a/packages/plugin-infra/src/web3/useBlockTimestamp.ts b/packages/plugin-infra/src/web3/useBlockTimestamp.ts
new file mode 100644
index 000000000000..0151d3a138b9
--- /dev/null
+++ b/packages/plugin-infra/src/web3/useBlockTimestamp.ts
@@ -0,0 +1,20 @@
+import { useAsyncRetry } from 'react-use'
+import type { NetworkPluginID } from '@masknet/web3-shared-base'
+import type { Web3Helper } from '../web3-helpers'
+import { useChainId } from './useChainId'
+import { useWeb3Connection } from './useWeb3Connection'
+
+export function useBlockTimestamp<T extends NetworkPluginID>(
+    pluginID?: T,
+    options?: Web3Helper.Web3ConnectionOptions<T>,
+) {
+    type GetBlockTimestamp = (options?: Web3Helper.Web3ConnectionOptions<T>) => Promise<number>
+
+    const chainId = useChainId(pluginID, options?.chainId)
+    const connection = useWeb3Connection(pluginID, options)
+
+    return useAsyncRetry(async () => {
+        if (!connection) return 0
+        return (connection.getBlockTimestamp as GetBlockTimestamp)()
+    }, [chainId, connection])
+}
diff --git a/packages/plugin-infra/src/web3/useBlockedFungibleTokens.ts b/packages/plugin-infra/src/web3/useBlockedFungibleTokens.ts
new file mode 100644
index 000000000000..2425ab1031f4
--- /dev/null
+++ b/packages/plugin-infra/src/web3/useBlockedFungibleTokens.ts
@@ -0,0 +1,23 @@
+import { useMemo } from 'react'
+import { Subscription, useSubscription } from 'use-subscription'
+import type { FungibleToken, NetworkPluginID } from '@masknet/web3-shared-base'
+import { EMPTY_ARRAY } from '../utils/subscription'
+import type { Web3Helper } from '../web3-helpers'
+import { useWeb3State } from './useWeb3State'
+
+export function useBlockedFungibleTokens<T extends NetworkPluginID>(
+    pluginID?: T,
+    schemaType?: Web3Helper.Definition[T]['SchemaType'],
+) {
+    const { Token } = useWeb3State(pluginID)
+    const fungibleTokens = useSubscription(
+        (Token?.blockedFungibleTokens ?? EMPTY_ARRAY) as Subscription<
+            Array<FungibleToken<Web3Helper.Definition[T]['ChainId'], Web3Helper.Definition[T]['SchemaType']>>
+        >,
+    )
+    return useMemo(() => {
+        return fungibleTokens.length && schemaType
+            ? fungibleTokens.filter((x) => x.schema === schemaType)
+            : fungibleTokens
+    }, [schemaType, fungibleTokens])
+}
diff --git a/packages/plugin-infra/src/web3/useBlockedNonFungibleTokens.ts b/packages/plugin-infra/src/web3/useBlockedNonFungibleTokens.ts
new file mode 100644
index 000000000000..8dc00cbf9b5e
--- /dev/null
+++ b/packages/plugin-infra/src/web3/useBlockedNonFungibleTokens.ts
@@ -0,0 +1,23 @@
+import { useMemo } from 'react'
+import { Subscription, useSubscription } from 'use-subscription'
+import type { NetworkPluginID, NonFungibleToken } from '@masknet/web3-shared-base'
+import type { Web3Helper } from '../web3-helpers'
+import { useWeb3State } from './useWeb3State'
+import { EMPTY_ARRAY } from '../utils/subscription'
+
+export function useBlockedNonFungibleTokens<T extends NetworkPluginID>(
+    pluginID?: T,
+    schemaType?: Web3Helper.Definition[T]['SchemaType'],
+) {
+    const { Token } = useWeb3State(pluginID)
+    const nonFungibleTokens = useSubscription(
+        (Token?.blockedNonFungibleTokens ?? EMPTY_ARRAY) as Subscription<
+            Array<NonFungibleToken<Web3Helper.Definition[T]['ChainId'], Web3Helper.Definition[T]['SchemaType']>>
+        >,
+    )
+    return useMemo(() => {
+        return nonFungibleTokens.length && schemaType
+            ? nonFungibleTokens.filter((x) => x.schema === schemaType)
+            : nonFungibleTokens
+    }, [schemaType, nonFungibleTokens])
+}
diff --git a/packages/web3-shared/evm/hooks/useBlockie.ts b/packages/plugin-infra/src/web3/useBlockie.ts
similarity index 100%
rename from packages/web3-shared/evm/hooks/useBlockie.ts
rename to packages/plugin-infra/src/web3/useBlockie.ts
diff --git a/packages/plugin-infra/src/web3/useChainColor.ts b/packages/plugin-infra/src/web3/useChainColor.ts
index 1e1d61e3fd52..6ac3152e6705 100644
--- a/packages/plugin-infra/src/web3/useChainColor.ts
+++ b/packages/plugin-infra/src/web3/useChainColor.ts
@@ -1,9 +1,16 @@
-import type { NetworkPluginID } from '../web3-types'
+import type { NetworkPluginID } from '@masknet/web3-shared-base'
+import type { Web3Helper } from '../web3-helpers'
 import { useChainId } from './useChainId'
 import { useWeb3State } from './useWeb3State'
 
-export function useChainColor(pluginID?: NetworkPluginID) {
-    const chainId = useChainId(pluginID)
-    const { Utils } = useWeb3State(pluginID)
-    return Utils?.resolveChainColor?.(chainId) ?? 'transparent'
+export function useChainColor<T extends NetworkPluginID>(
+    pluginID?: T,
+    expectedChainId?: Web3Helper.Definition[T]['ChainId'],
+) {
+    type ChainColor = (chainId?: Web3Helper.Definition[T]['ChainId']) => string | undefined
+
+    const chainId = useChainId(pluginID, expectedChainId)
+    const { Others } = useWeb3State(pluginID)
+
+    return (Others?.chainResolver.chainColor as ChainColor | undefined)?.(chainId) ?? 'transparent'
 }
diff --git a/packages/plugin-infra/src/web3/useChainDescriptor.ts b/packages/plugin-infra/src/web3/useChainDescriptor.ts
new file mode 100644
index 000000000000..b63f2471e149
--- /dev/null
+++ b/packages/plugin-infra/src/web3/useChainDescriptor.ts
@@ -0,0 +1,14 @@
+import type { NetworkPluginID } from '@masknet/web3-shared-base'
+import { useCurrentWeb3NetworkPluginID } from './Context'
+import { getPluginDefine } from '../manager/store'
+import { useChainId } from './useChainId'
+
+export function useChainDescriptor<T extends NetworkPluginID, ChainId>(
+    expectedPluginID?: T,
+    expectedChainId?: ChainId,
+) {
+    const pluginID = useCurrentWeb3NetworkPluginID(expectedPluginID)
+    const chainId = useChainId(pluginID)
+
+    return getPluginDefine(pluginID)?.declareWeb3Chains?.find((x) => x.chainId === (expectedChainId ?? chainId))
+}
diff --git a/packages/plugin-infra/src/web3/useChainDetailed.ts b/packages/plugin-infra/src/web3/useChainDetailed.ts
deleted file mode 100644
index a5face6dccd9..000000000000
--- a/packages/plugin-infra/src/web3/useChainDetailed.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import type { NetworkPluginID } from '../web3-types'
-import { useChainId } from './useChainId'
-import { useWeb3State } from './useWeb3State'
-
-export function useChainDetailed(pluginID?: NetworkPluginID) {
-    const chainId = useChainId(pluginID)
-    const { Utils } = useWeb3State(pluginID)
-    return Utils?.getChainDetailed?.(chainId) ?? null
-}
diff --git a/packages/plugin-infra/src/web3/useChainId.ts b/packages/plugin-infra/src/web3/useChainId.ts
index 0ba9a6512535..2d863685e077 100644
--- a/packages/plugin-infra/src/web3/useChainId.ts
+++ b/packages/plugin-infra/src/web3/useChainId.ts
@@ -1,6 +1,20 @@
-import type { NetworkPluginID } from '../web3-types'
-import { usePluginWeb3StateContext } from './Context'
+import { Subscription, useSubscription } from 'use-subscription'
+import type { NetworkPluginID } from '@masknet/web3-shared-base'
+import type { Web3Helper } from '../web3-helpers'
+import { useWeb3State } from './useWeb3State'
+import { UNDEFINED } from '../utils/subscription'
+import { useDefaultChainId } from './useDefaultChainId'
+import { useCurrentWeb3NetworkChainId } from './Context'
 
-export function useChainId<T extends number>(pluginID?: NetworkPluginID) {
-    return usePluginWeb3StateContext(pluginID).chainId as T
+export function useChainId<T extends NetworkPluginID>(
+    pluginID?: T,
+    expectedChainId?: Web3Helper.Definition[T]['ChainId'],
+) {
+    const { Provider } = useWeb3State(pluginID)
+    const currentChainId = useCurrentWeb3NetworkChainId(pluginID)
+    const defaultChainId = useDefaultChainId(pluginID) as Web3Helper.Definition[T]['ChainId']
+    const actualChainId = useSubscription(
+        (Provider?.chainId ?? UNDEFINED) as Subscription<Web3Helper.Definition[T]['ChainId'] | undefined>,
+    )
+    return expectedChainId ?? currentChainId ?? actualChainId ?? defaultChainId
 }
diff --git a/packages/plugin-infra/src/web3/useChainIdMainnet.ts b/packages/plugin-infra/src/web3/useChainIdMainnet.ts
new file mode 100644
index 000000000000..91dcbe0b32d6
--- /dev/null
+++ b/packages/plugin-infra/src/web3/useChainIdMainnet.ts
@@ -0,0 +1,16 @@
+import type { NetworkPluginID } from '@masknet/web3-shared-base'
+import type { Web3Helper } from '../web3-helpers'
+import { useChainId } from './useChainId'
+import { useWeb3State } from './useWeb3State'
+
+export function useChainIdMainnet<T extends NetworkPluginID>(
+    pluginID?: T,
+    expectedChainId?: Web3Helper.Definition[T]['ChainId'],
+) {
+    type IsMainnet = (chainId?: Web3Helper.Definition[T]['ChainId']) => boolean
+
+    const chainId = useChainId(pluginID, expectedChainId)
+    const { Others } = useWeb3State(pluginID)
+
+    return (Others?.chainResolver.isMainnet as IsMainnet | undefined)?.(chainId) ?? false
+}
diff --git a/packages/plugin-infra/src/web3/useChainIdMatched.ts b/packages/plugin-infra/src/web3/useChainIdMatched.ts
new file mode 100644
index 000000000000..0221e010e755
--- /dev/null
+++ b/packages/plugin-infra/src/web3/useChainIdMatched.ts
@@ -0,0 +1,11 @@
+import type { NetworkPluginID } from '@masknet/web3-shared-base'
+import type { Web3Helper } from '../web3-helpers'
+import { useChainId } from './useChainId'
+
+export function useChainIdMatched<T extends NetworkPluginID>(
+    pluginID?: T,
+    expectedChainId?: Web3Helper.Definition[T]['ChainId'],
+) {
+    const actualChainId = useChainId(pluginID)
+    return actualChainId === expectedChainId
+}
diff --git a/packages/plugin-infra/src/web3/useChainIdSupport.ts b/packages/plugin-infra/src/web3/useChainIdSupport.ts
new file mode 100644
index 000000000000..aa42923f43f8
--- /dev/null
+++ b/packages/plugin-infra/src/web3/useChainIdSupport.ts
@@ -0,0 +1,17 @@
+import type { NetworkPluginID } from '@masknet/web3-shared-base'
+import { useChainId } from './useChainId'
+import { useWeb3State } from './useWeb3State'
+import type { Web3Helper } from '../web3-helpers'
+
+export function useChainIdSupport<T extends NetworkPluginID>(
+    pluginID?: T,
+    expectedChainId?: Web3Helper.Definition[T]['ChainId'],
+    feature?: string,
+) {
+    type IsSupport = (chainId?: Web3Helper.Definition[T]['ChainId'], feature?: string) => boolean
+
+    const chainId = useChainId(pluginID, expectedChainId)
+    const { Others } = useWeb3State(pluginID)
+
+    return (Others?.chainResolver.isSupport as IsSupport | undefined)?.(chainId, feature) ?? false
+}
diff --git a/packages/plugin-infra/src/web3/useChainIdValid.ts b/packages/plugin-infra/src/web3/useChainIdValid.ts
index 1fca2450a41b..1144edb7b01a 100644
--- a/packages/plugin-infra/src/web3/useChainIdValid.ts
+++ b/packages/plugin-infra/src/web3/useChainIdValid.ts
@@ -1,11 +1,25 @@
+import type { NetworkPluginID } from '@masknet/web3-shared-base'
 import { useChainId } from './useChainId'
 import { useWeb3State } from './useWeb3State'
 import { useAccount } from './useAccount'
-import type { NetworkPluginID } from '../web3-types'
+import type { Web3Helper } from '../web3-helpers'
 
-export function useChainIdValid(pluginID?: NetworkPluginID) {
+export function useChainIdValid<T extends NetworkPluginID>(
+    pluginID?: T,
+    expectedChainId?: Web3Helper.Definition[T]['ChainId'],
+) {
+    type IsValid = (chainId?: Web3Helper.Definition[T]['ChainId'], testnet?: boolean) => boolean
+
+    const chainId = useChainId(pluginID, expectedChainId)
     const account = useAccount(pluginID)
-    const chainId = useChainId(pluginID)
-    const { Utils } = useWeb3State(pluginID)
-    return !account || (Utils?.isChainIdValid?.(chainId, process.env.NODE_ENV === 'development') ?? false)
+    const { Others } = useWeb3State(pluginID)
+
+    return (
+        (!account ||
+            (Others?.chainResolver.isValid as IsValid | undefined)?.(
+                chainId,
+                process.env.NODE_ENV === 'development',
+            )) ??
+        false
+    )
 }
diff --git a/packages/plugin-infra/src/web3/useClearTransactionsCallback.ts b/packages/plugin-infra/src/web3/useClearTransactionsCallback.ts
new file mode 100644
index 000000000000..5dd93e393301
--- /dev/null
+++ b/packages/plugin-infra/src/web3/useClearTransactionsCallback.ts
@@ -0,0 +1,19 @@
+import { useCallback } from 'react'
+import type { NetworkPluginID } from '@masknet/web3-shared-base'
+import { useAccount } from './useAccount'
+import { useChainId } from './useChainId'
+import { useWeb3State } from './useWeb3State'
+import type { Web3Helper } from '../web3-helpers'
+
+export function useClearTransactionsCallback<T extends NetworkPluginID>(pluginID?: NetworkPluginID) {
+    type ClearTransactions = (chainId: Web3Helper.Definition[T]['ChainId'], account: string) => Promise<void>
+
+    const account = useAccount(pluginID)
+    const chainId = useChainId(pluginID)
+    const { Transaction } = useWeb3State(pluginID)
+
+    return useCallback(async () => {
+        if (!account) return
+        return (Transaction?.clearTransactions as ClearTransactions | undefined)?.(chainId, account)
+    }, [chainId, account, Transaction])
+}
diff --git a/packages/plugin-infra/src/web3/useCollectibleType.ts b/packages/plugin-infra/src/web3/useCollectibleType.ts
deleted file mode 100644
index dacae5c60e83..000000000000
--- a/packages/plugin-infra/src/web3/useCollectibleType.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import type { NetworkPluginID } from '../web3-types'
-import { usePluginWeb3StateContext } from './Context'
-
-export function useCollectibleType<T extends string>(pluginID?: NetworkPluginID) {
-    return usePluginWeb3StateContext(pluginID).collectibleType as T
-}
diff --git a/packages/plugin-infra/src/web3/useCurrencyType.ts b/packages/plugin-infra/src/web3/useCurrencyType.ts
index bf9b4223e543..a1d5e9e30f16 100644
--- a/packages/plugin-infra/src/web3/useCurrencyType.ts
+++ b/packages/plugin-infra/src/web3/useCurrencyType.ts
@@ -1,6 +1,9 @@
-import type { NetworkPluginID } from '../web3-types'
-import { usePluginWeb3StateContext } from './Context'
+import { useSubscription } from 'use-subscription'
+import type { NetworkPluginID } from '@masknet/web3-shared-base'
+import { useWeb3State } from './useWeb3State'
+import { UNDEFINED } from '../utils/subscription'
 
-export function useCurrencyType<T extends string>(pluginID?: NetworkPluginID) {
-    return usePluginWeb3StateContext(pluginID).currencyType as T
+export function useCurrencyType<T extends NetworkPluginID>(pluginID?: T) {
+    const { Settings } = useWeb3State(pluginID)
+    return useSubscription(Settings?.currencyType ?? UNDEFINED)
 }
diff --git a/packages/plugin-infra/src/web3/useDefaultChainId.ts b/packages/plugin-infra/src/web3/useDefaultChainId.ts
new file mode 100644
index 000000000000..4e0dd655407b
--- /dev/null
+++ b/packages/plugin-infra/src/web3/useDefaultChainId.ts
@@ -0,0 +1,17 @@
+import { NetworkPluginID } from '@masknet/web3-shared-base'
+import { ChainId as EVM_ChainId } from '@masknet/web3-shared-evm'
+import { ChainId as FlowChainId } from '@masknet/web3-shared-flow'
+import { ChainId as SolanaChainId } from '@masknet/web3-shared-solana'
+import type { Web3Helper } from '../web3-helpers'
+import { useCurrentWeb3NetworkPluginID } from './Context'
+
+const DEFAULT_CHAIN_ID: Record<NetworkPluginID, Web3Helper.Definition[NetworkPluginID]['ChainId']> = {
+    [NetworkPluginID.PLUGIN_EVM]: EVM_ChainId.Mainnet,
+    [NetworkPluginID.PLUGIN_FLOW]: FlowChainId.Mainnet,
+    [NetworkPluginID.PLUGIN_SOLANA]: SolanaChainId.Mainnet,
+}
+
+export function useDefaultChainId<T extends NetworkPluginID>(expectedPluginID?: T) {
+    const pluginID = useCurrentWeb3NetworkPluginID(expectedPluginID) as T
+    return DEFAULT_CHAIN_ID[pluginID]
+}
diff --git a/packages/plugin-infra/src/web3/useDefaultNetworkType.ts b/packages/plugin-infra/src/web3/useDefaultNetworkType.ts
new file mode 100644
index 000000000000..105ee881d0fd
--- /dev/null
+++ b/packages/plugin-infra/src/web3/useDefaultNetworkType.ts
@@ -0,0 +1,17 @@
+import { NetworkPluginID } from '@masknet/web3-shared-base'
+import { NetworkType as EVM_NetworkType } from '@masknet/web3-shared-evm'
+import { NetworkType as FlowNetworkType } from '@masknet/web3-shared-flow'
+import { NetworkType as SolanaNetworkType } from '@masknet/web3-shared-solana'
+import type { Web3Helper } from '../web3-helpers'
+import { useCurrentWeb3NetworkPluginID } from './Context'
+
+const DEFAULT_NETWORK_TYPE: Record<NetworkPluginID, Web3Helper.Definition[NetworkPluginID]['NetworkType']> = {
+    [NetworkPluginID.PLUGIN_EVM]: EVM_NetworkType.Ethereum,
+    [NetworkPluginID.PLUGIN_FLOW]: FlowNetworkType.Flow,
+    [NetworkPluginID.PLUGIN_SOLANA]: SolanaNetworkType.Solana,
+}
+
+export function useDefaultNetworkType<T extends NetworkPluginID>(expectedPluginID?: T) {
+    const pluginID = useCurrentWeb3NetworkPluginID(expectedPluginID) as T
+    return DEFAULT_NETWORK_TYPE[pluginID]
+}
diff --git a/packages/plugin-infra/src/web3/useFungibleAsset.ts b/packages/plugin-infra/src/web3/useFungibleAsset.ts
new file mode 100644
index 000000000000..84e60fe69131
--- /dev/null
+++ b/packages/plugin-infra/src/web3/useFungibleAsset.ts
@@ -0,0 +1,23 @@
+import { useAsyncRetry } from 'react-use'
+import { EMPTY_LIST } from '@masknet/shared-base'
+import type { FungibleAsset, NetworkPluginID } from '@masknet/web3-shared-base'
+import type { Web3Helper } from '../web3-helpers'
+import { useWeb3Hub } from './useWeb3Hub'
+
+export function useFungibleAsset<T extends NetworkPluginID>(
+    pluginID?: T,
+    address?: string,
+    options?: Web3Helper.Web3ConnectionOptions<T>,
+) {
+    type GetFungibleAsset = (
+        address: string,
+        options?: Web3Helper.Web3ConnectionOptions<T>,
+    ) => Promise<FungibleAsset<Web3Helper.Definition[T]['ChainId'], Web3Helper.Definition[T]['SchemaType']>>
+
+    const hub = useWeb3Hub(pluginID, options)
+
+    return useAsyncRetry(async () => {
+        if (!address) return EMPTY_LIST
+        return (hub?.getFungibleAsset as GetFungibleAsset | undefined)?.(address)
+    }, [address, hub?.getFungibleAsset])
+}
diff --git a/packages/plugin-infra/src/web3/useFungibleAssetSourceType.ts b/packages/plugin-infra/src/web3/useFungibleAssetSourceType.ts
new file mode 100644
index 000000000000..39643a4c5ded
--- /dev/null
+++ b/packages/plugin-infra/src/web3/useFungibleAssetSourceType.ts
@@ -0,0 +1,9 @@
+import { useSubscription } from 'use-subscription'
+import type { NetworkPluginID } from '@masknet/web3-shared-base'
+import { useWeb3State } from './useWeb3State'
+import { UNDEFINED } from '../utils/subscription'
+
+export function useFungibleAssetSourceType<T extends NetworkPluginID>(pluginID?: T) {
+    const { Settings } = useWeb3State(pluginID)
+    return useSubscription(Settings?.fungibleAssetSourceType ?? UNDEFINED)
+}
diff --git a/packages/plugin-infra/src/web3/useFungibleAssets.ts b/packages/plugin-infra/src/web3/useFungibleAssets.ts
new file mode 100644
index 000000000000..84cefbacfb23
--- /dev/null
+++ b/packages/plugin-infra/src/web3/useFungibleAssets.ts
@@ -0,0 +1,27 @@
+import { useAsyncRetry } from 'react-use'
+import { asyncIteratorToArray, EMPTY_LIST } from '@masknet/shared-base'
+import type { FungibleAsset, NetworkPluginID } from '@masknet/web3-shared-base'
+import type { Web3Helper } from '../web3-helpers'
+import { useAccount } from './useAccount'
+import { useWeb3Hub } from './useWeb3Hub'
+
+export function useFungibleAssets<T extends NetworkPluginID>(
+    pluginID?: T,
+    schemaType?: Web3Helper.Definition[T]['SchemaType'],
+    options?: Web3Helper.Web3HubOptions<T>,
+) {
+    type GetAllFungibleAssets = (
+        address: string,
+    ) => AsyncIterableIterator<
+        FungibleAsset<Web3Helper.Definition[T]['ChainId'], Web3Helper.Definition[T]['SchemaType']>
+    >
+
+    const account = useAccount(pluginID)
+    const hub = useWeb3Hub(pluginID, options)
+
+    return useAsyncRetry(async () => {
+        if (!account || !hub) return EMPTY_LIST
+        const assets = await asyncIteratorToArray((hub?.getAllFungibleAssets as GetAllFungibleAssets)(account))
+        return assets.length && schemaType ? assets.filter((x) => x.schema === schemaType) : assets
+    }, [account, schemaType, hub])
+}
diff --git a/packages/plugin-infra/src/web3/useFungibleToken.ts b/packages/plugin-infra/src/web3/useFungibleToken.ts
new file mode 100644
index 000000000000..73a5bcd185e4
--- /dev/null
+++ b/packages/plugin-infra/src/web3/useFungibleToken.ts
@@ -0,0 +1,22 @@
+import type { FungibleToken, NetworkPluginID } from '@masknet/web3-shared-base'
+import useAsyncRetry from 'react-use/lib/useAsyncRetry'
+import type { Web3Helper } from '../web3-helpers'
+import { useWeb3Connection } from './useWeb3Connection'
+
+export function useFungibleToken<T extends NetworkPluginID>(
+    pluginID?: T,
+    address?: string,
+    options?: Web3Helper.Web3ConnectionOptions<T>,
+) {
+    type GetFungibleToken = (
+        address: string,
+        options?: Web3Helper.Web3ConnectionOptions<T>,
+    ) => Promise<FungibleToken<Web3Helper.Definition[T]['ChainId'], Web3Helper.Definition[T]['SchemaType']>>
+
+    const connection = useWeb3Connection(pluginID, options)
+
+    return useAsyncRetry(async () => {
+        if (!connection) return
+        return (connection?.getFungibleToken as GetFungibleToken)(address ?? '', options)
+    }, [address, connection])
+}
diff --git a/packages/plugin-infra/src/web3/useFungibleTokenBalance.ts b/packages/plugin-infra/src/web3/useFungibleTokenBalance.ts
new file mode 100644
index 000000000000..05d3ec18dd43
--- /dev/null
+++ b/packages/plugin-infra/src/web3/useFungibleTokenBalance.ts
@@ -0,0 +1,19 @@
+import type { NetworkPluginID } from '@masknet/web3-shared-base'
+import useAsyncRetry from 'react-use/lib/useAsyncRetry'
+import type { Web3Helper } from '../web3-helpers'
+import { useWeb3Connection } from './useWeb3Connection'
+
+export function useFungibleTokenBalance<T extends NetworkPluginID>(
+    pluginID?: T,
+    address?: string,
+    options?: Web3Helper.Web3ConnectionOptions<T>,
+) {
+    type GetFungibleTokenBalance = (address: string, options?: Web3Helper.Web3ConnectionOptions<T>) => Promise<string>
+
+    const connection = useWeb3Connection(pluginID, options)
+
+    return useAsyncRetry(async () => {
+        if (!connection) return '0'
+        return (connection.getFungibleTokenBalance as GetFungibleTokenBalance)(address ?? '')
+    }, [address, connection])
+}
diff --git a/packages/plugin-infra/src/web3/useFungibleTokenPrice.ts b/packages/plugin-infra/src/web3/useFungibleTokenPrice.ts
new file mode 100644
index 000000000000..66e9741aaa98
--- /dev/null
+++ b/packages/plugin-infra/src/web3/useFungibleTokenPrice.ts
@@ -0,0 +1,21 @@
+import { useAsyncRetry } from 'react-use'
+import type { NetworkPluginID } from '@masknet/web3-shared-base'
+import type { Web3Helper } from '../web3-helpers'
+import { useChainId } from './useChainId'
+import { useWeb3Hub } from './useWeb3Hub'
+
+export function useFungibleTokenPrice<T extends NetworkPluginID>(
+    pluginID: T,
+    address?: string,
+    options?: Web3Helper.Web3HubOptions<T>,
+) {
+    type GetFungibleTokenPrice = (chainId: Web3Helper.Definition[T]['ChainId'], address: string) => Promise<number>
+
+    const chainId = useChainId(pluginID, options?.chainId)
+    const hub = useWeb3Hub(pluginID, options)
+
+    return useAsyncRetry(async () => {
+        if (!chainId || !hub) return 0
+        return (hub.getFungibleTokenPrice as GetFungibleTokenPrice)(chainId, address ?? '')
+    }, [chainId, address, hub])
+}
diff --git a/packages/plugin-infra/src/web3/useFungibleTokenWatched.ts b/packages/plugin-infra/src/web3/useFungibleTokenWatched.ts
new file mode 100644
index 000000000000..444170beee9d
--- /dev/null
+++ b/packages/plugin-infra/src/web3/useFungibleTokenWatched.ts
@@ -0,0 +1,20 @@
+import { useState } from 'react'
+import type { NetworkPluginID } from '@masknet/web3-shared-base'
+import { useFungibleTokenBalance } from './useFungibleTokenBalance'
+import { useFungibleToken } from './useFungibleToken'
+
+export function useFungibleTokenWatched<T extends NetworkPluginID>(pluginID?: T, address_ = '') {
+    const [amount, setAmount] = useState('')
+    const [address, setAddress] = useState(address_)
+    const token = useFungibleToken(pluginID, address)
+    const balance = useFungibleTokenBalance(pluginID, address)
+
+    return {
+        amount,
+        setAmount,
+        address: token.value?.address ?? address,
+        setAddress,
+        token,
+        balance,
+    }
+}
diff --git a/packages/plugin-infra/src/web3/useFungibleTokens.ts b/packages/plugin-infra/src/web3/useFungibleTokens.ts
new file mode 100644
index 000000000000..6e4c48513808
--- /dev/null
+++ b/packages/plugin-infra/src/web3/useFungibleTokens.ts
@@ -0,0 +1,20 @@
+import { useAsyncRetry } from 'react-use'
+import { EMPTY_LIST } from '@masknet/shared-base'
+import type { FungibleToken, NetworkPluginID } from '@masknet/web3-shared-base'
+import type { Web3Helper } from '../web3-helpers'
+import { useWeb3Connection } from './useWeb3Connection'
+
+export function useFungibleTokens<T extends NetworkPluginID>(
+    pluginID?: T,
+    listOfAddress?: string[],
+    options?: Web3Helper.Web3ConnectionOptions<T>,
+) {
+    const connection = useWeb3Connection(pluginID, options)
+
+    return useAsyncRetry<
+        Array<FungibleToken<Web3Helper.Definition[T]['ChainId'], Web3Helper.Definition[T]['SchemaType']>>
+    >(async () => {
+        if (!connection) return EMPTY_LIST
+        return Promise.all(listOfAddress?.map((x) => connection.getFungibleToken(x)) ?? [])
+    }, [connection, listOfAddress?.join()])
+}
diff --git a/packages/plugin-infra/src/web3/useFungibleTokensBalance.ts b/packages/plugin-infra/src/web3/useFungibleTokensBalance.ts
new file mode 100644
index 000000000000..1b7b2f4fc678
--- /dev/null
+++ b/packages/plugin-infra/src/web3/useFungibleTokensBalance.ts
@@ -0,0 +1,23 @@
+import { EMPTY_OBJECT } from '@masknet/shared-base'
+import type { NetworkPluginID } from '@masknet/web3-shared-base'
+import useAsyncRetry from 'react-use/lib/useAsyncRetry'
+import type { Web3Helper } from '../web3-helpers'
+import { useWeb3Connection } from './useWeb3Connection'
+
+export function useFungibleTokensBalance<T extends NetworkPluginID>(
+    pluginID?: T,
+    listOfAddress?: string[],
+    options?: Web3Helper.Web3ConnectionOptions<T>,
+) {
+    type GetFungibleTokensBalance = (
+        listOfAddress: string[],
+        options?: Web3Helper.Web3ConnectionOptions<T>,
+    ) => Promise<Record<string, string>>
+
+    const connection = useWeb3Connection(pluginID, options)
+
+    return useAsyncRetry(async () => {
+        if (!connection) return EMPTY_OBJECT
+        return (connection.getFungibleTokensBalance as GetFungibleTokensBalance)(listOfAddress ?? [])
+    }, [listOfAddress?.join(), connection])
+}
diff --git a/packages/plugin-infra/src/web3/useFungibleTokensFromTokenList.ts b/packages/plugin-infra/src/web3/useFungibleTokensFromTokenList.ts
new file mode 100644
index 000000000000..eb7879f1571b
--- /dev/null
+++ b/packages/plugin-infra/src/web3/useFungibleTokensFromTokenList.ts
@@ -0,0 +1,21 @@
+import { useAsyncRetry } from 'react-use'
+import type { FungibleToken, NetworkPluginID } from '@masknet/web3-shared-base'
+import type { Web3Helper } from '../web3-helpers'
+import { useChainId } from './useChainId'
+import { useWeb3Hub } from './useWeb3Hub'
+
+export function useFungibleTokensFromTokenList<T extends NetworkPluginID>(
+    pluginID?: T,
+    options?: Web3Helper.Web3HubOptions<T>,
+) {
+    type GetFungibleTokens = (
+        chainId: Web3Helper.Definition[T]['ChainId'],
+    ) => Promise<Array<FungibleToken<Web3Helper.Definition[T]['ChainId'], Web3Helper.Definition[T]['SchemaType']>>>
+
+    const chainId = useChainId(pluginID)
+    const hub = useWeb3Hub(pluginID, options)
+
+    return useAsyncRetry(async () => {
+        return (hub?.getFungibleTokensFromTokenList as GetFungibleTokens | undefined)?.(chainId)
+    }, [chainId, hub])
+}
diff --git a/packages/plugin-infra/src/web3/useGasOptionType.ts b/packages/plugin-infra/src/web3/useGasOptionType.ts
new file mode 100644
index 000000000000..675b83d7174c
--- /dev/null
+++ b/packages/plugin-infra/src/web3/useGasOptionType.ts
@@ -0,0 +1,9 @@
+import { useSubscription } from 'use-subscription'
+import { GasOptionType, NetworkPluginID } from '@masknet/web3-shared-base'
+import { useWeb3State } from './useWeb3State'
+import { createConstantSubscription } from '@masknet/shared-base'
+
+export function useGasOptionType<T extends NetworkPluginID>(pluginID?: T) {
+    const { Settings } = useWeb3State(pluginID)
+    return useSubscription(Settings?.gasOptionType ?? createConstantSubscription(GasOptionType.NORMAL))
+}
diff --git a/packages/plugin-infra/src/web3/useGasOptions.ts b/packages/plugin-infra/src/web3/useGasOptions.ts
new file mode 100644
index 000000000000..5a96e04ae9ca
--- /dev/null
+++ b/packages/plugin-infra/src/web3/useGasOptions.ts
@@ -0,0 +1,20 @@
+import { useAsyncRetry } from 'react-use'
+import type { GasOptionType, NetworkPluginID } from '@masknet/web3-shared-base'
+import type { Web3Helper } from '../web3-helpers'
+import { useChainId } from './useChainId'
+import { useWeb3Hub } from './useWeb3Hub'
+
+export function useGasOptions<T extends NetworkPluginID>(pluginID?: T, options?: Web3Helper.Web3HubOptions<T>) {
+    type GetGasOptions = (
+        chainId: Web3Helper.Definition[T]['ChainId'],
+        options?: Web3Helper.Web3HubOptions<T>,
+    ) => Promise<Record<GasOptionType, Web3Helper.Definition[T]['GasOption']>>
+
+    const chainId = useChainId(pluginID)
+    const hub = useWeb3Hub(pluginID, options)
+
+    return useAsyncRetry(async () => {
+        if (!chainId || !hub) return
+        return (hub.getGasOptions as GetGasOptions)(chainId)
+    }, [chainId, hub])
+}
diff --git a/packages/plugin-infra/src/web3/useGasPrice.ts b/packages/plugin-infra/src/web3/useGasPrice.ts
new file mode 100644
index 000000000000..6ded9d6fdbde
--- /dev/null
+++ b/packages/plugin-infra/src/web3/useGasPrice.ts
@@ -0,0 +1,12 @@
+import { useAsyncRetry } from 'react-use'
+import type { NetworkPluginID } from '@masknet/web3-shared-base'
+import type { Web3Helper } from '../web3-helpers'
+import { useWeb3Connection } from './useWeb3Connection'
+
+export function useGasPrice<T extends NetworkPluginID>(pluginID?: T, options?: Web3Helper.Web3ConnectionOptions<T>) {
+    const connection = useWeb3Connection(pluginID, options)
+    return useAsyncRetry(async () => {
+        if (!connection) return '0'
+        return connection.getGasPrice() ?? '0'
+    }, [connection])
+}
diff --git a/packages/web3-shared/evm/hooks/useImageChecker.ts b/packages/plugin-infra/src/web3/useImageChecker.ts
similarity index 100%
rename from packages/web3-shared/evm/hooks/useImageChecker.ts
rename to packages/plugin-infra/src/web3/useImageChecker.ts
diff --git a/packages/plugin-infra/src/web3/useLookupAddress.ts b/packages/plugin-infra/src/web3/useLookupAddress.ts
new file mode 100644
index 000000000000..d27eea0b02f8
--- /dev/null
+++ b/packages/plugin-infra/src/web3/useLookupAddress.ts
@@ -0,0 +1,17 @@
+import { useAsyncRetry } from 'react-use'
+import type { NetworkPluginID } from '@masknet/web3-shared-base'
+import { useChainId } from './useChainId'
+import { useWeb3State } from './useWeb3State'
+import type { Web3Helper } from '../web3-helpers'
+
+export function useLookupAddress<T extends NetworkPluginID>(pluginId?: T, domain?: string) {
+    type LookupDomain = (chainId: Web3Helper.Definition[T]['ChainId'], domain?: string) => Promise<string | undefined>
+
+    const chainId = useChainId(pluginId)
+    const { NameService, Others } = useWeb3State(pluginId)
+
+    return useAsyncRetry(async () => {
+        if (!chainId || !Others?.isValidDomain?.(domain) || !NameService) return
+        return (NameService.lookup as LookupDomain)(chainId, domain)
+    }, [chainId, domain, NameService, Others])
+}
diff --git a/packages/plugin-infra/src/web3/useNameType.ts b/packages/plugin-infra/src/web3/useNameType.ts
deleted file mode 100644
index 1aad4f7b56c6..000000000000
--- a/packages/plugin-infra/src/web3/useNameType.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import type { NetworkPluginID } from '../web3-types'
-import { usePluginWeb3StateContext } from './Context'
-
-export function useNameType<T extends string>(pluginID?: NetworkPluginID) {
-    return usePluginWeb3StateContext(pluginID).nameType as T
-}
diff --git a/packages/plugin-infra/src/web3/useNativeToken.ts b/packages/plugin-infra/src/web3/useNativeToken.ts
new file mode 100644
index 000000000000..7cbf6cd125c9
--- /dev/null
+++ b/packages/plugin-infra/src/web3/useNativeToken.ts
@@ -0,0 +1,9 @@
+import type { NetworkPluginID } from '@masknet/web3-shared-base'
+import type { Web3Helper } from '../web3-helpers'
+import { useFungibleToken } from './useFungibleToken'
+import { useNativeTokenAddress } from './useNativeTokenAddress'
+
+export function useNativeToken<T extends NetworkPluginID>(pluginID?: T, options?: Web3Helper.Web3ConnectionOptions<T>) {
+    const nativeTokenAddress = useNativeTokenAddress(pluginID, options)
+    return useFungibleToken(pluginID, nativeTokenAddress, options)
+}
diff --git a/packages/plugin-infra/src/web3/useNativeTokenAddress.ts b/packages/plugin-infra/src/web3/useNativeTokenAddress.ts
new file mode 100644
index 000000000000..a8e6c045687e
--- /dev/null
+++ b/packages/plugin-infra/src/web3/useNativeTokenAddress.ts
@@ -0,0 +1,16 @@
+import type { NetworkPluginID } from '@masknet/web3-shared-base'
+import type { Web3Helper } from '../web3-helpers'
+import { useWeb3State } from './useWeb3State'
+
+export function useNativeTokenAddress<T extends NetworkPluginID>(
+    pluginID?: T,
+    options?: Web3Helper.Web3ConnectionOptions<T>,
+) {
+    type GetNativeTokenAddress = (chainId?: Web3Helper.Definition[T]['ChainId']) => string
+
+    const { Others } = useWeb3State(pluginID)
+    const nativeTokenAddress = (Others?.getNativeTokenAddress as GetNativeTokenAddress)(options?.chainId)
+
+    if (!nativeTokenAddress) throw new Error('No native token address.')
+    return nativeTokenAddress
+}
diff --git a/packages/plugin-infra/src/web3/useNativeTokenBalance.ts b/packages/plugin-infra/src/web3/useNativeTokenBalance.ts
new file mode 100644
index 000000000000..b91e4f6d7731
--- /dev/null
+++ b/packages/plugin-infra/src/web3/useNativeTokenBalance.ts
@@ -0,0 +1,20 @@
+import { useAsyncRetry } from 'react-use'
+import type { NetworkPluginID } from '@masknet/web3-shared-base'
+import type { Web3Helper } from '../web3-helpers'
+import { useAccount } from './useAccount'
+import { useWeb3Connection } from './useWeb3Connection'
+
+export function useNativeTokenBalance<T extends NetworkPluginID>(
+    pluginID?: T,
+    options?: Web3Helper.Web3ConnectionOptions<T>,
+) {
+    type GetNativeTokenBalance = (account: string, options?: Web3Helper.Web3ConnectionOptions<T>) => Promise<string>
+
+    const account = useAccount(pluginID, options?.account)
+    const connection = useWeb3Connection(pluginID, options)
+
+    return useAsyncRetry(async () => {
+        if (!connection) return '0'
+        return (connection.getNativeTokenBalance as GetNativeTokenBalance)(account)
+    }, [account, connection])
+}
diff --git a/packages/plugin-infra/src/web3/useNativeTokenPrice.ts b/packages/plugin-infra/src/web3/useNativeTokenPrice.ts
new file mode 100644
index 000000000000..43cb6f96cd42
--- /dev/null
+++ b/packages/plugin-infra/src/web3/useNativeTokenPrice.ts
@@ -0,0 +1,22 @@
+import { useAsyncRetry } from 'react-use'
+import type { NetworkPluginID } from '@masknet/web3-shared-base'
+import type { Web3Helper } from '../web3-helpers'
+import { useNativeTokenAddress } from './useNativeTokenAddress'
+import { useChainId } from '../entry-web3'
+import { useWeb3Hub } from './useWeb3Hub'
+
+export function useNativeTokenPrice<T extends NetworkPluginID>(pluginID: T, options?: Web3Helper.Web3HubOptions<T>) {
+    type GetFungibleTokenPrice = (
+        chainId: Web3Helper.Definition[T]['ChainId'],
+        address: string,
+        options?: Web3Helper.Web3HubOptions<T>,
+    ) => Promise<number>
+
+    const chainId = useChainId(pluginID)
+    const hub = useWeb3Hub(pluginID, options)
+    const nativeTokenAddress = useNativeTokenAddress(pluginID, options)
+
+    return useAsyncRetry(async () => {
+        return (hub?.getFungibleTokenPrice as GetFungibleTokenPrice)(chainId, nativeTokenAddress)
+    }, [chainId, nativeTokenAddress, hub])
+}
diff --git a/packages/plugin-infra/src/web3/useNetworkDescriptor.ts b/packages/plugin-infra/src/web3/useNetworkDescriptor.ts
index 4b04831429b2..db16ffa0d27a 100644
--- a/packages/plugin-infra/src/web3/useNetworkDescriptor.ts
+++ b/packages/plugin-infra/src/web3/useNetworkDescriptor.ts
@@ -1,17 +1,16 @@
-import type { NetworkPluginID } from '../web3-types'
+import type { NetworkPluginID } from '@masknet/web3-shared-base'
 import { useNetworkType } from './useNetworkType'
 import { useCurrentWeb3NetworkPluginID } from './Context'
 import { getPluginDefine } from '../manager/store'
 
-export function useNetworkDescriptor(
-    expectedChainIdOrNetworkTypeOrID?: number | string,
-    expectedPluginID?: NetworkPluginID,
+export function useNetworkDescriptor<T extends NetworkPluginID>(
+    expectedPluginID?: T,
+    expectedChainIdOrNetworkTypeOrID?: string | number,
 ) {
-    const pluginID = useCurrentWeb3NetworkPluginID()
-    const pid = expectedPluginID ?? pluginID
-    const networkType = useNetworkType(pid)
+    const pluginID = useCurrentWeb3NetworkPluginID(expectedPluginID)
+    const networkType = useNetworkType(pluginID)
 
-    return getPluginDefine(pid)?.declareWeb3Networks?.find((x) =>
+    return getPluginDefine(pluginID)?.declareWeb3Networks?.find((x) =>
         [x.chainId, x.type, x.ID].includes(expectedChainIdOrNetworkTypeOrID ?? networkType ?? ''),
     )
 }
diff --git a/packages/plugin-infra/src/web3/useNetworkDescriptors.ts b/packages/plugin-infra/src/web3/useNetworkDescriptors.ts
index 9227a0c835d6..f03b44f5b206 100644
--- a/packages/plugin-infra/src/web3/useNetworkDescriptors.ts
+++ b/packages/plugin-infra/src/web3/useNetworkDescriptors.ts
@@ -1,7 +1,9 @@
-import { useCurrentWeb3NetworkPluginID } from '.'
-import { getPluginDefine } from '../entry'
+import { EMPTY_LIST } from '@masknet/shared-base'
+import type { NetworkPluginID } from '@masknet/web3-shared-base'
+import { getPluginDefine } from '../manager/store'
+import { useCurrentWeb3NetworkPluginID } from './Context'
 
-export function useNetworkDescriptors(expectedPluginID?: string) {
-    const pluginID = useCurrentWeb3NetworkPluginID()
-    return getPluginDefine(expectedPluginID ?? pluginID)?.declareWeb3Networks ?? []
+export function useNetworkDescriptors<T extends NetworkPluginID>(expectedPluginID?: T) {
+    const pluginID = useCurrentWeb3NetworkPluginID(expectedPluginID)
+    return getPluginDefine(pluginID)?.declareWeb3Networks ?? EMPTY_LIST
 }
diff --git a/packages/plugin-infra/src/web3/useNetworkType.ts b/packages/plugin-infra/src/web3/useNetworkType.ts
index df46ff5aaf30..9639c3c99aea 100644
--- a/packages/plugin-infra/src/web3/useNetworkType.ts
+++ b/packages/plugin-infra/src/web3/useNetworkType.ts
@@ -1,6 +1,18 @@
-import type { NetworkPluginID } from '../web3-types'
-import { usePluginWeb3StateContext } from './Context'
+import { Subscription, useSubscription } from 'use-subscription'
+import type { NetworkPluginID } from '@masknet/web3-shared-base'
+import type { Web3Helper } from '../web3-helpers'
+import { useWeb3State } from './useWeb3State'
+import { UNDEFINED } from '../utils/subscription'
+import { useDefaultNetworkType } from './useDefaultNetworkType'
+import { useCurrentWeb3NetworkNetworkType } from './Context'
 
-export function useNetworkType<T extends string>(pluginID?: NetworkPluginID) {
-    return usePluginWeb3StateContext(pluginID).networkType as T
+export function useNetworkType<T extends NetworkPluginID>(pluginID?: T) {
+    const { Provider } = useWeb3State(pluginID)
+    const currentNetworkType = useCurrentWeb3NetworkNetworkType(pluginID)
+    const defaultNetworkType = useDefaultNetworkType(pluginID) as Web3Helper.Definition[T]['NetworkType']
+    const networkType = useSubscription(
+        (Provider?.networkType ?? UNDEFINED) as Subscription<Web3Helper.Definition[T]['NetworkType'] | undefined>,
+    )
+
+    return currentNetworkType ?? networkType ?? defaultNetworkType
 }
diff --git a/packages/plugin-infra/src/web3/useNonFungibleAsset.ts b/packages/plugin-infra/src/web3/useNonFungibleAsset.ts
new file mode 100644
index 000000000000..8343638eecf3
--- /dev/null
+++ b/packages/plugin-infra/src/web3/useNonFungibleAsset.ts
@@ -0,0 +1,25 @@
+import { useAsyncRetry } from 'react-use'
+import type { NonFungibleAsset, NetworkPluginID } from '@masknet/web3-shared-base'
+import type { Web3Helper } from '../web3-helpers'
+import { useAccount } from '../entry-web3'
+import { useWeb3Hub } from './useWeb3Hub'
+
+export function useNonFungibleAsset<T extends NetworkPluginID>(
+    pluginID?: T,
+    address?: string,
+    id?: string,
+    options?: Web3Helper.Web3HubOptions<T>,
+) {
+    type GetNonFungibleAsset = (
+        address: string,
+        id: string,
+    ) => Promise<NonFungibleAsset<Web3Helper.Definition[T]['ChainId'], Web3Helper.Definition[T]['SchemaType']>>
+
+    const account = useAccount(pluginID)
+    const hub = useWeb3Hub(pluginID, options)
+
+    return useAsyncRetry(async () => {
+        if (!address || !id || !hub) return
+        return (hub.getNonFungibleAsset as GetNonFungibleAsset)(address, id)
+    }, [address, account, id, hub])
+}
diff --git a/packages/plugin-infra/src/web3/useNonFungibleAssetSourceType.ts b/packages/plugin-infra/src/web3/useNonFungibleAssetSourceType.ts
new file mode 100644
index 000000000000..b1caf47c814e
--- /dev/null
+++ b/packages/plugin-infra/src/web3/useNonFungibleAssetSourceType.ts
@@ -0,0 +1,9 @@
+import { useSubscription } from 'use-subscription'
+import type { NetworkPluginID } from '@masknet/web3-shared-base'
+import { useWeb3State } from './useWeb3State'
+import { UNDEFINED } from '../utils/subscription'
+
+export function useNonFungibleAssetSourceType<T extends NetworkPluginID>(pluginID?: T) {
+    const { Settings } = useWeb3State(pluginID)
+    return useSubscription(Settings?.nonFungibleAssetSourceType ?? UNDEFINED)
+}
diff --git a/packages/plugin-infra/src/web3/useNonFungibleAssets.ts b/packages/plugin-infra/src/web3/useNonFungibleAssets.ts
new file mode 100644
index 000000000000..99c340481918
--- /dev/null
+++ b/packages/plugin-infra/src/web3/useNonFungibleAssets.ts
@@ -0,0 +1,28 @@
+import { useAsyncRetry } from 'react-use'
+import { asyncIteratorToArray } from '@masknet/shared-base'
+import type { NonFungibleAsset, NetworkPluginID } from '@masknet/web3-shared-base'
+import type { Web3Helper } from '../web3-helpers'
+import { useAccount } from './useAccount'
+import { useWeb3Hub } from './useWeb3Hub'
+
+export function useNonFungibleAssets<T extends NetworkPluginID>(
+    pluginID?: T,
+    schemaType?: Web3Helper.Definition[T]['SchemaType'],
+    options?: Web3Helper.Web3HubOptions<T>,
+) {
+    type GetAllNonFungibleAssets = (
+        address: string,
+    ) => AsyncIterableIterator<
+        NonFungibleAsset<Web3Helper.Definition[T]['ChainId'], Web3Helper.Definition[T]['SchemaType']>
+    >
+
+    const account = useAccount(pluginID)
+    const hub = useWeb3Hub(pluginID, options)
+
+    return useAsyncRetry(async () => {
+        if (!account || !hub) return []
+        const assets = await asyncIteratorToArray((hub.getAllNonFungibleAssets as GetAllNonFungibleAssets)(account))
+        console.log(assets)
+        return assets.length && schemaType ? assets.filter((x) => x.schema === schemaType) : assets
+    }, [account, schemaType, hub])
+}
diff --git a/packages/plugin-infra/src/web3/useNonFungibleCollections.ts b/packages/plugin-infra/src/web3/useNonFungibleCollections.ts
new file mode 100644
index 000000000000..31ded7d1bea5
--- /dev/null
+++ b/packages/plugin-infra/src/web3/useNonFungibleCollections.ts
@@ -0,0 +1,26 @@
+import { useAsyncRetry } from 'react-use'
+import { asyncIteratorToArray } from '@masknet/shared-base'
+import type { NonFungibleTokenCollection, NetworkPluginID, HubOptions } from '@masknet/web3-shared-base'
+import type { Web3Helper } from '../web3-helpers'
+import { useAccount } from './useAccount'
+import { useWeb3Hub } from './useWeb3Hub'
+
+export function useNonFungibleCollections<T extends NetworkPluginID>(
+    pluginID?: T,
+    chainId?: Web3Helper.Definition[T]['ChainId'],
+) {
+    type GetAllNonFungibleCollections = (
+        address: string,
+        options?: HubOptions<Web3Helper.Definition[T]['ChainId']>,
+    ) => AsyncIterableIterator<NonFungibleTokenCollection<Web3Helper.Definition[T]['ChainId']>>
+
+    const account = useAccount(pluginID)
+    const hub = useWeb3Hub(pluginID)
+
+    return useAsyncRetry(async () => {
+        if (!account || !hub) return []
+        return asyncIteratorToArray(
+            (hub.getAllNonFungibleCollections as GetAllNonFungibleCollections)(account, { chainId }),
+        )
+    }, [account, chainId, hub])
+}
diff --git a/packages/plugin-infra/src/web3/useNonFungibleToken.ts b/packages/plugin-infra/src/web3/useNonFungibleToken.ts
new file mode 100644
index 000000000000..67fa45c8884a
--- /dev/null
+++ b/packages/plugin-infra/src/web3/useNonFungibleToken.ts
@@ -0,0 +1,24 @@
+import type { NetworkPluginID, NonFungibleToken } from '@masknet/web3-shared-base'
+import useAsyncRetry from 'react-use/lib/useAsyncRetry'
+import type { Web3Helper } from '../web3-helpers'
+import { useWeb3Connection } from './useWeb3Connection'
+
+export function useNonFungibleToken<T extends NetworkPluginID>(
+    pluginID?: T,
+    address?: string,
+    id?: string,
+    options?: Web3Helper.Web3ConnectionOptions<T>,
+) {
+    type GetNonFungibleToken = (
+        address: string,
+        id: string,
+        options?: Web3Helper.Web3ConnectionOptions<T>,
+    ) => Promise<NonFungibleToken<Web3Helper.Definition[T]['ChainId'], Web3Helper.Definition[T]['SchemaType']>>
+
+    const connection = useWeb3Connection(pluginID, options)
+
+    return useAsyncRetry(async () => {
+        if (!address || !id || !connection) return
+        return (connection.getNonFungibleToken as GetNonFungibleToken)(address, id)
+    }, [address, id, connection])
+}
diff --git a/packages/plugin-infra/src/web3/useNonFungibleTokenBalance.ts b/packages/plugin-infra/src/web3/useNonFungibleTokenBalance.ts
new file mode 100644
index 000000000000..dc36f5518bae
--- /dev/null
+++ b/packages/plugin-infra/src/web3/useNonFungibleTokenBalance.ts
@@ -0,0 +1,22 @@
+import type { NetworkPluginID } from '@masknet/web3-shared-base'
+import useAsyncRetry from 'react-use/lib/useAsyncRetry'
+import type { Web3Helper } from '../web3-helpers'
+import { useWeb3Connection } from './useWeb3Connection'
+
+export function useNonFungibleTokenBalance<T extends NetworkPluginID>(
+    pluginID?: T,
+    address?: string,
+    options?: Web3Helper.Web3ConnectionOptions<T>,
+) {
+    type GetNonFungibleTokenBalance = (
+        address: string,
+        options?: Web3Helper.Web3ConnectionOptions<T>,
+    ) => Promise<string>
+
+    const connection = useWeb3Connection(pluginID, options)
+
+    return useAsyncRetry(async () => {
+        if (!address || !connection) return '0'
+        return (connection.getNonFungibleTokenBalance as GetNonFungibleTokenBalance)(address)
+    }, [address, connection])
+}
diff --git a/packages/plugin-infra/src/web3/useNonFungibleTokenContract.ts b/packages/plugin-infra/src/web3/useNonFungibleTokenContract.ts
new file mode 100644
index 000000000000..990a1adb39f9
--- /dev/null
+++ b/packages/plugin-infra/src/web3/useNonFungibleTokenContract.ts
@@ -0,0 +1,23 @@
+import { useAsyncRetry } from 'react-use'
+import type { NetworkPluginID, NonFungibleTokenContract } from '@masknet/web3-shared-base'
+import type { Web3Helper } from '../web3-helpers'
+import { useWeb3Connection } from './useWeb3Connection'
+
+export function useNonFungibleTokenContract<T extends NetworkPluginID>(
+    pluginID?: T,
+    address?: string,
+    id?: string,
+    options?: Web3Helper.Web3ConnectionOptions<T>,
+) {
+    type GetNonFungibleTokenContract = (
+        address: string,
+        id: string,
+        options?: Web3Helper.Web3ConnectionOptions<T>,
+    ) => Promise<NonFungibleTokenContract<Web3Helper.Definition[T]['ChainId'], Web3Helper.Definition[T]['SchemaType']>>
+    const connection = useWeb3Connection(pluginID, options)
+
+    return useAsyncRetry(async () => {
+        if (!connection || !address || !id) return
+        return (connection.getNonFungibleTokenContract as GetNonFungibleTokenContract)(address, id)
+    }, [address, id, connection])
+}
diff --git a/packages/plugin-infra/src/web3/useNonFungibleTokenPrice.ts b/packages/plugin-infra/src/web3/useNonFungibleTokenPrice.ts
new file mode 100644
index 000000000000..abbfe8e35e4d
--- /dev/null
+++ b/packages/plugin-infra/src/web3/useNonFungibleTokenPrice.ts
@@ -0,0 +1,27 @@
+import { useAsyncRetry } from 'react-use'
+import type { NetworkPluginID } from '@masknet/web3-shared-base'
+import type { Web3Helper } from '../web3-helpers'
+import { useChainId } from './useChainId'
+import { useWeb3Hub } from './useWeb3Hub'
+
+export function useNonFungibleTokenPrice<T extends NetworkPluginID>(
+    pluginID: T,
+    address?: string,
+    tokenId?: string,
+    options?: Web3Helper.Web3HubOptions<T>,
+) {
+    type GetNonFungibleTokenPrice = (
+        chainId: Web3Helper.Definition[T]['ChainId'],
+        address: string,
+        tokenId: string,
+        options?: Web3Helper.Web3HubOptions<T>,
+    ) => Promise<number>
+
+    const chainId = useChainId(pluginID, options?.chainId)
+    const hub = useWeb3Hub(pluginID, options)
+
+    return useAsyncRetry(async () => {
+        if (!chainId || !address || !tokenId) return 0
+        return (hub?.getNonFungibleTokenPrice as GetNonFungibleTokenPrice)(chainId, address, tokenId)
+    }, [chainId, address, tokenId, hub])
+}
diff --git a/packages/plugin-infra/src/web3/useNonFungibleTokens.ts b/packages/plugin-infra/src/web3/useNonFungibleTokens.ts
new file mode 100644
index 000000000000..05921d998942
--- /dev/null
+++ b/packages/plugin-infra/src/web3/useNonFungibleTokens.ts
@@ -0,0 +1,21 @@
+import { useAsyncRetry } from 'react-use'
+import { EMPTY_LIST } from '@masknet/shared-base'
+import type { NonFungibleToken, NetworkPluginID } from '@masknet/web3-shared-base'
+import type { Web3Helper } from '../web3-helpers'
+import { useWeb3Connection } from './useWeb3Connection'
+
+export function useNonFungibleTokens<T extends NetworkPluginID>(
+    pluginID?: T,
+    // pair: [address, tokenId]
+    listOfPairs?: [string, string],
+    options?: Web3Helper.Web3ConnectionOptions<T>,
+) {
+    const connection = useWeb3Connection(pluginID, options)
+
+    return useAsyncRetry<
+        Array<NonFungibleToken<Web3Helper.Definition[T]['ChainId'], Web3Helper.Definition[T]['SchemaType']>>
+    >(async () => {
+        if (!connection) return EMPTY_LIST
+        return Promise.all(listOfPairs?.map((x) => connection.getNonFungibleToken(x[0], x[1])) ?? [])
+    }, [connection, listOfPairs?.join()])
+}
diff --git a/packages/plugin-infra/src/web3/useNonFungibleTokensBalance.ts b/packages/plugin-infra/src/web3/useNonFungibleTokensBalance.ts
new file mode 100644
index 000000000000..ac9211cf35e8
--- /dev/null
+++ b/packages/plugin-infra/src/web3/useNonFungibleTokensBalance.ts
@@ -0,0 +1,23 @@
+import { EMPTY_OBJECT } from '@masknet/shared-base'
+import type { NetworkPluginID } from '@masknet/web3-shared-base'
+import useAsyncRetry from 'react-use/lib/useAsyncRetry'
+import type { Web3Helper } from '../web3-helpers'
+import { useWeb3Connection } from './useWeb3Connection'
+
+export function useNonFungibleTokensBalance<T extends NetworkPluginID>(
+    pluginID?: T,
+    listOfAddress?: string[],
+    options?: Web3Helper.Web3ConnectionOptions<T>,
+) {
+    type GetNonFungibleTokensBalance = (
+        listOfAddress: string[],
+        options?: Web3Helper.Web3ConnectionOptions<T>,
+    ) => Promise<Record<string, string>>
+
+    const connection = useWeb3Connection(pluginID, options)
+
+    return useAsyncRetry(async () => {
+        if (!connection) return EMPTY_OBJECT
+        return (connection.getNonFungibleTokensBalance as GetNonFungibleTokensBalance)(listOfAddress ?? [])
+    }, [listOfAddress?.join(), connection])
+}
diff --git a/packages/plugin-infra/src/web3/useNonFungibleTokensFromTokenList.ts b/packages/plugin-infra/src/web3/useNonFungibleTokensFromTokenList.ts
new file mode 100644
index 000000000000..a4605a89fd56
--- /dev/null
+++ b/packages/plugin-infra/src/web3/useNonFungibleTokensFromTokenList.ts
@@ -0,0 +1,21 @@
+import { useAsyncRetry } from 'react-use'
+import type { NetworkPluginID, NonFungibleToken } from '@masknet/web3-shared-base'
+import type { Web3Helper } from '../web3-helpers'
+import { useWeb3Hub } from './useWeb3Hub'
+import { useChainId } from './useChainId'
+
+export function useNonFungibleTokensFromTokenList<T extends NetworkPluginID>(
+    pluginID?: T,
+    options?: Web3Helper.Web3HubOptions<T>,
+) {
+    type GetNonFungibleTokens = (
+        chainId: Web3Helper.Definition[T]['ChainId'],
+    ) => Promise<Array<NonFungibleToken<Web3Helper.Definition[T]['ChainId'], Web3Helper.Definition[T]['SchemaType']>>>
+
+    const chainId = useChainId(pluginID)
+    const hub = useWeb3Hub(pluginID, options)
+
+    return useAsyncRetry(async () => {
+        return (hub?.getNonFungibleTokensFromTokenList as GetNonFungibleTokens | undefined)?.(chainId)
+    }, [chainId, hub])
+}
diff --git a/packages/plugin-infra/src/web3/useProviderDescriptor.ts b/packages/plugin-infra/src/web3/useProviderDescriptor.ts
index 41056dc9709e..12d85bd0bf05 100644
--- a/packages/plugin-infra/src/web3/useProviderDescriptor.ts
+++ b/packages/plugin-infra/src/web3/useProviderDescriptor.ts
@@ -1,13 +1,16 @@
-import type { NetworkPluginID } from '../web3-types'
+import type { NetworkPluginID } from '@masknet/web3-shared-base'
 import { useProviderType } from './useProviderType'
 import { useCurrentWeb3NetworkPluginID } from './Context'
 import { getPluginDefine } from '../manager/store'
 
-export function useProviderDescriptor(expectedProviderTypeOrID?: string, expectedPluginID?: NetworkPluginID) {
-    const pluginID = useCurrentWeb3NetworkPluginID()
-    const providerType = useProviderType(expectedPluginID ?? pluginID)
+export function useProviderDescriptor<T extends NetworkPluginID>(
+    expectedPluginID?: T,
+    expectedProviderTypeOrID?: string,
+) {
+    const pluginID = useCurrentWeb3NetworkPluginID(expectedPluginID)
+    const providerType = useProviderType(pluginID)
 
-    return getPluginDefine(expectedPluginID ?? pluginID)?.declareWeb3Providers?.find((x) =>
+    return getPluginDefine(pluginID)?.declareWeb3Providers?.find((x) =>
         [x.type, x.ID].includes(expectedProviderTypeOrID ?? providerType ?? ''),
     )
 }
diff --git a/packages/plugin-infra/src/web3/useProviderDescriptors.ts b/packages/plugin-infra/src/web3/useProviderDescriptors.ts
index 6df454cebe58..2e51030ab4cb 100644
--- a/packages/plugin-infra/src/web3/useProviderDescriptors.ts
+++ b/packages/plugin-infra/src/web3/useProviderDescriptors.ts
@@ -1,7 +1,9 @@
-import { useCurrentWeb3NetworkPluginID } from '.'
-import { getPluginDefine } from '../entry'
+import { EMPTY_LIST } from '@masknet/shared-base'
+import type { NetworkPluginID } from '@masknet/web3-shared-base'
+import { getPluginDefine } from '../manager/store'
+import { useCurrentWeb3NetworkPluginID } from './Context'
 
-export function useProviderDescriptors(expectedPluginID?: string) {
-    const pluginID = useCurrentWeb3NetworkPluginID()
-    return getPluginDefine(expectedPluginID ?? pluginID)?.declareWeb3Providers ?? []
+export function useProviderDescriptors<T extends NetworkPluginID>(expectedPluginID?: T) {
+    const pluginID = useCurrentWeb3NetworkPluginID(expectedPluginID)
+    return getPluginDefine(pluginID)?.declareWeb3Providers ?? EMPTY_LIST
 }
diff --git a/packages/plugin-infra/src/web3/useProviderReady.ts b/packages/plugin-infra/src/web3/useProviderReady.ts
new file mode 100644
index 000000000000..3a75967dd10b
--- /dev/null
+++ b/packages/plugin-infra/src/web3/useProviderReady.ts
@@ -0,0 +1,18 @@
+import { useMemo } from 'react'
+import type { NetworkPluginID } from '@masknet/web3-shared-base'
+import type { Web3Helper } from '../web3-helpers'
+import { useWeb3State } from './useWeb3State'
+
+export function useProviderReady<T extends NetworkPluginID>(
+    pluginID?: T,
+    providerType?: Web3Helper.Definition[T]['ProviderType'],
+) {
+    type IsReady = (providerType: Web3Helper.Definition[T]['ProviderType']) => boolean
+
+    const { Provider } = useWeb3State(pluginID)
+
+    return useMemo(async () => {
+        if (!providerType || !Provider) return false
+        return (Provider.isReady as IsReady)(providerType) ?? false
+    }, [providerType, Provider])
+}
diff --git a/packages/plugin-infra/src/web3/useProviderType.ts b/packages/plugin-infra/src/web3/useProviderType.ts
index 26750585a473..d5f6467876bf 100644
--- a/packages/plugin-infra/src/web3/useProviderType.ts
+++ b/packages/plugin-infra/src/web3/useProviderType.ts
@@ -1,6 +1,16 @@
-import type { NetworkPluginID } from '../web3-types'
-import { usePluginWeb3StateContext } from './Context'
+import { Subscription, useSubscription } from 'use-subscription'
+import type { NetworkPluginID } from '@masknet/web3-shared-base'
+import type { Web3Helper } from '../web3-helpers'
+import { useWeb3State } from './useWeb3State'
+import { UNDEFINED } from '../utils/subscription'
+import { useCurrentWeb3NetworkProviderType } from './Context'
 
-export function useProviderType<T extends string>(pluginID?: NetworkPluginID) {
-    return usePluginWeb3StateContext(pluginID).providerType as T
+export function useProviderType<T extends NetworkPluginID>(pluginID?: T) {
+    const { Provider } = useWeb3State(pluginID)
+    const currentProviderType = useCurrentWeb3NetworkProviderType(pluginID)
+    const providerType = useSubscription(
+        (Provider?.providerType ?? UNDEFINED) as Subscription<Web3Helper.Definition[T]['ProviderType'] | undefined>,
+    )
+
+    return currentProviderType ?? providerType
 }
diff --git a/packages/plugin-infra/src/web3/useRecentTransactions.ts b/packages/plugin-infra/src/web3/useRecentTransactions.ts
new file mode 100644
index 000000000000..d769dd60ee2a
--- /dev/null
+++ b/packages/plugin-infra/src/web3/useRecentTransactions.ts
@@ -0,0 +1,21 @@
+import { useMemo } from 'react'
+import { Subscription, useSubscription } from 'use-subscription'
+import type { NetworkPluginID, RecentTransaction, TransactionStatusType } from '@masknet/web3-shared-base'
+import type { Web3Helper } from '../web3-helpers'
+import { useWeb3State } from './useWeb3State'
+import { EMPTY_ARRAY } from '../utils/subscription'
+
+export function useRecentTransactions<T extends NetworkPluginID>(pluginID?: T, status?: TransactionStatusType) {
+    const { Transaction } = useWeb3State(pluginID)
+    const transactions = useSubscription(
+        (Transaction?.transactions ?? EMPTY_ARRAY) as Subscription<
+            Array<RecentTransaction<Web3Helper.Definition[T]['ChainId'], Web3Helper.Definition[T]['Transaction']>>
+        >,
+    )
+    return useMemo(() => {
+        return (status ? transactions.filter((x) => status === x.status) : transactions).map((x) => ({
+            ...x,
+            _tx: x.candidates[x.indexId],
+        }))
+    }, [status, transactions])
+}
diff --git a/packages/plugin-infra/src/web3/useRemoveTransaction.ts b/packages/plugin-infra/src/web3/useRemoveTransaction.ts
new file mode 100644
index 000000000000..e3ab0151eb0b
--- /dev/null
+++ b/packages/plugin-infra/src/web3/useRemoveTransaction.ts
@@ -0,0 +1,26 @@
+import { useCallback } from 'react'
+import type { NetworkPluginID } from '@masknet/web3-shared-base'
+import { useAccount } from './useAccount'
+import { useChainId } from './useChainId'
+import { useWeb3State } from './useWeb3State'
+import type { Web3Helper } from '../web3-helpers'
+
+export function useRemoveTransactionCallback<T extends NetworkPluginID>(pluginID?: NetworkPluginID) {
+    type RemoveTransactions = (
+        chainId: Web3Helper.Definition[T]['ChainId'],
+        account: string,
+        id: string,
+    ) => Promise<void>
+
+    const account = useAccount(pluginID)
+    const chainId = useChainId(pluginID)
+    const { Transaction } = useWeb3State(pluginID)
+
+    return useCallback(
+        async (id: string) => {
+            if (!account) return
+            return (Transaction?.removeTransaction as RemoveTransactions | undefined)?.(chainId, account, id)
+        },
+        [chainId, account, Transaction],
+    )
+}
diff --git a/packages/plugin-infra/src/web3/useReverseAddress.ts b/packages/plugin-infra/src/web3/useReverseAddress.ts
new file mode 100644
index 000000000000..4019b06198f6
--- /dev/null
+++ b/packages/plugin-infra/src/web3/useReverseAddress.ts
@@ -0,0 +1,20 @@
+import { useAsyncRetry } from 'react-use'
+import type { NetworkPluginID } from '@masknet/web3-shared-base'
+import { useChainId } from './useChainId'
+import { useWeb3State } from './useWeb3State'
+import type { Web3Helper } from '../web3-helpers'
+
+export function useReverseAddress<T extends NetworkPluginID>(pluginID?: T, address?: string) {
+    type ReverseAddress = (
+        chainId: Web3Helper.Definition[T]['ChainId'],
+        address?: string,
+    ) => Promise<string | undefined>
+
+    const chainId = useChainId(pluginID)
+    const { NameService, Others } = useWeb3State(pluginID)
+
+    return useAsyncRetry(async () => {
+        if (!chainId || !Others?.isValidAddress?.(address) || !NameService) return
+        return (NameService.reverse as ReverseAddress)(chainId, address)
+    }, [address, chainId, NameService])
+}
diff --git a/packages/plugin-infra/src/web3/useRiskWarningApproved.ts b/packages/plugin-infra/src/web3/useRiskWarningApproved.ts
new file mode 100644
index 000000000000..b68ea1d59863
--- /dev/null
+++ b/packages/plugin-infra/src/web3/useRiskWarningApproved.ts
@@ -0,0 +1,9 @@
+import type { NetworkPluginID } from '@masknet/web3-shared-base'
+import { useSubscription } from 'use-subscription'
+import { FALSE } from '../utils/subscription'
+import { useWeb3State } from './useWeb3State'
+
+export function useRiskWarningApproved<T extends NetworkPluginID>(pluginID?: T) {
+    const { RiskWarning } = useWeb3State(pluginID)
+    return useSubscription(RiskWarning?.approved ?? FALSE)
+}
diff --git a/packages/plugin-infra/src/web3/useSchemaType.ts b/packages/plugin-infra/src/web3/useSchemaType.ts
new file mode 100644
index 000000000000..db0434bcca60
--- /dev/null
+++ b/packages/plugin-infra/src/web3/useSchemaType.ts
@@ -0,0 +1,21 @@
+import { useAsyncRetry } from 'react-use'
+import type { NetworkPluginID } from '@masknet/web3-shared-base'
+import { useWeb3Connection, Web3Helper } from '../entry-web3'
+
+export function useSchemaType<T extends NetworkPluginID>(
+    pluginID?: T,
+    address?: string,
+    options?: Web3Helper.Web3ConnectionOptions<T>,
+) {
+    type GetSchemaType = (
+        address: string,
+        options?: Web3Helper.Web3ConnectionOptions<T>,
+    ) => Promise<Web3Helper.Definition[T]['SchemaType']>
+
+    const connection = useWeb3Connection(pluginID, options)
+
+    return useAsyncRetry(async () => {
+        if (!address) return
+        return (connection?.getSchemaType as GetSchemaType | undefined)?.(address, options)
+    }, [address])
+}
diff --git a/packages/web3-shared/evm/hooks/useSocketOnce.ts b/packages/plugin-infra/src/web3/useSocketOnce.ts
similarity index 100%
rename from packages/web3-shared/evm/hooks/useSocketOnce.ts
rename to packages/plugin-infra/src/web3/useSocketOnce.ts
diff --git a/packages/plugin-infra/src/web3/useTokenPrice.ts b/packages/plugin-infra/src/web3/useTokenPrice.ts
deleted file mode 100644
index 2c8d42b9c4fc..000000000000
--- a/packages/plugin-infra/src/web3/useTokenPrice.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import type { NetworkPluginID, CurrencyType } from '../web3-types'
-import { usePluginWeb3StateContext } from './Context'
-
-export function useTokenPrice(id: string, currencyType: string, pluginID?: NetworkPluginID) {
-    const { prices } = usePluginWeb3StateContext(pluginID) ?? {}
-    return prices?.[id][currencyType as CurrencyType] ?? 0
-}
diff --git a/packages/plugin-infra/src/web3/useTransactionType.ts b/packages/plugin-infra/src/web3/useTransactionType.ts
deleted file mode 100644
index 3fea9939d47e..000000000000
--- a/packages/plugin-infra/src/web3/useTransactionType.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import type { NetworkPluginID } from '../web3-types'
-import { usePluginWeb3StateContext } from './Context'
-
-export function useTransactionType<T extends string>(pluginID?: NetworkPluginID) {
-    return usePluginWeb3StateContext(pluginID).transactionType as T
-}
diff --git a/packages/plugin-infra/src/web3/useTransactions.ts b/packages/plugin-infra/src/web3/useTransactions.ts
new file mode 100644
index 000000000000..03d04173e846
--- /dev/null
+++ b/packages/plugin-infra/src/web3/useTransactions.ts
@@ -0,0 +1,17 @@
+import type { NetworkPluginID } from '@masknet/web3-shared-base'
+import { useAsyncRetry } from 'react-use'
+import { useAccount, useChainId, useWeb3Hub } from '../entry-web3'
+import type { Web3Helper } from '../web3-helpers'
+
+export function useTransactions<T extends NetworkPluginID>(
+    pluginID?: NetworkPluginID,
+    options?: Web3Helper.Web3ConnectionOptions<T>,
+) {
+    const account = useAccount(pluginID)
+    const chainId = useChainId(pluginID)
+    const hub = useWeb3Hub(pluginID, options)
+
+    return useAsyncRetry(async () => {
+        return hub?.getTransactions(chainId, account)
+    }, [account, hub, account, chainId])
+}
diff --git a/packages/plugin-infra/src/web3/useTrustedFungibleTokens.ts b/packages/plugin-infra/src/web3/useTrustedFungibleTokens.ts
new file mode 100644
index 000000000000..75e4eae84a6f
--- /dev/null
+++ b/packages/plugin-infra/src/web3/useTrustedFungibleTokens.ts
@@ -0,0 +1,23 @@
+import { useMemo } from 'react'
+import { Subscription, useSubscription } from 'use-subscription'
+import type { FungibleToken, NetworkPluginID } from '@masknet/web3-shared-base'
+import { EMPTY_ARRAY } from '../utils/subscription'
+import type { Web3Helper } from '../web3-helpers'
+import { useWeb3State } from './useWeb3State'
+
+export function useTrustedFungibleTokens<T extends NetworkPluginID>(
+    pluginID?: T,
+    schemaType?: Web3Helper.Definition[T]['SchemaType'],
+) {
+    const { Token } = useWeb3State(pluginID)
+    const fungibleTokens = useSubscription(
+        (Token?.trustedFungibleTokens ?? EMPTY_ARRAY) as Subscription<
+            Array<FungibleToken<Web3Helper.Definition[T]['ChainId'], Web3Helper.Definition[T]['SchemaType']>>
+        >,
+    )
+    return useMemo(() => {
+        return fungibleTokens.length && schemaType
+            ? fungibleTokens.filter((x) => x.schema === schemaType)
+            : fungibleTokens
+    }, [schemaType, fungibleTokens])
+}
diff --git a/packages/plugin-infra/src/web3/useTrustedNonFungibleTokens.ts b/packages/plugin-infra/src/web3/useTrustedNonFungibleTokens.ts
new file mode 100644
index 000000000000..2b7d9cb2ac39
--- /dev/null
+++ b/packages/plugin-infra/src/web3/useTrustedNonFungibleTokens.ts
@@ -0,0 +1,23 @@
+import { useMemo } from 'react'
+import { Subscription, useSubscription } from 'use-subscription'
+import type { NetworkPluginID, NonFungibleToken } from '@masknet/web3-shared-base'
+import type { Web3Helper } from '../web3-helpers'
+import { useWeb3State } from './useWeb3State'
+import { EMPTY_ARRAY } from '../utils/subscription'
+
+export function useTrustedNonFungibleTokens<T extends NetworkPluginID>(
+    pluginID?: T,
+    schemaType?: Web3Helper.Definition[T]['SchemaType'],
+) {
+    const { Token } = useWeb3State(pluginID)
+    const nonFungibleTokens = useSubscription(
+        (Token?.trustedNonFungibleTokens ?? EMPTY_ARRAY) as Subscription<
+            Array<NonFungibleToken<Web3Helper.Definition[T]['ChainId'], Web3Helper.Definition[T]['SchemaType']>>
+        >,
+    )
+    return useMemo(() => {
+        return nonFungibleTokens.length && schemaType
+            ? nonFungibleTokens.filter((x) => x.schema === schemaType)
+            : nonFungibleTokens
+    }, [schemaType, nonFungibleTokens])
+}
diff --git a/packages/plugin-infra/src/web3/useWallet.ts b/packages/plugin-infra/src/web3/useWallet.ts
index 3280d2f85635..034a15bb9453 100644
--- a/packages/plugin-infra/src/web3/useWallet.ts
+++ b/packages/plugin-infra/src/web3/useWallet.ts
@@ -1,10 +1,15 @@
-import type { NetworkPluginID } from '../web3-types'
+import { useMemo } from 'react'
+import { useSubscription } from 'use-subscription'
+import type { NetworkPluginID } from '@masknet/web3-shared-base'
+import { EMPTY_ARRAY } from '../utils/subscription'
 import { useAccount } from './useAccount'
-import { usePluginWeb3StateContext } from './Context'
+import { useWeb3State } from './useWeb3State'
 
-export function useWallet(pluginID?: NetworkPluginID) {
+export function useWallet<T extends NetworkPluginID>(pluginID?: T) {
     const account = useAccount(pluginID)
-    const { wallets } = usePluginWeb3StateContext(pluginID)
-
-    return account ? wallets.find((x) => x.address.toLowerCase() === account.toLowerCase()) : undefined
+    const { Others, Wallet } = useWeb3State(pluginID)
+    const wallets = useSubscription(Wallet?.wallets ?? EMPTY_ARRAY)
+    return useMemo(() => {
+        return account ? wallets.find((x) => Others?.isSameAddress?.(x.address, account)) ?? null : null
+    }, [account, wallets?.map((x) => x.address.toLowerCase()).join()])
 }
diff --git a/packages/plugin-infra/src/web3/useWalletPrimary.ts b/packages/plugin-infra/src/web3/useWalletPrimary.ts
index 23687b2db398..f4b376d89c79 100644
--- a/packages/plugin-infra/src/web3/useWalletPrimary.ts
+++ b/packages/plugin-infra/src/web3/useWalletPrimary.ts
@@ -1,6 +1,9 @@
-import type { NetworkPluginID } from '../web3-types'
-import { usePluginWeb3StateContext } from './Context'
+import { useSubscription } from 'use-subscription'
+import type { NetworkPluginID } from '@masknet/web3-shared-base'
+import { useWeb3State } from './useWeb3State'
+import { NULL } from '../utils/subscription'
 
-export function useWalletPrimary(pluginID?: NetworkPluginID) {
-    return usePluginWeb3StateContext(pluginID).walletPrimary
+export function useWalletPrimary<T extends NetworkPluginID>(pluginID?: T) {
+    const { Wallet } = useWeb3State(pluginID)
+    return useSubscription(Wallet?.walletPrimary ?? NULL)
 }
diff --git a/packages/plugin-infra/src/web3/useWallets.ts b/packages/plugin-infra/src/web3/useWallets.ts
index 277640dcb1ee..2bf50b461bee 100644
--- a/packages/plugin-infra/src/web3/useWallets.ts
+++ b/packages/plugin-infra/src/web3/useWallets.ts
@@ -1,6 +1,9 @@
-import type { NetworkPluginID } from '../web3-types'
-import { usePluginWeb3StateContext } from './Context'
+import { useSubscription } from 'use-subscription'
+import type { NetworkPluginID } from '@masknet/web3-shared-base'
+import { useWeb3State } from './useWeb3State'
+import { EMPTY_ARRAY } from '../utils/subscription'
 
-export function useWallets(type?: string, pluginID?: NetworkPluginID) {
-    return usePluginWeb3StateContext(pluginID).wallets
+export function useWallets<T extends NetworkPluginID>(pluginID?: T) {
+    const { Wallet } = useWeb3State(pluginID)
+    return useSubscription(Wallet?.wallets ?? EMPTY_ARRAY)
 }
diff --git a/packages/plugin-infra/src/web3/useWeb3.ts b/packages/plugin-infra/src/web3/useWeb3.ts
new file mode 100644
index 000000000000..cf46f9ab59cc
--- /dev/null
+++ b/packages/plugin-infra/src/web3/useWeb3.ts
@@ -0,0 +1,28 @@
+import { useAsyncRetry } from 'react-use'
+import type { NetworkPluginID } from '@masknet/web3-shared-base'
+import type { Web3Helper } from '../web3-helpers'
+import { useAccount } from './useAccount'
+import { useChainId } from './useChainId'
+import { useProviderType } from './useProviderType'
+import { useWeb3State } from './useWeb3State'
+
+export function useWeb3<T extends NetworkPluginID>(pluginID?: T, options?: Web3Helper.Web3ConnectionOptions<T>) {
+    type GetWeb3 = (options?: Web3Helper.Web3ConnectionOptions<T>) => Promise<Web3Helper.Web3<T>>
+
+    const { Connection } = useWeb3State(pluginID)
+    const chainId = useChainId(pluginID)
+    const account = useAccount(pluginID)
+    const providerType = useProviderType(pluginID)
+
+    const { value: web3 = null } = useAsyncRetry(async () => {
+        if (!Connection?.getWeb3) return null
+        return (Connection.getWeb3 as GetWeb3)({
+            account,
+            chainId,
+            providerType,
+            ...options,
+        } as Web3Helper.Web3ConnectionOptions<T>)
+    }, [account, chainId, providerType, Connection, JSON.stringify(options)])
+
+    return web3
+}
diff --git a/packages/plugin-infra/src/web3/useWeb3Connection.ts b/packages/plugin-infra/src/web3/useWeb3Connection.ts
new file mode 100644
index 000000000000..7f08a0384796
--- /dev/null
+++ b/packages/plugin-infra/src/web3/useWeb3Connection.ts
@@ -0,0 +1,31 @@
+import { useAsyncRetry } from 'react-use'
+import type { NetworkPluginID } from '@masknet/web3-shared-base'
+import type { Web3Helper } from '../web3-helpers'
+import { useAccount } from './useAccount'
+import { useChainId } from './useChainId'
+import { useProviderType } from './useProviderType'
+import { useWeb3State } from './useWeb3State'
+
+export function useWeb3Connection<T extends NetworkPluginID>(
+    pluginID?: T,
+    options?: Web3Helper.Web3ConnectionOptions<T>,
+) {
+    type GetConnection = (options?: Web3Helper.Web3ConnectionOptions<T>) => Promise<Web3Helper.Web3Connection<T>>
+
+    const { Connection } = useWeb3State(pluginID)
+    const chainId = useChainId(pluginID)
+    const account = useAccount(pluginID)
+    const providerType = useProviderType(pluginID)
+
+    const { value: connection = null } = useAsyncRetry(async () => {
+        if (!Connection?.getConnection) return
+        return (Connection.getConnection as GetConnection)?.({
+            account,
+            chainId,
+            providerType,
+            ...options,
+        } as Web3Helper.Web3ConnectionOptions<T>)
+    }, [account, chainId, providerType, Connection, JSON.stringify(options)])
+
+    return connection
+}
diff --git a/packages/plugin-infra/src/web3/useWeb3Hub.ts b/packages/plugin-infra/src/web3/useWeb3Hub.ts
new file mode 100644
index 000000000000..04127b1d7759
--- /dev/null
+++ b/packages/plugin-infra/src/web3/useWeb3Hub.ts
@@ -0,0 +1,33 @@
+import { useAsyncRetry } from 'react-use'
+import type { Hub, NetworkPluginID } from '@masknet/web3-shared-base'
+import { useChainId, useAccount } from '../entry-web3'
+import type { Web3Helper } from '../web3-helpers'
+import { useWeb3State } from './useWeb3State'
+
+export function useWeb3Hub<T extends NetworkPluginID>(pluginID?: T, options?: Web3Helper.Web3HubOptions<T>) {
+    type GetHub = (
+        options?: Web3Helper.Web3HubOptions<T>,
+    ) => Promise<
+        Hub<
+            Web3Helper.Definition[T]['ChainId'],
+            Web3Helper.Definition[T]['SchemaType'],
+            Web3Helper.Definition[T]['GasOption'],
+            Web3Helper.Definition[T]['Transaction']
+        >
+    >
+
+    const { Hub } = useWeb3State(pluginID)
+    const chainId = useChainId(pluginID)
+    const account = useAccount(pluginID)
+
+    const { value: hub = null } = useAsyncRetry(async () => {
+        if (!Hub?.getHub) return
+        return (Hub.getHub as GetHub)?.({
+            account,
+            chainId,
+            ...options,
+        } as Web3Helper.Web3HubOptions<T>)
+    }, [account, chainId, Hub, JSON.stringify(options)])
+
+    return hub
+}
diff --git a/packages/plugin-infra/src/web3/useWeb3Provider.ts b/packages/plugin-infra/src/web3/useWeb3Provider.ts
new file mode 100644
index 000000000000..5491b9953e53
--- /dev/null
+++ b/packages/plugin-infra/src/web3/useWeb3Provider.ts
@@ -0,0 +1,31 @@
+import { useAsyncRetry } from 'react-use'
+import type { NetworkPluginID } from '@masknet/web3-shared-base'
+import type { Web3Helper } from '../web3-helpers'
+import { useAccount } from './useAccount'
+import { useChainId } from './useChainId'
+import { useProviderType } from './useProviderType'
+import { useWeb3State } from './useWeb3State'
+
+export function useWeb3Provider<T extends NetworkPluginID>(
+    pluginID?: T,
+    options?: Web3Helper.Web3ConnectionOptions<T>,
+) {
+    type GetWeb3Provider = (options?: Web3Helper.Web3ConnectionOptions<T>) => Promise<Web3Helper.Web3Provider<T>>
+
+    const { Connection } = useWeb3State(pluginID)
+    const chainId = useChainId(pluginID)
+    const account = useAccount(pluginID)
+    const providerType = useProviderType(pluginID)
+
+    const { value: web3Provider = null } = useAsyncRetry(async () => {
+        if (!Connection?.getWeb3Provider) return null
+        return (Connection.getWeb3Provider as GetWeb3Provider)({
+            account,
+            chainId,
+            providerType,
+            ...options,
+        } as Web3Helper.Web3ConnectionOptions<T>)
+    }, [account, chainId, providerType, Connection, JSON.stringify(options)])
+
+    return web3Provider
+}
diff --git a/packages/plugin-infra/src/web3/useWeb3State.ts b/packages/plugin-infra/src/web3/useWeb3State.ts
index 1435ed6b826c..7ba73b567dd8 100644
--- a/packages/plugin-infra/src/web3/useWeb3State.ts
+++ b/packages/plugin-infra/src/web3/useWeb3State.ts
@@ -1,8 +1,8 @@
+import type { NetworkPluginID } from '@masknet/web3-shared-base'
 import { useCurrentWeb3NetworkPluginID } from './Context'
 import { useActivatedPluginWeb3State } from '../hooks/useActivatedPluginWeb3State'
-import type { NetworkPluginID } from '../web3-types'
 
-export function useWeb3State(expectedPluginID?: NetworkPluginID) {
-    const pluginID = useCurrentWeb3NetworkPluginID()
-    return useActivatedPluginWeb3State(expectedPluginID ?? pluginID) ?? {}
+export function useWeb3State<T extends NetworkPluginID>(expectedPluginID?: T) {
+    const pluginID = useCurrentWeb3NetworkPluginID(expectedPluginID) as T
+    return useActivatedPluginWeb3State(pluginID)
 }
diff --git a/packages/plugin-infra/src/web3/useWeb3UI.ts b/packages/plugin-infra/src/web3/useWeb3UI.ts
index 58088e1bc5a1..a4bf01cbd72f 100644
--- a/packages/plugin-infra/src/web3/useWeb3UI.ts
+++ b/packages/plugin-infra/src/web3/useWeb3UI.ts
@@ -1,8 +1,8 @@
+import type { NetworkPluginID } from '@masknet/web3-shared-base'
 import { useCurrentWeb3NetworkPluginID } from './Context'
 import { useActivatedPluginWeb3UI } from '../hooks/useActivatedPluginWeb3UI'
-import type { NetworkPluginID } from '../web3-types'
 
-export function useWeb3UI(expectedPluginID?: NetworkPluginID) {
-    const pluginID = useCurrentWeb3NetworkPluginID()
-    return useActivatedPluginWeb3UI(expectedPluginID ?? pluginID) ?? {}
+export function useWeb3UI<T extends NetworkPluginID>(expectedPluginID?: T) {
+    const pluginID = useCurrentWeb3NetworkPluginID(expectedPluginID) as T
+    return useActivatedPluginWeb3UI(pluginID)
 }
diff --git a/packages/plugin-infra/src/web3/useZeroAddress.ts b/packages/plugin-infra/src/web3/useZeroAddress.ts
new file mode 100644
index 000000000000..8a7126639f4f
--- /dev/null
+++ b/packages/plugin-infra/src/web3/useZeroAddress.ts
@@ -0,0 +1,10 @@
+import type { NetworkPluginID } from '@masknet/web3-shared-base'
+import type { Web3Helper } from '../web3-helpers'
+import { useWeb3State } from './useWeb3State'
+
+export function useZeroAddress<T extends NetworkPluginID>(pluginID?: T, options?: Web3Helper.Web3ConnectionOptions<T>) {
+    type GetZeroAddress = (chainId?: Web3Helper.Definition[T]['ChainId']) => string
+
+    const { Others } = useWeb3State(pluginID)
+    return (Others?.getZeroAddress as GetZeroAddress)(options?.chainId) ?? ''
+}
diff --git a/packages/plugin-infra/tsconfig.json b/packages/plugin-infra/tsconfig.json
index 6f5384220ea4..e8d46f80fd7d 100644
--- a/packages/plugin-infra/tsconfig.json
+++ b/packages/plugin-infra/tsconfig.json
@@ -7,9 +7,13 @@
   },
   "include": ["./src"],
   "references": [
+    { "path": "../shared-base" },
     { "path": "../shared-base-ui" },
     { "path": "../theme" },
     { "path": "../web3-shared/base" },
+    { "path": "../web3-shared/evm" },
+    { "path": "../web3-shared/flow" },
+    { "path": "../web3-shared/solana" },
     { "path": "../typed-message/base" },
     { "path": "../encryption" }
   ],
diff --git a/packages/plugins/CrossChainBridge/src/SNSAdaptor/CrossChainBridgeDialog.tsx b/packages/plugins/CrossChainBridge/src/SNSAdaptor/CrossChainBridgeDialog.tsx
index c69d21e0398d..e86de2c01856 100644
--- a/packages/plugins/CrossChainBridge/src/SNSAdaptor/CrossChainBridgeDialog.tsx
+++ b/packages/plugins/CrossChainBridge/src/SNSAdaptor/CrossChainBridgeDialog.tsx
@@ -66,6 +66,7 @@ export function CrossChainBridgeDialog(props: CrossChainBridgeDialogProps) {
     const t = useI18N()
     const classes = useStylesExtends(useStyles(), props)
     const { open, onClose } = props
+    // @ts-ignore
     const bridges = getCrossChainBridge(t)
 
     return (
diff --git a/packages/plugins/CyberConnect/package.json b/packages/plugins/CyberConnect/package.json
index d3e9014580c5..a547ee177c00 100644
--- a/packages/plugins/CyberConnect/package.json
+++ b/packages/plugins/CyberConnect/package.json
@@ -15,6 +15,7 @@
     "@masknet/shared-base": "workspace:*",
     "@masknet/theme": "workspace:*",
     "@masknet/typed-message": "workspace:*",
+    "@masknet/web3-shared-base": "workspace:*",
     "@masknet/web3-shared-evm": "workspace:*",
     "boring-avatars": "^1.6.3",
     "react-use": "^17.3.2"
diff --git a/packages/plugins/CyberConnect/src/SNSAdaptor/ConnectButton.tsx b/packages/plugins/CyberConnect/src/SNSAdaptor/ConnectButton.tsx
index efe1d1166a2d..545e4a667a55 100644
--- a/packages/plugins/CyberConnect/src/SNSAdaptor/ConnectButton.tsx
+++ b/packages/plugins/CyberConnect/src/SNSAdaptor/ConnectButton.tsx
@@ -1,7 +1,7 @@
 import { useEffect, useState, useCallback } from 'react'
 import { makeStyles, MaskColorVar } from '@masknet/theme'
-import { useWeb3, isSameAddress } from '@masknet/web3-shared-evm'
-import { useAccount, useCurrentWeb3NetworkPluginID, NetworkPluginID } from '@masknet/plugin-infra/web3'
+import { isSameAddress, NetworkPluginID } from '@masknet/web3-shared-base'
+import { useAccount, useCurrentWeb3NetworkPluginID, useWeb3 } from '@masknet/plugin-infra/web3'
 import CyberConnect, { Env } from '@cyberlab/cyberconnect'
 import { PluginCyberConnectRPC } from '../messages'
 import { CircularProgress, useTheme, Typography } from '@mui/material'
@@ -91,8 +91,8 @@ export default function ConnectButton({
     refreshFollowList: () => void
 }) {
     const { classes, cx } = useStyles()
-    const web3 = useWeb3()
-    const myAddress = useAccount()
+    const web3 = useWeb3(NetworkPluginID.PLUGIN_EVM)
+    const myAddress = useAccount(NetworkPluginID.PLUGIN_EVM)
     const [cc, setCC] = useState<CyberConnect | null>(null)
     const [isFollowing, setFollowing] = useState(false)
     const [isLoading, setLoading] = useState(false)
@@ -104,7 +104,7 @@ export default function ConnectButton({
     }, [address, myAddress])
 
     useEffect(() => {
-        if (!web3.eth.currentProvider) return
+        if (!web3?.eth.currentProvider) return
         const ccInstance = new CyberConnect({
             provider: web3.eth.currentProvider,
             namespace: 'Mask',
diff --git a/packages/plugins/CyberConnect/src/base.tsx b/packages/plugins/CyberConnect/src/base.tsx
index 1d133b171379..83a0be124b1d 100644
--- a/packages/plugins/CyberConnect/src/base.tsx
+++ b/packages/plugins/CyberConnect/src/base.tsx
@@ -1,6 +1,4 @@
 import type { Plugin } from '@masknet/plugin-infra'
-import { NetworkPluginID } from '@masknet/plugin-infra/web3'
-import { ChainId } from '@masknet/web3-shared-evm'
 import { CYBERCONNECT_PLUGIN_ID } from './constants'
 
 export const base: Plugin.Shared.Definition = {
@@ -14,17 +12,6 @@ export const base: Plugin.Shared.Definition = {
         architecture: { app: false, web: true },
         networks: { type: 'opt-out', networks: {} },
         target: 'stable',
-        web3: {
-            [NetworkPluginID.PLUGIN_EVM]: {
-                supportedChainIds: [ChainId.Mainnet, ChainId.BSC, ChainId.Matic, ChainId.Arbitrum, ChainId.xDai],
-            },
-            [NetworkPluginID.PLUGIN_SOLANA]: {
-                supportedChainIds: [],
-            },
-            [NetworkPluginID.PLUGIN_FLOW]: {
-                supportedChainIds: [],
-            },
-        },
     },
     contribution: { postContent: new Set([/https:\/\/app.cyberconnect.me/]) },
 }
diff --git a/packages/plugins/CyberConnect/tsconfig.json b/packages/plugins/CyberConnect/tsconfig.json
index 4d052cd2e340..1e462a4701b9 100644
--- a/packages/plugins/CyberConnect/tsconfig.json
+++ b/packages/plugins/CyberConnect/tsconfig.json
@@ -10,6 +10,7 @@
     { "path": "../../plugin-infra" },
     { "path": "../../theme" },
     { "path": "../../shared-base" },
+    { "path": "../../web3-shared/base" },
     { "path": "../../web3-shared/evm" },
     { "path": "../../typed-message/base" }
   ]
diff --git a/packages/plugins/DAO/src/components/DAOPage.tsx b/packages/plugins/DAO/src/components/DAOPage.tsx
index 2030c3d54066..e3b4504caa96 100644
--- a/packages/plugins/DAO/src/components/DAOPage.tsx
+++ b/packages/plugins/DAO/src/components/DAOPage.tsx
@@ -3,7 +3,7 @@ import IframeResizer from 'iframe-resizer-react'
 import type { ProfileIdentifier } from '@masknet/shared-base'
 import { MaskIconPaletteContext } from '@masknet/icons'
 
-interface DAOPageProps {
+export interface DAOPageProps {
     identifier?: ProfileIdentifier
 }
 
diff --git a/packages/plugins/Debugger/src/SNSAdaptor/components/TabContent.tsx b/packages/plugins/Debugger/src/SNSAdaptor/components/TabContent.tsx
index 993edb1cc927..e7e39c2f23f9 100644
--- a/packages/plugins/Debugger/src/SNSAdaptor/components/TabContent.tsx
+++ b/packages/plugins/Debugger/src/SNSAdaptor/components/TabContent.tsx
@@ -1,11 +1,11 @@
-import type { Plugin } from '@masknet/plugin-infra'
 import { useBalance, useBlockNumber } from '@masknet/plugin-infra/web3'
 import { makeStyles } from '@masknet/theme'
+import type { IdentityAddress, SocialIdentity } from '@masknet/web3-shared-base'
 import { Box, List, ListItem, ListItemText, Typography } from '@mui/material'
 
 export interface TabContentProps {
-    identity?: Plugin.SNSAdaptor.ProfileIdentity
-    addressNames?: Plugin.SNSAdaptor.ProfileAddress[]
+    identity?: SocialIdentity
+    addressNames?: IdentityAddress[]
 }
 
 const useStyles = makeStyles()({
@@ -61,7 +61,7 @@ export function TabContent({ identity, addressNames }: TabContentProps) {
                                     {x.type}: {x.label}
                                 </Typography>
                             }
-                            secondary={x.resolvedAddress}
+                            secondary={x.address}
                         />
                     </ListItem>
                 ))}
diff --git a/packages/plugins/EVM/package.json b/packages/plugins/EVM/package.json
new file mode 100644
index 000000000000..0de24178ab62
--- /dev/null
+++ b/packages/plugins/EVM/package.json
@@ -0,0 +1,46 @@
+{
+  "name": "@masknet/plugin-evm",
+  "private": true,
+  "exports": {
+    ".": {
+      "webpack": "./src/index.ts",
+      "default": "./dist/index.js"
+    }
+  },
+  "dependencies": {
+    "@dimensiondev/holoflows-kit": "^0.9.0-20220520093249-0870919",
+    "@dimensiondev/metamask-extension-provider": "^3.0.6-20210519045409-1835d4d",
+    "@masknet/icons": "workspace:*",
+    "@masknet/injected-script": "workspace:*",
+    "@masknet/plugin-infra": "workspace:*",
+    "@masknet/shared": "workspace:*",
+    "@masknet/shared-base": "workspace:*",
+    "@masknet/theme": "workspace:*",
+    "@masknet/web3-constants": "workspace:*",
+    "@masknet/web3-contracts": "workspace:*",
+    "@masknet/web3-providers": "workspace:*",
+    "@masknet/web3-shared-base": "workspace:*",
+    "@masknet/web3-shared-evm": "workspace:*",
+    "@metamask/eth-sig-util": "^4.0.0",
+    "@servie/events": "^3.0.0",
+    "@toruslabs/torus-embed": "^1.22.6",
+    "@walletconnect/client": "^1.7.5",
+    "@walletconnect/qrcode-modal": "^1.7.5",
+    "@walletconnect/types": "^1.7.7",
+    "bignumber.js": "^9.0.2",
+    "ethereumjs-util": "^7.1.0",
+    "ethjs-ens": "^2.0.1",
+    "fortmatic": "^2.2.1",
+    "react-use": "^17.3.2",
+    "urlcat": "^2.0.4",
+    "wallet.ts": "^1.0.1",
+    "web3": "1.7.3",
+    "web3-core": "1.7.3",
+    "web3-core-helpers": "1.7.3",
+    "web3-eth-abi": "1.7.3",
+    "web3-utils": "1.7.3"
+  },
+  "devDependencies": {
+    "@types/use-subscription": "^1.0.0"
+  }
+}
diff --git a/packages/plugins/EVM/src/UI/Dashboard/index.tsx b/packages/plugins/EVM/src/UI/Dashboard/index.tsx
new file mode 100644
index 000000000000..09008f7ffb65
--- /dev/null
+++ b/packages/plugins/EVM/src/UI/Dashboard/index.tsx
@@ -0,0 +1,46 @@
+import type { Plugin } from '@masknet/plugin-infra'
+import type {
+    Block,
+    ChainId,
+    GasOption,
+    NetworkType,
+    ProviderType,
+    SchemaType,
+    Signature,
+    Transaction,
+    TransactionSignature,
+    TransactionDetailed,
+    TransactionParameter,
+    TransactionReceipt,
+    Web3,
+} from '@masknet/web3-shared-evm'
+import { base } from '../../base'
+import { createWeb3State } from '../../state'
+import { SharedContextSettings, Web3StateSettings } from '../../settings'
+
+const dashboard: Plugin.Dashboard.Definition<
+    ChainId,
+    SchemaType,
+    ProviderType,
+    NetworkType,
+    Signature,
+    GasOption,
+    Block,
+    Transaction,
+    TransactionReceipt,
+    TransactionDetailed,
+    TransactionSignature,
+    TransactionParameter,
+    Web3
+> = {
+    ...base,
+    async init(signal, context) {
+        const Web3State = createWeb3State(context)
+
+        dashboard.Web3State = Web3State
+        Web3StateSettings.value = Web3State
+        SharedContextSettings.value = context
+    },
+}
+
+export default dashboard
diff --git a/packages/plugins/EVM/src/UI/SNSAdaptor/index.tsx b/packages/plugins/EVM/src/UI/SNSAdaptor/index.tsx
new file mode 100644
index 000000000000..43bd64807567
--- /dev/null
+++ b/packages/plugins/EVM/src/UI/SNSAdaptor/index.tsx
@@ -0,0 +1,46 @@
+import type { Plugin } from '@masknet/plugin-infra'
+import type {
+    ChainId,
+    NetworkType,
+    ProviderType,
+    SchemaType,
+    Signature,
+    GasOption,
+    Transaction,
+    TransactionReceipt,
+    TransactionDetailed,
+    TransactionParameter,
+    TransactionSignature,
+    Web3,
+    Block,
+} from '@masknet/web3-shared-evm'
+import { base } from '../../base'
+import { createWeb3State } from '../../state'
+import { SharedContextSettings, Web3StateSettings } from '../../settings'
+
+const sns: Plugin.SNSAdaptor.Definition<
+    ChainId,
+    SchemaType,
+    ProviderType,
+    NetworkType,
+    Signature,
+    GasOption,
+    Block,
+    Transaction,
+    TransactionReceipt,
+    TransactionDetailed,
+    TransactionSignature,
+    TransactionParameter,
+    Web3
+> = {
+    ...base,
+    async init(signal, context) {
+        const Web3State = createWeb3State(context)
+
+        sns.Web3State = Web3State
+        Web3StateSettings.value = Web3State
+        SharedContextSettings.value = context
+    },
+}
+
+export default sns
diff --git a/packages/mask/src/plugins/EVM/Worker/index.ts b/packages/plugins/EVM/src/Worker/index.ts
similarity index 100%
rename from packages/mask/src/plugins/EVM/Worker/index.ts
rename to packages/plugins/EVM/src/Worker/index.ts
diff --git a/packages/plugins/EVM/src/assets/nft.png b/packages/plugins/EVM/src/assets/nft.png
new file mode 100644
index 0000000000000000000000000000000000000000..9d3b13ce276a0d5aad74a9e5f7609b46a0cae236
GIT binary patch
literal 12065
zcmV++FW%6JP)<h;3K|Lk000e1NJLTq0058x0058(1^@s6=SJeV00009a7bBm001mY
z001mY0i`{bsQ>@~0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsHF1ATTK~#7F?R{&^
zbysoTGh4=BVjSN9#~9}`*ai{61e0)0xkYV6fut&_REeg|zeH7~rc!?;YD1;A{|f(*
z_|aCXlqwZPNu;EgRDraB9nx^m1#DxRn5%8@{etaxve#Z~W}aF5yyxuiJ!jh=(mVRT
z_w2Lxy3Cq2^USQvUI#d(Q#z$nI;B%OrBgbkQ#z$nI;E$N1S^w%@cnPYQ}_jl{`^?o
z8OT_rs-j-tc(&+SNiV~cu|71mDUH};v^2-%J*J*1oy1KUzoaZ1@@q-A;NEn1YVvXN
zu4Qk|YtM~0<5g1LO>Od9!{_nTQ=i9q&-#G;+JC+S2c*>$NI&>bE*}5>YaBiG&s|rh
zwyAZF-)XG42Gr+Gn649OO4o7D!elYebWP(a>+Y<pDPQ3MD#0GL!ONK$L*|n*rS>KT
zwIZn8s&ulkUMsk7w>LoM#^yC2eF(#(NcZ6Yw2A^v%A-dgAKP%lREIZyyckSyR{bVq
zm={SI;*K1fmIWJVGE3j2%F4P-BDs@vgW}ikh_-GmtwWx6sYijH6aRx8kJ>PW#~htV
zNsq>Y2KmC+5pO?)5)D{|M&yCMW@^aPEmD~m6SlCCl8M-TOYh&aaBEr3<wy~ddVUC7
zXj5M;ip%A7MYb<PvwSbh%CP&e&x|-F|1dPyhp0o9@`_S@$Zc+&>~#?+*XpDy4~Rbm
zk0CotXK5tFn~>~=+DH4-GJ87<8qw#>sOGoh*y=P}TyjClw|D8tx{4r%@$XUl&JOPg
zpgaNn)p+UtF}#2jU8)AwYm$}K2kPwbM%h&b&)egrXhBZ5>HcwLdCLoH8uHncXG%Sx
z&?m45t$;vBznQci^xqpN9^F*SHAES*#aIVgo?)ohgNb7>;e?0>q4K7DI@K|y5sk88
zX_}I>`c2?oHv%E-ztS^p?WoAp(5P{g%8)=AyEil*tbJY=km@dV3@nR|A46J4*W&UL
zYUTELUmX1c_M{aQNN(`X3!A6M?Q?3NkiB}x70ZAtm~fsZ-kO({Bs#S(&p42VKtt(d
z>-MI|L+c<@D(@6lW}x?^)BmBh!$xr4d1CHNa#>KXquf*pT<~(ZZKgb)x202c9@Kec
z-xoY5z6ZYl^VpLPuRtQNY1Yp7*z&4ihSt^fQ$y(t`I{x1lm^RV)?<Iz3SC$_7oLz}
zNmV4iCsg*}OlWips%7_Orosyi;)(;AE1h+_tG94bkpj+>kQGHLBy@}C-0n~)xXeX4
z#yf*O={y{o%tETQ2gFaLaEsF}c2R<EYorQ`HH4zlr`<4ul8AGSAF3kivyqJ<ftM9g
zL;kLgWNJ?vx`9xJx$(TB^i(@^4Bncksxlr~&>r<@S2mFA_vl@6q@;|p9tiG5Yq+rb
z$A!Xy&>&<TmOP+142feAq))T5!Cb*0aJSGyxP;9L)#boN3KdABu3#A@BtAh3C_?2M
zO4bS-$%atQUR0K5V6_lNIbyO?9BE}Exk31MA#^8J(FtcCS_gsP7BBJLMkA?@t&8Bn
z%Ve2aElx7NyL&P#oZ<~M%Thun;zh}%)5KdtFGoW1ONMGzzOkyzi=j$auc4GB9E6$C
zKmo11^$2Y0>Gws#?Vv*(ZmV<+w@X7;-Hdp9(n|9{#%MSDYsLw(3{NqHHJ0l@mM|7W
z1&*m=J}9ok&<NeEUPnL;WN64ZbO?okM^fQDd=!X|Pw1>8ISzqHAg3_$Ma*bJ2a6FM
zxi}_*q`=<t4&YIyQbQu9v@(XnsL<gN$OTh0z6rPf6K>Dcpjdy3dj`8cOh2;tfhw>o
zF>3|-XjRDC9S;<-9MGd1BZ(5DohwO-48&3fs<k^W6q~sY4T$B5shR4EVQn-%v_YO3
znJ}+yIwB#jbbPt6h2q2xwXrv?<igCl8|JG7<ktx-X%H^pQH~OJG{ldzKv*C}oT9mM
zUM6ugp>?56VslqP@r!v44ts+!&P)m+l!w?v)@@Jh^H|CVL^2Tym|MZq1Zqlyu0?Z1
zOD<N-8z>GCM6aPhnk-}H#v-Asidk}uY|w_#O>S;2_3r>p^E@2G$i{xQpnkK!l;Fk<
zplOAeCa@AXjM8&^;Qd0Xs<}3g4Gn?Fz=WViCp*+;6ciI75Vgt&q!77{g9ch9+FyAJ
z9bSQEL8(K(ChLlzG5od*P{UGGBd@3L6w#HF7G{+?P$k!BA5+=2m!|7yKNon>%Yf%y
zCb;PG@?FMj%G2oaM}P<K1s=FZrq6r+x?D3qftIyj=K(C~2?44mB_CWS<aPu!5TSAh
z8lZ5A5;Ap>kpb*UD<DvBeITUqkyr$C+&N}d49i@e3%HA&LMg%e5zpDDkfIfZdH#z9
z*Zd^#lGluib2&~-MS;HgRp2i_HGY0YQ^3zIsz)Z1L%8%H?a?f4_XzDvN`;84*iA9Y
znf&xzbYa^_ghml9ST^!uK3Q--Vb)ulp-x!0M*Kkn<%!2aFM7G)C8N^3?2Q$54nYO6
z%Kw+Ysi2eKGrtFX<<tED0I5BV>FHxW1)(!kNvO<ji>5prY-B!R8HEe>#-2*+#6Wpy
z)djvlj&&@_0FQfWL4CL@0UkU@#O0YqYYxs$=*2z#)O+gZnpE80JAWDY>Gw88x(QuN
zDsL7HOVSDhnm`WAWhf+MAtIEh<=cebW@rZtpbM?z!nC`Qya#BcA>@uID6SV7eob+v
zm35U|AzO2ppeHHF@TOnHggQ?rg(4v<lA%N2#`buSSmU4WA88B%x)?Jd%rWR~6<8R6
zzK>2$>$tEKFq@Jfg5-&L8=AY~0BlSVfFi7pgvMzST4}EPRqv>%b0}AJ5;8@)>gB*E
ze;fG0BP~uD0(n%si9(uvHp5_tZhtLbLYMZ?ZHc|5VxIQow8lhYG|pU#SxcJ1C4ty%
zhjwFdNmv|8$f#3YU#qM=EA<qGx$)h=tKW%phDywJ<@Lbt{Re5IwwOhqjD%tyb}=3R
zI}`_+m_f$WM(_ABjUrffW~j$aYn%nGv7N&%TCnTZqv2wtB2NmHP=~8&S)jpfSW|Xg
zQ*pDIL*TM;Wc9w^kaJ3Tj0zgP@7K+pQhWMgIJu)j5#u#6HU%()RPsx{q$3m~NyLR7
za_#TP)>)0W225WqFeVsI$kSLDBoM^PsT@Xr+i*2)iXufFNb$-j=)L~}ZT{xmq=Jrr
z=T|DP*0D)3+Py(&qLG!MQQXT)10cC{X`d!T%X@%8dIc9Y;VD^zSr%JVGXbBm_V>1G
zI#Jp`BY7<c8mQxt-2(CAvR?OYJni&9KU|ff)O|LJ`}TiaKfmh1b^B<8fI7nrYzmb9
zlH_I}WFdkF;?UM75i4<@>_KZG5TQb|3PutOaCmCoz=vU$ur^y*2g&97mG6*eM0pAo
zS9#0Lir@N;F~0d=ouyt%MTvgwW#Nv^eY?K2_BslIP`$}Ud4RzqyGdr<s(>rmLB?S#
z#6Z*E*bihQ>R25%S5+Sf=VTlQ!g3tssS?V6*;T-s{{c=!Wm)3hyMS-qQva9lXG<k8
ze#0+Th5pt!8(kFXrjIT!>*s!@A(tu2Ajz1z&@VKp$;J#Y?xn;DXhK2d03K|$?Hmnd
zG~I;FkQU+v(KNBe6KVw8Y;iGs9|eDDjVG2;>C`*FSeG5j=i`rPW*$W$byA8mHwb?0
zx@G0QdYmr!{x|CEbD=N(k>K_(0Pp#=%HuXV|AN|vkN!KmljA`*%4U!vBwGpB#AyT8
zDXEvdzveVrX)VlP$A{Qxu}!2i7*!G!Xjtm$oAPMq+)V**To`v0#rg8b>;H-j)JZlC
z(0IT1E}2m2OMg_+?XABATz=K=I^Os`nH00Quu{~+_bNX2Z%cj|m2rFCQqSw&t@yLw
zpL`N++h}qck!5g2sj^j*13z;(LJkqUi4pu90D;!okvNT#2D&CFwz!vv3nDx|1p;`~
zH$ZKAe*Npmxs^9yCw*yDn&19cW9R(As63B?;t9<j)$0j9?;TO)WB(pw$L_ADAjw<*
zk(F0F@A1b3fA|r_S8v{(|HgMoMXMIq_!z+unWjX{Tg_w0s6WL;?Y=cu+$#5?wO(yT
zH++N#(zRAijc%9dVm(B#47Ws&hDPb#_;+`+Qk3TAk7_6mKeVX<zwSDr@mxMXJC^gu
z|7CZ5#r0izT`LbUol)|Z7;6{3?U#~`q))%!59J-^HS$#9M-XoLX$s^3tMP|dpusIz
z2sI>cy`*P8YH;NV_{~xaU@rfzd;M<LRoqqSco}4dctTccb%i)vM<{LJ8uQ%pC%Q<9
zCdJO0I{p3M9~s@-_qOLPF;`JSS3Xl}>Et1S&~R}|C<w<-oJX|}vG$=g5J(fM80siR
z{duTfzYpx@+UQF<i{dv@ce$?8Q8)j0V~M5|QpLRfRC%wDyU9DtGyX41^yN=%uX|F0
z>%thOszy;iF{0rA`3QE>Yu^Pz4Mq`7=wyCuYF*L>B}CVZW~_YJo7Nh}2ZBs*15if{
zZ1q#ZHnAn0!hivc=YW6<FWWsjD#+tjCK-Y9XVt2qr85MziB5_+TXLDo{=uWzN@s59
z+;x-5y?1HlZ3|TtB4qLW=ul~X-`W&I_0~QgnOVLAsLv`0)LxazyX(~B7nRrp!&bmn
z=6Q$IVpp&$cPLLmpIiO}Ugr!=0C!6vcUpUERmQ8-8ud$6o?R$(^{dD*givJsU-Ir!
zz^h-~xFT0nuY;F7&7mnCiZ_2bZzs}o(uJua9TFh4g6>KsZZ^qZGgLETA*`l+Uj6Fr
zEPU<{I^>}klab6=0jF(W%`I3thMX3%{rM-hD?y3Ro^=87;e!bsUD<9oSVoxj(1&gW
z3(3fXt`5k&Nu)G9x|4HJfn@f*3c(vKWaZ##qOdIX9FABNEba=PzkS;Vzi(wz9mfhV
zxd%<CI5d$xF-}01iO6kq`HPWb7=qhf3RtEDuDD)kZl`NYxji&_g6>hU%~8%Edk@(+
z(cu-y)@4HbqY)g)nmZUIccyi5@6$ok`<K1w`1;Gd%|rJhl%T86qbv=`A2zr;M!}vR
zOY^;NVk^}-9r3pFc8w<<!%hV(?G&z)d1@E7I4T`)o*qaj%H^Ds2((etsddWk3*E+f
z2`k#vNQ2;QRF#K<^eH2JD8I?I@(8hK*)-lJ;|!6CLhqW_xv(gZ=D|X^RmIo8v_1b7
z*9HrP=I_4cxX0xSR<<tw?2LL(T5n4$#|w6kl_hOOrOv4r63bqs2xa@`voGj|MIAl-
zee0k3mRc*@II73w(TJtzO`{$4O<O+N1yd}ujh72ALpmkQ$~G3hbt|^gWmg%enme6d
zBJ_hGX1RsZ<urX?>_Ka6=MZopoLy5(!tR12Tgt%71agb#KX-e>Ev`tG=E#@JcK9DM
zZx-i-8)ynXNPeSahb2owV@+AgXK`Z>ZJAgs2sZ8I-l#mz@Vs8)c@V`Wcr~Qolh%8!
z$2WT`#Q>pAGuJdbj9`OXQ7eCo^}OP(z_mY}@69_&wzgn<y0}*Y-L2HWJraQEw@Sc&
z?WJ2#?9#HzpO1S<qYreGp_<>5bN6d8lX73|jY2DJs#o*Bk~%!GYeJB0%@!KYt*+ta
z4y!Mn+IQ@QJGN7-MsDTq$LojP8{74RN4K}9j5xpl&5)pQ*@%}Ew7U-<ishMhG1rHK
z&>F+|@VC|wJH6CKLUv%bP=J?$!65|BfoHLrXG|GRLQ`{O);^BM9@?=sR*ZpT7w&l;
z;@fk_6|zeX2fPntr!6j_br2|TtBk*~Tp^B7PO7;<&8^j?kb?z%PcK;~xnG9&uC->@
zjC3&=KAj|qjkaUBa`E8A{*Y|@0~+?Ebrw^}WYYbCl_yz-hX~*R(Bh!kcGe#fvi_6U
zqR?4=oex@Cj?2u-;B^VABj>gBd2P;-YCl@%fT=has6wnyuulOUC+-$iRnt6=mEi}5
z9q3hpr;VoboRJT&nkWos7Xq34Z-)g{`=kMf1jNl=;B=xNZ7F}Wm3z(x(Y<@}tKPNc
z_kF_BG|IC3c8<^RL!>`d^JBxBlSG?$_hA!AKr}3_is!i)ZF$_I#kefo8@kEXlhHbx
z>gz|WysHxWD4!<QVk1gl?`w?E*kAv!Ay6Sh;~^$Tqw5#8rwa~QWu!q$zxzQg_GwA;
zni`GL_M;Uy)r&MJMZCW*S!B5xCV+N#h(t3B-a_BL4fw+kGeby6++tR@CR?>U4)wDd
z;_ii)0Dte-v6a|sk+(rV`@OXcU?YDlYnQA&Lo7-wvU24f*o#)$&cQyJQALopC)mq}
z6<HNR&uRh4h9bN5$lag?oPh7iv3s_FI$5SjWa_-kU@rtX59+A6$bbcD%dRvzq$VwC
zkELV&Ov6byX=UEq9gEP7fy&E(-IedAH4sSLC1nXqLK3@<QGy`FnbWQC<{HMem247`
zU1&AMR`9^<Y@wq{9c*ajeQzk1AVjd!1tri3K5TBQ?oVEzLDumkpZ@GaZ%5+|4S}jb
zOX5RK*5~9~84~d6jiCP?(6Jy?<MkbwmD)(7c9WsilaFq1^t6eql_W0shJJRRP(>tA
zp+}gSU7XJ-G}^jb7R(2d=E{;X5LFH|Bsb--dVKe!P<@uURb(<95~}V+Yn@Og#9Yk%
z@JTF8G5oX~!pPj-PptPI-!X4;{&UDmi6?;07(_SykGP)#T({bmNBS2bm-IfeD@BYC
z`kCb8i^%obuwK(Ni2tD?374!s;^P1cv_=fnlv`;hUh~(<DEj}MbqOPx%(h1#OT~r#
z$fc6=*PI<P_0KzAfaZ?te}5Sup~`k%gbRhtP<cTSUIynC;zh~QOfhS_`q&E$uH@?W
zq7~M{+IvaaIwUOdIHtwcjB-a?quGt^qAOl%h+#!b2o%VjFn!MfwjHOZn7f2D6TFL(
za>jg6Y!5lRGQjSX4a($eY5P4$63E1x^$tL5{n$#xFs0Ln^j1PxK3n{dptzB1fL+QW
zt9ijokn5AIkg@rk-4rS22BZWj^FZb8qHw2@%BX;{ydyWEH!n*V+X+#jGb2W?eEZQ#
z=R~{Ibn_NeiS4X5TG|wQfbLlgf(7P()hmiCt6L=^exUOFIJqpz7%63>WL_=HAT+zX
zgQQnd;gWX|?_}7FEL>zCFYz;bzJTSWw9a;pgfaw|^BALdHI#_T@|}YV8(!j|m%TZc
z%Y3MA;L8GC^IISb77ntT8=>o66tP^uhb%^ctjLl={|)NbDSnSgrd-_SJ!qXRtp@on
zFx9---h_y_-#3O8#@r4o+b(+5&jOcRIk(yg`e_o)A8+bd?hHYShnB<<(%d)r2tV!J
zDRvUSxnhS;4MXOsmlyLtd&X{UKUxQYst2IX7#w;$jajr?!_ajoGDO>JJ!b>IKl6U6
z8?va=A-T`e$c(=mg8JNoMvz_pFId$rYk>B8w0HO*E~8e_R_amNrvMb_x4BsRdcAPu
z8h9GxAc6Es2n3!Kq(?Ngj{s6RtACQd<!dab9~sxGUfYg<u}x`KWp9<WV_M*!rup*{
zL2|LXIv)YVvEGI-8d=gFO@inEGnXSVzf<q?@{q)<NsXz!9oTB4ut7LZ467a_EW|s3
z+(h#6-OQ?GIZLa#=0@Nx?;nQ?&!M0C?vSwDi=UXJ1Fc}ZOLB2>p7ri7$Rj-@6sv98
zRR(Vl-kK~f{iVrJETm84V{cmTlvaa(Z;YJ>jXarGvqZ33J1K^zGZ%A$^_wy(`?-Gx
zJol1$Ob}Mv;9a7_Ows$dXQ6!|I93)`J^@;^Td=$v8MPAfY#0o*@BLfC?v^#nbPrnR
zr24*5Og{J}WU5giSqI~CN{17-y129V{7c~Ve}BBbxFOMoI3`ZyuqyNXP)tBBQ{;@O
zp{z^GNOA%)@|D7d>KfhHhS1Pnp^l9aPEKq6?00ijN1E=(Z-IqS($8`uepeMq0fov@
z?9=jVUR(YPZvQNB$LADx-(EX_hv$;!fw~$cHgpY3c#*sphYe_QPdl=kES#r)V5#|i
zJATe`#7tlIlVhVbCK4@N?AK~q2wNZK>2<`5ZqZS22~5ivm`{-HL#9ZDiV~I0?ccq<
zof_Zj7*uJ0cVnt`=CTMVh}BU^4vX_kQ@`eB8NB`Z#A{!tZTrYQ0V-n;S_grQVP6kZ
z%x0u{V|X+*tsjTG;BBxtJU#!K`gz_s<iF+9ag>WIPno$sLMV^)D7Be{Tpq_dzC%)W
zx5p9Ph_-OJq3Zmn5PJO-`XgM<ezZ;y?ejZ!Lqf6AN-_Cv|0Iio|EEB7hs5t5QRLzK
za8lMiHsQdYw_@`N7fX~mpDIR1;n&#7REo<yZ+k5Ho|oIM`RE!~tLTh<X{8{#wM19}
z(rPqPBWCMmNjg#1lJ*wm`Q!fxeB&>1))YGsWp<KRT@+@PbP+>VUXq17z}-q{Na%Ii
zP0}LgrIWYG)={kS5@qbIL2Jwd&BI&<a91KhMjuin8)}-sCJR)H5O-FOM@A+3^nV5Z
z^kZj-Ml8<?^B_Lab=VT^$!K6dk`lw~CGAm15|f+p%6uJ%Kvtj5?jK|xXszGM0G(SC
zub3Euaz}7Lnfk<*Hc*!YFeIbf&O&>k@6OK)?!E)K?oH$W1t;1^g$N66*R>6eN9AoI
zvWpp{MNDq@lGgZJmGF_O2+}Vb`cG#FHv$f+gKjvDgUdZRt#rT?nT68Wz24@Zy%fsR
z4sSvnuN&P%qaZBkv{rTz_M`U$U;H1ytv3l?aE;>SZ<BEzXlGWhM+M$tu1|s#{2yBm
zvejEI-^Q}29dQ{y#*6&Z=O7-D8=~zqOD<y2J!zdi(UUT$gvFE}203az*oRpWOtze@
zk)6U#V|cSDVCTq(FEo}W9=X3F(jA`%E`A|!`8DI{>&!SiJu1`1S7iRV9y{6H_90sg
zv3Nfap_o~{wM!O&kh!nw_OzDK&m@!UpGcd`HP-%WS$R6*01&j&rh10QHj0r!^ZbK1
zItK1jgM~J4Q3DML7W%OEiDc#4>bw8Dz<u8l+<LQDjSDZKvvyiNh7z`3728QFueu<F
z^kCMMhZZ+=SsWhkwSnNK@g4TW$}#>wiV^MT!|G?5iWurMtA9^gX(Dmss4A}{cMt3H
zl+J`jE)Qp?KU-4dG-DkP-`63ZmlYkCf^5N}7|3`Rf<~Jd#loSb5L&Q%?fg|MxfyCY
zwy&vIJDfp>o~IMjN<a71dH1xIBRS2sHl&e;<&oWHlh&V*>jy`q-5u+I1ofoO5zm-=
z!vbE8zqe>EyHncPO>m1s@?5q_+Vs#`wW$8>w9cEU9so~nJAz_66}6>|kJ$jtBGx=t
zlJ?XbTYrnKQnV{6r;Vh7#~KU$=oQjFf%BgYJnK2Y1s4ZzPd+v-c|2Z!G^I=rJn`6e
z6ZTHBp4ZAB%U~A>B&5)A?so2g&uI5M)FRUFWXi62ZwOjJfmG8;5!wZxJ<BZM47ybr
zU0odUmxvtT_v}5^up#x>fn|06ikFSS^pBTdS|(*VI2C^R_uvOm+!6+|jcoqLrva4W
z7s+8kKdR%C-P}MqOxQmNI=lj<!>~0Edn1<7twUKi*kmos7cir4AqCaxt<{&lUU2md
z6>**p;y#LZ@@uP)WcO-(<y;8O&FBz1I3*;b-FPn+Rh{-fY-y$AT^cFh)VeQt5~3TP
z?2LgZ;>d8mjm-76{Lddz=H+jd32mNkn)B-p1&g{*LT>pr9wkHxV@tEu&@LvDg#uhm
zE4>%iNQ4mth_j$Kpbm0$!-DD4ZLc&kUw&p(oWF%<L~)FlV^J0hClV*<R-cEmw(&{)
z>c%OZygT{xbs5T^vk0V0U*?mA$H~q8GFw{T2@4><ObovAZ$E>ILlm87H*zp5+XP~d
zgaTtLgU}=%=Rrq~EiD#p&kl1|;5zd_t=AKzuq7zsnJJv26H-T^MBBmtitB+F@Ay5j
zr;7@ggLLs;gNEaV<j0ql-{iGe$|oc(?qd-d0(FzOUgrKfw1xta#U;yY-wlr0cbi4Z
z41iiWVo^ADjlxzLO`VX^v_Xf&HGwWd)Ql|rcf&xcQyv?+vGPs%+Y-&5w1x{i1|cLb
zpfV!yNGZ)tm^HPA4h!FnKPf%=SY0!_|2y^bk+v12EXWo*Z&c1_J-f{rjq7R8{ZZhe
z7am_8w>RB4)Rp;?%`t@}L}x{`0NV<d1k%~X&E4BMIE=S3hHulTU)!^=03Xt)Mb#!w
z?VuSkr+fg|O?2;_z&&4&&oqyvc>thn&EvfbMg{uWf4aSV-m>Cdrb;8K1r4ISJQ#t_
z<-9Q+ByD?@6hG`mYaR2O9ZjsQ@|xD>P4Z#26^+>U9}0a;S#JLfrkQ1{n2jBckJ)wm
z-LSrmn<&b&=q*q<hSj^vkYJ(G5K@#`g|0JnqyF(16N+9<`@GLV1cGE_sfc3F5SGo8
zT%6s$`|0ZDv*D}cC#8EwrTNPL1HSk54&@0UeV7cS4fINF(}hfE-zsu1Q%MVEqFc2|
zo@l&Hb!?C$zsO)&U6(YD(>W)DXj`Lcnu7Uyi^i+ZGoNnq)jXq(NOzJTxggG0KiOOq
zXxj#|(gY)QN28GGd%FNE^*)onQ{rhcJS=3HF-RwmR{s%bB-RRwpEwW#x9Ee2Ij#P4
z(1j_DsHX4bk3`2!$fDgOnj5J3_E_?8|J@3_{w-KcB`E&trxaiNQ{qW&M!P|pjqr#E
zJ3@|br%|G(T_As+e&GE^au#98>>#OfTn>=qGeleZA%8a1knsU%#otT?`TTZQ8v2BS
z)Ko};HCtP|-=O%qx72x_B~(UEH~m(Op!$)Ixvxnd+9GHF?wJh$ZAT!({vvlO$ZtiM
z`)UO(i9pIouNBoQRzGjZ+-X8-VT851*;NMGE~$S9t@OL`?T=pzJ+rqh+=mJMB68%j
zKv3HMt6sGneeU|Q;{X1qQF$JqdJ7FS{VxRb8cNR%vAQ?9(}f1?<r<7pyfrN7!WUlO
z-sQJKD2TUc%-oVGIRCG_Mng^ZOY7f3>z&Sl-a@^l(K2gT{|**+PHAGX!k>627SS!A
z0>1G3f+rt`TfUtf+rG{}8xQrpuVXf?O~|3nBbRY3aqmiPFW0w33(LIItKTK?pM3(C
zX}c6^nbVvQq&u{|{8g6)ADFI7t>AcC>u?1|B82q;;P90ZAYCKN_6`5APU7vNqCB^J
zGWxBb)efCjpnqG01D<K*#oytDnJb+3D(x`fi(W9I=9_alyzEfEUvLq2(q&fzXI>|`
z^Z#4?f;2fe@Tk@lE47InnzaQ7nNwS5CYtyCw43SE-WCWY+wg98>z(V~BGZK3E-K1%
z>!;udF&iPbYYyI%{HS^k{GDei)PCe`*wF(;fy)0w&?`m+{@z~$4}Nz;{L9KiL9{oJ
ztXY8ho31CPb>2+n;co<sx#J94t+(8}Sr?D~<bsO@*S>jojo-Nixb0Kw24^7_%TEwH
zhV6avc-Ee~TVM-UM=7B`$zPrxdc`{%l1TDmFdqB&#L|DzGr!)u0qev-=@ZDxVGD@<
zB04ZXgRov+w?KKyDC@62-eQ>PY(pe15-Y!#q(~Be#AP~X+}cC&%rilkzIb$HKSk&v
zr1(G%ngQgXUnz#8e%O!JI;o!ZNXacoe*e880S`qD8H%u8^vd1!eCEHY57ndGzON-A
zja#v0pu9>@KajO^(u9;xGhO?p8dzI<oL{mJcH?1>lH54YVDCXIp3afngwBK?2{|yW
z3Cd__3HsdnX~km?NFYs&kzu2+-lv6P*FSdtA^&`VDOsHSrO6;H-7`T&dCt5JF`p&a
z7|TtUt}t+!q%)_NyqC0{Rzx7FP%3;T3O)1=;bUl<KrXquBG5J}sB`P5C2dqsRg^z@
zENl9Th|6-0O>t0s*Nj+G+xG5&6VaI)+meo*`<&#78EW!%EKDDS);na=O@ro6T>Hs?
zb7xsgU-T2Z>$&ZwjCSZ;qx*VxLpDU8DF=|^pgc|v-Xx>xftCZ#n$8<h=!Ms|FB&rK
z?R4ndk1Xc{!04K%bMTQSF@G^Vx1<00ovD`QIT!6#pzn{v*>C(gB7UO%y%uZL7(g1r
zb;DXj-u}Dr5Kfi0FlV8ck0*ZseEEMx#nb!$8<eW>P=5I3$;Ywr*_2(yznANueDC(T
zuPa9xee*AvFD?`Q-q>+-RU(JbpVeOL3FqtIwcFRzTInmrZEon&t9I9M>rI4SedUT2
zKr%1IB5f5Lh}G<)c4hbLJ2ZigREpm(A4MU)@#VfgqSSk=pq#MJRKMT(IpC#l#IaOd
z`~??{1BeG?V>t<A(n}7^+uj<qUJNvqE(+fLHrQ*&6l)k+!29DjZZEUMKHt9!2?>~7
zaKrpQuU=30W;0Zjc!POL=PLV8p)$ST>bt{r4x9N#m-o)k*4+f#=*m}iN(0P-eQwX}
z-u|@yLF2w?$??YYpda;&YhI&8J@5J3%m3QVR=&>5@p>9BY0@p`J%kojQw)S~DXBfu
z#X(dL*WoVPe*uvcthG^L?vi8$4dZHMJvF+=@7;y1RM6V;qtp3K^6>JZ*c3CJfY$l7
z9;AR48UFo&&~M0B_i^!6yIb_#uXV~OZ35BihDM#n0P{lM{j)u@L!)f*b>c6AwD{oN
z1EhchZM|eU^uM>742gJ5G8*aYpTkzV<f<|nYqF&21%4;q__VlmW1T0b!z++Vw-jI<
zBy)5!vS%;2c6-@(-&SG$*i~eqH6i|FzJLVf9tlWI!|z;ab3ao)pQoC)Wh#UB8kvGO
zWQfT=4$wi$9R`OXI`^S_urcsvdj7Qt4Ux{cTAkwkA%s>38P2a11KE}cVM}Y@4K3^^
zm8i3Kxv%fu)_!*j4K4gf*EC`tiTy;<p^l5IJuIUpLlj0JNFYpYM+ka)PIUpf-juH6
z#a$k<5=L26&rp@;!Mm}Qip)0H%S8QaP@&j-V=r1K2Aag;uVUCdh3#F*+X(EpLC!mW
z_tu8{z7eyk_8vILEY?X*BtLgg(zzsGCySx<v}3Xb^<Jd^RFwwGNu=?52iv=&UcRFM
zBow|dr%|pIBJ{PSD@L=8CZp?+(XJ!@)Y-EG(OU0?#YLK@@FPa7BLy}$x(j_Cdtm(k
zU@pJrM0BD?XGS!lF1cZ_a~Msx$aNt0)R>ai<8vi>9pk|GP_Ca9SUb%Un^TSNsUIb~
zQ@i=_J=jVnw<t?N6B0fzW~X<A{96O}qqSTZ+|uGS({6a%neOv;?3;P?!KMsAShqdY
z_J^>%p>?uOp5$|s2y>@k7~m6C9Yv7K0}x(Vy5=F!m2HUS!x_T0WrTcahXR#Z=?S^L
z?ULkQs}HwnFA_+vz$c>>mon<N`gdsdKJ-K67=9K(Y@>(oiI_?ong|O@2#tgT^)8_F
z1y&X`30wHJB)HqH<*?#vbUZ1nzsD}ggN7mwbC=5-zziXc#S#bY3ZyL#O7bN>vJ9+j
zJ%k3Wp+Fk~H*N@GO{`dh4SjdTKabuoUcM<&LIXv%Y{A^hXtXofYdwnOvn*B{NGa0r
zoGg8Ctx<}<B8~mT=HN&t&5eg5iI*Ew2-Z%c#~#2|Dl7CLd3x}i3@q+h+5^Nw>$|X-
znhR#uJqdG1W5R`*$n}`|fcX$sXXxj_Jn<7X*eg7Cte(u3lSfSG2gHGZ0^~WFp)F`A
zl_|}%oY&y5q<?US8!PLFJZ0e12H=q=W^FjYV(@yul`)YCNqr&Q?~7Z3E^5eAk4NDy
z0}2<kDeE9gi>PhnXWy+Z`jp0x37YfQXGm@)z$iM&<8&paETfOot(}xFnnc@Ds6ef}
zl||ca^qh+-Kf-mo0@Gl{6u+g_b5emI?qh8{F#T3aY1dK61>TUF_VIC1ung0Wqe+N{
zGB!H0mF$KA<`g_&mT+}E8szxIo>#>o*JvfSY+i?m^MDSi;4Vzl>bmpPxUe#EP)|yV
zu#9s3@ZH;GGsTBZ{UT;_c3=yqijadQOFuEKc}8L=M_5~H*pN}8w5*(z;SFx2ZMg4&
zr6rKC<4q@$Zsdj#LfQW-$n^=IoZ@Xr&We=Q%WZ9tR3F7nP)A)&KBYr0e$_~0+Thz?
z0lxiLf#PX9Ga;?zms|y6V9&e>I=_1oTKAOJUL$-ShAjlTaer>wu3>UbR;$r@2<we!
zTp|UPKz2#g(aitAO0M%dEVk;AhRfpCgnV>Xm$z>SHy77|a6_;BsqAQ<3Ih)rU#GkW
zK%kX=>Ok14$r|0l)PH;>1(<yy?QTC>sAc9(NaYACMwBd^P9&8T2-mToF|*uTa+ezY
zlt3*bMpv5#71F^)o>^~br*p;3Yg}_>oN5}P4|r=*md#$Y<`H*-jdL-PvROGIW&t{=
z?XTz7XRto~guqd*v;DS6=5NMp&woyt-R-6_uz><WJoceB8oK3uUOh6&#_}_N5nn}n
zavAg4_n1dJKoGs|hO$Ea(7Il;x$uLQZez#l%<2mH91CJ{abBKX&((=t-6n;yPM#^z
z1~h@pJ6x3*K*#&QD2+}LkkV)Q&1LEgbmcMM(w+@6Z_f#7#S_ZnhFh3W<l4KSa7BR4
ziSV6G&~KxreikN|WnAQuhvcy?Y*_1gbwdY9M$nB)gdRc6(m7_6R)>&l%*es06qAme
zZ#xgU4RQ>UZO(TVba(_BwphnJV6AgAhC0<c>OIeuERV12gj+biIhqZj9|^tcOgJf%
zBUo3LXjbrUE$!G2pgg6XVVJx12`z{AysxJ(XqqvP2SZx2I0i{lnF?NG3j{mDp0vUV
zWoa9SwLsfs9Z&2{4`yAE=WDbJVyw)~CvZ*Kn&6I<Et;Nl9W;b*8Uh~5Pq^gQ>OUiC
zeD+A^pM+k14)zAu#sdIzFD5INQ!ZaSBn@7;ex%q4H9jnH&yi66y#Zv6wXi#~FwAl#
zrnh2rFb_-}OPU}}5E*i_0y?q`CSuEzM`Bh)-Ww!MS!+iNAtJo&Si379{obO1VhqdU
zwGMHQk&scule_YO+O0`8)(+-@kv7-GXag_1E~k|LJNC@(rWJzd;dkQqQ3+u}so)b8
zZiRx4NWl>7pVA8mu63I%GnFk>y}T<-VPNqTBTFcgBG8lT;o-IOaSY$K`7O-=_e#zI
zZzqqw>@Y;y`{2solti*Y!4<L!Mdb_FlU6{Wqu+H)bvX?=USI{7xL`pK8Ex1aLm}B`
zX+kab7O`oc;wviGaYH0{vSQoc=z^%9l~;Te7;OV7Hnn=5AJMijh88oC@_NUc5?Qwy
zvWwjlr1ibdjYn&0c~9vFuqPc{f#hd?^%EoS9}2-bbgBz9S&CV*<k{n#h6BKQ;X-fs
zy=<s=th+MMXvYFd%3Ei>`;lBtGjzOqyUhFf{%C*wt9>V<kc>JBEmPUGTqRdCP@6#?
zhBD|3lVzRc()b7?`;ff-SMR`{w9Y)xQ|EtR{QHH@LYp-VWL480n%f~o37d!C^A7iN
zNh#2~haBW$hG<$xLSD8+Y{DHz9TbCULNo#(MPQ?q2Wm&eG{MoPDF~Z{R1LIXbhZDW
zT>~aRQ>uZGIhxU?1;*ItiSz#r4nV6Yki7ku?;9C>`^fKyB5)Ji=%n5jhGiS7W;lmS
zzVA+(prh{b>sUGg371uY%5cSO3YqxzCPg{)$z8;V=v!GkH1L4|w?~9flm;D$^3wOl
z=iIUy8qo+Yp_TLc!Le`NG4;^_NU$>LO&>mkr-t7gtGZ$Q`kHnZ*=#K~@j;PN=jM@A
ztiFQ^XmW4p0OX;1q*qUet{g|OeoWpo+!Wt<iO$;IhS{<KrzieElZ!~@BeiW}k@IS9
zOZ+WU8h4E4{4VsV-<d*;Q#z$nI;B%OrBgbkQ#z$nI;B(kA*H_o>W|LvV|TN)00000
LNkvXXu0mjf;Ou~9

literal 0
HcmV?d00001

diff --git a/packages/plugins/EVM/src/base.ts b/packages/plugins/EVM/src/base.ts
new file mode 100644
index 000000000000..f16efd6034cc
--- /dev/null
+++ b/packages/plugins/EVM/src/base.ts
@@ -0,0 +1,19 @@
+import type { Plugin } from '@masknet/plugin-infra'
+import { ChainId, NetworkType, NETWORK_DESCRIPTORS, ProviderType, PROVIDER_DESCRIPTORS } from '@masknet/web3-shared-evm'
+import { PLUGIN_ID, PLUGIN_NAME, PLUGIN_DESCRIPTION } from './constants'
+import { languages } from './locales/languages'
+
+export const base: Plugin.Shared.Definition<ChainId, ProviderType, NetworkType> = {
+    ID: PLUGIN_ID,
+    name: { fallback: PLUGIN_NAME },
+    description: { fallback: PLUGIN_DESCRIPTION },
+    publisher: { name: { fallback: 'Mask Network' }, link: 'https://mask.io/' },
+    enableRequirement: {
+        architecture: { app: true, web: true },
+        networks: { type: 'opt-out', networks: {} },
+        target: 'stable',
+    },
+    i18n: languages,
+    declareWeb3Networks: NETWORK_DESCRIPTORS,
+    declareWeb3Providers: PROVIDER_DESCRIPTORS,
+}
diff --git a/packages/plugins/EVM/src/constants/index.ts b/packages/plugins/EVM/src/constants/index.ts
new file mode 100644
index 000000000000..cb6f517d972a
--- /dev/null
+++ b/packages/plugins/EVM/src/constants/index.ts
@@ -0,0 +1,5 @@
+import { NetworkPluginID } from '@masknet/web3-shared-base'
+
+export const PLUGIN_ID = NetworkPluginID.PLUGIN_EVM
+export const PLUGIN_NAME = 'EVM'
+export const PLUGIN_DESCRIPTION = ''
diff --git a/packages/plugins/EVM/src/env.d.ts b/packages/plugins/EVM/src/env.d.ts
new file mode 100644
index 000000000000..30a878dd10c9
--- /dev/null
+++ b/packages/plugins/EVM/src/env.d.ts
@@ -0,0 +1,10 @@
+/// <reference types="@masknet/global-types/webpack" />
+
+declare module 'ethjs-ens' {
+    import { provider as Provider } from 'web3-core'
+    export default class Ens {
+        constructor(options: { provider: Provider; network: number }) {}
+        lookup(name: string): Promise<string>
+        reverse(address: string): Promise<string>
+    }
+}
diff --git a/packages/plugins/EVM/src/hooks/index.ts b/packages/plugins/EVM/src/hooks/index.ts
new file mode 100644
index 000000000000..bc691ccd09f4
--- /dev/null
+++ b/packages/plugins/EVM/src/hooks/index.ts
@@ -0,0 +1 @@
+export * from './useProviderReady'
diff --git a/packages/plugins/EVM/src/hooks/useProviderReady.ts b/packages/plugins/EVM/src/hooks/useProviderReady.ts
new file mode 100644
index 000000000000..ba9c4f141780
--- /dev/null
+++ b/packages/plugins/EVM/src/hooks/useProviderReady.ts
@@ -0,0 +1,7 @@
+import { useAsyncRetry } from 'react-use'
+import type { ProviderType } from '@masknet/web3-shared-evm'
+import { Providers } from '../state/Connection/provider'
+
+export function useProviderReady(providerType: ProviderType) {
+    return useAsyncRetry(async () => Providers[providerType]?.readyPromise, [providerType])
+}
diff --git a/packages/mask/src/plugins/EVM/index.ts b/packages/plugins/EVM/src/index.ts
similarity index 58%
rename from packages/mask/src/plugins/EVM/index.ts
rename to packages/plugins/EVM/src/index.ts
index 48ab76cba202..70872905598b 100644
--- a/packages/mask/src/plugins/EVM/index.ts
+++ b/packages/plugins/EVM/src/index.ts
@@ -1,7 +1,36 @@
 import { registerPlugin } from '@masknet/plugin-infra'
+import type {
+    ChainId,
+    NetworkType,
+    ProviderType,
+    SchemaType,
+    Signature,
+    GasOption,
+    Block,
+    Transaction,
+    TransactionReceipt,
+    TransactionDetailed,
+    TransactionParameter,
+    TransactionSignature,
+    Web3,
+} from '@masknet/web3-shared-evm'
 import { base } from './base'
 
-registerPlugin({
+registerPlugin<
+    ChainId,
+    SchemaType,
+    ProviderType,
+    NetworkType,
+    Signature,
+    GasOption,
+    Block,
+    Transaction,
+    TransactionReceipt,
+    TransactionDetailed,
+    TransactionSignature,
+    TransactionParameter,
+    Web3
+>({
     ...base,
     SNSAdaptor: {
         load: () => import('./UI/SNSAdaptor'),
@@ -21,3 +50,5 @@ registerPlugin({
             import.meta.webpackHot && import.meta.webpackHot.accept('./Worker', () => hot(import('./Worker'))),
     },
 })
+
+export * from './state'
diff --git a/packages/plugins/EVM/src/locales/en-US.json b/packages/plugins/EVM/src/locales/en-US.json
new file mode 100644
index 000000000000..0967ef424bce
--- /dev/null
+++ b/packages/plugins/EVM/src/locales/en-US.json
@@ -0,0 +1 @@
+{}
diff --git a/packages/plugins/EVM/src/locales/index.ts b/packages/plugins/EVM/src/locales/index.ts
new file mode 100644
index 000000000000..d6ead60252e4
--- /dev/null
+++ b/packages/plugins/EVM/src/locales/index.ts
@@ -0,0 +1,6 @@
+// This file is auto generated. DO NOT EDIT
+// Run `npx gulp sync-languages` to regenerate.
+// Default fallback language in a family of languages are chosen by the alphabet order
+// To overwrite this, please overwrite packages/scripts/src/locale-kit-next/index.ts
+
+export * from './i18n_generated'
diff --git a/packages/plugins/EVM/src/locales/languages.ts b/packages/plugins/EVM/src/locales/languages.ts
new file mode 100644
index 000000000000..a2aa610c153a
--- /dev/null
+++ b/packages/plugins/EVM/src/locales/languages.ts
@@ -0,0 +1,19 @@
+// This file is auto generated. DO NOT EDIT
+// Run `npx gulp sync-languages` to regenerate.
+// Default fallback language in a family of languages are chosen by the alphabet order
+// To overwrite this, please overwrite packages/scripts/src/locale-kit-next/index.ts
+import en_US from './en-US.json'
+export const languages = {
+    en: en_US,
+}
+// @ts-ignore
+if (import.meta.webpackHot) {
+    // @ts-ignore
+    import.meta.webpackHot.accept(['./en-US.json'], () =>
+        globalThis.dispatchEvent?.(
+            new CustomEvent('MASK_I18N_HMR', {
+                detail: ['com.mask.evm', { en: en_US }],
+            }),
+        ),
+    )
+}
diff --git a/packages/mask/src/plugins/EVM/messages.ts b/packages/plugins/EVM/src/messages.ts
similarity index 57%
rename from packages/mask/src/plugins/EVM/messages.ts
rename to packages/plugins/EVM/src/messages.ts
index 28bf194d5b6d..d578e834543f 100644
--- a/packages/mask/src/plugins/EVM/messages.ts
+++ b/packages/plugins/EVM/src/messages.ts
@@ -1,27 +1,9 @@
 import { createPluginMessage, createPluginRPC, PluginMessageEmitter } from '@masknet/plugin-infra'
 import { serializer } from '@masknet/shared-base'
-import type { JsonRpcPayload } from 'web3-core-helpers'
 import { PLUGIN_ID } from './constants'
 
 if (import.meta.webpackHot) import.meta.webpackHot.accept()
-
 export interface EVM_Messages {
-    INJECTED_PROVIDER_RPC_REQUEST: {
-        payload: JsonRpcPayload
-    }
-    INJECTED_PROVIDER_RPC_RESPONSE: {
-        payload: JsonRpcPayload
-        result?: any
-        error: Error | null
-    }
-    FORTMATIC_PROVIDER_RPC_REQUEST: {
-        payload: JsonRpcPayload
-    }
-    FORTMATIC_PROVIDER_RPC_RESPONSE: {
-        payload: JsonRpcPayload
-        result?: any
-        error: Error | null
-    }
     rpc: unknown
 }
 
diff --git a/packages/mask/src/plugins/EVM/types.ts b/packages/plugins/EVM/src/services.ts
similarity index 100%
rename from packages/mask/src/plugins/EVM/types.ts
rename to packages/plugins/EVM/src/services.ts
diff --git a/packages/plugins/EVM/src/settings/index.ts b/packages/plugins/EVM/src/settings/index.ts
new file mode 100644
index 000000000000..fa91ea279624
--- /dev/null
+++ b/packages/plugins/EVM/src/settings/index.ts
@@ -0,0 +1,6 @@
+import type { Plugin } from '@masknet/plugin-infra'
+import { createValueRefWithReady } from '@masknet/shared-base'
+import type { EVM_Web3State } from '../state/Connection/types'
+
+export const Web3StateSettings = createValueRefWithReady<EVM_Web3State>(null!)
+export const SharedContextSettings = createValueRefWithReady<Plugin.Shared.SharedContext>(null!)
diff --git a/packages/plugins/EVM/src/state/AddressBook.ts b/packages/plugins/EVM/src/state/AddressBook.ts
new file mode 100644
index 000000000000..98aa419b6fd5
--- /dev/null
+++ b/packages/plugins/EVM/src/state/AddressBook.ts
@@ -0,0 +1,25 @@
+import type { Subscription } from 'use-subscription'
+import { getEnumAsArray } from '@dimensiondev/kit'
+import type { Plugin } from '@masknet/plugin-infra'
+import { AddressBookState } from '@masknet/plugin-infra/web3'
+import { isSameAddress } from '@masknet/web3-shared-base'
+import { ChainId, formatEthereumAddress, isValidAddress } from '@masknet/web3-shared-evm'
+
+export class AddressBook extends AddressBookState<ChainId> {
+    constructor(
+        context: Plugin.Shared.SharedContext,
+        subscriptions: {
+            chainId?: Subscription<ChainId>
+        },
+    ) {
+        const defaultValue = Object.fromEntries(
+            getEnumAsArray(ChainId).map((x) => [x.value, []] as [ChainId, string[]]),
+        ) as Record<ChainId, string[]>
+
+        super(context, defaultValue, subscriptions, {
+            isValidAddress,
+            isSameAddress,
+            formatAddress: formatEthereumAddress,
+        })
+    }
+}
diff --git a/packages/plugins/EVM/src/state/Connection.ts b/packages/plugins/EVM/src/state/Connection.ts
new file mode 100644
index 000000000000..fe6c3e74ad99
--- /dev/null
+++ b/packages/plugins/EVM/src/state/Connection.ts
@@ -0,0 +1,42 @@
+import type { Subscription } from 'use-subscription'
+import type { Plugin } from '@masknet/plugin-infra'
+import { ConnectionState } from '@masknet/plugin-infra/web3'
+import type {
+    Block,
+    ChainId,
+    ProviderType,
+    SchemaType,
+    Signature,
+    Transaction,
+    TransactionDetailed,
+    TransactionReceipt,
+    TransactionSignature,
+    Web3,
+    Web3Provider,
+} from '@masknet/web3-shared-evm'
+import { createConnection } from './Connection/connection'
+
+export class Connection extends ConnectionState<
+    ChainId,
+    SchemaType,
+    ProviderType,
+    Signature,
+    Block,
+    Transaction,
+    TransactionReceipt,
+    TransactionDetailed,
+    TransactionSignature,
+    Web3,
+    Web3Provider
+> {
+    constructor(
+        private context: Plugin.Shared.SharedContext,
+        subscription: {
+            account?: Subscription<string>
+            chainId?: Subscription<ChainId>
+            providerType?: Subscription<ProviderType>
+        },
+    ) {
+        super(createConnection, subscription)
+    }
+}
diff --git a/packages/plugins/EVM/src/state/Connection/composer.ts b/packages/plugins/EVM/src/state/Connection/composer.ts
new file mode 100644
index 000000000000..40bce6c71a7f
--- /dev/null
+++ b/packages/plugins/EVM/src/state/Connection/composer.ts
@@ -0,0 +1,211 @@
+import type { RequestArguments } from 'web3-core'
+import {
+    getPayloadChainId,
+    getPayloadConfig,
+    getPayloadFrom,
+    ProviderType,
+    EthereumMethodType,
+    Transaction,
+    ChainId,
+} from '@masknet/web3-shared-evm'
+import { getError, hasError } from './error'
+import type { Context, EVM_Connection, EVM_Web3ConnectionOptions, Middleware } from './types'
+import { SharedContextSettings, Web3StateSettings } from '../../settings'
+import { AddressBook } from './middleware/AddressBook'
+import { Interceptor } from './middleware/Interceptor'
+import { Nonce } from './middleware/Nonce'
+import { Popup } from './middleware/Popup'
+import { Squash } from './middleware/Squash'
+import { RecentTransaction } from './middleware/Transaction'
+import { Translator } from './middleware/Translator'
+
+class Composer<T> {
+    private listOfMiddleware: Array<Middleware<T>> = []
+
+    private compose() {
+        return (context: T, next: () => Promise<void>) => {
+            let index = -1
+            const dispatch = (i: number): Promise<void> => {
+                if (i <= index) return Promise.reject(new Error('next() called multiple times'))
+                index = i
+                let fn
+                if (i >= this.listOfMiddleware.length) fn = next
+                else fn = this.listOfMiddleware[i].fn.bind(this.listOfMiddleware[i])
+                if (!fn) return Promise.resolve()
+                try {
+                    return Promise.resolve(fn(context, dispatch.bind(null, i + 1)))
+                } catch (err) {
+                    return Promise.reject(err)
+                }
+            }
+
+            return dispatch(0)
+        }
+    }
+
+    public use(middleware: Middleware<T>) {
+        this.listOfMiddleware.push(middleware)
+    }
+
+    public async dispatch(context: T, next: () => Promise<void>) {
+        await this.compose()(context, next)
+    }
+}
+
+let pid = 0
+
+class RequestContext implements Context {
+    private id = pid
+    private _writeable = true
+    private _error: Error | null = null
+    private _result: unknown
+    private _account = Web3StateSettings.value.Provider?.account?.getCurrentValue() ?? ''
+    private _chainId = Web3StateSettings.value.Provider?.chainId?.getCurrentValue() ?? ChainId.Mainnet
+    private _providerType = Web3StateSettings.value.Provider?.providerType?.getCurrentValue() ?? ProviderType.MaskWallet
+
+    constructor(
+        private _connection: EVM_Connection,
+        private _requestArguments: RequestArguments,
+        private _options?: EVM_Web3ConnectionOptions,
+    ) {
+        // increase pid
+        pid += 1
+        this.id = pid
+
+        // mask wallet settings
+        if (this.providerType === ProviderType.MaskWallet) {
+            const { account, chainId } = SharedContextSettings.value
+            this._account = account.getCurrentValue()
+            this._chainId = chainId.getCurrentValue()
+        }
+    }
+
+    get writeable() {
+        return this._writeable
+    }
+
+    get account() {
+        return getPayloadFrom(this.request) ?? this._options?.account ?? this._account
+    }
+
+    get chainId() {
+        return getPayloadChainId(this.request) ?? this._options?.chainId ?? this._chainId
+    }
+
+    get providerType() {
+        return this.requestOptions?.providerType ?? this._providerType
+    }
+
+    get method() {
+        return this.request.method as EthereumMethodType
+    }
+
+    get config() {
+        return getPayloadConfig(this.request)
+    }
+
+    set config(config: Transaction | undefined) {
+        if (!this.config || !config) return
+        this._requestArguments = {
+            method: this.method,
+            params: [config, 'latest'],
+        }
+    }
+
+    get connection() {
+        return this._connection
+    }
+
+    get requestId() {
+        return this.id
+    }
+
+    get requestOptions() {
+        return this._options
+    }
+
+    get requestArguments() {
+        return this._requestArguments
+    }
+
+    set requestArguments(requestArguments: RequestArguments) {
+        this._requestArguments = requestArguments
+    }
+
+    get request() {
+        return {
+            id: this.id,
+            jsonrpc: '2.0',
+            params: [],
+            ...this.requestArguments,
+        }
+    }
+
+    get response() {
+        if (this._writeable) return
+        return {
+            id: this.id,
+            jsonrpc: '2.0',
+            result: this._result,
+        }
+    }
+
+    get error() {
+        if (this._writeable) return null
+        if (hasError(this._error, this.response)) return getError(this._error, this.response, 'Failed to send request.')
+        return null
+    }
+
+    set error(error: Error | null) {
+        this._error = error
+    }
+
+    get result() {
+        return this._result
+    }
+
+    set result(result: unknown) {
+        this._result = result
+    }
+
+    write(result?: unknown) {
+        this.end(null, result)
+    }
+
+    abort(error: unknown, fallback = 'Failed to send request.') {
+        this.end((error as Error) || new Error(fallback))
+    }
+
+    end(error: Error | null = null, result?: unknown) {
+        if (!this._writeable) return
+        this._writeable = false
+        this.error = error
+        this.result = result
+    }
+
+    toJSON() {
+        return {}
+    }
+}
+
+const composer = new Composer<Context>()
+
+composer.use(new Squash())
+composer.use(new Nonce())
+composer.use(new Translator())
+composer.use(new Interceptor())
+composer.use(new Popup())
+composer.use(new RecentTransaction())
+composer.use(new AddressBook())
+
+export function dispatch(context: Context, next: () => Promise<void>) {
+    return composer.dispatch(context, next)
+}
+
+export function createContext(
+    connection: EVM_Connection,
+    requestArguments: RequestArguments,
+    options?: EVM_Web3ConnectionOptions,
+) {
+    return new RequestContext(connection, requestArguments, options)
+}
diff --git a/packages/plugins/EVM/src/state/Connection/connection.ts b/packages/plugins/EVM/src/state/Connection/connection.ts
new file mode 100644
index 000000000000..91d81288c81a
--- /dev/null
+++ b/packages/plugins/EVM/src/state/Connection/connection.ts
@@ -0,0 +1,677 @@
+import { first } from 'lodash-unified'
+import Web3 from 'web3'
+import { AbiItem, numberToHex, toHex } from 'web3-utils'
+import type { RequestArguments, SignedTransaction, TransactionReceipt } from 'web3-core'
+import type { ERC20 } from '@masknet/web3-contracts/types/ERC20'
+import type { ERC20Bytes32 } from '@masknet/web3-contracts/types/ERC20Bytes32'
+import type { ERC165 } from '@masknet/web3-contracts/types/ERC165'
+import type { ERC721 } from '@masknet/web3-contracts/types/ERC721'
+import type { BalanceChecker } from '@masknet/web3-contracts/types/BalanceChecker'
+import ERC20ABI from '@masknet/web3-contracts/abis/ERC20.json'
+import ERC20Bytes32ABI from '@masknet/web3-contracts/abis/ERC20Bytes32.json'
+import ERC721ABI from '@masknet/web3-contracts/abis/ERC721.json'
+import BalanceCheckerABI from '@masknet/web3-contracts/abis/BalanceChecker.json'
+import {
+    ChainId,
+    EthereumMethodType,
+    ProviderType,
+    SchemaType,
+    Block,
+    Transaction,
+    TransactionDetailed,
+    createNativeToken,
+    createContract,
+    getTokenConstants,
+    sendTransaction,
+    createERC20Token,
+    parseStringOrBytes32,
+    createERC721Token,
+    createERC721Contract,
+    createERC721Metadata,
+    createERC721Collection,
+    createWeb3Provider,
+    getEthereumConstants,
+} from '@masknet/web3-shared-evm'
+import {
+    Account,
+    ConnectionOptions,
+    FungibleToken,
+    isSameAddress,
+    NonFungibleToken,
+    NonFungibleTokenCollection,
+    NonFungibleTokenContract,
+    TransactionStatusType,
+} from '@masknet/web3-shared-base'
+import { createContext, dispatch } from './composer'
+import { Providers } from './provider'
+import type { EVM_Connection, EVM_Web3ConnectionOptions } from './types'
+import { getReceiptStatus } from './utils'
+import { Web3StateSettings } from '../../settings'
+import type { BaseContract } from '@masknet/web3-contracts/types/types'
+
+const EMPTY_STRING = () => Promise.resolve('')
+const ZERO = () => Promise.resolve(0)
+
+export function isReadOnlyMethod(method: EthereumMethodType) {
+    return [
+        EthereumMethodType.ETH_GET_CODE,
+        EthereumMethodType.ETH_GAS_PRICE,
+        EthereumMethodType.ETH_BLOCK_NUMBER,
+        EthereumMethodType.ETH_GET_BALANCE,
+        EthereumMethodType.ETH_GET_BLOCK_BY_NUMBER,
+        EthereumMethodType.ETH_GET_BLOCK_BY_HASH,
+        EthereumMethodType.ETH_GET_TRANSACTION_BY_HASH,
+        EthereumMethodType.ETH_GET_TRANSACTION_RECEIPT,
+        EthereumMethodType.ETH_GET_TRANSACTION_COUNT,
+        EthereumMethodType.ETH_GET_FILTER_CHANGES,
+        EthereumMethodType.ETH_NEW_PENDING_TRANSACTION_FILTER,
+        EthereumMethodType.ETH_ESTIMATE_GAS,
+        EthereumMethodType.ETH_CALL,
+        EthereumMethodType.ETH_GET_LOGS,
+    ].includes(method)
+}
+
+function isNativeTokenAddress(chainId: ChainId, address: string) {
+    if (!address) return false
+    return isSameAddress(address, getTokenConstants(chainId).NATIVE_TOKEN_ADDRESS)
+}
+
+class Connection implements EVM_Connection {
+    constructor(private chainId: ChainId, private account: string, private providerType: ProviderType) {}
+
+    // Hijack RPC requests and process them with koa like middleware
+    private get hijackedRequest() {
+        return <T extends unknown>(requestArguments: RequestArguments, options?: EVM_Web3ConnectionOptions) => {
+            return new Promise<T>(async (resolve, reject) => {
+                const context = createContext(this, requestArguments, {
+                    account: this.account,
+                    chainId: this.chainId,
+                    providerType: this.providerType,
+                    popupsWindow: true,
+                    ...options,
+                })
+
+                try {
+                    await dispatch(context, async () => {
+                        if (!context.writeable) return
+                        try {
+                            switch (context.method) {
+                                case EthereumMethodType.MASK_LOGIN:
+                                    context.write(
+                                        await Web3StateSettings.value.Provider?.connect(
+                                            context.chainId,
+                                            context.providerType,
+                                        ),
+                                    )
+                                    break
+                                case EthereumMethodType.MASK_LOGOUT:
+                                    context.write(
+                                        await Web3StateSettings.value.Provider?.disconnect(context.providerType),
+                                    )
+                                    break
+                                default:
+                                    const web3Provider = await Providers[
+                                        isReadOnlyMethod(context.method) ? ProviderType.MaskWallet : this.providerType
+                                    ].createWeb3Provider(this.chainId)
+
+                                    // send request and set result in the context
+                                    context.write((await web3Provider.request(context.requestArguments)) as T)
+                            }
+                        } catch (error) {
+                            context.abort(error)
+                        }
+                    })
+                } catch (error) {
+                    context.abort(error)
+                } finally {
+                    if (context.error) reject(context.error)
+                    else resolve(context.result as T)
+                }
+            })
+        }
+    }
+
+    getWeb3(options?: EVM_Web3ConnectionOptions) {
+        const web3 = new Web3(
+            createWeb3Provider((requestArguments: RequestArguments) => this.hijackedRequest(requestArguments, options)),
+        )
+        return Promise.resolve(web3)
+    }
+
+    getWeb3Provider(options?: EVM_Web3ConnectionOptions) {
+        const web3Provider = createWeb3Provider((requestArguments: RequestArguments) =>
+            this.hijackedRequest(requestArguments, options),
+        )
+        return Promise.resolve(web3Provider)
+    }
+
+    async connect(options?: EVM_Web3ConnectionOptions): Promise<Account<ChainId>> {
+        return this.hijackedRequest<Account<ChainId>>(
+            {
+                method: EthereumMethodType.MASK_LOGIN,
+                params: [],
+            },
+            options,
+        )
+    }
+    async disconnect(options?: EVM_Web3ConnectionOptions): Promise<void> {
+        await this.hijackedRequest<void>(
+            {
+                method: EthereumMethodType.MASK_LOGOUT,
+                params: [],
+            },
+            options,
+        )
+    }
+    async transferFungibleToken(
+        address: string,
+        recipient: string,
+        amount: string,
+        memo?: string,
+        options?: EVM_Web3ConnectionOptions,
+    ): Promise<string> {
+        // Native
+        if (!address || isNativeTokenAddress(this.chainId, address)) {
+            const tx = {
+                from: this.account,
+                to: recipient,
+                value: toHex(amount),
+                data: memo ? toHex(memo) : undefined,
+            }
+            return this.sendTransaction(
+                {
+                    ...tx,
+                    gas: await this.estimateTransaction(tx, 50000, options),
+                },
+                options,
+            )
+        }
+
+        // ERC20
+        const contract = await this.getWeb3Contract<ERC20>(address, ERC20ABI as AbiItem[], options)
+        const tx = contract?.methods.transfer(recipient, toHex(amount))
+        return sendTransaction(contract, tx)
+    }
+    async transferNonFungibleToken(
+        address: string,
+        recipient: string,
+        tokenId: string,
+        amount: string,
+        options?: EVM_Web3ConnectionOptions,
+    ): Promise<string> {
+        // ERC721
+        const contract = await this.getWeb3Contract<ERC721>(address, ERC721ABI as AbiItem[], options)
+        const tx = contract?.methods.transferFrom(this.account, recipient, tokenId)
+        return sendTransaction(contract, tx)
+    }
+
+    async getGasPrice(options?: EVM_Web3ConnectionOptions): Promise<string> {
+        return this.hijackedRequest<string>(
+            {
+                method: EthereumMethodType.ETH_GAS_PRICE,
+            },
+            options,
+        )
+    }
+    async getSchemaType(address: string, options?: EVM_Web3ConnectionOptions): Promise<SchemaType | undefined> {
+        const ERC165_INTERFACE_ID = '0x01ffc9a7'
+        const ERC721_ENUMERABLE_INTERFACE_ID = '0x780e9d63'
+        const ERC1155_ENUMERABLE_INTERFACE_ID = '0xd9b67a26'
+
+        const erc165Contract = await this.getWeb3Contract<ERC165>(address, ERC20ABI as AbiItem[], options)
+
+        const isERC165 = await erc165Contract?.methods
+            .supportsInterface(ERC165_INTERFACE_ID)
+            .call({ from: this.account })
+
+        const isERC721 = await erc165Contract?.methods
+            .supportsInterface(ERC721_ENUMERABLE_INTERFACE_ID)
+            .call({ from: this.account })
+        if (isERC165 && isERC721) return SchemaType.ERC721
+
+        const isERC1155 = await erc165Contract?.methods
+            .supportsInterface(ERC1155_ENUMERABLE_INTERFACE_ID)
+            .call({ from: this.account })
+        if (isERC165 && isERC1155) return SchemaType.ERC1155
+
+        const isERC20 = (await this.getCode(address, options)) !== '0x'
+        if (isERC20) return SchemaType.ERC20
+
+        return
+    }
+    async getNonFungibleTokenContract(
+        address: string,
+        id: string,
+        options?: EVM_Web3ConnectionOptions,
+    ): Promise<NonFungibleTokenContract<ChainId, SchemaType>> {
+        // ERC721
+        const contract = await this.getWeb3Contract<ERC721>(address, ERC721ABI as AbiItem[], options)
+        const results = await Promise.allSettled([
+            contract?.methods.name().call() ?? EMPTY_STRING,
+            contract?.methods.symbol().call() ?? EMPTY_STRING,
+            contract?.methods.ownerOf(id).call() ?? EMPTY_STRING,
+            contract?.methods.balanceOf(address).call() ?? EMPTY_STRING,
+        ])
+        const [name, symbol, owner, balance] = results.map((result) =>
+            result.status === 'fulfilled' ? result.value : '',
+        ) as string[]
+        return createERC721Contract(
+            this.chainId,
+            address,
+            name ?? 'Unknown Token',
+            symbol ?? 'UNKNOWN',
+            owner,
+            balance as unknown as number,
+        )
+    }
+    async getNonFungibleTokenCollection(
+        address: string,
+        options?: EVM_Web3ConnectionOptions,
+    ): Promise<NonFungibleTokenCollection<ChainId>> {
+        // ERC721
+        const contract = await this.getWeb3Contract<ERC721>(address, ERC721ABI as AbiItem[], options)
+        const results = await Promise.allSettled([contract?.methods.name().call() ?? EMPTY_STRING])
+        const [name] = results.map((result) => (result.status === 'fulfilled' ? result.value : '')) as string[]
+        return createERC721Collection(this.chainId, address, name ?? 'Unknown Token', '')
+    }
+    async switchChain(options?: EVM_Web3ConnectionOptions): Promise<void> {
+        throw new Error('Method not implemented.')
+    }
+
+    getNativeTokenBalance(options?: EVM_Web3ConnectionOptions): Promise<string> {
+        return this.getBalance(this.account, options)
+    }
+    async getFungibleTokenBalance(address: string, options?: EVM_Web3ConnectionOptions): Promise<string> {
+        // Native
+        if (!address || isNativeTokenAddress(this.chainId, address)) return this.getNativeTokenBalance(options)
+
+        // ERC20
+        const contract = await this.getWeb3Contract<ERC20>(address, ERC20ABI as AbiItem[], options)
+        return contract?.methods.balanceOf(this.account).call() ?? '0'
+    }
+    async getNonFungibleTokenBalance(address: string, options?: EVM_Web3ConnectionOptions): Promise<string> {
+        const contract = await this.getWeb3Contract<ERC721>(address, ERC721ABI as AbiItem[], options)
+        return contract?.methods.balanceOf(this.account).call() ?? '0'
+    }
+
+    async getFungibleTokensBalance(
+        listOfAddress: string[],
+        options?: EVM_Web3ConnectionOptions,
+    ): Promise<Record<string, string>> {
+        if (!listOfAddress.length) return {}
+
+        const { BALANCE_CHECKER_ADDRESS } = getEthereumConstants(this.chainId)
+        const contract = await this.getWeb3Contract<BalanceChecker>(
+            BALANCE_CHECKER_ADDRESS ?? '',
+            BalanceCheckerABI as AbiItem[],
+            options,
+        )
+        const result = await contract?.methods.balances([this.account], listOfAddress).call({
+            // cannot check the sender's balance in the same contract
+            from: undefined,
+            chainId: numberToHex(options?.chainId ?? this.chainId),
+        })
+
+        if (result?.length !== listOfAddress.length) return {}
+        return Object.fromEntries(listOfAddress.map<[string, string]>((x, i) => [x, result[i]]))
+    }
+
+    async getNonFungibleTokensBalance(
+        listOfAddress: string[],
+        options?: EVM_Web3ConnectionOptions,
+    ): Promise<Record<string, string>> {
+        if (!listOfAddress.length) return {}
+
+        const { BALANCE_CHECKER_ADDRESS } = getEthereumConstants(this.chainId)
+        const contract = await this.getWeb3Contract<BalanceChecker>(
+            BALANCE_CHECKER_ADDRESS ?? '',
+            BalanceCheckerABI as AbiItem[],
+            options,
+        )
+        const result = await contract?.methods.balances([this.account], listOfAddress).call({
+            // cannot check the sender's balance in the same contract
+            from: undefined,
+            chainId: numberToHex(options?.chainId ?? this.chainId),
+        })
+
+        if (result?.length !== listOfAddress.length) return {}
+        return Object.fromEntries(listOfAddress.map<[string, string]>((x, i) => [x, result[i]]))
+    }
+
+    getNativeToken(options?: EVM_Web3ConnectionOptions): Promise<FungibleToken<ChainId, SchemaType>> {
+        const token = createNativeToken(options?.chainId ?? this.chainId)
+        if (!token) throw new Error('Failed to create native token.')
+        return Promise.resolve(token)
+    }
+
+    async getFungibleToken(
+        address: string,
+        options?: EVM_Web3ConnectionOptions,
+    ): Promise<FungibleToken<ChainId, SchemaType>> {
+        // Native
+        if (!address || isNativeTokenAddress(this.chainId, address)) return this.getNativeToken(options)
+
+        // ERC20
+        const contract = await this.getWeb3Contract<ERC20>(address, ERC20ABI as AbiItem[], options)
+        const bytes32Contract = await this.getWeb3Contract<ERC20Bytes32>(address, ERC20Bytes32ABI as AbiItem[], options)
+        const results = await Promise.allSettled([
+            contract?.methods.name().call() ?? EMPTY_STRING,
+            bytes32Contract?.methods.name().call() ?? EMPTY_STRING,
+            contract?.methods.symbol().call() ?? EMPTY_STRING,
+            bytes32Contract?.methods.symbol().call() ?? EMPTY_STRING,
+            contract?.methods.decimals().call() ?? ZERO,
+        ])
+        const [name, nameBytes32, symbol, symbolBytes32, decimals] = results.map((result) =>
+            result.status === 'fulfilled' ? result.value : '',
+        ) as string[]
+        return createERC20Token(
+            this.chainId,
+            address,
+            parseStringOrBytes32(name, nameBytes32, 'Unknown Token'),
+            parseStringOrBytes32(symbol, symbolBytes32, 'UNKNOWN'),
+            typeof decimals === 'string' ? Number.parseInt(decimals ? decimals : '0', 10) : decimals,
+        )
+    }
+
+    async getNonFungibleToken(
+        address: string,
+        id: string,
+        options?: EVM_Web3ConnectionOptions,
+    ): Promise<NonFungibleToken<ChainId, SchemaType>> {
+        // ERC721
+        const contract = await this.getWeb3Contract<ERC721>(address, ERC721ABI as AbiItem[], options)
+        const results = await Promise.allSettled([
+            contract?.methods.name().call() ?? EMPTY_STRING,
+            contract?.methods.symbol().call() ?? EMPTY_STRING,
+            contract?.methods.ownerOf(id).call() ?? EMPTY_STRING,
+            contract?.methods.balanceOf(address).call() ?? EMPTY_STRING,
+        ])
+        const [name, symbol, owner, balance] = results.map((result) =>
+            result.status === 'fulfilled' ? result.value : '',
+        ) as string[]
+        return createERC721Token(
+            this.chainId,
+            address,
+            id,
+            createERC721Metadata(this.chainId, name ?? 'Unknown Token', symbol ?? 'UNKNOWN'),
+            createERC721Contract(
+                this.chainId,
+                address,
+                name ?? 'Unknown Token',
+                symbol ?? 'UNKNOWN',
+                owner,
+                balance as unknown as number,
+            ),
+            createERC721Collection(this.chainId, name ?? 'Unknown Token', ''),
+        )
+    }
+
+    async getWeb3Contract<T extends BaseContract>(
+        address: string,
+        ABI: AbiItem[],
+        options?: EVM_Web3ConnectionOptions,
+    ) {
+        const web3 = await this.getWeb3(options)
+        return createContract<T>(web3, address, ABI)
+    }
+
+    async getAccount(options?: EVM_Web3ConnectionOptions) {
+        const accounts = await this.hijackedRequest<string[]>(
+            {
+                method: EthereumMethodType.ETH_ACCOUNTS,
+            },
+            options,
+        )
+        return first(accounts) ?? ''
+    }
+
+    async getChainId(options?: EVM_Web3ConnectionOptions) {
+        const chainId = await this.hijackedRequest<string>(
+            {
+                method: EthereumMethodType.ETH_CHAIN_ID,
+            },
+            options,
+        )
+        return Number.parseInt(chainId, 16)
+    }
+
+    getBlock(noOrId: number | string, options?: EVM_Web3ConnectionOptions) {
+        return this.hijackedRequest<Block>(
+            {
+                method: EthereumMethodType.ETH_GET_BLOCK_BY_NUMBER,
+                params: [typeof noOrId === 'number' ? toHex(noOrId) : noOrId, false],
+            },
+            options,
+        )
+    }
+
+    getBlockNumber(options?: EVM_Web3ConnectionOptions) {
+        return this.hijackedRequest<number>(
+            {
+                method: EthereumMethodType.ETH_BLOCK_NUMBER,
+            },
+            options,
+        )
+    }
+
+    async getBlockTimestamp(options?: EVM_Web3ConnectionOptions): Promise<number> {
+        const blockNumber = await this.getBlockNumber(options)
+        const block = await this.getBlock(blockNumber)
+        return Number.parseInt(block.timestamp, 16)
+    }
+
+    getBalance(address: string, options?: EVM_Web3ConnectionOptions) {
+        return this.hijackedRequest<string>(
+            {
+                method: EthereumMethodType.ETH_GET_BALANCE,
+                params: [address, 'latest'],
+            },
+            options,
+        )
+    }
+
+    getCode(address: string, options?: EVM_Web3ConnectionOptions) {
+        return this.hijackedRequest<string>(
+            {
+                method: EthereumMethodType.ETH_GET_CODE,
+                params: [address, 'latest'],
+            },
+            options,
+        )
+    }
+
+    async getTransaction(hash: string, options?: EVM_Web3ConnectionOptions) {
+        return this.hijackedRequest<TransactionDetailed>(
+            {
+                method: EthereumMethodType.ETH_GET_TRANSACTION_BY_HASH,
+                params: [hash],
+            },
+            options,
+        )
+    }
+
+    async estimateTransaction(transaction: Transaction, fallback = 21000, options?: EVM_Web3ConnectionOptions) {
+        try {
+            return this.hijackedRequest<string>(
+                {
+                    method: EthereumMethodType.ETH_ESTIMATE_GAS,
+                    params: [
+                        {
+                            from: this.account,
+                            ...transaction,
+                        },
+                    ],
+                },
+                options,
+            )
+        } catch {
+            return toHex(fallback)
+        }
+    }
+
+    getTransactionReceipt(hash: string, options?: EVM_Web3ConnectionOptions) {
+        return this.hijackedRequest<TransactionReceipt | null>(
+            {
+                method: EthereumMethodType.ETH_GET_TRANSACTION_RECEIPT,
+                params: [hash],
+            },
+            options,
+        )
+    }
+
+    async getTransactionStatus(id: string, options?: EVM_Web3ConnectionOptions): Promise<TransactionStatusType> {
+        return getReceiptStatus(await this.getTransactionReceipt(id, options))
+    }
+
+    async getTransactionNonce(address: string, options?: EVM_Web3ConnectionOptions) {
+        const count = await this.hijackedRequest<string>(
+            {
+                method: EthereumMethodType.ETH_GET_TRANSACTION_COUNT,
+                params: [address, 'latest'],
+            },
+            options,
+        )
+        return Number.parseInt(count, 16) || 0
+    }
+
+    signMessage(
+        dataToSign: string,
+        signType?: 'personaSign' | 'typedDataSign' | Omit<string, 'personaSign' | 'typedDataSign'>,
+        options?: EVM_Web3ConnectionOptions,
+    ) {
+        if (!options?.account) throw new Error('Unknown account.')
+
+        switch (signType) {
+            case 'personaSign':
+                return this.hijackedRequest<string>(
+                    {
+                        method: EthereumMethodType.PERSONAL_SIGN,
+                        params: [dataToSign, options.account, ''].filter((x) => typeof x !== 'undefined'),
+                    },
+                    options,
+                )
+            case 'typedDataSign':
+                return this.hijackedRequest<string>(
+                    {
+                        method: EthereumMethodType.ETH_SIGN_TYPED_DATA,
+                        params: [options.account, dataToSign],
+                    },
+                    options,
+                )
+            default:
+                throw new Error(`Unknown sign type: ${signType}.`)
+        }
+    }
+
+    async verifyMessage(
+        dataToVerify: string,
+        signature: string,
+        signType?: string,
+        options?: ConnectionOptions<ChainId, ProviderType, Transaction>,
+    ) {
+        const web3 = await this.getWeb3(options)
+        const dataToSign = await web3.eth.personal.ecRecover(dataToVerify, signature)
+        return dataToSign === dataToVerify
+    }
+
+    async signTransaction(transaction: Transaction, options?: EVM_Web3ConnectionOptions) {
+        const signed = await this.hijackedRequest<SignedTransaction>(
+            {
+                method: EthereumMethodType.ETH_SIGN_TRANSACTION,
+                params: [transaction],
+            },
+            options,
+        )
+        return signed.rawTransaction ?? ''
+    }
+
+    signTransactions(transactions: Transaction[], options?: EVM_Web3ConnectionOptions) {
+        return Promise.all(transactions.map((x) => this.signTransaction(x)))
+    }
+
+    callTransaction(transaction: Transaction, options?: EVM_Web3ConnectionOptions) {
+        return this.hijackedRequest<string>(
+            {
+                method: EthereumMethodType.ETH_CALL,
+                params: [transaction, 'latest'],
+            },
+            options,
+        )
+    }
+    sendTransaction(transaction: Transaction, options?: EVM_Web3ConnectionOptions) {
+        return this.hijackedRequest<string>(
+            {
+                method: EthereumMethodType.ETH_SEND_TRANSACTION,
+                params: [transaction],
+            },
+            options,
+        )
+    }
+
+    sendSignedTransaction(signature: string, options?: EVM_Web3ConnectionOptions) {
+        return this.hijackedRequest<string>(
+            {
+                method: EthereumMethodType.ETH_SEND_RAW_TRANSACTION,
+                params: [signature],
+            },
+            options,
+        )
+    }
+
+    confirmRequest(options?: EVM_Web3ConnectionOptions) {
+        return this.hijackedRequest<void>(
+            {
+                method: EthereumMethodType.MASK_CONFIRM_TRANSACTION,
+                params: [],
+            },
+            options,
+        )
+    }
+
+    rejectRequest(options?: EVM_Web3ConnectionOptions) {
+        return this.hijackedRequest<void>(
+            {
+                method: EthereumMethodType.MASK_REJECT_TRANSACTION,
+                params: [],
+            },
+            options,
+        )
+    }
+
+    replaceRequest(hash: string, transaction: Transaction, options?: EVM_Web3ConnectionOptions) {
+        return this.hijackedRequest<void>(
+            {
+                method: EthereumMethodType.MASK_REPLACE_TRANSACTION,
+                params: [hash, transaction],
+            },
+            options,
+        )
+    }
+
+    cancelRequest(hash: string, transaction: Transaction, options?: EVM_Web3ConnectionOptions) {
+        return this.hijackedRequest<void>(
+            {
+                method: EthereumMethodType.MASK_REPLACE_TRANSACTION,
+                params: [
+                    hash,
+                    {
+                        ...transaction,
+                        to: transaction.from,
+                        data: '0x0',
+                        value: '0x0',
+                    },
+                ],
+            },
+            options,
+        )
+    }
+}
+
+/**
+ * Build connection with provider.
+ * @param providerType
+ * @returns
+ */
+export function createConnection(chainId = ChainId.Mainnet, account = '', providerType = ProviderType.MaskWallet) {
+    return new Connection(chainId, account, providerType)
+}
diff --git a/packages/mask/src/extension/background-script/EthereumServices/error.ts b/packages/plugins/EVM/src/state/Connection/error.ts
similarity index 83%
rename from packages/mask/src/extension/background-script/EthereumServices/error.ts
rename to packages/plugins/EVM/src/state/Connection/error.ts
index f735f8c7cf3c..53485c8e3b6f 100644
--- a/packages/mask/src/extension/background-script/EthereumServices/error.ts
+++ b/packages/plugins/EVM/src/state/Connection/error.ts
@@ -1,7 +1,7 @@
 import { isNil } from 'lodash-unified'
 import type { JsonRpcResponse } from 'web3-core-helpers'
-import { JSON_RPC_ERROR_CODE } from '@masknet/plugin-wallet'
-import { i18n } from '../../../../shared-ui/locales_legacy'
+import { JSON_RPC_ERROR_CODE } from '../../types'
+// TODO: 6002: missing i18n
 
 function getInternalError(error: unknown, response?: JsonRpcResponse | null, fallback?: string): Error {
     {
@@ -32,17 +32,17 @@ export function getError(error: unknown, response?: JsonRpcResponse | null, fall
         const { code, message } = internalError as unknown as { code?: number; message: string }
 
         if (message.includes(`"code":${JSON_RPC_ERROR_CODE.INTERNAL_ERROR}`))
-            return i18n.t('plugin_wallet_transaction_server_error')
-        if (message.includes('User denied message signature.')) return i18n.t('plugin_wallet_cancel_sign')
-        if (message.includes('User denied transaction signature.')) return i18n.t('plugin_wallet_transaction_rejected')
-        if (message.includes('transaction underpriced')) return i18n.t('plugin_wallet_transaction_underpriced')
+            return 'Transaction was failed due to an internal JSON-RPC server error.'
+        if (message.includes('User denied message signature.')) return 'Signature canceled.'
+        if (message.includes('User denied transaction signature.')) return 'Transaction was rejected!'
+        if (message.includes('transaction underpriced')) return 'Transaction underpriced.'
         if (
             typeof code === 'number' &&
             (code === JSON_RPC_ERROR_CODE.INTERNAL_ERROR ||
                 (code <= JSON_RPC_ERROR_CODE.SERVER_ERROR_RANGE_START &&
                     code >= JSON_RPC_ERROR_CODE.SERVER_ERROR_RANGE_END))
         ) {
-            return i18n.t('plugin_wallet_transaction_server_error')
+            return 'Transaction was failed due to an internal JSON-RPC server error.'
         }
         return internalError.message
     })()
diff --git a/packages/plugins/EVM/src/state/Connection/interceptors/MaskWallet.ts b/packages/plugins/EVM/src/state/Connection/interceptors/MaskWallet.ts
new file mode 100644
index 000000000000..d9a87891c19a
--- /dev/null
+++ b/packages/plugins/EVM/src/state/Connection/interceptors/MaskWallet.ts
@@ -0,0 +1,79 @@
+import { toHex } from 'web3-utils'
+import { EthereumMethodType } from '@masknet/web3-shared-evm'
+import type { Context, Middleware } from '../types'
+import { SharedContextSettings, Web3StateSettings } from '../../../settings'
+
+export class MaskWallet implements Middleware<Context> {
+    async fn(context: Context, next: () => Promise<void>) {
+        const { Connection } = Web3StateSettings.value
+        const { hasNativeAPI, send, account, chainId, signTransaction, signPersonalMessage, signTypedData } =
+            SharedContextSettings.value
+
+        // redirect to native app
+        if (hasNativeAPI) {
+            try {
+                const response = await send(context.request)
+                context.end(new Error(response.error?.message ?? 'Unknown Error'), response.result)
+            } catch (error) {
+                context.abort(error)
+            } finally {
+                await next()
+            }
+            return
+        }
+
+        switch (context.request.method) {
+            case EthereumMethodType.ETH_CHAIN_ID:
+                context.write(toHex(chainId.getCurrentValue()))
+                break
+            case EthereumMethodType.ETH_ACCOUNTS:
+                context.write([account])
+                break
+            case EthereumMethodType.ETH_SEND_TRANSACTION:
+                const config = context.config
+
+                if (!config?.from || !config?.to) {
+                    context.abort(new Error('Invalid JSON payload.'))
+                    break
+                }
+                try {
+                    const rawTransaction = await signTransaction(config.from as string, config)
+
+                    if (!rawTransaction) {
+                        context.abort(new Error('Failed to sign transaction.'))
+                        break
+                    }
+
+                    const connection = await Connection?.getConnection?.({
+                        chainId: context.chainId,
+                    })
+                    const tx = await connection?.sendSignedTransaction?.(rawTransaction, {
+                        chainId: context.chainId,
+                    })
+                    context.write(tx)
+                } catch (error) {
+                    context.abort(error, 'Failed to send transaction.')
+                }
+                break
+            case EthereumMethodType.PERSONAL_SIGN:
+                try {
+                    const [data, address] = context.request.params as [string, string]
+                    context.write(await signPersonalMessage(data, address))
+                } catch (error) {
+                    context.abort(error, 'Failed to sign data.')
+                }
+                break
+            case EthereumMethodType.ETH_SIGN_TYPED_DATA:
+                try {
+                    const [address, data] = context.request.params as [string, string]
+                    context.write(await signTypedData(address, JSON.parse(data)))
+                } catch (error) {
+                    context.abort(error, 'Failed to sign typed data.')
+                }
+                break
+            default:
+                break
+        }
+        await next()
+    }
+}
diff --git a/packages/plugins/EVM/src/state/Connection/interceptors/MetaMask.ts b/packages/plugins/EVM/src/state/Connection/interceptors/MetaMask.ts
new file mode 100644
index 000000000000..d071aee816f1
--- /dev/null
+++ b/packages/plugins/EVM/src/state/Connection/interceptors/MetaMask.ts
@@ -0,0 +1,18 @@
+import { EthereumMethodType } from '@masknet/web3-shared-evm'
+import type { Context, Middleware } from '../types'
+
+export class MetaMask implements Middleware<Context> {
+    async fn(context: Context, next: () => Promise<void>) {
+        switch (context.request.method) {
+            case EthereumMethodType.PERSONAL_SIGN:
+                context.requestArguments = {
+                    ...context.requestArguments,
+                    params: [...context.requestArguments.params.slice(0, 2), ''],
+                }
+                break
+            default:
+                break
+        }
+        await next()
+    }
+}
diff --git a/packages/plugins/EVM/src/state/Connection/interceptors/WalletConnect.ts b/packages/plugins/EVM/src/state/Connection/interceptors/WalletConnect.ts
new file mode 100644
index 000000000000..233f173b499c
--- /dev/null
+++ b/packages/plugins/EVM/src/state/Connection/interceptors/WalletConnect.ts
@@ -0,0 +1,30 @@
+import { toHex } from 'web3-utils'
+import { EthereumMethodType } from '@masknet/web3-shared-evm'
+import type { Context, Middleware } from '../types'
+
+export class WalletConnect implements Middleware<Context> {
+    async fn(context: Context, next: () => Promise<void>) {
+        switch (context.request.method) {
+            case EthereumMethodType.PERSONAL_SIGN:
+                context.requestArguments = {
+                    ...context.requestArguments,
+                    params: [...context.requestArguments.params.slice(0, 2), ''],
+                }
+                break
+            default:
+                break
+        }
+
+        await next()
+
+        switch (context.request.method) {
+            case EthereumMethodType.ETH_CHAIN_ID:
+                if (typeof context.result === 'number') {
+                    context.result = toHex(context.result)
+                }
+                break
+            default:
+                break
+        }
+    }
+}
diff --git a/packages/plugins/EVM/src/state/Connection/middleware/AddressBook.ts b/packages/plugins/EVM/src/state/Connection/middleware/AddressBook.ts
new file mode 100644
index 000000000000..2fe93a2f9ef3
--- /dev/null
+++ b/packages/plugins/EVM/src/state/Connection/middleware/AddressBook.ts
@@ -0,0 +1,41 @@
+import { ChainId, EthereumMethodType, isZeroAddress, TransactionParameter } from '@masknet/web3-shared-evm'
+import type { Context, Middleware } from '../types'
+import { Web3StateSettings } from '../../../settings'
+import { isSameAddress, TransactionContext, TransactionDescriptorType } from '@masknet/web3-shared-base'
+
+export class AddressBook implements Middleware<Context> {
+    private getFrom(context?: TransactionContext<ChainId, TransactionParameter>) {
+        return context?.from
+    }
+
+    private getTo(context?: TransactionContext<ChainId, TransactionParameter>) {
+        if (!context) return
+        switch (context.type) {
+            case TransactionDescriptorType.TRANSFER:
+                return context.to
+            case TransactionDescriptorType.INTERACTION:
+                if (context.name && ['transfer', 'transferFrom'].includes(context.name)) return context.parameters?.to
+        }
+        return
+    }
+
+    async fn(context: Context, next: () => Promise<void>) {
+        const { AddressBook } = Web3StateSettings.value
+
+        await next()
+
+        if (context.method !== EthereumMethodType.ETH_SEND_TRANSACTION) return
+        if (!context.config) return
+
+        try {
+            const { TransactionFormatter } = Web3StateSettings.value
+            const formatContext = await TransactionFormatter?.createContext(context.chainId, context.config)
+            const from = this.getFrom(formatContext)
+            const to = this.getTo(formatContext)
+
+            if (!isSameAddress(from, to) && !isZeroAddress(to) && to) await AddressBook?.addAddress(context.chainId, to)
+        } catch {
+            // to scan the context for available recipient address, allow to fail silently.
+        }
+    }
+}
diff --git a/packages/plugins/EVM/src/state/Connection/middleware/Interceptor.ts b/packages/plugins/EVM/src/state/Connection/middleware/Interceptor.ts
new file mode 100644
index 000000000000..52ac8a888f1e
--- /dev/null
+++ b/packages/plugins/EVM/src/state/Connection/middleware/Interceptor.ts
@@ -0,0 +1,22 @@
+import { ProviderType } from '@masknet/web3-shared-evm'
+import type { Context, Middleware } from '../types'
+import { MaskWallet } from '../interceptors/MaskWallet'
+import { WalletConnect } from '../interceptors/WalletConnect'
+import { MetaMask } from '../interceptors/MetaMask'
+
+export class Interceptor implements Middleware<Context> {
+    private interceptors: Partial<Record<ProviderType, Middleware<Context>>> = {
+        [ProviderType.MaskWallet]: new MaskWallet(),
+        [ProviderType.MetaMask]: new MetaMask(),
+        [ProviderType.WalletConnect]: new WalletConnect(),
+        [ProviderType.Coin98]: new MetaMask(),
+        [ProviderType.WalletLink]: new MetaMask(),
+        [ProviderType.MathWallet]: new MetaMask(),
+        [ProviderType.Fortmatic]: new MetaMask(),
+    }
+
+    async fn(context: Context, next: () => Promise<void>) {
+        if (context.writeable) await this.interceptors[context.providerType]?.fn(context, next)
+        else await next()
+    }
+}
diff --git a/packages/plugins/EVM/src/state/Connection/middleware/Nonce.ts b/packages/plugins/EVM/src/state/Connection/middleware/Nonce.ts
new file mode 100644
index 000000000000..4dd6945f0d6a
--- /dev/null
+++ b/packages/plugins/EVM/src/state/Connection/middleware/Nonce.ts
@@ -0,0 +1,156 @@
+import { EthereumAddress } from 'wallet.ts'
+import { toHex } from 'web3-utils'
+import { EthereumMethodType, ProviderType } from '@masknet/web3-shared-evm'
+import type { Context, EVM_Connection, Middleware } from '../types'
+import { SharedContextSettings } from '../../../settings'
+
+class NonceManager {
+    constructor(private address: string, private connection: EVM_Connection) {}
+
+    private nonce = NonceManager.INITIAL_NONCE
+    private locked = false
+    private tasks: Array<() => void> = []
+
+    private lock() {
+        this.locked = true
+    }
+    private unlock() {
+        this.locked = false
+    }
+    private continue() {
+        if (!this.locked) this.tasks.shift()?.()
+    }
+    private async getRemoteNonce() {
+        const { chainId } = SharedContextSettings.value
+
+        return new Promise<number>(async (resolve, reject) => {
+            const callback = (error: Error | null, nonce = 0) => {
+                if (error) reject(error)
+                else resolve(nonce)
+                this.unlock()
+                this.continue()
+            }
+            const run = async () => {
+                try {
+                    this.lock()
+                    callback(
+                        null,
+                        await this.connection.getTransactionNonce(this.address, {
+                            chainId: chainId.getCurrentValue(),
+                            // Only mask wallets need to use Nonce
+                            providerType: ProviderType.MaskWallet,
+                        }),
+                    )
+                } catch (error: unknown) {
+                    callback(error instanceof Error ? error : new Error('Failed to get remote nonce.'))
+                }
+            }
+            if (this.locked) this.tasks.push(run)
+            else run()
+        })
+    }
+
+    public async getNonce() {
+        const nonce = Math.max(await this.getRemoteNonce(), this.nonce)
+        await this.setNonce(nonce)
+        return nonce
+    }
+
+    public async setNonce(nonce: number) {
+        return new Promise<void>(async (resolve, reject) => {
+            const callback = (e: Error | null) => {
+                if (e) reject(e)
+                else resolve()
+                this.unlock()
+                this.continue()
+            }
+            const run = async () => {
+                this.lock()
+                this.nonce = nonce
+                callback(null)
+            }
+            if (this.locked) this.tasks.push(run)
+            else run()
+        })
+    }
+
+    public async resetNonce() {
+        const nonce = await this.getRemoteNonce()
+        await this.setNonce(nonce)
+    }
+
+    static INITIAL_NONCE = -1
+}
+
+export class Nonce implements Middleware<Context> {
+    private cache = new Map<string, NonceManager>()
+
+    constructor() {
+        // const { chainId } = SharedContextSettings.value
+        // // reset all nonce if the chain id of mask wallet was changed
+        // chainId.subscribe(() => {
+        //     this.resetAllNonce()
+        // })
+    }
+
+    private getManager(address: string, connection: EVM_Connection) {
+        const address_ = EthereumAddress.checksumAddress(address)
+        if (!this.cache.has(address_)) this.cache.set(address_, new NonceManager(address_, connection))
+        return this.cache.get(address_)!
+    }
+
+    private getNonce(address: string, connection: EVM_Connection) {
+        return this.getManager(address, connection).getNonce()
+    }
+
+    private async commitNonce(address: string, connection: EVM_Connection) {
+        const manager = this.getManager(address, connection)
+        return manager.setNonce((await manager.getNonce()) + 1)
+    }
+
+    private resetNonce(address: string, connection: EVM_Connection) {
+        const manager = this.getManager(address, connection)
+        return manager.resetNonce()
+    }
+
+    private async resetAllNonce() {
+        await Promise.all(Array.from(this.cache.values()).map((m) => m.resetNonce()))
+    }
+
+    async fn(context: Context, next: () => Promise<void>) {
+        // set a nonce for Mask wallets
+        if (
+            context.account &&
+            context.providerType === ProviderType.MaskWallet &&
+            context.method === EthereumMethodType.ETH_SEND_TRANSACTION
+        ) {
+            context.requestArguments = {
+                method: context.method,
+                params: [
+                    {
+                        ...context.config,
+                        nonce: toHex(await this.getNonce(context.account, context.connection)),
+                    },
+                ],
+            }
+        }
+
+        await next() // send transaction
+
+        if (context.method !== EthereumMethodType.ETH_SEND_TRANSACTION) return
+
+        try {
+            const message = context.error?.message ?? ''
+            const isGeneralErrorNonce = /\bnonce|transaction\b/im.test(message) && /\b(low|high|old)\b/im.test(message)
+            const isAuroraErrorNonce = message.includes('ERR_INCORRECT_NONCE')
+
+            // if a transaction hash was received then commit the nonce
+            if (isGeneralErrorNonce || isAuroraErrorNonce) await this.resetNonce(context.account, context.connection)
+            // else if a nonce error was occurred then reset the nonce
+            else if (!context.error && typeof context.result === 'string')
+                await this.commitNonce(context.account, context.connection)
+        } catch {
+            // to scan the context to determine how to update the local nonce, allow to fail silently
+        }
+    }
+}
diff --git a/packages/plugins/EVM/src/state/Connection/middleware/Popup.ts b/packages/plugins/EVM/src/state/Connection/middleware/Popup.ts
new file mode 100644
index 000000000000..07d23e5ebb0b
--- /dev/null
+++ b/packages/plugins/EVM/src/state/Connection/middleware/Popup.ts
@@ -0,0 +1,96 @@
+import { defer } from '@dimensiondev/kit'
+import type { JsonRpcPayload } from 'web3-core-helpers'
+import { EthereumMethodType, getPayloadConfig, ProviderType } from '@masknet/web3-shared-evm'
+import type { Context, Middleware } from '../types'
+import { SharedContextSettings } from '../../../settings'
+
+export class Popup implements Middleware<Context> {
+    private previousRequests: Array<{
+        context: Context
+        resume: () => void
+    }> = []
+
+    private isRiskPayload(payload: JsonRpcPayload) {
+        return [
+            EthereumMethodType.ETH_SIGN,
+            EthereumMethodType.PERSONAL_SIGN,
+            EthereumMethodType.ETH_SIGN_TYPED_DATA,
+            EthereumMethodType.ETH_DECRYPT,
+            EthereumMethodType.ETH_GET_ENCRYPTION_PUBLIC_KEY,
+            EthereumMethodType.ETH_SEND_TRANSACTION,
+            EthereumMethodType.ETH_SIGN_TRANSACTION,
+        ].includes(payload.method as EthereumMethodType)
+    }
+
+    async fn(context: Context, next: () => Promise<void>) {
+        const { hasNativeAPI, shiftUnconfirmedRequest, pushUnconfirmedRequest, openPopupWindow, closePopupWindow } =
+            SharedContextSettings.value
+
+        if (context.providerType !== ProviderType.MaskWallet || hasNativeAPI || !context.requestOptions?.popupsWindow) {
+            await next()
+            return
+        }
+
+        switch (context.method) {
+            case EthereumMethodType.MASK_CONFIRM_TRANSACTION:
+            case EthereumMethodType.MASK_REJECT_TRANSACTION:
+                const payload = await shiftUnconfirmedRequest()
+                const previousRequest = this.previousRequests.shift()
+
+                if (!payload) {
+                    context.abort(new Error('No unconfirmed request.'))
+                    break
+                }
+
+                await closePopupWindow()
+
+                if (context.method === EthereumMethodType.MASK_CONFIRM_TRANSACTION) {
+                    if (previousRequest) {
+                        previousRequest.resume()
+                    } else {
+                        const config = getPayloadConfig(payload)
+
+                        if (!config) {
+                            context.abort(new Error('Failed to read transaction config.'))
+                            break
+                        }
+
+                        // re-send the previous request
+                        await context.connection.sendTransaction(config, context.requestOptions)
+                    }
+                } else {
+                    if (previousRequest) {
+                        previousRequest.context.abort(new Error('The user rejected the request.'))
+                        previousRequest.resume()
+                    }
+                }
+                context.end()
+                break
+            default:
+                if (!this.isRiskPayload(context.request)) break
+
+                try {
+                    await pushUnconfirmedRequest(context.request)
+                    await openPopupWindow()
+
+                    const [promise, resume] = defer<void>()
+
+                    // for now, we only support one request per time.
+                    this.previousRequests = [
+                        {
+                            context,
+                            resume,
+                        },
+                    ]
+
+                    // the context is holding until the user confirms or rejects it.
+                    await promise
+                } catch (error) {
+                    context.abort(error, 'Failed to add request.')
+                    break
+                }
+        }
+
+        await next()
+    }
+}
diff --git a/packages/plugins/EVM/src/state/Connection/middleware/Squash.ts b/packages/plugins/EVM/src/state/Connection/middleware/Squash.ts
new file mode 100644
index 000000000000..54853d48b969
--- /dev/null
+++ b/packages/plugins/EVM/src/state/Connection/middleware/Squash.ts
@@ -0,0 +1,78 @@
+import { sha3 } from 'web3-utils'
+import type { RequestArguments, TransactionConfig } from 'web3-core'
+import { defer } from '@dimensiondev/kit'
+import { EthereumMethodType } from '@masknet/web3-shared-evm'
+import type { Context, Middleware, EVM_Web3ConnectionOptions } from '../types'
+
+/**
+ * Squash multiple RPC requests into a single one.
+ */
+export class Squash implements Middleware<Context> {
+    private cache = new Map<string, Promise<unknown>>()
+
+    /**
+     * If it returns a cache id, existence means the request can be cached.
+     * @param requestArguments
+     * @returns
+     */
+    private createRequestID(requestArguments: RequestArguments, overrides?: EVM_Web3ConnectionOptions) {
+        // The -1 is not a valid chain id, only used for distinguishing with other explicit chain id.
+        const chainId = overrides?.chainId ?? -1
+        const { method, params } = requestArguments
+        switch (method) {
+            case EthereumMethodType.ETH_GET_CODE: {
+                const [address, tag = 'latest'] = params as [string, string]
+                return sha3([chainId, method, address, tag].join())
+            }
+            case EthereumMethodType.ETH_GET_BALANCE:
+            case EthereumMethodType.ETH_GET_TRANSACTION_COUNT:
+                const [account, tag = 'latest'] = params as [string, string]
+                return sha3([chainId, method, account, tag].join())
+            case EthereumMethodType.ETH_BLOCK_NUMBER:
+                return sha3([chainId, method].join())
+            case EthereumMethodType.ETH_CALL:
+            case EthereumMethodType.ETH_ESTIMATE_GAS: {
+                const [config, tag = 'latest'] = params as [TransactionConfig, string]
+                return sha3([chainId, method, JSON.stringify(config), tag].join())
+            }
+            case EthereumMethodType.ETH_GET_TRANSACTION_RECEIPT:
+            case EthereumMethodType.ETH_GET_TRANSACTION_BY_HASH:
+                const [hash] = params as [string]
+                return sha3([chainId, method, hash].join())
+            default:
+                return
+        }
+    }
+
+    async fn(context: Context, next: () => Promise<void>) {
+        const id = this.createRequestID(context.request, context.requestOptions)
+
+        // unable to cache the request
+        if (!id) {
+            await next()
+            return
+        }
+
+        // squash into the cached request
+        if (this.cache.has(id)) {
+            try {
+                context.write(await this.cache.get(id))
+            } catch (error) {
+                context.abort(error)
+            } finally {
+                await next()
+            }
+            return
+        }
+
+        // cache a request
+        const [promise, resolve, reject] = defer<unknown>()
+
+        this.cache.set(id, promise)
+        await next()
+        this.cache.delete(id)
+
+        if (context.error) reject(context.error)
+        else resolve(context.result)
+    }
+}
diff --git a/packages/plugins/EVM/src/state/Connection/middleware/Transaction.ts b/packages/plugins/EVM/src/state/Connection/middleware/Transaction.ts
new file mode 100644
index 000000000000..a7ac2910c0a1
--- /dev/null
+++ b/packages/plugins/EVM/src/state/Connection/middleware/Transaction.ts
@@ -0,0 +1,66 @@
+import type { TransactionReceipt } from 'web3-core'
+import { TransactionStatusType } from '@masknet/web3-shared-base'
+import { EthereumMethodType, Transaction } from '@masknet/web3-shared-evm'
+import type { Context, Middleware } from '../types'
+import { getReceiptStatus } from '../utils'
+import { Web3StateSettings } from '../../../settings'
+
+export class RecentTransaction implements Middleware<Context> {
+    async fn(context: Context, next: () => Promise<void>) {
+        const { Transaction } = Web3StateSettings.value
+        let replacedHash
+
+        switch (context.method) {
+            case EthereumMethodType.MASK_REPLACE_TRANSACTION:
+                try {
+                    const [hash, config] = context.request.params as [string, Transaction]
+
+                    // remember the hash of the replaced tx
+                    replacedHash = hash
+                    context.write(await context.connection.sendTransaction(config, context.requestOptions))
+                } catch (error) {
+                    context.abort(error)
+                }
+                break
+        }
+
+        await next()
+
+        try {
+            switch (context.method) {
+                case EthereumMethodType.ETH_SEND_TRANSACTION:
+                    if (!context.config || typeof context.result !== 'string') return
+                    if (replacedHash)
+                        await Transaction?.replaceTransaction?.(
+                            context.chainId,
+                            context.account,
+                            replacedHash,
+                            context.result,
+                            context.config,
+                        )
+                    else
+                        await Transaction?.addTransaction?.(
+                            context.chainId,
+                            context.account,
+                            context.result,
+                            context.config,
+                        )
+                    break
+                case EthereumMethodType.ETH_GET_TRANSACTION_RECEIPT:
+                    const receipt = context.result as TransactionReceipt | null
+                    const status = getReceiptStatus(receipt)
+                    if (receipt?.transactionHash && status !== TransactionStatusType.NOT_DEPEND) {
+                        await Transaction?.updateTransaction?.(
+                            context.chainId,
+                            context.account,
+                            receipt.transactionHash,
+                            status,
+                        )
+                    }
+                    break
+            }
+        } catch {
+            // to record tx in the database, allow to fail silently
+        }
+    }
+}
diff --git a/packages/plugins/EVM/src/state/Connection/middleware/Translator.ts b/packages/plugins/EVM/src/state/Connection/middleware/Translator.ts
new file mode 100644
index 000000000000..596b67e6567f
--- /dev/null
+++ b/packages/plugins/EVM/src/state/Connection/middleware/Translator.ts
@@ -0,0 +1,24 @@
+import { ChainId } from '@masknet/web3-shared-evm'
+import { Base } from '../translators/Base'
+import { Polygon } from '../translators/Polygon'
+import type { Context, Middleware, Translator as ChainTranslator } from '../types'
+
+/**
+ * JSON RPC transactor for EVM chains.
+ */
+export class Translator implements Middleware<Context> {
+    private base = new Base()
+
+    private translators: Partial<Record<ChainId, ChainTranslator>> = {
+        [ChainId.Matic]: new Polygon(),
+        [ChainId.Mumbai]: new Polygon(),
+    }
+
+    async fn(context: Context, next: () => Promise<void>) {
+        const translator = this.translators[context.chainId] ?? this.base
+
+        if (translator.encode) await translator.encode(context)
+        await next()
+        if (translator.decode) await translator.decode(context)
+    }
+}
diff --git a/packages/plugins/EVM/src/state/Connection/provider.ts b/packages/plugins/EVM/src/state/Connection/provider.ts
new file mode 100644
index 000000000000..339b3d6f7416
--- /dev/null
+++ b/packages/plugins/EVM/src/state/Connection/provider.ts
@@ -0,0 +1,26 @@
+import { ProviderType } from '@masknet/web3-shared-evm'
+import { CustomNetworkProvider } from './providers/CustomNetwork'
+import { MaskWalletProvider } from './providers/MaskWallet'
+import { MetaMaskProvider } from './providers/MetaMask'
+import WalletConnectProvider from './providers/WalletConnect'
+import type { BaseProvider } from './providers/Base'
+import { WalletLinkProvider } from './providers/WalletLink'
+import { Coin98Provider } from './providers/Coin98'
+import { MathWalletProvider } from './providers/MathWallet'
+import FortmaticProvider from './providers/Fortmatic'
+import TorusProvider from './providers/Torus'
+
+/**
+ * Register all supported providers
+ */
+export const Providers: Record<ProviderType, BaseProvider> = {
+    [ProviderType.MaskWallet]: new MaskWalletProvider(),
+    [ProviderType.MetaMask]: new MetaMaskProvider(),
+    [ProviderType.WalletConnect]: new WalletConnectProvider(),
+    [ProviderType.Coin98]: new Coin98Provider(),
+    [ProviderType.WalletLink]: new WalletLinkProvider(),
+    [ProviderType.MathWallet]: new MathWalletProvider(),
+    [ProviderType.Fortmatic]: new FortmaticProvider(),
+    [ProviderType.Torus]: new TorusProvider(),
+    [ProviderType.CustomNetwork]: new CustomNetworkProvider(),
+}
diff --git a/packages/plugins/EVM/src/state/Connection/providers/Base.ts b/packages/plugins/EVM/src/state/Connection/providers/Base.ts
new file mode 100644
index 000000000000..dfc3863411ab
--- /dev/null
+++ b/packages/plugins/EVM/src/state/Connection/providers/Base.ts
@@ -0,0 +1,95 @@
+import Web3 from 'web3'
+import { toHex } from 'web3-utils'
+import type { RequestArguments } from 'web3-core'
+import { Emitter } from '@servie/events'
+import type { Account, ProviderEvents } from '@masknet/web3-shared-base'
+import {
+    chainResolver,
+    createWeb3Provider,
+    ChainId,
+    ProviderType,
+    EthereumMethodType,
+    getRPCConstants,
+} from '@masknet/web3-shared-evm'
+import type { EVM_Provider } from '../types'
+import { delay } from '@dimensiondev/kit'
+
+export class BaseProvider implements EVM_Provider {
+    emitter = new Emitter<ProviderEvents<ChainId, ProviderType>>()
+
+    // No need to wait by default
+    get ready() {
+        return true
+    }
+
+    // No need to wait by default
+    get readyPromise() {
+        return Promise.resolve()
+    }
+
+    // Switch chain with RPC calls by default
+    async switchChain(chainId?: ChainId): Promise<void> {
+        if (chainId === ChainId.Mainnet) {
+            await this.request({
+                method: EthereumMethodType.WALLET_SWITCH_ETHEREUM_CHAIN,
+                params: [
+                    {
+                        chainId: toHex(chainId),
+                    },
+                ],
+            })
+        } else if (chainId) {
+            await this.request<void>({
+                method: EthereumMethodType.WALLET_ADD_ETHEREUM_CHAIN,
+                params: [
+                    {
+                        chainId: toHex(chainId),
+                        chainName: chainResolver.chainName(chainId),
+                        nativeCurrency: chainResolver.nativeCurrency(chainId),
+                        rpcUrls: getRPCConstants(chainId).RPC_URLS ?? [],
+                        blockExplorerUrls: [chainResolver.infoURL(chainId)?.url],
+                    },
+                ],
+            })
+        } else {
+            throw new Error('Unknown chain id.')
+        }
+
+        // Delay to make sure the provider will return the newest chain id.
+        await delay(1000)
+
+        const actualChainId = await this.request<string>({
+            method: EthereumMethodType.ETH_CHAIN_ID,
+            params: [],
+        })
+
+        if (Number.parseInt(actualChainId, 10) !== chainId)
+            throw new Error(`Failed to switch to ${chainResolver.chainFullName(chainId)}.`)
+    }
+
+    // A provider should at least implement a RPC request method.
+    // Then it can be used to create an external provider for web3js.
+    async request<T extends unknown>(requestArguments: RequestArguments): Promise<T> {
+        throw new Error('Method not implemented.')
+    }
+
+    // Create a web3 instance from the external provider by default.
+    async createWeb3(chainId?: ChainId) {
+        // @ts-ignore
+        return new Web3(await this.createWeb3Provider(chainId))
+    }
+
+    // Create an external provider from the basic request method.
+    async createWeb3Provider(chainId?: ChainId) {
+        await this.readyPromise
+        return createWeb3Provider(this.request.bind(this))
+    }
+
+    connect(chainId: ChainId): Promise<Account<ChainId>> {
+        throw new Error('Method not implemented')
+    }
+
+    disconnect(): Promise<void> {
+        throw new Error('Method not implemented')
+    }
+}
diff --git a/packages/plugins/EVM/src/state/Connection/providers/BaseInjected.ts b/packages/plugins/EVM/src/state/Connection/providers/BaseInjected.ts
new file mode 100644
index 000000000000..e8bc161b88db
--- /dev/null
+++ b/packages/plugins/EVM/src/state/Connection/providers/BaseInjected.ts
@@ -0,0 +1,74 @@
+import { first } from 'lodash-unified'
+import type { RequestArguments } from 'web3-core'
+import { isExtensionSiteType } from '@masknet/shared-base'
+import type { InjectedProvider } from '@masknet/injected-script/sdk/Base'
+import { ChainId, EthereumMethodType, ProviderType, Web3Provider } from '@masknet/web3-shared-evm'
+import type { EVM_Provider } from '../types'
+import { BaseProvider } from './Base'
+
+export class BaseInjectedProvider extends BaseProvider implements EVM_Provider {
+    constructor(protected providerType: ProviderType, protected bridge: InjectedProvider) {
+        super()
+
+        bridge.on('accountsChanged', this.onAccountsChanged.bind(this))
+        bridge.on('chainChanged', this.onChainChanged.bind(this))
+        bridge.on('disconnect', this.onDisconnect.bind(this))
+    }
+
+    override get ready() {
+        return this.bridge.isReady
+    }
+
+    override get readyPromise() {
+        if (isExtensionSiteType()) return Promise.reject(new Error('Not available on extension site.'))
+        return this.bridge.untilAvailable().then(() => undefined)
+    }
+
+    protected onAccountsChanged(accounts: string[]) {
+        this.emitter.emit('accounts', accounts)
+    }
+
+    protected onChainChanged(chainId: string) {
+        this.emitter.emit('chainId', chainId)
+    }
+
+    protected onDisconnect() {
+        this.emitter.emit('disconnect', this.providerType)
+    }
+
+    override async createWeb3Provider(chainId?: ChainId) {
+        await this.readyPromise
+
+        if (!this.bridge) throw new Error('Failed to detect in-page provider.')
+        return this.bridge as unknown as Web3Provider
+    }
+
+    override async request<T extends unknown>(requestArguments: RequestArguments): Promise<T> {
+        const provider = await this.createWeb3Provider()
+        return provider.request(requestArguments) as Promise<T>
+    }
+
+    override async connect() {
+        await this.readyPromise
+
+        const provider = await this.createWeb3Provider()
+        const accounts = await provider.request<string[]>({
+            method: EthereumMethodType.ETH_REQUEST_ACCOUNTS,
+            params: [],
+        })
+        const chainId = await provider.request<string>({
+            method: EthereumMethodType.ETH_CHAIN_ID,
+            params: [],
+        })
+
+        return {
+            chainId: Number.parseInt(chainId, 16),
+            account: first(accounts) ?? '',
+        }
+    }
+
+    override async disconnect() {
+        await this.readyPromise
+        await this.bridge.disconnect()
+    }
+}
diff --git a/packages/plugins/EVM/src/state/Connection/providers/Coin98.ts b/packages/plugins/EVM/src/state/Connection/providers/Coin98.ts
new file mode 100644
index 000000000000..835bdcda15f4
--- /dev/null
+++ b/packages/plugins/EVM/src/state/Connection/providers/Coin98.ts
@@ -0,0 +1,10 @@
+import { injectedCoin98EVMProvider } from '@masknet/injected-script'
+import { ProviderType } from '@masknet/web3-shared-evm'
+import type { EVM_Provider } from '../types'
+import { BaseInjectedProvider } from './BaseInjected'
+
+export class Coin98Provider extends BaseInjectedProvider implements EVM_Provider {
+    constructor() {
+        super(ProviderType.Coin98, injectedCoin98EVMProvider)
+    }
+}
diff --git a/packages/plugins/EVM/src/state/Connection/providers/CustomNetwork.ts b/packages/plugins/EVM/src/state/Connection/providers/CustomNetwork.ts
new file mode 100644
index 000000000000..cbc2ef95be70
--- /dev/null
+++ b/packages/plugins/EVM/src/state/Connection/providers/CustomNetwork.ts
@@ -0,0 +1,4 @@
+import type { EVM_Provider } from '../types'
+import { BaseProvider } from './Base'
+
+export class CustomNetworkProvider extends BaseProvider implements EVM_Provider {}
diff --git a/packages/plugins/EVM/src/state/Connection/providers/Fortmatic.ts b/packages/plugins/EVM/src/state/Connection/providers/Fortmatic.ts
new file mode 100644
index 000000000000..5db1b1dc093e
--- /dev/null
+++ b/packages/plugins/EVM/src/state/Connection/providers/Fortmatic.ts
@@ -0,0 +1,111 @@
+import Fortmatic from 'fortmatic'
+import type { RequestArguments } from 'web3-core'
+import { first } from 'lodash-unified'
+import type { FmProvider } from 'fortmatic/dist/cjs/src/core/fm-provider'
+import { ChainId, chainResolver, getRPCConstants } from '@masknet/web3-shared-evm'
+import { createLookupTableResolver } from '@masknet/web3-shared-base'
+import type { EVM_Provider } from '../types'
+import { BaseProvider } from './Base'
+
+// #region create in-page fortmatic provider
+
+/* spell-checker: disable-next-line */
+const TEST_KEY = 'pk_test_D9EAF9A8ACEC9627'
+
+/* spell-checker: disable-next-line */
+const LIVE_KEY = 'pk_live_331BE8AA24445030'
+
+const resolveAPI_Key = createLookupTableResolver<ChainIdFortmatic, string>(
+    {
+        [ChainId.Mainnet]: LIVE_KEY,
+        [ChainId.BSC]: LIVE_KEY,
+        [ChainId.Matic]: LIVE_KEY,
+        [ChainId.Rinkeby]: TEST_KEY,
+        [ChainId.Ropsten]: TEST_KEY,
+        [ChainId.Kovan]: TEST_KEY,
+    },
+    '',
+)
+
+const isFortmaticSupported = (chainId: ChainId): chainId is ChainIdFortmatic => {
+    return [ChainId.Mainnet, ChainId.BSC].includes(chainId)
+}
+
+export type ChainIdFortmatic =
+    | ChainId.Mainnet
+    | ChainId.BSC
+    | ChainId.Matic
+    | ChainId.Rinkeby
+    | ChainId.Ropsten
+    | ChainId.Kovan
+
+export default class FortmaticProvider extends BaseProvider implements EVM_Provider {
+    /**
+     * If the internal chain id exists, it means the connection was created.
+     * Otherwise, no connection was created before.
+     */
+    private chainId_: ChainIdFortmatic | null = null
+    private providerPool = new Map<ChainId, FmProvider>()
+
+    private get chainId(): ChainIdFortmatic {
+        const chainId = this.chainId_
+        if (!chainId) throw new Error('No connection.')
+        if (!isFortmaticSupported(chainId)) throw new Error(`Chain id ${chainId} is not supported.`)
+        return chainId
+    }
+
+    private set chainId(newChainId: ChainId) {
+        const chainId = newChainId
+        if (!isFortmaticSupported(chainId)) throw new Error(`Chain id ${chainId} is not supported.`)
+        this.chainId_ = chainId
+    }
+
+    private createFortmatic(chainId: ChainIdFortmatic) {
+        const rpcUrl = first(getRPCConstants(chainId).RPC_URLS)
+        if (!rpcUrl) throw new Error('Failed to create provider.')
+        return new Fortmatic(resolveAPI_Key(chainId), { chainId, rpcUrl })
+    }
+
+    private createProvider() {
+        if (this.providerPool.has(this.chainId)) return this.providerPool.get(this.chainId)!
+
+        const fm = this.createFortmatic(this.chainId)
+        const provider = fm.getProvider()
+        this.providerPool.set(this.chainId, provider)
+        return provider
+    }
+
+    private login() {
+        const fm = this.createFortmatic(this.chainId)
+        return fm.user.login()
+    }
+
+    private logout() {
+        const fm = this.createFortmatic(this.chainId)
+        return fm.user.logout()
+    }
+
+    override async connect(chainId: ChainId) {
+        try {
+            this.chainId = chainId
+            const accounts = await this.login()
+            if (!accounts.length) throw new Error(`Failed to connect to ${chainResolver.chainFullName(this.chainId)}.`)
+            return {
+                account: first(accounts)!,
+                chainId,
+            }
+        } catch (error) {
+            this.chainId_ = null
+            throw error
+        }
+    }
+
+    override async disconnect() {
+        await this.logout()
+        this.chainId_ = null
+    }
+
+    override request<T extends unknown>(requestArguments: RequestArguments) {
+        return this.createProvider().send<T>(requestArguments.method, requestArguments.params)
+    }
+}
diff --git a/packages/plugins/EVM/src/state/Connection/providers/MaskWallet.ts b/packages/plugins/EVM/src/state/Connection/providers/MaskWallet.ts
new file mode 100644
index 000000000000..14c3647dc7ee
--- /dev/null
+++ b/packages/plugins/EVM/src/state/Connection/providers/MaskWallet.ts
@@ -0,0 +1,139 @@
+import Web3 from 'web3'
+import { toHex } from 'web3-utils'
+import type { HttpProvider, RequestArguments } from 'web3-core'
+import type { JsonRpcResponse } from 'web3-core-helpers'
+import { ChainId, createWeb3Provider, createPayload, getRPCConstants, chainResolver } from '@masknet/web3-shared-evm'
+import { BaseProvider } from './Base'
+import type { EVM_Provider } from '../types'
+import { SharedContextSettings, Web3StateSettings } from '../../../settings'
+
+const { RPC_WEIGHTS = [] } = getRPCConstants(ChainId.Mainnet)
+
+export class MaskWalletProvider extends BaseProvider implements EVM_Provider {
+    private id = 0
+    private seed = Math.floor(Math.random() * RPC_WEIGHTS.length)
+    private providerPool = new Map<string, HttpProvider>()
+    private instancePool = new Map<string, Web3>()
+
+    constructor() {
+        super()
+        Web3StateSettings.readyPromise.then(this.addShareContextListeners.bind(this))
+    }
+
+    /**
+     * Block by the share context
+     * @returns
+     */
+    override get ready() {
+        return Web3StateSettings.ready
+    }
+
+    /**
+     * Block by the share context
+     * @returns
+     */
+    override get readyPromise() {
+        return Web3StateSettings.readyPromise.then(() => {})
+    }
+
+    override async switchChain(chainId?: ChainId) {
+        await SharedContextSettings.value.updateAccount({
+            chainId,
+        })
+    }
+
+    private addShareContextListeners() {
+        const sharedContext = SharedContextSettings.value
+
+        sharedContext.chainId.subscribe(() => {
+            this.emitter.emit('chainId', toHex(sharedContext.chainId.getCurrentValue()))
+        })
+        sharedContext.account.subscribe(() => {
+            this.emitter.emit('accounts', [sharedContext.account.getCurrentValue()])
+        })
+    }
+
+    private createProviderInstance(url: string) {
+        const instance = this.providerPool.get(url)
+        if (instance) return instance
+
+        const newInstance = new Web3.providers.HttpProvider(url, {
+            timeout: 30 * 1000, // ms
+            // @ts-ignore
+            clientConfig: {
+                keepalive: true,
+                keepaliveInterval: 1, // ms
+            },
+            reconnect: {
+                auto: true,
+                delay: 5000, // ms
+                maxAttempts: Number.MAX_SAFE_INTEGER,
+                onTimeout: true,
+            },
+        })
+        this.providerPool.set(url, newInstance)
+        return newInstance
+    }
+
+    private async createProvider(chainId = ChainId.Mainnet) {
+        await this.readyPromise
+
+        const { RPC_URLS = [], RPC_WEIGHTS = [] } = getRPCConstants(chainId)
+        const url = RPC_URLS[RPC_WEIGHTS[this.seed]]
+        if (!url) throw new Error('Failed to create provider.')
+        return this.createProviderInstance(url)
+    }
+
+    private createWeb3Instance(provider: HttpProvider) {
+        const instance = this.instancePool.get(provider.host)
+        if (instance) return instance
+
+        const newInstance = new Web3(provider)
+        this.instancePool.set(provider.host, newInstance)
+        return newInstance
+    }
+
+    override async createWeb3(chainId?: ChainId) {
+        return this.createWeb3Instance(await this.createProvider(chainId))
+    }
+
+    override async createWeb3Provider(chainId?: ChainId) {
+        const provider = await this.createProvider(chainId)
+        const request = <T extends unknown>(requestArguments: RequestArguments) => {
+            return new Promise<T>((resolve, reject) => {
+                this.id += 1
+                const requestId = this.id
+                provider?.send(
+                    createPayload(requestId, requestArguments.method, requestArguments.params),
+                    (error: Error | null, response?: JsonRpcResponse) => {
+                        if (error) reject(error)
+                        else resolve(response?.result as T)
+                    },
+                )
+            })
+        }
+        return createWeb3Provider(request)
+    }
+
+    override async connect(chainId: ChainId) {
+        const { account, chainId: actualChainId, updateAccount } = SharedContextSettings.value
+
+        if (!account.getCurrentValue()) throw new Error(`Failed to connect to ${chainResolver.chainFullName(chainId)}.`)
+
+        // switch chain
+        if (actualChainId.getCurrentValue() !== chainId) {
+            await updateAccount({
+                chainId,
+            })
+        }
+
+        return {
+            chainId,
+            account: account.getCurrentValue(),
+        }
+    }
+
+    override async disconnect() {
+        // do nothing
+    }
+}
diff --git a/packages/plugins/EVM/src/state/Connection/providers/MathWallet.ts b/packages/plugins/EVM/src/state/Connection/providers/MathWallet.ts
new file mode 100644
index 000000000000..e8a6820b13fc
--- /dev/null
+++ b/packages/plugins/EVM/src/state/Connection/providers/MathWallet.ts
@@ -0,0 +1,10 @@
+import { injectedMathWalletProvider } from '@masknet/injected-script'
+import { ProviderType } from '@masknet/web3-shared-evm'
+import type { EVM_Provider } from '../types'
+import { BaseInjectedProvider } from './BaseInjected'
+
+export class MathWalletProvider extends BaseInjectedProvider implements EVM_Provider {
+    constructor() {
+        super(ProviderType.MathWallet, injectedMathWalletProvider)
+    }
+}
diff --git a/packages/plugins/EVM/src/state/Connection/providers/MetaMask.ts b/packages/plugins/EVM/src/state/Connection/providers/MetaMask.ts
new file mode 100644
index 000000000000..f44d3b47acea
--- /dev/null
+++ b/packages/plugins/EVM/src/state/Connection/providers/MetaMask.ts
@@ -0,0 +1,26 @@
+import createMetaMaskProvider from '@dimensiondev/metamask-extension-provider'
+import { injectedMetaMaskProvider } from '@masknet/injected-script'
+import { isExtensionSiteType } from '@masknet/shared-base'
+import { ProviderType } from '@masknet/web3-shared-evm'
+import type { EVM_Provider } from '../types'
+import { BaseInjectedProvider } from './BaseInjected'
+
+export class MetaMaskProvider extends BaseInjectedProvider implements EVM_Provider {
+    constructor() {
+        super(ProviderType.MetaMask, isExtensionSiteType() ? createMetaMaskProvider() : injectedMetaMaskProvider)
+    }
+
+    override get ready() {
+        if (isExtensionSiteType()) return true
+        return super.ready
+    }
+
+    override get readyPromise() {
+        if (isExtensionSiteType()) return Promise.resolve(undefined)
+        return super.readyPromise
+    }
+
+    override async disconnect(): Promise<void> {
+        // do nothing
+    }
+}
diff --git a/packages/plugins/EVM/src/state/Connection/providers/Torus.ts b/packages/plugins/EVM/src/state/Connection/providers/Torus.ts
new file mode 100644
index 000000000000..5e1882d5062b
--- /dev/null
+++ b/packages/plugins/EVM/src/state/Connection/providers/Torus.ts
@@ -0,0 +1,95 @@
+import { first } from 'lodash-unified'
+import { createLookupTableResolver } from '@masknet/web3-shared-base'
+import { ChainId, chainResolver } from '@masknet/web3-shared-evm'
+import * as Torus from '@toruslabs/torus-embed'
+import type { RequestArguments } from 'web3-core'
+import type { EVM_Provider } from '../types'
+import { BaseProvider } from './Base'
+
+export type ChainIdTorus = ChainId.Mainnet | ChainId.BSC | ChainId.Matic | ChainId.xDai
+
+const getTorusNetworkType = createLookupTableResolver<ChainIdTorus, Torus.ETHEREUM_NETWORK_TYPE>(
+    {
+        [ChainId.Mainnet]: 'mainnet',
+        [ChainId.BSC]: 'bsc_mainnet',
+        [ChainId.Matic]: 'matic',
+        [ChainId.xDai]: 'xdai',
+    },
+    'mainnet',
+)
+
+const isTorusSupported = (chainId: ChainId): chainId is ChainIdTorus => {
+    return [ChainId.Mainnet, ChainId.BSC, ChainId.Matic, ChainId.xDai].includes(chainId)
+}
+
+export default class TorusProvider extends BaseProvider implements EVM_Provider {
+    /**
+     * If the internal chain id exists, it means the connection was created.
+     * Otherwise, no connection was created before.
+     */
+    private chainId_: ChainIdTorus | null = null
+    private providerPool = new Map<ChainId, Torus.TorusInpageProvider>()
+
+    private get chainId(): ChainIdTorus {
+        const chainId = this.chainId_
+        if (!chainId) throw new Error('No connection.')
+        if (!isTorusSupported(chainId)) throw new Error(`Chain id ${chainId} is not supported.`)
+        return chainId
+    }
+
+    private set chainId(newChainId: ChainId) {
+        const chainId = newChainId
+        if (!isTorusSupported(chainId)) throw new Error(`Chain id ${chainId} is not supported.`)
+        this.chainId_ = chainId
+    }
+
+    private async createTorus(chainId: ChainIdTorus) {
+        const torus = new Torus.default()
+
+        await torus.init({
+            network: {
+                host: getTorusNetworkType(chainId),
+            },
+            enableLogging: true,
+            showTorusButton: false,
+        })
+        return torus
+    }
+
+    private async createProvider() {
+        if (this.providerPool.has(this.chainId)) return this.providerPool.get(this.chainId)!
+
+        const { provider } = await this.createTorus(this.chainId)
+        this.providerPool.set(this.chainId, provider)
+        return provider
+    }
+
+    private async login() {
+        const provider = await this.createProvider()
+        return provider.enable()
+    }
+
+    override async connect(chainId: ChainId) {
+        try {
+            this.chainId = chainId
+            const accounts = await this.login()
+            if (!accounts.length) throw new Error(`Failed to connect to ${chainResolver.chainFullName(this.chainId)}.`)
+            return {
+                account: first(accounts)!,
+                chainId,
+            }
+        } catch (error) {
+            this.chainId_ = null
+            throw error
+        }
+    }
+
+    override async disconnect(): Promise<void> {
+        this.chainId_ = null
+    }
+
+    override async request<T extends unknown>(requestArguments: RequestArguments): Promise<T> {
+        const provider = await this.createProvider()
+        return provider.request(requestArguments) as Promise<T>
+    }
+}
diff --git a/packages/plugins/EVM/src/state/Connection/providers/WalletConnect.ts b/packages/plugins/EVM/src/state/Connection/providers/WalletConnect.ts
new file mode 100644
index 000000000000..5089f132f922
--- /dev/null
+++ b/packages/plugins/EVM/src/state/Connection/providers/WalletConnect.ts
@@ -0,0 +1,178 @@
+import { first } from 'lodash-unified'
+import { toHex } from 'web3-utils'
+import type { RequestArguments } from 'web3-core'
+import { defer } from '@dimensiondev/kit'
+import WalletConnect from '@walletconnect/client'
+import type { ITxData } from '@walletconnect/types'
+import QRCodeModal from '@walletconnect/qrcode-modal'
+import { ChainId, chainResolver, EthereumMethodType, ProviderType } from '@masknet/web3-shared-evm'
+import { BaseProvider } from './Base'
+import type { EVM_Provider } from '../types'
+import type { Account } from '@masknet/web3-shared-base'
+
+interface SessionPayload {
+    event: 'connect' | 'session_update'
+    params: [
+        {
+            chainId: ChainId
+            accounts: string[]
+        },
+    ]
+}
+
+interface DisconnectPayload {
+    event: 'disconnect'
+    params: [{ message: string }]
+}
+
+interface ModalClosePayload {
+    event: 'modal_closed'
+    params: []
+}
+
+export default class WalletConnectProvider extends BaseProvider implements EVM_Provider {
+    private connectorId = 0
+    private connector: WalletConnect = null!
+
+    /**
+     * The ongoing walletconnect connection which the listeners use to resolve later.
+     */
+    private connection: {
+        resolve: (account: Account<ChainId>) => void
+        reject: (error: unknown) => void
+    } | null = null
+
+    private async createConnector() {
+        // disable legacy listeners
+        this.connectorId += 1
+
+        const connectorId = this.connectorId
+
+        const createListener = <T>(listener: (error: Error | null, payload: T) => void) => {
+            return (error: Error | null, payload: T) => {
+                if (connectorId !== this.connectorId) return
+                return listener(error, payload)
+            }
+        }
+
+        const connector = new WalletConnect({
+            bridge: 'https://bridge.walletconnect.org',
+            qrcodeModal: QRCodeModal,
+        })
+
+        if (connector.connected) await connector.killSession()
+
+        connector.on('connect', createListener(this.onConnect.bind(this)))
+        connector.on('disconnect', createListener(this.onDisconnect.bind(this)))
+        connector.on('session_update', createListener(this.onSessionUpdate.bind(this)))
+        connector.on('modal_closed', createListener(this.onModalClose.bind(this)))
+
+        return connector
+    }
+
+    private onConnect(error: Error | null, payload: SessionPayload) {
+        if (!this.connection) return
+
+        if (error) {
+            this.connection.reject(error)
+            return
+        }
+        this.connection.resolve({
+            chainId: payload.params[0].chainId,
+            account: first(payload.params[0].accounts) ?? '',
+        })
+    }
+
+    private onDisconnect(error: Error | null, payload: DisconnectPayload) {
+        if (this.connection) {
+            this.connection.reject(error || new Error('User rejected connection.'))
+            return
+        }
+
+        if (error) return
+
+        this.emitter.emit('disconnect', ProviderType.WalletConnect)
+    }
+
+    private onSessionUpdate(error: Error | null, payload: SessionPayload) {
+        if (this.connection) {
+            this.onConnect(error, payload)
+            return
+        }
+
+        if (error) return
+
+        this.emitter.emit('chainId', toHex(payload.params[0].chainId))
+        this.emitter.emit('accounts', payload.params[0].accounts)
+    }
+
+    private onModalClose(error: Error | null, payload: ModalClosePayload) {
+        if (!this.connection) return
+        this.connection.reject(error || new Error('User closed modal.'))
+    }
+
+    private async login(chainId?: ChainId) {
+        // delay to return the result until session is updated or connected
+        const [deferred, resolve, reject] = defer<Account<ChainId>>()
+
+        this.connector = await this.createConnector()
+
+        await this.connector.createSession({
+            chainId,
+        })
+
+        this.connection = {
+            resolve,
+            reject,
+        }
+
+        return deferred.finally(() => {
+            this.connection = null
+        })
+    }
+
+    private async logout() {
+        await this.connector.killSession()
+    }
+
+    override request<T extends unknown>(requestArguments: RequestArguments): Promise<T> {
+        switch (requestArguments.method) {
+            case EthereumMethodType.ETH_CHAIN_ID:
+                return Promise.resolve(this.connector.chainId) as Promise<T>
+            case EthereumMethodType.ETH_SEND_TRANSACTION: {
+                const [config] = requestArguments.params as [ITxData]
+                return this.connector.sendTransaction(config) as Promise<T>
+            }
+            case EthereumMethodType.ETH_SIGN_TRANSACTION: {
+                const [config] = requestArguments.params as [ITxData]
+                return this.connector.signTransaction(config) as Promise<T>
+            }
+            case EthereumMethodType.PERSONAL_SIGN: {
+                return this.connector.signPersonalMessage(requestArguments.params) as Promise<T>
+            }
+            case EthereumMethodType.ETH_SIGN: {
+                return this.connector.signMessage(requestArguments.params) as Promise<T>
+            }
+            case EthereumMethodType.ETH_SIGN_TYPED_DATA: {
+                return this.connector.signTypedData(requestArguments.params) as Promise<T>
+            }
+            default:
+                return this.connector.sendCustomRequest(requestArguments)
+        }
+    }
+
+    // It doesn't widely implement for switching chains with WalletConnect.
+    override async switchChain(chainId?: ChainId | undefined): Promise<void> {
+        throw new Error(`Failed to connect to ${chainResolver.chainFullName(chainId)}.`)
+    }
+
+    override async connect(chainId: ChainId) {
+        const account = await this.login(chainId)
+        if (!account.account) throw new Error(`Failed to connect to ${chainResolver.chainFullName(chainId)}.`)
+        return account
+    }
+
+    override async disconnect() {
+        await this.logout()
+    }
+}
diff --git a/packages/plugins/EVM/src/state/Connection/providers/WalletLink.ts b/packages/plugins/EVM/src/state/Connection/providers/WalletLink.ts
new file mode 100644
index 000000000000..bbbc454624ee
--- /dev/null
+++ b/packages/plugins/EVM/src/state/Connection/providers/WalletLink.ts
@@ -0,0 +1,10 @@
+import { injectedWalletLinkProvider } from '@masknet/injected-script'
+import { ProviderType } from '@masknet/web3-shared-evm'
+import type { EVM_Provider } from '../types'
+import { BaseInjectedProvider } from './BaseInjected'
+
+export class WalletLinkProvider extends BaseInjectedProvider implements EVM_Provider {
+    constructor() {
+        super(ProviderType.WalletLink, injectedWalletLinkProvider)
+    }
+}
diff --git a/packages/plugins/EVM/src/state/Connection/translators/Base.ts b/packages/plugins/EVM/src/state/Connection/translators/Base.ts
new file mode 100644
index 000000000000..f633830797da
--- /dev/null
+++ b/packages/plugins/EVM/src/state/Connection/translators/Base.ts
@@ -0,0 +1,62 @@
+import BigNumber from 'bignumber.js'
+import { toHex } from 'web3-utils'
+import { GasOptionType, isLessThan } from '@masknet/web3-shared-base'
+import { addGasMargin, chainResolver, formatGweiToWei, formatWeiToGwei } from '@masknet/web3-shared-evm'
+import type { Context, Translator } from '../types'
+import { Web3StateSettings } from '../../../settings'
+import { isReadOnlyMethod } from '../connection'
+
+export class Base implements Translator {
+    async encode(context: Context) {
+        const config = context.config
+        if (!config || isReadOnlyMethod(context.method)) return
+
+        // #region polyfill transaction config
+        {
+            // add gas margin
+            if (config.gas)
+                config.gas = BigNumber.max(toHex(addGasMargin(config.gas as string).toFixed()), 21000).toFixed()
+
+            // add gas price
+            const hub = await Web3StateSettings.value.Hub?.getHub?.({
+                chainId: context.chainId,
+            })
+            const options = await hub?.getGasOptions?.(context.chainId)
+            const { [GasOptionType.SLOW]: slowOption, [GasOptionType.NORMAL]: normalOption } = options ?? {}
+
+            if (chainResolver.isSupport(context.chainId, 'EIP1559')) {
+                delete config.gasPrice
+
+                if (
+                    slowOption?.suggestedMaxFeePerGas &&
+                    normalOption &&
+                    isLessThan(
+                        config.maxFeePerGas ? formatWeiToGwei(config.maxFeePerGas as string) : 0,
+                        slowOption.suggestedMaxPriorityFeePerGas,
+                    )
+                ) {
+                    config.maxFeePerGas = toHex(formatGweiToWei(normalOption.suggestedMaxFeePerGas).toFixed(0))
+                    config.maxPriorityFeePerGas = toHex(
+                        formatGweiToWei(normalOption.suggestedMaxPriorityFeePerGas).toFixed(0),
+                    )
+                }
+            } else {
+                delete config.maxFeePerGas
+                delete config.maxPriorityFeePerGas
+
+                if (
+                    slowOption &&
+                    normalOption &&
+                    isLessThan((config.gasPrice as string) ?? 0, slowOption.suggestedMaxFeePerGas)
+                ) {
+                    config.gasPrice = toHex(normalOption.suggestedMaxFeePerGas)
+                }
+            }
+
+            context.config = config
+        }
+        // #endregion
+    }
+
+    async decode(context: Context) {}
+}
diff --git a/packages/plugins/EVM/src/state/Connection/translators/Celo.ts b/packages/plugins/EVM/src/state/Connection/translators/Celo.ts
new file mode 100644
index 000000000000..8b5237d59d08
--- /dev/null
+++ b/packages/plugins/EVM/src/state/Connection/translators/Celo.ts
@@ -0,0 +1,11 @@
+import type { Context } from '../types'
+import { Base } from './Base'
+
+export class Celo extends Base {
+    override async encode(context: Context) {
+        throw new Error('Method not implemented.')
+    }
+    override async decode(context: Context) {
+        throw new Error('Method not implemented.')
+    }
+}
diff --git a/packages/plugins/EVM/src/state/Connection/translators/Optimistic.ts b/packages/plugins/EVM/src/state/Connection/translators/Optimistic.ts
new file mode 100644
index 000000000000..9fcb35357192
--- /dev/null
+++ b/packages/plugins/EVM/src/state/Connection/translators/Optimistic.ts
@@ -0,0 +1,11 @@
+import type { Context } from '../types'
+import { Base } from './Base'
+
+export class Optimistic extends Base {
+    override async encode(context: Context) {
+        throw new Error('Method not implemented.')
+    }
+    override async decode(context: Context) {
+        throw new Error('Method not implemented.')
+    }
+}
diff --git a/packages/plugins/EVM/src/state/Connection/translators/Polygon.ts b/packages/plugins/EVM/src/state/Connection/translators/Polygon.ts
new file mode 100644
index 000000000000..0e63937abef4
--- /dev/null
+++ b/packages/plugins/EVM/src/state/Connection/translators/Polygon.ts
@@ -0,0 +1,27 @@
+import { EthereumMethodType, ProviderType } from '@masknet/web3-shared-evm'
+import type { Context } from '../types'
+import { isReadOnlyMethod } from '../connection'
+import { Base } from './Base'
+
+export class Polygon extends Base {
+    override async encode(context: Context): Promise<void> {
+        if (!context.config) return
+        // the current version of metamask doesn't support polygon with EIP1559
+        if (context.providerType !== ProviderType.MetaMask) return
+
+        if (context.method !== EthereumMethodType.ETH_SEND_TRANSACTION) return
+
+        const config = {
+            ...context.config,
+            // keep the legacy gasPrice
+            ...(isReadOnlyMethod(context.method)
+                ? {}
+                : { gasPrice: context.config.gasPrice ?? (await context.connection.getGasPrice()) }),
+        }
+
+        delete config.maxFeePerGas
+        delete config.maxPriorityFeePerGas
+
+        context.config = config
+    }
+}
diff --git a/packages/plugins/EVM/src/state/Connection/types.ts b/packages/plugins/EVM/src/state/Connection/types.ts
new file mode 100644
index 000000000000..74c983487bf3
--- /dev/null
+++ b/packages/plugins/EVM/src/state/Connection/types.ts
@@ -0,0 +1,77 @@
+import type { RequestArguments } from 'web3-core'
+import type { JsonRpcPayload, JsonRpcResponse } from 'web3-core-helpers'
+import type { Web3Helper } from '@masknet/plugin-infra/web3'
+import type { NetworkPluginID, WalletProvider } from '@masknet/web3-shared-base'
+import type {
+    Web3,
+    ChainId,
+    ProviderType,
+    EthereumMethodType,
+    Transaction,
+    Web3Provider,
+} from '@masknet/web3-shared-evm'
+
+export interface EVM_Web3State extends Web3Helper.Web3State<NetworkPluginID.PLUGIN_EVM> {}
+
+export interface EVM_Web3ConnectionOptions extends Web3Helper.Web3ConnectionOptions<NetworkPluginID.PLUGIN_EVM> {}
+
+export interface EVM_Provider extends WalletProvider<ChainId, ProviderType, Web3Provider, Web3> {
+    /** The basic RPC request method. */
+    request<T extends unknown>(requestArguments: RequestArguments): Promise<T>
+}
+
+export interface EVM_Connection extends Web3Helper.Web3Connection<NetworkPluginID.PLUGIN_EVM> {
+    estimateTransaction(config: Transaction, fallback?: number, options?: EVM_Web3ConnectionOptions): Promise<string>
+}
+
+export interface Context {
+    readonly account: string
+    readonly chainId: ChainId
+    readonly requestId: number
+    readonly writeable: boolean
+    readonly providerType: ProviderType
+    readonly method: EthereumMethodType
+    readonly connection: EVM_Connection
+    readonly requestOptions: EVM_Web3ConnectionOptions | undefined
+
+    /**
+     * JSON RPC request payload
+     */
+    readonly request: JsonRpcPayload
+
+    /**
+     * JSON RPC response object
+     */
+    readonly response: JsonRpcResponse | undefined
+
+    config: Transaction | undefined
+    requestArguments: RequestArguments
+    result: unknown
+    error: Error | null
+
+    /**
+     * Resolve a request and write down the result into the context. Alias of end(null, result)
+     */
+    write: (result: unknown) => void
+
+    /**
+     * Reject a request and throw an error. Alias of end(error)
+     */
+    abort: (error: unknown, fallback?: string) => void
+
+    /**
+     * Seal a request by resolving or rejecting it.
+     */
+    end: (error?: Error | null, result?: unknown) => void
+
+    toJSON: () => object
+}
+
+export interface Middleware<T> {
+    fn: (context: T, next: () => Promise<void>) => Promise<void>
+}
+
+export interface Translator {
+    encode?(context: Context): Promise<void>
+    decode?(context: Context): Promise<void>
+}
diff --git a/packages/plugins/EVM/src/state/Connection/utils.ts b/packages/plugins/EVM/src/state/Connection/utils.ts
new file mode 100644
index 000000000000..44021be85add
--- /dev/null
+++ b/packages/plugins/EVM/src/state/Connection/utils.ts
@@ -0,0 +1,10 @@
+import type { TransactionReceipt } from 'web3-core'
+import { TransactionStatusType } from '@masknet/web3-shared-base'
+
+export function getReceiptStatus(receipt: TransactionReceipt | null) {
+    if (!receipt) return TransactionStatusType.NOT_DEPEND
+    const status = receipt.status as unknown as string
+    if (receipt.status === false || ['0', '0x', '0x0'].includes(status)) return TransactionStatusType.FAILED
+    if (receipt.status === true || ['1', '0x1'].includes(status)) return TransactionStatusType.SUCCEED
+    return TransactionStatusType.NOT_DEPEND
+}
diff --git a/packages/plugins/EVM/src/state/Hub.ts b/packages/plugins/EVM/src/state/Hub.ts
new file mode 100644
index 000000000000..4824ed2aa531
--- /dev/null
+++ b/packages/plugins/EVM/src/state/Hub.ts
@@ -0,0 +1,20 @@
+import type { CurrencyType, SourceType } from '@masknet/web3-shared-base'
+import { HubState } from '@masknet/plugin-infra/web3'
+import type { ChainId, GasOption, SchemaType } from '@masknet/web3-shared-evm'
+import type { Plugin } from '@masknet/plugin-infra'
+import type { Subscription } from 'use-subscription'
+import { createHub } from './Hub/hub'
+
+export class Hub extends HubState<ChainId, SchemaType, GasOption> {
+    constructor(
+        private context: Plugin.Shared.SharedContext,
+        subscription: {
+            account?: Subscription<string>
+            chainId?: Subscription<ChainId>
+            sourceType?: Subscription<SourceType>
+            currencyType?: Subscription<CurrencyType>
+        },
+    ) {
+        super(createHub, subscription)
+    }
+}
diff --git a/packages/plugins/EVM/src/state/Hub/TokenIconSpecialIconList.json b/packages/plugins/EVM/src/state/Hub/TokenIconSpecialIconList.json
new file mode 100644
index 000000000000..2909c44aacdf
--- /dev/null
+++ b/packages/plugins/EVM/src/state/Hub/TokenIconSpecialIconList.json
@@ -0,0 +1,197 @@
+[
+    {
+        "name": "MASK",
+        "address": "0x2eD9a5C8C13b93955103B9a7C167B67Ef4d568a3",
+        "logo_url": "https://dimensiondev.github.io/Mask-VI/assets/Logo/MB--Logo--Geo--ForceCircle--Blue.svg"
+    },
+    {
+        "name": "MASK",
+        "address": "0x2B9E7ccDF0F4e5B24757c1E1a80e311E34Cb10c7",
+        "logo_url": "https://dimensiondev.github.io/Mask-VI/assets/Logo/MB--Logo--Geo--ForceCircle--Blue.svg"
+    },
+    {
+        "name": "NEST",
+        "address": "0x04abEdA201850aC0124161F037Efd70c74ddC74C",
+        "logo_url": "https://s2.coinmarketcap.com/static/img/coins/64x64/5841.png"
+    },
+    {
+        "name": "Yes KYC",
+        "address": "0x14de81C71B3F73874659082b971433514E201B27",
+        "logo_url": "https://etherscan.io/token/images/ykyctoken_32.png"
+    },
+    {
+        "name": "cWBTC",
+        "address": "0xC11b1268C1A384e55C48c2391d8d480264A3A7F4",
+        "logo_url": "https://etherscan.io/token/images/compoundwrappedbtc_32.png"
+    },
+    {
+        "name": "DANK",
+        "address": "0x0cB8D0B37C7487b11d57F1f33dEfA2B1d3cFccfE",
+        "logo_url": "https://etherscan.io/token/images/dank_32.png"
+    },
+    {
+        "name": "DSCP",
+        "address": "0x03e3f0c25965f13DbbC58246738C183E27b26a56",
+        "logo_url": "https://etherscan.io/token/images/disciplina_28.png"
+    },
+    {
+        "name": "GEE",
+        "address": "0x4F4f0Db4de903B88f2B1a2847971E231D54F8fd3",
+        "logo_url": "https://etherscan.io/token/images/geens_28.png"
+    },
+    {
+        "name": "FKX",
+        "address": "0x009e864923b49263c7F10D19B7f8Ab7a9A5AAd33",
+        "logo_url": "https://etherscan.io/token/images/knoxstertoken_32.png?v=2"
+    },
+    {
+        "name": "N0031",
+        "address": "0x075190c6130EA0a3A7E40802F1D77F4Ea8f38fE2",
+        "logo_url": "https://etherscan.io/token/images/nestyfi_32.png"
+    },
+    {
+        "name": "NFC",
+        "address": "0xb0866289e870D2efc282406cF4123Df6E5BcB652",
+        "logo_url": "https://etherscan.io/token/images/nofaketoday_28.png"
+    },
+    {
+        "name": "O3Swap",
+        "address": "0xEe9801669C6138E84bD50dEB500827b776777d28",
+        "logo_url": "https://etherscan.io/token/images/o3swaptoken_32.png"
+    },
+    {
+        "name": "QTUM",
+        "address": "0x9a642d6b3368ddc662CA244bAdf32cDA716005BC",
+        "logo_url": "https://etherscan.io/token/images/qtum_28.png"
+    },
+    {
+        "name": "REMI",
+        "address": "0x13cb85823f78Cff38f0B0E90D3e975b8CB3AAd64",
+        "logo_url": "https://etherscan.io/token/images/remiit_28.png"
+    },
+    {
+        "name": "REDC",
+        "address": "0xB563300A3BAc79FC09B93b6F84CE0d4465A2AC27",
+        "logo_url": "https://etherscan.io/token/images/redcab_28.png"
+    },
+    {
+        "name": "SBTC",
+        "address": "0xfE18be6b3Bd88A2D2A7f928d00292E7a9963CfC6",
+        "logo_url": "https://etherscan.io/token/images/Synthetixsbtc_32.png"
+    },
+    {
+        "name": "TPT",
+        "address": "0xC596bD09d652827b0106292D3e378D5938df4B12",
+        "logo_url": "https://etherscan.io/token/images/009-TPT-Teleport-Token-Coin-Logo.png"
+    },
+    {
+        "name": "TRL",
+        "address": "0xCed1A8529125D1bD06B54a7B01210df357D00885",
+        "logo_url": "https://etherscan.io/token/images/giraffage_28.png"
+    },
+    {
+        "name": "UPX",
+        "address": "0x5f778ec4B31a506c1Dfd8b06F131E9B451a61D39",
+        "logo_url": "https://etherscan.io/token/images/udap_28.png"
+    },
+    {
+        "name": "WYV",
+        "address": "0x056017c55aE7AE32d12AeF7C679dF83A85ca75Ff",
+        "logo_url": "https://etherscan.io/token/images/wyvern_28.png"
+    },
+    {
+        "name": "VDOC",
+        "address": "0x82BD526bDB718C6d4DD2291Ed013A5186cAE2DCa",
+        "logo_url": "https://etherscan.io/token/images/vdoc_28.png"
+    },
+    {
+        "name": "rSAI",
+        "address": "0xea8b224eDD3e342DEb514C4176c2E72Bcce6fFF9",
+        "logo_url": "https://etherscan.io/token/images/redeemabledai_32.png?v=2"
+    },
+    {
+        "name": "ALICE",
+        "address": "0xAC51066d7bEC65Dc4589368da368b212745d63E8",
+        "logo_url": "https://bscscan.com/token/images/alicetoken_32.png"
+    },
+    {
+        "name": "BP",
+        "address": "0xACB8f52DC63BB752a51186D1c55868ADbFfEe9C1",
+        "logo_url": "https://bscscan.com/token/images/bunnypark_32.png"
+    },
+    {
+        "name": "DOGGY",
+        "address": "0x74926B3d118a63F6958922d3DC05eB9C6E6E00c6",
+        "logo_url": "https://bscscan.com/token/images/doggy_32.png"
+    },
+    {
+        "name": "DCH",
+        "address": "0x14ACe3d3429408bFA8562099A253172913AD71bd",
+        "logo_url": "https://bscscan.com/token/images/dechart_32.png"
+    },
+    {
+        "name": "FRANK",
+        "address": "0x129e6d84c6CAb9b0c2F37aD1D14a9fe2E59DAb09",
+        "logo_url": "https://bscscan.com/token/images/frankenstein_32.png"
+    },
+    {
+        "name": "RFOX",
+        "address": "0x0a3A21356793B49154Fd3BbE91CBc2A16c0457f5",
+        "logo_url": "https://bscscan.com/token/images/redfoxlabs_32.png"
+    },
+    {
+        "name": "FOR",
+        "address": "0x658A109C5900BC6d2357c87549B651670E5b0539",
+        "logo_url": "https://bscscan.com/token/images/forceprotocol_32.png"
+    },
+    {
+        "name": "TPT",
+        "address": "0xECa41281c24451168a37211F0bc2b8645AF45092",
+        "logo_url": "https://bscscan.com/token/images/tokenpocket_32.png"
+    },
+    {
+        "name": "UNCL",
+        "address": "0x0E8D5504bF54D9E44260f8d153EcD5412130CaBb",
+        "logo_url": "https://bscscan.com/token/images/unicrypt-uncl_32.png"
+    },
+    {
+        "name": "UNCX",
+        "address": "0x09a6c44c3947B69E2B45F4D51b67E6a39ACfB506",
+        "logo_url": "https://bscscan.com/token/images/unicrypt_32.png"
+    },
+    {
+        "name": "WOOP",
+        "address": "0x8b303d5BbfBbf46F1a4d9741E491e06986894e18",
+        "logo_url": "https://bscscan.com/token/images/woonkly_32.png"
+    },
+    {
+        "name": "ZIL",
+        "address": "0xb86AbCb37C3A4B64f74f59301AFF131a1BEcC787",
+        "logo_url": "https://bscscan.com/token/images/zilliqa_32.png"
+    },
+    {
+        "name": "PBTC",
+        "address": "0xeD28A457A5A76596ac48d87C0f577020F6Ea1c4C",
+        "logo_url": "https://bscscan.com/token/images/ptokenbtc_32.png"
+    },
+    {
+        "name": "FUSD",
+        "address": "0x3c5959b568896393",
+        "logo_url": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGYAAABkCAYAAAB0F0VpAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAaGVYSWZNTQAqAAAACAAEAQYAAwAAAAEAAgAAARIAAwAAAAEAAQAAASgAAwAAAAEAAgAAh2kABAAAAAEAAAA+AAAAAAADoAEAAwAAAAEAAQAAoAIABAAAAAEAAABmoAMABAAAAAEAAABkAAAAAHl4y70AAALkaVRYdFhNTDpjb20uYWRvYmUueG1wAAAAAAA8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJYTVAgQ29yZSA2LjAuMCI+CiAgIDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+CiAgICAgIDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiCiAgICAgICAgICAgIHhtbG5zOnRpZmY9Imh0dHA6Ly9ucy5hZG9iZS5jb20vdGlmZi8xLjAvIgogICAgICAgICAgICB4bWxuczpleGlmPSJodHRwOi8vbnMuYWRvYmUuY29tL2V4aWYvMS4wLyI+CiAgICAgICAgIDx0aWZmOkNvbXByZXNzaW9uPjE8L3RpZmY6Q29tcHJlc3Npb24+CiAgICAgICAgIDx0aWZmOlJlc29sdXRpb25Vbml0PjI8L3RpZmY6UmVzb2x1dGlvblVuaXQ+CiAgICAgICAgIDx0aWZmOk9yaWVudGF0aW9uPjE8L3RpZmY6T3JpZW50YXRpb24+CiAgICAgICAgIDx0aWZmOlBob3RvbWV0cmljSW50ZXJwcmV0YXRpb24+MjwvdGlmZjpQaG90b21ldHJpY0ludGVycHJldGF0aW9uPgogICAgICAgICA8ZXhpZjpQaXhlbFhEaW1lbnNpb24+MTAyPC9leGlmOlBpeGVsWERpbWVuc2lvbj4KICAgICAgICAgPGV4aWY6Q29sb3JTcGFjZT4xPC9leGlmOkNvbG9yU3BhY2U+CiAgICAgICAgIDxleGlmOlBpeGVsWURpbWVuc2lvbj4xMDA8L2V4aWY6UGl4ZWxZRGltZW5zaW9uPgogICAgICA8L3JkZjpEZXNjcmlwdGlvbj4KICAgPC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4KFaK0OAAACAxJREFUeAHtnb9v20YUxx8VJWmLopHRuYi7dGkGFd26hEGXdijgtEPGKP9AbQN1gEy2pwKxATv9B6KMGdok6FyYWbpGQ6cuddGtQCGlKNAfka1+351OoiiKOoqkyGffA+Q7HsnHd+/j9+5ISqRHVZfuQYOo34SZPpF3lWiwijraiNtsJBhu9Bz7HkPHMa1smbbhquoVXuVM6n69SnTBJ6pdh20oFQhUc5cAGjv4PKsiqGqAUTDqa3DSbXxsIwGb5iY9RNJTaAOkr7gsXcoF091fIzoFDA9lZaQHS9pInw9o5d5xWVYtH4weM1qAsV5gmsrJnwNEjwdAyx+Tlgumu7cDjwGIGrxzct5S1AQ4yu4yAS0HjEpZdFD9CJkHmSPoZHMZKa5YMHpQf4ju+vO6LGg9j0Gc3naKtLk4MN29DRi+jU+jyA6UqLuDDHCHVu6izF/yB6MH9ycw1c/f3EpqRGrbOszbsnzBdO83MYs5gpGNvA2ttj4eey4iejZ7edlZy0sRde+3AOUF9J0zKOxBPg/rH5EaU3k5u+QTMd09zLhoI7s54jUgYgY38hh3soPp7mPWNWiJd2l+HcgFTrZU5qDE4WyolK5Se9xqu7bFI8ZBmefhTJGzGBgHZR4Us35hOOnB6NkXn807sfMA4PQ/SHsZJx2Y7p4PW/g8xUk6D3SI6pit2Z/n2A/+eo7OZ/RO0nugiYuffEphLfZgqM5QGtaa3YYRD+CUIsVMzQ6Mvo8C6k6yecA7sL06MB+Muv6lrhJns8ntzR5AxqlbTZzmgyHPSpHzu7UHfNK3RBJ3SJ6VaQWpBq3Eo7mVxgM9RM67SbO02RGj7qu4FGY8mXOJlNbfTtI5Gwz1N7AjFDgpyAMbSROBeDA6WtYLMsipHXng4syoiQfjomXkumIrfG7DXwmelmkwLlqmvVRoS3zUTM/KhM/Edl77iNYvf0gN73Kh7oxT7vX245rntcXO0KYjRn11dZ6uaq4/eP0GbQNMGVAyeIRnaK3o/pNg1Fl+YT97iB471+XV2hXaQKQIldtRuyfBUE3sTGy19la0b5KWm7jA2QwbHAEzWAuvlFTniJEt3kTUjMFoYsh3MuV6/R2Zho+t9sdV/J5uvDBJbNxe/Vrr0jVqXXq/+oYmW4h0Nj6nCYEhP3m/aq3lmZePKHn4xqf4fFIt4xa25oJvdq2bCsqJwSfUblVlJx29ectqW7fRLA/UrmNNm9fqiNFfsuBlJ6V6YDAKDpPK/FLtyXjwl/QffUzf0pcUZNRU+u5RMPxgA5nCUD6n7+kn+oMe08/y4Qyz1zBiZJ7th6GYfyv5cDQLsaksDsrZgOOtcj8MGK6LkSQophNyI0cPK7XoNRrTsaqWNlCM7TLhjFKZJ+YyTBoosuEISmWLQBEKRwWKiDEmCxSBcNS5TOXB5AFFIByZszLj6LNcVj5irtAl+o4+o2v0dmYOt+g9+ob8zHqWoaDyYNgJecARBKXDfRYBJiscQVC4qz3+AzADVeGFqssikSMMyghBLY/Ha4y0LaGSBo5MKN4xu1FMKgszt4EjEwr3cvAr/zVgAl6QJElw5EJhAvzQ7hEYHT7cIEni4MiGwt6fSGU6fCRBMbaG4ciHgl4NHyVsviUToGnbdFZayXB+oC+kmR1nrzqH4RV6jCnhgc9xVrk2bwTGRAz7hBub0p1zfPon7f7zIx2fvqSg/5uw7pw+NwaHwTyTDqZz8jvd+Osx9Qb/mv4JK08CY7CZLmOZn4QqWzb/PhIMBRkr9JKHMRj9YOeeZDTyUteEt4Pw0hiMalXvUAmvF1OXm76MiwePTI3LCJjTB+GVkurCowVpbPJR9JNg1Ep5VwE4WngmJlgmooX7MQlG9WwgKmo4UngmxjMyoYJxvd6O2u5FG0i/NOEXtDem1rmGAjzgtfFetDtRxdMRox+oKSpqop2StfxqN87eaTBqq/ohCtFT57jOVq+No+XecZxd8WBc1MT5qoC2+GjhA8WDUSa4qCmARFjl4axo4Y1mg9FRE5v/wtpdfSEP8Ews0bezwfDx9CueOgsd2u2U5IHdpOdh8o7JYJRqvCDNSZ4eCGzeaTYfjL5UkBh2eVp9xnUhhfWt/tE9a0d0915g26b19m7DGA+o1zO2Y1ZMNc2PmNEu/ZuogriTxTzA5yx327b72oPRJ0IMx0l6D2ACdWEzzW72YFir+tKGmwykcTC25XHl5rxZWFRnOjC8twpHhKUTGw8ACr9+Mf6yS5IC+8E/qsW9pyzqkejyEMrkDbDoRrOW00eM0aQuVbvIMe6IlIDi3YnelYxsk7i4eMQYtS5yjCdMmSlSjJLFI8Zo0Dd5Ds3iOS9zgcI+zA6GtaxsYSp47mdrHcy+8FrFxcYUdmNYsqeysDb1JFr32viwSxat5wuGrdDfGXiCms+L50A2bS5KpvVD/mCMBfrlDfzTjoZpOmMlUpe69oUyfykODNuqniOs3mLn5296aRp7OPIDRMlOkRYUC8ZY3t1fQ/UA/2GrpklmyV+8P0HqSn8mn7a/ywFjrNIvOl3HYsM0CSkD2Im7jltcLkWWC4a7pCcHLZwZA1DVI4gjxOO0FbDpy5Tlgwn3TqW409voPKe6qkgPhrRxTgIgxaesWZ0uF4yxSk8SGA4glXKXFDDUT1Ce4euqT41ZZZbVABP2gEp1rwBJPefeLzDdBTjsc3yCMlIVjpso1QMTNVePSU00+/ivvjoE1cAyt9lIMNwIEPipE/iZSQljho2h4W3+B67PJplkPQvfAAAAAElFTkSuQmCC"
+    },
+    {
+        "name": "FLOW",
+        "address": "0x1654653399040a61",
+        "logo_url": "https://swap.blocto.app/static/media/flow-logo.7d05ec26.svg"
+    },
+    {
+        "name": "tUSD",
+        "address": "0xcfdd90d4a00f7b5b",
+        "logo_url": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAYAAADDPmHLAAAAAXNSR0IArs4c6QAAAAlwSFlzAAAOxAAADsQBlSsOGwAAIABJREFUeJztnXl8XNWV57/3vtpLu2TLkmVLli1vGGOTAHawTSAsWQmQpjvLZ0K2SSY9oZPJ5EN38sknC52Z8Ml0mkxPlk4YsieE7pCEZSbsE8dAbDAGbLCNd8mWra2kkqpKtb337vzx6pVqs1CVqmTZ0s8Iqape3XeX3zv3nHPPPVeg7lDMY85CnusKzOPcYp4AcxzzBJjjmCfAHMc8AeY45gkwxzFPgDmOeQLMccwTYI5jngBzHI5zXYHKQQEKDY163DTgp5kqGvFRgwcvLtxoKMBEEUcnQpwg4wwwziAhhokSJpkqT5zDtlQOFwgBrOWMKpy0UE0njWyglWtZySaW4sOVc61A5gyoRRfr/wKRfn2SUZ7iMM9ylP0M0cMIg4yjY3IhkEKcv4tBConAi4PLWcwXuY6rWY4EZIVmNjM16GHifJsd/IRdDBAhjlmR+80EzkMCKJxI3s8GPscWltFAHV4AxAw9kSolcQwUpxnleU7yVf7IfoY439Sq84YAAsUW2vkMW7iWLurxUsqQR/UEhircZLd04NS0ouumUpTYQy+PsJ/v8SxDxIou51xg1hPAheQ6VvBf2MrVdOXP3UpZU7ECXZmEk3HG9QThRIwToQBHgwOcGR+jNxK03k/GMU2z4PTtlg68ThdNniqavTV01DTSWdNEs7+WKqcbv8OFx+G06pD6fi4FFYpRYnyPZ/kxuznGMLNZV5i1BHAh2UQbP+ODLKUua+CVUilVDsb1BIFYhO5QgKOjgxwY6ePY6AA9oWGiepKkYaAECIcGQoA5yXwtBAiBMgyUYeIQEpfmoM7tY0XdQlbVN9NZ00RHTRNLquqp8/iQSiCFRYhMMthS4W62czfP0MsYs5EIs5AAiiY8PM6nuJgWNES6Y1VKQ9eVyelwkMPBfp7vP8HR6DDHhwcYiIySzBxgpUBZ4woCpRSpPwvfObcn7ItF6kMh8GoOltYvYHl1E+vqWljXuJjVDYuodnlS98qXCDGS3MXT3MlTzDYdYVYRwIvGPdzKLazDgyNPvBrK5GhwgCdPHuDZvqOcTkQYGgtioiyxrlT+IBaArcTlYioahRACIQUo8Hu9NHj8rKtZxJbWFWxbvJJGj/+s9zxKgI/yG56hh9kiDWYJARRvp4tv8i4uoSXjiQeUQgjBYDTMD/f9icd69jNixDB1AwkYpsJUJhLBxMSQW/r0mpgpgSQCE6tOUljSSTkkbs1Bh7ee/7BmE+/uWI9Lc6TbYNfIrse9PM8/8H8JzAJF8ZwTwI3ky7yNL/G2rHneUCaGaXIqMsJDx/fy8/3PMo4JholQKeUvA9Md5GKQKymksMinUpLh4sbF/KeLtnF5yzK8Dpc1jYlM/QCOEeAT3M+fOMG5lAbnkACKOjwc5g4a8OcN/ulIkO2nD/Pbwy9yJDyEHk+epZRzK8AKThuaRFPw9mUXc2PHei5dsNTSEXJgYPIpHuAn7D5nrqRzRoCtLOVBPkod3qxOTJgGO3oP8cDRl9g91EMoHgVT5T3xcO4H30YuCWylU3M6aPXW8Pb2i7hp2QY6axdkXWdbCts5yju5l9g5oME5IcDHeRN3cyPVZD8VfZFRfvn6Lh49fYDeYACBwFRmSj2fmIdnM3ItFiEFHqeLi+pb+NjaK7mmbXW6Dfa1JordnOQWfkYv4Rmu74wSQPElruJO3oGWYw69PtzHt/Y8xu5AD8lk0tLqU1W0vjm7Bz4TIkPtA8tyUECtr4oPdr6ZT6zbis/pzPMbHGGId/MTDjHETOkFM0YACXyGTdzNTen53kzZ5XsDp/j6C/+H14Z6keTb4+fT4GeikLKoed28q2U1n7/0ehZ6q/O+00+IK/gXuhllJkgwYwT4OzbxHW5ON8lUCt002N57iG+9/DinwkEwjNRcL87bQS+ETCJIKZAOjW3NK7j9kmtYWd+MzLESTEw6uStFgspiRtxSX2Ibd3NTlmAMJWP87ugevv7CI5wKjYBhXpCDD9kSzDBNDN3g6d6DfOvFR3l58GTe9RLJLm5nGXUVr1vFCfBxLuVO3pEW+woIxsf56f7nuPuVpwhEw2BODP6FikzFT5mWL2Nn3zH++55H+fPpQ3nXN1PNH/gwTeSbj+VEBQmg2MpS7uamtMJnKkU4EeNXB3fyq0O7CMVjKNPMmvMvtKc/ExNtE2mzdv9QL9/c8xi7+o/lXX8xrTzIRyh+gXrqqBgB6vHwIB+lGjdgee50ZfJ4z2vcd+QFwsk4hmmQqeVfyINvI48ESnF8ZIC7XvgjrwydzOoDgWAzHdzD+yo2UBUp143kEH+fjtQByxTa3X+C7+x9muHYOKZhZNnMcwkTZBcoBZqQHBjp4+6XnuRYcBAzhwS3cRnvpqsidakAARRf4W004svSfo+ODvJPLz/BUGrOPx/t+0rBVJbPY8/QSX5+cCcjsfGszwXwG25jNY1lv3fZCXADK/gHrsl6urvHAnxl10McGDmT0vZJfzaXkS0JFAlD55GeV/nd0T3W52pCcfTi5B5uxV3mIStraV4kd/HurKjcsUSM7+59mt2D3QhjbszzpUAgwFSMJ2L8eP+z7Dh9GMh+SN5CO19gG5SxD8tIAMU93Mp6WrLefeT4K2wfPI5m2qJuXvTnIqsvTMVIIsrXdj5EbyQIGUvfEslXuI5mfGW7d9kI0ISHW7g4w95X7B06xf1H9xAKhzAznDzFDH6hVcDzAUoVXsE86/WpPlGANBW9eoR7XttBUhlZXkInGr/mQ2WrZ1kI4ELyOJ/Cw0QUTDAe5ffHXuL46GD6umKfersDTWVF/Vi/Z/uPmbGQVRyB7f4xlULGdZ7oPcgTPQcw1ER5AsEWOtnCEsoxFZRla9gm2ljHIsvLhcIwTZ7vO87Tp15Hz/DvlwKFotblpdlXM6V4v3OKVPxoTNc5HRlBt4NQS4CpFMFohD8ce5l1Da2010xYAE4kD/ExWvlvxNCnVeVpE8CF5Ke8H0eGMIkkEzzSvZfBWHhaIlwIgWGYbG3t4lMXX5XlRJmNUFgitTcS5O+feYCR+DgOWZyQteMIAJRp8krgFDtOH2aRvxaXZsdIC+rwchUdPMZhptMf0ybA9axgKfXpSgsEO84c5pn+4yk3r0pLhlKgBPidblY3tJA0psf2SkNhOXUMZVp7BUptc4oESkE4GefJ3oNctXglrVV1aGKin3/BB2jlG+jTmAqmRQCB4nNszQru0JXJD/dtJ5qIgWlOKdR6ckxQxyEtr3hu7P1sgR3fUL7aKZRp8FJ/N8+eOcqtXW+y9INU+xvxczPr+Hf2lXyHaSmBW2nn6hwX5Y7eQxwOBxDm+RPGNRuRDnFXgqSEx0/uJ6on04MPIBH8LVfANGIJp0EAxWe4MovtET3BPa/uSC3v2lfND/50oJTCTOjs7DvGrv7j1nsZfXoVK7iERSWXXzIBnAiuoSs1V1k27/N9xzgcGkScv9vlZy1MAfe9/jxJ08ibVm9na8nllkgAxQfYSEPKIyWEIG7q7Dh9mHFTn6U6+vmHLOmpm+waOMGB4TNZ1wgEb6UTMEq6R0kEkAg+y5b0a1MpekLDvDjQg5lInrfeu9mOpDK4//ALee8vo5EtLKMUq6MkAnhx0EHDhOkn4PBIP8MqjhQSO79OOed/e5pRmX+X+POG9yi1XLt+ZWt1RihZSqzu7j/BWCJ7T6EAvsy1lGJ/lGAGKi6nNZWhw6pgJJngpcBJgmmffxmhJraH60ohSihfCJG2n6d0S6zgzWKhUDiEtKJ8i/72G5StQOkG/dEQO3oP8c6Oi4HUbmUEG2nFhSRRpEVQkh/gDq5N/y0QBGJhjoWH0Q0TU5XD9p+AEBCIhXnuzNGSJIqpFI0eP6vrW7JMqMkwloiyb6iXot0NqfwA/eNj6GXxgWRDExLdIXk10Mt1S9filBPRgnX48OAgQaKoMosmQBVOrs2w/ZVSnA4H6Q0NpzusXKJfKYUmJM+eOcIrQ/nh028EgSBmJNnW2sU3r3wfbm1qzT02OsgXdvw7mixuAFUqW42uTMJ63No1nNrePh1kuoeNRILXR/oJxCIs8temr3EiuZE1/JKXKWYqKJoALVQjyd7X1hMe5szYCKZhUroD9OyI6UlieuHdwZNBCkFUTzKWiBVFyoRpEIiFkGJ2ZfNQKIQSnNEjnI4EafbVZJHr07wlRYCpo2gCLKORTIbFDJ2e8AiJ1JJlOQe/bC7fyfLCTPKl2eRyVljZT5xSMm7qDEZDWVOaQLCJdqpxEypiGiiS4oqNtGTt5Y8mE3SPBdIb+mYqV99chEBgmorx6DinwiMk8hbHFC3k7zecDEUT4BpWZr0TM5KcDA1TvMZUPhQy7wSWv8JO41IMrAUdcdaFnWKjfcoF27Qej8foDg0TM/S8qa2N2rN8uzCKIoCGxiaWZL0X05MMRkNF3bRYZHZ2bucLrLneVrgM0yRpGsQNnXEjybieSOkPUx8wwzQZ1xNE9WQq1ZyObhrpRFT2/dJ7HXPqVEly2KF1o2aCeI4EEAiWU19UeUXpAPW4qcrZqxaIR4gZyQI51qaHdEh0AcliRR0ZGKbCSIVhSSGpc3up9/iodnrwO93UuX2YSrFpUSdaEQpdi7+Om5ZvIGkaJE2DkViEmK4zHI8QSkQJJqLWVm8h0ZBoUlgOsByNf7I2lAohBEpYcQLhZIwF3qqJzxB00lRUeUUSID8F2qnwCEmjND/02WAHkQiR2lJmGiSVZWFoQuLRnHQ1tNJZ08TyuoUsqaqnxVeL1+nC73RR4/TSHx3FVIqEYaQcQVMnQLXLw03LN9Lqr8VUVkiaJiRhPU40mWAsGeNUeITu0QAnQgH2D5+mNxy0iJnKWObUtPQ9zTISwSZVJBmzHrwcrKEZa3l4au0tigDN+PPmxGB83ApanOby78QmCEukm0oRN3Rc0sEify0d1Y1sbl3BJY1tLK6qT8ceHhsb5ExklL1Dp+iNBOkeCzASGydh6pjKEuXbWlfy3as/iEdzTqkuh4P9/O3/+xUezYkU4NIcOISko6aJJl81y6obWeSv5aolK3mfuwqnpjGWSk27u/8EL/Qfpz8SYiQ+jhQCl6alXdgwPSIIq7MIxWKEE/G8zztoKKq8ogjQiA8ThZZBg6RhTFv6Z82fKJzSwdLqBjY0LWF9Uxtddc1IIXgt0Mufew9xfGyII6MDnImMEjeS2Pn9hSBloVjSQwpJTLcDpqbe6UIIDGUS1S1zKpTq6L7xsVTy0Yn61ri9LK2qZ0VdM501C9jS2sXfdF3GUCzM/uEzvDTQzauBXkbiUSu/IOUhwtnWWlqpLqqtRRGgBk9e0QPREGoa3p/MwdeEZG1jC+9MpVaLGkn2DHTzyEt7OT4WYGB8lLipW3OvkEghrKf6LB1pTRmiJANFItBSAZ0Ft2en6h3Tkxwc6eO1wGmEEKkI5lrWNrSwdXEXt294GyOxCI91v8aTJw8wHAunHUylegmVqYgkYoST8SwvIUAdHlxoU14TKIoA1skb2RXOt0VLgxSCt7ev4z+u20pHbRP3HdzFb4+8SPdYgLihI6Q1ID7pyuJaOv/vWVApfdwu17IINJxSQykrefWRYD9HRwf4U+/rXNbcwScu2srnNl7LltYu/vmlxzk2OoRTytLrJqzpMaYn7RTGaTjQ8BRBgKLMQFcBvpRFsUGxtLqBD6y6nJX1zcR1nR+9uoPDwQEMFJqUaYUqt9POlbdOiJy8PsoSyUJYRNWkJKYnebJnP492v4rP4eKG9ov40KpNuDSHHfFXETiLeK6n7eyers1rd2KNy0ud24ow8jtdvGvZxeimgW4YBVfxinHGqIzfk8YT5H5hKmWriXbYbRFCQEoaNPtq2byoE4/mRJOS1qo63PYq3nTIq6bf91DkFGAUECvOlIZbalPsXUMHh/v406mDNHnfTIPHz+c3XsclTW08cHQPh0cGGEtESZh6nlcvPY/au49yKmJ785SaUJqsK7Oz+WVuOpl0XGyZm0GYzABYgcDvdFPj9LClzVII1za0oIDe8Aj3vb6LYCKK1+G0wshLIoHA53Thd7oL9rtZRExAUQQotA2p1V+HxnQCk60Bips6P9i3nZ7QCDev2MjymgW8o+Niti1exevBPvYMdHMsOMjpSJBTkSChRIykaWAqk6RppgM4rLMbRPq3FIKhaJgnevbj1CbslyqnG4/mQgormjmSjKc2dgheH+lL+yBs2thPm004h9BwSJk+VKLB42dJdT3t1Y2saWhh44KlLK6yDrroi4zxQv8JfnHwL+wdOoVbc0wrcEYIgdfpxudwFTifAOJFxAcWRYBx4pDzvHs1O+PlNKcCIJyMcf/hF9jVf4xLFyzl8uZlrKpfxJr6Fq5oXkY4GacvMkrf+BihZIzT4SDDsQinwiOMxCOMJWJp5ShuJNFTLt0TYwHu2v1HInoc3bQ6x+tw4ZYOhLBiBmJ6EhOFV3Pi0DRc0oEU1tOsCYnP6UIKQY3TQ7XLw0JfDc3eGlr8tTR4/NS5fbT662j2VeOQGmcio7w0eJJ9g6fY1X+MfUO9jMQjWUvMJVkAWBLHocmC5xtFSVaOAEGiecO8wGs12HYGFbsNTIiJjFm2UD4xFqAnNMxj3a/R4q9jdf0iOmqbWFXfzPLaBbx5YTsep4u4niRp6kT1JAnTIGkYJJVBKB4jlIwS03WC8fE0ZQPxSNpvkK9NWk93tcsaYKXAISUNHj/u1BPukBKPdOKQGm7NgVtz4HE40YRkNBHl+NgQz545wpHRQY4E+zk00k8wPk4yRbrpDn5mXf1ON16HK++jISIYGFTEEzhIJO/QpoW+GityxhQTk2GRsDsj0xsI1krjsdEBDg6fwcCk1uWl1u2j3u1jee0C2msaWNvQSou/jhZfLXUuL06p4ap1TASm2kqa/fqN6oJN4tTfqVgCpVR6kSmcjHFkdJDusSEODJ/h6Nggp0NBQsk4I/EIMT2JSzpwaPmDUA6rRQhBtceL35lPgB6CRZVVJAHCeQpfrctaeIkaydRTVNT9s5C7kKJS77kdVjXjhs6ZcJBToRFeDfRmzPXg1pws9NXQ6PHR6q/HpTnSvvyV9c28s+PiKSmrEsFANMSvX9+FFJKxRJShaJhxPc7pyChj8VhqncEmmErrBbaDyu90YVLeNYB0H6Va4Ndc+Byu9EKYjSNFJpouigDDRFE53ejWHLT46xiMhsvqdcm1sW0zS5PSqnSO1EiYBidDw3SPBditerD1+pie5Pr2tVy3dG16LeBsA2KXdWxskG/veRxNyHTUre1mto+K0QQIu+MnbEEAjIz6lhO2UqshaHR4LR0mZ7APM0DFCBAmSQ9BlmUsOPgcLtqrG9k7eKqYoopCIU1XZHxmewOllGg5n0khcGtOiukUS+lzZ4WST8btCQOycH3LCgFet5slVfW4Hc6cJNOKIwSKKq5oR9BTHMl67XO66axtonJO12wUerJy38t0+JhqKjN/NtLOooyyiq1TpSCFpMrjY2l1Q17yCYUqWgcomgDPkZ3T1ik1Wn21+J2elASc3xZWCdjTkG4Y+JQsmDJHIDjFWFHlFkkAwX4GsjyCUgjaquppralDyErsiZmHDYFAOjWWVTWwyFeb5bFUKMaI0V/kkTNFS4AeglmDrJSi1V9Le+0CEKkz9eZJUFZk9qfmdNJV30y925cnbO9nL3qRPtmiCTDAOCHiE/OqgDq3n+W+BtyaY8rbr+ZRPJQAtym4pGlJwc/v5TmKXZUpmgAGJv/En9OvBQKPw8klC9qo91enbdJ5KVBeCAFKChZ7a3jTwvY8xTNMnP0MTlJCYZSwHCz4Kc/niBrFitqFtLmrMVOm1zzKC9tHcfWS1VQ53XmfjxIr6dzBkuIBBglzJkfbXFxVx4amJTjcE66FeSkwfUz0ocCpBH/d9ea8axSKn/JiweX6N0JJBIijeJ6etB4gEEgEV7etwmdITFHuNAlzExO5FwGnxs3LL6XVn3+QVByd/8l2ip3/YRoRQV/h0awhFkKwccFS3tzcDlJORMfMS4FpQ0hJtcPFezrX532mUOykh6ESTyIvmQAHCPASvXnvf3TNFvyaa/bn9T2PoCRcuWg5axta87yaCvgd+yg1JmsaMYGCh3gt63wbgI0Ll/CO9osQLse8FJgG7LgKoUkaPVXcuOwSvJqD3IEeJcrPebHk+0wrKPT7PMdYjujRhOSvlr+JeqfH3sYynVvMeZimycbGNi5qaM1bzlYofswLjJK/Q2iqmBYBhojxPZ7NEkuGMumqW8gNSy9CczgQQuZtXpjH5LCffikFzVW1vHfZJSz0VuftbzRRqae/9L6ddlj4vezOesbt+LkbO9azrLpxhg6nvXCQ5faVGpsWdnBpc3vB1cb7eJm99E3rftMenuMM8222Z0kBpaCrrpkb2tbid7rTjqF5KTA5MvMuSilpq2ngb7ouo8GdvytbofgqjzHd7SVleD4F/8IzxJjYqiyFoMrp5j2d61nf2IbQZHrlap4EhZG5S0EgMAXc3LGBi5va8jaAKBQPsI/jRa79F0JZBPQpxriLp/NMlCVVDXxk9WaqHZbrcp4EbwwhBMopuXbxaj606gpcUssT/wOE+RC/Lot6XaYZWnAnT3GMQBYJpBBsW7yST6zdAm5ndlj0DJJAKdBTqWOSpkHC0Av/mAYK69qZRObTr6SgzVPLNzbfRJXTXcDuV/wrfyFRJuuqjCqa5CP8puAnt625kmsXrgBHKshyhiWBEBBKRAklY5P+hJMxRuIRNCFmzHjN3qAm8GsuvrDxeurdvnSmlEw8Rzdf56ky3l/dUca2Ku7hFj7OFemK2/PXaCLK5/58Py8MdmNmnCRW0QMlUjGB1S4PS6sbphS3JxCEkzFOjE0EV1Yq3i/zeF0hBLVeP7et3syHV23C73TlDb6J4kr+FzsLeGBLr0NZCQCNeHiev6Mz46Bje5D3BU7zj88/wquBXmtzZYVJkHnuoK6mLtYFZOXhrTQBhACvx8uNHev59EXbWOitLhAJrfgCD/PPPMN0Nf9MlN1KDxDjY9yfdwS6QLC6fhG3r7+aNfUtKV23suah3YmaEOmtXFP5caVyClcq2ldktF0KgeZycX3bGj6+5koW+goP/n76+T47KefgQ4XcNNs5wSf5bd46gUtqbG5ZzifXbWVRTR1KVN4yECLjJsV+rwLIbKcUAuV2cM2iLu7YeD1t/rq8flAoAoyzjR8QK/FUkMlQIT+d4KfsZjv5Kd6dUuPt7ev46pveRa3Lg5kaH5WWCReuiWjvorbdvJrbxXXNK/kfW/+KBo+/4MOdwOAGfshwicu9b4SKOWoN4B3cywucLDjHX922iu9c9QHaqxoQmoaUMivA5EKByPiXfk8IfB4f716yjq9d8R7c0lFwvcRE8XkeZA/9FatfRT31cUxu4WepDYv52Lyok29svonLF7bj0uzl4wkSXEhEAEvSCSmp8/j46+WXcvv6t1rmXoHBVyi+wRN8n12VrVO5rYBCWEkjf+bTNBfIZK2bJoeD/fzy0C4e7XmNSDxmCcqMWlXUVKwgMm18KSTKIVno9nPbqrfw3uWX0OipKvg9heJ/s4tP8fuKt3xGCACKdmo5xheRBYSOiSIYG+e3R17kX/duZxwdaaisNCrnGwmynmgBaJINDW18dsPb2LBgCR4tf2cvWO38Pa/yfn5FcgbaPEMEAIsEdezi9oKSwMaLA93cuesRDkWHIZ5I+womSpm9RCg0oNKp4RCSWzsv5YuXvRNHgaTSNuwn/z/zhxkZfJhRAlhYRh2/58Osp7XAvGcN9Ugswo9e28EjJ/YxHItgmkY6RWuhufJcI9edm/oPt9PFusbFfLDrMq5ZsnrSXMUmim/wJF/jCSZPfVlezDgBwPIWPsRH2Ux7vuabyscfM5Ls7DvGwyf2srPvOIHxEEJKlJHt0TuXBMj05CkFQlo2rSYEXfXNXNXSxc2dG1la04BSFM53iCKBwed5MKXwzazie04IAFb+3Xt4H7dxGYKzm35D0TC7+o/zyIm9vBw4RTA+Tio/S8FEiZUmRG497RxCSIHL4aDNX89bW7q4bula1jS04NYck4r8ISLcwI94qYKm3mQ4ZwQAywZ9F138G7fh4eziUQF9kVEODJ/hyd6DPHfmKH2xEBgmmGriuDqV+73yNK3woKfu55A4HA66/I1ct3Qtb1m0nBV1Cwsu5uTW7QD9bOUHFXPyTAXnlAA2VtHIvdzKZtoLWglgBZtKIYjpSU6EAjzZs58HjrxIXyKSylKpEOaEjpCZIcx+XQyyHTcTr00U2Nm/TMWm5g7e27mRzYs6afRWpc8ommx/pIniDh7mu+wsKqdfJTArCADgRvIFruIrXIsT7SwmkiX27c4NJ+M8c/owDx9/hVeHegmZSZISjGQSUzdwSGkpj0qlc/UXytCZjsEXIms6sr2ThlJoLieaFDgSJov8tbyldQXvWbaedY2Ls04GeaOB30k3/5WH2clJZnq+L4RZQwALioX4uI8PsYVlZydCzpxqKsXpSJA9A90cCvZzfCzAmegYIaETSySIJePEEkmMVGp7WSDDpqmsc4kFApfTicvlwuty40KyQPPQUdPI4qoG1jW2sr6pjVqXd9I6ZbdKMUiEH/AX7uQJzFkw8DZmGQEmsIUlPMzHqcUzZZewbSYGYmECsQiD4yHrdzTEQDTEeDJO2EiinBq5G1aUqfCh4ZUOGr1VNLj9NHmraPD4WeCrptlXgysVI1CMi9pE8SCv8n5+WeSpvjODWUsAUHhxso0OfsEHacSXl6U07xuppzA9/6eWFnRlkjR0DGWim6aV1jYHVgJoK9GjU2o4NQfSNu/ExDSBeuOlYjvF9K94ma/xGMcJzgJvRWHMYgLYUDiQ3MI6Ps0mtrF8UrPxrKVkJHPMNx8ttthrUaUlcbb+jRLnJzzPz3gxtWlj9oj7QjgPCJAJk0tYxGfZxlaWsTwVdnYuVw0Vijg6u+jhAfag1CYNAAABCElEQVTxc3YzSoLZPvA2zjMCTEBgsIVOvsy1bKCVOjw4KX6OLgaZpmSIOKPE+AV7uJs/pfbnnx+DnonzlgCZcCHx4uBm1vFJNnEFS7GHS5tmyIPCMiElglFi/Bt7+TF/4TUGGMdMnc5x/g28jQuCABOwmlKDmxZqaKOGTupZwQJWsZAOGmihOktaTHxTMU6SAON0M8JRhjnKAIcYoocgvYzRRziVHOv8HfBcXGAEmAxmyiiQuJB4cOBKSQcTRQyDOAYGRuo6S9W80FFUtvDzGxPn9CUwSZzVKp/GeX7nIeZ3789xzBNgjmOeAHMc8wSY45gnwBzHPAHmOOYJMMcxT4A5jnkCzHH8f1BFL1d3IEP5AAAEcGlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSfvu78nIGlkPSdXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQnPz4KPHg6eG1wbWV0YSB4bWxuczp4PSdhZG9iZTpuczptZXRhLyc+CjxyZGY6UkRGIHhtbG5zOnJkZj0naHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyc+CgogPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9JycKICB4bWxuczpBdHRyaWI9J2h0dHA6Ly9ucy5hdHRyaWJ1dGlvbi5jb20vYWRzLzEuMC8nPgogIDxBdHRyaWI6QWRzPgogICA8cmRmOlNlcT4KICAgIDxyZGY6bGkgcmRmOnBhcnNlVHlwZT0nUmVzb3VyY2UnPgogICAgIDxBdHRyaWI6Q3JlYXRlZD4yMDIwLTExLTE5PC9BdHRyaWI6Q3JlYXRlZD4KICAgICA8QXR0cmliOkV4dElkPmRmMjI3YzkyLTY2MmQtNGI5Ny05N2QwLWFiNmQyYThmYjcwZTwvQXR0cmliOkV4dElkPgogICAgIDxBdHRyaWI6RmJJZD41MjUyNjU5MTQxNzk1ODA8L0F0dHJpYjpGYklkPgogICAgIDxBdHRyaWI6VG91Y2hUeXBlPjI8L0F0dHJpYjpUb3VjaFR5cGU+CiAgICA8L3JkZjpsaT4KICAgPC9yZGY6U2VxPgogIDwvQXR0cmliOkFkcz4KIDwvcmRmOkRlc2NyaXB0aW9uPgoKIDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PScnCiAgeG1sbnM6ZGM9J2h0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvJz4KICA8ZGM6dGl0bGU+CiAgIDxyZGY6QWx0PgogICAgPHJkZjpsaSB4bWw6bGFuZz0neC1kZWZhdWx0Jz7mnKrlkb3lkI0g55qE6KSH5pysPC9yZGY6bGk+CiAgIDwvcmRmOkFsdD4KICA8L2RjOnRpdGxlPgogPC9yZGY6RGVzY3JpcHRpb24+CgogPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9JycKICB4bWxuczpwZGY9J2h0dHA6Ly9ucy5hZG9iZS5jb20vcGRmLzEuMy8nPgogIDxwZGY6QXV0aG9yPkhzdWFuIExlZTwvcGRmOkF1dGhvcj4KIDwvcmRmOkRlc2NyaXB0aW9uPgoKIDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PScnCiAgeG1sbnM6eG1wPSdodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvJz4KICA8eG1wOkNyZWF0b3JUb29sPkNhbnZhPC94bXA6Q3JlYXRvclRvb2w+CiA8L3JkZjpEZXNjcmlwdGlvbj4KPC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4KPD94cGFja2V0IGVuZD0ncic/PolbVtwAAAAASUVORK5CYII="
+    },
+    {
+        "name": "AVAX",
+        "address": "0xb31f66aa3c1e785363f0875a1b74e27b85fd66c7",
+        "logo_url": "https://raw.githubusercontent.com/sushiswap/icons/master/network/avalanche.jpg'"
+    }
+]
diff --git a/packages/plugins/EVM/src/state/Hub/hub.ts b/packages/plugins/EVM/src/state/Hub/hub.ts
new file mode 100644
index 000000000000..eb1c08a51960
--- /dev/null
+++ b/packages/plugins/EVM/src/state/Hub/hub.ts
@@ -0,0 +1,206 @@
+import { CoinGecko, DeBank, MetaSwap, NFTScan, OpenSea, TokenList, Zerion } from '@masknet/web3-providers'
+import {
+    FungibleToken,
+    NonFungibleToken,
+    NonFungibleTokenCollection,
+    SourceType,
+    FungibleAsset,
+    HubOptions,
+    NonFungibleAsset,
+    Pageable,
+    GasOptionType,
+    createPageable,
+    isSameAddress,
+    currySameAddress,
+    CurrencyType,
+    Transaction,
+} from '@masknet/web3-shared-base'
+import {
+    ChainId,
+    chainResolver,
+    formatEthereumAddress,
+    GasOption,
+    getTokenAssetBaseURLConstants,
+    getTokenConstants,
+    getTokenListConstants,
+    SchemaType,
+} from '@masknet/web3-shared-evm'
+import SPECIAL_ICON_LIST from './TokenIconSpecialIconList.json'
+import type { EVM_Hub } from './types'
+
+class Hub implements EVM_Hub {
+    constructor(
+        private chainId?: ChainId,
+        private account?: string,
+        private sourceType?: SourceType,
+        private currencyType?: CurrencyType,
+        private sizePerPage = 50,
+        private maxPageSize = 25,
+    ) {}
+
+    async getFungibleTokensFromTokenList(
+        chainId: ChainId,
+        options?: HubOptions<ChainId> | undefined,
+    ): Promise<Array<FungibleToken<ChainId, SchemaType>>> {
+        const { FUNGIBLE_TOKEN_LISTS = [] } = getTokenListConstants(chainId)
+        return TokenList.fetchFungibleTokensFromTokenLists(chainId, FUNGIBLE_TOKEN_LISTS)
+    }
+    async getNonFungibleTokensFromTokenList(
+        chainId: ChainId,
+        options?: HubOptions<ChainId> | undefined,
+    ): Promise<Array<NonFungibleToken<ChainId, SchemaType>>> {
+        throw new Error('Method not implemented.')
+    }
+    getGasOptions(
+        chainId: ChainId,
+        options?: HubOptions<ChainId> | undefined,
+    ): Promise<Record<GasOptionType, GasOption>> {
+        if (chainResolver.isSupport(chainId, 'EIP1559')) {
+            return MetaSwap.getGasOptions(chainId)
+        }
+        return DeBank.getGasOptions(chainId)
+    }
+    getFungibleAsset(
+        address: string,
+        options?: HubOptions<ChainId> | undefined,
+    ): Promise<FungibleAsset<ChainId, SchemaType>> {
+        throw new Error('Method not implemented.')
+    }
+    async getFungibleAssets(
+        account: string,
+        options?: HubOptions<ChainId> | undefined,
+    ): Promise<Pageable<FungibleAsset<ChainId, SchemaType>>> {
+        // only the first page is available
+        if ((options?.page ?? 0) > 0) return createPageable([])
+        try {
+            return DeBank.getAssets(account, options)
+        } catch {
+            return Zerion.getAssets(account, options)
+        }
+    }
+    async getNonFungibleAsset(
+        address: string,
+        tokenId: string,
+        options?: HubOptions<ChainId> | undefined,
+    ): Promise<NonFungibleAsset<ChainId, SchemaType> | undefined> {
+        return OpenSea.getAsset(address, tokenId, options)
+    }
+    getNonFungibleAssets(
+        account: string,
+        options?: HubOptions<ChainId> | undefined,
+    ): Promise<Pageable<NonFungibleAsset<ChainId, SchemaType>>> {
+        try {
+            return OpenSea.getTokens(account, options)
+        } catch {
+            return NFTScan.getTokens(account, options)
+        }
+    }
+    getNonFungibleCollections(
+        account: string,
+        options?: HubOptions<ChainId> | undefined,
+    ): Promise<Pageable<NonFungibleTokenCollection<ChainId>>> {
+        return OpenSea.getCollections(account, options)
+    }
+    getFungibleTokenPrice(
+        chainId: ChainId,
+        address: string,
+        options?: HubOptions<ChainId> | undefined,
+    ): Promise<number> {
+        return CoinGecko.getTokenPrice(address, options?.currencyType ?? this.currencyType)
+    }
+    getNonFungibleTokenPrice(
+        chainId: ChainId,
+        address: string,
+        tokenId: string,
+        options?: HubOptions<ChainId> | undefined,
+    ): Promise<never> {
+        throw new Error('Method not implemented.')
+    }
+    async getFungibleTokenIconURLs(
+        chainId: ChainId,
+        address: string,
+        options?: HubOptions<ChainId> | undefined,
+    ): Promise<string[]> {
+        const { TOKEN_ASSET_BASE_URI = [] } = getTokenAssetBaseURLConstants(chainId)
+        const checkSummedAddress = formatEthereumAddress(address)
+
+        if (isSameAddress(getTokenConstants().NATIVE_TOKEN_ADDRESS, checkSummedAddress)) {
+            return TOKEN_ASSET_BASE_URI.map((x) => `${x}/info/logo.png`)
+        }
+
+        const specialIcon = SPECIAL_ICON_LIST.find(currySameAddress(address))
+        if (specialIcon) return [specialIcon.logo_url]
+
+        // load from remote
+        return TOKEN_ASSET_BASE_URI.map((x) => `${x}/assets/${checkSummedAddress}/logo.png`)
+    }
+    getNonFungibleTokenIconURLs(
+        chainId: ChainId,
+        address: string,
+        tokenId?: string | undefined,
+        options?: HubOptions<ChainId> | undefined,
+    ): Promise<string[]> {
+        throw new Error('Method not implemented.')
+    }
+    async getTransactions(
+        chainId: ChainId,
+        account: string,
+        options?: HubOptions<ChainId> | undefined,
+    ): Promise<Pageable<Transaction<ChainId, SchemaType>>> {
+        return DeBank.getTransactions(account, { chainId })
+    }
+
+    async *getAllFungibleAssets(address: string): AsyncIterableIterator<FungibleAsset<ChainId, SchemaType>> {
+        for (let i = 0; i < this.maxPageSize; i += 1) {
+            const pageable = await this.getFungibleAssets(address, {
+                page: i,
+                size: this.sizePerPage,
+            })
+
+            yield* pageable.data
+
+            if (pageable.data.length === 0) return
+        }
+    }
+
+    async *getAllNonFungibleAssets(address: string): AsyncIterableIterator<NonFungibleAsset<ChainId, SchemaType>> {
+        for (let i = 0; i < this.maxPageSize; i += 1) {
+            const pageable = await this.getNonFungibleAssets(address, {
+                page: i,
+                size: this.sizePerPage,
+            })
+
+            yield* pageable.data
+
+            if (pageable.data.length === 0) return
+        }
+    }
+
+    async *getAllNonFungibleCollections(
+        address: string,
+        options?: HubOptions<ChainId>,
+    ): AsyncIterableIterator<NonFungibleTokenCollection<ChainId>> {
+        for (let i = 0; i < this.maxPageSize; i += 1) {
+            const pageable = await this.getNonFungibleCollections(address, {
+                page: i,
+                size: this.sizePerPage,
+                chainId: options?.chainId,
+            })
+
+            yield* pageable.data
+
+            if (pageable.data.length === 0) return
+        }
+    }
+}
+
+export function createHub(
+    chainId?: ChainId,
+    account?: string,
+    sourceType?: SourceType,
+    currencyType?: CurrencyType,
+    sizePerPage?: number,
+    maxPageSize?: number,
+) {
+    return new Hub(chainId, account, sourceType, currencyType, sizePerPage, maxPageSize)
+}
diff --git a/packages/plugins/EVM/src/state/Hub/types.ts b/packages/plugins/EVM/src/state/Hub/types.ts
new file mode 100644
index 000000000000..1b46d18057e3
--- /dev/null
+++ b/packages/plugins/EVM/src/state/Hub/types.ts
@@ -0,0 +1,4 @@
+import type { Web3Helper } from '@masknet/plugin-infra/web3'
+import type { NetworkPluginID } from '@masknet/web3-shared-base'
+
+export interface EVM_Hub extends Web3Helper.Web3Hub<NetworkPluginID.PLUGIN_EVM> {}
diff --git a/packages/plugins/EVM/src/state/IdentityService.ts b/packages/plugins/EVM/src/state/IdentityService.ts
new file mode 100644
index 000000000000..0e97869d5cef
--- /dev/null
+++ b/packages/plugins/EVM/src/state/IdentityService.ts
@@ -0,0 +1,106 @@
+import Web3 from 'web3'
+import type { Plugin } from '@masknet/plugin-infra'
+import { SocialIdentity, IdentityAddress, IdentityAddressType } from '@masknet/web3-shared-base'
+import { ChainId, createPayload, createWeb3Provider, isValidAddress, isZeroAddress } from '@masknet/web3-shared-evm'
+import { IdentityServiceState } from '@masknet/plugin-infra/web3'
+import type { RequestArguments } from 'web3-core'
+
+const ENS_RE = /\S{1,256}\.(eth|kred|xyz|luxe)\b/
+const ADDRESS_FULL = /0x\w+/
+// xxx.cheers.bio xxx.rss3.bio
+const RSS3_URL_RE = /https?:\/\/(?<name>[\w.]+)\.(rss3|cheers)\.bio/
+const RSS3_RNS_RE = /(?<name>[\w.]+)\.rss3/
+
+function isValidSocialAddress(address: string) {
+    return address && isValidAddress(address) && !isZeroAddress(address)
+}
+
+function getEthereumName(twitterId: string, nickname: string, bio: string) {
+    const [matched] = nickname.match(ENS_RE) ?? bio.match(ENS_RE) ?? []
+    if (matched) return matched
+    return twitterId && !twitterId.endsWith('.eth') ? `${twitterId}.eth` : twitterId
+}
+
+function getRSS3Id(nickname: string, profileURL: string, bio: string) {
+    const matched =
+        nickname.match(RSS3_RNS_RE) || profileURL.match(RSS3_URL_RE) || bio.match(RSS3_URL_RE) || bio.match(RSS3_RNS_RE)
+    return matched?.groups?.name ?? ''
+}
+
+function getAddress(text: string) {
+    const [matched] = text.match(ADDRESS_FULL) ?? []
+    if (matched && isValidAddress(matched)) return matched
+    return ''
+}
+
+export class IdentityService extends IdentityServiceState<ChainId> {
+    constructor(protected context: Plugin.Shared.SharedContext) {
+        super()
+    }
+
+    override async lookup(identity: SocialIdentity): Promise<IdentityAddress[]> {
+        const { identifier, bio = '', nickname = '', homepage = '' } = identity
+
+        const address = getAddress(bio)
+        const ethereumName = getEthereumName(identifier?.userId ?? '', nickname, bio)
+        const RSS3Id = getRSS3Id(nickname, homepage, bio)
+
+        const web3 = new Web3(
+            createWeb3Provider(async (requestArguments: RequestArguments) => {
+                return (await this.context.send(createPayload(0, requestArguments.method, requestArguments.params)))
+                    .result
+            }),
+        )
+        const allSettled = await Promise.allSettled([
+            web3.eth.ens.getAddress(ethereumName),
+            '',
+            '',
+            // TODO: move to external apis
+            // PluginProfileRPC.getRSS3AddressById(RSS3Id),
+            // PluginNFTAvatarRPC.getAddress(identifier.userId ?? '', identifier.network),
+        ])
+
+        const getSettledAddress = (result: PromiseSettledResult<string>) => {
+            return result.status === 'fulfilled' ? result.value : ''
+        }
+
+        const addressENS = getSettledAddress(allSettled[0])
+        const addressRSS3 = getSettledAddress(allSettled[1])
+        const addressGUN = getSettledAddress(allSettled[2])
+
+        return [
+            isValidSocialAddress(address)
+                ? {
+                      type: IdentityAddressType.ADDRESS,
+                      chainId: ChainId.Mainnet,
+                      label: address,
+                      address,
+                  }
+                : null,
+            isValidSocialAddress(addressENS)
+                ? {
+                      type: IdentityAddressType.ENS,
+                      chainId: ChainId.Mainnet,
+                      label: ethereumName,
+                      address: addressENS,
+                  }
+                : null,
+            isValidSocialAddress(addressRSS3)
+                ? {
+                      type: IdentityAddressType.RSS3,
+                      chainId: ChainId.Mainnet,
+                      label: `${RSS3Id}.rss3`,
+                      address: addressRSS3,
+                  }
+                : null,
+            isValidSocialAddress(addressGUN)
+                ? {
+                      type: IdentityAddressType.GUN,
+                      chainId: ChainId.Mainnet,
+                      label: addressGUN,
+                      address: addressGUN,
+                  }
+                : null,
+        ].filter(Boolean) as IdentityAddress[]
+    }
+}
diff --git a/packages/plugins/EVM/src/state/NameService.ts b/packages/plugins/EVM/src/state/NameService.ts
new file mode 100644
index 000000000000..eadb083f3d1b
--- /dev/null
+++ b/packages/plugins/EVM/src/state/NameService.ts
@@ -0,0 +1,61 @@
+import ENS from 'ethjs-ens'
+import type { Subscription } from 'use-subscription'
+import { getEnumAsArray } from '@dimensiondev/kit'
+import type { Plugin } from '@masknet/plugin-infra'
+import { NameServiceState } from '@masknet/plugin-infra/web3'
+import { ChainId, formatEthereumAddress, isValidAddress, isZeroAddress, ProviderType } from '@masknet/web3-shared-evm'
+import { Providers } from './Connection/provider'
+
+export class NameService extends NameServiceState<ChainId> {
+    private ens: ENS | null = null
+
+    constructor(
+        context: Plugin.Shared.SharedContext,
+        subscriptions: {
+            chainId?: Subscription<ChainId>
+        },
+    ) {
+        const defaultValue = Object.fromEntries(getEnumAsArray(ChainId).map((x) => [x.value, {}])) as Record<
+            ChainId,
+            Record<string, string>
+        >
+
+        super(context, defaultValue, subscriptions, {
+            isValidName: (x) => x !== '0x',
+            isValidAddress: (x) => isValidAddress(x) && !isZeroAddress(x),
+            formatAddress: formatEthereumAddress,
+        })
+    }
+
+    private async createENS() {
+        if (this.ens) return this.ens
+        this.ens = new ENS({
+            // @ts-ignore
+            provider: await Providers[ProviderType.MaskWallet].createWeb3Provider(ChainId.Mainnet),
+            network: ChainId.Mainnet,
+        })
+        return this.ens
+    }
+
+    override async lookup(chainId: ChainId, name: string) {
+        if (chainId !== ChainId.Mainnet) return
+
+        const cachedAddress = await super.lookup(chainId, name)
+        if (cachedAddress) return cachedAddress
+
+        const ens = await this.createENS()
+        await super.addAddress(chainId, name, await ens.lookup(name))
+        return super.lookup(chainId, name)
+    }
+
+    override async reverse(chainId: ChainId, address: string) {
+        if (chainId !== ChainId.Mainnet) return
+
+        const cachedDomain = await super.reverse(chainId, address)
+        if (cachedDomain) return cachedDomain
+
+        const ens = await this.createENS()
+        await super.addName(chainId, address, await ens.reverse(address))
+        return super.reverse(chainId, address)
+    }
+}
diff --git a/packages/plugins/EVM/src/state/Others.ts b/packages/plugins/EVM/src/state/Others.ts
new file mode 100644
index 000000000000..cb2e9053ed45
--- /dev/null
+++ b/packages/plugins/EVM/src/state/Others.ts
@@ -0,0 +1,38 @@
+import type { Plugin } from '@masknet/plugin-infra'
+import { OthersState } from '@masknet/plugin-infra/web3'
+import { isSameAddress } from '@masknet/web3-shared-base'
+import {
+    isValidDomain,
+    isValidAddress,
+    ChainId,
+    formatEthereumAddress,
+    formatDomainName,
+    ProviderType,
+    NetworkType,
+    SchemaType,
+    ZERO_ADDRESS,
+    formatTokenId,
+    CHAIN_DESCRIPTORS,
+    NETWORK_DESCRIPTORS,
+    PROVIDER_DESCRIPTORS,
+} from '@masknet/web3-shared-evm'
+
+export class Others extends OthersState<ChainId, SchemaType, ProviderType, NetworkType> {
+    constructor(context: Plugin.Shared.SharedContext) {
+        super(context, {
+            defaultAddress: ZERO_ADDRESS,
+            defaultBlockDelay: 15,
+            chainDescriptors: CHAIN_DESCRIPTORS,
+            networkDescriptors: NETWORK_DESCRIPTORS,
+            providerDescriptors: PROVIDER_DESCRIPTORS,
+        })
+    }
+
+    override isValidDomain = isValidDomain
+    override isValidAddress = isValidAddress
+    override isSameAddress = isSameAddress
+
+    override formatAddress = formatEthereumAddress
+    override formatTokenId = formatTokenId
+    override formatDomainName = formatDomainName
+}
diff --git a/packages/plugins/EVM/src/state/Provider.ts b/packages/plugins/EVM/src/state/Provider.ts
new file mode 100644
index 000000000000..6f14d951995c
--- /dev/null
+++ b/packages/plugins/EVM/src/state/Provider.ts
@@ -0,0 +1,61 @@
+import { getEnumAsArray } from '@dimensiondev/kit'
+import type { Plugin } from '@masknet/plugin-infra'
+import { ProviderState, ProviderStorage } from '@masknet/plugin-infra/web3'
+import { EnhanceableSite, ExtensionSite } from '@masknet/shared-base'
+import { Account, isSameAddress } from '@masknet/web3-shared-base'
+import {
+    ChainId,
+    isValidAddress,
+    NetworkType,
+    ProviderType,
+    Web3,
+    Web3Provider,
+    chainResolver,
+    providerResolver,
+    isValidChainId,
+} from '@masknet/web3-shared-evm'
+import { SharedContextSettings } from '../settings'
+import { Providers } from './Connection/provider'
+
+export class Provider extends ProviderState<ChainId, ProviderType, NetworkType, Web3Provider, Web3> {
+    constructor(context: Plugin.Shared.SharedContext) {
+        const defaultValue: ProviderStorage<Account<ChainId>, ProviderType> = {
+            accounts: Object.fromEntries(
+                getEnumAsArray(ProviderType).map((x) => [
+                    x.value,
+                    {
+                        account: '',
+                        chainId: ChainId.Mainnet,
+                    },
+                ]),
+            ) as Record<ProviderType, Account<ChainId>>,
+            providers: Object.fromEntries(
+                [...getEnumAsArray(EnhanceableSite), ...getEnumAsArray(ExtensionSite)].map((x) => [
+                    x.value,
+                    ProviderType.MaskWallet,
+                ]),
+            ) as Record<EnhanceableSite | ExtensionSite, ProviderType>,
+        }
+
+        super(context, Providers, defaultValue, {
+            isSameAddress,
+            isValidAddress,
+            isValidChainId,
+            getDefaultChainId: () => ChainId.Mainnet,
+            getDefaultNetworkType: () => NetworkType.Ethereum,
+            getNetworkTypeFromChainId: (chainId: ChainId) =>
+                chainResolver.chainNetworkType(chainId) ?? NetworkType.Ethereum,
+        })
+    }
+
+    override async connect(chainId: ChainId, providerType: ProviderType): Promise<Account<ChainId>> {
+        const account = await super.connect(chainId, providerType)
+
+        // add wallet into db
+        await SharedContextSettings.value.updateWallet(account.account, {
+            name: providerResolver.providerName(providerType)!,
+        })
+
+        return account
+    }
+}
diff --git a/packages/plugins/EVM/src/state/RiskWarning.ts b/packages/plugins/EVM/src/state/RiskWarning.ts
new file mode 100644
index 000000000000..6463d5bffbaa
--- /dev/null
+++ b/packages/plugins/EVM/src/state/RiskWarning.ts
@@ -0,0 +1,23 @@
+import type { Subscription } from 'use-subscription'
+import type { Plugin } from '@masknet/plugin-infra'
+import { RiskWarningState } from '@masknet/plugin-infra/web3'
+import { RiskWarning as RiskWarningAPI } from '@masknet/web3-providers'
+import { formatEthereumAddress } from '@masknet/web3-shared-evm'
+
+export class RiskWarning extends RiskWarningState {
+    constructor(
+        context: Plugin.Shared.SharedContext,
+        subscription: {
+            account?: Subscription<string>
+        },
+    ) {
+        super(context, subscription, {
+            formatAddress: formatEthereumAddress,
+        })
+    }
+
+    override async approve(address: string, pluginID?: string | undefined) {
+        await RiskWarningAPI.approve(address, pluginID)
+        await super.approve(address)
+    }
+}
diff --git a/packages/plugins/EVM/src/state/Settings.ts b/packages/plugins/EVM/src/state/Settings.ts
new file mode 100644
index 000000000000..07628a8d0f14
--- /dev/null
+++ b/packages/plugins/EVM/src/state/Settings.ts
@@ -0,0 +1,8 @@
+import type { Plugin } from '@masknet/plugin-infra'
+import { SettingsState } from '@masknet/plugin-infra/web3'
+
+export class Settings extends SettingsState {
+    constructor(context: Plugin.Shared.SharedContext) {
+        super(context)
+    }
+}
diff --git a/packages/plugins/EVM/src/state/Token.ts b/packages/plugins/EVM/src/state/Token.ts
new file mode 100644
index 000000000000..5780fbbc1023
--- /dev/null
+++ b/packages/plugins/EVM/src/state/Token.ts
@@ -0,0 +1,26 @@
+import type { Subscription } from 'use-subscription'
+import type { Plugin } from '@masknet/plugin-infra'
+import { TokenState, TokenStorage } from '@masknet/plugin-infra/web3'
+import { isSameAddress } from '@masknet/web3-shared-base'
+import { ChainId, formatEthereumAddress, isValidAddress, SchemaType } from '@masknet/web3-shared-evm'
+
+export class Token extends TokenState<ChainId, SchemaType> {
+    constructor(
+        context: Plugin.Shared.SharedContext,
+        subscriptions: {
+            account?: Subscription<string>
+        },
+    ) {
+        const defaultValue: TokenStorage<ChainId, SchemaType> = {
+            fungibleTokens: [],
+            nonFungibleTokens: [],
+            fungibleTokenBlockedBy: {},
+            nonFungibleTokenBlockedBy: {},
+        }
+        super(context, defaultValue, subscriptions, {
+            isValidAddress,
+            isSameAddress,
+            formatAddress: formatEthereumAddress,
+        })
+    }
+}
diff --git a/packages/plugins/EVM/src/state/Transaction.ts b/packages/plugins/EVM/src/state/Transaction.ts
new file mode 100644
index 000000000000..9eddef80b346
--- /dev/null
+++ b/packages/plugins/EVM/src/state/Transaction.ts
@@ -0,0 +1,24 @@
+import type { Subscription } from 'use-subscription'
+import { getEnumAsArray } from '@dimensiondev/kit'
+import type { Plugin } from '@masknet/plugin-infra'
+import type { TransactionStorage } from '@masknet/plugin-infra/web3'
+import { TransactionState } from '@masknet/plugin-infra/web3'
+import { ChainId, Transaction as EVM_Transaction, formatEthereumAddress } from '@masknet/web3-shared-evm'
+
+export class Transaction extends TransactionState<ChainId, EVM_Transaction> {
+    constructor(
+        context: Plugin.Shared.SharedContext,
+        subscriptions: {
+            account?: Subscription<string>
+            chainId?: Subscription<ChainId>
+        },
+    ) {
+        const defaultValue = Object.fromEntries(
+            getEnumAsArray(ChainId).map((x) => [x.value, {}]),
+        ) as TransactionStorage<ChainId, EVM_Transaction>
+
+        super(context, defaultValue, subscriptions, {
+            formatAddress: formatEthereumAddress,
+        })
+    }
+}
diff --git a/packages/plugins/EVM/src/state/TransactionFormatter.ts b/packages/plugins/EVM/src/state/TransactionFormatter.ts
new file mode 100644
index 000000000000..9bb996e65453
--- /dev/null
+++ b/packages/plugins/EVM/src/state/TransactionFormatter.ts
@@ -0,0 +1,143 @@
+import * as ABICoder from 'web3-eth-abi'
+import type { Plugin } from '@masknet/plugin-infra'
+import {
+    isZero,
+    isSameAddress,
+    TransactionContext,
+    TransactionDescriptor as TransactionDescriptorBase,
+    TransactionDescriptorType,
+} from '@masknet/web3-shared-base'
+import { TransactionFormatterState } from '@masknet/plugin-infra/web3'
+import {
+    ChainId,
+    getData,
+    getFunctionParameters,
+    getTo,
+    getTransactionSignature,
+    isEmptyHex,
+    isZeroAddress,
+    Transaction,
+    TransactionParameter,
+} from '@masknet/web3-shared-evm'
+import { readABI } from './TransactionFormatter/abi'
+import { createConnection } from './Connection/connection'
+import type { TransactionDescriptor } from './TransactionFormatter/types'
+
+// built-in descriptors
+import { TransferTokenDescriptor } from './TransactionFormatter/descriptors/TransferToken'
+import { ContractDeploymentDescriptor } from './TransactionFormatter/descriptors/ContractDeployment'
+import { CancelDescriptor } from './TransactionFormatter/descriptors/Cancel'
+import { BaseTransactionDescriptor } from './TransactionFormatter/descriptors/Base'
+import { ITODescriptor } from './TransactionFormatter/descriptors/ITO'
+import { RedPacketDescriptor } from './TransactionFormatter/descriptors/RedPacket'
+import { ERC20Descriptor } from './TransactionFormatter/descriptors/ERC20'
+
+export class TransactionFormatter extends TransactionFormatterState<ChainId, TransactionParameter, Transaction> {
+    private coder = ABICoder as unknown as ABICoder.AbiCoder
+    private connection = createConnection()
+    private descriptors: Record<TransactionDescriptorType, TransactionDescriptor[]> = {
+        [TransactionDescriptorType.TRANSFER]: [new TransferTokenDescriptor()],
+        [TransactionDescriptorType.INTERACTION]: [
+            new ITODescriptor(),
+            new RedPacketDescriptor(),
+            new ERC20Descriptor(),
+            new BaseTransactionDescriptor(),
+        ],
+        [TransactionDescriptorType.DEPLOYMENT]: [new ContractDeploymentDescriptor()],
+        [TransactionDescriptorType.RETRY]: [],
+        [TransactionDescriptorType.CANCEL]: [new CancelDescriptor()],
+    }
+
+    constructor(context: Plugin.Shared.SharedContext) {
+        super(context)
+    }
+
+    override async createContext(
+        chainId: ChainId,
+        transaction: Transaction,
+    ): Promise<TransactionContext<ChainId, string | undefined>> {
+        const from = (transaction.from as string | undefined) ?? ''
+        const value = (transaction.value as string | undefined) ?? '0x0'
+        const data = getData(transaction)
+        const to = getTo(transaction)
+        const signature = getTransactionSignature(transaction)
+        const parameters = getFunctionParameters(transaction)
+
+        const context = {
+            chainId,
+            from,
+            to,
+            value,
+        }
+
+        if (data) {
+            // contract interaction
+            const abi = readABI(signature)
+
+            if (abi) {
+                try {
+                    return {
+                        ...context,
+                        type: TransactionDescriptorType.INTERACTION,
+                        name: abi.name,
+                        parameters: this.coder.decodeParameters(abi.parameters, parameters ?? ''),
+                    }
+                } catch {
+                    // do nothing
+                }
+            }
+
+            // contract deployment
+            if (isZeroAddress(to)) {
+                return {
+                    ...context,
+                    type: TransactionDescriptorType.DEPLOYMENT,
+                    code: data,
+                }
+            }
+        }
+
+        if (to) {
+            let code = ''
+            try {
+                code = await this.connection.getCode(to)
+            } catch {
+                code = ''
+            }
+
+            // cancel tx
+            if (isSameAddress(from, to) && isZero(value)) {
+                return { ...context, type: TransactionDescriptorType.CANCEL }
+            }
+
+            // send ether
+            if (isEmptyHex(code)) {
+                return { ...context, type: TransactionDescriptorType.TRANSFER }
+            } else {
+                return { ...context, type: TransactionDescriptorType.INTERACTION }
+            }
+        }
+
+        throw new Error('Failed to format transaction.')
+    }
+
+    override async createDescriptor(
+        chainId: ChainId,
+        transaction: Transaction,
+        context: TransactionContext<ChainId, TransactionParameter>,
+    ): Promise<TransactionDescriptorBase<ChainId, Transaction>> {
+        for (const descriptor of this.descriptors[context.type]) {
+            const computed = await descriptor.compute(context)
+
+            if (computed)
+                return {
+                    ...computed,
+                    chainId,
+                    type: context.type,
+                    _tx: transaction,
+                }
+        }
+
+        throw new Error('Failed to computed transaction descriptor.')
+    }
+}
diff --git a/packages/plugins/EVM/src/state/TransactionFormatter/abi.ts b/packages/plugins/EVM/src/state/TransactionFormatter/abi.ts
new file mode 100644
index 000000000000..30d018723c8d
--- /dev/null
+++ b/packages/plugins/EVM/src/state/TransactionFormatter/abi.ts
@@ -0,0 +1,68 @@
+import type { AbiItem } from 'web3-utils'
+import * as ABICoder from 'web3-eth-abi'
+import type { TransactionMethodABI } from './types'
+
+// built-in abis
+import BulkCheckout from '@masknet/web3-contracts/abis/BulkCheckout.json'
+import ITO2 from '@masknet/web3-contracts/abis/ITO2.json'
+import NftHappyRedPacket from '@masknet/web3-contracts/abis/NftHappyRedPacket.json'
+import HappyRedPacketV4 from '@masknet/web3-contracts/abis/HappyRedPacketV4.json'
+import ERC20 from '@masknet/web3-contracts/abis/ERC20.json'
+import RouterV2ABI from '@masknet/web3-contracts/abis/RouterV2.json'
+import SwapRouter from '@masknet/web3-contracts/abis/SwapRouter.json'
+import MaskBox from '@masknet/web3-contracts/abis/MaskBox.json'
+
+class ABI {
+    private coder = ABICoder as unknown as ABICoder.AbiCoder
+    private abis: Map<string, TransactionMethodABI> = new Map()
+
+    constructor() {
+        this.construct(BulkCheckout as AbiItem[]) // donate gitcoin grants
+        this.construct(ITO2 as AbiItem[])
+        this.construct(NftHappyRedPacket as AbiItem[])
+        this.construct(HappyRedPacketV4 as AbiItem[])
+        this.construct(MaskBox as AbiItem[])
+        this.construct(ERC20 as AbiItem[])
+        this.construct(RouterV2ABI as AbiItem[]) // uniswap V2 like
+        this.construct(SwapRouter as AbiItem[]) // uniswap V3 like
+    }
+
+    read(signature?: string) {
+        if (!signature) return
+        return this.abis.get(signature)
+    }
+    construct(abi: AbiItem[]) {
+        abi.forEach((x) => {
+            if (x.type !== 'function') return
+            if (x.stateMutability === 'pure' || x.stateMutability === 'view') return
+            const { name, inputs = [] } = x
+            if (!name) return
+            try {
+                const signature = this.coder.encodeFunctionSignature(
+                    `${x.name}(${inputs.map((y) => y.type).join(',')})`,
+                )
+                if (this.abis.has(signature))
+                    console.warn(
+                        `The signature of ${`${x.name}(${inputs.map((y) => y.type).join(',')})`} already exists.`,
+                    )
+                this.abis.set(signature, {
+                    name,
+                    parameters:
+                        inputs.map((y) => ({
+                            name: y.name,
+                            type: y.type,
+                        })) ?? [],
+                })
+            } catch (error) {
+                console.log('Failed to encode function signature from below ABI:')
+                console.log(x)
+            }
+        })
+    }
+}
+
+const abi = new ABI()
+
+export function readABI(signature?: string) {
+    return abi.read(signature)
+}
diff --git a/packages/plugins/EVM/src/state/TransactionFormatter/descriptors/Base.ts b/packages/plugins/EVM/src/state/TransactionFormatter/descriptors/Base.ts
new file mode 100644
index 000000000000..3fd20ed81a1c
--- /dev/null
+++ b/packages/plugins/EVM/src/state/TransactionFormatter/descriptors/Base.ts
@@ -0,0 +1,24 @@
+import type { TransactionContext } from '@masknet/web3-shared-base'
+import { ChainId, getTokenConstants } from '@masknet/web3-shared-evm'
+import { Web3StateSettings } from '../../../settings'
+import type { TransactionDescriptor } from '../types'
+import { getTokenAmountDescription } from '../utils'
+
+export class BaseTransactionDescriptor implements TransactionDescriptor {
+    async compute(context: TransactionContext<ChainId, string | undefined>) {
+        const connection = await Web3StateSettings.value.Connection?.getConnection?.({
+            chainId: context.chainId,
+        })
+
+        const { NATIVE_TOKEN_ADDRESS } = getTokenConstants(context.chainId)
+        const nativeToken = await connection?.getFungibleToken(NATIVE_TOKEN_ADDRESS!)
+
+        return {
+            chainId: context.chainId,
+            title: context.name ?? 'Contract Interaction',
+            description: context.value
+                ? getTokenAmountDescription(context.value as string | undefined, nativeToken, true)
+                : '-',
+        }
+    }
+}
diff --git a/packages/plugins/EVM/src/state/TransactionFormatter/descriptors/Cancel.ts b/packages/plugins/EVM/src/state/TransactionFormatter/descriptors/Cancel.ts
new file mode 100644
index 000000000000..ca65605e4787
--- /dev/null
+++ b/packages/plugins/EVM/src/state/TransactionFormatter/descriptors/Cancel.ts
@@ -0,0 +1,11 @@
+import type { TransactionContext } from '@masknet/web3-shared-base'
+import type { ChainId } from '@masknet/web3-shared-evm'
+
+export class CancelDescriptor {
+    compute(context: TransactionContext<ChainId>) {
+        return Promise.resolve({
+            chainId: context.chainId,
+            title: 'Cancel Transaction',
+        })
+    }
+}
diff --git a/packages/plugins/EVM/src/state/TransactionFormatter/descriptors/ContractDeployment.ts b/packages/plugins/EVM/src/state/TransactionFormatter/descriptors/ContractDeployment.ts
new file mode 100644
index 000000000000..e9dea792687e
--- /dev/null
+++ b/packages/plugins/EVM/src/state/TransactionFormatter/descriptors/ContractDeployment.ts
@@ -0,0 +1,24 @@
+import type { TransactionContext } from '@masknet/web3-shared-base'
+import type { ChainId } from '@masknet/web3-shared-evm'
+import { getTokenAmountDescription } from '../utils'
+import { Web3StateSettings } from '../../../settings'
+
+export class ContractDeploymentDescriptor {
+    async compute(context: TransactionContext<ChainId>) {
+        const connection = await Web3StateSettings.value.Connection?.getConnection?.({
+            chainId: context.chainId,
+        })
+
+        return {
+            chainId: context.chainId,
+            title: 'Contract Deployment',
+            description: `Contract Deployment ${getTokenAmountDescription(
+                context.value,
+                await connection?.getNativeToken({
+                    chainId: context.chainId,
+                }),
+                true,
+            )}`,
+        }
+    }
+}
diff --git a/packages/plugins/EVM/src/state/TransactionFormatter/descriptors/ERC20.ts b/packages/plugins/EVM/src/state/TransactionFormatter/descriptors/ERC20.ts
new file mode 100644
index 000000000000..84fba1599ad0
--- /dev/null
+++ b/packages/plugins/EVM/src/state/TransactionFormatter/descriptors/ERC20.ts
@@ -0,0 +1,44 @@
+import type { TransactionContext } from '@masknet/web3-shared-base'
+import type { ChainId } from '@masknet/web3-shared-evm'
+import type { TransactionDescriptor } from '../types'
+import { getTokenAmountDescription } from '../utils'
+import { Web3StateSettings } from '../../../settings'
+
+export class ERC20Descriptor implements TransactionDescriptor {
+    async compute(context: TransactionContext<ChainId>) {
+        if (!context.name) return
+
+        const connection = await Web3StateSettings.value.Connection?.getConnection?.({
+            chainId: context.chainId,
+        })
+
+        switch (context.name) {
+            case 'approve':
+                return {
+                    chainId: context.chainId,
+                    title: 'Approve',
+                    description: `Approve spend ${getTokenAmountDescription(
+                        context.parameters?.value,
+                        await connection?.getFungibleToken(context.parameters?.to ?? '', {
+                            chainId: context.chainId,
+                        }),
+                    )}`,
+                }
+            case 'transfer':
+            case 'transferFrom':
+                return {
+                    chainId: context.chainId,
+                    title: 'Transfer Token',
+                    description: `Transfer token ${getTokenAmountDescription(
+                        context.parameters?.value,
+                        await connection?.getFungibleToken(context.parameters?.to ?? '', {
+                            chainId: context.chainId,
+                        }),
+                        true,
+                    )}`,
+                }
+            default:
+                return
+        }
+    }
+}
diff --git a/packages/plugins/EVM/src/state/TransactionFormatter/descriptors/ITO.ts b/packages/plugins/EVM/src/state/TransactionFormatter/descriptors/ITO.ts
new file mode 100644
index 000000000000..2df846cf0fc2
--- /dev/null
+++ b/packages/plugins/EVM/src/state/TransactionFormatter/descriptors/ITO.ts
@@ -0,0 +1,31 @@
+import { i18NextInstance } from '@masknet/shared-base'
+import { TransactionContext, isSameAddress, formatBalance } from '@masknet/web3-shared-base'
+import { ChainId, getITOConstants } from '@masknet/web3-shared-evm'
+import { Web3StateSettings } from '../../../settings'
+import type { TransactionDescriptor } from '../types'
+
+export class ITODescriptor implements TransactionDescriptor {
+    async compute(context: TransactionContext<ChainId>) {
+        const { ITO2_CONTRACT_ADDRESS } = getITOConstants(context.chainId)
+        if (!isSameAddress(context.to, ITO2_CONTRACT_ADDRESS)) return
+
+        const connection = await Web3StateSettings.value.Connection?.getConnection?.({
+            chainId: context.chainId,
+            account: context.from,
+        })
+        const token = await connection?.getFungibleToken(context.parameters?._token_addr ?? '')
+        const amount = formatBalance(context.parameters?._total_tokens, token?.decimals)
+
+        return {
+            chainId: context.chainId,
+            title: 'Create ITO Packet',
+            description:
+                token && amount
+                    ? i18NextInstance.t('plugin_ito_transaction_dialog_summary', {
+                          amount,
+                          symbol: token.symbol,
+                      })
+                    : i18NextInstance.t('plugin_ito_transaction_dialog_summary_with_no_token'),
+        }
+    }
+}
diff --git a/packages/plugins/EVM/src/state/TransactionFormatter/descriptors/RedPacket.ts b/packages/plugins/EVM/src/state/TransactionFormatter/descriptors/RedPacket.ts
new file mode 100644
index 000000000000..5e277a6031ff
--- /dev/null
+++ b/packages/plugins/EVM/src/state/TransactionFormatter/descriptors/RedPacket.ts
@@ -0,0 +1,42 @@
+import { i18NextInstance } from '@masknet/shared-base'
+import { ChainId, getNftRedPacketConstants, getRedPacketConstants } from '@masknet/web3-shared-evm'
+import type { TransactionDescriptor } from '../types'
+import { Web3StateSettings } from '../../../settings'
+import { isSameAddress, formatBalance, TransactionContext } from '@masknet/web3-shared-base'
+
+export class RedPacketDescriptor implements TransactionDescriptor {
+    // TODO: 6002: avoid using i18n text in a service. delegate it to ui.
+    async compute(context: TransactionContext<ChainId>) {
+        if (!context.name) return
+        if (context.name !== 'create_red_packet') return
+
+        const { HAPPY_RED_PACKET_ADDRESS_V4 } = getRedPacketConstants(context.chainId)
+        const { RED_PACKET_NFT_ADDRESS } = getNftRedPacketConstants(context.chainId)
+
+        if (isSameAddress(context.to, HAPPY_RED_PACKET_ADDRESS_V4)) {
+            const connection = await Web3StateSettings.value.Connection?.getConnection?.({
+                chainId: context.chainId,
+                account: context.from,
+            })
+
+            const token = await connection?.getFungibleToken(context.parameters?._token_addr ?? '')
+            const amount = formatBalance(context.parameters?._total_tokens)
+
+            return {
+                chainId: context.chainId,
+                title: 'Create Red Packet',
+                description: i18NextInstance.t('plugin_red_packet_create_with_token', {
+                    amount,
+                    symbol: token?.symbol,
+                }),
+            }
+        } else if (isSameAddress(context.to, RED_PACKET_NFT_ADDRESS)) {
+            return {
+                chainId: context.chainId,
+                title: 'Create NFT Red Packet',
+                description: i18NextInstance.t('plugin_nft_red_packet_create'),
+            }
+        }
+        return
+    }
+}
diff --git a/packages/plugins/EVM/src/state/TransactionFormatter/descriptors/TransferToken.ts b/packages/plugins/EVM/src/state/TransactionFormatter/descriptors/TransferToken.ts
new file mode 100644
index 000000000000..3c455c5f9cfe
--- /dev/null
+++ b/packages/plugins/EVM/src/state/TransactionFormatter/descriptors/TransferToken.ts
@@ -0,0 +1,23 @@
+import type { TransactionContext } from '@masknet/web3-shared-base'
+import type { ChainId } from '@masknet/web3-shared-evm'
+import { Web3StateSettings } from '../../../settings'
+import { getTokenAmountDescription } from '../utils'
+
+export class TransferTokenDescriptor {
+    async compute(context: TransactionContext<ChainId>) {
+        const connection = await Web3StateSettings.value.Connection?.getConnection?.({
+            chainId: context.chainId,
+        })
+
+        return {
+            chainId: context.chainId,
+            title: 'Transfer',
+            description: `Send token -${getTokenAmountDescription(
+                context.value,
+                await connection?.getNativeToken({
+                    chainId: context.chainId,
+                }),
+            )}`,
+        }
+    }
+}
diff --git a/packages/plugins/EVM/src/state/TransactionFormatter/descriptors/Uniswap.ts b/packages/plugins/EVM/src/state/TransactionFormatter/descriptors/Uniswap.ts
new file mode 100644
index 000000000000..a69ff3c4391f
--- /dev/null
+++ b/packages/plugins/EVM/src/state/TransactionFormatter/descriptors/Uniswap.ts
@@ -0,0 +1,16 @@
+import type { TransactionContext } from '@masknet/web3-shared-base'
+import { ChainId, createNativeToken } from '@masknet/web3-shared-evm'
+import { getTokenAmountDescription } from '../utils'
+
+export class UniswapDescriptor {
+    compute(context: TransactionContext<ChainId>) {
+        return Promise.resolve({
+            title: 'Contract Deployment',
+            description: `Contract Deployment ${getTokenAmountDescription(
+                context.value,
+                createNativeToken(context.chainId),
+                true,
+            )}`,
+        })
+    }
+}
diff --git a/packages/plugins/EVM/src/state/TransactionFormatter/types.ts b/packages/plugins/EVM/src/state/TransactionFormatter/types.ts
new file mode 100644
index 000000000000..90371fccb410
--- /dev/null
+++ b/packages/plugins/EVM/src/state/TransactionFormatter/types.ts
@@ -0,0 +1,35 @@
+import type { TransactionContext, TransactionDescriptor as TransactionDescriptorBase } from '@masknet/web3-shared-base'
+import type { ChainId, Transaction } from '@masknet/web3-shared-evm'
+
+export interface TransactionMethodABI {
+    name: string
+    parameters: Array<{
+        name: string
+        type: string
+    }>
+}
+
+export interface TransactionComputationContext {
+    /** the from address. */
+    from: string
+    /** the to address */
+    to: string
+    /** the value amount (polyfill to 0x0 if absent in the original transaction) */
+    value: string
+    /** the data payload of transaction */
+    data?: string
+    /** code to deploy */
+    code?: string
+    /** method name */
+    name?: string
+    /** actual parameters */
+    parameters?: {
+        [key: string]: string | undefined
+    }
+}
+
+export interface TransactionDescriptor {
+    compute: (
+        context: TransactionContext<ChainId, string | undefined>,
+    ) => Promise<Omit<TransactionDescriptorBase<ChainId, Transaction>, 'type' | '_tx'> | undefined>
+}
diff --git a/packages/plugins/EVM/src/state/TransactionFormatter/utils.ts b/packages/plugins/EVM/src/state/TransactionFormatter/utils.ts
new file mode 100644
index 000000000000..5f933332b491
--- /dev/null
+++ b/packages/plugins/EVM/src/state/TransactionFormatter/utils.ts
@@ -0,0 +1,14 @@
+import { FungibleToken, scale10, formatBalance } from '@masknet/web3-shared-base'
+import type { ChainId, SchemaType } from '@masknet/web3-shared-evm'
+
+export function getTokenAmountDescription(
+    amount = '0',
+    token?: FungibleToken<ChainId, SchemaType>,
+    negative?: boolean,
+) {
+    const symbol = negative ? '- ' : ''
+    const value = scale10(1, 9 + (token?.decimals ?? 18)).isGreaterThanOrEqualTo(amount)
+        ? formatBalance(amount, token?.decimals ?? 0, 4)
+        : 'infinite'
+    return `${symbol}${value} ${token?.symbol?.trim()}`
+}
diff --git a/packages/plugins/EVM/src/state/TransactionWatcher.ts b/packages/plugins/EVM/src/state/TransactionWatcher.ts
new file mode 100644
index 000000000000..a7bcb4d47e6d
--- /dev/null
+++ b/packages/plugins/EVM/src/state/TransactionWatcher.ts
@@ -0,0 +1,12 @@
+import type { Plugin } from '@masknet/plugin-infra'
+import { TransactionWatcherState } from '@masknet/plugin-infra/web3'
+import type { ChainId, Transaction } from '@masknet/web3-shared-evm'
+import { TransactionCheckers } from './TransactionWatcher/checker'
+
+export class TransactionWatcher extends TransactionWatcherState<ChainId, Transaction> {
+    constructor(context: Plugin.Shared.SharedContext) {
+        super(context, TransactionCheckers, {
+            defaultBlockDelay: 15,
+        })
+    }
+}
diff --git a/packages/plugins/EVM/src/state/TransactionWatcher/checker.ts b/packages/plugins/EVM/src/state/TransactionWatcher/checker.ts
new file mode 100644
index 000000000000..72550bef3b42
--- /dev/null
+++ b/packages/plugins/EVM/src/state/TransactionWatcher/checker.ts
@@ -0,0 +1,4 @@
+import { AccountChecker } from './checkers/AccountChecker'
+import { ReceiptChecker } from './checkers/ReceiptChecker'
+
+export const TransactionCheckers = [new AccountChecker(), new ReceiptChecker()]
diff --git a/packages/plugins/EVM/src/state/TransactionWatcher/checkers/AccountChecker.ts b/packages/plugins/EVM/src/state/TransactionWatcher/checkers/AccountChecker.ts
new file mode 100644
index 000000000000..bda76e0751cb
--- /dev/null
+++ b/packages/plugins/EVM/src/state/TransactionWatcher/checkers/AccountChecker.ts
@@ -0,0 +1,8 @@
+import type { TransactionChecker, TransactionStatusType } from '@masknet/web3-shared-base'
+import type { ChainId } from '@masknet/web3-shared-evm'
+
+export class AccountChecker implements TransactionChecker<ChainId> {
+    checkStatus(chainId: ChainId, id: string): Promise<TransactionStatusType> {
+        throw new Error('Method not implemented.')
+    }
+}
diff --git a/packages/plugins/EVM/src/state/TransactionWatcher/checkers/ReceiptChecker.ts b/packages/plugins/EVM/src/state/TransactionWatcher/checkers/ReceiptChecker.ts
new file mode 100644
index 000000000000..8d13da095e47
--- /dev/null
+++ b/packages/plugins/EVM/src/state/TransactionWatcher/checkers/ReceiptChecker.ts
@@ -0,0 +1,8 @@
+import type { TransactionChecker, TransactionStatusType } from '@masknet/web3-shared-base'
+import type { ChainId } from '@masknet/web3-shared-evm'
+
+export class ReceiptChecker implements TransactionChecker<ChainId> {
+    checkStatus(chainId: ChainId, id: string): Promise<TransactionStatusType> {
+        throw new Error('Method not implemented.')
+    }
+}
diff --git a/packages/plugins/EVM/src/state/Wallet.ts b/packages/plugins/EVM/src/state/Wallet.ts
new file mode 100644
index 000000000000..06f227b0042e
--- /dev/null
+++ b/packages/plugins/EVM/src/state/Wallet.ts
@@ -0,0 +1,8 @@
+import type { Plugin } from '@masknet/plugin-infra'
+import { WalletState } from '@masknet/plugin-infra/web3'
+
+export class Wallet extends WalletState {
+    constructor(context: Plugin.Shared.SharedContext) {
+        super(context)
+    }
+}
diff --git a/packages/plugins/EVM/src/state/index.ts b/packages/plugins/EVM/src/state/index.ts
new file mode 100644
index 000000000000..d803e681360d
--- /dev/null
+++ b/packages/plugins/EVM/src/state/index.ts
@@ -0,0 +1,60 @@
+import type { Plugin } from '@masknet/plugin-infra'
+import { AddressBook } from './AddressBook'
+import { Hub } from './Hub'
+import { RiskWarning } from './RiskWarning'
+import { Token } from './Token'
+import { Transaction } from './Transaction'
+import { NameService } from './NameService'
+import { Connection } from './Connection'
+import { Provider } from './Provider'
+import { Wallet } from './Wallet'
+import { Others } from './Others'
+import { Settings } from './Settings'
+import { TransactionFormatter } from './TransactionFormatter'
+import { TransactionWatcher } from './TransactionWatcher'
+import type { EVM_Web3State } from './Connection/types'
+import { IdentityService } from './IdentityService'
+
+export function createWeb3State(context: Plugin.Shared.SharedContext): EVM_Web3State {
+    const Provider_ = new Provider(context)
+    const Settings_ = new Settings(context)
+
+    return {
+        Settings: Settings_,
+        Provider: Provider_,
+
+        AddressBook: new AddressBook(context, {
+            chainId: Provider_.chainId,
+        }),
+        Hub: new Hub(context, {
+            chainId: Provider_.chainId,
+            account: Provider_.account,
+            currencyType: Settings_.currencyType,
+        }),
+        IdentityService: new IdentityService(context),
+        NameService: new NameService(context, {
+            chainId: Provider_.chainId,
+        }),
+        RiskWarning: new RiskWarning(context, {
+            account: Provider_.account,
+        }),
+        Token: new Token(context, {
+            account: Provider_.account,
+        }),
+        Transaction: new Transaction(context, {
+            chainId: Provider_.chainId,
+            account: Provider_.account,
+        }),
+        TransactionFormatter: new TransactionFormatter(context),
+        TransactionWatcher: new TransactionWatcher(context),
+        Connection: new Connection(context, {
+            chainId: Provider_.chainId,
+            account: Provider_.account,
+            providerType: Provider_.providerType,
+        }),
+        Wallet: new Wallet(context),
+        Others: new Others(context),
+    }
+}
+
+export * from './Connection/types'
diff --git a/packages/plugins/EVM/src/types/index.ts b/packages/plugins/EVM/src/types/index.ts
new file mode 100644
index 000000000000..30709f1b7be0
--- /dev/null
+++ b/packages/plugins/EVM/src/types/index.ts
@@ -0,0 +1,9 @@
+// https://www.jsonrpc.org/specification#error_object
+export enum JSON_RPC_ERROR_CODE {
+    INVALID_REQUEST = -32600,
+    METHOD_NOT_FOUND = 32601,
+    INVALID_PARAMS = -32602,
+    INTERNAL_ERROR = -32603,
+    SERVER_ERROR_RANGE_START = -32000,
+    SERVER_ERROR_RANGE_END = -32099,
+}
diff --git a/packages/plugins/EVM/tsconfig.json b/packages/plugins/EVM/tsconfig.json
new file mode 100644
index 000000000000..2ead7bf5f79c
--- /dev/null
+++ b/packages/plugins/EVM/tsconfig.json
@@ -0,0 +1,20 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "rootDir": "src",
+    "outDir": "dist",
+    "tsBuildInfoFile": "dist/.tsbuildinfo"
+  },
+  "include": ["src", "src/**/*.json"],
+  "references": [
+    { "path": "../../icons" },
+    { "path": "../../injected-script/sdk" },
+    { "path": "../../plugin-infra" },
+    { "path": "../../theme" },
+    { "path": "../../shared" },
+    { "path": "../../shared-base" },
+    { "path": "../../web3-shared/base" },
+    { "path": "../../web3-shared/evm" },
+    { "path": "../../web3-providers" }
+  ]
+}
diff --git a/packages/plugins/FileService/src/helpers.ts b/packages/plugins/FileService/src/helpers.ts
index 160e309058f1..a3ce155ebf28 100644
--- a/packages/plugins/FileService/src/helpers.ts
+++ b/packages/plugins/FileService/src/helpers.ts
@@ -30,7 +30,10 @@ export async function makeFileKeySigned(fileKey: string | undefined | null) {
     const key = await crypto.subtle.generateKey({ name: 'HMAC', hash: { name: 'SHA-256' } }, true, ['sign', 'verify'])
     const exportedKey = await crypto.subtle.exportKey('raw', key)
     const signed = await crypto.subtle.sign({ name: 'HMAC' }, key, encodedKey)
-    return [signed, exportedKey].map(encodeArrayBuffer)
+    const buf = new Uint8Array(exportedKey.byteLength + signed.byteLength)
+    buf.set(new Uint8Array(exportedKey), 0)
+    buf.set(new Uint8Array(signed), exportedKey.byteLength)
+    return encodeArrayBuffer(buf)
 }
 
 export const resolveGatewayAPI = createLookupTableResolver<Provider, string>(
diff --git a/packages/plugins/Flow/package.json b/packages/plugins/Flow/package.json
index c355b660736f..d93cf0b3c620 100644
--- a/packages/plugins/Flow/package.json
+++ b/packages/plugins/Flow/package.json
@@ -9,16 +9,22 @@
   },
   "types": "./dist/index.d.ts",
   "dependencies": {
-    "@blocto/fcl": "^0.0.78-alpha.8",
+    "@blocto/fcl": "^0.0.78-alpha.10",
     "@masknet/icons": "workspace:*",
     "@masknet/plugin-infra": "workspace:*",
     "@masknet/shared": "workspace:*",
     "@masknet/shared-base": "workspace:*",
     "@masknet/theme": "workspace:*",
+    "@masknet/injected-script": "workspace:*",
     "@masknet/web3-providers": "workspace:*",
     "@masknet/web3-shared-base": "workspace:*",
+    "@masknet/web3-shared-evm": "workspace:*",
     "@masknet/web3-shared-flow": "workspace:*",
+    "@servie/events": "^3.0.0",
     "bignumber.js": "^9.0.2",
     "react-use": "^17.3.2"
+  },
+  "devDependencies": {
+    "@types/use-subscription": "^1.0.0"
   }
 }
diff --git a/packages/plugins/Flow/src/UI/Dashboard/index.tsx b/packages/plugins/Flow/src/UI/Dashboard/index.tsx
index d8d1fdbfa573..c93c9f094127 100644
--- a/packages/plugins/Flow/src/UI/Dashboard/index.tsx
+++ b/packages/plugins/Flow/src/UI/Dashboard/index.tsx
@@ -1,16 +1,46 @@
 import type { Plugin } from '@masknet/plugin-infra'
+import type {
+    ChainId,
+    NetworkType,
+    ProviderType,
+    SchemaType,
+    Signature,
+    GasOption,
+    Block,
+    Transaction,
+    TransactionReceipt,
+    TransactionDetailed,
+    TransactionParameter,
+    TransactionSignature,
+    Web3,
+} from '@masknet/web3-shared-flow'
 import { base } from '../../base'
-import { Web3UI } from '../Web3UI'
-import { createWeb3State } from '../Web3State'
-import { setupStorage, StorageDefaultValue } from '../../storage'
+import { createWeb3State } from '../../state'
+import { SharedContextSettings, Web3StateSettings } from '../../settings'
 
-const sns: Plugin.Dashboard.Definition = {
+const dashboard: Plugin.Dashboard.Definition<
+    ChainId,
+    SchemaType,
+    ProviderType,
+    NetworkType,
+    Signature,
+    GasOption,
+    Block,
+    Transaction,
+    TransactionReceipt,
+    TransactionDetailed,
+    TransactionSignature,
+    TransactionParameter,
+    Web3
+> = {
     ...base,
     init(signal, context) {
-        setupStorage(context.createKVStorage('memory', StorageDefaultValue))
-        sns.Web3State = createWeb3State(signal)
+        const Web3State = createWeb3State(context)
+
+        dashboard.Web3State = Web3State
+        Web3StateSettings.value = Web3State
+        SharedContextSettings.value = context
     },
-    Web3UI,
 }
 
-export default sns
+export default dashboard
diff --git a/packages/plugins/Flow/src/UI/SNSAdaptor/index.tsx b/packages/plugins/Flow/src/UI/SNSAdaptor/index.tsx
index c209a46482c9..dc4f6beb795d 100644
--- a/packages/plugins/Flow/src/UI/SNSAdaptor/index.tsx
+++ b/packages/plugins/Flow/src/UI/SNSAdaptor/index.tsx
@@ -1,16 +1,46 @@
 import type { Plugin } from '@masknet/plugin-infra'
+import type {
+    ChainId,
+    NetworkType,
+    ProviderType,
+    SchemaType,
+    Signature,
+    GasOption,
+    Block,
+    Transaction,
+    TransactionReceipt,
+    TransactionDetailed,
+    TransactionParameter,
+    TransactionSignature,
+    Web3,
+} from '@masknet/web3-shared-flow'
 import { base } from '../../base'
-import { Web3UI } from '../Web3UI'
-import { createWeb3State } from '../Web3State'
-import { setupStorage, StorageDefaultValue } from '../../storage'
+import { createWeb3State } from '../../state'
+import { SharedContextSettings, Web3StateSettings } from '../../settings'
 
-const sns: Plugin.SNSAdaptor.Definition = {
+const sns: Plugin.SNSAdaptor.Definition<
+    ChainId,
+    SchemaType,
+    ProviderType,
+    NetworkType,
+    Signature,
+    GasOption,
+    Block,
+    Transaction,
+    TransactionReceipt,
+    TransactionDetailed,
+    TransactionSignature,
+    TransactionParameter,
+    Web3
+> = {
     ...base,
     init(signal, context) {
-        setupStorage(context.createKVStorage('memory', StorageDefaultValue))
-        sns.Web3State = createWeb3State(signal)
+        const Web3State = createWeb3State(context)
+
+        sns.Web3State = Web3State
+        Web3StateSettings.value = Web3State
+        SharedContextSettings.value = context
     },
-    Web3UI,
 }
 
 export default sns
diff --git a/packages/plugins/Flow/src/UI/Web3State/index.ts b/packages/plugins/Flow/src/UI/Web3State/index.ts
deleted file mode 100644
index 11c6b37237df..000000000000
--- a/packages/plugins/Flow/src/UI/Web3State/index.ts
+++ /dev/null
@@ -1,62 +0,0 @@
-import type { Web3Plugin } from '@masknet/plugin-infra/web3'
-import {
-    NetworkType,
-    ProviderType,
-    resolveBlockLinkOnExplorer,
-    resolveTransactionLinkOnExplorer,
-    resolveAddressLinkOnExplorer,
-} from '@masknet/web3-shared-flow'
-import { createConstantSubscription, mapSubscription } from '@masknet/shared-base'
-import { toFixed } from '@masknet/web3-shared-base'
-import { getStorage, StorageDefaultValue } from '../../storage'
-import { formatAddress } from '../../helpers'
-import { getFungibleAssets } from '../../apis'
-
-function createSubscriptionFromChainId<T>(getter: (value: typeof StorageDefaultValue.chainId) => T) {
-    return mapSubscription(getStorage().chainId.subscription, getter)
-}
-
-function createSubscriptionFromUser<T>(getter: (value: typeof StorageDefaultValue.user) => T) {
-    return mapSubscription(getStorage().user.subscription, getter)
-}
-
-export function createWeb3State(signal: AbortSignal): Web3Plugin.ObjectCapabilities.Capabilities {
-    return {
-        Shared: {
-            allowTestnet: createConstantSubscription(false),
-            account: createSubscriptionFromUser((user) => {
-                return user?.addr ?? ''
-            }),
-            wallets: createSubscriptionFromUser((user): Web3Plugin.Wallet[] => {
-                if (!user?.addr) return []
-                return [
-                    {
-                        name: 'Flow',
-                        address: user?.addr,
-                        hasDerivationPath: false,
-                        hasStoredKeyInfo: false,
-                    },
-                ]
-            }),
-            chainId: createSubscriptionFromChainId((x) => x as unknown as number),
-            networkType: createConstantSubscription(NetworkType.Flow),
-            providerType: createSubscriptionFromUser((user) => {
-                return user?.addr ? ProviderType.Blocto : undefined
-            }),
-        },
-        Asset: {
-            getFungibleAssets,
-        },
-        Utils: {
-            formatAddress,
-            formatBalance: toFixed,
-            formatCurrency: (value, sign = '') => `${sign}${toFixed(value)}`,
-
-            isChainIdValid: () => true,
-
-            resolveTransactionLink: resolveTransactionLinkOnExplorer,
-            resolveAddressLink: resolveAddressLinkOnExplorer,
-            resolveBlockLink: resolveBlockLinkOnExplorer,
-        },
-    }
-}
diff --git a/packages/plugins/Flow/src/UI/Web3UI/index.tsx b/packages/plugins/Flow/src/UI/Web3UI/index.tsx
deleted file mode 100644
index 64efdd84e1c3..000000000000
--- a/packages/plugins/Flow/src/UI/Web3UI/index.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import type { Web3Plugin } from '@masknet/plugin-infra/web3'
-import { ProviderIconClickBait } from '../components/ProviderIconClickBait'
-
-export const Web3UI: Web3Plugin.UI.UI = {
-    SelectProviderDialog: {
-        ProviderIconClickBait,
-    },
-    WalletStatusDialog: {},
-}
diff --git a/packages/plugins/Flow/src/UI/components/ProviderIconClickBait.tsx b/packages/plugins/Flow/src/UI/components/ProviderIconClickBait.tsx
deleted file mode 100644
index 81870f244672..000000000000
--- a/packages/plugins/Flow/src/UI/components/ProviderIconClickBait.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import { useCallback, cloneElement, isValidElement } from 'react'
-import { NetworkPluginID, useChainId, Web3Plugin } from '@masknet/plugin-infra/web3'
-import { useFCL } from '@masknet/web3-shared-flow'
-import { getStorage } from '../../storage'
-
-export function ProviderIconClickBait({
-    network,
-    provider,
-    children,
-    onSubmit,
-    onClick,
-}: Web3Plugin.UI.ProviderIconClickBaitProps) {
-    const chainId = useChainId(NetworkPluginID.PLUGIN_FLOW)
-    const fcl = useFCL(chainId)
-
-    const onLogIn = useCallback(async () => {
-        onClick?.(network, provider)
-        const user = await fcl.logIn()
-
-        if (user?.addr) {
-            await getStorage().user.setValue(user)
-            onSubmit?.(network, provider)
-        }
-    }, [fcl, network, provider, onClick, onSubmit])
-
-    return (
-        <>
-            {isValidElement<object>(children)
-                ? cloneElement(children, {
-                      ...children.props,
-                      ...{
-                          onClick: onLogIn,
-                      },
-                  })
-                : children}
-        </>
-    )
-}
diff --git a/packages/plugins/Flow/src/apis/getFungibleAssets.ts b/packages/plugins/Flow/src/apis/fungibleAssets.ts
similarity index 65%
rename from packages/plugins/Flow/src/apis/getFungibleAssets.ts
rename to packages/plugins/Flow/src/apis/fungibleAssets.ts
index 8888c2d0fb8f..fcb4b1e88587 100644
--- a/packages/plugins/Flow/src/apis/getFungibleAssets.ts
+++ b/packages/plugins/Flow/src/apis/fungibleAssets.ts
@@ -1,8 +1,7 @@
-import { Pagination, Web3Plugin, CurrencyType } from '@masknet/plugin-infra/web3'
-import { ChainId, createClient, getTokenConstants } from '@masknet/web3-shared-flow'
+import { ChainId, createClient, getTokenConstants, SchemaType } from '@masknet/web3-shared-flow'
+import { FungibleAsset, CurrencyType, Pageable, rightShift, HubOptions } from '@masknet/web3-shared-base'
 import { CoinGecko } from '@masknet/web3-providers'
 import { createFungibleAsset, createFungibleToken } from '../helpers'
-import { rightShift } from '@masknet/web3-shared-base'
 
 async function getTokenBalance(
     chainId: ChainId,
@@ -55,10 +54,18 @@ async function getAssetFUSD(chainId: ChainId, account: string) {
         storageKey: 'fusdBalance',
     })
     return createFungibleAsset(
-        createFungibleToken(chainId, FUSD_ADDRESS, 'Flow USD', 'FUSD', 8),
+        createFungibleToken(
+            chainId,
+            FUSD_ADDRESS,
+            'Flow USD',
+            'FUSD',
+            8,
+            new URL('../assets/FUSD.png', import.meta.url).toString(),
+        ),
         balance,
-        new URL('../assets/FUSD.png', import.meta.url).toString(),
-        price,
+        {
+            [CurrencyType.USD]: price.toString(),
+        },
     )
 }
 
@@ -73,10 +80,18 @@ async function getAssetFLOW(chainId: ChainId, account: string) {
     })
 
     return createFungibleAsset(
-        createFungibleToken(chainId, FLOW_ADDRESS, 'Flow', 'FLOW', 8),
+        createFungibleToken(
+            chainId,
+            FLOW_ADDRESS,
+            'Flow',
+            'FLOW',
+            8,
+            new URL('../assets/flow.png', import.meta.url).toString(),
+        ),
         balance,
-        new URL('../assets/flow.png', import.meta.url).toString(),
-        price,
+        {
+            [CurrencyType.USD]: price.toString(),
+        },
     )
 }
 
@@ -91,26 +106,37 @@ async function getAssetTether(chainId: ChainId, account: string) {
     })
 
     return createFungibleAsset(
-        createFungibleToken(chainId, TETHER_ADDRESS, 'Tether USD', 'tUSD', 8),
+        createFungibleToken(
+            chainId,
+            TETHER_ADDRESS,
+            'Tether USD',
+            'tUSD',
+            8,
+            new URL('../assets/tUSD.png', import.meta.url).toString(),
+        ),
         balance,
-        new URL('../assets/tUSD.png', import.meta.url).toString(),
-        price,
+        {
+            [CurrencyType.USD]: price.toString(),
+        },
     )
 }
 
 export async function getFungibleAssets(
+    chainId: ChainId,
     address: string,
-    provider: string,
-    network: Web3Plugin.NetworkDescriptor,
-    pagination?: Pagination,
-): Promise<Array<Web3Plugin.Asset<Web3Plugin.FungibleToken>>> {
+    options?: HubOptions<ChainId>,
+): Promise<Pageable<FungibleAsset<ChainId, SchemaType>>> {
     const allSettled = await Promise.allSettled([
-        getAssetFLOW(network.chainId, address),
-        getAssetFUSD(network.chainId, address),
-        getAssetTether(network.chainId, address),
+        getAssetFLOW(chainId, address),
+        getAssetFUSD(chainId, address),
+        getAssetTether(chainId, address),
     ])
 
-    return allSettled.map((x) => (x.status === 'fulfilled' ? x.value : null)).filter(Boolean) as Array<
-        Web3Plugin.Asset<Web3Plugin.FungibleToken>
-    >
+    return {
+        currentPage: 0,
+        data: allSettled.map((x) => (x.status === 'fulfilled' ? x.value : null)).filter(Boolean) as Array<
+            FungibleAsset<ChainId, SchemaType>
+        >,
+        hasNextPage: false,
+    }
 }
diff --git a/packages/plugins/Flow/src/apis/index.ts b/packages/plugins/Flow/src/apis/index.ts
index 9be04ef09ad9..3ce5568d9491 100644
--- a/packages/plugins/Flow/src/apis/index.ts
+++ b/packages/plugins/Flow/src/apis/index.ts
@@ -1 +1 @@
-export * from './getFungibleAssets'
+export * from './fungibleAssets'
diff --git a/packages/plugins/Flow/src/base.ts b/packages/plugins/Flow/src/base.ts
index b4174881abd1..4f2f1a8b7f03 100644
--- a/packages/plugins/Flow/src/base.ts
+++ b/packages/plugins/Flow/src/base.ts
@@ -1,8 +1,15 @@
 import type { Plugin } from '@masknet/plugin-infra'
+import {
+    NETWORK_DESCRIPTORS,
+    PROVIDER_DESCRIPTORS,
+    ChainId,
+    NetworkType,
+    ProviderType,
+} from '@masknet/web3-shared-flow'
 import { languages } from './locales/languages'
-import { PLUGIN_ID, PLUGIN_NAME, PLUGIN_DESCRIPTION, PLUGIN_PROVIDERS, PLUGIN_NETWORKS } from './constants'
+import { PLUGIN_ID, PLUGIN_NAME, PLUGIN_DESCRIPTION } from './constants'
 
-export const base: Plugin.Shared.Definition = {
+export const base: Plugin.Shared.Definition<ChainId, ProviderType, NetworkType> = {
     ID: PLUGIN_ID,
     name: { fallback: PLUGIN_NAME },
     description: { fallback: PLUGIN_DESCRIPTION },
@@ -13,7 +20,6 @@ export const base: Plugin.Shared.Definition = {
         target: 'stable',
     },
     i18n: languages,
-    declareApplicationCategories: [],
-    declareWeb3Networks: PLUGIN_NETWORKS,
-    declareWeb3Providers: PLUGIN_PROVIDERS,
+    declareWeb3Networks: NETWORK_DESCRIPTORS,
+    declareWeb3Providers: PROVIDER_DESCRIPTORS,
 }
diff --git a/packages/plugins/Flow/src/constants.ts b/packages/plugins/Flow/src/constants.ts
index 6661cd9388ca..99090a195428 100644
--- a/packages/plugins/Flow/src/constants.ts
+++ b/packages/plugins/Flow/src/constants.ts
@@ -1,38 +1,5 @@
-import { PluginId } from '@masknet/plugin-infra'
-import type { Web3Plugin } from '@masknet/plugin-infra/web3'
-import { ChainId, NetworkType, ProviderType } from '@masknet/web3-shared-flow/types'
+import { NetworkPluginID } from '@masknet/web3-shared-base'
 
-export const PLUGIN_ID = PluginId.Flow
+export const PLUGIN_ID = NetworkPluginID.PLUGIN_FLOW
 export const PLUGIN_NAME = 'Flow Chain'
 export const PLUGIN_DESCRIPTION = ''
-export const PLUGIN_NETWORKS: Web3Plugin.NetworkDescriptor[] = [
-    {
-        ID: `${PLUGIN_ID}_flow`,
-        networkSupporterPluginID: PLUGIN_ID,
-        chainId: ChainId.Mainnet,
-        type: NetworkType.Flow,
-        name: 'Flow',
-        icon: new URL('./assets/flow.png', import.meta.url),
-        iconColor: 'rgb(54, 173, 104)',
-        isMainnet: true,
-    },
-    {
-        ID: `${PLUGIN_ID}_flow_testnet`,
-        networkSupporterPluginID: PLUGIN_ID,
-        chainId: ChainId.Testnet,
-        type: NetworkType.Flow,
-        name: 'Flow Testnet',
-        icon: new URL('./assets/flow.png', import.meta.url),
-        iconColor: 'rgb(54, 173, 104)',
-        isMainnet: false,
-    },
-]
-export const PLUGIN_PROVIDERS: Web3Plugin.ProviderDescriptor[] = [
-    {
-        ID: `${PLUGIN_ID}_blocto`,
-        providerAdaptorPluginID: PLUGIN_ID,
-        type: ProviderType.Blocto,
-        name: 'Blocto',
-        icon: new URL('./assets/blocto.png', import.meta.url),
-    },
-]
diff --git a/packages/plugins/Flow/src/env.d.ts b/packages/plugins/Flow/src/env.d.ts
index 42660bb866d7..9870cc5eb167 100644
--- a/packages/plugins/Flow/src/env.d.ts
+++ b/packages/plugins/Flow/src/env.d.ts
@@ -1,36 +1,2 @@
+/// <reference types="@masknet/web3-shared-flow/env" />
 /// <reference types="@masknet/global-types/webpack" />
-
-declare module '@blocto/fcl' {
-    export interface User {
-        addr: string | null
-        f_type: 'User'
-        f_vsn: string
-        loggedIn: boolean | null
-    }
-
-    export interface Account {
-        address: string
-        balance: string
-        code: string
-    }
-
-    export const config: (setup: Record<string, any>) => {}
-    export const currentUser: () => {
-        subscribe: (callback: (user: User) => void) => void
-        snapshot: () => Promise<User | null>
-        authenticate: () => {}
-        unauthenticate: () => {}
-    }
-    export const subscribe: (callback: (user: User) => void) => void
-    export const snapshot: () => User
-    export const authenticate: () => {}
-    export const unauthenticate: () => {}
-    export const logIn: () => Promise<User | null>
-    export const logOut: () => {}
-    export const signUp: () => {}
-
-    export const send: (data: string[]) => Promise<any>
-    export const script: (text: string) => string
-    export const query: (options: { cadence: string; args: (arg: any, t: any) => any[] }) => Promise<any>
-    export const getAccount: (address: string) => string
-}
diff --git a/packages/plugins/Flow/src/helpers/formatter.ts b/packages/plugins/Flow/src/helpers/formatter.ts
index 8d95ec3d229a..ad79b33c33d8 100644
--- a/packages/plugins/Flow/src/helpers/formatter.ts
+++ b/packages/plugins/Flow/src/helpers/formatter.ts
@@ -3,3 +3,12 @@ export function formatAddress(address: string, size = 0) {
     if (size === 0 || size >= 8) return address
     return `${address.slice(0, Math.max(0, 2 + size))}...${address.slice(-size)}`
 }
+
+export function isValidAddress(address: string) {
+    return /0x\w{16}/.test(address)
+}
+
+export function isSameAddress(a?: string, b?: string) {
+    if (!a || !b) return false
+    return a.toLowerCase() === b.toLowerCase()
+}
diff --git a/packages/plugins/Flow/src/helpers/token.ts b/packages/plugins/Flow/src/helpers/token.ts
index fe40789fa8a8..c6a217fe1f4d 100644
--- a/packages/plugins/Flow/src/helpers/token.ts
+++ b/packages/plugins/Flow/src/helpers/token.ts
@@ -1,6 +1,12 @@
-import { CurrencyType, TokenType, Web3Plugin } from '@masknet/plugin-infra/web3'
-import { leftShift, multipliedBy } from '@masknet/web3-shared-base'
-import type { ChainId } from '@masknet/web3-shared-flow'
+import {
+    CurrencyType,
+    TokenType,
+    FungibleAsset,
+    FungibleToken,
+    leftShift,
+    multipliedBy,
+} from '@masknet/web3-shared-base'
+import { ChainId, SchemaType } from '@masknet/web3-shared-flow'
 
 export function createFungibleToken(
     chainId: ChainId,
@@ -8,33 +14,32 @@ export function createFungibleToken(
     name: string,
     symbol: string,
     decimals: number,
-): Web3Plugin.FungibleToken {
+    logoURL?: string,
+): FungibleToken<ChainId, SchemaType> {
     return {
         id: address,
         chainId,
         type: TokenType.Fungible,
+        schema: SchemaType.Fungible,
         address,
         name,
         symbol,
         decimals,
+        logoURL,
     }
 }
 
 export function createFungibleAsset(
-    token: Web3Plugin.FungibleToken,
+    token: FungibleToken<ChainId, SchemaType>,
     balance: string,
-    logoURI?: string,
     price?: { [key in CurrencyType]?: string },
-): Web3Plugin.Asset {
+): FungibleAsset<ChainId, SchemaType> {
     return {
-        id: token.address,
-        chainId: token.chainId,
+        ...token,
         balance: leftShift(balance, 8).toFixed(),
-        token,
-        logoURI,
+        price,
         value: {
             [CurrencyType.USD]: multipliedBy(price?.usd ?? 0, leftShift(balance, 8)).toFixed(),
         },
-        price,
     }
 }
diff --git a/packages/plugins/Flow/src/index.ts b/packages/plugins/Flow/src/index.ts
index 48ab76cba202..ea158647588c 100644
--- a/packages/plugins/Flow/src/index.ts
+++ b/packages/plugins/Flow/src/index.ts
@@ -1,7 +1,36 @@
 import { registerPlugin } from '@masknet/plugin-infra'
+import type {
+    ChainId,
+    NetworkType,
+    ProviderType,
+    SchemaType,
+    Signature,
+    GasOption,
+    Block,
+    Transaction,
+    TransactionDetailed,
+    TransactionParameter,
+    TransactionSignature,
+    Web3,
+    TransactionReceipt,
+} from '@masknet/web3-shared-flow'
 import { base } from './base'
 
-registerPlugin({
+registerPlugin<
+    ChainId,
+    SchemaType,
+    ProviderType,
+    NetworkType,
+    Signature,
+    GasOption,
+    Block,
+    Transaction,
+    TransactionReceipt,
+    TransactionDetailed,
+    TransactionSignature,
+    TransactionParameter,
+    Web3
+>({
     ...base,
     SNSAdaptor: {
         load: () => import('./UI/SNSAdaptor'),
diff --git a/packages/plugins/Flow/src/settings/index.ts b/packages/plugins/Flow/src/settings/index.ts
new file mode 100644
index 000000000000..e279955c396e
--- /dev/null
+++ b/packages/plugins/Flow/src/settings/index.ts
@@ -0,0 +1,6 @@
+import type { Plugin } from '@masknet/plugin-infra'
+import { createValueRefWithReady } from '@masknet/shared-base'
+import type { FlowWeb3State } from '../state/Connection/types'
+
+export const Web3StateSettings = createValueRefWithReady<FlowWeb3State>(null!)
+export const SharedContextSettings = createValueRefWithReady<Plugin.Shared.SharedContext>(null!)
diff --git a/packages/plugins/Flow/src/state/AddressBook.ts b/packages/plugins/Flow/src/state/AddressBook.ts
new file mode 100644
index 000000000000..60c547b8bd92
--- /dev/null
+++ b/packages/plugins/Flow/src/state/AddressBook.ts
@@ -0,0 +1,25 @@
+import type { Subscription } from 'use-subscription'
+import { getEnumAsArray } from '@dimensiondev/kit'
+import type { Plugin } from '@masknet/plugin-infra'
+import { AddressBookState } from '@masknet/plugin-infra/web3'
+import { ChainId } from '@masknet/web3-shared-flow'
+import { isSameAddress, isValidAddress, formatAddress } from '../helpers'
+
+export class AddressBook extends AddressBookState<ChainId, Record<ChainId, string[]>> {
+    constructor(
+        protected override context: Plugin.Shared.SharedContext,
+        protected override subscriptions: {
+            chainId?: Subscription<ChainId>
+        },
+    ) {
+        const defaultValue = Object.fromEntries(
+            getEnumAsArray(ChainId).map((x) => [x.value, []] as [ChainId, string[]]),
+        ) as Record<ChainId, string[]>
+
+        super(context, defaultValue, subscriptions, {
+            isValidAddress,
+            isSameAddress,
+            formatAddress,
+        })
+    }
+}
diff --git a/packages/plugins/Flow/src/state/Connection.ts b/packages/plugins/Flow/src/state/Connection.ts
new file mode 100644
index 000000000000..c444bde252e9
--- /dev/null
+++ b/packages/plugins/Flow/src/state/Connection.ts
@@ -0,0 +1,46 @@
+import type { Subscription } from 'use-subscription'
+import type { CurrentUserObject } from '@blocto/fcl'
+import type { Plugin } from '@masknet/plugin-infra'
+import { ConnectionState } from '@masknet/plugin-infra/web3'
+import type {
+    ChainId,
+    ProviderType,
+    SchemaType,
+    Web3,
+    Signature,
+    Block,
+    Transaction,
+    TransactionDetailed,
+    Web3Provider,
+} from '@masknet/web3-shared-flow'
+import { createConnection } from './Connection/connection'
+
+export interface ConnectionStorage {
+    chainId: ChainId
+    user: CurrentUserObject | null
+}
+
+export class Connection extends ConnectionState<
+    ChainId,
+    SchemaType,
+    ProviderType,
+    Signature,
+    Block,
+    Transaction,
+    never,
+    TransactionDetailed,
+    never,
+    Web3,
+    Web3Provider
+> {
+    constructor(
+        private context: Plugin.Shared.SharedContext,
+        subscription: {
+            account?: Subscription<string>
+            chainId?: Subscription<ChainId>
+            providerType?: Subscription<ProviderType>
+        },
+    ) {
+        super(createConnection, subscription)
+    }
+}
diff --git a/packages/plugins/Flow/src/state/Connection/connection.ts b/packages/plugins/Flow/src/state/Connection/connection.ts
new file mode 100644
index 000000000000..418a443d0978
--- /dev/null
+++ b/packages/plugins/Flow/src/state/Connection/connection.ts
@@ -0,0 +1,225 @@
+import { first } from 'lodash-unified'
+import { unreachable } from '@dimensiondev/kit'
+import type { BlockObject, CompositeSignature, MutateOptions, QueryOptions } from '@blocto/fcl'
+import { ChainId, ProviderType, SchemaType, TransactionStatusCode } from '@masknet/web3-shared-flow'
+import {
+    Account,
+    FungibleToken,
+    NonFungibleToken,
+    NonFungibleTokenCollection,
+    NonFungibleTokenContract,
+    TransactionStatusType,
+} from '@masknet/web3-shared-base'
+import { Providers } from './provider'
+import type { FlowWeb3Connection as BaseConnection, FlowConnectionOptions } from './types'
+import { Web3StateSettings } from '../../settings'
+
+class Connection implements BaseConnection {
+    constructor(private chainId: ChainId, private account: string, private providerType: ProviderType) {}
+
+    private _getWeb3Provider(options?: FlowConnectionOptions) {
+        return Providers[options?.providerType ?? this.providerType]
+    }
+    getWeb3(options?: FlowConnectionOptions) {
+        return this._getWeb3Provider(options).createWeb3(options?.chainId ?? this.chainId)
+    }
+    getWeb3Provider(options?: FlowConnectionOptions) {
+        return this._getWeb3Provider(options).createWeb3Provider(options?.chainId ?? this.chainId)
+    }
+    async connect(options?: FlowConnectionOptions): Promise<Account<ChainId>> {
+        return {
+            account: '',
+            chainId: ChainId.Mainnet,
+            ...(await Web3StateSettings.value.Provider?.connect(
+                options?.chainId ?? this.chainId,
+                options?.providerType ?? this.providerType,
+            )),
+        }
+    }
+    async disconnect(options?: FlowConnectionOptions): Promise<void> {
+        await Web3StateSettings.value.Provider?.disconnect(options?.providerType ?? this.providerType)
+    }
+    getGasPrice(options?: FlowConnectionOptions): Promise<string> {
+        throw new Error('Method not implemented.')
+    }
+    getSchemaType(address: string, options?: FlowConnectionOptions): Promise<SchemaType> {
+        throw new Error('Method not implemented.')
+    }
+    getNonFungibleTokenContract(
+        address: string,
+        id: string,
+        options?: FlowConnectionOptions,
+    ): Promise<NonFungibleTokenContract<ChainId, SchemaType>> {
+        throw new Error('Method not implemented.')
+    }
+    getNonFungibleTokenCollection(
+        address: string,
+        options?: FlowConnectionOptions,
+    ): Promise<NonFungibleTokenCollection<ChainId>> {
+        throw new Error('Method not implemented.')
+    }
+    getBlock(no: number, options?: FlowConnectionOptions): Promise<BlockObject> {
+        throw new Error('Method not implemented.')
+    }
+    getBlockTimestamp(options?: FlowConnectionOptions): Promise<number> {
+        throw new Error('Method not implemented.')
+    }
+    transferFungibleToken(
+        address: string,
+        recipient: string,
+        amount: string,
+        memo?: string,
+        options?: FlowConnectionOptions,
+    ): Promise<string> {
+        throw new Error('Method not implemented.')
+    }
+    transferNonFungibleToken(
+        address: string,
+        recipient: string,
+        tokenId: string,
+        amount: string,
+        options?: FlowConnectionOptions,
+    ): Promise<string> {
+        throw new Error('Method not implemented.')
+    }
+    getNativeToken(options?: FlowConnectionOptions): Promise<FungibleToken<ChainId, SchemaType>> {
+        throw new Error('Method not implemented.')
+    }
+    getNativeTokenBalance(options?: FlowConnectionOptions): Promise<string> {
+        throw new Error('Method not implemented.')
+    }
+    getFungibleTokenBalance(address: string, options?: FlowConnectionOptions): Promise<string> {
+        throw new Error('Method not implemented.')
+    }
+    getNonFungibleTokenBalance(address: string, options?: FlowConnectionOptions): Promise<string> {
+        throw new Error('Method not implemented.')
+    }
+    getFungibleTokensBalance(
+        listOfAddress: string[],
+        options?: FlowConnectionOptions,
+    ): Promise<Record<string, string>> {
+        throw new Error('Method not implemented.')
+    }
+    getNonFungibleTokensBalance(
+        listOfAddress: string[],
+        options?: FlowConnectionOptions,
+    ): Promise<Record<string, string>> {
+        throw new Error('Method not implemented.')
+    }
+    getCode(address: string, options?: FlowConnectionOptions): Promise<string> {
+        throw new Error('Method not implemented.')
+    }
+
+    getFungibleToken(address: string, options?: FlowConnectionOptions): Promise<FungibleToken<ChainId, SchemaType>> {
+        throw new Error('Method not implemented.')
+    }
+    getNonFungibleToken(
+        address: string,
+        id: string,
+        options?: FlowConnectionOptions,
+    ): Promise<NonFungibleToken<ChainId, SchemaType>> {
+        throw new Error('Method not implemented.')
+    }
+
+    async getAccount(options?: FlowConnectionOptions): Promise<string> {
+        const web3 = await this.getWeb3(options)
+        return web3.currentUser().addr ?? ''
+    }
+    async getChainId(options?: FlowConnectionOptions): Promise<ChainId> {
+        return options?.chainId ?? this.chainId
+    }
+    async getBlockNumber(options?: FlowConnectionOptions): Promise<number> {
+        const web3 = await this.getWeb3(options)
+        const blockHeader = await web3.getBlockHeader()
+        return blockHeader.height
+    }
+    async getBalance(address: string, options?: FlowConnectionOptions): Promise<string> {
+        const web3 = await this.getWeb3(options)
+        const account = await web3.getAccount(address)
+        return account.balance.toFixed()
+    }
+    async getTransaction(id: string, options?: FlowConnectionOptions) {
+        const web3 = await this.getWeb3(options)
+        return web3.getTransaction(id)
+    }
+    async getTransactionReceipt(id: string, options?: FlowConnectionOptions) {
+        return null
+    }
+    async getTransactionStatus(id: string, options?: FlowConnectionOptions): Promise<TransactionStatusType> {
+        const web3 = await this.getWeb3(options)
+        const { status } = await web3.getTransactionStatus(id)
+        const status_ = status as TransactionStatusCode
+        switch (status_) {
+            case TransactionStatusCode.UNKNOWN:
+                return TransactionStatusType.NOT_DEPEND
+            case TransactionStatusCode.PENDING:
+            case TransactionStatusCode.FINALIZED:
+            case TransactionStatusCode.EXECUTED:
+                return TransactionStatusType.NOT_DEPEND
+            case TransactionStatusCode.SEALED:
+                return TransactionStatusType.NOT_DEPEND
+            case TransactionStatusCode.EXPIRED:
+                return TransactionStatusType.FAILED
+            default:
+                unreachable(status_)
+        }
+    }
+    async getTransactionNonce(address: string, options?: FlowConnectionOptions): Promise<number> {
+        const web3 = await this.getWeb3(options)
+        const account = await web3.getAccount(address)
+        const key = first(account.keys)
+        return key?.sequenceNumber ?? 0
+    }
+    switchChain(options?: FlowConnectionOptions): Promise<void> {
+        throw new Error('Method not implemented.')
+    }
+    async signMessage(dataToSign: string, signType?: string, options?: FlowConnectionOptions) {
+        const web3 = await this.getWeb3(options)
+        return web3.currentUser.signUserMessage(dataToSign)
+    }
+    async verifyMessage(
+        dataToVerify: string,
+        signature: CompositeSignature[],
+        signType?: string,
+        options?: FlowConnectionOptions,
+    ): Promise<boolean> {
+        const web3 = await this.getWeb3(options)
+        return web3.verifyUserSignatures(dataToVerify, signature)
+    }
+    async callTransaction(query: QueryOptions, options?: FlowConnectionOptions) {
+        const web3 = await this.getWeb3(options)
+        return web3.query(query)
+    }
+    async sendTransaction(mutation: MutateOptions, options?: FlowConnectionOptions): Promise<string> {
+        const web3 = await this.getWeb3(options)
+        const id = await web3.mutate(mutation)
+        await web3.tx(id).onceSealed()
+        return id
+    }
+    signTransaction(mutation: MutateOptions, options?: FlowConnectionOptions): Promise<never> {
+        throw new Error('Method not implemented.')
+    }
+    signTransactions(mutations: MutateOptions[], options?: FlowConnectionOptions): Promise<never> {
+        throw new Error('Method not implemented.')
+    }
+    sendSignedTransaction(signature: never, options?: FlowConnectionOptions): Promise<string> {
+        throw new Error('Method not implemented.')
+    }
+    confirmRequest?: ((options?: FlowConnectionOptions) => Promise<void>) | undefined
+    rejectRequest?: ((options?: FlowConnectionOptions) => Promise<void>) | undefined
+    replaceRequest(hash: string, config: MutateOptions, options?: FlowConnectionOptions): Promise<void> {
+        throw new Error('Method not implemented.')
+    }
+    cancelRequest(hash: string, config: MutateOptions, options?: FlowConnectionOptions): Promise<void> {
+        throw new Error('Method not implemented.')
+    }
+}
+
+/**
+ * Build connection with provider.
+ * @param providerType
+ * @returns
+ */
+export function createConnection(chainId = ChainId.Mainnet, account = '', providerType = ProviderType.Blocto) {
+    return new Connection(chainId, account, providerType)
+}
diff --git a/packages/plugins/Flow/src/state/Connection/provider.ts b/packages/plugins/Flow/src/state/Connection/provider.ts
new file mode 100644
index 000000000000..818fa172c3b4
--- /dev/null
+++ b/packages/plugins/Flow/src/state/Connection/provider.ts
@@ -0,0 +1,11 @@
+import { ProviderType } from '@masknet/web3-shared-flow'
+import type { BaseProvider } from './providers/Base'
+import { BloctoProvider } from './providers/Blocto'
+import { DapperProvider } from './providers/Dapper'
+import { LedgerProvider } from './providers/Ledger'
+
+export const Providers: Record<ProviderType, BaseProvider> = {
+    [ProviderType.Blocto]: new BloctoProvider(),
+    [ProviderType.Dapper]: new DapperProvider(),
+    [ProviderType.Ledger]: new LedgerProvider(),
+}
diff --git a/packages/plugins/Flow/src/state/Connection/providers/Base.ts b/packages/plugins/Flow/src/state/Connection/providers/Base.ts
new file mode 100644
index 000000000000..0c48abf5757f
--- /dev/null
+++ b/packages/plugins/Flow/src/state/Connection/providers/Base.ts
@@ -0,0 +1,34 @@
+import { Emitter } from '@servie/events'
+import type { Account, ProviderEvents } from '@masknet/web3-shared-base'
+import type { ChainId, ProviderType, Web3, Web3Provider } from '@masknet/web3-shared-flow'
+import type { FlowProvider } from '../types'
+
+export class BaseProvider implements FlowProvider {
+    emitter = new Emitter<ProviderEvents<ChainId, ProviderType>>()
+
+    // No need to wait by default
+    get ready() {
+        return true
+    }
+
+    // No need to wait by default
+    get readyPromise() {
+        return Promise.resolve()
+    }
+
+    switchChain(chainId?: ChainId): Promise<void> {
+        throw new Error('Method not implemented.')
+    }
+    createWeb3(chainId?: ChainId): Promise<Web3> {
+        throw new Error('Method not implemented.')
+    }
+    createWeb3Provider(chainId?: ChainId): Promise<Web3Provider> {
+        throw new Error('Method not implemented.')
+    }
+    connect(chainId?: ChainId): Promise<Account<ChainId>> {
+        throw new Error('Method not implemented.')
+    }
+    disconnect(): Promise<void> {
+        throw new Error('Method not implemented.')
+    }
+}
diff --git a/packages/plugins/Flow/src/state/Connection/providers/Blocto.ts b/packages/plugins/Flow/src/state/Connection/providers/Blocto.ts
new file mode 100644
index 000000000000..4fdfa296554b
--- /dev/null
+++ b/packages/plugins/Flow/src/state/Connection/providers/Blocto.ts
@@ -0,0 +1,24 @@
+import { ChainId, createClient } from '@masknet/web3-shared-flow'
+import type { FlowProvider } from '../types'
+import { BaseProvider } from './Base'
+
+export class BloctoProvider extends BaseProvider implements FlowProvider {
+    override async createWeb3(chainId = ChainId.Mainnet) {
+        return createClient(chainId)
+    }
+
+    override async connect(chainId = ChainId.Mainnet) {
+        const fcl = await this.createWeb3(chainId)
+
+        const user = await fcl.logIn()
+
+        return {
+            chainId,
+            account: user.addr,
+        }
+    }
+
+    override async disconnect() {
+        // do nothing
+    }
+}
diff --git a/packages/plugins/Flow/src/state/Connection/providers/Dapper.ts b/packages/plugins/Flow/src/state/Connection/providers/Dapper.ts
new file mode 100644
index 000000000000..31b8ac2dd0fc
--- /dev/null
+++ b/packages/plugins/Flow/src/state/Connection/providers/Dapper.ts
@@ -0,0 +1,4 @@
+import type { FlowProvider } from '../types'
+import { BaseProvider } from './Base'
+
+export class DapperProvider extends BaseProvider implements FlowProvider {}
diff --git a/packages/plugins/Flow/src/state/Connection/providers/Ledger.ts b/packages/plugins/Flow/src/state/Connection/providers/Ledger.ts
new file mode 100644
index 000000000000..d01372059a42
--- /dev/null
+++ b/packages/plugins/Flow/src/state/Connection/providers/Ledger.ts
@@ -0,0 +1,4 @@
+import type { FlowProvider } from '../types'
+import { BaseProvider } from './Base'
+
+export class LedgerProvider extends BaseProvider implements FlowProvider {}
diff --git a/packages/plugins/Flow/src/state/Connection/types.ts b/packages/plugins/Flow/src/state/Connection/types.ts
new file mode 100644
index 000000000000..e805d81720c5
--- /dev/null
+++ b/packages/plugins/Flow/src/state/Connection/types.ts
@@ -0,0 +1,11 @@
+import type { Web3Helper } from '@masknet/plugin-infra/web3'
+import type { NetworkPluginID, WalletProvider } from '@masknet/web3-shared-base'
+import type { ChainId, ProviderType, Web3, Web3Provider } from '@masknet/web3-shared-flow'
+
+export interface FlowProvider extends WalletProvider<ChainId, ProviderType, Web3Provider, Web3> {}
+
+export interface FlowWeb3State extends Web3Helper.Web3State<NetworkPluginID.PLUGIN_FLOW> {}
+
+export interface FlowWeb3Connection extends Web3Helper.Web3Connection<NetworkPluginID.PLUGIN_FLOW> {}
+
+export interface FlowConnectionOptions extends Web3Helper.Web3ConnectionOptions<NetworkPluginID.PLUGIN_FLOW> {}
diff --git a/packages/plugins/Flow/src/state/Hub.ts b/packages/plugins/Flow/src/state/Hub.ts
new file mode 100644
index 000000000000..bdb13bae62c7
--- /dev/null
+++ b/packages/plugins/Flow/src/state/Hub.ts
@@ -0,0 +1,20 @@
+import type { Plugin } from '@masknet/plugin-infra'
+import type { Subscription } from 'use-subscription'
+import { HubState } from '@masknet/plugin-infra/web3'
+import type { CurrencyType, SourceType } from '@masknet/web3-shared-base'
+import type { ChainId, GasOption, SchemaType } from '@masknet/web3-shared-flow'
+import { createHub } from './Hub/hub'
+
+export class Hub extends HubState<ChainId, SchemaType, GasOption> {
+    constructor(
+        private context: Plugin.Shared.SharedContext,
+        subscription: {
+            account?: Subscription<string>
+            chainId?: Subscription<ChainId>
+            sourceType?: Subscription<SourceType>
+            currencyType?: Subscription<CurrencyType>
+        },
+    ) {
+        super(createHub, subscription)
+    }
+}
diff --git a/packages/plugins/Flow/src/state/Hub/hub.ts b/packages/plugins/Flow/src/state/Hub/hub.ts
new file mode 100644
index 000000000000..f7fb0d5ae65d
--- /dev/null
+++ b/packages/plugins/Flow/src/state/Hub/hub.ts
@@ -0,0 +1,172 @@
+import { CoinGecko } from '@masknet/web3-providers'
+import type {
+    FungibleToken,
+    NonFungibleToken,
+    SourceType,
+    CurrencyType,
+    FungibleAsset,
+    HubOptions,
+    NonFungibleAsset,
+    Pageable,
+    GasOptionType,
+    Transaction,
+} from '@masknet/web3-shared-base'
+import { ChainId, GasOption, getTokenConstants, SchemaType } from '@masknet/web3-shared-flow'
+import { createFungibleToken } from '../../helpers'
+import { FlowRPC } from '../../messages'
+import type { FlowHub } from './types'
+
+class Hub implements FlowHub {
+    constructor(
+        private chainId: ChainId,
+        private account: string,
+        private sourceType?: SourceType,
+        private currencyType?: CurrencyType,
+        private sizePerPage = 50,
+        private maxPageSize = 25,
+    ) {}
+
+    async getFungibleTokensFromTokenList(
+        chainId: ChainId,
+        options?: HubOptions<ChainId> | undefined,
+    ): Promise<Array<FungibleToken<ChainId, SchemaType>>> {
+        const { FLOW_ADDRESS = '', FUSD_ADDRESS = '', TETHER_ADDRESS = '' } = getTokenConstants(chainId)
+        return [
+            createFungibleToken(
+                chainId,
+                FLOW_ADDRESS,
+                'Flow',
+                'FLOW',
+                8,
+                new URL('../../assets/flow.png', import.meta.url).toString(),
+            ),
+            createFungibleToken(
+                chainId,
+                FUSD_ADDRESS,
+                'Flow USD',
+                'FUSD',
+                8,
+                new URL('../../assets/FUSD.png', import.meta.url).toString(),
+            ),
+            createFungibleToken(
+                chainId,
+                TETHER_ADDRESS,
+                'Tether USD',
+                'tUSD',
+                8,
+                new URL('../../assets/tUSD.png', import.meta.url).toString(),
+            ),
+        ]
+    }
+    async getNonFungibleTokensFromTokenList(
+        chainId: ChainId,
+        options?: HubOptions<ChainId> | undefined,
+    ): Promise<Array<NonFungibleToken<ChainId, SchemaType>>> {
+        throw new Error('Method not implemented.')
+    }
+    getGasOptions(
+        chainId: ChainId,
+        options?: HubOptions<ChainId> | undefined,
+    ): Promise<Record<GasOptionType, GasOption>> {
+        throw new Error('Method not implemented.')
+    }
+    getFungibleAsset(
+        address: string,
+        options?: HubOptions<ChainId> | undefined,
+    ): Promise<FungibleAsset<ChainId, SchemaType>> {
+        throw new Error('Method not implemented.')
+    }
+    async getFungibleAssets(
+        account: string,
+        options?: HubOptions<ChainId> | undefined,
+    ): Promise<Pageable<FungibleAsset<ChainId, SchemaType>>> {
+        return FlowRPC.getFungibleAssets(options?.chainId ?? this.chainId, account)
+    }
+    async getNonFungibleAsset(
+        address: string,
+        tokenId: string,
+        options?: HubOptions<ChainId> | undefined,
+    ): Promise<NonFungibleAsset<ChainId, SchemaType> | undefined> {
+        throw new Error('Method not implemented.')
+    }
+    getNonFungibleAssets(
+        account: string,
+        options?: HubOptions<ChainId> | undefined,
+    ): Promise<Pageable<NonFungibleAsset<ChainId, SchemaType>>> {
+        throw new Error('Method not implemented.')
+    }
+    getFungibleTokenPrice(
+        chainId: ChainId,
+        address: string,
+        options?: HubOptions<ChainId> | undefined,
+    ): Promise<number> {
+        return CoinGecko.getTokenPrice(address, options?.currencyType)
+    }
+    getNonFungibleTokenPrice(
+        chainId: ChainId,
+        address: string,
+        tokenId: string,
+        options?: HubOptions<ChainId> | undefined,
+    ): Promise<never> {
+        throw new Error('Method not implemented.')
+    }
+    async getFungibleTokenIconURLs(
+        chainId: ChainId,
+        address: string,
+        options?: HubOptions<ChainId> | undefined,
+    ): Promise<string[]> {
+        throw new Error('Method not implemented.')
+    }
+    getNonFungibleTokenIconURLs(
+        chainId: ChainId,
+        address: string,
+        tokenId?: string | undefined,
+        options?: HubOptions<ChainId> | undefined,
+    ): Promise<string[]> {
+        throw new Error('Method not implemented.')
+    }
+    getTransactions(
+        chainId: ChainId,
+        account: string,
+        options?: HubOptions<ChainId> | undefined,
+    ): Promise<Pageable<Transaction<ChainId, SchemaType>>> {
+        throw new Error('Method not implemented.')
+    }
+
+    async *getAllFungibleAssets(address: string): AsyncIterableIterator<FungibleAsset<ChainId, SchemaType>> {
+        for (let i = 0; i < this.maxPageSize; i += 1) {
+            const pageable = await this.getFungibleAssets(address, {
+                page: i,
+                size: this.sizePerPage,
+            })
+
+            yield* pageable.data
+
+            if (pageable.data.length === 0) return
+        }
+    }
+
+    async *getAllNonFungibleAssets(address: string): AsyncIterableIterator<NonFungibleAsset<ChainId, SchemaType>> {
+        for (let i = 0; i < this.maxPageSize; i += 1) {
+            const pageable = await this.getNonFungibleAssets(address, {
+                page: i,
+                size: this.sizePerPage,
+            })
+
+            yield* pageable.data
+
+            if (pageable.data.length === 0) return
+        }
+    }
+}
+
+export function createHub(
+    chainId = ChainId.Mainnet,
+    account = '',
+    sourceType?: SourceType,
+    currencyType?: CurrencyType,
+    sizePerPage?: number,
+    maxPageSize?: number,
+) {
+    return new Hub(chainId, account, sourceType, currencyType, sizePerPage, maxPageSize)
+}
diff --git a/packages/plugins/Flow/src/state/Hub/types.ts b/packages/plugins/Flow/src/state/Hub/types.ts
new file mode 100644
index 000000000000..f3add4026716
--- /dev/null
+++ b/packages/plugins/Flow/src/state/Hub/types.ts
@@ -0,0 +1,4 @@
+import type { Web3Helper } from '@masknet/plugin-infra/web3'
+import type { NetworkPluginID } from '@masknet/web3-shared-base'
+
+export interface FlowHub extends Web3Helper.Web3Hub<NetworkPluginID.PLUGIN_FLOW> {}
diff --git a/packages/plugins/Flow/src/state/Others.ts b/packages/plugins/Flow/src/state/Others.ts
new file mode 100644
index 000000000000..361c3b606350
--- /dev/null
+++ b/packages/plugins/Flow/src/state/Others.ts
@@ -0,0 +1,47 @@
+import type { Plugin } from '@masknet/plugin-infra'
+import { OthersState } from '@masknet/plugin-infra/web3'
+import { createExplorerResolver, isSameAddress } from '@masknet/web3-shared-base'
+import {
+    isValidDomain,
+    isValidAddress,
+    ChainId,
+    formatAddress,
+    formatDomainName,
+    ProviderType,
+    NetworkType,
+    SchemaType,
+    CHAIN_DESCRIPTORS,
+    NETWORK_DESCRIPTORS,
+    PROVIDER_DESCRIPTORS,
+} from '@masknet/web3-shared-flow'
+
+export class Others extends OthersState<ChainId, SchemaType, ProviderType, NetworkType> {
+    constructor(context: Plugin.Shared.SharedContext) {
+        super(context, {
+            defaultAddress: '',
+            defaultBlockDelay: 15,
+            chainDescriptors: CHAIN_DESCRIPTORS,
+            networkDescriptors: NETWORK_DESCRIPTORS,
+            providerDescriptors: PROVIDER_DESCRIPTORS,
+        })
+    }
+
+    override explorerResolver = createExplorerResolver(this.options.chainDescriptors, {
+        addressPathname: '/account/:address',
+        transactionPathname: '/transaction/:id',
+        fungibleTokenPathname: '/contract/:address',
+        nonFungibleTokenPathname: '/contract/:address',
+    })
+
+    resolveFungibleTokenLink(chainId: ChainId, address: string): string {
+        throw new Error('Method not implemented.')
+    }
+
+    override isValidDomain = isValidDomain
+    override isValidAddress = isValidAddress
+    override isSameAddress = isSameAddress
+
+    override formatAddress = formatAddress
+    override formatDomainName = formatDomainName
+    override formatTokenId = () => ''
+}
diff --git a/packages/plugins/Flow/src/state/Provider.ts b/packages/plugins/Flow/src/state/Provider.ts
new file mode 100644
index 000000000000..8105eebb6f50
--- /dev/null
+++ b/packages/plugins/Flow/src/state/Provider.ts
@@ -0,0 +1,48 @@
+import { getEnumAsArray } from '@dimensiondev/kit'
+import type { Plugin } from '@masknet/plugin-infra'
+import { ProviderState, ProviderStorage } from '@masknet/plugin-infra/web3'
+import { EnhanceableSite, ExtensionSite } from '@masknet/shared-base'
+import { Account, isSameAddress } from '@masknet/web3-shared-base'
+import {
+    chainResolver,
+    ChainId,
+    isValidAddress,
+    isValidChainId,
+    NetworkType,
+    ProviderType,
+    Web3,
+    Web3Provider,
+} from '@masknet/web3-shared-flow'
+import { Providers } from './Connection/provider'
+
+export class Provider extends ProviderState<ChainId, ProviderType, NetworkType, Web3Provider, Web3> {
+    constructor(override context: Plugin.Shared.SharedContext) {
+        const defaultValue: ProviderStorage<Account<ChainId>, ProviderType> = {
+            accounts: Object.fromEntries(
+                getEnumAsArray(ProviderType).map((x) => [
+                    x.value,
+                    {
+                        account: '',
+                        chainId: ChainId.Mainnet,
+                    },
+                ]),
+            ) as Record<ProviderType, Account<ChainId>>,
+            providers: Object.fromEntries(
+                [...getEnumAsArray(EnhanceableSite), ...getEnumAsArray(ExtensionSite)].map((x) => [
+                    x.value,
+                    ProviderType.Blocto,
+                ]),
+            ) as Record<EnhanceableSite | ExtensionSite, ProviderType>,
+        }
+
+        super(context, Providers, defaultValue, {
+            isSameAddress,
+            isValidChainId,
+            isValidAddress,
+            getDefaultChainId: () => ChainId.Mainnet,
+            getDefaultNetworkType: () => NetworkType.Flow,
+            getNetworkTypeFromChainId: (chainId: ChainId) =>
+                chainResolver.chainNetworkType(chainId) ?? NetworkType.Flow,
+        })
+    }
+}
diff --git a/packages/plugins/Flow/src/state/Settings.ts b/packages/plugins/Flow/src/state/Settings.ts
new file mode 100644
index 000000000000..07628a8d0f14
--- /dev/null
+++ b/packages/plugins/Flow/src/state/Settings.ts
@@ -0,0 +1,8 @@
+import type { Plugin } from '@masknet/plugin-infra'
+import { SettingsState } from '@masknet/plugin-infra/web3'
+
+export class Settings extends SettingsState {
+    constructor(context: Plugin.Shared.SharedContext) {
+        super(context)
+    }
+}
diff --git a/packages/plugins/Flow/src/state/Transaction.ts b/packages/plugins/Flow/src/state/Transaction.ts
new file mode 100644
index 000000000000..34b9d0d18512
--- /dev/null
+++ b/packages/plugins/Flow/src/state/Transaction.ts
@@ -0,0 +1,25 @@
+import type { Subscription } from 'use-subscription'
+import { getEnumAsArray } from '@dimensiondev/kit'
+import type { Plugin } from '@masknet/plugin-infra'
+import { TransactionStorage, TransactionState } from '@masknet/plugin-infra/web3'
+import { ChainId } from '@masknet/web3-shared-flow'
+import type { MutateOptions } from '@blocto/fcl'
+import { formatAddress } from '../helpers'
+
+export class Transaction extends TransactionState<ChainId, MutateOptions> {
+    constructor(
+        protected override context: Plugin.Shared.SharedContext,
+        protected override subscriptions: {
+            account?: Subscription<string>
+            chainId?: Subscription<ChainId>
+        },
+    ) {
+        const defaultValue = Object.fromEntries(
+            getEnumAsArray(ChainId).map((x) => [x.value, {}]),
+        ) as TransactionStorage<ChainId, MutateOptions>
+
+        super(context, defaultValue, subscriptions, {
+            formatAddress,
+        })
+    }
+}
diff --git a/packages/plugins/Flow/src/state/Wallet.ts b/packages/plugins/Flow/src/state/Wallet.ts
new file mode 100644
index 000000000000..8ea5558b3f13
--- /dev/null
+++ b/packages/plugins/Flow/src/state/Wallet.ts
@@ -0,0 +1,8 @@
+import type { Plugin } from '@masknet/plugin-infra'
+import { WalletState } from '@masknet/plugin-infra/web3'
+
+export class Wallet extends WalletState {
+    constructor(override context: Plugin.Shared.SharedContext) {
+        super(context)
+    }
+}
diff --git a/packages/plugins/Flow/src/state/index.ts b/packages/plugins/Flow/src/state/index.ts
new file mode 100644
index 000000000000..c5fc80658f3e
--- /dev/null
+++ b/packages/plugins/Flow/src/state/index.ts
@@ -0,0 +1,36 @@
+import type { Plugin } from '@masknet/plugin-infra'
+import { AddressBook } from './AddressBook'
+import { Hub } from './Hub'
+import { Provider } from './Provider'
+import { Connection } from './Connection'
+import { Settings } from './Settings'
+import { Transaction } from './Transaction'
+import { Wallet } from './Wallet'
+import { Others } from './Others'
+import type { FlowWeb3State } from './Connection/types'
+
+export function createWeb3State(context: Plugin.Shared.SharedContext): FlowWeb3State {
+    const Provider_ = new Provider(context)
+    return {
+        AddressBook: new AddressBook(context, {
+            chainId: Provider_.chainId,
+        }),
+        Hub: new Hub(context, {
+            chainId: Provider_.chainId,
+            account: Provider_.account,
+        }),
+        Settings: new Settings(context),
+        Transaction: new Transaction(context, {
+            chainId: Provider_.chainId,
+            account: Provider_.account,
+        }),
+        Provider: Provider_,
+        Connection: new Connection(context, {
+            chainId: Provider_.chainId,
+            account: Provider_.account,
+            providerType: Provider_.providerType,
+        }),
+        Wallet: new Wallet(context),
+        Others: new Others(context),
+    }
+}
diff --git a/packages/plugins/Flow/src/storage/index.ts b/packages/plugins/Flow/src/storage/index.ts
deleted file mode 100644
index 8bcf054aa435..000000000000
--- a/packages/plugins/Flow/src/storage/index.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import type { User } from '@blocto/fcl'
-import type { ScopedStorage } from '@masknet/shared-base'
-import { ChainId } from '@masknet/web3-shared-flow'
-
-export const StorageDefaultValue = {
-    chainId: ChainId.Mainnet,
-    user: null as User | null,
-}
-
-let storage: ScopedStorage<typeof StorageDefaultValue> = null!
-
-export function setupStorage(_: typeof storage) {
-    storage = _
-}
-
-export function getStorage() {
-    return storage.storage
-}
diff --git a/packages/plugins/Flow/src/types.ts b/packages/plugins/Flow/src/types.ts
deleted file mode 100644
index 7e98c52e47e2..000000000000
--- a/packages/plugins/Flow/src/types.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export interface FungibleToken {
-    address: string
-}
diff --git a/packages/plugins/Flow/tsconfig.json b/packages/plugins/Flow/tsconfig.json
index 631a5ee1ebfb..a2837698c9c6 100644
--- a/packages/plugins/Flow/tsconfig.json
+++ b/packages/plugins/Flow/tsconfig.json
@@ -8,12 +8,14 @@
   "include": ["src", "src/**/*.json"],
   "references": [
     { "path": "../../icons" },
+    { "path": "../../injected-script/sdk" },
     { "path": "../../plugin-infra" },
     { "path": "../../shared" },
     { "path": "../../shared-base" },
     { "path": "../../theme" },
     { "path": "../../web3-shared/base" },
     { "path": "../../web3-shared/flow" },
+    { "path": "../../web3-shared/evm" },
     { "path": "../../web3-providers" }
   ]
 }
diff --git a/packages/plugins/GoPlusSecurity/package.json b/packages/plugins/GoPlusSecurity/package.json
index dbf441b499cd..d9817ed20e66 100644
--- a/packages/plugins/GoPlusSecurity/package.json
+++ b/packages/plugins/GoPlusSecurity/package.json
@@ -16,6 +16,7 @@
     "@masknet/shared-base-ui": "workspace:*",
     "@masknet/theme": "workspace:*",
     "@masknet/web3-providers": "workspace:*",
+    "@masknet/web3-shared-base": "workspace:*",
     "@masknet/web3-shared-evm": "workspace:*",
     "react-feather": "^2.0.9",
     "react-use": "^17.3.2",
diff --git a/packages/plugins/GoPlusSecurity/src/SNSAdaptor/components/SearchBox.tsx b/packages/plugins/GoPlusSecurity/src/SNSAdaptor/components/SearchBox.tsx
index e70c56aa224b..4a0dd52eaad2 100644
--- a/packages/plugins/GoPlusSecurity/src/SNSAdaptor/components/SearchBox.tsx
+++ b/packages/plugins/GoPlusSecurity/src/SNSAdaptor/components/SearchBox.tsx
@@ -1,13 +1,13 @@
-import { Box, Button, InputAdornment, MenuItem, Stack, Typography } from '@mui/material'
-import { useAsync } from 'react-use'
 import { memo, useMemo, useState } from 'react'
+import { useAsync } from 'react-use'
+import { Box, Button, InputAdornment, MenuItem, Stack, Typography } from '@mui/material'
 import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown'
 import { makeStyles, MaskColorVar, MaskTextField, ShadowRootMenu } from '@masknet/theme'
 import { SearchIcon } from '@masknet/icons'
 import { useI18N } from '../../locales'
 import type { SecurityAPI } from '@masknet/web3-providers'
 import { GoPlusLabs } from '@masknet/web3-providers'
-import { ChainId, getChainDetailed } from '@masknet/web3-shared-evm'
+import { ChainId, chainResolver } from '@masknet/web3-shared-evm'
 
 const useStyles = makeStyles()((theme) => ({
     root: {
@@ -42,16 +42,16 @@ interface SearchBoxProps {
 
 const DEFAULT_SEARCH_CHAIN = ChainId.Mainnet
 
-function getChainName(chain?: SecurityAPI.SupportedChain) {
-    if (!chain) return getChainDetailed(ChainId.Mainnet)?.chain
-    if (chain.id === ChainId.BSC) return getChainDetailed(ChainId.BSC)?.shortName.toUpperCase() ?? chain.name
-    return getChainDetailed(chain.id)?.chain ?? chain.name
+function getChainName(chain?: SecurityAPI.SupportedChain<ChainId>) {
+    if (!chain) return chainResolver.chainName(ChainId.Mainnet)
+    if (chain.chainId === ChainId.BSC) return chainResolver.chainShortName(ChainId.BSC)
+    return chainResolver.chainName(ChainId.Mainnet)
 }
 
 export const SearchBox = memo<SearchBoxProps>(({ onSearch }) => {
     const t = useI18N()
     const { classes } = useStyles()
-    const [selectedChain, setSelectedChain] = useState<SecurityAPI.SupportedChain>()
+    const [selectedChain, setSelectedChain] = useState<SecurityAPI.SupportedChain<ChainId>>()
     const [searchContent, setSearchSearchContent] = useState<string>()
     const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null)
 
@@ -67,7 +67,7 @@ export const SearchBox = memo<SearchBoxProps>(({ onSearch }) => {
             supportedChains.map((chain) => {
                 return (
                     <MenuItem
-                        key={chain.id}
+                        key={chain.chainId}
                         onClick={() => {
                             setSelectedChain(chain)
                             onClose()
@@ -95,9 +95,9 @@ export const SearchBox = memo<SearchBoxProps>(({ onSearch }) => {
                         placeholder={t.search_input_placeholder()}
                         autoFocus
                         fullWidth
-                        onKeyPress={(event) => {
+                        onKeyPress={(event: React.KeyboardEvent) => {
                             if (event.key !== 'Enter') return
-                            onSearch(selectedChain?.id ?? DEFAULT_SEARCH_CHAIN, searchContent ?? '')
+                            onSearch(selectedChain?.chainId ?? DEFAULT_SEARCH_CHAIN, searchContent ?? '')
                         }}
                         onChange={(e) => setSearchSearchContent(e.target.value)}
                         InputProps={{
@@ -113,7 +113,7 @@ export const SearchBox = memo<SearchBoxProps>(({ onSearch }) => {
                 <Button
                     className={classes.searchButton}
                     disabled={!searchContent}
-                    onClick={() => onSearch(selectedChain?.id ?? DEFAULT_SEARCH_CHAIN, searchContent ?? '')}
+                    onClick={() => onSearch(selectedChain?.chainId ?? DEFAULT_SEARCH_CHAIN, searchContent ?? '')}
                     variant="contained">
                     {t.search()}
                 </Button>
diff --git a/packages/plugins/GoPlusSecurity/src/SNSAdaptor/components/TokenPanel.tsx b/packages/plugins/GoPlusSecurity/src/SNSAdaptor/components/TokenPanel.tsx
index 3844db22dddd..f255a6a3a5e8 100644
--- a/packages/plugins/GoPlusSecurity/src/SNSAdaptor/components/TokenPanel.tsx
+++ b/packages/plugins/GoPlusSecurity/src/SNSAdaptor/components/TokenPanel.tsx
@@ -5,13 +5,8 @@ import React from 'react'
 import { useTheme } from '@mui/system'
 import { ExternalLink } from 'react-feather'
 import { makeStyles, usePortalShadowRoot } from '@masknet/theme'
-import {
-    ERC20Token,
-    formatCurrency,
-    formatEthereumAddress,
-    resolveAddressLinkOnExplorer,
-    resolveTokenLinkOnExplorer,
-} from '@masknet/web3-shared-evm'
+import { formatEthereumAddress, explorerResolver } from '@masknet/web3-shared-evm'
+import { formatCurrency } from '@masknet/web3-shared-base'
 
 const useStyles = makeStyles()((theme) => ({
     card: {
@@ -101,10 +96,7 @@ export const TokenPanel = React.forwardRef(({ tokenSecurity, securityMessageLeve
                             </Typography>
                             <Link
                                 lineHeight="14px"
-                                href={resolveTokenLinkOnExplorer({
-                                    chainId: tokenSecurity.chainId,
-                                    address: tokenSecurity.contract,
-                                } as ERC20Token)}
+                                href={explorerResolver.fungibleTokenLink(tokenSecurity.chainId, tokenSecurity.contract)}
                                 target="_blank"
                                 rel="noopener noreferrer">
                                 <ExternalLink color={theme.palette.text.strong} size={14} />
@@ -122,7 +114,7 @@ export const TokenPanel = React.forwardRef(({ tokenSecurity, securityMessageLeve
                             {tokenSecurity.creator_address && (
                                 <Link
                                     lineHeight="14px"
-                                    href={resolveAddressLinkOnExplorer(
+                                    href={explorerResolver.addressLink(
                                         tokenSecurity.chainId,
                                         tokenSecurity.creator_address,
                                     )}
@@ -144,7 +136,7 @@ export const TokenPanel = React.forwardRef(({ tokenSecurity, securityMessageLeve
                             {tokenSecurity.owner_address && (
                                 <Link
                                     lineHeight="14px"
-                                    href={resolveAddressLinkOnExplorer(
+                                    href={explorerResolver.addressLink(
                                         tokenSecurity.chainId,
                                         tokenSecurity.owner_address,
                                     )}
diff --git a/packages/plugins/GoPlusSecurity/src/base.ts b/packages/plugins/GoPlusSecurity/src/base.ts
index c19fe3023fe1..2c83e4ed8e50 100644
--- a/packages/plugins/GoPlusSecurity/src/base.ts
+++ b/packages/plugins/GoPlusSecurity/src/base.ts
@@ -4,7 +4,6 @@ import { languages } from './locales/languages'
 
 export const base: Plugin.Shared.Definition = {
     ID: PLUGIN_ID,
-    icon: '',
     name: { fallback: PLUGIN_NAME },
     description: { fallback: PLUGIN_DESCRIPTION },
     publisher: { name: { fallback: 'Mask Network' }, link: 'https://mask.io/' },
diff --git a/packages/plugins/GoPlusSecurity/tsconfig.json b/packages/plugins/GoPlusSecurity/tsconfig.json
index 7503903514d1..1902fd811b29 100644
--- a/packages/plugins/GoPlusSecurity/tsconfig.json
+++ b/packages/plugins/GoPlusSecurity/tsconfig.json
@@ -6,5 +6,11 @@
     "tsBuildInfoFile": "dist/.tsbuildinfo"
   },
   "include": ["src", "src/**/*.json"],
-  "references": [{ "path": "../../plugin-infra" }, { "path": "../../shared" }, { "path": "../../web3-providers" }]
+  "references": [
+    { "path": "../../plugin-infra" },
+    { "path": "../../shared" },
+    { "path": "../../web3-providers" },
+    { "path": "../../web3-shared/base" },
+    { "path": "../../web3-shared/evm" }
+  ]
 }
diff --git a/packages/plugins/RSS3/src/SNSAdaptor/TabCard.tsx b/packages/plugins/RSS3/src/SNSAdaptor/TabCard.tsx
index 872ef9548c42..281193e664ce 100644
--- a/packages/plugins/RSS3/src/SNSAdaptor/TabCard.tsx
+++ b/packages/plugins/RSS3/src/SNSAdaptor/TabCard.tsx
@@ -1,6 +1,6 @@
 import { AddressViewer } from '@masknet/shared'
 import { EMPTY_LIST } from '@masknet/shared-base'
-import { AddressName, AddressNameType } from '@masknet/web3-shared-evm'
+import { IdentityAddress, IdentityAddressType } from '@masknet/web3-shared-base'
 import { Box, Typography } from '@mui/material'
 import { useI18N } from '../locales'
 import { useDonations, useFootprints } from './hooks'
@@ -13,13 +13,13 @@ export enum TabCardType {
 
 export interface TabCardProps {
     type: TabCardType
-    addressNames: AddressName[]
+    addressNames: IdentityAddress[]
 }
 
 export function TabCard({ type, addressNames }: TabCardProps) {
     const t = useI18N()
-    const addressName = addressNames.find((x) => x.type === AddressNameType.RSS3)
-    const userAddress = addressName?.resolvedAddress || ''
+    const addressName = addressNames.find((x) => x.type === IdentityAddressType.RSS3)
+    const userAddress = addressName?.address || ''
     const { value: donations = EMPTY_LIST, loading: loadingDonations } = useDonations(userAddress)
     const { value: footprints = EMPTY_LIST, loading: loadingFootprints } = useFootprints(userAddress)
 
@@ -41,7 +41,7 @@ export function TabCard({ type, addressNames }: TabCardProps) {
             <link rel="stylesheet" href={new URL('./styles/tailwind.css', import.meta.url).toString()} />
             <Box display="flex" alignItems="center" justifyContent="space-between">
                 <div>{summary}</div>
-                <AddressViewer addressName={addressName} />
+                <AddressViewer identityAddress={addressName} />
             </Box>
             {isDonation ? (
                 <DonationPage donations={donations} loading={loadingDonations} addressLabel={addressName.label} />
diff --git a/packages/plugins/RSS3/src/SNSAdaptor/index.tsx b/packages/plugins/RSS3/src/SNSAdaptor/index.tsx
index 4df98813f5bf..66c9c4748f02 100644
--- a/packages/plugins/RSS3/src/SNSAdaptor/index.tsx
+++ b/packages/plugins/RSS3/src/SNSAdaptor/index.tsx
@@ -1,20 +1,17 @@
 import type { Plugin } from '@masknet/plugin-infra'
-import { AddressName, AddressNameType } from '@masknet/web3-shared-evm'
+import { IdentityAddress, IdentityAddressType, SocialIdentity } from '@masknet/web3-shared-base'
 import { base } from '../base'
 import { PLUGIN_ID } from '../constants'
 import { TabCard, TabCardType } from './TabCard'
 
-function addressNameSorter(a: Plugin.SNSAdaptor.ProfileAddress, z: Plugin.SNSAdaptor.ProfileAddress) {
-    if (a.type === AddressNameType.RSS3) return -1
-    if (z.type === AddressNameType.RSS3) return 1
+function addressNameSorter(a: IdentityAddress, z: IdentityAddress) {
+    if (a.type === IdentityAddressType.RSS3) return -1
+    if (z.type === IdentityAddressType.RSS3) return 1
     return 0
 }
 
-function shouldDisplay(
-    identity?: Plugin.SNSAdaptor.ProfileIdentity,
-    addressNames?: Plugin.SNSAdaptor.ProfileAddress[],
-) {
-    return addressNames?.some((x) => x.type === AddressNameType.RSS3) ?? false
+function shouldDisplay(identity?: SocialIdentity, addressNames?: IdentityAddress[]) {
+    return addressNames?.some((x) => x.type === IdentityAddressType.RSS3) ?? false
 }
 
 const sns: Plugin.SNSAdaptor.Definition = {
@@ -27,7 +24,7 @@ const sns: Plugin.SNSAdaptor.Definition = {
             priority: 1,
             UI: {
                 TabContent: ({ addressNames = [] }) => {
-                    return <TabCard addressNames={addressNames as AddressName[]} type={TabCardType.Donation} />
+                    return <TabCard addressNames={addressNames as IdentityAddress[]} type={TabCardType.Donation} />
                 },
             },
             Utils: {
@@ -41,7 +38,7 @@ const sns: Plugin.SNSAdaptor.Definition = {
             priority: 2,
             UI: {
                 TabContent: ({ addressNames = [] }) => {
-                    return <TabCard addressNames={addressNames as AddressName[]} type={TabCardType.Footprint} />
+                    return <TabCard addressNames={addressNames as IdentityAddress[]} type={TabCardType.Footprint} />
                 },
             },
             Utils: {
diff --git a/packages/plugins/RSS3/src/base.ts b/packages/plugins/RSS3/src/base.ts
index 5cd8be21d3b9..357c8cc5bfc2 100644
--- a/packages/plugins/RSS3/src/base.ts
+++ b/packages/plugins/RSS3/src/base.ts
@@ -1,8 +1,9 @@
 import type { Plugin } from '@masknet/plugin-infra'
+import type { ChainId } from '@masknet/web3-shared-evm'
 import { languages } from './locales/languages'
 import { PLUGIN_NAME, PLUGIN_ID, PLUGIN_DESCRIPTION } from './constants'
 
-export const base: Plugin.Shared.Definition = {
+export const base: Plugin.Shared.Definition<ChainId> = {
     ID: PLUGIN_ID,
     name: { fallback: PLUGIN_NAME },
     description: { fallback: PLUGIN_DESCRIPTION },
diff --git a/packages/plugins/Solana/package.json b/packages/plugins/Solana/package.json
index a7409da82a2d..68a50f74a74b 100644
--- a/packages/plugins/Solana/package.json
+++ b/packages/plugins/Solana/package.json
@@ -19,16 +19,25 @@
     "@masknet/theme": "workspace:*",
     "@masknet/web3-providers": "workspace:*",
     "@masknet/web3-shared-base": "workspace:*",
+    "@masknet/web3-shared-evm": "workspace:*",
     "@masknet/web3-shared-solana": "workspace:*",
     "@metaplex-foundation/mpl-token-metadata": "^1.1.0",
     "@metaplex/js": "^4.11.7",
+    "@project-serum/sol-wallet-adapter": "^0.2.6",
+    "@servie/events": "^3.0.0",
     "@solana/spl-name-service": "^0.1.3",
     "@solana/spl-token": "^0.1.8",
     "@solana/spl-token-registry": "^0.2.1301",
+    "@solana/web3.js": "^1.30.2",
+    "@toruslabs/solana-embed": "^0.1.6",
     "bignumber.js": "^9.0.2",
     "bn.js": "^4.12.0",
     "bs58": "^4.0.1",
     "buffer": "^6.0.3",
     "react-use": "^17.3.2"
+  },
+  "devDependencies": {
+    "@types/bs58": "^4.0.1",
+    "@types/use-subscription": "^1.0.0"
   }
 }
diff --git a/packages/plugins/Solana/src/UI/Dashboard/index.tsx b/packages/plugins/Solana/src/UI/Dashboard/index.tsx
index d8d1fdbfa573..527720152c31 100644
--- a/packages/plugins/Solana/src/UI/Dashboard/index.tsx
+++ b/packages/plugins/Solana/src/UI/Dashboard/index.tsx
@@ -1,16 +1,46 @@
 import type { Plugin } from '@masknet/plugin-infra'
+import type {
+    ChainId,
+    NetworkType,
+    ProviderType,
+    SchemaType,
+    Signature,
+    GasOption,
+    Block,
+    Transaction,
+    TransactionReceipt,
+    TransactionDetailed,
+    TransactionParameter,
+    TransactionSignature,
+    Web3,
+} from '@masknet/web3-shared-solana'
 import { base } from '../../base'
-import { Web3UI } from '../Web3UI'
-import { createWeb3State } from '../Web3State'
-import { setupStorage, StorageDefaultValue } from '../../storage'
+import { SharedContextSettings, Web3StateSettings } from '../../settings'
+import { createWeb3State } from '../../state'
 
-const sns: Plugin.Dashboard.Definition = {
+const dashboard: Plugin.Dashboard.Definition<
+    ChainId,
+    SchemaType,
+    ProviderType,
+    NetworkType,
+    Signature,
+    GasOption,
+    Block,
+    Transaction,
+    TransactionReceipt,
+    TransactionDetailed,
+    TransactionSignature,
+    TransactionParameter,
+    Web3
+> = {
     ...base,
     init(signal, context) {
-        setupStorage(context.createKVStorage('memory', StorageDefaultValue))
-        sns.Web3State = createWeb3State(signal)
+        const Web3State = createWeb3State(context)
+
+        dashboard.Web3State = Web3State
+        Web3StateSettings.value = Web3State
+        SharedContextSettings.value = context
     },
-    Web3UI,
 }
 
-export default sns
+export default dashboard
diff --git a/packages/plugins/Solana/src/UI/SNSAdaptor/index.tsx b/packages/plugins/Solana/src/UI/SNSAdaptor/index.tsx
index 890c1377d758..4ab14e3cb181 100644
--- a/packages/plugins/Solana/src/UI/SNSAdaptor/index.tsx
+++ b/packages/plugins/Solana/src/UI/SNSAdaptor/index.tsx
@@ -1,19 +1,46 @@
 import type { Plugin } from '@masknet/plugin-infra'
+import type {
+    ChainId,
+    NetworkType,
+    ProviderType,
+    SchemaType,
+    Signature,
+    GasOption,
+    Block,
+    Transaction,
+    TransactionReceipt,
+    TransactionDetailed,
+    TransactionParameter,
+    TransactionSignature,
+    Web3,
+} from '@masknet/web3-shared-solana'
 import { base } from '../../base'
-import { setupStorage, StorageDefaultValue } from '../../storage'
-import { connectWallet, watchAccount } from '../../wallet'
-import { createWeb3State } from '../Web3State'
-import { Web3UI } from '../Web3UI'
+import { createWeb3State } from '../../state'
+import { SharedContextSettings, Web3StateSettings } from '../../settings'
 
-const sns: Plugin.SNSAdaptor.Definition = {
+const sns: Plugin.SNSAdaptor.Definition<
+    ChainId,
+    SchemaType,
+    ProviderType,
+    NetworkType,
+    Signature,
+    GasOption,
+    Block,
+    Transaction,
+    TransactionReceipt,
+    TransactionDetailed,
+    TransactionSignature,
+    TransactionParameter,
+    Web3
+> = {
     ...base,
     async init(signal, context) {
-        setupStorage(context.createKVStorage('persistent', StorageDefaultValue))
-        sns.Web3State = createWeb3State(signal)
-        await connectWallet(true)
-        await watchAccount()
+        const Web3State = createWeb3State(context)
+
+        sns.Web3State = Web3State
+        Web3StateSettings.value = Web3State
+        SharedContextSettings.value = context
     },
-    Web3UI,
 }
 
 export default sns
diff --git a/packages/plugins/Solana/src/UI/Web3State/index.ts b/packages/plugins/Solana/src/UI/Web3State/index.ts
deleted file mode 100644
index f6a4fdfb8b51..000000000000
--- a/packages/plugins/Solana/src/UI/Web3State/index.ts
+++ /dev/null
@@ -1,66 +0,0 @@
-import type { Web3Plugin } from '@masknet/plugin-infra/web3'
-import { createConstantSubscription, mapSubscription } from '@masknet/shared-base'
-import { toFixed } from '@masknet/web3-shared-base'
-import {
-    ChainId,
-    NetworkType,
-    ProviderType,
-    resolveAddressLinkOnExplorer,
-    resolveBlockLinkOnExplorer,
-    resolveTransactionLinkOnExplorer,
-} from '@masknet/web3-shared-solana'
-import { getFungibleAssets, getNonFungibleAssets, lookup, reverse } from '../../apis'
-import { formatAddress, formatCurrency } from '../../helpers'
-import { getStorage, StorageDefaultValue } from '../../storage'
-
-function createSubscriptionFromPublicKey<T>(getter: (value: typeof StorageDefaultValue.publicKey) => T) {
-    return mapSubscription(getStorage().publicKey.subscription, getter)
-}
-
-export function createWeb3State(signal: AbortSignal): Web3Plugin.ObjectCapabilities.Capabilities {
-    const chainId = ChainId.Mainnet
-
-    return {
-        Shared: {
-            allowTestnet: createConstantSubscription(false),
-            account: createSubscriptionFromPublicKey((publicKey) => {
-                return publicKey ?? ''
-            }),
-            wallets: createSubscriptionFromPublicKey((publicKey): Web3Plugin.Wallet[] => {
-                if (!publicKey) return []
-                return [
-                    {
-                        name: 'Solana',
-                        address: publicKey,
-                        hasDerivationPath: false,
-                        hasStoredKeyInfo: false,
-                    },
-                ]
-            }),
-            chainId: createConstantSubscription(chainId),
-            networkType: createConstantSubscription(NetworkType.Solana),
-            providerType: createSubscriptionFromPublicKey((publicKey) => {
-                return publicKey ? ProviderType.Phantom : undefined
-            }),
-        },
-        Asset: {
-            getFungibleAssets,
-            getNonFungibleAssets,
-        },
-        Utils: {
-            formatAddress,
-            formatBalance: toFixed,
-            formatCurrency,
-
-            isChainIdValid: () => true,
-
-            resolveTransactionLink: resolveTransactionLinkOnExplorer,
-            resolveAddressLink: resolveAddressLinkOnExplorer,
-            resolveBlockLink: resolveBlockLinkOnExplorer,
-        },
-        NameService: {
-            lookup: (domain: string) => lookup(domain, chainId),
-            reverse: (address: string) => reverse(address, chainId),
-        },
-    }
-}
diff --git a/packages/plugins/Solana/src/UI/Web3UI/index.tsx b/packages/plugins/Solana/src/UI/Web3UI/index.tsx
deleted file mode 100644
index b41ed84159bb..000000000000
--- a/packages/plugins/Solana/src/UI/Web3UI/index.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-import type { Web3Plugin } from '@masknet/plugin-infra/web3'
-import { ProviderIconClickBait } from '../components/ProviderIconClickBait'
-
-export const Web3UI: Web3Plugin.UI.UI = {
-    SelectProviderDialog: {
-        ProviderIconClickBait,
-    },
-}
diff --git a/packages/plugins/Solana/src/UI/components/ProviderIconClickBait.tsx b/packages/plugins/Solana/src/UI/components/ProviderIconClickBait.tsx
index 6bb00b918c49..bcb512523ab1 100644
--- a/packages/plugins/Solana/src/UI/components/ProviderIconClickBait.tsx
+++ b/packages/plugins/Solana/src/UI/components/ProviderIconClickBait.tsx
@@ -1,37 +1,25 @@
 import type { Web3Plugin } from '@masknet/plugin-infra/web3'
 import { isDashboardPage } from '@masknet/shared-base'
-import { ProviderType } from '@masknet/web3-shared-solana'
-import { cloneElement, isValidElement, useCallback } from 'react'
-import { connectWallet } from '../../wallet'
+import { ChainId, NetworkType, ProviderType } from '@masknet/web3-shared-solana'
+import { cloneElement, HTMLAttributes, isValidElement } from 'react'
 
 export function ProviderIconClickBait({
-    network,
     provider,
     children,
-    onSubmit,
-    onClick,
-}: Web3Plugin.UI.ProviderIconClickBaitProps) {
-    const onLogIn = useCallback(async () => {
-        onClick?.(network, provider)
-        const publicKey = await connectWallet()
-        if (publicKey) {
-            onSubmit?.(network, provider)
-        }
-    }, [provider, onClick, onSubmit])
-
+}: Web3Plugin.UI.ProviderIconClickBaitProps<ChainId, ProviderType, NetworkType>) {
     const isDashboard = isDashboardPage()
     const disabled = isDashboard && provider.type === ProviderType.Phantom
-    const disabledStyled = {
-        opacity: 0.5,
-    }
 
     return (
         <>
             {isValidElement<object>(children)
-                ? cloneElement(children, {
-                      style: disabled ? disabledStyled : undefined,
+                ? cloneElement<HTMLAttributes<HTMLDivElement>>(children, {
+                      style: disabled
+                          ? {
+                                opacity: 0.5,
+                            }
+                          : undefined,
                       ...children.props,
-                      onClick: disabled ? undefined : onLogIn,
                   })
                 : children}
         </>
diff --git a/packages/plugins/Solana/src/apis/getFungibleAssets.ts b/packages/plugins/Solana/src/apis/getFungibleAssets.ts
index fb8073a36ca9..7201d52090f5 100644
--- a/packages/plugins/Solana/src/apis/getFungibleAssets.ts
+++ b/packages/plugins/Solana/src/apis/getFungibleAssets.ts
@@ -1,8 +1,8 @@
-import { Pagination, Web3Plugin, CurrencyType } from '@masknet/plugin-infra/web3'
-import { ChainId, getTokenConstants } from '@masknet/web3-shared-solana'
+import { FungibleAsset, CurrencyType, Pageable, HubOptions } from '@masknet/web3-shared-base'
+import { ChainId, getTokenConstants, SchemaType } from '@masknet/web3-shared-solana'
 import { CoinGecko } from '@masknet/web3-providers'
-import { createFungibleAsset, createFungibleToken } from '../helpers'
 import { TokenListProvider } from '@solana/spl-token-registry'
+import { createFungibleAsset, createFungibleToken } from '../helpers'
 import { GetAccountInfoResponse, GetProgramAccountsResponse, requestRPC, SPL_TOKEN_PROGRAM_ID } from './shared'
 
 async function getSolanaBalance(chainId: ChainId, account: string) {
@@ -14,12 +14,21 @@ async function getSolanaBalance(chainId: ChainId, account: string) {
     })
     const balance = data.result?.value.lamports.toString() ?? '0'
     return createFungibleAsset(
-        createFungibleToken(chainId, SOL_ADDRESS, 'Solana', 'SOL', 9),
+        createFungibleToken(
+            chainId,
+            SOL_ADDRESS,
+            'Solana',
+            'SOL',
+            9,
+            new URL('../assets/solana.png', import.meta.url).toString(),
+        ),
         balance,
-        new URL('../assets/solana.png', import.meta.url).toString(),
-        price,
+        {
+            [CurrencyType.USD]: price.toString(),
+        },
     )
 }
+
 async function getSplTokenList(chainId: ChainId, account: string) {
     const data = await requestRPC<GetProgramAccountsResponse>(chainId, {
         method: 'getProgramAccounts',
@@ -45,7 +54,7 @@ async function getSplTokenList(chainId: ChainId, account: string) {
     const tokenListProvider = new TokenListProvider()
     const provider = await tokenListProvider.resolve()
     const tokenList = provider.filterByChainId(chainId).getList()
-    const splTokens: Web3Plugin.Asset[] = []
+    const splTokens: Array<FungibleAsset<ChainId, SchemaType>> = []
     data.result.forEach((x) => {
         const info = x.account.data.parsed.info
         const token = tokenList.find((y) => y.address === info.mint)
@@ -54,9 +63,8 @@ async function getSplTokenList(chainId: ChainId, account: string) {
         const name = token.name || 'Unknown Token'
         const symbol = token.symbol || 'Unknown Token'
         const splToken = createFungibleAsset(
-            createFungibleToken(chainId, info.mint, name, symbol, info.tokenAmount.decimals),
+            createFungibleToken(chainId, info.mint, name, symbol, info.tokenAmount.decimals, token.logoURI),
             info.tokenAmount.amount,
-            token.logoURI,
         )
         splTokens.push(splToken)
     })
@@ -65,17 +73,20 @@ async function getSplTokenList(chainId: ChainId, account: string) {
 
 export async function getFungibleAssets(
     address: string,
-    provider: string,
-    network: Web3Plugin.NetworkDescriptor,
-    pagination?: Pagination,
-): Promise<Array<Web3Plugin.Asset<Web3Plugin.FungibleToken>>> {
+    options?: HubOptions<ChainId>,
+): Promise<Pageable<FungibleAsset<ChainId, SchemaType>>> {
     const allSettled = await Promise.allSettled([
-        getSolanaBalance(network.chainId, address).then((x) => [x]),
-        getSplTokenList(network.chainId, address),
+        getSolanaBalance(options?.chainId ?? ChainId.Mainnet, address).then((x) => [x]),
+        getSplTokenList(options?.chainId ?? ChainId.Mainnet, address),
     ])
-
-    return allSettled
+    const assets = allSettled
         .map((x) => (x.status === 'fulfilled' ? x.value : null))
         .flat()
-        .filter(Boolean) as Array<Web3Plugin.Asset<Web3Plugin.FungibleToken>>
+        .filter(Boolean)
+
+    return {
+        currentPage: 0,
+        hasNextPage: false,
+        data: assets as Array<FungibleAsset<ChainId, SchemaType>>,
+    }
 }
diff --git a/packages/plugins/Solana/src/apis/getNonFungibleAssets.ts b/packages/plugins/Solana/src/apis/getNonFungibleAssets.ts
index e263c47da597..f97a60f34407 100644
--- a/packages/plugins/Solana/src/apis/getNonFungibleAssets.ts
+++ b/packages/plugins/Solana/src/apis/getNonFungibleAssets.ts
@@ -1,7 +1,7 @@
 import { Connection } from '@metaplex/js'
-import { ChainId } from '@masknet/web3-shared-solana'
+import { HubOptions, NonFungibleAsset, NonFungibleToken, Pageable, TokenType } from '@masknet/web3-shared-base'
+import { ChainId, SchemaType } from '@masknet/web3-shared-solana'
 import { Metadata } from '@metaplex-foundation/mpl-token-metadata'
-import { Pageable, Pagination, TokenType, Web3Plugin } from '@masknet/plugin-infra/web3'
 import { fetchJSON, GetProgramAccountsResponse, requestRPC, SPL_TOKEN_PROGRAM_ID } from './shared'
 import { ENDPOINT_KEY } from '../constants'
 
@@ -24,7 +24,7 @@ interface ExternalMetadata {
     }
 }
 
-async function getNftList(chainId: ChainId, account: string) {
+async function getNftList(chainId: ChainId, account: string): Promise<Array<NonFungibleToken<ChainId, SchemaType>>> {
     const data = await requestRPC<GetProgramAccountsResponse>(chainId, {
         method: 'getProgramAccounts',
         params: [
@@ -48,7 +48,7 @@ async function getNftList(chainId: ChainId, account: string) {
     if (!data.result?.length) return []
     const connection = new Connection(ENDPOINT_KEY)
     const nftTokens = data.result.filter((x) => x.account.data.parsed.info.tokenAmount.decimals === 0)
-    const promises = nftTokens.map(async (x) => {
+    const promises = nftTokens.map(async (x): Promise<NonFungibleAsset<ChainId, SchemaType> | null> => {
         const pda = await Metadata.getPDA(x.account.data.parsed.info.mint)
         const metadata = await Metadata.load(connection, pda)
         if (!metadata) return null
@@ -59,42 +59,39 @@ async function getNftList(chainId: ChainId, account: string) {
             tokenId: pubkey,
             chainId,
             type: TokenType.NonFungible,
-            name: metadata.data.data.name,
-            description: externalMeta?.description,
+            schema: SchemaType.NonFungible,
+            address: '',
             contract: {
+                chainId,
                 name: metadata.data.data.name,
                 symbol: metadata.data.data.symbol,
-                chainId: ChainId.Mainnet,
                 address: pubkey,
-                tokenId: pubkey,
+                schema: SchemaType.NonFungible,
             },
             metadata: {
+                chainId,
                 name: metadata.data.data.name,
-                description: metadata.data.data.name,
+                symbol: metadata.data.data.symbol,
+                description: externalMeta?.description,
+                mediaURL: externalMeta?.animation ?? externalMeta?.image ?? '',
                 mediaType: externalMeta?.properties?.category || 'Unknown',
-                iconURL: '',
-                assetURL: externalMeta?.animation ?? externalMeta?.image ?? '',
             },
-        } as Web3Plugin.NonFungibleToken
+        }
     })
 
     const allSettled = await Promise.allSettled(promises)
-    const tokens = allSettled
-        .map((x) => (x.status === 'fulfilled' ? x.value : null))
-        .filter(Boolean) as Web3Plugin.NonFungibleToken[]
-    return tokens
+    const assets = allSettled.map((x) => (x.status === 'fulfilled' ? x.value : null)).filter(Boolean)
+    return assets as Array<NonFungibleAsset<ChainId, SchemaType>>
 }
 
 export async function getNonFungibleAssets(
     address: string,
-    pagination: Pagination,
-    providerType?: string,
-    network?: Web3Plugin.NetworkDescriptor,
-): Promise<Pageable<Web3Plugin.NonFungibleToken>> {
-    const tokens = await getNftList(ChainId.Mainnet, address)
+    options?: HubOptions<ChainId>,
+): Promise<Pageable<NonFungibleAsset<ChainId, SchemaType>>> {
+    const tokens = await getNftList(options?.chainId ?? ChainId.Mainnet, address)
 
     return {
-        currentPage: 1,
+        currentPage: 0,
         hasNextPage: false,
         data: tokens,
     }
diff --git a/packages/plugins/Solana/src/assets/torus.png b/packages/plugins/Solana/src/assets/torus.png
new file mode 100644
index 0000000000000000000000000000000000000000..9ccd43c0d489ac2ff7de50335aa63fc01ae1d22c
GIT binary patch
literal 3975
zcmYLMcT`i$*S(j}F(4f=^ez%gloFbB2oQ=$FA50KLP=;31p$%XL^?r=1pz4<N&pop
zf>c3@BIOY<AieY8sriMs*0;X1X4dREd+ynLX5Bw#k}c6jP-cE+005vS#`@L(0IHpJ
zMhG=CtNo&zI)GSfBVF*@r^_+a2~&`<0~P>SIL|r=6qWE%7o=I5*%(mC{{jR+2tY#*
z&@uybtN;Tiz{Cr%Tm;Su0Z>tZRs5_`rvL~*7y%|efCCN+pg<WPP&ET$NPyVRLOdyF
z6&SeyP9;#>nMO4mVl@KL&;jQJL6tO!J?Tt^o(<qp1r?$oH@*S%tN@=TsFDh~c?f{C
zz<C)^4tJ)0L7PUq47_j+pgRY`Od!TB0E7Wz_!{Kbp@K65?6Ne-$7g_^9hCAoE6X8A
zqgzGQ0tL+>POAVN6ujg|bpj&dK&AVjYUbHq7&ySINdPSqD2D|=8c@^@;8uY+uLI0{
zH2SXq8d~s@Kfr~cK|Z3<EIP9d6^1x2gTmHSQ5s|}z#>4^0c8UK2tCcUinH@!lLUB?
zppYdf?FGt5oY|mS0%>TpN|j<M*&UQI5``Mpxs(szC_6`#*w+-Xa7uYE<?js&Cx#MI
zMbS;A0QBb@M=9>5RKQ04UV+7YoH{(fS);E5G~80kdT2Yh+dcu9K+kh>X#eEOcT<~`
zi$=kPoj=6w-tK@}5sm8__c~66ylRzV2JWjQeU+Jvm4*6rvFbcw^c$5(+gE#L+}!lu
zT(?c3hA%hl&|+NpdGLpiB2K&6(%rW7FQf+zZ$)O7*E5~x`gG>@|Kl2kqR9|I^LCy3
zhtZno>)1q;Y~qjgxJ)=7e#f0&$T(*@B5Xou7GAb2uI8=(h@IQ&+BJ*qKf9Ts2FgPl
z2M4&r@0ug~`>$ON8{VjYad8<ga4k`fStLEvhP$0CO!`d+&bCHxu064XQ-Xhz682X<
zXZxT~zK(wxdfA4d`}0aRYKPJe2oqem+P19Xd^bybPx;H)6<u+^I-GH{mMNx6sKHs)
z)aSKVDxdP<!TWnD1J%A(KHfHVH*6nQVy*gzi)N79Q|Om9uZYPb#&n0!mIv~dQ3IH(
z6O{<DA4hn@lPR>1e_Q%UW)ivmc$Hw#8s2gN{|vXKqFFY@Bl7Q}+p4p~Ubtxue*n9q
zlVCX_uX{;3cSe+;Y3RLKc$9%YobSSg5h}6Ax_04gADs$Hx8S%x6$eL)1cTLe1NHOe
zF~FwWP);;~q2(#G0*_ZJco??$uw0i=e}_5ovsT0fL7ny#Z%@9>2Z>{f1S#2%hGVWJ
zd{3^azxHs4ZA!}IT)(4pWM*Em`4yoV-<(rY=tB_k^IG}rRZ>`N;Pm>YD~VQ3AawtZ
z#qJgPGW^c#vgu`S&Y8rEMW35T?zrj?2K80Ih1yXBrem85e1gNcJGw^>VtOagKax&P
zCoT7OL+gt>5R!($UrzTPq8C_3ZEumL?$?}CT6KUVBi1BG`1@bYozf!%F8J5V^0p8Y
z(2lH5#VNg-`IgF643nd|DN(T_c9Qa3DN)I2Tey5~a#RBPhH^bua#T9nMyozIDJmYF
z6Q^=8-`wQ%Ft58`xv{kcRU?06{4~#ImU`l}KO-pc^HPlEZ7uJ3!YeY?;^vMv!)Ik)
z>1%Up{l1az^+3NwetU^j-dexEm=n*v_eApUajkFShPVBb;S6!Tt)b+4@={5bn%gl9
zpXRtc%n^9%wN{ep>)^+^uH{g>=xsWlQXrqlFxMzzP{PLZbWY5JDGG|GrQc5Ata&({
zku?5hZL(x+66G2}wkr8>80@-h>(-LSDwLdGJtCoJ>hPn1RG#;>pX3vHjxiO{;Oqvk
z=%oy=cJ4A_)D-=_p>(Obr0BsHbrJfdU2%Sg3^da<ir?Wr4ncAlL4nus);W}hUk|Gf
z_XKgaQ!A0xUWn|RTx^(F!&!$!-<j9alS9CJ%q!w2S^n@SF7b!A=_vHh6&Qb?M@dVn
z_NG@rCfP>N?vBkm-AW%NFnj{fGlH7_{0mKSoa??$ul|75+CufOP~S;s8zE+a-e=`{
z6Wo2|wwVKPDqV*m`1dMs*js+_h!c1B^wHhJCSHNk5%B;ww(Yul#66Rq(DL{%#o{aG
zI8G>W|JHG(aJx`g$^7pxiEsP;j*nSkZW{?0r{K*ihlT1<6*Hn65?^*tg0#uKMht!8
zCJ%o4v>>K+l;(K@=euBE-yW}Y_wa6iA+9$dj6%L<8eq262+`Z}|K`<eouab)nefV_
zKjnO8DXM;<eGC3>e-cD<IsI9?D^&B>b6~+j+R><p^(D{uNM#}GdV)hrl)l1v<KYkS
z&gftHcGkh3YnLtR{Y3ayujRG&xG}vD@-Jd(?j3*`cqfTPk~7>FzMaJAhWJhUifqZp
z1&1vsry@S=ju?emMUtW`h>5h_#;v*PV&uIgB2i1YzrQ*OQGAmx*$vw$`fl%+PFH5i
zIYIFxF&Rv*FGhYX{iJloI9i-zz-`+)P51T|V!>_0dKsrO5Bqds+=d+SUR#@U87GgP
z4Tw`*9r~sn)~g#r{D|*Fzd4B=fNke6eTwhF+hfzYJS+><!zfZ5K56WB7K*fmYIRYM
zgt9zu2nE!|dNMvK@=H<<Pdx+e+yQlIXFxWUBRt2G_I(k{oCd;94?&ZwHe$qBk(gvz
zMILgN8)o!8#&*Q)rAxk=aU%`9Z0@rvTyp7@aO{66t9{i@2Lb#c=KA)&Cr!W{G8uQA
znTBhFq^n=(b5An<eL{p(cT}T?v#-XBBaZPaY{ujVF_yotJ1b5CA=4u6f(wzpm8|`H
z%-lvpxmi%*&`sHou)g6Pb{DJbRpRdOcnodw`m5mUhC(nmiyL{Il49<4k1@1`Zn)r_
z0QB@a=we%LDf4qFnlCa`f{CmUDxsaMaj;^|Dzd908Xd=LHF%IZ+d$M97ZINvbto`>
zz6J3?OD!i1|M-$2Vvg^vh#Q_>jdpLu`|ov=nUffT|8R3Dd%JYpGmcOXLFs&joiq>C
zcS-!tAfx9sFq@&2EcZxctWdFX>T2J~U($;oM=(q~`^SMVw%<h=$KVa6k?i>uUR6u=
z%0V&0Iq=f0l8&55Y~N*M(w<erMrpPJB*h0ux}K6$tS<V((;IO?j1P-UrS8qIbXj7h
zMt>Fleg53l{7?2gs<e8;x5sR3+do)hzoq@Suct8K%<8d9WqFaj1)R%wZ=$nUV%2ou
z^kiBh7d4UDSt6Vd!Nxf=4KeL`Q`s6STSrG_1*xndHPKlj{bBMFYKKJx6=Wxh3X-~v
z+BuLw?exf_6b8jn3U6dk3dL|#L!20@!B={KSccS1D=8B-%GxMnHp{9l+q29XDx0~H
zl~&f}m~~KA?UqHjDU~ezav)6pn|l?J>#92W(XHo1QHk~|IUdi6y4>pV0t#Q8W8>yl
z(FH#6C+{F}VqQgqV%u$tX@%sFm+EhWZayU{?QQA8_<ZUfcT{pS7#0ndZB=}X&nBa)
z)Q@+mwEG$+TchC47Qso}CDB^Y?8<SCo{WQ?^M6Pd?jYs$AL2wf90v-XyAnS2ySR2q
zgN?pOeO=WeYyhO9ROFBQYo1Uld%Rt!wygI)l3ZbdEl27kG3*cZmI&+Pe7V`kg{f*y
zDXUMf2o525vDW-!KksVrdBcxzT44-4Nx@{&h|_bmgvSg^L%n!i6n0OJ?RjCU_DLR@
za9hv}ksmap^oeOfqreNk_#p5I;7Yzle$Cm#j&IpWyG0h1ENW+C?p44Za}GD!nn`;V
z`Zb;Jb5v+7xLwyfFuPD-KcsZrKLGQK?{R-jR5lIXP!#8@9MWu7?nAPFDDbTNVhCHm
zrtk5H$f}N|90C=J{mvHcc(o}gW1lc~u9;-dD-6S6^%?N(WrOpu_3J{c$HB!6YaXf3
z<dapWYP1CF;&Zz1+6g&be*0;t5&W?mREqtxTRFbeaXI3V4Q$;`h<(M%r+rN<^_ezN
zO}R=#bYzhGULz|qNzcELeERu=c8Cv}3=}Jet7dr4FIWlMUQWm$ea$+pQmwN)XyWG&
zQSLLGNc`~>BLv4h(1Ts1r)|zTXvgs0d-+heTZ8<SPn59T?7bxTK|84YGhe={a!N90
z<?rvVGz+XdPg*z)Plg(qaAj?ZA7nDpEz0#KQ(p$VV*NP;YFy1iQa$|X1!~blt>^om
zkBzPM5H4c<Sq18}hKL+}UfIQ~gbK_QUQIbO!=9JylH%bH3cMD)+{%+E8#9^OL$dX@
zG$?T#Ti*B-XMp<}!IRKKH(m3!iJyMvx-P>dyui1z=))Vb^bdL)pK;@MjBWFJh8u6=
z4vh0OlRP$LkauAgn#mp;7my&=s78uMO%f6fU3ED0&3ILg?Q9@B%m$uvNghpbkJ2Nd
zhyKRweN!!;ldHV^Tr$*}nF6F<madtbkocl9MhxUepHU0ZAur^1WJzZ<=C9%=cCD*b
zKf0E4TKCF+qAp5Dn?UQIrFv{YkuuyJBIg-o;%`9htZJf~b><`{#@ft1GTz?HM5pH+
z2PXF@9*s<|&A%7pTnP+)N<zc!7ow+|#$Bq}o9~^nsOugsollV8Uca-oMA}{aLfcEd
z#Jr1om`kBvVn)5to}(G!-FEw-AuCHI5nIJfN4|xKP7VK4PX}+)`67t?`a65G*{r64
zAIw6RZw)$Rg^d<1UX{{RLJ9ZSUu_%z`R$S!4AJ&(#P42-T^>{}$z|6zTP9vYY_Nf$
zV*)Vk?j*(RhTJ1wx!COFZH0?x1P$kA$}yx`A7!uWD{+QGt&IDI8(nqS_hb2`-_!^^
z-sD+~oLvurJdE_34UM%Nc=~ZJ^!e-+f2+~fW=*{0KTfo<d<j=>VcpYOig_R3+T?j-
z^bh~GPiNMt@(UB`<)7Ivp+0N>a(q`<ogJ}7oIWYTCq$AaA{|Zt0`U}&pQiKTt{!b|
zv9jEnbDu`ApG%Ke`y2JkExnD@k>R7iAgV^S!&?zD-4PQNgz+~`y{F=;2qHznDZQD&
z-1db_k@>#M-kXN)xk=27HAhP^|4+iz`DE>;S+@z5*-JTruQqJ;G?57IUryI$gV)~H
zHIpTgVhNA!Y-~-WU2E&AYo(1=Xv$i}D{cN6my;cqmNE1OBvj<zmo@aKzxls+MO)UR
wqP)`V!d$$E{ADS1S%jFT+*LY(b&Ef2a$ehs{&#;v&)#_^259{{-J5a$1JTnh+yDRo

literal 0
HcmV?d00001

diff --git a/packages/plugins/Solana/src/base.ts b/packages/plugins/Solana/src/base.ts
index b4174881abd1..c328af78bd37 100644
--- a/packages/plugins/Solana/src/base.ts
+++ b/packages/plugins/Solana/src/base.ts
@@ -1,8 +1,15 @@
 import type { Plugin } from '@masknet/plugin-infra'
+import {
+    NETWORK_DESCRIPTORS,
+    PROVIDER_DESCRIPTORS,
+    ChainId,
+    NetworkType,
+    ProviderType,
+} from '@masknet/web3-shared-solana'
 import { languages } from './locales/languages'
-import { PLUGIN_ID, PLUGIN_NAME, PLUGIN_DESCRIPTION, PLUGIN_PROVIDERS, PLUGIN_NETWORKS } from './constants'
+import { PLUGIN_ID, PLUGIN_NAME, PLUGIN_DESCRIPTION } from './constants'
 
-export const base: Plugin.Shared.Definition = {
+export const base: Plugin.Shared.Definition<ChainId, ProviderType, NetworkType> = {
     ID: PLUGIN_ID,
     name: { fallback: PLUGIN_NAME },
     description: { fallback: PLUGIN_DESCRIPTION },
@@ -13,7 +20,6 @@ export const base: Plugin.Shared.Definition = {
         target: 'stable',
     },
     i18n: languages,
-    declareApplicationCategories: [],
-    declareWeb3Networks: PLUGIN_NETWORKS,
-    declareWeb3Providers: PLUGIN_PROVIDERS,
+    declareWeb3Networks: NETWORK_DESCRIPTORS,
+    declareWeb3Providers: PROVIDER_DESCRIPTORS,
 }
diff --git a/packages/plugins/Solana/src/constants.ts b/packages/plugins/Solana/src/constants.ts
index ecb84d0ecbc4..05958b7c0861 100644
--- a/packages/plugins/Solana/src/constants.ts
+++ b/packages/plugins/Solana/src/constants.ts
@@ -1,42 +1,11 @@
-import type { Web3Plugin } from '@masknet/plugin-infra/web3'
-import { ChainId, NetworkType, ProviderType } from '@masknet/web3-shared-solana'
+import { NetworkPluginID } from '@masknet/web3-shared-base'
+import { ChainId } from '@masknet/web3-shared-solana'
 import { PublicKey } from '@solana/web3.js'
 
-export const PLUGIN_META_KEY = 'com.mask.solana'
-export const PLUGIN_ID = 'com.mask.solana'
+export const PLUGIN_META_KEY = NetworkPluginID.PLUGIN_SOLANA
+export const PLUGIN_ID = NetworkPluginID.PLUGIN_SOLANA
 export const PLUGIN_NAME = 'Solana Chain'
 export const PLUGIN_DESCRIPTION = ''
-export const PLUGIN_NETWORKS: Web3Plugin.NetworkDescriptor[] = [
-    {
-        ID: `${PLUGIN_ID}_solana`,
-        networkSupporterPluginID: PLUGIN_ID,
-        chainId: ChainId.Mainnet,
-        type: NetworkType.Solana,
-        name: 'Solana',
-        icon: new URL('./assets/solana.png', import.meta.url),
-        iconColor: '#5d6fc0',
-        isMainnet: true,
-    },
-    {
-        ID: `${PLUGIN_ID}_solana_testnet`,
-        networkSupporterPluginID: PLUGIN_ID,
-        chainId: ChainId.Testnet,
-        type: NetworkType.Solana,
-        name: 'Solana Testnet',
-        icon: new URL('./assets/solana.png', import.meta.url),
-        iconColor: '#5d6fc0',
-        isMainnet: false,
-    },
-]
-export const PLUGIN_PROVIDERS: Web3Plugin.ProviderDescriptor[] = [
-    {
-        ID: `${PLUGIN_ID}_phantom`,
-        providerAdaptorPluginID: PLUGIN_ID,
-        type: ProviderType.Phantom,
-        name: 'Phantom',
-        icon: new URL('./assets/phantom.png', import.meta.url),
-    },
-]
 
 export const NETWORK_ENDPOINTS: Record<ChainId, string> = {
     [ChainId.Mainnet]: 'https://solana-api.projectserum.com',
diff --git a/packages/plugins/Solana/src/env.d.ts b/packages/plugins/Solana/src/env.d.ts
new file mode 100644
index 000000000000..868322d5ff30
--- /dev/null
+++ b/packages/plugins/Solana/src/env.d.ts
@@ -0,0 +1 @@
+/// <reference types="@masknet/global-types/webpack" />
diff --git a/packages/plugins/Solana/src/helpers/formatter.ts b/packages/plugins/Solana/src/helpers/formatter.ts
deleted file mode 100644
index f00e6bed08b5..000000000000
--- a/packages/plugins/Solana/src/helpers/formatter.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { toFixed } from '@masknet/web3-shared-base'
-import type BigNumber from 'bignumber.js'
-
-export function formatAddress(address: string, size = 0) {
-    if (size === 0 || size >= 22) return address
-    return `${address.slice(0, Math.max(0, 2 + size))}...${address.slice(-size)}`
-}
-
-export function formatCurrency(value: BigNumber.Value, sign = '') {
-    const digits = toFixed(value)
-    return `${sign}${digits}`
-}
diff --git a/packages/plugins/Solana/src/helpers/index.ts b/packages/plugins/Solana/src/helpers/index.ts
index cf2dcad8733b..96cac2131cd2 100644
--- a/packages/plugins/Solana/src/helpers/index.ts
+++ b/packages/plugins/Solana/src/helpers/index.ts
@@ -1,2 +1 @@
-export * from './formatter'
 export * from './token'
diff --git a/packages/plugins/Solana/src/helpers/token.ts b/packages/plugins/Solana/src/helpers/token.ts
index 97023a39e81c..777874abb25e 100644
--- a/packages/plugins/Solana/src/helpers/token.ts
+++ b/packages/plugins/Solana/src/helpers/token.ts
@@ -1,6 +1,12 @@
-import { CurrencyType, TokenType, Web3Plugin } from '@masknet/plugin-infra/web3'
-import { leftShift, multipliedBy } from '@masknet/web3-shared-base'
-import type { ChainId } from '@masknet/web3-shared-solana'
+import {
+    FungibleToken,
+    CurrencyType,
+    TokenType,
+    leftShift,
+    multipliedBy,
+    FungibleAsset,
+} from '@masknet/web3-shared-base'
+import { ChainId, SchemaType } from '@masknet/web3-shared-solana'
 
 export function createFungibleToken(
     chainId: ChainId,
@@ -8,33 +14,32 @@ export function createFungibleToken(
     name: string,
     symbol: string,
     decimals: number,
-): Web3Plugin.FungibleToken {
+    logoURL?: string,
+): FungibleToken<ChainId, SchemaType> {
     return {
         id: address,
         chainId,
         type: TokenType.Fungible,
+        schema: SchemaType.Fungible,
         address,
         name,
         symbol,
         decimals,
+        logoURL,
     }
 }
 
 export function createFungibleAsset(
-    token: Web3Plugin.FungibleToken,
+    token: FungibleToken<ChainId, SchemaType>,
     balance: string,
-    logoURI?: string,
     price?: { [key in CurrencyType]?: string },
-): Web3Plugin.Asset {
+): FungibleAsset<ChainId, SchemaType> {
     return {
-        id: token.address,
-        chainId: token.chainId,
+        ...token,
         balance: leftShift(balance, token.decimals).toFixed(),
-        token,
-        logoURI,
+        price,
         value: {
             [CurrencyType.USD]: multipliedBy(price?.usd ?? 0, leftShift(balance, token.decimals)).toFixed(),
         },
-        price,
     }
 }
diff --git a/packages/plugins/Solana/src/index.ts b/packages/plugins/Solana/src/index.ts
index cbdb91d7b854..f0c67536399a 100644
--- a/packages/plugins/Solana/src/index.ts
+++ b/packages/plugins/Solana/src/index.ts
@@ -1,8 +1,36 @@
 import { registerPlugin } from '@masknet/plugin-infra'
-
+import type {
+    ChainId,
+    NetworkType,
+    ProviderType,
+    SchemaType,
+    Signature,
+    GasOption,
+    Block,
+    Transaction,
+    TransactionReceipt,
+    TransactionDetailed,
+    TransactionParameter,
+    TransactionSignature,
+    Web3,
+} from '@masknet/web3-shared-solana'
 import { base } from './base'
 
-registerPlugin({
+registerPlugin<
+    ChainId,
+    SchemaType,
+    ProviderType,
+    NetworkType,
+    Signature,
+    GasOption,
+    Block,
+    Transaction,
+    TransactionReceipt,
+    TransactionDetailed,
+    TransactionSignature,
+    TransactionParameter,
+    Web3
+>({
     ...base,
     SNSAdaptor: {
         load: () => import('./UI/SNSAdaptor'),
diff --git a/packages/plugins/Solana/src/settings/index.ts b/packages/plugins/Solana/src/settings/index.ts
new file mode 100644
index 000000000000..eccfcf509298
--- /dev/null
+++ b/packages/plugins/Solana/src/settings/index.ts
@@ -0,0 +1,6 @@
+import type { Plugin } from '@masknet/plugin-infra'
+import { createValueRefWithReady } from '@masknet/shared-base'
+import type { SolanaWeb3State } from '../state/Connection/types'
+
+export const Web3StateSettings = createValueRefWithReady<SolanaWeb3State>(null!)
+export const SharedContextSettings = createValueRefWithReady<Plugin.Shared.SharedContext>(null!)
diff --git a/packages/plugins/Solana/src/state/AddressBook.ts b/packages/plugins/Solana/src/state/AddressBook.ts
new file mode 100644
index 000000000000..d9672715d52c
--- /dev/null
+++ b/packages/plugins/Solana/src/state/AddressBook.ts
@@ -0,0 +1,25 @@
+import type { Subscription } from 'use-subscription'
+import { getEnumAsArray } from '@dimensiondev/kit'
+import type { Plugin } from '@masknet/plugin-infra'
+import { AddressBookState } from '@masknet/plugin-infra/web3'
+import { isSameAddress } from '@masknet/web3-shared-base'
+import { ChainId, formatAddress, isValidAddress } from '@masknet/web3-shared-solana'
+
+export class AddressBook extends AddressBookState<ChainId, Record<ChainId, string[]>> {
+    constructor(
+        context: Plugin.Shared.SharedContext,
+        subscriptions: {
+            chainId?: Subscription<ChainId>
+        },
+    ) {
+        const defaultValue = Object.fromEntries(
+            getEnumAsArray(ChainId).map((x) => [x.value, []] as [ChainId, string[]]),
+        ) as Record<ChainId, string[]>
+
+        super(context, defaultValue, subscriptions, {
+            isValidAddress,
+            isSameAddress,
+            formatAddress,
+        })
+    }
+}
diff --git a/packages/plugins/Solana/src/state/Connection.ts b/packages/plugins/Solana/src/state/Connection.ts
new file mode 100644
index 000000000000..48fb57df3dac
--- /dev/null
+++ b/packages/plugins/Solana/src/state/Connection.ts
@@ -0,0 +1,42 @@
+import type { Subscription } from 'use-subscription'
+import type { Plugin } from '@masknet/plugin-infra'
+import { ConnectionState } from '@masknet/plugin-infra/web3'
+import type {
+    ChainId,
+    ProviderType,
+    SchemaType,
+    Web3,
+    Signature,
+    Block,
+    Transaction,
+    TransactionReceipt,
+    TransactionDetailed,
+    TransactionSignature,
+    Web3Provider,
+} from '@masknet/web3-shared-solana'
+import { createConnection } from './Connection/connection'
+
+export class Connection extends ConnectionState<
+    ChainId,
+    SchemaType,
+    ProviderType,
+    Signature,
+    Block,
+    Transaction,
+    TransactionReceipt,
+    TransactionDetailed,
+    TransactionSignature,
+    Web3,
+    Web3Provider
+> {
+    constructor(
+        private context: Plugin.Shared.SharedContext,
+        subscription: {
+            account?: Subscription<string>
+            chainId?: Subscription<ChainId>
+            providerType?: Subscription<ProviderType>
+        },
+    ) {
+        super(createConnection, subscription)
+    }
+}
diff --git a/packages/plugins/Solana/src/state/Connection/connection.ts b/packages/plugins/Solana/src/state/Connection/connection.ts
new file mode 100644
index 000000000000..1eab84f2eae0
--- /dev/null
+++ b/packages/plugins/Solana/src/state/Connection/connection.ts
@@ -0,0 +1,246 @@
+import {
+    BlockResponse,
+    Connection as SolanaConnection,
+    sendAndConfirmRawTransaction,
+    Transaction,
+} from '@solana/web3.js'
+import { ChainId, decodeAddress, ProviderType, SchemaType } from '@masknet/web3-shared-solana'
+import { Providers } from './provider'
+import type { SolanaConnection as BaseConnection, SolanaWeb3ConnectionOptions } from './types'
+import { NETWORK_ENDPOINTS } from '../../constants'
+import {
+    Account,
+    ConnectionOptions,
+    FungibleToken,
+    NonFungibleToken,
+    NonFungibleTokenCollection,
+    NonFungibleTokenContract,
+    TransactionStatusType,
+} from '@masknet/web3-shared-base'
+import { Web3StateSettings } from '../../settings'
+
+class Connection implements BaseConnection {
+    private connections: Map<ChainId, SolanaConnection> = new Map()
+
+    constructor(private chainId: ChainId, private account: string, private providerType: ProviderType) {}
+
+    private _getWeb3Provider(options?: SolanaWeb3ConnectionOptions) {
+        return Providers[options?.providerType ?? this.providerType]
+    }
+
+    async getWeb3(options?: SolanaWeb3ConnectionOptions) {
+        return this._getWeb3Provider(options).createWeb3(options?.chainId ?? this.chainId)
+    }
+
+    getWeb3Provider(options?: SolanaWeb3ConnectionOptions) {
+        return this._getWeb3Provider(options).createWeb3Provider(options?.chainId)
+    }
+
+    async connect(options?: SolanaWeb3ConnectionOptions): Promise<Account<ChainId>> {
+        return {
+            account: '',
+            chainId: ChainId.Mainnet,
+            ...(await Web3StateSettings.value.Provider?.connect(
+                options?.chainId ?? this.chainId,
+                options?.providerType ?? this.providerType,
+            )),
+        }
+    }
+    async disconnect(options?: SolanaWeb3ConnectionOptions): Promise<void> {
+        await Web3StateSettings.value.Provider?.disconnect(options?.providerType ?? this.providerType)
+    }
+    transferFungibleToken(
+        address: string,
+        recipient: string,
+        amount: string,
+        memo?: string,
+        options?: SolanaWeb3ConnectionOptions,
+    ): Promise<string> {
+        throw new Error('Method not implemented.')
+    }
+    transferNonFungibleToken(
+        address: string,
+        tokenId: string,
+        amount: string,
+        recipient: string,
+        options?: SolanaWeb3ConnectionOptions,
+    ): Promise<string> {
+        throw new Error('Method not implemented.')
+    }
+    getGasPrice(options?: SolanaWeb3ConnectionOptions): Promise<string> {
+        throw new Error('Method not implemented.')
+    }
+    getSchemaType(address: string, options?: SolanaWeb3ConnectionOptions): Promise<SchemaType> {
+        throw new Error('Method not implemented.')
+    }
+    getNonFungibleTokenContract(
+        address: string,
+        id: string,
+        options?: SolanaWeb3ConnectionOptions,
+    ): Promise<NonFungibleTokenContract<ChainId, SchemaType>> {
+        throw new Error('Method not implemented.')
+    }
+    getNonFungibleTokenCollection(
+        address: string,
+        options?: SolanaWeb3ConnectionOptions,
+    ): Promise<NonFungibleTokenCollection<ChainId>> {
+        throw new Error('Method not implemented.')
+    }
+    getBlockTimestamp(options?: SolanaWeb3ConnectionOptions): Promise<number> {
+        throw new Error('Method not implemented.')
+    }
+    switchChain?: ((options?: SolanaWeb3ConnectionOptions) => Promise<void>) | undefined
+    getNativeToken(options?: SolanaWeb3ConnectionOptions): Promise<FungibleToken<ChainId, SchemaType>> {
+        throw new Error('Method not implemented.')
+    }
+    getNativeTokenBalance(options?: SolanaWeb3ConnectionOptions): Promise<string> {
+        throw new Error('Method not implemented.')
+    }
+    getFungibleTokenBalance(address: string, options?: SolanaWeb3ConnectionOptions): Promise<string> {
+        throw new Error('Method not implemented.')
+    }
+    getNonFungibleTokenBalance(address: string, options?: SolanaWeb3ConnectionOptions): Promise<string> {
+        throw new Error('Method not implemented.')
+    }
+    getFungibleTokensBalance(
+        listOfAddress: string[],
+        options?: SolanaWeb3ConnectionOptions,
+    ): Promise<Record<string, string>> {
+        throw new Error('Method not implemented.')
+    }
+    getNonFungibleTokensBalance(
+        listOfAddress: string[],
+        options?: SolanaWeb3ConnectionOptions,
+    ): Promise<Record<string, string>> {
+        throw new Error('Method not implemented.')
+    }
+    getCode(address: string, options?: SolanaWeb3ConnectionOptions): Promise<string> {
+        throw new Error('Method not implemented.')
+    }
+
+    getWeb3Connection(options?: SolanaWeb3ConnectionOptions) {
+        const chainId = options?.chainId ?? this.chainId
+        const connection = this.connections.get(chainId) ?? new SolanaConnection(NETWORK_ENDPOINTS[chainId])
+        this.connections.set(chainId, connection)
+        return connection
+    }
+
+    getAccount(options?: SolanaWeb3ConnectionOptions) {
+        return Promise.resolve(options?.account ?? this.account)
+    }
+
+    getAccountInfo(account: string, options?: SolanaWeb3ConnectionOptions) {
+        return this.getWeb3Connection(options).getAccountInfo(decodeAddress(account))
+    }
+
+    getChainId(options?: SolanaWeb3ConnectionOptions) {
+        return Promise.resolve(options?.chainId ?? this.chainId)
+    }
+
+    getBlock(no: number, options?: SolanaWeb3ConnectionOptions): Promise<BlockResponse> {
+        throw new Error('Method not implemented.')
+    }
+
+    async getBlockNumber(options?: SolanaWeb3ConnectionOptions) {
+        // cspell:disable-next-line
+        const response = await this.getWeb3Connection(options).getLatestBlockhash()
+        return response.lastValidBlockHeight
+    }
+
+    async getBalance(account: string, options?: SolanaWeb3ConnectionOptions) {
+        const balance = await this.getWeb3Connection(options).getBalance(decodeAddress(account))
+        return balance.toFixed()
+    }
+
+    getTransaction(id: string, options?: SolanaWeb3ConnectionOptions) {
+        return this.getWeb3Connection(options).getTransaction(id)
+    }
+
+    async getTransactionReceipt(id: string, options?: SolanaWeb3ConnectionOptions) {
+        return null
+    }
+
+    async getTransactionStatus(id: string, options?: SolanaWeb3ConnectionOptions) {
+        const response = await this.getWeb3Connection(options).getSignatureStatus(id)
+        if (response.value?.err) return TransactionStatusType.FAILED
+        if (response.value?.confirmations && response.value.confirmations > 0) return TransactionStatusType.SUCCEED
+        return TransactionStatusType.NOT_DEPEND
+    }
+
+    async signMessage(dataToSign: string, signType?: string, options?: SolanaWeb3ConnectionOptions) {
+        return this._getWeb3Provider(options).signMessage(dataToSign)
+    }
+
+    async verifyMessage(
+        dataToVerify: string,
+        signature: string,
+        signType?: string,
+        options?: SolanaWeb3ConnectionOptions,
+    ): Promise<boolean> {
+        return this._getWeb3Provider(options).verifyMessage(dataToVerify, signature)
+    }
+
+    async signTransaction(transaction: Transaction, options?: SolanaWeb3ConnectionOptions) {
+        return this._getWeb3Provider(options).signTransaction(transaction)
+    }
+
+    signTransactions(transactions: Transaction[], options?: SolanaWeb3ConnectionOptions) {
+        return Promise.all(transactions.map((x) => this.signTransaction(x)))
+    }
+
+    callTransaction(transaction: Transaction, options?: SolanaWeb3ConnectionOptions): Promise<string> {
+        throw new Error('Method not implemented.')
+    }
+
+    async sendTransaction(transaction: Transaction, options?: SolanaWeb3ConnectionOptions) {
+        const signedTransaction = await this.signTransaction(transaction)
+        return sendAndConfirmRawTransaction(this.getWeb3Connection(options), signedTransaction.serialize())
+    }
+
+    sendSignedTransaction(signature: Transaction, options?: SolanaWeb3ConnectionOptions) {
+        return sendAndConfirmRawTransaction(this.getWeb3Connection(options), signature.serialize())
+    }
+
+    async getTransactionNonce(account: string, options?: SolanaWeb3ConnectionOptions): Promise<number> {
+        const response = await this.getWeb3Connection(options).getNonce(decodeAddress(account))
+        return response?.nonce ? Number.parseInt(response.nonce, 10) : 0
+    }
+
+    getFungibleToken(
+        address: string,
+        options?: SolanaWeb3ConnectionOptions,
+    ): Promise<FungibleToken<ChainId, SchemaType>> {
+        throw new Error('Method not implemented.')
+    }
+    getNonFungibleToken(
+        address: string,
+        id: string,
+        options?: SolanaWeb3ConnectionOptions,
+    ): Promise<NonFungibleToken<ChainId, SchemaType>> {
+        throw new Error('Method not implemented.')
+    }
+    confirmRequest?:
+        | ((options?: ConnectionOptions<ChainId, ProviderType, Transaction> | undefined) => Promise<void>)
+        | undefined
+    rejectRequest?:
+        | ((options?: ConnectionOptions<ChainId, ProviderType, Transaction> | undefined) => Promise<void>)
+        | undefined
+    replaceRequest(
+        hash: string,
+        config: Transaction,
+        options?: ConnectionOptions<ChainId, ProviderType, Transaction> | undefined,
+    ): Promise<void> {
+        throw new Error('Method not implemented.')
+    }
+    cancelRequest(
+        hash: string,
+        config: Transaction,
+        options?: ConnectionOptions<ChainId, ProviderType, Transaction> | undefined,
+    ): Promise<void> {
+        throw new Error('Method not implemented.')
+    }
+}
+
+export function createConnection(chainId = ChainId.Mainnet, account = '', providerType = ProviderType.Phantom) {
+    return new Connection(chainId, account, providerType)
+}
diff --git a/packages/plugins/Solana/src/state/Connection/provider.ts b/packages/plugins/Solana/src/state/Connection/provider.ts
new file mode 100644
index 000000000000..379fa26af00b
--- /dev/null
+++ b/packages/plugins/Solana/src/state/Connection/provider.ts
@@ -0,0 +1,13 @@
+import { ProviderType } from '@masknet/web3-shared-solana'
+import type { BaseProvider } from './providers/Base'
+import { Coin98Provider } from './providers/Coin98'
+import { PhantomProvider } from './providers/Phantom'
+import { SolflareProvider } from './providers/SolflareProvider'
+import { SolletProvider } from './providers/Sollet'
+
+export const Providers: Record<ProviderType, BaseProvider> = {
+    [ProviderType.Phantom]: new PhantomProvider(),
+    [ProviderType.Solflare]: new SolflareProvider(),
+    [ProviderType.Sollet]: new SolletProvider(),
+    [ProviderType.Coin98]: new Coin98Provider(),
+}
diff --git a/packages/plugins/Solana/src/state/Connection/providers/Base.ts b/packages/plugins/Solana/src/state/Connection/providers/Base.ts
new file mode 100644
index 000000000000..81fcca1ade27
--- /dev/null
+++ b/packages/plugins/Solana/src/state/Connection/providers/Base.ts
@@ -0,0 +1,52 @@
+import { Emitter } from '@servie/events'
+import type { Account, ProviderEvents } from '@masknet/web3-shared-base'
+import type { ChainId, ProviderType, Web3, Web3Provider } from '@masknet/web3-shared-solana'
+import type { SolanaProvider } from '../types'
+import type { Transaction } from '@solana/web3.js'
+
+export class BaseProvider implements SolanaProvider {
+    web3: Web3 | null = null
+
+    provider: Web3Provider | null = null
+
+    emitter = new Emitter<ProviderEvents<ChainId, ProviderType>>()
+
+    // No need to wait by default
+    get ready() {
+        return true
+    }
+
+    // No need to wait by default
+    get readyPromise() {
+        return Promise.resolve()
+    }
+
+    switchChain(chainId?: ChainId): Promise<void> {
+        throw new Error('Method not implemented.')
+    }
+
+    signMessage(dataToSign: string): Promise<string> {
+        throw new Error('Method not implemented.')
+    }
+    verifyMessage(dataToVerify: string, signature: string): Promise<boolean> {
+        throw new Error('Method not implemented.')
+    }
+    signTransaction(transaction: Transaction): Promise<Transaction> {
+        throw new Error('Method not implemented.')
+    }
+    signTransactions(transactions: Transaction[]): Promise<Transaction[]> {
+        return Promise.all(transactions.map((x) => this.signTransaction(x)))
+    }
+    createWeb3(chainId?: ChainId): Promise<Web3> {
+        throw new Error('Method not implemented.')
+    }
+    createWeb3Provider(chainId?: ChainId): Promise<Web3Provider> {
+        throw new Error('Method not implemented.')
+    }
+    connect(chainId: ChainId): Promise<Account<ChainId>> {
+        throw new Error('Method not implemented.')
+    }
+    disconnect(): Promise<void> {
+        throw new Error('Method not implemented.')
+    }
+}
diff --git a/packages/plugins/Solana/src/state/Connection/providers/BaseInjected.ts b/packages/plugins/Solana/src/state/Connection/providers/BaseInjected.ts
new file mode 100644
index 000000000000..06ed6b725e20
--- /dev/null
+++ b/packages/plugins/Solana/src/state/Connection/providers/BaseInjected.ts
@@ -0,0 +1,63 @@
+import { isExtensionSiteType } from '@masknet/shared-base'
+import type { InjectedProvider } from '@masknet/injected-script/sdk/Base'
+import type { Account } from '@masknet/web3-shared-base'
+import type { ChainId, ProviderType, Web3Provider } from '@masknet/web3-shared-solana'
+import type { SolanaProvider } from '../types'
+import { BaseProvider } from './Base'
+
+export class BaseInjectedProvider extends BaseProvider implements SolanaProvider {
+    constructor(protected providerType: ProviderType, protected bridge: InjectedProvider) {
+        super()
+
+        bridge.on('accountsChanged', this.onAccountsChanged.bind(this))
+        bridge.on('chainChanged', this.onChainChanged.bind(this))
+        bridge.on('disconnect', this.onDisconnect.bind(this))
+    }
+
+    override get ready() {
+        return this.bridge.isReady
+    }
+
+    override get readyPromise() {
+        if (isExtensionSiteType()) return Promise.reject(new Error('Not available on extension site.'))
+        return this.bridge.untilAvailable().then(() => undefined)
+    }
+
+    protected onAccountsChanged(accounts: string[]) {
+        this.emitter.emit('accounts', accounts)
+    }
+
+    protected onChainChanged(chainId: string) {
+        this.emitter.emit('chainId', chainId)
+    }
+
+    protected onDisconnect() {
+        this.emitter.emit('disconnect', this.providerType)
+    }
+
+    override async createWeb3Provider(chainId?: ChainId) {
+        await this.readyPromise
+
+        if (!this.bridge) throw new Error('Failed to detect in-page provider.')
+        return this.bridge as unknown as Web3Provider
+    }
+
+    override async connect(chainId: ChainId): Promise<Account<ChainId>> {
+        await this.readyPromise
+
+        const provider = await this.createWeb3Provider()
+        const response = await provider.connect()
+
+        return {
+            chainId,
+            account: response.publicKey,
+        }
+    }
+
+    override async disconnect(): Promise<void> {
+        await this.readyPromise
+
+        const provider = await this.createWeb3Provider()
+        await provider.disconnect()
+    }
+}
diff --git a/packages/plugins/Solana/src/state/Connection/providers/Coin98.ts b/packages/plugins/Solana/src/state/Connection/providers/Coin98.ts
new file mode 100644
index 000000000000..a6a07219fc44
--- /dev/null
+++ b/packages/plugins/Solana/src/state/Connection/providers/Coin98.ts
@@ -0,0 +1,48 @@
+import { first } from 'lodash-unified'
+import type { PublicKey, Transaction } from '@solana/web3.js'
+import { injectedCoin98SolanaProvider } from '@masknet/injected-script'
+import type { Account } from '@masknet/web3-shared-base'
+import { ChainId, Coin98MethodType, ProviderType } from '@masknet/web3-shared-solana'
+import type { SolanaProvider } from '../types'
+import { BaseInjectedProvider } from './BaseInjected'
+
+export class Coin98Provider extends BaseInjectedProvider implements SolanaProvider {
+    constructor() {
+        super(ProviderType.Coin98, injectedCoin98SolanaProvider)
+    }
+
+    override async signMessage(dataToSign: string): Promise<string> {
+        const { signature } = (await this.bridge.request({
+            method: Coin98MethodType.SOL_SIGN,
+            params: [new TextEncoder().encode(dataToSign)],
+        })) as { signature: string }
+        return signature
+    }
+
+    override async signTransaction(transaction: Transaction): Promise<Transaction> {
+        const { signature, publicKey } = (await this.bridge.request({
+            method: Coin98MethodType.SOL_SIGN,
+            params: [transaction],
+        })) as { signature: Buffer; publicKey: PublicKey }
+        transaction.addSignature(publicKey, signature)
+        return transaction
+    }
+
+    override async connect(chainId: ChainId): Promise<Account<ChainId>> {
+        await this.readyPromise
+
+        const accounts = (await this.bridge.request({
+            method: Coin98MethodType.SOL_ACCOUNTS,
+            params: [],
+        })) as string[]
+
+        return {
+            chainId,
+            account: first(accounts) ?? '',
+        }
+    }
+
+    override async disconnect() {
+        // do nothing
+    }
+}
diff --git a/packages/plugins/Solana/src/state/Connection/providers/Phantom.ts b/packages/plugins/Solana/src/state/Connection/providers/Phantom.ts
new file mode 100644
index 000000000000..acc34591ae0d
--- /dev/null
+++ b/packages/plugins/Solana/src/state/Connection/providers/Phantom.ts
@@ -0,0 +1,42 @@
+import bs58 from 'bs58'
+import type { Transaction } from '@solana/web3.js'
+import { injectedPhantomProvider } from '@masknet/injected-script'
+import { PhantomMethodType, ProviderType } from '@masknet/web3-shared-solana'
+import type { SolanaProvider } from '../types'
+import { BaseInjectedProvider } from './BaseInjected'
+
+export class PhantomProvider extends BaseInjectedProvider implements SolanaProvider {
+    constructor() {
+        super(ProviderType.Phantom, injectedPhantomProvider)
+    }
+
+    override signMessage(dataToSign: string) {
+        return this.bridge.request({
+            method: PhantomMethodType.SIGN_MESSAGE,
+            params: {
+                message: new TextEncoder().encode(dataToSign),
+                display: 'hex',
+            },
+        }) as Promise<string>
+    }
+
+    override signTransaction(transaction: Transaction) {
+        return this.bridge.request({
+            method: PhantomMethodType.SIGN_TRANSACTION,
+            params: {
+                message: bs58.encode(transaction.serializeMessage()),
+            },
+        }) as Promise<Transaction>
+    }
+
+    override async signTransactions(transactions: Transaction[]) {
+        return this.bridge.request({
+            method: 'signAllTransactions',
+            params: {
+                message: transactions.map((transaction) => {
+                    return bs58.encode(transaction.serializeMessage())
+                }),
+            },
+        }) as Promise<Transaction[]>
+    }
+}
diff --git a/packages/plugins/Solana/src/state/Connection/providers/SolflareProvider.ts b/packages/plugins/Solana/src/state/Connection/providers/SolflareProvider.ts
new file mode 100644
index 000000000000..b00091e31321
--- /dev/null
+++ b/packages/plugins/Solana/src/state/Connection/providers/SolflareProvider.ts
@@ -0,0 +1,28 @@
+import type { PublicKey, Transaction } from '@solana/web3.js'
+import { injectedSolflareProvider } from '@masknet/injected-script'
+import { Coin98MethodType, ProviderType } from '@masknet/web3-shared-solana'
+import type { SolanaProvider } from '../types'
+import { BaseInjectedProvider } from './BaseInjected'
+
+export class SolflareProvider extends BaseInjectedProvider implements SolanaProvider {
+    constructor() {
+        super(ProviderType.Solflare, injectedSolflareProvider)
+    }
+
+    override async signMessage(dataToSign: string): Promise<string> {
+        const { signature } = (await this.bridge.request({
+            method: Coin98MethodType.SOL_SIGN,
+            params: [new TextEncoder().encode(dataToSign)],
+        })) as { signature: string }
+        return signature
+    }
+
+    override async signTransaction(transaction: Transaction): Promise<Transaction> {
+        const { signature, publicKey } = (await this.bridge.request({
+            method: Coin98MethodType.SOL_SIGN,
+            params: [transaction],
+        })) as { signature: Buffer; publicKey: PublicKey }
+        transaction.addSignature(publicKey, signature)
+        return transaction
+    }
+}
diff --git a/packages/plugins/Solana/src/state/Connection/providers/Sollet.ts b/packages/plugins/Solana/src/state/Connection/providers/Sollet.ts
new file mode 100644
index 000000000000..440634d68d40
--- /dev/null
+++ b/packages/plugins/Solana/src/state/Connection/providers/Sollet.ts
@@ -0,0 +1,54 @@
+import type { Transaction } from '@solana/web3.js'
+import Wallet from '@project-serum/sol-wallet-adapter'
+import { ChainId, ProviderType } from '@masknet/web3-shared-solana'
+import type { SolanaProvider } from '../types'
+import { BaseProvider } from './Base'
+
+export class SolletProvider extends BaseProvider implements SolanaProvider {
+    private wallet: Wallet | null = null
+
+    private get solanaProvider() {
+        if (!this.wallet) throw new Error('No connection.')
+        return this.wallet
+    }
+
+    private set solanaProvider(newWallet: Wallet) {
+        this.wallet = newWallet
+    }
+
+    constructor(private providerURL = 'https://www.sollet.io') {
+        super()
+    }
+
+    override async signMessage(dataToSign: string) {
+        const data = new TextEncoder().encode(dataToSign)
+        const { signature } = await this.solanaProvider.sign(data, 'uft8')
+        return signature.toString('utf8')
+    }
+
+    override signTransaction(transaction: Transaction) {
+        return this.solanaProvider.signTransaction(transaction)
+    }
+
+    override signTransactions(transactions: Transaction[]) {
+        return this.solanaProvider.signAllTransactions(transactions)
+    }
+
+    override async connect(chainId: ChainId) {
+        this.solanaProvider = new Wallet(this.providerURL, '')
+        await this.solanaProvider.connect()
+        return {
+            chainId,
+            account: this.solanaProvider.publicKey?.toBase58() ?? '',
+        }
+    }
+
+    override async disconnect() {
+        this.solanaProvider = new Wallet(this.providerURL, '')
+        await this.solanaProvider.disconnect()
+        this.emitter.emit('disconnect', ProviderType.Sollet)
+
+        // clean the internal wallet
+        this.wallet = null
+    }
+}
diff --git a/packages/plugins/Solana/src/state/Connection/types.ts b/packages/plugins/Solana/src/state/Connection/types.ts
new file mode 100644
index 000000000000..df0d36274777
--- /dev/null
+++ b/packages/plugins/Solana/src/state/Connection/types.ts
@@ -0,0 +1,21 @@
+import type { AccountInfo } from '@solana/web3.js'
+import type { Web3Helper } from '@masknet/plugin-infra/web3'
+import type { ChainId, ProviderType, Transaction, Web3, Web3Provider } from '@masknet/web3-shared-solana'
+import type { NetworkPluginID, WalletProvider } from '@masknet/web3-shared-base'
+
+export interface SolanaWeb3State extends Web3Helper.Web3State<NetworkPluginID.PLUGIN_SOLANA> {}
+
+export interface SolanaWeb3ConnectionOptions extends Web3Helper.Web3ConnectionOptions<NetworkPluginID.PLUGIN_SOLANA> {}
+
+export interface SolanaProvider extends WalletProvider<ChainId, ProviderType, Web3Provider, Web3> {
+    /** Sign message. */
+    signMessage(dataToSign: string): Promise<string>
+    /** Sign a transaction. */
+    signTransaction(transaction: Transaction): Promise<Transaction>
+    /** Sign multiple transactions. */
+    signTransactions(transactions: Transaction[]): Promise<Transaction[]>
+}
+
+export interface SolanaConnection extends Web3Helper.Web3Connection<NetworkPluginID.PLUGIN_SOLANA> {
+    getAccountInfo(account: string): Promise<AccountInfo<Buffer> | null>
+}
diff --git a/packages/plugins/Solana/src/state/Hub.ts b/packages/plugins/Solana/src/state/Hub.ts
new file mode 100644
index 000000000000..73753ade5ec6
--- /dev/null
+++ b/packages/plugins/Solana/src/state/Hub.ts
@@ -0,0 +1,20 @@
+import type { CurrencyType, SourceType } from '@masknet/web3-shared-base'
+import { HubState } from '@masknet/plugin-infra/web3'
+import type { ChainId, GasOption, SchemaType } from '@masknet/web3-shared-solana'
+import type { Plugin } from '@masknet/plugin-infra'
+import type { Subscription } from 'use-subscription'
+import { createHub } from './Hub/hub'
+
+export class Hub extends HubState<ChainId, SchemaType, GasOption> {
+    constructor(
+        private context: Plugin.Shared.SharedContext,
+        subscription: {
+            account?: Subscription<string>
+            chainId?: Subscription<ChainId>
+            sourceType?: Subscription<SourceType>
+            currencyType?: Subscription<CurrencyType>
+        },
+    ) {
+        super(createHub, subscription)
+    }
+}
diff --git a/packages/plugins/Solana/src/state/Hub/hub.ts b/packages/plugins/Solana/src/state/Hub/hub.ts
new file mode 100644
index 000000000000..536f9afbf9c5
--- /dev/null
+++ b/packages/plugins/Solana/src/state/Hub/hub.ts
@@ -0,0 +1,144 @@
+import type {
+    FungibleToken,
+    NonFungibleToken,
+    SourceType,
+    FungibleAsset,
+    HubOptions,
+    NonFungibleAsset,
+    Pageable,
+    GasOptionType,
+    CurrencyType,
+    Transaction,
+} from '@masknet/web3-shared-base'
+import { ChainId, GasOption, SchemaType } from '@masknet/web3-shared-solana'
+import { SolanaRPC } from '../../messages'
+import type { SolanaHub } from './types'
+
+class Hub implements SolanaHub {
+    constructor(
+        private chainId: ChainId,
+        private account: string,
+        private sourceType?: SourceType,
+        private currencyType?: CurrencyType,
+        private sizePerPage = 50,
+        private maxPageSize = 25,
+    ) {}
+
+    async getFungibleTokensFromTokenList(
+        chainId: ChainId,
+        options?: HubOptions<ChainId> | undefined,
+    ): Promise<Array<FungibleToken<ChainId, SchemaType>>> {
+        throw new Error('Method not implemented.')
+    }
+    async getNonFungibleTokensFromTokenList(
+        chainId: ChainId,
+        options?: HubOptions<ChainId> | undefined,
+    ): Promise<Array<NonFungibleToken<ChainId, SchemaType>>> {
+        throw new Error('Method not implemented.')
+    }
+    getGasOptions(
+        chainId: ChainId,
+        options?: HubOptions<ChainId> | undefined,
+    ): Promise<Record<GasOptionType, GasOption>> {
+        throw new Error('Method not implemented.')
+    }
+    getFungibleAsset(
+        address: string,
+        options?: HubOptions<ChainId> | undefined,
+    ): Promise<FungibleAsset<ChainId, SchemaType>> {
+        throw new Error('Method not implemented.')
+    }
+    async getNonFungibleAsset(
+        address: string,
+        tokenId: string,
+        options?: HubOptions<ChainId> | undefined,
+    ): Promise<NonFungibleAsset<ChainId, SchemaType> | undefined> {
+        throw new Error('Method not implemented.')
+    }
+    async getFungibleAssets(
+        account: string,
+        options?: HubOptions<ChainId> | undefined,
+    ): Promise<Pageable<FungibleAsset<ChainId, SchemaType>>> {
+        return SolanaRPC.getFungibleAssets(account, options)
+    }
+    getNonFungibleAssets(
+        account: string,
+        options?: HubOptions<ChainId> | undefined,
+    ): Promise<Pageable<NonFungibleAsset<ChainId, SchemaType>>> {
+        return SolanaRPC.getNonFungibleAssets(account, options)
+    }
+    getFungibleTokenPrice(
+        chainId: ChainId,
+        address: string,
+        options?: HubOptions<ChainId> | undefined,
+    ): Promise<number> {
+        throw new Error('Method not implemented.')
+    }
+    getNonFungibleTokenPrice(
+        chainId: ChainId,
+        address: string,
+        tokenId: string,
+        options?: HubOptions<ChainId> | undefined,
+    ): Promise<never> {
+        throw new Error('Method not implemented.')
+    }
+    async getFungibleTokenIconURLs(
+        chainId: ChainId,
+        address: string,
+        options?: HubOptions<ChainId> | undefined,
+    ): Promise<string[]> {
+        throw new Error('Method not implemented.')
+    }
+    getNonFungibleTokenIconURLs(
+        chainId: ChainId,
+        address: string,
+        tokenId?: string | undefined,
+        options?: HubOptions<ChainId> | undefined,
+    ): Promise<string[]> {
+        throw new Error('Method not implemented.')
+    }
+    getTransactions(
+        chainId: ChainId,
+        account: string,
+        options?: HubOptions<ChainId> | undefined,
+    ): Promise<Pageable<Transaction<ChainId, SchemaType>>> {
+        throw new Error('Method not implemented.')
+    }
+
+    async *getAllFungibleAssets(address: string): AsyncIterableIterator<FungibleAsset<ChainId, SchemaType>> {
+        for (let i = 0; i < this.maxPageSize; i += 1) {
+            const pageable = await this.getFungibleAssets(address, {
+                page: i,
+                size: this.sizePerPage,
+            })
+
+            yield* pageable.data
+
+            if (pageable.data.length === 0) return
+        }
+    }
+
+    async *getAllNonFungibleAssets(address: string): AsyncIterableIterator<NonFungibleAsset<ChainId, SchemaType>> {
+        for (let i = 0; i < this.maxPageSize; i += 1) {
+            const pageable = await this.getNonFungibleAssets(address, {
+                page: i,
+                size: this.sizePerPage,
+            })
+
+            yield* pageable.data
+
+            if (pageable.data.length === 0) return
+        }
+    }
+}
+
+export function createHub(
+    chainId = ChainId.Mainnet,
+    account = '',
+    sourceType?: SourceType,
+    currencyType?: CurrencyType,
+    sizePerPage?: number,
+    maxPageSize?: number,
+) {
+    return new Hub(chainId, account, sourceType, currencyType, sizePerPage, maxPageSize)
+}
diff --git a/packages/plugins/Solana/src/state/Hub/types.ts b/packages/plugins/Solana/src/state/Hub/types.ts
new file mode 100644
index 000000000000..cd46aea54332
--- /dev/null
+++ b/packages/plugins/Solana/src/state/Hub/types.ts
@@ -0,0 +1,4 @@
+import type { Web3Helper } from '@masknet/plugin-infra/web3'
+import type { NetworkPluginID } from '@masknet/web3-shared-base'
+
+export interface SolanaHub extends Web3Helper.Web3Hub<NetworkPluginID.PLUGIN_SOLANA> {}
diff --git a/packages/plugins/Solana/src/state/Others.ts b/packages/plugins/Solana/src/state/Others.ts
new file mode 100644
index 000000000000..6af8a561bcad
--- /dev/null
+++ b/packages/plugins/Solana/src/state/Others.ts
@@ -0,0 +1,36 @@
+import type { Plugin } from '@masknet/plugin-infra'
+import { OthersState } from '@masknet/plugin-infra/web3'
+import { isSameAddress } from '@masknet/web3-shared-base'
+import { formatDomainName } from '@masknet/web3-shared-evm'
+import {
+    isValidDomain,
+    isValidAddress,
+    ChainId,
+    formatAddress,
+    ProviderType,
+    NetworkType,
+    SchemaType,
+    ZERO_ADDRESS,
+    CHAIN_DESCRIPTORS,
+    NETWORK_DESCRIPTORS,
+    PROVIDER_DESCRIPTORS,
+} from '@masknet/web3-shared-solana'
+
+export class Others extends OthersState<ChainId, SchemaType, ProviderType, NetworkType> {
+    constructor(context: Plugin.Shared.SharedContext) {
+        super(context, {
+            defaultAddress: ZERO_ADDRESS,
+            defaultBlockDelay: 15,
+            chainDescriptors: CHAIN_DESCRIPTORS,
+            networkDescriptors: NETWORK_DESCRIPTORS,
+            providerDescriptors: PROVIDER_DESCRIPTORS,
+        })
+    }
+
+    override isValidDomain = isValidDomain
+    override isValidAddress = isValidAddress
+    override isSameAddress = isSameAddress
+
+    override formatAddress = formatAddress
+    override formatDomainName = formatDomainName
+}
diff --git a/packages/plugins/Solana/src/state/Provider.ts b/packages/plugins/Solana/src/state/Provider.ts
new file mode 100644
index 000000000000..20d8a89aef6d
--- /dev/null
+++ b/packages/plugins/Solana/src/state/Provider.ts
@@ -0,0 +1,48 @@
+import { getEnumAsArray } from '@dimensiondev/kit'
+import type { Plugin } from '@masknet/plugin-infra'
+import { Account, isSameAddress } from '@masknet/web3-shared-base'
+import { EnhanceableSite, ExtensionSite } from '@masknet/shared-base'
+import { ProviderState, ProviderStorage } from '@masknet/plugin-infra/web3'
+import {
+    isValidChainId,
+    isValidAddress,
+    chainResolver,
+    ChainId,
+    NetworkType,
+    ProviderType,
+    Web3Provider,
+    Web3,
+} from '@masknet/web3-shared-solana'
+import { Providers } from './Connection/provider'
+
+export class Provider extends ProviderState<ChainId, ProviderType, NetworkType, Web3Provider, Web3> {
+    constructor(override context: Plugin.Shared.SharedContext) {
+        const defaultValue: ProviderStorage<Account<ChainId>, ProviderType> = {
+            accounts: Object.fromEntries(
+                getEnumAsArray(ProviderType).map((x) => [
+                    x.value,
+                    {
+                        account: '',
+                        chainId: ChainId.Mainnet,
+                    },
+                ]),
+            ) as Record<ProviderType, Account<ChainId>>,
+            providers: Object.fromEntries(
+                [...getEnumAsArray(EnhanceableSite), ...getEnumAsArray(ExtensionSite)].map((x) => [
+                    x.value,
+                    ProviderType.Phantom,
+                ]),
+            ) as Record<EnhanceableSite | ExtensionSite, ProviderType>,
+        }
+
+        super(context, Providers, defaultValue, {
+            isSameAddress,
+            isValidChainId,
+            isValidAddress,
+            getDefaultChainId: () => ChainId.Mainnet,
+            getDefaultNetworkType: () => NetworkType.Solana,
+            getNetworkTypeFromChainId: (chainId: ChainId) =>
+                chainResolver.chainNetworkType(chainId) ?? NetworkType.Solana,
+        })
+    }
+}
diff --git a/packages/plugins/Solana/src/state/Settings.ts b/packages/plugins/Solana/src/state/Settings.ts
new file mode 100644
index 000000000000..07628a8d0f14
--- /dev/null
+++ b/packages/plugins/Solana/src/state/Settings.ts
@@ -0,0 +1,8 @@
+import type { Plugin } from '@masknet/plugin-infra'
+import { SettingsState } from '@masknet/plugin-infra/web3'
+
+export class Settings extends SettingsState {
+    constructor(context: Plugin.Shared.SharedContext) {
+        super(context)
+    }
+}
diff --git a/packages/plugins/Solana/src/state/Token.ts b/packages/plugins/Solana/src/state/Token.ts
new file mode 100644
index 000000000000..98585bef15d9
--- /dev/null
+++ b/packages/plugins/Solana/src/state/Token.ts
@@ -0,0 +1,26 @@
+import type { Subscription } from 'use-subscription'
+import type { Plugin } from '@masknet/plugin-infra'
+import { TokenState, TokenStorage } from '@masknet/plugin-infra/web3'
+import { isSameAddress } from '@masknet/web3-shared-base'
+import { ChainId, formatAddress, isValidAddress, SchemaType } from '@masknet/web3-shared-solana'
+
+export class Token extends TokenState<ChainId, SchemaType> {
+    constructor(
+        protected override context: Plugin.Shared.SharedContext,
+        protected override subscriptions: {
+            account?: Subscription<string>
+        },
+    ) {
+        const defaultValue: TokenStorage<ChainId, SchemaType> = {
+            fungibleTokens: [],
+            nonFungibleTokens: [],
+            fungibleTokenBlockedBy: {},
+            nonFungibleTokenBlockedBy: {},
+        }
+        super(context, defaultValue, subscriptions, {
+            isValidAddress,
+            isSameAddress,
+            formatAddress,
+        })
+    }
+}
diff --git a/packages/plugins/Solana/src/state/Transaction.ts b/packages/plugins/Solana/src/state/Transaction.ts
new file mode 100644
index 000000000000..730670445179
--- /dev/null
+++ b/packages/plugins/Solana/src/state/Transaction.ts
@@ -0,0 +1,23 @@
+import type { Subscription } from 'use-subscription'
+import { getEnumAsArray } from '@dimensiondev/kit'
+import type { Plugin } from '@masknet/plugin-infra'
+import { TransactionStorage, TransactionState } from '@masknet/plugin-infra/web3'
+import { ChainId, Transaction as SolanaTransaction, formatAddress } from '@masknet/web3-shared-solana'
+
+export class Transaction extends TransactionState<ChainId, SolanaTransaction> {
+    constructor(
+        context: Plugin.Shared.SharedContext,
+        subscriptions: {
+            account?: Subscription<string>
+            chainId?: Subscription<ChainId>
+        },
+    ) {
+        const defaultValue = Object.fromEntries(
+            getEnumAsArray(ChainId).map((x) => [x.value, {}]),
+        ) as TransactionStorage<ChainId, SolanaTransaction>
+
+        super(context, defaultValue, subscriptions, {
+            formatAddress,
+        })
+    }
+}
diff --git a/packages/plugins/Solana/src/state/Wallet.ts b/packages/plugins/Solana/src/state/Wallet.ts
new file mode 100644
index 000000000000..8ea5558b3f13
--- /dev/null
+++ b/packages/plugins/Solana/src/state/Wallet.ts
@@ -0,0 +1,8 @@
+import type { Plugin } from '@masknet/plugin-infra'
+import { WalletState } from '@masknet/plugin-infra/web3'
+
+export class Wallet extends WalletState {
+    constructor(override context: Plugin.Shared.SharedContext) {
+        super(context)
+    }
+}
diff --git a/packages/plugins/Solana/src/state/index.ts b/packages/plugins/Solana/src/state/index.ts
new file mode 100644
index 000000000000..aeef9d59c340
--- /dev/null
+++ b/packages/plugins/Solana/src/state/index.ts
@@ -0,0 +1,39 @@
+import type { Plugin } from '@masknet/plugin-infra'
+import { Provider } from './Provider'
+import { AddressBook } from './AddressBook'
+import { Hub } from './Hub'
+import { Connection } from './Connection'
+import { Settings } from './Settings'
+import { Transaction } from './Transaction'
+import { Wallet } from './Wallet'
+import { Others } from './Others'
+import type { SolanaWeb3State } from './Connection/types'
+
+export function createWeb3State(context: Plugin.Shared.SharedContext): SolanaWeb3State {
+    const Provider_ = new Provider(context)
+    const Settings_ = new Settings(context)
+
+    return {
+        AddressBook: new AddressBook(context, {
+            chainId: Provider_.chainId,
+        }),
+        Hub: new Hub(context, {
+            chainId: Provider_.chainId,
+            account: Provider_.account,
+            currencyType: Settings_.currencyType,
+        }),
+        Settings: Settings_,
+        Transaction: new Transaction(context, {
+            chainId: Provider_.chainId,
+            account: Provider_.account,
+        }),
+        Provider: Provider_,
+        Connection: new Connection(context, {
+            chainId: Provider_.chainId,
+            account: Provider_.account,
+            providerType: Provider_.providerType,
+        }),
+        Wallet: new Wallet(context),
+        Others: new Others(context),
+    }
+}
diff --git a/packages/plugins/Solana/src/storage/index.ts b/packages/plugins/Solana/src/storage/index.ts
deleted file mode 100644
index ab4876bb460b..000000000000
--- a/packages/plugins/Solana/src/storage/index.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import type { ScopedStorage } from '@masknet/shared-base'
-import type { ChainId } from '@masknet/web3-shared-solana'
-
-export const StorageDefaultValue = {
-    publicKey: null as null | string,
-    chainId: null as null | ChainId,
-}
-
-let storage: ScopedStorage<typeof StorageDefaultValue> = null!
-
-export function setupStorage(_: typeof storage) {
-    storage = _
-}
-
-export function getStorage() {
-    return storage.storage
-}
diff --git a/packages/plugins/Solana/src/types.ts b/packages/plugins/Solana/src/types.ts
deleted file mode 100644
index 7e98c52e47e2..000000000000
--- a/packages/plugins/Solana/src/types.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export interface FungibleToken {
-    address: string
-}
diff --git a/packages/plugins/Solana/src/utils.ts b/packages/plugins/Solana/src/utils.ts
deleted file mode 100644
index 5f479850e303..000000000000
--- a/packages/plugins/Solana/src/utils.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { Buffer } from 'buffer'
-import bs58 from 'bs58'
-
-export function hexToBase58(hex: string) {
-    const buffer = Buffer.from(hex, 'hex')
-    return bs58.encode(buffer)
-}
diff --git a/packages/plugins/Solana/src/utils/index.ts b/packages/plugins/Solana/src/utils/index.ts
new file mode 100644
index 000000000000..28514bda53c1
--- /dev/null
+++ b/packages/plugins/Solana/src/utils/index.ts
@@ -0,0 +1,28 @@
+import { Buffer } from 'buffer'
+import bs58 from 'bs58'
+
+// #region formatter
+export function formatAddress(address: string, size?: number) {
+    return address
+}
+// #endregion
+
+// #region validator
+export function isSameAddress(a?: string, b?: string) {
+    if (!a || !b) return false
+    return a.toLowerCase() === b.toLowerCase()
+}
+
+export function isValidDomain(domain: string) {
+    return /.+\.sol/i.test(domain)
+}
+
+export function isValidAddress(address: string) {
+    return true
+}
+// #endregion
+
+export function hexToBase58(hex: string) {
+    const buffer = Buffer.from(hex, 'hex')
+    return bs58.encode(buffer)
+}
diff --git a/packages/plugins/Solana/src/wallet/connect.ts b/packages/plugins/Solana/src/wallet/connect.ts
deleted file mode 100644
index 51192c3e1003..000000000000
--- a/packages/plugins/Solana/src/wallet/connect.ts
+++ /dev/null
@@ -1,46 +0,0 @@
-import { bridgedSolanaProvider } from '@masknet/injected-script'
-import { getStorage } from '../storage'
-import { hexToBase58 } from '../utils'
-
-type BNLike = {
-    _bn: string
-}
-
-export async function clearConnection() {
-    const storage = getStorage()
-    await storage.publicKey.setValue(null)
-    await storage.chainId.setValue(null)
-}
-
-export async function storeConnection(pubKey: string | BNLike, chainId?: number) {
-    const base58Key = typeof pubKey === 'string' ? pubKey : hexToBase58(pubKey._bn)
-    const storage = getStorage()
-    await storage.publicKey.setValue(base58Key)
-    if (chainId) {
-        await storage.chainId.setValue(chainId)
-    }
-}
-export async function connectWallet(init = false) {
-    let rsp: Awaited<ReturnType<typeof bridgedSolanaProvider.connect>> | null = null
-    try {
-        rsp = await bridgedSolanaProvider.connect({ onlyIfTrusted: init })
-    } catch {}
-    if (rsp?.publicKey) {
-        await storeConnection(rsp.publicKey)
-    }
-    const off = bridgedSolanaProvider.on('disconnect', async () => {
-        await clearConnection()
-        off()
-    })
-    return rsp?.publicKey
-}
-
-export async function watchAccount() {
-    bridgedSolanaProvider.on('accountChanged', async (publicKey) => {
-        if (publicKey) {
-            await storeConnection(publicKey as string)
-        } else {
-            await connectWallet()
-        }
-    })
-}
diff --git a/packages/plugins/Solana/src/wallet/index.ts b/packages/plugins/Solana/src/wallet/index.ts
deleted file mode 100644
index 2130a307ef0a..000000000000
--- a/packages/plugins/Solana/src/wallet/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './connect'
diff --git a/packages/plugins/Solana/tsconfig.json b/packages/plugins/Solana/tsconfig.json
index 783a13091a62..cecc4f1e3a86 100644
--- a/packages/plugins/Solana/tsconfig.json
+++ b/packages/plugins/Solana/tsconfig.json
@@ -8,13 +8,14 @@
   "include": ["src", "src/**/*.json"],
   "references": [
     { "path": "../../icons" },
-    { "path": "../../injected-script" },
+    { "path": "../../injected-script/sdk" },
     { "path": "../../plugin-infra" },
     { "path": "../../shared" },
     { "path": "../../shared-base" },
     { "path": "../../theme" },
     { "path": "../../web3-providers" },
     { "path": "../../web3-shared/base" },
+    { "path": "../../web3-shared/evm" },
     { "path": "../../web3-shared/solana" }
   ]
 }
diff --git a/packages/plugins/Wallet/package.json b/packages/plugins/Wallet/package.json
index 66889aaaa02a..d65138e86d5b 100644
--- a/packages/plugins/Wallet/package.json
+++ b/packages/plugins/Wallet/package.json
@@ -23,6 +23,7 @@
     "@masknet/plugin-infra": "workspace:*",
     "@masknet/shared": "workspace:*",
     "@masknet/theme": "workspace:*",
+    "@masknet/web3-shared-base": "workspace:*",
     "@masknet/web3-shared-evm": "workspace:*",
     "bignumber.js": "^9.0.2",
     "react-use": "^17.3.2",
diff --git a/packages/plugins/Wallet/src/constants.ts b/packages/plugins/Wallet/src/constants.ts
index 02b298a67582..b71fb7b817a4 100644
--- a/packages/plugins/Wallet/src/constants.ts
+++ b/packages/plugins/Wallet/src/constants.ts
@@ -11,14 +11,4 @@ export const HD_PATH_WITHOUT_INDEX_ETHEREUM = "m/44'/60'/0'/0"
 
 export const MAX_DERIVE_COUNT = 99
 
-// https://www.jsonrpc.org/specification#error_object
-export enum JSON_RPC_ERROR_CODE {
-    INVALID_REQUEST = -32600,
-    METHOD_NOT_FOUND = 32601,
-    INVALID_PARAMS = -32602,
-    INTERNAL_ERROR = -32603,
-    SERVER_ERROR_RANGE_START = -32000,
-    SERVER_ERROR_RANGE_END = -32099,
-}
-
 export const UPDATE_CHAIN_STATE_DELAY = 30 /* seconds */ * 1000 /* milliseconds */
diff --git a/packages/plugins/Wallet/src/messages.ts b/packages/plugins/Wallet/src/messages.ts
index 2528125685fb..c7805910572e 100644
--- a/packages/plugins/Wallet/src/messages.ts
+++ b/packages/plugins/Wallet/src/messages.ts
@@ -1,19 +1,19 @@
+import type BigNumber from 'bignumber.js'
 import { createPluginMessage, PluginMessageEmitter } from '@masknet/plugin-infra'
-import type { NetworkPluginID } from '@masknet/plugin-infra/src/web3-types'
+import type { Web3Helper } from '@masknet/plugin-infra/web3'
 import type {
-    ChainId,
-    ERC721ContractDetailed,
-    GasOption,
-    GasOptions,
-    NetworkType,
-    ProviderType,
-    TransactionState,
-    Wallet,
-} from '@masknet/web3-shared-evm'
-import type BigNumber from 'bignumber.js'
-import type { JsonRpcPayload } from 'web3-core-helpers'
+    GasOptionType,
+    NetworkPluginID,
+    NonFungibleTokenContract,
+    TransactionStatusType,
+} from '@masknet/web3-shared-base'
+import type { ChainId, SchemaType, TransactionState } from '@masknet/web3-shared-evm'
 import { PLUGIN_ID } from './constants'
 
+export type ApplicationDialogEvent = {
+    open: boolean
+}
+
 export type TransactionDialogEvent =
     | {
           open: true
@@ -26,15 +26,9 @@ export type TransactionDialogEvent =
           open: false
       }
 
-export type GasPriceDialogEvent = {
-    open: boolean
-    type?: keyof GasOptions
-}
-
 export type SelectProviderDialogEvent =
     | {
           open: true
-          pluginID?: NetworkPluginID
       }
     | {
           open: false
@@ -44,23 +38,8 @@ export type SelectProviderDialogEvent =
 export type ConnectWalletDialogEvent =
     | {
           open: true
-          networkType: NetworkType
-          providerType: ProviderType
-      }
-    | {
-          open: false
-          result?: {
-              account: string
-              chainId: ChainId
-              networkType: NetworkType
-              providerType: ProviderType
-          }
-      }
-
-export type SelectWalletDialogEvent =
-    | {
-          open: true
-          networkType: NetworkType
+          network: Web3Helper.NetworkDescriptorAll
+          provider: Web3Helper.ProviderDescriptorAll
       }
     | {
           open: false
@@ -70,10 +49,6 @@ export type WalletStatusDialogEvent = {
     open: boolean
 }
 
-export type ApplicationDialogEvent = {
-    open: boolean
-}
-
 export type GasSettingDialogEvent = {
     open: boolean
     gasLimit: number
@@ -81,32 +56,14 @@ export type GasSettingDialogEvent = {
     gasPrice?: BigNumber.Value
     maxFee?: BigNumber.Value
     priorityFee?: BigNumber.Value
-    gasOption?: GasOption | null
-}
-
-export type WalletRenameDialogEvent = {
-    open: boolean
-    wallet: Wallet | null
+    gasOption?: GasOptionType | null
 }
 
 export type WalletRiskWarningDialogEvent =
     | {
           open: true
-          wallet?: Wallet
-      }
-    | {
-          open: false
-          type: 'cancel' | 'confirm'
-      }
-
-export type RestoreLegacyWalletDialogEvent = {
-    open: boolean
-}
-
-export type WalletConnectQRCodeDialogEvent =
-    | {
-          open: true
-          uri: string
+          account: string
+          pluginID: NetworkPluginID
       }
     | {
           open: false
@@ -120,32 +77,30 @@ export type SelectNftContractDialogEvent = {
     /**
      * The selected detailed nft contract.
      */
-    contract?: ERC721ContractDetailed
+    contract?: NonFungibleTokenContract<ChainId, SchemaType>
 }
 
-export type SocketMessageUpdatedEvent = {
+export interface SocketMessageUpdatedEvent {
     id: string
     done: boolean
     error?: unknown
     from: 'cache' | 'remote'
 }
 
+export interface TransactionProgressEvent {
+    pluginID: NetworkPluginID
+    chainId: Web3Helper.ChainIdAll
+    status: TransactionStatusType
+    transactionId: string
+    transaction: Web3Helper.TransactionAll
+}
+
 export interface WalletMessage {
     /**
      * Transaction dialog
      */
     transactionDialogUpdated: TransactionDialogEvent
 
-    /**
-     * Gas price dialog
-     */
-    gasPriceDialogUpdated: GasPriceDialogEvent
-
-    /**
-     * Select wallet dialog
-     */
-    selectWalletDialogUpdated: SelectWalletDialogEvent
-
     /**
      * Select provider dialog
      */
@@ -166,11 +121,6 @@ export interface WalletMessage {
      */
     ApplicationDialogUpdated: ApplicationDialogEvent
 
-    /**
-     * Wallet status dialog
-     */
-    walletRenameDialogUpdated: WalletRenameDialogEvent
-
     /**
      * Gas setting dialog
      */
@@ -181,34 +131,17 @@ export interface WalletMessage {
      */
     selectNftContractDialogUpdated: SelectNftContractDialogEvent
 
-    /**
-     * WalletConnect QR Code dialog
-     */
-    walletConnectQRCodeDialogUpdated: WalletConnectQRCodeDialogEvent
-
     /**
      * Wallet Risk Warning dialog
      */
     walletRiskWarningDialogUpdated: WalletRiskWarningDialogEvent
 
-    /**
-     * Restore Legacy Wallet Dialog
-     */
-    restoreLegacyWalletDialogUpdated: RestoreLegacyWalletDialogEvent
-
     walletsUpdated: void
     phrasesUpdated: void
     addressBookUpdated: void
     transactionsUpdated: void
-    transactionStateUpdated: TransactionState
-    transactionProgressUpdated: {
-        state: TransactionState
-        payload: JsonRpcPayload
-    }
+    transactionProgressUpdated: TransactionProgressEvent
     requestsUpdated: { hasRequest: boolean }
-    erc20TokensUpdated: void
-    erc721TokensUpdated: void
-    erc1155TokensUpdated: void
     /** true: Now locked; false: Now unlocked */
     walletLockStatusUpdated: boolean
     socketMessageUpdated: SocketMessageUpdatedEvent
diff --git a/packages/plugins/Wallet/tsconfig.json b/packages/plugins/Wallet/tsconfig.json
index e4eaece7df98..b23fba4a0375 100644
--- a/packages/plugins/Wallet/tsconfig.json
+++ b/packages/plugins/Wallet/tsconfig.json
@@ -8,6 +8,7 @@
   "include": ["src", "src/**/*.json"],
   "references": [
     { "path": "../../plugin-infra" },
+    { "path": "../../web3-shared/base" },
     { "path": "../../web3-shared/evm" },
     { "path": "../../shared" },
     { "path": "../../theme" }
diff --git a/packages/plugins/tsconfig.json b/packages/plugins/tsconfig.json
index 56c3716dd4f8..286435d1c06b 100644
--- a/packages/plugins/tsconfig.json
+++ b/packages/plugins/tsconfig.json
@@ -4,7 +4,9 @@
     { "path": "./template/" },
     { "path": "./example/" },
     { "path": "./Debugger/" },
+    { "path": "./EVM/" },
     { "path": "./Flow/" },
+    { "path": "./Solana/" },
     { "path": "./Wallet/" },
     { "path": "./FileService/" },
     { "path": "./RSS3/" },
diff --git a/packages/public-api/src/web.ts b/packages/public-api/src/web.ts
index 103627077de1..1d6c6227e69f 100644
--- a/packages/public-api/src/web.ts
+++ b/packages/public-api/src/web.ts
@@ -13,8 +13,8 @@ export interface MaskNetworkAPIs {
     app_resume(): Promise<void>
     app_isPluginEnabled(params: { pluginID: string }): Promise<boolean>
     app_setPluginStatus(params: { pluginID: string; enabled: boolean }): Promise<void>
-    settings_getTrendingDataSource(): Promise<DataProvider>
-    settings_setTrendingDataSource(params: { provider: DataProvider }): Promise<void>
+    // settings_getTrendingDataSource(): Promise<DataProvider>
+    // settings_setTrendingDataSource(params: { provider: DataProvider }): Promise<void>
     settings_getLaunchPageSettings(): Promise<LaunchPage>
     settings_getTheme(): Promise<Appearance>
     settings_setTheme(params: { theme: Appearance }): Promise<void>
@@ -218,50 +218,6 @@ export enum SupportedLanguages {
     jaJP = 'ja-JP',
 }
 
-/**
- * Keep updating to packages/web3-shared/evm/types/index.ts
- */
-export enum NetworkType {
-    Ethereum = 'Ethereum',
-    Binance = 'Binance',
-    Polygon = 'Polygon',
-    Arbitrum = 'Arbitrum',
-    xDai = 'xDai',
-    Celo = 'Celo',
-    Fantom = 'Fantom',
-    Aurora = 'Aurora',
-    Avalanche = 'Avalanche',
-    Boba = 'Boba',
-    Fuse = 'Fuse',
-    Metis = 'Metis',
-    Optimistic = 'Optimistic',
-    Harmony = 'Harmony',
-    Conflux = 'Conflux',
-}
-
-export enum ProviderType {
-    MaskWallet = 'Maskbook',
-    MetaMask = 'MetaMask',
-    WalletConnect = 'WalletConnect',
-    Fortmatic = 'Fortmatic',
-    Coin98 = 'Coin98',
-    MathWallet = 'MathWallet',
-    WalletLink = 'WalletLink',
-    CustomNetwork = 'CustomNetwork',
-}
-
-export enum FungibleAssetProvider {
-    ZERION = 'Zerion',
-    DEBANK = 'Debank',
-}
-
-export enum NonFungibleAssetProvider {
-    OPENSEA = 'OpenSea',
-    RARIBLE = 'Rarible',
-    NFTSCAN = 'NFTScan',
-    ZORA = 'Zora',
-}
-
 export interface PriceRecord {
     [currency: string]: number
 }
diff --git a/packages/shared-base/src/Identifier/ec-key.ts b/packages/shared-base/src/Identifier/ec-key.ts
index 26860a733165..6d2efbb4b4bc 100644
--- a/packages/shared-base/src/Identifier/ec-key.ts
+++ b/packages/shared-base/src/Identifier/ec-key.ts
@@ -22,7 +22,7 @@ export class ECKeyIdentifier extends Identifier {
         if (!hex) return None
         hex = String(hex)
         if (hex.startsWith('0x')) hex = hex.slice(2)
-        const publicKey = encodeArrayBuffer(Convert.FromHex(hex))
+        const publicKey = encodeArrayBuffer(new Uint8Array(Convert.FromHex(hex)))
         return Some(new ECKeyIdentifier('secp256k1', publicKey))
     }
 
diff --git a/packages/shared-base/src/Messages/Mask.ts b/packages/shared-base/src/Messages/Mask.ts
index 4b0fbd59d17c..3bbf7035cdf1 100644
--- a/packages/shared-base/src/Messages/Mask.ts
+++ b/packages/shared-base/src/Messages/Mask.ts
@@ -1,29 +1,18 @@
-import type {
-    Appearance,
-    LanguageOptions,
-    DataProvider,
-    CryptoPrice,
-    NetworkType,
-    ProviderType,
-    FungibleAssetProvider,
-    NonFungibleAssetProvider,
-} from '@masknet/public-api'
+import type { Appearance, LanguageOptions } from '@masknet/public-api'
 import type { SerializableTypedMessages } from '@masknet/typed-message'
 import type { ProfileIdentifier, PersonaIdentifier } from '../Identifier'
 import type { RelationFavor } from '../Persona/type'
 
+enum NetworkPluginID {
+    PLUGIN_EVM = 'com.mask.evm',
+    PLUGIN_FLOW = 'com.mask.flow',
+    PLUGIN_SOLANA = 'com.mask.solana',
+}
+
 export interface MaskSettingsEvents {
     appearanceSettings: Appearance
+    pluginIDSettings: NetworkPluginID
     languageSettings: LanguageOptions
-    pluginIDSettings: string
-    currentChainIdSettings: number
-    currentTokenPricesSettings: CryptoPrice
-    currentDataProviderSettings: DataProvider
-    currentProviderSettings: ProviderType
-    currentNetworkSettings: NetworkType
-    currentAccountSettings: string
-    currentFungibleAssetDataProviderSettings: FungibleAssetProvider
-    currentNonFungibleAssetDataProviderSettings: NonFungibleAssetProvider
     currentPersonaIdentifier: string
 }
 
diff --git a/packages/shared-base/src/Site/index.ts b/packages/shared-base/src/Site/index.ts
new file mode 100644
index 000000000000..438764cda7b4
--- /dev/null
+++ b/packages/shared-base/src/Site/index.ts
@@ -0,0 +1,43 @@
+import { EnhanceableSite, ExtensionSite } from './type'
+
+export * from './type'
+
+const matchEnhanceableSiteHost: Record<EnhanceableSite, RegExp> = {
+    [EnhanceableSite.Localhost]: /localhost/i,
+    [EnhanceableSite.Facebook]: /facebook\.com/i,
+    [EnhanceableSite.Twitter]: /twitter\.com/i,
+    [EnhanceableSite.Minds]: /minds\.com/i,
+    [EnhanceableSite.Instagram]: /instagram\.com/i,
+    [EnhanceableSite.OpenSea]: /opensea\.io/i,
+}
+
+const matchExtensionSitePathname: Record<ExtensionSite, RegExp> = {
+    [ExtensionSite.Dashboard]: /dashboard\.html/i,
+    [ExtensionSite.Popup]: /popups\.html/i,
+}
+
+function getEnhanceableSiteType() {
+    const { host, pathname } = location
+    for (const [type, regexp] of Object.entries(matchEnhanceableSiteHost)) {
+        if (host.match(regexp)) return type as EnhanceableSite
+        continue
+    }
+    return
+}
+
+function getExtensionSiteType() {
+    const { host, pathname } = location
+    for (const [type, regexp] of Object.entries(matchExtensionSitePathname)) {
+        if (pathname.match(regexp)) return type as ExtensionSite
+        continue
+    }
+    return
+}
+
+export function getSiteType() {
+    return getEnhanceableSiteType() ?? getExtensionSiteType()
+}
+
+export function isExtensionSiteType() {
+    return !!getExtensionSiteType()
+}
diff --git a/packages/shared-base/src/index.ts b/packages/shared-base/src/index.ts
index d9a26fe21636..e1c6ae0ec031 100644
--- a/packages/shared-base/src/index.ts
+++ b/packages/shared-base/src/index.ts
@@ -14,5 +14,6 @@ export * from './Pure'
 export * from './Results'
 export * from './Routes'
 export * from './serializer'
-export * from './Site/type'
+export * from './Site'
 export * from './utils'
+export * from './onDemandWorker'
diff --git a/packages/mask/utils-pure/OnDemandWorker/index.ts b/packages/shared-base/src/onDemandWorker/index.ts
similarity index 100%
rename from packages/mask/utils-pure/OnDemandWorker/index.ts
rename to packages/shared-base/src/onDemandWorker/index.ts
diff --git a/packages/shared-base/src/utils/asyncIterator.ts b/packages/shared-base/src/utils/asyncIterator.ts
new file mode 100644
index 000000000000..966162279a58
--- /dev/null
+++ b/packages/shared-base/src/utils/asyncIterator.ts
@@ -0,0 +1,5 @@
+export async function asyncIteratorToArray<T>(iterable: AsyncIterable<T>) {
+    const arr: T[] = []
+    for await (const x of iterable) arr.push(x)
+    return arr
+}
diff --git a/packages/shared-base/src/utils/createValueRefWithReady.ts b/packages/shared-base/src/utils/createValueRefWithReady.ts
new file mode 100644
index 000000000000..dedc57ad90d0
--- /dev/null
+++ b/packages/shared-base/src/utils/createValueRefWithReady.ts
@@ -0,0 +1,26 @@
+import { defer } from '@dimensiondev/kit'
+import { ValueRef } from '@dimensiondev/holoflows-kit'
+
+export type ValueRefWithReady<T> = ValueRef<T> & {
+    readonly ready: boolean
+    readonly readyPromise: Promise<T>
+}
+
+export type ValueComparer<T> = (a: T, b: T) => boolean
+
+export function createValueRefWithReady<T extends unknown>(
+    value: T,
+    comparer: ValueComparer<T> = (a: any, b: any) => a === b,
+) {
+    const settings = new ValueRef(value, comparer) as ValueRefWithReady<T>
+    const [readyPromise, resolve] = defer<T>()
+
+    Object.assign(settings, { readyPromise, ready: false })
+
+    readyPromise.then(() => {
+        Object.assign(settings, { ready: true })
+    })
+    settings.addListener((newValue) => resolve(newValue))
+
+    return settings
+}
diff --git a/packages/shared-base/src/utils/index.ts b/packages/shared-base/src/utils/index.ts
index 44bead80757b..f57bc7384a2a 100644
--- a/packages/shared-base/src/utils/index.ts
+++ b/packages/shared-base/src/utils/index.ts
@@ -1,3 +1,4 @@
+export * from './asyncIterator'
 export * from './detect'
 export * from './getLocalImplementation'
 export * from './parseURL'
@@ -6,6 +7,7 @@ export * from './sessionStorageCache'
 export * from './subscription'
 export * from './getAssetAsBlobURL'
 export * from './personas'
+export * from './createValueRefWithReady'
 export enum MimeTypes {
     JSON = 'application/json',
     Binary = 'application/octet-stream',
diff --git a/packages/shared-base/src/utils/subscription.ts b/packages/shared-base/src/utils/subscription.ts
index 2529d7ad4a61..b393ab942212 100644
--- a/packages/shared-base/src/utils/subscription.ts
+++ b/packages/shared-base/src/utils/subscription.ts
@@ -3,7 +3,7 @@ import type { ValueRef } from '@dimensiondev/holoflows-kit'
 import type { Subscription } from 'use-subscription'
 import { None, Option, Some } from 'ts-results'
 
-export function createConstantSubscription<T>(value: T) {
+export function createConstantSubscription<T>(value: T): Subscription<T> {
     return {
         getCurrentValue: () => value,
         subscribe: () => noop,
@@ -88,6 +88,22 @@ export function mapSubscription<T, Q>(sub: Subscription<T>, mapper: (val: T) =>
     }
 }
 
+export function mergeSubscription<T extends Array<Subscription<unknown>>>(
+    ...subscriptions: T
+): Subscription<{
+    [key in keyof T]: T[key] extends Subscription<infer U> ? U : never
+}> {
+    return {
+        getCurrentValue() {
+            return subscriptions.map((x) => x.getCurrentValue()) as any
+        },
+        subscribe: (callback: () => void) => {
+            const removeListeners = subscriptions.map((x) => x.subscribe(callback))
+            return () => removeListeners.forEach((x) => x())
+        },
+    }
+}
+
 export function createSubscriptionFromValueRef<T>(ref: ValueRef<T>, signal?: AbortSignal): Subscription<T> {
     return SubscriptionDebug({
         getCurrentValue: () => ref.value,
diff --git a/packages/shared/package.json b/packages/shared/package.json
index 6224a490fcd6..9ec9fc5af8fa 100644
--- a/packages/shared/package.json
+++ b/packages/shared/package.json
@@ -16,6 +16,7 @@
     "@masknet/theme": "workspace:*",
     "@masknet/web3-shared-base": "workspace:*",
     "@masknet/web3-shared-evm": "workspace:*",
+    "@types/qrcode": "^1.4.2",
     "anchorme": "^2.1.2",
     "bignumber.js": "^9.0.2",
     "classnames": "^2.3.1",
diff --git a/packages/shared/src/UI/components/AddressViewer/index.tsx b/packages/shared/src/UI/components/AddressViewer/index.tsx
index 41638e5ea9ee..dfc7dff3fa30 100644
--- a/packages/shared/src/UI/components/AddressViewer/index.tsx
+++ b/packages/shared/src/UI/components/AddressViewer/index.tsx
@@ -1,13 +1,8 @@
 import { getMaskColor, makeStyles } from '@masknet/theme'
 import { Box, Link, Typography, Tooltip } from '@mui/material'
 import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined'
-import {
-    formatEthereumAddress,
-    resolveAddressLinkOnExplorer,
-    ChainId,
-    AddressName,
-    AddressNameType,
-} from '@masknet/web3-shared-evm'
+import { IdentityAddress, IdentityAddressType } from '@masknet/web3-shared-base'
+import { formatEthereumAddress, ChainId, explorerResolver } from '@masknet/web3-shared-evm'
 import { useSharedI18N } from '../../..'
 
 const useStyles = makeStyles()((theme) => ({
@@ -35,23 +30,24 @@ const useStyles = makeStyles()((theme) => ({
 }))
 
 export interface AddressViewerProps {
-    addressName: AddressName
+    identityAddress: IdentityAddress
 }
 
-export function AddressViewer({ addressName }: AddressViewerProps) {
+export function AddressViewer({ identityAddress }: AddressViewerProps) {
     const t = useSharedI18N()
     const { classes } = useStyles()
-    const { type, label, resolvedAddress } = addressName
+    const { type, label, address } = identityAddress
 
-    const typeMap = {
-        [AddressNameType.ADDRESS]: t.address_viewer_address_name_address(),
-        [AddressNameType.ENS]: t.address_viewer_address_name_ens(),
-        [AddressNameType.UNS]: t.address_viewer_address_name_uns(),
-        [AddressNameType.DNS]: t.address_viewer_address_name_dns(),
-        [AddressNameType.RSS3]: t.address_viewer_address_name_rns(),
-        [AddressNameType.GUN]: t.address_viewer_address_name_address(),
-        [AddressNameType.THE_GRAPH]: t.address_viewer_address_name_address(),
-        [AddressNameType.TWITTER_BLUE]: t.address_viewer_address_name_twitter(),
+    const typeMap: Record<IdentityAddressType, string> = {
+        [IdentityAddressType.ADDRESS]: t.address_viewer_address_name_address(),
+        [IdentityAddressType.ENS]: t.address_viewer_address_name_ens(),
+        [IdentityAddressType.UNS]: t.address_viewer_address_name_uns(),
+        [IdentityAddressType.DNS]: t.address_viewer_address_name_dns(),
+        [IdentityAddressType.RSS3]: t.address_viewer_address_name_rns(),
+        [IdentityAddressType.GUN]: t.address_viewer_address_name_address(),
+        [IdentityAddressType.NEXT_ID]: t.address_viewer_address_name_address(),
+        [IdentityAddressType.THE_GRAPH]: t.address_viewer_address_name_address(),
+        [IdentityAddressType.TWITTER_BLUE]: t.address_viewer_address_name_twitter(),
     }
 
     const rulesTipMap = [
@@ -72,7 +68,7 @@ export function AddressViewer({ addressName }: AddressViewerProps) {
         </div>
     )
 
-    if (!resolvedAddress) return null
+    if (!address) return null
 
     return (
         <Box className={classes.root} display="flex" alignItems="center" justifyContent="flex-end" flexWrap="wrap">
@@ -80,7 +76,7 @@ export function AddressViewer({ addressName }: AddressViewerProps) {
                 <Typography color="textPrimary" component="span">
                     {t.address_viewer_current_display_of({ type: typeMap[type] })}
                     <Link
-                        href={resolveAddressLinkOnExplorer(ChainId.Mainnet, resolvedAddress)}
+                        href={explorerResolver.addressLink(ChainId.Mainnet, address)}
                         target="_blank"
                         rel="noopener noreferrer">
                         {formatEthereumAddress(label, 4)}
diff --git a/packages/shared/src/UI/components/AssetPlayer/index.tsx b/packages/shared/src/UI/components/AssetPlayer/index.tsx
index daf41f78b39d..3b3aea1f2b6d 100644
--- a/packages/shared/src/UI/components/AssetPlayer/index.tsx
+++ b/packages/shared/src/UI/components/AssetPlayer/index.tsx
@@ -1,17 +1,18 @@
-import { memo, useRef, useCallback, useState, useEffect, useMemo } from 'react'
-import { ChainId, getRPCConstants } from '@masknet/web3-shared-evm'
 import { first } from 'lodash-unified'
+import { memo, useRef, useCallback, useState, useEffect, useMemo } from 'react'
+import { getRPCConstants } from '@masknet/web3-shared-evm'
 import IframeResizer, { IFrameComponent } from 'iframe-resizer-react'
 import { mediaViewerUrl } from '../../../constants'
 import { useUpdateEffect } from 'react-use'
 import { makeStyles, useStylesExtends } from '@masknet/theme'
 import { Box, SvgIconProps } from '@mui/material'
 import { AssetLoadingIcon, MaskPlaceholder } from '@masknet/icons'
+import type { Web3Helper } from '@masknet/plugin-infra/web3'
 
 interface ERC721TokenQuery {
     contractAddress: string
     tokenId: string
-    chainId: ChainId
+    chainId?: Web3Helper.ChainIdAll
 }
 
 interface AssetPlayerProps
@@ -57,8 +58,8 @@ export const AssetPlayer = memo<AssetPlayerProps>((props) => {
     const { url, type, options, iconProps, isFixedIframeSize = true, fallbackResourceLoader } = props
     const classes = useStylesExtends(useStyles(), props)
     const [hidden, setHidden] = useState(Boolean(props.renderTimeout))
-    const { RPC: RPC_Entries } = getRPCConstants(props.erc721Token?.chainId)
-    const rpc = first(RPC_Entries)
+    const { RPC_URLS } = getRPCConstants(props.erc721Token?.chainId)
+    const rpc = first(RPC_URLS)
     const erc721Token = rpc ? ({ ...props.erc721Token, rpc } as ERC721TokenQuery) : undefined
     const [playerState, setPlayerState] = useState(
         url || erc721Token ? AssetPlayerState.LOADING : AssetPlayerState.ERROR,
@@ -202,7 +203,7 @@ export const AssetPlayer = memo<AssetPlayerProps>((props) => {
                       ))
                     : props.loadingIcon ?? <AssetLoadingIcon className={classes.loadingIcon} />}
             </Box>
-            {AssetPlayerState.LOADING !== playerState && IframeResizerMemo}
+            {IframeResizerMemo}
         </>
     )
 })
diff --git a/packages/shared/src/UI/components/ERC20TokenList/index.tsx b/packages/shared/src/UI/components/ERC20TokenList/index.tsx
deleted file mode 100644
index 1e68efe335c7..000000000000
--- a/packages/shared/src/UI/components/ERC20TokenList/index.tsx
+++ /dev/null
@@ -1,159 +0,0 @@
-import { memo, useMemo, useState } from 'react'
-import { getERC20TokenListItem } from './ERC20TokenListItem'
-import { uniqBy } from 'lodash-unified'
-import {
-    Asset,
-    ChainId,
-    currySameAddress,
-    FungibleTokenDetailed,
-    isSameAddress,
-    isValidAddress,
-    makeSortAssertFn,
-    useAccount,
-    useAssetsByTokenList,
-    useChainId,
-    useERC20TokenDetailed,
-    useERC20TokensDetailedFromTokenLists,
-    useTokenListConstants,
-    useNativeTokenDetailed,
-    useTrustedERC20Tokens,
-} from '@masknet/web3-shared-evm'
-import { EMPTY_LIST } from '@masknet/shared-base'
-import { MaskFixedSizeListProps, MaskTextFieldProps, SearchableList } from '@masknet/theme'
-import { Stack, Typography } from '@mui/material'
-import { useSharedI18N } from '../../../locales'
-
-const DEFAULT_LIST_HEIGHT = 300
-const SEARCH_KEYS = ['token.address', 'token.symbol', 'token.name']
-
-export interface ERC20TokenListProps extends withClasses<'list' | 'placeholder'> {
-    targetChainId?: ChainId
-    whitelist?: string[]
-    blacklist?: string[]
-    tokens?: FungibleTokenDetailed[]
-    selectedTokens?: string[]
-    disableSearch?: boolean
-    onSelect?(token: FungibleTokenDetailed | null): void
-    FixedSizeListProps?: Partial<MaskFixedSizeListProps>
-    SearchTextFieldProps?: MaskTextFieldProps
-}
-
-const Placeholder = memo(({ message, height }: { message: string; height?: number | string }) => (
-    <Stack minHeight={height ?? DEFAULT_LIST_HEIGHT} justifyContent="center" alignContent="center" marginTop="12px">
-        <Typography color="textSecondary" textAlign="center">
-            {message}
-        </Typography>
-    </Stack>
-))
-
-export const ERC20TokenList = memo<ERC20TokenListProps>((props) => {
-    const t = useSharedI18N()
-    const account = useAccount()
-    const currentChainId = useChainId()
-    const chainId = props.targetChainId ?? currentChainId
-    const trustedERC20Tokens = useTrustedERC20Tokens()
-    const { value: nativeToken } = useNativeTokenDetailed(chainId)
-    const [keyword, setKeyword] = useState('')
-
-    const {
-        whitelist: includeTokens,
-        blacklist: excludeTokens = [],
-        tokens = [],
-        onSelect,
-        FixedSizeListProps,
-        selectedTokens = [],
-    } = props
-
-    const { ERC20 } = useTokenListConstants(chainId)
-    const { value: erc20TokensDetailed = EMPTY_LIST, loading: erc20TokensDetailedLoading } =
-        useERC20TokensDetailedFromTokenLists(
-            ERC20,
-            keyword,
-            nativeToken ? [...trustedERC20Tokens, nativeToken] : trustedERC20Tokens,
-            chainId,
-        )
-
-    // #region add token by address
-    const matchedTokenAddress = useMemo(() => {
-        if (!keyword || !isValidAddress(keyword) || erc20TokensDetailedLoading) return
-        return keyword
-    }, [keyword, erc20TokensDetailedLoading])
-
-    const { value: searchedToken, loading: searchedTokenLoading } = useERC20TokenDetailed(matchedTokenAddress ?? '')
-    // #endregion
-
-    const filteredTokens = erc20TokensDetailed.filter(
-        (token) =>
-            (!includeTokens || includeTokens.some(currySameAddress(token.address))) &&
-            (!excludeTokens.length || !excludeTokens.some(currySameAddress(token.address))),
-    )
-
-    const renderTokens = uniqBy(
-        [...tokens, ...filteredTokens, ...(searchedToken ? [searchedToken] : EMPTY_LIST)],
-        (x) => x.address.toLowerCase(),
-    )
-
-    const {
-        value: assets,
-        loading: assetsLoading,
-        error: assetsError,
-        retry: retryLoadAsset,
-    } = useAssetsByTokenList(
-        renderTokens.filter((x) => isValidAddress(x.address)),
-        chainId,
-    )
-
-    const renderAssets = useMemo(() => {
-        return assetsLoading
-            ? EMPTY_LIST
-            : keyword
-            ? assets
-            : [...assets].sort(makeSortAssertFn(chainId, { isMaskBoost: true }))
-    }, [
-        chainId,
-        keyword,
-        assetsLoading,
-        assets
-            .map((x) => x.token.address)
-            .sort((a, b) => a.localeCompare(b, 'en-US'))
-            .join(),
-    ])
-
-    const getPlaceHolder = () => {
-        if (erc20TokensDetailedLoading || assetsLoading)
-            return <Placeholder height={FixedSizeListProps?.height} message={t.erc20_token_list_loading()} />
-        if (searchedTokenLoading)
-            return <Placeholder height={FixedSizeListProps?.height} message={t.erc20_search_token_loading()} />
-        if (!renderAssets.length)
-            return <Placeholder height={FixedSizeListProps?.height} message={t.erc20_search_not_token_found()} />
-        return null
-    }
-
-    return (
-        <SearchableList<Asset>
-            SearchFieldProps={{
-                placeholder: t.erc20_token_list_placeholder(),
-                ...props.SearchTextFieldProps,
-            }}
-            onSelect={(asset) => onSelect?.(asset.token)}
-            disableSearch={!!props.disableSearch}
-            onSearch={setKeyword}
-            data={renderAssets as Asset[]}
-            searchKey={SEARCH_KEYS}
-            itemRender={getERC20TokenListItem(
-                trustedERC20Tokens,
-                searchedToken ? [searchedToken] : [],
-                searchedToken
-                    ? [...tokens, ...erc20TokensDetailed].find((x) => isSameAddress(x.address, searchedToken.address))
-                        ? { from: 'search', inList: true }
-                        : { from: 'search', inList: false }
-                    : { from: 'defaultList', inList: true },
-                selectedTokens,
-                assetsLoading,
-                account,
-            )}
-            placeholder={getPlaceHolder()}
-            FixedSizeListProps={FixedSizeListProps}
-        />
-    )
-})
diff --git a/packages/shared/src/UI/components/ERC20TokenList/ERC20TokenListItem.tsx b/packages/shared/src/UI/components/FungibleTokenList/FungibleTokenItem.tsx
similarity index 62%
rename from packages/shared/src/UI/components/ERC20TokenList/ERC20TokenListItem.tsx
rename to packages/shared/src/UI/components/FungibleTokenList/FungibleTokenItem.tsx
index 77373a1f80e2..34bc79736f9a 100644
--- a/packages/shared/src/UI/components/ERC20TokenList/ERC20TokenListItem.tsx
+++ b/packages/shared/src/UI/components/FungibleTokenList/FungibleTokenItem.tsx
@@ -1,24 +1,15 @@
-import { ListItem, ListItemIcon, ListItemText, Typography } from '@mui/material'
+import { useCallback, useMemo } from 'react'
+import BigNumber from 'bignumber.js'
 import classNames from 'classnames'
-import {
-    Asset,
-    currySameAddress,
-    ERC20TokenDetailed,
-    formatBalance,
-    FungibleTokenDetailed,
-    isSameAddress,
-    useAddERC20TokenCallback,
-    useTrustERC20TokenCallback,
-} from '@masknet/web3-shared-evm'
+import { ListItem, ListItemIcon, ListItemText, Typography } from '@mui/material'
+import { formatBalance, FungibleToken, NetworkPluginID } from '@masknet/web3-shared-base'
 import { TokenIcon } from '../TokenIcon'
+import { LoadingIcon } from '@masknet/icons'
 import type { MaskSearchableListItemProps } from '@masknet/theme'
 import { makeStyles, MaskLoadingButton } from '@masknet/theme'
-import { some } from 'lodash-unified'
-import { useCallback, useMemo } from 'react'
-import { LoadingIcon } from '@masknet/icons'
 import { useSharedI18N } from '../../../locales'
 import { LoadingAnimation } from '../LoadingAnimation'
-import BigNumber from 'bignumber.js'
+import type { Web3Helper } from '@masknet/plugin-infra/web3'
 
 const useStyles = makeStyles()((theme) => ({
     icon: {
@@ -74,58 +65,60 @@ const useStyles = makeStyles()((theme) => ({
     },
 }))
 
-export const getERC20TokenListItem =
-    (
-        addedTokens: FungibleTokenDetailed[],
-        externalTokens: FungibleTokenDetailed[],
-        info: {
-            from: 'search' | 'defaultList'
-            inList: boolean
-        },
-        selectedTokens: string[],
-        loadingAsset: boolean,
-        account?: string,
+export const getFungibleTokenItem =
+    <T extends NetworkPluginID>(
+        account: string,
+        getSource: (address: string) => 'personal' | 'official' | 'external',
+        getBalance: (address: string) => string,
+        isSelected: (address: string) => boolean,
+        isLoading: (address: string) => boolean,
+        importToken: (
+            token: FungibleToken<Web3Helper.Definition[T]['ChainId'], Web3Helper.Definition[T]['SchemaType']>,
+        ) => Promise<void>,
     ) =>
-    ({ data, onSelect }: MaskSearchableListItemProps<Asset>) => {
+    ({
+        data: token,
+        onSelect,
+    }: MaskSearchableListItemProps<
+        FungibleToken<Web3Helper.Definition[T]['ChainId'], Web3Helper.Definition[T]['SchemaType']>
+    >) => {
         const t = useSharedI18N()
         const { classes } = useStyles()
-        const [, addERC20Token] = useAddERC20TokenCallback()
-        const [, trustERC20Token] = useTrustERC20TokenCallback()
-        const token = data.token
 
         if (!token) return null
-        const { address, name, symbol, logoURI } = token
-        const isNotAdded = some(externalTokens, (t: any) => isSameAddress(address, t.address))
-        const isAdded = some(addedTokens, (t: any) => isSameAddress(address, t.address))
+        const { address, name, symbol, decimals, logoURL } = token
+
+        const { source, balance, selected, loading } = useMemo(() => {
+            return {
+                source: getSource(address),
+                balance: getBalance(address),
+                selected: isSelected(address),
+                loading: isLoading(address),
+            }
+        }, [address, getSource, getBalance, isSelected, isLoading])
 
         const onImport = useCallback(
             async (event: React.MouseEvent<HTMLButtonElement>) => {
                 event.stopPropagation()
-                if (!token || !account) return
-                await addERC20Token(token as ERC20TokenDetailed)
-                await trustERC20Token(account, token as ERC20TokenDetailed)
+                if (token) importToken(token)
             },
-            [token, account],
+            [token, importToken],
         )
 
         const handleTokenSelect = (e: React.MouseEvent<HTMLElement>) => {
             e.stopPropagation()
-            onSelect(data)
+            onSelect(token)
         }
 
         const action = useMemo(() => {
-            return !isNotAdded || isAdded || (info.inList && info.from === 'search') ? (
-                data.balance === null ? null : (
-                    <span>
-                        {loadingAsset ? (
-                            <LoadingAnimation />
-                        ) : (
-                            Number.parseFloat(
-                                new BigNumber(formatBalance(data.balance ?? 0, token.decimals, 6)).toFixed(6),
-                            )
-                        )}
-                    </span>
-                )
+            return source !== 'external' ? (
+                <span>
+                    {loading ? (
+                        <LoadingAnimation />
+                    ) : (
+                        Number.parseFloat(new BigNumber(formatBalance(balance ?? 0, decimals, 6)).toFixed(6))
+                    )}
+                </span>
             ) : (
                 <MaskLoadingButton
                     variant="contained"
@@ -138,7 +131,7 @@ export const getERC20TokenListItem =
                     {t.import()}
                 </MaskLoadingButton>
             )
-        }, [info, isNotAdded, isAdded, data.balance])
+        }, [balance, decimals, loading])
 
         return (
             <ListItem
@@ -146,19 +139,19 @@ export const getERC20TokenListItem =
                 button
                 className={`${classes.list} dashboard token-list`}
                 onClick={handleTokenSelect}
-                disabled={selectedTokens.some(currySameAddress(address))}>
+                disabled={selected}>
                 <ListItemIcon>
-                    <TokenIcon classes={{ icon: classes.icon }} address={address} name={name} logoURI={logoURI} />
+                    <TokenIcon classes={{ icon: classes.icon }} address={address} name={name} logoURI={logoURL} />
                 </ListItemIcon>
                 <ListItemText classes={{ primary: classes.text }}>
                     <Typography
-                        className={classNames(classes.primary, isNotAdded ? classes.import : '')}
+                        className={classNames(classes.primary, source === 'external' ? classes.import : '')}
                         color="textPrimary"
                         component="span">
                         <span className={classes.symbol}>{symbol}</span>
                         <span className={`${classes.name} dashboard token-list-symbol`}>
                             {name}
-                            {isAdded && <span> &bull; Added By User</span>}
+                            {source === 'personal' && <span> &bull; Added By User</span>}
                         </span>
                     </Typography>
                     <Typography sx={{ fontSize: 16 }} color="textSecondary" component="span">
diff --git a/packages/shared/src/UI/components/FungibleTokenList/index.tsx b/packages/shared/src/UI/components/FungibleTokenList/index.tsx
new file mode 100644
index 000000000000..71e75d8ca013
--- /dev/null
+++ b/packages/shared/src/UI/components/FungibleTokenList/index.tsx
@@ -0,0 +1,192 @@
+import { memo, useState } from 'react'
+import { uniqBy } from 'lodash-unified'
+import { MaskFixedSizeListProps, MaskTextFieldProps, SearchableList } from '@masknet/theme'
+import { Stack, Typography } from '@mui/material'
+import { useSharedI18N } from '../../../locales'
+import {
+    useAccount,
+    useChainId,
+    useCurrentWeb3NetworkPluginID,
+    useFungibleAssets,
+    useFungibleToken,
+    useFungibleTokensBalance,
+    useFungibleTokensFromTokenList,
+    useTrustedFungibleTokens,
+    useWeb3State,
+    Web3Helper,
+} from '@masknet/plugin-infra/web3'
+import {
+    CurrencyType,
+    currySameAddress,
+    formatBalance,
+    FungibleToken,
+    isSameAddress,
+    NetworkPluginID,
+} from '@masknet/web3-shared-base'
+import { getFungibleTokenItem } from './FungibleTokenItem'
+import { EMPTY_LIST } from '@masknet/shared-base'
+
+const DEFAULT_LIST_HEIGHT = 300
+const SEARCH_KEYS = ['address', 'symbol', 'name']
+
+export interface FungibleTokenListProps<T extends NetworkPluginID> extends withClasses<'list' | 'placeholder'> {
+    pluginID?: T
+    chainId?: Web3Helper.Definition[T]['ChainId']
+    whitelist?: string[]
+    blacklist?: string[]
+    tokens?: Array<FungibleToken<Web3Helper.Definition[T]['ChainId'], Web3Helper.Definition[T]['SchemaType']>>
+    selectedTokens?: string[]
+    disableSearch?: boolean
+    onSelect?(
+        token: FungibleToken<Web3Helper.Definition[T]['ChainId'], Web3Helper.Definition[T]['SchemaType']> | null,
+    ): void
+    FixedSizeListProps?: Partial<MaskFixedSizeListProps>
+    SearchTextFieldProps?: MaskTextFieldProps
+}
+
+const Placeholder = memo(({ message, height }: { message: string; height?: number | string }) => (
+    <Stack minHeight={height ?? DEFAULT_LIST_HEIGHT} justifyContent="center" alignContent="center" marginTop="12px">
+        <Typography color="textSecondary" textAlign="center">
+            {message}
+        </Typography>
+    </Stack>
+))
+
+export function FungibleTokenList<T extends NetworkPluginID>(props: FungibleTokenListProps<T>) {
+    const {
+        tokens = [],
+        whitelist: includeTokens,
+        blacklist: excludeTokens = [],
+        onSelect,
+        FixedSizeListProps,
+        selectedTokens = [],
+    } = props
+
+    const t = useSharedI18N()
+    const pluginID = useCurrentWeb3NetworkPluginID(props.pluginID)
+    const account = useAccount()
+    const chainId = useChainId(pluginID, props.chainId)
+    const { Token, Others } = useWeb3State() as Web3Helper.Web3StateAll
+    const { value: fungibleTokens = EMPTY_LIST } = useFungibleTokensFromTokenList()
+    const trustedFungibleTokens = useTrustedFungibleTokens()
+
+    const nativeToken = Others?.chainResolver.nativeCurrency(chainId)
+    const allFungibleTokens = uniqBy(
+        [...(nativeToken ? [nativeToken] : []), ...tokens, ...fungibleTokens, ...trustedFungibleTokens],
+        (x) => x.address.toLowerCase(),
+    )
+
+    const filteredFungibleTokens = allFungibleTokens.filter(
+        (token) =>
+            (!includeTokens || includeTokens.some(currySameAddress(token.address))) &&
+            (!excludeTokens.length || !excludeTokens.some(currySameAddress(token.address))),
+    )
+
+    const { value: fungibleTokensBalance = {}, loading: fungibleTokensBalanceLoading } = useFungibleTokensBalance(
+        pluginID,
+        filteredFungibleTokens.map((x) => x.address),
+    )
+
+    const { value: fungibleAssets = [], loading: fungibleAssetsLoading } = useFungibleAssets(pluginID)
+    const fungibleAssetsTable = Object.fromEntries(fungibleAssets.map((x) => [x.address, x]))
+
+    const sortedFungibleTokens = filteredFungibleTokens.sort((a, b) => {
+        // tokens belong to the current chain
+        if (a.chainId !== b.chainId) {
+            if (a.chainId === chainId) return -1
+            if (b.chainId === chainId) return 1
+        }
+
+        // native token
+        if (isSameAddress(a.address, Others?.getNativeTokenAddress(a.chainId))) return -1
+        if (isSameAddress(b.address, Others?.getNativeTokenAddress(b.chainId))) return 1
+
+        // usd value
+        const aValueInUSD = Number.parseFloat(fungibleAssetsTable[a.address]?.value?.[CurrencyType.USD] ?? '0')
+        const bValueInUSD = Number.parseFloat(fungibleAssetsTable[b.address]?.value?.[CurrencyType.USD] ?? '0')
+        if (aValueInUSD > bValueInUSD) return -1
+        if (aValueInUSD < bValueInUSD) return 1
+
+        // balance
+        const aBalance = Number.parseFloat(formatBalance(fungibleTokensBalance[a.address] ?? '0', a.decimals))
+        const bBalance = Number.parseFloat(formatBalance(fungibleTokensBalance[b.address] ?? '0', b.decimals))
+
+        if (aBalance > bBalance) return -1
+        if (aBalance < bBalance) return 1
+
+        // mask token
+        if (isSameAddress(a.address, Others?.getMaskTokenAddress(a.chainId))) return -1
+        if (isSameAddress(b.address, Others?.getMaskTokenAddress(b.chainId))) return 1
+
+        // alphabet
+        if ((a.name ?? '') < (b.name ?? '')) return -1
+        if ((a.name ?? '') > (b.name ?? '')) return 1
+
+        return 0
+    })
+
+    // #region add token by address
+    const [keyword, setKeyword] = useState('')
+    const searchedTokenAddress =
+        Others?.isValidAddress(keyword) && !sortedFungibleTokens.some((x) => isSameAddress(x.address, keyword))
+            ? keyword
+            : ''
+
+    const { value: searchedToken, loading: searchedTokenLoading } = useFungibleToken(pluginID, searchedTokenAddress)
+    // #endregion
+
+    const getPlaceholder = () => {
+        if (Object.keys(fungibleTokensBalance).length === 0 || fungibleTokensBalanceLoading)
+            return <Placeholder height={FixedSizeListProps?.height} message={t.erc20_token_list_loading()} />
+        if (searchedTokenLoading)
+            return <Placeholder height={FixedSizeListProps?.height} message={t.erc20_search_token_loading()} />
+        if (searchedTokenAddress && !searchedToken)
+            return <Placeholder height={FixedSizeListProps?.height} message={t.erc20_search_not_token_found()} />
+        return null
+    }
+
+    return (
+        <SearchableList<FungibleToken<Web3Helper.Definition[T]['ChainId'], Web3Helper.Definition[T]['SchemaType']>>
+            onSelect={(token) => onSelect?.(token)}
+            onSearch={setKeyword}
+            data={
+                searchedToken &&
+                isSameAddress(searchedToken.address, searchedTokenAddress) &&
+                !sortedFungibleTokens.find((x) => isSameAddress(x.address, searchedTokenAddress))
+                    ? [searchedToken]
+                    : sortedFungibleTokens
+            }
+            searchKey={SEARCH_KEYS}
+            disableSearch={!!props.disableSearch}
+            itemRender={getFungibleTokenItem<T>(
+                account,
+                (address) => {
+                    if (isSameAddress(nativeToken?.address, address)) return 'official'
+
+                    const inOfficialList = fungibleTokens.some((x) => isSameAddress(x.address, address))
+                    if (inOfficialList) return 'official'
+
+                    const inPersonaList = trustedFungibleTokens.some((x) => isSameAddress(x.address, address))
+                    if (inPersonaList) return 'personal'
+
+                    return 'external'
+                },
+                (address) => fungibleTokensBalance[address] ?? '0',
+                (address) => selectedTokens.some((x) => isSameAddress(x, address)),
+                (address) => fungibleTokensBalanceLoading || fungibleAssetsLoading,
+                async (
+                    token: FungibleToken<Web3Helper.Definition[T]['ChainId'], Web3Helper.Definition[T]['SchemaType']>,
+                ) => {
+                    await Token?.addToken?.(token)
+                    await Token?.trustToken?.(account, token)
+                },
+            )}
+            placeholder={getPlaceholder()}
+            FixedSizeListProps={FixedSizeListProps}
+            SearchFieldProps={{
+                placeholder: t.erc20_token_list_placeholder(),
+                ...props.SearchTextFieldProps,
+            }}
+        />
+    )
+}
diff --git a/packages/shared/src/UI/components/NFTCardStyledAssetPlayer/index.tsx b/packages/shared/src/UI/components/NFTCardStyledAssetPlayer/index.tsx
index a0d77b33f358..47683b804a6b 100644
--- a/packages/shared/src/UI/components/NFTCardStyledAssetPlayer/index.tsx
+++ b/packages/shared/src/UI/components/NFTCardStyledAssetPlayer/index.tsx
@@ -1,8 +1,10 @@
 import classNames from 'classnames'
 import { CircularProgress, useTheme } from '@mui/material'
-import { ChainId, useImageChecker, useERC721TokenDetailed, ERC721ContractDetailed } from '@masknet/web3-shared-evm'
 import { makeStyles, useStylesExtends } from '@masknet/theme'
 import { AssetPlayer } from '../AssetPlayer'
+import { useImageChecker, useNonFungibleToken, Web3Helper } from '@masknet/plugin-infra/web3'
+import type { ChainId } from '@masknet/web3-shared-evm'
+import { NetworkPluginID } from '@masknet/web3-shared-base'
 
 const useStyles = makeStyles()((theme) => ({
     wrapper: {
@@ -31,9 +33,9 @@ const useStyles = makeStyles()((theme) => ({
 }))
 
 interface Props extends withClasses<'loadingFailImage' | 'iframe' | 'wrapper' | 'loadingPlaceholder' | 'imgWrapper'> {
-    chainId?: ChainId
-    contractAddress?: string
+    chainId?: Web3Helper.ChainIdAll
     tokenId?: string
+    contractAddress?: string
     url?: string
     fallbackImage?: URL
     fallbackResourceLoader?: JSX.Element
@@ -48,7 +50,7 @@ const assetPlayerFallbackImageLight = new URL('./nft_token_fallback.png', import
 
 export function NFTCardStyledAssetPlayer(props: Props) {
     const {
-        chainId = ChainId.Mainnet,
+        chainId,
         contractAddress = '',
         tokenId = '',
         isNative = false,
@@ -61,11 +63,12 @@ export function NFTCardStyledAssetPlayer(props: Props) {
     } = props
     const classes = useStylesExtends(useStyles(), props)
     const theme = useTheme()
-    const { tokenDetailed } = useERC721TokenDetailed(
-        { address: contractAddress, chainId } as ERC721ContractDetailed,
-        tokenId,
+    const { value: tokenDetailed } = useNonFungibleToken(NetworkPluginID.PLUGIN_EVM, contractAddress, tokenId, {
+        chainId: chainId as ChainId,
+    })
+    const { value: isImageToken } = useImageChecker(
+        url || tokenDetailed?.metadata?.imageURL || tokenDetailed?.metadata?.mediaURL,
     )
-    const { value: isImageToken } = useImageChecker(url || tokenDetailed?.info.imageURL || tokenDetailed?.info.mediaUrl)
 
     const fallbackImageURL =
         theme.palette.mode === 'dark' ? assetPlayerFallbackImageDark : assetPlayerFallbackImageLight
@@ -75,7 +78,7 @@ export function NFTCardStyledAssetPlayer(props: Props) {
             <img
                 width="100%"
                 style={{ objectFit: 'cover' }}
-                src={url || tokenDetailed?.info.imageURL || tokenDetailed?.info.mediaUrl}
+                src={url || tokenDetailed?.metadata?.imageURL || tokenDetailed?.metadata?.mediaURL}
                 onError={(event) => {
                     const target = event.currentTarget as HTMLImageElement
                     target.src = fallbackImageURL.toString()
diff --git a/packages/shared/src/UI/components/ReversedAddress/index.tsx b/packages/shared/src/UI/components/ReversedAddress/index.tsx
index efe5cf79ff2c..5431612c4113 100644
--- a/packages/shared/src/UI/components/ReversedAddress/index.tsx
+++ b/packages/shared/src/UI/components/ReversedAddress/index.tsx
@@ -1,7 +1,8 @@
 import { memo } from 'react'
-import { NetworkPluginID, useReverseAddress, useWeb3State } from '@masknet/plugin-infra/web3'
+import type { NetworkPluginID } from '@masknet/web3-shared-base'
+import { useReverseAddress, useWeb3State } from '@masknet/plugin-infra/web3'
 
-interface ReverseAddressProps {
+export interface ReverseAddressProps {
     address: string
     pluginId?: NetworkPluginID
     domainSize?: number
@@ -9,10 +10,10 @@ interface ReverseAddressProps {
 }
 
 export const ReversedAddress = memo<ReverseAddressProps>(({ address, pluginId, domainSize, size = 5 }) => {
-    const { value: domain } = useReverseAddress(address, pluginId)
-    const { Utils } = useWeb3State(pluginId)
+    const { value: domain } = useReverseAddress(pluginId, address)
+    const { Others } = useWeb3State(pluginId)
 
-    if (!domain || !Utils?.formatDomainName) return <>{Utils?.formatAddress?.(address, size) ?? address}</>
+    if (!domain || !Others?.formatDomainName) return <>{Others?.formatAddress?.(address, size) ?? address}</>
 
-    return <>{Utils.formatDomainName(domain, domainSize)}</>
+    return <>{Others.formatDomainName(domain, domainSize)}</>
 })
diff --git a/packages/shared/src/UI/components/SelectTokenChip/index.tsx b/packages/shared/src/UI/components/SelectTokenChip/index.tsx
index 332c82f3d08d..1a423584bae3 100644
--- a/packages/shared/src/UI/components/SelectTokenChip/index.tsx
+++ b/packages/shared/src/UI/components/SelectTokenChip/index.tsx
@@ -4,9 +4,10 @@ import { makeStyles, useStylesExtends } from '@masknet/theme'
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
 import ErrorIcon from '@mui/icons-material/Error'
 import { noop } from 'lodash-unified'
-import type { FungibleTokenDetailed } from '@masknet/web3-shared-evm'
 import { useSharedI18N } from '../../../locales'
 import { TokenIcon } from '../TokenIcon'
+import type { FungibleToken } from '@masknet/web3-shared-base'
+import type { ChainId, SchemaType } from '@masknet/web3-shared-evm'
 
 const useStyles = makeStyles()((theme) => {
     return {
@@ -33,7 +34,7 @@ const useStyles = makeStyles()((theme) => {
 })
 
 export interface SelectTokenChipProps extends withClasses<'chip' | 'tokenIcon' | 'noToken'> {
-    token?: FungibleTokenDetailed | null
+    token?: FungibleToken<ChainId, SchemaType> | null
     error?: Error
     loading?: boolean
     readonly?: boolean
@@ -70,7 +71,7 @@ export function SelectTokenChip(props: SelectTokenChipProps) {
         return (
             <Chip
                 className={classes.chip}
-                icon={<TokenIcon address={token.address} name={token.name} logoURI={token.logoURI} />}
+                icon={<TokenIcon address={token.address} name={token.name} logoURI={token.logoURL} />}
                 deleteIcon={<ErrorIcon className={classes.icon} />}
                 label={token.symbol}
                 color="default"
@@ -90,7 +91,7 @@ export function SelectTokenChip(props: SelectTokenChipProps) {
                     classes={{ icon: classes.tokenIcon }}
                     address={token.address}
                     name={token.name}
-                    logoURI={token.logoURI}
+                    logoURI={token.logoURL}
                 />
             }
             deleteIcon={readonly ? undefined : <ExpandMoreIcon className={classes.icon} />}
diff --git a/packages/shared/src/UI/components/TokenAmountPanel/index.tsx b/packages/shared/src/UI/components/TokenAmountPanel/index.tsx
index b232e18223b5..6d767ceda231 100644
--- a/packages/shared/src/UI/components/TokenAmountPanel/index.tsx
+++ b/packages/shared/src/UI/components/TokenAmountPanel/index.tsx
@@ -1,10 +1,11 @@
 import { ChangeEvent, useCallback, useMemo } from 'react'
-import { Box, Chip, ChipProps, InputProps, StandardTextFieldProps, Typography } from '@mui/material'
-import { makeStyles, MaskTextField, useStylesExtends } from '@masknet/theme'
 import classNames from 'classnames'
 import BigNumber from 'bignumber.js'
+import { Box, Chip, ChipProps, InputProps, StandardTextFieldProps, Typography } from '@mui/material'
+import { makeStyles, MaskTextField, useStylesExtends } from '@masknet/theme'
+import { FungibleToken, formatBalance } from '@masknet/web3-shared-base'
+import type { ChainId, SchemaType } from '@masknet/web3-shared-evm'
 import { SelectTokenChip, SelectTokenChipProps } from '../SelectTokenChip'
-import { FungibleTokenDetailed, formatBalance } from '@masknet/web3-shared-evm'
 import { useSharedI18N } from '../../../locales'
 import { FormattedBalance } from '../../../wallet'
 
@@ -56,7 +57,7 @@ export interface TokenAmountPanelProps extends withClasses<'root'> {
     disableToken?: boolean
     disableBalance?: boolean
     label: string
-    token?: FungibleTokenDetailed | null
+    token?: FungibleToken<ChainId, SchemaType> | null
     onAmountChange: (amount: string) => void
     InputProps?: Partial<InputProps>
     MaxChipProps?: Partial<ChipProps>
diff --git a/packages/shared/src/UI/components/TokenIcon/index.tsx b/packages/shared/src/UI/components/TokenIcon/index.tsx
index 8f3be76a7b19..9dfa8e3a86b3 100644
--- a/packages/shared/src/UI/components/TokenIcon/index.tsx
+++ b/packages/shared/src/UI/components/TokenIcon/index.tsx
@@ -1,33 +1,13 @@
 import { memo } from 'react'
-import {
-    ChainId,
-    currySameAddress,
-    formatEthereumAddress,
-    getChainDetailed,
-    getTokenConstants,
-    isSameAddress,
-    useChainId,
-    useTokenAssetBaseURLConstants,
-} from '@masknet/web3-shared-evm'
 import { Avatar, AvatarProps } from '@mui/material'
 import { makeStyles, useStylesExtends } from '@masknet/theme'
-import { useImageFailOver } from '../../hooks'
-import SPECIAL_ICON_LIST from './TokenIconSpecialIconList.json'
 import NO_IMAGE_COLOR from './constants'
+import { useChainId, useWeb3Hub, Web3Helper } from '@masknet/plugin-infra/web3'
+import type { NetworkPluginID } from '@masknet/web3-shared-base'
+import { useImageFailOver } from '../../../hooks'
+import { useAsyncRetry } from 'react-use'
+import { EMPTY_LIST } from '@masknet/shared-base'
 
-function getFallbackIcons(address: string, baseURIs: string[]) {
-    const checkSummedAddress = formatEthereumAddress(address)
-
-    if (isSameAddress(getTokenConstants().NATIVE_TOKEN_ADDRESS, checkSummedAddress)) {
-        return baseURIs.map((x) => `${x}/info/logo.png`)
-    }
-
-    const specialIcon = SPECIAL_ICON_LIST.find(currySameAddress(address))
-    if (specialIcon) return [specialIcon.logo_url]
-
-    // load from remote
-    return baseURIs.map((x) => `${x}/assets/${checkSummedAddress}/logo.png`)
-}
 const useStyles = makeStyles()((theme) => ({
     icon: {
         backgroundColor: theme.palette.common.white,
@@ -36,32 +16,26 @@ const useStyles = makeStyles()((theme) => ({
 }))
 
 export interface TokenIconProps extends withClasses<'icon'> {
-    name?: string
-    logoURI?: string | string[]
-    chainId?: ChainId
+    chainId?: Web3Helper.ChainIdAll
+    pluginID?: NetworkPluginID
     address: string
+    name?: string
+    logoURI?: string
     AvatarProps?: Partial<AvatarProps>
 }
 
 export function TokenIcon(props: TokenIconProps) {
-    const currentChainId = useChainId()
-    const { address, logoURI, name, chainId = currentChainId, AvatarProps, classes } = props
-    let _logoURI = logoURI
+    const { address, logoURI, name, AvatarProps, classes } = props
 
-    if (!logoURI && isSameAddress(getTokenConstants().NATIVE_TOKEN_ADDRESS, formatEthereumAddress(address))) {
-        const nativeToken = getChainDetailed(chainId)
-        _logoURI = nativeToken?.nativeCurrency.logoURI
-    }
+    const chainId = useChainId(props.pluginID, props.chainId) as Web3Helper.ChainIdAll
+    const hub = useWeb3Hub(props.pluginID) as Web3Helper.Web3HubAll
 
-    const { TOKEN_ASSET_BASE_URI } = useTokenAssetBaseURLConstants(chainId)
-    const fallbackLogos = getFallbackIcons(address, TOKEN_ASSET_BASE_URI ?? [])
+    const { value: urls = EMPTY_LIST } = useAsyncRetry(async () => {
+        const logoURLs = await hub?.getFungibleTokenIconURLs?.(chainId, address)
+        return [logoURI, ...(logoURLs ?? [])].filter(Boolean) as string[]
+    }, [chainId, address, logoURI, hub])
 
-    const images = _logoURI
-        ? Array.isArray(_logoURI)
-            ? [..._logoURI, ...fallbackLogos]
-            : [_logoURI, ...fallbackLogos]
-        : fallbackLogos
-    const { value: trustedLogoURI, loading } = useImageFailOver(images, '')
+    const { value: trustedLogoURI, loading } = useImageFailOver(urls, '')
 
     return (
         <TokenIconUI
diff --git a/packages/shared/src/UI/components/index.ts b/packages/shared/src/UI/components/index.ts
index 69aab269703a..e6ebd8c28274 100644
--- a/packages/shared/src/UI/components/index.ts
+++ b/packages/shared/src/UI/components/index.ts
@@ -3,7 +3,7 @@ export * from './ApplicationEntry'
 export * from './AssetPlayer'
 export * from './ChainIcon'
 export * from './ConcealableTabs'
-export * from './ERC20TokenList'
+export * from './FungibleTokenList'
 export * from './I18NextProviderHMR'
 export * from './ImageIcon'
 export * from './LoadingAnimation'
diff --git a/packages/shared/src/UI/index.ts b/packages/shared/src/UI/index.ts
index 688fa38c854d..cb64ac1b52aa 100644
--- a/packages/shared/src/UI/index.ts
+++ b/packages/shared/src/UI/index.ts
@@ -1,2 +1 @@
-export * from './hooks'
 export * from './components'
diff --git a/packages/shared/src/contexts/evm/TokenPicker/SelectTokenDialog.tsx b/packages/shared/src/contexts/evm/TokenPicker/SelectTokenDialog.tsx
index 29c405d328b0..3c2beb15a25a 100644
--- a/packages/shared/src/contexts/evm/TokenPicker/SelectTokenDialog.tsx
+++ b/packages/shared/src/contexts/evm/TokenPicker/SelectTokenDialog.tsx
@@ -1,11 +1,12 @@
-import { ERC20TokenList, useSharedI18N } from '@masknet/shared'
+import { FungibleTokenList, useSharedI18N } from '@masknet/shared'
+import type { FungibleToken } from '@masknet/web3-shared-base'
 import { EMPTY_LIST, EnhanceableSite } from '@masknet/shared-base'
 import { makeStyles, MaskColorVar } from '@masknet/theme'
-import { ChainId, FungibleTokenDetailed, useTokenConstants } from '@masknet/web3-shared-evm'
+import { ChainId, SchemaType, useTokenConstants } from '@masknet/web3-shared-evm'
 import { DialogContent, Theme, useMediaQuery } from '@mui/material'
 import type { FC } from 'react'
 import { useBaseUIRuntime } from '../../base'
-import { InjectedDialog, InjectedDialogProps } from '../../components'
+import { InjectedDialog } from '../../components'
 import { useRowSize } from './useRowSize'
 
 interface StyleProps {
@@ -45,12 +46,15 @@ export interface PickTokenOptions {
     whitelist?: string[]
     title?: string
     blacklist?: string[]
-    tokens?: FungibleTokenDetailed[]
+    tokens?: Array<FungibleToken<ChainId, SchemaType>>
     selectedTokens?: string[]
-    onSubmit?(token: FungibleTokenDetailed): void
 }
 
-export interface SelectTokenDialogProps extends PickTokenOptions, Omit<InjectedDialogProps, 'onSubmit' | 'title'> {}
+export interface SelectTokenDialogProps extends PickTokenOptions {
+    open: boolean
+    onSelect?(token: FungibleToken<ChainId, SchemaType.Native | SchemaType.ERC20>): void
+    onClose?(): void
+}
 
 export const SelectTokenDialog: FC<SelectTokenDialogProps> = ({
     open,
@@ -61,7 +65,7 @@ export const SelectTokenDialog: FC<SelectTokenDialogProps> = ({
     whitelist,
     blacklist = EMPTY_LIST,
     selectedTokens = EMPTY_LIST,
-    onSubmit,
+    onSelect,
     onClose,
     title,
 }) => {
@@ -82,15 +86,15 @@ export const SelectTokenDialog: FC<SelectTokenDialogProps> = ({
             onClose={onClose}
             title={title ?? t.select_token()}>
             <DialogContent classes={{ root: classes.content }}>
-                <ERC20TokenList
+                <FungibleTokenList
                     classes={{ list: classes.list, placeholder: classes.placeholder }}
-                    onSelect={onSubmit}
+                    onSelect={onSelect}
                     tokens={tokens ?? []}
                     whitelist={whitelist}
                     blacklist={
                         disableNativeToken && NATIVE_TOKEN_ADDRESS ? [NATIVE_TOKEN_ADDRESS, ...blacklist] : blacklist
                     }
-                    targetChainId={chainId}
+                    chainId={chainId}
                     disableSearch={disableSearchBar}
                     selectedTokens={selectedTokens}
                     FixedSizeListProps={{
diff --git a/packages/shared/src/contexts/evm/TokenPicker/index.tsx b/packages/shared/src/contexts/evm/TokenPicker/index.tsx
index fb5fde600517..61d2b95a53b2 100644
--- a/packages/shared/src/contexts/evm/TokenPicker/index.tsx
+++ b/packages/shared/src/contexts/evm/TokenPicker/index.tsx
@@ -1,15 +1,72 @@
-import type { FungibleTokenDetailed } from '@masknet/web3-shared-evm'
-import { useContext } from 'react'
-import { createUITaskManager } from '../../UITaskManager'
-import { PickTokenOptions, SelectTokenDialog, SelectTokenDialogProps } from './SelectTokenDialog'
+import { defer, DeferTuple } from '@dimensiondev/kit'
+import { EMPTY_LIST } from '@masknet/shared-base'
+import type { FungibleToken } from '@masknet/web3-shared-base'
+import type { ChainId, SchemaType } from '@masknet/web3-shared-evm'
+import { createContext, FC, PropsWithChildren, useCallback, useContext, useMemo, useState } from 'react'
+import { PickTokenOptions, SelectTokenDialog } from './SelectTokenDialog'
 
-const { TaskManagerContext, TaskManagerProvider: TokenPickerProvider } = createUITaskManager<
-    PickTokenOptions,
-    FungibleTokenDetailed,
-    SelectTokenDialogProps
->(SelectTokenDialog)
+interface ContextOptions {
+    pickToken: (
+        options: PickTokenOptions,
+    ) => Promise<FungibleToken<ChainId, SchemaType.Native | SchemaType.ERC20> | null>
+}
+const TokenPickerContext = createContext<ContextOptions>(null!)
+
+type PickerDeferTuple = DeferTuple<FungibleToken<ChainId, SchemaType.Native | SchemaType.ERC20> | null>
+
+interface Task {
+    id: number
+    promise: PickerDeferTuple[0]
+    resolve: PickerDeferTuple[1]
+    reject: PickerDeferTuple[2]
+    pickerOptions: PickTokenOptions
+}
+
+let id = 0
+export const TokenPickerProvider: FC<PropsWithChildren<{}>> = ({ children }) => {
+    const [tasks, setTasks] = useState<Task[]>(EMPTY_LIST)
+
+    const removeTask = useCallback((task: Task) => {
+        setTasks((list) => list.filter((t) => t !== task))
+    }, [])
+
+    const contextValue = useMemo(() => {
+        return {
+            pickToken: (options: PickTokenOptions) => {
+                const [promise, resolve, reject] = defer<FungibleToken<
+                    ChainId,
+                    SchemaType.Native | SchemaType.ERC20
+                > | null>()
+                id += 1
+                const newTask: Task = { id, promise, resolve, reject, pickerOptions: options }
+                setTasks((list) => [...list, newTask])
+                return promise
+            },
+        }
+    }, [])
+
+    return (
+        <TokenPickerContext.Provider value={contextValue}>
+            {children}
+            {tasks.map((task) => (
+                <SelectTokenDialog
+                    open
+                    key={task.id}
+                    {...task.pickerOptions}
+                    onSelect={(token) => {
+                        task.resolve(token)
+                        removeTask(task)
+                    }}
+                    onClose={() => {
+                        task.resolve(null)
+                        removeTask(task)
+                    }}
+                />
+            ))}
+        </TokenPickerContext.Provider>
+    )
+}
 
 export const usePickToken = () => {
-    return useContext(TaskManagerContext).show
+    return useContext(TokenPickerContext).pickToken
 }
-export { TokenPickerProvider }
diff --git a/packages/shared/src/hooks/index.ts b/packages/shared/src/hooks/index.ts
index 7bd33c8d2f87..23b1a243a6e8 100644
--- a/packages/shared/src/hooks/index.ts
+++ b/packages/shared/src/hooks/index.ts
@@ -1,3 +1,4 @@
 export * from './useMenu'
 export * from './useOpenShareTxDialog'
 export * from './useSnackbarCallback'
+export * from './useImageFailOver'
diff --git a/packages/shared/src/hooks/useImageFailOver.ts b/packages/shared/src/hooks/useImageFailOver.ts
new file mode 100644
index 000000000000..3911b132d43b
--- /dev/null
+++ b/packages/shared/src/hooks/useImageFailOver.ts
@@ -0,0 +1,27 @@
+import { useAsync } from 'react-use'
+import { findAvailableImageURL } from '@dimensiondev/kit'
+import type { AsyncState } from 'react-use/lib/useAsyncFn'
+
+const cache = new Map<string, string>()
+
+/**
+ * Request images from different sources and get the image's url of the loaded
+ * @param urls the url of different image sources
+ * @param suffix the image file path suffix
+ */
+export function useImageFailOver(urls: readonly string[], suffix: string): AsyncState<string> {
+    return useAsync(async () => {
+        const cacheKey = `${urls.join()}_${suffix}`
+        if (cache.has(cacheKey)) return cache.get(cacheKey)
+
+        try {
+            const imgs = urls.map((v) => v + suffix)
+            const img = await findAvailableImageURL(imgs)
+            const url = urls[imgs.indexOf(img)]
+            cache.set(cacheKey, url)
+            return url
+        } catch {
+            return ''
+        }
+    }, [urls.join(), suffix])
+}
diff --git a/packages/shared/src/hooks/useOpenShareTxDialog.tsx b/packages/shared/src/hooks/useOpenShareTxDialog.tsx
index 41147ccd3f08..5b9c92025e0e 100644
--- a/packages/shared/src/hooks/useOpenShareTxDialog.tsx
+++ b/packages/shared/src/hooks/useOpenShareTxDialog.tsx
@@ -1,9 +1,11 @@
+import { useChainId } from '@masknet/plugin-infra/web3'
 import { makeStyles } from '@masknet/theme'
-import { resolveTransactionLinkOnExplorer, useChainId } from '@masknet/web3-shared-evm'
+import { NetworkPluginID } from '@masknet/web3-shared-base'
+import { explorerResolver } from '@masknet/web3-shared-evm'
 import DoneIcon from '@mui/icons-material/Done'
 import { Link, Typography } from '@mui/material'
 import { FC, memo, useCallback } from 'react'
-import { useShowConfirm } from '../contexts'
+import { useShowConfirm } from '../contexts/common'
 import { useSharedI18N } from '../locales'
 
 const useStyles = makeStyles()((theme) => ({
@@ -46,8 +48,8 @@ type ShareTransactionProps = Omit<ShareTransactionOptions, 'title' | 'onShare'>
 const ShareTransaction: FC<ShareTransactionProps> = memo(({ message, content, hash }) => {
     const { classes } = useStyles()
     const t = useSharedI18N()
-    const chainId = useChainId()
-    const link = resolveTransactionLinkOnExplorer(chainId, hash)
+    const chainId = useChainId(NetworkPluginID.PLUGIN_EVM)
+    const link = explorerResolver.transactionLink(chainId, hash)
     return (
         <div className={classes.content}>
             <DoneIcon className={classes.icon} />
diff --git a/packages/shared/src/index.ts b/packages/shared/src/index.ts
index 91e163b62985..99ca1fbfdecc 100644
--- a/packages/shared/src/index.ts
+++ b/packages/shared/src/index.ts
@@ -10,10 +10,8 @@ export interface DashboardPluginMessages {
     Wallet: unknown
     Transak: unknown
     Swap: unknown
-    Pets: unknown
 }
 
 export interface DashboardPluginServices {
     Wallet: unknown
-    Swap: unknown
 }
diff --git a/packages/shared/src/utils/index.ts b/packages/shared/src/utils/index.ts
new file mode 100644
index 000000000000..059a773360ef
--- /dev/null
+++ b/packages/shared/src/utils/index.ts
@@ -0,0 +1,68 @@
+import {
+    CurrencyType,
+    FungibleAsset,
+    FungibleToken,
+    leftShift,
+    multipliedBy,
+    NonFungibleToken,
+    TokenType,
+} from '@masknet/web3-shared-base'
+
+export function createFungibleToken<ChainId, SchemaType>(
+    chainId: ChainId,
+    schema: SchemaType,
+    address: string,
+    name: string,
+    symbol: string,
+    decimals: number,
+    logoURL?: string,
+): FungibleToken<ChainId, SchemaType> {
+    return {
+        id: address,
+        chainId,
+        type: TokenType.Fungible,
+        schema,
+        address,
+        name,
+        symbol,
+        decimals,
+        logoURL,
+    }
+}
+
+export function createFungibleAsset<ChainId, SchemaType>(
+    token: FungibleToken<ChainId, SchemaType>,
+    balance: string,
+    price?: { [key in CurrencyType]?: string },
+): FungibleAsset<ChainId, SchemaType> {
+    return {
+        ...token,
+        balance: leftShift(balance, token.decimals ?? 0).toFixed(),
+        price,
+        value: {
+            [CurrencyType.USD]: multipliedBy(price?.usd ?? 0, leftShift(balance, token.decimals ?? 0)).toFixed(),
+        },
+    }
+}
+
+export function createNonFungibleToken<ChainId, SchemaType>(
+    chainId: ChainId,
+    schema: SchemaType,
+    address: string,
+    tokenId: string,
+    contract: NonFungibleToken<ChainId, SchemaType>['contract'],
+    metadata: NonFungibleToken<ChainId, SchemaType>['metadata'],
+    collection?: NonFungibleToken<ChainId, SchemaType>['collection'],
+): NonFungibleToken<ChainId, SchemaType> {
+    return {
+        id: address,
+        type: TokenType.NonFungible,
+        schema,
+        chainId,
+        tokenId,
+        address,
+        contract,
+        metadata,
+        collection,
+    }
+}
diff --git a/packages/shared/tsconfig.json b/packages/shared/tsconfig.json
index b3e26abdc7e2..bc8c0641f152 100644
--- a/packages/shared/tsconfig.json
+++ b/packages/shared/tsconfig.json
@@ -7,12 +7,13 @@
   },
   "include": ["./src", "./src/**/*.json"],
   "references": [
-    { "path": "../web3-shared/evm" },
     { "path": "../theme" },
-    { "path": "../shared-base-ui" },
+    { "path": "../plugin-infra" },
     { "path": "../shared-base" },
     { "path": "../shared-base-ui" },
-    { "path": "../icons" },
-    { "path": "../plugin-infra" }
+    { "path": "../web3-shared/evm" },
+    { "path": "../web3-shared/flow" },
+    { "path": "../web3-shared/solana" },
+    { "path": "../icons" }
   ]
 }
diff --git a/packages/web3-constants/evm/lbp.json b/packages/web3-constants/evm/lbp.json
deleted file mode 100644
index 4ed79897fe9f..000000000000
--- a/packages/web3-constants/evm/lbp.json
+++ /dev/null
@@ -1,25 +0,0 @@
-{
-    "BALANCER_POOLS_SUBGRAPH_URL": {
-        "Mainnet": "https://api.thegraph.com/subgraphs/name/balancer-labs/balancer-beta",
-        "Ropsten": "",
-        "Rinkeby": "",
-        "Kovan": "",
-        "Gorli": "",
-        "BSC": "",
-        "BSCT": "",
-        "Matic": "",
-        "Mumbai": "",
-        "Arbitrum": "",
-        "Arbitrum_Rinkeby": "",
-        "xDai": "",
-        "Avalanche": "",
-        "Avalanche_Fuji": "",
-        "Celo": "",
-        "Fantom": "",
-        "Aurora": "",
-        "Aurora_Testnet": "",
-        "Conflux": "",
-        "Harmony": "",
-        "Harmony_Test": ""
-    }
-}
diff --git a/packages/web3-constants/evm/rpc.json b/packages/web3-constants/evm/rpc.json
index a3074975a56d..6187ee5f547f 100644
--- a/packages/web3-constants/evm/rpc.json
+++ b/packages/web3-constants/evm/rpc.json
@@ -1,5 +1,5 @@
 {
-    "RPC": {
+    "RPC_URLS": {
         "Mainnet": [
             "https://mainnet.infura.io/v3/d65858b010d249419cf8687eca12b094",
             "https://mainnet.infura.io/v3/d74bd8586b9e44449cef131d39ceeefb",
diff --git a/packages/web3-constants/evm/token-list.json b/packages/web3-constants/evm/token-list.json
index 247481564f6b..2abc144015ae 100644
--- a/packages/web3-constants/evm/token-list.json
+++ b/packages/web3-constants/evm/token-list.json
@@ -1,10 +1,10 @@
 {
-    "ERC20": {
+    "FUNGIBLE_TOKEN_LISTS": {
         "Mainnet": ["https://tokens.r2d2.to/latest/1/tokens.json"],
         "Ropsten": ["https://tokens.r2d2.to/latest/3/tokens.json"],
         "Rinkeby": ["https://tokens.r2d2.to/latest/4/tokens.json"],
         "Kovan": ["https://irhonin.github.io/kovan-token-list/kovan-token-list.json"],
-        "Gorli": [],
+        "Gorli": ["https://tokens.r2d2.to/latest/5/tokens.json"],
         "BSC": ["https://tokens.r2d2.to/latest/56/tokens.json"],
         "BSCT": ["https://tokens.r2d2.to/latest/97/tokens.json"],
         "Matic": ["https://tokens.r2d2.to/latest/137/tokens.json"],
@@ -21,5 +21,28 @@
         "Conflux": ["https://tokens.r2d2.to/latest/1030/tokens.json"],
         "Harmony": ["https://tokens.r2d2.to/latest/1666600000/tokens.json"],
         "Harmony_Test": ["https://tokens.r2d2.to/latest/1666700000/tokens.json"]
+    },
+    "NON_FUNGIBLE_TOKEN_LISTS": {
+        "Mainnet": ["https://tokens.r2d2.to/latest/1/non-fungible-tokens.json"],
+        "Ropsten": [],
+        "Rinkeby": [],
+        "Kovan": [],
+        "Gorli": [],
+        "BSC": [],
+        "BSCT": [],
+        "Matic": [],
+        "Mumbai": [],
+        "Arbitrum": [],
+        "Arbitrum_Rinkeby": [],
+        "xDai": [],
+        "Avalanche": [],
+        "Avalanche_Fuji": [],
+        "Celo": [],
+        "Fantom": [],
+        "Aurora": [],
+        "Aurora_Testnet": [],
+        "Conflux": [],
+        "Harmony": [],
+        "Harmony_Test": []
     }
 }
diff --git a/packages/web3-constants/flow/chain.json b/packages/web3-constants/flow/chain.json
new file mode 100644
index 000000000000..416df0e3cf4b
--- /dev/null
+++ b/packages/web3-constants/flow/chain.json
@@ -0,0 +1,18 @@
+{
+    "NAME": {
+        "Mainnet": "Flow",
+        "Testnet": "Flow Testnet"
+    },
+    "FULL_NAME": {
+        "Mainnet": "Flow",
+        "Testnet": "Flow Testnet"
+    },
+    "SHORT_NAME": {
+        "Mainnet": "FCL",
+        "Testnet": "FCL"
+    },
+    "COLOR": {
+        "Mainnet": "#34d399",
+        "Testnet": "#34d399"
+    }
+}
diff --git a/packages/web3-constants/solana/chain.json b/packages/web3-constants/solana/chain.json
new file mode 100644
index 000000000000..b24274f8dab2
--- /dev/null
+++ b/packages/web3-constants/solana/chain.json
@@ -0,0 +1,22 @@
+{
+    "NAME": {
+        "Mainnet": "Solana",
+        "Testnet": "Solana Testnet",
+        "Devnet": "Solana Devnet"
+    },
+    "FULL_NAME": {
+        "Mainnet": "Solana",
+        "Testnet": "Solana Testnet",
+        "Devnet": "Solana Devnet"
+    },
+    "SHORT_NAME": {
+        "Mainnet": "SOL",
+        "Testnet": "SOL",
+        "Devnet": "SOL"
+    },
+    "COLOR": {
+        "Mainnet": "#25c2a0",
+        "Testnet": "#25c2a0",
+        "Devnet": "#25c2a0"
+    }
+}
diff --git a/packages/web3-contracts/abis/ERC165.json b/packages/web3-contracts/abis/ERC165.json
new file mode 100644
index 000000000000..8285cd6893e9
--- /dev/null
+++ b/packages/web3-contracts/abis/ERC165.json
@@ -0,0 +1,21 @@
+[
+    {
+        "constant": true,
+        "inputs": [
+            {
+                "name": "interfaceID",
+                "type": "bytes4"
+            }
+        ],
+        "name": "supportsInterface",
+        "outputs": [
+            {
+                "name": "",
+                "type": "bool"
+            }
+        ],
+        "payable": false,
+        "stateMutability": "view",
+        "type": "function"
+    }
+]
diff --git a/packages/web3-contracts/types/ERC165.d.ts b/packages/web3-contracts/types/ERC165.d.ts
new file mode 100644
index 000000000000..7c140bbe8105
--- /dev/null
+++ b/packages/web3-contracts/types/ERC165.d.ts
@@ -0,0 +1,33 @@
+/* Autogenerated file. Do not edit manually. */
+/* tslint:disable */
+/* eslint-disable */
+
+import BN from 'bn.js'
+import { ContractOptions } from 'web3-eth-contract'
+import { EventLog } from 'web3-core'
+import { EventEmitter } from 'events'
+import {
+    Callback,
+    PayableTransactionObject,
+    NonPayableTransactionObject,
+    BlockType,
+    ContractEventLog,
+    BaseContract,
+} from './types'
+
+interface EventOptions {
+    filter?: object
+    fromBlock?: BlockType
+    topics?: string[]
+}
+
+export interface ERC165 extends BaseContract {
+    constructor(jsonInterface: any[], address?: string, options?: ContractOptions): ERC165
+    clone(): ERC165
+    methods: {
+        supportsInterface(interfaceID: string | number[]): NonPayableTransactionObject<boolean>
+    }
+    events: {
+        allEvents(options?: EventOptions, cb?: Callback<EventLog>): EventEmitter
+    }
+}
diff --git a/packages/web3-providers/package.json b/packages/web3-providers/package.json
index b2fe91d5d1bb..f28276a02980 100644
--- a/packages/web3-providers/package.json
+++ b/packages/web3-providers/package.json
@@ -9,6 +9,7 @@
   },
   "types": "./dist/index.d.ts",
   "dependencies": {
+    "@dimensiondev/mask-wallet-core": "0.1.0-20211013082857-eb62e5f",
     "@masknet/plugin-infra": "workspace:*",
     "@masknet/shared-base": "workspace:*",
     "@masknet/web3-constants": "workspace:*",
diff --git a/packages/web3-providers/src/NFTScan/index.ts b/packages/web3-providers/src/NFTScan/index.ts
index e1dc4b639600..dab2e72d825b 100644
--- a/packages/web3-providers/src/NFTScan/index.ts
+++ b/packages/web3-providers/src/NFTScan/index.ts
@@ -1,17 +1,20 @@
+import urlcat from 'urlcat'
+import type { HubOptions } from '@masknet/web3-shared-base'
 import {
     ChainId,
-    createERC721ContractDetailed,
+    createERC721Contract,
     createERC721Token,
-    ERC721TokenDetailed,
     resolveIPFSLinkFromURL,
-    ERC721ContractDetailed,
+    SchemaType,
+    createERC721Metadata,
+    createERC721Collection,
 } from '@masknet/web3-shared-evm'
 import addSeconds from 'date-fns/addSeconds'
 import isBefore from 'date-fns/isBefore'
-import urlcat from 'urlcat'
+import getUnixTime from 'date-fns/getUnixTime'
 import type { NonFungibleTokenAPI } from '..'
 import { NFTSCAN_ACCESS_TOKEN_URL, NFTSCAN_BASE_API } from './constants'
-import type { NFTScanAsset, NFT_Assets } from './types'
+import type { NFTScanAsset } from './types'
 import { courier, isProxyENV } from '../helpers'
 
 const tokenCache = new Map<'token', { token: string; expiration: Date }>()
@@ -45,59 +48,45 @@ async function fetchAsset<T>(path: string, body?: unknown) {
     return response.json() as Promise<{ data: T }>
 }
 
-function createERC721ContractDetailedFromAssetContract(asset: NFTScanAsset) {
-    return createERC721ContractDetailed(
-        ChainId.Mainnet,
-        asset.trade_contract ?? asset.nft_contract_address,
-        undefined,
-        asset.trade_symbol,
-    )
-}
-
 function createERC721TokenAsset(asset: NFTScanAsset) {
     const payload: {
         name?: string
         description?: string
         image?: string
     } = JSON.parse(asset.nft_json ?? '{}')
-    const detailed = createERC721ContractDetailedFromAssetContract(asset)
+    const name = payload?.name ?? asset.nft_name ?? asset.nft_platform_name ?? ''
+    const description = payload?.description ?? ''
+    const mediaURL = resolveIPFSLinkFromURL(
+        JSON.parse(asset.nft_json ?? '{}').image ?? asset.nft_content_uri ?? payload.image ?? '',
+    )
+
     return createERC721Token(
-        detailed,
-        {
-            name: payload?.name ?? asset.nft_name ?? asset.nft_platform_name ?? '',
-            description: payload?.description ?? '',
-            mediaUrl: resolveIPFSLinkFromURL(
-                JSON.parse(asset.nft_json ?? '{}').image ?? asset.nft_content_uri ?? payload.image ?? '',
-            ),
-            owner: asset.nft_holder ?? '',
-        },
-        asset.token_id,
+        ChainId.Mainnet,
+        asset.trade_contract ?? asset.nft_contract_address,
+        asset.nft_asset_id,
+        createERC721Metadata(ChainId.Mainnet, name, asset.trade_symbol, description, undefined, mediaURL),
+        createERC721Contract(
+            ChainId.Mainnet,
+            asset.trade_contract ?? asset.nft_contract_address,
+            name,
+            asset.trade_symbol,
+            asset.nft_holder,
+            undefined,
+            mediaURL,
+        ),
+        createERC721Collection(
+            ChainId.Mainnet,
+            name,
+            name,
+            description,
+            mediaURL,
+            false,
+            getUnixTime(new Date(asset.nft_create_time)),
+        ),
     )
 }
 
-export class NFTScanAPI implements NonFungibleTokenAPI.Provider {
-    async getContractBalance(address: string) {
-        const response = await fetchAsset<NFT_Assets[]>('getGroupByNftContract', {
-            erc: 'erc721',
-            user_address: address,
-        })
-        if (!response?.data) return []
-        return response.data
-            .map((x) => {
-                const contractDetailed = createERC721ContractDetailed(
-                    ChainId.Mainnet,
-                    x.nft_contract_address,
-                    x.nft_platform_name,
-                    undefined,
-                    undefined,
-                    x.nft_platform_image,
-                )
-                const balance = x.nft_asset.length
-                return { contractDetailed, balance }
-            })
-            .sort((a, b) => a.balance - b.balance)
-    }
-
+export class NFTScanAPI implements NonFungibleTokenAPI.Provider<ChainId, SchemaType> {
     async getToken(address: string, tokenId: string) {
         const response = await fetchAsset<NFTScanAsset>('getSingleNft', {
             nft_address: address,
@@ -107,10 +96,7 @@ export class NFTScanAPI implements NonFungibleTokenAPI.Provider {
         return createERC721TokenAsset(response.data)
     }
 
-    async getTokens(
-        from: string,
-        { chainId = ChainId.Mainnet, page = 0, size = 50, pageInfo }: NonFungibleTokenAPI.Options,
-    ) {
+    async getTokens(from: string, { chainId = ChainId.Mainnet, page = 0, size = 50 }: HubOptions<ChainId> = {}) {
         const response = await fetchAsset<{
             content: NFTScanAsset[]
             page_index: number
@@ -120,60 +106,18 @@ export class NFTScanAPI implements NonFungibleTokenAPI.Provider {
             page_size: size,
             page_index: page + 1,
             user_address: from,
-            erc: pageInfo?.type ?? 'erc721',
         })
         if (!response?.data)
             return {
+                currentPage: 0,
                 data: [],
                 hasNextPage: false,
             }
-        const data =
-            response.data.content.map(createERC721TokenAsset).map((x) => ({ ...x, provideBy: 'NFTScan' })) ?? []
         const total = response.data.total
         return {
-            data,
+            currentPage: page,
+            data: response.data.content.map(createERC721TokenAsset) ?? [],
             hasNextPage: total - (page + 1) * size > 0,
         }
     }
-
-    async getTokenDetailedOwnerList(owner: string, contractDetailed: ERC721ContractDetailed, size = 100, page = 0) {
-        const response = await fetchAsset<{
-            content: NFTScanAsset[]
-            page_index: number
-            page_size: number
-            total: number
-        }>('getNftByContractAndUserAddress', {
-            page_size: size,
-            page_index: page + 1,
-            user_address: owner,
-            nft_address: contractDetailed.address,
-        })
-
-        if (!response?.data) return { data: [] as ERC721TokenDetailed[], hasNextPage: false }
-        const total = response.data.total
-        const data: ERC721TokenDetailed[] = response.data.content.map((t) => ({
-            tokenId: t.token_id,
-            contractDetailed,
-            info: {
-                name: t.nft_name,
-                description: t.nft_detail,
-                mediaUrl: resolveIPFSLinkFromURL(JSON.parse(t.nft_json ?? '{}').image ?? t.nft_content_uri ?? ''),
-                tokenURI: t.nft_token_uri,
-            },
-        }))
-        return {
-            data,
-            hasNextPage: total - (page + 1) * size > 0,
-        }
-    }
-}
-
-export function getNFTScanNFTList(address: string) {
-    const nftScanAPI = new NFTScanAPI()
-    return nftScanAPI.getContractBalance(address)
-}
-
-export function getNFTScanNFTs(address: string, type: 'erc721' | 'erc1155', page?: number, size?: number) {
-    const nftScanAPI = new NFTScanAPI()
-    return nftScanAPI.getTokens(address, { page, size, pageInfo: { type } })
 }
diff --git a/packages/web3-providers/src/coingecko/constants.ts b/packages/web3-providers/src/coingecko/constants.ts
deleted file mode 100644
index 9c420d7c20b7..000000000000
--- a/packages/web3-providers/src/coingecko/constants.ts
+++ /dev/null
@@ -1 +0,0 @@
-export const COINGECKO_URL_BASE = 'https://api.coingecko.com/api/v3'
diff --git a/packages/web3-providers/src/coingecko/index.ts b/packages/web3-providers/src/coingecko/index.ts
index 54a8d1d73e43..79b5628c334e 100644
--- a/packages/web3-providers/src/coingecko/index.ts
+++ b/packages/web3-providers/src/coingecko/index.ts
@@ -1,20 +1,34 @@
-import type { CurrencyType } from '@masknet/plugin-infra/web3'
-import { COINGECKO_URL_BASE } from './constants'
-import { courier } from '../helpers'
-import type { PriceAPI } from '../types'
+import { CurrencyType, Price } from '@masknet/web3-shared-base'
+import type { PriceAPI } from '..'
+
+const COINGECKO_URL_BASE = 'https://api.coingecko.com/api/v3'
 
 export class CoinGeckoAPI implements PriceAPI.Provider {
-    async getTokenPrice(tokenId: string, currency: CurrencyType) {
-        const requestPath = `${COINGECKO_URL_BASE}/simple/price?ids=${tokenId}&vs_currencies=${currency}`
-        const response = await fetch(courier(requestPath))
-        const price: PriceAPI.CryptoPrice = await response.json()
-        return price[tokenId]
+    async getTokenPrice(id: string, currencyType = CurrencyType.USD) {
+        const requestPath = `${COINGECKO_URL_BASE}/simple/price?ids=${id}&vs_currencies=${currencyType}`
+        const price = await fetch(requestPath).then(
+            (r) => r.json() as Promise<Record<string, Record<CurrencyType, number>>>,
+        )
+        return price[id][currencyType]
+    }
+
+    async getTokenPrices(platform: string, contractAddresses: string[], currency = CurrencyType.USD) {
+        const addressList = contractAddresses.join(',')
+        const requestPath = `${COINGECKO_URL_BASE}/simple/token_price/${platform}?contract_addresses=${addressList}&vs_currencies=${currency}`
+        return fetch(requestPath).then((r) => r.json() as Promise<Record<string, Price>>)
     }
 
-    async getTokensPrice(tokenIds: string[], currency: CurrencyType) {
-        const requestPath = `${COINGECKO_URL_BASE}/simple/price?ids=${tokenIds}&vs_currencies=${currency}`
-        const response = await fetch(courier(requestPath))
-        const price: PriceAPI.CryptoPrice = await response.json()
-        return price
+    async getNativeTokenPrices(tokenIds: string[], currency = CurrencyType.USD) {
+        const requestPath = `${COINGECKO_URL_BASE}/simple/price?ids=${tokenIds.join(',')}&vs_currencies=${currency}`
+        return fetch(requestPath).then((r) => r.json() as Promise<Record<string, Price>>)
+    }
+
+    async getTokensPrice(listOfAddress: string[], currencyType = CurrencyType.USD) {
+        const requestPath = `${COINGECKO_URL_BASE}/simple/price?ids=${listOfAddress}&vs_currencies=${currencyType}`
+        const response = await fetch(requestPath).then(
+            (r) => r.json() as Promise<Record<string, Record<CurrencyType, number>>>,
+        )
+
+        return Object.fromEntries(Object.keys(response).map((address) => [address, response[address][currencyType]]))
     }
 }
diff --git a/packages/web3-providers/src/debank/format.ts b/packages/web3-providers/src/debank/format.ts
index 22493411061b..2e61af505188 100644
--- a/packages/web3-providers/src/debank/format.ts
+++ b/packages/web3-providers/src/debank/format.ts
@@ -1,39 +1,99 @@
-import type { WalletTokenRecord } from './type'
-import { createNativeToken, getChainIdFromName } from '@masknet/web3-shared-evm'
-import { CurrencyType, TokenType, Web3Plugin } from '@masknet/plugin-infra/web3'
-import { multipliedBy, rightShift, toFixed } from '@masknet/web3-shared-base'
+import { isNil } from 'lodash-unified'
+import { ChainId, chainResolver, createNativeToken, formatEthereumAddress, SchemaType } from '@masknet/web3-shared-evm'
+import {
+    CurrencyType,
+    TokenType,
+    FungibleAsset,
+    multipliedBy,
+    rightShift,
+    toFixed,
+    Transaction,
+} from '@masknet/web3-shared-base'
 import DeBank from '@masknet/web3-constants/evm/debank.json'
+import { DebankTransactionDirection, HistoryResponse, WalletTokenRecord } from './type'
 
-type Asset = Web3Plugin.Asset<Web3Plugin.FungibleToken>
-
-export function formatAssets(records: WalletTokenRecord[]): Asset[] {
+export function formatAssets(data: WalletTokenRecord[]): Array<FungibleAsset<ChainId, SchemaType>> {
     const supportedChains = Object.values(DeBank.CHAIN_ID).filter(Boolean)
-    return records.flatMap((asset) => {
-        if (!asset.is_verified) return []
-        const chainIdFromChain = getChainIdFromName(asset.chain)
-        if (!chainIdFromChain) return []
-        const address = supportedChains.includes(asset.id) ? createNativeToken(chainIdFromChain).address : asset.id
-        return {
-            id: address,
-            chainId: chainIdFromChain,
-            token: {
+
+    return data
+        .filter((x) => x.is_verified && chainResolver.chainId(x.chain))
+        .map((x) => {
+            const chainId = chainResolver.chainId(x.chain)!
+            const address = supportedChains.includes(x.id) ? createNativeToken(chainId).address : x.id
+
+            return {
                 id: address,
-                address,
-                chainId: chainIdFromChain,
+                address: formatEthereumAddress(address),
+                chainId,
                 type: TokenType.Fungible,
-                decimals: asset.decimals,
-                name: asset.name,
-                symbol: asset.symbol,
-                logoURI: asset.logo_url,
-            },
-            balance: rightShift(asset.amount, asset.decimals).toFixed(),
-            price: {
-                [CurrencyType.USD]: toFixed(asset.price),
-            },
-            value: {
-                [CurrencyType.USD]: multipliedBy(asset.price ?? 0, asset.amount).toFixed(),
-            },
-            logoURI: asset.logo_url,
-        }
-    })
+                schema: SchemaType.ERC20,
+                decimals: x.decimals,
+                name: x.name,
+                symbol: x.symbol,
+                balance: rightShift(x.amount, x.decimals).toFixed(),
+                price: {
+                    [CurrencyType.USD]: toFixed(x.price),
+                },
+                value: {
+                    [CurrencyType.USD]: multipliedBy(x.price ?? 0, x.amount).toFixed(),
+                },
+                logoURL: x.logo_url,
+            }
+        })
+}
+
+export function formatTransactions(
+    chainId: ChainId,
+    { cate_dict, history_list, token_dict }: HistoryResponse['data'],
+): Array<Transaction<ChainId, SchemaType>> {
+    return history_list
+        .filter((transaction) => transaction.tx?.name || transaction.cate_id)
+        .filter(({ cate_id }) => cate_id !== 'approve')
+        .map((transaction) => {
+            let type = transaction.tx?.name
+            if (!type && !isNil(transaction.cate_id)) {
+                type = cate_dict[transaction.cate_id].name
+            } else if (type === '') {
+                type = 'contract interaction'
+            }
+            return {
+                id: transaction.id,
+                chainId,
+                type,
+                filterType: transaction.cate_id,
+                timestamp: transaction.time_at,
+                from: transaction.tx?.from_addr ?? '',
+                to: transaction.other_addr,
+                status: transaction.tx?.status ?? 0,
+                tokens: [
+                    ...transaction.sends.map(({ amount, token_id }) => ({
+                        id: token_id,
+                        chainId,
+                        type: TokenType.Fungible,
+                        schema: SchemaType.ERC20,
+                        name: token_dict[token_id]?.name ?? 'Unknown Token',
+                        symbol: token_dict[token_id]?.optimized_symbol,
+                        address: token_id,
+                        direction: DebankTransactionDirection.SEND,
+                        amount: amount.toString(),
+                        logoURI: token_dict[token_id].logo_url,
+                    })),
+                    ...transaction.receives.map(({ amount, token_id }) => ({
+                        id: token_id,
+                        chainId,
+                        type: TokenType.Fungible,
+                        schema: SchemaType.ERC20,
+                        name: token_dict[token_id]?.name ?? 'Unknown Token',
+                        symbol: token_dict[token_id]?.optimized_symbol,
+                        address: token_id,
+                        direction: DebankTransactionDirection.RECEIVE,
+                        amount: amount.toString(),
+                        logoURI: token_dict[token_id]?.logo_url,
+                    })),
+                ],
+                fee: transaction.tx
+                    ? { eth: transaction.tx.eth_gas_fee.toString(), usd: transaction.tx.usd_gas_fee.toString() }
+                    : undefined,
+            }
+        })
 }
diff --git a/packages/web3-providers/src/debank/index.ts b/packages/web3-providers/src/debank/index.ts
index 80c860c77f17..e91b9da77731 100644
--- a/packages/web3-providers/src/debank/index.ts
+++ b/packages/web3-providers/src/debank/index.ts
@@ -1,27 +1,109 @@
-import type { WalletTokenRecord } from './type'
 import urlcat from 'urlcat'
-import { formatAssets } from './format'
+import {
+    FungibleAsset,
+    GasOptionType,
+    Pageable,
+    Transaction,
+    createPageable,
+    HubOptions,
+} from '@masknet/web3-shared-base'
+import { ChainId, formatGweiToWei, getDeBankConstants, SchemaType, GasOption } from '@masknet/web3-shared-evm'
+import { formatAssets, formatTransactions } from './format'
+import type { WalletTokenRecord, HistoryResponse, GasPriceDictResponse } from './type'
+import type { FungibleTokenAPI, HistoryAPI, GasOptionAPI } from '../types'
 
+const DEBANK_API = 'https://api.debank.com'
 const DEBANK_OPEN_API = 'https://openapi.debank.com'
 
-export async function getAssetListFromDebank(address: string) {
-    const response = await fetch(
-        urlcat(DEBANK_OPEN_API, '/v1/user/token_list', {
-            is_all: true,
-            has_balance: true,
-            id: address.toLowerCase(),
-        }),
-    )
-    try {
-        const result = ((await response.json()) ?? []) as WalletTokenRecord[]
-        return formatAssets(
-            result.map((x) => ({
-                ...x,
-                id: x.id === 'bsc' ? 'bnb' : x.id,
-                chain: x.chain === 'bsc' ? 'bnb' : x.chain,
-            })),
+/**
+ * Debank's data might be outdated, like gas price for aurora which requires 1 Gwei at least
+ * https://twitter.com/AlexAuroraDev/status/1490353255817302016
+ * Once debank fixes it, we will remove this modifier.
+ */
+function gasModifier(gasDict: GasPriceDictResponse, chain: string) {
+    if (chain === getDeBankConstants(ChainId.Aurora).CHAIN_ID) {
+        ;(['fast', 'normal', 'slow'] as const).forEach((fieldKey) => {
+            const field = gasDict.data[fieldKey]
+            field.price = Math.max(field.price, formatGweiToWei(1).toNumber())
+        })
+    }
+    return gasDict
+}
+
+export class DeBankAPI
+    implements
+        FungibleTokenAPI.Provider<ChainId, SchemaType>,
+        HistoryAPI.Provider<ChainId, SchemaType>,
+        GasOptionAPI.Provider<ChainId, GasOption>
+{
+    async getGasOptions(chainId: ChainId): Promise<Record<GasOptionType, GasOption>> {
+        const { CHAIN_ID = '' } = getDeBankConstants(chainId)
+        if (!CHAIN_ID) throw new Error('Failed to get gas price.')
+
+        const response = await fetch(urlcat(DEBANK_API, '/chain/gas_price_dict_v2', { chain: CHAIN_ID }))
+        const result = (await response.json()) as GasPriceDictResponse
+        if (result.error_code !== 0) throw new Error('Failed to get gas price.')
+
+        const responseModified = gasModifier(result, CHAIN_ID)
+        return {
+            [GasOptionType.FAST]: {
+                estimatedSeconds: responseModified.data.fast.estimated_seconds,
+                suggestedMaxFeePerGas: responseModified.data.fast.price.toString(),
+                suggestedMaxPriorityFeePerGas: '0',
+            },
+            [GasOptionType.NORMAL]: {
+                estimatedSeconds: responseModified.data.normal.estimated_seconds,
+                suggestedMaxFeePerGas: responseModified.data.normal.price.toString(),
+                suggestedMaxPriorityFeePerGas: '0',
+            },
+            [GasOptionType.SLOW]: {
+                estimatedSeconds: responseModified.data.slow.estimated_seconds,
+                suggestedMaxFeePerGas: responseModified.data.slow.price.toString(),
+                suggestedMaxPriorityFeePerGas: '0',
+            },
+        }
+    }
+
+    async getAssets(
+        address: string,
+        options?: HubOptions<ChainId>,
+    ): Promise<Pageable<FungibleAsset<ChainId, SchemaType>>> {
+        const response = await fetch(
+            urlcat(DEBANK_OPEN_API, '/v1/user/token_list', {
+                id: address.toLowerCase(),
+                is_all: true,
+                has_balance: true,
+            }),
         )
-    } catch {
-        return []
+        const result = (await response.json()) as WalletTokenRecord[] | undefined
+        try {
+            return createPageable(
+                formatAssets(
+                    (result ?? []).map((x) => ({
+                        ...x,
+
+                        // rename bsc to bnb
+                        id: x.id === 'bsc' ? 'bnb' : x.id,
+                        chain: x.chain === 'bsc' ? 'bnb' : x.chain,
+                    })),
+                ),
+            )
+        } catch {
+            return createPageable()
+        }
+    }
+
+    async getTransactions(
+        address: string,
+        { chainId = ChainId.Mainnet }: HubOptions<ChainId> = {},
+    ): Promise<Pageable<Transaction<ChainId, SchemaType>>> {
+        const { CHAIN_ID = '' } = getDeBankConstants(chainId)
+        if (!CHAIN_ID) return createPageable()
+
+        const response = await fetch(`${DEBANK_API}/history/list?user_addr=${address.toLowerCase()}&chain=${CHAIN_ID}`)
+        const { data, error_code } = (await response.json()) as HistoryResponse
+        if (error_code !== 0) throw new Error('Fail to load transactions.')
+
+        return createPageable(formatTransactions(chainId, data))
     }
 }
diff --git a/packages/web3-providers/src/debank/type.ts b/packages/web3-providers/src/debank/type.ts
index 5de8bc326fe3..2ec024c8feda 100644
--- a/packages/web3-providers/src/debank/type.ts
+++ b/packages/web3-providers/src/debank/type.ts
@@ -4,6 +4,7 @@ export enum DebankTransactionDirection {
 }
 
 export interface DictItem {
+    name: string
     id: string
     cn: string
     en: string
diff --git a/packages/web3-providers/src/gopluslabs/index.ts b/packages/web3-providers/src/gopluslabs/index.ts
index ba681d537f16..2a3d3b04b2cf 100644
--- a/packages/web3-providers/src/gopluslabs/index.ts
+++ b/packages/web3-providers/src/gopluslabs/index.ts
@@ -1,6 +1,6 @@
-import { ChainId } from '@masknet/web3-shared-evm'
-import { parseInt, uniqBy } from 'lodash-unified'
 import urlcat from 'urlcat'
+import { parseInt, uniqBy } from 'lodash-unified'
+import { ChainId } from '@masknet/web3-shared-evm'
 import type { SecurityAPI } from '..'
 import { fetchJSON } from '../helpers'
 import { GO_PLUS_LABS_ROOT_URL } from './constants'
@@ -10,7 +10,7 @@ export interface SupportedChainResponse {
     name: string
 }
 
-export class GoPlusLabsAPI implements SecurityAPI.Provider {
+export class GoPlusLabsAPI implements SecurityAPI.Provider<ChainId> {
     async getTokenSecurity(chainId: ChainId, listOfAddress: string[]) {
         const response = await fetchJSON<{
             code: 0 | 1
@@ -30,7 +30,7 @@ export class GoPlusLabsAPI implements SecurityAPI.Provider {
         return response.result
     }
 
-    async getSupportedChain(): Promise<SecurityAPI.SupportedChain[]> {
+    async getSupportedChain(): Promise<Array<SecurityAPI.SupportedChain<ChainId>>> {
         const { code, result } = await fetchJSON<{
             code: 0 | 1
             message: 'OK' | string
@@ -38,6 +38,6 @@ export class GoPlusLabsAPI implements SecurityAPI.Provider {
         }>(urlcat(GO_PLUS_LABS_ROOT_URL, 'api/v1/supported_chains'))
 
         if (code !== 1) return []
-        return result.map((x) => ({ id: parseInt(x.id) ?? ChainId.Mainnet, name: x.name }))
+        return result.map((x) => ({ chainId: parseInt(x.id) ?? ChainId.Mainnet, name: x.name }))
     }
 }
diff --git a/packages/web3-providers/src/hooks/index.ts b/packages/web3-providers/src/hooks/index.ts
deleted file mode 100644
index 9038b2c8b3aa..000000000000
--- a/packages/web3-providers/src/hooks/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './useERC721TokenDetailedOwnerList'
diff --git a/packages/web3-providers/src/hooks/useERC721TokenDetailedOwnerList.ts b/packages/web3-providers/src/hooks/useERC721TokenDetailedOwnerList.ts
deleted file mode 100644
index e69ab7650625..000000000000
--- a/packages/web3-providers/src/hooks/useERC721TokenDetailedOwnerList.ts
+++ /dev/null
@@ -1,100 +0,0 @@
-import { useAsyncRetry } from 'react-use'
-import { EthereumAddress } from 'wallet.ts'
-import { useEffect, useRef, useState } from 'react'
-import { uniqBy } from 'lodash-unified'
-import {
-    useERC721TokenContract,
-    ERC721ContractDetailed,
-    ERC721TokenDetailed,
-    getERC721TokenDetailedFromChain,
-    safeNonPayableTransactionCall,
-    useChainId,
-    ChainId,
-} from '@masknet/web3-shared-evm'
-import type { ERC721 } from '@masknet/web3-contracts/types/ERC721'
-import { NFTScan } from '../'
-
-export const ERC721_ENUMERABLE_INTERFACE_ID = '0x780e9d63'
-
-export function useERC721TokenDetailedOwnerList(
-    contractDetailed: ERC721ContractDetailed | null | undefined,
-    owner: string,
-) {
-    const chainId = useChainId()
-    const erc721TokenContract = useERC721TokenContract(contractDetailed?.address ?? '')
-    const allListRef = useRef<ERC721TokenDetailed[]>([])
-    const [refreshing, setRefreshing] = useState(false)
-
-    useEffect(() => {
-        setRefreshing(true)
-        clearTokenDetailedOwnerList()
-    }, [owner, contractDetailed?.address])
-
-    const asyncRetry = useAsyncRetry(async () => {
-        if (
-            !erc721TokenContract ||
-            !contractDetailed?.address ||
-            !EthereumAddress.isValid(contractDetailed?.address) ||
-            !owner
-        ) {
-            setRefreshing(false)
-            return
-        }
-        const listsFromNFTScan =
-            chainId === ChainId.Mainnet ? await getERC721TokenDetailedOwnerListFromNFTScan(contractDetailed, owner) : []
-        const lists =
-            listsFromNFTScan.length > 0
-                ? listsFromNFTScan
-                : await getERC721TokenDetailedOwnerListFromChain(erc721TokenContract, contractDetailed, owner)
-        allListRef.current = uniqBy<ERC721TokenDetailed>([...allListRef.current, ...lists], 'tokenId')
-
-        setRefreshing(false)
-    }, [contractDetailed, owner, chainId])
-
-    const clearTokenDetailedOwnerList = () => (allListRef.current = [])
-
-    return {
-        asyncRetry,
-        tokenDetailedOwnerList: allListRef.current,
-        clearTokenDetailedOwnerList,
-        refreshing,
-    }
-}
-
-async function getERC721TokenDetailedOwnerListFromChain(
-    erc721TokenContract: ERC721,
-    contractDetailed: ERC721ContractDetailed,
-    owner: string,
-) {
-    const isEnumerable = await safeNonPayableTransactionCall(
-        erc721TokenContract.methods.supportsInterface(ERC721_ENUMERABLE_INTERFACE_ID),
-    )
-
-    const balance = await safeNonPayableTransactionCall(erc721TokenContract.methods.balanceOf(owner))
-
-    if (!isEnumerable || !balance) return []
-
-    const allRequest = Array.from({ length: Number.parseInt(balance, 10) }, async (_v, i) => {
-        const tokenId = await safeNonPayableTransactionCall(erc721TokenContract.methods.tokenOfOwnerByIndex(owner, i))
-
-        if (!tokenId) return
-
-        return getERC721TokenDetailedFromChain(contractDetailed, erc721TokenContract, tokenId, owner, false)
-    })
-    return (await Promise.allSettled(allRequest))
-        .map((x) => (x.status === 'fulfilled' ? x.value : undefined))
-        .filter((value) => value) as ERC721TokenDetailed[]
-}
-
-async function getERC721TokenDetailedOwnerListFromNFTScan(contractDetailed: ERC721ContractDetailed, owner: string) {
-    let allTokenList: ERC721TokenDetailed[] = []
-    let _hasNextPage = true
-    let page = 0
-    while (_hasNextPage) {
-        const { data, hasNextPage } = await NFTScan.getTokenDetailedOwnerList(owner, contractDetailed, 100, page)
-        page += 1
-        _hasNextPage = hasNextPage
-        allTokenList = allTokenList.concat(data)
-    }
-    return uniqBy(allTokenList, 'tokenId')
-}
diff --git a/packages/web3-providers/src/index.ts b/packages/web3-providers/src/index.ts
index df0c0bd21ea1..405ac9f2b718 100644
--- a/packages/web3-providers/src/index.ts
+++ b/packages/web3-providers/src/index.ts
@@ -4,20 +4,22 @@ import { RaribleAPI } from './rarible'
 import { NFTScanAPI } from './NFTScan'
 import { ZoraAPI } from './zora'
 import { NativeExplorerAPI } from './explorer'
+import { RiskWarningAPI } from './risk-warning'
 import { RSS3API } from './rss3'
 import { KeyValueAPI } from './kv'
 import { TwitterAPI } from './twitter'
 import { TokenListAPI } from './token-list'
-import { TokenPriceAPI } from './token-price'
 import { InstagramAPI } from './instagram'
+import { MaskAPI } from './mask'
+import { DeBankAPI } from './debank'
+import { ZerionAPI } from './zerion'
+import { MetaSwapAPI } from './metaswap'
 import { GoPlusLabsAPI } from './gopluslabs'
 import { NextIDProofAPI, NextIDStorageAPI } from './NextID'
 
 export * from './helpers'
 export * from './types'
-export * from './hooks'
 export * from './opensea/utils'
-export * from './NextID'
 
 export const OpenSea = new OpenSeaAPI()
 export const Rarible = new RaribleAPI()
@@ -25,19 +27,16 @@ export const NFTScan = new NFTScanAPI()
 export const Zora = new ZoraAPI()
 export const CoinGecko = new CoinGeckoAPI()
 export const Explorer = new NativeExplorerAPI()
+export const RiskWarning = new RiskWarningAPI()
 export const RSS3 = new RSS3API()
 export const KeyValue = new KeyValueAPI()
 export const Twitter = new TwitterAPI()
 export const Instagram = new InstagramAPI()
 export const GoPlusLabs = new GoPlusLabsAPI()
-
 export const TokenList = new TokenListAPI()
-export const TokenPrice = new TokenPriceAPI()
+export const Mask = new MaskAPI()
+export const DeBank = new DeBankAPI()
+export const Zerion = new ZerionAPI()
+export const MetaSwap = new MetaSwapAPI()
 export const NextIDStorage = new NextIDStorageAPI()
 export const NextIDProof = new NextIDProofAPI()
-
-// Method for provider proxy
-export { getOpenSeaNFTList, getOpenSeaCollectionList } from './opensea'
-export { getAssetListFromDebank } from './debank'
-export { getRaribleNFTList } from './rarible'
-export { getNFTScanNFTList, getNFTScanNFTs } from './NFTScan'
diff --git a/packages/web3-providers/src/mask/index.ts b/packages/web3-providers/src/mask/index.ts
new file mode 100644
index 000000000000..66ba88b2b06f
--- /dev/null
+++ b/packages/web3-providers/src/mask/index.ts
@@ -0,0 +1,86 @@
+import { OnDemandWorker } from '@masknet/shared-base'
+import { api } from '@dimensiondev/mask-wallet-core/proto'
+import type { MaskBaseAPI } from '..'
+
+enum ErrorCode {
+    KdfParamsInvalid = '-3001',
+    PasswordIncorrect = '-3002',
+    InvalidKeyIvLength = '-3003',
+    InvalidCiphertext = '-3004',
+    InvalidPrivateKey = '-3005',
+    InvalidPublicKey = '-3006',
+    InvalidMnemonic = '-3007',
+    InvalidSeed = '-3008',
+    InvalidDerivationPath = '-3009',
+    InvalidKeyStoreJSON = '-3010',
+    NotSupportedPublicKeyType = '-3011',
+    NotSupportedCurve = '-3012',
+    NotSupportedCipher = '-3013',
+}
+
+const ErrorMessage = {
+    [ErrorCode.KdfParamsInvalid]: 'Invalid kdf parameters.',
+    [ErrorCode.PasswordIncorrect]: 'Incorrect payment password.',
+    [ErrorCode.InvalidKeyIvLength]: 'Invalid key IV length.',
+    [ErrorCode.InvalidCiphertext]: 'Invalid cipher text.',
+    [ErrorCode.InvalidPrivateKey]: 'Invalid private key.',
+    [ErrorCode.InvalidPublicKey]: 'Invalid public key.',
+    [ErrorCode.InvalidMnemonic]: 'Invalid mnemonic words.',
+    [ErrorCode.InvalidSeed]: 'Invalid seed.',
+    [ErrorCode.InvalidDerivationPath]: 'Invalid derivation path.',
+    [ErrorCode.InvalidKeyStoreJSON]: 'Invalid keystore JSON.',
+    [ErrorCode.NotSupportedPublicKeyType]: 'Not supported public key type.',
+    [ErrorCode.NotSupportedCurve]: 'Not supported curve.',
+    [ErrorCode.NotSupportedCipher]: 'Not supported cipher.',
+}
+
+const worker = new OnDemandWorker('./worker.ts')
+
+function send<I extends keyof MaskBaseAPI.Request, O extends keyof MaskBaseAPI.Response>(input: I, output: O) {
+    return (value: MaskBaseAPI.Request[I]) => {
+        return new Promise<MaskBaseAPI.Response[O]>((resolve, reject) => {
+            const req: MaskBaseAPI.Input = { id: Math.random(), data: { [input]: value } }
+            const f = (message: any) => {
+                if (message.data.id !== req.id) return
+
+                worker.removeEventListener('message', f)
+                const data: MaskBaseAPI.Output = message.data
+                if (data.response.error)
+                    return reject(
+                        new Error(ErrorMessage[data.response.error.errorCode as ErrorCode] || 'Unknown Error'),
+                    )
+                resolve(data.response[output])
+            }
+            worker.postMessage(req)
+            worker.addEventListener('message', f)
+        })
+    }
+}
+
+export class MaskAPI implements MaskBaseAPI.Provider {
+    Coin = api.Coin
+    StoredKeyType = api.StoredKeyType
+    StoredKeyImportType = api.StoredKeyImportType
+    StoredKeyExportType = api.StoredKeyExportType
+
+    public loadStoredKey = send('param_load_stored_key', 'resp_load_stored_key')
+    public createStoredKey = send('param_create_stored_key', 'resp_create_stored_key')
+    public importPrivateKey = send('param_import_private_key', 'resp_import_private_key')
+    public importMnemonic = send('param_import_mnemonic', 'resp_import_mnemonic')
+    public importJSON = send('param_import_json', 'resp_import_json')
+    public createAccountOfCoinAtPath = send(
+        'param_create_account_of_coin_at_path',
+        'resp_create_account_of_coin_at_path',
+    )
+    public exportPrivateKey = send('param_export_private_key', 'resp_export_private_key')
+    public exportPrivateKeyOfPath = send('param_export_private_key_of_path', 'resp_export_private_key')
+    public exportMnemonic = send('param_export_mnemonic', 'resp_export_mnemonic')
+    public exportKeyStoreJSONOfAddress = send('param_export_key_store_json_of_address', 'resp_export_key_store_json')
+    public exportKeyStoreJSONOfPath = send('param_export_key_store_json_of_path', 'resp_export_key_store_json')
+    public exportUpdateKeyStorePassword = send('param_update_key_store_password', 'resp_update_key_store_password')
+    public signTransaction = send('param_sign_transaction', 'resp_sign_transaction')
+    public getLibVersion = send('param_get_version', 'resp_get_version')
+    public validate = send('param_validation', 'resp_validate')
+    public getSupportImportTypes = send('param_get_stored_key_import_type', 'resp_get_stored_key_import_type')
+    public getSupportExportTypes = send('param_get_stored_key_export_type', 'resp_get_stored_key_export_type')
+}
diff --git a/packages/web3-providers/src/mask/prepare.ts b/packages/web3-providers/src/mask/prepare.ts
new file mode 100644
index 000000000000..2563eb36261a
--- /dev/null
+++ b/packages/web3-providers/src/mask/prepare.ts
@@ -0,0 +1,15 @@
+if (typeof self !== 'undefined') {
+    /**
+     * Workaround: Webpack child compiler doesn't inherit plugins but inherit loaders.
+     * That make loaders/plugins settings mismatch and cause runtime errors.
+     */ // @ts-ignore
+    self.$RefreshReg$ = function () {}
+    // @ts-ignore
+    self.$RefreshSig$ = function () {
+        return function (type: any) {
+            return type
+        }
+    }
+}
+export {}
+setTimeout(() => self.postMessage('Alive'), 0)
diff --git a/packages/web3-providers/src/mask/worker.ts b/packages/web3-providers/src/mask/worker.ts
new file mode 100644
index 000000000000..7452ddc7388e
--- /dev/null
+++ b/packages/web3-providers/src/mask/worker.ts
@@ -0,0 +1,26 @@
+import './prepare'
+import type { MaskBaseAPI } from '../types'
+
+const promise = (async () => {
+    const { request, default: init } = await import('@dimensiondev/mask-wallet-core/web')
+    const { api } = await import('@dimensiondev/mask-wallet-core/proto')
+    await init()
+    return { request, api }
+})()
+
+self.addEventListener('message', async (ev: MessageEvent) => {
+    const { api, request } = await promise
+
+    const { id, data } = ev.data as MaskBaseAPI.Input
+    if (!id) return
+
+    try {
+        const payload = api.MWRequest.encode(data).finish()
+        const wasmResult = request(payload)
+        const response = api.MWResponse.decode(wasmResult)
+        self.postMessage({ id, response })
+    } catch (error) {
+        const out: MaskBaseAPI.Output = { id, response: { error: { errorMsg: String(error) } } }
+        self.postMessage(out)
+    }
+})
diff --git a/packages/web3-providers/src/metaswap/index.ts b/packages/web3-providers/src/metaswap/index.ts
new file mode 100644
index 000000000000..167e7a9a117a
--- /dev/null
+++ b/packages/web3-providers/src/metaswap/index.ts
@@ -0,0 +1,35 @@
+import urlcat from 'urlcat'
+import { GasOptionType } from '@masknet/web3-shared-base'
+import type { ChainId, GasOption } from '@masknet/web3-shared-evm'
+import type { GasOptionAPI } from '../types'
+import type { EstimateSuggestResponse } from './types'
+
+const METASWAP_API = 'https://gas-api.metaswap.codefi.network/'
+
+export class MetaSwapAPI implements GasOptionAPI.Provider<ChainId, GasOption> {
+    async getGasOptions(chainId: ChainId): Promise<Record<GasOptionType, GasOption>> {
+        const response = await fetch(urlcat(METASWAP_API, '/networks/:chainId/suggestedGasFees', { chainId }))
+        const result = (await response.json()) as EstimateSuggestResponse
+
+        return {
+            [GasOptionType.FAST]: {
+                estimatedBaseFee: result.estimatedBaseFee ?? '0',
+                estimatedSeconds: result.high?.minWaitTimeEstimate ?? 0,
+                suggestedMaxFeePerGas: result.high?.suggestedMaxFeePerGas ?? '0',
+                suggestedMaxPriorityFeePerGas: result.high?.suggestedMaxPriorityFeePerGas ?? '0',
+            },
+            [GasOptionType.NORMAL]: {
+                estimatedBaseFee: result.estimatedBaseFee ?? '0',
+                estimatedSeconds: result.medium?.minWaitTimeEstimate ?? 0,
+                suggestedMaxFeePerGas: result.medium?.suggestedMaxFeePerGas ?? '0',
+                suggestedMaxPriorityFeePerGas: result.medium?.suggestedMaxPriorityFeePerGas ?? '0',
+            },
+            [GasOptionType.SLOW]: {
+                estimatedBaseFee: result.estimatedBaseFee ?? '0',
+                estimatedSeconds: result.low?.minWaitTimeEstimate ?? 0,
+                suggestedMaxFeePerGas: result.low?.suggestedMaxFeePerGas ?? '0',
+                suggestedMaxPriorityFeePerGas: result.low?.suggestedMaxPriorityFeePerGas ?? '0',
+            },
+        }
+    }
+}
diff --git a/packages/web3-providers/src/metaswap/types.ts b/packages/web3-providers/src/metaswap/types.ts
new file mode 100644
index 000000000000..167ae93c1821
--- /dev/null
+++ b/packages/web3-providers/src/metaswap/types.ts
@@ -0,0 +1,13 @@
+export interface EstimateSuggestOption {
+    maxWaitTimeEstimate: number
+    minWaitTimeEstimate: number
+    suggestedMaxFeePerGas: string
+    suggestedMaxPriorityFeePerGas: string
+}
+
+export interface EstimateSuggestResponse {
+    estimatedBaseFee: string
+    low?: EstimateSuggestOption
+    medium?: EstimateSuggestOption
+    high?: EstimateSuggestOption
+}
diff --git a/packages/web3-providers/src/opensea/index.ts b/packages/web3-providers/src/opensea/index.ts
index 1cd048fd2ed6..7ba0b95606af 100644
--- a/packages/web3-providers/src/opensea/index.ts
+++ b/packages/web3-providers/src/opensea/index.ts
@@ -1,20 +1,29 @@
+import urlcat from 'urlcat'
+import { head, uniqBy } from 'lodash-unified'
+import BigNumber from 'bignumber.js'
+import isAfter from 'date-fns/isAfter'
+import getUnixTime from 'date-fns/getUnixTime'
+import {
+    createPageable,
+    CurrencyType,
+    NonFungibleAsset,
+    NonFungibleToken,
+    NonFungibleTokenCollection,
+    NonFungibleTokenEvent,
+    NonFungibleTokenOrder,
+    OrderSide,
+    scale10,
+    TokenType,
+    HubOptions,
+} from '@masknet/web3-shared-base'
 import {
     ChainId,
-    ERC721TokenDetailed,
-    EthereumTokenType,
-    createERC721Token,
-    ERC721ContractDetailed,
-    createERC721ContractDetailed,
+    SchemaType,
+    createERC721Contract,
     createNativeToken,
     createERC20Token,
 } from '@masknet/web3-shared-evm'
-import BigNumber from 'bignumber.js'
-import fromUnixTime from 'date-fns/fromUnixTime'
-import isAfter from 'date-fns/isAfter'
-import { head, uniqBy } from 'lodash-unified'
-import urlcat from 'urlcat'
 import type { NonFungibleTokenAPI } from '../types'
-import { getOrderUnitPrice, getOrderUSDPrice, toImage } from './utils'
 import type {
     OpenSeaAssetContract,
     OpenSeaAssetEvent,
@@ -23,6 +32,7 @@ import type {
     OpenSeaCustomAccount,
     OpenSeaResponse,
 } from './types'
+import { getOrderUSDPrice, toImage } from './utils'
 import { OPENSEA_ACCOUNT_URL, OPENSEA_API_KEY, OPENSEA_API_URL } from './constants'
 import { isProxyENV } from '../helpers'
 
@@ -44,46 +54,6 @@ async function fetchFromOpenSea<T>(url: string, chainId: ChainId, apiKey?: strin
     }
 }
 
-function createERC721ContractFromAssetContract(
-    address: string,
-    chainId: ChainId,
-    assetContract?: OpenSeaAssetContract,
-): ERC721ContractDetailed {
-    return createERC721ContractDetailed(
-        chainId,
-        assetContract?.address ?? '',
-        assetContract?.name,
-        assetContract?.token_symbol,
-        undefined,
-        assetContract?.image_url,
-    )
-}
-
-function createERC721TokenFromAsset(
-    address: string,
-    tokenId: string,
-    chainId: ChainId,
-    asset: OpenSeaResponse,
-): ERC721TokenDetailed {
-    const imageURL = asset?.image_preview_url ?? asset?.image_url ?? ''
-    return createERC721Token(
-        createERC721ContractFromAssetContract(asset?.asset_contract?.address, chainId, asset?.asset_contract),
-        {
-            name: asset?.name ?? asset?.asset_contract.name ?? '',
-            description: asset?.description ?? '',
-            imageURL,
-            mediaUrl: asset?.animation_url ?? toImage(asset?.image_original_url ?? imageURL),
-            owner: asset?.owner.address ?? '',
-        },
-        tokenId,
-        {
-            name: asset.collection.name,
-            image: asset.collection.image_url || undefined,
-            slug: asset.collection.slug ?? '',
-        },
-    )
-}
-
 function createTokenDetailed(
     chainId: ChainId,
     token: {
@@ -94,7 +64,7 @@ function createTokenDetailed(
     },
 ) {
     if (token.symbol === 'ETH') return createNativeToken(chainId)
-    return createERC20Token(chainId, token.address, token.decimals, token.name, token.symbol)
+    return createERC20Token(chainId, token.address, token.name, token.symbol, token.decimals)
 }
 
 function createAssetLink(account: OpenSeaCustomAccount | undefined) {
@@ -104,7 +74,46 @@ function createAssetLink(account: OpenSeaCustomAccount | undefined) {
     })
 }
 
-function createNFTAsset(asset: OpenSeaResponse, chainId: ChainId): NonFungibleTokenAPI.Asset {
+function createNFTToken(chainId: ChainId, asset: OpenSeaResponse): NonFungibleToken<ChainId, SchemaType> {
+    return {
+        id: asset.token_address ?? asset.asset_contract.address,
+        chainId,
+        type: TokenType.NonFungible,
+        schema: SchemaType.ERC721,
+        tokenId: asset.token_id,
+        address: asset.token_address ?? asset.asset_contract.address,
+        metadata: {
+            chainId,
+            name: asset.name ?? asset.collection.name,
+            symbol: asset.asset_contract.token_symbol,
+            description: asset.description,
+            imageURL:
+                asset.animation_url ?? asset.image_original_url ?? asset.image_url ?? asset.image_preview_url ?? '',
+            mediaURL:
+                asset?.animation_url ??
+                toImage(asset?.image_original_url ?? asset?.image_preview_url ?? asset?.image_url ?? ''),
+        },
+        contract: {
+            chainId,
+            schema: SchemaType.ERC721,
+            address: asset.token_address ?? asset.asset_contract.address,
+            name: asset.name ?? asset.collection.name,
+            symbol: asset.asset_contract.token_symbol,
+        },
+        collection: {
+            chainId,
+            name: asset.collection.name,
+            slug: asset.collection.slug,
+            description: asset.collection.description,
+            iconURL:
+                asset.collection.image_url ?? asset.collection.largeImage_url ?? asset.collection.featured_image_url,
+            verified: ['approved', 'verified'].includes(asset.collection?.safelist_request_status ?? ''),
+            createdAt: getUnixTime(new Date(asset.collection.created_date)),
+        },
+    }
+}
+
+function createNFTAsset(chainId: ChainId, asset: OpenSeaResponse): NonFungibleAsset<ChainId, SchemaType> {
     const desktopOrder = head(
         asset.orders?.sort((a, b) =>
             new BigNumber(getOrderUSDPrice(b.current_price, b.payment_token_contract?.usd_price) ?? 0)
@@ -114,265 +123,307 @@ function createNFTAsset(asset: OpenSeaResponse, chainId: ChainId): NonFungibleTo
     )
 
     return {
-        is_verified: ['approved', 'verified'].includes(asset.collection?.safelist_request_status ?? ''),
-        // it's an IOS string as my inspection
-        is_auction: isAfter(Date.parse(`${asset.endTime ?? ''}Z`), Date.now()),
-        image_url: asset.animation_url ?? asset.image_original_url ?? asset.image_url ?? asset.image_preview_url ?? '',
-        asset_contract: {
-            name: asset.asset_contract.name,
-            description: asset.asset_contract.description,
-            schemaName: asset.asset_contract.schema_name,
+        ...createNFTToken(chainId, asset),
+        link: asset.opensea_link,
+        auction: isAfter(Date.parse(`${asset.endTime ?? ''}Z`), Date.now())
+            ? {
+                  endAt: getUnixTime(new Date(asset.endTime)),
+                  orderTokens: uniqBy(
+                      desktopOrder?.payment_token_contract
+                          ? [createTokenDetailed(chainId, desktopOrder.payment_token_contract)]
+                          : [],
+                      (x) => x.address.toLowerCase(),
+                  ),
+                  offerTokens: uniqBy(
+                      asset.collection.payment_tokens.map((x) => createTokenDetailed(chainId, x)),
+                      (x) => x.address.toLowerCase(),
+                  ),
+              }
+            : undefined,
+        creator: {
+            address: asset.creator.address,
+            nickname: asset.creator.user?.username ?? 'Unknown',
+            avatarURL: asset.creator.profile_img_url,
+            link: createAssetLink(asset.creator),
         },
-        current_price: desktopOrder
-            ? new BigNumber(
-                  getOrderUnitPrice(
-                      desktopOrder.current_price,
-                      desktopOrder.payment_token_contract?.decimals,
-                      desktopOrder.quantity,
-                  ) ?? 0,
-              ).toNumber()
-            : null,
-        current_symbol: desktopOrder?.payment_token_contract?.symbol ?? 'ETH',
         owner: {
-            ...asset.owner,
+            address: asset.owner.address,
+            nickname: asset.owner.user?.username ?? 'Unknown',
+            avatarURL: asset.owner.profile_img_url,
             link: createAssetLink(asset.owner),
         },
-        creator: {
-            ...asset.creator,
-            link: createAssetLink(asset.creator),
-        },
-        token_id: asset.token_id,
-        token_address: asset.token_address,
-        traits: asset.traits,
-        safelist_request_status: asset.collection?.safelist_request_status ?? '',
-        description: asset.description,
-        name: asset.name ?? asset.collection.name,
-        collection_name: asset.collection.name,
-        animation_url: asset.animation_url,
-        end_time: asset.endTime
-            ? new Date(asset.endTime)
-            : desktopOrder
-            ? fromUnixTime(desktopOrder.listing_time)
-            : null,
-        order_payment_tokens: desktopOrder?.payment_token_contract
-            ? [createTokenDetailed(chainId, desktopOrder.payment_token_contract)]
-            : [],
-        offer_payment_tokens: uniqBy(
-            asset.collection.payment_tokens.map((x) => createTokenDetailed(chainId, x)),
-            (x) => x.address.toLowerCase(),
-        ).filter((x) => x.type === EthereumTokenType.ERC20),
-        slug: asset.collection.slug,
-        desktopOrder,
-        top_ownerships: asset.top_ownerships.map((x): { owner: NonFungibleTokenAPI.AssetOwner } => ({
-            owner: {
-                address: x.owner.address,
-                profile_img_url: x.owner.profile_img_url,
-                user: { username: x.owner.user?.username ?? '' },
-                link: '',
-            },
+        traits: asset.traits.map((x) => ({
+            type: x.trait_type,
+            value: x.value,
         })),
-        collection: asset.collection as unknown as NonFungibleTokenAPI.AssetCollection,
-        response_: asset as any,
-        last_sale: asset.last_sale,
+        orders: asset.orders
+            ?.sort((a, z) =>
+                new BigNumber(getOrderUSDPrice(z.current_price, z.payment_token_contract?.usd_price) ?? 0)
+                    .minus(getOrderUSDPrice(a.current_price, a.payment_token_contract?.usd_price) ?? 0)
+                    .toNumber(),
+            )
+            .map((x) => ({
+                id: x.order_hash,
+                chainId,
+                asset_permalink: asset.opensea_link,
+                hash: x.order_hash,
+                quantity: x.quantity,
+                createdAt: x.created_time ? getUnixTime(new Date(x.created_time)) : undefined,
+                expiredAt: x.expiration_time,
+                side: x.side,
+                price: {
+                    [CurrencyType.USD]: x.current_price,
+                },
+                paymentToken: x.payment_token_contract
+                    ? createERC20Token(
+                          chainId,
+                          x.payment_token_contract.address,
+                          x.payment_token_contract.name,
+                          x.payment_token_contract.symbol,
+                          x.payment_token_contract.decimals,
+                          x.payment_token_contract.image_url,
+                      )
+                    : undefined,
+            })),
     }
 }
 
-function createNFTHistory(event: OpenSeaAssetEvent): NonFungibleTokenAPI.History {
+function createNFTHistory(chainId: ChainId, event: OpenSeaAssetEvent): NonFungibleTokenEvent<ChainId, SchemaType> {
     const accountPair =
         event.event_type === 'successful'
             ? {
                   from: {
-                      username: event.seller?.user?.username,
                       address: event.seller?.address,
-                      imageUrl: event.seller?.profile_img_url,
+                      nickname: event.seller?.user?.username,
+                      avatarURL: event.seller?.profile_img_url,
                       link: createAssetLink(event.seller),
                   },
                   to: {
-                      username: event.winner_account?.user?.username,
                       address: event.winner_account?.address,
-                      imageUrl: event.winner_account?.profile_img_url,
+                      nickname: event.winner_account?.user?.username,
+                      avatarURL: event.winner_account?.profile_img_url,
                       link: createAssetLink(event.winner_account),
                   },
               }
             : {
                   from: {
-                      username: event.from_account?.user?.username,
                       address: event.from_account?.address,
-                      imageUrl: event.from_account?.profile_img_url,
+                      nickname: event.from_account?.user?.username,
+                      avatarURL: event.from_account?.profile_img_url,
                       link: createAssetLink(event.from_account),
                   },
                   to: {
-                      username: event.to_account?.user?.username,
                       address: event.to_account?.address,
-                      imageUrl: event.to_account?.profile_img_url,
+                      nickname: event.to_account?.user?.username,
+                      avatarURL: event.to_account?.profile_img_url,
                       link: createAssetLink(event.to_account),
                   },
               }
     return {
+        ...accountPair,
         id: event.id,
-        accountPair,
+        chainId,
+        type: event.event_type,
+        assetPermalink: event.asset.permalink,
+        quantity: event.quantity,
+        hash: event.transaction?.transaction_hash,
+        timestamp: new Date(`${event.created_date}Z`).getTime(),
         price: {
-            quantity: event.quantity,
-            asset: event.asset,
-            paymentToken: event.payment_token,
-            price: event.bid_amount ?? event.ending_price ?? event.starting_price,
+            [CurrencyType.USD]: new BigNumber(event.bid_amount ?? event.total_price ?? 0)
+                .dividedBy(scale10(event.payment_token.decimals))
+                .dividedBy(event.quantity)
+                .multipliedBy(event.payment_token?.usd_price ?? 1)
+                .toFixed(2),
         },
-        eventType: event.event_type,
-        transactionBlockExplorerLink: event.transaction?.blockExplorerLink,
-        timestamp: new Date(`${event.created_date}Z`).getTime(),
+        paymentToken: event.payment_token
+            ? createERC20Token(
+                  ChainId.Mainnet,
+                  event.payment_token.address,
+                  event.payment_token.name,
+                  event.payment_token.symbol,
+                  event.payment_token.decimals,
+                  event.payment_token.image_url,
+              )
+            : undefined,
     }
 }
 
-function createAssetOrder(order: OpenSeaAssetOrder): NonFungibleTokenAPI.AssetOrder {
+function createAssetOrder(chainId: ChainId, order: OpenSeaAssetOrder): NonFungibleTokenOrder<ChainId, SchemaType> {
     return {
-        created_time: order.created_time,
-        current_price: order.current_price,
-        current_bounty: order.current_bounty,
-        maker_account: { ...order.maker, link: '' },
-        taker_account: { ...order.taker, link: '' },
-        payment_token: order.payment_token,
-        payment_token_contract: order.payment_token_contract,
-        fee_recipient_account: order.fee_recipient,
-        cancelled_or_finalized: order.cancelled || order.finalized,
-        marked_invalid: order.marked_invalid,
-        approved_on_chain: order.approved_on_chain,
-        listing_time: order.listing_time,
-        side: order.side,
+        id: order.order_hash,
+        chainId,
+        asset_permalink: order.asset.opensea_link,
+        hash: order.order_hash,
         quantity: order.quantity,
-        expiration_time: order.expiration_time,
-        order_hash: order.order_hash,
+        side: order.side,
+        maker: {
+            address: order.maker.address,
+            nickname: order.maker.user?.username,
+            avatarURL: order.maker.profile_img_url,
+            link: urlcat('https://opensea.io/accounts/:address', { address: order.maker.address }),
+        },
+        taker: {
+            address: order.taker.address,
+            nickname: order.taker.user?.username,
+            avatarURL: order.taker.profile_img_url,
+        },
+        createdAt: order.created_time ? getUnixTime(new Date(order.created_time)) : undefined,
+        expiredAt: order.expiration_time,
+        price: {
+            [CurrencyType.USD]: new BigNumber(order.base_price ?? 0)
+                .dividedBy(scale10(order.payment_token_contract?.decimals ?? 0))
+                .dividedBy(order.quantity)
+                .multipliedBy(order.payment_token_contract?.usd_price ?? 1)
+                .toFixed(2),
+        },
+        paymentToken: order.payment_token_contract
+            ? createERC20Token(
+                  ChainId.Mainnet,
+                  order.payment_token_contract.address,
+                  order.payment_token_contract.name,
+                  order.payment_token_contract.symbol,
+                  order.payment_token_contract.decimals,
+                  order.payment_token_contract.image_url,
+              )
+            : undefined,
     }
 }
 
-export class OpenSeaAPI implements NonFungibleTokenAPI.Provider {
+export class OpenSeaAPI implements NonFungibleTokenAPI.Provider<ChainId, SchemaType> {
     private readonly _apiKey
     constructor(apiKey?: string) {
         this._apiKey = apiKey
     }
-    async getAsset(address: string, tokenId: string, { chainId = ChainId.Mainnet }: { chainId?: ChainId } = {}) {
-        const requestPath = urlcat('/api/v1/asset/:address/:tokenId', { address, tokenId })
-        const response = await fetchFromOpenSea<OpenSeaResponse>(requestPath, chainId)
+    async getAsset(address: string, tokenId: string, { chainId = ChainId.Mainnet }: HubOptions<ChainId> = {}) {
+        const response = await fetchFromOpenSea<OpenSeaResponse>(
+            urlcat('/api/v1/asset/:address/:tokenId', { address, tokenId }),
+            chainId,
+        )
         if (!response) return
-        return createNFTAsset(response, chainId)
+        // @ts-ignore
+        return createNFTAsset(chainId, response)
     }
 
-    async getContract(address: string, chainId: ChainId) {
-        const requestPath = urlcat('/api/v1/asset_contract/:address', { address })
-        const assetContract = await fetchFromOpenSea<OpenSeaAssetContract>(requestPath, chainId)
-        return createERC721ContractFromAssetContract(address, chainId, assetContract)
+    async getContract(address: string, { chainId = ChainId.Mainnet }: HubOptions<ChainId> = {}) {
+        const assetContract = await fetchFromOpenSea<OpenSeaAssetContract>(
+            urlcat('/api/v1/asset_contract/:address', { address }),
+            chainId,
+        )
+        return createERC721Contract(
+            chainId,
+            address,
+            assetContract?.name ?? 'Unknown Token',
+            assetContract?.token_symbol ?? 'UNKNOWN',
+            undefined,
+            undefined,
+            assetContract?.image_url,
+        )
     }
 
-    async getToken(address: string, tokenId: string, chainId: ChainId) {
-        const requestPath = urlcat('/api/v1/asset/:address/:tokenId', { address, tokenId })
-        const response = await fetchFromOpenSea<OpenSeaResponse>(requestPath, chainId)
+    async getToken(address: string, tokenId: string, { chainId = ChainId.Mainnet }: HubOptions<ChainId> = {}) {
+        const response = await fetchFromOpenSea<OpenSeaResponse>(
+            urlcat('/api/v1/asset/:address/:tokenId', { address, tokenId }),
+            chainId,
+        )
         if (!response) return
-        return createERC721TokenFromAsset(address, tokenId, chainId, response)
+        return createNFTAsset(chainId, response)
     }
 
-    async getTokens(from: string, opts: NonFungibleTokenAPI.Options) {
-        const { chainId = ChainId.Mainnet, page = 0, size = 50 } = opts
-
-        const requestPath = urlcat('/api/v1/assets', {
-            owner: from,
-            offset: page * size,
-            limit: size,
-            collection: opts.pageInfo?.collection,
-        })
-        const response = await fetchFromOpenSea<{ assets?: OpenSeaResponse[] }>(requestPath, chainId, this._apiKey)
-        const assets =
-            response?.assets
-                ?.filter(
-                    (x: OpenSeaResponse) =>
-                        ['non-fungible', 'semi-fungible'].includes(x.asset_contract.asset_contract_type) ||
-                        ['ERC721', 'ERC1155'].includes(x.asset_contract.schema_name),
-                )
-                .map((asset: OpenSeaResponse) => createERC721TokenFromAsset(from, asset.token_id, chainId, asset))
-                .map((x) => ({ ...x, provideBy: 'OpenSea' })) ?? []
+    async getTokens(from: string, { chainId = ChainId.Mainnet, page = 0, size = 50 }: HubOptions<ChainId> = {}) {
+        const response = await fetchFromOpenSea<{ assets?: OpenSeaResponse[] }>(
+            urlcat('/api/v1/assets', {
+                owner: from,
+                offset: page * size,
+                limit: size,
+            }),
+            chainId,
+            this._apiKey,
+        )
+        const tokens = (response?.assets ?? [])
+            ?.filter(
+                (x: OpenSeaResponse) =>
+                    ['non-fungible', 'semi-fungible'].includes(x.asset_contract.asset_contract_type) ||
+                    ['ERC721', 'ERC1155'].includes(x.asset_contract.schema_name),
+            )
+            .map((asset: OpenSeaResponse) => createNFTToken(chainId, asset))
         return {
-            data: assets,
-            hasNextPage: assets.length === size,
+            currentPage: page,
+            data: tokens,
+            hasNextPage: tokens.length === size,
         }
     }
 
     async getHistory(
         address: string,
         tokenId: string,
-        { chainId = ChainId.Mainnet, page, size }: NonFungibleTokenAPI.Options = {},
+        { chainId = ChainId.Mainnet, page, size }: HubOptions<ChainId> = {},
     ) {
-        const requestPath = urlcat('/api/v1/events', {
-            asset_contract_address: address,
-            token_id: tokenId,
-            offset: page,
-            limit: size,
-        })
         const response = await fetchFromOpenSea<{
             asset_events: OpenSeaAssetEvent[]
-        }>(requestPath, chainId)
-        return response?.asset_events?.map(createNFTHistory) ?? []
+        }>(
+            urlcat('/api/v1/events', {
+                asset_contract_address: address,
+                token_id: tokenId,
+                offset: page,
+                limit: size,
+            }),
+            chainId,
+        )
+        return response?.asset_events?.map((x) => createNFTHistory(chainId, x)) ?? []
     }
 
     async getOrders(
         address: string,
         tokenId: string,
-        side: NonFungibleTokenAPI.OrderSide,
-        { chainId = ChainId.Mainnet, page, size }: NonFungibleTokenAPI.Options = {},
+        side: OrderSide,
+        { chainId = ChainId.Mainnet, page, size }: HubOptions<ChainId> = {},
     ) {
-        const requestPath = urlcat('/wyvern/v1/orders', {
-            asset_contract_address: address,
-            token_id: tokenId,
-            side,
-            offset: page,
-            limit: size,
-        })
         const response = await fetchFromOpenSea<{
             orders: OpenSeaAssetOrder[]
-        }>(requestPath, chainId)
-        return response?.orders?.map(createAssetOrder) ?? []
+        }>(
+            urlcat('/wyvern/v1/orders', {
+                asset_contract_address: address,
+                token_id: tokenId,
+                side,
+                offset: page,
+                limit: size,
+            }),
+            chainId,
+        )
+        return response?.orders?.map((x) => createAssetOrder(chainId, x)) ?? []
     }
 
-    async getCollections(address: string, opts: NonFungibleTokenAPI.Options = {}) {
-        const { chainId = ChainId.Mainnet, page = 0, size = 50 } = opts
-        const requestPath = urlcat('/api/v1/collections', {
-            asset_owner: address,
-            offset: page * size,
-            limit: size,
-        })
-        const response = await fetchFromOpenSea<OpenSeaCollection[]>(requestPath, chainId, this._apiKey)
-        if (!response) {
-            return {
-                data: [],
-                hasNextPage: false,
-            }
-        }
-
-        const collections =
-            response?.map((x) => ({
-                name: x.name,
-                image: x.image_url || undefined,
-                slug: x.slug,
-                id: x.slug,
-                chainId,
-                symbol: x.primary_asset_contracts?.[0]?.symbol,
-                address: x.primary_asset_contracts?.[0]?.address,
-                // workaround: rarible collection have multi contract
-                addresses: x.primary_asset_contracts?.map((x) => x.address),
-                iconURL: x.image_url,
-                balance: x.owned_asset_count,
-            })) ?? []
+    async getCollections(
+        address: string,
+        { chainId = ChainId.Mainnet, page = 0, size = 50 }: HubOptions<ChainId> = {},
+    ) {
+        const response = await fetchFromOpenSea<OpenSeaCollection[]>(
+            urlcat('/api/v1/collections', {
+                asset_owner: address,
+                offset: page * size,
+                limit: size,
+            }),
+            chainId,
+            this._apiKey,
+        )
+        if (!response) return createPageable<NonFungibleTokenCollection<ChainId>>()
 
-        return {
-            data: collections,
-            hasNextPage: collections.length === size,
-        }
+        const collections: Array<NonFungibleTokenCollection<ChainId>> =
+            response
+                ?.map((x) => ({
+                    chainId,
+                    name: x.name,
+                    slug: x.slug,
+                    address: x.primary_asset_contracts?.[0]?.address,
+                    symbol: x.primary_asset_contracts?.[0]?.symbol,
+                    schema_name: x.primary_asset_contracts?.[0]?.schema_name,
+                    description: x.description,
+                    iconURL: x.image_url,
+                    balance: x.owned_asset_count,
+                    verified: ['approved', 'verified'].includes(x.safelist_request_status ?? ''),
+                    createdAt: getUnixTime(new Date(x.created_date)),
+                }))
+                .filter((x) => x.address) ?? []
+        return createPageable(collections, page, collections.length === size)
     }
 }
-
-export function getOpenSeaNFTList(apiKey: string, address: string, page?: number, size?: number) {
-    const opensea = new OpenSeaAPI(apiKey)
-    return opensea.getTokens(address, { page, size })
-}
-
-export function getOpenSeaCollectionList(apiKey: string, address: string, page?: number, size?: number) {
-    const opensea = new OpenSeaAPI(apiKey)
-    return opensea.getCollections(address, { page, size })
-}
diff --git a/packages/web3-providers/src/opensea/types.ts b/packages/web3-providers/src/opensea/types.ts
index efd8ce281dc2..867a6018242c 100644
--- a/packages/web3-providers/src/opensea/types.ts
+++ b/packages/web3-providers/src/opensea/types.ts
@@ -1,5 +1,3 @@
-import type { NonFungibleTokenAPI } from '..'
-
 export interface OpenSeaFees {
     opensea_seller_fee_basis_points: number
     opensea_buyer_fee_basis_points: number
@@ -16,6 +14,54 @@ export interface Asset {
     decimals?: number
 }
 
+export interface AssetOwner {
+    address: string
+    profile_img_url?: string
+    user?: {
+        username: string
+    }
+    link: string
+}
+
+export interface AssetToken {
+    image_url?: string
+    eth_price?: string
+    usd_price?: string
+    name: string
+    symbol: string
+    decimals: number
+    address: string
+}
+
+export interface AssetOrder {
+    created_time?: string
+    current_price?: string
+    current_bounty?: string
+    maker_account?: AssetOwner
+    taker_account?: AssetOwner
+    payment_token?: string
+    payment_token_contract?: AssetToken
+    fee_recipient_account?: AssetToken
+    cancelled_or_finalized?: boolean
+    marked_invalid?: boolean
+    approved_on_chain: boolean
+    listing_time: number
+    side: number
+    quantity: string
+    expiration_time: number
+    order_hash: string
+}
+
+export interface AssetEvent {
+    event_type: string
+    event_timestamp: number
+    auction_type: string
+    total_price: string
+    payment_token: {
+        decimals: number
+    }
+}
+
 export interface OpenSeaAssetContract extends OpenSeaFees {
     name: string
     address: string
@@ -83,6 +129,7 @@ export interface OpenSeaCollection extends OpenSeaFees {
     primary_asset_contracts: Array<{
         address: string
         asset_contract_type: string
+        schema_name: string
         symbol: string
     }>
 }
@@ -94,9 +141,9 @@ export interface OpenSeaResponse extends Asset {
     name: string
     description: string
     owner: OpenSeaCustomAccount
-    orders: NonFungibleTokenAPI.AssetOrder[] | null
-    buy_orders: NonFungibleTokenAPI.AssetOrder[] | null
-    sell_orders: NonFungibleTokenAPI.AssetOrder[] | null
+    orders: AssetOrder[] | null
+    buy_orders: AssetOrder[] | null
+    sell_orders: AssetOrder[] | null
     is_presale: boolean
     image_url: string
     image_preview_url: string
@@ -109,7 +156,7 @@ export interface OpenSeaResponse extends Asset {
         value: string
     }>
     num_sales: number
-    last_sale: NonFungibleTokenAPI.AssetEvent | null
+    last_sale: AssetEvent | null
     background_color: string | null
     transfer_fee: string | null
     transfer_fee_payment_token: OpenSeaFungibleToken | null
@@ -154,10 +201,12 @@ export interface OpenSeaAssetEvent {
     payment_token: OpenSeaFungibleToken
     quantity: string
     ending_price: string
-    bid_amount: string
+    bid_amount?: string
+    total_price?: string
     starting_price: string
-    transaction: {
-        blockExplorerLink: string
+    transaction?: {
+        transaction_index: string
+        transaction_hash: string
         id: string
     }
     assetQuantity: {
@@ -172,19 +221,19 @@ export interface OpenSeaAssetEvent {
 }
 
 export interface OpenSeaAssetOrder {
-    approved_on_chain: boolean
     asset: OpenSeaResponse
     listing_time: number
     created_time?: string
 
+    base_price?: string
     current_price?: string
     current_bounty?: string
     maker: OpenSeaCustomAccount
     taker: OpenSeaCustomAccount
 
     payment_token?: string
-    payment_token_contract?: NonFungibleTokenAPI.AssetToken
-    fee_recipient?: NonFungibleTokenAPI.AssetToken
+    payment_token_contract?: AssetToken
+    fee_recipient?: AssetToken
 
     cancelled?: boolean
     finalized?: boolean
diff --git a/packages/web3-providers/src/rarible/index.ts b/packages/web3-providers/src/rarible/index.ts
index cdd1b548266e..b5e1266c0cba 100644
--- a/packages/web3-providers/src/rarible/index.ts
+++ b/packages/web3-providers/src/rarible/index.ts
@@ -1,12 +1,25 @@
 import urlcat from 'urlcat'
 import { compact, first } from 'lodash-unified'
 import {
-    ChainId,
     createLookupTableResolver,
-    ERC721TokenDetailed,
-    EthereumTokenType,
-    FungibleTokenDetailed,
+    CurrencyType,
+    HubOptions,
+    FungibleToken,
+    NonFungibleAsset,
+    NonFungibleToken,
+    NonFungibleTokenEvent,
+    NonFungibleTokenOrder,
+    OrderSide,
+    TokenType,
+} from '@masknet/web3-shared-base'
+import {
+    ChainId,
+    SchemaType,
     resolveIPFSLinkFromURL,
+    createERC721Token,
+    createERC721Metadata,
+    createERC721Contract,
+    createERC721Collection,
 } from '@masknet/web3-shared-evm'
 import {
     Ownership,
@@ -17,8 +30,8 @@ import {
     RaribleProfileResponse,
 } from './types'
 import { RaribleUserURL, RaribleRopstenUserURL, RaribleMainnetURL, RaribleChainURL, RaribleURL } from './constants'
-import { NonFungibleTokenAPI } from '..'
 import { isProxyENV } from '../helpers'
+import type { NonFungibleTokenAPI } from '../types'
 
 const resolveRaribleUserNetwork = createLookupTableResolver<ChainId.Mainnet | ChainId.Ropsten, string>(
     {
@@ -50,82 +63,82 @@ function createERC721TokenFromAsset(
     tokenAddress: string,
     tokenId: string,
     asset?: RaribleNFTItemMapResponse,
-): ERC721TokenDetailed {
+): NonFungibleToken<ChainId, SchemaType.ERC721> {
     const imageURL = resolveIPFSLinkFromURL(asset?.meta?.image?.url.ORIGINAL ?? asset?.meta?.image?.url.PREVIEW ?? '')
-    return {
-        contractDetailed: {
-            type: EthereumTokenType.ERC721,
-            chainId: ChainId.Mainnet,
-            address: tokenAddress,
-            name: asset?.meta?.name ?? '',
-            symbol: '',
-        },
-        info: {
-            name: asset?.meta?.name ?? '',
-            description: asset?.meta?.description ?? '',
-            mediaUrl:
-                resolveIPFSLinkFromURL(
-                    asset?.meta?.animation?.url.ORIGINAL ?? asset?.meta?.animation?.url.PREVIEW ?? '',
-                ) || imageURL,
-            imageURL,
-            owner: asset?.owners[0],
-        },
+    return createERC721Token(
+        ChainId.Mainnet,
+        tokenAddress,
         tokenId,
-    }
+        createERC721Metadata(ChainId.Mainnet, asset?.meta?.name ?? '', '', '', imageURL, imageURL),
+        createERC721Contract(ChainId.Mainnet, tokenAddress, asset?.meta?.name ?? '', '', first(asset?.owners)),
+        createERC721Collection(ChainId.Mainnet, asset?.meta?.name ?? '', '', '', ''),
+    )
 }
 
-function createNFTAsset(asset: RaribleNFTItemMapResponse, chainId: ChainId): NonFungibleTokenAPI.Asset {
+function createNFTAsset(
+    asset: RaribleNFTItemMapResponse,
+    chainId: ChainId,
+): NonFungibleAsset<ChainId, SchemaType.ERC721> {
     const owner = first(asset?.owners)
     const creator = first(asset?.creators)
     return {
-        is_verified: false,
-        is_auction: false,
-        token_address: asset.contract,
-        image_url: resolveIPFSLinkFromURL(asset?.meta?.image?.url.ORIGINAL ?? ''),
-        asset_contract: null,
-        owner: owner
+        id: asset.contract,
+        chainId,
+        tokenId: asset.tokenId,
+        type: TokenType.NonFungible,
+        address: asset.contract,
+        schema: SchemaType.ERC721,
+        creator: creator
             ? {
-                  address: owner,
-                  profile_img_url: '',
-                  user: { username: owner },
+                  address: creator.account,
+                  avatarURL: '',
+                  nickname: creator.account,
                   link: '',
               }
-            : null,
-        creator: creator
+            : undefined,
+        owner: owner
             ? {
-                  address: creator.account,
-                  profile_img_url: '',
-                  user: { username: creator.account },
+                  address: owner,
+                  avatarURL: '',
+                  nickname: owner,
                   link: '',
               }
-            : null,
-        traits: asset?.meta?.attributes.map(({ key, value }) => ({ trait_type: key, value })) ?? [],
-        description: asset?.meta?.description ?? '',
-        name: asset?.meta?.name ?? 'Unknown',
-        collection_name: '',
-        animation_url: asset.meta?.animation?.url.PREVIEW,
-        current_price: 0,
-        current_symbol: 'ETH',
-        end_time: null,
-        order_payment_tokens: [] as FungibleTokenDetailed[],
-        offer_payment_tokens: [] as FungibleTokenDetailed[],
-        top_ownerships: owner
-            ? [
-                  {
-                      owner: {
-                          address: owner,
-                          profile_img_url: '',
-                          user: { username: owner },
-                          link: '',
-                      },
-                  },
-              ]
-            : [],
-        slug: '',
-        response_: asset,
-        token_id: asset.tokenId,
-        safelist_request_status: '',
-        last_sale: null,
+            : undefined,
+        traits: asset?.meta?.attributes.map(({ key, value }) => ({ type: key, value })) ?? [],
+        price: {
+            [CurrencyType.USD]: '0',
+        },
+
+        // image_url: resolveIPFSLinkFromURL(asset?.meta?.image?.url.ORIGINAL ?? ''),
+
+        // asset_contract: null,
+
+        // description: asset?.meta?.description ?? '',
+        // name: asset?.meta?.name ?? 'Unknown',
+        // collection_name: '',
+        // animation_url: asset.meta?.animation?.url.PREVIEW,
+        // current_price: 0,
+        // current_symbol: 'ETH',
+        // end_time: null,
+        // order_payment_tokens: [] as FungibleToken<ChainId, SchemaType.ERC721>[],
+        // offer_payment_tokens: [] as FungibleToken<ChainId, SchemaType.ERC721>[],
+        // top_ownerships: owner
+        //     ? [
+        //           {
+        //               owner: {
+        //                   address: owner,
+        //                   profile_img_url: '',
+        //                   user: { username: owner },
+        //                   link: '',
+        //               },
+        //           },
+        //       ]
+        //     : [],
+        // slug: '',
+        // response_: asset,
+        // token_id: asset.tokenId,
+        // safelist_request_status: '',
+        // last_sale: null,
     }
 }
 
@@ -142,7 +155,7 @@ function _getAsset(address: string, tokenId: string) {
     })
 }
 
-export class RaribleAPI implements NonFungibleTokenAPI.Provider {
+export class RaribleAPI implements NonFungibleTokenAPI.Provider<ChainId, SchemaType> {
     async getAsset(address: string, tokenId: string, { chainId = ChainId.Mainnet }: { chainId?: ChainId } = {}) {
         const asset = await _getAsset(address, tokenId)
         if (!asset) return
@@ -154,11 +167,10 @@ export class RaribleAPI implements NonFungibleTokenAPI.Provider {
         return createERC721TokenFromAsset(tokenAddress, tokenId, asset)
     }
 
-    async getTokens(from: string, opts: NonFungibleTokenAPI.Options) {
+    async getTokens(from: string, { page = 0, size = 50 }: HubOptions<ChainId> = {}) {
         const requestPath = urlcat('/protocol/v0.1/ethereum/nft/items/byOwner', {
             owner: from,
-            size: opts.size,
-            ...opts.pageInfo,
+            size,
         })
         interface Payload {
             total: number
@@ -166,31 +178,29 @@ export class RaribleAPI implements NonFungibleTokenAPI.Provider {
             items: RaribleNFTItemMapResponse[]
         }
         const asset = await fetchFromRarible<Payload>(RaribleURL, requestPath, undefined)
+
         if (!asset)
             return {
+                currentPage: 0,
                 data: [],
                 hasNextPage: false,
             }
-
-        const data =
-            asset.items
-                .map((asset) => createERC721TokenFromAsset(asset.contract, asset.tokenId, asset))
-                .filter((x) => x.info?.owner?.toLowerCase() === from.toLowerCase())
-                .map((x) => ({ ...x, provideBy: 'Rarible' })) ?? []
         return {
-            data,
+            currentPage: page,
+            data:
+                asset.items
+                    .map((asset) => createERC721TokenFromAsset(asset.contract, asset.tokenId, asset))
+                    .filter((x) => x.contract?.owner?.toLowerCase() === from.toLowerCase())
+                    .map((x) => ({ ...x, provideBy: 'Rarible' })) ?? [],
             hasNextPage: !!asset.continuation,
-            nextPageInfo: {
-                continuation: asset.continuation,
-            },
         }
     }
 
     async getOffers(
         tokenAddress: string,
         tokenId: string,
-        { chainId = ChainId.Mainnet }: NonFungibleTokenAPI.Options = {},
-    ): Promise<NonFungibleTokenAPI.AssetOrder[]> {
+        { chainId = ChainId.Mainnet }: HubOptions<ChainId> = {},
+    ): Promise<Array<NonFungibleTokenOrder<ChainId, SchemaType>>> {
         const requestPath = urlcat('/items/:tokenAddress::tokenId/offers', { tokenAddress, tokenId })
         const orders = await fetchFromRarible<RaribleOfferResponse[]>(RaribleMainnetURL, requestPath, {
             method: 'POST',
@@ -198,25 +208,29 @@ export class RaribleAPI implements NonFungibleTokenAPI.Provider {
             headers: { 'content-type': 'application/json' },
         })
         const profiles = await getProfilesFromRarible(orders.map((item) => item.maker))
-        return orders.map((order): NonFungibleTokenAPI.AssetOrder => {
+        return orders.map((order): NonFungibleTokenOrder<ChainId, SchemaType> => {
             const ownerInfo = profiles.find((owner) => owner.id === order.maker)
             return {
-                created_time: order.updateDate,
-                current_price: order.buyPriceEth,
-                current_bounty: order.fee,
-                payment_token: order.token,
-                listing_time: 0,
-                side: NonFungibleTokenAPI.OrderSide.Buy,
-                quantity: '1',
-                expiration_time: 0,
-                order_hash: order.signature,
-                approved_on_chain: false,
-                maker_account: {
-                    user: { username: ownerInfo?.name ?? '' },
-                    address: ownerInfo?.id ?? '',
-                    profile_img_url: resolveIPFSLinkFromURL(ownerInfo?.image ?? ''),
-                    link: `${resolveRaribleUserNetwork(chainId as number)}${ownerInfo?.id ?? ''}`,
+                id: order.tokenId,
+                chainId: ChainId.Mainnet,
+                asset_permalink: '',
+                createdAt: Number(order.updateDate),
+                price: {
+                    usd: order.buyPrice.toString(),
                 },
+                paymentToken: {
+                    name: order.token,
+                    id: order.tokenId,
+                    type: TokenType.NonFungible,
+                    schema: SchemaType.ERC20,
+                    chainId,
+                    address: tokenAddress,
+                    symbol: '',
+                    decimals: 0,
+                } as FungibleToken<ChainId, SchemaType>,
+                side: OrderSide.Buy,
+                quantity: order.value.toString(),
+                expiredAt: 0,
             }
         })
     }
@@ -224,51 +238,54 @@ export class RaribleAPI implements NonFungibleTokenAPI.Provider {
     async getListings(
         tokenAddress: string,
         tokenId: string,
-        { chainId = ChainId.Mainnet }: NonFungibleTokenAPI.Options = {},
-    ): Promise<NonFungibleTokenAPI.AssetOrder[]> {
+        { chainId = ChainId.Mainnet }: HubOptions<ChainId> = {},
+    ): Promise<Array<NonFungibleTokenOrder<ChainId, SchemaType>>> {
         const requestPath = urlcat('/items/:tokenAddress::tokenId/ownerships', { tokenAddress, tokenId })
         const assets = await fetchFromRarible<Ownership[]>(RaribleMainnetURL, requestPath)
         const listings = assets.filter((x) => x.selling)
         const profiles = await getProfilesFromRarible(listings.map((x) => x.owner))
-        return listings.map((asset): NonFungibleTokenAPI.AssetOrder => {
+        return listings.map((asset): NonFungibleTokenOrder<ChainId, SchemaType> => {
             const ownerInfo = profiles.find((owner) => owner.id === asset.owner)
             return {
-                created_time: asset.date,
-                approved_on_chain: false,
-                current_price: asset.priceEth,
-                payment_token: asset.token,
-                listing_time: 0,
-                side: NonFungibleTokenAPI.OrderSide.Buy,
-                quantity: '1',
-                expiration_time: 0,
-                order_hash: asset.signature,
-                maker_account: {
-                    user: { username: ownerInfo?.name ?? '' },
-                    address: ownerInfo?.id ?? '',
-                    profile_img_url: resolveIPFSLinkFromURL(ownerInfo?.image ?? ''),
-                    link: `${resolveRaribleUserNetwork(chainId as number)}${ownerInfo?.id ?? ''}`,
+                id: asset.tokenId,
+                chainId: ChainId.Mainnet,
+                asset_permalink: '',
+                createdAt: Number(asset.date ?? 0),
+                price: {
+                    usd: asset.price,
                 },
+                paymentToken: {
+                    name: asset.token,
+                    id: asset.tokenId,
+                    decimals: 0,
+                    chainId: ChainId.Mainnet,
+                    // symbol: '1',
+                    // schema: SchemaType.ERC721,
+                    address: tokenAddress,
+                    type: TokenType.NonFungible,
+                } as FungibleToken<ChainId, SchemaType>,
+                side: OrderSide.Buy,
+                quantity: asset.value.toString(),
+                expiredAt: 0,
             }
         })
     }
 
-    async getOrders(
-        tokenAddress: string,
-        tokenId: string,
-        side: NonFungibleTokenAPI.OrderSide,
-        opts: NonFungibleTokenAPI.Options = {},
-    ) {
+    async getOrders(tokenAddress: string, tokenId: string, side: OrderSide, opts: HubOptions<ChainId> = {}) {
         switch (side) {
-            case NonFungibleTokenAPI.OrderSide.Buy:
+            case OrderSide.Buy:
                 return this.getOffers(tokenAddress, tokenId, opts)
-            case NonFungibleTokenAPI.OrderSide.Sell:
+            case OrderSide.Sell:
                 return this.getListings(tokenAddress, tokenId, opts)
             default:
                 return []
         }
     }
 
-    async getHistory(tokenAddress: string, tokenId: string): Promise<NonFungibleTokenAPI.History[]> {
+    async getHistory(
+        tokenAddress: string,
+        tokenId: string,
+    ): Promise<Array<NonFungibleTokenEvent<ChainId, SchemaType>>> {
         const response = await fetchFromRarible<RaribleHistory[]>(RaribleMainnetURL, '/activity', {
             method: 'POST',
             body: JSON.stringify({
@@ -299,48 +316,25 @@ export class RaribleAPI implements NonFungibleTokenAPI.Provider {
             const fromInfo = profiles.find((profile) => profile.id === history.buyer || profile.id === history.from)
             return {
                 id: history.id,
-                eventType: history['@type'],
+                chainId: ChainId.Mainnet,
+                type: history['@type'],
+                assetPermalink: '',
+                quantity: history.value,
                 timestamp: history.date.getTime() ?? 0,
-                price: {
-                    quantity: '1',
-                    price: history.price,
-                    asset: {
-                        id: fromInfo?.id,
-                        decimals: 0,
-                        image_url: fromInfo?.image,
-                        image_original_url: '',
-                        image_preview_url: '',
-                        asset_contract: {
-                            symbol: fromInfo?.type,
-                        },
-                        permalink: '',
-                    },
+                hash: history.transactionHash,
+                from: {
+                    username: fromInfo?.name,
+                    address: fromInfo?.id,
+                    imageUrl: fromInfo?.image,
+                    link: '',
                 },
-                accountPair: {
-                    from: {
-                        username: fromInfo?.name,
-                        address: fromInfo?.id,
-                        imageUrl: fromInfo?.image,
-                        link: '',
-                    },
-                    to: {
-                        username: ownerInfo?.name,
-                        address: ownerInfo?.id,
-                        imageUrl: ownerInfo?.image,
-                        link: '',
-                    },
+                to: {
+                    username: ownerInfo?.name,
+                    address: ownerInfo?.id,
+                    imageUrl: ownerInfo?.image,
+                    link: '',
                 },
-            } as NonFungibleTokenAPI.History
+            } as NonFungibleTokenEvent<ChainId, SchemaType>
         })
     }
 }
-
-export function getRaribleNFTList(
-    address: string,
-    page?: number,
-    size?: number,
-    pageInfo?: { [key in string]: unknown },
-) {
-    const rarible = new RaribleAPI()
-    return rarible.getTokens(address, { page, size, pageInfo })
-}
diff --git a/packages/web3-providers/src/risk-warning/index.ts b/packages/web3-providers/src/risk-warning/index.ts
new file mode 100644
index 000000000000..3b4620d89343
--- /dev/null
+++ b/packages/web3-providers/src/risk-warning/index.ts
@@ -0,0 +1,22 @@
+import type { RiskWarningBaseAPI } from '../types'
+
+const BASE_URL_MAP: Record<typeof process.env.NODE_ENV, string> = {
+    production: 'https://backup.mask.io/api',
+    development: 'https://vaalh28dbi.execute-api.ap-east-1.amazonaws.com/api',
+    // @ts-ignore
+    test: 'https://vaalh28dbi.execute-api.ap-east-1.amazonaws.com/api',
+}
+
+const BASE_URL = BASE_URL_MAP[process.env.NODE_ENV]
+
+export class RiskWarningAPI implements RiskWarningBaseAPI.Provider {
+    async approve(address: string, pluginID = '') {
+        await fetch(`${BASE_URL}/v1/risk_warning/confirm`, {
+            method: 'POST',
+            body: JSON.stringify({
+                address,
+                plugin_id: pluginID,
+            }),
+        })
+    }
+}
diff --git a/packages/web3-providers/src/rss3/index.ts b/packages/web3-providers/src/rss3/index.ts
index 940ffc5c11e3..b0324ae758c3 100644
--- a/packages/web3-providers/src/rss3/index.ts
+++ b/packages/web3-providers/src/rss3/index.ts
@@ -1,10 +1,12 @@
 import urlcat from 'urlcat'
 import RSS3 from 'rss3-next'
+import { ChainId, SchemaType } from '@masknet/web3-shared-evm'
 import { RSS3_ENDPOINT } from './constants'
 import { NonFungibleTokenAPI, RSS3BaseAPI } from '../types'
 import { fetchJSON } from '../helpers'
+import { TokenType } from '@masknet/web3-shared-base'
 
-export class RSS3API implements RSS3BaseAPI.Provider, NonFungibleTokenAPI.Provider {
+export class RSS3API implements RSS3BaseAPI.Provider, NonFungibleTokenAPI.Provider<ChainId, SchemaType> {
     createRSS3(
         address: string,
         sign: (message: string) => Promise<string> = () => {
@@ -70,32 +72,25 @@ export class RSS3API implements RSS3BaseAPI.Provider, NonFungibleTokenAPI.Provid
 
         const { status, assets = [] } = await fetchJSON<RSS3BaseAPI.GeneralAssetResponse>(url)
         if (!status) return []
-        return assets.map((asset) => {
-            return {
-                is_verified: false,
-                is_auction: false,
-                image_url: asset.info.image_preview_url ?? '',
-                asset_contract: null,
-                current_price: null,
-                current_symbol: '',
-                owner: null,
-                creator: null,
-                token_id: asset.id.slice(asset.id.lastIndexOf('-') + 1),
-                token_address: asset.id.slice(0, Math.max(0, asset.id.indexOf('-'))),
-                traits: [],
-                safelist_request_status: '',
-                description: '',
-                name: asset.info.title ?? '',
-                collection_name: asset.info.collection ?? '',
-                animation_url: asset.info.animation_url ?? '',
-                end_time: asset.info.end_date ? new Date(asset.info.end_date) : null,
-                order_payment_tokens: [],
-                offer_payment_tokens: [],
-                slug: null,
-                top_ownerships: [],
-                response_: asset,
-                last_sale: null,
-            }
-        })
+
+        return assets
+            .filter((x) => ['Ethereum-NFT', 'Polygon-NFT'].includes(x.type))
+            .map((asset) => {
+                const [address, tokenId] = asset.id.split('-')
+                const chainId = asset.type === 'Ethereum-NFT' ? ChainId.Mainnet : ChainId.Matic
+                return {
+                    id: asset.id,
+                    type: TokenType.NonFungible,
+                    schema: SchemaType.ERC721,
+                    chainId,
+                    address,
+                    tokenId,
+                    collection: {
+                        chainId,
+                        name: asset.info.collection ?? '',
+                        slug: '',
+                    },
+                }
+            })
     }
 }
diff --git a/packages/web3-providers/src/token-list/index.ts b/packages/web3-providers/src/token-list/index.ts
index 76a1678b52b7..19bc308390de 100644
--- a/packages/web3-providers/src/token-list/index.ts
+++ b/packages/web3-providers/src/token-list/index.ts
@@ -1,45 +1,17 @@
+import { uniqBy } from 'lodash-unified'
 import { memoizePromise } from '@dimensiondev/kit'
-import {
-    ChainId,
-    ERC20TokenDetailed,
-    EthereumTokenType,
-    formatEthereumAddress,
-    getChainDetailed,
-} from '@masknet/web3-shared-evm'
-import { groupBy } from 'lodash-unified'
+import { FungibleToken, TokenType } from '@masknet/web3-shared-base'
+import { ChainId, SchemaType, formatEthereumAddress, chainResolver } from '@masknet/web3-shared-evm'
 import type { TokenListBaseAPI } from '../types'
 
-const NATIVE_TOKEN_ADDRESS_IN_1INCH = '0xeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee'
-
 const fetchTokenList = memoizePromise(
     async (url: string) => {
         const response = await fetch(url, { cache: 'force-cache' })
-        return response.json() as Promise<TokenListBaseAPI.TokenList | TokenListBaseAPI.TokenObject>
+        return response.json() as Promise<TokenListBaseAPI.TokenList<ChainId> | TokenListBaseAPI.TokenObject<ChainId>>
     },
     (url) => url,
 )
 
-/**
- * Fetch tokens from 1inch token list
- * @param url
- * @param chainId
- */
-async function fetch1inchERC20TokensFromTokenList(
-    url: string,
-    chainId = ChainId.Mainnet,
-): Promise<ERC20TokenDetailed[]> {
-    const tokens = ((await fetchTokenList(url)) as TokenListBaseAPI.TokenObject).tokens
-    const _tokens = Object.values(tokens)
-    return _tokens
-        .filter((x) => x.address.toLowerCase() !== NATIVE_TOKEN_ADDRESS_IN_1INCH)
-        .map((x) => ({
-            type: EthereumTokenType.ERC20,
-            ...x,
-            chainId,
-            logoURI: x.logoURI ? [x.logoURI] : [],
-        }))
-}
-
 /**
  * Fetch tokens from common token list
  * @param url
@@ -48,19 +20,21 @@ async function fetch1inchERC20TokensFromTokenList(
 async function fetchCommonERC20TokensFromTokenList(
     url: string,
     chainId = ChainId.Mainnet,
-): Promise<ERC20TokenDetailed[]> {
-    return ((await fetchTokenList(url)) as TokenListBaseAPI.TokenList).tokens
+): Promise<Array<FungibleToken<ChainId, SchemaType.ERC20>>> {
+    return ((await fetchTokenList(url)) as TokenListBaseAPI.TokenList<ChainId>).tokens
         .filter(
             (x) =>
                 x.chainId === chainId &&
                 (process.env.NODE_ENV === 'production' && process.env.channel === 'stable'
-                    ? getChainDetailed(chainId)?.network === 'mainnet'
+                    ? chainResolver.isMainnet(chainId)
                     : true),
         )
         .map((x) => ({
-            type: EthereumTokenType.ERC20,
+            id: x.address,
+            type: TokenType.Fungible,
+            schema: SchemaType.ERC20,
             ...x,
-            logoURI: x.logoURI ? [x.logoURI] : [],
+            logoURL: x.logoURI,
         }))
 }
 
@@ -71,11 +45,6 @@ async function fetchCommonERC20TokensFromTokenList(
  */
 async function fetchERC20TokensFromTokenList(urls: string[], chainId = ChainId.Mainnet) {
     const allRequest = urls.map(async (x) => {
-        if (x.includes('1inch')) {
-            const tokens = await fetch1inchERC20TokensFromTokenList(x, chainId)
-            return { tokens, weight: 0 }
-        }
-
         const tokens = await fetchCommonERC20TokensFromTokenList(x, chainId)
         return { tokens, weight: x.startsWith('https://tokens.r2d2.to') ? 1 : 0 }
     })
@@ -89,25 +58,18 @@ async function fetchERC20TokensFromTokenList(urls: string[], chainId = ChainId.M
  * @param urls
  * @param chainId
  */
-
-export class TokenListAPI implements TokenListBaseAPI.Provider {
-    async fetchERC20TokensFromTokenLists(url: string[], chainId: ChainId) {
+export class TokenListAPI implements TokenListBaseAPI.Provider<ChainId, SchemaType> {
+    async fetchFungibleTokensFromTokenLists(chainId: ChainId, url: string[]) {
         const result = memoizePromise(
-            async (urls: string[], chainId = ChainId.Mainnet): Promise<ERC20TokenDetailed[]> => {
+            async (urls: string[], chainId = ChainId.Mainnet): Promise<Array<FungibleToken<ChainId, SchemaType>>> => {
                 const tokens = (await fetchERC20TokensFromTokenList(urls, chainId))
                     .sort((a, b) => b.weight - a.weight)
                     .flatMap((x) => x.tokens)
-                const groupedToken = groupBy(tokens, (x) => x.address.toLowerCase())
 
-                return Object.values(groupedToken).map((tokenList) => {
-                    const logoURIs = tokenList
-                        .map((token) => token.logoURI)
-                        .flat()
-                        .filter((token) => !!token) as string[]
+                return uniqBy(tokens, (x) => x.address.toLowerCase()).map((token) => {
                     return {
-                        ...tokenList[0],
-                        ...{ address: formatEthereumAddress(tokenList[0].address) },
-                        ...{ logoURI: logoURIs },
+                        ...token,
+                        address: formatEthereumAddress(token.address),
                     }
                 })
             },
diff --git a/packages/web3-providers/src/token-price/index.ts b/packages/web3-providers/src/token-price/index.ts
deleted file mode 100644
index ef955bffc462..000000000000
--- a/packages/web3-providers/src/token-price/index.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import type { CurrencyType } from '@masknet/plugin-infra/web3'
-import { courier } from '../helpers'
-import type { TokenPriceBaseAPI } from '../types'
-
-const URL_BASE = 'https://api.coingecko.com/api/v3'
-
-export class TokenPriceAPI implements TokenPriceBaseAPI.Provider {
-    async getTokenPrices(platform: string, contractAddresses: string[], currency: CurrencyType) {
-        const addressList = contractAddresses.join(',')
-        const requestPath = `${URL_BASE}/simple/token_price/${platform}?contract_addresses=${addressList}&vs_currencies=${currency}`
-        const response = await fetch(courier(requestPath))
-        const prices: TokenPriceBaseAPI.CryptoPrice = await response.json()
-        return prices
-    }
-    async getNativeTokenPrice(tokenIds: string[], currency: CurrencyType) {
-        const requestPath = `${URL_BASE}/simple/price?ids=${tokenIds.join(',')}&vs_currencies=${currency}`
-        const response = await fetch(courier(requestPath))
-        const prices: TokenPriceBaseAPI.CryptoPrice = await response.json()
-        return prices
-    }
-}
diff --git a/packages/web3-providers/src/types.ts b/packages/web3-providers/src/types.ts
index ca204bd3db7e..4599065701f0 100644
--- a/packages/web3-providers/src/types.ts
+++ b/packages/web3-providers/src/types.ts
@@ -1,15 +1,24 @@
-import type { Transaction as Web3Transaction } from 'web3-core'
-import type RSS3 from 'rss3-next'
-import type {
-    ChainId,
-    ERC20TokenDetailed,
-    ERC721ContractDetailed,
-    ERC721TokenDetailed,
-    NativeTokenDetailed,
-} from '@masknet/web3-shared-evm'
-import type { CurrencyType } from '@masknet/plugin-infra/web3'
 import type { Result } from 'ts-results'
+import type RSS3 from 'rss3-next'
+import type { Transaction as Web3Transaction } from 'web3-core'
+import type { api } from '@dimensiondev/mask-wallet-core/proto'
 import type { NextIDAction, NextIDStoragePayload, NextIDPayload, NextIDPlatform } from '@masknet/shared-base'
+import type {
+    Transaction,
+    FungibleAsset,
+    NonFungibleToken,
+    NonFungibleAsset,
+    CurrencyType,
+    Pageable,
+    FungibleToken,
+    OrderSide,
+    NonFungibleTokenCollection,
+    NonFungibleTokenContract,
+    NonFungibleTokenOrder,
+    NonFungibleTokenEvent,
+    GasOptionType,
+    HubOptions,
+} from '@masknet/web3-shared-base'
 
 export namespace ExplorerAPI {
     export type Transaction = Web3Transaction & {
@@ -90,210 +99,86 @@ export namespace RSS3BaseAPI {
 }
 
 export namespace PriceAPI {
-    export interface CryptoPrice {
-        [token: string]: {
-            [key in CurrencyType]?: string
-        }
-    }
-
     export interface Provider {
-        getTokenPrice(
-            tokenId: string,
-            currency: CurrencyType,
-        ): Promise<{
-            [key in CurrencyType]?: string
-        }>
-        getTokensPrice(tokenIds: string[], currency: CurrencyType): Promise<CryptoPrice>
+        getTokenPrice(address: string, currency: CurrencyType): Promise<number>
+        getTokensPrice(listOfAddress: string[], currency: CurrencyType): Promise<Record<string, number>>
     }
 }
 
-export namespace NonFungibleTokenAPI {
-    export enum OrderSide {
-        Buy = 0,
-        Sell = 1,
-    }
-    export interface AssetOwner {
-        address: string
-        profile_img_url?: string
-        user?: {
-            username: string
-        }
-        link: string
-    }
-
-    export interface AssetTrait {
-        trait_type: string
-        value: string
-    }
-
-    export interface AssetToken {
-        image_url?: string
-        eth_price?: string
-        usd_price?: string
-        name: string
-        symbol: string
-        decimals: number
-        address: string
-    }
-
-    export interface AssetOrder {
-        created_time?: string
-        current_price?: string
-        current_bounty?: string
-        maker_account?: AssetOwner
-        taker_account?: AssetOwner
-        payment_token?: string
-        payment_token_contract?: AssetToken
-        fee_recipient_account?: AssetToken
-        cancelled_or_finalized?: boolean
-        marked_invalid?: boolean
-        approved_on_chain: boolean
-        listing_time: number
-        side: number
-        quantity: string
-        expiration_time: number
-        order_hash: string
-    }
-
-    export interface AssetCollection {
-        name: string
-        slug: string
-        editors: string[]
-        hidden: boolean
-        featured: boolean
-        created_date: string
-        description: string
-        image_url: string
-        largeImage_url: string
-        featured_image_url: string
-        stats: object
-        display_data: object
-        payment_tokens: AssetToken[]
-        payout_address?: string
-        trait_stats: AssetTrait
-        external_link?: string
-        wiki_link?: string
-        safelist_request_status: string
-    }
-    export interface AssetEvent {
-        event_type: string
-        event_timestamp: number
-        auction_type: string
-        total_price: string
-        payment_token: {
-            decimals: number
-        }
-    }
-
-    export interface Asset {
-        is_verified: boolean
-        collection?: AssetCollection
-        is_auction: boolean
-        image_url: string
-        asset_contract: { name: string; description: string; schemaName: string } | null
-        current_price: number | null
-        current_symbol: string
-        owner: AssetOwner | null
-        creator: AssetOwner | null
-        token_id: string
-        token_address: string
-        traits: AssetTrait[]
-        safelist_request_status: string
-        description: string
-        name: string
-        collection_name: string
-        animation_url?: string
-        end_time: Date | null
-        order_payment_tokens: Array<ERC20TokenDetailed | NativeTokenDetailed>
-        offer_payment_tokens: Array<ERC20TokenDetailed | NativeTokenDetailed>
-        slug: string | null
-        desktopOrder?: AssetOrder
-        top_ownerships: Array<{
-            owner: AssetOwner
-        }>
-        last_sale: AssetEvent | null
-        response_: any
-    }
-
-    export interface History {
-        id: string
-        accountPair: {
-            from?: {
-                username?: string
-                address?: string
-                imageUrl?: string
-                link: string
-            }
-            to?: {
-                username?: string
-                address?: string
-                imageUrl?: string
-                link: string
-            }
-        }
-        price?: {
-            quantity: string
-            price: string
-            asset?: {
-                id: string
-                decimals: number
-                image_url: string
-                image_original_url: string
-                image_preview_url: string
-                asset_contract: {
-                    symbol: string
-                }
-                permalink: string
-            }
-            paymentToken?: AssetToken
-        }
-
-        eventType: string
-        transactionBlockExplorerLink?: string
-        timestamp: number
-    }
-
-    export interface Collection {
-        name: string
-        image?: string
-        slug: string
-    }
-
-    export interface ContractBalance {
-        contractDetailed: ERC721ContractDetailed
-        balance?: number
+export namespace HistoryAPI {
+    export interface Provider<ChainId, SchemaType> {
+        getTransactions(
+            address: string,
+            options?: HubOptions<ChainId>,
+        ): Promise<Pageable<Transaction<ChainId, SchemaType>>>
     }
+}
 
-    export interface Options {
-        chainId?: ChainId
-        page?: number
-        size?: number
-        pageInfo?: { [key in string]: unknown }
+export namespace GasOptionAPI {
+    export interface Provider<ChainId, GasOption> {
+        getGasOptions(chainId: ChainId): Promise<Record<GasOptionType, GasOption>>
     }
+}
 
-    export interface ProviderPageable<T> {
-        data: T[]
-        hasNextPage: boolean
-        nextPageInfo?: { [key in string]: unknown }
+export namespace FungibleTokenAPI {
+    export interface Provider<ChainId, SchemaType> {
+        getAssets(address: string, options?: HubOptions<ChainId>): Promise<Pageable<FungibleAsset<ChainId, SchemaType>>>
     }
+}
 
-    export interface Provider {
-        getContract?: (address: string, chainId: ChainId) => Promise<ERC721ContractDetailed | undefined>
-        getContractBalance?: (address: string) => Promise<ContractBalance[]>
-        getAsset?: (address: string, tokenId: string, opts?: { chainId?: ChainId }) => Promise<Asset | undefined>
-        getToken?: (address: string, tokenId: string, chainId: ChainId) => Promise<ERC721TokenDetailed | undefined>
-        getTokens?: (from: string, opts: Options) => Promise<ProviderPageable<ERC721TokenDetailed>>
-        getHistory?: (address: string, tokenId: string, opts?: Options) => Promise<History[]>
-        getListings?: (address: string, tokenId: string, opts?: Options) => Promise<AssetOrder[]>
-        getOffers?: (address: string, tokenId: string, opts?: Options) => Promise<AssetOrder[]>
+export namespace NonFungibleTokenAPI {
+    export interface Provider<ChainId, SchemaType> {
+        getAsset?: (
+            address: string,
+            tokenId: string,
+            options?: HubOptions<ChainId>,
+        ) => Promise<NonFungibleAsset<ChainId, SchemaType> | undefined>
+        getAssets?: (address: string) => Promise<Array<NonFungibleAsset<ChainId, SchemaType>>>
+        getHistory?: (
+            address: string,
+            tokenId: string,
+            options?: HubOptions<ChainId>,
+        ) => Promise<Array<NonFungibleTokenEvent<ChainId, SchemaType>>>
+        getListings?: (
+            address: string,
+            tokenId: string,
+            options?: HubOptions<ChainId>,
+        ) => Promise<Array<NonFungibleTokenOrder<ChainId, SchemaType>>>
+        getOffers?: (
+            address: string,
+            tokenId: string,
+            opts?: HubOptions<ChainId>,
+        ) => Promise<Array<NonFungibleTokenOrder<ChainId, SchemaType>>>
         getOrders?: (
             address: string,
             tokenId: string,
-            side: NonFungibleTokenAPI.OrderSide,
-            opts?: Options,
-        ) => Promise<AssetOrder[]>
-        getCollections?: (address: string, opts?: Options) => Promise<ProviderPageable<Collection>>
-        getAssets?: (address: string) => Promise<Asset[] | undefined>
+            side: OrderSide,
+            options?: HubOptions<ChainId>,
+        ) => Promise<Array<NonFungibleTokenOrder<ChainId, SchemaType>>>
+        getToken?: (
+            address: string,
+            tokenId: string,
+            options?: HubOptions<ChainId>,
+        ) => Promise<NonFungibleToken<ChainId, SchemaType> | undefined>
+        getTokens?: (
+            from: string,
+            opts?: HubOptions<ChainId>,
+        ) => Promise<Pageable<NonFungibleToken<ChainId, SchemaType>>>
+        getContract?: (
+            address: string,
+            opts?: HubOptions<ChainId>,
+        ) => Promise<NonFungibleTokenContract<ChainId, SchemaType> | undefined>
+        getContractBalance?: (address: string) => Promise<number>
+        getCollections?: (
+            address: string,
+            options?: HubOptions<ChainId>,
+        ) => Promise<Pageable<NonFungibleTokenCollection<ChainId> | undefined>>
+    }
+}
+
+export namespace RiskWarningBaseAPI {
+    export interface Provider {
+        approve(address: string, pluginID?: string): Promise<void>
     }
 }
 
@@ -422,17 +307,17 @@ export namespace SecurityAPI {
         is_airdrop_scam?: '0' | '1'
     }
 
-    export interface SupportedChain {
-        id: ChainId
+    export interface SupportedChain<ChainId> {
+        chainId: ChainId
         name: string
     }
 
-    export interface Provider {
+    export interface Provider<ChainId> {
         getTokenSecurity(
-            chainId: number,
+            chainId: ChainId,
             listOfAddress: string[],
         ): Promise<Record<string, ContractSecurity & TokenSecurity & TradingSecurity> | void>
-        getSupportedChain(): Promise<SupportedChain[]>
+        getSupportedChain(): Promise<Array<SupportedChain<ChainId>>>
     }
 }
 
@@ -523,21 +408,21 @@ export namespace InstagramBaseAPI {
 }
 
 export namespace TokenListBaseAPI {
-    export interface Token {
+    export interface Token<ChainId> {
+        chainId: ChainId
         address: string
-        chainId: number
         name: string
         symbol: string
         decimals: number
         logoURI?: string
     }
 
-    export interface TokenList {
+    export interface TokenList<ChainId> {
         keywords: string[]
         logoURI: string
         name: string
         timestamp: string
-        tokens: Token[]
+        tokens: Array<Token<ChainId>>
         version: {
             major: number
             minor: number
@@ -545,27 +430,26 @@ export namespace TokenListBaseAPI {
         }
     }
 
-    export interface TokenObject {
-        tokens: Record<string, Token>
+    export interface TokenObject<ChainId> {
+        tokens: Record<string, Token<ChainId>>
     }
 
-    export interface Provider {
-        fetchERC20TokensFromTokenLists: (urls: string[], chainId: ChainId) => Promise<ERC20TokenDetailed[]>
+    export interface Provider<ChainId, SchemaType> {
+        fetchFungibleTokensFromTokenLists: (
+            chainId: ChainId,
+            urls: string[],
+        ) => Promise<Array<FungibleToken<ChainId, SchemaType>>>
     }
 }
 
-export namespace TokenPriceBaseAPI {
-    export interface PriceRecord {
-        [currency: string]: number
-    }
+export namespace MaskBaseAPI {
+    export type Input = { id: number; data: api.IMWRequest }
+    export type Output = { id: number; response: api.MWResponse }
 
-    /** Base on response of coingecko's token price API */
-    export interface CryptoPrice {
-        [token: string]: PriceRecord
-    }
+    export type Request = InstanceType<typeof api.MWRequest>
+    export type Response = InstanceType<typeof api.MWResponse>
 
-    export interface Provider {
-        getTokenPrices: (platform: string, contractAddresses: string[], currency: CurrencyType) => Promise<CryptoPrice>
-        getNativeTokenPrice: (tokenIds: string[], currency: CurrencyType) => Promise<CryptoPrice>
-    }
+    export type StoredKeyInfo = api.IStoredKeyInfo
+
+    export interface Provider {}
 }
diff --git a/packages/web3-providers/src/zerion/format.ts b/packages/web3-providers/src/zerion/format.ts
index 0b3cf92e4e25..ca77b158043e 100644
--- a/packages/web3-providers/src/zerion/format.ts
+++ b/packages/web3-providers/src/zerion/format.ts
@@ -1,26 +1,34 @@
-import { leftShift, multipliedBy } from '@masknet/web3-shared-base'
+import BigNumber from 'bignumber.js'
 import {
-    ChainId,
     createLookupTableResolver,
-    getChainIdFromNetworkType,
+    FungibleAsset,
+    leftShift,
+    multipliedBy,
+    TokenType,
+    Transaction,
+} from '@masknet/web3-shared-base'
+import {
+    ChainId,
+    NetworkType,
     getTokenConstants,
     getZerionConstants,
-    NetworkType,
+    SchemaType,
+    networkResolver,
+    formatEthereumAddress,
 } from '@masknet/web3-shared-evm'
-import BigNumber from 'bignumber.js'
-import type {
+import {
     SocketRequestAssetScope,
     ZerionAddressAsset,
     ZerionAddressCovalentAsset,
     ZerionAsset,
     ZerionCovalentAsset,
+    ZerionRBDTransactionType,
+    ZerionTransactionItem,
+    ZerionTransactionStatus,
 } from './type'
-import { type Web3Plugin, TokenType } from '@masknet/plugin-infra/web3'
-
-type Asset = Web3Plugin.Asset<Web3Plugin.FungibleToken>
 
 export function resolveZerionAssetsScopeName(networkType: NetworkType) {
-    return getZerionConstants(getChainIdFromNetworkType(networkType)).ASSETS_SCOPE_NAME ?? ''
+    return getZerionConstants(networkResolver.networkChainId(networkType)).ASSETS_SCOPE_NAME ?? ''
 }
 
 export const resolveChainByScope = createLookupTableResolver<
@@ -50,30 +58,25 @@ export const resolveChainByScope = createLookupTableResolver<
 )
 
 export function formatAssets(
+    chainId: ChainId,
     data: ZerionAddressAsset[] | ZerionAddressCovalentAsset[],
-    scope: SocketRequestAssetScope,
-) {
+): Array<FungibleAsset<ChainId, SchemaType>> {
     return data.map(({ asset, quantity }) => {
         const balance = leftShift(quantity, asset.decimals).toNumber()
         const value = (asset as ZerionAsset).price?.value ?? (asset as ZerionCovalentAsset).value ?? 0
         const isNativeToken = (symbol: string) => ['ETH', 'BNB', 'MATIC', 'ARETH', 'AETH', 'ONE'].includes(symbol)
-        const address = isNativeToken(asset.symbol) ? getTokenConstants().NATIVE_TOKEN_ADDRESS : asset.asset_code
-        const chainId = resolveChainByScope(scope).chainId
+        const address = isNativeToken(asset.symbol) ? getTokenConstants().NATIVE_TOKEN_ADDRESS ?? '' : asset.asset_code
 
         return {
             id: address,
             chainId,
-            token: {
-                id: address,
-                name: asset.name,
-                symbol: asset.symbol,
-                decimals: asset.decimals,
-                address,
-                chainId,
-                type: TokenType.Fungible,
-                logoURI: asset.icon_url,
-            },
-            chain: resolveChainByScope(scope).chain,
+            type: TokenType.Fungible,
+            schema: SchemaType.ERC20,
+            name: asset.name ?? 'Unknown Token',
+            symbol: asset.symbol,
+            decimals: asset.decimals,
+            address: formatEthereumAddress(address),
+            logoURI: asset.icon_url,
             balance: quantity,
             price: {
                 usd: new BigNumber(value).toString(),
@@ -81,7 +84,48 @@ export function formatAssets(
             value: {
                 usd: multipliedBy(balance, value).toString(),
             },
-            logoURI: asset.icon_url,
         }
-    }) as Asset[]
+    })
+}
+
+export function formatTransactions(
+    chainId: ChainId,
+    data: ZerionTransactionItem[],
+): Array<Transaction<ChainId, SchemaType>> {
+    return data
+        .filter(({ type }) => type !== ZerionRBDTransactionType.AUTHORIZE)
+        .map((transaction) => {
+            const ethGasFee = leftShift(transaction.fee?.value ?? 0, 18).toString()
+            const usdGasFee = multipliedBy(ethGasFee, transaction.fee?.price ?? 0).toString()
+
+            return {
+                id: transaction.hash,
+                type: transaction.type,
+                filterType: transaction.type,
+                from: transaction.address_from ?? '',
+                to: transaction.address_to ?? '',
+                timestamp: transaction.mined_at,
+                status: transaction.status === ZerionTransactionStatus.FAILED ? 0 : 1,
+                tokens:
+                    transaction.changes?.map(({ asset, direction, value }) => {
+                        return {
+                            id: asset.asset_code,
+                            // TODO: distinguish NFT
+                            type: TokenType.Fungible,
+                            schema: SchemaType.ERC20,
+                            chainId,
+                            name: asset.name,
+                            symbol: asset.symbol,
+                            address: asset.asset_code,
+                            direction,
+                            amount: leftShift(value, asset.decimals).toString(),
+                            logoURI: asset.icon_url,
+                        }
+                    }) ?? [],
+                fee: {
+                    eth: ethGasFee,
+                    usd: usdGasFee,
+                },
+            }
+        })
 }
diff --git a/packages/web3-providers/src/zerion/index.ts b/packages/web3-providers/src/zerion/index.ts
index d4e46687f6a0..ab24d388606e 100644
--- a/packages/web3-providers/src/zerion/index.ts
+++ b/packages/web3-providers/src/zerion/index.ts
@@ -1,4 +1,8 @@
 import io from 'socket.io-client'
+import { values } from 'lodash-unified'
+import { getEnumAsArray } from '@dimensiondev/kit'
+import type { FungibleAsset, Pageable, Transaction, HubOptions } from '@masknet/web3-shared-base'
+import { ChainId, getZerionConstants, SchemaType } from '@masknet/web3-shared-evm'
 import type {
     SocketRequestBody,
     SocketNameSpace,
@@ -7,12 +11,9 @@ import type {
     ZerionAssetResponseBody,
     ZerionAddressAsset,
     ZerionAddressCovalentAsset,
-    SocketRequestAssetScope,
 } from './type'
-import { values } from 'lodash-unified'
-import { getChainIdFromNetworkType, getZerionConstants, NetworkType } from '@masknet/web3-shared-evm'
-import { formatAssets } from './format'
-import type { Web3Plugin } from '@masknet/plugin-infra/web3'
+import { formatAssets, formatTransactions } from './format'
+import type { FungibleTokenAPI, HistoryAPI } from '../types'
 
 const ZERION_API = 'wss://api-v4.zerion.io'
 // cspell:disable-next-line
@@ -20,8 +21,8 @@ const ZERION_TOKEN = 'Mask.yEUEfDnoxgLBwNEcYPVussxxjdrGwapj'
 
 let socket: SocketIOClient.Socket | null = null
 
-export function resolveZerionAssetsScopeName(networkType: NetworkType) {
-    return getZerionConstants(getChainIdFromNetworkType(networkType)).ASSETS_SCOPE_NAME ?? ''
+export function resolveZerionAssetsScopeName(chainId: ChainId) {
+    return getZerionConstants(chainId).ASSETS_SCOPE_NAME ?? ''
 }
 
 function createSocket() {
@@ -62,7 +63,7 @@ function subscribeFromZerion(socketNamespace: SocketNameSpace, requestBody: Sock
     })
 }
 
-export async function getTransactionListFromZerion(address: string, scope: string, page?: number, size = 30) {
+async function getAssetsList(address: string, scope: string) {
     return (await subscribeFromZerion(
         {
             namespace: 'address',
@@ -73,15 +74,12 @@ export async function getTransactionListFromZerion(address: string, scope: strin
             payload: {
                 address,
                 currency: 'usd',
-                transactions_limit: size,
-                transactions_offset: (page ?? 0) * size,
-                transactions_search_query: '',
             },
         },
-    )) as ZerionTransactionResponseBody
+    )) as ZerionAssetResponseBody
 }
 
-export async function getAssetsList(address: string, scope: string) {
+async function getTransactionList(address: string, scope: string, page?: number, size = 30) {
     return (await subscribeFromZerion(
         {
             namespace: 'address',
@@ -92,36 +90,75 @@ export async function getAssetsList(address: string, scope: string) {
             payload: {
                 address,
                 currency: 'usd',
+                transactions_limit: size,
+                transactions_offset: (page ?? 0) * size,
+                transactions_search_query: '',
             },
         },
-    )) as ZerionAssetResponseBody
+    )) as ZerionTransactionResponseBody
 }
 
 const filterAssetType = ['compound', 'trash', 'uniswap', 'uniswap-v2', 'nft']
 
-type Asset = Web3Plugin.Asset<Web3Plugin.FungibleToken>
-
-export async function getAssetListByZerion(address: string) {
-    let result: Asset[] = []
-    const scopes = ['assets', 'bsc-assets', 'polygon-assets', 'arbitrum-assets']
-    for (const scope of scopes) {
-        const { meta, payload } = await getAssetsList(address, scope)
-        if (meta.status !== 'ok') throw new Error('Fail to load assets.')
-
-        const assets = Object.entries(payload).map(([key, value]) => {
-            if (key === 'assets') {
-                const assetsList = (values(value) as ZerionAddressAsset[]).filter(
-                    ({ asset }) =>
-                        asset.is_displayable && !filterAssetType.some((type) => type === asset.type) && asset.icon_url,
-                )
-                return formatAssets(assetsList, key)
-            }
+export class ZerionAPI
+    implements FungibleTokenAPI.Provider<ChainId, SchemaType>, HistoryAPI.Provider<ChainId, SchemaType>
+{
+    async getAssets(address: string, options?: HubOptions<ChainId>) {
+        let result: Array<FungibleAsset<ChainId, SchemaType>> = []
+        const pairs = getEnumAsArray(ChainId).map(
+            (x) => [x.value, getZerionConstants(x.value).ASSETS_SCOPE_NAME] as const,
+        )
+        for (const [chainId, scope] of pairs) {
+            if (!scope) continue
 
-            return formatAssets(values(value) as ZerionAddressCovalentAsset[], key as SocketRequestAssetScope)
-        })
+            const { meta, payload } = await getAssetsList(address, scope)
+            if (meta.status !== 'ok') throw new Error('Fail to load assets.')
+
+            const assets = Object.entries(payload).map(([key, value]) => {
+                if (key === 'assets') {
+                    const assetsList = (values(value) as ZerionAddressAsset[]).filter(
+                        ({ asset }) =>
+                            asset.is_displayable &&
+                            !filterAssetType.some((type) => type === asset.type) &&
+                            asset.icon_url,
+                    )
+                    return formatAssets(chainId, assetsList)
+                }
+                return formatAssets(chainId, values(value) as ZerionAddressCovalentAsset[])
+            })
 
-        result = [...result, ...assets.flat()]
+            result = [...result, ...assets.flat()]
+        }
+
+        return {
+            currentPage: 0,
+            data: result,
+            hasNextPage: false,
+        }
     }
 
-    return result
+    async getTransactions(
+        address: string,
+        options?: HubOptions<ChainId>,
+    ): Promise<Pageable<Transaction<ChainId, SchemaType>>> {
+        let result: Array<Transaction<ChainId, SchemaType>> = []
+        // xdai-assets is not support
+        const pairs = getEnumAsArray(ChainId).map(
+            (x) => [x.value, getZerionConstants(x.value).TRANSACTIONS_SCOPE_NAME] as const,
+        )
+        for (const [chainId, scope] of pairs) {
+            if (!scope) continue
+
+            const { meta, payload } = await getTransactionList(address, scope)
+            if (meta.status !== 'ok') throw new Error('Fail to load transactions.')
+
+            result = [...result, ...formatTransactions(chainId, payload.transactions)]
+        }
+
+        return {
+            currentPage: 0,
+            data: result,
+            hasNextPage: false,
+        }
+    }
 }
diff --git a/packages/web3-providers/src/zora/index.ts b/packages/web3-providers/src/zora/index.ts
index 30bf9055c6eb..9e4c430f11f1 100644
--- a/packages/web3-providers/src/zora/index.ts
+++ b/packages/web3-providers/src/zora/index.ts
@@ -1,363 +1,337 @@
-import { GraphQLClient } from 'graphql-request'
-import { first } from 'lodash-unified'
-import {
-    formatWeiToEther,
-    ChainId,
-    FungibleTokenDetailed,
-    ERC721TokenDetailed,
-    EthereumTokenType,
-    resolveIPFSLinkFromURL,
-} from '@masknet/web3-shared-evm'
+// import { getAssetQuery, getTokenHistoryQuery, getBidsQuery, getAsksQuery } from './queries'
+// import { ZORA_MAINNET_GRAPHQL_URL } from './constants'
 
-import { NonFungibleTokenAPI } from '..'
-import type { ZoraToken, ZoraHistory, ZoraBid, ZoraAsk } from './types'
-import { getAssetQuery, getTokenHistoryQuery, getBidsQuery, getAsksQuery } from './queries'
-import { ZORA_MAINNET_GRAPHQL_URL } from './constants'
+// function createNFTAsset(asset: ZoraToken): NonFungibleAsset<ChainId, SchemaType> {
+//     const image_url =
+//         asset.metadata.json.image ?? asset.metadata.json.animation_url ?? asset.metadata.json.image_url ?? ''
+//     const animation_url = asset.metadata.json.image ?? asset.metadata.json.animation_url ?? ''
+//     return {
+//         is_verified: false,
+//         is_auction: asset.currentAuction !== null,
+//         image_url: resolveIPFSLinkFromURL(image_url),
+//         asset_contract: {
+//             name: asset.tokenContract.name,
+//             description: '',
+//             schemaName: '',
+//         },
+//         current_price: asset.v3Ask ? formatWeiToEther(asset.v3Ask.askPrice).toNumber() : null,
+//         current_symbol: asset.symbol ?? 'ETH',
+//         owner: asset.owner
+//             ? {
+//                   address: asset.owner,
+//                   profile_img_url: '',
+//                   user: { username: asset.owner },
+//                   link: `https://zora.co/${asset?.owner}`,
+//               }
+//             : null,
+//         creator: asset.metadata.json.created_by
+//             ? {
+//                   address: asset.metadata.json.created_by,
+//                   profile_img_url: '',
+//                   user: { username: asset.metadata.json.created_by },
+//                   link: `https://zora.co/${asset?.metadata.json.created_by}`,
+//               }
+//             : null,
+//         token_id: asset.tokenId,
+//         token_address: asset.address,
+//         traits: asset.metadata.json.attributes,
+//         safelist_request_status: '',
+//         description: asset.metadata.json.description,
+//         name: asset.name ?? asset.metadata.json.name,
+//         collection_name: '',
+//         animation_url: resolveIPFSLinkFromURL(animation_url),
+//         end_time: asset.currentAuction ? new Date(asset.currentAuction.expiresAt) : null,
+//         order_payment_tokens: [] as FungibleTokenDetailed[],
+//         offer_payment_tokens: [] as FungibleTokenDetailed[],
+//         slug: '',
+//         top_ownerships: asset.owner
+//             ? [
+//                   {
+//                       owner: {
+//                           address: asset.owner,
+//                           profile_img_url: '',
+//                           user: { username: asset.owner },
+//                           link: `https://zora.co/${asset.owner}`,
+//                       },
+//                   },
+//               ]
+//             : [],
+//         response_: asset,
+//         last_sale: null,
+//     }
+// }
 
-function createNFTAsset(asset: ZoraToken): NonFungibleTokenAPI.Asset {
-    const image_url =
-        asset.metadata.json.image ?? asset.metadata.json.animation_url ?? asset.metadata.json.image_url ?? ''
-    const animation_url = asset.metadata.json.image ?? asset.metadata.json.animation_url ?? ''
-    return {
-        is_verified: false,
-        is_auction: asset.currentAuction !== null,
-        image_url: resolveIPFSLinkFromURL(image_url),
-        asset_contract: {
-            name: asset.tokenContract.name,
-            description: '',
-            schemaName: '',
-        },
-        current_price: asset.v3Ask ? formatWeiToEther(asset.v3Ask.askPrice).toNumber() : null,
-        current_symbol: asset.symbol ?? 'ETH',
-        owner: asset.owner
-            ? {
-                  address: asset.owner,
-                  profile_img_url: '',
-                  user: { username: asset.owner },
-                  link: `https://zora.co/${asset?.owner}`,
-              }
-            : null,
-        creator: asset.metadata.json.created_by
-            ? {
-                  address: asset.metadata.json.created_by,
-                  profile_img_url: '',
-                  user: { username: asset.metadata.json.created_by },
-                  link: `https://zora.co/${asset?.metadata.json.created_by}`,
-              }
-            : null,
-        token_id: asset.tokenId,
-        token_address: asset.address,
-        traits: asset.metadata.json.attributes,
-        safelist_request_status: '',
-        description: asset.metadata.json.description,
-        name: asset.name ?? asset.metadata.json.name,
-        collection_name: '',
-        animation_url: resolveIPFSLinkFromURL(animation_url),
-        end_time: asset.currentAuction ? new Date(asset.currentAuction.expiresAt) : null,
-        order_payment_tokens: [] as FungibleTokenDetailed[],
-        offer_payment_tokens: [] as FungibleTokenDetailed[],
-        slug: '',
-        top_ownerships: asset.owner
-            ? [
-                  {
-                      owner: {
-                          address: asset.owner,
-                          profile_img_url: '',
-                          user: { username: asset.owner },
-                          link: `https://zora.co/${asset.owner}`,
-                      },
-                  },
-              ]
-            : [],
-        response_: asset,
-        last_sale: null,
-    }
-}
-
-function createERC721TokenFromAsset(tokenAddress: string, tokenId: string, asset?: ZoraToken): ERC721TokenDetailed {
-    return {
-        contractDetailed: {
-            type: EthereumTokenType.ERC721,
-            chainId: ChainId.Mainnet,
-            address: tokenAddress,
-            name: asset?.tokenContract.name ?? '',
-            symbol: '',
-        },
-        info: {
-            name: asset?.metadata.json.name ?? '',
-            description: asset?.metadata.json.description ?? '',
-            mediaUrl: asset?.metadata.json.animation_url ?? asset?.metadata.json.image_url ?? '',
-            owner: asset?.owner,
-        },
-        tokenId,
-    }
-}
+// function createERC721TokenFromAsset(tokenAddress: string, tokenId: string, asset?: ZoraToken): ERC721TokenDetailed {
+//     return {
+//         contractDetailed: {
+//             type: EthereumTokenType.ERC721,
+//             chainId: ChainId.Mainnet,
+//             address: tokenAddress,
+//             name: asset?.tokenContract.name ?? '',
+//             symbol: '',
+//         },
+//         info: {
+//             name: asset?.metadata.json.name ?? '',
+//             description: asset?.metadata.json.description ?? '',
+//             mediaUrl: asset?.metadata.json.animation_url ?? asset?.metadata.json.image_url ?? '',
+//             owner: asset?.owner,
+//         },
+//         tokenId,
+//     }
+// }
 
 export class ZoraAPI {
-    private client
-    constructor() {
-        this.client = new GraphQLClient(ZORA_MAINNET_GRAPHQL_URL)
-    }
-
-    async getAsset(address: string, tokenId: string) {
-        const variables = {
-            address,
-            tokenId,
-        }
-        const assetData = await this.client.request(getAssetQuery, variables)
-        if (!assetData) return
-        return createNFTAsset(assetData.Token[0])
-    }
-
-    async getToken(address: string, tokenId: string) {
-        const variables = {
-            address,
-            tokenId,
-        }
-        const asset = await this.client.request(getAssetQuery, variables)
-        if (!asset) return
-        return createERC721TokenFromAsset(address, tokenId, asset.Token[0])
-    }
-
-    async getHistory(address: string, tokenId: string): Promise<NonFungibleTokenAPI.History[]> {
-        const variables = {
-            address,
-            tokenId,
-        }
-
-        const nftEventHistory = await this.client.request(getTokenHistoryQuery, variables)
-
-        const history: NonFungibleTokenAPI.History[] = nftEventHistory.Token[0].transferEvents.map(
-            (event: ZoraHistory): NonFungibleTokenAPI.History | undefined => {
-                if (event.transaction.mediaMints?.length !== 0) {
-                    const mint = first(event.transaction.mediaMints)
-                    return {
-                        id: mint?.id || '',
-                        eventType: 'mint',
-                        timestamp: new Date(`${event.blockTimestamp}Z`).getTime(),
-                        price: {
-                            quantity: '0',
-                            price: '0',
-                            paymentToken: {
-                                name: 'Ether',
-                                symbol: 'ETH',
-                                decimals: 18,
-                                address: '0x0000000000000000000000000000000000000000',
-                            },
-                        },
-                        accountPair: {
-                            from: {
-                                username: '',
-                                address: mint?.address,
-                                imageUrl: '',
-                                link: `https://zora.co/${mint?.address}`,
-                            },
-                            to: {
-                                username: '',
-                                address: mint?.creator,
-                                imageUrl: '',
-                                link: `https://zora.co/${mint?.creator}`,
-                            },
-                        },
-                    }
-                }
-                if (event.transaction.auctionCreatedEvents?.length !== 0) {
-                    const list = first(event.transaction.auctionCreatedEvents)
-                    return {
-                        id: list?.id || '',
-                        eventType: 'List',
-                        timestamp: new Date(`${event.blockTimestamp}Z`).getTime(),
-                        price: {
-                            quantity: list?.reservePrice ? formatWeiToEther(list?.reservePrice).toFixed(4) : '',
-                            price: '1',
-                            paymentToken: {
-                                name: 'Ether',
-                                symbol: 'ETH',
-                                decimals: 18,
-                                address: list?.auctionCurrency || '',
-                            },
-                        },
-                        accountPair: {
-                            from: {
-                                username: list?.tokenOwner,
-                                address: list?.tokenOwner,
-                                imageUrl: '',
-                                link: `https://zora.co/${list?.tokenOwner}`,
-                            },
-                            to: {
-                                username: '',
-                                address: '',
-                                imageUrl: '',
-                                link: '',
-                            },
-                        },
-                    }
-                }
-                if (event.transaction.marketBidEvents?.length !== 0) {
-                    const bid = first(event.transaction.marketBidEvents)
-                    return {
-                        id: bid?.id || '',
-                        eventType: 'Bid',
-                        timestamp: new Date(`${event.blockTimestamp}Z`).getTime(),
-                        price: {
-                            quantity: bid?.amount ? formatWeiToEther(bid?.amount).toFixed(4) : '',
-                            price: '1',
-                            paymentToken: {
-                                name: 'Ether',
-                                symbol: 'ETH',
-                                decimals: 18,
-                                address: bid?.currencyAddress || '',
-                            },
-                        },
-                        accountPair: {
-                            from: {
-                                username: bid?.bidder,
-                                address: bid?.bidder,
-                                imageUrl: '',
-                                link: `https://zora.co/${bid?.bidder}`,
-                            },
-                            to: {
-                                username: bid?.recipient,
-                                address: bid?.recipient,
-                                imageUrl: '',
-                                link: `https://zora.co/${bid?.recipient}`,
-                            },
-                        },
-                    }
-                }
-                if (event.transaction.auctionEndedEvents?.length !== 0) {
-                    const buy = first(event.transaction.auctionEndedEvents)
-                    return {
-                        id: buy?.id || '',
-                        eventType: 'Buy',
-                        timestamp: new Date(`${event.blockTimestamp}Z`).getTime(),
-                        price: {
-                            quantity: buy?.auction.lastBidAmount
-                                ? formatWeiToEther(buy?.auction.lastBidAmount).toFixed(4)
-                                : '',
-                            price: '1',
-                            paymentToken: {
-                                name: 'Ether',
-                                symbol: 'ETH',
-                                decimals: 18,
-                                address: buy?.auction.auctionCurrency || '',
-                            },
-                        },
-                        accountPair: {
-                            from: {
-                                username: buy?.tokenOwner,
-                                address: buy?.tokenOwner,
-                                imageUrl: '',
-                                link: `https://zora.co/${buy?.tokenOwner}`,
-                            },
-                            to: {
-                                username: buy?.winner,
-                                address: buy?.winner,
-                                imageUrl: '',
-                                link: `https://zora.co/${buy?.winner}`,
-                            },
-                        },
-                    }
-                }
-                return
-            },
-        )
-
-        return history.filter((event) => event !== undefined)
-    }
-    async getOffers(tokenAddress: string, tokenId: string): Promise<NonFungibleTokenAPI.AssetOrder[]> {
-        const variables = {
-            tokenAddress,
-            tokenId,
-        }
-        const nftBids = await this.client.request(getBidsQuery, variables)
-
-        const offers: NonFungibleTokenAPI.AssetOrder[] = nftBids.Token[0].transferEvents.map(
-            (event: ZoraBid): NonFungibleTokenAPI.AssetOrder | undefined => {
-                if (event.transaction.marketBidEvents?.length !== 0) {
-                    const bid = first(event.transaction.marketBidEvents)
-                    return {
-                        created_time: new Date(`${bid?.blockTimestamp}Z`).getTime().toString(),
-                        current_price: bid?.amount,
-                        payment_token: bid?.currencyAddress || '',
-                        payment_token_contract: {
-                            name: 'Ether',
-                            symbol: 'ETH',
-                            decimals: 18,
-                            address: bid?.currencyAddress || '',
-                        },
-                        listing_time: 0,
-                        side: NonFungibleTokenAPI.OrderSide.Buy,
-                        quantity: '1',
-                        expiration_time: 0,
-                        order_hash: bid?.transactionHash || '',
-                        approved_on_chain: false,
-                        maker_account: {
-                            user: { username: bid?.recipient || '' },
-                            address: bid?.recipient || '',
-                            profile_img_url: '',
-                            link: `https://zora.co/${bid?.recipient}`,
-                        },
-                    }
-                }
-                return
-            },
-        )
-
-        return offers.filter((offer) => offer !== undefined)
-    }
-
-    async getListings(tokenAddress: string, tokenId: string): Promise<NonFungibleTokenAPI.AssetOrder[]> {
-        const variables = {
-            tokenAddress,
-            tokenId,
-        }
-
-        const nftAsks = await this.client.request(getAsksQuery, variables)
-
-        const orders: NonFungibleTokenAPI.AssetOrder[] = nftAsks.Token[0].transferEvents.map(
-            (event: ZoraAsk): NonFungibleTokenAPI.AssetOrder | undefined => {
-                if (event.transaction.auctionCreatedEvents?.length !== 0) {
-                    const ask = first(event.transaction.auctionCreatedEvents)
-                    return {
-                        created_time: new Date(`${ask?.blockTimestamp}Z`).getTime().toString(),
-                        approved_on_chain: false,
-                        current_price: formatWeiToEther(ask?.reservePrice || 0).toString(),
-                        payment_token: ask?.auctionCurrency,
-                        payment_token_contract: {
-                            name: 'Ether',
-                            symbol: 'ETH',
-                            decimals: 18,
-                            address: ask?.auctionCurrency || '',
-                        },
-                        listing_time: 0,
-                        side: NonFungibleTokenAPI.OrderSide.Sell,
-                        quantity: '1',
-                        expiration_time: 0,
-                        order_hash: ask?.transactionHash || '',
-                        maker_account: {
-                            user: { username: ask?.tokenOwner || '' },
-                            address: ask?.tokenOwner || '',
-                            profile_img_url: '',
-                            link: `https://zora.co/${ask?.tokenOwner}`,
-                        },
-                    }
-                }
-                return
-            },
-        )
-
-        return orders.filter((order) => order !== undefined)
-    }
-
-    async getOrders(tokenAddress: string, tokenId: string, side: NonFungibleTokenAPI.OrderSide) {
-        switch (side) {
-            case NonFungibleTokenAPI.OrderSide.Buy:
-                return this.getOffers(tokenAddress, tokenId)
-            case NonFungibleTokenAPI.OrderSide.Sell:
-                return this.getListings(tokenAddress, tokenId)
-            default:
-                return []
-        }
-    }
+    // private client
+    // constructor() {
+    //     this.client = new GraphQLClient(ZORA_MAINNET_GRAPHQL_URL)
+    // }
+    // async getAsset(address: string, tokenId: string) {
+    //     const variables = {
+    //         address,
+    //         tokenId,
+    //     }
+    //     const assetData = await this.client.request(getAssetQuery, variables)
+    //     if (!assetData) return
+    //     return createNFTAsset(assetData.Token[0])
+    // }
+    // async getToken(address: string, tokenId: string) {
+    //     const variables = {
+    //         address,
+    //         tokenId,
+    //     }
+    //     const asset = await this.client.request(getAssetQuery, variables)
+    //     if (!asset) return
+    //     return createERC721TokenFromAsset(address, tokenId, asset.Token[0])
+    // }
+    // async getHistory(address: string, tokenId: string): Promise<NonFungibleTokenAPI.History[]> {
+    //     const variables = {
+    //         address,
+    //         tokenId,
+    //     }
+    //     const nftEventHistory = await this.client.request(getTokenHistoryQuery, variables)
+    //     const history: NonFungibleTokenAPI.History[] = nftEventHistory.Token[0].transferEvents.map(
+    //         (event: ZoraHistory): NonFungibleTokenAPI.History | undefined => {
+    //             if (event.transaction.mediaMints?.length !== 0) {
+    //                 const mint = first(event.transaction.mediaMints)
+    //                 return {
+    //                     id: mint?.id || '',
+    //                     eventType: 'mint',
+    //                     timestamp: new Date(`${event.blockTimestamp}Z`).getTime(),
+    //                     price: {
+    //                         quantity: '0',
+    //                         price: '0',
+    //                         paymentToken: {
+    //                             name: 'Ether',
+    //                             symbol: 'ETH',
+    //                             decimals: 18,
+    //                             address: '0x0000000000000000000000000000000000000000',
+    //                         },
+    //                     },
+    //                     accountPair: {
+    //                         from: {
+    //                             username: '',
+    //                             address: mint?.address,
+    //                             imageUrl: '',
+    //                             link: `https://zora.co/${mint?.address}`,
+    //                         },
+    //                         to: {
+    //                             username: '',
+    //                             address: mint?.creator,
+    //                             imageUrl: '',
+    //                             link: `https://zora.co/${mint?.creator}`,
+    //                         },
+    //                     },
+    //                 }
+    //             }
+    //             if (event.transaction.auctionCreatedEvents?.length !== 0) {
+    //                 const list = first(event.transaction.auctionCreatedEvents)
+    //                 return {
+    //                     id: list?.id || '',
+    //                     eventType: 'List',
+    //                     timestamp: new Date(`${event.blockTimestamp}Z`).getTime(),
+    //                     price: {
+    //                         quantity: list?.reservePrice ? formatWeiToEther(list?.reservePrice).toFixed(4) : '',
+    //                         price: '1',
+    //                         paymentToken: {
+    //                             name: 'Ether',
+    //                             symbol: 'ETH',
+    //                             decimals: 18,
+    //                             address: list?.auctionCurrency || '',
+    //                         },
+    //                     },
+    //                     accountPair: {
+    //                         from: {
+    //                             username: list?.tokenOwner,
+    //                             address: list?.tokenOwner,
+    //                             imageUrl: '',
+    //                             link: `https://zora.co/${list?.tokenOwner}`,
+    //                         },
+    //                         to: {
+    //                             username: '',
+    //                             address: '',
+    //                             imageUrl: '',
+    //                             link: '',
+    //                         },
+    //                     },
+    //                 }
+    //             }
+    //             if (event.transaction.marketBidEvents?.length !== 0) {
+    //                 const bid = first(event.transaction.marketBidEvents)
+    //                 return {
+    //                     id: bid?.id || '',
+    //                     eventType: 'Bid',
+    //                     timestamp: new Date(`${event.blockTimestamp}Z`).getTime(),
+    //                     price: {
+    //                         quantity: bid?.amount ? formatWeiToEther(bid?.amount).toFixed(4) : '',
+    //                         price: '1',
+    //                         paymentToken: {
+    //                             name: 'Ether',
+    //                             symbol: 'ETH',
+    //                             decimals: 18,
+    //                             address: bid?.currencyAddress || '',
+    //                         },
+    //                     },
+    //                     accountPair: {
+    //                         from: {
+    //                             username: bid?.bidder,
+    //                             address: bid?.bidder,
+    //                             imageUrl: '',
+    //                             link: `https://zora.co/${bid?.bidder}`,
+    //                         },
+    //                         to: {
+    //                             username: bid?.recipient,
+    //                             address: bid?.recipient,
+    //                             imageUrl: '',
+    //                             link: `https://zora.co/${bid?.recipient}`,
+    //                         },
+    //                     },
+    //                 }
+    //             }
+    //             if (event.transaction.auctionEndedEvents?.length !== 0) {
+    //                 const buy = first(event.transaction.auctionEndedEvents)
+    //                 return {
+    //                     id: buy?.id || '',
+    //                     eventType: 'Buy',
+    //                     timestamp: new Date(`${event.blockTimestamp}Z`).getTime(),
+    //                     price: {
+    //                         quantity: buy?.auction.lastBidAmount
+    //                             ? formatWeiToEther(buy?.auction.lastBidAmount).toFixed(4)
+    //                             : '',
+    //                         price: '1',
+    //                         paymentToken: {
+    //                             name: 'Ether',
+    //                             symbol: 'ETH',
+    //                             decimals: 18,
+    //                             address: buy?.auction.auctionCurrency || '',
+    //                         },
+    //                     },
+    //                     accountPair: {
+    //                         from: {
+    //                             username: buy?.tokenOwner,
+    //                             address: buy?.tokenOwner,
+    //                             imageUrl: '',
+    //                             link: `https://zora.co/${buy?.tokenOwner}`,
+    //                         },
+    //                         to: {
+    //                             username: buy?.winner,
+    //                             address: buy?.winner,
+    //                             imageUrl: '',
+    //                             link: `https://zora.co/${buy?.winner}`,
+    //                         },
+    //                     },
+    //                 }
+    //             }
+    //             return
+    //         },
+    //     )
+    //     return history.filter((event) => event !== undefined)
+    // }
+    // async getOffers(tokenAddress: string, tokenId: string): Promise<NonFungibleTokenAPI.AssetOrder[]> {
+    //     const variables = {
+    //         tokenAddress,
+    //         tokenId,
+    //     }
+    //     const nftBids = await this.client.request(getBidsQuery, variables)
+    //     const offers: NonFungibleTokenAPI.AssetOrder[] = nftBids.Token[0].transferEvents.map(
+    //         (event: ZoraBid): NonFungibleTokenAPI.AssetOrder | undefined => {
+    //             if (event.transaction.marketBidEvents?.length !== 0) {
+    //                 const bid = first(event.transaction.marketBidEvents)
+    //                 return {
+    //                     created_time: new Date(`${bid?.blockTimestamp}Z`).getTime().toString(),
+    //                     current_price: bid?.amount,
+    //                     payment_token: bid?.currencyAddress || '',
+    //                     payment_token_contract: {
+    //                         name: 'Ether',
+    //                         symbol: 'ETH',
+    //                         decimals: 18,
+    //                         address: bid?.currencyAddress || '',
+    //                     },
+    //                     listing_time: 0,
+    //                     side: NonFungibleTokenAPI.OrderSide.Buy,
+    //                     quantity: '1',
+    //                     expiration_time: 0,
+    //                     order_hash: bid?.transactionHash || '',
+    //                     approved_on_chain: false,
+    //                     maker_account: {
+    //                         user: { username: bid?.recipient || '' },
+    //                         address: bid?.recipient || '',
+    //                         profile_img_url: '',
+    //                         link: `https://zora.co/${bid?.recipient}`,
+    //                     },
+    //                 }
+    //             }
+    //             return
+    //         },
+    //     )
+    //     return offers.filter((offer) => offer !== undefined)
+    // }
+    // async getListings(tokenAddress: string, tokenId: string): Promise<NonFungibleTokenAPI.AssetOrder[]> {
+    //     const variables = {
+    //         tokenAddress,
+    //         tokenId,
+    //     }
+    //     const nftAsks = await this.client.request(getAsksQuery, variables)
+    //     const orders: NonFungibleTokenAPI.AssetOrder[] = nftAsks.Token[0].transferEvents.map(
+    //         (event: ZoraAsk): NonFungibleTokenAPI.AssetOrder | undefined => {
+    //             if (event.transaction.auctionCreatedEvents?.length !== 0) {
+    //                 const ask = first(event.transaction.auctionCreatedEvents)
+    //                 return {
+    //                     created_time: new Date(`${ask?.blockTimestamp}Z`).getTime().toString(),
+    //                     approved_on_chain: false,
+    //                     current_price: formatWeiToEther(ask?.reservePrice || 0).toString(),
+    //                     payment_token: ask?.auctionCurrency,
+    //                     payment_token_contract: {
+    //                         name: 'Ether',
+    //                         symbol: 'ETH',
+    //                         decimals: 18,
+    //                         address: ask?.auctionCurrency || '',
+    //                     },
+    //                     listing_time: 0,
+    //                     side: NonFungibleTokenAPI.OrderSide.Sell,
+    //                     quantity: '1',
+    //                     expiration_time: 0,
+    //                     order_hash: ask?.transactionHash || '',
+    //                     maker_account: {
+    //                         user: { username: ask?.tokenOwner || '' },
+    //                         address: ask?.tokenOwner || '',
+    //                         profile_img_url: '',
+    //                         link: `https://zora.co/${ask?.tokenOwner}`,
+    //                     },
+    //                 }
+    //             }
+    //             return
+    //         },
+    //     )
+    //     return orders.filter((order) => order !== undefined)
+    // }
+    // async getOrders(tokenAddress: string, tokenId: string, side: NonFungibleTokenAPI.OrderSide) {
+    //     switch (side) {
+    //         case NonFungibleTokenAPI.OrderSide.Buy:
+    //             return this.getOffers(tokenAddress, tokenId)
+    //         case NonFungibleTokenAPI.OrderSide.Sell:
+    //             return this.getListings(tokenAddress, tokenId)
+    //         default:
+    //             return []
+    //     }
+    // }
 }
diff --git a/packages/web3-shared/base/package.json b/packages/web3-shared/base/package.json
index 5e157126a20b..2b094da7edf9 100644
--- a/packages/web3-shared/base/package.json
+++ b/packages/web3-shared/base/package.json
@@ -9,8 +9,14 @@
   },
   "types": "./dist/index.d.ts",
   "dependencies": {
+    "@dimensiondev/holoflows-kit": "^0.9.0-20220520093249-0870919",
+    "@dimensiondev/mask-wallet-core": "0.1.0-20211013082857-eb62e5f",
+    "@masknet/shared-base": "workspace:*",
+    "@servie/events": "^3.0.0",
+    "@types/use-subscription": "^1.0.0",
     "bignumber.js": "9.0.2",
     "date-fns": "^2.28.0",
+    "urlcat": "^2.0.4",
     "react-use": "^17.3.2",
     "reconnecting-websocket": "^4.4.0"
   },
diff --git a/packages/web3-shared/base/src/helpers/index.ts b/packages/web3-shared/base/src/helpers/index.ts
deleted file mode 100644
index 83e58f95e00c..000000000000
--- a/packages/web3-shared/base/src/helpers/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export * from './constants'
-export * from './lookupTable'
-export * from './types'
diff --git a/packages/web3-shared/base/src/helpers/lookupTable.ts b/packages/web3-shared/base/src/helpers/lookupTable.ts
deleted file mode 100644
index 10a77a548bae..000000000000
--- a/packages/web3-shared/base/src/helpers/lookupTable.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-export function createLookupTableResolver<K extends keyof any, T>(map: Record<K, T>, fallback: T | ((key: K) => T)) {
-    function resolveFallback(key: K) {
-        if (typeof fallback === 'function') return (fallback as (key: K) => T)(key)
-        return fallback
-    }
-    return (key: K) => map[key] ?? resolveFallback(key)
-}
diff --git a/packages/web3-shared/base/src/helpers/types.ts b/packages/web3-shared/base/src/helpers/types.ts
deleted file mode 100644
index 9c6b1781de93..000000000000
--- a/packages/web3-shared/base/src/helpers/types.ts
+++ /dev/null
@@ -1 +0,0 @@
-export type Primitive = string | number | boolean | symbol | undefined | null | bigint
diff --git a/packages/web3-shared/base/src/hooks/index.ts b/packages/web3-shared/base/src/hooks/index.ts
deleted file mode 100644
index a2121d0d9e81..000000000000
--- a/packages/web3-shared/base/src/hooks/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './useBeat'
diff --git a/packages/web3-shared/base/src/hooks/useBeat.ts b/packages/web3-shared/base/src/hooks/useBeat.ts
deleted file mode 100644
index afe76eab4307..000000000000
--- a/packages/web3-shared/base/src/hooks/useBeat.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { DependencyList, useState } from 'react'
-import { useAsyncRetry, useTimeoutFn } from 'react-use'
-import type { AsyncStateRetry } from 'react-use/lib/useAsyncRetry'
-
-export function useBeat(delay = 1000) {
-    const [beat, setBeat] = useState(0)
-    const [, , reset] = useTimeoutFn(() => {
-        setBeat((x) => (x + 1) % Number.MAX_SAFE_INTEGER)
-        reset()
-    }, delay)
-    return beat
-}
-
-export function useBeatRetry<T>(fn: () => Promise<T>, delay = 1000, deps: DependencyList = []): AsyncStateRetry<T> {
-    const beat = useBeat(delay)
-    return useAsyncRetry(fn, deps.concat(beat))
-}
diff --git a/packages/web3-shared/base/src/index.ts b/packages/web3-shared/base/src/index.ts
index 82652a45b6ce..47fc2e1fe594 100644
--- a/packages/web3-shared/base/src/index.ts
+++ b/packages/web3-shared/base/src/index.ts
@@ -1,4 +1,3 @@
-export * from './hooks'
+export * from './specs'
 export * from './utils'
 export * from './proxy'
-export * from './helpers'
diff --git a/packages/web3-shared/base/src/specs/index.ts b/packages/web3-shared/base/src/specs/index.ts
new file mode 100644
index 000000000000..a23595c9fb12
--- /dev/null
+++ b/packages/web3-shared/base/src/specs/index.ts
@@ -0,0 +1,964 @@
+import type { Subscription } from 'use-subscription'
+import type { Emitter } from '@servie/events'
+import type { EnhanceableSite, ExtensionSite, ProfileIdentifier } from '@masknet/shared-base'
+import type { api } from '@dimensiondev/mask-wallet-core/proto'
+import type {
+    ReturnChainResolver,
+    ReturnExplorerResolver,
+    ReturnNetworkResolver,
+    ReturnProviderResolver,
+} from '../utils'
+
+export interface Pageable<T> {
+    currentPage: number
+    hasNextPage: boolean
+    data: T[]
+}
+
+export type Color =
+    | `rgb(${number}, ${number}, ${number})`
+    | `rgba(${number}, ${number}, ${number}, ${number})`
+    | `#${string}${string}${string}${string}${string}${string}`
+    | `#${string}${string}${string}`
+    | `hsl(${number}, ${number}%, ${number}%)`
+
+export enum NetworkPluginID {
+    PLUGIN_EVM = 'com.mask.evm',
+    PLUGIN_FLOW = 'com.mask.flow',
+    PLUGIN_SOLANA = 'com.mask.solana',
+}
+
+export enum CurrencyType {
+    NATIVE = 'native',
+    BTC = 'btc',
+    USD = 'usd',
+}
+
+export enum OrderSide {
+    Buy = 0,
+    Sell = 1,
+}
+
+export enum GasOptionType {
+    FAST = 'fast',
+    NORMAL = 'normal',
+    SLOW = 'slow',
+}
+
+export enum TokenType {
+    Fungible = 'Fungible',
+    NonFungible = 'NonFungible',
+}
+
+export enum SourceType {
+    // FT assets
+    DeBank = 'DeBank',
+    Zerion = 'Zerion',
+
+    // NFT assets
+    RSS3 = 'RSS3',
+    Zora = 'zora',
+    OpenSea = 'opensea',
+    Rarible = 'rarible',
+    NFTScan = 'NFTScan',
+}
+
+export enum TransactionStatusType {
+    NOT_DEPEND = 1,
+    SUCCEED = 2,
+    FAILED = 3,
+}
+
+export enum TransactionDescriptorType {
+    /** Transfer on chain value. */
+    TRANSFER = 'transfer',
+    /** A transaction to operate state mutations. */
+    INTERACTION = 'interaction',
+    /** A transaction to deploy programs. */
+    DEPLOYMENT = 'deployment',
+    /** A transaction to cancel a previous transaction. */
+    CANCEL = 'cancel',
+    /** A transaction to modify a previous transaction. */
+    RETRY = 'retry', // speed up
+}
+
+export enum IdentityAddressType {
+    ADDRESS = 'ADDRESS',
+    ENS = 'ENS',
+    UNS = 'UNS',
+    DNS = 'DNS',
+    RSS3 = 'RSS3',
+    GUN = 'GUN',
+    THE_GRAPH = 'THE_GRAPH',
+    TWITTER_BLUE = 'TWITTER_BLUE',
+    NEXT_ID = 'NEXT_ID',
+}
+
+export interface Identity {
+    address?: string
+    nickname?: string
+    avatarURL?: string
+    link?: string
+}
+
+export interface SocialIdentity {
+    identifier?: ProfileIdentifier
+    avatar?: string
+    bio?: string
+    nickname?: string
+    homepage?: string
+}
+
+export interface IdentityAddress {
+    type: IdentityAddressType
+    address: string
+    label: string
+}
+
+export type Price = {
+    [key in CurrencyType]?: string
+}
+
+export interface ChainDescriptor<ChainId, SchemaType, NetworkType> {
+    type: NetworkType
+    chainId: ChainId
+    coinMarketCapChainId: string
+    coinGeckoChainId: string
+    coinGeckoPlatformId: string
+    name: string
+    color?: string
+    fullName?: string
+    shortName?: string
+    network: 'mainnet' | 'testnet' | Omit<string, 'mainnet' | 'testnet'>
+    nativeCurrency: FungibleToken<ChainId, SchemaType>
+    // EIP3091
+    explorerURL: {
+        url: string
+        parameters?: Record<string, string | number | boolean>
+    }
+    features?: string[]
+}
+
+export interface NetworkDescriptor<ChainId, NetworkType> {
+    /** An unique ID for each network */
+    ID: string
+    /** The ID of a plugin that provides the functionality of this network. */
+    networkSupporterPluginID: NetworkPluginID
+    /** The chain id */
+    chainId: ChainId
+    /** The network type */
+    type: NetworkType
+    /** The network icon */
+    icon: URL
+    /** The network icon in fixed color */
+    iconColor: Color
+    /** The network name */
+    name: string
+    /** Is a mainnet network */
+    isMainnet: boolean
+}
+
+export interface ProviderDescriptor<ChainId, ProviderType> {
+    /** An unique ID for each wallet provider */
+    ID: string
+    /** The ID of a plugin that provides the adoption of this provider. */
+    providerAdaptorPluginID: NetworkPluginID
+    /** The provider type */
+    type: ProviderType
+    /** The provider icon */
+    icon: URL
+    /** The provider name */
+    name: string
+    /** Enable requirements */
+    enableRequirements?: {
+        supportedChainIds?: ChainId[]
+        supportedEnhanceableSites?: EnhanceableSite[]
+        supportedExtensionSites?: ExtensionSite[]
+    }
+    /** A link to provider's home website */
+    homeLink: string
+    /** A link only contains domain name */
+    shortenLink: string
+    /** A link to download the client */
+    downloadLink?: string
+}
+
+export interface Token<ChainId, SchemaType> {
+    id: string
+    chainId: ChainId
+    type: TokenType
+    schema: SchemaType
+    address: string
+}
+
+export interface FungibleToken<ChainId, SchemaType> extends Token<ChainId, SchemaType> {
+    name: string
+    symbol: string
+    decimals: number
+    logoURL?: string
+}
+
+export interface NonFungibleTokenContract<ChainId, SchemaType> {
+    chainId: ChainId
+    name: string
+    symbol: string
+    address: string
+    schema: SchemaType
+    owner?: string
+    balance?: number
+    logoURL?: string
+    iconURL?: string
+}
+
+export interface NonFungibleTokenMetadata<ChainId> {
+    chainId: ChainId
+    name: string
+    symbol: string
+    description?: string
+    /** preview image url */
+    imageURL?: string
+    /** source media url */
+    mediaURL?: string
+    /** source media type */
+    mediaType?: string
+}
+
+export interface NonFungibleTokenCollection<ChainId> {
+    chainId: ChainId
+    name: string
+    slug: string
+    address?: string
+    symbol?: string
+    schema_name?: string
+    balance?: number
+    description?: string
+    iconURL?: string
+    /** verified by provider */
+    verified?: boolean
+    /** unix timestamp */
+    createdAt?: number
+}
+
+export interface NonFungibleToken<ChainId, SchemaType> extends Token<ChainId, SchemaType> {
+    tokenId: string
+    contract?: NonFungibleTokenContract<ChainId, SchemaType>
+    metadata?: NonFungibleTokenMetadata<ChainId>
+    collection?: NonFungibleTokenCollection<ChainId>
+}
+
+export interface NonFungibleTokenTrait {
+    type: string
+    value: string
+}
+
+export interface NonFungibleTokenAuction<ChainId, SchemaType> {
+    /** unix timestamp */
+    startAt?: number
+    /** unix timestamp */
+    endAt?: number
+    /** tokens available to make an order */
+    orderTokens?: Array<FungibleToken<ChainId, SchemaType>>
+    /** tokens available to make an offer */
+    offerTokens?: Array<FungibleToken<ChainId, SchemaType>>
+}
+
+export interface NonFungibleTokenOrder<ChainId, SchemaType> {
+    id: string
+    /** chain Id */
+    chainId: ChainId
+    /** permalink of asset */
+    asset_permalink: string
+    /** token amount */
+    quantity: string
+    /** transaction hash */
+    hash?: string
+    /** buy or sell */
+    side?: OrderSide
+    /** the account make the order */
+    maker?: Identity
+    /** the account fullfil the order */
+    taker?: Identity
+    /** unix timestamp */
+    createdAt?: number
+    /** unix timestamp */
+    expiredAt?: number
+    /** current price */
+    price?: Price
+    paymentToken?: FungibleToken<ChainId, SchemaType>
+}
+
+export interface NonFungibleTokenEvent<ChainId, SchemaType> {
+    id: string
+    /** chain Id */
+    chainId: ChainId
+    /** token type */
+    type: string
+    /** permalink of asset */
+    assetPermalink?: string
+    /** symbol of asset */
+    assetSymbol?: string
+    /** token amount */
+    quantity: string
+    /** transaction hash */
+    hash?: string
+    /** the account make the order */
+    from: Identity
+    /** the account fullfil the order */
+    to: Identity
+    /** unix timestamp */
+    timestamp: number
+    /** relate token price */
+    price?: Price
+    paymentToken?: FungibleToken<ChainId, SchemaType>
+}
+
+/**
+ * A fungible token but with more metadata
+ */
+export interface FungibleAsset<ChainId, SchemaType> extends FungibleToken<ChainId, SchemaType> {
+    /** currently balance */
+    balance: string
+    /** estimated price */
+    price?: Price
+    /** estimated value */
+    value?: Price
+}
+
+/**
+ * A non-fungible token but with more metadata
+ */
+export interface NonFungibleAsset<ChainId, SchemaType> extends NonFungibleToken<ChainId, SchemaType> {
+    /** permalink */
+    link?: string
+    /** the creator data */
+    creator?: Identity
+    /** the owner data */
+    owner?: Identity
+    /** estimated price */
+    price?: Price
+    /** traits of the digital asset */
+    traits?: NonFungibleTokenTrait[]
+    /** token on auction */
+    auction?: NonFungibleTokenAuction<ChainId, SchemaType>
+    orders?: Array<NonFungibleTokenOrder<ChainId, SchemaType>>
+    events?: Array<NonFungibleTokenEvent<ChainId, SchemaType>>
+}
+
+/**
+ * Plugin can declare what chain it supports to trigger side effects (e.g. create a new transaction).
+ * When the current chain is not supported, the composition entry will be hidden.
+ */
+export type Web3EnableRequirement = Partial<
+    Record<
+        NetworkPluginID,
+        {
+            supportedChainIds?: number[]
+        }
+    >
+>
+
+export interface TransactionDescriptor<ChainId, Transaction> {
+    chainId: ChainId
+    /** The transaction type */
+    type: TransactionDescriptorType
+    /** a transaction title. */
+    title: string
+    /** a human-readable description. */
+    description?: string
+    /** The original transaction object */
+    _tx: Transaction
+}
+
+export interface TransactionContext<ChainId, Parameter = string | undefined> {
+    /** the descriptor type */
+    type: TransactionDescriptorType
+    /** chain id */
+    chainId: ChainId
+    /** the from address. */
+    from: string
+    /** the to address */
+    to: string
+    /** the value amount (polyfill to 0x0 if absent in the original transaction) */
+    value: string
+    /** code to deploy */
+    code?: string
+    /** method name */
+    name?: string
+    /** actual parameters */
+    parameters?: {
+        [key: string]: Parameter
+    }
+}
+
+export interface AddressName {
+    id: string
+    /** eg. vitalik.eth */
+    label: string
+    /** eg. 0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045 */
+    ownerAddress: string
+    /** eg. 0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045 */
+    resolvedAddress?: string
+}
+
+export interface Wallet {
+    id: string
+    /** User define wallet name. Default address.prefix(6) */
+    name: string
+    /** The address of wallet */
+    address: string
+    /** true: Mask Wallet, false: External Wallet */
+    hasStoredKeyInfo: boolean
+    /** true: Derivable Wallet. false: UnDerivable Wallet */
+    hasDerivationPath: boolean
+    /** yep: removable, nope: unremovable */
+    configurable?: boolean
+    /** the derivation path when wallet was created */
+    derivationPath?: string
+    /** the derivation path when wallet last was derived */
+    latestDerivationPath?: string
+    /** the internal presentation of mask wallet sdk */
+    storedKeyInfo?: api.IStoredKeyInfo
+    /** the Mask SDK stored key info */
+    /** record created at */
+    createdAt: Date
+    /** record updated at */
+    updatedAt: Date
+}
+
+export interface Transaction<ChainId, SchemaType> {
+    id: string
+    type?: string
+    filterType?: string
+    from: string
+    to: string
+    /** unix timestamp */
+    timestamp: number
+    /** 0: failed 1: succeed */
+    status: 0 | 1
+    /** transferred tokens */
+    tokens: Array<Token<ChainId, SchemaType> & {
+        name: string
+        symbol: string
+        amount: string
+        direction: string
+    }>
+    /** estimated tx fee */
+    fee?: Price
+}
+
+export interface RecentTransaction<ChainId, Transaction> {
+    /** the initial transaction id */
+    id: string
+    /** the id for accessing tx from candidates */
+    indexId: string
+    /** the chain id */
+    chainId: ChainId
+    /** status type */
+    status: TransactionStatusType
+    /** available tx candidates */
+    candidates: Record<string, Transaction>
+    /** record created at */
+    createdAt: Date
+    /** record updated at */
+    updatedAt: Date
+}
+
+export interface TokenList<ChainId, SchemaType> {
+    name: string
+    description?: string
+    /** fungible or non-fungible tokens */
+    tokens: Array<Token<ChainId, SchemaType>>
+}
+
+export interface Account<ChainId> {
+    account: string
+    chainId: ChainId
+}
+
+export interface ProviderEvents<ChainId, ProviderType> {
+    /** Emit when the chain id changed. */
+    chainId: [string]
+    /** Emit when the accounts changed. */
+    accounts: [string[]]
+    /** Emit when the site connects with a provider. */
+    connect: [Account<ChainId>]
+    /** Emit when the site disconnect with a provider. */
+    disconnect: [ProviderType]
+}
+
+export interface WatchEvents {
+    /** Emit when the watched transaction status updated. */
+    progress: [string, TransactionStatusType]
+}
+
+export interface WalletProvider<ChainId, ProviderType, Web3Provider, Web3> {
+    emitter: Emitter<ProviderEvents<ChainId, ProviderType>>
+
+    /** Get to know whether the provider is ready. */
+    readonly ready: boolean
+    /** Keep waiting until the provider is ready. */
+    readonly readyPromise: Promise<void>
+    /** Switch to the designate chain. */
+    switchChain(chainId?: ChainId): Promise<void>
+    /** Create an web3 instance. */
+    createWeb3(chainId?: ChainId): Promise<Web3>
+    /** Create an provider instance. */
+    createWeb3Provider(chainId?: ChainId): Promise<Web3Provider>
+    /** Create the connection. */
+    connect(chainId?: ChainId): Promise<Account<ChainId>>
+    /** Dismiss the connection. */
+    disconnect(): Promise<void>
+}
+
+export interface TransactionChecker<ChainId> {
+    checkStatus(chainId: ChainId, id: string): Promise<TransactionStatusType>
+}
+export interface ConnectionOptions<ChainId, ProviderType, Transaction> {
+    /** Designate the sub-network id of the transaction. */
+    chainId?: ChainId
+    /** Designate the signer of the transaction. */
+    account?: string
+    /** Designate the provider to handle the transaction. */
+    providerType?: ProviderType
+    /** Handle on popups page. */
+    popupsWindow?: boolean
+    /** Fragments to merge into the transaction. */
+    overrides?: Partial<Transaction>
+}
+export interface Connection<
+    ChainId,
+    SchemaType,
+    ProviderType,
+    Signature,
+    Block,
+    Transaction,
+    TransactionReceipt,
+    TransactionDetailed,
+    TransactionSignature,
+    Web3,
+    Web3Provider,
+    Web3ConnectionOptions = ConnectionOptions<ChainId, ProviderType, Transaction>,
+> {
+    /** Get web3 instance */
+    getWeb3(options?: Web3ConnectionOptions): Promise<Web3>
+    /** Get web3 provider instance */
+    getWeb3Provider(options?: Web3ConnectionOptions): Promise<Web3Provider>
+    /** Get gas price */
+    getGasPrice(options?: Web3ConnectionOptions): Promise<string>
+    /** Get schema type of given token address. */
+    getSchemaType(address: string, options?: Web3ConnectionOptions): Promise<SchemaType | undefined>
+    /** Get a native fungible token. */
+    getNativeToken(options?: Web3ConnectionOptions): Promise<FungibleToken<ChainId, SchemaType>>
+    /** Get a fungible token. */
+    getFungibleToken(address: string, options?: Web3ConnectionOptions): Promise<FungibleToken<ChainId, SchemaType>>
+    /** Get an non-fungible token. */
+    getNonFungibleToken(
+        address: string,
+        id: string,
+        options?: Web3ConnectionOptions,
+    ): Promise<NonFungibleToken<ChainId, SchemaType>>
+    /** Get an non-fungible token contract. */
+    getNonFungibleTokenContract(
+        address: string,
+        id: string,
+        options?: Web3ConnectionOptions,
+    ): Promise<NonFungibleTokenContract<ChainId, SchemaType>>
+    /** Get an non-fungible token collection. */
+    getNonFungibleTokenCollection(
+        address: string,
+        options?: Web3ConnectionOptions,
+    ): Promise<NonFungibleTokenCollection<ChainId>>
+    /** Get native fungible token balance. */
+    getNativeTokenBalance(options?: Web3ConnectionOptions): Promise<string>
+    /** Get fungible token balance */
+    getFungibleTokenBalance(address: string, options?: Web3ConnectionOptions): Promise<string>
+    /** Get non-fungible token balance */
+    getNonFungibleTokenBalance(address: string, options?: Web3ConnectionOptions): Promise<string>
+    /** Get fungible token balance */
+    getFungibleTokensBalance(listOfAddress: string[], options?: Web3ConnectionOptions): Promise<Record<string, string>>
+    /** Get non-fungible token balance */
+    getNonFungibleTokensBalance(
+        listOfAddress: string[],
+        options?: Web3ConnectionOptions,
+    ): Promise<Record<string, string>>
+    /** Get the currently connected account. */
+    getAccount(options?: Web3ConnectionOptions): Promise<string>
+    /** Get the currently chain id. */
+    getChainId(options?: Web3ConnectionOptions): Promise<ChainId>
+    /** Get the latest block by number. */
+    getBlock(no: number, options?: Web3ConnectionOptions): Promise<Block>
+    /** Get the latest block number. */
+    getBlockNumber(options?: Web3ConnectionOptions): Promise<number>
+    /** Get the latest block timestamp. */
+    getBlockTimestamp(options?: Web3ConnectionOptions): Promise<number>
+    /** Get the latest balance of the account. */
+    getBalance(address: string, options?: Web3ConnectionOptions): Promise<string>
+    /** Get the detailed of transaction by id. */
+    getTransaction(id: string, options?: Web3ConnectionOptions): Promise<TransactionDetailed | null>
+    /** Get the latest transaction status. */
+    getTransactionStatus(id: string, options?: Web3ConnectionOptions): Promise<TransactionStatusType>
+    /** Get the latest transaction nonce. */
+    getTransactionNonce(address: string, options?: Web3ConnectionOptions): Promise<number>
+    /** Get the transaction receipt. */
+    getTransactionReceipt(id: string, options?: Web3ConnectionOptions): Promise<TransactionReceipt | null>
+    /** Get the source code of a on-chain program. */
+    getCode(address: string, options?: Web3ConnectionOptions): Promise<string>
+    /** Switch to sub network */
+    switchChain?: (options?: Web3ConnectionOptions) => Promise<void>
+    /** Sign message */
+    signMessage(dataToSign: string, signType?: string, options?: Web3ConnectionOptions): Promise<Signature>
+    /** Verify message */
+    verifyMessage(
+        dataToVerify: string,
+        signature: Signature,
+        signType?: string,
+        options?: Web3ConnectionOptions,
+    ): Promise<boolean>
+    /** Transfer fungible token to */
+    transferFungibleToken(
+        address: string,
+        recipient: string,
+        amount: string,
+        memo?: string,
+        options?: Web3ConnectionOptions,
+    ): Promise<string>
+    /** Transfer non-fungible token to */
+    transferNonFungibleToken(
+        address: string,
+        recipient: string,
+        tokenId: string,
+        amount: string,
+        options?: Web3ConnectionOptions,
+    ): Promise<string>
+    /** Sign a transaction */
+    signTransaction(transaction: Transaction, options?: Web3ConnectionOptions): Promise<TransactionSignature>
+    /** Sign multiple transactions */
+    signTransactions(transactions: Transaction[], options?: Web3ConnectionOptions): Promise<TransactionSignature[]>
+    /** Query a transaction */
+    callTransaction(transaction: Transaction, options?: Web3ConnectionOptions): Promise<string>
+    /** Send a transaction and wait for mining */
+    sendTransaction(transaction: Transaction, options?: Web3ConnectionOptions): Promise<string>
+    /** Send a signed transaction */
+    sendSignedTransaction(signature: TransactionSignature, options?: Web3ConnectionOptions): Promise<string>
+    /** Build connection */
+    connect(options?: Web3ConnectionOptions): Promise<Account<ChainId>>
+    /** Break connection */
+    disconnect(options?: Web3ConnectionOptions): Promise<void>
+    /** Confirm request */
+    confirmRequest?: (options?: Web3ConnectionOptions) => Promise<void>
+    /** Reject request */
+    rejectRequest?: (options?: Web3ConnectionOptions) => Promise<void>
+    /** Replace request */
+    replaceRequest(hash: string, config: Transaction, options?: Web3ConnectionOptions): Promise<void>
+    /** Cancel request */
+    cancelRequest(hash: string, config: Transaction, options?: Web3ConnectionOptions): Promise<void>
+}
+
+export interface HubOptions<ChainId> {
+    /** The user account as the API parameter */
+    account?: string
+    /** The chain id as the API parameter */
+    chainId?: ChainId
+    /** The id of data provider */
+    sourceType?: SourceType
+    /** The currency type of data */
+    currencyType?: CurrencyType
+    /** The item size of each page. */
+    size?: number
+    /** The page index. */
+    page?: number
+}
+
+export interface Hub<ChainId, SchemaType, GasOption, Web3HubOptions = HubOptions<ChainId>> {
+    /** Get the fungible from built-in token list */
+    getFungibleTokensFromTokenList?: (chainId: ChainId, options?: Web3HubOptions) => Promise<Array<FungibleToken<ChainId, SchemaType>>>
+    /** Get the non-fungible from built-in token list */
+    getNonFungibleTokensFromTokenList?: (
+        chainId: ChainId,
+        options?: Web3HubOptions,
+    ) => Promise<Array<NonFungibleToken<ChainId, SchemaType>>>
+    /** Get all gas options */
+    getGasOptions?: (
+        chainId: ChainId,
+        options?: Web3HubOptions,
+    ) => Promise<Record<GasOptionType, GasOption>>
+    /** Get a fungible asset */
+    getFungibleAsset?: (
+        address: string,
+        options?: Web3HubOptions,
+    ) => Promise<FungibleAsset<ChainId, SchemaType> | undefined>
+    /** Get an non-fungible asset */
+    getNonFungibleAsset?: (
+        address: string,
+        tokenId: string,
+        options?: Web3HubOptions,
+    ) => Promise<NonFungibleAsset<ChainId, SchemaType> | undefined>
+    /** Get fungible assets of given account with pagination supported. */
+    getFungibleAssets?: (
+        account: string,
+        options?: Web3HubOptions,
+    ) => Promise<Pageable<FungibleAsset<ChainId, SchemaType>>>
+    /** Get non-fungible assets of given account with pagination supported. */
+    getNonFungibleAssets?: (
+        account: string,
+        options?: Web3HubOptions,
+    ) => Promise<Pageable<NonFungibleAsset<ChainId, SchemaType>>>
+    /** Get all fungible assets of given account and ignore the pagination options. */
+    getAllFungibleAssets?: (
+        address: string,
+        options?: Web3HubOptions,
+    ) => AsyncIterableIterator<FungibleAsset<ChainId, SchemaType>>
+    /** Get all non-fungible assets of given account and ignore the pagination options. */
+    getAllNonFungibleAssets?: (
+        address: string,
+        options?: Web3HubOptions,
+    ) => AsyncIterableIterator<NonFungibleAsset<ChainId, SchemaType>>
+    /** Get all non-fungible collections of given account and ignore the pagination options. */
+    getAllNonFungibleCollections?: (
+        address: string,
+        options?: Web3HubOptions,
+    ) => AsyncIterableIterator<NonFungibleTokenCollection<ChainId>>
+    /** Get price of a fungible token */
+    getFungibleTokenPrice?: (
+        chainId: ChainId,
+        address: string,
+        options?: Web3HubOptions,
+    ) => Promise<number>
+    /** Get price of an non-fungible token */
+    getNonFungibleTokenPrice?: (
+        chainId: ChainId,
+        address: string,
+        tokenId: string,
+        options?: Web3HubOptions,
+    ) => Promise<number>
+    /** Get token icon urls of a fungible token */
+    getFungibleTokenIconURLs?: (chainId: ChainId, address: string, options?: Web3HubOptions) => Promise<string[]>
+    /** Get token icon urls of an non-fungible token */
+    getNonFungibleTokenIconURLs?: (
+        chainId: ChainId,
+        address: string,
+        tokenId?: string,
+        options?: Web3HubOptions,
+    ) => Promise<string[]>
+    /** Get the most recent transactions */
+    getTransactions: (chainId: ChainId, account: string, options?: Web3HubOptions) => Promise<Pageable<Transaction<ChainId, SchemaType>>>
+}
+
+export interface SettingsState {
+    /** Is testnets valid */
+    allowTestnet?: Subscription<boolean>
+    /** The currency of estimated values and prices. */
+    currencyType?: Subscription<CurrencyType>
+    /** The gas options type */
+    gasOptionType?: Subscription<GasOptionType>
+    /** The source type of fungible assets */
+    fungibleAssetSourceType?: Subscription<SourceType>
+    /** The source type of non-fungible assets */
+    nonFungibleAssetSourceType?: Subscription<SourceType>
+}
+export interface AddressBookState<ChainId> {
+    /** The tracked addresses of currently chosen sub-network */
+    addressBook?: Subscription<string[]>
+
+    /** Add an address into address book. */
+    addAddress: (chainId: ChainId, address: string) => Promise<void>
+    /** Remove an address from address book. */
+    removeAddress: (chainId: ChainId, address: string) => Promise<void>
+}
+export interface RiskWarningState {
+    /** Is approved */
+    approved?: Subscription<boolean>
+
+    /** Detect if an account is approved the statement */
+    isApproved?: (address: string) => Promise<boolean>
+    /** Approve statement of designate account */
+    approve?: (address: string, pluginID?: string) => Promise<void>
+    /** Revoke statement of designate account */
+    revoke?: (address: string, pluginID?: string) => Promise<void>
+}
+export interface HubState<
+    ChainId,
+    SchemaType,
+    GasOption,
+    Web3HubOptions = HubOptions<ChainId>,
+    Web3Hub = Hub<ChainId, SchemaType, GasOption>,
+> {
+    /** Get external data hub */
+    getHub?: (options: Web3HubOptions) => Promise<Web3Hub>
+}
+
+export interface IdentityServiceState {
+    /** Find all social addresses related to given social identity. */
+    lookup(identity: SocialIdentity): Promise<IdentityAddress[]>
+}
+export interface NameServiceState<ChainId, DomainBook = Record<string, string>> {
+    /** get address of domain name */
+    lookup?: (chainId: ChainId, domain: string) => Promise<string | undefined>
+    /** get domain name of address */
+    reverse?: (chainId: ChainId, address: string) => Promise<string | undefined>
+}
+export interface TokenState<ChainId, SchemaType> {
+    /** The user trusted fungible tokens. */
+    trustedFungibleTokens?: Subscription<Array<FungibleToken<ChainId, SchemaType>>>
+    /** The user trusted non-fungible tokens. */
+    trustedNonFungibleTokens?: Subscription<Array<NonFungibleToken<ChainId, SchemaType>>>
+    /** The user blocked fungible tokens. */
+    blockedFungibleTokens?: Subscription<Array<FungibleToken<ChainId, SchemaType>>>
+    /** The user blocked non-fungible tokens. */
+    blockedNonFungibleTokens?: Subscription<Array<NonFungibleToken<ChainId, SchemaType>>>
+
+    /** Add a token */
+    addToken?: (token: Token<ChainId, SchemaType>) => Promise<void>
+    /** Remove a token */
+    removeToken?: (token: Token<ChainId, SchemaType>) => Promise<void>
+    /** Unblock a token */
+    trustToken?: (address: string, token: Token<ChainId, SchemaType>) => Promise<void>
+    /** Block a token */
+    blockToken?: (address: string, token: Token<ChainId, SchemaType>) => Promise<void>
+}
+export interface TransactionState<ChainId, Transaction> {
+    /** The tracked transactions of currently chosen sub-network */
+    transactions?: Subscription<Array<RecentTransaction<ChainId, Transaction>>>
+
+    /** Add a transaction record. */
+    addTransaction?: (chainId: ChainId, address: string, id: string, transaction: Transaction) => Promise<void>
+    /** Replace a transaction with new record. */
+    replaceTransaction?: (
+        chainId: ChainId,
+        address: string,
+        id: string,
+        newId: string,
+        transaction: Transaction,
+    ) => Promise<void>
+    /** Update transaction status. */
+    updateTransaction?: (
+        chainId: ChainId,
+        address: string,
+        id: string,
+        status: Exclude<TransactionStatusType, TransactionStatusType.NOT_DEPEND>,
+    ) => Promise<void>
+    /** Remove a transaction record. */
+    removeTransaction?: (chainId: ChainId, address: string, id: string) => Promise<void>
+    /** Clear all transactions of the account under given chain */
+    clearTransactions?: (chainId: ChainId, address: string) => Promise<void>
+}
+export interface TransactionFormatterState<ChainId, Parameters, Transaction> {
+    /** Step 1: Create a transaction formatting context. */
+    createContext: (chainId: ChainId, transaction: Transaction) => Promise<TransactionContext<ChainId, Parameters>>
+    /** Step 2: Create a transaction descriptor */
+    createDescriptor: (
+        chainId: ChainId,
+        transaction: Transaction,
+        context: TransactionContext<ChainId, Parameters>,
+    ) => Promise<TransactionDescriptor<ChainId, Transaction>>
+    /** Elaborate a transaction in a human-readable format. */
+    formatTransaction: (
+        chainId: ChainId,
+        transaction: Transaction,
+    ) => Promise<TransactionDescriptor<ChainId, Transaction>>
+}
+export interface TransactionWatcherState<ChainId, Transaction> {
+    emitter: Emitter<WatchEvents>
+
+    /** Add a transaction into the watch list. */
+    watchTransaction: (chainId: ChainId, id: string, transaction: Transaction) => void
+    /** Remove a transaction from the watch list. */
+    unwatchTransaction: (chainId: ChainId, id: string) => void
+    /** Update transaction status */
+    notifyTransaction: (id: string, status: TransactionStatusType) => void
+}
+export interface ProviderState<ChainId, ProviderType, NetworkType> {
+    /** The account of the currently visiting site. */
+    account?: Subscription<string>
+    /** The chain id of the currently visiting site. */
+    chainId?: Subscription<ChainId>
+    /** The network type of the currently visiting site. */
+    networkType?: Subscription<NetworkType>
+    /** The provider type of the currently visiting site. */
+    providerType?: Subscription<ProviderType>
+
+    /** Detect if a provider is ready */
+    isReady: (providerType: ProviderType) => boolean
+    /** Wait until a provider ready */
+    untilReady: (providerType: ProviderType) => Promise<void>
+    /** Connect with the provider and set chain id. */
+    connect: (chainId: ChainId, providerType: ProviderType) => Promise<Account<ChainId>>
+    /** Disconnect with the provider. */
+    disconnect: (providerType: ProviderType) => Promise<void>
+}
+export interface ConnectionState<
+    ChainId,
+    SchemaType,
+    ProviderType,
+    Signature,
+    Block,
+    Transaction,
+    TransactionReceipt,
+    TransactionDetailed,
+    TransactionSignature,
+    Web3,
+    Web3Provider,
+    Web3ConnectionOptions = ConnectionOptions<ChainId, ProviderType, Transaction>,
+    Web3Connection = Connection<
+        ChainId,
+        SchemaType,
+        ProviderType,
+        Signature,
+        Block,
+        Transaction,
+        TransactionReceipt,
+        TransactionDetailed,
+        TransactionSignature,
+        Web3,
+        Web3Provider,
+        Web3ConnectionOptions
+    >,
+> {
+    /** Get web3 SDK */
+    getWeb3?: (options?: Web3ConnectionOptions) => Promise<Web3>
+    /** Get web3 provider instance */
+    getWeb3Provider?: (options?: Web3ConnectionOptions) => Promise<Web3Provider>
+    /** Get connection */
+    getConnection?: (options?: Web3ConnectionOptions) => Promise<Web3Connection>
+}
+export interface WalletState {
+    /** The currently stored wallet by MaskWallet. */
+    wallets?: Subscription<Wallet[]>
+    /** The default derivable wallet. */
+    walletPrimary?: Subscription<Wallet | null>
+
+    addWallet?: (id: string, wallet: Wallet) => Promise<void>
+    removeWallet?: (id: string) => Promise<void>
+    getAllWallets?: () => Promise<Wallet[]>
+}
+export interface OthersState<ChainId, SchemaType, ProviderType, NetworkType> {
+
+    // #region resolvers
+    chainResolver: ReturnChainResolver<ChainId, SchemaType, NetworkType>
+    explorerResolver: ReturnExplorerResolver<ChainId, SchemaType, NetworkType>
+    providerResolver: ReturnProviderResolver<ChainId, ProviderType>
+    networkResolver: ReturnNetworkResolver<ChainId, NetworkType>
+    // #endregion
+
+    // #region validators
+    isValidChain(chainId?: ChainId, testnet?: boolean): boolean
+    isValidDomain(domain?: string): boolean
+    isValidAddress(address?: string): boolean
+    isSameAddress(address?: string, otherAddress?: string): boolean
+    // #endregion
+
+    // #region data formatting
+    formatAddress(address: string, size?: number): string
+    formatDomainName(domain?: string, size?: number): string
+    formatTokenId(id?: string, size?: number): string
+    // #endregion
+
+    // #region customization
+    getDefaultChainId(): ChainId
+    getDefaultNetworkType(): NetworkType
+    getZeroAddress(chainId?: ChainId): string
+    getNativeTokenAddress(chainId?: ChainId): string
+    getMaskTokenAddress(chainId?: ChainId): string | undefined
+    getAverageBlockDelay(chainId?: ChainId, scale?: number): number
+    // #endregion
+}
diff --git a/packages/web3-shared/base/src/utils/address.ts b/packages/web3-shared/base/src/utils/address.ts
new file mode 100644
index 000000000000..a19deae1b17e
--- /dev/null
+++ b/packages/web3-shared/base/src/utils/address.ts
@@ -0,0 +1,19 @@
+import { compact, castArray, uniq } from 'lodash-unified'
+
+export function isSameAddress(address?: string | undefined, otherAddress?: string | undefined): boolean {
+    if (!address || !otherAddress) return false
+    return address.toLowerCase() === otherAddress.toLowerCase()
+}
+
+export function currySameAddress(addresses: string | string[] = []) {
+    addresses = compact(uniq(castArray(addresses))).map((address) => address.toLowerCase())
+    return (target?: string | { address: string }) => {
+        if (addresses.length === 0 || !target) return false
+        if (typeof target === 'string') {
+            return addresses.includes(target.toLowerCase())
+        } else if (typeof target === 'object' && typeof target.address === 'string') {
+            return addresses.includes(target.address.toLowerCase())
+        }
+        throw new Error('Unsupported `target` address format')
+    }
+}
diff --git a/packages/web3-shared/base/src/utils/balance.ts b/packages/web3-shared/base/src/utils/balance.ts
new file mode 100644
index 000000000000..fc245ea30be2
--- /dev/null
+++ b/packages/web3-shared/base/src/utils/balance.ts
@@ -0,0 +1,29 @@
+import BigNumber from 'bignumber.js'
+import { pow10 } from './number'
+
+export function formatBalance(rawValue: BigNumber.Value = '0', decimals = 0, significant = decimals) {
+    let balance = new BigNumber(rawValue)
+    if (balance.isNaN()) return '0'
+    const negative = balance.isNegative() // balance < 0n
+    const base = pow10(decimals) // 10n ** decimals
+
+    if (negative) balance = balance.absoluteValue() // balance * -1n
+
+    let fraction = balance.modulo(base).toString(10) // (balance % base).toString(10)
+
+    // add leading zeros
+    while (fraction.length < decimals) fraction = `0${fraction}`
+
+    // match significant digits
+    const matchSignificantDigits = new RegExp(`^0*[1-9]\\d{0,${significant > 0 ? significant - 1 : 0}}`)
+    fraction = fraction.match(matchSignificantDigits)?.[0] ?? ''
+
+    // trim tailing zeros
+    fraction = fraction.replace(/0+$/g, '')
+
+    const whole = balance.dividedToIntegerBy(base).toString(10) // (balance / base).toString(10)
+    const value = `${whole}${fraction === '' ? '' : `.${fraction}`}`
+
+    const raw = negative ? `-${value}` : value
+    return raw.includes('.') ? raw.replace(/0+$/, '').replace(/\.$/, '') : raw
+}
diff --git a/packages/web3-shared/base/src/helpers/constants.ts b/packages/web3-shared/base/src/utils/constant.ts
similarity index 70%
rename from packages/web3-shared/base/src/helpers/constants.ts
rename to packages/web3-shared/base/src/utils/constant.ts
index 018dfcdff6cf..145304719126 100644
--- a/packages/web3-shared/base/src/helpers/constants.ts
+++ b/packages/web3-shared/base/src/utils/constant.ts
@@ -1,27 +1,13 @@
 import { useMemo } from 'react'
-import type { Primitive } from './types'
+import type { ChainIdEnum, Constants, Primitive } from './types'
 
-type ChainId = number
-
-type ChainIdEnum = {
-    [key in ChainId]: string
-} & {
-    [key in 'Mainnet']: number
-}
-
-export type Constant = {
-    [key in 'Mainnet']?: Primitive | Primitive[]
-}
-
-export type Constants = Record<string, Constant>
-
-export function transform<C extends ChainIdEnum, T extends Constants>(
-    chainIdEnum: C,
+export function transform<ChainId extends number, T extends Constants>(
+    chainIdEnum: ChainIdEnum<ChainId>,
     constants: T,
     environment: Record<string, string> = {},
 ) {
     type Entries = { [key in keyof T]?: T[key]['Mainnet'] }
-    return (chainId: ChainId = 1) => {
+    return (chainId: ChainId = 1 as ChainId) => {
         const chainName = chainIdEnum[chainId] as 'Mainnet'
         // unknown chain id
         if (!chainName) return Object.freeze({}) as Entries
@@ -43,8 +29,8 @@ export function transform<C extends ChainIdEnum, T extends Constants>(
     }
 }
 
-export function transformFromJSON<T extends Constants>(
-    chainIdEnum: ChainIdEnum,
+export function transformFromJSON<ChainId extends number, T extends Constants>(
+    chainIdEnum: ChainIdEnum<ChainId>,
     json: string,
     fallbackConstants: T,
     environment: Record<string, string> = {},
@@ -57,8 +43,8 @@ export function transformFromJSON<T extends Constants>(
     }
 }
 
-export function hookTransform<T>(getConstants: (chainId: ChainId) => Partial<T>) {
-    return function useConstants(chainId: ChainId) {
+export function hookTransform<ChainId extends number, T>(getConstants: (chainId: ChainId) => Partial<T>) {
+    return function useConstants(chainId: ChainId = 1 as ChainId) {
         return useMemo(() => getConstants(chainId), [chainId])
     }
 }
diff --git a/packages/web3-shared/base/src/utils/currency.ts b/packages/web3-shared/base/src/utils/currency.ts
new file mode 100644
index 000000000000..415e0b55d4c1
--- /dev/null
+++ b/packages/web3-shared/base/src/utils/currency.ts
@@ -0,0 +1,7 @@
+import BigNumber from 'bignumber.js'
+
+export function formatCurrency(value: BigNumber.Value, currency = 'USD'): string {
+    return new Intl.NumberFormat('en-US', { style: 'currency', currency, currencyDisplay: 'narrowSymbol' }).format(
+        new BigNumber(value).toNumber(),
+    )
+}
diff --git a/packages/web3-shared/base/src/utils/index.ts b/packages/web3-shared/base/src/utils/index.ts
index 93168de4b22b..ac53c2725078 100644
--- a/packages/web3-shared/base/src/utils/index.ts
+++ b/packages/web3-shared/base/src/utils/index.ts
@@ -1 +1,10 @@
+export * from './address'
+export * from './balance'
+export * from './constant'
+export * from './currency'
+export * from './token'
+export * from './types'
 export * from './number'
+export * from './resolver'
+export * from './pagination'
+export * from './predicate'
diff --git a/packages/web3-shared/base/src/utils/pagination.ts b/packages/web3-shared/base/src/utils/pagination.ts
new file mode 100644
index 000000000000..8f7907762fa1
--- /dev/null
+++ b/packages/web3-shared/base/src/utils/pagination.ts
@@ -0,0 +1,7 @@
+export function createPageable<T extends unknown>(data: T[] = [], currentPage = 0, hasNextPage = false) {
+    return {
+        data,
+        currentPage,
+        hasNextPage,
+    }
+}
diff --git a/packages/web3-shared/base/src/utils/predicate.ts b/packages/web3-shared/base/src/utils/predicate.ts
new file mode 100644
index 000000000000..340353283db1
--- /dev/null
+++ b/packages/web3-shared/base/src/utils/predicate.ts
@@ -0,0 +1,3 @@
+export function createPredicate<T, P extends T>(candidates: T[]) {
+    return (candidate: T): candidate is P => candidates.includes(candidate)
+}
diff --git a/packages/web3-shared/base/src/utils/resolver.ts b/packages/web3-shared/base/src/utils/resolver.ts
new file mode 100644
index 000000000000..e96b33ab8b3c
--- /dev/null
+++ b/packages/web3-shared/base/src/utils/resolver.ts
@@ -0,0 +1,159 @@
+import urlcat from 'urlcat'
+import type { ChainDescriptor, NetworkDescriptor, ProviderDescriptor } from '../specs'
+
+export function createLookupTableResolver<K extends keyof any, T>(map: Record<K, T>, fallback: T | ((key: K) => T)) {
+    function resolveFallback(key: K) {
+        if (typeof fallback === 'function') return (fallback as (key: K) => T)(key)
+        return fallback
+    }
+    return (key: K) => map[key] ?? resolveFallback(key)
+}
+
+export function createChainResolver<ChainId, SchemaType, NetworkType>(
+    descriptors: Array<ChainDescriptor<ChainId, SchemaType, NetworkType>>,
+) {
+    const getChainDescriptor = (chainId?: ChainId) => descriptors.find((x) => x.chainId === chainId)
+
+    return {
+        chainId: (name?: string) =>
+            name
+                ? descriptors.find((x) =>
+                      [x.name, x.fullName, x.shortName, x.network]
+                          .map((x) => x?.toLowerCase())
+                          .filter(Boolean)
+                          .includes(name),
+                  )?.chainId
+                : undefined,
+        coinMarketCapChainId: (chainId?: ChainId) => getChainDescriptor(chainId)?.coinMarketCapChainId,
+        coinGeckoChainId: (chainId?: ChainId) => getChainDescriptor(chainId)?.coinGeckoChainId,
+        coinGeckoPlatformId: (chainId?: ChainId) => getChainDescriptor(chainId)?.coinGeckoPlatformId,
+        chainName: (chainId?: ChainId) => getChainDescriptor(chainId)?.name,
+        chainFullName: (chainId?: ChainId) => getChainDescriptor(chainId)?.fullName,
+        chainShortName: (chainId?: ChainId) => getChainDescriptor(chainId)?.shortName,
+        chainColor: (chainId?: ChainId) => getChainDescriptor(chainId)?.color,
+        chainPrefix: (chainId?: ChainId) => 'ETH:',
+        chainNetworkType: (chainId?: ChainId) => getChainDescriptor(chainId)?.type,
+        infoURL: (chainId?: ChainId) => getChainDescriptor(chainId)?.explorerURL,
+        nativeCurrency: (chainId?: ChainId) => getChainDescriptor(chainId)?.nativeCurrency,
+        isValid: (chainId?: ChainId, testnet = false) => getChainDescriptor(chainId)?.network === 'mainnet' || testnet,
+        isMainnet: (chainId?: ChainId) => getChainDescriptor(chainId)?.network === 'mainnet',
+        isSupport: (chainId?: ChainId, feature?: string) =>
+            !!(feature && getChainDescriptor(chainId)?.features?.includes(feature)),
+    }
+}
+
+interface ExplorerRoutes {
+    addressPathname?: string
+    blockPathname?: string
+    transactionPathname?: string
+    domainPathname?: string
+    fungibleTokenPathname?: string
+    nonFungibleTokenPathname?: string
+}
+
+export function createExplorerResolver<ChainId, SchemaType, NetworkType>(
+    descriptors: Array<ChainDescriptor<ChainId, SchemaType, NetworkType>>,
+    {
+        addressPathname = '/address/:address',
+        blockPathname = '/block/:blockNumber',
+        transactionPathname = '/tx/:id',
+        domainPathname = '/address/:domain',
+        fungibleTokenPathname = '/address/:address',
+        nonFungibleTokenPathname = '/nft/:address/:tokenId',
+    }: ExplorerRoutes = {},
+) {
+    const getExplorerURL = (chainId: ChainId) => {
+        const chainDescriptor = descriptors.find((x) => x.chainId === chainId)
+        return chainDescriptor?.explorerURL ?? { url: '' }
+    }
+
+    return {
+        explorerURL: getExplorerURL,
+        addressLink: (chainId: ChainId, address: string) =>
+            urlcat(getExplorerURL(chainId).url, addressPathname, {
+                address,
+                ...getExplorerURL(chainId)?.parameters,
+            }),
+        blockLink: (chainId: ChainId, blockNumber: number) =>
+            urlcat(getExplorerURL(chainId).url, blockPathname, {
+                blockNumber,
+                ...getExplorerURL(chainId)?.parameters,
+            }),
+        transactionLink: (chainId: ChainId, id: string) =>
+            urlcat(getExplorerURL(chainId).url, transactionPathname, {
+                id,
+                ...getExplorerURL(chainId)?.parameters,
+            }),
+        domainLink: (chainId: ChainId, domain: string) =>
+            urlcat(getExplorerURL(chainId).url, domainPathname, {
+                domain,
+                ...getExplorerURL(chainId)?.parameters,
+            }),
+        fungibleTokenLink: (chainId: ChainId, address: string) =>
+            urlcat(getExplorerURL(chainId).url, fungibleTokenPathname, {
+                address,
+                ...getExplorerURL(chainId)?.parameters,
+            }),
+        nonFungibleTokenLink: (chainId: ChainId, address: string, tokenId: string) =>
+            urlcat(getExplorerURL(chainId).url, nonFungibleTokenPathname, {
+                address,
+                tokenId,
+                ...getExplorerURL(chainId)?.parameters,
+            }),
+    }
+}
+
+export function createNetworkResolver<ChainId, NetworkType>(
+    descriptors: Array<NetworkDescriptor<ChainId, NetworkType>>,
+) {
+    const getNetworkDescriptor = (networkType: NetworkType) => descriptors.find((x) => x.type === networkType)
+    return {
+        networkName: (networkType: NetworkType) => getNetworkDescriptor(networkType)?.name,
+        networkChainId: (networkType: NetworkType) => getNetworkDescriptor(networkType)?.chainId,
+    }
+}
+
+export function createProviderResolver<ChainId, ProviderType>(
+    descriptors: Array<ProviderDescriptor<ChainId, ProviderType>>,
+) {
+    const getProviderDescriptor = (providerType: ProviderType) => descriptors.find((x) => x.type === providerType)
+    return {
+        providerName: (providerType: ProviderType) => getProviderDescriptor(providerType)?.name,
+        providerHomeLink: (providerType: ProviderType) => getProviderDescriptor(providerType)?.homeLink,
+        providerShortenLink: (providerType: ProviderType) => getProviderDescriptor(providerType)?.shortenLink,
+        providerDownloadLink: (providerType: ProviderType) => getProviderDescriptor(providerType)?.downloadLink,
+    }
+}
+
+// A workaround for extracting un-exported internal types.
+// Learn more https://stackoverflow.com/questions/50321419/typescript-returntype-of-generic-function
+class Wrapper<ChainId, SchemaType, ProviderType, NetworkType> {
+    createChainResolver(descriptors: Array<ChainDescriptor<ChainId, SchemaType, NetworkType>>) {
+        return createChainResolver(descriptors)
+    }
+    createExplorerResolver(
+        descriptors: Array<ChainDescriptor<ChainId, SchemaType, NetworkType>>,
+        routes?: ExplorerRoutes,
+    ) {
+        return createExplorerResolver(descriptors, routes)
+    }
+    createNetworkResolver(descriptors: Array<NetworkDescriptor<ChainId, NetworkType>>) {
+        return createNetworkResolver(descriptors)
+    }
+    createProviderResolver(descriptors: Array<ProviderDescriptor<ChainId, ProviderType>>) {
+        return createProviderResolver(descriptors)
+    }
+}
+
+export type ReturnChainResolver<ChainId, SchemaType, NetworkType> = ReturnType<
+    Wrapper<ChainId, SchemaType, never, NetworkType>['createChainResolver']
+>
+export type ReturnExplorerResolver<ChainId, SchemaType, NetworkType> = ReturnType<
+    Wrapper<ChainId, SchemaType, never, NetworkType>['createExplorerResolver']
+>
+export type ReturnNetworkResolver<ChainId, NetworkType> = ReturnType<
+    Wrapper<ChainId, never, never, NetworkType>['createNetworkResolver']
+>
+export type ReturnProviderResolver<ChainId, ProviderType> = ReturnType<
+    Wrapper<ChainId, never, ProviderType, never>['createProviderResolver']
+>
diff --git a/packages/web3-shared/base/src/utils/token.ts b/packages/web3-shared/base/src/utils/token.ts
new file mode 100644
index 000000000000..84d50edbee52
--- /dev/null
+++ b/packages/web3-shared/base/src/utils/token.ts
@@ -0,0 +1,139 @@
+import {
+    FungibleToken,
+    NonFungibleToken,
+    NonFungibleTokenCollection,
+    NonFungibleTokenContract,
+    NonFungibleTokenMetadata,
+    TokenType,
+} from '../specs'
+import type { Constants } from './types'
+import { chain } from 'lodash-unified'
+
+export function createFungibleToken<ChainId, SchemaType>(
+    chainId: ChainId,
+    schema: SchemaType,
+    address: string,
+    name: string,
+    symbol: string,
+    decimals: number,
+    logoURL?: string,
+): FungibleToken<ChainId, SchemaType> {
+    return {
+        chainId,
+        type: TokenType.Fungible,
+        schema,
+        id: address,
+        address,
+        name,
+        symbol,
+        decimals,
+        logoURL,
+    }
+}
+export function createNonFungibleTokenMetadata<ChainId>(
+    chainId: ChainId,
+    name: string,
+    symbol: string,
+    description?: string,
+    mediaType?: string,
+    mediaURL?: string,
+    imageURL?: string,
+): NonFungibleTokenMetadata<ChainId> {
+    return {
+        chainId,
+        name,
+        symbol,
+        description,
+        mediaURL,
+        mediaType,
+        imageURL,
+    }
+}
+export function createNonFungibleTokenContract<ChainId, SchemaType>(
+    chainId: ChainId,
+    schema: SchemaType,
+    address: string,
+    name: string,
+    symbol: string,
+    balance?: number,
+): NonFungibleTokenContract<ChainId, SchemaType> {
+    return {
+        chainId,
+        name,
+        symbol,
+        address,
+        schema,
+        balance,
+    }
+}
+export function createNonFungibleTokenCollection<ChainId>(
+    chainId: ChainId,
+    name: string,
+    slug: string,
+    description?: string,
+    iconURL?: string,
+    verified?: boolean,
+    createdAt?: number,
+): NonFungibleTokenCollection<ChainId> {
+    return {
+        chainId,
+        name,
+        slug,
+        description,
+        iconURL,
+        verified,
+        createdAt,
+    }
+}
+export function createNonFungibleToken<ChainId, SchemaType>(
+    chainId: ChainId,
+    schema: SchemaType,
+    address: string,
+    tokenId: string,
+    metadata?: NonFungibleToken<ChainId, SchemaType>['metadata'],
+    contract?: NonFungibleToken<ChainId, SchemaType>['contract'],
+    collection?: NonFungibleToken<ChainId, SchemaType>['collection'],
+): NonFungibleToken<ChainId, SchemaType> {
+    return {
+        chainId,
+        id: address,
+        type: TokenType.NonFungible,
+        schema,
+        address,
+        tokenId,
+        metadata,
+        contract,
+        collection,
+    }
+}
+
+export function createFungibleTokensFromConstants<T extends Constants<string>, ChainId extends number, SchemaType>(
+    chainIds: Array<{ key: string; value: ChainId }>,
+    schema: SchemaType,
+    constants: T,
+) {
+    return (
+        key: keyof T,
+        name: string | ((chainId: ChainId) => string),
+        symbol: string | ((chainId: ChainId) => string),
+        decimals: number | ((chainId: ChainId) => number),
+    ) => {
+        return chain(chainIds)
+            .keyBy('value')
+            .mapValues<FungibleToken<ChainId, SchemaType>>(({ key: chainName, value: chainId }) => {
+                const evaluator = <R>(f: ((chainId: ChainId) => R) | R): R =>
+                    // @ts-ignore
+                    typeof f === 'function' ? f(chainId as ChainId) : f
+
+                return createFungibleToken<ChainId, SchemaType>(
+                    chainId,
+                    schema,
+                    constants[key][chainName as 'Mainnet'] ?? '',
+                    evaluator(name),
+                    evaluator(symbol),
+                    evaluator(decimals),
+                )
+            })
+            .value()
+    }
+}
diff --git a/packages/web3-shared/base/src/utils/types.ts b/packages/web3-shared/base/src/utils/types.ts
new file mode 100644
index 000000000000..d028ef33083e
--- /dev/null
+++ b/packages/web3-shared/base/src/utils/types.ts
@@ -0,0 +1,13 @@
+export type ChainIdEnum<ChainId extends number> = {
+    [key in ChainId]: string
+} & {
+    [key in 'Mainnet']: number
+}
+
+export type Primitive = string | number | boolean | symbol | undefined | null | bigint
+
+export type Constant<T = Primitive | Primitive[]> = {
+    [key in 'Mainnet']?: T
+}
+
+export type Constants<T = Primitive | Primitive[]> = Record<string, Constant<T>>
diff --git a/packages/web3-shared/base/tsconfig.json b/packages/web3-shared/base/tsconfig.json
index 0645b741df7c..cc131d330bfb 100644
--- a/packages/web3-shared/base/tsconfig.json
+++ b/packages/web3-shared/base/tsconfig.json
@@ -6,5 +6,5 @@
     "tsBuildInfoFile": "./dist/src.tsbuildinfo"
   },
   "include": ["./src", "./src/**/*.json"],
-  "references": [{ "path": "../../injected-script/sdk" }]
+  "references": [{ "path": "../../shared-base" }, { "path": "../../injected-script/sdk" }]
 }
diff --git a/packages/mask/src/plugins/EVM/assets/arbitrum.png b/packages/web3-shared/evm/assets/arbitrum.png
similarity index 100%
rename from packages/mask/src/plugins/EVM/assets/arbitrum.png
rename to packages/web3-shared/evm/assets/arbitrum.png
diff --git a/packages/mask/src/plugins/EVM/assets/aurora.png b/packages/web3-shared/evm/assets/aurora.png
similarity index 100%
rename from packages/mask/src/plugins/EVM/assets/aurora.png
rename to packages/web3-shared/evm/assets/aurora.png
diff --git a/packages/mask/src/plugins/EVM/assets/avalanche.png b/packages/web3-shared/evm/assets/avalanche.png
similarity index 100%
rename from packages/mask/src/plugins/EVM/assets/avalanche.png
rename to packages/web3-shared/evm/assets/avalanche.png
diff --git a/packages/mask/src/plugins/EVM/assets/binance.png b/packages/web3-shared/evm/assets/binance.png
similarity index 100%
rename from packages/mask/src/plugins/EVM/assets/binance.png
rename to packages/web3-shared/evm/assets/binance.png
diff --git a/packages/mask/src/plugins/EVM/assets/celo.png b/packages/web3-shared/evm/assets/celo.png
similarity index 100%
rename from packages/mask/src/plugins/EVM/assets/celo.png
rename to packages/web3-shared/evm/assets/celo.png
diff --git a/packages/mask/src/plugins/EVM/assets/coin98.png b/packages/web3-shared/evm/assets/coin98.png
similarity index 100%
rename from packages/mask/src/plugins/EVM/assets/coin98.png
rename to packages/web3-shared/evm/assets/coin98.png
diff --git a/packages/mask/src/plugins/EVM/assets/coinbase.png b/packages/web3-shared/evm/assets/coinbase.png
similarity index 100%
rename from packages/mask/src/plugins/EVM/assets/coinbase.png
rename to packages/web3-shared/evm/assets/coinbase.png
diff --git a/packages/mask/src/plugins/EVM/assets/conflux.png b/packages/web3-shared/evm/assets/conflux.png
similarity index 100%
rename from packages/mask/src/plugins/EVM/assets/conflux.png
rename to packages/web3-shared/evm/assets/conflux.png
diff --git a/packages/mask/src/plugins/EVM/assets/ethereum.png b/packages/web3-shared/evm/assets/ethereum.png
similarity index 100%
rename from packages/mask/src/plugins/EVM/assets/ethereum.png
rename to packages/web3-shared/evm/assets/ethereum.png
diff --git a/packages/mask/src/plugins/EVM/assets/fantom.png b/packages/web3-shared/evm/assets/fantom.png
similarity index 100%
rename from packages/mask/src/plugins/EVM/assets/fantom.png
rename to packages/web3-shared/evm/assets/fantom.png
diff --git a/packages/mask/src/plugins/EVM/assets/fortmatic.png b/packages/web3-shared/evm/assets/fortmatic.png
similarity index 100%
rename from packages/mask/src/plugins/EVM/assets/fortmatic.png
rename to packages/web3-shared/evm/assets/fortmatic.png
diff --git a/packages/mask/src/plugins/EVM/assets/harmony.png b/packages/web3-shared/evm/assets/harmony.png
similarity index 100%
rename from packages/mask/src/plugins/EVM/assets/harmony.png
rename to packages/web3-shared/evm/assets/harmony.png
diff --git a/packages/mask/src/plugins/EVM/assets/lucky_drop.png b/packages/web3-shared/evm/assets/lucky_drop.png
similarity index 100%
rename from packages/mask/src/plugins/EVM/assets/lucky_drop.png
rename to packages/web3-shared/evm/assets/lucky_drop.png
diff --git a/packages/mask/src/plugins/EVM/assets/maskwallet.png b/packages/web3-shared/evm/assets/maskwallet.png
similarity index 100%
rename from packages/mask/src/plugins/EVM/assets/maskwallet.png
rename to packages/web3-shared/evm/assets/maskwallet.png
diff --git a/packages/mask/src/plugins/EVM/assets/mathwallet.png b/packages/web3-shared/evm/assets/mathwallet.png
similarity index 100%
rename from packages/mask/src/plugins/EVM/assets/mathwallet.png
rename to packages/web3-shared/evm/assets/mathwallet.png
diff --git a/packages/mask/src/plugins/EVM/assets/metamask.png b/packages/web3-shared/evm/assets/metamask.png
similarity index 100%
rename from packages/mask/src/plugins/EVM/assets/metamask.png
rename to packages/web3-shared/evm/assets/metamask.png
diff --git a/packages/mask/src/plugins/EVM/assets/nfts.png b/packages/web3-shared/evm/assets/nfts.png
similarity index 100%
rename from packages/mask/src/plugins/EVM/assets/nfts.png
rename to packages/web3-shared/evm/assets/nfts.png
diff --git a/packages/mask/src/plugins/EVM/assets/polygon.png b/packages/web3-shared/evm/assets/polygon.png
similarity index 100%
rename from packages/mask/src/plugins/EVM/assets/polygon.png
rename to packages/web3-shared/evm/assets/polygon.png
diff --git a/packages/web3-shared/evm/assets/torus.png b/packages/web3-shared/evm/assets/torus.png
new file mode 100644
index 0000000000000000000000000000000000000000..9ccd43c0d489ac2ff7de50335aa63fc01ae1d22c
GIT binary patch
literal 3975
zcmYLMcT`i$*S(j}F(4f=^ez%gloFbB2oQ=$FA50KLP=;31p$%XL^?r=1pz4<N&pop
zf>c3@BIOY<AieY8sriMs*0;X1X4dREd+ynLX5Bw#k}c6jP-cE+005vS#`@L(0IHpJ
zMhG=CtNo&zI)GSfBVF*@r^_+a2~&`<0~P>SIL|r=6qWE%7o=I5*%(mC{{jR+2tY#*
z&@uybtN;Tiz{Cr%Tm;Su0Z>tZRs5_`rvL~*7y%|efCCN+pg<WPP&ET$NPyVRLOdyF
z6&SeyP9;#>nMO4mVl@KL&;jQJL6tO!J?Tt^o(<qp1r?$oH@*S%tN@=TsFDh~c?f{C
zz<C)^4tJ)0L7PUq47_j+pgRY`Od!TB0E7Wz_!{Kbp@K65?6Ne-$7g_^9hCAoE6X8A
zqgzGQ0tL+>POAVN6ujg|bpj&dK&AVjYUbHq7&ySINdPSqD2D|=8c@^@;8uY+uLI0{
zH2SXq8d~s@Kfr~cK|Z3<EIP9d6^1x2gTmHSQ5s|}z#>4^0c8UK2tCcUinH@!lLUB?
zppYdf?FGt5oY|mS0%>TpN|j<M*&UQI5``Mpxs(szC_6`#*w+-Xa7uYE<?js&Cx#MI
zMbS;A0QBb@M=9>5RKQ04UV+7YoH{(fS);E5G~80kdT2Yh+dcu9K+kh>X#eEOcT<~`
zi$=kPoj=6w-tK@}5sm8__c~66ylRzV2JWjQeU+Jvm4*6rvFbcw^c$5(+gE#L+}!lu
zT(?c3hA%hl&|+NpdGLpiB2K&6(%rW7FQf+zZ$)O7*E5~x`gG>@|Kl2kqR9|I^LCy3
zhtZno>)1q;Y~qjgxJ)=7e#f0&$T(*@B5Xou7GAb2uI8=(h@IQ&+BJ*qKf9Ts2FgPl
z2M4&r@0ug~`>$ON8{VjYad8<ga4k`fStLEvhP$0CO!`d+&bCHxu064XQ-Xhz682X<
zXZxT~zK(wxdfA4d`}0aRYKPJe2oqem+P19Xd^bybPx;H)6<u+^I-GH{mMNx6sKHs)
z)aSKVDxdP<!TWnD1J%A(KHfHVH*6nQVy*gzi)N79Q|Om9uZYPb#&n0!mIv~dQ3IH(
z6O{<DA4hn@lPR>1e_Q%UW)ivmc$Hw#8s2gN{|vXKqFFY@Bl7Q}+p4p~Ubtxue*n9q
zlVCX_uX{;3cSe+;Y3RLKc$9%YobSSg5h}6Ax_04gADs$Hx8S%x6$eL)1cTLe1NHOe
zF~FwWP);;~q2(#G0*_ZJco??$uw0i=e}_5ovsT0fL7ny#Z%@9>2Z>{f1S#2%hGVWJ
zd{3^azxHs4ZA!}IT)(4pWM*Em`4yoV-<(rY=tB_k^IG}rRZ>`N;Pm>YD~VQ3AawtZ
z#qJgPGW^c#vgu`S&Y8rEMW35T?zrj?2K80Ih1yXBrem85e1gNcJGw^>VtOagKax&P
zCoT7OL+gt>5R!($UrzTPq8C_3ZEumL?$?}CT6KUVBi1BG`1@bYozf!%F8J5V^0p8Y
z(2lH5#VNg-`IgF643nd|DN(T_c9Qa3DN)I2Tey5~a#RBPhH^bua#T9nMyozIDJmYF
z6Q^=8-`wQ%Ft58`xv{kcRU?06{4~#ImU`l}KO-pc^HPlEZ7uJ3!YeY?;^vMv!)Ik)
z>1%Up{l1az^+3NwetU^j-dexEm=n*v_eApUajkFShPVBb;S6!Tt)b+4@={5bn%gl9
zpXRtc%n^9%wN{ep>)^+^uH{g>=xsWlQXrqlFxMzzP{PLZbWY5JDGG|GrQc5Ata&({
zku?5hZL(x+66G2}wkr8>80@-h>(-LSDwLdGJtCoJ>hPn1RG#;>pX3vHjxiO{;Oqvk
z=%oy=cJ4A_)D-=_p>(Obr0BsHbrJfdU2%Sg3^da<ir?Wr4ncAlL4nus);W}hUk|Gf
z_XKgaQ!A0xUWn|RTx^(F!&!$!-<j9alS9CJ%q!w2S^n@SF7b!A=_vHh6&Qb?M@dVn
z_NG@rCfP>N?vBkm-AW%NFnj{fGlH7_{0mKSoa??$ul|75+CufOP~S;s8zE+a-e=`{
z6Wo2|wwVKPDqV*m`1dMs*js+_h!c1B^wHhJCSHNk5%B;ww(Yul#66Rq(DL{%#o{aG
zI8G>W|JHG(aJx`g$^7pxiEsP;j*nSkZW{?0r{K*ihlT1<6*Hn65?^*tg0#uKMht!8
zCJ%o4v>>K+l;(K@=euBE-yW}Y_wa6iA+9$dj6%L<8eq262+`Z}|K`<eouab)nefV_
zKjnO8DXM;<eGC3>e-cD<IsI9?D^&B>b6~+j+R><p^(D{uNM#}GdV)hrl)l1v<KYkS
z&gftHcGkh3YnLtR{Y3ayujRG&xG}vD@-Jd(?j3*`cqfTPk~7>FzMaJAhWJhUifqZp
z1&1vsry@S=ju?emMUtW`h>5h_#;v*PV&uIgB2i1YzrQ*OQGAmx*$vw$`fl%+PFH5i
zIYIFxF&Rv*FGhYX{iJloI9i-zz-`+)P51T|V!>_0dKsrO5Bqds+=d+SUR#@U87GgP
z4Tw`*9r~sn)~g#r{D|*Fzd4B=fNke6eTwhF+hfzYJS+><!zfZ5K56WB7K*fmYIRYM
zgt9zu2nE!|dNMvK@=H<<Pdx+e+yQlIXFxWUBRt2G_I(k{oCd;94?&ZwHe$qBk(gvz
zMILgN8)o!8#&*Q)rAxk=aU%`9Z0@rvTyp7@aO{66t9{i@2Lb#c=KA)&Cr!W{G8uQA
znTBhFq^n=(b5An<eL{p(cT}T?v#-XBBaZPaY{ujVF_yotJ1b5CA=4u6f(wzpm8|`H
z%-lvpxmi%*&`sHou)g6Pb{DJbRpRdOcnodw`m5mUhC(nmiyL{Il49<4k1@1`Zn)r_
z0QB@a=we%LDf4qFnlCa`f{CmUDxsaMaj;^|Dzd908Xd=LHF%IZ+d$M97ZINvbto`>
zz6J3?OD!i1|M-$2Vvg^vh#Q_>jdpLu`|ov=nUffT|8R3Dd%JYpGmcOXLFs&joiq>C
zcS-!tAfx9sFq@&2EcZxctWdFX>T2J~U($;oM=(q~`^SMVw%<h=$KVa6k?i>uUR6u=
z%0V&0Iq=f0l8&55Y~N*M(w<erMrpPJB*h0ux}K6$tS<V((;IO?j1P-UrS8qIbXj7h
zMt>Fleg53l{7?2gs<e8;x5sR3+do)hzoq@Suct8K%<8d9WqFaj1)R%wZ=$nUV%2ou
z^kiBh7d4UDSt6Vd!Nxf=4KeL`Q`s6STSrG_1*xndHPKlj{bBMFYKKJx6=Wxh3X-~v
z+BuLw?exf_6b8jn3U6dk3dL|#L!20@!B={KSccS1D=8B-%GxMnHp{9l+q29XDx0~H
zl~&f}m~~KA?UqHjDU~ezav)6pn|l?J>#92W(XHo1QHk~|IUdi6y4>pV0t#Q8W8>yl
z(FH#6C+{F}VqQgqV%u$tX@%sFm+EhWZayU{?QQA8_<ZUfcT{pS7#0ndZB=}X&nBa)
z)Q@+mwEG$+TchC47Qso}CDB^Y?8<SCo{WQ?^M6Pd?jYs$AL2wf90v-XyAnS2ySR2q
zgN?pOeO=WeYyhO9ROFBQYo1Uld%Rt!wygI)l3ZbdEl27kG3*cZmI&+Pe7V`kg{f*y
zDXUMf2o525vDW-!KksVrdBcxzT44-4Nx@{&h|_bmgvSg^L%n!i6n0OJ?RjCU_DLR@
za9hv}ksmap^oeOfqreNk_#p5I;7Yzle$Cm#j&IpWyG0h1ENW+C?p44Za}GD!nn`;V
z`Zb;Jb5v+7xLwyfFuPD-KcsZrKLGQK?{R-jR5lIXP!#8@9MWu7?nAPFDDbTNVhCHm
zrtk5H$f}N|90C=J{mvHcc(o}gW1lc~u9;-dD-6S6^%?N(WrOpu_3J{c$HB!6YaXf3
z<dapWYP1CF;&Zz1+6g&be*0;t5&W?mREqtxTRFbeaXI3V4Q$;`h<(M%r+rN<^_ezN
zO}R=#bYzhGULz|qNzcELeERu=c8Cv}3=}Jet7dr4FIWlMUQWm$ea$+pQmwN)XyWG&
zQSLLGNc`~>BLv4h(1Ts1r)|zTXvgs0d-+heTZ8<SPn59T?7bxTK|84YGhe={a!N90
z<?rvVGz+XdPg*z)Plg(qaAj?ZA7nDpEz0#KQ(p$VV*NP;YFy1iQa$|X1!~blt>^om
zkBzPM5H4c<Sq18}hKL+}UfIQ~gbK_QUQIbO!=9JylH%bH3cMD)+{%+E8#9^OL$dX@
zG$?T#Ti*B-XMp<}!IRKKH(m3!iJyMvx-P>dyui1z=))Vb^bdL)pK;@MjBWFJh8u6=
z4vh0OlRP$LkauAgn#mp;7my&=s78uMO%f6fU3ED0&3ILg?Q9@B%m$uvNghpbkJ2Nd
zhyKRweN!!;ldHV^Tr$*}nF6F<madtbkocl9MhxUepHU0ZAur^1WJzZ<=C9%=cCD*b
zKf0E4TKCF+qAp5Dn?UQIrFv{YkuuyJBIg-o;%`9htZJf~b><`{#@ft1GTz?HM5pH+
z2PXF@9*s<|&A%7pTnP+)N<zc!7ow+|#$Bq}o9~^nsOugsollV8Uca-oMA}{aLfcEd
z#Jr1om`kBvVn)5to}(G!-FEw-AuCHI5nIJfN4|xKP7VK4PX}+)`67t?`a65G*{r64
zAIw6RZw)$Rg^d<1UX{{RLJ9ZSUu_%z`R$S!4AJ&(#P42-T^>{}$z|6zTP9vYY_Nf$
zV*)Vk?j*(RhTJ1wx!COFZH0?x1P$kA$}yx`A7!uWD{+QGt&IDI8(nqS_hb2`-_!^^
z-sD+~oLvurJdE_34UM%Nc=~ZJ^!e-+f2+~fW=*{0KTfo<d<j=>VcpYOig_R3+T?j-
z^bh~GPiNMt@(UB`<)7Ivp+0N>a(q`<ogJ}7oIWYTCq$AaA{|Zt0`U}&pQiKTt{!b|
zv9jEnbDu`ApG%Ke`y2JkExnD@k>R7iAgV^S!&?zD-4PQNgz+~`y{F=;2qHznDZQD&
z-1db_k@>#M-kXN)xk=27HAhP^|4+iz`DE>;S+@z5*-JTruQqJ;G?57IUryI$gV)~H
zHIpTgVhNA!Y-~-WU2E&AYo(1=Xv$i}D{cN6my;cqmNE1OBvj<zmo@aKzxls+MO)UR
wqP)`V!d$$E{ADS1S%jFT+*LY(b&Ef2a$ehs{&#;v&)#_^259{{-J5a$1JTnh+yDRo

literal 0
HcmV?d00001

diff --git a/packages/mask/src/plugins/EVM/assets/walletconnect.png b/packages/web3-shared/evm/assets/walletconnect.png
similarity index 100%
rename from packages/mask/src/plugins/EVM/assets/walletconnect.png
rename to packages/web3-shared/evm/assets/walletconnect.png
diff --git a/packages/mask/src/plugins/EVM/assets/xdai.png b/packages/web3-shared/evm/assets/xdai.png
similarity index 100%
rename from packages/mask/src/plugins/EVM/assets/xdai.png
rename to packages/web3-shared/evm/assets/xdai.png
diff --git a/packages/web3-shared/evm/constants/README.md b/packages/web3-shared/evm/constants/README.md
deleted file mode 100644
index b5c833e3c094..000000000000
--- a/packages/web3-shared/evm/constants/README.md
+++ /dev/null
@@ -1,11 +0,0 @@
-# Constants
-
-## Usage
-
-```typescript
-// use constant in the JS runtime
-const { ETHER_ADDRESS } = getEthereumConstants(ChainId.Mainnet)
-
-// use constant in React **hooks**
-const { ETHER_ADDRESS } = useEthereumConstants(ChainId.Mainnet)
-```
diff --git a/packages/web3-shared/evm/assets/chains.json b/packages/web3-shared/evm/constants/chains.json
similarity index 66%
rename from packages/web3-shared/evm/assets/chains.json
rename to packages/web3-shared/evm/constants/chains.json
index 4c8a00736ca8..e02e36228d28 100644
--- a/packages/web3-shared/evm/assets/chains.json
+++ b/packages/web3-shared/evm/constants/chains.json
@@ -1,19 +1,20 @@
 [
     {
-        "name": "Ethereum Mainnet",
-        "chain": "ETH",
+        "chainId": 1,
+        "type": "Ethereum",
+        "name": "ETH",
+        "color": "rgb(28, 104, 243)",
         "network": "mainnet",
+        "fullName": "Ethereum",
+        "shortName": "eth",
         "features": ["EIP1559"],
         "nativeCurrency": {
+            "chainId": 1,
             "name": "Ether",
             "symbol": "ETH",
-            "decimals": 18,
-            "logoURI": "https://static.debank.com/image/token/logo_url/eth/935ae4e4d1d12d59a99717a24f2540b5.png"
+            "decimals": 18
         },
         "infoURL": "https://ethereum.org",
-        "shortName": "eth",
-        "fullName": "Ethereum",
-        "chainId": 1,
         "explorers": [
             {
                 "name": "etherscan",
@@ -23,19 +24,21 @@
         ]
     },
     {
-        "name": "Ethereum Testnet Ropsten",
-        "chain": "ETH",
+        "chainId": 3,
+        "type": "Ethereum",
+        "name": "ETH",
+        "color": "rgb(255, 65, 130)",
         "network": "ropsten",
+        "fullName": "Ethereum",
+        "shortName": "rop",
         "features": ["EIP1559"],
         "nativeCurrency": {
+            "chainId": 3,
             "name": "Ropsten Ether",
             "symbol": "ROP",
             "decimals": 18
         },
         "infoURL": "https://github.com/ethereum/ropsten",
-        "shortName": "rop",
-        "fullName": "Ethereum",
-        "chainId": 3,
         "explorers": [
             {
                 "name": "etherscan",
@@ -45,19 +48,21 @@
         ]
     },
     {
-        "name": "Ethereum Testnet Rinkeby",
-        "chain": "ETH",
+        "chainId": 4,
+        "type": "Ethereum",
+        "name": "ETH",
+        "color": "rgb(133, 89, 255)",
         "network": "rinkeby",
+        "fullName": "Ethereum",
+        "shortName": "rin",
         "features": [],
         "nativeCurrency": {
+            "chainId": 4,
             "name": "Rinkeby Ether",
             "symbol": "RIN",
             "decimals": 18
         },
         "infoURL": "https://www.rinkeby.io",
-        "shortName": "rin",
-        "fullName": "Ethereum",
-        "chainId": 4,
         "explorers": [
             {
                 "name": "etherscan",
@@ -67,19 +72,21 @@
         ]
     },
     {
-        "name": "Ethereum Testnet Kovan",
-        "chain": "ETH",
+        "chainId": 42,
+        "type": "Ethereum",
+        "name": "ETH",
+        "color": "rgb(133, 89,255)",
         "network": "kovan",
+        "fullName": "Ethereum",
+        "shortName": "kov",
         "features": [],
         "nativeCurrency": {
+            "chainId": 42,
             "name": "Kovan Ether",
             "symbol": "KOV",
             "decimals": 18
         },
         "infoURL": "https://kovan-testnet.github.io/website",
-        "shortName": "kov",
-        "fullName": "Ethereum",
-        "chainId": 42,
         "explorers": [
             {
                 "name": "etherscan",
@@ -89,19 +96,21 @@
         ]
     },
     {
-        "name": "Ethereum Testnet Görli",
-        "chain": "ETH",
+        "chainId": 5,
+        "type": "Ethereum",
+        "name": "ETH",
+        "color": "rgb(48, 153, 242)",
         "network": "goerli",
+        "fullName": "Ethereum",
+        "shortName": "gor",
         "features": [],
         "nativeCurrency": {
+            "chainId": 5,
             "name": "Görli Ether",
             "symbol": "GOR",
             "decimals": 18
         },
         "infoURL": "https://goerli.net/#about",
-        "shortName": "gor",
-        "fullName": "Ethereum",
-        "chainId": 5,
         "explorers": [
             {
                 "name": "etherscan",
@@ -111,20 +120,21 @@
         ]
     },
     {
-        "name": "BNB Chain Mainnet",
-        "chain": "BNB Chain",
+        "chainId": 56,
+        "type": "Binance",
+        "name": "BNB Chain",
+        "color": "rgb(240, 185, 10)",
         "network": "mainnet",
+        "fullName": "Binance",
+        "shortName": "bnb",
         "features": [],
         "nativeCurrency": {
+            "chainId": 56,
             "name": "Binance Chain Native Token",
             "symbol": "BNB",
-            "decimals": 18,
-            "logoURI": "https://static.debank.com/image/bsc_token/logo_url/bsc/8bfdeaa46fe9be8f5cd43a53b8d1eea1.png"
+            "decimals": 18
         },
         "infoURL": "https://www.binance.org",
-        "shortName": "bnb",
-        "fullName": "Binance",
-        "chainId": 56,
         "explorers": [
             {
                 "name": "bscscan",
@@ -134,19 +144,21 @@
         ]
     },
     {
-        "name": "Binance Smart Chain Testnet",
-        "chain": "BNB Chain",
+        "chainId": 97,
+        "type": "Binance",
+        "name": "BNB Chain",
+        "color": "rgb(240, 185, 10)",
         "network": "chapel",
+        "fullName": "Binance",
+        "shortName": "bnbt",
         "features": [],
         "nativeCurrency": {
+            "chainId": 97,
             "name": "Binance Chain Native Token",
             "symbol": "tBNB",
             "decimals": 18
         },
         "infoURL": "https://testnet.binance.org/",
-        "shortName": "bnbt",
-        "fullName": "Binance",
-        "chainId": 97,
         "explorers": [
             {
                 "name": "bscscan-testnet",
@@ -156,20 +168,21 @@
         ]
     },
     {
-        "name": "Matic Mainnet",
-        "chain": "Polygon",
+        "chainId": 137,
+        "type": "Polygon",
+        "name": "Polygon",
+        "color": "rgb(119, 62, 225)",
         "network": "mainnet",
+        "fullName": "Polygon",
+        "shortName": "matic",
         "features": ["EIP1559"],
         "nativeCurrency": {
+            "chainId": 137,
             "name": "Matic",
             "symbol": "MATIC",
-            "decimals": 18,
-            "logoURI": "https://static.debank.com/image/matic_token/logo_url/matic/e5a8a2860ba5cf740a474dcab796dc63.png"
+            "decimals": 18
         },
         "infoURL": "https://matic.network/",
-        "shortName": "matic",
-        "fullName": "Polygon",
-        "chainId": 137,
         "explorers": [
             {
                 "name": "matic",
@@ -179,19 +192,21 @@
         ]
     },
     {
-        "name": "Matic Testnet Mumbai",
-        "chain": "Matic",
+        "chainId": 80001,
+        "type": "Polygon",
+        "name": "Polygon",
+        "color": "rgb(130, 71, 229)",
         "network": "testnet",
+        "fullName": "Polygon",
+        "shortName": "maticmum",
         "features": ["EIP1559"],
         "nativeCurrency": {
+            "chainId": 80001,
             "name": "Matic",
             "symbol": "tMATIC",
             "decimals": 18
         },
         "infoURL": "https://matic.network/",
-        "shortName": "maticmum",
-        "fullName": "Polygon",
-        "chainId": 80001,
         "explorers": [
             {
                 "name": "matic",
@@ -201,20 +216,21 @@
         ]
     },
     {
-        "name": "Arbitrum One",
-        "chain": "Arbitrum",
+        "chainId": 42161,
+        "type": "Arbitrum",
+        "name": "Arbitrum",
+        "color": "rgb(36, 150, 238)",
         "network": "mainnet",
+        "fullName": "Arbitrum",
+        "shortName": "arb",
         "features": [],
         "nativeCurrency": {
+            "chainId": 42161,
             "name": "Arbitrum Ether",
             "symbol": "ARETH",
-            "decimals": 18,
-            "logoURI": "https://static.debank.com/image/token/logo_url/eth/935ae4e4d1d12d59a99717a24f2540b5.png"
+            "decimals": 18
         },
         "infoURL": "https://arbitrum.io",
-        "shortName": "arb",
-        "fullName": "Arbitrum",
-        "chainId": 42161,
         "explorers": [
             {
                 "name": "arbitrum",
@@ -224,19 +240,21 @@
         ]
     },
     {
-        "name": "Arbitrum Testnet Rinkeby",
-        "chain": "Arbitrum",
+        "chainId": 421611,
+        "type": "Arbitrum",
+        "name": "Arbitrum",
+        "color": "rgb(36, 150, 238)",
         "network": "rinkeby",
+        "fullName": "Arbitrum",
+        "shortName": "arb-rinkeby",
         "features": [],
         "nativeCurrency": {
+            "chainId": 421611,
             "name": "Arbitrum Rinkeby Ether",
             "symbol": "ARETH",
             "decimals": 18
         },
         "infoURL": "https://arbitrum.io",
-        "shortName": "arb-rinkeby",
-        "fullName": "Arbitrum",
-        "chainId": 421611,
         "explorers": [
             {
                 "name": "arbitrum-rinkeby",
@@ -246,452 +264,453 @@
         ]
     },
     {
-        "name": "Expanse Network",
-        "chain": "EXP",
+        "chainId": 2,
+        "name": "EXP",
         "network": "mainnet",
+        "shortName": "exp",
         "features": [],
         "nativeCurrency": {
+            "chainId": 2,
             "name": "Expanse Network Ether",
             "symbol": "EXP",
             "decimals": 18
         },
-        "infoURL": "https://expanse.tech",
-        "shortName": "exp",
-        "chainId": 2
+        "infoURL": "https://expanse.tech"
     },
     {
-        "name": "ThaiChain",
-        "chain": "TCH",
+        "chainId": 7,
+        "name": "TCH",
         "network": "mainnet",
+        "shortName": "tch",
         "features": [],
         "nativeCurrency": {
+            "chainId": 7,
             "name": "ThaiChain Ether",
             "symbol": "TCH",
             "decimals": 18
         },
-        "infoURL": "https://thaichain.io",
-        "shortName": "tch",
-        "chainId": 7
+        "infoURL": "https://thaichain.io"
     },
     {
-        "name": "Ubiq Network Mainnet",
-        "chain": "UBQ",
+        "chainId": 8,
+        "name": "UBQ",
         "network": "mainnet",
+        "shortName": "ubq",
         "features": [],
         "nativeCurrency": {
+            "chainId": 8,
             "name": "Ubiq Ether",
             "symbol": "UBQ",
             "decimals": 18
         },
-        "infoURL": "https://ubiqsmart.com",
-        "shortName": "ubq",
-        "chainId": 8
+        "infoURL": "https://ubiqsmart.com"
     },
     {
-        "name": "Ubiq Network Testnet",
-        "chain": "UBQ",
+        "chainId": 9,
+        "name": "UBQ",
         "network": "mainnet",
+        "shortName": "tubq",
         "features": [],
         "nativeCurrency": {
+            "chainId": 9,
             "name": "Ubiq Testnet Ether",
             "symbol": "TUBQ",
             "decimals": 18
         },
-        "infoURL": "https://ethersocial.org",
-        "shortName": "tubq",
-        "chainId": 9
+        "infoURL": "https://ethersocial.org"
     },
     {
-        "name": "Optimistic Ethereum",
-        "chain": "OPT",
+        "chainId": 10,
+        "type": "Optimistic",
+        "name": "OPT",
         "network": "mainnet",
+        "shortName": "oeth",
         "features": [],
         "nativeCurrency": {
+            "chainId": 10,
             "name": "Ether",
             "symbol": "OETH",
             "decimals": 18
         },
-        "infoURL": "https://optimism.io",
-        "shortName": "oeth",
-        "chainId": 10
+        "infoURL": "https://optimism.io"
     },
     {
-        "name": "Metadium Mainnet",
-        "chain": "META",
+        "chainId": 11,
+        "name": "META",
         "network": "mainnet",
+        "shortName": "meta",
         "features": [],
         "nativeCurrency": {
+            "chainId": 11,
             "name": "Metadium Mainnet Ether",
             "symbol": "META",
             "decimals": 18
         },
-        "infoURL": "https://metadium.com",
-        "shortName": "meta",
-        "chainId": 11
+        "infoURL": "https://metadium.com"
     },
     {
-        "name": "Metadium Testnet",
-        "chain": "META",
+        "chainId": 12,
+        "name": "META",
         "network": "testnet",
+        "shortName": "kal",
         "features": [],
         "nativeCurrency": {
+            "chainId": 12,
             "name": "Metadium Testnet Ether",
             "symbol": "KAL",
             "decimals": 18
         },
-        "infoURL": "https://metadium.com",
-        "shortName": "kal",
-        "chainId": 12
+        "infoURL": "https://metadium.com"
     },
     {
-        "name": "Diode Testnet Staging",
-        "chain": "DIODE",
+        "chainId": 13,
+        "name": "DIODE",
         "network": "testnet",
+        "shortName": "dstg",
         "features": [],
         "nativeCurrency": {
+            "chainId": 13,
             "name": "Staging Diodes",
             "symbol": "sDIODE",
             "decimals": 18
         },
-        "infoURL": "https://diode.io/staging",
-        "shortName": "dstg",
-        "chainId": 13
+        "infoURL": "https://diode.io/staging"
     },
     {
-        "name": "Flare Mainnet",
-        "chain": "FLR",
+        "chainId": 14,
+        "name": "FLR",
         "network": "flare",
+        "shortName": "flr",
         "features": [],
         "nativeCurrency": {
+            "chainId": 14,
             "name": "Spark",
             "symbol": "FLR",
             "decimals": 18
         },
-        "infoURL": "https://flare.xyz",
-        "shortName": "flr",
-        "chainId": 14
+        "infoURL": "https://flare.xyz"
     },
     {
-        "name": "Diode Prenet",
-        "chain": "DIODE",
+        "chainId": 15,
+        "name": "DIODE",
         "network": "mainnet",
+        "shortName": "diode",
         "features": [],
         "nativeCurrency": {
+            "chainId": 15,
             "name": "Diodes",
             "symbol": "DIODE",
             "decimals": 18
         },
-        "infoURL": "https://diode.io/prenet",
-        "shortName": "diode",
-        "chainId": 15
+        "infoURL": "https://diode.io/prenet"
     },
     {
-        "name": "Flare Testnet Coston",
-        "chain": "FLR",
+        "chainId": 16,
+        "name": "FLR",
         "network": "coston",
+        "shortName": "cflr",
         "features": [],
         "nativeCurrency": {
+            "chainId": 16,
             "name": "Coston Spark",
             "symbol": "CFLR",
             "decimals": 18
         },
-        "infoURL": "https://github.com/flare-eng/coston",
-        "shortName": "cflr",
-        "chainId": 16
+        "infoURL": "https://github.com/flare-eng/coston"
     },
     {
-        "name": "ThaiChain 2.0 ThaiFi",
-        "chain": "TCH",
+        "chainId": 17,
+        "name": "TCH",
         "network": "thaifi",
+        "shortName": "tfi",
         "features": [],
         "nativeCurrency": {
+            "chainId": 17,
             "name": "Thaifi Ether",
             "symbol": "TFI",
             "decimals": 18
         },
-        "infoURL": "https://exp.thaifi.com",
-        "shortName": "tfi",
-        "chainId": 17
+        "infoURL": "https://exp.thaifi.com"
     },
     {
-        "name": "ThunderCore Testnet",
-        "chain": "TST",
+        "chainId": 18,
+        "name": "TST",
         "network": "testnet",
+        "shortName": "TST",
         "features": [],
         "nativeCurrency": {
+            "chainId": 18,
             "name": "ThunderCore Testnet Ether",
             "symbol": "TST",
             "decimals": 18
         },
-        "infoURL": "https://thundercore.com",
-        "shortName": "TST",
-        "chainId": 18
+        "infoURL": "https://thundercore.com"
     },
     {
-        "name": "ELA-ETH-Sidechain Mainnet",
-        "chain": "ELA-ETH",
+        "chainId": 20,
+        "name": "ELA-ETH",
         "network": "mainnet",
+        "shortName": "elaeth",
         "features": [],
         "nativeCurrency": {
+            "chainId": 20,
             "name": "Elastos",
             "symbol": "ELA",
             "decimals": 18
         },
-        "infoURL": "https://www.elastos.org/",
-        "shortName": "elaeth",
-        "chainId": 20
+        "infoURL": "https://www.elastos.org/"
     },
     {
-        "name": "ELA-ETH-Sidechain Testnet",
-        "chain": "ELA-ETH",
+        "chainId": 21,
+        "name": "ELA-ETH",
         "network": "testnet",
+        "shortName": "elaetht",
         "features": [],
         "nativeCurrency": {
+            "chainId": 21,
             "name": "Elastos",
             "symbol": "tELA",
             "decimals": 18
         },
-        "infoURL": "https://elaeth.io/",
-        "shortName": "elaetht",
-        "chainId": 21
+        "infoURL": "https://elaeth.io/"
     },
     {
-        "name": "ELA-DID-Sidechain Mainnet",
-        "chain": "ELA-ETH",
+        "chainId": 22,
+        "name": "ELA-ETH",
         "network": "mainnet",
+        "shortName": "eladid",
         "features": [],
         "nativeCurrency": {
+            "chainId": 22,
             "name": "Elastos",
             "symbol": "ELA",
             "decimals": 18
         },
-        "infoURL": "https://www.elastos.org/",
-        "shortName": "eladid",
-        "chainId": 22
+        "infoURL": "https://www.elastos.org/"
     },
     {
-        "name": "ELA-DID-Sidechain Testnet",
-        "chain": "ELA-ETH",
+        "chainId": 23,
+        "name": "ELA-ETH",
         "network": "testnet",
+        "shortName": "eladidt",
         "features": [],
         "nativeCurrency": {
+            "chainId": 23,
             "name": "Elastos",
             "symbol": "tELA",
             "decimals": 18
         },
-        "infoURL": "https://elaeth.io/",
-        "shortName": "eladidt",
-        "chainId": 23
+        "infoURL": "https://elaeth.io/"
     },
     {
-        "name": "RSK Mainnet",
-        "chain": "RSK",
+        "chainId": 30,
+        "name": "RSK",
         "network": "mainnet",
+        "shortName": "rsk",
         "features": [],
         "nativeCurrency": {
+            "chainId": 30,
             "name": "RSK Mainnet Ether",
             "symbol": "RBTC",
             "decimals": 18
         },
-        "infoURL": "https://rsk.co",
-        "shortName": "rsk",
-        "chainId": 30
+        "infoURL": "https://rsk.co"
     },
     {
-        "name": "RSK Testnet",
-        "chain": "RSK",
+        "chainId": 31,
+        "name": "RSK",
         "network": "testnet",
+        "shortName": "trsk",
         "features": [],
         "nativeCurrency": {
+            "chainId": 31,
             "name": "RSK Testnet Ether",
             "symbol": "tRBTC",
             "decimals": 18
         },
-        "infoURL": "https://rsk.co",
-        "shortName": "trsk",
-        "chainId": 31
+        "infoURL": "https://rsk.co"
     },
     {
-        "name": "GoodData Testnet",
-        "chain": "GooD",
+        "chainId": 32,
+        "name": "GooD",
         "network": "testnet",
+        "shortName": "GooDT",
         "features": [],
         "nativeCurrency": {
+            "chainId": 32,
             "name": "GoodData Testnet Ether",
             "symbol": "GooD",
             "decimals": 18
         },
-        "infoURL": "https://www.goodata.org",
-        "shortName": "GooDT",
-        "chainId": 32
+        "infoURL": "https://www.goodata.org"
     },
     {
-        "name": "GoodData Mainnet",
-        "chain": "GooD",
+        "chainId": 33,
+        "name": "GooD",
         "network": "mainnet",
+        "shortName": "GooD",
         "features": [],
         "nativeCurrency": {
+            "chainId": 33,
             "name": "GoodData Mainnet Ether",
             "symbol": "GooD",
             "decimals": 18
         },
-        "infoURL": "https://www.goodata.org",
-        "shortName": "GooD",
-        "chainId": 33
+        "infoURL": "https://www.goodata.org"
     },
     {
-        "name": "TBWG Chain",
-        "chain": "TBWG",
+        "chainId": 35,
+        "name": "TBWG",
         "network": "mainnet",
+        "shortName": "tbwg",
         "features": [],
         "nativeCurrency": {
+            "chainId": 35,
             "name": "TBWG Ether",
             "symbol": "TBG",
             "decimals": 18
         },
-        "infoURL": "https://tbwg.io",
-        "shortName": "tbwg",
-        "chainId": 35
+        "infoURL": "https://tbwg.io"
     },
     {
-        "name": "Valorbit",
-        "chain": "VAL",
+        "chainId": 38,
+        "name": "VAL",
         "network": "mainnet",
+        "shortName": "val",
         "features": [],
         "nativeCurrency": {
+            "chainId": 38,
             "name": "Valorbit",
             "symbol": "VAL",
             "decimals": 18
         },
-        "infoURL": "https://valorbit.com",
-        "shortName": "val",
-        "chainId": 38
+        "infoURL": "https://valorbit.com"
     },
     {
-        "name": "Telos EVM Mainnet",
-        "chain": "TLOS",
+        "chainId": 40,
+        "name": "TLOS",
         "network": "mainnet",
+        "shortName": "Telos EVM",
         "features": [],
         "nativeCurrency": {
+            "chainId": 40,
             "name": "Telos",
             "symbol": "TLOS",
             "decimals": 18
         },
-        "infoURL": "https://telos.net",
-        "shortName": "Telos EVM",
-        "chainId": 40
+        "infoURL": "https://telos.net"
     },
     {
-        "name": "Telos EVM Testnet",
-        "chain": "TLOS",
+        "chainId": 41,
+        "name": "TLOS",
         "network": "testnet",
+        "shortName": "Telos EVM Testnet",
         "features": [],
         "nativeCurrency": {
+            "chainId": 41,
             "name": "Telos",
             "symbol": "TLOS",
             "decimals": 18
         },
-        "infoURL": "https://telos.net",
-        "shortName": "Telos EVM Testnet",
-        "chainId": 41
+        "infoURL": "https://telos.net"
     },
     {
-        "name": "Darwinia Pangolin Testnet",
-        "chain": "pangolin",
+        "chainId": 43,
+        "name": "pangolin",
         "network": "free testnet",
+        "shortName": "darwinia",
         "features": [],
         "nativeCurrency": {
+            "chainId": 43,
             "name": "Pangolin RING",
             "symbol": "PRING",
             "decimals": 9
         },
-        "infoURL": "https://darwinia.network/",
-        "shortName": "darwinia",
-        "chainId": 43
+        "infoURL": "https://darwinia.network/"
     },
     {
-        "name": "Darwinia Crab Network",
-        "chain": "crab",
+        "chainId": 44,
+        "name": "crab",
         "network": "Crab network",
+        "shortName": "crab",
         "features": [],
         "nativeCurrency": {
+            "chainId": 44,
             "name": "Crab Token",
             "symbol": "CRING",
             "decimals": 9
         },
-        "infoURL": "https://crab.network/",
-        "shortName": "crab",
-        "chainId": 44
+        "infoURL": "https://crab.network/"
     },
     {
-        "name": "XinFin Network Mainnet",
-        "chain": "XDC",
+        "chainId": 50,
+        "name": "XDC",
         "network": "mainnet",
+        "shortName": "xdc",
         "features": [],
         "nativeCurrency": {
+            "chainId": 50,
             "name": "XinFin",
             "symbol": "XDC",
             "decimals": 18
         },
-        "infoURL": "https://xinfin.org",
-        "shortName": "xdc",
-        "chainId": 50
+        "infoURL": "https://xinfin.org"
     },
     {
-        "name": "XinFin Apothem Testnet",
-        "chain": "TXDC",
+        "chainId": 51,
+        "name": "TXDC",
         "network": "testnet",
+        "shortName": "TXDC",
         "features": [],
         "nativeCurrency": {
+            "chainId": 51,
             "name": "XinFinTest",
             "symbol": "TXDC",
             "decimals": 18
         },
-        "infoURL": "https://xinfin.org",
-        "shortName": "TXDC",
-        "chainId": 51
+        "infoURL": "https://xinfin.org"
     },
     {
-        "name": "CoinEx Smart Chain Mainnet",
-        "chain": "CSC",
+        "chainId": 52,
+        "name": "CSC",
         "network": "mainnet",
+        "shortName": "cet",
         "features": [],
         "nativeCurrency": {
+            "chainId": 52,
             "name": "CoinEx Chain Native Token",
             "symbol": "cet",
             "decimals": 18
         },
-        "infoURL": "http://www.coinex.org/",
-        "shortName": "cet",
-        "chainId": 52
+        "infoURL": "http://www.coinex.org/"
     },
     {
-        "name": "CoinEx Smart Chain Testnet",
-        "chain": "CSC",
+        "chainId": 53,
+        "name": "CSC",
         "network": "testnet",
+        "shortName": "tcet",
         "features": [],
         "nativeCurrency": {
+            "chainId": 53,
             "name": "CoinEx Chain Test Native Token",
             "symbol": "cett",
             "decimals": 18
         },
-        "infoURL": "http://www.coinex.org/",
-        "shortName": "tcet",
-        "chainId": 53
+        "infoURL": "http://www.coinex.org/"
     },
     {
-        "name": "Ontology Mainnet",
-        "chain": "Ontology",
+        "chainId": 58,
+        "name": "Ontology",
         "network": "mainnet",
+        "shortName": "Ontology Mainnet",
         "features": [],
         "nativeCurrency": {
+            "chainId": 58,
             "name": "ONG",
             "symbol": "ONG",
             "decimals": 9
         },
         "infoURL": "https://ont.io/",
-        "shortName": "Ontology Mainnet",
-        "chainId": 58,
         "explorers": [
             {
                 "name": "explorer",
@@ -701,18 +720,18 @@
         ]
     },
     {
-        "name": "EOS Mainnet",
-        "chain": "EOS",
+        "chainId": 59,
+        "name": "EOS",
         "network": "mainnet",
+        "shortName": "EOS Mainnet",
         "features": [],
         "nativeCurrency": {
+            "chainId": 59,
             "name": "EOS",
             "symbol": "EOS",
             "decimals": 18
         },
         "infoURL": "https://eoscommunity.org/",
-        "shortName": "EOS Mainnet",
-        "chainId": 59,
         "explorers": [
             {
                 "name": "bloks",
@@ -722,88 +741,88 @@
         ]
     },
     {
-        "name": "GoChain",
-        "chain": "GO",
+        "chainId": 60,
+        "name": "GO",
         "network": "mainnet",
+        "shortName": "go",
         "features": [],
         "nativeCurrency": {
+            "chainId": 60,
             "name": "GoChain Ether",
             "symbol": "GO",
             "decimals": 18
         },
-        "infoURL": "https://gochain.io",
-        "shortName": "go",
-        "chainId": 60
+        "infoURL": "https://gochain.io"
     },
     {
-        "name": "Ethereum Classic Mainnet",
-        "chain": "ETC",
+        "chainId": 61,
+        "name": "ETC",
         "network": "mainnet",
+        "shortName": "etc",
         "features": [],
         "nativeCurrency": {
+            "chainId": 61,
             "name": "Ethereum Classic Ether",
             "symbol": "ETC",
             "decimals": 18
         },
-        "infoURL": "https://ethereumclassic.org",
-        "shortName": "etc",
-        "chainId": 61
+        "infoURL": "https://ethereumclassic.org"
     },
     {
-        "name": "Ethereum Classic Testnet Morden",
-        "chain": "ETC",
+        "chainId": 62,
+        "name": "ETC",
         "network": "testnet",
+        "shortName": "tetc",
         "features": [],
         "nativeCurrency": {
+            "chainId": 62,
             "name": "Ethereum Classic Testnet Ether",
             "symbol": "TETC",
             "decimals": 18
         },
-        "infoURL": "https://ethereumclassic.org",
-        "shortName": "tetc",
-        "chainId": 62
+        "infoURL": "https://ethereumclassic.org"
     },
     {
-        "name": "Ethereum Classic Testnet Mordor",
-        "chain": "ETC",
+        "chainId": 63,
+        "name": "ETC",
         "network": "testnet",
+        "shortName": "metc",
         "features": [],
         "nativeCurrency": {
+            "chainId": 63,
             "name": "Mordor Classic Testnet Ether",
             "symbol": "METC",
             "decimals": 18
         },
-        "infoURL": "https://github.com/eth-classic/mordor/",
-        "shortName": "metc",
-        "chainId": 63
+        "infoURL": "https://github.com/eth-classic/mordor/"
     },
     {
-        "name": "Ellaism",
-        "chain": "ELLA",
+        "chainId": 64,
+        "name": "ELLA",
         "network": "mainnet",
+        "shortName": "ella",
         "features": [],
         "nativeCurrency": {
+            "chainId": 64,
             "name": "Ellaism Ether",
             "symbol": "ELLA",
             "decimals": 18
         },
-        "infoURL": "https://ellaism.org",
-        "shortName": "ella",
-        "chainId": 64
+        "infoURL": "https://ellaism.org"
     },
     {
-        "name": "OKExChain Testnet",
-        "chain": "okexchain",
+        "chainId": 65,
+        "name": "okexchain",
         "network": "testnet",
+        "shortName": "tokt",
         "features": [],
         "nativeCurrency": {
+            "chainId": 65,
             "name": "OKExChain Global Utility Token in testnet",
             "symbol": "OKT",
             "decimals": 18
         },
         "infoURL": "https://www.okex.com/okexchain",
-        "shortName": "tokt",
-        "chainId": 65,
         "explorers": [
             {
                 "name": "OKLink",
@@ -813,18 +832,19 @@
         ]
     },
     {
+        "chainId": 66,
         "name": "OKExChain Mainnet",
         "chain": "OKEx",
         "network": "mainnet",
+        "shortName": "okt",
         "features": [],
         "nativeCurrency": {
+            "chainId": 66,
             "name": "OKExChain Global Utility Token",
             "symbol": "OKT",
             "decimals": 18
         },
         "infoURL": "https://www.okex.com/okexchain",
-        "shortName": "okt",
-        "chainId": 66,
         "explorers": [
             {
                 "name": "OKLink",
@@ -834,102 +854,103 @@
         ]
     },
     {
-        "name": "DBChain Testnet",
-        "chain": "DBM",
+        "chainId": 67,
+        "name": "DBM",
         "network": "testnet",
+        "shortName": "dbm",
         "features": [],
         "nativeCurrency": {
+            "chainId": 67,
             "name": "DBChain Testnet",
             "symbol": "DBM",
             "decimals": 18
         },
-        "infoURL": "http://test.dbmbp.com",
-        "shortName": "dbm",
-        "chainId": 67
+        "infoURL": "http://test.dbmbp.com"
     },
     {
-        "name": "SoterOne Mainnet",
-        "chain": "SOTER",
+        "chainId": 68,
+        "name": "SOTER",
         "network": "mainnet",
+        "shortName": "SO1",
         "features": [],
         "nativeCurrency": {
+            "chainId": 68,
             "name": "SoterOne Mainnet Ether",
             "symbol": "SOTER",
             "decimals": 18
         },
-        "infoURL": "https://www.soterone.com",
-        "shortName": "SO1",
-        "chainId": 68
+        "infoURL": "https://www.soterone.com"
     },
     {
-        "name": "Optimistic Ethereum Testnet Kovan",
-        "chain": "OPT",
+        "chainId": 69,
+        "type": "Optimistic",
+        "name": "OPT",
         "network": "kovan",
+        "shortName": "okov",
         "features": [],
         "nativeCurrency": {
+            "chainId": 69,
             "name": "Kovan Ether",
             "symbol": "KOR",
             "decimals": 18
         },
-        "infoURL": "https://optimism.io",
-        "shortName": "okov",
-        "chainId": 69
+        "infoURL": "https://optimism.io"
     },
     {
-        "name": "Mix",
-        "chain": "MIX",
+        "chainId": 76,
+        "name": "MIX",
         "network": "mainnet",
+        "shortName": "mix",
         "features": [],
         "nativeCurrency": {
+            "chainId": 76,
             "name": "Mix Ether",
             "symbol": "MIX",
             "decimals": 18
         },
-        "infoURL": "https://mix-blockchain.org",
-        "shortName": "mix",
-        "chainId": 76
+        "infoURL": "https://mix-blockchain.org"
     },
     {
-        "name": "POA Network Sokol",
-        "chain": "POA",
+        "chainId": 77,
+        "name": "POA",
         "network": "sokol",
+        "shortName": "poa",
         "features": [],
         "nativeCurrency": {
+            "chainId": 77,
             "name": "POA Sokol Ether",
             "symbol": "POA",
             "decimals": 18
         },
-        "infoURL": "https://poa.network",
-        "shortName": "poa",
-        "chainId": 77
+        "infoURL": "https://poa.network"
     },
     {
-        "name": "PrimusChain mainnet",
-        "chain": "PC",
+        "chainId": 78,
+        "name": "PC",
         "network": "mainnet",
+        "shortName": "primuschain",
         "features": [],
         "nativeCurrency": {
+            "chainId": 78,
             "name": "Primus Ether",
             "symbol": "PETH",
             "decimals": 18
         },
-        "infoURL": "https://primusmoney.com",
-        "shortName": "primuschain",
-        "chainId": 78
+        "infoURL": "https://primusmoney.com"
     },
     {
+        "chainId": 80,
         "name": "GeneChain",
-        "chain": "GeneChain",
         "network": "mainnet",
+        "shortName": "GeneChain",
         "features": [],
         "nativeCurrency": {
+            "chainId": 80,
             "name": "RNA",
             "symbol": "RNA",
             "decimals": 18
         },
         "infoURL": "https://scan.genechain.io/",
-        "shortName": "GeneChain",
-        "chainId": 80,
         "explorers": [
             {
                 "name": "GeneChain Scan",
@@ -939,32 +960,32 @@
         ]
     },
     {
-        "name": "Meter Mainnet",
-        "chain": "METER",
+        "chainId": 82,
+        "name": "METER",
         "network": "mainnet",
+        "shortName": "Meter",
         "features": [],
         "nativeCurrency": {
+            "chainId": 82,
             "name": "Meter",
             "symbol": "MTR",
             "decimals": 18
         },
-        "infoURL": "https://www.meter.io",
-        "shortName": "Meter",
-        "chainId": 82
+        "infoURL": "https://www.meter.io"
     },
     {
-        "name": "GateChain Testnet",
-        "chain": "GTTEST",
+        "chainId": 85,
+        "name": "GTTEST",
         "network": "testnet",
+        "shortName": "gttest",
         "features": [],
         "nativeCurrency": {
+            "chainId": 85,
             "name": "GateToken",
             "symbol": "GT",
             "decimals": 18
         },
         "infoURL": "https://www.gatechain.io",
-        "shortName": "gttest",
-        "chainId": 85,
         "explorers": [
             {
                 "name": "GateScan",
@@ -974,18 +995,18 @@
         ]
     },
     {
-        "name": "GateChain Mainnet",
-        "chain": "GT",
+        "chainId": 86,
+        "name": "GT",
         "network": "mainnet",
+        "shortName": "gt",
         "features": [],
         "nativeCurrency": {
+            "chainId": 86,
             "name": "GateToken",
             "symbol": "GT",
             "decimals": 18
         },
         "infoURL": "https://www.gatechain.io",
-        "shortName": "gt",
-        "chainId": 86,
         "explorers": [
             {
                 "name": "GateScan",
@@ -995,32 +1016,32 @@
         ]
     },
     {
-        "name": "TomoChain",
-        "chain": "TOMO",
+        "chainId": 88,
+        "name": "TOMO",
         "network": "mainnet",
+        "shortName": "tomo",
         "features": [],
         "nativeCurrency": {
+            "chainId": 88,
             "name": "TomoChain Ether",
             "symbol": "TOMO",
             "decimals": 18
         },
-        "infoURL": "https://tomocoin.io",
-        "shortName": "tomo",
-        "chainId": 88
+        "infoURL": "https://tomocoin.io"
     },
     {
-        "name": "CryptoKylin Testnet",
-        "chain": "EOS",
+        "chainId": 95,
+        "name": "EOS",
         "network": "testnet",
+        "shortName": "Kylin Testnet",
         "features": [],
         "nativeCurrency": {
+            "chainId": 95,
             "name": "EOS",
             "symbol": "EOS",
             "decimals": 18
         },
         "infoURL": "https://www.cryptokylin.io/",
-        "shortName": "Kylin Testnet",
-        "chainId": 95,
         "explorers": [
             {
                 "name": "eosq",
@@ -1030,159 +1051,161 @@
         ]
     },
     {
-        "name": "POA Network Core",
-        "chain": "POA",
+        "chainId": 99,
+        "name": "POA",
         "network": "core",
+        "shortName": "skl",
         "features": [],
         "nativeCurrency": {
+            "chainId": 99,
             "name": "POA Network Core Ether",
             "symbol": "SKL",
             "decimals": 18
         },
-        "infoURL": "https://poa.network",
-        "shortName": "skl",
-        "chainId": 99
+        "infoURL": "https://poa.network"
     },
     {
-        "name": "Gnosis Chain",
-        "chain": "Gnosis",
+        "chainId": 100,
+        "type": "xDai",
+        "name": "Gnosis",
+        "color": "rgb(73, 169, 166)",
         "network": "mainnet",
+        "shortName": "xDai",
         "features": [],
         "nativeCurrency": {
+            "chainId": 100,
             "name": "xDai",
             "symbol": "xDai",
-            "decimals": 18,
-            "logoURI": "https://raw.githubusercontent.com/sushiswap/assets/master/blockchains/xdai/assets/0xe91D153E0b41518A2Ce8Dd3D7944Fa863463a97d/logo.png"
+            "decimals": 18
         },
-        "infoURL": "https://blockscout.com/xdai/mainnet",
-        "shortName": "xDai",
-        "chainId": 100
+        "infoURL": "https://blockscout.com/xdai/mainnet"
     },
     {
-        "name": "EtherInc",
-        "chain": "ETI",
+        "chainId": 101,
+        "name": "ETI",
         "network": "mainnet",
+        "shortName": "eti",
         "features": [],
         "nativeCurrency": {
+            "chainId": 101,
             "name": "EtherInc Ether",
             "symbol": "ETI",
             "decimals": 18
         },
-        "infoURL": "https://einc.io",
-        "shortName": "eti",
-        "chainId": 101
+        "infoURL": "https://einc.io"
     },
     {
-        "name": "Web3Games Testnet",
-        "chain": "Web3Games",
+        "chainId": 102,
+        "name": "Web3Games",
         "network": "testnet",
+        "shortName": "w3g",
         "features": [],
         "nativeCurrency": {
+            "chainId": 102,
             "name": "Web3Games",
             "symbol": "W3G",
             "decimals": 18
         },
-        "infoURL": "https://web3games.org/",
-        "shortName": "w3g",
-        "chainId": 102
+        "infoURL": "https://web3games.org/"
     },
     {
-        "name": "ThunderCore Mainnet",
-        "chain": "TT",
+        "chainId": 108,
+        "name": "TT",
         "network": "mainnet",
+        "shortName": "TT",
         "features": [],
         "nativeCurrency": {
+            "chainId": 108,
             "name": "ThunderCore Mainnet Ether",
             "symbol": "TT",
             "decimals": 18
         },
-        "infoURL": "https://thundercore.com",
-        "shortName": "TT",
-        "chainId": 108
+        "infoURL": "https://thundercore.com"
     },
     {
-        "name": "Proton Testnet",
-        "chain": "XPR",
+        "chainId": 110,
+        "name": "XPR",
         "network": "testnet",
+        "shortName": "xpr",
         "features": [],
         "nativeCurrency": {
+            "chainId": 110,
             "name": "Proton",
             "symbol": "XPR",
             "decimals": 4
         },
-        "infoURL": "https://protonchain.com",
-        "shortName": "xpr",
-        "chainId": 110
+        "infoURL": "https://protonchain.com"
     },
     {
-        "name": "EtherLite Chain",
-        "chain": "ETL",
+        "chainId": 111,
+        "name": "ETL",
         "network": "mainnet",
+        "shortName": "ETL",
         "features": [],
         "nativeCurrency": {
+            "chainId": 111,
             "name": "EtherLite",
             "symbol": "ETL",
             "decimals": 18
         },
-        "infoURL": "https://etherlite.org",
-        "shortName": "ETL",
-        "chainId": 111
+        "infoURL": "https://etherlite.org"
     },
     {
-        "name": "Fuse Mainnet",
-        "chain": "FUSE",
+        "chainId": 122,
+        "type": "Fuse",
+        "name": "FUSE",
         "network": "mainnet",
+        "shortName": "fuse",
         "features": [],
         "nativeCurrency": {
+            "chainId": 122,
             "name": "Fuse",
             "symbol": "FUSE",
             "decimals": 18
         },
-        "infoURL": "https://fuse.io/",
-        "shortName": "fuse",
-        "chainId": 122
+        "infoURL": "https://fuse.io/"
     },
     {
-        "name": "Decentralized Web Mainnet",
-        "chain": "DWU",
+        "chainId": 124,
+        "name": "DWU",
         "network": "mainnet",
+        "shortName": "dwu",
         "features": [],
         "nativeCurrency": {
+            "chainId": 124,
             "name": "Decentralized Web Utility",
             "symbol": "DWU",
             "decimals": 18
         },
-        "infoURL": "https://decentralized-web.tech/dw_chain.php",
-        "shortName": "dwu",
-        "chainId": 124
+        "infoURL": "https://decentralized-web.tech/dw_chain.php"
     },
     {
-        "name": "Factory 127 Mainnet",
-        "chain": "FETH",
+        "chainId": 127,
+        "name": "FETH",
         "network": "factory127 mainnet",
+        "shortName": "feth",
         "features": [],
         "nativeCurrency": {
+            "chainId": 127,
             "name": "Factory 127 Token",
             "symbol": "FETH",
             "decimals": 18
         },
-        "infoURL": "https://www.factory127.com",
-        "shortName": "feth",
-        "chainId": 127
+        "infoURL": "https://www.factory127.com"
     },
     {
-        "name": "Huobi ECO Chain Mainnet",
-        "chain": "Heco",
+        "chainId": 128,
+        "name": "Heco",
         "network": "mainnet",
+        "shortName": "heco",
         "features": [],
         "nativeCurrency": {
+            "chainId": 128,
             "name": "Huobi ECO Chain Native Token",
             "symbol": "HT",
             "decimals": 18
         },
         "infoURL": "https://www.hecochain.com",
-        "shortName": "heco",
-        "chainId": 128,
         "explorers": [
             {
                 "name": "hecoinfo",
@@ -1192,140 +1215,140 @@
         ]
     },
     {
-        "name": "Lightstreams Testnet",
-        "chain": "PHT",
+        "chainId": 162,
+        "name": "PHT",
         "network": "sirius",
+        "shortName": "tpht",
         "features": [],
         "nativeCurrency": {
+            "chainId": 162,
             "name": "Lightstreams PHT",
             "symbol": "PHT",
             "decimals": 18
         },
-        "infoURL": "https://explorer.sirius.lightstreams.io",
-        "shortName": "tpht",
-        "chainId": 162
+        "infoURL": "https://explorer.sirius.lightstreams.io"
     },
     {
-        "name": "Lightstreams Mainnet",
-        "chain": "PHT",
+        "chainId": 163,
+        "name": "PHT",
         "network": "mainnet",
+        "shortName": "pht",
         "features": [],
         "nativeCurrency": {
+            "chainId": 163,
             "name": "Lightstreams PHT",
             "symbol": "PHT",
             "decimals": 18
         },
-        "infoURL": "https://explorer.lightstreams.io",
-        "shortName": "pht",
-        "chainId": 163
+        "infoURL": "https://explorer.lightstreams.io"
     },
     {
-        "name": "HOO Smart Chain Testnet",
-        "chain": "HOO",
+        "chainId": 170,
+        "name": "HOO",
         "network": "testnet",
+        "shortName": "hoosmartchain",
         "features": [],
         "nativeCurrency": {
+            "chainId": 170,
             "name": "HOO",
             "symbol": "HOO",
             "decimals": 18
         },
-        "infoURL": "https://www.hoosmartchain.com",
-        "shortName": "hoosmartchain",
-        "chainId": 170
+        "infoURL": "https://www.hoosmartchain.com"
     },
     {
-        "name": "Freight Trust Network",
-        "chain": "EDI",
+        "chainId": 211,
+        "name": "EDI",
         "network": "freight & trade network",
+        "shortName": "EDI",
         "features": [],
         "nativeCurrency": {
+            "chainId": 211,
             "name": "Freight Trust Native",
             "symbol": "0xF",
             "decimals": 18
         },
-        "infoURL": "https://freighttrust.com",
-        "shortName": "EDI",
-        "chainId": 211
+        "infoURL": "https://freighttrust.com"
     },
     {
+        "chainId": 246,
         "name": "Energy Web Chain",
-        "chain": "Energy Web Chain",
         "network": "mainnet",
+        "shortName": "ewt",
         "features": [],
         "nativeCurrency": {
+            "chainId": 246,
             "name": "Energy Web Token",
             "symbol": "EWT",
             "decimals": 18
         },
-        "infoURL": "https://energyweb.org",
-        "shortName": "ewt",
-        "chainId": 246
+        "infoURL": "https://energyweb.org"
     },
     {
-        "name": "Fantom Opera",
-        "chain": "FTM",
+        "chainId": 250,
+        "type": "Fantom",
+        "name": "FTM",
+        "fullName": "Fantom",
         "network": "mainnet",
+        "shortName": "ftm",
         "features": [],
         "nativeCurrency": {
+            "chainId": 250,
             "name": "Fantom",
             "symbol": "FTM",
-            "decimals": 18,
-            "logoURI": "https://static.debank.com/image/ftm_token/logo_url/ftm/33fdb9c5067e94f3a1b9e78f6fa86984.png"
+            "decimals": 18
         },
         "infoURL": "https://fantom.foundation",
-        "shortName": "ftm",
-        "chainId": 250,
         "explorers": [
             {
                 "name": "ftmscan",
                 "url": "https://ftmscan.com",
-                "icon": "ftmscan",
                 "standard": "EIP3091",
-                "logoURI": "https://static.debank.com/image/ftm_token/logo_url/ftm/33fdb9c5067e94f3a1b9e78f6fa86984.png"
+                "logoURL": "https://static.debank.com/image/ftm_token/logo_url/ftm/33fdb9c5067e94f3a1b9e78f6fa86984.png"
             }
         ]
     },
     {
-        "name": "Huobi ECO Chain Testnet",
-        "chain": "Heco",
+        "chainId": 256,
+        "name": "Heco",
         "network": "testnet",
+        "shortName": "hecot",
         "features": [],
         "nativeCurrency": {
+            "chainId": 256,
             "name": "Huobi ECO Chain Test Native Token",
             "symbol": "htt",
             "decimals": 18
         },
-        "infoURL": "https://testnet.hecoinfo.com",
-        "shortName": "hecot",
-        "chainId": 256
+        "infoURL": "https://testnet.hecoinfo.com"
     },
     {
-        "name": "High Performance Blockchain",
-        "chain": "HPB",
+        "chainId": 269,
+        "name": "HPB",
         "network": "mainnet",
+        "shortName": "hpb",
         "features": [],
         "nativeCurrency": {
+            "chainId": 269,
             "name": "High Performance Blockchain Ether",
             "symbol": "HPB",
             "decimals": 18
         },
-        "infoURL": "https://hpbscan.org/",
-        "shortName": "hpb",
-        "chainId": 269
+        "infoURL": "https://hpbscan.org/"
     },
     {
-        "name": "KuCoin Community Chain Mainnet",
-        "chain": "KCC",
+        "chainId": 321,
+        "name": "KCC",
         "network": "mainnet",
+        "shortName": "kcs",
         "features": [],
         "nativeCurrency": {
+            "chainId": 321,
             "name": "KuCoin Token",
             "symbol": "KCS",
             "decimals": 18
         },
         "infoURL": "https://kcc.io",
-        "shortName": "kcs",
-        "chainId": 321,
         "explorers": [
             {
                 "name": "KCC Explorer",
@@ -1335,18 +1358,18 @@
         ]
     },
     {
-        "name": "KuCoin Community Chain Testnet",
-        "chain": "KCC",
+        "chainId": 322,
+        "name": "KCC",
         "network": "testnet",
+        "shortName": "kcst",
         "features": [],
         "nativeCurrency": {
+            "chainId": 322,
             "name": "KuCoin Testnet Token",
             "symbol": "tKCS",
             "decimals": 18
         },
         "infoURL": "https://scan-testnet.kcc.network",
-        "shortName": "kcst",
-        "chainId": 322,
         "explorers": [
             {
                 "name": "kcc-scan",
@@ -1356,564 +1379,565 @@
         ]
     },
     {
-        "name": "Lisinski",
-        "chain": "CRO",
+        "chainId": 385,
+        "name": "CRO",
         "network": "mainnet",
+        "shortName": "lisinski",
         "features": [],
         "nativeCurrency": {
+            "chainId": 385,
             "name": "Lisinski Ether",
             "symbol": "LISINSKI",
             "decimals": 18
         },
-        "infoURL": "https://lisinski.online",
-        "shortName": "lisinski",
-        "chainId": 385
+        "infoURL": "https://lisinski.online"
     },
     {
-        "name": "Optimistic Ethereum Testnet Goerli",
-        "chain": "OPT",
+        "chainId": 420,
+        "type": "Optimistic",
+        "name": "OPT",
         "network": "goerli",
+        "shortName": "ogor",
         "features": [],
         "nativeCurrency": {
+            "chainId": 420,
             "name": "Görli Ether",
             "symbol": "GOR",
             "decimals": 18
         },
-        "infoURL": "https://optimism.io",
-        "shortName": "ogor",
-        "chainId": 420
+        "infoURL": "https://optimism.io"
     },
     {
-        "name": "Rupaya",
-        "chain": "RUPX",
+        "chainId": 499,
+        "name": "RUPX",
         "network": "mainnet",
+        "shortName": "rupx",
         "features": [],
         "nativeCurrency": {
+            "chainId": 499,
             "name": "Rupaya",
             "symbol": "RUPX",
             "decimals": 18
         },
-        "infoURL": "https://www.rupx.io",
-        "shortName": "rupx",
-        "chainId": 499
+        "infoURL": "https://www.rupx.io"
     },
     {
-        "name": "Tao Network",
-        "chain": "TAO",
+        "chainId": 558,
+        "name": "TAO",
         "network": "core",
+        "shortName": "tao",
         "features": [],
         "nativeCurrency": {
+            "chainId": 558,
             "name": "Tao",
             "symbol": "TAO",
             "decimals": 18
         },
-        "infoURL": "https://tao.network",
-        "shortName": "tao",
-        "chainId": 558
+        "infoURL": "https://tao.network"
     },
     {
-        "name": "Acala Mandala Testnet",
-        "chain": "mACA",
+        "chainId": 595,
+        "name": "mACA",
         "network": "testnet",
+        "shortName": "maca",
         "features": [],
         "nativeCurrency": {
+            "chainId": 595,
             "name": "Acala Mandala Token",
             "symbol": "mACA",
             "decimals": 18
         },
-        "infoURL": "https://acala.network",
-        "shortName": "maca",
-        "chainId": 595
+        "infoURL": "https://acala.network"
     },
     {
-        "name": "Karura Network",
-        "chain": "KAR",
+        "chainId": 686,
+        "name": "KAR",
         "network": "mainnet",
+        "shortName": "kar",
         "features": [],
         "nativeCurrency": {
+            "chainId": 686,
             "name": "Karura Token",
             "symbol": "KAR",
             "decimals": 18
         },
-        "infoURL": "https://karura.network",
-        "shortName": "kar",
-        "chainId": 686
+        "infoURL": "https://karura.network"
     },
     {
-        "name": "Factory 127 Testnet",
-        "chain": "FETH",
+        "chainId": 721,
+        "name": "FETH",
         "network": "factory127 testnet",
+        "shortName": "tfeth",
         "features": [],
         "nativeCurrency": {
+            "chainId": 721,
             "name": "Factory 127 Token",
             "symbol": "FETH",
             "decimals": 18
         },
-        "infoURL": "https://www.factory127.com",
-        "shortName": "tfeth",
-        "chainId": 721
+        "infoURL": "https://www.factory127.com"
     },
     {
-        "name": "Ethermint Testnet",
-        "chain": "ETHERMINT",
+        "chainId": 777,
+        "name": "ETHERMINT",
         "network": "testnet",
+        "shortName": "emint",
         "features": [],
         "nativeCurrency": {
+            "chainId": 777,
             "name": "Photon",
             "symbol": "Photon",
             "decimals": 18
         },
-        "infoURL": "https://docs.ethermint.zone",
-        "shortName": "emint",
-        "chainId": 777
+        "infoURL": "https://docs.ethermint.zone"
     },
     {
-        "name": "Acala Network",
-        "chain": "ACA",
+        "chainId": 787,
+        "name": "ACA",
         "network": "mainnet",
+        "shortName": "aca",
         "features": [],
         "nativeCurrency": {
+            "chainId": 787,
             "name": "Acala Token",
             "symbol": "ACA",
             "decimals": 18
         },
-        "infoURL": "https://acala.network",
-        "shortName": "aca",
-        "chainId": 787
+        "infoURL": "https://acala.network"
     },
     {
+        "chainId": 803,
         "name": "Haic",
-        "chain": "Haic",
         "network": "mainnet",
+        "shortName": "haic",
         "features": [],
         "nativeCurrency": {
+            "chainId": 803,
             "name": "Haicoin",
             "symbol": "HAIC",
             "decimals": 18
         },
-        "infoURL": "https://www.haichain.io/",
-        "shortName": "haic",
-        "chainId": 803
+        "infoURL": "https://www.haichain.io/"
     },
     {
-        "name": "Callisto Mainnet",
-        "chain": "CLO",
+        "chainId": 820,
+        "name": "CLO",
         "network": "mainnet",
+        "shortName": "clo",
         "features": [],
         "nativeCurrency": {
+            "chainId": 820,
             "name": "Callisto Mainnet Ether",
             "symbol": "CLO",
             "decimals": 18
         },
-        "infoURL": "https://callisto.network",
-        "shortName": "clo",
-        "chainId": 820
+        "infoURL": "https://callisto.network"
     },
     {
-        "name": "Callisto Testnet",
-        "chain": "CLO",
+        "chainId": 821,
+        "name": "CLO",
         "network": "testnet",
+        "shortName": "tclo",
         "features": [],
         "nativeCurrency": {
+            "chainId": 821,
             "name": "Callisto Testnet Ether",
             "symbol": "TCLO",
             "decimals": 18
         },
-        "infoURL": "https://callisto.network",
-        "shortName": "tclo",
-        "chainId": 821
+        "infoURL": "https://callisto.network"
     },
     {
-        "name": "Wanchain",
-        "chain": "WAN",
+        "chainId": 888,
+        "name": "WAN",
         "network": "mainnet",
+        "shortName": "wan",
         "features": [],
         "nativeCurrency": {
+            "chainId": 888,
             "name": "Wancoin",
             "symbol": "WAN",
             "decimals": 18
         },
-        "infoURL": "https://www.wanscan.org",
-        "shortName": "wan",
-        "chainId": 888
+        "infoURL": "https://www.wanscan.org"
     },
     {
-        "name": "Nepal Blockchain Network",
-        "chain": "YETI",
+        "chainId": 977,
+        "name": "YETI",
         "network": "mainnet",
+        "shortName": "yeti",
         "features": [],
         "nativeCurrency": {
+            "chainId": 977,
             "name": "Nepal Blockchain Network Ether",
             "symbol": "YETI",
             "decimals": 18
         },
-        "infoURL": "https://nepalblockchain.network",
-        "shortName": "yeti",
-        "chainId": 977
+        "infoURL": "https://nepalblockchain.network"
     },
     {
-        "name": "Wanchain Testnet",
-        "chain": "WAN",
+        "chainId": 999,
+        "name": "WAN",
         "network": "testnet",
+        "shortName": "twan",
         "features": [],
         "nativeCurrency": {
+            "chainId": 999,
             "name": "Wancoin",
             "symbol": "WAN",
             "decimals": 18
         },
-        "infoURL": "https://testnet.wanscan.org",
-        "shortName": "twan",
-        "chainId": 999
+        "infoURL": "https://testnet.wanscan.org"
     },
     {
-        "name": "Klaytn Testnet Baobab",
-        "chain": "KLAY",
+        "chainId": 1001,
+        "name": "KLAY",
         "network": "baobab",
+        "shortName": "Baobab",
         "features": [],
         "nativeCurrency": {
+            "chainId": 1001,
             "name": "KLAY",
             "symbol": "KLAY",
             "decimals": 18
         },
-        "infoURL": "https://www.klaytn.com/",
-        "shortName": "Baobab",
-        "chainId": 1001
+        "infoURL": "https://www.klaytn.com/"
     },
     {
-        "name": "Newton Testnet",
-        "chain": "NEW",
+        "chainId": 1007,
+        "name": "NEW",
         "network": "testnet",
+        "shortName": "tnew",
         "features": [],
         "nativeCurrency": {
+            "chainId": 1007,
             "name": "Newton",
             "symbol": "NEW",
             "decimals": 18
         },
-        "infoURL": "https://www.newtonproject.org/",
-        "shortName": "tnew",
-        "chainId": 1007
+        "infoURL": "https://www.newtonproject.org/"
     },
     {
-        "name": "Evrice Network",
-        "chain": "EVC",
+        "chainId": 1010,
+        "name": "EVC",
         "network": "Evrice",
+        "shortName": "EVC",
         "features": [],
         "nativeCurrency": {
+            "chainId": 1010,
             "name": "Evrice",
             "symbol": "EVC",
             "decimals": 18
         },
-        "infoURL": "https://evrice.com",
-        "shortName": "EVC",
-        "chainId": 1010
+        "infoURL": "https://evrice.com"
     },
     {
-        "name": "Newton",
-        "chain": "NEW",
+        "chainId": 1012,
+        "name": "NEW",
         "network": "mainnet",
+        "shortName": "new",
         "features": [],
         "nativeCurrency": {
+            "chainId": 1012,
             "name": "Newton",
             "symbol": "NEW",
             "decimals": 18
         },
-        "infoURL": "https://www.newtonproject.org/",
-        "shortName": "new",
-        "chainId": 1012
+        "infoURL": "https://www.newtonproject.org/"
     },
     {
+        "chainId": 1022,
         "name": "Sakura",
-        "chain": "Sakura",
         "network": "sakura",
+        "shortName": "sku",
         "features": [],
         "nativeCurrency": {
+            "chainId": 1022,
             "name": "Sakura",
             "symbol": "SKU",
             "decimals": 18
         },
-        "infoURL": "https://clover.finance/sakura",
-        "shortName": "sku",
-        "chainId": 1022
+        "infoURL": "https://clover.finance/sakura"
     },
     {
-        "name": "Clover Testnet",
-        "chain": "Clover",
+        "chainId": 1023,
+        "name": "Clover",
         "network": "clover testnet",
+        "shortName": "tclv",
         "features": [],
         "nativeCurrency": {
+            "chainId": 1023,
             "name": "Clover",
             "symbol": "CLV",
             "decimals": 18
         },
-        "infoURL": "https://clover.finance",
-        "shortName": "tclv",
-        "chainId": 1023
+        "infoURL": "https://clover.finance"
     },
     {
-        "name": "Clover Mainnet",
-        "chain": "Clover",
+        "chainId": 1024,
+        "name": "Clover",
         "network": "clover mainnet",
+        "shortName": "clv",
         "features": [],
         "nativeCurrency": {
+            "chainId": 1024,
             "name": "Clover",
             "symbol": "CLV",
             "decimals": 18
         },
-        "infoURL": "https://clover.finance",
-        "shortName": "clv",
-        "chainId": 1024
+        "infoURL": "https://clover.finance"
     },
     {
-        "name": "MathChain",
-        "chain": "MATH",
+        "chainId": 1139,
+        "name": "MATH",
         "network": "mainnet",
+        "shortName": "MATH",
         "features": [],
         "nativeCurrency": {
+            "chainId": 1139,
             "name": "MathChain",
             "symbol": "MATH",
             "decimals": 18
         },
-        "infoURL": "https://mathchain.org",
-        "shortName": "MATH",
-        "chainId": 1139
+        "infoURL": "https://mathchain.org"
     },
     {
-        "name": "MathChain Testnet",
-        "chain": "MATH",
+        "chainId": 1140,
+        "name": "MATH",
         "network": "testnet",
+        "shortName": "tMATH",
         "features": [],
         "nativeCurrency": {
+            "chainId": 1140,
             "name": "MathChain",
             "symbol": "MATH",
             "decimals": 18
         },
-        "infoURL": "https://mathchain.org",
-        "shortName": "tMATH",
-        "chainId": 1140
+        "infoURL": "https://mathchain.org"
     },
     {
-        "name": "Moonbeam Polkadot",
-        "chain": "MOON",
+        "chainId": 1284,
+        "name": "MOON",
         "network": "moonbeam",
+        "shortName": "mbeam",
         "features": [],
         "nativeCurrency": {
+            "chainId": 1284,
             "name": "Glimmer",
             "symbol": "GLMR",
             "decimals": 18
         },
-        "infoURL": "https://moonbeam.network/networks/moonbeam/",
-        "shortName": "mbeam",
-        "chainId": 1284
+        "infoURL": "https://moonbeam.network/networks/moonbeam/"
     },
     {
-        "name": "Moonriver Kusama",
-        "chain": "MOON",
+        "chainId": 1285,
+        "name": "MOON",
         "network": "moonriver",
+        "shortName": "mriver",
         "features": [],
         "nativeCurrency": {
+            "chainId": 1285,
             "name": "River",
             "symbol": "RIVER",
             "decimals": 18
         },
-        "infoURL": "https://moonbeam.network/networks/moonriver/",
-        "shortName": "mriver",
-        "chainId": 1285
+        "infoURL": "https://moonbeam.network/networks/moonriver/"
     },
     {
-        "name": "Moonrock Rococo",
-        "chain": "MOON",
+        "chainId": 1286,
+        "name": "MOON",
         "network": "moonrock",
+        "shortName": "mrock",
         "features": [],
         "nativeCurrency": {
+            "chainId": 1286,
             "name": "Rocs",
             "symbol": "ROC",
             "decimals": 18
         },
-        "infoURL": "",
-        "shortName": "mrock",
-        "chainId": 1286
+        "infoURL": ""
     },
     {
-        "name": "Moonbeam Testnet Moonbase Alpha",
-        "chain": "MOON",
+        "chainId": 1287,
+        "name": "MOON",
         "network": "moonbase",
+        "shortName": "mbase",
         "features": [],
         "nativeCurrency": {
+            "chainId": 1287,
             "name": "Dev",
             "symbol": "DEV",
             "decimals": 18
         },
-        "infoURL": "https://docs.moonbeam.network/networks/testnet/",
-        "shortName": "mbase",
-        "chainId": 1287
+        "infoURL": "https://docs.moonbeam.network/networks/testnet/"
     },
     {
-        "name": "Catecoin Chain Mainnet",
-        "chain": "Catechain",
+        "chainId": 1618,
+        "name": "Catechain",
         "network": "mainnet",
+        "shortName": "cate",
         "features": [],
         "nativeCurrency": {
+            "chainId": 1618,
             "name": "Catecoin",
             "symbol": "CATE",
             "decimals": 18
         },
-        "infoURL": "https://catechain.com",
-        "shortName": "cate",
-        "chainId": 1618
+        "infoURL": "https://catechain.com"
     },
     {
-        "name": "Atheios",
-        "chain": "ATH",
+        "chainId": 1620,
+        "name": "ATH",
         "network": "mainnet",
+        "shortName": "ath",
         "features": [],
         "nativeCurrency": {
+            "chainId": 1620,
             "name": "Atheios Ether",
             "symbol": "ATH",
             "decimals": 18
         },
-        "infoURL": "https://atheios.com",
-        "shortName": "ath",
-        "chainId": 1620
+        "infoURL": "https://atheios.com"
     },
     {
-        "name": "Teslafunds",
-        "chain": "TSF",
+        "chainId": 1856,
+        "name": "TSF",
         "network": "mainnet",
+        "shortName": "tsf",
         "features": [],
         "nativeCurrency": {
+            "chainId": 1856,
             "name": "Teslafunds Ether",
             "symbol": "TSF",
             "decimals": 18
         },
-        "infoURL": "https://teslafunds.io",
-        "shortName": "tsf",
-        "chainId": 1856
+        "infoURL": "https://teslafunds.io"
     },
     {
-        "name": "EtherGem",
-        "chain": "EGEM",
+        "chainId": 1987,
+        "name": "EGEM",
         "network": "mainnet",
+        "shortName": "egem",
         "features": [],
         "nativeCurrency": {
+            "chainId": 1987,
             "name": "EtherGem Ether",
             "symbol": "EGEM",
             "decimals": 18
         },
-        "infoURL": "https://egem.io",
-        "shortName": "egem",
-        "chainId": 1987
+        "infoURL": "https://egem.io"
     },
     {
-        "name": "420coin",
-        "chain": "420",
+        "chainId": 2020,
+        "name": "420",
         "network": "mainnet",
+        "shortName": "420",
         "features": [],
         "nativeCurrency": {
+            "chainId": 2020,
             "name": "Fourtwenty",
             "symbol": "420",
             "decimals": 18
         },
-        "infoURL": "https://420integrated.com",
-        "shortName": "420",
-        "chainId": 2020
+        "infoURL": "https://420integrated.com"
     },
     {
-        "name": "Edgeware Mainnet",
-        "chain": "EDG",
+        "chainId": 2021,
+        "name": "EDG",
         "network": "mainnet",
+        "shortName": "edg",
         "features": [],
         "nativeCurrency": {
+            "chainId": 2021,
             "name": "Edge",
             "symbol": "EDG",
             "decimals": 18
         },
-        "infoURL": "http://edgewa.re",
-        "shortName": "edg",
-        "chainId": 2021
+        "infoURL": "http://edgewa.re"
     },
     {
-        "name": "Beresheet Testnet",
-        "chain": "EDG",
+        "chainId": 2022,
+        "name": "EDG",
         "network": "beresheet",
+        "shortName": "edgt",
         "features": [],
         "nativeCurrency": {
+            "chainId": 2022,
             "name": "Testnet Edge",
             "symbol": "tEDG",
             "decimals": 18
         },
-        "infoURL": "http://edgewa.re",
-        "shortName": "edgt",
-        "chainId": 2022
+        "infoURL": "http://edgewa.re"
     },
     {
-        "name": "Kortho Mainnet",
-        "chain": "Kortho Chain",
+        "chainId": 2559,
+        "name": "Kortho Chain",
         "network": "mainnet",
+        "shortName": "ktoc",
         "features": [],
         "nativeCurrency": {
+            "chainId": 2559,
             "name": "KorthoChain",
             "symbol": "KTO",
             "decimals": 11
         },
-        "infoURL": "https://www.kortho.io/",
-        "shortName": "ktoc",
-        "chainId": 2559
+        "infoURL": "https://www.kortho.io/"
     },
     {
-        "name": "IoTeX Network Mainnet",
-        "chain": "iotex.io",
+        "chainId": 4689,
+        "name": "iotex.io",
         "network": "mainnet",
+        "shortName": "iotex-mainnet",
         "features": [],
         "nativeCurrency": {
+            "chainId": 4689,
             "name": "IoTeX",
             "symbol": "IOTX",
             "decimals": 18
         },
-        "infoURL": "https://iotex.io",
-        "shortName": "iotex-mainnet",
-        "chainId": 4689
+        "infoURL": "https://iotex.io"
     },
     {
-        "name": "IoTeX Network Testnet",
-        "chain": "iotex.io",
+        "chainId": 4690,
+        "name": "iotex.io",
         "network": "testnet",
+        "shortName": "iotex-testnet",
         "features": [],
         "nativeCurrency": {
+            "chainId": 4690,
             "name": "IoTeX",
             "symbol": "IOTX",
             "decimals": 18
         },
-        "infoURL": "https://iotex.io",
-        "shortName": "iotex-testnet",
-        "chainId": 4690
+        "infoURL": "https://iotex.io"
     },
     {
-        "name": "EraSwap Mainnet",
-        "chain": "ESN",
+        "chainId": 5197,
+        "name": "ESN",
         "network": "mainnet",
+        "shortName": "es",
         "features": [],
         "nativeCurrency": {
+            "chainId": 5197,
             "name": "EraSwap",
             "symbol": "ES",
             "decimals": 18
         },
-        "infoURL": "https://eraswap.info/",
-        "shortName": "es",
-        "chainId": 5197
+        "infoURL": "https://eraswap.info/"
     },
     {
-        "name": "Ontology Testnet",
-        "chain": "Ontology",
+        "chainId": 5851,
+        "name": "Ontology",
         "network": "testnet",
+        "shortName": "Ontology Testnet",
         "features": [],
         "nativeCurrency": {
+            "chainId": 5851,
             "name": "ONG",
             "symbol": "ONG",
             "decimals": 9
         },
         "infoURL": "https://ont.io/",
-        "shortName": "Ontology Testnet",
-        "chainId": 5851,
         "explorers": [
             {
                 "name": "explorer",
@@ -1923,46 +1947,46 @@
         ]
     },
     {
-        "name": "Wegochain Rubidium Mainnet",
-        "chain": "RBD",
+        "chainId": 5869,
+        "name": "RBD",
         "network": "mainnet",
+        "shortName": "rbd",
         "features": [],
         "nativeCurrency": {
+            "chainId": 5869,
             "name": "Rubid",
             "symbol": "RBD",
             "decimals": 18
         },
-        "infoURL": "http://wegochain.io",
-        "shortName": "rbd",
-        "chainId": 5869
+        "infoURL": "http://wegochain.io"
     },
     {
-        "name": "MDGL Testnet",
-        "chain": "MDGL",
+        "chainId": 8029,
+        "name": "MDGL",
         "network": "testnet",
+        "shortName": "mdgl",
         "features": [],
         "nativeCurrency": {
+            "chainId": 8029,
             "name": "MDGL Token",
             "symbol": "MDGLT",
             "decimals": 18
         },
-        "infoURL": "https://mdgl.io",
-        "shortName": "mdgl",
-        "chainId": 8029
+        "infoURL": "https://mdgl.io"
     },
     {
-        "name": "GeneChain Adenine Testnet",
-        "chain": "GeneChain",
+        "chainId": 8080,
+        "name": "GeneChain",
         "network": "adenine",
+        "shortName": "GeneChainAdn",
         "features": [],
         "nativeCurrency": {
+            "chainId": 8080,
             "name": "Testnet RNA",
             "symbol": "tRNA",
             "decimals": 18
         },
         "infoURL": "https://scan-testnet.genechain.io/",
-        "shortName": "GeneChainAdn",
-        "chainId": 8080,
         "explorers": [
             {
                 "name": "GeneChain Adenine Testnet Scan",
@@ -1972,786 +1996,788 @@
         ]
     },
     {
-        "name": "Klaytn Mainnet Cypress",
-        "chain": "KLAY",
+        "chainId": 8217,
+        "name": "KLAY",
         "network": "cypress",
+        "shortName": "Cypress",
         "features": [],
         "nativeCurrency": {
+            "chainId": 8217,
             "name": "KLAY",
             "symbol": "KLAY",
             "decimals": 18
         },
-        "infoURL": "https://www.klaytn.com/",
-        "shortName": "Cypress",
-        "chainId": 8217
+        "infoURL": "https://www.klaytn.com/"
     },
     {
-        "name": "KorthoTest",
-        "chain": "Kortho",
+        "chainId": 8285,
+        "name": "Kortho",
         "network": "Test",
+        "shortName": "Kortho",
         "features": [],
         "nativeCurrency": {
+            "chainId": 8285,
             "name": "Kortho Test",
             "symbol": "KTO",
             "decimals": 11
         },
-        "infoURL": "https://www.kortho.io/",
-        "shortName": "Kortho",
-        "chainId": 8285
+        "infoURL": "https://www.kortho.io/"
     },
     {
-        "name": "TOOL Global Testnet",
-        "chain": "OLO",
+        "chainId": 8724,
+        "name": "OLO",
         "network": "testnet",
+        "shortName": "olo",
         "features": [],
         "nativeCurrency": {
+            "chainId": 8724,
             "name": "TOOL Global",
             "symbol": "OLO",
             "decimals": 18
         },
-        "infoURL": "https://testnet-explorer.wolot.io",
-        "shortName": "olo",
-        "chainId": 8724
+        "infoURL": "https://testnet-explorer.wolot.io"
     },
     {
+        "chainId": 8995,
         "name": "bloxberg",
-        "chain": "bloxberg",
         "network": "mainnet",
+        "shortName": "berg",
         "features": [],
         "nativeCurrency": {
+            "chainId": 8995,
             "name": "BERG",
             "symbol": "U+25B3",
             "decimals": 18
         },
-        "infoURL": "https://bloxberg.org",
-        "shortName": "berg",
-        "chainId": 8995
+        "infoURL": "https://bloxberg.org"
     },
     {
-        "name": "Smart Bitcoin Cash",
-        "chain": "smartBCH",
+        "chainId": 10000,
+        "name": "smartBCH",
         "network": "mainnet",
+        "shortName": "smartbch",
         "features": [],
         "nativeCurrency": {
+            "chainId": 10000,
             "name": "Bitcoin Cash",
             "symbol": "BCH",
             "decimals": 18
         },
-        "infoURL": "http://smartbch.org/",
-        "shortName": "smartbch",
-        "chainId": 10000
+        "infoURL": "http://smartbch.org/"
     },
     {
-        "name": "Smart Bitcoin Cash Testnet",
-        "chain": "smartBCHTest",
+        "chainId": 10001,
+        "name": "smartBCHTest",
         "network": "testnet",
+        "shortName": "smartbchtest",
         "features": [],
         "nativeCurrency": {
+            "chainId": 10001,
             "name": "Bitcoin Cash Test Token",
             "symbol": "BCHT",
             "decimals": 18
         },
-        "infoURL": "http://smartbch.org/",
-        "shortName": "smartbchtest",
-        "chainId": 10001
+        "infoURL": "http://smartbch.org/"
     },
     {
-        "name": "Blockchain Genesis Mainnet",
-        "chain": "GEN",
+        "chainId": 10101,
+        "name": "GEN",
         "network": "mainnet",
+        "shortName": "GEN",
         "features": [],
         "nativeCurrency": {
+            "chainId": 10101,
             "name": "GEN",
             "symbol": "GEN",
             "decimals": 18
         },
-        "infoURL": "https://www.xixoio.com/",
-        "shortName": "GEN",
-        "chainId": 10101
+        "infoURL": "https://www.xixoio.com/"
     },
     {
-        "name": "Webchain",
-        "chain": "WEB",
+        "chainId": 24484,
+        "name": "WEB",
         "network": "mainnet",
+        "shortName": "web",
         "features": [],
         "nativeCurrency": {
+            "chainId": 24484,
             "name": "Webchain Ether",
             "symbol": "WEB",
             "decimals": 18
         },
-        "infoURL": "https://webchain.network",
-        "shortName": "web",
-        "chainId": 24484
+        "infoURL": "https://webchain.network"
     },
     {
-        "name": "MintMe.com Coin",
-        "chain": "MINTME",
+        "chainId": 24734,
+        "name": "MINTME",
         "network": "mainnet",
+        "shortName": "mintme",
         "features": [],
         "nativeCurrency": {
+            "chainId": 24734,
             "name": "MintMe.com Coin",
             "symbol": "MINTME",
             "decimals": 18
         },
-        "infoURL": "https://www.mintme.com",
-        "shortName": "mintme",
-        "chainId": 24734
+        "infoURL": "https://www.mintme.com"
     },
     {
-        "name": "Ethersocial Network",
-        "chain": "ESN",
+        "chainId": 31102,
+        "name": "ESN",
         "network": "mainnet",
+        "shortName": "esn",
         "features": [],
         "nativeCurrency": {
+            "chainId": 31102,
             "name": "Ethersocial Network Ether",
             "symbol": "ESN",
             "decimals": 18
         },
-        "infoURL": "https://ethersocial.org",
-        "shortName": "esn",
-        "chainId": 31102
+        "infoURL": "https://ethersocial.org"
     },
     {
-        "name": "Fusion Mainnet",
-        "chain": "FSN",
+        "chainId": 32659,
+        "name": "FSN",
         "network": "mainnet",
+        "shortName": "fsn",
         "features": [],
         "nativeCurrency": {
+            "chainId": 32659,
             "name": "Fusion",
             "symbol": "FSN",
             "decimals": 18
         },
-        "infoURL": "https://www.fusion.org/",
-        "shortName": "fsn",
-        "chainId": 32659
+        "infoURL": "https://www.fusion.org/"
     },
     {
-        "name": "Energi Mainnet",
-        "chain": "NRG",
+        "chainId": 39797,
+        "name": "NRG",
         "network": "mainnet",
+        "shortName": "nrg",
         "features": [],
         "nativeCurrency": {
+            "chainId": 39797,
             "name": "Energi",
             "symbol": "NRG",
             "decimals": 18
         },
-        "infoURL": "https://www.energi.world/",
-        "shortName": "nrg",
-        "chainId": 39797
+        "infoURL": "https://www.energi.world/"
     },
     {
-        "name": "pegglecoin",
-        "chain": "42069",
+        "chainId": 42069,
+        "name": "42069",
         "network": "mainnet",
+        "shortName": "PC",
         "features": [],
         "nativeCurrency": {
+            "chainId": 42069,
             "name": "pegglecoin",
             "symbol": "peggle",
             "decimals": 18
         },
-        "infoURL": "https://teampeggle.com",
-        "shortName": "PC",
-        "chainId": 42069
+        "infoURL": "https://teampeggle.com"
     },
     {
-        "name": "Celo Mainnet",
-        "chain": "CELO",
+        "chainId": 42220,
+        "type": "Celo",
+        "name": "CELO",
         "network": "mainnet",
+        "shortName": "CELO",
         "features": [],
         "nativeCurrency": {
+            "chainId": 42220,
             "name": "CELO",
             "symbol": "CELO",
-            "decimals": 18,
-            "logoURI": "https://assets.coingecko.com/coins/images/11090/small/icon-celo-CELO-color-500.png"
+            "decimals": 18
         },
-        "infoURL": "https://explorer.celo.org/",
-        "shortName": "CELO",
-        "chainId": 42220
+        "infoURL": "https://explorer.celo.org/"
     },
     {
-        "name": "Athereum",
-        "chain": "ATH",
+        "chainId": 43110,
+        "name": "ATH",
         "network": "athereum",
+        "shortName": "avaeth",
         "features": [],
         "nativeCurrency": {
+            "chainId": 43110,
             "name": "Athereum Ether",
             "symbol": "ATH",
             "decimals": 18
         },
-        "infoURL": "https://athereum.ava.network",
-        "shortName": "avaeth",
-        "chainId": 43110
+        "infoURL": "https://athereum.ava.network"
     },
     {
-        "name": "Avalanche Mainnet",
-        "chain": "AVAX",
+        "chainId": 43114,
+        "type": "Avalanche",
+        "name": "AVAX",
+        "color": "rgb(232, 65, 66)",
         "network": "mainnet",
+        "shortName": "AVAX",
         "features": [],
         "nativeCurrency": {
+            "chainId": 43114,
             "name": "Avalanche",
             "symbol": "AVAX",
-            "decimals": 18,
-            "logoURI": "https://raw.githubusercontent.com/sushiswap/icons/master/network/avalanche.jpg"
+            "decimals": 18
         },
         "infoURL": "https://snowtrace.io/",
-        "shortName": "AVAX",
-        "chainId": 43114,
         "explorers": [
             {
                 "name": "snowtrace",
                 "url": "https://snowtrace.io/",
-                "icon": "avalanche",
                 "standard": "EIP3091",
-                "logoURI": "https://snowtrace.io/images/svg/brands/main.svg?v=21.12.4.1"
+                "logoURL": "https://snowtrace.io/images/svg/brands/main.svg?v=21.12.4.1"
             }
         ]
     },
     {
-        "name": "Avalanche Fuji Testnet",
-        "chain": "AVAX",
+        "chainId": 43113,
+        "name": "AVAX",
+        "color": "rgb(232, 65, 66)",
         "network": "testnet",
+        "shortName": "Fuji",
         "features": [],
         "nativeCurrency": {
+            "chainId": 43113,
             "name": "Avalanche",
             "symbol": "AVAX",
             "decimals": 18
         },
-        "infoURL": "https://cchain.explorer.avax-test.network",
-        "shortName": "Fuji",
-        "chainId": 43113
+        "infoURL": "https://cchain.explorer.avax-test.network"
     },
     {
-        "name": "Celo Alfajores Testnet",
-        "chain": "Celo",
+        "chainId": 44787,
+        "name": "Celo",
         "network": "Alfajores",
+        "shortName": "ALFA",
         "features": [],
         "nativeCurrency": {
+            "chainId": 44787,
             "name": "CELO",
             "symbol": "CELO",
             "decimals": 18
         },
-        "infoURL": "https://docs.celo.org/",
-        "shortName": "ALFA",
-        "chainId": 44787
+        "infoURL": "https://docs.celo.org/"
     },
     {
-        "name": "Energi Testnet",
-        "chain": "NRG",
+        "chainId": 49797,
+        "name": "NRG",
         "network": "testnet",
+        "shortName": "tnrg",
         "features": [],
         "nativeCurrency": {
+            "chainId": 49797,
             "name": "Energi",
             "symbol": "tNRG",
             "decimals": 18
         },
-        "infoURL": "https://www.energi.world/",
-        "shortName": "tnrg",
-        "chainId": 49797
+        "infoURL": "https://www.energi.world/"
     },
     {
-        "name": "Celo Baklava Testnet",
-        "chain": "Celo",
+        "chainId": 62320,
+        "name": "Celo",
         "network": "Baklava",
+        "shortName": "BKLV",
         "features": [],
         "nativeCurrency": {
+            "chainId": 62320,
             "name": "CELO",
             "symbol": "CELO",
             "decimals": 18
         },
-        "infoURL": "https://docs.celo.org/",
-        "shortName": "BKLV",
-        "chainId": 62320
+        "infoURL": "https://docs.celo.org/"
     },
     {
-        "name": "Energy Web Volta Testnet",
-        "chain": "Volta",
+        "chainId": 73799,
+        "name": "Volta",
         "network": "testnet",
+        "shortName": "vt",
         "features": [],
         "nativeCurrency": {
+            "chainId": 73799,
             "name": "Volta Token",
             "symbol": "VT",
             "decimals": 18
         },
-        "infoURL": "https://energyweb.org",
-        "shortName": "vt",
-        "chainId": 73799
+        "infoURL": "https://energyweb.org"
     },
     {
-        "name": "Firenze test network",
-        "chain": "FIR",
+        "chainId": 78110,
+        "name": "FIR",
         "network": "testnet",
+        "shortName": "firenze",
         "features": [],
         "nativeCurrency": {
+            "chainId": 78110,
             "name": "Firenze Ether",
             "symbol": "FIN",
             "decimals": 18
         },
-        "infoURL": "https://primusmoney.com",
-        "shortName": "firenze",
-        "chainId": 78110
+        "infoURL": "https://primusmoney.com"
     },
     {
-        "name": "QuarkChain Mainnet Root",
-        "chain": "QuarkChain",
+        "chainId": 100000,
+        "name": "QuarkChain",
         "network": "mainnet",
+        "shortName": "qkc-r",
         "features": [],
         "nativeCurrency": {
+            "chainId": 100000,
             "name": "QKC",
             "symbol": "QKC",
             "decimals": 18
         },
-        "infoURL": "https://www.quarkchain.io/",
-        "shortName": "qkc-r",
-        "chainId": 100000
+        "infoURL": "https://www.quarkchain.io/"
     },
     {
-        "name": "QuarkChain Mainnet Shard 0",
-        "chain": "QuarkChain",
+        "chainId": 100001,
+        "name": "QuarkChain",
         "network": "mainnet",
+        "shortName": "qkc-s0",
         "features": [],
         "nativeCurrency": {
+            "chainId": 100001,
             "name": "QKC",
             "symbol": "QKC",
             "decimals": 18
         },
-        "infoURL": "https://www.quarkchain.io/",
-        "shortName": "qkc-s0",
-        "chainId": 100001
+        "infoURL": "https://www.quarkchain.io/"
     },
     {
-        "name": "QuarkChain Mainnet Shard 1",
-        "chain": "QuarkChain",
+        "chainId": 100002,
+        "name": "QuarkChain",
         "network": "mainnet",
+        "shortName": "qkc-s1",
         "features": [],
         "nativeCurrency": {
+            "chainId": 100002,
             "name": "QKC",
             "symbol": "QKC",
             "decimals": 18
         },
-        "infoURL": "https://www.quarkchain.io/",
-        "shortName": "qkc-s1",
-        "chainId": 100002
+        "infoURL": "https://www.quarkchain.io/"
     },
     {
-        "name": "QuarkChain Mainnet Shard 2",
-        "chain": "QuarkChain",
+        "chainId": 100003,
+        "name": "QuarkChain",
         "network": "mainnet",
+        "shortName": "qkc-s2",
         "features": [],
         "nativeCurrency": {
+            "chainId": 100003,
             "name": "QKC",
             "symbol": "QKC",
             "decimals": 18
         },
-        "infoURL": "https://www.quarkchain.io/",
-        "shortName": "qkc-s2",
-        "chainId": 100003
+        "infoURL": "https://www.quarkchain.io/"
     },
     {
-        "name": "QuarkChain Mainnet Shard 3",
-        "chain": "QuarkChain",
+        "chainId": 100004,
+        "name": "QuarkChain",
         "network": "mainnet",
+        "shortName": "qkc-s3",
         "features": [],
         "nativeCurrency": {
+            "chainId": 100004,
             "name": "QKC",
             "symbol": "QKC",
             "decimals": 18
         },
-        "infoURL": "https://www.quarkchain.io/",
-        "shortName": "qkc-s3",
-        "chainId": 100004
+        "infoURL": "https://www.quarkchain.io/"
     },
     {
-        "name": "QuarkChain Mainnet Shard 4",
-        "chain": "QuarkChain",
+        "chainId": 100005,
+        "name": "QuarkChain",
         "network": "mainnet",
+        "shortName": "qkc-s4",
         "features": [],
         "nativeCurrency": {
+            "chainId": 100005,
             "name": "QKC",
             "symbol": "QKC",
             "decimals": 18
         },
-        "infoURL": "https://www.quarkchain.io/",
-        "shortName": "qkc-s4",
-        "chainId": 100005
+        "infoURL": "https://www.quarkchain.io/"
     },
     {
-        "name": "QuarkChain Mainnet Shard 5",
-        "chain": "QuarkChain",
+        "chainId": 100006,
+        "name": "QuarkChain",
         "network": "mainnet",
+        "shortName": "qkc-s5",
         "features": [],
         "nativeCurrency": {
+            "chainId": 100006,
             "name": "QKC",
             "symbol": "QKC",
             "decimals": 18
         },
-        "infoURL": "https://www.quarkchain.io/",
-        "shortName": "qkc-s5",
-        "chainId": 100006
+        "infoURL": "https://www.quarkchain.io/"
     },
     {
-        "name": "QuarkChain Mainnet Shard 6",
-        "chain": "QuarkChain",
+        "chainId": 100007,
+        "name": "QuarkChain",
         "network": "mainnet",
+        "shortName": "qkc-s6",
         "features": [],
         "nativeCurrency": {
+            "chainId": 100007,
             "name": "QKC",
             "symbol": "QKC",
             "decimals": 18
         },
-        "infoURL": "https://www.quarkchain.io/",
-        "shortName": "qkc-s6",
-        "chainId": 100007
+        "infoURL": "https://www.quarkchain.io/"
     },
     {
-        "name": "QuarkChain Mainnet Shard 7",
-        "chain": "QuarkChain",
+        "chainId": 100008,
+        "name": "QuarkChain",
         "network": "mainnet",
+        "shortName": "qkc-s7",
         "features": [],
         "nativeCurrency": {
+            "chainId": 100008,
             "name": "QKC",
             "symbol": "QKC",
             "decimals": 18
         },
-        "infoURL": "https://www.quarkchain.io/",
-        "shortName": "qkc-s7",
-        "chainId": 100008
+        "infoURL": "https://www.quarkchain.io/"
     },
     {
-        "name": "QuarkChain Devnet Root",
-        "chain": "QuarkChain",
+        "chainId": 110000,
+        "name": "QuarkChain",
         "network": "devnet",
+        "shortName": "qkc-d-r",
         "features": [],
         "nativeCurrency": {
+            "chainId": 110000,
             "name": "QKC",
             "symbol": "QKC",
             "decimals": 18
         },
-        "infoURL": "https://www.quarkchain.io/",
-        "shortName": "qkc-d-r",
-        "chainId": 110000
+        "infoURL": "https://www.quarkchain.io/"
     },
     {
-        "name": "QuarkChain Devnet Shard 0",
-        "chain": "QuarkChain",
+        "chainId": 110001,
+        "name": "QuarkChain",
         "network": "devnet",
+        "shortName": "qkc-d-s0",
         "features": [],
         "nativeCurrency": {
+            "chainId": 110001,
             "name": "QKC",
             "symbol": "QKC",
             "decimals": 18
         },
-        "infoURL": "https://www.quarkchain.io/",
-        "shortName": "qkc-d-s0",
-        "chainId": 110001
+        "infoURL": "https://www.quarkchain.io/"
     },
     {
-        "name": "QuarkChain Devnet Shard 1",
-        "chain": "QuarkChain",
+        "chainId": 110002,
+        "name": "QuarkChain",
         "network": "devnet",
+        "shortName": "qkc-d-s1",
         "features": [],
         "nativeCurrency": {
+            "chainId": 110002,
             "name": "QKC",
             "symbol": "QKC",
             "decimals": 18
         },
-        "infoURL": "https://www.quarkchain.io/",
-        "shortName": "qkc-d-s1",
-        "chainId": 110002
+        "infoURL": "https://www.quarkchain.io/"
     },
     {
-        "name": "QuarkChain Devnet Shard 2",
-        "chain": "QuarkChain",
+        "chainId": 110003,
+        "name": "QuarkChain",
         "network": "devnet",
+        "shortName": "qkc-d-s2",
         "features": [],
         "nativeCurrency": {
+            "chainId": 110003,
             "name": "QKC",
             "symbol": "QKC",
             "decimals": 18
         },
-        "infoURL": "https://www.quarkchain.io/",
-        "shortName": "qkc-d-s2",
-        "chainId": 110003
+        "infoURL": "https://www.quarkchain.io/"
     },
     {
-        "name": "QuarkChain Devnet Shard 3",
-        "chain": "QuarkChain",
+        "chainId": 110004,
+        "name": "QuarkChain",
         "network": "devnet",
+        "shortName": "qkc-d-s3",
         "features": [],
         "nativeCurrency": {
+            "chainId": 110004,
             "name": "QKC",
             "symbol": "QKC",
             "decimals": 18
         },
-        "infoURL": "https://www.quarkchain.io/",
-        "shortName": "qkc-d-s3",
-        "chainId": 110004
+        "infoURL": "https://www.quarkchain.io/"
     },
     {
-        "name": "QuarkChain Devnet Shard 4",
-        "chain": "QuarkChain",
+        "chainId": 110005,
+        "name": "QuarkChain",
         "network": "devnet",
+        "shortName": "qkc-d-s4",
         "features": [],
         "nativeCurrency": {
+            "chainId": 110005,
             "name": "QKC",
             "symbol": "QKC",
             "decimals": 18
         },
-        "infoURL": "https://www.quarkchain.io/",
-        "shortName": "qkc-d-s4",
-        "chainId": 110005
+        "infoURL": "https://www.quarkchain.io/"
     },
     {
-        "name": "QuarkChain Devnet Shard 5",
-        "chain": "QuarkChain",
+        "chainId": 110006,
+        "name": "QuarkChain",
         "network": "devnet",
+        "shortName": "qkc-d-s5",
         "features": [],
         "nativeCurrency": {
+            "chainId": 110006,
             "name": "QKC",
             "symbol": "QKC",
             "decimals": 18
         },
-        "infoURL": "https://www.quarkchain.io/",
-        "shortName": "qkc-d-s5",
-        "chainId": 110006
+        "infoURL": "https://www.quarkchain.io/"
     },
     {
-        "name": "QuarkChain Devnet Shard 6",
-        "chain": "QuarkChain",
+        "chainId": 110007,
+        "name": "QuarkChain",
         "network": "devnet",
+        "shortName": "qkc-d-s6",
         "features": [],
         "nativeCurrency": {
+            "chainId": 110007,
             "name": "QKC",
             "symbol": "QKC",
             "decimals": 18
         },
-        "infoURL": "https://www.quarkchain.io/",
-        "shortName": "qkc-d-s6",
-        "chainId": 110007
+        "infoURL": "https://www.quarkchain.io/"
     },
     {
-        "name": "QuarkChain Devnet Shard 7",
-        "chain": "QuarkChain",
+        "chainId": 110008,
+        "name": "QuarkChain",
         "network": "devnet",
+        "shortName": "qkc-d-s7",
         "features": [],
         "nativeCurrency": {
+            "chainId": 110008,
             "name": "QKC",
             "symbol": "QKC",
             "decimals": 18
         },
-        "infoURL": "https://www.quarkchain.io/",
-        "shortName": "qkc-d-s7",
-        "chainId": 110008
+        "infoURL": "https://www.quarkchain.io/"
     },
     {
-        "name": "Akroma",
-        "chain": "AKA",
+        "chainId": 200625,
+        "name": "AKA",
         "network": "mainnet",
+        "shortName": "aka",
         "features": [],
         "nativeCurrency": {
+            "chainId": 200625,
             "name": "Akroma Ether",
             "symbol": "AKA",
             "decimals": 18
         },
-        "infoURL": "https://akroma.io",
-        "shortName": "aka",
-        "chainId": 200625
+        "infoURL": "https://akroma.io"
     },
     {
-        "name": "ARTIS sigma1",
-        "chain": "ARTIS",
+        "chainId": 246529,
+        "name": "ARTIS",
         "network": "sigma1",
+        "shortName": "ats",
         "features": [],
         "nativeCurrency": {
+            "chainId": 246529,
             "name": "ARTIS sigma1 Ether",
             "symbol": "ATS",
             "decimals": 18
         },
-        "infoURL": "https://artis.eco",
-        "shortName": "ats",
-        "chainId": 246529
+        "infoURL": "https://artis.eco"
     },
     {
-        "name": "ARTIS Testnet tau1",
-        "chain": "ARTIS",
+        "chainId": 246785,
+        "name": "ARTIS",
         "network": "tau1",
+        "shortName": "atstau",
         "features": [],
         "nativeCurrency": {
+            "chainId": 246785,
             "name": "ARTIS tau1 Ether",
             "symbol": "tATS",
             "decimals": 18
         },
-        "infoURL": "https://artis.network",
-        "shortName": "atstau",
-        "chainId": 246785
+        "infoURL": "https://artis.network"
     },
     {
-        "name": "Ether-1",
-        "chain": "ETHO",
+        "chainId": 1313114,
+        "name": "ETHO",
         "network": "mainnet",
+        "shortName": "etho",
         "features": [],
         "nativeCurrency": {
+            "chainId": 1313114,
             "name": "Ether-1 Ether",
             "symbol": "ETHO",
             "decimals": 18
         },
-        "infoURL": "https://ether1.org",
-        "shortName": "etho",
-        "chainId": 1313114
+        "infoURL": "https://ether1.org"
     },
     {
-        "name": "Xerom",
-        "chain": "XERO",
+        "chainId": 1313500,
+        "name": "XERO",
         "network": "mainnet",
+        "shortName": "xero",
         "features": [],
         "nativeCurrency": {
+            "chainId": 1313500,
             "name": "Xerom Ether",
             "symbol": "XERO",
             "decimals": 18
         },
-        "infoURL": "https://xerom.org",
-        "shortName": "xero",
-        "chainId": 1313500
+        "infoURL": "https://xerom.org"
     },
     {
-        "name": "Musicoin",
-        "chain": "MUSIC",
+        "chainId": 7762959,
+        "name": "MUSIC",
         "network": "mainnet",
+        "shortName": "music",
         "features": [],
         "nativeCurrency": {
+            "chainId": 7762959,
             "name": "Musicoin",
             "symbol": "MUSIC",
             "decimals": 18
         },
-        "infoURL": "https://musicoin.tw",
-        "shortName": "music",
-        "chainId": 7762959
+        "infoURL": "https://musicoin.tw"
     },
     {
-        "name": "PepChain Churchill",
-        "chain": "PEP",
+        "chainId": 13371337,
+        "name": "PEP",
         "network": "testnet",
+        "shortName": "tpep",
         "features": [],
         "nativeCurrency": {
+            "chainId": 13371337,
             "name": "PepChain Churchill Ether",
             "symbol": "TPEP",
             "decimals": 18
         },
-        "infoURL": "https://pepchain.io",
-        "shortName": "tpep",
-        "chainId": 13371337
+        "infoURL": "https://pepchain.io"
     },
     {
-        "name": "IOLite",
-        "chain": "ILT",
+        "chainId": 18289463,
+        "name": "ILT",
         "network": "mainnet",
+        "shortName": "ilt",
         "features": [],
         "nativeCurrency": {
+            "chainId": 18289463,
             "name": "IOLite Ether",
             "symbol": "ILT",
             "decimals": 18
         },
-        "infoURL": "https://iolite.io",
-        "shortName": "ilt",
-        "chainId": 18289463
+        "infoURL": "https://iolite.io"
     },
     {
-        "name": "quarkblockchain",
-        "chain": "QKI",
+        "chainId": 20181205,
+        "name": "QKI",
         "network": "mainnet",
+        "shortName": "qki",
         "features": [],
         "nativeCurrency": {
+            "chainId": 20181205,
             "name": "quarkblockchain Native Token",
             "symbol": "QKI",
             "decimals": 18
         },
-        "infoURL": "https://quarkblockchain.org/",
-        "shortName": "qki",
-        "chainId": 20181205
+        "infoURL": "https://quarkblockchain.org/"
     },
     {
-        "name": "Auxilium Network Mainnet",
-        "chain": "AUX",
+        "chainId": 28945486,
+        "name": "AUX",
         "network": "mainnet",
+        "shortName": "auxi",
         "features": [],
         "nativeCurrency": {
+            "chainId": 28945486,
             "name": "Auxilium coin",
             "symbol": "AUX",
             "decimals": 18
         },
-        "infoURL": "https://auxilium.global",
-        "shortName": "auxi",
-        "chainId": 28945486
+        "infoURL": "https://auxilium.global"
     },
     {
-        "name": "Joys Digital Mainnet",
-        "chain": "JOYS",
+        "chainId": 35855456,
+        "name": "JOYS",
         "network": "mainnet",
+        "shortName": "JOYS",
         "features": [],
         "nativeCurrency": {
+            "chainId": 35855456,
             "name": "JOYS",
             "symbol": "JOYS",
             "decimals": 18
         },
-        "infoURL": "https://joys.digital",
-        "shortName": "JOYS",
-        "chainId": 35855456
+        "infoURL": "https://joys.digital"
     },
     {
-        "name": "Aquachain",
-        "chain": "AQUA",
+        "chainId": 61717561,
+        "name": "AQUA",
         "network": "mainnet",
+        "shortName": "aqua",
         "features": [],
         "nativeCurrency": {
+            "chainId": 61717561,
             "name": "Aquachain Ether",
             "symbol": "AQUA",
             "decimals": 18
         },
-        "infoURL": "https://aquachain.github.io",
-        "shortName": "aqua",
-        "chainId": 61717561
+        "infoURL": "https://aquachain.github.io"
     },
     {
-        "name": "Joys Digital TestNet",
-        "chain": "TOYS",
+        "chainId": 99415706,
+        "name": "TOYS",
         "network": "testnet",
+        "shortName": "TOYS",
         "features": [],
         "nativeCurrency": {
+            "chainId": 99415706,
             "name": "TOYS",
             "symbol": "TOYS",
             "decimals": 18
         },
-        "infoURL": "https://joys.digital",
-        "shortName": "TOYS",
-        "chainId": 99415706
+        "infoURL": "https://joys.digital"
     },
     {
-        "name": "IPOS Network",
-        "chain": "IPOS",
+        "chainId": 1122334455,
+        "name": "IPOS",
         "network": "mainnet",
+        "shortName": "ipos",
         "features": [],
         "nativeCurrency": {
+            "chainId": 1122334455,
             "name": "IPOS Network Ether",
             "symbol": "IPOS",
             "decimals": 18
         },
-        "infoURL": "https://iposlab.com",
-        "shortName": "ipos",
-        "chainId": 1122334455
+        "infoURL": "https://iposlab.com"
     },
     {
-        "name": "Aurora MainNet",
-        "chain": "Aurora",
+        "chainId": 1313161554,
+        "type": "Aurora",
+        "name": "Aurora",
+        "color": "rgb(112, 212, 74)",
         "network": "mainnet",
+        "shortName": "aurora",
         "features": [],
         "nativeCurrency": {
+            "chainId": 1313161554,
             "name": "Ether",
             "symbol": "aETH",
-            "decimals": 18,
-            "logoURI": "https://static.debank.com/image/token/logo_url/eth/935ae4e4d1d12d59a99717a24f2540b5.png"
+            "decimals": 18
         },
         "infoURL": "https://aurora.dev",
-        "shortName": "aurora",
-        "chainId": 1313161554,
         "explorers": [
             {
                 "name": "Blockscout",
@@ -2761,219 +2787,219 @@
         ]
     },
     {
-        "name": "Aurora TestNet",
-        "chain": "Aurora",
+        "chainId": 1313161555,
+        "type": "Aurora",
+        "name": "Aurora",
+        "color": "rgb(112, 212, 74)",
         "network": "testnet",
+        "shortName": "aurora-testnet",
         "features": [],
         "nativeCurrency": {
+            "chainId": 1313161555,
             "name": "Ether",
             "symbol": "aETH",
-            "decimals": 18,
-            "logoURI": "https://static.debank.com/image/token/logo_url/eth/935ae4e4d1d12d59a99717a24f2540b5.png"
+            "decimals": 18
         },
-        "infoURL": "https://aurora.dev",
-        "shortName": "aurora-testnet",
-        "chainId": 1313161555
+        "infoURL": "https://aurora.dev"
     },
     {
-        "name": "Aurora BetaNet",
-        "chain": "Aurora",
+        "chainId": 1313161556,
+        "type": "Aurora",
+        "name": "Aurora",
+        "color": "rgb(112, 212, 74)",
         "network": "betanet",
+        "shortName": "aurora-betanet",
         "features": [],
         "nativeCurrency": {
+            "chainId": 1313161556,
             "name": "Ether",
             "symbol": "aETH",
             "decimals": 18
         },
-        "infoURL": "https://aurora.dev",
-        "shortName": "aurora-betanet",
-        "chainId": 1313161556
+        "infoURL": "https://aurora.dev"
     },
     {
+        "chainId": 1666600000,
         "name": "Harmony",
-        "chain": "Harmony",
         "network": "mainnet",
-        "features": [""],
-        "nativeCurrency": { "name": "ONE", "symbol": "ONE", "decimals": 18 },
-        "infoURL": "https://explorer.harmony.one",
-        "shortName": "hmy",
-        "chainId": 1666600000,
-        "networkId": 1666600000,
-        "explorers": [
-            {
-                "name": "harmony",
-                "url": "https://explorer.harmony.one",
-                "standard": "EIP3091"
-            }
-        ]
+        "shortName": "hmy-s0",
+        "features": [],
+        "nativeCurrency": {
+            "chainId": 1666600000,
+            "name": "ONE",
+            "symbol": "ONE",
+            "decimals": 18
+        },
+        "infoURL": "https://www.harmony.one/"
     },
     {
-        "name": "Harmony Mainnet Shard 1",
-        "chain": "HarmonyShard1",
+        "chainId": 1666600001,
+        "name": "Harmony",
         "network": "mainnet",
+        "shortName": "hmy-s1",
         "features": [],
         "nativeCurrency": {
+            "chainId": 1666600001,
             "name": "ONE",
             "symbol": "ONE",
             "decimals": 18
         },
-        "infoURL": "https://www.harmony.one/",
-        "shortName": "hmy-s1",
-        "chainId": 1666600001
+        "infoURL": "https://www.harmony.one/"
     },
     {
-        "name": "Harmony Mainnet Shard 2",
-        "chain": "Harmony",
+        "chainId": 1666600002,
+        "name": "Harmony",
         "network": "mainnet",
+        "shortName": "hmy-s2",
         "features": [],
         "nativeCurrency": {
+            "chainId": 1666600002,
             "name": "ONE",
             "symbol": "ONE",
             "decimals": 18
         },
-        "infoURL": "https://www.harmony.one/",
-        "shortName": "hmy-s2",
-        "chainId": 1666600002
+        "infoURL": "https://www.harmony.one/"
     },
     {
-        "name": "Harmony Mainnet Shard 3",
-        "chain": "Harmony",
+        "chainId": 1666600003,
+        "name": "Harmony",
         "network": "mainnet",
+        "shortName": "hmy-s3",
         "features": [],
         "nativeCurrency": {
+            "chainId": 1666600003,
             "name": "ONE",
             "symbol": "ONE",
             "decimals": 18
         },
-        "infoURL": "https://www.harmony.one/",
-        "shortName": "hmy-s3",
-        "chainId": 1666600003
+        "infoURL": "https://www.harmony.one/"
     },
     {
-        "name": "Harmony Testnet Shard 0",
-        "chain": "Harmony",
+        "chainId": 1666700000,
+        "name": "Harmony",
         "network": "testnet",
+        "shortName": "hmy-b-s0",
         "features": [],
         "nativeCurrency": {
+            "chainId": 1666700000,
             "name": "ONE",
             "symbol": "ONE",
             "decimals": 18
         },
-        "infoURL": "https://www.harmony.one/",
-        "shortName": "hmy-b-s0",
-        "chainId": 1666700000
+        "infoURL": "https://www.harmony.one/"
     },
     {
-        "name": "Harmony Testnet Shard 1",
-        "chain": "Harmony",
+        "chainId": 1666700001,
+        "name": "Harmony",
         "network": "testnet",
+        "shortName": "hmy-b-s1",
         "features": [],
         "nativeCurrency": {
+            "chainId": 1666700001,
             "name": "ONE",
             "symbol": "ONE",
             "decimals": 18
         },
-        "infoURL": "https://www.harmony.one/",
-        "shortName": "hmy-b-s1",
-        "chainId": 1666700001
+        "infoURL": "https://www.harmony.one/"
     },
     {
-        "name": "Harmony Testnet Shard 2",
-        "chain": "Harmony",
+        "chainId": 1666700002,
+        "name": "Harmony",
         "network": "testnet",
+        "shortName": "hmy-b-s2",
         "features": [],
         "nativeCurrency": {
+            "chainId": 1666700002,
             "name": "ONE",
             "symbol": "ONE",
             "decimals": 18
         },
-        "infoURL": "https://www.harmony.one/",
-        "shortName": "hmy-b-s2",
-        "chainId": 1666700002
+        "infoURL": "https://www.harmony.one/"
     },
     {
-        "name": "Harmony Testnet Shard 3",
-        "chain": "Harmony",
+        "chainId": 1666700003,
+        "name": "Harmony",
         "network": "testnet",
+        "shortName": "hmy-b-s3",
         "features": [],
         "nativeCurrency": {
+            "chainId": 1666700003,
             "name": "ONE",
             "symbol": "ONE",
             "decimals": 18
         },
-        "infoURL": "https://www.harmony.one/",
-        "shortName": "hmy-b-s3",
-        "chainId": 1666700003
+        "infoURL": "https://www.harmony.one/"
     },
     {
-        "name": "Pirl",
-        "chain": "PIRL",
+        "chainId": 3125659152,
+        "name": "PIRL",
         "network": "mainnet",
+        "shortName": "pirl",
         "features": [],
         "nativeCurrency": {
+            "chainId": 3125659152,
             "name": "Pirl Ether",
             "symbol": "PIRL",
             "decimals": 18
         },
-        "infoURL": "https://pirl.io",
-        "shortName": "pirl",
-        "chainId": 3125659152
+        "infoURL": "https://pirl.io"
     },
     {
-        "name": "Palm Testnet",
-        "chain": "Palm",
+        "chainId": 11297108099,
+        "name": "Palm",
         "network": "testnet",
+        "shortName": "tpalm",
         "features": [],
         "nativeCurrency": {
+            "chainId": 11297108099,
             "name": "PALM",
             "symbol": "PALM",
             "decimals": 18
         },
-        "infoURL": "https://palm.io",
-        "shortName": "tpalm",
-        "chainId": 11297108099
+        "infoURL": "https://palm.io"
     },
     {
-        "name": "Palm Mainnet",
-        "chain": "Palm",
+        "chainId": 11297108109,
+        "name": "Palm",
         "network": "mainnet",
+        "shortName": "palm",
         "features": [],
         "nativeCurrency": {
+            "chainId": 11297108109,
             "name": "PALM",
             "symbol": "PALM",
             "decimals": 18
         },
-        "infoURL": "https://palm.io",
-        "shortName": "palm",
-        "chainId": 11297108109
+        "infoURL": "https://palm.io"
     },
     {
-        "name": "Conflux eSpace Testnet",
-        "chain": "Conflux",
+        "chainId": 71,
+        "type": "Conflux",
+        "name": "Conflux",
         "network": "testnet",
+        "shortName": "Conflux",
         "features": [],
         "nativeCurrency": {
+            "chainId": 71,
             "name": "CFX",
             "symbol": "CFX",
             "decimals": 18
         },
-        "infoURL": "https://confluxnetwork.org",
-        "shortName": "Conflux",
-        "chainId": 71
+        "infoURL": "https://confluxnetwork.org"
     },
     {
-        "name": "Conflux eSpace",
-        "chain": "Conflux",
+        "chainId": 1030,
+        "type": "Conflux",
+        "name": "Conflux",
         "network": "mainnet",
+        "shortName": "Conflux",
         "features": [],
         "nativeCurrency": {
+            "chainId": 1030,
             "name": "CFX",
             "symbol": "CFX",
-            "decimals": 18,
-            "logoURI": "https://raw.githubusercontent.com/DimensionDev/Maskbook/e434014b17bd4622e28e21c9d4cd9ffec875889e/packages/mask/src/plugins/EVM/assets/conflux.png"
+            "decimals": 18
         },
-        "infoURL": "https://evm.confluxscan.net",
-        "shortName": "Conflux",
-        "chainId": 1030
+        "infoURL": "https://evm.confluxscan.net"
     }
 ]
diff --git a/packages/web3-shared/evm/constants/constants.ts b/packages/web3-shared/evm/constants/constants.ts
index feef208f28eb..f96125e1f100 100644
--- a/packages/web3-shared/evm/constants/constants.ts
+++ b/packages/web3-shared/evm/constants/constants.ts
@@ -7,7 +7,6 @@ import Zerion from '@masknet/web3-constants/evm/zerion.json'
 import Gitcoin from '@masknet/web3-constants/evm/gitcoin.json'
 import OpenOcean from '@masknet/web3-constants/evm/openocean.json'
 import ITO from '@masknet/web3-constants/evm/ito.json'
-import LBP from '@masknet/web3-constants/evm/lbp.json'
 import RedPacket from '@masknet/web3-constants/evm/red-packet.json'
 import NftRedPacket from '@masknet/web3-constants/evm/nft-red-packet.json'
 import Token from '@masknet/web3-constants/evm/token.json'
@@ -26,7 +25,8 @@ import CryptoArtAI from '@masknet/web3-constants/evm/cryptoartai.json'
 import ArtBlocks from '@masknet/web3-constants/evm/artblocks.json'
 import Aave from '@masknet/web3-constants/evm/aave.json'
 import Lido from '@masknet/web3-constants/evm/lido.json'
-import { hookTransform, transform, transformFromJSON } from './utils'
+import { hookTransform, transform, transformFromJSON } from '@masknet/web3-shared-base'
+import { ChainId } from '../types'
 
 function getEnvConstants(key: 'WEB3_CONSTANTS_RPC') {
     try {
@@ -39,86 +39,83 @@ function getEnvConstants(key: 'WEB3_CONSTANTS_RPC') {
     }
 }
 
-export const getAirdropConstants = transform(Airdrop)
+export const getAirdropConstants = transform(ChainId, Airdrop)
 export const useAirdropConstants = hookTransform(getAirdropConstants)
 
-export const getEthereumConstants = transform(Ethereum)
+export const getEthereumConstants = transform(ChainId, Ethereum)
 export const useEthereumConstants = hookTransform(getEthereumConstants)
 
-export const getDeBankConstants = transform(DeBank)
+export const getDeBankConstants = transform(ChainId, DeBank)
 export const useDeBankConstants = hookTransform(getDeBankConstants)
 
-export const getCoinGeckoConstants = transform(CoinGecko)
+export const getCoinGeckoConstants = transform(ChainId, CoinGecko)
 export const useCoinGeckoConstants = hookTransform(getCoinGeckoConstants)
 
-export const getCoinMarketCapConstants = transform(CoinMarketCap)
+export const getCoinMarketCapConstants = transform(ChainId, CoinMarketCap)
 export const useCoinMarketCapConstants = hookTransform(getCoinMarketCapConstants)
 
-export const getZerionConstants = transform(Zerion)
+export const getZerionConstants = transform(ChainId, Zerion)
 export const useZerionConstants = hookTransform(getZerionConstants)
 
-export const getGitcoinConstants = transform(Gitcoin)
+export const getGitcoinConstants = transform(ChainId, Gitcoin)
 export const useGitcoinConstants = hookTransform(getGitcoinConstants)
 
-export const getOpenOceanConstants = transform(OpenOcean)
+export const getOpenOceanConstants = transform(ChainId, OpenOcean)
 export const useOpenOceanConstants = hookTransform(getOpenOceanConstants)
 
-export const getITOConstants = transform(ITO)
+export const getITOConstants = transform(ChainId, ITO)
 export const useITOConstants = hookTransform(getITOConstants)
 
-export const getLBPConstants = transform(LBP)
-export const useLBPConstants = hookTransform(getLBPConstants)
-
-export const getRedPacketConstants = transform(RedPacket)
+export const getRedPacketConstants = transform(ChainId, RedPacket)
 export const useRedPacketConstants = hookTransform(getRedPacketConstants)
 
-export const getTokenConstants = transform(Token)
+export const getTokenConstants = transform(ChainId, Token)
 export const useTokenConstants = hookTransform(getTokenConstants)
 
-export const getTraderConstants = transform(Trader)
+export const getTraderConstants = transform(ChainId, Trader)
 export const useTraderConstants = hookTransform(getTraderConstants)
 
-export const getTrendingConstants = transform(Trending)
+export const getTrendingConstants = transform(ChainId, Trending)
 export const useTrendingConstants = hookTransform(getTrendingConstants)
 
-export const getMaskBoxConstants = transform(MaskBox)
+export const getMaskBoxConstants = transform(ChainId, MaskBox)
 export const useMaskBoxConstants = hookTransform(getMaskBoxConstants)
 
-export const getRPCConstants = transformFromJSON(getEnvConstants('WEB3_CONSTANTS_RPC'), RPC)
+export const getRPCConstants = transformFromJSON(ChainId, getEnvConstants('WEB3_CONSTANTS_RPC'), RPC)
 export const useRPCConstants = hookTransform(getRPCConstants)
 
-export const getExplorerConstants = transform(Explorer)
+export const getExplorerConstants = transform(ChainId, Explorer)
 export const useExplorerConstants = hookTransform(getExplorerConstants)
 
-export const getTokenListConstants = transform(TokenList)
+export const getTokenListConstants = transform(ChainId, TokenList)
 export const useTokenListConstants = hookTransform(getTokenListConstants)
 
-export const getTokenAssetBaseURLConstants = transform(TokenAssetBaseURL)
+export const getTokenAssetBaseURLConstants = transform(ChainId, TokenAssetBaseURL)
 export const useTokenAssetBaseURLConstants = hookTransform(getTokenAssetBaseURLConstants)
 
-export const getPoolTogetherConstants = transform(PoolTogether)
+export const getPoolTogetherConstants = transform(ChainId, PoolTogether)
 export const usePoolTogetherConstants = hookTransform(getPoolTogetherConstants)
 
-export const getGoodGhostingConstants = transform(GoodGhosting)
+export const getGoodGhostingConstants = transform(ChainId, GoodGhosting)
 export const useGoodGhostingConstants = hookTransform(getGoodGhostingConstants)
 
-export const getSpaceStationGalaxyConstants = transform(SpaceStationGalaxy)
+export const getSpaceStationGalaxyConstants = transform(ChainId, SpaceStationGalaxy)
 export const useSpaceStationGalaxyConstants = hookTransform(getSpaceStationGalaxyConstants)
 
-export const getOpenseaAPIConstants = transform(OpenseaAPI)
+export const getOpenseaAPIConstants = transform(ChainId, OpenseaAPI)
 export const useOpenseaAPIConstants = hookTransform(getOpenseaAPIConstants)
 
-export const getCryptoArtAIConstants = transform(CryptoArtAI)
+export const getCryptoArtAIConstants = transform(ChainId, CryptoArtAI)
 export const useCryptoArtAIConstants = hookTransform(getCryptoArtAIConstants)
 
-export const getArtBlocksConstants = transform(ArtBlocks)
+export const getArtBlocksConstants = transform(ChainId, ArtBlocks)
 export const useArtBlocksConstants = hookTransform(getArtBlocksConstants)
 
-export const getNftRedPacketConstants = transform(NftRedPacket)
+export const getNftRedPacketConstants = transform(ChainId, NftRedPacket)
 export const useNftRedPacketConstants = hookTransform(getNftRedPacketConstants)
 
-export const getAaveConstants = transform(Aave)
+export const getAaveConstants = transform(ChainId, Aave)
 export const useAaveConstants = hookTransform(getAaveConstants)
 
-export const getLidoConstants = transform(Lido)
+export const getLidoConstants = transform(ChainId, Lido)
 export const useLidoConstants = hookTransform(getLidoConstants)
diff --git a/packages/web3-shared/evm/constants/descriptors.ts b/packages/web3-shared/evm/constants/descriptors.ts
new file mode 100644
index 000000000000..38e20906cfa2
--- /dev/null
+++ b/packages/web3-shared/evm/constants/descriptors.ts
@@ -0,0 +1,334 @@
+import { getEnumAsArray } from '@dimensiondev/kit'
+import {
+    ChainDescriptor,
+    NetworkDescriptor,
+    NetworkPluginID,
+    ProviderDescriptor,
+    TokenType,
+} from '@masknet/web3-shared-base'
+import CHAINS from './chains.json'
+import { ChainId, NetworkType, ProviderType, SchemaType } from '../types'
+import { getTokenConstants } from './constants'
+import { ZERO_ADDRESS } from './primitives'
+import { EnhanceableSite, ExtensionSite } from '@masknet/shared-base'
+
+const PLUGIN_ID = NetworkPluginID.PLUGIN_EVM
+
+export const CHAIN_DESCRIPTORS: Array<ChainDescriptor<ChainId, SchemaType, NetworkType>> = CHAINS.map((x) => ({
+    ...x,
+    coinMarketCapChainId: '',
+    coinGeckoChainId: '',
+    coinGeckoPlatformId: '',
+    type: (x.type as NetworkType | undefined) ?? NetworkType.Ethereum,
+    color: x.color ?? 'rgb(24, 163, 138)',
+    nativeCurrency: {
+        id: getTokenConstants(x.chainId).NATIVE_TOKEN_ADDRESS ?? ZERO_ADDRESS,
+        address: getTokenConstants(x.chainId).NATIVE_TOKEN_ADDRESS ?? ZERO_ADDRESS,
+        type: TokenType.Fungible,
+        schema: SchemaType.Native,
+        ...x.nativeCurrency,
+    },
+    explorerURL: {
+        url: x.explorers?.[0]?.url ?? x.infoURL,
+    },
+}))
+
+export const NETWORK_DESCRIPTORS: Array<NetworkDescriptor<ChainId, NetworkType>> = [
+    {
+        ID: `${PLUGIN_ID}_ethereum`,
+        networkSupporterPluginID: PLUGIN_ID,
+        chainId: ChainId.Mainnet,
+        type: NetworkType.Ethereum,
+        name: 'Ethereum',
+        icon: new URL('../assets/ethereum.png', import.meta.url),
+        iconColor: 'rgb(28, 104, 243)',
+        isMainnet: true,
+    },
+    {
+        ID: `${PLUGIN_ID}_ropsten`,
+        networkSupporterPluginID: PLUGIN_ID,
+        chainId: ChainId.Ropsten,
+        type: NetworkType.Ethereum,
+        name: 'Ropsten',
+        icon: new URL('../assets/ethereum.png', import.meta.url),
+        iconColor: 'rgb(255, 65, 130)',
+        isMainnet: false,
+    },
+    {
+        ID: `${PLUGIN_ID}_kovan`,
+        networkSupporterPluginID: PLUGIN_ID,
+        chainId: ChainId.Kovan,
+        type: NetworkType.Ethereum,
+        name: 'Kovan',
+        icon: new URL('../assets/ethereum.png', import.meta.url),
+        iconColor: 'rgb(133, 89, 255)',
+        isMainnet: false,
+    },
+    {
+        ID: `${PLUGIN_ID}_rinkeby`,
+        networkSupporterPluginID: PLUGIN_ID,
+        chainId: ChainId.Rinkeby,
+        type: NetworkType.Ethereum,
+        name: 'Rinkeby',
+        icon: new URL('../assets/ethereum.png', import.meta.url),
+        iconColor: 'rgb(133, 89, 255)',
+        isMainnet: false,
+    },
+    {
+        ID: `${PLUGIN_ID}_gorli`,
+        networkSupporterPluginID: PLUGIN_ID,
+        chainId: ChainId.Gorli,
+        type: NetworkType.Ethereum,
+        name: 'G\xf6rli',
+        icon: new URL('../assets/ethereum.png', import.meta.url),
+        iconColor: 'rgb(48, 153, 242)',
+        isMainnet: false,
+    },
+    {
+        ID: `${PLUGIN_ID}_bsc`,
+        networkSupporterPluginID: PLUGIN_ID,
+        chainId: ChainId.BSC,
+        type: NetworkType.Binance,
+        name: 'BNB Chain',
+        icon: new URL('../assets/binance.png', import.meta.url),
+        iconColor: 'rgb(240, 185, 10)',
+        isMainnet: true,
+    },
+    {
+        ID: `${PLUGIN_ID}_bsct`,
+        networkSupporterPluginID: PLUGIN_ID,
+        chainId: ChainId.BSCT,
+        type: NetworkType.Binance,
+        name: 'BSCT',
+        icon: new URL('../assets/binance.png', import.meta.url),
+        iconColor: 'rgb(240, 185, 10)',
+        isMainnet: false,
+    },
+    {
+        ID: `${PLUGIN_ID}_polygon`,
+        networkSupporterPluginID: PLUGIN_ID,
+        chainId: ChainId.Matic,
+        type: NetworkType.Polygon,
+        name: 'Polygon',
+        icon: new URL('../assets/polygon.png', import.meta.url),
+        iconColor: 'rgb(119, 62, 225)',
+        isMainnet: true,
+    },
+    {
+        ID: `${PLUGIN_ID}_mumbai`,
+        networkSupporterPluginID: PLUGIN_ID,
+        chainId: ChainId.Mumbai,
+        type: NetworkType.Polygon,
+        name: 'Mumbai',
+        icon: new URL('../assets/polygon.png', import.meta.url),
+        iconColor: 'rgb(119, 62, 225)',
+        isMainnet: false,
+    },
+    {
+        ID: `${PLUGIN_ID}_arbitrum`,
+        networkSupporterPluginID: PLUGIN_ID,
+        chainId: ChainId.Arbitrum,
+        type: NetworkType.Arbitrum,
+        name: 'Arbitrum One',
+        icon: new URL('../assets/arbitrum.png', import.meta.url),
+        iconColor: 'rgb(36, 150, 238)',
+        isMainnet: true,
+    },
+    {
+        ID: `${PLUGIN_ID}_arbitrum_rinkeby`,
+        networkSupporterPluginID: PLUGIN_ID,
+        chainId: ChainId.Arbitrum_Rinkeby,
+        type: NetworkType.Arbitrum,
+        name: 'Arbitrum Rinkeby',
+        icon: new URL('../assets/arbitrum.png', import.meta.url),
+        iconColor: 'rgb(36, 150, 238)',
+        isMainnet: false,
+    },
+    {
+        ID: `${PLUGIN_ID}_xdai`,
+        networkSupporterPluginID: PLUGIN_ID,
+        chainId: ChainId.xDai,
+        type: NetworkType.xDai,
+        name: 'Gnosis',
+        icon: new URL('../assets/xdai.png', import.meta.url),
+        iconColor: 'rgb(73, 169, 166)',
+        isMainnet: true,
+    },
+    {
+        ID: `${PLUGIN_ID}_celo`,
+        networkSupporterPluginID: PLUGIN_ID,
+        chainId: ChainId.Celo,
+        type: NetworkType.Celo,
+        name: 'Celo',
+        icon: new URL('../assets/celo.png', import.meta.url),
+        iconColor: 'rgb(53, 208, 127)',
+        isMainnet: false,
+    },
+    {
+        ID: `${PLUGIN_ID}_fantom`,
+        networkSupporterPluginID: PLUGIN_ID,
+        chainId: ChainId.Fantom,
+        type: NetworkType.Fantom,
+        name: 'Fantom',
+        icon: new URL('../assets/fantom.png', import.meta.url),
+        iconColor: 'rgb(73, 169, 166)',
+        isMainnet: true,
+    },
+    {
+        ID: `${PLUGIN_ID}_avalanche`,
+        networkSupporterPluginID: PLUGIN_ID,
+        chainId: ChainId.Avalanche,
+        type: NetworkType.Avalanche,
+        name: 'Avalanche',
+        icon: new URL('../assets/avalanche.png', import.meta.url),
+        iconColor: 'rgb(232, 65, 66)',
+        isMainnet: true,
+    },
+    {
+        ID: `${PLUGIN_ID}_aurora`,
+        networkSupporterPluginID: PLUGIN_ID,
+        chainId: ChainId.Aurora,
+        type: NetworkType.Aurora,
+        name: 'Aurora',
+        icon: new URL('../assets/aurora.png', import.meta.url),
+        iconColor: 'rgb(112, 212, 74)',
+        isMainnet: true,
+    },
+    {
+        ID: `${PLUGIN_ID}_conflux`,
+        networkSupporterPluginID: PLUGIN_ID,
+        chainId: ChainId.Conflux,
+        type: NetworkType.Conflux,
+        name: 'Conflux',
+        icon: new URL('../assets/conflux.png', import.meta.url),
+        iconColor: 'rgb(112, 212, 74)',
+        isMainnet: true,
+    },
+]
+export const PROVIDER_DESCRIPTORS: Array<ProviderDescriptor<ChainId, ProviderType>> = [
+    {
+        ID: `${PLUGIN_ID}_maskwallet`,
+        providerAdaptorPluginID: PLUGIN_ID,
+        type: ProviderType.MaskWallet,
+        name: 'Mask Network',
+        icon: new URL('../assets/maskwallet.png', import.meta.url),
+        enableRequirements: {
+            supportedChainIds: getEnumAsArray(ChainId).map((x) => x.value),
+            supportedEnhanceableSites: getEnumAsArray(EnhanceableSite).map((x) => x.value),
+            supportedExtensionSites: getEnumAsArray(ExtensionSite).map((x) => x.value),
+        },
+        homeLink: 'https://mask.io',
+        shortenLink: 'mask.io',
+        downloadLink: 'https://mask.io/download-links',
+    },
+    {
+        ID: `${PLUGIN_ID}_metamask`,
+        providerAdaptorPluginID: PLUGIN_ID,
+        type: ProviderType.MetaMask,
+        name: 'MetaMask',
+        icon: new URL('../assets/metamask.png', import.meta.url),
+        enableRequirements: {
+            supportedChainIds: getEnumAsArray(ChainId).map((x) => x.value),
+            supportedEnhanceableSites: getEnumAsArray(EnhanceableSite).map((x) => x.value),
+            supportedExtensionSites: getEnumAsArray(ExtensionSite).map((x) => x.value),
+        },
+        homeLink: 'https://metamask.io',
+        shortenLink: 'metamask.io',
+        downloadLink: 'https://metamask.io/download.html',
+    },
+    {
+        ID: `${PLUGIN_ID}_walletconnect`,
+        providerAdaptorPluginID: PLUGIN_ID,
+        type: ProviderType.WalletConnect,
+        name: 'WalletConnect',
+        icon: new URL('../assets/walletconnect.png', import.meta.url),
+        enableRequirements: {
+            supportedChainIds: getEnumAsArray(ChainId).map((x) => x.value),
+            supportedEnhanceableSites: getEnumAsArray(EnhanceableSite).map((x) => x.value),
+            supportedExtensionSites: getEnumAsArray(ExtensionSite).map((x) => x.value),
+        },
+        homeLink: 'https://walletconnect.com',
+        shortenLink: 'walletconnect.com',
+        downloadLink: 'https://walletconnect.com',
+    },
+    {
+        ID: `${PLUGIN_ID}_coin98`,
+        providerAdaptorPluginID: PLUGIN_ID,
+        type: ProviderType.Coin98,
+        name: 'Coin98',
+        icon: new URL('../assets/coin98.png', import.meta.url),
+        enableRequirements: {
+            supportedChainIds: getEnumAsArray(ChainId).map((x) => x.value),
+            supportedEnhanceableSites: getEnumAsArray(EnhanceableSite).map((x) => x.value),
+        },
+        homeLink: 'https://coin98.com',
+        shortenLink: 'coin98.com',
+        downloadLink: 'https://coin98insights.com/introduction-to-coin98-wallet-extension',
+    },
+    {
+        ID: `${PLUGIN_ID}_walletlink`,
+        providerAdaptorPluginID: PLUGIN_ID,
+        type: ProviderType.WalletLink,
+        name: 'Coinbase',
+        icon: new URL('../assets/coinbase.png', import.meta.url),
+        enableRequirements: {
+            supportedChainIds: getEnumAsArray(ChainId).map((x) => x.value),
+            supportedEnhanceableSites: getEnumAsArray(EnhanceableSite).map((x) => x.value),
+        },
+        homeLink: 'https://walletlink.org',
+        shortenLink: 'walletlink.org',
+        downloadLink: 'https://wallet.coinbase.com/',
+    },
+    {
+        ID: `${PLUGIN_ID}_mathwallet`,
+        providerAdaptorPluginID: PLUGIN_ID,
+        type: ProviderType.MathWallet,
+        name: 'MathWallet',
+        icon: new URL('../assets/mathwallet.png', import.meta.url),
+        enableRequirements: {
+            supportedChainIds: [ChainId.Mainnet, ChainId.BSC],
+            supportedEnhanceableSites: getEnumAsArray(EnhanceableSite).map((x) => x.value),
+        },
+        homeLink: 'https://mathwallet.org',
+        shortenLink: 'mathwallet.org',
+        downloadLink: 'https://mathwallet.org/en-us/#extension',
+    },
+    {
+        ID: `${PLUGIN_ID}_fortmatic`,
+        providerAdaptorPluginID: PLUGIN_ID,
+        type: ProviderType.Fortmatic,
+        name: 'Fortmatic',
+        icon: new URL('../assets/fortmatic.png', import.meta.url),
+        enableRequirements: {
+            supportedChainIds: [ChainId.Mainnet, ChainId.BSC],
+            supportedEnhanceableSites: getEnumAsArray(EnhanceableSite).map((x) => x.value),
+            supportedExtensionSites: getEnumAsArray(ExtensionSite).map((x) => x.value),
+        },
+        homeLink: 'https://fortmatic.com',
+        shortenLink: 'fortmatic.com',
+        downloadLink: 'https://fortmatic.com',
+    },
+    {
+        ID: `${PLUGIN_ID}_torus`,
+        providerAdaptorPluginID: PLUGIN_ID,
+        type: ProviderType.Torus,
+        name: 'Torus',
+        icon: new URL('../assets/torus.png', import.meta.url),
+        enableRequirements: {
+            supportedChainIds: [
+                ChainId.Mainnet,
+                ChainId.BSC,
+                ChainId.Matic,
+                ChainId.xDai,
+                ChainId.Optimistic,
+                ChainId.Arbitrum,
+                ChainId.Avalanche,
+            ],
+            supportedEnhanceableSites: getEnumAsArray(EnhanceableSite).map((x) => x.value),
+            supportedExtensionSites: getEnumAsArray(ExtensionSite).map((x) => x.value),
+        },
+        homeLink: 'https://app.tor.us/',
+        shortenLink: 'tor.us',
+        downloadLink: 'https://app.tor.us/',
+    },
+]
diff --git a/packages/web3-shared/evm/constants/index.ts b/packages/web3-shared/evm/constants/index.ts
index a4793d3837fc..8527ad2e04de 100644
--- a/packages/web3-shared/evm/constants/index.ts
+++ b/packages/web3-shared/evm/constants/index.ts
@@ -1,5 +1,5 @@
 export * from './constants'
+export * from './descriptors'
 export * from './getContractOwnerDomain'
 export * from './primitives'
 export * from './tokens'
-export { transform, type Constant } from './utils'
diff --git a/packages/web3-shared/evm/constants/tokens.ts b/packages/web3-shared/evm/constants/tokens.ts
index cd1b49403548..d3652d387008 100644
--- a/packages/web3-shared/evm/constants/tokens.ts
+++ b/packages/web3-shared/evm/constants/tokens.ts
@@ -1,9 +1,18 @@
-import { ChainId, ChainIdOptionalRecord, ERC20TokenDetailed } from '../types'
-import { createERC20Tokens, getChainDetailed } from '../utils'
+import { getEnumAsArray } from '@dimensiondev/kit'
+import Token from '@masknet/web3-constants/evm/token.json'
+import { createFungibleTokensFromConstants, FungibleToken } from '@masknet/web3-shared-base'
+import { ChainId, ChainIdOptionalRecord, SchemaType } from '../types'
+import { chainResolver } from '../utils'
 
-export type ERC20AgainstToken = Readonly<ChainIdOptionalRecord<ERC20TokenDetailed[]>>
+export type ERC20AgainstToken = Readonly<ChainIdOptionalRecord<Array<FungibleToken<ChainId, SchemaType.ERC20>>>>
 
-export const USDC = createERC20Tokens('USDC_ADDRESS', 'USD Coin', 'USDC', 6)
+const createERC20Tokens = createFungibleTokensFromConstants<typeof Token, ChainId, SchemaType.ERC20>(
+    getEnumAsArray(ChainId),
+    SchemaType.ERC20,
+    Token,
+)
+
+export const USDC = createERC20Tokens('USDC_ADDRESS', 'USC Coin', 'USDC', 6)
 export const USDCe = createERC20Tokens('USDC_ADDRESS', 'USD Coin', 'USDCe', 6)
 export const USDT = createERC20Tokens('USDT_ADDRESS', 'Tether USD', 'USDT', 6)
 export const USDTe = createERC20Tokens('USDT_ADDRESS', 'Tether USD', 'USDT.e', 6)
@@ -33,7 +42,6 @@ export const WBTCe = createERC20Tokens('WBTC_ADDRESS', 'Wrapped Bitcoin', 'WBTCe
 export const IGG = createERC20Tokens('IGG_ADDRESS', 'IG Gold', 'IGG', 18)
 export const OM = createERC20Tokens('OM_ADDRESS', 'OM Token', 'OM', 18)
 export const SUSHI = createERC20Tokens('SUSHI_ADDRESS', 'SushiToken', 'SUSHI', 18)
-export const YAM = createERC20Tokens('YAM_ADDRESS', 'YAM', 'YAM', 18)
 export const RUNE = createERC20Tokens('RUNE_ADDRESS', 'RUNE.ETH', 'RUNE', 18)
 export const YFI = createERC20Tokens('YFI_ADDRESS', 'Yearn', 'YFI', 18)
 export const BTCB = createERC20Tokens('BTCB_ADDRESS', 'Binance BTC', 'BTCB', 18)
@@ -51,8 +59,8 @@ export const JEWEL = createERC20Tokens('JEWEL_ADDRESS', 'Jewels', 'JEWEL', 18)
 
 export const WNATIVE = createERC20Tokens(
     'WNATIVE_ADDRESS',
-    (chainId) => `Wrapped ${getChainDetailed(chainId)?.nativeCurrency.name ?? 'Ether'}`,
-    (chainId) => `W${getChainDetailed(chainId)?.nativeCurrency.symbol ?? 'ETH'}`,
+    (chainId) => `Wrapped ${chainResolver.nativeCurrency(chainId)?.name ?? 'Ether'}`,
+    (chainId) => `W${chainResolver.nativeCurrency(chainId)?.symbol ?? 'ETH'}`,
     18,
 )
 
diff --git a/packages/web3-shared/evm/constants/utils.ts b/packages/web3-shared/evm/constants/utils.ts
deleted file mode 100644
index d278795c2940..000000000000
--- a/packages/web3-shared/evm/constants/utils.ts
+++ /dev/null
@@ -1,58 +0,0 @@
-import { useMemo } from 'react'
-import { useChainId } from '../hooks'
-import { ChainId, Primitive } from '../types'
-
-export type Constant = {
-    [K in keyof typeof ChainId]?: Primitive | Primitive[]
-}
-
-export type Constants = Record<string, Constant>
-
-export function transform<T extends Constants>(constants: T, environment: Record<string, string> = {}) {
-    type Entries = { [key in keyof T]?: T[key]['Mainnet'] }
-    return (chainId: number = ChainId.Mainnet) => {
-        const chainName = ChainId[chainId] as keyof typeof ChainId | undefined
-        // unknown chain id
-        if (!chainName) return Object.freeze({}) as Entries
-        const entries = Object.keys(constants).map((name: keyof T) => {
-            let value = constants[name][chainName]
-            if (Array.isArray(value)) {
-                value = value.map((item) => {
-                    if (typeof item === 'string') {
-                        return replaceAll(item, environment)
-                    }
-                    return item
-                })
-            } else if (typeof value === 'string') {
-                value = replaceAll(value, environment)
-            }
-            return [name, value] as [string, Primitive | Primitive[]]
-        })
-        return Object.freeze(Object.fromEntries(entries)) as Entries
-    }
-}
-
-export function transformFromJSON<T extends Constants>(
-    json: string,
-    fallbackConstants: T,
-    environment: Record<string, string> = {},
-) {
-    try {
-        const constants = JSON.parse(json) as T
-        return transform(constants, environment)
-    } catch {
-        return transform(fallbackConstants, environment)
-    }
-}
-
-export function hookTransform<T>(getConstants: (chainId: ChainId) => Partial<T>) {
-    return function useConstants(chainId?: number) {
-        const currentChainId = useChainId()
-        const finalChainId = chainId ?? currentChainId
-        return useMemo(() => getConstants(finalChainId), [finalChainId])
-    }
-}
-
-function replaceAll(input: string, values: Record<string, string>) {
-    return input.replace(/\${([^}]+)}/g, (match, p1) => values[p1] ?? match)
-}
diff --git a/packages/web3-shared/evm/context/index.tsx b/packages/web3-shared/evm/context/index.tsx
deleted file mode 100644
index b27b668d0748..000000000000
--- a/packages/web3-shared/evm/context/index.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import { useMemo, useContext, createContext } from 'react'
-import { createContainer } from 'unstated-next'
-import { useSubscription } from 'use-subscription'
-import type { Web3ProviderType } from './type'
-import { getChainDetailed, isChainIdValid } from '../utils'
-
-export type { Web3ProviderType } from './type'
-
-export const Web3ProviderContext = createContext<Web3ProviderType>(null!)
-
-/** @internal */
-export function useWeb3Context() {
-    const context = useContext(Web3ProviderContext)
-    if (!context) throw new Error('This hook should be used in a provider.')
-    return context
-}
-
-export function useWeb3State() {
-    const _ = useWeb3Context()
-    const account = useSubscription(_.account)
-    const allowTestnet = useSubscription(_.allowTestnet)
-    const tokenPrices = useSubscription(_.tokenPrices)
-    const networkType = useSubscription(_.networkType)
-    const providerType = useSubscription(_.providerType)
-    const walletPrimary = useSubscription(_.walletPrimary)
-    const wallets = useSubscription(_.wallets)
-    const chainId = useSubscription(_.chainId)
-    const chainDetailed = useMemo(() => getChainDetailed(chainId), [chainId])
-    const erc20Tokens = useSubscription(_.erc20Tokens)
-    const erc721Tokens = useSubscription(_.erc721Tokens)
-    const erc1155Tokens = useSubscription(_.erc1155Tokens)
-    const portfolioProvider = useSubscription(_.portfolioProvider)
-    return {
-        allowTestnet,
-        account,
-        tokenPrices,
-        networkType,
-        providerType,
-        walletPrimary,
-        wallets,
-        chainId,
-        chainDetailed,
-        erc20Tokens,
-        erc721Tokens,
-        erc1155Tokens,
-        portfolioProvider,
-        chainIdValid: !account || isChainIdValid(chainId, allowTestnet),
-    }
-}
-
-export const Web3Context = createContainer(useWeb3State)
-export const useWeb3StateContext = Web3Context.useContainer
-
-// Web3ProviderContext is used to provide a set of API to interact with Web3.
-// Web3Context is used to provide a scoped shared state within this provider.
-export function Web3Provider(props: React.ProviderProps<Web3ProviderType>) {
-    return (
-        <Web3ProviderContext.Provider value={props.value}>
-            <Web3Context.Provider>{props.children}</Web3Context.Provider>
-        </Web3ProviderContext.Provider>
-    )
-}
diff --git a/packages/web3-shared/evm/context/type.ts b/packages/web3-shared/evm/context/type.ts
deleted file mode 100644
index 1f1d4d2e4fc1..000000000000
--- a/packages/web3-shared/evm/context/type.ts
+++ /dev/null
@@ -1,89 +0,0 @@
-import type { RequestArguments } from 'web3-core'
-import type { Subscription } from 'use-subscription'
-import type {
-    ChainId,
-    ERC20TokenDetailed,
-    ERC721TokenDetailed,
-    ERC1155TokenDetailed,
-    NonFungibleTokenDetailed,
-    NetworkType,
-    ProviderType,
-    Asset,
-    Wallet,
-    FungibleAssetProvider,
-    NonFungibleAssetProvider,
-    Transaction,
-    AddressName,
-    CryptoPrice,
-    ERC721TokenCollectionInfo,
-    SendOverrides,
-    RequestOptions,
-} from '../types'
-import type { ProviderProxy } from '@masknet/web3-shared-base'
-
-export interface Web3ProviderType {
-    allowTestnet: Subscription<boolean>
-    chainId: Subscription<ChainId>
-    account: Subscription<string>
-    networkType: Subscription<NetworkType>
-    providerType: Subscription<ProviderType>
-    tokenPrices: Subscription<CryptoPrice>
-    wallets: Subscription<Wallet[]>
-    walletPrimary: Subscription<Wallet | null>
-    erc20Tokens: Subscription<ERC20TokenDetailed[]>
-    erc721Tokens: Subscription<ERC721TokenDetailed[]>
-    erc1155Tokens: Subscription<ERC1155TokenDetailed[]>
-    portfolioProvider: Subscription<FungibleAssetProvider>
-
-    addToken: (token: ERC20TokenDetailed | NonFungibleTokenDetailed) => Promise<void>
-    removeToken: (token: ERC20TokenDetailed | NonFungibleTokenDetailed) => Promise<void>
-    trustToken: (address: string, token: ERC20TokenDetailed | NonFungibleTokenDetailed) => Promise<void>
-    blockToken: (address: string, token: ERC20TokenDetailed | NonFungibleTokenDetailed) => Promise<void>
-
-    request: <T extends unknown>(
-        requestArguments: RequestArguments,
-        overrides?: SendOverrides,
-        options?: RequestOptions,
-    ) => Promise<T>
-    getSendOverrides?: () => SendOverrides
-    getRequestOptions?: () => RequestOptions
-
-    getAssetsList: (address: string, provider: FungibleAssetProvider, network?: NetworkType) => Promise<Asset[]>
-    getAssetsListNFT: (
-        address: string,
-        chainId: ChainId,
-        provider: NonFungibleAssetProvider,
-        page?: number,
-        size?: number,
-        collection?: string,
-    ) => Promise<{ assets: ERC721TokenDetailed[]; hasNextPage: boolean }>
-    getCollectionsNFT: (
-        address: string,
-        chainId: ChainId,
-        provider: NonFungibleAssetProvider,
-        page?: number,
-        size?: number,
-    ) => Promise<{ collections: ERC721TokenCollectionInfo[]; hasNextPage: boolean }>
-    getAddressNamesList: (identity: {
-        identifier: {
-            userId: string
-            network: string
-        }
-        avatar?: string
-        bio?: string
-        nickname?: string
-        homepage?: string
-    }) => Promise<AddressName[]>
-    getTransactionList: (
-        address: string,
-        network: NetworkType,
-        provider: FungibleAssetProvider,
-        page?: number,
-        size?: number,
-    ) => Promise<{
-        transactions: Transaction[]
-        hasNextPage: boolean
-    }>
-    fetchERC20TokensFromTokenLists: (urls: string[], chainId: ChainId) => Promise<ERC20TokenDetailed[]>
-    providerSocket: Promise<ProviderProxy>
-}
diff --git a/packages/web3-shared/evm/contracts/index.ts b/packages/web3-shared/evm/contracts/index.ts
deleted file mode 100644
index 0001ff2dee7d..000000000000
--- a/packages/web3-shared/evm/contracts/index.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export * from './useERC20TokenContract'
-export * from './useERC721TokenContract'
-export * from './useERC721TokenContracts'
-export * from './useERC1155TokenContract'
-export * from './useWrappedEtherContract'
diff --git a/packages/web3-shared/evm/contracts/useERC1155TokenContract.ts b/packages/web3-shared/evm/contracts/useERC1155TokenContract.ts
deleted file mode 100644
index 24a16d9404c5..000000000000
--- a/packages/web3-shared/evm/contracts/useERC1155TokenContract.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import ERC1155 from '@masknet/web3-contracts/abis/ERC1155.json'
-import type { AbiItem } from 'web3-utils'
-import { useContract } from '../hooks'
-import type { ChainId } from '../types'
-
-export function useERC1155TokenContract(address: string, chainId?: ChainId) {
-    return useContract(address, ERC1155 as AbiItem[], chainId)
-}
diff --git a/packages/web3-shared/evm/contracts/useERC20TokenBytes32Contract.ts b/packages/web3-shared/evm/contracts/useERC20TokenBytes32Contract.ts
deleted file mode 100644
index 5e96dc008c42..000000000000
--- a/packages/web3-shared/evm/contracts/useERC20TokenBytes32Contract.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import ERC20Bytes32ABI from '@masknet/web3-contracts/abis/ERC20Bytes32.json'
-import type { ERC20Bytes32 } from '@masknet/web3-contracts/types/ERC20Bytes32'
-import type { AbiItem } from 'web3-utils'
-import { useContract, useContracts } from '../hooks/useContract'
-import type { ChainId } from '../types'
-
-export function useERC20TokenBytes32Contract(address?: string, chainId?: ChainId) {
-    return useContract<ERC20Bytes32>(address, ERC20Bytes32ABI as AbiItem[], chainId)
-}
-
-export function useERC20TokenBytes32Contracts(listOfAddress: string[], chainId?: ChainId) {
-    return useContracts<ERC20Bytes32>(listOfAddress, ERC20Bytes32ABI as AbiItem[], chainId)
-}
diff --git a/packages/web3-shared/evm/contracts/useERC20TokenContract.ts b/packages/web3-shared/evm/contracts/useERC20TokenContract.ts
deleted file mode 100644
index 34de6bd91550..000000000000
--- a/packages/web3-shared/evm/contracts/useERC20TokenContract.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import type { AbiItem } from 'web3-utils'
-import ERC20ABI from '@masknet/web3-contracts/abis/ERC20.json'
-import type { ERC20 } from '@masknet/web3-contracts/types/ERC20'
-import { useContract, useContracts } from '../hooks/useContract'
-import type { ChainId } from '../types'
-
-export function useERC20TokenContract(address?: string, chainId?: ChainId) {
-    return useContract<ERC20>(address, ERC20ABI as AbiItem[], chainId)
-}
-
-export function useERC20TokenContracts(listOfAddress: string[], chainId?: ChainId) {
-    return useContracts<ERC20>(listOfAddress, ERC20ABI as AbiItem[], chainId)
-}
diff --git a/packages/web3-shared/evm/contracts/useERC721TokenContract.ts b/packages/web3-shared/evm/contracts/useERC721TokenContract.ts
deleted file mode 100644
index 75a1c81d892d..000000000000
--- a/packages/web3-shared/evm/contracts/useERC721TokenContract.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import type { AbiItem } from 'web3-utils'
-import ERC721ABI from '@masknet/web3-contracts/abis/ERC721.json'
-import type { ERC721 } from '@masknet/web3-contracts/types/ERC721'
-import { useContract } from '../hooks/useContract'
-import type { ChainId } from '../types'
-
-export function useERC721TokenContract(address?: string, chainId?: ChainId) {
-    return useContract<ERC721>(address, ERC721ABI as AbiItem[], chainId)
-}
diff --git a/packages/web3-shared/evm/contracts/useERC721TokenContracts.ts b/packages/web3-shared/evm/contracts/useERC721TokenContracts.ts
deleted file mode 100644
index 3a7190214ea1..000000000000
--- a/packages/web3-shared/evm/contracts/useERC721TokenContracts.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import ERC721ABI from '@masknet/web3-contracts/abis/ERC721.json'
-import type { ERC721 } from '@masknet/web3-contracts/types/ERC721'
-import type { AbiItem } from 'web3-utils'
-import { useContracts } from '../hooks/useContract'
-
-export function useERC721TokenContracts(listOfAddress: string[]) {
-    return useContracts<ERC721>(listOfAddress, ERC721ABI as AbiItem[])
-}
diff --git a/packages/web3-shared/evm/contracts/useReverseLookupContract.ts b/packages/web3-shared/evm/contracts/useReverseLookupContract.ts
deleted file mode 100644
index cf01f064b96e..000000000000
--- a/packages/web3-shared/evm/contracts/useReverseLookupContract.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import ReverseRecordsABI from '@masknet/web3-contracts/abis/ReverseRecords.json'
-import type { ReverseRecords } from '@masknet/web3-contracts/types/ReverseRecords'
-import type { AbiItem } from 'web3-utils'
-import { ChainId } from '../types'
-import { useContract } from '../hooks/useContract'
-import { useEthereumConstants } from '../constants'
-
-export function useReverseRecordsContract() {
-    const { ENS_REVERSE_RECORDS_ADDRESS } = useEthereumConstants(ChainId.Mainnet)
-    return useContract<ReverseRecords>(ENS_REVERSE_RECORDS_ADDRESS, ReverseRecordsABI as AbiItem[])
-}
diff --git a/packages/web3-shared/evm/hooks/index.ts b/packages/web3-shared/evm/hooks/index.ts
deleted file mode 100644
index 7761258ba2ce..000000000000
--- a/packages/web3-shared/evm/hooks/index.ts
+++ /dev/null
@@ -1,72 +0,0 @@
-export * from './useAccount'
-export * from './useAllowTestnet'
-export * from './useBalance'
-export * from './useBlockie'
-export * from './useBlockNumber'
-export * from './useChainId'
-export * from './useChainDetailed'
-export * from './useContract'
-export * from './useCurrentBlockTimestamp'
-export * from './useGasPrice'
-export * from './useENSLabel'
-export * from './useAddressNames'
-export * from './useERC1155TokenAssetDetailed'
-export * from './useERC165'
-export * from './useERC20TokenAllowance'
-export * from './useERC20TokenTotalSupply'
-export * from './useERC20TokenApproveCallback'
-export * from './useERC20TokenBalance'
-export * from './useERC20TokenDetailed'
-export * from './useERC721TokenDetailedCallback'
-export * from './useERC20TokenTransferCallback'
-export * from './useERC20TokenDetailedFromTokenLists'
-export * from './useERC20TokensDetailedFromTokenLists'
-export * from './useERC721TokenByIndex'
-export * from './useERC721Tokens'
-export * from './useERC721ContractDetailed'
-export * from './useERC721ContractIsApproveForAll'
-export * from './useERC721ContractSetApproveForAllCallback'
-export * from './useERC721TokenDetailed'
-export * from './useERC721ContractBalance'
-export * from './useERC721TokenTransferCallback'
-export * from './useMulticall'
-export * from './useNativeTokenBalance'
-export * from './useNativeTokenDetailed'
-export * from './useNativeTokenTransferCallback'
-export * from './useNativeTokenWrapperCallback'
-export * from './useFungibleTokenBalance'
-export * from './useFungibleTokenDetailed'
-export * from './useTokenTransferCallback'
-export * from './useFungibleTokenWatched'
-export * from './useTokensBalance'
-export * from './useTransactionState'
-export * from './useTransactionCallback'
-export * from './useWeb3'
-export * from './useWeb3Provider'
-export * from './useNetworkType'
-export * from './useProviderType'
-export * from './useAssetsFromChain'
-export * from './useAssetsMerged'
-export * from './useAssetsFromProvider'
-export * from './useAssets'
-export * from './useAssetsByTokenList'
-export * from './useCollectibles'
-export * from './useTransactions'
-export * from './useGetPastLogsParams'
-export * from './useChainColor'
-export * from './useResolveENS'
-export * from './useGasLimit'
-export * from './useSocketOnce'
-export * from './useSocket'
-
-// wallet plugin related
-export * from './useWalletPrimary'
-export * from './useWallet'
-export * from './useWallets'
-export * from './useERC20Tokens'
-export * from './useImageChecker'
-export * from './useTrustedERC20Tokens'
-export * from './useTrustERC20TokenCallback'
-export * from './useAddERC20TokenCallback'
-
-export * from './useEthereumTokenType'
diff --git a/packages/web3-shared/evm/hooks/useAccount.ts b/packages/web3-shared/evm/hooks/useAccount.ts
deleted file mode 100644
index 0c2054e7dee3..000000000000
--- a/packages/web3-shared/evm/hooks/useAccount.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { first } from 'lodash-unified'
-import { useWeb3StateContext } from '../context'
-
-/**
- * Get the address of the default wallet
- */
-export function useAccount() {
-    const { account, wallets } = useWeb3StateContext()
-    return process.env.architecture === 'app' ? first(wallets)?.address ?? '' : account
-}
diff --git a/packages/web3-shared/evm/hooks/useAddERC20TokenCallback.ts b/packages/web3-shared/evm/hooks/useAddERC20TokenCallback.ts
deleted file mode 100644
index 9e80682d33a6..000000000000
--- a/packages/web3-shared/evm/hooks/useAddERC20TokenCallback.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { useWeb3Context } from '../context'
-import { useAsyncFn } from 'react-use'
-import type { AsyncFnReturn } from 'react-use/lib/useAsyncFn'
-import type { ERC20TokenDetailed } from '../types'
-
-export function useAddERC20TokenCallback(): AsyncFnReturn<(token: ERC20TokenDetailed) => Promise<void>> {
-    const { addToken } = useWeb3Context()
-
-    return useAsyncFn(
-        async (token: ERC20TokenDetailed) => {
-            await addToken(token)
-        },
-        [addToken],
-    )
-}
diff --git a/packages/web3-shared/evm/hooks/useAddressNames.ts b/packages/web3-shared/evm/hooks/useAddressNames.ts
deleted file mode 100644
index 34c49f77ce43..000000000000
--- a/packages/web3-shared/evm/hooks/useAddressNames.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import { useAsyncRetry } from 'react-use'
-import type { AddressName } from '..'
-import { useWeb3Context } from '../context'
-
-export function useAddressNames(
-    identity: {
-        identifier?: {
-            userId: string
-            network: string
-        }
-        avatar?: string
-        bio?: string
-        nickname?: string
-        homepage?: string
-    },
-    sorter?: (a: AddressName, z: AddressName) => number,
-) {
-    const { getAddressNamesList } = useWeb3Context()
-
-    return useAsyncRetry(async () => {
-        const addressNames = identity.identifier
-            ? await getAddressNamesList({ ...identity, identifier: identity.identifier })
-            : []
-        return sorter ? addressNames.sort(sorter) : addressNames
-    }, [identity, getAddressNamesList])
-}
diff --git a/packages/web3-shared/evm/hooks/useAllowTestnet.ts b/packages/web3-shared/evm/hooks/useAllowTestnet.ts
deleted file mode 100644
index c2a788973a0b..000000000000
--- a/packages/web3-shared/evm/hooks/useAllowTestnet.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import { useWeb3StateContext } from '../context'
-
-export function useAllowTestnet() {
-    return useWeb3StateContext().allowTestnet
-}
diff --git a/packages/web3-shared/evm/hooks/useAssets.ts b/packages/web3-shared/evm/hooks/useAssets.ts
deleted file mode 100644
index d90a63d611a2..000000000000
--- a/packages/web3-shared/evm/hooks/useAssets.ts
+++ /dev/null
@@ -1,57 +0,0 @@
-import { EMPTY_LIST } from '@masknet/shared-base'
-import type { ChainId, FungibleTokenDetailed } from '../types'
-import { useWallet } from './useWallet'
-import { useNativeTokenDetailed } from './useNativeTokenDetailed'
-import { useAssetsFromChain } from './useAssetsFromChain'
-import { useAssetsFromProvider } from './useAssetsFromProvider'
-import { useCallback, useMemo } from 'react'
-import { useAssetsMerged } from './useAssetsMerged'
-import { formatEthereumAddress } from '../utils'
-
-export function useAssets(tokens: FungibleTokenDetailed[], chainId?: ChainId | 'all') {
-    const wallet = useWallet()
-    const {
-        value: nativeTokenDetailed,
-        loading: nativeTokenDetailedLoading,
-        error: nativeTokenDetailedError,
-        retry: retryNativeTokenDetailed,
-    } = useNativeTokenDetailed(chainId === 'all' ? undefined : chainId)
-
-    const {
-        value: assetsFromChain = EMPTY_LIST,
-        loading: assetsDetailedChainLoading,
-        error: assetsDetailedChainError,
-        retry: retryAssetsDetailedChain,
-    } = useAssetsFromChain(nativeTokenDetailed ? [nativeTokenDetailed, ...tokens] : tokens)
-
-    const {
-        value: assetsFromProvider = EMPTY_LIST,
-        loading: assetsDetailedProviderLoading,
-        error: assetsDetailedProviderError,
-        retry: retryAssetsDetailedDebank,
-    } = useAssetsFromProvider(chainId)
-
-    const detailedTokensRetry = useCallback(() => {
-        retryNativeTokenDetailed()
-        retryAssetsDetailedChain()
-        retryAssetsDetailedDebank()
-    }, [retryNativeTokenDetailed, retryAssetsDetailedChain, retryAssetsDetailedDebank])
-
-    const matchedAssetsFromChain = useMemo(
-        () => assetsFromChain.filter((x) => !chainId || chainId === 'all' || x.token.chainId === chainId),
-        [assetsFromChain, chainId],
-    )
-    const assetsDetailed = useAssetsMerged(assetsFromProvider, matchedAssetsFromChain)
-
-    const assets = useMemo(
-        () => assetsDetailed.filter((x) => !wallet?.erc20_token_blacklist.has(formatEthereumAddress(x.token.address))),
-        [assetsDetailed, wallet?.erc20_token_blacklist],
-    )
-
-    return {
-        value: assets,
-        error: nativeTokenDetailedError || assetsDetailedChainError || assetsDetailedProviderError,
-        loading: nativeTokenDetailedLoading || assetsDetailedChainLoading || assetsDetailedProviderLoading,
-        retry: detailedTokensRetry,
-    }
-}
diff --git a/packages/web3-shared/evm/hooks/useAssetsByTokenList.ts b/packages/web3-shared/evm/hooks/useAssetsByTokenList.ts
deleted file mode 100644
index f0a52a3ce438..000000000000
--- a/packages/web3-shared/evm/hooks/useAssetsByTokenList.ts
+++ /dev/null
@@ -1,59 +0,0 @@
-import type { FungibleTokenDetailed, ChainId } from '../types'
-import { useAssetsFromChain } from './useAssetsFromChain'
-import { useAssetsFromProvider } from './useAssetsFromProvider'
-import { useCallback, useEffect, useState } from 'react'
-import { isSameAddress } from '../utils'
-import { sortBy, uniqBy } from 'lodash-unified'
-
-export function useAssetsByTokenList(tokens: FungibleTokenDetailed[], targetChainId?: ChainId) {
-    const [tokensForAsset, setTokensForAsset] = useState<FungibleTokenDetailed[]>([])
-
-    // merge tokens to avoid fetch asset from chain all the time
-    useEffect(() => {
-        setTokensForAsset((oldTokensForAsset) => {
-            const uniqTokens = uniqBy([...tokens, ...oldTokensForAsset], (x) => x.address)
-            const sortedTokens = sortBy(uniqTokens, (x) => x.address)
-            return sortedTokens
-        })
-    }, [tokens.map((x) => x.address.slice(0, 5)).join('')])
-
-    const {
-        value: assetsDetailedChain = [],
-        loading: assetsDetailedChainLoading,
-        error: assetsDetailedChainError,
-        retry: retryAssetsDetailedChain,
-    } = useAssetsFromChain(tokensForAsset, targetChainId)
-
-    const {
-        value: assetsDetailedProvider = [],
-        loading: assetsDetailedProviderLoading,
-        error: assetsDetailedProviderError,
-        retry: retryAssetsDetailedDebank,
-    } = useAssetsFromProvider(targetChainId)
-
-    const detailedTokensRetry = useCallback(() => {
-        retryAssetsDetailedChain()
-        retryAssetsDetailedDebank()
-    }, [retryAssetsDetailedChain, retryAssetsDetailedDebank])
-
-    const assetsDetailed = assetsDetailedChain
-        .map((asset) => {
-            const assertWithValue = assetsDetailedProvider.find(
-                (detail) =>
-                    isSameAddress(detail.token.address, asset.token.address) &&
-                    detail.token.chainId === asset.token.chainId,
-            )
-            if (assertWithValue) {
-                return { ...asset, ...{ value: assertWithValue.value } }
-            }
-            return asset
-        })
-        .filter((m) => tokens.find((x) => isSameAddress(x.address, m.token.address)))
-
-    return {
-        value: assetsDetailed,
-        error: assetsDetailedChainError || assetsDetailedProviderError,
-        loading: assetsDetailedChainLoading || assetsDetailedProviderLoading,
-        retry: detailedTokensRetry,
-    }
-}
diff --git a/packages/web3-shared/evm/hooks/useAssetsFromChain.ts b/packages/web3-shared/evm/hooks/useAssetsFromChain.ts
deleted file mode 100644
index ac4cb59a1cde..000000000000
--- a/packages/web3-shared/evm/hooks/useAssetsFromChain.ts
+++ /dev/null
@@ -1,53 +0,0 @@
-import { useMemo } from 'react'
-import { first } from 'lodash-unified'
-import { EMPTY_LIST } from '@masknet/shared-base'
-import { Asset, ChainId, EthereumTokenType, FungibleTokenDetailed } from '../types'
-import { useTokensBalance } from './useTokensBalance'
-import { useChainDetailed } from './useChainDetailed'
-import { getChainDetailed } from '../utils'
-import { useBalance } from './useBalance'
-
-export function useAssetsFromChain(tokens: FungibleTokenDetailed[], chainId?: ChainId) {
-    const { value: balance = '0' } = useBalance(chainId)
-    const chainDetailed = useChainDetailed()
-    const passedChainDetailed = getChainDetailed(chainId)
-
-    const chain = passedChainDetailed?.shortName.toLowerCase() ?? chainDetailed?.shortName.toLowerCase() ?? 'unknown'
-    const nativeToken = first(tokens.filter((x) => x.type === EthereumTokenType.Native))
-    const erc20Tokens = useMemo(() => tokens.filter((x) => x.type === EthereumTokenType.ERC20), [tokens])
-    const erc20TokenAddresses = useMemo(() => erc20Tokens.map((x) => x.address), [erc20Tokens])
-
-    const { value: listOfBalance = EMPTY_LIST, loading, error, retry } = useTokensBalance(erc20TokenAddresses, chainId)
-
-    const assets = useMemo(() => {
-        return [
-            ...(nativeToken
-                ? [
-                      {
-                          chain,
-                          token: nativeToken,
-                          balance,
-                      },
-                  ]
-                : []),
-
-            // the length not matched in case of error occurs
-            ...(listOfBalance.length === erc20Tokens.length
-                ? listOfBalance.map(
-                      (balance, idx): Asset => ({
-                          chain,
-                          token: erc20Tokens[idx],
-                          balance,
-                      }),
-                  )
-                : []),
-        ]
-    }, [nativeToken, chain, balance, listOfBalance, erc20Tokens])
-
-    return {
-        value: assets,
-        loading,
-        error,
-        retry,
-    }
-}
diff --git a/packages/web3-shared/evm/hooks/useAssetsFromProvider.ts b/packages/web3-shared/evm/hooks/useAssetsFromProvider.ts
deleted file mode 100644
index 32b698619ee4..000000000000
--- a/packages/web3-shared/evm/hooks/useAssetsFromProvider.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { useWeb3Context, useWeb3State } from '../context'
-import { useAsyncRetry } from 'react-use'
-import { useChainDetailed } from './useChainDetailed'
-import { useNetworkType } from './useNetworkType'
-import { getNetworkTypeFromChainId } from '../utils'
-import type { ChainId } from '../types'
-import { useAccount } from './useAccount'
-
-export function useAssetsFromProvider(chainId?: ChainId | 'all') {
-    const { getAssetsList: getAssetList } = useWeb3Context()
-    const { portfolioProvider } = useWeb3State()
-    const account = useAccount()
-    const network = useNetworkType()
-    const chainDetailed = useChainDetailed()
-
-    return useAsyncRetry(async () => {
-        if (!account) return []
-        if (chainDetailed?.network !== 'mainnet') return []
-        if (!chainId && getNetworkTypeFromChainId(chainDetailed.chainId) !== network) return []
-        const networkType =
-            chainId === undefined ? network : chainId === 'all' ? undefined : getNetworkTypeFromChainId(chainId)
-
-        return getAssetList(account.toLowerCase(), portfolioProvider, networkType)
-    }, [account, portfolioProvider, network, chainDetailed, chainId])
-}
diff --git a/packages/web3-shared/evm/hooks/useAssetsMerged.ts b/packages/web3-shared/evm/hooks/useAssetsMerged.ts
deleted file mode 100644
index 36b25f1fece4..000000000000
--- a/packages/web3-shared/evm/hooks/useAssetsMerged.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import { useMemo } from 'react'
-import { uniqBy } from 'lodash-unified'
-import { EMPTY_LIST } from '@masknet/shared-base'
-import { useTokenConstants } from '../constants'
-import type { Asset } from '../types'
-import { formatEthereumAddress, makeSortAssertFn } from '../utils'
-import { useChainId } from './useChainId'
-
-/**
- * Merge multiple token lists into one which sorted by balance.
- * The order of result values is determined by the order they occur in the array.
- * @param listOfTokens
- */
-export function useAssetsMerged(...listOfTokens: Asset[][]) {
-    const chainId = useChainId()
-    const { NATIVE_TOKEN_ADDRESS } = useTokenConstants()
-
-    const mergedAssets = useMemo(() => {
-        if (!NATIVE_TOKEN_ADDRESS) return EMPTY_LIST
-        return uniqBy(
-            listOfTokens.flatMap((x) => x),
-            (x) => `${x.token.chainId}_${formatEthereumAddress(x.token.address)}`,
-        ).sort(makeSortAssertFn(chainId))
-    }, [NATIVE_TOKEN_ADDRESS, ...listOfTokens, chainId])
-
-    return mergedAssets
-}
diff --git a/packages/web3-shared/evm/hooks/useBalance.ts b/packages/web3-shared/evm/hooks/useBalance.ts
deleted file mode 100644
index 2ebd81ea786f..000000000000
--- a/packages/web3-shared/evm/hooks/useBalance.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import type { ChainId } from '../types'
-import { useAccount, useChainId } from '..'
-import { useWeb3 } from '.'
-import { useAsyncRetry } from 'react-use'
-
-export function useBalance(expectedChainId?: ChainId, expectedAccount?: string) {
-    const defaultChainId = useChainId()
-    const defaultAccount = useAccount()
-
-    const chainId = expectedChainId ?? defaultChainId
-    const account = expectedAccount ?? defaultAccount
-
-    const web3 = useWeb3({ chainId })
-
-    return useAsyncRetry(async () => web3.eth.getBalance(account), [web3, account])
-}
diff --git a/packages/web3-shared/evm/hooks/useBlockNumber.ts b/packages/web3-shared/evm/hooks/useBlockNumber.ts
deleted file mode 100644
index c0c0f92abe61..000000000000
--- a/packages/web3-shared/evm/hooks/useBlockNumber.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { useAsyncRetry } from 'react-use'
-import { useChainId, useWeb3 } from '.'
-import type { ChainId } from '..'
-
-/**
- * Get the current block number of current chain
- */
-export function useBlockNumber(expectedChainId?: ChainId) {
-    const defaultChainId = useChainId()
-    const web3 = useWeb3({ chainId: expectedChainId ?? defaultChainId })
-
-    return useAsyncRetry(async () => {
-        return web3.eth.getBlockNumber()
-    }, [web3])
-}
diff --git a/packages/web3-shared/evm/hooks/useChainColor.ts b/packages/web3-shared/evm/hooks/useChainColor.ts
deleted file mode 100644
index 8e436512a5c8..000000000000
--- a/packages/web3-shared/evm/hooks/useChainColor.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { useChainId } from './useChainId'
-import { resolveChainColor } from '../pipes'
-
-export function useChainColor() {
-    const chainId = useChainId()
-    return resolveChainColor(chainId)
-}
diff --git a/packages/web3-shared/evm/hooks/useChainDetailed.ts b/packages/web3-shared/evm/hooks/useChainDetailed.ts
deleted file mode 100644
index 3fd3ec667010..000000000000
--- a/packages/web3-shared/evm/hooks/useChainDetailed.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import { useWeb3StateContext } from '../context'
-
-export function useChainDetailed() {
-    return useWeb3StateContext().chainDetailed
-}
diff --git a/packages/web3-shared/evm/hooks/useChainEIP1159Supported.ts b/packages/web3-shared/evm/hooks/useChainEIP1159Supported.ts
deleted file mode 100644
index f0e17407d3f9..000000000000
--- a/packages/web3-shared/evm/hooks/useChainEIP1159Supported.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { useWeb3StateContext } from '../context'
-
-export function useEIP1559Supported() {
-    const features = useWeb3StateContext().chainDetailed?.features ?? []
-    return features.includes('EIP1559')
-}
diff --git a/packages/web3-shared/evm/hooks/useChainId.ts b/packages/web3-shared/evm/hooks/useChainId.ts
deleted file mode 100644
index e30ede50f6ae..000000000000
--- a/packages/web3-shared/evm/hooks/useChainId.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import type { ChainId } from '../types'
-import { useWeb3StateContext } from '../context'
-import { useChainDetailed } from './useChainDetailed'
-
-/**
- * Get the chain id which is using by the given (or default) wallet
- * It will always yield Mainnet in production mode
- */
-export function useChainId(): ChainId {
-    return useWeb3StateContext().chainId
-}
-
-/**
- * Returns true if chain id is available
- */
-export function useChainIdValid(): boolean {
-    return useWeb3StateContext().chainIdValid
-}
-
-/**
- * Returns true if the current chain id is matched with the given one
- * @param chainId
- * @returns
- */
-export function useChainIdMatched(chainId?: ChainId) {
-    const chainDetailed = useChainDetailed()
-    if (!chainId) return false
-    return chainDetailed?.chainId === chainId
-}
diff --git a/packages/web3-shared/evm/hooks/useChainIdValid.ts b/packages/web3-shared/evm/hooks/useChainIdValid.ts
deleted file mode 100644
index b8af156e93a3..000000000000
--- a/packages/web3-shared/evm/hooks/useChainIdValid.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import { useWeb3StateContext } from '../context'
-
-export function useChainIdValid() {
-    return useWeb3StateContext().chainIdValid
-}
diff --git a/packages/web3-shared/evm/hooks/useCollectibles.ts b/packages/web3-shared/evm/hooks/useCollectibles.ts
deleted file mode 100644
index 89e9f992cb60..000000000000
--- a/packages/web3-shared/evm/hooks/useCollectibles.ts
+++ /dev/null
@@ -1,62 +0,0 @@
-import { ChainId, ERC721TokenCollectionInfo, ERC721TokenDetailed } from '../types'
-import { useWeb3Context } from '../context'
-import { noop, uniqWith } from 'lodash-unified'
-import { isSameAddress } from '../utils'
-import { useSocket } from './useSocket'
-import { useMemo } from 'react'
-
-export function useCollections(address: string, chainId: ChainId | null, dependReady?: boolean) {
-    const id = `mask.fetchNonFungibleCollectionAsset_${address}_${chainId}`
-    const message = {
-        id: dependReady === undefined ? id : dependReady ? id : '',
-        method: 'mask.fetchNonFungibleCollectionAsset',
-        params: {
-            address,
-            pageSize: 200,
-            chainId,
-        },
-    }
-    const collections = useSocket<ERC721TokenCollectionInfo>(message)
-    // TODO Pass chainId to websocket, and filter from data side.
-    const filtered = useMemo(() => {
-        return chainId
-            ? {
-                  ...collections,
-                  data: collections.data.filter((x) => x.chainId === chainId),
-              }
-            : collections
-    }, [collections, chainId])
-    return filtered
-}
-
-export function useCollectibles(address: string, chainId: ChainId | null, dependReady?: boolean) {
-    const { erc721Tokens } = useWeb3Context()
-    const id = `mask.fetchNonFungibleCollectibleAsset_${address}_${chainId}`
-    const message = {
-        id: dependReady === undefined ? id : dependReady ? id : '',
-        method: 'mask.fetchNonFungibleCollectibleAssetV2',
-        params: {
-            address,
-            pageSize: 30,
-        },
-    }
-
-    const { data, state, error, retry } = useSocket<ERC721TokenDetailed>(message)
-    const all = uniqWith(
-        [
-            ...(data ?? []),
-            ...erc721Tokens
-                .getCurrentValue()
-                .filter(
-                    (x) => (!chainId || x.contractDetailed.chainId === chainId) && isSameAddress(x.info.owner, address),
-                ),
-        ],
-        (a, b) => isSameAddress(a.contractDetailed.address, b.contractDetailed.address) && a.tokenId === b.tokenId,
-    )
-    return {
-        data: chainId === ChainId.Mainnet ? (all as ERC721TokenDetailed[]) : [],
-        state,
-        error: chainId === ChainId.Mainnet ? error : undefined,
-        retry: chainId === ChainId.Mainnet ? retry : noop,
-    }
-}
diff --git a/packages/web3-shared/evm/hooks/useContract.ts b/packages/web3-shared/evm/hooks/useContract.ts
deleted file mode 100644
index 6fa0ced8fc55..000000000000
--- a/packages/web3-shared/evm/hooks/useContract.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-import type Web3 from 'web3'
-import { useMemo } from 'react'
-import type { AbiItem } from 'web3-utils'
-import { EthereumAddress } from 'wallet.ts'
-import type { BaseContract } from '@masknet/web3-contracts/types/types'
-import { useWeb3 } from './useWeb3'
-import type { ChainId } from '../types'
-
-export function createContract<T extends BaseContract>(web3: Web3, address: string, ABI: AbiItem[]) {
-    if (!address || !EthereumAddress.isValid(address)) return null
-    const contract = new web3.eth.Contract(ABI, address) as unknown as T
-    contract.transactionConfirmationBlocks = 0
-    contract.transactionPollingTimeout = 5000
-    return contract
-}
-
-/**
- * Create a contract which will forward its all transactions to the
- * EthereumService in the background page and decode the result of calls automatically
- * @param address
- * @param ABI
- * @param chainId
- */
-export function useContract<T extends BaseContract>(address = '', ABI: AbiItem[] = [], chainId?: ChainId) {
-    const web3 = useWeb3(chainId ? { chainId } : {})
-    return useMemo(() => createContract<T>(web3, address, ABI), [web3, address, ABI])
-}
-
-/**
- * Create many contracts with same ABI
- * @param listOfAddress
- * @param ABI
- * @param chainId
- */
-export function useContracts<T extends BaseContract>(listOfAddress: string[], ABI: AbiItem[] = [], chainId?: ChainId) {
-    const web3 = useWeb3(chainId ? { chainId } : {})
-    const contracts = useMemo(
-        () => listOfAddress.map((address) => createContract<T>(web3, address, ABI)),
-        [web3, JSON.stringify(listOfAddress), ABI],
-    )
-    return contracts.filter(Boolean) as T[]
-}
diff --git a/packages/web3-shared/evm/hooks/useCurrentBlockTimestamp.ts b/packages/web3-shared/evm/hooks/useCurrentBlockTimestamp.ts
deleted file mode 100644
index 2f9b2f9140de..000000000000
--- a/packages/web3-shared/evm/hooks/useCurrentBlockTimestamp.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { useAsyncRetry } from 'react-use'
-import { useMulticallContract } from '../contracts/useMulticallContract'
-import type { ChainId } from '../types'
-import { useChainId } from './useChainId'
-import { numberToHex } from 'web3-utils'
-
-export function useCurrentBlockTimestamp(targetChainId?: ChainId) {
-    const currentChainId = useChainId()
-    const chainId = targetChainId ?? currentChainId
-    const multicallContract = useMulticallContract(chainId)
-    return useAsyncRetry(
-        async () =>
-            multicallContract?.methods.getCurrentBlockTimestamp().call({
-                chainId: numberToHex(chainId),
-            }),
-        [multicallContract, chainId],
-    )
-}
diff --git a/packages/web3-shared/evm/hooks/useENSLabel.ts b/packages/web3-shared/evm/hooks/useENSLabel.ts
deleted file mode 100644
index fe437d2e3b92..000000000000
--- a/packages/web3-shared/evm/hooks/useENSLabel.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import { first } from 'lodash-unified'
-import { useAsyncRetry } from 'react-use'
-import { EthereumAddress } from 'wallet.ts'
-import { ChainId } from '../types'
-import { useReverseRecordsContract } from '../contracts/useReverseLookupContract'
-
-const cached: Map<string, string> = new Map()
-
-export function useENSLabel(address: string) {
-    const reverseRecordsContract = useReverseRecordsContract()
-    return useAsyncRetry(async () => {
-        // validate address
-        if (!address || !EthereumAddress.isValid(address)) return ''
-        const address_ = EthereumAddress.checksumAddress(address)
-
-        // check cache
-        if (cached.has(address_)) return cached.get(address_)
-
-        // fetch from chain
-        if (!reverseRecordsContract) return ''
-        const response = await reverseRecordsContract.methods.getNames([address_]).call({
-            // it needs to be locked on the ethereum mainnet
-            chainId: `0x${ChainId.Mainnet.toString(16)}`,
-        })
-
-        // validate response
-        const label = first(response) ?? ''
-        if (!label) return ''
-
-        // update cache
-        cached.set(address_, label)
-        return cached.get(address_)
-    }, [address, reverseRecordsContract])
-}
diff --git a/packages/web3-shared/evm/hooks/useERC1155TokenAssetDetailed.ts b/packages/web3-shared/evm/hooks/useERC1155TokenAssetDetailed.ts
deleted file mode 100644
index 0f636c776c91..000000000000
--- a/packages/web3-shared/evm/hooks/useERC1155TokenAssetDetailed.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { useAsyncRetry } from 'react-use'
-import type { ERC1155TokenAssetDetailed, ERC1155TokenDetailed } from '../types'
-
-export function useERC1155TokenAssetDetailed(token?: ERC1155TokenDetailed) {
-    return useAsyncRetry(async () => {
-        if (!token?.uri) return
-        const response = await fetch(token.uri)
-        const asset = (await response.json()) as ERC1155TokenAssetDetailed['asset']
-        return {
-            ...token,
-            asset,
-        } as ERC1155TokenAssetDetailed
-    }, [token?.uri])
-}
diff --git a/packages/web3-shared/evm/hooks/useERC20TokenBalance.ts b/packages/web3-shared/evm/hooks/useERC20TokenBalance.ts
deleted file mode 100644
index 7431d76b1c18..000000000000
--- a/packages/web3-shared/evm/hooks/useERC20TokenBalance.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import { toHex } from 'web3-utils'
-import { useBeatRetry } from '@masknet/web3-shared-base'
-import { useAccount } from './useAccount'
-import { useERC20TokenContract } from '../contracts/useERC20TokenContract'
-import { useChainId } from './useChainId'
-import type { ChainId } from '../types'
-import type { AsyncStateRetry } from 'react-use/lib/useAsyncRetry'
-
-/**
- * Fetch token balance from chain
- * @param address
- * @param targetChainId
- */
-export function useERC20TokenBalance(address?: string, targetChainId?: ChainId): AsyncStateRetry<string | undefined> {
-    const account = useAccount()
-    const defaultChainId = useChainId()
-    const chainId = targetChainId ?? defaultChainId
-    const erc20Contract = useERC20TokenContract(address)
-    return useBeatRetry(
-        async () => {
-            if (!account || !address || !erc20Contract) return undefined
-            return erc20Contract.methods.balanceOf(account).call({
-                from: account,
-                chainId: toHex(chainId),
-            })
-        },
-        30 * 1000,
-        [account, chainId, address, erc20Contract],
-    )
-}
diff --git a/packages/web3-shared/evm/hooks/useERC20TokenDetailed.ts b/packages/web3-shared/evm/hooks/useERC20TokenDetailed.ts
deleted file mode 100644
index 5577105a6757..000000000000
--- a/packages/web3-shared/evm/hooks/useERC20TokenDetailed.ts
+++ /dev/null
@@ -1,93 +0,0 @@
-import { useMemo } from 'react'
-import { useAsyncRetry } from 'react-use'
-import { EthereumAddress } from 'wallet.ts'
-import { ERC20TokenDetailed, FungibleToken, ChainId, EthereumTokenType, FungibleTokenDetailed } from '../types'
-import { useChainId } from './useChainId'
-import type { ERC20 } from '@masknet/web3-contracts/types/ERC20'
-import type { ERC20Bytes32 } from '@masknet/web3-contracts/types/ERC20Bytes32'
-import { useERC20TokenContract, useERC20TokenContracts } from '../contracts/useERC20TokenContract'
-import { useERC20TokenBytes32Contract, useERC20TokenBytes32Contracts } from '../contracts/useERC20TokenBytes32Contract'
-import { parseStringOrBytes32, createERC20Token, createNativeToken } from '../utils'
-import { useEthereumTokenType } from './useEthereumTokenType'
-
-export function useERC20TokenDetailed(address?: string, token?: Partial<ERC20TokenDetailed>, targetChainId?: ChainId) {
-    const currentChainId = useChainId()
-    const chainId = targetChainId ?? currentChainId
-    const erc20TokenContract = useERC20TokenContract(address, chainId)
-    const erc20TokenBytes32Contract = useERC20TokenBytes32Contract(address, chainId)
-    const tokenType = useEthereumTokenType(address, chainId)
-
-    return useAsyncRetry(async () => {
-        if (!address) return
-        if (!EthereumAddress.isValid(address)) return
-        if (tokenType !== EthereumTokenType.ERC20) return
-        return getERC20TokenDetailed(address, chainId, erc20TokenContract, erc20TokenBytes32Contract, token)
-    }, [chainId, token, erc20TokenContract, erc20TokenBytes32Contract, address])
-}
-
-export function useFungibleTokensDetailed(
-    listOfToken: Array<Pick<FungibleToken, 'address' | 'type'>>,
-    _chainId?: ChainId,
-) {
-    const currentChainId = useChainId()
-    const chainId = _chainId ? _chainId : currentChainId
-    const listOfAddress = useMemo(() => listOfToken.map((t) => t.address), [JSON.stringify(listOfToken)])
-
-    const erc20TokenContracts = useERC20TokenContracts(listOfAddress, chainId)
-    const erc20TokenBytes32Contracts = useERC20TokenBytes32Contracts(listOfAddress, chainId)
-
-    return useAsyncRetry<FungibleTokenDetailed[]>(
-        async () =>
-            Promise.all(
-                listOfToken.map(async (token, i) => {
-                    if (token.type === EthereumTokenType.Native) return createNativeToken(chainId)
-
-                    const erc20TokenContract = erc20TokenContracts[i]
-                    const erc20TokenBytes32Contract = erc20TokenBytes32Contracts[i]
-                    return getERC20TokenDetailed(
-                        token.address,
-                        chainId,
-                        erc20TokenContract,
-                        erc20TokenBytes32Contract,
-                        token as Partial<ERC20TokenDetailed>,
-                    )
-                }),
-            ),
-        [
-            chainId,
-            JSON.stringify(listOfToken),
-            JSON.stringify(erc20TokenContracts),
-            JSON.stringify(erc20TokenBytes32Contracts),
-        ],
-    )
-}
-
-const lazyBlank = Promise.resolve('')
-const lazyZero = Promise.resolve('0')
-
-async function getERC20TokenDetailed(
-    address: string,
-    chainId: ChainId,
-    erc20TokenContract: ERC20 | null,
-    erc20TokenBytes32Contract: ERC20Bytes32 | null,
-    token?: Partial<ERC20TokenDetailed>,
-) {
-    const results = await Promise.allSettled([
-        token?.name ?? erc20TokenContract?.methods.name().call() ?? lazyBlank,
-        token?.name ? lazyBlank : erc20TokenBytes32Contract?.methods.name().call() ?? lazyBlank,
-        token?.symbol ?? erc20TokenContract?.methods.symbol().call() ?? lazyBlank,
-        token?.symbol ? lazyBlank : erc20TokenBytes32Contract?.methods.symbol().call() ?? lazyBlank,
-        token?.decimals ?? erc20TokenContract?.methods.decimals().call() ?? lazyZero,
-    ])
-    const [name, nameBytes32, symbol, symbolBytes32, decimals] = results.map((result) =>
-        result.status === 'fulfilled' ? result.value : '',
-    ) as string[]
-
-    return createERC20Token(
-        chainId,
-        address,
-        typeof decimals === 'string' ? Number.parseInt(decimals ? decimals : '0', 10) : decimals,
-        parseStringOrBytes32(name, nameBytes32, 'Unknown Token'),
-        parseStringOrBytes32(symbol, symbolBytes32, 'Unknown'),
-    )
-}
diff --git a/packages/web3-shared/evm/hooks/useERC20TokenDetailedFromTokenLists.ts b/packages/web3-shared/evm/hooks/useERC20TokenDetailedFromTokenLists.ts
deleted file mode 100644
index 9ba28c359f94..000000000000
--- a/packages/web3-shared/evm/hooks/useERC20TokenDetailedFromTokenLists.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import { useAsync } from 'react-use'
-import { useWeb3Context } from '../context'
-import { useChainId } from './useChainId'
-import { isSameAddress } from '../utils'
-import { useTokenListConstants } from '../constants'
-
-export function useERC20TokenDetailedFromTokenLists(address?: string) {
-    const { ERC20 } = useTokenListConstants()
-    const chainId = useChainId()
-    const { fetchERC20TokensFromTokenLists } = useWeb3Context()
-    const { value: allTokens = [], loading: loadingAllTokens } = useAsync(
-        async () => (!ERC20 || ERC20.length === 0 ? [] : fetchERC20TokensFromTokenLists(ERC20, chainId)),
-        [chainId, ERC20?.sort().join()],
-    )
-
-    return {
-        loading: loadingAllTokens,
-        tokensDetailed: allTokens.find((token) => isSameAddress(address, token.address)),
-    }
-}
diff --git a/packages/web3-shared/evm/hooks/useERC20TokenTotalSupply.ts b/packages/web3-shared/evm/hooks/useERC20TokenTotalSupply.ts
deleted file mode 100644
index 091faa97a0ab..000000000000
--- a/packages/web3-shared/evm/hooks/useERC20TokenTotalSupply.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { useAsyncRetry } from 'react-use'
-import { EthereumAddress } from 'wallet.ts'
-import { useChainId } from './useChainId'
-import { useERC20TokenContract } from '../contracts'
-
-export function useERC20TokenTotalSupply(address?: string) {
-    const chainId = useChainId()
-    const erc20TokenContract = useERC20TokenContract(address)
-    return useAsyncRetry(async () => {
-        if (!address) return
-        if (!EthereumAddress.isValid(address)) return
-        return erc20TokenContract?.methods.totalSupply().call()
-    }, [chainId, address, erc20TokenContract])
-}
diff --git a/packages/web3-shared/evm/hooks/useERC20Tokens.ts b/packages/web3-shared/evm/hooks/useERC20Tokens.ts
deleted file mode 100644
index 5e598689b1fd..000000000000
--- a/packages/web3-shared/evm/hooks/useERC20Tokens.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { useMemo } from 'react'
-import { useWallet } from './useWallet'
-import { useWeb3State } from '../context'
-import { useChainId } from './useChainId'
-
-export function useERC20Tokens() {
-    const chainId = useChainId()
-    const wallet = useWallet()
-    const erc20Tokens = useWeb3State().erc20Tokens
-
-    return useMemo(() => {
-        if (!wallet) return []
-        return erc20Tokens.filter((x) => x.chainId === chainId)
-    }, [chainId, wallet, erc20Tokens])
-}
diff --git a/packages/web3-shared/evm/hooks/useERC20TokensDetailedFromTokenLists.ts b/packages/web3-shared/evm/hooks/useERC20TokensDetailedFromTokenLists.ts
deleted file mode 100644
index d3c38f381bfd..000000000000
--- a/packages/web3-shared/evm/hooks/useERC20TokensDetailedFromTokenLists.ts
+++ /dev/null
@@ -1,64 +0,0 @@
-import { useMemo } from 'react'
-import { useAsyncRetry } from 'react-use'
-import type { AsyncStateRetry } from 'react-use/lib/useAsyncRetry'
-import Fuse from 'fuse.js'
-import { EthereumAddress } from 'wallet.ts'
-import { useWeb3Context } from '../context'
-import { useChainId } from './useChainId'
-import { currySameAddress } from '../utils'
-import type { ERC20TokenDetailed, NativeTokenDetailed, ChainId } from '../types'
-import { EMPTY_LIST } from '@masknet/shared-base'
-
-export function useERC20TokensDetailedFromTokenLists(
-    lists?: string[],
-    keyword = '',
-    additionalTokens: Array<ERC20TokenDetailed | NativeTokenDetailed> = EMPTY_LIST,
-    targetChainId?: ChainId,
-): AsyncStateRetry<Array<ERC20TokenDetailed | NativeTokenDetailed>> {
-    // #region fetch token lists
-    const currentChainId = useChainId()
-    const chainId = targetChainId ?? currentChainId
-    const { fetchERC20TokensFromTokenLists } = useWeb3Context()
-    const { value: tokensFromList = EMPTY_LIST, ...asyncResult } = useAsyncRetry(
-        async () => (!lists || lists.length === 0 ? [] : fetchERC20TokensFromTokenLists(lists, chainId)),
-        [chainId, lists?.sort((a, b) => a.localeCompare(b, 'en-US')).join()],
-    )
-    // #endregion
-    // #region fuse
-    const fuse = useMemo(
-        () =>
-            new Fuse([...additionalTokens, ...tokensFromList], {
-                shouldSort: true,
-                threshold: 0,
-                minMatchCharLength: 1,
-                keys: [
-                    { name: 'name', weight: 0.5 },
-                    { name: 'symbol', weight: 1 },
-                ],
-            }),
-        [tokensFromList, additionalTokens.map((x) => x.address).join()],
-    )
-    // #endregion
-
-    // #region create searched tokens
-    const searchedTokens = useMemo(() => {
-        const allToken = [...additionalTokens, ...tokensFromList]
-        if (!keyword) return allToken
-
-        return [
-            ...(EthereumAddress.isValid(keyword) ? allToken.filter(currySameAddress(keyword)) : []),
-            ...fuse.search(keyword).map((x) => x.item),
-        ]
-    }, [keyword, fuse, tokensFromList, additionalTokens.map((x) => x.address).join()])
-    // #endregion
-
-    if (!asyncResult.error)
-        return {
-            ...asyncResult,
-            value: searchedTokens,
-        }
-    return {
-        ...asyncResult,
-        value: undefined,
-    }
-}
diff --git a/packages/web3-shared/evm/hooks/useERC721ContractBalance.ts b/packages/web3-shared/evm/hooks/useERC721ContractBalance.ts
deleted file mode 100644
index 23766667edd3..000000000000
--- a/packages/web3-shared/evm/hooks/useERC721ContractBalance.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { useAsyncRetry } from 'react-use'
-import { useERC721TokenContract } from '../contracts/useERC721TokenContract'
-import { safeNonPayableTransactionCall } from '../utils'
-import { EthereumAddress } from 'wallet.ts'
-import { useChainId } from './useChainId'
-
-export function useERC721ContractBalance(address: string | undefined, account: string) {
-    const chainId = useChainId()
-    const erc721TokenContract = useERC721TokenContract(address)
-    return useAsyncRetry(async () => {
-        if (!address || !EthereumAddress.isValid(account) || !EthereumAddress.isValid(address) || !erc721TokenContract)
-            return
-        return safeNonPayableTransactionCall(erc721TokenContract.methods.balanceOf(account))
-    }, [address, chainId, erc721TokenContract, account])
-}
diff --git a/packages/web3-shared/evm/hooks/useERC721ContractDetailed.ts b/packages/web3-shared/evm/hooks/useERC721ContractDetailed.ts
deleted file mode 100644
index c99f91b9e31b..000000000000
--- a/packages/web3-shared/evm/hooks/useERC721ContractDetailed.ts
+++ /dev/null
@@ -1,64 +0,0 @@
-import { useAsyncRetry } from 'react-use'
-import { EthereumAddress } from 'wallet.ts'
-import type { ERC721 } from '@masknet/web3-contracts/types/ERC721'
-import type { ChainId } from '../types'
-import { useChainId } from './useChainId'
-import { useERC721TokenContract } from '../contracts/useERC721TokenContract'
-import { createERC721ContractDetailed, safeNonPayableTransactionCall } from '../utils'
-import { getOpenseaAPIConstants } from '../constants'
-
-export function useERC721ContractDetailed(address?: string) {
-    const chainId = useChainId()
-    const erc721TokenContract = useERC721TokenContract(address)
-    return useAsyncRetry(async () => {
-        if (!address || !EthereumAddress.isValid(address) || !erc721TokenContract) return
-        return getERC721ContractDetailed(erc721TokenContract, address, chainId)
-    }, [address, chainId, erc721TokenContract])
-}
-
-const lazyBlank = Promise.resolve('')
-
-async function getERC721ContractDetailedFromChain(address: string, chainId: ChainId, erc721TokenContract: ERC721) {
-    const results = await Promise.allSettled([
-        safeNonPayableTransactionCall(erc721TokenContract.methods.name()) ?? lazyBlank,
-        safeNonPayableTransactionCall(erc721TokenContract.methods.symbol()) ?? lazyBlank,
-        safeNonPayableTransactionCall(erc721TokenContract.methods.baseURI()) ?? lazyBlank,
-    ])
-    const [name, symbol, baseURI] = results.map((result) =>
-        result.status === 'fulfilled' ? result.value : '',
-    ) as string[]
-
-    return createERC721ContractDetailed(chainId, address, name, symbol, baseURI)
-}
-
-async function getERC721ContractDetailedFromOpensea(address: string, chainId: ChainId, apiUrl: string) {
-    const response = await fetch(`${apiUrl}/${address}`)
-    type DataType = {
-        name: string
-        symbol: string
-        image_url: string
-    }
-    if (response.ok) {
-        const data: DataType = await response.json()
-        return createERC721ContractDetailed(chainId, address, data.name, data.symbol, undefined, data.image_url)
-    }
-    return null
-}
-
-export async function getERC721ContractDetailed(contract: ERC721, address: string, chainId: ChainId) {
-    const erc721ContractDetailedFromChain = await getERC721ContractDetailedFromChain(address, chainId, contract)
-    const { GET_CONTRACT_URL } = getOpenseaAPIConstants(chainId)
-    if (!GET_CONTRACT_URL) return erc721ContractDetailedFromChain
-    const contractDetailedFromOpensea = await getERC721ContractDetailedFromOpensea(address, chainId, GET_CONTRACT_URL)
-
-    // We prefer to use `name` and `symbol` from chain rather than opensea since,
-    //  these two data on opensea is sometimes incorrect. Meanwhile there's often
-    //   a lack of `iconURL` from chain, which exists on opensea.
-    return contractDetailedFromOpensea
-        ? {
-              ...contractDetailedFromOpensea,
-              name: erc721ContractDetailedFromChain.name,
-              symbol: erc721ContractDetailedFromChain.symbol,
-          }
-        : erc721ContractDetailedFromChain
-}
diff --git a/packages/web3-shared/evm/hooks/useERC721TokenByIndex.ts b/packages/web3-shared/evm/hooks/useERC721TokenByIndex.ts
deleted file mode 100644
index 421271636125..000000000000
--- a/packages/web3-shared/evm/hooks/useERC721TokenByIndex.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { useAsync } from 'react-use'
-import type { ERC721Token } from '../types'
-import { useERC721TokenContract } from '../contracts/useERC721TokenContract'
-import { useChainId } from './useChainId'
-import type { AsyncState } from 'react-use/lib/useAsyncFn'
-
-export function useERC721TokenByIndex(token?: ERC721Token, index = 0): AsyncState<string | undefined> {
-    const chainId = useChainId()
-    const erc721Contract = useERC721TokenContract(token?.address)
-    return useAsync(async () => {
-        if (!erc721Contract) return
-        return erc721Contract.methods.tokenByIndex(index).call()
-    }, [chainId, erc721Contract, index])
-}
diff --git a/packages/web3-shared/evm/hooks/useERC721TokenDetailed.ts b/packages/web3-shared/evm/hooks/useERC721TokenDetailed.ts
deleted file mode 100644
index 41b177ef1d99..000000000000
--- a/packages/web3-shared/evm/hooks/useERC721TokenDetailed.ts
+++ /dev/null
@@ -1,155 +0,0 @@
-import type { ERC721 } from '@masknet/web3-contracts/types/ERC721'
-import { first, noop } from 'lodash-unified'
-import { useAsyncRetry } from 'react-use'
-import urlcat from 'urlcat'
-import { getOpenseaAPIConstants } from '../constants'
-import { useERC721TokenContract } from '../contracts/useERC721TokenContract'
-import type { ChainId, ERC721ContractDetailed, ERC721TokenInfo } from '../types'
-import { createERC721Token, formatNFT_TokenId, safeNonPayableTransactionCall } from '../utils'
-import { useChainId } from './useChainId'
-
-export function useERC721TokenDetailed(
-    contractDetailed: ERC721ContractDetailed | null | undefined,
-    tokenId: string | null | undefined,
-) {
-    const erc721TokenContract = useERC721TokenContract(contractDetailed?.address ?? '')
-    const chainId = useChainId()
-    const asyncRetry = useAsyncRetry(async () => {
-        if (!erc721TokenContract || !contractDetailed || !tokenId || !contractDetailed.address) return
-        return getERC721TokenDetailed(contractDetailed, erc721TokenContract, tokenId, chainId)
-    }, [tokenId, JSON.stringify(contractDetailed), erc721TokenContract])
-
-    return { asyncRetry, tokenDetailed: asyncRetry.value }
-}
-
-export async function getERC721TokenDetailedFromOpensea(
-    contractDetailed: ERC721ContractDetailed,
-    tokenId: string,
-    apiUrl: string,
-) {
-    const response = await fetch(
-        urlcat(`${apiUrl}/:address/:tokenId`, {
-            address: contractDetailed.address,
-            tokenId,
-        }),
-    )
-    // https://docs.opensea.io/docs/metadata-standards
-    type OpenseaTokenData = {
-        name: string
-        description: string
-        image_url: string
-        animation_url: string
-        top_ownerships: Array<{ owner: { address: string } }>
-    }
-
-    if (response.ok) {
-        const data: OpenseaTokenData = await response.json()
-
-        return createERC721Token(
-            contractDetailed,
-            {
-                name: data.name,
-                description: data.description,
-                mediaUrl: data.image_url || data.animation_url,
-                owner: first(data.top_ownerships)?.owner.address ?? '',
-                hasTokenDetailed: true,
-            },
-            tokenId,
-        )
-    }
-    return
-}
-
-export async function getERC721TokenDetailedFromChain(
-    contractDetailed: ERC721ContractDetailed,
-    erc721TokenContract: ERC721,
-    tokenId: string,
-    owner?: string,
-    queryTokenURI = true,
-) {
-    if (!contractDetailed) return
-    try {
-        const tokenInfo = {
-            owner: owner ?? (await safeNonPayableTransactionCall(erc721TokenContract.methods.ownerOf(tokenId))),
-            tokenURI: queryTokenURI
-                ? await safeNonPayableTransactionCall(erc721TokenContract.methods.tokenURI(tokenId))
-                : '',
-            name: formatNFT_TokenId(tokenId, 2),
-            hasTokenDetailed: false,
-        }
-        return createERC721Token(contractDetailed, tokenInfo, tokenId)
-    } catch (err) {
-        return
-    }
-}
-
-const assetCache: Record<string, Promise<ERC721TokenInfo> | ERC721TokenInfo> = Object.create(null)
-const lazyVoid = Promise.resolve()
-
-const BASE64_PREFIX = 'data:application/json;base64,'
-const HTTP_PREFIX = 'http'
-const CORS_PROXY = 'https://cors.r2d2.to'
-
-export async function getERC721TokenAssetFromChain(tokenURI?: string): Promise<ERC721TokenInfo | void> {
-    if (!tokenURI) return
-    if (assetCache[tokenURI]) return assetCache[tokenURI]
-
-    let promise: Promise<ERC721TokenInfo | void> = lazyVoid
-
-    try {
-        // for some NFT tokens return JSON in base64 encoded
-        if (tokenURI.startsWith(BASE64_PREFIX)) {
-            promise = Promise.resolve(JSON.parse(atob(tokenURI.replace(BASE64_PREFIX, ''))) as ERC721TokenInfo)
-        } else {
-            // for some NFT tokens return JSON
-            promise = Promise.resolve(JSON.parse(tokenURI) as ERC721TokenInfo)
-        }
-    } catch (error) {
-        void 0
-    }
-
-    if (promise === lazyVoid) {
-        try {
-            // for some NFT tokens return an URL refers to a JSON file
-            promise = fetch(tokenURI.startsWith(HTTP_PREFIX) ? `${CORS_PROXY}/?${tokenURI}` : tokenURI).then(
-                async (r) => {
-                    const json = await r.json()
-                    return {
-                        ...json,
-                        mediaUrl: json.image || json.animation_url,
-                        imageURL: json.image || json.animation_url,
-                    } as ERC721TokenInfo
-                },
-                noop,
-            )
-            assetCache[tokenURI] = await (promise as Promise<ERC721TokenInfo>)
-            return assetCache[tokenURI]
-        } catch (err) {
-            return
-        }
-    }
-
-    return
-}
-
-export async function getERC721TokenDetailed(
-    contract: ERC721ContractDetailed,
-    tokenContract: ERC721,
-    tokenId: string,
-    chainId: ChainId,
-) {
-    const { GET_SINGLE_ASSET_URL } = getOpenseaAPIConstants(chainId)
-    const tokenDetailed = GET_SINGLE_ASSET_URL
-        ? await getERC721TokenDetailedFromOpensea(contract, tokenId, GET_SINGLE_ASSET_URL)
-        : await getERC721TokenDetailedFromChain(contract, tokenContract, tokenId)
-    const info = await getERC721TokenAssetFromChain(tokenDetailed?.info.tokenURI)
-    if (info && tokenDetailed) {
-        tokenDetailed.info = {
-            ...info,
-            ...tokenDetailed.info,
-            hasTokenDetailed: true,
-            name: info.name ?? tokenDetailed.info.name,
-        }
-    }
-    return tokenDetailed
-}
diff --git a/packages/web3-shared/evm/hooks/useERC721TokenDetailedCallback.ts b/packages/web3-shared/evm/hooks/useERC721TokenDetailedCallback.ts
deleted file mode 100644
index ccc4273187dd..000000000000
--- a/packages/web3-shared/evm/hooks/useERC721TokenDetailedCallback.ts
+++ /dev/null
@@ -1,48 +0,0 @@
-import { useState, useCallback } from 'react'
-import {
-    getERC721TokenDetailedFromOpensea,
-    getERC721TokenDetailedFromChain,
-    getERC721TokenAssetFromChain,
-} from './useERC721TokenDetailed'
-import type { ERC721ContractDetailed } from '../types'
-import { useOpenseaAPIConstants } from '../constants'
-import { useERC721TokenContract } from '../contracts/useERC721TokenContract'
-
-export function useERC721TokenDetailedCallback(contractDetailed: ERC721ContractDetailed | null | undefined) {
-    const [tokenId, setTokenId] = useState('')
-    const { GET_SINGLE_ASSET_URL } = useOpenseaAPIConstants()
-    const erc721TokenContract = useERC721TokenContract(contractDetailed?.address ?? '')
-    const erc721TokenDetailedCallback = useCallback(async () => {
-        if (!erc721TokenContract || !contractDetailed || !tokenId) return
-        if (!GET_SINGLE_ASSET_URL) {
-            const tokenDetailedFromChain = await getERC721TokenDetailedFromChain(
-                contractDetailed,
-                erc721TokenContract,
-                tokenId,
-            )
-            const info = await getERC721TokenAssetFromChain(tokenDetailedFromChain?.info.tokenURI)
-
-            if (info && tokenDetailedFromChain) {
-                tokenDetailedFromChain.info = {
-                    ...info,
-                    ...tokenDetailedFromChain.info,
-                    hasTokenDetailed: true,
-                    name: info?.name ?? tokenDetailedFromChain?.info.name ?? '',
-                }
-            }
-            return tokenDetailedFromChain
-        } else {
-            const tokenDetailedFromOpensea = await getERC721TokenDetailedFromOpensea(
-                contractDetailed,
-                tokenId,
-                GET_SINGLE_ASSET_URL,
-            )
-
-            if (tokenDetailedFromOpensea) tokenDetailedFromOpensea.info.hasTokenDetailed = true
-
-            return tokenDetailedFromOpensea
-        }
-    }, [tokenId, contractDetailed, erc721TokenContract, GET_SINGLE_ASSET_URL])
-
-    return [tokenId, setTokenId, erc721TokenDetailedCallback] as const
-}
diff --git a/packages/web3-shared/evm/hooks/useERC721Tokens.ts b/packages/web3-shared/evm/hooks/useERC721Tokens.ts
deleted file mode 100644
index 34ece7bbfb87..000000000000
--- a/packages/web3-shared/evm/hooks/useERC721Tokens.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { useMemo } from 'react'
-import { useWallet } from './useWallet'
-import { useWeb3State } from '../context'
-import { useChainId } from './useChainId'
-
-export function useERC721Tokens() {
-    const chainId = useChainId()
-    const wallet = useWallet()
-    const erc721Tokens = useWeb3State().erc721Tokens
-
-    return useMemo(() => {
-        if (!wallet) return []
-        return erc721Tokens.filter((x) => x.contractDetailed.chainId === chainId)
-    }, [chainId, wallet, erc721Tokens])
-}
diff --git a/packages/web3-shared/evm/hooks/useEthereumTokenType.ts b/packages/web3-shared/evm/hooks/useEthereumTokenType.ts
deleted file mode 100644
index ce7b623593bf..000000000000
--- a/packages/web3-shared/evm/hooks/useEthereumTokenType.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-import { useAsyncRetry } from 'react-use'
-import { useERC1155TokenContract, useERC721TokenContract } from '../contracts'
-import { useWeb3 } from './useWeb3'
-
-import { useERC165 } from '.'
-import { ChainId, EthereumTokenType } from '../types'
-
-const ERC721_ENUMERABLE_INTERFACE_ID = '0x780e9d63'
-const ERC1155_ENUMERABLE_INTERFACE_ID = '0xd9b67a26'
-
-function useCheckContract(address: string, chainId?: ChainId) {
-    const web3 = useWeb3({ chainId })
-    return useAsyncRetry(async () => {
-        const result = await web3.eth.getCode(address)
-        return result !== '0x'
-    }, [address, web3])
-}
-
-function useCheckERC721(address: string, chainId?: ChainId) {
-    const erc721Contract = useERC721TokenContract(address, chainId)
-    return useERC165(erc721Contract, address, ERC721_ENUMERABLE_INTERFACE_ID)
-}
-
-function useCheckERC1155(address: string, chainId?: ChainId) {
-    const erc1155Contract = useERC1155TokenContract(address, chainId)
-    return useERC165(erc1155Contract, address, ERC1155_ENUMERABLE_INTERFACE_ID)
-}
-
-export function useEthereumTokenType(address = '', chainId?: ChainId): EthereumTokenType | undefined {
-    const { value: isContract, loading: loadingContract } = useCheckContract(address, chainId)
-    const { value: isERC721, loading: loadingERC721 } = useCheckERC721(address, chainId)
-    const { value: isERC1155, loading: loadingERC1155 } = useCheckERC1155(address, chainId)
-
-    if (loadingERC1155 || loadingERC721 || loadingContract) return
-    return isERC1155
-        ? EthereumTokenType.ERC1155
-        : isERC721
-        ? EthereumTokenType.ERC721
-        : isContract
-        ? EthereumTokenType.ERC20
-        : undefined
-}
diff --git a/packages/web3-shared/evm/hooks/useFungibleTokenBalance.ts b/packages/web3-shared/evm/hooks/useFungibleTokenBalance.ts
deleted file mode 100644
index 650f10ed6acc..000000000000
--- a/packages/web3-shared/evm/hooks/useFungibleTokenBalance.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import { unreachable } from '@dimensiondev/kit'
-import { ChainId, EthereumTokenType } from '../types'
-import { useERC20TokenBalance } from './useERC20TokenBalance'
-import { useNativeTokenBalance } from './useNativeTokenBalance'
-import type { AsyncStateRetry } from 'react-use/lib/useAsyncRetry'
-
-export function useFungibleTokenBalance(
-    type: EthereumTokenType.Native | EthereumTokenType.ERC20,
-    address?: string,
-    chainId?: ChainId,
-): AsyncStateRetry<string | undefined> {
-    const r1 = useNativeTokenBalance(chainId)
-    const r2 = useERC20TokenBalance(type === EthereumTokenType.ERC20 ? address : undefined, chainId)
-
-    const type_ = type
-    switch (type_) {
-        case EthereumTokenType.Native:
-            return r1
-        case EthereumTokenType.ERC20:
-            return r2
-        default:
-            unreachable(type_)
-    }
-}
diff --git a/packages/web3-shared/evm/hooks/useFungibleTokenDetailed.ts b/packages/web3-shared/evm/hooks/useFungibleTokenDetailed.ts
deleted file mode 100644
index 38211d089312..000000000000
--- a/packages/web3-shared/evm/hooks/useFungibleTokenDetailed.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import type { AsyncStateRetry } from 'react-use/lib/useAsyncRetry'
-import { unreachable } from '@dimensiondev/kit'
-import { ChainId, ERC20TokenDetailed, EthereumTokenDetailedType, EthereumTokenType } from '../types'
-import { useERC20TokenDetailed } from './useERC20TokenDetailed'
-import { useNativeTokenDetailed } from './useNativeTokenDetailed'
-
-export function useFungibleTokenDetailed<
-    P extends EthereumTokenDetailedType<EthereumTokenType.ERC20 | EthereumTokenType.Native>,
->(
-    type: EthereumTokenType.ERC20 | EthereumTokenType.Native,
-    address: string,
-    token?: Partial<P>,
-    chainId?: ChainId,
-): AsyncStateRetry<P | undefined> {
-    const r1 = useNativeTokenDetailed()
-    const r2 = useERC20TokenDetailed(
-        type === EthereumTokenType.ERC20 ? address : '',
-        token as unknown as ERC20TokenDetailed,
-        chainId,
-    )
-    switch (type) {
-        case EthereumTokenType.Native:
-            return r1 as AsyncStateRetry<P | undefined>
-        case EthereumTokenType.ERC20:
-            return r2 as AsyncStateRetry<P | undefined>
-        default:
-            unreachable(type)
-    }
-}
diff --git a/packages/web3-shared/evm/hooks/useFungibleTokenWatched.tsx b/packages/web3-shared/evm/hooks/useFungibleTokenWatched.tsx
deleted file mode 100644
index 9fb54b1e50e4..000000000000
--- a/packages/web3-shared/evm/hooks/useFungibleTokenWatched.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import { useState } from 'react'
-import { EthereumTokenType, EthereumTokenDetailedType } from '../types'
-import { useFungibleTokenBalance } from './useFungibleTokenBalance'
-import { useFungibleTokenDetailed } from './useFungibleTokenDetailed'
-import { useNativeTokenDetailed } from './useNativeTokenDetailed'
-import type { AsyncStateRetry } from 'react-use/lib/useAsyncRetry'
-export function useFungibleTokenWatched(initialToken?: FungibleTokenInitial): FungibleTokenWatched {
-    const nativeToken = useNativeTokenDetailed()
-    const [token = nativeToken.value, setToken] = useState(initialToken)
-
-    const [amount, setAmount] = useState('')
-    const balance = useFungibleTokenBalance(token?.type ?? EthereumTokenType.Native, token?.address ?? '')
-    const detailed = useFungibleTokenDetailed(token?.type ?? EthereumTokenType.Native, token?.address ?? '')
-
-    return {
-        amount,
-        token: detailed,
-        balance,
-        setAmount,
-        setToken,
-    }
-}
-
-export interface FungibleTokenWatched {
-    amount: string
-    token: AsyncStateRetry<EthereumTokenDetailedType<EthereumTokenType.Native | EthereumTokenType.ERC20> | undefined>
-    balance: AsyncStateRetry<string | undefined>
-    setAmount: (x: string) => void
-    setToken: (x: FungibleTokenInitial) => void
-}
-export interface FungibleTokenInitial {
-    type: EthereumTokenType.ERC20 | EthereumTokenType.Native
-    address: string
-}
diff --git a/packages/web3-shared/evm/hooks/useGasLimit.ts b/packages/web3-shared/evm/hooks/useGasLimit.ts
deleted file mode 100644
index 345ffec7644d..000000000000
--- a/packages/web3-shared/evm/hooks/useGasLimit.ts
+++ /dev/null
@@ -1,47 +0,0 @@
-import { EthereumTokenType } from '../types'
-import { useERC20TokenContract, useERC721TokenContract } from '../contracts'
-import { useAccount } from './useAccount'
-import { useWeb3 } from './useWeb3'
-import { useAsync } from 'react-use'
-import { unreachable } from '@dimensiondev/kit'
-import type { AsyncState } from 'react-use/lib/useAsyncFn'
-
-export function useGasLimit(
-    type?: EthereumTokenType,
-    contractAddress?: string,
-    amount?: string,
-    recipient?: string,
-    tokenId?: string,
-): AsyncState<number> {
-    const web3 = useWeb3()
-    const account = useAccount()
-    const erc20Contract = useERC20TokenContract(contractAddress)
-    const erc721Contract = useERC721TokenContract(contractAddress)
-
-    return useAsync(async () => {
-        if (!recipient || type === undefined) return 0
-        if ((type === EthereumTokenType.ERC20 && !amount) || !contractAddress) return 0
-        if ((type === EthereumTokenType.ERC721 && !tokenId) || !contractAddress) return 0
-
-        switch (type) {
-            case EthereumTokenType.Native:
-                return web3.eth.estimateGas({
-                    from: account,
-                    to: recipient,
-                    value: amount,
-                })
-            case EthereumTokenType.ERC20:
-                return erc20Contract?.methods.transfer(recipient, amount ?? 0).estimateGas({
-                    from: account,
-                })
-            case EthereumTokenType.ERC721:
-                return erc721Contract?.methods.transferFrom(account, recipient, tokenId ?? '').estimateGas({
-                    from: account,
-                })
-            case EthereumTokenType.ERC1155:
-                throw new Error('To be implemented')
-            default:
-                unreachable(type)
-        }
-    }, [erc20Contract, type, amount, account, recipient, tokenId])
-}
diff --git a/packages/web3-shared/evm/hooks/useGasPrice.ts b/packages/web3-shared/evm/hooks/useGasPrice.ts
deleted file mode 100644
index 9b2523fdce8e..000000000000
--- a/packages/web3-shared/evm/hooks/useGasPrice.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { useAsyncRetry } from 'react-use'
-import { useWeb3 } from './useWeb3'
-import { useChainId } from './useChainId'
-import type { ChainId } from '../types'
-
-export function useGasPrice(expertedChainId?: ChainId) {
-    const currentChainId = useChainId()
-    const chainId = expertedChainId ?? currentChainId
-    const web3 = useWeb3({ chainId })
-
-    return useAsyncRetry(async () => {
-        return web3.eth.getGasPrice()
-    }, [web3, chainId])
-}
diff --git a/packages/web3-shared/evm/hooks/useGetPastLogsParams.ts b/packages/web3-shared/evm/hooks/useGetPastLogsParams.ts
deleted file mode 100644
index 432bdbef4500..000000000000
--- a/packages/web3-shared/evm/hooks/useGetPastLogsParams.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import type { PastLogsOptions } from 'web3-core'
-import { toHex } from 'web3-utils'
-
-// There's a getPastLogs block range limitation which differ from RPCs.
-//  So we need to split one large range request to multiple small ones.
-export function useGetPastLogsParams(
-    fromBlock: number | undefined,
-    currentBlock: number,
-    maxBlockRange: number,
-    params: Partial<PastLogsOptions>,
-) {
-    if (!fromBlock || fromBlock > currentBlock) return []
-    let count = 1
-    const queryParams = []
-    while (fromBlock + count * maxBlockRange < currentBlock) {
-        queryParams.push({
-            fromBlock: toHex(fromBlock + (count - 1) * maxBlockRange),
-            toBlock: toHex(fromBlock + count * maxBlockRange),
-            ...params,
-        })
-        count += 1
-    }
-    queryParams.push({
-        fromBlock: toHex(fromBlock + (count - 1) * maxBlockRange),
-        toBlock: toHex(currentBlock),
-        ...params,
-    })
-    return queryParams
-}
diff --git a/packages/web3-shared/evm/hooks/useNativeTokenBalance.ts b/packages/web3-shared/evm/hooks/useNativeTokenBalance.ts
deleted file mode 100644
index 16ef1c56b6ba..000000000000
--- a/packages/web3-shared/evm/hooks/useNativeTokenBalance.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { useAsyncRetry } from 'react-use'
-import type { AsyncStateRetry } from 'react-use/lib/useAsyncRetry'
-import type { ChainId } from '../types'
-import { useAccount } from './useAccount'
-import { useBalance } from './useBalance'
-
-/**
- * Fetch native token balance from chain
- */
-export function useNativeTokenBalance(chainId?: ChainId): AsyncStateRetry<string> {
-    const account = useAccount()
-    const { value: balance = '0' } = useBalance(chainId)
-    return useAsyncRetry(async () => {
-        if (!account) return
-        return balance
-    }, [account, balance])
-}
diff --git a/packages/web3-shared/evm/hooks/useNativeTokenDetailed.ts b/packages/web3-shared/evm/hooks/useNativeTokenDetailed.ts
deleted file mode 100644
index 5dfa38d313da..000000000000
--- a/packages/web3-shared/evm/hooks/useNativeTokenDetailed.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { useAsyncRetry } from 'react-use'
-import { createNativeToken } from '../utils'
-import { useChainId } from './useChainId'
-import type { ChainId } from '../types'
-
-export function useNativeTokenDetailed(chainId?: ChainId) {
-    const currentChainId = useChainId()
-    return useAsyncRetry(async () => createNativeToken(chainId ?? currentChainId), [currentChainId, chainId])
-}
diff --git a/packages/web3-shared/evm/hooks/useNetworkType.ts b/packages/web3-shared/evm/hooks/useNetworkType.ts
deleted file mode 100644
index 4e306ee7fe36..000000000000
--- a/packages/web3-shared/evm/hooks/useNetworkType.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import { useWeb3StateContext } from '../context'
-
-export function useNetworkType() {
-    return useWeb3StateContext().networkType
-}
diff --git a/packages/web3-shared/evm/hooks/useProviderType.ts b/packages/web3-shared/evm/hooks/useProviderType.ts
deleted file mode 100644
index 6d1ccf3a0892..000000000000
--- a/packages/web3-shared/evm/hooks/useProviderType.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import { useWeb3StateContext } from '../context'
-
-export function useProviderType() {
-    return useWeb3StateContext().providerType
-}
diff --git a/packages/web3-shared/evm/hooks/useResolveENS.ts b/packages/web3-shared/evm/hooks/useResolveENS.ts
deleted file mode 100644
index df7b99a8bf6b..000000000000
--- a/packages/web3-shared/evm/hooks/useResolveENS.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { useAsyncRetry } from 'react-use'
-import { ChainId } from '../types'
-import { useWeb3 } from './useWeb3'
-
-export function useResolveENS(name: string) {
-    const web3 = useWeb3({ chainId: ChainId.Mainnet })
-    return useAsyncRetry(async () => {
-        if (!name) return
-        return web3.eth.ens.getAddress(name)
-    }, [web3, name])
-}
diff --git a/packages/web3-shared/evm/hooks/useSocket.ts b/packages/web3-shared/evm/hooks/useSocket.ts
deleted file mode 100644
index 60ed5774c8cc..000000000000
--- a/packages/web3-shared/evm/hooks/useSocket.ts
+++ /dev/null
@@ -1,65 +0,0 @@
-import { useWeb3Context } from '../context'
-import { useAsyncRetry } from 'react-use'
-import type { NotifyFn, RequestMessage } from '@masknet/web3-shared-base'
-import { v4 as uuid } from 'uuid'
-import { useCallback, useEffect, useState } from 'react'
-
-type SocketMessage = Omit<RequestMessage, 'notify'>
-
-export enum SocketState {
-    init = 'init',
-    sent = 'sent',
-    receiving = 'receiving',
-    done = 'done',
-}
-
-export const useSocket = <T>(message: SocketMessage) => {
-    const { providerSocket } = useWeb3Context()
-    const [data, setData] = useState<T[]>([])
-    const [state, setState] = useState(SocketState.init)
-    const [error, setError] = useState<unknown>()
-    const [id, setId] = useState(uuid)
-    const { value: socket, loading } = useAsyncRetry(() => providerSocket, [])
-    const requestId = `${message.id}_${id}`
-
-    useEffect(() => {
-        setState(SocketState.init)
-        setData([])
-        setError(undefined)
-    }, [message.id])
-
-    const { retry } = useAsyncRetry(async () => {
-        if (!socket || !message.id || loading) return
-        const notifyUpdatedHook: NotifyFn = (info) => {
-            if (requestId !== info.id) return
-            if (!info.done) {
-                setState(SocketState.receiving)
-            } else {
-                // workaround for get data from cache
-                setTimeout(() => setState(SocketState.done), 0)
-            }
-            setError(info.error)
-            if (!socket) return
-            setData(socket.getResult<T>(requestId))
-        }
-
-        socket.send({ ...message, notify: notifyUpdatedHook, id: requestId })
-        // Get data from cache
-        setData(socket.getResult<T>(requestId))
-        setState(SocketState.sent)
-    }, [requestId, socket, loading])
-
-    const handleRetry = useCallback(() => {
-        setId(uuid())
-        setState(SocketState.sent)
-        setData([])
-        retry()
-    }, [retry])
-
-    return {
-        data: data ?? [],
-        state,
-        error,
-        retry: handleRetry,
-    }
-}
diff --git a/packages/web3-shared/evm/hooks/useTokensBalance.ts b/packages/web3-shared/evm/hooks/useTokensBalance.ts
deleted file mode 100644
index 263b47242aac..000000000000
--- a/packages/web3-shared/evm/hooks/useTokensBalance.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import { useAsyncRetry } from 'react-use'
-import { numberToHex } from 'web3-utils'
-import { EMPTY_LIST } from '@masknet/shared-base'
-import { useBalanceCheckerContract } from '../contracts/useBalanceChecker'
-import { useAccount } from './useAccount'
-import { useChainId } from './useChainId'
-import type { ChainId } from '../types'
-
-/**
- * Fetch balance of multiple tokens from chain
- * @param listOfAddress
- * @param targetChainId
- */
-export function useTokensBalance(listOfAddress: string[], targetChainId?: ChainId) {
-    const currentChainId = useChainId()
-    const chainId = targetChainId ?? currentChainId
-    const account = useAccount()
-    const balanceCheckerContract = useBalanceCheckerContract(chainId)
-
-    return useAsyncRetry(async () => {
-        if (!account || !balanceCheckerContract || !listOfAddress.length) return EMPTY_LIST
-        return balanceCheckerContract.methods.balances([account], listOfAddress).call({
-            // cannot check the sender's balance in the same contract
-            from: undefined,
-            chainId: numberToHex(chainId),
-        })
-    }, [chainId, account, listOfAddress.join(), balanceCheckerContract])
-}
diff --git a/packages/web3-shared/evm/hooks/useTransactionState.ts b/packages/web3-shared/evm/hooks/useTransactionState.ts
deleted file mode 100644
index 7d1dd6ef0fe6..000000000000
--- a/packages/web3-shared/evm/hooks/useTransactionState.ts
+++ /dev/null
@@ -1,45 +0,0 @@
-import { useReducer } from 'react'
-import type { TransactionReceipt } from 'web3-core'
-import { TransactionStateType } from '../types'
-import { isNextStateAvailable } from '../utils'
-
-export type TransactionState =
-    | {
-          type: TransactionStateType.UNKNOWN
-      }
-    | {
-          type: TransactionStateType.WAIT_FOR_CONFIRMING
-
-          // @deprecated don't depend on this property will be removed in the future
-          hash?: string
-      }
-    | {
-          type: TransactionStateType.HASH
-          hash: string
-      }
-    | {
-          type: TransactionStateType.RECEIPT
-          receipt: TransactionReceipt
-      }
-    | {
-          type: TransactionStateType.CONFIRMED
-          no: number
-          receipt: TransactionReceipt
-          reason?: string
-      }
-    | {
-          type: TransactionStateType.FAILED
-          error: Error & { code?: number }
-          receipt?: TransactionReceipt
-      }
-
-function txStateReducer(state: TransactionState, nextState: TransactionState) {
-    const allowed = nextState.type === TransactionStateType.UNKNOWN || isNextStateAvailable(state.type, nextState.type)
-    return allowed ? nextState : state
-}
-
-export function useTransactionState() {
-    return useReducer(txStateReducer, {
-        type: TransactionStateType.UNKNOWN,
-    })
-}
diff --git a/packages/web3-shared/evm/hooks/useTransactions.ts b/packages/web3-shared/evm/hooks/useTransactions.ts
deleted file mode 100644
index b94c1c99c893..000000000000
--- a/packages/web3-shared/evm/hooks/useTransactions.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import { useWeb3Context, useWeb3State } from '../context'
-import { useAsyncRetry } from 'react-use'
-import { ChainId, FungibleAssetProvider } from '../types'
-import { unreachable } from '@dimensiondev/kit'
-import { getNetworkTypeFromChainId } from '../utils'
-
-export function useTransactions(address: string, page?: number, size?: number, chainId?: ChainId) {
-    const { getTransactionList } = useWeb3Context()
-    const { portfolioProvider, chainId: currentChainId } = useWeb3State()
-
-    return useAsyncRetry(async () => {
-        const network = getNetworkTypeFromChainId(chainId || currentChainId)
-
-        if (!address || !network) {
-            return {
-                transactions: [],
-                hasNextPage: false,
-            }
-        }
-
-        switch (portfolioProvider) {
-            case FungibleAssetProvider.DEBANK:
-            case FungibleAssetProvider.ZERION:
-                return getTransactionList(address.toLowerCase(), network, portfolioProvider, page, size)
-            default:
-                unreachable(portfolioProvider)
-        }
-    }, [address, chainId, portfolioProvider, page, size])
-}
diff --git a/packages/web3-shared/evm/hooks/useTrustERC20TokenCallback.ts b/packages/web3-shared/evm/hooks/useTrustERC20TokenCallback.ts
deleted file mode 100644
index c1b847712525..000000000000
--- a/packages/web3-shared/evm/hooks/useTrustERC20TokenCallback.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { useWeb3Context } from '../context'
-import { useAsyncFn } from 'react-use'
-import type { AsyncFnReturn } from 'react-use/lib/useAsyncFn'
-import type { ERC20TokenDetailed } from '../types'
-
-export function useTrustERC20TokenCallback(): AsyncFnReturn<
-    (address: string, token: ERC20TokenDetailed) => Promise<void>
-> {
-    const { trustToken } = useWeb3Context()
-
-    return useAsyncFn(
-        async (address: string, token: ERC20TokenDetailed) => {
-            await trustToken(address, token)
-        },
-        [trustToken],
-    )
-}
diff --git a/packages/web3-shared/evm/hooks/useTrustedERC20Tokens.ts b/packages/web3-shared/evm/hooks/useTrustedERC20Tokens.ts
deleted file mode 100644
index a92f2812b7b7..000000000000
--- a/packages/web3-shared/evm/hooks/useTrustedERC20Tokens.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { useWallet } from './useWallet'
-import { useERC20Tokens } from './useERC20Tokens'
-import { formatEthereumAddress } from '../utils'
-
-export function useTrustedERC20Tokens() {
-    const wallet = useWallet()
-    const tokens = useERC20Tokens()
-
-    if (!wallet) return []
-    return tokens.filter(
-        (x) =>
-            wallet.erc20_token_whitelist.has(formatEthereumAddress(x.address)) &&
-            !wallet.erc20_token_blacklist.has(formatEthereumAddress(x.address)),
-    )
-}
diff --git a/packages/web3-shared/evm/hooks/useWallet.ts b/packages/web3-shared/evm/hooks/useWallet.ts
deleted file mode 100644
index 2e8603ba92d3..000000000000
--- a/packages/web3-shared/evm/hooks/useWallet.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { useWeb3StateContext } from '../context'
-import { currySameAddress } from '../utils'
-import { useAccount } from './useAccount'
-
-export function useWallet() {
-    const account = useAccount()
-    const { wallets } = useWeb3StateContext()
-    return account ? wallets.find(currySameAddress(account)) : undefined
-}
diff --git a/packages/web3-shared/evm/hooks/useWalletPrimary.ts b/packages/web3-shared/evm/hooks/useWalletPrimary.ts
deleted file mode 100644
index aa44a94ca5bf..000000000000
--- a/packages/web3-shared/evm/hooks/useWalletPrimary.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { useWeb3StateContext } from '../context'
-
-export function useWalletPrimary() {
-    const { walletPrimary } = useWeb3StateContext()
-    return walletPrimary
-}
diff --git a/packages/web3-shared/evm/hooks/useWallets.ts b/packages/web3-shared/evm/hooks/useWallets.ts
deleted file mode 100644
index 4c7ad47325e8..000000000000
--- a/packages/web3-shared/evm/hooks/useWallets.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { useAccount } from './useAccount'
-import { useWeb3StateContext } from '../context'
-import { ProviderType } from '../types'
-import { currySameAddress } from '../utils'
-
-export function useWallets(type?: ProviderType) {
-    const account = useAccount()
-    const { providerType, wallets } = useWeb3StateContext()
-    if (type === ProviderType.MaskWallet) return wallets.filter((x) => x.hasStoredKeyInfo)
-    if (type === providerType) return wallets.filter(currySameAddress(account))
-    if (type) return []
-    return wallets
-}
diff --git a/packages/web3-shared/evm/hooks/useWeb3.ts b/packages/web3-shared/evm/hooks/useWeb3.ts
deleted file mode 100644
index dac97cb76025..000000000000
--- a/packages/web3-shared/evm/hooks/useWeb3.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import Web3 from 'web3'
-import { useMemo } from 'react'
-import { useWeb3Provider } from './useWeb3Provider'
-import type { RequestOptions, SendOverrides } from '../types'
-
-export function useWeb3(overrides?: SendOverrides, options?: RequestOptions) {
-    const provider = useWeb3Provider(overrides, options)
-    return useMemo(() => new Web3(provider), [provider])
-}
diff --git a/packages/web3-shared/evm/hooks/useWeb3Provider.ts b/packages/web3-shared/evm/hooks/useWeb3Provider.ts
deleted file mode 100644
index 08458f4e5239..000000000000
--- a/packages/web3-shared/evm/hooks/useWeb3Provider.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { useMemo } from 'react'
-import { useWeb3Context } from '../context'
-import type { RequestOptions, SendOverrides } from '../types'
-import { createExternalProvider } from '../utils'
-
-export function useWeb3Provider(overrides?: SendOverrides, options?: RequestOptions) {
-    const { request, getSendOverrides, getRequestOptions } = useWeb3Context()
-    return useMemo(() => {
-        return createExternalProvider(
-            request,
-            () => ({
-                ...getSendOverrides?.(),
-                ...overrides,
-            }),
-            () => ({
-                ...getRequestOptions?.(),
-                ...options,
-            }),
-        )
-    }, [request, getSendOverrides, getRequestOptions, JSON.stringify(overrides), JSON.stringify(options)])
-}
diff --git a/packages/web3-shared/evm/index.ts b/packages/web3-shared/evm/index.ts
index ef4f0cd29249..922f74c341fd 100644
--- a/packages/web3-shared/evm/index.ts
+++ b/packages/web3-shared/evm/index.ts
@@ -1,8 +1,4 @@
 export * from './types'
-export * from './hooks'
 export * from './utils'
 export * from './pipes'
-export * from './context'
 export * from './constants'
-export * from './contracts'
-export * as FortmaticProvider from './providers/Fortmatic'
diff --git a/packages/web3-shared/evm/package.json b/packages/web3-shared/evm/package.json
index a0b32a33b7a4..18a67b4ecd70 100644
--- a/packages/web3-shared/evm/package.json
+++ b/packages/web3-shared/evm/package.json
@@ -10,13 +10,15 @@
   },
   "types": "./dist/index.d.ts",
   "dependencies": {
+    "@dimensiondev/holoflows-kit": "^0.9.0-20220520093249-0870919",
     "@ensdomains/address-encoder": "^0.2.6",
     "@masknet/shared-base": "workspace:*",
     "@masknet/web3-constants": "workspace:*",
     "@masknet/web3-contracts": "workspace:*",
     "@masknet/web3-shared-base": "workspace:*",
-    "@types/ethereum-blockies": "^0.1.0",
-    "@types/punycode": "^2.1.0",
+    "@toruslabs/torus-embed": "^1.22.6",
+    "@walletconnect/client": "^1.7.5",
+    "@walletconnect/qrcode-modal": "^1.7.5",
     "bignumber.js": "9.0.2",
     "ethereum-blockies": "^0.1.1",
     "fortmatic": "^2.2.1",
@@ -30,9 +32,13 @@
     "wallet.ts": "^1.0.1",
     "web3": "1.7.3",
     "web3-core-helpers": "1.7.3",
+    "web3-eth-contract": "1.7.3",
     "web3-utils": "1.7.3"
   },
   "devDependencies": {
+    "@masknet/injected-script": "*",
+    "@types/ethereum-blockies": "^0.1.0",
+    "@types/punycode": "^2.1.0",
     "@types/use-subscription": "^1.0.0",
     "@types/uuid": "^8.3.4"
   }
diff --git a/packages/web3-shared/evm/pipes/index.ts b/packages/web3-shared/evm/pipes/index.ts
index 55155e72081a..ef9b6be0ac00 100644
--- a/packages/web3-shared/evm/pipes/index.ts
+++ b/packages/web3-shared/evm/pipes/index.ts
@@ -1,194 +1,6 @@
 import urlcat from 'urlcat'
-import { unreachable } from '@dimensiondev/kit'
-import {
-    ChainId,
-    ERC20Token,
-    ERC721Token,
-    NativeToken,
-    NetworkType,
-    ProviderType,
-    NonFungibleAssetProvider,
-    ERC721TokenDetailed,
-} from '../types'
-import { getChainDetailed, createLookupTableResolver } from '../utils'
-
-export const resolveProviderName = createLookupTableResolver<ProviderType, string>(
-    {
-        [ProviderType.MaskWallet]: 'Mask Network',
-        [ProviderType.MetaMask]: 'MetaMask',
-        [ProviderType.WalletConnect]: 'WalletConnect',
-        [ProviderType.CustomNetwork]: 'CustomNetwork',
-        [ProviderType.Coin98]: 'Coin98',
-        [ProviderType.WalletLink]: 'Coinbase',
-        [ProviderType.MathWallet]: 'MathWallet',
-        [ProviderType.Fortmatic]: 'Fortmatic',
-    },
-    'Unknown Network',
-)
-
-export const resolveProviderShortenLink = createLookupTableResolver<ProviderType, string>(
-    {
-        [ProviderType.MaskWallet]: 'Mask.io',
-        [ProviderType.MetaMask]: 'Metamask.io',
-        [ProviderType.WalletConnect]: 'Walletconnect.com',
-        [ProviderType.CustomNetwork]: 'Website',
-        [ProviderType.Coin98]: 'Coin98.com',
-        [ProviderType.WalletLink]: 'Walletlink.org',
-        [ProviderType.MathWallet]: 'Mathwallet.org',
-        [ProviderType.Fortmatic]: 'Fortmatic.com',
-    },
-    'website',
-)
-
-export const resolveProviderHomeLink = createLookupTableResolver<ProviderType, string>(
-    {
-        [ProviderType.MaskWallet]: 'https://mask.io',
-        [ProviderType.MetaMask]: 'https://metamask.io',
-        [ProviderType.WalletConnect]: 'https://walletconnect.com',
-        [ProviderType.CustomNetwork]: '',
-        [ProviderType.Coin98]: 'https://coin98.com',
-        [ProviderType.WalletLink]: 'https://walletlink.org',
-        [ProviderType.MathWallet]: 'https://mathwallet.org',
-        [ProviderType.Fortmatic]: 'https://fortmatic.com',
-    },
-    '',
-)
-
-export const resolveProviderDownloadLink = createLookupTableResolver<ProviderType, string>(
-    {
-        [ProviderType.MaskWallet]: 'https://mask.io/download-links',
-        [ProviderType.MetaMask]: 'https://metamask.io/download.html',
-        [ProviderType.WalletConnect]: '',
-        [ProviderType.Coin98]: 'https://coin98insights.com/introduction-to-coin98-wallet-extension',
-        [ProviderType.WalletLink]: 'https://wallet.coinbase.com/',
-        [ProviderType.MathWallet]: 'https://mathwallet.org/en-us/#extension',
-        [ProviderType.Fortmatic]: '',
-        [ProviderType.CustomNetwork]: '',
-    },
-    '',
-)
-
-export const resolveProviderInjectedKey = createLookupTableResolver<
-    ProviderType,
-    'isMaskWallet' | 'isMetaMask' | 'isMathWallet' | 'isCoin98' | 'isWalletLink' | ''
->(
-    {
-        [ProviderType.MaskWallet]: 'isMaskWallet',
-        [ProviderType.MetaMask]: 'isMetaMask',
-        [ProviderType.WalletConnect]: '',
-        [ProviderType.MathWallet]: 'isMathWallet',
-        [ProviderType.Coin98]: 'isCoin98',
-        [ProviderType.WalletLink]: 'isWalletLink',
-        [ProviderType.Fortmatic]: '',
-        [ProviderType.CustomNetwork]: '',
-    },
-    '',
-)
-
-export const resolveNetworkAddressPrefix = createLookupTableResolver<NetworkType, string>(
-    {
-        [NetworkType.Ethereum]: 'ethereum',
-        [NetworkType.Binance]: 'binance',
-        [NetworkType.Polygon]: 'polygon',
-        [NetworkType.Arbitrum]: 'arbitrum',
-        [NetworkType.xDai]: 'xdai',
-        [NetworkType.Avalanche]: 'avalanche',
-        [NetworkType.Celo]: 'celo',
-        [NetworkType.Fantom]: 'fantom',
-        [NetworkType.Aurora]: 'Aurora',
-        [NetworkType.Conflux]: 'conflux',
-        [NetworkType.Harmony]: 'harmony',
-        [NetworkType.Boba]: 'boba',
-        [NetworkType.Fuse]: 'fuse',
-        [NetworkType.Metis]: 'metis',
-        [NetworkType.Optimistic]: 'optimistic',
-    },
-    'ethereum',
-)
-
-export const resolveNetworkName = createLookupTableResolver<NetworkType, string>(
-    {
-        [NetworkType.Ethereum]: 'Ethereum',
-        [NetworkType.Binance]: 'Binance Smart Chain',
-        [NetworkType.Polygon]: 'Polygon',
-        [NetworkType.Arbitrum]: 'Arbitrum',
-        [NetworkType.xDai]: 'xDai',
-        [NetworkType.Avalanche]: 'Avalanche',
-        [NetworkType.Celo]: 'Celo',
-        [NetworkType.Fantom]: 'Fantom',
-        [NetworkType.Aurora]: 'Aurora',
-        [NetworkType.Conflux]: 'Conflux',
-        [NetworkType.Harmony]: 'Harmony',
-        [NetworkType.Boba]: 'Boba',
-        [NetworkType.Fuse]: 'Fuse',
-        [NetworkType.Metis]: 'Metis',
-        [NetworkType.Optimistic]: 'Optimistic',
-    },
-    'Unknown',
-)
-
-export function resolveChainName(chainId: ChainId) {
-    const chainDetailed = getChainDetailed(chainId)
-    return chainDetailed?.name ?? 'Unknown'
-}
-
-export function resolveChainFullName(chainId: ChainId) {
-    const chainDetailed = getChainDetailed(chainId)
-    return chainDetailed?.fullName ?? 'Unknown'
-}
-
-export const resolveChainColor = createLookupTableResolver<ChainId, string>(
-    {
-        [ChainId.Mainnet]: 'rgb(28, 104, 243)',
-        [ChainId.Ropsten]: 'rgb(255, 65, 130)',
-        [ChainId.Kovan]: 'rgb(133, 89,255)',
-        [ChainId.Rinkeby]: 'rgb(133, 89, 255)',
-        [ChainId.Gorli]: 'rgb(48, 153, 242)',
-        [ChainId.BSC]: 'rgb(240, 185, 10)',
-        [ChainId.BSCT]: 'rgb(240, 185, 10)',
-        [ChainId.Matic]: 'rgb(119, 62, 225)',
-        [ChainId.Mumbai]: 'rgb(130, 71, 229)',
-        [ChainId.Arbitrum]: 'rgb(36, 150, 238)',
-        [ChainId.Arbitrum_Rinkeby]: 'rgb(36, 150, 238)',
-        [ChainId.xDai]: 'rgb(73, 169, 166)',
-        [ChainId.Avalanche]: 'rgb(232, 65, 66)',
-        [ChainId.Avalanche_Fuji]: 'rgb(232, 65, 66)',
-        [ChainId.Celo]: 'rgb(53, 208, 127)',
-        [ChainId.Fantom]: 'rgb(19, 181, 236)',
-        [ChainId.Aurora]: 'rgb(112, 212, 74)',
-        [ChainId.Conflux]: 'rgb(24, 163, 138)',
-        [ChainId.Harmony]: 'rgb(48, 153, 242)',
-        [ChainId.Harmony_Test]: 'rgb(48, 153, 242)',
-        [ChainId.Aurora_Testnet]: 'rgb(112, 212, 74)',
-        [ChainId.Fuse]: 'rgb(255 255 255)',
-        [ChainId.Boba]: 'rgb(255 255 255)',
-        [ChainId.Metis]: 'rgb(255 255 255)',
-        [ChainId.Optimistic]: 'rgb(255 255 255)',
-    },
-    'rgb(214, 217, 220)',
-)
-
-export function resolveLinkOnExplorer(chainId: ChainId) {
-    const chainDetailed = getChainDetailed(chainId)
-    if (!chainDetailed) return ''
-    return chainDetailed.explorers?.[0]?.url ?? chainDetailed.infoURL
-}
-
-export function resolveTransactionLinkOnExplorer(chainId: ChainId, tx: string) {
-    return urlcat(resolveLinkOnExplorer(chainId), '/tx/:tx', { tx })
-}
-
-export function resolveTokenLinkOnExplorer({ chainId, address }: NativeToken | ERC20Token | ERC721Token) {
-    return urlcat(resolveLinkOnExplorer(chainId), '/token/:address', { address })
-}
-
-export function resolveAddressLinkOnExplorer(chainId: ChainId, address: string): string {
-    return urlcat(resolveLinkOnExplorer(chainId), '/address/:address', { address })
-}
-
-export function resolveBlockLinkOnExplorer(chainId: ChainId, block: string): string {
-    return urlcat(resolveLinkOnExplorer(chainId), '/block/:block', { block })
-}
+import { ChainId } from '../types'
+import { SourceType } from '@masknet/web3-shared-base'
 
 // TODO check ipfs inside before resolving
 export function resolveIPFSLink(ipfs: string): string {
@@ -200,63 +12,38 @@ export function resolveIPFSLinkFromURL(url: string): string {
     return resolveIPFSLink(url.replace(/^ipfs:\/\/(ipfs\/)?/, ''))
 }
 
-export function resolveDomainLink(domain?: string) {
-    if (!domain) return ''
-    return urlcat('https://app.ens.domains/name/:domain/details', { domain })
-}
-
-export function resolveCollectibleProviderLink(chainId: ChainId, provider: NonFungibleAssetProvider) {
+export function resolveCollectibleAssetLink(chainId: ChainId, provider: SourceType) {
     switch (provider) {
-        case NonFungibleAssetProvider.OPENSEA:
-            if (chainId === ChainId.Rinkeby) return 'https://testnets.opensea.io'
-            return 'https://opensea.io'
-        case NonFungibleAssetProvider.RARIBLE:
-            return 'https://rarible.com'
-        case NonFungibleAssetProvider.NFTSCAN:
-            return 'https://nftscan.com'
-        case NonFungibleAssetProvider.ZORA:
-            return 'https://zora.co'
-        default:
-            unreachable(provider)
-    }
-}
-
-export function resolveCollectibleAssetLink(chainId: ChainId, provider: NonFungibleAssetProvider) {
-    switch (provider) {
-        case NonFungibleAssetProvider.OPENSEA:
+        case SourceType.OpenSea:
             if (chainId === ChainId.Rinkeby) return 'https://testnets.opensea.io/assets'
             if (chainId === ChainId.Matic) return 'https://opensea.io/assets/matic'
             return 'https://opensea.io/assets'
-        case NonFungibleAssetProvider.RARIBLE:
+        case SourceType.Rarible:
             return ''
-        case NonFungibleAssetProvider.NFTSCAN:
+        case SourceType.NFTScan:
             return ''
-        case NonFungibleAssetProvider.ZORA:
+        case SourceType.Zora:
             return ''
         default:
-            unreachable(provider)
+            return ''
     }
 }
 
-export function resolveCollectibleLink(
-    chainId: ChainId,
-    provider: NonFungibleAssetProvider,
-    { contractDetailed: { address }, tokenId }: ERC721TokenDetailed,
-) {
+export function resolveCollectibleLink(chainId: ChainId, provider: SourceType, address: string, tokenId: string) {
     switch (provider) {
-        case NonFungibleAssetProvider.OPENSEA:
+        case SourceType.OpenSea:
             return urlcat(resolveCollectibleAssetLink(chainId, provider), '/:address/:tokenId', {
                 address,
                 tokenId,
             })
-        case NonFungibleAssetProvider.RARIBLE:
+        case SourceType.Rarible:
             return ''
-        case NonFungibleAssetProvider.NFTSCAN:
+        case SourceType.NFTScan:
             return ''
-        case NonFungibleAssetProvider.ZORA:
+        case SourceType.Zora:
             return ''
         default:
-            unreachable(provider)
+            return ''
     }
 }
 
diff --git a/packages/web3-shared/evm/providers/Fortmatic.ts b/packages/web3-shared/evm/providers/Fortmatic.ts
deleted file mode 100644
index 46005a79b7f6..000000000000
--- a/packages/web3-shared/evm/providers/Fortmatic.ts
+++ /dev/null
@@ -1,61 +0,0 @@
-import Fortmatic from 'fortmatic'
-import { first } from 'lodash-unified'
-import type { FmProvider } from 'fortmatic/dist/cjs/src/core/fm-provider'
-import { ChainId } from '../types'
-import { createLookupTableResolver } from '../utils'
-import { getRPCConstants } from '../constants'
-
-// #region create in-page fortmatic provider
-
-/* spell-checker: disable-next-line */
-const TEST_KEY = 'pk_test_D9EAF9A8ACEC9627'
-
-/* spell-checker: disable-next-line */
-const LIVE_KEY = 'pk_live_331BE8AA24445030'
-
-export type ChainIdFortmatic =
-    | ChainId.Mainnet
-    | ChainId.BSC
-    | ChainId.Matic
-    | ChainId.Rinkeby
-    | ChainId.Ropsten
-    | ChainId.Kovan
-
-const resolveAPI_Key = createLookupTableResolver<ChainIdFortmatic, string>(
-    {
-        [ChainId.Mainnet]: LIVE_KEY,
-        [ChainId.BSC]: LIVE_KEY,
-        [ChainId.Matic]: LIVE_KEY,
-        [ChainId.Rinkeby]: TEST_KEY,
-        [ChainId.Ropsten]: TEST_KEY,
-        [ChainId.Kovan]: TEST_KEY,
-    },
-    '',
-)
-
-const providerPool = new Map<ChainId, FmProvider>()
-
-export function createFortmatic(chainId: ChainIdFortmatic) {
-    const rpcUrl = first(getRPCConstants(chainId).RPC)
-    if (!rpcUrl) throw new Error('Failed to create provider.')
-    return new Fortmatic(resolveAPI_Key(chainId), { chainId, rpcUrl })
-}
-
-export function createProvider(chainId: ChainIdFortmatic) {
-    if (providerPool.has(chainId)) return providerPool.get(chainId)!
-
-    const fm = createFortmatic(chainId)
-    const provider = fm.getProvider()
-    providerPool.set(chainId, provider)
-    return provider
-}
-
-export function login(chainId: ChainIdFortmatic) {
-    const provider = createProvider(chainId)
-    return provider.enable()
-}
-
-export function logout(chainId: ChainIdFortmatic) {
-    const fm = createFortmatic(chainId)
-    return fm.user.logout()
-}
diff --git a/packages/web3-shared/evm/types/index.ts b/packages/web3-shared/evm/types/index.ts
index fc07b546a044..5c1660d23d63 100644
--- a/packages/web3-shared/evm/types/index.ts
+++ b/packages/web3-shared/evm/types/index.ts
@@ -1,29 +1,21 @@
-import type { TransactionConfig as TransactionConfig_ } from 'web3-core'
+/// <reference types="web3" />
+
+import type EVM_Web3 from 'web3'
+import type {
+    RequestArguments,
+    Transaction as Web3Transaction,
+    TransactionReceipt as Web3TransactionReceipt,
+    TransactionConfig as TransactionConfig_,
+} from 'web3-core'
 import type { NonPayableTransactionObject, PayableTransactionObject } from '@masknet/web3-contracts/types/types'
-
-export interface SendOverrides {
-    chainId?: ChainId
-    account?: string
-    providerType?: ProviderType
-}
-
-export interface RequestOptions {
-    popupsWindow?: boolean
-}
-
-export enum CurrencyType {
-    USD = 'usd',
-}
+import type { JsonRpcPayload, JsonRpcResponse } from 'web3-core-helpers'
 
 export type ChainIdOptionalRecord<T> = { [k in ChainId]?: T }
 export type ChainIdRecord<T> = { [k in ChainId]: T }
 
-export type Primitive = string | number | boolean | symbol | undefined | null | bigint
-
-export type Web3Constants = Record<string, { [K in ChainId]: Primitive | Primitive[] }>
-
 // Learn more about ethereum ChainId https://github.com/ethereum/EIPs/blob/master/EIPS/eip-155.md
 export enum ChainId {
+    // Mainnet
     Mainnet = 1,
     Ropsten = 3,
     Rinkeby = 4,
@@ -79,29 +71,14 @@ export enum ChainId {
     Conflux = 1030,
 }
 
-export enum LockStatus {
-    INIT = 0,
-    UNLOCK = 1,
-    LOCKED = 2,
-}
-
+/**
+ * @deprecated
+ */
 export interface Wallet {
     /** User define wallet name. Default address.prefix(6) */
     name: string
     /** The address of wallet */
     address: string
-    /** A list of trusted ERC20 contract address */
-    erc20_token_whitelist: Set<string>
-    /** A list of untrusted ERC20 contract address */
-    erc20_token_blacklist: Set<string>
-    /** A list of trusted ERC721 contract address */
-    erc721_token_whitelist: Set<string>
-    /** A list of untrusted ERC721 contract address */
-    erc721_token_blacklist: Set<string>
-    /** A list of trusted ERC1155 contract address */
-    erc1155_token_whitelist: Set<string>
-    /** A list of untrusted ERC1155 contract address */
-    erc1155_token_blacklist: Set<string>
     /** yep: removable, nope: unremovable */
     configurable: boolean
     /** yep: Mask Wallet, nope: External Wallet */
@@ -110,193 +87,27 @@ export interface Wallet {
     hasDerivationPath: boolean
 }
 
-// #region Ether
-export interface NativeToken {
-    type: EthereumTokenType.Native
-    address: string
-    chainId: ChainId
+export enum SchemaType {
+    Native = 1,
+    ERC20 = 2,
+    ERC721 = 3,
+    ERC1155 = 4,
 }
 
-export interface NativeTokenDetailed extends NativeToken {
-    name: string
-    symbol: string
-    decimals: number
-    logoURI?: string
-}
-// #endregion
-
-// #region ERC20
-export interface ERC20Token {
-    type: EthereumTokenType.ERC20
-    address: string
-    chainId: ChainId
-}
-
-export interface ERC20TokenDetailed extends ERC20Token {
-    name?: string
-    symbol?: string
-    decimals: number
-    logoURI?: string[]
-}
-// #endregion
-
-// #region ERC721
-export interface ERC721Token {
-    type: EthereumTokenType.ERC721
-    address: string
-    chainId: ChainId
-}
-
-export interface ERC721ContractDetailed extends ERC721Token {
-    name: string
-    symbol: string
-    baseURI?: string
-    iconURL?: string
-}
-
-export interface ERC721TokenInfo {
-    name?: string
-    description?: string
-    tokenURI?: string
-    mediaUrl?: string
-    imageURL?: string
-    owner?: string
-    // loading tokenURI
-    hasTokenDetailed?: boolean
-}
-
-export interface ERC721TokenDetailed {
-    tokenId: string
-    info: ERC721TokenInfo
-    contractDetailed: ERC721ContractDetailed
-    collection?: {
-        name: string
-        image?: string
-        slug: string
-    }
-}
-
-export interface ERC721TokenRecordInDatabase extends ERC721TokenDetailed {
-    record_id: string
-}
-
-export interface ERC721TokenCollectionInfo {
-    name: string
-    chainId?: ChainId
-    iconURL?: string
-    slug: string
-    address: string
-    addresses?: string[]
-    symbol: string
-    balance: number
-}
-
-// #endregion
-
-// #region ERC1155
-export interface ERC1155Token {
-    type: EthereumTokenType.ERC1155
-    address: string
-    chainId: ChainId
-}
-
-export interface ERC1155TokenDetailed extends ERC1155Token {
-    name: string
-    tokenId: string
-    uri?: string
-}
-
-export interface ERC1155TokenAssetDetailed extends ERC1155TokenDetailed {
-    asset?: {
-        name?: string
-        decimals?: string
-        description?: string
-        image?: string
-        properties?: Record<string, string | any[] | Record<string, any>>
-    }
-}
-// #endregion
-
-// #region fungible token
-export type FungibleToken = NativeToken | ERC20Token
-export type FungibleTokenDetailed = NativeTokenDetailed | ERC20TokenDetailed
-// #endregion
-
-// #region non-fungible token
-export type NonFungibleToken = ERC721Token | ERC1155Token
-export type NonFungibleTokenDetailed = ERC721TokenDetailed | ERC1155TokenDetailed
-// #endregion
-
-// #region token out of mask
-export type FungibleTokenOutMask = Omit<FungibleTokenDetailed, 'chainId'> & {
-    chain_id: ChainId
-}
-
-export type ERC721TokenOutMask = Omit<ERC721TokenDetailed, 'chainId'> & {
-    chain_id: ChainId
-}
-// #endregion
-
-interface TokenDetailedMap {
-    [EthereumTokenType.Native]: NativeTokenDetailed
-    [EthereumTokenType.ERC20]: ERC20TokenDetailed
-    [EthereumTokenType.ERC721]: ERC721TokenDetailed
-    [EthereumTokenType.ERC1155]: ERC1155TokenDetailed
-}
-
-interface TokenAssetDetailedMap {
-    [EthereumTokenType.ERC721]: ERC721TokenDetailed
-    [EthereumTokenType.ERC1155]: ERC1155TokenAssetDetailed
-}
-
-export type EthereumTokenDetailedType<T extends EthereumTokenType> = TokenDetailedMap[T]
-
-export type TokenAssetDetailedType<T extends EthereumTokenType.ERC721 | EthereumTokenType.ERC1155> =
-    TokenAssetDetailedMap[T]
-
-// Learn more: https://eips.ethereum.org/EIPS/eip-747
-export interface EthereumAssetDetailed {
-    type: string // ERC20
-    options: {
-        address: string
-        symbol?: string
-        decimals?: number
-        image?: string
-    }
-}
-export interface EthereumChainDetailed {
-    chainId: string // A 0x-prefixed hexadecimal string
-    chainName: string
-    nativeCurrency: {
-        name: string
-        symbol: string // 2-6 characters long
-        decimals: number
-    }
-    rpcUrls: string[]
-    blockExplorerUrls: string[]
-}
-
-export enum EthereumTokenType {
-    Native = 0,
-    ERC20 = 1,
-    ERC721 = 2,
-    ERC1155 = 3,
-}
-
-export type EIP1559GasConfig = {
+export interface EIP1559GasConfig {
     gas: number
     maxFeePerGas: number | string
     maxPriorityFeePerGas: number | string
 }
 
-export type PriorEIP1559GasConfig = {
+export interface PriorEIP1559GasConfig {
     gas: number
     gasPrice: number | string
 }
 
 export type GasConfig = EIP1559GasConfig | PriorEIP1559GasConfig
 
-export type GasOptionConfig = {
+export interface GasOptionConfig {
     maxFeePerGas?: number | string
     maxPriorityFeePerGas?: number | string
     gasPrice?: number | string
@@ -308,7 +119,9 @@ export enum EthereumMethodType {
     WATCH_ASSET = 'wallet_watchAsset',
     WATCH_ASSET_LEGACY = 'metamask_watchAsset',
     PERSONAL_SIGN = 'personal_sign',
+    // https://eips.ethereum.org/EIPS/eip-3085
     WALLET_ADD_ETHEREUM_CHAIN = 'wallet_addEthereumChain',
+    // https://eips.ethereum.org/EIPS/eip-3326
     WALLET_SWITCH_ETHEREUM_CHAIN = 'wallet_switchEthereumChain',
     ETH_CHAIN_ID = 'eth_chainId',
     ETH_ACCOUNTS = 'eth_accounts',
@@ -317,6 +130,8 @@ export enum EthereumMethodType {
     ETH_SEND_RAW_TRANSACTION = 'eth_sendRawTransaction',
     ETH_GET_CODE = 'eth_getCode',
     ETH_GAS_PRICE = 'eth_gasPrice',
+    ETH_GET_BLOCK_BY_NUMBER = 'eth_getBlockByNumber',
+    ETH_GET_BLOCK_BY_HASH = 'eth_getBlockByHash',
     ETH_BLOCK_NUMBER = 'eth_blockNumber',
     ETH_GET_BALANCE = 'eth_getBalance',
     ETH_GET_TRANSACTION_BY_HASH = 'eth_getTransactionByHash',
@@ -334,165 +149,13 @@ export enum EthereumMethodType {
     ETH_GET_ENCRYPTION_PUBLIC_KEY = 'eth_getEncryptionPublicKey',
 
     // only for mask
-    MASK_GET_TRANSACTION_RECEIPT = 'mask_getTransactionReceipt',
+    MASK_LOGIN = 'MASK_LOGIN',
+    MASK_LOGOUT = 'MASK_LOGOUT',
     MASK_REPLACE_TRANSACTION = 'mask_replaceTransaction',
-    MASK_LOGIN_FORTMATIC = 'mask_loginFortmatic',
-    MASK_LOGOUT_FORTMATIC = 'mask_logoutFortmatic',
-}
-
-export enum EthereumErrorType {
-    ERR_SIGN_TRANSACTION = 'Failed to sign transaction.',
-    ERR_SEND_TRANSACTION = 'Failed to send transaction.',
-    ERR_SIGN_MESSAGE = 'Failed to sign message.',
-}
-
-export type EthereumTransactionConfig = TransactionConfig_ & {
-    // EIP1559
-    maxFeePerGas?: string
-    maxPriorityFeePerGas?: string
-}
-
-// RPC need to be confirmed by the user
-export enum EthereumRpcType {
-    // transaction
-    CANCEL = 'cancel',
-    RETRY = 'retry', // speed up
-
-    // contract interaction
-    SEND_ETHER = 'sendEther',
-    CONTRACT_INTERACTION = 'contractInteraction',
-    CONTRACT_DEPLOYMENT = 'contractDeployment',
-
-    // asset
-    WATCH_ASSET = 'wallet_watchAsset',
-
-    // wallet
-    WALLET_SWITCH_ETHEREUM_CHAIN = 'wallet_switchEthereumChain',
-
-    // sign
-    SIGN = 'eth_sign',
-    SIGN_TYPED_DATA = 'eth_signTypedData_v4',
-
-    // decrypt
-    ETH_DECRYPT = 'eth_decrypt',
-    ETH_GET_ENCRYPTION_PUBLIC_KEY = 'eth_getEncryptionPublicKey',
+    MASK_CONFIRM_TRANSACTION = 'mask_confirmTransaction',
+    MASK_REJECT_TRANSACTION = 'mask_rejectTransaction',
 }
 
-export type EthereumRpcComputed =
-    | {
-          type: EthereumRpcType.CANCEL | EthereumRpcType.RETRY
-
-          /**
-           * The original transaction config
-           */
-          _tx: EthereumTransactionConfig
-      }
-    | {
-          type: EthereumRpcType.SEND_ETHER
-
-          /**
-           * The original transaction config
-           */
-          _tx: EthereumTransactionConfig
-      }
-    | {
-          type: EthereumRpcType.CONTRACT_DEPLOYMENT
-
-          /**
-           * code in bytes
-           */
-          code: string
-
-          /**
-           * The original transaction config
-           */
-          _tx: EthereumTransactionConfig
-      }
-    | {
-          type: EthereumRpcType.CONTRACT_INTERACTION
-
-          /**
-           * the method type name of the invoked contract
-           */
-          name: string
-
-          /**
-           * parameters in an array of bytes (only built-in abis)
-           */
-          parameters?: {
-              [key in string]?: string
-          }
-
-          /**
-           * The original transaction config
-           */
-          _tx: EthereumTransactionConfig
-      }
-    | {
-          type: EthereumRpcType.SIGN
-
-          /**
-           * the sign to address
-           */
-          to: string
-
-          /**
-           * the original message
-           */
-          data: string
-      }
-    | {
-          type: EthereumRpcType.SIGN_TYPED_DATA
-
-          /**
-           * the sign to address
-           */
-          to: string
-
-          /**
-           * typed data
-           */
-          data: any
-      }
-    | {
-          type: EthereumRpcType.ETH_GET_ENCRYPTION_PUBLIC_KEY
-
-          /**
-           * the account address
-           */
-          account: string
-      }
-    | {
-          type: EthereumRpcType.ETH_DECRYPT
-
-          /**
-           * the decrypt to address
-           * Learn more: https://docs.metamask.io/guide/rpc-api.html#eth-decrypt
-           */
-          to: string
-
-          /**
-           * the secret message
-           */
-          secret: string
-      }
-    | {
-          type: EthereumRpcType.WALLET_SWITCH_ETHEREUM_CHAIN
-
-          /**
-           * the chain detailed
-           */
-          chain?: EthereumChainDetailed
-      }
-    | {
-          type: EthereumRpcType.WATCH_ASSET
-
-          /**
-           * the asset detailed
-           */
-          asset: EthereumAssetDetailed
-      }
-
 export enum TransactionEventType {
     TRANSACTION_HASH = 'transactionHash',
     RECEIPT = 'receipt',
@@ -500,14 +163,7 @@ export enum TransactionEventType {
     ERROR = 'error',
 }
 
-export enum TransactionStatusType {
-    NOT_DEPEND = 0,
-    SUCCEED = 1,
-    FAILED = 2,
-    CANCELLED = 3,
-}
-
-export type GasOptions = {
+export interface GasOptions {
     rapid: number
     fast: number
     standard: number
@@ -515,31 +171,6 @@ export type GasOptions = {
     custom: number
 }
 
-export interface Asset {
-    token: FungibleTokenDetailed
-    /**
-     * The chain name of assets
-     */
-    chain: 'eth' | string
-    /**
-     * The total balance of token
-     */
-    balance: string
-    /**
-     * The estimated price
-     */
-    price?: {
-        [key in CurrencyType]: string
-    }
-    /**
-     * The estimated value
-     */
-    value?: {
-        [key in CurrencyType]: string
-    }
-    logoURI?: string
-}
-
 export enum DomainProvider {
     ENS = 'ENS',
     UNS = 'UNS',
@@ -591,47 +222,11 @@ export interface TransactionPair {
     amount: number
 }
 
-export type TransactionGasFee = {
+export interface TransactionGasFee {
     eth: number
     usd: number
 }
 
-export interface Transaction {
-    type: string | undefined
-    id: string
-    timeAt: Date
-    toAddress: string
-    failed: boolean
-    pairs: TransactionPair[]
-    gasFee: TransactionGasFee | undefined
-    transactionType: string
-}
-
-// #region address name
-export enum AddressNameType {
-    ADDRESS = 'ADDRESS',
-    ENS = 'ENS',
-    UNS = 'UNS',
-    DNS = 'DNS',
-    RSS3 = 'RSS3',
-    GUN = 'GUN',
-    THE_GRAPH = 'THE_GRAPH',
-    TWITTER_BLUE = 'TWITTER_BLUE',
-}
-
-export interface AddressName {
-    type: AddressNameType
-    label: string
-    resolvedAddress: string
-}
-// #endregion
-
-export enum GasOption {
-    Low = 'low',
-    Medium = 'medium',
-    High = 'high',
-}
-
 export enum TransactionStateType {
     UNKNOWN = 0,
     /** Wait for external provider */
@@ -672,17 +267,24 @@ export enum ProviderType {
     MetaMask = 'MetaMask',
     WalletConnect = 'WalletConnect',
     Fortmatic = 'Fortmatic',
+    Torus = 'Torus',
     Coin98 = 'Coin98',
     MathWallet = 'MathWallet',
     WalletLink = 'WalletLink',
     CustomNetwork = 'CustomNetwork',
 }
 
+/**
+ * @deprecated use SourceType instead
+ */
 export enum FungibleAssetProvider {
     ZERION = 'Zerion',
     DEBANK = 'Debank',
 }
 
+/**
+ * @deprecated use SourceType instead
+ */
 export enum NonFungibleAssetProvider {
     OPENSEA = 'OpenSea',
     RARIBLE = 'Rarible',
@@ -690,11 +292,72 @@ export enum NonFungibleAssetProvider {
     ZORA = 'Zora',
 }
 
-export interface PriceRecord {
-    [currency: string]: number
-}
+export type TransactionState =
+    | {
+          type: TransactionStateType.UNKNOWN
+      }
+    | {
+          type: TransactionStateType.WAIT_FOR_CONFIRMING
 
-/** Base on response of coingecko's token price API */
-export interface CryptoPrice {
-    [token: string]: PriceRecord
-}
+          // @deprecated don't depend on this property will be removed in the future
+          hash?: string
+      }
+    | {
+          type: TransactionStateType.HASH
+          hash: string
+      }
+    | {
+          type: TransactionStateType.RECEIPT
+          receipt: TransactionReceipt
+      }
+    | {
+          type: TransactionStateType.CONFIRMED
+          no: number
+          receipt: TransactionReceipt
+          reason?: string
+      }
+    | {
+          type: TransactionStateType.FAILED
+          error: Error & { code?: number }
+          receipt?: TransactionReceipt
+      }
+
+export type Web3 = EVM_Web3
+export type Web3Provider = {
+    send(payload: JsonRpcPayload): Promise<JsonRpcResponse>
+    sendAsync(payload: JsonRpcPayload): Promise<JsonRpcResponse>
+    request<T extends unknown>(requestArguments: RequestArguments): Promise<T>
+
+    on(name: 'connect', listener: (connectInfo: { chainId: string }) => void): Web3Provider
+    on(name: 'disconnect', listener: (error: { message: string; code: number; data?: unknown }) => void): Web3Provider
+    on(name: 'chainChanged', listener: (chainId: string) => void): Web3Provider
+    on(name: 'accountsChanged', listener: (accounts: string[]) => void): Web3Provider
+    on(name: 'message', listener: (message: { type: string; data: unknown }) => void): Web3Provider
+    on(name: string, listener: (event: any) => void): Web3Provider
+
+    removeListener(name: string, listener: (event: any) => void): Web3Provider
+}
+export type GasOption = {
+    estimatedSeconds: number
+    // eip1559 only
+    estimatedBaseFee?: string
+    // note: for prior 1559 it means gasPrice
+    suggestedMaxFeePerGas: string
+    suggestedMaxPriorityFeePerGas: string
+}
+export type Signature = string
+export type Block = {
+    hash: string
+    nonce: string
+    timestamp: string
+}
+export type Transaction = TransactionConfig_ & {
+    // CELO
+    feeCurrency?: string // address of the ERC20 contract to use to pay for gas and the gateway fee
+    gatewayFeeRecipient?: string // coinbase address of the full serving the light client's transactions
+    gatewayFee?: string // value paid to the gateway fee recipient, denominated in the fee currency
+}
+export type TransactionReceipt = Web3TransactionReceipt
+export type TransactionDetailed = Web3Transaction
+export type TransactionSignature = string
+export type TransactionParameter = string | undefined
diff --git a/packages/web3-shared/evm/utils/abi.ts b/packages/web3-shared/evm/utils/abi.ts
new file mode 100644
index 000000000000..464fe3a900fb
--- /dev/null
+++ b/packages/web3-shared/evm/utils/abi.ts
@@ -0,0 +1,24 @@
+import type Web3 from 'web3'
+import { AbiOutput, hexToBytes, toAscii } from 'web3-utils'
+
+export function decodeOutputString(web3: Web3, abis: AbiOutput[], output: string) {
+    if (abis.length === 1) return web3.eth.abi.decodeParameter(abis[0], output)
+    if (abis.length > 1) return web3.eth.abi.decodeParameters(abis, output)
+    return
+}
+
+// parse a name or symbol from a token response
+const BYTES32_REGEX = /^0x[\dA-Fa-f]{64}$/
+
+export function parseStringOrBytes32(
+    str: string | undefined,
+    bytes32: string | undefined,
+    defaultValue: string,
+): string {
+    return str && str.length > 0
+        ? str
+        : // need to check for proper bytes string and valid terminator
+        bytes32 && BYTES32_REGEX.test(bytes32) && hexToBytes(bytes32)[31] === 0
+        ? toAscii(bytes32)
+        : defaultValue
+}
diff --git a/packages/web3-shared/evm/utils/address.ts b/packages/web3-shared/evm/utils/address.ts
index 2bb6247e301e..91559845d003 100644
--- a/packages/web3-shared/evm/utils/address.ts
+++ b/packages/web3-shared/evm/utils/address.ts
@@ -1,25 +1,20 @@
 import { EthereumAddress } from 'wallet.ts'
-import { compact, castArray, uniq } from 'lodash-unified'
 import { getEnumAsArray } from '@dimensiondev/kit'
+import { currySameAddress, isSameAddress } from '@masknet/web3-shared-base'
 import { getRedPacketConstants, getTokenConstants, ZERO_ADDRESS } from '../constants'
 import { ChainId } from '../types'
 
-export function isSameAddress(a = '', b = '') {
-    if (!a || !b) return false
-    return a.toLowerCase() === b.toLowerCase()
+export function isEmptyHex(hex?: string) {
+    return !hex || ['0x', '0x0'].includes(hex)
 }
 
-export function currySameAddress(addresses: string | string[] = []) {
-    addresses = compact(uniq(castArray(addresses))).map((address) => address.toLowerCase())
-    return (target?: string | { address: string }) => {
-        if (addresses.length === 0 || !target) return false
-        if (typeof target === 'string') {
-            return addresses.includes(target.toLowerCase())
-        } else if (typeof target === 'object' && typeof target.address === 'string') {
-            return addresses.includes(target.address.toLowerCase())
-        }
-        throw new Error('Unsupported `target` address format')
-    }
+export function isValidAddress(address?: string) {
+    if (!address) return false
+    return EthereumAddress.isValid(address)
+}
+
+export function isValidChainId(chainId: number) {
+    return getEnumAsArray(ChainId).some((x) => x.value === chainId)
 }
 
 export const isZeroAddress = currySameAddress(ZERO_ADDRESS)
@@ -54,8 +49,3 @@ export function isRedPacketAddress(address: string, version?: 1 | 2 | 3 | 4) {
             )
     }
 }
-
-export function isValidAddress(address?: string) {
-    if (!address) return false
-    return EthereumAddress.isValid(address)
-}
diff --git a/packages/web3-shared/evm/utils/chain.ts b/packages/web3-shared/evm/utils/chain.ts
new file mode 100644
index 000000000000..14a47c7fb6a4
--- /dev/null
+++ b/packages/web3-shared/evm/utils/chain.ts
@@ -0,0 +1,5 @@
+import { ChainId } from '../types'
+
+export function isFortmaticSupported(chainId: ChainId) {
+    return [ChainId.Mainnet, ChainId.BSC].includes(chainId)
+}
diff --git a/packages/web3-shared/evm/utils/chainDetailed.ts b/packages/web3-shared/evm/utils/chainDetailed.ts
deleted file mode 100644
index 610a58b3d9f1..000000000000
--- a/packages/web3-shared/evm/utils/chainDetailed.ts
+++ /dev/null
@@ -1,156 +0,0 @@
-import { upperFirst } from 'lodash-unified'
-import { toHex } from 'web3-utils'
-import { createLookupTableResolver } from './enum'
-import CHAINS from '../assets/chains.json'
-import { getRPCConstants, getCoinGeckoConstants } from '../constants'
-import { ChainId, NetworkType, ProviderType } from '../types'
-
-export function isChainIdValid(chainId: ChainId, allowTestnet = false) {
-    const chainDetailed = getChainDetailed(chainId)
-    return !!getNetworkTypeFromChainId(chainId) && (chainDetailed?.network === 'mainnet' || allowTestnet)
-}
-
-export function isChainIdMainnet(chainId: ChainId) {
-    const chainDetailed = getChainDetailed(chainId)
-    return chainDetailed?.network === 'mainnet'
-}
-
-export function isEIP1559Supported(chainId: ChainId) {
-    const features = getChainDetailed(chainId)?.features ?? []
-    return features.includes('EIP1559')
-}
-
-export function isInjectedProvider(providerType: ProviderType) {
-    return [ProviderType.Coin98, ProviderType.WalletLink, ProviderType.MathWallet].includes(providerType)
-}
-
-export function isFortmaticSupported(chainId: ChainId) {
-    return [ChainId.Mainnet, ChainId.BSC].includes(chainId)
-}
-
-export function getChainDetailed(chainId = ChainId.Mainnet) {
-    return CHAINS.find((x) => x.chainId === chainId)
-}
-
-// Learn more: https://github.com/ChainAgnostic/CAIPs/blob/master/CAIPs/caip-2.md
-export function getChainDetailedCAIP(chainId = ChainId.Mainnet) {
-    const chainDetailed = getChainDetailed(chainId)
-    const { RPC = [] } = getRPCConstants(chainId)
-    if (!chainDetailed) return
-    return {
-        chainId: toHex(chainDetailed.chainId),
-        chainName: chainDetailed.name,
-        nativeCurrency: chainDetailed.nativeCurrency,
-        rpcUrls: RPC,
-        blockExplorerUrls: [
-            chainDetailed.explorers && chainDetailed.explorers.length > 0 && chainDetailed.explorers[0].url
-                ? chainDetailed.explorers[0].url
-                : chainDetailed.infoURL,
-        ],
-    }
-}
-
-export function getChainRPC(chainId: ChainId, seed: number) {
-    const { RPC, RPC_WEIGHTS } = getRPCConstants(chainId)
-    if (!RPC || !RPC_WEIGHTS) throw new Error(`Unknown chain id: ${chainId}.`)
-    return RPC[RPC_WEIGHTS[seed]]
-}
-
-export function getChainName(chainId: ChainId) {
-    const chainDetailed = getChainDetailed(chainId)
-    return chainDetailed?.name ?? 'Unknown Network'
-}
-
-export function getChainShortName(chainId: ChainId) {
-    const chainDetailed = getChainDetailed(chainId)
-    return chainDetailed?.shortName ?? 'Unknown Network'
-}
-
-export function getChainFullName(chainId: ChainId) {
-    const chainDetailed = getChainDetailed(chainId)
-    return chainDetailed?.fullName ?? 'Unknown Network'
-}
-
-export function getChainIdFromName(name: string) {
-    if (!name) return
-    const chainDetailed = CHAINS.find((x) =>
-        [x.chain, x.network, x.name, x.shortName, x.fullName ?? '']
-            .filter(Boolean)
-            .map((y) => y.toLowerCase())
-            .includes(name.toLowerCase()),
-    )
-    return chainDetailed && getNetworkTypeFromChainId(chainDetailed.chainId)
-        ? (chainDetailed.chainId as ChainId)
-        : undefined
-}
-
-export const getChainIdFromNetworkType = createLookupTableResolver<NetworkType, ChainId>(
-    {
-        [NetworkType.Ethereum]: ChainId.Mainnet,
-        [NetworkType.Arbitrum]: ChainId.Arbitrum,
-        [NetworkType.Avalanche]: ChainId.Avalanche,
-        [NetworkType.Binance]: ChainId.BSC,
-        [NetworkType.Celo]: ChainId.Celo,
-        [NetworkType.Fantom]: ChainId.Fantom,
-        [NetworkType.Polygon]: ChainId.Matic,
-        [NetworkType.xDai]: ChainId.xDai,
-        [NetworkType.Aurora]: ChainId.Aurora,
-        [NetworkType.Conflux]: ChainId.Conflux,
-        [NetworkType.Harmony]: ChainId.Harmony,
-        [NetworkType.Boba]: ChainId.Boba,
-        [NetworkType.Fuse]: ChainId.Fuse,
-        [NetworkType.Metis]: ChainId.Metis,
-        [NetworkType.Optimistic]: ChainId.Optimistic,
-    },
-    ChainId.Mainnet,
-)
-
-// The value should be same as chain field in packages/web3-shared/evm/assets/chains.json
-const chainNameMap: Record<NetworkType, string> = {
-    [NetworkType.Ethereum]: 'ETH',
-    [NetworkType.Binance]: 'BNB Chain',
-    [NetworkType.Polygon]: 'Polygon',
-    [NetworkType.Arbitrum]: 'Arbitrum',
-    [NetworkType.xDai]: 'Gnosis',
-    [NetworkType.Celo]: 'CELO',
-    [NetworkType.Fantom]: 'FTM',
-    [NetworkType.Aurora]: 'Aurora',
-    [NetworkType.Avalanche]: 'AVAX',
-    [NetworkType.Boba]: 'Boba',
-    [NetworkType.Fuse]: 'Fuse',
-    [NetworkType.Metis]: 'Metis',
-    [NetworkType.Optimistic]: 'Optimistic',
-    [NetworkType.Harmony]: 'Harmony',
-    [NetworkType.Conflux]: 'Conflux',
-}
-export function getNetworkTypeFromChainId(chainId: ChainId, value?: boolean) {
-    const chainDetailed = getChainDetailed(chainId)
-    const entry = Object.entries(chainNameMap).find(([_, value]) => {
-        if (value === chainDetailed?.chain) return true
-        return false
-    })
-    if (value) return entry?.[1] as NetworkType | undefined
-    return entry?.[0] as NetworkType | undefined
-}
-export function getChainFromChainId(chainId: ChainId) {
-    const chainDetailed = getChainDetailed(chainId)
-    return chainDetailed?.chain
-}
-
-export function getCoinGeckoPlatformId(chainId: ChainId) {
-    const { PLATFORM_ID = '' } = getCoinGeckoConstants(chainId)
-    return PLATFORM_ID
-}
-
-export function getCoinGeckoCoinId(chainId: ChainId) {
-    const { COIN_ID = '' } = getCoinGeckoConstants(chainId)
-    return COIN_ID
-}
-
-export function getNetworkName(chainId: ChainId) {
-    const chainDetailed = getChainDetailed(chainId)
-    if (!chainDetailed) return 'Unknown Network'
-    if (chainDetailed.chainId === ChainId.Matic) return chainDetailed.fullName
-    if (chainDetailed.network === 'mainnet') return chainDetailed.chain
-    return upperFirst(chainDetailed.network)
-}
diff --git a/packages/web3-shared/evm/utils/contract.ts b/packages/web3-shared/evm/utils/contract.ts
new file mode 100644
index 000000000000..f60b7b136974
--- /dev/null
+++ b/packages/web3-shared/evm/utils/contract.ts
@@ -0,0 +1,55 @@
+import type Web3 from 'web3'
+import type { AbiItem } from 'web3-utils'
+import type {
+    BaseContract,
+    NonPayableTransactionObject,
+    PayableTransactionObject,
+    PayableTx,
+} from '@masknet/web3-contracts/types/types'
+import type { SendOptions } from 'web3-eth-contract'
+import type { Transaction } from '../types'
+import { isValidAddress } from './address'
+
+export async function encodeTransaction(
+    contract: BaseContract,
+    transaction: PayableTransactionObject<unknown> | NonPayableTransactionObject<unknown>,
+    options?: SendOptions & {
+        maxPriorityFeePerGas?: string
+        maxFeePerGas?: string
+    },
+) {
+    const encoded: Transaction = {
+        from: contract.defaultAccount ?? undefined,
+        to: contract.options.address,
+        data: transaction.encodeABI(),
+        ...options,
+    }
+
+    if (encoded.gas) {
+        encoded.gas = await transaction.estimateGas(options)
+    }
+
+    return encoded
+}
+
+export async function sendTransaction(
+    contract: BaseContract | null,
+    transaction?: PayableTransactionObject<unknown> | NonPayableTransactionObject<unknown>,
+    options?: SendOptions & {
+        maxPriorityFeePerGas?: string
+        maxFeePerGas?: string
+    },
+) {
+    if (!contract || !transaction) throw new Error('Invalid contract or transaction.')
+    const tx = await encodeTransaction(contract, transaction)
+    const receipt = await transaction.send(tx as PayableTx)
+    return receipt?.transactionHash ?? ''
+}
+
+export function createContract<T extends BaseContract>(web3: Web3 | null, address: string, ABI: AbiItem[]) {
+    if (!address || !isValidAddress(address) || !web3) return null
+    const contract = new web3.eth.Contract(ABI, address) as unknown as T
+    contract.transactionConfirmationBlocks = 0
+    contract.transactionPollingTimeout = 10 * 1000
+    return contract
+}
diff --git a/packages/web3-shared/evm/utils/domain.ts b/packages/web3-shared/evm/utils/domain.ts
index 8eb2d157c4d1..12f6a22d82f0 100644
--- a/packages/web3-shared/evm/utils/domain.ts
+++ b/packages/web3-shared/evm/utils/domain.ts
@@ -1,4 +1,6 @@
+import urlcat from 'urlcat'
 import punycode from 'punycode'
+import { ChainId } from '../types'
 
 export function isValidDomain(domain?: string) {
     if (!domain || !domain.includes('.eth')) return false
@@ -8,3 +10,9 @@ export function isValidDomain(domain?: string) {
         .match(/^(?:[a-z0-9](?:[-a-z0-9]*[a-z0-9])?\.)+[a-z0-9][-a-z0-9]*[a-z0-9]$/u)
     return match !== null
 }
+
+export function resolveDomainLink(chainId: ChainId, domain: string): string {
+    if (!domain) return domain
+    if (chainId === ChainId.Mainnet) return urlcat('https://app.ens.domains/name/:domain/details', { domain })
+    return ''
+}
diff --git a/packages/web3-shared/evm/utils/enum.ts b/packages/web3-shared/evm/utils/enum.ts
deleted file mode 100644
index 10a77a548bae..000000000000
--- a/packages/web3-shared/evm/utils/enum.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-export function createLookupTableResolver<K extends keyof any, T>(map: Record<K, T>, fallback: T | ((key: K) => T)) {
-    function resolveFallback(key: K) {
-        if (typeof fallback === 'function') return (fallback as (key: K) => T)(key)
-        return fallback
-    }
-    return (key: K) => map[key] ?? resolveFallback(key)
-}
diff --git a/packages/web3-shared/evm/utils/formatter.ts b/packages/web3-shared/evm/utils/formatter.ts
index 8f4f6ecde06f..84c27c12d8ee 100644
--- a/packages/web3-shared/evm/utils/formatter.ts
+++ b/packages/web3-shared/evm/utils/formatter.ts
@@ -1,7 +1,8 @@
 import { BigNumber } from 'bignumber.js'
 import { EthereumAddress } from 'wallet.ts'
-import { multipliedBy, pow10 } from '@masknet/web3-shared-base'
+import { multipliedBy } from '@masknet/web3-shared-base'
 import { isValidDomain } from './domain'
+import { isValidAddress } from './address'
 
 export function formatPercentage(value: BigNumber.Value) {
     const percentage = multipliedBy(value, 100)
@@ -18,52 +19,19 @@ export function formatAmount(amount: BigNumber.Value = '0', decimals = 0) {
     return new BigNumber(amount).shiftedBy(decimals).toFixed()
 }
 
-export function formatBalance(rawValue: BigNumber.Value = '0', decimals = 0, significant = decimals) {
-    let balance = new BigNumber(rawValue)
-    if (balance.isNaN()) return '0'
-    const negative = balance.isNegative() // balance < 0n
-    const base = pow10(decimals) // 10n ** decimals
-
-    if (negative) balance = balance.absoluteValue() // balance * -1n
-
-    let fraction = balance.modulo(base).toString(10) // (balance % base).toString(10)
-
-    // add leading zeros
-    while (fraction.length < decimals) fraction = `0${fraction}`
-
-    // match significant digits
-    const matchSignificantDigits = new RegExp(`^0*[1-9]\\d{0,${significant > 0 ? significant - 1 : 0}}`)
-    fraction = fraction.match(matchSignificantDigits)?.[0] ?? ''
-
-    // trim tailing zeros
-    fraction = fraction.replace(/0+$/g, '')
-
-    const whole = balance.dividedToIntegerBy(base).toString(10) // (balance / base).toString(10)
-    const value = `${whole}${fraction === '' ? '' : `.${fraction}`}`
-
-    const raw = negative ? `-${value}` : value
-    return raw.includes('.') ? raw.replace(/0+$/, '').replace(/\.$/, '') : raw
-}
-
-export function formatCurrency(value: BigNumber.Value, sign = '') {
-    const balance = new BigNumber(value)
-    const fixedBalance = balance.gt(1) ? balance.toFixed(2) : balance.toPrecision(2)
-    return `${sign}${fixedBalance.replace(/\d(?=(\d{3})+\.)/g, '$&,')}`
-}
-
 export function formatEthereumAddress(address: string, size = 0) {
-    if (!EthereumAddress.isValid(address)) return address
+    if (!isValidAddress(address)) return address
     const address_ = EthereumAddress.checksumAddress(address)
     if (size === 0 || size >= 20) return address_
     return `${address_.slice(0, Math.max(0, 2 + size))}...${address_.slice(-size)}`
 }
 
-export function formatNFT_TokenId(tokenId: string, size = 0) {
+export function formatTokenId(tokenId: string, size = 0) {
     if (tokenId.length < 9) return `#${tokenId}`
     return `#${tokenId.slice(0, Math.max(0, 2 + size))}...${tokenId.slice(-size)}`
 }
 
-export function formatDomainName(domain?: string, size = 4) {
+export function formatDomainName(domain: string, size = 4) {
     if (!domain || !isValidDomain(domain)) return domain
     const [domainName, company] = domain.split('.')
     if (domainName.length < 13) return domain
diff --git a/packages/web3-shared/evm/utils/index.ts b/packages/web3-shared/evm/utils/index.ts
index a74ca021754b..78b4541f1b57 100644
--- a/packages/web3-shared/evm/utils/index.ts
+++ b/packages/web3-shared/evm/utils/index.ts
@@ -1,9 +1,12 @@
+export * from './abi'
 export * from './address'
 export * from './call'
+export * from './chain'
+export * from './contract'
+export * from './resolver'
 export * from './token'
-export * from './enum'
 export * from './formatter'
-export * from './chainDetailed'
+export * from './chain'
 export * from './transaction'
 export * from './domain'
 export * from './payload'
diff --git a/packages/web3-shared/evm/utils/misc.ts b/packages/web3-shared/evm/utils/misc.ts
deleted file mode 100644
index d4eb02fa9516..000000000000
--- a/packages/web3-shared/evm/utils/misc.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export const EMPTY_LIST = Object.freeze([]) as never[]
-
-export const EMPTY_OBJECT = Object.freeze({})
diff --git a/packages/web3-shared/evm/utils/payload.ts b/packages/web3-shared/evm/utils/payload.ts
index e7a05eb16b85..030cd5e9407e 100644
--- a/packages/web3-shared/evm/utils/payload.ts
+++ b/packages/web3-shared/evm/utils/payload.ts
@@ -1,20 +1,58 @@
+import BigNumber from 'bignumber.js'
 import { first } from 'lodash-unified'
-import type { JsonRpcPayload, JsonRpcResponse } from 'web3-core-helpers'
-import { EthereumMethodType, EthereumTransactionConfig } from '../types'
+import { sha3 } from 'web3-utils'
+import type { JsonRpcPayload } from 'web3-core-helpers'
+import { EthereumMethodType, Transaction } from '../types'
 
-export function getPayloadChainId(payload: JsonRpcPayload) {
+export function addGasMargin(value: BigNumber.Value, scale = 3000) {
+    return new BigNumber(value).multipliedBy(new BigNumber(10000).plus(scale)).dividedToIntegerBy(10000)
+}
+
+export function createPayload(id: number, method: string, params: any[]) {
+    return {
+        id,
+        jsonrpc: '2.0',
+        method,
+        params,
+    }
+}
+
+export function getPayloadId(payload: JsonRpcPayload) {
+    return typeof payload.id === 'string' ? Number.parseInt(payload.id, 10) : payload.id
+}
+
+export function getPayloadSignature(payload: JsonRpcPayload) {
+    const config = getPayloadConfig(payload)
+    if (!config) return
+    const { from, to, data = '0x0', value = '0x0' } = config
+    if (!from || !to) return
+    return sha3([from, to, data, value].join('_')) ?? undefined
+}
+
+export function getPayloadFrom(payload: JsonRpcPayload): string | undefined {
     switch (payload.method) {
-        // here are methods that contracts may emit
-        case EthereumMethodType.ETH_CALL:
-        case EthereumMethodType.ETH_ESTIMATE_GAS:
-        case EthereumMethodType.ETH_SEND_TRANSACTION:
-            const config = first(payload.params) as { chainId?: string } | undefined
-            return typeof config?.chainId === 'string' ? Number.parseInt(config.chainId, 16) || undefined : undefined
+        case EthereumMethodType.ETH_SIGN:
+            return first(payload.params)
+        case EthereumMethodType.PERSONAL_SIGN:
+            return payload.params?.[1]
+        case EthereumMethodType.ETH_SIGN_TYPED_DATA:
+            return first(payload.params)
         default:
-            return
+            const config = getPayloadConfig(payload)
+            return config?.from as string | undefined
     }
 }
 
+export function getPayloadTo(payload: JsonRpcPayload) {
+    const config = getPayloadConfig(payload)
+    return config?.to as string | undefined
+}
+
+export function getPayloadChainId(payload: JsonRpcPayload) {
+    const config = getPayloadConfig(payload)
+    return typeof config?.chainId === 'string' ? Number.parseInt(config.chainId, 16) || undefined : undefined
+}
+
 export function getPayloadAccount(payload: JsonRpcPayload): string | undefined {
     switch (payload.method) {
         case EthereumMethodType.ETH_SIGN:
@@ -32,12 +70,15 @@ export function getPayloadAccount(payload: JsonRpcPayload): string | undefined {
 
 export function getPayloadConfig(payload: JsonRpcPayload) {
     switch (payload.method) {
+        case EthereumMethodType.ETH_CALL:
+        case EthereumMethodType.ETH_ESTIMATE_GAS:
+        case EthereumMethodType.ETH_SIGN_TRANSACTION:
         case EthereumMethodType.ETH_SEND_TRANSACTION: {
-            const [config] = payload.params as [EthereumTransactionConfig]
+            const [config] = payload.params as [Transaction]
             return config
         }
         case EthereumMethodType.MASK_REPLACE_TRANSACTION: {
-            const [, config] = payload.params as [string, EthereumTransactionConfig]
+            const [, config] = payload.params as [string, Transaction]
             return config
         }
         default:
@@ -63,11 +104,3 @@ export function getPayloadNonce(payload: JsonRpcPayload) {
     const config = getPayloadConfig(payload)
     return config?.nonce
 }
-
-export function getTransactionHash(response?: JsonRpcResponse) {
-    if (!response) return ''
-    const hash = response?.result as string | undefined
-    if (typeof hash !== 'string') return ''
-    if (!/^0x([\dA-Fa-f]{64})$/.test(hash)) return ''
-    return hash
-}
diff --git a/packages/web3-shared/evm/utils/provider.ts b/packages/web3-shared/evm/utils/provider.ts
index a9cf64d7258a..fb3912a78a66 100644
--- a/packages/web3-shared/evm/utils/provider.ts
+++ b/packages/web3-shared/evm/utils/provider.ts
@@ -1,101 +1,42 @@
-import Web3 from 'web3'
 import type { RequestArguments } from 'web3-core'
-import type { JsonRpcPayload, JsonRpcResponse } from 'web3-core-helpers'
-import { EthereumMethodType, RequestOptions, SendOverrides } from '../types'
-
-const cache = new Map<string, Promise<unknown>>()
-
-/**
- * If it returns a cache id, it means the request can be cached.
- * @param requestArguments
- * @returns
- */
-function getCacheId(requestArguments: RequestArguments, overrides?: SendOverrides) {
-    // The -1 is not a valid chain id, only used for distinguishing with other explicit chain id.
-    const chainId = overrides?.chainId ?? -1
-    const { method, params } = requestArguments
-    switch (method) {
-        case EthereumMethodType.ETH_GET_BALANCE:
-            const [account, tag = 'latest'] = params as string[]
-            return [chainId, method, account, tag].join('_')
-        case EthereumMethodType.ETH_BLOCK_NUMBER:
-            return [chainId, method].join('_')
-        default:
-            return
-    }
-}
-
-function createSquashedRequest<T extends unknown>(
-    request: <T>(requestArguments: RequestArguments, overrides?: SendOverrides, options?: RequestOptions) => Promise<T>,
-) {
-    return async (requestArguments: RequestArguments, overrides?: SendOverrides, options?: RequestOptions) => {
-        const id = getCacheId(requestArguments, overrides)
-
-        // the request cannot be cached
-        if (!id) return request<T>(requestArguments, overrides, options)
-
-        // the request is already cached
-        if (cache.has(id)) return cache.get(id)
-
-        // the request can be cached
-        const unresolved = request<T>(requestArguments, overrides, options).finally(() => cache.delete(id))
-        cache.set(id, unresolved)
-        return unresolved
-    }
-}
+import type { JsonRpcPayload } from 'web3-core-helpers'
+import type { Web3Provider } from '../types'
+
+export function createWeb3Provider(request: <T>(requestArguments: RequestArguments) => Promise<T>): Web3Provider {
+    const provider: Web3Provider = {
+        on() {
+            return provider
+        },
+        removeListener() {
+            return provider
+        },
+
+        request,
+
+        send(payload) {
+            return this.sendAsync(payload)
+        },
+        // some pkg (eth-rpc) needs this method
+        sendAsync: async (payload: JsonRpcPayload) => {
+            try {
+                const result = await request({
+                    method: payload.method,
+                    params: payload.params,
+                })
 
-export function createExternalProvider(
-    request: <T extends unknown>(
-        requestArguments: RequestArguments,
-        overrides?: SendOverrides,
-        options?: RequestOptions,
-    ) => Promise<T>,
-    getOverrides?: () => SendOverrides,
-    getOptions?: () => RequestOptions,
-) {
-    const request_ = createSquashedRequest(request)
-    const send = (payload: JsonRpcPayload, callback: (error: Error | null, response?: JsonRpcResponse) => void) => {
-        request_(
-            {
-                method: payload.method,
-                params: payload.params,
-            },
-            getOverrides?.(),
-            getOptions?.(),
-        ).then(
-            (result) => {
-                callback(null, {
+                return {
                     jsonrpc: '2.0',
-                    id: payload.id as number,
+                    id: String(payload.id),
                     result,
-                })
-            },
-            (error: unknown) => {
-                if (error instanceof Error) callback(error)
-            },
-        )
-    }
-
-    return {
-        isMetaMask: false,
-        isMask: true,
-        isStatus: true,
-        host: '',
-        path: '',
-        request: (requestArguments: RequestArguments) => request_(requestArguments, getOverrides?.(), getOptions?.()),
-        send,
-        sendAsync: send,
+                }
+            } catch (error) {
+                return {
+                    jsonrpc: '2.0',
+                    id: String(payload.id),
+                    error: error as Error,
+                }
+            }
+        },
     }
-}
-
-export function createWeb3(
-    request: <T extends unknown>(
-        requestArguments: RequestArguments,
-        overrides?: SendOverrides,
-        options?: RequestOptions,
-    ) => Promise<T>,
-    getOverrides?: () => SendOverrides,
-    getOptions?: () => RequestOptions,
-) {
-    return new Web3(createExternalProvider(request, getOverrides, getOptions))
+    return provider
 }
diff --git a/packages/web3-shared/evm/utils/resolver.ts b/packages/web3-shared/evm/utils/resolver.ts
new file mode 100644
index 000000000000..b4f1bfc8327a
--- /dev/null
+++ b/packages/web3-shared/evm/utils/resolver.ts
@@ -0,0 +1,12 @@
+import {
+    createChainResolver,
+    createExplorerResolver,
+    createNetworkResolver,
+    createProviderResolver,
+} from '@masknet/web3-shared-base'
+import { CHAIN_DESCRIPTORS, NETWORK_DESCRIPTORS, PROVIDER_DESCRIPTORS } from '../constants'
+
+export const chainResolver = createChainResolver(CHAIN_DESCRIPTORS)
+export const explorerResolver = createExplorerResolver(CHAIN_DESCRIPTORS)
+export const networkResolver = createNetworkResolver(NETWORK_DESCRIPTORS)
+export const providerResolver = createProviderResolver(PROVIDER_DESCRIPTORS)
diff --git a/packages/web3-shared/evm/utils/token.ts b/packages/web3-shared/evm/utils/token.ts
index d7cf9024203c..9c543d1bc1e9 100644
--- a/packages/web3-shared/evm/utils/token.ts
+++ b/packages/web3-shared/evm/utils/token.ts
@@ -1,259 +1,137 @@
-import type Web3 from 'web3'
-import { AbiOutput, hexToBytes, toAscii } from 'web3-utils'
-import BigNumber from 'bignumber.js'
-import { getEnumAsArray } from '@dimensiondev/kit'
-import { getTokenConstants } from '../constants'
 import {
-    Asset,
-    ChainId,
-    CurrencyType,
-    ERC1155TokenAssetDetailed,
-    ERC721ContractDetailed,
-    ERC721TokenInfo,
-    ERC721TokenDetailed,
-    ERC20TokenDetailed,
-    EthereumTokenType,
-    FungibleTokenDetailed,
-    NativeTokenDetailed,
-    ChainIdRecord,
-} from '../types'
-import { getChainDetailed, getChainIdFromName } from './chainDetailed'
-import { formatBalance } from './formatter'
-import { isSameAddress } from './address'
-import CHAINS from '../assets/chains.json'
+    createFungibleToken,
+    createFungibleTokensFromConstants,
+    createNonFungibleToken,
+    NonFungibleToken,
+    NonFungibleTokenCollection,
+    NonFungibleTokenContract,
+    NonFungibleTokenMetadata,
+} from '@masknet/web3-shared-base'
+import Token from '@masknet/web3-constants/evm/token.json'
+import { chainResolver } from '.'
+import { CHAIN_DESCRIPTORS, getTokenConstants, ZERO_ADDRESS } from '../constants'
+import { ChainId, SchemaType } from '../types'
+import { getEnumAsArray } from '@dimensiondev/kit'
 
-export function createNativeToken(chainId: ChainId): NativeTokenDetailed {
-    const chainDetailed = getChainDetailed(chainId)
-    if (!chainDetailed) throw new Error('Unknown chain id.')
-    const { NATIVE_TOKEN_ADDRESS } = getTokenConstants(chainId)
-    if (!NATIVE_TOKEN_ADDRESS) throw new Error('Failed to create token.')
-    return {
-        type: EthereumTokenType.Native,
-        chainId,
-        address: NATIVE_TOKEN_ADDRESS,
-        ...chainDetailed.nativeCurrency,
-    }
+export function isNativeTokenSymbol(symbol: string) {
+    return CHAIN_DESCRIPTORS.filter((x) => x.network === 'mainnet' && x.nativeCurrency)
+        .map((x) => x.nativeCurrency.symbol.toLowerCase())
+        .includes(symbol.toLowerCase())
 }
 
-const NATIVE_TOKEN_SYMBOLS = CHAINS.filter((x) => x.network === 'mainnet' && x.nativeCurrency).map((x) =>
-    x.nativeCurrency.symbol.toLowerCase(),
-)
-export function isNativeTokenSymbol(symbol: string) {
-    return NATIVE_TOKEN_SYMBOLS.includes(symbol.toLowerCase())
+export function createNativeToken(chainId: ChainId) {
+    const nativeCurrency = chainResolver.nativeCurrency(chainId)
+    return createFungibleToken<ChainId, SchemaType.Native>(
+        chainId,
+        SchemaType.Native,
+        getTokenConstants(chainId).NATIVE_TOKEN_ADDRESS ?? ZERO_ADDRESS,
+        nativeCurrency?.name ?? 'Ether',
+        nativeCurrency?.symbol ?? 'ETH',
+        nativeCurrency?.decimals ?? 18,
+        nativeCurrency?.logoURL as string | undefined,
+    )
 }
 
 export function createERC20Token(
     chainId: ChainId,
     address: string,
-    decimals = 0,
     name = 'Unknown Token',
-    symbol = 'UNKNOWN',
-    logoURI?: string[],
-): ERC20TokenDetailed {
-    return {
-        type: EthereumTokenType.ERC20,
+    symbol = '',
+    decimals = 0,
+    logoURI?: string,
+) {
+    return createFungibleToken<ChainId, SchemaType.ERC20>(
         chainId,
+        SchemaType.ERC20,
         address,
-        decimals,
         name,
         symbol,
+        decimals,
         logoURI,
-    }
+    )
 }
 
-export function createERC721ContractDetailed(
+export const createERC20Tokens = createFungibleTokensFromConstants(getEnumAsArray(ChainId), SchemaType.ERC20, Token)
+
+export function createERC721Token(
     chainId: ChainId,
     address: string,
-    name = 'Unknown Token',
-    symbol = 'UNKNOWN',
-    baseURI?: string,
-    iconURL?: string,
-): ERC721ContractDetailed {
+    tokenId: string,
+    metadata?: NonFungibleTokenMetadata<ChainId>,
+    contract?: NonFungibleTokenContract<ChainId, SchemaType.ERC721>,
+    collection?: NonFungibleTokenCollection<ChainId>,
+) {
+    return createNonFungibleToken(chainId, SchemaType.ERC721, address, tokenId, metadata, contract, collection)
+}
+
+export function createERC721Contract(
+    chainId: ChainId,
+    address: string,
+    name: string,
+    symbol: string,
+    owner?: string,
+    balance?: number,
+    logoURL?: string,
+): NonFungibleTokenContract<ChainId, SchemaType.ERC721> {
     return {
-        type: EthereumTokenType.ERC721,
         chainId,
+        schema: SchemaType.ERC721,
         address,
         name,
         symbol,
-        baseURI,
-        iconURL,
+        owner,
+        balance,
+        logoURL,
     }
 }
 
-export function createERC721Token(
-    contractDetailed: ERC721ContractDetailed,
-    info: ERC721TokenInfo,
-    tokenId: string,
-    collection?: {
-        name: string
-        image?: string
-        slug: string
-    },
-): ERC721TokenDetailed {
+export function createERC721Metadata(
+    chainId: ChainId,
+    name: string,
+    symbol: string,
+    description?: string,
+    imageURL?: string,
+    mediaURL?: string,
+    mediaType?: string,
+): NonFungibleTokenMetadata<ChainId> {
     return {
-        contractDetailed,
-        info,
-        tokenId,
-        collection,
+        chainId,
+        name,
+        symbol,
+        description,
+        imageURL,
+        mediaURL,
+        mediaType,
     }
 }
 
-export function createERC1155Token(
+export function createERC721Collection(
     chainId: ChainId,
-    tokenId: string,
-    address: string,
     name: string,
-    uri?: string,
-    asset?: ERC1155TokenAssetDetailed['asset'],
-): ERC1155TokenAssetDetailed {
+    slug: string,
+    description?: string,
+    iconURL?: string,
+    verified?: boolean,
+    createdAt?: number,
+): NonFungibleTokenCollection<ChainId> {
     return {
-        type: EthereumTokenType.ERC1155,
         chainId,
-        tokenId,
-        address,
         name,
-        uri,
-        asset,
+        slug,
+        description,
+        iconURL,
+        verified,
+        createdAt,
     }
 }
 
-export function createERC20Tokens(
-    key: keyof ReturnType<typeof getTokenConstants>,
-    name: string | ((chainId: ChainId) => string),
-    symbol: string | ((chainId: ChainId) => string),
-    decimals: number | ((chainId: ChainId) => number),
+export function createERC1155Token(
+    chainId: ChainId,
+    address: string,
+    tokenId: string,
+    metadata?: NonFungibleToken<ChainId, SchemaType.ERC1155>['metadata'],
+    contract?: NonFungibleToken<ChainId, SchemaType.ERC1155>['contract'],
+    collection?: NonFungibleToken<ChainId, SchemaType.ERC1155>['collection'],
 ) {
-    const entries = getEnumAsArray(ChainId).map(({ value: chainId }): [ChainId, ERC20TokenDetailed] => {
-        const evaluator: <T>(f: T | ((chainId: ChainId) => T)) => T = (f) =>
-            typeof f === 'function' ? (f as any)(chainId) : f
-        return [
-            chainId,
-            {
-                type: EthereumTokenType.ERC20,
-                chainId,
-                address: getTokenConstants(chainId)[key] ?? '',
-                name: evaluator(name),
-                symbol: evaluator(symbol),
-                decimals: evaluator(decimals),
-            },
-        ]
-    })
-    return Object.fromEntries(entries) as ChainIdRecord<ERC20TokenDetailed>
-}
-
-export function addGasMargin(value: BigNumber.Value, scale = 3000) {
-    return new BigNumber(value).multipliedBy(new BigNumber(10000).plus(scale)).dividedToIntegerBy(10000)
-}
-
-export function decodeOutputString(web3: Web3, abis: AbiOutput[], output: string) {
-    if (abis.length === 1) return web3.eth.abi.decodeParameter(abis[0], output)
-    if (abis.length > 1) return web3.eth.abi.decodeParameters(abis, output)
-    return
-}
-
-// parse a name or symbol from a token response
-const BYTES32_REGEX = /^0x[\dA-Fa-f]{64}$/
-
-export function parseStringOrBytes32(
-    str: string | undefined,
-    bytes32: string | undefined,
-    defaultValue: string,
-): string {
-    return str && str.length > 0
-        ? str
-        : // need to check for proper bytes string and valid terminator
-        bytes32 && BYTES32_REGEX.test(bytes32) && hexToBytes(bytes32)[31] === 0
-        ? toAscii(bytes32)
-        : defaultValue
-}
-
-// #region asset sort
-export const getTokenUSDValue = (token: Asset) => (token.value ? Number.parseFloat(token.value[CurrencyType.USD]) : 0)
-export const getBalanceValue = (asset: Asset) => Number.parseFloat(formatBalance(asset.balance, asset.token.decimals))
-export const getTokenChainIdValue = (asset: Asset) =>
-    asset.token.type === EthereumTokenType.Native ? 1 / asset.token.chainId : 0
-
-export const makeSortTokenFn = (chainId: ChainId, options: { isMaskBoost?: boolean } = {}) => {
-    const { isMaskBoost = false } = options
-    const { MASK_ADDRESS } = getTokenConstants(chainId)
-
-    return (a: FungibleTokenDetailed, b: FungibleTokenDetailed) => {
-        // The native token goes first
-        if (a.type === EthereumTokenType.Native) return -1
-        if (b.type === EthereumTokenType.Native) return 1
-
-        // The mask token second
-        if (isMaskBoost) {
-            if (isSameAddress(a.address, MASK_ADDRESS ?? '')) return -1
-            if (isSameAddress(b.address, MASK_ADDRESS ?? '')) return 1
-        }
-
-        return 0
-    }
-}
-
-export const makeSortAssertFn = (chainId: ChainId, options: { isMaskBoost?: boolean } = {}) => {
-    const { isMaskBoost = false } = options
-    const { MASK_ADDRESS } = getTokenConstants(chainId)
-
-    return (a: Asset, b: Asset) => {
-        // The tokens with the current chain id goes first
-        if (a.chain !== b.chain) {
-            if (getChainIdFromName(a.chain) === chainId) return -1
-            if (getChainIdFromName(b.chain) === chainId) return 1
-        }
-
-        // native token sort
-        const nativeTokenDifference = makeSortTokenFn(chainId, { isMaskBoost: false })(a.token, b.token)
-        if (nativeTokenDifference !== 0) return nativeTokenDifference
-
-        // Mask token at second if value > 0
-        if (isMaskBoost) {
-            if (isSameAddress(a.token.address, MASK_ADDRESS) && getBalanceValue(a) > 0) return -1
-            if (isSameAddress(b.token.address, MASK_ADDRESS) && getBalanceValue(b) > 0) return 1
-        }
-
-        // Token with high usd value estimation has priority
-        const valueDifference = getTokenUSDValue(b) - getTokenUSDValue(a)
-        if (valueDifference !== 0) return valueDifference
-
-        // Token with big balance has priority
-        if (getBalanceValue(a) > getBalanceValue(b)) return -1
-        if (getBalanceValue(a) < getBalanceValue(b)) return 1
-
-        // mask token behind all valuable tokens if value = 0 and balance = 0
-        if (isMaskBoost) {
-            if (isSameAddress(a.token.address, MASK_ADDRESS)) return -1
-            if (isSameAddress(b.token.address, MASK_ADDRESS)) return 1
-        }
-
-        // Sorted by alphabet
-        if ((a.token.name ?? '') > (b.token.name ?? '')) return 1
-        if ((a.token.name ?? '') < (b.token.name ?? '')) return -1
-
-        return 0
-    }
-}
-
-export const makeSortAssertWithoutChainFn = () => {
-    return (a: Asset, b: Asset) => {
-        // Token with high usd value estimation has priority
-        const valueDifference = getTokenUSDValue(b) - getTokenUSDValue(a)
-        if (valueDifference !== 0) return valueDifference
-
-        // native token sort
-        const chainValueDifference = getTokenChainIdValue(b) - getTokenChainIdValue(a)
-        if (chainValueDifference !== 0) return chainValueDifference
-
-        // Token with big balance has priority
-        if (getBalanceValue(a) > getBalanceValue(b)) return -1
-        if (getBalanceValue(a) < getBalanceValue(b)) return 1
-
-        // Sorted by alphabet
-        if ((a.token.name ?? '') > (b.token.name ?? '')) return 1
-        if ((a.token.name ?? '') < (b.token.name ?? '')) return -1
-
-        return 0
-    }
+    return createNonFungibleToken(chainId, SchemaType.ERC1155, address, tokenId, metadata, contract, collection)
 }
-// #endregion
diff --git a/packages/web3-shared/evm/utils/transaction.ts b/packages/web3-shared/evm/utils/transaction.ts
index 7bce90ccee9c..bd4fefe7d624 100644
--- a/packages/web3-shared/evm/utils/transaction.ts
+++ b/packages/web3-shared/evm/utils/transaction.ts
@@ -1,7 +1,10 @@
+import { sha3, toHex } from 'web3-utils'
 import { unreachable } from '@dimensiondev/kit'
-import { EthereumTransactionConfig, TransactionStateType } from '../types'
+import { Transaction, TransactionStateType } from '../types'
+import { isEmptyHex } from './address'
+import { ZERO_ADDRESS } from '../constants'
 
-export function isEIP1559Transaction(receipt: EthereumTransactionConfig) {
+export function isEIP1559Transaction(receipt: Transaction) {
     return typeof receipt.maxFeePerGas !== 'undefined' && typeof receipt.maxPriorityFeePerGas !== 'undefined'
 }
 
@@ -47,3 +50,34 @@ export function isNextStateAvailable(type: TransactionStateType, nextType: Trans
             unreachable(nextType)
     }
 }
+
+export function getData(config: Transaction) {
+    const { data } = config
+    if (!data) return
+    if (isEmptyHex(data)) return
+    if (!data.startsWith('0x')) return `0x${data}`
+    return data
+}
+
+export function getTo(config: Transaction) {
+    const { to } = config
+    if (!to) return ZERO_ADDRESS
+    if (isEmptyHex(to)) return ZERO_ADDRESS
+    return to
+}
+
+export function getFunctionSignature(tx: Transaction) {
+    const data = getData(tx)
+    return data?.slice(0, 10)
+}
+
+export function getFunctionParameters(tx: Transaction) {
+    const data = getData(tx)
+    return data?.slice(10)
+}
+
+export function getTransactionSignature(transaction: Transaction | null) {
+    if (!transaction) return
+    const { from, to, data, value } = transaction
+    return sha3([from, to, data || '0x0', toHex((value as string) || '0x0') || '0x0'].join('_')) ?? undefined
+}
diff --git a/packages/web3-shared/flow/assets/FUSD.png b/packages/web3-shared/flow/assets/FUSD.png
new file mode 100644
index 0000000000000000000000000000000000000000..d8e564b3a484b965dd5a4b6cc751bf454df51d87
GIT binary patch
literal 732
zcmeAS@N?(olHy`uVBq!ia0vp^X+WI9!3-pwPi~C{QkelhA+A80;e9{D`))AmfiZyG
zE{6B*4DXRefNY>(SHt(C@BjVy|Nnpgk24A%XE}Uck??i<{GV3@K1}-X|EJUcHM#%y
zi~XN@|L@21e_pQtb=%<6!u`J=l}z?c2HGW9666=mAmGq2fB*Ua2@3c73*HB;H|Xp?
z_=16fNzl{9F{Fa==q%PG9Yq0`@(ohS(|5f7`~HXSybXz6ieK-u%IV$R8|jt4<}>5^
ziu~%$nWrx77L5FJ#mn>z<9)%qWqVV0JI}P>&6c@qlcc!&*TKz#Ec^Vn$U1J4&N%tt
zps;S{OyyM^oinTYvz{HDCbF?9cKex2$+C$NNi#Q0n{i5vox_ID_l2t1k&q1>Hnz6}
z+iS&|r?u$iODfHJ^l27@T;0yd4<9a1z96SBvFS~r?PK+hyYAlNAC-N+e)c!iuwu6G
zOmA?!D0$$j{^sVxi{Ibae#0$5M!xp^yuFhh3X5Daot~zaoywdr&s0z(eM#CXYm@Vy
zz7>~zYSJ}$*?#5hv#_<-nzaAksbHT;cNZ?(t7dLF?Mh5s>}08w^0S!-i;9bVv(Cu(
zs+;&vo235x2;;)aO*WMry-R`oP3q;6Do&qMG^>jEHG{7`(W&HLe=_>iyg6zDv&_9u
zHtSC@t@J+k`M>EWM`0btgH6+N{4XXhwzhH=Z+sCY9D8Yzdix8;t(;q)eS0&dzbqoG
zxIFN)zR#LxA|i>OT~th`Ze%>3$#-z#Jk!q0cRnY7J8~j}Pd@9gv+=@872S=&?eZ=M
zMM5(?L|z27zIAc*2=xdRRS;|49eS`jRLf~fMBvg+7EgUguJwD>^Nzj@b=(v&;g^`o
zC)ZTYUrOAyCp-2rxW%74EUy02d+nFjWR|=Cj4XENY;bX{-Op%M>nWaaEAAL5nR>eV
KxvX<aXaWFu>Q37L

literal 0
HcmV?d00001

diff --git a/packages/web3-shared/flow/assets/blocto.png b/packages/web3-shared/flow/assets/blocto.png
new file mode 100644
index 0000000000000000000000000000000000000000..c25dca721e352582b58db6c7b38816996e352351
GIT binary patch
literal 6902
zcmd^j`9IXr_y21)#u$u!3nN>WLZ*-~B$PENrNyX7$r546GBb9OCHt;I$`(Shj3sL!
zvTtKowy}&Q%zVASpU>m_!}o{p=MVVaU(UJD^St+*d+y_&^LX5Fb5jF0gb)G%0JbZJ
zdKLfxI#xjd9C9oi3vXEh0QjG|vE^k0S7XNi-{Xi*KRP-(I5<2wq#qt@NA&K#>45Oh
zp|Mrb$=?z(8}ds!8(M}(CziIhcURZ8&s`3J^4r0MA0tJda)>|UlXVqS_Of}FSycX$
z!JyYP3~)<13!iouQg9QHd(J88Y-AnxUkRqu8C7+^1?8Uyz5deLIZ<8r`xswXqRMIb
zGmdQx#*GKbmbQs(XvfUl7Cfm4A@byj$NT?tIsJq40&;HJCK0>;4v)dZBl-e$FTG_p
zx^B9p_fOsM>aV%Yx%J&O+P~wyj1#)0{m7^M8|4C;&XAhVhqPRZ?z)@VNBS}`u&}kc
zPmd>0tB19!hP0duZczzpIUCrlL~2qXG`W5pdf%}y_Lt^SG=d3k(R|gR65N6bZg$8W
z`1Et>*zaA3bWBhSWp(%Nlk||PiDM+RddeW~$Ns@l`y};7YVY68{p-m+!%N%UGaI%!
z{YgzTbOyb8V5M<vZDM)HzifQ>;22;;ys4U?EbkxEN7oM97Y<tI4u1VTT;HQN&iwm0
zxcg~vr)+G0Ve6>-&td8CPRa1@m+}3Ysei>o$NJ8vq21|?qlxvS>WTg0q1}?9ozjuL
z{*|M`p}nrf|0L)0=>8F%@t1bgxp>$zcThk5uXtpCX!U4z^QdTe@8jUkzavI}I9}lR
zF>JoDFue|dAW(J%!v|jBnPsgbvwzk$cNz4V7hq*8|C;rEuFLO#uKYVZIO=+<dm^%#
zNOfJDFL6AzLv}{j!Sa26_o<{9SKhzVYl$tC;)`{#lW^NM4;Iu?Jr3mmJtpD*Wq)}r
zmj9cYcn0?$jrQNu|4Fd^Z$iiaMEk$(8etQpP5|KhdPPsi5)b;FIFPukhPrIznf&IR
zaA-$a>KT=XDqD<z&Pd10<#|tf(OE+=yJrwmoYU2$u-S#p;0FbF3kLs2*?*cKu2kIl
zX+X37VzI`@x}WZ-HS0q<D;BaF_GX#JoM7vRY0Z*&E-`z}@0Q^9OZ6GNX{(ePdvJ=e
zQTcw8>W|J{NNz=91M}I)!K<+Pl1TP|&t;?c(vsKP9~sjI4}`z)sf}{b$*mcN3OAtj
zOpiD4?;4zIPQBUw+VrN)DTMXcIxGOI_klQdu)Tpx?Mj6-Ztp)HSOl_tb6wssRM@Qd
z5y1UgU)rdz6H`;J&(X?;0D*m4T#A1Ez1}Gu2!3nl-V%9hMNx~hE?~D3Lg71P#Gx+i
zQUCfaS>4jy*ArvS8a3{561y_217vHaT^N6GGsJO=zQqr8MYV+wHxBh(cvY!5t>X8o
z0wm&K7~U?Ci);{DUDu?mFH`Hpw7>41<?}7)umswlHlBe+G91|{`Wp}3vLS$c8mav=
zJiwjRyz%Eu+Yl2Gyx^x%LoidB4XumT<1!_IZ&vOP^*0<ienDk9zA>M(Xq*+P*Zkud
z;IC@y`;HJm>%X7sPT^b?gZ8RYxo@C<$(k9y$1tDyH4VnQ(xl4RiHin$&KKqbG;4`j
zsidqnz59rHZSQ6;ZB2h_^fHjY9_I`;Gp8$~lBdnCgS1;iha~mN`lmoiVg-*!pay!T
zZdCydKJN~1Vj9<i(%)B3-QLpQKmCNnuN_vaHyQw;=87Du_B48fA5!|h-*K>`I$306
zLJpLLQKZ34_kG)YlJBDpk|gyCXQyDk*rp~!|BA=TXTYJgH`;|)T_yy8gke6S(VMo~
zBU`6EA*B0UYjcBD!#R558It1qtP-WyZh3I;&Nq0f)tr7$!)Z?J)mx&n(+>{=(?9G7
zG*ZW0(7?Y~A(Utx*iw4$r?T2f#m)w8DeU8*EH(#<<OK*R6Dve76o?Vfvm?Lj=?&4=
zV8YbQ>6J4~=^+fEA?fPM0_MqBZWv?Q<wt6;`?5Z&)ygepZ2f}VyZ2{RR8$1#l&TYW
z%A~aI?f<=6zOfKIyOkj`TBXA=<)U?qsLvRXdrF&sqW6;x{m7j%n8V`A__J9Ou}~BJ
z3jy;6Pg&RvAMGaUbZeg-P5ZnN-cj&JkgE3!0U0^(YpVw4^*Qi2VU$Dc?=a{?X=<i@
zUk49|n_hUNG@g`*k#e0Hn`3{+5EJ{o7BB!eT4gs&wDTT)J-aquydis2_g$F5NQUb!
z_uR-XBXg0efT2}Y5&b5P_Gu$ob_e~ErgxaxZxTOr!1YR4?|Zh3kL_pnlrXz~U`DU{
z6&af$Ce$XrD6#4VBP3Za+Od*zo8j>m0&p@-R_T3V(8Vj(+y)4Vc1{AqRrsqXXb;A1
zsRStn6FqugN1OftIA328KgIV}#_1zD*T!ZZOn?!1nGQ5otG}S-z{R9l#kj|!goMRv
z00+YbgCq=1jUlnOxLkS1=LHuD23`)VSO`u~r$*aoL0a-MS!eHS0aR|A*EhEiREVam
zn+j!JBpF5!NShm_w~_d5`Vl+_2V`@Qjxw$rB=tUv;G{m!dV;L|!~vWp@Is%AKFQA~
zrV0>&=+tv$iPWt$;FMm>e110&izY^QoWnzbQ|`c#Q%r^?{}oR2mBj!iRpLQ`JwypY
zhO4pmbPvtLq4-h3TR;g9lM-{b1gb~%+8YViF`NnI*Cp}zGEnvqSsk0l8jslM9-B)!
zPf!Qgh}SUZRFS!9$LHTWya{YW%dY4DLd5|j9p|_U+p~44yzP7d_i&aya|*$nyY@M^
zx-}?$NPsK~sI=D<-TvKT?E1|VEP9Wc6R!!ZYW2!rYQLyTd8qlRODA;gH{zJb-LBE`
z-V%u>?;e4ww_&=uI1X$NF5qB^^LMG09#}kc#Ra_hWN-Ki@T3R2q5eClQe4dINoJs6
z*3>PKcfGcD7~BF{zbZrQ%-3Kiq@hQ?@IT<fk1k6PUgfbk<Pb8UWjk@%(0b{rEZ{f>
zZWhCPymDew_%Q_KCImDLIVDM!B?y~<CsnCN0GUh81AOB%58io91nUAofYe|r*GX~i
zplUlK7PW0D@GwLvo}7FO$%J?R<k9;sAo~_zcMCl=<@D2V0)2z(GD#vBd7*);AhP>@
zc04nRa%j(?w!OR#zi}Jr>mGsV0@=FbjFakVP*-7aJdB{}IxjbunMl`POEfYM=QCW?
zN3n1Yzh%+%;mVQY#wIF+fy~9}lc>N<C+H|d?WH~fKvA}6qOMEd4^SWb09UxA6?&%?
z8#b#QS3Vs~!4{n5H6Isvdes{@E8-TaMTkConrxy*a#$bT{dw*5s%Js8!H^vJomlaa
z*~D$Ns;HoAciSS(H0_&}kIR4`OiU$7r|n0)vzq54dDkzJcR-iVsHhz2EGD=O80Tfa
zs&SKQNI?c|b?r|28@ZvG!yptX>K_L<ikK|#mWzu2R|T%xgX)VA0$Fhj(E|gv;MT*T
zaJw*vry2c?TLc0m2t@U38mdJkBXr%39F6Y0G<eLvj|wZJZIk`_#C4rY@vy_qGG?s!
zi-nqjHD8_O4%*Ha8Uq4|243)?Jep*GrGW*=2gkJ<P*zwv^S8!6Ikzl#;ni1Sqc{^v
zB1YF^i+q&HJdVIaWhvQ@$pHYoInn;xS)_?dm$%1zuSOJbvq7F&c6?1WFw~|?#I+aX
zy8>x<tb90@a1D`qv+Vaw)8%_7K(g<De}{1Mt-AwR%zEY^BkUZ+^}DhH4IN+TTkIid
zK=5hFQJA$|1M!pH4bfnrYZpQeER7!`<s}Sc@?H`pQ9q%HB|E|7tCI5qAS&AO#8|J<
z-}aC81kn2+Et&c&zNkVmfM17ZqB<}T=-9Li;vl;3VcSJqr4<RoAS$@Af>t*AjSq)@
z8)HPdy#~?-&oGlO;g%BnM}s<e%GkK7-7rw+C_C7msnVCLyEXog;CeYX$xENVZq;A9
zkO%mR-THnxldTC!bmaebeL57Rp2tV!bjUqKEO51lRGYN-m~D-16yPD$II=l^G4rMK
z7_b|7$SCwmXmwZ4XC^YItMCWm3zwwGUSX!YW7)SL6sYk;CmT^Gr`Ljt@RDv(QQ85<
ze_^X`x*!!<<}t-7Z8kh;nEDPMWoFjamS!FXbzNJ(0dSy4&_KEzNWRUT5Fc}uG9pJP
zk8wZ&=>%t|r5UKM5Yy{oa5W%{fdff|ni%o-#cIJ1_m5(jJ`>Dvyl3^UH$M$=NqdD6
zVgg)Vv3+7g+P;81NjLYq+O85K3@1EH(|^(;f@}s{yS@7a3qrtT7KfWI++nBEpHpwQ
zv%$zw#5GvX-HUN{CuHwMTRsF)J}oB9NI&PUmfZ{8=H+5zI<6TFDOf#Q3^+-G_@DJ^
zKK@FPAxgx>_eMfJU|)~y^kptZP>NYt^d+uX$Pz1*kcPFobIFh>DH`h>A&O-xlA97n
zzPB*T$Fop>#%jdA76O{Hg?@ldzyJDn=lek;Ml^n*6@-1+SenG7LcDjsPE-#CRkEt#
zbKB-yI+g0FblT&E2Wv7KBsg?+>M}b{-uCEk87BrBxfvpjf`ZZ|Gr0U<DBE&g1*qET
zccms3&`0SC8A9p+s`+iLy&_u}wu^(H2l|oJ7Yk{(V7fGb`k<!suryx~dKr$rzyy>g
z@cjLP>1RJ>au2G1>{;6fKnPUwBF8*QKDcSiU_&@rrLRL7zy{^r)lqSh`M^9Fm?!r@
z9B;7=l=329Dg0!YJ3YmuPin?(N5xoyf0%%dIW4V3jI`bq!kts#{6>Q47|R-n%Q1L8
z0s;hAo_%)BLk2~RaEh-A)Pa(N`*;oYIRGe_?_-T%7-6*-5pxnFqIHH3z_w>Q2J*%b
zY@MWI+9P^b`!r(}!}pa-75Kvl8Zv8OSzV(CzZ4^UP9~8<YMs+6Rn|_Pic;VP#gN@+
zx@IKV$ugz><xi_MKdaR9V3M4{+@Hw<ecXonE}$&zb(@^Ru~~hJX*h3ARP4*kRjutW
z{fHbK)OzwQ@NlK|=_iwQpvS&IP-Sb2s=<U+GKCifZ48}^;yf8Cjt!#8>;H~(j^y)p
zf_L}*ZTn)<{s?y7AUZ}=<1!DH$;IE&&titCscRdV0dFCQXc+t^6$mmkkV}I#_p%Fn
zcdDr%mbXZMKQDcp$s$MGH6{Hy@mqss#UHHg`g>m#Rc@Dk<rCymM?bIG;}k?qudZwF
z&DY_481II54~*5{PQ-TrCP#s3R{X3_tE`Q@&rS8SzkPOdrFIWS%0O|RO~$MaXf|&5
zPYS8#hQsxcz~HWnO@-YJ8<W#+`MQ#L!@pN2;c#v>z@(7&O<oVdDQs4w0uEn&{Yor;
z+gHPGGai?Uc`nbH6H>XBSD+Vf8+px1864ZI(-Ha+=r+Wn0K=54oGegy6p6v*#q0EX
z99z*GId7MzblfKfr<NYxOd`*TJu30bV#Hiu)9Kkw`NrmC<Ww2j=IPLBy}bzfw6bPB
z+30g`JwejQC(&c|%B201iQ2a;Ivz9B^G3_7o8yP#simMrz<X?-cBGt+BE%Tx^>OM+
z8#%>z;bw%Euh|P@gYez7w{TS(B?Gi4lh&wlfY`_tSJ0^%DeZ_;-t%e{@M14d0Y&5@
zub!G!tUo4)B$wTM;e4Bx8Vh{G?GaFYuAet2xn4gg;Kg7#4}k#SGO}ducsRo(|Mt1;
zUDGSSrc_LLiM>-{bM8e#gt8nUzPR5Ree#h!YkR#x$o&)3pqS0K;sizc=fbdMFl<%c
zBSMwi!OIc@$H-M!_2T95wC_fi4{8w~zUGEuN*!4-_fYpLb~Z|W<zU;-bcEI5xKJW0
zEPD%u-y00W!N2Yo<NZ~**zSTb8SoQTJNKMVx6G2C^2iNu+ez6<2$@2=r#^SP1idG9
z7+RXc9N~FLwf*_|p$-vJe<6&Ra8rc~h{N3kB={p$)N!*X=9>6Hf4XuN&}!pdbHgW4
z?7A9Z1c+P4>%J{P@&a&@=X@$BrV)uoXhA9(x>E!$F@c7f7YM((L1R?w35dkdU(xx(
z2sC<oyjPtvALP_Y&>Z!8y?!PeLc^H{TLU%B*@6(Q+PA>A$JO0rcbs^HU`}Bh=vS|&
zb0ln)r8WH)pc~M;ZI{gY*7;W<;2?e2B@h}__o$Sd!ZFvRK+F?`Qb;L{P46U-6b=}W
zBlH0!OmwpX!7ikK;wk#miF+`?S`Jvt+atrCu#9&)Cxbwi%yPB*lp+gy$WHlCl&Vk-
zY)`Hi?x?I})(^}HpN_J2`fQ1_d-vy)`KIEpQ~2&epxx75Y|6#mm<9fFfbBA~un!U)
zi6Ho(r(E5ip?@UhDqb?jp8LQF`hjGoVQ?3rF6CDN)Kl>a-2p1YG!~4gADc9!SJ*~;
z#nvzEvz;3|%vJ2#3Ng@sxah(?d3Mb%5et_@gDu;*39H|Xl8jXV*IxZ4FMACshs-P}
z{4o<O+shb~&x>e}LH@7+YH99~V7vqKy0?>ht2nWIr%GD`Y6yf}Lbvt$9MD%;aalBI
zI!F|}fnb^bu_?xb+zK7`wuxE=Rj(n%zmKXUXQZI6HmHwtJ*Z`Od&GR;cd{|GmJ1C<
z6pf&<`@7poN(uzUN-4s9{ymC8b?7T>gVbX(xU<2DVQ);>GRheX^-qASNtS;1hUR?=
zirDNK#{D}ifc>=!^o(4*E!ms-+|S0eiXS7~yyzlF&?6YFS^J8N3leoF<xR}sa3jHO
zwf!lG_UZ>h(hf2MbRIksk?&iOcR9eO@+qNp|2k;pOYvt<{)5SdSRlr~)m`U$Kf#7x
zA&>vA7GMHsvX0+lQ2@8#;W3us570-lJfOy<g@vetENQZ)%^j<CQR4aw79~!?)5+`c
zz}ANR*I1pcLl01IUNy^%_<683+^u*{76e*KJOF;*7uh=Gxc#Q3KIed^)T|G!Ad~a~
z9`8+)cj=9SoP<N&!525l_7>bN=P)N8&~yb-iD>NkiH#R$q;npb%MK&=HMF5Vj*IL{
z7bLaVSGHcf)*2eJ@d}lU;r7(JI(2%N4r;_7S_1hLdmlPC*mZ|D4{44b4x^ft&G<Zx
zI~!APs-2ZG<aY9w{g%xAVPl7;>QSGF(-0m@=y}Pwgx5os7pf-g%*?Vf>hHsR=H6Uk
z#deW3T+Je*2<6${F&`F~iY+^*a!^8x1?x-+lS+Pf4qH33()B6;<NFYfIAp0KnNtXS
zx8wIYrVDcd9omeQI&{`YX&`2Q?+WmxAl<gM(SV?Pw>0jx)weVOyagv>mK5g|xM}T{
zIoy2yZd5FwWt-BfwY+FGT!alp@jC~aZI3z56PJA~&Kv#J#oV}Z<&U>cjE&-8_hSw<
z8A1jlyxbc2VMrxEl;FOUD0JZx@>$sK%Za<14bwF`sOmJG2CvO|+KX?Ax#_W_wE9f&
z+J0X;AQ@C5O6<P~)enJL4no0)Z&qbq)_H#ZR%896;$_F*t9N@DV;5eE(@Pc<`eyA(
zN(w0{^=G#XpB}e~^2c;{{I1MMPzCEaS!P3yx!rDoDWz}jdGM9f1+>+b8x1avF_LIZ
z!>eVlTA*2=8Wb-LNq-yIw(hZxXcUpzd&N+ErHE+&dp2!s@mNNH>bTT;L?xo3)oq$D
zHrAgrLeD8N_dNq(tp`IrT70p=hbg7Y(+%)8MJtq?GR`L`ODR7v%ZAM+jELE=QEm{0
z+&c^VGhH$>6mXB}<0J08K(XWp{(ejgz>qIw^Ix=k#$heX)GN^JzGk}#@gMSq93FiY
z)*vrNI49IjBZJyq{mDAgJ+z?=i{<yC?8F}nGR(9ji-0<&e|*!jF&&4U%~w;L{Zqg%
zftF9bb2OV~<|ygICJPuhKQU6fcrQ8jdu0(~s`fH^R@<-TapYO4K?jk$TdjmK8(U@J
zdk0-|&jMKS(39_|9gyxl{IyV-mEO>N<XLRvj!W%y^LNy@iOxZ=DE5*0ezaMU=U9Z)
z_~S*^KB#nj!#-*E`d!<Bt%)+0I7P;ql&XE?wDgDVoV(_6h!53=!n=D|<$Q{U24QXi
zTO)QZ--4c;hI=egpdPa}RT$QAxanr@lW;|sNIAGJRd)E0V|`-f4lLq2k-|M*e*HE*
zTz2UL%+ePD6)P8EnRQ=jVsZPXEQ|7m{a#?*t4#34L!)aryU>O-FZaZOGvBnmVMh~T
z|1Mv<zgMckwSseRDoVClhFw&xIZv7SCfch(&APVt7Dq1(Pa>W)hwh;#Rj54+fj=MK
z$Db^>3Z$IJG1vV0x+jp@*}0OIPgsr{bLL_8`IA4j@O4OF>Nm7#q{?cng`IReo9bS2
zF|X&x+Agob&v8TH$hCnT04-xI0i_mS0#cvumRb1rKTN7%W*@W$k>{W6IkG|@;Q4_}
z<VsZ8ZCQWo6Bkc-M42(EvESJ%C!$}wX)>p0ey5H1SNwVfaSrPKT!SQ47wT{xRg1wv
z>hHe6XQHD$UR&#CHO0r@O0SPCNX>~1e9-QJkQTk++j_=T1+QF34^7Q|SO2z+OTH*p
zpAzrnQ9nF6v3&>Vs46O@xU4ysczMR(PK?(&`V4FFPZk?VtC`3YDRIf@##9lkQ&swl
pXtQl&+}95zWH>6rUcu<x(^dRZd_8Q}j=%7ME0<06igj_M{{`!S^0oi~

literal 0
HcmV?d00001

diff --git a/packages/web3-shared/flow/assets/flow.png b/packages/web3-shared/flow/assets/flow.png
new file mode 100644
index 0000000000000000000000000000000000000000..dcdbf9f67969d99fd75fb2f37f81850a2b636438
GIT binary patch
literal 3063
zcmZuzc{o&W8=lBWc4f)dAcgQl*;7V@vhRCBWy@ZcNwPLH8cVjZL?lYGX5TV0wnX-2
z(imllSq#Q9GvCPf`~Lc_>v^AZzxQ+B@AI5<o$ER$(ac1j{iNVY006*lXrOCBzoHJ;
z2}XKGB)C)n01TJSjI8wZ1B?K~XMl~Q!@xcNH$x8rjRqh*2W&nE(4zkGbdru=9A>)m
zNKD6vLH8yB{=g11eTz^0KN{M*!|H$IU(2CB39y<Bz$E{*zz%yIkw^2;G5*MP)D(88
z-$?woJH2#t6rF(sHvU%E|JUW{rj9g61Jg5ow!i%0`E)?HC(~#&K3YyF4e3E^dAB!}
zK_0$HEEqrda|{Qg(5O4K{S$aNl}0;`OP;1|C=p+iX$L3qDe}ZZApXTOavwh-vwUyr
z?pD(pb^9fG7)`<N(<ocief7=KUE0Aqbw`%?YJoyf-Yn7De0zbIkE4>!NmaK<A3pBQ
z25xs`?~YvGe78&`Em24>$b-4Nqo4N|B?);1>aNSyr^h=;PJ9}OfY2vZIBwMy?vAzZ
z{~SG7>p%G2xc{SPf5~&ZS)71)y*ti^PZcC&MeKAFsk@q+rEhj81`n2fwp&l(U&6=(
ziR8XT3bA>Ap?+^ZY^MvkkA1Y=HBZ6S?9I7uHAL<7L{ob6cSnZ~mTk9cGk1rR$o<ol
zbrVu0hC)mv_s1QeAe5epy=nRbH|v*IqrXPBAr>Z<fKvyeMDijh_1Jkn1~h2nI3hR{
zx=QJ9WFHUbcHU9N&1o`z|Jm)Ir_kjh!16;8Sp7A3WYebbQ<_<U7Sd}?XIhCX!b!a@
z1hayDIQ(n|oMQ?}_5Meqf{F$JScD99!B$~2>+_+GLesp=3ld%>XQH{%Ku?XBN1T>j
zePbUuRmsi%@xx#}Cea3^JLfgOw0(f!+A3>XrssVlv~J6Xle-f|vquJ((K#(hoGMu>
zOTDx0H=6MZ*~8WuVp3Ip(c)~zTzFF2@66X*sg<R!cOdz<w!7e9^WiTuHm12cGA~t3
zeb$E|!XSkvF{=f!{3}dFay9(O#hLc*#dFv5S~Qa=ptOLM3rijrHdU9|+@{hTmr5?H
zy$@=5I{%o8mURPNoWwEiTiJvdAfaRC<}BN&igNMNN8=tbTf*w*Zt{plfKStQQzGk*
z2EW~XpF1jnmfN)-T-n3nx=x0gcNd0RnjFQxzJ#kl!h2C=HYkRhw!lfL=+8<u2KILV
zjVrK}c=7yBefP3BS!*8e;~YvhDN8mUfZ*9E9hE67HecQklDQRf3<)->=?}Imf%hiv
zrzh7;G76!s{c18G8T<k#>aeLpL~q8FPs&0D0HFzO1oknHPCJ`dV8uCbMToYb(tx3W
zeU29vbs-v?Yl4xwQ1nu>^K`f*%e^<g?>2s=2M~>|es%(Rz9j$zupcDF>chISt;5fi
zv|78OB2-!W+eF#y@{K?DyRbL&DyMgD^F_P(7<&4E-@5TQDK4i~CmwH*W(@Ik0=M>@
z=V*Hp?iH}-Dr{*si}Q{f(?L$BUfL;LEaNPnVw8TE8Q}a}$p7~Uz`}f#Mf$k76aOM9
z_;TEsE<<6TBPviiK@>RxvZx<=?_Avv&06a)1=X-xWEM4noaZv#S0_Cg%HK~oqz#=U
z5U{?&XPC`ZVr6zEFpHZVMd~F*jzDF|X$)pA9LuFU%_#Hf6E|n|wXb4u&{*k&eN}Q}
zV}|xsu&0o0U(Z`o0Zif}Xj<N`Ujy^AhXu<Qx821f?1x!cVZjQNAdfv?;$n^rO}Wq2
zAFZcUjO==q;-9jNNnRJkxQ4t4=6Yv8cE9QQ6eNg0oS9&yQ*#ot&_J1sHDfwQc*q5r
zJcYVupdZvxbz6M9poj@vg5B72al@_D@q)`#r49Jt{~VWNNy`{}Yx<`LZGS3GaG@h8
zu}#e5DU9M9{~p>_Yr|B2vV+rN_1v$5K?h!>{oYlBlqpR?{Rf1O);4ug_{kFe6rZ6z
z5%1hKWt}fxlXBMr0}LVResFHhCk4!!-^-Rh0~G5-_`)=yZK`EUPhfU4$5^rRHZ(qU
z0yLY5Vg(E4A<?(ZyOrGrraN)aRWa{IFf5)g=5$KWcxZv$MY|IiF%I<WW=$l5nc5A$
zGFaFg#U0E6SQZoIC~T%6oj3u$P8?tr2JQ8r6BeusK5t0Lb7~P=GlPqL6dVPg(;T&7
z8yamiy~a3weI+ruz5N=k^=x|N-mQnPikfeyN*5?J&Wt)F@uz=p>_mgoSXWOgt?!Mw
z3Y*7)Zi>{U+ndq~v~?9@%vx65Q>)9pbOU3s+9`uj5rp1pX#*|<DlVE3D`k^%ep!4`
z{>SyxvIfe!sH%}oDW?>hvJ1tPqPm2bvFk6{G{Oa#*m#%{VL2KwabRkvae}bm4YAlp
zF*r;>BiaoZ$Z%#v6&eFHXJa}OmWToNNl^TTScH&XSof%4rg(NbgXe=6E~$FA5|egW
zs|!fYu?)=R&!9Q64BRx&KjM*Y={n5i6BPLPQrtH%0%WiUEB*$KNpWwl)vXwM_GolT
zElH%r83&x7%<ji8gx=?D-GQ5qQv$T-m1~7UG#ZTDIn5j~pHmfuLKh{oz8e2Y^ct&+
z`iypGG8K6IVWj~@x-ATX#9rPH5hdk;<t{OL1g8|DiyL~&e$GR=^!>F;x>d{MpQQP6
zTD;o{i{KiM+(%MDdJ#gvx}*uUX;EZxOT0w%s>$@(675h+W8v}SnX~6gT87Hcj*BSH
z$Z8r6&gO-v77P_NyVu3x%;w$Q1|`<~m|A02MMvG-9q#%i2+S6Bs0WLVJ132Z>nF(h
z78bAX&EBOwUFGTZN@XqkDWmvn@<-=mLFLEw<P%q;SNGsNj`l!@{$BIz2j?Y)vUS;q
z{ka@p33w8(#XA(dy7e`XyM7SPW%<>DaZ+AXvM&7qhky-|iZl0-Hr4{@0pp#x3)FFf
zfLvG*QN$Z!?7Jk`j0oYjG;oRt`-A#cPVisM{w!5J?z&tvrS5T8<4fbcGcE0^N-&ra
zk7FC~AFF~JDwtlVbe}&yX>CYNNfFgZene(-(b#BtZe+ym$eZvnItng(uJV*+iwyhi
z!LwwBGvrIv*6x_{xJ$C$I7>GfgcpX8)NYH36jLuPIHjJjf)J4?o#P1RY@Pc;5`GN!
zU5|a!SR);uXm2zS2Fvb$loNT}i=<Hc6Ah@YXU{x;>t%nf8sZUEsao;@6R%jj1vE18
zo`|sIr<eJKH#SPGzC4NjCER`!_He*Ut8`M;OTO38&1hF(Ed0InL!L`MN>}tMtRdec
z1A_hxs0oH(xT-VrQ>mv4tM3Ef;}^ITZI_vhGq^|Zgz#<ULZ<Zx^%zog^jKCD0)@7k
zgM6N5UtICn4j@$9mi6KXg)kr_UV5ed(rwq9p&Z<t7X@>!ZfM~t^J?A(MjV8Qx!kSb
zwMbP{&f=ud#VmKEz9O6%um9Cq*vPepOp5&o?}cX7x8C4^X=x}w*&9E|XrhL>Mc{L1
z@4qlXLSOxQy`*%`O&z{&M~$`WoUJjsF{@o@b8zSSK-57xnXxHz09r@eDSGIZ%q=^7
zpfF{QG|&C@p`6#9yh0SvpXDJdfYka-ABax3UP<s&{Rm7*QkhbnIOr}6uf9PG{?=G~
z^ijO3A>mPEa3SE7R9yvE7BBFrg#V3t9X_*WrPj`@okhQR2yA1>Wx*6J&29TY^KMnb
z;HIVY>?hue#hKpn(=C%toenSZq!jsw0-tUv`CLJcRU(Y4^zZ6D(}fv`@MgH4ebv#B
zCxGhT+VAvx*k)~VGqzSHlocxGBsi$l#@98f07Z60KI`=gkbZ=d+KzpSZANf#u3)84
zD5G4sY|U4`WVVS)!>yzq6#U9e*5V*5;^Un=Jcn6StQ#iuB^xZw^ZcY8emKmZmi7G@
f93R=))p4vj|E!E%F)Kg)PYhtFXQErF;~MiH4k{<W

literal 0
HcmV?d00001

diff --git a/packages/web3-shared/flow/assets/tUSD.png b/packages/web3-shared/flow/assets/tUSD.png
new file mode 100644
index 0000000000000000000000000000000000000000..efc4a8069cc10e8648476f6f1361de15b73ae4a7
GIT binary patch
literal 4245
zcmV;G5Nhv<P)<h;3K|Lk000e1NJLTq004jh004jp0{{R3^x%>C0008|P)t-s0RMIX
z|8)TWbOZl)6aRiD|A{{Tl~DhmUH_+L|Eq2Pux<aZTK}a-|C%%ZjvfDl3jca}|FpaR
z+VlVT{r~>`|NZ~}|Nj5~{{Q~`|NY?q?wtS0VgIK$|B)L1f&%|`LI0Nf|NZg*_kRDl
z2LE`?|K#ug_N)KVJpYvI|Md6!`t$nt`~3V%|D68*{`vj<?)dfP^Y7U1=eXh2meRj{
z$FX9&pIEn=OS6+nu#ic!l2EghTDhEU!Ka1FwWQg|#^&7K@$2gL^Zfq(g#WxD|A+nl
z{^9cN!{yqZ)x>thtW>s`HL8X#rGO}+eJ7)RD5ifWsevb@ekY=QDWiTdrh-AOjAXo_
zip{yL+|AAE;QRjk{r&xn|G@kH{k!4Shs(EQ!=*&8jx3~qC!u^OqI@W!d@!YfO}3SB
z#H-2Z-tqbO_y78%|IR?PkSnHuDW!iXqkSf!dnu%TG^~e4wv%(hs;=D5?DzBA|LZ*e
zlhFU=gUYl$tBEVAf+wMSDyM)js)hOd``z&Bkk7m)rhh4-eJ7-T5&wPT^X|ap*kk{y
zX}_gLuaAz-y1xJ0=k)L|sDi!Y*UA6k^!xeI>*G<jmn^G<>HqUavXIv8<{<xur`gFo
zt%@h3d||qu%;?~g(Y?k0->ciqIjo4D|H)puolXCnET(}nsf3%<!@~dGIjM$w|G1;q
z$2PBu`v3eE|9>T*dinkPfyuHYpn4>rc_W{BwcpaX;L|^>iZiE!Nw1J7p?lu{?eF;Y
zY`~@=o_KJ<sMhV}A)k19#jg7N`_t^?HK&Bt?BrJeqAvf9_x$?V@8?dklRdGGxc}LE
z#;;+(qi4OM!sOZx|9m>Bhp5`h9-Vf_=iMNlciQjiAD(v>nsHmWn;DyPCZKw4#i|^g
zb&3DJ>Gko;=-<!k;#a$zu>aJy-_niFxv|~PPye1$w3gZK=xYD1nbX0Z|H_&F$m9R-
zfXcIh|GIMjv3SR?)c@zk=iSx+=WocZZ^*2k|I1+=9Wej^4OU4+K~#7F?9GD_0|5{K
zz`X5KY^VSBqCq^2|F(f`s2`=2Qif^Sj_dhB7)C*yq*-nlZ@Z1$Ns6)p00i1&K!Ikf
z-Rbr$<K=rlACyC+yAVd>Z1U3H@~1NqdPrp0nmgvJ`o(-HOlMZ>qYa%Cn2zli^t<-W
z1FVTG+T&8TH%lDH-Wy>D^x3;a2MZ*a#QLx-nE@445-eE94VXymu7!2!_O4k-z)BF;
z-dl`5&Dys2-oEeMGXWuG#v}}1^}khTlK;<h?m73~nM=F(>$4dra3U<cOV|JD*1bp1
zUcLK(`u6KTVBny^5n>792oK(2$j|_R?O$yI_5?|YBZmziF)}JzDvKEvQ=w6Eg>v+m
zvE#;1i1^=F0%yZ8v4wyL0m1EC<LFzlNs*JMd=RIS$z%$OmQwLFD+);=l__KiQ>P7|
zo`@4{6q4EsHWup6NMa)^>DsN|%vs55aCAt+imH?}MLB!U+<B=OD}4R}L4pwQ&O&70
zh`=HiEnbqMl4{}^hq;T;@5E~qYUR=o`;OP54?s;c4Hh8#Lm>GQZCd*1Wil!2%q_UA
zqxG_plf{z==uz`q)i4MF%R96F83X$+sUCHH21>7-W=O<9jaRg+5kRL7ko~a9D`)Ga
zoc`_vv~=mJ)oG5du%;%xaYY*pY3;a~YNdkVb$1;OlzLsi^%%4T(MK)(j(@$z;NP{!
zIyJ*-&q2U2v|@Jp2Ar*iSNt0YE#E@vCy9-l6f|e>`G@1?5fK<D^F6-^-fD#WwUa+i
zrWt;BP6YMRm0KhP%#)w^;a^XL$|x}_TQBv?pB)M6oZLKuje+k3D;gvJ@boCQ?`ixb
zU}$=i0Rt@z_I2uQfa0H+AEjhifBy;8A5Uk?vB0-}u)G6?5n)@mrD$0Dnh<FEZe(j=
zyDtRoI>ToMW$QVs&wB)&Vn-TuQ_)Tz5-<e((>Cepn)*Ww6uY{ovh(vRUIV<-5Zxcy
zPaa=me?ZX4cJINU7WTIDHUSIK-HCJcIz|Wp=m-0T!8)no{s8Y1FauI{;Gi)6KoGAV
zlR=;u96Ib3KyVUDz{aUA`8WDxYBV|z#8KTpg<-J9s|2*iQ3ooVMLYW&i%dn{%49aW
z5^O7$U?>FMEYe;*gyEqjN7Rfnfaz%OV_vFv?=i=VoB^nmv61Y0z3z(xa018hlcmWD
zml?oPw&m2REnaH!QM1c1pra0GVPXBw3q$ZetO1HYRBK!YVEJk6GcTo$J#)6)bs#3^
zMnV!YgI-hu_0e6Edbzbg0Dyt)jY#608vv6Noh2bLOmzN5BLGTp{W2&4;Q)X@y0nKF
zF0KjW4?sths0}^!;4dfujKlR9jDici070FR&H5;5Z2-u}hCv}T<qg2=i1A|KQk~!c
zK(K2gT%FICgO;cXk(Vyh@wEaVKMhw!op>s-Zf6vu;wwrwdjKF}Ny0@KE5b#wB$T16
zC|bTM5pr;qCj+f;3>Pn&CG`McxkhM1t7}p<0MhA-R&vS{0HsMNhL2>n;|92jV_4*M
zrN&bPZVYph;Y@55z{#7{FWnqAeze)s+GxoXEzF6xxHEtrLlA>LPVqRssrFUZ?a^f+
zRR9yt?sL*vbiX@+PMy0JcI|I-4uV(EN=R}?MKK-#T*O#&s{!0K8{On#5UA(mk+4AK
z1b9b;y3jb8H_H&l+QSJz<Be1^OV~QN#km<pS0hRl6jeI_lrCzI7B*^JtJA=%=xWAg
z89x9UTqfS;1W?2<71#Jgr*uz*wP7o+J`7I-?%n19Fgm`UVHl&i+;;!}9#jJu^w4Ux
zm7DG8B6|}TN6P0BFde+XwHSn%aQbNX6o54gU@EshdiY4SxcA7hJ@#m;00yrdn|pcH
z+2ao%KC+qNUeB>mBwrtlAwA|Q0st7V@&I78Gj`jfN4EIOW%={&ZcKY}X5-VmYJDJL
z@|lg18C{<l1`fEf*kXHRH8G4Qgyb)_U`StbOb4A{KeR{f>Tg8$#{0&7J@XA|_qu*H
zyzs`VvkB3r-0CSPQbix#*R%BNfrGlHJ^SX`s)YL%#ytv5N}s3fR+$6fTUd>CbD4^v
z1DKS(PiN&#IIt*pvC(R^-nUuGiyk@kfpW9iVzJ#v7gfFcr<a^DbQ`;mDncK11z@+z
znH-Jab$Aa@2xHLMKmNNt69(l!xNU|6+j+~-ZZ9gg+M-vLjo)ZEeb($kz(}*#LzEA3
z%m#137`WyJz?7Zau;*C3#iU{2*Sr91o!E^QbHdo^Pm0G_?9Ko=QN<)oh#Z~hO#tZb
z3Sf$x9vXhu49?y)BDM<RZH404;gr$t5g?coz$F48(|6y8Y74Cv=S~9vBuTI$s{vGS
z+O7L0hhilvqsAA2A4HzUK#}gpR80KMj(s|l5rp#W0N5arNDu;v{#^lJ*Vy3>lQCiO
z>5ZXb89S_ua|+aB3<Lly=Xfq9axX*J6ee8DJE;x7+ih;o#R*Ef$YLosn~b*0-xPoK
z)y=0*4PO<Pq??Q;Q+c_q+^$m{jq6dk^<GFw#=O2T2t8GSh+~6x9;)Dg(ya<iMR6mx
zo;gV*et)xg&y>;!mscIxcT^X>Pes$C(ZWDSC!E!(&fbn&^<D0W)mbIeGd?4_4C<D9
z)Y%`ToH_vj8U%67#?S{!q7`lg#v)Dhv9k1%dm)WN5}#xYzLaP9Dl021|LfJPzWy;Q
zYwP4;r!GZyNfn0@Cnww)kb7I_X;Gm6qALJ2;b=tfLXAEf?KT;~7eOml-M(D*b;-sj
z;t-VhNt0qj!zvUSJ1JH|#)h2CxO=B?$C$ImM`ng`wFf1CkO2UDIRM^+F_5-cO?#Y-
z&{tZZ2by(9zAK&k^|)_B!$K<*yY}nVg{3`u-!`Fn(rPo?k9(essN`v>utWWcqZ8JJ
z6l9F#nU3x3pfp=h&vluOA3=jQgRLEI;#iQ(S|o<g)Z<zaoj@1EN5EvjvlekI3TU?l
z2~%|whbZ;z;b9oh4mqGHx~lC~drLCaOm-@0+?)%b8SJaRIZ89N0zlDJuTvyMfb$hf
za~K49Q&Zw=2S687nu^1NBF?8IEkx+s)_$I>p=tpD-k_wzNARDa2sl=yIEII;UPsps
zfO@xq1$dWxZ@3@ck*=Q!-B@@4T7Fp!x3}SWRQKK?cuKuPud59JMxKs=ehK1vNZ14c
zNLFvwQIyaC6h*1Jz}@%|zDI@dj0){_a~PokC@OwgcMO!|SdH*)4X~ARnxcdTP)0pv
z1F$B54<MjD+?2PQ5*|Qa#=b`ty;X--Z6O4bYcVh(2naxF^x5krZ~~^oEq;LD4j9t2
zZE8kf07dB&31na*WPnfbzDgqgb*WTC2?s!Fa<V70cQ@vJPzo9<0?rA&)B*yabgD*#
zW1txj0A2+=Mj;@@`MaSIgaM!^^!_vt1K~sKyio5Y!JUykl7T=70E%LC`X9px@bBo&
zOS866Eu<le1_D6<=$Mu4ECA0ay-?tMAi#bcrKBi|8z47PTPbpwnKuCXxNr=I0Q^?R
zD=lCFw53a>5ChH#bV+@#L1sRG>SzhZ2CKl^SI0l&?DN+hJZC5D=7h_ApDPYF0bB*3
zi0UTB!C%z8j+Y9C<uQ(L9I56cFdEJGt7PK=pg;WeiQ{zH?;It__2vi*GkhoIe1Gk{
z^XIaMC)9sr;H>|jJ{%|tSm7WjxuU4a8+`B|)jySB{W}NybcAOOj)B&n&7n2^B2bJ*
zy`=xA82eR8@A`O#?IQ=lUvbH5zX&KKMlt)3RENLlhdMs0#e9s_^c~R(e-5%x(14@H
zbs-!B;5XloGQE<CfhKLawp&5_OaT2i=E(5MvyDIdbCT@6h8Rec`r~N1&PM_`<SFm@
z*G1gn-!aIqvuvM03_y98N6|i{fda+sDx8E76@Pwz{6U|<VNN)m89pUDg{IhV_9pn0
zf?n6J_#)<z2=eczf(uvz61!-awoRe;0)V1uO08FIN{_@z41_2B;IBWZ<#rK{v5F{O
zxlOK?QXu}rl=^kO#y!(khCdVPza|7blQ4%GtzG}em}N4`agLb7ou=eV`gVK9PCg*~
z@0y>heWjow#!7;RY{@^eOs}VPI)HGkdYw)om&<m{TN@@JE7SjbJ0XsB?>~e)Vt~F^
zT(WZU?#(d@l~SjmD_7jeTa_YPvN@smqKy&^dv0IQT$tnC0f*OAAV6NpjBm!R+%)IP
z>|JX0EKqWaYWKmJa~@plHY~C7CN}#p`i0Vh4nR;L980}4?3+DPu1)*rU!>3fD9q2A
zoEQ12(@!3VzJ%fzOaXP@VNW<$!~rKoWSBTHH3F1+GBJe2NgTt8=ZFnw3>E&TE6%Th
zlB^OzG$N5CWR-D+dxwb^Ao_wU@WM~?A<VqOlh(X-O9*=ohF7m<9^!()alFkhLxRD*
zHr4J{vjS1W#%}J7@eV&XuNzd`_Mm`(Td%Zw<MEdZQ817iHfXZ<zk27JzbCvozXAhM
rG=hVd*9{5`^xyiWUh1V@>ZSf40MeyK<nXOW00000NkvXXu0mjfE>enj

literal 0
HcmV?d00001

diff --git a/packages/web3-shared/flow/constants/constants.ts b/packages/web3-shared/flow/constants/constants.ts
new file mode 100644
index 000000000000..4e3d80589411
--- /dev/null
+++ b/packages/web3-shared/flow/constants/constants.ts
@@ -0,0 +1,14 @@
+import Auth from '@masknet/web3-constants/flow/auth.json'
+import Chain from '@masknet/web3-constants/flow/chain.json'
+import Token from '@masknet/web3-constants/flow/token.json'
+import { hookTransform, transform } from '@masknet/web3-shared-base'
+import { ChainId } from '../types'
+
+export const getAuthConstants = transform(ChainId, Auth)
+export const useAuthConstants = hookTransform(getAuthConstants)
+
+export const getChainConstants = transform(ChainId, Chain)
+export const useChainConstants = hookTransform(getChainConstants)
+
+export const getTokenConstants = transform(ChainId, Token)
+export const useTokenConstants = hookTransform(getTokenConstants)
diff --git a/packages/web3-shared/flow/constants/descriptors.ts b/packages/web3-shared/flow/constants/descriptors.ts
new file mode 100644
index 000000000000..5866eaa7d175
--- /dev/null
+++ b/packages/web3-shared/flow/constants/descriptors.ts
@@ -0,0 +1,102 @@
+import { getEnumAsArray } from '@dimensiondev/kit'
+import { EnhanceableSite, ExtensionSite } from '@masknet/shared-base'
+import {
+    ChainDescriptor,
+    createFungibleToken,
+    NetworkDescriptor,
+    NetworkPluginID,
+    ProviderDescriptor,
+} from '@masknet/web3-shared-base'
+import { ChainId, NetworkType, ProviderType, SchemaType } from '../types'
+
+const PLUGIN_ID = NetworkPluginID.PLUGIN_FLOW
+
+export const CHAIN_DESCRIPTORS: Array<ChainDescriptor<ChainId, SchemaType, NetworkType>> = [
+    {
+        type: NetworkType.Flow,
+        chainId: ChainId.Mainnet,
+        coinMarketCapChainId: '',
+        coinGeckoChainId: '',
+        coinGeckoPlatformId: '',
+        name: 'Flow',
+        color: '#16ff99',
+        fullName: 'Flow',
+        shortName: 'Flow',
+        network: 'mainnet',
+        nativeCurrency: createFungibleToken(
+            ChainId.Mainnet,
+            SchemaType.Fungible,
+            '0x1654653399040a61',
+            'Flow',
+            'FLOW',
+            8,
+            'https://static.flowscan.org/mainnet/icons/A.1654653399040a61.FlowToken.png',
+        ),
+        explorerURL: {
+            url: 'https://flowscan.org/',
+        },
+    },
+    {
+        type: NetworkType.Flow,
+        chainId: ChainId.Testnet,
+        coinMarketCapChainId: '',
+        coinGeckoChainId: '',
+        coinGeckoPlatformId: '',
+        name: 'Flow',
+        color: '#16ff99',
+        fullName: 'Flow',
+        shortName: 'Flow',
+        network: 'testnet',
+        nativeCurrency: createFungibleToken(
+            ChainId.Mainnet,
+            SchemaType.Fungible,
+            '0x7e60df042a9c0868',
+            'Flow',
+            'FLOW',
+            8,
+            'https://static.flowscan.org/mainnet/icons/A.1654653399040a61.FlowToken.png',
+        ),
+        explorerURL: {
+            url: 'https://testnet.flowscan.org/',
+        },
+    },
+]
+
+export const NETWORK_DESCRIPTORS: Array<NetworkDescriptor<ChainId, NetworkType>> = [
+    {
+        ID: `${PLUGIN_ID}_flow`,
+        networkSupporterPluginID: PLUGIN_ID,
+        chainId: ChainId.Mainnet,
+        type: NetworkType.Flow,
+        name: 'Flow',
+        icon: new URL('../assets/flow.png', import.meta.url),
+        iconColor: 'rgb(54, 173, 104)',
+        isMainnet: true,
+    },
+    {
+        ID: `${PLUGIN_ID}_flow_testnet`,
+        networkSupporterPluginID: PLUGIN_ID,
+        chainId: ChainId.Testnet,
+        type: NetworkType.Flow,
+        name: 'Flow Testnet',
+        icon: new URL('../assets/flow.png', import.meta.url),
+        iconColor: 'rgb(54, 173, 104)',
+        isMainnet: false,
+    },
+]
+export const PROVIDER_DESCRIPTORS: Array<ProviderDescriptor<ChainId, ProviderType>> = [
+    {
+        ID: `${PLUGIN_ID}_blocto`,
+        providerAdaptorPluginID: PLUGIN_ID,
+        type: ProviderType.Blocto,
+        name: 'Blocto',
+        icon: new URL('../assets/blocto.png', import.meta.url),
+        homeLink: 'https://portto.com/',
+        shortenLink: 'portto.com',
+        enableRequirements: {
+            supportedChainIds: getEnumAsArray(ChainId).map((x) => x.value),
+            supportedEnhanceableSites: getEnumAsArray(EnhanceableSite).map((x) => x.value),
+            supportedExtensionSites: getEnumAsArray(ExtensionSite).map((x) => x.value),
+        },
+    },
+]
diff --git a/packages/web3-shared/flow/constants/index.ts b/packages/web3-shared/flow/constants/index.ts
index b2e7d0fc248a..3d27755f3c46 100644
--- a/packages/web3-shared/flow/constants/index.ts
+++ b/packages/web3-shared/flow/constants/index.ts
@@ -1,10 +1,3 @@
-import Auth from '@masknet/web3-constants/flow/auth.json'
-import Token from '@masknet/web3-constants/flow/token.json'
-import { hookTransform, transform } from '@masknet/web3-shared-base'
-import { ChainId } from '../types'
-
-export const getAuthConstants = transform(ChainId, Auth)
-export const useAuthConstants = hookTransform(getAuthConstants)
-
-export const getTokenConstants = transform(ChainId, Token)
-export const useTokenConstants = hookTransform(getTokenConstants)
+export * from './constants'
+export * from './descriptors'
+export * from './primitives'
diff --git a/packages/web3-shared/flow/constants/primitives.ts b/packages/web3-shared/flow/constants/primitives.ts
new file mode 100644
index 000000000000..054fb39e486c
--- /dev/null
+++ b/packages/web3-shared/flow/constants/primitives.ts
@@ -0,0 +1 @@
+export const ZERO_ADDRESS = '0x0000000000000000'
diff --git a/packages/web3-shared/flow/env.d.ts b/packages/web3-shared/flow/env.d.ts
index 42660bb866d7..ce43b8542988 100644
--- a/packages/web3-shared/flow/env.d.ts
+++ b/packages/web3-shared/flow/env.d.ts
@@ -1,36 +1,1341 @@
+// cspell:disable
 /// <reference types="@masknet/global-types/webpack" />
 
+// After https://github.com/louisguitton/DefinitelyTyped/pull/1
+
 declare module '@blocto/fcl' {
-    export interface User {
-        addr: string | null
-        f_type: 'User'
+    // Type definitions for @onflow/fcl 0.0
+    // Project: https://github.com/onflow/fcl-js
+    // Definitions by: Louis Guitton <https://github.com/louisguitton/>
+    // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+
+    // CONFIGURATION
+    export type Environment = 'local' | 'canarynet' | 'testnet' | 'mainnet'
+
+    /**
+     * @see {@link https://docs.onflow.org/fcl/reference/api/#common-configuration-keys}
+     * @see {@link https://docs.onflow.org/fcl/reference/configure-fcl/}
+     */
+    export interface ConfigurationOptions {
+        /**
+         * API URL for the Flow Blockchain Access Node you want to be communicating
+         * with. See all available access node endpoints
+         * [here]{@link https://docs.onflow.org/access-api/#flow-access-node-endpoints}.
+         */
+        'accessNode.api': string
+        /**
+         * Used in conjunction with stored interactions.
+         */
+        env?: Environment
+        /**
+         * Points FCL at the Wallet or Wallet Discovery mechanism.
+         */
+        'discovery.wallet': string
+        /**
+         * ALPHA - Endpoint for alternative configurable Wallet Discovery mechanism.
+         * Read more on
+         * [discovery]{@link https://docs.onflow.org/fcl/reference/api/#discovery}.
+         */
+        'discovery.authn.endpoint'?: string
+        /**
+         * Your applications title, can be requested by wallets and other services.
+         */
+        'app.detail.title'?: string
+        /**
+         * Url for your applications icon, can be requested by wallets and other
+         * services.
+         */
+        'app.detail.icon'?: string
+    }
+
+    export interface Configuration {
+        /**
+         * Set a configuration value.
+         *
+         * @param key - The key of the value to set. Must be one of the options for
+         * the configuration at initialization.
+         * @param value - The value to set.
+         */
+        put(key: keyof ConfigurationOptions, value: string): Configuration
+        /**
+         * Set a configuration value.
+         *
+         * @param key - The key of the value to set. May start with `'0x'`.
+         * Configuration keys that start with `'0x'` will be replaced in FCL scripts
+         * and transactions, this allows you to write your script or transaction
+         * Cadence code once and not have to change it when you point your
+         * application at a difference instance of the Flow Blockchain.
+         * @param value - The value to set.
+         */
+        put(key: string, value: string | number): Configuration
+        /**
+         * Get a configuration value.
+         *
+         * @param key - The key of the value to get.
+         * @param fallback - An optional fallback value to return in case the value
+         * was not set.
+         */
+        get(key: string, fallback?: string | number): Promise<string | number | undefined>
+    }
+
+    /**
+     * FCL has a mechanism that lets you configure various aspects of FCL. The
+     * main idea here (from an FCL perspective) should be that when you move from
+     * one instance of the Flow Blockchain to another (Local Emulator to Testnet
+     * to Mainnet) the only thing you should need to change (once again from an
+     * FCL perspective) is your configuration.
+     *
+     * ```typescript
+     * import * as fcl from "@onflow/fcl"
+     *
+     * const configuration = fcl.config({
+     *   "accessNode.api": "https://access-testnet.onflow.org",
+     *   "discovery.wallet": "https://fcl-discovery.onflow.org/testnet/authn",
+     *   "0xProfile": "0xba1132bc08f82fe2"
+     * });
+     *
+     * configuration.put('foo', 'bar');
+     * configuration.get('foo').then(console.log); // ↵ "bar"
+     * ```
+     *
+     * @param options - The initial configuration values.
+     */
+    export function config(options?: ConfigurationOptions): Configuration
+
+    // WALLET INTERACTIONS
+    /**
+     * @see {@link https://github.com/onflow/fcl-discovery/blob/master/data/services.json}
+     */
+    export interface WalletService {
+        f_type: 'Service'
+        f_vsn: string
+        type: 'authn'
+        method: string
+        uid: string
+        endpoint: string
+        provider: {
+            address: Address
+            name: string
+            icon: string
+            description: string
+            color: string
+            supportEmail: string
+            website: string
+        }
+    }
+
+    export interface AuthenticateOptions {
+        service: WalletService
+    }
+
+    /**
+     * Calling this method will authenticate the current user via any wallet that supports FCL.
+     * Once called, FCL will initiate communication with the configured `discovery.wallet`
+     * endpoint which lets the user select a wallet to authenticate with.
+     * Once the wallet provider has authenticated the user, FCL will set the values on the
+     * [current user object]{@link CurrentUserObject} for future use and authorization.
+     *
+     * @param options `authenticate` can also take a service returned from {@link discovery}
+     *
+     * @see {@link https://docs.onflow.org/fcl/reference/api/#authenticate}
+     */
+    export function authenticate(options?: AuthenticateOptions): void
+
+    // Ref: https://docs.onflow.org/fcl/reference/api/#unauthenticate
+    /**
+     * Logs out the current user and sets the values on the [current user object]{@link CurrentUserObject} to null.
+     */
+    export function unauthenticate(): void
+
+    /**
+     * A **convenience method** that calls {@link unauthenticate} and then {@link authenticate} for the current user.
+     * @see {@link https://docs.onflow.org/fcl/reference/api/#reauthenticate}
+     */
+    export function reauthenticate(): void
+
+    /**
+     * A **convenience method** that calls and is equivalent to {@link authenticate}.
+     * @see {@link https://docs.onflow.org/fcl/reference/api/#signup}
+     */
+    export function signUp(): void
+
+    /**
+     * A **convenience method** that calls and is equivalent to {@link authenticate}.
+     * @see {@link https://docs.onflow.org/fcl/reference/api/#login}
+     */
+    export function logIn(): Promise<{
+        addr: string
+    }>
+
+    /**
+     * A **convenience method** that produces the needed authorization details for the
+     * current user to submit transactions to Flow. It defines a signing function that
+     * connects to a user's wallet provider to produce signatures to submit transactions.
+     * @see {@link https://docs.onflow.org/fcl/reference/api/#authz}
+     */
+    export function authz(): AuthorizationObject
+
+    /**
+     * Holds the [current user]{@link CurrentUserObject}, if set, and offers a set of
+     * functions to manage the authentication and authorization of the user.
+     */
+    export function currentUser(): CurrentUserObject
+
+    export namespace currentUser {
+        /**
+         * @param callback The callback will be called with the [current user]{@link CurrentUserObject}
+         * as the first argument when the current user is set or removed.
+         */
+        function subscribe(callback: (user: CurrentUserObject) => void): void
+
+        /**
+         * Returns the [current user object]{@link CurrentUserObject}.
+         * This is the same object that is set and available on {@link subscribe}.
+         */
+        function snapshot(): CurrentUserObject
+
+        /**
+         * Equivalent to {@link fcl.authenticate}.
+         * @param options `authenticate` can also take a service returned from {@link fcl.discovery}
+         */
+        function authenticate(options?: AuthenticateOptions): void
+
+        /**
+         * Equivalent to {@link fcl.unauthenticate}.
+         * @see {@link https://docs.onflow.org/fcl/reference/api/#currentuserunauthenticate}
+         */
+        function unauthenticate(): void
+
+        /**
+         * Equivalent to {@link fcl.authz}.
+         * @see {@link https://docs.onflow.org/fcl/reference/api/#currentuserauthorization}
+         */
+        function authorization(): void
+
+        /**
+         * A method to use allowing the user to personally sign data via FCL Compatible Wallets/Services.
+         * @param message A hexadecimal string to be signed
+         * @see {@link https://docs.onflow.org/fcl/reference/api/#currentusersignusermessage}
+         */
+        function signUserMessage(message: string): Promise<CompositeSignature[]>
+    }
+
+    /**
+     * @see {@link https://github.com/onflow/fcl-js/blob/master/packages/fcl/src/wallet-provider-spec/draft-v2.md#compositesignature}
+     */
+    export interface CompositeSignature {
+        f_type: 'CompositeSignature'
         f_vsn: string
-        loggedIn: boolean | null
+        addr: Address
+        keyId: number
+        signature: string
     }
 
-    export interface Account {
-        address: string
-        balance: string
+    /**
+     * Discovery abstracts away code so that developers don't have to deal with the
+     * discovery of Flow compatible wallets, integration, or authentication.
+     * Using `discovery` from FCL allows dapps to list and authenticate with
+     * wallets while having full control over the UI.
+     * Common use cases for this are login or registration pages.
+     * (Alternatively, if you don't need control over your UI you can
+     * continue to use the `discovery.wallet` config value documented
+     * in the Quickstart for the simplest configuration.)
+     * @see {@link https://docs.onflow.org/fcl/reference/api/#discovery-1}
+     */
+    export namespace discovery {
+        /**
+         * By default, limited functionality services, like Ledger,
+         * require apps to opt-in in order to display to users.
+         * This is so users don't authenticate only to later find out
+         * certain services cannot complete certain actions.
+         * To enable specific limited functionality services in an application,
+         * use the `discovery.authn.include` property in your configuration
+         * with a value of an array of services you'd like your app to
+         * opt-in to displaying for users.
+         * @see {@link https://docs.onflow.org/fcl/reference/api/#authn}
+         */
+        namespace authn {
+            /**
+             * Return a list of `authn` services.
+             * @see {@link https://docs.onflow.org/fcl/reference/api/#discoveryauthnsnapshot}
+             */
+            function snapshot(): Promise<WalletService[]>
+
+            /**
+             * @param callback The callback sent to `subscribe` will be called with a list of `authn` services.
+             * @see {@link https://docs.onflow.org/fcl/reference/api/#discoveryauthnsubscribecallback}
+             */
+            // TODO: check syntax of param in https://github.com/onflow/fcl-js or with FCL dev team
+            function subscribe(callback: (res: { results: WalletService[] }) => void): void
+        }
+    }
+
+    // ON-CHAIN INTERACTIONS
+
+    export interface QueryOptions {
+        /**
+         * A valid cadence script.
+         */
+        cadence: string
+        /**
+         * Any arguments to the script if needed should be supplied via
+         * a function that returns an array of arguments.
+         */
+        args?: ArgumentFunction
+        /**
+         * Compute (Gas) limit for query. Read the documentation about
+         * computation cost for information about how computation cost is calculated on Flow.
+         */
+        limit?: number
+    }
+    /**
+     * Allows you to submit scripts to query the blockchain.
+     * @param options Pass in the following as a single object with the following keys.
+     * All keys are optional unless otherwise stated.
+     * @see {@link https://docs.onflow.org/fcl/reference/api/#query}
+     */
+    export function query(options: QueryOptions): Promise<any>
+
+    export interface MutateOptions {
+        /**
+         * A valid cadence transaction.
+         */
+        cadence: string
+        /**
+         * Any arguments to the script if needed should be supplied via a function that returns an array of arguments.
+         */
+        args?: ArgumentFunction
+        /**
+         * Compute (Gas) limit for query. Read the documentation about computation
+         * cost for information about how computation cost is calculated on Flow.
+         */
+        limit?: number
+        /**
+         * The authorization function that returns a valid {@link AuthorizationObject} for the proposer role.
+         */
+        proposer?: AuthorizationFunction
+    }
+
+    /**
+     * Allows you to submit transactions to the blockchain to potentially mutate the state.
+     * ⚠️When being used in the browser, `fcl.mutate` uses the built-in `fcl.authz` function
+     * to produce the authorization (signatures) for the current user.
+     * When calling this method from Node.js, you will need to supply your own custom authorization function.
+     * @param options
+     * @returns The transaction ID.
+     * @see {@link https://docs.onflow.org/fcl/reference/api/#mutate}
+     */
+    export function mutate(options: MutateOptions): Promise<string>
+
+    export interface CompositeSignatures {
+        addr: Address
+        keyId: number
+        signature: string
+    }
+
+    /**
+     * A method allowing applications to cryptographically verify the ownership of a
+     * Flow account by verifying a message was signed by a user's private key/s.
+     * This is typically used with the response from `currentUser.signUserMessage`.
+     * @param message A hexadecimal string
+     * @param compositeSignatures An Array of CompositeSignatures
+     * @return true if verifed
+     * @see {@link https://docs.onflow.org/fcl/reference/api/#verifyusersignatures}
+     */
+    export function verifyUserSignatures(message: string, compositeSignatures: CompositeSignatures[]): Promise<boolean>
+
+    /**
+     * Sends arbitrary scripts, transactions, and requests to Flow.
+     * This method consumes an array of builders that are to be resolved and sent.
+     * The builders required to be included in the array depend on the interaction that is being built.
+     * @param builders
+     * @returns An object containing the data returned from the chain.
+     * Should always be decoded with `fcl.decode()` to get back appropriate JSON keys and values.
+     * @see {@link https://docs.onflow.org/fcl/reference/api/#send}
+     */
+    export function send(builders: Builders[]): Promise<ResponseObject>
+
+    /**
+     * Decodes the response from `fcl.send()` into the appropriate JSON
+     * representation of any values returned from Cadence code.
+     * @param response Should be the response returned from `fcl.send([...])`
+     * @returns A JSON representation of the raw string response depending on the cadence code executed.
+     * The return value can be a single value and type or an object with multiple types.
+     * @see {@link https://docs.onflow.org/fcl/reference/api/#decode}
+     */
+    export function decode(response: ResponseObject): any
+
+    /**
+     * A builder function that returns the interaction to get an account by address.
+     * ⚠️Consider using the pre-built interaction {@link account} if you do not need to pair with any other builders.
+     * @param address Address of the user account with or without a prefix (both formats are supported).
+     * @returns A JSON representation of a user account.
+     * @see {@link https://docs.onflow.org/fcl/reference/api/#getaccount}
+     */
+    export function getAccount(address: Address): AccountObject
+
+    /**
+     * A builder function that returns the interaction to get the latest block.
+     * 📣 Use with {@link atBlockId} and {@link atBlockHeight} when building
+     * the interaction to get information for older blocks.
+     * ⚠️Consider using the pre-built interaction {@link latestBlock}
+     * if you do not need to pair with any other builders.
+     * @param isSealed If the latest block should be sealed or not.
+     * @returns The latest block if not used with any other builders.
+     * @see {@link https://docs.onflow.org/fcl/reference/api/#getblock}
+     */
+    export function getBlock(isSealed?: boolean): BlockObject
+
+    /**
+     * A builder function that returns a partial interaction to a block at a specific height.
+     * ⚠️Use with other interactions like {@link getBlock} to get a full interaction at the specified block height.
+     * @param blockHeight The height of the block to execute the interaction at.
+     * @returns A partial interaction to be paired with another interaction such as {@link getBlock} or {@link getAccount}.
+     * @see {@link https://docs.onflow.org/fcl/reference/api/#atblockheight}
+     */
+    export function atBlockHeight(blockHeight: number): Partial<Interaction>
+
+    /**
+     * A builder function that returns a partial interaction to a block at a specific block ID.
+     * ⚠️Use with other interactions like {@link getBlock} to get a full interaction at the specified block block ID.
+     * @param blockId The ID of the block to execute the interaction at.
+     * @returns A partial interaction to be paired with another interaction such as {@link getBlock} or {@link getAccount}.
+     * @see {@link https://docs.onflow.org/fcl/reference/api/#atblockid}
+     */
+    export function atBlockId(blockId: string): Partial<Interaction>
+
+    /**
+     * A builder function that returns the interaction to get a block header.
+     * 📣 Use with {@link atBlockId} and {@link atBlockHeight} when building
+     * the interaction to get information for older blocks.
+     * @returns The latest block header if not used with any other builders.
+     * @see {@link https://docs.onflow.org/fcl/reference/api/#getblockheader}
+     */
+    export function getBlockHeader(): BlockHeaderObject
+
+    /**
+     * A builder function that returns all instances of a particular event (by name) within a height range.
+     * ⚠️The block range provided must be from the current spork.
+     * ⚠️The block range provided must be 250 blocks or lower per request.
+     * @param eventName The name of the event.
+     * @param fromBlockHeight The height of the block to start looking for events (inclusive).
+     * @param toBlockHeight The height of the block to stop looking for events (inclusive).
+     * @returns An array of events that matched the eventName.
+     * @see {@link https://docs.onflow.org/fcl/reference/api/#geteventsatblockheightrange}
+     */
+    export function getEventsAtBlockHeightRange(
+        eventName: EventName,
+        fromBlockHeight: number,
+        toBlockHeight: number,
+    ): EventObject[]
+
+    /**
+     * A builder function that returns all instances of a particular event (by name)
+     * within a set of blocks, specified by block ids.
+     * ⚠️The block range provided must be from the current spork.
+     * @param eventName The name of the event.
+     * @param blockIds The ids of the blocks to scan for events.
+     * @returns An array of events that matched the eventName.
+     * @see {@link https://docs.onflow.org/fcl/reference/api/#geteventsatblockids}
+     */
+    export function getEventsAtBlockIds(eventName: EventName, blockIds: string[]): EventObject[]
+
+    /**
+     * A builder function that returns all a collection containing a list of transaction ids by its collection id.
+     * ⚠️The block range provided must be from the current spork.
+     * All events emitted during past sporks is current unavailable.
+     * @param collectionID The id of the collection.
+     * @returns An object with the id and a list of transactions within the requested collection.
+     */
+    export function getCollection(collectionID: string): CollectionObject
+
+    /**
+     * A builder function that returns the status of transaction.
+     * ⚠️The transactionID provided must be from the current spork.
+     * 📣 Consider [subscribing to the transaction from fcl.tx(id)]{@link tx} instead of calling this method directly.
+     * @param transactionId The transactionID returned when submitting a transaction. Example: 9dda5f281897389b99f103a1c6b180eec9dac870de846449a302103ce38453f3
+     * @see {@link https://docs.onflow.org/fcl/reference/api/#gettransactionstatus}
+     */
+    export function getTransactionStatus(transactionId: string): TransactionObject & {
+        /**
+         * The status as as descriptive text (e.g. "FINALIZED").
+         */
+        statusString: string
+    }
+
+    /**
+     * A builder function that returns a {@link TransactionObject} once decoded.
+     * ⚠️The transactionID provided must be from the current spork.
+     * 📣 Consider using {@link tx} instead of calling this method directly.
+     * @param transactionId The transactionID returned when submitting a transaction. Example: 9dda5f281897389b99f103a1c6b180eec9dac870de846449a302103ce38453f3
+     * @see {@link https://docs.onflow.org/fcl/reference/api/#gettransaction}
+     */
+    export function getTransaction(transactionId: string): TransactionObject
+
+    /**
+     * A utility builder to be used with `fcl.args[...]` to create FCL supported arguments for interactions.
+     * @param value Any value that you are looking to pass to other builders.
+     * @param type A type supported by Flow.
+     * @returns Holds the value and type passed in.
+     * @see {@link https://docs.onflow.org/fcl/reference/api/#arg}
+     */
+    export function arg(value: any, type: FType): ArgumentObject
+
+    /**
+     * A utility builder to be used with other builders to pass in arguments with a value and supported type.
+     * @param args An array of arguments that you are looking to pass to other builders.
+     * @returns An interaction that contains the arguments and types passed in. This alone is a partial and incomplete interaction.
+     * @see {@link https://docs.onflow.org/fcl/reference/api/#args}
+     */
+    export function args(args: ArgumentObject[]): Partial<Interaction>
+
+    /**
+     * A template builder to use a Cadence script for an interaction.
+     * 📣 Use with {@link args} to pass in arguments dynamically.
+     * @param CODE Should be valid Cadence script.
+     * @returns An interaction containing the code passed in.
+     * @see {@link https://docs.onflow.org/fcl/reference/api/#script}
+     */
+    export function script(CODE: string): Interaction
+
+    /**
+     * A template builder to use a Cadence transaction for an interaction.
+     * ⚠️Must be used with {@link payer}, {@link proposer}, {@link authorizations}
+     * to produce a valid interaction before sending to the chain.
+     * 📣 Use with {@link args} to pass in arguments dynamically.
+     * @param CODE Should be valid a Cadence transaction.
+     * @returns An partial interaction containing the code passed in.
+     * Further builders are required to complete the interaction - see warning.
+     * @see {@link https://docs.onflow.org/fcl/reference/api/#transaction}
+     */
+    export function transaction(CODE: string): Partial<Interaction>
+
+    /**
+     * A pre-built interaction that returns the details of an account from their public address.
+     * @param address Address of the user account with or without a prefix (both formats are supported).
+     * @see {@link https://docs.onflow.org/fcl/reference/api/#transaction}
+     */
+    export function account(address: Address): Promise<AccountObject>
+
+    /**
+     * A pre-built interaction that returns the latest block (optionally sealed or not), by id, or by height.
+     * @param sealed If the latest block should be sealed or not.
+     * @param id ID of block to get.
+     * @param height Height of block to get.
+     * @returns A JSON representation of a block.
+     * @see {@link https://docs.onflow.org/fcl/reference/api/#block}
+     */
+    export function block(options?: { sealed?: boolean; id?: string; height?: number }): Promise<BlockObject>
+
+    /**
+     * A utility function that lets you set the transaction to get subsequent
+     * status updates (via polling) and the finalized result once available.
+     * The poll rate is set at 2500ms and will update at that interval until
+     * transaction is sealed.
+     *
+     * @param transactionId A valid transaction id.
+     * @see {@link https://docs.onflow.org/fcl/reference/api/#tx}
+     */
+    export function tx(transactionId: string): {
+        /**
+         * Returns the current state of the transaction.
+         */
+        // TODO: check return type in https://github.com/onflow/fcl-js or with FCL dev team
+        snapshot(): TransactionObject
+        /**
+         * Calls the callback passed in with the new transaction on a status change.
+         */
+        subscribe(callback: (tx: TransactionObject) => void): void
+        /**
+         * Provides the transaction once status 2 is returned.
+         */
+        onceFinalized(): Promise<TransactionObject>
+        /**
+         * Provides the transaction once status 3 is returned.
+         */
+        onceExecuted(): Promise<TransactionObject>
+        /**
+         * Provides the transaction once status 4 is returned.
+         */
+        onceSealed(): Promise<TransactionObject>
+    }
+
+    /**
+     * A utility function that lets you set the transaction to get subsequent status
+     * updates (via polling) and the finalized result once available.
+     * ⚠️The poll rate is set at 10000ms and will update at that interval for getting new events.
+     * @param eventName A valid event name.
+     * @see {@link https://docs.onflow.org/fcl/reference/api/#events}
+     */
+    export function events(eventName: string): {
+        /**
+         * Calls the callback passed in with the new event.
+         */
+        subscribe(callback: (tx: EventObject) => void): void
+    }
+
+    // TYPES, INTERFACES, AND DEFINITIONS
+    // TODO: How to better leverage TypeScript to say that Builders us the union of all builder methods:
+    // getAccount, getBlock, atBlockHeight, atBlockId, getBlockHeader, getEventsAtBlockHeightRange, getEventsAtBlockIds,
+    // getCollection, getTransactionStatus, getTransaction, arg, script, transaction, account, block
+    /**
+     * Builders are modular functions that can be coupled together with `fcl.send([...builders])``
+     * to create an {@link Interaction}. The builders needed to create an interaction
+     * depend on the script or transaction that is being sent.
+     * @see {@link https://docs.onflow.org/fcl/reference/api/#builders-1}
+     */
+    export type Builders = any
+
+    // TODO: Double check with FCL dev team if Interaction needs to be added from https://github.com/onflow/fcl-js/blob/master/packages/sdk/src/interaction/interaction.js#L66
+    /**
+     * An interaction is an object containing the information to perform an action on chain.
+     * This object is populated through builders and converted into the approriate access node API call.
+     * A 'partial' interaction is an interaction object that does not have sufficient
+     * information to the intended on-chain action. Multiple partial interactions (through builders)
+     * can be coupled to create a complete interaction.
+     * @see {@link https://docs.onflow.org/fcl/reference/api/#interaction}
+     * @see {@link https://github.com/onflow/fcl-js/blob/master/packages/sdk/src/interaction/interaction.js#L66}
+     */
+    export type Interaction = object
+
+    /**
+     * @see {@link https://docs.onflow.org/fcl/reference/api/#currentuserobject}
+     */
+    export interface CurrentUserObject {
+        /**
+         * The public address of the current user
+         */
+        addr: Address | undefined
+        /**
+         * Allows wallets to specify a content identifier for user metadata.
+         */
+        cid: string | undefined
+        /**
+         * Allows wallets to specify a time-frame for a valid session.
+         */
+        expiresAt: number | undefined
+        /**
+         * A type identifier used internally by FCL.
+         */
+        f_type: string
+        /**
+         * FCL protocol version.
+         */
+        f_vsn: string
+        /**
+         * If the user is logged in.
+         */
+        loggedIn: boolean | undefined
+        /**
+         * A list of trusted services that express ways of interacting with the current user's identity,
+         * including means to further discovery, authentication, authorization, or other kinds of interactions.
+         */
+        services: object[]
+    }
+
+    /**
+     * An authorization function must produce the information of the user that is going
+     * to sign and a signing function to use the information to produce a signature.
+     *
+     * 📣 By default FCL exposes `fcl.authz` that produces the authorization object
+     * for the current user (given they are signed in and only on the browser).
+     * Replace this with your own function that conforms to this interface to
+     * use it wherever an authorization object is needed.
+     * @see {@link https://docs.onflow.org/fcl/reference/api/#authorizationobject}
+     */
+    export interface AuthorizationObject {
+        /**
+         * The address of the authorizer
+         */
+        addr: Address
+        /**
+         * A function that allows FCL to sign using the authorization details and produce a valid signature.
+         */
+        signingFunction: SigningFunction
+        /**
+         * The index of the key to use during authorization. (Multiple keys on an account is possible).
+         */
+        keyId: number
+        /**
+         * A number that is incremented per transaction using they keyId.
+         */
+        sequenceNum: number
+    }
+
+    /**
+     * An object that contains all the information needed for FCL to sign a message with the user's signature.
+     * @see {@link https://docs.onflow.org/fcl/reference/api/#signableobject}
+     */
+    export interface SignableObject {
+        /**
+         * The address of the authorizer
+         */
+        addr: Address
+        /**
+         * The index of the key to use during authorization. (Multiple keys on an account is possible).
+         */
+        keyId: number
+        /**
+         * A {@link SigningFunction} that can produce a valid signature for a user from a message.
+         */
+        signature: SigningFunction
+    }
+
+    /**
+     * The JSON representation of an account on the Flow blockchain.
+     * @see {@link https://docs.onflow.org/fcl/reference/api/#accountobject}
+     */
+    export interface AccountObject {
+        /**
+         * The address of the account
+         */
+        address: Address
+        /**
+         * The FLOW balance of the account in 10*6.
+         */
+        balance: number
+        /**
+         * The code of any Cadence contracts stored in the account.
+         */
         code: string
+        /**
+         * An object with keys as the contract name deployed and the value as the the cadence string.
+         */
+        contracts: Contract
+        /**
+         * Any contracts deployed to this account.
+         */
+        keys: KeyObject[]
+    }
+
+    /**
+     * @see {@link https://docs.onflow.org/fcl/reference/api/#address}
+     */
+    export type Address = string
+
+    /**
+     * An argument object created by `fcl.arg(value,type)`
+     * @see {@link https://docs.onflow.org/fcl/reference/api/#argumentobject}
+     */
+    export interface ArgumentObject {
+        /**
+         * Any value to be used as an argument to a builder.
+         */
+        value: any
+        /**
+         * Any of the supported types on Flow.
+         */
+        xform: FType
+    }
+
+    /**
+     * An function that takes the `fcl.arg` function and fcl types `t`
+     * and returns an array of `fcl.arg(value,type)`.
+     * @see {@link https://docs.onflow.org/fcl/reference/api/#argumentfunction}
+     */
+    export type ArgumentFunction = (arg: (value: any, xform: FType) => ArgumentObject, t: FType) => ArgumentObject[]
+
+    /**
+     * An authorization function must produce the information of the user that
+     * is going to sign and a signing function to use the information to produce a signature.
+     * 📣 By default FCL exposes `fcl.authz` that produces the authorization object
+     * for the current user (given they are signed in and only on the browser).
+     * Replace this with your own function that conforms to this interface
+     * to use it wherever an authorization object is needed.
+     * @param account The account of the user that is going to sign.
+     * @returns The object that contains all the information needed by FCL to authorize a user's transaction.
+     * @see {@link https://docs.onflow.org/fcl/reference/api/#authorization-function}
+     */
+    export type AuthorizationFunction = (account: AccountObject) => Promise<AuthorizationObject>
+
+    /**
+     * @see {@link https://docs.onflow.org/fcl/reference/api/#payload}
+     */
+    export interface SigningPayload {
+        /**
+         * The encoded string which needs to be used to produce the signature.
+         */
+        message: string
+        /**
+         * The encoded string which needs to be used to produce the signature.
+         */
+        addr: Address
+        /**
+         * The encoded string which needs to be used to produce the signature.
+         */
+        keyId: string
+        /**
+         * The encoded string which needs to be used to produce the signature.
+         */
+        roles: string
+        /**
+         * The raw transactions information, can be used to create the message
+         * for additional safety and lack of trust in the supplied message.
+         */
+        voucher: object
+    }
+
+    /**
+     * Consumes a payload and produces a signature for a transaction.
+     * @see {@link https://docs.onflow.org/fcl/reference/api/#signing-function}
+     */
+    export type SigningFunction = (options: SigningPayload) => Promise<SignableObject>
+
+    /**
+     * @see {@link https://docs.onflow.org/fcl/reference/api/#transactionrolesobject}
+     */
+    export interface TransactionRolesObject {
+        /**
+         * A Boolean representing if this signature to be produced for a proposer.
+         */
+        proposer: boolean
+        /**
+         * A Boolean representing if this signature to be produced for an authorizer.
+         */
+        authorizer: boolean
+        /**
+         * A Boolean representing if this signature to be produced for a payer.
+         */
+        payer: boolean
+    }
+
+    /**
+     * A event name in Flow must follow the format `A.{AccountAddress}.{ContractName}.{EventName}`
+     * eg. `A.ba1132bc08f82fe2.Debug.Log`
+     * @see {@link https://docs.onflow.org/fcl/reference/api/#eventname}
+     */
+    export type EventName = string
+
+    /**
+     * A formatted string that is a valid cadence contract.
+     * @see {@link https://docs.onflow.org/fcl/reference/api/#contract}
+     */
+    export type Contract = string
+
+    /**
+     * @see {@link https://github.com/onflow/fcl-js/blob/9cf62bfaabb02444e6daa24b1ee10faeed40f732/packages/util-encode-key/src/index.js#L4}
+     */
+    export enum Curve {
+        ECDSA_P256 = 2,
+        ECDSA_secp256k1 = 3,
+    }
+    /**
+     * @see {@link https://github.com/onflow/fcl-js/blob/9cf62bfaabb02444e6daa24b1ee10faeed40f732/packages/util-encode-key/src/index.js#L9}
+     */
+    export enum Hash {
+        SHA2_256 = 1,
+        SHA3_256 = 3,
+    }
+    /**
+     * This is the JSON representation of a key on the Flow blockchain.
+     * @see {@link https://docs.onflow.org/fcl/reference/api/#keyobject}
+     */
+    export interface KeyObject {
+        /**
+         * The address of the account
+         */
+        index: number
+        publicKey: string
+        /**
+         * An index referring to one of ECDSA_P256 or ECDSA_secp256k1
+         */
+        signAlgo: Curve
+        /**
+         * An index referring to one of SHA2_256 or SHA3_256
+         */
+        hashAlgo: Hash
+        /**
+         * A number between 1 and 1000 indicating the relative weight to other keys on the account.
+         */
+        weight: number
+        /**
+         * This number is incremented for every transaction signed using this key.
+         */
+        sequenceNumber: number
+        /**
+         * If this key has been disabled for use.
+         */
+        revoked: boolean
+    }
+
+    // TODO: Double check with FCL dev team where I can find types for SealedBlockObject (they are absent from docs https://docs.onflow.org/fcl/reference/api/#blockobject)
+    export type SealedBlockObject = object
+
+    /**
+     * The JSON representation of a key on the Flow blockchain.
+     * @see {@link https://docs.onflow.org/fcl/reference/api/#blockobject}
+     */
+    export type BlockObject = BlockHeaderObject & {
+        /**
+         * Contains the ids of collections included in the block.
+         */
+        collectionGuarantees: CollectionGuaranteeObject[]
+        /**
+         * The details of which nodes executed and sealed the blocks.
+         */
+        blockSeals: SealedBlockObject[]
+        /**
+         * All signatures.
+         */
+        signatures: number[]
+    }
+
+    /**
+     * The subset of the {@link BlockObject} containing only the header values of a block.
+     * @see {@link https://docs.onflow.org/fcl/reference/api/#blockheaderobject}
+     */
+    export interface BlockHeaderObject {
+        /**
+         * The id of the block.
+         */
+        id: string
+        /**
+         * The id of the parent block.
+         */
+        parentId: string
+        /**
+         * The height of the block.
+         */
+        height: number
+        /**
+         * Contains time related fields.
+         */
+        timestamp: object
+    }
+
+    /**
+     * A collection that has been included in a block.
+     * @see {@link https://docs.onflow.org/fcl/reference/api/#collectionguaranteeobject}
+     */
+    export interface CollectionGuaranteeObject {
+        /**
+         * The id of the block.
+         */
+        collectionId: string
+        /**
+         * All signatures.
+         */
+        signatures: SignableObject[]
+    }
+
+    /**
+     * A collection is a list of transactions that are contained in the same block.
+     * @see {@link https://docs.onflow.org/fcl/reference/api/#collectionobject}
+     */
+    export interface CollectionObject {
+        /**
+         * The id of the collection.
+         */
+        id: string
+        /**
+         * The ids of the transactions included in the collection.
+         */
+        transactionIds: string[]
     }
 
-    export const config: (setup: Record<string, any>) => {}
-    export const currentUser: () => {
-        subscribe: (callback: (user: User) => void) => void
-        snapshot: () => Promise<User | null>
-        authenticate: () => {}
-        unauthenticate: () => {}
-    }
-    export const subscribe: (callback: (user: User) => void) => void
-    export const snapshot: () => User
-    export const authenticate: () => {}
-    export const unauthenticate: () => {}
-    export const logIn: () => Promise<User | null>
-    export const logOut: () => {}
-    export const signUp: () => {}
-
-    export const send: (data: string[]) => Promise<any>
-    export const script: (text: string) => string
-    export const query: (options: { cadence: string; args: (arg: any, t: any) => any[] }) => Promise<any>
-    export const getAccount: (address: string) => string
+    interface Signature {
+        /**
+         * Sequence number of the key used to perform this signature
+         */
+        sequenceNumber: string
+        /**
+         * ID of the key in the account used to perform this signature
+         */
+        keyId: number
+        /**
+         * The signature
+         */
+        signature: string
+    }
+
+    /**
+     * The format of all responses in FCL returned from `fcl.send(...)`.
+     * For full details on the values and descriptions of the keys, view here.
+     * @see {@link https://docs.onflow.org/fcl/reference/api/#responseobject}
+     * @see {@link https://github.com/onflow/fcl-js/tree/master/packages/sdk/src/response#internal-properties}
+     */
+    export interface ResponseObject {
+        /**
+         * A marker that represents the type of the response. See {@link Interaction} for information on the possible tag values.
+         */
+        tag: number
+        transaction: {
+            /**
+             * The Cadence code used to execute this transaction
+             */
+            script: string
+            /**
+             * The arguments passed in to the transaction
+             */
+            args: string[]
+            /**
+             * The reference block id for this transaction
+             */
+            referenceBlockId: string
+            /**
+             * The gas limit for the transaction
+             */
+            gasLimit: number
+            proposalKey: {
+                /**
+             Sequence number of key used by the proposer of this transaction
+              */
+                sequenceNumber: string
+                /**
+             The ID of the key in the account used by the proposer of this transaction
+              */
+                keyId: number
+                /**
+             The address of the proposer of this transaction
+              */
+                address: Address
+            }
+            /**
+             * Address of the payer of the transaction
+             */
+            payer: Address
+            /**
+             * Address of the proposer of this transaction
+             */
+            proposer: Address
+            /**
+             * Array of addresses of authorizers of this transaction
+             */
+            authorizers: Address[]
+            /**
+             * The payload signatures for the transaction
+             */
+            payloadSignatures: Signature[]
+            /**
+             * The envelope signtaures for the transaction
+             */
+            envelopeSignatures: Signature[]
+        }
+        /**
+         * The response from {@link getTransactionStatus} request.
+         */
+        transactionStatus: TransactionObject
+        /**
+         * The id of the transaction executed during a Transaction request.
+         */
+        transactionId: string
+        /**
+         * The encoded JSON-CDC data returned from a ExecuteScript request.
+         */
+        encodedData: Uint8Array
+        /**
+         * The events returned from a GetEvents request.
+         */
+        events: {
+            /**
+             * The results returned from a GetEvents request
+             */
+            results: {
+                /**
+                 * The block id of this result
+                 */
+                blockId: number
+                /**
+                 * The block height of this result
+                 */
+                blockHeight: number
+                /**
+                 * The events for this result
+                 */
+                events: {
+                    /**
+                     * The type of this event
+                     */
+                    type: string
+                    /**
+                     * The transactionId of this event
+                     */
+                    transactionId: number
+                    /**
+                     * The transactionIndex of this event
+                     */
+                    transactionIndex: number
+                    /**
+                     * The index of this event
+                     */
+                    eventIndex: number
+                    /**
+                     * The encoded JSON-CDC payload of this event.
+                     */
+                    payload: Uint8Array
+                }[]
+            }[]
+        }
+        /**
+         *  The account returned from a {@link getAccount} request.
+         */
+        account: Partial<AccountObject>
+        /**
+         * The block retured from a {@link getBlock} request
+         */
+        block: BlockObject
+        /**
+         * The block header returned from a {@link getBlockHeader} request.
+         */
+        blockHeader: BlockHeaderObject
+        /**
+         * The collection returned from a {@link getCollection} request
+         */
+        collection: CollectionObject
+    }
+
+    /**
+     * @see {@link https://docs.onflow.org/fcl/reference/api/#event-object}
+     */
+    export interface EventObject {
+        /**
+         * ID of the block that contains the event.
+         */
+        blockId: string
+        /**
+         * Height of the block that contains the event.
+         */
+        blockHeight: number
+        /**
+         * The timestamp of when the block was sealed in a `DateString` format. eg. '2021-06-25T13:42:04.227Z'
+         */
+        blockTimestamp: string
+        /**
+         * A string containing the event name.
+         */
+        type: EventName
+        /**
+         * Can be used to query transaction information, eg. via a Flow block
+         * explorer.
+         */
+        transactionId: string
+        /**
+         * Used to prevent replay attacks.
+         */
+        transactionIndex: number
+        /**
+         * Used to prevent replay attacks.
+         */
+        eventIndex: number
+        /**
+         * The data emitted from the event.
+         */
+        data: Record<string, unknown>
+    }
+
+    /**
+     * The status of a transaction will depend on the Flow blockchain network and which
+     * phase it is in as it completes and is finalized.
+     * @see {@link https://docs.onflow.org/fcl/reference/api/#transaction-statuses}
+     */
+    export enum TransactionStatusCode {
+        UNKNOWN = 0,
+        /**
+         * Transaction Pending - Awaiting Finalization
+         */
+        PENDING = 1,
+        /**
+         * Transaction Finalized - Awaiting Execution
+         */
+        FINALIZED = 2,
+        /**
+         * Transaction Executed - Awaiting Sealing
+         */
+        EXECUTED = 3,
+        /**
+         * Transaction Sealed - Transaction Complete. At this point the transaction
+         * result has been committed to the blockchain.
+         */
+        SEALED = 4,
+        /**
+         * Transaction Expired
+         */
+        EXPIRED = 5,
+    }
+
+    /**
+     * The access node GRPC implementation follows the standard GRPC Core status code spec.
+     * @see {@link https://grpc.github.io/grpc/core/md_doc_statuscodes.html}
+     */
+    export enum GRPCStatus {
+        /**
+         *  Not an error; returned on success.
+         */
+        OK = 0,
+        /**
+         * The operation was cancelled, typically by the caller.
+         */
+        CANCELLED = 1,
+        /**
+         * Unknown error. For example, this error may be returned when a
+         * Status value received from another address space belongs to an error
+         * space that is not known in this address space. Also errors raised by APIs
+         * that do  not return enough error information may be converted to this
+         * error.
+         */
+        UNKNOWN = 2,
+        /**
+         * The client specified an invalid argument. Note that
+         * this differs from FAILED_PRECONDITION. INVALID_ARGUMENT indicates
+         * arguments that are problematic regardless of the state of the system
+         * (e.g., a malformed file name).
+         */
+        INVALID_ARGUMENT = 3,
+        /**
+         * The deadline expired before the operation could
+         * complete. For operations that change the state of the system, this error
+         * may be returned even if the operation has completed successfully. For
+         * example, a successful response from a server could have been delayed
+         * long.
+         */
+        DEADLINE_EXCEEDED = 4,
+        /**
+         * Some requested entity (e.g., file or directory) was not
+         * found. Note to server developers: if a request is denied for an entire
+         * class of users, such as gradual feature rollout or undocumented
+         * allowlist, NOT_FOUND may be used. If a request is denied for some users
+         * within a class of users, such as user-based access control,
+         * PERMISSION_DENIED must be used.
+         */
+        NOT_FOUND = 5,
+        /**
+         * The entity that a client attempted to create (e.g., file
+         * or directory) already exists.
+         */
+        ALREADY_EXISTS = 6,
+        /**
+         * The caller does not have permission to execute the
+         * specified operation. PERMISSION_DENIED must not be used for rejections
+         * caused by exhausting some resource (use RESOURCE_EXHAUSTED instead for
+         * those errors). PERMISSION_DENIED must not be used if the caller can not
+         * be identified (use UNAUTHENTICATED instead for those errors). This error
+         * code does not imply the request is valid or the requested entity exists
+         * or satisfies other pre-conditions.
+         */
+        PERMISSION_DENIED = 7,
+        /**
+         * Some resource has been exhausted, perhaps a per-user
+         * quota, or perhaps the entire file system is out of space.
+         */
+        RESOURCE_EXHAUSTED = 8,
+        /**
+         * The operation was rejected because the system is
+         * not in a state required for the operation's execution. For example, the
+         * directory to be deleted is non-empty, an rmdir operation is applied to a
+         * non-directory, etc. Service implementors can use the following guidelines
+         * to decide between FAILED_PRECONDITION, ABORTED, and UNAVAILABLE: (a) Use
+         * UNAVAILABLE if the client can retry just the failing call. (b) Use
+         * ABORTED if the client should retry at a higher level (e.g., when a
+         * client-specified test-and-set fails, indicating the client should restart
+         * a read-modify-write sequence). (c) Use FAILED_PRECONDITION if the client
+         * should not retry until the system state has been explicitly fixed. E.g.,
+         * if an "rmdir" fails because the directory is non-empty,
+         * FAILED_PRECONDITION should be returned since the client should not retry
+         * unless the files are deleted from the directory.
+         */
+        FAILED_PRECONDITION = 9,
+        /**
+         * The operation was aborted, typically due to a concurrency issue
+         * such as a sequencer check failure or transaction abort. See the
+         * guidelines above for deciding between FAILED_PRECONDITION, ABORTED, and
+         * UNAVAILABLE.
+         */
+        ABORTED = 10,
+        /**
+         * The operation was attempted past the valid range. E.g.,
+         * seeking or reading past end-of-file. Unlike INVALID_ARGUMENT, this error
+         * indicates a problem that may be fixed if the system state changes. For
+         * example, a 32-bit file system will generate INVALID_ARGUMENT if asked to
+         * read at an offset that is not in the range [0,2^32-1], but it will
+         * generate OUT_OF_RANGE if asked to read from an offset past the current
+         * file size. There is a fair bit of overlap between FAILED_PRECONDITION and
+         * OUT_OF_RANGE. We recommend using OUT_OF_RANGE (the more specific error)
+         * when it applies so that callers who are iterating through a space can
+         * easily look for an OUT_OF_RANGE error to detect when they are done.
+         */
+        OUT_OF_RANGE = 11,
+        /**
+         * The operation is not implemented or is not
+         * supported/enabled in this service.
+         */
+        UNIMPLEMENTED = 12,
+        /**
+         * Internal errors. This means that some invariants expected by
+         * the underlying system have been broken. This error code is reserved for
+         * serious errors.
+         */
+        INTERNAL = 13,
+        /**
+         * The service is currently unavailable. This is most likely a
+         * transient condition, which can be corrected by retrying with a backoff.
+         * Note that it is not always safe to retry non-idempotent operations.
+         */
+        UNAVAILABLE = 14,
+        /**
+         * Unrecoverable data loss or corruption.
+         */
+        DATA_LOSS = 15,
+        /**
+         * The request does not have valid authentication
+         * credentials for the operation.
+         */
+        UNAUTHENTICATED = 16,
+    }
+
+    // TODO: How to better leverage Typescript here?
+    // when writing `t.String`, given `t` is a `FType`, I want auto-completion on all different types
+    // but `String` is a value that FType can take, it is not of type `any` per say.
+    // but I don't know enough TS to find the right pattern here.
+    /**
+     * @see {@link https://docs.onflow.org/fcl/reference/api/#ftype}
+     */
+    export interface FType {
+        UInt: any
+        UInt8: any
+        UInt16: any
+        UInt32: any
+        UInt64: any
+        UInt128: any
+        UInt256: any
+        Int: any
+        Int8: any
+        Int16: any
+        Int32: any
+        Int64: any
+        Int128: any
+        Int256: any
+        Word8: any
+        Word16: any
+        Word32: any
+        Word64: any
+        UFix64: any
+        Fix64: any
+        String: any
+        Character: any
+        Bool: any
+        Address: any
+        Optional: any
+        Array: any
+        Dictionary: any
+        Path: any
+    }
+
+    export interface TransactionObject {
+        /**
+         * An array of events that were emitted during the transaction.
+         */
+        events: EventObject[]
+        /**
+         * The status of the transaction on the blockchain.
+         */
+        status: TransactionStatusCode
+        /**
+         * An error message if it exists. Default is an empty string `''`.
+         */
+        errorMessage: string
+        /**
+         * The status from the GRPC response.
+         */
+        statusCode: GRPCStatus
+    }
 }
diff --git a/packages/web3-shared/flow/index.ts b/packages/web3-shared/flow/index.ts
index fc405ba933b2..e6984064c5fd 100644
--- a/packages/web3-shared/flow/index.ts
+++ b/packages/web3-shared/flow/index.ts
@@ -1,5 +1,5 @@
 export * from './sdk'
 export * from './types'
-export * from './pipes'
 export * from './hooks'
 export * from './constants'
+export * from './utils'
diff --git a/packages/web3-shared/flow/package.json b/packages/web3-shared/flow/package.json
index 34242fe98af5..6bdf0d615b4d 100644
--- a/packages/web3-shared/flow/package.json
+++ b/packages/web3-shared/flow/package.json
@@ -5,19 +5,16 @@
     ".": {
       "webpack": "./index.ts",
       "default": "../dist/flow/index.js"
-    },
-    "./types": {
-      "types": "../dist/flow/types.d.ts",
-      "webpack": "./types.ts",
-      "default": "../dist/flow/types.js"
     }
   },
   "types": "./dist/index.d.ts",
   "dependencies": {
-    "@blocto/fcl": "^0.0.78-alpha.8",
+    "@blocto/fcl": "^0.0.78-alpha.10",
+    "@masknet/shared-base": "workspace:*",
     "@masknet/web3-constants": "workspace:*",
     "@masknet/web3-shared-base": "workspace:*",
     "@onflow/types": "^0.0.5",
+    "bignumber.js": "9.0.2",
     "react-use": "^17.3.2",
     "urlcat": "^2.0.4"
   }
diff --git a/packages/web3-shared/flow/pipes/index.ts b/packages/web3-shared/flow/pipes/index.ts
deleted file mode 100644
index 38c62af509cb..000000000000
--- a/packages/web3-shared/flow/pipes/index.ts
+++ /dev/null
@@ -1,44 +0,0 @@
-import urlcat from 'urlcat'
-import { createLookupTableResolver } from '@masknet/web3-shared-base'
-import { ChainId, ProviderType } from '../types'
-
-export const resolveChainName = createLookupTableResolver<ChainId, string>(
-    {
-        [ChainId.Mainnet]: 'mainnet',
-        [ChainId.Testnet]: 'testnet',
-    },
-    () => 'Unknown chain id',
-)
-
-export const resolveProviderName = createLookupTableResolver<ProviderType, string>(
-    {
-        [ProviderType.Blocto]: 'Blocto',
-        [ProviderType.Dapper]: 'Dapper',
-        [ProviderType.Ledger]: 'Ledger',
-    },
-    () => 'Unknown provider type',
-)
-
-export const resolveLinkOnExplorer = createLookupTableResolver<ChainId, string>(
-    {
-        [ChainId.Mainnet]: 'https://flowscan.org/',
-        [ChainId.Testnet]: 'https://testnet.flowscan.org/',
-    },
-    () => 'Unknown chain id',
-)
-
-export function resolveTransactionLinkOnExplorer(chainId: ChainId, tx: string) {
-    return urlcat(resolveLinkOnExplorer(chainId), '/transaction/:tx', {
-        tx,
-    })
-}
-
-export function resolveAddressLinkOnExplorer(chainId: ChainId, address: string) {
-    return urlcat(resolveLinkOnExplorer(chainId), '/account/:address', {
-        address,
-    })
-}
-
-export function resolveBlockLinkOnExplorer(chainId: ChainId, blockNumber: string) {
-    return ''
-}
diff --git a/packages/web3-shared/flow/sdk/index.ts b/packages/web3-shared/flow/sdk/index.ts
index 0063d4543827..550eda489837 100644
--- a/packages/web3-shared/flow/sdk/index.ts
+++ b/packages/web3-shared/flow/sdk/index.ts
@@ -6,10 +6,11 @@ export function createClient(chainId: ChainId) {
     const authConstants = getAuthConstants(chainId)
 
     fcl.config({
-        'accessNode.api': authConstants.ACCESS_NODE_API,
+        'accessNode.api': authConstants.ACCESS_NODE_API ?? '',
         'app.detail.title': authConstants.MASK_APP_TITLE,
         'app.detail.icon': authConstants.MASK_APP_ICON,
-        'challenge.handshake': authConstants.CHALLENGE_HANDSHAKE,
+        // @ts-ignore
+        'challenge.handshake': authConstants.CHALLENGE_HANDSHAKE ?? '',
         'discovery.wallet.method': 'HTTP/POST',
     })
     return fcl
diff --git a/packages/web3-shared/flow/tsconfig.json b/packages/web3-shared/flow/tsconfig.json
index 10de013f5120..8c27ddb000d6 100644
--- a/packages/web3-shared/flow/tsconfig.json
+++ b/packages/web3-shared/flow/tsconfig.json
@@ -6,5 +6,5 @@
     "tsBuildInfoFile": "../dist/flow.tsbuildinfo"
   },
   "include": ["./", "./**/*.json"],
-  "references": [{ "path": "../base" }]
+  "references": [{ "path": "../base" }, { "path": "../../shared-base" }]
 }
diff --git a/packages/web3-shared/flow/types.ts b/packages/web3-shared/flow/types.ts
index 43d9fad57c83..cf469de72984 100644
--- a/packages/web3-shared/flow/types.ts
+++ b/packages/web3-shared/flow/types.ts
@@ -1,8 +1,17 @@
+/// <reference path="./env.d.ts" />
+
+import type { CompositeSignature, MutateOptions, BlockObject, TransactionObject } from '@blocto/fcl'
+
 export enum ChainId {
     Mainnet = 1,
     Testnet = 2,
 }
 
+export enum SchemaType {
+    Fungible = 1,
+    NonFungible = 2,
+}
+
 export enum NetworkType {
     Flow = 'Flow',
 }
@@ -16,3 +25,28 @@ export enum ProviderType {
 export enum AssetProviderType {
     Default = 'Default',
 }
+
+export enum TransactionStatusCode {
+    UNKNOWN = 0,
+    /** Transaction Pending - Awaiting Finalization */
+    PENDING = 1,
+    /** Transaction Finalized - Awaiting Execution */
+    FINALIZED = 2,
+    /** Transaction Executed - Awaiting Sealing */
+    EXECUTED = 3,
+    /** Transaction Sealed - Transaction Complete. At this point the transaction * result has been committed to the blockchain. */
+    SEALED = 4,
+    /** Transaction Expired */
+    EXPIRED = 5,
+}
+
+export type Web3 = typeof import('@blocto/fcl')
+export type Web3Provider = {}
+export type Signature = CompositeSignature[]
+export type GasOption = never
+export type Block = BlockObject
+export type Transaction = MutateOptions
+export type TransactionReceipt = never
+export type TransactionDetailed = TransactionObject
+export type TransactionSignature = never
+export type TransactionParameter = string
diff --git a/packages/web3-shared/flow/utils/address.ts b/packages/web3-shared/flow/utils/address.ts
new file mode 100644
index 000000000000..5b3407c9688c
--- /dev/null
+++ b/packages/web3-shared/flow/utils/address.ts
@@ -0,0 +1,16 @@
+import { getEnumAsArray } from '@dimensiondev/kit'
+import { ChainId } from '../types'
+
+export function formatAddress(address: string, size = 0) {
+    if (!/0x\w{16}/.test(address)) return address
+    if (size === 0 || size >= 8) return address
+    return `${address.slice(0, Math.max(0, 2 + size))}...${address.slice(-size)}`
+}
+
+export function isValidAddress(address: string) {
+    return /0x\w{16}/.test(address)
+}
+
+export function isValidChainId(chainId: number) {
+    return getEnumAsArray(ChainId).some((x) => x.value === chainId)
+}
diff --git a/packages/web3-shared/flow/utils/domain.ts b/packages/web3-shared/flow/utils/domain.ts
new file mode 100644
index 000000000000..406fec1ef0c4
--- /dev/null
+++ b/packages/web3-shared/flow/utils/domain.ts
@@ -0,0 +1,8 @@
+export function formatDomainName(domain?: string, size?: number) {
+    return domain ?? ''
+}
+// #endregion
+
+export function isValidDomain(domain: string) {
+    return false
+}
diff --git a/packages/web3-shared/flow/utils/index.ts b/packages/web3-shared/flow/utils/index.ts
new file mode 100644
index 000000000000..c56c8c541787
--- /dev/null
+++ b/packages/web3-shared/flow/utils/index.ts
@@ -0,0 +1,3 @@
+export * from './address'
+export * from './domain'
+export * from './resolver'
diff --git a/packages/web3-shared/flow/utils/resolver.ts b/packages/web3-shared/flow/utils/resolver.ts
new file mode 100644
index 000000000000..6160b3ed779a
--- /dev/null
+++ b/packages/web3-shared/flow/utils/resolver.ts
@@ -0,0 +1,17 @@
+import {
+    createChainResolver,
+    createExplorerResolver,
+    createNetworkResolver,
+    createProviderResolver,
+} from '@masknet/web3-shared-base'
+import { CHAIN_DESCRIPTORS, NETWORK_DESCRIPTORS, PROVIDER_DESCRIPTORS } from '../constants'
+
+export const chainResolver = createChainResolver(CHAIN_DESCRIPTORS)
+export const explorerResolver = createExplorerResolver(CHAIN_DESCRIPTORS, {
+    addressPathname: '/account/:address',
+    transactionPathname: '/transaction/:id',
+    fungibleTokenPathname: '/contract/:address',
+    nonFungibleTokenPathname: '/contract/:address',
+})
+export const networkResolver = createNetworkResolver(NETWORK_DESCRIPTORS)
+export const providerResolver = createProviderResolver(PROVIDER_DESCRIPTORS)
diff --git a/packages/web3-shared/solana/assets/coin98.png b/packages/web3-shared/solana/assets/coin98.png
new file mode 100644
index 0000000000000000000000000000000000000000..0e992aaabe1a182f3841ea5de81a6a6f9aca6707
GIT binary patch
literal 8825
zcmb_>dpy(8|9>hGNpeeW<&qGROSwmhT;_hAVV3))3#KJRx@bjiA-P1zeav;kirnwH
zZNkFFFt@pzZQu3z{2ssmzmLcFJf83KK6~x`x}N9zea?G}vjiA%aa`m$cI+6}edD{<
z%=6*DgZ%`v$J{94K6dOl&C<-)(CCrbRI|-Ylg-~BHuG)v(<tka5|i1Vc5^@NW`Ec%
zbULmKxok|hZ%nwYjk^79wx0cA`?tl0dD%3|3g2vlZ?eI+Fm>(b+UyA(j>Imfg>I+C
zUgxELAXAb2+jVu+b#2UT6YIV{?!M6F$h>TI#C59Cis|v6F4ID@Exv_m)AlchiGNQ2
z>wWI0{amX(Go<-8hxuO)1SZ;<a3nIlbUHEvTj+FJ_^&&r#~x=A6TQx)KHw4){lH}=
z2AFVJ9&}k@Vu%S4c^LFBr2j_63~bbm8Qc1}+d4Br>_2QyxHChYs<-@8XE}qm*}%Ea
zpskt0(K6F1l+`8<%uIZ$(R#YUYP!*y`EdeaK3QkMOlPXW>QBAZWF1q{;?IB7Cu=Qn
zH5QY#7C0mmfQf2zEYbpt1YoNH;|Mcs6=0$YfN!#!#W>Elxi9nt&;E2>>~<mbx-Jbq
zA&<hA2mStHfQ$W+%cJQVvvpgGorha^>dySp-tzv&<o06A`b@>rNYY#@v)aDov6zjS
zto`-Dqy1It?&8jJD`g(BicKW-K~^U-c2@f7M|*VoA%jk1Fz5^hgGSw^5Sj>`4-dC+
zl-ck27KdGO_v!?Ed!c@D;O*Y}=qm0jGquIOryKZhgibGFCvdjad#1^8aWI~CxVbzW
zj&E^W{qvpJ;WmyiC;W0AuQZ?QfD${I^|4<XemUI)ArHHZR+x@gm`$TWV-;qTbvE-|
zQ6r@$_#c5|<z}Nyl$nf{G35@-+D_I3M@vmdm?*xFLoyj?$|T_g!fI&%_`BGIIoHGv
z2PPAS3XGWa8!j~Z{r&#%_xns%FomQZr{SXe!-e;U3XKQz?+q0g4>Ix1XdvHcAkV1(
z>%9Rc@(c&^nEk!}uZI8dp8=C~Z`MNgnfC)D#2R38jFV4P;U**qo}Qlm`IQH&#f#FO
zH7f0h*=Wq3c0{A}A?)wWFw6J9YDWx0qYRp{%$PPjVk#aopy?a`3>^N~3iY4x-|>Id
z`u=MyooVm?nf=eHk8!v+oBoqI9-;L8|L<NNQW)Lep^TZGby^Sav14M_?%&n7eaccc
z2=RESf9}OB)_%I9F7VGd&7#VfQWcalopC^W((<x*o-<Y=(NTh?iyQ1_n0&P@wl!eM
z86+ODskwb0Ufw<>=^-(tJT;=@!rdmh6t`ja^e22ab(Krm#wm!qdXjANCb@Fqh)diH
zZ5EW!Ilpsw38Qz6^{eI8=lpSZ^Qs(=B%-B~yKUuC0Yxgt>X~;a#$O$;fr%XUhJHKn
zd--v-xlr^-`?F?U)e9by0cXsE3P*4vPPa`Tcsf<wgs%dYu#6U0g;B9HMmJ+etk5|=
z+!4P4g^;URK9~ZVN&kANgs5Lw(CRH(@-FVZF~+G}J+t4pD1@$<T{_(Oeo-=a=32@h
z$C#^f<0p_bmIUR#zCMw!R(&D^_1=Db79b~3ctLShT~pMf<?Pkfpjtjn@B~Tb42p}Y
z5H0Fa|G?r(9o>-wz}?bZU59Ke9twjP5fef0LC72x^4){X<LG!%oGj``wrRjO1_yvm
zjP^KCCTH-3Rvf4*hvEi%U~x9bEh-ZZU=fdJfGq!h7EOJFT}{Q1?O{yw6Bd5D+P<NG
z1_VqGW+ksiy+v}8B(!q>*ulimk&&hr_Ukd57}I4T2!kzkg6v3S$*Sh8;)PzMaw_e*
z+^DxZ`<P-`;4DuDFWO}zld<{-e`b14XgbUcG1QF;1|Pt8ob{`EtNeHGBuCB;lyv5*
zK+jVNAGm&<CC7z47)Hl+t1pMPE6OpH9A*$I#OUcniqx*l+#W`obE@RH1L?Dl1<scY
z?csF0RncT1LvF<DyaU-LbCP2y->SepZjW=d5y8aZY_d=wI`VI*OqF;QnRr^OBc3c^
zCl;L0MVJjhe#H^7MYh=v2l6$=Bh2KADHnlVI*9{aZngGzzW%wY)DhX!NZ~G~bSZXZ
zr*oc`R&))N-_DSY!evkf-%{RYQ_HpKsE3T{AjxoZq?SEBrkS!kzj8Hvd2my(d1RQ>
zrPv-%F6&92;@3p*5)-Gjpsg)?q1=k~e42>fo~=mxi*AD-<&-+ts(U1#1x1Fu{y?85
zUw}Hn;%FOv_x9M%rZW7cwo@w%WSFHBpMHfsASvDqy$JG3%hYVmHio1!kdpxhWUlk*
zp<dzL`Lii9!os?!WI4>Sob7<hQk<ylL**7tyX<X>##<fxRVXXeny7|)MG*{0k!jXO
zAUF9vCLSK1YnHWzX`=EeO;w4^ihvT<49KQY@=s);>Zq*`T=?GbPQ?^W>!k(?cEa`$
z^cLiimfHED--jGai|Ho~KynNY8o^q^PGh8VXhX=I6g~44@8C1IUKOG;^ouKGEc=&Y
zdy7Snq*mUR(wA~dn}J~2_Os8R?;+1ajEGK3>$eZ65~%ilO~FyL(1$gi@P6oXVvife
z8<;9`5d*R##i!_bpwrl(x-CzL2OSIbn9+9<<144h)I4o`uOwQ88et?XTwBd<*OD*1
z>zl%uxJg{9Vzr7?{08Ma@d1z$rizk8V}vvDZP9&rG)asc!VEGjI3Suy*On^W+mm_g
zry%6yo9cv?uBED1FWs`Ebv7L?6%I90ZncOtKsbdWE}vryX&X>iXZwqdL14`L*yPsv
zQCh@<2%d6^HdL@vAWq{IodxTZy4WNB39?8gV_R1vhW{vsJa{-VOcT$Egk4FE?^pha
zI*0xNP*<l<3F00GMAATCqee+)Ft$#CwRO1Iq&TqYA7|t&N}3owdRK&nqe1ymzsX`%
zHpHclg<oa~3JsJ~wB+2T5m$OFt?JeE;3F5<O90mUQ2@BP>Zg*3xEmK$@lcFNJ&t+_
zfeXnE;<!-O^q2m`ghxc0cHMOn{p!OZ(J8@AdF#`n*mjLm!w00bmlX9*fl4k^IPm}v
zd9G8p&p$-$c%87e(jp3+LJGO@(6$8MPJ4ue9qwI-bPF+kn<bY}C3!fZbSI?bdD~7$
z#~_6BE~8@_c2YIzf$x6ZTBPH8MCRrUHDhPjxn6XAQMKas@z}&Y16SXa^L$-3Qn9hV
zCYPYVm-cM}t3B`cBG=vo78|~xzkUC{Yk7oFdl{`elf$zqL4V3Eod9N}UI$(}G!IW&
z{JMq1fuo*ACC1`nawX9Z#2|RL?MGgm)Fc^Ftf-Vy7D|uOHPyQy3MdK&M@G^;mBM9z
zPlPEdDmH#fbNKY>(@dK>@F+_G*&YQL)<_am2lka~j!%hI4z6>bJRTW!oiF~D=y2NR
zh(iU&=drASMeKN|l3C$VOURX#9tE8y-0@*$a#9k*|BZ^9v0O=^U{OLv@w-`h&)&1)
z^t}27m$(r3!+Vt05B>W+=kXB96clert0L;t8wCEzLOmZy>32d!k;xxVVJ|oqDy{al
zV^4M^jwt=rDmzMNL62QC_%*Kzu*|+q_mnzp)VcYZZ(WyX{h5(HUwU8lH^OD|Nm^Xy
zjigR(uL>&@0R=HNY(NIm28@p@!u`E_D4Z#O3FeDr)$c^WP3V|OFvh+nGR0Y4&advR
z=W!H~IzAuejSqPI>MYnBsUnT}bGpQ^sz~@ri^<i9X`sVN*CMvh^4vtF!(>@aW7m*+
zKgJ~|zQ_<fG~^;Qp1@sigThi%YI^C5fT7j<^q0hs&MB}Y^EaskZeGx=UO`=p*-!!K
z+ezB#Uc?AJkGo>*T~dOz@21p4^RpYVpqT*uA>}nQD0?`YmujLBXYJDo$XQ+k@pFjY
zOa=DCWL~Hv)^W`~)Y?!u;Zsn?qO#FJ1$kxMp<yplgZx%8yTv}*W&Z?Mt(l<u=8Ge$
zfkvyM%t4fBKECdZmcoH+xzE<H$q&E~NFPKGHQ8Dxr~fm00V>~J&uRE4;kS$X8dl_u
zs@4sY_P`8<Lee#85H?KbvurxXp8eJDT6b%;todpy`$NCoufp_6d(GyS;W6{qD1M+9
zT=p=Kz8LQX=SK1GVkDNz9fXOy^j3q$CV|rvW+WQmH6cq4x{PdWUVKM<qUfNV2)IEC
zEs#YbSVGv*o?;`WRSjeA&GmX=f%SeZ&GsBVeX@!s_vt=1kn&NaJlugwX(XB@ZQ2Mw
zc%3XnEFzgfwckmQWy%t)x5oYir{FwlUBFADT{c?k;kt*Z#diZ14}-=Aw9-D+Ux@j0
zq{Y+S7SE-h_VLJD@_j-zP!8EIutf{)5btp~wVQthGB5)XX(N8Ve;C-S&hhzN2mqT%
ztNGDoHYMX#SB(jRopJ8YAO(o=a#|CBiiJ3jIM<buI7~7=jgiL4&Xv@<nE-zOxK{1;
z?27<E<+xC^U*GEpV175wi&KDl$f1|;(@JdUG58J^j9eZyP2SV(QUms(WuXx&&mvO7
zzJ>0u3oDK!FBTNWKsu|NaB~T6w;4I78#b=ut$d!8s>F?H798YmJzJjPxYV~R+}|(I
z7%D3D`$%gE(hwz-uNMk5pu9Y9aI$3F3vTy}E2X(bDaY;-DdSEy&O;-v_w$!xT#OJj
zhR!ELzSXv4i8cZKGMtqAD^gEvFqzI5;-Y^EcR?Cf#Bl!NmyP1lXK<*H$wF&==3GWp
zgU(0(`!Xx)70}Z7N788;3vLN<GGN0rel_4F)JK90Se);pdzUWkUP8aNiEFP>9AVSO
zp<bZ^RT=P8=>efn;A9p8s1z^>a!Fp}m|>Sck=;VPBwWMw@$S$o@AFp=uFzFBuJ(Am
zmL%P!*cVe5OXS}Fx?|P$)6enEI?@o3jl9kh8(-ch@aJ3%*JC7W9t3MH6(x|JTD~^T
zd@iZJuvkhSnb1BeGB-uGS91?b_Y0f^*;2f(Tdwdtj^YV=_<hF#R4wBkWa{|&4M-TF
z+1H(+aD~Ls(r4?&t0o>D)5YGlm~sm#jn}dpHbokG+M7<76%;74&Aa$Hjk|3dIgl*k
zt}WlYF2+A8A}Cw!aJla1lB~#y>E8iA4brq=S4dLiqv?_o<<hXhI4tYXX%ugZ1>-_Q
zYfJG!BnQkiDzWs`x^tp3@Z5IgaV;4#&xM5L8}z(!&F2aOy*6PY3!gvHB}5jUo7#&B
zKae3k?@r#iCROGf>tFX`MVa&R?T0RT^Mp?t)lU+GWFE%~){L@f%98`S#rx!tKz>9j
z5A-7Kx6kkO)<az{JDkMVpNGcP>74q4pPG#BgeXIG4|_dW`dnSxZUP|mJg;B=`(|P>
z@nmwXHfPqNQtNhVw614DYg(yH{QjPl%Lb>3>;AJoy^LHv&nk$G!#Pk>I_HPArkYg4
z#|iZU^Y(Sv?zX|OwBh@{zIFRW%7+><<V&!rwBTOby4>Mzowz2=<d{Oa@`(*8OhYr+
z2MKQs>p>ZJk{CDj1(UVa8oT*|W!qf7`0)r9k2D;=>34t~_CHX24t=s|Y0`X{)stk%
zm4orl$7=|t94+eU#eQv2{mU1uzkQEmVGcHz8~Sm&Zq1(VSe9<uG&gcTQYl>WeJ-b|
zm_YTjK&i(%h54<oC$$?d^7XHz$(X-soj4LqlaKDL{qn$qHRddM(U{(vu!MT*2?v6W
z-EJtMZveD9-wn~?(nmqj1y7x`q#8{r?JieH7Rd-;VWsVFXFc9#`3+-X-O#a!e$}-u
zKDgg^9z$gN@Br9<y}dK^X+y&aE%o)c(#M^Z5$|{4*TPEK5BbsU@%@Wu9|>skR|G^0
zYn#j;N_R!x$O!9u8sHi}`Xtc1?x=fh`*c9;`AzKRfY~9cp{c^|$y}<!v4}oJf!#rF
zes<7~O-z!T`MfN8{*a%?sD)9oVq`V!7^Px-ZT6Qy#i`#1%~O3J5UE}+1iy2yBi<=0
z9<aRs{Ved(Qys7V7x-)CpYiNkQ~u*-t9j9u<Lwxpj$X()ny*#2-uzEq_PwImHIA}5
zp;!S}1}?B6KeBx=luu|S4$F^j76#jFpVo51J{p;j3-!`GkJ`(0uw3^{4#!kZ%NMBn
z7llg5xVF8i{lo~52|5pbfYIQv_CmxF6gWPsULCpX866>6Hg@vSNLQ!es$lSC(gi4B
zITCuC_3z(SYf25ytoX*mSVL;7;+BWI%C3DlS2Ft{(xTTmGW}bhd!h<l7`%FJXDO)G
zsog~+RH*G6s<!?u*@G+jToxj@Epk?NE_wOOW9h+54qIitl~qaBDbLia;RdObAG31x
z<RuRVxtD&NTs|@2-14RH&58lss;#I>dX<k$>QjJyU3#wG8}Q<yvbS`{3*g0!`;qm|
z`Ozqzj;uvBEiqh>SGTKjnyhAZ@K$=}wa#3D_h%fFFvDkMd@oI-Z;wf^KAG+8y2gUK
ztzaDkz&^I>JWE~VzVH$e^z;oiCl;|@x1#$&dPEJCZYt?B5!BS^V??nDx!<j4<KAwh
z!jU+$B*RX1SJmF|Ez7axUij`$FRuyW1zC6rdddUOG1tG)Wq?$|Hp_Z6+Ie;7^%!8<
zM#YR?4&<~2Y8w^%Fg7~_ZR;-N>oJa_z7f_@Tw9kylIiXxy%`110VUP#&s~)xKnkD?
z?Ul%puyK0=yzyxI0&OPv5^O~!j<f5JXSQu<JZb?W;O^mHYzZC2X@1dGp4eSL<*AI>
zJ0+Dd_Z+9uj}A4j;yiCsf^E6P*@8DLZ=N5R&zLUBa?~Cjb5!a#F^!CgWXz~_<9R&y
zmUp{W>c77mQSz6&mIlk?FL)R$x)vy;332k4hD}vnCLK@e1i=#>kVXK9I-h+Zy$er1
z+t%IcqlUa5bFNPB<)gJU5d!^mo$%6`Bksj*1yyZF$9=wltM-&k*RW>8aRit@>^=3R
zKK5hQD~aGU{$m$KL!#7sWEUu!4#xRLnl4yJJ|@2;$fNQ7Dr+fc8tj3YkaUHGHq`@Y
zid&!bJtXy0y9ty<6On10?WHF?Zo4_yWZUxd2Jluy$|UkryNidf-<5!W8;tc9b>><y
zAH?q+e5iWu>9os^AvD7aZbaF(yii-=MwrYUS5u5pw0=N~un9S%Wt<JEYtY(;8vbYt
z<VC)Mlp1Gxv%YJ5fF50C`8h3jw^ImkM1T!#UVQ$jUvMn~+h@OUH}>|O@4*8AR=qtF
zK#kD_ea2ygQ};`phvm+<hFYg*GKDgOXqaeZlZMjxy<e|J&`MWa(s_mtk`^^(bA$|=
zK&d^JYUbv!l2zV;Zk15gS<DTQ4S670^)lJy$b7CpuaM+cFA2L2z>B`u%yzE!zdA{<
z;?K{#CUV9i?0_zzid|u|8uqfPIJQg_{^DhYfSe#9lj_xhKX%dwv$C?zN`?-?6VQ`?
z^bT?haCzLldlfbf!2^$3JB?z3WMMG_pPCwQb6a)rGCgYta8!%5YvfJNcY9IEVQ1Kq
za`G}wvvYyQGeH)wG|WyeEAcAzy<KZ0)c^8Nj3376=zCY^z)fZ%!5xhk%?2W>ysUV)
z?b#y_w9fbEb&&8h&FXx@t2K^GXh-bBgU4I%rZwJ(?wa3bC~PKs-xW+g;;l|qxa9>`
zzsBz8>Dngsz~Tpa7kHi+hS$2s5JU79t?f#$$DWp}`4O0Y@|Do+O!DChBt*X(^OoMc
zLPFe^B`H+{;VJjhNInUqNlsF0QWUp-k@u|wE7z7TO<qt_>ZuQklgxDlZXy;I@Sw-O
z3g;V=;bo<Ydc<5c0ND1hfJd*BQ?$834HL?*0OZ*5CHXug&WiGc)x4o&>B$Rq;9FDO
z1j#0Mpmq$Mw%%>(`aETk3Ww4h`)(KJNAM17a3wRJPp0?ja~T<nt<Dsgm$VG;y`%`m
zx1}0A0boU#pW5Eyd9LIc9sPQCt@g;jS+KLGJ`uyh3vh06E(^-R4Yi-sNMGh-F~B{x
zNB#IIx4T0)vQOP5(mW$S()^obuTTY~FWxBIv>SiRau~qo#W}DzbMx<|tvBZtD)2N(
z4$y51A;Em85{n~+mOa$h-7AT?VlpcRHbTTsaN<*ZByZ?5l#{b04=#=eAg<w9b?-<T
zScjFIiJ^Y_PJjq+lxAX1FegEDwTSd1s1Y(h{DTCCYnsjOHg9y6B)#gFJ1q5!$M7c|
zmAbvr;`ciWodZqdNL}$NQx2QdZ5PKB{OV6Wfvd?vK{v}zyr5d0hXyTv!JazulIvLg
zaw7kT4+NlC*m0>EZ3%|vgv<ke|CNgX*=%l<NsnJIj>9-=2&{*i4JBq_5RJj_)Nx&l
zjY)b6xq)j0xzLCCzGgdp@EV?_`Eg8k0q5sOSRPRvZfON{G%*f<q3v>7tz62ZHvFt^
zIuxyT9A9mQq!fp=y-K^(n18fxF;w1qHc2n)Tn9yS2mM7f(?+EG{mhPN=DlOM2>%4f
z&;gCI@3!SXMT-YCPDb?6b->-+c4tP1Y9fah6*ri}H8%@42j9}rN2^wm35fYK#Fo>)
zh!?Lk2fwE$i@zk4tIH1Nd^O9eP4ord>wy%Be{r#x*25OHR$zV%2optBVO3AqNg~}R
z4ilsWLb<0#!G7Qe)exJ4A4$zP4@Go=ME?wIv?&-+YLLt}ccVX#9VM-0LVuo;hYK&W
zqPLo7vY1kNL)f(tY^{OGR`fC2=Z@=KVviMH<PlCETAW7tioGO<wY|TyJ-}*04=w^v
zhPm4+hvsa3FGDWr`gdM&9zbv`9qxU*c!ejV^(?6{Gi5RC!YMFlb6c^Zk~j#^dcV(i
zhuRRh8CRX)$!pg{+bzdg&CCYeKnGogHP$^nDT+0`cfbbD@`P{M8VM@p;dNFUn>kjz
zOSXf?KE#86FXqoEX}Ru7gx8F9J;M%&>O{N`+}uy{&WGQpKmP??6R!OojUHJVZFAiX
zRqGFK#eSRO%EWP_e}*(<40>f|rYd0k7HXlJnlEllP);&=lH8C<ZMAE=?sGnAN~Q8t
zZL>BK^G@mH<v`4?T6J^$X-xzt89UX8AbwbbnyLG&PE0CY?3ax6<g{Oo6wN~Lc5n3y
zEFyIIpN($B;WF-yJxq2f7uk{rB5d}Q4+pQ1s*}VMD7s5g1!3+%b?3a<D4(8&KfKG(
zNXQDN9Nn(tf4va6H92QTL+LzG{mlM~CVCQNOu62pNBSn!-6%77vqb-3z3I0B@|C+_
zA3ihp4pxKwu~VCL@<Er8fEQf&LkwXk!%XB4*@v6-J4p|t!xwar|9TR8J?;i@$|wAc
z&=dUb@JSZ~N^Hctc=B8^_27H%+kQW`6FkWF65#&Ji4QefW7m+Z=-1o`-Vk{vbJTXV
z21VH4x^h7Weg$~m?D_gFw^!s{qp^t?^Ea5|^t>&$I~~rVDnp44I1e?6OHw+i(P!nV
zSDR%>nA=b@w?xrBqJ<=DYB&x2^s;B24_e``T2vwC$EF~Q)@#urT#}&9YpqqjGf+SQ
zn|51t4K5F)z#1|w_1C0)=8<-Y5w+fYNSPc9V!lFcWq`5X-yca7gmA76t4Mfp)}&5j
zmC*G`?>P29`<+zrFNekB49qAeX@X@4)6WXoO;oeWwVi^FmW?V&?T;MKrt;xv5hN=n
zU~I|{&8xV7B3ZEHUVWw+>z&X=gKbZ!)+8_U9k$nPLwfKg@LWQ_Ll8dl(Uym*h|J0w
zpf>E;-d0W&c6TPBuly4=(O8Ffz)0f5csWd!8(z29!7LXq^tPZn0H5s`kX^H=ba)+k
zRDo5V^8ckZX)%0SD-WKjK&Ha?!D-%tCT^!S!S!dD_nI_D{zq|LzZ#Go(RPN7l$0ds
zvA9RAZIJ;BK|g1?MG6k-Qwqs@QqqHa*y~b*f$6IHQN>agOew={8n>d(bJuFWf|2ai
zmB4$v{HCnsyOgVMWt=Y8oDX>`7t$m=$CaBmFejnU!|J5vUnzO-0{&`g>558*Qve{5
zPI~^iFH1+I#UQaW2j5=V>E3l`0>VegsScHf)&$JXitdA0+zZ-1Ryw9Z*gi7e;gf%?
zaUAOszcZ6o9-@Rr#WelRg0P7Nv#i}`FV#M$CAr>`mR3GrsvXnB*hzO#yTo_`rlp<N
ziuAD2qmV)6sVqfyNufWrCY6qx&fg|~{aF9|V-7GUyq<E~m7@47o~hrXm1VC`=HHb+
z@BfrgtFeH67!O`CAv@ycOwSR@9}yB)l$TjnTTz^pp_f<eP1V)CnfrujZQz6hER2vS
z4E|9F5OK?i?pl#iFA5tsTz`sdJpn7d)D=v=NFmb>+`(Cpu)8x5rKs18H*K8`Pa#_m
zMw~IHn&qqJm4JU|_zA>KyC_`VMRaYpLz&+8uTu@nYtc<NP^P8Y*HPjD*4`nYxapn~
z2PmUGOBr=GkV$!{2yElUE>f5xqO}XL;-JV}r?4qY&kNVZ4=4k=fGkzLdIGG!&SC<r
z^yy88{jJX2FSVi0tO=DO;R>bCKUqSaNWwaAs_*v-bcy7DsI0UiByNTdee-c{of$?S
zSJPQ&9WO_0+Ud6l@)UTUmPklbC>!Dx&JCE=MV;vCygMp41##o2bouhz*L6+a9ZgU9
z*%S`iTEw<V4hEl*)bmLitKs`NfzkG_dK1;h>PCD_KtC{CGTS_xqHv7R+&MAimW{k4
zQR-uDGE-G;NbAC+Hl4^vJJ(%MB_(J=xCzm0=Gx-Hr=vWApWzA`la9aDnTqQ-5+_7s
zSqM>5+YSfcZS7%Y0nw7;EdeYNgX4qYHI_Hz7iS(5CJ+J936)Op^33PoE@PmcoONfP
z3Vw{5Qu*a4;6Xk{>DjrEP|f<H$p|->XBc)PD{-#*9^qvgGps@MYsal=vNfTyH3HU=
z*l83Nk}9sclx+<w;B>CrkCniXQ#Cc9=MKm`(`gy;?bs};A>ES`uQaGhNdxj!wMt?J
zJmGR{syTm5*EiLkV@M!ub-Q8a$pWMyd4hjsh9)7qo0_6foi3FzU<Pk)i5zB&BK*|w
zs`odx9ZgKrl-lJ_QJ6{;{B&zKJ3$B*^4#vMkAr2M`$|k0P9r?0M@D@^B>z|Z4t!Z2
zNE(PUGun0y#&j`U#4b!DD=ynzQ9Meltasa9xa<i}hGU0r)XGRchrHZ_AN2~P??HGD
zXg@Er_${amG9KaWe=AvcOq8Xa`*u~~-Z(YNvF>9cUc7@R`o@Rn>a7sB_3HM>x-r$*
z-kK}p+Q2ZQ7J4;nY?E5caD12fmD+_9IoMqD9`{rfeHiN31uD!EoDW?UyeynK4Ys&`
zRxYlbI+mi4g8dpfyowN%A>?1ZUzCj7FG}qfUl(MR12%<GDFKYN)g5ZR(VuD6xGrE}
zVvW|pUaQ|3iGLG%8Lu~q6AB7wU;W1Nf-bC+mw5{Y-eO_?g?{Y5A>eL>fqTsV04SBt
A_y7O^

literal 0
HcmV?d00001

diff --git a/packages/web3-shared/solana/assets/phantom.png b/packages/web3-shared/solana/assets/phantom.png
new file mode 100644
index 0000000000000000000000000000000000000000..454c7469b6bda72deba669e9242ce0617e10a3a8
GIT binary patch
literal 8430
zcmb7}Wl$VUlgA;rLjnW~9^B!<U4rW_ZXvik1ShylaCZm<cX!vt9fHfkVvEaOp1XVR
z`*qd)`aeC@^I@c_t2$CmMHUO41RV|z4ohB6TH~*8{CA)t{3ZH_yT3$$Q&R%U$T}$z
z5a1&rp`xMSiSUGq{}ZPmQlcpOOF^JgMWPlN8BKyGMg2>ix?H`wY@_;@W(}!!4Y@{u
zLIXg)5fK3eAm8*a<(k!mdR0X_0J1G|>`fY9S^=`HfG=$TnRdXJb`6OhHQ_FROb0-^
zQ(dx6O`=&tvJ)WHtt!@_BvPX+T(2trTV9|7AldT`(Bxp;73nvY7Bf?txmH`c(b4c{
zu<I}{c~L{W+sn3papoL+484UuJw3j>y}|z4>+2iz=IL<vW_kpyF4nQPef4nv484Bb
zUb_N__d(9?US3{Lj-aZ-Eed=!mlqEY4=(`mfxEls>&u7d=T{~EMu6C$hQOG*Q0LDO
z(CN|bpY=<1;a>2`of^+5Ky+B0XF@}0K$))%ATn$q*Q&ukd2{s`>^un&9+l&$SK;m2
zTDb-Yjj8eV?{8nDAmRW7$JO~q<QRIcuO1Kgpa8)Md5#vy*~7bc2mpbp3&{QI+%=FF
zG}d$e4jvJ}Kdr>sX{9~@<egRJ9x{~f+1a=P@Xe@mPbqWu$*|O%pWf|l-5l)PsBw=U
z@89ljUDFd<%CmHwoje@v-vW8&0X(zk;D;}aEyo8?$oZYC-jo8>lnVQ>D*KoMYmWve
z2*|yt#5!=e3svKo`g`d>t|b7+e17asqW9+9=v8IbfvNNqkaI<eX0Es4Oo?e!_S0yn
z?V1Mr(&^DXkbRAxFkgddL!N$+n<P?|d3JB>R*iNG0Ukw}aT3V3vAqI4+`Ut0UOe8v
z+1a=`Ik?wgUTrKn2C{7bS-%ng*y3xvy0dl*Wd5T-JFZNzs=>IW{22sf+TGoR9{jo8
z|8t{8x32Pekr~ey$Z!A;_YUy+5EYR~g<{J=c?n2=sQ!7|Lu*BYb`MB*tUv)$p;|Q(
zSinaW1b#lTkXWL`G*G450MddLDHefL5FpK&1}Q|H>OhTZ2S9ZKq=o>g&VW=GnpBqn
zvTIF>YjrZPCdCba^j4Gn7WkK+?legsXx<}{|2>yCHw_g496Tb%2QpS+MU!_l{#k9q
zi(nWG4TcP>h=y4{!C-H&o9us|-2c}O|0kgtHu$fA{$Dx)4CeXY6YT#c-v2H9M=<?I
zz+gZBBZ>Ya@?o%$f3@}jOc(|mCHqhOUvKv>%Kyc`CIzEB|J?FF`Y+jFFuuR;1-ALW
zp$phN>>Bo1Oh7dW2S=7CFD(K54uAF&C98-MHw?#Ay6zj>R9Hv(Jq-3|ihf$ePQJOs
zz$Yz-7<qwD*!OuRFN~;=@2czv=71F~ra8wgJ-OqfA8xI>KT8qq)U~9o;ad=$Om2xh
zt*P;9)xE6vK-M_J6uM!q#7A9{v2st?2YS;36!px83({lZ*r1)k3o91i472tZTtP)z
zFAQgjy-20w2+IS^;CJIcC6;q`W`Yn@_xBG+Vr}tciHQTSvpso+oVPU|eG>2w>>yE-
zXi*FT)UKK9tb1DDKg!p(rtl`4R~(rOz-Y~|#xqn7_L0{redms(u~KJB)4`gk=eEr3
za>U#EL04eRG<uR7ZST)Hcbe>xxROY==Qd7)GcQA_<GKrA@km>1jL$FaL_J2DsL4#|
zztq;I)tsk-Oi?bi)<+m@D3-L<jYcbf%;?s>NTlA-VSJP{81QOe($sIV*N2y;6_O?5
zQb|~zMN~Nuwg{l=QKFxZrf60(O6NN_|7B#mTbqKL)-@F=das-Yai6d7k<zE{R@)7l
z?yI26svdyhhDT1ZvC^{{>yjIr*;?jVYyD_XXzE>LFhKIXEo?N^BP{U5voBaEUh><%
zeYmhncld>7#tlT3gNP<?P?Y`p?mCk%JqWs$W^j%KclsZH!Yn3o@FN>YY&bA^y^Ur~
zj-tpSw?n0!CzUF<<RudjLf;rj!p!Bh;<vS0)zuamR)}O5L?QP3QFp2`kYR#_t%Z1k
zXyKa5hSB|vHKZ))B^D>cIdW$D(8S;9avx{)(729pJn7M+qd=mjp8{EY*lA_f$%*WN
ziitS+n0wd`i}%|P7dDa4qJDg466_nfVWF~j&o;*Acbi+9mj4X%KN5$n4_Q_@^F^`p
z@A>kdVUGQTFpICBVWU_DBv4-pUlCif=XW@7kTX(h)H;bKaMp&2<qqr)noN+5grvFr
zK)<4|GQZtyem}S~&p}^?$$l^%!?h`=?w|&5IPnjG^1&PI;+{`vJ=SI-75LC;G*xNR
zGf8Y;`M$ldrbvIjt*(mk_;)AqSMzwsmnfYLQ?^FqTB-oOq%>XW9?~(dtLotgyFpE@
zVYHJ>r7>CIF-XW9Ijo^+b;B^mD%RC>=W0QtQ*B&<e~1=|Q9fI)mbdZ;VdxanMr>lX
zql55VV`C~Ek2ESHy^b!4;tn{&j?I|i)Vmxwcl%8sZ^9x(*e9tKv@|M&#X;4p7OBLz
z|1vu~)y6RA+M-QS^4eQU;6itRh(XW2Sa0-fxy*52T^sWnfCKft6^v})t;8{}o8S4~
z=uNt`gA;d<)5u=zJ34NcJ(U(07g{ZUmcjM)HVGgiOK|j7`YpJ2Ix}{UWXUAU)S20S
z&y<%g^F#s2l=3k=Tumi`%O+cl-&8TwJcE#3?*1lPgN<gw@A2jG@=~Uxu=D!|eVI;F
zv(Bc7X6zH;fSPZrl*KqZzQm>n75*j#nK5Ikm|sdRdE=s1&Bi0?i+Od|cUt*yz_nQR
zs?<5`>>tn=jAuTbLHZc+eGUUkn5+k$G<39s{N{N?^kjlVo>f~-p96F9F^^gi4)hF{
z_$%+(tczCW1kK7fb3P{vE})&?TPhw&_e+?P@!VCqy7c*CGYHTRqN~RECN>(MuHsua
zG=2Ixa@rWTMMi$4bX9_uF{*PY^XNTZ@GZQ>qYLYOm%wPoc(zcAW^CM|@UJh;*e`vu
zF!YPI>ht&4E(aThT;S)!w!%mhW4IAiYq<v`O6|#p{#)RN?RlL2$Pap3lpIP1sKUr6
zDSpq6{x-damBBn$*h+^@ay?@il5MI-@JVI<Lc>LW$9Z$~&NsR0?7bQzeSbP+EMl)K
z!-g$jsC&!v9jjuCwV1X_rwApA_X@;tBO2b*<e7f-@m$}<L7=XG>=7rioX1b<i(Zcp
zf%ek4D>8RLaIe>u$ku|bkNWiT?bBn(<#$5VrcwWls`3TVpIvnu=j<viMp+%Nz2{zd
z(+S<3b^;miePM`~4*1_{OEqxhxKN+r6`!|5!LM8C(64YuCW`!|0WlUuzbb=EWXhMT
zm06*`mXk~e=k_tJj|TGGkaP8tc<dQ1u~#ImixzC>1>420gZPR-3m_FGzD_dI5hCh@
zNQqz?J!*zOn(VjjjcoLKRaBKI_9mztURNxQejS+@T~E$u0I^IObvuy9ttn>YP8SK2
z79P?Yk$e9`vZvla0mCgrLNg3LNRquX&xyR3cq$P_n;h^#O2%x{_cfymC0Krp-FSGe
z1Ecni8LEJC@w)pu8c6zdBZM#<K&X>v(bFtlUP3H_HW{Myu&R5N*xl^m^H%3uB<(iR
zVgj~3e9rTv%Pe`Gc6x|ah>b<~E*y_wRxgz5;qOl>grh&>zV~neV#t?xJE{~;UmyO#
z;M;YtXi#Q+!N$ba8H7KkZ4gEhucD%A#_y*6y>QP+)x-O>@BXqDCA|oW^4{PKA(UOn
z*5ZlhS01KtbjJ&_;wH2!I8wsPil^}j79&Y?9jQ22tV1`}8%=0t=#@nEk4Gs5R=-B@
z<k)cP;=%OQ@8uUu)R_tKnF5gd@=JR7C2Fp?1@X75_cOYU0+r}u6g6K0b6r8yJ(q$V
ze-zKrUoE_xojnNokb@?gFkA!4VRRT4HTje{*kN1v(el^@is2EF%C~Vv3$CSN76)HZ
z6H{n{#vOSjTFBbo>C=K(+&m`{f&%d+#ch(PS}EJnboXw;_Lcb(!ipg<w}OTIYP>7?
z%q|z{H+(-&mh692HtpM_kBbEZCD*0)g~d!cPE3lsCCMXn|Kta=&~pwru?S@w&_Yeq
z!JSmw6y#4+E}LjVY|A#T^Yb5zUZ^U9f@=$8-;WVK@+tJ2?-PW%$#wA%z^|zxK<c<s
zFL0JW<%~XyG<>xvu<Y+GC+ZCBAE_aZKj`Kusa{l)$@?{=0+p=*X|Go{u#lqKqrc)4
z<gHq4bfRk8m8)CBQwHPsZFr<8pBHSuTCHNd_Ce$-ew#d{7jB$zq&PK8%Y+RTDl!@H
zmZG=qAc7eF8RejyR@QqyHax*OiA!yv!+8$0C}0*$K;WR96i&loW2`gJ(&^kk>D@H)
zLIz3qKxJQ@I}68J^j0X|f?GB)bFy`CQhp|dj#A{%rRcV$s48r{V3z>Xi7f+a=d2g!
znf;-@o_38HXNUC>n{_GBJhahD#6Ckt2GvT9j_-<R2=|UR>{#~eZ@AJ0R!bJ^$j?&w
z@tr>Y^XRGJ(;*eVq8X9y#G(rs2+;+9pr3sI!1TzR6V|x&;8(&tw$v!@C@LXzR8n3d
zw3Q7dFYuiG<b&{|^i044JMQ2*MZtm+J7Mq-;?8kEgUF^x2C)o&7Q1tJkxDF4+JTmd
z0}-gBX^5Un>VWT6_97*f#*y^+OHrSX7X=7Ke{A6=bpw2aJZI)PNgJ{zvy_59b-%5<
z$W4-Sp^d+!wPK}!t5vmx4oeCTp~005jk~GPsvso~T%dSA@<FbJp1*$n>Re4TpR{k0
z5sh0|=rCuebHCLE-!gTP?Q%Qv*I~{GH%!MuE^3tpzlPD4-S>!M&3Kj+J0dZyX1_J4
zpjGDOS!u><=QZ_Wc8ZRT|B%?)Ivn}ie+1=G;J6vMM46_%LiCc=W}Dtje{~ZHP6wwU
z*D?oKDFYuI(pQk#CeRv|B<>2u9pCNN>8)F@^Y0cIi}fH|F(dd*;J1T$vG1d9bJ#c>
ziHTcd>W?IC^1WG|r#;(xchyAqnF!E*Dz)z6x_oRYK!|umPElrFZ|)dVJp&!)NgH)r
zhli{lvP1Yo7@={PH}Ht9wuT?pUR|%lbYu4Q?yU^G$%melU|qoo;ywx}nNbs-s|(jx
z3>OjNTPvOBOkF8xh<e4$%i>{CXYbe|D-aZ79{dBwSN*?kksfI3aq^+0rJD_5B0onf
zV;wi;SX5mVjysYE`P*KDa)(6=V4~H#bH@z++Wy|w=%L6NwOB{VPJ<uTXH)r0mlmn8
zg5BU~3WP)N)l$VMe#eOOp+4}7Wcz~UCYZ0U_~%w1;_C&Utk<LZ;i{urL{t|my3fUq
zNyJT6HI34ZuQREU>O^tXc{Hg%e1XR;os}z6AJesC#}y(%cl*4_J514fk<H${JWOey
zSL66T?_q1Zt4fOU<1Cf*^VY5nYo69hjI>8cZ}X!KB-CgmyT_}Ygi)@fp~_RzkOqtW
zPf<p&VHH-xzD!f~u@sFKhWgsg=8WnO|G^_C3sVjv#Ngl``(MM49Z9Q5=IMSM(-d}y
z&i-8T$uH>-pzis*3wo5^$#|?&To>d~uors)0luG#jx1&^=&R}B1ZLN*bWblL0Lq<{
zuFePAz+S_j>KsYlEUJ{`aVYSR<K6y9Quvv8Cta0#p-&=^VeVJV%UG(!g<sBZMEJ5?
zM`9in2%q1pp=5+nlNIE{H;_H)u2R@x=BM?8un55ww09spNeoDmNd6-k#830fg*Lw{
z9_wM?@iO7-Z%gJPYVT23ezM(3(cKU1YkkJ=l$($tfsk*P%LjE3=w1fjgeT}~-7KJa
z@o<uCeF|hsmjAitNbjFz`wq5Q8sP9AW2VIls+no{d}2#!#MhX|QPp-wS=rGYpeWmK
z)wJ!&W5=zJgj1;Av~<gpcA&6f_SWn~s|K=s^;-SY{DS!}?r+}ubKd0kk|HFr-y+xg
z$hS3*W|_<CG0Em4s<jD3+{kz|`4B%@K96Zy@8sqjR<#0rBZBiA*rkBCA!NE$l`^6W
zhONZCRZsZDa{7$<%7Nq*?_T|y4)F`Eq!bCJf_x4Sn1ejtEcF^}FA9}whhmG%>t_l|
zbv2{|;GX(x*+-7VJqaNaWknBU&8~$F>~OJBlj3e~OIra_%YptagfiW9iKtmN^=$hF
zj|o!7*+xnL$@>J%oZ_oCT4Zk+_8KtIAxnrNrfPhAZG9%X?djMZP{A%Uf%|Ipw7u6)
zCk3l6wfh5dPR&%8%$h^|6gHP_{I`~I&ZZOZFt0mnlSrMAdZgO@pyBG=_zcdg=FBRL
z_4+Bxo;E86G&x-jQGsO??h%=TPCJ@72Kn+uZ*(NoA_b#6Z+3hwJ=T!HX;@Cs#gsGh
z-<einJ>)nA^AtlsB4B{xP*?@1dDB|Nj>rD<RncA^qB1F|AepY~gPux6zNtY=vrmr8
z?<tj|**yB6)(7uZ*BH*<W+4Q7kfkEp#3MlhJ=ZZUrmSvJ0gfWBi%TwdZ0x%s#k*Fq
z-8Y^n^WU*v*Q<s1Ds-3!^^4XT&R(ukg%_!{1wo3^T6wPL579;;lGM>xG>$*42z2!j
zG)|`ukX15zN1Z<_QVg`OF9*EOIZ<&r?xAZ_n$>pbQCDh(BmH1M&F5VTay=5%kRLRt
zi6|mlNnTC}-d6M8D}X+mz%GEZ!*^yg`7ONH$E2c>6jH&wr>D;NGNRK@FS-(UGnF4X
za}?xlwhrQ-wKb*hbC_keiPncxWyEqewh9ZfHdGuO*pU2um+~NSh+V&y^L%c#Z&h3!
zBAI^%X?bI8%MJPHp09(?GUn*HZ6HOjFYKHae^!@14mq<PUr;<qz~XxY5yM`P;`NC0
zOQmrO&5@NhWw`KW3$3kF8@Dpky3$%`9hINw+-%pHVYAa-_rBX5RSqk==SeMR-L4SG
zD}Nk!RWiw3@lf8LW}*@G3A=;XPI@tpU5$RJ-mWw_v{h4VpDUxjg61;_%a+|WqY4WH
zb{ya5&eFAX*Vy>W&p_TEl>y5jRk`>TA<H6{w+P`H3Nqd`OberBnb;K*R8NT+#Jcuk
z*+mV~p+>NcR&lE^&SKe&F4_D+Wk`I7RrpqWFT|p}e1xPZCE+ZCj;5ea6xl-~Sexsk
zJdY4c7e*lE-5AHAAky5`yqA7IfGwOQZb3Dt($(M?|EeQ+ToW&y>2IyKCX7a&mRYjx
zA6)|9^)f!8#G>$Ywm@@Ygfk5f+pbp{=lX?!J}YHq9WdjcRNhZ*NNM;A9VdN$3n@mJ
zvLv2Q_Yy=0qoqADltUj2OLB8pzJGao#dAjy8aR9C`N=5agn*FfV8l-)&qosLS_=Q&
z3!8S}evZ#_igt9K#^=W3rL78UxL(q-=w!8<@f=$&Q=epyh9l$7x86U^S+b<jB8msK
zq#x9_5sNMoN)U!pjH7BnmW!wEO_I|7=}pS|sDjuX+DH+YBqj9(oAdY)f@YP}D0bIw
zF3ZSY#x@li){x3<mj=D0Otto{Y;8bH_U_qZsIOksP@A%-t5_V>4K-(M<o^Ic4-22{
z9Cxw^)ZnX;)TB9<3yVX(4h!i{HZsRx-w)*$Bz7D|&%y;c%CsjGo4Y0O2!7R}I{7RI
zF6BilRWJ8s|CGvRF<&gVG(P6O>eW9@X>HAOd%rrbk<@g*r<dr;X=s_+%`f9x3-z5=
z`Mod~$#Xx_n?s+!z~_@@vNp%+A_~aa%;FSKmB|ow^~7!A$@F%!RTx>Cs<&y<<9DK`
zp1|oD`xsvTeuS`#Uhi7A$P<-cf}Hla`5W`bsm+m)M%es0L+Wtx77JypUJ~?mMO1@T
z(tuF%&J!)wq1@%>3m<ecfz3`qQA+SMK3sOmvwdNcO!uM~St!r2<@~Bkj1$bV34c;7
zM(#gnK|Wz^rcRW5iQX`uHMzC(={sV@poI%g?qX&3fQ?JOk`vmIG(&n}3}+RH`iLR9
z54EQ^+x4j|Yu(23S<3I?eDL-3xTmW3@bHw*RG)OLX+6~KicF{Uqk2DESjkT^4pM=@
z-&5QZ8-MVpb+rGS&IP%18e+b6TgdSbX1I?|Bx3KIo-h_ub=UR57c`}_)w^5kN^FXR
zzacX3RtlA*eG2(rmmZfLeuM0mUZ!Xxm=LdcrHoX^i-|7RF1JQ~<E^m&>TuaoA~(HS
z!+L~t^6;5ru3(?$5?ney{N+(T6yay#J(I-K9-OsD+?EbErn8orKUQ|1?4*ro1&%@0
zvIDZ|{@FLbccgsNcZl&uBWT^2<L|PWRmUq_&m{;>oc0H_jmzQNE0Doly0B#B5rsir
zrGpTp*{=6#^HFXrhfdW~eO$nj$NPBh?&sJw>QeX6O2>!Qr?b_A=s`3L%<cH-kE@So
zx-M+P^}7bVIlAynvCpDUD*$;Ef7s<e`b}v%EdwVjy1Rv>^tI*T*);bUpuEqc0@tsZ
z>L!+YKceJ*pA1}l>V111XjyP-;*DwQ)H0}j%SgyIo}1t#my3=j0*CnFN^Lj_l?A~B
zbNWty;+#0Kx|ba;KvIXEnsq)-Myi6qMD%BbH2#d?aob~ap+Wq%1;zZ1ZiyBXCG+jY
zY*Gj6pLA^82sx_+sO&y5<7#2G`8l%HbAO0_^oel&IL;ee0tZ74FE?d$DgT%v)6uhf
zu25ydn)vWF!8I($-6)7)LbrV5Ygakpn(pbdO}V{o^=+D2&X_Nyc><m#E41vSk|B8b
zH89i4vK-8uv$y1@bM$Jayfz&vLJoz7ewy+9=);d$=^U108fxWeZv|`~-*o7inPy^k
zXXDBBbihdvzwP_Vag5n|g2`g9(^8~iTX)wf<Wh59i6pCG;SqM#>wt_?;Sj3jpGxnr
zC`~f@w}fqB8g{~;#UM7Ubj`h|N}H&2`4WFJYxLf{RIs5`;asb~38YZbqA!For*@Il
ztOFyS`_`UYARzzL*o(a}4p-&oJ1JOU;3+s_=GKLa5$;cxX%1<)?j2LHUGD;oH)JmD
z#zjdZ4Uv<01xPHrzAIMkVHNmb7;l|u$ULRyF{%6;bRJ&t^OSuW@w5lq<5=s)!L7Ip
z7q2P-p=>)c+X{^2NI1qIrAwz(5>SQG4G5rj#~C&9JtDHG8_SH!nUr<k1m1aX&n?>$
zv?oLzQs9KARI$p3F;LKVkL)<HH)`7GMx#b3$VPSbs4fktb5w#E`xPUiJ}Pisdsm7$
z*qhP~?W5~K@A3*ew?l8@Fk+t%ncUK}$bD}0gAv+;n}ZQb*2ofHtEvVHX5*~9RT_!$
zXj^YC)w(Gmp}a9@hRgL{GQ`t2C%vs6zo$drl5>nn6BNNH{c&yQqeNq2cY8)!%*Tx1
zvxaLB#><^*mHYS`ljXlV3ufIaLUx>RMvETydy&RJak-4H;W5)j@u8oa8SPtHEfbNi
zjT@M>Rw(VpZ&1uu!|&*b<tbs)ec<83Wmup0zmI4Vpp^)SYTC{pHX=gtSq?9~7G+c|
zD~!olIH8-lpx>|2#ecemFBh{_!pA;56lz#)43J(U`?+)ML94V?gU1Kx8(wDFqtVEn
z`dSHhG~Do%6@pMgXG_8U<^KNL`H364J<~npJi>V1Jtyj9Q72K~Cq(U`p`h8kGeCOW
zPjhuFkgy;=8!wJ8+TGRMau?mwhu748!Y3KW{M97Y)IH<}sc3#^QKFh7^!x00!ShKA
z$ne+BxqWdOGDkw(`Yj_0RXTQ~-L8Q(zxAxa^+z=h(%a_&*Oxad-uIoG>s<~Jwf2*3
zwK1GX!&W2U_5GJeQX!h9?m;8lmwx!J9gOcY5#^eW@9A%)_IhTmJg1Lg9$@hScNT1f
z)}|V@j}R$rB!oj5bSHR8DwZyGTvYLWy1-3bX-Foo{9Nhgg|Bfu4K26*yoyPW{MvjE
z-ObJYMPfj{3|`%zfB;g?`o)~BviFA%ct)m6Iz6v}Bxx5;x!dThO)Cy9W&_In`-L5H
z7&W~rojFTP<&#f%M&)sH_nX)#-?keUs>Vw7oemstERBd<4hV=$J`imhDc<YZQD-b3
zgMAFo48q*nSPh_cFXTw7WlVED4jk*OgTDp}E1YOtxkEAV@$1pb3=#o&+JCB$Zs@)*
zl73S-(hT+TI3%{&w8u>$GjJorENRqW=7`NJ&0iH=+x#`H<*xb9qHLmp8>xw5z;6sd
z4OeE9^G5#L7x(&?MM|M;&<(H_q~~&K-|Wq;N$NxJ2CdHAvh!#Cz)jkcxd;}Eee$ur
zIO(LB6-$#GIbI%N7SdY3;GS~8i7aZgIvn{%4=7eY^AEmRU>Do-)tpH-46N4ndbt_O
zw5%{LPzh>2B}q~VKwT;gNmA4w>|4<+V{Y^)+pV@=qx|vc-mGgQe3OBP26mvWH%dM%
znz$<<j_pXVT8oh*Y*fC_=Q-!vvtoh5iRi~#ipI*3dAWOv3;z8Ssoyz~^m)o8u|&at
zGL08Qc{`=fW$K2BXXF~5S(?aeIjJLiPH>76`w!bMprm4)9m5;5M8tRyYUgIVXYlAI
zy^PWqa$BB-!{_q0=yX=0>1A_1$+{b^bD=noHbdDu+lEO`2VP5By_8pVM0yGMa3M_>
zV*jPnl^@ww^EyiL!!P#IXYLqx8&FzPE{MR?-a4wR&~$L4sDX6WlU5G0z^Is<fAT7C
zmR&3NHlRb5o;*UdwluT~{8fVDdFh6mC&SQa#o9kX&kjpIdtXB5j(+GGxo*_tiOVdB
za{`CH!*4%pW%v`4NrzZA+qB7cm;_=S4G!Jj&Zb4jtYbh<>hqplv>|XK?PP6+F?aTW
zc(WNG>51Ih!U%rjN$h6hBkx@me{nZ+*SBj|?qQ67`FdWG)yx9+-llnOXPfXy@&=0=
zsf6MMh^*ExI<&4jjeT$viK2#)u@orpn@20hGkWZowaz;B&N|B;{Z?__`TS7+t?qy@
z+hyek$~F>G^7a<XcS?UjG8d2upO;CaKhno7Zk^pD6o+0aluw2f780zTGbr&M*={?A
qY8(jg7qkzLZYPFs`FF4v6ml9{)3+~8{ePRbaPl%L($$h*gZ>M^Vk$KN

literal 0
HcmV?d00001

diff --git a/packages/web3-shared/solana/assets/solana.png b/packages/web3-shared/solana/assets/solana.png
new file mode 100644
index 0000000000000000000000000000000000000000..b7cbce999b5baaf92597e37d25379f703fb00096
GIT binary patch
literal 10204
zcmcIq_d6Tj_cv>`h@w`FB-ESQv-XIH+8wCaLT#$V-a$fw*rTY?*51;h_FgS&D{8d0
z)!ux4{)q2+o_l||^E~&S*Lj`i+>0^L)4WH`MomOSbWaNgc}7G;obbOwNqXDz*}CVN
zh=}CSK<9;qriadL%m24f^6~JSc}T|RDpt0rH1w%7_9-{@Dt+x$YVK8R=}~CyQE2Oy
zZ||1t?0VAGCEL>})7vTC-yuEFAvM@8In*xktxf!Uo7iZp=#LiB@fP8UW})e?k7vFL
z&NT`AZ2E7Zk$<s)|5wAKr7wKTpZQh@ysP!RziWB_)Pn!kfYz!&>y^Nb3ZBh!p6xR3
zof7WdBCfqpockXh9u{&O<+Go>XFJVhJ<n#n$YTD9ruQ=@Bd1cY9Z)0mtA6fR`O>G{
z*r(Xs^W=ZJb%NKb@3;D@*9{0yHA89!)#?W{s)kfP_sPCZg;oqPjfQDf4Bdl6V5P&F
z<-<(<p*)6GWcLADCEuPFeb@f@o$tvj-TV=q4<pR0IM&C?x&<RTg(JH8qb&cDwG+Ga
z@<#P@$EZ|<4RXc|-~BMm{$Y^)<5}johJVGgtnugR6E9OIUZhRDOqn!Fo-#?CVoGv-
zl`yUNA_g8eV;VnmztYnTJ8K?0Yk`@wh?%pB{%IBU^JVHJ+jOE0YTh<{f#Xk(UC1IL
zY>@>Z^g8&Lt;>i*;1bvN2U;3-C%<K9pA~1{6?4lr7vzeY*Q&ec?>8QQJl_0K7xd#^
zER^B0;-1W9&kuk3IN29A9bvo|{_0;Sd^f~wH`sh9(0V(-X3Gz;>1)5~^Lhj6u<q@&
z?(Mwh<+A4K_7^->%0)=_Rv3tUv5zv^3$ondo2!X_b`bUaz~6Q&`00|1Y!k-t5N&wC
z9O3wgQ5~hb3GB}2`I^a9jklGlj4?O@*JR>!PvUe>ae60Mz2jK@<5+{+`be^%6#Mib
zUgs=9`z-P4d6L$JQqJdO*d<>5AVu>sRr4xVWjzggovv{mAwQR)ag(lb^DL_GT8qc`
z*5ZL)&-9)X(eul|tXx7fJ~XuTjm`X8+dH`dDqpe~R8g5Ed>0|d_{y|;=n@fuy|o~!
zFMNr&ev;3Y%F*BX)&7AO6-aLuw;K{UWge0zDZa~KW2=yW3m1(^k{pcPM^-}22cg6z
zcyFPSi}J_&k9C*%@2*vw%<;YoE|s!?O?_6-Zp^9ZWp8JHi}&b*=Di^i>Tz+vG|!CN
z*+nEt*-h#mnwI6Jy<AZ}3}W@S5vl*6fs4NH$1rwd<7z5k21#+$zKPS_1A2&6cgbIo
z66hj3o)?9mthzUvEn^Uzqwdqlao@)C={1VSLu7Y(YEnsii>&DtY30uZ6~I_feCk(8
zULTf?RGrl<r6kexA^&}?EI}5%-$G~k>{5^4_o4$uE310sk~X8Ljf(GhzWUrD=d4)~
z<5o2$1bpDiTP78?nu$aWdyOV)hpV@H3efbi7NbZJYHnzO^oaWv9w_ym)Gb1Yfk(`F
z)q%5JssIqK8ygjID2`8QWQ${XIP<7)sY-!+@GgU1QiR<o>9^Yd5?x3*>DgZ`M?^h1
zq^MC1h?dz=WOaA@g}3Lc-F~8ww2P>^rj7Vl%cSKCgCdF`?b-s>j{`lpmt4|F`}vln
z8t{fT<ll?a?<P9=>VHCD$%&@b?9-oC<znx%zPD@-{x}tyQ&HX?{5<;Ij_3J>rXlI^
zBVCC8_<vQ(KT1|SM;<%9f0Q9Ltvn*3s6lcp@~nj`Q1jYZIX!OOruxnWoxq>KsmD|H
zt#DF%gGd%>s~hboFT7EBbEwNYLl{v205C#+EI&<?BClvcd~EYX(d^DKb%yo5$EoQr
z-%C8qdP!enf55l&d)0?5AY!zNEY{AR-0P!ltz1kQ)w)*_QGkS4#)OzPdG;1*x)xWy
z3-y-yIP}r1V3kh^QtmtPu^UA;-<Z|zN040qi-?Tm3uY_6VY=7vP~BePEyVJet?YoR
zFIHS0K<TdmF#b23AAfhzr9RIvicYHjR>nhlzp1+Q?Cf;?Agyw-<!?79EeGW-28`a^
zD|4Nje1g0YD!cLHecofmqL;v^A@O+dje-a|pT9q*q$IOqGs@aD)ow0svoU9v!kPtI
z;G2jYGfcJf%Xv`i`3$$w=*G8Q=-f2(cg=ZE@hsy?_}b{EVA$rO%Pqur*D>hpVO878
zdSDCp8dIk`SmVdt&IPXcu!dTL#CH@n|Gp0m4e3OC-`2NM6*x3>8P__8v9D8{`)wxh
z4Yz2uDOiuFm!JV=%Y%WiJE9EwsD#I0AV?5GL<U(6rA+uzfI;CO52&t2TxtXk`Rquv
zWIcJiSN5v*uPitp5Dh`2q1OOlb_v@XSnA={#2{F_i;J1+KI_pJ2uuI?NJh?I-M}Dk
zzF*Z|>qFhKX-{t9&&`&RMt}CU-Le=ehk-VR!}R&aECFFK9b6wVz=sGzOZ<jHK|H?P
z(eL_Hf3s@!%I)l#W|uP}^3gsGS{COEh7>kU!Ss2?DA?Zgl7_)V3DcUZCTswphEBPe
z^75h9eEFzxg{d$kRhSuA`<D_R#!!uXeLG7#5=KW~3>1?bi|Z@Glc4a7PTQq#ug)x|
z;Kg4&hXwQ@k~Kp-0Isllc^oA`vEFNXLmv`~LKjt&b6NvOU{Ij*LGzD+=i)7lVwUCb
zU36KAo{&Bn+gT^zELO?}C8Q4eh{rPUAuqFK!$J|fHP%qalcU$m8Vk71$uM-T=?G=V
zWG*FKtxzJeocAS;9<REMBYUNNpH(WV*T@8fLX<=zIzN8Ro?KD33*^mFl6FU`Ojc6h
zGm7!PKo)o$B~B==wb^=ma-0GDv3|2!1F|Yg&#ZOI%piZ>!llmzC%EV(l!fEbFb^Kp
zX>s)7)=bh$B?mo~BO)0PaunIc2`4Bm8=F=_SE{{f&}FYWA+j#`dS}q9XT13u`B*ZQ
zbeOEm5(-mxC*JJugxo7_*SSXTQX*>{B}3O@gK{h$7T*Ekpw}gXc0h=_Fo>cj^~q2d
zJQ-SN?!}+rt0NNy!tOLR7_rS5k_{ta%cId^3!#{F=&D1yf*V$L_5Sq*C{>b%4Ncbv
zo$M%v7cPUu>-%PloePgYCvC8$g`(%BX7{F!@l|;Gc=u)Zw<|P=spIAV3}r%SpST!<
zCZtT!HRL(ot7F;*S5^N>VGSy-<Ad|m;UZ2fgB*uxK4I`vVu-(@pyl8OO4hH%rF-EV
zFKF-{(;GSTVR(<JbP^u?<2oq@M$CLcsOGEI|L8xxytKb*kDx_A0>YjF83|U~{gDt!
zHN_ZK0t=-j?8S9`5DLxDor>oW_!GTcyYI`x5Z@V1Cl3rq#G_H4QcdKScc~BgU2e@Q
zzyn8#ONUTu9n(-HglhUR_<?BSqk2AeQYhlL<0vDA98evTW*S{<D*-cmQ@PdynmTw<
zz<sJv4gr_uoV|m;{KU>7Z`IXpOYo#~dHAQ(49=DnbCzX*2e4XRw)MhJqe?dCDM5yE
zz#Ob&*r>zSb;do&64PGrp`oF^K2H_RvDG&_^$9W}#Rp9+o4rY>(r|{fB#`+t24983
zFZe@TfMHd3|Ikwoiuc2MKc*7wH4BL$zd#T&Hmy{nZ<?2E0Bdc@u{TpN>(bV^)~NWk
zQ})@dn)pyn)xQ}vivns~nsEd_@G?l0K@&j%SgHUxcjc-ef``XSvgk+m(u~0h^&Pf?
zn>IfF>$@zsI46m>?R^Hkw*aG^j1t-fovZC9fz&2xab8AyQ~sCSkN%yuudS4G+6^4$
zw+;uLYXvUOcwV0F*)rh_rWv?@7I;iQ6#*k_HLPPFG-Xnr^{JWPu)P{29IyYr5gvZj
z?LKClBa5ehLJe|!8ibH%r%E*%>8sgbtCqe_g!&s{5@5bgRQF@ixWd%F<fQJ_sE~`K
zF_B0?{p=D3M{Oy!NxeOvc{Znz2eD8U@MXm)2YmXK7=CLnt^A<^wW3J!mC4>=My=W^
zioV!XzQ<^`z+l>Rx0ksQTG!f|@2rC>l<>i6Z=K4cmn)eFp@=e9FlS!_t61n)=2I$M
zhu=G85acV&YTJ{?(aA^S#Uw4Tza)D>%2Wh($Yf|a`x`Z98D`@Q@$HheOg=yUdl*Th
zwpvC?0vthu!mI5ZyIP%Jlp-quELt)?W5=IgyIwv-NWnoxGXv-L&ZF2zdt6@1exH6(
z@I4TD0;Hvq3@_$oBgW55DN+j|i#5fB!E!D~<wt-37dwl3_i4uM!Jqn1;i#c$<k@m}
ztOW>zH@HkG(=Z1C0N_BLjQVAYy4L9glx3zkU?nN?A1Mzt+|c*^fza^SXY+<ch9~-v
z3gGo}3_maoUj-E<n1C+()gDQ>92whcR|1Yog1j6ig6}EVyfYrGIdq+>ln18GkIU&p
zJa_>37lB>nvpy!JNcZh+^ra&`kMn1X%>8MSgkO;;-(;7~T&97Q9^57^hW-tVo{)}a
zp?YVIuBr#Q^hbg*t;+fFHxl>Y++&fLL+MVVQxL<Znwr8u{gM8HfM-~6=R*oe&n*fi
zpV@BrM0Uj@iv8mh-8qH9A#bMDrW_>U5!0}!{%I2Y5@U$2b1R12f1Pk`hF5T#Zw$)1
zC9e|eO(%iGJGAfs2ORo1EmLTea^d=#*m<{Wa)A_r{oJZ9{&l9L{y1Hs>Qjux*Y986
zZVIFO#(_917sHD|wx#YJe~s1X+!xd0D<aHI#}Aq=IlF%*BzLWlt~@Ykd0b)q_3iGp
zx#p_T(_3djK-RT-X&^v(r?D@a4*Au(STQrbCq|GLwI5b073(=U1Xg@fTd^l*0EL|h
zO3C~ck@{AX`c0|)*#vGEDnQxn%PH7!Y94^Qe_ASBbM?URC+6tiLV;%d?0o>3JKuf#
z-cJ|niI(pBJYfH7?FS4yY)$N?NQc#s<BB)BsdhAOa0zdhIl}knI$Xm!%2P^{^{#Uq
zZgV}qyj<seBeUv1*4ow-)NbU9mj)xgss(1m0tN}(?xQV1c`8#MM}->p_TobX)Y{Pb
zUHpI$)QE6%4>)0bfAQme2GCVA?Iu6;Tzil%m5PdlN*~5wXB%qKmh1h-BJi^GfU5&-
z0L;6Rq1=Yn9BtPfexCW3%84(Ux9mpe7Z!8^>y{DPORY?%L1hN)<uq@fR$Wg_Ow7Cr
z0flt1tJd(kugY7I1u?peQt>d%`khQwIKA#C5kzWD#O;WH$EkQ-Bjtv1N+O@40({c!
zA^c~G)C{8e>hic*F{q?=7u^cZ;Pv37GdPIfaZz@Lg!fk`g(+0Nl=|kUtGG=Ra_2f9
z0y!THLj?<&P!1EeuAix@g@NbQiiRsKi)%+;_|S=kkLY33^R8m4c-MMmya-;EfIM@F
zG3#2*{xuitO8iRS39#}@R|eVAcg5!B`T34M<!d(@u(B$5-r>oCBaq=P(p_}S@+rZj
zh6w75g}E~72NFrV6G}KfIs~Kmi)6wNjT42axBs9J5Qh-bW~cxRai;nJY!a;UT3Ztd
ze@&A&Uow5vP2mw&dz2e;<nUBZo(aScSjSx&K)0<>3w>F|G3JMCh6&sW+*iX}y+8Il
z-^DX|{Og_{xcC_oh7WOoVl4^)Fcbg`Pi+_Gg>#`wvL(mAPC0OGjajUGJ>v?Pk$+f6
z8RGZl{c}-Mk>x^}_b}`r=fWMvv{MT<az?CngFAx(_#68}HCTT*%x_mEI%{kzj>*7*
zm!Twq!HT&u;SOWW;1@iT0hllO2&?yn#VATUhq%gFPMMmY{2QH}b%Tc+di^(cBPl=h
znH58FB(Ysvox!IxnsO6aDt_{w<V_3zwr-C;YJSp+wmSwYtRB{^f7h)m78uBr$%JZt
z(UT|NDHxQ>rv5V2zLz=>9vRClWbqZzpZH-gRS4b^coxGXXjEa=;B>Sh<vdvdZw>B@
z;+(yjNF+}^LL-*ufUnwiMBrjcWtxmlrs~<iP3xw8T-L0GFgAf^-(AQ^+I^<RyVM3z
zEn4HsE|F+3HaCb>nYgBL4ZH*8el=3VnT00%sCT{-S&b7)rUX^lNVE9;nb~&LAUt^M
zCM3MZWq=xIc~zrh2#iM<NaXVap#F^-lLZ>!$FD-a6Kxry076g~n_BX`6oSoU4X0e!
ziAqV><>k{i7lltMiS8ZIiGl=C0DsUvjJu8m#QZ8g^>H9zC-lp`PIm~H#$aoK*hl45
zYF0SnL04bo*?0E~raOcpcWn}?79nehVLpp0H!&zgrqI3B(W>jC(*qhF>4a!`D;o)I
z+DwD`Pb_`kMat+g``v2RkX`@^Io!uK+;>NG%&gkEXx5v1)Ey$P+*TE3rzqMxsa8rm
zXXil>4EYm4&IEj*ah6}H92N-QhyHVQye)5PQU>~bun3wcDfbq><Pmm29uw^z?>D-c
z&$D|_YU|Z}!@sNV5HA->drs@w)S9mAH?STKH}@qvc0&KLs?_je9iG0=`{prHI6|8?
z^BT!m^H)^*WQ8%y)*3;CeQZt*^>VN@4gt+Ol2h@*XH_g1o2*cmY;Q(4$Pa=OTLM(E
zRV>xzp#vlB1O0<p_tl0F+7jXp)?{o>S&A`^>mog`O}U=-3IH^7A|mO>Ecf$k=ktPl
zltC+I*iY94(H%_(O&of}LOWy%bfw|&Sv-8?Ta;AQj5rHkbN_nw;RaG3G&v{Ab)cM|
zN#9_D8nd)Vke(R+l4v8R3K%t19a}Y$mmKea^;ADCY$aL5>Ub1PoXr_<9I!j`!zSNz
z^So?|1Q^xF2ZCI>Zx1Oio3$EFdG>nssiyX;5HgT22wKDIntYUrw<xvNjj~)Zb_vE6
z&1PlD&4(d2uMbCBu4r-s9wmV^u`iy?<d3un7sPjbqvMAi-tq%0DJW_<b=29Vmq$r2
zB<tAlQe1py1`_nQ!l~X;qNBM-4%9f+=Z*@%xon`+17QRUiSxZG`tV`qBQ_@9A@p*m
zGU)jT+^da}1S1S+;1*jz+Z5hk7rA6(;wb`1=wvhAU9|i{8f?%EFxw1^G*GY6$S%hj
zpMel1or+`GR}<E1=dS(CB$!BmbZ-yn%--}oHhh&75f}7)a>5pcyus?cZFnpGxz$v|
z!95VPcD*t3jU2-YEBc=weCt^rO+vK*8~!ow$%a>Jf*>ogW-;)2VHQm38;*i0*!*G&
zKLBR|TA=hMpcwX@yLcIpBjf8LE(8xY0M>x3+ZWVid8~nkKbiYkqSiX<JdWi~ShKLD
zJLh+tU({*Z_whgwpCqxV$uFP-;s0S3ey8DC<BlSO`akiuu^T48=ZXht{V58Pt&0GF
z>ezb){!4hzjn7E&9i8v^1o+`rzw0-X^v%O)H61UT>O%8Up2acI<w$bRxr+thUbsWc
ze?M_+PV^i%?$niOxl;Z)i#BsjswUzOp9pryv*q)b_X6=`wh(egaKyOts*25Q$_j4!
zf<Lz+!xmImP)q)HD+}?k`>VPT)&#m8AZP)ND#r&vmjzg~v_eLmQ4xGBqwZZfE=#80
zKMjLuB%RV!fbLy)w_hZ%<OKzHQ}E!OU$8Aw-f6PxYSGZ_XJ!IRLLrr-_T26qrC*1U
z(V5hVXG)M4w@V)LV!MVDg;2=<U}Xizi-OaNx@Y3DW0sBT!~I6~l>i?R1?-Gw{kb*x
z4^=<IdN0i_sXa=bZfZ?M&|s~qF77;nzq@`q5tqR<W{E<ICbm5Rm0NUCI_>3MySgq}
z6x7#FbgzrtUM1xtcq4Z^yI3!}ey8$h-ehwRt!Q}mEsx2Y_0mr{iY!o4Fo<@LYtbF8
zIL5|}S=Ppf|E9Q$d@}P4`##?D0dDrp#4c;I&c}WggJ%gNa|hd2X$LXRIww0Tn#>GT
z9m-tri`e{N>}O^X8(Zv+1d#V)hsb#1SYMgws*qFN`q+M0$R4yT!dzm;A19;hhfS}(
z3~la-Z{Y2E^%l>}1)f?)&;&6CU>vL={OuqAyD}ZVd%IQIM#TI~ordPEfn?%Y9a=A}
z3XMSd7lZ2}sa%IF)v>#e_Lv`zS(5vKl3ntkj8NIDNHmI<CWaxX^s4w1hqz}kUBP|q
zOl0CUON9B>H8t-$7e}Z=RjdpNv;{N2c+UK=8F1wqhEHqj+d?JcYjQqL`RAO6cM?yG
z_bG$!<purs2%Z6C@CPmS7R}$?cAU3F9U~KuJd`=HU)XE)kDS>5^_ov$N8)7E!XOff
ztg}3u*6Zv?Y+`i-)6Rj6a4%ujjOBi!`>}KknhDqTJ5u@F{Veq>M)DA_F9;0e$(z7=
zu^CqU1;w#ozp!oS_2j?Phc3&)Cqc;`svYw1H7QRFfBfnX%I(VZY@scw1#Wh=H7Ofa
z%KlV3sPLZ4g~bf3u_}fK*#5EjnlSlk(Et5(J(7^g3#aZt-)i#;COJNxUyB7~i+O(V
z>FjQhf|iWWm{Px#_s1n1nXoJg$-UU-hn<Scerm0kApu~(@DtD#IY>)&*?vfg*pn;-
z%N=KO&X0U4Plx=Cn?@*Fy07)N_Rmej2o+q#)7xuR&9`xiFiXQ1qWEbg9<sdocL^R2
z#=mS+D7VMs(?<0AnY{@PKMuRo+F;^NpTbelZCYlo9@ViwDF9+ZwJIiPJPt7!%!a?<
z=Z7g>Ir87`!Y^6a`Yb`ECZX9e^Jclzjy~wzp6q`{ACp-2ZPNX5ztM`-10aKGaGRaS
zf3Okfp#|rmpuMHQzWg8?%WQnvPNirKPZl5;6j-+ZgK^ex+>H@jciFb?zTjFOOD&Eu
zSHUK*QbZz+wyrsyAe>vlaDFjrhNpy~cHu{GewZj!@`AtVz(=%6QeYo<n<>a8wgG$p
zZ;?frO3o>1T_%Tdw?2Q1kr?w!Q-7>O6!I?e;Pd1cQGw)Jwx$I)PJM9`il06DeDo;w
z=$5F#G(A=iY$2e!LH72~b~9H&UZ=RN{+Ym!UqHDjK^LlMlJmVTN(^k|N_WaY{rsa0
z$|}A?i8P_b+>*UM;x^2ft>XL3;;DuI4EVFt!LGF_RRMMQTs-R+OMB(Zwl&6X-CY5O
z|D0JKQCbWOn<3W#JS!fWmqCr>lsMgpNR8J`p_O8!%ku8=*jCZJ`tAw_hDDvX^_rPn
zru30X{HpPs>AHgzPQiPsXjid`6il2(8mee{ST}roNoHnP5g|<cAZ>Hiur2-BLvk7i
zp{bd#p^m@h9<z!Tn|(4S<xAd_ebd(PTW;~8NAMH6pV6cz)1h?y3`vpLF^wboAD!3|
z$d6+2hyQ53<wT{Z`8l4qQ@oHT?zRS=Qhu<;hcXbe1X(Z|h<;<gr_^EA3_kE`yHRo^
za>u6%p;7cCW{d*(@KOIWe$wZ_o71`Q;U-$nXR_(P{w;NCl4-_s%C}e=Otd*drVCUi
zZJ*%!ZleRiUJXGZXcuoHcJNo#jFa*kZ(dFPd+*;PC&QCIG159hX&;SXw`5qCVvTOc
zy0ZM#&zBz$u?pg6X?N_J4gV^tHaER0@qTNdvUqj2kL0p4=Y@2x(MU2FMaioM>*#xv
z1R&6Nga^h%@LjlM{F(ma2$2(qMxVaVtDq`ZV)~7G3zf36R}K7y|ApgtStLgC^c)v!
zRG4QU<nT$OrtQzPsCPJG>EUz={4lSx)yPfHQ-vpsb~l^z4$BkC@B~!iO1(^tvc@DS
z)Tn|Ws-{HBOv9r-+4)ypcb)yN^X!3+Kk;s3cF=1{p7*QoNtXMnS31zDS|L#-*=F`L
z6+eNS)n5ThxFS-_q(QDn;vsPFs3$u7BP7&J`+2xb{^(_3QFo=-f%q4)TYrCNKNr*r
zWiU1OQP&eIJOYXuwsH7`<&$E6;nHU+^+HO$^{h6!c0viY?okIbT#rBM!9wb-aU?B5
zEPWw$?Nxu&8}!}7VuSXHp=9<Bnh0el=y5s;)r;+9m%VbNw9<X3RUYOrO(a4P?7mvS
z4;u&d3vD)AG1_{?iYR@{8GZlAvxsL(E_i6Del4(QxatnJN}fCL&S}q%G5aN(@^JJi
z{p{P70&=^?8|Bj7G7>}a8lWnp>S&Ad@L3pjqPIakC=RA-BbM;l;!ZF75@Itm?O;)6
zFXMF>ooIgBdZp;I_$@Qg?2bVJ_ig8H2J*LOSz^Uepy{H12}PnDs3SUpt2Ay<@$ywl
z!|QL-;-2=18gGN><B$WS(IzfSl?9pcCS#otNM&blZ?7OM@jr1MtWY&1tX`G37`6<_
z`oGX`iCn!5x^pu+bRt2nWkho3M2nYE1d5#ZrwaE@9^{cROs3@OU`%ug!O@zby{4kM
zN53kw^?IxD;97^Yz6y3pZ)@Bkn-EZDvLzQaCvHU94jQs0SB_}|5w8!`19+a{z*&E}
z&k`b~7D&#h0a_u=wkgl*AF+?_i1afn087*uw`-No3g)(LfEFBi(DB2m9hVtF6pHc_
zKyZ$@VNwF<$vfpQEPl@KsdSityMHY=Ke^$+*(?lk0jsTE?4q|w5d4p3_GuW@nij95
z<l%>G)d1hF!|IV)Urs7Y*v}X;ps&yyxW970g-HRsB#%v{V052`nPSe7eK&O;4v_0#
zlHV%*HE)r<q=_j;b@hSj{xB>>R?VdshCRsB_k-+6<N&&%0&~Q6OmCfBa8J8XtEeiB
z#sqD<LZS!!!`;fGgODTGIw6=v<G5`0>IznZl&ITu?3xP#8oj0g6~BWj_^T<5&<a@!
zcDfPfXSwbYkuXd-YhA;Qz`XR^1y!-Mz<Rp9QD;fCL4pT*ca;Z^IhdYvIP8f&I^K-P
ztHNi7K?D<B;-*R-_v*oNyml>E^tWXiZ%-wXa^BJ(*9#f474kA^Jvs{HhBPYSbEWDe
zE)sAw+wt;q#Li|w>(iyD=G>KeSGPI9$ivgBg`9x{2;|-5S7{)h8X@vWcwg37`~&vU
zdzsfr6=dc>eNIiSx9_SZ<&yQoke92xfP|tcwS$kXmKiUbembS82a3#`B(1qLYz|0W
z&DT+OM|stG=2CKMC}qdu4+GivNU30w30M)><+s$gtY+tX3R`+Py-F);{v*d_bTMRL
zEl|^|gth`3UUd$7vGcvcR?pJrV^5bGaoP3Vj8B$;i<G!>yNf&jSe)3{wP1}Y;e`^?
zbs?PvDbr}~Ftoy!r(*8Nj?&f!k5WT5dz<Z|t7*v^ak)rrAqv3;{IGFi*uq|{6CzPC
zWztmpp_9%t+7wg85paVXX=Hu5X0Q$-2gdoj(Qqo5UIFv65rPt$gdy7$H;2#Y<ddWd
zsq?)7kiuV$Cg{I5*L&cbBUhA)jgBqcLfd5(bEXek5WAKhD%1Kw&)G!SaJb;+Bx4W)
zG|}P<os@H=WAs<em1hL#_SOrFZya7eq?fCFc#V&%RD2{olJMZesm50$szPlCA9?sW
zmJ*P#M&hT|WS;P|pt)zWS79s12QpOd#%RIOp)NHLqRYOXekQWL=-wivi#j_U?!x1_
z^TQy@o1=%u7>7zjKgfefv0OfdB88{-N2i7LN=wA6<U8pyXm5hoKDB;t>`%2!P(ciq
z8*ZjEkKM)z%s?@~8+f9NpZj)UYtM7}H(j*=IXJ`Y@DKEmi=V>sJ+gADC1QMeh^OF{
z6rKgrB7!+xY&n~^l%HXH%c>C5%UOPIsuV_X*kP<xF8%Bx5_OrjQ+dd?IQos*IDWl%
zu2<j#1bj8`seYHPhiOH(>kqzkj*T*r7T=YXubuh3Ui|0esn&BjxKzav7<_10fzo^z
z)|J(F@83TJGx&=Tk4;lKxD#4Jj(J-)wsk$bzDt!COS0ko`9@~sHcbzlMiXh>q8u%H
z^_~vQ#rk=6y<mteF(3*5Q<qz;#Yve5DQ^@cg!yevmRNx#Z~zw#>c7+XcR2^4acf(Z
z-=x$aI|gaeo@#4x7L0SFjrFv2nK(6+>@uj`@ue$@ZB&o26>a{cD;lQ);Tl<KGHD^0
z&nEZ2Fnmr_9nBT|@Na#~!wlF{0^(ftg1@j;-!LIr0xoy?zPU%1Q+r$5y{ic}_cw1K
z$%zTvI?fOH{TAXgcF1}nxjZC^JXd1m#P4z+)w|?kBz;}a*4^V}ZFrU<!D7Xa+4@w}
zR1+cR+RE4K8^+sTglsGJt~Iu+oLvS@@6}lw-aq=VZ{R53GGg47Q`lO8Tl<T)EXEI2
z16t_1ozDbO6|EtL@1*N89qbA?3$)u`+dKeIqm9thXg+v`tdOlW?wHNelO|CRnD({O
zMQW_1hxwVMpY<`@CK&@K(yy-OFWaK19K2@ymgtz&l;Tf6Vk+m=Z7IXiz~Uzt7eTDE
zGB^KH%<GKNELmI@;{Lci1*EIg1TvOw?I_>j_BHCbC--PtAAAdB{;0Xe_4Lz+yDfZ*
zcNbei1g45|zPkgD{<8Vih4-D*Mup&1mWQR3oV^HcjmzoCf9IorOwZgej>6jB5A+f#
z?2Izw`3206ucI$}<}SS7dtZiV8gOHluXPUOgY!5RqEmA)%v}GirS$D(s66*Ae5f@3
z12no~OWF(|SDJG42YM0FePhgdx1^!E6e090`Z*)#3)&n=>awkLxD2Sf7kc_uc~5=W
zD_T>gGoJEogz<mMz-PWj2B#ToG;1wtPkbLt1|}7$>u~=GK;gtNcy|CRpZLFfHf=A$
zW0vg%+7ND1k<ltAj|hh<B=fl_5dalm>K-|;bJbHxdz$1&6W1Boa6v3WW$(XbMk{9A
zpZlmC(IkU|MM`*dy6%euOZ0gZYkkxWES<T<H+`$4Cw*pS-<>L;XX}|i_l<4b|CA9u
zDdj!sY+d-LkHYLpmFN9i^idRs7;2uDWc_ic4C+jaWD4PV5mC8Waf$hYG$AtHr?Bxb
ziK4mDG^=7M{=GB9NW;LM5n+;?mD<?!co;8_+^Uj2dDoP(SPj7}31^VeFgfld#8sKh
z8!oGdLzY*#c%^&_^{RY_4RcB({Y-YkgRFSnV&vbuncVYP`eV*9Svc`ia^A)+{2hBL
zg-I@98CuL-x+<K?ju4@BX3GBZ<P)VJGK9q~#_wmf+i=@GR<<(BfRrgGYlh)_MGP*`
z1lEdo{Tzfs!7ol4(d7;I%*ywpgkosTKB%L9Cv<qbR@+@+N<BBKz5fatugu!g<+pp1
zZ;jZ9Wd8J6(pj+5Z!G&0zFyY3@MX0vQVu-*$$s37Ls5FVGN83A^s{<M?>BF{?nr}p
zT9P)`vQzH~--uI<WanV~H#mB+sW)=Tcw8ee`jkevh5wt5xedkMNoJkoJIsGS?krn2
zC>g(dHxLm08dK5AA@s<mGVLwJp1_p7o$mJyap#8%e3?q@$sZ_;?!DsbAYIB|eP$F0
ze`%4}*Df(yua(LrF!*R@BjL5yoQjShWr3_#?N@%f-lP%%bM~=uQ{xRUg=CGK4}WEy
dNXkY+h_wK=8px6X@Be+!)6&p`RH#{n{~va8Y+3*S

literal 0
HcmV?d00001

diff --git a/packages/web3-shared/solana/assets/solflare.png b/packages/web3-shared/solana/assets/solflare.png
new file mode 100644
index 0000000000000000000000000000000000000000..b8455be276d5949108c7031424275d2c9687bfa9
GIT binary patch
literal 2162
zcmV-&2#xoNP)<h;3K|Lk000e1NJLTq001%o001%w1^@s69zTe&00006VoOIv0RI60
z0RN!9r;`8x2q#HIK~!ko?OAP%lvfpg&VAn*cF9^SEW2d+*accwq|ip9rA?JJhPELw
zBwDB+G{Klw@P`yxFm1%_pVp|Uwvh5wicM&XmROA<3mDU-pQ+lkgfEdDwg!T-wFne;
zcIJK0dHiwTnVl_P`@!t0@g|dbcjwNz=eg&c=Q;NdP{v`~Mz`9t)vXwU5th?9RgS`J
z1pYt%Lxw$5{d@aa^_y&gyB7AMWs~P}aYMzWK67PDD?(ssLM)%g_}cnG*;;@g{`Qph
zqOvPr<!&6>8rf7g20;|U1W-%`&@mtoEz{F_rfVx=EEJVhBi3j34{1c;a$}(a7yxqW
zfIxg}dX=8(`YmEv2$jvj`pl0nyIlDwOKM;MOknEz4TQ@k*IFvO7qQ$4Lu*hwap@KJ
zt$dX(V|`i)#LzDwY_6Xi1Fz8VNiiG<Vthqf+T!8S5e;f!1Py@UhQ5QCdXq-nC5G`(
zIq86TvMF=+s+nB2fEa3gjR>GJg@jy{UYi@5G`3e^7!Sh-rZ!L3Wsdi$B+Hjt7)wiv
z-J}YS*3?{Sdc3@0zKf(4Dx+YCscu1fW5>QebIXA0`1$HNe0KD8SDGWS)WLv4RMb+R
zx@;D%XjmeYUy`Wsz}?c+hW6e4BFTP(`1zP=RJJj8Z}XYzS(lu%v2G-ZJ77s_830N%
zTQ06iUD5D;sH~?UfC^~%LAbtsbASDkegk;{0WXaC9VmA}B`1{c;Qr3_BA^#AgjQAe
z6by@tI+8?16nn(D8mZhNoUfWf+G?7+hw5n>v1|)AWWFZww#o{`@A&nj7zD3D-SouK
zKT%~Tlz~{VfMjFQG6jeP$P18nJrPR46+x)H5`;2W*0$#c;*$)tmibieWXAj>RH{oI
zl9T}{ddu_<Gjc#qfSd!mT@es_0R1yCOqUIr&H*<P1O1}hf2u<a-zz#~0;x1$qyd!%
zj8y+zVUQ6Dj4&Wg4>F(!9{cDp=GMW07`!0HVJm4s>>w2iq`l)vo8KY>5I8^_gap-m
zng#Tq=N$mT!Tn=+Pl&Npz!Jy8WVh1>sWAU{ETANSA^`#vL5L6pfk;5X>_PXagVQ{I
z6)J!vHQ{{PAVr^ADf<7pWTnD9DXGrb0Ws!BiyQAAj4uN&_V}@Ji$&cgM3TZtgH)<_
zzS4ZHgg)ii?SL)^WCO6v0bPNAWgS>}Hs7H@WeezbTV%&mj(^8{b*H55%FSY*f$%32
zDp8edMC2MlHk!I=P?-%w19AzSR;qWtQj;1<B4G*bb|*lx{=FBlY~Z7UWPT4Fg9bvS
z6DFNdo}jr-F*zxe*Tc4bJJ{4v5%IdOr)WDuzIgqY5#gNN`>&mRu67Dc=bEBXRHnhu
zNX^$Hb}nfh&`abZ@j4L;7zrduGF40HH}d+y$j?KZIN8%s0x^2XA?XGZCKQ;|!cYry
zGo+wFKs$gPv3zuv(ALEW>O#i&DJbs)*hz~wKxM92Z=;3hk|xl<3St+yo@z4zBKmq@
z;%Gq(^UlwYKLpAEffP5XM<fw}?0~vMpgTgdBM><pB0c~B;Y;tl9yi_cxlp1%hhlaI
zT-Xf&!f+9&x57{dlX0dPCx$wx)Y32>iW-=tiwhbc`5q8n;Cxz%0AvAJ36Q)4KLkkp
zE)#}bq<dK?M>LYd>G#tadF!p{3UxuWz0)?ZUh9#XT4nlnAs<03(|9HYNqgEYh#i97
z%8s}P3=1`rOA5Z*K|<t7nV<UA!CgbnT5Opx+DzW&*>F;?)}$bIh14<>cb<9IlV;rx
z$R*K9@v+pe4>b>qj!4Ui(=fM2MwoXf8}!g=k!Jlnv;I|#L;*z3K>`BC-NUNvR68o-
zAZY{72S7+LC=orDkVc`nlloxJ`6L%WVpln=K*WMiK#|mk0NJoay_3``)QR@cG$Qe2
z5E4*;z<mIIGc3x^hi({aaeM%Z8W!}R+W{YhUKa`xVS!Q$bPGrtpkr_GBfgQ|b70Gm
z0^#xrl^O<r5S82fSwsLsR#e()G6`8X3OVP`A?g7M1aJm8?19Q=s+@yA4nGJ*6-@Go
z-QB6Z`(7FnAZ&r-`TAdwa!*0bpjaDl<ioP=;CZ$*h4$`=2T1og6se+mD*(gB@WsC@
zDYe%<ciN4CrCxyI77(XZ<+h4f_x-i(K(x93N1&`sK$xgo9z2;@bJ4u}KK2k*9xX|q
zT#$`wq_zFrMVr&qP@x?41i=RY91Zh2Ti!T$x@`2Ts~VPovNGv~@}Mlb6bNrvpN4`Z
z*QSRr1p)x1?cMHh@4jyexd>pbrroV&(~)>({X8hwCg=0>B)$-?J+|$#q28M5gvqHw
zuVyA!Jq3m@?|&|=`S|E?@BY@Z0AcgQn}qT_%!M?ZrUrMW)^_aa!$tNnC_oc1mOh=y
zW&3t5i?Vao#5zN;6N*tJ{uThYr=DzoqmM_(b|#&&kb}Bh7!(k$YW#><uoH%fX6{gs
zcb}0bI*#<2;ml=94omM13lO#-q~*55a5Gij48w3vUvI{XX`;*&&ob)D3gogaid|?}
z1H)aU><F^Cdu3BcSHCYOlo>Gx7~pgmQcG9XKMciEm~0I$jQ*l*I@vW4<Ec>Fi$A|f
zP}YcCOta0C7V3%y(+8*gkb~&Oia*|be#V)oX(qFuojG|(BO;U;P+1l{e(bvgxfQ<z
z1!q8@!s*aP<XVsXoSECAIWx|ddmUHq1x$1`1Yg4c!r-h~ssH+j#B*-m5?4jX*)+Xs
oSajr?r55=b1eL(p?sBg4Z&jv!e^<CI8vp<R07*qoM6N<$f@MVer2qf`

literal 0
HcmV?d00001

diff --git a/packages/web3-shared/solana/assets/sollet.png b/packages/web3-shared/solana/assets/sollet.png
new file mode 100644
index 0000000000000000000000000000000000000000..0a8b660ea2cd2a9d9f73202fe17b3a51bb5c95d0
GIT binary patch
literal 21894
zcmV)nK%KvdP)<h;3K|Lk000e1NJLTq0077U0077c1^@s6tyr#}00001b5ch_0olnc
ze*gdg32;bRa{vGf6951U69E94oEQKARVztEK~#90?R^KB99NZYOO|X|vSdkCoas0t
z5tdzGm-kqBkMO+du?s9L3m6`8fi=9hz?vm2$+m1cC|R1&VMeme8n3-J$ry09!N!1%
z6FABdTef7$l4hnub(l`~opbKJRky0EyQ?}(^~iJQJ73jwsIGASd*VIE=bIZ{8w=OJ
z>eY*1_xJy>?61D`wH5C@Z`;b#hT^L}aq;D=PyerL)_&n<x32%{9l!1W_Wh6gH$T2F
zxc$InIF@BdxR0;ld+Wb?``zolc-^gQPQU7!RiC)z@>4!E6o+GNJ^8P{^tHvWd-r?s
zH@v>ixiL5Dj^j>Vzkbmx-gfHJw|?exE8o9$*V_Mg&Gr6s9)21bJrva%k_1F2sDIN#
zPvLLlIpDeAIpMi^eShZ0%WN!Mvti@Xw|x4ut3UnSs{>p29d5+5p(Y^dBtYsBp5y9I
zU3S&dw|wgKg{ucQczyro#xXV)EbsT9^ymNQ<EuWt=Q96!Pdx92IcHLW=oD}KK3>DB
zkL~^syr$!ptzGB!{hb@LY|KA#*~yDv`>yw_{J@Tp{xctVtQ}^ZX^9bu=UkKj%=;fb
z<pVp07r*wMe?R|(lTPyb{?Cmb9P<{OaKedy{Em07`smoD!EG-b?G(e#27ss(+P?qj
zs*ffvS^UTU`)}tRw{W4?&t-0SJdXFj_VuTHXgCqvaWL5phMjEyF@fcxLrJ(dalA)f
zKc~4dgJb@Z6)Tp#{d1r1`}%Jl=r+S1D}?uI>Dxd1FQ|Tc{ru)em&SsX!O+V0UAQB7
z(V>*r3^!W|@7;=jxM2I7`}i0d#|K{bdUVN#N7H4m8SGf0&`7d~UOl|GUO(Tt(c-`e
z^O}FY;s@cVR`r^pj#+|xi}!dgzA}r(f|Y^b>Q7#Jc{rM>c+NmC6AF!{N~e4zwg>OM
z*Ux`$)EV=RUwq<<cb~mEG(1`Gnqgk9g!g{=yU*H;&%$edm>bGi@@Mb+fZHhd9CeTI
zSuB42d*A0ZU%c$c!nLn>)w(loyxnVt=oRW@9K;DVJD+u5y#BViY-0}wM!uK7^IMzd
z)T!PE2okAXfA@{E@R@ndH!q8^=#_6jRi=~AQSSpp5<WA0c3$((F*`7k4m~AaGhr`N
zF9Sr<DIXpkpG%7D@Hk=MO>g#}^T;z^GvFL`hVWV9GxeIUX8pj7(iMNd>HN7U_%TTE
zOqajw%yWJ7kDKo`pUuiKf62;~=mqioLC#TE37;`OYp?ljR*mEP|KxT4&3m8o`r*yd
z%n&|neCA&B-K-c(-thj@LPJM$UO%)snpwhUj?dm}{_E+1u??>u)Es$B7&Gyj4|{Kb
zp@vI6y?!`z)Ek7n;5AG3%)kgM)^oDnBwD7b?1wG;>N3`P`_|)i>w!k1SvDXjqP}hu
zH*gYLP-6`BzE|&DLY8f($a;_6e%I~qt^V}o-+S3d-{&2_WXZaJz2WEGzS*rZf)`{5
zCcFKn*P$G*+xJWTJ*Ur3{hn!ZQ$CLsC6PzG=2K6`aZ6XP!P1-cZd@k-;^w&BW_V&$
zCxqWqx7K|N@ndIeD4gKZjP_&R0lr;Y|CL|dHUGqumwU~xGddQm@CUF|X1h19o{ClX
z^D(8$NEbk0V(wUbvp0U1W>+NK7fi2i<$hS*#_S}Ia}}-K=V2#-<#n`r+`e!A_CcIb
zz2@5)8Mr+2m|MG{Rx@mo`9k$b1&U6_YhildkSL+J#=(-vnj{T@No;3A?P}FtsYm^1
zKlmh;ef64uyE?GsPA94rdJPE4n04Q4#PAIWzZVpeA=t_>;)-O6E9WUCj0HG4u$15L
zBuLyouV(gN|F`dZ_?V5lV+QB?uibgyj52ZuRjE*&ef2dnv*&DQe*{1cf$FF4CvwW`
z#{2Z$(F|QvP>^06yBY8#NOUPuD`k2CAWmrg*M51={6!}%^_rhMIuIP|zI4+aA)6c6
z&Q0v}Lv{08jhHc%5G18R!ov6#LLgaR>xb_IR05Ewq=PCZNmIyyw347`5g<;VS*y>v
z-uLi4*PU_WFXk;=w8(3|?#P%of5Cz^pZ(sootTZhAo<%tYpkUX;|1fjYEP}i$m&wS
zN`WW`fFFSn7exD6=9mAA<5)psrI0-DCO}a=Vy)UxPVQkRpCj@V@|M^9-S)t)NOm{K
ztxvqGAZYNv)l+5yLsP~x076oNj)}*~V!Ag_frUoky<vE56lgd@{|84jQm2B^3=2o`
zcQQhfaH$c9XGl``;r)QvBB1(lKhC!S0X7|YF*6YLYp4StxA&|WK-|Wcn(_*4v0Ind
z{N2`A@t)0FW`e;x4G`;twSrgzBWMDEuoV>5B?5K`M%M=gMc^0%@R@;8_&fn5!v=;^
z0Ei4xXc(9uK{5ou7~$`8kfh)^8Ww8f-y=|E2v|V^6#xJ}i{R)3@br_^$#CER^+%0;
zJE>I{;63ncni1yjdCli7jb*2P{*1Pmb_OEaCW&A(%c)Ysj*(P#DlEP?0Iv<gb`Wfi
z!7*U6@eEtDJIm&eYs?4C>x0*Qz|_9&S?1fCV!m@=|EwwII}f&JCz)?EytWy(=ck!(
zC+zQpZ4|x(48H)twG6g>2#`@YHUeab10)E53Lpqz>j$s|hB;{ZqiNO`QzQ*a9ROos
z)JDaN)m~$`!)jMIs@-E@ZLj&=)xc6Op<PF^^=9El`&|Qrg9lcZVnS-j03CX$qI^pd
z0^ZvQOgxZ4M$7|K1G5hS07elMdG_byY4+hCWY~p2*Vqpq(Adq77uYZNm)K)d7503l
z#ExdmY$9J}M{=;QRoDTby^}?D_rVgo?GFWZ?fn`{{3^@-@oJ5|b$E)cMBpHRHcv9&
zHu$YA8MY39z`a}`VRj*K(j;9F2!6PRev~j`E7dRms7CJxMl-sNCB0<wp0%px)_bO%
zQn%D&1a}_JE?ocW*LcnMjs{lM!|trzX82Bl#40_47GS8lI(ehw{PPh|V+P~6&9IeY
zIKvk}B21E$`0DjJcG&}2cF+E4wl7&=rE-<=f!hjf%A6`?RuxoH_L1;C*a0ev?}_iS
zGE2ho_DxK)2cFHbs~^g-um22yI10agK7s|L(MTR7NQzXeAgE;hC~<}~k}7@xG)fgI
zQ6xZgkSO=W4fA^)pTZc)yamS}?=}B79oYY_Bh1|48?MfVjiiMYAX1IO*U@$u0EXIt
z@dN|~N{G!G`^!r*?6O~F*yD%G00v~@5-~I}eyPGrl?p3YO7LD8wpHN$5-a1rLKXN7
zlKJ&2r;71fi2wxOuK;kW@H<rmPLY1&si`vi$z2-z^yL7S3#Ukhn?J<WFtlxGi;@JT
z3V@|gNSA<Ay%exmog^j)N~fNO<zBaY%$4uoHsm$`Hylge@PQ9m8GNQyth%Dz@)=H9
z3n_-H1O|Nvqy?x@8vr1E2#kwBeY#+Zoq1!9J$ksv@;K8o$>3E0LWzJ<svv{&*AOUW
zcwK^{M6V-o__l(;sUi8Eq%td3`Ekl6_#FUBrBvp?Ln&1$>EL`RS7tZ<KEvLBC8%QG
zKpQ8`mhS`=3+#`6^qLK$y2Z(F0Z34i#RjVhPFig?mlK>*b*q_*rM{1S>Al8*?O1S1
zC>-4J;#4PR{ccbVI7ac|i~X2kd<W%sMpC3o1;D=W0Z<lRq_O`5^(kHADo+&{mosQZ
zp=uqH@0%rt0f376ILd44XKE!)E#Y~gI)-!zz;fB$S+-;ZjQ?|!?4*k_WTS*oT7df1
z2iNE)uUD1>C7Lm*T_&mOaK@hrCyN~+4<avmjR(`f@;sOVP;bU=Hp7HswQ-PUGf2JP
zXf_L3AGAD<H8v0?l}ck9fq{I(+~c(8H#v4B&l#@>Ojtzqsc6Tn^}tdwfyAB^sZ*&c
z+s1&f5`wl;D#Ct|R5Ap!HeF%2J)C75zy|T1mtw~WV?H#@4g3H}6mFl8A+Lf&s$Ew5
zY$hBmO`f@xuW%VfPuU}=`!%|#ri?y=UM$;(EYddkXE-o6AX9+k@NLboZ~ipPULs%s
zqk>9P22gO7sc0)HN`h*^!Hsc}0M$B#_C`f+%Zik72M}(rRLEvQ`-lHuB5(ub*l+gb
z+22Ib&75M3w}U}H0w96Ozz@<Sr~pI{G>+EBP^|Z~ThFuEvF+aP8GB^W;Qx3_x0$;Y
zAjp07AzB}%>g&fKTVxaidOVot8_$ESp|PJlQ9wnCY=;s`j8Y>Ns>+S<O07!did+K0
z?idnWb}Ct=TqKE70zlsJY@WSl9Ms2i(rmQ|J_gWbj1hYgSPZBju>hs6R^ZUS=q4@N
z@RqlE3Jy#{>_6Ln;ZqG0Hkb)onIY=FZ}~ktfT(`{Fr|QK6y+X7hJgQlyYlRlKTfe{
z(t?rD5Jsce1{|pBBk5|9jlED~Gw4!68tLw(LnE-*dB&{gQK?LmWI=ax9;C`o9>4%5
z81tK9vcO3Gs00U3YiTG+ECzEcaSo?$WjB0<Ye+n;18k>Sc};c_#Ok7yNrY+^E2>nX
z-M}P68r$*fEF-y5DuJC*CV*6m6$>!T-lp0a++hA1kl^f&K$2u(<aWW)OhT1}N32rj
z?q_@r;Lj#NvV8NWAU)4cv-Q&MklDkO|0T!*4ihjeOz(Ak#4}avguyqzrPpibS|5%n
zg#x4Ev@#DQ2R!u17^qac((Lj_awIj1$UFoN6&S28Ae@k4XSfG}8!uMt>Rp+_nRh+|
z_hM_3(qRJV-HWFUJ8e|cC5oM^)z0<mDFKhpys9<-xcM?#?$qCH{j3w;cOwy6lYwjZ
z8#c!ai3LOQfxiL_)!^;|d8uxCYMKo30tVv>6%ng&2M#+XwKt#@QVe^p%2gGWPM$++
z62%pO={qHi=&+ZvW%f^30!X%{Deo&nDfby;?TN(>nJGZD5?|{BUY*e**-PL0na}mi
z4B>|4YC5r^ZV)5ms8(&&*j0OT1ddXP2l>#ATP~?VycQ&e9n&hFtg19%DrHmpiIIZB
z1B*PkSfX=t0*02Qh@t{ktJ5qG*B!eZ4EP-xvG9v~_G|&-^|Nh4$g?v74qWaS*t+j<
zF9M|Ax(5A!QTf9^1~x}5%?6^NN`OH+{2QTGl`3R&xUn_t?T?}k24rl8X(1T2t5#VO
zUfVx0&7M4vXLs)_vKyW#uxlR6vmZSO^iYmn`*?xf@>GG`u#dl(XZwy8*r9ZhrN9QN
zR(T#*wOXZPSBpGqPZCK<Uug>@`ZaL-2=B{RZpl;j0H)yc)PAith#2!OIOv3sXXh_k
zx~%H}k!w8M=$bR3Vl@PbRIB7#Y^>~ok#U$2zx3k_%QGP<iWR|VVq$kGIglxfVCWXh
zd^RQz7)XKNy^v@BaaV?Y{K^UT%AFHD3-_!P^PPz)Ah5p)RGACGIKD8=eCJ}iyV#zU
z<h1z+dqZrJeeyr2Sp3dOcGq)x08A01GF<AExy@9v$?<Ak<-%j}M9Clh9;ECxbc5$W
zie%_M*2F?OF~K=7>|0T>BzTc`y9y3$6fYZRc5<fZ*s*NZS?hJAM3Dki6EJmT{UyMV
z!)bOT4-8h~F^(eTP)XNqYbq6G;sWD7pUSc59RR{8rlbQ9z}8tXo?+|9L2`|!*v7FW
z5NzRGHo$fR?Wg!_iL`hv&0Y~tl1jKb2FDsrQEUeDz<iq~*#|G5U{~Bb#r`mr7b;q<
zTGz4^p_opE5+bj;H%qx(xYi{&W&k7<>+Gt}Zc8BK-32Ryp{@bsln;-Lxnb%~8E?%}
z8?3I~umA>^8peKLOyfn=fbr0sd)pIvVgMrmSaB^m$`z3;Sm6?5e`=a-y6z~cZobhp
zTX!-3UWPz12uwc!6h=y<=sa*g1haA&K7-5`hJBQ7v<0Jh002Dzz`?a9xR0-e6Wn0-
zjR0770cds{VPCrT2)iHDHe_s4!%8BGUasib!0uEpu4>{nU4K7Fkn{5J+i<R98ci~K
zN{)j`%kgvW5-?Ok9_|V_7Mv0e+qrd}0>#N^orq1_<JP>E(?P){2^<$C2QnGF?}Hio
z->=Q`oGOfUl*`N<_;U)7qL3OD@_c>gw;(Mp0+nbSV=5UoIF4XQ!tVkQfFk5B1wtl|
zXUKgTrhVAP(zFc;LV$#094H|HoG>ycycdBj0Vd90$Mxu#NQsi_Jy#rM_wOrG3Oplk
z*|ctayEEbyfcy>tk_E||A!#N7VrA%dt2R23AngXALnEp3f>n`7#{ptp=g|!nt5p$e
zvNe?dX$2rYOrcugEZsMjA$8|KMi{q69wk?!;*Q+8g3)js(hBVF#yL2Gm%=Q&hpR~g
zK%ucTF?A>*0D(Zjb0UC9(u{Kzb`l47mhU4l#!$Th$pOF%pqeB8$K#TOqVIuZ9OFPa
z{regA#8K|HE>-HUKWPMziU7zB4;BC*nhr=j7kQ7>lB;HLxChEi8TrV|9R<hneXseG
zdO^WX1I6v}>UpkYnN0!*sRbF(@lox`v+;ZKWGj?}$EwtdE4PFmo@uuCV1Y}G-BT=d
z3H-)x1R{W997)Xlg0ZAz;8KEv10&QJW8iHQxC$jHoRB13(~3PMuPZRF@oFbnta@DI
z5(RUs;5>ZWlkC!a^SE@2ylIAK&8Y<8YU7O$!!@3d?H$qt#E=Atd{%J|h)zk6Myi&Z
zR3y8Y7;S-<J1Rv~+oKx*aVl1w0z{vM<%~Se87!~|m}X~|9nBRf#$iOs-5Rhw<^7QZ
z=-ruQ%h0yC7*wC#DK0I>GbX8_0)i-pspA>OtFCLNeGU>?mEEY$9+Bll6$wMvC!|YY
zJj?pWP`ZeO%LEpS(8&9=<>nNv*yYz+bSy=5fIOI`;u3=~A^EH}NWuU}w`YG>%P1P~
zO~-7J`HPn?x9b_$4N=%J2_igJA)zk^$>7yU{n&hG4mhPGR4ZeBh8qcjM)0#oiy%3s
z*s@EK+|~fKDlm@Vz~4*jvp<&-0w7U^Vm1JYn*pK&#nRRwEP|a9Bw>9*$PiEvF#d7w
zty_oHRCeJy78!7?I99cEfIO5336difD?$LV*Z_3iwH4*vs#!A`N5P^ZSSz}1fYj?7
z=+y9T%G?eDO^y8HHL6ui6l{|K8RJZZs*G<}hCO+-$aV6fc@dK%k5!2$_T`EtcGAv6
z?6^yTnJ<BJ+5_s;9%)Rcg-0sQV+JwJAmutD(X2w6UNcMX*Sw}k7?VU9GgPk7xQKS6
zmx~HaWLQ6{TNlA~ALNUtaAHtF(i9+70LUYGvOyv-uI`0I0lSb%g0x>XzT0sS{d?m5
zlmF(+UvCQ>^A?`CD6sv&WFvs|0@Vfvvm$D)5#!>_w|sY!{nhRQE8r|T%|zNpRWOM&
z>4D$D8TC82XjHIa!yYa<f}mOjcB4v_CXh(46IZ7+AvKhTj|>mrAJAL3X-z3&qk`!Y
zMNzq=YKf{=KWzJV^AbdNJzW6FSv6g^Gk{dt4G(3hIK@CrxXmR%<TFrIta@$bIsu?g
zlmGlDUudg*DHdU<>tbzDa#)e<M1nX1h$T`U9^=~p8LsFC&9eA!attHHrRlO`CQ+$c
znP&S_V6bkU;08IUR{aQ!J*e6kv5b%mrcqL4#$XVY6o5pq!Xkkt(-bHK5UV6n0-^FA
zkX=F&CQa9V`CS=u(K!W(e4hY<668WqvB(2g3y@IV#yu|E#_7B;bLlF`<1GVZ-5EFD
z?u5}>0!l1v28c?HZlK*c#Ihy>mY7E{OJtnS>b@Ns``zIZtBUm<C5LK;$@T!leAjK<
zV}(J#@HqEYg@wloZ4WZcg>xVjSJWb<(Pu5GAZYYCRV6bU_R<bfZLhvKw}*V7dhNPZ
zqlzcxqIq&?luBQc0C_ksBuH9!n}<{h5_kXnZTVq_RV>^`9&ZU8Sg8(Ffoi8ENT<nc
zEM`prK_-a+tw(Q8G|jTe805WD*N8jyUX@uYUj)N9#nxVmF%D3zK!SvJ^H>L0trRs!
zW(|wkFw%ta-H{<pRDgsO!gC1F{m|G6AWhzNZHAH@OAZZn6F?r+$Ogf6Gvstg7`a&L
zvuM`6w<igByruLLxmvJWwuV(|bOazVF8)=3VDxzzFv#1l&5`#>b?rI@2v;@A?7nAm
zFdL`X;2s2CitL-<xNz$xM0{XO(;Wm79GwG(Sv526gK^C|NJJG#^xpM>1o4e0*)&WH
zm10TUgIa*ptXWYd$OTz0LC7m-50H9bX@ws;!5dD=eG(%WE`hDjA8mF)>elvx8@zA5
zDJ_F6mNl(0my9VJ*PwxpX&A%5NRmfJb?rI_2v7Uo4ae|-YBQKf@d){DjU)#J1ji&m
zr1TJs(qVvL#TDuOG6%vmbDTu1-9Uh#>({p<#r9|Ax)Ns#u1dm-b;BbtF`S#GK%rBB
zbYjx9<Bd+MShxjVKZ2#J9OL7}Kl<x;H~~PrH=`3b)OsT%W8%s|ZlnT0hBbEO{Ut?$
zxJbFE@};*3kT+hHW-AeNyEEju3howxK=fLT^PrusUd0-#RfD4NwY~b(Sb~IW7)MpL
zvSu3y@5gwK3Tof+ha!&wHCT9M5Ld+rAP);KR+Ptd)CE&I1IA{liX{kn-nn}9q2V#7
z4D33v*QOY?`<_X~ii`IIKrjK&w^L(3c`Qc@j@$wS3mmW#FXxGC)+3`yE;)o@PDVKb
zLjXj2lgRDaVbzM%t5I(7*P9L1Y=V#uo-9ex@Bg+yhB~d9Yzh(q5V-yu9-C&q^F<s)
zv{JBZ2hr%cH3Es9v!>B!8@=W<l5Tw;dEOB?P}BsrJbTFL!P`=gT2!%`0VFIM+4yNT
zMGsb%{rcGg2#~5vfbh>$fl>f2-<K!JdlX3suhqCr_Yk(nSXTEW(aafZ0}v*!l|f;l
zV)1xNR_{w<VzyXTca?@jstRT>fBuIBAw?xX8i9l_J;u*-6$`E#oA*Q&fLK6T)6UJ!
zGmSap1-ti~saRGXv3uWt!7~RPt5;3{;H4MK4p_R)BlqLj=P%3MoLh73-WLj#sHXzN
zk^O<|Jm9l0<V(!=jWl(53W+RQLxN;=(!0l!x?>Xu=zvR<+`PhAx7s3{avY>Fo~MPg
z{$j90{_)}rWf5SxR9@?=kt9(7@>rG{{6wg?NLpEHo2`{1Ho%w-Di+eBjc@&5O#y;Q
zTyBs&(<+wTG3o&XOV*HzwN+ye?VoN9AZ1=W;Sbp&^PQOj6-UN8GPD4TJXR7Q33Du>
z8;pV1rmJqk9<e?L&Zs<y7!bKy7!x^pcaBZMbs#8;#bR@SpzT#Hu^XSrQL-Yoiwj4U
zf(@gZ2^jSN;^?|!_7h)SzLURez4m4XdxQ5KB{2Fo?|se*<F}())m&(|0D|gB3;?oS
zV-N3dO@hdF1yjH*zB4AcfgDfk=^Tc8*9;I{&2p%2IJWs>iuyHbNRV29Wcd==1dmKd
z$XStL&rcM<PA}>JDcALANeNP7H$Mpg`6dTQ$W&R8|CZj0u8w-;*45kTNyRB4?>7X;
z!nLn>RU^c80wA5FdMeg{0+3KF1rj9B9@>{Do5DI{I#IDO`i><Muyz*q_Zz_Kf}-ne
zK(4M6NrPbv@ti4VAi>W#xv!xpd~P()>s3Yby3uZWZsND`yl^`R|Kl>_2WX-wvFT!C
zW4(kRLJ0!W^S0-t4Z;&A8#Mr(EzLjc5n`Y&K$e~QFK6h?HcPx%b`m6_SO3eB-yYLU
z?s|sTqIC@r46aqVo7Z<)iml$2A#V=lS;_U;aaDrk%pmDd6HL>D1po<0%>b#%UlITb
z%6JSm{sC}b0|s}sj4BqVQn92+6NQRJDq_JZ1$O6Ca1XyVNe%*8dQ@#I-3~zN@k6tT
z+4}75_|Z;FvGe??``CQ8E<o0P{@NRDA4ms)(df8sdBW8HW4!SV&2sc0v*fqO{vJPl
zRD*|It(i5Ot64m63CH#ulH?H!i$3MFqK`6m6@VxiwkklJND)WUgS<UffY^L5!Gn|(
zO-GdsB?z4BrfZU-U7}H-j`u#S=&#{~fJvQ9^cA`NK%N@!L`ICFasHT5^}WW6Rp;F8
zuD@oI^H?)M4A_EW-oizTLPJOMPMNoz3u(pfs0$FQO@nS;k;sP+Fd_;XTrP^kS)<5~
zQ%zWz-Sj9h$`;U7(ajs<WjOsp&kxApoRU#nt8O(1id7QSri+^;h`zOaCn6Rr$$O0+
zsD7*>iKT-so&afb1SXE7um#YMPQg8zgncYe1T;FqE4}ZA&+L4O`NlJBZ9GMN4g-n=
zvBpEx^L2EsJ)ox7oYT<JoNwOzc{KnzA@asIxjFe(y;v$^cT&aDNiI>1@e~wXeu^sz
zzjkw40K~nTg@iNhQS@YOOR_bIJRF<nU-8Q4VqJLLNCOXv$|{B=>EMGT8^i#I6(A~5
z495jO-@e^hwhGk1b$ha`Z(L*Ru~t_i!&bmOT055J1plvt?W%F~e!=^@Q>;IcF-eYq
z(j&edfaqlNY@6|2H&iU7<NdFFy^a0x`7_)Apk4HLOvSPRNJwAG$`|?cV=huOMVdvq
z<la!1gaAA57MO9jrpd+W2Zr;*v8knUf){lT#8huuwpRUcVUyHlE@7lM1Bj%7sE}%6
znJ+pS(2;?y*dlOWurCVMyc&RgzUCv%E8Zh0Vti$!oB;g#M8Lgc^#I~D!rp5t7Lu(U
zvgY)we;kfEXWC9)h?|UIyV<7Zb0P-7yVLSi5Z}2|?738ldVZ8}>1hi9saA?q_1t&v
zBwIU#WjK>0F=*u;GLInL%cH6w7FVdwObzmvn$5!e`kg)x&6LC_m*&bf`xsCSU;^e?
zT9g&yD<moR3IRfC?im9Za$QIrfXoy>bc5D>_Ua#743PQrg4^~_@Eh$8AZ;7#E|1|%
zH8TLhD->oaVeyB*D^MY6^v+aTkRnuylNH%@d$A18B=e8tY29}p{6;@6agB45`nfb>
ziQ-vXw`ez*!JbKlR3*@6^oBUb8WN+Z9c}eyIZERk)8{p%1gX7><&=M#Nszi~Q-k;G
ze$T;Y{TKe>kO?2hEnB;e1EcZDnO<-6A$Hn}Wj=-hkcg;Q=(|{BpZTuFs(LO`vBvk`
z93Xrx1*%%--VRdf{50zy<%artU>=NC_s0!s!W&@<iq!{5O(eRGWNGVuOQt4}C~ehZ
zwE$4JQWA!2z+q)nC%~|MhCQZYAt5GofKdLG0uU!B+O7m~0>ak5$7f1XvqaKjSgwiK
zo@D!zSpH^O@n*S+te15v!1w;;Cn@gL8scdeeV~@~g8{4qMUf;NELj4JwZ~t5$)Xl$
zuwUQZ3UGAWAu1R@W|Sf_N)u^D0-^klcr6&yYJlPNe5}&nZr^&`W|OHS31Znc`<^NN
z{p7#?^4Ha9tP`d+M4dbJs9k_qKU)iCp-RZCUhzMsUHE`Ohi*%Yn!M9307Nm^0VHq)
zw)JK(+RxV5x}BiAkMMKx1B3Mev!UVc7um1<(TtEL8QVsfjUv;kWU&V0+)9^_CF(BA
z3t`hv+L{X487gomW_LS=?Zo#wk?wB&4O2;=)t|cTs<2BHs~4!T1j(A#grhfW?Vb$t
zZOgJ`p-81exfE%wWk9hkR~i=C51#<=eJf1`p8ca4-3IXsupp7zCHCnv=mi@!Kw||-
zGj+^P6?1&g6yo6EM7dp~HnAm}t?De1Ky~ulD&WGF{azwd{oejFfA_da#fo)S#p;wg
zX1$sAH`h?HWUbqfm>DrW-8Y_Nm;W+DQiP{hRBZE+nkO;xXmeSVA$>MkX8-h^DdyXe
zW=k>RJPhYH!rLel7$`R^&810<S7he^l0Y%qE(fAoO*dIn!x|;N!D|pZUx#4@h|09;
zYQ<*cb`rBaP7{DMGOVp2v%YWoto3^hJ}dXvfA#jeb$|r7y_l@0V$~CcUZLJ9PV0e0
z_hL!UO`N-Y`(xY|nb1VrGOU(ZC!^JAlpR~HG2Dm0Tb{|YbvwW|IWNUl4re*D!_3@|
zAQ=H*jHC$!>th@&{#ZtrEP<%8U#};5Q^^u@W~10KteP3zDj<#(3hp?VByh|>@#N)v
zWm<Fe_8K)*v1|wfWE&{;B*(t;1C6S)W9oOw1{|)uTlg6Sn`p*~2K@E+XW5&_LG3y}
z!`mY4gmWONlHs5Lpm4yT1W6Mp){Et=q>`bu8O_jV0=i^T029kLRL7ju#kJ1DR`tqm
z##g`JcEu9QIrJJKHhdUX504rFr^d`@51?ij*-RAbuQmBy>u=Quhzb;5`bOW6rKqs8
zZ)=9#{S<bXnx^KRWziSC6_8K|Cjv@|D!=ondx=fM>vukpVIRIUL&<*FdvG~2KQMi0
zIL(4XaGpZ|g5eY`?m|PJr*cSXg2p}fhH={^ZKz;T5r~Y{v0WUbw$w0aL-n;aY2rj(
zv*m?mYEze0EZkDc$>P_&>%FZ=kQ!USg*U5{RPP3>Dwf<2iBh0g#(#N?_s=+*E>rN(
zD9P!p)v`0<b)~T2!wbng8~=5VCjo9k_pruJ8p#o}`$tpcChkYu1trE12N6jbI8XA3
zDbhu%W!%2W)BuF`MaqqxJGS1lwPV;?M(%yhqEoc^b?<(!@8rMy!oP8YO)``Pooz5_
z*Fa&}nje@|f++TgDDXUp9ve*m9?!DVu1vFn-hs)em(?yv<nb`(QZ81ga5Nh8m`eWO
z{v1o(oMvy^CA!`2OtQrQiZDo(&=8y_5M|B^dxh+lQDcjM>6aiG&6r%rwr=E@Sq-z^
z$7atoWV33~=`*qeSud+qDlPlVFaDcv<$KQAVyIZ|eaM|uu^ip_rXtzs)?{rJ5D`gs
z2o5ZQ7RKNqFyc3VlBO<9m9h$yl4ye2hVhPTzbmqbxjeS9&Y}qP_@QZb`JEd3qj6Bd
zzMQ0$dswDu@h)@?1ET}8hetrd?1J+Kl?;Is0?E@)4hO?^th<$M+{Vq^$5zH}Bw1Rq
zO<Ms-FQ`~6-gE92-|CMg{v*<+iq&gml;t!4QqwYEEXy{6A&WJxuz$vmUu4O^u232Z
zfQ6{OG;ynL*&d@T`kZ6Ga{%Zh{N5dVGwi}!((H|UFl%^<RzqUZxAhc-Pl5CRCLc|b
zG$D0tm`j%asG@?|NS1m4amwIsC%a|=z1cui#9{sCuemX-6eDvAfR<*GCO6&518RC)
z3qb7pYVd*vJd+iBlZSVMBmpMdMitP@tcpue%e-%TBX!HEhpXOq^w+RkZiRcoIABUF
z2d_UrRc1f_U5b7FN>Ibj1a<6e01Zf!WurXC5++06a3AZc*l1e!f?25sEHg0CwW3zl
zo!z^{S9ZTaS-pK<{rTObVvWuKK$?iOdKc~VxN=rh0m7Tl@ETF(wr28w-XS)K{R@Y4
z>>D>ES(YjamdJJ}m5s)i?SiE)a7z4l_-|DRoVacr`;ky{L54AwD!cE69NT$gn!PzT
z#lf;A#g-4H01N^ELtw)Qi4qj9;zklh0>o`bwOdAX`#IOV;^4DxbFpws!9xGp_dn6D
zilypxy+9FJGb(0o7cihS#Ei(QA7Xz4E+#^C3z+Hy-%qil$s+J3%<M(pN4-+2b{r&j
zU}>n13EQOr2LH21itOUsHMRzq$X<Y6u_Rl+3#0-W_ZjXs1_^^v`hMXW_D9XeyfyIH
z>iurjHtBWhKl}Gj_=4v>`kbL+)fzyJZi@QZhDLfFP&L|jGlSTXTDDUM3BD(#h*%0c
zkl;NHu?XBo^m3uPwFg%qCfVID<VfX02E}TG*2XhVsU17TP{VktJxMc=EL8$a3H@U1
zfqfdg;Ae2o7lImgPMVzvz(7|qrMnDsPZ)xQBuKP@+SNl$?#S@&5?{&veyo!f-15{R
zL&a)cf9r{xs&BQL!qJha(d$nINJKQ5q2;9s-XvxNfMv-gY32hayXcmqEKjyUQ2=CS
zK%z(J6_;^Y@v317(W>y0F;SK%S1Pj~J(^{21tZ?K2_(x!SZG1x?&1+1ko3oe``E@U
ztWS0d12%L8d;Gk+O<1Ga7uvBu*%1}12LNI^AMpV7{(m}X1W;7Z76K)~TNof=PZ8`h
zj@_etz*K*6sm308vA_*@v=^|AS&4(CC~Svr0j6;T-z;@x37>Mc!tQ!nW2ar2<hIHV
zjrH%+Nd3afh-8~k;$*EvF(pMhaE|mcAGAx9j};j?QV4Zh#d0X#>KTh}#HRKCdObL-
zu3wCiM6l5FI4^iTkU*fMsn_@dv`w}hWoKWPVK1eG;auXts1_SX-@5^l#x_e4KwPDg
zp>SsGk^Kes2`uw-Zi+3v2<#9HMhX?oAIli^tt{~q>vNsy0@S?_2MG>M6nvPQ)X0l9
z8zqR9Y+DP&v>MMA651r#*O2%7;GJt<fw^24Yg8Y~w|$b0-7&=`r@7iyqG-9aPmI=X
zGcHYZW4;1vR}r>F(fEf;mHQ49*vS{6yEx5G26ZclNs^SxVys^Yiq(z?6srfQk-BB9
zPIPZ8_B#1+&9<RpIST^y;tgn~4-bsmOOnADFY-Jf!69NK11L?fdOJvz5J-?g0L=yf
zjUS6Zk7xvx@jFuNpjIRX#2zBpLAF$y7F~49ErF#S;Hcjzn?O^hwfJb%-?SIou}x4r
z1OLu6#ZyA$;lj1`M)xQ~f*7j{9X$sZn#F7&i;CqO0B$@Uo$^f8`<|2U*KJlK03v~6
zq@@VJ=-s2>GqC^4@f<bKS&yp|ccJQakX>+dianpg#E}wB*nFLd{X(pn0!xiLRw{B=
zF`VPkLWzClS~&l2r`Xz^DKgrFqL4$tk|C_yBOa2cDpqL63$$3OUb_2COOS548to;B
zP`N}v5kW%0h$$);N)z;QAy9T_N$o=EvH^7RjboTPpJzV!jBnEfJMD@IcGKe-HkqB~
z^=~VDK~_nn7VVYx)v>Awc$P@oA(C%+vOqmg=I_dr9fA{OKoq<ViJHT1qwTX@VyHw$
zdT7hjhpg%DZj5v<$t{@ddIsvf|Dpy+2BSinB$V_N(J>c+62!u4=<S024QR~cej>w;
zL)8mc6JB_TZMk`pJ+ME=^3#0XIu?1rSsbJDv=v}!Rm!yI{o=<!)$oO6iT%ay32O6<
zfkf)R9u>8Q6$w&r#y*yb+`Q&Mp>u$^0ZKEG)(R+Ep-9x+XWYKStfmJQ2NZQndb$Rv
z5S>Q$Nth}SW+;xbA<m6?ls4;8q6~rldiErM<t29hPmi)+KAmRiVwr=b%KILcMSU(V
zS-erfP?F@qp#SENGE`C(<0fIMil0&H3}<VCi8D!_1`09N#8$;>vM{C_H>%r4T}|*%
z0gD+pW}rlb5ig5C=y_ZT4vz3xjs?brRKd0HAZ<3rd3{?neleEfyAWvm5%%%RC)f|~
znPAVnm}6R@V6-7X)vIV$$7TW`1Wb|hb;*4Il1&&;%<=|AF}{|>1Q07T%`jMIk|@=r
z|7$<LyU~imM$GIMD4mcXw#V%#K(tzlDYl7dkW-uVnB}!<sb;Mx01coSjHgJtpn8S{
z<*-+Y?}8-roqvR#G;)M}>j#I~bq}T4vquY*kVsZO%;>zs?lhGbk`ks=;l_U_S3Op#
z5MC9w6#~ikA1qMC$nZ#>f~-`#H<mR4rRlS`#7x?K*3J0FkyNnZm1f_gWW~1A-QBnV
zJ9yJvQ`|-0^3htgE36pu1B%+Eml)D*6^$C~kdX^gBqI8Tpjx(JEDbgb0wztKuvKH&
zzdX%+7Xfh2JPdS*eetRT?57V-u>;8hE!e_<pY%pyE>@{B-94#7cF8om`d;jVf{V3s
zRJxVQrYg&Kop`r8IsrD3SY1tb#|2Y%5@aSBx!b=Xqrd~P95=x08tV1cEeQ}qs%VO*
zE2n@(Y~>PPRLQ7^x<-q%DDMj;${1EyNr8mP(V7&JFwq=!fx;>%zHJligWs8Cdww;^
z9z2la4K*2`?JG7d98^%Ws&bVHjAc=K7=U{rH`uAwoQ#jeEh`jbjf04@nP|b(%J=dm
zx81DG+sHtg$zW1M5CSEl{Ew1F0%s83vy&?H{ir6A9<w?~21Gfb2=(5`DAgPliff`)
zFmE3nPViO&l-e?uA^>3*+Ch*mXxBs%yc+y`3`%YXMm_roY+qvAe?Gw;KbT|FRi2<o
z>qoG`Xr)xsIjcRj3nW#w%077ocAqNflYs#SS)bRQ2U@BZ?9wST6LAn)a!W-U8mL$^
zQ8;cUJX(#4sS#+Js9iPc*=Vh;LI9Gsin5w9Bvde}GD1c^SHHrd-#P(^Y!?Jsnm~fa
z{>C_hhW9sFi$x}O@l=<0j2&WE-#^8YIiB)f5k1YVYv|jNCV&!lIA5YgS$)VGaef|Z
z;~c62AIqA^_BnNkPiC5^XoI=zPc10AJ-ZuuJl&HfcHmH7t5=mU9II8u^sNAho-G{J
zbWo_qy-_Dv-d{->p@Q*JL?NZ$dJq#P$9WT*@OYZkF-&zCh$Tr{QS#&vNS0lbZ0Ob$
zJCH7krNSMwNifA9jP_qWSEN4k0pbrHZ4U`RH!A?)uBdkJ#a5{7kGXK1djqE(6{{|_
z0<;d?;Cc^~;wLeyR542qY8)zo5;cGl5mnPk6^n9J%%qM9i9#w^LiRJs2#F#X5j#DN
z@ii-CyWo4{*h^63F66C;+3@WerI3)FQkHQQUQNZiWY}3Su`2Sns_eX*;5W8uY{Lk5
z|JJl$Q-IQKrkzO@iweid(xbhSYSJmPV|FL4&g?3sOI^EeP|=PAFr-w82!Keth5nCo
zs;MQcd%>h+(a43&Bluj^2`9Mivk@DKVv9NShHaZ<w>*}k8o^b}<`v13#TF$Ax`3;o
zY8}m2_?i;Yr-U2o(iS;(jdUtKO2w<UznD}dhzXrt`f;n&=mt1CwT8j&IL!beB?o20
zMl<?~Myn@GddO-@6Ujb{@vPBSnqn=&7C>N(W3h=esb66L&Z^xR>cabPKh;>igg_`V
zSq{~$x>Z&{f?lmFAD9M%9dos~XG_LI>J`+kQDJ8p>BXyY^nLAD_s^t?Wv5oT0ai!B
z)bRaAzh&4HPNa$TwXj9H$jU3!fi^DHFk##$41ma*Ueaa>A|-Nsffx2kL}@abWvA|$
zWG|*Gyy`rqwMdn#6`Q2YvhaD|P?GiU%2EOFK-_qiJdoI+-j=X&BXvRvZfK@dtiG@R
z`hFcC*ev8&Q?csaV7affD|QP=>uZfYU=9FOPYT7Xs~!z$A`Rt;083yzM^Yssfa4p*
zUMMN{%tVobjTnV5m1|ccI#RXD+!nd)o&p6m(Iu_d{*5+|iJ08wvxIL<4Ro*tTRj!4
z8RNK`{cVoXjs$UB8BhX3Fc>HG^<0gL;6|@@3=Tz-L~Nvr-Rpxf`CJq=Y>cP7P|Aw{
z3xXm5)HkLXb-v;lc+9c`S)T8OHc6?{T6bS;7IZjWqAHJl<NVqJ3P4OPuNwix!Sijz
z4>J`>H??5HhK1c!v6|hCRsa&R?$={*34lb7=Sqzk#CwEig;z#=CoYXov!^C#x>ieI
z%n~oDDK}&b1oeM4zG4Q5sY<=ROqi2Yxpb)_uCITbUq^6^_d@y8JsFn7Vsxbvvli%f
z=JLhBA$R-!+mF+<qLP~Ji0)l>c8C=q5nY0~n*^P_*G$DyLF6<S%hbdZTi(vL+Pt#r
zMm<1q#!&!5%#<_f@$xevAz6ZQu~1ZcX|kr=BU22c5qRajF)_atB+aBwRyW{PJ4f0j
zYDE?a4!kA=dr(Ldd~GeoOs3gcx8y0P$URzBmugm(2M<}9-M(*{I{PA!!!qq8ruHQf
zp13;C&50E01v0gP=55&aPpA*tD+%Jn@RGBZ1c>eICDkaUci(`zT2QX*ke;Hbh)tl!
zX*9$1)@`EFhxxu}w)etHP9pTp?H7Lhh~>Cp#XT%Di81Y-7!<ZBJ^aERSqBq??_7=j
z?j>GX-dfws2|%cO7D$q0u|!LC2PlfJ80rEj?E<8!ie=Fnn(>MozLNWaE&Go6tYh^*
zU;X1&3&*uX^-BFX1!g_FLE0JgP%!sOM87w{|ATSfiftqA0{{l2B1SQiW&^_jkP!})
zKs0R_p%!v-u8y;Zo2I!aiIf&^kY24`QL#eOaHsz@Qn`G)bL`Vs=P3ABaS0HzLCV~1
zj4t0lh4WcSKu9s!JH!MKp|aY$$DKW2FNv~vtz+4#pFg7!BlhBjG_pO2(8d@~vA%eb
z`L?BbI{|n=zIYOJ^9+#2y*;BERZ*nvE_m;(Nm>oKW{79r25EhEMvo$!)vXRq6wz9#
zRAbMGR2MrvUaDGQi=BnN+7TeDFUitcl&2@BK@xB^OJ)Q+^=8Rsy3yP6V25CAC!@Pf
z^+`lHK`65z-nsiTlZ05P0muoFH@?XY0NROzsIOatl1}~A`gbj$kj6A_vGsC4fTaK8
z47=|60{i8GX?FeIEc@wR+!omNk7__UcEh6ucGDvoyX}cQ`^D2a_WQ#HcITlYt%=Z+
z3u7{G%1HZ`vt_42Z~LAaOQ<sohosSN0Z2epj`YRyZ1-JxN<?%WI4m3M*njp=0l=1r
za}hPwR4FU(OU&3t9P~@H@`Mv!>Q)?tQcSF4-og_Xg@%sgoC2Ve5~S5**+~s<j~HH^
zb)aIb-=1Wt{4_P}tm3+gGH=^V!~|8VVq4*H129PcXmpYoEF4ei2B`G?8}4GQBN2Ni
zuFXbjp7g+30fOMbYrxpWYAniqX^sl67(E$X0tD{Og9oN5%Qr;bueig4RIJgA>Apzs
z+DunvZ0k7;P2_#^=Fh7E2#&R%zxKvP=<F6i+%l4Gq+5U@JyvAIj&p+*4OQRyDRv}T
zqG}>Vecg9iad%2j4L3%M)K9R)-Zqk=W}l&0ntQcSy%HI%R>q9PXOI!1aBZV`BHTB<
zCp>s`{bRztJ;u+|e~CuM`r(4?L*ib7;P+mf010wIhFV&a1d+A0MvZJ=L&7%8R_HB4
z4A_E0wL@mgi&b+h%W><8LX$|388fVO=SqMCNwkCQu_eb2OiuHjf!GwMRKJx0WxkfU
zOY?I-#E5i`)|Urk#_VWKs|d}YuFbC>0U{`B<FJTlMVu!~0HM4sBy8<)QJ&rN2VRD#
zRB|2<(Ip7%V|`*&Kf}WakPLYMY2vT}2uauuU%!<{JE>yX+8=T(T>FYwIR${%MtaC@
zUrLauP%(r%7uPfFpO6wn1&FGPD*-goQsA=RYMc>bii#D_=pGvxf!Et8#AZl}pwx)w
z1z9tX1wdqARBZdGL{X0U#`5gCd$~7D?F;Wlf+TZgkRVg6e@G)W3%zXQycjjxYPyQ$
zA)mM<#6Vqu;P7wW`<x>Q;uSFL40|Q2Ob;Zg=>WmnRlcDd+doyL+PTGIxeh=KMnUxp
zb?rO$fuVjj_h1D_(}o0*o*O;R(hU_$6F@LiNYW?=Nl1Vth}(GHBt-%g7r~fFj`b(<
z6iD>J=e~o6dPS~lced(K-XF~FO%+P)<eh1@epi~?Au%qY>{To?A9W&Ov0K!C*6$y0
z2o4;loVF|G#@F9W!nl<*w#H{25lW;-$rXx;OjnAG<I1}ndl79A0ggs0mRw|njBqp!
zs>Hu1ji96*Kw=6oI|vY|N)ZS~4T+)d6UA~YY*qOLp>dAeK!O8=QcnOxiC+s(Rto?@
z38GDx*@kUL*t(%Clf|t$K(wX+ahi|S?7eOT3Rk{=>#n8%!5oxuoga645#6NPGDG$N
z2?~H<<wM_&EIT+Q3$xX>DzN4q6{|dhRRg2lw=Ko`vD#paH^x)}5+W7LNF0<A`;J|&
z3WRzTGqRGUqe8m7F%6z1NF2c;0g_{hJF^6kRwM|fzGLlSZ1?8JrlBBNIY2Ts-n~`<
z;uV?luj-9?3yweDf8ievwriy826P9Fc>TB*31<Ze>bxP5i-hF62#j<92rrjYp+4wl
z#;EG~Mw}VMd+_(MOOkBCt{nONB?AQHjGa()ekJb<&q-EHaeu9bDrE+P0G`fZ@^_T9
zeev5ekBlPe2oL~D9{>awTlq$&*;V&uMXlhndld^le>k0|rlCP>#uF1NXhJhNGE^^?
zTYxx`AdUFLcHgqKz7ITqXx?!P7d8b5saYQ$8EaR?>Lk^>sIXuP(=49g3y-)BqER#*
z*Ha%z78QV0Yye_rhKdM^o%8(+rFc`xo;m>0fuR6Ig2eUp+DHj>=Sm=`q%IG(Q?UXG
zp=P3rB~s*l+j8vJPfSy3pQ4MbUIQQ{cIYVBX6L0?gxXDWkl=FQdH_)ah3!g^Zl$}g
z{Lt{2BXFo{)=UAw)eW+<QDRwpfQVcq^kSh6QYqF0h)T?qR<ZMr8~_9vF-<x)`TS*3
zXG_Mg?nP@y)vBvXW%b!uJ$^*QeN^>IN;OikfCwlkL9kWB7L7eIiPE$r`YgIw7lNOw
zmf6081?JnDqWraxP(1^Qv{BGOu7D)9b9Sg$j?^o4U`C@8My(H^?f}bH#gfcJK{9T%
z>dR6|f@Il?lh}Z>%<D%rbZ;6=L+Ra*6{x~sD9-zj>rG~&B0b&)B<%r2daSZSoyxJW
zB0W?f*i96AMu9B!rk|t6m*c{*uqYf(7Dbopm5hVj@l>8BjSZ-F>cu5892{}JUS72a
z)$?rE<=c%oNMP&pwb{GP#>)3^8`2+0gA=V!T>?m**CNWwKzfa4GT!3@V;Kjhic~kM
zWGUO(Ffk8i%LlM7)HaRO2)!Gux(-6FC&AxM)PkffuqfB1AID||r0xF+VXTt`;S&cM
z=x5%Zr?i@K3qe9DRe$g+44@|2hLIGNB*G$ip@b3l2+6fJHUQ~GTJfIETU-NVVc%>1
zBplVMt*cnwlOS@d&JbaRQD|ST6ht>Ks1*m3B}IZb1PB<iPaY|OIw2Zej&cLoPpy+h
z!^@bm&}uBFOOs}$gc<?DRFx&3)7P}<*H;H9ruP#3T>NAFGuW}$w>`^#`{FdM>u|HG
z&<v0=JN?=;n@2fl0FW^O5XI)0RR94VU$8O|bPW(3>(03G_PUH}VOTqWbR(E(D^`gy
zggO!9F$)7AU}RsI;Q(<cLDZnwQCuLjCCAoc$s6np3n0OEWmstt!9uOe6m^D6lUjpa
z1%RV#m7lXZ04!9y7AB{tReWV(1kU-SJsI{_dvYv~?G9Rz9-{REN)X@H2^Jp3{wGNe
z5KP6<C5R^K4`*#{kgiOSZKznt<1K*$$4PJc=qGzF4r1r#lUun^NAA<Z$p{I8{lhCY
z&1o7Mq!nJx1FILVx+up1f)WInuz!^Aqa@MWD93GPbDL|htJ|fjQVjti$pQ@ddqFva
zW2$>RPld6uh=cE<EW7DR-mpgoNu3zxbT24AgsTy!*&{C%sP<NbmiA6jc~r7L5?oq`
zMKwqxcxv`y^%^aC!v{XpGC=0dU$DS`{*y0sliA%w?X5FNJ%E@cNSY+bp_Ejy%#Ab~
zGY8kXKl%gg5S3^CVQf*LQ8DNBu<a*FB7hRh8t&gZq+f?39jtj|wxCED;E=&TyW>l6
z=<a8r4N+VNQeYpvI>Rc}5}Piy01zx?DpnIlf0?2xjsv48JyIMXaE}8ffMjO{KmzAK
zwI6xBWq{zo@+VFiwbAEh3?Ok{8`sFZ<$W$*N|uG2*X+fzV-)$C)VcrT=P+xY3$x@%
zn)yev93=42`(h|f04M~G9D&6sU?9>_qUI&Lrt^&%Grw&-MH<^OBAzhvzs%Xh;yt<4
z7S1I|Md)&D1sdnuLB&k-2|@-3D;4Li-7=Oj1?f8t-+5Ck#a6_pKuRY894V^kXsB3b
zV_i++>;WVd+v?<`s`5?^FSt;#Or?EV9rG8jSP|NFB<qIpyGi!I)NBF5?I5&4((G`O
z`~IzQkY+O}CN19fT%P&91+yg9gaX~WA9Q+@9te=Wghs8^`f=?^j2rX*D6fjb$-KzP
z`hXir9Nk@OM-nW!VlXc9t|;e<AAbXYdF>cqN__7@ybea!S}IpvNDgBO0IrX@_i0>e
zn`DD1DdLkXIG*MbWQ_Map>_^>wHO&i?@c2;G;}mKfAR9=Z36@cM%J4#tm_kO@y0m?
z2t6cGMIGI|FHIKpTr4X<REc5r+LS?OpUQw?x@8LV_$lV!1+(*L3Zw-vBX)%%3BmzF
zAVFr0WeFtQnCBiZ>GiTo6dedrB?&TSBtlw&;ZGRgkU&90T*hXoix!;U3hY*Oc9z|>
zufnR;Vnd193?L<Hg-~Jd_}&ydDTdNx3T&Gs0fZ{gCpbtb9x`S;hi<Hs=~N`0x<_?t
zELb%#;EYk-GkVK6$_5}|6(C|w0u~nVod*(x(%p*<0b=LYM5%*P<b`aRedLNMUeIAn
zj;mM*h*9qTML-ZR1W=^m?x$^*yk7D(J<zDDWT-Obf#LH4Al%>&h?I4If~!yg;kL!s
z<WgEc1?Kp|DNKhM9LZ9~F4|r9A1+bbX<od#>Q1$)7`1%Su>bx3BJ&L=*}&K&b;UyU
z3T+Sxj$lGI1j<^#(H$>Vz1N)PVj)j=3?MkLR%s_0yxp5*wq1;^1PFC^it}P?2#^;i
zc=OAW?#ZeJNh6?O_G=Y@^2os)`^YsK?^HWfVErQ*N<pXUApk}K#Bhc@UMMyEqeAV9
zahGsVxQKP2P$6iZPlnr|*aj4v1A!BeK#TF;@{bv{a0jv3CNSr^M4s9dyyH7lY+tHG
z0YSO;+?sFJ3>+2RPMfC1RUf+&CWnht+&CXk2}&yf5d|)!dL_YO0!nYFTc*0Zof->P
zMIzzRbh%TKpdEnK8uk`|pn)p%Uz}ADAcsK3D(Na#Z3)hLWKuQIt5xBxn)kj`VCP+z
z0^=Ra2_@Na6dwVG!BuvGg2Ng`-Z@A_{6sK0N*%s$s7E9*@I9iuE-3;DLt@ATL|z>}
zM=F&+!DBtBN?v+bmQ9myp-9)sQ)iq3M7>_}^p$u+o}WB~y+@9c)EG!`fRF?k&sYGG
zwvisq0pi9{)Ao9hkyLrXDdBL(0fIxdMLMe@bp{}^`ng^`5h<FcNcbU;An3i~D+;Ye
z8{E(|d31R9r3#yvE&&4-*k6L`;X7xF^1gh#G`4OyL+V#Q7|WEy1z-sc19K07WEcj9
z9|C5_?FdqqQ#8k=3v9XTIA@eGit+_im@yj>JtbF0d8-58g-JH@E4aoy?^&pKmBIop
zx>4>#f+!P02?M1ic0|Lt#}w=P4z_}uBDE?oo&;6O4j>s<0O>{`xfylT_OK4DSBhm(
zIsuTD!J+(iL{+ikh6EWDMmhqdZ%>*!#U4o&SaG_j0K~qHvRmQ}W?&2S!jTfY<^heJ
zeiecRRIp7+3aa^bq}WLSi109i0vHOHs-hZ(MGsKgprjcVTU@q^t<IzeYy__<Pts*|
zj3*oV;8?y*8MYCO<ty$futQ01L|034A()gJ?u_z^(gd_pF3@_IPhNhA`Sv8?egefo
zdcb~QoZB7}Ai+f1#xQp-L1v71fOn5ux@K+H0D=P(yPQaZrVFZEONrWJ8|#}@TSOFj
z7HJL`O<n^3Pv$}80NrDHx}>L@bP6PxHja_zN_AS))vB-@Oy9qMX`21ly&C(!S7zDY
zfD|DKvkBWe1AP;i{2ZV&HCp%X+l*UYmdAHK&}Mk;0(gHb(0P-TJ^N>%^MCfL4Ey1O
zS+*BfNMao?kPOpRTrDZ3p$ZcB9xJ*ItQ!W9-~CHC-_Z$B^^UU07>|1dcMBVY`X=%$
zUgzL&AMdKS-%1>$rKCi+WB#J0%K}^X9rjAaQg4bXL8xx6Zg&_D#19V>7d+kfY=IXl
z&<i(|I|h)F>3^Z(RHlW!!t<93U@#v{PqTeTitM5N8oTM40{ih3S@xgzYwYsh=Gk}d
zNwZ6Todp{L_5oCvKagWT+M8pyK0D1Gc`?tP2S8}txZuYu^9VOqYAI3E&Z-WON=4Si
zb1FGhfE1~)+?`JVh=-0a|LznI3XV^K<iOMtVS~g4KwN>tI|+h3JActhOS=vb982H&
zna^2$&%Lp*N;3fjU5?bhk9zkVVc)+e%Ze4=;IddOvT3j-Dy8-TVrS6TyeHH#Qprfl
zD9nygym|z{!qtC9r&{~pa03P_FnH=sMYMh{vwQcUmu`afQLfb#sZ}UBP_+t>B$4qC
z%L+nKz@b+_p%U`!jDUm2{Nv{LfBXJNRd6&*DRC<`Oj(yPn*~y~z_b7a?GZHEaj_Fd
zl`qP$kAH81y_At{0Lr`+P`TJPIJ~A-0m4@nR)pjLa6An*&ge_*lsy?1*)s*I)ugaB
zxaW$KFwRwgxRe^Lq!(Fv$*GFf2fT_rJ97Ymv1r5pe4BLpwjw>cA#qIIn6MWJWykW`
zxvvC+7J=f!+E6==vTJ{zWrYea?^7<7mAFVNo~`B*q%+ha2pXwX=#dkW<L0M89o=!5
zt-S>9U19=MD3lxkgxx7ptwJI>Q5xoYihGZ$RYbs}iw6J4TV@m-a_FlLyP#sJ?a$l-
z#Atd6(nB<s!7NjhCL1ss4Kt!II>p}i-6{6Sp=nZgDpHz=7)ePmPp?RZPJ#nfs$ylD
zj)`d~=*}I!b&~l;rr5eYDHaBmDnx2kiuuP>$ss*fPTaZm0Wy>7IP$0`;J`8egp*G4
zpZDbcrYe?;8`Df|HU@~f-#F%B4O02hoDLFHzc$9XT`~_dT|w9W)=#I{fpng`N|AXm
zz=mllJ)(Nm7}8D+Zp;5VmH475jF}uv71(Lt2XI_G#rzk8L5|=+dqd<}5ik--%GjlR
zE2U1cGjMdyb7kU>I(((>_n-aHQ^=#90R+e5KmOZysrEuk(xQbK#cpMuodk&}YZ9ns
z^0-EoPH+*?Mld=DQRTvQ>)WT;g*Q#I7c<j({!+2i?%)<c(Y6X@Lx6rT|10c<M?j_8
z2H>~^jPZ-PK^_vuIIR>UaHNE-k=7{~&(zu+E~Do&L7u5r)*)4`M$)5IAT&CjN&_}z
zk|t=ABs3yiWf#U;wXnYdX2p#_{d=&6ZyI#)BW&BvY4-eNj({TFsa)j}1+cpe40T)Y
zy+)tYsUlp#bnd85O_Qzh*o)KbpRYc`d@xz80YD7w2K#KBON_v{p;D1yp5RMrbzsEn
zd8*n6g_EpYr^$+*s#ey4)fm@*^^V^*W8_X0_^S8Wnl7;xfans166!RPCg`0B0Ab~m
zjqv&)FoGYu!eWcI%_;WjA55@&pU)FGu=x(!Ddh3eQ&nabAnu6gQlS)Nv>LF;o=r}(
zZ{C!qw0$3_m=OTO!0sgPpcUsXT-{rRs+1x%)I6*D?p)`dt5%=66TVviwO`)jxJu$o
zjRmKK!oeLcPPHu|T9h&pAcL5|7d2WYBT!^@zkx(f2g^WQ6Gl8daO^8SmZ6MTRJk@H
zfT(3znhF&B&810p#ocJ96h)AZN6rZ-dPAPp)i9@^aH2jT;ki(}h0<V(Z13S|_U)fd
zQOb)Cq(mQFPXs^^LE8dA5x@jQ2@VS=g0WN!Hb;Gc$f$O=40Yr|<VCOXU^|w);r*wX
zZiXdB;#6$b6h(6oYl$di?hdOdY8RIv$oyep(9@RIQD=CuIe32nm}mn?mO<EJ`-CM4
zUVhZ~?fvX8zI&8i|L7EZaf<8l(y-_17fKi&NiUU(;x(?Gm0ARk&h+ZOs7z9-aF5%x
ztg{RMGvTtu+%wF=eb?0}F#s5t3A{VaHUh&(c5BoWsDE4np%xf=LAaRF61x+iX!I;i
zv9A_WO%}iQUGMQ42MvdH-AK!lq>b;^s9Op}6eC_5^x?Px90CvZ7w1bz(KWmgn1reb
zg3dlah6X*TU|Wx}_Y56i-?{Zg_P`4{Rsc!DGklAr(v)%iNU1E;v7%lqf`g@A>xBl=
z1Jl>haZuqd=n7^PV?Ifh2lx;i6Iz*F|G38f_1Y;~+=SIwmLnK0#vCfV9&7}}t0AKL
zgc2hdvjK<bfiA((X>V1xsH>T}of`9wUwmT!x9@wnBOqx<3=06*0wiVziZtR)|0lTG
zg*FQ29ED-F9e`PPLp)7@!NSeQW7}v<IX`!j`8FM9pZu>0Hhyc0-SK#aJ#!$<4rdF%
zxFTJoDpE`;Jnm4f@UlV`edS&)RYj*OPE}gjh^|=##Np{8d+Mb;`^m!vw&i;G{XKlm
z2DP^aN!X7r+1(kE7~wcyJ5Hd$Z7fZ82X0kW3R^scqZu6_)Dy*#z0nvTcG9EMDi&sT
zAn$q2|BlAO^{;-7TIj*8iq#1z!bvmKERo!ZOK=TCKBL<rCW>*Xf|6uFs$>b#4q7nV
z0L;D{P{M#@iHvDr;HKHU5siDo&YNJqZysU3^AEE(4;^Hm`OiZvamy6@**#P2jwdqg
z5n${?prTD>i!76yW|=~fX~6K==@QEoN-UEvF)dRBH7?H{1N-3@d(-U32QqBW9aHS|
zA0^q_V{rVPN$ND~8-ne4j;+Pi5Rev;OOk95gMDMXs9QjH%W_}@b#*F9uj#MH(uz9e
z78G^Vr3Rp|X4>lCX~G|NDpqjk;q1couX?rDeD7+U^u`Z=%nLDVB}3ifDpzDQQ>%KB
zF`wpY7Lg%UcnO<~i9&K4=j*T$MELy;F|OmIltEDS1B0#rAo&nDXb0?snSLA0@MpnH
zzX|9pVDwEun}N<hLP1NC0_Pv)MItT$I)75AOSm{HO-A-=RE+=-gBPdS;BNdaG`Q1L
z3Y4S)mi{3%DrEpdNQR)KIB&kmUl+YST&YvNp;jRwuX)YyEsf>x{MII~Z=On0n%IIQ
zTB~+NsB}$6RE`%6AwWa3Zz5ylB#9_<NZ2sgE&<)fNE>jeDh4G{B8~BdMks|MROkTP
z2c+nCPzs@ngK-*i!NM^S0C?;H07C@!2li-e5Wl}0kI7X(?v~X=O)43)uy*DZc16?x
z2EC^I@7x%7V3^N<T7`r><~5(UHCBD%lFQvLZ0R0A?4<~;D-mvC0*Po$84;Pl)Ndrt
zO9+MawqoLcUG>Uv295Fm$p9YXQD|a#073u@tsyXw;So&8;0avHifUS#s)Zmh!s97&
z!-gqFlNMm&zr`0RX=0nEtN@u!8x#y~^m8|p6(Au6AYoUwhCMi}>W|FA?v{$R>Jt}V
z?lph6J+QRnn$LdkTCb%C0Yp$ZD#2n_zlcec7>cxEBs1tL7#X?zbt^;a`|-3cQHapc
zmn-lRmVNpE7za#v%=lj?8PS$fN&uBSQu=R8!&@^;2aBXoB}O>r)(|(Cbw*lV*CFJo
zw#$b0%0TbJx-)M4g(>10v!5Z<*W_oqo#ZIJHM&$05(Hn1L{-Mfn6|2|B5QK-rM_9N
znh}uFx+|44uerE^X&>V;@wAcql#q>S(k4|&mew%?QUW1u0!6qEINXDxvE*=~R&^?p
zzV1sm-7#<BqD5Zwbw>v-cU=F~JMO7>(OyfJkmB)DdwENMm>DW-k}`G_GD#O@)m_Yn
z;=C&pZ(qiXZu7$1S=-MCt*;5mCxKp%IgQuaC9{fTH%T?i;5I*h&9rSqegFQe`#jIk
z?bevTWaY}fZ{7QFE5@7CS*qK|@S2)k!)&>it$e@#%m*HuzhuP<ulcyE<G7R8ukSzS
z(PwAlL+u56xdOz0&Lhtpck;S*Ui0saj0GzK!S&y``@z}vP<w%1jsWTV);$j$w{-Oy
zulaUH$NUpdUcT<jKfh}>J=9*Hmm5HE83po+*Zk_qn0Ne=C2PO%vs;g~hw9}y94ps>
zpIP^>H~buV#A`nFbj(|D!U?NCefjr}m51u}IUFn3fjoh{;WdBu%vkl&#3i%+q4vT#
z91GX6;vcu}@|queaxDM5Z=5w-A8N0h!>qoJ(M)yOssD0@*L>L1W66K};D@n)+^l)1
zJ$4SW^*VyPj^vj7**~7<HUG_uaeV)uyw1OQ?{mHWP<!zlX5)4ApZnNz_{_cLyID0b
z>b~xa*WcEw54Bg%VYXez+Am&r8$N5V`EAyY<?lN4++KUAy?hR{={lCb^V{co&0ojF
zIAP$=-`v0H;b)vM$FWAoBG55y1fQwbe05BXc_%D6>68zTjC;+na{y`Y7^i$Bw&$45
z#_ff%=oN226{N}2UNi0-K-?X}f6l{CFM8$MPxYFAUKRr*tSA5NH_i$UO%%Ll;5mRa
zK1OJGvViNx=c3{sj0LMA18cwV(_6e|;+X_UtDy1%AZx$yvs)Id8W`}JPhR$8@$29F
zKL2@7Jn!Ve&UTs&0O{ZS`14Et?0p~bnlI*tGH~7d@^_!L8AZC+O#E^M2&%mJ3}#J*
z!<XY&urd(DQbXZrrs6d-zia?9k}RF_k=Vt!5YFr8KQ|l>EJeBIpRf2qII2~>X6j=W
zAfuV;>d##9g9WPxHhBHK=SGVIb9`2R>awf6X6$1PAge$1-K*#Fr;eeqU}Z40;vX*9
z9=zyK%4;T{tpLG$xAJ`#?!bHL_4Aw?T^jQjEnT+sZKwa=zHi+1JFl62wg3e072Y$v
zcV0igxiN#|c>il(f69l3;=vsUlU_4^uK^^u?S-Q&Kd^lm?~&KfX>NEtFv@%4YyS7&
z;<8_4j83a2ojgW20TS5y{LxcBnz;1DKYqtM=OW*8qwc_*A#5XzmHdu%fb^aDz+Sx8
zMX&r{f8q6gpBuAq9Jg%kx+VYpgCAb?(XmVWH}Bmy+X3R={P;eU5=;L3X&=FB^ZNeI
zjbm(}&;O+V`Ki-aed@BS{9B$o-0J`dY~6Qw^{2mk_0qR|`m+nyY}n}a{hJ#vvw^jS
z7ro+br!IZVXFiAJYS#R}A6?&n_CrrOVdPe&f!*hD2>|{!p2O0&e&%y{PIzu!-=DcL
zH|mas>t6Nh#jkz$dzbyym%g^*z2|LP`Jtf%c12o!`c*&1ijwQT@{7CszJ1@LsJaEV
z?Vr?*W!T5p@I5TOx$cYC-MZ%VtFFNm8uYs1vGACSU-$R_fWP7Obso#({{yPC8f!8O
R(cJ(5002ovPDHLkV1h9hrH=pr

literal 0
HcmV?d00001

diff --git a/packages/web3-shared/solana/assets/usdc.png b/packages/web3-shared/solana/assets/usdc.png
new file mode 100644
index 0000000000000000000000000000000000000000..612a1cf00d6a909a731d2f19a3fcc89ffd11165c
GIT binary patch
literal 5716
zcmXw71yodBxCKe+Qlx97MM7Fias*)zP(n&#$e}}8Lb`>aQ$i3BN$Hf1fnf$18tHBr
z>W%+<Z>@Xw{mwq$xA(d0erMgaZX`%km6V8{2n!2~6sV^37IUxrHwbYsC=jceiG}q5
z4bsq6R(00k_88=HAK=8G#{j4MAiM7%1~C_v#cvGBiCOw@`v1WIm&YJ)ARII0_UOal
zQ+EvW5C5fM@;(36a(VQNSP%bi377jIw_88P;(zu3Qybv+{69Mk$>lM`?TRTM__qzW
zeonW4rvLGnU14~P%Rgm|&VRu_qyN+f|Fa(9a{H&o<Aw=_{u3GG_8h__V4jQUV>g*~
z54~d_kLMt}>%gzkT{5d47UzB%+do7W-LJmD7@hhltb6DjFbPA<m>AqcYu`s=*+XU1
zi*cj?_j0%maJUZG=Ar6g`wWo2k;Rj$;hjfze+WNzk1m}sLHfI<51F0&e+=%328=%U
z89u$dl@1;|KEHY5@aOvGj>l{0;_6l<a-wPSKsI#T`P-c2=TXIQ7@fl(Dsb=g`uX0;
z_5RuQ)Za7xugK8qWq$7=o7`FTm`UBFsoT3d<%kK>^l68DlyMsJZQ@k-%u)5o?(N-u
ze)nc0Y`^HwR#e@pd-44CG5YfQ7P)>F*YNl5?!Iz(XMX!)W$!YwX2tvaLJRz$c6=|p
zV?)G$q@ZVu&hZcW<}RacJ-v0k4RP=XbtE4)J}`IeU%u3dJPfH?mijzqkvXFo2j}w|
zGJ+ygn%CC$uYOPL56mA6`;9DYUyLuG<aBMuH~x*OUo}WU&TO1hSod0G&nEp|^D12k
zuUVPfI$zwmNNrj3ESVPz9Nj#;@-1Kd-oL%Re|30%T|Th=E*X*1verL$98j^?hdMqu
zy?$WaIkI$Oo-xhj)CX`IEbZT#-8{!L>(Wb};{P<Xb$At6v4m+nMo8adyFZxs4k?^t
zaO`7q8E`F{2e=KeI`@O(;pbPkwDx~kUHYkQdr2(2F@17!aibACNo~{n6w`#BgA*&K
z_xJZvwJT~-lal$%T$sZEbbqU<g9XsI8HgZ&!*I&4_N?a$Dvn5cX+3$q$`~Yy*DByq
z1iFd%2L0Vi_;g@bPt7^~nGKj@q_-r{R#bJI)>o$~NDq0-B43P9o`+_=l*huN>HsP!
z=z5zBBWCQn<Y|J;9jO^=N*k3(wWG1wIJIdWDeK}!x7~{{UidHOd$scJB@AoaRBo(*
zpN!Ixs{~BG23YLUj``h~T|O5})zB|qJPGb{m17adZ^CM)IQ>jHcCmKI_vqT!FoAl>
z^Z_m0=ef&<tifBHgP>iRyw|_R=GWn1T!#q1;t%Te`uGkO`a_DQ#S>H=l=*rC<BsRN
zcpZ6p-dm#J5Gk_)f*SV>^_OP7(0*|*`XJ*%#d-q)97?P7B^8(ws}fwzF-MF5*Ts>&
zJC2~s`^Ew^i0vZz(8;ZqOc!4Gq;RoJ9(YD-<W9-WyJ9P*m-kv!NC_#C7gH`7IKd9$
zlJcK3c2-7ezaSPcXHw!@qVI*cH9fQ;i{63|5`JmkTEVi(ur-3o;($ItH(;KkfpLG3
zfn;&2V^?<4QqQY`x_+J!ldy@7op(>J*0-^6WfI?P{Yqy%*g>tnm>WxIQWPs#U2OSa
z?@WVCdDk*CvTrSJa3EFZqCNAbKB;c#noI94u}nAMTT+>BT@&~Pxvj~tx*97Rz><I9
z)!37K0@jCu+$|0#esWX`PR}1tPY01;OOs7^rCItKGJhwi^TAhnA6xcrt#^4Y-4`;Z
zrsEqBEyd!cnR}gmlI=UpMr_Wbi)=((PB4?G`B6-C;H;_}q4a5!x`HKl14rmj-PY5n
z2Raf@4j4>lh{EC(49xwk4szwF)HsJ-<e*PCH%8<-BlO$7B9D5AL}hU+C~l6DTF*ZA
z+;scN@{K>wFt2a)$7xm}<&cJtt9X%K&OH{9dv1-5Zsy!mF;~;LS=a0CXBMq}ADB!L
zj+<<~?j?eMyULP|Tl>zfc0{l^oZb)xqaOjZ1fH&HpkOz$Jld<o<s=s9(tN#VG3B9)
zfw#>c{=Q_(*qw0@{4qn~QPcTzL}s8gA>`&Fel8^SHb*wZ%E^=FNSoH9#rEfqu~q2r
zzHA`rO<l=v7@Ov(cp8Es;SK+|y`baWxBl3q5|K@bL#eHt(sCD^p`$P2?|6%6#Pfgn
zh1^y#7;BSPDavuEym?)h%wOdt&J=UmQ5B;CeeUW!Y5aIU*^nn48<o?0Ql?f;$IOL@
zC7A1WRT0}Ii>b;q>o9r7^K!c85*V*Dn<P9G?C!;&N;N9P4tB5{PJc3!M&|puD8`w{
z41&HU>&w;*$XwqEIS=KgR2c2TWsi(JC!a98Pu*mkUR+*_cXHKivVdfiFyUzOk<k%A
zJjiy{LS!03+-4VVX5ERf3jh<EXo!=Vf_hNjmk9*uV7_)zliQO1X_t;fuMWR0*F4zc
zd%r=Mp>~niAaC@GM-N%1toGEU9ixMjJ4$}OI%3!a(kiQy%reJ(aJP_r2l7!TbIkmu
z__USiu>$i&Zz2J{<5L*>X>I%GuZhp|Tx`55fL8WlSu0vQ0egImRUY<PNi~8gl9etq
z+Ha2^_`X{);ufi660_ku43&Tye0nI+<~pj!a7^>0mZ?5}_{``&%NRkN?H!BXs_shh
zX}#2HCBYL`YAQ`R$a{S&UF?)-Ir)tKRCa#osqNJgF7feinu+p*Li0tt*Hju@7XABj
z9fCBf=Ova~02O*?xI`VW*mD0i@gvCqxp4e;-U%hCPZfmAwGuScQ+ZHiF6W9b61NN1
ze)pk03qP9?;JObQvJ?b%o0!B4pMiC3sa48bDbYSWgnAT`&{C_nlm#LKa}l&0vpj%p
zUwzl($)h8JN71&jb^#9Mfq51^@kLW#I}4pS#D6cG3gfm0EGvtQM;;yS@ych(v5;qU
zwKY1+oF2O-$Ib077R%q?lsFIy5qKmYY|%zO^ws1IvFqb?M&v@bqv(VHAMcsBt-X4t
z$pX+PBojH~vrh89s8qqNuQZ~jyb=w#e(i;B_sum5C-cjFdR^yYYo+aaf?5Ih=OUqL
zdZ5$Om`qgD&+C@hr$e#s&3b3HN*m`t!b-16lnwbPq^?BrSZ@fZrap2hpAdPNJgp!P
zfLWV~wWIRkM`eMn3G6}H>{K&m8r$Lh%gWz>T$p4zqf?I1xA<ca&&x*GqrmvV0Bva$
zj663_#qNU<m&b<%g*kB1-nKgaq8LjJo+P%|X0{enJ?VGfk=cic0=$IS`I>y$F!Mgn
zZg}e4Ms~efGeP=VFnc*LdHLFbdsdj2A(Gc;!W;?Yz-d1EnSx{V=sSP2h6T&SMf<B;
zYJhy1Sy?~?v|#mPVPc}A><(vEFq%zcR!=SB=C9DE>96a=2~BVFiia_)Z^G9JY+=q9
zNLm4YV92e?+ch;`Z2gUjMV@Nkl=d4rc)MAM3j}Z9j_ZhC@mZ1Y+rnt%GrqY`=esjq
zRvdUdc*<3=$w!LGhd&#nX7&R*lP~uyDAXe%%JH+};ScItC1-hg-|8mORO`+DZb%)p
zu?Uf{D{p%e5O3l6LoYH}*OAIcI#CJ7Ro@VA=15B0w;+WJ9(6f50yl>)mjd$`&{=Q^
z_cOZsr6PyVzv7wV`w$l6QwUV8hQJ(;9KOia8GuXaOVrX{ld}2H$1!IqP5KtvKxmJQ
z<Wf;R0y-#;i^h?h>a?fl3M425DmH;GJ(wlES0l@z^o*s2D<8d+1N&_xbwLda(qv?I
zsyLU%5XKl*s1zcJX660zLzTWmt%#sT|HZBX@=?klG*ML}U34WLr0NgeH|@v-im5ZY
zL-&zL>0@T>0iWiS6uZ}6!NE38zlVi3M3>G*pi$b1;IvneZ%w3!tN7ykC8u|MORu7<
zLBy5uIpgyK+~jr5*nrFWZ9<)WfBebe<g+@~f#cJP35()VEBm896d7a2FFBKgw=ey&
zNdTW`(EuYOReH8gEWmdzoX`-Tr=V3%%XI>?>gZL|UpGw=-QNyL<e3q4gu*EHet=rR
znsE@CTg#r=0e{O|E5yjG!D??|kmn@B&T3YB>2f|5*Ub)>u1VV>NED(EIO=I!-O11O
zGe`h`oM1nkOzF|JR0@~uVrIr)nKep%9mi1ahg~ncebO!R%GmZ3aer{P`8vqYgxT!}
zdp*URP;)^qqqw;*_SA+XB}E_qq^dFFJl=kKn9%y6vdKb~K3Rcac3re$OO@<TQRUI{
zMPp_<Xvn0Z44_`_=w{I0I^#yqg!!a3=z)$JSQ4qV6Qv8hKdl2g#TIiXc}XOCe1+;%
zK3cyHX=y1*SIeWQdC}uxF{N4ZKEm;Y?4n9v|NXK%uf<G0*|RX=H+(f&149<<F0G^#
zX(Zc;poY#`<QP+_Pt`^m|F$+hthetD%h4Cr>mHdGSA{+23WK!eF75K-G{EX7jhZZb
z@t*J_J)cYAl}&kzl@1ZhuP{U%-6qUTWs+7-L0$&7*NWDh#F2i6zX#=zZr^+g3Zv;8
zekn;5=#(~7=C#W<m4v<hu|sKnO^f!-Z;GbQEOX8wZ8ksPJ*ALpMKJwJ>~U7%m&a1R
zvw{sLiSqzHINn{)3+>!U(#*oj$=c@vY279-e<V17ppAb@BGJi$K8P1|x06LU#XlP!
zL8;u}zvJ!azVt>}#fu@1&8rabds?_#MRg2UwFB8ub@x;1Dp#|MX+oAd545DEXz4;6
z`5;}U9h9-Yx@+`)rn=GbYa|-kt1YnIx$3wCH7`{0jtC?O5YNb*a=dQQkU=@Gz|M!Z
zutg^5hc6*>%iv>*(39U{3I*}U6asq!Q(x&vCIW>$cz5KVivLRS$s2;W3Q4kbRV5=?
zH=4P%CWBpF3<CO^bY2KaZm#9G5lSxB0g_EQ>SE5xZUT<i()D9&d>HVWwU?s~Wq!66
z3)$0sgYf%H5N&>xPXSv-)e{v2AbYQ~aDo8wviw$vShZN$5B|j8Snk$rARhT4AOtFB
zOdTzh;O?X+A|n@ms@R1PbC#qsi4~yXnYB;^w|Cc6b=%8~0@+jkQYW}qm|M%?ZpnO4
z35sx#V0Rg<hEFVtfCqh~n(ex#-*2^BcGySjd<CkCVHFH&ijT4Tx4DSx%52zN0vmMi
zmFufoi!Jn5oFxK-os%N)m2=+gyIALv?|g4+%C`&G3Ja}c0s$k<thyCBYE~j5K&?BT
zY%+REN=RbW&SiL>VWIyf#o@%hDm%)9{2c+=BP63er#ul4oRWtLM%3c${Hd0hH1VVO
z%giJS_97`?);&JjL#!?Ou)+}&B|drgbR|E6vPVnXy%ow*)Cq?89_R5N=<M*MR~{-s
z6<!E_PWsb8T43s*MAc3%Z4eMj$i4EL<zkw(MTJ2b8`dG%3L^{Gxp+}HyZ+PbLDV8n
zj0=;3K={f+2&Z&Z(~nQ&j0SZaJ{)CxNdTI^%=wbBmy1P2imE<gDL+NKC4+*wH7VRB
zWE$mw6ppk=*rQU%9Q9D`$BTzVq8Ib*oZR5l>SLgtVU={~B&tV}o0=~zE^dq;&QD*2
z@57%~U+$*@T@Je<+QbR(wdBG>Yw*0*eFpEJ*esxTu*S|Mr#r6<lYH0r<ZHr*Q>u~N
zD#mi%7s|Q9;p?Dg9r~xO1$b7PQW|&mt=*e`gtF1pET2dBBTJ{(?Zj<Rg0Ksh1Izcw
zzrQM)-}0qrGAbChsOs6d_&p}b^-U@>mk>Zi!3JNtcJ#x=3=Ii=ENr9ArOHw--Lz^F
zcIDsX2TpHyn%NUS2NR;FLK@w-Y;O~&UQ>7q4q4`m-6m{D@-`O#wZCNL7=K=M>f#Ov
zEAwV<s{SN<xBJbohN)?{N1b9tS{NzVP#=<yTVl5RZ9TzG*L^rxuEfshbr^tWrIe9L
zuQ+cb+rtF_XMfeo^1-fqL-$IgQz$Y+p?w9Am2c8|@=Rd8nd2FKoB`)3A6%oArW+i5
zb%N}<;1LyBNcr2*wyGYZv2+rCpm+W0H8#*w+if)$O(-0Q`I_fA^M9#)9%?V~bIqpQ
z=M=4i|Caz&>A4B1tkt1zlb=k-mD+*aRmvZf6{&sES}V&jZ*4($my5rb!HT#rO|N-X
zWAOWJRUR4v+SY-_wetxEcAG!iQjN&wbo`(YH|^kg?>T*AbF|ZIJp|rNw=LAF&1hfl
zP^FB_q<<$0d4V$>@$^T-#^)Xv21`L2_Y=|(dTkHtQLKV16d>B0$LhI4Iv4W5>ZKJ=
zGl_sX?#_(H;^&z<y;_GSE*ogaB<ZA;S2dX}I3j_51>)ltgUFP}>H^wEhF^Ew|JaUK
zgSiY^oMHkUK!}n@YsVwTi3l+0+=bD9F|F6=t>~xZFaG}LyK}8hSu)o?MA%wo>rTKC
z4kHl1Q*n-`x-kTVtoxR8n)z6{qd=-$d_pOU@eNEW^2u;-^L(CKJuFX^3zoA&Y|y59
zG3`S#JNn}D>#XwYiuFTO=(IcMo7mI516Ym!wcPsR*TFBTvxo2ePVY<wVi_)6JgO(^
zUwBNIC$l)Z%A}m-;8E$INoMU(UQly~nH8Ib2K4&ZiUs8EPczGM2QS~UCo?5IgiT<!
z>+HvmfqcMBIh*4`XdQd(Oo@ZWt2KeC#oB4LYN|KC@}!>?*T{w1AZlOTjKvzVYEXa>
zD?Bx2(-y@+h|3M#ae^Q83Z~;)PVd#Ti;JD?B#oVtBeLo!2j1n%;?~GdZ66vxo1BYQ
zWVG`^S&S`Uo6;=LaYN(K_~-jT0+}8<*BsG3CM9Ms?cC03A)P(9emWM3M5Z>oKLK=w
zT1hWOrZ2BN80*>hL?-s&R~!MoM7*5LXYX!QM{|WI9CN=d<+aNe&KvgZx7TM)X*bPO
zZI^9*qSkwV?evS&B-Qi;^$^^E7(P#<EcXsxoAUPGXSC{nk;mk=-Zr{hm`za;TGQuH
zEWH{k{c-X^i0uJ@+FDvR@qGeuMvwFZF!%%6`N=2ugU9c_K7roTEElGFE|{5{wDp$z
zHeO%3Rud=cHm24oG|U`ah9c^R^%NSLDcowkgrB_5`Y|#h&@-DH2})@95(Z1lMxwm#
z<pn@2jRzv%vrUKBWT!$a{b6D{a7R;{CSXROY(umCGmE3uJt#OB?RtIGIAamN;o8cj
zPpI;N$!PQq?b+{VOqFUN!FlSe>+Ipj&Fwz(H(ZiEBxlKt!hyzhi;w{uF1P&)Q{v84
z`5(=8x2v?0*3#)L?Tm(|Q%uCQL2fF$fv9FTny`F{xYhmZ;h>%1p{1auxPpQRvfvOR
zwwJg-wr>LuC)V+8U7_BwjI6YR-zRWQqTJm=3E2)FU9qeXv~OS26$RVJ8i{{<9n7&a
z7T)*kaP|989P9T@>nn%Y>w~7|X{Gv7n=GWi>oZLqC5H6NY*Q3TOa535zT3s9f$34U
zkiP8CFS7nsto&lQ{^1;e^@skZocyWe{^Ac~cwaF;nYItjk`}}pxQsQkN^${q20dNf
r3wG34NW`znY>Ov*EaQK1&(gY$t=a4LO9=CW3=62NsZ{yOEckx_J*aVc

literal 0
HcmV?d00001

diff --git a/packages/web3-shared/solana/coin98.png b/packages/web3-shared/solana/coin98.png
new file mode 100644
index 0000000000000000000000000000000000000000..0e992aaabe1a182f3841ea5de81a6a6f9aca6707
GIT binary patch
literal 8825
zcmb_>dpy(8|9>hGNpeeW<&qGROSwmhT;_hAVV3))3#KJRx@bjiA-P1zeav;kirnwH
zZNkFFFt@pzZQu3z{2ssmzmLcFJf83KK6~x`x}N9zea?G}vjiA%aa`m$cI+6}edD{<
z%=6*DgZ%`v$J{94K6dOl&C<-)(CCrbRI|-Ylg-~BHuG)v(<tka5|i1Vc5^@NW`Ec%
zbULmKxok|hZ%nwYjk^79wx0cA`?tl0dD%3|3g2vlZ?eI+Fm>(b+UyA(j>Imfg>I+C
zUgxELAXAb2+jVu+b#2UT6YIV{?!M6F$h>TI#C59Cis|v6F4ID@Exv_m)AlchiGNQ2
z>wWI0{amX(Go<-8hxuO)1SZ;<a3nIlbUHEvTj+FJ_^&&r#~x=A6TQx)KHw4){lH}=
z2AFVJ9&}k@Vu%S4c^LFBr2j_63~bbm8Qc1}+d4Br>_2QyxHChYs<-@8XE}qm*}%Ea
zpskt0(K6F1l+`8<%uIZ$(R#YUYP!*y`EdeaK3QkMOlPXW>QBAZWF1q{;?IB7Cu=Qn
zH5QY#7C0mmfQf2zEYbpt1YoNH;|Mcs6=0$YfN!#!#W>Elxi9nt&;E2>>~<mbx-Jbq
zA&<hA2mStHfQ$W+%cJQVvvpgGorha^>dySp-tzv&<o06A`b@>rNYY#@v)aDov6zjS
zto`-Dqy1It?&8jJD`g(BicKW-K~^U-c2@f7M|*VoA%jk1Fz5^hgGSw^5Sj>`4-dC+
zl-ck27KdGO_v!?Ed!c@D;O*Y}=qm0jGquIOryKZhgibGFCvdjad#1^8aWI~CxVbzW
zj&E^W{qvpJ;WmyiC;W0AuQZ?QfD${I^|4<XemUI)ArHHZR+x@gm`$TWV-;qTbvE-|
zQ6r@$_#c5|<z}Nyl$nf{G35@-+D_I3M@vmdm?*xFLoyj?$|T_g!fI&%_`BGIIoHGv
z2PPAS3XGWa8!j~Z{r&#%_xns%FomQZr{SXe!-e;U3XKQz?+q0g4>Ix1XdvHcAkV1(
z>%9Rc@(c&^nEk!}uZI8dp8=C~Z`MNgnfC)D#2R38jFV4P;U**qo}Qlm`IQH&#f#FO
zH7f0h*=Wq3c0{A}A?)wWFw6J9YDWx0qYRp{%$PPjVk#aopy?a`3>^N~3iY4x-|>Id
z`u=MyooVm?nf=eHk8!v+oBoqI9-;L8|L<NNQW)Lep^TZGby^Sav14M_?%&n7eaccc
z2=RESf9}OB)_%I9F7VGd&7#VfQWcalopC^W((<x*o-<Y=(NTh?iyQ1_n0&P@wl!eM
z86+ODskwb0Ufw<>=^-(tJT;=@!rdmh6t`ja^e22ab(Krm#wm!qdXjANCb@Fqh)diH
zZ5EW!Ilpsw38Qz6^{eI8=lpSZ^Qs(=B%-B~yKUuC0Yxgt>X~;a#$O$;fr%XUhJHKn
zd--v-xlr^-`?F?U)e9by0cXsE3P*4vPPa`Tcsf<wgs%dYu#6U0g;B9HMmJ+etk5|=
z+!4P4g^;URK9~ZVN&kANgs5Lw(CRH(@-FVZF~+G}J+t4pD1@$<T{_(Oeo-=a=32@h
z$C#^f<0p_bmIUR#zCMw!R(&D^_1=Db79b~3ctLShT~pMf<?Pkfpjtjn@B~Tb42p}Y
z5H0Fa|G?r(9o>-wz}?bZU59Ke9twjP5fef0LC72x^4){X<LG!%oGj``wrRjO1_yvm
zjP^KCCTH-3Rvf4*hvEi%U~x9bEh-ZZU=fdJfGq!h7EOJFT}{Q1?O{yw6Bd5D+P<NG
z1_VqGW+ksiy+v}8B(!q>*ulimk&&hr_Ukd57}I4T2!kzkg6v3S$*Sh8;)PzMaw_e*
z+^DxZ`<P-`;4DuDFWO}zld<{-e`b14XgbUcG1QF;1|Pt8ob{`EtNeHGBuCB;lyv5*
zK+jVNAGm&<CC7z47)Hl+t1pMPE6OpH9A*$I#OUcniqx*l+#W`obE@RH1L?Dl1<scY
z?csF0RncT1LvF<DyaU-LbCP2y->SepZjW=d5y8aZY_d=wI`VI*OqF;QnRr^OBc3c^
zCl;L0MVJjhe#H^7MYh=v2l6$=Bh2KADHnlVI*9{aZngGzzW%wY)DhX!NZ~G~bSZXZ
zr*oc`R&))N-_DSY!evkf-%{RYQ_HpKsE3T{AjxoZq?SEBrkS!kzj8Hvd2my(d1RQ>
zrPv-%F6&92;@3p*5)-Gjpsg)?q1=k~e42>fo~=mxi*AD-<&-+ts(U1#1x1Fu{y?85
zUw}Hn;%FOv_x9M%rZW7cwo@w%WSFHBpMHfsASvDqy$JG3%hYVmHio1!kdpxhWUlk*
zp<dzL`Lii9!os?!WI4>Sob7<hQk<ylL**7tyX<X>##<fxRVXXeny7|)MG*{0k!jXO
zAUF9vCLSK1YnHWzX`=EeO;w4^ihvT<49KQY@=s);>Zq*`T=?GbPQ?^W>!k(?cEa`$
z^cLiimfHED--jGai|Ho~KynNY8o^q^PGh8VXhX=I6g~44@8C1IUKOG;^ouKGEc=&Y
zdy7Snq*mUR(wA~dn}J~2_Os8R?;+1ajEGK3>$eZ65~%ilO~FyL(1$gi@P6oXVvife
z8<;9`5d*R##i!_bpwrl(x-CzL2OSIbn9+9<<144h)I4o`uOwQ88et?XTwBd<*OD*1
z>zl%uxJg{9Vzr7?{08Ma@d1z$rizk8V}vvDZP9&rG)asc!VEGjI3Suy*On^W+mm_g
zry%6yo9cv?uBED1FWs`Ebv7L?6%I90ZncOtKsbdWE}vryX&X>iXZwqdL14`L*yPsv
zQCh@<2%d6^HdL@vAWq{IodxTZy4WNB39?8gV_R1vhW{vsJa{-VOcT$Egk4FE?^pha
zI*0xNP*<l<3F00GMAATCqee+)Ft$#CwRO1Iq&TqYA7|t&N}3owdRK&nqe1ymzsX`%
zHpHclg<oa~3JsJ~wB+2T5m$OFt?JeE;3F5<O90mUQ2@BP>Zg*3xEmK$@lcFNJ&t+_
zfeXnE;<!-O^q2m`ghxc0cHMOn{p!OZ(J8@AdF#`n*mjLm!w00bmlX9*fl4k^IPm}v
zd9G8p&p$-$c%87e(jp3+LJGO@(6$8MPJ4ue9qwI-bPF+kn<bY}C3!fZbSI?bdD~7$
z#~_6BE~8@_c2YIzf$x6ZTBPH8MCRrUHDhPjxn6XAQMKas@z}&Y16SXa^L$-3Qn9hV
zCYPYVm-cM}t3B`cBG=vo78|~xzkUC{Yk7oFdl{`elf$zqL4V3Eod9N}UI$(}G!IW&
z{JMq1fuo*ACC1`nawX9Z#2|RL?MGgm)Fc^Ftf-Vy7D|uOHPyQy3MdK&M@G^;mBM9z
zPlPEdDmH#fbNKY>(@dK>@F+_G*&YQL)<_am2lka~j!%hI4z6>bJRTW!oiF~D=y2NR
zh(iU&=drASMeKN|l3C$VOURX#9tE8y-0@*$a#9k*|BZ^9v0O=^U{OLv@w-`h&)&1)
z^t}27m$(r3!+Vt05B>W+=kXB96clert0L;t8wCEzLOmZy>32d!k;xxVVJ|oqDy{al
zV^4M^jwt=rDmzMNL62QC_%*Kzu*|+q_mnzp)VcYZZ(WyX{h5(HUwU8lH^OD|Nm^Xy
zjigR(uL>&@0R=HNY(NIm28@p@!u`E_D4Z#O3FeDr)$c^WP3V|OFvh+nGR0Y4&advR
z=W!H~IzAuejSqPI>MYnBsUnT}bGpQ^sz~@ri^<i9X`sVN*CMvh^4vtF!(>@aW7m*+
zKgJ~|zQ_<fG~^;Qp1@sigThi%YI^C5fT7j<^q0hs&MB}Y^EaskZeGx=UO`=p*-!!K
z+ezB#Uc?AJkGo>*T~dOz@21p4^RpYVpqT*uA>}nQD0?`YmujLBXYJDo$XQ+k@pFjY
zOa=DCWL~Hv)^W`~)Y?!u;Zsn?qO#FJ1$kxMp<yplgZx%8yTv}*W&Z?Mt(l<u=8Ge$
zfkvyM%t4fBKECdZmcoH+xzE<H$q&E~NFPKGHQ8Dxr~fm00V>~J&uRE4;kS$X8dl_u
zs@4sY_P`8<Lee#85H?KbvurxXp8eJDT6b%;todpy`$NCoufp_6d(GyS;W6{qD1M+9
zT=p=Kz8LQX=SK1GVkDNz9fXOy^j3q$CV|rvW+WQmH6cq4x{PdWUVKM<qUfNV2)IEC
zEs#YbSVGv*o?;`WRSjeA&GmX=f%SeZ&GsBVeX@!s_vt=1kn&NaJlugwX(XB@ZQ2Mw
zc%3XnEFzgfwckmQWy%t)x5oYir{FwlUBFADT{c?k;kt*Z#diZ14}-=Aw9-D+Ux@j0
zq{Y+S7SE-h_VLJD@_j-zP!8EIutf{)5btp~wVQthGB5)XX(N8Ve;C-S&hhzN2mqT%
ztNGDoHYMX#SB(jRopJ8YAO(o=a#|CBiiJ3jIM<buI7~7=jgiL4&Xv@<nE-zOxK{1;
z?27<E<+xC^U*GEpV175wi&KDl$f1|;(@JdUG58J^j9eZyP2SV(QUms(WuXx&&mvO7
zzJ>0u3oDK!FBTNWKsu|NaB~T6w;4I78#b=ut$d!8s>F?H798YmJzJjPxYV~R+}|(I
z7%D3D`$%gE(hwz-uNMk5pu9Y9aI$3F3vTy}E2X(bDaY;-DdSEy&O;-v_w$!xT#OJj
zhR!ELzSXv4i8cZKGMtqAD^gEvFqzI5;-Y^EcR?Cf#Bl!NmyP1lXK<*H$wF&==3GWp
zgU(0(`!Xx)70}Z7N788;3vLN<GGN0rel_4F)JK90Se);pdzUWkUP8aNiEFP>9AVSO
zp<bZ^RT=P8=>efn;A9p8s1z^>a!Fp}m|>Sck=;VPBwWMw@$S$o@AFp=uFzFBuJ(Am
zmL%P!*cVe5OXS}Fx?|P$)6enEI?@o3jl9kh8(-ch@aJ3%*JC7W9t3MH6(x|JTD~^T
zd@iZJuvkhSnb1BeGB-uGS91?b_Y0f^*;2f(Tdwdtj^YV=_<hF#R4wBkWa{|&4M-TF
z+1H(+aD~Ls(r4?&t0o>D)5YGlm~sm#jn}dpHbokG+M7<76%;74&Aa$Hjk|3dIgl*k
zt}WlYF2+A8A}Cw!aJla1lB~#y>E8iA4brq=S4dLiqv?_o<<hXhI4tYXX%ugZ1>-_Q
zYfJG!BnQkiDzWs`x^tp3@Z5IgaV;4#&xM5L8}z(!&F2aOy*6PY3!gvHB}5jUo7#&B
zKae3k?@r#iCROGf>tFX`MVa&R?T0RT^Mp?t)lU+GWFE%~){L@f%98`S#rx!tKz>9j
z5A-7Kx6kkO)<az{JDkMVpNGcP>74q4pPG#BgeXIG4|_dW`dnSxZUP|mJg;B=`(|P>
z@nmwXHfPqNQtNhVw614DYg(yH{QjPl%Lb>3>;AJoy^LHv&nk$G!#Pk>I_HPArkYg4
z#|iZU^Y(Sv?zX|OwBh@{zIFRW%7+><<V&!rwBTOby4>Mzowz2=<d{Oa@`(*8OhYr+
z2MKQs>p>ZJk{CDj1(UVa8oT*|W!qf7`0)r9k2D;=>34t~_CHX24t=s|Y0`X{)stk%
zm4orl$7=|t94+eU#eQv2{mU1uzkQEmVGcHz8~Sm&Zq1(VSe9<uG&gcTQYl>WeJ-b|
zm_YTjK&i(%h54<oC$$?d^7XHz$(X-soj4LqlaKDL{qn$qHRddM(U{(vu!MT*2?v6W
z-EJtMZveD9-wn~?(nmqj1y7x`q#8{r?JieH7Rd-;VWsVFXFc9#`3+-X-O#a!e$}-u
zKDgg^9z$gN@Br9<y}dK^X+y&aE%o)c(#M^Z5$|{4*TPEK5BbsU@%@Wu9|>skR|G^0
zYn#j;N_R!x$O!9u8sHi}`Xtc1?x=fh`*c9;`AzKRfY~9cp{c^|$y}<!v4}oJf!#rF
zes<7~O-z!T`MfN8{*a%?sD)9oVq`V!7^Px-ZT6Qy#i`#1%~O3J5UE}+1iy2yBi<=0
z9<aRs{Ved(Qys7V7x-)CpYiNkQ~u*-t9j9u<Lwxpj$X()ny*#2-uzEq_PwImHIA}5
zp;!S}1}?B6KeBx=luu|S4$F^j76#jFpVo51J{p;j3-!`GkJ`(0uw3^{4#!kZ%NMBn
z7llg5xVF8i{lo~52|5pbfYIQv_CmxF6gWPsULCpX866>6Hg@vSNLQ!es$lSC(gi4B
zITCuC_3z(SYf25ytoX*mSVL;7;+BWI%C3DlS2Ft{(xTTmGW}bhd!h<l7`%FJXDO)G
zsog~+RH*G6s<!?u*@G+jToxj@Epk?NE_wOOW9h+54qIitl~qaBDbLia;RdObAG31x
z<RuRVxtD&NTs|@2-14RH&58lss;#I>dX<k$>QjJyU3#wG8}Q<yvbS`{3*g0!`;qm|
z`Ozqzj;uvBEiqh>SGTKjnyhAZ@K$=}wa#3D_h%fFFvDkMd@oI-Z;wf^KAG+8y2gUK
ztzaDkz&^I>JWE~VzVH$e^z;oiCl;|@x1#$&dPEJCZYt?B5!BS^V??nDx!<j4<KAwh
z!jU+$B*RX1SJmF|Ez7axUij`$FRuyW1zC6rdddUOG1tG)Wq?$|Hp_Z6+Ie;7^%!8<
zM#YR?4&<~2Y8w^%Fg7~_ZR;-N>oJa_z7f_@Tw9kylIiXxy%`110VUP#&s~)xKnkD?
z?Ul%puyK0=yzyxI0&OPv5^O~!j<f5JXSQu<JZb?W;O^mHYzZC2X@1dGp4eSL<*AI>
zJ0+Dd_Z+9uj}A4j;yiCsf^E6P*@8DLZ=N5R&zLUBa?~Cjb5!a#F^!CgWXz~_<9R&y
zmUp{W>c77mQSz6&mIlk?FL)R$x)vy;332k4hD}vnCLK@e1i=#>kVXK9I-h+Zy$er1
z+t%IcqlUa5bFNPB<)gJU5d!^mo$%6`Bksj*1yyZF$9=wltM-&k*RW>8aRit@>^=3R
zKK5hQD~aGU{$m$KL!#7sWEUu!4#xRLnl4yJJ|@2;$fNQ7Dr+fc8tj3YkaUHGHq`@Y
zid&!bJtXy0y9ty<6On10?WHF?Zo4_yWZUxd2Jluy$|UkryNidf-<5!W8;tc9b>><y
zAH?q+e5iWu>9os^AvD7aZbaF(yii-=MwrYUS5u5pw0=N~un9S%Wt<JEYtY(;8vbYt
z<VC)Mlp1Gxv%YJ5fF50C`8h3jw^ImkM1T!#UVQ$jUvMn~+h@OUH}>|O@4*8AR=qtF
zK#kD_ea2ygQ};`phvm+<hFYg*GKDgOXqaeZlZMjxy<e|J&`MWa(s_mtk`^^(bA$|=
zK&d^JYUbv!l2zV;Zk15gS<DTQ4S670^)lJy$b7CpuaM+cFA2L2z>B`u%yzE!zdA{<
z;?K{#CUV9i?0_zzid|u|8uqfPIJQg_{^DhYfSe#9lj_xhKX%dwv$C?zN`?-?6VQ`?
z^bT?haCzLldlfbf!2^$3JB?z3WMMG_pPCwQb6a)rGCgYta8!%5YvfJNcY9IEVQ1Kq
za`G}wvvYyQGeH)wG|WyeEAcAzy<KZ0)c^8Nj3376=zCY^z)fZ%!5xhk%?2W>ysUV)
z?b#y_w9fbEb&&8h&FXx@t2K^GXh-bBgU4I%rZwJ(?wa3bC~PKs-xW+g;;l|qxa9>`
zzsBz8>Dngsz~Tpa7kHi+hS$2s5JU79t?f#$$DWp}`4O0Y@|Do+O!DChBt*X(^OoMc
zLPFe^B`H+{;VJjhNInUqNlsF0QWUp-k@u|wE7z7TO<qt_>ZuQklgxDlZXy;I@Sw-O
z3g;V=;bo<Ydc<5c0ND1hfJd*BQ?$834HL?*0OZ*5CHXug&WiGc)x4o&>B$Rq;9FDO
z1j#0Mpmq$Mw%%>(`aETk3Ww4h`)(KJNAM17a3wRJPp0?ja~T<nt<Dsgm$VG;y`%`m
zx1}0A0boU#pW5Eyd9LIc9sPQCt@g;jS+KLGJ`uyh3vh06E(^-R4Yi-sNMGh-F~B{x
zNB#IIx4T0)vQOP5(mW$S()^obuTTY~FWxBIv>SiRau~qo#W}DzbMx<|tvBZtD)2N(
z4$y51A;Em85{n~+mOa$h-7AT?VlpcRHbTTsaN<*ZByZ?5l#{b04=#=eAg<w9b?-<T
zScjFIiJ^Y_PJjq+lxAX1FegEDwTSd1s1Y(h{DTCCYnsjOHg9y6B)#gFJ1q5!$M7c|
zmAbvr;`ciWodZqdNL}$NQx2QdZ5PKB{OV6Wfvd?vK{v}zyr5d0hXyTv!JazulIvLg
zaw7kT4+NlC*m0>EZ3%|vgv<ke|CNgX*=%l<NsnJIj>9-=2&{*i4JBq_5RJj_)Nx&l
zjY)b6xq)j0xzLCCzGgdp@EV?_`Eg8k0q5sOSRPRvZfON{G%*f<q3v>7tz62ZHvFt^
zIuxyT9A9mQq!fp=y-K^(n18fxF;w1qHc2n)Tn9yS2mM7f(?+EG{mhPN=DlOM2>%4f
z&;gCI@3!SXMT-YCPDb?6b->-+c4tP1Y9fah6*ri}H8%@42j9}rN2^wm35fYK#Fo>)
zh!?Lk2fwE$i@zk4tIH1Nd^O9eP4ord>wy%Be{r#x*25OHR$zV%2optBVO3AqNg~}R
z4ilsWLb<0#!G7Qe)exJ4A4$zP4@Go=ME?wIv?&-+YLLt}ccVX#9VM-0LVuo;hYK&W
zqPLo7vY1kNL)f(tY^{OGR`fC2=Z@=KVviMH<PlCETAW7tioGO<wY|TyJ-}*04=w^v
zhPm4+hvsa3FGDWr`gdM&9zbv`9qxU*c!ejV^(?6{Gi5RC!YMFlb6c^Zk~j#^dcV(i
zhuRRh8CRX)$!pg{+bzdg&CCYeKnGogHP$^nDT+0`cfbbD@`P{M8VM@p;dNFUn>kjz
zOSXf?KE#86FXqoEX}Ru7gx8F9J;M%&>O{N`+}uy{&WGQpKmP??6R!OojUHJVZFAiX
zRqGFK#eSRO%EWP_e}*(<40>f|rYd0k7HXlJnlEllP);&=lH8C<ZMAE=?sGnAN~Q8t
zZL>BK^G@mH<v`4?T6J^$X-xzt89UX8AbwbbnyLG&PE0CY?3ax6<g{Oo6wN~Lc5n3y
zEFyIIpN($B;WF-yJxq2f7uk{rB5d}Q4+pQ1s*}VMD7s5g1!3+%b?3a<D4(8&KfKG(
zNXQDN9Nn(tf4va6H92QTL+LzG{mlM~CVCQNOu62pNBSn!-6%77vqb-3z3I0B@|C+_
zA3ihp4pxKwu~VCL@<Er8fEQf&LkwXk!%XB4*@v6-J4p|t!xwar|9TR8J?;i@$|wAc
z&=dUb@JSZ~N^Hctc=B8^_27H%+kQW`6FkWF65#&Ji4QefW7m+Z=-1o`-Vk{vbJTXV
z21VH4x^h7Weg$~m?D_gFw^!s{qp^t?^Ea5|^t>&$I~~rVDnp44I1e?6OHw+i(P!nV
zSDR%>nA=b@w?xrBqJ<=DYB&x2^s;B24_e``T2vwC$EF~Q)@#urT#}&9YpqqjGf+SQ
zn|51t4K5F)z#1|w_1C0)=8<-Y5w+fYNSPc9V!lFcWq`5X-yca7gmA76t4Mfp)}&5j
zmC*G`?>P29`<+zrFNekB49qAeX@X@4)6WXoO;oeWwVi^FmW?V&?T;MKrt;xv5hN=n
zU~I|{&8xV7B3ZEHUVWw+>z&X=gKbZ!)+8_U9k$nPLwfKg@LWQ_Ll8dl(Uym*h|J0w
zpf>E;-d0W&c6TPBuly4=(O8Ffz)0f5csWd!8(z29!7LXq^tPZn0H5s`kX^H=ba)+k
zRDo5V^8ckZX)%0SD-WKjK&Ha?!D-%tCT^!S!S!dD_nI_D{zq|LzZ#Go(RPN7l$0ds
zvA9RAZIJ;BK|g1?MG6k-Qwqs@QqqHa*y~b*f$6IHQN>agOew={8n>d(bJuFWf|2ai
zmB4$v{HCnsyOgVMWt=Y8oDX>`7t$m=$CaBmFejnU!|J5vUnzO-0{&`g>558*Qve{5
zPI~^iFH1+I#UQaW2j5=V>E3l`0>VegsScHf)&$JXitdA0+zZ-1Ryw9Z*gi7e;gf%?
zaUAOszcZ6o9-@Rr#WelRg0P7Nv#i}`FV#M$CAr>`mR3GrsvXnB*hzO#yTo_`rlp<N
ziuAD2qmV)6sVqfyNufWrCY6qx&fg|~{aF9|V-7GUyq<E~m7@47o~hrXm1VC`=HHb+
z@BfrgtFeH67!O`CAv@ycOwSR@9}yB)l$TjnTTz^pp_f<eP1V)CnfrujZQz6hER2vS
z4E|9F5OK?i?pl#iFA5tsTz`sdJpn7d)D=v=NFmb>+`(Cpu)8x5rKs18H*K8`Pa#_m
zMw~IHn&qqJm4JU|_zA>KyC_`VMRaYpLz&+8uTu@nYtc<NP^P8Y*HPjD*4`nYxapn~
z2PmUGOBr=GkV$!{2yElUE>f5xqO}XL;-JV}r?4qY&kNVZ4=4k=fGkzLdIGG!&SC<r
z^yy88{jJX2FSVi0tO=DO;R>bCKUqSaNWwaAs_*v-bcy7DsI0UiByNTdee-c{of$?S
zSJPQ&9WO_0+Ud6l@)UTUmPklbC>!Dx&JCE=MV;vCygMp41##o2bouhz*L6+a9ZgU9
z*%S`iTEw<V4hEl*)bmLitKs`NfzkG_dK1;h>PCD_KtC{CGTS_xqHv7R+&MAimW{k4
zQR-uDGE-G;NbAC+Hl4^vJJ(%MB_(J=xCzm0=Gx-Hr=vWApWzA`la9aDnTqQ-5+_7s
zSqM>5+YSfcZS7%Y0nw7;EdeYNgX4qYHI_Hz7iS(5CJ+J936)Op^33PoE@PmcoONfP
z3Vw{5Qu*a4;6Xk{>DjrEP|f<H$p|->XBc)PD{-#*9^qvgGps@MYsal=vNfTyH3HU=
z*l83Nk}9sclx+<w;B>CrkCniXQ#Cc9=MKm`(`gy;?bs};A>ES`uQaGhNdxj!wMt?J
zJmGR{syTm5*EiLkV@M!ub-Q8a$pWMyd4hjsh9)7qo0_6foi3FzU<Pk)i5zB&BK*|w
zs`odx9ZgKrl-lJ_QJ6{;{B&zKJ3$B*^4#vMkAr2M`$|k0P9r?0M@D@^B>z|Z4t!Z2
zNE(PUGun0y#&j`U#4b!DD=ynzQ9Meltasa9xa<i}hGU0r)XGRchrHZ_AN2~P??HGD
zXg@Er_${amG9KaWe=AvcOq8Xa`*u~~-Z(YNvF>9cUc7@R`o@Rn>a7sB_3HM>x-r$*
z-kK}p+Q2ZQ7J4;nY?E5caD12fmD+_9IoMqD9`{rfeHiN31uD!EoDW?UyeynK4Ys&`
zRxYlbI+mi4g8dpfyowN%A>?1ZUzCj7FG}qfUl(MR12%<GDFKYN)g5ZR(VuD6xGrE}
zVvW|pUaQ|3iGLG%8Lu~q6AB7wU;W1Nf-bC+mw5{Y-eO_?g?{Y5A>eL>fqTsV04SBt
A_y7O^

literal 0
HcmV?d00001

diff --git a/packages/web3-shared/solana/constants/constants.ts b/packages/web3-shared/solana/constants/constants.ts
new file mode 100644
index 000000000000..3a4183ec88a0
--- /dev/null
+++ b/packages/web3-shared/solana/constants/constants.ts
@@ -0,0 +1,10 @@
+import Chain from '@masknet/web3-constants/solana/chain.json'
+import Token from '@masknet/web3-constants/solana/token.json'
+import { hookTransform, transform } from '@masknet/web3-shared-base'
+import { ChainId } from '../types'
+
+export const getTokenConstants = transform(ChainId, Token)
+export const useTokenConstants = hookTransform(getTokenConstants)
+
+export const getChainConstants = transform(ChainId, Chain)
+export const useChainConstants = hookTransform(getChainConstants)
diff --git a/packages/web3-shared/solana/constants/descriptors.ts b/packages/web3-shared/solana/constants/descriptors.ts
new file mode 100644
index 000000000000..d23c0fa0e048
--- /dev/null
+++ b/packages/web3-shared/solana/constants/descriptors.ts
@@ -0,0 +1,179 @@
+import { getEnumAsArray } from '@dimensiondev/kit'
+import { EnhanceableSite, ExtensionSite } from '@masknet/shared-base'
+import {
+    ChainDescriptor,
+    createFungibleToken,
+    NetworkDescriptor,
+    NetworkPluginID,
+    ProviderDescriptor,
+} from '@masknet/web3-shared-base'
+import { ChainId, NetworkType, ProviderType, SchemaType } from '../types'
+import { ZERO_ADDRESS } from './primitives'
+
+const PLUGIN_ID = NetworkPluginID.PLUGIN_SOLANA
+
+export const CHAIN_DESCRIPTORS: Array<ChainDescriptor<ChainId, SchemaType, NetworkType>> = [
+    {
+        type: NetworkType.Solana,
+        chainId: ChainId.Mainnet,
+        coinMarketCapChainId: '',
+        coinGeckoChainId: '',
+        coinGeckoPlatformId: '',
+        name: 'Solana',
+        color: '#17ac7c',
+        fullName: 'Solana',
+        shortName: 'Solana',
+        network: 'mainnet',
+        nativeCurrency: createFungibleToken(
+            ChainId.Mainnet,
+            SchemaType.Fungible,
+            ZERO_ADDRESS,
+            'Solana',
+            'SOL',
+            9,
+            'https://assets.coingecko.com/coins/images/4128/small/solana.png',
+        ),
+        explorerURL: {
+            url: 'https://explorer.solana.com/',
+        },
+    },
+    {
+        type: NetworkType.Solana,
+        chainId: ChainId.Devnet,
+        coinMarketCapChainId: '',
+        coinGeckoChainId: '',
+        coinGeckoPlatformId: '',
+        name: 'Solana',
+        color: '#17ac7c',
+        fullName: 'Solana',
+        shortName: 'Solana',
+        network: 'devnet',
+        nativeCurrency: createFungibleToken(
+            ChainId.Devnet,
+            SchemaType.Fungible,
+            ZERO_ADDRESS,
+            'Solana',
+            'SOL',
+            9,
+            'https://assets.coingecko.com/coins/images/4128/small/solana.png',
+        ),
+        explorerURL: {
+            url: 'https://explorer.solana.com/',
+            parameters: {
+                cluster: 'devnet',
+            },
+        },
+    },
+    {
+        type: NetworkType.Solana,
+        chainId: ChainId.Testnet,
+        coinMarketCapChainId: '',
+        coinGeckoChainId: '',
+        coinGeckoPlatformId: '',
+        name: 'Solana',
+        color: '#17ac7c',
+        fullName: 'Solana',
+        shortName: 'Solana',
+        network: 'testnet',
+        nativeCurrency: createFungibleToken(
+            ChainId.Testnet,
+            SchemaType.Fungible,
+            ZERO_ADDRESS,
+            'Solana',
+            'SOL',
+            9,
+            'https://assets.coingecko.com/coins/images/4128/small/solana.png',
+        ),
+        explorerURL: {
+            url: 'https://explorer.solana.com/',
+            parameters: {
+                cluster: 'testnet',
+            },
+        },
+    },
+]
+
+export const NETWORK_DESCRIPTORS: Array<NetworkDescriptor<ChainId, NetworkType>> = [
+    {
+        ID: `${PLUGIN_ID}_solana`,
+        networkSupporterPluginID: PLUGIN_ID,
+        chainId: ChainId.Mainnet,
+        type: NetworkType.Solana,
+        name: 'Solana',
+        icon: new URL('../assets/solana.png', import.meta.url),
+        iconColor: '#5d6fc0',
+        isMainnet: true,
+    },
+    {
+        ID: `${PLUGIN_ID}_solana_testnet`,
+        networkSupporterPluginID: PLUGIN_ID,
+        chainId: ChainId.Testnet,
+        type: NetworkType.Solana,
+        name: 'Solana Testnet',
+        icon: new URL('../assets/solana.png', import.meta.url),
+        iconColor: '#5d6fc0',
+        isMainnet: false,
+    },
+]
+export const PROVIDER_DESCRIPTORS: Array<ProviderDescriptor<ChainId, ProviderType>> = [
+    {
+        ID: `${PLUGIN_ID}_phantom`,
+        providerAdaptorPluginID: PLUGIN_ID,
+        type: ProviderType.Phantom,
+        name: 'Phantom',
+        icon: new URL('../assets/phantom.png', import.meta.url),
+        homeLink: 'https://phantom.app/',
+        shortenLink: 'phantom.app',
+        downloadLink: 'https://phantom.app/download',
+        enableRequirements: {
+            supportedChainIds: getEnumAsArray(ChainId).map((x) => x.value),
+            supportedEnhanceableSites: getEnumAsArray(EnhanceableSite).map((x) => x.value),
+            supportedExtensionSites: [],
+        },
+    },
+    {
+        ID: `${PLUGIN_ID}_solflare`,
+        providerAdaptorPluginID: PLUGIN_ID,
+        type: ProviderType.Solflare,
+        name: 'Solflare',
+        icon: new URL('../assets/solflare.png', import.meta.url),
+        homeLink: 'https://solflare.com/',
+        shortenLink: 'solflare.com',
+        downloadLink: 'https://solflare.com/download',
+        enableRequirements: {
+            supportedChainIds: getEnumAsArray(ChainId).map((x) => x.value),
+            supportedEnhanceableSites: getEnumAsArray(EnhanceableSite).map((x) => x.value),
+            supportedExtensionSites: [],
+        },
+    },
+    {
+        ID: `${PLUGIN_ID}_coin98`,
+        providerAdaptorPluginID: PLUGIN_ID,
+        type: ProviderType.Coin98,
+        name: 'Coin98',
+        icon: new URL('../assets/coin98.png', import.meta.url),
+        homeLink: 'https://coin98.com/',
+        shortenLink: 'solflare.com',
+        downloadLink: 'https://solflare.com/download',
+        enableRequirements: {
+            supportedChainIds: getEnumAsArray(ChainId).map((x) => x.value),
+            supportedEnhanceableSites: getEnumAsArray(EnhanceableSite).map((x) => x.value),
+            supportedExtensionSites: [],
+        },
+    },
+    {
+        ID: `${PLUGIN_ID}_sollet`,
+        providerAdaptorPluginID: PLUGIN_ID,
+        type: ProviderType.Sollet,
+        name: 'Sollet',
+        icon: new URL('../assets/sollet.png', import.meta.url),
+        homeLink: 'https://www.sollet.io/',
+        shortenLink: 'sollet.io',
+        downloadLink: 'https://www.sollet.io/',
+        enableRequirements: {
+            supportedChainIds: getEnumAsArray(ChainId).map((x) => x.value),
+            supportedEnhanceableSites: getEnumAsArray(EnhanceableSite).map((x) => x.value),
+            supportedExtensionSites: getEnumAsArray(ExtensionSite).map((x) => x.value),
+        },
+    },
+]
diff --git a/packages/web3-shared/solana/constants/index.ts b/packages/web3-shared/solana/constants/index.ts
index 8275467bad6a..3d27755f3c46 100644
--- a/packages/web3-shared/solana/constants/index.ts
+++ b/packages/web3-shared/solana/constants/index.ts
@@ -1,6 +1,3 @@
-import Token from '@masknet/web3-constants/solana/token.json'
-import { hookTransform, transform } from '@masknet/web3-shared-base'
-import { ChainId } from '../types'
-
-export const getTokenConstants = transform(ChainId, Token)
-export const useTokenConstants = hookTransform(getTokenConstants)
+export * from './constants'
+export * from './descriptors'
+export * from './primitives'
diff --git a/packages/web3-shared/solana/constants/primitives.ts b/packages/web3-shared/solana/constants/primitives.ts
new file mode 100644
index 000000000000..c9e070eedd93
--- /dev/null
+++ b/packages/web3-shared/solana/constants/primitives.ts
@@ -0,0 +1 @@
+export const ZERO_ADDRESS = ''
diff --git a/packages/web3-shared/solana/index.ts b/packages/web3-shared/solana/index.ts
index fc405ba933b2..e6984064c5fd 100644
--- a/packages/web3-shared/solana/index.ts
+++ b/packages/web3-shared/solana/index.ts
@@ -1,5 +1,5 @@
 export * from './sdk'
 export * from './types'
-export * from './pipes'
 export * from './hooks'
 export * from './constants'
+export * from './utils'
diff --git a/packages/web3-shared/solana/package.json b/packages/web3-shared/solana/package.json
index ec5215c05cf3..5d59204014a9 100644
--- a/packages/web3-shared/solana/package.json
+++ b/packages/web3-shared/solana/package.json
@@ -9,8 +9,15 @@
   },
   "types": "./dist/index.d.ts",
   "dependencies": {
+    "@masknet/shared-base": "workspace:*",
     "@masknet/web3-constants": "workspace:*",
     "@masknet/web3-shared-base": "workspace:*",
+    "@solana/web3.js": "^1.30.2",
+    "@toruslabs/solana-embed": "^0.1.6",
+    "@types/bs58": "^4.0.1",
+    "bignumber.js": "9.0.2",
+    "bs58": "^4.0.1",
+    "buffer": "^6.0.3",
     "react-use": "^17.3.2",
     "urlcat": "^2.0.4"
   }
diff --git a/packages/web3-shared/solana/pipes/index.ts b/packages/web3-shared/solana/pipes/index.ts
deleted file mode 100644
index 10fec7a7d9bb..000000000000
--- a/packages/web3-shared/solana/pipes/index.ts
+++ /dev/null
@@ -1,45 +0,0 @@
-import urlcat from 'urlcat'
-import { createLookupTableResolver } from '@masknet/web3-shared-base'
-import { ChainId, ProviderType } from '../types'
-
-export const resolveChainName = createLookupTableResolver<ChainId, string>(
-    {
-        [ChainId.Mainnet]: 'mainnet',
-        [ChainId.Testnet]: 'testnet',
-        [ChainId.Devnet]: 'devnet',
-    },
-    () => 'Unknown chain id',
-)
-
-export const resolveProviderName = createLookupTableResolver<ProviderType, string>(
-    {
-        [ProviderType.Phantom]: 'Phantom',
-        [ProviderType.Sollet]: 'Sollet',
-    },
-    () => 'Unknown provider type',
-)
-
-export const resolveLinkOnExplorer = createLookupTableResolver<ChainId, string>(
-    {
-        [ChainId.Mainnet]: 'https://explorer.solana.com/',
-        [ChainId.Testnet]: 'https://explorer.solana.com/?cluster=testnet',
-        [ChainId.Devnet]: 'https://explorer.solana.com/?cluster=devnet',
-    },
-    () => 'Unknown chain id',
-)
-
-export function resolveTransactionLinkOnExplorer(chainId: ChainId, tx: string) {
-    return urlcat(resolveLinkOnExplorer(chainId), '/transaction/:tx', {
-        tx,
-    })
-}
-
-export function resolveAddressLinkOnExplorer(chainId: ChainId, address: string) {
-    return urlcat(resolveLinkOnExplorer(chainId), '/account/:address', {
-        address,
-    })
-}
-
-export function resolveBlockLinkOnExplorer(chainId: ChainId, blockNumber: string) {
-    return ''
-}
diff --git a/packages/web3-shared/solana/tsconfig.json b/packages/web3-shared/solana/tsconfig.json
index c3938c229245..8f867644ecb4 100644
--- a/packages/web3-shared/solana/tsconfig.json
+++ b/packages/web3-shared/solana/tsconfig.json
@@ -6,5 +6,10 @@
     "tsBuildInfoFile": "../dist/solana.tsbuildinfo"
   },
   "include": ["./", "./**/*.json"],
-  "references": [{ "path": "../../web3-shared/base" }]
+  "references": [
+    { "path": "../../icons" },
+    { "path": "../../theme" },
+    { "path": "../../web3-shared/base" },
+    { "path": "../../web3-shared/evm" }
+  ]
 }
diff --git a/packages/web3-shared/solana/types.ts b/packages/web3-shared/solana/types.ts
index 6ca4951f26c3..3ea8564f7ba5 100644
--- a/packages/web3-shared/solana/types.ts
+++ b/packages/web3-shared/solana/types.ts
@@ -1,14 +1,67 @@
+import type { PublicKey, BlockResponse, Transaction as SolanaTransaction, TransactionResponse } from '@solana/web3.js'
+
 export enum ChainId {
     Mainnet = 101,
     Testnet = 102,
     Devnet = 103,
 }
 
+export enum SchemaType {
+    Native = 1,
+    Fungible = 2,
+    NonFungible = 3,
+}
+
 export enum NetworkType {
     Solana = 'Solana',
 }
 
 export enum ProviderType {
     Phantom = 'Phantom',
+    Solflare = 'Solflare',
     Sollet = 'Sollet',
+    Coin98 = 'Coin98',
+}
+
+// Learn more at https://docs.phantom.app/integrating/extension-and-mobile-browser/detecting-the-provider
+export enum PhantomMethodType {
+    CONNECT = 'connect',
+    DISCONNECT = 'connect',
+    SIGN_MESSAGE = 'signMessage',
+    SIGN_TRANSACTION = 'signTransaction',
+    SIGN_TRANSACTIONS = 'signAllTransactions',
+    SIGN_AND_SEND_TRANSACTION = 'signAndSendTransaction',
+}
+
+// Learn more at https://docs.coin98.com/developer-guide/solana-dapps-integration
+export enum Coin98MethodType {
+    SOL_ACCOUNTS = 'sol_accounts',
+    SOL_REQUEST_ACCOUNTS = 'sol_requestAccounts',
+    HAS_WALLET = 'has_wallet',
+    SOL_SIGN = 'sol_sign',
+    SOL_VERIFY = 'sol_verify',
+}
+
+export interface Payload {
+    method: string
+    params?: unknown
+}
+
+export type Web3 = typeof import('@solana/web3.js')
+export type Web3Provider = {
+    publicKey: PublicKey
+    on(name: string, callback: () => void): void
+    request(payload: Payload): Promise<unknown>
+    connect(): Promise<{
+        publicKey: string
+    }>
+    disconnect(): Promise<void>
 }
+export type Signature = string
+export type GasOption = never
+export type Block = BlockResponse
+export type Transaction = SolanaTransaction
+export type TransactionReceipt = never
+export type TransactionDetailed = TransactionResponse
+export type TransactionSignature = SolanaTransaction
+export type TransactionParameter = string
diff --git a/packages/web3-shared/solana/utils/address.ts b/packages/web3-shared/solana/utils/address.ts
new file mode 100644
index 000000000000..258ae4ff6b8a
--- /dev/null
+++ b/packages/web3-shared/solana/utils/address.ts
@@ -0,0 +1,26 @@
+import bs58 from 'bs58'
+import * as Web3 from '@solana/web3.js'
+import { getEnumAsArray } from '@dimensiondev/kit'
+import { ChainId } from '../types'
+
+export function encodePublicKey(key: Web3.PublicKey) {
+    return key.toBase58()
+}
+
+export function decodeAddress(initData: string | Buffer) {
+    const data = typeof initData === 'string' ? bs58.decode(initData) : initData
+    if (!Web3.PublicKey.isOnCurve(data)) throw new Error(`Failed to create public key from ${bs58.encode(data)}.`)
+    return new Web3.PublicKey(data)
+}
+
+export function formatAddress(address: string, size = 0) {
+    if (size === 0 || size >= 22) return address
+    return `${address.slice(0, Math.max(0, size))}...${address.slice(-size)}`
+}
+export function isValidAddress(address?: string) {
+    return !!(address && Web3.PublicKey.isOnCurve(bs58.decode(address)))
+}
+
+export function isValidChainId(chainId: number) {
+    return getEnumAsArray(ChainId).some((x) => x.value === chainId)
+}
diff --git a/packages/web3-shared/solana/utils/domain.ts b/packages/web3-shared/solana/utils/domain.ts
new file mode 100644
index 000000000000..d9e3eab393bf
--- /dev/null
+++ b/packages/web3-shared/solana/utils/domain.ts
@@ -0,0 +1,3 @@
+export function isValidDomain(domain: string) {
+    return /.+\.sol/i.test(domain)
+}
diff --git a/packages/web3-shared/solana/utils/index.ts b/packages/web3-shared/solana/utils/index.ts
new file mode 100644
index 000000000000..c56c8c541787
--- /dev/null
+++ b/packages/web3-shared/solana/utils/index.ts
@@ -0,0 +1,3 @@
+export * from './address'
+export * from './domain'
+export * from './resolver'
diff --git a/packages/web3-shared/solana/utils/resolver.ts b/packages/web3-shared/solana/utils/resolver.ts
new file mode 100644
index 000000000000..a1b5725ced9b
--- /dev/null
+++ b/packages/web3-shared/solana/utils/resolver.ts
@@ -0,0 +1,14 @@
+import {
+    createChainResolver,
+    createExplorerResolver,
+    createNetworkResolver,
+    createProviderResolver,
+} from '@masknet/web3-shared-base'
+import { CHAIN_DESCRIPTORS, NETWORK_DESCRIPTORS, PROVIDER_DESCRIPTORS } from '../constants'
+
+export const chainResolver = createChainResolver(CHAIN_DESCRIPTORS)
+export const explorerResolver = createExplorerResolver(CHAIN_DESCRIPTORS, {
+    nonFungibleTokenPathname: '/address/:tokenId',
+})
+export const networkResolver = createNetworkResolver(NETWORK_DESCRIPTORS)
+export const providerResolver = createProviderResolver(PROVIDER_DESCRIPTORS)
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 58a983fbca5d..c77b1cd318ec 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -14,7 +14,7 @@ importers:
       '@commitlint/cli': ^17.0.0
       '@commitlint/config-conventional': ^17.0.0
       '@dimensiondev/eslint-plugin': 0.0.2-20220516081411-2649814
-      '@dimensiondev/kit': 0.0.0-20220228054820-f2378be
+      '@dimensiondev/kit': 0.0.0-20220501022859-60d5533
       '@dimensiondev/patch-package': ^6.5.0
       '@emotion/cache': ^11.7.1
       '@emotion/react': ^11.9.0
@@ -68,7 +68,7 @@ importers:
       web3-core: 1.7.3
       web3-core-method: 1.7.3
     dependencies:
-      '@dimensiondev/kit': 0.0.0-20220228054820-f2378be
+      '@dimensiondev/kit': 0.0.0-20220501022859-60d5533
       '@emotion/cache': 11.7.1
       '@emotion/react': 11.9.0_7cpxmzzodpxnolj5zcc5cr63ji
       '@emotion/serialize': 1.0.3
@@ -154,6 +154,7 @@ importers:
       '@hookform/resolvers': ^2.8.10
       '@masknet/backup-format': workspace:*
       '@masknet/icons': workspace:*
+      '@masknet/plugin-evm': workspace:*
       '@masknet/plugin-example': workspace:*
       '@masknet/plugin-flow': workspace:*
       '@masknet/plugin-infra': workspace:*
@@ -168,6 +169,8 @@ importers:
       '@masknet/web3-providers': workspace:*
       '@masknet/web3-shared-base': workspace:*
       '@masknet/web3-shared-evm': workspace:*
+      '@masknet/web3-shared-flow': workspace:*
+      '@masknet/web3-shared-solana': workspace:*
       '@msgpack/msgpack': ^2.7.2
       '@servie/events': ^3.0.0
       '@storybook/addon-actions': ^6.4.22
@@ -210,6 +213,7 @@ importers:
       '@hookform/resolvers': 2.8.10_react-hook-form@7.31.1
       '@masknet/backup-format': link:../backup-format
       '@masknet/icons': link:../icons
+      '@masknet/plugin-evm': link:../plugins/EVM
       '@masknet/plugin-example': link:../plugins/example
       '@masknet/plugin-flow': link:../plugins/Flow
       '@masknet/plugin-infra': link:../plugin-infra
@@ -224,6 +228,8 @@ importers:
       '@masknet/web3-providers': link:../web3-providers
       '@masknet/web3-shared-base': link:../web3-shared/base
       '@masknet/web3-shared-evm': link:../web3-shared/evm
+      '@masknet/web3-shared-flow': link:../web3-shared/flow
+      '@masknet/web3-shared-solana': link:../web3-shared/solana
       '@msgpack/msgpack': 2.7.2
       '@servie/events': 3.0.0
       '@types/color': 3.0.3
@@ -326,9 +332,6 @@ importers:
       '@rollup/plugin-sucrase': ^4.0.4
       rollup: ^2.73.0
       rollup-plugin-terser: ^7.0.2
-      web3-core-helpers: 1.7.3
-    dependencies:
-      web3-core-helpers: 1.7.3
     devDependencies:
       '@rollup/plugin-sucrase': 4.0.4_rollup@2.73.0
       rollup: 2.73.0
@@ -339,7 +342,6 @@ importers:
       '@balancer-labs/sor': ^1.0.0
       '@dimensiondev/holoflows-kit': ^0.9.0-20220520093249-0870919
       '@dimensiondev/mask-wallet-core': 0.1.0-20211013082857-eb62e5f
-      '@dimensiondev/metamask-extension-provider': 3.0.6-20210519045409-1835d4d
       '@dimensiondev/secp256k1-webcrypto': 1.0.0-20220412114204-be816df
       '@dimensiondev/webextension-shim': 0.0.3-20210823035705-4257e12
       '@ethersproject/abi': ^5.4.0
@@ -358,6 +360,7 @@ importers:
       '@masknet/plugin-cyberconnect': workspace:*
       '@masknet/plugin-dao': workspace:*
       '@masknet/plugin-debugger': workspace:*
+      '@masknet/plugin-evm': workspace:*
       '@masknet/plugin-example': workspace:*
       '@masknet/plugin-file-service': workspace:*
       '@masknet/plugin-flow': workspace:*
@@ -398,13 +401,11 @@ importers:
       '@types/react-virtualized-auto-sizer': ^1.0.1
       '@types/react-window': ^1.8.4
       '@types/remarkable': ^2.0.3
-      '@types/socket.io-client': ^1.4.36
       '@types/use-subscription': ^1.0.0
       '@types/uuid': ^8.3.4
       '@uniswap/sdk-core': ^3.0.1
       '@uniswap/v2-sdk': 3.0.0-alpha.2
       '@uniswap/v3-sdk': ^3.3.2
-      '@walletconnect/client': ^1.2.2
       anchorme: ^2.1.2
       assert: ^2.0.0
       async-call-rpc: ^6.0.2
@@ -421,7 +422,6 @@ importers:
       date-fns: ^2.28.0
       elliptic: ^6.5.3
       ethereumjs-util: ^7.1.0
-      ethjs-ens: ^2.0.1
       event-iterator: ^2.0.0
       fuse.js: ^6.6.2
       graphql: ^15.5.1
@@ -486,7 +486,6 @@ importers:
       '@balancer-labs/sor': 1.0.0
       '@dimensiondev/holoflows-kit': 0.9.0-20220520093249-0870919_5owzivba7saavwcb3imbrcsadu
       '@dimensiondev/mask-wallet-core': 0.1.0-20211013082857-eb62e5f_protobufjs@6.11.2
-      '@dimensiondev/metamask-extension-provider': 3.0.6-20210519045409-1835d4d
       '@dimensiondev/secp256k1-webcrypto': 1.0.0-20220412114204-be816df
       '@ethersproject/abi': 5.4.0
       '@ethersproject/address': 5.4.0
@@ -504,6 +503,7 @@ importers:
       '@masknet/plugin-cyberconnect': link:../plugins/CyberConnect
       '@masknet/plugin-dao': link:../plugins/DAO
       '@masknet/plugin-debugger': link:../plugins/Debugger
+      '@masknet/plugin-evm': link:../plugins/EVM
       '@masknet/plugin-example': link:../plugins/example
       '@masknet/plugin-file-service': link:../plugins/FileService
       '@masknet/plugin-flow': link:../plugins/Flow
@@ -541,13 +541,11 @@ importers:
       '@types/react-virtualized-auto-sizer': 1.0.1
       '@types/react-window': 1.8.5
       '@types/remarkable': 2.0.3
-      '@types/socket.io-client': 1.4.36
       '@types/use-subscription': 1.0.0
       '@types/uuid': 8.3.4
       '@uniswap/sdk-core': 3.0.1
       '@uniswap/v2-sdk': 3.0.0-alpha.2
       '@uniswap/v3-sdk': 3.3.2
-      '@walletconnect/client': 1.4.1
       anchorme: 2.1.2
       assert: 2.0.0
       async-call-rpc: 6.0.2
@@ -562,7 +560,6 @@ importers:
       date-fns: 2.28.0
       elliptic: 6.5.4
       ethereumjs-util: 7.1.0
-      ethjs-ens: 2.0.1
       event-iterator: 2.0.0
       fuse.js: 6.6.2
       graphql: 15.5.3
@@ -649,34 +646,60 @@ importers:
   packages/plugin-infra:
     specifiers:
       '@dimensiondev/holoflows-kit': ^0.9.0-20220520093249-0870919
+      '@dimensiondev/mask-wallet-core': 0.1.0-20211013082857-eb62e5f
       '@masknet/encryption': workspace:*
       '@masknet/shared-base': workspace:*
       '@masknet/shared-base-ui': workspace:*
       '@masknet/theme': workspace:*
       '@masknet/typed-message': workspace:*
+      '@masknet/web3-constants': workspace:*
+      '@masknet/web3-contracts': workspace:*
       '@masknet/web3-shared-base': workspace:*
+      '@masknet/web3-shared-evm': workspace:*
+      '@masknet/web3-shared-flow': workspace:*
+      '@masknet/web3-shared-solana': workspace:*
       '@servie/events': ^3.0.0
+      '@types/ethereum-blockies': ^0.1.0
       '@types/use-subscription': ^1.0.0
       async-call-rpc: ^6.0.2
       bignumber.js: ^9.0.2
+      ethereum-blockies: ^0.1.1
       react-use: ^17.3.2
       unstated-next: ^1.1.0
+      urlcat: ^2.0.4
       use-subscription: 1.6.0
+      wallet.ts: ^1.0.1
+      web3: 1.7.3
+      web3-core-helpers: 1.7.3
+      web3-utils: 1.7.3
     dependencies:
       '@dimensiondev/holoflows-kit': 0.9.0-20220520093249-0870919
+      '@dimensiondev/mask-wallet-core': 0.1.0-20211013082857-eb62e5f
       '@masknet/encryption': link:../encryption
       '@masknet/shared-base': link:../shared-base
       '@masknet/shared-base-ui': link:../shared-base-ui
       '@masknet/theme': link:../theme
       '@masknet/typed-message': link:../typed-message
+      '@masknet/web3-constants': link:../web3-constants
+      '@masknet/web3-contracts': link:../web3-contracts
       '@masknet/web3-shared-base': link:../web3-shared/base
+      '@masknet/web3-shared-evm': link:../web3-shared/evm
+      '@masknet/web3-shared-flow': link:../web3-shared/flow
+      '@masknet/web3-shared-solana': link:../web3-shared/solana
       '@servie/events': 3.0.0
+      '@types/ethereum-blockies': 0.1.0
       '@types/use-subscription': 1.0.0
       async-call-rpc: 6.0.2
       bignumber.js: 9.0.2
+      ethereum-blockies: 0.1.1
       react-use: 17.3.2
       unstated-next: 1.1.0
+      urlcat: 2.0.4
       use-subscription: 1.6.0
+      wallet.ts: 1.0.1
+      web3: 1.7.3
+      web3-core-helpers: 1.7.3
+      web3-utils: 1.7.3
 
   packages/plugins/CrossChainBridge:
     specifiers:
@@ -704,6 +727,7 @@ importers:
       '@masknet/shared-base': workspace:*
       '@masknet/theme': workspace:*
       '@masknet/typed-message': workspace:*
+      '@masknet/web3-shared-base': workspace:*
       '@masknet/web3-shared-evm': workspace:*
       boring-avatars: ^1.6.3
       react-use: ^17.3.2
@@ -714,6 +738,7 @@ importers:
       '@masknet/shared-base': link:../../shared-base
       '@masknet/theme': link:../../theme
       '@masknet/typed-message': link:../../typed-message
+      '@masknet/web3-shared-base': link:../../web3-shared/base
       '@masknet/web3-shared-evm': link:../../web3-shared/evm
       boring-avatars: 1.6.3
       react-use: 17.3.2
@@ -770,6 +795,75 @@ importers:
       react-use: 17.3.2
       urlcat: 2.0.4
 
+  packages/plugins/EVM:
+    specifiers:
+      '@dimensiondev/holoflows-kit': ^0.9.0-20220520093249-0870919
+      '@dimensiondev/metamask-extension-provider': ^3.0.6-20210519045409-1835d4d
+      '@masknet/icons': workspace:*
+      '@masknet/injected-script': workspace:*
+      '@masknet/plugin-infra': workspace:*
+      '@masknet/shared': workspace:*
+      '@masknet/shared-base': workspace:*
+      '@masknet/theme': workspace:*
+      '@masknet/web3-constants': workspace:*
+      '@masknet/web3-contracts': workspace:*
+      '@masknet/web3-providers': workspace:*
+      '@masknet/web3-shared-base': workspace:*
+      '@masknet/web3-shared-evm': workspace:*
+      '@metamask/eth-sig-util': ^4.0.0
+      '@servie/events': ^3.0.0
+      '@toruslabs/torus-embed': ^1.22.6
+      '@types/use-subscription': ^1.0.0
+      '@walletconnect/client': ^1.7.5
+      '@walletconnect/qrcode-modal': ^1.7.5
+      '@walletconnect/types': ^1.7.7
+      bignumber.js: ^9.0.2
+      ethereumjs-util: ^7.1.0
+      ethjs-ens: ^2.0.1
+      fortmatic: ^2.2.1
+      react-use: ^17.3.2
+      urlcat: ^2.0.4
+      wallet.ts: ^1.0.1
+      web3: 1.7.3
+      web3-core: 1.7.3
+      web3-core-helpers: 1.7.3
+      web3-eth-abi: 1.7.3
+      web3-utils: 1.7.3
+    dependencies:
+      '@dimensiondev/holoflows-kit': 0.9.0-20220520093249-0870919
+      '@dimensiondev/metamask-extension-provider': 3.0.6-20210519045409-1835d4d
+      '@masknet/icons': link:../../icons
+      '@masknet/injected-script': link:../../injected-script
+      '@masknet/plugin-infra': link:../../plugin-infra
+      '@masknet/shared': link:../../shared
+      '@masknet/shared-base': link:../../shared-base
+      '@masknet/theme': link:../../theme
+      '@masknet/web3-constants': link:../../web3-constants
+      '@masknet/web3-contracts': link:../../web3-contracts
+      '@masknet/web3-providers': link:../../web3-providers
+      '@masknet/web3-shared-base': link:../../web3-shared/base
+      '@masknet/web3-shared-evm': link:../../web3-shared/evm
+      '@metamask/eth-sig-util': 4.0.0
+      '@servie/events': 3.0.0
+      '@toruslabs/torus-embed': 1.23.2
+      '@walletconnect/client': 1.7.8
+      '@walletconnect/qrcode-modal': 1.7.8
+      '@walletconnect/types': 1.7.8
+      bignumber.js: 9.0.2
+      ethereumjs-util: 7.1.4
+      ethjs-ens: 2.0.1
+      fortmatic: 2.2.1
+      react-use: 17.3.2
+      urlcat: 2.0.4
+      wallet.ts: 1.0.1
+      web3: 1.7.3
+      web3-core: 1.7.3
+      web3-core-helpers: 1.7.3
+      web3-eth-abi: 1.7.3
+      web3-utils: 1.7.3
+    devDependencies:
+      '@types/use-subscription': 1.0.0
+
   packages/plugins/FileService:
     specifiers:
       '@dimensiondev/common-protocols': 1.6.0-20210723072221-8f46a92
@@ -814,29 +908,38 @@ importers:
 
   packages/plugins/Flow:
     specifiers:
-      '@blocto/fcl': ^0.0.78-alpha.8
+      '@blocto/fcl': ^0.0.78-alpha.10
       '@masknet/icons': workspace:*
+      '@masknet/injected-script': workspace:*
       '@masknet/plugin-infra': workspace:*
       '@masknet/shared': workspace:*
       '@masknet/shared-base': workspace:*
       '@masknet/theme': workspace:*
       '@masknet/web3-providers': workspace:*
       '@masknet/web3-shared-base': workspace:*
+      '@masknet/web3-shared-evm': workspace:*
       '@masknet/web3-shared-flow': workspace:*
+      '@servie/events': ^3.0.0
+      '@types/use-subscription': ^1.0.0
       bignumber.js: ^9.0.2
       react-use: ^17.3.2
     dependencies:
-      '@blocto/fcl': 0.0.78-alpha.8
+      '@blocto/fcl': 0.0.78-alpha.10
       '@masknet/icons': link:../../icons
+      '@masknet/injected-script': link:../../injected-script
       '@masknet/plugin-infra': link:../../plugin-infra
       '@masknet/shared': link:../../shared
       '@masknet/shared-base': link:../../shared-base
       '@masknet/theme': link:../../theme
       '@masknet/web3-providers': link:../../web3-providers
       '@masknet/web3-shared-base': link:../../web3-shared/base
+      '@masknet/web3-shared-evm': link:../../web3-shared/evm
       '@masknet/web3-shared-flow': link:../../web3-shared/flow
+      '@servie/events': 3.0.0
       bignumber.js: 9.0.2
       react-use: 17.3.2
+    devDependencies:
+      '@types/use-subscription': 1.0.0
 
   packages/plugins/GoPlusSecurity:
     specifiers:
@@ -847,6 +950,7 @@ importers:
       '@masknet/shared-base-ui': workspace:*
       '@masknet/theme': workspace:*
       '@masknet/web3-providers': workspace:*
+      '@masknet/web3-shared-base': workspace:*
       '@masknet/web3-shared-evm': workspace:*
       react-feather: ^2.0.9
       react-use: ^17.3.2
@@ -859,6 +963,7 @@ importers:
       '@masknet/shared-base-ui': link:../../shared-base-ui
       '@masknet/theme': link:../../theme
       '@masknet/web3-providers': link:../../web3-providers
+      '@masknet/web3-shared-base': link:../../web3-shared/base
       '@masknet/web3-shared-evm': link:../../web3-shared/evm
       react-feather: 2.0.9
       react-use: 17.3.2
@@ -906,12 +1011,19 @@ importers:
       '@masknet/theme': workspace:*
       '@masknet/web3-providers': workspace:*
       '@masknet/web3-shared-base': workspace:*
+      '@masknet/web3-shared-evm': workspace:*
       '@masknet/web3-shared-solana': workspace:*
       '@metaplex-foundation/mpl-token-metadata': ^1.1.0
       '@metaplex/js': ^4.11.7
+      '@project-serum/sol-wallet-adapter': ^0.2.6
+      '@servie/events': ^3.0.0
       '@solana/spl-name-service': ^0.1.3
       '@solana/spl-token': ^0.1.8
       '@solana/spl-token-registry': ^0.2.1301
+      '@solana/web3.js': 1.39.1
+      '@toruslabs/solana-embed': ^0.1.6
+      '@types/bs58': ^4.0.1
+      '@types/use-subscription': ^1.0.0
       bignumber.js: ^9.0.2
       bn.js: ^4.12.0
       bs58: ^4.0.1
@@ -928,23 +1040,32 @@ importers:
       '@masknet/theme': link:../../theme
       '@masknet/web3-providers': link:../../web3-providers
       '@masknet/web3-shared-base': link:../../web3-shared/base
+      '@masknet/web3-shared-evm': link:../../web3-shared/evm
       '@masknet/web3-shared-solana': link:../../web3-shared/solana
       '@metaplex-foundation/mpl-token-metadata': 1.1.0
       '@metaplex/js': 4.11.7
+      '@project-serum/sol-wallet-adapter': 0.2.6_@solana+web3.js@1.39.1
+      '@servie/events': 3.0.0
       '@solana/spl-name-service': 0.1.3
       '@solana/spl-token': 0.1.8
       '@solana/spl-token-registry': 0.2.1301
+      '@solana/web3.js': 1.39.1
+      '@toruslabs/solana-embed': 0.1.6
       bignumber.js: 9.0.2
       bn.js: 4.12.0
       bs58: 4.0.1
       buffer: 6.0.3
       react-use: 17.3.2
+    devDependencies:
+      '@types/bs58': 4.0.1
+      '@types/use-subscription': 1.0.0
 
   packages/plugins/Wallet:
     specifiers:
       '@masknet/plugin-infra': workspace:*
       '@masknet/shared': workspace:*
       '@masknet/theme': workspace:*
+      '@masknet/web3-shared-base': workspace:*
       '@masknet/web3-shared-evm': workspace:*
       bignumber.js: ^9.0.2
       react-use: ^17.3.2
@@ -953,6 +1074,7 @@ importers:
       '@masknet/plugin-infra': link:../../plugin-infra
       '@masknet/shared': link:../../shared
       '@masknet/theme': link:../../theme
+      '@masknet/web3-shared-base': link:../../web3-shared/base
       '@masknet/web3-shared-evm': link:../../web3-shared/evm
       bignumber.js: 9.0.2
       react-use: 17.3.2
@@ -1076,6 +1198,7 @@ importers:
       '@masknet/theme': link:../theme
       '@masknet/web3-shared-base': link:../web3-shared/base
       '@masknet/web3-shared-evm': link:../web3-shared/evm
+      '@types/qrcode': 1.4.2
       anchorme: 2.1.2
       bignumber.js: 9.0.2
       classnames: 2.3.1
@@ -1086,8 +1209,6 @@ importers:
       react-use: 17.3.2
       urlcat: 2.0.4
       use-subscription: 1.6.0
-    devDependencies:
-      '@types/qrcode': 1.4.2
 
   packages/shared-base:
     specifiers:
@@ -1258,6 +1379,7 @@ importers:
 
   packages/web3-providers:
     specifiers:
+      '@dimensiondev/mask-wallet-core': 0.1.0-20211013082857-eb62e5f
       '@masknet/plugin-infra': workspace:*
       '@masknet/shared-base': workspace:*
       '@masknet/web3-constants': workspace:*
@@ -1279,6 +1401,7 @@ importers:
       uuid: ^8.3.2
       wallet.ts: ^1.0.1
     dependencies:
+      '@dimensiondev/mask-wallet-core': 0.1.0-20211013082857-eb62e5f
       '@masknet/plugin-infra': link:../plugin-infra
       '@masknet/shared-base': link:../shared-base
       '@masknet/web3-constants': link:../web3-constants
@@ -1303,32 +1426,49 @@ importers:
 
   packages/web3-shared/base:
     specifiers:
+      '@dimensiondev/holoflows-kit': ^0.9.0-20220520093249-0870919
+      '@dimensiondev/mask-wallet-core': 0.1.0-20211013082857-eb62e5f
+      '@masknet/shared-base': workspace:*
+      '@servie/events': ^3.0.0
+      '@types/use-subscription': ^1.0.0
       bignumber.js: 9.0.2
       date-fns: ^2.28.0
       jest-websocket-mock: ^2.3.0
       mock-socket: ^9.1.2
       react-use: ^17.3.2
       reconnecting-websocket: ^4.4.0
+      urlcat: ^2.0.4
     dependencies:
+      '@dimensiondev/holoflows-kit': 0.9.0-20220520093249-0870919
+      '@dimensiondev/mask-wallet-core': 0.1.0-20211013082857-eb62e5f
+      '@masknet/shared-base': link:../../shared-base
+      '@servie/events': 3.0.0
+      '@types/use-subscription': 1.0.0
       bignumber.js: 9.0.2
       date-fns: 2.28.0
       react-use: 17.3.2
       reconnecting-websocket: 4.4.0
+      urlcat: 2.0.4
     devDependencies:
       jest-websocket-mock: 2.3.0
       mock-socket: 9.1.2
 
   packages/web3-shared/evm:
     specifiers:
+      '@dimensiondev/holoflows-kit': ^0.9.0-20220520093249-0870919
       '@ensdomains/address-encoder': ^0.2.6
+      '@masknet/injected-script': '*'
       '@masknet/shared-base': workspace:*
       '@masknet/web3-constants': workspace:*
       '@masknet/web3-contracts': workspace:*
       '@masknet/web3-shared-base': workspace:*
+      '@toruslabs/torus-embed': ^1.22.6
       '@types/ethereum-blockies': ^0.1.0
       '@types/punycode': ^2.1.0
       '@types/use-subscription': ^1.0.0
       '@types/uuid': ^8.3.4
+      '@walletconnect/client': ^1.7.5
+      '@walletconnect/qrcode-modal': ^1.7.5
       bignumber.js: 9.0.2
       ethereum-blockies: ^0.1.1
       fortmatic: ^2.2.1
@@ -1342,15 +1482,18 @@ importers:
       wallet.ts: ^1.0.1
       web3: 1.7.3
       web3-core-helpers: 1.7.3
+      web3-eth-contract: 1.7.3
       web3-utils: 1.7.3
     dependencies:
+      '@dimensiondev/holoflows-kit': 0.9.0-20220520093249-0870919
       '@ensdomains/address-encoder': 0.2.6
       '@masknet/shared-base': link:../../shared-base
       '@masknet/web3-constants': link:../../web3-constants
       '@masknet/web3-contracts': link:../../web3-contracts
       '@masknet/web3-shared-base': link:../base
-      '@types/ethereum-blockies': 0.1.0
-      '@types/punycode': 2.1.0
+      '@toruslabs/torus-embed': 1.23.2
+      '@walletconnect/client': 1.7.8
+      '@walletconnect/qrcode-modal': 1.7.8
       bignumber.js: 9.0.2
       ethereum-blockies: 0.1.1
       fortmatic: 2.2.1
@@ -1364,36 +1507,58 @@ importers:
       wallet.ts: 1.0.1
       web3: 1.7.3
       web3-core-helpers: 1.7.3
+      web3-eth-contract: 1.7.3
       web3-utils: 1.7.3
     devDependencies:
+      '@masknet/injected-script': link:../../injected-script
+      '@types/ethereum-blockies': 0.1.0
+      '@types/punycode': 2.1.0
       '@types/use-subscription': 1.0.0
       '@types/uuid': 8.3.4
 
   packages/web3-shared/flow:
     specifiers:
-      '@blocto/fcl': ^0.0.78-alpha.8
+      '@blocto/fcl': ^0.0.78-alpha.10
+      '@masknet/shared-base': workspace:*
       '@masknet/web3-constants': workspace:*
       '@masknet/web3-shared-base': workspace:*
       '@onflow/types': ^0.0.5
+      bignumber.js: 9.0.2
       react-use: ^17.3.2
       urlcat: ^2.0.4
     dependencies:
-      '@blocto/fcl': 0.0.78-alpha.8
+      '@blocto/fcl': 0.0.78-alpha.10
+      '@masknet/shared-base': link:../../shared-base
       '@masknet/web3-constants': link:../../web3-constants
       '@masknet/web3-shared-base': link:../base
       '@onflow/types': 0.0.5
+      bignumber.js: 9.0.2
       react-use: 17.3.2
       urlcat: 2.0.4
 
   packages/web3-shared/solana:
     specifiers:
+      '@masknet/shared-base': workspace:*
       '@masknet/web3-constants': workspace:*
       '@masknet/web3-shared-base': workspace:*
+      '@solana/web3.js': 1.39.1
+      '@toruslabs/solana-embed': ^0.1.6
+      '@types/bs58': ^4.0.1
+      bignumber.js: 9.0.2
+      bs58: ^4.0.1
+      buffer: ^6.0.3
       react-use: ^17.3.2
       urlcat: ^2.0.4
     dependencies:
+      '@masknet/shared-base': link:../../shared-base
       '@masknet/web3-constants': link:../../web3-constants
       '@masknet/web3-shared-base': link:../base
+      '@solana/web3.js': 1.39.1
+      '@toruslabs/solana-embed': 0.1.6
+      '@types/bs58': 4.0.1
+      bignumber.js: 9.0.2
+      bs58: 4.0.1
+      buffer: 6.0.3
       react-use: 17.3.2
       urlcat: 2.0.4
 
@@ -1450,7 +1615,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
@@ -1465,7 +1630,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
@@ -1493,7 +1658,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
@@ -1510,7 +1675,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
@@ -1518,7 +1683,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
@@ -4002,8 +4167,8 @@ packages:
     resolution: {integrity: sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==}
     dev: true
 
-  /@blocto/fcl/0.0.78-alpha.8:
-    resolution: {integrity: sha512-2tu7yxBopuzFSFBtV2Beg9QRaJMGtZ5QlonKt0VZmtsOtGTs1OI6R7g/+MiddWKQIkfS+iQT/vab+hfDdSj9WA==}
+  /@blocto/fcl/0.0.78-alpha.10:
+    resolution: {integrity: sha512-BmJUF7S5PbM9poiAXs2eHif60F2ubcZGcvWmdPy2c4M/j9qZZcni4I4cHGfnmIY5hUuXGGNB7Lsq+vga/pmLtw==}
     dependencies:
       '@onflow/interaction': 0.0.11
       '@onflow/rlp': 0.0.3
@@ -4013,7 +4178,7 @@ packages:
       '@onflow/util-invariant': 0.0.0
       '@onflow/util-template': 0.0.1
       '@onflow/util-uid': 0.0.1
-      '@portto/sdk': 0.0.56-alpha.1
+      '@portto/sdk': 0.0.56-alpha.3
     transitivePeerDependencies:
       - google-protobuf
     dev: false
@@ -4022,8 +4187,8 @@ packages:
     resolution: {integrity: sha512-D7exTVYs9oQMF5FiasJV4zYlEVgwdoHFprdpw1lofRDZLw57ZYM9q8qxm/aKpMjdv3vsMN9DjfcnPrCmMZTbTA==}
     dev: false
 
-  /@blocto/protobuf/0.1.10:
-    resolution: {integrity: sha512-Pf08C5TVu9/CW0Nkk0U47Fk0J8N5lw+li6HQqfxh6m/NcClKj/Nvr5gr5o5kCxXxgXax5rmnwNEnC9Y4/mysZQ==}
+  /@blocto/protobuf/0.1.12:
+    resolution: {integrity: sha512-0ZvufAM9YSmvmEmGaWERXWZGQKN7oPd8nr9tJ6LqKephrMZG/9g2M3mGuIxB9xuCnKHrSWKoVMBXQgEzhAlB0Q==}
     dependencies:
       '@blocto/google-protobuf': 3.19.1
       '@improbable-eng/grpc-web': 0.12.0
@@ -4727,12 +4892,18 @@ packages:
       webextension-polyfill: 0.9.0
     dev: false
 
-  /@dimensiondev/kit/0.0.0-20220228054820-f2378be:
-    resolution: {integrity: sha512-B+5bj3+nTqwp4nigrwXxKK3iQeCn1tlFOuYeqzPCJY/wqMrM+GsAyYdw5BPjFwn5+9uiZ5xSZcnLhSF/6EgjhQ==, tarball: download/@dimensiondev/kit/0.0.0-20220228054820-f2378be/8352c3f70e1a38376b321dd05989ad48c80a260785561da3910520e28560b26b}
+  /@dimensiondev/kit/0.0.0-20220501022859-60d5533:
+    resolution: {integrity: sha512-Uff6um/tvEEm4eE8eAXxCM/NUhor2cpheS9EVwPCuPMybKd8cMZEsCroIi7xVAxqZsf9pejUW2oCYeLhCAe5TA==, tarball: download/@dimensiondev/kit/0.0.0-20220501022859-60d5533/961397d39ba5221918e28ad5e84b871d2d23c872f9fad0e014dfb4bf021d2697}
     dependencies:
       lodash-es: 4.17.21
     dev: false
 
+  /@dimensiondev/mask-wallet-core/0.1.0-20211013082857-eb62e5f:
+    resolution: {integrity: sha512-2d7v1/z9Khw4O7J7oBNKLBo7BONd7ZE2gpw34uHVtdG9i0aEz+LSRappgNTZyUZ/+TRJ7ZgAf+Dbeql1oPMvNA==, tarball: download/@dimensiondev/mask-wallet-core/0.1.0-20211013082857-eb62e5f/18071bcb96269e2a8175867950285a4b236a387c232e108ae0672a36649e33bc}
+    peerDependencies:
+      protobufjs: '>= 6.10 < 7'
+    dev: false
+
   /@dimensiondev/mask-wallet-core/0.1.0-20211013082857-eb62e5f_protobufjs@6.11.2:
     resolution: {integrity: sha512-2d7v1/z9Khw4O7J7oBNKLBo7BONd7ZE2gpw34uHVtdG9i0aEz+LSRappgNTZyUZ/+TRJ7ZgAf+Dbeql1oPMvNA==, tarball: download/@dimensiondev/mask-wallet-core/0.1.0-20211013082857-eb62e5f/18071bcb96269e2a8175867950285a4b236a387c232e108ae0672a36649e33bc}
     peerDependencies:
@@ -6090,18 +6261,6 @@ packages:
       '@jridgewell/sourcemap-codec': 1.4.11
     dev: true
 
-  /@json-rpc-tools/types/1.7.6:
-    resolution: {integrity: sha512-nDSqmyRNEqEK9TZHtM15uNnDljczhCUdBmRhpNZ95bIPKEDQ+nTDmGMFd2lLin3upc5h2VVVd9tkTDdbXUhDIQ==}
-    dependencies:
-      keyvaluestorage-interface: 1.0.0
-    dev: false
-
-  /@json-rpc-tools/utils/1.6.1:
-    resolution: {integrity: sha512-cNwP4QapAls+xATU8zLLqPYa9qCbgwEyWEK7vE1oH91b3LfbUYwHtiWZ1+rv0X/mh/9cWNTo2Oi2Sah/QX0WwA==}
-    dependencies:
-      '@json-rpc-tools/types': 1.7.6
-    dev: false
-
   /@leichtgewicht/ip-codec/2.0.3:
     resolution: {integrity: sha512-nkalE/f1RvRGChwBnEIoBfSEYOXnCRdleKuv6+lePbMDrMZXeDQnqak5XDOeBgrPPyPfAdcCu/B5z+v3VhplGg==}
     dev: true
@@ -6210,6 +6369,14 @@ packages:
       readable-stream: 2.3.7
     dev: false
 
+  /@metamask/obs-store/7.0.0:
+    resolution: {integrity: sha512-Tr61Uu9CGXkCg5CZwOYRMQERd+y6fbtrtLd/PzDTPHO5UJpmSbU+7MPcQK7d1DwZCOCeCIvhmZSUCvYliC8uGw==}
+    engines: {node: '>=12.0.0'}
+    dependencies:
+      '@metamask/safe-event-emitter': 2.0.0
+      through2: 2.0.5
+    dev: false
+
   /@metamask/safe-event-emitter/2.0.0:
     resolution: {integrity: sha512-/kSXhY692qiV1MXu6EeOZvg5nECLclxNXcKCxJ3cXQgYuRymRHpdx/t7JXfsK+JLjwA1e1c1/SBrlQYpusC29Q==}
     dev: false
@@ -6744,27 +6911,6 @@ packages:
     dev: false
     optional: true
 
-  /@pedrouid/environment/1.0.1:
-    resolution: {integrity: sha512-HaW78NszGzRZd9SeoI3JD11JqY+lubnaOx7Pewj5pfjqWXOEATpeKIFb9Z4t2WBUK2iryiXX3lzWwmYWgUL0Ug==}
-    dev: false
-
-  /@pedrouid/iso-crypto/1.1.0:
-    resolution: {integrity: sha512-twi+tW67XT0BSOv4rsegnGo4TQMhfFswS/GY3KhrjFiNw3z9x+cMkfO+itNe1JZghQxsxHuhifvfsnG814g1hQ==}
-    dependencies:
-      '@pedrouid/iso-random': 1.2.1
-      aes-js: 3.1.2
-      enc-utils: 3.0.0
-      hash.js: 1.1.7
-    dev: false
-
-  /@pedrouid/iso-random/1.2.1:
-    resolution: {integrity: sha512-C35NqYMmLsg61WDiEup4OwjRhgfZIcK4BL+Qg49xowHUJ+f7/LFZCO+TGuQqoXFAj1beKIOpUN33f0fqV7zneQ==}
-    dependencies:
-      '@pedrouid/environment': 1.0.1
-      enc-utils: 3.0.0
-      randombytes: 2.1.0
-    dev: false
-
   /@pmmmwh/react-refresh-webpack-plugin/0.5.5_a3gyllrqvxpec3fpybsrposvju:
     resolution: {integrity: sha512-RbG7h6TuP6nFFYKJwbcToA1rjC1FyPg25NR2noAZ0vKI+la01KTSRPkuVPE+U88jXv7javx2JHglUcL1MHcshQ==}
     engines: {node: '>= 10.13'}
@@ -6847,10 +6993,10 @@ packages:
   /@popperjs/core/2.11.5:
     resolution: {integrity: sha512-9X2obfABZuDVLCgPK9aX0a/x4jaOEweTTWE2+9sr0Qqqevj2Uv5XorvusThmc9XGYpS9yI+fhh8RTafBtGposw==}
 
-  /@portto/sdk/0.0.56-alpha.1:
-    resolution: {integrity: sha512-EqNS5k0FMWEESn0Fn1jU0ygFkhdhQpDdmP5RjN7cDMGaYcoCG69uEArL/m4dk0JRnQ/9rITtQffTH16KSycudQ==}
+  /@portto/sdk/0.0.56-alpha.3:
+    resolution: {integrity: sha512-0o+WDIIdck6qcCUhn0Q8tOneD2iEkgZgOBFlrT+Tl2ILDNT4K47P6rzxhELxu1ckFwF6Es7VYp0qs7wYa+41ng==}
     dependencies:
-      '@blocto/protobuf': 0.1.10
+      '@blocto/protobuf': 0.1.12
       '@improbable-eng/grpc-web': 0.14.1
       '@improbable-eng/grpc-web-node-http-transport': 0.14.1_p4qmepzqxnh62ysspkonijiajy
       '@onflow/rlp': 0.0.3
@@ -6875,6 +7021,17 @@ packages:
       eventemitter3: 4.0.7
     dev: false
 
+  /@project-serum/sol-wallet-adapter/0.2.6_@solana+web3.js@1.39.1:
+    resolution: {integrity: sha512-cpIb13aWPW8y4KzkZAPDgw+Kb+DXjCC6rZoH74MGm3I/6e/zKyGnfAuW5olb2zxonFqsYgnv7ev8MQnvSgJ3/g==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@solana/web3.js': ^1.5.0
+    dependencies:
+      '@solana/web3.js': 1.39.1
+      bs58: 4.0.1
+      eventemitter3: 4.0.7
+    dev: false
+
   /@protobufjs/aspromise/1.1.2:
     resolution: {integrity: sha1-m4sMxmPWaafY9vXQiToU00jzD78=}
     dev: false
@@ -7080,6 +7237,10 @@ packages:
       - utf-8-validate
     dev: false
 
+  /@socket.io/component-emitter/3.1.0:
+    resolution: {integrity: sha512-+9jVqKhRSpsc591z5vX+X5Yyw+he/HCB4iQ/RYxw35CEPaY1gnsNE43nf9n9AaYjAQrTiI/mOwKUKdUs9vf7Xg==}
+    dev: false
+
   /@solana/buffer-layout-utils/0.2.0:
     resolution: {integrity: sha512-szG4sxgJGktbuZYDg2FfNmkMi0DYQoVjN2h7ta1W1hPrwzarcFLBq9UpX1UjNXsNpT9dn+chgprtWGioUAr4/g==}
     engines: {node: '>= 10'}
@@ -9378,16 +9539,241 @@ packages:
       '@swc/core-win32-x64-msvc': 1.2.177
     dev: true
 
-  /@szmarczak/http-timer/1.1.2:
-    resolution: {integrity: sha512-XIB2XbzHTN6ieIjfIMV9hlVcfPU26s2vafYWQcZHWXHOxiaRZYEDKEwdl129Zyg50+foYV2jCgtrqSA6qNuNSA==}
-    engines: {node: '>=6'}
+  /@szmarczak/http-timer/1.1.2:
+    resolution: {integrity: sha512-XIB2XbzHTN6ieIjfIMV9hlVcfPU26s2vafYWQcZHWXHOxiaRZYEDKEwdl129Zyg50+foYV2jCgtrqSA6qNuNSA==}
+    engines: {node: '>=6'}
+    dependencies:
+      defer-to-connect: 1.1.3
+    dev: false
+
+  /@tootallnate/once/2.0.0:
+    resolution: {integrity: sha512-XCuKFP5PS55gnMVu3dty8KPatLqUoy/ZYzDzAGCQ8JNFCkLXzmI7vNHCR+XpbZaMWQK/vQubr7PkYq8g470J/A==}
+    engines: {node: '>= 10'}
+    dev: false
+
+  /@toruslabs/base-controllers/1.6.18:
+    resolution: {integrity: sha512-C/NGlVeB9x3H5c/+tX4ZTnFYpDzb9Sz+G/061s24Rubr+MRsjncaG7zN8C1y48D83JUvUkSJX9MAFt3m7aTFFA==}
+    peerDependencies:
+      '@babel/runtime': 7.x
+    dependencies:
+      '@toruslabs/broadcast-channel': 4.13.0
+      '@toruslabs/http-helpers': 2.2.0
+      '@toruslabs/openlogin-jrpc': 1.7.3
+      async-mutex: 0.3.2
+      bignumber.js: 9.0.2
+      bowser: 2.11.0
+      eth-rpc-errors: 4.0.3
+      ethereumjs-util: 7.1.4
+      json-rpc-random-id: 1.0.1
+      lodash: 4.17.21
+      loglevel: 1.8.0
+    transitivePeerDependencies:
+      - bufferutil
+      - supports-color
+      - utf-8-validate
+    dev: false
+
+  /@toruslabs/broadcast-channel/4.13.0:
+    resolution: {integrity: sha512-qPpVzLtqjiLRNW5C5xnCNwzWNBcGLSx/rC8C7UTP08Z9HnTIP3JxR+NbdtjR7/AjA2VemdcLQq3n+trJf9gUKQ==}
+    dependencies:
+      '@babel/runtime': 7.17.9
+      '@toruslabs/eccrypto': 1.1.8
+      '@toruslabs/metadata-helpers': 2.5.0_@babel+runtime@7.17.9
+      bowser: 2.11.0
+      detect-node: 2.1.0
+      keccak: 3.0.2
+      loglevel: 1.8.0
+      microtime: 3.0.0
+      oblivious-set: 1.1.1
+      p-queue: 6.6.2
+      rimraf: 3.0.2
+      socket.io-client: 4.5.1
+      unload: 2.3.1
+    transitivePeerDependencies:
+      - bufferutil
+      - supports-color
+      - utf-8-validate
+    dev: false
+
+  /@toruslabs/eccrypto/1.1.8:
+    resolution: {integrity: sha512-5dIrO2KVqvnAPOPfJ2m6bnjp9vav9GIcCZXiXRW/bJuIDRLVxJhVvRlleF4oaEZPq5yX5piHq5jVHagNNS0jOQ==}
+    dependencies:
+      acorn: 8.7.1
+      elliptic: 6.5.4
+      es6-promise: 4.2.8
+      nan: 2.15.0
+    optionalDependencies:
+      secp256k1: 3.8.0
+    dev: false
+
+  /@toruslabs/fetch-node-details/6.0.1:
+    resolution: {integrity: sha512-842lwbpo56ASlQrc7xdGMXYxuZVTNAwQQ8jDtbjFgDuehlimDELBcL5s4Bs1mC973alESy6aUMKSJFgQq6enkA==}
+    engines: {node: '>=14.17.0', npm: '>=6.x'}
+    peerDependencies:
+      '@babel/runtime': 7.x
+    dependencies:
+      web3-eth-contract: 1.7.3
+      web3-utils: 1.7.3
+    transitivePeerDependencies:
+      - supports-color
+    dev: false
+
+  /@toruslabs/http-helpers/2.2.0:
+    resolution: {integrity: sha512-xkzZZuE+DmWmJBTYneCrMJY24izNQCOdoJMpsXKQx20Va/rTQvNPbdkpx9LBf/pisk8jOwETNAfFQ8YTBc/bZw==}
+    engines: {node: '>=14.17.0', npm: '>=6.x'}
+    peerDependencies:
+      '@babel/runtime': 7.x
+    dependencies:
+      lodash.merge: 4.6.2
+      loglevel: 1.8.0
+    dev: false
+
+  /@toruslabs/http-helpers/2.2.0_@babel+runtime@7.17.9:
+    resolution: {integrity: sha512-xkzZZuE+DmWmJBTYneCrMJY24izNQCOdoJMpsXKQx20Va/rTQvNPbdkpx9LBf/pisk8jOwETNAfFQ8YTBc/bZw==}
+    engines: {node: '>=14.17.0', npm: '>=6.x'}
+    peerDependencies:
+      '@babel/runtime': 7.x
+    dependencies:
+      '@babel/runtime': 7.17.9
+      lodash.merge: 4.6.2
+      loglevel: 1.8.0
+    dev: false
+
+  /@toruslabs/http-helpers/3.0.0:
+    resolution: {integrity: sha512-nO6f1szn9SxWtbeAHGdgdIqCQe7PvA1dLFcjienk/cU/MxKVtVgI4IBhAZYt7SRxBI/NB+S2WHvqiIpCOu2Tuw==}
+    engines: {node: '>=14.17.0', npm: '>=6.x'}
+    peerDependencies:
+      '@babel/runtime': 7.x
+    dependencies:
+      lodash.merge: 4.6.2
+      loglevel: 1.8.0
+    dev: false
+
+  /@toruslabs/metadata-helpers/2.5.0_@babel+runtime@7.17.9:
+    resolution: {integrity: sha512-zhAAGhPcy5Fz68Zg3FXXmYKHHsFBCWsxXurSbdPMFldDrq9GwKChbAbvKBF0sz+juhEOO5gX1BbVah580YVobg==}
+    engines: {node: '>=14.17.0', npm: '>=6.x'}
+    peerDependencies:
+      '@babel/runtime': 7.x
+    dependencies:
+      '@babel/runtime': 7.17.9
+      '@toruslabs/eccrypto': 1.1.8
+      '@toruslabs/http-helpers': 2.2.0_@babel+runtime@7.17.9
+      elliptic: 6.5.4
+      json-stable-stringify: 1.0.1
+      keccak: 3.0.2
+    dev: false
+
+  /@toruslabs/openlogin-jrpc/1.7.3:
+    resolution: {integrity: sha512-xjixDKPLZN7T5hCjwmGTU58NttdZiHn3YlK6II2z4v8IifPUwoquYP08XfaE79ksxamgDYkGERf7bQGkV5Wf5w==}
+    peerDependencies:
+      '@babel/runtime': 7.x
+    dependencies:
+      '@toruslabs/openlogin-utils': 1.7.0
+      end-of-stream: 1.4.4
+      eth-rpc-errors: 4.0.3
+      events: 3.3.0
+      fast-safe-stringify: 2.1.1
+      once: 1.4.0
+      pump: 3.0.0
+      readable-stream: 3.6.0
+    dev: false
+
+  /@toruslabs/openlogin-jrpc/2.0.0:
+    resolution: {integrity: sha512-3UzNoxKHjy/uqCIsBwbyw9aYH6hu29q4n+uTDtWt0dO8Oic8FMGQ0pGW/NFyVywmL817jG7WNSvQ2OBWrLkN6Q==}
+    peerDependencies:
+      '@babel/runtime': 7.x
+    dependencies:
+      '@toruslabs/openlogin-utils': 2.0.0
+      end-of-stream: 1.4.4
+      eth-rpc-errors: 4.0.3
+      events: 3.3.0
+      fast-safe-stringify: 2.1.1
+      once: 1.4.0
+      pump: 3.0.0
+      readable-stream: 3.6.0
+    dev: false
+
+  /@toruslabs/openlogin-utils/1.7.0:
+    resolution: {integrity: sha512-y+j22v+h6EfzN4sfFnmtmMrcxEdkScdJOAgbtvX42BpUYOuFa1Tv0SZjdtsGGDE4g5szmL3rb9NGMHdBF1rZtg==}
+    peerDependencies:
+      '@babel/runtime': 7.x
+    dependencies:
+      base64url: 3.0.1
+      keccak: 3.0.2
+      randombytes: 2.1.0
+    dev: false
+
+  /@toruslabs/openlogin-utils/2.0.0:
+    resolution: {integrity: sha512-diPGgTtp3zk9sdSBp3hBLBylH6MYAdbgB/LPZq3eAgyuqJZW/A+Yy843UGX34GEiXDBu3S7+H8fubwycrDgKrg==}
+    peerDependencies:
+      '@babel/runtime': 7.x
     dependencies:
-      defer-to-connect: 1.1.3
+      base64url: 3.0.1
+      keccak: 3.0.2
+      randombytes: 2.1.0
     dev: false
 
-  /@tootallnate/once/2.0.0:
-    resolution: {integrity: sha512-XCuKFP5PS55gnMVu3dty8KPatLqUoy/ZYzDzAGCQ8JNFCkLXzmI7vNHCR+XpbZaMWQK/vQubr7PkYq8g470J/A==}
-    engines: {node: '>= 10'}
+  /@toruslabs/solana-embed/0.1.6:
+    resolution: {integrity: sha512-+WcF97qLTyW6xJ/oDmsLRc4KUN0w8/0pPx2QstcUV0OPgV3VON9LXgRFmSLXNvBVjFzie7aOWJFORUIL6Odqhw==}
+    engines: {node: '>=14.17.0', npm: '>=6.x'}
+    peerDependencies:
+      '@babel/runtime': 7.x
+    dependencies:
+      '@solana/web3.js': 1.39.1
+      '@toruslabs/base-controllers': 1.6.18
+      '@toruslabs/http-helpers': 2.2.0
+      '@toruslabs/openlogin-jrpc': 1.7.3
+      eth-rpc-errors: 4.0.3
+      fast-deep-equal: 3.1.3
+      is-stream: 2.0.1
+      lodash-es: 4.17.21
+      loglevel: 1.8.0
+      pump: 3.0.0
+    transitivePeerDependencies:
+      - bufferutil
+      - supports-color
+      - utf-8-validate
+    dev: false
+
+  /@toruslabs/torus-embed/1.23.2:
+    resolution: {integrity: sha512-Ianrk1tlEK7LuceBXVM+bVHgI5z0inEjuas1kp5i+Jd88JwVvZYfWjSFvwaSoeY+V4W7N3jvWXtN3IDqLo4ZhQ==}
+    engines: {node: '>=14.17.0', npm: '>=6.x'}
+    peerDependencies:
+      '@babel/runtime': 7.x
+    dependencies:
+      '@metamask/obs-store': 7.0.0
+      '@toruslabs/fetch-node-details': 6.0.1
+      '@toruslabs/http-helpers': 3.0.0
+      '@toruslabs/openlogin-jrpc': 2.0.0
+      '@toruslabs/torus.js': 6.0.0
+      create-hash: 1.2.0
+      end-of-stream: 1.4.4
+      eth-rpc-errors: 4.0.3
+      events: 3.3.0
+      fast-deep-equal: 3.1.3
+      is-stream: 2.0.1
+      lodash.merge: 4.6.2
+      loglevel: 1.8.0
+      once: 1.4.0
+      pump: 3.0.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: false
+
+  /@toruslabs/torus.js/6.0.0:
+    resolution: {integrity: sha512-H7/qC5HGPtYzRN2bQnA1KzmSwM+beYqzYdrq1gBSsNBvj2CS49BDl6SESCoGg8ndB83vlikA7KGykqMhdXd2gw==}
+    engines: {node: '>=14.17.0', npm: '>=6.x'}
+    peerDependencies:
+      '@babel/runtime': 7.x
+    dependencies:
+      '@toruslabs/eccrypto': 1.1.8
+      '@toruslabs/http-helpers': 3.0.0
+      bn.js: 5.2.0
+      elliptic: 6.5.4
+      json-stable-stringify: 1.0.1
+      keccak: 3.0.2
+      loglevel: 1.8.0
+      web3-utils: 1.7.3
     dev: false
 
   /@tsconfig/node10/1.0.8:
@@ -9475,8 +9861,7 @@ packages:
   /@types/bs58/4.0.1:
     resolution: {integrity: sha512-yfAgiWgVLjFCmRv8zAcOIHywYATEwiTVccTLnRp6UxTNavT55M9d/uhK3T03St/+8/z/wW+CRjGKUNmEqoHHCA==}
     dependencies:
-      base-x: 3.0.8
-    dev: false
+      base-x: 3.0.9
 
   /@types/chrome/0.0.136:
     resolution: {integrity: sha512-XDEiRhLkMd+SB7Iw3ZUIj/fov3wLd4HyTdLltVszkgl1dBfc3Rb7oPMVZ2Mz2TLqnF7Ow+StbR8E7r9lqpb4DA==}
@@ -9731,7 +10116,6 @@ packages:
 
   /@types/ethereum-blockies/0.1.0:
     resolution: {integrity: sha512-yQgqv9dqnFm9pHmCPUBPGu4NRIGSD/hihO+BwcuzxaxmMX3juD97vRvwUB3uY/MUBQ+7pWvUWDPYSAcZ1dIQDA==}
-    dev: false
 
   /@types/expect/1.20.4:
     resolution: {integrity: sha512-Q5Vn3yjTDyCMV50TB6VRIbQNxSE4OmZR86VSbGaNpfUolm0iePBB4KdEEHmxoY5sT2+2DIvXW0rvMDP2nHZ4Mg==}
@@ -9900,10 +10284,6 @@ packages:
     resolution: {integrity: sha512-0d5Wd09ItQWH1qFbEyQ7oTQ3GZrMfth5JkbN3EvTKLXcHLRDSXeLnlvlOn0wvxVIwK5o2M8JzP/OWz7T3NRsbw==}
     dev: true
 
-  /@types/lodash/4.14.181:
-    resolution: {integrity: sha512-n3tyKthHJbkiWhDZs3DkhkCzt2MexYHXlX0td5iMplyfwketaOeKboEVBqzceH7juqvEg3q5oUoBFxSLu7zFag==}
-    dev: false
-
   /@types/lodash/4.14.182:
     resolution: {integrity: sha512-/THyiqyQAP9AfARo4pF+aCGcyiQ94tX/Is2I7HofNRqoYLgN1PBoOWu2/zTA5zMxzP5EFutMtWtGAFRKUe961Q==}
 
@@ -9990,12 +10370,13 @@ packages:
 
   /@types/punycode/2.1.0:
     resolution: {integrity: sha512-PG5aLpW6PJOeV2fHRslP4IOMWn+G+Uq8CfnyJ+PDS8ndCbU+soO+fB3NKCKo0p/Jh2Y4aPaiQZsrOXFdzpcA6g==}
-    dev: false
+    dev: true
 
   /@types/qrcode/1.4.2:
     resolution: {integrity: sha512-7uNT9L4WQTNJejHTSTdaJhfBSCN73xtXaHFyBJ8TSwiLhe4PRuTue7Iph0s2nG9R/ifUaSnGhLUOZavlBEqDWQ==}
     dependencies:
       '@types/node': 17.0.34
+    dev: false
 
   /@types/qs/6.9.7:
     resolution: {integrity: sha512-FGa1F62FT09qcrueBA6qYTrJPVDzah9a+493+o2PCXsesWHIn27G98TsSMs3WPNbZIEj4+VJf6saSFpvD+3Zsw==}
@@ -10457,74 +10838,146 @@ packages:
       tiny-warning: 1.0.3
     dev: false
 
-  /@walletconnect/browser-utils/1.4.1:
-    resolution: {integrity: sha512-ONrkPSI/27o1Wj8kUwE0uUZFk0GDCDQBJy614GsrhcwuQwJEW/B+nXPQ+Ca/4WvQySM5hWVHp1gO1kozSUkh3A==}
+  /@walletconnect/browser-utils/1.7.8:
+    resolution: {integrity: sha512-iCL0XCWOZaABIc0lqA79Vyaybr3z26nt8mxiwvfrG8oaKUf5Y21Of4dj+wIXQ4Hhblre6SgDlU0Ffb39+1THOw==}
     dependencies:
-      '@walletconnect/types': 1.4.1
+      '@walletconnect/safe-json': 1.0.0
+      '@walletconnect/types': 1.7.8
+      '@walletconnect/window-getters': 1.0.0
+      '@walletconnect/window-metadata': 1.0.0
       detect-browser: 5.2.0
-      safe-json-utils: 1.0.0
-      window-getters: 1.0.0
-      window-metadata: 1.0.0
     dev: false
 
-  /@walletconnect/client/1.4.1:
-    resolution: {integrity: sha512-JRW+9+j9LwszY76/WcIumEiLmhX7eidorH9SFFmI2pFfbrhB6KLe87FaA106kxwZUyWKOLZ6jVV4d1urYSdEwA==}
+  /@walletconnect/client/1.7.8:
+    resolution: {integrity: sha512-pBroM6jZAaUM0SoXJZg5U7aPTiU3ljQAw3Xh/i2pxFDeN/oPKao7husZ5rdxS5xuGSV6YpqqRb0RxW1IeoR2Pg==}
     dependencies:
-      '@walletconnect/core': 1.4.1
-      '@walletconnect/iso-crypto': 1.4.1
-      '@walletconnect/types': 1.4.1
-      '@walletconnect/utils': 1.4.1
+      '@walletconnect/core': 1.7.8
+      '@walletconnect/iso-crypto': 1.7.8
+      '@walletconnect/types': 1.7.8
+      '@walletconnect/utils': 1.7.8
     transitivePeerDependencies:
       - bufferutil
       - utf-8-validate
     dev: false
 
-  /@walletconnect/core/1.4.1:
-    resolution: {integrity: sha512-NzWvhk4akI2uhORUxMDMS/8yAdfp+nzvb5QdTE0eTD0WOrK16qAfYLSU/IjFc2J2lqhuPVxfO2XV7QoxgCXfwA==}
+  /@walletconnect/core/1.7.8:
+    resolution: {integrity: sha512-9xcQ0YNf9JUFb0YOX1Mpy4Yojt+6w2yQz/0aIEyj2X/s9D71NW0fTYsMcdhkLOI7mn2cqVbx2t1lRvdgqsbrSQ==}
     dependencies:
-      '@walletconnect/socket-transport': 1.4.1
-      '@walletconnect/types': 1.4.1
-      '@walletconnect/utils': 1.4.1
+      '@walletconnect/socket-transport': 1.7.8
+      '@walletconnect/types': 1.7.8
+      '@walletconnect/utils': 1.7.8
     transitivePeerDependencies:
       - bufferutil
       - utf-8-validate
     dev: false
 
-  /@walletconnect/iso-crypto/1.4.1:
-    resolution: {integrity: sha512-rzfqM/DFhzNxBriMCU4DOarPkH+Brgll+2a2YeO6zHgMlwZtBKi5mMgzBwbDC3XygOvKbcRTB9G9hr8uYn+i5g==}
+  /@walletconnect/crypto/1.0.2:
+    resolution: {integrity: sha512-+OlNtwieUqVcOpFTvLBvH+9J9pntEqH5evpINHfVxff1XIgwV55PpbdvkHu6r9Ib4WQDOFiD8OeeXs1vHw7xKQ==}
+    dependencies:
+      '@walletconnect/encoding': 1.0.1
+      '@walletconnect/environment': 1.0.0
+      '@walletconnect/randombytes': 1.0.2
+      aes-js: 3.1.2
+      hash.js: 1.1.7
+    dev: false
+
+  /@walletconnect/encoding/1.0.1:
+    resolution: {integrity: sha512-8opL2rs6N6E3tJfsqwS82aZQDL3gmupWUgmvuZ3CGU7z/InZs3R9jkzH8wmYtpbq0sFK3WkJkQRZFFk4BkrmFA==}
+    dependencies:
+      is-typedarray: 1.0.0
+      typedarray-to-buffer: 3.1.5
+    dev: false
+
+  /@walletconnect/environment/1.0.0:
+    resolution: {integrity: sha512-4BwqyWy6KpSvkocSaV7WR3BlZfrxLbJSLkg+j7Gl6pTDE+U55lLhJvQaMuDVazXYxcjBsG09k7UlH7cGiUI5vQ==}
+    dev: false
+
+  /@walletconnect/iso-crypto/1.7.8:
+    resolution: {integrity: sha512-Qo6qDcMG0Ac+9fpWE0h/oE55NHLk6eM2vlXpWlQDN/me7RZGrkvk+LXsAkQ3UiYPEiPfq4eswcyRWC9AcrAscg==}
+    dependencies:
+      '@walletconnect/crypto': 1.0.2
+      '@walletconnect/types': 1.7.8
+      '@walletconnect/utils': 1.7.8
+    dev: false
+
+  /@walletconnect/jsonrpc-types/1.0.0:
+    resolution: {integrity: sha512-11QXNq5H1PKZk7bP8SxgmCw3HRaDuPOVE+wObqEvmhc7OWYUZqfuaaMb+OXGRSOHL3sbC+XHfdeCxFTMXSFyng==}
+    dependencies:
+      keyvaluestorage-interface: 1.0.0
+    dev: false
+
+  /@walletconnect/jsonrpc-utils/1.0.0:
+    resolution: {integrity: sha512-qUHbKUK6sHeHn67qtHZoLoYk5hS6x1arTPjKDRkY93/6Fx+ZmNIpdm1owX3l6aYueyegJ7mz43FpvYHUqJ8xcw==}
+    dependencies:
+      '@walletconnect/environment': 1.0.0
+      '@walletconnect/jsonrpc-types': 1.0.0
+    dev: false
+
+  /@walletconnect/mobile-registry/1.4.0:
+    resolution: {integrity: sha512-ZtKRio4uCZ1JUF7LIdecmZt7FOLnX72RPSY7aUVu7mj7CSfxDwUn6gBuK6WGtH+NZCldBqDl5DenI5fFSvkKYw==}
+    deprecated: 'Deprecated in favor of dynamic registry available from: https://github.com/walletconnect/walletconnect-registry'
+    dev: false
+
+  /@walletconnect/qrcode-modal/1.7.8:
+    resolution: {integrity: sha512-LqNJMLWO+ljvoRSdq8tcEslW0imKrrb+ugs3bw4w/jEI1FSJzVeinEsgVpyaMv8wsUcyTcSCXSkXpT1SXHtcpw==}
+    dependencies:
+      '@walletconnect/browser-utils': 1.7.8
+      '@walletconnect/mobile-registry': 1.4.0
+      '@walletconnect/types': 1.7.8
+      copy-to-clipboard: 3.3.1
+      preact: 10.4.1
+      qrcode: 1.4.4
+    dev: false
+
+  /@walletconnect/randombytes/1.0.2:
+    resolution: {integrity: sha512-ivgOtAyqQnN0rLQmOFPemsgYGysd/ooLfaDA/ACQ3cyqlca56t3rZc7pXfqJOIETx/wSyoF5XbwL+BqYodw27A==}
     dependencies:
-      '@pedrouid/iso-crypto': 1.1.0
-      '@walletconnect/types': 1.4.1
-      '@walletconnect/utils': 1.4.1
+      '@walletconnect/encoding': 1.0.1
+      '@walletconnect/environment': 1.0.0
+      randombytes: 2.1.0
+    dev: false
+
+  /@walletconnect/safe-json/1.0.0:
+    resolution: {integrity: sha512-QJzp/S/86sUAgWY6eh5MKYmSfZaRpIlmCJdi5uG4DJlKkZrHEF7ye7gA+VtbVzvTtpM/gRwO2plQuiooIeXjfg==}
     dev: false
 
-  /@walletconnect/socket-transport/1.4.1:
-    resolution: {integrity: sha512-/5Mhu4bu3tS52LqTlmmjx5x/N89XqbuT0YMobvQ+k/m+VqSeBDntqIjwBt7XiFlCbrUTq3/yTajavGFxWFB6pA==}
+  /@walletconnect/socket-transport/1.7.8:
+    resolution: {integrity: sha512-bqEjLxfSzG79v2OT7XVOZoyUkg6g3yng0fURrdLusWs42fYHWnrSrIZDejFn8N5PiZk5R2edrggkQ7w0VUUAfw==}
     dependencies:
-      '@walletconnect/types': 1.4.1
-      '@walletconnect/utils': 1.4.1
-      ws: 7.3.0
+      '@walletconnect/types': 1.7.8
+      '@walletconnect/utils': 1.7.8
+      ws: 7.5.3
     transitivePeerDependencies:
       - bufferutil
       - utf-8-validate
     dev: false
 
-  /@walletconnect/types/1.4.1:
-    resolution: {integrity: sha512-lzS9NbXjVb5N+W/UnCZAflxjLtYepUi4ev1IeFozSvr/cWxAhEe/sjixe7WEIpYklW27kfBhKccMH/KjUoRC7w==}
+  /@walletconnect/types/1.7.8:
+    resolution: {integrity: sha512-0oSZhKIrtXRJVP1jQ0EDTRtotQY6kggGjDcmm/LLQBKnOZXdPeo0sPkV/7DjT5plT3O7Cjc6JvuXt9WOY0hlCA==}
     dev: false
 
-  /@walletconnect/utils/1.4.1:
-    resolution: {integrity: sha512-JrVjcXmWVcU02fmVNZFBpJ48f84qyar24CF7szGv+k9ZxvU9J7XkM+Fic4790Dt3DaWhOzS9/eBUa+BEZcBbNw==}
+  /@walletconnect/utils/1.7.8:
+    resolution: {integrity: sha512-DSpfH6Do0TQmdrgzu+SyjVhupVjN0WEMvNWGK9K4VlSmLFpCWfme7qxzrvuxBZ47gDqs1kGWvjyJmviWqvOnAg==}
     dependencies:
-      '@json-rpc-tools/utils': 1.6.1
-      '@walletconnect/browser-utils': 1.4.1
-      '@walletconnect/types': 1.4.1
+      '@walletconnect/browser-utils': 1.7.8
+      '@walletconnect/encoding': 1.0.1
+      '@walletconnect/jsonrpc-utils': 1.0.0
+      '@walletconnect/types': 1.7.8
       bn.js: 4.11.8
-      enc-utils: 3.0.0
       js-sha3: 0.8.0
       query-string: 6.13.5
     dev: false
 
+  /@walletconnect/window-getters/1.0.0:
+    resolution: {integrity: sha512-xB0SQsLaleIYIkSsl43vm8EwETpBzJ2gnzk7e0wMF3ktqiTGS6TFHxcprMl5R44KKh4tCcHCJwolMCaDSwtAaA==}
+    dev: false
+
+  /@walletconnect/window-metadata/1.0.0:
+    resolution: {integrity: sha512-9eFvmJxIKCC3YWOL97SgRkKhlyGXkrHwamfechmqszbypFspaSk+t2jQXAEU7YClHF6Qjw5eYOmy1//zFi9/GA==}
+    dependencies:
+      '@walletconnect/window-getters': 1.0.0
+    dev: false
+
   /@webassemblyjs/ast/1.11.1:
     resolution: {integrity: sha512-ukBh14qFLjxTQNTXocdyksN5QdM28S1CxHt2rdskFyL+xFV7VremuBLVbmCePj+URalXBENx/9Lm7lnhihtCSw==}
     dependencies:
@@ -10928,7 +11381,6 @@ packages:
     resolution: {integrity: sha512-Xx54uLJQZ19lKygFXOWsscKUbsBZW0CPykPhVQdhIeIwrbPmJzqeASDInc8nKBnp/JT6igTs82qPXz069H8I/A==}
     engines: {node: '>=0.4.0'}
     hasBin: true
-    dev: true
 
   /address/1.1.2:
     resolution: {integrity: sha512-aT6camzM4xEA54YVJYSqxz1kv4IHnQZRtThJJHhUMRExaU5spC7jX5ugSwTaTgJliIgs4VhZOk7htClvQ/LmRA==}
@@ -11540,6 +11992,12 @@ packages:
     resolution: {integrity: sha512-csOlWGAcRFJaI6m+F2WKdnMKr4HhdhFVBk0H/QbJFMCr+uO2kwohwXQPxw/9OCxp05r5ghVBFSyioixx3gfkNQ==}
     dev: false
 
+  /async-mutex/0.3.2:
+    resolution: {integrity: sha512-HuTK7E7MT7jZEh1P9GtRW9+aTWiDWWi9InbZ5hjxrnRa39KS4BW04+xLBhYNS2aXhHUIKZSw3gj4Pn1pj+qGAA==}
+    dependencies:
+      tslib: 2.4.0
+    dev: false
+
   /async-settle/1.0.0:
     resolution: {integrity: sha1-HQqRS7Aldb7IqPOnTlCA9yssDGs=}
     engines: {node: '>= 0.10'}
@@ -11548,7 +12006,7 @@ packages:
     dev: true
 
   /async/1.5.2:
-    resolution: {integrity: sha1-7GphrlZIDAw8skHJVhjiCJL5Zyo=}
+    resolution: {integrity: sha512-nSVgobk4rv61R9PUSDtYt7mPVB2olxNR5RWJcAsH676/ef11bUZwvu7+RGYrYauVdDPcO519v68wRhXQtxsV9w==}
     dev: false
 
   /async/2.6.3:
@@ -11628,7 +12086,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
@@ -11662,7 +12120,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
@@ -11709,7 +12167,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
@@ -11719,7 +12177,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
@@ -11730,7 +12188,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
@@ -11741,7 +12199,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
@@ -11751,7 +12209,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
@@ -11763,28 +12221,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
@@ -11792,7 +12250,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
@@ -11804,7 +12262,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
@@ -11817,7 +12275,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
@@ -11936,7 +12394,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
@@ -11959,7 +12417,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
@@ -12160,11 +12618,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:
@@ -12172,11 +12630,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
@@ -12186,19 +12644,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
@@ -12210,7 +12668,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
@@ -12226,7 +12684,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
@@ -12235,26 +12693,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
@@ -12264,13 +12722,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
@@ -12291,7 +12749,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
@@ -12301,7 +12759,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
@@ -12311,7 +12769,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
@@ -12320,7 +12778,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
@@ -12333,20 +12791,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
@@ -12354,19 +12812,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
@@ -12374,7 +12832,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
@@ -12384,13 +12842,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
@@ -12471,7 +12929,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
@@ -12485,14 +12943,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
@@ -12504,7 +12962,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
@@ -12520,7 +12978,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
@@ -12529,7 +12987,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
@@ -12572,12 +13030,12 @@ packages:
     resolution: {integrity: sha512-Rl/1AWP4J/zRrk54hhlxH4drNxPJXYUaKffODVI53/dAsV4t9fBxyxYKAVPU1XBHxYwOWP9h9H0hM2MVw4YfJA==}
     dependencies:
       safe-buffer: 5.2.1
+    dev: false
 
   /base-x/3.0.9:
     resolution: {integrity: sha512-H7JU6iBHTal1gp56aKoaa//YUxEaAOUiydvrV/pILqIHXTtqxSkATOnDA2u+jZ/61sD+L/412+7kzXRtWukhpQ==}
     dependencies:
       safe-buffer: 5.2.1
-    dev: false
 
   /base/0.11.2:
     resolution: {integrity: sha512-5T6P4xPgpp0YDFvSWwEZ4NoE3aM4QBQXDzmVbraCkFj8zHM+mba8SyqB5DbZWyR7mYHo6Y7BdQo3MoA4m0TeQg==}
@@ -12608,6 +13066,11 @@ packages:
     resolution: {integrity: sha512-ld3cCNMeXt4uJXmLZBHFGMvVpK9KsLVEhPpFRXnvSVAqABKbuNZg/+dsq3NuM+wxFLb/UrVkz7m1ciWmkMfTbg==}
     dev: false
 
+  /base64url/3.0.1:
+    resolution: {integrity: sha512-ir1UPr3dkwexU7FdV8qBBbNDRUhMmIekYMFZfi+C/sLNnRESKPl23nB9b2pltqfOQNnGzsDdId90AEtG5tCx4A==}
+    engines: {node: '>=6.0.0'}
+    dev: false
+
   /batch-processor/1.0.0:
     resolution: {integrity: sha1-dclcMrdI4IUNEMKxaPa9vpiRrOg=}
     dev: true
@@ -12686,7 +13149,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:
@@ -12711,6 +13174,13 @@ packages:
       randombytes: 2.1.0
     dev: false
 
+  /bip66/1.1.5:
+    resolution: {integrity: sha512-nemMHz95EmS38a26XbbdxIYj5csHd3RMP3H5bwQknX0WYHF01qhpufP42mLOwVICuH2JmhIhXiWs89MfUGL7Xw==}
+    dependencies:
+      safe-buffer: 5.2.1
+    dev: false
+    optional: true
+
   /blakejs/1.1.1:
     resolution: {integrity: sha512-bLG6PHOCZJKNshTjGRBvET0vTciwQE6zFKOKKXPDJfwFBd4Ac0yBfPZqcGvGJap50l7ktvlpFqc2jGVaUgbJgg==}
 
@@ -12869,6 +13339,10 @@ packages:
       text-encoding-utf-8: 1.0.2
     dev: false
 
+  /bowser/2.11.0:
+    resolution: {integrity: sha512-AlcaJBi/pqqJBIQ8U9Mcpc9i8Aqxn88Skv5d+xBX006BY5u8N3mGLHa5Lgppa7L/HfwgwLgZ6NYs+Ag6uUmJRA==}
+    dev: false
+
   /boxen/5.1.2:
     resolution: {integrity: sha512-9gYgQKXx+1nP8mP7CzFyaUARhg7D3n1dF/FnErWmu9l6JvGpNUN278h0aSb+QjoiKSWG+iZ3uHrcqk0qrY9RQQ==}
     engines: {node: '>=10'}
@@ -13023,8 +13497,8 @@ packages:
     resolution: {integrity: sha512-WHVocJYavUwVgVViC0ORikPHQquXwVh939TaelZ4WDqpWgTX/FsGhl/+P4qBUAGcRvtOgDgC+xftNWWp2RUTAQ==}
     hasBin: true
     dependencies:
-      caniuse-lite: 1.0.30001332
-      electron-to-chromium: 1.4.106
+      caniuse-lite: 1.0.30001341
+      electron-to-chromium: 1.4.137
     dev: false
 
   /browserslist/4.20.2:
@@ -13058,9 +13532,9 @@ packages:
     dev: true
 
   /bs58/4.0.1:
-    resolution: {integrity: sha1-vhYedsNU9veIrkBx9j806MTwpCo=}
+    resolution: {integrity: sha512-Ok3Wdf5vOIlBrgCvTq96gBkJw+JUEzdBgyaza5HLtPm7yTHkjRy8+JzNyHF7BHa0bNWOQIp3m5YF0nnFcOIKLw==}
     dependencies:
-      base-x: 3.0.8
+      base-x: 3.0.9
 
   /bs58check/2.1.2:
     resolution: {integrity: sha512-0TS1jicxdU09dwJMNZtVAfzPi6Q6QeN0pM1Fkzrjn+XYHvzMKPU3pHVpva+769iNVSfIYWf7LJ6WR+BuuMf8cA==}
@@ -13075,6 +13549,17 @@ packages:
       node-int64: 0.4.0
     dev: true
 
+  /buffer-alloc-unsafe/1.1.0:
+    resolution: {integrity: sha512-TEM2iMIEQdJ2yjPJoSIsldnleVaAk1oW3DBVUykyOLsEsFmEc9kn+SFFPz+gl54KQNxlDnAwCXosOS9Okx2xAg==}
+    dev: false
+
+  /buffer-alloc/1.2.0:
+    resolution: {integrity: sha512-CFsHQgjtW1UChdXgbyJGtnm+O/uLQeZdtbDo8mfUgYXCHSM1wgrVxXm6bSyrUuErEb+4sYVGCzASBRot7zyrow==}
+    dependencies:
+      buffer-alloc-unsafe: 1.1.0
+      buffer-fill: 1.0.0
+    dev: false
+
   /buffer-crc32/0.2.13:
     resolution: {integrity: sha1-DTM+PwDqxQqhRUq9MO+MKl2ackI=}
     dev: false
@@ -13084,6 +13569,10 @@ packages:
     engines: {node: '>=0.4.0'}
     dev: true
 
+  /buffer-fill/1.0.0:
+    resolution: {integrity: sha512-T7zexNBwiiaCOGDg9xNX9PBmjrubblRkENuptryuI64URkXDFum9il/JGL8Lm8wYfAXpredVXXZz7eMHilimiQ==}
+    dev: false
+
   /buffer-from/0.1.2:
     resolution: {integrity: sha512-RiWIenusJsmI2KcvqQABB83tLxCByE3upSP8QU3rJDMVFGPWLvPQJt/O1Su9moRWeH7d+Q2HYb68f6+v+tw2vg==}
     dev: false
@@ -13141,7 +13630,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
 
@@ -13323,6 +13812,7 @@ packages:
 
   /caniuse-lite/1.0.30001332:
     resolution: {integrity: sha512-10T30NYOEQtN6C11YGg411yebhvpnC6Z102+B95eAsN0oB6KUs01ivE8u+G6FMIRtIrVlYXhL+LUwQ3/hXwDWw==}
+    dev: true
 
   /caniuse-lite/1.0.30001341:
     resolution: {integrity: sha512-2SodVrFFtvGENGCv0ChVJIDQ0KPaS1cg7/qtfMaICgeMolDdo/Z2OD32F0Aq9yl6F4YFwGPBS5AaPqNYiW4PoA==}
@@ -13422,7 +13912,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
@@ -15153,7 +15643,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:
@@ -15229,7 +15719,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
@@ -15375,7 +15865,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
@@ -15515,6 +16005,16 @@ packages:
       tslib: 2.4.0
     dev: true
 
+  /drbg.js/1.0.1:
+    resolution: {integrity: sha1-Pja2xCs3BDgjzbwzLVjzHiRFSAs=}
+    engines: {node: '>=0.10'}
+    dependencies:
+      browserify-aes: 1.2.0
+      create-hash: 1.2.0
+      create-hmac: 1.1.7
+    dev: false
+    optional: true
+
   /duplexer/0.1.2:
     resolution: {integrity: sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg==}
     dev: false
@@ -15583,6 +16083,7 @@ packages:
 
   /electron-to-chromium/1.4.106:
     resolution: {integrity: sha512-ZYfpVLULm67K7CaaGP7DmjyeMY4naxsbTy+syVVxT6QHI1Ww8XbJjmr9fDckrhq44WzCrcC5kH3zGpdusxwwqg==}
+    dev: true
 
   /electron-to-chromium/1.4.137:
     resolution: {integrity: sha512-0Rcpald12O11BUogJagX3HsCN3FE83DSqWjgXoHo5a72KUKMSfI39XBgJpgNNxS9fuGzytaFjE06kZkiVFy2qA==}
@@ -15619,7 +16120,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
@@ -15661,13 +16162,6 @@ packages:
       hoist-non-react-statics: 3.3.2
     dev: true
 
-  /enc-utils/3.0.0:
-    resolution: {integrity: sha512-e57t/Z2HzWOLwOp7DZcV0VMEY8t7ptWwsxyp6kM2b2zrk6JqIpXxzkruHAMiBsy5wg9jp/183GdiRXCvBtzsYg==}
-    dependencies:
-      is-typedarray: 1.0.0
-      typedarray-to-buffer: 3.1.5
-    dev: false
-
   /encode-utf8/1.0.3:
     resolution: {integrity: sha512-ucAnuBEhUK4boH2HjVYG5Q2mQyPorvv0u/ocS+zhdw0S8AlHYY+GOFhP1Gio5z4icpP2ivFSvhtFjQi8+T9ppw==}
     dev: false
@@ -15715,6 +16209,20 @@ packages:
       - utf-8-validate
     dev: false
 
+  /engine.io-client/6.2.2:
+    resolution: {integrity: sha512-8ZQmx0LQGRTYkHuogVZuGSpDqYZtCM/nv8zQ68VZ+JkOpazJ7ICdsSpaO6iXwvaU30oFg5QJOJWj8zWqhbKjkQ==}
+    dependencies:
+      '@socket.io/component-emitter': 3.1.0
+      debug: 4.3.4
+      engine.io-parser: 5.0.4
+      ws: 8.2.3
+      xmlhttprequest-ssl: 2.0.0
+    transitivePeerDependencies:
+      - bufferutil
+      - supports-color
+      - utf-8-validate
+    dev: false
+
   /engine.io-parser/2.2.1:
     resolution: {integrity: sha512-x+dN/fBH8Ro8TFwJ+rkB2AmuVw9Yu2mockR/p3W8f8YtExwFgDvBDi0GWyb4ZLkpahtDGZgtr3zLovanJghPqg==}
     dependencies:
@@ -15725,6 +16233,11 @@ packages:
       has-binary2: 1.0.3
     dev: false
 
+  /engine.io-parser/5.0.4:
+    resolution: {integrity: sha512-+nVFp+5z1E3HcToEnO7ZIj3g+3k9389DvWtvJZz0T6/eOCPIyyxehFcedoYrZQrp0LgQbD9pPXhpMBKMd5QURg==}
+    engines: {node: '>=10.0.0'}
+    dev: false
+
   /enhanced-resolve/3.3.0:
     resolution: {integrity: sha512-2qbxE7ek3YxPJ1ML6V+satHkzHpJQKWkRHmRx6mfAoW59yP8YH8BFplbegSP+u2hBd6B6KCOpvJQ3dZAP+hkpg==}
     engines: {node: '>=4.3.0 <5.0.0 || >=5.10'}
@@ -15936,7 +16449,6 @@ packages:
       string.prototype.trimend: 1.0.5
       string.prototype.trimstart: 1.0.5
       unbox-primitive: 1.0.2
-    dev: true
 
   /es-array-method-boxes-properly/1.0.0:
     resolution: {integrity: sha512-wd6JXUmyHmt8T5a2xreUwKcGPq6f1f+WwIJkijUqiGcJz1qqnZgP6XIK+QyIWU5lT7imeNxUll48bziG+TSYcA==}
@@ -16384,7 +16896,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
 
@@ -16449,7 +16961,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
@@ -16462,7 +16974,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
@@ -16479,7 +16991,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:
@@ -17107,7 +17619,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
@@ -17252,7 +17764,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
@@ -17403,7 +17915,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
@@ -17839,7 +18351,6 @@ packages:
       define-properties: 1.1.4
       es-abstract: 1.20.1
       functions-have-names: 1.2.3
-    dev: true
 
   /functional-red-black-tree/1.0.1:
     resolution: {integrity: sha1-GwqzvVU7Kg1jmdKcDj6gslIHgyc=}
@@ -18387,7 +18898,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
@@ -18614,7 +19125,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
@@ -19777,7 +20288,6 @@ packages:
 
   /isarray/2.0.5:
     resolution: {integrity: sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==}
-    dev: true
 
   /isexe/2.0.0:
     resolution: {integrity: sha1-6PvzdNxVb/iUehDcsFctYz8s+hA=}
@@ -19977,7 +20487,7 @@ packages:
     dependencies:
       '@types/connect': 3.4.35
       '@types/express-serve-static-core': 4.17.28
-      '@types/lodash': 4.14.181
+      '@types/lodash': 4.14.182
       '@types/node': 17.0.34
       '@types/ws': 7.4.7
       commander: 2.20.3
@@ -21260,7 +21770,6 @@ packages:
 
   /lodash.merge/4.6.2:
     resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==}
-    dev: true
 
   /lodash.set/4.3.2:
     resolution: {integrity: sha1-2HV7HagH3eJIFrDWqEvqGnYjCyM=}
@@ -21738,6 +22247,14 @@ packages:
       picomatch: 2.3.1
     dev: true
 
+  /microtime/3.0.0:
+    resolution: {integrity: sha512-SirJr7ZL4ow2iWcb54bekS4aWyBQNVcEDBiwAz9D/sTgY59A+uE8UJU15cp5wyZmPBwg/3zf8lyCJ5NUe1nVlQ==}
+    engines: {node: '>= 4.0.0'}
+    dependencies:
+      node-addon-api: 1.7.2
+      node-gyp-build: 3.9.0
+    dev: false
+
   /miller-rabin/4.0.1:
     resolution: {integrity: sha512-115fLhvZVqWwHPbClyntxEVfVDfl9DLLTuJvq3g2O/Oxi8AiNouAHvDSzHS0viUJc+V5vm3eq91Xwqn9dp4jRA==}
     hasBin: true
@@ -22314,6 +22831,10 @@ packages:
       tslib: 2.3.1
     dev: true
 
+  /node-addon-api/1.7.2:
+    resolution: {integrity: sha512-ibPK3iA+vaY1eEjESkQkM0BbCqFOaZMiXRTtdB0u7b4djtY6JnsjvPdUHVMg6xQt3B8fpTTWHI9A+ADjM9frzg==}
+    dev: false
+
   /node-addon-api/2.0.2:
     resolution: {integrity: sha512-Ntyt4AIXyaLIuMHF6IOoTakB3K+RWxwtsHNRxllEoA6vPwP9o4866g6YWDLUdnucilZhmkxiHwHr11gAENw+QA==}
 
@@ -22374,6 +22895,11 @@ packages:
     engines: {node: '>= 6.13.0'}
     dev: true
 
+  /node-gyp-build/3.9.0:
+    resolution: {integrity: sha512-zLcTg6P4AbcHPq465ZMFNXx7XpKKJh+7kkN699NiQWisR2uWYOWNWqRHAmbnmKiL4e9aLSlmy5U7rEMUXV59+A==}
+    hasBin: true
+    dev: false
+
   /node-gyp-build/4.2.3:
     resolution: {integrity: sha512-MN6ZpzmfNCRM+3t57PTJHgHyw/h4OWnZ6mR8P5j/uZtqQr46RRuDE/P+g3n0YR/AiYXeWixZZzaip77gdICfRg==}
     hasBin: true
@@ -22671,6 +23197,10 @@ packages:
     resolution: {integrity: sha512-eJJDYkhJFFbBBAxeh8xW+weHlkI28n2ZdQV/J/DNfWfSKlGEf2xcfAbZTv3riEXHAhL9SVOTs2pRmXiSTf78xg==}
     dev: true
 
+  /oblivious-set/1.1.1:
+    resolution: {integrity: sha512-Oh+8fK09mgGmAshFdH6hSVco6KZmd1tTwNFWj35OvzdmJTMZtAkbn05zar2iG3v6sDs1JLEtOiBGNb6BHwkb2w==}
+    dev: false
+
   /oboe/2.1.5:
     resolution: {integrity: sha1-VVQoTFQ6ImbXo48X4HOCH73jk80=}
     dependencies:
@@ -22933,6 +23463,14 @@ packages:
       aggregate-error: 3.1.0
     dev: true
 
+  /p-queue/6.6.2:
+    resolution: {integrity: sha512-RwFpb72c/BhQLEXIZ5K2e+AhgNVmIejGlTgiB9MzZ0e93GRvqZ7uSi0dvRF7/XIXDeNkra2fNHBxTyPDGySpjQ==}
+    engines: {node: '>=8'}
+    dependencies:
+      eventemitter3: 4.0.7
+      p-timeout: 3.2.0
+    dev: false
+
   /p-retry/3.0.1:
     resolution: {integrity: sha512-XE6G4+YTTkT2a0UWb2kjZe8xNwf8bIbnqpc/IS/idOBVhyves0mK5OJgeocjx7q5pvX/6m23xuzVPYT1uGM73w==}
     engines: {node: '>=6'}
@@ -22960,7 +23498,6 @@ packages:
     engines: {node: '>=8'}
     dependencies:
       p-finally: 1.0.0
-    dev: true
 
   /p-try/1.0.0:
     resolution: {integrity: sha1-y8ec26+P1CKOE/Yh8rGiN8GyB7M=}
@@ -23273,6 +23810,11 @@ packages:
     engines: {node: '>=4'}
     dev: true
 
+  /pngjs/3.4.0:
+    resolution: {integrity: sha512-NCrCHhWmnQklfH4MtJMRjZ2a8c80qXeMlQMv2uVp9ISJMTt562SbGd6n2oq0PaPgKm7Z6pL9E2UlLIhC+SHL3w==}
+    engines: {node: '>=4.0.0'}
+    dev: false
+
   /pngjs/5.0.0:
     resolution: {integrity: sha512-40QW5YalBNfQo5yRYmiw7Yz6TKKVr3h6970B2YE+3fQpsWcrbj1PzJgxeJ19DRQjhMbKPIuMY8rFaXc8moolVw==}
     engines: {node: '>=10.13.0'}
@@ -23439,6 +23981,10 @@ packages:
       shortid: 2.2.16
     dev: false
 
+  /preact/10.4.1:
+    resolution: {integrity: sha512-WKrRpCSwL2t3tpOOGhf2WfTpcmbpxaWtDbdJdKdjd0aEiTkvOmS4NBkG6kzlaAHI9AkQ3iVqbFWM3Ei7mZ4o1Q==}
+    dev: false
+
   /prelude-ls/1.1.2:
     resolution: {integrity: sha1-IZMqVJ9eUv/ZqCf1cOBL5iqX2lQ=}
     engines: {node: '>= 0.8.0'}
@@ -23766,6 +24312,20 @@ packages:
     resolution: {integrity: sha512-HM7yY8O2ilqhmULxGMpcHSF1EhJJ9yBj8gvDEuZ6M+KGJ0YY2hKpnXvRD+hZPLrDVck3ExIGhmPtSdcjC+guuw==}
     dev: false
 
+  /qrcode/1.4.4:
+    resolution: {integrity: sha512-oLzEC5+NKFou9P0bMj5+v6Z40evexeE29Z9cummZXZ9QXyMr3lphkURzxjXgPJC5azpxcshoDWV1xE46z+/c3Q==}
+    engines: {node: '>=4'}
+    hasBin: true
+    dependencies:
+      buffer: 5.7.1
+      buffer-alloc: 1.2.0
+      buffer-from: 1.1.2
+      dijkstrajs: 1.0.2
+      isarray: 2.0.5
+      pngjs: 3.4.0
+      yargs: 13.3.2
+    dev: false
+
   /qrcode/1.5.0:
     resolution: {integrity: sha512-9MgRpgVc+/+47dFvQeD6U2s0Z92EsKzcHogtum4QB+UNd025WOJSHvn/hjk9xmzj7Stj95CyUAs31mrjxliEsQ==}
     engines: {node: '>=10.13.0'}
@@ -25261,10 +25821,6 @@ packages:
       events: 3.3.0
     dev: false
 
-  /safe-json-utils/1.0.0:
-    resolution: {integrity: sha512-n0hJm6BgX8wk3G+AS8MOQnfcA8dfE6ZMUfwkHUNx69YxPlU3HDaZTHXWto35Z+C4mOjK1odlT95WutkGC+0Idw==}
-    dev: false
-
   /safe-regex/1.1.0:
     resolution: {integrity: sha1-QKNmnzsHfR6UPURinhV91IAjvy4=}
     dependencies:
@@ -25364,6 +25920,21 @@ packages:
   /scrypt-js/3.0.1:
     resolution: {integrity: sha512-cdwTTnqPu0Hyvf5in5asVdZocVDTNRmR7XEcJuIzMjJeSHybHl7vpB66AzwTaIg6CLSbtjcxc8fqcySfnTkccA==}
 
+  /secp256k1/3.8.0:
+    resolution: {integrity: sha512-k5ke5avRZbtl9Tqx/SA7CbY3NF6Ro+Sj9cZxezFzuBlLDmyqPiL8hJJ+EmzD8Ig4LUDByHJ3/iPOVoRixs/hmw==}
+    engines: {node: '>=4.0.0'}
+    dependencies:
+      bindings: 1.5.0
+      bip66: 1.1.5
+      bn.js: 4.12.0
+      create-hash: 1.2.0
+      drbg.js: 1.0.1
+      elliptic: 6.5.4
+      nan: 2.15.0
+      safe-buffer: 5.2.1
+    dev: false
+    optional: true
+
   /secp256k1/4.0.2:
     resolution: {integrity: sha512-UDar4sKvWAksIlfX3xIaQReADn+WFnHvbVujpcbr+9Sf/69odMwy2MUsz5CKLQgX9nsIyrjuxL2imVyoNHa3fg==}
     engines: {node: '>=10.0.0'}
@@ -25843,6 +26414,20 @@ packages:
       - utf-8-validate
     dev: false
 
+  /socket.io-client/4.5.1:
+    resolution: {integrity: sha512-e6nLVgiRYatS+AHXnOnGi4ocOpubvOUCGhyWw8v+/FxW8saHkinG6Dfhi9TU0Kt/8mwJIAASxvw6eujQmjdZVA==}
+    engines: {node: '>=10.0.0'}
+    dependencies:
+      '@socket.io/component-emitter': 3.1.0
+      debug: 4.3.4
+      engine.io-client: 6.2.2
+      socket.io-parser: 4.2.0
+    transitivePeerDependencies:
+      - bufferutil
+      - supports-color
+      - utf-8-validate
+    dev: false
+
   /socket.io-parser/3.3.2:
     resolution: {integrity: sha512-FJvDBuOALxdCI9qwRrO/Rfp9yfndRtc1jSgVgV8FDraihmSP/MLGD5PEuJrNfjALvcQ+vMDM/33AWOYP/JSjDg==}
     dependencies:
@@ -25853,6 +26438,16 @@ packages:
       - supports-color
     dev: false
 
+  /socket.io-parser/4.2.0:
+    resolution: {integrity: sha512-tLfmEwcEwnlQTxFB7jibL/q2+q8dlVQzj4JdRLJ/W/G1+Fu9VSxCx1Lo+n1HvXxKnM//dUuD0xgiA7tQf57Vng==}
+    engines: {node: '>=10.0.0'}
+    dependencies:
+      '@socket.io/component-emitter': 3.1.0
+      debug: 4.3.4
+    transitivePeerDependencies:
+      - supports-color
+    dev: false
+
   /sockjs-client/1.6.0_supports-color@6.1.0:
     resolution: {integrity: sha512-qVHJlyfdHFht3eBFZdKEXKTlb7I4IV41xnVNo8yUKA1UHcPJwgW2SvTq9LhnjjCywSkSK7c/e4nghU0GOoMCRQ==}
     engines: {node: '>=12'}
@@ -26351,7 +26946,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:
@@ -26663,7 +27258,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
@@ -26951,7 +27546,6 @@ packages:
     dependencies:
       readable-stream: 2.3.7
       xtend: 4.0.2
-    dev: true
 
   /through2/3.0.2:
     resolution: {integrity: sha512-enaDQ4MUyP2W6ZyT6EsMzqBPZaM/avg8iuo+l2d3QCs0J+6RaqkHV/2/lOwDTueBHeJ/2LG9lrLW3d5rWPucuQ==}
@@ -27408,7 +28002,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
@@ -27439,7 +28033,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
@@ -27450,7 +28044,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
@@ -27929,6 +28523,13 @@ packages:
     resolution: {integrity: sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==}
     engines: {node: '>= 10.0.0'}
 
+  /unload/2.3.1:
+    resolution: {integrity: sha512-MUZEiDqvAN9AIDRbbBnVYVvfcR6DrjCqeU2YQMmliFZl9uaBUjTkhuDQkBiyAy8ad5bx1TXVbqZ3gg7namsWjA==}
+    dependencies:
+      '@babel/runtime': 7.17.9
+      detect-node: 2.1.0
+    dev: false
+
   /unpipe/1.0.0:
     resolution: {integrity: sha1-sr9O6FFKrmFltIF4KdIbLvSZBOw=}
     engines: {node: '>= 0.8'}
@@ -28705,12 +29306,14 @@ packages:
 
   /webextension-polyfill-ts/0.22.0:
     resolution: {integrity: sha512-3P33ClMwZ/qiAT7UH1ROrkRC1KM78umlnPpRhdC/292UyoTTW9NcjJEqDsv83HbibcTB6qCtpVeuB2q2/oniHQ==}
+    deprecated: This project has moved to @types/webextension-polyfill
     dependencies:
       webextension-polyfill: 0.7.0
     dev: false
 
   /webextension-polyfill-ts/0.25.0:
     resolution: {integrity: sha512-ikQhwwHYkpBu00pFaUzIKY26I6L87DeRI+Q6jBT1daZUNuu8dSrg5U9l/ZbqdaQ1M/TTSPKeAa3kolP5liuedw==}
+    deprecated: This project has moved to @types/webextension-polyfill
     dependencies:
       webextension-polyfill: 0.7.0
     dev: false
@@ -29350,16 +29953,6 @@ packages:
     resolution: {integrity: sha512-JcKqAHLPxcdb9KM49dufGXn2x3ssnfjbcaQdLlfZsL9rH9wgDQjUtDxbo8NE0F6SFvydeu1VhZe7hZuHsB2/pw==}
     dev: true
 
-  /window-getters/1.0.0:
-    resolution: {integrity: sha512-xyvEFq3x+7dCA7NFhqOmTMk0fPmmAzCUYL2svkw2LGBaXXQLRP0lFnfXHzysri9WZNMkzp/FD1u0w2Qc7Co+JA==}
-    dev: false
-
-  /window-metadata/1.0.0:
-    resolution: {integrity: sha512-eYoXsZ9X4J+6xZgbHhNAatSR5bCtT409q8B+2Ol9ySx7qsdtgVZcNfox4qszFmKlGsFtT2b1Tcmcy69bRMObcg==}
-    dependencies:
-      window-getters: 1.0.0
-    dev: false
-
   /window-size/0.1.0:
     resolution: {integrity: sha1-VDjNLqk7IC76Ohn+iIeu58lPnJ0=}
     engines: {node: '>= 0.8.0'}
@@ -29490,8 +30083,8 @@ packages:
         optional: true
     dev: false
 
-  /ws/7.3.0:
-    resolution: {integrity: sha512-iFtXzngZVXPGgpTlP1rBqsUK82p9tKqsWRPg5L56egiljujJT3vGAYnHANvFxBieXrTFavhzhxW52jnaWV+w2w==}
+  /ws/7.4.6:
+    resolution: {integrity: sha512-YmhHDO4MzaDLB+M9ym/mDA5z0naX8j7SIlT8f8z+I0VtzsRbekxEutHSme7NPS2qE8StCYQNUnfWdXta/Yu85A==}
     engines: {node: '>=8.3.0'}
     peerDependencies:
       bufferutil: ^4.0.1
@@ -29503,8 +30096,8 @@ packages:
         optional: true
     dev: false
 
-  /ws/7.4.6:
-    resolution: {integrity: sha512-YmhHDO4MzaDLB+M9ym/mDA5z0naX8j7SIlT8f8z+I0VtzsRbekxEutHSme7NPS2qE8StCYQNUnfWdXta/Yu85A==}
+  /ws/7.5.3:
+    resolution: {integrity: sha512-kQ/dHIzuLrS6Je9+uv81ueZomEwH0qVYstcAQ4/Z93K8zeko9gtAbttJWzoC5ukqXY1PpoouV3+VSOqEAFt5wg==}
     engines: {node: '>=8.3.0'}
     peerDependencies:
       bufferutil: ^4.0.1
@@ -29544,6 +30137,19 @@ packages:
       utf-8-validate: 5.0.9
     dev: false
 
+  /ws/8.2.3:
+    resolution: {integrity: sha512-wBuoj1BDpC6ZQ1B7DWQBYVLphPWkm8i9Y0/3YdHjHKHiohOJ1ws+3OccDWtH+PoC9DZD5WOTrJvNbWvjS6JWaA==}
+    engines: {node: '>=10.0.0'}
+    peerDependencies:
+      bufferutil: ^4.0.1
+      utf-8-validate: ^5.0.2
+    peerDependenciesMeta:
+      bufferutil:
+        optional: true
+      utf-8-validate:
+        optional: true
+    dev: false
+
   /ws/8.5.0:
     resolution: {integrity: sha512-BWX0SWVgLPzYwF8lTzEy1egjhS4S4OEAHfsO8o65WOVsrnSRGaSiUaa9e0ggGlkMTtBlmOpEXiie9RUcBO86qg==}
     engines: {node: '>=10.0.0'}
@@ -29637,6 +30243,11 @@ packages:
     engines: {node: '>=0.4.0'}
     dev: false
 
+  /xmlhttprequest-ssl/2.0.0:
+    resolution: {integrity: sha512-QKxVRxiRACQcVuQEYFsI1hhkrMlrXHPegbbd1yn9UHOmRxY+si12nQYzri3vbzt8VdTTRviqcKxcyllFas5z2A==}
+    engines: {node: '>=0.4.0'}
+    dev: false
+
   /xmlhttprequest/1.8.0:
     resolution: {integrity: sha1-Z/4HXFwk/vOfnWX197f+dRcZaPw=}
     engines: {node: '>=0.4.0'}
diff --git a/tsconfig.json b/tsconfig.json
index 6b86438f9685..244345e31bde 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -92,6 +92,7 @@
       "@masknet/plugin-debugger": ["./packages/plugins/Debugger/src"],
       "@masknet/plugin-example": ["./packages/plugins/example/src"],
       "@masknet/plugin-file-service": ["./packages/plugins/FileService/src"],
+      "@masknet/plugin-evm": ["./packages/plugins/./src"],
       "@masknet/plugin-flow": ["./packages/plugins/Flow/src"],
       "@masknet/plugin-rss3": ["./packages/plugins/RSS3/src"],
       "@masknet/plugin-solana": ["./packages/plugins/Solana/src"],

From a6ad83d283cb91d481b1c6335f2f66b47c4d3ee6 Mon Sep 17 00:00:00 2001
From: UncleBill <billbill290@gmail.com>
Date: Mon, 30 May 2022 10:46:52 +0800
Subject: [PATCH 14/17] fixup! feat: EVM migration and Web3 Infra (#6371)
 (#6378)

---
 .../evm/TokenPicker/SelectTokenDialog.tsx     |  6 +-
 .../src/contexts/evm/TokenPicker/index.tsx    | 76 +++----------------
 2 files changed, 13 insertions(+), 69 deletions(-)

diff --git a/packages/shared/src/contexts/evm/TokenPicker/SelectTokenDialog.tsx b/packages/shared/src/contexts/evm/TokenPicker/SelectTokenDialog.tsx
index 3c2beb15a25a..5931f21a8f84 100644
--- a/packages/shared/src/contexts/evm/TokenPicker/SelectTokenDialog.tsx
+++ b/packages/shared/src/contexts/evm/TokenPicker/SelectTokenDialog.tsx
@@ -48,11 +48,11 @@ export interface PickTokenOptions {
     blacklist?: string[]
     tokens?: Array<FungibleToken<ChainId, SchemaType>>
     selectedTokens?: string[]
+    onSubmit?(token: FungibleToken<ChainId, SchemaType.Native | SchemaType.ERC20>): void
 }
 
 export interface SelectTokenDialogProps extends PickTokenOptions {
     open: boolean
-    onSelect?(token: FungibleToken<ChainId, SchemaType.Native | SchemaType.ERC20>): void
     onClose?(): void
 }
 
@@ -65,7 +65,7 @@ export const SelectTokenDialog: FC<SelectTokenDialogProps> = ({
     whitelist,
     blacklist = EMPTY_LIST,
     selectedTokens = EMPTY_LIST,
-    onSelect,
+    onSubmit,
     onClose,
     title,
 }) => {
@@ -88,7 +88,7 @@ export const SelectTokenDialog: FC<SelectTokenDialogProps> = ({
             <DialogContent classes={{ root: classes.content }}>
                 <FungibleTokenList
                     classes={{ list: classes.list, placeholder: classes.placeholder }}
-                    onSelect={onSelect}
+                    onSelect={onSubmit}
                     tokens={tokens ?? []}
                     whitelist={whitelist}
                     blacklist={
diff --git a/packages/shared/src/contexts/evm/TokenPicker/index.tsx b/packages/shared/src/contexts/evm/TokenPicker/index.tsx
index 61d2b95a53b2..5d5541feb7d1 100644
--- a/packages/shared/src/contexts/evm/TokenPicker/index.tsx
+++ b/packages/shared/src/contexts/evm/TokenPicker/index.tsx
@@ -1,72 +1,16 @@
-import { defer, DeferTuple } from '@dimensiondev/kit'
-import { EMPTY_LIST } from '@masknet/shared-base'
 import type { FungibleToken } from '@masknet/web3-shared-base'
 import type { ChainId, SchemaType } from '@masknet/web3-shared-evm'
-import { createContext, FC, PropsWithChildren, useCallback, useContext, useMemo, useState } from 'react'
-import { PickTokenOptions, SelectTokenDialog } from './SelectTokenDialog'
+import { useContext } from 'react'
+import { createUITaskManager } from '../../UITaskManager'
+import { PickTokenOptions, SelectTokenDialog, SelectTokenDialogProps } from './SelectTokenDialog'
 
-interface ContextOptions {
-    pickToken: (
-        options: PickTokenOptions,
-    ) => Promise<FungibleToken<ChainId, SchemaType.Native | SchemaType.ERC20> | null>
-}
-const TokenPickerContext = createContext<ContextOptions>(null!)
-
-type PickerDeferTuple = DeferTuple<FungibleToken<ChainId, SchemaType.Native | SchemaType.ERC20> | null>
-
-interface Task {
-    id: number
-    promise: PickerDeferTuple[0]
-    resolve: PickerDeferTuple[1]
-    reject: PickerDeferTuple[2]
-    pickerOptions: PickTokenOptions
-}
-
-let id = 0
-export const TokenPickerProvider: FC<PropsWithChildren<{}>> = ({ children }) => {
-    const [tasks, setTasks] = useState<Task[]>(EMPTY_LIST)
-
-    const removeTask = useCallback((task: Task) => {
-        setTasks((list) => list.filter((t) => t !== task))
-    }, [])
-
-    const contextValue = useMemo(() => {
-        return {
-            pickToken: (options: PickTokenOptions) => {
-                const [promise, resolve, reject] = defer<FungibleToken<
-                    ChainId,
-                    SchemaType.Native | SchemaType.ERC20
-                > | null>()
-                id += 1
-                const newTask: Task = { id, promise, resolve, reject, pickerOptions: options }
-                setTasks((list) => [...list, newTask])
-                return promise
-            },
-        }
-    }, [])
-
-    return (
-        <TokenPickerContext.Provider value={contextValue}>
-            {children}
-            {tasks.map((task) => (
-                <SelectTokenDialog
-                    open
-                    key={task.id}
-                    {...task.pickerOptions}
-                    onSelect={(token) => {
-                        task.resolve(token)
-                        removeTask(task)
-                    }}
-                    onClose={() => {
-                        task.resolve(null)
-                        removeTask(task)
-                    }}
-                />
-            ))}
-        </TokenPickerContext.Provider>
-    )
-}
+const { TaskManagerContext, TaskManagerProvider: TokenPickerProvider } = createUITaskManager<
+    PickTokenOptions,
+    FungibleToken<ChainId, SchemaType.Native | SchemaType.ERC20>,
+    SelectTokenDialogProps
+>(SelectTokenDialog)
 
 export const usePickToken = () => {
-    return useContext(TokenPickerContext).pickToken
+    return useContext(TaskManagerContext).show
 }
+export { TokenPickerProvider }

From dbace05e1c17e41b594b20cc756128acf4310f17 Mon Sep 17 00:00:00 2001
From: Jack Works <jackworks@protonmail.com>
Date: Mon, 30 May 2022 11:47:43 +0800
Subject: [PATCH 15/17] docs(i18n): sync i18n files from Crowdin (#6376)

* New translations en-US.json (Japanese)
docs(i18n): sync translation en-US.json for Japanese

* New translations en-US.json (Korean)
docs(i18n): sync translation en-US.json for Korean

* New translations en-US.json (Chinese Simplified)
docs(i18n): sync translation en-US.json for Chinese Simplified

* New translations en-US.json (Chinese Traditional)
docs(i18n): sync translation en-US.json for Chinese Traditional

* New translations en-US.json (Quenya)
docs(i18n): sync translation en-US.json for Quenya
---
 packages/mask/shared-ui/locales/ja-JP.json  |  21 ----
 packages/mask/shared-ui/locales/ko-KR.json  |  43 ---------
 packages/mask/shared-ui/locales/qya-AA.json | 101 ++++++++++----------
 packages/mask/shared-ui/locales/zh-CN.json  |  47 ---------
 packages/mask/shared-ui/locales/zh-TW.json  |  36 -------
 5 files changed, 50 insertions(+), 198 deletions(-)

diff --git a/packages/mask/shared-ui/locales/ja-JP.json b/packages/mask/shared-ui/locales/ja-JP.json
index a17925a94eff..4b48d2b94990 100644
--- a/packages/mask/shared-ui/locales/ja-JP.json
+++ b/packages/mask/shared-ui/locales/ja-JP.json
@@ -103,26 +103,6 @@
     "plugin_wallet_on_connect_in_firefox": "接続する",
     "plugin_wallet_return_mobile_wallet_options": "モバイルウォレットのオプションに戻る",
     "plugin_wallet_view_qr_code": "QR コードを表示する",
-    "plugin_red_packet_display_name": "プラグイン: 投げ銭",
-    "plugin_red_packet_split_mode": "分割モード",
-    "plugin_red_packet_average": "平均",
-    "plugin_red_packet_random": "ランダム",
-    "plugin_red_packet_shares": "株数",
-    "plugin_red_packet_best_wishes": "幸運を祈ります！",
-    "plugin_red_packet_create_new": "新しい投げ銭を作成",
-    "plugin_red_packet_claim": "受け取る",
-    "plugin_red_packet_refund": "無効",
-    "plugin_red_packet_select_existing": "既存の投げ銭を選択",
-    "plugin_red_packet_attached_message": "メッセージを追加",
-    "plugin_red_packet_from": "送信者：{{name}}",
-    "plugin_red_packet_description_expired": "期限切れです",
-    "plugin_red_packet_description_refunded": "無効です",
-    "plugin_red_packet_description_refund": "{{balance}}{{symbol}}を受け取れます",
-    "plugin_red_packet_description_empty": "期限切れです",
-    "plugin_red_packet_description_broken": "破損しています",
-    "plugin_red_packet_description_failover": "{{amount}} {{symbol}} / {{shares}} 株",
-    "plugin_red_packet_amount_per_share": "1株当たりの金額",
-    "plugin_red_packet_send_symbol": "{{symbol}} を送る",
     "plugin_red_packet_create_with_token": "{{symbol}} で投げ銭を作成する",
     "plugin_gitcoin_select_a_token": "トークンを選択する",
     "plugin_gitcoin_insufficient_balance": "{{symbol}} の残高が足りません",
@@ -336,7 +316,6 @@
     "plugin_collectible_invalid_reserve_price": "無効な予約価格",
     "plugin_collectible_place_a_bid": "入札する",
     "plugin_collectible_make_an_offer": "オファーする",
-    "plugin_collectible_approved_by_open_sea": "このボックスをチェックすることで、このアイテムが OpenSea によってレビューまたは承認されていないことを認めます。",
     "plugin_collectible_legal_text": "このボックスをチェックすることで、OpenSea の<terms>利用規約</terms>に同意します。",
     "plugin_snapshot_info_title": "情報",
     "plugin_snapshot_info_strategy": "戦略家",
diff --git a/packages/mask/shared-ui/locales/ko-KR.json b/packages/mask/shared-ui/locales/ko-KR.json
index cbc72eac9dfa..750f0d43b02a 100644
--- a/packages/mask/shared-ui/locales/ko-KR.json
+++ b/packages/mask/shared-ui/locales/ko-KR.json
@@ -213,48 +213,6 @@
     "plugin_wallet_connect_wallet": "월렛 연결",
     "plugin_wallet_name_placeholder": "1-12 자 입력하세요",
     "plugin_wallet_cancel_sign": "서명이 실패되었습니다.",
-    "plugin_red_packet_display_name": "플러그인: 빨간 백",
-    "plugin_red_packet_erc20_tab_title": "토큰",
-    "plugin_red_packet_erc721_tab_title": "수집품",
-    "plugin_red_packet_erc721_insufficient_balance": "잔액 부족",
-    "plugin_red_packet_details": "행운 드랍 디테일",
-    "plugin_red_packet_split_mode": "분할 모드",
-    "plugin_red_packet_average": "평균",
-    "plugin_red_packet_random": "렌덤",
-    "plugin_red_packet_shares": "공유",
-    "plugin_red_packet_best_wishes": "행운을 빌어요!",
-    "plugin_red_packet_create_new": "새로운 것 만들기",
-    "plugin_red_packet_claim": "수령",
-    "plugin_red_packet_claiming": "수령 중...",
-    "plugin_red_packet_refund": "반환",
-    "plugin_red_packet_empty": "비어 있음",
-    "plugin_red_packet_data_broken": "데이터 손상으로 인해 레드 패킷을 보낼 수 없습니다. {{duration}} 후 자산을 인출할 수 있습니다.",
-    "plugin_red_packet_refunding": "환급 중",
-    "plugin_red_packet_select_existing": "기존 빨간 백 선택",
-    "plugin_red_packet_share_message_official_account": "{{network}} 네트워크에서 @{{sender}}의 레트 패킷을 받았어요. @{{account}} (mask.io) 팔로우하고 레드 패킷을 받으세요.\n#mask_io #LuckyDrop\n{{payload}}",
-    "plugin_red_packet_share_message_not_twitter": "{{network}} 에서 @{{sender}} 의 레드 패킷을 클레임했습니다.\n{{payload}}",
-    "plugin_red_packet_nft_share_foreshow_message": "@{{network}} 네트워크에서 @{{sender}} 레트 패킷을 보내고 있습니다. @{{account}} (mask.io) 팔로우하고 NFT 레드 패킷을 받으세요.\n#mask_io #LuckyDrop\n{{payload}}",
-    "plugin_red_packet_nft_share_foreshow_message_not_twitter": "@{{network}} 네트워크에서 @{{sender}} NFT 레트 패킷을 보내고 있습니다. \n{{payload}}",
-    "plugin_red_packet_nft_share_claimed_message": "{{network}} 네트워크에서 @{{sender}}의 NFT 레트 패킷을 받았어요. @{{account}} (mask.io) 팔로우하고 NFT 레드 패킷을 받으세요.\n#mask_io #LuckyDrop\n{{payload}}",
-    "plugin_red_packet_nft_share_claimed_message_not_twitter": "{{network}} 에서 @{{sender}} 의 NFT 레드 패킷을 클레임했습니다.\n{{payload}}",
-    "plugin_red_packet_nft_tip": "이것은 NFT 레드 패킷입니다.",
-    "plugin_red_packet_attached_message": "첨부 메시지",
-    "plugin_red_packet_from": "보낸사람: {{name}}",
-    "plugin_red_packet_description_claimed": "이미 수령하였습니다.",
-    "plugin_red_packet_description_expired": "이 빨간 백 이미 만료되었습니다.",
-    "plugin_red_packet_description_refunded": "이 빨간 백 이미 반환되었습니다.",
-    "plugin_red_packet_description_refund": "{{balance}} {{symbol} 반환 가능합니다.",
-    "plugin_red_packet_description_empty": "빈 빨간 백입니다.",
-    "plugin_red_packet_description_broken": "파손된 빨간 백입니다.",
-    "plugin_red_packet_description_failover": "{{name}} / {{shares}}에서  / {{total}} {{symbol}} 공유합니다.",
-    "plugin_red_packet_amount_per_share": "공유 총액",
-    "plugin_red_packet_send_symbol": "{{symbol}} 보내기",
-    "plugin_red_packet_amount_total": "총액",
-    "plugin_red_packet_next": "다음",
-    "plugin_red_packet_back": "뒤로",
-    "plugin_red_packet_hint": "레드 패킷이 공유된 후 24시간 후에 나머지 잔액을 인출할 수 있습니다.",
-    "plugin_red_packet_token": "토큰",
-    "plugin_red_packet_message_label": "제목",
     "plugin_red_packet_create_with_token": "{{symbol}} 으로 빨간 백 만드는 중",
     "plugin_red_packet_nft_account_name": "지갑 계정",
     "plugin_gitcoin_select_a_token": "토큰 선택",
@@ -513,7 +471,6 @@
     "plugin_collectible_invalid_reserve_price": "무효한 최저 경매 가격입니다.",
     "plugin_collectible_place_a_bid": "입찰",
     "plugin_collectible_make_an_offer": "오퍼하기",
-    "plugin_collectible_approved_by_open_sea": "이 백스를 체크하면 OpenSea에서 이 항목을 리뷰받거나 승인받지 않았다는 것을 알 수 있습니다.",
     "plugin_collectible_legal_text": "이 박스를 체크하면 OpenSea의 <terms>항목과 서비스</terms> 동의합니다.",
     "plugin_cryptoartai_description_title": "설명",
     "plugin_cryptoartai_edition": "Edition of",
diff --git a/packages/mask/shared-ui/locales/qya-AA.json b/packages/mask/shared-ui/locales/qya-AA.json
index 5cccbfe12ae0..e6c89b9856a8 100644
--- a/packages/mask/shared-ui/locales/qya-AA.json
+++ b/packages/mask/shared-ui/locales/qya-AA.json
@@ -344,57 +344,56 @@
     "plugin_wallet_name_placeholder": "crwdns4705:0crwdne4705:0",
     "plugin_wallet_cancel_sign": "crwdns4709:0crwdne4709:0",
     "plugin_nft_avatar_recommend_feature_description": "crwdns16626:0crwdne16626:0",
-    "plugin_red_packet_create": "crwdns11873:0crwdne11873:0",
-    "plugin_red_packet_display_name": "crwdns4711:0crwdne4711:0",
     "application_hint": "crwdns16628:0crwdne16628:0",
-    "plugin_red_packet_claimed": "crwdns10205:0crwdne10205:0",
-    "plugin_red_packet_erc20_tab_title": "crwdns8143:0crwdne8143:0",
-    "plugin_red_packet_erc721_tab_title": "crwdns8145:0crwdne8145:0",
-    "plugin_red_packet_name": "crwdns16234:0crwdne16234:0",
-    "plugin_red_packet_recommend_feature_description": "crwdns16544:0crwdne16544:0",
-    "plugin_red_packet_description": "crwdns16236:0crwdne16236:0",
-    "plugin_red_packet_erc721_insufficient_balance": "crwdns8147:0crwdne8147:0",
-    "plugin_red_packet_details": "crwdns9071:0crwdne9071:0",
-    "plugin_red_packet_split_mode": "crwdns4713:0crwdne4713:0",
-    "plugin_red_packet_average": "crwdns4715:0crwdne4715:0",
-    "plugin_red_packet_random": "crwdns4717:0crwdne4717:0",
-    "plugin_red_packet_shares": "crwdns4719:0crwdne4719:0",
-    "plugin_red_packet_best_wishes": "crwdns4721:0crwdne4721:0",
-    "plugin_red_packet_create_new": "crwdns4723:0crwdne4723:0",
-    "plugin_red_packet_claim": "crwdns4725:0crwdne4725:0",
-    "plugin_red_packet_claiming": "crwdns4727:0crwdne4727:0",
-    "plugin_red_packet_refund": "crwdns4729:0crwdne4729:0",
-    "plugin_red_packet_empty": "crwdns4731:0crwdne4731:0",
-    "plugin_red_packet_data_broken": "crwdns7999:0{{duration}}crwdne7999:0",
-    "plugin_red_packet_refunding": "crwdns4733:0crwdne4733:0",
-    "plugin_red_packet_select_existing": "crwdns4735:0crwdne4735:0",
-    "plugin_red_packet_share_unclaimed_message_official_account": "crwdns14614:0{{sender}}crwdnd14614:0{{network}}crwdnd14614:0{{account}}crwdnd14614:0{{payload}}crwdne14614:0",
-    "plugin_red_packet_share_unclaimed_message_not_twitter": "crwdns14616:0{{sender}}crwdnd14616:0{{network}}crwdnd14616:0{{payload}}crwdne14616:0",
-    "plugin_red_packet_share_message_official_account": "crwdns9175:0{{sender}}crwdnd9175:0{{network}}crwdnd9175:0{{account}}crwdnd9175:0{{payload}}crwdne9175:0",
-    "plugin_red_packet_share_message_not_twitter": "crwdns9177:0{{sender}}crwdnd9177:0{{network}}crwdnd9177:0{{payload}}crwdne9177:0",
-    "plugin_red_packet_nft_share_foreshow_message": "crwdns8151:0{{sender}}crwdnd8151:0{{network}}crwdnd8151:0{{account}}crwdnd8151:0{{payload}}crwdne8151:0",
-    "plugin_red_packet_nft_share_foreshow_message_not_twitter": "crwdns9011:0{{sender}}crwdnd9011:0{{network}}crwdnd9011:0{{payload}}crwdne9011:0",
-    "plugin_red_packet_nft_share_claimed_message": "crwdns8153:0{{sender}}crwdnd8153:0{{network}}crwdnd8153:0{{account}}crwdnd8153:0{{payload}}crwdne8153:0",
-    "plugin_red_packet_nft_share_claimed_message_not_twitter": "crwdns9013:0{{sender}}crwdnd9013:0{{network}}crwdnd9013:0{{payload}}crwdne9013:0",
-    "plugin_red_packet_nft_tip": "crwdns8155:0crwdne8155:0",
-    "plugin_red_packet_nft_no_history": "crwdns12991:0crwdne12991:0",
-    "plugin_red_packet_attached_message": "crwdns4739:0crwdne4739:0",
-    "plugin_red_packet_from": "crwdns4741:0{{name}}crwdne4741:0",
-    "plugin_red_packet_description_claimed": "crwdns4743:0{{amount}}crwdnd4743:0{{symbol}}crwdne4743:0",
-    "plugin_red_packet_description_expired": "crwdns4745:0crwdne4745:0",
-    "plugin_red_packet_description_refunded": "crwdns4747:0crwdne4747:0",
-    "plugin_red_packet_description_refund": "crwdns4749:0{{balance}}crwdnd4749:0{{symbol}}crwdne4749:0",
-    "plugin_red_packet_description_empty": "crwdns4751:0crwdne4751:0",
-    "plugin_red_packet_description_broken": "crwdns4753:0crwdne4753:0",
-    "plugin_red_packet_description_failover": "crwdns4755:0{{shares}}crwdnd4755:0{{total}}crwdnd4755:0{{symbol}}crwdne4755:0",
-    "plugin_red_packet_amount_per_share": "crwdns4761:0crwdne4761:0",
-    "plugin_red_packet_send_symbol": "crwdns4763:0{{amount}}crwdnd4763:0{{symbol}}crwdne4763:0",
-    "plugin_red_packet_amount_total": "crwdns4765:0crwdne4765:0",
-    "plugin_red_packet_next": "crwdns4767:0crwdne4767:0",
-    "plugin_red_packet_back": "crwdns4769:0crwdne4769:0",
-    "plugin_red_packet_hint": "crwdns4771:0crwdne4771:0",
-    "plugin_red_packet_token": "crwdns4773:0crwdne4773:0",
-    "plugin_red_packet_message_label": "crwdns8157:0crwdne8157:0",
+    "plugin_red_packet_create": "crwdns11873:0crwdne11873:0",
+    "plugin_red_packet_claimed": "crwdns16926:0crwdne16926:0",
+    "plugin_red_packet_erc20_tab_title": "crwdns16928:0crwdne16928:0",
+    "plugin_red_packet_erc721_tab_title": "crwdns16930:0crwdne16930:0",
+    "plugin_red_packet_name": "crwdns16932:0crwdne16932:0",
+    "plugin_red_packet_recommend_feature_description": "crwdns16934:0crwdne16934:0",
+    "plugin_red_packet_description": "crwdns16936:0crwdne16936:0",
+    "plugin_red_packet_erc721_insufficient_balance": "crwdns16938:0crwdne16938:0",
+    "plugin_red_packet_details": "crwdns16940:0crwdne16940:0",
+    "plugin_red_packet_split_mode": "crwdns16942:0crwdne16942:0",
+    "plugin_red_packet_average": "crwdns16944:0crwdne16944:0",
+    "plugin_red_packet_random": "crwdns16946:0crwdne16946:0",
+    "plugin_red_packet_shares": "crwdns16948:0crwdne16948:0",
+    "plugin_red_packet_best_wishes": "crwdns16950:0crwdne16950:0",
+    "plugin_red_packet_create_new": "crwdns16952:0crwdne16952:0",
+    "plugin_red_packet_claim": "crwdns16954:0crwdne16954:0",
+    "plugin_red_packet_claiming": "crwdns16956:0crwdne16956:0",
+    "plugin_red_packet_refund": "crwdns16958:0crwdne16958:0",
+    "plugin_red_packet_empty": "crwdns16960:0crwdne16960:0",
+    "plugin_red_packet_data_broken": "crwdns16962:0{{duration}}crwdne16962:0",
+    "plugin_red_packet_refunding": "crwdns16964:0crwdne16964:0",
+    "plugin_red_packet_select_existing": "crwdns16966:0crwdne16966:0",
+    "plugin_red_packet_share_unclaimed_message_official_account": "crwdns16968:0{{sender}}crwdnd16968:0{{network}}crwdnd16968:0{{account}}crwdnd16968:0{{payload}}crwdne16968:0",
+    "plugin_red_packet_share_unclaimed_message_not_twitter": "crwdns16970:0{{sender}}crwdnd16970:0{{network}}crwdnd16970:0{{payload}}crwdne16970:0",
+    "plugin_red_packet_share_message_official_account": "crwdns16972:0{{sender}}crwdnd16972:0{{network}}crwdnd16972:0{{account}}crwdnd16972:0{{payload}}crwdne16972:0",
+    "plugin_red_packet_share_message_not_twitter": "crwdns16974:0{{sender}}crwdnd16974:0{{network}}crwdnd16974:0{{payload}}crwdne16974:0",
+    "plugin_red_packet_nft_share_foreshow_message": "crwdns16976:0{{sender}}crwdnd16976:0{{network}}crwdnd16976:0{{account}}crwdnd16976:0{{payload}}crwdne16976:0",
+    "plugin_red_packet_nft_share_foreshow_message_not_twitter": "crwdns16978:0{{sender}}crwdnd16978:0{{network}}crwdnd16978:0{{payload}}crwdne16978:0",
+    "plugin_red_packet_nft_share_claimed_message": "crwdns16980:0{{sender}}crwdnd16980:0{{network}}crwdnd16980:0{{account}}crwdnd16980:0{{payload}}crwdne16980:0",
+    "plugin_red_packet_nft_share_claimed_message_not_twitter": "crwdns16982:0{{sender}}crwdnd16982:0{{network}}crwdnd16982:0{{payload}}crwdne16982:0",
+    "plugin_red_packet_nft_tip": "crwdns16984:0crwdne16984:0",
+    "plugin_red_packet_nft_no_history": "crwdns16986:0crwdne16986:0",
+    "plugin_red_packet_attached_message": "crwdns16988:0crwdne16988:0",
+    "plugin_red_packet_from": "crwdns16990:0{{name}}crwdne16990:0",
+    "plugin_red_packet_description_claimed": "crwdns16992:0{{amount}}crwdnd16992:0{{symbol}}crwdne16992:0",
+    "plugin_red_packet_description_expired": "crwdns16994:0crwdne16994:0",
+    "plugin_red_packet_description_refunded": "crwdns16996:0crwdne16996:0",
+    "plugin_red_packet_description_refund": "crwdns16998:0{{balance}}crwdnd16998:0{{symbol}}crwdne16998:0",
+    "plugin_red_packet_description_empty": "crwdns17000:0crwdne17000:0",
+    "plugin_red_packet_description_broken": "crwdns17002:0crwdne17002:0",
+    "plugin_red_packet_description_failover": "crwdns17004:0{{shares}}crwdnd17004:0{{total}}crwdnd17004:0{{symbol}}crwdne17004:0",
+    "plugin_red_packet_amount_per_share": "crwdns17006:0crwdne17006:0",
+    "plugin_red_packet_send_symbol": "crwdns17008:0{{amount}}crwdnd17008:0{{symbol}}crwdne17008:0",
+    "plugin_red_packet_amount_total": "crwdns17010:0crwdne17010:0",
+    "plugin_red_packet_next": "crwdns17012:0crwdne17012:0",
+    "plugin_red_packet_back": "crwdns17014:0crwdne17014:0",
+    "plugin_red_packet_hint": "crwdns17016:0crwdne17016:0",
+    "plugin_red_packet_token": "crwdns17018:0crwdne17018:0",
+    "plugin_red_packet_message_label": "crwdns17020:0crwdne17020:0",
     "plugin_red_packet_create_with_token": "crwdns4775:0{{amount}}crwdnd4775:0{{symbol}}crwdne4775:0",
     "plugin_nft_red_packet_create": "crwdns11875:0crwdne11875:0",
     "plugin_red_packet_nft_account_name": "crwdns8159:0crwdne8159:0",
@@ -690,7 +689,7 @@
     "plugin_collectible_invalid_reserve_price": "crwdns5343:0crwdne5343:0",
     "plugin_collectible_place_a_bid": "crwdns5345:0crwdne5345:0",
     "plugin_collectible_make_an_offer": "crwdns5347:0crwdne5347:0",
-    "plugin_collectible_approved_by_open_sea": "crwdns5349:0crwdne5349:0",
+    "plugin_collectible_approved_by_opensea": "crwdns17022:0crwdne17022:0",
     "plugin_collectible_legal_text": "crwdns5351:0crwdne5351:0",
     "plugin_collectibles_name": "crwdns16248:0crwdne16248:0",
     "plugin_collectibles_description": "crwdns16250:0crwdne16250:0",
diff --git a/packages/mask/shared-ui/locales/zh-CN.json b/packages/mask/shared-ui/locales/zh-CN.json
index 00a4ece5ee23..4e27185ecd83 100644
--- a/packages/mask/shared-ui/locales/zh-CN.json
+++ b/packages/mask/shared-ui/locales/zh-CN.json
@@ -296,52 +296,6 @@
     "plugin_wallet_name_placeholder": "输入1-12 个字符",
     "plugin_wallet_cancel_sign": "签名已取消。",
     "plugin_red_packet_create": "创建一个红包",
-    "plugin_red_packet_display_name": "插件：红包",
-    "plugin_red_packet_claimed": "已认领",
-    "plugin_red_packet_erc20_tab_title": "代币",
-    "plugin_red_packet_erc721_tab_title": "收藏品",
-    "plugin_red_packet_erc721_insufficient_balance": "余额不足",
-    "plugin_red_packet_details": "红包详情",
-    "plugin_red_packet_split_mode": "分享模式",
-    "plugin_red_packet_average": "平均",
-    "plugin_red_packet_random": "随机",
-    "plugin_red_packet_shares": "份额",
-    "plugin_red_packet_best_wishes": "祝好运！",
-    "plugin_red_packet_create_new": "新建",
-    "plugin_red_packet_claim": "认领",
-    "plugin_red_packet_claiming": "认领中...",
-    "plugin_red_packet_refund": "退款",
-    "plugin_red_packet_empty": "空的",
-    "plugin_red_packet_data_broken": "由于数据损坏，此红包无法发送。请在 {{duration}} 之后申请退款。",
-    "plugin_red_packet_refunding": "退款中",
-    "plugin_red_packet_select_existing": "历史红包",
-    "plugin_red_packet_share_unclaimed_message_official_account": "朋友们，我刚刚发现 @{{sender}} 在 {{network}} 网络发送了一个红包。 关注 @{{account}} (mask.io) 以获取红包。\n#mask_io #LuckyDrop\n{{payload}}",
-    "plugin_red_packet_share_unclaimed_message_not_twitter": "朋友们，我刚刚发现 @{{sender}} 在 {{network}} 网络发送了一个红包。\n{{payload}}",
-    "plugin_red_packet_share_message_official_account": "我刚从@{{sender}} 在 {{network}} 网络上认领了一个红包。关注@{{account}} (mask.io) 来获取红包。\n#mask_io #LuckyDrop\n{{payload}}",
-    "plugin_red_packet_share_message_not_twitter": "我刚从@{{sender}} 在 {{network}} 网络上认领了一个红包。\n{{payload}}",
-    "plugin_red_packet_nft_share_foreshow_message": "@{{sender}} 正在 {{network}} 网络上发送一个 NFT 红包。关注@{{account}} (mask.io) 以获取NFT 红包。\n#mask_io #LuckyDrop\n{{payload}}",
-    "plugin_red_packet_nft_share_foreshow_message_not_twitter": "@{{sender}} 正在 {{network}} 网络上发送一个 NFT 红包。 \n{{payload}}",
-    "plugin_red_packet_nft_share_claimed_message": "我刚从@{{sender}} 在 {{network}} 网络上认领了一个 NFT 红包。关注@{{account}} (mask.io) 来获取红包。\n#mask_io #LuckyDrop\n{{payload}}",
-    "plugin_red_packet_nft_share_claimed_message_not_twitter": "我刚从@{{sender}} 在 {{network}} 网络上认领了一个 NFT 红包。\n{{payload}}",
-    "plugin_red_packet_nft_tip": "这是一个 NFT 红包。",
-    "plugin_red_packet_nft_no_history": "您还没有创建任何NFT红包。尝试创建红包并与您的朋友分享。",
-    "plugin_red_packet_attached_message": "附加信息",
-    "plugin_red_packet_from": "来自：@{{name}}",
-    "plugin_red_packet_description_claimed": "你获得了 {{amount}} {{symbol}}",
-    "plugin_red_packet_description_expired": "此红包已过期。",
-    "plugin_red_packet_description_refunded": "此红包已退款。",
-    "plugin_red_packet_description_refund": "您可以退回 {{balance}} {{symbol}}。",
-    "plugin_red_packet_description_empty": "此红包是空的。",
-    "plugin_red_packet_description_broken": "此红包已被损坏。",
-    "plugin_red_packet_description_failover": "{{shares}} 份额 / {{total}} {{symbol}} 总金额",
-    "plugin_red_packet_amount_per_share": "单个份额",
-    "plugin_red_packet_send_symbol": "发送 {{amount}} {{symbol}}",
-    "plugin_red_packet_amount_total": "总额",
-    "plugin_red_packet_next": "下一步",
-    "plugin_red_packet_back": "返回",
-    "plugin_red_packet_hint": "你可以在红包发送的24小时后提取红包余额。",
-    "plugin_red_packet_token": "代币",
-    "plugin_red_packet_message_label": "标题",
     "plugin_red_packet_create_with_token": "使用 {{symbol}} 创建红包",
     "plugin_nft_red_packet_create": "创建一个NFT红包",
     "plugin_red_packet_nft_account_name": "钱包账户",
@@ -623,7 +577,6 @@
     "plugin_collectible_invalid_reserve_price": "无效底标价格",
     "plugin_collectible_place_a_bid": "出价",
     "plugin_collectible_make_an_offer": "发出报价",
-    "plugin_collectible_approved_by_open_sea": "通过勾选此框，我确认此收藏品尚未被 OpenSea 审核或批准。",
     "plugin_collectible_legal_text": "通过勾选此框，我同意OpenSea的 <terms>服务条款</terms>。",
     "plugin_cryptoartai_description_title": "描述",
     "plugin_cryptoartai_edition": "版本：",
diff --git a/packages/mask/shared-ui/locales/zh-TW.json b/packages/mask/shared-ui/locales/zh-TW.json
index c6583d80d3f6..e3492d036087 100644
--- a/packages/mask/shared-ui/locales/zh-TW.json
+++ b/packages/mask/shared-ui/locales/zh-TW.json
@@ -197,41 +197,6 @@
     "plugin_wallet_switch_network_under_going": "切換至 {{network}} 中",
     "plugin_wallet_not_available_on": "{{network}} 不可用",
     "plugin_wallet_connect_wallet": "連接錢包",
-    "plugin_red_packet_display_name": "插件：紅包",
-    "plugin_red_packet_claimed": "已認領",
-    "plugin_red_packet_erc20_tab_title": "代幣",
-    "plugin_red_packet_erc721_tab_title": "收藏品",
-    "plugin_red_packet_erc721_insufficient_balance": "餘額不足",
-    "plugin_red_packet_details": "紅包詳情",
-    "plugin_red_packet_split_mode": "分割模式",
-    "plugin_red_packet_average": "平均",
-    "plugin_red_packet_random": "隨機",
-    "plugin_red_packet_shares": "分享數",
-    "plugin_red_packet_best_wishes": "祝好運！",
-    "plugin_red_packet_create_new": "建立新的",
-    "plugin_red_packet_claim": "認領",
-    "plugin_red_packet_claiming": "認領中...",
-    "plugin_red_packet_refund": "退款",
-    "plugin_red_packet_empty": "空的",
-    "plugin_red_packet_refunding": "退款中",
-    "plugin_red_packet_select_existing": "選擇已存在的",
-    "plugin_red_packet_nft_tip": "這是一個NFT紅包",
-    "plugin_red_packet_attached_message": "附加的訊息",
-    "plugin_red_packet_from": "寄送人：{{name}}",
-    "plugin_red_packet_description_claimed": "你已經認領了 {{amount}} {{symbol}}。",
-    "plugin_red_packet_description_expired": "這個紅包已過期。",
-    "plugin_red_packet_description_refunded": "這個紅包已經被退款了。",
-    "plugin_red_packet_description_refund": "你可以退款 {{balance}} {{symbol}}。",
-    "plugin_red_packet_description_empty": "這個紅包是空的。",
-    "plugin_red_packet_description_broken": "這個紅包壞了",
-    "plugin_red_packet_description_failover": "寄送人 {{name}} / {{shares}} 分享數 / {{total}} {{symbol}}",
-    "plugin_red_packet_amount_per_share": "每次分享總額",
-    "plugin_red_packet_send_symbol": "送出 {{symbol}}",
-    "plugin_red_packet_amount_total": "總額",
-    "plugin_red_packet_next": "繼續",
-    "plugin_red_packet_back": "返回",
-    "plugin_red_packet_token": "代幣",
-    "plugin_red_packet_message_label": "標題",
     "plugin_red_packet_create_with_token": "使用 {{symbol}} 建立紅包",
     "plugin_gitcoin_select_a_token": "選擇一個代幣",
     "plugin_gitcoin_insufficient_balance": "{{symbol}} 餘額不足",
@@ -460,7 +425,6 @@
     "plugin_collectible_invalid_reserve_price": "錯誤的底標價格",
     "plugin_collectible_place_a_bid": "出價",
     "plugin_collectible_make_an_offer": "商議價格",
-    "plugin_collectible_approved_by_open_sea": "通過勾選此框，我確認此收藏品未經 OpenSea 審查。",
     "plugin_collectible_legal_text": "通過勾選此框，我同意 OpenSea 的 <terms>使用者條約</terms>。",
     "plugin_cryptoartai_description_title": "描述",
     "plugin_cryptoartai_operator": "執行者",

From 70da94b8619951b485056a91b6af969637e64548 Mon Sep 17 00:00:00 2001
From: guanbinrui <52657989+guanbinrui@users.noreply.github.com>
Date: Mon, 30 May 2022 12:31:02 +0800
Subject: [PATCH 16/17] refactor: improve code (#6377)

* refactort: kv storage

* refactor: simple provider state

* refactor: update comments

* fix: USD formatter

* fix: format currency

* fix: comments

* refactor: reduce code

* refactor: disable pt

Co-authored-by: unclebill <billbill290@gmail.com>
---
 .../Wallet/ContractInteraction/index.tsx      |  4 +--
 .../popups/pages/Wallet/TokenDetail/index.tsx |  2 +-
 packages/mask/src/plugin-infra/host.ts        |  7 +++--
 .../mask/src/plugins/PoolTogether/base.tsx    |  2 +-
 .../Savings/SNSAdaptor/SavingsForm.tsx        |  2 +-
 .../src/plugins/Tips/SNSAdaptor/index.tsx     |  2 +-
 .../src/plugins/Trader/SNSAdaptor/index.tsx   |  2 +-
 .../SNSAdaptor/trader/InputTokenPanel.tsx     |  2 +-
 .../SNSAdaptor/trending/TickersTable.tsx      |  4 +--
 .../src/plugins/hooks/usePriceLineChart.ts    |  2 +-
 packages/plugin-infra/src/types.ts            |  6 +----
 .../src/web3-state/AddressBook.ts             | 11 ++++----
 .../src/web3-state/NameService.ts             |  5 ++--
 .../plugin-infra/src/web3-state/Provider.ts   | 25 +++++++++++++----
 .../src/web3-state/RiskWarning.ts             |  2 +-
 .../plugin-infra/src/web3-state/Settings.ts   |  2 +-
 packages/plugin-infra/src/web3-state/Token.ts |  2 +-
 .../src/web3-state/Transaction.ts             | 14 +++++-----
 packages/plugins/EVM/src/state/AddressBook.ts | 19 ++++++-------
 packages/plugins/EVM/src/state/NameService.ts | 20 +++++++-------
 packages/plugins/EVM/src/state/Provider.ts    | 25 +++--------------
 packages/plugins/EVM/src/state/Transaction.ts | 16 +++++------
 .../plugins/Flow/src/state/AddressBook.ts     | 19 ++++++-------
 packages/plugins/Flow/src/state/Provider.ts   | 27 +++----------------
 .../plugins/Flow/src/state/Transaction.ts     | 17 ++++++------
 .../plugins/Solana/src/state/AddressBook.ts   | 19 ++++++-------
 packages/plugins/Solana/src/state/Provider.ts | 27 +++----------------
 .../plugins/Solana/src/state/Transaction.ts   | 17 ++++++------
 packages/web3-shared/base/src/specs/index.ts  |  4 +--
 29 files changed, 133 insertions(+), 173 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 28cc23efae8d..133fb3bc6204 100644
--- a/packages/mask/src/extension/popups/pages/Wallet/ContractInteraction/index.tsx
+++ b/packages/mask/src/extension/popups/pages/Wallet/ContractInteraction/index.tsx
@@ -377,7 +377,7 @@ const ContractInteraction = memo(() => {
                                 </Typography>
                                 <Typography>
                                     {!isGreaterThan(tokenValueUSD, pow10(9)) ? (
-                                        <FormattedCurrency value={tokenValueUSD} sign="$" formatter={formatCurrency} />
+                                        <FormattedCurrency value={tokenValueUSD} formatter={formatCurrency} />
                                     ) : null}
                                 </Typography>
                             </>
@@ -412,7 +412,7 @@ const ContractInteraction = memo(() => {
                             </Typography>
 
                             <Typography className={classes.gasPrice}>
-                                <FormattedCurrency value={totalUSD} sign="$" formatter={formatCurrency} />
+                                <FormattedCurrency value={totalUSD} formatter={formatCurrency} />
                             </Typography>
                         </div>
                     ) : null}
diff --git a/packages/mask/src/extension/popups/pages/Wallet/TokenDetail/index.tsx b/packages/mask/src/extension/popups/pages/Wallet/TokenDetail/index.tsx
index 1b4b946a31d4..8b883ee644af 100644
--- a/packages/mask/src/extension/popups/pages/Wallet/TokenDetail/index.tsx
+++ b/packages/mask/src/extension/popups/pages/Wallet/TokenDetail/index.tsx
@@ -136,7 +136,7 @@ const TokenDetail = memo(() => {
                     />
                 </Typography>
                 <Typography className={classes.text}>
-                    <FormattedCurrency value={getTokenUSDValue(currentToken)} sign="$" formatter={formatCurrency} />
+                    <FormattedCurrency value={getTokenUSDValue(currentToken)} formatter={formatCurrency} />
                 </Typography>
                 <div className={classes.controller}>
                     <div onClick={openBuyDialog}>
diff --git a/packages/mask/src/plugin-infra/host.ts b/packages/mask/src/plugin-infra/host.ts
index 636505a6f475..8b37170ba81b 100644
--- a/packages/mask/src/plugin-infra/host.ts
+++ b/packages/mask/src/plugin-infra/host.ts
@@ -20,10 +20,9 @@ import { WalletMessages, WalletRPC } from '../plugins/Wallet/messages'
 
 export function createSharedContext(pluginID: string, signal: AbortSignal): Plugin.Shared.SharedContext {
     return {
-        createKVStorage<T extends object>(type: 'memory' | 'persistent', name: string, defaultValues: T) {
-            if (type === 'memory')
-                return InMemoryStorages.Plugin.createSubScope(`${pluginID}_${name}`, defaultValues, signal)
-            else return PersistentStorages.Plugin.createSubScope(`${pluginID}_${name}`, defaultValues, signal)
+        createKVStorage<T extends object>(type: 'memory' | 'persistent', defaultValues: T) {
+            if (type === 'memory') return InMemoryStorages.Plugin.createSubScope(pluginID, defaultValues, signal)
+            else return PersistentStorages.Plugin.createSubScope(pluginID, defaultValues, signal)
         },
 
         nativeType: nativeAPI?.type,
diff --git a/packages/mask/src/plugins/PoolTogether/base.tsx b/packages/mask/src/plugins/PoolTogether/base.tsx
index 948c07d5d994..94da2f7107a7 100644
--- a/packages/mask/src/plugins/PoolTogether/base.tsx
+++ b/packages/mask/src/plugins/PoolTogether/base.tsx
@@ -9,7 +9,7 @@ export const base: Plugin.Shared.Definition = {
     enableRequirement: {
         architecture: { app: true, web: true },
         networks: { type: 'opt-out', networks: {} },
-        target: 'stable',
+        target: 'insider',
     },
     contribution: { postContent: new Set([URL_PATTERN]) },
 }
diff --git a/packages/mask/src/plugins/Savings/SNSAdaptor/SavingsForm.tsx b/packages/mask/src/plugins/Savings/SNSAdaptor/SavingsForm.tsx
index e95fb556534c..478ebdd0b494 100644
--- a/packages/mask/src/plugins/Savings/SNSAdaptor/SavingsForm.tsx
+++ b/packages/mask/src/plugins/Savings/SNSAdaptor/SavingsForm.tsx
@@ -310,7 +310,7 @@ export function SavingsForm({ chainId, protocol, tab, onClose }: SavingsFormProp
                         </Typography>
                     ) : (
                         <Typography variant="body2" textAlign="right" className={classes.tokenValueUSD}>
-                            &asymp; <FormattedCurrency value={tokenValueUSD} sign="$" formatter={formatCurrency} />
+                            &asymp; <FormattedCurrency value={tokenValueUSD} formatter={formatCurrency} />
                             {estimatedGas > 0 ? (
                                 <span className={classes.gasFee}>+ {formatBalance(estimatedGas, 18)} ETH</span>
                             ) : (
diff --git a/packages/mask/src/plugins/Tips/SNSAdaptor/index.tsx b/packages/mask/src/plugins/Tips/SNSAdaptor/index.tsx
index a8977d125c60..8800886982fa 100644
--- a/packages/mask/src/plugins/Tips/SNSAdaptor/index.tsx
+++ b/packages/mask/src/plugins/Tips/SNSAdaptor/index.tsx
@@ -12,7 +12,7 @@ import { TipsEntranceDialog } from './TipsEntranceDialog'
 const sns: Plugin.SNSAdaptor.Definition = {
     ...base,
     init(_, context) {
-        setupStorage(context.createKVStorage('memory', '', storageDefaultValue))
+        setupStorage(context.createKVStorage('memory', storageDefaultValue))
     },
     ApplicationEntries: [
         (() => {
diff --git a/packages/mask/src/plugins/Trader/SNSAdaptor/index.tsx b/packages/mask/src/plugins/Trader/SNSAdaptor/index.tsx
index 0eba0d4e5d54..53f97f1a3252 100644
--- a/packages/mask/src/plugins/Trader/SNSAdaptor/index.tsx
+++ b/packages/mask/src/plugins/Trader/SNSAdaptor/index.tsx
@@ -28,7 +28,7 @@ const sns: Plugin.SNSAdaptor.Definition<
 > = {
     ...base,
     init(signal, context) {
-        setupStorage(context.createKVStorage('persistent', '', storageDefaultValue))
+        setupStorage(context.createKVStorage('persistent', storageDefaultValue))
     },
     SearchResultBox: SearchResultInspector,
     GlobalInjection: function Component() {
diff --git a/packages/mask/src/plugins/Trader/SNSAdaptor/trader/InputTokenPanel.tsx b/packages/mask/src/plugins/Trader/SNSAdaptor/trader/InputTokenPanel.tsx
index f3ef7febef83..cef42cd5dec7 100644
--- a/packages/mask/src/plugins/Trader/SNSAdaptor/trader/InputTokenPanel.tsx
+++ b/packages/mask/src/plugins/Trader/SNSAdaptor/trader/InputTokenPanel.tsx
@@ -182,7 +182,7 @@ export const InputTokenPanel = memo<InputTokenPanelProps>(
                     ),
                     endAdornment: (
                         <Typography className={classes.price}>
-                            &asymp; <FormattedCurrency value={tokenValueUSD} sign="$" formatter={formatCurrency} />
+                            &asymp; <FormattedCurrency value={tokenValueUSD} formatter={formatCurrency} />
                         </Typography>
                     ),
                 }}
diff --git a/packages/mask/src/plugins/Trader/SNSAdaptor/trending/TickersTable.tsx b/packages/mask/src/plugins/Trader/SNSAdaptor/trending/TickersTable.tsx
index 1a78cd74aa8c..46d64856dc7f 100644
--- a/packages/mask/src/plugins/Trader/SNSAdaptor/trending/TickersTable.tsx
+++ b/packages/mask/src/plugins/Trader/SNSAdaptor/trending/TickersTable.tsx
@@ -69,11 +69,11 @@ export function TickersTable(props: TickersTableProps) {
             </TableCell>
             {ticker.price ? (
                 <TableCell className={classes.cell}>
-                    <FormattedCurrency value={ticker.price} sign="$" formatter={formatCurrency} />
+                    <FormattedCurrency value={ticker.price} formatter={formatCurrency} />
                 </TableCell>
             ) : null}
             <TableCell className={classes.cell}>
-                <FormattedCurrency value={ticker.volume} sign="$" formatter={formatCurrency} />
+                <FormattedCurrency value={ticker.volume} formatter={formatCurrency} />
             </TableCell>
             <TableCell className={classes.cell}>{formatElapsed(ticker.updated.getTime())}</TableCell>
         </TableRow>
diff --git a/packages/mask/src/plugins/hooks/usePriceLineChart.ts b/packages/mask/src/plugins/hooks/usePriceLineChart.ts
index 201c16690627..79a23beb136c 100644
--- a/packages/mask/src/plugins/hooks/usePriceLineChart.ts
+++ b/packages/mask/src/plugins/hooks/usePriceLineChart.ts
@@ -10,7 +10,7 @@ export function usePriceLineChart(
     id: string,
     opts: { color?: string; sign?: string },
 ) {
-    const { color = 'steelblue', sign = '$' } = opts
+    const { color = 'steelblue', sign = 'USD' } = opts
 
     useLineChart(svgRef, data, dimension, id, {
         color,
diff --git a/packages/plugin-infra/src/types.ts b/packages/plugin-infra/src/types.ts
index c601434c8304..5ab8c4eb1e2d 100644
--- a/packages/plugin-infra/src/types.ts
+++ b/packages/plugin-infra/src/types.ts
@@ -124,11 +124,7 @@ export namespace Plugin.Shared {
         /**
          * A lightweight K/V storage used to store some simple data.
          */
-        createKVStorage<T extends object>(
-            type: 'memory' | 'persistent',
-            name: string,
-            defaultValues: T,
-        ): ScopedStorage<T>
+        createKVStorage<T extends object>(type: 'memory' | 'persistent', defaultValues: T): ScopedStorage<T>
         /** The selected account of Mask Wallet */
         account: Subscription<string>
         /** The selected chainId of Mask Wallet */
diff --git a/packages/plugin-infra/src/web3-state/AddressBook.ts b/packages/plugin-infra/src/web3-state/AddressBook.ts
index a1e8a4626821..c8ecf4393abd 100644
--- a/packages/plugin-infra/src/web3-state/AddressBook.ts
+++ b/packages/plugin-infra/src/web3-state/AddressBook.ts
@@ -14,7 +14,7 @@ export class AddressBookState<
 
     constructor(
         protected context: Plugin.Shared.SharedContext,
-        protected defaultValue: AddressBook,
+        protected chainIds: ChainId[],
         protected subscriptions: {
             chainId?: Subscription<ChainId>
         },
@@ -24,11 +24,10 @@ export class AddressBookState<
             formatAddress(a: string): string
         },
     ) {
-        const { storage } = this.context
-            .createKVStorage('persistent', 'AddressBook', {})
-            .createSubScope('AddressBook', {
-                value: defaultValue,
-            })
+        const defaultValue = Object.fromEntries(chainIds.map((x) => [x, []] as [ChainId, string[]])) as AddressBook
+        const { storage } = this.context.createKVStorage('persistent', {}).createSubScope('AddressBook', {
+            value: defaultValue,
+        })
         this.storage = storage.value
 
         if (this.subscriptions.chainId) {
diff --git a/packages/plugin-infra/src/web3-state/NameService.ts b/packages/plugin-infra/src/web3-state/NameService.ts
index 8a35a60b522e..4c35f0799eed 100644
--- a/packages/plugin-infra/src/web3-state/NameService.ts
+++ b/packages/plugin-infra/src/web3-state/NameService.ts
@@ -14,7 +14,7 @@ export class NameServiceState<
 
     constructor(
         protected context: Plugin.Shared.SharedContext,
-        protected defaultValue: DomainBooks,
+        protected chainIds: ChainId[],
         protected subscriptions: {
             chainId?: Subscription<ChainId>
         },
@@ -24,7 +24,8 @@ export class NameServiceState<
             formatAddress(a: string): string
         },
     ) {
-        const { storage } = context.createKVStorage('memory', 'NameService', {}).createSubScope('NameService', {
+        const defaultValue = Object.fromEntries(chainIds.map((x) => [x, {}])) as DomainBooks
+        const { storage } = context.createKVStorage('memory', {}).createSubScope('NameService', {
             value: defaultValue,
         })
         this.storage = storage.value
diff --git a/packages/plugin-infra/src/web3-state/Provider.ts b/packages/plugin-infra/src/web3-state/Provider.ts
index 49279cfa9571..aa3ef56b8d8d 100644
--- a/packages/plugin-infra/src/web3-state/Provider.ts
+++ b/packages/plugin-infra/src/web3-state/Provider.ts
@@ -1,6 +1,6 @@
 import { clone, first } from 'lodash-unified'
 import type { Subscription } from 'use-subscription'
-import { delay } from '@dimensiondev/kit'
+import { delay, getEnumAsArray } from '@dimensiondev/kit'
 import {
     EnhanceableSite,
     ExtensionSite,
@@ -38,19 +38,34 @@ export class ProviderState<
     constructor(
         protected context: Plugin.Shared.SharedContext,
         protected providers: Record<ProviderType, WalletProvider<ChainId, ProviderType, Web3Provider, Web3>>,
-        protected defaultValue: ProviderStorage<Account<ChainId>, ProviderType>,
         protected options: {
             isValidAddress(a?: string): boolean
             isValidChainId(a?: number): boolean
             isSameAddress(a?: string, b?: string): boolean
             getDefaultChainId(): ChainId
             getDefaultNetworkType(): NetworkType
+            getDefaultProviderType(): ProviderType
             getNetworkTypeFromChainId(chainId: ChainId): NetworkType
         },
     ) {
-        const { storage } = this.context
-            .createKVStorage('memory', 'Provider', {})
-            .createSubScope('Provider', defaultValue)
+        const defaultValue: ProviderStorage<Account<ChainId>, ProviderType> = {
+            accounts: Object.fromEntries(
+                Object.keys(providers).map((x) => [
+                    x,
+                    {
+                        account: '',
+                        chainId: options.getDefaultChainId(),
+                    },
+                ]),
+            ) as Record<ProviderType, Account<ChainId>>,
+            providers: Object.fromEntries(
+                [...getEnumAsArray(EnhanceableSite), ...getEnumAsArray(ExtensionSite)].map((x) => [
+                    x.value,
+                    options.getDefaultProviderType(),
+                ]),
+            ) as Record<EnhanceableSite | ExtensionSite, ProviderType>,
+        }
+        const { storage } = this.context.createKVStorage('memory', {}).createSubScope('Provider', defaultValue)
         this.storage = storage
 
         this.setupSubscriptions()
diff --git a/packages/plugin-infra/src/web3-state/RiskWarning.ts b/packages/plugin-infra/src/web3-state/RiskWarning.ts
index 3c368916544d..526c3c7ad573 100644
--- a/packages/plugin-infra/src/web3-state/RiskWarning.ts
+++ b/packages/plugin-infra/src/web3-state/RiskWarning.ts
@@ -21,7 +21,7 @@ export class RiskWarningState implements Web3RiskWarningState {
             formatAddress(a: string): string
         },
     ) {
-        const { storage } = this.context.createKVStorage('memory', 'RiskWarning', {}).createSubScope('RiskWarning', {
+        const { storage } = this.context.createKVStorage('memory', {}).createSubScope('RiskWarning', {
             value: {},
         })
 
diff --git a/packages/plugin-infra/src/web3-state/Settings.ts b/packages/plugin-infra/src/web3-state/Settings.ts
index 05dd443973fd..e37da9735c70 100644
--- a/packages/plugin-infra/src/web3-state/Settings.ts
+++ b/packages/plugin-infra/src/web3-state/Settings.ts
@@ -20,7 +20,7 @@ export class SettingsState implements Web3SettingsState {
     public nonFungibleAssetSourceType?: Subscription<SourceType>
 
     constructor(context: Plugin.Shared.SharedContext) {
-        const { storage } = context.createKVStorage('memory', 'Settings', {}).createSubScope('Settings', {
+        const { storage } = context.createKVStorage('memory', {}).createSubScope('Settings', {
             currencyType: CurrencyType.USD,
             gasOptionType: GasOptionType.NORMAL,
             fungibleAssetSourceType: SourceType.DeBank,
diff --git a/packages/plugin-infra/src/web3-state/Token.ts b/packages/plugin-infra/src/web3-state/Token.ts
index 312d003eb0c8..bbe061e4872e 100644
--- a/packages/plugin-infra/src/web3-state/Token.ts
+++ b/packages/plugin-infra/src/web3-state/Token.ts
@@ -37,7 +37,7 @@ export class TokenState<ChainId, SchemaType> implements Web3TokenState<ChainId,
             formatAddress(a: string): string
         },
     ) {
-        const { storage } = context.createKVStorage('persistent', 'Token', {}).createSubScope('Token', defaultValue)
+        const { storage } = context.createKVStorage('persistent', {}).createSubScope('Token', defaultValue)
         this.storage = storage
 
         if (this.subscriptions.account) {
diff --git a/packages/plugin-infra/src/web3-state/Transaction.ts b/packages/plugin-infra/src/web3-state/Transaction.ts
index d63bf8f9a370..69e625107a99 100644
--- a/packages/plugin-infra/src/web3-state/Transaction.ts
+++ b/packages/plugin-infra/src/web3-state/Transaction.ts
@@ -27,7 +27,7 @@ export class TransactionState<ChainId, Transaction> implements Web3TransactionSt
 
     constructor(
         protected context: Plugin.Shared.SharedContext,
-        protected defaultValue: TransactionStorage<ChainId, Transaction>,
+        protected chainIds: ChainId[],
         protected subscriptions: {
             account?: Subscription<string>
             chainId?: Subscription<ChainId>
@@ -36,11 +36,13 @@ export class TransactionState<ChainId, Transaction> implements Web3TransactionSt
             formatAddress(a: string): string
         },
     ) {
-        const { storage } = this.context
-            .createKVStorage('persistent', 'Transaction', {})
-            .createSubScope('Transaction', {
-                value: defaultValue,
-            })
+        const defaultValue = Object.fromEntries(chainIds.map((x) => [x, {}])) as TransactionStorage<
+            ChainId,
+            Transaction
+        >
+        const { storage } = this.context.createKVStorage('persistent', {}).createSubScope('Transaction', {
+            value: defaultValue,
+        })
         this.storage = storage.value
 
         if (this.subscriptions.chainId && this.subscriptions.account) {
diff --git a/packages/plugins/EVM/src/state/AddressBook.ts b/packages/plugins/EVM/src/state/AddressBook.ts
index 98aa419b6fd5..4e2c5a6ebd37 100644
--- a/packages/plugins/EVM/src/state/AddressBook.ts
+++ b/packages/plugins/EVM/src/state/AddressBook.ts
@@ -12,14 +12,15 @@ export class AddressBook extends AddressBookState<ChainId> {
             chainId?: Subscription<ChainId>
         },
     ) {
-        const defaultValue = Object.fromEntries(
-            getEnumAsArray(ChainId).map((x) => [x.value, []] as [ChainId, string[]]),
-        ) as Record<ChainId, string[]>
-
-        super(context, defaultValue, subscriptions, {
-            isValidAddress,
-            isSameAddress,
-            formatAddress: formatEthereumAddress,
-        })
+        super(
+            context,
+            getEnumAsArray(ChainId).map((x) => x.value),
+            subscriptions,
+            {
+                isValidAddress,
+                isSameAddress,
+                formatAddress: formatEthereumAddress,
+            },
+        )
     }
 }
diff --git a/packages/plugins/EVM/src/state/NameService.ts b/packages/plugins/EVM/src/state/NameService.ts
index eadb083f3d1b..db348f1c9b9a 100644
--- a/packages/plugins/EVM/src/state/NameService.ts
+++ b/packages/plugins/EVM/src/state/NameService.ts
@@ -15,16 +15,16 @@ export class NameService extends NameServiceState<ChainId> {
             chainId?: Subscription<ChainId>
         },
     ) {
-        const defaultValue = Object.fromEntries(getEnumAsArray(ChainId).map((x) => [x.value, {}])) as Record<
-            ChainId,
-            Record<string, string>
-        >
-
-        super(context, defaultValue, subscriptions, {
-            isValidName: (x) => x !== '0x',
-            isValidAddress: (x) => isValidAddress(x) && !isZeroAddress(x),
-            formatAddress: formatEthereumAddress,
-        })
+        super(
+            context,
+            getEnumAsArray(ChainId).map((x) => x.value),
+            subscriptions,
+            {
+                isValidName: (x) => x !== '0x',
+                isValidAddress: (x) => isValidAddress(x) && !isZeroAddress(x),
+                formatAddress: formatEthereumAddress,
+            },
+        )
     }
 
     private async createENS() {
diff --git a/packages/plugins/EVM/src/state/Provider.ts b/packages/plugins/EVM/src/state/Provider.ts
index 6f14d951995c..aeec258c46f7 100644
--- a/packages/plugins/EVM/src/state/Provider.ts
+++ b/packages/plugins/EVM/src/state/Provider.ts
@@ -1,7 +1,5 @@
-import { getEnumAsArray } from '@dimensiondev/kit'
 import type { Plugin } from '@masknet/plugin-infra'
-import { ProviderState, ProviderStorage } from '@masknet/plugin-infra/web3'
-import { EnhanceableSite, ExtensionSite } from '@masknet/shared-base'
+import { ProviderState } from '@masknet/plugin-infra/web3'
 import { Account, isSameAddress } from '@masknet/web3-shared-base'
 import {
     ChainId,
@@ -19,30 +17,13 @@ import { Providers } from './Connection/provider'
 
 export class Provider extends ProviderState<ChainId, ProviderType, NetworkType, Web3Provider, Web3> {
     constructor(context: Plugin.Shared.SharedContext) {
-        const defaultValue: ProviderStorage<Account<ChainId>, ProviderType> = {
-            accounts: Object.fromEntries(
-                getEnumAsArray(ProviderType).map((x) => [
-                    x.value,
-                    {
-                        account: '',
-                        chainId: ChainId.Mainnet,
-                    },
-                ]),
-            ) as Record<ProviderType, Account<ChainId>>,
-            providers: Object.fromEntries(
-                [...getEnumAsArray(EnhanceableSite), ...getEnumAsArray(ExtensionSite)].map((x) => [
-                    x.value,
-                    ProviderType.MaskWallet,
-                ]),
-            ) as Record<EnhanceableSite | ExtensionSite, ProviderType>,
-        }
-
-        super(context, Providers, defaultValue, {
+        super(context, Providers, {
             isSameAddress,
             isValidAddress,
             isValidChainId,
             getDefaultChainId: () => ChainId.Mainnet,
             getDefaultNetworkType: () => NetworkType.Ethereum,
+            getDefaultProviderType: () => ProviderType.MaskWallet,
             getNetworkTypeFromChainId: (chainId: ChainId) =>
                 chainResolver.chainNetworkType(chainId) ?? NetworkType.Ethereum,
         })
diff --git a/packages/plugins/EVM/src/state/Transaction.ts b/packages/plugins/EVM/src/state/Transaction.ts
index 9eddef80b346..a80f1880f90a 100644
--- a/packages/plugins/EVM/src/state/Transaction.ts
+++ b/packages/plugins/EVM/src/state/Transaction.ts
@@ -1,7 +1,6 @@
 import type { Subscription } from 'use-subscription'
 import { getEnumAsArray } from '@dimensiondev/kit'
 import type { Plugin } from '@masknet/plugin-infra'
-import type { TransactionStorage } from '@masknet/plugin-infra/web3'
 import { TransactionState } from '@masknet/plugin-infra/web3'
 import { ChainId, Transaction as EVM_Transaction, formatEthereumAddress } from '@masknet/web3-shared-evm'
 
@@ -13,12 +12,13 @@ export class Transaction extends TransactionState<ChainId, EVM_Transaction> {
             chainId?: Subscription<ChainId>
         },
     ) {
-        const defaultValue = Object.fromEntries(
-            getEnumAsArray(ChainId).map((x) => [x.value, {}]),
-        ) as TransactionStorage<ChainId, EVM_Transaction>
-
-        super(context, defaultValue, subscriptions, {
-            formatAddress: formatEthereumAddress,
-        })
+        super(
+            context,
+            getEnumAsArray(ChainId).map((x) => x.value),
+            subscriptions,
+            {
+                formatAddress: formatEthereumAddress,
+            },
+        )
     }
 }
diff --git a/packages/plugins/Flow/src/state/AddressBook.ts b/packages/plugins/Flow/src/state/AddressBook.ts
index 60c547b8bd92..4d372665e974 100644
--- a/packages/plugins/Flow/src/state/AddressBook.ts
+++ b/packages/plugins/Flow/src/state/AddressBook.ts
@@ -12,14 +12,15 @@ export class AddressBook extends AddressBookState<ChainId, Record<ChainId, strin
             chainId?: Subscription<ChainId>
         },
     ) {
-        const defaultValue = Object.fromEntries(
-            getEnumAsArray(ChainId).map((x) => [x.value, []] as [ChainId, string[]]),
-        ) as Record<ChainId, string[]>
-
-        super(context, defaultValue, subscriptions, {
-            isValidAddress,
-            isSameAddress,
-            formatAddress,
-        })
+        super(
+            context,
+            getEnumAsArray(ChainId).map((x) => x.value),
+            subscriptions,
+            {
+                isValidAddress,
+                isSameAddress,
+                formatAddress,
+            },
+        )
     }
 }
diff --git a/packages/plugins/Flow/src/state/Provider.ts b/packages/plugins/Flow/src/state/Provider.ts
index 8105eebb6f50..c0e2007a1842 100644
--- a/packages/plugins/Flow/src/state/Provider.ts
+++ b/packages/plugins/Flow/src/state/Provider.ts
@@ -1,8 +1,6 @@
-import { getEnumAsArray } from '@dimensiondev/kit'
 import type { Plugin } from '@masknet/plugin-infra'
-import { ProviderState, ProviderStorage } from '@masknet/plugin-infra/web3'
-import { EnhanceableSite, ExtensionSite } from '@masknet/shared-base'
-import { Account, isSameAddress } from '@masknet/web3-shared-base'
+import { ProviderState } from '@masknet/plugin-infra/web3'
+import { isSameAddress } from '@masknet/web3-shared-base'
 import {
     chainResolver,
     ChainId,
@@ -17,29 +15,12 @@ import { Providers } from './Connection/provider'
 
 export class Provider extends ProviderState<ChainId, ProviderType, NetworkType, Web3Provider, Web3> {
     constructor(override context: Plugin.Shared.SharedContext) {
-        const defaultValue: ProviderStorage<Account<ChainId>, ProviderType> = {
-            accounts: Object.fromEntries(
-                getEnumAsArray(ProviderType).map((x) => [
-                    x.value,
-                    {
-                        account: '',
-                        chainId: ChainId.Mainnet,
-                    },
-                ]),
-            ) as Record<ProviderType, Account<ChainId>>,
-            providers: Object.fromEntries(
-                [...getEnumAsArray(EnhanceableSite), ...getEnumAsArray(ExtensionSite)].map((x) => [
-                    x.value,
-                    ProviderType.Blocto,
-                ]),
-            ) as Record<EnhanceableSite | ExtensionSite, ProviderType>,
-        }
-
-        super(context, Providers, defaultValue, {
+        super(context, Providers, {
             isSameAddress,
             isValidChainId,
             isValidAddress,
             getDefaultChainId: () => ChainId.Mainnet,
+            getDefaultProviderType: () => ProviderType.Blocto,
             getDefaultNetworkType: () => NetworkType.Flow,
             getNetworkTypeFromChainId: (chainId: ChainId) =>
                 chainResolver.chainNetworkType(chainId) ?? NetworkType.Flow,
diff --git a/packages/plugins/Flow/src/state/Transaction.ts b/packages/plugins/Flow/src/state/Transaction.ts
index 34b9d0d18512..4fa2e7a4c679 100644
--- a/packages/plugins/Flow/src/state/Transaction.ts
+++ b/packages/plugins/Flow/src/state/Transaction.ts
@@ -1,7 +1,7 @@
 import type { Subscription } from 'use-subscription'
 import { getEnumAsArray } from '@dimensiondev/kit'
 import type { Plugin } from '@masknet/plugin-infra'
-import { TransactionStorage, TransactionState } from '@masknet/plugin-infra/web3'
+import { TransactionState } from '@masknet/plugin-infra/web3'
 import { ChainId } from '@masknet/web3-shared-flow'
 import type { MutateOptions } from '@blocto/fcl'
 import { formatAddress } from '../helpers'
@@ -14,12 +14,13 @@ export class Transaction extends TransactionState<ChainId, MutateOptions> {
             chainId?: Subscription<ChainId>
         },
     ) {
-        const defaultValue = Object.fromEntries(
-            getEnumAsArray(ChainId).map((x) => [x.value, {}]),
-        ) as TransactionStorage<ChainId, MutateOptions>
-
-        super(context, defaultValue, subscriptions, {
-            formatAddress,
-        })
+        super(
+            context,
+            getEnumAsArray(ChainId).map((x) => x.value),
+            subscriptions,
+            {
+                formatAddress,
+            },
+        )
     }
 }
diff --git a/packages/plugins/Solana/src/state/AddressBook.ts b/packages/plugins/Solana/src/state/AddressBook.ts
index d9672715d52c..f09d9b67d412 100644
--- a/packages/plugins/Solana/src/state/AddressBook.ts
+++ b/packages/plugins/Solana/src/state/AddressBook.ts
@@ -12,14 +12,15 @@ export class AddressBook extends AddressBookState<ChainId, Record<ChainId, strin
             chainId?: Subscription<ChainId>
         },
     ) {
-        const defaultValue = Object.fromEntries(
-            getEnumAsArray(ChainId).map((x) => [x.value, []] as [ChainId, string[]]),
-        ) as Record<ChainId, string[]>
-
-        super(context, defaultValue, subscriptions, {
-            isValidAddress,
-            isSameAddress,
-            formatAddress,
-        })
+        super(
+            context,
+            getEnumAsArray(ChainId).map((x) => x.value),
+            subscriptions,
+            {
+                isValidAddress,
+                isSameAddress,
+                formatAddress,
+            },
+        )
     }
 }
diff --git a/packages/plugins/Solana/src/state/Provider.ts b/packages/plugins/Solana/src/state/Provider.ts
index 20d8a89aef6d..0978ca243428 100644
--- a/packages/plugins/Solana/src/state/Provider.ts
+++ b/packages/plugins/Solana/src/state/Provider.ts
@@ -1,8 +1,6 @@
-import { getEnumAsArray } from '@dimensiondev/kit'
 import type { Plugin } from '@masknet/plugin-infra'
-import { Account, isSameAddress } from '@masknet/web3-shared-base'
-import { EnhanceableSite, ExtensionSite } from '@masknet/shared-base'
-import { ProviderState, ProviderStorage } from '@masknet/plugin-infra/web3'
+import { isSameAddress } from '@masknet/web3-shared-base'
+import { ProviderState } from '@masknet/plugin-infra/web3'
 import {
     isValidChainId,
     isValidAddress,
@@ -17,29 +15,12 @@ import { Providers } from './Connection/provider'
 
 export class Provider extends ProviderState<ChainId, ProviderType, NetworkType, Web3Provider, Web3> {
     constructor(override context: Plugin.Shared.SharedContext) {
-        const defaultValue: ProviderStorage<Account<ChainId>, ProviderType> = {
-            accounts: Object.fromEntries(
-                getEnumAsArray(ProviderType).map((x) => [
-                    x.value,
-                    {
-                        account: '',
-                        chainId: ChainId.Mainnet,
-                    },
-                ]),
-            ) as Record<ProviderType, Account<ChainId>>,
-            providers: Object.fromEntries(
-                [...getEnumAsArray(EnhanceableSite), ...getEnumAsArray(ExtensionSite)].map((x) => [
-                    x.value,
-                    ProviderType.Phantom,
-                ]),
-            ) as Record<EnhanceableSite | ExtensionSite, ProviderType>,
-        }
-
-        super(context, Providers, defaultValue, {
+        super(context, Providers, {
             isSameAddress,
             isValidChainId,
             isValidAddress,
             getDefaultChainId: () => ChainId.Mainnet,
+            getDefaultProviderType: () => ProviderType.Phantom,
             getDefaultNetworkType: () => NetworkType.Solana,
             getNetworkTypeFromChainId: (chainId: ChainId) =>
                 chainResolver.chainNetworkType(chainId) ?? NetworkType.Solana,
diff --git a/packages/plugins/Solana/src/state/Transaction.ts b/packages/plugins/Solana/src/state/Transaction.ts
index 730670445179..de829ce38b8c 100644
--- a/packages/plugins/Solana/src/state/Transaction.ts
+++ b/packages/plugins/Solana/src/state/Transaction.ts
@@ -1,7 +1,7 @@
 import type { Subscription } from 'use-subscription'
 import { getEnumAsArray } from '@dimensiondev/kit'
 import type { Plugin } from '@masknet/plugin-infra'
-import { TransactionStorage, TransactionState } from '@masknet/plugin-infra/web3'
+import { TransactionState } from '@masknet/plugin-infra/web3'
 import { ChainId, Transaction as SolanaTransaction, formatAddress } from '@masknet/web3-shared-solana'
 
 export class Transaction extends TransactionState<ChainId, SolanaTransaction> {
@@ -12,12 +12,13 @@ export class Transaction extends TransactionState<ChainId, SolanaTransaction> {
             chainId?: Subscription<ChainId>
         },
     ) {
-        const defaultValue = Object.fromEntries(
-            getEnumAsArray(ChainId).map((x) => [x.value, {}]),
-        ) as TransactionStorage<ChainId, SolanaTransaction>
-
-        super(context, defaultValue, subscriptions, {
-            formatAddress,
-        })
+        super(
+            context,
+            getEnumAsArray(ChainId).map((x) => x.value),
+            subscriptions,
+            {
+                formatAddress,
+            },
+        )
     }
 }
diff --git a/packages/web3-shared/base/src/specs/index.ts b/packages/web3-shared/base/src/specs/index.ts
index a23595c9fb12..f7a8cbd018d3 100644
--- a/packages/web3-shared/base/src/specs/index.ts
+++ b/packages/web3-shared/base/src/specs/index.ts
@@ -500,9 +500,9 @@ export interface WalletProvider<ChainId, ProviderType, Web3Provider, Web3> {
     readonly readyPromise: Promise<void>
     /** Switch to the designate chain. */
     switchChain(chainId?: ChainId): Promise<void>
-    /** Create an web3 instance. */
+    /** Create an instance from the network SDK. */
     createWeb3(chainId?: ChainId): Promise<Web3>
-    /** Create an provider instance. */
+    /** Create an instance that implement the wallet protocol. */
     createWeb3Provider(chainId?: ChainId): Promise<Web3Provider>
     /** Create the connection. */
     connect(chainId?: ChainId): Promise<Account<ChainId>>

From 6d9aaa42982cf773a8146b776732cbc95343bfd5 Mon Sep 17 00:00:00 2001
From: Lantt <laanfor@gmail.com>
Date: Mon, 30 May 2022 16:03:01 +0800
Subject: [PATCH 17/17] fix: remove lodash chain for extension launch (#6383)

---
 packages/web3-shared/base/src/utils/token.ts | 32 +++++++++-----------
 1 file changed, 15 insertions(+), 17 deletions(-)

diff --git a/packages/web3-shared/base/src/utils/token.ts b/packages/web3-shared/base/src/utils/token.ts
index 84d50edbee52..ceaab6eb1581 100644
--- a/packages/web3-shared/base/src/utils/token.ts
+++ b/packages/web3-shared/base/src/utils/token.ts
@@ -1,3 +1,4 @@
+import { keyBy, mapValues } from 'lodash-unified'
 import {
     FungibleToken,
     NonFungibleToken,
@@ -7,7 +8,6 @@ import {
     TokenType,
 } from '../specs'
 import type { Constants } from './types'
-import { chain } from 'lodash-unified'
 
 export function createFungibleToken<ChainId, SchemaType>(
     chainId: ChainId,
@@ -118,22 +118,20 @@ export function createFungibleTokensFromConstants<T extends Constants<string>, C
         symbol: string | ((chainId: ChainId) => string),
         decimals: number | ((chainId: ChainId) => number),
     ) => {
-        return chain(chainIds)
-            .keyBy('value')
-            .mapValues<FungibleToken<ChainId, SchemaType>>(({ key: chainName, value: chainId }) => {
-                const evaluator = <R>(f: ((chainId: ChainId) => R) | R): R =>
-                    // @ts-ignore
-                    typeof f === 'function' ? f(chainId as ChainId) : f
+        const chainIdGroup = keyBy(chainIds, 'value')
+        return mapValues(chainIdGroup, ({ key: chainName, value: chainId }) => {
+            const evaluator = <R>(f: ((chainId: ChainId) => R) | R): R =>
+                // @ts-ignore
+                typeof f === 'function' ? f(chainId as ChainId) : f
 
-                return createFungibleToken<ChainId, SchemaType>(
-                    chainId,
-                    schema,
-                    constants[key][chainName as 'Mainnet'] ?? '',
-                    evaluator(name),
-                    evaluator(symbol),
-                    evaluator(decimals),
-                )
-            })
-            .value()
+            return createFungibleToken<ChainId, SchemaType>(
+                chainId,
+                schema,
+                constants[key][chainName as 'Mainnet'] ?? '',
+                evaluator(name),
+                evaluator(symbol),
+                evaluator(decimals),
+            )
+        })
     }
 }