[pull] main from MetaMask:main

.github/workflows/create-cherry-pick-pr.yml

@@ -19,21 +19,17 @@ jobs:
       contents: write
       pull-requests: write
     steps:
-      - uses: actions/checkout@v3
+      - name: Checkout and setup high risk environment
+        uses: MetaMask/action-checkout-and-setup@v1
         with:
-          fetch-depth: 0
-          ref: ${{ vars.branch_name }}
-          token: ${{ secrets.BUG_REPORT_TOKEN }}
-      - name: Get Node.js version
-        id: nvm
-        run: echo "NODE_VERSION=$(cat .nvmrc)" >> "$GITHUB_OUTPUT"
-      - uses: actions/setup-node@v3
-        with:
-          node-version: ${{ steps.nvm.outputs.NODE_VERSION }}
+          is-high-risk-environment: false
       - name: Create Cherry Pick PR
         id: create-cherry-pick-pr
         shell: bash
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          BRANCH_NAME:  ${{ github.event.inputs.branch_name }}
+          COMMIT_HASH:  ${{ github.event.inputs.commit_hash }}
+          PR_NUMBER:    ${{ github.event.inputs.PR_number }}
         run: |
-          ./scripts/create-cherry-pick-pr.sh ${{ github.event.inputs.branch_name }} ${{ github.event.inputs.commit_hash }} ${{ github.event.inputs.PR_number }}
+          ./scripts/create-cherry-pick-pr.sh "$BRANCH_NAME" "$COMMIT_HASH" "$PR_NUMBER"

.github/workflows/run-e2e-smoke-tests-android.yml

@@ -185,7 +185,7 @@ jobs:
     if: ${{ !cancelled() && inputs.selected_tags != '[]' }}
     needs:
       - trade-android-smoke
-      # - perps-android-smoke
+      - perps-android-smoke
       - wallet-platform-android-smoke
       - identity-android-smoke
       - accounts-android-smoke

app/component-library/components-temp/Buttons/ButtonToggle/ButtonToggle.constants.ts

@@ -1,23 +1,11 @@
-/* eslint-disable import/prefer-default-export */
-
 // External dependencies.
-import {
-  DEFAULT_BUTTONBASE_LABEL_TEXTVARIANT,
-  SAMPLE_BUTTONBASE_PROPS,
-} from '../../../components/Buttons/Button/foundation/ButtonBase/ButtonBase.constants';
-import { TextColor } from '../../../components/Texts/Text';
+import { SAMPLE_BUTTONPRIMARY_PROPS } from '../../../components/Buttons/Button/variants/ButtonPrimary/ButtonPrimary.constants';
 
 // Internal dependencies.
 import { ButtonToggleProps } from './ButtonToggle.types';
 
-// Defaults
-export const DEFAULT_BUTTONTOGGLE_LABEL_TEXTVARIANT =
-  DEFAULT_BUTTONBASE_LABEL_TEXTVARIANT;
-export const DEFAULT_BUTTONTOGGLE_LABEL_COLOR = TextColor.Default;
-export const DEFAULT_BUTTONTOGGLE_LABEL_COLOR_ACTIVE = TextColor.Primary;
-
 // Samples
 export const SAMPLE_BUTTONTOGGLE_PROPS: ButtonToggleProps = {
-  ...SAMPLE_BUTTONBASE_PROPS,
+  ...SAMPLE_BUTTONPRIMARY_PROPS,
   isActive: false,
 };

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

@@ -4,58 +4,13 @@
 import React from 'react';
 
 // External dependencies.
-import { useStyles } from '../../../hooks';
-import Button from '../../../components/Buttons/Button/foundation/ButtonBase';
-import Text from '../../../components/Texts/Text/Text';
-import { ButtonSize } from '../../../components/Buttons/Button';
+import ButtonPrimary from '../../../components/Buttons/Button/variants/ButtonPrimary';
+import ButtonSecondary from '../../../components/Buttons/Button/variants/ButtonSecondary';
 
 // Internal dependencies.
 import { ButtonToggleProps } from './ButtonToggle.types';
-import styleSheet from './ButtonToggle.styles';
-import {
-  DEFAULT_BUTTONTOGGLE_LABEL_TEXTVARIANT,
-  DEFAULT_BUTTONTOGGLE_LABEL_COLOR,
-  DEFAULT_BUTTONTOGGLE_LABEL_COLOR_ACTIVE,
-} from './ButtonToggle.constants';
 
-const ButtonToggle = ({
-  style,
-  isActive = false,
-  size = ButtonSize.Md,
-  label,
-  ...props
-}: ButtonToggleProps) => {
-  const { styles } = useStyles(styleSheet, {
-    style,
-    isActive,
-    size,
-  });
-
-  const getLabelColor = () =>
-    isActive
-      ? DEFAULT_BUTTONTOGGLE_LABEL_COLOR_ACTIVE
-      : DEFAULT_BUTTONTOGGLE_LABEL_COLOR;
-
-  const renderLabel = () =>
-    typeof label === 'string' ? (
-      <Text
-        variant={DEFAULT_BUTTONTOGGLE_LABEL_TEXTVARIANT}
-        color={getLabelColor()}
-      >
-        {label}
-      </Text>
-    ) : (
-      label
-    );
-
-  return (
-    <Button
-      style={styles.base}
-      label={renderLabel()}
-      labelColor={getLabelColor()}
-      {...props}
-    />
-  );
-};
+const ButtonToggle = ({ isActive = false, ...props }: ButtonToggleProps) =>
+  isActive ? <ButtonPrimary {...props} /> : <ButtonSecondary {...props} />;
 
 export default ButtonToggle;

app/component-library/components-temp/Buttons/ButtonToggle/ButtonToggle.types.ts

@@ -1,21 +1,12 @@
 // External dependencies.
-import { ButtonBaseProps } from '../../../components/Buttons/Button/foundation/ButtonBase';
-import { ButtonSize } from '../../../components/Buttons/Button';
+import { ButtonPrimaryProps } from '../../../components/Buttons/Button/variants/ButtonPrimary/ButtonPrimary.types';
 
 /**
  * ButtonToggle component props.
  */
-export type ButtonToggleProps = Omit<ButtonBaseProps, 'labelColor'> & {
+export type ButtonToggleProps = ButtonPrimaryProps & {
   /**
    * Boolean indicating if the button is in active state.
    */
   isActive?: boolean;
 };
-
-/**
- * Style sheet input parameters.
- */
-export type ButtonToggleStyleSheetVars = Pick<ButtonToggleProps, 'style'> & {
-  isActive: boolean;
-  size: ButtonSize;
-};

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

@@ -6,14 +6,14 @@ exports[`ButtonToggle renders correctly in active state 1`] = `
   accessible={true}
   activeOpacity={1}
   onPress={[MockFunction]}
+  onPressIn={[Function]}
+  onPressOut={[Function]}
   style={
     {
       "alignItems": "center",
       "alignSelf": "flex-start",
-      "backgroundColor": "#4459ff1a",
-      "borderColor": "#4459ff",
-      "borderRadius": 20,
-      "borderWidth": 1,
+      "backgroundColor": "#121314",
+      "borderRadius": 12,
       "flexDirection": "row",
       "height": 40,
       "justifyContent": "center",
@@ -26,7 +26,7 @@ exports[`ButtonToggle renders correctly in active state 1`] = `
     accessibilityRole="text"
     style={
       {
-        "color": "#4459ff",
+        "color": "#ffffff",
         "fontFamily": "Geist-Medium",
         "fontSize": 16,
         "letterSpacing": 0,
@@ -45,13 +45,15 @@ exports[`ButtonToggle renders correctly in inactive state 1`] = `
   accessible={true}
   activeOpacity={1}
   onPress={[MockFunction]}
+  onPressIn={[Function]}
+  onPressOut={[Function]}
   style={
     {
       "alignItems": "center",
       "alignSelf": "flex-start",
-      "backgroundColor": "transparent",
-      "borderColor": "#b7bbc8",
-      "borderRadius": 20,
+      "backgroundColor": "#3c4d9d0f",
+      "borderColor": "transparent",
+      "borderRadius": 12,
       "borderWidth": 1,
       "flexDirection": "row",
       "height": 40,