From 08f501f68f64ece5f1768d68fa80f200bfdc2253 Mon Sep 17 00:00:00 2001
From: abefernan <44572727+abefernan@users.noreply.github.com>
Date: Fri, 16 Jun 2023 17:16:18 +0200
Subject: [PATCH] Add empty msgs warning

---
 components/forms/CreateTxForm/index.tsx | 64 ++++++++++++++-----------
 1 file changed, 37 insertions(+), 27 deletions(-)

diff --git a/components/forms/CreateTxForm/index.tsx b/components/forms/CreateTxForm/index.tsx
index 4fead82..0ddd4ff 100644
--- a/components/forms/CreateTxForm/index.tsx
+++ b/components/forms/CreateTxForm/index.tsx
@@ -96,33 +96,39 @@ const CreateTxForm = ({ router, senderAddress, accountOnChain }: CreateTxFormPro
   return (
     <StackableContainer lessPadding>
       <h2>Create New Transaction</h2>
-      {msgTypes.map((msgType, index) => (
-        <MsgForm
-          key={msgKeys[index]}
-          msgType={msgType}
-          senderAddress={senderAddress}
-          setMsgGetter={(msgGetter) => {
-            msgGetters.current = [
-              ...msgGetters.current.slice(0, index),
-              msgGetter,
-              ...msgGetters.current.slice(index + 1),
-            ];
-          }}
-          deleteMsg={() => {
-            msgGetters.current.splice(index, 1);
-            setMsgKeys((oldMsgKeys) => [
-              ...oldMsgKeys.slice(0, index),
-              ...oldMsgKeys.slice(index + 1),
-            ]);
-            setMsgTypes((oldMsgTypes) => {
-              const newMsgTypes: MsgTypeUrl[] = oldMsgTypes.slice();
-              newMsgTypes.splice(index, 1);
-              setGasLimit(gasOfTx(newMsgTypes));
-              return newMsgTypes;
-            });
-          }}
-        />
-      ))}
+      {msgTypes.length ? (
+        msgTypes.map((msgType, index) => (
+          <MsgForm
+            key={msgKeys[index]}
+            msgType={msgType}
+            senderAddress={senderAddress}
+            setMsgGetter={(msgGetter) => {
+              msgGetters.current = [
+                ...msgGetters.current.slice(0, index),
+                msgGetter,
+                ...msgGetters.current.slice(index + 1),
+              ];
+            }}
+            deleteMsg={() => {
+              msgGetters.current.splice(index, 1);
+              setMsgKeys((oldMsgKeys) => [
+                ...oldMsgKeys.slice(0, index),
+                ...oldMsgKeys.slice(index + 1),
+              ]);
+              setMsgTypes((oldMsgTypes) => {
+                const newMsgTypes: MsgTypeUrl[] = oldMsgTypes.slice();
+                newMsgTypes.splice(index, 1);
+                setGasLimit(gasOfTx(newMsgTypes));
+                return newMsgTypes;
+              });
+            }}
+          />
+        ))
+      ) : (
+        <StackableContainer lessMargin lessPadding>
+          <p className="empty-msg-warning">Add at least one message to this transaction</p>
+        </StackableContainer>
+      )}
       <div className="form-item">
         <Input
           type="number"
@@ -188,6 +194,10 @@ const CreateTxForm = ({ router, senderAddress, accountOnChain }: CreateTxFormPro
         p {
           margin-top: 15px;
         }
+        .empty-msg-warning {
+          margin: 0;
+          font-size: 16px;
+        }
         .form-item {
           margin-top: 1.5em;
         }