create-openfort 0.1.10 → 1.0.0

package/template/openfort-templates/headless/src/components/createWallet.tsx

@@ -2,119 +2,161 @@ import {
   FingerPrintIcon,
   KeyIcon,
   LockClosedIcon,
+  WalletIcon,
 } from '@heroicons/react/24/outline'
-import { RecoveryMethod, useWallets } from '@openfort/react'
+import { AccountTypeEnum, RecoveryMethod } from '@openfort/react'
+import { useEthereumEmbeddedWallet } from '@openfort/react/ethereum'
 import { useState } from 'react'
 import { CreateWalletPasswordSheet } from './passwordRecovery'
 import { Sheet } from './ui/Sheet'
 
-export const CreateWalletSheet = ({
-  open,
-  onClose,
-}: {
+type CreateStep = 'choose-account-type' | 'choose-recovery-method'
+
+type CreateWalletSheetProps = {
   open: boolean
   onClose: () => void
-}) => {
+  onWalletCreated?: () => void
+}
+
+export const CreateWalletSheet = ({ open, onClose, onWalletCreated }: CreateWalletSheetProps) => {
   return (
     <Sheet
       open={open}
-      onClose={() => {
-        onClose()
-      }}
+      onClose={onClose}
       title="Create Wallet"
       description="Please choose a recovery method for your new wallet."
     >
       <CreateWallet
         onWalletCreated={() => {
           onClose()
+          onWalletCreated?.()
         }}
       />
     </Sheet>
   )
 }
 
-export const CreateWallet = ({
-  onWalletCreated,
-}: {
-  onWalletCreated?: () => void
-}) => {
+export const CreateWallet = ({ onWalletCreated }: { onWalletCreated?: () => void }) => {
+  const { create, status } = useEthereumEmbeddedWallet()
+  const [error, setError] = useState<string | null>(null)
+  const [step, setStep] = useState<CreateStep>('choose-account-type')
+  const [accountType, setAccountType] = useState<AccountTypeEnum>(AccountTypeEnum.SMART_ACCOUNT)
   const [passwordSheetOpen, setPasswordSheetOpen] = useState(false)
 
-  const { isCreating, createWallet, error } = useWallets({
-    onSuccess: () => {
-      onWalletCreated?.()
-    },
-  })
+  const isCreating = status === 'creating'
 
   if (isCreating) {
     return <div>Creating wallet...</div>
   }
 
+  const handleCreate = async (recoveryMethod: RecoveryMethod, password?: string) => {
+    try {
+      await create({ recoveryMethod, accountType, ...(password && { password }) })
+      onWalletCreated?.()
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to create wallet')
+    }
+  }
+
   return (
     <>
-      <div className="flex flex-col gap-4 wallet-option-group mb-4">
-        <button
-          className="wallet-option cursor-pointer"
-          onClick={() =>
-            createWallet({
-              recovery: {
-                recoveryMethod: RecoveryMethod.PASSKEY,
-              },
-            })
-          }
-        >
-          <FingerPrintIcon />
-          <div className="flex flex-col text-start">
-            <h4>Passkey</h4>
-            <p className="text-sm hover-description">
-              Secure your wallet with biometric authentication.
-            </p>
-          </div>
-        </button>
-        <button
-          className="wallet-option cursor-pointer"
-          onClick={() =>
-            createWallet({
-              recovery: {
-                recoveryMethod: RecoveryMethod.AUTOMATIC,
-              },
-            })
-          }
-        >
-          <LockClosedIcon />
-          <div className="flex flex-col text-start">
-            <h4>Automatic recovery</h4>
-            <p className="text-sm hover-description">
-              Uses encryption session to recover your wallet.
-            </p>
-          </div>
-        </button>
-        <button
-          className="wallet-option cursor-pointer"
-          onClick={() => setPasswordSheetOpen(true)}
-        >
-          <KeyIcon />
-          <div className="flex flex-col text-start">
-            <h4>Password</h4>
-            <p className="text-sm hover-description">
-              Create a strong password to secure your wallet.
-            </p>
+      {step === 'choose-account-type' && (
+        <div className="flex flex-col gap-4 wallet-option-group mb-4">
+          <p className="text-sm text-zinc-400">Select account type:</p>
+          {Object.values(AccountTypeEnum).map((type) => (
+            <button
+              key={type}
+              type="button"
+              className="wallet-option cursor-pointer"
+              onClick={() => {
+                setAccountType(type)
+                setStep('choose-recovery-method')
+              }}
+            >
+              <WalletIcon className="h-6 w-6 shrink-0" />
+              <div className="flex flex-col text-start">
+                <h4>{type}</h4>
+                <p className="text-sm hover-description">
+                  {type === AccountTypeEnum.EOA && 'A standard externally owned account.'}
+                  {type === AccountTypeEnum.SMART_ACCOUNT &&
+                    'A smart contract wallet (also creates an EOA owner).'}
+                  {type === AccountTypeEnum.DELEGATED_ACCOUNT && 'A delegated smart account.'}
+                </p>
+              </div>
+            </button>
+          ))}
+        </div>
+      )}
+
+      {step === 'choose-recovery-method' && (
+        <>
+          <button
+            type="button"
+            className="text-xs text-zinc-400 mb-4 hover:text-zinc-200 flex items-center gap-1"
+            onClick={() => setStep('choose-account-type')}
+          >
+            ← Back ·{' '}
+            <span className="text-zinc-300">{accountType}</span>
+          </button>
+          <div className="flex flex-col gap-4 wallet-option-group mb-4">
+            <p className="text-sm text-zinc-400">Select recovery method:</p>
+            <button
+              type="button"
+              className="wallet-option cursor-pointer"
+              onClick={() => handleCreate(RecoveryMethod.PASSKEY)}
+            >
+              <FingerPrintIcon />
+              <div className="flex flex-col text-start">
+                <h4>Passkey</h4>
+                <p className="text-sm hover-description">
+                  Secure your wallet with biometric authentication.
+                </p>
+              </div>
+            </button>
+            <button
+              type="button"
+              className="wallet-option cursor-pointer"
+              onClick={() => handleCreate(RecoveryMethod.AUTOMATIC)}
+            >
+              <LockClosedIcon />
+              <div className="flex flex-col text-start">
+                <h4>Automatic recovery</h4>
+                <p className="text-sm hover-description">
+                  Uses encryption session to recover your wallet.
+                </p>
+              </div>
+            </button>
+            <button
+              type="button"
+              className="wallet-option cursor-pointer"
+              onClick={() => setPasswordSheetOpen(true)}
+            >
+              <KeyIcon />
+              <div className="flex flex-col text-start">
+                <h4>Password</h4>
+                <p className="text-sm hover-description">
+                  Create a strong password to secure your wallet.
+                </p>
+              </div>
+            </button>
           </div>
-        </button>
-      </div>
-      {error && (
-        <p className="text-red-500 text-sm mb-2">Error: {error.message}</p>
+        </>
       )}
+
+      {error && <p className="text-red-500 text-sm mb-2">Error: {error}</p>}
+
       <p className="mb-4 text-xs text-zinc-400">
         Disclaimer: This is a demo of Openfort recovery methods. In production,
         it's best to choose one method for a smoother user experience.
       </p>
+
       <CreateWalletPasswordSheet
         open={passwordSheetOpen}
         onClose={() => setPasswordSheetOpen(false)}
-        onCreateWallet={() => {
-          onWalletCreated?.()
-        }}
+        create={create}
+        status={status}
+        accountType={accountType}
+        onCreateWallet={onWalletCreated}
       />
     </>
   )

package/template/openfort-templates/headless/src/components/passwordRecovery.tsx

@@ -1,25 +1,44 @@
 import { CheckCircleIcon } from '@heroicons/react/24/outline'
-import { RecoveryMethod, type UserWallet, useWallets } from '@openfort/react'
+import {
+  AccountTypeEnum,
+  RecoveryMethod,
+  type ConnectedEmbeddedEthereumWallet,
+} from '@openfort/react'
+import type { EmbeddedAccount } from '@openfort/react'
+import { useEthereumEmbeddedWallet } from '@openfort/react/ethereum'
+import { useState } from 'react'
 import { Sheet } from './ui/Sheet'
 
 type CreateWalletPasswordSheetProps = {
   open: boolean
   onClose: () => void
   onCreateWallet?: () => void
+  create: (options: {
+    recoveryMethod: RecoveryMethod
+    accountType?: AccountTypeEnum
+    password?: string
+  }) => Promise<EmbeddedAccount>
+  status: string
+  accountType: AccountTypeEnum
 }
+
 export const CreateWalletPasswordSheet = ({
   open,
   onClose,
   onCreateWallet,
+  create,
+  status,
+  accountType,
 }: CreateWalletPasswordSheetProps) => {
-  const { createWallet, error, isCreating, reset } = useWallets()
+  const [error, setError] = useState<string | null>(null)
+  const isCreating = status === 'creating'
 
   return (
     <Sheet
       open={open}
       onClose={() => {
         onClose()
-        reset()
+        setError(null)
       }}
       title="Enter Password"
       description="Please enter the password of your wallet."
@@ -31,40 +50,41 @@ export const CreateWalletPasswordSheet = ({
           const formData = new FormData(e.target as HTMLFormElement)
           const password = formData.get('password') as string
 
-          const { error } = await createWallet({
-            recovery: {
+          try {
+            await create({
               recoveryMethod: RecoveryMethod.PASSWORD,
+              accountType,
               password,
-            },
-          })
-
-          if (!error) {
+            })
             onCreateWallet?.()
             onClose()
+          } catch (err) {
+            setError(err instanceof Error ? err.message : 'Failed to create wallet')
           }
         }}
       >
         <div className="flex flex-col gap-2 mr-4 mb-4">
           <div className="flex items-center gap-2">
             <CheckCircleIcon className="h-5 w-5 text-primary my-4 shrink-0" />
-            <span>This password will be used to secure your account</span>
+            <span>This password will be used to secure your account.</span>
           </div>
           <div className="flex items-center gap-2">
             <CheckCircleIcon className="h-5 w-5 text-primary my-4 shrink-0" />
             <span>
               If you lose this password, you will not be able to access your
-              wallet
+              wallet.
             </span>
           </div>
         </div>
         <input
           type="password"
           name="password"
+          autoComplete="new-password"
           placeholder="Enter your wallet's password"
           className="w-full mt-2 p-2 border border-gray-300 rounded"
         />
         {error && (
-          <span className="text-red-500 text-sm mt-2">{error?.message}</span>
+          <span className="text-red-500 text-sm mt-2">{error}</span>
         )}
         <button
           className="mt-4 w-full bg-zinc-700 text-white p-2 rounded cursor-pointer"
@@ -81,7 +101,7 @@ export const CreateWalletPasswordSheet = ({
 type WalletRecoverPasswordProps = {
   open: boolean
   onClose: () => void
-  wallet: UserWallet | null
+  wallet: ConnectedEmbeddedEthereumWallet | null
 }
 
 export const WalletRecoverPasswordSheet = ({
@@ -89,34 +109,38 @@ export const WalletRecoverPasswordSheet = ({
   onClose,
   wallet,
 }: WalletRecoverPasswordProps) => {
-  const { setActiveWallet, error, isConnecting, reset } = useWallets()
+  const { setActive, status } = useEthereumEmbeddedWallet()
+  const [error, setError] = useState<string | null>(null)
+  const isConnecting = status === 'connecting'
 
   return (
     <Sheet
       open={open}
       onClose={() => {
         onClose()
-        reset()
+        setError(null)
       }}
       title="Enter Password"
       description="Please enter the password of your wallet."
     >
       <form
         className="w-full flex-1 flex flex-col justify-center"
-        onSubmit={(e) => {
+        onSubmit={async (e) => {
           e.preventDefault()
           const formData = new FormData(e.target as HTMLFormElement)
           const password = formData.get('password') as string
           if (!wallet) throw new Error('No wallet to recover')
 
-          setActiveWallet({
-            walletId: 'xyz.openfort',
-            recovery: {
+          try {
+            await setActive({
+              address: wallet.address,
               recoveryMethod: RecoveryMethod.PASSWORD,
               password,
-            },
-            address: wallet.address,
-          })
+            })
+            onClose()
+          } catch (err) {
+            setError(err instanceof Error ? err.message : 'Failed to recover wallet')
+          }
         }}
       >
         {wallet && (
@@ -128,11 +152,12 @@ export const WalletRecoverPasswordSheet = ({
         <input
           type="password"
           name="password"
+          autoComplete="current-password"
           placeholder="Enter your wallet's password"
           className="w-full mt-2 p-2 border border-gray-300 rounded"
         />
         {error && (
-          <span className="text-red-500 text-sm mt-2">{error?.message}</span>
+          <span className="text-red-500 text-sm mt-2">{error}</span>
         )}
         <button
           className="mt-4 w-full bg-zinc-700 text-white p-2 rounded cursor-pointer"

package/template/openfort-templates/headless/src/components/providers.tsx

@@ -1,40 +1,45 @@
-import { getDefaultConfig, OpenfortProvider } from '@openfort/react'
+import { OpenfortProvider } from '@openfort/react'
+import { getDefaultConfig, OpenfortWagmiBridge } from '@openfort/react/wagmi'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
-import { useState } from 'react'
 import { beamTestnet, polygonAmoy } from 'viem/chains'
 import { createConfig, WagmiProvider } from 'wagmi'
 
 const config = createConfig(
   getDefaultConfig({
-    appName: 'Openfort Next.js demo',
+    appName: 'Openfort React demo',
     chains: [polygonAmoy, beamTestnet], // The chains you want to support
     walletConnectProjectId: import.meta.env.VITE_WALLET_CONNECT_PROJECT_ID, // The WalletConnect Project ID
   }),
 )
 
+const queryClient = new QueryClient()
+
+const walletConfig = {
+  shieldPublishableKey: import.meta.env.VITE_SHIELD_PUBLISHABLE_KEY!, // The public key for your Openfort Shield account get it from https://dashboard.openfort.io
+  ethereum: {
+    ethereumFeeSponsorshipId: import.meta.env.VITE_FEE_SPONSORSHIP_ID, // The fee sponsorship ID for sponsoring transactions
+  },
+  // If you want to use AUTOMATIC embedded wallet recovery, an encryption session is required.
+  // See: https://www.openfort.io/docs/products/embedded-wallet/react-native/quickstart/automatic
+  // For backend setup, check: https://github.com/openfort-xyz/openfort-backend-quickstart
+  createEncryptedSessionEndpoint: import.meta.env.VITE_CREATE_ENCRYPTED_SESSION_ENDPOINT,
+  connectOnLogin: true,
+}
+
 export function Providers({ children }: { children: React.ReactNode }) {
-  const [queryClient] = useState(() => new QueryClient())
   return (
-    <WagmiProvider config={config}>
-      <QueryClientProvider client={queryClient}>
-        <OpenfortProvider
-          debugMode
-          publishableKey={import.meta.env.VITE_OPENFORT_PUBLISHABLE_KEY!}
-          // Set the wallet configuration. In this example, we will be using the embedded signer.
-          walletConfig={{
-            shieldPublishableKey: import.meta.env.VITE_SHIELD_PUBLISHABLE_KEY!, // The public key for your Openfort Shield account get it from https://dashboard.openfort.io
-            ethereumProviderPolicyId: import.meta.env.VITE_POLICY_ID, // The policy ID for sponsoring transactions
-            // If you want to use AUTOMATIC embedded wallet recovery, an encryption session is required.
-            // See: https://www.openfort.io/docs/products/embedded-wallet/react-native/quickstart/automatic
-            // For backend setup, check: https://github.com/openfort-xyz/openfort-backend-quickstart
-            createEncryptedSessionEndpoint: import.meta.env
-              .VITE_CREATE_ENCRYPTED_SESSION_ENDPOINT,
-            recoverWalletAutomaticallyAfterAuth: true, // We will manually call create/setActive wallet after auth
-          }}
-        >
-          {children}
-        </OpenfortProvider>
-      </QueryClientProvider>
-    </WagmiProvider>
+    <QueryClientProvider client={queryClient}>
+      <WagmiProvider config={config}>
+        <OpenfortWagmiBridge>
+          <OpenfortProvider
+            debugMode
+            publishableKey={import.meta.env.VITE_OPENFORT_PUBLISHABLE_KEY!}
+            walletConfig={walletConfig}
+          >
+            {children}
+          </OpenfortProvider>
+        </OpenfortWagmiBridge>
+      </WagmiProvider>
+    </QueryClientProvider>
   )
 }

package/template/openfort-templates/headless/src/lib/contracts.ts

@@ -0,0 +1,43 @@
+/** Chain IDs for mint contracts (viem/wagmi) */
+const BEAM_CHAIN_ID = 13337
+const POLYGON_CHAIN_ID = 80002
+const BASE_SEPOLIA_CHAIN_ID = 84532
+
+/** Fallback addresses when env vars are not set */
+const DEFAULT_POLYGON_MINT = '0xef147ed8bb07a2a0e7df4c1ac09e96dec459ffac'
+const DEFAULT_BEAM_MINT = '0x45238AB60ACA6862a70fe996D1A8baDb71Af5A8f'
+
+type MintContractType = 'claim' | 'mint'
+
+interface MintContractConfig {
+  address: string
+  type: MintContractType
+}
+
+/**
+ * Returns the mint contract address for the given chainId.
+ * Uses VITE_BEAM_MINT_CONTRACT and VITE_POLYGON_MINT_CONTRACT when set.
+ */
+function getMintContractAddress(chainId: number | undefined): string | undefined {
+  if (chainId == null) return undefined
+  if (chainId === BEAM_CHAIN_ID) {
+    return import.meta.env.VITE_BEAM_MINT_CONTRACT ?? DEFAULT_BEAM_MINT
+  }
+  if (chainId === POLYGON_CHAIN_ID || chainId === BASE_SEPOLIA_CHAIN_ID) {
+    return import.meta.env.VITE_POLYGON_MINT_CONTRACT ?? DEFAULT_POLYGON_MINT
+  }
+  return import.meta.env.VITE_POLYGON_MINT_CONTRACT ?? DEFAULT_POLYGON_MINT
+}
+
+/**
+ * Returns MintContractConfig for the given chainId.
+ * Beam uses claim(amount), Polygon uses mint(address, amount).
+ */
+export function getMintContractConfig(chainId: number | undefined): MintContractConfig | undefined {
+  const address = getMintContractAddress(chainId)
+  if (!address) return undefined
+  return {
+    address,
+    type: chainId === BEAM_CHAIN_ID ? 'claim' : 'mint',
+  }
+}

package/template/openfort-templates/openfort-ui/AGENTS.md

@@ -96,7 +96,7 @@ Required environment variables with UI configuration:
 ```env
 VITE_OPENFORT_PUBLISHABLE_KEY=pk_test_...
 VITE_SHIELD_PUBLISHABLE_KEY=sk_test_...
-VITE_POLICY_ID=pol_...
+VITE_FEE_SPONSORSHIP_ID=pol_...
 VITE_CREATE_ENCRYPTED_SESSION_ENDPOINT=/api/shield-session
 VITE_WALLET_CONNECT_PROJECT_ID=your-wallet-connect-project-id
 VITE_OPENFORT_THEME=light|dark

package/template/openfort-templates/openfort-ui/package.json

@@ -12,7 +12,7 @@
   },
   "dependencies": {
     "@heroicons/react": "^2.2.0",
-    "@openfort/react": "latest",
+    "@openfort/react": "workspace:^",
     "@tanstack/react-query": ">=5.45.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -21,11 +21,11 @@
   },
   "devDependencies": {
     "@biomejs/biome": "^2.3.8",
+    "@tailwindcss/vite": "^4.1.15",
     "@types/react": "^19.1.10",
     "@types/react-dom": "^19.1.7",
-    "@tailwindcss/vite": "^4.1.15",
-    "tailwindcss": "^4.1.15",
     "@vitejs/plugin-react": "^4.3.4",
+    "tailwindcss": "^4.1.15",
     "typescript": "~5.8.3",
     "vite": "^6.4.1"
   }

package/template/openfort-templates/openfort-ui/src/components/cards/actions.tsx

@@ -2,21 +2,25 @@ import { useMemo } from 'react'
 import { getAddress, parseAbi } from 'viem'
 import {
   useAccount,
+  useChainId,
   useChains,
   useReadContract,
   useWriteContract
 } from 'wagmi'
+import { getMintContractConfig } from '../../lib/contracts'
 import { TruncateData } from '../ui/TruncateData'
 
 const MintContract = () => {
   const { address } = useAccount()
+  const chainId = useChainId()
+  const config = getMintContractConfig(chainId)
 
   const {
     data: balance,
     refetch,
     error: balanceError,
   } = useReadContract({
-    address: '0xef147ed8bb07a2a0e7df4c1ac09e96dec459ffac',
+    address: (config?.address ?? undefined) as `0x${string}` | undefined,
     abi: [
       {
         type: 'function',
@@ -27,11 +31,11 @@ const MintContract = () => {
       },
     ],
     functionName: 'balanceOf',
-    args: [address!],
+    args: config && address ? [address] : undefined,
   })
 
   const { data: tokenSymbol } = useReadContract({
-    address: '0xef147ed8bb07a2a0e7df4c1ac09e96dec459ffac',
+    address: (config?.address ?? undefined) as `0x${string}` | undefined,
     abi: [
       {
         type: 'function',
@@ -62,12 +66,23 @@ const MintContract = () => {
   })
 
   async function submit({ amount }: { amount: string }) {
-    writeContract({
-      address: getAddress('0xef147ed8bb07a2a0e7df4c1ac09e96dec459ffac'),
-      abi: parseAbi(['function mint(address to, uint256 amount)']),
-      functionName: 'mint',
-      args: [address!, BigInt(amount)],
-    })
+    if (!config?.address) return
+    const amountWei = BigInt(amount) * BigInt(10 ** 18)
+    if (config.type === 'claim') {
+      writeContract({
+        address: getAddress(config.address),
+        abi: parseAbi(['function claim(uint256 amount)']),
+        functionName: 'claim',
+        args: [amountWei],
+      })
+    } else {
+      writeContract({
+        address: getAddress(config.address),
+        abi: parseAbi(['function mint(address to, uint256 amount)']),
+        functionName: 'mint',
+        args: [address!, amountWei],
+      })
+    }
   }
 
   return (
@@ -90,7 +105,7 @@ const MintContract = () => {
           className="grow peer"
           name="amount"
         />
-        <button className="btn" disabled={isPending || !address}>
+        <button className="btn" disabled={isPending || !address || !config}>
           {isPending ? 'Minting...' : 'Mint Tokens'}
         </button>
       </form>
@@ -102,7 +117,7 @@ const MintContract = () => {
 }
 
 export const Actions = () => {
-  const hasSponsorPolicy = useMemo(() => !!import.meta.env.VITE_POLICY_ID, [])
+  const hasFeeSponsorship = useMemo(() => !!import.meta.env.VITE_FEE_SPONSORSHIP_ID, [])
   const chains = useChains()
   return (
     <div className="flex flex-col w-full">
@@ -110,7 +125,7 @@ export const Actions = () => {
       <span className="mb-4 text-zinc-400 text-sm">
         Interact with smart contracts on the blockchain.
       </span>
-      {!hasSponsorPolicy && (
+      {!hasFeeSponsorship && (
         <div className="mb-3 p-3 bg-red-800 text-white rounded text-sm">
           <strong>Warning: Transactions are not sponsored.</strong> Minting may
           fail because transactions are not being sponsored. To sponsor
@@ -123,9 +138,9 @@ export const Actions = () => {
           >
             Openfort Dashboard
           </a>{' '}
-          and <b>create a policy</b> sponsoring transactions in{' '}
-          <b>{chains[0].name}</b>. Set the <code>VITE_POLICY_ID</code>{' '}
-          environment variable with the policy ID.
+          and <b>create a fee sponsorship</b> for transactions in{' '}
+          <b>{chains[0].name}</b>. Set the <code>VITE_FEE_SPONSORSHIP_ID</code>{' '}
+          environment variable with the fee sponsorship ID.
         </div>
       )}
       <MintContract />