Skip to content

Commit

Permalink
feat: Add changes to Snaps Address UI component (#27798)
Browse files Browse the repository at this point in the history 
## **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 <hello@guillaumerx.fr>
  • Loading branch information
@david0xd @GuillaumeRx
david0xd and GuillaumeRx authored Nov 4, 2024
1 parent 94895b1 commit df64b2b
Show file tree
Hide file tree
Showing 3 changed files with 41 additions and 10 deletions.
13 changes: 13 additions & 0 deletions ui/components/app/snaps/snap-ui-address/__snapshots__/snap-ui-address.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand Down Expand Up @@ -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>
Expand All @@ -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>
Expand Down Expand Up @@ -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>
Expand All @@ -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>
Expand Down Expand Up @@ -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>
Expand All @@ -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>
Expand Down Expand Up @@ -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>
Expand All @@ -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>
Expand Down Expand Up @@ -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>
Expand All @@ -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>
Expand Down Expand Up @@ -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>
Expand Down
35 changes: 25 additions & 10 deletions ui/components/app/snaps/snap-ui-address/snap-ui-address.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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)) {
Expand All @@ -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
Expand All @@ -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>
);
};
3 changes: 3 additions & 0 deletions ui/components/app/snaps/snap-ui-renderer/components/address.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
},
});

0 comments on commit df64b2b

Please sign in to comment.