diff --git a/packages/extension-ui/src/Popup/ImportQr.tsx b/packages/extension-ui/src/Popup/ImportQr.tsx index a3418610..88169a97 100644 --- a/packages/extension-ui/src/Popup/ImportQr.tsx +++ b/packages/extension-ui/src/Popup/ImportQr.tsx @@ -1,7 +1,7 @@ // Copyright 2019-2021 @polkadot/extension-ui authors & contributors // SPDX-License-Identifier: Apache-2.0 -import React, { useContext, useState } from 'react'; +import React, { useCallback, useContext, useState } from 'react'; import { QrScanAddress } from '@polkadot/react-qr'; @@ -10,13 +10,23 @@ import useTranslation from '../hooks/useTranslation'; import { createAccountExternal } from '../messaging'; import { Header, Name } from '../partials'; +interface QrAccount { + content: string; + genesisHash: string; + name?: string; +} + export default function ImportQr (): React.ReactElement { const { t } = useTranslation(); const onAction = useContext(ActionContext); - const [account, setAccount] = useState(null); + const [account, setAccount] = useState(null); const [name, setName] = useState(null); - // FIXME Duplicated between here and Create.tsx + const _setAccount = useCallback((qrAccount: QrAccount) => { + setAccount(qrAccount); + setName(qrAccount?.name || null); + }, []); + const _onCreate = (): void => { if (account && name) { createAccountExternal(name, account.content, account.genesisHash) @@ -33,7 +43,7 @@ export default function ImportQr (): React.ReactElement { /> {!account && (
- +
)} {account && ( @@ -41,6 +51,7 @@ export default function ImportQr (): React.ReactElement {
@@ -48,6 +59,7 @@ export default function ImportQr (): React.ReactElement { {name && ( diff --git a/packages/extension-ui/src/components/ValidatedInput.tsx b/packages/extension-ui/src/components/ValidatedInput.tsx index 6787ad07..a414ee9f 100644 --- a/packages/extension-ui/src/components/ValidatedInput.tsx +++ b/packages/extension-ui/src/components/ValidatedInput.tsx @@ -26,6 +26,12 @@ function ValidatedInput> ({ className, compone const [validationResult, setValidationResult] = useState>(Result.ok('')); const isMounted = useIsMounted(); + useEffect(() => { + if (defaultValue) { + setValue(defaultValue); + } + }, [defaultValue]); + useEffect(() => { // Do not show any error on first mount if (!isMounted) { diff --git a/packages/extension-ui/src/partials/Name.tsx b/packages/extension-ui/src/partials/Name.tsx index 2d92d05b..f826c765 100644 --- a/packages/extension-ui/src/partials/Name.tsx +++ b/packages/extension-ui/src/partials/Name.tsx @@ -14,15 +14,16 @@ interface Props { label?: string; onBlur?: () => void; onChange: (name: string | null) => void; + value?: string; } -export default function Name ({ address, className, isFocused, label, onBlur, onChange }: Props): React.ReactElement { +export default function Name ({ address, className, isFocused, label, onBlur, onChange, value }: Props): React.ReactElement { const { t } = useTranslation(); const { accounts } = useContext(AccountContext); const isNameValid = useMemo(() => isNotShorterThan(3, t('Account name is too short')), [t]); const account = accounts.find((account) => account.address === address); - const startValue = account && account.name; + const startValue = value || account?.name; return (