adds crypto shim for ios/android (#3113)

* adds crypto shim for ios/android

* removes react-native-get-random-values

packages/app-mobile/app.config.js

@@ -1,21 +1,3 @@
-// const { execSync } = require("child_process");
-// function getLastCommitHash() {
-//   if (process.env.EAS_BUILD_GIT_COMMIT_HASH) {
-//     return process.env.EAS_BUILD_GIT_COMMIT_HASH.substring(0, 7);
-//   }
-//
-//   if (process.env.COMMIT_HASH) {
-//     return process.env.COMMIT_HASH.trim().substring(0, 7);
-//   }
-//
-//   try {
-//     const output = execSync("git rev-parse HEAD").toString();
-//     return output.substring(0, 7);
-//   } catch (_) {
-//     return DEFAULT_HASH
-//   }
-// }
-
 const projectID = "55bf074d-0473-4e61-9d9d-ecf570704635";
 const packageName = "app.backpack.mobile";
 

packages/app-mobile/eas.json

@@ -1,5 +1,6 @@
 {
   "cli": {
+    "appVersionSource": "remote",
     "version": ">= 3.0.0"
   },
   "build": {
@@ -10,7 +11,8 @@
       }
     },
     "production": {
-      "extends": "monorepo"
+      "extends": "monorepo",
+      "autoIncrement": true
     },
     "simulator": {
       "extends": "monorepo",

packages/app-mobile/index.js

@@ -1,10 +1,5 @@
 import { registerRootComponent } from "expo";
-
-import "react-native-get-random-values";
-import "react-native-url-polyfill/auto";
-// Import the the ethers shims (**BEFORE** ethers)
-import "@ethersproject/shims";
-import "react-native-gesture-handler";
+import "./src/crypto-shim";
 
 if (typeof Buffer === "undefined") {
   global.Buffer = require("buffer/").Buffer;
@@ -14,6 +9,14 @@ if (typeof BigInt === "undefined") {
   global.BigInt = require("big-integer");
 }
 
+// eslint-disable-next-line
+import "react-native-url-polyfill/auto";
+// Import the the ethers shims (**BEFORE** ethers)
+// eslint-disable-next-line
+import "@ethersproject/shims";
+// eslint-disable-next-line
+import "react-native-gesture-handler";
+
 Promise.allSettled =
   Promise.allSettled ||
   ((promises) =>

packages/app-mobile/package.json

@@ -36,6 +36,7 @@
     "expo-checkbox": "~2.3.1",
     "expo-clipboard": "~4.1.1",
     "expo-constants": "~14.2.1",
+    "expo-crypto": "~12.2.1",
     "expo-device": "~5.2.1",
     "expo-font": "~11.1.1",
     "expo-linking": "~4.0.1",
@@ -44,14 +45,11 @@
     "expo-splash-screen": "~0.18.1",
     "expo-status-bar": "~1.4.4",
     "expo-updates": "~0.16.1",
-    "jest": "^29.2.1",
-    "jest-expo": "^47.0.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-hook-form": "^7.40.0",
     "react-native": "0.71.3",
     "react-native-gesture-handler": "~2.9.0",
-    "react-native-get-random-values": "^1.8.0",
     "react-native-reanimated": "~2.14.4",
     "react-native-safe-area-context": "4.5.0",
     "react-native-screens": "~3.20.0",
@@ -75,7 +73,8 @@
     "eslint": "^8.20.0",
     "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-simple-import-sort": "^7.0.0",
-    "jest": "^26.6.3",
+    "jest": "^29.2.1",
+    "jest-expo": "^47.0.0",
     "patch-package": "^6.5.0",
     "typescript": "~4.9.3",
     "webdriverio": "^7.20.7"

packages/app-mobile/src/App.tsx

@@ -14,12 +14,12 @@ import {
 import { NotificationsProvider } from "@coral-xyz/recoil";
 import { ActionSheetProvider } from "@expo/react-native-action-sheet";
 import { BottomSheetModalProvider } from "@gorhom/bottom-sheet";
-import { useTheme } from "~hooks/useTheme";
 import { SafeAreaProvider } from "react-native-safe-area-context";
 import { WebView } from "react-native-webview";
 import { RecoilRoot, useRecoilCallback, useRecoilSnapshot } from "recoil";
 
 import { ErrorBoundary } from "~components/ErrorBoundary";
+import { useTheme } from "~hooks/useTheme";
 
 import { useLoadedAssets } from "./hooks/useLoadedAssets";
 import { RootNavigation } from "./navigation/RootNavigator";
@@ -170,9 +170,9 @@ function maybeParseLog({
         const [name, ...rest] = data;
         const color = name.includes("ERROR") ? "red" : "brown";
         console.group(`${channel}:${name}`);
-        console.log("%c" + `${channel}:` + name, `color: ${color}`);
+        console.log(`%c${channel}:${name}`, `color: ${color}`);
         console.log(rest);
-        console.log("%c" + "---", `color: ${color}`);
+        console.log(`%c---`, `color: ${color}`);
         console.groupEnd();
         break;
       }
@@ -181,9 +181,9 @@ function maybeParseLog({
       case "mobile-fe-response": {
         const name = data.wrappedEvent.channel;
         const color = "orange";
-        console.log("%c" + `${channel}:${name}`, `color: ${color}`);
+        console.log(`%c${channel}:${name}`, `color: ${color}`);
         console.log(data.wrappedEvent.data);
-        console.log("%c" + "---", `color: ${color}`);
+        console.log(`%c---`, `color: ${color}`);
         break;
       }
       default: {
@@ -207,7 +207,7 @@ function BackgroundHiddenWebView(): JSX.Element {
     Constants?.expoConfig?.extra || {};
 
   const webViewUrl = Device.isDevice ? remoteWebViewUrl : localWebViewUrl;
-  console.log("webviewUrl", webViewUrl);
+  console.log("webviewUrl", webViewUrl, remoteWebViewUrl);
 
   return (
     <View style={styles.webview}>

packages/app-mobile/src/crypto-shim.ts

@@ -0,0 +1,17 @@
+import { getRandomValues as expoCryptoGetRandomValues } from "expo-crypto";
+
+class Crypto {
+  getRandomValues = expoCryptoGetRandomValues;
+}
+
+const webCrypto = typeof crypto !== "undefined" ? crypto : new Crypto();
+
+(() => {
+  if (typeof crypto === "undefined") {
+    Object.defineProperty(window, "crypto", {
+      configurable: true,
+      enumerable: true,
+      get: () => webCrypto,
+    });
+  }
+})();

yarn.lock

@@ -14124,6 +14124,13 @@ expo-constants@~14.2.0, expo-constants@~14.2.1:
     "@expo/config" "~8.0.0"
     uuid "^3.3.2"
 
+expo-crypto@~12.2.1:
+  version "12.2.1"
+  resolved "https://registry.yarnpkg.com/expo-crypto/-/expo-crypto-12.2.1.tgz#d4f0ef5e2148e1168628d0ebcc2697da3e5df8b3"
+  integrity sha512-NfKsREzj55xCm0v9OKuNw3DU1r6i6VNTYrQcYSZfGOp7o+tvZsJRyr+NyrUg5YVH93TUkothCtsPahdYA4r1Wg==
+  dependencies:
+    base64-js "^1.3.0"
+
 expo-device@~5.2.1:
   version "5.2.1"
   resolved "https://registry.yarnpkg.com/expo-device/-/expo-device-5.2.1.tgz#2962abdb9682e5b991a82836667f2e7d7103d9ef"
@@ -14415,11 +14422,6 @@ eyes@^0.1.8:
   resolved "https://registry.yarnpkg.com/eyes/-/eyes-0.1.8.tgz#62cf120234c683785d902348a800ef3e0cc20bc0"
   integrity sha512-GipyPsXO1anza0AOZdy69Im7hGFCNB7Y/NGjDlZGJ3GJJLtwNSb2vrzYrTYJRrRloVx7pl+bhUaTB8yiccPvFQ==
 
-fast-base64-decode@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/fast-base64-decode/-/fast-base64-decode-1.0.0.tgz#b434a0dd7d92b12b43f26819300d2dafb83ee418"
-  integrity sha512-qwaScUgUGBYeDNRnbc/KyllVU88Jk1pRHPStuF/lO7B0/RTRLj7U0lkdTAutlBblY08rwZDff6tNU9cjv6j//Q==
-
 fast-deep-equal@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-2.0.1.tgz#7b05218ddf9667bf7f370bf7fdb2cb15fdd0aa49"
@@ -21883,13 +21885,6 @@ react-native-gesture-handler@~2.9.0:
     lodash "^4.17.21"
     prop-types "^15.7.2"
 
-react-native-get-random-values@^1.8.0:
-  version "1.8.0"
-  resolved "https://registry.yarnpkg.com/react-native-get-random-values/-/react-native-get-random-values-1.8.0.tgz#1cb4bd4bd3966a356e59697b8f372999fe97cb16"
-  integrity sha512-H/zghhun0T+UIJLmig3+ZuBCvF66rdbiWUfRSNS6kv5oDSpa1ZiVyvRWtuPesQpT8dXj+Bv7WJRQOUP+5TB1sA==
-  dependencies:
-    fast-base64-decode "^1.0.0"
-
 react-native-gradle-plugin@^0.71.15:
   version "0.71.15"
   resolved "https://registry.yarnpkg.com/react-native-gradle-plugin/-/react-native-gradle-plugin-0.71.15.tgz#9e6b506f30729fe8eb086981702f4e3c891d2b13"