create-openfort 0.1.8 → 0.1.10

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

@@ -1,29 +1,29 @@
-import { BookOpenIcon } from "@heroicons/react/24/outline";
-import { useSignOut, useUser } from "@openfort/react";
-import { useAccount } from "wagmi";
-import { Auth } from "./auth";
+import { BookOpenIcon } from '@heroicons/react/24/outline'
+import { useSignOut, useUser } from '@openfort/react'
+import { useAccount } from 'wagmi'
+import { Auth } from './auth'
 
 export const Profile = ({
   sampleGithubUrl,
   description,
 }: {
-  sampleGithubUrl: string;
-  description: string;
+  sampleGithubUrl: string
+  description: string
 }) => {
-  const { user } = useUser();
-  const isLocal = window.location.hostname === "localhost";
-  const { signOut } = useSignOut();
+  const { user } = useUser()
+  const isLocal = window.location.hostname === 'localhost'
+  const { signOut } = useSignOut()
 
-  const { isConnected } = useAccount();
+  const { isConnected } = useAccount()
 
   if (!isConnected) {
-    return <Auth />;
+    return <Auth />
   }
 
   return (
     <div className="flex flex-col flex-1 gap-4">
       <h1 className="truncate">
-        Welcome, {user?.player?.name || user?.linkedAccounts[0]?.email}
+        Welcome, {user?.name || user?.email}
       </h1>
       <p className="text-zinc-400 text-sm">
         {description}
@@ -31,27 +31,21 @@ export const Profile = ({
         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">
-            Start by creating a wallet, minting some tokens and signing messages.
+            Start by creating a wallet, minting some tokens and signing
+            messages.
           </p>
-          {
-            isLocal ? (
-              <>
-                <p className="mb-2 text-sm">
-                  Edit <code>src/components/main.tsx</code> to customize the app.
-                </p>
-              </>
-            ) : (
-              <>
-                <p className="mb-2 text-sm">
-                  Clone this project and test it yourself, it is open source!
-                </p>
-              </>
-            )
-          }
+          {isLocal ? (
+            <p className="mb-2 text-sm">
+              Edit <code>src/components/main.tsx</code> to customize the app.
+            </p>
+          ) : (
+            <p className="mb-2 text-sm">
+              Clone this project and test it yourself, it is open source!
+            </p>
+          )}
           <div className="flex gap-4 mt-4">
             <a
               href={sampleGithubUrl}
@@ -60,7 +54,8 @@ export const Profile = ({
               rel="noreferrer"
             >
               <img
-                src="/githubLogo.svg" className="w-5 h-5 mr-2"
+                src="/githubLogo.svg"
+                className="w-5 h-5 mr-2"
                 alt="GitHub logo"
               />
               View on github
@@ -76,17 +71,16 @@ export const Profile = ({
             </a>
           </div>
         </div>
-
       </p>
 
       <button
         onClick={() => {
-          signOut();
+          signOut()
         }}
         className="btn mt-auto"
       >
         Sign Out
       </button>
-    </div >
-  );
-}
+    </div>
+  )
+}

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

@@ -1,10 +1,9 @@
-import { useChainId, useSignMessage, useSignTypedData } from "wagmi";
-import { TruncateData } from "../ui/TruncateData";
-
+import { useChainId, useSignMessage, useSignTypedData } from 'wagmi'
+import { TruncateData } from '../ui/TruncateData'
 
 function SignTypedData() {
   const { signTypedData, error, data } = useSignTypedData()
-  const chainId = useChainId();
+  const chainId = useChainId()
 
   return (
     <div>
@@ -15,52 +14,47 @@ function SignTypedData() {
           event.preventDefault()
           signTypedData({
             domain: {
-              name: "Ether Mail",
-              version: "1",
+              name: 'Ether Mail',
+              version: '1',
               chainId: chainId,
-              verifyingContract: "0xCcCCccccCCCCcCCCCCCcCcCccCcCCCcCcccccccC"
+              verifyingContract: '0xCcCCccccCCCCcCCCCCCcCcCccCcCCCcCcccccccC',
             },
             types: {
               Person: [
-                { name: "name", type: "string" },
-                { name: "wallet", type: "address" }
+                { name: 'name', type: 'string' },
+                { name: 'wallet', type: 'address' },
               ],
               Mail: [
-                { name: "from", type: "Person" },
-                { name: "to", type: "Person" },
-                { name: "contents", type: "string" }
-              ]
+                { name: 'from', type: 'Person' },
+                { name: 'to', type: 'Person' },
+                { name: 'contents', type: 'string' },
+              ],
             },
-            primaryType: "Mail",
+            primaryType: 'Mail',
             message: {
               from: {
-                name: "Cow",
-                wallet: "0xCD2a3d9F938E13CD947Ec05AbC7FE734Df8DD826"
+                name: 'Cow',
+                wallet: '0xCD2a3d9F938E13CD947Ec05AbC7FE734Df8DD826',
               },
               to: {
-                name: "Bob",
-                wallet: "0xbBbBBBBbbBBBbbbBbbBbbbbBBbBbbbbBbBbbBBbB"
+                name: 'Bob',
+                wallet: '0xbBbBBBBbbBBBbbbBbbBbbbbBBbBbbbbBbBbbBBbB',
               },
-              contents: "Hello, Bob!"
-            }
+              contents: 'Hello, Bob!',
+            },
           })
         }}
       >
-        <button
-          type="submit"
-          className="btn"
-        >
+        <button type="submit" className="btn">
           Sign Message
         </button>
-
       </form>
       <TruncateData data={data} />
       <TruncateData data={error?.message} className="text-red-500" />
-    </div >
+    </div>
   )
 }
 
-
 function SignMessage() {
   const { data, signMessage, error } = useSignMessage()
 
@@ -72,40 +66,32 @@ function SignMessage() {
         onSubmit={(event) => {
           event.preventDefault()
           const formData = new FormData(event.target as HTMLFormElement)
-          console.log("Message to sign:", formData.get('message'))
+          console.log('Message to sign:', formData.get('message'))
           signMessage({ message: formData.get('message') as string })
         }}
       >
-        <input
-          name="message"
-          placeholder="Message to sign"
-        />
-        <button
-          type="submit"
-          className="btn"
-        >
+        <input name="message" placeholder="Message to sign" />
+        <button type="submit" className="btn">
           Sign Message
         </button>
       </form>
       <TruncateData data={error?.message} className="text-red-500" />
       <TruncateData data={data} />
-    </div >
+    </div>
   )
 }
 
 export const Sign = () => {
   return (
-    <>
-      <div className="flex flex-col w-full">
-        <h1>Signatures</h1>
-        <p className="mb-4 text-sm text-zinc-400">
-          Sign messages and typed data with your connected wallet.
-        </p>
-        <div className="space-y-6">
-          <SignMessage />
-          <SignTypedData />
-        </div>
+    <div className="flex flex-col w-full">
+      <h1>Signatures</h1>
+      <p className="mb-4 text-sm text-zinc-400">
+        Sign messages and typed data with your connected wallet.
+      </p>
+      <div className="space-y-6">
+        <SignMessage />
+        <SignTypedData />
       </div>
-    </>
+    </div>
   )
-}
+}

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

@@ -1,17 +1,35 @@
-import { FingerPrintIcon, KeyIcon, LockClosedIcon } from "@heroicons/react/24/outline";
-import { RecoveryMethod, useSignOut, useUser, useWallets, type UserWallet } from "@openfort/react";
-import { useState } from "react";
-import { CreateWallet, CreateWalletSheet } from "../createWallet";
-import { WalletRecoverPasswordSheet } from "../passwordRecovery";
-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 '../createWallet'
+import { WalletRecoverPasswordSheet } from '../passwordRecovery'
 
 export const Wallets = () => {
-  const { wallets, isLoadingWallets, availableWallets, setActiveWallet, isConnecting } = useWallets();
-  const { user, isAuthenticated } = useUser();
-  const { isConnected } = useAccount();
-  const [createWalletSheetOpen, setCreateWalletSheetOpen] = useState(false);
-  const [walletToRecover, setWalletToRecover] = useState<UserWallet | null>(null);
-  const { signOut } = useSignOut();
+  const {
+    wallets,
+    isLoadingWallets,
+    availableWallets,
+    setActiveWallet,
+    isConnecting,
+  } = useWallets()
+  const { user, isAuthenticated } = useUser()
+  const { isConnected } = useAccount()
+  const [createWalletSheetOpen, setCreateWalletSheetOpen] = useState(false)
+  const [walletToRecover, setWalletToRecover] = useState<UserWallet | null>(
+    null,
+  )
+  const { signOut } = useSignOut()
 
   if (isLoadingWallets || (!user && isAuthenticated)) {
     return <div>Loading wallets...</div>
@@ -27,23 +45,23 @@ export const Wallets = () => {
   }
 
   const renderWalletRecovery = (wallet: UserWallet) => {
-    let Icon = LockClosedIcon;
-    let text = "Unknown";
-    const method = wallet.recoveryMethod;
+    let Icon = LockClosedIcon
+    let text = 'Unknown'
+    const method = wallet.recoveryMethod
 
     switch (method) {
       case RecoveryMethod.PASSWORD:
-        Icon = KeyIcon;
-        text = "Password";
-        break;
+        Icon = KeyIcon
+        text = 'Password'
+        break
       case RecoveryMethod.AUTOMATIC:
-        Icon = LockClosedIcon;
-        text = "Automatic";
-        break;
+        Icon = LockClosedIcon
+        text = 'Automatic'
+        break
       case RecoveryMethod.PASSKEY:
-        Icon = FingerPrintIcon;
-        text = "Passkey";
-        break;
+        Icon = FingerPrintIcon
+        text = 'Passkey'
+        break
     }
 
     return (
@@ -55,14 +73,13 @@ export const Wallets = () => {
   }
 
   const handleWalletClick = (wallet: UserWallet) => {
-    if (wallet.isActive || isConnecting) return;
-    const method = wallet.recoveryMethod;
+    if (wallet.isActive || isConnecting) return
+    const method = wallet.recoveryMethod
     if (method === RecoveryMethod.PASSWORD) {
-      setWalletToRecover(wallet);
-
+      setWalletToRecover(wallet)
     } else {
       setActiveWallet({
-        walletId: "xyz.openfort",
+        walletId: 'xyz.openfort',
         address: wallet.address,
       })
     }
@@ -86,13 +103,11 @@ export const Wallets = () => {
               disabled={wallet.isActive || isConnecting}
             >
               {wallet.isConnecting ? (
-                <p>
-                  Connecting...
-                </p>
+                <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)}
+                    {`${wallet.address.substring(0, 6)}...${wallet.address.substring(wallet.address.length - 4)}`}
                   </p>
                   {renderWalletRecovery(wallet)}
                 </div>
@@ -118,17 +133,16 @@ export const Wallets = () => {
         onClose={() => setCreateWalletSheetOpen(false)}
       />
 
-      {
-        !isConnected &&
+      {!isConnected && (
         <button
           onClick={() => {
-            signOut();
+            signOut()
           }}
           className="mt-auto btn"
         >
           Sign Out
         </button>
-      }
+      )}
     </div>
   )
 }

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

@@ -1,22 +1,36 @@
-import { FingerPrintIcon, KeyIcon, LockClosedIcon } from "@heroicons/react/24/outline";
-import { useState } from "react";
-import { CreateWalletPasswordSheet } from "./passwordRecovery";
-import { RecoveryMethod, useWallets } from "@openfort/react";
-import { Sheet } from "./ui/Sheet";
+import {
+  FingerPrintIcon,
+  KeyIcon,
+  LockClosedIcon,
+} from '@heroicons/react/24/outline'
+import { RecoveryMethod, useWallets } from '@openfort/react'
+import { useState } from 'react'
+import { CreateWalletPasswordSheet } from './passwordRecovery'
+import { Sheet } from './ui/Sheet'
 
-export const CreateWalletSheet = ({ open, onClose }: { open: boolean, onClose: () => void }) => {
+export const CreateWalletSheet = ({
+  open,
+  onClose,
+}: {
+  open: boolean
+  onClose: () => void
+}) => {
   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={() => {
+          onClose()
+        }}
       />
     </Sheet>
-  );
+  )
 }
 
 export const CreateWallet = ({
@@ -24,16 +38,16 @@ export const CreateWallet = ({
 }: {
   onWalletCreated?: () => void
 }) => {
-  const [passwordSheetOpen, setPasswordSheetOpen] = useState(false);
+  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 (
@@ -41,30 +55,38 @@ export const CreateWallet = ({
       <div className="flex flex-col gap-4 wallet-option-group mb-4">
         <button
           className="wallet-option cursor-pointer"
-          onClick={() => createWallet({
-            recovery: {
-              recoveryMethod: RecoveryMethod.PASSKEY
-            }
-          })}
+          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>
+            <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
-            }
-          })}
+          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>
+            <p className="text-sm hover-description">
+              Uses encryption session to recover your wallet.
+            </p>
           </div>
         </button>
         <button
@@ -74,15 +96,26 @@ export const CreateWallet = ({
           <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?.(); }} />
+      <CreateWalletPasswordSheet
+        open={passwordSheetOpen}
+        onClose={() => setPasswordSheetOpen(false)}
+        onCreateWallet={() => {
+          onWalletCreated?.()
+        }}
+      />
     </>
   )
 }