Support json fields and better error handling

content/transactions.json

@@ -172,7 +172,7 @@
     "Fee": "12",
     "SignerQuorum": 3,
     "SignerEntries": {
-      "type": "list",
+      "type": "json",
       "value": [
         {
           "SignerEntry": {

pages/test/[[...slug]].tsx

@@ -83,6 +83,7 @@ const Transaction = () => {
 
     setTxIsLoading(true);
     // setTxIsError(null)
+    try {
       let options = { ...txFields };
 
       options.Destination = selectedDestAccount?.value;
@@ -96,6 +97,22 @@ const Transaction = () => {
             options[field] = undefined; // 👇 💀
           }
         }
+        // handle type: `json`
+        if (typeof _value === "object" && _value.type === "json") {
+          if (typeof _value.value === "object") {
+            options[field] = _value.value as any;
+          } else {
+            try {
+              options[field] = JSON.parse(_value.value);
+            } catch (error) {
+              const message = `Input error for json field '${field}': ${
+                error instanceof Error ? error.message : ""
+              }`;
+              throw Error(message);
+            }
+          }
+        }
+
         // delete unneccesary fields
         if (!options[field]) {
           delete options[field];
@@ -105,9 +122,13 @@ const Transaction = () => {
         TransactionType,
         ...options,
       });
-
+    } catch (error) {
+      console.error(error);
+      if (error instanceof Error) {
+        state.transactionLogs.push({ type: "error", message: error.message });
+      }
+    }
     setTxIsLoading(false);
-    // TODO catch error for UI to show
   }, [
     selectedAccount,
     selectedDestAccount,
@@ -196,6 +217,7 @@ const Transaction = () => {
           {otherFields.map(field => {
             let _value = txFields[field];
             let value = typeof _value === "object" ? _value.value : _value;
+            value = typeof value === "object" ? JSON.stringify(value) : value?.toLocaleString();
             let isCurrency = typeof _value === "object" && _value.type === "currency";
             return (
               <Flex
@@ -208,7 +230,7 @@ const Transaction = () => {
                   {field + (isCurrency ? " (XRP)" : "")}:{" "}
                 </Text>
                 <Input
-                  value={value?.toString()} // TODO handle list maybe
+                  value={value}
                   onChange={e =>
                     setTxFields({
                       ...txFields,

state/actions/sendTransaction.ts

@@ -41,10 +41,10 @@ export const sendTransaction = async (account: IAccount, txOptions: TransactionO
             });
         }
     } catch (err) {
-        console.log(err);
+        console.error(err);
         state.transactionLogs.push({
             type: "error",
-            message: "Something went wrong, try again later.",
+            message: err instanceof Error ? `Error: ${err.message}` : 'Something went wrong, try again later',
         });
     }
 };