fixes attestation store (#3721)

Author: nijoe1

packages/grant-explorer/src/attestationStore.ts

@@ -6,33 +6,45 @@ import { persist } from "zustand/middleware";
 import { Hex } from "viem";
 
 interface AttestationState {
-  checkedOutTransactions: Hex[];
-  addCheckedOutTransaction: (tx: Hex) => void;
-  getCheckedOutTransactions: () => Hex[];
+  checkedOutTransactions: Record<Hex, Hex[]>;
+  addCheckedOutTransaction: (tx: Hex, address?: Hex) => void;
+  getCheckedOutTransactions: (address?: Hex) => Hex[];
   cleanCheckedOutTransactions: () => void;
 }
 
 export const useAttestationStore = create<AttestationState>()(
   persist(
     devtools((set, get) => ({
-      checkedOutTransactions: [],
-      addCheckedOutTransaction: (tx: Hex) => {
+      checkedOutTransactions: {},
+      addCheckedOutTransaction: (tx: Hex, address?: Hex) => {
+        if (!address) {
+          return;
+        }
         set((oldState) => ({
-          checkedOutTransactions: [...oldState.checkedOutTransactions, tx],
+          checkedOutTransactions: {
+            ...oldState.checkedOutTransactions,
+            [address]: [
+              ...(oldState.checkedOutTransactions[address] || []),
+              tx,
+            ],
+          },
         }));
       },
-      getCheckedOutTransactions: () => {
-        return get().checkedOutTransactions;
+      getCheckedOutTransactions: (address?: Hex) => {
+        if (!address) {
+          return [];
+        }
+        return get().checkedOutTransactions[address] || [];
       },
       cleanCheckedOutTransactions: () => {
         set({
-          checkedOutTransactions: [],
+          checkedOutTransactions: {},
         });
       },
     })),
     {
       name: "attestation-store",
-      version: 1,
+      version: 1.01,
     }
   )
 );

packages/grant-explorer/src/checkoutStore.ts

@@ -111,6 +111,7 @@ export const useCheckoutStore = create<CheckoutState>()(
       walletClient: WalletClient,
       connector: Connector
     ) => {
+      const userAddress = walletClient.account?.address;
       const chainIdsToCheckOut = chainsToCheckout.map((chain) => chain.chainId);
       get().setChainsToCheckout(
         uniq([...get().chainsToCheckout, ...chainIdsToCheckOut])
@@ -325,7 +326,7 @@ export const useCheckoutStore = create<CheckoutState>()(
           });
           useAttestationStore
             .getState()
-            .addCheckedOutTransaction(receipt.transactionHash);
+            .addCheckedOutTransaction(receipt.transactionHash, userAddress);
         } catch (error) {
           let context: Record<string, unknown> = {
             chainId,

packages/grant-explorer/src/features/round/ThankYou.tsx

@@ -104,7 +104,7 @@ export default function ThankYou() {
   }, [minted]);
 
   const transactions = useAttestationStore((state) =>
-    state.getCheckedOutTransactions()
+    state.getCheckedOutTransactions(address)
   );
 
   const handleSelectBackground = (option: string) => {
@@ -169,7 +169,6 @@ export default function ThankYou() {
       ? false
       : balance.value < attestationFee + (gasEstimation ?? 0n);
 
-
   return (
     <>
       <Navbar />
@@ -201,13 +200,13 @@ export default function ThankYou() {
                           Mint your Impact
                         </h1>
                         <p className="mt-1 text-lg  font-modern-era-regular">
-                          Capture your contribution onchain with an
-                          attestation and receive a unique visual that
-                          symbolizes your donation.
+                          Capture your contribution onchain with an attestation
+                          and receive a unique visual that symbolizes your
+                          donation.
                         </p>
                         <p className="my-2 text-lg font-modern-era-regular">
-                          This visual reflects your onchain attestation,
-                          marking your support in a meaningful way.
+                          This visual reflects your onchain attestation, marking
+                          your support in a meaningful way.
                         </p>
                       </div>
                       <PreviewFrame