Skip to content

fix(connect-modal): VeWorld Universal Link fallback when extension missing — v2.8.2#615

Merged
Agilulfo1820 merged 4 commits into
mainfrom
fix/v2.8.2-veworld
May 15, 2026
Merged

fix(connect-modal): VeWorld Universal Link fallback when extension missing — v2.8.2#615
Agilulfo1820 merged 4 commits into
mainfrom
fix/v2.8.2-veworld

Conversation

@Agilulfo1820

@Agilulfo1820 Agilulfo1820 commented May 15, 2026

Copy link
Copy Markdown
Member

Summary

When the user clicks "Continue with VeWorld" without the extension installed, the modal previously showed the error view (`"VeWorld Extension is not installed"` thrown by dapp-kit's `setSource('veworld')`). dapp-kit's own UI doesn't do that — it redirects to a VeWorld Universal Link so the dApp opens inside VeWorld mobile on phones, or lands on the install page on desktop.

This PR mirrors that fallback in `useConnectWithDappKitSource`:

```ts
if (source === 'veworld' && !window.vechain) {
window.open(
`https://www.veworld.com/discover/browser/ul/\${encodeURIComponent(window.location.href)}\`,
'_self',
);
return;
}
```

Also bumps to v2.8.2 so the brand-lock fix from commit `5cbd3d76` (already on main but only in unreleased state) + this deeplink fix can ship together.

Test plan

  • Desktop without the VeWorld extension → click "Continue with VeWorld" → the current tab navigates to the VeWorld install/landing page instead of showing the in-modal error.
  • Mobile (iOS / Android) without VeWorld installed → click "Continue with VeWorld" → lands on `veworld.com` install page.
  • Mobile with VeWorld installed → click "Continue with VeWorld" → opens VeWorld mobile's in-app browser at the dApp URL (Universal Link).
  • Desktop with the extension → no change — extension popup still triggers as before.
  • `yarn kit:typecheck && yarn lint` pass.

🤖 Generated with Claude Code

Summary by CodeRabbit

  • New Features

    • Added new example project demonstrating VeChain Kit integration with Chakra UI v3 and theme management with next-themes.
  • Improvements

    • Enhanced VeWorld connection flow with automatic fallback to universal link when the extension is unavailable.
  • Chores

    • Updated Next.js dependency to v16.2.3 across example projects.
    • Bumped VeChain Kit to v2.8.2.

Review Change Stack

Agilulfo1820 and others added 4 commits May 14, 2026 19:26
Adds a workspace-linked example that mirrors b3tr's stack — Next.js (App
Router) + React 18 + Chakra UI v3 + next-themes — driving the kit via the
same `useColorMode` / `useToken` patterns the production app uses.

Lets us reproduce and debug host integration edge cases (notably the
Chakra v3 `useToken` value-vs-var-ref pitfall) against the local kit
sources without needing to publish new releases. Run with
`yarn dev:next-chakra-v3` (kit watch + example dev on :3010).

Co-Authored-By: Claude Opus 4.7 (1M context) <[email protected]>
…ssing

Previously, clicking "Continue with VeWorld" without the extension
threw "VeWorld Extension is not installed" from dapp-kit's
`setSource('veworld')` and surfaced as the modal's error view. dapp-kit
UI handles this differently — it redirects to a VeWorld Universal Link
which opens the dApp inside VeWorld mobile (or the install page on
desktop).

Mirror the same fallback in `useConnectWithDappKitSource`:
  window.open(
    `https://www.veworld.com/discover/browser/ul/${encodeURIComponent(window.location.href)}`,
    '_self',
  )

before attempting `setSource('veworld') + connect()`, when
`window.vechain` is undefined.

Co-Authored-By: Claude Opus 4.7 (1M context) <[email protected]>
Co-Authored-By: Claude Opus 4.7 (1M context) <[email protected]>
@coderabbitai

coderabbitai Bot commented May 15, 2026

Copy link
Copy Markdown
📝 Walkthrough

Walkthrough

This PR adds a new next-chakra-v3 example for debugging Chakra UI v3 color mode propagation with VeChain Kit, updates Next.js dependencies across examples to ~16.2.3, bumps vechain-kit to 2.8.2, and implements a VeWorld extension fallback using a universal link for connection attempts.

Changes

Dependency and Workspace Updates

Layer / File(s) Summary
Package version and dependency updates
packages/vechain-kit/package.json, examples/homepage/package.json, examples/next-template/package.json, examples/playground/package.json, package.json
Package version bumped from 2.8.1 to 2.8.2. Next.js pinned to ~16.2.3 across all example workspaces. Root workspace script dev:next-chakra-v3 added for parallel watch and dev of the new example.

Next-Chakra-v3 Example: Chakra UI v3 and Color Mode Integration

Layer / File(s) Summary
Project configuration and dependencies
examples/next-chakra-v3/.gitignore, examples/next-chakra-v3/package.json, examples/next-chakra-v3/next.config.js, examples/next-chakra-v3/tsconfig.json, examples/next-chakra-v3/README.md
Complete project setup with dependencies (Chakra v3, next-themes, VeChain Kit), Next.js config enabling strict mode and package import optimization, TypeScript config with @/* alias, and documentation describing the color mode and theme propagation setup.
Chakra theme with semantic tokens and dark mode variants
examples/next-chakra-v3/src/theme/theme.ts
Theme system using Chakra v3 createSystem with vbd CSS variable prefix, base tokens (gray, blue), semantic tokens for background/actions/borders/text with _dark variants, and globalCss for smooth color transitions on mode change.
Color mode integration using next-themes
examples/next-chakra-v3/src/components/ui/color-mode.tsx, examples/next-chakra-v3/src/components/ui/provider.tsx
ColorModeProvider wraps next-themes ThemeProvider with class-based attribute. useColorMode hook derives effective mode from resolvedTheme and exports toggleColorMode. ColorModeButton and ColorModeIcon UI components provide theme toggle UI. Provider composes ChakraProvider with ColorModeProvider nesting.
App entry point and root layout
examples/next-chakra-v3/src/app/layout.tsx
Root layout exports metadata and wraps children with dynamically imported Providers component inside suppressed-hydration html/body.
Page component demonstrating VeChain Kit and theme behavior
examples/next-chakra-v3/src/app/page.tsx
Client-side page renders Chakra UI primitives, wires VeChain Kit hooks (useConnectModal, useAccountModal, useWallet), displays color mode button, conditionally shows connect or account modal buttons based on connection state, and explains theme token propagation mechanics.
Provider composition and VeChain Kit theme wrapper
examples/next-chakra-v3/src/app/providers.tsx, examples/next-chakra-v3/src/providers/VechainKitProviderWrapper.tsx
Providers wraps children with Provider and dynamically imported VechainKitProviderWrapper (SSR disabled). VechainKitProviderWrapper reads colorMode, derives reactive Chakra theme tokens via useChakraContext().token.var(), configures Privy and DappKit from environment variables, passes darkMode from app color mode, and renders children inside VeChainKitProvider.

VeWorld Extension Fallback Mechanism

Layer / File(s) Summary
VeWorld universal link fallback
packages/vechain-kit/src/hooks/login/useConnectWithDappKitSource.ts
When source === 'veworld' and window.vechain is missing (extension not injected), opens VeWorld universal link with encoded current page URL as fallback instead of proceeding with dapp-kit setSource + connect flow.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

  • vechain/vechain-kit#614: Directly overlaps with the main PR's next-chakra-v3 example implementation (Next config, App layout, providers, Chakra color-mode integration, VechainKitProviderWrapper theme wiring).
  • vechain/vechain-kit#584: Both PRs update packages/vechain-kit/package.json version field (differing in specific version bumped).
  • vechain/vechain-kit#613: Aligns on color-mode propagation: this PR wires app darkMode into VechainKitProviderWrapper, while PR #613 drives Chakra color mode from that darkMode prop.

Suggested reviewers

  • mikeredmond
  • victorkl400

Poem

🐰 A new example hops to life so bright,
With Chakra v3 and themes shining right,
VeWorld gets a fallback when walls are missing,
And color modes dance without re-rendering!

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title accurately describes the primary change: adding a VeWorld Universal Link fallback in the connect modal when the extension is missing, with a version bump to v2.8.2.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch fix/v2.8.2-veworld

Tip

💬 Introducing Slack Agent: The best way for teams to turn conversations into code.

Slack Agent is built on CodeRabbit's deep understanding of your code, so your team can collaborate across the entire SDLC without losing context.

  • Generate code and open pull requests
  • Plan features and break down work
  • Investigate incidents and troubleshoot customer tickets together
  • Automate recurring tasks and respond to alerts with triggers
  • Summarize progress and report instantly

Built for teams:

  • Shared memory across your entire org—no repeating context
  • Per-thread sandboxes to safely plan and execute work
  • Governance built-in—scoped access, auditability, and budget controls

One agent for your entire SDLC. Right inside Slack.

👉 Get started


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.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 4

🧹 Nitpick comments (1)
examples/next-chakra-v3/src/components/ui/provider.tsx (1)

4-4: ⚡ Quick win

Use a path alias import instead of a relative import.

Please replace ./color-mode with the configured src alias form (for example @/components/ui/color-mode) to keep imports consistent across the codebase.

As per coding guidelines, "Use path aliases for imports: @/* for src root, @hooks for hooks, @components for components, @utils for utils".

🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@examples/next-chakra-v3/src/components/ui/provider.tsx` at line 4, Replace
the relative import in provider.tsx that currently imports ColorModeProvider and
ColorModeProviderProps from './color-mode' with the project path-alias import
(e.g. import from '@/components/ui/color-mode') so that ColorModeProvider and
ColorModeProviderProps use the configured `@/`* alias for components; update the
import statement to reference the aliased module name while keeping the exported
symbols unchanged.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@examples/homepage/package.json`:
- Line 21: The workspace has a Next.js version mismatch: four example packages
(next-template, vechain-kit-playground, next-chakra-v3, vechain-kit-homepage)
depend on "next": "~16.2.3" but the root package.json resolutions force "next":
"15.5.9"; fix by making versions consistent—either update the root package.json
resolutions entry for "next" to "~16.2.3" so the workspace installs 16.2.x, or
change each example package.json to use "next": "15.5.9" (or a compatible 15.x)
instead; if you choose upgrading the root to 16.2.3, audit and update the
example code for Next.js 16 breaking changes (async request APIs, caching
defaults) after changing the resolutions.

In `@examples/next-chakra-v3/README.md`:
- Around line 8-11: Update the README to match the committed package.json and
dev script: change the Next version mention from "15.5.9" to the actual pinned
dependency ("~16.2.3" or whatever exact semver appears in package.json), update
the example dev URL/port from "http://localhost:3001" or "3001"/"3000" to
"http://localhost:3010" (the port the dev script uses), and adjust or remove the
monorepo `resolutions` note so it no longer claims the root pins Next to 15.5.9;
verify the same corrections are applied to the repeated lines around the later
mention (lines noted in the comment).

In `@examples/next-chakra-v3/src/components/ui/color-mode.tsx`:
- Line 19: The empty interface declarations ColorModeProviderProps and
ColorModeButtonProps should be converted to type aliases to satisfy the
`@typescript-eslint/no-empty-object-type` rule; locate the interface declarations
named ColorModeProviderProps and ColorModeButtonProps in color-mode.tsx and
replace each "export interface X extends Y {}" with an equivalent "export type X
= Y" so they retain the same shape/extends relationship without using an empty
interface.

In `@examples/next-chakra-v3/src/theme/theme.ts`:
- Around line 84-91: The globalCss object is incorrectly nested under the theme;
move the existing globalCss block out of the theme object and place it as a
top-level property in the defineConfig() call (i.e., alongside theme, not inside
it). Remove the globalCss entry from inside theme, add the same 'html,body'
styles under the root-level globalCss in the defineConfig return, and keep the
transition/bg/color keys unchanged so Chakra UI v3 picks them up correctly.

---

Nitpick comments:
In `@examples/next-chakra-v3/src/components/ui/provider.tsx`:
- Line 4: Replace the relative import in provider.tsx that currently imports
ColorModeProvider and ColorModeProviderProps from './color-mode' with the
project path-alias import (e.g. import from '@/components/ui/color-mode') so
that ColorModeProvider and ColorModeProviderProps use the configured `@/`* alias
for components; update the import statement to reference the aliased module name
while keeping the exported symbols unchanged.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 1cd89720-c579-4c1c-be45-35f5f198cc66

📥 Commits

Reviewing files that changed from the base of the PR and between 1a949bb and b7353de.

⛔ Files ignored due to path filters (1)
  • yarn.lock is excluded by !**/yarn.lock, !**/*.lock
📒 Files selected for processing (18)
  • examples/homepage/package.json
  • examples/next-chakra-v3/.gitignore
  • examples/next-chakra-v3/README.md
  • examples/next-chakra-v3/next.config.js
  • examples/next-chakra-v3/package.json
  • examples/next-chakra-v3/src/app/layout.tsx
  • examples/next-chakra-v3/src/app/page.tsx
  • examples/next-chakra-v3/src/app/providers.tsx
  • examples/next-chakra-v3/src/components/ui/color-mode.tsx
  • examples/next-chakra-v3/src/components/ui/provider.tsx
  • examples/next-chakra-v3/src/providers/VechainKitProviderWrapper.tsx
  • examples/next-chakra-v3/src/theme/theme.ts
  • examples/next-chakra-v3/tsconfig.json
  • examples/next-template/package.json
  • examples/playground/package.json
  • package.json
  • packages/vechain-kit/package.json
  • packages/vechain-kit/src/hooks/login/useConnectWithDappKitSource.ts

Comment thread examples/homepage/package.json
Comment thread examples/next-chakra-v3/README.md
Comment thread examples/next-chakra-v3/src/components/ui/color-mode.tsx
Comment thread examples/next-chakra-v3/src/theme/theme.ts
@github-actions

Copy link
Copy Markdown
Contributor

Size Change: +2.58 kB (+0.03%)

Total Size: 8.47 MB

Filename Size Change
packages/vechain-kit/dist/index-B7W1mM8I.d.mts 0 B -5.63 kB (removed) 🏆
packages/vechain-kit/dist/index-B7W1mM8I.d.mts.map 0 B -2.99 kB (removed) 🏆
packages/vechain-kit/dist/index-BAOcCex1.d.mts 0 B -170 kB (removed) 🏆
packages/vechain-kit/dist/index-BAOcCex1.d.mts.map 0 B -46.8 kB (removed) 🏆
packages/vechain-kit/dist/index-sgNPWl9B.d.cts 0 B -170 kB (removed) 🏆
packages/vechain-kit/dist/index-sgNPWl9B.d.cts.map 0 B -46.8 kB (removed) 🏆
packages/vechain-kit/dist/index.cjs.map 2.69 MB +1.13 kB (+0.04%)
packages/vechain-kit/dist/index.mjs.map 2.64 MB +1.11 kB (+0.04%)
packages/vechain-kit/dist/index-1I7zeZlZ.d.mts 170 kB +170 kB (new file) 🆕
packages/vechain-kit/dist/index-1I7zeZlZ.d.mts.map 46.8 kB +46.8 kB (new file) 🆕
packages/vechain-kit/dist/index-By_KU2jn.d.cts 170 kB +170 kB (new file) 🆕
packages/vechain-kit/dist/index-By_KU2jn.d.cts.map 46.8 kB +46.8 kB (new file) 🆕
packages/vechain-kit/dist/index-BYfc-9J5.d.mts 5.63 kB +5.63 kB (new file) 🆕
packages/vechain-kit/dist/index-BYfc-9J5.d.mts.map 2.99 kB +2.99 kB (new file) 🆕
ℹ️ View Unchanged
Filename Size Change
packages/vechain-kit/dist/assets 4.1 kB 0 B
packages/vechain-kit/dist/assets-BL24r-Yp.mjs 51.3 kB 0 B
packages/vechain-kit/dist/assets-BL24r-Yp.mjs.map 74.1 kB 0 B
packages/vechain-kit/dist/assets-DNJsQD7_.cjs 58.5 kB 0 B
packages/vechain-kit/dist/assets-DNJsQD7_.cjs.map 75.5 kB 0 B
packages/vechain-kit/dist/assets/index.cjs 716 B 0 B
packages/vechain-kit/dist/assets/index.d.cts 973 B 0 B
packages/vechain-kit/dist/assets/index.d.mts 973 B 0 B
packages/vechain-kit/dist/assets/index.mjs 718 B 0 B
packages/vechain-kit/dist/index-C8Uj8ple.d.cts 5.63 kB 0 B
packages/vechain-kit/dist/index-C8Uj8ple.d.cts.map 2.99 kB 0 B
packages/vechain-kit/dist/index.cjs 1.11 MB +222 B (+0.02%)
packages/vechain-kit/dist/index.d.cts 22.8 kB 0 B
packages/vechain-kit/dist/index.d.mts 22.8 kB 0 B
packages/vechain-kit/dist/index.mjs 1.07 MB +172 B (+0.02%)
packages/vechain-kit/dist/utils 4.1 kB 0 B
packages/vechain-kit/dist/utils-DJKLAzLP.cjs 27.2 kB 0 B
packages/vechain-kit/dist/utils-DJKLAzLP.cjs.map 67.2 kB 0 B
packages/vechain-kit/dist/utils-KYzX9d5n.mjs 22.1 kB 0 B
packages/vechain-kit/dist/utils-KYzX9d5n.mjs.map 66.5 kB 0 B
packages/vechain-kit/dist/utils/index.cjs 1.98 kB 0 B
packages/vechain-kit/dist/utils/index.d.cts 3.04 kB 0 B
packages/vechain-kit/dist/utils/index.d.mts 3.04 kB 0 B
packages/vechain-kit/dist/utils/index.mjs 2 kB 0 B

compressed-size-action

@Agilulfo1820 Agilulfo1820 merged commit 02f0a7f into main May 15, 2026
7 checks passed
@Agilulfo1820 Agilulfo1820 deleted the fix/v2.8.2-veworld branch May 15, 2026 05:43
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant