diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json index b8d57bb21..00160d07b 100644 --- a/app/_locales/en/messages.json +++ b/app/_locales/en/messages.json @@ -1425,7 +1425,7 @@ "message": "Select Locale" }, "selectPathHelp": { - "message": "If you don't see your existing Ledger accounts below, try switching paths to \"Legacy (MEW / MyCrypto)\"" + "message": "If you don't see your existing Ledger accounts below, try a different HD path." }, "selectType": { "message": "Select Type" diff --git a/ui/app/pages/create-account/connect-hardware/account-list.js b/ui/app/pages/create-account/connect-hardware/account-list.js index b819c81be..94ba98b60 100644 --- a/ui/app/pages/create-account/connect-hardware/account-list.js +++ b/ui/app/pages/create-account/connect-hardware/account-list.js @@ -5,6 +5,13 @@ import getAccountLink from '../../../../lib/account-link' import Button from '../../../components/ui/button' class AccountList extends Component { + state = { + showCustomInput: false, + customPathSelected: false, + } + + inputRef = React.createRef() + getHdPaths() { return [ { @@ -15,6 +22,10 @@ class AccountList extends Component { label: `Legacy (MEW / MyCrypto)`, value: `m/44'/60'/0'`, }, + { + label: `Custom`, + value: `custom`, + }, ] } @@ -32,6 +43,7 @@ class AccountList extends Component { } renderHdPathSelector() { + const { showCustomInput } = this.state const { onPathChange, selectedPath } = this.props const options = this.getHdPaths() @@ -46,13 +58,19 @@ class AccountList extends Component { className="hw-connect__hdPath__select" name="hd-path-select" clearable={false} - value={selectedPath} + value={showCustomInput ? 'custom' : selectedPath} options={options} onChange={(opt) => { - onPathChange(opt.value) + if (opt.value === 'custom') { + this.setState({ showCustomInput: true }) + } else { + this.setState({ showCustomInput: false }) + onPathChange(opt.value) + } }} /> + {showCustomInput && this.renderCustomInput()} ) } @@ -61,6 +79,22 @@ class AccountList extends Component { return device.slice(0, 1).toUpperCase() + device.slice(1) } + renderCustomInput() { + const hdPaths = this.getHdPaths() + return ( + { + this.setState({ customPathSelected: false }) + }} + ref={this.inputRef} + autoFocus + /> + ) + } + renderHeader() { const { device } = this.props return ( @@ -143,6 +177,9 @@ class AccountList extends Component { } renderButtons() { + const { showCustomInput, customPathSelected } = this.state + const { onPathChange } = this.props + const showSelectButton = showCustomInput && !customPathSelected const disabled = this.props.selectedAccount === null const buttonProps = {} if (disabled) { @@ -159,15 +196,29 @@ class AccountList extends Component { > {this.context.t('cancel')} - + {showSelectButton ? ( + + ) : ( + + )} ) } @@ -183,11 +234,12 @@ class AccountList extends Component { } render() { + const { showCustomInput, customPathSelected } = this.state return (
{this.renderHeader()} - {this.renderAccounts()} - {this.renderPagination()} + {(!showCustomInput || customPathSelected) && this.renderAccounts()} + {(!showCustomInput || customPathSelected) && this.renderPagination()} {this.renderButtons()} {this.renderForgetDevice()}
diff --git a/ui/app/pages/create-account/connect-hardware/index.scss b/ui/app/pages/create-account/connect-hardware/index.scss index b9eb4c8f8..4d1c880cb 100644 --- a/ui/app/pages/create-account/connect-hardware/index.scss +++ b/ui/app/pages/create-account/connect-hardware/index.scss @@ -196,6 +196,17 @@ margin: 0 auto 20px; display: flex; } + + &__custom-input { + height: 54px; + width: 335px; + border: 1px solid $geyser; + border-radius: 4px; + background-color: $white; + color: $scorpion; + font-size: 16px; + padding: 0 20px; + } } .hw-account-list {