feat(web): notification-system

Author: nhestrompia

web/package.json

@@ -70,6 +70,7 @@
     "@kleros/ui-components-library": "^2.6.1",
     "@sentry/react": "^7.55.2",
     "@sentry/tracing": "^7.55.2",
+    "@supabase/supabase-js": "^2.33.1",
     "@tanstack/react-query": "^4.28.0",
     "@types/react-modal": "^3.16.0",
     "@web3modal/ethereum": "^2.7.1",

web/src/layout/Header/navbar/Menu/Settings/SendMeNotifications/FormNotifs/FormEmail.tsx

@@ -1,5 +1,6 @@
-import React, { Dispatch, SetStateAction, useEffect, useMemo } from "react";
+import React, { useState, Dispatch, SetStateAction, useMemo, useEffect } from "react";
 import styled from "styled-components";
+
 import { Field } from "@kleros/ui-components-library";
 
 const StyledField = styled(Field)`

web/src/layout/Header/navbar/Menu/Settings/SendMeNotifications/FormNotifs/index.tsx

@@ -1,9 +1,13 @@
 import React, { useState } from "react";
 import styled from "styled-components";
+import { useWalletClient, useAccount } from "wagmi";
+import { toast } from "react-toastify";
 import { Checkbox, Button } from "@kleros/ui-components-library";
+import { OPTIONS as toastOptions } from "utils/wrapWithToast";
+import { uploadSettingsToSupabase } from "utils/uploadSettingsToSupabase";
 import FormEmail from "./FormEmail";
 
-const FormContainer = styled.div`
+const FormContainer = styled.form`
   position: relative;
   display: flex;
   flex-direction: column;
@@ -31,15 +35,36 @@ const FormNotifs: React.FC = () => {
   const [checkboxStates, setCheckboxStates] = useState<boolean[]>(new Array(OPTIONS.length).fill(false));
   const [emailInput, setEmailInput] = useState<string>("");
   const [emailIsValid, setEmailIsValid] = useState<boolean>(false);
+  const { data: walletClient } = useWalletClient();
+  const { address } = useAccount();
 
   const handleCheckboxChange = (index: number) => (e: React.ChangeEvent<HTMLInputElement>) => {
     const newCheckboxStates = [...checkboxStates];
     newCheckboxStates[index] = e.target.checked;
     setCheckboxStates(newCheckboxStates);
   };
 
+  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    const tx = await walletClient?.signMessage({
+      account: address,
+      message: emailInput,
+    });
+    const data = {
+      body: {
+        email: emailInput,
+        address,
+        signature: tx,
+      },
+    };
+    toast.info("Updating notification settings", toastOptions);
+    await uploadSettingsToSupabase(data, {});
+    toast.success("Update is successful", toastOptions);
+    console.log("🚀 ~ file: index.tsx:123 ~ handleSubmit ~ tx:", tx);
+  };
+
   return (
-    <FormContainer>
+    <FormContainer onSubmit={handleSubmit}>
       {OPTIONS.map(({ label }, index) => (
         <StyledCheckbox
           key={label}
@@ -59,8 +84,7 @@ const FormNotifs: React.FC = () => {
       </FormEmailContainer>
 
       <ButtonContainer>
-        <Button text="Coming Soon!" disabled={true} />
-        {/* <Button text="Save" disabled={!emailIsValid} /> */}
+        <Button text="Save" disabled={!emailIsValid} />
       </ButtonContainer>
     </FormContainer>
   );

web/src/utils/uploadSettingsToSupabase.ts

@@ -0,0 +1,77 @@
+import { verifyMessage } from "viem";
+import { createClient } from "@supabase/supabase-js";
+
+const SUPABASE_KEY = process.env.SUPABASE_CLIENT_API_KEY;
+const SUPABASE_URL = process.env.SUPABASE_URL;
+const supabase = createClient(SUPABASE_URL!, SUPABASE_KEY!);
+
+export const uploadSettingsToSupabase = async function (event: any, context: any) {
+  try {
+    // Assuming the event.body contains the data we need
+    const { email, signature, address } = event.body;
+    console.log("🚀 ~ file: index.tsx:42 ~ handleSupabase ~ email:", email, signature, address);
+
+    // Recover the address from the signature
+    const recoveredAddress = await verifyMessage({
+      address,
+      message: email,
+      signature,
+    });
+    console.log("🚀 ~ file: index.tsx:45 ~ handleSupabase ~ recoveredAddress:", recoveredAddress);
+
+    // If the recovered address does not match the provided address, return an error
+    if (!recoveredAddress) {
+      throw new Error("Signature verification failed");
+    }
+
+    // Allowed columns to update
+    const allowedColumns = ["discord", "telegram", "twitter", "matrix", "push", "email"];
+
+    console.log("1");
+
+    // If the message is empty, delete the user record
+    if (email === "{}") {
+      let { data, error } = await supabase.from("users").delete().match({ address: recoveredAddress });
+
+      if (error) throw error;
+
+      return {
+        statusCode: 200,
+        body: JSON.stringify({ message: "Record deleted successfully." }),
+      };
+    }
+
+    // Parse the signed message
+    console.log("2", email);
+
+    const parsedMessage = JSON.parse(JSON.stringify(email));
+    console.log("🚀 ~ file: index.tsx:69 ~ handleSupabase ~ parsedMessage:", parsedMessage);
+
+    // Prepare the record data based on the allowed columns
+    let recordData: { [key: string]: any } = {};
+    for (const key in parsedMessage) {
+      if (allowedColumns.includes(key)) {
+        recordData[key] = parsedMessage[key];
+      }
+    }
+
+    // Assuming you have a 'users' table with 'address' and allowedColumns fields
+    let { data, error } = await supabase
+      .from("user-settings")
+      .upsert({ address, email: email })
+      .match({ address: address });
+
+    console.log("🚀 ~ file: index.tsx:89 ~ handleSupabase ~ data:", data);
+    if (error) throw error;
+
+    return {
+      statusCode: 200,
+      body: JSON.stringify({ message: "Record updated successfully." }),
+    };
+  } catch (err) {
+    return {
+      statusCode: 500,
+      body: JSON.stringify({ message: `Error: ` }),
+    };
+  }
+};