fix(connect-modal): VeWorld Universal Link fallback when extension missing — v2.8.2#615
Conversation
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]>
📝 WalkthroughWalkthroughThis PR adds a new ChangesDependency and Workspace Updates
Next-Chakra-v3 Example: Chakra UI v3 and Color Mode Integration
VeWorld Extension Fallback Mechanism
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
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.
Built for teams:
One agent for your entire SDLC. Right inside Slack. 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 |
There was a problem hiding this comment.
Actionable comments posted: 4
🧹 Nitpick comments (1)
examples/next-chakra-v3/src/components/ui/provider.tsx (1)
4-4: ⚡ Quick winUse a path alias import instead of a relative import.
Please replace
./color-modewith 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,@hooksfor hooks,@componentsfor components,@utilsfor 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
⛔ Files ignored due to path filters (1)
yarn.lockis excluded by!**/yarn.lock,!**/*.lock
📒 Files selected for processing (18)
examples/homepage/package.jsonexamples/next-chakra-v3/.gitignoreexamples/next-chakra-v3/README.mdexamples/next-chakra-v3/next.config.jsexamples/next-chakra-v3/package.jsonexamples/next-chakra-v3/src/app/layout.tsxexamples/next-chakra-v3/src/app/page.tsxexamples/next-chakra-v3/src/app/providers.tsxexamples/next-chakra-v3/src/components/ui/color-mode.tsxexamples/next-chakra-v3/src/components/ui/provider.tsxexamples/next-chakra-v3/src/providers/VechainKitProviderWrapper.tsxexamples/next-chakra-v3/src/theme/theme.tsexamples/next-chakra-v3/tsconfig.jsonexamples/next-template/package.jsonexamples/playground/package.jsonpackage.jsonpackages/vechain-kit/package.jsonpackages/vechain-kit/src/hooks/login/useConnectWithDappKitSource.ts
|
Size Change: +2.58 kB (+0.03%) Total Size: 8.47 MB
ℹ️ View Unchanged
|
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
🤖 Generated with Claude Code
Summary by CodeRabbit
New Features
Improvements
Chores