add basic wallet test suite (#672)

- downgrade trpc for chrome extension usage
- remove trpc patch
- update vite
- replace vitest watch for run
- replace api for create fn to await Next headers for context
- seperate storage module from keystore
- use wxt chrome storage
- add vitest config
- stub chrome runtime
- stub browser
- test add, import and get wallet methods

closes status-im/status-website#1564

Author: felicio

apps/api/package.json

@@ -16,9 +16,9 @@
   },
   "dependencies": {
     "@status-im/wallet": "workspace:*",
-    "@trpc/client": "11.1.0",
-    "@trpc/server": "11.1.0",
-    "@trpc/next": "11.1.0",
+    "@trpc/client": "10.45.2",
+    "@trpc/server": "10.45.2",
+    "@trpc/next": "10.45.2",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "next": "15.3.0",

apps/portfolio/src/app/[address]/@detail/assets/[ticker]/page.tsx

@@ -8,7 +8,7 @@ import { notFound } from 'next/navigation'
 import { MDXRemote } from 'next-mdx-remote/rsc'
 import { ErrorBoundary } from 'react-error-boundary'
 
-import { api } from '../../../../..//data/api'
+import { getAPIClient } from '../../../../..//data/api'
 import { Balance } from '../../../../_components/balance'
 import { BuyCryptoDrawer } from '../../../../_components/buy-crypto-drawer'
 import { portfolioComponents } from '../../../../_components/content'
@@ -77,16 +77,18 @@ async function Token({
   networks: NetworkType[]
   keyHash: string
 }) {
+  const apiClient = await getAPIClient()
+
   let token: ApiOutput['assets']['token'] | ApiOutput['assets']['nativeToken']
 
   if (slug.startsWith('0x')) {
-    token = await api.assets.token({
+    token = await apiClient.assets.token({
       address: address,
       networks: networks as NetworkType[],
       contract: slug,
     })
   } else if (slug.toUpperCase() === 'ETH') {
-    token = await api.assets.nativeToken({
+    token = await apiClient.assets.nativeToken({
       address,
       networks: networks as NetworkType[],
       symbol: slug.toUpperCase(),
@@ -325,25 +327,27 @@ async function AssetChart({
     | ApiOutput['assets']['nativeTokenPriceChart']
   let balanceChart: ApiOutput['assets']['tokenBalanceChart']
 
+  const apiClient = await getAPIClient()
+
   if (slug.startsWith('0x')) {
-    priceChart = await api.assets.tokenPriceChart({
+    priceChart = await apiClient.assets.tokenPriceChart({
       symbol,
       days: '1',
     })
 
-    balanceChart = await api.assets.tokenBalanceChart({
+    balanceChart = await apiClient.assets.tokenBalanceChart({
       address,
       networks: ['ethereum', 'optimism', 'arbitrum', 'base', 'polygon', 'bsc'],
       contract: slug,
       days: '30',
     })
   } else if (slug.toUpperCase() === 'ETH') {
-    priceChart = await api.assets.nativeTokenPriceChart({
+    priceChart = await apiClient.assets.nativeTokenPriceChart({
       symbol: slug.toUpperCase(),
       days: '1',
     })
 
-    balanceChart = await api.assets.nativeTokenBalanceChart({
+    balanceChart = await apiClient.assets.nativeTokenBalanceChart({
       address,
       networks: ['ethereum', 'optimism', 'arbitrum', 'base', 'polygon', 'bsc'],
       days: '30',

apps/portfolio/src/app/[address]/@detail/collectibles/[network]/[contract]/[id]/page.tsx

@@ -4,7 +4,7 @@ import { Button } from '@status-im/components'
 import { ExternalIcon, OptionsIcon, SadIcon } from '@status-im/icons/20'
 import { OpenseaIcon } from '@status-im/icons/social'
 
-import { api } from '../../../../../../../data/api'
+import { getAPIClient } from '../../../../../../../data/api'
 import { CurrencyAmount } from '../../../../../../_components/currency-amount'
 import { NetworkLogo } from '../../../../../../_components/network-logo'
 import { ImageLightbox } from './_components/image-lightbox'
@@ -60,7 +60,9 @@ async function Collectible({
   contract: string
   id: string
 }) {
-  const collectible = await api.collectibles.collectible({
+  const apiClient = await getAPIClient()
+
+  const collectible = await apiClient.collectibles.collectible({
     contract,
     tokenId: id,
     network,

apps/portfolio/src/app/[address]/@list/@balance/default.tsx

@@ -1,4 +1,4 @@
-import { api } from '../../../../data/api'
+import { getAPIClient } from '../../../../data/api'
 import { Balance } from '../../../_components/balance'
 
 import type { NetworkType } from '@status-im/wallet/data'
@@ -23,7 +23,9 @@ export default async function TotalBalance({ params, searchParams }: Props) {
     'bsc',
   ]
 
-  const { summary } = await api.assets.all({
+  const apiClient = await getAPIClient()
+
+  const { summary } = await apiClient.assets.all({
     address,
     networks: networks as NetworkType[],
   })

apps/portfolio/src/app/[address]/@list/@summary/default.tsx

@@ -1,6 +1,6 @@
 import { Address } from 'src/app/_components/address'
 
-import { api } from '../../../../data/api'
+import { getAPIClient } from '../../../../data/api'
 
 import type { NetworkType } from '@status-im/wallet/data'
 
@@ -24,7 +24,9 @@ export default async function Summary({ params, searchParams }: Props) {
     'bsc',
   ]
 
-  const { summary } = await api.assets.all({
+  const apiClient = await getAPIClient()
+
+  const { summary } = await apiClient.assets.all({
     address,
     networks: networks as NetworkType[],
   })

apps/portfolio/src/app/[address]/@list/assets/page.tsx

@@ -1,4 +1,4 @@
-import { api } from '../../../../data/api'
+import { getAPIClient } from '../../../../data/api'
 import { AssetsTable } from './_components/assets-table'
 
 import type { NetworkType } from '@status-im/wallet/data'
@@ -25,7 +25,9 @@ export default async function AssetsList(props: Props) {
     'bsc',
   ]
 
-  const all = await api.assets.all({
+  const apiClient = await getAPIClient()
+
+  const all = await apiClient.assets.all({
     address: address,
     networks: networks as NetworkType[],
   })

apps/portfolio/src/app/[address]/@list/collectibles/_actions.ts

@@ -1,6 +1,6 @@
 'use server'
 
-import { api } from '../../../../data/api'
+import { getAPIClient } from '../../../../data/api'
 
 import type { Collectible, NetworkType } from '@status-im/wallet/data'
 
@@ -26,7 +26,9 @@ export async function getCollectibles(
 ): Promise<GetCollectiblesResponse> {
   const { address, networks, limit = 20, offset = 0, search, sort } = props
 
-  const response = await api.collectibles.page({
+  const apiClient = await getAPIClient()
+
+  const response = await apiClient.collectibles.page({
     address,
     networks,
     limit,

apps/portfolio/src/app/[address]/@list/collectibles/page.tsx

@@ -1,7 +1,7 @@
 import { Button } from '@status-im/components'
 import { ExternalIcon } from '@status-im/icons/20'
 
-import { api } from '../../../../data/api'
+import { getAPIClient } from '../../../../data/api'
 import { Image } from '../../../_components/assets'
 import { DEFAULT_SORT } from '../../../_constants'
 import { getCollectibles } from './_actions'
@@ -42,7 +42,9 @@ export default async function CollectiblesPage(props: Props) {
     direction: sortParam[1] as 'asc' | 'desc',
   }
 
-  const { collectibles, hasMore } = await api.collectibles.page({
+  const apiClient = await getAPIClient()
+
+  const { collectibles, hasMore } = await apiClient.collectibles.page({
     address,
     networks: networks as NetworkType[],
     limit: 20,

apps/portfolio/src/app/_actions.ts

@@ -4,7 +4,7 @@ import crypto from 'crypto'
 import { match } from 'ts-pattern'
 
 import { serverEnv } from '../config/env.server.mjs'
-import { api } from '../data/api'
+import { getAPIClient } from '../data/api'
 
 import type { NetworkType } from '@status-im/wallet/data'
 
@@ -181,12 +181,16 @@ export async function getAccountsData(
     throw new Error('No addresses provided')
   }
   const results = await Promise.all(
-    addresses.map(address =>
-      api.assets.all({
+    addresses.map(async address => {
+      const apiClient = await getAPIClient()
+
+      const result = await apiClient.assets.all({
         address,
         networks,
       })
-    )
+
+      return result
+    })
   )
 
   return Object.fromEntries(

apps/portfolio/src/data/api.ts

@@ -1,3 +1,13 @@
 import 'server-only'
 
-export { api } from '@status-im/wallet/data'
+import { createAPI } from '@status-im/wallet/data'
+
+let apiClient: Awaited<ReturnType<typeof createAPI>> | undefined
+
+export async function getAPIClient() {
+  if (!apiClient) {
+    apiClient = await createAPI()
+  }
+
+  return apiClient
+}