Merge main and solve conflicts

MetaMask · Feb 14, 2023 · dc68ac6 · dc68ac6
2 parents 4bdde30 + 264a509
commit dc68ac6
Show file tree

Hide file tree

Showing 216 changed files with 1,657 additions and 1,263 deletions.
diff --git a/.gitignore b/.gitignore
@@ -90,3 +90,7 @@ licenseInfos.json
 wdio/reports/
 # Allows access to preview versions of @metamask/* packages for testing
 .npmrc
+
+# browserstack autogenerated files
+local.log
+browserstack.err
diff --git a/app/component-library/components-temp/Accounts/AccountBase/AccountBase.tsx b/app/component-library/components-temp/Accounts/AccountBase/AccountBase.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { View } from 'react-native';
 import { AccountBaseProps } from './AccountBase.types';
-import Text, { TextVariants } from '../../../components/Texts/Text';
+import Text, { TextVariant } from '../../../components/Texts/Text';
 import BadgeWrapper from '../../../components/Badges/BadgeWrapper';
 import Avatar, { AvatarVariants } from '../../../components/Avatars/Avatar';
 import {
@@ -29,15 +29,15 @@ const AccountBase = ({
         />
       </BadgeWrapper>
       <View>
-        <Text variant={TextVariants.sBodySM}>{accountNetwork}</Text>
-        <Text variant={TextVariants.lBodySMBold}>{accountName}</Text>
+        <Text variant={TextVariant.BodySM}>{accountNetwork}</Text>
+        <Text variant={TextVariant.BodyMDBold}>{accountName}</Text>
       </View>
     </View>
     <View>
-      <Text variant={TextVariants.sBodySM} style={styles.label}>
+      <Text variant={TextVariant.BodySM} style={styles.label}>
         {accountBalanceLabel}
       </Text>
-      <Text variant={TextVariants.lBodySMBold}>
+      <Text variant={TextVariant.BodyMDBold}>
         {accountBalance} {accountNativeCurrency}
       </Text>
     </View>

diff --git a/app/component-library/components-temp/Contracts/ContractBoxBase/ContractBoxBase.tsx b/app/component-library/components-temp/Contracts/ContractBoxBase/ContractBoxBase.tsx
@@ -7,11 +7,11 @@ import Avatar, {
   AvatarSize,
   AvatarVariants,
 } from '../../../components/Avatars/Avatar';
-import Text, { TextVariants } from '../../../components/Texts/Text';
+import Text, { TextVariant } from '../../../components/Texts/Text';
 import { formatAddress } from '../../../../util/address';
 import Icon, { IconName, IconSize } from '../../../components/Icon';
 import { useStyles } from '../../../hooks';
-import ButtonLink from '../../../components/Buttons/Button/variants/ButtonLink';
+import Button, { ButtonVariants } from '../../../components/Buttons/Button';
 
 // Internal dependencies.
 import { ContractBoxBaseProps, IconViewProps } from './ContractBoxBase.types';
@@ -50,20 +50,21 @@ const ContractBoxBase = ({
         />
         {contractPetName ? (
           <Pressable onPress={onContractPress}>
-            <Text style={styles.header} variant={TextVariants.sHeadingMD}>
+            <Text style={styles.header} variant={TextVariant.HeadingMD}>
               {contractPetName}
             </Text>
-            <Text variant={TextVariants.sBodyMD}>{formattedAddress}</Text>
+            <Text variant={TextVariant.BodyMD}>{formattedAddress}</Text>
           </Pressable>
         ) : (
           <View testID={CONTRACT_BOX_NO_PET_NAME_TEST_ID}>
-            <ButtonLink
-              textVariants={TextVariants.sHeadingMD}
+            <Button
+              variant={ButtonVariants.Link}
+              textVariant={TextVariant.HeadingMD}
               style={styles.header}
               onPress={onContractPress}
             >
               {formattedAddress}
-            </ButtonLink>
+            </Button>
           </View>
         )}
       </View>

diff --git a/...ary/components-temp/Contracts/ContractBoxBase/__snapshots__/ContractBoxBase.test.tsx.snap b/...ary/components-temp/Contracts/ContractBoxBase/__snapshots__/ContractBoxBase.test.tsx.snap
@@ -32,7 +32,7 @@ exports[`Component ContractBoxBase should render correctly 1`] = `
       <Text
         style={
           Object {
-            "color": "#037DD6",
+            "color": "#0376C9",
           }
         }
         variant="sHeadingMD"

diff --git a/app/component-library/components-temp/CustomSpendCap/CustomInput/CustomInput.styles.ts b/app/component-library/components-temp/CustomSpendCap/CustomInput/CustomInput.styles.ts
@@ -31,7 +31,7 @@ const styleSheet = (params: { theme: Theme }) => {
       flexGrow: 1,
       marginRight: 16,
       color: colors.text.default,
-      ...typography.sBodyMD,
+      ...typography.BodyMD,
     } as TextStyle,
     maxValueText: {
       color: theme.colors.text.alternative,

diff --git a/app/component-library/components-temp/CustomSpendCap/CustomInput/CustomInput.tsx b/app/component-library/components-temp/CustomSpendCap/CustomInput/CustomInput.tsx
@@ -6,7 +6,7 @@ import { TextInput, View } from 'react-native';
 import { useStyles } from '../../../hooks';
 import formatNumber from '../../../../util/formatNumber';
 import { strings } from '../../../../../locales/i18n';
-import Text, { TextVariants } from '../../../components/Texts/Text';
+import Text, { TextVariant } from '../../../components/Texts/Text';
 
 // Internal dependencies.
 import { CustomInputProps } from './CustomInput.types';
@@ -50,14 +50,14 @@ const CustomInput = ({
           />
         ) : defaultValueSelected ? (
           <Text
-            variant={TextVariants.sBodyMD}
+            variant={TextVariant.BodyMD}
             style={styles.warningValue}
           >{`${formatNumber(value)} ${ticker}`}</Text>
         ) : null}
       </View>
       {inputDisabled && (
         <Text
-          variant={TextVariants.sBodySM}
+          variant={TextVariant.BodySM}
           style={styles.maxValueText}
           onPress={handleMaxPress}
         >

diff --git a/...ibrary/components-temp/CustomSpendCap/CustomInput/__snapshots__/CustomInput.test.tsx.snap b/...ibrary/components-temp/CustomSpendCap/CustomInput/__snapshots__/CustomInput.test.tsx.snap
@@ -31,11 +31,6 @@ exports[`CustomInput should render correctly 1`] = `
         Object {
           "color": "#24272A",
           "flexGrow": 1,
-          "fontFamily": "Euclid Circular B",
-          "fontSize": 14,
-          "fontWeight": "400",
-          "letterSpacing": 0,
-          "lineHeight": 22,
           "marginRight": 16,
           "paddingBottom": 0,
           "paddingTop": 0,

diff --git a/app/component-library/components-temp/CustomSpendCap/CustomSpendCap.tsx b/app/component-library/components-temp/CustomSpendCap/CustomSpendCap.tsx
@@ -6,8 +6,8 @@ import BigNumber from 'bignumber.js';
 // External dependencies.
 import { useStyles } from '../../hooks';
 import { strings } from '../../../../locales/i18n';
-import ButtonLink from '../../components/Buttons/Button/variants/ButtonLink';
-import Text, { TextVariants } from '../../components/Texts/Text';
+import Button, { ButtonVariants } from '../../components/Buttons/Button';
+import Text, { TextVariant } from '../../components/Texts/Text';
 import formatNumber from '../../../util/formatNumber';
 import { isNumber } from '../../../util/number';
 import CustomInput from './CustomInput';
@@ -76,7 +76,7 @@ const CustomSpendCap = ({
   const MAX_VALUE_SELECTED = (
     <>
       {strings('contract_allowance.custom_spend_cap.this_contract_allows')}
-      <Text variant={TextVariants.sBodyMDBold} style={styles.description}>
+      <Text variant={TextVariant.BodyMDBold} style={styles.description}>
         {` ${formatNumber(accountBalance)} ${ticker} `}
       </Text>
       {strings('contract_allowance.custom_spend_cap.from_your_balance')}
@@ -91,11 +91,11 @@ const CustomSpendCap = ({
   const DAPP_PROPOSED_VALUE_GREATER_THAN_ACCOUNT_BALANCE = (
     <>
       {strings('contract_allowance.custom_spend_cap.this_contract_allows')}
-      <Text variant={TextVariants.sBodyMDBold} style={styles.description}>
+      <Text variant={TextVariant.BodyMDBold} style={styles.description}>
         {` ${formatNumber(accountBalance)} ${ticker} `}
       </Text>
       {strings('contract_allowance.custom_spend_cap.from_your_current_balance')}
-      <Text variant={TextVariants.sBodyMDBold} style={styles.description}>
+      <Text variant={TextVariant.BodyMDBold} style={styles.description}>
         {` ${formatNumber(dappValue)} ${ticker} `}
       </Text>
       {strings('contract_allowance.custom_spend_cap.future_tokens')}
@@ -105,11 +105,11 @@ const CustomSpendCap = ({
   const INPUT_VALUE_GREATER_THAN_ACCOUNT_BALANCE = (
     <>
       {strings('contract_allowance.custom_spend_cap.this_contract_allows')}
-      <Text variant={TextVariants.sBodyMDBold} style={styles.description}>
+      <Text variant={TextVariant.BodyMDBold} style={styles.description}>
         {` ${formatNumber(accountBalance)} ${ticker} `}
       </Text>
       {strings('contract_allowance.custom_spend_cap.from_your_current_balance')}
-      <Text variant={TextVariants.sBodyMDBold} style={styles.description}>
+      <Text variant={TextVariant.BodyMDBold} style={styles.description}>
         {` ${formatNumber(difference)} ${ticker} `}
       </Text>
       {strings('contract_allowance.custom_spend_cap.future_tokens')}
@@ -127,12 +127,12 @@ const CustomSpendCap = ({
         name={IconName.DangerFilled}
         color={colors.error.default}
       />
-      <Text variant={TextVariants.sBodyMDBold} style={styles.modalTitleDanger}>
+      <Text variant={TextVariant.BodyMDBold} style={styles.modalTitleDanger}>
         {strings('contract_allowance.custom_spend_cap.be_careful')}
       </Text>{' '}
     </>
   ) : (
-    <Text variant={TextVariants.sBodyMDBold} style={styles.modalTitle}>
+    <Text variant={TextVariant.BodyMDBold} style={styles.modalTitle}>
       {strings('contract_allowance.custom_spend_cap.set_spend_cap')}
     </Text>
   );
@@ -160,7 +160,7 @@ const CustomSpendCap = ({
       ) : null}
       <View style={styles.header}>
         <View style={styles.titleContainer}>
-          <Text variant={TextVariants.sBodyMDBold} style={styles.title}>
+          <Text variant={TextVariant.BodyMDBold} style={styles.title}>
             {strings('contract_allowance.custom_spend_cap.title')}
           </Text>
           <Pressable onPress={toggleModal}>
@@ -177,11 +177,16 @@ const CustomSpendCap = ({
             />
           </Pressable>
         </View>
-        <ButtonLink onPress={handlePress} textVariants={TextVariants.sBodyMD}>
-          {defaultValueSelected
-            ? strings('contract_allowance.custom_spend_cap.edit')
-            : strings('contract_allowance.custom_spend_cap.use_default')}
-        </ButtonLink>
+        <Button
+          variant={ButtonVariants.Link}
+          onPress={handlePress}
+          textVariant={TextVariant.BodyMD}
+          label={
+            defaultValueSelected
+              ? strings('contract_allowance.custom_spend_cap.edit')
+              : strings('contract_allowance.custom_spend_cap.use_default')
+          }
+        />
       </View>
       <View style={styles.inputContainer}>
         <CustomInput
@@ -194,12 +199,12 @@ const CustomSpendCap = ({
         />
       </View>
       {value.length > 0 && inputHasError && (
-        <Text variant={TextVariants.sBodyMD} style={styles.errorDescription}>
+        <Text variant={TextVariant.BodyMD} style={styles.errorDescription}>
           {strings('contract_allowance.custom_spend_cap.error_enter_number')}
         </Text>
       )}
       <View style={styles.descriptionContainer}>
-        <Text variant={TextVariants.sBodyMD} style={styles.description}>
+        <Text variant={TextVariant.BodyMD} style={styles.description}>
           {defaultValueSelected
             ? DAPP_PROPOSED_VALUE_GREATER_THAN_ACCOUNT_BALANCE
             : maxSelected

diff --git a/app/component-library/components-temp/SheetActions/SheetActions.tsx b/app/component-library/components-temp/SheetActions/SheetActions.tsx
@@ -4,8 +4,11 @@ import { Platform, View } from 'react-native';
 
 // External dependencies.
 import { useStyles } from '../../hooks';
-import ButtonTertiary from '../../components/Buttons/Button/variants/ButtonTertiary';
-import { ButtonSize } from '../../components/Buttons/Button';
+import Button, {
+  ButtonSize,
+  ButtonVariants,
+  ButtonWidthTypes,
+} from '../../components/Buttons/Button';
 import Loader from '../Loader';
 import generateTestId from '../../../../wdio/utils/generateTestId';
 
@@ -19,7 +22,7 @@ const SheetActions = ({ actions }: SheetActionsProps) => {
   const renderActions = useCallback(
     () =>
       actions.map(
-        ({ label, onPress, testID, isLoading, disabled, variant }, index) => {
+        ({ label, onPress, testID, isLoading, disabled, isDanger }, index) => {
           const key = `${label}-${index}`;
           // Avoid drawing separator above the first element
           const isFirstElement = index === 0;
@@ -34,13 +37,15 @@ const SheetActions = ({ actions }: SheetActionsProps) => {
                 <View style={styles.separator} />
               )}
               <View>
-                <ButtonTertiary
+                <Button
+                  variant={ButtonVariants.Link}
+                  width={ButtonWidthTypes.Full}
                   onPress={onPress}
                   label={label}
                   size={ButtonSize.Lg}
                   disabled={disabled || isLoading}
                   style={buttonStyle}
-                  variant={variant}
+                  isDanger={isDanger}
                   {...generateTestId(Platform, testID)}
                 />
                 {isLoading && <Loader size={'small'} />}

diff --git a/app/component-library/components-temp/SheetActions/SheetActions.types.ts b/app/component-library/components-temp/SheetActions/SheetActions.types.ts
@@ -1,6 +1,3 @@
-// External dependencies.
-import { ButtonTertiaryVariant } from '../../../component-library/components/Buttons/ButtonTertiary';
-
 /**
  * Sheet action options.
  */
@@ -10,7 +7,7 @@ export interface Action {
   testID?: string;
   disabled?: boolean;
   isLoading?: boolean;
-  variant?: ButtonTertiaryVariant;
+  isDanger?: boolean;
 }
 
 /**

diff --git a/app/component-library/components/Accordions/Accordion/Accordion.stories.tsx b/app/component-library/components/Accordions/Accordion/Accordion.stories.tsx
@@ -8,7 +8,7 @@ import { boolean, text } from '@storybook/addon-knobs';
 
 // External dependencies.
 import { mockTheme } from '../../../../util/theme';
-import Text, { TextVariants } from '../../Texts/Text';
+import Text, { TextVariant } from '../../Texts/Text';
 
 // Internal dependencies.
 import Accordion from './Accordion';
@@ -27,7 +27,7 @@ storiesOf('Component Library / Accordion', module).add('Default', () => {
           justifyContent: 'center',
         }}
       >
-        <Text variant={TextVariants.sBodySM}>{'Wrapped Content'}</Text>
+        <Text variant={TextVariant.BodySM}>{'Wrapped Content'}</Text>
       </View>
     </Accordion>
   );

diff --git a/...nt-library/components/Accordions/Accordion/foundation/AccordionHeader/AccordionHeader.tsx b/...nt-library/components/Accordions/Accordion/foundation/AccordionHeader/AccordionHeader.tsx
@@ -13,7 +13,7 @@ import Animated, {
 // External dependencies.
 import { useStyles } from '../../../../../hooks';
 import Icon, { IconSize, IconName } from '../../../../Icon';
-import Text, { TextVariants } from '../../../../Texts/Text';
+import Text, { TextVariant } from '../../../../Texts/Text';
 import { ACCORDION_EXPAND_TRANSITION_DURATION } from '../../Accordion.constants';
 
 // Internal dependencies.
@@ -61,7 +61,7 @@ const AccordionHeader = ({
       testID={ACCORDION_HEADER_TEST_ID}
     >
       <Text
-        variant={TextVariants.sBodyMD}
+        variant={TextVariant.BodyMD}
         style={styles.title}
         testID={ACCORDION_HEADER_TITLE_TEST_ID}
       >

diff --git a/...cordions/Accordion/foundation/AccordionHeader/__snapshots__/AccordionHeader.test.tsx.snap b/...cordions/Accordion/foundation/AccordionHeader/__snapshots__/AccordionHeader.test.tsx.snap
@@ -18,7 +18,7 @@ exports[`AccordionHeader - Snapshot should render a rotated down Arrow if isExpa
   <Text
     style={
       Object {
-        "color": "#037DD6",
+        "color": "#0376C9",
       }
     }
     testID="accordion-header-title"
@@ -44,7 +44,7 @@ exports[`AccordionHeader - Snapshot should render a rotated down Arrow if isExpa
     testID="accordion-header-arrow-icon-animation"
   >
     <Icon
-      color="#037DD6"
+      color="#0376C9"
       name="ArrowUpOutline"
       size="16"
       testID="accordion-header-arrow-icon"
@@ -71,7 +71,7 @@ exports[`AccordionHeader - Snapshot should render default settings correctly 1`]
   <Text
     style={
       Object {
-        "color": "#037DD6",
+        "color": "#0376C9",
       }
     }
     testID="accordion-header-title"
@@ -97,7 +97,7 @@ exports[`AccordionHeader - Snapshot should render default settings correctly 1`]
     testID="accordion-header-arrow-icon-animation"
   >
     <Icon
-      color="#037DD6"
+      color="#0376C9"
       name="ArrowUpOutline"
       size="16"
       testID="accordion-header-arrow-icon"

diff --git a/...rary/components/Avatars/Avatar/variants/AvatarIcon/__snapshots__/AvatarIcon.test.tsx.snap b/...rary/components/Avatars/Avatar/variants/AvatarIcon/__snapshots__/AvatarIcon.test.tsx.snap
@@ -6,13 +6,13 @@ exports[`AvatarIcon should render correctly 1`] = `
   style={
     Object {
       "alignItems": "center",
-      "backgroundColor": "#037DD619",
+      "backgroundColor": "#0376C919",
       "justifyContent": "center",
     }
   }
 >
   <Icon
-    color="#037DD6"
+    color="#0376C9"
     name="AddSquareFilled"
     size="24"
   />