fix: set chainSpecific account type and disable Ethereum switch (#1608)

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

@@ -42,6 +42,7 @@ function ImportLedger ({ className }: Props): React.ReactElement {
   const [isEthereum, setIsEthereum] = useState(false);
   const onAction = useContext(ActionContext);
   const [name, setName] = useState<string | null>(null);
+  const isChainSpecific = settings.ledgerApp === 'chainSpecific';
   const { address, error: ledgerError, isLoading: ledgerLoading, isLocked: ledgerLocked, refresh, type, warning: ledgerWarning } = useLedger(genesis, accountIndex, addressOffset, isEthereum);
 
   useEffect(() => {
@@ -50,6 +51,12 @@ function ImportLedger ({ className }: Props): React.ReactElement {
     }
   }, [address]);
 
+  useEffect(() => {
+    if (isChainSpecific) {
+      setIsEthereum(false);
+    }
+  }, [isChainSpecific]);
+
   const accOps = useRef(AVAIL.map((value): AccOption => ({
     text: t('Account type {{index}}', { replace: { index: value } }),
     value
@@ -112,6 +119,7 @@ function ImportLedger ({ className }: Props): React.ReactElement {
           <Switch
             checked={isEthereum}
             checkedLabel={t('Ethereum Account')}
+            isDisabled={isChainSpecific}
             onChange={setIsEthereum}
             uncheckedLabel={t('ED25519 Account')}
           />

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

@@ -11,21 +11,23 @@ interface Props {
   uncheckedLabel: string;
   checkedLabel: string;
   className?: string;
+  isDisabled?: boolean;
 }
 
-function Switch ({ checked, checkedLabel, className, onChange, uncheckedLabel }: Props): React.ReactElement<Props> {
+function Switch ({ checked, checkedLabel, className, isDisabled, onChange, uncheckedLabel }: Props): React.ReactElement<Props> {
   const _onChange = useCallback(
     (event: React.ChangeEvent<HTMLInputElement>) => onChange(event.target.checked),
     [onChange]
   );
 
   return (
-    <div className={className}>
+    <div className={`${className}${isDisabled ? ' isDisabled' : ''}`}>
       <span>{uncheckedLabel}</span>
       <label>
         <input
           checked={checked}
           className='checkbox'
+          disabled={isDisabled}
           onChange={_onChange}
           type='checkbox'
         />
@@ -79,4 +81,12 @@ export default styled(Switch)<Props>`
       border-radius: 50%;
     }
   }
+
+  &.isDisabled {
+    opacity: 0.6;
+
+    .slider {
+      cursor: default;
+    }
+  }
 `;

packages/extension-ui/src/hooks/useLedger.ts

@@ -16,7 +16,7 @@ import { knownLedger } from '@polkadot/networks/defaults';
 import { settings } from '@polkadot/ui-settings';
 import { assert } from '@polkadot/util';
 
-import chains from '../../../extension-ui/src/util/chains';
+import chains from '../util/chains.js';
 import ledgerChains from '../util/legerChains.js';
 import useTranslation from './useTranslation.js';
 
@@ -114,6 +114,7 @@ export default function useLedger (genesis?: string | null, accountIndex = 0, ad
     ));
     console.error(e);
     setAddress(null);
+    setType(null);
   };
 
   const ledger = useMemo(() => {
@@ -142,6 +143,7 @@ export default function useLedger (genesis?: string | null, accountIndex = 0, ad
   useEffect(() => {
     if (!ledger || !genesis) {
       setAddress(null);
+      setType(null);
 
       return;
     }
@@ -184,6 +186,7 @@ export default function useLedger (genesis?: string | null, accountIndex = 0, ad
         .then((res) => {
           setIsLoading(false);
           setAddress(res.address);
+          setType('ed25519');
         }).catch((e: Error) => {
           handleGetAddressError(e, genesis);
         });