From bca5f27d4307bd1c91bb9db66d8877a8548482d1 Mon Sep 17 00:00:00 2001 From: poomthiti Date: Thu, 5 Jan 2023 00:38:33 +0700 Subject: [PATCH 1/2] feat: add code id explorer link and code row navigation --- src/lib/app-fns/tx/upload.tsx | 2 +- src/lib/components/ExplorerLink.tsx | 154 ++++++++++++------ .../components/modal/code/SaveOrEditCode.tsx | 2 +- src/lib/components/table/EditableCell.tsx | 3 +- src/lib/pages/code/index.tsx | 2 +- src/lib/pages/codes/components/CodesTable.tsx | 24 ++- .../components/InstantiateInfo.tsx | 1 + 7 files changed, 127 insertions(+), 61 deletions(-) diff --git a/src/lib/app-fns/tx/upload.tsx b/src/lib/app-fns/tx/upload.tsx index 6515f8082..df35bd1ae 100644 --- a/src/lib/app-fns/tx/upload.tsx +++ b/src/lib/app-fns/tx/upload.tsx @@ -54,7 +54,7 @@ export const uploadContractTx = ({ value: txInfo.codeId, html: (
- +
), }, diff --git a/src/lib/components/ExplorerLink.tsx b/src/lib/components/ExplorerLink.tsx index 2dc39967c..0a887b66b 100644 --- a/src/lib/components/ExplorerLink.tsx +++ b/src/lib/components/ExplorerLink.tsx @@ -1,6 +1,7 @@ import type { BoxProps } from "@chakra-ui/react"; -import { Box, Link, Text } from "@chakra-ui/react"; +import { Box, Text } from "@chakra-ui/react"; import { useWallet } from "@cosmos-kit/react"; +import Link from "next/link"; import { getExplorerContractAddressUrl, @@ -13,7 +14,7 @@ import { Copier } from "./Copier"; interface ExplorerLinkProps extends BoxProps { value: string; - type?: "tx_hash" | "contract_address" | "user_address"; + type?: "tx_hash" | "user_address" | "contract_address" | "code_id"; copyValue?: string; canCopyWithHover?: boolean; isReadOnly?: boolean; @@ -21,81 +22,126 @@ interface ExplorerLinkProps extends BoxProps { maxWidth?: string; } -export const ExplorerLink = ({ - value, - type, - copyValue, - canCopyWithHover = false, - isReadOnly = false, - textFormat = "truncate", - maxWidth = "150px", - ...componentProps -}: ExplorerLinkProps) => { - const { address, currentChainName } = useWallet(); - let explorerLink = ""; +const getNavigationUrl = ( + type: ExplorerLinkProps["type"], + currentChainName: string, + value: string +) => { + let url = ""; switch (type) { case "tx_hash": - explorerLink = getExplorerTxUrl(currentChainName); + url = getExplorerTxUrl(currentChainName); break; case "contract_address": - explorerLink = getExplorerContractAddressUrl(currentChainName); + url = getExplorerContractAddressUrl(currentChainName); break; case "user_address": - explorerLink = getExplorerUserAddressUrl(currentChainName); + url = getExplorerUserAddressUrl(currentChainName); + break; + case "code_id": + url = "/code"; break; default: break; } + return `${url}/${value}`; +}; - /** - * @remarks - * The `copyValue` is used in case where the value displayed is not the same as the copy value - */ - const hrefLink = () => { - if (explorerLink) { - if (copyValue) { - return `${explorerLink}/${copyValue}`; - } - return `${explorerLink}/${value}`; - } - return undefined; - }; +const getValueText = ( + isOwnAddr: boolean, + isTruncate: boolean, + value: string +) => { + if (isOwnAddr) { + return "Me"; + } + return isTruncate ? truncate(value) : value; +}; - const renderValue = () => { - if (value === address) { - return "Me"; - } - if (textFormat === "truncate") { - return truncate(value); - } - return value; - }; +const LinkRender = ({ + isInternal, + hrefLink, + textValue, + isEllipsis, + maxWidth, +}: { + isInternal: boolean; + hrefLink: string; + textValue: string; + isEllipsis: boolean; + maxWidth: ExplorerLinkProps["maxWidth"]; +}) => { + const textElement = ( + + {textValue} + + ); + + return isInternal ? ( + e.stopPropagation()}> + {textElement} + + ) : ( + e.stopPropagation()} + > + {textElement} + + ); +}; + +export const ExplorerLink = ({ + value, + type, + copyValue, + canCopyWithHover = false, + isReadOnly = false, + textFormat = "truncate", + maxWidth = "150px", + ...componentProps +}: ExplorerLinkProps) => { + const { address, currentChainName } = useWallet(); + const isInternal = type === "code_id" || type === "contract_address"; + + const [hrefLink, textValue] = [ + getNavigationUrl(type, currentChainName, copyValue || value), + getValueText(value === address, textFormat === "truncate", value), + ]; return ( {isReadOnly ? ( - {renderValue()} + {textValue} ) : ( <> - e.stopPropagation()} - pointerEvents={!hrefLink() ? "none" : "auto"} - className={textFormat === "ellipsis" ? "ellipsis" : undefined} - maxW={maxWidth} - > - {renderValue()} - + Code ID - + diff --git a/src/lib/components/table/EditableCell.tsx b/src/lib/components/table/EditableCell.tsx index 90bacb458..e3328c2f1 100644 --- a/src/lib/components/table/EditableCell.tsx +++ b/src/lib/components/table/EditableCell.tsx @@ -71,6 +71,7 @@ export const EditableCell = ({ p={3} borderRadius="md" zIndex="sticky" + onClick={(e) => e.stopPropagation()} > ) : ( - + e.stopPropagation()}> { Code ID - + {/* TODO: Check uploader with data hook */} diff --git a/src/lib/pages/codes/components/CodesTable.tsx b/src/lib/pages/codes/components/CodesTable.tsx index 6f0de2243..0eeec964d 100644 --- a/src/lib/pages/codes/components/CodesTable.tsx +++ b/src/lib/pages/codes/components/CodesTable.tsx @@ -120,6 +120,9 @@ const TableRow = ({ code, isRemovable }: CodesRowProps) => { const goToInstantiate = () => { router.push({ pathname: "/instantiate", query: { "code-id": code.id } }); }; + const goToCodeDetails = () => { + router.push({ pathname: `/code/${code.id}` }); + }; return ( { _hover={{ bg: "gray.900", }} + cursor="pointer" + onClick={goToCodeDetails} > - + - {code.contracts} + e.stopPropagation()} + cursor="text" + w="fit-content" + m="auto" + px={2} + > + {code.contracts} + { /> - + e.stopPropagation()} w="fit-content"> diff --git a/src/lib/pages/contract-details/components/InstantiateInfo.tsx b/src/lib/pages/contract-details/components/InstantiateInfo.tsx index de7c5f46a..e3b466523 100644 --- a/src/lib/pages/contract-details/components/InstantiateInfo.tsx +++ b/src/lib/pages/contract-details/components/InstantiateInfo.tsx @@ -70,6 +70,7 @@ export const InstantiateInfo = ({ contractDetail }: InstantiateInfoProps) => { helperText1={contractDetail.codeInfo?.description} > From 2be9fdca414751584c644509f02138f501219e80 Mon Sep 17 00:00:00 2001 From: poomthiti Date: Thu, 5 Jan 2023 00:39:47 +0700 Subject: [PATCH 2/2] ci: changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index fc43b0b86..a24c36e0c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -39,6 +39,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Features +- [#63](https://github.com/alleslabs/celatone-frontend/pull/63) Add code id explorer link and code table row navigation - [#47](https://github.com/alleslabs/celatone-frontend/pull/47) Wireup init msg in contract details page - [#51](https://github.com/alleslabs/celatone-frontend/pull/51) Wireup contract info in contract details page - [#59](https://github.com/alleslabs/celatone-frontend/pull/58) Wireup code name,description, and cta section