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
 - [#72](https://github.com/alleslabs/celatone-frontend/pull/72) Fix general wording and grammar
 - [#110](https://github.com/alleslabs/celatone-frontend/pull/110) Fix proposal detail rendering
 - [#109](https://github.com/alleslabs/celatone-frontend/pull/109) Fix incorrect rendering of zero value badges

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

@@ -0,0 +1,36 @@
+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";
+
+export const RenderActionsMessages = ({
+  transaction,
+}: {
+  transaction: AllTransaction | PastTransaction;
+}) => {
+  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

@@ -58,7 +58,7 @@ export const SingleMsg = ({
         <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/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>
+  );
+};