refactor: Streams to make homepage startup instantly

src/containers/App/index.tsx

@@ -136,7 +136,6 @@ export const AppWrapper = () => {
                   ))}
                   <Route path="*" element={<NoMatch />} />
                 </Route>
-                \{' '}
               </Routes>
               <Footer />
             </div>

src/containers/Ledgers/LedgerEntryHash.tsx

@@ -2,26 +2,15 @@ import { useTranslation } from 'react-i18next'
 import SuccessIcon from '../shared/images/success.svg'
 import { LedgerEntryValidator } from './LedgerEntryValidator'
 import { LedgerEntryHashTrustedCount } from './LedgerEntryHashTrustedCount'
-import { ValidatorResponse } from './types'
+import { LedgerHash } from '../shared/components/Streams'
 
-export const LedgerEntryHash = ({
-  hash,
-  unlCount,
-  validators,
-}: {
-  hash: any
-  unlCount?: number
-  validators: { [pubkey: string]: ValidatorResponse }
-}) => {
+export const LedgerEntryHash = ({ hash }: { hash: LedgerHash }) => {
   const { t } = useTranslation()
   const shortHash = hash.hash.substring(0, 6)
   const barStyle = { background: `#${shortHash}` }
   const validated = hash.validated && <SuccessIcon className="validated" />
   return (
-    <div
-      className={`hash ${hash.unselected ? 'unselected' : ''}`}
-      key={hash.hash}
-    >
+    <div className={`hash ${hash.unselected ? 'unselected' : ''}`}>
       <div className="bar" style={barStyle} />
       <div className="ledger-hash">
         <div className="hash-concat">{hash.hash.substring(0, 6)}</div>
@@ -32,17 +21,12 @@ export const LedgerEntryHash = ({
           <div>{t('total')}:</div>
           <b>{hash.validations.length}</b>
         </div>
-        <LedgerEntryHashTrustedCount
-          hash={hash}
-          unlCount={unlCount}
-          validators={validators}
-        />
+        <LedgerEntryHashTrustedCount validations={hash.validations} />
       </div>
       <div className="validations">
         {hash.validations.map((validation, i) => (
           <LedgerEntryValidator
-            validators={validators}
-            validator={validation}
+            validation={validation}
             index={i}
             key={validation.cookie}
           />

src/containers/Ledgers/LedgerEntryHashTrustedCount.tsx

@@ -1,56 +1,56 @@
 import { useTranslation } from 'react-i18next'
+import { useMemo } from 'react'
 import { useTooltip } from '../shared/components/Tooltip'
-import { Hash, ValidatorResponse } from './types'
+import { useVHSValidators } from '../shared/components/VHSValidators'
+import { LedgerValidation } from '../shared/components/Streams'
 
 export const LedgerEntryHashTrustedCount = ({
-  hash,
-  unlCount,
-  validators,
+  validations,
 }: {
-  hash: Hash
-  unlCount?: number
-  validators: { [pubkey: string]: ValidatorResponse }
+  validations: LedgerValidation[]
 }) => {
   const { t } = useTranslation()
   const { hideTooltip, showTooltip } = useTooltip()
-  const className = hash.trusted_count < (unlCount || 0) ? 'missed' : ''
+  const { unl, validators } = useVHSValidators()
 
-  const getMissingValidators = () => {
-    const unl = {}
-
-    Object.keys(validators).forEach((pubkey) => {
-      if (validators[pubkey].unl) {
-        unl[pubkey] = false
+  const status = useMemo(() => {
+    const missing = [...(unl || [])]
+    validations.forEach((v) => {
+      if (!validators?.[v.validation_public_key]) {
+        return
       }
-    })
 
-    hash.validations.forEach((v) => {
-      if (unl[v.pubkey] !== undefined) {
-        delete unl[v.pubkey]
+      const missingIndex = missing.findIndex(
+        (assumedMissing) => assumedMissing === v.validation_public_key,
+      )
+      if (missingIndex !== -1) {
+        missing.splice(missingIndex, 1)
       }
     })
 
-    return Object.keys(unl).map((pubkey) => validators[pubkey])
-  }
-
-  const missing =
-    hash.trusted_count && className === 'missed' ? getMissingValidators() : null
+    return {
+      missing: missing.map((v) => validators?.[v]),
+      trustedCount: (unl?.length || 0) - missing.length,
+    }
+  }, [unl, validations, validators])
 
-  return hash.trusted_count ? (
+  return status.trustedCount ? (
     <span
       tabIndex={0}
       role="button"
-      className={className}
-      onMouseMove={(e) =>
-        missing && missing.length && showTooltip('missing', e, { missing })
-      }
+      className={status.missing.length > 0 ? 'missed' : ''}
+      onMouseMove={(e) => {
+        const { missing } = status
+
+        missing.length && showTooltip('missing', e, { missing })
+      }}
       onFocus={() => {}}
       onKeyUp={() => {}}
       onMouseLeave={() => hideTooltip()}
     >
       <div>{t('unl')}:</div>
       <b>
-        {hash.trusted_count}/{unlCount}
+        {status.trustedCount}/{unl?.length}
       </b>
     </span>
   ) : null

src/containers/Ledgers/LedgerEntryTransaction.tsx

@@ -15,7 +15,6 @@ export const LedgerEntryTransaction = ({
 
   return (
     <RouteLink
-      key={transaction.hash}
       className={classNames(
         `txn transaction-type transaction-dot bg`,
         `tx-category-${getCategory(transaction.type)}`,

src/containers/Ledgers/LedgerEntryValidator.tsx

@@ -1,47 +1,51 @@
+import classNames from 'classnames'
 import { useSelectedValidator } from './useSelectedValidator'
 import { useTooltip } from '../shared/components/Tooltip'
-import { ValidatorResponse } from './types'
+import { useVHSValidators } from '../shared/components/VHSValidators'
+import { LedgerValidation } from '../shared/components/Streams'
 
 export const LedgerEntryValidator = ({
-  validator,
-  validators,
+  validation,
   index,
 }: {
-  validator: any
-  validators: { [pubkey: string]: ValidatorResponse }
+  validation: LedgerValidation
   index: number
 }) => {
+  const { validators } = useVHSValidators()
   const { showTooltip, hideTooltip } = useTooltip()
   const { selectedValidator, setSelectedValidator } = useSelectedValidator()
 
-  const trusted = validator.unl ? 'trusted' : ''
-  const unselected = selectedValidator ? 'unselected' : ''
-  const selected = selectedValidator === validator.pubkey ? 'selected' : ''
-  const className = `validation ${trusted} ${unselected} ${selected} ${validator.pubkey}`
-  const partial = validator.partial ? <div className="partial" /> : null
+  const className = classNames(
+    'validation',
+    validators?.[validation.validation_public_key]?.unl && 'trusted',
+    selectedValidator && 'unselected',
+    selectedValidator === validation.validation_public_key && 'selected',
+    validation.validation_public_key,
+  )
 
   return (
     <div
-      key={`${validator.pubkey}_${validator.cookie}`}
       role="button"
       tabIndex={index}
       className={className}
       onMouseOver={(e) =>
         showTooltip('validator', e, {
-          ...validator,
-          v: validators[validator.pubkey],
+          ...validation,
+          v: validators?.[validation.validation_public_key],
         })
       }
       onFocus={() => {}}
       onKeyUp={() => {}}
       onMouseLeave={() => hideTooltip()}
       onClick={() =>
         setSelectedValidator(
-          selectedValidator === validator.pubkey ? undefined : validator.pubkey,
+          selectedValidator === validation.validation_public_key
+            ? undefined
+            : validation.validation_public_key,
         )
       }
     >
-      {partial}
+      {validation.partial && <div className="partial" />}
     </div>
   )
 }