Wallet Decrypt - Web3 (MetaMask / Mist) (#303)

* add support for web3, disabled, and hidden in node dropdown header

* add web3 node config actions

* add web3 wallet actions

* add web3 node support

* add web3 wallet & web3 wallet ui selection

* add web3 wallet & config sagas

* add web3 transaction support to SendTransaction tab

* add web3 node check & reset to redux store

* remove comments from Web3.tsx

* update comment

* correct spacing display issue in Web3 component

* convert getTransactionCount response to string

* disable web3 wallets in offline mode

* implement sendCallRequest method on Web3 node

* remove unused vars

* make typescript happy

* convert wallet constants to enum & apply to wallet action files

* update wallet reducer to use TypeKeys enum

* remove unnecessary console log

* remove unnecessary await

* make token balance math more readable

* use NewTabLink in Web3.tsx, allow NewTabLink to accept className

* move web3.ts to non-deterministic folder

* update imports & method names, implement message signing

* add web3 wallet export

* use bufferToHex

common/actions/config/actionCreators.ts

@@ -55,3 +55,10 @@ export function changeNodeIntent(
     payload
   };
 }
+
+export type TWeb3UnsetNode = typeof web3UnsetNode;
+export function web3UnsetNode(): interfaces.Web3UnsetNodeAction {
+  return {
+    type: TypeKeys.CONFIG_NODE_WEB3_UNSET
+  };
+}

common/actions/config/actionTypes.ts

@@ -40,6 +40,11 @@ export interface ChangeNodeIntentAction {
   payload: string;
 }
 
+/*** Unset Web3 as a Node ***/
+export interface Web3UnsetNodeAction {
+  type: TypeKeys.CONFIG_NODE_WEB3_UNSET;
+}
+
 /*** Union Type ***/
 export type ConfigAction =
   | ChangeNodeAction
@@ -48,4 +53,5 @@ export type ConfigAction =
   | ToggleOfflineAction
   | PollOfflineStatus
   | ForceOfflineAction
-  | ChangeNodeIntentAction;
+  | ChangeNodeIntentAction
+  | Web3UnsetNodeAction;

common/actions/config/constants.ts

@@ -5,5 +5,6 @@ export enum TypeKeys {
   CONFIG_GAS_PRICE = 'CONFIG_GAS_PRICE',
   CONFIG_TOGGLE_OFFLINE = 'CONFIG_TOGGLE_OFFLINE',
   CONFIG_FORCE_OFFLINE = 'CONFIG_FORCE_OFFLINE',
-  CONFIG_POLL_OFFLINE_STATUS = 'CONFIG_POLL_OFFLINE_STATUS'
+  CONFIG_POLL_OFFLINE_STATUS = 'CONFIG_POLL_OFFLINE_STATUS',
+  CONFIG_NODE_WEB3_UNSET = 'CONFIG_NODE_WEB3_UNSET',
 }

common/actions/wallet/actionCreators.ts

@@ -2,14 +2,13 @@ import { BigNumber } from 'bignumber.js';
 import { Wei } from 'libs/units';
 import { IWallet } from 'libs/wallet/IWallet';
 import * as types from './actionTypes';
-import * as constants from './constants';
-
+import { TypeKeys } from './constants';
 export type TUnlockPrivateKey = typeof unlockPrivateKey;
 export function unlockPrivateKey(
   value: types.PrivateKeyUnlockParams
 ): types.UnlockPrivateKeyAction {
   return {
-    type: constants.WALLET_UNLOCK_PRIVATE_KEY,
+    type: TypeKeys.WALLET_UNLOCK_PRIVATE_KEY,
     payload: value
   };
 }
@@ -19,7 +18,7 @@ export function unlockKeystore(
   value: types.KeystoreUnlockParams
 ): types.UnlockKeystoreAction {
   return {
-    type: constants.WALLET_UNLOCK_KEYSTORE,
+    type: TypeKeys.WALLET_UNLOCK_KEYSTORE,
     payload: value
   };
 }
@@ -29,23 +28,30 @@ export function unlockMnemonic(
   value: types.MnemonicUnlockParams
 ): types.UnlockMnemonicAction {
   return {
-    type: constants.WALLET_UNLOCK_MNEMONIC,
+    type: TypeKeys.WALLET_UNLOCK_MNEMONIC,
     payload: value
   };
 }
 
+export type TUnlockWeb3 = typeof unlockWeb3;
+export function unlockWeb3(): types.UnlockWeb3Action {
+  return {
+    type: TypeKeys.WALLET_UNLOCK_WEB3
+  };
+}
+
 export type TSetWallet = typeof setWallet;
 export function setWallet(value: IWallet): types.SetWalletAction {
   return {
-    type: constants.WALLET_SET,
+    type: TypeKeys.WALLET_SET,
     payload: value
   };
 }
 
 export type TSetBalance = typeof setBalance;
 export function setBalance(value: Wei): types.SetBalanceAction {
   return {
-    type: constants.WALLET_SET_BALANCE,
+    type: TypeKeys.WALLET_SET_BALANCE,
     payload: value
   };
 }
@@ -55,7 +61,7 @@ export function setTokenBalances(payload: {
   [key: string]: BigNumber;
 }): types.SetTokenBalancesAction {
   return {
-    type: constants.WALLET_SET_TOKEN_BALANCES,
+    type: TypeKeys.WALLET_SET_TOKEN_BALANCES,
     payload
   };
 }
@@ -65,7 +71,7 @@ export function broadcastTx(
   signedTx: string
 ): types.BroadcastTxRequestedAction {
   return {
-    type: constants.WALLET_BROADCAST_TX_REQUESTED,
+    type: TypeKeys.WALLET_BROADCAST_TX_REQUESTED,
     payload: {
       signedTx
     }
@@ -78,7 +84,7 @@ export function broadcastTxSucceded(
   signedTx: string
 ): types.BroadcastTxSuccededAction {
   return {
-    type: constants.WALLET_BROADCAST_TX_SUCCEEDED,
+    type: TypeKeys.WALLET_BROADCAST_TX_SUCCEEDED,
     payload: {
       txHash,
       signedTx
@@ -92,7 +98,7 @@ export function broadCastTxFailed(
   errorMsg: string
 ): types.BroadcastTxFailedAction {
   return {
-    type: constants.WALLET_BROADCAST_TX_FAILED,
+    type: TypeKeys.WALLET_BROADCAST_TX_FAILED,
     payload: {
       signedTx,
       error: errorMsg
@@ -103,6 +109,6 @@ export function broadCastTxFailed(
 export type TResetWallet = typeof resetWallet;
 export function resetWallet() {
   return {
-    type: constants.WALLET_RESET
+    type: TypeKeys.WALLET_RESET
   };
 }

common/actions/wallet/actionTypes.ts

@@ -1,6 +1,7 @@
 import { BigNumber } from 'bignumber.js';
 import { Wei } from 'libs/units';
 import { IWallet } from 'libs/wallet/IWallet';
+import { TypeKeys } from './constants';
 
 /*** Unlock Private Key ***/
 export interface PrivateKeyUnlockParams {
@@ -9,42 +10,46 @@ export interface PrivateKeyUnlockParams {
 }
 
 export interface UnlockPrivateKeyAction {
-  type: 'WALLET_UNLOCK_PRIVATE_KEY';
+  type: TypeKeys.WALLET_UNLOCK_PRIVATE_KEY;
   payload: PrivateKeyUnlockParams;
 }
 export interface UnlockMnemonicAction {
-  type: 'WALLET_UNLOCK_MNEMONIC';
+  type: TypeKeys.WALLET_UNLOCK_MNEMONIC;
   payload: MnemonicUnlockParams;
 }
 
+export interface UnlockWeb3Action {
+  type: TypeKeys.WALLET_UNLOCK_WEB3;
+}
+
 /*** Set Wallet ***/
 export interface SetWalletAction {
-  type: 'WALLET_SET';
+  type: TypeKeys.WALLET_SET;
   payload: IWallet;
 }
 
 /*** Reset Wallet ***/
 export interface ResetWalletAction {
-  type: 'WALLET_RESET';
+  type: TypeKeys.WALLET_RESET;
 }
 
 /*** Set Balance ***/
 export interface SetBalanceAction {
-  type: 'WALLET_SET_BALANCE';
+  type: TypeKeys.WALLET_SET_BALANCE;
   payload: Wei;
 }
 
 /*** Set Token Balance ***/
 export interface SetTokenBalancesAction {
-  type: 'WALLET_SET_TOKEN_BALANCES';
+  type: TypeKeys.WALLET_SET_TOKEN_BALANCES;
   payload: {
     [key: string]: BigNumber;
   };
 }
 
 /*** Broadcast Tx ***/
 export interface BroadcastTxRequestedAction {
-  type: 'WALLET_BROADCAST_TX_REQUESTED';
+  type: TypeKeys.WALLET_BROADCAST_TX_REQUESTED;
   payload: {
     signedTx: string;
   };
@@ -65,20 +70,20 @@ export interface KeystoreUnlockParams {
 }
 
 export interface UnlockKeystoreAction {
-  type: 'WALLET_UNLOCK_KEYSTORE';
+  type: TypeKeys.WALLET_UNLOCK_KEYSTORE;
   payload: KeystoreUnlockParams;
 }
 
 export interface BroadcastTxSuccededAction {
-  type: 'WALLET_BROADCAST_TX_SUCCEEDED';
+  type: TypeKeys.WALLET_BROADCAST_TX_SUCCEEDED;
   payload: {
     txHash: string;
     signedTx: string;
   };
 }
 
 export interface BroadcastTxFailedAction {
-  type: 'WALLET_BROADCAST_TX_FAILED';
+  type: TypeKeys.WALLET_BROADCAST_TX_FAILED;
   payload: {
     signedTx: string;
     error: string;

common/actions/wallet/constants.ts

@@ -1,10 +1,13 @@
-export const WALLET_UNLOCK_PRIVATE_KEY = 'WALLET_UNLOCK_PRIVATE_KEY';
-export const WALLET_UNLOCK_KEYSTORE = 'WALLET_UNLOCK_KEYSTORE';
-export const WALLET_UNLOCK_MNEMONIC = 'WALLET_UNLOCK_MNEMONIC';
-export const WALLET_SET = 'WALLET_SET';
-export const WALLET_SET_BALANCE = 'WALLET_SET_BALANCE';
-export const WALLET_SET_TOKEN_BALANCES = 'WALLET_SET_TOKEN_BALANCES';
-export const WALLET_BROADCAST_TX_REQUESTED = 'WALLET_BROADCAST_TX_REQUESTED';
-export const WALLET_BROADCAST_TX_FAILED = 'WALLET_BROADCAST_TX_FAILED';
-export const WALLET_BROADCAST_TX_SUCCEEDED = 'WALLET_BROADCAST_TX_SUCCEEDED';
-export const WALLET_RESET = 'WALLET_RESET';
+export enum TypeKeys {
+  WALLET_UNLOCK_PRIVATE_KEY = 'WALLET_UNLOCK_PRIVATE_KEY',
+  WALLET_UNLOCK_KEYSTORE = 'WALLET_UNLOCK_KEYSTORE',
+  WALLET_UNLOCK_MNEMONIC = 'WALLET_UNLOCK_MNEMONIC',
+  WALLET_UNLOCK_WEB3 = 'WALLET_UNLOCK_WEB3',
+  WALLET_SET = 'WALLET_SET',
+  WALLET_SET_BALANCE = 'WALLET_SET_BALANCE',
+  WALLET_SET_TOKEN_BALANCES = 'WALLET_SET_TOKEN_BALANCES',
+  WALLET_BROADCAST_TX_REQUESTED = 'WALLET_BROADCAST_TX_REQUESTED',
+  WALLET_BROADCAST_TX_FAILED = 'WALLET_BROADCAST_TX_FAILED',
+  WALLET_BROADCAST_TX_SUCCEEDED = 'WALLET_BROADCAST_TX_SUCCEEDED',
+  WALLET_RESET = 'WALLET_RESET'
+}

common/components/Header/index.tsx

@@ -47,7 +47,8 @@ export default class Header extends Component<Props, {}> {
             {NODES[key].network} <small>({NODES[key].service})</small>
           </span>
         ),
-        color: NETWORKS[NODES[key].network].color
+        color: NETWORKS[NODES[key].network].color,
+        hidden: NODES[key].hidden
       };
     });
 
@@ -118,6 +119,7 @@ export default class Header extends Component<Props, {}> {
                       <a>Add Custom Node</a>
                     </li>
                   }
+                  disabled={nodeSelection === 'web3'}
                   onChange={changeNodeIntent}
                   size="smr"
                   color="white"

common/components/WalletDecrypt/Web3.scss

@@ -0,0 +1,26 @@
+.Web3Decrypt {
+  text-align: center;
+  padding-top: 30px;
+
+  &-decrypt {
+    width: 100%;
+  }
+
+  &-help {
+    margin-top: 10px;
+    font-size: 13px;
+  }
+
+  &-error {
+    opacity: 0;
+    transition: none;
+
+    &.is-showing {
+      opacity: 1;
+    }
+  }
+
+  &-install {
+    margin-top: 10px;
+  }
+}

common/components/WalletDecrypt/Web3.tsx

@@ -0,0 +1,33 @@
+import React, { Component } from 'react';
+import translate from 'translations';
+import { NewTabLink } from 'components/ui';
+import './Web3.scss';
+
+interface Props {
+  onUnlock(): void;
+}
+
+export default class Web3Decrypt extends Component<Props> {
+  public render() {
+    return (
+      <section className="Web3Decrypt col-md-4 col-sm-6">
+        <div>
+          <button
+            className="Web3Decrypt btn btn-primary btn-lg"
+            onClick={this.props.onUnlock}
+          >
+            {translate('ADD_MetaMask')}
+          </button>
+        </div>
+
+        <div>
+          <NewTabLink
+            className="Web3Decrypt-install btn btn-sm btn-default"
+            content={translate('Download MetaMask')}
+            href="https://chrome.google.com/webstore/detail/metamask/nkbihfbeogaeaoehlefnkodbefgpgknn?hl=en"
+          />
+        </div>
+      </section>
+    );
+  }
+}

common/components/WalletDecrypt/index.tsx

@@ -5,7 +5,8 @@ import {
   unlockMnemonic,
   UnlockMnemonicAction,
   unlockPrivateKey,
-  UnlockPrivateKeyAction
+  UnlockPrivateKeyAction,
+  unlockWeb3
 } from 'actions/wallet';
 import isEmpty from 'lodash/isEmpty';
 import map from 'lodash/map';
@@ -20,6 +21,7 @@ import PrivateKeyDecrypt, { PrivateKeyValue } from './PrivateKey';
 import TrezorDecrypt from './Trezor';
 import ViewOnlyDecrypt from './ViewOnly';
 import { AppState } from 'reducers';
+import Web3Decrypt from './Web3';
 
 const WALLETS = {
   'keystore-file': {
@@ -63,6 +65,13 @@ const WALLETS = {
     unlock: setWallet,
     disabled: false
   },
+  web3: {
+    lid: 'x_MetaMask',
+    component: Web3Decrypt,
+    initialParams: {},
+    unlock: unlockWeb3,
+    disabled: false
+  },
   'view-only': {
     lid: 'View with Address Only',
     component: ViewOnlyDecrypt,