diff --git a/ui/components/app/snaps/snap-ui-address/__snapshots__/snap-ui-address.test.tsx.snap b/ui/components/app/snaps/snap-ui-address/__snapshots__/snap-ui-address.test.tsx.snap index 7dd3749a6e5f..deb95bd48555 100644 --- a/ui/components/app/snaps/snap-ui-address/__snapshots__/snap-ui-address.test.tsx.snap +++ b/ui/components/app/snaps/snap-ui-address/__snapshots__/snap-ui-address.test.tsx.snap @@ -46,6 +46,7 @@ exports[`SnapUIAddress renders Bitcoin address 1`] = `

128Lkh3...Mp8p6

@@ -67,6 +68,7 @@ exports[`SnapUIAddress renders Bitcoin address with blockie 1`] = ` />

128Lkh3...Mp8p6

@@ -120,6 +122,7 @@ exports[`SnapUIAddress renders Cosmos address 1`] = `

cosmos1...6hdc0

@@ -141,6 +144,7 @@ exports[`SnapUIAddress renders Cosmos address with blockie 1`] = ` />

cosmos1...6hdc0

@@ -194,6 +198,7 @@ exports[`SnapUIAddress renders Ethereum address 1`] = `

0xab16a...Bfcdb

@@ -215,6 +220,7 @@ exports[`SnapUIAddress renders Ethereum address with blockie 1`] = ` />

0xab16a...Bfcdb

@@ -268,6 +274,7 @@ exports[`SnapUIAddress renders Hedera address 1`] = `

0.0.123...zbhlt

@@ -289,6 +296,7 @@ exports[`SnapUIAddress renders Hedera address with blockie 1`] = ` />

0.0.123...zbhlt

@@ -342,6 +350,7 @@ exports[`SnapUIAddress renders Polkadot address 1`] = `

5hmuyxw...egmfy

@@ -363,6 +372,7 @@ exports[`SnapUIAddress renders Polkadot address with blockie 1`] = ` />

5hmuyxw...egmfy

@@ -416,6 +426,7 @@ exports[`SnapUIAddress renders Starknet address 1`] = `

0x02dd1...0ab57

@@ -437,6 +448,7 @@ exports[`SnapUIAddress renders Starknet address with blockie 1`] = ` />

0x02dd1...0ab57

@@ -490,6 +502,7 @@ exports[`SnapUIAddress renders legacy Ethereum address 1`] = `

0xab16a...Bfcdb

diff --git a/ui/components/app/snaps/snap-ui-address/snap-ui-address.tsx b/ui/components/app/snaps/snap-ui-address/snap-ui-address.tsx index c75b172a616e..d39cb5adf321 100644 --- a/ui/components/app/snaps/snap-ui-address/snap-ui-address.tsx +++ b/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 = ({ address, avatarSize = 'md', + truncate = true, + displayName = false, + avatar = true, }) => { const caipIdentifier = useMemo(() => { if (isHexString(address)) { @@ -41,15 +48,17 @@ export const SnapUIAddress: React.FunctionComponent = ({ [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 ( = ({ alignItems={AlignItems.center} gap={2} > - - {value} + {avatar && } + + {displayName && name ? name : formattedAddress} + ); }; diff --git a/ui/components/app/snaps/snap-ui-renderer/components/address.ts b/ui/components/app/snaps/snap-ui-renderer/components/address.ts index 1e39966df760..908890ecef9f 100644 --- a/ui/components/app/snaps/snap-ui-renderer/components/address.ts +++ b/ui/components/app/snaps/snap-ui-renderer/components/address.ts @@ -6,5 +6,8 @@ export const address: UIComponentFactory = ({ element }) => ({ props: { address: element.props.address, avatarSize: 'xs', + truncate: element.props.truncate, + displayName: element.props.displayName, + avatar: element.props.avatar, }, });