create-openfort 0.1.10 → 1.0.1

package/template/openfort-templates/firebase/src/ui/openfort/wallets/WalletPasswordSheets.tsx

@@ -1,5 +1,12 @@
 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 '../../../components/ui/Sheet'
 
@@ -7,21 +14,32 @@ type CreateWalletPasswordSheetProps = {
   open: boolean
   onClose: () => void
   onCreateWallet?: () => void
+  create: (options: {
+    recoveryMethod: RecoveryMethod
+    accountType?: AccountTypeEnum
+    password?: string
+  }) => Promise<EmbeddedAccount>
+  status: string
+  accountType: AccountTypeEnum
 }
 
 export function 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."
@@ -33,16 +51,16 @@ export function CreateWalletPasswordSheet({
           const formData = new FormData(event.target as HTMLFormElement)
           const password = formData.get('password') as string
 
-          const { error: walletError } = await createWallet({
-            recovery: {
+          try {
+            await create({
               recoveryMethod: RecoveryMethod.PASSWORD,
+              accountType,
               password,
-            },
-          })
-
-          if (!walletError) {
+            })
             onCreateWallet?.()
             onClose()
+          } catch (err) {
+            setError(err instanceof Error ? err.message : 'Failed to create wallet')
           }
         }}
       >
@@ -62,11 +80,12 @@ export function CreateWalletPasswordSheet({
         <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"
@@ -83,7 +102,7 @@ export function CreateWalletPasswordSheet({
 type WalletRecoverPasswordSheetProps = {
   open: boolean
   onClose: () => void
-  wallet: UserWallet | null
+  wallet: ConnectedEmbeddedEthereumWallet | null
 }
 
 export function WalletRecoverPasswordSheet({
@@ -91,34 +110,38 @@ export function WalletRecoverPasswordSheet({
   onClose,
   wallet,
 }: WalletRecoverPasswordSheetProps) {
-  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={(event) => {
+        onSubmit={async (event) => {
           event.preventDefault()
           const formData = new FormData(event.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 && (
@@ -130,11 +153,12 @@ export function 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/AGENTS.md

@@ -84,7 +84,7 @@ Required environment variables for headless operation:
 ```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
 ```

package/template/openfort-templates/headless/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",
@@ -22,10 +22,10 @@
   "devDependencies": {
     "@biomejs/biome": "^2.3.8",
     "@tailwindcss/vite": "^4.1.15",
-    "tailwindcss": "^4.1.15",
     "@types/react": "^19.1.10",
     "@types/react-dom": "^19.1.7",
     "@vitejs/plugin-react": "^4.3.4",
+    "tailwindcss": "^4.1.15",
     "typescript": "~5.8.3",
     "vite": "^6.4.1"
   }

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

@@ -1,22 +1,20 @@
 import { useMemo } from 'react'
 import { getAddress, parseAbi } from 'viem'
-import {
-  useAccount,
-  useChains,
-  useReadContract,
-  useWriteContract
-} from 'wagmi'
+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 +25,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 +60,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 +99,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 +111,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 +119,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 +132,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 />

package/template/openfort-templates/headless/src/components/cards/profile.tsx

@@ -28,7 +28,6 @@ export const Profile = ({
         <br />
         You can sign messages and interact with smart contracts.
       </p>
-      <p>
         <div className="border border-zinc-700 rounded p-4">
           <h2 className="mb-2">Get started</h2>
           <p className="mb-2 text-zinc-400 text-sm">
@@ -69,7 +68,6 @@ export const Profile = ({
             </a>
           </div>
         </div>
-      </p>
 
       <button
         onClick={() => {

package/template/openfort-templates/headless/src/components/cards/wallets.tsx

@@ -1,42 +1,175 @@
 import {
+  CheckIcon,
+  ChevronDownIcon,
+  ChevronUpIcon,
+  ClipboardDocumentIcon,
   FingerPrintIcon,
   KeyIcon,
   LockClosedIcon,
 } from '@heroicons/react/24/outline'
 import {
+  AccountTypeEnum,
   RecoveryMethod,
-  type UserWallet,
+  type ConnectedEmbeddedEthereumWallet,
   useSignOut,
   useUser,
-  useWallets,
 } from '@openfort/react'
-import { useState } from 'react'
+import { useEthereumEmbeddedWallet } from '@openfort/react/ethereum'
+import { useMemo, useState } from 'react'
 import { useAccount } from 'wagmi'
 import { CreateWallet, CreateWalletSheet } from '../createWallet'
 import { WalletRecoverPasswordSheet } from '../passwordRecovery'
 
+const ACCOUNT_TYPE_LABELS: Record<AccountTypeEnum, string> = {
+  [AccountTypeEnum.EOA]: 'EOA',
+  [AccountTypeEnum.SMART_ACCOUNT]: 'SM',
+  [AccountTypeEnum.DELEGATED_ACCOUNT]: 'DE',
+}
+
+const VISIBLE_WALLET_COUNT = 4
+
+const WalletRecoveryBadge = ({ wallet }: { wallet: ConnectedEmbeddedEthereumWallet }) => {
+  let Icon = LockClosedIcon
+  let text = 'Unknown'
+
+  switch (wallet.recoveryMethod) {
+    case RecoveryMethod.PASSWORD:
+      Icon = KeyIcon
+      text = 'Password'
+      break
+    case RecoveryMethod.AUTOMATIC:
+      Icon = LockClosedIcon
+      text = 'Automatic'
+      break
+    case RecoveryMethod.PASSKEY:
+      Icon = FingerPrintIcon
+      text = 'Passkey'
+      break
+  }
+
+  return (
+    <div className="flex items-center text-xs">
+      <span>{text}</span>
+      <Icon className="h-5 w-5 ml-2" />
+    </div>
+  )
+}
+
+const WalletItem = ({
+  wallet,
+  isActive,
+  isConnecting,
+  nested,
+  onClick,
+}: {
+  wallet: ConnectedEmbeddedEthereumWallet
+  isActive: boolean
+  isConnecting: boolean
+  nested?: boolean
+  onClick: () => void
+}) => (
+  <div className={nested ? 'ml-5 flex items-center gap-1' : undefined}>
+    {nested && <span className="text-zinc-500 text-sm">↳</span>}
+    <button
+      key={wallet.id + wallet.address}
+      className="px-4 py-3 border data-[active=true]:border-zinc-300 border-zinc-700 rounded data-[active=false]:cursor-pointer data-[active=false]:hover:bg-zinc-700/20 hover:border-zinc-300 transition-colors flex-1 text-sm w-full"
+      onClick={onClick}
+      data-active={isActive}
+      disabled={isActive || isConnecting}
+      type="button"
+    >
+      {isConnecting && isActive ? (
+        <p>Connecting...</p>
+      ) : (
+        <div className="flex justify-between items-center">
+          <p className="font-medium mr-2">
+            {`${wallet.address.substring(0, 6)}...${wallet.address.substring(wallet.address.length - 4)}`}
+          </p>
+          <div className="flex items-center gap-2">
+            {wallet.accountType && (
+              <span className="text-[10px] font-semibold leading-none border border-zinc-600 rounded px-1 py-0.5 opacity-70">
+                {ACCOUNT_TYPE_LABELS[wallet.accountType]}
+              </span>
+            )}
+            <WalletRecoveryBadge wallet={wallet} />
+          </div>
+        </div>
+      )}
+    </button>
+  </div>
+)
+
 export const Wallets = () => {
   const {
     wallets,
-    isLoadingWallets,
+    status,
     activeWallet,
-    availableWallets,
-    setActiveWallet,
-    isConnecting,
-  } = useWallets()
+    setActive,
+    exportPrivateKey,
+  } = useEthereumEmbeddedWallet()
+  const isLoadingWallets = status === 'fetching-wallets'
+  const isConnecting = status === 'connecting'
   const { user, isAuthenticated } = useUser()
   const { isConnected } = useAccount()
   const [createWalletSheetOpen, setCreateWalletSheetOpen] = useState(false)
-  const [walletToRecover, setWalletToRecover] = useState<UserWallet | null>(
-    null,
-  )
+  const [walletToRecover, setWalletToRecover] =
+    useState<ConnectedEmbeddedEthereumWallet | null>(null)
+  const [showAllWallets, setShowAllWallets] = useState(false)
+  const [exportedKey, setExportedKey] = useState<string | null>(null)
+  const [isExporting, setIsExporting] = useState(false)
+  const [exportError, setExportError] = useState<string | null>(null)
+  const [copied, setCopied] = useState(false)
   const { signOut } = useSignOut()
 
+  // Group wallets: EOAs at top level, Smart/Delegated accounts nested under their owner
+  const { topLevel, childrenByOwner } = useMemo(() => {
+    const ownerAddresses = new Set(wallets.map((w) => w.address.toLowerCase()))
+    const childrenByOwner = new Map<string, ConnectedEmbeddedEthereumWallet[]>()
+    const topLevel: ConnectedEmbeddedEthereumWallet[] = []
+
+    for (const wallet of wallets) {
+      const owner = wallet.ownerAddress?.toLowerCase()
+      if (owner && ownerAddresses.has(owner) && owner !== wallet.address.toLowerCase()) {
+        const existing = childrenByOwner.get(owner) ?? []
+        existing.push(wallet)
+        childrenByOwner.set(owner, existing)
+      } else {
+        topLevel.push(wallet)
+      }
+    }
+
+    return { topLevel, childrenByOwner }
+  }, [wallets])
+
+  const handleExportKey = async () => {
+    setIsExporting(true)
+    setExportError(null)
+    setExportedKey(null)
+    try {
+      const key = await exportPrivateKey()
+      setExportedKey(key)
+    } catch {
+      setExportError('Cannot export private key for this wallet.')
+    } finally {
+      setIsExporting(false)
+    }
+  }
+
+  const handleWalletClick = (wallet: ConnectedEmbeddedEthereumWallet) => {
+    const isActive = activeWallet?.address.toLowerCase() === wallet.address.toLowerCase()
+    if (isActive || isConnecting) return
+    if (wallet.recoveryMethod === RecoveryMethod.PASSWORD) {
+      setWalletToRecover(wallet)
+    } else {
+      setActive({ address: wallet.address })
+    }
+  }
+
   if (!activeWallet && isConnecting) return <div>recovering ...</div>
   if (isLoadingWallets || (!user && isAuthenticated)) {
     return <div>Loading wallets...</div>
   }
-  if (availableWallets.length === 0) {
+  if (wallets.length === 0) {
     return (
       <div className="flex gap-2 flex-col w-full">
         <h1>Create a wallet</h1>
@@ -46,46 +179,9 @@ export const Wallets = () => {
     )
   }
 
-  const renderWalletRecovery = (wallet: UserWallet) => {
-    let Icon = LockClosedIcon
-    let text = 'Unknown'
-    const method = wallet.recoveryMethod
-
-    switch (method) {
-      case RecoveryMethod.PASSWORD:
-        Icon = KeyIcon
-        text = 'Password'
-        break
-      case RecoveryMethod.AUTOMATIC:
-        Icon = LockClosedIcon
-        text = 'Automatic'
-        break
-      case RecoveryMethod.PASSKEY:
-        Icon = FingerPrintIcon
-        text = 'Passkey'
-        break
-    }
-
-    return (
-      <div className="flex items-center text-xs">
-        <span>{text}</span>
-        <Icon className="h-5 w-5 ml-2" />
-      </div>
-    )
-  }
-
-  const handleWalletClick = (wallet: UserWallet) => {
-    if (wallet.isActive || isConnecting) return
-    const method = wallet.recoveryMethod
-    if (method === RecoveryMethod.PASSWORD) {
-      setWalletToRecover(wallet)
-    } else {
-      setActiveWallet({
-        walletId: 'xyz.openfort',
-        address: wallet.address,
-      })
-    }
-  }
+  const visibleTopLevel = showAllWallets
+    ? topLevel
+    : topLevel.slice(0, VISIBLE_WALLET_COUNT)
 
   return (
     <div className="flex flex-col w-full">
@@ -96,34 +192,101 @@ export const Wallets = () => {
       <div className="space-y-4 pb-4">
         <h2>Your Wallets</h2>
         <div className="flex flex-col space-y-2">
-          {wallets.map((wallet) => (
+          {visibleTopLevel.map((wallet) => {
+            const isActive =
+              activeWallet?.address.toLowerCase() === wallet.address.toLowerCase()
+            const children = childrenByOwner.get(wallet.address.toLowerCase())
+
+            return (
+              <div key={wallet.id} className="space-y-1">
+                <WalletItem
+                  wallet={wallet}
+                  isActive={isActive}
+                  isConnecting={isConnecting}
+                  onClick={() => handleWalletClick(wallet)}
+                />
+                {children?.map((child) => {
+                  const isChildActive =
+                    activeWallet?.address.toLowerCase() === child.address.toLowerCase()
+                  return (
+                    <WalletItem
+                      key={child.id}
+                      wallet={child}
+                      isActive={isChildActive}
+                      isConnecting={isConnecting}
+                      nested
+                      onClick={() => handleWalletClick(child)}
+                    />
+                  )
+                })}
+              </div>
+            )
+          })}
+
+          {topLevel.length > VISIBLE_WALLET_COUNT && (
             <button
-              key={wallet.id + wallet.address}
-              className="px-4 py-3 border data-[active=true]:border-zinc-300 border-zinc-700 rounded data-[active=false]:cursor-pointer data-[active=false]:hover:bg-zinc-700/20 hover:border-zinc-300 transition-colors flex-1 text-sm"
-              onClick={() => handleWalletClick(wallet)}
-              data-active={wallet.isActive}
-              disabled={wallet.isActive || isConnecting}
+              type="button"
+              className="flex items-center justify-center gap-1 text-xs text-zinc-400 hover:text-zinc-200 cursor-pointer transition-colors py-1"
+              onClick={() => setShowAllWallets((prev) => !prev)}
             >
-              {wallet.isConnecting ? (
-                <p>Connecting...</p>
+              {showAllWallets ? (
+                <>
+                  Show less <ChevronUpIcon className="h-4 w-4" />
+                </>
               ) : (
-                <div className="flex justify-between items-center">
-                  <p className="font-medium mr-2">
-                    {`${wallet.address.substring(0, 6)}...${wallet.address.substring(wallet.address.length - 4)}`}
-                  </p>
-                  {renderWalletRecovery(wallet)}
-                </div>
+                <>
+                  Show {topLevel.length - VISIBLE_WALLET_COUNT} more{' '}
+                  <ChevronDownIcon className="h-4 w-4" />
+                </>
               )}
             </button>
-          ))}
+          )}
 
           <button
             className="p-3 border border-zinc-700 rounded cursor-pointer hover:bg-zinc-700/20 hover:border-zinc-300 transition-colors flex-1"
             onClick={() => setCreateWalletSheetOpen(true)}
+            type="button"
           >
             + Create Wallet
           </button>
         </div>
+
+        {activeWallet && (
+          <div className="mt-4 space-y-2">
+            <button
+              type="button"
+              className="w-full p-3 border border-zinc-700 rounded cursor-pointer hover:bg-zinc-700/20 hover:border-zinc-300 transition-colors text-sm flex items-center justify-center gap-2"
+              onClick={handleExportKey}
+              disabled={isExporting}
+            >
+              <KeyIcon className="h-4 w-4" />
+              {isExporting ? 'Exporting...' : 'Export Private Key'}
+            </button>
+            {exportError && (
+              <p className="text-red-400 text-xs">{exportError}</p>
+            )}
+            {exportedKey && (
+              <div className="flex items-center gap-2 p-3 border border-zinc-700 rounded bg-zinc-800 text-xs break-all font-mono">
+                <span className="flex-1">{exportedKey}</span>
+                <button
+                  type="button"
+                  className="shrink-0 p-1 rounded hover:bg-zinc-700 transition-colors cursor-pointer"
+                  onClick={() => {
+                    navigator.clipboard.writeText(exportedKey)
+                    setCopied(true)
+                    setTimeout(() => setCopied(false), 2000)
+                  }}
+                >
+                  {copied ? (
+                    <CheckIcon className="h-4 w-4 text-green-400" />
+                  ) : (
+                    <ClipboardDocumentIcon className="h-4 w-4 text-zinc-400" />
+                  )}
+                </button>
+              </div>
+            )}
+          </div>
+        )}
       </div>
       <WalletRecoverPasswordSheet
         wallet={walletToRecover}