init

Author: Nick-1979

packages/extension-polkagate/src/components/SignWithLedger.tsx

@@ -1,21 +1,23 @@
 // Copyright 2019-2024 @polkadot/extension-polkagate authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { SignerPayloadJSON } from '@polkadot/types/types';
-import type { HexString } from '@polkadot/util/types';
-import type { TxResult } from '../util/types';
+/* eslint-disable react/jsx-max-props-per-line */
+
+import type { ApiPromise } from '@polkadot/api';
 import type { SubmittableExtrinsic } from '@polkadot/api/types/submittable';
-import type { ISubmittableResult } from '@polkadot/types/types';
 import type { GenericExtrinsicPayload } from '@polkadot/types';
+import type { ISubmittableResult, SignerPayloadJSON } from '@polkadot/types/types';
+import type { HexString } from '@polkadot/util/types';
+import type { TxResult } from '../util/types';
 
 import { Grid, useTheme } from '@mui/material';
 import React, { useCallback, useState } from 'react';
-import { ApiPromise } from '@polkadot/api';
-import { useAccount, useTranslation } from '../hooks';
+
+import { useInfo, useTranslation } from '../hooks';
 import LedgerSign from '../popup/signing/LedgerSign';
+import LedgerSignGeneric from '../popup/signing/LedgerSignGeneric';
 import { send } from '../util/api';
 import { PButton, Warning } from '.';
-import LedgerSignGeneric from '../popup/signing/LedgerSignGeneric';
 
 interface Props {
   address: string;
@@ -26,19 +28,21 @@ interface Props {
   api: ApiPromise | undefined;
   payload: GenericExtrinsicPayload | undefined;
   from: string | undefined;
-  ptx: SubmittableExtrinsic<"promise", ISubmittableResult> | undefined;
+  ptx: SubmittableExtrinsic<'promise', ISubmittableResult> | undefined;
   setStep: React.Dispatch<React.SetStateAction<number>>;
   steps: Record<string, number>;
   handleTxResult: (txResult: TxResult) => void
 }
 
-export default function SignWithLedger({ address, alertText, api, from, handleTxResult, onSecondaryClick, signerPayload, onSignature, payload, ptx, setStep, steps }: Props) {
+export default function SignWithLedger ({ address, alertText, api, from, handleTxResult, onSecondaryClick, onSignature, payload, ptx, setStep, signerPayload, steps }: Props) {
   const { t } = useTranslation();
   const theme = useTheme();
-  const account = useAccount(address);
+  const { account, chainName } = useInfo(address);
 
   const [error, setError] = useState<string | null>();
 
+  const isPolkadotOrItsSystemChains = chainName?.toLowerCase()?.includes('polkadot');
+
   const onLedgerGenericSignature = useCallback(async (signature: HexString, raw?: GenericExtrinsicPayload) => {
     if (!api || !signature || !ptx || !from) {
       return;
@@ -53,7 +57,7 @@ export default function SignWithLedger({ address, alertText, api, from, handleTx
     const txResult = await send(from, api, ptx, raw.toHex(), signature);
 
     handleTxResult(txResult);
-  }, [api, from, handleTxResult, ptx, setStep, steps['WAIT_SCREEN']]);
+  }, [api, from, handleTxResult, ptx, setStep, steps]);
 
   return (
     <>
@@ -74,22 +78,22 @@ export default function SignWithLedger({ address, alertText, api, from, handleTx
             text={t('Cancel')}
           />
         </Grid>
-        <Grid item sx={{ 'button': { m: 0, width: '100%' }, mt: '80px', position: 'relative', width: '70%' }} xs={8}>
-          {account?.isGeneric || account?.isMigration
+        <Grid item sx={{ button: { m: 0, width: '100%' }, mt: '80px', position: 'relative', width: '70%' }} xs={8}>
+          {account?.isGeneric || account?.isMigration || isPolkadotOrItsSystemChains
             ? <LedgerSignGeneric
-              accountIndex={account?.accountIndex as number || 0}
+              accountIndex={account?.accountIndex || 0}
               address={address}
-              addressOffset={account?.addressOffset as number || 0}
-              error={error as string}
+              addressOffset={account?.addressOffset || 0}
+              error={error}
               onSignature={onLedgerGenericSignature}
               payload={signerPayload}
               setError={setError}
               showError={false}
             />
             : <LedgerSign
-              accountIndex={account?.accountIndex as number || 0}
-              addressOffset={account?.addressOffset as number || 0}
-              error={error as string}
+              accountIndex={account?.accountIndex || 0}
+              addressOffset={account?.addressOffset || 0}
+              error={error}
               genesisHash={account?.genesisHash || api?.genesisHash?.toHex()}
               onSignature={onSignature}
               payload={payload}

packages/extension-polkagate/src/popup/signing/LedgerSign.tsx

@@ -18,7 +18,7 @@ interface Props {
   accountIndex?: number;
   addressOffset?: number;
   className?: string;
-  error: string | null;
+  error: string | null | undefined;
   genesisHash?: string;
   onSignature?: ({ signature }: { signature: HexString }) => void;
   payload?: ExtrinsicPayload;

packages/extension-polkagate/src/popup/signing/LedgerSignGeneric.tsx

@@ -3,44 +3,47 @@
 
 /* eslint-disable react/jsx-max-props-per-line */
 
+import type { LedgerSignature } from '@polkadot/hw-ledger/types';
+import type { GenericExtrinsicPayload } from '@polkadot/types';
+import type { SignerPayloadJSON } from '@polkadot/types/types';
 import type { HexString } from '@polkadot/util/types';
+
 import { Grid, useTheme } from '@mui/material';
-import React, { useCallback, useEffect, useState, useMemo } from 'react';
+import React, { useCallback, useEffect, useMemo,useState } from 'react';
 import styled from 'styled-components';
+
 import { PButton, Warning } from '../../components';
-import useTranslation from '../../hooks/useTranslation';
 import { useGenericLedger, useInfo, useMetadataProof } from '../../hooks';
+import useTranslation from '../../hooks/useTranslation';
 import ledgerChains from '../../util/legerChains';
-import type { SignerPayloadJSON } from '@polkadot/types/types';
-import type { LedgerSignature } from '@polkadot/hw-ledger/types';
-import type { GenericExtrinsicPayload } from '@polkadot/types';
 
 interface Props {
   accountIndex?: number;
   address: string | undefined;
   addressOffset?: number;
   className?: string;
-  error: string | null;
+  error: string | null | undefined;
   onSignature?: (signature: HexString, raw?: GenericExtrinsicPayload) => void;
   payload?: SignerPayloadJSON;
   setError: (value: string | null) => void;
   showError?: boolean;
 }
 
-function LedgerSignGeneric({ accountIndex, address, addressOffset, error, onSignature, payload, setError, showError = true }: Props): React.ReactElement<Props> {
+function LedgerSignGeneric ({ accountIndex, address, addressOffset, error, onSignature, payload, setError, showError = true }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const theme = useTheme();
-  const { api, account } = useInfo(address);
+  const { account, api } = useInfo(address);
   const metadataProof = useMetadataProof(api, payload);
 
   const [isBusy, setIsBusy] = useState<boolean>(false);
 
   const chainSlip44 = useMemo(() => {
     if (account?.genesisHash) {
-      return ledgerChains.find(({ genesisHash }) => genesisHash.includes(account.genesisHash as any))?.slip44 ?? null
+      return ledgerChains.find(({ genesisHash }) => genesisHash.includes(account.genesisHash as HexString))?.slip44 ?? null;
     }
+
     return null;
-  }, [account, ledgerChains]);
+  }, [account]);
 
   const { error: ledgerError, isLoading: ledgerLoading, isLocked: ledgerLocked, ledger, refresh, warning: ledgerWarning } = useGenericLedger(accountIndex, addressOffset, chainSlip44);