Add custom hd path option (#9367)

* Add custom hd path option

* Update selectPathHelp locale message

Co-authored-by: Erik Marks <rekmarks@protonmail.com>

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"

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)
+              }
             }}
           />
         </div>
+        {showCustomInput && this.renderCustomInput()}
       </div>
     )
   }
@@ -61,6 +79,22 @@ class AccountList extends Component {
     return device.slice(0, 1).toUpperCase() + device.slice(1)
   }
 
+  renderCustomInput() {
+    const hdPaths = this.getHdPaths()
+    return (
+      <input
+        className="hw-connect__custom-input"
+        type="text"
+        defaultValue={hdPaths[0].value}
+        onChange={() => {
+          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')}
         </Button>
-        <Button
-          type="primary"
-          large
-          className="new-external-account-form__button unlock"
-          disabled={disabled}
-          onClick={this.props.onUnlockAccount.bind(this, this.props.device)}
-        >
-          {this.context.t('unlock')}
-        </Button>
+        {showSelectButton ? (
+          <Button
+            type="primary"
+            large
+            className="new-external-account-form__button unlock"
+            onClick={() => {
+              onPathChange(this.inputRef.current.value)
+              this.setState({ customPathSelected: true })
+            }}
+          >
+            {this.context.t('selectHdPath')}
+          </Button>
+        ) : (
+          <Button
+            type="primary"
+            large
+            className="new-external-account-form__button unlock"
+            disabled={disabled}
+            onClick={this.props.onUnlockAccount.bind(this, this.props.device)}
+          >
+            {this.context.t('unlock')}
+          </Button>
+        )}
       </div>
     )
   }
@@ -183,11 +234,12 @@ class AccountList extends Component {
   }
 
   render() {
+    const { showCustomInput, customPathSelected } = this.state
     return (
       <div className="new-external-account-form account-list">
         {this.renderHeader()}
-        {this.renderAccounts()}
-        {this.renderPagination()}
+        {(!showCustomInput || customPathSelected) && this.renderAccounts()}
+        {(!showCustomInput || customPathSelected) && this.renderPagination()}
         {this.renderButtons()}
         {this.renderForgetDevice()}
       </div>

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 {