feat(wallet): homepage redesign v2#595
Draft
sahilc0 wants to merge 51 commits into
Draft
Conversation
Introduces a proper design token system with full color ramps and migrates all opacity-based --darkXX tokens to solid --neutral-XXX colors. New files: - src/tokens.css: Single source of truth for colors, typography, shadows - src/app.css: Tailwind v4 @theme configuration mapping tokens to utilities - src/lib/utils.ts: cn() utility combining clsx + tailwind-merge Token architecture: - Color ramps (50-950): purple, green, red, orange, yellow, neutral - Neutral ramp uses color-mix(in oklab) for automatic light/dark adaptation - Dark mode selector: html.palette-dark (consistent with existing app) - Typography tokens: font families, sizes, line heights, letter spacing - Shadow/elevation tokens: sm, md, lg, xl with three-layer depth Migration: - All --darkXX opacity tokens replaced with --neutral-XXX solid colors - Semantic aliases (--purple, --green, etc.) now reference ramps - Legacy aliases added for backward compat (--background-color, --heading-font) - 50+ component files updated to use new token system Dependencies added: - tailwindcss@^4.2.2, @tailwindcss/vite@^4.2.2 - clsx@^2.1.1, tailwind-merge@^3.5.0, class-variance-authority@^0.7.1
Add 55 shadcn/ui components for future component migrations. Setup: - Add @/* path alias in tsconfig.json and vite.config.ts - Add shadcn theme tokens to app.css - Add components.json configuration Components include: Button, Input, Dialog, Drawer, Sheet, Select, Checkbox, Switch, Tabs, Card, Table, and 45 more primitives. No existing code modified - primitives are available in src/components/ui/ for future use.
- Dark mode: change .dark selector to html.palette-dark in app.css and chart.tsx - sonner.tsx: replace next-themes useTheme with ConfigContext (fixes crash) - Remove body/html overrides from @layer base (keeps border rule) - Move shadcn CLI to devDependencies - Remove unused next-themes dependency - Use ^3.8.0 for recharts (consistency) - Fix eslint array-index-key warnings in chart.tsx and field.tsx - Fix prettier formatting in 5 shadcn components
Migrate Modal, Checkbox, Select, and Toggle to use shadcn/ui primitives with improved animations and accessibility: Modal: - Replace static overlay with Framer Motion AnimatePresence - Add open/onOpenChange/onExitComplete props for controlled usage - Add enter/exit animations (fade + scale) - Use EASE_OUT_QUINT_TUPLE for consistent easing Checkbox: - Migrate to shadcn Checkbox primitive - Add proper checked state visualization - Maintain haptic feedback on interaction Select: - Migrate to shadcn RadioGroup - Preserve keyboard navigation (arrow keys) - Remove legacy FlexRow wrapper Toggle: - Use shadcn Switch with new lg size variant - Switch gets iOS-like depth with three-layer shadow - 44px minimum tap target for mobile Updated usage sites: - Burn.tsx, Reissue.tsx: Use onExitComplete for async coordination - Backup.tsx, Announcement.tsx: Use controlled Modal props
Rebuild homepage from PR #557 on top of the ShadCN/Tailwind v4 stack: - Add section components: HomeHeader, PortfolioHero, AssetsSection, UpsellsSection, RecentActivitySection - Add floating WalletActionBar with Send/Swap/Receive buttons - Add Activity page for full transaction history - Add usePortfolioFiat hook for aggregating BTC + asset balances - Hide PillNavbar on wallet home (replaced by action bar) - Migrate var(--xxx) to proper Tailwind token classes - Add overflow-y scroll to content-shell for page scrolling - Update tests for new structure Co-Authored-By: Claude <noreply@anthropic.com>
- Make HomeHeader sticky with background so it stays visible on scroll - Replace lucide Settings icon with custom SVG matching HistoryIcon style (strokeWidth 1.5, same size) - Use fixed 40px button containers for icon alignment - Increase wallet-action-bar-spacer from 112px to 140px so all content is visible above the floating action bar Co-Authored-By: Claude <noreply@anthropic.com>
The content was trapped because height: 100% on content-shell prevented overflow scrolling. Adding a 144px spacer div at the bottom of the content creates actual scrollable height, allowing users to scroll past the floating action bar to see all recent activity. Co-Authored-By: Claude <noreply@anthropic.com>
Header: - Fix logo/icon alignment by accounting for LogoIcon's internal padding - Add gradient fade at bottom of sticky header - Increase z-index to z-50 for proper layering - Reduce icon size to 20px for better balance with logo PortfolioHero: - Center the balance display - Add fiat symbol prefix ($) using FIAT_SYMBOLS - Remove "Total" label to match master - Increase font size to text-5xl for prominence - Add eye icon for show/hide balance toggle Co-Authored-By: Claude <noreply@anthropic.com>
- PortfolioHero: use text-heading-xl (36px TT Firs Neue) instead of text-heading-5xl (104px) to match master's 32px balance display - LendaSat, DFX, Assets: use goBack() instead of navigate(Pages.Apps) so back button returns to the origin screen (Wallet or Apps) rather than always navigating to Apps tab Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Contributor
|
Important Review skippedDraft detected. Please check the settings in the CodeRabbit UI or the ⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
✨ Finishing Touches🧪 Generate unit tests (beta)
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 |
Deploying wallet-mutinynet with
|
| Latest commit: |
e80d510
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://67fe9553.arkade-wallet.pages.dev |
| Branch Preview URL: | https://wt-home-v2-20260501.arkade-wallet.pages.dev |
Deploying tmp-boltz-upstream-mainnet-arkade-wallet with
|
| Latest commit: |
e80d510
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://9956c6f7.tmp-boltz-upstream-mainnet-arkade-wallet.pages.dev |
| Branch Preview URL: | https://wt-home-v2-20260501.tmp-boltz-upstream-mainnet-arkade-wallet.pages.dev |
Deploying wallet-bitcoin with
|
| Latest commit: |
e80d510
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://8d2c9fe2.wallet-bitcoin.pages.dev |
| Branch Preview URL: | https://wt-home-v2-20260501.wallet-bitcoin.pages.dev |
![arkanaai[bot]](https://avatars.githubusercontent.com/u/170820085?s=60&v=4){kind=small}
There was a problem hiding this comment.
Review: feat(wallet): homepage redesign v2
Pure UI/UX — no protocol-critical code touched (no VTXOs, signing, forfeit, round lifecycle, exit paths). Review focused on correctness, consistency, and regressions.
🔴 Bug: Test will fail — PortfolioHero never renders "Total"
src/test/screens/wallet/index.test.tsx:67:
expect(screen.getByText('Total')).toBeInTheDocument()But src/screens/Wallet/PortfolioHero.tsx renders no "Total" text anywhere. This test assertion will fail. Either add a label to PortfolioHero or fix the assertion to match what's actually rendered (e.g. the formatted balance string).
🟡 Bug: showActionBar guard is always true
src/screens/Wallet/Index.tsx:43:
const showActionBar = balance !== undefinedbalance is typed as number (from WalletContext) and initialized to 0 in the provider (useState(0)). It's never undefined. The action bar will render immediately on mount, before wallet data loads. If the intent is "show once wallet has loaded," use dataReady or walletLoaded from WalletContext instead.
🟡 Unused title prop in TransactionsList
src/components/TransactionsList.tsx:170:
interface TransactionsListProps {
title?: string // ← declared but never read
mode?: 'virtual' | 'static'
limit?: number
}Both callers pass title='' (Activity.tsx:37, RecentActivitySection.tsx:46) but the component never destructures or uses title. Either remove the prop or implement it.
🟡 Inconsistent back navigation in Activity.tsx
src/screens/Wallet/Activity.tsx:19:
const handleBack = () => {
hapticLight()
navigate(Pages.Wallet) // hardcoded destination
}The PR description says "Fix app back navigation: LendaSat/DFX/Assets use goBack() instead of hardcoded Apps navigation." But the new Activity screen does the exact thing being fixed — hardcodes navigate(Pages.Wallet) instead of using goBack(). This breaks if Activity is reached from a deep link or non-standard flow. Use goBack() for consistency with the other fixes in this PR.
🟢 Minor: Default parameter = {} is dead code
src/components/TransactionsList.tsx:175:
export default function TransactionsList({ mode = 'virtual', limit }: TransactionsListProps = {}) {React always passes a props object — it's never undefined. The = {} default is unreachable. Harmless but misleading. Standard pattern is just ({ mode = 'virtual', limit }: TransactionsListProps).
🟢 Minor: WalletStaggerChild animation removed
All WalletStaggerChild wrappers are removed from Index.tsx, but WalletStaggerContainer remains. The container orchestrates stagger timing, but with no stagger children, the initial load animation is effectively gone. If intentional for the redesign, consider removing the WalletStaggerContainer wrapper too (and the shouldStagger ref) to reduce dead code. If the stagger animation is still wanted, wrap the new sections.
🟢 Observations (no action needed)
- No cross-repo breakage: Wallet is
"private": true, components aren't consumed externally. AssetCard prop changes are internal only. - Portal usage:
createPortal(…, document.body)inWalletActionBarOverlayis fine for this app's architecture. goBack()fixes for DFX/LendaSat/Assets: Good change. These were hardcoded tonavigate(Pages.Apps)which broke when navigated from the new home screen. ✅usePortfolioFiathook: Clean aggregation. Correctly handles missing price feeds for non-BTC assets.toFiat(0)for assets without price feeds returns 0 as expected. ✅- Navbar hidden for Wallet: Removing
screen === Pages.WalletfromshowNavbaris correct since the wallet now has its own floating action bar. Test updated to match. ✅
Verdict: Fix the failing test assertion (🔴) and address the showActionBar guard and inconsistent back navigation before merge. The rest is clean.
Restore direct announcement close behavior for the Try action so parent state clears even if navigation unmounts before exit animation completion. Update the migrated checkbox wrapper to use a label-bound control path and guard same-state events, avoiding duplicate onChange calls across pointer and assistive activation paths.
* Add bulk recovery button in Apps -> Boltz -> Settings * Upgrade ts-sdk 0.4.22 - boltz-swap 0.3.24 * Allow single item refund * Fix vertical scrolling
Define heading text utilities with Tailwind v4 @Utility so the heading scale consistently applies TT Firs Neue, medium weight, tracking, and line height. Remove the portfolio balance visibility toggle from the redesigned home hero and always render the visible fiat total. Add a regression test covering heading font mapping, shadcn inline theme overrides, and medium-weight heading defaults.
Refine the wallet home header layout with larger touch targets, balanced logo spacing, and scroll-aware balance docking. Add a soft scroll haze, align header icon stroke weights, and centralize portfolio balance display formatting for the hero and sticky header. Fix pull-to-refresh so it respects the inner content scroller instead of window scroll position, and align the iOS haptic switch DOM with the web-haptics pattern for Safari.
Tighten the home action bar safe-area spacing and bottom haze, align upsell icon treatment with onboarding, and route asset fiat values through the shared symbol-aware formatter used by the portfolio header. Rework haptics to use web-haptics with native vibration fallback and queue scroll threshold feedback so the balance collapse haptic is flushed from touch events instead of the scroll frame.
…omponent-migration-20260430 # Conflicts: # bun.lock # src/screens/Apps/Assets/Burn.tsx # src/screens/Apps/Assets/Reissue.tsx
Remove the unsupported scroll-driven balance haptic code after device testing confirmed iOS only allows haptics from direct tap contexts. Keep the visual balance collapse behavior and preserve the home banner placement above assets.
Add the missing web-haptics resolution to pnpm-lock.yaml so pnpm installs and preview builds resolve the dependency declared in package.json.
Move the wallet action bar overlay to the app shell so it exits and enters cleanly around wallet subflows. Route wallet settings as a wallet detail screen with its own back behavior, and make asset detail and mint back buttons use the navigation stack so wallet-home entries return to wallet home instead of Arkade Mint. Add regression coverage for create asset, wallet settings, asset detail back, and mint back.
Move wallet actions into the home balance area, add the asset swap prototype, price fiat-pegged assets consistently, and issue local dev reference assets for USDT and CHF. Also removes the home Create/View all asset triggers, fixes drawer ref forwarding, and updates wallet tests for the new home action and swap flows.
Adds a neutral animated receive asset picker above the QR code with BTC, USDT, and USDC logo options. Persists the last selected receive asset and allows known imported assets to be selected even without a positive balance. Covers the picker, persistence, and zero-balance asset selection in receive QR tests.
Remove the Codex/Claude variant switcher and keep the swap screen on the stacked quote flow so the prototype surface matches the UI being evaluated. Also clean up the receive asset chip copy and menu alignment.
Refine the redesigned wallet home screen with shared asset logos, cleaner asset and upsell sections, improved dark-mode surfaces, and a more deliberate load-in stagger. Also updates receive asset selection to reuse the same token logo treatment and keeps prototype asset display data aligned with USDC and USDT.
Polish recent activity, the full activity panel, and transaction details with calmer typography, spacing, icon treatment, and receipt-style surfaces. Rework the prototype swap flow into a compose-first screen with inline rate context, an on-demand keypad, animated direction switching, and review details in the drawer.
Reshape the wallet swap prototype into a staged asset-first flow with search, focused amount entry, receive asset selection, and a polished review drawer. Also hardens the local dev wallet auto-init path so a wedged service worker cannot leave the app stuck on loading.
Refines the home, send, receive, swap, and settings surfaces in the wallet redesign draft. Adds tap-to-hide balance privacy with haptics, improves settings row hierarchy and preference screens, fixes the send asset dropdown sizing, adjusts secondary controls, and keeps dev auto-init from falling through to onboarding/loading dead ends.
Add the Liveline-powered asset detail page with chart controls, refreshed activity layout, privacy amount behavior, and resilient boot loading exit handling for the wallet redesign prototype.
Refines the asset detail chart experience with live market data handling, stablecoin peg presentation, smoother long-range display data, and haptic chart scrubbing. Tightens the page typography scale and softens the neutral treatment for negative price movement badges.
Uses Coinbase daily candles for BTC all-time charts so All differs from the one-year CoinGecko range, smooths one-day chart rendering, and adds a dev-only service-worker reset guard for VITE_DEV_NSEC boot loops.
- Aggregate stablecoin rails into USD, CHF, and BRL account rows with flag avatars - Use fixed currency decimals across wallet surfaces - Add asset detail support for fiat accounts, live FX conversion, and CHF/BRL history charts - Thread selected account context into receive, send, and swap flows
- Add in-memory prototype swap execution and account balance deltas - Show animated full-screen swap success state with auto-dismiss - Add route-style swap icons to recent activity - Add dev boot fallback for initial wallet data loading
- Rename USD, CHF, and BRL account labels to ISO currency codes - Update receive asset picker and asset detail mappings - Adjust receive picker tests for ISO labels
Deploying wallet-staging with
|
| Latest commit: |
e80d510
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://2d6c6be7.wallet-staging-95g.pages.dev |
| Branch Preview URL: | https://wt-home-v2-20260501.wallet-staging-95g.pages.dev |
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
3 participants
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
Rebuilds the homepage redesign from #557 on top of #593 (component migration), using the full ShadCN/Tailwind v4 design system.
Changes:
Design tokens used:
text-heading-xlfor balance displayneutral-*color ramp for text and borderspurple-700for accent colorsTest plan
🤖 Generated with Claude Code