diff --git a/apps/evm/src/components/Username/UsernameSpan.tsx b/apps/evm/src/components/Username/UsernameSpan.tsx new file mode 100644 index 0000000000..05190bbdd7 --- /dev/null +++ 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) => ( + {username} +); + +export default UsernameSpan; diff --git a/apps/evm/src/components/Username/index.tsx b/apps/evm/src/components/Username/index.tsx index 5f1b85b912..845b183c49 100644 --- 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 = ({ address, + children, className, + showCopyAddress = false, showProvider = true, showTooltip = true, shouldEllipseAddress = true, @@ -42,21 +48,27 @@ export const Username: React.FC = ({ ? t('web3DomainNames.providers.ens') : t('web3DomainNames.providers.spaceId'); - let dom = shouldEllipseAddress ? ( + const addressComponent = shouldEllipseAddress ? ( ) : ( - {address} + ); + let dom = children ? children({ innerContent: addressComponent }) : addressComponent; + if (!isGetAddressDomainNameLoading && chainDomainName) { + const chainDomainNameSpan = ; + const domainNameComponent = children + ? children({ innerContent: chainDomainNameSpan }) + : chainDomainNameSpan; dom = ( -
+
{showProvider && ( )} - {chainDomainName} + {domainNameComponent} {showTooltip && ( = ({ } className="inline-flex" > - + )}
); } - return dom; + return ( + <> + {dom} + {showCopyAddress && ( + + )} + + ); }; export default Username; diff --git a/apps/evm/src/containers/CopyAddressButton/index.tsx b/apps/evm/src/containers/CopyAddressButton/index.tsx index e6da41d88f..b9b4aa2622 100644 --- a/apps/evm/src/containers/CopyAddressButton/index.tsx +++ b/apps/evm/src/containers/CopyAddressButton/index.tsx @@ -1,4 +1,4 @@ -import { Icon } from 'components'; +import { Icon, Tooltip } from 'components'; import useCopyToClipboard from 'hooks/useCopyToClipboard'; import { useTranslation } from 'libs/translations'; import { cn } from 'utilities'; @@ -6,17 +6,19 @@ import { cn } from 'utilities'; export interface CopyAddressButtonProps extends Omit, 'onClick'> { address: string; + showTooltip?: boolean; } export const CopyAddressButton: React.FC = ({ 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 = ( ); + + return showTooltip ? ( + + {dom} + + ) : ( + dom + ); }; diff --git a/apps/evm/src/containers/Layout/ConnectButton/PrimeButton/index.tsx b/apps/evm/src/containers/Layout/ConnectButton/PrimeButton/index.tsx index b7e3236ddf..fac67700e1 100644 --- 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 = ({ <> {t('PrimeButton.primeLogoAlt')} - + ); diff --git a/apps/evm/src/containers/Layout/ConnectButton/index.tsx b/apps/evm/src/containers/Layout/ConnectButton/index.tsx index 193ac8bacc..8bc7fe9303 100644 --- 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 = ({ const content = accountAddress ? ( = ({
{!!accountAddress && ( -
- - - +
+
)} diff --git a/apps/evm/src/containers/Layout/Header/TopBar/Breadcrumbs/index.tsx b/apps/evm/src/containers/Layout/Header/TopBar/Breadcrumbs/index.tsx index f51af2fb47..d2587e3ce9 100644 --- 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" /> - - {}
); break; diff --git a/apps/evm/src/libs/translations/translations/en.json b/apps/evm/src/libs/translations/translations/en.json index eff65735f6..2ebc91601d 100644 --- 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 index c4cf0b6e64..1e445a3a05 100644 --- 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 }) => (
  • - - - + + {({ innerContent }) => ( + +
    {innerContent}
    + + )} +
    {reason && ( diff --git a/apps/evm/src/pages/VoterLeaderboard/LeaderboardTable/index.tsx b/apps/evm/src/pages/VoterLeaderboard/LeaderboardTable/index.tsx index e1948acc36..ef7d60ebe0 100644 --- 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 = ({ renderCell: (voter, rowIndex) => ( {rowIndex + 1 + offset} - - - + + {({ innerContent }) => ( + + {innerContent} + + )} + ), },