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/capitalDistributorCreateCampaignActionCreate/capitalDistributorCreateCampaignActionCreateForm.tsx b/apps/app/src/actions/capitalDistributor/components/capitalDistributorCreateCampaignActionCreate/capitalDistributorCreateCampaignActionCreateForm.tsx index 4b05a329be..05db262d3a 100644 --- a/apps/app/src/actions/capitalDistributor/components/capitalDistributorCreateCampaignActionCreate/capitalDistributorCreateCampaignActionCreateForm.tsx +++ b/apps/app/src/actions/capitalDistributor/components/capitalDistributorCreateCampaignActionCreate/capitalDistributorCreateCampaignActionCreateForm.tsx @@ -3,7 +3,6 @@ import { Button, Card, - Clipboard, DefinitionList, IconType, InputContainer, @@ -293,15 +292,12 @@ export const CapitalDistributorCreateCampaignActionCreateForm: React.FC< )} - - {`${merkleTreeInfo.merkleRoot.slice(0, 10)}...${merkleTreeInfo.merkleRoot.slice(-8)}`} - + {merkleTreeInfo.merkleRoot} diff --git a/apps/app/src/actions/capitalDistributor/components/capitalDistributorCreateCampaignActionDetails/capitalDistributorCreateCampaignActionDetails.tsx b/apps/app/src/actions/capitalDistributor/components/capitalDistributorCreateCampaignActionDetails/capitalDistributorCreateCampaignActionDetails.tsx index 225fa0e31f..43a8bcc652 100644 --- a/apps/app/src/actions/capitalDistributor/components/capitalDistributorCreateCampaignActionDetails/capitalDistributorCreateCampaignActionDetails.tsx +++ b/apps/app/src/actions/capitalDistributor/components/capitalDistributorCreateCampaignActionDetails/capitalDistributorCreateCampaignActionDetails.tsx @@ -4,7 +4,6 @@ import { Avatar, addressUtils, ChainEntityType, - Clipboard, DateFormat, DefinitionList, formatterUtils, @@ -186,15 +185,13 @@ export const CapitalDistributorCreateCampaignActionDetails: React.FC< )} - {tokenSymbol - ? `${tokenSymbol} (${addressUtils.truncateAddress(payoutTokenAddress)})` - : addressUtils.truncateAddress(payoutTokenAddress)} + {tokenSymbol ?? payoutTokenAddress} - - {addressUtils.truncateHash(merkleRoot)} - + {merkleRoot}

{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..994dc34e4e 100644 --- a/apps/app/src/actions/gaugeRegistrar/components/gaugeRegistrarRegisterGaugeActionDetails/gaugeRegistrarRegisterGaugeActionDetails.tsx +++ b/apps/app/src/actions/gaugeRegistrar/components/gaugeRegistrarRegisterGaugeActionDetails/gaugeRegistrarRegisterGaugeActionDetails.tsx @@ -2,7 +2,6 @@ import { Avatar, - addressUtils, ChainEntityType, DefinitionList, type IProposalAction, @@ -114,13 +113,12 @@ export const GaugeRegistrarRegisterGaugeActionDetails: React.FC< )} - {addressUtils.truncateAddress(qiTokenAddress)} + {qiTokenAddress} - {addressUtils.truncateAddress(rewardControllerAddress)} + {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..ae2635674b 100644 --- a/apps/app/src/actions/gaugeVoter/components/gaugeVoterCreateGaugeActionDetails/gaugeVoterCreateGaugeActionDetails.tsx +++ b/apps/app/src/actions/gaugeVoter/components/gaugeVoterCreateGaugeActionDetails/gaugeVoterCreateGaugeActionDetails.tsx @@ -2,7 +2,6 @@ import { Avatar, - addressUtils, ChainEntityType, DefinitionList, type IProposalAction, @@ -47,13 +46,12 @@ export const GaugeVoterCreateGaugeActionDetails: React.FC< return ( - {addressUtils.truncateAddress(gaugeAddress)} + {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..b6877a1113 100644 --- a/apps/app/src/actions/gaugeVoter/components/gaugeVoterUpdateGaugeMetadataActionDetails/gaugeVoterUpdateGaugeMetadataActionDetails.tsx +++ b/apps/app/src/actions/gaugeVoter/components/gaugeVoterUpdateGaugeMetadataActionDetails/gaugeVoterUpdateGaugeMetadataActionDetails.tsx @@ -2,7 +2,6 @@ import { Avatar, - addressUtils, ChainEntityType, DefinitionList, type IProposalAction, @@ -47,13 +46,12 @@ export const GaugeVoterUpdateGaugeMetadataActionDetails: React.FC< return ( - {addressUtils.truncateAddress(gaugeAddress)} + {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..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 { 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'; @@ -15,6 +19,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); @@ -27,10 +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 b69468878c..4d53d94411 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,12 @@ 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.test.tsx b/apps/app/src/modules/capitalFlow/components/simulationFlowVisualization/simulationFlowVisualizationItem.test.tsx new file mode 100644 index 0000000000..a8404c6575 --- /dev/null +++ b/apps/app/src/modules/capitalFlow/components/simulationFlowVisualization/simulationFlowVisualizationItem.test.tsx @@ -0,0 +1,66 @@ +import { ChainEntityType } from '@aragon/gov-ui-kit'; +import { render, screen } from '@testing-library/react'; +import type { IAddressDelta } from '../../utils/simulationTypes'; +import { + type ISimulationFlowVisualizationItemProps, + SimulationFlowVisualizationItem, +} from './simulationFlowVisualizationItem'; + +describe(' component', () => { + const address = '0x1234567890123456789012345678901234567890'; + const truncatedAddress = '0x1234…7890'; + + const createTestComponent = ( + props?: Partial, + ) => { + const item: IAddressDelta = { + address, + label: 'Treasury', + role: 'wallet', + isKnown: true, + tokens: [], + ...props?.item, + }; + + const completeProps: ISimulationFlowVisualizationItemProps = { + groupKind: 'external', + ...props, + item, + }; + + return ; + }; + + it('renders the fallback address as valid phrasing content inside its paragraph', () => { + const errors: string[] = []; + jest.spyOn(console, 'error').mockImplementation( + (...args: unknown[]) => { + errors.push(args.map(String).join(' ')); + }, + ); + + const { container } = render(createTestComponent()); + + expect(screen.getByText(truncatedAddress)).toBeInTheDocument(); + expect(container.querySelector('p div')).toBeNull(); + expect( + errors.filter((error) => /cannot be a descendant/i.test(error)), + ).toEqual([]); + }); + + it('renders a single copy control for the address when a block-explorer link is available', () => { + const href = 'https://etherscan.io/address/1234'; + const buildEntityUrl = jest.fn( + (params: { type: ChainEntityType; id?: string }) => + params.type === ChainEntityType.ADDRESS ? href : undefined, + ); + + const { container } = render(createTestComponent({ buildEntityUrl })); + + expect(screen.getByRole('link')).toHaveAttribute('href', href); + expect(screen.getAllByText(truncatedAddress)).toHaveLength(1); + expect( + container.querySelectorAll('button[aria-label="Copy"]'), + ).toHaveLength(1); + }); +}); diff --git a/apps/app/src/modules/capitalFlow/components/simulationFlowVisualization/simulationFlowVisualizationItem.tsx b/apps/app/src/modules/capitalFlow/components/simulationFlowVisualization/simulationFlowVisualizationItem.tsx index b954b031ec..16acadfe03 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,29 @@ 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..008469d345 100644 --- a/apps/app/src/modules/capitalFlow/dialogs/dispatchDialog/dispatchDialog.tsx +++ b/apps/app/src/modules/capitalFlow/dialogs/dispatchDialog/dispatchDialog.tsx @@ -123,6 +123,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 +177,16 @@ export const DispatchDialog: React.FC = (props) => { - {addressUtils.truncateAddress(policy.address)} + {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..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 { - addressUtils, - 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 && ( )} - {addressUtils.truncateAddress(body.address)} + {body.address} {createProcessFormUtils.isBodySafe(body) && ( = ( > - + + + = ( } description={dao.description} stats={stats} - title={daoDisplayName} + title={dao.name?.trim() || dao.address} /> ); }; 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..af42875715 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,13 @@ 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.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 2fb8f351f1..934e3d6bd4 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 { - addressUtils, Button, ChainEntityType, DateFormat, @@ -83,7 +82,6 @@ export const DaoDashboardPageClient: React.FC = ( adminPlugin != null && nonAdminProcessPlugins.length === 0; const daoEns = daoUtils.getDaoEns(dao); - const truncatedAddress = addressUtils.truncateAddress(dao.address); const daoLaunchedAt = isMounted ? formatterUtils.formatDate(dao.blockTimestamp * 1000, { @@ -138,18 +136,23 @@ export const DaoDashboardPageClient: React.FC = (

- {truncatedAddress} + {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 2bbc7ab109..8b1de6a5fa 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,14 @@ 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..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 { - addressUtils, Button, ChainEntityType, Collapsible, @@ -74,13 +73,15 @@ export const DaoInfoAside: React.FC = (props) => { {networkDefinitions[resolvedNetwork].name} - {addressUtils.truncateAddress(resolvedAddress)} + {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..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 { - addressUtils, Button, ChainEntityType, DefinitionList, @@ -49,16 +48,15 @@ export const FinanceDetailsList: React.FC = (

- {addressUtils.truncateAddress(address)} + {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 2e24a15f5f..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 { - addressUtils, - 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,11 +25,13 @@ export const LinkedAccountInfo: React.FC = (props) => { {networkDefinitions[network].name} - {addressUtils.truncateAddress(plugin.address)} + {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 bc2554515c..3ed928c0fa 100644 --- a/apps/app/src/modules/governance/pages/daoMemberDetailsPage/daoMemberDetailsPageClient.tsx +++ b/apps/app/src/modules/governance/pages/daoMemberDetailsPage/daoMemberDetailsPageClient.tsx @@ -236,7 +236,7 @@ export const DaoMemberDetailsPageClient: React.FC< } breadcrumbs={pageBreadcrumbs} description={ensRecords?.description ?? undefined} - title={memberName} + title={displayName ?? address} /> @@ -286,18 +286,23 @@ export const DaoMemberDetailsPageClient: React.FC< > - {truncatedAddress} + {address} {ensName && addressUrl && ( - {creatorName} + {creatorEnsName ?? creator.address} = ({ dao, permissionsHref }) => { {hasEns ? ( -
- - - {dao.ens} - - -

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

-
+ {dao.ens} ) : ( -
- - - {addressUtils.truncateAddress(dao.address)} - - -

- {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 cb562feb4d..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 { - addressUtils, Button, ChainEntityType, DefinitionList, @@ -62,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)} + {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..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 { - addressUtils, Button, ChainEntityType, DateFormat, @@ -119,18 +118,20 @@ export const DaoPolicyDetailsInfo: React.FC = ( {/* Plugin address */} - {addressUtils.truncateAddress(policy.address)} + {policy.address} {/* Target */} {policy.daoAddress && ( = ( id: policy.daoAddress, }), isExternal: true, + isOnchainEntity: true, }} term={t('app.settings.daoPolicyDetailsInfo.target')} > - {addressUtils.truncateAddress(policy.daoAddress)} + {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..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 { - addressUtils, - 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'; @@ -128,7 +123,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)} + {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..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 { - addressUtils, - 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'; @@ -39,18 +35,20 @@ export const DaoVersionInfo: React.FC = (props) => { return ( - {addressUtils.truncateAddress(dao.address)} + {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)} + {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 41ff8596a8..3f50a6b434 100644 --- a/apps/app/src/modules/settings/components/permissionsGraph/permissionDetailContent.tsx +++ b/apps/app/src/modules/settings/components/permissionsGraph/permissionDetailContent.tsx @@ -36,7 +36,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..3fcc5d2260 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, + DaoAvatar, + InteractiveAncestorContext, + Tag, +} from '@aragon/gov-ui-kit'; import type { NodeProps } from '@xyflow/react'; import classNames from 'classnames'; import { PermissionEntityExternalBrandId } from '@/shared/api/daoService'; @@ -66,7 +72,6 @@ export const PermissionGraphNode: React.FC> = ({ kind === 'actor' && address.toLowerCase() === ANY_ADDR.toLowerCase(); const isSelected = selectionRole != null || active === true; const subtitleKey = getPermissionNodeTypeKey(data); - return (
> = ({ !isSelected && 'border-neutral-300 shadow-neutral-sm', )} > - -
- {label} - - {t(subtitleKey)} - -
- {isDaoKind && ( - - )} - {isSafeBody && } - {kind === 'plugin' && !isSafeBody && tag != null && ( - - )} - {isAnyoneActor && !isSafeBody && } - {kind === 'actor' && !isSafeBody && !isAnyoneActor && ( - - )} + + +
+ + + {t(subtitleKey)} + +
+ {isDaoKind && ( + + )} + {isSafeBody && } + {kind === 'plugin' && !isSafeBody && tag != null && ( + + )} + {isAnyoneActor && !isSafeBody && } + {kind === 'actor' && !isSafeBody && !isAnyoneActor && ( + + )} +
); diff --git a/apps/app/src/modules/settings/components/permissionsGraph/permissionNodeDetailPanel.tsx b/apps/app/src/modules/settings/components/permissionsGraph/permissionNodeDetailPanel.tsx index a2c439ecc9..080e8700b0 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,16 @@ export const PermissionNodeDetailPanel: React.FC< {!isSentinelAddress && ( - {addressUtils.truncateAddress(node.address)} + {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..ef9c3745cf 100644 --- a/apps/app/src/modules/settings/components/permissionsList/permissionAddressListItem.tsx +++ b/apps/app/src/modules/settings/components/permissionsList/permissionAddressListItem.tsx @@ -25,12 +25,15 @@ export const PermissionAddressListItem: React.FC< return ( - {truncatedAddress} + {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, }) => ( - {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..7e51746eb3 100644 --- a/apps/app/src/modules/settings/components/permissionsList/permissionEntityListItem.tsx +++ b/apps/app/src/modules/settings/components/permissionsList/permissionEntityListItem.tsx @@ -5,12 +5,15 @@ 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,9 +27,15 @@ 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. + // 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} + + {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 73175f9b6a..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 { - addressUtils, ChainEntityType, DefinitionList, useBlockExplorer, @@ -32,17 +31,18 @@ export const UnrecognizedConditionSlot: React.FC<
- {conditionAddress != null - ? addressUtils.truncateAddress(conditionAddress) - : '-'} + {conditionAddress ?? '-'}
diff --git a/apps/app/src/modules/settings/components/votingPowerConditionSlot/votingPowerConditionSlot.tsx b/apps/app/src/modules/settings/components/votingPowerConditionSlot/votingPowerConditionSlot.tsx index 251e32bf62..e89224a9f3 100644 --- a/apps/app/src/modules/settings/components/votingPowerConditionSlot/votingPowerConditionSlot.tsx +++ b/apps/app/src/modules/settings/components/votingPowerConditionSlot/votingPowerConditionSlot.tsx @@ -56,10 +56,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 +68,18 @@ export const VotingPowerConditionSlot: React.FC< return ( - {tokenLabel} + {tokenAddress ?? EMPTY_VALUE} = (

{name}

-

- {addressUtils.truncateAddress(address)} -

+

{t('app.settings.updateDaoContractsCard.versionUpdate', { diff --git a/apps/app/src/modules/settings/pages/daoPolicyDetailsPage/daoPolicyDetailsClientUtils.ts b/apps/app/src/modules/settings/pages/daoPolicyDetailsPage/daoPolicyDetailsClientUtils.ts index a83efce4a8..7a7d524f6c 100644 --- a/apps/app/src/modules/settings/pages/daoPolicyDetailsPage/daoPolicyDetailsClientUtils.ts +++ b/apps/app/src/modules/settings/pages/daoPolicyDetailsPage/daoPolicyDetailsClientUtils.ts @@ -1,4 +1,3 @@ -import { addressUtils } from '@aragon/gov-ui-kit'; import { type IDao, type IDaoPolicy, @@ -75,9 +74,7 @@ export const getPolicySettingsForCard = ( targetAddress: source.vaultAddress, }); - const sourceName = - targetDao?.name ?? - addressUtils.truncateAddress(source.vaultAddress); + const sourceName = targetDao?.name ?? source.vaultAddress; settings.push({ term: t('app.settings.daoPolicyDetailsInfo.source'), @@ -94,7 +91,7 @@ export const getPolicySettingsForCard = ( const { token } = policy.strategy.source; settings.push({ term: t('app.settings.daoPolicyDetailsInfo.token'), - value: addressUtils.truncateAddress(token.address), + value: token.address, description: token.symbol ? `${token.name ?? token.symbol} ($${token.symbol})` : undefined, @@ -109,7 +106,7 @@ export const getPolicySettingsForCard = ( if (uniswapRouterAddress) { settings.push({ term: t('app.settings.daoPolicyDetailsInfo.uniswapRouter'), - value: addressUtils.truncateAddress(uniswapRouterAddress), + value: uniswapRouterAddress, address: uniswapRouterAddress, copyValue: uniswapRouterAddress, }); @@ -134,9 +131,7 @@ export const getPolicySettingsForCard = ( ) { settings.push({ term: t('app.settings.daoPolicyDetailsInfo.gaugeVoter'), - value: addressUtils.truncateAddress( - policy.strategy.model.gaugeVoterAddress, - ), + value: policy.strategy.model.gaugeVoterAddress, address: policy.strategy.model.gaugeVoterAddress, copyValue: policy.strategy.model.gaugeVoterAddress, }); diff --git a/apps/app/src/modules/settings/pages/daoPolicyDetailsPage/daoPolicyDetailsPageClient.tsx b/apps/app/src/modules/settings/pages/daoPolicyDetailsPage/daoPolicyDetailsPageClient.tsx index 69c4aa0350..e11315c739 100644 --- a/apps/app/src/modules/settings/pages/daoPolicyDetailsPage/daoPolicyDetailsPageClient.tsx +++ b/apps/app/src/modules/settings/pages/daoPolicyDetailsPage/daoPolicyDetailsPageClient.tsx @@ -120,27 +120,39 @@ export const DaoPolicyDetailsPageClient: React.FC< > - {policySettings.map((setting) => ( - - {setting.value} - - ))} + {policySettings.map((setting) => { + const addressLink = + setting.address != null + ? getAddressLink(setting.address) + : undefined; + + return ( + + {setting.value} + + ); + })} {isMultiDispatch && subRouterPolicies.length > 0 && ( diff --git a/apps/app/src/plugins/gaugeVoterPlugin/components/gaugeVoterGaugeList/gaugeVoterGaugeListItemStructure.tsx b/apps/app/src/plugins/gaugeVoterPlugin/components/gaugeVoterGaugeList/gaugeVoterGaugeListItemStructure.tsx index 494c8e1a71..1b6720c941 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,14 @@ 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..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 { - addressUtils, - 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,13 +38,16 @@ export const GaugeVoterGaugeDetailsDialogContent: React.FC<
- {addressUtils.truncateAddress(gauge.address)} + {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..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,8 +86,10 @@ 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'); - await userEvent.click(closeButtons[0]); + 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 b1cfe26bd2..6ec4c62a38 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, @@ -87,8 +88,8 @@ export const GaugeVoterVoteDialogItem: React.FC< weight > BigInt(0) && displayVotes && displayVotes !== '0'; return ( - -
+ +
{gaugeAvatar && ( - {displayGaugeName} + - {addressUtils.truncateAddress(gaugeAddress)} +
-
@@ -151,7 +149,8 @@ export const GaugeVoterVoteDialogItem: React.FC< />