Address Validator dashboard QA issues (#4753)

* fix validatorlist filter - input notification & enter on empty search box * don't show validation message until enter key typed * show 'All' in the filter select as default * fix validtor card responsiveness * fix typo 'Norminate' * rename reward widget label - last era * fix validator page widgets tooltips * fix social media icons as hyperlink * Rename `ExternalResourceLink` and type it * add 2 decimals to apr * fix search box not to show invalid choice until type enter * Update packages/ui/src/memberships/constants/externalResourceLink.ts Co-authored-by: Theophile Sandoz <[email protected]> * fix * fix apr calculation * fix * add commission tooltip * Update packages/ui/src/validators/hooks/useValidatorsList.tsx Co-authored-by: Theophile Sandoz <[email protected]> --------- Co-authored-by: Theophile Sandoz <[email protected]>
Joystream · Jan 31, 2024 · 10f1ce6 · 10f1ce6
1 parent 6c1ef8d
commit 10f1ce6
Show file tree

Hide file tree

Showing 17 changed files with 115 additions and 62 deletions.
diff --git a/packages/ui/src/common/components/forms/FilterBox/FilterSearchBox.tsx b/packages/ui/src/common/components/forms/FilterBox/FilterSearchBox.tsx
@@ -41,9 +41,16 @@ interface SearchBoxProps extends ControlProps<string> {
 }
 export const SearchBox = React.memo(({ value, onApply, onChange, label, displayReset }: SearchBoxProps) => {
   const change = onChange && (({ target }: ChangeEvent<HTMLInputElement>) => onChange(target.value))
-  const isValid = () => !value || value.length === 0 || value.length > 2
-  const keyDown =
-    !isValid() || !value || !onApply ? undefined : ({ key }: React.KeyboardEvent) => key === 'Enter' && onApply()
+  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 &&
@@ -56,8 +63,8 @@ export const SearchBox = React.memo(({ value, onApply, onChange, label, displayR
       <FilterLabel>{label}</FilterLabel>
       <SearchInput
         inputSize={label ? 'xs' : 's'}
-        validation={isValid() ? undefined : 'invalid'}
-        message={isValid() ? '' : 'Minimum of 3 characters is required'}
+        validation={showInvalid ? 'invalid' : undefined}
+        message={showInvalid ? 'Minimum of 3 characters is required' : undefined}
       >
         <InputText placeholder="Search" value={value} onChange={change} onKeyDown={keyDown} />
         {displayReset && value && (

diff --git 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 = <K extends string | number, T extends Record<any, any>>(key: K, o: T): key is Extract<keyof T, K> =>
+  key in o
diff --git a/packages/ui/src/memberships/components/MemberProfile/MemberDetails.tsx b/packages/ui/src/memberships/components/MemberProfile/MemberDetails.tsx
@@ -13,6 +13,8 @@ import {
   SidePaneLabel,
   EmptyBody,
 } from '@/common/components/SidePane'
+import { has } from '@/common/utils/object'
+import { ExternalResourceLink } from '@/memberships/constants'
 import { useIsMyMembership } from '@/memberships/hooks/useIsMyMembership'
 import { useMemberExtraInfo } from '@/memberships/hooks/useMemberExtraInfo'
 
@@ -37,15 +39,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 (
       <EmptyBody>
@@ -143,9 +136,9 @@ export const MemberDetails = React.memo(({ member }: Props) => {
           <SidePaneRow key={`${externalResource.source}-externalResources`}>
             <SidePaneLabel text={socialTitle(externalResource.source)} />
             <SidePaneText>
-              {externalResourceLink[externalResource.source] ? (
+              {has(externalResource.source, ExternalResourceLink) ? (
                 <Link
-                  href={`${externalResourceLink[externalResource.source]}${externalResource.value}`}
+                  href={`${ExternalResourceLink[externalResource.source]}${externalResource.value}`}
                   target="_blank"
                 >
                   {externalResource.value}

diff --git a/packages/ui/src/memberships/constants/externalResourceLink.ts b/packages/ui/src/memberships/constants/externalResourceLink.ts
@@ -0,0 +1,8 @@
+export const ExternalResourceLink = {
+  TELEGRAM: 'https://t.me/',
+  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/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
@@ -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) && (
           <MemberIcons>
             {twitter && (
-              <Tooltip tooltipText={twitter.value}>
+              <Link onClick={(e) => e.stopPropagation()} href={`${ExternalResourceLink.TWITTER}${twitter.value}`}>
                 <SocialTooltip>
                   <TwitterIcon />
                 </SocialTooltip>
-              </Tooltip>
+              </Link>
             )}
             {telegram && (
-              <Tooltip tooltipText={telegram.value}>
+              <Link onClick={(e) => e.stopPropagation()} href={`${ExternalResourceLink.TELEGRAM}${telegram.value}`}>
                 <SocialTooltip>
                   <TelegramIcon />
                 </SocialTooltip>
-              </Tooltip>
+              </Link>
             )}
             {discord && (
               <Tooltip tooltipText={discord.value}>

diff --git 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'
 
@@ -24,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
@@ -37,8 +38,8 @@ export const ValidatorsFilter = ({ filter }: ValidatorFilterProps) => {
       : undefined
 
   return (
-    <FilterBox onClear={clear}>
-      <Fields>
+    <ValidatorFilterBox onClear={clear}>
+      <ResponsiveWrapper>
         <SelectFields>
           <FilterSelect
             title="Verification"
@@ -54,11 +55,17 @@ export const ValidatorsFilter = ({ filter }: ValidatorFilterProps) => {
           />
         </SelectFields>
         <SearchBox label="Search" value={search} onApply={display} onChange={setSearch} />
-      </Fields>
-    </FilterBox>
+      </ResponsiveWrapper>
+    </ValidatorFilterBox>
   )
 }
 
+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;
   }

diff --git 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:
                     <br />
-                    <code>Yearly Reward * Commission / Stake</code>
+                    <code>Yearly Reward * (1 - Commission) / Stake</code>
                     <dl>
                       <dt>Reward:</dt>
                       <dd>Average reward generated (during the last 30 days) extrapolated over a year.</dd>
@@ -88,6 +88,9 @@ export const ValidatorsList = ({ validators, eraIndex, order, pagination }: Vali
               isDescending={order.isDescending}
             >
               Commission
+              <Tooltip tooltipText={<p>The validator commission on the nominators rewards</p>}>
+                <TooltipDefault />
+              </Tooltip>
             </SortHeader>
           </ListHeaders>
           {!validators ? (

diff --git 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 { isDefined, whenDefined } from '@/common/utils'
 
 interface EraProps {
   eraStartedOn: number | undefined
@@ -44,23 +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={<PercentageChart percentage={percentage ?? 0} small />}
+      actionElement={isDefined(percentage) && <PercentageChart percentage={percentage} small />}
     >
       <StatisticItemSpacedContent>
         <StatisticLabel>Next Reward</StatisticLabel>
-        <div>
-          <DurationValue value={formatDurationDate(nextReward ?? 0)} />
-        </div>
+        <div>{isDefined(nextReward) && <DurationValue value={formatDurationDate(nextReward)} />}</div>
       </StatisticItemSpacedContent>
       <StatisticItemSpacedContent>
         <StatisticLabel>Blocks / Points</StatisticLabel>
-        <div>
-          {blocks && (
-            <NumericValue>
+        <NumericValue>
+          {blocks ? (
+            <>
               <BlockIcon /> {blocks} / {blocks * POINTS_PER_BLOCK}
-            </NumericValue>
+            </>
+          ) : (
+            '- / -'
           )}
-        </div>
+        </NumericValue>
       </StatisticItemSpacedContent>
     </StatisticItem>
   )

diff --git 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) => {
         <TokenValue size="l" value={totalRewards} />
       </StatisticItemSpacedContent>
       <StatisticItemSpacedContent>
-        <StatisticLabel> Last </StatisticLabel>
+        <StatisticLabel>Last Era</StatisticLabel>
         <TokenValue size="l" value={lastRewards} />
       </StatisticItemSpacedContent>
     </StatisticItem>

diff --git 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 (
     <StatisticItem
       title="staking"
-      tooltipText="tooltip text..."
-      tooltipTitle="staking tooltip title"
-      tooltipLinkText="link..."
-      tooltipLinkURL="#"
+      tooltipText="The ideal staking amount is 50% of the total tokens."
+      tooltipTitle="Staking Amount"
+      tooltipLinkText="Handbook"
+      tooltipLinkURL="https://handbook.joystream.org/system/accounts-and-staking"
       actionElement={Percentage}
     >
       <StatisticItemSpacedContent>

diff --git a/packages/ui/src/validators/components/statistics/ValidatorsState.tsx b/packages/ui/src/validators/components/statistics/ValidatorsState.tsx
@@ -16,23 +16,21 @@ export const ValidatorsState = ({
   allNominatorsCount,
 }: ValidatorsStateProps) => {
   return (
-    <StatisticItem
-      title="validators and Nominators"
-      tooltipText="tooltip text..."
-      tooltipTitle="Validators State"
-      tooltipLinkText="link..."
-      tooltipLinkURL="#"
-    >
+    <StatisticItem title="validators and Nominators">
       <StatisticItemSpacedContent>
         <StatisticLabel>Validator (Active / Waiting)</StatisticLabel>
         <NumericValue>
-          {activeValidatorsCount} / {allValidatorsCount - activeValidatorsCount}
+          {`${activeValidatorsCount > 0 ? activeValidatorsCount : '-'} / ${
+            allValidatorsCount && activeValidatorsCount ? allValidatorsCount - activeValidatorsCount : '-'
+          }`}
         </NumericValue>
       </StatisticItemSpacedContent>
       <StatisticItemSpacedContent>
         <StatisticLabel>Nominator (Active / Total)</StatisticLabel>
         <NumericValue>
-          {activeNominatorsCount} / {allNominatorsCount}
+          {`${activeNominatorsCount > 0 ? activeValidatorsCount : '-'} / ${
+            activeNominatorsCount && allNominatorsCount ? allNominatorsCount : '-'
+          }`}
         </NumericValue>
       </StatisticItemSpacedContent>
     </StatisticItem>

diff --git 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('')

diff --git 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 <ArrowRightIcon white />
+          Nominate <ArrowRightIcon white />
         </LinkPrimary>
       </ModalFooter>
     </Modal>

diff --git 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) => {
           <NominatorList>
             {validator.staking?.nominators?.map(({ address, staking }, index) => (
               <ListItem key={index} borderless>
-                <ValidatorItemWrap>
+                <NominatorItemWrap>
                   <UnknownAccountInfo address={address} placeholderName="Nominator account" />
                   <TokenValue size="xs" value={staking} />
-                </ValidatorItemWrap>
+                </NominatorItemWrap>
               </ListItem>
             ))}
           </NominatorList>
@@ -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;
Original file line number	Diff line number	Diff line change
		@@ -1 +1,2 @@
		export * from './email'
		export * from './externalResourceLink'