docs: fix imports for default components (#1651)

coinbase · Nov 21, 2024 · 364d509 · 364d509
1 parent be6a22e
commit 364d509
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 73 deletions.
diff --git a/site/docs/pages/swap/swap.mdx b/site/docs/pages/swap/swap.mdx
@@ -22,71 +22,33 @@ The `SwapDefault` component is a simplified version of the `Swap` component, des
 If you'd like more customization, follow the implementation guide for our `Swap` component below.
 
 ```tsx twoslash
-import { Avatar, Name } from '@coinbase/onchainkit/identity';
 import { SwapDefault } from '@coinbase/onchainkit/swap'; // [!code focus]
-import { Wallet, ConnectWallet } from '@coinbase/onchainkit/wallet';
-import { useAccount } from 'wagmi';
 import type { Token } from '@coinbase/onchainkit/token';
 
-export default function SwapComponents() {
-  const { address } = useAccount();
-
-  const degenToken: Token = {
-    name: 'DEGEN',
-    address: '0x4ed4e862860bed51a9570b96d89af5e1b0efefed',
-    symbol: 'DEGEN',
-    decimals: 18,
-    image:
-      'https://d3r81g40ycuhqg.cloudfront.net/wallet/wais/3b/bf/3bbf118b5e6dc2f9e7fc607a6e7526647b4ba8f0bea87125f971446d57b296d2-MDNmNjY0MmEtNGFiZi00N2I0LWIwMTItMDUyMzg2ZDZhMWNm',
-    chainId: 8453,
-  };
-
-  const ethToken: Token = {
-    name: 'ETH',
-    address: '',
-    symbol: 'ETH',
-    decimals: 18,
-    image:
-      'https://wallet-api-production.s3.amazonaws.com/uploads/tokens/eth_288.png',
-    chainId: 8453,
-  };
-
-  const usdcToken: Token = {
-    name: 'USDC',
-    address: '0x833589fcd6edb6e08f4c7c32d4f71b54bda02913',
-    symbol: 'USDC',
-    decimals: 6,
-    image:
-      'https://d3r81g40ycuhqg.cloudfront.net/wallet/wais/44/2b/442b80bd16af0c0d9b22e03a16753823fe826e5bfd457292b55fa0ba8c1ba213-ZWUzYjJmZGUtMDYxNy00NDcyLTg0NjQtMWI4OGEwYjBiODE2',
-    chainId: 8453,
-  };
-
-  const wethToken: Token = {
-    name: 'Wrapped Ether',
-    address: '0x4200000000000000000000000000000000000006',
-    symbol: 'WETH',
-    decimals: 6,
-    image:
-      'https://d3r81g40ycuhqg.cloudfront.net/wallet/wais/47/bc/47bc3593c2dec7c846b66b7ba5f6fa6bd69ec34f8ebb931f2a43072e5aaac7a8-YmUwNmRjZDUtMjczYy00NDFiLWJhZDUtMzgwNjFmYWM0Njkx',
-    chainId: 8453,
-  };
-// ---cut-before---
-// omitted for brevity
-
-// the first token in array will be initially selected token // [!code focus]
-const swappableFromTokens: Token[] = [wethToken, usdcToken, ethToken, degenToken]; // [!code focus]
-const swappableToTokens: Token[] = [degenToken, ethToken, usdcToken, wethToken] // [!code focus]
-
-return ( // [!code focus]
-  <SwapDefault // [!code focus]
-    from={swappableFromTokens} // [!code focus]
-    to={swappableToTokens} // [!code focus]
-  /> // [!code focus]
-); // [!code focus]
-// ---cut-after---
-}
-
-
+const eth: Token = {
+  name: 'ETH',
+  address: '',
+  symbol: 'ETH',
+  decimals: 18,
+  image:
+    'https://wallet-api-production.s3.amazonaws.com/uploads/tokens/eth_288.png',
+  chainId: 8453,
+};
+
+const usdc: Token = {
+  name: 'USDC',
+  address: '0x833589fcd6edb6e08f4c7c32d4f71b54bda02913',
+  symbol: 'USDC',
+  decimals: 6,
+  image:
+    'https://d3r81g40ycuhqg.cloudfront.net/wallet/wais/44/2b/442b80bd16af0c0d9b22e03a16753823fe826e5bfd457292b55fa0ba8c1ba213-ZWUzYjJmZGUtMDYxNy00NDcyLTg0NjQtMWI4OGEwYjBiODE2',
+  chainId: 8453,
+};
+
+<SwapDefault // [!code focus]
+  from={[eth]} // [!code focus]
+  to={[usdc]} // [!code focus]
+/> // [!code focus]
 ```
 
 <App>

diff --git a/site/docs/pages/transaction/transaction.mdx b/site/docs/pages/transaction/transaction.mdx
@@ -42,8 +42,7 @@ If you'd like more customization, follow the implementation guide for our `Swap`
 ```tsx twoslash
 // @noErrors: 2580 2304 - Cannot find name 'process', Cannot find name 'contracts'
 import { TransactionDefault } from "@coinbase/onchainkit/transaction"
-// ---cut-before---
-// omitted for brevity
+
 <TransactionDefault contracts={contracts} />
 ```
 

diff --git a/site/docs/pages/wallet/wallet.mdx b/site/docs/pages/wallet/wallet.mdx
@@ -44,15 +44,7 @@ If you'd like more customization, follow the implementation guide for our `Walle
 ```tsx twoslash
 import { WalletDefault } from '@coinbase/onchainkit/wallet';
 
-export function WalletComponents() {
-  return (
-// ---cut-before---
-// omitted for brevity
-
-<WalletDefault /> // [!code focus]
-// ---cut-after---
-);
-}
+<WalletDefault />
 ```