feat: add animated numbers and fix bioforest balance display #27
Conversation
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
- Install @number-flow/react for professional digit-by-digit animations - Add vi.mock for @number-flow/react in test setup (JSDOM compatibility)
- Create AnimatedNumber using @number-flow/react - Support loading state with pulse animation on '0' - Add fixedDecimals prop for full decimal display - Full accessibility support with aria-label - Add comprehensive Storybook stories
- Integrate NumberFlow for animated number transitions - Add loading prop with pulse animation - Add fixedDecimals prop for full decimal display - Add proper aria-label for screen reader support - Update tests for new formatting behavior
- Fix API endpoint: /wallet/{apiPath}/address/asset
- Fix server URL: walletapi.bfmeta.info
- Only BFMeta uses 'bfm' path, others use full chain ID
- Parse mpay response format: assets[magic][assetType].assetNumber
- Always display full 8 decimal places
- TokenItem uses AnimatedAmount with fixedDecimals - Remove font-semibold from balance (use normal weight) - TokenList passes refreshing prop to TokenItem - Update balance-display tests for new format
- Add per-wallet chain preferences persisted to localStorage - Auto-switch to wallet's preferred chain on wallet change - HomeTab passes decimals and refreshing state to TokenList - Initialize adapter registry in service-main
- Document @number-flow/react usage - Add animation and accessibility specs - Add fixedDecimals prop documentation - Create AnimatedNumber component doc
- Add chainPreferences to wallet state mocks - Update story decorators with complete state
- PageHeader: page-title, back-button
- ChainSelectorSheet: chain-option-{chainId}
- HomeTab: create-wallet-button, import-wallet-button
- OnboardingRecover: key-type-step, mnemonic-step, password-step, continue-button
- KeyTypeSelector: key-type-option-{type}
- RecoverWalletForm: mnemonic-textarea, continue-button
- ImportWalletSuccess: import-success-step, success-message, enter-wallet-button
- PasswordInput: data-testid prop support
Migrated all text-based selectors to use data-testid for i18n compatibility:
- Chain options: chain-option-{chainId}
- Buttons: send-button, receive-button, continue-button, etc.
- Steps: key-type-step, mnemonic-step, password-step, import-success-step
- Inputs: mnemonic-textarea, password-input, confirm-password-input
- WalletCreatePage: password-step, mnemonic-step, verify-step, next-step-button,
toggle-mnemonic-button, mnemonic-backed-up-button, complete-button, verify-word-input-{n}
- SendPage: send-continue-button
- TransferConfirmSheet: cancel-transfer-button, confirm-transfer-button
- ScannerPage: back-button, page-title
- Add data-testid to chain-config page: manual-add-section, add-chain-button,
manual-config-textarea, chain-item-{id}
- Update wallet-create.spec.ts to use data-testid for all interactive elements
- Follow e2e best practices for i18n compatibility
Gaubee
force-pushed
the
feat/animated-numbers-and-balance-fix
branch
from
30cc94a to
a4cb24e
Compare
- Add data-testid to WalletImportPage: mnemonic-step, password-step, continue-button, complete-button - Fix wallet-create.spec.ts import test to match WalletImportPage flow - Remove duplicate data-testid in HomeTab receive button
- Add data-testid to MnemonicInput: word-count-display, clear-mnemonic-button - Add data-testid to WalletImportPage: word-count-12, word-count-24 - Add data-testid to HomeTab: wallet-name - Replace all text selectors in wallet-import.spec.ts with data-testid
- Add data-testid to ScannerPage: gallery-button, retry-button - Add data-testid to HomeTab: scan-fab - Add data-testid to AddressInput: scan-address-button - Replace all text selectors in scanner.spec.ts with data-testid
- Add data-testid to chain-config page: subscription inputs and buttons - Update chain-config-subscription.spec.ts with data-testid selectors - Update pages.spec.ts with data-testid selectors
- Wait for URL change before checking page elements - Add networkidle wait after navigation - Increase timeout for page-title visibility check
- Use send-continue-button instead of page-title for send page verification - Add data-testid attributes to WelcomeScreen component - Migrate guide.spec.ts to use data-testid selectors
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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
This PR adds professional number animations using
@number-flow/reactand fixes bioforest chain balance display issues.Changes
New Features
Bug Fixes
/wallet/{apiPath}/address/asset)walletapi.bfmeta.info)Documentation
Testing