chore: release

.changeset/twelve-grapes-remember.md

@@ -0,0 +1,14 @@
+---
+"@coinbase/onchainkit": minor
+---
+
+- **feat**: refactored the `<Transaction>` component's `onSuccess` handler to manage multiple receipts for various contracts, supporting both EOA and Smart Wallet scenarios.
+
+Breaking Changes
+When using `onSuccess` in the `<Transaction>` component, refactor the response to handle:
+
+```ts
+type TransactionResponse = {
+  transactionReceipts: TransactionReceipt[];
+};
+```

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-27.png">
-      <img alt="OnchainKit logo vibes" src="./site/docs/public/logo/v0-27.png" width="auto">
+      <source media="(prefers-color-scheme: dark)" srcset="./site/docs/public/logo/v0-28.png">
+      <img alt="OnchainKit logo vibes" src="./site/docs/public/logo/v0-28.png" width="auto">
     </picture>
   </a>
 </p>

site/docs/pages/transaction/transaction.mdx

@@ -66,7 +66,11 @@ export default function TransactionComponents() {
   ];
 
   return address ? (
-    <Transaction address={address} chainId={BASE_SEPOLIA_CHAIN_ID} contracts={contracts}>  // [!code focus]
+    <Transaction // [!code focus]
+      address={address} // [!code focus]
+      chainId={BASE_SEPOLIA_CHAIN_ID} // [!code focus]
+      contracts={contracts} // [!code focus]
+    > // [!code focus]
       <TransactionButton />  // [!code focus]
       <TransactionSponsor /> // [!code focus]
       <TransactionStatus>  // [!code focus]
@@ -129,15 +133,18 @@ export default function TransactionComponents() {
 ```tsx
 // ommited for brevity
 
-<Transaction address={address} contracts={contracts}>  // [!code focus]
-  <TransactionButton />  // [!code focus]
+<Transaction  // [!code focus]
+  address={address} // [!code focus]
+  contracts={contracts} // [!code focus]
+>  // [!code focus]
+  <TransactionButton /> // [!code focus]
   <TransactionSponsor /> // [!code focus]
-  <TransactionToast>  // [!code focus]
-    <TransactionToastIcon />  // [!code focus]
-    <TransactionToastLabel />  // [!code focus]
-    <TransactionToastAction />  // [!code focus]
-  </TransactionToast>  // [!code focus]
-</Transaction>  // [!code focus]
+  <TransactionToast> // [!code focus]
+    <TransactionToastIcon /> // [!code focus]
+    <TransactionToastLabel /> // [!code focus]
+    <TransactionToastAction /> // [!code focus]
+  </TransactionToast> // [!code focus]
+</Transaction> // [!code focus]
 ```
 
 <App>
@@ -263,9 +270,7 @@ The components are designed to work together hierarchically. For each component,
 ## Props
 
 - [`TransactionButtonReact`](/transaction/types#transactionbuttonreact)
-- [`TransactionContextType`](/transaction/types#transactioncontexttype)
 - [`TransactionError`](/transaction/types#transactionerror)
-- [`TransactionProviderReact`](/transaction/types#transactionproviderreact)
 - [`TransactionReact`](/transaction/types#transactionreact)
 - [`TransactionSponsorReact`](/transaction/types#transactionsponsorreact)
 - [`TransactionStatusReact`](/transaction/types#transactionstatusreact)

site/docs/pages/transaction/types.mdx

@@ -14,29 +14,6 @@ type TransactionButtonReact = {
 };
 ```
 
-## `TransactionContextType`
-
-```ts
-type TransactionContextType = {
-  address: Address; // The wallet address involved in the transaction.
-  chainId?: number; // The chainId for the transaction.
-  contracts: ContractFunctionParameters[]; // An array of contracts for the transaction.
-  errorMessage?: string; // An error message string if the transaction encounters an issue.
-  hasPaymaster?: boolean; // A boolean indicating if app has paymaster configured
-  isLoading: boolean; // A boolean indicating if the transaction is currently loading.
-  isToastVisible: boolean; // A boolean indicating if the transaction toast notification is visible.
-  onSubmit: () => void; // A function called when the transaction is submitted.
-  receipt?: TransactionReceipt; // The receipt of the transaction
-  setErrorMessage: (error: string) => void; // A function to set the error message for the transaction.
-  setIsToastVisible: (isVisible: boolean) => void; // A function to set the visibility of the transaction toast.
-  setTransactionId: (id: string) => void; // A function to set the transaction ID.
-  statusWriteContract?: string; // An optional string indicating the current status of the transaction.
-  statusWriteContracts?: string; // An optional string indicating the current status of the transaction.
-  transactionId?: string; // An optional string representing the ID of the transaction.
-  transactionHash?: string; // An optional string representing the hash of the transaction.
-};
-```
-
 ## `TransactionError`
 
 ```ts
@@ -46,18 +23,6 @@ type TransactionError = {
 };
 ```
 
-## `TransactionProviderReact`
-
-```ts
-type TransactionProviderReact = {
-  address: Address; // The wallet address to be provided to child components.
-  children: ReactNode; // The child components to be rendered within the provider component.
-  contracts: ContractFunctionParameters[]; // An array of contract function parameters provided to the child components.
-  onError?: (e: TransactionError) => void; // An optional callback function that handles errors within the provider.
-  onSuccess?: (response: TransactionResponse) => void; // An optional callback function that exposes the transaction receipts
-};
-```
-
 ## `TransactionReact`
 
 ```ts
@@ -77,7 +42,6 @@ type TransactionReact = {
 type TransactionResponse = {
   transactionReceipts: TransactionReceipt[];
 };
-
 ```
 
 ## `TransactionSponsorReact`

src/transaction/index.ts

@@ -1,7 +1,6 @@
 // 🌲☀🌲
 export { Transaction } from './components/Transaction';
 export { TransactionButton } from './components/TransactionButton';
-export { TransactionProvider } from './components/TransactionProvider';
 export { TransactionSponsor } from './components/TransactionSponsor';
 export { TransactionStatus } from './components/TransactionStatus';
 export { TransactionStatusAction } from './components/TransactionStatusAction';
@@ -12,9 +11,7 @@ export { TransactionToastAction } from './components/TransactionToastAction';
 export { TransactionToastLabel } from './components/TransactionToastLabel';
 export type {
   TransactionButtonReact,
-  TransactionContextType,
   TransactionError,
-  TransactionProviderReact,
   TransactionReact,
   TransactionSponsorReact,
   TransactionStatusReact,

src/transaction/types.ts

@@ -15,9 +15,6 @@ export type TransactionButtonReact = {
   text?: string; // An optional text to be displayed in the button component.
 };
 
-/**
- * Note: exported as public Type
- */
 export type TransactionContextType = {
   address: Address; // The wallet address involved in the transaction.
   chainId?: number; // The chainId for the transaction.
@@ -52,9 +49,6 @@ export type TransactionError = {
   error: string; // The error message providing details about the transaction error.
 };
 
-/**
- * Note: exported as public Type
- */
 export type TransactionProviderReact = {
   address: Address; // The wallet address to be provided to child components.
   capabilities?: WalletCapabilities; // Capabilities that a wallet supports (e.g. paymasters, session keys, etc).

src/version.ts

@@ -1 +1 @@
-export const version = '0.27.1';
+export const version = '0.28.0';