feat(ci): Expo

.depcheckrc.yml

@@ -84,3 +84,10 @@ ignores:
   - 'app'
   - 'i18n-js'
   - 'images'
+
+  ## Expo
+  - '@config-plugins/detox'
+  - 'cross-spawn'
+  - 'expo-build-properties'
+  - 'expo-dev-client'
+

.github/scripts/tsconfig.json

@@ -1,3 +1,61 @@
 {
-  "extends": "../../tsconfig.json"
+  "compilerOptions": {
+    /* Basic Options */
+    "target": "esnext" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */,
+    "module": "commonjs" /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */,
+    "lib": [
+      "es2017",
+    ] /* Specify library files to be included in the compilation. */,
+    "allowJs": true /* Allow javascript files to be compiled. */,
+    // "checkJs": true,                       /* Report errors in .js files. */
+    "jsx": "react-native" /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */,
+    // "declaration": true,                   /* Generates corresponding '.d.ts' file. */
+    // "sourceMap": true,                     /* Generates corresponding '.map' file. */
+    // "outFile": "./",                       /* Concatenate and emit output to single file. */
+    // "outDir": "./",                        /* Redirect output structure to the directory. */
+    // "rootDir": "./",                       /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
+    // "removeComments": true,                /* Do not emit comments to output. */
+    "noEmit": true /* Do not emit outputs. */,
+    // "incremental": true,                   /* Enable incremental compilation */
+    // "importHelpers": true,                 /* Import emit helpers from 'tslib'. */
+    // "downlevelIteration": true,            /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */
+    "isolatedModules": true /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */,
+    /* Strict Type-Checking Options */
+    "strict": true /* Enable all strict type-checking options. */,
+    // "noImplicitAny": true,                 /* Raise error on expressions and declarations with an implied 'any' type. */
+    // "strictNullChecks": true,              /* Enable strict null checks. */
+    // "strictFunctionTypes": true,           /* Enable strict checking of function types. */
+    // "strictPropertyInitialization": true,  /* Enable strict checking of property initialization in classes. */
+    // "noImplicitThis": true,                /* Raise error on 'this' expressions with an implied 'any' type. */
+    // "alwaysStrict": true,                  /* Parse in strict mode and emit "use strict" for each source file. */
+    /* Additional Checks */
+    // "noUnusedLocals": true,                /* Report errors on unused locals. */
+    // "noUnusedParameters": true,            /* Report errors on unused parameters. */
+    // "noImplicitReturns": true,             /* Report error when not all code paths in function return a value. */
+    // "noFallthroughCasesInSwitch": true,    /* Report errors for fallthrough cases in switch statement. */
+    /* Module Resolution Options */
+    "moduleResolution": "node" /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */,
+    "resolveJsonModule": true /* Allows importing JSON files */,
+    "baseUrl": "." /* Base directory to resolve non-absolute module names. */,
+    /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
+    // "rootDirs": [],                        /* List of root folders whose combined content represents the structure of the project at runtime. */
+    // "typeRoots": [],                       /* List of folders to include type definitions from. */
+    // "types": [],                           /* Type declaration files to be included in compilation. */
+    "allowSyntheticDefaultImports": true /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */,
+    "esModuleInterop": true /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */,
+    // "preserveSymlinks": true,              /* Do not resolve the real path of symlinks. */
+    "skipLibCheck": true /* Skip type checking of declaration files. */
+    /* Source Map Options */
+    // "sourceRoot": "./",                    /* Specify the location where debugger should locate TypeScript files instead of source locations. */
+    // "mapRoot": "./",                       /* Specify the location where debugger should locate map files instead of generated locations. */
+    // "inlineSourceMap": true,               /* Emit a single file with source maps instead of having a separate file. */
+    // "inlineSources": true,                 /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */
+    /* Experimental Options */
+    // "experimentalDecorators": true,        /* Enables experimental support for ES7 decorators. */
+    // "emitDecoratorMetadata": true,         /* Enables experimental support for emitting type metadata for decorators. */
+  },
+  "exclude": [
+    "node_modules",
+    "jest.config.js"
+  ]
 }

.gitignore

@@ -23,6 +23,7 @@ DerivedData
 project.xcworkspace
 ios/debug.xcconfig
 ios/release.xcconfig
+.xcode.env.local
 
 # android / intellij
 build/
@@ -130,4 +131,8 @@ docs/assets/termsOfUse.html
 android/app/src/main/assets/modules.json
 
 # Google firebase base64 derived configs
-**/GoogleService-Info.plist
+**/GoogleService-Info.plist
+# Expo
+.expo
+dist/
+web-build/

README.md

@@ -15,7 +15,8 @@ To learn how to contribute to the MetaMask codebase, visit our [Contributor Docs
 ## Documentation
 
 - [Architecture](./docs/readme/architecture.md)
-- [Development Environment Setup](./docs/readme/environment.md)
+- [Expo Development Environment Setup](./docs/readme/expo-environment.md)
+- [Native Development Environment Setup](./docs/readme/environment.md)
 - [Build Troubleshooting](./docs/readme/troubleshooting.md)
 - [Testing](./docs/readme/testing.md)
 - [Debugging](./docs/readme/debugging.md)
@@ -24,13 +25,59 @@ To learn how to contribute to the MetaMask codebase, visit our [Contributor Docs
 
 ## Getting started
 
-### Environment setup
+### Using Expo (recommended)
 
-Before running the app, make sure your development environment has all the required tools. Several of these tools (ie Node and Ruby) may require specific versions in order to successfully build the app.
+Expo is the fastest way to start developing. With the Expo framework, developers don't need to compile the native side of the application as before, hence no need for any native enviornment setup, developers only need to download a precompiled develpoment build and run the javascript bundler. The development build will then connect with the bundler to load the javascript code.
+
+#### Expo Environment Setup
+
+[Install node, yarn and watchman.](./docs/readme/expo-environment.md)
+
+#### Clone the project
+
+```bash
+git clone [email protected]:MetaMask/metamask-mobile.git && \
+cd metamask-mobile
+```
+
+#### Install dependencies
+
+```bash
+yarn setup:expo
+```
+
+#### Run the bundler
+
+```bash
+yarn watch
+```
+
+#### Download and install the development build
+
+Go to the app's [GitHub Releases page](https://github.com/MetaMask/metamask-mobile/releases), download the latest release development build (android-expo-dev-build.apk or ios-expo-dev-build.ipa) and install it on an Android/iOS simulator or Android/iOS physical device.
+
+#### Load the app
+
+If on a simulator:
+- use the initial expo screen that appears when starting the development to choose the bundler url
+- OR press "a" for Android or "i" for iOS on the terminal where the bundler is running
+
+If on a physical device:
+- Use the camera app to scan the QR code presented by the bundler running on the terminal
+
+That's it! This will work for any javascript development, if you need to develop or modify native code please see the next section.
+
+### Native Development
+
+If developing or modifying native code or installing any library that introduces or uses native code, it is not possible to use an Expo precompiled development build as you need to compile the native side of the application again. To do so, please follow the steps stated in this section.
+
+#### Native Environment setup
+
+Before running the app for native development, make sure your development environment has all the required tools. Several of these tools (ie Node and Ruby) may require specific versions in order to successfully build the app.
 
 [Setup your development environment](./docs/readme/environment.md)
 
-### Building the app
+#### Building the app
 
 **Clone the project**
 
@@ -39,16 +86,16 @@ git clone [email protected]:MetaMask/metamask-mobile.git && \
 cd metamask-mobile
 ```
 
-#### Firebase Messaging Setup
+##### Firebase Messaging Setup
 
 MetaMask uses Firebase Cloud Messaging (FCM) to enable app communications. To integrate FCM, you’ll need configuration files for both iOS and Android platforms.
 
-##### Internal Contributor instructions
+###### Internal Contributor instructions
 
 1. Grab the `.js.env` file from 1Password, ask around for the correct vault. This file contains the `GOOGLE_SERVICES_B64_ANDROID` and `GOOGLE_SERVICES_B64_IOS` secrets that will be used to generate the relevant configuration files for IOS/Android.
 2. [Install](./README.md#install-dependencies) and [run & start](./README.md#running-the-app) the application as documented below.
 
-##### External Contributor instructions
+###### External Contributor instructions
 
 As an external contributor, you need to provide your own Firebase project configuration files:
 - **`GoogleService-Info.plist`** (iOS)
@@ -77,15 +124,15 @@ export GOOGLE_SERVICES_B64_IOS="$(base64 -w0 -i ./ios/GoogleServices/GoogleServi
 In case of any doubt, please follow the instructions in the link below to get your Firebase project config file.
 [Firebase Project Quickstart](https://firebaseopensource.com/projects/firebase/quickstart-js/messaging/readme/#getting_started)
 
-#### Install dependencies
+##### Install dependencies
 
 ```bash
 yarn setup
 ```
 
 _Not the usual install command, this will run scripts and a lengthy postinstall flow_
 
-### Running the app
+#### Running the app for native development
 
 **Run Metro bundler**
 

android/app/build.gradle

@@ -47,6 +47,11 @@ react {
     //
     //   The list of flags to pass to the Hermes compiler. By default is "-O", "-output-source-map"
     // hermesFlags = ["-O", "-output-source-map"]
+    //
+    // Added by install-expo-modules
+    entryFile = file(["node", "-e", "require('expo/scripts/resolveAppEntry')", rootDir.getAbsoluteFile().getParentFile().getAbsolutePath(), "android", "absolute"].execute(null, rootDir).text.trim())
+    cliFile = new File(["node", "--print", "require.resolve('@expo/cli')"].execute(null, rootDir).text.trim())
+    bundleCommand = "export:embed"
 }
 
 // Override default React Native to generate source maps for Hermes

android/app/src/main/AndroidManifest.xml

@@ -76,6 +76,7 @@
 				<data android:host="metamask-alternate.app.link" />
 				<data android:host="metamask.test-app.link" />
 				<data android:host="metamask-alternate.test-app.link" />
+        <data android:scheme="expo-metamask" />
 			</intent-filter>
 			<!-- Branch URI Scheme -->
 			<intent-filter>
@@ -114,6 +115,12 @@
 				<category android:name="android.intent.category.DEFAULT" />
 				<category android:name="android.intent.category.BROWSABLE" />
 			</intent-filter>
+      <intent-filter>
+				<data android:scheme="expo-metamask" />
+				<action android:name="android.intent.action.VIEW" />
+				<category android:name="android.intent.category.DEFAULT" />
+				<category android:name="android.intent.category.BROWSABLE" />
+			</intent-filter>
 		</activity>
 		<!-- Explicitly opt-in to safe browsing -->
 		<meta-data android:name="android.webkit.WebView.EnableSafeBrowsing" android:value="true" />

android/app/src/main/java/io/metamask/MainActivity.java

@@ -1,4 +1,5 @@
 package io.metamask;
+import expo.modules.ReactActivityDelegateWrapper;
 
 import com.facebook.react.ReactActivity;
 import com.facebook.react.ReactActivityDelegate;
@@ -62,7 +63,7 @@ public void onNewIntent(Intent intent) {
    */
 	@Override
 	protected ReactActivityDelegate createReactActivityDelegate() {
-		return new DefaultReactActivityDelegate(this, getMainComponentName(), DefaultNewArchitectureEntryPoint.getFabricEnabled()) {
+		return new ReactActivityDelegateWrapper(this, BuildConfig.IS_NEW_ARCHITECTURE_ENABLED, new DefaultReactActivityDelegate(this, getMainComponentName(), DefaultNewArchitectureEntryPoint.getFabricEnabled()) {
 		@Override
 		protected Bundle getLaunchOptions() {
 			Bundle initialProperties = new Bundle();
@@ -73,6 +74,6 @@ protected Bundle getLaunchOptions() {
 			}
 			return initialProperties;
 		}
-		};
+		});
 	}
 }

android/app/src/main/java/io/metamask/MainApplication.java

@@ -1,4 +1,7 @@
 package io.metamask;
+import android.content.res.Configuration;
+import expo.modules.ApplicationLifecycleDispatcher;
+import expo.modules.ReactNativeHostWrapper;
 
 import android.app.Application;
 import com.facebook.react.ReactApplication;
@@ -37,7 +40,7 @@ public String getFileProviderAuthority() {
     return BuildConfig.APPLICATION_ID + ".provider";
   }
 
-	private final ReactNativeHost mReactNativeHost = new DefaultReactNativeHost(this) {
+	private final ReactNativeHost mReactNativeHost = new ReactNativeHostWrapper(this, new DefaultReactNativeHost(this) {
 		@Override
 		public boolean getUseDeveloperSupport() {
 			return BuildConfig.DEBUG;
@@ -68,9 +71,9 @@ protected Boolean isHermesEnabled() {
 
 		@Override
 		protected String getJSMainModuleName() {
-			return "index";
+			return ".expo/.virtual-metro-entry";
 		}
-  	};
+  	});
 
 	@Override
 	public ReactNativeHost getReactNativeHost() {
@@ -112,5 +115,12 @@ public void onCreate() {
     }
 
     ReactNativeFlipper.initializeFlipper(this, getReactNativeHost().getReactInstanceManager());
+    ApplicationLifecycleDispatcher.onApplicationCreate(this);
+  }
+
+  @Override
+  public void onConfigurationChanged(Configuration newConfig) {
+    super.onConfigurationChanged(newConfig);
+    ApplicationLifecycleDispatcher.onConfigurationChanged(this, newConfig);
   }
 }

android/app/src/main/res/xml/react_native_config.xml

@@ -6,5 +6,5 @@
 		<domain includeSubdomains="false">10.0.2.2</domain>
 		<domain includeSubdomains="false">10.0.3.2</domain>
 	</domain-config>
-  <base-config cleartextTrafficPermitted="false" />
+  <base-config cleartextTrafficPermitted="${isDebug}" />
 </network-security-config>

android/settings.gradle

@@ -20,3 +20,6 @@ include ':react-native-gesture-handler'
 project(':react-native-gesture-handler').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-gesture-handler/android')
 include ':react-native-video'
 project(':react-native-video').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-video/android-exoplayer')
+
+apply from: new File(["node", "--print", "require.resolve('expo/package.json')"].execute(null, rootDir).text.trim(), "../scripts/autolinking.gradle")
+useExpoModules()

app.json

@@ -1,4 +1,23 @@
 {
   "name": "MetaMask",
-  "displayName": "MetaMask"
-}
+  "displayName": "MetaMask",
+  "plugins": [
+    [
+      "expo-build-properties",
+      {
+        "android": {
+          "extraMavenRepos": [
+            "../../node_modules/@notifee/react-native/android/libs"
+          ]
+        },
+        "ios": {}
+      }
+    ],
+    [
+      "@config-plugins/detox",
+      {
+        "subdomains": "*"
+      }
+    ]
+  ]
+}

app/components/UI/Ramp/components/PaymentMethodIcon.tsx

@@ -84,9 +84,18 @@
   }
 }
 
+/* 
+* With the integration of Expo, it introduced a compatibility layer (https://github.com/expo/vector-icons) 
+* around react-native-vector-icons which doesn't expose hasIcon anymore so we need to build our own
+*/
+const hasIcon = (IconComponent: { glyphMap: {[key: string]: number} }, name: string) => {
+  return IconComponent && Object.prototype.hasOwnProperty.call(IconComponent.glyphMap, name)
+}
+
 function getIcon(icon: PaymentIcon) {
   const IconComponent = getIconComponent(icon);
-  if (IconComponent?.hasIcon(icon.name)) {
+
+  if (hasIcon(IconComponent, icon.name)) {
     return IconComponent;
   }
   return null;

babel.config.js

@@ -1,7 +1,7 @@
 // eslint-disable-next-line import/no-commonjs
 module.exports = {
   ignore: [/\/ses\.cjs/],
-  presets: ['module:metro-react-native-babel-preset'],
+  presets: ['babel-preset-expo'],
   plugins: [
     'transform-inline-environment-variables',
     'react-native-reanimated/plugin',