diff --git a/packages/react-signer/src/Qr.tsx b/packages/react-signer/src/Qr.tsx index 1d3041c1c7..d138b916f2 100644 --- a/packages/react-signer/src/Qr.tsx +++ b/packages/react-signer/src/Qr.tsx @@ -2,19 +2,24 @@ // This software may be modified and distributed under the terms // of the Apache-2.0 license. See the LICENSE file for details. -import React from 'react'; +import React, { useCallback, useState } from 'react'; import styled from 'styled-components'; import { Columar, QrDisplayPayload, QrScanSignature, Spinner } from '@polkadot/react-components'; +import { isHex } from '@polkadot/util'; import { useTranslation } from './translate'; +interface SigData { + signature: string +} + interface Props { address: string; className?: string; genesisHash: Uint8Array; isHashed: boolean; isScanning: boolean; - onSignature: (signature: { signature: string }) => void; + onSignature: (data: SigData) => void; payload: Uint8Array; } @@ -23,6 +28,26 @@ const CMD_MORTAL = 2; function Qr ({ address, className, genesisHash, isHashed, onSignature, payload }: Props): React.ReactElement { const { t } = useTranslation(); + const [sigError, setSigError] = useState(null); + + const _onSignature = useCallback( + (data: SigData): void => { + if (isHex(data.signature)) { + onSignature(data); + } else { + const signature = data.signature as string; + + setSigError(t('Non-signature, non-hex data received from QR. Data contains "{{sample}}" instead of a hex-only signature. Please present the correct signature generated from the QR presented for submission.', { + replace: { + sample: signature.length > 47 + ? `${signature.substr(0, 24)}…${signature.substr(-22)}` + : signature + } + })); + } + }, + [onSignature, t] + ); if (!address) { return ( @@ -31,27 +56,30 @@ function Qr ({ address, className, genesisHash, isHashed, onSignature, payload } } return ( - - -
- -
-
- -
- -
-
-
+ <> + + +
+ +
+
+ +
+ +
+
+
+ {sigError &&
{sigError}
} + ); } diff --git a/packages/react-signer/src/util.ts b/packages/react-signer/src/util.ts index a14fbe874f..3668e68506 100644 --- a/packages/react-signer/src/util.ts +++ b/packages/react-signer/src/util.ts @@ -48,7 +48,7 @@ export function extractExternal (accountId: string | null): AddressFlags { isHardware: !!pair.meta.isHardware, isMultisig: !!pair.meta.isMultisig, isProxied: !!pair.meta.isProxied, - isQr: !!pair.meta.isExternal && !pair.meta.isMultisig && !pair.meta.isProxied, + isQr: !!pair.meta.isExternal && !pair.meta.isMultisig && !pair.meta.isProxied && !pair.meta.isHardware, isUnlockable: isUnlockable && pair.isLocked, threshold: (pair.meta.threshold as number) || 0, who: ((pair.meta.who as string[]) || []).map(recodeAddress)