Recovery support, #6919

packages/next-common/components/data/recovery/hooks/useQueryAllRecoveryData.js → packages/next-common/components/data/recovery/hooks/useQueryAllFriendGroups.js

@@ -1,5 +1,5 @@
 import { useContextApi } from "next-common/context/api";
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 
 export function flattenRecoveryData(data) {
   if (!data || data.length === 0) {
@@ -24,10 +24,13 @@ export function flattenRecoveryData(data) {
   return rows;
 }
 
-export default function useQueryAllRecoveryData() {
+export default function useQueryAllFriendGroups() {
   const api = useContextApi();
   const [data, setData] = useState([]);
   const [loading, setLoading] = useState(true);
+  const [fetchCount, setFetchCount] = useState(0);
+
+  const fetch = useCallback(() => setFetchCount((c) => c + 1), []);
 
   useEffect(() => {
     if (!api) {
@@ -83,7 +86,7 @@ export default function useQueryAllRecoveryData() {
     return () => {
       cancelled = true;
     };
-  }, [api]);
+  }, [api, fetchCount]);
 
-  return { data, loading };
+  return { data, loading, fetch };
 }

packages/next-common/components/data/recovery/hooks/useQueryAllRecoveryAttempts.js

@@ -1,5 +1,5 @@
 import { useContextApi } from "next-common/context/api";
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 
 function bitfieldToIndices(bitfield) {
   const indices = [];
@@ -17,10 +17,70 @@ function bitfieldToIndices(bitfield) {
   return indices;
 }
 
+export function buildFriendGroupsData(friendGroupsMap) {
+  return Object.entries(friendGroupsMap).map(([account, groups]) => ({
+    account,
+    friendGroups: groups.map((group, index) => ({
+      index,
+      friends: group.friends || [],
+      friendsNeeded: parseInt(group.friendsNeeded) || 0,
+      inheritor: group.inheritor || "",
+      inheritancePriority: parseInt(group.inheritancePriority) || 0,
+      inheritanceDelay: parseInt(group.inheritanceDelay) || 0,
+      cancelDelay: parseInt(group.cancelDelay) || 0,
+    })),
+  }));
+}
+
+function processAttempts(entries, friendGroupsMap) {
+  return entries.map(([storageKey, value]) => {
+    const lostAccount = storageKey.args?.[0]?.toString();
+    const friendGroupIndex = storageKey.args?.[1]?.toNumber();
+
+    const json = value.toJSON();
+    const attempt = json?.[0] || {};
+
+    const approvalsBitfield = attempt.approvals || [];
+    const approvedIndices = bitfieldToIndices(approvalsBitfield);
+    const approvalsCount = approvedIndices.length;
+
+    const friendGroup =
+      (friendGroupsMap[lostAccount] || [])[friendGroupIndex] || {};
+    const friends = friendGroup.friends || [];
+    const approvedAddresses = approvedIndices
+      .filter((i) => i < friends.length)
+      .map((i) => friends[i]);
+
+    return {
+      lostAccount,
+      friendGroupIndex,
+      initiator: attempt.initiator || "",
+      initBlock: parseInt(attempt.initBlock) || 0,
+      lastApprovalBlock: parseInt(attempt.lastApprovalBlock) || 0,
+      approvalsCount,
+      approvedAddresses,
+      friendsNeeded: parseInt(friendGroup.friendsNeeded) || 0,
+    };
+  });
+}
+
+/**
+ * Fetch all recovery attempts and their friend groups.
+ *
+ * @returns {{ data: Array, loading: boolean, fetch: () => void, friendGroupsMap: object }}
+ *   - data: all processed recovery attempt objects
+ *   - loading: whether data is being fetched
+ *   - fetch: trigger a re-fetch
+ *   - friendGroupsMap: raw map of lostAccount -> friendGroups for building friendGroupsData
+ */
 export default function useQueryAllRecoveryAttempts() {
   const api = useContextApi();
   const [data, setData] = useState([]);
   const [loading, setLoading] = useState(true);
+  const [friendGroupsMap, setFriendGroupsMap] = useState({});
+  const [fetchCount, setFetchCount] = useState(0);
+
+  const fetch = useCallback(() => setFetchCount((c) => c + 1), []);
 
   useEffect(() => {
     if (!api) {
@@ -30,6 +90,7 @@ export default function useQueryAllRecoveryAttempts() {
     if (!api?.query.recovery?.attempt) {
       setLoading(false);
       setData([]);
+      setFriendGroupsMap({});
       return;
     }
 
@@ -41,71 +102,46 @@ export default function useQueryAllRecoveryAttempts() {
       .then(async (entries) => {
         if (cancelled) return;
 
-        // Build a map of (lostAccount) -> friendGroups to resolve bitfield indices to addresses
         const lostAccounts = [
           ...new Set(entries.map(([key]) => key.args?.[0]?.toString())),
         ];
-        const friendGroupsMap = {};
+        const fgMap = {};
 
         await Promise.all(
           lostAccounts.map(async (account) => {
             try {
               const value = await api.query.recovery.friendGroups(account);
               const json = value.toJSON();
-              friendGroupsMap[account] = json?.[0] || [];
+              fgMap[account] = json?.[0] || [];
             } catch {
-              friendGroupsMap[account] = [];
+              fgMap[account] = [];
             }
           }),
         );
 
-        const result = entries.map(([storageKey, value]) => {
-          const lostAccount = storageKey.args?.[0]?.toString();
-          const friendGroupIndex = storageKey.args?.[1]?.toNumber();
-
-          const json = value.toJSON();
-          const attempt = json?.[0] || {};
-
-          const approvalsBitfield = attempt.approvals || [];
-          const approvedIndices = bitfieldToIndices(approvalsBitfield);
-          const approvalsCount = approvedIndices.length;
-
-          // Resolve approved indices to actual friend addresses
-          const friendGroup =
-            (friendGroupsMap[lostAccount] || [])[friendGroupIndex] || {};
-          const friends = friendGroup.friends || [];
-          const approvedAddresses = approvedIndices
-            .filter((i) => i < friends.length)
-            .map((i) => friends[i]);
-
-          return {
-            lostAccount,
-            friendGroupIndex,
-            initiator: attempt.initiator || "",
-            initBlock: parseInt(attempt.initBlock) || 0,
-            lastApprovalBlock: parseInt(attempt.lastApprovalBlock) || 0,
-            approvalsCount,
-            approvedAddresses,
-          };
-        });
+        if (cancelled) return;
+
+        const result = processAttempts(entries, fgMap);
 
         if (!cancelled) {
           setData(result);
+          setFriendGroupsMap(fgMap);
           setLoading(false);
         }
       })
       .catch((error) => {
         console.error("Failed to query recovery attempts", error);
         if (!cancelled) {
           setData([]);
+          setFriendGroupsMap({});
           setLoading(false);
         }
       });
 
     return () => {
       cancelled = true;
     };
-  }, [api]);
+  }, [api, fetchCount]);
 
-  return { data, loading };
+  return { data, loading, fetch, friendGroupsMap };
 }

packages/next-common/components/data/recovery/hooks/useQueryAllRecoveryInheritors.js

@@ -1,10 +1,13 @@
 import { useContextApi } from "next-common/context/api";
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 
 export default function useQueryAllRecoveryInheritors() {
   const api = useContextApi();
   const [data, setData] = useState([]);
   const [loading, setLoading] = useState(true);
+  const [fetchCount, setFetchCount] = useState(0);
+
+  const fetch = useCallback(() => setFetchCount((c) => c + 1), []);
 
   useEffect(() => {
     if (!api) {
@@ -58,7 +61,7 @@ export default function useQueryAllRecoveryInheritors() {
     return () => {
       cancelled = true;
     };
-  }, [api]);
+  }, [api, fetchCount]);
 
-  return { data, loading };
+  return { data, loading, fetch };
 }

packages/next-common/components/data/recovery/index.jsx

@@ -7,9 +7,9 @@ import PageHeader from "../common/pageHeader";
 import RecoveryFriendGroupsTable from "./table";
 import RecoveryAttemptsTable from "./table/attempts";
 import RecoveryInheritorsTable from "./table/inheritors";
-import useQueryAllRecoveryData, {
+import useQueryAllFriendGroups, {
   flattenRecoveryData,
-} from "./hooks/useQueryAllRecoveryData";
+} from "./hooks/useQueryAllFriendGroups";
 import useQueryAllRecoveryAttempts from "./hooks/useQueryAllRecoveryAttempts";
 import useQueryAllRecoveryInheritors from "./hooks/useQueryAllRecoveryInheritors";
 import { searchAddress } from "./table";
@@ -21,7 +21,7 @@ export default function RecoveryExplorer() {
   const search = router.query.search || "";
 
   const { data: friendGroupsData, loading: friendGroupsLoading } =
-    useQueryAllRecoveryData();
+    useQueryAllFriendGroups();
   const { data: attemptsData, loading: attemptsLoading } =
     useQueryAllRecoveryAttempts();
   const { data: inheritorsData, loading: inheritorsLoading } =