await async createActions in demo apps

Author: its-everdred

packages/demo/backend/src/app.ts

@@ -30,7 +30,7 @@ class ActionsApp extends App {
 
   protected async preMain(): Promise<void> {
     // Initialize Actions SDK once at startup
-    initializeActions()
+    await initializeActions()
   }
 
   protected async main(): Promise<void> {

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

@@ -7,7 +7,7 @@ import { BASE_SEPOLIA, OPTIMISM_SEPOLIA, UNICHAIN } from './chains.js'
 import { env } from './env.js'
 import { AaveETH, GauntletUSDCDemo } from './markets.js'
 
-let actionsInstance: ReturnType<typeof createActions<'privy'>>
+let actionsInstance: Awaited<ReturnType<typeof createActions<'privy'>>>
 
 export function createActionsConfig(): NodeActionsConfig<'privy'> {
   return {
@@ -44,9 +44,11 @@ export function createActionsConfig(): NodeActionsConfig<'privy'> {
   }
 }
 
-export function initializeActions(config?: NodeActionsConfig<'privy'>): void {
+export async function initializeActions(
+  config?: NodeActionsConfig<'privy'>,
+): Promise<void> {
   const actionsConfig = config || createActionsConfig()
-  actionsInstance = createActions(actionsConfig)
+  actionsInstance = await createActions(actionsConfig)
 }
 
 export function getActions() {

packages/demo/frontend/src/components/earn/EarnWithFrontendWallet.tsx

@@ -12,7 +12,7 @@ import {
   WALLET_PROVIDER_CONFIGS,
   type FrontendWalletProviderType,
 } from '@/constants/walletProviders'
-import { useMemo } from 'react'
+import { useState, useEffect, useMemo } from 'react'
 import { createActions } from '@eth-optimism/actions-sdk/react'
 import { createActionsConfig } from '@/config/actions'
 import { actionsApi } from '@/api/actionsApi'
@@ -25,11 +25,22 @@ export interface EarnWithFrontendWalletProps {
 }
 
 function useActions<T extends ReactProviderTypes>(hostedWalletProviderType: T) {
-  const config = useMemo(
-    () => createActionsConfig(hostedWalletProviderType),
-    [hostedWalletProviderType],
-  )
-  return useMemo(() => createActions(config), [config])
+  const [actions, setActions] = useState<Awaited<
+    ReturnType<typeof createActions<T>>
+  > | null>(null)
+
+  useEffect(() => {
+    let cancelled = false
+    const config = createActionsConfig(hostedWalletProviderType)
+    createActions(config).then((instance) => {
+      if (!cancelled) setActions(instance)
+    })
+    return () => {
+      cancelled = true
+    }
+  }, [hostedWalletProviderType])
+
+  return actions
 }
 
 /**
@@ -48,7 +59,7 @@ export function EarnWithFrontendWallet({
   const operations = useMemo<LendProviderOperations>(
     () => ({
       getTokenBalances: async () => wallet!.getBalance(),
-      getMarkets: async () => actions.lend.getMarkets(),
+      getMarkets: async () => actions!.lend.getMarkets(),
       getPosition: async (marketId) => wallet!.lend!.getPosition({ marketId }),
       mintAsset: async (asset: Asset) => {
         const walletAddress = wallet!.address

packages/demo/frontend/src/hooks/useActions.ts

@@ -1,4 +1,4 @@
-import { useMemo } from 'react'
+import { useState, useEffect } from 'react'
 import {
   createActions,
   type ReactProviderTypes,
@@ -10,14 +10,20 @@ export function useActions<T extends ReactProviderTypes>({
 }: {
   hostedWalletProviderType: T
 }) {
-  // Memoize the config to prevent recreating it on every render
-  const config = useMemo(
-    () => createActionsConfig(hostedWalletProviderType),
-    [hostedWalletProviderType],
-  )
+  const [actions, setActions] = useState<Awaited<
+    ReturnType<typeof createActions<T>>
+  > | null>(null)
 
-  // Memoize the actions instance to prevent recreating on every render
-  const actions = useMemo(() => createActions(config), [config])
+  useEffect(() => {
+    let cancelled = false
+    const config = createActionsConfig(hostedWalletProviderType)
+    createActions(config).then((instance) => {
+      if (!cancelled) setActions(instance)
+    })
+    return () => {
+      cancelled = true
+    }
+  }, [hostedWalletProviderType])
 
   return { actions }
 }

packages/demo/frontend/src/hooks/useDynamicWallet.ts

@@ -16,7 +16,7 @@ export function useDynamicWallet() {
 
   useEffect(() => {
     const createSmartWallet = async () => {
-      if (!primaryWallet) {
+      if (!primaryWallet || !actions) {
         setSmartWallet(null)
         setError(null)
         return

packages/demo/frontend/src/hooks/useTurnkeyWallet.ts

@@ -69,12 +69,12 @@ export function useTurnkeyWallet() {
         setIsCreating(true)
         setError(null)
 
-        const signer = await actions.wallet.createSigner({
+        const signer = await actions!.wallet.createSigner({
           client: httpClient!,
           organizationId: session!.organizationId,
           signWith: embeddedWallet!.accounts[0].address,
         })
-        const result = await actions.wallet.createSmartWallet({
+        const result = await actions!.wallet.createSmartWallet({
           signer: signer,
         })
 
@@ -93,7 +93,8 @@ export function useTurnkeyWallet() {
       authState === AuthState.Authenticated &&
       embeddedWallet &&
       httpClient &&
-      session?.organizationId
+      session?.organizationId &&
+      actions
     ) {
       createSmartWallet()
     }