Merge branch 'main' into update/pr-template-to-reflect-qa-labels

.eslintrc.js

@@ -3,6 +3,9 @@ module.exports = {
   root: true,
   parser: 'babel-eslint',
   extends: [
+    // @react-native-community
+    // - Depends on babel-eslint parser
+    // - Migrated to @react-native/eslint-config after v3.2.0
     '@react-native-community',
     'eslint:recommended',
     'plugin:import/warnings',
@@ -13,6 +16,10 @@ module.exports = {
     {
       files: ['*.{ts,tsx}'],
       extends: ['@metamask/eslint-config-typescript'],
+      rules: {
+        // TODO: re-enable
+        'jsdoc/no-types': 'off',
+      },
     },
     {
       files: ['scripts/**/*.js'],

.github/CONTRIBUTING.md

@@ -0,0 +1,25 @@
+# Welcome to MetaMask!
+
+If you're submitting code to MetaMask, there are some simple things we'd appreciate you doing to help us stay organized!
+
+### Finding the right project
+
+Before taking the time to code and implement something, feel free to open an issue and discuss it! There may even be an issue already open, and together we may come up with a specific strategy before you take your precious time to write code.
+
+There are also plenty of open issues we'd love help with. Search the [`good first issue`](https://github.com/MetaMask/metamask-mobile/contribute) label, or head to Gitcoin and earn ETH for completing projects we've posted bounties on.
+
+If you're picking up a bounty or an existing issue, feel free to ask clarifying questions on the issue as you go about your work.
+
+### Submitting a pull request
+When you're done with your project / bugfix / feature and ready to submit a PR, there are a couple guidelines we ask you to follow:
+
+- [ ] **Make sure you followed our [`coding guidelines`](https://github.com/MetaMask/metamask-mobile/blob/main/.github/coding_guidelines/CODING_GUIDELINES.md)**: These guidelines aim to maintain consistency and readability across the codebase. They help ensure that the code is easy to understand, maintain, and modify, which is particularly important when working with multiple contributors.
+- [ ] **Test it**: For any new programmatic functionality, we like unit tests when possible, so if you can keep your code cleanly isolated, please do add a test file to the `tests` folder.
+- [ ] **Add to the CHANGELOG**: Help us keep track of all the moving pieces by adding an entry to the [`CHANGELOG.md`](https://github.com/MetaMask/metamask-mobile/blob/main/CHANGELOG.md) with a link to your PR.
+- [ ] **Meet the spec**: Make sure the PR adds functionality that matches the issue you're closing. This is especially important for bounties: sometimes design or implementation details are included in the conversation, so read carefully!
+- [ ] **Close the issue**: If this PR closes an open issue, add the line `fixes #$ISSUE_NUMBER`. Ex. For closing issue 418, include the line `fixes #418`. If it doesn't close the issue but addresses it partially, just include a reference to the issue number, like `#418`.
+- [ ] **Keep it simple**: Try not to include multiple features in a single PR, and don't make extraneous changes outside the scope of your contribution. All those touched files make things harder to review ;)
+- [ ] **PR against `main`**: Submit your PR against the `main` branch. This is where we merge new features to be included in forthcoming releases. When we initiate a new release, we create a branch named `release/x.y.z`, serving as a snapshot of the `main` branch. This particular branch is utilized to construct the builds, which are then tested during the release regression testing phase before they are submitted to the stores for production. In the event your PR is a hot-fix for a bug identified on the `release/x.y.z` branch, you should still submit your PR against the `main` branch. This PR will subsequently be cherry-picked into the `release/x.y.z` branch by our release engineers.
+- [ ] **Get the PR reviewed by code owners**: At least two code owner approvals are mandatory before merging any PR.
+
+And that's it! Thanks for helping out.

.github/coding_guidelines/CODING_GUIDELINES.md

@@ -0,0 +1,76 @@
+# MetaMask Mobile Coding Guidelines
+
+### 1. New Code Should be Typescript
+- New components and utilities should be written in Typescript and enforce typing. 
+- Existing code should be refactored into Typescript where time allows. If you are replacing a component use Typescript.
+
+### 2. Using Functional Components and Hooks Instead of Classes
+- Use functional components and hooks as they result in more concise and readable code compared to classes.
+
+### 3. Organize Files Related to the Same Component in One Folder
+- An example of a component file structure:
+
+```.tsx
+AvatarAccount
+├── AvatarAccount.constants.ts
+├── AvatarAccount.stories.tsx
+├── AvatarAccount.styles.ts
+├── AvatarAccount.test.tsx
+├── AvatarAccount.tsx
+├── AvatarAccount.types.ts
+├── README.md
+├── __snapshots__
+│   └── AvatarAccount.test.tsx.snap
+└── index.ts
+```
+
+### 4. Follow Naming Conventions
+- You should always use PascalCase when naming components to differentiate them from other non-component TSX files. For example: *TextField*, *NavMenu*, and *SuccessButton*.
+- Use camelCase for functions declared inside components like *handleInput()* or *showElement()*.
+- When creating hooks use *withHookName()*.
+
+### 5. Avoid Repetitive Code
+- If you notice you are writing duplicated code or components, convert it into a component, utility functions or hooks that can be reused. Do this with [scalable intention](https://sandimetz.com/blog/2016/1/20/the-wrong-abstraction). 
+
+### 6. Component Optimization
+- For functional components, instead of having large return statements, break the component down into smaller sub-components.
+- Use memoizing techniques where possible. Utilize the useMemo hook for values and useCallback for functions. Follow recommended React Native guidance.
+
+### 7. Use Object Destructuring For Props
+- Instead of passing the props object, use object destructuring to pass the prop name. This discards the need to refer to the props object each time you need to use it.
+
+```tsx
+import React from 'react';
+import { View } from 'react-native';
+
+const MyComponent = ({id}) => {
+  return <View id={id} />;
+};
+
+const MyComponent = (props, context) => {
+  const { id } = props;
+  return <View id={id} />;
+};
+
+const Foo = class extends React.PureComponent {
+  render() {
+    const { title } = this.context;
+    return <View>{title}</View>
+  }
+};
+
+```
+
+### 8. Document Each Component/Utility
+- New utility functions should be documented [TSDoc](https://tsdoc.org) commenting format.
+- Referencing our component docs.
+- If applicable add URL to online resources if they are meaningful for the component/method.
+
+### 9. Write Tests for Each Component/Utility
+- Write tests for the components you create as it reduces the possibilities of errors. Testing ensures that the components are behaving as you would expect. In this project Jest is used, and it provides an environment where you can execute your tests.
+
+### 10. External packages should be well maintained
+- New packages should only be integrated if the application doesn’t have the existing functionality and it cannot be added by implementing a small utility function. Use the https://snyk.io/advisor/ to assess the popularity, maintainability and security analysis. The package must be in good standing to be added to the project.
+- Update existing dependencies when you notice they are out of date.
+
+[Source](https://www.makeuseof.com/must-follow-react-practices/)

.github/pull_request_template.md

@@ -5,7 +5,7 @@ Please ensure that any applicable requirements below are satisfied before submit
 -->
 
 **Development & PR Process**
-1. Follow MetaMask [Mobile Coding Standards](https://docs.google.com/document/d/1VJLwTRsUw_5EDq_o8d6sSbXUAYENLurkRitYO45eY5o/edit?usp=sharing)
+1. Follow MetaMask [Mobile Coding Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/coding_guidelines/CODING_GUIDELINES.md)
 2. Add `release-xx` label to identify the PR slated for a upcoming release (will be used in release discussion)
 3. Add `needs-dev-review` label when work is completed
 4. Add `needs-qa` label when dev review is completed
@@ -25,7 +25,7 @@ _If applicable, add screenshots and/or recordings to visualize the before and af
 
 **Issue**
 
-Progresses #???
+fixes #???
 
 **Checklist**
 

CHANGELOG.md

@@ -2,6 +2,9 @@
 
 ## Current Main Branch
 
+## 7.3.1 - Jul 26, 2023
+- [#6833](https://github.com/MetaMask/metamask-mobile/pull/6833): fix: invalid transaction data used for approve transaction
+
 ## 7.3.0 - Jul 13, 2023
 ### Added
 - [#6220](https://github.com/MetaMask/metamask-mobile/pull/6220): feat: Upgrade React Native to 0.71.6

android/app/build.gradle

@@ -137,8 +137,8 @@ android {
         applicationId "io.metamask"
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
-        versionCode 1144
-        versionName "7.3.0"
+        versionCode 1156
+        versionName "7.3.1"
         testBuildType System.getProperty('testBuildType', 'debug')
         missingDimensionStrategy 'react-native-camera', 'general'
         testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
@@ -217,7 +217,7 @@ android {
         variant.outputs.each { output ->
             // For each separate APK per architecture, set a unique version code as described here:
             // https://developer.android.com/studio/build/configure-apk-splits.html
-            // Example: versionCode 1143 will generate 1001 for armeabi-v7a, 1002 for x86, etc.
+            // Example: versionCode 1156 will generate 1001 for armeabi-v7a, 1002 for x86, etc.
             def versionCodes = ["armeabi-v7a": 1, "x86": 2, "arm64-v8a": 3, "x86_64": 4]
             def abi = output.getFilter(OutputFile.ABI)
             if (abi != null) {  // null for the universal-debug, universal-release variants

app/__mocks__/react-native-i18n.js → app/__mocks__/react-native-i18n.ts

@@ -1,5 +1,3 @@
-// @flow
-
 // eslint-disable-next-line import/no-extraneous-dependencies
 import I18nJs from 'i18n-js';
 

app/actions/security/index.ts

@@ -1,5 +1,5 @@
 /* eslint-disable import/prefer-default-export */
-import type { Action } from 'redux';
+import type { Action as ReduxAction } from 'redux';
 
 export enum ActionType {
   SET_ALLOW_LOGIN_WITH_REMEMBER_ME = 'SET_ALLOW_LOGIN_WITH_REMEMBER_ME',
@@ -9,22 +9,22 @@ export enum ActionType {
 }
 
 export interface AllowLoginWithRememberMeUpdated
-  extends Action<ActionType.SET_ALLOW_LOGIN_WITH_REMEMBER_ME> {
+  extends ReduxAction<ActionType.SET_ALLOW_LOGIN_WITH_REMEMBER_ME> {
   enabled: boolean;
 }
 
 export interface AutomaticSecurityChecks
-  extends Action<ActionType.SET_AUTOMATIC_SECURITY_CHECKS> {
+  extends ReduxAction<ActionType.SET_AUTOMATIC_SECURITY_CHECKS> {
   enabled: boolean;
 }
 
 export interface UserSelectedAutomaticSecurityChecksOptions
-  extends Action<ActionType.USER_SELECTED_AUTOMATIC_SECURITY_CHECKS_OPTION> {
+  extends ReduxAction<ActionType.USER_SELECTED_AUTOMATIC_SECURITY_CHECKS_OPTION> {
   selected: boolean;
 }
 
 export interface SetAutomaticSecurityChecksModalOpen
-  extends Action<ActionType.SET_AUTOMATIC_SECURITY_CHECKS_MODAL_OPEN> {
+  extends ReduxAction<ActionType.SET_AUTOMATIC_SECURITY_CHECKS_MODAL_OPEN> {
   open: boolean;
 }
 

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

@@ -5,6 +5,8 @@ import TEST_ADDRESS from '../../../../constants/address';
 import {
   CONTRACT_PET_NAME,
   CONTRACT_LOCAL_IMAGE,
+  CONTRACT_COPY_ADDRESS,
+  CONTRACT_ON_PRESS,
 } from '../ContractBox/ContractBox.constants';
 import { CONTRACT_BOX_NO_PET_NAME_TEST_ID } from './ContractBoxBase.constants';
 import { ContractBoxBaseProps } from './ContractBoxBase.types';
@@ -17,6 +19,8 @@ describe('Component ContractBoxBase', () => {
       contractAddress: TEST_ADDRESS,
       contractPetName: CONTRACT_PET_NAME,
       contractLocalImage: CONTRACT_LOCAL_IMAGE,
+      onCopyAddress: CONTRACT_COPY_ADDRESS,
+      onContractPress: CONTRACT_ON_PRESS,
     };
   });
 

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

@@ -72,7 +72,6 @@ const ContractBoxBase = ({
               variant={ButtonVariants.Link}
               textVariant={TextVariant.HeadingMD}
               label={formattedAddress}
-              style={styles.header}
               onPress={onContractPress}
             />
           </View>

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

@@ -36,7 +36,9 @@ exports[`Component ContractBoxBase should render correctly 1`] = `
         variant="Token"
       />
     </View>
-    <Component>
+    <Component
+      onPress={[Function]}
+    >
       <Text
         style={
           Object {
@@ -65,6 +67,7 @@ exports[`Component ContractBoxBase should render correctly 1`] = `
   >
     <IconView
       name="Copy"
+      onPress={[Function]}
       size="24"
       testID="copy-icon"
     />

app/component-library/components/Banners/Banner/foundation/BannerBase/BannerBase.constants.tsx

@@ -35,6 +35,7 @@ const SAMPLE_BANNERBASE_STARTACCESSORY = <Icon {...SAMPLE_ICON_PROPS} />;
 const SAMPLE_BANNERBASE_TITLE = 'Sample Banner Title';
 const SAMPLE_BANNERBASE_DESCRIPTION = 'Sample Banner Description';
 const SAMPLE_BANNERBASE_ACTIONBUTTON_PROPS: ButtonProps = {
+  variant: ButtonVariants.Secondary,
   label: 'Action Label',
   onPress: () => {
     console.log('clicked');

app/component-library/components/Banners/Banner/foundation/BannerBase/BannerBase.tsx

@@ -17,7 +17,6 @@ import { BannerBaseProps } from './BannerBase.types';
 import {
   DEFAULT_BANNERBASE_TITLE_TEXTVARIANT,
   DEFAULT_BANNERBASE_DESCRIPTION_TEXTVARIANT,
-  DEFAULT_BANNERBASE_ACTIONBUTTON_VARIANT,
   DEFAULT_BANNERBASE_ACTIONBUTTON_SIZE,
   DEFAULT_BANNERBASE_CLOSEBUTTON_BUTTONICONVARIANT,
   DEFAULT_BANNERBASE_CLOSEBUTTON_BUTTONICONSIZE,
@@ -60,7 +59,6 @@ const BannerBase: React.FC<BannerBaseProps> = ({
         {renderDescription()}
         {actionButtonProps && (
           <Button
-            variant={DEFAULT_BANNERBASE_ACTIONBUTTON_VARIANT}
             size={DEFAULT_BANNERBASE_ACTIONBUTTON_SIZE}
             {...actionButtonProps}
           />

app/component-library/components/Banners/Banner/foundation/BannerBase/README.md

@@ -0,0 +1,89 @@
+# BannerBase
+
+BannerBase serves as a base for all banner variants. It contains  standard props such as information and related actions. 
+
+## BannerBase Props
+
+This component extends React Native's [ViewProps](https://reactnative.dev/docs/view) component.
+
+### `variant`
+
+Variant of Banner.
+
+| <span style="color:gray;font-size:14px">TYPE</span> | <span style="color:gray;font-size:14px">REQUIRED</span> |
+| :-------------------------------------------------- | :------------------------------------------------------ |
+| [BannerVariant](../../Banner.types.ts)               | No                                                     |
+
+### `startAccessory`
+
+Optional content to be displayed before the info section.
+
+| <span style="color:gray;font-size:14px">TYPE</span> | <span style="color:gray;font-size:14px">REQUIRED</span> |
+| :-------------------------------------------------- | :------------------------------------------------------ |
+| React.ReactNode                                           | No                                                     |
+
+### `title`
+
+Optional prop for title of the Banner.
+
+| <span style="color:gray;font-size:14px">TYPE</span> | <span style="color:gray;font-size:14px">REQUIRED</span> |
+| :-------------------------------------------------- | :------------------------------------------------------ |
+| string or ReactNode                                   | No                                                     |
+
+### `description`
+
+Optional description below the title.
+
+| <span style="color:gray;font-size:14px">TYPE</span> | <span style="color:gray;font-size:14px">REQUIRED</span> |
+| :-------------------------------------------------- | :------------------------------------------------------ |
+| string or ReactNode                                   | No                                                     |
+
+
+### `actionButtonProps`
+
+Optional prop to control the action button's props.
+
+| <span style="color:gray;font-size:14px">TYPE</span> | <span style="color:gray;font-size:14px">REQUIRED</span> |
+| :-------------------------------------------------- | :------------------------------------------------------ |
+| [ButtonProps](../../../../Buttons/Button/Button.types.ts)                                  | No                                                     |
+
+### `onClose`
+
+Optional function to trigger when pressing the action button.
+
+| <span style="color:gray;font-size:14px">TYPE</span> | <span style="color:gray;font-size:14px">REQUIRED</span> |
+| :-------------------------------------------------- | :------------------------------------------------------ |
+| Function                                            | No                                                     |
+
+### `closeButtonProps`
+
+Optional prop to control the close button's props.
+
+| <span style="color:gray;font-size:14px">TYPE</span> | <span style="color:gray;font-size:14px">REQUIRED</span> |
+| :-------------------------------------------------- | :------------------------------------------------------ |
+| [ButtonIconProps](../../../../Buttons/ButtonIcon/ButtonIcon.types.ts)                                  | No                                                     |
+
+### `children`
+
+Optional prop to add children components to the Banner
+
+| <span style="color:gray;font-size:14px">TYPE</span> | <span style="color:gray;font-size:14px">REQUIRED</span> |
+| :-------------------------------------------------- | :------------------------------------------------------ |
+| React.ReactNode                                     | No                                                     |
+
+## Usage
+
+```javascript
+<BannerBase
+  startAccessory={SAMPLE_BANNERBASE_ACCESSORY}
+  title={SAMPLE_BANNERBASE_TITLE}
+  description={SAMPLE_BANNERBASE_DESCRIPTION}
+  actionButtonProps={{
+    label: SAMPLE_BANNERBASE_ACTIONBUTTONLABEL,
+    onPress: () => {}
+  }}
+  onClose={() => {}}
+>
+  {SAMPLE_ADDITIONAL_ACCESSORY}
+</BannerBase>;
+```

app/component-library/components/Cells/Cell/variants/CellMultiSelect/CellMultiSelect.styles.ts

@@ -24,6 +24,9 @@ const styleSheet = (params: {
 
   return StyleSheet.create({
     base: Object.assign({} as ViewStyle, style) as ViewStyle,
+    cell: {
+      flex: 1,
+    },
   });
 };
 

app/component-library/components/Cells/Cell/variants/CellMultiSelect/CellMultiSelect.tsx

@@ -39,6 +39,7 @@ const CellMultiSelect = ({
         secondaryText={secondaryText}
         tertiaryText={tertiaryText}
         tagLabel={tagLabel}
+        style={styles.cell}
       >
         {children}
       </CellBase>