cienicera / p5.js-mint

The p5.js Editor is a website that integrates p5.js, a popular JavaScript library used for creative coding and visual arts, with the functionality to mint SVG NFTs on Starknet. The project aims to provide a streamlined process for generative artists to create and mint unique digital art pieces as NFTs directly from their p5.js code.
https://editor.p5js.org
GNU Lesser General Public License v2.1
0 stars 8 forks source link

Handle Starknet Wallet Connection #8

Closed caseywescott closed 6 days ago

caseywescott commented 1 month ago

Increasing Access

Feature request details

Users will need to connect their Starknet wallets for minting SVGs as NFTs.

This task involves implementing a user-friendly way to connect wallets, managing wallet authentication, and ensuring a secure and seamless experience for the user.

Tasks:

Choose Wallet Providers:

Identify and support the most popular Starknet wallet providers, such as Argent X and Braavos. Ensure compatibility with these wallets, including handling any unique connection methods or APIs they might use. Integrate Starknet Wallet SDK:

Use the Starknet SDK to integrate wallet connection functionality into the web editor. Ensure that the SDK is properly configured to work with the selected wallet providers and is initialized when the user accesses the minting feature. Design Wallet Connection UI:

Create a clear and accessible UI element for connecting wallets, such as a "Connect Wallet" button prominently displayed in the editor. Add instructional text or tooltips to guide users through the process of connecting their wallets. Design the UI to reflect the connection status, showing whether a wallet is connected, and if so, displaying the user’s wallet address. Handle Wallet Authentication:

Implement a system to check whether a wallet is connected and authenticated before allowing users to mint NFTs. If no wallet is connected, prompt the user to do so before proceeding with the minting process. Manage user authentication states securely, storing necessary session data and ensuring that only authenticated users can interact with the blockchain. Manage Multiple Wallets:

If the user has multiple wallets or wallet accounts, provide a way for them to select which wallet to use for the minting process. Ensure that the selected wallet is used for all subsequent blockchain interactions during that session. Provide Feedback on Connection Status:

Display real-time feedback on the wallet connection status. This could include notifications when a wallet is successfully connected, disconnected, or if there’s an issue with the connection. Use visual indicators, such as color changes or icons, to quickly convey the connection status to the user. Error Handling and User Recovery:

Implement robust error handling for common issues, such as failed connections, unsupported wallets, or network errors. Provide clear error messages with instructions on how the user can resolve the issue (e.g., reconnecting their wallet or trying a different browser). Allow users to easily retry the connection process without needing to refresh the page or restart the editor. Testing Across Wallet Providers:

Test the wallet connection process thoroughly across different supported wallet providers to ensure compatibility and a seamless experience. Ensure that the connection process works smoothly on various devices and browsers, including mobile platforms. Security Considerations:

Ensure that the connection process is secure, preventing unauthorized access or transactions. Implement best practices for handling sensitive user data, such as ensuring that wallet addresses and authentication tokens are securely stored and transmitted. Document the Wallet Connection Process:

Update the project documentation to include instructions for users on how to connect their Starknet wallets. Provide troubleshooting tips and FAQs to help users resolve any issues they might encounter during the connection process. User Feedback and Iteration:

After deployment, gather feedback from users regarding the wallet connection process. Identify any areas of confusion or frustration. Iterate on the design and functionality based on user feedback, improving the ease of use and reliability of the connection process.

Immanuelolivia1 commented 3 weeks ago

@caseywescott i will love to be assigned to this issue

onlydustapp[bot] commented 3 weeks ago

Hi @Immanuelolivia1! Maintainers during the ODHack # 7.0 will be tracking applications via OnlyDust. Therefore, in order for you to have a chance at being assigned to this issue, please apply directly here, or else your application may not be considered.

BernalHQ commented 3 weeks ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Hi, my name is Bernal. I currently work as a software developer in Costa Rica. I’m an enthusiast of Web3 technology, and I would love to contribute to this project.

How I plan on tackling this issue

The first step is to understand the project and how it works. Once I have a good understanding of it, I’ll investigate the most popular Starknet wallet providers, then think about the optimal solution to implement the Starknet handler connection. After that, I’ll implement the solution and run some tests.

BDCoy commented 3 weeks ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Hello, I’m Brayan. With over 3 years of experience in development, I am passionate about contributing to open-source projects and currently expanding my skill set with Rust, Cairo, and Solidity as part of my involvement with Dojo Coding. My recent role as a Full Stack Developer allowed me to specialize in a range of technologies including React, NextJs, Node.js, JavaScript, TypeScript, Docker, among many others. I am eager to apply my extensive experience and newly acquired skills to new challenges and innovative projects.

How I plan on tackling this issue

To implement Starknet wallet connection for minting, start by choosing wallet providers like Argent X and Braavos. Integrate the Starknet SDK for wallet connection functionality. Design a “Connect Wallet” button with clear status indicators. Ensure wallets are connected before allowing minting. Provide an option for users to select which wallet to use. Display real-time connection status. Implement robust error handling and recovery processes. Test the connection across different wallets and devices. Securely manage user data and connections. Update the documentation with connection instructions. Finally, gather user feedback and iterate based on their input.

raizo07 commented 3 weeks ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Hello, I'll like to be assigned to work on this. I'm a fullstack Dev with over 4 years experience and a lot of contributions to Open Source projects.

LukePereyra commented 3 weeks ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

hey team I'm a Frontend Engineer. I already integrate Braavos in one of my React applications.

How I plan on tackling this issue

I will add a component to 'Connect wallet' I will monitoring the connection with a hook or something similar to handle possibles errors.

onlydustapp[bot] commented 3 weeks ago

The maintainer caseywescott has assigned raizo07 to this issue via OnlyDust Platform. Good luck!