Merge branch 'main' into chore/enable-key-caching

.github/workflows/publish-slack-release-testing-status.yml

@@ -13,8 +13,7 @@ jobs:
     uses: MetaMask/github-tools/.github/workflows/publish-slack-release-testing-status.yml@557025430e5f4d9a581083cabb02b9546d989afc
     with:
       platform: 'mobile'
-      google-document-id: '1tsoodlAlyvEUpkkcNcbZ4PM9HuC9cEM80RZeoVv5OCQ' # Release Testing Document
-      test-only: 'true'
+      google-document-id: '1tsoodlAlyvEUpkkcNcbZ4PM9HuC9cEM80RZeoVv5OCQ'
     secrets:
       slack-api-key: ${{ secrets.SLACKBOT_RLS_TOKEN }}
       github-token: ${{ secrets.PR_TOKEN }}

app/components/Snaps/SnapUIButton/SnapUIButton.tsx

@@ -60,14 +60,11 @@ export const SnapUIButton: FunctionComponent<
 
   const color = COLORS[overriddenVariant as keyof typeof COLORS];
 
-  // TODO: Support sizing the text
   return (
     <ButtonLink
       {...props}
       id={name}
       onPress={handlePress}
-      // @ts-expect-error This prop is not part of the type but it works.
-      color={color}
       disabled={disabled}
       label={
         loading ? (

app/components/Snaps/SnapUIFooterButton/SnapUIFooterButton.test.tsx

@@ -32,7 +32,7 @@ describe('SnapUIFooterButton', () => {
   const defaultProps = {
     children: 'Test Button',
     type: ButtonType.Submit,
-    snapVariant: ButtonVariants.Primary,
+    snapVariant: 'primary' as const,
     onPress: jest.fn(),
     variant: ButtonVariants.Primary,
     accessibilityLabel: 'Test Button',

app/components/Snaps/SnapUIFooterButton/SnapUIFooterButton.tsx

@@ -8,9 +8,7 @@ import {
 } from '../../../component-library/components/Buttons/Button/Button.types';
 import { ActivityIndicator, StyleSheet, View } from 'react-native';
 import { SnapIcon } from '../SnapIcon/SnapIcon';
-import Text, {
-  TextColor,
-} from '../../../component-library/components/Texts/Text';
+import Text from '../../../component-library/components/Texts/Text';
 import { useSelector } from 'react-redux';
 import { selectSnaps } from '../../../selectors/snaps/snapController';
 import {
@@ -26,6 +24,7 @@ import { DEFAULT_BOTTOMSHEETFOOTER_BUTTONSALIGNMENT } from '../../../component-l
 import Button from '../../../component-library/components/Buttons/Button';
 import { useStyles } from '../../../component-library/hooks';
 import styleSheet from '../../../component-library/components/BottomSheets/BottomSheetFooter/BottomSheetFooter.styles';
+import { ButtonProps } from '@metamask/snaps-sdk/jsx';
 
 const localStyles = StyleSheet.create({
   snapActionContainer: {
@@ -42,25 +41,18 @@ interface SnapUIFooterButtonProps {
   isSnapAction?: boolean;
   onCancel?: () => void;
   type: ButtonType;
-  snapVariant: ButtonVariants;
+  snapVariant: ButtonProps['variant'];
   disabled?: boolean;
   loading?: boolean;
 }
 
-const COLORS = {
-  primary: TextColor.Info,
-  destructive: TextColor.Error,
-  disabled: TextColor.Muted,
-};
-
 export const SnapUIFooterButton: FunctionComponent<SnapUIFooterButtonProps> = ({
   onCancel,
   name,
   children,
   disabled = false,
   loading = false,
   isSnapAction = false,
-  type,
   variant = ButtonVariants.Primary,
   snapVariant,
   ...props
@@ -83,9 +75,6 @@ export const SnapUIFooterButton: FunctionComponent<SnapUIFooterButtonProps> = ({
   // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
   const handlePress = isSnapAction ? handleSnapAction : onCancel!;
 
-  const overriddenVariant = disabled ? 'disabled' : variant;
-  const color = COLORS[overriddenVariant as keyof typeof COLORS];
-
   const hideSnapBranding = snapMetadata.hideSnapBranding;
 
   const brandedButtonVariant = isSnapAction
@@ -116,9 +105,7 @@ export const SnapUIFooterButton: FunctionComponent<SnapUIFooterButtonProps> = ({
       );
     }
     return (
-      <Text variant={DEFAULT_BUTTONPRIMARY_LABEL_TEXTVARIANT} color={color}>
-        {children}
-      </Text>
+      <Text variant={DEFAULT_BUTTONPRIMARY_LABEL_TEXTVARIANT}>{children}</Text>
     );
   };
 
@@ -132,6 +119,7 @@ export const SnapUIFooterButton: FunctionComponent<SnapUIFooterButtonProps> = ({
       label={buttonLabel()}
       size={ButtonSize.Lg}
       style={styles.button}
+      isDanger={snapVariant === 'destructive'}
     />
   );
 };

app/components/Snaps/SnapUIRenderer/SnapUIRenderer.test.tsx

@@ -16,7 +16,7 @@ import {
   Card,
   Image as ImageComponent,
 } from '@metamask/snaps-sdk/jsx';
-import { fireEvent } from '@testing-library/react-native';
+import { fireEvent, act } from '@testing-library/react-native';
 import renderWithProvider from '../../../util/test/renderWithProvider';
 import { SnapUIRenderer } from './SnapUIRenderer';
 import Engine from '../../../core/Engine/Engine';
@@ -161,12 +161,14 @@ function renderInterface(
     newContent: JSXElement,
     newState: FormState | null = null,
   ) => {
-    store.dispatch({
-      type: 'updateInterface',
-      payload: {
-        content: newContent,
-        state: newState,
-      },
+    act(() => {
+      store.dispatch({
+        type: 'updateInterface',
+        payload: {
+          content: newContent,
+          state: newState,
+        },
+      });
     });
   };
 
@@ -212,6 +214,18 @@ describe('SnapUIRenderer', () => {
     expect(toJSON()).toMatchSnapshot();
   });
 
+  it('adds a footer if required', () => {
+    const { toJSON, getByText } = renderInterface(
+      Container({
+        children: Box({ children: Text({ children: 'Hello world!' }) }),
+      }),
+      { useFooter: true },
+    );
+
+    expect(getByText('Close')).toBeDefined();
+    expect(toJSON()).toMatchSnapshot();
+  });
+
   it('supports the onCancel prop', () => {
     const onCancel = jest.fn();
     const { toJSON, getByText } = renderInterface(
@@ -308,6 +322,7 @@ describe('SnapUIRenderer', () => {
     );
 
     const inputsAfterRerender = getAllByTestId('input');
+    expect(inputsAfterRerender).toHaveLength(2);
     expect(inputsAfterRerender[0].props.value).toStrictEqual('bar');
     expect(inputsAfterRerender[1].props.value).toStrictEqual('foo');
 

app/components/Snaps/SnapUIRenderer/SnapUIRenderer.tsx

@@ -12,7 +12,7 @@ import { Container } from '@metamask/snaps-sdk/jsx';
 import { strings } from '../../../../locales/i18n';
 import styles from './SnapUIRenderer.styles';
 import { RootState } from '../../../reducers';
-import { TemplateRendererInput } from '../../UI/TemplateRenderer/types';
+import { TemplateRendererComponent } from '../../UI/TemplateRenderer/types';
 import { useTheme } from '../../../util/theme';
 
 interface SnapUIRendererProps {
@@ -65,7 +65,7 @@ const SnapUIRendererComponent = ({
         onCancel,
         t: strings,
         theme,
-      }) as TemplateRendererInput),
+      }) as TemplateRendererComponent),
     [content, useFooter, onCancel, theme],
   );