From f2a4fb693ecee01fa3a6794dccafdf1e30bbd093 Mon Sep 17 00:00:00 2001
From: Alec Chen <93971719+0xAlec@users.noreply.github.com>
Date: Thu, 8 Aug 2024 21:19:20 -0700
Subject: [PATCH] `WalletDropdownFundLink` component

---
 src/internal/svg/fundWallet.tsx               | 17 +++++++
 .../WalletDropdownFundLink.test.tsx           | 47 +++++++++++++++++++
 .../components/WalletDropdownFundLink.tsx     | 44 +++++++++++++++++
 3 files changed, 108 insertions(+)
 create mode 100644 src/internal/svg/fundWallet.tsx
 create mode 100644 src/wallet/components/WalletDropdownFundLink.test.tsx
 create mode 100644 src/wallet/components/WalletDropdownFundLink.tsx

diff --git a/src/internal/svg/fundWallet.tsx b/src/internal/svg/fundWallet.tsx
new file mode 100644
index 00000000000..91aa26df62c
--- /dev/null
+++ b/src/internal/svg/fundWallet.tsx
@@ -0,0 +1,17 @@
+import { fill } from '../../styles/theme';
+
+export const FundWalletSvg = (
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M8 16C12.4183 16 16 12.4183 16 8C16 3.58172 12.4183 0 8 0C3.58172 0 0 3.58172 0 8C0 12.4183 3.58172 16 8 16ZM1.63962 4.33685C5.1477 6.36224 9.63276 5.16047 11.6582 1.65239C9.63276 5.16047 10.8345 9.64553 14.3413 11.6702C10.8345 9.64553 6.35021 10.846 4.32482 14.3541C6.35021 10.846 5.1477 6.36224 1.63962 4.33685Z"
+      fill="#0A0B0D"
+      className={fill.defaultReverse}
+    />
+  </svg>
+);
diff --git a/src/wallet/components/WalletDropdownFundLink.test.tsx b/src/wallet/components/WalletDropdownFundLink.test.tsx
new file mode 100644
index 00000000000..f3bdb358541
--- /dev/null
+++ b/src/wallet/components/WalletDropdownFundLink.test.tsx
@@ -0,0 +1,47 @@
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+import { WalletDropdownFundLink } from './WalletDropdownFundLink';
+
+const FUNDING_URL =
+  'http://keys.coinbase.com/funding?dappName=&dappUrl=http://localhost:3000/';
+
+describe('WalletDropdownFundLink', () => {
+  it('renders correctly with default props', () => {
+    render(<WalletDropdownFundLink />);
+
+    const linkElement = screen.getByRole('link');
+    expect(linkElement).toBeInTheDocument();
+    expect(linkElement).toHaveAttribute('href', FUNDING_URL);
+    expect(screen.getByText('Deposit Funds')).toBeInTheDocument();
+  });
+
+  it('renders correctly with custom icon element', () => {
+    const customIcon = <svg aria-label="custom-icon" />;
+    render(
+      <WalletDropdownFundLink icon={customIcon}>
+        Link Text
+      </WalletDropdownFundLink>
+    );
+
+    const linkElement = screen.getByRole('link');
+    expect(linkElement).toBeInTheDocument();
+    expect(linkElement).toHaveAttribute('href', FUNDING_URL);
+    expect(screen.getByText('Link Text')).toBeInTheDocument();
+    expect(screen.getByLabelText('custom-icon')).toBeInTheDocument();
+  });
+
+  it('renders correctly with target and rel attributes', () => {
+    render(
+      <WalletDropdownFundLink target="_blank" rel="noopener noreferrer">
+        Link Text
+      </WalletDropdownFundLink>
+    );
+
+    const linkElement = screen.getByRole('link');
+    expect(linkElement).toBeInTheDocument();
+    expect(linkElement).toHaveAttribute('href', FUNDING_URL);
+    expect(linkElement).toHaveAttribute('target', '_blank');
+    expect(linkElement).toHaveAttribute('rel', 'noopener noreferrer');
+    expect(screen.getByText('Link Text')).toBeInTheDocument();
+  });
+});
diff --git a/src/wallet/components/WalletDropdownFundLink.tsx b/src/wallet/components/WalletDropdownFundLink.tsx
new file mode 100644
index 00000000000..01deaeb40c0
--- /dev/null
+++ b/src/wallet/components/WalletDropdownFundLink.tsx
@@ -0,0 +1,44 @@
+import { isValidElement, useMemo } from 'react';
+import { FundWalletSvg } from '../../internal/svg/fundWallet';
+import { cn, pressable, text } from '../../styles/theme';
+import type { WalletDropdownLinkReact } from '../types';
+
+export function WalletDropdownFundLink({
+  children,
+  className,
+  icon,
+  rel,
+  target,
+}: WalletDropdownLinkReact) {
+  const iconSvg = useMemo(() => {
+    if (icon === undefined) {
+      return FundWalletSvg;
+    }
+    if (isValidElement(icon)) {
+      return icon;
+    }
+  }, [icon]);
+
+  const currentURL = window.location.href;
+  const tabName = document.title;
+
+  return (
+    <a
+      className={cn(
+        pressable.default,
+        'relative flex items-center px-4 py-3',
+        className
+      )}
+      href={`http://keys.coinbase.com/funding?dappName=${tabName}&dappUrl=${currentURL}`}
+      target={target}
+      rel={rel}
+    >
+      <div className="-translate-y-1/2 absolute top-1/2 left-4 flex h-4 w-4 items-center justify-center">
+        {iconSvg}
+      </div>
+      <span className={cn(text.body, 'pl-6')}>
+        {children || 'Deposit Funds'}
+      </span>
+    </a>
+  );
+}