update docs

coinbase · Jun 11, 2024 · a8782b4 · a8782b4
1 parent 5cea3aa
commit a8782b4
Show file tree

Hide file tree

Showing 2 changed files with 77 additions and 1 deletion.
diff --git a/site/docs/pages/swap/swap.mdx b/site/docs/pages/swap/swap.mdx
@@ -4,7 +4,59 @@ import SwapContainer from '../../components/SwapContainer.tsx';
 
 # `<Swap />`
 
-The `Swap` component...
+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. The `SwapTokensButton` component facilitates the swapping of selected tokens with a single click, dynamically interchanging the tokens in the "Sell" and "Buy" fields. Additionally, the component features a "Swap" button for initiating the transaction.
+
+## Usage
+
+:::code-group
+
+```tsx [code]
+<Swap
+  fromAmount={fromAmount}
+  fromToken={fromToken}
+  fromTokenBalance={fromTokenBalance}
+  setFromAmount={setFromAmount}
+  setFromToken={setFromToken}
+  setToToken={setToToken}
+  swappableTokens={[
+    {
+      name: 'Ethereum',
+      address: '',
+      symbol: 'ETH',
+      decimals: 18,
+      image: 'https://wallet-api-production.s3.amazonaws.com/uploads/tokens/eth_288.png',
+      chainId: 8453,
+    },
+    {
+      name: 'USDC',
+      address: '0x833589fcd6edb6e08f4c7c32d4f71b54bda02913',
+      symbol: 'USDC',
+      decimals: 6,
+      image:
+        'https://d3r81g40ycuhqg.cloudfront.net/wallet/wais/44/2b/442b80bd16af0c0d9b22e03a16753823fe826e5bfd457292b55fa0ba8c1ba213-ZWUzYjJmZGUtMDYxNy00NDcyLTg0NjQtMWI4OGEwYjBiODE2',
+      chainId: 8453,
+    },
+    {
+      name: 'Dai',
+      address: '0x50c5725949a6f0c72e6c4a641f24049a917db0cb',
+      symbol: 'DAI',
+      decimals: 18,
+      image:
+        'https://d3r81g40ycuhqg.cloudfront.net/wallet/wais/d0/d7/d0d7784975771dbbac9a22c8c0c12928cc6f658cbcf2bbbf7c909f0fa2426dec-NmU4ZWViMDItOTQyYy00Yjk5LTkzODUtNGJlZmJiMTUxOTgy',
+      chainId: 8453,
+    },
+  ]}
+  toAmount={toAmount}
+  toToken={toToken}
+  toTokenBalance={toTokenBalance}
+/>
+```
+
+```html [return html]
+
+```
+
+:::
 
 <App>
   <SwapContainer>
@@ -17,6 +69,7 @@ The `Swap` component...
       setToToken,
       toAmount,
       toToken,
+      toTokenBalance,
     ) => (
       <Swap
         fromAmount={fromAmount}
@@ -55,7 +108,12 @@ The `Swap` component...
         ]}
         toAmount={toAmount}
         toToken={toToken}
+        toTokenBalance={toTokenBalance}
       />
     )}
   </SwapContainer>
 </App>
+
+## Props
+
+[`SwapReact`](/swap/types#SwapReact)
diff --git a/site/docs/pages/swap/types.mdx b/site/docs/pages/swap/types.mdx
@@ -19,3 +19,21 @@ type SwapAmountInputReact = {
   tokenBalance?: string; // Amount of selected token user owns
 };
 ```
+
+## `SwapReact`
+
+```ts
+export type SwapReact = {
+  fromAmount?: string; // The amount of the token to be sold
+  fromToken?: Token; // The token that the user is selling
+  fromTokenBalance?: string; // The balance of the token that the user is selling
+  onSubmit: () => void; // A callback function to submit the swap transaction
+  setFromAmount: (amount: string) => void; // A callback function to set the amount of the token to be sold
+  setFromToken: (token: Token) => void; // A callback function to set the token to be sold
+  setToToken: (token: Token) => void; // A callback function to set the token to be bought
+  swappableTokens: Token[]; // An array of tokens available for swapping
+  toAmount?: string; // The amount of the token to be bought
+  toToken?: Token; // The token that the user is buying
+  toTokenBalance?: string; // The balance of the token that the user is buying
+};
+```