Fix qr address import (#5622)

* modify add qr code to reject custom metadata and accept ethereum

* lint

* Update packages/page-accounts/src/modals/Qr.tsx

Co-authored-by: Jaco <jacogr@gmail.com>

* Update packages/page-accounts/src/modals/Qr.tsx

Co-authored-by: Jaco <jacogr@gmail.com>

* Update packages/page-accounts/src/modals/Qr.tsx

Co-authored-by: Jaco <jacogr@gmail.com>

* Update packages/page-accounts/src/modals/Qr.tsx

Co-authored-by: Jaco <jacogr@gmail.com>

* fix eth add import

* clean and lint

* readd string

* remove t around warning

Co-authored-by: Jaco <jacogr@gmail.com>
This commit is contained in:
Antoine Estienne 2021-07-06 11:45:18 +02:00 committed by GitHub
parent 4f1016551c
commit a6db0a6b64
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -7,7 +7,7 @@ import type { ModalProps } from '../types';
import React, { useCallback, useState } from 'react';
import styled from 'styled-components';
import { AddressRow, Button, Input, InputAddress, Modal, QrScanAddress } from '@polkadot/react-components';
import { AddressRow, Button, Input, InputAddress, MarkWarning, Modal, QrScanAddress } from '@polkadot/react-components';
import { useApi, useIpfs } from '@polkadot/react-hooks';
import { keyring } from '@polkadot/ui-keyring';
@ -31,14 +31,15 @@ interface Address {
address: string;
isAddress: boolean;
scanned: Scanned | null;
warning?: string;
}
function QrModal ({ className = '', onClose, onStatusChange }: Props): React.ReactElement<Props> {
const { t } = useTranslation();
const { api } = useApi();
const { api, isEthereum } = useApi();
const { isIpfs } = useIpfs();
const [{ isNameValid, name }, setName] = useState({ isNameValid: false, name: '' });
const [{ address, isAddress, scanned }, setAddress] = useState<Address>({ address: '', isAddress: false, scanned: null });
const [{ address, isAddress, scanned, warning }, setAddress] = useState<Address>({ address: '', isAddress: false, scanned: null });
const [{ isPasswordValid, password }, setPassword] = useState({ isPasswordValid: false, password: '' });
const isValid = !!address && isNameValid && (isAddress || isPasswordValid);
@ -70,6 +71,18 @@ function QrModal ({ className = '', onClose, onStatusChange }: Props): React.Rea
[_onNameChange]
);
const _onError = useCallback(
(err: Error): void => {
setAddress({
address: '',
isAddress: false,
scanned: null,
warning: err.message
});
},
[]
);
const _onSave = useCallback(
(): void => {
if (!scanned || !isValid) {
@ -82,7 +95,7 @@ function QrModal ({ className = '', onClose, onStatusChange }: Props): React.Rea
name: name.trim()
};
const account = isAddress
? keyring.addExternal(content, meta).pair.address
? isEthereum ? keyring.addExternal(content).pair.address : keyring.addExternal(content, meta).pair.address
: keyring.addUri(content, password, meta, 'sr25519').pair.address;
InputAddress.setLastValue('account', account);
@ -95,7 +108,7 @@ function QrModal ({ className = '', onClose, onStatusChange }: Props): React.Rea
});
onClose();
},
[api, isValid, name, onClose, onStatusChange, password, scanned, t]
[api, isValid, name, onClose, onStatusChange, password, scanned, isEthereum, t]
);
return (
@ -138,8 +151,13 @@ function QrModal ({ className = '', onClose, onStatusChange }: Props): React.Rea
: (
<Modal.Columns hint={t<string>('Provide the account QR from the module/external application for scanning. Once detected as valid, you will be taken to the next step to add the account to your list.')}>
<div className='qr-wrapper'>
<QrScanAddress onScan={_onScan} />
<QrScanAddress
isEthereum={isEthereum}
onError={_onError}
onScan={_onScan}
/>
</div>
{warning && <MarkWarning content={warning} />}
</Modal.Columns>
)
}