feat(formatting): centralise XLM and relative-time formatting in shared hooks - #620
Closed
Obiajulu-gif wants to merge 1 commit into
Closed
feat(formatting): centralise XLM and relative-time formatting in shared hooks#620Obiajulu-gif wants to merge 1 commit into
Obiajulu-gif wants to merge 1 commit into
Conversation
…ed hooks Add `hooks/formatting` module with two hooks and migrate inline call sites (issue accesslayerorg#547): - `useFormatXlm(amount: bigint | number, decimals = 2)`: locale-aware `Intl.NumberFormat('en-US')` output; bigint treated as raw stroops and converted via the shared `STROOPS_PER_XLM` factor with bigint division to preserve fractional precision. - `useRelativeTime(timestamp)`: `Intl.RelativeTimeFormat` output using the same unit-selection thresholds as the previous hand-rolled logic; re-renders every 60s while mounted, interval cleaned up on unmount. Migrate TransactionHistory (extracted a TransactionRow child so the hooks are called per-row without violating the rules of hooks) and TrendingCreatorCard's inline stroops->XLM `toFixed` off the shared hook. Add renderHook tests for both hooks including fake-timer coverage of the 60s refresh. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
✅ Deploy Preview for accesslayer ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
👋 Hey @Obiajulu-gif, thanks for your contribution! This PR is targeting Please close this PR and reopen it with Closing this PR automatically. See you in |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
New
src/hooks/formatting/module (useFormatXlm.ts,useRelativeTime.ts):useFormatXlm(amount: bigint | number, decimals = 2)—Intl.NumberFormat('en-US', {min/maxFractionDigits}). Anumberis treated as an already-denominated XLM value; abigintis treated as raw stroops and converted with whole/remainder bigint division against the existingSTROOPS_PER_XLMconstant (src/constants/stellar.ts, the same factorkeyPriceDisplay.utils.tsalready uses) to preserve fractional precision — no new conversion logic was written.useRelativeTime(timestamp)—Intl.RelativeTimeFormat('en-US', {numeric: 'auto'}), matching the same unit thresholds as the previous hand-rolled logic (minute/hour/day/"now"), with a 60-secondsetIntervalre-render cleaned up on unmount (matching theuseDropCountdown.tsconvention).Call sites migrated:
TransactionHistory.tsx("the activity feed") — replaced the hand-rolled relative-time formatting and two(tx.amount * tx.price).toFixed(4)calls. Rows are rendered via.map(), so aTransactionRowchild component was extracted to call the hooks legally per row.TrendingCreatorCard.tsx— a genuine inline(creator.priceStroops / 1e7).toFixed(2)stroops→XLM display found via a repo-wide search, now routed throughuseFormatXlm."Trade panel"/"holdings" finding: there's no separate inline-formatted XLM amount to migrate there.
TradeDialog.tsxalready routes every XLM figure through the existing sharedformatDisplayKeyPriceutil, and its "Holdings: … keys" is a key count viaformatNumber, not an XLM amount — so the only real migrations wereTransactionHistoryandTrendingCreatorCard.Closes #547
Pre-existing bug noticed, not fixed (out of scope)
TransactionHistory.tsxlabels amounts "ETH" in this Stellar/XLM app. Left untouched per scope — worth its own issue.Test plan
node_modules, disk space constraint in my environment) — please run the newuseFormatXlm.test.ts/useRelativeTime.test.ts