From 1821a54eeb947f6f9d28b4f05a835161645ad274 Mon Sep 17 00:00:00 2001 From: songwongtp <16089160+songwongtp@users.noreply.github.com> Date: Fri, 12 Apr 2024 03:45:21 +0700 Subject: [PATCH 1/7] feat: dynamic validator badge width --- CHANGELOG.md | 1 + src/lib/components/ExplorerLink.tsx | 22 +++++++++++-------- src/lib/components/ValidatorBadge.tsx | 5 +---- src/lib/components/ValidatorImage.tsx | 2 +- .../components/table/MobileCardTemplate.tsx | 1 + .../table/blocks/BlocksTableRow.tsx | 8 ++----- .../contracts/ContractsTableMobileCard.tsx | 1 - src/lib/components/table/proposals/Answer.tsx | 4 ++-- src/lib/pages/home/index.tsx | 6 +++++ .../voting-period/table/Voter.tsx | 1 - .../ValidatorVotesTableRow.tsx | 4 ++-- .../validator-votes-table/index.tsx | 4 ++-- .../votes-table/ProposalVotesTableRow.tsx | 4 ++-- .../voting-period/votes-table/index.tsx | 2 +- .../ValidatorsTableMobileCard.tsx | 2 +- .../validators-table/ValidatorsTableRow.tsx | 3 +-- 16 files changed, 36 insertions(+), 34 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 26d50aa3d..11f5130e5 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -101,6 +101,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Improvements +- [#881](https://github.com/alleslabs/celatone-frontend/pull/881) Improve validator badge to have a dynamic width - [#861](https://github.com/alleslabs/celatone-frontend/pull/861) Upgrade json schema package version - [#871](https://github.com/alleslabs/celatone-frontend/pull/871) Move filter and search logic to API - [#869](https://github.com/alleslabs/celatone-frontend/pull/869) Change GraphQL phoenix-1 endpoint to prod diff --git a/src/lib/components/ExplorerLink.tsx b/src/lib/components/ExplorerLink.tsx index 261b030a0..1ac80d847 100644 --- a/src/lib/components/ExplorerLink.tsx +++ b/src/lib/components/ExplorerLink.tsx @@ -31,7 +31,6 @@ interface ExplorerLinkProps extends FlexProps { showCopyOnHover?: boolean; isReadOnly?: boolean; textFormat?: "truncate" | "ellipsis" | "normal"; - maxWidth?: string; textVariant?: TextProps["variant"]; ampCopierSection?: string; openNewTab?: boolean; @@ -106,7 +105,6 @@ const LinkRender = ({ hrefLink, textValue, isEllipsis, - maxWidth, textVariant, openNewTab, }: { @@ -115,7 +113,6 @@ const LinkRender = ({ hrefLink: string; textValue: string; isEllipsis: boolean; - maxWidth: ExplorerLinkProps["maxWidth"]; textVariant: TextProps["variant"]; openNewTab: Option; }) => { @@ -124,10 +121,7 @@ const LinkRender = ({ @@ -136,7 +130,15 @@ const LinkRender = ({ ); return isInternal && !openNewTab ? ( - e.stopPropagation()}> + e.stopPropagation()} + style={{ + whiteSpace: "nowrap", + overflow: "hidden", + }} + > {textElement} ) : ( @@ -149,6 +151,10 @@ const LinkRender = ({ if (!isInternal) trackMintScan(type); e.stopPropagation(); }} + style={{ + whiteSpace: "nowrap", + overflow: "hidden", + }} > {textElement} @@ -163,7 +169,6 @@ export const ExplorerLink = ({ showCopyOnHover = false, isReadOnly = false, textFormat = "truncate", - maxWidth = "160px", textVariant = "body2", ampCopierSection, openNewTab, @@ -211,7 +216,6 @@ export const ExplorerLink = ({ hrefLink={link} textValue={textValue} isEllipsis={textFormat === "ellipsis"} - maxWidth={maxWidth} textVariant={textVariant} openNewTab={openNewTab} /> diff --git a/src/lib/components/ValidatorBadge.tsx b/src/lib/components/ValidatorBadge.tsx index eb73a67ce..061282fd1 100644 --- a/src/lib/components/ValidatorBadge.tsx +++ b/src/lib/components/ValidatorBadge.tsx @@ -13,7 +13,6 @@ interface ValidatorBadgeProps { validator: Nullable; badgeSize?: ImageProps["boxSize"]; ampCopierSection?: string; - maxWidth?: string; hasLabel?: boolean; moreInfo?: JSX.Element; } @@ -22,7 +21,6 @@ export const ValidatorBadge = ({ validator, badgeSize = 10, ampCopierSection, - maxWidth = "160px", hasLabel = true, moreInfo, }: ValidatorBadgeProps) => { @@ -37,7 +35,7 @@ export const ValidatorBadge = ({ {validator ? ( - + {isMobile && hasLabel && } diff --git a/src/lib/components/ValidatorImage.tsx b/src/lib/components/ValidatorImage.tsx index 7ef510986..3ffb84cad 100644 --- a/src/lib/components/ValidatorImage.tsx +++ b/src/lib/components/ValidatorImage.tsx @@ -28,7 +28,7 @@ export const ValidatorImage = ({ } return isLoading || !data || !validator.moniker ? ( - + ) : ( diff --git a/src/lib/components/table/blocks/BlocksTableRow.tsx b/src/lib/components/table/blocks/BlocksTableRow.tsx index c0743c494..f8f700fc5 100644 --- a/src/lib/components/table/blocks/BlocksTableRow.tsx +++ b/src/lib/components/table/blocks/BlocksTableRow.tsx @@ -49,12 +49,8 @@ export const BlocksTableRow = ({ {truncate(blockData.hash.toUpperCase(), showProposer ? [6, 6] : [9, 9])} {showProposer && ( - - + + )} } diff --git a/src/lib/components/table/proposals/Answer.tsx b/src/lib/components/table/proposals/Answer.tsx index 8dfc451ec..d6414094e 100644 --- a/src/lib/components/table/proposals/Answer.tsx +++ b/src/lib/components/table/proposals/Answer.tsx @@ -55,8 +55,8 @@ export const Answer = ({ return ( diff --git a/src/lib/pages/home/index.tsx b/src/lib/pages/home/index.tsx index a4771c36a..643c91625 100644 --- a/src/lib/pages/home/index.tsx +++ b/src/lib/pages/home/index.tsx @@ -10,6 +10,7 @@ import { useMobile, } from "lib/app-provider"; import { ConnectWalletAlert } from "lib/components/ConnectWalletAlert"; +import { ExplorerLink } from "lib/components/ExplorerLink"; import PageContainer from "lib/components/PageContainer"; import { ViewMore } from "lib/components/table"; import { UserDocsLink } from "lib/components/UserDocsLink"; @@ -62,6 +63,11 @@ const Home = () => { return ( + { /> ) : undefined } - maxWidth="110px" /> ); diff --git a/src/lib/pages/proposal-details/components/vote-details/voting-period/validator-votes-table/ValidatorVotesTableRow.tsx b/src/lib/pages/proposal-details/components/vote-details/voting-period/validator-votes-table/ValidatorVotesTableRow.tsx index 68ca1aaa1..36827c042 100644 --- a/src/lib/pages/proposal-details/components/vote-details/voting-period/validator-votes-table/ValidatorVotesTableRow.tsx +++ b/src/lib/pages/proposal-details/components/vote-details/voting-period/validator-votes-table/ValidatorVotesTableRow.tsx @@ -32,7 +32,7 @@ export const ValidatorVotesTableRow = ({ minW="min-content" > {!isProposalResolved && {proposalVote.rank}} - + @@ -68,7 +68,7 @@ export const ValidatorVotesTableRow = ({ return ( {!isProposalResolved && {proposalVote.rank}} - + diff --git a/src/lib/pages/proposal-details/components/vote-details/voting-period/validator-votes-table/index.tsx b/src/lib/pages/proposal-details/components/vote-details/voting-period/validator-votes-table/index.tsx index d6afb8c5d..2948a1c59 100644 --- a/src/lib/pages/proposal-details/components/vote-details/voting-period/validator-votes-table/index.tsx +++ b/src/lib/pages/proposal-details/components/vote-details/voting-period/validator-votes-table/index.tsx @@ -40,8 +40,8 @@ export const ValidatorVotesTableBody = ({ const templateColumns = fullVersion && !isMobile - ? `${!isProposalResolved ? "0.2fr " : ""}1fr 0.8fr 1.5fr 1fr` - : `${!isProposalResolved ? "0.1fr " : ""}1.5fr 1fr`; + ? `${!isProposalResolved ? "32px " : ""}1fr 0.8fr 1.5fr 1fr` + : `${!isProposalResolved ? "32px " : ""}1.5fr 0.5fr`; if (isLoading) return ; if (!validatorVotes) return ; diff --git a/src/lib/pages/proposal-details/components/vote-details/voting-period/votes-table/ProposalVotesTableRow.tsx b/src/lib/pages/proposal-details/components/vote-details/voting-period/votes-table/ProposalVotesTableRow.tsx index f4366579e..3a0135a55 100644 --- a/src/lib/pages/proposal-details/components/vote-details/voting-period/votes-table/ProposalVotesTableRow.tsx +++ b/src/lib/pages/proposal-details/components/vote-details/voting-period/votes-table/ProposalVotesTableRow.tsx @@ -29,7 +29,7 @@ export const ProposalVotesTableRow = ({ templateColumns={templateColumns} minW="min-content" > - + @@ -64,7 +64,7 @@ export const ProposalVotesTableRow = ({ return ( - + diff --git a/src/lib/pages/proposal-details/components/vote-details/voting-period/votes-table/index.tsx b/src/lib/pages/proposal-details/components/vote-details/voting-period/votes-table/index.tsx index 4256e2b34..69b2f1645 100644 --- a/src/lib/pages/proposal-details/components/vote-details/voting-period/votes-table/index.tsx +++ b/src/lib/pages/proposal-details/components/vote-details/voting-period/votes-table/index.tsx @@ -35,7 +35,7 @@ export const ProposalVotesTableBody = ({ }: ProposalVotesTableBodyProps) => { const isMobile = useMobile(); const templateColumns = - fullVersion && !isMobile ? `1fr 0.8fr 1.5fr 1fr` : `2fr 1fr`; + fullVersion && !isMobile ? `1fr 0.8fr 1.5fr 1fr` : `3fr 1fr`; if (isLoading) return ; if (!proposalVotes) return ; diff --git a/src/lib/pages/validators/components/validators-table/ValidatorsTableMobileCard.tsx b/src/lib/pages/validators/components/validators-table/ValidatorsTableMobileCard.tsx index acade627b..0bc4c2e5c 100644 --- a/src/lib/pages/validators/components/validators-table/ValidatorsTableMobileCard.tsx +++ b/src/lib/pages/validators/components/validators-table/ValidatorsTableMobileCard.tsx @@ -57,7 +57,7 @@ export const ValidatorsTableMobileCard = ({ )} - + )} - + From 5cd4e6081e532206de0d2c3ab9ebd0600a08cd20 Mon Sep 17 00:00:00 2001 From: songwongtp <16089160+songwongtp@users.noreply.github.com> Date: Fri, 12 Apr 2024 03:49:44 +0700 Subject: [PATCH 2/7] fix: remove test --- src/lib/pages/home/index.tsx | 6 ------ 1 file changed, 6 deletions(-) diff --git a/src/lib/pages/home/index.tsx b/src/lib/pages/home/index.tsx index 643c91625..a4771c36a 100644 --- a/src/lib/pages/home/index.tsx +++ b/src/lib/pages/home/index.tsx @@ -10,7 +10,6 @@ import { useMobile, } from "lib/app-provider"; import { ConnectWalletAlert } from "lib/components/ConnectWalletAlert"; -import { ExplorerLink } from "lib/components/ExplorerLink"; import PageContainer from "lib/components/PageContainer"; import { ViewMore } from "lib/components/table"; import { UserDocsLink } from "lib/components/UserDocsLink"; @@ -63,11 +62,6 @@ const Home = () => { return ( - Date: Fri, 12 Apr 2024 15:17:16 +0700 Subject: [PATCH 3/7] fix: apply minW to all validator badge parent --- src/lib/components/CopyLink.tsx | 2 +- src/lib/components/table/MobileCardTemplate.tsx | 2 +- src/lib/components/table/bonded/BondedTableMobileCard.tsx | 1 + src/lib/components/table/bonded/BondedTableRow.tsx | 2 +- .../non-redelegatable/NonRedelegatableTableMobileCard.tsx | 1 + .../table/non-redelegatable/NonRedelegatableTableRow.tsx | 2 +- .../table/redelegation/RedelegationTableMobileCard.tsx | 4 ++-- .../components/table/redelegation/RedelegationTableRow.tsx | 4 ++-- src/lib/pages/block-details/components/BlockInfo.tsx | 2 +- .../components/pool-details/tables/pool-txs/PoolTxsMsg.tsx | 4 ++-- .../tables/pool-txs/messages/components/PoolInfoText.tsx | 2 +- 11 files changed, 14 insertions(+), 12 deletions(-) diff --git a/src/lib/components/CopyLink.tsx b/src/lib/components/CopyLink.tsx index 4f180b601..8589d40a9 100644 --- a/src/lib/components/CopyLink.tsx +++ b/src/lib/components/CopyLink.tsx @@ -72,7 +72,7 @@ export const CopyLink = ({ {...flexProps} > diff --git a/src/lib/components/table/bonded/BondedTableMobileCard.tsx b/src/lib/components/table/bonded/BondedTableMobileCard.tsx index 66e433c39..a3213ed00 100644 --- a/src/lib/components/table/bonded/BondedTableMobileCard.tsx +++ b/src/lib/components/table/bonded/BondedTableMobileCard.tsx @@ -23,6 +23,7 @@ export const BondedTableMobileCard = ({ direction="column" gap={3} w="full" + minW={0} border="1px solid" borderColor="gray.700" > diff --git a/src/lib/components/table/bonded/BondedTableRow.tsx b/src/lib/components/table/bonded/BondedTableRow.tsx index ef734148e..84b760cc5 100644 --- a/src/lib/components/table/bonded/BondedTableRow.tsx +++ b/src/lib/components/table/bonded/BondedTableRow.tsx @@ -34,7 +34,7 @@ export const BondedTableRow = ({ minW="min-content" sx={{ "& > div": { alignItems: "flex-start" } }} > - + diff --git a/src/lib/components/table/non-redelegatable/NonRedelegatableTableMobileCard.tsx b/src/lib/components/table/non-redelegatable/NonRedelegatableTableMobileCard.tsx index 333a277b1..cad705f29 100644 --- a/src/lib/components/table/non-redelegatable/NonRedelegatableTableMobileCard.tsx +++ b/src/lib/components/table/non-redelegatable/NonRedelegatableTableMobileCard.tsx @@ -16,6 +16,7 @@ export const NonRedelegatablesTableMobileCard = ({ direction="column" gap={2} w="full" + minW={0} borderTop="1px solid" borderTopColor="gray.700" pt={3} diff --git a/src/lib/components/table/non-redelegatable/NonRedelegatableTableRow.tsx b/src/lib/components/table/non-redelegatable/NonRedelegatableTableRow.tsx index 8922be293..a5d3eca94 100644 --- a/src/lib/components/table/non-redelegatable/NonRedelegatableTableRow.tsx +++ b/src/lib/components/table/non-redelegatable/NonRedelegatableTableRow.tsx @@ -19,7 +19,7 @@ export const NonRedelegatableTableRow = ({ transition="all 0.25s ease-in-out" minW="min-content" > - + diff --git a/src/lib/components/table/redelegation/RedelegationTableMobileCard.tsx b/src/lib/components/table/redelegation/RedelegationTableMobileCard.tsx index 940d6c697..02b4d08c4 100644 --- a/src/lib/components/table/redelegation/RedelegationTableMobileCard.tsx +++ b/src/lib/components/table/redelegation/RedelegationTableMobileCard.tsx @@ -29,12 +29,12 @@ export const RedelegationTableMobileCard = ({ templateColumns="1fr 32px 1fr" alignItems="center" > - + - + diff --git a/src/lib/components/table/redelegation/RedelegationTableRow.tsx b/src/lib/components/table/redelegation/RedelegationTableRow.tsx index 204ff91ef..102e2990d 100644 --- a/src/lib/components/table/redelegation/RedelegationTableRow.tsx +++ b/src/lib/components/table/redelegation/RedelegationTableRow.tsx @@ -23,13 +23,13 @@ export const RedelegationTableRow = ({ minW="min-content" sx={{ "& > div": { alignItems: "flex-start" } }} > - + - + diff --git a/src/lib/pages/block-details/components/BlockInfo.tsx b/src/lib/pages/block-details/components/BlockInfo.tsx index 8db1d2a35..6ea011b0d 100644 --- a/src/lib/pages/block-details/components/BlockInfo.tsx +++ b/src/lib/pages/block-details/components/BlockInfo.tsx @@ -36,7 +36,7 @@ export const BlockInfo = ({ blockData }: BlockInfoProps) => { }`} - + @@ -151,10 +148,7 @@ const LinkRender = ({ if (!isInternal) trackMintScan(type); e.stopPropagation(); }} - style={{ - whiteSpace: "nowrap", - overflow: "hidden", - }} + style={{ overflow: "hidden" }} > {textElement} From deb5d000a7b7e43f2c2293d7f25aec134f243092 Mon Sep 17 00:00:00 2001 From: songwongtp <16089160+songwongtp@users.noreply.github.com> Date: Wed, 17 Apr 2024 13:38:18 +0700 Subject: [PATCH 6/7] fix: changelog --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 11f5130e5..8018fe3b5 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -101,7 +101,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Improvements -- [#881](https://github.com/alleslabs/celatone-frontend/pull/881) Improve validator badge to have a dynamic width +- [#883](https://github.com/alleslabs/celatone-frontend/pull/883) Improve validator badge to have a dynamic width - [#861](https://github.com/alleslabs/celatone-frontend/pull/861) Upgrade json schema package version - [#871](https://github.com/alleslabs/celatone-frontend/pull/871) Move filter and search logic to API - [#869](https://github.com/alleslabs/celatone-frontend/pull/869) Change GraphQL phoenix-1 endpoint to prod From 361a85b3b1275006fd3be5d13c00a17c65295b6a Mon Sep 17 00:00:00 2001 From: songwongtp <16089160+songwongtp@users.noreply.github.com> Date: Wed, 17 Apr 2024 13:46:21 +0700 Subject: [PATCH 7/7] fix: set row basestyle minw 0 --- src/lib/components/table/blocks/BlocksTableRow.tsx | 2 +- src/lib/components/table/bonded/BondedTableRow.tsx | 2 +- .../table/non-redelegatable/NonRedelegatableTableRow.tsx | 2 +- .../components/table/redelegation/RedelegationTableRow.tsx | 4 ++-- src/lib/components/table/tableComponents.ts | 1 + .../components/pool-details/tables/pool-txs/PoolTxsMsg.tsx | 2 +- .../validator-votes-table/ValidatorVotesTableRow.tsx | 4 ++-- .../voting-period/votes-table/ProposalVotesTableRow.tsx | 4 ++-- .../components/validators-table/ValidatorsTableRow.tsx | 2 +- 9 files changed, 12 insertions(+), 11 deletions(-) diff --git a/src/lib/components/table/blocks/BlocksTableRow.tsx b/src/lib/components/table/blocks/BlocksTableRow.tsx index f8f700fc5..66221e379 100644 --- a/src/lib/components/table/blocks/BlocksTableRow.tsx +++ b/src/lib/components/table/blocks/BlocksTableRow.tsx @@ -49,7 +49,7 @@ export const BlocksTableRow = ({ {truncate(blockData.hash.toUpperCase(), showProposer ? [6, 6] : [9, 9])} {showProposer && ( - + )} diff --git a/src/lib/components/table/bonded/BondedTableRow.tsx b/src/lib/components/table/bonded/BondedTableRow.tsx index 84b760cc5..ef734148e 100644 --- a/src/lib/components/table/bonded/BondedTableRow.tsx +++ b/src/lib/components/table/bonded/BondedTableRow.tsx @@ -34,7 +34,7 @@ export const BondedTableRow = ({ minW="min-content" sx={{ "& > div": { alignItems: "flex-start" } }} > - + diff --git a/src/lib/components/table/non-redelegatable/NonRedelegatableTableRow.tsx b/src/lib/components/table/non-redelegatable/NonRedelegatableTableRow.tsx index a5d3eca94..8922be293 100644 --- a/src/lib/components/table/non-redelegatable/NonRedelegatableTableRow.tsx +++ b/src/lib/components/table/non-redelegatable/NonRedelegatableTableRow.tsx @@ -19,7 +19,7 @@ export const NonRedelegatableTableRow = ({ transition="all 0.25s ease-in-out" minW="min-content" > - + diff --git a/src/lib/components/table/redelegation/RedelegationTableRow.tsx b/src/lib/components/table/redelegation/RedelegationTableRow.tsx index 102e2990d..204ff91ef 100644 --- a/src/lib/components/table/redelegation/RedelegationTableRow.tsx +++ b/src/lib/components/table/redelegation/RedelegationTableRow.tsx @@ -23,13 +23,13 @@ export const RedelegationTableRow = ({ minW="min-content" sx={{ "& > div": { alignItems: "flex-start" } }} > - + - + diff --git a/src/lib/components/table/tableComponents.ts b/src/lib/components/table/tableComponents.ts index 9e5d405e3..5919bc50a 100644 --- a/src/lib/components/table/tableComponents.ts +++ b/src/lib/components/table/tableComponents.ts @@ -41,6 +41,7 @@ const tableRowBaseStyle = { fontSize: "14px", fontWeight: 400, p: 4, + minW: 0, minH: "75px", display: "flex", alignItems: "center", diff --git a/src/lib/pages/pools/components/pool-details/tables/pool-txs/PoolTxsMsg.tsx b/src/lib/pages/pools/components/pool-details/tables/pool-txs/PoolTxsMsg.tsx index 8045eef11..814c6e463 100644 --- a/src/lib/pages/pools/components/pool-details/tables/pool-txs/PoolTxsMsg.tsx +++ b/src/lib/pages/pools/components/pool-details/tables/pool-txs/PoolTxsMsg.tsx @@ -153,7 +153,7 @@ export const PoolTxsMsg = ({ hidden={!isOpen} templateColumns={msgDetailTemplateColumns} > - + {!isProposalResolved && {proposalVote.rank}} - + @@ -68,7 +68,7 @@ export const ValidatorVotesTableRow = ({ return ( {!isProposalResolved && {proposalVote.rank}} - + diff --git a/src/lib/pages/proposal-details/components/vote-details/voting-period/votes-table/ProposalVotesTableRow.tsx b/src/lib/pages/proposal-details/components/vote-details/voting-period/votes-table/ProposalVotesTableRow.tsx index 3a0135a55..f4366579e 100644 --- a/src/lib/pages/proposal-details/components/vote-details/voting-period/votes-table/ProposalVotesTableRow.tsx +++ b/src/lib/pages/proposal-details/components/vote-details/voting-period/votes-table/ProposalVotesTableRow.tsx @@ -29,7 +29,7 @@ export const ProposalVotesTableRow = ({ templateColumns={templateColumns} minW="min-content" > - + @@ -64,7 +64,7 @@ export const ProposalVotesTableRow = ({ return ( - + diff --git a/src/lib/pages/validators/components/validators-table/ValidatorsTableRow.tsx b/src/lib/pages/validators/components/validators-table/ValidatorsTableRow.tsx index 259dad632..521f88380 100644 --- a/src/lib/pages/validators/components/validators-table/ValidatorsTableRow.tsx +++ b/src/lib/pages/validators/components/validators-table/ValidatorsTableRow.tsx @@ -64,7 +64,7 @@ export const ValidatorsTableRow = ({ )} - +