feat(wallet): add sidebar variant and fix connect/disconnect flow#63
feat(wallet): add sidebar variant and fix connect/disconnect flow#63JoelVR17 merged 2 commits intoTrustless-Work:developfrom
Conversation
📝 WalkthroughWalkthroughThe WalletButton component now supports a variant prop system ("default" or "sidebar") to enable variant-specific styling. SidebarWalletButton updated to pass the "sidebar" variant, while the core logic now depends on both mount state and wallet address. Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Possibly related PRs
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
📝 Coding Plan
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 Tip CodeRabbit can use TruffleHog to scan for secrets in your code with verification capabilities.Add a TruffleHog config file (e.g. trufflehog-config.yml, trufflehog.yml) to your project to customize detectors and scanning behavior. The tool runs only when a config file is present. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@packages/tw-blocks-shared/src/wallet-kit/WalletButtons.tsx`:
- Around line 50-55: Add a hydrated boolean to the WalletProvider context and
set it true when the localStorage restore effect completes, then include
hydrated in the provider value; in WalletButtons.tsx stop relying on the local
mounted flag and change the early-return guard from "if (!mounted ||
!walletAddress)" to "if (!hydrated || !walletAddress)" (keeping handleConnect
and connectButtonClass usage unchanged) so the connect CTA is hidden until
provider hydration finishes and prevents invoking handleConnect during the
restore window.
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 5adf4f89-b9a5-4300-80f7-fa9005fe468f
📒 Files selected for processing (2)
packages/tw-blocks-shared/src/wallet-kit/WalletButtons.tsxpackages/ui/src/sidebar-wallet-button.tsx
| if (!mounted || !walletAddress) { | ||
| return ( | ||
| <button | ||
| type="button" | ||
| onClick={mounted ? handleConnect : undefined} | ||
| className="flex w-full items-center gap-2 rounded-xl px-3 h-12 bg-primary text-primary-foreground hover:bg-brand-primary-hover transition-colors font-medium text-sm cursor-pointer" | ||
| onClick={handleConnect} | ||
| className={connectButtonClass} |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
rg -n -C3 'useState<string \| null>\(null\)|localStorage.getItem|handleConnect|openModal' \
packages/tw-blocks-shared/src/wallet-kit/WalletProvider.tsx \
packages/tw-blocks-shared/src/wallet-kit/useWallet.tsRepository: Trustless-Work/tokenization-private-credit
Length of output: 3254
🏁 Script executed:
cat -n packages/tw-blocks-shared/src/wallet-kit/WalletButtons.tsx | head -70Repository: Trustless-Work/tokenization-private-credit
Length of output: 3097
🏁 Script executed:
cat -n packages/tw-blocks-shared/src/wallet-kit/WalletProvider.tsxRepository: Trustless-Work/tokenization-private-credit
Length of output: 3634
🏁 Script executed:
cat -n packages/tw-blocks-shared/src/wallet-kit/useWalletContext.tsRepository: Trustless-Work/tokenization-private-credit
Length of output: 178
Expose a hydration flag from WalletProvider to prevent showing the connect CTA during the hydration window.
The current code initializes walletAddress as null and restores persisted wallet data in a useEffect. Line 50 treats falsy walletAddress as "disconnected", but the local mounted flag only tracks component mount, not provider hydration. This creates a race condition: already-connected users briefly see the connect button after the component mounts but before the localStorage restore effect completes, and handleConnect() can be invoked during this transient state.
Add a hydrated boolean to the context. Update WalletProvider to track when the localStorage restore effect completes and expose that in the context value. Then change the check in WalletButtons.tsx line 50 to gate on hydration first:
- const { walletAddress, walletName } = useWalletContext();
+ const { walletAddress, walletName, hydrated } = useWalletContext();
- if (!mounted || !walletAddress) {
+ if (!hydrated) {
+ return null;
+ }
+
+ if (!walletAddress) {
return (This removes the need for the local mounted gate in WalletButtons.tsx.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@packages/tw-blocks-shared/src/wallet-kit/WalletButtons.tsx` around lines 50 -
55, Add a hydrated boolean to the WalletProvider context and set it true when
the localStorage restore effect completes, then include hydrated in the provider
value; in WalletButtons.tsx stop relying on the local mounted flag and change
the early-return guard from "if (!mounted || !walletAddress)" to "if (!hydrated
|| !walletAddress)" (keeping handleConnect and connectButtonClass usage
unchanged) so the connect CTA is hidden until provider hydration finishes and
prevents invoking handleConnect during the restore window.
3 participants
Summary
walletAddressis null), the button now correctly shows "Conectar Billetera" instead of an empty popover. Users can disconnect and reconnect without issues.variant="sidebar"toWalletButtonfor use inside sidebars. Usesbg-sidebar-accentand border instead of dark background (bg-primary), so it fits the sidebar layout.variant="sidebar"toWalletButtonfor the investor app sidebar.Files changed
packages/tw-blocks-shared/src/wallet-kit/WalletButtons.tsx— Addedvariantprop, conditional connect button styling, fixed connect/disconnect UI logicpackages/ui/src/sidebar-wallet-button.tsx— Passvariant="sidebar"toWalletButtonTest plan
Summary by CodeRabbit