docs: updated

site/docs/pages/getting-started.mdx

@@ -66,13 +66,3 @@ import '@coinbase/onchainkit/styles.css';
 ```
 
 ::::
-
-OnchainKit is divided into various theme utilities and components that are available for your use:
-
-- [Frame](/frame/introduction)
-- [Identity](/identity/introduction)
-- [Swap](/swap/introduction)
-- [Token](/token/introduction)
-- [Wallet](/wallet/introduction)
-- [Farcaster](/farcaster/introduction)
-- [XMTP](/xmtp/introduction)

site/docs/pages/swap/swap-amount-input.mdx

@@ -4,7 +4,9 @@ import SwapAmountInputContainer from '../../components/SwapAmountInputContainer.
 
 # `<SwapAmountInput />`
 
-The `SwapAmountInput` component is a stylized input field designed for users to specify the amount of a particular token they wish to swap. This component integrates the `TokenSelector` component to allow users to select different tokens.
+The `SwapAmountInput` component is a stylized input field designed for users to specify the amount of a particular token they wish to swap.
+
+This component integrates the `TokenSelector` component to allow users to select different tokens.
 
 ## Usage
 

site/docs/pages/token/token-select-dropdown.mdx

@@ -1,4 +1,5 @@
 {/* import { TokenSelectDropdown } from '../../../../src/token'; */}
+import { TokenSelectDropdown } from '@coinbase/onchainkit/token';
 import TokenSelectorContainer from '../../components/TokenSelectorContainer.tsx';
 import App from '../App';
 
@@ -142,6 +143,45 @@ The `TokenSelectDropdown` component is a dropdown component that selects a token
 
 :::
 
+<App>
+  <TokenSelectorContainer>
+    {(token, setToken) => (
+      <TokenSelectDropdown
+        token={token}
+        setToken={setToken}
+        options={[
+          {
+            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,
+          },
+        ]}
+      />
+    )}
+  </TokenSelectorContainer>
+</App>
+
 ## Props
 
 [`TokenSelectDropdownReact`](/token/types#tokenselectdropdownreact)

site/docs/pages/wallet/introduction.mdx

@@ -98,12 +98,6 @@ const wagmiConfig = createConfig({
 });
 
 function App({ children }: { children: ReactNode }) {
-  return (
-    <WagmiProvider config={wagmiConfig}>
-      {' '}
-      // [!code focus]
-      {children}
-    </WagmiProvider> // [!code focus]
-  );
+  return <WagmiProvider config={wagmiConfig}>{children}</WagmiProvider>;
 }
 ```

site/docs/pages/wallet/is-wallet-a-smart-wallet.mdx

@@ -7,7 +7,7 @@ The `isWalletASmartWallet` utility is designed to verify if a given sender addre
 :::code-group
 
 ```tsx [code]
-import { isWalletASmartWallet } from '@coinbase/onchainkit/wallet'; // [!code focus]
+import { isWalletASmartWallet } from '@coinbase/onchainkit/wallet';
 import { http } from 'viem';
 import { baseSepolia } from 'viem/chains';
 import type { UserOperation } from 'permissionless';
@@ -21,7 +21,6 @@ export const publicClient = createPublicClient({
 const userOperation = { sender: '0x123' } as UserOperation<'v0.6'>;
 
 if (isWalletASmartWallet({ client: publicClient, userOp: userOperation })) {
-  // [!code focus]
   console.log('The sender address is a valid smart wallet proxy.');
 } else {
   console.log('The sender address is not a valid smart wallet proxy.');

site/package.json

@@ -8,27 +8,18 @@
     "preview": "vocs preview"
   },
   "dependencies": {
-    "@coinbase/onchainkit": "0.19.6",
-    "@coinbase/wallet-sdk": "^4.0.0",
+    "@coinbase/onchainkit": "0.20.0",
     "@tanstack/react-query": "^5.36.0",
     "@types/react": "latest",
-    "clsx": "^2.1.1",
     "graphql": "14",
     "graphql-request": "6",
     "permissionless": "^0.1.29",
     "react": "18",
     "react-dom": "18",
     "react-farcaster-embed": "^1.4.7",
-    "tailwind-merge": "^2.3.0",
-    "tailwindcss": "^3.4.1",
     "tar": "^7.0.0",
     "typescript": "latest",
-    "viem": "^2.10.9",
     "vite": "^5.2.8",
-    "vocs": "1.0.0-alpha.52",
-    "wagmi": "^2.9.2"
-  },
-  "resolutions": {
-    "@coinbase/wallet-sdk": "npm:@coinbase/[email protected]"
+    "vocs": "1.0.0-alpha.52"
   }
 }

site/sidebar.ts

@@ -45,7 +45,6 @@ export const sidebar = [
   {
     text: 'Frame',
     items: [
-      { text: 'Introduction', link: '/frame/introduction' },
       {
         text: 'Components',
         items: [
@@ -139,7 +138,6 @@ export const sidebar = [
   {
     text: 'Swap',
     items: [
-      { text: 'Introduction', link: '/swap/introduction' },
       {
         text: 'Components',
         items: [