fix: refactor pastTxs page, add new messages, change filter action se…

CHANGELOG.md

@@ -39,9 +39,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Features
 
+- [#112](https://github.com/alleslabs/celatone-frontend/pull/112) Refactor past transactions page, support new messages including  Migration, Instantiate2, Update Admin, Clear Admin, and change filter actions to dropdown selection. Add redo modal for instantiate2 and create component for tokens used in past tx page.
 - [#113](https://github.com/alleslabs/celatone-frontend/pull/113) Update admin page ui and wireup
 - [#98](https://github.com/alleslabs/celatone-frontend/pull/98) Add migrate, update admin, clear admin menu on contract list and detail
-- [#121](https://github.com/alleslabs/celatone-frontend/pull/121) Fix code snippet for query axios
 - [#102](https://github.com/alleslabs/celatone-frontend/pull/102) Add quick menu in overview and add highlighted in left sidebar
 - [#125](https://github.com/alleslabs/celatone-frontend/pull/125) Add connect wallet alert in instantiate page
 - [#126](https://github.com/alleslabs/celatone-frontend/pull/126) Add port id copier for IBC port id
@@ -110,6 +110,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Bug fixes
 
+- [#121](https://github.com/alleslabs/celatone-frontend/pull/121) Fix code snippet for query axios
 - [#129](https://github.com/alleslabs/celatone-frontend/pull/129) Fix wallet disconnection on network query change
 - [#124](https://github.com/alleslabs/celatone-frontend/pull/124) Fix public project query, display project image in contract details page
 - [#125](https://github.com/alleslabs/celatone-frontend/pull/125) Fix incorrect CosmJS execute snippet

src/lib/components/Copier.tsx

@@ -8,13 +8,15 @@ interface CopierProps {
   ml?: string;
   className?: string;
   display?: LayoutProps["display"];
+  copyLabel?: string;
 }
 
 export const Copier = ({
   value,
   ml = "8px",
   className,
   display = "flex",
+  copyLabel = "Copied!",
 }: CopierProps) => {
   const { onCopy, hasCopied, setValue } = useClipboard(value);
 
@@ -24,7 +26,7 @@ export const Copier = ({
     <Tooltip
       hasArrow
       isOpen={hasCopied}
-      label="Copied!"
+      label={copyLabel}
       placement="top"
       arrowSize={8}
       bg="primary.dark"

src/lib/components/EstimatedFeeRender.tsx

@@ -21,5 +21,5 @@ export const EstimatedFeeRender = ({
 
   if (!coin) return <>--</>;
 
-  return <>{formatBalanceWithDenom(coin)}</>;
+  return <>{formatBalanceWithDenom({ coin, precision: 6 })}</>;
 };

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

@@ -0,0 +1,38 @@
+import type { AllTransaction, PastTransaction } from "lib/types";
+import { ActionMsgType } from "lib/types";
+import { extractMsgType } from "lib/utils";
+
+import { MultipleActionsMsg } from "./MultipleActionsMsg";
+import { SingleActionMsg } from "./SingleActionMsg";
+import { SingleMsg } from "./SingleMsg";
+
+interface RenderActionMessagesProps {
+  transaction: AllTransaction | PastTransaction;
+}
+
+export const RenderActionMessages = ({
+  transaction,
+}: RenderActionMessagesProps) => {
+  if (transaction.actionMsgType === ActionMsgType.SINGLE_ACTION_MSG) {
+    return (
+      <SingleActionMsg
+        messages={transaction.messages}
+        type={extractMsgType(transaction.messages[0].type)}
+        success={transaction.success}
+      />
+    );
+  }
+  if (transaction.actionMsgType === ActionMsgType.MULTIPLE_ACTION_MSG) {
+    return <MultipleActionsMsg messages={transaction.messages} />;
+  }
+  return (
+    <SingleMsg
+      type="Message"
+      tags={
+        transaction.messages.length === 1
+          ? [extractMsgType(transaction.messages[0].type).substring(3)]
+          : [transaction.messages.length.toString()]
+      }
+    />
+  );
+};

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

@@ -1,20 +1,31 @@
-import { Tag, Text, Box, Flex } from "@chakra-ui/react";
+import { InfoIcon } from "@chakra-ui/icons";
+import { Tag, Text, Box, Flex, Tooltip } from "@chakra-ui/react";
+import type { Coin } from "@cosmjs/stargate";
 import { snakeCase } from "snake-case";
 
+import { Copier } from "../Copier";
 import type { LinkType } from "lib/components/ExplorerLink";
 import { ExplorerLink } from "lib/components/ExplorerLink";
+import type { Option } from "lib/types";
+import { formatBalanceWithDenom } from "lib/utils";
 
 interface LinkElement {
   type: LinkType;
   value: string;
   copyValue?: string;
 }
 
+interface Token {
+  id: string;
+  amount: string;
+  symbol: Option<string>;
+  precision: Option<number>;
+}
 export interface SingleMsgProps {
   type: string;
   text1?: string;
-  bolds?: Array<string>;
-  tags?: Array<string>;
+  tokens?: Token[];
+  tags?: string[];
   length?: number;
   text2?: string;
   link1?: LinkElement;
@@ -25,7 +36,7 @@ export interface SingleMsgProps {
 export const SingleMsg = ({
   type,
   text1,
-  bolds,
+  tokens,
   tags,
   length,
   text2,
@@ -37,28 +48,49 @@ export const SingleMsg = ({
   return (
     <Flex gap={1} alignItems="center" flexWrap="wrap">
       {type} {text1}
-      {bolds && (
-        <Box display="inline-flex">
-          {bolds.map((bold: string, index: number) => (
-            <Text key={index.toString() + bold} fontWeight="medium">
-              {bold}
-            </Text>
-          ))}
-        </Box>
-      )}
+      {tokens?.map((token: Token, index: number) => (
+        <Flex
+          key={index.toString() + token}
+          role="group"
+          align="center"
+          gap={1}
+        >
+          <Text fontWeight="medium">
+            {formatBalanceWithDenom({
+              coin: {
+                denom: token.id,
+                amount: token.amount,
+              } as Coin,
+              symbol: token.symbol,
+              precision: token.precision,
+            })}
+          </Text>
+          <Tooltip
+            hasArrow
+            label={`Token ID: ${token.id}`}
+            placement="top"
+            bg="primary.dark"
+            maxW="240px"
+          >
+            <InfoIcon color="gray.600" boxSize={3} cursor="pointer" />
+          </Tooltip>
+          <Box display="none" _groupHover={{ display: "flex" }}>
+            <Copier ml="4px" value={token.id} copyLabel="Token ID Copied!" />
+          </Box>
+        </Flex>
+      ))}
       {/* Tags  */}
-      {tags &&
-        tags.map((tag: string, index: number) => (
-          <Tag key={index.toString() + tag} borderRadius="full">
-            {snakeCase(tag)}
-          </Tag>
-        ))}
+      {tags?.map((tag: string, index: number) => (
+        <Tag key={index.toString() + tag} borderRadius="full">
+          {snakeCase(tag) || tag}
+        </Tag>
+      ))}
       {/* Tag left over */}
       {tags && length && length - tags.length > 0 && (
         <Tag borderRadius="full">+{length - tags.length} </Tag>
       )}
       {/* Length  */}
-      {!tags && length && <Tag>{length}</Tag>}
+      {!tags && length && <Tag borderRadius="full">{length}</Tag>}
       {/* Text2 */}
       {text2}
       {/* Link */}

src/lib/components/button/RedoButton.tsx

@@ -0,0 +1,35 @@
+import { Button } from "@chakra-ui/react";
+import { useWallet } from "@cosmos-kit/react";
+import { BsArrowCounterclockwise } from "react-icons/bs";
+
+import { useRedo } from "lib/pages/past-txs/hooks/useRedo";
+import type { Message } from "lib/types";
+import { extractMsgType } from "lib/utils";
+
+interface RedoButtonProps {
+  message: Message;
+}
+
+export const RedoButton = ({ message }: RedoButtonProps) => {
+  const onClickRedo = useRedo();
+  const { currentChainName } = useWallet();
+
+  return (
+    <Button
+      leftIcon={<BsArrowCounterclockwise />}
+      variant="outline"
+      iconSpacing="2"
+      size="sm"
+      onClick={(e) =>
+        onClickRedo(
+          e,
+          extractMsgType(message.type),
+          message.msg,
+          currentChainName
+        )
+      }
+    >
+      Redo
+    </Button>
+  );
+};

src/lib/components/button/ResendButton.tsx

@@ -0,0 +1,32 @@
+import { Button } from "@chakra-ui/react";
+import { useState } from "react";
+
+import { FailedModal } from "lib/pages/instantiate/component";
+import { useResend } from "lib/pages/past-txs/hooks/useResend";
+import type { Message } from "lib/types";
+
+interface ResendButtonProps {
+  messages: Message[];
+}
+export const ResendButton = ({ messages }: ResendButtonProps) => {
+  const onClickResend = useResend();
+  const [error, setError] = useState("");
+  const [isButtonLoading, setIsButtonLoading] = useState(false);
+
+  return (
+    <>
+      <Button
+        variant="outline"
+        iconSpacing="0"
+        size="sm"
+        onClick={(e) =>
+          onClickResend(e, messages, setIsButtonLoading, setError)
+        }
+        isDisabled={isButtonLoading}
+      >
+        Resend
+      </Button>
+      {error && <FailedModal errorLog={error} onClose={() => setError("")} />}
+    </>
+  );
+};

src/lib/components/forms/ListSelection.tsx

@@ -21,8 +21,7 @@ import { MdCheck, MdClose, MdAdd } from "react-icons/md";
 import { CreateNewList } from "lib/components/modal/list";
 import { useContractStore, useUserKey } from "lib/hooks";
 import type { LVPair } from "lib/types";
-import { formatSlugName } from "lib/utils";
-import mergeRefs from "lib/utils/mergeRefs";
+import { formatSlugName, mergeRefs } from "lib/utils";
 
 export interface ListSelectionProps extends InputProps {
   placeholder?: string;

src/lib/components/forms/TagSelection.tsx

@@ -20,7 +20,7 @@ import { useEffect, useState, useRef, forwardRef } from "react";
 import { MdCheckCircle, MdClose } from "react-icons/md";
 
 import { useContractStore, useUserKey } from "lib/hooks";
-import mergeRefs from "lib/utils/mergeRefs";
+import { mergeRefs } from "lib/utils";
 
 export interface TagSelectionProps extends InputProps {
   placeholder?: string;

src/lib/components/modal/RedoModal.tsx

@@ -0,0 +1,107 @@
+import {
+  Modal,
+  ModalHeader,
+  Flex,
+  Icon,
+  Text,
+  ModalOverlay,
+  ModalContent,
+  ModalCloseButton,
+  useDisclosure,
+  ModalBody,
+  Button,
+  Heading,
+  ModalFooter,
+} from "@chakra-ui/react";
+import { useWallet } from "@cosmos-kit/react";
+import { BsArrowCounterclockwise } from "react-icons/bs";
+import { MdReplay } from "react-icons/md";
+
+import { useRedo } from "lib/pages/past-txs/hooks/useRedo";
+import type { Message } from "lib/types";
+import { extractMsgType } from "lib/utils";
+
+interface RedoModalProps {
+  message: Message;
+}
+
+export const RedoModal = ({ message }: RedoModalProps) => {
+  const { isOpen, onOpen, onClose } = useDisclosure();
+  const onClickRedo = useRedo();
+  const { currentChainName } = useWallet();
+
+  return (
+    <>
+      <Flex onClick={onOpen}>
+        <Button
+          leftIcon={<BsArrowCounterclockwise />}
+          variant="outline"
+          iconSpacing="2"
+          size="sm"
+        >
+          Redo
+        </Button>
+      </Flex>
+      <Modal isOpen={isOpen} onClose={onClose} isCentered>
+        <ModalOverlay />
+        <ModalContent w="640px">
+          <ModalHeader>
+            <Flex w="full" direction="row" alignItems="center" gap={2} pt={1}>
+              <Icon as={MdReplay} boxSize={6} color="gray.600" />
+              <Heading variant="h5" as="h5">
+                Redo Instantiate
+              </Heading>
+            </Flex>
+          </ModalHeader>
+          <ModalCloseButton color="gray.600" />
+          <ModalBody maxH="400px" overflow="overlay">
+            <Flex direction="column" gap={5}>
+              <Flex direction="row" gap={4}>
+                <Text variant="body1">
+                  This contract was instantiated through{" "}
+                  <span style={{ fontWeight: 700 }}>
+                    &#x2018;MsgInstantiateContract2&#x2019;
+                  </span>
+                  , which our app does not currently support. <br /> <br /> You
+                  can instead instantiate the contract using{" "}
+                  <span style={{ fontWeight: 700 }}>
+                    &#x2018;MsgInstantiateContract&#x2019;
+                  </span>{" "}
+                  for the time being
+                </Text>
+              </Flex>
+            </Flex>
+          </ModalBody>
+          <ModalFooter>
+            <Flex
+              w="full"
+              direction="row"
+              align="center"
+              justifyContent="end"
+              gap="4"
+            >
+              <Button
+                cursor="pointer"
+                variant="ghost"
+                onClick={onClose}
+                color="primary.main"
+              >
+                Cancel
+              </Button>
+              <Button
+                onClick={(e) =>
+                  onClickRedo(
+                    e,
+                    extractMsgType(message.type),
+                    message.msg,
+                    currentChainName
+                  )
+                }
+              >{`Redo with \u2018MsgInstantiateContract\u2019`}</Button>
+            </Flex>
+          </ModalFooter>
+        </ModalContent>
+      </Modal>
+    </>
+  );
+};