feat: wallet connect support

.env.example

@@ -0,0 +1 @@
+VITE_APP_WALLET_CONNECT_PROJECT_ID=

.github/workflows/deployment.yml

@@ -18,6 +18,8 @@ jobs:
 
       - run: yarn install --immutable
       - run: yarn build
+        env:
+          VITE_APP_WALLET_CONNECT_PROJECT_ID: ${{ secrets.WALLET_CONNECT_PROJECT_ID }}
 
       - uses: cloudflare/pages-action@v1
         with:

.gitignore

@@ -6,3 +6,7 @@ dist
 ## Panda
 styled-system
 styled-system-studio
+
+.env
+
+.DS_Store

package.json

@@ -29,11 +29,13 @@
   "dependencies": {
     "@ark-ui/react": "^3.6.2",
     "@polkadot-api/descriptors": "portal:.papi/descriptors",
-    "@reactive-dot/react": "^0.4.0",
-    "@tanstack/react-router": "^1.46.0",
+    "@reactive-dot/react": "^0.5.0",
+    "@tanstack/react-router": "^1.46.4",
     "@w3f/polkadot-icons": "^1.0.0",
+    "@walletconnect/modal": "^2.6.2",
+    "@walletconnect/universal-provider": "^2.14.0",
     "date-fns": "^3.6.0",
-    "dot-connect": "^0.2.0",
+    "dot-connect": "^0.3.0",
     "polkadot-api": "^0.12.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
@@ -44,8 +46,8 @@
     "@eslint/compat": "^1.1.1",
     "@eslint/js": "^9.8.0",
     "@pandacss/dev": "^0.44.0",
-    "@park-ui/panda-preset": "^0.41.0",
-    "@tanstack/router-devtools": "^1.46.0",
+    "@park-ui/panda-preset": "^0.42.0",
+    "@tanstack/router-devtools": "^1.46.5",
     "@tanstack/router-plugin": "^1.45.13",
     "@trivago/prettier-plugin-sort-imports": "^4.3.0",
     "@tsconfig/strictest": "^2.0.5",

src/config.ts

@@ -1,6 +1,7 @@
 import { polkadot, kusama, paseo, westend } from "@polkadot-api/descriptors";
 import type { Config } from "@reactive-dot/core";
 import { InjectedWalletAggregator } from "@reactive-dot/core/wallets.js";
+import { WalletConnect } from "@reactive-dot/core/wallets/wallet-connect.js";
 import { getSmProvider } from "polkadot-api/sm-provider";
 import { startFromWorker } from "polkadot-api/smoldot/from-worker";
 
@@ -48,5 +49,25 @@ export const config = {
       ),
     },
   },
-  wallets: [new InjectedWalletAggregator()],
+  wallets: [
+    new InjectedWalletAggregator(),
+    new WalletConnect({
+      projectId: import.meta.env.VITE_APP_WALLET_CONNECT_PROJECT_ID,
+      providerOptions: {
+        metadata: {
+          name: "ĐÓTConsole",
+          description: "Substrate development console.",
+          url: globalThis.origin,
+          icons: ["/logo.png"],
+        },
+      },
+      chainIds: [
+        "polkadot:91b171bb158e2d3848fa23a9f1c25182", // Polkadot
+        "polkadot:b0a8d493285c2df73290dfb7e61f870f", // Kusama
+        // Nova Wallet does not support Paseo
+        // "polkadot:77afd6190f1554ad45fd0d31aee62aac", // Paseo
+        "polkadot:e143f23803ac50e8f6f8e62695d1ce9e", // Westend
+      ],
+    }),
+  ],
 } as const satisfies Config;

src/vite-env.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly VITE_APP_WALLET_CONNECT_PROJECT_ID: string;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}