refactor: remove circular dependencies in ui/components/app/snaps f…

…older
MetaMask · Jan 30, 2025 · 2427690 · 2427690
1 parent 538bbc9
commit 2427690
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 4 deletions.
diff --git a/ui/components/app/snaps/snap-ui-renderer/components/index.ts b/ui/components/app/snaps/snap-ui-renderer/components/index.ts
@@ -63,3 +63,5 @@ export const COMPONENT_MAPPING = {
   Banner: banner,
   Skeleton: skeleton,
 };
+
+export type COMPONENT_MAPPING = typeof COMPONENT_MAPPING;
diff --git a/ui/components/app/snaps/snap-ui-renderer/components/types.ts b/ui/components/app/snaps/snap-ui-renderer/components/types.ts
@@ -1,5 +1,6 @@
 import { ChangeEvent as ReactChangeEvent } from 'react';
 import { JSXElement, SnapsChildren } from '@metamask/snaps-sdk/jsx';
+import type { COMPONENT_MAPPING } from '.';
 
 export type UIComponentParams<T extends JSXElement> = {
   map: Record<string, number>;
@@ -14,6 +15,7 @@ export type UIComponentParams<T extends JSXElement> = {
   };
   t: (key: string) => string;
   contentBackgroundColor: string | undefined;
+  componentMap: COMPONENT_MAPPING;
 };
 
 export type UIComponent = {

diff --git a/ui/components/app/snaps/snap-ui-renderer/snap-ui-renderer.js b/ui/components/app/snaps/snap-ui-renderer/snap-ui-renderer.js
@@ -21,6 +21,7 @@ import {
 } from '../../../../helpers/constants/design-system';
 import { useI18nContext } from '../../../../hooks/useI18nContext';
 import { mapToExtensionCompatibleColor, mapToTemplate } from './utils';
+import { COMPONENT_MAPPING } from './components';
 
 // Component that maps Snaps UI JSON format to MetaMask Template Renderer format
 const SnapUIRendererComponent = ({
@@ -86,6 +87,7 @@ const SnapUIRendererComponent = ({
         promptLegacyProps,
         t,
         contentBackgroundColor: backgroundColor,
+        componentMap: COMPONENT_MAPPING,
       }),
     [content, onCancel, useFooter, promptLegacyProps, t, backgroundColor],
   );

diff --git a/ui/components/app/snaps/snap-ui-renderer/utils.ts b/ui/components/app/snaps/snap-ui-renderer/utils.ts
@@ -9,8 +9,7 @@ import {
   BackgroundColor,
   BorderRadius,
 } from '../../../../helpers/constants/design-system';
-import { COMPONENT_MAPPING } from './components';
-import { UIComponent } from './components/types';
+import type { COMPONENT_MAPPING, UIComponent } from './components/types';
 
 export type MapToTemplateParams = {
   map: Record<string, number>;
@@ -25,6 +24,7 @@ export type MapToTemplateParams = {
   };
   t?: (key: string) => string;
   contentBackgroundColor?: string | undefined;
+  componentMap: COMPONENT_MAPPING;
 };
 
 /**
@@ -102,7 +102,7 @@ function generateKey(
 export const mapToTemplate = (params: MapToTemplateParams): UIComponent => {
   const { type, key } = params.element;
   const elementKey = key ?? generateKey(params.map, params.element);
-  const mapped = COMPONENT_MAPPING[
+  const mapped = params.componentMap[
     type as Exclude<JSXElement['type'], 'Option' | 'Radio' | 'SelectorOption'>
     // TODO: Replace `any` with type
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -112,7 +112,7 @@ export const mapToTemplate = (params: MapToTemplateParams): UIComponent => {
 
 export const mapTextToTemplate = (
   elements: NonEmptyArray<JSXElement | string>,
-  params: Pick<MapToTemplateParams, 'map'>,
+  params: Pick<MapToTemplateParams, 'map' | 'componentMap'>,
 ): NonEmptyArray<UIComponent | string> =>
   elements.map((element) => {
     // With the introduction of JSX elements here can be strings.