Show errors on keypair retrieval (#4831)

packages/react-signer/src/Address.tsx

@@ -160,7 +160,11 @@ function Address ({ currentItem, onChange, onEnter, passwordError, requestAddres
         (isProxyActive && proxyInfo && proxyAddress) ||
         requestAddress;
 
-      return [signAddress, extractExternal(signAddress)];
+      try {
+        return [signAddress, extractExternal(signAddress)];
+      } catch {
+        return [signAddress, {} as AddressFlags];
+      }
     },
     [multiAddress, proxyAddress, isProxyActive, multiInfo, proxyInfo, requestAddress]
   );

packages/react-signer/src/TxSigned.tsx

@@ -8,7 +8,7 @@ import type { QueueTx, QueueTxMessageSetStatus } from '@polkadot/react-component
 import type { Option } from '@polkadot/types';
 import type { Multisig, Timepoint } from '@polkadot/types/interfaces';
 import type { Ledger } from '@polkadot/ui-keyring';
-import type { AddressProxy, QrState } from './types';
+import type { AddressFlags, AddressProxy, QrState } from './types';
 
 import React, { useCallback, useContext, useEffect, useState } from 'react';
 import styled from 'styled-components';
@@ -19,6 +19,7 @@ import { Button, ErrorBoundary, Modal, Output, StatusContext, Toggle } from '@po
 import { useApi, useLedger, useToggle } from '@polkadot/react-hooks';
 import { keyring } from '@polkadot/ui-keyring';
 import { assert, BN_ZERO } from '@polkadot/util';
+import { addressEq } from '@polkadot/util-crypto';
 
 import Address from './Address';
 import Qr from './Qr';
@@ -154,7 +155,17 @@ async function extractParams (api: ApiPromise, address: string, options: Partial
     return ['signing', address, { ...options, signer: injected.signer }];
   }
 
-  return ['signing', pair.address, { ...options, signer: new AccountSigner(api.registry, pair) }];
+  assert(addressEq(address, pair.address), `Unable to retrieve keypair for ${address}`);
+
+  return ['signing', address, { ...options, signer: new AccountSigner(api.registry, pair) }];
+}
+
+function tryExtract (address: string | null): AddressFlags {
+  try {
+    return extractExternal(address);
+  } catch {
+    return {} as AddressFlags;
+  }
 }
 
 function TxSigned ({ className, currentItem, requestAddress }: Props): React.ReactElement<Props> | null {
@@ -162,7 +173,7 @@ function TxSigned ({ className, currentItem, requestAddress }: Props): React.Rea
   const { api } = useApi();
   const { getLedger } = useLedger();
   const { queueSetTxStatus } = useContext(StatusContext);
-  const [flags, setFlags] = useState(() => extractExternal(requestAddress));
+  const [flags, setFlags] = useState(() => tryExtract(requestAddress));
   const [error, setError] = useState<Error | null>(null);
   const [{ isQrHashed, qrAddress, qrPayload, qrResolve }, setQrState] = useState<QrState>({ isQrHashed: false, qrAddress: '', qrPayload: new Uint8Array() });
   const [isBusy, setBusy] = useState(false);
@@ -176,7 +187,7 @@ function TxSigned ({ className, currentItem, requestAddress }: Props): React.Rea
   const [tip, setTip] = useState(BN_ZERO);
 
   useEffect((): void => {
-    setFlags(extractExternal(senderInfo.signAddress));
+    setFlags(tryExtract(senderInfo.signAddress));
     setPasswordError(null);
   }, [senderInfo]);
 
@@ -184,9 +195,11 @@ function TxSigned ({ className, currentItem, requestAddress }: Props): React.Rea
   useEffect((): void => {
     setMultiCall(
       currentItem.extrinsic && senderInfo.multiRoot
-        ? senderInfo.proxyRoot
-          ? api.tx.proxy.proxy(senderInfo.proxyRoot, null, currentItem.extrinsic).method.toHex()
-          : currentItem.extrinsic.method.toHex()
+        ? (
+          senderInfo.proxyRoot
+            ? api.tx.proxy.proxy(senderInfo.proxyRoot, null, currentItem.extrinsic)
+            : currentItem.extrinsic
+        ).method.toHex()
         : null
     );
   }, [api, currentItem, senderInfo]);