diff --git a/README.md b/README.md index 042a3c1..66fb1ec 100644 --- a/README.md +++ b/README.md @@ -39,8 +39,8 @@ const transactionsStore = createTransactionsStore() ... // Add the provider to your app -// make sure to make it as children of WagmiConfig - +// make sure its a children of WagmiConfig + txs.filter(({ status }) => status === 'completed')) +const completedTransactions = useRecentTransactions((txs) => + txs.filter(({ status }) => status === 'completed'), +) ``` #### `useAddRecentTransaction` + Adds a transaction to be tracked, to the connected user/chain + ```ts const addTransaction = useAddRecentTransaction() ... @@ -99,7 +108,9 @@ addTransaction({ ``` #### `useRemoveRecentTransaction` + Removes a connected user transaction by hash + ```ts const removeTransaction = useRemoveRecentTransaction() ... @@ -107,7 +118,9 @@ removeTransaction(hash) ``` #### `useClearRecentTransactions` + Clears all transactions stored on the current connected user/chain + ```ts const clearTransactions = useClearRecentTransactions() ... @@ -115,22 +128,35 @@ clearTransactions() ``` #### `useTransactionsStoreEvent` + Listens for an event from the store to execute a callback + ```ts -useTransactionsStoreEvent('added', useCallback((tx) => { - // a new transaction was added, do something -}, [])) +useTransactionsStoreEvent( + 'added', + useCallback((tx) => { + // a new transaction was added, do something + }, []), +) ``` + Supported events are `added`, `updated`, `removed`, `cleared`, `mounted` Useful if you are building your own notification solution -Maybe you want to display a confirmation dialog on transaction confimed. +Maybe you want to display a confirmation dialog on transaction confimed. that could look something like this + ```ts -useTransactionsStoreEvent('updated', useCallback((tx) => { - if (tx.status === 'confirmed') displayTxConfirmedDialog(tx) -}, [displayTxConfirmedDialog])) +useTransactionsStoreEvent( + 'updated', + useCallback( + (tx) => { + if (tx.status === 'confirmed') displayTxConfirmedDialog(tx) + }, + [displayTxConfirmedDialog], + ), +) ``` ## Built in Components @@ -167,6 +193,16 @@ for example, instead of a single `description` you may want to have custom descr Here's an example of how that could work ```jsx +import { + StoredTransaction, + ToastsViewport, + TransactionStatusToastProps, + TypedUseAddRecentTransaction, + TypedUseRecentTransactions, + useRecentTransactions as _useRecentTransactions, + useAddRecentTransaction as _useAddRecentTransaction, +} from '@pcnv/txs-react' + type TransactionMeta = { [status in StoredTransaction['status']]: string } @@ -178,8 +214,10 @@ const MyCustomNotification = (props: TransactionStatusToastProps -export const useAddRecentTransaction = cnvTxs.useAddRecentTransaction +export const useRecentTransactions: TypedUseRecentTransactions = + _useRecentTransactions +export const useAddRecentTransaction: TypedUseAddRecentTransaction = + _useAddRecentTransaction ... diff --git a/examples/nextjs/providers/RecentTransactionsProvider.tsx b/examples/nextjs/providers/RecentTransactionsProvider.tsx index 7ce25cf..911c45b 100644 --- a/examples/nextjs/providers/RecentTransactionsProvider.tsx +++ b/examples/nextjs/providers/RecentTransactionsProvider.tsx @@ -8,8 +8,9 @@ import { TransactionStatusToastProps, TypedUseAddRecentTransaction, TypedUseRecentTransactions, + useRecentTransactions as _useRecentTransactions, + useAddRecentTransaction as _useAddRecentTransaction, } from '@pcnv/txs-react' -import * as txs from '@pcnv/txs-react' import { EmojiToast } from '@pcnv/txs-react/toasts/EmojiToast' import '@pcnv/txs-react/toasts/EmojiToast/styles.css' @@ -25,9 +26,9 @@ const MyCustomNotification = (props: TransactionStatusToastProps = - txs.useRecentTransactions + _useRecentTransactions export const useAddRecentTransaction: TypedUseAddRecentTransaction = - txs.useAddRecentTransaction + _useAddRecentTransaction export function RecentTransactionsProvider({ children }: PropsWithChildren) { return ( diff --git a/packages/txs-react/package.json b/packages/txs-react/package.json index 32a0981..1225cf5 100644 --- a/packages/txs-react/package.json +++ b/packages/txs-react/package.json @@ -1,6 +1,6 @@ { "name": "@pcnv/txs-react", - "version": "0.0.3", + "version": "0.0.4", "type": "module", "module": "dist/index.js", "types": "dist/index.d.ts",