Merge branch 'main' into STAKE-897-fe-add-earn-button-to-main-wallet-…

…actions

.github/workflows/ci.yml

@@ -335,3 +335,16 @@ jobs:
             echo "All jobs passed step skipped. Block PR."
             exit 1
           fi
+
+  log-merge-group-failure:
+    name: Log merge group failure
+    # Only run this job if the merge group event fails, skip on forks
+    if: ${{ github.event_name == 'merge_group' && failure() && !github.event.repository.fork }}
+    needs:
+      - check-all-jobs-pass
+    uses: metamask/github-tools/.github/workflows/log-merge-group-failure.yml@6bbad335a01fce1a9ec1eabd9515542c225d46c0
+    secrets:
+      GOOGLE_APPLICATION_CREDENTIALS: ${{ secrets.GOOGLE_APPLICATION_CREDENTIALS }}
+      GOOGLE_SERVICE_ACCOUNT: ${{ secrets.GOOGLE_SERVICE_ACCOUNT }}
+      SPREADSHEET_ID: ${{ secrets.GOOGLE_MERGE_QUEUE_SPREADSHEET_ID }}
+      SHEET_NAME: ${{ secrets.GOOGLE_MERGE_QUEUE_SHEET_NAME }}

.js.env.example

@@ -66,6 +66,9 @@ export SEGMENT_FLUSH_INTERVAL="1"
 # example for flush when 1 event is queued
 export SEGMENT_FLUSH_EVENT_LIMIT="1"
 
+# URL of the decoding API used to provide additional data from signature requests
+export DECODING_API_URL: 'https://signature-insights.api.cx.metamask.io/v1'
+
 # URL of security alerts API used to validate dApp requests.
 export SECURITY_ALERTS_API_URL="https://security-alerts.api.cx.metamask.io"
 

app/component-library/components-temp/Buttons/ButtonPill/ButtonPill.styles.ts

@@ -0,0 +1,49 @@
+// Third party dependencies.
+import { StyleSheet } from 'react-native';
+
+// External dependencies.
+import { Theme } from '../../../../util/theme/models';
+
+/**
+ * Style sheet input parameters.
+ */
+export interface ButtonPillStyleSheetVars {
+  isDisabled: boolean;
+  isPressed: boolean;
+}
+
+/**
+ * Style sheet function for ButtonPill component
+ *
+ * @param params Style sheet params
+ * @param params.theme Theme object
+ * @param params.vars Arbitrary inputs this style sheet depends on
+ * @returns StyleSheet object
+ */
+const styleSheet = (params: {
+  theme: Theme;
+  vars: ButtonPillStyleSheetVars;
+}) => {
+  const {
+    theme: { colors },
+    vars: { isDisabled, isPressed }
+  } = params;
+
+  return StyleSheet.create({
+    base: {
+      backgroundColor: colors.background.alternative,
+      color: colors.text.default,
+      alignItems: 'center',
+      justifyContent: 'center',
+      paddingHorizontal: 8,
+      paddingVertical: 4,
+      borderRadius: 99,
+      opacity: isDisabled ? 0.5 : 1,
+      ...(isPressed && {
+        backgroundColor: colors.background.alternativePressed,
+      }),
+    },
+  });
+};
+
+export default styleSheet;

app/component-library/components-temp/Buttons/ButtonPill/ButtonPill.test.tsx

@@ -0,0 +1,15 @@
+// Third party dependencies.
+import React from 'react';
+import { render } from '@testing-library/react-native';
+
+// Internal dependencies.
+import ButtonPill from './ButtonPill';
+
+describe('ButtonPill', () => {
+  it('should render correctly', () => {
+    const { toJSON } = render(
+      <ButtonPill onPress={jest.fn} />,
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+});

app/component-library/components-temp/Buttons/ButtonPill/ButtonPill.tsx

@@ -0,0 +1,69 @@
+// Third party dependencies.
+import React, { useCallback, useState } from 'react';
+import { GestureResponderEvent, TouchableOpacity, TouchableOpacityProps } from 'react-native';
+
+// External dependencies.
+import { useStyles } from '../../../hooks';
+
+// Internal dependencies.
+import stylesheet from './ButtonPill.styles';
+
+/**
+ * ButtonPill component props.
+ */
+export interface ButtonPillProps extends TouchableOpacityProps {
+  /**
+   * Optional param to disable the button.
+   */
+  isDisabled?: boolean;
+}
+
+const ButtonPill = ({
+  onPress,
+  onPressIn,
+  onPressOut,
+  style,
+  isDisabled = false,
+  children,
+  ...props
+}: ButtonPillProps) => {
+  const [isPressed, setIsPressed] = useState(false);
+  const { styles } = useStyles(stylesheet, {
+    style,
+    isPressed,
+    isDisabled,
+  });
+
+  const triggerOnPressedIn = useCallback(
+    (e: GestureResponderEvent) => {
+      setIsPressed(true);
+      onPressIn?.(e);
+    },
+    [setIsPressed, onPressIn],
+  );
+
+  const triggerOnPressedOut = useCallback(
+    (e: GestureResponderEvent) => {
+      setIsPressed(false);
+      onPressOut?.(e);
+    },
+    [setIsPressed, onPressOut],
+  );
+
+  return (
+    <TouchableOpacity
+      style={styles.base}
+      onPress={!isDisabled ? onPress : undefined}
+      onPressIn={!isDisabled ? triggerOnPressedIn : undefined}
+      onPressOut={!isDisabled ? triggerOnPressedOut : undefined}
+      accessible
+      activeOpacity={1}
+      disabled={isDisabled}
+      {...props}
+    >
+      {children}
+    </TouchableOpacity>
+  );
+};
+
+export default ButtonPill;

app/component-library/components-temp/Buttons/ButtonPill/__snapshots__/ButtonPill.test.tsx.snap

@@ -0,0 +1,24 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ButtonPill should render correctly 1`] = `
+<TouchableOpacity
+  accessible={true}
+  activeOpacity={1}
+  disabled={false}
+  onPress={[Function]}
+  onPressIn={[Function]}
+  onPressOut={[Function]}
+  style={
+    {
+      "alignItems": "center",
+      "backgroundColor": "#f2f4f6",
+      "borderRadius": 99,
+      "color": "#141618",
+      "justifyContent": "center",
+      "opacity": 1,
+      "paddingHorizontal": 8,
+      "paddingVertical": 4,
+    }
+  }
+/>
+`;

app/component-library/components-temp/Buttons/ButtonPill/index.ts

@@ -0,0 +1 @@
+export { default } from './ButtonPill';

app/components/Base/StatusText.js

@@ -17,7 +17,7 @@ const styles = StyleSheet.create({
 
 export const ConfirmedText = (props) => (
   <Text
-    testID={CommonSelectorsIDs.STATUS_CONFIRMED}
+    testID={CommonSelectorsIDs.TRANSACTION_STATUS}
     bold
     green
     style={styles.status}
@@ -38,6 +38,7 @@ export const FailedText = (props) => {
   const { colors } = useTheme();
   return (
     <Text
+      testID={CommonSelectorsIDs.TRANSACTION_STATUS}
       bold
       style={[styles.status, { color: colors.error.default }]}
       {...props}

app/components/UI/Name/Name.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable react/prop-types */
 import React from 'react';
-import { TextProps, View } from 'react-native';
+import { TextProps, View, ViewStyle } from 'react-native';
 
 import { useStyles } from '../../../component-library/hooks';
 import Text, {
@@ -34,11 +34,12 @@ const NameLabel: React.FC<{
   );
 };
 
-const UnknownEthereumAddress: React.FC<{ address: string }> = ({ address }) => {
+const UnknownEthereumAddress: React.FC<{ address: string, style?: ViewStyle }> = ({ address, style }) => {
   const displayNameVariant = DisplayNameVariant.Unknown;
   const { styles } = useStyles(styleSheet, { displayNameVariant });
+
   return (
-    <View style={styles.base}>
+    <View style={[styles.base, style]}>
       <Icon name={IconName.Question} />
       <NameLabel displayNameVariant={displayNameVariant} ellipsizeMode="middle">
         {renderShortAddress(address, 5)}
@@ -52,6 +53,7 @@ const Name: React.FC<NameProperties> = ({
   type,
   value,
   variation,
+  style,
 }) => {
   if (type !== NameType.EthereumAddress) {
     throw new Error('Unsupported NameType: ' + type);
@@ -69,11 +71,11 @@ const Name: React.FC<NameProperties> = ({
   });
 
   if (variant === DisplayNameVariant.Unknown) {
-    return <UnknownEthereumAddress address={value} />;
+    return <UnknownEthereumAddress address={value} style={style} />;
   }
 
   return (
-    <View style={styles.base}>
+    <View style={[styles.base, style]}>
       <Identicon
         address={value}
         diameter={16}

app/components/UI/Name/Name.types.ts

@@ -1,4 +1,4 @@
-import { ViewProps } from 'react-native';
+import { ViewProps, ViewStyle } from 'react-native';
 
 /**
  * The name types supported by the NameController.
@@ -15,4 +15,5 @@ export interface NameProperties extends ViewProps {
   type: NameType;
   value: string;
   variation: string;
+  style?: ViewStyle;
 }

app/components/UI/Name/__snapshots__/Name.test.tsx.snap

@@ -3,17 +3,20 @@
 exports[`Name recognized address should render image 1`] = `
 <View
   style={
-    {
-      "alignItems": "center",
-      "alignSelf": "center",
-      "backgroundColor": "#f2f4f6",
-      "borderRadius": 99,
-      "flexDirection": "row",
-      "gap": 5,
-      "paddingLeft": 8,
-      "paddingRight": 8,
-      "paddingVertical": 4,
-    }
+    [
+      {
+        "alignItems": "center",
+        "alignSelf": "center",
+        "backgroundColor": "#f2f4f6",
+        "borderRadius": 99,
+        "flexDirection": "row",
+        "gap": 5,
+        "paddingLeft": 8,
+        "paddingRight": 8,
+        "paddingVertical": 4,
+      },
+      undefined,
+    ]
   }
 >
   <View
@@ -102,17 +105,20 @@ exports[`Name recognized address should render image 1`] = `
 exports[`Name recognized address should return name 1`] = `
 <View
   style={
-    {
-      "alignItems": "center",
-      "alignSelf": "center",
-      "backgroundColor": "#f2f4f6",
-      "borderRadius": 99,
-      "flexDirection": "row",
-      "gap": 5,
-      "paddingLeft": 8,
-      "paddingRight": 8,
-      "paddingVertical": 4,
-    }
+    [
+      {
+        "alignItems": "center",
+        "alignSelf": "center",
+        "backgroundColor": "#f2f4f6",
+        "borderRadius": 99,
+        "flexDirection": "row",
+        "gap": 5,
+        "paddingLeft": 8,
+        "paddingRight": 8,
+        "paddingVertical": 4,
+      },
+      undefined,
+    ]
   }
 >
   <View
@@ -201,17 +207,20 @@ exports[`Name recognized address should return name 1`] = `
 exports[`Name unknown address displays checksummed address 1`] = `
 <View
   style={
-    {
-      "alignItems": "center",
-      "alignSelf": "center",
-      "backgroundColor": "#f2f4f6",
-      "borderRadius": 99,
-      "flexDirection": "row",
-      "gap": 5,
-      "paddingLeft": 8,
-      "paddingRight": 8,
-      "paddingVertical": 4,
-    }
+    [
+      {
+        "alignItems": "center",
+        "alignSelf": "center",
+        "backgroundColor": "#f2f4f6",
+        "borderRadius": 99,
+        "flexDirection": "row",
+        "gap": 5,
+        "paddingLeft": 8,
+        "paddingRight": 8,
+        "paddingVertical": 4,
+      },
+      undefined,
+    ]
   }
 >
   <SvgMock

app/components/UI/SimulationDetails/types.ts

@@ -39,6 +39,17 @@ export type AssetIdentifier = Readonly<
   NativeAssetIdentifier | TokenAssetIdentifier
 >;
 
+export enum TokenStandard {
+  /** A token that conforms to the ERC20 standard. */
+  ERC20 = 'ERC20',
+  /** A token that conforms to the ERC721 standard. */
+  ERC721 = 'ERC721',
+  /** A token that conforms to the ERC1155 standard. */
+  ERC1155 = 'ERC1155',
+  /** Not a token, but rather the base asset of the selected chain. */
+  none = 'NONE',
+}
+
 /**
  * Describes a change in an asset's balance to a user's wallet.
  */

app/components/UI/SliderButton/__snapshots__/index.test.tsx.snap

@@ -18,7 +18,6 @@ exports[`SliderButton should render correctly 1`] = `
       undefined,
     ]
   }
-  testID="swipe-to-swap-button"
 >
   <View
     style={