chore: apply Prettier formatting across the codebase

.eslintrc.cjs

@@ -2,17 +2,17 @@ module.exports = {
   root: true,
   env: { browser: true, es2020: true },
   extends: [
-    'eslint:recommended',
-    'plugin:@typescript-eslint/recommended',
-    'plugin:react-hooks/recommended',
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:react-hooks/recommended",
   ],
-  ignorePatterns: ['dist', '.eslintrc.cjs'],
-  parser: '@typescript-eslint/parser',
-  plugins: ['react-refresh'],
+  ignorePatterns: ["dist", ".eslintrc.cjs"],
+  parser: "@typescript-eslint/parser",
+  plugins: ["react-refresh"],
   rules: {
-    'react-refresh/only-export-components': [
-      'warn',
+    "react-refresh/only-export-components": [
+      "warn",
       { allowConstantExport: true },
     ],
   },
-}
+};

.github/pull_request_template.md

@@ -1,4 +1,5 @@
 ## Description
+
 <!-- Please include a summary of the change and which issue is fixed. Also, list any dependencies that are required for this change. -->
 
 <!-- Fixes # (issue) -->
@@ -11,6 +12,7 @@
 - [ ] This change requires a documentation update
 
 ## How Has This Been Tested?
+
 <!-- Please describe the tests that you ran to verify your changes. Provide instructions so we can reproduce. Please also list any relevant details for your test configuration -->
 
 - [ ] Test A
@@ -25,4 +27,4 @@
 - [ ] My changes generate no new warnings
 - [ ] I have added tests that prove my fix is effective or that my feature works
 - [ ] New and existing unit tests pass locally with my changes
-- [ ] Any dependent changes have been merged and published in downstream modules
+- [ ] Any dependent changes have been merged and published in downstream modules

CODING_GUIDELINES.md

@@ -10,19 +10,23 @@ This document outlines the coding guidelines for contributing to the **Email Rec
 - **Line Length**: Aim to keep lines under 100 characters. Longer lines should be broken up for readability.
 - **Function Length**: Aim to keep functions short and focused. If a function is too long, consider breaking it up into smaller functions.
 - **Imports**: Organize imports into the following sections:
+
   1. External dependencies (e.g., libraries from `node_modules`).
   2. Absolute imports (e.g., `import { func } from 'src/utils';`).
   3. Relative imports (e.g., `import { func } from '../utils';`).
 
   Example:
+
   ```ts
-  import fs from 'fs';
-  import { validateEmail } from 'src/utils';
-  import { parseInput } from '../parsers';
+  import fs from "fs";
+  import { validateEmail } from "src/utils";
+  import { parseInput } from "../parsers";
   ```
+
 - **Braces**: Use braces for all control structures, even single-line blocks.
 
   Example:
+
   ```ts
   if (condition) {
     doSomething();
@@ -33,9 +37,10 @@ This document outlines the coding guidelines for contributing to the **Email Rec
 - **Whitespace**: Use a single space after commas and colons, but no space before them.
 
   Example:
+
   ```ts
   const arr = [1, 2, 3];
-  const obj = { name: 'Alice', age: 30 };
+  const obj = { name: "Alice", age: 30 };
   ```
 
 ## 2. Code Linting
@@ -47,20 +52,24 @@ This document outlines the coding guidelines for contributing to the **Email Rec
 
 - **Variables and Functions**: Use `camelCase` for variable and function names.
 
-  Example: 
+  Example:
+
   ```ts
-  const userName = 'Alice';
+  const userName = "Alice";
   ```
+
 - **Classes and Interfaces**: Use `PascalCase`.
 
-  Example: 
+  Example:
+
   ```ts
   class UserAccount { ... }
   ```
 
 - **Constants**: Use `UPPER_CASE` for constant values.
 
-  Example: 
+  Example:
+
   ```ts
   const MAX_USERS = 100;
   ```
@@ -70,6 +79,7 @@ This document outlines the coding guidelines for contributing to the **Email Rec
 - **JSDoc**: Document all public functions, methods, and classes using JSDoc comments.
 
   Example:
+
   ```ts
   /**
    * Creates a new user account.
@@ -88,11 +98,12 @@ This document outlines the coding guidelines for contributing to the **Email Rec
 - **Use of `try`/`catch`**: Use `try`/`catch` blocks for error-prone code. Always handle errors gracefully.
 
   Example:
+
   ```ts
   try {
     const data = await fetchData();
   } catch (error) {
-    console.error('Error fetching data', error);
+    console.error("Error fetching data", error);
   }
   ```
 

CONTRIBUTING.md

@@ -3,6 +3,7 @@
 Thank you for considering contributing to our project! We welcome contributions of all kinds, including code, documentation, bug reports, feature requests, and more. This document outlines the process for contributing to this project.
 
 ## Table of Contents
+
 - [Contributing to Email Recovery Demo](#contributing-to-email-recovery-demo)
   - [Table of Contents](#table-of-contents)
   - [1. Code of Conduct](#1-code-of-conduct)
@@ -14,6 +15,7 @@ Thank you for considering contributing to our project! We welcome contributions
   - [7. Contact](#7-contact)
 
 ## 1. Code of Conduct
+
 We are committed to providing a welcoming and inspiring community for all and expect our Code of Conduct to be honored. Anyone who violates this code of conduct may be banned from the community.
 
 Our community strives to:
@@ -54,24 +56,24 @@ Thank you for helping make this a welcoming, friendly community for all.
 
 This Code of Conduct is adapted from the [Contributor Covenant](https://www.contributor-covenant.org), version 1.4, available at [https://www.contributor-covenant.org/version/1/4/code-of-conduct.html](https://www.contributor-covenant.org/version/1/4/code-of-conduct.html)
 
-
 ## 2. Getting Started
+
 To start contributing, follow these steps:
 
 1. Fork the repository.
 2. Clone your fork to your local machine:
-    ```bash
-    git clone https://github.com/zkemail/email-recovery-demo.git
-    ```
-3.	Create a new branch for your feature or bugfix:
-    ```bash
-    git checkout -b feat/your-feature-name
-    ```
-4.	Install the necessary dependencies:
-    ```bash
-    cargo build
-    ```
-5.	Make your changes.
+   ```bash
+   git clone https://github.com/zkemail/email-recovery-demo.git
+   ```
+3. Create a new branch for your feature or bugfix:
+   ```bash
+   git checkout -b feat/your-feature-name
+   ```
+4. Install the necessary dependencies:
+   ```bash
+   cargo build
+   ```
+5. Make your changes.
 
 ## 3. Coding Guidelines
 
@@ -81,8 +83,8 @@ Please follow the coding guidelines in [CODING_GUIDELINES.md](CODING_GUIDELINES.
 
 Please write tests for your contributions. We aim for high test coverage.
 
-	•	Unit Tests: Place unit tests in the same file as the code they are testing.
-	•	Integration Tests: Place integration tests in the tests/ directory.
+    •	Unit Tests: Place unit tests in the same file as the code they are testing.
+    •	Integration Tests: Place integration tests in the tests/ directory.
 
 Run all tests before submitting your code with cargo test.
 
@@ -99,18 +101,18 @@ For more information, see [Conventional Commits](https://www.conventionalcommits
 
 ## 6. Pull Request Process
 
-	1.	Ensure your branch is up-to-date with the main branch:
-	•	git fetch origin
-	•	git checkout main
-	•	git merge origin/main
-	2.	Push your branch to your fork:
-	•	git push origin feature/your-feature-name
-	3.	Open a pull request from your branch to the main branch of the original repository.
-	4.	Ensure that your pull request passes all checks (e.g., CI tests).
-	5.	A reviewer will review your pull request. Be prepared to make adjustments based on feedback.
+    1.	Ensure your branch is up-to-date with the main branch:
+    •	git fetch origin
+    •	git checkout main
+    •	git merge origin/main
+    2.	Push your branch to your fork:
+    •	git push origin feature/your-feature-name
+    3.	Open a pull request from your branch to the main branch of the original repository.
+    4.	Ensure that your pull request passes all checks (e.g., CI tests).
+    5.	A reviewer will review your pull request. Be prepared to make adjustments based on feedback.
 
 ## 7. Contact
 
 If you have any questions or need further assistance, feel free to open an issue or contact us at [[email protected]](mailto:[email protected]).
 
-Thank you for your contributions!
+Thank you for your contributions!

README.md

@@ -3,6 +3,7 @@
 Based on `yarn creat vite w/ React, Typescript`
 
 ## Deps
+
 - NodeJS
 - yarn
 
@@ -24,19 +25,23 @@ yarn dev
 ## Base Sepolia Guide
 
 ### Connecting your Safe
+
 1. Start the app locally by following the setup instructions above, or visit https://getwax.github.io/wax. If running locally, remember to generate the WalletConnect project ID.
 2. Ensure you have a Safe account deployed to Base Sepolia. This is easiest to do through the Safe Wallet UI at https://app.safe.global. Connect your signer(s) e.g. MetaMask
 3. Click the "Connect Wallet" button, choose the WalletConnect option, and then "Copy to Clipboard". This copies a pairing code that can be used to connect your Safe to the recovery dApp.
 4. Return to the Safe Wallet UI and look for the WalletConnect icon, it's located next to your connected account info at the top right of the screen on desktop. Click on the icon and paste the pairing code - it should connect automatically and you should see a ZKEmail icon alongside the WalletConnect icon in the UI.
 
 ### Enabling the recovery module
+
 5. In the recovery dApp, click "Enable Email Recovery Module", you should then be prompted in the Safe UI to confirm this transaction.
 
 ### Configuring the recovery module and adding a guardian
+
 6. Now the recovery module has been enabled, you can configure recovery and request a guardian. Enter the guardians email address and also the recovery delay in seconds (so for a 10 second delay, enter the number 10). Then click "Configure Recovery & Request Guardian" and confirm the transaction in your Safe. This will add the required recovery config to the recovery module. The relayer will also be called under the hood and will send an email to your guardian so that they can confirm they agree to be your guardian. This additional confirmation from the guardian helps to prevent mistakes when adding the guardian to the recovery config. The recovery delay is a security feature that adds a delay from when recovery is approved until recovery can actually be executed. This protects against malicious recovery attempts where a guardian or hacker tries to take over an account - when this happens, the account owner can cancel the recovery while the delay is in progress.
 7. Your guardian should now receive an email asking them to confirm this request by replying "Confirm" to the email. After about a minute or two of the guardian confirming, they should get a confirmation that they have been accepted as a guardian successfully. Under the hood, the relayer is generating the zkp from the email and verifying it onchain. Your recovery module is now setup and ready to go!
 
 ### Recovering your Safe
+
 8. To initiate the recovery process, paste your new owner address into the "New Owner" field and click "Request Recovery".
 9. Your guardian will receive an email asking them to confirm the recovery request. They can do this by replying "Confirm" to the email. The relayer will then generate a zkp from this email and verify it onchain. After about a minute or two, the guardian will receive an email confirmation that their recovery approval has been a success.
 10. After the recovery delay has passed, click the "Complete Recovery" button in the recovery dApp. This will rotate the owner on the Safe and replace it with the new owner. Refresh the Safe Wallet app and visit settings to see the new owner rotated successfully.

index.html

@@ -5,12 +5,15 @@
     <link rel="icon" type="image/png" href="https://i.imgur.com/46VRTCF.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Safe Email Recovery Demo</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:[email protected]&display=swap" rel="stylesheet">
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Space+Grotesk:[email protected]&display=swap"
+      rel="stylesheet"
+    />
 
     <style>
-      @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:[email protected]&display=swap');
+      @import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:[email protected]&display=swap");
     </style>
   </head>
   <body>

src/components/GuardianSetup.tsx

@@ -7,10 +7,7 @@ import { safeEmailRecoveryModuleAbi } from "../abi/SafeEmailRecoveryModule";
 import infoIcon from "../assets/infoIcon.svg";
 import { useAppContext } from "../context/AppContextHook";
 import { safeEmailRecoveryModule } from "../../contracts.base-sepolia.json";
-import {
-  genAccountCode,
-  templateIdx,
-} from "../utils/email";
+import { genAccountCode, templateIdx } from "../utils/email";
 import { readContract } from "wagmi/actions";
 import { config } from "../providers/config";
 import { relayer } from "../services/relayer";
@@ -75,10 +72,10 @@ const GuardianSetup = () => {
   const [recoveryExpiry, setRecoveryExpiry] = useState(7);
   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
+    TIME_UNITS.DAYS.value,
   );
 
   let interval: NodeJS.Timeout;
@@ -157,15 +154,15 @@ const GuardianSetup = () => {
           style: {
             background: "white",
           },
-        }
+        },
       );
 
       const acctCode = await genAccountCode();
       setAccountCode(accountCode);
 
       const guardianSalt = await relayer.getAccountSalt(
         acctCode,
-        guardianEmail
+        guardianEmail,
       );
       const guardianAddr = await readContract(config, {
         abi: safeEmailRecoveryModuleAbi,
@@ -196,14 +193,20 @@ const GuardianSetup = () => {
         args: [],
       });
 
-      console.log(command[0].join().replace(',', ' ').replace('{ethAddr}', address), "command")
+      console.log(
+        command[0].join().replace(",", " ").replace("{ethAddr}", address),
+        "command",
+      );
 
       const { requestId } = await relayer.acceptanceRequest(
         safeEmailRecoveryModule as `0x${string}`,
         guardianEmail,
         acctCode,
         templateIdx,
-        command[0].join()?.replaceAll(',', ' ').replaceAll('{ethAddr}', address)
+        command[0]
+          .join()
+          ?.replaceAll(",", " ")
+          .replaceAll("{ethAddr}", address),
       );
 
       console.debug("accept req id", requestId);
@@ -234,7 +237,7 @@ const GuardianSetup = () => {
   }
   console.log(
     recoveryDelay * TIME_UNITS[recoveryDelayUnit].multiplier,
-    recoveryExpiry * TIME_UNITS[recoveryExpiryUnit].multiplier
+    recoveryExpiry * TIME_UNITS[recoveryExpiryUnit].multiplier,
   );
   return (
     <Box sx={{ marginX: "auto", marginTop: "100px", marginBottom: "100px" }}>
@@ -282,7 +285,7 @@ const GuardianSetup = () => {
                 value={recoveryDelay}
                 onChange={(e) =>
                   setRecoveryDelay(
-                    parseInt((e.target as HTMLInputElement).value)
+                    parseInt((e.target as HTMLInputElement).value),
                   )
                 }
                 title="Recovery Delay"