From 4dea9bffefab49b4f31cea2dbde5410f09cdf427 Mon Sep 17 00:00:00 2001 From: eshark9312 Date: Mon, 29 Jan 2024 05:02:55 -0500 Subject: [PATCH 01/17] fix validatorlist filter - input notification & enter on empty search box --- .../forms/FilterBox/FilterSearchBox.tsx | 2 +- .../components/ValidatorsFilter.tsx | 24 ++++++++++++++----- 2 files changed, 19 insertions(+), 7 deletions(-) diff --git a/packages/ui/src/common/components/forms/FilterBox/FilterSearchBox.tsx b/packages/ui/src/common/components/forms/FilterBox/FilterSearchBox.tsx index a9b20766ea..ba5f7f4af4 100644 --- a/packages/ui/src/common/components/forms/FilterBox/FilterSearchBox.tsx +++ b/packages/ui/src/common/components/forms/FilterBox/FilterSearchBox.tsx @@ -43,7 +43,7 @@ export const SearchBox = React.memo(({ value, onApply, onChange, label, displayR const change = onChange && (({ target }: ChangeEvent) => onChange(target.value)) const isValid = () => !value || value.length === 0 || value.length > 2 const keyDown = - !isValid() || !value || !onApply ? undefined : ({ key }: React.KeyboardEvent) => key === 'Enter' && onApply() + !isValid() || !onApply ? undefined : ({ key }: React.KeyboardEvent) => key === 'Enter' && onApply() const reset = onChange && onApply && diff --git a/packages/ui/src/validators/components/ValidatorsFilter.tsx b/packages/ui/src/validators/components/ValidatorsFilter.tsx index 5772a80b38..56c9638322 100644 --- a/packages/ui/src/validators/components/ValidatorsFilter.tsx +++ b/packages/ui/src/validators/components/ValidatorsFilter.tsx @@ -1,7 +1,8 @@ import React, { useEffect, useState } from 'react' import styled from 'styled-components' -import { FilterBox } from '@/common/components/forms/FilterBox' +import { InputNotification } from '@/common/components/forms' +import { Fields, FilterBox } from '@/common/components/forms/FilterBox' import { SearchBox } from '@/common/components/forms/FilterBox/FilterSearchBox' import { FilterSelect } from '@/common/components/selects' @@ -37,8 +38,8 @@ export const ValidatorsFilter = ({ filter }: ValidatorFilterProps) => { : undefined return ( - - + + { /> - - + + ) } +const ValidatorFilterBox = styled(FilterBox)` + ${Fields} { + padding-bottom: 22px; + } +` + const SelectFields = styled.div` display: flex; justify-content: flex-start; @@ -74,11 +81,16 @@ const SelectFields = styled.div` } } ` -const Fields = styled.div` +const ResponsiveWrapper = styled.div` display: flex; justify-content: space-between; gap: 8px; + ${InputNotification} { + top: unset; + bottom: 2px; + } + @media (max-width: 767px) { flex-direction: column; } From cee2234ac4edf7af95968210ae947d74e1b2c763 Mon Sep 17 00:00:00 2001 From: eshark9312 Date: Mon, 29 Jan 2024 21:49:34 -0500 Subject: [PATCH 02/17] don't show validation message until enter key typed --- .../forms/FilterBox/FilterSearchBox.tsx | 16 +++++++++------- 1 file changed, 9 insertions(+), 7 deletions(-) diff --git a/packages/ui/src/common/components/forms/FilterBox/FilterSearchBox.tsx b/packages/ui/src/common/components/forms/FilterBox/FilterSearchBox.tsx index ba5f7f4af4..e3d6360d2e 100644 --- a/packages/ui/src/common/components/forms/FilterBox/FilterSearchBox.tsx +++ b/packages/ui/src/common/components/forms/FilterBox/FilterSearchBox.tsx @@ -40,10 +40,16 @@ interface SearchBoxProps extends ControlProps { displayReset?: boolean } export const SearchBox = React.memo(({ value, onApply, onChange, label, displayReset }: SearchBoxProps) => { + const [message, setMessage] = useState('') + useEffect(() => { + setMessage('') + }, [value]) const change = onChange && (({ target }: ChangeEvent) => onChange(target.value)) const isValid = () => !value || value.length === 0 || value.length > 2 - const keyDown = - !isValid() || !onApply ? undefined : ({ key }: React.KeyboardEvent) => key === 'Enter' && onApply() + const keyDown = !onApply + ? undefined + : ({ key }: React.KeyboardEvent) => + key === 'Enter' && (isValid() ? onApply() : setMessage('Minimum of 3 characters is required')) const reset = onChange && onApply && @@ -54,11 +60,7 @@ export const SearchBox = React.memo(({ value, onApply, onChange, label, displayR return ( {label} - + {displayReset && value && ( From 1add3bf1f1a16d47e94269dae02ed7b4f1300478 Mon Sep 17 00:00:00 2001 From: eshark9312 Date: Mon, 29 Jan 2024 21:56:23 -0500 Subject: [PATCH 03/17] show 'All' in the filter select as default --- packages/ui/src/validators/components/ValidatorsFilter.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/ui/src/validators/components/ValidatorsFilter.tsx b/packages/ui/src/validators/components/ValidatorsFilter.tsx index 56c9638322..7b046d63ec 100644 --- a/packages/ui/src/validators/components/ValidatorsFilter.tsx +++ b/packages/ui/src/validators/components/ValidatorsFilter.tsx @@ -25,8 +25,8 @@ export const ValidatorsFilter = ({ filter }: ValidatorFilterProps) => { const display = () => filter.setSearch(search) const { isVerified, isActive } = filter - const verificationValue = isVerified === true ? 'verified' : isVerified === false ? 'unverified' : undefined - const stateValue = isActive === true ? 'active' : isActive === false ? 'waiting' : undefined + const verificationValue = isVerified === true ? 'verified' : isVerified === false ? 'unverified' : null + const stateValue = isActive === true ? 'active' : isActive === false ? 'waiting' : null const clear = filter.search || verificationValue || stateValue From 87e8a69e2b2e377d5da4196b476d0fde4ad44110 Mon Sep 17 00:00:00 2001 From: eshark9312 Date: Mon, 29 Jan 2024 22:42:22 -0500 Subject: [PATCH 04/17] fix validtor card responsiveness --- .../modals/validatorCard/Nominators.tsx | 12 ++++++++---- .../modals/validatorCard/ValidatorDetail.tsx | 19 +++++++++++++++++-- 2 files changed, 25 insertions(+), 6 deletions(-) diff --git a/packages/ui/src/validators/modals/validatorCard/Nominators.tsx b/packages/ui/src/validators/modals/validatorCard/Nominators.tsx index d7c9df0f6d..acaa3689fe 100644 --- a/packages/ui/src/validators/modals/validatorCard/Nominators.tsx +++ b/packages/ui/src/validators/modals/validatorCard/Nominators.tsx @@ -29,10 +29,10 @@ export const Nominators = ({ validator }: Props) => { {validator.staking?.nominators?.map(({ address, staking }, index) => ( - + - + ))} @@ -51,10 +51,9 @@ const Title = styled.h4` const NominatorList = styled(List)` gap: 8px; ` -const ValidatorItemWrap = styled.div` +const NominatorItemWrap = styled.div` display: grid; grid-template-columns: 1fr 1fr; - grid-template-rows: 1fr; justify-content: space-between; justify-items: end; align-items: center; @@ -65,6 +64,11 @@ const ValidatorItemWrap = styled.div` cursor: pointer; transition: ${Transitions.all}; ${TableListItemAsLinkHover} + + @media (max-width: 424px) { + grid-gap: 8px; + grid-template-columns: 1fr; + } ` const ListHeaders = styled.div` display: grid; diff --git a/packages/ui/src/validators/modals/validatorCard/ValidatorDetail.tsx b/packages/ui/src/validators/modals/validatorCard/ValidatorDetail.tsx index 15fbb8bba6..e46b788ce1 100644 --- a/packages/ui/src/validators/modals/validatorCard/ValidatorDetail.tsx +++ b/packages/ui/src/validators/modals/validatorCard/ValidatorDetail.tsx @@ -68,7 +68,9 @@ export const ValidatorDetail = ({ validator, eraIndex, hideModal }: Props) => {
Era points
- +
+ +
)} @@ -115,6 +117,14 @@ const Details = styled(RowGapBlock)` const ModalStatistics = styled(StatisticsThreeColumns)` grid-gap: 10px; + + @media (max-width: 767px) { + grid-template-columns: 1fr 1fr; + } + + @media (max-width: 424px) { + grid-template-columns: 1fr; + } ` const Stat = styled(NumericValueStat)` @@ -123,5 +133,10 @@ const Stat = styled(NumericValueStat)` const RewardPointsChartWrapper = styled.div` width: 100%; - height: 200px; + overflow: auto; + + > div { + min-width: 500px; + height: 200px; + } ` From 7e65554a23f81bc10dd0e6560f5f404c70e61ce1 Mon Sep 17 00:00:00 2001 From: eshark9312 Date: Mon, 29 Jan 2024 22:44:06 -0500 Subject: [PATCH 05/17] fix typo 'Norminate' --- .../modals/NominatingRedirectModal/NominatingRedirectModal.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/ui/src/validators/modals/NominatingRedirectModal/NominatingRedirectModal.tsx b/packages/ui/src/validators/modals/NominatingRedirectModal/NominatingRedirectModal.tsx index dd058515e7..e5c13617bc 100644 --- a/packages/ui/src/validators/modals/NominatingRedirectModal/NominatingRedirectModal.tsx +++ b/packages/ui/src/validators/modals/NominatingRedirectModal/NominatingRedirectModal.tsx @@ -29,7 +29,7 @@ export const NominatingRedirectModal = () => { size="medium" href="https://polkadot.js.org/apps/?rpc=wss://rpc.joystream.org:9944#/staking/actions" > - Norminate + Nominate From 180325e3ace72059af8af38b6bd0c50f837132f8 Mon Sep 17 00:00:00 2001 From: eshark9312 Date: Mon, 29 Jan 2024 22:51:00 -0500 Subject: [PATCH 06/17] rename reward widget label - last era --- packages/ui/src/validators/components/statistics/Rewards.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/ui/src/validators/components/statistics/Rewards.tsx b/packages/ui/src/validators/components/statistics/Rewards.tsx index 7e66d5b6dc..94d0d97c5b 100644 --- a/packages/ui/src/validators/components/statistics/Rewards.tsx +++ b/packages/ui/src/validators/components/statistics/Rewards.tsx @@ -23,7 +23,7 @@ export const Rewards = ({ totalRewards, lastRewards }: RewardsProps) => { - Last + Last Era From 4f953cc486954719e90d9cf78dd9ffa6b0990a33 Mon Sep 17 00:00:00 2001 From: eshark9312 Date: Mon, 29 Jan 2024 23:19:11 -0500 Subject: [PATCH 07/17] fix validator page widgets tooltips --- .../ui/src/validators/components/statistics/Staking.tsx | 8 ++++---- .../validators/components/statistics/ValidatorsState.tsx | 8 +------- 2 files changed, 5 insertions(+), 11 deletions(-) diff --git a/packages/ui/src/validators/components/statistics/Staking.tsx b/packages/ui/src/validators/components/statistics/Staking.tsx index 319a042c3b..204771cac8 100644 --- a/packages/ui/src/validators/components/statistics/Staking.tsx +++ b/packages/ui/src/validators/components/statistics/Staking.tsx @@ -20,10 +20,10 @@ export const Staking = ({ idealStaking, currentStaking, stakingPercentage }: Sta return ( diff --git a/packages/ui/src/validators/components/statistics/ValidatorsState.tsx b/packages/ui/src/validators/components/statistics/ValidatorsState.tsx index f35be07583..8737e3bed8 100644 --- a/packages/ui/src/validators/components/statistics/ValidatorsState.tsx +++ b/packages/ui/src/validators/components/statistics/ValidatorsState.tsx @@ -16,13 +16,7 @@ export const ValidatorsState = ({ allNominatorsCount, }: ValidatorsStateProps) => { return ( - + Validator (Active / Waiting) From 7dfbd81f680a5d6f3d9dd48e9e32671b887c7d1b Mon Sep 17 00:00:00 2001 From: eshark9312 Date: Tue, 30 Jan 2024 00:53:33 -0500 Subject: [PATCH 08/17] fix social media icons as hyperlink --- .../components/MemberProfile/MemberDetails.tsx | 10 +--------- .../src/memberships/constants/externalResourceLink.ts | 8 ++++++++ packages/ui/src/memberships/constants/index.ts | 1 + .../ui/src/validators/components/ValidatorInfo.tsx | 10 ++++++---- 4 files changed, 16 insertions(+), 13 deletions(-) create mode 100644 packages/ui/src/memberships/constants/externalResourceLink.ts diff --git a/packages/ui/src/memberships/components/MemberProfile/MemberDetails.tsx b/packages/ui/src/memberships/components/MemberProfile/MemberDetails.tsx index 57030ff329..8efac73a7c 100644 --- a/packages/ui/src/memberships/components/MemberProfile/MemberDetails.tsx +++ b/packages/ui/src/memberships/components/MemberProfile/MemberDetails.tsx @@ -13,6 +13,7 @@ import { SidePaneLabel, EmptyBody, } from '@/common/components/SidePane' +import { externalResourceLink } from '@/memberships/constants' import { useIsMyMembership } from '@/memberships/hooks/useIsMyMembership' import { useMemberExtraInfo } from '@/memberships/hooks/useMemberExtraInfo' @@ -37,15 +38,6 @@ export const MemberDetails = React.memo(({ member }: Props) => { initiatingLeaving = '-', } = useMemberExtraInfo(member) - const externalResourceLink: any = { - TELEGRAM: 'https://web.telegram.org/k/#@', - TWITTER: 'https://twitter.com/', - FACEBOOK: 'https://facebook.com/', - YOUTUBE: 'https://youtube.com/user/', - LINKEDIN: 'https://www.linkedin.com/in/', - GITHUB: 'https://github.com/', - } - if (isLoading || !memberDetails) { return ( diff --git a/packages/ui/src/memberships/constants/externalResourceLink.ts b/packages/ui/src/memberships/constants/externalResourceLink.ts new file mode 100644 index 0000000000..6f2477214e --- /dev/null +++ b/packages/ui/src/memberships/constants/externalResourceLink.ts @@ -0,0 +1,8 @@ +export const externalResourceLink: any = { + TELEGRAM: 'https://web.telegram.org/k/#@', + TWITTER: 'https://twitter.com/', + FACEBOOK: 'https://facebook.com/', + YOUTUBE: 'https://youtube.com/user/', + LINKEDIN: 'https://www.linkedin.com/in/', + GITHUB: 'https://github.com/', +} diff --git a/packages/ui/src/memberships/constants/index.ts b/packages/ui/src/memberships/constants/index.ts index 856f210744..d21e69ee07 100644 --- a/packages/ui/src/memberships/constants/index.ts +++ b/packages/ui/src/memberships/constants/index.ts @@ -1 +1,2 @@ export * from './email' +export * from './externalResourceLink' diff --git a/packages/ui/src/validators/components/ValidatorInfo.tsx b/packages/ui/src/validators/components/ValidatorInfo.tsx index 7a419e19b6..5b53b1d523 100644 --- a/packages/ui/src/validators/components/ValidatorInfo.tsx +++ b/packages/ui/src/validators/components/ValidatorInfo.tsx @@ -4,12 +4,14 @@ import styled from 'styled-components' import { CopyComponent } from '@/common/components/CopyComponent' import { DiscordIcon, TelegramIcon, TwitterIcon } from '@/common/components/icons/socials' +import { Link } from '@/common/components/Link' import { DefaultTooltip, Tooltip } from '@/common/components/Tooltip' import { BorderRad, Colors, Transitions } from '@/common/constants' import { shortenAddress } from '@/common/model/formatters' import { Address } from '@/common/types' import { MemberIcons } from '@/memberships/components' import { Avatar } from '@/memberships/components/Avatar' +import { externalResourceLink } from '@/memberships/constants' import { MemberWithDetails } from '@/memberships/types' interface ValidatorInfoProps { @@ -39,18 +41,18 @@ export const ValidatorInfo = React.memo(({ address, member, size = 's' }: Valida {(twitter || telegram || discord) && ( {twitter && ( - + e.stopPropagation()} href={`${externalResourceLink.TELEGRAM}${twitter.value}`}> - + )} {telegram && ( - + e.stopPropagation()} href={`${externalResourceLink.TELEGRAM}${telegram.value}`}> - + )} {discord && ( From 449ba0bab019e73a02983f174e9c1d42e92c33e1 Mon Sep 17 00:00:00 2001 From: Theophile Sandoz Date: Tue, 30 Jan 2024 12:19:55 +0100 Subject: [PATCH 09/17] Rename `ExternalResourceLink` and type it --- packages/ui/src/common/utils/object.ts | 3 +++ .../memberships/components/MemberProfile/MemberDetails.tsx | 7 ++++--- .../ui/src/memberships/constants/externalResourceLink.ts | 4 ++-- packages/ui/src/validators/components/ValidatorInfo.tsx | 6 +++--- 4 files changed, 12 insertions(+), 8 deletions(-) diff --git a/packages/ui/src/common/utils/object.ts b/packages/ui/src/common/utils/object.ts index 65b3fce5d8..4e9f1a086b 100644 --- a/packages/ui/src/common/utils/object.ts +++ b/packages/ui/src/common/utils/object.ts @@ -22,3 +22,6 @@ const mapEntries = ( transform: (x: any, key?: string | number, context?: AnyObject) => any, context?: AnyObject ): [any, any][] => entries.map(([key, value]) => [key, transform(value, key, context)]) + +export const has = >(key: K, o: T): key is Extract => + key in o diff --git a/packages/ui/src/memberships/components/MemberProfile/MemberDetails.tsx b/packages/ui/src/memberships/components/MemberProfile/MemberDetails.tsx index 8efac73a7c..73691375de 100644 --- a/packages/ui/src/memberships/components/MemberProfile/MemberDetails.tsx +++ b/packages/ui/src/memberships/components/MemberProfile/MemberDetails.tsx @@ -13,7 +13,8 @@ import { SidePaneLabel, EmptyBody, } from '@/common/components/SidePane' -import { externalResourceLink } from '@/memberships/constants' +import { has } from '@/common/utils/object' +import { ExternalResourceLink } from '@/memberships/constants' import { useIsMyMembership } from '@/memberships/hooks/useIsMyMembership' import { useMemberExtraInfo } from '@/memberships/hooks/useMemberExtraInfo' @@ -135,9 +136,9 @@ export const MemberDetails = React.memo(({ member }: Props) => { - {externalResourceLink[externalResource.source] ? ( + {has(externalResource.source, ExternalResourceLink) ? ( {externalResource.value} diff --git a/packages/ui/src/memberships/constants/externalResourceLink.ts b/packages/ui/src/memberships/constants/externalResourceLink.ts index 6f2477214e..ffedcac8a1 100644 --- a/packages/ui/src/memberships/constants/externalResourceLink.ts +++ b/packages/ui/src/memberships/constants/externalResourceLink.ts @@ -1,8 +1,8 @@ -export const externalResourceLink: any = { +export const ExternalResourceLink = { TELEGRAM: 'https://web.telegram.org/k/#@', TWITTER: 'https://twitter.com/', FACEBOOK: 'https://facebook.com/', YOUTUBE: 'https://youtube.com/user/', LINKEDIN: 'https://www.linkedin.com/in/', GITHUB: 'https://github.com/', -} +} as const diff --git a/packages/ui/src/validators/components/ValidatorInfo.tsx b/packages/ui/src/validators/components/ValidatorInfo.tsx index 5b53b1d523..2a97a731dc 100644 --- a/packages/ui/src/validators/components/ValidatorInfo.tsx +++ b/packages/ui/src/validators/components/ValidatorInfo.tsx @@ -11,7 +11,7 @@ import { shortenAddress } from '@/common/model/formatters' import { Address } from '@/common/types' import { MemberIcons } from '@/memberships/components' import { Avatar } from '@/memberships/components/Avatar' -import { externalResourceLink } from '@/memberships/constants' +import { ExternalResourceLink } from '@/memberships/constants' import { MemberWithDetails } from '@/memberships/types' interface ValidatorInfoProps { @@ -41,14 +41,14 @@ export const ValidatorInfo = React.memo(({ address, member, size = 's' }: Valida {(twitter || telegram || discord) && ( {twitter && ( - e.stopPropagation()} href={`${externalResourceLink.TELEGRAM}${twitter.value}`}> + e.stopPropagation()} href={`${ExternalResourceLink.TWITTER}${twitter.value}`}> )} {telegram && ( - e.stopPropagation()} href={`${externalResourceLink.TELEGRAM}${telegram.value}`}> + e.stopPropagation()} href={`${ExternalResourceLink.TELEGRAM}${telegram.value}`}> From 4c27d4af6b27fe1c1d921eb18e43e1a4ff6d0271 Mon Sep 17 00:00:00 2001 From: eshark9312 Date: Tue, 30 Jan 2024 07:40:05 -0500 Subject: [PATCH 10/17] add 2 decimals to apr --- packages/ui/src/validators/providers/utils.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/ui/src/validators/providers/utils.ts b/packages/ui/src/validators/providers/utils.ts index 59cb67132a..a7a67c9ff8 100644 --- a/packages/ui/src/validators/providers/utils.ts +++ b/packages/ui/src/validators/providers/utils.ts @@ -130,7 +130,7 @@ export const getValidatorInfo = ( const commission = validator.commission const averageReward = rewards.reduce((sum, reward) => sum.add(reward.eraReward), BN_ZERO).divn(rewards.length) - const apr = Number(averageReward.muln(ERAS_PER_YEAR).muln(commission).div(staking.total)) + const apr = Number(averageReward.muln(ERAS_PER_YEAR).muln(commission).muln(100).div(staking.total)) / 100 return { APR: apr } }) ) From 75752ad142d673c290646f6d3b73292dce6fed0f Mon Sep 17 00:00:00 2001 From: eshark9312 Date: Tue, 30 Jan 2024 07:41:30 -0500 Subject: [PATCH 11/17] fix search box not to show invalid choice until type enter --- .../forms/FilterBox/FilterSearchBox.tsx | 25 +++++++++++-------- 1 file changed, 15 insertions(+), 10 deletions(-) diff --git a/packages/ui/src/common/components/forms/FilterBox/FilterSearchBox.tsx b/packages/ui/src/common/components/forms/FilterBox/FilterSearchBox.tsx index e3d6360d2e..8191fa5bd0 100644 --- a/packages/ui/src/common/components/forms/FilterBox/FilterSearchBox.tsx +++ b/packages/ui/src/common/components/forms/FilterBox/FilterSearchBox.tsx @@ -40,16 +40,17 @@ interface SearchBoxProps extends ControlProps { displayReset?: boolean } export const SearchBox = React.memo(({ value, onApply, onChange, label, displayReset }: SearchBoxProps) => { - const [message, setMessage] = useState('') - useEffect(() => { - setMessage('') - }, [value]) const change = onChange && (({ target }: ChangeEvent) => onChange(target.value)) - const isValid = () => !value || value.length === 0 || value.length > 2 - const keyDown = !onApply - ? undefined - : ({ key }: React.KeyboardEvent) => - key === 'Enter' && (isValid() ? onApply() : setMessage('Minimum of 3 characters is required')) + const isValid = !value || value.length === 0 || value.length > 2 + const [showInvalid, setShowInvalid] = useState(false) + useEffect(() => { + if (isValid) setShowInvalid(false) + }, [isValid]) + const keyDown = ({ key }: React.KeyboardEvent) => { + if (key !== 'Enter') return + if (!isValid) return setShowInvalid(true) + onApply?.() + } const reset = onChange && onApply && @@ -60,7 +61,11 @@ export const SearchBox = React.memo(({ value, onApply, onChange, label, displayR return ( {label} - + {displayReset && value && ( From c366f5d336071056c63631420c3f6b05af8a3644 Mon Sep 17 00:00:00 2001 From: eshark9312 <129978066+eshark9312@users.noreply.github.com> Date: Tue, 30 Jan 2024 11:39:12 -0500 Subject: [PATCH 12/17] Update packages/ui/src/memberships/constants/externalResourceLink.ts Co-authored-by: Theophile Sandoz --- packages/ui/src/memberships/constants/externalResourceLink.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/ui/src/memberships/constants/externalResourceLink.ts b/packages/ui/src/memberships/constants/externalResourceLink.ts index ffedcac8a1..ac2740193c 100644 --- a/packages/ui/src/memberships/constants/externalResourceLink.ts +++ b/packages/ui/src/memberships/constants/externalResourceLink.ts @@ -1,5 +1,5 @@ export const ExternalResourceLink = { - TELEGRAM: 'https://web.telegram.org/k/#@', + TELEGRAM: 'https://t.me/', TWITTER: 'https://twitter.com/', FACEBOOK: 'https://facebook.com/', YOUTUBE: 'https://youtube.com/user/', From 8975fd1bb70bf958e3cf78501468925334f49301 Mon Sep 17 00:00:00 2001 From: eshark9312 Date: Tue, 30 Jan 2024 12:12:36 -0500 Subject: [PATCH 13/17] fix --- packages/ui/src/validators/components/statistics/Era.tsx | 8 +++----- .../validators/components/statistics/ValidatorsState.tsx | 6 ++++-- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/packages/ui/src/validators/components/statistics/Era.tsx b/packages/ui/src/validators/components/statistics/Era.tsx index 4babce7c28..e0ccc48b73 100644 --- a/packages/ui/src/validators/components/statistics/Era.tsx +++ b/packages/ui/src/validators/components/statistics/Era.tsx @@ -12,7 +12,7 @@ import { import { DurationValue } from '@/common/components/typography/DurationValue' import { ERA_DURATION } from '@/common/constants' import { MILLISECONDS_PER_BLOCK } from '@/common/model/formatters' -import { whenDefined } from '@/common/utils' +import { isNumber, whenDefined } from '@/common/utils' interface EraProps { eraStartedOn: number | undefined @@ -44,13 +44,11 @@ export const Era = ({ eraStartedOn }: EraProps) => { tooltipText="One era consists of 6 epochs with 1 hour duration each." tooltipTitle="Era" tooltipLinkText="What is an era" - actionElement={} + actionElement={isNumber(percentage) && } > Next Reward -
- -
+
{isNumber(nextReward) && }
 Blocks / Points diff --git a/packages/ui/src/validators/components/statistics/ValidatorsState.tsx b/packages/ui/src/validators/components/statistics/ValidatorsState.tsx index 8737e3bed8..c955b93e58 100644 --- a/packages/ui/src/validators/components/statistics/ValidatorsState.tsx +++ b/packages/ui/src/validators/components/statistics/ValidatorsState.tsx @@ -20,13 +20,15 @@ export const ValidatorsState = ({ Validator (Active / Waiting) - {activeValidatorsCount} / {allValidatorsCount - activeValidatorsCount} + {activeValidatorsCount && allValidatorsCount + ? `${activeValidatorsCount} / ${allValidatorsCount - activeValidatorsCount}` + : ''} Nominator (Active / Total) - {activeNominatorsCount} / {allNominatorsCount} + {activeNominatorsCount && allNominatorsCount ? `${activeNominatorsCount} / ${allNominatorsCount}` : ''} From 92d061ca84361f7e24a1bc9f01e4371de4074c81 Mon Sep 17 00:00:00 2001 From: eshark9312 Date: Tue, 30 Jan 2024 14:00:02 -0500 Subject: [PATCH 14/17] fix apr calculation --- packages/ui/src/validators/components/ValidatorsList.tsx | 2 +- packages/ui/src/validators/providers/utils.ts | 9 ++++++++- 2 files changed, 9 insertions(+), 2 deletions(-) diff --git a/packages/ui/src/validators/components/ValidatorsList.tsx b/packages/ui/src/validators/components/ValidatorsList.tsx index 0f9ef40cda..06d504301a 100644 --- a/packages/ui/src/validators/components/ValidatorsList.tsx +++ b/packages/ui/src/validators/components/ValidatorsList.tsx @@ -65,7 +65,7 @@ export const ValidatorsList = ({ validators, eraIndex, order, pagination }: Vali The APR is subject to the amount staked and have a diminishing return for higher token amounts. This is calculated as follow:
- Yearly Reward * Commission / Stake + Yearly Reward * (1 - Commission) / Stake
Reward:
Average reward generated (during the last 30 days) extrapolated over a year.
diff --git a/packages/ui/src/validators/providers/utils.ts b/packages/ui/src/validators/providers/utils.ts index a7a67c9ff8..00c4349b5f 100644 --- a/packages/ui/src/validators/providers/utils.ts +++ b/packages/ui/src/validators/providers/utils.ts @@ -130,7 +130,14 @@ export const getValidatorInfo = ( const commission = validator.commission const averageReward = rewards.reduce((sum, reward) => sum.add(reward.eraReward), BN_ZERO).divn(rewards.length) - const apr = Number(averageReward.muln(ERAS_PER_YEAR).muln(commission).muln(100).div(staking.total)) / 100 + const apr = + Number( + averageReward + .muln(ERAS_PER_YEAR) + .muln(100 - commission) + .muln(100) + .div(staking.total) + ) / 100 return { APR: apr } }) ) From 601cbc2118d94a4b83a8b930de67d32d4fbff80b Mon Sep 17 00:00:00 2001 From: eshark9312 Date: Tue, 30 Jan 2024 14:44:08 -0500 Subject: [PATCH 15/17] fix --- .../validators/components/statistics/Era.tsx | 18 ++++++++++-------- .../components/statistics/ValidatorsState.tsx | 10 ++++++---- 2 files changed, 16 insertions(+), 12 deletions(-) diff --git a/packages/ui/src/validators/components/statistics/Era.tsx b/packages/ui/src/validators/components/statistics/Era.tsx index e0ccc48b73..10f52d7304 100644 --- a/packages/ui/src/validators/components/statistics/Era.tsx +++ b/packages/ui/src/validators/components/statistics/Era.tsx @@ -12,7 +12,7 @@ import { import { DurationValue } from '@/common/components/typography/DurationValue' import { ERA_DURATION } from '@/common/constants' import { MILLISECONDS_PER_BLOCK } from '@/common/model/formatters' -import { isNumber, whenDefined } from '@/common/utils' +import { isDefined, whenDefined } from '@/common/utils' interface EraProps { eraStartedOn: number | undefined @@ -44,21 +44,23 @@ export const Era = ({ eraStartedOn }: EraProps) => { tooltipText="One era consists of 6 epochs with 1 hour duration each." tooltipTitle="Era" tooltipLinkText="What is an era" - actionElement={isNumber(percentage) && } + actionElement={isDefined(percentage) && } > Next Reward -
{isNumber(nextReward) && }
+
{isDefined(nextReward) && }
 Blocks / Points -
- {blocks && ( - + + {blocks ? ( + <> {blocks} / {blocks * POINTS_PER_BLOCK} - + + ) : ( + '- / -' )} -
+ ) diff --git a/packages/ui/src/validators/components/statistics/ValidatorsState.tsx b/packages/ui/src/validators/components/statistics/ValidatorsState.tsx index c955b93e58..2abc3e5d90 100644 --- a/packages/ui/src/validators/components/statistics/ValidatorsState.tsx +++ b/packages/ui/src/validators/components/statistics/ValidatorsState.tsx @@ -20,15 +20,17 @@ export const ValidatorsState = ({ Validator (Active / Waiting) - {activeValidatorsCount && allValidatorsCount - ? `${activeValidatorsCount} / ${allValidatorsCount - activeValidatorsCount}` - : ''} + {`${activeValidatorsCount > 0 ? activeValidatorsCount : '-'} / ${ + allValidatorsCount && activeValidatorsCount ? allValidatorsCount - activeValidatorsCount : '-' + }`} Nominator (Active / Total) - {activeNominatorsCount && allNominatorsCount ? `${activeNominatorsCount} / ${allNominatorsCount}` : ''} + {`${activeNominatorsCount > 0 ? activeValidatorsCount : '-'} / ${ + activeNominatorsCount && allNominatorsCount ? allNominatorsCount : '-' + }`} From a3a506cd3f27884fefad55ffff2f6b80c141be5e Mon Sep 17 00:00:00 2001 From: eshark9312 Date: Tue, 30 Jan 2024 15:54:08 -0500 Subject: [PATCH 16/17] add commission tooltip --- packages/ui/src/validators/components/ValidatorsList.tsx | 3 +++ packages/ui/src/validators/hooks/useValidatorsList.tsx | 4 ++-- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/packages/ui/src/validators/components/ValidatorsList.tsx b/packages/ui/src/validators/components/ValidatorsList.tsx index 06d504301a..a45eeaa3b4 100644 --- a/packages/ui/src/validators/components/ValidatorsList.tsx +++ b/packages/ui/src/validators/components/ValidatorsList.tsx @@ -88,6 +88,9 @@ export const ValidatorsList = ({ validators, eraIndex, order, pagination }: Vali isDescending={order.isDescending} > Commission + The validator commission on the nominators rewards

}> + + {!validators ? ( diff --git a/packages/ui/src/validators/hooks/useValidatorsList.tsx b/packages/ui/src/validators/hooks/useValidatorsList.tsx index d5d23f79eb..c866f5df37 100644 --- a/packages/ui/src/validators/hooks/useValidatorsList.tsx +++ b/packages/ui/src/validators/hooks/useValidatorsList.tsx @@ -4,7 +4,7 @@ import { ValidatorsContext } from '../providers/context' import { ValidatorDetailsOrder } from '../types' const VALIDATOR_PER_PAGE = 7 -const DESCENDING_KEYS: ValidatorDetailsOrder['key'][] = ['apr', 'commission'] +const DESCENDING_KEYS: ValidatorDetailsOrder['key'][] = ['apr'] export const useValidatorsList = () => { const [search, setSearch] = useState('') @@ -17,7 +17,7 @@ export const useValidatorsList = () => { key, isDescending: key !== state.key ? DESCENDING_KEYS.includes(key) : !state.isDescending, }), - { key: 'default', isDescending: false } + { key: 'commission', isDescending: false } ) const { From 53b324fb6ef7fad004987515f23f7c0ffd5e898f Mon Sep 17 00:00:00 2001 From: eshark9312 <129978066+eshark9312@users.noreply.github.com> Date: Wed, 31 Jan 2024 04:36:20 -0500 Subject: [PATCH 17/17] Update packages/ui/src/validators/hooks/useValidatorsList.tsx Co-authored-by: Theophile Sandoz --- packages/ui/src/validators/hooks/useValidatorsList.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/ui/src/validators/hooks/useValidatorsList.tsx b/packages/ui/src/validators/hooks/useValidatorsList.tsx index c866f5df37..8a5ae7b717 100644 --- a/packages/ui/src/validators/hooks/useValidatorsList.tsx +++ b/packages/ui/src/validators/hooks/useValidatorsList.tsx @@ -17,7 +17,7 @@ export const useValidatorsList = () => { key, isDescending: key !== state.key ? DESCENDING_KEYS.includes(key) : !state.isDescending, }), - { key: 'commission', isDescending: false } + { key: 'default', isDescending: false } ) const {