consistent border rad; click-to-copy (#778)

base-org · Aug 2, 2024 · cc9c916 · cc9c916
1 parent 5ef3a21
commit cc9c916
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 20 deletions.
diff --git a/apps/web/src/components/Basenames/RegistrationFlow.tsx b/apps/web/src/components/Basenames/RegistrationFlow.tsx
@@ -115,7 +115,7 @@ export function RegistrationFlow() {
 
   return (
     <>
-      {isDevelopment && <RegistrationStateSwitcherDynamic />}
+      {false && isDevelopment && <RegistrationStateSwitcherDynamic />}
       <main className={mainClasses}>
         {/* 1. Brand & Search */}
         <Transition

diff --git a/apps/web/src/components/ConnectWalletButton/ConnectWalletButton.tsx b/apps/web/src/components/ConnectWalletButton/ConnectWalletButton.tsx
@@ -1,28 +1,29 @@
+import { EthBalance, Identity, Name } from '@coinbase/onchainkit/identity';
+import {
+  ConnectWallet,
+  Wallet,
+  WalletDropdown,
+  WalletDropdownBaseName,
+  WalletDropdownDisconnect,
+  WalletDropdownLink,
+} from '@coinbase/onchainkit/wallet';
 import { useChainModal, useConnectModal } from '@rainbow-me/rainbowkit';
 import { Button, ButtonSizes, ButtonVariants } from 'apps/web/src/components/Button/Button';
 import { UserAvatar } from 'apps/web/src/components/ConnectWalletButton/UserAvatar';
+import { Icon } from 'apps/web/src/components/Icon/Icon';
 import { ShinyButton } from 'apps/web/src/components/ShinyButton/ShinyButton';
-import sanitizeEventString from 'base-ui/utils/sanitizeEventString';
+import useBasenameChain from 'apps/web/src/hooks/useBasenameChain';
 import logEvent, {
   ActionType,
   AnalyticsEventImportance,
   ComponentType,
   identify,
 } from 'base-ui/utils/logEvent';
+import sanitizeEventString from 'base-ui/utils/sanitizeEventString';
 import classNames from 'classnames';
 import { useCallback, useEffect, useState } from 'react';
+import { useCopyToClipboard } from 'usehooks-ts';
 import { useAccount, useChains } from 'wagmi';
-import {
-  ConnectWallet,
-  Wallet,
-  WalletDropdown,
-  WalletDropdownLink,
-  WalletDropdownDisconnect,
-  WalletDropdownBaseName,
-} from '@coinbase/onchainkit/wallet';
-import { Name, Identity, EthBalance } from '@coinbase/onchainkit/identity';
-import { Icon } from 'apps/web/src/components/Icon/Icon';
-import useBasenameChain from 'apps/web/src/hooks/useBasenameChain';
 
 export enum ConnectWalletButtonVariants {
   Default,
@@ -48,7 +49,6 @@ export function ConnectWalletButton({
   // Rainbow kit
   const { openConnectModal } = useConnectModal();
   const { openChainModal } = useChainModal();
-
   const [isMounted, setIsMounted] = useState<boolean>(false);
 
   useEffect(() => {
@@ -60,6 +60,8 @@ export function ConnectWalletButton({
   const chains = useChains();
   const chainSupported = !!chain && chains.includes(chain);
   const { basenameChain } = useBasenameChain();
+  const [, copy] = useCopyToClipboard();
+  const copyAddress = useCallback(() => void copy(address ?? ''), [address, copy]);
 
   useEffect(() => {
     if (address) {
@@ -132,16 +134,21 @@ export function ConnectWalletButton({
 
   return (
     <Wallet>
-      <ConnectWallet withWalletAggregator className="bg-transparent p-2  hover:bg-gray-40/20">
+      <ConnectWallet
+        withWalletAggregator
+        className="rounded-none bg-transparent p-2 hover:bg-gray-40/20"
+      >
         <UserAvatar />
         <Name chain={basenameChain} className={userAddressClasses} />
       </ConnectWallet>
-      <WalletDropdown className="bg-white font-sans shadow-md">
-        <Identity
-          className={classNames('px-4 pb-2 pt-3 font-display hover:bg-gray-40/20', className)}
-        >
+      <WalletDropdown className="rounded bg-white font-sans shadow-md">
+        <Identity className={classNames('px-4 pb-2 pt-3 font-display', className)}>
           <UserAvatar />
-          <Name chain={basenameChain} className="font-display" />
+          <Name
+            onClick={copyAddress}
+            chain={basenameChain}
+            className="cursor-pointer font-display transition-all hover:opacity-65"
+          />
           <EthBalance className="font-display" />
         </Identity>
         <WalletDropdownBaseName className="font-display hover:bg-gray-40/20" />