chore: release

.changeset/sweet-ghosts-act.md

@@ -0,0 +1,106 @@
+---
+"@coinbase/onchainkit": minor
+---
+
+- **feat**: Moved the `onError` and `onSuccess` lifecycle listeners from the `<SwapButton>` component to the `<Swap>` 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 `<SwapButton />` component.
+```ts
+const handleOnError = useCallback((error) => {
+ console.log(error);
+}, []);
+
+const handleOnSuccess = useCallback((response) => {
+ console.log(response);
+}, []);
+
+...
+
+<Swap address={address}>
+ <SwapAmountInput
+ label="Sell"
+ swappableTokens={swappableTokens}
+ token={ETHToken}
+ type="from"
+ />
+ <SwapToggleButton />
+ <SwapAmountInput
+ label="Buy"
+ swappableTokens={swappableTokens}
+ token={USDCToken}
+ type="to"
+ />
+ <SwapButton
+ onError={handleOnError}
+ onSuccess={handleOnSuccess}
+ />
+ <SwapMessage />
+</Swap> 
+```
+
+After, we use `onStatus` in the `<Swap />` component.
+```ts
+const handleOnStatus = useCallback((lifeCycleStatus: LifeCycleStatus) => {
+ console.log('Status:', lifeCycleStatus);
+}, []);
+
+...
+
+<Swap
+ address={address}
+ onStatus={handleOnStatus}
+>
+ <SwapAmountInput
+ label="Sell"
+ swappableTokens={swappableTokens}
+ token={ETHToken}
+ type="from"
+ />
+ <SwapToggleButton />
+ <SwapAmountInput
+ label="Buy"
+ swappableTokens={swappableTokens}
+ token={USDCToken}
+ type="to"
+ />
+ <SwapButton />
+ <SwapMessage />
+</Swap>
+```
+
+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;
+ };
+ };
+```

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
 

README.md

@@ -1,8 +1,8 @@
 <p align="center">
  <a href="https://onchainkit.xyz">
  <picture>
- <source media="(prefers-color-scheme: dark)" srcset="./site/docs/public/logo/v0-29.png">
- <img alt="OnchainKit logo vibes" src="./site/docs/public/logo/v0-29.png" width="auto">
+ <source media="(prefers-color-scheme: dark)" srcset="./site/docs/public/logo/v0-30.png">
+ <img alt="OnchainKit logo vibes" src="./site/docs/public/logo/v0-30.png" width="auto">
  </picture>
  </a>
 </p>
@@ -40,6 +40,9 @@
 
 For documentation and guides, visit [onchainkit.xyz](https://onchainkit.xyz/).
 
+<br />
+<br />
+
 ## Team and Community ☁️ 🌁 ☁️
 
 - [@onchainkit](https://x.com/Onchainkit)

playground/nextjs-app-router/components/demo/Swap.tsx

@@ -1,13 +1,14 @@
 import { ENVIRONMENT, ENVIRONMENT_VARIABLES } from '@/lib/constants';
 import {
+ type LifeCycleStatus,
  Swap,
  SwapAmountInput,
  SwapButton,
  SwapMessage,
  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 (
  <div className="relative h-full w-full">
  {address ? (
@@ -81,7 +86,11 @@ function SwapComponent() {
  </div>
  )}
  {address ? (
- <Swap address={address} className="border bg-[#ffffff]">
+ <Swap
+ address={address}
+ className="border bg-[#ffffff]"
+ onStatus={handleOnStatus}
+ >
  <SwapAmountInput
  label="Sell"
  swappableTokens={swappableTokens}

src/version.ts

@@ -1 +1 @@
-export const version = '0.29.5';
+export const version = '0.30.0';