fix update tx sync

packages/txs-core/src/store.ts

@@ -96,8 +96,7 @@ export const createTransactionsStore = (_config?: Partial<TransactionsStoreConfi
     waitForTransaction(provider, user, chainId, tx)
   }
 
-  function transactionsOf(user?: Address, chainId?: number) {
-    if (!user || !chainId) return stableNoTransactions
+  function transactionsOf(user: Address, chainId: number) {
     return transactions[user]?.[chainId] || stableNoTransactions
   }
 
@@ -107,7 +106,7 @@ export const createTransactionsStore = (_config?: Partial<TransactionsStoreConfi
   }
 
   function removeTransaction(user: Address, chainId: number, hash: StoredTransaction['hash']) {
-    const tx = transactionsOf(user, chainId).find((tx) => tx.hash === hash)
+    const tx = transactionsOf(user, chainId)?.find((tx) => tx.hash === hash)
     if (!tx) return
     updateUserTransactions(user, chainId, (txs) => txs.filter((tx) => tx.hash !== hash))
     listeners.emit('removed', tx)
@@ -124,16 +123,17 @@ export const createTransactionsStore = (_config?: Partial<TransactionsStoreConfi
   }) {
     const { transactionHash: hash, status } = receipt
     // maybe add gasUsed, gasPrice, blockNumber, etc (?)
+    let updatedTx
     updateUserTransactions(user, chainId, (txs) => {
       const tx = txs.find((tx) => hash === tx.hash)
       if (!tx) return txs // if transaction is not in the store, it was cleared and we don't want to re-add it
-      const updatedTx = {
+      updatedTx = {
         ...tx,
         status: status === 1 ? 'confirmed' : 'failed',
       } satisfies StoredTransaction
-      listeners.emit('updated', updatedTx)
       return [updatedTx, ...txs.filter(({ hash }) => hash !== tx.hash)]
     })
+    if (updatedTx) listeners.emit('updated', updatedTx)
   }
 
   const pendingTxsCache: Map<string, Promise<void>> = new Map()

packages/txs-react/package.json

@@ -21,9 +21,11 @@
   },
   "dependencies": {
     "@pcnv/txs-core": "workspace:*",
+    "@types/use-sync-external-store": "^0.0.3",
     "detect-browser": "^5.3.0",
     "lucide-react": "0.105.0-alpha.4",
-    "use-prefers-color-scheme": "^1.1.2"
+    "use-prefers-color-scheme": "^1.1.2",
+    "use-sync-external-store": "^1.2.0"
   },
   "peerDependencies": {
     "@zag-js/react": ">=0.3.3",

packages/txs-react/src/hooks.ts

@@ -1,9 +1,12 @@
-import { useCallback, useEffect, useSyncExternalStore } from 'react'
+import { useSyncExternalStore, useCallback, useEffect } from 'react'
 import { useAccount, useNetwork, useProvider } from 'wagmi'
 import { useTransactionsStore } from './Provider'
 import type { NewTransaction, StoredTransaction, TransactionsStoreEvents } from '@pcnv/txs-core'
 import { DefaultToastTransactionMeta } from './toasts/ToastsViewport'
 
+import useSyncExternalStoreExports from 'use-sync-external-store/shim/with-selector'
+const { useSyncExternalStoreWithSelector } = useSyncExternalStoreExports
+
 export const useRecentTransactions = <
   Meta extends StoredTransaction['meta'] = DefaultToastTransactionMeta,
   Selector = StoredTransaction<Meta>[],
@@ -15,17 +18,17 @@ export const useRecentTransactions = <
   const { address } = useAccount()
   const { chain } = useNetwork()
 
-  const transactions = useSyncExternalStore(
+  const transactions = useSyncExternalStoreWithSelector(
     store.onTransactionsChange,
     useCallback(
       () =>
-        selector(
-          (store.transactionsOf(address, chain?.id) as StoredTransaction<Meta>[]) ||
-            initialTransactions,
-        ),
-      [selector, store, address, chain?.id, initialTransactions],
+        address && chain?.id
+          ? (store.transactionsOf(address, chain.id) as StoredTransaction<Meta>[])
+          : [],
+      [address, chain?.id, store, selector],
     ),
-    () => selector(initialTransactions),
+    useCallback(() => initialTransactions, [initialTransactions]),
+    selector,
   )
 
   return transactions