feat: Add cancel recovery feature in burner wallet flow

src/components/RequestedRecoveries.tsx

@@ -209,7 +209,7 @@ const RequestedRecoveries = () => {
       toast.success("Recovery Cancelled")
       setButtonState(BUTTON_STATES.TRIGGER_RECOVERY)
     } catch (err) {
-      toast.error("Something went wrong while completing recovery process");
+      toast.error("Something went wrong while cancelling recovery process");
     } finally {
       setIsCancelRecoveryLoading(false);
     }
@@ -386,7 +386,7 @@ const RequestedRecoveries = () => {
               </Grid>
               <Grid item xs={12} sm={5.5}>
                 <InputField
-                  type="email"
+                  type="string"
                   value={newOwner || ""}
                   onChange={(e) => setNewOwner(e.target.value)}
                   label="Requested New Owner Address"

src/components/burnerWallet/GuardianSetup.tsx

@@ -7,16 +7,18 @@ import {
   Typography,
 } from "@mui/material";
 import {
+  createSmartAccountClient,
   ENTRYPOINT_ADDRESS_V07,
   walletClientToSmartAccountSigner,
 } from "permissionless";
 import { signerToSafeSmartAccount } from "permissionless/accounts";
+import { erc7579Actions } from "permissionless/actions/erc7579";
 import { useCallback, useContext, useEffect, useRef, useState } from "react";
 import toast from "react-hot-toast";
-import { createWalletClient, custom, WalletClient } from "viem";
+import { createWalletClient, custom, http, WalletClient } from "viem";
 import { baseSepolia } from "viem/chains";
 import { readContract } from "wagmi/actions";
-import { publicClient, run } from "./deploy";
+import { pimlicoBundlerClient, publicClient, run } from "./deploy";
 import {
   erc7569LaunchpadAddress,
   safe4337ModuleAddress,
@@ -28,13 +30,15 @@ import { StepsContext } from "../../App";
 import infoIcon from "../../assets/infoIcon.svg";
 import { STEPS } from "../../constants";
 import { useAppContext } from "../../context/AppContextHook";
+import { useBurnerAccount } from "../../context/BurnerAccountContext";
 import { config } from "../../providers/config";
 import { relayer } from "../../services/relayer";
 import { genAccountCode, templateIdx } from "../../utils/email";
 import { TIME_UNITS } from "../../utils/recoveryDataUtils";
 import { useGetSafeAccountAddress } from "../../utils/useGetSafeAccountAddress";
 import { Button } from "../Button";
 import InputField from "../InputField";
+import Loader from "../Loader";
 
 //logic for valid email address check for input
 const isValidEmail = (email: string) => {
@@ -44,6 +48,7 @@ const isValidEmail = (email: string) => {
 
 const GuardianSetup = () => {
   const address = useGetSafeAccountAddress();
+  const { setBurnerAccountClient } = useBurnerAccount();
 
   const { guardianEmail, setGuardianEmail, accountCode, setAccountCode } =
     useAppContext();
@@ -59,7 +64,7 @@ const GuardianSetup = () => {
   const [isWalletPresent, setIsWalletPresent] = useState(false);
   const [emailError, setEmailError] = useState(false);
   const [recoveryDelayUnit, setRecoveryDelayUnit] = useState(
-    TIME_UNITS.SECS.value,
+    TIME_UNITS.SECS.value
   );
   // const [recoveryExpiryUnit, setRecoveryExpiryUnit] = useState(
   //   TIME_UNITS.DAYS.value,
@@ -142,7 +147,7 @@ const GuardianSetup = () => {
 
       const guardianSalt = await relayer.getAccountSalt(
         acctCode,
-        guardianEmail,
+        guardianEmail
       );
 
       // The guardian address is generated by sending the user's account address and guardian salt to the computeEmailAuthAddress function
@@ -153,11 +158,36 @@ const GuardianSetup = () => {
         args: [safeAccount.address, guardianSalt],
       })) as string;
 
+      const smartAccountClient = createSmartAccountClient({
+        account: safeAccount,
+        entryPoint: ENTRYPOINT_ADDRESS_V07,
+        chain: baseSepolia,
+        bundlerTransport: http(
+          `https://api.pimlico.io/v2/base-sepolia/rpc?apikey=${import.meta.env.VITE_PIMLICO_API_KEY}`
+        ),
+        middleware: {
+          gasPrice: async () =>
+            (await pimlicoBundlerClient.getUserOperationGasPrice()).fast, // if using pimlico bundler
+        },
+      }).extend(erc7579Actions({ entryPoint: ENTRYPOINT_ADDRESS_V07 }));
+
+      console.log(safeAccount, smartAccountClient)
+
+      localStorage.setItem("safeAccount", JSON.stringify(safeAccount))
+      localStorage.setItem("smartAccountClient", JSON.stringify(smartAccountClient))
+
+      setBurnerAccountClient(smartAccountClient);
+
       // The run function creates a new burner wallet, assigns the current owner as its guardian, installs the recovery module, and returns the wallet's address.
-      const burnerWalletAddress = await run(client, safeAccount, guardianAddr);
+      const burnerWalletAddress = await run(
+        client,
+        safeAccount,
+        smartAccountClient,
+        guardianAddr
+      );
       localStorage.setItem(
         "burnerWalletConfig",
-        JSON.stringify({ burnerWalletAddress }),
+        JSON.stringify({ burnerWalletAddress })
       );
       setIsWalletPresent(true);
     } catch (error) {
@@ -234,7 +264,7 @@ const GuardianSetup = () => {
           guardianEmail,
           localStorageAccountCode,
           templateIdx,
-          subject[0].join().replaceAll(",", " ").replace("{ethAddr}", address),
+          subject[0].join().replaceAll(",", " ").replace("{ethAddr}", address)
         );
       } catch (error) {
         // retry mechanism as this API call fails for the first time
@@ -245,7 +275,7 @@ const GuardianSetup = () => {
           guardianEmail,
           localStorageAccountCode,
           templateIdx,
-          subject[0].join().replaceAll(",", " ").replace("{ethAddr}", address),
+          subject[0].join().replaceAll(",", " ").replace("{ethAddr}", address)
         );
       }
 
@@ -256,7 +286,7 @@ const GuardianSetup = () => {
     } catch (err) {
       console.error(err);
       toast.error(
-        err?.shortMessage ?? "Something went wrong, please try again.",
+        err?.shortMessage ?? "Something went wrong, please try again."
       );
       setLoading(false);
     }
@@ -267,6 +297,10 @@ const GuardianSetup = () => {
     checkIfRecoveryIsConfigured,
   ]);
 
+  if (isAccountInitializedLoading) {
+    return <Loader />;
+  }
+
   return (
     <Box sx={{ marginX: "auto", marginTop: "100px", marginBottom: "100px" }}>
       <Typography variant="h2" sx={{ paddingBottom: "1.5rem" }}>
@@ -313,7 +347,7 @@ const GuardianSetup = () => {
                 value={recoveryDelay}
                 onChange={(e) =>
                   setRecoveryDelay(
-                    parseInt((e.target as HTMLInputElement).value),
+                    parseInt((e.target as HTMLInputElement).value)
                   )
                 }
                 title="Recovery Delay"

src/components/burnerWallet/RequestedRecoveries.tsx

@@ -3,7 +3,7 @@ import { useCallback, useEffect, useRef, useState } from "react";
 import toast from "react-hot-toast";
 import { useNavigate } from "react-router-dom";
 import { keccak256 } from "viem";
-import { readContract } from "wagmi/actions";
+import { readContract, writeContract } from "wagmi/actions";
 import {
   universalEmailRecoveryModule,
   validatorsAddress,
@@ -27,6 +27,7 @@ import { Button } from "../Button";
 import InputField from "../InputField";
 import { useWriteContract } from "wagmi";
 import Loader from "../Loader";
+import { useBurnerAccount } from "../../context/BurnerAccountContext";
 
 const BUTTON_STATES = {
   TRIGGER_RECOVERY: "Trigger Recovery",
@@ -40,7 +41,7 @@ const RequestedRecoveries = () => {
   const address = useGetSafeAccountAddress();
   const { guardianEmail } = useAppContext();
   const navigate = useNavigate();
-  const { writeContractAsync } = useWriteContract();
+  const { burnerAccountClient } = useBurnerAccount();
 
   const [newOwner, setNewOwner] = useState<`0x${string}`>();
   const safeWalletAddress = address;
@@ -70,6 +71,8 @@ const RequestedRecoveries = () => {
       args: [address],
     });
 
+    console.log(getRecoveryRequest);
+
     const getGuardianConfig = await readContract(config, {
       abi: universalEmailRecoveryModuleAbi,
       address: universalEmailRecoveryModule as `0x${string}`,
@@ -180,14 +183,17 @@ const RequestedRecoveries = () => {
 
   const handleCancelRecovery = useCallback(async () => {
     setIsCancelRecoveryLoading(true);
+    setIsTriggerRecoveryLoading(false)
     try {
-      await writeContractAsync({
+      await burnerAccountClient.writeContract({
         abi: universalEmailRecoveryModuleAbi,
         address: universalEmailRecoveryModule as `0x${string}`,
         functionName: "cancelRecovery",
         args: [],
       });
 
+      setButtonState(BUTTON_STATES.TRIGGER_RECOVERY)
+      toast.success("Recovery Cancelled")
       console.log("Recovery Cancelled");
     } catch (err) {
       console.log(err);
@@ -226,7 +232,7 @@ const RequestedRecoveries = () => {
     }
   };
 
-  console.log(isRecoveryStatusLoading)
+  console.log(isRecoveryStatusLoading);
 
   // Since we are polling for every actions but only wants to show full screen loader for the initial request
   if (

src/components/burnerWallet/deploy.ts

@@ -40,12 +40,14 @@ export const pimlicoBundlerClient = createPimlicoBundlerClient({
  * @async
  * @param {WalletClient} client - The wallet client used for transactions and interactions.
  * @param {object} safeAccount - The smart account object containing the address of the account.
+ * @param {object} smartAccountClient - The safe account client
  * @param {string} guardianAddr - The address of the guardian used in the recovery module.
  * @returns {Promise<string>} The address of the configured smart account.
  */
 export async function run(
   client: WalletClient,
   safeAccount: object,
+  smartAccountClient: object,
   guardianAddr: string,
 ) {
   const ownableValidatorAddress = validatorsAddress;
@@ -65,21 +67,9 @@ export async function run(
   // generate hash
   await client.sendTransaction({
     to: safeAccount.address,
-    value: parseEther("0.003"),
+    value: parseEther("0.0003"),
   });
 
-  const smartAccountClient = createSmartAccountClient({
-    account: safeAccount,
-    entryPoint: ENTRYPOINT_ADDRESS_V07,
-    chain: baseSepolia,
-    bundlerTransport: http(
-      `https://api.pimlico.io/v2/base-sepolia/rpc?apikey=${import.meta.env.VITE_PIMLICO_API_KEY}`,
-    ),
-    middleware: {
-      gasPrice: async () =>
-        (await pimlicoBundlerClient.getUserOperationGasPrice()).fast, // if using pimlico bundler
-    },
-  }).extend(erc7579Actions({ entryPoint: ENTRYPOINT_ADDRESS_V07 }));
 
   // txHash
   await smartAccountClient.sendTransaction({

src/context/BurnerAccountContext.tsx

@@ -0,0 +1,35 @@
+import React, { createContext, useContext, useState, ReactNode } from "react";
+import "viem/window";
+
+interface BurnerAccountContextType {
+  burnerAccountClient: any; // Replace 'any' with the actual type if known
+  setBurnerAccountClient: (client: any) => void; // Adjust the type as necessary
+}
+
+const BurnerAccountContext = createContext<BurnerAccountContextType | null>(
+  null
+);
+
+export const BurnerAccountProvider: React.FC<{ children: ReactNode }> = ({
+  children,
+}) => {
+  const [burnerAccountClient, setBurnerAccountClient] = useState<any>(null); // Adjust type as needed
+
+  return (
+    <BurnerAccountContext.Provider
+      value={{ burnerAccountClient, setBurnerAccountClient }}
+    >
+      {children}
+    </BurnerAccountContext.Provider>
+  );
+};
+
+export const useBurnerAccount = () => {
+  const context = useContext(BurnerAccountContext);
+  if (!context) {
+    throw new Error(
+      "useBurnerAccount must be used within a BurnerAccountProvider"
+    );
+  }
+  return context;
+};