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

CHANGELOG.md

@@ -39,6 +39,7 @@ 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
 - [#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

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,8 +1,12 @@
-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 { formatBalanceWithDenom } from "lib/utils";
 
 interface LinkElement {
   type: LinkType;
@@ -13,8 +17,8 @@ interface LinkElement {
 export interface SingleMsgProps {
   type: string;
   text1?: string;
-  bolds?: Array<string>;
-  tags?: Array<string>;
+  tokens?: Coin[];
+  tags?: string[];
   length?: number;
   text2?: string;
   link1?: LinkElement;
@@ -25,7 +29,7 @@ export interface SingleMsgProps {
 export const SingleMsg = ({
   type,
   text1,
-  bolds,
+  tokens,
   tags,
   length,
   text2,
@@ -37,28 +41,39 @@ 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}
+      {tokens &&
+        tokens.map((token: Coin, index: number) => (
+          <Flex role="group" align="center" gap={1}>
+            <Text key={index.toString() + token} fontWeight="medium">
+              {formatBalanceWithDenom(token)}
             </Text>
-          ))}
-        </Box>
-      )}
+            <Tooltip
+              hasArrow
+              label={token.denom}
+              placement="top"
+              bg="primary.dark"
+              maxW="500px"
+            >
+              <InfoIcon color="gray.600" boxSize={3} cursor="pointer" />
+            </Tooltip>
+            <Box display="none" _groupHover={{ display: "flex" }}>
+              <Copier value={token.denom} />
+            </Box>
+          </Flex>
+        ))}
       {/* Tags  */}
       {tags &&
         tags.map((tag: string, index: number) => (
           <Tag key={index.toString() + tag} borderRadius="full">
-            {snakeCase(tag)}
+            {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,33 @@
+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/modal/RedoModal.tsx

@@ -0,0 +1,108 @@
+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="450px">
+          <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;Instantiate2&#x2019;
+                  </span>
+                  , which our app does not currently support. 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="center"
+              gap="4"
+            >
+              <Button
+                onClick={(e) =>
+                  onClickRedo(
+                    e,
+                    extractMsgType(message.type),
+                    message.msg,
+                    currentChainName
+                  )
+                }
+              >{`Redo with \u2018MsgInstantiateContract\u2019`}</Button>
+              <Text
+                cursor="pointer"
+                onClick={onClose}
+                color="primary.main"
+                variant="body2"
+                fontWeight="700"
+              >
+                Cancel
+              </Text>
+            </Flex>
+          </ModalFooter>
+        </ModalContent>
+      </Modal>
+    </>
+  );
+};

src/lib/components/table/AccordionTx.tsx

@@ -0,0 +1,69 @@
+import { SlideFade } from "@chakra-ui/react";
+import { useState } from "react";
+
+import { SingleActionMsg } from "../action-msg/SingleActionMsg";
+import { AccordionStepperItem } from "lib/components/AccordionStepperItem";
+import { RedoButton } from "lib/components/button/RedoButton";
+import { ResendButton } from "lib/components/button/ResendButton";
+import type { Message } from "lib/types";
+import { extractMsgType } from "lib/utils";
+
+import { TableRow } from "./tableComponents";
+
+interface AccordionTxProps {
+  message: Message;
+  allowFurtherAction: boolean;
+}
+
+interface RenderButtonProps {
+  message: Message;
+}
+
+const RenderButton = ({ message }: RenderButtonProps) => {
+  if (
+    extractMsgType(message.type) === "MsgExecuteContract" ||
+    extractMsgType(message.type) === "MsgInstantiateContract"
+  )
+    return <RedoButton message={message} />;
+
+  if (extractMsgType(message.type) === "MsgSend")
+    return <ResendButton messages={[message]} />;
+
+  return null;
+};
+
+export const AccordionTx = ({
+  message,
+  allowFurtherAction,
+}: AccordionTxProps) => {
+  const [showButton, setShowButton] = useState(false);
+  return (
+    <TableRow
+      h="40px"
+      borderBottom="none"
+      pl="256px"
+      gap={3}
+      _hover={{ background: "divider.main" }}
+      css={{
+        "&:not(:first-of-type) div#before-stepper": {
+          visibility: "visible",
+        },
+      }}
+      onMouseEnter={() => setShowButton(true)}
+      onMouseLeave={() => setShowButton(false)}
+    >
+      <AccordionStepperItem />
+      <SingleActionMsg
+        messages={[message]}
+        type={extractMsgType(message.type)}
+        success
+        singleMsg
+      />
+      {allowFurtherAction && (
+        <SlideFade in={showButton} offsetY="20px">
+          <RenderButton message={message} />
+        </SlideFade>
+      )}
+    </TableRow>
+  );
+};