docs: update structure for Wallet docs

site/docs/components/Code.tsx

@@ -0,0 +1,26 @@
+import { cn } from '../../utils/index.ts';
+
+interface CodeProps {
+  children: React.ReactNode;
+  className?: string;
+  variant?: 'blue' | 'gray' | 'ghost';
+}
+
+export function Code({ children, variant = 'gray', className }: CodeProps) {
+  return (
+    <code
+      className={cn(
+        'box-border h-fit rounded-[calc(.5px+.2em)] px-1 py-0.5 font-mono text-[0.8rem] leading-tight',
+        variant === 'blue' &&
+          'bg-blue-100/60 text-blue-500 dark:bg-blue-900/60 dark:text-blue-400',
+        variant === 'gray' &&
+          'bg-gray-200/60 text-gray-600 dark:bg-gray-800/60 dark:text-gray-300',
+        variant === 'ghost' &&
+          'bg-transparent text-gray-600 dark:text-gray-300',
+        className,
+      )}
+    >
+      {children}
+    </code>
+  );
+}

site/docs/components/PropsTable.tsx

@@ -0,0 +1,105 @@
+// biome-ignore lint/style/noNamespaceImport: Recommended by Radix
+import * as Popover from '@radix-ui/react-popover';
+import { Code } from './Code.tsx';
+import InfoIcon from './svg/infoIcon.tsx';
+export type PropDef = {
+  name: string;
+  required?: boolean;
+  default?: string | boolean | undefined;
+  type: string;
+  typeSimple?: string;
+  description?: string | React.ReactNode;
+};
+
+const FIXED_PROP_COLUMN_WIDTH = '37%';
+
+const popoverContentClassName =
+  'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 mx-2 rounded-md border border-gray-200 bg-white p-3 text-sm shadow-lg data-[state=closed]:animate-out data-[state=open]:animate-in dark:border-stone-800 dark:bg-stone-900';
+
+const PropsTable = ({ data }: { data: PropDef[] }) => {
+  return (
+    <table className="w-full">
+      <thead>
+        <tr className="border-b">
+          <th
+            className="pb-1 text-left font-normal"
+            style={{ width: FIXED_PROP_COLUMN_WIDTH }}
+          >
+            Prop
+          </th>
+          <th className="w-[43%] pb-1 text-left font-normal">Type</th>
+          <th className="w-1/5 pb-1 text-left font-normal">Default</th>
+        </tr>
+      </thead>
+      <tbody>
+        {data.map((prop) => (
+          <tr key={prop.name} className="text-sm">
+            <td className="py-2">
+              <div className="inline-flex gap-1">
+                <Code variant="blue">{prop.name}</Code>
+                {prop.description && (
+                  <Popover.Root>
+                    <Popover.Trigger>
+                      <InfoIcon className="size-[14px] text-[#4c4c4c] dark:text-stone-400" />
+                    </Popover.Trigger>
+                    <Popover.Portal>
+                      <Popover.Content
+                        side="top"
+                        align="center"
+                        className={popoverContentClassName}
+                        style={{ maxWidth: 350 }}
+                        onOpenAutoFocus={(event) => {
+                          event.preventDefault();
+                          (event.currentTarget as HTMLElement)?.focus();
+                        }}
+                      >
+                        <div>{prop.description}</div>
+                      </Popover.Content>
+                    </Popover.Portal>
+                  </Popover.Root>
+                )}
+              </div>
+            </td>
+            <td>
+              <div className="inline-flex gap-1">
+                <Code variant="gray">{prop.typeSimple ?? prop.type}</Code>
+                {Boolean(prop.typeSimple) && Boolean(prop.type) && (
+                  <Popover.Root>
+                    <Popover.Trigger>
+                      <InfoIcon className="size-[14px] text-[#4c4c4c] dark:text-stone-400" />
+                    </Popover.Trigger>
+                    <Popover.Content
+                      side="top"
+                      align="center"
+                      className={popoverContentClassName}
+                    >
+                      <div
+                        style={{
+                          paddingTop: 'var(--inset-padding-top)',
+                          paddingRight: 'var(--inset-padding-right)',
+                          paddingBottom: 'var(--inset-padding-bottom)',
+                          paddingLeft: 'var(--inset-padding-left)',
+                        }}
+                      >
+                        <Code variant="ghost">{prop.type}</Code>
+                      </div>
+                    </Popover.Content>
+                  </Popover.Root>
+                )}
+              </div>
+            </td>
+            <td>
+              {prop?.default ? (
+                <Code variant="gray">{prop?.default}</Code>
+              ) : (
+                <span>-</span>
+              )}
+            </td>
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+};
+
+export default PropsTable;

site/docs/components/svg/infoIcon.tsx

@@ -0,0 +1,23 @@
+import { cn } from '../../../utils/index.ts';
+
+const InfoIcon = ({ className }: { className?: string }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    className={cn(className)}
+    role="img"
+    aria-labelledby="info-title"
+  >
+    <title id="info-title">Info</title>
+    <circle cx="12" cy="12" r="10" />
+    <line x1="12" y1="16" x2="12" y2="12" />
+    <line x1="12" y1="8" x2="12.01" y2="8" />
+  </svg>
+);
+
+export default InfoIcon;

site/docs/pages/wallet/wallet.mdx

@@ -24,6 +24,7 @@ import {
 import { color } from '@coinbase/onchainkit/theme';
 import AppWithRK from '../../components/AppWithRK';
 import WalletComponents from '../../components/WalletComponents';
+import PropsTable from '../../components/PropsTable';
 
 # `<Wallet />`
 
@@ -61,6 +62,147 @@ export function WalletComponents() {
 </WalletComponents>
 
 
+## Anatomy
+```tsx twoslash
+import {
+  ConnectWallet,
+  Wallet,
+  WalletDropdown,
+  WalletDropdownBasename,
+  WalletDropdownLink,
+  WalletDropdownFundLink,
+  WalletDropdownDisconnect,
+} from '@coinbase/onchainkit/wallet';
+import { Identity } from '@coinbase/onchainkit/identity';
+import { Avatar, Name, Address, EthBalance } from '@coinbase/onchainkit/identity';
+
+
+// ---cut-before---
+<Wallet >
+  <ConnectWallet />
+  <WalletDropdown >
+    <Identity address="0x838aD0EAE54F99F1926dA7C3b6bFbF617389B4D9" >
+      <Avatar />
+      <Name />
+      <Address />
+      <EthBalance />
+    </Identity>
+    <WalletDropdownBasename />
+    <WalletDropdownLink href="https://keys.coinbase.com">
+      Wallet
+    </WalletDropdownLink>
+    <WalletDropdownFundLink />
+    <WalletDropdownDisconnect />
+  </WalletDropdown>
+</Wallet>
+// ---cut-after---
+```
+
+## API Reference
+
+### Wallet
+Serves as the main container for all wallet-related components.
+
+<PropsTable data={[{
+  name: 'children',
+  typeSimple: 'React.ReactNode',
+description: 'Content of the `Wallet` component',
+}, ]} />
+
+### ConnectWallet
+Handles the wallet connection process.
+
+<PropsTable data={[{
+  name: 'children?',
+  type: 'React.ReactNode',
+description: 'Used to display customized content when the wallet is connected',
+}, {
+  name: 'className?',
+  typeSimple: 'string',
+  description: 'className override for the button element',
+}, {
+  name: "text",
+  type: "string",
+  description: <>The text to display on the connect button. <br /><br /> Note: Prefer using `ConnectWalletText` component instead as this will be deprecated in a future version.</>,
+}, {
+  name: "withWalletAggregator?",
+  typeSimple: "boolean",
+  default: "false",
+  description: "Enables RainbowKit's wallet aggregator",
+}, {
+  name: "onConnect",
+  typeSimple: 'function',
+  type: "() => void",
+  description: 'Callback function that triggers when the user connects their wallet',
+}]} />
+
+### WalletDropdown
+Contains additional wallet information and options. Place inside `<Wallet />` component.
+
+<PropsTable data={[{
+  name: 'children',
+  typeSimple: 'React.ReactNode',
+  description: 'Content of the `WalletDropdown` component',
+}, {
+  name: 'className?',
+  typeSimple: 'string',
+  description: 'className override for top div element',
+}]} />
+
+### WalletDropdownBasename
+Displays the user's [Basename](https://www.base.org/names) within the dropdown.
+
+<PropsTable data={[{
+  name: 'className?',
+  typeSimple: 'string',
+  description: 'className override for the element',
+}]} />
+
+### WalletDropdownLink
+Creates a custom link within the dropdown.
+
+<PropsTable data={[{
+  name: 'children',
+  typeSimple: 'React.ReactNode',
+  description: 'Content of the `WalletDropdownLink` component',
+}, 
+{
+  name: 'className?',
+  typeSimple: 'string',
+  description: 'className override for the element',
+}, {
+  name: 'icon?',
+  typeSimple: 'string',
+  description: 'Icon to display on the `WalletDropdownLink` component',  
+}, {
+  name: 'href',
+  typeSimple: 'string',
+  description: 'Link destination URL',
+}, {
+  name: 'rel?',
+  typeSimple: 'string',
+  description: 'Relationship attribute for the link element',
+}, {
+  name: 'target?',
+  typeSimple: 'string',
+  description: 'Target attribute for the link element',
+}]} />
+
+
+### WalletDropdownDisconnect
+Displays the disconnect button within the dropdown.
+
+<PropsTable data={[{
+  name: 'className?',
+  typeSimple: 'string',
+  description: 'className override for top div element',
+}, {
+  name: "text?",
+  typeSimple: "string",
+  description: "Text override for the button",
+  default: '"Disconnect"',
+}]} />
+
 ## Walkthrough
 
 ::::steps
@@ -504,38 +646,15 @@ export function WalletComponents() {
     <ConnectWallet onConnect={() => {signMessage({ message })}} />
   );
 }
-
 ```
 
-## Components
-
-The components are designed to work together hierarchically. For each component, ensure the following:
-
-- `<Wallet />` - Serves as the main container for all wallet-related components.
-- `<ConnectWallet />` - Handles the wallet connection process. Place child components inside to customize the connect button appearance.
-- `<WalletDropdown />` - Contains additional wallet information and options. Place inside the `<Wallet />` component.
-- `<Identity />` - Displays user identity information. Place inside `<WalletDropdown />` for a complete profile view.
-- `<WalletDropdownBasename />` - Displays the user's Basename within the dropdown.
-- `<WalletDropdownLink />` - Creates a custom link within the dropdown. Use the `icon` prop to add an icon, and `href` to specify the destination.
-- `<WalletDropdownDisconnect />` - Provides a disconnect option within the dropdown.
+## Customization
 
 Additional components for customizing the wallet interface include:
 
-- `<Avatar />` - Displays the user's avatar image.
-- `<Name />` - Shows the user's name or ENS.
-- `<Badge />` - Can be used to display additional user status or information.
-- `<Address />` - Shows the user's wallet address.
-- `<EthBalance />` - Displays the user's ETH balance.
-
-The Wallet component automatically handles the wallet connection state and updates the UI accordingly. 
-You need to wrap your application or relevant part of it with these components 
-to provide a complete wallet interaction experience.
-
-## Component types
-
-- [`WalletReact`](/wallet/types#walletreact)
-- [`ConnectWalletReact`](/wallet/types#connectwalletreact)
-- [`WalletDropdownReact`](/wallet/types#walletdropdownreact)
-- [`WalletDropdownBasenameReact`](/wallet/types#walletdropdownbasenamereact)
-- [`WalletDropdownDisconnectReact`](/wallet/types#walletdropdowndisconnectreact)
-- [`WalletDropdownLinkReact`](/wallet/types#walletdropdownlinkreact)
+- [`<Identity />`](/identity/identity) - Displays user identity information. Place inside `<WalletDropdown />` for a complete profile view.
+- [`<Avatar />`](/identity/avatar) - Displays the user's avatar image.
+- [`<Name />`](/identity/name) - Shows the user's name or ENS.
+- [`<Badge />`](/identity/badge) - Can be used to display additional user status or information.
+- [`<Address />`](/identity/address) - Shows the user's wallet address.
+- `<EthBalance />` - Displays the user's ETH balance.

site/package.json

@@ -10,14 +10,18 @@
   },
   "dependencies": {
     "@coinbase/onchainkit": "0.35.5",
+    "@radix-ui/react-popover": "^1.1.2",
     "@types/react": "latest",
     "@vercel/edge": "^1.1.1",
+    "clsx": "^2.1.1",
     "express": "^4.21.1",
     "permissionless": "^0.1.29",
     "react": "18",
     "react-dom": "18",
     "react-farcaster-embed": "^1.4.7",
     "sitemap-generator": "^8.5.1",
+    "tailwind-merge": "^2.5.4",
+    "tailwindcss-animate": "^1.0.7",
     "tar": "^7.0.0",
     "typescript": "latest",
     "vite": "^5.3.6",

site/tailwind.config.js

@@ -42,5 +42,5 @@ export default {
       },
     },
   },
-  plugins: [],
+  plugins: [require('tailwindcss-animate')],
 };

site/utils/index.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}