Refactor/streams take 2

src/containers/App/index.tsx

@@ -26,7 +26,7 @@ import {
   AMENDMENTS_ROUTE,
   AMENDMENT_ROUTE,
 } from './routes'
-import Ledgers from '../Ledgers'
+import { LedgersPage as Ledgers } from '../Ledgers'
 import { Ledger } from '../Ledger'
 import { AccountsRouter } from '../Accounts/AccountsRouter'
 import { Transaction } from '../Transactions'

src/containers/App/test/App.test.jsx

@@ -17,7 +17,7 @@ import { Error } from '../../../rippled/lib/utils'
 
 jest.mock('../../Ledgers/LedgerMetrics', () => ({
   __esModule: true,
-  default: () => null,
+  LedgerMetrics: () => null,
 }))
 
 jest.mock('xrpl-client', () => ({

src/containers/Ledgers/LedgerEntryHash.tsx

@@ -0,0 +1,39 @@
+import { useTranslation } from 'react-i18next'
+import SuccessIcon from '../shared/images/success.svg'
+import { LedgerEntryValidation } from './LedgerEntryValidator'
+import { LedgerEntryHashTrustedCount } from './LedgerEntryHashTrustedCount'
+
+export const LedgerEntryHash = ({ hash }: { hash: any }) => {
+  const { t } = useTranslation()
+  const shortHash = hash.hash.substr(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="bar" style={barStyle} />
+      <div className="ledger-hash">
+        <div className="hash-concat">{hash.hash.substr(0, 6)}</div>
+        {validated}
+      </div>
+      <div className="subtitle">
+        <div className="validation-total">
+          <div>{t('total')}:</div>
+          <b>{hash.validations.length}</b>
+        </div>
+        <LedgerEntryHashTrustedCount validations={hash.validations} />
+      </div>
+      <div className="validations">
+        {hash.validations.map((validation, i) => (
+          <LedgerEntryValidation
+            validation={validation}
+            index={i}
+            key={`${validation.validation_public_key}_${validation.cookie}`}
+          />
+        ))}
+      </div>
+    </div>
+  )
+}

src/containers/Ledgers/LedgerEntryHashTrustedCount.tsx

@@ -0,0 +1,60 @@
+import { useTranslation } from 'react-i18next'
+import classNames from 'classnames'
+import { useMemo } from 'react'
+import { ValidationStream } from 'xrpl'
+import { useTooltip } from '../shared/components/Tooltip'
+import { useVHSValidators } from '../shared/components/VHSValidators/VHSValidatorsContext'
+
+export const LedgerEntryHashTrustedCount = ({
+  validations,
+}: {
+  validations: ValidationStream[]
+}) => {
+  const { t } = useTranslation()
+  const { hideTooltip, showTooltip } = useTooltip()
+  const { unl, validators } = useVHSValidators()
+
+  const status = useMemo(() => {
+    const missing = [...(unl || [])]
+    validations.forEach((v) => {
+      if (!validators?.[v.validation_public_key]) {
+        return
+      }
+
+      const missingIndex = missing.findIndex(
+        (assumedMissing) => assumedMissing === v.validation_public_key,
+      )
+      if (missingIndex !== -1) {
+        missing.splice(missingIndex, 1)
+      }
+    })
+
+    return {
+      missing: missing.map((v) => validators?.[v]),
+      trustedCount: (unl?.length || 0) - missing.length,
+    }
+  }, [unl, validations])
+
+  return status.trustedCount ? (
+    <span
+      tabIndex={0}
+      role="button"
+      className={classNames(
+        status.trustedCount < status.missing.length && 'missed',
+      )}
+      onMouseMove={(e) => {
+        const { missing } = status
+
+        missing.length && showTooltip('missing', e, { missing })
+      }}
+      onFocus={() => {}}
+      onKeyUp={() => {}}
+      onMouseLeave={() => hideTooltip()}
+    >
+      <div>{t('unl')}:</div>
+      <b>
+        {status.trustedCount}/{unl?.length}
+      </b>
+    </span>
+  ) : null
+}

src/containers/Ledgers/LedgerEntryTransaction.tsx

@@ -0,0 +1,34 @@
+import classNames from 'classnames'
+import { getAction, getCategory } from '../shared/components/Transaction'
+import { TRANSACTION_ROUTE } from '../App/routes'
+import { TransactionActionIcon } from '../shared/components/TransactionActionIcon/TransactionActionIcon'
+import { RouteLink } from '../shared/routing'
+import { useTooltip } from '../shared/components/Tooltip'
+
+export const LedgerEntryTransaction = ({
+  transaction,
+}: {
+  transaction: any
+}) => {
+  const { hideTooltip, showTooltip } = useTooltip()
+
+  return (
+    <RouteLink
+      key={transaction.hash}
+      className={classNames(
+        `txn transaction-type transaction-dot bg`,
+        `tx-category-${getCategory(transaction.type)}`,
+        `transaction-action-${getAction(transaction.type)}`,
+        `${transaction.result}`,
+      )}
+      onMouseOver={(e) => showTooltip('tx', e, transaction)}
+      onFocus={() => {}}
+      onMouseLeave={() => hideTooltip()}
+      to={TRANSACTION_ROUTE}
+      params={{ identifier: transaction.hash }}
+    >
+      <TransactionActionIcon type={transaction.type} />
+      <span>{transaction.hash}</span>
+    </RouteLink>
+  )
+}

src/containers/Ledgers/LedgerEntryTransactions.tsx

@@ -0,0 +1,20 @@
+import { memo } from 'react'
+import { Loader } from '../shared/components/Loader'
+import { LedgerEntryTransaction } from './LedgerEntryTransaction'
+
+export const LedgerEntryTransactions = memo(
+  ({ transactions }: { transactions: any[] }) => (
+    <>
+      {!transactions && <Loader />}
+      <div className="transactions">
+        {transactions?.map((tx) => (
+          <LedgerEntryTransaction transaction={tx} key={tx.hash} />
+        ))}
+      </div>
+    </>
+  ),
+  (prevProps, nextProps) =>
+    prevProps.transactions &&
+    nextProps.transactions &&
+    prevProps.transactions.length === nextProps.transactions.length,
+)

src/containers/Ledgers/LedgerEntryValidator.tsx

@@ -0,0 +1,49 @@
+import classNames from 'classnames'
+import { useSelectedValidator } from './useSelectedValidator'
+import { useTooltip } from '../shared/components/Tooltip'
+import { useVHSValidators } from '../shared/components/VHSValidators/VHSValidatorsContext'
+
+export const LedgerEntryValidation = ({
+  validation,
+  index,
+}: {
+  validation: any
+  index: number
+}) => {
+  const { showTooltip, hideTooltip } = useTooltip()
+  const { selectedValidator, setSelectedValidator } = useSelectedValidator()
+  const { validators } = useVHSValidators()
+  const className = classNames(
+    'validation',
+    validators?.[validation.validation_public_key]?.unl && 'trusted',
+    selectedValidator && 'unselected',
+    selectedValidator === validation.validation_public_key && 'selected',
+  )
+
+  return (
+    <div
+      role="button"
+      tabIndex={index}
+      className={className}
+      onMouseOver={(e) =>
+        showTooltip('validator', e, {
+          ...validation,
+          v: validators?.[validation.validation_public_key],
+        })
+      }
+      onFocus={() => {}}
+      onKeyUp={() => {}}
+      onMouseLeave={() => hideTooltip()}
+      onClick={() =>
+        setSelectedValidator(
+          selectedValidator &&
+            selectedValidator === validation.validation_public_key
+            ? undefined
+            : validation.validation_public_key,
+        )
+      }
+    >
+      {validation.partial && <div className="partial" />}
+    </div>
+  )
+}

src/containers/Ledgers/LedgerListEntry.tsx

@@ -0,0 +1,74 @@
+import { useTranslation } from 'react-i18next'
+import { RouteLink } from '../shared/routing'
+import { LEDGER_ROUTE } from '../App/routes'
+import { Amount } from '../shared/components/Amount'
+import { LedgerEntryHash } from './LedgerEntryHash'
+import { LedgerEntryTransactions } from './LedgerEntryTransactions'
+import { Ledger } from '../shared/components/Streams/types'
+import {
+  Tooltip,
+  TooltipProvider,
+  useTooltip,
+} from '../shared/components/Tooltip'
+
+const SIGMA = '\u03A3'
+
+const LedgerIndex = ({ ledgerIndex }: { ledgerIndex: number }) => {
+  const { t } = useTranslation()
+  const flagLedger = ledgerIndex % 256 === 0
+  return (
+    <div
+      className={`ledger-index ${flagLedger ? 'flag-ledger' : ''}`}
+      title={flagLedger ? t('flag_ledger') : ''}
+    >
+      <RouteLink to={LEDGER_ROUTE} params={{ identifier: ledgerIndex }}>
+        {ledgerIndex}
+      </RouteLink>
+    </div>
+  )
+}
+
+export const LedgerListEntryInner = ({ ledger }: { ledger: Ledger }) => {
+  const { tooltip } = useTooltip()
+  const { t } = useTranslation()
+  const time = ledger.closeTime
+    ? new Date(ledger.closeTime).toLocaleTimeString()
+    : null
+
+  return (
+    <div className="ledger" key={ledger.index}>
+      <div className="ledger-head">
+        <LedgerIndex ledgerIndex={ledger.index} />
+        <div className="close-time">{time}</div>
+        {/* Render Transaction Count (can be 0) */}
+        {ledger.txCount !== undefined && (
+          <div className="txn-count">
+            {t('txn_count')}:<b>{ledger.txCount.toLocaleString()}</b>
+          </div>
+        )}
+        {/* Render Total Fees (can be 0) */}
+        {ledger.totalFees !== undefined && (
+          <div className="fees">
+            {SIGMA} {t('fees')}:
+            <b>
+              <Amount value={{ currency: 'XRP', amount: ledger.totalFees }} />
+            </b>
+          </div>
+        )}
+        <LedgerEntryTransactions transactions={ledger.transactions} />
+      </div>
+      <div className="hashes">
+        {ledger.hashes.map((hash) => (
+          <LedgerEntryHash hash={hash} key={hash.hash} />
+        ))}
+      </div>
+      <Tooltip tooltip={tooltip} />
+    </div>
+  )
+}
+
+export const LedgerListEntry = ({ ledger }: { ledger: Ledger }) => (
+  <TooltipProvider>
+    <LedgerListEntryInner ledger={ledger} />
+  </TooltipProvider>
+)