feat(APP-3895): Implement various UX improvements

CHANGELOG.md

@@ -7,8 +7,15 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Added
+
+- Expose textClassName property on `<Link />` to allow custom text styling
+
 ### Changed
 
+- Prioritize 'Proposed' metadata changes tab in `<ProposalActionUpdateMetaData />`
+- Truncate addresses in FormatterUtils to show six leading and four trailing characters (e.g., 0x1234...5678)
+- Remove vertical margin from `<p>` tags styled with tailwind-prose
 - Update `eslint-import-resolver-typescript` to v4
 - Bump `actions/setup-node` to 4.3.0
 - Update configs to use Node v22

src/core/components/link/link/link.api.ts

@@ -21,4 +21,8 @@ export interface ILinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
      * Optional description text.
      */
     description?: string;
+    /**
+     * Classnames to be applied directly to the link text.
+     */
+    textClassName?: string;
 }

src/core/components/link/link/link.tsx

@@ -28,6 +28,7 @@ export const Link = React.forwardRef<HTMLAnchorElement, ILinkProps>((props, ref)
         iconRight,
         onClick,
         className,
+        textClassName,
         target,
         rel,
         ...otherProps
@@ -42,6 +43,8 @@ export const Link = React.forwardRef<HTMLAnchorElement, ILinkProps>((props, ref)
         className,
     );
 
+    const innerTextClassName = classNames('truncate', textClassName);
+
     const linkRel = target === '_blank' ? `noopener noreferrer ${rel ?? ''}` : rel;
 
     return (
@@ -57,7 +60,7 @@ export const Link = React.forwardRef<HTMLAnchorElement, ILinkProps>((props, ref)
             {...otherProps}
         >
             <div className="flex items-center gap-x-2">
-                <span className="truncate">{children}</span>
+                <span className={innerTextClassName}>{children}</span>
                 {iconRight && <Icon icon={iconRight} size="sm" />}
             </div>
             {description && (

src/modules/assets/copy/modulesCopy.ts

@@ -104,7 +104,7 @@ export const modulesCopy = {
         },
     },
     proposalDataListItemStructure: {
-        by: 'By',
+        by: 'by',
         creators: 'creators',
     },
     proposalVotingTabs: {

src/modules/components/address/addressInput/addressInput.test.tsx

@@ -172,7 +172,7 @@ describe('<AddressInput /> component', () => {
     it('displays a truncated address when address is valid and input is not focused', () => {
         const value = '0xeefB13C7D42eFCc655E528dA6d6F7bBcf9A2251d';
         render(createTestComponent({ value }));
-        expect(screen.getByDisplayValue('0xee…251d')).toBeInTheDocument();
+        expect(screen.getByDisplayValue('0xeefB…251d')).toBeInTheDocument();
         act(() => screen.getByRole('textbox').focus());
         expect(screen.getByDisplayValue(value)).toBeInTheDocument();
     });

src/modules/components/asset/assetTransfer/assetTransferAddress/assetTransferAddress.test.tsx

@@ -43,7 +43,7 @@ describe('<AssetTransferAddress /> component', () => {
         const participant = { address: '0x028F5Ca0b3A3A14e44AB8af660B53D1e428457e7' };
         render(createTestComponent({ participant }));
 
-        expect(screen.getByText('0x02…57e7')).toBeInTheDocument();
+        expect(screen.getByText('0x028F…57e7')).toBeInTheDocument();
     });
 
     it('renders ENS name over address when available', () => {

src/modules/components/proposal/proposalActions/proposalActionsItem/proposalActionsItem.test.tsx

@@ -84,7 +84,7 @@ describe('<ProposalActionsItem /> component', () => {
         const action = generateProposalAction({ to });
         const chainId = 1;
         render(createTestComponent({ action, chainId }));
-        const link = screen.getByRole<HTMLAnchorElement>('link', { name: '0xF2…690F' });
+        const link = screen.getByRole<HTMLAnchorElement>('link', { name: '0xF26a…690F' });
         expect(link).toBeInTheDocument();
         expect(link.href).toEqual(`https://etherscan.io/address/${to}`);
     });

src/modules/components/proposal/proposalActions/proposalActionsList/proposalActionUpdateMetadata/proposalActionUpdateMetadata.test.tsx

@@ -57,17 +57,17 @@ describe('<ProposalActionUpdateMetadata /> component', () => {
 
             render(createTestComponent({ action }));
 
-            expect(screen.getByText('Existing Name')).toBeInTheDocument();
-            expect(screen.getByText('Existing Link 1')).toBeInTheDocument();
-            expect(screen.getByText('Existing Link 2')).toBeInTheDocument();
-            expect(screen.getByText('Existing DAO description')).toBeInTheDocument();
-
-            await userEvent.click(screen.getByText('Proposed'));
-
             expect(screen.getByText('Proposed Name')).toBeInTheDocument();
             expect(screen.getByText('Proposed Link 1')).toBeInTheDocument();
             expect(screen.getByText('Proposed Link 2')).toBeInTheDocument();
             expect(screen.getByText('Proposed DAO description')).toBeInTheDocument();
+
+            await userEvent.click(screen.getByText('Existing'));
+
+            expect(screen.getByText('Existing Name')).toBeInTheDocument();
+            expect(screen.getByText('Existing Link 1')).toBeInTheDocument();
+            expect(screen.getByText('Existing Link 2')).toBeInTheDocument();
+            expect(screen.getByText('Existing DAO description')).toBeInTheDocument();
         });
     });
 
@@ -120,11 +120,11 @@ describe('<ProposalActionUpdateMetadata /> component', () => {
             });
 
             render(createTestComponent({ action }));
-            expect(screen.getByText('Existing Key')).toBeInTheDocument();
+            expect(screen.getByText('Proposed Key')).toBeInTheDocument();
 
-            await userEvent.click(screen.getByText('Proposed'));
+            await userEvent.click(screen.getByText('Existing'));
 
-            expect(screen.getByText('Proposed Key')).toBeInTheDocument();
+            expect(screen.getByText('Existing Key')).toBeInTheDocument();
         });
     });
 });

src/modules/components/proposal/proposalActions/proposalActionsList/proposalActionUpdateMetadata/proposalActionUpdateMetadata.tsx

@@ -5,7 +5,7 @@ import { ProposalActionType } from '../../proposalActionsDefinitions';
 import type { IProposalActionUpdateMetadataProps } from './proposalActionUpdateMetadata.api';
 
 export const ProposalActionUpdateMetadata: React.FC<IProposalActionUpdateMetadataProps> = (props) => {
-    const [toggleValue, setToggleValue] = useState<string | undefined>('existingMetadata');
+    const [toggleValue, setToggleValue] = useState<string | undefined>('proposedMetadata');
     const { action } = props;
     const { proposedMetadata, existingMetadata } = action;
     const metadataToDisplay = toggleValue === 'proposedMetadata' ? proposedMetadata : existingMetadata;
@@ -18,8 +18,8 @@ export const ProposalActionUpdateMetadata: React.FC<IProposalActionUpdateMetadat
     return (
         <div className="flex w-full flex-col gap-2">
             <ToggleGroup value={toggleValue} onChange={setToggleValue} isMultiSelect={false}>
-                <Toggle label={modulesCopy.proposalActionsUpdateMetadata.existingToggle} value="existingMetadata" />
                 <Toggle label={modulesCopy.proposalActionsUpdateMetadata.proposedToggle} value="proposedMetadata" />
+                <Toggle label={modulesCopy.proposalActionsUpdateMetadata.existingToggle} value="existingMetadata" />
             </ToggleGroup>
 
             <DefinitionList.Container>

src/modules/utils/addressUtils/addressUtils.test.tsx

@@ -42,7 +42,7 @@ describe('address utils', () => {
 
         it('correctly truncates the address', () => {
             const value = '0xe11bfcbdd43745d4aa6f4f18e24ad24f4623af04';
-            const expectedValue = '0xe1…af04';
+            const expectedValue = '0xe11b…af04';
             expect(addressUtils.truncateAddress(value)).toEqual(expectedValue);
         });
     });

src/modules/utils/addressUtils/addressUtils.ts

@@ -24,7 +24,7 @@ class AddressUtils {
      */
     truncateAddress = (address = ''): string =>
         this.isAddress(address)
-            ? `${address.slice(0, 4)}…${address.slice(address.length - 4, address.length)}`
+            ? `${address.slice(0, 6)}…${address.slice(address.length - 4, address.length)}`
             : address;
 
     /**

tailwind.config.js

@@ -289,6 +289,8 @@ module.exports = {
                             },
                         },
                         p: {
+                            marginTop: '0',
+                            marginBottom: '0',
                             fontSize: theme('fontSize.base'),
                             '@screen md': {
                                 fontSize: theme('fontSize.lg'),