RelayCountWarning.tsx raw

   1  import { TMailboxRelay } from '@/types'
   2  import { useMemo } from 'react'
   3  import { useTranslation } from 'react-i18next'
   4  import InfoCard from '../InfoCard'
   5  
   6  export default function RelayCountWarning({ relays }: { relays: TMailboxRelay[] }) {
   7    const { t } = useTranslation()
   8    const readRelayCount = useMemo(() => {
   9      return relays.filter((r) => r.scope !== 'write').length
  10    }, [relays])
  11    const writeRelayCount = useMemo(() => {
  12      return relays.filter((r) => r.scope !== 'read').length
  13    }, [relays])
  14    const showReadWarning = readRelayCount > 4
  15    const showWriteWarning = writeRelayCount > 4
  16  
  17    if (!showReadWarning && !showWriteWarning) {
  18      return null
  19    }
  20  
  21    return (
  22      <InfoCard
  23        variant="alert"
  24        title={showReadWarning ? t('Too many read relays') : t('Too many write relays')}
  25        content={
  26          showReadWarning
  27            ? t(
  28                'You have {{count}} read relays. Most clients only use 2-4 relays, setting more is unnecessary.',
  29                { count: readRelayCount }
  30              )
  31            : t(
  32                'You have {{count}} write relays. Most clients only use 2-4 relays, setting more is unnecessary.',
  33                { count: writeRelayCount }
  34              )
  35        }
  36      />
  37    )
  38  }
  39