Save changes

coinbase · Aug 14, 2024 · a99a9f3 · a99a9f3
1 parent 37789e3
commit a99a9f3
Show file tree

Hide file tree

Showing 3 changed files with 320 additions and 7 deletions.
diff --git a/site/docs/components/svg/walletDropdownLinkCustomIconSvg.tsx b/site/docs/components/svg/walletDropdownLinkCustomIconSvg.tsx
@@ -0,0 +1,194 @@
+export const walletDropdownLinkCustomIconSvg = (
+  <svg
+    version="1.1"
+    id="Layer_1"
+    xmlns="http://www.w3.org/2000/svg"
+    x="0px"
+    y="0px"
+    width="100%"
+    viewBox="0 0 416 416"
+    enable-background="new 0 0 416 416"
+  >
+    <path
+      fill="#000000"
+      opacity="1.000000"
+      stroke="none"
+      d="
+M33.000000,1.000000 
+	C160.965378,1.000000 288.930756,1.000000 416.948059,1.000000 
+	C416.948059,139.594513 416.948059,278.189056 416.948059,416.891785 
+	C278.443054,416.891785 139.885971,416.891785 1.000000,416.891785 
+	C1.000000,292.310211 1.000000,167.620117 1.172450,42.656952 
+	C1.859537,42.982746 2.374172,43.581608 2.888809,44.180470 
+	C7.160465,39.411026 10.210019,44.278843 13.538874,45.711323 
+	C16.073347,46.801968 18.445629,48.263435 20.903997,46.179928 
+	C26.078911,41.794113 31.930788,38.194637 36.409103,32.998840 
+	C43.837986,24.379755 41.886173,6.176486 33.000000,1.000000 
+M97.499107,286.042572 
+	C91.391205,289.451508 85.266830,292.831360 79.180267,296.278015 
+	C73.628647,299.421753 73.403999,300.342438 77.583725,305.183411 
+	C85.522545,314.378265 95.223732,321.374634 105.778687,327.245239 
+	C132.687485,342.211761 162.335175,346.654419 192.335632,348.410248 
+	C219.255600,349.985748 246.198486,349.263611 273.010132,344.845245 
+	C296.954590,340.899414 319.080383,332.994446 338.645355,318.585175 
+	C349.727448,310.423340 359.647430,301.082062 365.119049,287.956146 
+	C366.700775,284.161774 366.677124,281.150482 362.125122,279.724701 
+	C359.512970,278.906525 358.876221,277.170685 359.490051,274.683533 
+	C360.125793,272.107605 361.428650,270.377380 364.366425,270.927216 
+	C365.938232,271.221344 367.293640,271.448517 368.208221,269.706451 
+	C369.924164,266.438080 367.559143,253.517593 364.771515,251.050400 
+	C362.299774,248.862778 360.834534,246.128540 362.936798,243.170456 
+	C364.734467,240.640991 364.523834,238.375137 363.850891,235.666138 
+	C360.238190,221.122742 356.007721,206.757538 351.427155,192.498505 
+	C345.541840,174.177917 341.050232,155.708267 342.553955,136.186722 
+	C343.102539,129.064896 342.880646,121.850220 342.529602,114.701515 
+	C342.138733,106.740494 341.795166,98.723701 339.368134,91.015327 
+	C336.802490,82.866867 334.038818,81.152557 325.689758,82.588943 
+	C312.670349,84.828827 300.806488,89.863617 290.044464,97.496346 
+	C288.741302,98.420593 287.062866,99.150291 287.028137,101.267426 
+	C289.298676,105.113792 294.901276,106.074226 296.192322,110.896957 
+	C295.126160,111.819572 294.255524,111.557167 293.527802,111.278954 
+	C279.569458,105.942833 265.020844,103.446854 250.213730,102.098175 
+	C224.529709,99.758774 198.896393,99.749985 173.874222,106.616234 
+	C165.667999,108.868080 159.312592,107.676117 152.260437,103.594193 
+	C136.911011,94.709641 120.282379,88.636909 103.281639,83.770081 
+	C88.901070,79.653328 83.307198,82.772621 78.815247,96.850571 
+	C74.659729,109.874077 72.366821,123.322609 70.344498,136.823746 
+	C68.225349,150.971313 68.091164,165.348175 65.354759,179.415955 
+	C62.338982,194.919937 59.241543,210.391556 58.150154,226.211990 
+	C57.786152,231.488480 59.504295,233.822128 64.614494,234.615173 
+	C75.028648,236.231293 84.845642,239.997879 94.750748,243.446671 
+	C98.231491,244.658615 99.135307,246.924500 98.185936,250.018204 
+	C96.907509,254.184235 93.519608,253.656708 90.340370,252.903046 
+	C81.598907,250.830841 72.904716,248.553955 64.140327,246.587601 
+	C62.057571,246.120316 58.501930,245.032043 58.127457,248.034485 
+	C57.415348,253.743958 57.641041,259.657593 59.953846,265.139343 
+	C60.602009,266.675629 62.437569,266.601776 63.954697,266.610229 
+	C67.953911,266.632599 71.953491,266.678314 75.952354,266.645416 
+	C78.798706,266.622040 81.056374,267.456390 81.065910,270.704865 
+	C81.074593,273.664307 79.636230,275.840881 76.475487,276.322510 
+	C73.679199,276.748535 70.863358,277.058258 68.048859,277.348663 
+	C66.169846,277.542572 64.061295,277.702301 63.672890,279.888245 
+	C63.178738,282.669281 64.606171,285.077362 66.303848,287.176636 
+	C67.707886,288.912750 69.347084,287.936462 70.806145,287.141235 
+	C77.990112,283.225647 85.665932,280.402740 93.077316,276.997681 
+	C96.271461,275.530151 99.100517,274.541321 101.299667,278.147308 
+	C103.625870,281.961639 101.130257,283.962006 97.499107,286.042572 
+z"
+    />
+    <path
+      fill="#000000"
+      opacity="1.000000"
+      stroke="none"
+      d="
+M191.140411,212.759857 
+	C204.900604,224.870071 208.131622,242.518234 199.112366,257.113098 
+	C192.424301,267.935699 182.477280,273.359192 169.683212,272.238831 
+	C157.556793,271.176880 149.004883,264.581757 143.918900,253.564682 
+	C137.486847,239.631851 141.148788,223.495224 152.873444,213.745239 
+	C163.765701,204.687485 178.767624,204.205856 191.140411,212.759857 
+M160.813141,231.619431 
+	C165.579895,234.389664 168.946716,234.102814 171.731155,230.537064 
+	C174.301682,227.245209 174.388504,223.870514 171.590164,220.635483 
+	C168.797607,217.407150 164.825272,216.950836 161.399826,219.385712 
+	C157.605789,222.082581 157.200348,226.300644 160.813141,231.619431 
+z"
+    />
+    <path
+      fill="#000000"
+      opacity="1.000000"
+      stroke="none"
+      d="
+M328.450226,219.719757 
+	C340.405731,240.424866 331.467255,263.451569 309.783508,268.650177 
+	C295.344940,272.111786 280.129211,262.732910 275.408936,247.461945 
+	C269.010712,226.762436 284.401764,205.772415 305.504303,206.720261 
+	C315.045166,207.148804 322.541626,211.818329 328.450226,219.719757 
+M320.049042,260.649475 
+	C322.422394,258.686127 325.089386,256.947174 325.820953,253.106201 
+	C319.033783,250.349579 312.552887,250.366653 306.187286,253.729080 
+	C302.792023,255.522552 303.671478,258.001587 305.653564,260.274109 
+	C309.347626,264.509491 313.002869,264.670929 320.049042,260.649475 
+M290.943390,227.397598 
+	C292.598633,230.646454 295.080627,232.629196 298.880493,231.939575 
+	C301.855377,231.399689 303.993958,229.620956 304.684631,226.539368 
+	C305.350891,223.566605 304.693970,220.936188 302.165558,219.023376 
+	C299.713928,217.168640 297.032715,216.707901 294.300476,218.309662 
+	C291.088104,220.192917 289.839172,223.034180 290.943390,227.397598 
+z"
+    />
+    <path
+      fill="#000000"
+      opacity="1.000000"
+      stroke="none"
+      d="
+M227.732880,271.823914 
+	C232.191513,270.433350 235.567581,268.105804 238.377090,264.901581 
+	C239.799194,263.279633 241.451141,261.982117 243.404999,264.034027 
+	C250.179565,271.148651 258.089111,273.986053 268.393738,269.780609 
+	C266.898865,273.720245 264.321472,274.537598 261.907806,275.313507 
+	C259.054382,276.230835 257.621155,277.883392 257.051392,280.905487 
+	C255.860703,287.221130 253.210068,292.958221 248.744003,297.681824 
+	C243.502090,303.226013 237.777512,303.393066 232.154541,298.247528 
+	C227.842911,294.302002 225.151169,289.285339 223.832321,283.721436 
+	C222.812531,279.419220 221.382675,275.881317 216.876724,274.286957 
+	C215.836212,273.918793 214.792465,273.167084 214.874283,271.334747 
+	C219.032211,271.885132 223.164398,273.699066 227.732880,271.823914 
+M241.835892,275.575867 
+	C233.288559,274.520813 228.720673,279.320831 231.661362,286.502045 
+	C233.273483,290.438843 234.931686,295.257233 239.998245,295.302460 
+	C245.092194,295.347931 246.707932,290.559998 248.371094,286.608429 
+	C251.113251,280.093262 249.402985,276.951111 241.835892,275.575867 
+z"
+    />
+    <path
+      fill="#000000"
+      opacity="1.000000"
+      stroke="none"
+      d="
+M251.612732,245.486572 
+	C251.755661,250.545319 248.129379,254.541061 243.107239,255.446808 
+	C237.799805,256.404022 231.423523,253.514847 230.024673,249.505997 
+	C229.051208,246.716202 230.371475,244.839691 232.825241,244.038422 
+	C239.107254,241.987122 245.409531,241.241287 251.612732,245.486572 
+M238.599640,251.281052 
+	C241.927231,252.036575 244.731644,251.501816 246.653168,248.285141 
+	C242.181046,245.624954 239.638931,245.593048 235.675522,248.003967 
+	C235.760254,249.527847 236.906174,250.238205 238.599640,251.281052 
+z"
+    />
+    <path
+      fill="#000000"
+      opacity="1.000000"
+      stroke="none"
+      d="
+M330.223816,145.744568 
+	C326.584015,140.710297 322.160919,136.662949 319.958160,130.994629 
+	C328.916992,134.310989 330.324310,143.631546 335.968445,150.886459 
+	C332.305817,150.188492 331.969055,147.456345 330.223816,145.744568 
+z"
+    />
+    <path
+      fill="#000000"
+      opacity="1.000000"
+      stroke="none"
+      d="
+M120.359924,135.282211 
+	C119.461227,136.841370 118.773651,138.207016 116.493553,138.228104 
+	C117.496452,135.365723 117.033615,132.584396 116.202545,129.375793 
+	C120.017227,129.982117 120.763924,132.096207 120.359924,135.282211 
+z"
+    />
+    <path
+      fill="#000000"
+      opacity="1.000000"
+      stroke="none"
+      d="
+M238.774750,307.326660 
+	C236.754196,307.308807 235.111877,307.239288 234.144547,305.095764 
+	C236.638748,303.285400 238.851059,304.621002 241.061066,305.304688 
+	C241.144409,307.020996 240.095474,307.106262 238.774750,307.326660 
+z"
+    />
+  </svg>
+);
diff --git a/site/docs/pages/wallet/wallet-dropdown-disconnect.mdx b/site/docs/pages/wallet/wallet-dropdown-disconnect.mdx
@@ -83,11 +83,11 @@ export function WalletComponents() {
 
 You can override component styles using `className`.
 
-  ```tsx
-  // omitted for brevity
+```tsx
+// omitted for brevity
 
-  <WalletDropdownDisconnect className="hover:bg-red-500" /> // [!code focus] 
-  ```
+<WalletDropdownDisconnect className="hover:bg-red-500" /> // [!code focus] 
+```
 
 <WalletComponents>
   <Wallet>
@@ -102,7 +102,7 @@ You can override component styles using `className`.
         <Address className={color.foregroundMuted} />
         <EthBalance />
       </Identity>
-      <WalletDropdownDisconnect className="hover:bg-red-500"/>
+      <WalletDropdownDisconnect className="hover:bg-red-500" />
     </WalletDropdown>
   </Wallet>
 </WalletComponents>
@@ -114,7 +114,7 @@ You can override component text using `text`.
 ```tsx
 // omitted for brevity
 
-  <WalletDropdownDisconnect text="Log out" /> // [!code focus] 
+<WalletDropdownDisconnect text="Log out" /> // [!code focus] 
 ```
 
 <WalletComponents>
@@ -130,7 +130,7 @@ You can override component text using `text`.
         <Address className={color.foregroundMuted} />
         <EthBalance />
       </Identity>
-      <WalletDropdownDisconnect text="Log out"/>
+      <WalletDropdownDisconnect text="Log out" />
     </WalletDropdown>
   </Wallet>
 </WalletComponents>

diff --git a/site/docs/pages/wallet/wallet-dropdown-link.mdx b/site/docs/pages/wallet/wallet-dropdown-link.mdx
@@ -15,6 +15,7 @@ import {
   WalletDropdownLink,
 } from '@coinbase/onchainkit/wallet';
 import WalletComponents from '../../components/WalletComponents';
+import { walletDropdownLinkCustomIconSvg } from '../../components/svg/walletDropdownLinkCustomIconSvg'
 
 # `<WalletDropdownLink />`
 
@@ -86,5 +87,123 @@ export function WalletComponents() {
   </Wallet>
 </WalletComponents>
 
+### Custom link
+Add a custom link to the wallet dropdown menu, allowing users to navigate to external resources directly from the wallet interface.
+
+```tsx
+// omitted for brevity
+<WalletDropdownLink // [!code focus] 
+  icon={CatIcon} // [!code focus] 
+  href="https://www.basetokenstore.com/" // [!code focus] 
+  rel="noopener noreferrer" // [!code focus] 
+> // [!code focus]
+  Base Token Store // [!code focus]
+</WalletDropdownLink> // [!code focus]
+```
+
+<WalletComponents>
+  <Wallet>
+    <ConnectWallet>
+      <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>
+      <WalletDropdownLink 
+        icon={walletDropdownLinkCustomIconSvg} 
+        href="https://www.basetokenstore.com/" 
+        rel="noopener noreferrer" 
+      >
+        Base Token Store
+      </WalletDropdownLink>
+      <WalletDropdownDisconnect />
+    </WalletDropdown>
+  </Wallet>
+</WalletComponents>
+
+{/*
+// custom content 
+
+children: Not an HTML attribute, but a React concept. It represents the content between opening and closing tags of a component.
+- <WalletDropdownLink href="#">
+  <span>Profile</span>
+  <span>👤</span>
+</WalletDropdownLink>
+
+  <span className="font-bold">Bold</span> and <span className="italic">Italic</span>
+
+  Or update text?   
+
+*/}
+
+### Custom children components
+Accepts React children, enabling the use of custom elements, styled text, icons, and complex components.
+This allows for diverse customizations, including complex layouts and conditional rendering based on your app's state.
+
+```tsx
+// omitted for brevity
+<WalletDropdownLink icon="wallet" href="https://wallet.coinbase.com"> // [!code focus]
+  <span className="font-bold italic">Profile</span> // [!code focus]
+  <span> 🔵 </span> // [!code focus]
+</WalletDropdownLink> // [!code focus]
+```
+
+<WalletComponents>
+  <Wallet>
+    <ConnectWallet>
+      <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>
+      <WalletDropdownLink icon="wallet" href="https://wallet.coinbase.com">
+        <span className="font-bold italic">Profile</span>
+        <span> 🔵 </span>
+      </WalletDropdownLink>
+      <WalletDropdownDisconnect />
+    </WalletDropdown>
+  </Wallet>
+</WalletComponents>
+
+### Override styles
+You can override component styles using className.
+
+```tsx
+// omitted for brevity
+<WalletDropdownLink className="hover:bg-red-500" icon="wallet" href="https://wallet.coinbase.com" > // [!code focus]
+  Wallet // [!code focus]
+</WalletDropdownLink> // [!code focus]
+```
+<WalletComponents>
+  <Wallet>
+    <ConnectWallet>
+      <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>
+      <WalletDropdownLink className="hover:bg-red-500" icon="wallet" href="https://wallet.coinbase.com">
+        Wallet
+      </WalletDropdownLink>
+      <WalletDropdownDisconnect />
+    </WalletDropdown>
+  </Wallet>
+</WalletComponents>
+
 ## Props 
 - [`WalletDropdownLinkReact`](/wallet/types#walletdropdownlinkreact)