chore(web): update-confirm-email-mutation

Author: tractorss

web/src/context/AtlasProvider.tsx

@@ -18,6 +18,7 @@ import {
   type AddUserData,
   type UpdateEmailData,
   type ConfirmEmailData,
+  type ConfirmEmailResponse,
 } from "utils/atlas";
 
 import { isUndefined } from "src/utils";
@@ -33,10 +34,11 @@ interface IAtlasProvider {
   authoriseUser: () => void;
   addUser: (userSettings: AddUserData) => Promise<boolean>;
   updateEmail: (userSettings: UpdateEmailData) => Promise<boolean>;
-  confirmEmail: (userSettings: ConfirmEmailData) => Promise<{
-    confirmed: boolean;
-    isError: boolean;
-  }>;
+  confirmEmail: (userSettings: ConfirmEmailData) => Promise<
+    ConfirmEmailResponse & {
+      isError: boolean;
+    }
+  >;
 }
 
 const Context = createContext<IAtlasProvider | undefined>(undefined);
@@ -212,17 +214,17 @@ const AtlasProvider: React.FC<{ children?: React.ReactNode }> = ({ children }) =
    * @returns {Promise<boolean>} A promise that resolves to true if email was confirmed successfully
    */
   const confirmEmail = useCallback(
-    async (userSettings: ConfirmEmailData) => {
+    async (userSettings: ConfirmEmailData): Promise<ConfirmEmailResponse & { isError: boolean }> => {
       try {
         setIsUpdatingUser(true);
 
         const emailConfirmed = await confirmEmailInAtlas(atlasGqlClient, userSettings);
 
-        return { confirmed: emailConfirmed, isError: false };
+        return { ...emailConfirmed, isError: false };
       } catch (err: any) {
         // eslint-disable-next-line
         console.log("Confirm Email Error : ", err?.message);
-        return { confirmed: false, isError: true };
+        return { isConfirmed: false, isTokenExpired: false, isTokenInvalid: false, isError: true };
       }
     },
     [atlasGqlClient]

web/src/pages/Settings/EmailConfirmation/index.tsx

@@ -53,6 +53,8 @@ const EmailConfirmation: React.FC = () => {
 
   const [isConfirming, setIsConfirming] = useState(false);
   const [isConfirmed, setIsConfirmed] = useState(false);
+  const [isTokenExpired, setIsTokenExpired] = useState(false);
+  const [isTokenInvalid, setIsTokenInvalid] = useState(false);
   const [isError, setIsError] = useState(false);
   const [searchParams, _] = useSearchParams();
   const address = searchParams.get("address");
@@ -66,26 +68,29 @@ const EmailConfirmation: React.FC = () => {
 
       confirmEmail({ address, token })
         .then((res) => {
-          setIsConfirmed(res.confirmed);
+          setIsConfirmed(res.isConfirmed);
+          setIsTokenExpired(res.isTokenExpired);
+          setIsTokenInvalid(res.isTokenInvalid);
           setIsError(res.isError);
         })
         .finally(() => setIsConfirming(false));
     }
   }, [address, token, confirmEmail]);
 
   const [headerMsg, subtitleMsg, buttonMsg] = useMemo(() => {
-    if (!address || !isAddress(address) || !token)
+    if (!address || !isAddress(address) || !token || isTokenInvalid)
       return ["Invalid Link!", "Oops, seems like you followed an invalid link.", "Contact Support"];
     else if (isError) return ["Verification Failed", "Oops, could not verify your email.", "Contact Support"];
     else if (isConfirmed)
       return ["Verification Successful 🎉", "Hooray! , your email has been verified.", "Go to dashboard"];
-    else
+    else if (isTokenExpired)
       return [
         "Link Expired",
         "Oops, seems like this email verification link has expired. \n No worries we can send the link again.",
         "Generate new link",
       ];
-  }, [address, token, isError, isConfirmed]);
+    else return ["Something went wrong", "Oops, seems like something went wrong in our systems", "Contact Support"];
+  }, [address, token, isError, isConfirmed, isTokenExpired, isTokenInvalid]);
 
   const handleButtonClick = useCallback(() => {
     // TODO: send to support?

web/src/utils/atlas/confirmEmail.ts

@@ -1,8 +1,12 @@
 import { gql, type GraphQLClient } from "graphql-request";
 
 const query = gql`
-  mutation ConfirmEmail($address: String!, $token: String!) {
-    confirmEmail(address: $address, token: $token)
+  mutation ConfirmEmail($address: Address!, $token: String!) {
+    confirmEmail(confirmEmailInput: { address: $address, token: $token }) {
+      isConfirmed
+      isTokenExpired
+      isTokenInvalid
+    }
   }
 `;
 
@@ -11,15 +15,17 @@ export type ConfirmEmailData = {
   token: string;
 };
 
-type ConfirmEmailResponse = {
-  confirmEmail: boolean;
+export type ConfirmEmailResponse = {
+  isConfirmed: boolean;
+  isTokenExpired: boolean;
+  isTokenInvalid: boolean;
 };
 
 export async function confirmEmail(client: GraphQLClient, userData: ConfirmEmailData) {
   const variables = userData;
 
   return client
-    .request<ConfirmEmailResponse>(query, variables)
+    .request<{ confirmEmail: ConfirmEmailResponse }>(query, variables)
     .then(async (response) => response.confirmEmail)
     .catch((errors) => {
       // eslint-disable-next-line no-console

web/src/utils/atlas/fetchUser.ts

@@ -34,7 +34,7 @@ export function fetchUser(client: GraphQLClient): Promise<User> {
         console.log("Error fetching user :", { errors });
         const errorMessage = Array.isArray(errors?.response?.errors)
           ? errors.response.errors[0]?.message
-          : "Error user nonce";
+          : "Error fetching user";
         throw Error(errorMessage);
       }),
     {