Refactor/past txs link (Merge #63 first)

CHANGELOG.md

@@ -39,6 +39,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Features
 
+- [#68](https://github.com/alleslabs/celatone-frontend/pull/63) Refactor past txs link props and make sure navigation works
 - [#63](https://github.com/alleslabs/celatone-frontend/pull/63) Add code id explorer link and code table row navigation
 - [#67](https://github.com/alleslabs/celatone-frontend/pull/67) Add Public Codes shortcut to sidebar and add Quick Actions section
 - [#66](https://github.com/alleslabs/celatone-frontend/pull/66) Add code details data loader including code info and contract instances

src/lib/components/ExplorerLink.tsx

@@ -11,9 +11,15 @@ import { truncate } from "lib/utils";
 
 import { Copier } from "./Copier";
 
+export type LinkType =
+  | "tx_hash"
+  | "user_address"
+  | "contract_address"
+  | "code_id";
+
 interface ExplorerLinkProps extends BoxProps {
   value: string;
-  type?: "tx_hash" | "user_address" | "contract_address" | "code_id";
+  type?: LinkType;
   copyValue?: string;
   canCopyWithHover?: boolean;
   isReadOnly?: boolean;

src/lib/pages/pastTxs/components/MsgDetail.tsx

@@ -35,7 +35,7 @@ interface MsgDetailProps {
   success: boolean;
 }
 
-const MsgDetail = ({ msg, success }: MsgDetailProps) => {
+export const MsgDetail = ({ msg, success }: MsgDetailProps) => {
   const [button, setButton] = useState<"redo" | "resend" | "">("");
   const [showButton, setShowButton] = useState(false);
   const { currentChainName } = useWallet();
@@ -56,14 +56,20 @@ const MsgDetail = ({ msg, success }: MsgDetailProps) => {
             type: "Execute",
             tags: [Object.keys(detailExecute.msg)[0]],
             text2: "on",
-            link1: contractInfo?.name || detailExecute.contract,
-            link1Copy: detailExecute.contract,
+            link1: {
+              type: "contract_address",
+              value: contractInfo?.name || detailExecute.contract,
+              copyValue: detailExecute.contract,
+            },
           }
         : {
             type: "Failed",
             text1: "to execute message from",
-            link1: contractInfo?.name || detailExecute.contract,
-            link1Copy: detailExecute.contract,
+            link1: {
+              type: "contract_address",
+              value: contractInfo?.name || detailExecute.contract,
+              copyValue: detailExecute.contract,
+            },
           };
       return <SingleMsg {...singleMsgProps} />;
     }
@@ -76,7 +82,10 @@ const MsgDetail = ({ msg, success }: MsgDetailProps) => {
         ? {
             type: "Upload",
             text1: "Wasm to Code ID",
-            text3: msgUpload.id?.toString(),
+            link1: {
+              type: "code_id",
+              value: msgUpload.id?.toString(),
+            },
           }
         : {
             type: "Failed",
@@ -95,7 +104,10 @@ const MsgDetail = ({ msg, success }: MsgDetailProps) => {
           <SingleMsg
             type="Failed"
             text1="to instantiate contract from Code ID"
-            text2={msgInstantiate.codeId.toString()}
+            link1={{
+              type: "code_id",
+              value: msgInstantiate.codeId.toString(),
+            }}
           />
         );
       }
@@ -104,9 +116,16 @@ const MsgDetail = ({ msg, success }: MsgDetailProps) => {
         <SingleMsg
           type="Instantiate"
           text1="contract"
-          link1={contractInfo?.name || msgInstantiate.contractAddress}
-          link1Copy={msgInstantiate.contractAddress}
-          text3={`from Code ID ${msgInstantiate.codeId.toString()}`}
+          link1={{
+            type: "contract_address",
+            value: contractInfo?.name || msgInstantiate.contractAddress,
+            copyValue: msgInstantiate.contractAddress,
+          }}
+          text3="from Code ID"
+          link2={{
+            type: "code_id",
+            value: msgInstantiate.codeId.toString(),
+          }}
         />
       );
     }
@@ -130,7 +149,10 @@ const MsgDetail = ({ msg, success }: MsgDetailProps) => {
           <SingleMsg
             type="Failed"
             text1="to send assets to"
-            link2={msgSend.toAddress}
+            link2={{
+              type: "contract_address",
+              value: msgSend.toAddress,
+            }}
           />
         );
       }
@@ -139,7 +161,10 @@ const MsgDetail = ({ msg, success }: MsgDetailProps) => {
           type="Send"
           bolds={coins}
           text2="to"
-          link2={msgSend.toAddress}
+          link2={{
+            type: "contract_address",
+            value: msgSend.toAddress,
+          }}
         />
       );
     }
@@ -267,5 +292,3 @@ const MsgDetail = ({ msg, success }: MsgDetailProps) => {
     </Flex>
   );
 };
-
-export default MsgDetail;

src/lib/pages/pastTxs/components/PastTxTable.tsx

@@ -46,7 +46,7 @@ import {
   onClickRedo,
 } from "lib/utils";
 
-import MsgDetail from "./MsgDetail";
+import { MsgDetail } from "./MsgDetail";
 import type { MultipleMsgProps } from "./MultipleMsg";
 import { MultipleMsg } from "./MultipleMsg";
 import type { SingleMsgProps } from "./SingleMsg";
@@ -133,7 +133,10 @@ const PastTxTable = ({ element }: PastTxTableProps) => {
         ? {
             type: "Upload",
             text1: "Wasm to Code ID",
-            text3: uploadMsgs[0].id.toString(),
+            link1: {
+              type: "code_id",
+              value: uploadMsgs[0].id.toString(),
+            },
           }
         : {
             type: "Failed",
@@ -177,14 +180,24 @@ const PastTxTable = ({ element }: PastTxTableProps) => {
         ? {
             type: "Instantiate",
             text1: "contract",
-            link1: contractInfo?.name || instantiateMsgs[0].contractAddress,
-            link1Copy: instantiateMsgs[0].contractAddress,
-            text3: `from Code ID ${instantiateMsgs[0].codeId.toString()}`,
+            link1: {
+              type: "contract_address",
+              value: contractInfo?.name || instantiateMsgs[0].contractAddress,
+              copyValue: instantiateMsgs[0].contractAddress,
+            },
+            text3: "from Code ID",
+            link2: {
+              type: "code_id",
+              value: instantiateMsgs[0].codeId.toString(),
+            },
           }
         : {
             type: "Failed",
             text1: "to instantiate contract from Code ID",
-            text3: instantiateMsgs[0].codeId.toString(),
+            link1: {
+              type: "code_id",
+              value: instantiateMsgs[0].codeId.toString(),
+            },
           };
       return <SingleMsg {...singleMsgProps} />;
     },
@@ -238,14 +251,20 @@ const PastTxTable = ({ element }: PastTxTableProps) => {
             tags,
             length: executeMsgs.length,
             text2: "on",
-            link1: contractInfo?.name || executeMsgs[0].contract,
-            link1Copy: executeMsgs[0].contract,
+            link1: {
+              type: "contract_address",
+              value: contractInfo?.name || executeMsgs[0].contract,
+              copyValue: executeMsgs[0].contract,
+            },
           }
         : {
             type: "Failed",
             text1: "to execute message from",
-            link1: contractInfo?.name || executeMsgs[0].contract,
-            link1Copy: executeMsgs[0].contract,
+            link1: {
+              type: "contract_address",
+              value: contractInfo?.name || executeMsgs[0].contract,
+              copyValue: executeMsgs[0].contract,
+            },
           };
       return <SingleMsg {...singleMsgProps} />;
     },
@@ -294,7 +313,10 @@ const PastTxTable = ({ element }: PastTxTableProps) => {
           type="Send"
           bolds={coins}
           text2="to"
-          link1={sendMsgs[0].toAddress}
+          link1={{
+            type: "contract_address",
+            value: sendMsgs[0].toAddress,
+          }}
         />
       );
     },

src/lib/pages/pastTxs/components/SingleMsg.tsx

@@ -1,20 +1,25 @@
 import { Tag, Text, Box, Flex } from "@chakra-ui/react";
 import { snakeCase } from "snake-case";
 
+import type { LinkType } from "lib/components/ExplorerLink";
 import { ExplorerLink } from "lib/components/ExplorerLink";
 
+interface LinkElement {
+  type: LinkType;
+  value: string;
+  copyValue?: string;
+}
+
 export interface SingleMsgProps {
   type: string;
   text1?: string;
   bolds?: Array<string>;
   tags?: Array<string>;
   length?: number;
   text2?: string;
-  link1?: string;
-  // TODO - Change this
-  link1Copy?: string;
+  link1?: LinkElement;
   text3?: string;
-  link2?: string;
+  link2?: LinkElement;
 }
 
 export const SingleMsg = ({
@@ -25,22 +30,9 @@ export const SingleMsg = ({
   length,
   text2,
   link1,
-  link1Copy,
   text3,
   link2,
 }: SingleMsgProps) => {
-  const linkType = (text: string) => {
-    if (text.length === 63) {
-      return "contract_address";
-    }
-    if (text.length === 64) {
-      return "tx_hash";
-    }
-    if (text.length === 43) {
-      return "user_address";
-    }
-    return undefined;
-  };
   return (
     <Flex gap={1} alignItems="center">
       {type} {text1}
@@ -66,28 +58,32 @@ export const SingleMsg = ({
       )}
       {/* Length  */}
       {!tags && length && <Tag>{length}</Tag>}
-      {/* Link */}
+      {/* Text2 */}
       {text2}
+      {/* Link */}
       {link1 && (
         <ExplorerLink
-          value={link1}
-          copyValue={link1Copy}
-          type={linkType(link1Copy || link1)}
+          value={link1.value}
+          copyValue={link1.copyValue}
+          type={link1.type}
           canCopyWithHover
           // Should ellipse when it is not tx hash, contract addr, user addr
-          textFormat={linkType(link1) ? "truncate" : "ellipsis"}
+          textFormat={link1.type !== "code_id" ? "truncate" : "ellipsis"}
         />
       )}
-      {/* Text3 */} {text3} {/* Link with copy */}
+      {/* Text3 */}
+      {text3}
+      {/* Link2 */}
       {link2 && (
         <ExplorerLink
-          value={link2}
-          type={linkType(link2)}
+          value={link2.value}
+          copyValue={link2.copyValue}
+          type={link2.type}
           canCopyWithHover
           // Should ellipse when it is not tx hash, contract addr, user addr
-          textFormat={linkType(link2) ? "truncate" : "ellipsis"}
+          textFormat={link2.type !== "code_id" ? "truncate" : "ellipsis"}
         />
-      )}{" "}
+      )}
     </Flex>
   );
 };