diff --git a/src/components/CreateAddress/ExtendedPublicKeyPublicKeyImporter.jsx b/src/components/CreateAddress/ExtendedPublicKeyPublicKeyImporter.jsx
index 1324174e..badac0e5 100644
--- a/src/components/CreateAddress/ExtendedPublicKeyPublicKeyImporter.jsx
+++ b/src/components/CreateAddress/ExtendedPublicKeyPublicKeyImporter.jsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
import PropTypes from "prop-types";
import {
convertExtendedPublicKey,
@@ -13,101 +13,18 @@ import { Button, TextField, FormHelperText, Box, Grid } from "@mui/material";
const DEFAULT_BIP32_PATH = "m/0";
-class ExtendedPublicKeyPublicKeyImporter extends React.Component {
- constructor(props) {
- super(props);
-
- this.state = {
- bip32Path: DEFAULT_BIP32_PATH,
- extendedPublicKey: "",
- extendedPublicKeyError: "",
- bip32PathError: "",
- conversionMessage: "",
- };
- }
-
- render = () => {
- const {
- bip32Path,
- extendedPublicKey,
- extendedPublicKeyError,
- bip32PathError,
- conversionMessage,
- } = this.state;
- return (
-
-
-
-
- {conversionMessage !== "" && (
-
-
- {conversionMessage}, this may indicate an invalid network setting,
- if so correct setting, remove key and try again.
-
-
- )}
-
-
-
-
-
-
- Use the default value if you don’t understand BIP32 paths.
-
-
-
- {!this.bip32PathIsDefault() && (
-
- )}
-
-
-
-
-
-
-
- );
- };
-
- import = () => {
- const { network, validatePublicKey, onImport } = this.props;
- const { extendedPublicKey, bip32Path } = this.state;
+const ExtendedPublicKeyPublicKeyImporter = ({
+ network,
+ validatePublicKey,
+ onImport,
+}) => {
+ const [bip32Path, setBip32Path] = useState(DEFAULT_BIP32_PATH);
+ const [bip32PathError, setBip32PathError] = useState("");
+ const [extendedPublicKey, setExtendedPublicKey] = useState("");
+ const [extendedPublicKeyError, setExtendedPublicKeyError] = useState("");
+ const [conversionMessage, setConversionMessage] = useState("");
+
+ const importData = () => {
const publicKey = deriveChildPublicKey(
extendedPublicKey,
bip32Path,
@@ -116,56 +33,43 @@ class ExtendedPublicKeyPublicKeyImporter extends React.Component {
const error = validatePublicKey(publicKey);
if (error) {
- this.setState({
- bip32PathError: error,
- });
+ setBip32PathError(error);
} else {
onImport({ publicKey, bip32Path });
}
};
- hasBIP32PathError = () => {
- const { bip32PathError } = this.state;
+ const hasBIP32PathError = () => {
return bip32PathError !== "";
};
- hasExtendedPublicKeyError = () => {
- const { extendedPublicKeyError } = this.state;
+ const hasExtendedPublicKeyError = () => {
return extendedPublicKeyError !== "";
};
- hasError = () => this.hasBIP32PathError() || this.hasExtendedPublicKeyError();
+ const hasError = () => hasBIP32PathError() || hasExtendedPublicKeyError();
- handleBIP32PathChange = (event) => {
+ const handleBIP32PathChange = (event) => {
const nextBIP32Path = event.target.value;
const error = validateBIP32Path(nextBIP32Path, {
mode: "unhardened",
});
- this.setState({
- bip32Path: nextBIP32Path,
- bip32PathError: error ?? "",
- });
+ setBip32Path(nextBIP32Path);
+ setBip32PathError(error ?? "");
};
- bip32PathIsDefault = () => {
- const { bip32Path } = this.state;
+ const bip32PathIsDefault = () => {
return bip32Path === DEFAULT_BIP32_PATH;
};
- resetBIP32Path = () => {
- this.setState({
- bip32Path: DEFAULT_BIP32_PATH,
- bip32PathError: "",
- });
+ const resetBIP32Path = () => {
+ setBip32Path(DEFAULT_BIP32_PATH);
+ setBip32PathError("");
};
- handleExtendedPublicKeyChange = (event) => {
- const { network } = this.props;
-
- const extendedPublicKey = event.target.value;
-
+ const handleExtendedPublicKeyChange = (event) => {
const networkError = validateExtendedPublicKeyForNetwork(
extendedPublicKey,
network
@@ -178,11 +82,10 @@ class ExtendedPublicKeyPublicKeyImporter extends React.Component {
network === "testnet" ? "tpub" : "xpub"
);
} catch (error) {
- this.setState({
- extendedPublicKey,
- extendedPublicKeyError: error.message,
- conversionMessage: "",
- });
+ setExtendedPublicKey(event.target.value);
+ setExtendedPublicKeyError(error.message);
+ setConversionMessage("");
+
return;
}
}
@@ -192,28 +95,94 @@ class ExtendedPublicKeyPublicKeyImporter extends React.Component {
network
);
if (validationError !== "") {
- this.setState({
- extendedPublicKey,
- extendedPublicKeyError: validationError,
- conversionMessage: "",
- });
+ setExtendedPublicKey(event.target.value);
+ setExtendedPublicKeyError(validationError);
+ setConversionMessage("");
+
return;
}
- const conversionMessage =
+ const newConversionMessage =
actualExtendedPublicKey === extendedPublicKey
? ""
: `Your extended public key has been converted from ${extendedPublicKey.slice(
0,
4
)} to ${actualExtendedPublicKey.slice(0, 4)}`;
-
- this.setState({
- extendedPublicKey: actualExtendedPublicKey,
- extendedPublicKeyError: "",
- conversionMessage,
- });
+ setExtendedPublicKey(actualExtendedPublicKey);
+ setExtendedPublicKeyError("");
+ setConversionMessage(newConversionMessage);
};
-}
+
+ return (
+
+
+
+
+ {conversionMessage !== "" && (
+
+
+ {conversionMessage}, this may indicate an invalid network setting,
+ if so correct setting, remove key and try again.
+
+
+ )}
+
+
+
+
+
+
+ Use the default value if you don’t understand BIP32 paths.
+
+
+
+ {!bip32PathIsDefault() && (
+
+ )}
+
+
+
+
+
+
+
+ );
+};
ExtendedPublicKeyPublicKeyImporter.propTypes = {
network: PropTypes.string.isRequired,
diff --git a/src/components/CreateAddress/HardwareWalletPublicKeyImporter.jsx b/src/components/CreateAddress/HardwareWalletPublicKeyImporter.jsx
index 15cf0c18..8c4a109b 100644
--- a/src/components/CreateAddress/HardwareWalletPublicKeyImporter.jsx
+++ b/src/components/CreateAddress/HardwareWalletPublicKeyImporter.jsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useCallback, useState } from "react";
import PropTypes from "prop-types";
import {
UNSUPPORTED,
@@ -16,34 +16,102 @@ import { Button, TextField, FormHelperText, Box, Grid } from "@mui/material";
import InteractionMessages from "../InteractionMessages";
-class HardwareWalletPublicKeyImporter extends React.Component {
- constructor(props) {
- super(props);
- this.state = {
- bip32Path: props.defaultBIP32Path,
- publicKeyError: "",
- bip32PathError: "",
- status: this.interaction().isSupported() ? PENDING : UNSUPPORTED,
- };
- }
-
- interaction = () => {
- const { network, method, defaultBIP32Path } = this.props;
- const { bip32Path } = this.state;
+const HardwareWalletPublicKeyImporter = ({
+ enableChangeMethod,
+ disableChangeMethod,
+ validatePublicKey,
+ onImport,
+ network,
+ method,
+ defaultBIP32Path,
+}) => {
+ const [bip32Path, setBip32Path] = useState(defaultBIP32Path);
+ const [bip32PathError, setBip32PathError] = useState("");
+ const [publicKeyError, setPublicKeyError] = useState("");
+
+ const interaction = useCallback(() => {
return ExportPublicKey({
network,
keystore: method,
bip32Path: bip32Path ?? defaultBIP32Path,
});
+ }, [network, method, bip32Path]);
+
+ const [status, setStatus] = useState(
+ interaction().isSupported() ? PENDING : UNSUPPORTED
+ );
+
+ const importData = async () => {
+ disableChangeMethod();
+
+ setPublicKeyError("");
+ setStatus(ACTIVE);
+
+ try {
+ const publicKey = await interaction().run();
+ const error = validatePublicKey(publicKey);
+
+ if (error) {
+ setPublicKeyError(error);
+ setStatus(PENDING);
+ } else {
+ onImport({ publicKey, bip32Path });
+ }
+ } catch (e) {
+ // eslint-disable-next-line no-console
+ console.error(e);
+ setPublicKeyError(e.message);
+ setStatus(PENDING);
+ }
+
+ enableChangeMethod();
};
- render = () => {
- const { status, bip32Path, publicKeyError } = this.state;
- const interaction = this.interaction();
+ const hasBIP32PathError = () => {
+ return (
+ bip32PathError !== "" ||
+ interaction().hasMessagesFor({
+ state: status,
+ level: ERROR,
+ code: "bip32",
+ })
+ );
+ };
+
+ const checkBip32PathError = () => {
+ if (bip32PathError !== "") {
+ return bip32PathError;
+ }
+ return interaction().messageTextFor({
+ state: status,
+ level: ERROR,
+ code: "bip32",
+ });
+ };
+
+ const handleBIP32PathChange = (event) => {
+ const nextBIP32Path = event.target.value;
+ const error = validateBIP32Path(nextBIP32Path);
+
+ setBip32Path(nextBIP32Path);
+ setBip32PathError(error ?? "");
+ };
+
+ const bip32PathIsDefault = () => {
+ return bip32Path === defaultBIP32Path;
+ };
+
+ const resetBIP32Path = () => {
+ setBip32Path(defaultBIP32Path);
+ setBip32PathError("");
+ };
+
+ const renderHardWareWalletPublicKeyImporter = () => {
+ const newInteraction = interaction();
if (status === UNSUPPORTED) {
return (
- {interaction.messageTextFor({ status })}
+ {newInteraction.messageTextFor({ status })}
);
}
@@ -56,19 +124,19 @@ class HardwareWalletPublicKeyImporter extends React.Component {
label="BIP32 Path"
value={bip32Path}
variant="standard"
- onChange={this.handleBIP32PathChange}
+ onChange={handleBIP32PathChange}
disabled={status !== PENDING}
- error={this.hasBIP32PathError()}
- helperText={this.bip32PathError()}
+ error={hasBIP32PathError()}
+ helperText={checkBip32PathError()}
/>