Add background color prop to Snaps UI Container component

MetaMask · Jan 10, 2025 · 0f5f5d3 · 0f5f5d3
1 parent 46bf1cf
commit 0f5f5d3
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 0 deletions.
diff --git a/ui/components/app/snaps/insight-warnings/insight-warnings.js b/ui/components/app/snaps/insight-warnings/insight-warnings.js
@@ -85,6 +85,7 @@ export default function InsightWarnings({
               isCollapsable
               isCollapsed={warningState[snapId]}
               boxProps={{ marginBottom: idx === lastWarningIdx ? 0 : 4 }}
+              disableCustomBackground
             />
           );
         })}

diff --git a/ui/components/app/snaps/snap-insight/snap-insight.js b/ui/components/app/snaps/snap-insight/snap-insight.js
@@ -69,6 +69,7 @@ export const SnapInsight = ({ snapId, data }) => {
               interfaceId={interfaceId}
               delineatorType={DelineatorType.Insights}
               isLoading={isLoading}
+              disableCustomBackground
             />
           ) : (
             <Text

diff --git a/ui/components/app/snaps/snap-ui-renderer/components/container.ts b/ui/components/app/snaps/snap-ui-renderer/components/container.ts
@@ -2,6 +2,7 @@ import { BoxElement, JSXElement } from '@metamask/snaps-sdk/jsx';
 import { getJsxChildren } from '@metamask/snaps-utils';
 import { mapToTemplate } from '../utils';
 import {
+  BackgroundColor,
   Display,
   FlexDirection,
 } from '../../../../../helpers/constants/design-system';
@@ -18,6 +19,15 @@ export const container: UIComponentFactory<BoxElement> = ({
 }) => {
   const children = getJsxChildren(element);
 
+  const { backgroundColor } = element.props;
+  const backgroundColorMapping: { [key: string]: string | undefined } = {
+    default: BackgroundColor.backgroundDefault,
+    alternative: BackgroundColor.backgroundAlternative,
+  };
+  const extensionCompatibleBackgroundColor = backgroundColor
+    ? backgroundColorMapping[backgroundColor]
+    : undefined;
+
   // Remove footer if it's not allowed
   if (!useFooter && children.length === 2) {
     children.pop();
@@ -75,6 +85,7 @@ export const container: UIComponentFactory<BoxElement> = ({
     element: 'Box',
     children: templateChildren,
     props: {
+      backgroundColor: extensionCompatibleBackgroundColor,
       display: Display.Flex,
       flexDirection: FlexDirection.Column,
       className: 'snap-ui-renderer__container',

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
@@ -40,6 +40,7 @@ const SnapUIRendererComponent = ({
   useFooter = false,
   onCancel,
   contentBackgroundColor,
+  disableCustomBackground = false,
 }) => {
   const t = useI18nContext();
 
@@ -59,6 +60,10 @@ const SnapUIRendererComponent = ({
       ? rawContent
       : Container({ children: rawContent });
 
+  if (disableCustomBackground && content.type === 'Container') {
+    delete content.props.backgroundColor;
+  }
+
   const promptLegacyProps = useMemo(
     () =>
       isPrompt && {
@@ -165,4 +170,5 @@ SnapUIRendererComponent.propTypes = {
   useFooter: PropTypes.bool,
   onCancel: PropTypes.func,
   contentBackgroundColor: PropTypes.string,
+  disableCustomBackground: PropTypes.bool,
 };
diff --git a/ui/pages/confirmations/components/confirm/snaps/snaps-section/snap-insight.tsx b/ui/pages/confirmations/components/confirm/snaps/snaps-section/snap-insight.tsx
@@ -75,6 +75,7 @@ export const SnapInsight: React.FunctionComponent<SnapInsightProps> = ({
         interfaceId={interfaceId}
         isLoading={loading}
         useDelineator={false}
+        disableCustomBackground={true}
       />
     </Delineator>
   );