chore: update sample with openfort provider

openfort-xyz · Jun 13, 2024 · 0cf34f6 · 0cf34f6
1 parent b4e4e75
commit 0cf34f6
Show file tree

Hide file tree

Showing 12 changed files with 302 additions and 209 deletions.
diff --git a/examples/apps/auth-sample/src/components/EvmProvider/EvmProviderButton.tsx b/examples/apps/auth-sample/src/components/EvmProvider/EvmProviderButton.tsx
@@ -7,7 +7,7 @@ import Loading from '../Loading';
 const Provider1193ActionButton: React.FC<{
   handleSetMessage: (message: string) => void;
 }> = ({handleSetMessage}) => {
-  const {getEvmProvider, embeddedState, error} = useOpenfort();
+  const {getEvmProvider, state} = useOpenfort();
   const [loading, setLoading] = useState(false);
 
   const handleSendTransaction = async () => {
@@ -49,14 +49,11 @@ const Provider1193ActionButton: React.FC<{
     <div>
       <button
         onClick={handleSendTransaction}
-        disabled={embeddedState !== EmbeddedState.READY}
+        disabled={state !== EmbeddedState.READY}
         className={`mt-2 w-60 px-4 py-2 bg-black text-white font-semibold rounded-lg shadow-md hover:bg-gray-800 disabled:bg-gray-400 disabled:cursor-not-allowed focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-opacity-50`}
       >
         {loading ? <Loading /> : 'EIP-1193 Provider Action'}
       </button>
-      {error && (
-        <p className="mt-2 text-red-500">{`Error: ${error.message}`}</p>
-      )}
     </div>
   );
 };

diff --git a/examples/apps/auth-sample/src/components/NFT/MintNFTButton.tsx b/examples/apps/auth-sample/src/components/NFT/MintNFTButton.tsx
@@ -6,7 +6,7 @@ import Loading from '../Loading';
 const MintNFTButton: React.FC<{
   handleSetMessage: (message: string) => void;
 }> = ({handleSetMessage}) => {
-  const {mintNFT, embeddedState, error} = useOpenfort();
+  const {mintNFT, state} = useOpenfort();
   const [loading, setLoading] = useState(false);
 
   const handleMintNFT = async () => {
@@ -29,15 +29,11 @@ const MintNFTButton: React.FC<{
     <div>
       <button
         onClick={handleMintNFT}
-        disabled={embeddedState !== EmbeddedState.READY}
+        disabled={state !== EmbeddedState.READY}
         className={`mt-4 w-32 px-4 py-2 bg-black text-white font-semibold rounded-lg shadow-md hover:bg-gray-800 disabled:bg-gray-400 disabled:cursor-not-allowed focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-opacity-50`}
       >
         {loading ? <Loading /> : 'Mint NFT'}
       </button>
-
-      {error && (
-        <p className="mt-2 text-red-500">{`Error: ${error.message}`}</p>
-      )}
     </div>
   );
 };

diff --git a/examples/apps/auth-sample/src/components/Signatures/SignMessageButton.tsx b/examples/apps/auth-sample/src/components/Signatures/SignMessageButton.tsx
@@ -6,17 +6,17 @@ import Loading from '../Loading';
 const SignMessageButton: React.FC<{
   handleSetMessage: (message: string) => void;
 }> = ({handleSetMessage}) => {
-  const {signMessage, embeddedState, error} = useOpenfort();
+  const {signMessage, state} = useOpenfort();
   const [loading, setLoading] = useState(false);
   const handleSignMessage = async () => {
     try {
       setLoading(true);
       const signature = await signMessage('Hello World!');
       setLoading(false);
-      if (!signature) {
+      if (signature.error) {
         throw new Error('Failed to sign message');
       }
-      handleSetMessage(signature);
+      handleSetMessage(signature.data!);
     } catch (err) {
       // Handle errors from minting process
       console.error('Failed to sign message:', err);
@@ -28,15 +28,11 @@ const SignMessageButton: React.FC<{
     <div>
       <button
         onClick={handleSignMessage}
-        disabled={embeddedState !== EmbeddedState.READY}
+        disabled={state !== EmbeddedState.READY}
         className={`mt-2 w-44 px-4 py-2 bg-black text-white font-semibold rounded-lg shadow-md hover:bg-gray-800 disabled:bg-gray-400 disabled:cursor-not-allowed focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-opacity-50`}
       >
         {loading ? <Loading /> : 'Sign Message'}
       </button>
-
-      {error && (
-        <p className="mt-2 text-red-500">{`Error: ${error.message}`}</p>
-      )}
     </div>
   );
 };

diff --git a/examples/apps/auth-sample/src/components/Signatures/SignTypedDataButton.tsx b/examples/apps/auth-sample/src/components/Signatures/SignTypedDataButton.tsx
@@ -6,7 +6,7 @@ import Loading from '../Loading';
 const SignTypedDataButton: React.FC<{
   handleSetMessage: (message: string) => void;
 }> = ({handleSetMessage}) => {
-  const {signTypedData, embeddedState, error} = useOpenfort();
+  const {signTypedData, state} = useOpenfort();
   const [loading, setLoading] = useState(false);
   const handleSignTypedData = async () => {
     try {
@@ -41,10 +41,10 @@ const SignTypedDataButton: React.FC<{
       };
       const signature = await signTypedData(domain, types, data);
       setLoading(false);
-      if (!signature) {
+      if (signature.error) {
         throw new Error('Failed to sign message');
       }
-      handleSetMessage(signature);
+      handleSetMessage(signature.data!);
     } catch (err) {
       // Handle errors from minting process
       console.error('Failed to sign message:', err);
@@ -56,15 +56,11 @@ const SignTypedDataButton: React.FC<{
     <div>
       <button
         onClick={handleSignTypedData}
-        disabled={embeddedState !== EmbeddedState.READY}
+        disabled={state !== EmbeddedState.READY}
         className={`mt-2 w-52 px-4 py-2 bg-black text-white font-semibold rounded-lg shadow-md hover:bg-gray-800 disabled:bg-gray-400 disabled:cursor-not-allowed focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-opacity-50`}
       >
         {loading ? <Loading /> : 'Sign Typed Message'}
       </button>
-
-      {error && (
-        <p className="mt-2 text-red-500">{`Error: ${error.message}`}</p>
-      )}
     </div>
   );
 };

diff --git a/examples/apps/auth-sample/src/components/User/GetUserButton.tsx b/examples/apps/auth-sample/src/components/User/GetUserButton.tsx
@@ -1,16 +1,18 @@
 import React, {useState} from 'react';
-import {useOpenfort} from '../../hooks/useOpenfort';
 import Loading from '../Loading';
+import openfort from '../../utils/openfortConfig';
 
 const GetUserButton: React.FC<{
   handleSetMessage: (message: string) => void;
 }> = ({handleSetMessage}) => {
-  const {getUser} = useOpenfort();
   const [loading, setLoading] = useState(false);
+
   const handleUserMessage = async () => {
     try {
       setLoading(true);
-      const user = await getUser();
+      const user = await openfort.getUser().catch((error: Error) => {
+        console.log('error', error);
+      });
       setLoading(false);
       if (!user) {
         throw new Error('Failed to get user');

diff --git a/examples/apps/auth-sample/src/hooks/useOpenfort.ts b/examples/apps/auth-sample/src/hooks/useOpenfort.ts