From b9fd4e942ffef365f417fa62b19aeb8ce55175d3 Mon Sep 17 00:00:00 2001 From: WaDadidou <50441633+WaDadidou@users.noreply.github.com> Date: Thu, 21 Nov 2024 02:21:10 -0500 Subject: [PATCH] feat(multisig): Add feedbacks to creation form (#1354) * fix(multisig): Enhance creation form - Add invalidation cases - Fix errors displaying for addresses - Add loader for await getCosmosAccount usage - Properly disable PrimaryButton * fix(multisig): Prevent broken controls by making some controls onSubmit * feat(multisig): Add address network control * chore(feed): rename zod object * fix(multisig): Rollback: Just add controls to the form from MultisigCreateScreen, add loader * fix(multisig): Add missing throw * chore(multisig): remove unused code * chore(multisig): Simplify error * chore(multisig): rename function --- .../screens/Multisig/MultisigCreateScreen.tsx | 68 +++++++++++++------ 1 file changed, 48 insertions(+), 20 deletions(-) diff --git a/packages/screens/Multisig/MultisigCreateScreen.tsx b/packages/screens/Multisig/MultisigCreateScreen.tsx index aefff62b4b..5b17629c7d 100644 --- a/packages/screens/Multisig/MultisigCreateScreen.tsx +++ b/packages/screens/Multisig/MultisigCreateScreen.tsx @@ -62,6 +62,7 @@ export const MultisigCreateScreen = () => { emptyPubKeyGroup(), emptyPubKeyGroup(), ]); + const [isLoading, setLoading] = useState(false); const navigation = useAppNavigation(); const signatureRequiredValue = watch("signatureRequired"); useEffect(() => { @@ -118,39 +119,65 @@ export const MultisigCreateScreen = () => { parseInt(signatureRequired, 10), ); - const res = await multisigClient.CreateOrJoinMultisig({ - authToken, - chainId: selectedNetwork.chainId, - bech32Prefix: selectedNetwork.addressPrefix, - multisigPubkeyJson: JSON.stringify(multisigPubkey), - name, - }); + try { + const res = await multisigClient.CreateOrJoinMultisig({ + authToken: { ...authToken, userAddress: "aeae" }, + chainId: selectedNetwork.chainId, + bech32Prefix: selectedNetwork.addressPrefix, + multisigPubkeyJson: JSON.stringify(multisigPubkey), + name, + }); - navigation.navigate("MultisigWalletDashboard", { - id: getUserId(selectedNetwork?.id, res.multisigAddress), - }); + navigation.navigate("MultisigWalletDashboard", { + id: getUserId(selectedNetwork?.id, res.multisigAddress), + }); + } catch (err) { + throw new Error(`Failed to create multisig: ${err}`); + } finally { + setLoading(false); + } }; - const onAddressChange = async (index: number, value: string) => { + const handleAddressChange = async (index: number, value: string) => { + if (!selectedNetwork) { + throw new Error("No network selected"); + } + if (selectedNetwork.kind !== NetworkKind.Cosmos) { + throw new Error("Only Cosmos networks are supported"); + } + const resValAddress = validateAddress(value); if (resValAddress !== true) return "Invalid address"; + if (!value.includes(selectedNetwork.addressPrefix)) { + return `Only ${selectedNetwork.displayName} address is allowed`; + } + const address = value; if (addressIndexes.find((a, i) => a.address === address && i !== index)) return "This address is already used in this form."; const tempPubkeys = [...addressIndexes]; - const account = await getCosmosAccount( - getUserId(selectedNetwork?.id, address), - ); - if (!account?.pubkey) { - return "Account has no public key on chain, this address will need to send a transaction before it can be added to a multisig."; + + try { + setLoading(true); + const account = await getCosmosAccount( + getUserId(selectedNetwork?.id, address), + ); + + if (!account?.pubkey) { + return "Account has no public key on chain, this address will need to send a transaction before it can be added to a multisig."; + } + tempPubkeys[index].address = address; + tempPubkeys[index].compressedPubkey = account.pubkey.value; + setAddressIndexes(tempPubkeys); + } catch { + return "Failed to get Cosmos account"; + } finally { + setLoading(false); } - tempPubkeys[index].address = address; - tempPubkeys[index].compressedPubkey = account.pubkey.value; - setAddressIndexes(tempPubkeys); }; return ( @@ -232,7 +259,7 @@ export const MultisigCreateScreen = () => { label={"Address #" + (index + 1)} rules={{ required: true, - validate: (value) => onAddressChange(index, value), + validate: (value) => handleAddressChange(index, value), }} placeHolder="Account address" iconSVG={walletInputSVG} @@ -350,6 +377,7 @@ export const MultisigCreateScreen = () => { wrapWithFeedback(() => onSubmit(arg))(), )} loader + isLoading={isLoading} />