create-openfort 0.1.8 → 0.1.10

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

@@ -1,47 +1,59 @@
-import { useState } from "react";
-import { FingerPrintIcon, KeyIcon, LockClosedIcon } from "@heroicons/react/24/outline";
-import { RecoveryMethod, useWallets } from "@openfort/react";
+import {
+  FingerPrintIcon,
+  KeyIcon,
+  LockClosedIcon,
+} from '@heroicons/react/24/outline'
+import { RecoveryMethod, useWallets } from '@openfort/react'
+import { useState } from 'react'
 
-import { Sheet } from "../../../components/ui/Sheet";
-import { CreateWalletPasswordSheet } from "./WalletPasswordSheets";
+import { Sheet } from '../../../components/ui/Sheet'
+import { CreateWalletPasswordSheet } from './WalletPasswordSheets'
 
 type CreateWalletSheetProps = {
-  open: boolean;
-  onClose: () => void;
-  onWalletCreated?: () => void;
-};
+  open: boolean
+  onClose: () => void
+  onWalletCreated?: () => void
+}
 
-export function CreateWalletSheet({ open, onClose, onWalletCreated }: CreateWalletSheetProps) {
+export function CreateWalletSheet({
+  open,
+  onClose,
+  onWalletCreated,
+}: CreateWalletSheetProps) {
   return (
     <Sheet
       open={open}
       onClose={() => {
-        onClose();
+        onClose()
       }}
       title="Create Wallet"
       description="Please choose a recovery method for your new wallet."
     >
       <CreateWallet
         onWalletCreated={() => {
-          onClose();
-          onWalletCreated?.();
+          onClose()
+          onWalletCreated?.()
         }}
       />
     </Sheet>
-  );
+  )
 }
 
-export function CreateWallet({ onWalletCreated }: { onWalletCreated?: () => void }) {
-  const [passwordSheetOpen, setPasswordSheetOpen] = useState(false);
+export function CreateWallet({
+  onWalletCreated,
+}: {
+  onWalletCreated?: () => void
+}) {
+  const [passwordSheetOpen, setPasswordSheetOpen] = useState(false)
 
   const { isCreating, createWallet, error } = useWallets({
     onSuccess: () => {
-      onWalletCreated?.();
+      onWalletCreated?.()
     },
-  });
+  })
 
   if (isCreating) {
-    return <div>Creating wallet...</div>;
+    return <div>Creating wallet...</div>
   }
 
   return (
@@ -60,7 +72,9 @@ export function CreateWallet({ onWalletCreated }: { onWalletCreated?: () => void
           <FingerPrintIcon />
           <div className="flex flex-col text-start">
             <h4>Passkey</h4>
-            <p className="text-sm hover-description">Secure your wallet with biometric authentication.</p>
+            <p className="text-sm hover-description">
+              Secure your wallet with biometric authentication.
+            </p>
           </div>
         </button>
         <button
@@ -76,28 +90,38 @@ export function CreateWallet({ onWalletCreated }: { onWalletCreated?: () => void
           <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>
+            <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)}>
+        <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>
+            <p className="text-sm hover-description">
+              Create a strong password to secure your wallet.
+            </p>
           </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.message}</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.
+        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?.();
+          onWalletCreated?.()
         }}
       />
     </>
-  );
+  )
 }

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

@@ -1,28 +1,37 @@
-import { useState } from "react";
-import { FingerPrintIcon, KeyIcon, LockClosedIcon } from "@heroicons/react/24/outline";
-import { RecoveryMethod, useSignOut, useUser, useWallets, type UserWallet } from "@openfort/react";
-
-import { CreateWallet, CreateWalletSheet } from "./WalletCreation";
-import { WalletRecoverPasswordSheet } from "./WalletPasswordSheets";
-import { useAccount } from "wagmi";
+import {
+  FingerPrintIcon,
+  KeyIcon,
+  LockClosedIcon,
+} from '@heroicons/react/24/outline'
+import {
+  RecoveryMethod,
+  type UserWallet,
+  useSignOut,
+  useUser,
+  useWallets,
+} from '@openfort/react'
+import { useState } from 'react'
+import { useAccount } from 'wagmi'
+import { CreateWallet, CreateWalletSheet } from './WalletCreation'
+import { WalletRecoverPasswordSheet } from './WalletPasswordSheets'
 
 function WalletRecoveryBadge({ wallet }: { wallet: UserWallet }) {
-  let Icon = LockClosedIcon;
-  let label = "Unknown";
+  let Icon = LockClosedIcon
+  let label = 'Unknown'
 
   switch (wallet.recoveryMethod) {
     case RecoveryMethod.PASSWORD:
-      Icon = KeyIcon;
-      label = "Password";
-      break;
+      Icon = KeyIcon
+      label = 'Password'
+      break
     case RecoveryMethod.AUTOMATIC:
-      Icon = LockClosedIcon;
-      label = "Automatic";
-      break;
+      Icon = LockClosedIcon
+      label = 'Automatic'
+      break
     case RecoveryMethod.PASSKEY:
-      Icon = FingerPrintIcon;
-      label = "Passkey";
-      break;
+      Icon = FingerPrintIcon
+      label = 'Passkey'
+      break
   }
 
   return (
@@ -30,20 +39,28 @@ function WalletRecoveryBadge({ wallet }: { wallet: UserWallet }) {
       <span>{label}</span>
       <Icon className="h-5 w-5 ml-2" />
     </div>
-  );
+  )
 }
 
 export function WalletListCard() {
-  const { wallets, isLoadingWallets, availableWallets, setActiveWallet, isConnecting } = useWallets();
-  const { user, isAuthenticated } = useUser();
-  const { isConnected } = useAccount();
-  const { signOut } = useSignOut();
-
-  const [createWalletSheetOpen, setCreateWalletSheetOpen] = useState(false);
-  const [walletToRecover, setWalletToRecover] = useState<UserWallet | null>(null);
+  const {
+    wallets,
+    isLoadingWallets,
+    availableWallets,
+    setActiveWallet,
+    isConnecting,
+  } = useWallets()
+  const { user, isAuthenticated } = useUser()
+  const { isConnected } = useAccount()
+  const { signOut } = useSignOut()
+
+  const [createWalletSheetOpen, setCreateWalletSheetOpen] = useState(false)
+  const [walletToRecover, setWalletToRecover] = useState<UserWallet | null>(
+    null,
+  )
 
   if (isLoadingWallets || (!user && isAuthenticated)) {
-    return <div>Loading wallets...</div>;
+    return <div>Loading wallets...</div>
   }
 
   if (availableWallets.length === 0) {
@@ -53,27 +70,29 @@ export function WalletListCard() {
         <p>You do not have any wallet yet.</p>
         <CreateWallet />
       </div>
-    );
+    )
   }
 
   const handleWalletClick = (wallet: UserWallet) => {
-    if (wallet.isActive || isConnecting) return;
+    if (wallet.isActive || isConnecting) return
 
     if (wallet.recoveryMethod === RecoveryMethod.PASSWORD) {
-      setWalletToRecover(wallet);
-      return;
+      setWalletToRecover(wallet)
+      return
     }
 
     setActiveWallet({
-      walletId: "xyz.openfort",
+      walletId: 'xyz.openfort',
       address: wallet.address,
-    });
-  };
+    })
+  }
 
   return (
     <div className="flex flex-col w-full">
       <h1>Wallets</h1>
-      <p className="mb-4 text-sm text-zinc-400">Select a wallet to connect to your account.</p>
+      <p className="mb-4 text-sm text-zinc-400">
+        Select a wallet to connect to your account.
+      </p>
 
       <div className="space-y-4 pb-4">
         <h2>Your Wallets</h2>
@@ -91,7 +110,7 @@ export function WalletListCard() {
               ) : (
                 <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)}
+                    {`${wallet.address.substring(0, 6)}...${wallet.address.substring(wallet.address.length - 4)}`}
                   </p>
                   <WalletRecoveryBadge wallet={wallet} />
                 </div>
@@ -108,14 +127,21 @@ export function WalletListCard() {
         </div>
       </div>
 
-      <WalletRecoverPasswordSheet wallet={walletToRecover} open={!!walletToRecover} onClose={() => setWalletToRecover(null)} />
+      <WalletRecoverPasswordSheet
+        wallet={walletToRecover}
+        open={!!walletToRecover}
+        onClose={() => setWalletToRecover(null)}
+      />
 
-      <CreateWalletSheet open={createWalletSheetOpen} onClose={() => setCreateWalletSheetOpen(false)} />
+      <CreateWalletSheet
+        open={createWalletSheetOpen}
+        onClose={() => setCreateWalletSheetOpen(false)}
+      />
 
       {!isConnected && (
         <button
           onClick={() => {
-            signOut();
+            signOut()
           }}
           className="mt-auto btn"
         >
@@ -123,5 +149,5 @@ export function WalletListCard() {
         </button>
       )}
     </div>
-  );
+  )
 }

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

@@ -1,23 +1,27 @@
-import { CheckCircleIcon } from "@heroicons/react/24/outline";
-import { RecoveryMethod, useWallets, type UserWallet } from "@openfort/react";
+import { CheckCircleIcon } from '@heroicons/react/24/outline'
+import { RecoveryMethod, type UserWallet, useWallets } from '@openfort/react'
 
-import { Sheet } from "../../../components/ui/Sheet";
+import { Sheet } from '../../../components/ui/Sheet'
 
 type CreateWalletPasswordSheetProps = {
-  open: boolean;
-  onClose: () => void;
-  onCreateWallet?: () => void;
-};
+  open: boolean
+  onClose: () => void
+  onCreateWallet?: () => void
+}
 
-export function CreateWalletPasswordSheet({ open, onClose, onCreateWallet }: CreateWalletPasswordSheetProps) {
-  const { createWallet, error, isCreating, reset } = useWallets();
+export function CreateWalletPasswordSheet({
+  open,
+  onClose,
+  onCreateWallet,
+}: CreateWalletPasswordSheetProps) {
+  const { createWallet, error, isCreating, reset } = useWallets()
 
   return (
     <Sheet
       open={open}
       onClose={() => {
-        onClose();
-        reset();
+        onClose()
+        reset()
       }}
       title="Enter Password"
       description="Please enter the password of your wallet."
@@ -25,20 +29,20 @@ export function CreateWalletPasswordSheet({ open, onClose, onCreateWallet }: Cre
       <form
         className="flex-1 w-full flex flex-col justify-center max-w-md mx-auto"
         onSubmit={async (event) => {
-          event.preventDefault();
-          const formData = new FormData(event.target as HTMLFormElement);
-          const password = formData.get("password") as string;
+          event.preventDefault()
+          const formData = new FormData(event.target as HTMLFormElement)
+          const password = formData.get('password') as string
 
           const { error: walletError } = await createWallet({
             recovery: {
               recoveryMethod: RecoveryMethod.PASSWORD,
               password,
             },
-          });
+          })
 
           if (!walletError) {
-            onCreateWallet?.();
-            onClose();
+            onCreateWallet?.()
+            onClose()
           }
         }}
       >
@@ -49,7 +53,10 @@ export function CreateWalletPasswordSheet({ open, onClose, onCreateWallet }: Cre
           </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.</span>
+            <span>
+              If you lose this password, you will not be able to access your
+              wallet.
+            </span>
           </div>
         </div>
         <input
@@ -58,30 +65,40 @@ export function CreateWalletPasswordSheet({ open, onClose, onCreateWallet }: Cre
           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>}
-        <button className="mt-4 w-full bg-zinc-700 text-white p-2 rounded cursor-pointer" type="submit" disabled={isCreating}>
-          {isCreating ? "Creating wallet..." : "Create Wallet"}
+        {error && (
+          <span className="text-red-500 text-sm mt-2">{error?.message}</span>
+        )}
+        <button
+          className="mt-4 w-full bg-zinc-700 text-white p-2 rounded cursor-pointer"
+          type="submit"
+          disabled={isCreating}
+        >
+          {isCreating ? 'Creating wallet...' : 'Create Wallet'}
         </button>
       </form>
     </Sheet>
-  );
+  )
 }
 
 type WalletRecoverPasswordSheetProps = {
-  open: boolean;
-  onClose: () => void;
-  wallet: UserWallet | null;
-};
+  open: boolean
+  onClose: () => void
+  wallet: UserWallet | null
+}
 
-export function WalletRecoverPasswordSheet({ open, onClose, wallet }: WalletRecoverPasswordSheetProps) {
-  const { setActiveWallet, error, isConnecting, reset } = useWallets();
+export function WalletRecoverPasswordSheet({
+  open,
+  onClose,
+  wallet,
+}: WalletRecoverPasswordSheetProps) {
+  const { setActiveWallet, error, isConnecting, reset } = useWallets()
 
   return (
     <Sheet
       open={open}
       onClose={() => {
-        onClose();
-        reset();
+        onClose()
+        reset()
       }}
       title="Enter Password"
       description="Please enter the password of your wallet."
@@ -89,24 +106,25 @@ export function WalletRecoverPasswordSheet({ open, onClose, wallet }: WalletReco
       <form
         className="w-full flex-1 flex flex-col justify-center"
         onSubmit={(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");
+          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",
+            walletId: 'xyz.openfort',
             recovery: {
               recoveryMethod: RecoveryMethod.PASSWORD,
               password,
             },
             address: wallet.address,
-          });
+          })
         }}
       >
         {wallet && (
           <p>
-            Recover wallet {wallet.address.slice(0, 6)}...{wallet.address.slice(-4)} with password
+            Recover wallet {wallet.address.slice(0, 6)}...
+            {wallet.address.slice(-4)} with password
           </p>
         )}
         <input
@@ -115,11 +133,17 @@ export function WalletRecoverPasswordSheet({ open, onClose, wallet }: WalletReco
           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>}
-        <button className="mt-4 w-full bg-zinc-700 text-white p-2 rounded cursor-pointer" type="submit" disabled={isConnecting}>
-          {isConnecting ? "Recovering..." : "Recover Wallet"}
+        {error && (
+          <span className="text-red-500 text-sm mt-2">{error?.message}</span>
+        )}
+        <button
+          className="mt-4 w-full bg-zinc-700 text-white p-2 rounded cursor-pointer"
+          type="submit"
+          disabled={isConnecting}
+        >
+          {isConnecting ? 'Recovering...' : 'Recover Wallet'}
         </button>
       </form>
     </Sheet>
-  );
+  )
 }

package/template/openfort-templates/firebase/vite.config.ts

@@ -1,11 +1,11 @@
-import { defineConfig, loadEnv } from 'vite'
-import react from '@vitejs/plugin-react'
 import tailwindcss from '@tailwindcss/vite'
+import react from '@vitejs/plugin-react'
+import { defineConfig, loadEnv } from 'vite'
 
 // https://vite.dev/config/
 export default defineConfig(({ mode }) => {
   const env = loadEnv(mode, process.cwd(), '')
-  
+
   return {
     plugins: [react(), tailwindcss()],
     server: {

package/template/openfort-templates/headless/biome.json

@@ -1,5 +1,5 @@
 {
-  "$schema": "https://biomejs.dev/schemas/2.2.6/schema.json",
+  "$schema": "https://biomejs.dev/schemas/2.3.8/schema.json",
   "root": true,
   "vcs": {
     "enabled": true,
@@ -7,7 +7,8 @@
     "useIgnoreFile": true
   },
   "files": {
-    "ignoreUnknown": true
+    "ignoreUnknown": true,
+    "includes": ["**/*.tsx", "**/*.ts", "**/*.jsx", "**/*.js"]
   },
   "formatter": {
     "enabled": true,
@@ -49,7 +50,6 @@
   },
   "overrides": [
     {
-      "includes": ["**/*.tsx", "**/*.ts", "**/*.jsx", "**/*.js"],
       "linter": {
         "rules": {
           "correctness": {

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

@@ -20,7 +20,7 @@
     "wagmi": "^2.18.2"
   },
   "devDependencies": {
-    "@biomejs/biome": "^2.2.6",
+    "@biomejs/biome": "^2.3.8",
     "@tailwindcss/vite": "^4.1.15",
     "tailwindcss": "^4.1.15",
     "@types/react": "^19.1.10",

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

@@ -110,10 +110,10 @@ const AuthForm = () => {
   const [isLogin, setIsLogin] = useState(true)
   const { isLoading } = useAuthCallback({
     onSuccess: () => {
-      alert('Authentication verified!')
+      console.log('Authentication verified!')
     },
     onError: (e) => {
-      alert(`Authentication verification failed!${e.message}`)
+      console.error(`Authentication verification failed!${e.message}`)
     },
   })
 

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

@@ -22,9 +22,7 @@ export const Profile = ({
 
   return (
     <div className="flex flex-col flex-1 gap-4">
-      <h1 className="truncate">
-        Welcome, {user?.player?.name || user?.linkedAccounts[0]?.email}
-      </h1>
+      <h1 className="truncate">Welcome, {user?.name || user?.email}</h1>
       <p className="text-zinc-400 text-sm">
         {description}
         <br />

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

@@ -24,8 +24,11 @@ export function Providers({ children }: { children: React.ReactNode }) {
           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, // The endpoint to create an encryption session for automatic wallet recovery
+              .VITE_CREATE_ENCRYPTED_SESSION_ENDPOINT,
             recoverWalletAutomaticallyAfterAuth: true, // We will manually call create/setActive wallet after auth
           }}
         >

package/template/openfort-templates/headless/src/index.css

@@ -89,7 +89,6 @@
   --card-width: 29rem;
   --card-group-height: 600px;
 
-
   @media (max-width: calc(64rem - 1px)) {
     --card-group-width: 29rem;
   }
@@ -111,7 +110,7 @@
 }
 
 .logo:hover {
-  filter: drop-shadow(0 0 3em #FC3627);
+  filter: drop-shadow(0 0 3em #fc3627);
 }
 
 @keyframes spin {
@@ -156,7 +155,11 @@
   color: var(--color-zinc-100);
   border: 1px solid var(--color-zinc-100);
   background-color: var(--color-zinc-800);
-  transition: border-color 300ms, background-color 300ms, color 300ms, filter 300ms;
+  transition:
+    border-color 300ms,
+    background-color 300ms,
+    color 300ms,
+    filter 300ms;
 
   overflow: hidden;
 
@@ -164,7 +167,10 @@
   min-height: 2rem;
 
   .hover-description {
-    transition: transform 300ms, max-height 500ms, opacity 300ms;
+    transition:
+      transform 300ms,
+      max-height 500ms,
+      opacity 300ms;
 
     max-height: 2.5rem;
   }

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

@@ -1,5 +1,5 @@
 {
-  "$schema": "https://biomejs.dev/schemas/2.2.6/schema.json",
+  "$schema": "https://biomejs.dev/schemas/2.3.8/schema.json",
   "root": true,
   "vcs": {
     "enabled": true,
@@ -7,7 +7,8 @@
     "useIgnoreFile": true
   },
   "files": {
-    "ignoreUnknown": true
+    "ignoreUnknown": true,
+    "includes": ["**/*.tsx", "**/*.ts", "**/*.jsx", "**/*.js"]
   },
   "formatter": {
     "enabled": true,
@@ -49,7 +50,6 @@
   },
   "overrides": [
     {
-      "includes": ["**/*.tsx", "**/*.ts", "**/*.jsx", "**/*.js"],
       "linter": {
         "rules": {
           "correctness": {

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

@@ -20,7 +20,7 @@
     "wagmi": "^2.18.2"
   },
   "devDependencies": {
-    "@biomejs/biome": "^2.2.6",
+    "@biomejs/biome": "^2.3.8",
     "@types/react": "^19.1.10",
     "@types/react-dom": "^19.1.7",
     "@tailwindcss/vite": "^4.1.15",

package/template/openfort-templates/openfort-ui/src/App.tsx

@@ -1,9 +1,7 @@
 import { Main } from './components/cards/main'
 
 function App() {
-  return (
-    <Main />
-  )
+  return <Main />
 }
 
 export default App