feat: Add changes to Snaps Address UI component

[david0xd]

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

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

After

Snap code used for testing

(Might be useful for QA)

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 and MetaMask Extension Coding Standards.
• 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 format if applicable
• I’ve applied the right labels on the PR (see labeling guidelines). 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.

[github-actions]

CLA Signature Action: All authors have signed the CLA. You may need to manually re-run the blocking PR check if it doesn't pass in a few minutes.

[sonarcloud]

Quality Gate failed

Failed conditions
0.0% Coverage on New Code (required ≥ 80%)

See analysis details on SonarCloud