You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
294 lines
8.8 KiB
294 lines
8.8 KiB
7 years ago
|
const { Component } = require('react')
|
||
|
const PropTypes = require('prop-types')
|
||
|
const h = require('react-hyperscript')
|
||
|
const connect = require('react-redux').connect
|
||
6 years ago
|
const actions = require('../../../store/actions')
|
||
|
const { getMetaMaskAccounts } = require('../../../selectors/selectors')
|
||
7 years ago
|
const ConnectScreen = require('./connect-screen')
|
||
|
const AccountList = require('./account-list')
|
||
6 years ago
|
const { DEFAULT_ROUTE } = require('../../../helpers/constants/routes')
|
||
|
const { formatBalance } = require('../../../helpers/utils/util')
|
||
|
const { getPlatform } = require('../../../../../app/scripts/lib/util')
|
||
|
const { PLATFORM_FIREFOX } = require('../../../../../app/scripts/lib/enums')
|
||
7 years ago
|
|
||
|
class ConnectHardwareForm extends Component {
|
||
|
constructor (props, context) {
|
||
|
super(props)
|
||
|
this.state = {
|
||
|
error: null,
|
||
7 years ago
|
selectedAccount: null,
|
||
7 years ago
|
accounts: [],
|
||
6 years ago
|
browserSupported: true,
|
||
6 years ago
|
unlocked: false,
|
||
6 years ago
|
device: null,
|
||
7 years ago
|
}
|
||
|
}
|
||
|
|
||
6 years ago
|
componentWillReceiveProps (nextProps) {
|
||
|
const { accounts } = nextProps
|
||
|
const newAccounts = this.state.accounts.map(a => {
|
||
|
const normalizedAddress = a.address.toLowerCase()
|
||
|
const balanceValue = accounts[normalizedAddress] && accounts[normalizedAddress].balance || null
|
||
|
a.balance = balanceValue ? formatBalance(balanceValue, 6) : '...'
|
||
|
return a
|
||
|
})
|
||
|
this.setState({accounts: newAccounts})
|
||
|
}
|
||
|
|
||
|
|
||
6 years ago
|
componentDidMount () {
|
||
|
this.checkIfUnlocked()
|
||
|
}
|
||
|
|
||
|
async checkIfUnlocked () {
|
||
6 years ago
|
['trezor', 'ledger'].forEach(async device => {
|
||
6 years ago
|
const unlocked = await this.props.checkHardwareStatus(device, this.props.defaultHdPaths[device])
|
||
6 years ago
|
if (unlocked) {
|
||
|
this.setState({unlocked: true})
|
||
6 years ago
|
this.getPage(device, 0, this.props.defaultHdPaths[device])
|
||
6 years ago
|
}
|
||
|
})
|
||
6 years ago
|
}
|
||
|
|
||
6 years ago
|
connectToHardwareWallet = (device) => {
|
||
6 years ago
|
// Ledger hardware wallets are not supported on firefox
|
||
|
if (getPlatform() === PLATFORM_FIREFOX && device === 'ledger') {
|
||
6 years ago
|
this.setState({ browserSupported: false, error: null})
|
||
|
return null
|
||
|
}
|
||
|
|
||
7 years ago
|
if (this.state.accounts.length) {
|
||
|
return null
|
||
|
}
|
||
6 years ago
|
|
||
|
// Default values
|
||
6 years ago
|
this.getPage(device, 0, this.props.defaultHdPaths[device])
|
||
6 years ago
|
}
|
||
|
|
||
|
onPathChange = (path) => {
|
||
|
this.props.setHardwareWalletDefaultHdPath({device: this.state.device, path})
|
||
6 years ago
|
this.getPage(this.state.device, 0, path)
|
||
7 years ago
|
}
|
||
|
|
||
|
onAccountChange = (account) => {
|
||
7 years ago
|
this.setState({selectedAccount: account.toString(), error: null})
|
||
7 years ago
|
}
|
||
|
|
||
6 years ago
|
onAccountRestriction = () => {
|
||
|
this.setState({error: this.context.t('ledgerAccountRestriction') })
|
||
|
}
|
||
|
|
||
6 years ago
|
showTemporaryAlert () {
|
||
|
this.props.showAlert(this.context.t('hardwareWalletConnected'))
|
||
|
// Autohide the alert after 5 seconds
|
||
|
setTimeout(_ => {
|
||
|
this.props.hideAlert()
|
||
|
}, 5000)
|
||
|
}
|
||
|
|
||
6 years ago
|
getPage = (device, page, hdPath) => {
|
||
7 years ago
|
this.props
|
||
6 years ago
|
.connectHardware(device, page, hdPath)
|
||
7 years ago
|
.then(accounts => {
|
||
|
if (accounts.length) {
|
||
6 years ago
|
|
||
|
// If we just loaded the accounts for the first time
|
||
6 years ago
|
// (device previously locked) show the global alert
|
||
|
if (this.state.accounts.length === 0 && !this.state.unlocked) {
|
||
6 years ago
|
this.showTemporaryAlert()
|
||
|
}
|
||
|
|
||
6 years ago
|
const newState = { unlocked: true, device, error: null }
|
||
7 years ago
|
// Default to the first account
|
||
|
if (this.state.selectedAccount === null) {
|
||
6 years ago
|
accounts.forEach((a, i) => {
|
||
|
if (a.address.toLowerCase() === this.props.address) {
|
||
|
newState.selectedAccount = a.index.toString()
|
||
|
}
|
||
|
})
|
||
7 years ago
|
// If the page doesn't contain the selected account, let's deselect it
|
||
7 years ago
|
} else if (!accounts.filter(a => a.index.toString() === this.state.selectedAccount).length) {
|
||
7 years ago
|
newState.selectedAccount = null
|
||
|
}
|
||
7 years ago
|
|
||
|
|
||
|
// Map accounts with balances
|
||
|
newState.accounts = accounts.map(account => {
|
||
6 years ago
|
const normalizedAddress = account.address.toLowerCase()
|
||
|
const balanceValue = this.props.accounts[normalizedAddress] && this.props.accounts[normalizedAddress].balance || null
|
||
|
account.balance = balanceValue ? formatBalance(balanceValue, 6) : '...'
|
||
7 years ago
|
return account
|
||
|
})
|
||
|
|
||
7 years ago
|
this.setState(newState)
|
||
7 years ago
|
}
|
||
|
})
|
||
|
.catch(e => {
|
||
6 years ago
|
if (e === 'Window blocked') {
|
||
6 years ago
|
this.setState({ browserSupported: false, error: null})
|
||
6 years ago
|
} else if (e !== 'Window closed' && e !== 'Popup closed') {
|
||
6 years ago
|
this.setState({ error: e.toString() })
|
||
6 years ago
|
}
|
||
7 years ago
|
})
|
||
|
}
|
||
|
|
||
6 years ago
|
onForgetDevice = (device) => {
|
||
|
this.props.forgetDevice(device)
|
||
6 years ago
|
.then(_ => {
|
||
|
this.setState({
|
||
|
error: null,
|
||
|
selectedAccount: null,
|
||
|
accounts: [],
|
||
6 years ago
|
unlocked: false,
|
||
6 years ago
|
})
|
||
|
}).catch(e => {
|
||
|
this.setState({ error: e.toString() })
|
||
|
})
|
||
|
}
|
||
|
|
||
6 years ago
|
onUnlockAccount = (device) => {
|
||
7 years ago
|
|
||
|
if (this.state.selectedAccount === null) {
|
||
|
this.setState({ error: this.context.t('accountSelectionRequired') })
|
||
7 years ago
|
}
|
||
7 years ago
|
|
||
6 years ago
|
this.props.unlockHardwareWalletAccount(this.state.selectedAccount, device)
|
||
7 years ago
|
.then(_ => {
|
||
6 years ago
|
this.context.metricsEvent({
|
||
|
eventOpts: {
|
||
|
category: 'Accounts',
|
||
|
action: 'Connected Hardware Wallet',
|
||
|
name: 'Connected Account with: ' + device,
|
||
|
},
|
||
|
})
|
||
7 years ago
|
this.props.history.push(DEFAULT_ROUTE)
|
||
|
}).catch(e => {
|
||
6 years ago
|
this.context.metricsEvent({
|
||
|
eventOpts: {
|
||
|
category: 'Accounts',
|
||
|
action: 'Connected Hardware Wallet',
|
||
|
name: 'Error connecting hardware wallet',
|
||
|
},
|
||
|
customVariables: {
|
||
|
error: e.toString(),
|
||
|
},
|
||
|
})
|
||
7 years ago
|
this.setState({ error: e.toString() })
|
||
|
})
|
||
7 years ago
|
}
|
||
|
|
||
7 years ago
|
onCancel = () => {
|
||
|
this.props.history.push(DEFAULT_ROUTE)
|
||
|
}
|
||
7 years ago
|
|
||
|
renderError () {
|
||
|
return this.state.error
|
||
6 years ago
|
? h('span.error', { style: { margin: '20px 20px 10px', display: 'block', textAlign: 'center' } }, this.state.error)
|
||
7 years ago
|
: null
|
||
|
}
|
||
|
|
||
|
renderContent () {
|
||
|
if (!this.state.accounts.length) {
|
||
|
return h(ConnectScreen, {
|
||
6 years ago
|
connectToHardwareWallet: this.connectToHardwareWallet,
|
||
6 years ago
|
browserSupported: this.state.browserSupported,
|
||
7 years ago
|
})
|
||
|
}
|
||
|
|
||
|
return h(AccountList, {
|
||
6 years ago
|
onPathChange: this.onPathChange,
|
||
|
selectedPath: this.props.defaultHdPaths[this.state.device],
|
||
6 years ago
|
device: this.state.device,
|
||
7 years ago
|
accounts: this.state.accounts,
|
||
7 years ago
|
selectedAccount: this.state.selectedAccount,
|
||
7 years ago
|
onAccountChange: this.onAccountChange,
|
||
|
network: this.props.network,
|
||
|
getPage: this.getPage,
|
||
|
history: this.props.history,
|
||
7 years ago
|
onUnlockAccount: this.onUnlockAccount,
|
||
6 years ago
|
onForgetDevice: this.onForgetDevice,
|
||
7 years ago
|
onCancel: this.onCancel,
|
||
6 years ago
|
onAccountRestriction: this.onAccountRestriction,
|
||
7 years ago
|
})
|
||
|
}
|
||
|
|
||
|
render () {
|
||
6 years ago
|
return h('div', [
|
||
7 years ago
|
this.renderError(),
|
||
|
this.renderContent(),
|
||
|
])
|
||
|
}
|
||
|
}
|
||
|
|
||
|
ConnectHardwareForm.propTypes = {
|
||
|
hideModal: PropTypes.func,
|
||
|
showImportPage: PropTypes.func,
|
||
|
showConnectPage: PropTypes.func,
|
||
|
connectHardware: PropTypes.func,
|
||
6 years ago
|
checkHardwareStatus: PropTypes.func,
|
||
|
forgetDevice: PropTypes.func,
|
||
6 years ago
|
showAlert: PropTypes.func,
|
||
|
hideAlert: PropTypes.func,
|
||
6 years ago
|
unlockHardwareWalletAccount: PropTypes.func,
|
||
6 years ago
|
setHardwareWalletDefaultHdPath: PropTypes.func,
|
||
7 years ago
|
numberOfExistingAccounts: PropTypes.number,
|
||
|
history: PropTypes.object,
|
||
|
t: PropTypes.func,
|
||
|
network: PropTypes.string,
|
||
|
accounts: PropTypes.object,
|
||
6 years ago
|
address: PropTypes.string,
|
||
6 years ago
|
defaultHdPaths: PropTypes.object,
|
||
7 years ago
|
}
|
||
|
|
||
|
const mapStateToProps = state => {
|
||
|
const {
|
||
6 years ago
|
metamask: { network, selectedAddress, identities = {} },
|
||
7 years ago
|
} = state
|
||
6 years ago
|
const accounts = getMetaMaskAccounts(state)
|
||
7 years ago
|
const numberOfExistingAccounts = Object.keys(identities).length
|
||
6 years ago
|
const {
|
||
|
appState: { defaultHdPaths },
|
||
|
} = state
|
||
7 years ago
|
|
||
|
return {
|
||
|
network,
|
||
|
accounts,
|
||
|
address: selectedAddress,
|
||
|
numberOfExistingAccounts,
|
||
6 years ago
|
defaultHdPaths,
|
||
7 years ago
|
}
|
||
|
}
|
||
|
|
||
|
const mapDispatchToProps = dispatch => {
|
||
|
return {
|
||
6 years ago
|
setHardwareWalletDefaultHdPath: ({device, path}) => {
|
||
|
return dispatch(actions.setHardwareWalletDefaultHdPath({device, path}))
|
||
|
},
|
||
|
connectHardware: (deviceName, page, hdPath) => {
|
||
6 years ago
|
return dispatch(actions.connectHardware(deviceName, page, hdPath))
|
||
7 years ago
|
},
|
||
6 years ago
|
checkHardwareStatus: (deviceName, hdPath) => {
|
||
|
return dispatch(actions.checkHardwareStatus(deviceName, hdPath))
|
||
6 years ago
|
},
|
||
|
forgetDevice: (deviceName) => {
|
||
|
return dispatch(actions.forgetDevice(deviceName))
|
||
|
},
|
||
6 years ago
|
unlockHardwareWalletAccount: (index, deviceName, hdPath) => {
|
||
|
return dispatch(actions.unlockHardwareWalletAccount(index, deviceName, hdPath))
|
||
7 years ago
|
},
|
||
|
showImportPage: () => dispatch(actions.showImportPage()),
|
||
|
showConnectPage: () => dispatch(actions.showConnectPage()),
|
||
6 years ago
|
showAlert: (msg) => dispatch(actions.showAlert(msg)),
|
||
|
hideAlert: () => dispatch(actions.hideAlert()),
|
||
7 years ago
|
}
|
||
|
}
|
||
|
|
||
|
ConnectHardwareForm.contextTypes = {
|
||
|
t: PropTypes.func,
|
||
6 years ago
|
metricsEvent: PropTypes.func,
|
||
7 years ago
|
}
|
||
|
|
||
|
module.exports = connect(mapStateToProps, mapDispatchToProps)(
|
||
|
ConnectHardwareForm
|
||
|
)
|