v0.0.4

README.md

@@ -39,8 +39,8 @@ const transactionsStore = createTransactionsStore()
 ...
 
 // Add the provider to your app
-// make sure to make it as children of WagmiConfig 
-<WagmiConfig client={...}> 
+// make sure its a children of WagmiConfig
+<WagmiConfig client={...}>
   <TransactionsStoreProvider store={transactionsStore}>
     <ToastsViewport
       TransactionStatusComponent={ClassicToast}
@@ -74,19 +74,28 @@ And in your component
 ```
 
 ## Hooks
+
 #### `useRecentTransactions`
+
 returns all transactions stored for the connected user in the connected chain
+
 ```ts
 const recentTransactions = useRecentTransactions()
 ```
+
 It also accepts a selector
+
 ```ts
 // this component will only rerender when a new transaction is set as completed
-const completedTransactions = useRecentTransactions(txs => 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,38 +108,55 @@ addTransaction({
 ```
 
 #### `useRemoveRecentTransaction`
+
 Removes a connected user transaction by hash
+
 ```ts
 const removeTransaction = useRemoveRecentTransaction()
 ...
 removeTransaction(hash)
 ```
 
 #### `useClearRecentTransactions`
+
 Clears all transactions stored on the current connected user/chain
+
 ```ts
 const clearTransactions = useClearRecentTransactions()
 ...
 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<TransactionMeta
 
 // you can rexport the hooks passing your new type as a generic to type check on use
 // just remember to import from this file, and not @pcnv/txs-react
-export const useRecentTransactions = cnvTxs.useRecentTransactions<TransactionMeta>
-export const useAddRecentTransaction = cnvTxs.useAddRecentTransaction<TransactionMeta>
+export const useRecentTransactions: TypedUseRecentTransactions<TransactionMeta> =
+  _useRecentTransactions
+export const useAddRecentTransaction: TypedUseAddRecentTransaction<TransactionMeta> =
+  _useAddRecentTransaction
 
 ...
 <ToastsViewport TransactionStatusComponent={MyCustomNotification} />

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<TransactionMeta
 }
 
 export const useRecentTransactions: TypedUseRecentTransactions<TransactionMeta> =
-  txs.useRecentTransactions
+  _useRecentTransactions
 export const useAddRecentTransaction: TypedUseAddRecentTransaction<TransactionMeta> =
-  txs.useAddRecentTransaction
+  _useAddRecentTransaction
 
 export function RecentTransactionsProvider({ children }: PropsWithChildren) {
   return (

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",