create-openfort 0.1.10 → 1.0.1

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

@@ -28,7 +28,7 @@ export const Auth = () => {
           Click the button below to sign in with Openfort. This will open a
           modal where you can choose your authentication method.
         </p>
-        <OpenfortButton label="Sign In" />
+        <OpenfortButton  label="Sign In" />
       </div>
       <div className="mt-8 space-y-2">
         <h2>Code Example</h2>

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

@@ -1,40 +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,
-    availableWallets,
-    setActiveWallet,
-    isConnecting,
-  } = useWallets()
+    status,
+    activeWallet,
+    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>
@@ -44,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">
@@ -94,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}

package/template/openfort-templates/openfort-ui/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}
       />
     </>
   )