[Issue #2479] Tie streams to hat

src/hooks/DAO/loaders/useHatsTree.ts

@@ -3,7 +3,7 @@ import { HatsSubgraphClient, Tree } from '@hatsprotocol/sdk-v1-subgraph';
 import { useCallback, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { toast } from 'sonner';
-import { Address, formatUnits, getAddress, getContract, Hex } from 'viem';
+import { Address, formatUnits, getAddress, getContract } from 'viem';
 import { usePublicClient } from 'wagmi';
 import { StreamsQueryDocument } from '../../../../.graphclient';
 import { SablierV2LockupLinearAbi } from '../../../assets/abi/SablierV2LockupLinear';
@@ -39,7 +39,6 @@ const useHatsTree = () => {
     setHatsTree,
     updateRolesWithStreams,
     resetHatsStore,
-    hatIdsToStreamIds,
   } = useRolesStore();
 
   const ipfsClient = useIPFSClient();
@@ -263,23 +262,6 @@ const useHatsTree = () => {
     [apolloClient, publicClient, sablierSubgraph],
   );
 
-  const getTermedPaymentStreams = useCallback(
-    async (allTermRecipients: Address[], hatId: Hex): Promise<SablierPayment[]> => {
-      const assignedStreamIds = hatIdsToStreamIds
-        .filter(item => item.hatId === BigInt(hatId))
-        .map(({ streamId }) => {
-          return streamId;
-        });
-      const uniqueRecipients = [...new Set(allTermRecipients)];
-      const payments: SablierPayment[] = [];
-      for (const recipient of uniqueRecipients) {
-        payments.push(...(await getPaymentStreams(recipient)));
-      }
-      return payments.filter(stream => assignedStreamIds.includes(stream.streamId));
-    },
-    [getPaymentStreams, hatIdsToStreamIds],
-  );
-
   useEffect(() => {
     async function getHatsStreams() {
       if (hatsTree && hatsTree.roleHats.length > 0 && !streamsFetched) {
@@ -290,12 +272,12 @@ const useHatsTree = () => {
             }
             const payments: SablierPayment[] = [];
             if (hat.isTermed) {
-              payments.push(
-                ...(await getTermedPaymentStreams(
-                  hat.roleTerms.allTerms.map(term => term.nominee),
-                  hat.id,
-                )),
-              );
+              const uniqueRecipients = [
+                ...new Set(hat.roleTerms.allTerms.map(term => term.nominee)),
+              ];
+              for (const recipient of uniqueRecipients) {
+                payments.push(...(await getPaymentStreams(recipient)));
+              }
             } else {
               if (!hat.smartAddress) {
                 throw new Error('Smart account address not found');
@@ -312,14 +294,7 @@ const useHatsTree = () => {
     }
 
     getHatsStreams();
-  }, [
-    hatsTree,
-    updateRolesWithStreams,
-    getPaymentStreams,
-    streamsFetched,
-    hatIdsToStreamIds,
-    getTermedPaymentStreams,
-  ]);
+  }, [hatsTree, updateRolesWithStreams, getPaymentStreams, streamsFetched]);
 
   useEffect(() => {
     if (safeAddress && safe?.address && safeAddress !== safe.address && hatsTree) {

src/hooks/DAO/useKeyValuePairs.ts

@@ -143,6 +143,7 @@ const useKeyValuePairs = () => {
               hatsTreeId: getHatsTreeId(logs, chain.id),
               contextChainId: chain.id,
             });
+            setHatIdsToStreamIds(getHatIdsToStreamIds(logs, sablierV2LockupLinear, chain.id));
           }, 20_000);
         },
       },

src/store/roles/rolesStoreUtils.ts

@@ -96,7 +96,6 @@ export const initialHatsStore: RolesStoreData = {
   decentHatsAddress: undefined,
   streamsFetched: false,
   contextChainId: null,
-  hatIdsToStreamIds: [],
 };
 
 export const predictHatId = ({ adminHatId, hatsCount }: { adminHatId: Hex; hatsCount: number }) => {

src/store/roles/useRolesStore.ts

@@ -5,6 +5,15 @@ import { convertStreamIdToBigInt } from '../../hooks/streams/useCreateSablierStr
 import { DecentRoleHat, RolesStore } from '../../types/roles';
 import { initialHatsStore, sanitize } from './rolesStoreUtils';
 
+const hatToStreamIdMap = new Map<BigInt, string>();
+const getHatToStreamIdMap = () => {
+  return Array.from(hatToStreamIdMap.entries()).map(([hatId, streamId]) => ({
+    hatId,
+    streamId,
+  }));
+};
+const setHatToStreamId = (key: BigInt, value: string) => hatToStreamIdMap.set(key, value);
+
 const useRolesStore = create<RolesStore>()((set, get) => ({
   ...initialHatsStore,
   getHat: hatId => {
@@ -96,10 +105,21 @@ const useRolesStore = create<RolesStore>()((set, get) => ({
   updateRolesWithStreams: (updatedRoles: DecentRoleHat[]) => {
     const existingHatsTree = get().hatsTree;
     if (!existingHatsTree) return;
+    const hatIdToStreamIdMap = getHatToStreamIdMap();
 
     const updatedDecentTree = {
       ...existingHatsTree,
-      roleHats: updatedRoles,
+      roleHats: updatedRoles.map(roleHat => {
+        const filteredStreamIds = hatIdToStreamIdMap
+          .filter(hatToStreamId => hatToStreamId.hatId === BigInt(roleHat.id))
+          .map(hatToStreamId => hatToStreamId.streamId);
+        return {
+          ...roleHat,
+          payments: roleHat.payments?.filter(payment => {
+            return filteredStreamIds.includes(payment.streamId);
+          }),
+        };
+      }),
     };
 
     set(() => ({ hatsTree: updatedDecentTree, streamsFetched: true }));
@@ -130,7 +150,9 @@ const useRolesStore = create<RolesStore>()((set, get) => ({
     }));
   },
   setHatIdsToStreamIds: hatIdsToStreamIds => {
-    set(() => ({ hatIdsToStreamIds }));
+    for (const { hatId, streamId } of hatIdsToStreamIds) {
+      setHatToStreamId(hatId, streamId);
+    }
   },
   resetHatsStore: () => set(() => initialHatsStore),
 }));

src/types/roles.tsx

@@ -238,7 +238,6 @@ export interface RolesStoreData {
   hatsTree: undefined | null | DecentTree;
   streamsFetched: boolean;
   contextChainId: number | null;
-  hatIdsToStreamIds: { hatId: BigInt; streamId: string }[];
 }
 
 export interface RolesStore extends RolesStoreData {