feat: added telegram contact field, fixed netlify function sig verification

Author: jaybuidl

web/netlify/functions/update-settings.ts

@@ -1,48 +1,44 @@
-import { createPublicClient, http } from "viem";
+import { Handler } from "@netlify/functions";
+import { verifyMessage } from "viem";
 import { createClient } from "@supabase/supabase-js";
 import { arbitrumGoerli } from "viem/chains";
 
-const publicClient = createPublicClient({
-  chain: arbitrumGoerli,
-  transport: http(),
-});
-
 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 handler = async function (event: any, context: any) {
+export const handler: Handler = async (event) => {
   try {
-    const { message, address, signature } = JSON.parse(event.body);
-    const email = message.split("Email:").pop().split(",Nonce:")[0].trim();
-    const nonce = message.split("Nonce:").pop().trim();
-    const isValid = await publicClient.verifyMessage({ address, message: message, signature });
-    // If the recovered address does not match the provided address, return an error
+    if (!event.body) {
+      throw new Error("No body provided");
+    }
+    // TODO: sanitize the body
+    const { email, telegram, nonce, address, signature } = JSON.parse(event.body);
+    const lowerCaseAddress = address.toLowerCase() as `0x${string}`;
+    const data = {
+      address: lowerCaseAddress,
+      message: `Email:${email},Nonce:${nonce}`,
+      signature,
+    };
+    // Note: this does NOT work for smart contract wallets, but viem's publicClient.verifyMessage() fails to verify atm.
+    // https://viem.sh/docs/utilities/verifyMessage.html
+    const isValid = await verifyMessage(data);
     if (!isValid) {
+      // If the recovered address does not match the provided address, return an error
       throw new Error("Signature verification failed");
     }
-    // Allowed columns to update
-    const allowedColumns = ["discord", "telegram", "twitter", "matrix", "push", "email"];
+    // TODO: use typed supabase client
     // If the message is empty, delete the user record
-    if (email === "") {
-      const { data, error } = await supabase.from("users").delete().match({ address: address });
+    if (email === "" && telegram === "") {
+      const { error } = await supabase.from("users").delete().match({ address: lowerCaseAddress });
       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));
-    // Prepare the record data based on the allowed columns
-    const 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
-    const { data, error } = await supabase
+    // For a user matching this address, upsert the user record
+    const { error } = await supabase
       .from("user-settings")
-      .upsert({ address, email: email })
-      .match({ address: address });
+      .upsert({ address: lowerCaseAddress, email: email, telegram: telegram })
+      .match({ address: lowerCaseAddress });
     if (error) throw error;
     return { statusCode: 200, body: JSON.stringify({ message: "Record updated successfully." }) };
   } catch (err) {

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

@@ -0,0 +1,68 @@
+import React, { Dispatch, SetStateAction, useMemo, useEffect } from "react";
+import styled from "styled-components";
+
+import { Field } from "@kleros/ui-components-library";
+
+const StyledLabel = styled.label`
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 10px;
+`;
+
+const StyledField = styled(Field)`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  // TODO: make the placeholder text color lighter or ~80% opaque
+`;
+
+interface IForm {
+  contactLabel: string;
+  contactPlaceholder: string;
+  contactInput: string;
+  contactIsValid: boolean;
+  setContactInput: Dispatch<SetStateAction<string>>;
+  setContactIsValid: Dispatch<SetStateAction<boolean>>;
+  validator: RegExp;
+}
+
+const FormContact: React.FC<IForm> = ({
+  contactLabel,
+  contactPlaceholder,
+  contactInput,
+  contactIsValid,
+  setContactInput,
+  setContactIsValid,
+  validator,
+}) => {
+  useEffect(() => {
+    setContactIsValid(validator.test(contactInput));
+  }, [contactInput, setContactIsValid, validator]);
+
+  const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    event.preventDefault();
+    setContactInput(event.target.value);
+  };
+
+  const fieldVariant = useMemo(() => {
+    if (contactInput === "") {
+      return undefined;
+    }
+    return contactIsValid ? "success" : "error";
+  }, [contactInput, contactIsValid]);
+
+  return (
+    <>
+      <StyledLabel>{contactLabel}</StyledLabel>
+      <StyledField
+        variant={fieldVariant}
+        value={contactInput}
+        onChange={handleInputChange}
+        placeholder={contactPlaceholder}
+      />
+    </>
+  );
+};
+
+export default FormContact;

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

@@ -1,9 +1,9 @@
 import React, { useState } from "react";
 import styled from "styled-components";
 import { useWalletClient, useAccount } from "wagmi";
-import { Checkbox, Button } from "@kleros/ui-components-library";
+import { Button } from "@kleros/ui-components-library";
 import { uploadSettingsToSupabase } from "utils/uploadSettingsToSupabase";
-import FormEmail from "./FormEmail";
+import FormContact from "./FormContact";
 
 const FormContainer = styled.form`
   position: relative;
@@ -13,70 +13,71 @@ const FormContainer = styled.form`
   padding-bottom: 16px;
 `;
 
-const StyledCheckbox = styled(Checkbox)`
-  margin-top: 20px;
-`;
-
 const ButtonContainer = styled.div`
   display: flex;
   justify-content: end;
-  margin-top: 16px;
 `;
 
-const FormEmailContainer = styled.div`
-  position: relative;
+const FormContactContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 24px;
 `;
 
-const OPTIONS = [{ label: "When x." }, { label: "When y." }, { label: "When z." }, { label: "When w." }];
-
 const FormNotifs: React.FC = () => {
-  const [checkboxStates, setCheckboxStates] = useState<boolean[]>(new Array(OPTIONS.length).fill(false));
+  const [telegramInput, setTelegramInput] = useState<string>("");
   const [emailInput, setEmailInput] = useState<string>("");
+  const [telegramIsValid, setTelegramIsValid] = useState<boolean>(false);
   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);
-  };
+  // TODO: retrieve the current email address from the database and populate the email input with it
 
   const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
-    const nonce = new Date().getTime();
-    const message = `Email:${emailInput},Nonce:${nonce}`;
+    const nonce = new Date().getTime().toString();
     const signature = await walletClient?.signMessage({
       account: address,
-      message: message,
+      message: `Email:${emailInput},Nonce:${nonce}`,
     });
+    if (!address || !signature) {
+      console.error("Missing address or signature");
+      return;
+    }
     const data = {
-      message: message,
+      email: emailInput,
+      telegram: telegramInput,
+      nonce,
       address,
-      signature: signature,
+      signature,
     };
-
     await uploadSettingsToSupabase(data);
   };
   return (
     <FormContainer onSubmit={handleSubmit}>
-      {OPTIONS.map(({ label }, index) => (
-        <StyledCheckbox
-          key={label}
-          onChange={handleCheckboxChange(index)}
-          checked={checkboxStates[index]}
-          small={true}
-          label={label}
+      <FormContactContainer>
+        <FormContact
+          contactLabel="Telegram"
+          contactPlaceholder="@my_handle"
+          contactInput={telegramInput}
+          contactIsValid={telegramIsValid}
+          setContactInput={setTelegramInput}
+          setContactIsValid={setTelegramIsValid}
+          validator={/^@[a-zA-Z0-9_]{5,32}$/}
         />
-      ))}
-      <FormEmailContainer>
-        <FormEmail
-          emailInput={emailInput}
-          emailIsValid={emailIsValid}
-          setEmailInput={setEmailInput}
-          setEmailIsValid={setEmailIsValid}
+      </FormContactContainer>
+      <FormContactContainer>
+        <FormContact
+          contactLabel="Email"
+          contactPlaceholder="your.email@email.com"
+          contactInput={emailInput}
+          contactIsValid={emailIsValid}
+          setContactInput={setEmailInput}
+          setContactIsValid={setEmailIsValid}
+          validator={/^([a-zA-Z0-9._%-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,})$/}
         />
-      </FormEmailContainer>
+      </FormContactContainer>
 
       <ButtonContainer>
         <Button text="Save" disabled={!emailIsValid} />

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

@@ -22,7 +22,7 @@ const HeaderContainer = styled.div`
 `;
 
 const HeaderNotifs: React.FC = () => {
-  return <HeaderContainer>Send Me Notifications</HeaderContainer>;
+  return <HeaderContainer>Contact Details</HeaderContainer>;
 };
 
 const EnsureChainContainer = styled.div`

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

@@ -2,7 +2,9 @@ import { toast } from "react-toastify";
 import { OPTIONS } from "utils/wrapWithToast";
 
 type SettingsToSupabaseData = {
-  message: string;
+  email: string;
+  telegram: string;
+  nonce: string;
   address: `0x${string}`;
   signature: `0x${string}`;
 };