import * as _ from 'lodash'; import * as React from 'react'; import BigNumber from 'bignumber.js'; import {colors} from 'material-ui/styles'; import Dialog from 'material-ui/Dialog'; import FlatButton from 'material-ui/FlatButton'; import TextField from 'material-ui/TextField'; import { Table, TableBody, TableHeader, TableRow, TableHeaderColumn, TableRowColumn, } from 'material-ui/Table'; import ReactTooltip = require('react-tooltip'); import {utils} from 'ts/utils/utils'; import {constants} from 'ts/utils/constants'; import {Blockchain} from 'ts/blockchain'; import {Dispatcher} from 'ts/redux/dispatcher'; import {LifeCycleRaisedButton} from 'ts/components/ui/lifecycle_raised_button'; const VALID_ETHEREUM_DERIVATION_PATH_PREFIX = `44'/60'`; enum LedgerSteps { CONNECT, SELECT_ADDRESS, } interface LedgerConfigDialogProps { isOpen: boolean; toggleDialogFn: (isOpen: boolean) => void; dispatcher: Dispatcher; blockchain: Blockchain; networkId: number; } interface LedgerConfigDialogState { didConnectFail: boolean; stepIndex: LedgerSteps; userAddresses: string[]; addressBalances: BigNumber[]; derivationPath: string; derivationErrMsg: string; } export class LedgerConfigDialog extends React.Component { constructor(props: LedgerConfigDialogProps) { super(props); this.state = { didConnectFail: false, stepIndex: LedgerSteps.CONNECT, userAddresses: [], addressBalances: [], derivationPath: constants.DEFAULT_DERIVATION_PATH, derivationErrMsg: '', }; } public render() { const dialogActions = [ , ]; const dialogTitle = this.state.stepIndex === LedgerSteps.CONNECT ? 'Connect to your Ledger' : 'Select desired address'; return (
{this.state.stepIndex === LedgerSteps.CONNECT && this.renderConnectStep() } {this.state.stepIndex === LedgerSteps.SELECT_ADDRESS && this.renderSelectAddressStep() }
); } private renderConnectStep() { return (
Follow these instructions before proceeding:
  1. Connect your Ledger Nano S & Open the Ethereum application
  2. Verify that Browser Support is enabled in Settings
  3. If no Browser Support is found in settings, verify that you have{' '} Firmware >1.2
{this.state.didConnectFail &&
Failed to connect. Follow the instructions and try again.
}
); } private renderSelectAddressStep() { return (
Address Balance {this.renderAddressTableRows()}
); } private renderAddressTableRows() { const rows = _.map(this.state.userAddresses, (userAddress: string, i: number) => { const balance = this.state.addressBalances[i]; const addressTooltipId = `address-${userAddress}`; const balanceTooltipId = `balance-${userAddress}`; const networkName = constants.networkNameById[this.props.networkId]; // We specifically prefix kovan ETH. // TODO: We should probably add prefixes for all networks const isKovanNetwork = networkName === 'Kovan'; const balanceString = `${balance.toString()} ${isKovanNetwork ? 'Kovan ' : ''}ETH`; return (
{userAddress}
{userAddress}
{balanceString}
{balanceString}
); }); return rows; } private onClose() { this.setState({ didConnectFail: false, }); const isOpen = false; this.props.toggleDialogFn(isOpen); } private onAddressSelected(selectedRowIndexes: number[]) { const selectedRowIndex = selectedRowIndexes[0]; this.props.blockchain.updateLedgerDerivationIndex(selectedRowIndex); const selectedAddress = this.state.userAddresses[selectedRowIndex]; const selectAddressBalance = this.state.addressBalances[selectedRowIndex]; this.props.dispatcher.updateUserAddress(selectedAddress); this.props.blockchain.updateWeb3WrapperPrevUserAddress(selectedAddress); this.props.dispatcher.updateUserEtherBalance(selectAddressBalance); this.setState({ stepIndex: LedgerSteps.CONNECT, }); const isOpen = false; this.props.toggleDialogFn(isOpen); } private async onFetchAddressesForDerivationPathAsync() { const currentlySetPath = this.props.blockchain.getLedgerDerivationPathIfExists(); if (currentlySetPath === this.state.derivationPath) { return; } this.props.blockchain.updateLedgerDerivationPathIfExists(this.state.derivationPath); const didSucceed = await this.fetchAddressesAndBalancesAsync(); if (!didSucceed) { this.setState({ derivationErrMsg: 'Failed to connect to Ledger.', }); } return didSucceed; } private async fetchAddressesAndBalancesAsync() { let userAddresses: string[]; const addressBalances: BigNumber[] = []; try { userAddresses = await this.getUserAddressesAsync(); for (const address of userAddresses) { const balance = await this.props.blockchain.getBalanceInEthAsync(address); addressBalances.push(balance); } } catch (err) { utils.consoleLog(`Ledger error: ${JSON.stringify(err)}`); this.setState({ didConnectFail: true, }); return false; } this.setState({ userAddresses, addressBalances, }); return true; } private onDerivationPathChanged(e: any, derivationPath: string) { let derivationErrMsg = ''; if (!_.startsWith(derivationPath, VALID_ETHEREUM_DERIVATION_PATH_PREFIX)) { derivationErrMsg = 'Must be valid Ethereum path.'; } this.setState({ derivationPath, derivationErrMsg, }); } private async onConnectLedgerClickAsync() { const didSucceed = await this.fetchAddressesAndBalancesAsync(); if (didSucceed) { this.setState({ stepIndex: LedgerSteps.SELECT_ADDRESS, }); } return didSucceed; } private async getUserAddressesAsync(): Promise { let userAddresses: string[]; userAddresses = await this.props.blockchain.getUserAccountsAsync(); if (_.isEmpty(userAddresses)) { throw new Error('No addresses retrieved.'); } return userAddresses; } }