allow giving a name to ledger (#630)

packages/extension-ui/src/Popup/ImportLedger.tsx

@@ -3,7 +3,7 @@
 
 import { faSync } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useContext, useEffect, useRef, useState } from 'react';
 import styled from 'styled-components';
 
 import settings from '@polkadot/ui-settings';
@@ -12,7 +12,7 @@ import { ActionContext, Address, Button, ButtonArea, Dropdown, VerticalSpace, Wa
 import { useLedger } from '../hooks/useLedger';
 import useTranslation from '../hooks/useTranslation';
 import { createAccountHardware } from '../messaging';
-import { Header } from '../partials';
+import { Header, Name } from '../partials';
 import { ThemeProps } from '../types';
 import ledgerChains from '../util/legerChains';
 
@@ -40,7 +40,7 @@ function ImportLedger ({ className }: Props): React.ReactElement {
   const [isBusy, setIsBusy] = useState(false);
   const [genesis, setGenesis] = useState<string | null>(null);
   const onAction = useContext(ActionContext);
-  const name = useMemo(() => `ledger ${accountIndex}/${addressOffset}`, [accountIndex, addressOffset]);
+  const [name, setName] = useState<string | null>(null);
   const { address, error: ledgerError, isLoading: ledgerLoading, isLocked: ledgerLocked, refresh, warning: ledgerWarning } = useLedger(genesis, accountIndex, addressOffset);
 
   useEffect(() => {
@@ -72,7 +72,7 @@ function ImportLedger ({ className }: Props): React.ReactElement {
 
   const _onSave = useCallback(
     () => {
-      if (address && genesis) {
+      if (address && genesis && name) {
         setIsBusy(true);
 
         createAccountHardware(address, 'ledger', accountIndex, addressOffset, name, genesis)
@@ -104,7 +104,7 @@ function ImportLedger ({ className }: Props): React.ReactElement {
           genesisHash={genesis}
           isExternal
           isHardware
-          name={address ? name : ''}
+          name={name}
         />
         <Dropdown
           className='network'
@@ -113,10 +113,17 @@ function ImportLedger ({ className }: Props): React.ReactElement {
           options={networkOps.current}
           value={genesis}
         />
-        {genesis && address && !ledgerError && (
+        { !!genesis && !!address && !ledgerError && (
+          <Name
+            onChange={setName}
+            value={name || ''}
+          />
+        )}
+        { !!name && (
           <>
             <Dropdown
               className='accountType'
+              isDisabled={ledgerLoading}
               label={t<string>('account type')}
               onChange={_onSetAccountIndex}
               options={accOps.current}
@@ -124,6 +131,7 @@ function ImportLedger ({ className }: Props): React.ReactElement {
             />
             <Dropdown
               className='accountIndex'
+              isDisabled={ledgerLoading}
               label={t<string>('address index')}
               onChange={_onSetAddressOffset}
               options={addOps.current}

packages/extension-ui/src/components/Dropdown.tsx

@@ -17,6 +17,7 @@ interface DropdownOption {
 interface Props extends ThemeProps {
   className?: string;
   defaultValue?: string | null;
+  isDisabled?: boolean
   isError?: boolean;
   isFocussed?: boolean;
   label: string;
@@ -26,7 +27,7 @@ interface Props extends ThemeProps {
   value?: string;
 }
 
-function Dropdown ({ className, defaultValue, isFocussed, label, onBlur, onChange, options, value }: Props): React.ReactElement<Props> {
+function Dropdown ({ className, defaultValue, isDisabled, isFocussed, label, onBlur, onChange, options, value }: Props): React.ReactElement<Props> {
   const _onChange = ({ target: { value } }: React.ChangeEvent<HTMLSelectElement>): void => {
     onChange && onChange(value.trim());
   };
@@ -40,6 +41,7 @@ function Dropdown ({ className, defaultValue, isFocussed, label, onBlur, onChang
         <select
           autoFocus={isFocussed}
           defaultValue={defaultValue || undefined}
+          disabled={isDisabled}
           onBlur={onBlur}
           onChange={_onChange}
           value={value}