From b2b6fa65ca9c4041a86896079b379d1f9be0f8ee Mon Sep 17 00:00:00 2001 From: songwongtp <16089160+songwongtp@users.noreply.github.com> Date: Tue, 26 Mar 2024 16:59:42 +0700 Subject: [PATCH 1/8] fix: validator list empty state and dividers --- CHANGELOG.md | 1 + .../validators-table/ValidatorsTableBody.tsx | 94 ------------------- .../components/validators-table/index.tsx | 91 ++++++++++++++---- 3 files changed, 73 insertions(+), 113 deletions(-) delete mode 100644 src/lib/pages/validators/components/validators-table/ValidatorsTableBody.tsx diff --git a/CHANGELOG.md b/CHANGELOG.md index 07c3d6fa2..075089b27 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -118,6 +118,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Bug fixes +- [#849](https://github.com/alleslabs/celatone-frontend/pull/849) Fix validator list empty state and voting percent dividers - [#838](https://github.com/alleslabs/celatone-frontend/pull/838) Fix validator list sorting on priority - [#839](https://github.com/alleslabs/celatone-frontend/pull/839) Disable contract delegations on non-gov chains - [#827](https://github.com/alleslabs/celatone-frontend/pull/827) Fix misc bugs - proposal msgs accordion, IBC tag, mobile tooltip diff --git a/src/lib/pages/validators/components/validators-table/ValidatorsTableBody.tsx b/src/lib/pages/validators/components/validators-table/ValidatorsTableBody.tsx deleted file mode 100644 index dc415ad6e..000000000 --- a/src/lib/pages/validators/components/validators-table/ValidatorsTableBody.tsx +++ /dev/null @@ -1,94 +0,0 @@ -import type { GridProps } from "@chakra-ui/react"; -import React from "react"; - -import { ValidatorOrder } from "../../types"; -import { useCelatoneApp, useMobile } from "lib/app-provider"; -import { Loading } from "lib/components/Loading"; -import { EmptyState, ErrorFetching } from "lib/components/state"; -import { useAssetInfos } from "lib/services/assetService"; -import type { ValidatorsResponse } from "lib/services/validator"; -import type { Option } from "lib/types"; -import { coinToTokenWithValue } from "lib/utils"; - -import { ValidatorsPercentDivider } from "./ValidatorsPercentDivider"; -import { ValidatorsTableMobileCard } from "./ValidatorsTableMobileCard"; -import { ValidatorsTableRow } from "./ValidatorsTableRow"; - -interface ValidatorsTableBodyProps { - templateColumns: GridProps["templateColumns"]; - data: Option; - isLoading: boolean; - isActive: boolean; - order: ValidatorOrder; - isDesc: boolean; -} - -export const ValidatorsTableBody = ({ - templateColumns, - data, - isLoading, - isActive, - order, - isDesc, -}: ValidatorsTableBodyProps) => { - const isMobile = useMobile(); - const { - chainConfig: { - extra: { singleStakingDenom }, - }, - } = useCelatoneApp(); - const { data: assetInfos } = useAssetInfos({ withPrices: false }); - - if (isLoading) return ; - if (!data) return ; - if (!data.total) - return ( - - ); - - const displayDividers = order === ValidatorOrder.VotingPower && isDesc; - const denomToken = singleStakingDenom - ? coinToTokenWithValue(singleStakingDenom, "0", assetInfos) - : undefined; - return isMobile ? ( - <> - {data.items.map((validator) => ( - - ))} - - ) : ( - <> - {data.items.map((validator) => ( - - - {displayDividers && - data.metadata.percent33Rank === validator.rank && ( - - )} - {displayDividers && - data.metadata.percent66Rank === validator.rank && ( - - )} - - ))} - - ); -}; diff --git a/src/lib/pages/validators/components/validators-table/index.tsx b/src/lib/pages/validators/components/validators-table/index.tsx index fc7393401..1721be0aa 100644 --- a/src/lib/pages/validators/components/validators-table/index.tsx +++ b/src/lib/pages/validators/components/validators-table/index.tsx @@ -1,13 +1,20 @@ import { TableContainer } from "@chakra-ui/react"; +import React from "react"; -import type { ValidatorOrder } from "../../types"; -import { useMobile } from "lib/app-provider"; +import { ValidatorOrder } from "../../types"; +import { useCelatoneApp, useMobile } from "lib/app-provider"; +import { Loading } from "lib/components/Loading"; +import { EmptyState, ErrorFetching } from "lib/components/state"; import { MobileTableContainer } from "lib/components/table"; +import { useAssetInfos } from "lib/services/assetService"; import type { ValidatorsResponse } from "lib/services/validator"; import type { Option } from "lib/types"; +import { coinToTokenWithValue } from "lib/utils"; -import { ValidatorsTableBody } from "./ValidatorsTableBody"; +import { ValidatorsPercentDivider } from "./ValidatorsPercentDivider"; import { ValidatorsTableHeader } from "./ValidatorsTableHeader"; +import { ValidatorsTableMobileCard } from "./ValidatorsTableMobileCard"; +import { ValidatorsTableRow } from "./ValidatorsTableRow"; interface ValidatorsTableProps { data: Option; @@ -31,19 +38,49 @@ export const ValidatorsTable = ({ scrollComponentId, }: ValidatorsTableProps) => { const isMobile = useMobile(); + const { + chainConfig: { + extra: { singleStakingDenom }, + }, + } = useCelatoneApp(); + const { data: assetInfos } = useAssetInfos({ withPrices: false }); + + if (isLoading) return ; + if (!data) + return ( + + ); + if (!data.total) + return ( + + ); + + const displayDividers = order === ValidatorOrder.VotingPower && isDesc; + const denomToken = singleStakingDenom + ? coinToTokenWithValue(singleStakingDenom, "0", assetInfos) + : undefined; + const templateColumns = `${isActive ? "64px " : ""}3fr 2fr 110px 110px`; return ( <> {isMobile ? ( - + {data.items.map((validator) => ( + + ))} ) : ( @@ -56,14 +93,30 @@ export const ValidatorsTable = ({ isDesc={isDesc} setIsDesc={setIsDesc} /> - + {data.items.map((validator) => ( + + + {displayDividers && + (validator.rank === data.metadata.percent33Rank || + validator.rank === data.metadata.percent66Rank) && ( + + )} + + ))} )} From a478b00bbe0b0cf9cc128232828a65f0514eba93 Mon Sep 17 00:00:00 2001 From: songwongtp <16089160+songwongtp@users.noreply.github.com> Date: Tue, 26 Mar 2024 17:30:06 +0700 Subject: [PATCH 2/8] fix: staking provisions --- .../components/validator-top/ValidatorStats.tsx | 2 +- src/lib/services/validatorService.ts | 3 ++- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/src/lib/pages/validator-details/components/validator-top/ValidatorStats.tsx b/src/lib/pages/validator-details/components/validator-top/ValidatorStats.tsx index 62b060e27..a42a96bdb 100644 --- a/src/lib/pages/validator-details/components/validator-top/ValidatorStats.tsx +++ b/src/lib/pages/validator-details/components/validator-top/ValidatorStats.tsx @@ -49,7 +49,7 @@ export const ValidatorStats = ({ singleStakingDenom, }: ValidatorStatsProps) => { const { data: stakingProvisions, isLoading: isStakingProvisionsLoading } = - useValidatorStakingProvisions(); + useValidatorStakingProvisions(!!singleStakingDenom); const { data: delegations, isLoading: isDelegationsLoading } = useValidatorDelegators(validatorAddress); diff --git a/src/lib/services/validatorService.ts b/src/lib/services/validatorService.ts index e5bce4ca0..dcde2aaf0 100644 --- a/src/lib/services/validatorService.ts +++ b/src/lib/services/validatorService.ts @@ -127,13 +127,14 @@ export const useValidators = ( ); }; -export const useValidatorStakingProvisions = () => { +export const useValidatorStakingProvisions = (enabled: boolean) => { const endpoint = useBaseApiRoute("validators"); return useQuery( [CELATONE_QUERY_KEYS.VALIDATOR_STAKING_PROVISIONS, endpoint], async () => getValidatorStakingProvisions(endpoint), { + enabled, retry: 1, } ); From 911cd8cddeaef8c9d9fc02075db15ca8ba91e476 Mon Sep 17 00:00:00 2001 From: songwongtp <16089160+songwongtp@users.noreply.github.com> Date: Tue, 26 Mar 2024 17:35:15 +0700 Subject: [PATCH 3/8] fix: staking provision --- .../components/validator-top/ValidatorStats.tsx | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/src/lib/pages/validator-details/components/validator-top/ValidatorStats.tsx b/src/lib/pages/validator-details/components/validator-top/ValidatorStats.tsx index a42a96bdb..e438df63b 100644 --- a/src/lib/pages/validator-details/components/validator-top/ValidatorStats.tsx +++ b/src/lib/pages/validator-details/components/validator-top/ValidatorStats.tsx @@ -6,7 +6,7 @@ import { useValidatorStakingProvisions, } from "lib/services/validatorService"; import type { Option, ValidatorAddr } from "lib/types"; -import { formatPrettyPercent } from "lib/utils"; +import { divWithDefault, formatPrettyPercent } from "lib/utils"; const StatWithLabel = ({ label, @@ -55,9 +55,11 @@ export const ValidatorStats = ({ const estimatedApr = stakingProvisions ? formatPrettyPercent( - stakingProvisions.stakingProvisions - .div(totalVotingPower.mul(1 - commissionRate)) - .toNumber(), + divWithDefault( + stakingProvisions.stakingProvisions, + totalVotingPower.mul(1 - commissionRate), + 0 + ).toNumber(), 2, true ) From 083a3eee5d88f51717d7290dbc3432ae6225c1b5 Mon Sep 17 00:00:00 2001 From: songwongtp <16089160+songwongtp@users.noreply.github.com> Date: Tue, 26 Mar 2024 17:38:59 +0700 Subject: [PATCH 4/8] fix: validator filter --- src/lib/pages/validators/components/ActiveFilter.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/lib/pages/validators/components/ActiveFilter.tsx b/src/lib/pages/validators/components/ActiveFilter.tsx index f8441eca3..582348285 100644 --- a/src/lib/pages/validators/components/ActiveFilter.tsx +++ b/src/lib/pages/validators/components/ActiveFilter.tsx @@ -1,5 +1,6 @@ import { Flex, Text } from "@chakra-ui/react"; import { Select } from "chakra-react-select"; +import { isUndefined } from "lodash"; import { useMemo } from "react"; import type { Option } from "lib/types"; @@ -12,7 +13,7 @@ interface ActiveFilterProps { } const getOptionLabel = (label: string, count: Option) => - label + (count ? ` (${count})` : ""); + label + (!isUndefined(count) ? ` (${count})` : ""); export const ActiveFilter = ({ isActive, From aa9adbce595f2fc7afe45d3c21498d46929d83f0 Mon Sep 17 00:00:00 2001 From: songwongtp <16089160+songwongtp@users.noreply.github.com> Date: Tue, 26 Mar 2024 18:02:24 +0700 Subject: [PATCH 5/8] fix: move verifier --- src/config/chain/initia.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/config/chain/initia.ts b/src/config/chain/initia.ts index 6710b4d52..a9983a378 100644 --- a/src/config/chain/initia.ts +++ b/src/config/chain/initia.ts @@ -27,7 +27,7 @@ export const INITIA_CHAIN_CONFIGS: ChainConfigs = { enabled: true, moduleMaxFileSize: 1_048_576, decodeApi: INITIA_DECODER, - verify: "https://compiler.mahalo-1.initia.xyz/contracts/verify", + verify: "https://compiler.mahalo-2.initia.xyz/contracts/verify", }, pool: { enabled: false, From d8ef43b76a2eba06834cb21b34cd94825dafa0ed Mon Sep 17 00:00:00 2001 From: songwongtp <16089160+songwongtp@users.noreply.github.com> Date: Wed, 27 Mar 2024 10:57:51 +0700 Subject: [PATCH 6/8] fix: empty state --- .../validators/components/validators-table/index.tsx | 9 ++------- 1 file changed, 2 insertions(+), 7 deletions(-) diff --git a/src/lib/pages/validators/components/validators-table/index.tsx b/src/lib/pages/validators/components/validators-table/index.tsx index 1721be0aa..4bd328985 100644 --- a/src/lib/pages/validators/components/validators-table/index.tsx +++ b/src/lib/pages/validators/components/validators-table/index.tsx @@ -46,17 +46,12 @@ export const ValidatorsTable = ({ const { data: assetInfos } = useAssetInfos({ withPrices: false }); if (isLoading) return ; - if (!data) - return ( - - ); + if (!data) return ; if (!data.total) return ( ); From d133bde7cb365f1695230e55c34c17407c476065 Mon Sep 17 00:00:00 2001 From: songwongtp <16089160+songwongtp@users.noreply.github.com> Date: Wed, 27 Mar 2024 11:01:34 +0700 Subject: [PATCH 7/8] fix: fragment --- .../pages/validators/components/validators-table/index.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/lib/pages/validators/components/validators-table/index.tsx b/src/lib/pages/validators/components/validators-table/index.tsx index 4bd328985..d51ababe0 100644 --- a/src/lib/pages/validators/components/validators-table/index.tsx +++ b/src/lib/pages/validators/components/validators-table/index.tsx @@ -1,5 +1,5 @@ import { TableContainer } from "@chakra-ui/react"; -import React from "react"; +import { Fragment } from "react"; import { ValidatorOrder } from "../../types"; import { useCelatoneApp, useMobile } from "lib/app-provider"; @@ -89,7 +89,7 @@ export const ValidatorsTable = ({ setIsDesc={setIsDesc} /> {data.items.map((validator) => ( - + )} - + ))} )} From 55942458b090365019674ebaaa3c8698c77af93c Mon Sep 17 00:00:00 2001 From: songwongtp <16089160+songwongtp@users.noreply.github.com> Date: Wed, 27 Mar 2024 11:15:26 +0700 Subject: [PATCH 8/8] fix: filter width --- src/lib/pages/validators/components/ActiveFilter.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/lib/pages/validators/components/ActiveFilter.tsx b/src/lib/pages/validators/components/ActiveFilter.tsx index 582348285..7c1660ee3 100644 --- a/src/lib/pages/validators/components/ActiveFilter.tsx +++ b/src/lib/pages/validators/components/ActiveFilter.tsx @@ -33,7 +33,7 @@ export const ActiveFilter = ({ ); return ( - + Show only