Fix: Connected accounts can now claim via whitelisted root (#24)

apps/demo-identity-app/.eslintrc.json

@@ -0,0 +1,23 @@
+{
+    "root": true,
+    "env": {
+        "browser": true,
+        "es2020": true
+    },
+    "extends": [
+        "eslint:recommended",
+        "plugin:@typescript-eslint/recommended",
+        "plugin:react-hooks/recommended",
+        "prettier"
+    ],
+    "ignorePatterns": [
+        "dist",
+        ".eslintrc.json"
+    ],
+    "parser": "@typescript-eslint/parser",
+    "plugins": [
+        "@typescript-eslint",
+        "react-hooks"
+    ],
+    "rules": {}
+}

apps/demo-identity-app/src/components/ClaimButton.tsx

@@ -18,7 +18,7 @@ export const ClaimButton: React.FC = () => {
   const [txHash, setTxHash] = useState<string | null>(null)
   const { sdk: claimSDK, loading, error: sdkError } = useClaimSDK("development")
   const [sdk, setSdk] = useState<typeof claimSDK | null>(null)
-  const [claimAmount, setClaimAmount] = useState<Number | null>(null)
+  const [claimAmount, setClaimAmount] = useState<number | null>(null)
   const [altClaimAvailable, setAltClaimAvailable] = useState(false)
   const [altChainId, setAltChainId] = useState<SupportedChains | null>(null)
 

apps/demo-identity-app/src/components/IdentityCard.tsx

@@ -7,32 +7,46 @@ export const IdentityCard: React.FC = () => {
   const { address } = useAccount()
   const { sdk: identitySDK, loading, error } = useIdentitySDK("development")
   const [expiry, setExpiry] = useState<string | undefined>(undefined)
+  const [isWhitelisted, setIsWhitelisted] = useState<boolean | undefined>(undefined)
+  const [rootAddress, setRootAddress] = useState<string | undefined>(undefined)
 
   useEffect(() => {
-    const fetchExpiry = async () => {
+    const fetchIdentityData = async () => {
       if (!identitySDK || !address) return
 
-      const identityExpiry = await identitySDK.getIdentityExpiryData(address)
+      try {
+        const { isWhitelisted: whitelisted, root } =
+          await identitySDK.getWhitelistedRoot(address)
 
-      const { expiryTimestamp } = identitySDK.calculateIdentityExpiry(
-        identityExpiry?.lastAuthenticated ?? BigInt(0),
-        identityExpiry?.authPeriod ?? BigInt(0),
-      )
+        setIsWhitelisted(whitelisted)
+        setRootAddress(root)
 
-      const date = new Date(Number(expiryTimestamp))
-      const formattedExpiryTimestamp = date.toLocaleDateString("en-US", {
-        year: "numeric",
-        month: "long",
-        day: "2-digit",
-      })
+        if (whitelisted) {
+          const identityExpiry = await identitySDK.getIdentityExpiryData(root as `0x${string}`)
 
-      if (formattedExpiryTimestamp) {
-        setExpiry(formattedExpiryTimestamp)
+          const { expiryTimestamp } = identitySDK.calculateIdentityExpiry(
+            identityExpiry?.lastAuthenticated ?? BigInt(0),
+            identityExpiry?.authPeriod ?? BigInt(0),
+          )
+
+          const date = new Date(Number(expiryTimestamp))
+          const formattedExpiryTimestamp = date.toLocaleDateString("en-US", {
+            year: "numeric",
+            month: "long",
+            day: "2-digit",
+          })
+
+          setExpiry(formattedExpiryTimestamp)
+        } else {
+          setExpiry(undefined)
+        }
+      } catch (err) {
+        console.error("fetchIdentityData error:", err)
       }
     }
 
     if (identitySDK) {
-      fetchExpiry()
+      fetchIdentityData()
     }
   }, [address, identitySDK])
 
@@ -53,12 +67,21 @@ export const IdentityCard: React.FC = () => {
       ) : (
         <>
           <Text color="$text" fontSize="$medium" mb="$small">
-            Wallet Address: {address}
+            Connected Wallet: {address.slice(0, 6)}...{address.slice(-4)}
           </Text>
+          {isWhitelisted && rootAddress && rootAddress.toLowerCase() !== address.toLowerCase() && (
+            <Text color="$text" fontSize="$medium" mb="$small">
+              Root Identity: {rootAddress.slice(0, 6)}...{rootAddress.slice(-4)}
+            </Text>
+          )}
           <Text color="$text" fontSize="$medium">
-            {expiry && new Date(expiry) < new Date() ? "Expired" : "Expiry"}:{" "}
-            {expiry || "Not Verified"}
+            Status: {isWhitelisted ? "Whitelisted" : "Not Whitelisted"}
           </Text>
+          {isWhitelisted && expiry && (
+            <Text color="$text" fontSize="$medium" mt="$small">
+              {new Date(expiry) < new Date() ? "Expired" : "Expiry"}: {expiry}
+            </Text>
+          )}
         </>
       )}
     </View>

apps/demo-identity-app/src/components/VerifyButton.tsx

@@ -7,9 +7,7 @@ interface VerifyButtonProps {
   onVerificationSuccess: () => void
 }
 
-export const VerifyButton: React.FC<VerifyButtonProps> = ({
-  onVerificationSuccess,
-}) => {
+export const VerifyButton: React.FC<VerifyButtonProps> = () => {
   const { address } = useAccount()
   const { sdk: identitySDK } = useIdentitySDK("development")
 

apps/engagement-app/src/hooks/use-toast.ts

@@ -1,103 +1,94 @@
-"use client";
+"use client"
 
 // Inspired by react-hot-toast library
-import * as React from "react";
+import * as React from "react"
 
-import type { ToastActionElement, ToastProps } from "@/components/ui/toast";
+import type { ToastActionElement, ToastProps } from "@/components/ui/toast"
 
-const TOAST_LIMIT = 1;
-const TOAST_REMOVE_DELAY = 1000000;
+const TOAST_LIMIT = 1
+const TOAST_REMOVE_DELAY = 1000000
 
 type ToasterToast = ToastProps & {
-  id: string;
-  title?: React.ReactNode;
-  description?: React.ReactNode;
-  action?: ToastActionElement;
-};
-
-const actionTypes = {
-  ADD_TOAST: "ADD_TOAST",
-  UPDATE_TOAST: "UPDATE_TOAST",
-  DISMISS_TOAST: "DISMISS_TOAST",
-  REMOVE_TOAST: "REMOVE_TOAST",
-} as const;
+  id: string
+  title?: React.ReactNode
+  description?: React.ReactNode
+  action?: ToastActionElement
+}
 
-let count = 0;
+let count = 0
 
 function genId() {
-  count = (count + 1) % Number.MAX_SAFE_INTEGER;
-  return count.toString();
+  count = (count + 1) % Number.MAX_SAFE_INTEGER
+  return count.toString()
 }
 
-type ActionType = typeof actionTypes;
-
 type Action =
   | {
-      type: ActionType["ADD_TOAST"];
-      toast: ToasterToast;
+      type: "ADD_TOAST"
+      toast: ToasterToast
     }
   | {
-      type: ActionType["UPDATE_TOAST"];
-      toast: Partial<ToasterToast>;
+      type: "UPDATE_TOAST"
+      toast: Partial<ToasterToast>
     }
   | {
-      type: ActionType["DISMISS_TOAST"];
-      toastId?: ToasterToast["id"];
+      type: "DISMISS_TOAST"
+      toastId?: ToasterToast["id"]
     }
   | {
-      type: ActionType["REMOVE_TOAST"];
-      toastId?: ToasterToast["id"];
-    };
+      type: "REMOVE_TOAST"
+      toastId?: ToasterToast["id"]
+    }
 
 interface State {
-  toasts: ToasterToast[];
+  toasts: ToasterToast[]
 }
 
-const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>();
+const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()
 
 const addToRemoveQueue = (toastId: string) => {
   if (toastTimeouts.has(toastId)) {
-    return;
+    return
   }
 
   const timeout = setTimeout(() => {
-    toastTimeouts.delete(toastId);
+    toastTimeouts.delete(toastId)
     dispatch({
       type: "REMOVE_TOAST",
       toastId: toastId,
-    });
-  }, TOAST_REMOVE_DELAY);
+    })
+  }, TOAST_REMOVE_DELAY)
 
-  toastTimeouts.set(toastId, timeout);
-};
+  toastTimeouts.set(toastId, timeout)
+}
 
 export const reducer = (state: State, action: Action): State => {
   switch (action.type) {
     case "ADD_TOAST":
       return {
         ...state,
         toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
-      };
+      }
 
     case "UPDATE_TOAST":
       return {
         ...state,
         toasts: state.toasts.map((t) =>
           t.id === action.toast.id ? { ...t, ...action.toast } : t,
         ),
-      };
+      }
 
     case "DISMISS_TOAST": {
-      const { toastId } = action;
+      const { toastId } = action
 
       // ! Side effects ! - This could be extracted into a dismissToast() action,
       // but I'll keep it here for simplicity
       if (toastId) {
-        addToRemoveQueue(toastId);
+        addToRemoveQueue(toastId)
       } else {
         state.toasts.forEach((toast) => {
-          addToRemoveQueue(toast.id);
-        });
+          addToRemoveQueue(toast.id)
+        })
       }
 
       return {
@@ -110,44 +101,44 @@ export const reducer = (state: State, action: Action): State => {
               }
             : t,
         ),
-      };
+      }
     }
     case "REMOVE_TOAST":
       if (action.toastId === undefined) {
         return {
           ...state,
           toasts: [],
-        };
+        }
       }
       return {
         ...state,
         toasts: state.toasts.filter((t) => t.id !== action.toastId),
-      };
+      }
   }
-};
+}
 
-const listeners: Array<(state: State) => void> = [];
+const listeners: Array<(state: State) => void> = []
 
-let memoryState: State = { toasts: [] };
+let memoryState: State = { toasts: [] }
 
 function dispatch(action: Action) {
-  memoryState = reducer(memoryState, action);
+  memoryState = reducer(memoryState, action)
   listeners.forEach((listener) => {
-    listener(memoryState);
-  });
+    listener(memoryState)
+  })
 }
 
-type Toast = Omit<ToasterToast, "id">;
+type Toast = Omit<ToasterToast, "id">
 
 function toast({ ...props }: Toast) {
-  const id = genId();
+  const id = genId()
 
   const update = (props: ToasterToast) =>
     dispatch({
       type: "UPDATE_TOAST",
       toast: { ...props, id },
-    });
-  const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id });
+    })
+  const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id })
 
   dispatch({
     type: "ADD_TOAST",
@@ -156,36 +147,36 @@ function toast({ ...props }: Toast) {
       id,
       open: true,
       onOpenChange: (open) => {
-        if (!open) dismiss();
+        if (!open) dismiss()
       },
     },
-  });
+  })
 
   return {
     id: id,
     dismiss,
     update,
-  };
+  }
 }
 
 function useToast() {
-  const [state, setState] = React.useState<State>(memoryState);
+  const [state, setState] = React.useState<State>(memoryState)
 
   React.useEffect(() => {
-    listeners.push(setState);
+    listeners.push(setState)
     return () => {
-      const index = listeners.indexOf(setState);
+      const index = listeners.indexOf(setState)
       if (index > -1) {
-        listeners.splice(index, 1);
+        listeners.splice(index, 1)
       }
-    };
-  }, [state]);
+    }
+  }, [state])
 
   return {
     ...state,
     toast,
     dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }),
-  };
+  }
 }
 
-export { useToast, toast };
+export { useToast, toast }