diff --git a/.changeset/sweet-ghosts-act.md b/.changeset/sweet-ghosts-act.md new file mode 100644 index 000000000..8e7ce2adf --- /dev/null +++ b/.changeset/sweet-ghosts-act.md @@ -0,0 +1,106 @@ +--- +"@coinbase/onchainkit": minor +--- + +- **feat**: Moved the `onError` and `onSuccess` lifecycle listeners from the `` component to the `` component. By @zizzamia #1139 + +Breaking Changes +OnchainKit standardizes lifecycle listeners with three callbacks: `onError`, `onSuccess`, and `onStatus`. The `onError` and `onSuccess` callbacks handle only the `error` and `success` states, respectively. In contrast, the `onStatus` callback provides more granular phases of each component's experience. + +Before, we used `onError` and `onSuccess` in the `` component. +```ts +const handleOnError = useCallback((error) => { + console.log(error); +}, []); + +const handleOnSuccess = useCallback((response) => { + console.log(response); +}, []); + +... + + + + + + + + +``` + +After, we use `onStatus` in the `` component. +```ts +const handleOnStatus = useCallback((lifeCycleStatus: LifeCycleStatus) => { + console.log('Status:', lifeCycleStatus); +}, []); + +... + + + + + + + + +``` + +The `onStatus` callback will expose +```ts +export type LifeCycleStatus = + | { + statusName: 'init'; + statusData: null; + } + | { + statusName: 'error'; + statusData: SwapError; + } + | { + statusName: 'amountChange'; + statusData: null; + } + | { + statusName: 'transactionPending'; + statusData: null; + } + | { + statusName: 'transactionApproved'; + statusData: { + transactionHash: Hex; + transactionType: 'ERC20' | 'Permit2'; + }; + } + | { + statusName: 'success'; + statusData: { + transactionReceipt: TransactionReceipt; + }; + }; +``` diff --git a/CHANGELOG.md b/CHANGELOG.md index f4befeb30..7ffbfa8f7 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,8 +4,8 @@ ### Patch Changes -- 07c5af6: - **feat**: exported `buildSwapTransaction`, `getSwapQuote` and `getTokens` from API module. By @zizzamia #1133 - - **feat**: added `useSendCall` and `useSendCalls` hooks to support call-type transactions in `Transaction` component. By @0xAlec #1130 +- **feat**: exported `buildSwapTransaction`, `getSwapQuote` and `getTokens` from API module. By @zizzamia #1133 07c5af6 +- **feat**: added `useSendCall` and `useSendCalls` hooks to support call-type transactions in `Transaction` component. By @0xAlec #1130 ## 0.29.4 diff --git a/README.md b/README.md index e67c1178a..049529394 100644 --- a/README.md +++ b/README.md @@ -1,8 +1,8 @@

- - OnchainKit logo vibes + + OnchainKit logo vibes

@@ -40,6 +40,9 @@ For documentation and guides, visit [onchainkit.xyz](https://onchainkit.xyz/). +
+
+ ## Team and Community ☁️ 🌁 ☁️ - [@onchainkit](https://x.com/Onchainkit) diff --git a/playground/nextjs-app-router/components/demo/Swap.tsx b/playground/nextjs-app-router/components/demo/Swap.tsx index 8cb655368..7ddfb875d 100644 --- a/playground/nextjs-app-router/components/demo/Swap.tsx +++ b/playground/nextjs-app-router/components/demo/Swap.tsx @@ -1,5 +1,6 @@ import { ENVIRONMENT, ENVIRONMENT_VARIABLES } from '@/lib/constants'; import { + type LifeCycleStatus, Swap, SwapAmountInput, SwapButton, @@ -7,7 +8,7 @@ import { SwapToggleButton, } from '@coinbase/onchainkit/swap'; import type { Token } from '@coinbase/onchainkit/token'; -import { useContext } from 'react'; +import { useCallback, useContext } from 'react'; import { useAccount } from 'wagmi'; import { AppContext } from '../AppProvider'; @@ -57,6 +58,10 @@ function SwapComponent() { const swappableTokens = [degenToken, ethToken, usdcToken, wethToken]; + const handleOnStatus = useCallback((lifeCycleStatus: LifeCycleStatus) => { + console.log('Status:', lifeCycleStatus); + }, []); + return (
{address ? ( @@ -81,7 +86,11 @@ function SwapComponent() {
)} {address ? ( - +