refactor: better Username styles

VenusProtocol · Dec 16, 2024 · e7b6cad · e7b6cad
1 parent eb9c8ab
commit e7b6cad
Show file tree

Hide file tree

Showing 9 changed files with 85 additions and 32 deletions.
diff --git a/apps/evm/src/components/Username/UsernameSpan.tsx b/apps/evm/src/components/Username/UsernameSpan.tsx
@@ -0,0 +1,12 @@
+import { cn } from 'utilities';
+
+interface UsernameSpanProps {
+  className?: string;
+  username: string;
+}
+
+const UsernameSpan = ({ className, username }: UsernameSpanProps) => (
+  <span className={cn('truncate', className)}>{username}</span>
+);
+
+export default UsernameSpan;
diff --git a/apps/evm/src/components/Username/index.tsx b/apps/evm/src/components/Username/index.tsx
@@ -1,21 +1,27 @@
 import { useGetAddressDomainName } from 'clients/api';
 import { Icon, Tooltip } from 'components';
 import EllipseAddress, { type EllipseAddressProps } from 'components/EllipseAddress';
+import { CopyAddressButton } from 'containers/CopyAddressButton';
 import { useTranslation } from 'libs/translations';
 import { useChainId } from 'libs/wallet';
 import { ChainId } from 'types';
-import { cn, truncateAddress } from 'utilities';
+import { truncateAddress } from 'utilities';
 import type { Address } from 'viem';
+import UsernameSpan from './UsernameSpan';
 
 type UsernameProps = {
   showProvider?: boolean;
   showTooltip?: boolean;
+  showCopyAddress?: boolean;
   shouldEllipseAddress?: boolean;
+  children?: (props: { innerContent: React.ReactNode }) => React.ReactNode;
 } & EllipseAddressProps;
 
 export const Username: React.FC<UsernameProps> = ({
   address,
+  children,
   className,
+  showCopyAddress = false,
   showProvider = true,
   showTooltip = true,
   shouldEllipseAddress = true,
@@ -42,21 +48,27 @@ export const Username: React.FC<UsernameProps> = ({
       ? t('web3DomainNames.providers.ens')
       : t('web3DomainNames.providers.spaceId');
 
-  let dom = shouldEllipseAddress ? (
+  const addressComponent = shouldEllipseAddress ? (
     <EllipseAddress className={className} address={address} {...ellipseAddressProps} />
   ) : (
-    <span className={className}>{address}</span>
+    <UsernameSpan className={className} username={address} />
   );
 
+  let dom = children ? children({ innerContent: addressComponent }) : addressComponent;
+
   if (!isGetAddressDomainNameLoading && chainDomainName) {
+    const chainDomainNameSpan = <UsernameSpan className={className} username={chainDomainName} />;
+    const domainNameComponent = children
+      ? children({ innerContent: chainDomainNameSpan })
+      : chainDomainNameSpan;
     dom = (
-      <div className={cn('flex flex-row items-center space-x-1', className)}>
+      <div className="flex flex-row items-center text-nowrap space-x-1 mr-1">
         {showProvider && (
           <Tooltip title={providerText}>
             <Icon className="cursor-pointer" name={providerIcon} />
           </Tooltip>
         )}
-        <span>{chainDomainName}</span>
+        {domainNameComponent}
         {showTooltip && (
           <Tooltip
             title={
@@ -72,14 +84,21 @@ export const Username: React.FC<UsernameProps> = ({
             }
             className="inline-flex"
           >
-            <Icon className="cursor-pointer" name="info" />
+            <Icon className="cursor-pointer " name="info" />
           </Tooltip>
         )}
       </div>
     );
   }
 
-  return dom;
+  return (
+    <>
+      {dom}
+      {showCopyAddress && (
+        <CopyAddressButton className="shrink-0" address={address} showTooltip={!!chainDomainName} />
+      )}
+    </>
+  );
 };
 
 export default Username;
diff --git a/apps/evm/src/containers/CopyAddressButton/index.tsx b/apps/evm/src/containers/CopyAddressButton/index.tsx
@@ -1,22 +1,24 @@
-import { Icon } from 'components';
+import { Icon, Tooltip } from 'components';
 import useCopyToClipboard from 'hooks/useCopyToClipboard';
 import { useTranslation } from 'libs/translations';
 import { cn } from 'utilities';
 
 export interface CopyAddressButtonProps
   extends Omit<React.HTMLAttributes<HTMLButtonElement>, 'onClick'> {
   address: string;
+  showTooltip?: boolean;
 }
 
 export const CopyAddressButton: React.FC<CopyAddressButtonProps> = ({
   address,
   className,
+  showTooltip,
   ...otherProps
 }) => {
   const { t } = useTranslation();
-  const copyToClipboard = useCopyToClipboard(t('interactive.copy.address'));
+  const copyToClipboard = useCopyToClipboard(t('interactive.copy.address.name'));
 
-  return (
+  const dom = (
     <button
       type="button"
       className={cn(
@@ -29,4 +31,12 @@ export const CopyAddressButton: React.FC<CopyAddressButtonProps> = ({
       <Icon name="copy" className="h-4 w-4 text-inherit" />
     </button>
   );
+
+  return showTooltip ? (
+    <Tooltip title={t('interactive.copy.address.tooltip')} className="inline-flex">
+      {dom}
+    </Tooltip>
+  ) : (
+    dom
+  );
 };
diff --git a/apps/evm/src/containers/Layout/ConnectButton/PrimeButton/index.tsx b/apps/evm/src/containers/Layout/ConnectButton/PrimeButton/index.tsx
@@ -27,7 +27,12 @@ export const PrimeButton: React.FC<PrimeButtonProps> = ({
       <>
         <img className="mr-2 w-5" src={primeLogoSrc} alt={t('PrimeButton.primeLogoAlt')} />
 
-        <Username address={accountAddress} showTooltip={false} shouldEllipseAddress={false} />
+        <Username
+          address={accountAddress}
+          className="max-w-20 sm:max-w-full"
+          showTooltip={false}
+          showProvider={false}
+        />
       </>
     </SecondaryButton>
   );

diff --git a/apps/evm/src/containers/Layout/ConnectButton/index.tsx b/apps/evm/src/containers/Layout/ConnectButton/index.tsx
@@ -4,7 +4,6 @@ import { useTranslation } from 'libs/translations';
 import { useAccountAddress, useAuthModal } from 'libs/wallet';
 import { cn } from 'utilities';
 
-import { CopyAddressButton } from 'containers/CopyAddressButton';
 import { useState } from 'react';
 import { useDisconnect } from 'wagmi';
 import { PrimeButton } from './PrimeButton';
@@ -58,6 +57,7 @@ export const ConnectButton: React.FC<ConnectButtonProps> = ({
 
   const content = accountAddress ? (
     <Username
+      className="max-w-30 sm:max-w-full"
       showProvider={false}
       showTooltip={false}
       address={accountAddress}
@@ -96,10 +96,8 @@ export const ConnectButton: React.FC<ConnectButtonProps> = ({
       <Modal isOpen={isAccountModalOpen} handleClose={closeAccountModal}>
         <div className="space-y-10">
           {!!accountAddress && (
-            <div className="flex items-center space-x-2 break-all">
-              <Username className="flex-1" address={accountAddress} shouldEllipseAddress={false} />
-
-              <CopyAddressButton className="shrink-0" address={accountAddress} />
+            <div className="flex truncate items-center justify-between space-x-2 break-all">
+              <Username address={accountAddress} shouldEllipseAddress={false} showCopyAddress />
             </div>
           )}
 

diff --git a/apps/evm/src/containers/Layout/Header/TopBar/Breadcrumbs/index.tsx b/apps/evm/src/containers/Layout/Header/TopBar/Breadcrumbs/index.tsx
@@ -3,7 +3,6 @@ import { type Params, matchPath, useLocation } from 'react-router-dom';
 
 import { Username } from 'components';
 import { Subdirectory, routes } from 'constants/routing';
-import { CopyAddressButton } from 'containers/CopyAddressButton';
 import { Link } from 'containers/Link';
 import { useTranslation } from 'libs/translations';
 import { cn } from 'utilities';
@@ -104,10 +103,9 @@ export const Breadcrumbs: React.FC = () => {
                 address={params.address}
                 showProvider={false}
                 showTooltip={false}
+                showCopyAddress
                 ellipseBreakpoint="xxl"
               />
-
-              {<CopyAddressButton address={params.address} />}
             </div>
           );
           break;

diff --git a/apps/evm/src/libs/translations/translations/en.json b/apps/evm/src/libs/translations/translations/en.json
@@ -307,7 +307,10 @@
   },
   "interactive": {
     "copy": {
-      "address": "Address"
+      "address": {
+        "name": "Address",
+        "tooltip": "Copy Address"
+      }
     },
     "copyToClipboard": "{{name}} copied to clipboard"
   },

diff --git a/apps/evm/src/pages/Proposal/VoteSummary/index.tsx b/apps/evm/src/pages/Proposal/VoteSummary/index.tsx
@@ -85,12 +85,16 @@ const VoteSummary = ({
         {voters.map(({ address, votesMantissa, reason }) => (
           <li key={address} css={styles.voteFrom}>
             <div css={styles.address}>
-              <Link
-                to={routes.governanceVoter.path.replace(':address', address)}
-                css={[styles.blueText, styles.addressText]}
-              >
-                <Username address={address} />
-              </Link>
+              <Username className="max-w-40 sm:max-w-full" address={address}>
+                {({ innerContent }) => (
+                  <Link
+                    to={routes.governanceVoter.path.replace(':address', address)}
+                    css={[styles.blueText, styles.addressText]}
+                  >
+                    <div className="truncate max-w-40 sm:max-w-fit">{innerContent}</div>
+                  </Link>
+                )}
+              </Username>
 
               {reason && (
                 <Tooltip title={reason}>

diff --git a/apps/evm/src/pages/VoterLeaderboard/LeaderboardTable/index.tsx b/apps/evm/src/pages/VoterLeaderboard/LeaderboardTable/index.tsx
@@ -39,12 +39,16 @@ export const LeaderboardTable: React.FC<LeaderboardTableProps> = ({
         renderCell: (voter, rowIndex) => (
           <Typography css={styles.inline} color="textPrimary" variant="small2" component="div">
             {rowIndex + 1 + offset}
-            <Link
-              to={routes.governanceVoter.path.replace(':address', voter.address)}
-              css={styles.address}
-            >
-              <Username address={voter.address} ellipseBreakpoint="lg" />
-            </Link>
+            <Username address={voter.address} ellipseBreakpoint="lg">
+              {({ innerContent }) => (
+                <Link
+                  to={routes.governanceVoter.path.replace(':address', voter.address)}
+                  css={styles.address}
+                >
+                  {innerContent}
+                </Link>
+              )}
+            </Username>
           </Typography>
         ),
       },