From 2bad47cc0da0aa93aaedbf3b99b4456045347d8b Mon Sep 17 00:00:00 2001
From: Paul Cramer <paulccramer@gmail.com>
Date: Tue, 30 Jul 2024 16:25:42 -0700
Subject: [PATCH] Remove src

---
 .../components/WalletDropdownBaseName.tsx     | 61 +++++++++++++++++++
 1 file changed, 61 insertions(+)
 create mode 100644 src/wallet/components/WalletDropdownBaseName.tsx

diff --git a/src/wallet/components/WalletDropdownBaseName.tsx b/src/wallet/components/WalletDropdownBaseName.tsx
new file mode 100644
index 0000000000..811a9b4b0b
--- /dev/null
+++ b/src/wallet/components/WalletDropdownBaseName.tsx
@@ -0,0 +1,61 @@
+import { base } from 'viem/chains';
+import { useAccount } from 'wagmi';
+import { useName } from '../../identity/hooks/useName';
+import { Spinner } from '../../internal/components/Spinner';
+import { baseNameSvg } from '../../internal/svg/baseNameSvg';
+import { cn, pressable, text } from '../../styles/theme';
+import type { WalletDropdownBaseNameReact } from '../types';
+
+export function WalletDropdownBaseName({
+  className,
+}: WalletDropdownBaseNameReact) {
+  const { address } = useAccount();
+
+  if (!address) {
+    return null;
+  }
+
+  const { data: baseName, isLoading } = useName({
+    address,
+    chain: base,
+  });
+
+  const hasBaseUserName = !!baseName;
+  const title = hasBaseUserName ? 'Go to profile' : 'Claim a Basename';
+  const href = hasBaseUserName
+    ? `https://www.base.org/name/${baseName}`
+    : 'https://www.base.org/names';
+
+  return (
+    <a
+      className={cn(
+        pressable.default,
+        'flex items-center px-4 py-2',
+        className,
+      )}
+      href={href}
+      target="_blank"
+      rel="noopener noreferrer"
+    >
+      {baseNameSvg && <div className="mr-2 h-5 w-5">{baseNameSvg}</div>}
+      <div className="flex items-center">
+        {isLoading ? (
+          <Spinner />
+        ) : (
+          <>
+            <span className={cn(text.body, 'shrink-0')}>{title}</span>
+            {!hasBaseUserName && (
+              <span
+                className={cn(
+                  'ml-2 rounded-full bg-[#E0E7FF] px-2 text-center font-bold font-inter text-[#4F46E5] text-[0.6875rem] uppercase leading-6',
+                )}
+              >
+                NEW
+              </span>
+            )}
+          </>
+        )}
+      </div>
+    </a>
+  );
+}