refactor: Streams to make homepage startup instantly #1232

ckniffen · 2025-08-19T15:23:26Z

High Level Overview of Change

Switch streams logic to a context/provider based architecture. This reduces a bunch of redundant logic and cleans up the state change tree. The moment the page loads the most recent validated ledger is loaded in to make the page look populated from the get go.

Summary of Changes in this PR

The source of the refactor lies in StreamsProvider.tsx and VHSValidatorsProvider.tsx files. The new provider/context hook is used in the rest of the React components by replacing the existing property-drilled implementations. These changes are implemented in the first 12 commits of this PR. The StreamsProvider and VHSValidatorsProvider components supply the explorer with Validation information from two different sources, i.e Validation-stream and the VHS APIs respectively.
Changes to the test files to accommodate the new behavior in the Explorer. The explorer "pre-fetches" the latest validated ledger to reduce the page-load latency time. Commits: 5ed5e58, 5573522
Updating the legacy Jest expect.<> matcher names. This is required for the CI to pass. Commit: 452fb55

cc @achowdhry-ripple @kuan121

Type of Change

Bug fix (non-breaking change which fixes an issue)
New feature (non-breaking change which adds functionality)
Breaking change (fix or feature that would cause existing functionality to not work as expected)
Refactor (non-breaking change that only restructures code)
Tests (You added tests for code that already exists, or your new feature included in this PR)
Documentation Updates
Translation Updates
Release

Codebase Modernization

Updated files to React Hooks
Updated files to TypeScript
Updated tests to React Testing Library

ckeshava

Hello @ckniffen , thank you for your work. The initial page latency has reduced drastically. This is a significant refactor and your work has been very helpful.

Let me know what you think of my observations.

ckeshava · 2025-08-20T20:15:03Z

src/containers/Ledgers/LedgerEntryHashTrustedCount.tsx

-      onMouseMove={(e) =>
-        missing && missing.length && showTooltip('missing', e, { missing })
-      }
+      className={status.trustedCount < status.missing.length ? 'missed' : ''}


I understand that this piece of logic has not been changed in this PR. However, it is incorrect even in the current staging branch of the code.

Suggested change

className={status.trustedCount < status.missing.length ? 'missed' : ''}

className={ status.missing.length > 0 ? 'missed' : ''}

onMouseMove={(e) => {

const { missing } = status

missing.length && showTooltip('missing', e, { missing })

}}

This issue is fixed in this commit: 5ed5e58

ckeshava · 2025-08-20T20:30:03Z

src/containers/Network/Validators.tsx

@@ -1,146 +1,121 @@
-import { useContext, useState } from 'react'
-import axios from 'axios'
+import './css/style.scss'


Hello, I'm unable to load the Network > Validators page in this build of the Explorer. I get a blank screen.

Here is the associated error in the console:

Warning: Each child in a list should have a unique "key" prop. Check the render method of `ValidatorsTable`. See https://reactjs.org/link/warning-keys for more information. at tr at ValidatorsTable (http://localhost:3000/containers/Network/ValidatorsTable.tsx:54:23) at div at div at Validators (http://localhost:3000/containers/Network/Validators.tsx:45:25) at VHSValidatorsProvider (http://localhost:3000/containers/shared/components/VHSValidators/VHSValidatorsProvider.tsx:25:41) at StreamsProvider (http://localhost:3000/containers/shared/components/Streams/StreamsProvider.tsx:47:35) at ValidatorsPage at RenderedRoute (http://localhost:3000/@fs/Users/ckeshavabs/explorer/node_modules/.vite/deps/chunk-IUD5A7RD.js?v=ab94eb5d:4082:5) at Outlet (http://localhost:3000/@fs/Users/ckeshavabs/explorer/node_modules/.vite/deps/chunk-IUD5A7RD.js?v=ab94eb5d:4559:26) at div at NetworkProvider (http://localhost:3000/containers/shared/NetworkContext.tsx:36:3) at SocketProvider (http://localhost:3000/containers/shared/SocketContext.tsx:55:3) at _c (http://localhost:3000/containers/App/App.tsx:24:11) at RenderedRoute (http://localhost:3000/@fs/Users/ckeshavabs/explorer/node_modules/.vite/deps/chunk-IUD5A7RD.js?v=ab94eb5d:4082:5) at Routes (http://localhost:3000/@fs/Users/ckeshavabs/explorer/node_modules/.vite/deps/chunk-IUD5A7RD.js?v=ab94eb5d:4623:5) at div at AppErrorBoundary (http://localhost:3000/containers/App/AppErrorBoundary.tsx:5:1) at div at QueryClientProvider2 (http://localhost:3000/@fs/Users/ckeshavabs/explorer/node_modules/.vite/deps/react-query.js?v=ab94eb5d:2646:21) at _a (http://localhost:3000/@fs/Users/ckeshavabs/explorer/node_modules/.vite/deps/react-helmet-async.js?v=ab94eb5d:625:5) at AppWrapper (http://localhost:3000/containers/App/index.tsx:64:26) at Router (http://localhost:3000/@fs/Users/ckeshavabs/explorer/node_modules/.vite/deps/chunk-IUD5A7RD.js?v=ab94eb5d:4566:15) at BrowserRouter (http://localhost:3000/@fs/Users/ckeshavabs/explorer/node_modules/.vite/deps/react-router-dom.js?v=ab94eb5d:557:5) at I18nextProvider (http://localhost:3000/@fs/Users/ckeshavabs/explorer/node_modules/.vite/deps/react-i18next.js?v=ab94eb5d:782:3) at Suspense Uncaught Error: Missing ":identifier" param at invariant (chunk-IUD5A7RD.js?v=ab94eb5d:202:11) at chunk-IUD5A7RD.js?v=ab94eb5d:639:7 at Array.map (<anonymous>) at generatePath (chunk-IUD5A7RD.js?v=ab94eb5d:629:38) at buildPath (routing.tsx:35:10) at ExplorerLink (routing.tsx:73:16)

I suspect this has something to do with the removal of the key parameter in some of the React components in this PR.

The CI tests are also failing for the Validators page: https://github.com/ripple/explorer/actions/runs/17074812387/job/48413223332?pr=1232#step:6:3161

This is because the signing_key is not always populated. One of my last commits introduced this error

This issue has been fixed in the commit: b748b23

src/containers/shared/components/Streams/StreamsProvider.tsx

src/containers/Ledgers/Ledgers.tsx

src/containers/Ledgers/LedgerEntryHashTrustedCount.tsx

Co-authored-by: Chenna Keshava B S <[email protected]>

ckeshava · 2025-08-20T21:22:25Z

As far as tests are concerned, I'll need to write components/Streams/test and components/VHSValidators/test. All the other modified files already have dedicated tests associated with them.

2. Refactor the LedgerPages tests to accomodate the refactored StreamsProvider 3. Update LedgerEntryValidator to retain previous behavior (display validator signing key in class-name) 4. Fix the crashing behavior inside StreamsProvider.processValidationQueue (set up default hashes[])

…ake-3

… functional update in this commit.

ckeshava · 2025-10-30T03:54:35Z

@ckniffen Thank you very much for your work. Let me know if you'd like to include any other ideas into this PR.

mvadari · 2025-10-30T16:38:21Z

package.json

    "react18-json-view": "^0.2.8",
    "recharts": "^2.15.3",
    "ripple-address-codec": "^5.0.0",
-    "ripple-binary-codec": "^2.4.1",


package changes should be in a separate PR

OK. I have reverted the changes pertaining to package.json and package-lock.json file in this commit: 9a3be32

src/containers/Ledgers/index.tsx

ckeshava · 2025-11-05T05:07:43Z

The new context is used in the rest of the React components by replacing the existing property-drilled implementations

@ckeshava What're property-drilled implementations? Is this new context approach directly related to the constant startup?

I'm referring to this practice as prop-drilling in react: https://react.dev/learn/passing-data-deeply-with-context

Yes, I believe the new context based approach contributes significantly to the low startup time of the page. The SocketContext and the associated ledgers/validations are passed akin to "global variables", instead of being passed into every react component explicitly.

There are also other optimizations thrown in (like pre-fetching the latest validated ledger after initialization of the StreamsProvider component) that helps with the low startup time.

…xplorer into refactor/streams-take-3

…hange which is slated to be removed in a few days

kuan121 · 2025-11-05T15:28:41Z

src/containers/Ledgers/css/ledgerCountdownBanner.scss

Should we include this irrelevant change in this PR?

Agree, I think we should have a separate PR for this so that the team is explicitly aware that we will remove it, since this was a higher up ask

This PR will need a few days for all the reviewers to read+approve the changes. Retaining the LedgerCountdownBanner code will need a non-trivial usage of the StreamsProvider component.

I would like to instead wait for the removal of the LedgerCountdownBanner and then merge this PR.

achowdhry-ripple · 2025-11-05T16:59:56Z

src/containers/Ledgers/test/LedgersPage.test.js

+
      expect(wrapper.find('.validation').length).toBe(0)
-      expect(wrapper.find('.txn').length).toBe(0)
+      // Recent refactor of the StreamsProvider eagerly fetches the latest validated ledger. The objective is to reduce the latency of displaying the first validated ledger. Consequently, loading the page fetches the latest validated ledger.


I appreciate these comments for the lengthier tests!

achowdhry-ripple · 2025-11-05T17:04:24Z

nit: since this PR contains a lot of different refactors/cleanups, could you list them in the PR description? Would make it easier to follow specifically what is changing intentionally and why

achowdhry-ripple · 2025-11-13T18:52:59Z

src/containers/shared/components/Streams/StreamsProvider.tsx

+      refetchQuorum()
+    }
+
+    // TODO: Set fields before getting full ledger info


is this todo still relevant?

thanks, removed it in 2cc86ce

achowdhry-ripple · 2025-11-13T18:53:37Z

src/containers/shared/components/Streams/StreamsProvider.tsx

+        txCount: ledgerSummary.transactions.length,
+        closeTime: convertRippleDate(ledgerSummary.ledger_time),
+        transactions: ledgerSummary.transactions,
+        totalFees: ledgerSummary.total_fees, // fix type


same, is the typing fix still relevant?

thanks, updated in 2cc86ce

achowdhry-ripple

lgtm! A few comment cleanup nits, but overall great cleanup, thanks @ckeshava @ckniffen for this effort

ckeshava · 2025-11-14T04:09:27Z

Note: The changes in this PR can be viewed in the dev environment of the Explorer: https://livenet.dev.ripplex.io/

ckeshava

Removing my "Request Changes" older PR review because it is blocking the merge of this PR

ckeshava · 2025-11-17T16:42:03Z

Thank you @ckniffen and the PR reviewers for your help with this work.

ckniffen added 10 commits August 19, 2025 09:25

refactor: Streams to make homepage startup instantly

b24133d

remove unused code at the homepage top level.

8146e4d

fix linting and get rid of extra key props

7ebc6c7

remove empty space and fix bug introduced when addressing linting.

24ffa7e

add validator pages

bdc43f1

refetch and useQuery

ad026fd

metrics to leverage useQueries, group metric updates

46fe093

fix animations

d0701fd

clean up imports

5431387

fix typo

af046cb

ckniffen requested review from ckeshava and pdp2121 August 19, 2025 15:23

ckniffen added 2 commits August 19, 2025 10:35

fix linting

a2e6592

type fixes

f24e3f3

ckeshava requested changes Aug 20, 2025

View reviewed changes

Update src/containers/shared/components/Streams/StreamsProvider.tsx

a3a7a4c

Co-authored-by: Chenna Keshava B S <[email protected]>

ripple deleted a comment from whatever1341132 Aug 23, 2025

ckeshava and others added 9 commits September 3, 2025 09:19

update and fix 10 failing tests

5573522

fix linter errors; add more test assertions in LedgersPage test

76cf165

fix tests

6f42f8f

fix test better

edc085f

fix

7b7de4e

Merge remote-tracking branch 'origin/staging' into refactor/streams-t…

399acbf

…ake-3

update the lock file

36929ac

fix: Update legacy jest matchers with newer method names. There is no…

452fb55

… functional update in this commit.

ckeshava marked this pull request as ready for review October 30, 2025 03:53

mvadari reviewed Oct 30, 2025

View reviewed changes

kuan121 reviewed Nov 4, 2025

View reviewed changes

src/containers/Ledgers/index.tsx Outdated Show resolved Hide resolved

remove ToolTipProvider from LedgersPage component

b638fe7

ckeshava and others added 7 commits November 5, 2025 12:01

fix: Rectify key errors in ValidatorsTable component

b748b23

remove extraneous use of ToolTipprovider in Validators container

237c3a8

Merge branch 'staging' into refactor/streams-take-3

317cc67

fix linter errors: remove console stmt

41e4388

Merge branch 'refactor/streams-take-3' of https://github.com/ripple/e…

37babbd

…xplorer into refactor/streams-take-3

fix linter errors

9ffcccb

revert changes pertaining to LedgerCountBanner; This is a temporary c…

a83db2b

…hange which is slated to be removed in a few days

kuan121 reviewed Nov 5, 2025

View reviewed changes

achowdhry-ripple reviewed Nov 5, 2025

View reviewed changes

ckeshava added 2 commits November 10, 2025 15:47

[address PR feedback] change var name: ValidatorsPage -> Validators

dd6371b

[PR feedback] fix the opacity of background in LedgerHash component

7dcf83f

ckeshava requested review from achowdhry-ripple and kuan121 November 10, 2025 11:02

mrbeastmcnasty approved these changes Nov 12, 2025

View reviewed changes

achowdhry-ripple reviewed Nov 13, 2025

View reviewed changes

achowdhry-ripple approved these changes Nov 13, 2025

View reviewed changes

ckeshava and others added 2 commits November 14, 2025 09:33

fix: updated comments in StreamsProvider component

2cc86ce

Merge branch 'staging' into refactor/streams-take-3

6802275

kuan121 approved these changes Nov 14, 2025

View reviewed changes

ckeshava approved these changes Nov 17, 2025

View reviewed changes

ckeshava merged commit 4421ed0 into staging Nov 17, 2025
5 checks passed

ckeshava deleted the refactor/streams-take-3 branch November 17, 2025 16:41

Patel-Raj11 mentioned this pull request Dec 5, 2025

Fix component load bugs #1265

Merged

11 tasks

-      className={status.trustedCount < status.missing.length ? 'missed' : ''}
+      className={ status.missing.length > 0 ? 'missed' : ''}
+      onMouseMove={(e) => {
+        const { missing } = status
+        missing.length && showTooltip('missing', e, { missing })
+      }}

refactor: Streams to make homepage startup instantly #1232

refactor: Streams to make homepage startup instantly #1232

Uh oh!

Conversation

ckniffen commented Aug 19, 2025 • edited by ckeshava Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

High Level Overview of Change

Summary of Changes in this PR

Type of Change

Codebase Modernization

Uh oh!

ckeshava left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

ckeshava commented Aug 20, 2025

Uh oh!

ckeshava commented Oct 30, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

ckeshava commented Nov 5, 2025

Uh oh!

kuan121 Nov 5, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

achowdhry-ripple commented Nov 5, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

achowdhry-ripple left a comment

Choose a reason for hiding this comment

Uh oh!

ckeshava commented Nov 14, 2025

Uh oh!

ckeshava left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

ckeshava commented Nov 17, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

7 participants

ckniffen commented Aug 19, 2025 •

edited by ckeshava

Loading

kuan121 Nov 5, 2025 •

edited

Loading