feat: Add changes to Snaps Address UI component (#27798)

## **Description**
Add changes to Snaps Address UI component to support more flexible use
cases.

This PR needs release of the `snaps-sdk` after merging:
MetaMask/snaps#2833

[![Open in GitHub
Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/27798?quickstart=1)

## **Related issues**
Fixes: MetaMask/snaps#2758

## **Manual testing steps**
1. Use custom Snap build from template-snap-monorepo and add few
varieties of address component to test new capabilities.
2. Make sure UI is looking good.
3. Make sure that there are no regressions.

## **Screenshots/Recordings**
### **Before**
![Screenshot 2024-10-11 at 18 12
06](https://github.com/user-attachments/assets/4d498bd6-0ef0-445c-90ab-40918e63b421)

### **After**
![Screenshot 2024-10-15 at 14 34
16](https://github.com/user-attachments/assets/792244b6-300d-45e2-b7e1-91bbcb93a9a6)
![Screenshot 2024-10-15 at 14 34
28](https://github.com/user-attachments/assets/9c6776e1-f6b6-4888-864b-b95621e83069)
![Screenshot 2024-10-15 at 14 34
47](https://github.com/user-attachments/assets/054a9127-ce9a-43d9-ab06-61c4099990a6)
![Screenshot 2024-10-15 at 14 35
10](https://github.com/user-attachments/assets/4c829486-2195-4f14-947e-cbc3572eb822)

### Snap code used for testing
#### (_Might be useful for QA_)
```typescript
export const onRpcRequest: OnRpcRequestHandler = async ({ request }) => {
  switch (request.method) {
    case 'hello':
      return snap.request({
        method: 'snap_dialog',
        params: {
          type: 'confirmation',
          content: (
            <Box>
              <Heading size="lg">Some unknown address</Heading>

              <Text>Default address</Text>
              <Address address="0x1acC6721CF7642Eb37651F8019AC9a785C064002" />

              <Text>Custom address (displayName=true)</Text>
              <Address
                address="0x1acC6721CF7642Eb37651F8019AC9a785C064002"
                displayName={true}
              />

              <Text>Custom address (avatar=false)</Text>
              <Address
                address="0x1234567890123456789012345678901234567890"
                avatar={false}
              />

              <Text>Custom address (displayName=true, avatar=false)</Text>
              <Address
                address="0x1234567890123456789012345678901234567890"
                displayName={true}
                avatar={false}
              />

              <Text>Custom address (truncate=false)</Text>
              <Address
                address="0x1234567890123456789012345678901234567890"
                truncate={false}
              />

              <Text>Custom address (truncate=false, avatar=false)</Text>
              <Address
                address="0x1234567890123456789012345678901234567890"
                truncate={false}
                avatar={false}
              />

              <Heading size="lg">My address</Heading>

              <Text>Default address</Text>
              <Address address="0xBc641D258aA0e90F70AaDbcC4dE2D58d88029713" />

              <Text>Custom address (displayName=true)</Text>
              <Address
                address="0xBc641D258aA0e90F70AaDbcC4dE2D58d88029713"
                displayName={true}
              />

              <Text>Custom address (avatar=false)</Text>
              <Address
                address="0xBc641D258aA0e90F70AaDbcC4dE2D58d88029713"
                avatar={false}
              />

              <Text>Custom address (displayName=true, avatar=false)</Text>
              <Address
                address="0xBc641D258aA0e90F70AaDbcC4dE2D58d88029713"
                displayName={true}
                avatar={false}
              />

              <Text>Custom address (truncate=false)</Text>
              <Address
                address="0xBc641D258aA0e90F70AaDbcC4dE2D58d88029713"
                truncate={false}
              />

              <Text>Custom address (truncate=false, avatar=false)</Text>
              <Address
                address="0xBc641D258aA0e90F70AaDbcC4dE2D58d88029713"
                truncate={false}
                avatar={false}
              />

              <Heading size="lg">Contact address</Heading>

              <Text>Default address</Text>
              <Address address="0x1acC6721CF7642Eb37651F8019AC9a785C064002" />

              <Text>Custom address (displayName=true)</Text>
              <Address
                address="0x1acC6721CF7642Eb37651F8019AC9a785C064002"
                displayName={true}
              />

              <Text>Custom address (avatar=false)</Text>
              <Address
                address="0x1acC6721CF7642Eb37651F8019AC9a785C064002"
                avatar={false}
              />

              <Text>Custom address (displayName=true, avatar=false)</Text>
              <Address
                address="0x1acC6721CF7642Eb37651F8019AC9a785C064002"
                displayName={true}
                avatar={false}
              />

              <Text>Custom address (truncate=false)</Text>
              <Address
                address="0x1acC6721CF7642Eb37651F8019AC9a785C064002"
                truncate={false}
              />

              <Text>Custom address (truncate=false, avatar=false)</Text>
              <Address
                address="0x1acC6721CF7642Eb37651F8019AC9a785C064002"
                truncate={false}
                avatar={false}
              />
            </Box>
          ),
        },
      });
    default:
      throw new Error('Method not found.');
  }
};
```

## **Pre-merge author checklist**
- [ ] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask
Extension Coding
Standards](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/CODING_GUIDELINES.md).
- [ ] I've completed the PR template to the best of my ability
- [ ] I’ve included tests if applicable
- [ ] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [ ] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**
- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.

---------

Co-authored-by: Guillaume Roux <[email protected]>

Author: david0xd

ui/components/app/snaps/snap-ui-address/__snapshots__/snap-ui-address.test.tsx.snap

@@ -46,6 +46,7 @@ exports[`SnapUIAddress renders Bitcoin address 1`] = `
     </div>
     <p
       class="mm-box mm-text mm-text--body-md mm-box--color-inherit"
+      style="line-break: anywhere;"
     >
       128Lkh3...Mp8p6
     </p>
@@ -67,6 +68,7 @@ exports[`SnapUIAddress renders Bitcoin address with blockie 1`] = `
     />
     <p
       class="mm-box mm-text mm-text--body-md mm-box--color-inherit"
+      style="line-break: anywhere;"
     >
       128Lkh3...Mp8p6
     </p>
@@ -120,6 +122,7 @@ exports[`SnapUIAddress renders Cosmos address 1`] = `
     </div>
     <p
       class="mm-box mm-text mm-text--body-md mm-box--color-inherit"
+      style="line-break: anywhere;"
     >
       cosmos1...6hdc0
     </p>
@@ -141,6 +144,7 @@ exports[`SnapUIAddress renders Cosmos address with blockie 1`] = `
     />
     <p
       class="mm-box mm-text mm-text--body-md mm-box--color-inherit"
+      style="line-break: anywhere;"
     >
       cosmos1...6hdc0
     </p>
@@ -194,6 +198,7 @@ exports[`SnapUIAddress renders Ethereum address 1`] = `
     </div>
     <p
       class="mm-box mm-text mm-text--body-md mm-box--color-inherit"
+      style="line-break: anywhere;"
     >
       0xab16a...Bfcdb
     </p>
@@ -215,6 +220,7 @@ exports[`SnapUIAddress renders Ethereum address with blockie 1`] = `
     />
     <p
       class="mm-box mm-text mm-text--body-md mm-box--color-inherit"
+      style="line-break: anywhere;"
     >
       0xab16a...Bfcdb
     </p>
@@ -268,6 +274,7 @@ exports[`SnapUIAddress renders Hedera address 1`] = `
     </div>
     <p
       class="mm-box mm-text mm-text--body-md mm-box--color-inherit"
+      style="line-break: anywhere;"
     >
       0.0.123...zbhlt
     </p>
@@ -289,6 +296,7 @@ exports[`SnapUIAddress renders Hedera address with blockie 1`] = `
     />
     <p
       class="mm-box mm-text mm-text--body-md mm-box--color-inherit"
+      style="line-break: anywhere;"
     >
       0.0.123...zbhlt
     </p>
@@ -342,6 +350,7 @@ exports[`SnapUIAddress renders Polkadot address 1`] = `
     </div>
     <p
       class="mm-box mm-text mm-text--body-md mm-box--color-inherit"
+      style="line-break: anywhere;"
     >
       5hmuyxw...egmfy
     </p>
@@ -363,6 +372,7 @@ exports[`SnapUIAddress renders Polkadot address with blockie 1`] = `
     />
     <p
       class="mm-box mm-text mm-text--body-md mm-box--color-inherit"
+      style="line-break: anywhere;"
     >
       5hmuyxw...egmfy
     </p>
@@ -416,6 +426,7 @@ exports[`SnapUIAddress renders Starknet address 1`] = `
     </div>
     <p
       class="mm-box mm-text mm-text--body-md mm-box--color-inherit"
+      style="line-break: anywhere;"
     >
       0x02dd1...0ab57
     </p>
@@ -437,6 +448,7 @@ exports[`SnapUIAddress renders Starknet address with blockie 1`] = `
     />
     <p
       class="mm-box mm-text mm-text--body-md mm-box--color-inherit"
+      style="line-break: anywhere;"
     >
       0x02dd1...0ab57
     </p>
@@ -490,6 +502,7 @@ exports[`SnapUIAddress renders legacy Ethereum address 1`] = `
     </div>
     <p
       class="mm-box mm-text mm-text--body-md mm-box--color-inherit"
+      style="line-break: anywhere;"
     >
       0xab16a...Bfcdb
     </p>

ui/components/app/snaps/snap-ui-address/snap-ui-address.tsx

@@ -9,6 +9,7 @@ import {
   AlignItems,
   Display,
   TextColor,
+  TextVariant,
 } from '../../../../helpers/constants/design-system';
 import { shortenAddress } from '../../../../helpers/utils/util';
 import { toChecksumHexAddress } from '../../../../../shared/modules/hexstring-utils';
@@ -20,11 +21,17 @@ export type SnapUIAddressProps = {
   address: string;
   // This is not currently exposed to Snaps.
   avatarSize?: 'xs' | 'sm' | 'md' | 'lg';
+  truncate?: boolean;
+  displayName?: boolean;
+  avatar?: boolean;
 };
 
 export const SnapUIAddress: React.FunctionComponent<SnapUIAddressProps> = ({
   address,
   avatarSize = 'md',
+  truncate = true,
+  displayName = false,
+  avatar = true,
 }) => {
   const caipIdentifier = useMemo(() => {
     if (isHexString(address)) {
@@ -41,15 +48,17 @@ export const SnapUIAddress: React.FunctionComponent<SnapUIAddressProps> = ({
     [caipIdentifier],
   );
 
-  const displayName = useDisplayName(parsed);
+  const name = useDisplayName(parsed);
 
-  const value =
-    displayName ??
-    shortenAddress(
-      parsed.chain.namespace === 'eip155'
-        ? toChecksumHexAddress(parsed.address)
-        : parsed.address,
-    );
+  // For EVM addresses, we make sure they are checksummed.
+  const transformedAddress =
+    parsed.chain.namespace === 'eip155'
+      ? toChecksumHexAddress(parsed.address)
+      : parsed.address;
+
+  const formattedAddress = truncate
+    ? shortenAddress(transformedAddress)
+    : address;
 
   return (
     <Box
@@ -58,8 +67,14 @@ export const SnapUIAddress: React.FunctionComponent<SnapUIAddressProps> = ({
       alignItems={AlignItems.center}
       gap={2}
     >
-      <SnapUIAvatar address={caipIdentifier} size={avatarSize} />
-      <Text color={TextColor.inherit}>{value}</Text>
+      {avatar && <SnapUIAvatar address={caipIdentifier} size={avatarSize} />}
+      <Text
+        variant={TextVariant.bodyMd}
+        color={TextColor.inherit}
+        style={{ lineBreak: 'anywhere' }}
+      >
+        {displayName && name ? name : formattedAddress}
+      </Text>
     </Box>
   );
 };

ui/components/app/snaps/snap-ui-renderer/components/address.ts

@@ -6,5 +6,8 @@ export const address: UIComponentFactory<AddressElement> = ({ element }) => ({
   props: {
     address: element.props.address,
     avatarSize: 'xs',
+    truncate: element.props.truncate,
+    displayName: element.props.displayName,
+    avatar: element.props.avatar,
   },
 });