Integrate Wallet Connect

[zintarh]

This issues is part of ODHACK 9.0, apply via the platform

Thanks you for showing interest!

Integrate wallet connection using starknet-react to allow users to seamlessly connect their wallets

Please ensure to provide an ETA.

Looking forward to seeing your great work!

[CollinsC1O]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Hello @zintarh I'm a front-end and a blockchain developer. Can I work on this issue

How I plan on tackling this issue

To integrate Wallet Connect and ensure a pixel-perfect implementation, here's my approach:

• I will carefully review the Figma design to understand the exact layout, styles, and assets needed. I’ll note key visual elements like spacing, font sizes, colors, and responsive adjustments.
• I will install the necessary starknet-react packages to handle wallet connection. I will review the documentation for any specific hooks or methods required to initiate and manage wallet connections.

To implement wallet connect I will:

• Create a wallet connection component using starknet-react hooks like useConnect to allow users to seamlessly connect their wallets.
• Add UI feedback for successful connections or errors to improve user experience.

• I will integrate the wallet connection button onto the landing page, aligning it with the design’s layout. This includes adjusting positioning, button styles, and connection status messages.
• I will replicate the landing page exactly as per the Figma design, maintaining attention to spacing, colors, and responsiveness. I will use CSS or a CSS-in-JS solution to style components, ensuring a pixel-perfect match.
• I will thoroughly test wallet connection across multiple devices and browsers. I will ensure the landing page is responsive and maintains visual consistency at all screen sizes.
• I will push the completed code to the repository and open a pull request, detailing the work done and referencing the issue. I will include screenshots and testing notes to demonstrate successful wallet integration and design replication. ETA: 24hrs

[martinvibes]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

hello @ i'm an experienced frontend developer and a blockchain developer i would love to work on this issue Pleasee kindly assign :)

How I plan on tackling this issue

i will:

1. Set Up the Development Environment:

• Ensure the project is set up and ready for integration.

• Install necessary dependencies for starknet-react.

  2. Install starknet-react:

• Use npm or yarn to install starknet-react for wallet integration: npm install starknet-react

  3. Configure Wallet Connection:

• Import and configure starknet-react in your app: import { StarknetProvider, useConnectors } from '@starknet-react/core';

4. Implement Connect Button:

• Add a Connect Wallet button in the UI that allows users to connect their wallet.
• Use useConnectors() to handle wallet connection events and display connection status: const { connect, connectors, disconnect } = useConnectors();

5. Handle Connection States:

• Implement states for connected, disconnected, and pending connections.

• Update the UI based on the wallet connection state.

  6. Test the Integration:

• Test the wallet connection functionality across different browsers and devices to - - - ensure it works seamlessly.

ETA: <=24 hrs

[blessingbytes]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Hello, i'm a fullstack developer, pls i will love to work on this issue

How I plan on tackling this issue

• I will ensure that the starknet-react library is installed in the project. If it’s not already installed, I will add it using npm or yarn.

-I will create a new component for wallet connection that utilizes starknet-react's hooks.

• I will place the WalletConnect component in the appropriate location within the app’s UI, such as in the header or dashboard.
• I will ensure that any necessary connection events are handled properly, such as updating the UI or state based on the connection status.
• i will Provide User Feedback

[NueloSE]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

am a frontend developer with experience in connecting smart contracts to dapp in cairo and solidity.

How I plan on tackling this issue

Using starknetReact i would be able to implement the above task ETA <= 28hr

[Benjtalkshow]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I am a Full Stack Developer specializing in Next.js, TypeScript, Node.js, Cairo and Rust . With over 31 contributions across projects in the OnlyDust ecosystem, I’ve developed strong proficiency in delivering high-quality solutions and resolving complex issues within tight deadlines. My experience spans frontend, backend, smart contracts, and the optimization and maintenance of scalable codebases.

How I plan on tackling this issue

I will integrate Wallet Connect using the starknet-react library to allow users to connect their wallets seamlessly. This integration aims to enhance the user experience by providing a simple and efficient way for users to access their wallets directly within the application.

The integration process will involve several steps. First, I will set up the necessary dependencies and ensure that the starknet-react library is properly configured in the project. Then, I will implement the Wallet Connect functionality, which will involve creating a user-friendly interface that guides users through the wallet connection process. This interface will provide clear instructions and feedback, making it easy for users to connect their wallets without confusion.

To ensure the integration is robust, I will test the functionality with various wallet providers supported by Wallet Connect. This will help identify any potential compatibility issues or bugs that may arise during the connection process. Additionally, I will implement error handling to provide users with informative messages in case of any connection failures, ensuring that they know how to proceed.

Once the integration is complete, I will conduct thorough testing to verify that the wallet connection works as intended, focusing on the user flow and experience. I will also gather feedback from users to make any necessary adjustments to improve the process further. My ETA is 3days.

[Cyberking99]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

My name is Kingsley Kefas, I am a software engineer. With my 5+ years of experience as a software engineer with blockchain skills and expertise in ReactJs & NextJs, I can easily handle the wallet connection and functionality implementation. I will ensure that users will be able to connect their wallet to ScanGuard using starknet-react.

How I plan on tackling this issue

I will first of all install and configure starknet-react library, then create a WalletConnect component and then implement the connection logic and finally test the overall implementation. The steps I will take in a more detailed description are:

1. Set Up starknet-react: I will install and configure the starknet-react library to manage wallet connections.
2. Create a WalletConnect Component: I will build a reusable component for users to connect or disconnect their wallets and display wallet status.
3. Implement Connection Logic: I will make use of hooks like useStarknet and useAccount to manage connection status and retrieve user account details.
4. Testing: The last step I will take is to test the wallet connectivity with different Starknet wallets and ensure smooth user experience.

My ETA is 3 days (including test)

[0xdevcollins]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Hi, I'm Collins a frontend and blockchain developer, and an active contributor on OnlyDust. You can check out my profile here: https://app.onlydust.com/u/0xdevcollins. This is my first time contributing to this repository, and I’m excited about the opportunity to contribute. Looking forward to collaborating!

How I plan on tackling this issue

I will first set up the starknet-react library in the project, ensuring all necessary dependencies are installed. Then, I’ll create a wallet connection component that will allow users to connect their wallets seamlessly. This component will handle the connection logic and provide feedback to users during the connection process.

Next, I will implement state management to track the connection status and user wallet information. I will also ensure that the UI reflects whether a wallet is connected or not, providing options to connect or disconnect. Finally, I'll conduct thorough testing to ensure the wallet connection works smoothly across different scenarios.

I look forward to delivering great results! Let me know if there are any additional requirements or adjustments you need.

ETA: 24hrs

[Otaiki1]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Hi, I'm a fullstack developer with 3 years experience building DAPPS , i am looking forward to contributing to this project as the project aligns with what i am passionate about

How I plan on tackling this issue

Initialize the library and ensure everything works as described

ETA: 36hrs

[mimisavage]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Hi, I’m Mimi Sav, a frontend and blockchain developer. This is my first time contributing to this repository, and I'm excited about the opportunity to collaborate.

How I plan on tackling this issue

To implement wallet connection using starknet-react, I will start by installing the required dependencies and configuring the project for wallet integration. This will involve designing an intuitive interface for users to select their wallets and managing the connection states effectively.

Next, I will utilize starknet-react to handle the connection logic, ensuring a smooth and seamless wallet connection experience. I’ll conduct thorough testing to ensure compatibility with various wallet providers.

ETA:24hrs

I’m excited to move forward with this!