fix(addresses): reveal rendered addresses

.changeset/gov-ui-kit-2-11-2.md

@@ -0,0 +1,5 @@
+---
+"@aragon/app": patch
+---
+
+Adopt `AddressOutput` for visible address values.

apps/app/src/actions/capitalDistributor/components/capitalDistributorCreateCampaignActionDetails/capitalDistributorCreateCampaignActionDetails.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import {
+    AddressOutput,
     Avatar,
     addressUtils,
     ChainEntityType,
@@ -186,15 +187,20 @@ export const CapitalDistributorCreateCampaignActionDetails: React.FC<
                 </DefinitionList.Item>
             )}
             <DefinitionList.Item
-                copyValue={payoutTokenAddress}
-                link={{ href: payoutTokenLink }}
+                link={{ isOnchainEntity: true }}
                 term={t(
                     'app.actions.capitalDistributor.capitalDistributorCreateCampaignActionDetails.assetTerm',
                 )}
             >
-                {tokenSymbol
-                    ? `${tokenSymbol} (${addressUtils.truncateAddress(payoutTokenAddress)})`
-                    : addressUtils.truncateAddress(payoutTokenAddress)}
+                <AddressOutput
+                    address={payoutTokenAddress}
+                    href={payoutTokenLink}
+                    label={
+                        tokenSymbol
+                            ? `${tokenSymbol} (${addressUtils.truncateAddress(payoutTokenAddress)})`
+                            : undefined
+                    }
+                />
             </DefinitionList.Item>
             <DefinitionList.Item
                 term={t(

apps/app/src/actions/gaugeRegistrar/components/gaugeRegistrarGaugeListItem/gaugeRegistrarGaugeListItem.tsx

@@ -1,6 +1,6 @@
 import {
+    AddressOutput,
     Avatar,
-    addressUtils,
     Button,
     DataList,
     IconType,
@@ -55,7 +55,10 @@ export const GaugeRegistrarGaugeListItem: React.FC<
                     <div className="flex flex-col gap-1 font-normal leading-tight">
                         <p className="text-lg text-neutral-800">{gauge.name}</p>
                         <p className="text-neutral-500 text-sm">
-                            {addressUtils.truncateAddress(gauge.gaugeAddress)}
+                            <AddressOutput
+                                address={gauge.gaugeAddress}
+                                hasInteractiveAncestor={true}
+                            />
                         </p>
                     </div>
                 </div>

apps/app/src/actions/gaugeRegistrar/components/gaugeRegistrarRegisterGaugeActionDetails/gaugeRegistrarRegisterGaugeActionDetails.tsx

@@ -1,8 +1,8 @@
 'use client';
 
 import {
+    AddressOutput,
     Avatar,
-    addressUtils,
     ChainEntityType,
     DefinitionList,
     type IProposalAction,
@@ -114,13 +114,15 @@ export const GaugeRegistrarRegisterGaugeActionDetails: React.FC<
                 </DefinitionList.Item>
             )}
             <DefinitionList.Item
-                copyValue={qiTokenAddress}
-                link={{ href: qiTokenAddressLink }}
+                link={{ isOnchainEntity: true }}
                 term={t(
                     'app.actions.gaugeRegistrar.gaugeRegistrarRegisterGaugeActionDetails.qiTokenTerm',
                 )}
             >
-                {addressUtils.truncateAddress(qiTokenAddress)}
+                <AddressOutput
+                    address={qiTokenAddress}
+                    href={qiTokenAddressLink}
+                />
             </DefinitionList.Item>
             <DefinitionList.Item
                 term={t(
@@ -132,13 +134,15 @@ export const GaugeRegistrarRegisterGaugeActionDetails: React.FC<
                     : 'Borrow'}
             </DefinitionList.Item>
             <DefinitionList.Item
-                copyValue={rewardControllerAddress}
-                link={{ href: rewardControllerAddressLink }}
+                link={{ isOnchainEntity: true }}
                 term={t(
                     'app.actions.gaugeRegistrar.gaugeRegistrarRegisterGaugeActionDetails.rewardControllerTerm',
                 )}
             >
-                {addressUtils.truncateAddress(rewardControllerAddress)}
+                <AddressOutput
+                    address={rewardControllerAddress}
+                    href={rewardControllerAddressLink}
+                />
             </DefinitionList.Item>
         </DefinitionList.Container>
     );

apps/app/src/actions/gaugeVoter/components/gaugeVoterCreateGaugeActionDetails/gaugeVoterCreateGaugeActionDetails.tsx

@@ -1,8 +1,8 @@
 'use client';
 
 import {
+    AddressOutput,
     Avatar,
-    addressUtils,
     ChainEntityType,
     DefinitionList,
     type IProposalAction,
@@ -47,13 +47,12 @@ export const GaugeVoterCreateGaugeActionDetails: React.FC<
     return (
         <DefinitionList.Container>
             <DefinitionList.Item
-                copyValue={gaugeAddress}
-                link={{ href: gaugeAddressLink }}
+                link={{ isOnchainEntity: true }}
                 term={t(
                     'app.actions.gaugeVoter.gaugeVoterCreateGaugeActionDetails.gaugeAddressTerm',
                 )}
             >
-                {addressUtils.truncateAddress(gaugeAddress)}
+                <AddressOutput address={gaugeAddress} href={gaugeAddressLink} />
             </DefinitionList.Item>
             <DefinitionList.Item
                 term={t(

apps/app/src/actions/gaugeVoter/components/gaugeVoterGaugeListItem/gaugeVoterGaugeListItem.tsx

@@ -1,6 +1,6 @@
 import {
+    AddressOutput,
     Avatar,
-    addressUtils,
     Button,
     DataList,
     IconType,
@@ -55,7 +55,10 @@ export const GaugeVoterGaugeListItem: React.FC<
                     <div className="flex flex-col gap-1 font-normal leading-tight">
                         <p className="text-lg text-neutral-800">{gauge.name}</p>
                         <p className="text-neutral-500 text-sm">
-                            {addressUtils.truncateAddress(gauge.address)}
+                            <AddressOutput
+                                address={gauge.address}
+                                hasInteractiveAncestor={true}
+                            />
                         </p>
                     </div>
                 </div>

apps/app/src/actions/gaugeVoter/components/gaugeVoterUpdateGaugeMetadataActionDetails/gaugeVoterUpdateGaugeMetadataActionDetails.tsx

@@ -1,8 +1,8 @@
 'use client';
 
 import {
+    AddressOutput,
     Avatar,
-    addressUtils,
     ChainEntityType,
     DefinitionList,
     type IProposalAction,
@@ -47,13 +47,12 @@ export const GaugeVoterUpdateGaugeMetadataActionDetails: React.FC<
     return (
         <DefinitionList.Container>
             <DefinitionList.Item
-                copyValue={gaugeAddress}
-                link={{ href: gaugeAddressLink }}
+                link={{ isOnchainEntity: true }}
                 term={t(
                     'app.actions.gaugeVoter.gaugeVoterUpdateGaugeMetadataActionDetails.gaugeAddressTerm',
                 )}
             >
-                {addressUtils.truncateAddress(gaugeAddress)}
+                <AddressOutput address={gaugeAddress} href={gaugeAddressLink} />
             </DefinitionList.Item>
             <DefinitionList.Item
                 term={t(

apps/app/src/daos/alchemix/components/alchemixSubmitVote/alchemixSubmitVote.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import {
+    AddressOutput,
     addressUtils,
     Button,
     Card,
@@ -177,7 +178,6 @@ export const AlchemixSubmitVote: React.FC<IAlchemixSubmitVoteProps> = (
     );
     const delegateeName =
         delegateeEnsName ?? addressUtils.truncateAddress(delegatee);
-    const userName = userEnsName ?? addressUtils.truncateAddress(address);
 
     const disabledOptions: IDisabledVotingOption[] = [];
 
@@ -293,7 +293,12 @@ export const AlchemixSubmitVote: React.FC<IAlchemixSubmitVoteProps> = (
             <div className="flex min-w-0 grow flex-col gap-0.5">
                 <div className="flex items-center gap-2">
                     <p className="truncate font-semibold text-base text-neutral-800 leading-tight">
-                        {delegateeName}
+                        {delegatee != null && (
+                            <AddressOutput
+                                address={delegatee}
+                                label={delegateeEnsName ?? undefined}
+                            />
+                        )}
                     </p>
                     <Tag
                         label={t(
@@ -334,7 +339,12 @@ export const AlchemixSubmitVote: React.FC<IAlchemixSubmitVoteProps> = (
                     <div className="flex min-w-0 grow flex-col gap-0.5">
                         <div className="flex items-center gap-2">
                             <p className="truncate font-semibold text-base text-neutral-800 leading-tight">
-                                {userName}
+                                {address != null && (
+                                    <AddressOutput
+                                        address={address}
+                                        label={userEnsName ?? undefined}
+                                    />
+                                )}
                             </p>
                             <Tag
                                 label={t(

apps/app/src/modules/application/components/navigations/navigationDao/navigationDao.tsx

@@ -1,11 +1,9 @@
 'use client';
 
 import {
-    addressUtils,
+    AddressOutput,
     ChainEntityType,
-    Clipboard,
     DaoAvatar,
-    Link,
     Wallet,
 } from '@aragon/gov-ui-kit';
 import classNames from 'classnames';
@@ -135,15 +133,12 @@ export const NavigationDao: React.FC<INavigationDaoProps> = (props) => {
                         <p className="truncate text-lg text-neutral-800 sm:text-xl">
                             {daoDisplayName}
                         </p>
-                        <Clipboard className="w-full" copyValue={dao.address}>
-                            <Link
-                                className="truncate text-neutral-500 text-sm sm:text-base"
-                                href={addressLink}
-                                isExternal={true}
-                            >
-                                {addressUtils.truncateAddress(dao.address)}
-                            </Link>
-                        </Clipboard>
+                        <AddressOutput
+                            address={dao.address}
+                            className="w-full text-neutral-500 text-sm sm:text-base"
+                            href={addressLink}
+                            isExternal={true}
+                        />
                     </div>
                 </div>
             </Navigation.Dialog>

apps/app/src/modules/application/components/navigations/navigationDao/navigationDaoHome.tsx

@@ -1,4 +1,4 @@
-import { DaoAvatar } from '@aragon/gov-ui-kit';
+import { AddressOutput, DaoAvatar } from '@aragon/gov-ui-kit';
 import classNames from 'classnames';
 import type { ComponentProps } from 'react';
 import type { IDao } from '@/shared/api/daoService';
@@ -15,6 +15,7 @@ export interface INavigationDaoHome extends ComponentProps<'button'> {
 export const NavigationDaoHome: React.FC<INavigationDaoHome> = (props) => {
     const { dao, className, ...otherProps } = props;
     const daoDisplayName = daoUtils.getDaoDisplayName(dao);
+    const daoName = dao.name?.trim();
 
     const daoAvatar = ipfsUtils.cidToSrc(dao.avatar);
 
@@ -29,7 +30,12 @@ export const NavigationDaoHome: React.FC<INavigationDaoHome> = (props) => {
         <button className={buttonClassName} {...otherProps}>
             <DaoAvatar name={daoDisplayName} size="lg" src={daoAvatar} />
             <p className="hidden truncate font-normal text-base text-neutral-800 leading-tight md:block">
-                {daoDisplayName}
+                <AddressOutput
+                    address={dao.address}
+                    className="truncate"
+                    hasInteractiveAncestor={true}
+                    label={daoName || undefined}
+                />
             </p>
         </button>
     );

apps/app/src/modules/application/components/navigations/navigationWizard/navigationWizard.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import {
+    AddressOutput,
     addressUtils,
     DaoAvatar,
     Icon,
@@ -128,9 +129,11 @@ export const NavigationWizard: React.FC<INavigationWizardProps> = (props) => {
                     </p>
                     {displayDao != null && (
                         <div className="flex items-center gap-x-2">
-                            <p className="truncate text-nowrap text-neutral-500 text-sm leading-tight">
-                                {displayDaoName}
-                            </p>
+                            <AddressOutput
+                                address={displayDao.address}
+                                className="truncate text-nowrap text-neutral-500 text-sm leading-tight"
+                                label={displayDao.name?.trim() || undefined}
+                            />
                             <DaoAvatar
                                 name={displayDaoName}
                                 size="sm"

apps/app/src/modules/application/dialogs/userDialog/userDialog.tsx

@@ -1,11 +1,9 @@
 import {
-    addressUtils,
+    AddressOutput,
     Button,
     ChainEntityType,
-    Clipboard,
     Dialog,
     IconType,
-    Link,
     MemberAvatar,
     useBlockExplorer,
 } from '@aragon/gov-ui-kit';
@@ -44,8 +42,6 @@ export const UserDialog: React.FC<IUserDialogProps> = (props) => {
     });
     const { data: ensAvatar } = useEnsAvatar(ensName);
 
-    const formattedAddress = addressUtils.truncateAddress(address);
-
     const { buildEntityUrl } = useBlockExplorer();
     const addressLink = buildEntityUrl({
         type: ChainEntityType.ADDRESS,
@@ -147,22 +143,18 @@ export const UserDialog: React.FC<IUserDialogProps> = (props) => {
                         <p className="font-normal text-neutral-800 text-xl leading-tight">
                             {displayName}
                         </p>
-                        <Clipboard copyValue={address}>
-                            <Link
-                                className="truncate text-base"
-                                href={addressLink}
-                                isExternal={true}
-                            >
-                                {formattedAddress}
-                            </Link>
-                        </Clipboard>
+                        <AddressOutput
+                            address={address}
+                            className="text-base"
+                            href={addressLink}
+                            isExternal={true}
+                        />
                     </div>
                 ) : (
-                    <Clipboard copyValue={address}>
-                        <span className="truncate text-neutral-800 text-xl">
-                            {formattedAddress}
-                        </span>
-                    </Clipboard>
+                    <AddressOutput
+                        address={address}
+                        className="text-neutral-800 text-xl"
+                    />
                 )}
             </div>
             <div className="flex flex-col gap-3 px-8">