refactor: update homepage to typescript and hooks

[ckniffen]

High Level Overview of Change

Update homepage to typescript and hooks and break out aspects of the homepage's scrolling ledgers into smaller components. This also adds a new hook useTooltip that cleans up tooltip logic when many places are updating tooltips.

A small change to move the transaction iteration into its own component reduced render times of the homepage due by between 30ms to 60ms each re-render.

Type of Change

• Refactor (non-breaking change that only restructures code)

TypeScript/Hooks Update

• Updated files to React Hooks
• Updated files to TypeScript

Future Work

Optimize the component into a hook that causes way fewer re-renders.

[mvadari]

Suggested change

	<LedgerEntryTransactions transactions={ledger.transactions} />
	<LedgerEntryTransactions transactions={ledger.transactions || []} />

[ckniffen]

I chose not to always make it an array to differentiate between 0 transactions and it not loaded in.

[khancode]

LGTM 👍

[JST5000]

Why do we set this to false instead of the unl value? It seems similar to undefined and I took a second to re-read to confirm that false just seems to be a sentinel value that's main trait is that it is NOT undefined?

[ckniffen]

I honestly dont know this code was written this way before I just broke it out into its own component. I did rewrite it in the streams refactor though to this

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])

[JST5000]

I don't see where suppliedData is defined

[ckniffen]

data is the props name but the linter prevents redefining a prop so i name it differently locally scoped to the function to make it shorter instead of having a longer name ever where i reference all the metrics

[JST5000]

Doesn't this cause a name collision with the input parameter data for LedgerMetrics? I'm a bit confused on the naming here.

[ckniffen]

See previous comment

[JST5000]

Can you add a comment explaining why nUnl is special here? It's getting a lot of special treatment in this if/else - maybe there's a better way to separate out that logic? (ie. similar to how you deal with base_fee beforehand then delete it from the object?)

[ckniffen]

It has special rules i think because it has a link to another page and a tooltip. This code existed before this refactor.

[JST5000]

Should this link be "localized" to point to the proper language if the explorer is in Japanese for example?

[ckniffen]

We don't link anywhere else based on the language. I wouldn't know where to start since every site might have different rules like localstorage based or path based.

[JST5000]

One open question, but otherwise looks good to me :)