feat: Add Snap UI avatar component

ui/components/app/metamask-template-renderer/safe-component-list.js

@@ -43,6 +43,7 @@ import { SnapUICheckbox } from '../snaps/snap-ui-checkbox';
 import { SnapUITooltip } from '../snaps/snap-ui-tooltip';
 import { SnapUICard } from '../snaps/snap-ui-card';
 import { SnapUIAddress } from '../snaps/snap-ui-address';
+import { SnapUIAvatar } from '../snaps/snap-ui-avatar';
 import { SnapUISelector } from '../snaps/snap-ui-selector';
 import { SnapUIFooterButton } from '../snaps/snap-ui-footer-button';
 ///: BEGIN:ONLY_INCLUDE_IF(keyring-snaps)
@@ -106,6 +107,7 @@ export const safeComponentList = {
   SnapUICard,
   SnapUISelector,
   SnapUIAddress,
+  SnapUIAvatar,
   SnapUIFooterButton,
   FormTextField,
   ///: BEGIN:ONLY_INCLUDE_IF(keyring-snaps)

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

@@ -1,5 +1,4 @@
 import React, { useMemo } from 'react';
-import { useSelector } from 'react-redux';
 import {
   CaipAccountId,
   isHexString,
@@ -11,32 +10,35 @@ import {
   Display,
   TextColor,
 } from '../../../../helpers/constants/design-system';
-import BlockieIdenticon from '../../../ui/identicon/blockieIdenticon';
-import Jazzicon from '../../../ui/jazzicon';
-import { getUseBlockie } from '../../../../selectors';
 import { shortenAddress } from '../../../../helpers/utils/util';
 import { toChecksumHexAddress } from '../../../../../shared/modules/hexstring-utils';
+import { SnapUIAvatar } from '../snap-ui-avatar';
 
 export type SnapUIAddressProps = {
   // The address must be a CAIP-10 string.
   address: string;
-  diameter?: number;
+  // This is not currently exposed to Snaps.
+  avatarSize?: 'xs' | 'sm' | 'md' | 'lg';
 };
 
 export const SnapUIAddress: React.FunctionComponent<SnapUIAddressProps> = ({
   address,
-  diameter = 32,
+  avatarSize = 'md',
 }) => {
-  const parsed = useMemo(() => {
+  const caipIdentifier = useMemo(() => {
     if (isHexString(address)) {
       // For legacy address inputs we assume them to be Ethereum addresses.
       // NOTE: This means the chain ID is not gonna be reliable.
-      return parseCaipAccountId(`eip155:1:${address}`);
+      return `eip155:1:${address}`;
     }
 
-    return parseCaipAccountId(address as CaipAccountId);
+    return address;
   }, [address]);
-  const useBlockie = useSelector(getUseBlockie);
+
+  const parsed = useMemo(
+    () => parseCaipAccountId(caipIdentifier as CaipAccountId),
+    [caipIdentifier],
+  );
 
   // For EVM addresses, we make sure they are checksummed.
   const transformedAddress =
@@ -47,20 +49,7 @@ export const SnapUIAddress: React.FunctionComponent<SnapUIAddressProps> = ({
 
   return (
     <Box display={Display.Flex} alignItems={AlignItems.center} gap={2}>
-      {useBlockie ? (
-        <BlockieIdenticon
-          address={parsed.address}
-          diameter={diameter}
-          borderRadius="50%"
-        />
-      ) : (
-        <Jazzicon
-          namespace={parsed.chain.namespace}
-          address={parsed.address}
-          diameter={diameter}
-          style={{ display: 'flex' }}
-        />
-      )}
+      <SnapUIAvatar address={caipIdentifier} size={avatarSize} />
       <Text color={TextColor.inherit}>{shortenedAddress}</Text>
     </Box>
   );

ui/components/app/snaps/snap-ui-avatar/index.ts

@@ -0,0 +1 @@
+export * from './snap-ui-avatar';

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

@@ -0,0 +1,44 @@
+import React, { useMemo } from 'react';
+import { useSelector } from 'react-redux';
+import { CaipAccountId, parseCaipAccountId } from '@metamask/utils';
+import BlockieIdenticon from '../../../ui/identicon/blockieIdenticon';
+import Jazzicon from '../../../ui/jazzicon';
+import { getUseBlockie } from '../../../../selectors';
+
+export const DIAMETERS: Record<string, number> = {
+  xs: 16,
+  sm: 24,
+  md: 32,
+  lg: 40,
+};
+
+export type SnapUIAvatarProps = {
+  // The address must be a CAIP-10 string.
+  address: string;
+  size?: 'xs' | 'sm' | 'md' | 'lg';
+};
+
+export const SnapUIAvatar: React.FunctionComponent<SnapUIAvatarProps> = ({
+  address,
+  size = 'md',
+}) => {
+  const parsed = useMemo(() => {
+    return parseCaipAccountId(address as CaipAccountId);
+  }, [address]);
+  const useBlockie = useSelector(getUseBlockie);
+
+  return useBlockie ? (
+    <BlockieIdenticon
+      address={parsed.address}
+      diameter={DIAMETERS[size]}
+      borderRadius="50%"
+    />
+  ) : (
+    <Jazzicon
+      namespace={parsed.chain.namespace}
+      address={parsed.address}
+      diameter={DIAMETERS[size]}
+      style={{ display: 'flex' }}
+    />
+  );
+};

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

@@ -5,6 +5,6 @@ export const address: UIComponentFactory<AddressElement> = ({ element }) => ({
   element: 'SnapUIAddress',
   props: {
     address: element.props.address,
-    diameter: 16,
+    avatarSize: 'xs',
   },
 });

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

@@ -0,0 +1,9 @@
+import { AvatarElement } from '@metamask/snaps-sdk/jsx';
+import { UIComponentFactory } from './types';
+
+export const avatar: UIComponentFactory<AvatarElement> = ({ element }) => ({
+  element: 'SnapUIAvatar',
+  props: {
+    address: element.props.address,
+  },
+});

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

@@ -26,6 +26,7 @@ import { container } from './container';
 import { selector } from './selector';
 import { icon } from './icon';
 import { section } from './section';
+import { avatar } from './avatar';
 
 export const COMPONENT_MAPPING = {
   Box: box,
@@ -38,6 +39,7 @@ export const COMPONENT_MAPPING = {
   Copyable: copyable,
   Row: row,
   Address: address,
+  Avatar: avatar,
   Button: button,
   FileInput: fileInput,
   Form: form,