Skip to content

Commit

Permalink
Merge pull request #112 from alleslabs/fix/past-txs
Browse files Browse the repository at this point in the history
fix: refactor pastTxs page, add new messages, change filter action section
  • Loading branch information
bkioshn committed Jan 27, 2023
2 parents 2cc39df + 1e85a96 commit b45b19d
Show file tree
Hide file tree
Showing 38 changed files with 1,605 additions and 1,630 deletions.
3 changes: 2 additions & 1 deletion CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand Down
4 changes: 3 additions & 1 deletion src/lib/components/Copier.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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);

Expand All @@ -24,7 +26,7 @@ export const Copier = ({
<Tooltip
hasArrow
isOpen={hasCopied}
label="Copied!"
label={copyLabel}
placement="top"
arrowSize={8}
bg="primary.dark"
Expand Down
2 changes: 1 addition & 1 deletion src/lib/components/EstimatedFeeRender.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -21,5 +21,5 @@ export const EstimatedFeeRender = ({

if (!coin) return <>--</>;

return <>{formatBalanceWithDenom(coin)}</>;
return <>{formatBalanceWithDenom({ coin, precision: 6 })}</>;
};
38 changes: 38 additions & 0 deletions src/lib/components/action-msg/ActionMessages.tsx
Original file line number Diff line number Diff line change
@@ -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()]
}
/>
);
};
72 changes: 52 additions & 20 deletions src/lib/components/action-msg/SingleMsg.tsx
Original file line number Diff line number Diff line change
@@ -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;
Expand All @@ -25,7 +36,7 @@ export interface SingleMsgProps {
export const SingleMsg = ({
type,
text1,
bolds,
tokens,
tags,
length,
text2,
Expand All @@ -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 */}
Expand Down
35 changes: 35 additions & 0 deletions src/lib/components/button/RedoButton.tsx
Original file line number Diff line number Diff line change
@@ -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>
);
};
32 changes: 32 additions & 0 deletions src/lib/components/button/ResendButton.tsx
Original file line number Diff line number Diff line change
@@ -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("")} />}
</>
);
};
3 changes: 1 addition & 2 deletions src/lib/components/forms/ListSelection.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
2 changes: 1 addition & 1 deletion src/lib/components/forms/TagSelection.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
107 changes: 107 additions & 0 deletions src/lib/components/modal/RedoModal.tsx
Original file line number Diff line number Diff line change
@@ -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>
</>
);
};
Loading

3 comments on commit b45b19d

@vercel
Copy link

@vercel vercel bot commented on b45b19d Jan 27, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@vercel
Copy link

@vercel vercel bot commented on b45b19d Jan 27, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@vercel
Copy link

@vercel vercel bot commented on b45b19d Jan 29, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please sign in to comment.