Merge branch 'feature/email-recovery-circuits' of github.com:getwax/wax into feature/email-recovery-circuits

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

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

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

@@ -1,7 +1,5 @@
 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";
@@ -26,7 +24,7 @@ const ConnectWallets = () => {
         Copy the link and import into your safe wallet
       </p> */}
       <ConnectKitButton.Custom>
-        {({ isConnected, show, truncatedAddress, ensName }) => {
+        {({ show }) => {
           return (
             <Button onClick={show} endIcon={<img src={walletIcon} />}>
               Connect Safe

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

@@ -30,7 +30,7 @@ const RequestedRecoveries = () => {
 
   const [newOwner, setNewOwner] = useState<string>();
   const [buttonState, setButtonState] = useState(
-    BUTTON_STATES.TRIGGER_RECOVERY
+    BUTTON_STATES.TRIGGER_RECOVERY,
   );
   const [loading, setLoading] = useState<boolean>(false);
   const [gurdianRequestId, setGuardianRequestId] = useState<number>();
@@ -66,7 +66,7 @@ const RequestedRecoveries = () => {
       recoveryRouterAddr as string,
       guardianEmail,
       templateIdx,
-      subject
+      subject,
     );
 
     setGuardianRequestId(requestId);
@@ -124,11 +124,7 @@ const RequestedRecoveries = () => {
     switch (buttonState) {
       case BUTTON_STATES.TRIGGER_RECOVERY:
         return (
-          <Button
-            loading={loading}
-            onClick={requestRecovery}
-            endIcon={<img src={cancelRecoveryIcon} />}
-          >
+          <Button loading={loading} onClick={requestRecovery}>
             Trigger Recovery
           </Button>
         );
@@ -196,8 +192,8 @@ const RequestedRecoveries = () => {
                 height: "fit-content",
               }}
             >
-              <img src={recoveredIcon} style={{ marginRight: "0.5rem" }} />
               Recovered
+              <img src={recoveredIcon} style={{ marginRight: "0.5rem" }} />
             </div>
           ) : null}
         </div>

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

@@ -3,7 +3,7 @@ import { Button } from "./Button";
 import { useAccount, useReadContract, useWriteContract } from "wagmi";
 import { safeZkSafeZkEmailRecoveryPlugin } from "../../contracts.base-sepolia.json";
 import { abi as safeAbi } from "../abi/Safe.json";
-import { useCallback, useContext, useState } from "react";
+import { useCallback, useContext, useEffect, useState } from "react";
 import { StepsContext } from "../App";
 import { STEPS } from "../constants";
 
@@ -13,6 +13,12 @@ const SafeModuleRecovery = () => {
   const stepsContext = useContext(StepsContext);
   const [loading, setLoading] = useState(false);
 
+  useEffect(() => {
+    if (!address) {
+      stepsContext?.setStep(STEPS.CONNECT_WALLETS);
+    }
+  }, [address, stepsContext]);
+
   const { data: isModuleEnabled } = useReadContract({
     address,
     abi: safeAbi,
@@ -40,7 +46,6 @@ const SafeModuleRecovery = () => {
       functionName: "enableModule",
       args: [safeZkSafeZkEmailRecoveryPlugin],
     });
-
   }, [address, writeContractAsync]);
 
   return (
@@ -49,8 +54,8 @@ const SafeModuleRecovery = () => {
         Connected wallet: <ConnectKitButton />
       </div>
       {!isModuleEnabled ? (
-        <Button loading={loading} onClick={enableEmailRecoveryModule}>
-          Enable email recovery module
+        <Button disabled={loading} onClick={enableEmailRecoveryModule}>
+          Enable Email Recovery Module
         </Button>
       ) : null}
     </div>

packages/demos/inpage/src/Button.tsx

@@ -1,104 +1,104 @@
-import jss from 'jss';
-import color from 'color';
-import React, { HTMLProps, useCallback, useState } from 'react';
-import sheetsRegistry from './sheetsRegistry';
-import { bgColor, dangerColor, fgColor } from './styleConstants';
-import classes from './helpers/classes';
-import runAsync from '../demo/helpers/runAsync';
+import jss from "jss";
+import color from "color";
+import React, { HTMLProps, useCallback, useState } from "react";
+import sheetsRegistry from "./sheetsRegistry";
+import { bgColor, dangerColor, fgColor } from "./styleConstants";
+import classes from "./helpers/classes";
+import runAsync from "../demo/helpers/runAsync";
 
 const sheet = jss.createStyleSheet({
   Button: {
-    '& > .button-content': {
-      padding: '0.5em 1em',
+    "& > .button-content": {
+      padding: "0.5em 1em",
     },
 
-    textAlign: 'center',
-    cursor: 'pointer',
-    userSelect: 'none',
+    textAlign: "center",
+    cursor: "pointer",
+    userSelect: "none",
 
     background: color(fgColor).darken(0.1).toString(),
     border: `1px solid ${color(fgColor).darken(0.1).toString()}`,
     color: bgColor,
 
-    position: 'relative',
+    position: "relative",
 
-    '&:hover > .hover-error': {
-      display: 'inline-block',
+    "&:hover > .hover-error": {
+      display: "inline-block",
     },
   },
   ButtonStates: {
-    '&:hover': {
+    "&:hover": {
       background: fgColor,
       border: `1px solid ${fgColor}`,
     },
 
-    '&:active': {
-      background: 'white',
-      border: '1px solid white',
+    "&:active": {
+      background: "white",
+      border: "1px solid white",
     },
   },
   ButtonSecondary: {
-    background: 'transparent',
+    background: "transparent",
     border: `1px solid ${fgColor}`,
     color: fgColor,
 
-    '& .loading-marker': {
+    "& .loading-marker": {
       background: fgColor,
     },
   },
   ButtonSecondaryStates: {
-    '&:hover': {
+    "&:hover": {
       background: color(fgColor).alpha(0.05).toString(),
     },
 
-    '&:active': {
+    "&:active": {
       background: color(fgColor).alpha(0.15).toString(),
     },
   },
   ButtonDisabled: {
-    filter: 'brightness(50%)',
-    cursor: 'initial',
+    filter: "brightness(50%)",
+    cursor: "initial",
   },
   ButtonError: {
     border: `1px solid ${dangerColor}`,
     color: dangerColor,
 
-    '&:hover': {
+    "&:hover": {
       border: `1px solid ${dangerColor}`,
     },
 
-    '&:active': {
+    "&:active": {
       border: `1px solid ${dangerColor}`,
     },
   },
   HoverError: {
-    display: 'none',
-    width: '100%',
-    position: 'absolute',
+    display: "none",
+    width: "100%",
+    position: "absolute",
   },
   HoverErrorContent: {
-    position: 'absolute',
-    transform: 'translateX(-50%)',
-    top: '-2.2em',
+    position: "absolute",
+    transform: "translateX(-50%)",
+    top: "-2.2em",
 
-    display: 'block',
+    display: "block",
     background: bgColor,
   },
   LoadingMarker: {
-    position: 'absolute',
-    bottom: '0px',
-    left: '0px',
-    width: '3px',
-    height: '3px',
+    position: "absolute",
+    bottom: "0px",
+    left: "0px",
+    width: "3px",
+    height: "3px",
     background: bgColor,
-    animation: '$loading-marker 3s ease infinite',
+    animation: "$loading-marker 3s ease infinite",
   },
-  '@keyframes loading-marker': {
-    '0%, 100%': {
-      left: 'max(0%, min(30%, calc(50% - 50px)))',
+  "@keyframes loading-marker": {
+    "0%, 100%": {
+      left: "max(0%, min(30%, calc(50% - 50px)))",
     },
-    '50%': {
-      left: 'min(calc(100% - 3px), max(70%, calc(50% + 50px)))',
+    "50%": {
+      left: "min(calc(100% - 3px), max(70%, calc(50% + 50px)))",
     },
   },
 });
@@ -109,10 +109,10 @@ const Button = ({
   children,
   secondary,
   errorStyle,
-  disabled,
+  disabled = false,
   onPress = () => undefined,
   ...props
-}: Omit<HTMLProps<HTMLDivElement>, 'className' | 'onClick'> & {
+}: Omit<HTMLProps<HTMLDivElement>, "className" | "onClick"> & {
   secondary?: boolean;
   errorStyle?: boolean;
   onPress?: (
@@ -168,7 +168,7 @@ const Button = ({
       )}
     >
       {error ? (
-        <div {...classes('hover-error', sheet.classes.HoverError)}>
+        <div {...classes("hover-error", sheet.classes.HoverError)}>
           <div className={sheet.classes.HoverErrorContent}>
             <Button
               onPress={(e) => {
@@ -180,8 +180,8 @@ const Button = ({
               secondary
               errorStyle
               style={{
-                display: 'inline-block',
-                whiteSpace: 'nowrap',
+                display: "inline-block",
+                whiteSpace: "nowrap",
               }}
             >
               {shortErrorString(error)}
@@ -190,7 +190,7 @@ const Button = ({
         </div>
       ) : undefined}
       {loading && (
-        <div {...classes('loading-marker', sheet.classes.LoadingMarker)} />
+        <div {...classes("loading-marker", sheet.classes.LoadingMarker)} />
       )}
       <div className="button-content">{children}</div>
     </div>