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)