feat: api provider proxy

.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

cspell.json

@@ -359,9 +359,12 @@
         "koda",
         "Enjin",
         "poap",
-        "irss",
         "CELO",
-        "flac"
+        "flac",
+        "treeshake",
+        "xtest",
+        "xdescribe",
+        "irss"
     ],
     "ignoreRegExpList": ["/@servie/"],
     "overrides": [

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'],
 }

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 />

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),
         )
     }, [])
 

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() {