chore: include useCapsule

examples/react-app/package.json

@@ -14,6 +14,8 @@
     "@fuels/react": "0.20.0",
     "@radix-ui/react-toast": "1.1.5",
     "@tanstack/react-query": "5.35.1",
+    "@usecapsule/react-sdk": "3.17.0",
+    "@usecapsule/wagmi-v2-integration": "2.18.0",
     "@wagmi/connectors": "5.0.26",
     "@wagmi/core": "2.12.2",
     "clsx": "2.1.1",

examples/react-app/src/main.tsx

@@ -4,6 +4,9 @@ import ReactDOM from 'react-dom/client';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 
+import Capsule, { Environment } from '@usecapsule/react-sdk';
+import { capsuleConnector } from '@usecapsule/wagmi-v2-integration';
+
 import { coinbaseWallet, walletConnect } from '@wagmi/connectors';
 import { http, createConfig, injected } from '@wagmi/core';
 import { mainnet, sepolia } from '@wagmi/core/chains';
@@ -19,6 +22,12 @@ import './index.css';
 
 const queryClient = new QueryClient();
 
+const capsule = new Capsule(
+  Environment.BETA,
+  '9e1ce73625425f6bd64fc79ab7ea7028',
+  {},
+);
+
 // ============================================================
 // WalletConnect Connector configurations
 // https://docs.walletconnect.com/web3modal/javascript/about
@@ -49,6 +58,12 @@ const wagmiConfig = createConfig({
       darkMode: true,
       reloadOnDisconnect: true,
     }),
+    capsuleConnector({
+      chains: [mainnet, sepolia],
+      appName: METADATA.name,
+      capsule,
+      options: {},
+    }),
   ],
 });
 

examples/react-app/vite.config.ts

@@ -1,13 +1,26 @@
 import react from '@vitejs/plugin-react';
 import tailwindcss from 'tailwindcss';
 import { defineConfig } from 'vite';
+import { nodePolyfills } from 'vite-plugin-node-polyfills';
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react()],
+  plugins: [
+    react(),
+    nodePolyfills({
+      exclude: ['fs', 'stream'],
+      globals: {
+        process: true,
+      },
+      protocolImports: false,
+    }),
+  ],
   css: {
     postcss: {
       plugins: [tailwindcss()],
     },
   },
+  // define: {
+  //   'process.env': {},
+  // },
 });

package.json

@@ -31,7 +31,8 @@
     "lint-staged": "15.2.2",
     "tsx": "^4.16.2",
     "turbo": "1.13.3",
-    "vitest": "1.6.0"
+    "vitest": "1.6.0",
+    "vite-plugin-node-polyfills": "0.22.0"
   },
   "engines": {
     "node": ">=18",