Skip to content

Conversation

@Patel-Raj11
Copy link
Contributor

@Patel-Raj11 Patel-Raj11 commented Dec 2, 2025

High Level Overview of Change

This PR addresses following items:

  1. Loads Validator table with VHS data if data from live websocket connection is not available yet.
  2. Load metrics from backend that is already calculated in backed when homepage loads.
  3. Show loading icon, if websocket stream is not yet established on homepage.
  4. Fix bug that accessed an undefined variable when hover over nUNL element when there are no nNUL present.

Context of Change

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

Before / After

Before and after are captured in this video

Screen.Recording.2025-12-02.at.5.47.45.PM.mov

Test Plan

Added and updated tests

Comment on lines -68 to -70
if (newData.current_index == null) {
newData.signing_key = validatorsFromValidations[d].signing_key
}
Copy link
Collaborator

@achowdhry-ripple achowdhry-ripple Dec 3, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

why can we remove this part? it seems like the properties that are being set have changed with this logic change now

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

signing_key was never a property on validatorsFromValidations[d]. I don't know why this was added during recent refactor, but if we go further down the rendering part, master_key is given priority irrespective of the source of data.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If signing_key property is not defined, then this line will not render the validator component.

} else if (data?.master_key || data?.signing_key) {

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If signing_key property is not defined, then this line will not render the validator component.

master_key is given preference, and it will render the component. Won't render when both are not present.
In any case signing_key was not set by the code prior to #1232 and it's incorrectly set currently. So why the concern now?

Copy link
Collaborator

@achowdhry-ripple achowdhry-ripple left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is a good bug catch, LGTM overall

expect(wrapper.find('.ledgers').length).toBe(1)
expect(wrapper.find('.ledger-list').length).toBe(1)
expect(wrapper.find('.ledger').length).toBe(1)
expect(wrapper.find('.ledger').length).toBe(2)
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What are the two .ledger react components in the wrapper? Since we send one prevLedgerMessage, shouldn't we expect to see one of the .ledger react component?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For the same reason 2 components were expected here -

expect(wrapper.find('.ledger').length).toBe(2)

One is the latest validated ledger and another from prevLedgerMessage on same reasoning -

// 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.

Comment on lines -68 to -70
if (newData.current_index == null) {
newData.signing_key = validatorsFromValidations[d].signing_key
}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If signing_key property is not defined, then this line will not render the validator component.

} else if (data?.master_key || data?.signing_key) {

const { t } = useTranslation()
const { validators: validatorsFromValidations, metrics } = useStreams()
const { validators: validatorsFromVHS, unl } = useVHSValidators()
const [feeSettings, setFeeSettings] = useState<FeeSettings>()
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Amongst the diff'ed lines in this file, what is the fix for this bug:

Loads Validator table with VHS data if data from live websocket connection is not available yet.

I'm trying to understand the goal of the changes in this file.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Goal is to return the data from VHS even if data from clio is yet not available. It used to do that previous to #1232. You can test it by running it locally on a previous commit.

The difference in livenet tab and localhost tab in the video will make it more clear.

@Patel-Raj11 Patel-Raj11 merged commit ec9eea8 into staging Dec 11, 2025
5 checks passed
@Patel-Raj11 Patel-Raj11 deleted the fix-component-load-bugs branch December 11, 2025 21:35
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants