fix: Swap type (#532)

.changeset/warm-ties-wonder.md

@@ -0,0 +1,5 @@
+---
+"@coinbase/onchainkit": patch
+---
+
+- **fix**: 

site/docs/pages/swap/swap.mdx

@@ -5,18 +5,26 @@ import App from '../App';
 
 ### Alert! Component is actively in development. Stay tuned for upcoming releases.
 
-The `Swap` component is a comprehensive interface for users to execute token swaps. It includes two instances of the `SwapAmountInput` component, enabling users to specify the amount of tokens to sell and buy. Additionally, the component features a "Swap" button for initiating the transaction.
+The `Swap` component is a comprehensive interface for users to execute token swaps.
+
+It includes two instances of the `SwapAmountInput` component, enabling users to specify
+the amount of tokens to sell and buy. Additionally, the component features a "Swap" button
+for initiating the transaction.
 
 ## Usage
 
 ```tsx [code]
-<Swap account={account} onError={onError}>
+import { Swap, SwapAmountInput, SwapButton } from '@coinbase/onchainkit/swap';
+
+const address = '0x1234567890';
+
+<Swap address={address} onError={onError}>
   <SwapAmountInput label="Sell" token={fromToken} type="from" />
   <SwapAmountInput label="Buy" token={toToken} type="to" />
   <SwapButton onError={onError} onSubmit={onSubmit} />
-</Swap>
+</Swap>;
 ```
 
 ## Props
 
-[`SwapReact`](/swap/types#SwapReact)
+[`SwapReact`](/swap/types#swapreact)

site/docs/pages/swap/types.mdx

@@ -72,7 +72,7 @@ type SwapError = {
 
 ```ts
 type SwapReact = {
-  account: Account; // Ethereum account
+  address: Address; // Connected address from connector.
   children: ReactNode; // Children components to render
   onError?: (error: SwapError) => void; // Callback when swap is unsuccessful
   onSuccess?: (swapTransaction: BuildSwapTransaction) => void; // Callback when swap is successful

site/package.json

@@ -8,7 +8,7 @@
     "preview": "vocs preview"
   },
   "dependencies": {
-    "@coinbase/onchainkit": "0.20.1",
+    "@coinbase/onchainkit": "0.20.4",
     "@tanstack/react-query": "^5.36.0",
     "@types/react": "latest",
     "graphql": "14",

site/yarn.lock

@@ -343,9 +343,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@coinbase/onchainkit@npm:0.20.1":
-  version: 0.20.1
-  resolution: "@coinbase/onchainkit@npm:0.20.1"
+"@coinbase/onchainkit@npm:0.20.4":
+  version: 0.20.4
+  resolution: "@coinbase/onchainkit@npm:0.20.4"
   dependencies:
     clsx: "npm:^2.1.1"
     tailwind-merge: "npm:^2.3.0"
@@ -359,7 +359,7 @@ __metadata:
     permissionless: ^0.1.29
     react: ^18
     react-dom: ^18
-  checksum: 01ba6b34aa1516b6aa5f68d84142e94c908bcc0430909637ae0e5b2dc773f010fd0bca1dc9d808dd40f8e4fcfae62435f2a8c74a5cfd0b0230292e0e3a045def
+  checksum: fa30dccf1c6069ff952085f5542aec2049635f78bcbf0f56052839e633de3af99a5eaef3da6f9336ef1d99fadbeb9197d89a4a4220c71f25e2c152cf01e47948
   languageName: node
   linkType: hard
 
@@ -7675,7 +7675,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "onchainkit@workspace:."
   dependencies:
-    "@coinbase/onchainkit": "npm:0.20.1"
+    "@coinbase/onchainkit": "npm:0.20.4"
     "@tanstack/react-query": "npm:^5.36.0"
     "@types/react": "npm:latest"
     graphql: "npm:14"

src/swap/components/Swap.tsx

@@ -6,7 +6,7 @@ import { isSwapError } from '../utils';
 import type { SwapError, SwapReact } from '../types';
 import type { Token } from '../../token';
 
-export function Swap({ account, children, onError }: SwapReact) {
+export function Swap({ address, children, onError }: SwapReact) {
   const [fromAmount, setFromAmount] = useState('');
   const [fromToken, setFromToken] = useState<Token>();
   const [toAmount, setToAmount] = useState('');
@@ -66,7 +66,7 @@ export function Swap({ account, children, onError }: SwapReact) {
 
   const value = useMemo(() => {
     return {
-      account,
+      address,
       fromAmount,
       fromToken,
       setFromAmount: handleFromAmountChange,
@@ -77,7 +77,7 @@ export function Swap({ account, children, onError }: SwapReact) {
       toToken,
     };
   }, [
-    account,
+    address,
     fromAmount,
     fromToken,
     handleFromAmountChange,

src/swap/components/SwapAmountInput.test.tsx

@@ -14,18 +14,14 @@ jest.mock('../../token', () => ({
   TokenChip: jest.fn(() => <div>TokenChip</div>),
 }));
 
-const mockAccount = {
-  address: '0x5FbDB2315678afecb367f032d93F642f64180aa3' as Address,
-} as Account;
-
 const mockContextValue = {
   fromAmount: '10',
   setFromAmount: jest.fn(),
   setFromToken: jest.fn(),
   setToAmount: jest.fn(),
   setToToken: jest.fn(),
   toAmount: '20',
-  account: mockAccount,
+  address: '0x5FbDB2315678afecb367f032d93F642f64180aa3' as Address,
 } as SwapContextType;
 
 const mockToken: Token = {

src/swap/components/SwapButton.tsx

@@ -6,14 +6,14 @@ import { SwapContext } from '../context';
 import type { SwapButtonReact, SwapError } from '../types';
 
 export function SwapButton({ onError, onSubmit }: SwapButtonReact) {
-  const { account, fromAmount, fromToken, toToken } = useContext(SwapContext);
+  const { address, fromAmount, fromToken, toToken } = useContext(SwapContext);
 
   const handleSubmit = useCallback(async () => {
-    if (account && fromToken && toToken && fromAmount) {
+    if (address && fromToken && toToken && fromAmount) {
       try {
         const response = await buildSwapTransaction({
           amount: fromAmount,
-          fromAddress: account.address,
+          fromAddress: address,
           from: fromToken,
           to: toToken,
         });
@@ -26,7 +26,7 @@ export function SwapButton({ onError, onSubmit }: SwapButtonReact) {
         onError?.(error as SwapError);
       }
     }
-  }, [account, fromAmount, fromToken, toToken]);
+  }, [address, fromAmount, fromToken, toToken]);
 
   return (
     <div className="w-full p-4">

src/swap/types.ts

@@ -105,7 +105,7 @@ export type SwapButtonReact = {
 };
 
 export type SwapContextType = {
-  account: Account;
+  address: Address; // Connected address from connector.
   fromAmount: string;
   fromToken?: Token;
   setFromAmount: (a: string) => void;
@@ -142,7 +142,7 @@ export type SwapParams = {
  * Note: exported as public Type
  */
 export type SwapReact = {
-  account: Account;
+  address: Address; // Connected address from connector.
   children: ReactNode;
   onError?: (error: SwapError) => void;
 };