Feat/form automatic to pwd

CHANGELOG.md

@@ -5,6 +5,10 @@ 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.7] - 2024-08-12
+### Add
+- Set recovery method for embedded signer
+
 ## [0.8.6] - 2024-07-29
 ### Fix
 - Singleton iframe Manager

examples/apps/auth-sample/package.json

@@ -9,7 +9,7 @@
   },
   "dependencies": {
     "@heroicons/react": "^2.0.13",
-    "@openfort/openfort-js": "0.8.6",
+    "@openfort/openfort-js": "0.8.7",
     "@openfort/openfort-node": "^0.6.62",
     "@radix-ui/react-toast": "^1.1.2",
     "@rainbow-me/rainbowkit": "^2.1.1",

examples/apps/auth-sample/src/components/EmbeddedSignerRecovery/AccountRecovery.tsx

@@ -13,16 +13,16 @@ const AccountRecovery: React.FC = () => {
       <div className="mb-5 mt-16">
         <div className="my-5">
           <input
-            type="number"
             name="passwordRecovery"
-            placeholder="Password to secure your recovery (NUMBERS ONLY)"
+            placeholder="Password to secure your recovery"
             className="w-full p-2 border border-gray-200 rounded-lg"
           />
         </div>
         <div className="mb-5 flex justify-center items-center">
           <div className="w-full">
             <div className="flex justify-center items-center">
               <button
+                type="button"
                 disabled={loadingPwd}
                 className="bg-black text-white p-2.5 rounded-lg w-full"
                 onClick={async () => {
@@ -49,6 +49,7 @@ const AccountRecovery: React.FC = () => {
             </div>
             <div className="flex justify-center items-center mt-2">
               <button
+                type="button"
                 disabled={loadingAut}
                 className="bg-white text-black p-2.5 border border-gray-200 rounded-lg w-full hover:bg-gray-100"
                 onClick={async () => {

examples/apps/auth-sample/src/components/Export/ExportPrivateKeyButton.tsx

@@ -0,0 +1,43 @@
+import React, {useState} from 'react';
+import {useOpenfort} from '../../hooks/useOpenfort';
+import {EmbeddedState} from '@openfort/openfort-js';
+import Loading from '../Loading';
+
+const ExportPrivateKey: React.FC<{
+  handleSetMessage: (message: string) => void;
+}> = ({handleSetMessage}) => {
+  const {exportPrivateKey, state} = useOpenfort();
+  const [loading, setLoading] = useState(false);
+  const handleExportPrivateKey = async () => {
+    try {
+      setLoading(true);
+      const privateKey = await exportPrivateKey();
+      setLoading(false);
+      if (privateKey.error) {
+        throw new Error('Failed to export private key');
+      }
+      handleSetMessage(privateKey.data!);
+    } catch (err) {
+      // Handle errors from minting process
+      console.error('Failed to export private key:', err);
+      alert('Failed to export private key. Please try again.');
+    }
+  };
+
+  return (
+    <div>
+      <button
+        type="button"
+        onClick={handleExportPrivateKey}
+        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 /> : 'Export key'}
+      </button>
+    </div>
+  );
+};
+
+export default ExportPrivateKey;

examples/apps/auth-sample/src/components/Sessions/CreateSessionButton.tsx

@@ -64,9 +64,8 @@ const CreateSessionButton: React.FC<{
       }
       setSessionKey(sessionKey.privateKey);
       return {address: sessionKey.address, privateKey: sessionKey.privateKey};
-    } else {
-      return null;
     }
+    return null;
   }, []);
 
   const revokeSession = useCallback(async (): Promise<string | null> => {

examples/apps/auth-sample/src/components/Sessions/MintNFTButtonSession.tsx

@@ -23,7 +23,7 @@ const MintNFTSessionButton: React.FC<{
     });
 
     if (!collectResponse.ok) {
-      alert('Failed to mint NFT status: ' + collectResponse.status);
+      alert(`Failed to mint NFT status: ${collectResponse.status}`);
       return null;
     }
     const collectResponseJSON = await collectResponse.json();

examples/apps/auth-sample/src/components/SetWalletRecovery/SetWalletRecoveryButton.tsx

@@ -0,0 +1,84 @@
+import type React from 'react';
+import {useState} from 'react';
+import {useOpenfort} from '../../hooks/useOpenfort';
+import {EmbeddedState, RecoveryMethod} from '@openfort/openfort-js';
+import Loading from '../Loading';
+
+const SetWalletRecovery: React.FC<{
+  handleSetMessage: (message: string) => void;
+}> = ({handleSetMessage}) => {
+  const {setWalletRecovery, state} = useOpenfort();
+  const [loading, setLoading] = useState<RecoveryMethod | null>(null);
+
+  const handleSetWalletRecovery = async (recoveryMethod: RecoveryMethod) => {
+    try {
+      setLoading(recoveryMethod);
+      const password = (
+        document.querySelector(
+          'input[name="passwordRecovery"]'
+        ) as HTMLInputElement
+      ).value;
+      const privateKey = await setWalletRecovery(recoveryMethod, password);
+      setLoading(null);
+      if (privateKey.error) {
+        throw new Error('Failed to update recovery method');
+      }
+      handleSetMessage(`Set ${recoveryMethod} wallet recovery successful`);
+      alert(`${recoveryMethod} Recovery method set successfully`);
+    } catch (err) {
+      // Handle errors from minting process
+      console.error('Failed to updated recovery method:', err);
+      alert('Failed to update recovery method. Please try again.');
+      setLoading(null);
+    }
+  };
+
+  return (
+    <div>
+      <button
+        type="button"
+        onClick={async () =>
+          await handleSetWalletRecovery(RecoveryMethod.AUTOMATIC)
+        }
+        disabled={state !== EmbeddedState.READY}
+        className={
+          'mt-4 w-56 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 === RecoveryMethod.AUTOMATIC ? (
+          <Loading />
+        ) : (
+          'Set Automatic Recovery'
+        )}
+      </button>
+      <div className="my-4 flex w-full justify-center">
+        <span className="text-gray-400">- or -</span>
+      </div>
+
+      <input
+        name="passwordRecovery"
+        placeholder="New password recovery"
+        className="w-full p-2 border border-gray-200 rounded-lg"
+      />
+
+      <button
+        type="button"
+        onClick={async () =>
+          await handleSetWalletRecovery(RecoveryMethod.PASSWORD)
+        }
+        disabled={state !== EmbeddedState.READY}
+        className={
+          'mt-4 w-56 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 === RecoveryMethod.PASSWORD ? (
+          <Loading />
+        ) : (
+          'Set Password Recovery'
+        )}
+      </button>
+    </div>
+  );
+};
+
+export default SetWalletRecovery;

examples/apps/auth-sample/src/components/Signatures/SignMessageButton.tsx

@@ -26,9 +26,12 @@ const SignMessageButton: React.FC<{
   return (
     <div>
       <button
+        type="button"
         onClick={handleSignMessage}
         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`}
+        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>