chore: release (#1139)

.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';