frontend improvement: connect wallet component

[Israelrex9]

Description: Create a “Connect Wallet” button with a dropdown that matches the design in figma

This is the current look on production

This is how it should look like as it is on figma

Figma link; https://www.figma.com/design/6fQvKQWmxnt0XLUSjBjecj/MANCALA-Game-UI?node-id=1372-11495&m=dev

•   The connected wallet icon reveals where the "Braavos" wallet logo is displayed.
    •   Clicking anywhere on the button should open a modal showing options to connect a wallet.
•   The dropdown menu should only appear when the (^) icon is clicked.
•   Wallet disconnection can only be done using the button found within the dropdown.
•   Note: The profile page has not been created yet.

[linear[bot]]

MAN-15 Connect wallet button and dropdown

[od-hunter]

Hi @Israelrex9 , Please can I be assigned this issue? This is my first time contributing to mancala and I will love to be given the opportunity to proof my skill please. I am a Full-Stack Blockchain Developer and I believe I can solve this issue. Please give me the opportunity.

[okhaimie-dev]

@Israelrex9

I believe should use the wallet provider logo for this and not Starknet icon. I like the other part of the suggestion.

[Jemiiah]

@Israelrex9 i would love to work on this issue

[Israelrex9]

Updated the description, everyone.

✨ When applying for a task, please include a brief description of your experience and an estimated time frame for completion.

[Joy-Adah]

Hi @Israelrex9 my name is Joy and I am a frontend developer proficient with React, next js, shadcn, tailwind css. I'm committed to delivering the task by the end of today's business hours.

[od-hunter]

Hi @Israelrex9 , I’m a Full-Stack Blockchain Developer, I possess a robust skill set in both front-end and back-end development, My experience includes html, css, react, JavaScript Cairo ,TypeScript, rust and small knowledge on GO. For this particular issue I’ll be using my frontend skills. I only started contributing during the last od hack so my profile -https://github.com/od-hunter might not look like it right now, that’s why I want you to give me the opportunity. I’d have my PR successfully ready in 2-3 working days once I’m assigned.

[okhaimie-dev]

• The connected wallet icon reveals where the "Braavos" wallet logo is displayed. • Clicking anywhere on the button should open a modal showing options to connect a wallet. • The dropdown menu should only appear when the (^) icon is clicked. • Wallet disconnection can only be done using the button found within the dropdown. • Note: The profile page has not been created yet.

@Israelrex9 can you also include a screenshot of the drop down? This will be helpful for the developer to complete the task

[Oshioke-Salaki]

Hello i'd like to be assigned this

[Ugo-X]

Hi @Israelrex9, @web3technologies ,

I'm Ugo, a fullstack developer with a strong track record in OD hack projects (JavaScript, React, Node.js, Next.js, Three.js). I've been actively involved since Edition 2, contributing to various initiatives, and I'm excited to be part of Edition 5!

My extensive experience using OnlyDust (as reflected in my profile: https://app.onlydust.com/u/Ugo-X)) has given me a deep understanding of the platform. I'm eager to leverage this knowledge and my fullstack skills to tackle new challenges within this edition.

In particular, I'm interested in the dropdown button component development. My experience with similar UI components and familiarity with the Figma design make me confident in delivering a pixel-perfect representation. I estimate the completion timeframe to be 1-2 days, depending on the specific requirements. I will proactively communicate any unforeseen delays.

I'm highly motivated and ready to contribute effectively. I'd happily take on this task if it's still available. Please let me know if you have any questions or require further information about my skills and experience.

Thanks.

[Ayoazeez26]

Hi @Israelrex9 I am a frontend developer with 6 years experience building applications and I would love to work on this issue Here is my onlydust profile: https://app.onlydust.com/u/Ayoazeez26 Here is my github profile: https://github.com/Ayoazeez26 I would take 2 working days to deliver this task unfailingly

[Joshaw-k]

I would like to try this. This sounds interesting

[MariangelaNM]

I'm excited to tackle my first issue here, leveraging substantial experience in frontend development. I intend to approach this challenge progressively and efficiently. 💯

The process I'll follow will be structured to meet the project's specific requirements. Based on the provided details:

I will implement functionality so that clicking anywhere on the button opens a clear modal with options to connect a wallet.

I'll ensure the dropdown menu appears only when clicking the (^) icon, ensuring an intuitive and organized user experience.

For wallet disconnection, I'll enable this action exclusively through the button within the dropdown, adhering to specified guidelines.

It's worth noting that the profile page hasn't been created yet, and I'll factor this into future implementation considerations. I'm eager to contribute my technical skills and deliver a robust, well-integrated solution for this issue.

I'm ready to get started and committed to delivering high-quality results!

[okhaimie-dev]

@od-hunter I just assigned the task to you

[od-hunter]

@okhaimie-dev thank you 🙏🏾 please is there a telegram link so that I can join ?

[okhaimie-dev]

here ser: https://t.me/+0UKU3P3Eh_s2NTRh

feel free to ask questions there

[xpanvictor]

@od-hunter I'll be working with you on this as I'm also working on refactoring. Will say hi on TG. Trying to minimize conflicts. First step, ensure separation of concerns. I also have some inputs on that, we'll discuss that soon

[okhaimie-dev]

@od-hunter are you still working on this, or should I reassign it to someone else

[od-hunter]

Hey @okhaimie-dev , yes I’m still working on it, I’ll send a PR before the end of today🙏🏾

[od-hunter]

@okhaimie-dev please review🙏🏾