Feat: show connected wallet info #22

DimaKush · 2025-01-09T13:41:51Z

Description

Added builder status indicators (batch membership and check-in status) to the wallet connection dropdown.

Changes

Created useBuilderStatus hook to fetch status from BatchRegistry contract
Added status icons to AddressInfoDropdown component
Shows green icons for allowlisted and checked-in addresses

Testing

Connect wallet
Verify batch member icon (group) appears if address is allowlisted
Verify check-in icon appears if address has checked in

Screenshot

Related Issues

Closes #7

This PR includes:

The new useBuilderStatus hook
Modified AddressInfoDropdown component
Proper imports and status indicators

The changes are focused and minimal, adding the requested functionality without unnecessary modifications.

ENS/address: 0x845D62b5405aAAe6b95CF3fbf33968A1E71a9cAD

vercel · 2025-01-09T13:41:58Z

@DimaKush is attempting to deploy a commit to the BuidlGuidl Team on Vercel.

A member of the Team first needs to authorize it.

derrekcoleman · 2025-01-09T18:36:30Z

Thank you for the PR, @DimaKush! I appreciate your detailed description and screenshot, very professional.

Let's take a step back and consider the goal of the issue. The idea is to give the user visual feedback for whether they are (1) on the allowList and (2) checkedIn or not. Your current implementation shows these icons inside of the wallet component, making it impossible (or at least not obvious) to hover these icons and discover what they are trying to say. Maybe moving them next to (but outside of) the wallet component would make this UX more discoverable.

Thinking about state for a moment, there are several possible paths:

No wallet connected (we want user to connect)
Connected, not on allowList (we want to let them know)
Connected, on allowList, not checkedIn (we want them to checkIn)
Connected, on allowList, checkedIn (we want them to feel successful)

How might you represent each of these states in a way that helps the user discover the next step they need to take? Right now you show green icons for true states, but what about "failing gracefully" and guiding the user for false states?

FrankiePower · 2025-01-10T08:36:40Z

@DimaKush i think you did a good job. but i have an idea for something. if you want you can let me do it or make improvement to yours or do it instead

@derrekcoleman if @DimaKush is okay with it, i can do this. or we could just go which whatever he has. this is just the idea i had for it and i thought to share

DimaKush · 2025-01-10T09:22:30Z

@FrankiePower Yep looks good, but on mobile we don't have a lot of space at Header. So I moved this to main page.

FrankiePower · 2025-01-10T12:40:18Z

okay @DimaKush . also if you don't mind i'd like to see a preview (screenshot) of what it looks like

DimaKush · 2025-01-10T14:35:28Z

All-Khwarizmi · 2025-01-10T15:00:35Z

I'm not working on this but reading through your work I thought we could mix it together.

Since I would prefer the current user status information to be displayed in the header, it would be nice to have a more concise unique badge, instead of two, that is responsible for displaying the user status.

Enregistrement.de.l.ecran.2025-01-10.a.15.59.12.mov

What do you think?

FrankiePower · 2025-01-10T17:06:05Z

i think i also like what @All-Khwarizmi is proposing. we can find a way to implement the responsiveness for other screens. but then you'd also have to find a way to display what @DimaKush is trying to display.

derrekcoleman · 2025-01-10T18:36:02Z

I love this conversation! This design "problem" appears all of the time - we want the information to be obvious/available (e.g. in the header of all pages), but need it to be concise/unobtrusive (e.g. make sense on mobile).

Personally, I like the pattern of using attention-grabbing icons (imagine ❗ for error states) with on-hover/on-click tooltips that the user can easily discover to learn more in 1-2 sentences.

DimaKush · 2025-01-12T05:13:46Z

Move Status Component to Header

Moved batch status from homepage to header for better UX. Users can now see their allowlist/check-in status from any page.

Before

Status only visible on homepage
Had to navigate back to check status
Easy to miss important state changes

After

Always visible in header
Quick access to GitHub/batch links
Immediate feedback on status changes
Works well on mobile/desktop

Changes

Moved UserStateInBatch component into Header

Screenshots

vercel · 2025-01-14T01:00:07Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
batch12.buidlguidl.com	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jan 20, 2025 3:10am

derrekcoleman

Looking really nice! Thanks for incorporating all of our feedback, @DimaKush. I think the URLs are a really nice touch 👌

Could you please use git rebase to drop the first commit related to your personal page? Once it's gone from the commit history, you can git push --force to update this PR as if it was never there. This is your chance to practice git-fu 🥷

derrekcoleman

Looking great! I love the way you've factored it.

Now I'm really pushing you to polish the core code and get it production-ready (i.e. easier to maintain later) before we merge 🏋️

packages/nextjs/components/UserStateInBatch.tsx

…main page

…ation

DimaKush · 2025-01-16T10:58:09Z

refactor: improve wallet disconnected state UX and reduce code duplication

Replace null return with disconnected state UI
Add wallet icon and config for disconnected state
Show helpful message when wallet isn't connected
Extract builder state logic into custom hook useBuilderState
Add warning type to notification system
Reduce repetition in state/notification management
Improve component reusability by decoupling state and display logic
Move state configs to single file for better maintainability
Centralize builder state type definitions

derrekcoleman

Thanks for the updates, @DimaKush! It's looking very solid.

Found a little UI bug where there isn't any spacing when wallet connected and is on "wrong network" (not OP Mainnet)

Please remember to respond to and resolve previous review comments as you address them. It makes it much easier for the review (or other people taking a look at the PR) to come back and see what has changed since the last review.

- Add network validation for Optimism mainnet - Show wallet icon with warning style for wrong network - Add helpful notification to switch networks - Use wagmi's useChainId for reliable network detection - Maintain consistent UI with other wallet states - Add wrong network to builder state types and configs

DimaKush · 2025-01-20T03:28:02Z

Thank you for feedback, @derrekcoleman !

Thanks for the updates, @DimaKush! It's looking very solid.

Found a little UI bug where there isn't any spacing when wallet connected and is on "wrong network" (not OP Mainnet)

Please remember to respond to and resolve previous review comments as you address them. It makes it much easier for the review (or other people taking a look at the PR) to come back and see what has changed since the last review.

Summarize of all changes in this PR:

Display User State In Batch Feature

This PR adds comprehensive user state display functionality with improved UX and code organization.

Purpose

This feature helps users understand their current state in the builder system and guides them through the necessary steps to participate.

Files Changed & Their Purpose

🎯 Core Logic

`hooks/useBuilderState.ts`

Purpose: Central source of truth for builder state management
Handles all state checks (wallet, network, allowlist, check-in)
Provides type-safe state configs and notifications
Single responsibility: determine and provide user's current state

🎨 UI Components

`components/builderState/BuilderStateIcon.tsx`

Purpose: Visual indicator for user's current state
Shows different icons based on state (wallet, check mark, group)
Provides consistent visual feedback through colors and animations
Handles hover tooltips for quick status understanding

`components/builderState/BuilderNotification.tsx`

Purpose: Interactive feedback system
Shows actionable notifications with relevant links
Guides users through required steps
Provides clear feedback for state changes

`components/BuilderStateInBatch.tsx`

Purpose: Main container component
Orchestrates state and UI components
Handles user interactions
Maintains consistent layout across states

Technical Details

DRY code with shared styles and configs
Type-safe state management
Proper error handling
Consistent styling

derrekcoleman

I'm proud of this PR, DimaKush - and I hope you are too. Great code organization across and within files and good job covering lots of edge-cases in a consistent way.

derrekcoleman · 2025-01-22T01:04:05Z

packages/nextjs/components/builderState/BuilderStateIcon.tsx

+  const baseStyles = "h-6 w-6 cursor-pointer";
+  const warningStyles = `${baseStyles} text-warning animate-pulse`;
+  const walletStyles = `${warningStyles} mr-2`;


Tailwind purists will say not to do it this way, but I think this kind of "inheritance" pattern is easy to read, understand, and maintain in this case!

derrekcoleman · 2025-01-22T01:04:50Z

packages/nextjs/components/builderState/BuilderStateIcon.tsx

+    notAllowlisted: <UserGroupIcon className={warningStyles} />,
+    notCheckedIn: <CheckCircleIcon className={warningStyles} />,
+    checkedIn: <CheckCircleIcon className={`${baseStyles} text-success`} />,
+    disconnected: <WalletIcon className={walletStyles} />,
+    wrongNetwork: <WalletIcon className={walletStyles} />,


derrekcoleman self-requested a review January 9, 2025 20:30

derrekcoleman assigned DimaKush Jan 9, 2025

vercel bot deployed to Preview January 14, 2025 01:02 View deployment

derrekcoleman requested changes Jan 14, 2025

View reviewed changes

DimaKush force-pushed the feat--Show-connected-wallet-info branch from 06860eb to 905fe1c Compare January 14, 2025 01:54

phipsae mentioned this pull request Jan 14, 2025

Feat(main page): list the members of the batch #27

Closed

derrekcoleman requested changes Jan 15, 2025

View reviewed changes

packages/nextjs/components/UserStateInBatch.tsx Outdated Show resolved Hide resolved

packages/nextjs/components/UserStateInBatch.tsx Outdated Show resolved Hide resolved

DimaKush added 4 commits January 16, 2025 14:20

feat: show-connected-wallet-info

6965ab7

feat(show connected wallet info) Added UserStateInBatch component at …

d7a3aa5

…main page

feat(Show connected wallet info): Move batch status to Header

b00cb02

refactor: improve wallet disconnected state UX and reduce code duplic…

b9e3dcd

…ation

DimaKush force-pushed the feat--Show-connected-wallet-info branch from 905fe1c to b9e3dcd Compare January 16, 2025 10:54

vercel bot deployed to Preview January 16, 2025 19:33 View deployment

derrekcoleman requested changes Jan 16, 2025

View reviewed changes

vercel bot deployed to Preview January 20, 2025 03:10 View deployment

phipsae requested a review from derrekcoleman January 21, 2025 13:22

derrekcoleman approved these changes Jan 22, 2025

View reviewed changes

derrekcoleman merged commit fdd34bd into BuidlGuidl:main Jan 22, 2025
3 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Feat: show connected wallet info #22

Feat: show connected wallet info #22

DimaKush commented Jan 9, 2025

vercel bot commented Jan 9, 2025

derrekcoleman commented Jan 9, 2025

FrankiePower commented Jan 10, 2025

DimaKush commented Jan 10, 2025 •

edited

Loading

FrankiePower commented Jan 10, 2025

DimaKush commented Jan 10, 2025

All-Khwarizmi commented Jan 10, 2025 •

edited

Loading

FrankiePower commented Jan 10, 2025

derrekcoleman commented Jan 10, 2025

DimaKush commented Jan 12, 2025

vercel bot commented Jan 14, 2025 •

edited

Loading

derrekcoleman left a comment

derrekcoleman left a comment

DimaKush commented Jan 16, 2025

derrekcoleman left a comment

DimaKush commented Jan 20, 2025

derrekcoleman left a comment

derrekcoleman Jan 22, 2025

derrekcoleman Jan 22, 2025

Feat: show connected wallet info #22

Feat: show connected wallet info #22

Conversation

DimaKush commented Jan 9, 2025

Description

Changes

Testing

Screenshot

Related Issues

vercel bot commented Jan 9, 2025

derrekcoleman commented Jan 9, 2025

FrankiePower commented Jan 10, 2025

DimaKush commented Jan 10, 2025 • edited Loading

FrankiePower commented Jan 10, 2025

DimaKush commented Jan 10, 2025

All-Khwarizmi commented Jan 10, 2025 • edited Loading

FrankiePower commented Jan 10, 2025

derrekcoleman commented Jan 10, 2025

DimaKush commented Jan 12, 2025

Move Status Component to Header

Before

After

Changes

Screenshots

vercel bot commented Jan 14, 2025 • edited Loading

derrekcoleman left a comment

Choose a reason for hiding this comment

derrekcoleman left a comment

Choose a reason for hiding this comment

DimaKush commented Jan 16, 2025

derrekcoleman left a comment

Choose a reason for hiding this comment

DimaKush commented Jan 20, 2025

Display User State In Batch Feature

Purpose

Files Changed & Their Purpose

🎯 Core Logic

hooks/useBuilderState.ts

🎨 UI Components

components/builderState/BuilderStateIcon.tsx

components/builderState/BuilderNotification.tsx

components/BuilderStateInBatch.tsx

Technical Details

derrekcoleman left a comment

Choose a reason for hiding this comment

derrekcoleman Jan 22, 2025

Choose a reason for hiding this comment

derrekcoleman Jan 22, 2025

Choose a reason for hiding this comment

DimaKush commented Jan 10, 2025 •

edited

Loading

All-Khwarizmi commented Jan 10, 2025 •

edited

Loading

vercel bot commented Jan 14, 2025 •

edited

Loading

`hooks/useBuilderState.ts`

`components/builderState/BuilderStateIcon.tsx`

`components/builderState/BuilderNotification.tsx`

`components/BuilderStateInBatch.tsx`