Address Validator dashboard QA issues

packages/ui/src/common/components/forms/FilterBox/FilterSearchBox.tsx

@@ -40,10 +40,16 @@ interface SearchBoxProps extends ControlProps<string> {
  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<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 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 (
  <SearchBoxWrapper>
  <FilterLabel>{label}</FilterLabel>
- <SearchInput
- inputSize={label ? 'xs' : 's'}
- validation={isValid() ? undefined : 'invalid'}
- message={isValid() ? '' : 'Minimum of 3 characters is required'}
- >
+ <SearchInput inputSize={label ? 'xs' : 's'} validation={isValid() ? undefined : 'invalid'} message={message}>
  <InputText placeholder="Search" value={value} onChange={change} onKeyDown={keyDown} />
  {displayReset && value && (
  <ClearButton onClick={reset} size="small" borderless>

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 (
  <EmptyBody>

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/',
+}

packages/ui/src/memberships/constants/index.ts

@@ -1 +1,2 @@
 export * from './email'
+export * from './externalResourceLink'

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.TELEGRAM}${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}>

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;
  }

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>

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>

packages/ui/src/validators/components/statistics/ValidatorsState.tsx

@@ -16,13 +16,7 @@ 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>

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>

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;

packages/ui/src/validators/modals/validatorCard/ValidatorDetail.tsx

@@ -68,7 +68,9 @@ export const ValidatorDetail = ({ validator, eraIndex, hideModal }: Props) => {
  <RowGapBlock gap={4}>
  <h6>Era points</h6>
  <RewardPointsChartWrapper>
- <RewardPointsChart rewardPointsHistory={validator.rewardPointsHistory} />
+ <div>
+ <RewardPointsChart rewardPointsHistory={validator.rewardPointsHistory} />
+ </div>
  </RewardPointsChartWrapper>
  </RowGapBlock>
  )}
@@ -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;
+ }
 `