Email recovery demo

packages/demos/email-recovery/src/App.css

@@ -1,8 +1,5 @@
 #root {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
+
 }
 
 .logo {
@@ -32,11 +29,3 @@
     animation: logo-spin infinite 20s linear;
   }
 }
-
-.card {
-  padding: 2em;
-}
-
-.read-the-docs {
-  color: #888;
-}

packages/demos/email-recovery/src/App.tsx

@@ -1,23 +1,56 @@
-import './App.css'
-import { ConfigureSafeModule } from './components/ConfigureSafeModule';
-import { PerformRecovery } from './components/PerformRecovery';
-import { AppContextProvider } from './context/AppContextProvider';
+import { createContext, useEffect, useState } from "react";
+import "./App.css";
+import ConnectWallets from "./components/ConnectWallets";
+import Navbar from "./components/Navbar";
+import RequestedRecoveries from "./components/RequestedRecoveries";
+import RequestGuardian from "./components/RequestGuardian";
+import SafeModuleRecovery from "./components/SafeModuleRecovery";
+import TriggerAccountRecovery from "./components/TriggerAccountRecovery";
+import { STEPS } from "./constants";
 import { Web3Provider } from "./providers/Web3Provider";
 import { ConnectKitButton } from "connectkit";
+import { useAccount } from "wagmi";
+import { AppContextProvider } from "./context/AppContextProvider";
+
+export const StepsContext = createContext(null);
 
 function App() {
+  const [step, setStep] = useState(STEPS.CONNECT_WALLETS);
+
+  const renderBody = () => {
+    switch (step) {
+      case STEPS.CONNECT_WALLETS:
+        return <ConnectWallets />;
+      case STEPS.SAFE_MODULE_RECOVERY:
+        return <SafeModuleRecovery />;
+      case STEPS.REQUEST_GUARDIAN:
+        return <RequestGuardian />;
+      case STEPS.REQUESTED_RECOVERIES:
+        return <RequestedRecoveries />;
+      case STEPS.TRIGGER_ACCOUNT_RECOVERY:
+        return <TriggerAccountRecovery />;
+      default:
+        return <ConnectWallets />;
+    }
+  };
+
   return (
-    <>
-      <h1>Safe Email Recovery Demo</h1>
-      <Web3Provider>
-        <AppContextProvider>
-          <ConnectKitButton />
-          <ConfigureSafeModule />
-          <PerformRecovery />
-        </AppContextProvider>
-      </Web3Provider>
-    </>
-  )
+    <Web3Provider>
+      <AppContextProvider>
+        <StepsContext.Provider
+          value={{
+            setStep,
+          }}
+        >
+          <div className="app">
+            <Navbar />
+            <h1>Safe Email Recovery Demo</h1>
+            {renderBody()}
+          </div>
+        </StepsContext.Provider>{" "}
+      </AppContextProvider>
+    </Web3Provider>
+  );
 }
 
-export default App
+export default App;

packages/demos/email-recovery/src/components/Button.tsx

@@ -1,11 +1,16 @@
-import React from 'react';
+import React from "react";
 
-export function Button({ children, ...buttonProps }: React.ComponentPropsWithoutRef<"button">) {
-    return (
-        <div className="card">
-            <button {...buttonProps}>
-                {children}
-            </button>
-        </div>
-    )
+export function Button({
+  children,
+  ...buttonProps
+}: React.ComponentPropsWithoutRef<"button">) {
+  return (
+    <div className="button">
+      <button {...buttonProps}>
+        {children}
+        {buttonProps.endIcon ? buttonProps.endIcon : null}
+        {buttonProps?.loading ? <div className="loader" /> : null}
+      </button>
+    </div>
+  );
 }

packages/demos/email-recovery/src/components/ConnectWallets.tsx

@@ -0,0 +1,44 @@
+import { Button } from "./Button";
+import walletIcon from "../assets/wallet.svg";
+import infoIcon from "../assets/infoIcon.svg";
+import { Web3Provider } from "../providers/Web3Provider";
+import { ConnectKitButton } from "connectkit";
+import { useAccount } from "wagmi";
+import { useContext } from "react";
+import { StepsContext } from "../App";
+import { STEPS } from "../constants";
+
+const ConnectWallets = () => {
+  const { address } = useAccount();
+  const stepsContext = useContext(StepsContext);
+
+  if (address) {
+    console.log(stepsContext);
+    stepsContext?.setStep(STEPS.SAFE_MODULE_RECOVERY);
+  }
+
+  return (
+    <div className="connect-wallets-container">
+      <Button endIcon={<img src={walletIcon} />}>Connect Genosis Safe</Button>
+
+      <p color="#CECFD2" style={{ display: "flex", gap: "0.5rem" }}>
+        <img src={infoIcon} alt="info" />
+        Copy the link and import into your safe wallet
+      </p>
+      <ConnectKitButton.Custom>
+        {({ isConnected, show, truncatedAddress, ensName }) => {
+          return (
+            <Button onClick={show} endIcon={<img src={walletIcon} />}>
+              Connect Test Wallet
+            </Button>
+          );
+        }}
+      </ConnectKitButton.Custom>
+      <p style={{ textDecoration: "underline" }}>
+        Or, recover existing wallet instead ➔
+      </p>
+    </div>
+  );
+};
+
+export default ConnectWallets;

packages/demos/email-recovery/src/components/Navbar.tsx

@@ -0,0 +1,13 @@
+import { Web3Provider } from "../providers/Web3Provider";
+import { ConnectKitButton } from "connectkit";
+import { Button } from "./Button";
+
+const Navbar = () => {
+  return (
+      <nav className="navbar">
+        <ConnectKitButton />
+      </nav>
+  );
+};
+
+export default Navbar;