docs: added WalletDropdownDisconnect and WalletDropdownLink page (#1042)

coinbase · Aug 14, 2024 · c443f29 · c443f29
1 parent b893919
commit c443f29
Show file tree

Hide file tree

Showing 5 changed files with 636 additions and 23 deletions.
diff --git a/site/docs/components/svg/walletDropdownLinkCustomBaseIconSvg.tsx b/site/docs/components/svg/walletDropdownLinkCustomBaseIconSvg.tsx
@@ -0,0 +1,244 @@
+export const walletDropdownLinkCustomBaseIconSvg = (
+ <svg
+ version="1.1"
+ id="Layer_1"
+ xmlns="http://www.w3.org/2000/svg"
+ x="0px"
+ y="0px"
+ width="100%"
+ viewBox="0 0 224 224"
+ enable-background="new 0 0 224 224"
+ >
+ <path
+ fill="#0253FF"
+ opacity="1.000000"
+ stroke="none"
+ d="
+M1.000000,104.000000 
+ C1.000000,102.285645 1.000000,100.571281 1.397129,98.407722 
+ C2.143429,97.070389 2.535753,96.196548 2.835227,95.291962 
+ C6.626368,83.840500 8.917187,71.601234 14.462297,61.075764 
+ C31.547110,28.646172 58.841732,9.364697 95.018623,2.810533 
+ C96.086693,2.617028 97.009476,1.621556 98.000000,1.000001 
+ C100.370560,1.000000 102.741112,1.000000 105.821648,1.325598 
+ C110.382698,1.702630 114.233765,1.754064 118.447716,1.850960 
+ C119.873726,1.597613 120.936867,1.298805 122.000000,0.999998 
+ C123.388893,1.000000 124.777779,1.000000 126.669128,1.381681 
+ C128.095047,2.099774 128.992813,2.598593 129.945648,2.749310 
+ C178.339203,10.404058 215.377151,47.184547 223.211075,95.316360 
+ C223.421158,96.607101 224.386749,97.774879 225.000000,99.000000 
+ C225.000000,101.041664 225.000000,103.083336 224.674393,105.828339 
+ C224.297333,110.383423 224.245880,114.235176 224.148956,118.449577 
+ C224.402328,119.874817 224.701157,120.937408 225.000000,122.000000 
+ C225.000000,123.714355 225.000000,125.428719 224.579315,127.516922 
+ C223.510666,130.646637 222.880142,133.406738 222.212143,136.157745 
+ C211.975952,178.312973 186.308792,206.295013 145.101807,219.900955 
+ C139.154999,221.864517 133.038162,223.313095 127.000000,225.000000 
+ C125.611107,225.000000 124.222221,225.000000 122.250183,224.678345 
+ C120.473015,224.302628 119.278999,224.248550 117.626305,224.133545 
+ C114.083473,224.113235 110.999313,224.153854 107.552284,224.149017 
+ C106.126266,224.402374 105.063133,224.701172 104.000000,225.000000 
+ C102.285645,225.000000 100.571281,225.000000 98.327492,224.606384 
+ C94.156868,223.330566 90.399200,222.770370 86.897110,221.503601 
+ C77.724106,218.185501 68.109108,215.558578 59.655464,210.877136 
+ C28.108871,193.407394 9.231244,166.541092 2.809741,130.979492 
+ C2.617016,129.912201 1.621323,128.989899 1.000000,128.000000 
+ C1.000000,126.285645 1.000000,124.571281 1.321592,122.261566 
+ C1.697142,120.473259 1.751099,119.280319 1.866131,117.628494 
+ C1.886483,114.083992 1.845760,110.998383 1.850315,107.550560 
+ C1.597061,106.125572 1.298530,105.062782 1.000000,104.000000 
+M160.777969,50.703274 
+ C132.322235,30.453577 102.486847,28.271269 72.288795,45.744102 
+ C49.584381,58.881058 37.371517,79.501541 34.298447,106.425400 
+ C73.558945,106.425400 112.101868,106.425400 150.709747,106.425400 
+ C150.709747,111.014801 150.709747,114.941391 150.709747,119.540710 
+ C111.925034,119.540710 73.412766,119.540710 34.933048,119.540710 
+ C34.533955,131.558731 40.319164,147.302460 49.441017,159.761520 
+ C74.115608,193.463257 122.200676,201.945007 156.366898,178.622269 
+ C201.173096,148.036438 203.604706,85.666794 160.777969,50.703274 
+z"
+ />
+ <path
+ fill="#FDFDFE"
+ opacity="1.000000"
+ stroke="none"
+ d="
+M97.531342,1.000001 
+ C97.009476,1.621556 96.086693,2.617028 95.018623,2.810533 
+ C58.841732,9.364697 31.547110,28.646172 14.462297,61.075764 
+ C8.917187,71.601234 6.626368,83.840500 2.835227,95.291962 
+ C2.535753,96.196548 2.143429,97.070389 1.397129,97.979263 
+ C1.000000,65.739738 1.000000,33.479469 1.000000,1.000000 
+ C33.020561,1.000000 65.041618,1.000000 97.531342,1.000001 
+z"
+ />
+ <path
+ fill="#FDFDFE"
+ opacity="1.000000"
+ stroke="none"
+ d="
+M225.000000,98.531342 
+ C224.386749,97.774879 223.421158,96.607101 223.211075,95.316360 
+ C215.377151,47.184547 178.339203,10.404058 129.945648,2.749310 
+ C128.992813,2.598593 128.095047,2.099774 127.085793,1.381681 
+ C159.593597,1.000000 192.187180,1.000000 225.000000,1.000000 
+ C225.000000,33.353897 225.000000,65.708290 225.000000,98.531342 
+z"
+ />
+ <path
+ fill="#FDFDFE"
+ opacity="1.000000"
+ stroke="none"
+ d="
+M127.468658,225.000000 
+ C133.038162,223.313095 139.154999,221.864517 145.101807,219.900955 
+ C186.308792,206.295013 211.975952,178.312973 222.212143,136.157745 
+ C222.880142,133.406738 223.510666,130.646637 224.579315,127.945381 
+ C225.000000,160.260635 225.000000,192.521271 225.000000,225.000000 
+ C192.646103,225.000000 160.291702,225.000000 127.468658,225.000000 
+z"
+ />
+ <path
+ fill="#FDFDFE"
+ opacity="1.000000"
+ stroke="none"
+ d="
+M1.000000,128.468658 
+ C1.621323,128.989899 2.617016,129.912201 2.809741,130.979492 
+ C9.231244,166.541092 28.108871,193.407394 59.655464,210.877136 
+ C68.109108,215.558578 77.724106,218.185501 86.897110,221.503601 
+ C90.399200,222.770370 94.156868,223.330566 97.899033,224.606384 
+ C65.739738,225.000000 33.479477,225.000000 1.000000,225.000000 
+ C1.000000,192.979446 1.000000,160.958374 1.000000,128.468658 
+z"
+ />
+ <path
+ fill="#577CD2"
+ opacity="1.000000"
+ stroke="none"
+ d="
+M224.194412,118.086929 
+ C224.245880,114.235176 224.297333,110.383423 224.674393,106.265839 
+ C225.000000,109.692909 225.000000,113.385818 224.800232,117.576141 
+ C224.600449,118.073563 224.194412,118.086929 224.194412,118.086929 
+z"
+ />
+ <path
+ fill="#577CD2"
+ opacity="1.000000"
+ stroke="none"
+ d="
+M118.084839,1.805499 
+ C114.233765,1.754064 110.382698,1.702630 106.265808,1.325598 
+ C109.692909,1.000000 113.385818,1.000000 117.561203,1.201309 
+ C118.043678,1.402617 118.084839,1.805499 118.084839,1.805499 
+z"
+ />
+ <path
+ fill="#577CD2"
+ opacity="1.000000"
+ stroke="none"
+ d="
+M1.805038,107.912766 
+ C1.845760,110.998383 1.886483,114.083992 1.663376,117.621643 
+ C1.399548,118.073677 1.000000,118.000000 1.000000,118.000000 
+ C1.000000,114.969406 1.000000,111.938812 1.199576,108.416763 
+ C1.399151,107.925301 1.805038,107.912766 1.805038,107.912766 
+z"
+ />
+ <path
+ fill="#577CD2"
+ opacity="1.000000"
+ stroke="none"
+ d="
+M107.915161,224.194489 
+ C110.999313,224.153854 114.083473,224.113235 117.605377,224.334808 
+ C118.043137,224.597000 118.000000,225.000000 118.000000,225.000000 
+ C114.969406,225.000000 111.938812,225.000000 108.432274,224.798691 
+ C107.956329,224.597382 107.915161,224.194489 107.915161,224.194489 
+z"
+ />
+ <path
+ fill="#859DDC"
+ opacity="1.000000"
+ stroke="none"
+ d="
+M1.850315,107.550560 
+ C1.805038,107.912766 1.399151,107.925301 1.199576,107.962646 
+ C1.000000,106.933319 1.000000,105.866638 1.000000,104.399979 
+ C1.298530,105.062782 1.597061,106.125572 1.850315,107.550560 
+z"
+ />
+ <path
+ fill="#859DDC"
+ opacity="1.000000"
+ stroke="none"
+ d="
+M1.000000,118.399979 
+ C1.000000,118.000000 1.399548,118.073677 1.602303,118.080528 
+ C1.751099,119.280319 1.697142,120.473259 1.321592,121.833099 
+ C1.000000,120.933319 1.000000,119.866638 1.000000,118.399979 
+z"
+ />
+ <path
+ fill="#859DDC"
+ opacity="1.000000"
+ stroke="none"
+ d="
+M224.148956,118.449577 
+ C224.194412,118.086929 224.600449,118.073563 224.800232,118.036781 
+ C225.000000,119.066650 225.000000,120.133301 225.000000,121.599976 
+ C224.701157,120.937408 224.402328,119.874817 224.148956,118.449577 
+z"
+ />
+ <path
+ fill="#859DDC"
+ opacity="1.000000"
+ stroke="none"
+ d="
+M118.447716,1.850960 
+ C118.084839,1.805499 118.043678,1.402617 118.021835,1.201309 
+ C119.066650,1.000000 120.133301,1.000000 121.599976,0.999998 
+ C120.936867,1.298805 119.873726,1.597613 118.447716,1.850960 
+z"
+ />
+ <path
+ fill="#859DDC"
+ opacity="1.000000"
+ stroke="none"
+ d="
+M107.552284,224.149017 
+ C107.915161,224.194489 107.956329,224.597382 107.978165,224.798691 
+ C106.933350,225.000000 105.866699,225.000000 104.400024,225.000000 
+ C105.063133,224.701172 106.126266,224.402374 107.552284,224.149017 
+z"
+ />
+ <path
+ fill="#859DDC"
+ opacity="1.000000"
+ stroke="none"
+ d="
+M118.400024,225.000000 
+ C118.000000,225.000000 118.043137,224.597000 118.064056,224.395737 
+ C119.278999,224.248550 120.473015,224.302628 121.833511,224.678345 
+ C120.933350,225.000000 119.866699,225.000000 118.400024,225.000000 
+z"
+ />
+ <path
+ fill="#FDFEFF"
+ opacity="1.000000"
+ stroke="none"
+ d="
+M161.057388,50.924671 
+ C203.604706,85.666794 201.173096,148.036438 156.366898,178.622269 
+ C122.200676,201.945007 74.115608,193.463257 49.441017,159.761520 
+ C40.319164,147.302460 34.533955,131.558731 34.933048,119.540710 
+ C73.412766,119.540710 111.925034,119.540710 150.709747,119.540710 
+ C150.709747,114.941391 150.709747,111.014801 150.709747,106.425400 
+ C112.101868,106.425400 73.558945,106.425400 34.298447,106.425400 
+ C37.371517,79.501541 49.584381,58.881058 72.288795,45.744102 
+ C102.486847,28.271269 132.322235,30.453577 161.057388,50.924671 
+z"
+ />
+ </svg>
+);
diff --git a/site/docs/pages/wallet/wallet-dropdown-base-name.mdx b/site/docs/pages/wallet/wallet-dropdown-base-name.mdx
@@ -1,20 +1,18 @@
 import { 
- ConnectWallet,
- Wallet,
- WalletDropdown,
- WalletDropdownLink,
- WalletDropdownBaseName,
- WalletDropdownDisconnect,
-} from '@coinbase/onchainkit/wallet';
-import {
  Address,
  Avatar,
- Name,
- Identity,
  EthBalance,
+ Identity,
+ Name 
 } from '@coinbase/onchainkit/identity';
 import { color } from '@coinbase/onchainkit/theme';
-import AppWithRK from '../../components/AppWithRK';
+import {
+ ConnectWallet,
+ Wallet,
+ WalletDropdown,
+ WalletDropdownBaseName,
+ WalletDropdownDisconnect
+} from '@coinbase/onchainkit/wallet';
 import WalletComponents from '../../components/WalletComponents';
 
 # `<WalletDropdownBaseName />`
@@ -29,13 +27,6 @@ This component enhances the wallet interface by providing easy access to Base Na
 ## Usage
 
 ```tsx
-import {
- ConnectWallet,
- Wallet,
- WalletDropdown,
- WalletDropdownBaseName, // [!code focus]
- WalletDropdownDisconnect,
-} from '@coinbase/onchainkit/wallet';
 import {
  Address,
  Avatar,
@@ -44,6 +35,13 @@ import {
  EthBalance,
 } from '@coinbase/onchainkit/identity';
 import { color } from '@coinbase/onchainkit/theme';
+import {
+ ConnectWallet,
+ Wallet,
+ WalletDropdown,
+ WalletDropdownBaseName, // [!code focus]
+ WalletDropdownDisconnect,
+} from '@coinbase/onchainkit/wallet';
 
 export function WalletComponents() {
  return (
@@ -88,5 +86,34 @@ export function WalletComponents() {
  </Wallet>
 </WalletComponents>
 
+### Override styles
+
+You can override component styles using `className`.
+
+```tsx
+// omitted for brevity
+
+<WalletDropdownBaseName className="hover:bg-red-500" /> // [!code focus] 
+```
+
+<WalletComponents>
+ <Wallet>
+ <ConnectWallet text="Log In">
+ <Avatar className="h-6 w-6" />
+ <Name />
+ </ConnectWallet>
+ <WalletDropdown>
+ <Identity className="px-4 pt-3 pb-2" hasCopyAddressOnClick>
+ <Avatar />
+ <Name />
+ <Address className={color.foregroundMuted} />
+ <EthBalance />
+ </Identity>
+ <WalletDropdownBaseName className="hover:bg-red-500"/>
+ <WalletDropdownDisconnect />
+ </WalletDropdown>
+ </Wallet>
+</WalletComponents>
+
 ## Props
 - [`WalletDropdownBaseNameReact`](/wallet/types#walletdropdownbasenamereact)