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

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}
             />
           </View>
         </View>