spike: add dynamic fe wallet support

Author: tremarkley

packages/demo/backend/src/config/verbs.ts

@@ -1,11 +1,9 @@
-import { Verbs, type VerbsConfig } from '@eth-optimism/verbs-sdk'
+import { createVerbs, type VerbsConfig } from '@eth-optimism/verbs-sdk/node'
 import { PrivyClient } from '@privy-io/server-auth'
 import { baseSepolia, unichain } from 'viem/chains'
 
 import { env } from './env.js'
 
-let verbsInstance: Verbs<'privy'>
-
 export function createVerbsConfig(): VerbsConfig<'privy'> {
   return {
     wallet: {
@@ -55,16 +53,12 @@ export function createVerbsConfig(): VerbsConfig<'privy'> {
   }
 }
 
-export function initializeVerbs(config?: VerbsConfig<'privy'>): void {
-  const verbsConfig = config || createVerbsConfig()
-  verbsInstance = new Verbs(verbsConfig)
+export function initializeVerbs() {
+  return createVerbs(createVerbsConfig())
 }
 
 export function getVerbs() {
-  if (!verbsInstance) {
-    throw new Error('Verbs SDK not initialized. Call initializeVerbs() first.')
-  }
-  return verbsInstance
+  return initializeVerbs()
 }
 
 export function getPrivyClient() {

packages/demo/backend/src/types/service.ts

@@ -11,8 +11,6 @@ import type { Address } from 'viem'
 export interface WalletData {
   /** Wallet address */
   address: Address
-  /** Wallet ID */
-  id: string
 }
 
 /**

packages/demo/frontend/package.json

@@ -19,10 +19,16 @@
   },
   "dependencies": {
     "@clerk/clerk-react": "^5.46.0",
+    "@dynamic-labs/ethereum": "^4.31.4",
+    "@dynamic-labs/sdk-react-core": "^4.31.4",
+    "@dynamic-labs/wallet-connector-core": "^4.31.4",
+    "@esbuild-plugins/node-globals-polyfill": "^0.2.3",
+    "@esbuild-plugins/node-modules-polyfill": "^0.2.2",
     "@eth-optimism/verbs-sdk": "workspace:*",
     "@eth-optimism/verbs-service": "workspace:*",
     "@eth-optimism/viem": "^0.4.13",
     "@privy-io/react-auth": "^2.24.0",
+    "eventemitter3": "^5",
     "react": "^18",
     "react-dom": "^18",
     "react-router": "7",

packages/demo/frontend/src/App.tsx

@@ -1,13 +1,11 @@
 import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'
 import Terminal from './components/Terminal'
 import Home from './components/Home'
-import { ClerkProvider } from './providers/ClerkProvider'
-import { PrivyProvider } from './providers/PrivyProvider'
+import { DynamicProvider } from './providers/DynamicProvider'
 
 function App() {
   return (
-    <ClerkProvider>
-      <PrivyProvider>
+        <DynamicProvider>
         <Router>
           <div className="w-full h-screen bg-terminal-bg">
             <Routes>
@@ -16,8 +14,7 @@ function App() {
             </Routes>
           </div>
         </Router>
-      </PrivyProvider>
-    </ClerkProvider>
+      </DynamicProvider>
   )
 }