chore: init zustand & new pending tx state (#5383)

* add zustand

* init zustand

* core pendingTx state

* lint

* bump prettier

* Revert "bump prettier"

This reverts commit 1effe54.

* remove prettierignore file and merge develop

* fix format

---------

Co-authored-by: Matthew Wall <matthew.wallt@gmail.com>

package.json

@@ -306,7 +306,8 @@
     "util": "0.10.4",
     "viem": "1.6.0",
     "vm-browserify": "0.0.4",
-    "w2t": "3.0.2"
+    "w2t": "3.0.2",
+    "zustand": "4.5.0"
   },
   "devDependencies": {
     "@babel/core": "7.22.0",

src/state/internal/createStore.ts

@@ -0,0 +1,26 @@
+import { PersistOptions, persist } from 'zustand/middleware';
+import create, { Mutate, StoreApi } from 'zustand/vanilla';
+
+import { persistStorage } from './persistStorage';
+
+type Initializer<TState> = Parameters<typeof persist<TState>>[0];
+export type StoreWithPersist<TState> = Mutate<StoreApi<TState>, [['zustand/persist', unknown]]> & {
+  initializer: Initializer<TState>;
+};
+
+export function createStore<TState>(
+  initializer: Initializer<TState>,
+  { persist: persistOptions }: { persist?: PersistOptions<TState> } = {}
+) {
+  const name = `rainbow.zustand.${persistOptions?.name}`;
+  return Object.assign(
+    create(
+      persist(initializer, {
+        ...persistOptions,
+        name,
+        getStorage: () => persistStorage,
+      })
+    ),
+    { initializer }
+  );
+}

src/state/internal/persistStorage.ts

@@ -0,0 +1,14 @@
+import { zustandStorage } from '@/storage/legacy';
+import { StateStorage } from 'zustand/middleware';
+
+export const persistStorage: StateStorage = {
+  getItem: async (key: string): Promise<string | null> => {
+    return zustandStorage.get([key]);
+  },
+  setItem: async (key: string, value: string): Promise<void> => {
+    await zustandStorage.set([key], value);
+  },
+  removeItem: async (key: string): Promise<void> => {
+    await zustandStorage.remove([key]);
+  },
+};

src/state/pendingTransactionState.ts

@@ -0,0 +1,66 @@
+import { RainbowTransaction } from '@/entities/transactions';
+import { createStore } from './internal/createStore';
+import create from 'zustand';
+
+export interface PendingTransactionsState {
+  pendingTransactions: Record<string, RainbowTransaction[]>;
+  addPendingTransaction: ({ address, pendingTransaction }: { address: string; pendingTransaction: RainbowTransaction }) => void;
+  updatePendingTransaction: ({ address, pendingTransaction }: { address: string; pendingTransaction: RainbowTransaction }) => void;
+  setPendingTransactions: ({ address, pendingTransactions }: { address: string; pendingTransactions: RainbowTransaction[] }) => void;
+  clearPendingTransactions: () => void;
+}
+
+export const pendingTransactionsStore = createStore<PendingTransactionsState>(
+  (set, get) => ({
+    pendingTransactions: {},
+    addPendingTransaction: ({ address, pendingTransaction }) => {
+      const { pendingTransactions: currentPendingTransactions } = get();
+      const addressPendingTransactions = currentPendingTransactions[address] || [];
+      set({
+        pendingTransactions: {
+          ...currentPendingTransactions,
+          [address]: [...addressPendingTransactions, pendingTransaction],
+        },
+      });
+    },
+    updatePendingTransaction: ({ address, pendingTransaction }) => {
+      const { pendingTransactions: currentPendingTransactions } = get();
+      const addressPendingTransactions = currentPendingTransactions[address] || [];
+
+      set({
+        pendingTransactions: {
+          ...currentPendingTransactions,
+          [address]: [
+            ...addressPendingTransactions.filter(tx => {
+              if (tx.network === pendingTransaction.network) {
+                return tx.nonce !== pendingTransaction.nonce;
+              }
+              return true;
+            }),
+            pendingTransaction,
+          ],
+        },
+      });
+    },
+    setPendingTransactions: ({ address, pendingTransactions }) => {
+      const { pendingTransactions: currentPendingTransactions } = get();
+      set({
+        pendingTransactions: {
+          ...currentPendingTransactions,
+          [address]: [...pendingTransactions],
+        },
+      });
+    },
+    clearPendingTransactions: () => {
+      set({ pendingTransactions: {} });
+    },
+  }),
+  {
+    persist: {
+      name: 'pendingTransactions',
+      version: 1,
+    },
+  }
+);
+
+export const usePendingTransactionsStore = create(pendingTransactionsStore);

src/storage/legacy.ts

@@ -50,3 +50,4 @@ class LegacyStorage<Scopes extends unknown[], Schema> extends Storage<Scopes, Sc
  * instance instead of this one.
  */
 export const legacy = new LegacyStorage<[], Legacy>({ id: 'global' });
+export const zustandStorage = new LegacyStorage<[], Legacy>({ id: 'zustand' });

yarn.lock

@@ -18393,7 +18393,7 @@ use-memo-one@1.1.1:
   resolved "https://registry.yarnpkg.com/use-memo-one/-/use-memo-one-1.1.1.tgz#39e6f08fe27e422a7d7b234b5f9056af313bd22c"
   integrity sha512-oFfsyun+bP7RX8X2AskHNTxu+R3QdE/RC5IefMbqptmACAA/gfol1KDD5KRzPsGMa62sWxGZw+Ui43u6x4ddoQ==
 
-use-sync-external-store@^1.0.0, use-sync-external-store@^1.2.0:
+use-sync-external-store@1.2.0, use-sync-external-store@^1.0.0, use-sync-external-store@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz#7dbefd6ef3fe4e767a0cf5d7287aacfb5846928a"
   integrity sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==
@@ -19301,3 +19301,10 @@ zod@^1.11.11:
   version "1.11.17"
   resolved "https://registry.yarnpkg.com/zod/-/zod-1.11.17.tgz#2aae9e91fc66128116ae9844e8f416a95f453f8e"
   integrity sha512-UzIwO92D0dSFwIRyyqAfRXICITLjF0IP8tRbEK/un7adirMssWZx8xF/1hZNE7t61knWZ+lhEuUvxlu2MO8qqA==
+
+zustand@4.5.0:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/zustand/-/zustand-4.5.0.tgz#141354af56f91de378aa6c4b930032ab338f3ef0"
+  integrity sha512-zlVFqS5TQ21nwijjhJlx4f9iGrXSL0o/+Dpy4txAP22miJ8Ti6c1Ol1RLNN98BMib83lmDH/2KmLwaNXpjrO1A==
+  dependencies:
+    use-sync-external-store "1.2.0"