docs: latest (coinbase#757)

roushou · Jul 8, 2024 · 0d6f983 · 0d6f983
1 parent 2a9a5ff
commit 0d6f983
Show file tree

Hide file tree

Showing 7 changed files with 156 additions and 68 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,12 +4,7 @@
 
 ### Patch Changes
 
-- 5959b49: - **feat**: exported `SwapToggleButtonReact`, `WalletDropdownDisconnectReact` and `WalletDropdownLinkReact` types. Added more custom option to `WalletDropdownLink` component. By @zizzamia #754
-
-  Breaking Changes
-
-  - `ConnectAccount` has been removed from `Wallet` module.
-  - `ConnectWallet`'s `label` prop renamed to `text`.
+- **feat**: exported `SwapToggleButtonReact`, `WalletDropdownDisconnectReact` and `WalletDropdownLinkReact` types. Added more custom option to `WalletDropdownLink` component. By @zizzamia #754 5959b49
 
 ## 0.24.0
 

diff --git a/site/docs/components/WalletComponents.tsx b/site/docs/components/WalletComponents.tsx
@@ -0,0 +1,15 @@
+'use client';
+import type { ReactNode } from 'react';
+import App from './App.tsx';
+
+type WalletComponentsReact = {
+  children: ReactNode;
+};
+
+export default function WalletComponents({ children }: WalletComponentsReact) {
+  return (
+    <App>
+      <div className="mt-10 mb-28 flex justify-center">{children}</div>
+    </App>
+  );
+}
diff --git a/site/docs/components/WalletDemo.tsx b/site/docs/components/WalletDemo.tsx
diff --git a/site/docs/pages/index.mdx b/site/docs/pages/index.mdx
@@ -9,14 +9,21 @@ showOutline: false
 
 import { base } from 'viem/chains';
 import { OnchainKitProvider } from '@coinbase/onchainkit';
-import { Address, Avatar, Badge, Name, Identity } from '@coinbase/onchainkit/identity';
+import { Address, Avatar, Badge, EthBalance, Name, Identity } from '@coinbase/onchainkit/identity';
 import { Swap, SwapAmountInput, SwapButton, SwapMessage, SwapToggleButton } from '@coinbase/onchainkit/swap';
-import { Wallet, ConnectWallet } from '@coinbase/onchainkit/wallet';
+import { color } from '@coinbase/onchainkit/theme';
+import { 
+  ConnectWallet,
+  Wallet,
+  WalletDropdown,
+  WalletDropdownLink,
+  WalletDropdownDisconnect,
+} from '@coinbase/onchainkit/wallet';
 import App from '../components/App';
 import FarcasterCastCard from '../components/FarcasterCastCard';
 import SwapWrapper from '../components/SwapWrapper';
 import TokenSelector from '../components/TokenSelector';
-import { WalletDemo } from '../components/WalletDemo';
+import WalletComponents from '../components/WalletComponents';
 
 <div id="blobs">
   <div className="css-blurry-gradient top-['-15%',] left-['calc(50%_-_280px)']"/>
@@ -145,9 +152,28 @@ bun add @coinbase/onchainkit
 ```
       </div>
       <div className='flex grow items-center justify-center h-24 md:h-auto'>
-<App>
-  <WalletDemo />
-</App>
+<WalletComponents>
+  <Wallet>
+    <ConnectWallet>
+      <Avatar className="h-6 w-6" />
+      <Name />
+    </ConnectWallet>
+    <WalletDropdown>
+      <Identity className="px-4 pt-3 pb-2" hasCopyAddressOnClick>
+        <Avatar />
+        <Name>
+          <Badge />
+        </Name>
+        <Address className={color.foregroundMuted} />
+        <EthBalance />
+      </Identity>
+      <WalletDropdownLink icon="wallet" href="https://wallet.coinbase.com">
+        Go to Wallet Dashboard
+      </WalletDropdownLink>
+      <WalletDropdownDisconnect />
+    </WalletDropdown>
+  </Wallet>
+</WalletComponents>
       </div>
     </div>
   </aside>

diff --git a/site/docs/pages/wallet/wallet.mdx b/site/docs/pages/wallet/wallet.mdx
@@ -3,8 +3,23 @@ title: Wallet Components & Utilities · OnchainKit
 description: Introduction to Wallet Components & Utilities
 ---
 
-import App from '../../components/App';
-import { WalletDemo } from '../../components/WalletDemo';
+import { 
+  ConnectWallet,
+  Wallet,
+  WalletDropdown,
+  WalletDropdownLink,
+  WalletDropdownDisconnect,
+} from '@coinbase/onchainkit/wallet';
+import {
+  Address,
+  Avatar,
+  Name,
+  Badge,
+  Identity,
+  EthBalance,
+} from '@coinbase/onchainkit/identity';
+import { color } from '@coinbase/onchainkit/theme';
+import WalletComponents from '../../components/WalletComponents';
 
 # `<Wallet />`
 
@@ -78,9 +93,91 @@ export function WalletComponents() {
 }
 ```
 
-<App>
-  <WalletDemo />
-</App>
+<WalletComponents>
+  <Wallet>
+    <ConnectWallet>
+      <Avatar className="h-6 w-6" />
+      <Name />
+    </ConnectWallet>
+    <WalletDropdown>
+      <Identity className="px-4 pt-3 pb-2" hasCopyAddressOnClick>
+        <Avatar />
+        <Name>
+          <Badge />
+        </Name>
+        <Address className={color.foregroundMuted} />
+        <EthBalance />
+      </Identity>
+      <WalletDropdownLink icon="wallet" href="https://wallet.coinbase.com">
+        Go to Wallet Dashboard
+      </WalletDropdownLink>
+      <WalletDropdownDisconnect />
+    </WalletDropdown>
+  </Wallet>
+</WalletComponents>
+
+### Override styles
+
+You can override component styles using `className`.
+
+```tsx [code]
+// omitted for brevity
+
+<Wallet>
+  <ConnectWallet className='bg-blue-800'>
+    <Avatar className="h-6 w-6" />
+    <Name className='text-white' />
+  </ConnectWallet>
+  <WalletDropdown>
+    <Identity 
+      className="px-4 pt-3 pb-2 hover:bg-blue-200" 
+      hasCopyAddressOnClick
+    >
+      <Avatar />
+      <Name>
+        <Badge />
+      </Name>
+      <Address />
+      <EthBalance />
+    </Identity>
+    <WalletDropdownLink 
+      className='hover:bg-blue-200' 
+      icon="wallet" 
+      href="https://wallet.coinbase.com"
+    >
+      Go to Wallet Dashboard
+    </WalletDropdownLink>
+    <WalletDropdownDisconnect className='hover:bg-blue-200' />
+  </WalletDropdown>
+</Wallet>
+```
+
+<WalletComponents>
+  <Wallet>
+    <ConnectWallet className='bg-blue-800'>
+      <Avatar className="h-6 w-6" />
+      <Name className='text-white' />
+    </ConnectWallet>
+    <WalletDropdown>
+      <Identity className="px-4 pt-3 pb-2 hover:bg-blue-200" hasCopyAddressOnClick>
+        <Avatar />
+        <Name>
+          <Badge />
+        </Name>
+        <Address className={color.foregroundMuted} />
+        <EthBalance />
+      </Identity>
+      <WalletDropdownLink 
+        className='hover:bg-blue-200' 
+        icon="wallet" 
+        href="https://wallet.coinbase.com"
+      >
+        Go to Wallet Dashboard
+      </WalletDropdownLink>
+      <WalletDropdownDisconnect className='hover:bg-blue-200' />
+    </WalletDropdown>
+  </Wallet>
+</WalletComponents>
 
 ## Required providers
 

diff --git a/site/package.json b/site/package.json
@@ -8,7 +8,7 @@
     "preview": "vocs preview"
   },
   "dependencies": {
-    "@coinbase/onchainkit": "0.24.0",
+    "@coinbase/onchainkit": "0.24.1",
     "@types/react": "latest",
     "@vercel/edge": "^1.1.1",
     "permissionless": "^0.1.29",

diff --git a/site/yarn.lock b/site/yarn.lock
@@ -338,9 +338,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@coinbase/onchainkit@npm:0.24.0":
-  version: 0.24.0
-  resolution: "@coinbase/onchainkit@npm:0.24.0"
+"@coinbase/onchainkit@npm:0.24.1":
+  version: 0.24.1
+  resolution: "@coinbase/onchainkit@npm:0.24.1"
   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: 71070b93154e4ac91acb2f380f7ed1906fd727d9a58fa2b8831a74fa026ce91bc0f0dc06d25e85104d59dfae950c1f88cbc559eb404ac3e296f875d27dd83d10
+  checksum: bbe3e6f2af5120468a8bbfff9d6720f06b0e6383e39f32f1c9a76119ee22fb28f858c6f0b8efa04145869f986f95aa61a274025ecf845599cb97c0e11be629a1
   languageName: node
   linkType: hard
 
@@ -7826,7 +7826,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "onchainkit@workspace:."
   dependencies:
-    "@coinbase/onchainkit": "npm:0.24.0"
+    "@coinbase/onchainkit": "npm:0.24.1"
     "@types/react": "npm:latest"
     "@vercel/edge": "npm:^1.1.1"
     permissionless: "npm:^0.1.29"