Merge pull request #63 from openfort-xyz/chore/update-schema-and-bugs

Chore/update schema and bugs
openfort-xyz · Feb 6, 2025 · 84cfd24 · 84cfd24
2 parents 95fdb6a + 81c753b
commit 84cfd24
Show file tree

Hide file tree

Showing 35 changed files with 1,079 additions and 957 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,6 +5,11 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.8.22] - 2024-02-06
+### Fix
+- switch chain
+- wrong password for recovery types
+
 ## [0.8.15] - 2024-12-31
 ### Feat
 - Support for platforms not using crypto

diff --git a/examples/apps/auth-sample/src/components/EmbeddedSignerRecovery/AccountRecovery.tsx b/examples/apps/auth-sample/src/components/EmbeddedSignerRecovery/AccountRecovery.tsx
@@ -2,13 +2,16 @@ import {useState} from 'react';
 import {useOpenfort} from '../../hooks/useOpenfort';
 import Loading from '../Loading';
 import { Button } from '../ui/button';
+import { StatusType, Toast } from '../Toasts';
+import { MissingRecoveryPasswordError, WrongRecoveryPasswordError } from '@openfort/openfort-js';
 
 const chainId = Number(process.env.NEXT_PUBLIC_CHAIN_ID);
 
 const AccountRecovery: React.FC = () => {
   const {handleRecovery} = useOpenfort();
   const [loadingPwd, setLoadingPwd] = useState(false);
   const [loadingAut, setLoadingAut] = useState(false);
+  const [status, setStatus] = useState<StatusType>(null);
 
   return (
     <>
@@ -35,7 +38,22 @@ const AccountRecovery: React.FC = () => {
                     ) as HTMLInputElement
                   ).value;
                   setLoadingPwd(true);
-                  await handleRecovery({method: 'password', password, chainId: chainId});
+                  try{
+                    await handleRecovery({method: 'password', password, chainId: chainId});
+                  } catch (e) {
+                    if(e instanceof MissingRecoveryPasswordError){
+                      setStatus({
+                        type: 'error',
+                        title: 'Missing recovery password',
+                      });
+                    }
+                    if(e instanceof WrongRecoveryPasswordError){
+                      setStatus({
+                        type: 'error',
+                        title: 'Wrong recovery password',
+                      });
+                    }
+                  }
                   setLoadingPwd(false);
                 }}
               >
@@ -58,7 +76,22 @@ const AccountRecovery: React.FC = () => {
                 className="bg-white text-black p-2.5 border border-gray-200 rounded-lg w-full hover:bg-gray-100"
                 onClick={async () => {
                   setLoadingAut(true);
-                  await handleRecovery({method:'automatic', chainId: chainId});
+                  try{
+                    await handleRecovery({method:'automatic', chainId: chainId});
+                  } catch (e) {
+                    if(e instanceof MissingRecoveryPasswordError){
+                      setStatus({
+                        type: 'error',
+                        title: 'Missing recovery password',
+                      });
+                    }
+                    if(e instanceof WrongRecoveryPasswordError){
+                      setStatus({
+                        type: 'error',
+                        title: 'Wrong recovery password',
+                      });
+                    }
+                  }
                   setLoadingAut(false);
                 }}
               >
@@ -68,6 +101,7 @@ const AccountRecovery: React.FC = () => {
           </div>
         </div>
       </div>
+      <Toast status={status} setStatus={setStatus} />
     </>
   );
 };

diff --git a/examples/apps/auth-sample/src/components/WalletConnect/SetPairingCode.tsx b/examples/apps/auth-sample/src/components/WalletConnect/SetPairingCode.tsx
@@ -261,6 +261,7 @@ export const SetPairingCodeWithWagmi: React.FC<{
     chains: [mainnet, base, polygonAmoy],
     connectors: [injected()],
     transports,
+    ssr: true,
   });
   const queryClient = new QueryClient();
 

diff --git a/examples/apps/auth-sample/src/components/WalletConnectButton.tsx b/examples/apps/auth-sample/src/components/WalletConnectButton.tsx
@@ -156,6 +156,7 @@ export const getWalletButtons = (params: GetWalletButtonsParams) => {
   const config = createConfig({
     chains: chains as any,
     connectors,
+    ssr: true,
     transports,
   });
   return withWagmi<WalletConnectButtonsOwnProps>(

diff --git a/examples/apps/auth-sample/src/hooks/useOpenfort.tsx b/examples/apps/auth-sample/src/hooks/useOpenfort.tsx
@@ -1,8 +1,7 @@
 import {
   EmbeddedState,
   ShieldAuthType,
-  TypedDataDomain,
-  TypedDataField,
+  type TypedDataPayload,
   type Provider,
   type RecoveryMethod,
   type ShieldAuthentication,
@@ -18,7 +17,7 @@ import {
 } from 'react';
 import axios from 'axios';
 import openfort from '../utils/openfortConfig';
-import { Address, privateKeyToAddress } from 'viem/accounts';
+import { Address } from 'viem/accounts';
 import { Chain, createPublicClient, http } from 'viem';
 
 interface ContextType {
@@ -43,9 +42,9 @@ interface ContextType {
     options?: {hashMessage: boolean; arrayifyMessage: boolean}
   ) => Promise<{data?: string; error?: Error}>;
   signTypedData: (
-    domain: TypedDataDomain,
-    types: Record<string, Array<TypedDataField>>,
-    value: Record<string, any>
+    domain: TypedDataPayload['domain'],
+    types: TypedDataPayload['types'],
+    message: TypedDataPayload['message']
   ) => Promise<{data?: string; error?: Error}>;
   logout: () => Promise<void>;
   getEOAAddress: () => Promise<string>;
@@ -176,12 +175,12 @@ export const OpenfortProvider: React.FC<React.PropsWithChildren<unknown>> = ({
 
   const signTypedData = useCallback(
     async (
-      domain: TypedDataDomain,
-      types: Record<string, Array<TypedDataField>>,
-      value: Record<string, any>
+      domain: TypedDataPayload['domain'],
+      types: TypedDataPayload['types'],
+      message: TypedDataPayload['message']
     ): Promise<{data?: string; error?: Error}> => {
       try {
-        const data = await openfort.signTypedData(domain, types, value);
+        const data = await openfort.signTypedData(domain, types, message);
         return {data};
       } catch (err) {
         console.error('Error signing typed data:', err);
@@ -198,7 +197,6 @@ export const OpenfortProvider: React.FC<React.PropsWithChildren<unknown>> = ({
 
   const handleRecovery = useCallback(
     async ({method, password, chainId}:{method: 'password' | 'automatic', password?: string, chainId: number}) => {
-      try {
         const shieldAuth: ShieldAuthentication = {
           auth: ShieldAuthType.OPENFORT,
           token: openfort.getAccessToken()!,
@@ -212,11 +210,6 @@ export const OpenfortProvider: React.FC<React.PropsWithChildren<unknown>> = ({
           }
           await openfort.configureEmbeddedSigner(chainId, shieldAuth, password);
         }
-      } catch (err) {
-        console.error('Error handling recovery with Openfort:', err);
-        alert(`Error: ${(err as unknown as Error).message}`);
-        location.reload();
-      }
     },
     []
   );

diff --git a/examples/apps/auth-sample/src/pages/forgot-password.tsx b/examples/apps/auth-sample/src/pages/forgot-password.tsx
@@ -8,6 +8,7 @@ import openfort from "../utils/openfortConfig";
 import { getURL } from "../utils/getUrl";
 import { AuthPlayerResponse } from "@openfort/openfort-js";
 import { Button } from "@/components/ui/button";
+import Loading from "@/components/Loading";
 
 function ForgotPasswordPage() {
   const router = useRouter();
@@ -83,8 +84,15 @@ function ForgotPasswordPage() {
                     required
                   />
                 </div>
-                <Button type="submit" className="mt-8 w-full py-2">
-                  Send Reset Email
+                <Button
+                disabled={status?.type === "loading"}
+                type="submit" 
+                className="mt-8 w-full py-2">
+                {status?.type === "loading" ? (
+                  <Loading />
+                ) : (
+                  "Send Reset Email"
+                )}
                 </Button>
               </form>
               <p className="my-5 text-left text-sm text-gray-600">

diff --git a/examples/apps/auth-sample/src/pages/index.tsx b/examples/apps/auth-sample/src/pages/index.tsx
@@ -20,6 +20,7 @@ import AddFunds from "../components/Funding/AddFunds";
 import { Button } from "@/components/ui/button";
 import { Wallet } from "lucide-react";
 import AccountActions from "@/components/AccountActions/AccountActions";
+import Link from "next/link";
 
 const HomePage: NextPage = () => {
   const { state } = useOpenfort();
@@ -61,7 +62,41 @@ const HomePage: NextPage = () => {
 
   if (state === EmbeddedState.EMBEDDED_SIGNER_NOT_CONFIGURED) {
     return (
-      <Layout sidebar={<div />}>
+      <Layout sidebar={
+        <>
+          <div className='flex-1 flex-col space-y-4 p-8'>
+            <div className='bg-white text-sm p-3 border-orange-400 border-4 rounded-sm'>
+              <p className="font-medium pb-1">
+                Explore Openfort
+              </p>
+              <p className='text-gray-500'>
+              Sign in to the demo to access the dev tools.
+              </p>
+              <Button variant={'outline'} size={'sm'} className="mt-2">
+                <Link href='https://openfort.xyz/docs' target="_blank">
+                  Explore the Docs
+                </Link>
+              </Button>
+            </div>
+          </div>
+          <div className="p-6 mb-14 border-t bg-white">
+            <p className="text-sm text-gray-600 mb-4">
+              Openfort gives you modular components so you can customize your
+              product for your users.
+              <a
+                href="https://www.openfort.xyz/docs/guides/getting-started"
+                className="text-blue-600 hover:underline"
+              >
+                Learn more
+              </a>
+              .
+            </p>
+            <div className="flex gap-3">
+              <LogoutButton />
+            </div>
+          </div>
+        </>
+      }>
         <div className="flex min-h-full overflow-hidden pt-8 sm:py-12">
           <div className="mx-auto flex w-full max-w-2xl flex-col px-4 sm:px-6">
             <div className="-mx-4 flex-auto bg-white py-10 px-8 sm:mx-0 sm:flex-none sm:rounded-md sm:p-14 sm:shadow-2xl">

diff --git a/examples/apps/auth-sample/src/pages/reset-password.tsx b/examples/apps/auth-sample/src/pages/reset-password.tsx
@@ -6,6 +6,7 @@ import { TextField } from "../components/Fields";
 import { StatusType, Toast } from "../components/Toasts";
 import openfort from "../utils/openfortConfig";
 import { Button } from "@/components/ui/button";
+import Loading from "@/components/Loading";
 
 function checkPassword(str: string) {
   var re = /^(?=.*\d)(?=.*[!@#$%^&*])(?=.*[a-z])(?=.*[A-Z]).{8,}$/;
@@ -100,8 +101,15 @@ function ResetPasswordPage() {
                   }
                 </p>
               </div>
-              <Button type="submit" className="mt-8 w-full py-2">
-                Save New Password
+              <Button 
+              disabled={status?.type === "loading"}
+              type="submit" 
+              className="mt-8 w-full py-2">
+                {status?.type === "loading" ? (
+                  <Loading />
+                ) : (
+                  "Save New Password"
+                )}
               </Button>
             </form>
             <p className="my-5 text-left text-sm text-gray-600">

diff --git a/examples/apps/auth-sample/src/utils/openfortConfig.ts b/examples/apps/auth-sample/src/utils/openfortConfig.ts
@@ -6,11 +6,9 @@ const openfort = new Openfort({
     publishableKey: process.env.NEXT_PUBLIC_OPENFORT_PUBLIC_KEY!,
   },
   shieldConfiguration: {
+    debug: true,
     shieldPublishableKey: process.env.NEXT_PUBLIC_SHIELD_API_KEY!,
   },
-  overrides: {
-    iframeUrl: "https://embedded.openfort.xyz",
-  }
 });
 
 export default openfort;