docs: Update connect wallet docs (#740)

coinbase · Jun 27, 2024 · 0888a68 · 0888a68
1 parent 29a21f8
commit 0888a68
Show file tree

Hide file tree

Showing 9 changed files with 103 additions and 175 deletions.
diff --git a/.changeset/six-crabs-teach.md b/.changeset/six-crabs-teach.md
@@ -0,0 +1,5 @@
+---
+"@coinbase/onchainkit": patch
+---
+
+- **docs**: Update Connect Wallet docs and homepage example. By @cpcramer #740
diff --git a/site/docs/components/WalletDemo.tsx b/site/docs/components/WalletDemo.tsx
@@ -19,7 +19,7 @@ import { color } from '@coinbase/onchainkit/theme';
 
 export function WalletDemo() {
   return (
-    <div className="flex justify-end">
+    <div className="mb-16 flex justify-center">
       <Wallet>
         <ConnectWallet>
           <Avatar className="h-6 w-6" />

diff --git a/site/docs/pages/index.mdx b/site/docs/pages/index.mdx
@@ -10,7 +10,7 @@ showOutline: false
 import { base } from 'viem/chains';
 import { OnchainKitProvider } from '@coinbase/onchainkit';
 import { Address, Avatar, Badge, Name, Identity } from '@coinbase/onchainkit/identity';
-import AccountConnect from '../components/AccountConnect';
+import { WalletDemo } from '../components/WalletDemo';
 import App from '../components/App';
 import FarcasterCastCard from '../components/FarcasterCastCard';
 import TokenSelector from '../components/TokenSelector';
@@ -114,30 +114,30 @@ bun add @coinbase/onchainkit
   </aside>
   <aside className="md:px-2 pt-10">
     <p className="text-lg md:text-xl py-4">
-      Create or connect your wallet with [Connect Account](/wallet/connect-account), powered by [Smart Wallet](https://www.smartwallet.dev/why).
+      Create or connect your wallet with [Connect Wallet](/wallet/wallet), powered by [Smart Wallet](https://www.smartwallet.dev/why).
     </p>
     <div className="flex grow flex-col md:flex-row">
       <div>
 ```tsx
-<div className="flex flex-grow">
-  {(() => {
-    if (status === 'disconnected') {
-      return <ConnectAccount />; // [!code focus]
-    }
-    return (
-      <div className="flex h-8 w-8 items-center justify-center">
-        <button type="button" onClick={() => disconnect()}>
-          <Avatar address={address} />
-        </button>
-      </div>
-    );
-  })()}
-</div>
+      <Wallet> // [!code focus]
+        <ConnectWallet> // [!code focus]
+          <Avatar className="h-6 w-6" />
+          <Name />
+        </ConnectWallet> // [!code focus]
+        <WalletDropdown> // [!code focus]
+          <Identity className="px-4 pt-3 pb-2" hasCopyAddressOnClick>
+          </Identity>
+          <WalletDropdownLink> // [!code focus]
+            Go to Wallet Dashboard // [!code focus]
+          </WalletDropdownLink> // [!code focus]
+          <WalletDropdownDisconnect /> // [!code focus]
+        </WalletDropdown> // [!code focus]
+      </Wallet> // [!code focus]
 ```
       </div>
       <div className='flex grow items-center justify-center h-24 md:h-auto'>
 <App>
-  <AccountConnect />
+  <WalletDemo />
 </App>
       </div>
     </div>

diff --git a/site/docs/pages/wallet/connect-account.mdx b/site/docs/pages/wallet/connect-account.mdx
diff --git a/site/docs/pages/wallet/introduction.mdx b/site/docs/pages/wallet/introduction.mdx
diff --git a/site/docs/pages/wallet/wallet.mdx b/site/docs/pages/wallet/wallet.mdx
@@ -1,24 +1,46 @@
-{/* import { Avatar, Identity, Name } from '../../../../src/identity'; */}
+---
+title: Wallet Components & Utilities · OnchainKit
+description: Introduction to Wallet Components & Utilities
+---
 
+import AccountConnect from '../../components/AccountConnect';
 import App from '../../components/App';
 import { WalletDemo } from '../../components/WalletDemo';
 
 # `<Wallet />`
 
-:::warning
-Component is actively in development. Stay tuned for upcoming releases.
-:::
+The Wallet components provide a comprehensive interface for users to connect their Smart Wallet, view their identity information, and manage their wallet connection. Before using them, ensure you've completed all Getting Started steps.
 
+## 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.
+- `<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.
+
+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.
 ## Usage
 
-```tsx
-import {
-  ConnectWallet,
-  Wallet,
-  WalletDropdown,
-  WalletDropdownLink,
-  WalletDropdownDisconnect,
-} from '@coinbase/onchainkit/wallet';
+```tsx [code]
+import { // [!code focus]
+  ConnectWallet, // [!code focus]
+  Wallet, // [!code focus]
+  WalletDropdown, // [!code focus]
+  WalletDropdownLink, // [!code focus]
+  WalletDropdownDisconnect, // [!code focus]
+} from '@coinbase/onchainkit/wallet'; // [!code focus]
 import {
   Address,
   Avatar,
@@ -29,15 +51,15 @@ import {
 } from '@coinbase/onchainkit/identity';
 import { color } from '@coinbase/onchainkit/theme';
 
-export function WalletDemo() {
+export function WalletComponents() {
   return (
     <div className="flex justify-end">
-      <Wallet>
-        <ConnectWallet>
+      <Wallet> // [!code focus]
+        <ConnectWallet> // [!code focus]
           <Avatar className="h-6 w-6" />
           <Name />
-        </ConnectWallet>
-        <WalletDropdown>
+        </ConnectWallet> // [!code focus]
+        <WalletDropdown> // [!code focus]
           <Identity className="px-4 pt-3 pb-2" hasCopyAddressOnClick>
             <Avatar />
             <Name>
@@ -46,12 +68,12 @@ export function WalletDemo() {
             <Address className={color.foregroundMuted} />
             <EthBalance />
           </Identity>
-          <WalletDropdownLink icon="wallet" href="https://wallet.coinbase.com">
-            Go to Wallet Dashboard
-          </WalletDropdownLink>
-          <WalletDropdownDisconnect />
-        </WalletDropdown>
-      </Wallet>
+          <WalletDropdownLink icon="wallet" href="https://wallet.coinbase.com"> // [!code focus]
+            Go to Wallet Dashboard // [!code focus]
+          </WalletDropdownLink> // [!code focus]
+          <WalletDropdownDisconnect /> // [!code focus]
+        </WalletDropdown> // [!code focus]
+      </Wallet> // [!code focus]
     </div>
   );
 }
@@ -61,6 +83,31 @@ export function WalletDemo() {
   <WalletDemo />
 </App>
 
-## Props
+## Required providers
 
-[`WalletReact`](/identity/types#walletreact)
+If you are using any of the provided components, you will need to install
+and configure `wagmi` and wrap your app in `<WagmiProvider>`.
+
+```tsx
+import { ReactNode } from 'react';
+import { WagmiProvider, createConfig, http } from 'wagmi';
+import { baseSepolia } from 'wagmi/chains';
+import { coinbaseWallet } from 'wagmi/connectors';
+
+const wagmiConfig = createConfig({
+  chains: [baseSepolia],
+  connectors: [
+    coinbaseWallet({
+      appName: 'onchainkit',
+    }),
+  ],
+  ssr: true,
+  transports: {
+    [baseSepolia.id]: http(),
+  },
+});
+
+function App({ children }: { children: ReactNode }) {
+  return <WagmiProvider config={wagmiConfig}>{children}</WagmiProvider>;
+}
+```
diff --git a/site/package.json b/site/package.json
@@ -8,7 +8,7 @@
     "preview": "vocs preview"
   },
   "dependencies": {
-    "@coinbase/onchainkit": "0.23.3",
+    "@coinbase/onchainkit": "0.23.4",
     "@types/react": "latest",
     "@vercel/edge": "^1.1.1",
     "permissionless": "^0.1.29",

diff --git a/site/sidebar.ts b/site/sidebar.ts
@@ -231,13 +231,12 @@ export const sidebar = [
   {
     text: 'Wallet',
     items: [
-      { text: 'Introduction', link: '/wallet/introduction' },
       {
         text: 'Components',
         items: [
           {
-            text: 'ConnectAccount',
-            link: '/wallet/connect-account',
+            text: 'Wallet',
+            link: '/wallet/wallet',
           },
         ],
       },

diff --git a/site/yarn.lock b/site/yarn.lock
@@ -338,9 +338,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@coinbase/onchainkit@npm:0.23.3":
-  version: 0.23.3
-  resolution: "@coinbase/onchainkit@npm:0.23.3"
+"@coinbase/onchainkit@npm:0.23.4":
+  version: 0.23.4
+  resolution: "@coinbase/onchainkit@npm:0.23.4"
   dependencies:
     "@tanstack/react-query": "npm:^5"
     clsx: "npm:^2.1.1"
@@ -354,7 +354,7 @@ __metadata:
     "@xmtp/frames-validator": ^0.6.0
     react: ^18
     react-dom: ^18
-  checksum: 96027b242dce40435d8d24347f0a72aa158523253b2ef07260d70e4726f6d60cb5af6df928b0714091b994f3c8e998cb0df7f71450f44e32970654c1527c584d
+  checksum: 76c65c39f60c98bc21ed98178e46d98a05d9487f9f7b0363ea9d404769cc500f2c32e951b8b51199a349f504dd2b39052f2a2bfaab1ebcd3de9673cc5575bfa2
   languageName: node
   linkType: hard
 
@@ -7826,7 +7826,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "onchainkit@workspace:."
   dependencies:
-    "@coinbase/onchainkit": "npm:0.23.3"
+    "@coinbase/onchainkit": "npm:0.23.4"
     "@types/react": "npm:latest"
     "@vercel/edge": "npm:^1.1.1"
     permissionless: "npm:^0.1.29"