From f0c063dcb399d8143821cd5c30b67c9feff100bf Mon Sep 17 00:00:00 2001 From: Kevin Davis Date: Thu, 27 Aug 2026 19:32:03 +0200 Subject: [PATCH 1/7] fix(addresses): reveal rendered addresses Use AddressOutput for visible address slots while leaving string-only and hash paths unchanged.\n\nRefs APP-1088 --- .changeset/gov-ui-kit-2-11-2.md | 5 ++ ...DistributorCreateCampaignActionDetails.tsx | 16 +++-- .../gaugeRegistrarGaugeListItem.tsx | 7 +- ...ugeRegistrarRegisterGaugeActionDetails.tsx | 21 ++++-- .../gaugeVoterCreateGaugeActionDetails.tsx | 7 +- .../gaugeVoterGaugeListItem.tsx | 7 +- ...eVoterUpdateGaugeMetadataActionDetails.tsx | 7 +- apps/app/src/assets/locales/en.json | 3 +- .../alchemixSubmitVote/alchemixSubmitVote.tsx | 16 ++++- .../navigationDao/navigationDao.tsx | 19 ++---- .../navigationDao/navigationDaoHome.tsx | 10 ++- .../navigationWizard/navigationWizard.tsx | 9 ++- .../dialogs/userDialog/userDialog.tsx | 30 ++++----- .../simulationFlowVisualizationItem.tsx | 49 ++++++-------- .../dialogs/dispatchDialog/dispatchDialog.tsx | 18 ++++-- .../governanceBodiesFieldItemDefault.tsx | 6 +- .../dashboardDefaultHeader.tsx | 15 ++++- .../dashboardOnboarding/adminOnboarding.tsx | 4 +- .../dashboardOnboarding.tsx | 8 +-- .../nonAdminOnboarding.tsx | 4 +- .../daoDashboardPageClient.tsx | 14 ++-- .../assetAddressSelectAddAddressView.test.tsx | 2 +- .../components/assetInput/assetInputToken.tsx | 14 ++-- .../components/daoInfoAside/daoInfoAside.tsx | 13 ++-- .../financeDetailsList/financeDetailsList.tsx | 7 +- .../linkedAccountInfo/linkedAccountInfo.tsx | 10 +-- .../transactionList/transactionList.test.tsx | 2 +- .../transactionList/transactionListItem.tsx | 9 +-- .../daoMemberDetailsPageClient.tsx | 20 ++++-- .../daoProposalDetailsPageClient.tsx | 17 +++-- .../components/daoHierarchy/daoHierarchy.tsx | 41 +++++------- .../daoPluginInfo/daoPluginInfo.tsx | 12 +++- .../daoPolicyDetailsInfo.tsx | 21 ++++-- .../daoProcessDetailsInfo.tsx | 12 +++- .../daoVersionInfo/daoVersionInfo.tsx | 25 ++++++-- .../allowedActionsList.tsx | 22 +++---- .../permissionDetailContent.tsx | 2 +- .../permissionsGraph/permissionGraphNode.tsx | 24 ++++++- .../permissionNodeDetailPanel.tsx | 34 ++++++++-- .../permissionAddressListItem.tsx | 10 ++- .../permissionsList/permissionEntityCell.tsx | 20 +++++- .../permissionEntityListItem.tsx | 19 ++++-- .../unrecognizedConditionSlot.tsx | 20 ++++-- .../votingPowerConditionSlot.tsx | 18 ++++-- .../updateDaoContractsCard.tsx | 9 +-- .../daoPolicyDetailsPageClient.tsx | 64 +++++++++++++------ ...ossChainControllerForwardMessageAction.tsx | 11 ++-- .../gaugeVoterGaugeListItemStructure.tsx | 14 ++-- .../gaugeVoterGaugeDetailsDialogContent.tsx | 14 ++-- .../gaugeVoterVoteDialogItem.test.tsx | 6 +- .../gaugeVoterVoteDialogItem.tsx | 8 ++- ...pVotingTerminalMultiBodySummaryDefault.tsx | 9 ++- .../tokenProcessBodyField.tsx | 9 ++- .../governanceBodyInfo/governanceBodyInfo.tsx | 21 ++++-- .../components/page/pageHeader/pageHeader.tsx | 8 ++- pnpm-lock.yaml | 16 ++--- pnpm-workspace.yaml | 2 +- 57 files changed, 537 insertions(+), 303 deletions(-) create mode 100644 .changeset/gov-ui-kit-2-11-2.md diff --git a/.changeset/gov-ui-kit-2-11-2.md b/.changeset/gov-ui-kit-2-11-2.md new file mode 100644 index 0000000000..2b3b33e650 --- /dev/null +++ b/.changeset/gov-ui-kit-2-11-2.md @@ -0,0 +1,5 @@ +--- +"@aragon/app": patch +--- + +Adopt `AddressOutput` for visible address values. diff --git a/apps/app/src/actions/capitalDistributor/components/capitalDistributorCreateCampaignActionDetails/capitalDistributorCreateCampaignActionDetails.tsx b/apps/app/src/actions/capitalDistributor/components/capitalDistributorCreateCampaignActionDetails/capitalDistributorCreateCampaignActionDetails.tsx index 225fa0e31f..3188f1c51e 100644 --- a/apps/app/src/actions/capitalDistributor/components/capitalDistributorCreateCampaignActionDetails/capitalDistributorCreateCampaignActionDetails.tsx +++ b/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< )} - {tokenSymbol - ? `${tokenSymbol} (${addressUtils.truncateAddress(payoutTokenAddress)})` - : addressUtils.truncateAddress(payoutTokenAddress)} +

{gauge.name}

- {addressUtils.truncateAddress(gauge.gaugeAddress)} +

diff --git a/apps/app/src/actions/gaugeRegistrar/components/gaugeRegistrarRegisterGaugeActionDetails/gaugeRegistrarRegisterGaugeActionDetails.tsx b/apps/app/src/actions/gaugeRegistrar/components/gaugeRegistrarRegisterGaugeActionDetails/gaugeRegistrarRegisterGaugeActionDetails.tsx index f6565c8635..316f129f25 100644 --- a/apps/app/src/actions/gaugeRegistrar/components/gaugeRegistrarRegisterGaugeActionDetails/gaugeRegistrarRegisterGaugeActionDetails.tsx +++ b/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< )} - {addressUtils.truncateAddress(qiTokenAddress)} + - {addressUtils.truncateAddress(rewardControllerAddress)} + ); diff --git a/apps/app/src/actions/gaugeVoter/components/gaugeVoterCreateGaugeActionDetails/gaugeVoterCreateGaugeActionDetails.tsx b/apps/app/src/actions/gaugeVoter/components/gaugeVoterCreateGaugeActionDetails/gaugeVoterCreateGaugeActionDetails.tsx index 85033d9706..29852928f4 100644 --- a/apps/app/src/actions/gaugeVoter/components/gaugeVoterCreateGaugeActionDetails/gaugeVoterCreateGaugeActionDetails.tsx +++ b/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 ( - {addressUtils.truncateAddress(gaugeAddress)} +

{gauge.name}

- {addressUtils.truncateAddress(gauge.address)} +

diff --git a/apps/app/src/actions/gaugeVoter/components/gaugeVoterUpdateGaugeMetadataActionDetails/gaugeVoterUpdateGaugeMetadataActionDetails.tsx b/apps/app/src/actions/gaugeVoter/components/gaugeVoterUpdateGaugeMetadataActionDetails/gaugeVoterUpdateGaugeMetadataActionDetails.tsx index 68dc2d4476..1cf1d6824b 100644 --- a/apps/app/src/actions/gaugeVoter/components/gaugeVoterUpdateGaugeMetadataActionDetails/gaugeVoterUpdateGaugeMetadataActionDetails.tsx +++ b/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 ( - {addressUtils.truncateAddress(gaugeAddress)} + = ( ); const delegateeName = delegateeEnsName ?? addressUtils.truncateAddress(delegatee); - const userName = userEnsName ?? addressUtils.truncateAddress(address); const disabledOptions: IDisabledVotingOption[] = []; @@ -293,7 +293,12 @@ export const AlchemixSubmitVote: React.FC = (

- {delegateeName} + {delegatee != null && ( + + )}

= (

- {userName} + {address != null && ( + + )}

= (props) => {

{daoDisplayName}

- - - {addressUtils.truncateAddress(dao.address)} - - +
diff --git a/apps/app/src/modules/application/components/navigations/navigationDao/navigationDaoHome.tsx b/apps/app/src/modules/application/components/navigations/navigationDao/navigationDaoHome.tsx index 9cbf4fc427..fe17fccb93 100644 --- a/apps/app/src/modules/application/components/navigations/navigationDao/navigationDaoHome.tsx +++ b/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 = (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 = (props) => { ); diff --git a/apps/app/src/modules/application/components/navigations/navigationWizard/navigationWizard.tsx b/apps/app/src/modules/application/components/navigations/navigationWizard/navigationWizard.tsx index b69468878c..44f7ffa8e2 100644 --- a/apps/app/src/modules/application/components/navigations/navigationWizard/navigationWizard.tsx +++ b/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 = (props) => {

{displayDao != null && (
-

- {displayDaoName} -

+ = (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 = (props) => {

{displayName}

- - - {formattedAddress} - - +
) : ( - - - {formattedAddress} - - + )}
diff --git a/apps/app/src/modules/capitalFlow/components/simulationFlowVisualization/simulationFlowVisualizationItem.tsx b/apps/app/src/modules/capitalFlow/components/simulationFlowVisualization/simulationFlowVisualizationItem.tsx index b954b031ec..998e8eaf76 100644 --- a/apps/app/src/modules/capitalFlow/components/simulationFlowVisualization/simulationFlowVisualizationItem.tsx +++ b/apps/app/src/modules/capitalFlow/components/simulationFlowVisualization/simulationFlowVisualizationItem.tsx @@ -1,9 +1,8 @@ import { - addressUtils, + AddressOutput, ChainEntityType, DaoAvatar, Icon, - Link, } from '@aragon/gov-ui-kit'; import classNames from 'classnames'; import { ipfsUtils } from '@/shared/utils/ipfsUtils'; @@ -93,34 +92,28 @@ const ItemAddress: React.FC = ({ item, addressHref, showFallbackAddress, -}) => { - const linkText = item.ens ?? addressUtils.truncateAddress(item.address); +}) => ( +
+

+ {item.label} +

+ + {addressHref && ( + + )} - return ( -
-

- {item.label} + {showFallbackAddress && ( +

+

- - {addressHref && ( - - {linkText} - - )} - - {showFallbackAddress && ( -

- {addressUtils.truncateAddress(item.address)} -

- )} -
- ); -}; + )} +
+); interface IItemTokenDeltasProps { /** diff --git a/apps/app/src/modules/capitalFlow/dialogs/dispatchDialog/dispatchDialog.tsx b/apps/app/src/modules/capitalFlow/dialogs/dispatchDialog/dispatchDialog.tsx index 834893cb0b..6f080849ac 100644 --- a/apps/app/src/modules/capitalFlow/dialogs/dispatchDialog/dispatchDialog.tsx +++ b/apps/app/src/modules/capitalFlow/dialogs/dispatchDialog/dispatchDialog.tsx @@ -1,4 +1,5 @@ import { + AddressOutput, addressUtils, Button, Card, @@ -123,6 +124,11 @@ export const DispatchDialog: React.FC = (props) => { ? `${baseTypeName} (${t(`app.capitalFlow.dispatchDialog.modelType.${modelType}`)})` : baseTypeName; + const policyAddressLink = buildEntityUrl({ + type: ChainEntityType.ADDRESS, + id: policy.address, + }); + const shouldShowDropdown = tenderlySupport && policy.strategy.type === PolicyStrategyType.MULTI_DISPATCH; @@ -172,19 +178,19 @@ export const DispatchDialog: React.FC = (props) => { - {addressUtils.truncateAddress(policy.address)} + diff --git a/apps/app/src/modules/createDao/components/createProcessForm/createProcessFormGovernance/fields/governanceBodyField/governanceBodiesFieldItemDefault.tsx b/apps/app/src/modules/createDao/components/createProcessForm/createProcessFormGovernance/fields/governanceBodyField/governanceBodiesFieldItemDefault.tsx index d7ae84f6e9..1d27aa49c2 100644 --- a/apps/app/src/modules/createDao/components/createProcessForm/createProcessFormGovernance/fields/governanceBodyField/governanceBodiesFieldItemDefault.tsx +++ b/apps/app/src/modules/createDao/components/createProcessForm/createProcessFormGovernance/fields/governanceBodyField/governanceBodiesFieldItemDefault.tsx @@ -1,5 +1,5 @@ import { - addressUtils, + AddressOutput, ChainEntityType, DefinitionList, } from '@aragon/gov-ui-kit'; @@ -66,12 +66,12 @@ export const GovernanceBodiesFieldItemDefault: React.FC< )} - {addressUtils.truncateAddress(body.address)} + {createProcessFormUtils.isBodySafe(body) && ( = ( } description={dao.description} stats={stats} - title={daoDisplayName} + title={ + + } /> ); }; diff --git a/apps/app/src/modules/dashboard/components/dashboardOnboarding/adminOnboarding.tsx b/apps/app/src/modules/dashboard/components/dashboardOnboarding/adminOnboarding.tsx index 04d2be2fbf..77bda0fbf1 100644 --- a/apps/app/src/modules/dashboard/components/dashboardOnboarding/adminOnboarding.tsx +++ b/apps/app/src/modules/dashboard/components/dashboardOnboarding/adminOnboarding.tsx @@ -6,9 +6,9 @@ import { useTranslations } from '@/shared/components/translationsProvider'; export interface IAdminOnboardingProps { /** - * Display name of the connected user (ENS or truncated address). + * Display name of the connected user (ENS name or address output). */ - displayName?: string; + displayName?: React.ReactNode; /** * Callback to open the governance designer dialog. */ diff --git a/apps/app/src/modules/dashboard/components/dashboardOnboarding/dashboardOnboarding.tsx b/apps/app/src/modules/dashboard/components/dashboardOnboarding/dashboardOnboarding.tsx index bc787a2da2..6bd7f9d7d2 100644 --- a/apps/app/src/modules/dashboard/components/dashboardOnboarding/dashboardOnboarding.tsx +++ b/apps/app/src/modules/dashboard/components/dashboardOnboarding/dashboardOnboarding.tsx @@ -1,6 +1,6 @@ 'use client'; -import { addressUtils, invariant } from '@aragon/gov-ui-kit'; +import { AddressOutput, invariant } from '@aragon/gov-ui-kit'; import type { Hex } from 'viem'; import { useWalletAccount } from '@/modules/application/hooks/useWalletAccount'; import { useWalletConnected } from '@/modules/application/hooks/useWalletConnected'; @@ -41,9 +41,9 @@ export const DashboardOnboarding: React.FC = ( network: dao.network, }); - const displayName = - ensName ?? - (address ? addressUtils.truncateAddress(address) : undefined); + const displayName = address ? ( + + ) : undefined; const daoUrl = daoUtils.getDaoUrl(dao)!; diff --git a/apps/app/src/modules/dashboard/components/dashboardOnboarding/nonAdminOnboarding.tsx b/apps/app/src/modules/dashboard/components/dashboardOnboarding/nonAdminOnboarding.tsx index 537c17a9ed..ce16de7adf 100644 --- a/apps/app/src/modules/dashboard/components/dashboardOnboarding/nonAdminOnboarding.tsx +++ b/apps/app/src/modules/dashboard/components/dashboardOnboarding/nonAdminOnboarding.tsx @@ -5,9 +5,9 @@ import { useTranslations } from '@/shared/components/translationsProvider'; export interface INonAdminOnboardingProps { /** - * Display name of the connected user (ENS or truncated address). + * Display name of the connected user (ENS name or address output). */ - displayName?: string; + displayName?: React.ReactNode; /** * Name of the DAO. */ diff --git a/apps/app/src/modules/dashboard/pages/daoDashboardPage/daoDashboardPageClient.tsx b/apps/app/src/modules/dashboard/pages/daoDashboardPage/daoDashboardPageClient.tsx index 803e86efb4..f851dc3202 100644 --- a/apps/app/src/modules/dashboard/pages/daoDashboardPage/daoDashboardPageClient.tsx +++ b/apps/app/src/modules/dashboard/pages/daoDashboardPage/daoDashboardPageClient.tsx @@ -1,7 +1,7 @@ 'use client'; import { - addressUtils, + AddressOutput, ChainEntityType, DateFormat, DefinitionList, @@ -75,7 +75,6 @@ export const DaoDashboardPageClient: React.FC = ( adminPlugin != null && nonAdminProcessPlugins.length === 0; const daoEns = daoUtils.getDaoEns(dao); - const truncatedAddress = addressUtils.truncateAddress(dao.address); const daoLaunchedAt = formatterUtils.formatDate(dao.blockTimestamp * 1000, { format: DateFormat.YEAR_MONTH, @@ -128,13 +127,18 @@ export const DaoDashboardPageClient: React.FC = (

- {truncatedAddress} + {daoEns != null && ( component', () => { screen.getByRole('searchbox'), '0x7f39C581F595B53c5cb19bD0b3f8dA6c935E2Ca0', ); - await user.click(screen.getByText('Wrapped stETH')); + await user.click(screen.getByRole('button', { name: /Wrapped stETH/ })); expect(onAssetClick).toHaveBeenCalledWith( expect.objectContaining({ diff --git a/apps/app/src/modules/finance/components/assetInput/assetInputToken.tsx b/apps/app/src/modules/finance/components/assetInput/assetInputToken.tsx index 2bbc7ab109..50d8776846 100644 --- a/apps/app/src/modules/finance/components/assetInput/assetInputToken.tsx +++ b/apps/app/src/modules/finance/components/assetInput/assetInputToken.tsx @@ -1,4 +1,4 @@ -import { Avatar, addressUtils } from '@aragon/gov-ui-kit'; +import { AddressOutput, Avatar } from '@aragon/gov-ui-kit'; import classNames from 'classnames'; import type { ComponentProps } from 'react'; import { useTranslations } from '@/shared/components/translationsProvider'; @@ -22,9 +22,15 @@ export const AssetInputToken: React.FC = (props) => { {...otherProps} > {token && } - {token - ? token.symbol || addressUtils.truncateAddress(token.address) - : t('app.finance.assetInput.token.trigger')} + {token ? ( + + ) : ( + t('app.finance.assetInput.token.trigger') + )}
); }; diff --git a/apps/app/src/modules/finance/components/daoInfoAside/daoInfoAside.tsx b/apps/app/src/modules/finance/components/daoInfoAside/daoInfoAside.tsx index 9816a33202..cff256ce82 100644 --- a/apps/app/src/modules/finance/components/daoInfoAside/daoInfoAside.tsx +++ b/apps/app/src/modules/finance/components/daoInfoAside/daoInfoAside.tsx @@ -1,7 +1,7 @@ 'use client'; import { - addressUtils, + AddressOutput, Button, ChainEntityType, Collapsible, @@ -74,13 +74,18 @@ export const DaoInfoAside: React.FC = (props) => { {networkDefinitions[resolvedNetwork].name} - {addressUtils.truncateAddress(resolvedAddress)} + diff --git a/apps/app/src/modules/finance/components/financeDetailsList/financeDetailsList.tsx b/apps/app/src/modules/finance/components/financeDetailsList/financeDetailsList.tsx index 81d539ef98..090cd10a04 100644 --- a/apps/app/src/modules/finance/components/financeDetailsList/financeDetailsList.tsx +++ b/apps/app/src/modules/finance/components/financeDetailsList/financeDetailsList.tsx @@ -1,5 +1,5 @@ import { - addressUtils, + AddressOutput, Button, ChainEntityType, DefinitionList, @@ -49,11 +49,10 @@ export const FinanceDetailsList: React.FC = (

- {addressUtils.truncateAddress(address)} + {daoEns && ( = (props) => { {networkDefinitions[network].name} - {addressUtils.truncateAddress(plugin.address)} + {plugin.description && ( component', () => { await user.click(screen.getByText('0 ABC')); expect(onTransactionClick).not.toHaveBeenCalled(); - await user.click(screen.getByText('Executed')); + await user.click(screen.getByRole('link', { name: /Executed/ })); expect(onTransactionClick).toHaveBeenCalledWith(executionTransaction); }); diff --git a/apps/app/src/modules/finance/components/transactionList/transactionListItem.tsx b/apps/app/src/modules/finance/components/transactionList/transactionListItem.tsx index ac37de5811..db7b51942e 100644 --- a/apps/app/src/modules/finance/components/transactionList/transactionListItem.tsx +++ b/apps/app/src/modules/finance/components/transactionList/transactionListItem.tsx @@ -1,7 +1,6 @@ 'use client'; import { - addressUtils, TransactionType as DataListTransactionType, type ITransactionDataListItemProps, TransactionDataListItem, @@ -85,11 +84,9 @@ const getExecutionLabel = ( return daoUtils.getPluginName(sourcePlugin); } - const label = transaction.source ?? transaction.fromAddress; - - return addressUtils.isAddress(label) - ? addressUtils.truncateAddress(label) - : label; + // The kit renders `label` through AddressOutput when it is an address, so + // hand it the raw value instead of a pre-truncated string. + return transaction.source ?? transaction.fromAddress; }; const buildExecutionProps = ( diff --git a/apps/app/src/modules/governance/pages/daoMemberDetailsPage/daoMemberDetailsPageClient.tsx b/apps/app/src/modules/governance/pages/daoMemberDetailsPage/daoMemberDetailsPageClient.tsx index bc2554515c..6640878103 100644 --- a/apps/app/src/modules/governance/pages/daoMemberDetailsPage/daoMemberDetailsPageClient.tsx +++ b/apps/app/src/modules/governance/pages/daoMemberDetailsPage/daoMemberDetailsPageClient.tsx @@ -1,6 +1,7 @@ 'use client'; import { + AddressOutput, addressUtils, ChainEntityType, DateFormat, @@ -236,7 +237,13 @@ export const DaoMemberDetailsPageClient: React.FC< } breadcrumbs={pageBreadcrumbs} description={ensRecords?.description ?? undefined} - title={memberName} + title={ + + } /> @@ -286,13 +293,18 @@ export const DaoMemberDetailsPageClient: React.FC< > - {truncatedAddress} + {ensName && addressUrl && ( - {creatorName} + = ({ dao, permissionsHref }) => { term={t('app.settings.daoSettingsInfo.ens')} >
- - - {dao.ens} - - +

{t('app.settings.daoSettingsInfo.notChangeable')}

@@ -89,17 +84,13 @@ const DaoInfo: React.FC = ({ dao, permissionsHref }) => { term={t('app.settings.daoSettingsInfo.address')} >
- - - {addressUtils.truncateAddress(dao.address)} - - +

{t('app.settings.daoSettingsInfo.notChangeable')}

diff --git a/apps/app/src/modules/settings/components/daoPluginInfo/daoPluginInfo.tsx b/apps/app/src/modules/settings/components/daoPluginInfo/daoPluginInfo.tsx index 048f78a4c4..be6f367dc7 100644 --- a/apps/app/src/modules/settings/components/daoPluginInfo/daoPluginInfo.tsx +++ b/apps/app/src/modules/settings/components/daoPluginInfo/daoPluginInfo.tsx @@ -1,5 +1,5 @@ import { - addressUtils, + AddressOutput, Button, ChainEntityType, DefinitionList, @@ -61,7 +61,6 @@ export const DaoPluginInfo: React.FC = (props) => { {/* Target */} {hasLinkedAccounts && targetAddress != null && ( = (props) => { id: targetAddress, }), isExternal: true, + isOnchainEntity: true, }} term={t('app.settings.daoPolicyDetailsInfo.target')} > - {addressUtils.truncateAddress(targetAddress)} + )} diff --git a/apps/app/src/modules/settings/components/daoPolicyDetailsInfo/daoPolicyDetailsInfo.tsx b/apps/app/src/modules/settings/components/daoPolicyDetailsInfo/daoPolicyDetailsInfo.tsx index bebdb4fe0e..3814a3e7f9 100644 --- a/apps/app/src/modules/settings/components/daoPolicyDetailsInfo/daoPolicyDetailsInfo.tsx +++ b/apps/app/src/modules/settings/components/daoPolicyDetailsInfo/daoPolicyDetailsInfo.tsx @@ -1,5 +1,5 @@ import { - addressUtils, + AddressOutput, Button, ChainEntityType, DateFormat, @@ -119,18 +119,20 @@ export const DaoPolicyDetailsInfo: React.FC = ( {/* Plugin address */} - {addressUtils.truncateAddress(policy.address)} + {/* Target */} {policy.daoAddress && ( = ( id: policy.daoAddress, }), isExternal: true, + isOnchainEntity: true, }} term={t('app.settings.daoPolicyDetailsInfo.target')} > - {addressUtils.truncateAddress(policy.daoAddress)} + )} diff --git a/apps/app/src/modules/settings/components/daoProcessDetailsInfo/daoProcessDetailsInfo.tsx b/apps/app/src/modules/settings/components/daoProcessDetailsInfo/daoProcessDetailsInfo.tsx index 720c070ae2..87a147a68a 100644 --- a/apps/app/src/modules/settings/components/daoProcessDetailsInfo/daoProcessDetailsInfo.tsx +++ b/apps/app/src/modules/settings/components/daoProcessDetailsInfo/daoProcessDetailsInfo.tsx @@ -1,5 +1,5 @@ import { - addressUtils, + AddressOutput, Button, ChainEntityType, DefinitionList, @@ -128,7 +128,6 @@ export const DaoProcessDetailsInfo: React.FC = ( {/* Target */} {hasLinkedAccounts && targetAddress != null && ( = ( id: targetAddress, }), isExternal: true, + isOnchainEntity: true, }} term={t('app.settings.daoPolicyDetailsInfo.target')} > - {addressUtils.truncateAddress(targetAddress)} + )} diff --git a/apps/app/src/modules/settings/components/daoVersionInfo/daoVersionInfo.tsx b/apps/app/src/modules/settings/components/daoVersionInfo/daoVersionInfo.tsx index b2d8e45d24..2fcf1cca22 100644 --- a/apps/app/src/modules/settings/components/daoVersionInfo/daoVersionInfo.tsx +++ b/apps/app/src/modules/settings/components/daoVersionInfo/daoVersionInfo.tsx @@ -1,5 +1,5 @@ import { - addressUtils, + AddressOutput, ChainEntityType, DefinitionList, } from '@aragon/gov-ui-kit'; @@ -39,18 +39,24 @@ export const DaoVersionInfo: React.FC = (props) => { return ( - {addressUtils.truncateAddress(dao.address)} + {processPlugins?.map((plugin) => ( = (props) => { type: ChainEntityType.ADDRESS, id: plugin.meta.address, }), + isOnchainEntity: true, }} term={daoUtils.getPluginName(plugin.meta)} > - {addressUtils.truncateAddress(plugin.meta.address)} + ))} diff --git a/apps/app/src/modules/settings/components/executeSelectorConditionSlot/allowedActionsList.tsx b/apps/app/src/modules/settings/components/executeSelectorConditionSlot/allowedActionsList.tsx index fdec016df7..a69a5aaddf 100644 --- a/apps/app/src/modules/settings/components/executeSelectorConditionSlot/allowedActionsList.tsx +++ b/apps/app/src/modules/settings/components/executeSelectorConditionSlot/allowedActionsList.tsx @@ -1,9 +1,8 @@ 'use client'; import { - addressUtils, + AddressOutput, ChainEntityType, - Link, useBlockExplorer, } from '@aragon/gov-ui-kit'; import { useTranslations } from '@/shared/components/translationsProvider'; @@ -55,16 +54,15 @@ export const AllowedActionsList: React.FC = ({ {EMPTY_ALLOWED_ACTION_VALUE} ) : ( - - {addressUtils.truncateAddress(action.target)} - + + + )}
diff --git a/apps/app/src/modules/settings/components/permissionsGraph/permissionDetailContent.tsx b/apps/app/src/modules/settings/components/permissionsGraph/permissionDetailContent.tsx index 2d55c81b35..e9a2fde401 100644 --- a/apps/app/src/modules/settings/components/permissionsGraph/permissionDetailContent.tsx +++ b/apps/app/src/modules/settings/components/permissionsGraph/permissionDetailContent.tsx @@ -35,7 +35,7 @@ const toDetailsEntity = ( detail?: IPermissionDetailEntity, ): IPermissionDetailsEntity => ({ address, - label: detail?.label ?? addressUtils.truncateAddress(address), + label: detail?.label, isSentinel: isSentinelAddress(address), detailName: detail?.label, }); diff --git a/apps/app/src/modules/settings/components/permissionsGraph/permissionGraphNode.tsx b/apps/app/src/modules/settings/components/permissionsGraph/permissionGraphNode.tsx index b9a2705dc1..aa06b5136f 100644 --- a/apps/app/src/modules/settings/components/permissionsGraph/permissionGraphNode.tsx +++ b/apps/app/src/modules/settings/components/permissionsGraph/permissionGraphNode.tsx @@ -1,4 +1,10 @@ -import { Avatar, DaoAvatar, Tag } from '@aragon/gov-ui-kit'; +import { + AddressOutput, + Avatar, + addressUtils, + DaoAvatar, + Tag, +} from '@aragon/gov-ui-kit'; import type { NodeProps } from '@xyflow/react'; import classNames from 'classnames'; import { PermissionEntityExternalBrandId } from '@/shared/api/daoService'; @@ -66,6 +72,10 @@ export const PermissionGraphNode: React.FC> = ({ kind === 'actor' && address.toLowerCase() === ANY_ADDR.toLowerCase(); const isSelected = selectionRole != null || active === true; const subtitleKey = getPermissionNodeTypeKey(data); + // Unresolved entities are labelled with their own truncated address, so + // that case renders as an address. The node card owns the click, so the + // reveal stays passive and the copy control defaults away. + const isAddressLabel = label === addressUtils.truncateAddress(address); return (
> = ({ >
- {label} + {isAddressLabel ? ( + + ) : ( + + {label} + + )} {t(subtitleKey)} diff --git a/apps/app/src/modules/settings/components/permissionsGraph/permissionNodeDetailPanel.tsx b/apps/app/src/modules/settings/components/permissionsGraph/permissionNodeDetailPanel.tsx index a2c439ecc9..1c4c643cb7 100644 --- a/apps/app/src/modules/settings/components/permissionsGraph/permissionNodeDetailPanel.tsx +++ b/apps/app/src/modules/settings/components/permissionsGraph/permissionNodeDetailPanel.tsx @@ -1,6 +1,7 @@ 'use client'; import { + AddressOutput, AlertCard, addressUtils, Button, @@ -37,6 +38,13 @@ export const PermissionNodeDetailPanel: React.FC< ANY_ADDR, ); + // Unresolved nodes are labelled with their own truncated address, so that + // case renders as an address instead of a name. The panel header is the + // drag handle and the address row below owns the copy control, so the + // reveal stays passive here. + const isAddressLabel = + addressUtils.truncateAddress(node.address) === node.label; + const explorerUrl = isSentinelAddress ? undefined : buildEntityUrl({ @@ -56,9 +64,17 @@ export const PermissionNodeDetailPanel: React.FC< >
-

- {node.label} -

+ {isAddressLabel ? ( + + ) : ( +

+ {node.label} +

+ )} {node.tag != null && ( )} @@ -102,13 +118,19 @@ export const PermissionNodeDetailPanel: React.FC< {!isSentinelAddress && ( - {addressUtils.truncateAddress(node.address)} + )} diff --git a/apps/app/src/modules/settings/components/permissionsList/permissionAddressListItem.tsx b/apps/app/src/modules/settings/components/permissionsList/permissionAddressListItem.tsx index 8f769a119a..a7a2a86c76 100644 --- a/apps/app/src/modules/settings/components/permissionsList/permissionAddressListItem.tsx +++ b/apps/app/src/modules/settings/components/permissionsList/permissionAddressListItem.tsx @@ -1,4 +1,5 @@ import { + AddressOutput, addressUtils, ChainEntityType, DefinitionList, @@ -25,12 +26,15 @@ export const PermissionAddressListItem: React.FC< return ( - {truncatedAddress} + ); }; diff --git a/apps/app/src/modules/settings/components/permissionsList/permissionEntityCell.tsx b/apps/app/src/modules/settings/components/permissionsList/permissionEntityCell.tsx index 390c2ae0dc..47af39172b 100644 --- a/apps/app/src/modules/settings/components/permissionsList/permissionEntityCell.tsx +++ b/apps/app/src/modules/settings/components/permissionsList/permissionEntityCell.tsx @@ -1,4 +1,10 @@ -import { Avatar, addressUtils, DaoAvatar, Tag } from '@aragon/gov-ui-kit'; +import { + AddressOutput, + Avatar, + addressUtils, + DaoAvatar, + Tag, +} from '@aragon/gov-ui-kit'; import { PermissionEntityExternalBrandId } from '@/shared/api/daoService'; import { ANY_ADDR } from '../../constants/permissionSentinels'; import type { IPermissionEntity } from '../../utils/permissionEntityUtils'; @@ -12,7 +18,17 @@ export const PermissionEntityCell: React.FC = ({ entity, }) => ( - {entity.label} + {/* Unresolved entities are labelled with their own truncated address, + so that case renders as an address instead of a name. */} + {entity.label === addressUtils.truncateAddress(entity.address) ? ( + + ) : ( + {entity.label} + )} {entity.type === 'dao' && ( )} diff --git a/apps/app/src/modules/settings/components/permissionsList/permissionEntityListItem.tsx b/apps/app/src/modules/settings/components/permissionsList/permissionEntityListItem.tsx index 512849a1c0..e0972b722e 100644 --- a/apps/app/src/modules/settings/components/permissionsList/permissionEntityListItem.tsx +++ b/apps/app/src/modules/settings/components/permissionsList/permissionEntityListItem.tsx @@ -1,16 +1,19 @@ -import { DefinitionList } from '@aragon/gov-ui-kit'; +import { AddressOutput, DefinitionList } from '@aragon/gov-ui-kit'; import type { IPermissionEntity } from '../../utils/permissionEntityUtils'; import { PermissionAddressListItem } from './permissionAddressListItem'; /** * The subset of a resolved permission entity the detail rows actually render. * Kept narrow so callers without a full resolution (e.g. graph nodes) can map - * into it. + * into it. `label` is optional for those callers: without a resolved name the + * row falls back to rendering the raw address itself. */ export type IPermissionDetailsEntity = Pick< IPermissionEntity, - 'address' | 'label' | 'isSentinel' | 'detailName' ->; + 'address' | 'isSentinel' | 'detailName' +> & { + label?: IPermissionEntity['label']; +}; interface IPermissionEntityListItemProps { entity: IPermissionDetailsEntity; @@ -24,10 +27,16 @@ export const PermissionEntityListItem: React.FC< if (entity.isSentinel) { // Sentinels resolve to a human label whose truncated address is the // same string, so a description line would duplicate the primary. - return ( + // Without that label the raw sentinel address is what shows, so it + // renders as an address and owns its own copy control. + return entity.label != null ? ( {entity.label} + ) : ( + + + ); } diff --git a/apps/app/src/modules/settings/components/unrecognizedConditionSlot/unrecognizedConditionSlot.tsx b/apps/app/src/modules/settings/components/unrecognizedConditionSlot/unrecognizedConditionSlot.tsx index 73175f9b6a..e2b6cca361 100644 --- a/apps/app/src/modules/settings/components/unrecognizedConditionSlot/unrecognizedConditionSlot.tsx +++ b/apps/app/src/modules/settings/components/unrecognizedConditionSlot/unrecognizedConditionSlot.tsx @@ -1,7 +1,7 @@ 'use client'; import { - addressUtils, + AddressOutput, ChainEntityType, DefinitionList, useBlockExplorer, @@ -32,17 +32,25 @@ export const UnrecognizedConditionSlot: React.FC<
- {conditionAddress != null - ? addressUtils.truncateAddress(conditionAddress) - : '-'} + {conditionAddress != null ? ( + + ) : ( + '-' + )}
diff --git a/apps/app/src/modules/settings/components/votingPowerConditionSlot/votingPowerConditionSlot.tsx b/apps/app/src/modules/settings/components/votingPowerConditionSlot/votingPowerConditionSlot.tsx index 251e32bf62..f9ef157378 100644 --- a/apps/app/src/modules/settings/components/votingPowerConditionSlot/votingPowerConditionSlot.tsx +++ b/apps/app/src/modules/settings/components/votingPowerConditionSlot/votingPowerConditionSlot.tsx @@ -1,6 +1,7 @@ 'use client'; import { + AddressOutput, addressUtils, ChainEntityType, DefinitionList, @@ -56,10 +57,6 @@ export const VotingPowerConditionSlot: React.FC< stringUtils.isNonEmptyString(token) && addressUtils.isAddress(token) ? token : undefined; - const tokenLabel = - tokenAddress != null - ? addressUtils.truncateAddress(tokenAddress) - : EMPTY_VALUE; const tokenUrl = tokenAddress != null ? buildEntityUrl({ @@ -72,15 +69,22 @@ export const VotingPowerConditionSlot: React.FC< return ( - {tokenLabel} + {tokenAddress != null ? ( + + ) : ( + EMPTY_VALUE + )} = (

{name}

-

- {addressUtils.truncateAddress(address)} -

+

{t('app.settings.updateDaoContractsCard.versionUpdate', { diff --git a/apps/app/src/modules/settings/pages/daoPolicyDetailsPage/daoPolicyDetailsPageClient.tsx b/apps/app/src/modules/settings/pages/daoPolicyDetailsPage/daoPolicyDetailsPageClient.tsx index 69c4aa0350..17e86e39ac 100644 --- a/apps/app/src/modules/settings/pages/daoPolicyDetailsPage/daoPolicyDetailsPageClient.tsx +++ b/apps/app/src/modules/settings/pages/daoPolicyDetailsPage/daoPolicyDetailsPageClient.tsx @@ -1,7 +1,9 @@ 'use client'; import { + AddressOutput, AvatarIcon, + addressUtils, Card, ChainEntityType, DataList, @@ -120,27 +122,47 @@ export const DaoPolicyDetailsPageClient: React.FC< > - {policySettings.map((setting) => ( - - {setting.value} - - ))} + {policySettings.map((setting) => { + const addressLink = + setting.address != null + ? getAddressLink(setting.address) + : undefined; + + return ( + + {setting.address != null ? ( + + ) : ( + setting.value + )} + + ); + })} {isMultiDispatch && subRouterPolicies.length > 0 && ( diff --git a/apps/app/src/plugins/crossChainControllerPlugin/components/crossChainControllerActions/crossChainControllerForwardMessageAction/crossChainControllerForwardMessageAction.tsx b/apps/app/src/plugins/crossChainControllerPlugin/components/crossChainControllerActions/crossChainControllerForwardMessageAction/crossChainControllerForwardMessageAction.tsx index cc2140f1d6..1aae9a4425 100644 --- a/apps/app/src/plugins/crossChainControllerPlugin/components/crossChainControllerActions/crossChainControllerForwardMessageAction/crossChainControllerForwardMessageAction.tsx +++ b/apps/app/src/plugins/crossChainControllerPlugin/components/crossChainControllerActions/crossChainControllerForwardMessageAction/crossChainControllerForwardMessageAction.tsx @@ -1,9 +1,9 @@ 'use client'; import { + AddressOutput, AlertCard, AlertInline, - addressUtils, Button, Card, CardEmptyState, @@ -412,11 +412,12 @@ export const CrossChainControllerForwardMessageAction: React.FC< variant="info" > {t( - 'app.plugins.crossChainController.crossChainControllerForwardMessageAction.fee.description', + 'app.plugins.crossChainController.crossChainControllerForwardMessageAction.fee.descriptionPrefix', + )} + + {t( + 'app.plugins.crossChainController.crossChainControllerForwardMessageAction.fee.descriptionSuffix', { - address: addressUtils.truncateAddress( - action.meta.address, - ), token: feeToken?.symbol ?? t( diff --git a/apps/app/src/plugins/gaugeVoterPlugin/components/gaugeVoterGaugeList/gaugeVoterGaugeListItemStructure.tsx b/apps/app/src/plugins/gaugeVoterPlugin/components/gaugeVoterGaugeList/gaugeVoterGaugeListItemStructure.tsx index 494c8e1a71..fbc80a24f1 100644 --- a/apps/app/src/plugins/gaugeVoterPlugin/components/gaugeVoterGaugeList/gaugeVoterGaugeListItemStructure.tsx +++ b/apps/app/src/plugins/gaugeVoterPlugin/components/gaugeVoterGaugeList/gaugeVoterGaugeListItemStructure.tsx @@ -1,4 +1,5 @@ import { + AddressOutput, Avatar, addressUtils, Button, @@ -108,8 +109,6 @@ export const GaugeVoterGaugeListItemStructure: React.FC< }) : null; - const truncatedAddress = addressUtils.truncateAddress(gauge.address); - const handleActionClick = (event: React.MouseEvent) => { event.stopPropagation(); if (isVoted || isUserVotesLoading) { @@ -161,10 +160,17 @@ export const GaugeVoterGaugeListItemStructure: React.FC< />

- {gaugeName} +

- {truncatedAddress} +

diff --git a/apps/app/src/plugins/gaugeVoterPlugin/dialogs/gaugeVoterGaugeDetailsDialog/gaugeVoterGaugeDetailsDialogContent/gaugeVoterGaugeDetailsDialogContent.tsx b/apps/app/src/plugins/gaugeVoterPlugin/dialogs/gaugeVoterGaugeDetailsDialog/gaugeVoterGaugeDetailsDialogContent/gaugeVoterGaugeDetailsDialogContent.tsx index 5139b80d09..3b802ede6f 100644 --- a/apps/app/src/plugins/gaugeVoterPlugin/dialogs/gaugeVoterGaugeDetailsDialog/gaugeVoterGaugeDetailsDialogContent/gaugeVoterGaugeDetailsDialogContent.tsx +++ b/apps/app/src/plugins/gaugeVoterPlugin/dialogs/gaugeVoterGaugeDetailsDialog/gaugeVoterGaugeDetailsDialogContent/gaugeVoterGaugeDetailsDialogContent.tsx @@ -1,5 +1,5 @@ import { - addressUtils, + AddressOutput, ChainEntityType, DefinitionList, Tag, @@ -43,13 +43,19 @@ export const GaugeVoterGaugeDetailsDialogContent: React.FC<
- {addressUtils.truncateAddress(gauge.address)} + {gauge.links && gauge.links.length > 0 && diff --git a/apps/app/src/plugins/gaugeVoterPlugin/dialogs/gaugeVoterVoteDialog/gaugeVoterVoteDialogItem/gaugeVoterVoteDialogItem.test.tsx b/apps/app/src/plugins/gaugeVoterPlugin/dialogs/gaugeVoterVoteDialog/gaugeVoterVoteDialogItem/gaugeVoterVoteDialogItem.test.tsx index f9a0617b07..7e724dccb5 100644 --- a/apps/app/src/plugins/gaugeVoterPlugin/dialogs/gaugeVoterVoteDialog/gaugeVoterVoteDialogItem/gaugeVoterVoteDialogItem.test.tsx +++ b/apps/app/src/plugins/gaugeVoterPlugin/dialogs/gaugeVoterVoteDialog/gaugeVoterVoteDialogItem/gaugeVoterVoteDialogItem.test.tsx @@ -87,7 +87,11 @@ describe(' component', () => { const onRemove = jest.fn(); render(createTestComponent({ onRemove })); const closeButtons = screen.getAllByRole('button'); - await userEvent.click(closeButtons[0]); + const closeButton = closeButtons.at(-1); + if (closeButton == null) { + throw new Error('Close button not rendered'); + } + await userEvent.click(closeButton); expect(onRemove).toHaveBeenCalledWith( '0x1234567890123456789012345678901234567890', ); diff --git a/apps/app/src/plugins/gaugeVoterPlugin/dialogs/gaugeVoterVoteDialog/gaugeVoterVoteDialogItem/gaugeVoterVoteDialogItem.tsx b/apps/app/src/plugins/gaugeVoterPlugin/dialogs/gaugeVoterVoteDialog/gaugeVoterVoteDialogItem/gaugeVoterVoteDialogItem.tsx index b1cfe26bd2..983bef23c5 100644 --- a/apps/app/src/plugins/gaugeVoterPlugin/dialogs/gaugeVoterVoteDialog/gaugeVoterVoteDialogItem/gaugeVoterVoteDialogItem.tsx +++ b/apps/app/src/plugins/gaugeVoterPlugin/dialogs/gaugeVoterVoteDialog/gaugeVoterVoteDialogItem/gaugeVoterVoteDialogItem.tsx @@ -1,4 +1,5 @@ import { + AddressOutput, Avatar, addressUtils, Button, @@ -100,10 +101,13 @@ export const GaugeVoterVoteDialogItem: React.FC< )}
- {displayGaugeName} + - {addressUtils.truncateAddress(gaugeAddress)} +
diff --git a/apps/app/src/actions/gaugeVoter/components/gaugeVoterUpdateGaugeMetadataActionDetails/gaugeVoterUpdateGaugeMetadataActionDetails.tsx b/apps/app/src/actions/gaugeVoter/components/gaugeVoterUpdateGaugeMetadataActionDetails/gaugeVoterUpdateGaugeMetadataActionDetails.tsx index c971d5fc36..b6877a1113 100644 --- a/apps/app/src/actions/gaugeVoter/components/gaugeVoterUpdateGaugeMetadataActionDetails/gaugeVoterUpdateGaugeMetadataActionDetails.tsx +++ b/apps/app/src/actions/gaugeVoter/components/gaugeVoterUpdateGaugeMetadataActionDetails/gaugeVoterUpdateGaugeMetadataActionDetails.tsx @@ -1,7 +1,6 @@ 'use client'; import { - AddressOutput, Avatar, ChainEntityType, DefinitionList, @@ -47,12 +46,12 @@ export const GaugeVoterUpdateGaugeMetadataActionDetails: React.FC< return ( - + {gaugeAddress} = (props) => { diff --git a/apps/app/src/modules/application/components/navigations/navigationDao/navigationDaoHome.tsx b/apps/app/src/modules/application/components/navigations/navigationDao/navigationDaoHome.tsx index fe17fccb93..91b085dec8 100644 --- a/apps/app/src/modules/application/components/navigations/navigationDao/navigationDaoHome.tsx +++ b/apps/app/src/modules/application/components/navigations/navigationDao/navigationDaoHome.tsx @@ -1,4 +1,8 @@ -import { AddressOutput, DaoAvatar } from '@aragon/gov-ui-kit'; +import { + AddressOutput, + DaoAvatar, + InteractiveAncestorContext, +} from '@aragon/gov-ui-kit'; import classNames from 'classnames'; import type { ComponentProps } from 'react'; import type { IDao } from '@/shared/api/daoService'; @@ -28,15 +32,15 @@ export const NavigationDaoHome: React.FC = (props) => { return ( ); }; diff --git a/apps/app/src/modules/application/components/navigations/navigationWizard/navigationWizard.tsx b/apps/app/src/modules/application/components/navigations/navigationWizard/navigationWizard.tsx index 44f7ffa8e2..4d53d94411 100644 --- a/apps/app/src/modules/application/components/navigations/navigationWizard/navigationWizard.tsx +++ b/apps/app/src/modules/application/components/navigations/navigationWizard/navigationWizard.tsx @@ -131,7 +131,8 @@ export const NavigationWizard: React.FC = (props) => {
= ({ address={item.address} className="w-fit" href={addressHref} + isExternal={true} label={item.ens ?? undefined} /> )} diff --git a/apps/app/src/modules/capitalFlow/dialogs/dispatchDialog/dispatchDialog.tsx b/apps/app/src/modules/capitalFlow/dialogs/dispatchDialog/dispatchDialog.tsx index 6c4170649d..008469d345 100644 --- a/apps/app/src/modules/capitalFlow/dialogs/dispatchDialog/dispatchDialog.tsx +++ b/apps/app/src/modules/capitalFlow/dialogs/dispatchDialog/dispatchDialog.tsx @@ -1,5 +1,4 @@ import { - AddressOutput, addressUtils, Button, Card, @@ -179,15 +178,15 @@ export const DispatchDialog: React.FC = (props) => { - + {policy.address} diff --git a/apps/app/src/modules/createDao/components/createProcessForm/createProcessFormGovernance/fields/governanceBodyField/governanceBodiesFieldItemDefault.tsx b/apps/app/src/modules/createDao/components/createProcessForm/createProcessFormGovernance/fields/governanceBodyField/governanceBodiesFieldItemDefault.tsx index 9ec2441cca..8aba3df559 100644 --- a/apps/app/src/modules/createDao/components/createProcessForm/createProcessFormGovernance/fields/governanceBodyField/governanceBodiesFieldItemDefault.tsx +++ b/apps/app/src/modules/createDao/components/createProcessForm/createProcessFormGovernance/fields/governanceBodyField/governanceBodiesFieldItemDefault.tsx @@ -1,8 +1,4 @@ -import { - AddressOutput, - ChainEntityType, - DefinitionList, -} from '@aragon/gov-ui-kit'; +import { ChainEntityType, DefinitionList } from '@aragon/gov-ui-kit'; import type { ISetupBodyForm } from '@/modules/createDao/dialogs/setupBodyDialog'; import { useEnsName } from '@/modules/ens'; import { useDao } from '@/shared/api/daoService'; @@ -57,7 +53,11 @@ export const GovernanceBodiesFieldItemDefault: React.FC< /> {ensName != null && ( )} - + {body.address} {createProcessFormUtils.isBodySafe(body) && ( = ( > - + + + = ( } description={dao.description} stats={stats} - title={ - - } + title={dao.name?.trim() || dao.address} /> ); }; diff --git a/apps/app/src/modules/dashboard/pages/daoDashboardPage/daoDashboardPageClient.test.tsx b/apps/app/src/modules/dashboard/pages/daoDashboardPage/daoDashboardPageClient.test.tsx index 795311d649..6bc41318f2 100644 --- a/apps/app/src/modules/dashboard/pages/daoDashboardPage/daoDashboardPageClient.test.tsx +++ b/apps/app/src/modules/dashboard/pages/daoDashboardPage/daoDashboardPageClient.test.tsx @@ -365,7 +365,7 @@ describe(' component', () => { ); }); - it('supports dao address and ens copy', async () => { + it('copies the DAO address from address and ENS rows', async () => { const dao = generateDao({ address: '0xeed34C7B9B9A7B16B26125650C0f7202D4018620', ens: 'test-dao.dao.eth', @@ -379,7 +379,8 @@ describe(' component', () => { await userEvent.click(clipboards[0]); expect(clipboardCopySpy).toHaveBeenCalledWith(dao.address); await userEvent.click(clipboards[1]); - expect(clipboardCopySpy).toHaveBeenCalledWith(daoUtils.getDaoEns(dao)); + expect(clipboardCopySpy).toHaveBeenCalledTimes(2); + expect(clipboardCopySpy).toHaveBeenLastCalledWith(dao.address); }); it('renders the dao links', () => { diff --git a/apps/app/src/modules/dashboard/pages/daoDashboardPage/daoDashboardPageClient.tsx b/apps/app/src/modules/dashboard/pages/daoDashboardPage/daoDashboardPageClient.tsx index 4b97861706..2c5b0b10ff 100644 --- a/apps/app/src/modules/dashboard/pages/daoDashboardPage/daoDashboardPageClient.tsx +++ b/apps/app/src/modules/dashboard/pages/daoDashboardPage/daoDashboardPageClient.tsx @@ -1,7 +1,6 @@ 'use client'; import { - AddressOutput, Button, ChainEntityType, DateFormat, @@ -130,20 +129,23 @@ export const DaoDashboardPageClient: React.FC = (

- + {dao.address} {daoEns != null && ( = (props) => { size={size} variant={assetField.alert ? 'critical' : 'tertiary'} > - + + + ); diff --git a/apps/app/src/modules/finance/components/assetInput/assetInputToken.tsx b/apps/app/src/modules/finance/components/assetInput/assetInputToken.tsx index 50d8776846..8b1de6a5fa 100644 --- a/apps/app/src/modules/finance/components/assetInput/assetInputToken.tsx +++ b/apps/app/src/modules/finance/components/assetInput/assetInputToken.tsx @@ -25,7 +25,6 @@ export const AssetInputToken: React.FC = (props) => { {token ? ( ) : ( diff --git a/apps/app/src/modules/finance/components/daoInfoAside/daoInfoAside.tsx b/apps/app/src/modules/finance/components/daoInfoAside/daoInfoAside.tsx index 6de491455b..bd8b993940 100644 --- a/apps/app/src/modules/finance/components/daoInfoAside/daoInfoAside.tsx +++ b/apps/app/src/modules/finance/components/daoInfoAside/daoInfoAside.tsx @@ -1,7 +1,6 @@ 'use client'; import { - AddressOutput, Button, ChainEntityType, Collapsible, @@ -74,15 +73,15 @@ export const DaoInfoAside: React.FC = (props) => { {networkDefinitions[resolvedNetwork].name} - + {resolvedAddress} diff --git a/apps/app/src/modules/finance/components/financeDetailsList/financeDetailsList.tsx b/apps/app/src/modules/finance/components/financeDetailsList/financeDetailsList.tsx index e68af355bb..43e75c80d3 100644 --- a/apps/app/src/modules/finance/components/financeDetailsList/financeDetailsList.tsx +++ b/apps/app/src/modules/finance/components/financeDetailsList/financeDetailsList.tsx @@ -1,5 +1,4 @@ import { - AddressOutput, Button, ChainEntityType, DefinitionList, @@ -49,15 +48,15 @@ export const FinanceDetailsList: React.FC = (

- + {address} {daoEns && ( {daoEns} diff --git a/apps/app/src/modules/finance/components/linkedAccountInfo/linkedAccountInfo.tsx b/apps/app/src/modules/finance/components/linkedAccountInfo/linkedAccountInfo.tsx index be992768e8..96407d3aac 100644 --- a/apps/app/src/modules/finance/components/linkedAccountInfo/linkedAccountInfo.tsx +++ b/apps/app/src/modules/finance/components/linkedAccountInfo/linkedAccountInfo.tsx @@ -1,10 +1,6 @@ 'use client'; -import { - AddressOutput, - ChainEntityType, - DefinitionList, -} from '@aragon/gov-ui-kit'; +import { ChainEntityType, DefinitionList } from '@aragon/gov-ui-kit'; import { useTranslations } from '@/shared/components/translationsProvider'; import { networkDefinitions } from '@/shared/constants/networkDefinitions'; import { useDaoChain } from '@/shared/hooks/useDaoChain'; @@ -29,13 +25,13 @@ export const LinkedAccountInfo: React.FC = (props) => { {networkDefinitions[network].name} - + {plugin.address} {plugin.description && ( component', () => { ).toBeInTheDocument(); }); - it('supports member address and ens copy', async () => { + it('copies the member address from address and ENS rows', async () => { const ens = 'member.eth'; const address = '0x1234567890123456789012345678901234567890'; const member = generateMember({ address }); @@ -206,7 +206,8 @@ describe(' component', () => { await userEvent.click(clipboards[0]); expect(clipboardCopySpy).toHaveBeenCalledWith(address); await userEvent.click(clipboards[1]); - expect(clipboardCopySpy).toHaveBeenCalledWith(ens); + expect(clipboardCopySpy).toHaveBeenCalledTimes(2); + expect(clipboardCopySpy).toHaveBeenLastCalledWith(address); }); it('renders the member information', () => { diff --git a/apps/app/src/modules/governance/pages/daoMemberDetailsPage/daoMemberDetailsPageClient.tsx b/apps/app/src/modules/governance/pages/daoMemberDetailsPage/daoMemberDetailsPageClient.tsx index 7ae7f0101c..3ed928c0fa 100644 --- a/apps/app/src/modules/governance/pages/daoMemberDetailsPage/daoMemberDetailsPageClient.tsx +++ b/apps/app/src/modules/governance/pages/daoMemberDetailsPage/daoMemberDetailsPageClient.tsx @@ -1,7 +1,6 @@ 'use client'; import { - AddressOutput, addressUtils, ChainEntityType, DateFormat, @@ -237,13 +236,7 @@ export const DaoMemberDetailsPageClient: React.FC< } breadcrumbs={pageBreadcrumbs} description={ensRecords?.description ?? undefined} - title={ - - } + title={displayName ?? address} /> @@ -293,20 +286,23 @@ export const DaoMemberDetailsPageClient: React.FC< > - + {address} {ensName && addressUrl && ( - + {creatorEnsName ?? creator.address} = ({ dao, permissionsHref }) => { {hasEns ? ( -
- -

- {t('app.settings.daoSettingsInfo.notChangeable')} -

-
+ {dao.ens} ) : ( -
- -

- {t('app.settings.daoSettingsInfo.notChangeable')} -

-
+ {dao.address} )} {dao.description && ( diff --git a/apps/app/src/modules/settings/components/daoPluginInfo/daoPluginInfo.tsx b/apps/app/src/modules/settings/components/daoPluginInfo/daoPluginInfo.tsx index 9697635371..16ee2093cc 100644 --- a/apps/app/src/modules/settings/components/daoPluginInfo/daoPluginInfo.tsx +++ b/apps/app/src/modules/settings/components/daoPluginInfo/daoPluginInfo.tsx @@ -1,5 +1,4 @@ import { - AddressOutput, Button, ChainEntityType, DefinitionList, @@ -63,16 +62,17 @@ export const DaoPluginInfo: React.FC = (props) => { {hasLinkedAccounts && targetAddress != null && ( - + }), + isExternal: true, + isOnchainEntity: true, + }} + term={t('app.settings.daoPolicyDetailsInfo.target')} + > + {targetAddress} )} diff --git a/apps/app/src/modules/settings/components/daoPolicyDetailsInfo/daoPolicyDetailsInfo.tsx b/apps/app/src/modules/settings/components/daoPolicyDetailsInfo/daoPolicyDetailsInfo.tsx index dc85e227db..2f6282594f 100644 --- a/apps/app/src/modules/settings/components/daoPolicyDetailsInfo/daoPolicyDetailsInfo.tsx +++ b/apps/app/src/modules/settings/components/daoPolicyDetailsInfo/daoPolicyDetailsInfo.tsx @@ -1,5 +1,4 @@ import { - AddressOutput, Button, ChainEntityType, DateFormat, @@ -120,26 +119,31 @@ export const DaoPolicyDetailsInfo: React.FC = ( {/* Plugin address */} - + {policy.address} {/* Target */} {policy.daoAddress && ( - + }), + isExternal: true, + isOnchainEntity: true, + }} + term={t('app.settings.daoPolicyDetailsInfo.target')} + > + {policy.daoAddress} )} diff --git a/apps/app/src/modules/settings/components/daoProcessDetailsInfo/daoProcessDetailsInfo.tsx b/apps/app/src/modules/settings/components/daoProcessDetailsInfo/daoProcessDetailsInfo.tsx index 28b2d29e43..77c2897781 100644 --- a/apps/app/src/modules/settings/components/daoProcessDetailsInfo/daoProcessDetailsInfo.tsx +++ b/apps/app/src/modules/settings/components/daoProcessDetailsInfo/daoProcessDetailsInfo.tsx @@ -1,9 +1,4 @@ -import { - AddressOutput, - Button, - ChainEntityType, - DefinitionList, -} from '@aragon/gov-ui-kit'; +import { Button, ChainEntityType, DefinitionList } from '@aragon/gov-ui-kit'; import type { IDao, IDaoPlugin } from '@/shared/api/daoService'; import { useDialogContext } from '@/shared/components/dialogProvider'; import { useTranslations } from '@/shared/components/translationsProvider'; @@ -129,16 +124,17 @@ export const DaoProcessDetailsInfo: React.FC = ( {hasLinkedAccounts && targetAddress != null && ( - + }), + isExternal: true, + isOnchainEntity: true, + }} + term={t('app.settings.daoPolicyDetailsInfo.target')} + > + {targetAddress} )} diff --git a/apps/app/src/modules/settings/components/daoVersionInfo/daoVersionInfo.tsx b/apps/app/src/modules/settings/components/daoVersionInfo/daoVersionInfo.tsx index d2826001f5..667a16e98d 100644 --- a/apps/app/src/modules/settings/components/daoVersionInfo/daoVersionInfo.tsx +++ b/apps/app/src/modules/settings/components/daoVersionInfo/daoVersionInfo.tsx @@ -1,8 +1,4 @@ -import { - AddressOutput, - ChainEntityType, - DefinitionList, -} from '@aragon/gov-ui-kit'; +import { ChainEntityType, DefinitionList } from '@aragon/gov-ui-kit'; import type { IDao } from '@/shared/api/daoService'; import { useTranslations } from '@/shared/components/translationsProvider'; import { useDaoChain } from '@/shared/hooks/useDaoChain'; @@ -42,14 +38,14 @@ export const DaoVersionInfo: React.FC = (props) => { description={t('app.settings.daoVersionInfo.osValue', { version: dao.version, })} - link={{ isOnchainEntity: true }} + link={{ + href: daoLink, + isExternal: false, + isOnchainEntity: true, + }} term={t('app.settings.daoVersionInfo.osLabel')} > - + {dao.address} {processPlugins?.map((plugin) => ( = (props) => { }, )} key={plugin.uniqueId} - link={{ isOnchainEntity: true }} - term={daoUtils.getPluginName(plugin.meta)} - > - + }), + isOnchainEntity: true, + }} + term={daoUtils.getPluginName(plugin.meta)} + > + {plugin.meta.address} ))} diff --git a/apps/app/src/modules/settings/components/permissionsGraph/permissionGraphNode.tsx b/apps/app/src/modules/settings/components/permissionsGraph/permissionGraphNode.tsx index aa06b5136f..a5def6d233 100644 --- a/apps/app/src/modules/settings/components/permissionsGraph/permissionGraphNode.tsx +++ b/apps/app/src/modules/settings/components/permissionsGraph/permissionGraphNode.tsx @@ -1,10 +1,4 @@ -import { - AddressOutput, - Avatar, - addressUtils, - DaoAvatar, - Tag, -} from '@aragon/gov-ui-kit'; +import { AddressOutput, Avatar, DaoAvatar, Tag } from '@aragon/gov-ui-kit'; import type { NodeProps } from '@xyflow/react'; import classNames from 'classnames'; import { PermissionEntityExternalBrandId } from '@/shared/api/daoService'; @@ -72,11 +66,6 @@ export const PermissionGraphNode: React.FC> = ({ kind === 'actor' && address.toLowerCase() === ANY_ADDR.toLowerCase(); const isSelected = selectionRole != null || active === true; const subtitleKey = getPermissionNodeTypeKey(data); - // Unresolved entities are labelled with their own truncated address, so - // that case renders as an address. The node card owns the click, so the - // reveal stays passive and the copy control defaults away. - const isAddressLabel = label === addressUtils.truncateAddress(address); - return (
> = ({ >
- {isAddressLabel ? ( - - ) : ( - - {label} - - )} + {t(subtitleKey)} diff --git a/apps/app/src/modules/settings/components/permissionsGraph/permissionNodeDetailPanel.tsx b/apps/app/src/modules/settings/components/permissionsGraph/permissionNodeDetailPanel.tsx index b88a1627ce..080e8700b0 100644 --- a/apps/app/src/modules/settings/components/permissionsGraph/permissionNodeDetailPanel.tsx +++ b/apps/app/src/modules/settings/components/permissionsGraph/permissionNodeDetailPanel.tsx @@ -67,8 +67,8 @@ export const PermissionNodeDetailPanel: React.FC< {isAddressLabel ? ( ) : (

@@ -118,15 +118,16 @@ export const PermissionNodeDetailPanel: React.FC< {!isSentinelAddress && ( - + {node.address} )} diff --git a/apps/app/src/modules/settings/components/permissionsList/permissionAddressListItem.tsx b/apps/app/src/modules/settings/components/permissionsList/permissionAddressListItem.tsx index 04119d0648..ef9c3745cf 100644 --- a/apps/app/src/modules/settings/components/permissionsList/permissionAddressListItem.tsx +++ b/apps/app/src/modules/settings/components/permissionsList/permissionAddressListItem.tsx @@ -1,5 +1,4 @@ import { - AddressOutput, addressUtils, ChainEntityType, DefinitionList, @@ -27,10 +26,14 @@ export const PermissionAddressListItem: React.FC< return ( - + {address} ); }; diff --git a/apps/app/src/modules/settings/components/permissionsList/permissionDetailsList.tsx b/apps/app/src/modules/settings/components/permissionsList/permissionDetailsList.tsx index 3cd2d8b1b9..3b045f6e90 100644 --- a/apps/app/src/modules/settings/components/permissionsList/permissionDetailsList.tsx +++ b/apps/app/src/modules/settings/components/permissionsList/permissionDetailsList.tsx @@ -1,4 +1,4 @@ -import { addressUtils, DefinitionList } from '@aragon/gov-ui-kit'; +import { DefinitionList } from '@aragon/gov-ui-kit'; import type { IDaoPermission } from '@/shared/api/daoService'; import { useTranslations } from '@/shared/components/translationsProvider'; import { permissionNameUtils } from '@/shared/utils/permissionNameUtils'; @@ -43,11 +43,11 @@ export const PermissionDetailsList: React.FC = ( term={t('app.settings.permissionsList.details.where')} /> - {addressUtils.truncateHash(row.permissionId)} + {row.permissionId} {hasCondition ? ( = ({ entity, }) => ( - {/* Unresolved entities are labelled with their own truncated address, - so that case renders as an address instead of a name. */} - {entity.label === addressUtils.truncateAddress(entity.address) ? ( - - ) : ( - {entity.label} - )} + {entity.type === 'dao' && ( )} diff --git a/apps/app/src/modules/settings/components/permissionsList/permissionEntityListItem.tsx b/apps/app/src/modules/settings/components/permissionsList/permissionEntityListItem.tsx index e0972b722e..7e51746eb3 100644 --- a/apps/app/src/modules/settings/components/permissionsList/permissionEntityListItem.tsx +++ b/apps/app/src/modules/settings/components/permissionsList/permissionEntityListItem.tsx @@ -1,4 +1,4 @@ -import { AddressOutput, DefinitionList } from '@aragon/gov-ui-kit'; +import { DefinitionList } from '@aragon/gov-ui-kit'; import type { IPermissionEntity } from '../../utils/permissionEntityUtils'; import { PermissionAddressListItem } from './permissionAddressListItem'; @@ -29,13 +29,13 @@ export const PermissionEntityListItem: React.FC< // same string, so a description line would duplicate the primary. // Without that label the raw sentinel address is what shows, so it // renders as an address and owns its own copy control. - return entity.label != null ? ( - - {entity.label} - - ) : ( - - + return ( + + {entity.label ?? entity.address} ); } diff --git a/apps/app/src/modules/settings/components/permissionsList/permissionsListRow.tsx b/apps/app/src/modules/settings/components/permissionsList/permissionsListRow.tsx index 120b6ae8ec..1f981a6ebc 100644 --- a/apps/app/src/modules/settings/components/permissionsList/permissionsListRow.tsx +++ b/apps/app/src/modules/settings/components/permissionsList/permissionsListRow.tsx @@ -1,4 +1,9 @@ -import { Accordion, Toggle, ToggleGroup } from '@aragon/gov-ui-kit'; +import { + Accordion, + InteractiveAncestorContext, + Toggle, + ToggleGroup, +} from '@aragon/gov-ui-kit'; import { useState } from 'react'; import type { IDaoPermission, @@ -110,20 +115,22 @@ export const PermissionsListRow: React.FC = (

-
-
- + +
+
+ +
+
+ +
+ + {permissionName} + + + {conditionLabel} +
-
- -
- - {permissionName} - - - {conditionLabel} - -
+
diff --git a/apps/app/src/modules/settings/components/sppRuleConditionSlot/sppRuleConditionSlot.tsx b/apps/app/src/modules/settings/components/sppRuleConditionSlot/sppRuleConditionSlot.tsx index 3ba089fd97..1e92bc8694 100644 --- a/apps/app/src/modules/settings/components/sppRuleConditionSlot/sppRuleConditionSlot.tsx +++ b/apps/app/src/modules/settings/components/sppRuleConditionSlot/sppRuleConditionSlot.tsx @@ -121,14 +121,12 @@ const DecodedRules: React.FC<{ rules: IDaoPermissionCondition['rules'] }> = ({ - - {rule.permissionId} - + {rule.permissionId} {rule.ruleIndexes != null && rule.ruleIndexes.length > 0 && ( @@ -143,14 +141,12 @@ const DecodedRules: React.FC<{ rules: IDaoPermissionCondition['rules'] }> = ({ {rule.conditionAddress != null && rule.conditionAddress !== '' && ( - {addressUtils.truncateAddress( - rule.conditionAddress, - )} + {rule.conditionAddress} )} diff --git a/apps/app/src/modules/settings/components/unrecognizedConditionSlot/unrecognizedConditionSlot.tsx b/apps/app/src/modules/settings/components/unrecognizedConditionSlot/unrecognizedConditionSlot.tsx index 6e7ccd32d5..53f6232004 100644 --- a/apps/app/src/modules/settings/components/unrecognizedConditionSlot/unrecognizedConditionSlot.tsx +++ b/apps/app/src/modules/settings/components/unrecognizedConditionSlot/unrecognizedConditionSlot.tsx @@ -1,7 +1,6 @@ 'use client'; import { - AddressOutput, ChainEntityType, DefinitionList, useBlockExplorer, @@ -34,19 +33,16 @@ export const UnrecognizedConditionSlot: React.FC< - {conditionAddress != null ? ( - - ) : ( - '-' - )} + {conditionAddress ?? '-'}
diff --git a/apps/app/src/modules/settings/components/votingPowerConditionSlot/votingPowerConditionSlot.tsx b/apps/app/src/modules/settings/components/votingPowerConditionSlot/votingPowerConditionSlot.tsx index 5f6420dc41..e89224a9f3 100644 --- a/apps/app/src/modules/settings/components/votingPowerConditionSlot/votingPowerConditionSlot.tsx +++ b/apps/app/src/modules/settings/components/votingPowerConditionSlot/votingPowerConditionSlot.tsx @@ -1,7 +1,6 @@ 'use client'; import { - AddressOutput, addressUtils, ChainEntityType, DefinitionList, @@ -69,14 +68,18 @@ export const VotingPowerConditionSlot: React.FC< return ( - {tokenAddress != null ? ( - - ) : ( - EMPTY_VALUE - )} + {tokenAddress ?? EMPTY_VALUE} - {setting.address != null ? ( - - ) : ( - setting.value - )} + {setting.value} ); })} diff --git a/apps/app/src/plugins/gaugeVoterPlugin/components/gaugeVoterGaugeList/gaugeVoterGaugeListItemStructure.tsx b/apps/app/src/plugins/gaugeVoterPlugin/components/gaugeVoterGaugeList/gaugeVoterGaugeListItemStructure.tsx index fbc80a24f1..1b6720c941 100644 --- a/apps/app/src/plugins/gaugeVoterPlugin/components/gaugeVoterGaugeList/gaugeVoterGaugeListItemStructure.tsx +++ b/apps/app/src/plugins/gaugeVoterPlugin/components/gaugeVoterGaugeList/gaugeVoterGaugeListItemStructure.tsx @@ -162,15 +162,12 @@ export const GaugeVoterGaugeListItemStructure: React.FC<

- +

diff --git a/apps/app/src/plugins/gaugeVoterPlugin/dialogs/gaugeVoterGaugeDetailsDialog/gaugeVoterGaugeDetailsDialogContent/gaugeVoterGaugeDetailsDialogContent.tsx b/apps/app/src/plugins/gaugeVoterPlugin/dialogs/gaugeVoterGaugeDetailsDialog/gaugeVoterGaugeDetailsDialogContent/gaugeVoterGaugeDetailsDialogContent.tsx index 0e9431de30..50a1926214 100644 --- a/apps/app/src/plugins/gaugeVoterPlugin/dialogs/gaugeVoterGaugeDetailsDialog/gaugeVoterGaugeDetailsDialogContent/gaugeVoterGaugeDetailsDialogContent.tsx +++ b/apps/app/src/plugins/gaugeVoterPlugin/dialogs/gaugeVoterGaugeDetailsDialog/gaugeVoterGaugeDetailsDialogContent/gaugeVoterGaugeDetailsDialogContent.tsx @@ -1,9 +1,4 @@ -import { - AddressOutput, - ChainEntityType, - DefinitionList, - Tag, -} from '@aragon/gov-ui-kit'; +import { ChainEntityType, DefinitionList, Tag } from '@aragon/gov-ui-kit'; import type { Network } from '@/shared/api/daoService'; import { useTranslations } from '@/shared/components/translationsProvider'; import { useDaoChain } from '@/shared/hooks/useDaoChain'; @@ -43,15 +38,16 @@ export const GaugeVoterGaugeDetailsDialogContent: React.FC<
- + {gauge.address} {gauge.links && gauge.links.length > 0 && diff --git a/apps/app/src/plugins/gaugeVoterPlugin/dialogs/gaugeVoterVoteDialog/gaugeVoterVoteDialogItem/gaugeVoterVoteDialogItem.test.tsx b/apps/app/src/plugins/gaugeVoterPlugin/dialogs/gaugeVoterVoteDialog/gaugeVoterVoteDialogItem/gaugeVoterVoteDialogItem.test.tsx index 7e724dccb5..48a47ef784 100644 --- a/apps/app/src/plugins/gaugeVoterPlugin/dialogs/gaugeVoterVoteDialog/gaugeVoterVoteDialogItem/gaugeVoterVoteDialogItem.test.tsx +++ b/apps/app/src/plugins/gaugeVoterPlugin/dialogs/gaugeVoterVoteDialog/gaugeVoterVoteDialogItem/gaugeVoterVoteDialogItem.test.tsx @@ -86,11 +86,9 @@ describe(' component', () => { it('calls onRemove with the gauge address when the close button is clicked', async () => { const onRemove = jest.fn(); render(createTestComponent({ onRemove })); - const closeButtons = screen.getAllByRole('button'); - const closeButton = closeButtons.at(-1); - if (closeButton == null) { - throw new Error('Close button not rendered'); - } + const closeButton = screen.getByRole('button', { + name: 'Remove gauge', + }); await userEvent.click(closeButton); expect(onRemove).toHaveBeenCalledWith( '0x1234567890123456789012345678901234567890', diff --git a/apps/app/src/plugins/gaugeVoterPlugin/dialogs/gaugeVoterVoteDialog/gaugeVoterVoteDialogItem/gaugeVoterVoteDialogItem.tsx b/apps/app/src/plugins/gaugeVoterPlugin/dialogs/gaugeVoterVoteDialog/gaugeVoterVoteDialogItem/gaugeVoterVoteDialogItem.tsx index 983bef23c5..6ec4c62a38 100644 --- a/apps/app/src/plugins/gaugeVoterPlugin/dialogs/gaugeVoterVoteDialog/gaugeVoterVoteDialogItem/gaugeVoterVoteDialogItem.tsx +++ b/apps/app/src/plugins/gaugeVoterPlugin/dialogs/gaugeVoterVoteDialog/gaugeVoterVoteDialogItem/gaugeVoterVoteDialogItem.tsx @@ -88,8 +88,8 @@ export const GaugeVoterVoteDialogItem: React.FC< weight > BigInt(0) && displayVotes && displayVotes !== '0'; return ( - -
+ +
{gaugeAvatar && ( @@ -110,13 +111,6 @@ export const GaugeVoterVoteDialogItem: React.FC<
-
@@ -155,7 +149,8 @@ export const GaugeVoterVoteDialogItem: React.FC< />