add display/hide balance#578
Conversation
|
Warning Rate limit exceeded@mikeredmond has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 10 minutes and 57 seconds before requesting another review. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. 📒 Files selected for processing (1)
📝 WalkthroughWalkthroughAdds a persisted show/hide-assets toggle and wiring: components read/write a LocalStorage key to conditionally mask or reveal balances across AccountModal balance section, profile content, and asset items. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
participant User as User
participant UI as Account UI (Balance/Profile/Asset components)
participant LS as LocalStorage
Note right of UI: On mount/read
UI->>LS: getItem(LocalStorageKey.SHOW_ASSETS)
LS-->>UI: "true" / "false" / null
UI-->>User: render balances (masked or full)
Note over User,UI: Toggle interaction
User->>UI: click eye toggle
UI->>LS: setItem(LocalStorageKey.SHOW_ASSETS, newValue)
LS-->>UI: confirm persist
UI-->>User: re-render with updated visibility
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Suggested reviewers
Poem
Pre-merge checks and finishing touches✅ Passed checks (5 passed)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
Fix all issues with AI Agents 🤖
In
@packages/vechain-kit/src/components/AccountModal/Components/BalanceSection.tsx:
- Line 125: Extract the masking logic into a shared utility named
maskBalance(formattedBalance: string, showAssets: boolean) that returns
formattedBalance unchanged when showAssets is true, and returns a safe masked
string when false (handle empty string by returning '' or a consistent
placeholder instead of using formattedBalance[0] which can be undefined).
Replace the inline expression in BalanceSection (the JSX that chooses between
formattedBalance and the masked version) with a call to
maskBalance(formattedBalance, showAssets), and do the same in ProfileContent to
remove duplication and avoid the "undefined***" issue.
- Around line 45-56: Replace the manual useState/useEffect localStorage logic
for showAssets with the existing useLocalStorage hook: remove the try/catch
initializer and effect that read/write LocalStorageKey.SHOW_ASSETS, and instead
call useLocalStorage(LocalStorageKey.SHOW_ASSETS, true) to get [showAssets,
setShowAssets]; this ensures consistent JSON parsing/stringifying and automatic
persistence handled by the hook.
In
@packages/vechain-kit/src/components/AccountModal/Contents/Profile/ProfileContent.tsx:
- Around line 140-145: Extract the masking logic into a shared utility function
named maskBalance that accepts formattedBalance (string) and returns an empty
string for falsy/empty input or the first char plus '*' for the rest; implement
it once (e.g., export const maskBalance = (balance: string) => { ... }) and
import and use maskBalance in ProfileContent (replace the inline
formattedBalance[0] + '*'.repeat(...)) and in BalanceSection where the same
duplication exists; ensure both places call maskBalance(formattedBalance) and
remove the duplicated inline logic.
- Line 52: Replace the one-time localStorage read storedShowAssets =
getLocalStorageItem(LocalStorageKey.SHOW_ASSETS) with the reactive hook const
[showAssets, setShowAssets] = useLocalStorage(LocalStorageKey.SHOW_ASSETS, true)
so the component updates when BalanceSection toggles visibility and defaults to
true for first-time users; then update any conditional that previously checked
storedShowAssets (e.g., storedShowAssets === 'false') to use the boolean
showAssets (or its falsy check) and ensure any state writes use setShowAssets to
keep localStorage in sync.
🧹 Nitpick comments (1)
packages/vechain-kit/src/components/AccountModal/Components/BalanceSection.tsx (1)
99-107: Consider enhancing the accessibility label to indicate current state.While the button has an aria-label, it could be more descriptive by indicating the current state of the toggle.
🔎 Suggested improvement
<IconButton - aria-label="Show/hide assets" + aria-label={showAssets ? "Hide assets" : "Show assets"} variant="ghost" size="sm" opacity={0.5} _hover={{ opacity: 0.8 }} onClick={() => setShowAssets(!showAssets)} icon={<Icon as={showAssets ? GoEye : GoEyeClosed} boxSize={4} />} />This provides clearer feedback to screen reader users about what the button will do when activated.
📜 Review details
Configuration used: defaults
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
packages/vechain-kit/src/components/AccountModal/Components/BalanceSection.tsxpackages/vechain-kit/src/components/AccountModal/Contents/Profile/ProfileContent.tsxpackages/vechain-kit/src/hooks/cache/useLocalStorage.ts
🧰 Additional context used
📓 Path-based instructions (1)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/migration-guide-to-v2.mdc)
**/*.{ts,tsx}: In VeChain Kit Version 2, useuseThorinstead ofuseConnexfor contract interactions
For single contract read operations, use theuseCallClausehook with the pattern: import dependencies, define ABI and method as const, create query key function usinggetCallClauseQueryKeyWithArgs, and wrap with useCallClause including data transformation in the select option
For multiple parallel contract calls, use theexecuteMultipleClausesCallutility wrapped in auseQueryhook with the pattern: define query key function, useexecuteMultipleClausesCallin queryFn mapping items to clause objects, and transform results
For transaction building and sending, use theuseBuildTransactionhook with a clauseBuilder function that returns an array of clauses with optional comment fields describing the transaction action
Always provide an arguments array for contract calls, even when no parameters are required - use an empty array for parameter-less functions to enable TypeScript type checking
Always conditionally enable queries using theenabledproperty to prevent unnecessary contract calls, checking for all required parameters:enabled: !!requiredParam && !!otherRequiredParam
Use theselectoption in useCallClause or transform data in queryFn to handle data transformation, particularly for converting BigInt values to strings and normalizing contract return data
Maintain consistent query key patterns: usegetCallClauseQueryKeyWithArgsfor contract calls with arguments andgetCallClauseQueryKeyfor calls without arguments to ensure proper caching and invalidation
Use TypeScriptas constassertions for method names andas0x${string}`` assertions for Ethereum addresses to ensure type safety in contract interactions
Files:
packages/vechain-kit/src/hooks/cache/useLocalStorage.tspackages/vechain-kit/src/components/AccountModal/Components/BalanceSection.tsxpackages/vechain-kit/src/components/AccountModal/Contents/Profile/ProfileContent.tsx
🧬 Code graph analysis (2)
packages/vechain-kit/src/components/AccountModal/Components/BalanceSection.tsx (1)
packages/vechain-kit/src/utils/ssrUtils.ts (2)
getLocalStorageItem(8-18)setLocalStorageItem(23-32)
packages/vechain-kit/src/components/AccountModal/Contents/Profile/ProfileContent.tsx (1)
packages/vechain-kit/src/utils/ssrUtils.ts (1)
getLocalStorageItem(8-18)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)
- GitHub Check: Lint & Build
- GitHub Check: deploy
- GitHub Check: build-size-check
🔇 Additional comments (1)
packages/vechain-kit/src/hooks/cache/useLocalStorage.ts (1)
11-11: LGTM!The new
SHOW_ASSETSkey follows the established naming convention and integrates cleanly with the existing enum.
|
Size Change: +4.29 kB (+0.07%) Total Size: 5.76 MB
ℹ️ View Unchanged
|
There was a problem hiding this comment.
Actionable comments posted: 2
Fix all issues with AI Agents 🤖
In @packages/vechain-kit/src/components/common/AssetButton.tsx:
- Line 41: AssetButton currently reads
getLocalStorageItem(LocalStorageKey.SHOW_ASSETS) directly on render which
defaults to hiding assets and is not reactive to changes made by BalanceSection;
extract a shared reactive state (either a context provider or a custom hook)
initialized like BalanceSection using useState with
getLocalStorageItem(LocalStorageKey.SHOW_ASSETS) so both AssetButton and
BalanceSection use the same showAssets and setShowAssets pair, ensure the
initializer parses stored JSON and falls back to true on error so defaults
match, and replace direct localStorage reads in AssetButton with the shared
showAssets state to get consistent defaults and automatic updates.
📜 Review details
Configuration used: defaults
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
packages/vechain-kit/src/components/common/AssetButton.tsx
🧰 Additional context used
📓 Path-based instructions (1)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/migration-guide-to-v2.mdc)
**/*.{ts,tsx}: In VeChain Kit Version 2, useuseThorinstead ofuseConnexfor contract interactions
For single contract read operations, use theuseCallClausehook with the pattern: import dependencies, define ABI and method as const, create query key function usinggetCallClauseQueryKeyWithArgs, and wrap with useCallClause including data transformation in the select option
For multiple parallel contract calls, use theexecuteMultipleClausesCallutility wrapped in auseQueryhook with the pattern: define query key function, useexecuteMultipleClausesCallin queryFn mapping items to clause objects, and transform results
For transaction building and sending, use theuseBuildTransactionhook with a clauseBuilder function that returns an array of clauses with optional comment fields describing the transaction action
Always provide an arguments array for contract calls, even when no parameters are required - use an empty array for parameter-less functions to enable TypeScript type checking
Always conditionally enable queries using theenabledproperty to prevent unnecessary contract calls, checking for all required parameters:enabled: !!requiredParam && !!otherRequiredParam
Use theselectoption in useCallClause or transform data in queryFn to handle data transformation, particularly for converting BigInt values to strings and normalizing contract return data
Maintain consistent query key patterns: usegetCallClauseQueryKeyWithArgsfor contract calls with arguments andgetCallClauseQueryKeyfor calls without arguments to ensure proper caching and invalidation
Use TypeScriptas constassertions for method names andas0x${string}`` assertions for Ethereum addresses to ensure type safety in contract interactions
Files:
packages/vechain-kit/src/components/common/AssetButton.tsx
🧠 Learnings (1)
📚 Learning: 2025-12-01T13:01:33.771Z
Learnt from: CR
Repo: vechain/vechain-kit PR: 0
File: .cursor/rules/migration-guide-to-v2.mdc:0-0
Timestamp: 2025-12-01T13:01:33.771Z
Learning: Applies to **/*.{ts,tsx} : In VeChain Kit Version 2, use `useThor` instead of `useConnex` for contract interactions
Applied to files:
packages/vechain-kit/src/components/common/AssetButton.tsx
🧬 Code graph analysis (1)
packages/vechain-kit/src/components/common/AssetButton.tsx (2)
packages/vechain-kit/src/utils/ssrUtils.ts (1)
getLocalStorageItem(8-18)packages/vechain-kit/src/utils/currencyUtils.ts (2)
formatCompactCurrency(37-51)SupportedCurrency(4-4)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)
- GitHub Check: Lint & Build
- GitHub Check: deploy
- GitHub Check: build-size-check
🔇 Additional comments (1)
packages/vechain-kit/src/components/common/AssetButton.tsx (1)
11-11: LGTM: Import changes are appropriate.The import path refactoring and new SSR-safe localStorage utilities are correctly imported.
Also applies to: 14-15
2 participants
Adding option to display/hide balances in main wallet
Closes #573
Screen.Recording.2026-01-05.at.18.51.20.mov
Summary by CodeRabbit
New Features
Style
✏️ Tip: You can customize this high-level summary in your review settings.