feat: add @status-im/trpc-webext

Author: yqrashawn

.envrc

@@ -0,0 +1 @@
+layout node

.gitignore

@@ -104,3 +104,5 @@ web-build/
 
 # Contentlayer
 .contentlayer
+
+/.lsp/

.vscode/settings.json

@@ -8,6 +8,7 @@
     "./packages/components",
     "./packages/status-js",
     "./packages/wallet",
+    "./packages/trpc-webext",
     "./apps/connector",
     "./apps/portfolio",
     "./apps/wallet",

apps/api/package.json

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

apps/wallet/package.json

@@ -35,11 +35,12 @@
     "@status-im/components": "workspace:*",
     "@status-im/icons": "workspace:*",
     "@status-im/wallet": "workspace:*",
+    "@status-im/trpc-webext": "workspace:*",
     "@tanstack/react-query": "^5.66.0",
     "@tanstack/react-query-devtools": "^5.66.0",
     "@tanstack/react-router": "^1.109.2",
-    "@trpc/client": "10.45.2",
-    "@trpc/server": "10.45.2",
+    "@trpc/client": "11.3.0",
+    "@trpc/server": "11.3.0",
     "@trustwallet/wallet-core": "^4.2.10",
     "@wxt-dev/storage": "^1.1.0",
     "bitcoinjs-lib": "^6.1.7",

apps/wallet/src/data/api.ts

@@ -1,11 +1,11 @@
 // import { Cardano } from '@cardano-sdk/core'
 // import { SodiumBip32Ed25519 } from '@cardano-sdk/crypto'
 // import { AddressType, InMemoryKeyAgent } from '@cardano-sdk/key-management'
-import { createTRPCProxyClient } from '@trpc/client'
+import { createWebExtHandler, webExtensionLink } from '@status-im/trpc-webext'
+import { createTRPCClient } from '@trpc/client'
 import { initTRPC } from '@trpc/server'
 import superjson from 'superjson'
-import { createChromeHandler } from 'trpc-chrome/adapter'
-import { chromeLink } from 'trpc-chrome/link'
+import { browser } from 'wxt/browser'
 import { z } from 'zod'
 
 import * as bitcoin from './bitcoin/bitcoin'
@@ -16,12 +16,17 @@ import {
   getWalletCore,
   //  type WalletCore
 } from './wallet'
+import { runtimePortToClientContextType } from './webext'
 
-const createContext = async () => {
+import type { CreateWebExtContextOptions } from '@status-im/trpc-webext/adapter'
+
+const createContext = async (webextOpts?: CreateWebExtContextOptions) => {
   const keyStore = await getKeystore()
   const walletCore = await getWalletCore()
 
   return {
+    ...webextOpts,
+    contextType: runtimePortToClientContextType(webextOpts?.req),
     keyStore,
     walletCore,
   }
@@ -591,8 +596,11 @@ const apiRouter = router({
 export type APIRouter = typeof apiRouter
 
 export async function createAPI() {
-  // @ts-expect-error: fixme!:
-  createChromeHandler({ router: apiRouter, createContext })
+  createWebExtHandler({
+    router: apiRouter,
+    createContext,
+    runtime: browser.runtime,
+  })
 
   const ctx = await createContext()
   const api = createCallerFactory(apiRouter)(ctx)
@@ -601,10 +609,13 @@ export async function createAPI() {
 }
 
 export function createAPIClient() {
-  const port = chrome.runtime.connect()
-
-  return createTRPCProxyClient<APIRouter>({
-    links: [chromeLink({ port })],
-    transformer: superjson,
+  return createTRPCClient<APIRouter>({
+    links: [
+      webExtensionLink({
+        runtime: browser.runtime,
+        timeoutMS: 30000,
+        transformer: superjson,
+      }),
+    ],
   })
 }

apps/wallet/src/data/webext.ts

@@ -0,0 +1,15 @@
+import type { Runtime } from 'wxt/browser'
+
+export type TRPCClientContextType = 'POPUP' | 'SIDE_PANEL' | 'PAGE' | 'TAB'
+
+export function runtimePortToClientContextType(
+  port?: Runtime.Port,
+): TRPCClientContextType | undefined {
+  const { origin } = globalThis.location
+  if (!port) return
+  if (port.sender?.url?.startsWith(`${origin}/sidepanel.html`))
+    return 'SIDE_PANEL'
+  if (port.sender?.url?.startsWith(`${origin}/popup.html`)) return 'POPUP'
+  if (port.sender?.url?.startsWith(`${origin}/page.html`)) return 'PAGE'
+  return 'TAB'
+}

packages/trpc-webext/.prettierrc

@@ -0,0 +1,5 @@
+{
+  "semi": false,
+  "singleQuote": true,
+  "arrowParens": "avoid",
+}

packages/trpc-webext/eslint.config.mjs

@@ -0,0 +1,9 @@
+import configs from '@status-im/eslint-config'
+
+/** @type {import('eslint').Linter.Config[]} */
+export default [
+  ...configs,
+  {
+    files: ['**/*.ts', '**/*.mts', '**/*.mjs', '**/*.tsx'],
+  },
+]

packages/trpc-webext/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@status-im/trpc-webext",
+  "description": "description",
+  "version": "0.0.1",
+  "license": "MIT",
+  "keywords": [
+    "trpc",
+    "extension",
+    "webext",
+    "webextension"
+  ],
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.js"
+    },
+    "./adapter": {
+      "types": "./dist/adapter/index.d.ts",
+      "import": "./dist/adapter/index.js",
+      "require": "./dist/adapter/index.js"
+    },
+    "./link": {
+      "types": "./dist/link/index.d.ts",
+      "import": "./dist/link/index.js",
+      "require": "./dist/link/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "preinstall": "npx only-allow pnpm",
+    "dev": "tsc -w",
+    "build": "tsc",
+    "lint": "eslint src",
+    "format": "prettier --write ."
+  },
+  "peerDependencies": {
+    "@trpc/client": "^11.0.0",
+    "@trpc/server": "^11.0.0"
+  },
+  "devDependencies": {
+    "@types/webextension-polyfill": "^0.12.3"
+  }
+}