Skip to content

Commit

Permalink
Merge pull request #68 from alleslabs/refactor/past-txs-link
Browse files Browse the repository at this point in the history 
Refactor/past txs link (Merge #63 first)
  • Loading branch information
@poomthiti
poomthiti committed Jan 12, 2023
2 parents 974c931 + fc5a52f commit 8218854
Show file tree
Hide file tree
Showing 5 changed files with 101 additions and 53 deletions.
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
- [#65](https://github.com/alleslabs/celatone-frontend/pull/60) Create instantiate button component
- [#64](https://github.com/alleslabs/celatone-frontend/pull/64) Add contract not exist page
- [#63](https://github.com/alleslabs/celatone-frontend/pull/63) Add code id explorer link and code table row navigation
Expand Down
8 changes: 7 additions & 1 deletion src/lib/components/ExplorerLink.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
51 changes: 37 additions & 14 deletions src/lib/pages/pastTxs/components/MsgDetail.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand All @@ -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} />;
}
Expand All @@ -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",
Expand All @@ -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(),
}}
/>
);
}
Expand All @@ -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(),
}}
/>
);
}
Expand All @@ -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,
}}
/>
);
}
Expand All @@ -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,
}}
/>
);
}
Expand Down Expand Up @@ -267,5 +292,3 @@ const MsgDetail = ({ msg, success }: MsgDetailProps) => {
</Flex>
);
};

export default MsgDetail;
44 changes: 33 additions & 11 deletions src/lib/pages/pastTxs/components/PastTxTable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down Expand Up @@ -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",
Expand Down Expand Up @@ -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} />;
},
Expand Down Expand Up @@ -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} />;
},
Expand Down Expand Up @@ -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,
}}
/>
);
},
Expand Down
50 changes: 23 additions & 27 deletions src/lib/pages/pastTxs/components/SingleMsg.tsx
View file
Original file line number Diff line number Diff line change
@@ -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 = ({
Expand All @@ -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}
Expand All @@ -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" : "normal"}
/>
)}
{/* 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" : "normal"}
/>
)}{" "}
)}
</Flex>
);
};

1 comment on commit 8218854

@vercel
Copy link

@vercel vercel bot commented on 8218854 Jan 12, 2023

Choose a reason for hiding this comment

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

Successfully deployed to the following URLs:

celatone-frontend-staging – ./

celatone-frontend-staging-alles-labs.vercel.app
celatone-frontend-staging.vercel.app
celatone-frontend-staging-git-develop-alles-labs.vercel.app
osmosis-staging.celat.one

Please sign in to comment.