feat: Add burner wallet link once created

zkemail · Sep 23, 2024 · dcdea45 · dcdea45
1 parent de8e704
commit dcdea45
Show file tree

Hide file tree

Showing 6 changed files with 67 additions and 56 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -11,6 +11,7 @@ import LandingPage from "./pages/landingPage";
 import RecoverWalletFlow from "./pages/recoverWalletFlow";
 import SafeWalletFlow from "./pages/safeWalletFlow";
 import theme from "./theme"; // Import custom theme
+import { Web3Provider } from "./providers/Web3Provider";
 
 export const StepsContext = createContext(null);
 
@@ -26,21 +27,23 @@ function App() {
             setStep,
           }}
         >
-          <BrowserRouter>
-            <NavBar />
-            <div style={{ padding: 16 }}>
-              <Routes>
-                <Route path="/" element={<LandingPage />} />
-                <Route path="/safe-wallet" element={<SafeWalletFlow />} />
-                <Route path="/burner-wallet" element={<BurnerWalletFlow />} />
-                <Route
-                  path="/wallet-recovery"
-                  element={<RecoverWalletFlow />}
-                />
-                <Route path="*" element={<ErrorPage />} />
-              </Routes>
-            </div>
-          </BrowserRouter>
+          <Web3Provider>
+            <BrowserRouter>
+              <NavBar />
+              <div style={{ padding: 16 }}>
+                <Routes>
+                  <Route path="/" element={<LandingPage />} />
+                  <Route path="/safe-wallet" element={<SafeWalletFlow />} />
+                  <Route path="/burner-wallet" element={<BurnerWalletFlow />} />
+                  <Route
+                    path="/wallet-recovery"
+                    element={<RecoverWalletFlow />}
+                  />
+                  <Route path="*" element={<ErrorPage />} />
+                </Routes>
+              </div>
+            </BrowserRouter>
+          </Web3Provider>
         </StepsContext.Provider>
       </ThemeProvider>
     </AppContextProvider>

diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
@@ -24,7 +24,7 @@ const Transition = React.forwardRef(function Transition(
   props: TransitionProps & {
     children: React.ReactElement;
   },
-  ref: React.Ref<unknown>,
+  ref: React.Ref<unknown>
 ) {
   return <Slide direction="up" ref={ref} {...props} />;
 });
@@ -152,9 +152,7 @@ const MobileNav = ({
         >
           Learn More
         </Button>
-        <Web3Provider>
-          <ConnectKitButton />
-        </Web3Provider>
+        <ConnectKitButton />
       </Grid>
     </Dialog>
   );
@@ -315,9 +313,7 @@ const NavBar: React.FC = () => {
               >
                 Learn More
               </Button>
-              <Web3Provider>
-                <ConnectKitButton />
-              </Web3Provider>
+              <ConnectKitButton />
             </Box>
           </Grid>
         </Grid>

diff --git a/src/components/burnerWallet/GuardianSetup.tsx b/src/components/burnerWallet/GuardianSetup.tsx
@@ -59,7 +59,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 +142,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
@@ -157,7 +157,7 @@ const GuardianSetup = () => {
       const burnerWalletAddress = await run(client, safeAccount, guardianAddr);
       localStorage.setItem(
         "burnerWalletConfig",
-        JSON.stringify({ burnerWalletAddress }),
+        JSON.stringify({ burnerWalletAddress })
       );
       setIsWalletPresent(true);
     } catch (error) {
@@ -234,26 +234,19 @@ const GuardianSetup = () => {
           guardianEmail,
           localStorageAccountCode,
           templateIdx,
-          subject[0].join().replaceAll(",", " ").replace("{ethAddr}", address),
+          subject[0].join().replaceAll(",", " ").replace("{ethAddr}", address)
         );
       } catch (error) {
-        if (error.response?.status === 502) {
-          // retry mechanism as this API call fails for the first time
-          console.warn("502 error, retrying...");
-          await new Promise((resolve) => setTimeout(resolve, 1000)); // 1 second delay
-          await relayer.acceptanceRequest(
-            universalEmailRecoveryModule as `0x${string}`,
-            guardianEmail,
-            localStorageAccountCode,
-            templateIdx,
-            subject[0]
-              .join()
-              .replaceAll(",", " ")
-              .replace("{ethAddr}", address),
-          );
-        } else {
-          throw error; // Rethrow for non-502 errors
-        }
+        // retry mechanism as this API call fails for the first time
+        console.warn("502 error, retrying...");
+        await new Promise((resolve) => setTimeout(resolve, 1000)); // 1 second delay
+        await relayer.acceptanceRequest(
+          universalEmailRecoveryModule as `0x${string}`,
+          guardianEmail,
+          localStorageAccountCode,
+          templateIdx,
+          subject[0].join().replaceAll(",", " ").replace("{ethAddr}", address)
+        );
       }
 
       // Setting up interval for polling
@@ -263,7 +256,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);
     }
@@ -320,7 +313,7 @@ const GuardianSetup = () => {
                 value={recoveryDelay}
                 onChange={(e) =>
                   setRecoveryDelay(
-                    parseInt((e.target as HTMLInputElement).value),
+                    parseInt((e.target as HTMLInputElement).value)
                   )
                 }
                 title="Recovery Delay"

diff --git a/src/pages/burnerWalletFlow.tsx b/src/pages/burnerWalletFlow.tsx
@@ -1,12 +1,24 @@
-import { useContext } from "react";
+import { useContext, useEffect, useState } from "react";
 import { StepsContext } from "../App";
 import GuardianSetup from "../components/burnerWallet/GuardianSetup";
 import RequestedRecoveries from "../components/burnerWallet/RequestedRecoveries";
 import { STEPS } from "../constants";
-import { Web3Provider } from "../providers/Web3Provider";
 
 const BurnerWalletFlow = () => {
   const stepsContext = useContext(StepsContext);
+  const [burnerWalletAddress, setBurnerWalletAddress] = useState();
+
+  useEffect(() => {
+    const burnerWalletAddressPollingInterval = setInterval(() => {
+      const burnerWalletConfig = localStorage.getItem("burnerWalletConfig");
+      if (burnerWalletConfig !== undefined && burnerWalletConfig !== null) {
+        setBurnerWalletAddress(
+          JSON.parse(burnerWalletConfig)?.burnerWalletAddress
+        );
+        clearInterval(burnerWalletAddressPollingInterval);
+      }
+    }, 1000);
+  }, []);
 
   const renderBody = () => {
     switch (stepsContext?.step) {
@@ -24,9 +36,20 @@ const BurnerWalletFlow = () => {
   };
 
   return (
-    <Web3Provider>
-      <div className="app">{renderBody()}</div>
-    </Web3Provider>
+    <div className="app">
+      {burnerWalletAddress ? (
+        <>
+          Burner Wallet Address:{" "}
+          <a
+            href={`https://app.safe.global/home?safe=basesep%3A${burnerWalletAddress}`}
+            target="_blank"
+          >
+            {burnerWalletAddress}
+          </a>
+        </>
+      ) : null}
+      {renderBody()}
+    </div>
   );
 };
 

diff --git a/src/pages/recoverWalletFlow.tsx b/src/pages/recoverWalletFlow.tsx
@@ -18,9 +18,7 @@ const RecoverWalletFlow = () => {
 
   return (
     <div>
-      <Web3Provider>
-        <div className="app">{renderBody()}</div>
-      </Web3Provider>
+      <div className="app">{renderBody()}</div>
     </div>
   );
 };

diff --git a/src/pages/safeWalletFlow.tsx b/src/pages/safeWalletFlow.tsx
@@ -35,9 +35,7 @@ const SafeWalletFlow = () => {
 
   return (
     <div>
-      <Web3Provider>
-        <div className="app">{renderBody()}</div>
-      </Web3Provider>
+      <div className="app">{renderBody()}</div>
     </div>
   );
 };