feat: shared @harb/web3 package + landing wallet connect (#157) (#159)

web-app/eslint.config.js

@@ -16,8 +16,9 @@ export default [
     languageOptions: {
       parser: tsParser,
       parserOptions: {
-        projectService: true,
-        project: [resolve(__dirname, 'tsconfig.app.json')],
+        projectService: {
+          defaultProject: resolve(__dirname, 'tsconfig.app.json'),
+        },
         tsconfigRootDir: __dirname,
         sourceType: 'module',
         ecmaVersion: 'latest',

web-app/package.json

@@ -32,7 +32,8 @@
     "vue": "^3.5.13",
     "vue-router": "^4.2.5",
     "vue-tippy": "^6.6.0",
-    "vue-toastification": "^2.0.0-rc.5"
+    "vue-toastification": "^2.0.0-rc.5",
+    "@harb/web3": "*"
   },
   "devDependencies": {
     "@iconify/vue": "^4.3.0",

web-app/src/wagmi.ts

@@ -1,56 +1,10 @@
-import { http, createConfig, createStorage } from '@wagmi/vue';
-import { baseSepolia } from '@wagmi/vue/chains';
-import { coinbaseWallet, injected, walletConnect } from '@wagmi/vue/connectors';
-import { defineChain } from 'viem';
+/**
+ * Web-app wagmi config — delegates to @harb/web3 shared package.
+ * Re-exports for backward compatibility with existing imports.
+ */
+import { createHarbConfig, KRAIKEN_LOCAL_CHAIN } from '@harb/web3';
 
 const LOCAL_RPC_URL = import.meta.env.VITE_LOCAL_RPC_URL ?? '/api/rpc';
 
-export const KRAIKEN_LOCAL_CHAIN = defineChain({
-  id: 31337,
-  name: 'Kraiken Local Fork',
-  network: 'kraiken-local',
-  nativeCurrency: { name: 'Ether', symbol: 'ETH', decimals: 18 },
-  rpcUrls: {
-    default: { http: [LOCAL_RPC_URL] },
-    public: { http: [LOCAL_RPC_URL] },
-  },
-  blockExplorers: {
-    default: { name: 'Local Explorer', url: '' },
-  },
-  testnet: true,
-});
-
-export const config = createConfig({
-  chains: [KRAIKEN_LOCAL_CHAIN, baseSepolia],
-  storage: createStorage({ storage: window.localStorage }),
-
-  connectors: [
-    // Injected wallets (MetaMask, Brave, etc.) - also supports E2E test wallet mocks
-    injected(),
-    walletConnect({
-      projectId: 'd8e5ecb0353c02e21d4c0867d4473ac5',
-      metadata: {
-        name: 'Kraiken',
-        description: 'Connect your wallet with Kraiken',
-        url: 'https://kraiken.eth.limo',
-        icons: [''],
-      },
-    }),
-    coinbaseWallet({
-      appName: 'Kraiken',
-      darkMode: true,
-      preference: {
-        options: 'all',
-        telemetry: false,
-      },
-    }),
-  ],
-  transports: {
-    [KRAIKEN_LOCAL_CHAIN.id]: http(LOCAL_RPC_URL),
-    [baseSepolia.id]: http(),
-  },
-});
-
-if (typeof window !== 'undefined' && config.state.chainId !== KRAIKEN_LOCAL_CHAIN.id) {
-  config.setState(state => ({ ...state, chainId: KRAIKEN_LOCAL_CHAIN.id }));
-}
+export { KRAIKEN_LOCAL_CHAIN };
+export const config = createHarbConfig({ rpcUrl: LOCAL_RPC_URL });