create-openfort 0.1.8 → 0.1.10

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

@@ -1,39 +1,46 @@
-import { RecoveryMethod, useWallets, type UserWallet } from "@openfort/react";
-import { Sheet } from "./ui/Sheet"
-import { CheckCircleIcon } from "@heroicons/react/24/outline";
+import { CheckCircleIcon } from '@heroicons/react/24/outline'
+import { RecoveryMethod, type UserWallet, useWallets } from '@openfort/react'
+import { Sheet } from './ui/Sheet'
 
 type CreateWalletPasswordSheetProps = {
-  open: boolean,
+  open: boolean
   onClose: () => void
   onCreateWallet?: () => void
-};
-export const CreateWalletPasswordSheet = ({ open, onClose, onCreateWallet }: CreateWalletPasswordSheetProps) => {
-  const { createWallet, error, isCreating, reset } = useWallets();
+}
+export const CreateWalletPasswordSheet = ({
+  open,
+  onClose,
+  onCreateWallet,
+}: CreateWalletPasswordSheetProps) => {
+  const { createWallet, error, isCreating, reset } = useWallets()
 
   return (
     <Sheet
       open={open}
-      onClose={() => { onClose(); reset(); }}
+      onClose={() => {
+        onClose()
+        reset()
+      }}
       title="Enter Password"
       description="Please enter the password of your wallet."
     >
       <form
         className="flex-1 w-full flex flex-col justify-center max-w-md mx-auto"
         onSubmit={async (e) => {
-          e.preventDefault();
-          const formData = new FormData(e.target as HTMLFormElement);
-          const password = formData.get("password") as string;
+          e.preventDefault()
+          const formData = new FormData(e.target as HTMLFormElement)
+          const password = formData.get('password') as string
 
           const { error } = await createWallet({
             recovery: {
               recoveryMethod: RecoveryMethod.PASSWORD,
-              password
-            }
-          });
+              password,
+            },
+          })
 
           if (!error) {
-            onCreateWallet?.();
-            onClose();
+            onCreateWallet?.()
+            onClose()
           }
         }}
       >
@@ -44,7 +51,10 @@ export const 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
@@ -53,88 +63,83 @@ export const 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>
-          )
-        }
+        {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"
-          }
+          {isCreating ? 'Creating wallet...' : 'Create Wallet'}
         </button>
       </form>
     </Sheet>
   )
 }
 
-
 type WalletRecoverPasswordProps = {
-  open: boolean,
-  onClose: () => void,
+  open: boolean
+  onClose: () => void
   wallet: UserWallet | null
-};
+}
 
-export const WalletRecoverPasswordSheet = ({ open, onClose, wallet }: WalletRecoverPasswordProps) => {
-  const { setActiveWallet, error, isConnecting, reset } = useWallets();
+export const WalletRecoverPasswordSheet = ({
+  open,
+  onClose,
+  wallet,
+}: WalletRecoverPasswordProps) => {
+  const { setActiveWallet, error, isConnecting, reset } = useWallets()
 
   return (
     <Sheet
       open={open}
-      onClose={() => { onClose(); reset(); }}
+      onClose={() => {
+        onClose()
+        reset()
+      }}
       title="Enter Password"
       description="Please enter the password of your wallet."
     >
       <form
         className="w-full flex-1 flex flex-col justify-center"
         onSubmit={(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");
+          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",
+            walletId: 'xyz.openfort',
             recovery: {
               recoveryMethod: RecoveryMethod.PASSWORD,
-              password
+              password,
             },
             address: wallet.address,
-          });
+          })
         }}
       >
-        {
-          wallet && (
-            <p>Recover wallet {wallet.address.slice(0, 6)}...{wallet.address.slice(-4)} with password</p>
-          )
-        }
+        {wallet && (
+          <p>
+            Recover wallet {wallet.address.slice(0, 6)}...
+            {wallet.address.slice(-4)} with password
+          </p>
+        )}
         <input
           type="password"
           name="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>
-          )
-        }
+        {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"
-          }
+          {isConnecting ? 'Recovering...' : 'Recover Wallet'}
         </button>
       </form>
     </Sheet>

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

@@ -1,17 +1,16 @@
-import { QueryClientProvider, QueryClient } from '@tanstack/react-query';
-import { createConfig, WagmiProvider } from 'wagmi';
-
-import { getDefaultConfig, OpenfortProvider, type Theme } from "@openfort/react";
-import { beamTestnet, polygonAmoy } from 'viem/chains';
-import { useState } from 'react';
+import { getDefaultConfig, OpenfortProvider, type Theme } from '@openfort/react'
+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',
     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())
@@ -21,27 +20,27 @@ export function Providers({ children }: { children: React.ReactNode }) {
         <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
 
             ethereumProviderPolicyId: import.meta.env.VITE_POLICY_ID, // The policy ID for sponsoring transactions
 
-            createEncryptedSessionEndpoint: import.meta.env.VITE_CREATE_ENCRYPTED_SESSION_ENDPOINT, // The endpoint to create an encryption session for automatic wallet recovery
+            // 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,
 
             recoverWalletAutomaticallyAfterAuth: false, // We will manually call create/setActive wallet after auth
           }}
-
           uiConfig={{
             theme: import.meta.env.VITE_OPENFORT_THEME as Theme,
           }}
         >
-          <>
-            {children}
-          </>
+          {children}
         </OpenfortProvider>
       </QueryClientProvider>
     </WagmiProvider>
-  );
+  )
 }

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

@@ -1,22 +1,22 @@
-import { ChevronLeftIcon } from "@heroicons/react/24/outline";
-import { useEffect, useState } from "react";
+import { ChevronLeftIcon } from '@heroicons/react/24/outline'
+import { useEffect, useState } from 'react'
 
 type SheetProps = {
-  open: boolean,
-  onClose: () => void,
-  title: string,
-  description: string,
+  open: boolean
+  onClose: () => void
+  title: string
+  description: string
   children: React.ReactNode
-};
+}
 
 const SheetInner = ({ onClose, title, description, children }: SheetProps) => {
-  const [isClosing, setIsClosing] = useState(false);
+  const [isClosing, setIsClosing] = useState(false)
   useEffect(() => {
     if (isClosing) {
-      const timer = setTimeout(onClose, 300);
-      return () => clearTimeout(timer);
+      const timer = setTimeout(onClose, 300)
+      return () => clearTimeout(timer)
     }
-  }, [isClosing, onClose]);
+  }, [isClosing, onClose])
 
   return (
     <div
@@ -41,9 +41,7 @@ const SheetInner = ({ onClose, title, description, children }: SheetProps) => {
 }
 
 export const Sheet = (props: SheetProps) => {
-  if (!props.open) return null;
+  if (!props.open) return null
 
-  return (
-    <SheetInner {...props} />
-  )
-}
+  return <SheetInner {...props} />
+}

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

@@ -1,22 +1,26 @@
 export type TabType = {
-  name: string;
-  component: React.ReactNode;
-  icon: React.ComponentType<React.SVGProps<SVGSVGElement>>;
-};
+  name: string
+  component: React.ReactNode
+  icon: React.ComponentType<React.SVGProps<SVGSVGElement>>
+}
 
 type TabProps = {
-  onClick?: () => void;
-  isActive?: boolean;
-} & TabType;
+  onClick?: () => void
+  isActive?: boolean
+} & TabType
 
 const DesktopTab = ({ name, isActive, ...buttonProps }: TabProps) => {
   return (
     <button
       className="relative h-8 mx-2.5 transition-colors cursor-pointer"
-      style={{
-        "--tab-bg-color": isActive ? "var(--color-zinc-800)" : "var(--color-zinc-700)",
-        opacity: isActive ? 1 : 0.6,
-      } as React.CSSProperties}
+      style={
+        {
+          '--tab-bg-color': isActive
+            ? 'var(--color-zinc-800)'
+            : 'var(--color-zinc-700)',
+          opacity: isActive ? 1 : 0.6,
+        } as React.CSSProperties
+      }
       {...buttonProps}
     >
       <div className="absolute w-5 h-8 bg-(--tab-bg-color) rotate-20 transform origin-top-left top-1" />
@@ -24,7 +28,7 @@ const DesktopTab = ({ name, isActive, ...buttonProps }: TabProps) => {
       <div className="absolute inset-0 rounded-md bg-(--tab-bg-color)" />
 
       <span
-        className={`${isActive ? "text-white" : "text-zinc-400"} whitespace-nowrap bg-(--tab-bg-color) z-10 relative mx-2 pb-4`}
+        className={`${isActive ? 'text-white' : 'text-zinc-400'} whitespace-nowrap bg-(--tab-bg-color) z-10 relative mx-2 pb-4`}
       >
         {name}
       </span>
@@ -33,25 +37,30 @@ const DesktopTab = ({ name, isActive, ...buttonProps }: TabProps) => {
 }
 
 type TabGroupProps = {
-  tabs: TabType[],
-  currentTab?: TabType,
+  tabs: TabType[]
+  currentTab?: TabType
   setCurrentTab?: (tab: TabType) => void
   showTabs?: boolean
 }
 
-export const DesktopTabGroup = ({ tabs, currentTab, setCurrentTab, showTabs }: TabGroupProps) => {
+export const DesktopTabGroup = ({
+  tabs,
+  currentTab,
+  setCurrentTab,
+  showTabs,
+}: TabGroupProps) => {
   return (
-    <div
-      className="absolute left-[100%] top-2 rotate-90 transform origin-top-left hidden xs:block"
-    >
+    <div className="absolute left-[100%] top-2 rotate-90 transform origin-top-left hidden xs:block">
       <div
         className="flex gap-2 transition-transform duration-500"
-        style={{ transform: showTabs ? "translateY(-100%)" : "translateY(10px)" }}
+        style={{
+          transform: showTabs ? 'translateY(-100%)' : 'translateY(10px)',
+        }}
       >
         {tabs?.map((tab) => (
           <DesktopTab
             key={tab.name}
-            onClick={() => setCurrentTab && setCurrentTab(tab)}
+            onClick={() => setCurrentTab?.(tab)}
             isActive={currentTab?.name === tab.name}
             {...tab}
           />
@@ -61,9 +70,12 @@ export const DesktopTabGroup = ({ tabs, currentTab, setCurrentTab, showTabs }: T
   )
 }
 
-
-
-const MobileTab = ({ name, isActive, icon: Icon, ...buttonProps }: TabProps) => {
+const MobileTab = ({
+  name,
+  isActive,
+  icon: Icon,
+  ...buttonProps
+}: TabProps) => {
   return (
     <button
       className="relative h-8 mx-2.5 transition-colors cursor-pointer"
@@ -71,7 +83,7 @@ const MobileTab = ({ name, isActive, icon: Icon, ...buttonProps }: TabProps) =>
     >
       <Icon className="h-5 w-5 mx-auto mb-1" />
       <span
-        className={`${isActive ? "text-white" : "text-zinc-400"} whitespace-nowrap`}
+        className={`${isActive ? 'text-white' : 'text-zinc-400'} whitespace-nowrap`}
       >
         {name}
       </span>
@@ -82,20 +94,18 @@ const MobileTab = ({ name, isActive, icon: Icon, ...buttonProps }: TabProps) =>
 export const MobileTabGroup = ({
   tabs,
   currentTab,
-  setCurrentTab
+  setCurrentTab,
 }: TabGroupProps) => {
   return (
     <div className="mt-auto xs:hidden flex pt-6 pb-2 items-end justify-between text-zinc-400 text-sm">
-      {
-        tabs?.map((tab) => (
-          <MobileTab
-            key={tab.name}
-            onClick={() => setCurrentTab && setCurrentTab(tab)}
-            isActive={currentTab?.name === tab.name}
-            {...tab}
-          />
-        ))
-      }
+      {tabs?.map((tab) => (
+        <MobileTab
+          key={tab.name}
+          onClick={() => setCurrentTab?.(tab)}
+          isActive={currentTab?.name === tab.name}
+          {...tab}
+        />
+      ))}
     </div>
   )
-}
+}

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

@@ -1,14 +1,20 @@
-import { useState } from "react"
+import { useState } from 'react'
 
-export const TruncateData = ({ className, data }: { className?: string; data?: string }) => {
+export const TruncateData = ({
+  className,
+  data,
+}: {
+  className?: string
+  data?: string
+}) => {
   const [viewMore, setViewMore] = useState(false)
   if (!data) return null
 
   return (
-    <div className={`mt-4 p-2 border border-zinc-700 rounded bg-zinc-900 ${className}`}>
-      <pre
-        className="break-words whitespace-normal text-sm"
-      >
+    <div
+      className={`mt-4 p-2 border border-zinc-700 rounded bg-zinc-900 ${className}`}
+    >
+      <pre className="break-words whitespace-normal text-sm">
         {viewMore ? data : data.length > 90 ? `${data.slice(0, 90)}...` : data}
       </pre>
       {data.length > 90 && (
@@ -17,9 +23,9 @@ export const TruncateData = ({ className, data }: { className?: string; data?: s
           onClick={() => setViewMore(!viewMore)}
           type="button"
         >
-          {viewMore ? "View less" : "View more"}
+          {viewMore ? 'View less' : 'View more'}
         </button>
       )}
     </div>
   )
-}
+}

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

@@ -1,6 +1,6 @@
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
 import tailwindcss from '@tailwindcss/vite'
+import react from '@vitejs/plugin-react'
+import { defineConfig } from 'vite'
 
 // https://vite.dev/config/
 export default defineConfig({