refactor: migrating to typescript

.eslintrc.js

@@ -1,11 +1,64 @@
+const commonRules = {
+  "no-bitwise": "off",
+  "comma-dangle": ["error", "never"],
+  "object-curly-spacing": ["error", "always"],
+  "quotes": ["error", "single",  { "avoidEscape": true }],
+  "no-unused-vars": ["error", { "args": "none" }],
+  "react-native/no-inline-styles": "off",
+  "sort-keys": ["error", "asc", {"caseSensitive": true, "natural": false, "minKeys": 2}],
+  "import/order": ["error", {
+    "newlines-between": "always"
+  }]
+};
+
 module.exports = {
-  extends: ["@react-native-community", "plugin:prettier/recommended", "plugin:import/errors", "plugin:import/warnings"],
+  extends: [
+    "@react-native-community",
+    "plugin:prettier/recommended",
+    "plugin:import/errors",
+    "plugin:import/warnings",
+    "plugin:import/typescript"
+   ],
+  globals: { inTest: "writable" },
   overrides: [
     {
-      "files": ["e2e/*.spec.js", "e2e/init.js", "e2e/e2eUtils.js"],
-      "rules": {
+      files: ["e2e/*.spec.js", "e2e/init.js", "e2e/e2eUtils.js"],
+      rules: {
         "no-undef": "off"
       }
+    },
+    {
+      files: ["**/*.ts", "**/*.tsx"],
+      env: { "browser": true, "es6": true, "node": true },
+      extends: [
+        "@react-native-community",
+        "plugin:prettier/recommended",
+        "plugin:import/errors",
+        "plugin:import/warnings",
+        "plugin:import/typescript",
+        "plugin:@typescript-eslint/eslint-recommended",
+        "plugin:@typescript-eslint/recommended"
+      ],
+      parser: "@typescript-eslint/parser",
+      parserOptions: {
+        ecmaFeatures: { "jsx": true },
+        ecmaVersion: 2018,
+        sourceType: "module",
+        project: "./tsconfig.json"
+      },
+      plugins: ["@typescript-eslint", "react-hooks"],
+      rules: {
+        ...commonRules,
+        "@typescript-eslint/no-explicit-any": 0,
+        "@typescript-eslint/semi": ["error"],
+        "@typescript-eslint/no-use-before-define": ["error", { "variables": false }], // enable defining variables after react component;
+        "@typescript-eslint/no-non-null-assertion": 0,
+        '@typescript-eslint/camelcase': 0,
+        "no-void": "off",
+        "react-hooks/rules-of-hooks": "error",
+        "react-hooks/exhaustive-deps": "warn",
+        "semi": "off"
+      }
     }
   ],
   parserOptions: {
@@ -16,18 +69,19 @@ module.exports = {
     },
   },
   settings: {
+    "import/resolver": {
+      "node": {
+        "extensions": [".js", ".jsx", ".ts", ".tsx"]
+      },
+      "typescript": {
+        "alwaysTryTypes": true // always try to resolve types under `<roo/>@types` directory even it doesn't contain any source code, like `@types/unist`
+      },
+    },
+    "import/ignore": "react-navigation",
     react: {
       "pragma": "React",  // Pragma to use, default to "React"
       "version": "16.9.0", // React version, default to the latest React stable release
     },
   },
-  rules: {
-  	"no-bitwise": "off",
-    "comma-dangle": ["error", "never"],
-    "object-curly-spacing": ["error", "always"],
-    "quotes": ["error", "single",  { "avoidEscape": true }],
-    "no-unused-vars": ["error", { "args": "none" }],
-    "react-native/no-inline-styles": "off",
-    "sort-keys": ["error", "asc", {"caseSensitive": true, "natural": false, "minKeys": 2}]
-  }
+  rules: commonRules
 };

.gitignore

@@ -1,6 +1,12 @@
 yarn-error.log
 package-lock.json
 
+# typescript output directory
+dist/
+
+# jest cache
+.jest/cache
+
 # NDK
 NDK/
 rust/.cargo

.prettierrc

@@ -1,6 +1,6 @@
 {
 	"printWidth": 80,
-	"parser": "flow",
+	"parser": "typescript",
 	"singleQuote": true,
 	"useTabs": true,
 	"tabWidth": 2

.travis.yml

@@ -1,6 +1,6 @@
 ---
 language: node_js
-node_js: 8
+node_js: 10
 
 cache:
   directories:

README.md

@@ -35,7 +35,7 @@ Parity Signer was built to be used offline. The mobile device used to run the ap
 ## Build it
 ### Requirements
 
-- `node.js` (tested on `v8.4.0`)
+- `node.js` ( `>=10`)
 - `yarn` (tested on `1.6.0`)
 - `rustup` (tested on `rustup 1.16.0`)
 - `rustc` (tested on `rustc 1.32.0 (9fda7c223 2019-01-16)`)

android/app/build.gradle

@@ -169,6 +169,7 @@ android {
 }
 
 dependencies {
+    implementation project(':react-native-safe-area-context')
     implementation project(':react-native-camera')
     implementation project(':react-native-secure-storage')
     implementation project(':react-native-gesture-handler')

android/app/src/main/java/io/parity/signer/MainApplication.java

@@ -3,6 +3,7 @@
 import android.app.Application;
 
 import com.facebook.react.ReactApplication;
+import com.th3rdwave.safeareacontext.SafeAreaContextPackage;
 import com.reactlibrary.RNSecureStoragePackage;
 import org.reactnative.camera.RNCameraPackage;
 import com.swmansion.gesturehandler.react.RNGestureHandlerPackage;
@@ -30,6 +31,7 @@ public boolean getUseDeveloperSupport() {
     protected List<ReactPackage> getPackages() {
       return Arrays.<ReactPackage>asList(
           new MainReactPackage(),
+            new SafeAreaContextPackage(),
           new RNSecureStoragePackage(),
           new RNCameraPackage(),
           new SvgPackage(),

android/settings.gradle

@@ -1,4 +1,6 @@
 rootProject.name = 'Parity Signer'
+include ':react-native-safe-area-context'
+project(':react-native-safe-area-context').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-safe-area-context/android')
 include ':react-native-secure-storage'
 project(':react-native-secure-storage').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-secure-storage/android')
 include ':react-native-gesture-handler'

babel.config.js

@@ -16,6 +16,23 @@ module.exports = {
 					vm: 'vm-browserify'
 				}
 			}
+		],
+		[
+			'module-resolver',
+			{
+				alias: {
+					components: './src/components',
+					constants: './src/constants',
+					e2e: './e2e',
+					res: './res',
+					screens: './src/screens',
+					stores: './src/stores',
+					styles: './src/styles',
+					types: './src/types',
+					utils: './src/utils'
+				},
+				root: ['.']
+			}
 		]
 	],
 	presets: ['module:metro-react-native-babel-preset']

e2e/config.json

@@ -1,5 +1,5 @@
 {
-    "setupFilesAfterEnv": ["./init.js"],
+    "setupFilesAfterEnv": ["./init.ts"],
     "testEnvironment": "node",
     "reporters": ["detox/runners/jest/streamlineReporter"],
     "verbose": true

e2e/e2eUtils.js → e2e/e2eUtils.ts

@@ -14,36 +14,43 @@
 // You should have received a copy of the GNU General Public License
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
-'use strict';
+import { expect, element, by } from 'detox';
 
 import testIDs from './testIDs';
 const { IdentityPin } = testIDs;
 
-export const testTap = async buttonId => await element(by.id(buttonId)).tap();
+export const testTap = async (buttonId: string): Promise<Detox.Actions<any>> =>
+	await element(by.id(buttonId)).tap();
 
-export const testVisible = async componentId =>
+export const testVisible = async (componentId: string): Promise<void> =>
 	await expect(element(by.id(componentId))).toBeVisible();
 
-export const testExist = async componentId =>
+export const testExist = async (componentId: string): Promise<void> =>
 	await expect(element(by.id(componentId))).toExist();
 
-export const testNotExist = async componentId =>
+export const testNotExist = async (componentId: string): Promise<void> =>
 	await expect(element(by.id(componentId))).toNotExist();
 
-export const testNotVisible = async componentId =>
+export const testNotVisible = async (componentId: string): Promise<void> =>
 	await expect(element(by.id(componentId))).toBeNotVisible();
 
-export const tapBack = async () =>
+export const tapBack = async (): Promise<Detox.Actions<any>> =>
 	await element(by.id(testIDs.Header.headerBackButton))
 		.atIndex(0)
 		.tap();
 
-export const testInput = async (inputId, inputText) => {
+export const testInput = async (
+	inputId: string,
+	inputText: string
+): Promise<void> => {
 	await element(by.id(inputId)).typeText(inputText);
 	await element(by.id(inputId)).tapReturnKey();
 };
 
-export const testInputWithDone = async (inputId, inputText) => {
+export const testInputWithDone = async (
+	inputId: string,
+	inputText: string
+): Promise<void> => {
 	await element(by.id(inputId)).typeText(inputText);
 	if (device.getPlatform() === 'ios') {
 		await element(by.label('Done'))
@@ -54,14 +61,17 @@ export const testInputWithDone = async (inputId, inputText) => {
 	}
 };
 
-export const testScrollAndTap = async (buttonId, screenId) => {
+export const testScrollAndTap = async (
+	buttonId: string,
+	screenId: string
+): Promise<void> => {
 	await waitFor(element(by.id(buttonId)))
 		.toBeVisible()
 		.whileElement(by.id(screenId))
 		.scroll(100, 'down');
 	await testTap(buttonId);
 };
 
-export const testUnlockPin = async pinCode => {
+export const testUnlockPin = async (pinCode: string): Promise<void> => {
 	await testInputWithDone(IdentityPin.unlockPinInput, pinCode);
 };

e2e/identityManipulation.spec.js → e2e/identityManipulation.spec.ts

@@ -14,7 +14,7 @@
 // You should have received a copy of the GNU General Public License
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
-'use strict';
+import { by, device, element } from 'detox';
 
 import testIDs from './testIDs';
 import {
@@ -54,7 +54,7 @@ const defaultPath = '//default',
 const mockSeedPhrase =
 	'split cradle example drum veteran swear cruel pizza guilt surface mansion film grant benefit educate marble cargo ignore bind include advance grunt exile grow';
 
-const testSetUpDefaultPath = async () => {
+const testSetUpDefaultPath = async (): Promise<void> => {
 	await testInput(IdentityPin.setPin, pinCode);
 	await testInputWithDone(IdentityPin.confirmPin, pinCode);
 	await testVisible(AccountNetworkChooser.chooserScreen);