Conditionally render custom denom input

components/forms/CreateTxForm/MsgForm/MsgExecuteContractForm.tsx

@@ -168,21 +168,23 @@ const MsgExecuteContractForm = ({
           }}
         />
       </div>
-      <div className="form-item">
-        <Input
-          label="Custom denom"
-          name="custom-denom"
-          value={customDenom}
-          onChange={({ target }) => setCustomDenom(target.value)}
-          placeholder={
-            selectedDenom.value === customDenomOption.value
-              ? "Enter custom denom"
-              : "Select Custom denom above"
-          }
-          disabled={selectedDenom.value !== customDenomOption.value}
-          error={customDenomError}
-        />
-      </div>
+      {selectedDenom.value === customDenomOption.value ? (
+        <div className="form-item">
+          <Input
+            label="Custom denom"
+            name="custom-denom"
+            value={customDenom}
+            onChange={({ target }) => setCustomDenom(target.value)}
+            placeholder={
+              selectedDenom.value === customDenomOption.value
+                ? "Enter custom denom"
+                : "Select Custom denom above"
+            }
+            disabled={selectedDenom.value !== customDenomOption.value}
+            error={customDenomError}
+          />
+        </div>
+      ) : null}
       <div className="form-item">
         <Input
           type="number"

components/forms/CreateTxForm/MsgForm/MsgInstantiateContract2Form.tsx

@@ -244,21 +244,23 @@ const MsgInstantiateContract2Form = ({
           }}
         />
       </div>
-      <div className="form-item">
-        <Input
-          label="Custom denom"
-          name="custom-denom"
-          value={customDenom}
-          onChange={({ target }) => setCustomDenom(target.value)}
-          placeholder={
-            selectedDenom.value === customDenomOption.value
-              ? "Enter custom denom"
-              : "Select Custom denom above"
-          }
-          disabled={selectedDenom.value !== customDenomOption.value}
-          error={customDenomError}
-        />
-      </div>
+      {selectedDenom.value === customDenomOption.value ? (
+        <div className="form-item">
+          <Input
+            label="Custom denom"
+            name="custom-denom"
+            value={customDenom}
+            onChange={({ target }) => setCustomDenom(target.value)}
+            placeholder={
+              selectedDenom.value === customDenomOption.value
+                ? "Enter custom denom"
+                : "Select Custom denom above"
+            }
+            disabled={selectedDenom.value !== customDenomOption.value}
+            error={customDenomError}
+          />
+        </div>
+      ) : null}
       <div className="form-item">
         <Input
           type="number"

components/forms/CreateTxForm/MsgForm/MsgInstantiateContractForm.tsx

@@ -209,21 +209,23 @@ const MsgInstantiateContractForm = ({
           }}
         />
       </div>
-      <div className="form-item">
-        <Input
-          label="Custom denom"
-          name="custom-denom"
-          value={customDenom}
-          onChange={({ target }) => setCustomDenom(target.value)}
-          placeholder={
-            selectedDenom.value === customDenomOption.value
-              ? "Enter custom denom"
-              : "Select Custom denom above"
-          }
-          disabled={selectedDenom.value !== customDenomOption.value}
-          error={customDenomError}
-        />
-      </div>
+      {selectedDenom.value === customDenomOption.value ? (
+        <div className="form-item">
+          <Input
+            label="Custom denom"
+            name="custom-denom"
+            value={customDenom}
+            onChange={({ target }) => setCustomDenom(target.value)}
+            placeholder={
+              selectedDenom.value === customDenomOption.value
+                ? "Enter custom denom"
+                : "Select Custom denom above"
+            }
+            disabled={selectedDenom.value !== customDenomOption.value}
+            error={customDenomError}
+          />
+        </div>
+      ) : null}
       <div className="form-item">
         <Input
           type="number"

components/forms/CreateTxForm/MsgForm/MsgSendForm.tsx

@@ -133,21 +133,23 @@ const MsgSendForm = ({ fromAddress, setMsgGetter, deleteMsg }: MsgSendFormProps)
           }}
         />
       </div>
-      <div className="form-item">
-        <Input
-          label="Custom denom"
-          name="custom-denom"
-          value={customDenom}
-          onChange={({ target }) => setCustomDenom(target.value)}
-          placeholder={
-            selectedDenom.value === customDenomOption.value
-              ? "Enter custom denom"
-              : "Select Custom denom above"
-          }
-          disabled={selectedDenom.value !== customDenomOption.value}
-          error={customDenomError}
-        />
-      </div>
+      {selectedDenom.value === customDenomOption.value ? (
+        <div className="form-item">
+          <Input
+            label="Custom denom"
+            name="custom-denom"
+            value={customDenom}
+            onChange={({ target }) => setCustomDenom(target.value)}
+            placeholder={
+              selectedDenom.value === customDenomOption.value
+                ? "Enter custom denom"
+                : "Select Custom denom above"
+            }
+            disabled={selectedDenom.value !== customDenomOption.value}
+            error={customDenomError}
+          />
+        </div>
+      ) : null}
       <div className="form-item">
         <Input
           type="number"