refactor: show form in SignMessage when closing modal

src/domains/wallet/components/SignMessage/SignMessage.tsx

@@ -10,7 +10,7 @@ import { Modal } from "app/components/Modal";
 import { TextArea } from "app/components/TextArea";
 import { TransactionDetail } from "app/components/TransactionDetail";
 import { useEnvironmentContext } from "app/contexts";
-import React, { createRef, useState } from "react";
+import React, { createRef, useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 
@@ -19,19 +19,21 @@ type SignMessageProps = {
 	walletId: string;
 	signatoryAddress: string;
 	isOpen: boolean;
-	onClose?: any;
-	onCancel?: any;
+	onClose?: () => void;
+	onCancel?: () => void;
 };
 
 type SignedMessageProps = { message: string; signatory: string; signature: string };
 
+const INITIAL_STATE = {
+	message: "",
+	signatory: "",
+	signature: "",
+};
+
 export const SignMessage = ({ profileId, walletId, signatoryAddress, isOpen, onClose, onCancel }: SignMessageProps) => {
 	const [isSigned, setIsSigned] = useState(false);
-	const [signedMessage, setSignedMessage] = useState<SignedMessageProps>({
-		message: "",
-		signatory: "",
-		signature: "",
-	});
+	const [signedMessage, setSignedMessage] = useState<SignedMessageProps>(INITIAL_STATE);
 
 	const { env } = useEnvironmentContext();
 	const form = useForm({ mode: "onChange" });
@@ -40,6 +42,13 @@ export const SignMessage = ({ profileId, walletId, signatoryAddress, isOpen, onC
 	const { register } = form;
 	const messageRef = createRef();
 
+	useEffect(() => {
+		if (!isOpen) {
+			setSignedMessage(INITIAL_STATE);
+			setIsSigned(false);
+		}
+	}, [isOpen]);
+
 	const handleSubmit = async ({ message, mnemonic }: Record<string, any>) => {
 		const profile = env?.profiles().findById(profileId);
 		const wallet = profile?.wallets().findById(walletId);
@@ -119,7 +128,7 @@ export const SignMessage = ({ profileId, walletId, signatoryAddress, isOpen, onC
 			>
 				<Address address={signedMessage.signatory} />
 			</TransactionDetail>
-			<TransactionDetail border label={t("COMMON.MESSAGE")} className="text-lg">
+			<TransactionDetail border label={t("COMMON.MESSAGE")} className="text-lg break-all">
 				{signedMessage.message}
 			</TransactionDetail>
 			<TransactionDetail border label={t("COMMON.SIGNATURE")}>

src/domains/wallet/components/VerifyMessageStatus/VerifyMessageStatus.tsx

@@ -6,11 +6,11 @@ type Props = {
 	type?: "success" | "error";
 	title?: string;
 	description?: string;
-	onClose?: any;
 	isOpen: boolean;
+	onClose?: () => void;
 };
 
-export const VerifyMessageStatus = ({ title, description, type, onClose, isOpen }: Props) => {
+export const VerifyMessageStatus = ({ title, description, type, isOpen, onClose }: Props) => {
 	const { ConfirmedBanner, MistakeBanner } = images.common;
 	const StatusInfo = type === "success" ? ConfirmedBanner : MistakeBanner;
 

src/domains/wallet/pages/WalletDetails/WalletDetails.tsx

@@ -15,21 +15,21 @@ import { WalletBottomSheetMenu } from "domains/wallet/components/WalletBottomShe
 import { WalletHeader } from "domains/wallet/components/WalletHeader/WalletHeader";
 import { WalletRegistrations } from "domains/wallet/components/WalletRegistrations";
 import { WalletVote } from "domains/wallet/components/WalletVote";
-import React, { useState } from "react";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useHistory } from "react-router-dom";
 
 export const WalletDetails = () => {
 	const [isUpdateWalletName, setIsUpdateWalletName] = useState(false);
 	const [isSigningMessage, setIsSigningMessage] = useState(false);
 	const [isDeleteWallet, setIsDeleteWallet] = useState(false);
-	const [votes, setVotes] = React.useState<Coins.WalletDataCollection>();
-	const [walletData, setWalletData] = React.useState<WalletData>();
+	const [votes, setVotes] = useState<Coins.WalletDataCollection>();
+	const [walletData, setWalletData] = useState<WalletData>();
 	const [isVerifyingMessage, setIsVerifyingMessage] = useState(false);
 
 	const activeProfile = useActiveProfile();
 	const activeWallet = useActiveWallet();
-	const wallets = React.useMemo(() => activeProfile.wallets().values(), [activeProfile]);
+	const wallets = useMemo(() => activeProfile.wallets().values(), [activeProfile]);
 
 	const coinName = activeWallet.coin().manifest().get<string>("name");
 	const networkName = activeWallet.network().name;
@@ -48,7 +48,7 @@ export const WalletDetails = () => {
 	];
 
 	// TODO: Replace logic with sdk
-	const getVotes = React.useCallback(async () => {
+	const getVotes = useCallback(async () => {
 		let response;
 		// catch 404 wallet not found until sdk logic
 		try {
@@ -78,7 +78,7 @@ export const WalletDetails = () => {
 	}, [activeWallet]);
 
 	// TODO: Hacky to access `WalletData` instead of `Wallet`
-	const getWalletData = React.useCallback(async () => {
+	const getWalletData = useCallback(async () => {
 		const data = await activeWallet.coin().client().wallet(activeWallet.address());
 		setWalletData(data);
 	}, [activeWallet]);
@@ -96,15 +96,15 @@ export const WalletDetails = () => {
 		setIsUpdateWalletName(false);
 	};
 
-	React.useEffect(() => {
+	useEffect(() => {
 		getVotes();
 	}, [getVotes]);
 
-	React.useEffect(() => {
+	useEffect(() => {
 		getWalletData();
 	}, [getWalletData]);
 
-	React.useEffect(() => {
+	useEffect(() => {
 		const timer = setInterval(async () => {
 			await activeWallet.syncIdentity();
 			await persist();