fix: support undefined execute msg

CHANGELOG.md

@@ -95,6 +95,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Bug fixes
 
+- [#522](https://github.com/alleslabs/celatone-frontend/pull/522) Fix to support undefined execute msg
 - [#520](https://github.com/alleslabs/celatone-frontend/pull/520) Fix update instantiated info height data and handle genesis height case
 - [#518](https://github.com/alleslabs/celatone-frontend/pull/518) Fix contract migration remark data
 - [#511](https://github.com/alleslabs/celatone-frontend/pull/511) Fix tx relation selector incorrect option

src/lib/components/ContractCmdButton.tsx

@@ -15,7 +15,8 @@ export const ContractCmdButton = ({
     borderRadius="16px"
     fontWeight={400}
     onClick={onClickCmd}
+    color={cmd ? "text.main" : "text.disabled"}
   >
-    {cmd}
+    {cmd || "undefined"}
   </Button>
 );

src/lib/components/action-msg/SingleMsg.tsx

@@ -24,7 +24,7 @@ export interface SingleMsgProps {
   type: string;
   text1?: string;
   tokens?: Token[];
-  tags?: string[];
+  tags?: Option<string>[];
   length?: number;
   text2?: string;
   link1?: LinkElement;
@@ -64,9 +64,14 @@ export const SingleMsg = ({
         />
       ))}
       {/* Tags  */}
-      {tags?.map((tag: string, index: number) => (
-        <Tag variant="gray" size="sm" key={index.toString() + tag}>
-          {snakeCase(tag) || tag}
+      {tags?.map((tag, index: number) => (
+        <Tag
+          variant="gray"
+          size="sm"
+          key={index.toString() + tag}
+          color={tag ? "text.main" : "text.disabled"}
+        >
+          {tag ? snakeCase(tag) : "undefined"}
         </Tag>
       ))}
       {/* Tag left over */}

src/lib/hooks/useExecuteCmds.ts

@@ -28,12 +28,14 @@ export const useExecuteCmds = (contractAddress: ContractAddr) => {
     onError: (e) => {
       if (e.message.includes("contract: ")) {
         setExecCmds([]);
-      } else {
+      } else if (e.message.includes("Error parsing into type")) {
         const executeCmds: string[] = [];
         Array.from(e.message?.matchAll(/`(.*?)`/g) || [])
           .slice(1)
           .forEach((match) => executeCmds.push(match[1]));
         setExecCmds(executeCmds.map((cmd) => [cmd, `{"${cmd}": {}}`]));
+      } else {
+        setExecCmds([["", "{}"]]);
       }
     },
   });

src/lib/styles/theme/components/button.ts

@@ -13,7 +13,7 @@ const primaryBg = "primary.background";
 const accentBg = "accent.background";
 const accentMain = "accent.main";
 const accentDarker = "accent.darker";
-const borderDefualt = "1px solid";
+const borderDefault = "1px solid";
 const errorDark = "error.dark";
 const secondaryBg = "secondary.background";
 
@@ -133,7 +133,7 @@ export const Button: ComponentStyleConfig = {
     "outline-primary": CURR_THEME.button?.outlinePrimary
       ? generateStyle({
           basic: {
-            border: borderDefualt,
+            border: borderDefault,
             borderColor: CURR_THEME.button.outlinePrimary.borderColor,
             color: CURR_THEME.button.outlinePrimary.color,
             "> div": {
@@ -144,7 +144,7 @@ export const Button: ComponentStyleConfig = {
             },
           },
           disabled: {
-            border: borderDefualt,
+            border: borderDefault,
             borderColor: CURR_THEME.button.outlinePrimary.disabledBorderColor,
             color: CURR_THEME.button.outlinePrimary.disabledColor,
             "& span": {
@@ -156,7 +156,7 @@ export const Button: ComponentStyleConfig = {
         })
       : generateStyle({
           basic: {
-            border: borderDefualt,
+            border: borderDefault,
             borderColor: primaryLight,
             color: primaryLight,
             "> div": {
@@ -167,7 +167,7 @@ export const Button: ComponentStyleConfig = {
             },
           },
           disabled: {
-            border: borderDefualt,
+            border: borderDefault,
             borderColor: gray700,
             color: gray600,
             "> svg": {
@@ -179,15 +179,15 @@ export const Button: ComponentStyleConfig = {
         }),
     "outline-gray": generateStyle({
       basic: {
-        border: borderDefualt,
+        border: borderDefault,
         borderColor: gray600,
         color: "text.dark",
         "> svg": {
           color: "text.dark",
         },
       },
       disabled: {
-        border: borderDefualt,
+        border: borderDefault,
         borderColor: gray700,
         color: gray600,
         "> svg": {
@@ -199,7 +199,7 @@ export const Button: ComponentStyleConfig = {
     }),
     "outline-accent": generateStyle({
       basic: {
-        border: borderDefualt,
+        border: borderDefault,
         borderColor: accentBg,
         color: accentMain,
         "> svg": {
@@ -218,7 +218,7 @@ export const Button: ComponentStyleConfig = {
     }),
     "command-button": generateStyle({
       basic: {
-        border: borderDefualt,
+        border: borderDefault,
         borderColor: accentDarker,
         color: "text.main",
       },

src/lib/utils/executeTags.ts

@@ -1,4 +1,4 @@
-import type { DetailExecute, Message } from "lib/types";
+import type { DetailExecute, Message, Option } from "lib/types";
 
 /**
  * Returns execute tags to be displayed.
@@ -14,11 +14,11 @@ import type { DetailExecute, Message } from "lib/types";
 export const getExecuteMsgTags = (
   messages: Message[],
   max: number
-): string[] => {
+): Option<string>[] => {
   const executeMessages = messages.filter(
     (message) => message.type === "/cosmwasm.wasm.v1.MsgExecuteContract"
   );
-  const tags = [];
+  const tags: Option<string>[] = [];
   for (let i = 0; i < max; i += 1) {
     if (executeMessages[i]) {
       const msg = executeMessages[i].detail as DetailExecute;