From 6b182ff1fd693271c0f2b7d68ef77a29a2143b1e Mon Sep 17 00:00:00 2001
From: abefernan <44572727+abefernan@users.noreply.github.com>
Date: Wed, 14 Jun 2023 12:16:27 +0200
Subject: [PATCH 1/3] Add stable generated keys

---
 components/forms/CreateTxForm/index.tsx | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/components/forms/CreateTxForm/index.tsx b/components/forms/CreateTxForm/index.tsx
index f29b0a1..285570e 100644
--- a/components/forms/CreateTxForm/index.tsx
+++ b/components/forms/CreateTxForm/index.tsx
@@ -16,8 +16,6 @@ export interface MsgGetter {
   readonly msg: TxMsg;
 }
 
-const getMsgFormKey = (msgType: MsgType, msg: TxMsg) => JSON.stringify({ msgType, msg });
-
 interface CreateTxFormProps {
   readonly router: NextRouter;
   readonly senderAddress: string;
@@ -29,6 +27,7 @@ const CreateTxForm = ({ router, senderAddress, accountOnChain }: CreateTxFormPro
 
   const [processing, setProcessing] = useState(false);
   const [msgTypes, setMsgTypes] = useState<readonly MsgType[]>([]);
+  const [msgKeys, setMsgKeys] = useState<string[]>([]);
   const msgGetters = useRef<MsgGetter[]>([]);
   const [memo, setMemo] = useState("");
   const [gasLimit, setGasLimit] = useState(gasOfTx([]));
@@ -38,6 +37,7 @@ const CreateTxForm = ({ router, senderAddress, accountOnChain }: CreateTxFormPro
   assert(gasPrice, "gasPrice missing");
 
   const addMsgType = (newMsgType: MsgType) => {
+    setMsgKeys((oldMsgKeys) => [...oldMsgKeys, crypto.randomUUID()]);
     setMsgTypes((oldMsgTypes) => {
       const newMsgTypes = [...oldMsgTypes, newMsgType];
       setGasLimit(gasOfTx(newMsgTypes));
@@ -91,7 +91,7 @@ const CreateTxForm = ({ router, senderAddress, accountOnChain }: CreateTxFormPro
       <h2>Create New Transaction</h2>
       {msgTypes.map((msgType, index) => (
         <MsgForm
-          key={getMsgFormKey(msgType, msgGetters.current[index]?.msg ?? {})}
+          key={msgKeys[index]}
           msgType={msgType}
           senderAddress={senderAddress}
           setMsgGetter={(msgGetter) => {
@@ -103,6 +103,10 @@ const CreateTxForm = ({ router, senderAddress, accountOnChain }: CreateTxFormPro
           }}
           deleteMsg={() => {
             msgGetters.current.splice(index, 1);
+            setMsgKeys((oldMsgKeys) => [
+              ...oldMsgKeys.slice(0, index),
+              ...oldMsgKeys.slice(index + 1),
+            ]);
             setMsgTypes((oldMsgTypes) => {
               const newMsgTypes: MsgType[] = oldMsgTypes.slice();
               newMsgTypes.splice(index, 1);

From 7b7334bee3c35b43b9c7e7e3d477635245273fcd Mon Sep 17 00:00:00 2001
From: abefernan <44572727+abefernan@users.noreply.github.com>
Date: Wed, 14 Jun 2023 12:16:57 +0200
Subject: [PATCH 2/3] Prettier does funny things

---
 components/forms/CreateTxForm/index.tsx | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/components/forms/CreateTxForm/index.tsx b/components/forms/CreateTxForm/index.tsx
index 285570e..cf8b606 100644
--- a/components/forms/CreateTxForm/index.tsx
+++ b/components/forms/CreateTxForm/index.tsx
@@ -148,8 +148,14 @@ const CreateTxForm = ({ router, senderAddress, accountOnChain }: CreateTxFormPro
         <Button label="Add MsgUndelegate" onClick={() => addMsgType("undelegate")} />
         <Button label="Add MsgBeginRedelegate" onClick={() => addMsgType("redelegate")} />
         <Button label="Add MsgWithdrawDelegatorReward" onClick={() => addMsgType("claimRewards")} />
-        <Button label="Add MsgSetWithdrawAddress" onClick={() => addMsgType("setWithdrawAddress")} />
-        <Button label="Add MsgCreateVestingAccount" onClick={() => addMsgType("createVestingAccount")} />
+        <Button
+          label="Add MsgSetWithdrawAddress"
+          onClick={() => addMsgType("setWithdrawAddress")}
+        />
+        <Button
+          label="Add MsgCreateVestingAccount"
+          onClick={() => addMsgType("createVestingAccount")}
+        />
         <Button label="Add MsgTransfer" onClick={() => addMsgType("msgTransfer")} />
       </StackableContainer>
       <Button

From 4b839a6cd5e5d5280f17c7067fc54f958af32838 Mon Sep 17 00:00:00 2001
From: abefernan <44572727+abefernan@users.noreply.github.com>
Date: Wed, 14 Jun 2023 12:24:03 +0200
Subject: [PATCH 3/3] Add missing readonly

---
 components/forms/CreateTxForm/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/forms/CreateTxForm/index.tsx b/components/forms/CreateTxForm/index.tsx
index cf8b606..e861838 100644
--- a/components/forms/CreateTxForm/index.tsx
+++ b/components/forms/CreateTxForm/index.tsx
@@ -27,7 +27,7 @@ const CreateTxForm = ({ router, senderAddress, accountOnChain }: CreateTxFormPro
 
   const [processing, setProcessing] = useState(false);
   const [msgTypes, setMsgTypes] = useState<readonly MsgType[]>([]);
-  const [msgKeys, setMsgKeys] = useState<string[]>([]);
+  const [msgKeys, setMsgKeys] = useState<readonly string[]>([]);
   const msgGetters = useRef<MsgGetter[]>([]);
   const [memo, setMemo] = useState("");
   const [gasLimit, setGasLimit] = useState(gasOfTx([]));