create-openfort 0.1.10 → 1.0.1

package/template/openfort-templates/openfort-ui/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/openfort-ui/src/components/providers.tsx

@@ -1,46 +1,50 @@
-import { getDefaultConfig, OpenfortProvider, type Theme } from '@openfort/react'
+import { OpenfortProvider, type Theme } 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: [beamTestnet, polygonAmoy], // The chains you want to support
     walletConnectProjectId: import.meta.env.VITE_WALLET_CONNECT_PROJECT_ID, // The WalletConnect Project ID
   }),
 )
 
-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
+const queryClient = new QueryClient()
 
-            ethereumProviderPolicyId: import.meta.env.VITE_POLICY_ID, // The policy ID for sponsoring transactions
+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,
+  },
+  // 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: false, // We will manually call create/setActive wallet after auth
+}
 
-            // 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,
+const uiConfig = {
+  theme: import.meta.env.VITE_OPENFORT_THEME as Theme,
+}
 
-            recoverWalletAutomaticallyAfterAuth: false, // We will manually call create/setActive wallet after auth
-          }}
-          uiConfig={{
-            theme: import.meta.env.VITE_OPENFORT_THEME as Theme,
-          }}
-        >
-          {children}
-        </OpenfortProvider>
-      </QueryClientProvider>
-    </WagmiProvider>
+export function Providers({ children }: { children: React.ReactNode }) {
+  return (
+    <QueryClientProvider client={queryClient}>
+      <WagmiProvider config={config}>
+        <OpenfortWagmiBridge>
+          <OpenfortProvider
+            debugMode
+            publishableKey={import.meta.env.VITE_OPENFORT_PUBLISHABLE_KEY!}
+            walletConfig={walletConfig}
+            uiConfig={uiConfig}
+          >
+            {children}
+          </OpenfortProvider>
+        </OpenfortWagmiBridge>
+      </WagmiProvider>
+    </QueryClientProvider>
   )
 }

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

@@ -0,0 +1,35 @@
+/** 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
+}
+
+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
+}
+
+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/solana-headless/biome.json

@@ -0,0 +1,70 @@
+{
+  "$schema": "https://biomejs.dev/schemas/2.3.8/schema.json",
+  "root": true,
+  "vcs": {
+    "enabled": true,
+    "clientKind": "git",
+    "useIgnoreFile": true
+  },
+  "files": {
+    "ignoreUnknown": true,
+    "includes": ["**/*.tsx", "**/*.ts", "**/*.jsx", "**/*.js"]
+  },
+  "formatter": {
+    "enabled": true,
+    "formatWithErrors": true,
+    "indentStyle": "space",
+    "indentWidth": 2
+  },
+  "linter": {
+    "enabled": true,
+    "rules": {
+      "recommended": true,
+      "a11y": {
+        "recommended": true,
+        "useButtonType": "off"
+      },
+      "complexity": {
+        "recommended": true
+      },
+      "correctness": {
+        "recommended": true,
+        "useUniqueElementIds": "off"
+      },
+      "suspicious": {
+        "recommended": true,
+        "noUnknownAtRules": "off"
+      },
+      "style": {
+        "recommended": true,
+        "noDescendingSpecificity": "off",
+        "noNonNullAssertion": "off"
+      }
+    }
+  },
+  "javascript": {
+    "formatter": {
+      "quoteStyle": "single",
+      "semicolons": "asNeeded"
+    }
+  },
+  "overrides": [
+    {
+      "linter": {
+        "rules": {
+          "correctness": {
+            "useExhaustiveDependencies": "warn"
+          }
+        }
+      }
+    }
+  ],
+  "assist": {
+    "enabled": true,
+    "actions": {
+      "source": {
+        "organizeImports": "on"
+      }
+    }
+  }
+}

package/template/openfort-templates/solana-headless/index.html

@@ -0,0 +1,16 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Solana Headless Quickstart</title>
+</head>
+
+<body>
+  <div id="root"></div>
+  <script type="module" src="/src/main.tsx"></script>
+</body>
+
+</html>

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

@@ -0,0 +1,34 @@
+{
+  "name": "create-openfort-template-solana-headless",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "check": "biome check --write --unsafe",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@heroicons/react": "^2.2.0",
+    "@openfort/react": "latest",
+    "@solana-program/compute-budget": "^0.12.0",
+    "@solana-program/system": "^0.10.0",
+    "@solana/kit": "^5.4.0",
+    "@solana/kora": "^0.1.1",
+    "@tanstack/react-query": "^5.64.1",
+    "ox": "^0.6.10",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@biomejs/biome": "^2.3.8",
+    "@tailwindcss/vite": "^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/solana-headless/public/githubLogo.svg

@@ -0,0 +1,5 @@
+<svg width="98" height="96" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd"
+    d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z"
+    fill="#fff" />
+</svg>

package/template/openfort-templates/solana-headless/public/openfort.svg

@@ -0,0 +1,13 @@
+<svg width="18" height="11" viewBox="0 0 18 11" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <g clip-path="url(#clip0_1086_43)">
+    <path d="M9.9528 7.63477H8.04474V11H9.9528V7.63477Z" fill="#FC3627" />
+    <path d="M16.0795 11H18V0.00195312L0.00466919 0V11H1.91535V1.90479H16.0795V11Z" fill="#FC3627" />
+    <path d="M14.1479 11L14.1583 3.81055H3.83386V11H5.74454V5.71338H12.2398V11H14.1479Z"
+      fill="#FC3627" />
+  </g>
+  <defs>
+    <clipPath id="clip0_1086_43">
+      <rect width="18" height="11" fill="white" />
+    </clipPath>
+  </defs>
+</svg>

package/template/openfort-templates/solana-headless/public/solanaLogo.svg

@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 397.7 311.7">
+  <linearGradient id="a" x1="360.879" x2="141.213" y1="351.455" y2="-69.986" gradientUnits="userSpaceOnUse">
+    <stop offset="0" stop-color="#9945ff"/>
+    <stop offset=".14" stop-color="#8752f3"/>
+    <stop offset=".42" stop-color="#5497d5"/>
+    <stop offset=".68" stop-color="#43b4ca"/>
+    <stop offset=".88" stop-color="#28e0b9"/>
+    <stop offset="1" stop-color="#19fb9b"/>
+  </linearGradient>
+  <path fill="url(#a)" d="M64.6 237.9c2.4-2.4 5.7-3.8 9.2-3.8h317.4c5.8 0 8.7 7 4.6 11.1l-62.7 62.7c-2.4 2.4-5.7 3.8-9.2 3.8H6.5c-5.8 0-8.7-7-4.6-11.1l62.7-62.7zm0-164.2c2.4-2.4 5.7-3.8 9.2-3.8h317.4c5.8 0 8.7 7 4.6 11.1L333.1 143c-2.4 2.4-5.7 3.8-9.2 3.8H6.5c-5.8 0-8.7-7-4.6-11.1l62.7-62.9v-.1zm256.8 82.1c-2.4-2.4-5.7-3.8-9.2-3.8H-5.2c-5.8 0-8.7 7-4.6 11.1l62.7 62.7c2.4 2.4 5.7 3.8 9.2 3.8h317.4c5.8 0 8.7-7 4.6-11.1l-62.7-62.7z" transform="translate(0 .1)"/>
+</svg>

package/template/openfort-templates/solana-headless/src/App.tsx

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

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

@@ -0,0 +1,167 @@
+import {
+  OAuthProvider,
+  useAuthCallback,
+  useEmailAuth,
+  useGuestAuth,
+  useOAuth,
+} from '@openfort/react'
+import type React from 'react'
+import { useState } from 'react'
+
+const GoogleSignInButton: React.FC = () => {
+  // Sign in with Google
+  const { initOAuth, isLoading } = useOAuth()
+
+  return (
+    <button
+      onClick={() => initOAuth({ provider: OAuthProvider.GOOGLE })}
+      className="w-full py-2 px-4 border border-zinc-700 text-white rounded cursor-pointer transition-colors hover:bg-zinc-900/60"
+    >
+      {isLoading ? 'Loading...' : 'Continue with Google'}
+    </button>
+  )
+}
+
+const GuestSignInButton: React.FC = () => {
+  // Sign in with Google
+  const { signUpGuest, isLoading } = useGuestAuth()
+
+  return (
+    <button
+      onClick={() => signUpGuest()}
+      className="w-full py-2 px-4 border border-zinc-700 text-white rounded cursor-pointer transition-colors hover:bg-zinc-900/60"
+    >
+      {isLoading ? 'Loading...' : 'Continue as Guest'}
+    </button>
+  )
+}
+
+const EmailForm = ({ isLogin }: { isLogin: boolean }) => {
+  const { signInEmail, signUpEmail, error, isLoading } = useEmailAuth()
+
+  const handleSubmit = async (event: React.FormEvent) => {
+    event.preventDefault()
+    const form = event.target as HTMLFormElement
+    const email = (form.elements[0] as HTMLInputElement).value
+    const password = (form.elements[1] as HTMLInputElement).value
+    if (isLogin) {
+      const { requiresEmailVerification } = await signInEmail({
+        email,
+        password,
+      })
+
+      if (requiresEmailVerification) {
+        alert(
+          'User is not verified. Please check your email to verify your account.',
+        )
+      }
+    } else {
+      const { requiresEmailVerification } = await signUpEmail({
+        email,
+        password,
+      })
+
+      if (requiresEmailVerification) {
+        alert(
+          'Registration successful! Please check your email to verify your account.',
+        )
+      }
+    }
+  }
+
+  return (
+    <form onSubmit={handleSubmit} className="space-y-4 mb-4">
+      <label
+        className="block text-left text-sm font-medium mb-1"
+        htmlFor="email"
+      >
+        Email
+      </label>
+      <input
+        id="email"
+        type="email"
+        placeholder="Enter your email address"
+        required
+      />
+      <div>
+        <label
+          className="block text-left text-sm font-medium mb-1"
+          htmlFor="password"
+        >
+          Password
+        </label>
+        <input
+          id="password"
+          type="password"
+          placeholder="Enter your password"
+          required
+        />
+      </div>
+      {error && <p className="text-red-500 text-sm">{error.message}</p>}
+
+      <button type="submit" className="btn mt-2">
+        {isLoading ? 'Loading...' : isLogin ? 'Sign In' : 'Sign Up'}
+      </button>
+    </form>
+  )
+}
+
+const AuthForm = () => {
+  const [isLogin, setIsLogin] = useState(true)
+  const { isLoading } = useAuthCallback({
+    onSuccess: () => {
+      console.log('Authentication verified!')
+    },
+    onError: (e) => {
+      console.error(`Authentication verification failed!${e.message}`)
+    },
+  })
+
+  if (isLoading) {
+    return <div>Verifying authentication...</div>
+  }
+
+  return (
+    <div className="space-y-6">
+      <div className="relative">
+        <h1 className="text-left text-2xl font-semibold tracking-tight">
+          {isLogin ? 'Sign in to account' : 'Create an account'}
+        </h1>
+      </div>
+
+      <EmailForm isLogin={isLogin} />
+
+      <div className="relative opacity-80 mb-4">
+        <div className="absolute inset-0 flex items-center">
+          <div className="w-full border-t border-gray-300" />
+        </div>
+        <div className="relative flex justify-center text-sm">
+          <span className="bg-zinc-800 px-2">or</span>
+        </div>
+      </div>
+
+      <div className="space-y-3">
+        <GuestSignInButton />
+        <GoogleSignInButton />
+      </div>
+
+      <div className="text-left text-sm">
+        {isLogin ? 'Already have an account? ' : "Don't have an account? "}
+        <button
+          onClick={() => setIsLogin(!isLogin)}
+          className="text-primary hover:underline cursor-pointer font-medium"
+        >
+          {isLogin ? 'Sign Up' : 'Sign In'}
+        </button>
+      </div>
+    </div>
+  )
+}
+
+export const Auth = () => {
+  return (
+    <div className="card relative">
+      <AuthForm />
+    </div>
+  )
+}