docs: latest (#1144)

coinbase · Aug 23, 2024 · 4f0bb02 · 4f0bb02
1 parent 5a856fc
commit 4f0bb02
Show file tree

Hide file tree

Showing 3 changed files with 109 additions and 110 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,111 +4,110 @@
 
 ### Minor Changes
 
-- ed2379e: - **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;
-        };
+- **feat**: Moved the `onError` and `onSuccess` lifecycle listeners from the `<SwapButton>` component to the `<Swap>` component. By @zizzamia #1139 ed2379e
+
+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;
+      };
+    };
+```
 
 ## 0.29.5
 

diff --git a/site/package.json b/site/package.json
@@ -8,7 +8,7 @@
     "preview": "vocs preview"
   },
   "dependencies": {
-    "@coinbase/onchainkit": "0.29.5",
+    "@coinbase/onchainkit": "0.30.0",
     "@types/react": "latest",
     "@vercel/edge": "^1.1.1",
     "permissionless": "^0.1.29",

diff --git a/site/yarn.lock b/site/yarn.lock
@@ -479,9 +479,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@coinbase/onchainkit@npm:0.29.5":
-  version: 0.29.5
-  resolution: "@coinbase/onchainkit@npm:0.29.5"
+"@coinbase/onchainkit@npm:0.30.0":
+  version: 0.30.0
+  resolution: "@coinbase/onchainkit@npm:0.30.0"
   dependencies:
     "@rainbow-me/rainbowkit": "npm:^2.1.3"
     "@tanstack/react-query": "npm:^5"
@@ -496,7 +496,7 @@ __metadata:
     "@xmtp/frames-validator": ^0.6.0
     react: ^18
     react-dom: ^18
-  checksum: f815fec61a3ca96ce0278ccf193024b669eff8adf13bb009d065f14bb4d75fbbb2890e805210b9f991981e0ae13400275bd59ca6a86fd568575e56dee1ef7a44
+  checksum: a9df7be2ad2cb07c058271c34577706acfbf4f6ad20a1e93e43ca15f528d9c17ed706d89d3527e63ef048663059be8d54859c5b435fbd45da6ef86a33c5f0fcb
   languageName: node
   linkType: hard
 
@@ -7836,7 +7836,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "onchainkit@workspace:."
   dependencies:
-    "@coinbase/onchainkit": "npm:0.29.5"
+    "@coinbase/onchainkit": "npm:0.30.0"
     "@types/react": "npm:latest"
     "@vercel/edge": "npm:^1.1.1"
     permissionless: "npm:^0.1.29"