diff --git a/.github/workflows/deploy-proxy.yml b/.github/workflows/deploy-proxy.yml
new file mode 100644
index 000000000000..9a8e374dc628
--- /dev/null
+++ b/.github/workflows/deploy-proxy.yml
@@ -0,0 +1,42 @@
+name: Publish Proxy Package
+
+on:
+  push:
+    branches: [hyper-proxy-deploy]
+
+jobs:
+  build:
+    runs-on: ubuntu-20.04
+    permissions:
+      packages: write
+      contents: read
+    steps:
+      - name: Get cache date
+        id: get-date
+        run: echo "::set-output name=date::$(/bin/date -u "+%Y%m%d")"
+        shell: bash
+      - uses: actions/checkout@v2
+        with:
+          ref: ${{ github.event.pull_request.head.sha }}
+          fetch-depth: 0
+      - uses: pnpm/action-setup@v2
+        with:
+          version: latest
+      - uses: actions/setup-node@v2
+        with:
+          cache: pnpm
+      - name: Restore cache
+        uses: actions/cache@v2
+        with:
+          path: packages/mask/node_modules/.cache/
+          key: ${{ runner.os }}-extension-${{ hashFiles('pnpm-lock.yaml') }}-${{ steps.get-date.outputs.date }}
+          restore-keys: ${{ runner.os }}-extension-${{ hashFiles('pnpm-lock.yaml') }}
+      - uses: DimensionDev/github-token-action@latest
+        with:
+          registry: true
+      - run: pnpm install
+      - run: pnpm build
+      - run: pnpm build
+        working-directory: packages/provider-proxy
+      - run: npm publish
+        working-directory: packages/provider-proxy/dist
diff --git a/cspell.json b/cspell.json
index 559697c3796f..65135eac6d37 100644
--- a/cspell.json
+++ b/cspell.json
@@ -359,9 +359,12 @@
         "koda",
         "Enjin",
         "poap",
-        "irss",
         "CELO",
-        "flac"
+        "flac",
+        "treeshake",
+        "xtest",
+        "xdescribe",
+        "irss"
     ],
     "ignoreRegExpList": ["/@servie/"],
     "overrides": [
diff --git a/jest.config.ts b/jest.config.ts
index 32599357c7f9..d089e951e89a 100644
--- a/jest.config.ts
+++ b/jest.config.ts
@@ -20,9 +20,13 @@ const config: InitialOptionsTsJest = {
     clearMocks: true,
     coverageProvider: 'v8',
     testMatch: ['**/tests/**/*.[jt]s?(x)'],
+    modulePathIgnorePatterns: ['dist'],
     extensionsToTreatAsEsm: ['.ts', '.tsx'],
     moduleNameMapper: {
         '@masknet/shared-base': '<rootDir>/packages/shared-base/src/index.ts',
+        'jest-websocket-mock': '<rootDir>/packages/web3-shared/base/node_modules/jest-websocket-mock',
+        'reconnecting-websocket': '<rootDir>/packages/web3-shared/base/node_modules/reconnecting-websocket',
+        'date-fns/(.*)': '<rootDir>/packages/web3-shared/base/node_modules/date-fns/$1',
     },
     snapshotSerializers: ['@masknet/serializer'],
 }
diff --git a/packages/dashboard/src/pages/Wallets/components/CollectibleList/index.tsx b/packages/dashboard/src/pages/Wallets/components/CollectibleList/index.tsx
index b232c41dbd56..fd5d87fce9bc 100644
--- a/packages/dashboard/src/pages/Wallets/components/CollectibleList/index.tsx
+++ b/packages/dashboard/src/pages/Wallets/components/CollectibleList/index.tsx
@@ -1,4 +1,4 @@
-import { Dispatch, memo, SetStateAction, useCallback, useEffect, useState } from 'react'
+import { Dispatch, memo, SetStateAction, useCallback, useEffect, useRef, useState } from 'react'
 import { Box, Stack, TablePagination } from '@mui/material'
 import { makeStyles } from '@masknet/theme'
 import { LoadingPlaceholder } from '../../../../components/LoadingPlaceholder'
@@ -33,24 +33,37 @@ interface CollectibleListProps {
     selectedNetwork: Web3Plugin.NetworkDescriptor | null
 }
 
+const ITEM_SIZE = {
+    width: 150,
+    height: 250,
+}
+
 export const CollectibleList = memo<CollectibleListProps>(({ selectedNetwork }) => {
     const [page, setPage] = useState(0)
     const navigate = useNavigate()
     const account = useAccount()
     const { Asset } = useWeb3PluginState()
     const network = useNetworkDescriptor()
+    const [loadingSize, setLoadingSize] = useState<number>()
+    const [loadingCollectible, setLoadingCollectible] = useState(true)
+    const [renderData, setRenderData] = useState<Web3Plugin.NonFungibleToken[]>([])
 
     const {
         value = { data: [], hasNextPage: false },
-        loading: collectiblesLoading,
         error: collectiblesError,
         retry,
     } = useAsyncRetry(
         async () =>
             Asset?.getNonFungibleAssets?.(account, { page: page, size: 20 }, undefined, selectedNetwork ?? undefined),
-        [account, Asset, network, page, selectedNetwork],
+        [account, Asset, network, selectedNetwork],
     )
 
+    useEffect(() => {
+        if (!loadingSize) return
+        const render = value.data.slice(page * loadingSize, (page + 1) * loadingSize)
+        setRenderData(render)
+    }, [value, loadingSize, page])
+
     const onSend = useCallback(
         (detail: Web3Plugin.NonFungibleToken) =>
             navigate(DashboardRoutes.WalletsTransfer, {
@@ -63,24 +76,31 @@ export const CollectibleList = memo<CollectibleListProps>(({ selectedNetwork })
     )
 
     useEffect(() => {
-        PluginMessages.Wallet.events.erc721TokensUpdated.on(() => {
-            retry()
+        PluginMessages.Wallet.events.erc721TokensUpdated.on(() => retry())
+        PluginMessages.Wallet.events.socketMessageUpdated.on((info) => {
+            if (!info.done) {
+                retry()
+            }
+            setLoadingCollectible(false)
         })
     }, [retry])
 
-    const { data: collectibles = [], hasNextPage } = value
+    const hasNextPage = (page + 1) * (loadingSize ?? 0) < value.data.length
 
     return (
         <CollectibleListUI
-            isLoading={collectiblesLoading}
-            isEmpty={!!collectiblesError || collectibles.length === 0}
+            isLoading={renderData.length === 0 && loadingCollectible}
+            isEmpty={
+                (!!collectiblesError || renderData.length === 0) && !(renderData.length === 0 && loadingCollectible)
+            }
             page={page}
             onPageChange={setPage}
             hasNextPage={hasNextPage}
-            showPagination={!collectiblesLoading && !(page === 0 && !hasNextPage)}
-            dataSource={collectibles}
+            showPagination={!loadingCollectible && !(page === 0 && !hasNextPage)}
+            dataSource={renderData}
             chainId={network?.chainId ?? 1}
             onSend={onSend}
+            setLoadingSize={(size) => setLoadingSize(size)}
         />
     )
 })
@@ -95,15 +115,36 @@ export interface CollectibleListUIProps {
     chainId: number
     dataSource: Web3Plugin.NonFungibleToken[]
     onSend(detail: Web3Plugin.NonFungibleToken): void
+    setLoadingSize(fn: (pre: number | undefined) => number): void
 }
 
 export const CollectibleListUI = memo<CollectibleListUIProps>(
-    ({ page, onPageChange, isLoading, isEmpty, hasNextPage, showPagination, chainId, dataSource, onSend }) => {
+    ({
+        page,
+        onPageChange,
+        isLoading,
+        isEmpty,
+        hasNextPage,
+        showPagination,
+        chainId,
+        dataSource,
+        onSend,
+        setLoadingSize,
+    }) => {
         const t = useDashboardI18N()
         const { classes } = useStyles()
+        const ref = useRef<HTMLDivElement>(null)
+
+        useEffect(() => {
+            if (!ref.current) return
+            const width = ref.current.offsetWidth
+            const height = ref.current.offsetHeight - 60
+            const baseSize = Math.floor(width / ITEM_SIZE.width) * Math.floor(height / ITEM_SIZE.height)
+            setLoadingSize((prev) => prev ?? Math.floor(baseSize * 0.8))
+        }, [ref.current])
 
         return (
-            <Stack flexDirection="column" justifyContent="space-between" height="100%">
+            <Stack flexDirection="column" justifyContent="space-between" height="100%" ref={ref}>
                 <>
                     {isLoading ? (
                         <LoadingPlaceholder />
diff --git a/packages/dashboard/src/pages/Wallets/components/FungibleTokenTable/index.tsx b/packages/dashboard/src/pages/Wallets/components/FungibleTokenTable/index.tsx
index c88ff649b6b5..05127d1792b5 100644
--- a/packages/dashboard/src/pages/Wallets/components/FungibleTokenTable/index.tsx
+++ b/packages/dashboard/src/pages/Wallets/components/FungibleTokenTable/index.tsx
@@ -87,7 +87,7 @@ export const FungibleTokenTable = memo<TokenTableProps>(({ selectedChainId }) =>
 
     useEffect(() => {
         PluginMessages.Wallet.events.erc20TokensUpdated.on(() =>
-            setTimeout(() => setTokenUpdateCount(tokenUpdateCount + 1), 100),
+            setTimeout(() => setTokenUpdateCount((prev) => prev + 1), 100),
         )
     }, [])
 
diff --git a/packages/dashboard/src/web3/context.ts b/packages/dashboard/src/web3/context.ts
index e1d4d70b5824..32e4f3197efc 100644
--- a/packages/dashboard/src/web3/context.ts
+++ b/packages/dashboard/src/web3/context.ts
@@ -16,6 +16,7 @@ import {
     isInjectedProvider,
 } from '@masknet/web3-shared-evm'
 import { Services, Messages, PluginServices, PluginMessages } from '../API'
+import { getProxyWebsocketInstance } from '@masknet/web3-shared-base'
 
 const Web3Provider = createExternalProvider()
 
@@ -113,6 +114,9 @@ export const Web3Context: Web3ProviderType = {
     getAddressNamesList: PluginServices.Wallet.getAddressNames,
     getTransactionList: PluginServices.Wallet.getTransactionList,
     fetchERC20TokensFromTokenLists: Services.Ethereum.fetchERC20TokensFromTokenLists,
+    providerSocket: getProxyWebsocketInstance((info) =>
+        PluginMessages.Wallet.events.socketMessageUpdated.sendToAll(info),
+    ),
 }
 
 export function createExternalProvider() {
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 4c7d31f722eb..7de6dc3ff9e9 100644
--- a/packages/mask/src/extension/options-page/DashboardComponents/CollectibleList/index.tsx
+++ b/packages/mask/src/extension/options-page/DashboardComponents/CollectibleList/index.tsx
@@ -1,11 +1,10 @@
-import { createContext, useState, useEffect } from 'react'
-import { useUpdateEffect } from 'react-use'
+import { createContext, useEffect, useMemo } from 'react'
 import { useValueRef } from '@masknet/shared'
 import {
     ChainId,
-    NonFungibleAssetProvider,
-    ERC721TokenCollectionInfo,
     ERC721TokenDetailed,
+    NonFungibleAssetProvider,
+    SocketState,
     useCollectibles,
     useCollections,
     Wallet,
@@ -15,9 +14,8 @@ import { makeStyles, useStylesExtends } from '@masknet/theme'
 import { currentNonFungibleAssetDataProviderSettings } from '../../../../plugins/Wallet/settings'
 import { useI18N } from '../../../../utils'
 import { CollectibleCard } from './CollectibleCard'
-import { WalletMessages } from '../../../../plugins/Wallet/messages'
 import { Image } from '../../../../components/shared/Image'
-import { uniqBy } from 'lodash-unified'
+import { WalletMessages } from '@masknet/plugin-wallet'
 
 export const CollectibleContext = createContext<{
     collectiblesRetry: () => void
@@ -112,7 +110,7 @@ interface CollectibleListUIProps extends withClasses<'empty' | 'button' | 'text'
     collectibles: ERC721TokenDetailed[]
     loading: boolean
     collectiblesRetry: () => void
-    error: Error | undefined
+    error: string | undefined
     readonly?: boolean
     hasRetry?: boolean
 }
@@ -123,30 +121,28 @@ function CollectibleListUI(props: CollectibleListUIProps) {
 
     useEffect(() => WalletMessages.events.erc721TokensUpdated.on(collectiblesRetry))
 
-    if (loading)
-        return (
-            <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>
-        )
-
     return (
         <CollectibleContext.Provider value={{ collectiblesRetry }}>
             <Box className={classes.container}>
-                {error || collectibles.length === 0 ? (
+                {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 ? (
@@ -176,53 +172,25 @@ function CollectibleListUI(props: CollectibleListUIProps) {
 export interface CollectibleListProps extends withClasses<'empty' | 'button'> {
     address: string
     collection?: string
-    setCount: (count: number) => void
+    collectibles: ERC721TokenDetailed[]
+    error?: string
+    loading: boolean
+    retry(): void
 }
 
 export function CollectibleList(props: CollectibleListProps) {
-    const { address, collection, setCount } = props
+    const { address, collectibles, error, loading, retry } = props
     const provider = useValueRef(currentNonFungibleAssetDataProviderSettings)
-    const chainId = ChainId.Mainnet
-    const [page, setPage] = useState(0)
     const classes = props.classes ?? {}
 
-    const {
-        value = { collectibles: [], hasNextPage: false },
-        loading: collectiblesLoading,
-        retry: collectiblesRetry,
-        error: collectiblesError,
-    } = useCollectibles(address, chainId, provider, page, 50, collection)
-    const { collectibles = [], hasNextPage } = value
-    const [rendCollectibles, setRendCollectibles] = useState<ERC721TokenDetailed[]>([])
-
-    useUpdateEffect(() => {
-        setPage(0)
-    }, [provider, address])
-
-    useEffect(() => {
-        if (!collectibles.length) return
-        setRendCollectibles([...rendCollectibles, ...collectibles])
-        if (!hasNextPage) return
-        const timer = setTimeout(() => {
-            setPage(page + 1)
-        }, 1000)
-        return () => {
-            clearTimeout(timer)
-        }
-    }, [collectibles])
-
-    useEffect(() => {
-        setCount(rendCollectibles.length)
-    }, [rendCollectibles])
-
     return (
         <CollectibleListUI
             classes={classes}
             provider={provider}
             collectibles={collectibles}
-            loading={collectiblesLoading}
-            collectiblesRetry={collectiblesRetry}
-            error={collectiblesError}
+            loading={loading}
+            collectiblesRetry={retry}
+            error={error}
             readonly
             hasRetry={!!address}
         />
@@ -231,33 +199,49 @@ export function CollectibleList(props: CollectibleListProps) {
 
 export function CollectionList({ address }: { address: string }) {
     const chainId = ChainId.Mainnet
-    const provider = useValueRef(currentNonFungibleAssetDataProviderSettings)
     const { t } = useI18N()
-    const [page, setPage] = useState(0)
     const { classes } = useStyles()
-    const [counts, setCounts] = useState<number[]>([])
-    const [rendCollections, setRendCollections] = useState<ERC721TokenCollectionInfo[]>([])
 
-    const { value = { collections: [], hasNextPage: false } } = useCollections(address, chainId, provider, page, 10)
-    const { collections = [], hasNextPage } = value
+    const {
+        data: collections,
+        retry: retryFetchCollection,
+        state: loadingCollectionDone,
+    } = useCollections(address, chainId)
+    const {
+        data: collectibles,
+        state: loadingCollectibleDone,
+        retry: retryFetchCollectible,
+    } = useCollectibles(address, chainId, !!collections.length)
+
+    const isLoading = loadingCollectibleDone !== SocketState.done || loadingCollectionDone !== SocketState.done
 
-    useUpdateEffect(() => {
-        setPage(0)
-    }, [provider, address])
+    const renderWithRarible = useMemo(() => {
+        if (isLoading) return []
+        return collectibles.filter((item) => !item.collection)
+    }, [collections?.length, collectibles?.length])
 
-    useEffect(() => {
-        if (!collections.length) return
-        setRendCollections(uniqBy([...rendCollections, ...collections], (x) => x.slug))
-        if (!hasNextPage) return
-        const timer = setTimeout(() => {
-            setPage(page + 1)
-        }, 3000)
-        return () => {
-            clearTimeout(timer)
-        }
-    }, [collections])
+    if (loadingCollectionDone !== SocketState.done) {
+        return (
+            <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>
+        )
+    }
 
-    if (!rendCollections.length)
+    if (!isLoading && !collections.length)
         return (
             <Box display="flex" alignItems="center" justifyContent="center">
                 <Typography color="textPrimary" sx={{ paddingTop: 4, paddingBottom: 4 }}>
@@ -268,31 +252,63 @@ export function CollectionList({ address }: { address: string }) {
 
     return (
         <Box>
-            {rendCollections.map((x, i) => (
-                <Box key={i}>
-                    <Box display="flex" alignItems="center" sx={{ marginTop: '16px' }}>
-                        <Box className={classes.collectionWrap}>
-                            {x.image ? <Image component="img" className={classes.collectionImg} src={x.image} /> : null}
+            {(collections ?? []).map((x, i) => {
+                const renderCollectibles = collectibles.filter((c) => c.collection?.slug === x.slug)
+                return (
+                    <Box key={i}>
+                        <Box display="flex" alignItems="center" sx={{ marginTop: '16px' }}>
+                            <Box className={classes.collectionWrap}>
+                                {x.image ? (
+                                    <Image component="img" className={classes.collectionImg} src={x.image} />
+                                ) : null}
+                            </Box>
+                            <Typography
+                                className={classes.name}
+                                color="textPrimary"
+                                variant="body2"
+                                sx={{ fontSize: '16px' }}>
+                                {x.name}
+                                {loadingCollectibleDone && renderCollectibles.length
+                                    ? `(${renderCollectibles.length})`
+                                    : null}
+                            </Typography>
                         </Box>
+                        <CollectibleList
+                            address={address}
+                            collection={x.slug}
+                            retry={() => {
+                                retryFetchCollectible()
+                                retryFetchCollection()
+                            }}
+                            collectibles={renderCollectibles}
+                            loading={isLoading}
+                        />
+                    </Box>
+                )
+            })}
+            {!!renderWithRarible.length && (
+                <Box key="rarible">
+                    <Box display="flex" alignItems="center" sx={{ marginTop: '16px' }}>
                         <Typography
                             className={classes.name}
                             color="textPrimary"
                             variant="body2"
                             sx={{ fontSize: '16px' }}>
-                            {x.name}
-                            {counts[i] ? `(${counts[i]})` : null}
+                            Rarible ({renderWithRarible.length})
                         </Typography>
                     </Box>
                     <CollectibleList
                         address={address}
-                        collection={x.slug}
-                        setCount={(count) => {
-                            counts[i] = count
-                            setCounts(counts)
+                        collection="Rarible"
+                        retry={() => {
+                            retryFetchCollectible()
+                            retryFetchCollection()
                         }}
+                        collectibles={renderWithRarible}
+                        loading={false}
                     />
                 </Box>
-            ))}
+            )}
         </Box>
     )
 }
diff --git a/packages/mask/src/plugins/Avatar/SNSAdaptor/NFTAvatar.tsx b/packages/mask/src/plugins/Avatar/SNSAdaptor/NFTAvatar.tsx
index 20aef9b42ba6..81684042dafe 100644
--- a/packages/mask/src/plugins/Avatar/SNSAdaptor/NFTAvatar.tsx
+++ b/packages/mask/src/plugins/Avatar/SNSAdaptor/NFTAvatar.tsx
@@ -1,9 +1,9 @@
 import { useCallback, useState } from 'react'
 import { uniqBy } from 'lodash-unified'
 import { WalletMessages } from '@masknet/plugin-wallet'
-import { useRemoteControlledDialog, useValueRef } from '@masknet/shared'
+import { useRemoteControlledDialog } from '@masknet/shared'
 import { makeStyles, useStylesExtends } from '@masknet/theme'
-import { ChainId } from '@masknet/web3-shared-evm'
+import { ChainId, SocketState } from '@masknet/web3-shared-evm'
 import {
     ERC721TokenDetailed,
     formatEthereumAddress,
@@ -11,8 +11,7 @@ import {
     useChainId,
     useCollectibles,
 } from '@masknet/web3-shared-evm'
-import { Box, Button, Skeleton, TablePagination, Typography } from '@mui/material'
-import { currentNonFungibleAssetDataProviderSettings } from '../../../plugins/Wallet/settings'
+import { Box, Button, Skeleton, Typography } from '@mui/material'
 import { useI18N } from '../../../utils'
 import { EthereumChainBoundary } from '../../../web3/UI/EthereumChainBoundary'
 import { AddNFT } from './AddNFT'
@@ -91,22 +90,11 @@ export function NFTAvatar(props: NFTAvatarProps) {
     const classes = useStylesExtends(useStyles(), props)
     const account = useAccount()
     const chainId = useChainId()
-    const provider = useValueRef(currentNonFungibleAssetDataProviderSettings)
-    const [page, setPage] = useState(0)
     const [selectedToken, setSelectedToken] = useState<ERC721TokenDetailed | undefined>()
     const [open_, setOpen_] = useState(false)
     const [collectibles_, setCollectibles_] = useState<ERC721TokenDetailed[]>([])
     const { t } = useI18N()
-    const {
-        value = {
-            collectibles: [],
-            hasNextPage: false,
-        },
-        loading,
-        retry,
-        error,
-    } = useCollectibles(account, ChainId.Mainnet, provider, page, 50)
-    const { collectibles, hasNextPage } = value
+    const { data: collectibles, error, retry, state } = useCollectibles(account, ChainId.Mainnet)
 
     const onClick = useCallback(async () => {
         if (!selectedToken) return
@@ -157,7 +145,7 @@ export function NFTAvatar(props: NFTAvatarProps) {
                 <EthereumChainBoundary chainId={chainId}>
                     <Box className={classes.galleryItem}>
                         <Box className={classes.gallery}>
-                            {loading
+                            {state !== SocketState.done && collectibles.length === 0
                                 ? LoadStatus
                                 : error || (collectibles.length === 0 && collectibles_.length === 0)
                                 ? Retry
@@ -179,28 +167,6 @@ export function NFTAvatar(props: NFTAvatarProps) {
                                           />
                                       ))}
                         </Box>
-
-                        {hasNextPage || page > 0 ? (
-                            <TablePagination
-                                count={-1}
-                                component="div"
-                                onPageChange={() => {}}
-                                page={page}
-                                rowsPerPage={30}
-                                rowsPerPageOptions={[30]}
-                                labelDisplayedRows={() => null}
-                                backIconButtonProps={{
-                                    onClick: () => setPage(page - 1),
-                                    size: 'small',
-                                    disabled: page === 0,
-                                }}
-                                nextIconButtonProps={{
-                                    onClick: () => setPage(page + 1),
-                                    disabled: !hasNextPage,
-                                    size: 'small',
-                                }}
-                            />
-                        ) : null}
                         <Box className={classes.buttons}>
                             <Button variant="outlined" size="small" onClick={() => setOpen_(true)}>
                                 {t('nft_button_add_collectible')}
diff --git a/packages/mask/src/plugins/EVM/UI/Web3State/getAssetsFn.ts b/packages/mask/src/plugins/EVM/UI/Web3State/getAssetsFn.ts
index 6e882c61ea2d..2474174b1637 100644
--- a/packages/mask/src/plugins/EVM/UI/Web3State/getAssetsFn.ts
+++ b/packages/mask/src/plugins/EVM/UI/Web3State/getAssetsFn.ts
@@ -1,19 +1,17 @@
 import Web3 from 'web3'
 import {
-    ChainId,
     createContract,
     createNativeToken,
     ERC721TokenDetailed,
     formatEthereumAddress,
-    FungibleAssetProvider,
     getERC721TokenDetailedFromChain,
     getERC721TokenAssetFromChain,
     getEthereumConstants,
     getRPCConstants,
     getTokenConstants,
     isSameAddress,
-    NonFungibleAssetProvider,
     Web3ProviderType,
+    FungibleAssetProvider,
 } from '@masknet/web3-shared-evm'
 import { Pageable, Pagination, TokenType, Web3Plugin } from '@masknet/plugin-infra'
 import BalanceCheckerABI from '@masknet/web3-contracts/abis/BalanceChecker.json'
@@ -30,6 +28,7 @@ export const getFungibleAssetsFn =
         const chainId = context.chainId.getCurrentValue()
         const provider = context.provider.getCurrentValue()
         const wallet = context.wallets.getCurrentValue().find((x) => isSameAddress(x.address, address))
+        const socket = await context.providerSocket
         const networks = PLUGIN_NETWORKS
         const trustedTokens = context.erc20Tokens
             .getCurrentValue()
@@ -38,8 +37,20 @@ export const getFungibleAssetsFn =
         const web3 = new Web3(provider)
         const { BALANCE_CHECKER_ADDRESS } = getEthereumConstants(chainId)
         const { NATIVE_TOKEN_ADDRESS } = getTokenConstants()
-        const dataFromProvider = await context.getAssetsList(address, FungibleAssetProvider.DEBANK)
-        const assetsFromProvider: Web3Plugin.Asset<Web3Plugin.FungibleToken>[] = dataFromProvider.map((x) => ({
+        const socketId = `mask.fetchFungibleTokenAsset_${address}`
+        let dataFromProvider = await socket.sendAsync<Web3Plugin.Asset<Web3Plugin.FungibleToken>>({
+            id: socketId,
+            method: 'mask.fetchFungibleTokenAsset',
+            params: {
+                address: address,
+                pageSize: 10000,
+            },
+        })
+        if (!dataFromProvider.length) {
+            // @ts-ignore getAssetList Asset[]
+            dataFromProvider = await context.getAssetsList(address, FungibleAssetProvider.DEBANK)
+        }
+        const assetsFromProvider: Web3Plugin.Asset<Web3Plugin.FungibleToken>[] = dataFromProvider.map((x: any) => ({
             id: x.token.address,
             chainId: x.token.chainId,
             balance: x.balance,
@@ -59,15 +70,20 @@ export const getFungibleAssetsFn =
         if (!BALANCE_CHECKER_ADDRESS) return assetsFromProvider
         const balanceCheckerContract = createContract(web3, BALANCE_CHECKER_ADDRESS, BalanceCheckerABI as AbiItem[])
         if (!balanceCheckerContract) return assetsFromProvider
-        const balanceList: string[] = await balanceCheckerContract?.methods
-            .balances(
-                [address],
-                trustedTokens.map((x) => x.address),
-            )
-            .call({
-                from: undefined,
-            })
-        if (balanceList.length !== trustedTokens?.length) return assetsFromProvider
+        let balanceList: string[]
+        try {
+            balanceList = await balanceCheckerContract?.methods
+                .balances(
+                    [address],
+                    trustedTokens.map((x) => x.address),
+                )
+                .call({
+                    from: undefined,
+                })
+            if (balanceList.length !== trustedTokens?.length) return assetsFromProvider
+        } catch {
+            balanceList = []
+        }
 
         const assetFromChain = balanceList.map(
             (balance, idx): Web3Plugin.Asset<Web3Plugin.FungibleToken> => ({
@@ -115,8 +131,8 @@ export const getNonFungibleTokenFn =
         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 provider = context.provider.getCurrentValue()
@@ -147,15 +163,16 @@ export const getNonFungibleTokenFn =
             tokenInDb = fromChain.filter(Boolean) as any[]
         }
 
-        const tokenFromProvider = await context.getAssetsListNFT(
-            address.toLowerCase(),
-            network?.chainId ?? ChainId.Mainnet,
-            NonFungibleAssetProvider.OPENSEA,
-            pagination?.page ?? 0,
-            pagination?.size ?? 20,
-        )
+        const socketId = `mask.fetchNonFungibleCollectibleAsset_${address}`
+        await socket.send({
+            id: socketId,
+            method: 'mask.fetchNonFungibleCollectibleAsset',
+            params: { address, pageSize: 40 },
+        })
+
+        const tokenFromProvider = socket.getResult<ERC721TokenDetailed>(socketId)
 
-        const allData: Web3Plugin.NonFungibleToken[] = [...tokenInDb, ...tokenFromProvider.assets]
+        const allData: Web3Plugin.NonFungibleToken[] = [...tokenInDb, ...tokenFromProvider]
             .map(
                 (x) =>
                     ({
@@ -181,7 +198,7 @@ export const getNonFungibleTokenFn =
             .filter((x) => !network || x.chainId === network.chainId)
 
         return {
-            hasNextPage: tokenFromProvider.assets.length === pagination?.size ?? 20,
+            hasNextPage: tokenFromProvider.length === pagination?.size ?? 20,
             currentPage: pagination?.page ?? 0,
             data: allData,
         }
diff --git a/packages/mask/src/plugins/Wallet/types/debank.ts b/packages/mask/src/plugins/Wallet/types/debank.ts
index 15a8a03b27d1..2fb7972f7ecb 100644
--- a/packages/mask/src/plugins/Wallet/types/debank.ts
+++ b/packages/mask/src/plugins/Wallet/types/debank.ts
@@ -97,6 +97,7 @@ export interface HistoryRecord {
 
 export interface BalanceRecord {
     balance: number
+    // TODO: convert to enum
     chain: 'eth' | 'bsc' | string
     decimals: number
     display_symbol: null
diff --git a/packages/mask/src/web3/context.ts b/packages/mask/src/web3/context.ts
index ae80a7c7e220..7811f89d3f0a 100644
--- a/packages/mask/src/web3/context.ts
+++ b/packages/mask/src/web3/context.ts
@@ -32,6 +32,7 @@ import type { InternalSettings } from '../settings/createSettings'
 import { Flags } from '../../shared'
 import { createExternalProvider } from './helpers'
 import Services from '../extension/service'
+import { getProxyWebsocketInstance } from '@masknet/web3-shared-base'
 
 function createWeb3Context(disablePopup = false, isMask = false): Web3ProviderType {
     const Web3Provider = createExternalProvider(
@@ -134,6 +135,7 @@ function createWeb3Context(disablePopup = false, isMask = false): Web3ProviderTy
         getAddressNamesList: WalletRPC.getAddressNames,
         getTransactionList: WalletRPC.getTransactionList,
         fetchERC20TokensFromTokenLists: Services.Ethereum.fetchERC20TokensFromTokenLists,
+        providerSocket: getProxyWebsocketInstance((info) => WalletMessages.events.socketMessageUpdated.sendToAll(info)),
     }
 }
 
diff --git a/packages/plugins/Wallet/src/messages.ts b/packages/plugins/Wallet/src/messages.ts
index 4146a2c7d109..17b57b18d56d 100644
--- a/packages/plugins/Wallet/src/messages.ts
+++ b/packages/plugins/Wallet/src/messages.ts
@@ -137,6 +137,13 @@ export type SelectNftContractDialogEvent = {
     contract?: ERC721ContractDetailed
 }
 
+export type SocketMessageUpdatedEvent = {
+    id: string
+    done: boolean
+    error?: unknown
+    from: 'cache' | 'remote'
+}
+
 export interface WalletMessage {
     /**
      * Transaction dialog
@@ -218,6 +225,7 @@ export interface WalletMessage {
     erc1155TokensUpdated: void
     /** true: Now locked; false: Now unlocked */
     walletLockStatusUpdated: boolean
+    socketMessageUpdated: SocketMessageUpdatedEvent
 
     rpc: unknown
 }
diff --git a/packages/provider-proxy/build.mjs b/packages/provider-proxy/build.mjs
new file mode 100644
index 000000000000..164a6cf734cf
--- /dev/null
+++ b/packages/provider-proxy/build.mjs
@@ -0,0 +1,61 @@
+// @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 rollup = awaitChildProcess(
+    spawn('pnpm run build:rollup', {
+        cwd: __dirname,
+        shell: true,
+        stdio: 'inherit',
+    }),
+)
+await rollup
+const version = JSON.parse(await readFile(join(__dirname, 'package.json'), 'utf-8')).version
+const buildVersion = process.env.BUILD_VERSION ?? formatDate(Date.now(), 'yyyymmddHHMMss')
+const packageJSON = {
+    name: '@dimensiondev/provider-proxy',
+    repository: 'https://github.com/DimensionDev/Maskbook',
+    version: `${version}-${buildVersion}`,
+    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
new file mode 100644
index 000000000000..b5ea09a9fada
--- /dev/null
+++ b/packages/provider-proxy/package.json
@@ -0,0 +1,25 @@
+{
+  "name": "@dimensiondev/provider-proxy",
+  "version": "0.0.1",
+  "scripts": {
+    "build:rollup": "rollup -c",
+    "build": "node ./build.mjs"
+  },
+  "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": "^21.0.1",
+    "@rollup/plugin-json": "^4.1.0",
+    "@rollup/plugin-node-resolve": "^13.0.6",
+    "@rollup/plugin-sucrase": "^4.0.1",
+    "date-fns": "^2.27.0",
+    "rollup": "^2.60.1",
+    "rollup-plugin-dts": "4.0.1"
+  }
+}
diff --git a/packages/provider-proxy/rollup.config.js b/packages/provider-proxy/rollup.config.js
new file mode 100644
index 000000000000..0c01fd5525f2
--- /dev/null
+++ b/packages/provider-proxy/rollup.config.js
@@ -0,0 +1,46 @@
+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'
+
+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'] }),
+    ],
+    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
new file mode 100644
index 000000000000..3e11d6090d23
--- /dev/null
+++ b/packages/provider-proxy/src/helper/request.ts
@@ -0,0 +1,23 @@
+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
new file mode 100644
index 000000000000..b02c896bc350
--- /dev/null
+++ b/packages/provider-proxy/src/index.ts
@@ -0,0 +1,10 @@
+import type { RPCMethodRegistrationValue } from './types'
+import fungibleTokenProducer from './producers/fungibleTokenAsset'
+import nonFungibleCollectionAsset from './producers/nonFungibleCollectionAsset'
+import nonFungibleCollectibleAsset from './producers/nonFungibleCollectibleAsset'
+
+export const producers: RPCMethodRegistrationValue[] = [
+    fungibleTokenProducer,
+    nonFungibleCollectibleAsset,
+    nonFungibleCollectionAsset,
+]
diff --git a/packages/provider-proxy/src/producers/fungibleTokenAsset.ts b/packages/provider-proxy/src/producers/fungibleTokenAsset.ts
new file mode 100644
index 000000000000..22b447b93604
--- /dev/null
+++ b/packages/provider-proxy/src/producers/fungibleTokenAsset.ts
@@ -0,0 +1,25 @@
+import type { Web3Plugin } from '@masknet/plugin-infra'
+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
new file mode 100644
index 000000000000..93dd2fdb021c
--- /dev/null
+++ b/packages/provider-proxy/src/producers/nonFungibleCollectibleAsset.ts
@@ -0,0 +1,41 @@
+import { getOpenSeaNFTList, getRaribleNFTList } 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 {
+        await collectAllPageDate<ERC721TokenDetailed>(
+            (page, pageInfo) => getRaribleNFTList(openSeaApiKey, address, page, size, pageInfo),
+            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/nonFungibleCollectionAsset.ts b/packages/provider-proxy/src/producers/nonFungibleCollectionAsset.ts
new file mode 100644
index 000000000000..5dbb53dfc5dd
--- /dev/null
+++ b/packages/provider-proxy/src/producers/nonFungibleCollectionAsset.ts
@@ -0,0 +1,37 @@
+import { getOpenSeaCollectionList } from '@masknet/web3-providers'
+import type { ProducerArgBase, ProducerKeyFunction, ProducerPushFunction, RPCMethodRegistrationValue } from '../types'
+import { collectAllPageDate } from '../helper/request'
+
+interface Collection {
+    name: string
+    image?: string
+    slug: string
+}
+
+interface NonFungibleCollectibleAssetArgs extends ProducerArgBase {
+    address: string
+}
+
+const nonFungibleCollectionAsset = async (
+    push: ProducerPushFunction<Collection>,
+    getKeys: ProducerKeyFunction,
+    args: NonFungibleCollectibleAssetArgs,
+): Promise<void> => {
+    const { address } = args
+    const openSeaApiKey = await getKeys('opensea')
+
+    const pageSize = 50
+    const collectFromOpenSea = await collectAllPageDate<Collection>(
+        (page: number) => getOpenSeaCollectionList(openSeaApiKey, address, page, pageSize),
+        pageSize,
+    )
+    await push(collectFromOpenSea)
+}
+
+const producer: RPCMethodRegistrationValue<Collection, NonFungibleCollectibleAssetArgs> = {
+    method: 'mask.fetchNonFungibleCollectionAsset',
+    producer: nonFungibleCollectionAsset,
+    distinctBy: (item) => item.name,
+}
+
+export default producer
diff --git a/packages/provider-proxy/src/types.ts b/packages/provider-proxy/src/types.ts
new file mode 100644
index 000000000000..cb48133c2394
--- /dev/null
+++ b/packages/provider-proxy/src/types.ts
@@ -0,0 +1,12 @@
+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
new file mode 100644
index 000000000000..fd8ba048eac1
--- /dev/null
+++ b/packages/provider-proxy/tsconfig.json
@@ -0,0 +1,16 @@
+{
+  "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/packages/shared-base/src/Identifier/IdentifierMap.ts b/packages/shared-base/src/Identifier/IdentifierMap.ts
index 0643263e4347..095e57d1b2e8 100644
--- a/packages/shared-base/src/Identifier/IdentifierMap.ts
+++ b/packages/shared-base/src/Identifier/IdentifierMap.ts
@@ -1,5 +1,4 @@
 import { Identifier } from './type'
-import { serialize } from '../serializer'
 import { immerable } from 'immer'
 
 /**
@@ -100,7 +99,6 @@ export class IdentifierMap<IdentifierType extends Identifier, T> implements Map<
         return this.entries()
     }
 }
-serialize('IdentifierMap')(IdentifierMap)
 IdentifierMap.prototype[Symbol.toStringTag] = 'IdentifierMap'
 
 export type ReadonlyIdentifierMap<IdentifierType extends Identifier, T> = ReadonlyMap<IdentifierType, T> & {
diff --git a/packages/shared-base/src/Identifier/type.ts b/packages/shared-base/src/Identifier/type.ts
index e5d259c9896f..90bb5255141b 100644
--- a/packages/shared-base/src/Identifier/type.ts
+++ b/packages/shared-base/src/Identifier/type.ts
@@ -1,4 +1,3 @@
-import { serialize } from '../serializer'
 import { Result, Ok, Err } from 'ts-results'
 
 /**
@@ -113,7 +112,6 @@ export class ProfileIdentifier extends Identifier {
         return new ProfileIdentifier(network, userId)
     }
 }
-serialize('ProfileIdentifier')(ProfileIdentifier)
 export class GroupIdentifier extends Identifier {
     static getFriendsGroupIdentifier(who: ProfileIdentifier, groupId: string) {
         return new GroupIdentifier(who.network, who.userId, groupId)
@@ -147,7 +145,6 @@ export class GroupIdentifier extends Identifier {
         return new GroupIdentifier(network, belongs, groupID)
     }
 }
-serialize('GroupIdentifier')(GroupIdentifier)
 export class PostIdentifier<T extends Identifier = Identifier> extends Identifier {
     static readonly unknown = new PostIdentifier(ProfileIdentifier.unknown, '$unknown')
     get isUnknown() {
@@ -171,7 +168,6 @@ export class PostIdentifier<T extends Identifier = Identifier> extends Identifie
         return new PostIdentifier(id.val, postId)
     }
 }
-serialize('PostIdentifier')(PostIdentifier)
 export class PostIVIdentifier extends Identifier {
     constructor(public readonly network: string, public readonly postIV: string) {
         super()
@@ -185,7 +181,6 @@ export class PostIVIdentifier extends Identifier {
         return new PostIVIdentifier(network, iv)
     }
 }
-serialize('PostIVIdentifier')(PostIVIdentifier)
 
 /**
  * This class identify the point on an EC curve.
@@ -208,7 +203,6 @@ export class ECKeyIdentifier extends Identifier {
         return new ECKeyIdentifier(curve, point)
     }
 }
-serialize('ECKeyIdentifier')(ECKeyIdentifier)
 export type PersonaIdentifier = ECKeyIdentifier
 // eslint-disable-next-line no-redeclare
 export const PersonaIdentifier = [ECKeyIdentifier]
diff --git a/packages/shared-base/src/serializer/index.ts b/packages/shared-base/src/serializer/index.ts
index ec0fa5b1831b..577aa9a14663 100644
--- a/packages/shared-base/src/serializer/index.ts
+++ b/packages/shared-base/src/serializer/index.ts
@@ -3,11 +3,52 @@ import Typeson from 'typeson'
 import type { Serialization } from 'async-call-rpc'
 import { Ok, Err, Some, None } from 'ts-results'
 import * as BN from 'bignumber.js'
-const { default: BigNumber } = BN
 
-/** @internal */
-export function serialize<T, Q>(name: string, ser?: (x: T) => Q, des?: (x: Q) => T) {
-    return <T extends Function>(constructor: T) => {
+// @ts-ignore
+import builtins from 'typeson-registry/dist/presets/builtin' // @ts-ignore
+import blob from 'typeson-registry/dist/types/blob' // @ts-ignore
+import file from 'typeson-registry/dist/types/file' // @ts-ignore
+import fileList from 'typeson-registry/dist/types/filelist' // @ts-ignore
+import imageBitMap from 'typeson-registry/dist/types/imagebitmap' // @ts-ignore
+import num from 'typeson-registry/dist/presets/special-numbers'
+import { IdentifierMap } from '../Identifier/IdentifierMap'
+import {
+    ECKeyIdentifier,
+    GroupIdentifier,
+    PostIdentifier,
+    PostIVIdentifier,
+    ProfileIdentifier,
+} from '../Identifier/type'
+
+let typeson: Typeson | undefined
+function setup() {
+    const { default: BigNumber } = BN
+    type f = (...args: any[]) => any
+    type T = [name: string, ser: f | undefined, de_ser: f | undefined, ctor: f]
+    const all: T[] = []
+    function addClass(name: string, constructor: any) {
+        all.push([name, undefined, undefined, constructor])
+    }
+    typeson = new Typeson({})
+    typeson.register(builtins)
+    typeson.register(num)
+    typeson.register([blob, file, fileList, imageBitMap, num])
+    typeson.register({ None: [(x) => x === None, () => 'None', () => None] })
+
+    addClass('Ok', Ok)
+    addClass('Err', Err)
+    addClass('Some', Some)
+
+    addClass('BigNumber', BigNumber)
+
+    addClass('ProfileIdentifier', ProfileIdentifier)
+    addClass('ECKeyIdentifier', ECKeyIdentifier)
+    addClass('GroupIdentifier', GroupIdentifier)
+    addClass('PostIdentifier', PostIdentifier)
+    addClass('PostIVIdentifier', PostIVIdentifier)
+    addClass('IdentifierMap', IdentifierMap)
+
+    for (const [name, ser, des, constructor] of all) {
         Object.defineProperty(constructor, 'name', {
             configurable: true,
             enumerable: false,
@@ -20,45 +61,31 @@ export function serialize<T, Q>(name: string, ser?: (x: T) => Q, des?: (x: Q) =>
                     ? [(x) => x instanceof constructor, ser, des]
                     : [
                           (x) => x instanceof constructor,
+                          // eslint-disable-next-line @typescript-eslint/no-loop-func
                           (x: unknown) => {
                               const y = Object.assign({}, x)
                               Object.getOwnPropertySymbols(y).forEach((x) => Reflect.deleteProperty(y, x))
-                              return typeson.encapsulate(y)
+                              return typeson!.encapsulate(y)
                           },
+                          // eslint-disable-next-line @typescript-eslint/no-loop-func
                           (x: unknown) => {
-                              const y = typeson.revive(x)
+                              const y = typeson!.revive(x)
                               Object.setPrototypeOf(y, constructor.prototype)
                               return y
                           },
                       ],
         })
-        return constructor
     }
 }
-
-// @ts-ignore
-import builtins from 'typeson-registry/dist/presets/builtin' // @ts-ignore
-import blob from 'typeson-registry/dist/types/blob' // @ts-ignore
-import file from 'typeson-registry/dist/types/file' // @ts-ignore
-import fileList from 'typeson-registry/dist/types/filelist' // @ts-ignore
-import imageBitMap from 'typeson-registry/dist/types/imagebitmap' // @ts-ignore
-import num from 'typeson-registry/dist/presets/special-numbers'
-const typeson = new Typeson({})
-typeson.register(builtins)
-typeson.register(num)
-typeson.register([blob, file, fileList, imageBitMap, num])
-serialize('Ok')(Ok)
-serialize('Err')(Err)
-serialize('Some')(Some)
-typeson.register({ None: [(x) => x === None, () => 'None', () => None] })
-serialize('BigNumber')(BigNumber)
 export const serializer: Serialization = {
     serialization(from: unknown) {
-        return typeson.encapsulate(from)
+        if (!typeson) setup()
+        return typeson!.encapsulate(from)
     },
     deserialization(to: string) {
+        if (!typeson) setup()
         try {
-            return typeson.revive(to)
+            return typeson!.revive(to)
         } catch (error) {
             console.error(error)
         }
diff --git a/packages/web3-providers/package.json b/packages/web3-providers/package.json
index 3cce0639282a..d104ab6f2e53 100644
--- a/packages/web3-providers/package.json
+++ b/packages/web3-providers/package.json
@@ -7,11 +7,13 @@
     "@masknet/plugin-infra": "workspace:*",
     "@masknet/web3-shared-base": "workspace:*",
     "@masknet/web3-shared-evm": "workspace:*",
-    "bignumber.js": "^9.0.1",
+    "bignumber.js": "9.0.1",
     "date-fns": "^2.27.0",
     "json-stable-stringify": "^1.0.1",
     "lodash-unified": "1.0.1",
     "rss3-next": "^0.6.17",
+    "socket.io-client": "2.4.0",
+    "uuid": "^8.3.2",
     "urlcat": "^2.0.4"
   }
 }
diff --git a/packages/web3-providers/src/debank/format.ts b/packages/web3-providers/src/debank/format.ts
new file mode 100644
index 000000000000..aa8cda398f62
--- /dev/null
+++ b/packages/web3-providers/src/debank/format.ts
@@ -0,0 +1,39 @@
+import BigNumber from 'bignumber.js'
+import type { WalletTokenRecord } from './type'
+import { ChainId, getChainIdFromName } from '@masknet/web3-shared-evm'
+import { CurrencyType, TokenType, Web3Plugin } from '@masknet/plugin-infra'
+import { multipliedBy, rightShift } from '@masknet/web3-shared-base'
+
+type Asset = Web3Plugin.Asset<Web3Plugin.FungibleToken>
+
+export function formatAssets(data: WalletTokenRecord[]): Asset[] {
+    return data
+        .filter((x) => x.is_verified)
+        .map((y): Asset => {
+            const chainIdFromChain = getChainIdFromName(y.chain) ?? ChainId.Mainnet
+            const address = y.id === 'eth' ? '' : y.id
+
+            return {
+                id: address,
+                chainId: chainIdFromChain,
+                token: {
+                    id: address,
+                    address: address,
+                    chainId: chainIdFromChain,
+                    type: TokenType.Fungible,
+                    decimals: y.decimals,
+                    name: y.name,
+                    symbol: y.symbol,
+                    logoURI: y.logo_url,
+                },
+                balance: rightShift(y.amount, y.decimals).toFixed(),
+                price: {
+                    [CurrencyType.USD]: new BigNumber(y.price ?? 0).toFixed(),
+                },
+                value: {
+                    [CurrencyType.USD]: multipliedBy(y.price ?? 0, y.amount).toFixed(),
+                },
+                logoURI: y.logo_url,
+            }
+        })
+}
diff --git a/packages/web3-providers/src/debank/index.ts b/packages/web3-providers/src/debank/index.ts
new file mode 100644
index 000000000000..aec25c572722
--- /dev/null
+++ b/packages/web3-providers/src/debank/index.ts
@@ -0,0 +1,21 @@
+import type { WalletTokenRecord } from './type'
+import urlcat from 'urlcat'
+import { formatAssets } from './format'
+
+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)
+    } catch {
+        return []
+    }
+}
diff --git a/packages/web3-providers/src/debank/type.ts b/packages/web3-providers/src/debank/type.ts
new file mode 100644
index 000000000000..5de8bc326fe3
--- /dev/null
+++ b/packages/web3-providers/src/debank/type.ts
@@ -0,0 +1,162 @@
+export enum DebankTransactionDirection {
+    SEND = 'send',
+    RECEIVE = 'receive',
+}
+
+export interface DictItem {
+    id: string
+    cn: string
+    en: 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']
+    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
+    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/web3-providers/src/index.ts b/packages/web3-providers/src/index.ts
index bb3ca687ace2..26f1517af6de 100644
--- a/packages/web3-providers/src/index.ts
+++ b/packages/web3-providers/src/index.ts
@@ -12,3 +12,8 @@ export const Rarible = new RaribleAPI()
 export const NFTScan = new NFTScanAPI()
 export const CoinGecko = new CoinGeckoAPI()
 export const RSS3 = new RSS3API()
+
+// Method for provider proxy
+export { getOpenSeaNFTList, getOpenSeaCollectionList } from './opensea'
+export { getAssetListFromDebank } from './debank'
+export { getRaribleNFTList } from './rarible'
diff --git a/packages/web3-providers/src/opensea/index.ts b/packages/web3-providers/src/opensea/index.ts
index 28dce5da7804..3833b950a722 100644
--- a/packages/web3-providers/src/opensea/index.ts
+++ b/packages/web3-providers/src/opensea/index.ts
@@ -13,7 +13,7 @@ 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 { NonFungibleTokenAPI } from '../types'
 import { getOrderUnitPrice, getOrderUSDPrice } from './utils'
 import type {
     OpenSeaAssetContract,
@@ -25,13 +25,14 @@ import type {
 } from './types'
 import { OPENSEA_ACCOUNT_URL, OPENSEA_API_KEY, OPENSEA_API_URL } from './constants'
 
-async function fetchFromOpenSea<T>(url: string, chainId: ChainId) {
+async function fetchFromOpenSea<T>(url: string, chainId: ChainId, apiKey?: string, env?: NonFungibleTokenAPI.APIEnv) {
     if (![ChainId.Mainnet, ChainId.Rinkeby].includes(chainId)) return
+    const currentEnv = env ?? NonFungibleTokenAPI.APIEnv.browser
     try {
         const response = await fetch(urlcat(OPENSEA_API_URL, url), {
             method: 'GET',
-            mode: 'cors',
-            headers: { 'x-api-key': OPENSEA_API_KEY, Accept: 'application/json' },
+            headers: { 'x-api-key': apiKey ?? OPENSEA_API_KEY, Accept: 'application/json' },
+            ...(currentEnv === NonFungibleTokenAPI.APIEnv.browser && { mode: 'cors' }),
         })
         return response.json() as Promise<T>
     } catch {
@@ -61,7 +62,7 @@ function createERC721TokenFromAsset(
     asset: OpenSeaResponse,
 ): ERC721TokenDetailed {
     return createERC721Token(
-        createERC721ContractFromAssetContract(address, chainId, asset?.asset_contract),
+        createERC721ContractFromAssetContract(asset?.asset_contract?.address, chainId, asset?.asset_contract),
         {
             name: asset?.name ?? asset?.asset_contract.name ?? '',
             description: asset?.description ?? '',
@@ -69,6 +70,11 @@ function createERC721TokenFromAsset(
             owner: asset?.owner.address ?? '',
         },
         tokenId,
+        {
+            name: asset.collection.name,
+            image: asset.collection.image_url || undefined,
+            slug: asset.collection.slug,
+        },
     )
 }
 
@@ -232,6 +238,12 @@ function createAssetOrder(order: OpenSeaAssetOrder): NonFungibleTokenAPI.AssetOr
 }
 
 export class OpenSeaAPI implements NonFungibleTokenAPI.Provider {
+    private readonly _apiKey
+    private readonly _env: NonFungibleTokenAPI.APIEnv
+    constructor(apiKey?: string, env?: NonFungibleTokenAPI.APIEnv) {
+        this._apiKey = apiKey
+        this._env = env ?? NonFungibleTokenAPI.APIEnv.browser
+    }
     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)
@@ -257,16 +269,21 @@ export class OpenSeaAPI implements NonFungibleTokenAPI.Provider {
 
         const requestPath = urlcat('/api/v1/assets', {
             owner: from,
-            offset: page,
+            offset: page * size,
             limit: size,
             collection: opts.pageInfo?.collection,
         })
-        const response = await fetchFromOpenSea<{ assets: OpenSeaResponse[] }>(requestPath, chainId)
+        const response = await fetchFromOpenSea<{ assets: OpenSeaResponse[] }>(
+            requestPath,
+            chainId,
+            this._apiKey,
+            this._env,
+        )
         const assets =
             response?.assets
                 .filter(
                     (x: OpenSeaResponse) =>
-                        ['non-fungible', 'semi-fungible'].includes(x.asset_contract.type) ||
+                        ['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)) ?? []
@@ -312,13 +329,14 @@ export class OpenSeaAPI implements NonFungibleTokenAPI.Provider {
         return response?.orders?.map(createAssetOrder) ?? []
     }
 
-    async getCollections(address: string, { chainId = ChainId.Mainnet, page, size }: NonFungibleTokenAPI.Options = {}) {
+    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,
+            offset: page * size,
             limit: size,
         })
-        const response = await fetchFromOpenSea<OpenSeaCollection[]>(requestPath, chainId)
+        const response = await fetchFromOpenSea<OpenSeaCollection[]>(requestPath, chainId, this._apiKey, this._env)
         if (!response) {
             return {
                 data: [],
@@ -339,3 +357,13 @@ export class OpenSeaAPI implements NonFungibleTokenAPI.Provider {
         }
     }
 }
+
+export function getOpenSeaNFTList(apiKey: string, address: string, page?: number, size?: number) {
+    const opensea = new OpenSeaAPI(apiKey, NonFungibleTokenAPI.APIEnv.proxy)
+    return opensea.getTokens(address, { page, size })
+}
+
+export function getOpenSeaCollectionList(apiKey: string, address: string, page?: number, size?: number) {
+    const opensea = new OpenSeaAPI(apiKey, NonFungibleTokenAPI.APIEnv.proxy)
+    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 64b57d83c97d..6c53e9951388 100644
--- a/packages/web3-providers/src/opensea/types.ts
+++ b/packages/web3-providers/src/opensea/types.ts
@@ -19,7 +19,7 @@ export interface Asset {
 export interface OpenSeaAssetContract extends OpenSeaFees {
     name: string
     address: string
-    type: string
+    asset_contract_type: string
     schema_name: string
     seller_fee_basis_points: number
     buyer_fee_basis_points: number
diff --git a/packages/web3-providers/src/rarible/constants.ts b/packages/web3-providers/src/rarible/constants.ts
index d6baed4a413d..603f9c9fe00c 100644
--- a/packages/web3-providers/src/rarible/constants.ts
+++ b/packages/web3-providers/src/rarible/constants.ts
@@ -4,5 +4,5 @@ export const RaribleIPFSURL = 'https://ipfs.rarible.com/ipfs/'
 export const RaribleUserURL = 'https://rarible.com/user/'
 export const RaribleRopstenUserURL = 'https://ropsten.rarible.com/user/'
 export const RaribleMainnetURL = 'https://api-mainnet.rarible.com/marketplace/api/v4/'
-export const RaribleMainnetAPI_URL = 'https://api-staging.rarible.com/protocol/v0.1'
+export const RaribleStagingMainnetAPI_URL = 'https://api-staging.rarible.com/protocol/v0.1'
 export const RaribleMainnetSearchURL = 'https://api-mainnet.rarible.com/marketplace/search/v1/'
diff --git a/packages/web3-providers/src/rarible/index.ts b/packages/web3-providers/src/rarible/index.ts
index 4bb49ef7e416..4c995aa0e84d 100644
--- a/packages/web3-providers/src/rarible/index.ts
+++ b/packages/web3-providers/src/rarible/index.ts
@@ -15,13 +15,7 @@ import {
     RaribleOfferResponse,
     RaribleProfileResponse,
 } from './types'
-import {
-    RaribleUserURL,
-    RaribleRopstenUserURL,
-    RaribleMainnetURL,
-    RaribleChainURL,
-    RaribleMainnetAPI_URL,
-} from './constants'
+import { RaribleUserURL, RaribleRopstenUserURL, RaribleMainnetURL, RaribleChainURL, RaribleURL } from './constants'
 import { toRaribleImage } from './utils'
 import { NonFungibleTokenAPI } from '..'
 
@@ -33,9 +27,10 @@ const resolveRaribleUserNetwork = createLookupTableResolver<ChainId.Mainnet | Ch
     RaribleUserURL,
 )
 
-async function fetchFromRarible<T>(url: string, path: string, init?: RequestInit) {
+async function fetchFromRarible<T>(url: string, path: string, init?: RequestInit, env?: NonFungibleTokenAPI.APIEnv) {
+    const currentEnv = env ?? NonFungibleTokenAPI.APIEnv.browser
     const response = await fetch(urlcat(url, path), {
-        mode: 'cors',
+        ...(currentEnv === NonFungibleTokenAPI.APIEnv.browser && { mode: 'cors' }),
         ...init,
     })
     return response.json() as Promise<T>
@@ -67,7 +62,7 @@ function createERC721TokenFromAsset(
         info: {
             name: asset?.meta.name ?? '',
             description: asset?.meta.description ?? '',
-            mediaUrl: toRaribleImage(asset?.meta.image.url.ORIGINAL ?? asset?.meta.image.url.PREVIEW ?? ''),
+            mediaUrl: toRaribleImage(asset?.meta.image?.url.ORIGINAL ?? asset?.meta.image?.url.PREVIEW ?? ''),
             owner: asset?.owners[0],
         },
         tokenId: tokenId,
@@ -81,7 +76,7 @@ function createNFTAsset(asset: RaribleNFTItemMapResponse, chainId: ChainId): Non
         is_verified: false,
         is_auction: false,
         token_address: asset.contract,
-        image_url: toRaribleImage(asset?.meta.image.url.ORIGINAL),
+        image_url: toRaribleImage(asset?.meta.image?.url.ORIGINAL),
         asset_contract: null,
         owner: owner
             ? {
@@ -142,6 +137,10 @@ function _getAsset(address: string, tokenId: string) {
 }
 
 export class RaribleAPI implements NonFungibleTokenAPI.Provider {
+    private readonly _env: NonFungibleTokenAPI.APIEnv
+    constructor(env?: NonFungibleTokenAPI.APIEnv) {
+        this._env = env ?? NonFungibleTokenAPI.APIEnv.browser
+    }
     async getAsset(address: string, tokenId: string, { chainId = ChainId.Mainnet }: { chainId?: ChainId } = {}) {
         const asset = await _getAsset(address, tokenId)
         if (!asset) return
@@ -154,13 +153,17 @@ export class RaribleAPI implements NonFungibleTokenAPI.Provider {
     }
 
     async getTokens(from: string, opts: NonFungibleTokenAPI.Options) {
-        const requestPath = urlcat('/ethereum/nft/items/byOwner', { owner: from, size: opts.size, ...opts.pageInfo })
+        const requestPath = urlcat('/protocol/v0.1/ethereum/nft/items/byOwner', {
+            owner: from,
+            size: opts.size,
+            ...opts.pageInfo,
+        })
         interface Payload {
             total: number
             continuation: string
             items: RaribleNFTItemMapResponse[]
         }
-        const asset = await fetchFromRarible<Payload>(RaribleMainnetAPI_URL, requestPath)
+        const asset = await fetchFromRarible<Payload>(RaribleURL, requestPath, undefined, this._env)
         if (!asset)
             return {
                 data: [],
@@ -325,3 +328,14 @@ export class RaribleAPI implements NonFungibleTokenAPI.Provider {
         })
     }
 }
+
+export function getRaribleNFTList(
+    apiKey: string,
+    address: string,
+    page?: number,
+    size?: number,
+    pageInfo?: { [key in string]: unknown },
+) {
+    const rarible = new RaribleAPI(NonFungibleTokenAPI.APIEnv.proxy)
+    return rarible.getTokens(address, { page, size, pageInfo })
+}
diff --git a/packages/web3-providers/src/rarible/types.ts b/packages/web3-providers/src/rarible/types.ts
index 011d6282ec22..33ccce1d5f90 100644
--- a/packages/web3-providers/src/rarible/types.ts
+++ b/packages/web3-providers/src/rarible/types.ts
@@ -62,7 +62,7 @@ export interface Meta {
         key: string
         value: string
     }[]
-    image: {
+    image?: {
         meta: {
             PREVIEW: {
                 type: string
diff --git a/packages/web3-providers/src/types.ts b/packages/web3-providers/src/types.ts
index 3a2db624efad..6ce0c55d3977 100644
--- a/packages/web3-providers/src/types.ts
+++ b/packages/web3-providers/src/types.ts
@@ -89,6 +89,10 @@ export namespace PriceAPI {
 }
 
 export namespace NonFungibleTokenAPI {
+    export enum APIEnv {
+        browser = 0,
+        proxy = 1,
+    }
     export enum OrderSide {
         Buy = 0,
         Sell = 1,
@@ -243,7 +247,7 @@ export namespace NonFungibleTokenAPI {
         pageInfo?: { [key in string]: unknown }
     }
 
-    interface ProviderPageable<T> {
+    export interface ProviderPageable<T> {
         data: T[]
         hasNextPage: boolean
         nextPageInfo?: { [key in string]: unknown }
diff --git a/packages/web3-providers/src/zerion/format.ts b/packages/web3-providers/src/zerion/format.ts
new file mode 100644
index 000000000000..3253b0ff1291
--- /dev/null
+++ b/packages/web3-providers/src/zerion/format.ts
@@ -0,0 +1,88 @@
+import { leftShift, multipliedBy } from '@masknet/web3-shared-base'
+import {
+    ChainId,
+    createLookupTableResolver,
+    getChainIdFromNetworkType,
+    getTokenConstants,
+    getZerionConstants,
+    NetworkType,
+} from '@masknet/web3-shared-evm'
+import BigNumber from 'bignumber.js'
+import type {
+    SocketRequestAssetScope,
+    ZerionAddressAsset,
+    ZerionAddressCovalentAsset,
+    ZerionAsset,
+    ZerionCovalentAsset,
+} from './type'
+import type { Web3Plugin } from '@masknet/plugin-infra'
+import { TokenType } from '@masknet/plugin-infra'
+
+type Asset = Web3Plugin.Asset<Web3Plugin.FungibleToken>
+
+export function resolveZerionAssetsScopeName(networkType: NetworkType) {
+    return getZerionConstants(getChainIdFromNetworkType(networkType)).ASSETS_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',
+    },
+)
+
+export function formatAssets(
+    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
+        const isNativeToken = (symbol: string) => ['ETH', 'BNB', 'MATIC', 'ARETH'].includes(symbol)
+        const address = isNativeToken(asset.symbol) ? getTokenConstants().NATIVE_TOKEN_ADDRESS : asset.asset_code
+        const chainId = resolveChainByScope(scope).chainId
+
+        return {
+            id: address,
+            chainId: chainId,
+            token: {
+                id: address,
+                name: asset.name,
+                symbol: asset.symbol,
+                decimals: asset.decimals,
+                address: address,
+                chainId: chainId,
+                type: TokenType.Fungible,
+                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/web3-providers/src/zerion/index.ts b/packages/web3-providers/src/zerion/index.ts
new file mode 100644
index 000000000000..900b064e5d51
--- /dev/null
+++ b/packages/web3-providers/src/zerion/index.ts
@@ -0,0 +1,126 @@
+import io from 'socket.io-client'
+import type {
+    SocketRequestBody,
+    SocketNameSpace,
+    SocketResponseBody,
+    ZerionTransactionResponseBody,
+    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'
+
+const ZERION_API = 'wss://api-v4.zerion.io'
+const ZERION_TOKEN = 'Mask.yEUEfDnoxgLBwNEcYPVussxxjdrGwapj'
+
+let socket: SocketIOClient.Socket | null = null
+
+export function resolveZerionAssetsScopeName(networkType: NetworkType) {
+    return getZerionConstants(getChainIdFromNetworkType(networkType)).ASSETS_SCOPE_NAME ?? ''
+}
+
+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 getTransactionListFromZerion(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
+}
+
+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)
+            }
+
+            return formatAssets(values(value) as ZerionAddressCovalentAsset[], key as SocketRequestAssetScope)
+        })
+
+        result = [...result, ...assets.flat()]
+    }
+
+    return result
+}
diff --git a/packages/web3-providers/src/zerion/type.ts b/packages/web3-providers/src/zerion/type.ts
new file mode 100644
index 000000000000..d39248b20e6e
--- /dev/null
+++ b/packages/web3-providers/src/zerion/type.ts
@@ -0,0 +1,146 @@
+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/web3-providers/tsconfig.json b/packages/web3-providers/tsconfig.json
index e2eb901529ec..5d389dbc4c67 100644
--- a/packages/web3-providers/tsconfig.json
+++ b/packages/web3-providers/tsconfig.json
@@ -6,5 +6,5 @@
     "tsBuildInfoFile": "./dist/.tsbuildinfo"
   },
   "include": ["./src", "./src/**/*.json"],
-  "references": [{ "path": "../plugin-infra" }]
+  "references": [{ "path": "../plugin-infra" }, { "path": "../web3-shared/evm" }, { "path": "../web3-shared/base" }]
 }
diff --git a/packages/web3-providers/tsconfig.tests.json b/packages/web3-providers/tsconfig.tests.json
new file mode 100644
index 000000000000..15a9322f9963
--- /dev/null
+++ b/packages/web3-providers/tsconfig.tests.json
@@ -0,0 +1,10 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "noEmit": true,
+    "tsBuildInfoFile": "./dist/tests.tsbuildinfo",
+    "types": ["node"]
+  },
+  "include": ["./**/*.test.ts"],
+  "references": [{ "path": "./tsconfig.json" }]
+}
diff --git a/packages/web3-shared/base/index.ts b/packages/web3-shared/base/index.ts
index 9c56149efa59..d2cace8c6e1e 100644
--- a/packages/web3-shared/base/index.ts
+++ b/packages/web3-shared/base/index.ts
@@ -1 +1,2 @@
 export * from './utils'
+export * from './proxy'
diff --git a/packages/web3-shared/base/package.json b/packages/web3-shared/base/package.json
index c09ae1ec6285..91c7c3c9f2c8 100644
--- a/packages/web3-shared/base/package.json
+++ b/packages/web3-shared/base/package.json
@@ -4,6 +4,12 @@
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "dependencies": {
-    "bignumber.js": "9.0.2"
+    "bignumber.js": "9.0.2",
+    "date-fns": "^2.27.0",
+    "reconnecting-websocket": "^4.4.0"
+  },
+  "devDependencies": {
+    "jest-websocket-mock": "^2.2.1",
+    "mock-socket": "^9.0.8"
   }
 }
diff --git a/packages/web3-shared/base/proxy/index.ts b/packages/web3-shared/base/proxy/index.ts
new file mode 100644
index 000000000000..8b4dc7d6d750
--- /dev/null
+++ b/packages/web3-shared/base/proxy/index.ts
@@ -0,0 +1,240 @@
+import differenceInSeconds from 'date-fns/differenceInSeconds'
+import compareAsc from 'date-fns/compareAsc'
+import ReconnectingWebSocket from 'reconnecting-websocket'
+
+export interface MessageBase {
+    id: string
+}
+
+export interface RequestMessage extends MessageBase {
+    method: string
+    params: {
+        pageSize: number
+    } & any
+    notify?: NotifyFn
+}
+
+export interface PayloadMessage<T extends unknown = unknown> extends MessageBase {
+    error?: unknown
+    results?: T[]
+}
+
+export interface SocketPoolItem<T extends unknown = unknown> {
+    createdAt: Date
+    notify: NotifyFn
+    data: T[]
+    done?: boolean
+    updatedAt?: Date
+    pickedAt?: Date
+}
+
+export type OutMessageEvent = { id: string; done: boolean; error?: unknown; from: 'cache' | 'remote' }
+export type NotifyFn = (event: OutMessageEvent) => void
+
+const POOL_CACHE_EXPIRE_TIME = 30
+const POOL_CACHE_MAX_CAPACITY = 10
+
+export class ProviderProxy {
+    private readonly _socket: ReconnectingWebSocket
+    private readonly _pool: Map<string, SocketPoolItem>
+    private readonly _globalNotify?: NotifyFn
+
+    constructor(point: string, notifyFn?: NotifyFn) {
+        this._socket = new ReconnectingWebSocket(point)
+        this._pool = new Map<string, SocketPoolItem>()
+        this._globalNotify = notifyFn
+    }
+
+    waitingOpen = () => {
+        return new Promise<void>((resolve, reject) => {
+            this._socket.addEventListener('open', () => resolve())
+            this._socket.addEventListener('error', () => reject())
+        })
+    }
+
+    onMessage = (event: MessageEvent<string>) => {
+        const { id, results, error } = JSON.parse(event.data) as PayloadMessage
+        const itemInPoll = this._pool.get(id)
+
+        if (!itemInPoll) return
+        if (error || !id) {
+            itemInPoll.notify({ id, done: true, error: error, from: 'remote' })
+        }
+
+        const updatedAt = new Date()
+        if (!results || results.length === 0) {
+            this._pool.set(id, { ...itemInPoll, done: true })
+            itemInPoll.notify({ id, done: true, from: 'remote' })
+            return
+        }
+        const dataInPool = itemInPoll?.data ?? []
+        const patchData = [...dataInPool, ...(results ?? [])]
+        this._pool.set(id, { ...itemInPoll, updatedAt, data: patchData })
+        itemInPoll.notify({ id, done: false, from: 'remote' })
+    }
+
+    registerMessage = () => {
+        this._socket.removeEventListener('message', this.onMessage)
+        this._socket.addEventListener('message', this.onMessage)
+    }
+
+    /**
+     * Send request to proxy websocket
+     * @param message
+     */
+    send(message: RequestMessage) {
+        this.clearPool()
+        const cache = this._pool.get(message.id)
+        if (cache && !cache.done) return
+        if (cache && !this.isExpired(cache)) {
+            const notify = message.notify || this._globalNotify!
+            notify({ id: message.id, done: true, from: 'cache' })
+            return
+        }
+
+        this._socket.send(JSON.stringify({ id: message.id, method: message.method, params: message.params }))
+        this._pool.set(message.id, { data: [], createdAt: new Date(), notify: message.notify || this._globalNotify! })
+    }
+
+    /**
+     * Send async request to proxy websocket, Avoid use this method
+     * @param message
+     */
+    async sendAsync<T>(message: Omit<RequestMessage, 'notify'>) {
+        this.clearPool()
+        const cache = this._pool.get(message.id)
+        if (cache && !this.isExpired(cache!)) return this.getResult<T>(message.id) ?? []
+
+        const innerMessagePromise = () =>
+            new Promise<OutMessageEvent>((resolve, reject) => {
+                ;(message as RequestMessage).notify = (info: OutMessageEvent) => {
+                    if (info.done) resolve(info)
+                    if (info.error) reject(info)
+                }
+                this.send(message as RequestMessage)
+            })
+        await innerMessagePromise()
+
+        return this.getResult<T>(message.id) ?? []
+    }
+
+    get socket(): ReconnectingWebSocket {
+        return this._socket
+    }
+
+    getResult<T>(id: string): T[] {
+        const item = this._pool.get(id)
+        if (!item) return []
+        const newItem = { ...item, pickedAt: new Date() }
+        this._pool.set(id, newItem)
+        return item.data as T[]
+    }
+
+    /**
+     * Cache is expired
+     * @param item cache item
+     * @returns boolean
+     */
+    isExpired(item: SocketPoolItem) {
+        const now = new Date()
+        return !!item.updatedAt && differenceInSeconds(now, item.updatedAt) > POOL_CACHE_EXPIRE_TIME
+    }
+
+    private clearPool() {
+        let beCleaned = []
+        const entities = Array.from(this._pool.entries())
+        // clear expired
+        beCleaned = entities.filter((x) => this.isExpired(x[1]))
+
+        // clear overed size
+        if (entities.length > POOL_CACHE_MAX_CAPACITY) {
+            const picks = entities
+                .sort((a, b) => compareAsc(a[1].pickedAt || a[1].createdAt, b[1].pickedAt || b[1].createdAt))
+                .slice(0, entities.length - POOL_CACHE_MAX_CAPACITY)
+            beCleaned = [...beCleaned, ...picks]
+        }
+        beCleaned.forEach((x) => this._pool.delete(x[0]))
+    }
+}
+
+const SOCKET_POINT =
+    process.env.NODE_ENV === 'development'
+        ? 'wss://hyper-proxy-development.mask-reverse-proxy.workers.dev'
+        : 'wss://hyper-proxy.r2d2.to'
+
+enum SocketState {
+    CONNECTING = 0,
+    OPEN = 1,
+    CLOSING = 2,
+    CLOSED = 3,
+}
+
+/**
+ * Provider a ProxySocket instance
+ * @returns a function to operate socket instance
+ */
+function getProxyWebsocketInstanceWrapper(): (notify?: NotifyFn) => Promise<ProviderProxy> {
+    let cachedInstance: ProviderProxy
+
+    const createNewInstance = async (notify?: NotifyFn) => {
+        cachedInstance = new ProviderProxy(SOCKET_POINT, notify)
+        await cachedInstance.waitingOpen()
+        cachedInstance.registerMessage()
+    }
+
+    return async (notify?: NotifyFn) => {
+        if (cachedInstance) return cachedInstance
+        await createNewInstance(notify)
+        return cachedInstance
+    }
+}
+
+export const getProxyWebsocketInstance = getProxyWebsocketInstanceWrapper()
+
+/**
+ * Provide a websocket instance for once, avoid use it.
+ * @param endPoint websocket endpoint
+ * @returns websocket instance
+ */
+export const getWebSocketInstance = async (endPoint?: string) => {
+    const socket = new WebSocket(endPoint ?? SOCKET_POINT)
+    const waitingOpen = () => {
+        return new Promise<void>((resolve, reject) => {
+            socket.addEventListener('open', () => resolve())
+            socket.addEventListener('error', () => reject())
+        })
+    }
+    await waitingOpen()
+    return socket
+}
+
+/**
+ * Provide a websocket instance for once, avoid use it.
+ * @param message endPoint
+ * @param [endPoint = SOCKET_POINT] endPoint
+ * @returns promise of request
+ */
+export const sendMessageToProxy = async <T>(message: Omit<RequestMessage, 'notify'>, endPoint?: string) => {
+    let data: T[] = []
+
+    const socket = await getWebSocketInstance(SOCKET_POINT ?? endPoint)
+
+    const sendPromise = () =>
+        new Promise<T[]>((resolve, reject) => {
+            socket.addEventListener('message', (event: MessageEvent<string>) => {
+                const { results = [], error } = JSON.parse(event.data) as PayloadMessage<T>
+                if (error) {
+                    socket.close()
+                    reject(error)
+                }
+                if (results.length === 0) {
+                    socket.close()
+                    resolve(data)
+                }
+                data = [...data, ...results]
+            })
+            socket.send(JSON.stringify(message))
+        })
+
+    return sendPromise()
+}
diff --git a/packages/web3-shared/base/tests/proxy.ts b/packages/web3-shared/base/tests/proxy.ts
new file mode 100644
index 000000000000..2bad33f2cb34
--- /dev/null
+++ b/packages/web3-shared/base/tests/proxy.ts
@@ -0,0 +1,154 @@
+import { describe, test, expect, beforeEach, afterEach, jest, afterAll, beforeAll } from '@jest/globals'
+import { SocketPoolItem, ProviderProxy } from '../proxy'
+import * as mockWS from 'jest-websocket-mock'
+import addSeconds from 'date-fns/addSeconds'
+
+const TEST_WS_POINT = 'ws://localhost:1235'
+
+describe('Proxy websocket', () => {
+    let server: mockWS.WS
+    let client: ProviderProxy
+    let mockNotifyCallback: any
+
+    const pushToClientMockData = (data: any, done?: boolean) => {
+        server.send(data)
+        if (done) {
+            server.send({ id: data.id, results: [] })
+        }
+    }
+
+    beforeEach(async () => {
+        mockNotifyCallback = jest.fn()
+        server = new mockWS.WS(TEST_WS_POINT, { jsonProtocol: true })
+        client = new ProviderProxy(TEST_WS_POINT)
+        await client.waitingOpen()
+        client.registerMessage()
+
+        await server.connected
+    })
+
+    test('should cache data by request id', async () => {
+        const id = 'fetchAsset'
+        const mockData = { id, results: ['eth', 'bsc'] }
+        const testMethod = { id, method: 'fetchAsset', params: [] }
+        client.send({ ...testMethod, notify: mockNotifyCallback })
+        pushToClientMockData(mockData)
+
+        const data = client.getResult<string>(id)
+        expect(data).toEqual(['eth', 'bsc'])
+        expect(mockNotifyCallback?.mock.calls.length).toBe(1)
+        expect(mockNotifyCallback?.mock.calls[0]).toEqual([{ id, done: false, from: 'remote' }])
+    })
+
+    test('should get data from cache when send duplicate request', async () => {
+        const id = 'fetchAsset'
+        const mockNotifyCallback2 = jest.fn()
+        const mockData = { id, results: ['eth', 'bsc'] }
+        const testMethod = { id, method: 'fetchAsset', params: [] }
+
+        client.send({ ...testMethod, notify: mockNotifyCallback })
+        pushToClientMockData(mockData, true)
+
+        const data = client.getResult<string>(id)
+        expect(data).toEqual(['eth', 'bsc'])
+        expect(mockNotifyCallback?.mock.calls.length).toBe(2)
+        expect(mockNotifyCallback?.mock.calls[0]).toEqual([{ id, done: false, from: 'remote' }])
+
+        client.send({ ...testMethod, notify: mockNotifyCallback2 })
+        expect(mockNotifyCallback2?.mock.calls.length).toBe(1)
+        expect(mockNotifyCallback2?.mock.calls[0]).toEqual([{ id, done: true, from: 'cache' }])
+    })
+
+    test('should merge cache data when server push two times data', async () => {
+        const id = 'fetchAsset2'
+        const testMethod = { method: 'fetchAsset2', params: [], id }
+        client.send({ ...testMethod, notify: mockNotifyCallback })
+        const mockData1 = { id, results: ['eth', 'bsc'] }
+        const mockData2 = { id, results: ['matic'] }
+        pushToClientMockData(mockData1)
+        pushToClientMockData(mockData2, true)
+
+        const data = client.getResult<string>(id)
+        expect(data).toEqual(['eth', 'bsc', 'matic'])
+        expect(mockNotifyCallback?.mock.calls.length).toBe(3)
+        expect(mockNotifyCallback?.mock.calls[0]).toEqual([{ id, done: false, from: 'remote' }])
+        expect(mockNotifyCallback?.mock.calls[1]).toEqual([{ id, done: false, from: 'remote' }])
+        expect(mockNotifyCallback?.mock.calls[2]).toEqual([{ id, done: true, from: 'remote' }])
+    })
+
+    test('should cache divide data when server push different response', async () => {
+        const requestID1 = 'fetchAsset1'
+        const requestID2 = 'fetchAsset2'
+        const testMethod1 = { method: requestID1, params: [], id: requestID1 }
+        const testMethod2 = { method: requestID1, params: [], id: requestID2 }
+        client.send({ ...testMethod1, notify: mockNotifyCallback })
+        client.send({ ...testMethod2, notify: mockNotifyCallback })
+        const mockData1 = { id: requestID1, results: ['eth', 'bsc'] }
+        const mockData2 = { id: requestID2, results: [1] }
+        const mockData3 = { id: requestID1, results: ['matic'] }
+        pushToClientMockData(mockData1)
+        pushToClientMockData(mockData2)
+        pushToClientMockData(mockData3)
+
+        const request1Data = client.getResult<string>(requestID1)
+        expect(request1Data).toEqual(['eth', 'bsc', 'matic'])
+        const request2Data = client.getResult<string>(requestID2)
+        expect(request2Data).toEqual([1])
+        expect(mockNotifyCallback?.mock.calls.length).toBe(3)
+        expect(mockNotifyCallback?.mock.calls[0]).toEqual([{ id: requestID1, done: false, from: 'remote' }])
+        expect(mockNotifyCallback?.mock.calls[1]).toEqual([{ id: requestID2, done: false, from: 'remote' }])
+        expect(mockNotifyCallback?.mock.calls[2]).toEqual([{ id: requestID1, done: false, from: 'remote' }])
+    })
+
+    test('should clear cache ', async () => {
+        Array.from({ length: 12 }, (v, i) => i).forEach((x) => {
+            const id = `mask.fetchAsset_${x}`
+            const mockData = { id, results: ['eth', 'bsc'] }
+            const testMethod = { method: 'fetchAsset', params: [], id }
+            client.send({ ...testMethod, notify: mockNotifyCallback })
+            pushToClientMockData(mockData)
+
+            // @ts-ignore
+            const data = client.getResult<string>(id)
+            expect(data).toEqual(['eth', 'bsc'])
+        })
+
+        const data = client.getResult<string>('mask.fetchAsset_0')
+        expect(data).toEqual([])
+    })
+
+    afterEach((done) => {
+        client?.socket?.close()
+        server.server.close()
+        mockWS.WS.clean()
+        done()
+    })
+})
+
+describe('Proxy websocket unit', () => {
+    let client: ProviderProxy
+
+    beforeAll(async () => {
+        client = new ProviderProxy(TEST_WS_POINT)
+    })
+
+    test('should not expired when update before 30s', () => {
+        const item = {
+            updatedAt: addSeconds(new Date(), -20),
+        }
+        const isExpired = client.isExpired(item as SocketPoolItem)
+        expect(isExpired).toBe(false)
+    })
+
+    test('should not expired when update within 30s', () => {
+        const item = {
+            updatedAt: addSeconds(new Date(), -20),
+        }
+        const isExpired = client.isExpired(item as SocketPoolItem)
+        expect(isExpired).toBe(false)
+    })
+    afterAll((done) => {
+        client?.socket?.close()
+        done()
+    })
+})
diff --git a/packages/web3-shared/base/tsconfig.tests.json b/packages/web3-shared/base/tsconfig.tests.json
new file mode 100644
index 000000000000..3084e2f69d53
--- /dev/null
+++ b/packages/web3-shared/base/tsconfig.tests.json
@@ -0,0 +1,10 @@
+{
+  "extends": "../../../tsconfig.json",
+  "compilerOptions": {
+    "noEmit": true,
+    "tsBuildInfoFile": "../dist/base.tsbuildinfo",
+    "types": ["node"]
+  },
+  "include": ["./tests"],
+  "references": [{ "path": "./tsconfig.json" }]
+}
diff --git a/packages/web3-shared/evm/context/type.ts b/packages/web3-shared/evm/context/type.ts
index e84400683b85..d37be05935a7 100644
--- a/packages/web3-shared/evm/context/type.ts
+++ b/packages/web3-shared/evm/context/type.ts
@@ -18,6 +18,7 @@ import type {
     BalanceOfChains,
     ERC721TokenCollectionInfo,
 } from '../types'
+import type { ProviderProxy } from '@masknet/web3-shared-base'
 
 export interface Web3ProviderType {
     allowTestnet: Subscription<boolean>
@@ -79,4 +80,5 @@ export interface Web3ProviderType {
         hasNextPage: boolean
     }>
     fetchERC20TokensFromTokenLists: (urls: string[], chainId: ChainId) => Promise<ERC20TokenDetailed[]>
+    providerSocket: Promise<ProviderProxy>
 }
diff --git a/packages/web3-shared/evm/hooks/index.ts b/packages/web3-shared/evm/hooks/index.ts
index a2fcdd16509b..263cf63cdd76 100644
--- a/packages/web3-shared/evm/hooks/index.ts
+++ b/packages/web3-shared/evm/hooks/index.ts
@@ -60,6 +60,8 @@ export * from './useChainColor'
 export * from './useResolveENS'
 export * from './useResolveUNS'
 export * from './useGasLimit'
+export * from './useSocketOnce'
+export * from './useSocket'
 
 // wallet plugin related
 export * from './useWalletPrimary'
diff --git a/packages/web3-shared/evm/hooks/useCollectibles.ts b/packages/web3-shared/evm/hooks/useCollectibles.ts
index c8780d4f5646..a7f302e9dc19 100644
--- a/packages/web3-shared/evm/hooks/useCollectibles.ts
+++ b/packages/web3-shared/evm/hooks/useCollectibles.ts
@@ -1,76 +1,46 @@
-import { ChainId, NonFungibleAssetProvider, ERC721TokenCollectionInfo, ERC721TokenDetailed } from '../types'
-import { useAsyncRetry } from 'react-use'
+import type { ChainId, ERC721TokenCollectionInfo, ERC721TokenDetailed } from '../types'
 import { useWeb3Context } from '../context'
 import { uniqWith } from 'lodash-unified'
 import { isSameAddress } from '../utils'
-import type { AsyncStateRetry } from 'react-use/lib/useAsyncRetry'
-
-export function useCollections(
-    address: string,
-    chainId: ChainId | null,
-    provider: NonFungibleAssetProvider,
-    page: number,
-    size: number,
-): AsyncStateRetry<{
-    collections: ERC721TokenCollectionInfo[]
-    hasNextPage: boolean
-}> {
-    const { getCollectionsNFT } = useWeb3Context()
-
-    return useAsyncRetry(async () => {
-        if (!address) {
-            return {
-                collections: [],
-                hasNextPage: false,
-            }
-        }
-
-        const result = await getCollectionsNFT(address.toLowerCase(), chainId ?? ChainId.Mainnet, provider, page, size)
-
-        return result
-    }, [address, provider, page, chainId])
+import { useSocket } from './useSocket'
+
+export function useCollections(address: string, chainId: ChainId | null) {
+    const id = `mask.fetchNonFungibleCollectionAsset_${address}_${chainId}`
+    const message = {
+        id,
+        method: 'mask.fetchNonFungibleCollectionAsset',
+        params: {
+            address: address,
+            pageSize: 200,
+        },
+    }
+    return useSocket<ERC721TokenCollectionInfo>(message)
 }
 
-export function useCollectibles(
-    address: string,
-    chainId: ChainId | null,
-    provider: NonFungibleAssetProvider,
-    page: number,
-    size: number,
-    collection?: string,
-): AsyncStateRetry<{
-    collectibles: ERC721TokenDetailed[]
-    hasNextPage: boolean
-}> {
-    const { getAssetsListNFT, erc721Tokens } = useWeb3Context()
-
-    return useAsyncRetry(async () => {
-        if (!address) {
-            return {
-                collectibles: [],
-                hasNextPage: false,
-            }
-        }
-
-        const result = await getAssetsListNFT(
-            address.toLowerCase(),
-            chainId ?? ChainId.Mainnet,
-            provider,
-            page,
-            size,
-            collection,
-        )
-
-        return {
-            collectibles: uniqWith(
-                [
-                    ...result.assets,
-                    ...erc721Tokens.getCurrentValue().filter((x) => !chainId || x.contractDetailed.chainId === chainId),
-                ],
-                (a, b) =>
-                    isSameAddress(a.contractDetailed.address, b.contractDetailed.address) && a.tokenId === b.tokenId,
-            ),
-            hasNextPage: result.hasNextPage,
-        }
-    }, [address, provider, page, erc721Tokens, chainId])
+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.fetchNonFungibleCollectibleAsset',
+        params: {
+            address: address,
+            pageSize: 30,
+        },
+    }
+
+    const { data, state, error, retry } = useSocket<ERC721TokenDetailed>(message)
+    const all = uniqWith(
+        [
+            ...(data ?? []),
+            ...erc721Tokens.getCurrentValue().filter((x) => !chainId || x.contractDetailed.chainId === chainId),
+        ],
+        (a, b) => isSameAddress(a.contractDetailed.address, b.contractDetailed.address) && a.tokenId === b.tokenId,
+    )
+    return {
+        data: all as ERC721TokenDetailed[],
+        state,
+        error,
+        retry,
+    }
 }
diff --git a/packages/web3-shared/evm/hooks/useSocket.ts b/packages/web3-shared/evm/hooks/useSocket.ts
new file mode 100644
index 000000000000..c92dba94bf68
--- /dev/null
+++ b/packages/web3-shared/evm/hooks/useSocket.ts
@@ -0,0 +1,46 @@
+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 { 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] = useState(uuid())
+    const { value: socket, loading } = useAsyncRetry(() => providerSocket, [])
+
+    const { retry } = useAsyncRetry(async () => {
+        if (!socket || !message.id || loading) return
+        const requestId = `${message.id}_${id}`
+        const notifyUpdatedHook: NotifyFn = (info) => {
+            if (!info.done) {
+                setState(SocketState.receiving)
+            } else {
+                setState(SocketState.done)
+            }
+            setError(info.error)
+            if (!socket) return
+            const requestId = `${message.id}_${id}`
+            setData(socket.getResult<T>(requestId))
+        }
+
+        socket.send({ ...message, notify: notifyUpdatedHook, id: requestId })
+        // Get data from cache
+        setData(socket.getResult<T>(requestId))
+        setState(SocketState.sent)
+    }, [message.id, socket, loading])
+
+    return { data: data ?? [], state, error, retry }
+}
diff --git a/packages/web3-shared/evm/hooks/useSocketOnce.ts b/packages/web3-shared/evm/hooks/useSocketOnce.ts
new file mode 100644
index 000000000000..62b4fb866bc8
--- /dev/null
+++ b/packages/web3-shared/evm/hooks/useSocketOnce.ts
@@ -0,0 +1,44 @@
+import { getWebSocketInstance, PayloadMessage, RequestMessage } from '@masknet/web3-shared-base'
+import { useEffect, useState } from 'react'
+import { useAsyncRetry } from 'react-use'
+
+export const useSocketOnce = <T>(message: Omit<RequestMessage, 'notify'>) => {
+    const [data, setData] = useState<T[]>([])
+    const [done, setDone] = useState(false)
+    const [error, setError] = useState<unknown>()
+    const { value: ws, retry } = useAsyncRetry(() => getWebSocketInstance(), [])
+
+    useEffect(() => {
+        if (!ws) return
+        ws.addEventListener('message', (event: MessageEvent<string>) => {
+            const { results = [], error } = JSON.parse(event.data) as PayloadMessage<T>
+            if (error) {
+                setError(error)
+                setDone(true)
+                return
+            }
+            if (results.length === 0) {
+                setDone(true)
+                return
+            }
+            setData((pr) => [...pr, ...results])
+        })
+        ws.send(JSON.stringify(message))
+
+        return () => {
+            ws.close()
+        }
+    }, [ws])
+
+    return {
+        done,
+        error,
+        data,
+        retry: () => {
+            setData([])
+            setError(undefined)
+            setDone(false)
+            retry()
+        },
+    }
+}
diff --git a/packages/web3-shared/evm/package.json b/packages/web3-shared/evm/package.json
index 5e3ee7ba8e4c..082ce112c66d 100644
--- a/packages/web3-shared/evm/package.json
+++ b/packages/web3-shared/evm/package.json
@@ -3,6 +3,7 @@
   "private": true,
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
+  "sideEffects": false,
   "dependencies": {
     "@ensdomains/address-encoder": "^0.2.6",
     "@masknet/shared-base": "workspace:*",
@@ -13,6 +14,7 @@
     "@types/punycode": "^2.1.0",
     "@unstoppabledomains/resolution": "^5.0.1",
     "bignumber.js": "9.0.2",
+    "uuid": "^8.3.2",
     "ethereum-blockies": "^0.1.1",
     "fortmatic": "^2.2.1",
     "fuse.js": "^6.5.3",
diff --git a/packages/web3-shared/evm/types/index.ts b/packages/web3-shared/evm/types/index.ts
index 98a5802b490b..0116fd92c4b7 100644
--- a/packages/web3-shared/evm/types/index.ts
+++ b/packages/web3-shared/evm/types/index.ts
@@ -181,6 +181,11 @@ export interface ERC721TokenDetailed {
     tokenId: string
     info: ERC721TokenInfo
     contractDetailed: ERC721ContractDetailed
+    collection?: {
+        name: string
+        image?: string
+        slug: string
+    }
 }
 
 export interface ERC721TokenRecordInDatabase extends ERC721TokenDetailed {
diff --git a/packages/web3-shared/evm/utils/token.ts b/packages/web3-shared/evm/utils/token.ts
index 4877a5aea7e5..8d8a37e0715d 100644
--- a/packages/web3-shared/evm/utils/token.ts
+++ b/packages/web3-shared/evm/utils/token.ts
@@ -75,11 +75,17 @@ export function createERC721Token(
     contractDetailed: ERC721ContractDetailed,
     info: ERC721TokenInfo,
     tokenId: string,
+    collection?: {
+        name: string
+        image?: string
+        slug: string
+    },
 ): ERC721TokenDetailed {
     return {
         contractDetailed,
         info,
         tokenId,
+        collection,
     }
 }
 
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index bad111c8fe8a..c15affa0d25a 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -780,6 +780,37 @@ 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': ^21.0.1
+      '@rollup/plugin-json': ^4.1.0
+      '@rollup/plugin-node-resolve': ^13.0.6
+      '@rollup/plugin-sucrase': ^4.0.1
+      date-fns: ^2.27.0
+      rollup: ^2.60.1
+      rollup-plugin-dts: 4.0.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.62.0
+      '@rollup/plugin-commonjs': 21.0.1_rollup@2.62.0
+      '@rollup/plugin-json': 4.1.0_rollup@2.62.0
+      '@rollup/plugin-node-resolve': 13.1.1_rollup@2.62.0
+      '@rollup/plugin-sucrase': 4.0.1_rollup@2.62.0
+      date-fns: 2.27.0
+      rollup: 2.62.0
+      rollup-plugin-dts: 4.0.1_f989a9f75f95e6331defeb4529ad92f3
+
   packages/public-api:
     specifiers: {}
 
@@ -970,12 +1001,14 @@ importers:
       '@masknet/plugin-infra': workspace:*
       '@masknet/web3-shared-base': workspace:*
       '@masknet/web3-shared-evm': workspace:*
-      bignumber.js: ^9.0.1
+      bignumber.js: 9.0.1
       date-fns: ^2.27.0
       json-stable-stringify: ^1.0.1
       lodash-unified: 1.0.1
       rss3-next: ^0.6.17
+      socket.io-client: 2.4.0
       urlcat: ^2.0.4
+      uuid: ^8.3.2
     dependencies:
       '@masknet/plugin-infra': link:../plugin-infra
       '@masknet/web3-shared-base': link:../web3-shared/base
@@ -985,13 +1018,24 @@ importers:
       json-stable-stringify: 1.0.1
       lodash-unified: 1.0.1_bd4845f8c1bf1d81a616b60758034d0a
       rss3-next: 0.6.17_typescript@4.6.0-dev.20211202
+      socket.io-client: 2.4.0
       urlcat: 2.0.4
+      uuid: 8.3.2
 
   packages/web3-shared/base:
     specifiers:
       bignumber.js: 9.0.2
+      date-fns: ^2.27.0
+      jest-websocket-mock: ^2.2.1
+      mock-socket: ^9.0.8
+      reconnecting-websocket: ^4.4.0
     dependencies:
       bignumber.js: 9.0.2
+      date-fns: 2.27.0
+      reconnecting-websocket: 4.4.0
+    devDependencies:
+      jest-websocket-mock: 2.2.1_mock-socket@9.0.8
+      mock-socket: 9.0.8
 
   packages/web3-shared/evm:
     specifiers:
@@ -1013,6 +1057,7 @@ importers:
       unstated-next: ^1.1.0
       urlcat: ^2.0.4
       use-subscription: ^1.5.1
+      uuid: ^8.3.2
       wallet.ts: ^1.0.1
       web3: 1.5.2
       web3-core-helpers: 1.5.2
@@ -1035,6 +1080,7 @@ importers:
       unstated-next: 1.1.0
       urlcat: 2.0.4
       use-subscription: 1.5.1_react@18.0.0-rc.0
+      uuid: 8.3.2
       wallet.ts: 1.0.1
       web3: 1.5.2
       web3-core-helpers: 1.5.2
@@ -5194,6 +5240,16 @@ packages:
     resolution: {integrity: sha1-p3c2C1s5oaLlEG+OhY8v0tBgxXA=}
     dev: false
 
+  /@rollup/plugin-alias/3.1.9_rollup@2.62.0:
+    resolution: {integrity: sha512-QI5fsEvm9bDzt32k39wpOwZhVzRcL5ydcffUHMyLVaVaLeC70I8TJZ17F1z1eMoLu4E/UOcH9BWVkKpIKdrfiw==}
+    engines: {node: '>=8.0.0'}
+    peerDependencies:
+      rollup: ^1.20.0||^2.0.0
+    dependencies:
+      rollup: 2.62.0
+      slash: 3.0.0
+    dev: true
+
   /@rollup/plugin-commonjs/21.0.1_rollup@2.62.0:
     resolution: {integrity: sha512-EA+g22lbNJ8p5kuZJUYyhhDK7WgJckW5g4pNN7n4mAFUM96VuwUnNT3xr2Db2iCZPI1pJPbGyfT5mS9T1dHfMg==}
     engines: {node: '>= 8.0.0'}
@@ -12243,7 +12299,6 @@ packages:
   /date-fns/2.27.0:
     resolution: {integrity: sha512-sj+J0Mo2p2X1e306MHq282WS4/A8Pz/95GIFcsPNMPMZVI3EUrAdSv90al1k+p74WGLCruMXk23bfEDZa71X9Q==}
     engines: {node: '>=0.11'}
-    dev: false
 
   /debug/2.6.9:
     resolution: {integrity: sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==}
@@ -17009,6 +17064,15 @@ packages:
       string-length: 4.0.2
     dev: true
 
+  /jest-websocket-mock/2.2.1_mock-socket@9.0.8:
+    resolution: {integrity: sha512-fhsGLXrPfs06PhHoxqOSA9yZ6Rb4qYrf4Wcm7/nfRzjlrf1gIeuhYUkzMRjjE0TMQ37SwkmeLanwrZY4ZaNp8g==}
+    peerDependencies:
+      mock-socket: ^8||^9
+    dependencies:
+      jest-diff: 27.4.2
+      mock-socket: 9.0.8
+    dev: true
+
   /jest-worker/26.6.2:
     resolution: {integrity: sha512-KWYVV1c4i+jbMpaBC+U++4Va0cp8OisU185o73T1vo99hqi7w8tSJfUXYswwqqrjzwxa6KpRK54WhPvwf5w6PQ==}
     engines: {node: '>= 10.13.0'}
@@ -18333,6 +18397,11 @@ packages:
     resolution: {integrity: sha512-qYvlv/exQ4+svI3UOvPUpLDF0OMX5euvUH0Ny4N5QyRyhNdgAgUrVH3iUINSzEPLvx0kbo/Bp28GJKIqvE7URw==}
     dev: false
 
+  /mock-socket/9.0.8:
+    resolution: {integrity: sha512-8Syqkaaa2SzRqW68DEsnZkKQicHP7hVzfj3uCvigB5TL79H1ljKbwmOcRIENkx0ZTyu/5W6u+Pk9Qy6JCp38Ww==}
+    engines: {node: '>= 8'}
+    dev: true
+
   /move-concurrently/1.0.1:
     resolution: {integrity: sha1-viwAX9oy4LKa8fBdfEszIUxwH5I=}
     dependencies:
@@ -20544,6 +20613,10 @@ packages:
       resolve: 1.20.0
     dev: true
 
+  /reconnecting-websocket/4.4.0:
+    resolution: {integrity: sha512-D2E33ceRPga0NvTDhJmphEgJ7FUYF0v4lr1ki0csq06OdlxKfugGzN0dSkxM/NfqCxYELK4KcaTOUOjTV6Dcng==}
+    dev: false
+
   /recursive-readdir/2.2.2:
     resolution: {integrity: sha512-nRCcW9Sj7NuZwa2XvH9co8NPeXUBhZP7CRKJtU+cS6PW9FpCIFoI5ib0NT1ZrbNuPoRy0ylyCaUL8Gih4LSyFg==}
     engines: {node: '>=0.10.0'}
@@ -21021,6 +21094,20 @@ packages:
     dependencies:
       bn.js: 5.2.0
 
+  /rollup-plugin-dts/4.0.1_f989a9f75f95e6331defeb4529ad92f3:
+    resolution: {integrity: sha512-DNv5F8pro/r0Hkx3JWKRtJZocDnqXfgypoajeiaNq134rYaFcEIl/oas5PogD1qexMadVijsHyVko1Chig0OOQ==}
+    engines: {node: '>=v12.22.6'}
+    peerDependencies:
+      rollup: ^2.56.3
+      typescript: ^4.4.2
+    dependencies:
+      magic-string: 0.25.7
+      rollup: 2.62.0
+      typescript: 4.6.0-dev.20211202
+    optionalDependencies:
+      '@babel/code-frame': 7.16.0
+    dev: true
+
   /rollup-plugin-terser/7.0.2_rollup@2.62.0:
     resolution: {integrity: sha512-w3iIaU4OxcF52UUXiZNsNeuXIMDvFrr+ZXK6bFZ0Q60qyVfq4uLptoS4bbq3paG3x216eQllFZX7zt6TIImguQ==}
     peerDependencies:
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index c43b8674a4ef..dab9fff242bf 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -35,3 +35,4 @@ packages:
   - 'packages/external-plugin-previewer'
   - 'packages/backup-format'
   - 'packages/encryption'
+  - 'packages/provider-proxy'
diff --git a/tsconfig.json b/tsconfig.json
index 97551e4c7172..791c7ec99e97 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -7,6 +7,7 @@
     { "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" },