Comparing changes

* feat(connect-modal): custom UI for VeWorld/Sync2/WalletConnect + variation A redesign Replace dapp-kit's native wallet picker modal with vechain-kit's own ConnectModal flow for VeWorld, Sync2, and WalletConnect. The previously opaque "Connect with VeWorld wallet" entry now drives dapp-kit programmatically via `setSource(...) + connect()` and reflects progress in the kit's own LoadingContent / ErrorContent, so the wallet handoff feels native to the host dApp. Adds: - Granular login methods: 'veworld', 'sync2', 'wallet-connect', 'apple'. 'dappkit' is preserved as-is for backwards compatibility (still opens dapp-kit's native picker). - `useConnectWithDappKitSource(source, setCurrentContent)` hook — centralises the loading/error state machine and rejection detection for any dapp-kit wallet source. Uses legacy `connect()` (not `connectV2`) since the latter is unsupported by the desktop VeWorld extension and WalletConnect. - New buttons: VeWorldButton (primary filled, inverted contrast + recommended green dot), Sync2Button, WalletConnectButton, LoginWithAppleButton. - MoreOptionsContent — sub-content with three sections (Other wallets / Other sign-in / Ecosystem apps). Surfaces overflow from `dappKit.allowedWallets` and `privy.loginMethods` that aren't on the main grid, with a Privy-modal fallback for non-native socials. - ConnectModal `'more'` content type + 250ms cross-fade transition between views. Redesign per variation A spec: - ConnectionButton: three-slot layout [icon | label | trailing] at 52px height, 16px radius, 14px gap, scale-on-press. - VeWorld primary filled (white-on-dark / dark-on-white). Recommended 6px green dot with 3px halo only on the recommended provider. - Google / Apple secondary outline. Brand-correct icons (white Apple in dark mode, native Google G). - "More options ⌄" footer link replaces the legacy ellipsis button. - LoadingContent: 64×64 spinner ring with provider icon slot, accent "Waiting for signature…" headline, persistent uppercase Cancel link at the bottom. - ErrorContent: 56×56 soft-red disc, "Couldn't connect" headline, Back + Try again side-by-side. Defaults: - With Privy: `[veworld, google, apple, more]` - Without Privy: `[veworld, sync2, wallet-connect]` Co-Authored-By: Claude Opus 4.7 (1M context) <[email protected]> * chore(next-template): demo new login methods config Pin the granular VeWorld/Google/Apple/More layout so the example shows off the new flow out of the box. The previous 'dappkit' entry stayed on dapp-kit's modal and hid the redesign. Co-Authored-By: Claude Opus 4.7 (1M context) <[email protected]> * feat(theme): expose accent + border-button + error-bg tokens Make the connect modal redesign fully theme-respecting. Previously the new buttons hardcoded brand-leaning literals for the accent blue, secondary outline stroke, row hovers, and soft error background — so devs customising `theme` on `VeChainKitProvider` could not influence them. - Add `colors.accent` to `ThemeTokens` and to the default light/dark token sets (`#3b82f6` / `#60a5fa`). Devs can override via `theme.accent` on `VeChainKitProvider`. - Register three new semantic tokens in `theme.tsx`: - `vechain-kit-accent` (spinner arc, focus rings, "Waiting for signature…" headline, email submit when valid) - `vechain-kit-border-button` (already a token, now exposed — fixes a no-op hover in MoreOptionsContent caused by the unregistered name) - `vechain-kit-error-bg` (12%-alpha derivation of the error token, used by the error circle background) - `vechain-kit-button-secondary-bg` (row hovers in MoreOptionsContent, secondary-button outline hover bg) - VeWorld primary button now reads `vechain-kit-button-primary-{bg, color}` instead of inverted-contrast literals — devs that customise `theme.buttons.primaryButton` automatically restyle the CTA. - Google / Apple secondary buttons consume the stroke + hover tokens. - ErrorContent reads `vechain-kit-error` and `vechain-kit-error-bg`. - LoadingContent reads `vechain-kit-accent` and the spinner-track border token. - MoreOptionsContent rows hover off the secondary-button bg token. Brand-locked surfaces stay hardcoded by design: Google white tile, Apple primary tile, WalletConnect `#3B99FC`, GitHub `#24292e`, recommended-provider green dot `#16a34a`, per the variation A spec. Co-Authored-By: Claude Opus 4.7 (1M context) <[email protected]> * chore(playground): match next-template's new login methods config Co-Authored-By: Claude Opus 4.7 (1M context) <[email protected]> * fix(connect-popover): tighten width and drop empty footer - Drop popover width from 380px → 320px. Popovers anchor next to a trigger and don't need the modal's full width. - Skip rendering PopoverFooter entirely when there's no ecosystem button to show, so the "More options" link is no longer followed by ~15px of dead space. - Tighten PopoverBody padding (16 → 12px). Co-Authored-By: Claude Opus 4.7 (1M context) <[email protected]> * fix(connect-modal): replace duplicate "Waiting for signature…" hint LoadingContent already renders "Waiting for signature…" as the accent headline above the hint, so passing the same string as `loadingText` made it appear twice in the connecting view. Switch the hint to the provider-specific copy from the spec. - veworld / sync2 → "Open your wallet and confirm the connection request." - wallet-connect → "Scan the QR code with your wallet to continue." Co-Authored-By: Claude Opus 4.7 (1M context) <[email protected]> * feat: align playground * feat: align login methods in homepage * docs: document custom login flow + new loginMethods - packages/vechain-kit/README.md: extend the feature blurb to mention the in-house connect UI, list the new social providers explicitly, and add a "Customize the login modal" snippet showing the new granular methods + the theme.accent knob. - README.md: same intro wording for the repo root. - docs/login-modal.md: draft page intended for the vechain-kit docs repo (https://docs.vechainkit.vechain.org/). Covers the layout, every supported method value, the More-options sub-view, theming surface area + brand-locked exceptions, and a migration note for apps upgrading from < 2.6.x. To be lifted into a separate docs PR. Co-Authored-By: Claude Opus 4.7 (1M context) <[email protected]> * fix: remove old signing example in homepage * fix(connect-modal): address CodeRabbit feedback - LoadingContent: Cancel button now always calls onGoBack (was falling through to onTryAgain, which would re-trigger the wallet prompt — the opposite of cancelling). - MoreOptionsContent.showPasskeyHere: gate on privy.loginMethods.includes('passkey') in addition to the existing privy + main-grid checks, so Passkey is hidden when not configured. - MoreOptionsContent ecosystem rejection: preserve the current showBackButton flag when returning to the 'more' view so popover-launched flows (showBackButton=false) don't suddenly grow a back arrow. - MoreOptionsContent.submitEmail: wrap sendCode() in try/catch and transition to the error sub-view on failure. Previously errors were swallowed silently. - VeChainKitProvider default loginMethods (no-Privy): align with the default dappKit.allowedWallets (`['veworld']`) — was previously surfacing sync2 + wallet-connect buttons that the allowedWallets gate immediately filtered out. Devs that want Sync2/WC must opt in via both `allowedWallets` and `loginMethods` (WC also needs a projectId). - Translations: replace machine-generated "Login with social" values with idiomatic phrases in de/es/fr/it/nl/pt/sv. Remaining 16 locales for the 18 new redesign keys are filled in by `yarn translate` during `yarn publish:release` per CLAUDE.md. Skipped (with reason): - Path-alias imports (WalletConnectButton, ConnectModal, MoreOptionsContent): the components/ConnectModal/** folder uses relative paths throughout; aliasing only the new files would be inconsistent with sibling code. Co-Authored-By: Claude Opus 4.7 (1M context) <[email protected]> * i18n(connect-modal): backfill all 18 new keys across all 16 locales OPENAI_API_KEY in .env was invalid so `yarn translate` couldn't run. Filled the redesign's new keys by hand for de/es/fr/hi/it/ja/ko/nl/ pt/ro/ru/sv/tr/tw/vi/zh, with brand names (VeWorld, Sync2, WalletConnect, Apple) preserved as-is. Files were also re-sorted by the project's lint formatter. Keys covered: Continue with Apple/VeWorld/Sync2/WalletConnect, Waiting for signature..., Open your wallet and confirm the connection request., Scan the QR code with your wallet to continue (./...), More options, Other wallets, Other sign-in, Ecosystem apps, Couldn't connect, Back, or, No additional login options available., Failed to connect please try again later., Please sign the certificate in your wallet to continue... Co-Authored-By: Claude Opus 4.7 (1M context) <[email protected]> * fix(connect-modal): address 3 more CodeRabbit notes + "More options" row - MoreOptionsContent: gate showWalletConnectHere on dappKit.walletConnectOptions.projectId — without one the WC SDK rejects at connect, so listing the row is misleading. - nl.json: switch the 4 new "wallet" prompts from informal "je" to formal "uw" to match the rest of the locale (12 "uw wallet" vs the 4 "je wallet" I just added). - es.json: rename "wallet" → "billetera" in the 4 new prompts to match the existing Spanish convention in the rest of the file. And the user-requested follow-up: - MoreOptionsContent: render the "More options" Privy fallback inside the "Other sign-in" section as a ProviderRow (LuEllipsis tile + label + chevron) instead of a centered link, so it visually matches the rows above it. Co-Authored-By: Claude Opus 4.7 (1M context) <[email protected]> --------- Co-authored-by: Claude Opus 4.7 (1M context) <[email protected]>

…g cards (#612) * feat(account-modal): tabbed assets with token detail, history, and staking cards Refactor AccountModal Assets into a full portfolio view: balance header with Send/Swap/History actions, Token/Staking tabs, per-token detail screen with Swap/Send/Receive, aggregated transfer history backed by the VeChain indexer, transaction detail screen, and protocol-specific staking cards for Stargate, VeBetterDAO Navigators, and BetterSwap LP positions. Adds VVET (wrapped VET) as a tracked token priced 1:1 with VET, and folds staking positions into useTotalBalance so the portfolio total reflects the user's full holdings. Co-Authored-By: Claude Opus 4.7 (1M context) <[email protected]> * chore(account-modal): polish assets layout, icons, and staking cards - Move Manage Custom Tokens button back inline with the search input; shrink the search input height for a tighter Assets header. - Trim AssetsTabs to just the tab labels. - Use the bundled BetterSwapLogo for the BetterSwap LP card; switch Stargate to the actual product logo; route VVET to the VeChain token registry icon and rename the Navigators card to "VeBetter". - Remove the redundant external-link icon next to the protocol name on staking cards and tighten the "Go to platform" button styling. Co-Authored-By: Claude Opus 4.7 (1M context) <[email protected]> * fix(transfer-history): use eventType=VET for native VET filter The indexer doesn't accept the VET sentinel address as a tokenAddress filter, so filtering by VET was fetching a mixed page and post-filtering client-side, leaving only a handful of rows per page. Switch to the indexer's eventType=VET parameter so the page contains only VET transfers and pagination is meaningful. Co-Authored-By: Claude Opus 4.7 (1M context) <[email protected]> * feat(prices): 24h price change from oracle ValueUpdate events Add useOraclePriceChanges24h: reads OracleVechainEnergy's current values for each supported feed and scans ValueUpdate events in a ~5h window centered on the block ~24h ago, taking the most recent observation per feedId as the baseline. Filters by contract address only (the id field is non-indexed) and decodes args client-side. useTokenPrices exposes a priceChanges map keyed by token address (VOT3 and veDelegate inherit B3TR's change; VVET inherits VET's). Plumbs priceChange24hPct through useTokensWithValues and a USD-weighted portfolio-level change through useTotalBalance. UI: new common PriceChangeBadge renders +/-X.XX% in semantic green/red/muted with the "24h" suffix in neutral tertiary text. Surfaces in AssetButton, the restyled card-shaped asset row, TokenDetail header, AssetsHeader, and the main BalanceSection. Co-Authored-By: Claude Opus 4.7 (1M context) <[email protected]> * feat(history): resolve .vet domains and add copy buttons - New AddressOrDomainLabel wraps useVechainDomain and renders the .vet domain when available, falling back to humanAddress otherwise. Used for the From/To subtitle on HistoryItemRow and the From/To rows on TransactionDetailContent. - New CopyIconButton wraps the SSR-safe copyToClipboard with a Copy -> Check icon transition. Added next to From, To, and Hash on the transaction detail screen so users can copy the full underlying address / tx ID even when the label is truncated or a domain. Co-Authored-By: Claude Opus 4.7 (1M context) <[email protected]> * fix(history): dedupe and Map-group transfers to avoid duplicate React keys groupByDay used a sequential lastKey check, so any non-contiguous same-day items (e.g. when paginating overlaps a day boundary) produced multiple groups with the same label and React threw a duplicate-key error on Load more. Switch to a Map keyed by day label and a Set keyed by item.id so a transfer can never produce two groups or two rows. Co-Authored-By: Claude Opus 4.7 (1M context) <[email protected]> * fix(transfer-history): use page param instead of offset/limit The VeChain indexer ignores offset/limit and only honors a 0-indexed `page` parameter (returning ~20 items per page). Previously every Load More click hit the same page-0 response, and the row dedupe quietly swallowed the duplicate IDs, so the UI appeared frozen. - Drop PAGE_SIZE and the offset/limit params. - Send only `page=<n>`. - getNextPageParam returns allPages.length (0 -> 1 -> 2 ...) when the server reports hasNext. Co-Authored-By: Claude Opus 4.7 (1M context) <[email protected]> * fix(transfer-history): scope eventType=VET to explicit VET filter only isVetTokenAddress treated 'undefined tokenAddress' the same as the VET sentinel, so opening unfiltered history forced eventType=VET on the indexer and the user only saw native VET rows. Trigger the VET filter only when the caller explicitly passes the VET sentinel. Co-Authored-By: Claude Opus 4.7 (1M context) <[email protected]> * fix(history): resolve unknown ERC-20 symbols and mirror sparkles icon - useTransferHistory now collects every ERC-20 address per page that isn't in the known token set (custom tokens + VET/VTHO/B3TR/VOT3/ veDelegate/VVET), fetches getTokenInfo for them in parallel, and uses the real symbol + decimals. Fixes rows that previously displayed as e.g. "+100 0x680f" (LP tokens from BetterSwap and other DeFi protocols) and corrects the amount when the contract isn't 18 decimals. - TransactionDetailContent now mirrors HistoryItemRow's behaviour: when the transfer was received from 0x000...000 it renders the LuSparkles placeholder circle instead of the token logo. Co-Authored-By: Claude Opus 4.7 (1M context) <[email protected]> * feat(staking): add Juicy Finance card and fix history row overflow - New useJuicyPosition hook reads the Juicy Finance pool (Aave v3 fork at 0x00Bd212704A8816264607a7110cCabe70219D5aB on mainnet): enumerates reserves, batches getReserveData + balanceOf on each aToken / variableDebt / stableDebt token, and computes supplied + borrowed per asset and net USD value. Health factor read from getUserAccountData (null when there's no debt). - New JuicyFinanceCard renders a supplied list, optional borrowed list, and a colored health-rate tag; routes to www.juicyfinance.io. - StakingTab gates on hasPosition; useTotalBalance folds the net Juicy position into the portfolio total. - Local JuicyPoolAbi added in staking/abis.ts (canonical Aave v3 subset from vechain/b32). - HistoryItemRow: split amount and token symbol onto two lines, with flexShrink/minW/maxW constraints so long token names (jVechainVTHO, variableDebtVechainVTHO, etc.) truncate with an ellipsis instead of overflowing the row. Co-Authored-By: Claude Opus 4.7 (1M context) <[email protected]> * fix(build): satisfy stricter tsc on staking + oracle hooks CI's @vechain/vechain-kit:build runs tsc with stricter options than `yarn typecheck` and surfaced four type errors: - CustomTokenInfo.decimals is typed as string, not number — drop the inline cast in useTransferHistory and useJuicyPosition and coerce with Number(info.decimals) (fallback 18) instead. - oracle.read.getLatestValue requires `0x\${string}` — cast the PRICE_FEED_IDS value at the call site. - getEventLogs requires nodeUrl in GetEventsProps — pass network.nodeUrl in useOraclePriceChanges24h. Co-Authored-By: Claude Opus 4.7 (1M context) <[email protected]> * chore(i18n): translate remaining aria-labels and Copy prefix - aria-label on the action buttons in AssetsHeader and TokenDetail now uses the translated string (matches the visible text), not the raw English key. - Row's CopyIconButton aria-label uses t('Copy') instead of a hardcoded English prefix; Row pulls its own useTranslation hook. - Add the 'Copy' key to en.json. Co-Authored-By: Claude Opus 4.7 (1M context) <[email protected]> * i18n: translate new assets/history/staking keys across all 16 locales Add translations for the 37 keys introduced by the AccountModal refactor (Token, Staking, History, Sent, Received, Supplied, Borrowed, Health rate, Go to platform, Copy, etc.) to every supported locale: de, es, fr, hi, it, ja, ko, nl, pt, ro, ru, sv, tr, tw, vi, zh. Also alphabetises all language files (including en.json) case- insensitively so the per-locale set of keys stays in sync going forward. Co-Authored-By: Claude Opus 4.7 (1M context) <[email protected]> * fix(history): thread onBack through transaction-detail / history screens Token Detail -> tap a history-preview row -> Transaction Detail. The back button was hardcoded to navigate to the aggregated history screen instead of returning to Token Detail. Add an optional onBack prop to both TransactionHistoryContent and TransactionDetailContent, and pass: - TokenDetail.handleHistoryItem -> onBack returns to Token Detail. - TokenDetail.handleSeeAll -> onBack returns to Token Detail. - TransactionHistory.handleItemClick -> onBack re-dispatches the same history screen with its tokenFilter + parent onBack so further back presses still chain correctly. History screen's back button uses onBack if provided, else falls back to the Assets list (existing behaviour). Co-Authored-By: Claude Opus 4.7 (1M context) <[email protected]> * chore(review): address valid CodeRabbit findings - useTransferHistory: only pre-fill symbolByAddress for known 18-decimal tokens (VET, VTHO, B3TR, VOT3, veDelegate, VVET). Custom tokens flow through the existing lazy getTokenInfo path so their real decimals are honoured. - useBetterSwapLpPositions: validate factoryAddress / pairs with viem's isAddress; build the queryKey from a pairs fingerprint (first + last + length) so different sets with equal length get distinct cache entries; use the validated pair list throughout the queryFn. - config: checksum the testnet stargate/stargate-NFT/navigator-registry addresses and the mainnet navigator address (EIP-55) to match the surrounding style. - CopyIconButton: store the setTimeout id in a useRef and clear it on rapid re-click and on unmount. Other CodeRabbit suggestions were verified against current code and are either already covered (oracle feedId cast, prices lowercase mirror, ERC20 balance hook's internal address guard), pre-existing patterns across the kit, or no-ops given the surrounding constraints — left unchanged to keep this diff minimal. Co-Authored-By: Claude Opus 4.7 (1M context) <[email protected]> * feat(charts): 24h sparklines from oracle ValueUpdate events - Refactor the oracle hook into a single useOracleHistory24h query that scans 24h of ValueUpdate events once and exposes: * useOraclePriceChanges24h -> percent change per feed * useTokenPriceHistory24h(token) -> sorted PricePoint[] The current spot value is pinned as the closing point so the chart always extends to "now" even between sparse oracle updates. - New usePortfolioPriceHistory24h derives a portfolio sparkline by walking the union of feed timestamps and weighting each feed by the wallet's current liquid holdings (VVET counted as VET; VOT3 + veDelegate counted on the B3TR feed). Cheap and accurate enough for a 24h window where holdings rarely change. - New PriceChart: dependency-free SVG sparkline with a green/red/neutral tone, gradient fill, configurable opacity, and vector-effect non-scaling-stroke so the line stays crisp regardless of container width. - TokenDetail screen shows the chart full-opacity between balance and actions; VVET / VOT3 / veDelegate piggy-back on VET / B3TR. - BalanceSection (main wallet view) overlays the portfolio chart at ~18% opacity behind the balance text, tinted by the day's direction. Co-Authored-By: Claude Opus 4.7 (1M context) <[email protected]> * chore(chart): smooth sparkline with Catmull-Rom-to-Bezier curves The straight-line polyline produced sharp corners between sparse oracle points. Replace M/L segments with a Catmull-Rom-derived cubic-Bezier spline: each segment's control points are derived from the surrounding two points so the curve glides through every observation without overshooting. The filled area + the existing strokeLinejoin/Linecap =round still apply. Co-Authored-By: Claude Opus 4.7 (1M context) <[email protected]> * fix(chart): switch to monotone cubic interpolation to stop overshoot The Catmull-Rom-to-Bezier smoothing produced control points that overshot adjacent points whenever neighbouring oracle observations jumped sharply, causing the line to backtrack on itself. Replace with Fritsch-Carlson monotone cubic: tangents at each point are the average of neighbouring slopes (zero at local extrema), then clamped so the curve is provably monotone within each segment. The curve still passes through every observation but is guaranteed not to overshoot or reverse direction between points. Co-Authored-By: Claude Opus 4.7 (1M context) <[email protected]> * feat(chart): show portfolio sparkline on Assets page AssetsHeader now renders the same monotone-cubic portfolio sparkline between the balance row and the Send/Swap/History actions, mirroring the per-token chart on TokenDetail. Reuses usePortfolioPriceHistory24h and PriceChart, tinted by the day's direction. Hidden when balances are hidden (showAssets=false) or when there's only one observation. Co-Authored-By: Claude Opus 4.7 (1M context) <[email protected]> * revert(chart): drop the sparkline underlay from BalanceSection The chart still ships on Assets and TokenDetail; on the main wallet view (BalanceSection) it competed with the AssetIcons row and didn't add enough signal at 18% opacity. Removes the underlay layer, the usePortfolioPriceHistory24h call, the Box wrapper and the now-unused imports. Co-Authored-By: Claude Opus 4.7 (1M context) <[email protected]> * feat(chart): hover/touch tooltip + swap Assets header button order - PriceChart: new interactive prop. When enabled the chart accepts mouse/touch input, snaps to the nearest data point, and renders a vertical guide line, a marker dot at the active point, and a position-aware tooltip with the formatted value and timestamp. New formatValue prop lets callers override the value formatter (defaults to a 4-decimal USD price; AssetsHeader passes formatCompactCurrency so portfolio values render as $4.30K-style). - TokenDetail and AssetsHeader charts opt in via interactive. - AssetsHeader actions reordered to [Swap, Send, History] so they match the [Swap, Send, Receive] order on TokenDetail. Co-Authored-By: Claude Opus 4.7 (1M context) <[email protected]> * fix(chart): fold staking positions into the portfolio sparkline The chart was only summing liquid token balances, so for wallets where most value sits in Stargate / Navigators / Juicy / BetterSwap LP, the sparkline reported a value an order of magnitude smaller than useTotalBalance's headline number. usePortfolioPriceHistory24h now also reads useStargatePositions, useNavigatorPosition, useJuicyPosition, useBetterSwapLpPositions and maps each into the appropriate price feed: - Stargate VET supplied -> VET feed amount. - Navigator staked B3TR / delegated B3TR -> B3TR feed amount. - Juicy supplied/borrowed -> per-asset net into VET (via VVET), VTHO, or B3TR feeds. - BetterSwap LP positions -> flat USD offset (their underlying split varies per pair, so attributing amounts to specific feeds isn't meaningful; the current USD value still contributes to the total). Co-Authored-By: Claude Opus 4.7 (1M context) <[email protected]> --------- Co-authored-by: Claude Opus 4.7 (1M context) <[email protected]>

Chakra v2's ColorModeProvider inside the kit reads localStorage["chakra-ui-color-mode"] in a mount-time effect and overwrites its internal state with that stale value, ignoring the `darkMode` prop. The old ColorModeSync compared the *initial* colorMode against the target before Chakra's effect ran, so it never corrected the drift. React 19 / Next.js 16 strict mode makes this race deterministic — light mode is now permanently broken in hosts that previously rendered the kit in dark mode. Replace ColorModeScript + ColorModeSync with a custom colorModeManager that always reports the current darkMode prop and no-ops writes. Recreating the manager when darkMode changes re-triggers Chakra's read effect, so the internal color mode now tracks the prop without ever touching localStorage. Co-authored-by: Claude Opus 4.7 (1M context) <[email protected]>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Comparing changes

Open a pull request

Commits on May 14, 2026

This comparison is taking too long to generate.

Uh oh!