feat: Add Skeleton to Snaps UI components

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

@@ -60,6 +60,7 @@ import {
 import { SnapAccountRedirect } from '../../../pages/snap-account-redirect';
 import { CreateNamedSnapAccount } from '../../multichain/create-named-snap-account';
 import SnapAuthorshipHeader from '../snaps/snap-authorship-header';
+import { Skeleton } from '../../component-library/skeleton';
 ///: END:ONLY_INCLUDE_IF
 
 export const safeComponentList = {
@@ -108,6 +109,7 @@ export const safeComponentList = {
   SnapUITooltip,
   span: 'span',
   Spinner,
+  Skeleton,
   Text,
   TextArea,
   TextField,

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

@@ -28,6 +28,7 @@ import { icon } from './icon';
 import { section } from './section';
 import { avatar } from './avatar';
 import { banner } from './banner';
+import { skeleton } from './skeleton';
 
 export const COMPONENT_MAPPING = {
   Box: box,
@@ -60,4 +61,5 @@ export const COMPONENT_MAPPING = {
   Selector: selector,
   Section: section,
   Banner: banner,
+  Skeleton: skeleton,
 };

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

@@ -0,0 +1,21 @@
+import { SkeletonElement } from '@metamask/snaps-sdk/jsx';
+import { BorderRadius } from '../../../../../helpers/constants/design-system';
+import { mapSnapBorderRadiusToExtensionBorderRadius } from '../utils';
+import { UIComponentFactory } from './types';
+
+const DEFAULT_SKELETON_WIDTH = '100%';
+const DEFAULT_SKELETON_HEIGHT = 22;
+const DEFAULT_SKELETON_BORDER_RADIUS = BorderRadius.MD;
+
+export const skeleton: UIComponentFactory<SkeletonElement> = ({ element }) => {
+  return {
+    element: 'Skeleton',
+    props: {
+      width: element.props.width ?? DEFAULT_SKELETON_WIDTH,
+      height: element.props.height ?? DEFAULT_SKELETON_HEIGHT,
+      borderRadius: element.props.borderRadius
+        ? mapSnapBorderRadiusToExtensionBorderRadius(element.props.borderRadius)
+        : DEFAULT_SKELETON_BORDER_RADIUS,
+    },
+  };
+};

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

@@ -5,7 +5,10 @@ import { sha256 } from '@noble/hashes/sha256';
 import { NonEmptyArray, bytesToHex, remove0x } from '@metamask/utils';
 import { unescape as unescapeEntities } from 'he';
 import { ChangeEvent as ReactChangeEvent } from 'react';
-import { BackgroundColor } from '../../../../helpers/constants/design-system';
+import {
+  BackgroundColor,
+  BorderRadius,
+} from '../../../../helpers/constants/design-system';
 import { COMPONENT_MAPPING } from './components';
 import { UIComponent } from './components/types';
 
@@ -156,3 +159,23 @@ export const mapToExtensionCompatibleColor = (color: string) => {
   };
   return color ? backgroundColorMapping[color] : undefined;
 };
+
+/**
+ * Map Snap custom size for border radius to extension compatible size.
+ *
+ * @param snapBorderRadius - Snap custom color.
+ * @returns String, representing border radius size from design system.
+ */
+export const mapSnapBorderRadiusToExtensionBorderRadius = (
+  snapBorderRadius: string | undefined,
+): BorderRadius => {
+  switch (snapBorderRadius) {
+    case 'none':
+    default:
+      return BorderRadius.none;
+    case 'medium':
+      return BorderRadius.MD;
+    case 'full':
+      return BorderRadius.full;
+  }
+};