Added connected wallet info

[oguzsabi]

• Added BatchMemberStatuses component for displaying checked-in status and allow list status of the connected wallet.
• Added a simple skeleton loader within BatchMemberStatuses.
• Used BatchMemberStatuses component within RainbowKitCustomConnectButton component.

Description

In order to display the necessary statuses of the connected wallet, I followed the advice on the related issue (#4) and added the status icons to the left of the account balance.

Until a wallet is fully connected (status === 'connected'), status icons are not displayed and a skeleton loader is displayed in their place. Once the wallet is connected and each icon's related information is received, the icons are displayed with their current statuses.

When displaying the icons, green and gray colors are used to describe positive and non-positive states of their related statuses. Also, for each icon a tooltip is used to display what the icon itself and its color mean.

useScaffoldEventHistory function is used to get the checked-in user information and useScaffoldReadContract is used to get the user's presence within the allowList.

The following screenshots display all the possible statuses of these icons:

These icons are also compatible with most mobile screen sizes:

However, for smaller screens the AddressInfoDropdown component's contents wrap themselves:

Related Issues

Closes #4

Address: 0x97d45F88468289ac299B79cF01bbB6f218c46230

[vercel[bot]]

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

Name	Status	Preview	Comments	Updated (UTC)
batch7-buidlguidl-com-nextjs	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jul 23, 2024 4:28pm

[derrekcoleman]

@oguzsabi, a small suggestion: if a user is not on the allowList, they can never be checked in. To make the UI simpler in that specific case, maybe we could hide the checked in icon unless the user is on the allowList?

[oguzsabi]

@oguzsabi, a small suggestion: if a user is not on the allowList, they can never be checked in. To make the UI simpler in that specific case, maybe we could hide the checked in icon unless the user is on the allowList?

Yup, you are definitely right, I made the necessary adjustment to hide the checked in icon if the user is not in the allow list. Also I believe the lint check is failing due to a recent merge, is that correct?

[derrekcoleman]

Also I believe the lint check is failing due to a recent merge, is that correct?

I just pushed a hotfix for that. Want to try git pull or rebase onto main again to solve the ci error before we merge?

[oguzsabi]

Also I believe the lint check is failing due to a recent merge, is that correct?

I just pushed a hotfix for that. Want to try git pull or rebase onto main again to solve the ci error before we merge?

Just rebased, it seems to be good now.