Merge/6.2.0 merge from main

.gitignore

@@ -95,7 +95,3 @@ wdio/reports/
 local.log
 browserstack.err
 .priv.wallet.js
-
-# Detox
-# Artifacts generated by failing e2e tests
-/artifacts

.iyarc

@@ -1,3 +1,3 @@
 GHSA-p8p7-x288-28g6
  # excluded and patched using this current patch patches/request+2.88.2.patch
- # improved-yarn-audit advisory exclusions
+ # improved-yarn-audit advisory exclusions

.js.env.example

@@ -20,10 +20,3 @@ export MM_FOX_CODE="EXAMPLE_FOX_CODE"
 export MM_INFURA_PROJECT_ID="null"
 export IGNORE_BOXLOGS_DEVELOPMENT="false"
 export MM_SENTRY_DSN=""
-
-# ENV vars for e2e tests
-# defined as secrets to run on Bitrise CI
-# but have to be defined here for local tests
-export MM_TEST_ACCOUNT_SRP=""
-# address is the address of the first account generated from the previous SRP
-export MM_TEST_ACCOUNT_ADDRESS=""

CHANGELOG.md

@@ -26,7 +26,8 @@
 - [#5796](https://github.com/MetaMask/metamask-mobile/pull/5796): [UPDATE] `@metamask/phishing-controller` to v2
 
 ## 6.1.2 - Mar 03, 2023
-- [#5925](https://github.com/MetaMask/metamask-mobile/pull/5925): [FIX] handle all ios biometric errors and create wallet
+- [#5925](https://github.com/MetaMask/metamask-mobile/pull/5925): handle all ios biometric errors and create wallet
+- udpate change log
 - [#5906](https://github.com/MetaMask/metamask-mobile/pull/5906): [FIX] Add try-catch to recreateVault
 
 ## 6.1.1 - Mar 01, 2023

README.md

@@ -199,28 +199,15 @@ You should see the console for the website that is running inside the WebView
 yarn test:unit
 ```
 
-#### E2E Tests
-
-##### Platforms
-
-E2E test are currently using a combination of Detox for iOS (e2e folder) and Appium for Android (wdio folder).
-Work is in progress to have both platforms using Detox.
-
-##### Test wallet
-
-E2E tests use a wallet able to access testnet and mainnet.
-On Bitrise CI, the wallet is created using the secret recovery phrase from secret env var.
-For local testing, the wallet is created using the secret recovery phrase from the `.js.env` file.
-
-##### iOS
+#### E2E Tests (iOS)
 
 First, [follow the instructions here](https://github.com/wix/AppleSimulatorUtils) to install `applesimutils`. Then:
 
 ```bash
 yarn test:e2e:ios
 ```
 
-##### Android
+#### E2E Tests (Android)
 
 ```bash
 yarn test:e2e:android

app/__mocks__/@exodus/react-native-payments.js

@@ -1 +1 @@
-export { default } from '@exodus/react-native-payments/lib/js/__mocks__';
+export default from '@exodus/react-native-payments/lib/js/__mocks__';

app/__mocks__/@react-native-async-storage/async-storage.js

@@ -1 +1 @@
-export { default } from '@react-native-async-storage/async-storage/jest/async-storage-mock';
+export default from '@react-native-async-storage/async-storage/jest/async-storage-mock';

app/__mocks__/react-native-i18n.js

@@ -4,5 +4,5 @@
 import I18nJs from 'i18n-js';
 
 I18nJs.locale = 'en'; // a locale from your available translations
-export const getLanguages = () => Promise.resolve(['en']);
+export const getLanguages = (): Promise<string[]> => Promise.resolve(['en']);
 export default I18nJs;

app/component-library/components-temp/Contracts/ContractBox/ContractBox.constants.ts

@@ -4,6 +4,7 @@ import { ImageSourcePropType } from 'react-native';
 const imageSource =
   'https://assets.coingecko.com/coins/images/279/small/ethereum.png?1595348880';
 
+export const CONTRACT_ADDRESS = '0x2990079bcdEe240329a520d2444386FC119da21a';
 export const CONTRACT_PET_NAME = 'DAI';
 export const CONTRACT_BOX_TEST_ID = 'contract-box';
 export const CONTRACT_LOCAL_IMAGE: ImageSourcePropType = {
@@ -21,6 +22,3 @@ export const CONTRACT_EXPORT_ADDRESS = () => {
 export const CONTRACT_ON_PRESS = () => {
   console.log('contract pressed');
 };
-
-export const HAS_BLOCK_EXPLORER = true;
-export const TOKEN_SYMBOL = 'D';

app/component-library/components-temp/Contracts/ContractBox/ContractBox.stories.tsx

@@ -2,41 +2,34 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react-native';
 
-// External depencies
-import TEST_ADDRESS from '../../../../constants/address';
-
 // Internal dependencies.
 import ContractBox from './ContractBox';
 import {
+  CONTRACT_ADDRESS,
   CONTRACT_PET_NAME,
   CONTRACT_LOCAL_IMAGE,
   CONTRACT_COPY_ADDRESS,
   CONTRACT_EXPORT_ADDRESS,
   CONTRACT_ON_PRESS,
-  HAS_BLOCK_EXPLORER,
-  TOKEN_SYMBOL,
 } from './ContractBox.constants';
 
 storiesOf('Component Library / Contract Box', module)
   .add('Address Not Saved', () => (
     <ContractBox
-      contractAddress={TEST_ADDRESS}
+      contractAddress={CONTRACT_ADDRESS}
       contractLocalImage={CONTRACT_LOCAL_IMAGE}
       onCopyAddress={CONTRACT_COPY_ADDRESS}
       onExportAddress={CONTRACT_EXPORT_ADDRESS}
       onContractPress={CONTRACT_ON_PRESS}
-      hasBlockExplorer={HAS_BLOCK_EXPLORER}
-      tokenSymbol={TOKEN_SYMBOL}
     />
   ))
   .add('Saved Address', () => (
     <ContractBox
-      contractAddress={TEST_ADDRESS}
+      contractAddress={CONTRACT_ADDRESS}
       contractPetName={CONTRACT_PET_NAME}
       contractLocalImage={CONTRACT_LOCAL_IMAGE}
       onCopyAddress={CONTRACT_COPY_ADDRESS}
       onExportAddress={CONTRACT_EXPORT_ADDRESS}
       onContractPress={CONTRACT_ON_PRESS}
-      hasBlockExplorer={HAS_BLOCK_EXPLORER}
     />
   ));

app/component-library/components-temp/Contracts/ContractBox/ContractBox.styles.ts

@@ -10,6 +10,7 @@ const styleSheet = StyleSheet.create({
   container: {
     flexDirection: 'row',
     justifyContent: 'space-between',
+    marginHorizontal: 10,
   },
 });
 

app/component-library/components-temp/Contracts/ContractBox/ContractBox.test.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
 import { shallow } from 'enzyme';
-import TEST_ADDRESS from '../../../../constants/address';
 import { ContractBoxProps } from './ContractBox.types';
 import ContractBox from './ContractBox';
 import {
   CONTRACT_BOX_TEST_ID,
+  CONTRACT_ADDRESS,
   CONTRACT_PET_NAME,
   CONTRACT_LOCAL_IMAGE,
   CONTRACT_COPY_ADDRESS,
@@ -16,7 +16,7 @@ describe('ContractBox', () => {
   it('should render ContractBox', () => {
     const wrapper = shallow<ContractBoxProps>(
       <ContractBox
-        contractAddress={TEST_ADDRESS}
+        contractAddress={CONTRACT_ADDRESS}
         contractPetName={CONTRACT_PET_NAME}
         contractLocalImage={CONTRACT_LOCAL_IMAGE}
         onCopyAddress={CONTRACT_COPY_ADDRESS}

app/component-library/components-temp/Contracts/ContractBox/ContractBox.tsx

@@ -13,8 +13,6 @@ const ContractBox = ({
   onExportAddress,
   onCopyAddress,
   onContractPress,
-  hasBlockExplorer,
-  tokenSymbol,
 }: ContractBoxProps) => (
   <View testID={CONTRACT_BOX_TEST_ID}>
     <Card style={styles.container}>
@@ -25,8 +23,6 @@ const ContractBox = ({
         onExportAddress={onExportAddress}
         onCopyAddress={onCopyAddress}
         onContractPress={onContractPress}
-        hasBlockExplorer={hasBlockExplorer}
-        tokenSymbol={tokenSymbol}
       />
     </Card>
   </View>

app/component-library/components-temp/Contracts/ContractBoxBase/ContractBoxBase.styles.ts

@@ -18,14 +18,9 @@ const styleSheet = (params: { theme: Theme }) => {
       flexDirection: 'row',
       alignItems: 'center',
     },
-    imageContainer: {
-      marginRight: 16,
-    },
-    icon: {
-      paddingHorizontal: 6,
-    },
     iconContainer: {
       flexDirection: 'row',
+      width: 60,
       alignItems: 'center',
       justifyContent: 'space-between',
     },

app/component-library/components-temp/Contracts/ContractBoxBase/ContractBoxBase.test.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 import ContractBoxBase from './ContractBoxBase';
-import TEST_ADDRESS from '../../../../constants/address';
 import {
+  CONTRACT_ADDRESS,
   CONTRACT_PET_NAME,
   CONTRACT_LOCAL_IMAGE,
 } from '../ContractBox/ContractBox.constants';
@@ -14,7 +14,7 @@ describe('Component ContractBoxBase', () => {
 
   beforeEach(() => {
     props = {
-      contractAddress: TEST_ADDRESS,
+      contractAddress: CONTRACT_ADDRESS,
       contractPetName: CONTRACT_PET_NAME,
       contractLocalImage: CONTRACT_LOCAL_IMAGE,
     };

app/component-library/components-temp/Contracts/ContractBoxBase/ContractBoxBase.tsx

@@ -12,7 +12,6 @@ import { formatAddress } from '../../../../util/address';
 import Icon, { IconName, IconSize } from '../../../components/Icons/Icon';
 import { useStyles } from '../../../hooks';
 import Button, { ButtonVariants } from '../../../components/Buttons/Button';
-import Identicon from '../../../../components/UI/Identicon';
 
 // Internal dependencies.
 import { ContractBoxBaseProps, IconViewProps } from './ContractBoxBase.types';
@@ -31,37 +30,24 @@ const ContractBoxBase = ({
   onCopyAddress,
   onExportAddress,
   onContractPress,
-  hasBlockExplorer,
-  tokenSymbol,
 }: ContractBoxBaseProps) => {
   const formattedAddress = formatAddress(contractAddress, 'short');
-  const {
-    styles,
-    theme: { colors },
-  } = useStyles(styleSheet, {});
+  const { styles } = useStyles(styleSheet, {});
 
   const IconView = ({ onPress, name, size, testID }: IconViewProps) => (
-    <Pressable style={styles.icon} onPress={onPress} testID={testID}>
-      <Icon color={colors.icon.alternative} name={name} size={size} />
+    <Pressable onPress={onPress} testID={testID}>
+      <Icon color={'grey'} name={name} size={size} />
     </Pressable>
   );
 
   return (
     <View style={styles.container} testID={CONTRACT_BOX_TEST_ID}>
       <View style={styles.rowContainer}>
-        <View style={styles.imageContainer}>
-          {contractLocalImage ? (
-            <Avatar
-              variant={AvatarVariants.Token}
-              size={AvatarSize.Md}
-              imageSource={contractLocalImage}
-            />
-          ) : tokenSymbol ? (
-            <Text variant={TextVariant.BodyMDBold}>{tokenSymbol}</Text>
-          ) : (
-            <Identicon address={contractAddress} diameter={25} />
-          )}
-        </View>
+        <Avatar
+          variant={AvatarVariants.Token}
+          size={AvatarSize.Xl}
+          imageSource={contractLocalImage}
+        />
         {contractPetName ? (
           <Pressable onPress={onContractPress}>
             <Text style={styles.header} variant={TextVariant.HeadingMD}>
@@ -74,10 +60,11 @@ const ContractBoxBase = ({
             <Button
               variant={ButtonVariants.Link}
               textVariant={TextVariant.HeadingMD}
-              label={formattedAddress}
               style={styles.header}
               onPress={onContractPress}
-            />
+            >
+              {formattedAddress}
+            </Button>
           </View>
         )}
       </View>
@@ -88,14 +75,12 @@ const ContractBoxBase = ({
           size={IconSize.Lg}
           testID={COPY_ICON_TEST_ID}
         />
-        {hasBlockExplorer && (
-          <IconView
-            name={IconName.Export}
-            onPress={onExportAddress}
-            size={IconSize.Md}
-            testID={EXPORT_ICON_TEST_ID}
-          />
-        )}
+        <IconView
+          onPress={onExportAddress}
+          name={IconName.Export}
+          size={IconSize.Md}
+          testID={EXPORT_ICON_TEST_ID}
+        />
       </View>
     </View>
   );

app/component-library/components-temp/Contracts/ContractBoxBase/ContractBoxBase.types.ts

@@ -4,7 +4,7 @@ import { IconName, IconSize } from '../../../components/Icons/Icon';
 export interface ContractBoxBaseProps {
   contractAddress: string;
   contractPetName?: string;
-  contractLocalImage?: ImageSourcePropType;
+  contractLocalImage: ImageSourcePropType;
   /**
    * function that copies the contract address to the clipboard
    */
@@ -17,11 +17,6 @@ export interface ContractBoxBaseProps {
    * functions that called when the user clicks on the contract name
    */
   onContractPress: () => void;
-  /**
-   * Boolean that determines if the contract has a block explorer
-   */
-  hasBlockExplorer?: boolean;
-  tokenSymbol?: string;
 }
 
 export interface IconViewProps {