docs

coinbase · Aug 9, 2024 · 540d0d3 · 540d0d3
1 parent 9eb3282
commit 540d0d3
Show file tree

Hide file tree

Showing 3 changed files with 204 additions and 0 deletions.
diff --git a/site/docs/pages/wallet/types.mdx b/site/docs/pages/wallet/types.mdx
@@ -86,3 +86,18 @@ export type WalletDropdownLinkReact = {
   target?: string;
 };
 ```
+
+## `WalletDropdownFundLinkReact`
+
+```ts
+export type WalletDropdownFundLinkReact = {
+  className?: string; // Optional className override for the element
+  href: string;
+  icon?: ReactNode;
+  rel?: string;
+  target?: string;
+  text?: string;
+  type?: 'popup' | 'link';
+  size?: 's' | 'm' | 'l';
+};
+```
diff --git a/site/docs/pages/wallet/wallet-dropdown-fund-link.mdx b/site/docs/pages/wallet/wallet-dropdown-fund-link.mdx
@@ -0,0 +1,185 @@
+---
+title: Wallet Components & Utilities · OnchainKit
+description: Introduction to Wallet Components & Utilities
+---
+
+import {
+  ConnectWallet,
+  Wallet,
+  WalletDropdown,
+  WalletDropdownLink,
+  WalletDropdownDisconnect,
+  WalletDropdownFundLink,
+} from '../src/wallet';
+import { Address, Avatar, Name, Identity, EthBalance } from '../src/identity';
+import { color } from '@coinbase/onchainkit/theme';
+import AppWithRK from '../../components/AppWithRK';
+import WalletComponents from '../../components/WalletComponents';
+
+# `<WalletDropdownFundLink />`
+
+The Wallet Dropdown Fund Link provides an easy way for to access the [Funding](https://keys.coinbase.com/funding) flow for a Coinbase Smart Wallet.
+
+## Usage
+
+```tsx
+import {
+  // [!code focus]
+  ConnectWallet,
+  Wallet,
+  WalletDropdown,
+  WalletDropdownLink,
+  WalletDropdownDisconnect,
+  WalletDropdownFundLink, // [!code focus]
+} from '@coinbase/onchainkit/wallet'; // [!code focus]
+import {
+  Address,
+  Avatar,
+  Name,
+  Identity,
+  EthBalance,
+} from '@coinbase/onchainkit/identity';
+import { color } from '@coinbase/onchainkit/theme';
+
+export function WalletComponents() {
+  return (
+    <div className="flex justify-end">
+      <Wallet>
+        <ConnectWallet>
+          <Avatar className="h-6 w-6" />
+          <Name />
+        </ConnectWallet>
+        // [!code focus]
+        <WalletDropdown>
+          // [!code focus]
+          <Identity className="px-4 pt-3 pb-2" hasCopyAddressOnClick>
+            <Avatar />
+            <Name />
+            <Address className={color.foregroundMuted} />
+            <EthBalance />
+          </Identity>
+          <WalletDropdownFundLink /> // [!code focus]
+          <WalletDropdownLink icon="wallet" href="https://wallet.coinbase.com">
+            Wallet
+          </WalletDropdownLink>
+          <WalletDropdownDisconnect />
+        </WalletDropdown>
+      </Wallet>
+      // [!code focus]
+    </div>
+  );
+}
+```
+
+<WalletComponents>
+  <Wallet>
+    <ConnectWallet>
+      <Avatar className="h-6 w-6" />
+      <Name />
+    </ConnectWallet>
+    <WalletDropdown>
+      <WalletDropdownFundLink />
+      <WalletDropdownLink icon="wallet" href="https://wallet.coinbase.com">
+        Wallet
+      </WalletDropdownLink>
+      <WalletDropdownDisconnect />
+    </WalletDropdown>
+  </Wallet>
+</WalletComponents>
+
+### Override text
+
+You can override component text using the `text` prop.
+
+```tsx
+// omitted for brevity
+
+<Wallet>
+  <ConnectWallet>
+    ...
+  </ConnectWallet>
+  <WalletDropdown>
+    ...
+    <WalletDropdownFundLink text="Add crypto" /> // [!code focus]
+  </WalletDropdown>
+</Wallet>
+```
+
+<WalletComponents>
+  <Wallet>
+    <ConnectWallet>
+      <Avatar className="h-6 w-6" />
+      <Name />
+    </ConnectWallet>
+    <WalletDropdown>
+      <WalletDropdownFundLink text="Add crypto" />
+      <WalletDropdownDisconnect />
+    </WalletDropdown>
+  </Wallet>
+</WalletComponents>
+
+### Open in window
+
+You can override default link behavior to open the funding flow in a popup window by using the `type` prop.
+
+```tsx
+// omitted for brevity
+
+<Wallet>
+  <ConnectWallet>
+    ...
+  </ConnectWallet>
+  <WalletDropdown>
+    ...
+    <WalletDropdownFundLink type="window" /> // [!code focus]
+  </WalletDropdown>
+</Wallet>
+```
+
+<WalletComponents>
+  <Wallet>
+    <ConnectWallet>
+      <Avatar className="h-6 w-6" />
+      <Name />
+    </ConnectWallet>
+    <WalletDropdown>
+      <WalletDropdownFundLink type="window" />
+      <WalletDropdownDisconnect />
+    </WalletDropdown>
+  </Wallet>
+</WalletComponents>
+
+### Customizing the window size
+
+When using popup mode, you're able to customize the size of the popup window using the `size` prop. Valid values are `s`, `m`, and `l`.
+
+```tsx
+// omitted for brevity
+
+<Wallet>
+  <ConnectWallet>
+    ...
+  </ConnectWallet>
+  <WalletDropdown>
+    ...
+    <WalletDropdownFundLink type="window" size="s" /> // [!code focus]
+  </WalletDropdown>
+</Wallet>
+```
+
+<WalletComponents>
+  <Wallet>
+    <ConnectWallet>
+      <Avatar className="h-6 w-6" />
+      <Name />
+    </ConnectWallet>
+    <WalletDropdown>
+      <WalletDropdownFundLink type="window" size="s" />
+      <WalletDropdownDisconnect />
+    </WalletDropdown>
+  </Wallet>
+</WalletComponents>
+
+## Props
+
+- [`WalletDropdownFundLinkReact`](/wallet/types#walletdropdownfundlinkreact)
diff --git a/site/sidebar.ts b/site/sidebar.ts
@@ -262,6 +262,10 @@ export const sidebar = [
             text: 'Wallet',
             link: '/wallet/wallet',
           },
+          {
+            text: 'WalletDropdownFundLink',
+            link: '/wallet/wallet-dropdown-fund-link',
+          },
         ],
       },
       {