feat: Add westend network support (#541)

* fix path

* merge master branch

* build: update polkadot dependencies and remove redundant packages

* update kusama metadata to latest

* fix tests

babel.config.js

@@ -4,8 +4,6 @@ module.exports = {
 			'rewrite-require',
 			{
 				aliases: {
-					'@plugnet/util': '@polkadot/util',
-					'@polkadot/wasm-crypto': '@plugnet/wasm-crypto-js',
 					_stream_duplex: 'readable-stream/duplex',
 					_stream_passthrough: 'readable-stream/passthrough',
 					_stream_readable: 'readable-stream/readable',
@@ -33,7 +31,8 @@ module.exports = {
 				},
 				root: ['.']
 			}
-		]
+		],
+		['./scripts/rewrite-node-global']
 	],
 	presets: ['module:metro-react-native-babel-preset']
 };

package.json

@@ -8,18 +8,18 @@
     "yarn": "^1.3.2"
   },
   "scripts": {
-    "android": "yarn run build-rust-android && react-native run-android",
-    "build-prod:ios": "NODE_OPTIONS=--max_old_space_size=8192 react-native bundle --dev false --entry-file index.js --bundle-output ios/main.jsbundle --platform ios --assets-dest='./ios'",
+    "android": "yarn run build-rust-android && npx react-native run-android",
+    "build-prod:ios": "NODE_OPTIONS=--max_old_space_size=8192 npx react-native bundle --dev false --entry-file index.js --bundle-output ios/main.jsbundle --platform ios --assets-dest='./ios'",
     "build-rust-ios": "cd rust/signer && make ios",
     "build-rust-android": "cd rust/signer && make android",
     "clean": "watchman watch-del-all && rm -rf /tmp/metro-bundler-cache-* && rm -rf /tmp/haste-map-react-native-packager-* && rm -rf node_modules/ && yarn cache clean --force && rm -rf ./android/app/build && rm -rf ./ios/build && yarn clean-rust",
     "clean-rust": "cd rust/signer && cargo clean && cd ../..",
     "commit": "commit-wizard",
-    "ios": "yarn run build-rust-ios && react-native run-ios",
+    "ios": "yarn run build-rust-ios && npx react-native run-ios",
     "lint": "npx eslint . --ext .js,.jsx,.ts,.tsx --ignore-path .gitignore",
     "lint:fix": "npx eslint . --ext .js,.jsx,.ts,.tsx --fix --ignore-path .gitignore",
     "postinstall": "npx jetify && chmod +x ./scripts/fix-rn-camera-path.sh && ./scripts/fix-rn-camera-path.sh ./node_modules/react-native-camera/ios/RNCamera.xcodeproj/project.pbxproj",
-    "start": "NODE_OPTIONS=--max_old_space_size=8192 react-native start",
+    "start": "NODE_OPTIONS=--max_old_space_size=8192 npx react-native start",
     "unit": "jest --config ./test/unit/jest.config.js",
     "unit:debug": "node --inspect node_modules/.bin/jest --watch --runInBand",
     "test-rust": "cd ./rust/signer && cargo test && cd ../..",
@@ -36,22 +36,18 @@
     }
   },
   "dependencies": {
-    "@plugnet/util": "^1.1.100",
-    "@plugnet/wasm-crypto-js": "^0.11.102",
-    "@polkadot/api": "1.0.0-beta.7",
-    "@polkadot/reactnative-identicon": "0.48.0-beta.12",
-    "@polkadot/types": "1.0.0-beta.7",
-    "@polkadot/util": "2.0.0-beta.4",
-    "@polkadot/util-crypto": "2.0.0-beta.4",
-    "@polkadot/wasm-crypto": "0.20.0-beta.1",
+    "@polkadot/api": "1.6.0-beta.1",
+    "@polkadot/reactnative-identicon": "0.51.1",
+    "@polkadot/types": "1.6.0-beta.1",
+    "@polkadot/util": "2.6.1",
+    "@polkadot/util-crypto": "2.6.1",
     "@react-native-community/masked-view": "^0.1.6",
     "@react-native-community/netinfo": "^4.1.5",
-    "@tradle/react-native-http": "^2.0.1",
     "bignumber.js": "^9.0.0",
     "hoist-non-react-statics": "^3.3.0",
     "node-libs-react-native": "^1.0.3",
     "react": "^16.9.0",
-    "react-native": "0.60.5",
+    "react-native": "0.61.5",
     "react-native-camera": "^3.4.0",
     "react-native-elements": "^1.2.6",
     "react-native-gesture-handler": "^1.4.1",
@@ -61,7 +57,7 @@
     "react-native-randombytes": "^3.5.3",
     "react-native-screens": "^2.0.0-alpha.32",
     "react-native-secure-storage": "git+https://github.com/paritytech/react-native-secure-storage.git",
-    "react-native-svg": "^9.7.1",
+    "react-native-svg": "^12.0.2",
     "react-native-tabs": "^1.0.9",
     "react-native-vector-icons": "^6.6.0",
     "react-navigation": "^4.2.2",
@@ -89,6 +85,7 @@
     "babel-jest": "^25.1.0",
     "babel-plugin-module-resolver": "^4.0.0",
     "babel-plugin-rewrite-require": "^1.14.5",
+    "babel-plugin-tester": "^8.0.1",
     "detox": "^15.4.2",
     "eslint": "^6.8.0",
     "eslint-config-prettier": "^6.2.0",
@@ -106,7 +103,7 @@
     "react-test-renderer": "16.9.0",
     "reactotron-react-native": "^3.6.5",
     "ts-jest": "^25.2.1",
-    "typescript": "^3.7.5"
+    "typescript": "^3.8.3"
   },
   "resolutions": {
     "@react-native-community/eslint-config/babel-eslint": "10.0.3",

scripts/rewrite-node-global.js

+const pathLib = require('path');
+
+module.exports = function({ types: t }) {
+	return {
+		name: 'rewrite node global __dirname',
+		visitor: {
+			Identifier: function(path, state) {
+				if (path.node.name === '__dirname') {
+					const fallbackPath = `${state.cwd}/node_modules/@polkadot`;
+					const fileName = state.file.opts.filename;
+					path.replaceWith(
+						t.stringLiteral(
+							fileName !== undefined ? pathLib.dirname(fileName) : fallbackPath
+						)
+					);
+				}
+			}
+		}
+	};
+};

src/components/PayloadDetailsCard.tsx

@@ -19,7 +19,7 @@ import {
 	Metadata,
 	GenericExtrinsicPayload
 } from '@polkadot/types';
-import Call from '@polkadot/types/primitive/Generic/Call';
+import Call from '@polkadot/types/generic/Call';
 import { formatBalance } from '@polkadot/util';
 import { decodeAddress, encodeAddress } from '@polkadot/util-crypto';
 import React, { useEffect, useState } from 'react';
@@ -28,12 +28,8 @@ import { AnyU8a, IExtrinsicEra, IMethod } from '@polkadot/types/types';
 import { ExtrinsicEra } from '@polkadot/types/interfaces';
 
 import colors from 'styles/colors';
-import {
-	SUBSTRATE_NETWORK_LIST,
-	SubstrateNetworkKeys
-} from 'constants/networkSpecs';
-import kusamaMetadata from 'constants/static-kusama';
-import substrateDevMetadata from 'constants/static-substrate';
+import { SUBSTRATE_NETWORK_LIST } from 'constants/networkSpecs';
+import { getMetadata } from 'utils/identitiesUtils';
 import { shortString } from 'utils/strings';
 import fontStyles from 'styles/fontStyles';
 import { alertDecodeError } from 'utils/alertUtils';
@@ -43,9 +39,9 @@ const registry = new TypeRegistry();
 interface Props {
 	description?: string;
 	payload?: GenericExtrinsicPayload;
-	prefix: number;
 	signature?: string;
 	style?: ViewStyle;
+	networkKey: string;
 }
 
 export default class PayloadDetailsCard extends React.PureComponent<
@@ -56,32 +52,15 @@ export default class PayloadDetailsCard extends React.PureComponent<
 > {
 	constructor(props: Props) {
 		super(props);
-		// KUSAMA and KUSAMA_DEV have the same metadata and Defaults values
-		const isKusama =
-			this.props.prefix ===
-				SUBSTRATE_NETWORK_LIST[SubstrateNetworkKeys.KUSAMA].prefix ||
-			SUBSTRATE_NETWORK_LIST[SubstrateNetworkKeys.KUSAMA_DEV].prefix;
-		const isSubstrateDev =
-			this.props.prefix ===
-			SUBSTRATE_NETWORK_LIST[SubstrateNetworkKeys.SUBSTRATE_DEV].prefix;
-
-		let metadata;
-		if (isKusama) {
-			metadata = new Metadata(registry, kusamaMetadata);
-			registry.setMetadata(metadata);
-			formatBalance.setDefaults({
-				decimals: SUBSTRATE_NETWORK_LIST[SubstrateNetworkKeys.KUSAMA].decimals,
-				unit: SUBSTRATE_NETWORK_LIST[SubstrateNetworkKeys.KUSAMA].unit
-			});
-		} else if (__DEV__ && isSubstrateDev) {
-			metadata = new Metadata(registry, substrateDevMetadata);
+		const { networkKey } = this.props;
+		const networkMetadataRaw = getMetadata(networkKey);
+		const metadata = new Metadata(registry, networkMetadataRaw);
 		registry.setMetadata(metadata);
 		formatBalance.setDefaults({
-				decimals:
-					SUBSTRATE_NETWORK_LIST[SubstrateNetworkKeys.SUBSTRATE_DEV].decimals,
-				unit: SUBSTRATE_NETWORK_LIST[SubstrateNetworkKeys.SUBSTRATE_DEV].unit
+			decimals: SUBSTRATE_NETWORK_LIST[networkKey].decimals,
+			unit: SUBSTRATE_NETWORK_LIST[networkKey].unit
 		});
-		}
+
 		this.state = {
 			fallback: !metadata
 		};
@@ -89,7 +68,8 @@ export default class PayloadDetailsCard extends React.PureComponent<
 
 	render(): React.ReactElement {
 		const { fallback } = this.state;
-		const { description, payload, prefix, signature, style } = this.props;
+		const { description, payload, networkKey, signature, style } = this.props;
+		const prefix = SUBSTRATE_NETWORK_LIST[networkKey].prefix;
 
 		return (
 			<View style={[styles.body, style]}>
@@ -153,10 +133,10 @@ function ExtrinsicPart({
 	value: AnyU8a | IMethod | IExtrinsicEra;
 	fallback?: string;
 }): React.ReactElement {
-	const [period, setPeriod] = useState();
-	const [phase, setPhase] = useState();
-	const [formattedCallArgs, setFormattedCallArgs] = useState();
-	const [tip, setTip] = useState();
+	const [period, setPeriod] = useState<string>();
+	const [phase, setPhase] = useState<string>();
+	const [formattedCallArgs, setFormattedCallArgs] = useState<any>();
+	const [tip, setTip] = useState<string>();
 	const [useFallback, setUseFallBack] = useState(false);
 
 	useEffect(() => {

src/constants/networkSpecs.ts

@@ -63,7 +63,8 @@ export const SubstrateNetworkKeys: {
 	KUSAMA_DEV:
 		'0x5e9679182f658e148f33d3f760f11179977398bb3da8d1f0bf7b267fe6b3ebb0',
 	SUBSTRATE_DEV:
-		'0x0d667fd278ec412cd9fccdb066f09ed5b4cfd9c9afa9eb747213acb02b1e70bc' // substrate --dev commit ac6a2a783f0e1f4a814cf2add40275730cd41be1 hosted on wss://dev-node.substrate.dev .
+		'0x0d667fd278ec412cd9fccdb066f09ed5b4cfd9c9afa9eb747213acb02b1e70bc', // substrate --dev commit ac6a2a783f0e1f4a814cf2add40275730cd41be1 hosted on wss://dev-node.substrate.dev .
+	WESTEND: '0x4a31f96525a77959d97e267c8fc3066ca333d9ade161720e1b7de8d35ccc6bd2'
 });
 
 const unknownNetworkBase: { [key: string]: UnknownNetworkParams } = {
@@ -117,6 +118,16 @@ const substrateNetworkBase: {
 		prefix: 42,
 		title: 'Substrate Development',
 		unit: 'UNIT'
+	},
+	[SubstrateNetworkKeys.WESTEND]: {
+		color: '#ffcf3d',
+		decimals: 12,
+		genesisHash: SubstrateNetworkKeys.WESTEND,
+		logo: require('res/img/logos/westend.png'),
+		pathId: 'westend',
+		prefix: 42,
+		title: 'Westend',
+		unit: 'WND'
 	}
 	// [SubstrateNetworkKeys.POLKADOT]: {
 	//   color: '#e6007a',

src/screens/MessageDetails.tsx

@@ -23,11 +23,7 @@ import { Subscribe } from 'unstated';
 import testIDs from 'e2e/testIDs';
 import { NETWORK_LIST } from 'constants/networkSpecs';
 import { FoundAccount } from 'types/identityTypes';
-import {
-	isEthereumNetworkParams,
-	SubstrateNetworkParams,
-	UnknownNetworkParams
-} from 'types/networkSpecsTypes';
+import { isEthereumNetworkParams } from 'types/networkSpecsTypes';
 import { NavigationProps } from 'types/props';
 import colors from 'styles/colors';
 import Background from 'components/Background';
@@ -143,9 +139,6 @@ export class MessageDetailsView extends React.PureComponent<Props> {
 
 		const networkParams = NETWORK_LIST[sender.networkKey];
 		const isEthereum = isEthereumNetworkParams(networkParams);
-		const prefix = (networkParams as
-			| SubstrateNetworkParams
-			| UnknownNetworkParams)?.prefix;
 
 		return (
 			<ScrollView
@@ -157,11 +150,11 @@ export class MessageDetailsView extends React.PureComponent<Props> {
 				<Text style={styles.topTitle}>Sign Message</Text>
 				<Text style={styles.title}>From Account</Text>
 				<CompatibleCard account={sender} accountsStore={accountsStore} />
-				{!isEthereum && prehash && prefix ? (
+				{!isEthereum && prehash ? (
 					<PayloadDetailsCard
 						description="You are about to confirm sending the following extrinsic. We will sign the hash of the payload as it is oversized."
 						payload={prehash}
-						prefix={prefix}
+						networkKey={sender.networkKey}
 					/>
 				) : null}
 				<MessageDetailsCard

src/screens/PathDerivation.tsx

@@ -25,6 +25,7 @@ import { withAccountStore } from 'utils/HOC';
 import TextInput from 'components/TextInput';
 import ButtonMainAction from 'components/ButtonMainAction';
 import {
+	getNetworkKey,
 	getNetworkKeyByPath,
 	validateDerivedPath
 } from 'utils/identitiesUtils';
@@ -45,9 +46,17 @@ function PathDerivation({
 	const [keyPairsName, setKeyPairsName] = useState('');
 	const [isPathValid, setIsPathValid] = useState(true);
 	const [modalVisible, setModalVisible] = useState(false);
-	const [customNetworkKey, setCustomNetworkKey] = useState(defaultNetworkKey);
 	const pathNameInput = useRef<TextInput>(null);
 	const parentPath = navigation.getParam('parentPath');
+	const [customNetworkKey, setCustomNetworkKey] = useState(() => {
+		const parentNetworkKey = getNetworkKey(
+			parentPath,
+			accounts.state.currentIdentity!
+		);
+		return parentNetworkKey === UnknownNetworkKeys.UNKNOWN
+			? defaultNetworkKey
+			: parentNetworkKey;
+	});
 	const completePath = `${parentPath}${derivationPath}`;
 	const pathIndicatedNetworkKey = useMemo(
 		(): string => getNetworkKeyByPath(completePath),

src/screens/SignedTx.tsx

@@ -68,8 +68,8 @@ function SignedTx({
 				<PayloadDetailsCard
 					style={{ marginBottom: 20 }}
 					description={TX_DETAILS_MSG}
-					prefix={networkParams.prefix}
 					signature={data}
+					networkKey={sender!.networkKey}
 				/>
 			);
 		}

src/screens/TxDetails.tsx

@@ -22,10 +22,7 @@ import { GenericExtrinsicPayload } from '@polkadot/types';
 import { NETWORK_LIST } from 'constants/networkSpecs';
 import testIDs from 'e2e/testIDs';
 import { FoundAccount } from 'types/identityTypes';
-import {
-	isEthereumNetworkParams,
-	SubstrateNetworkParams
-} from 'types/networkSpecsTypes';
+import { isEthereumNetworkParams } from 'types/networkSpecsTypes';
 import { NavigationAccountScannerProps, NavigationProps } from 'types/props';
 import colors from 'styles/colors';
 import Background from 'components/Background';
@@ -133,8 +130,6 @@ export class TxDetailsView extends React.PureComponent<ViewProps> {
 
 		const senderNetworkParams = NETWORK_LIST[sender.networkKey];
 		const isEthereum = isEthereumNetworkParams(senderNetworkParams);
-		const prefix = (NETWORK_LIST[sender.networkKey] as SubstrateNetworkParams)
-			?.prefix;
 
 		return (
 			<View style={styles.body}>
@@ -174,7 +169,7 @@ export class TxDetailsView extends React.PureComponent<ViewProps> {
 							<PayloadDetailsCard
 								style={{ marginBottom: 20 }}
 								payload={prehash}
-								prefix={prefix}
+								networkKey={sender.networkKey}
 							/>
 						)}
 					</View>

src/stores/ScannerStore.ts

@@ -25,8 +25,7 @@ import { decodeAddress, encodeAddress } from '@polkadot/util-crypto';
 import { Container } from 'unstated';
 import { ExtrinsicPayload } from '@polkadot/types/interfaces';
 
-import AccountsStore from './AccountsStore';
-
+import AccountsStore from 'stores/AccountsStore';
 import {
 	NETWORK_LIST,
 	NetworkProtocols,

src/utils/identitiesUtils.ts

@@ -22,6 +22,7 @@ import { generateAccountId } from './account';
 import {
 	NETWORK_LIST,
 	SUBSTRATE_NETWORK_LIST,
+	SubstrateNetworkKeys,
 	UnknownNetworkKeys
 } from 'constants/networkSpecs';
 import {
@@ -34,6 +35,12 @@ import {
 	SerializedIdentity,
 	UnlockedAccount
 } from 'types/identityTypes';
+import {
+	defaultMetaData,
+	kusamaMetadata,
+	substrateDevMetadata,
+	westendMetadata
+} from 'constants/networkMetadata';
 
 //walk around to fix the regular expression support for positive look behind;
 export const removeSlash = (str: string): string => str.replace(/\//g, '');
@@ -333,3 +340,18 @@ export const groupPaths = (paths: string[]): PathGroup[] => {
 		return a.paths.length - b.paths.length;
 	});
 };
+
+export const getMetadata = (networkKey: string): string => {
+	switch (networkKey) {
+		case SubstrateNetworkKeys.KUSAMA:
+		case SubstrateNetworkKeys.KUSAMA_CC2:
+		case SubstrateNetworkKeys.KUSAMA_DEV:
+			return kusamaMetadata;
+		case SubstrateNetworkKeys.WESTEND:
+			return westendMetadata;
+		case SubstrateNetworkKeys.SUBSTRATE_DEV:
+			return substrateDevMetadata;
+		default:
+			return defaultMetaData;
+	}
+};

test/unit/specs/babel-plugin-test.spec.js

+const path = require('path');
+
+const pluginTester = require('babel-plugin-tester').default;
+
+const identifierReversePlugin = require('../../../scripts/rewrite-node-global');
+
+const dirName = path.join(process.cwd(), 'node_modules/@polkadot');
+pluginTester({
+	formatResult: r => r,
+	plugin: identifierReversePlugin,
+	tests: {
+		'changes this code': {
+			code: 'var hello = __dirname',
+			output: `var hello = "${dirName}";`
+		}
+	}
+});

test/unit/specs/mocks.ts

+export default '';

test/unit/specs/util/decoders.spec.ts

@@ -21,7 +21,7 @@ import {
 	TypeRegistry
 } from '@polkadot/types';
 import { ExtrinsicPayload } from '@polkadot/types/interfaces';
-import Call from '@polkadot/types/primitive/Generic/Call';
+import Call from '@polkadot/types/generic/Call';
 import { u8aConcat } from '@polkadot/util';
 import { checkAddress, decodeAddress } from '@polkadot/util-crypto';
 import 'jest';
@@ -40,14 +40,14 @@ import {
 	isJsonString
 } from 'utils/decoders';
 import { isAscii } from 'utils/strings';
-import kusamaData from 'constants/static-kusama';
+import { kusamaMetadata } from 'constants/networkMetadata';
 
 const SUBSTRATE_ID = new Uint8Array([0x53]);
 const CRYPTO_SR25519 = new Uint8Array([0x01]);
 const CMD_SIGN_MORTAL = new Uint8Array([0]);
 const CMD_SIGN_MSG = new Uint8Array([3]);
 const registry = new TypeRegistry();
-registry.setMetadata(new Metadata(registry, kusamaData));
+registry.setMetadata(new Metadata(registry, kusamaMetadata));
 
 const KUSAMA_ADDRESS = 'FF42iLDmp7JLeySMjwWWtYQqfycJvsJFBYrySoMvtGfvAGs';
 const TEST_MESSAGE = 'THIS IS SPARTA!';

test/unit/specs/util/units.spec.ts

@@ -15,13 +15,13 @@
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
 import { Metadata, TypeRegistry } from '@polkadot/types';
-import Call from '@polkadot/types/primitive/Generic/Call';
+import Call from '@polkadot/types/generic/Call';
 import { formatBalance } from '@polkadot/util';
 
-import kusamaData from 'constants/static-kusama';
+import { kusamaMetadata } from 'constants/networkMetadata';
 import { fromWei } from 'utils/units';
 const registry = new TypeRegistry();
-registry.setMetadata(new Metadata(registry, kusamaData));
+registry.setMetadata(new Metadata(registry, kusamaMetadata));
 
 describe('units', () => {
 	describe('ethereum', () => {
@@ -55,7 +55,7 @@ describe('units', () => {
 					args[i].toRawType() === 'Balance' ||
 					args[i].toRawType() === 'Compact<Balance>'
 				) {
-					value = formatBalance(args[i].toString(), true, 12);
+					value = formatBalance(args[i].toString(), undefined, 12);
 				} else {
 					value = args[i].toString();
 				}