Persist transfer history to local storage

package.json

@@ -27,7 +27,7 @@
     "react-toastify": "^9.1.3",
     "wagmi": "0.12.18",
     "zod": "^3.21.4",
-    "zustand": "^4.3.8"
+    "zustand": "^4.3.9"
   },
   "devDependencies": {
     "@trivago/prettier-plugin-sort-imports": "^4.1.1",

src/features/store.ts

@@ -1,4 +1,5 @@
 import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
 
 import type { TransferContext, TransferStatus } from './transfer/types';
 
@@ -22,35 +23,43 @@ export interface AppState {
   setIsSenderNftOwner: (isOwner: boolean | null) => void;
 }
 
-export const useStore = create<AppState>()((set) => ({
-  transfers: [],
-  addTransfer: (t) => {
-    set((state) => ({ transfers: [...state.transfers, t] }));
-  },
-  updateTransferStatus: (i, s, options) => {
-    set((state) => {
-      if (i >= state.transfers.length) return state;
-      const txs = [...state.transfers];
-      txs[i].status = s;
-      txs[i].msgId ||= options?.msgId;
-      txs[i].originTxHash ||= options?.originTxHash;
-      return {
-        transfers: txs,
-      };
-    });
-  },
-  balances: {
-    senderBalance: '0',
-    senderNftIds: null,
-    isSenderNftOwner: false,
-  },
-  setSenderBalance: (senderBalance) => {
-    set((state) => ({ balances: { ...state.balances, senderBalance } }));
-  },
-  setSenderNftIds: (senderNftIds) => {
-    set((state) => ({ balances: { ...state.balances, senderNftIds } }));
-  },
-  setIsSenderNftOwner: (isSenderNftOwner) => {
-    set((state) => ({ balances: { ...state.balances, isSenderNftOwner } }));
-  },
-}));
+export const useStore = create<AppState>()(
+  persist(
+    (set) => ({
+      transfers: [],
+      addTransfer: (t) => {
+        set((state) => ({ transfers: [...state.transfers, t] }));
+      },
+      updateTransferStatus: (i, s, options) => {
+        set((state) => {
+          if (i >= state.transfers.length) return state;
+          const txs = [...state.transfers];
+          txs[i].status = s;
+          txs[i].msgId ||= options?.msgId;
+          txs[i].originTxHash ||= options?.originTxHash;
+          return {
+            transfers: txs,
+          };
+        });
+      },
+      balances: {
+        senderBalance: '0',
+        senderNftIds: null,
+        isSenderNftOwner: false,
+      },
+      setSenderBalance: (senderBalance) => {
+        set((state) => ({ balances: { ...state.balances, senderBalance } }));
+      },
+      setSenderNftIds: (senderNftIds) => {
+        set((state) => ({ balances: { ...state.balances, senderNftIds } }));
+      },
+      setIsSenderNftOwner: (isSenderNftOwner) => {
+        set((state) => ({ balances: { ...state.balances, isSenderNftOwner } }));
+      },
+    }),
+    {
+      name: 'app-state',
+      partialize: (state) => ({ transfers: state.transfers }),
+    },
+  ),
+);

src/features/transfer/types.ts

@@ -27,4 +27,5 @@ export interface TransferContext {
   params: TransferFormValues;
   originTxHash?: string;
   msgId?: string;
+  timestamp?: number;
 }

yarn.lock

@@ -949,7 +949,7 @@ __metadata:
     typescript: ^5.0.4
     wagmi: 0.12.18
     zod: ^3.21.4
-    zustand: ^4.3.8
+    zustand: ^4.3.9
   languageName: unknown
   linkType: soft
 
@@ -10580,9 +10580,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"zustand@npm:^4.3.8":
-  version: 4.3.8
-  resolution: "zustand@npm:4.3.8"
+"zustand@npm:^4.3.9":
+  version: 4.3.9
+  resolution: "zustand@npm:4.3.9"
   dependencies:
     use-sync-external-store: 1.2.0
   peerDependencies:
@@ -10593,6 +10593,6 @@ __metadata:
       optional: true
     react:
       optional: true
-  checksum: 24db6bf063ce1fc8b2ee238f13211a88f43236541a716e5f6f706f613c671a45332465f9ed06d694f8c353da3d24c53ea668e5712a86aceda9ad74f6c433e8c0
+  checksum: fc83d653913fa537c354ba8b95d3a4fdebe62d2ebd3d9f5aeff2edf062811c0f5af48e02ab4da32b666752fd4f3e78c2b44624e445254f48503595435d4a7d70
   languageName: node
   linkType: hard