Implement mint button in UI and text fields for Series and Artist Metadata

[caseywescott]

This button will allow users to mint their generated SVGs as NFTs on Starknet directly from the p5.js Web Editor interface. The implementation of this button involves designing the user interface, integrating with the Starknet blockchain, and providing real-time feedback on the minting process. This feature should Also include text fields for users to submit both Series and Artist metadata when initiating the minting process. These fields will capture crucial information required for creating and organizing NFT series.

Feature request details

Tasks:

Design the Mint Button UI:

Create a visually appealing and intuitive "Mint" button and text fields that fits seamlessly with the existing design of the p5.js Web Editor.
Consider adding a label or tooltip that explains the button's function to users unfamiliar with blockchain or NFT terminology.
Position the Mint Button:

Decide where to place the "Mint" button within the editor’s UI. It should be easily accessible and clearly associated with the SVG output area.
Ensure the button is not intrusive and does not clutter the interface.
Integrate with Starknet SDK:

Use the Starknet JavaScript SDK to interact with the smart contract responsible for minting the SVGs as NFTs.
Implement the logic to capture the SVG data generated by the user and prepare it for minting when the button is clicked.
Handle User Authentication:

Ensure that users are authenticated and connected to their Starknet wallet before allowing them to mint an NFT.
If the user is not authenticated, prompt them to connect their wallet first. Integrate a wallet connection flow that triggers when the user clicks the "Mint" button if they aren't already connected.
Minting Process Workflow:

When the "Mint" button is clicked:
Collect the SVG data from the user's current p5.js sketch.
Call the appropriate function in the Starknet smart contract to mint the SVG as an NFT.
Pass any necessary parameters to the contract, such as metadata, recipient address, or other custom settings.
Real-Time Feedback and Notifications:

Provide real-time feedback during the minting process. Display a loading spinner or progress bar to indicate that the transaction is being processed.
Notify the user when the transaction is successfully completed, showing the transaction hash and a link to view the NFT on a blockchain explorer.
If the transaction fails, display an error message with possible reasons for the failure and suggestions for resolving the issue.
Transaction Confirmation:

After the minting transaction is sent to Starknet, wait for confirmation. Use the Starknet SDK to monitor the transaction status and provide updates to the user.
Once confirmed, update the UI to reflect that the NFT has been successfully minted.
Post-Minting Actions:

Consider providing users with additional options after minting, such as downloading the SVG, sharing the NFT on social media, or viewing the NFT in their wallet.
Update any relevant UI elements or logs to keep a record of minted NFTs.

[Xaxxoo]

May I work in this ?

[martinvibes]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged
Given my extensive experience in frontend development and user experience design, I am well-equipped to implement this feature. My skills in JavaScript, React, typescript, next.js, and blockchain technologies will ensure that the minting process is smooth, intuitive, and aligned with the high standards of user experience. Additionally, my commitment to clear communication and prompt updates will keep you informed throughout the project, ensuring everything is delivered to your satisfaction.

How I plan on tackling this issue
Steps to Implement the Mint Button and Metadata Fields
Design the Mint Button UI:

Create an attractive "Mint" button that matches the existing design of the p5.js Web Editor.
Add text fields for users to enter Series and Artist metadata.
Consider adding labels or tooltips to explain the button's purpose.
Position the Mint Button:

Choose a location within the editor’s UI where the "Mint" button is visible and associated with the SVG output.
Ensure it doesn't clutter the interface.
Integrate with Starknet SDK:

Use the Starknet JavaScript SDK to connect the button to the smart contract for minting NFTs.
Implement the logic to capture the user-generated SVG and prepare it for minting.
Handle User Authentication:

Ensure users are connected to their Starknet wallet before minting.
Prompt users to connect their wallet if they're not authenticated when they click "Mint."
Implement the Minting Process Workflow:

When "Mint" is clicked:
Collect the SVG data from the user's sketch.
Call the smart contract function to mint the SVG as an NFT.
Pass necessary metadata and parameters to the contract.
Provide Real-Time Feedback and Notifications:

Show a loading spinner or progress bar during the minting process.
Notify the user when the minting is successful, including transaction details.
Display error messages if the minting process fails.
Transaction Confirmation:

Monitor the transaction status using the Starknet SDK and update the user once it's confirmed.
Update the UI to show that the NFT has been minted.
Post-Minting Actions:

Offer additional options, such as downloading the SVG, sharing on social media, or viewing the NFT in their wallet.
Update UI elements or logs to keep track of minted NFTs.

[onlydustapp]

Hi @martinvibes!
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.

[PoulavBhowmick03]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I'm Poulav Bhowmick, a software engineer at Invisible Studios with a robust background in TypeScript, Rust, Solidity Cairo, fullstack development and blockchain technology. My experience includes building robust applications, optimizing functionalities and blockchain integration. I have actively participated in events and open source contributions, enhancing my capability to tackle real-world tech challenges. My projects can be viewed on my GitHub Profile and OnlyDust Profile. Plus I´m active member of Starknet community🇷.

How I plan on tackling this issue

ETA- 2 days
I will work on integrating the "Mint" button for SVGs in the p5.js Web Editor with the following approach:

Design the Mint Button UI:

UI Creation: Design a visually appealing and intuitive "Mint" button, along with text fields for Series and Artist metadata, ensuring it complements the existing p5.js Web Editor interface.
Label/Tooltip: Add a label or tooltip to explain the button’s function, especially for users who may be unfamiliar with blockchain or NFT concepts.
Position the Mint Button:

Placement: Strategically position the "Mint" button within the editor’s UI to be easily accessible and clearly associated with the SVG output area. Ensure it enhances usability without cluttering the interface.
Integrate with Starknet SDK:

SDK Integration: Use the Starknet JavaScript SDK to connect with the smart contract responsible for minting SVGs as NFTs. Implement the necessary logic to capture SVG data and prepare it for minting when the button is clicked.
Handle User Authentication:

Wallet Connection: Ensure that users are authenticated with their Starknet wallet before initiating the minting process. If not connected, prompt users to connect their wallet, integrating this step into the minting workflow.
Minting Process Workflow:

Data Collection: When the "Mint" button is clicked, collect the SVG data from the user’s p5.js sketch and call the relevant function in the Starknet smart contract to mint the SVG as an NFT.
Parameters: Pass required parameters to the contract, including metadata (Series, Artist), recipient address, and any custom settings.
Real-Time Feedback and Notifications:

Feedback Mechanism: Provide real-time feedback during the minting process, such as a loading spinner or progress bar. Notify users of transaction status, including success (with transaction hash and link) or failure (with error message and troubleshooting suggestions).
Transaction Confirmation:

Monitoring: After sending the minting transaction, monitor its status using the Starknet SDK. Update the UI upon confirmation to reflect successful minting.
Post-Minting Actions:

Additional Options: Offer post-minting options such as downloading the SVG, sharing the NFT on social media, or viewing it in the user’s wallet. Update relevant UI elements and logs to track minted NFTs.

[Benjtalkshow]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

My name is Benjamin, and I am thrilled to work on integrating a mint button into the p5.js Web Editor interface. This feature will allow users to mint their generated SVGs as NFTs on Starknet directly from the editor. I will also implement text fields for users to submit Series and Artist metadata, crucial for organizing and creating NFT series. My goal is to ensure a seamless and user-friendly experience while interacting with the Starknet blockchain.

How I plan on tackling this issue

Design the Mint Button UI

• Create UI Elements: I will design a visually appealing and intuitive "Mint" button and text fields that blend seamlessly with the existing p5.js Web Editor design.
• Label or Tooltip: I will add a label or tooltip to explain the button's function to users who may be unfamiliar with blockchain or NFT terminology.

Position the Mint Button

• Placement: I will determine an optimal location for the "Mint" button within the editor’s UI, ensuring it is easily accessible and clearly associated with the SVG output area.
• Interface Clarity: I will ensure the button is not intrusive or cluttered, maintaining a clean and user-friendly interface.

Integrate with Starknet SDK

• Starknet Integration: I will use the Starknet JavaScript SDK to interact with the smart contract responsible for minting the SVGs as NFTs.
• SVG Data Handling: I will implement logic to capture the SVG data generated by the user and prepare it for minting when the button is clicked.

Handle User Authentication

• Wallet Connection: I will ensure users are authenticated and connected to their Starknet wallet before allowing them to mint an NFT.
• Prompt for Connection: If the user is not authenticated, I will prompt them to connect their wallet, integrating a wallet connection flow that triggers when the "Mint" button is clicked.

Minting Process Workflow

• Data Collection: When the "Mint" button is clicked, I will collect the SVG data from the user’s current p5.js sketch.
• Smart Contract Call: I will call the appropriate function in the Starknet smart contract to mint the SVG as an NFT, passing any necessary parameters such as metadata, recipient address, or other settings.

Real-Time Feedback and Notifications

• Feedback: I will provide real-time feedback during the minting process, including a loading spinner or progress bar to indicate transaction processing.
• Notifications: I will notify the user when the transaction is successfully completed, showing the transaction hash and a link to view the NFT on a blockchain explorer. If the transaction fails, I will display an error message with possible reasons and suggestions for resolution.

Transaction Confirmation

• Status Monitoring: After sending the minting transaction to Starknet, I will wait for confirmation and use the Starknet SDK to monitor the transaction status, updating the user accordingly.
• UI Update: Once confirmed, I will update the UI to reflect that the NFT has been successfully minted.

Post-Minting Actions

• Additional Options: I will provide users with additional options after minting, such as downloading the SVG, sharing the NFT on social media, or viewing the NFT in their wallet.
• UI and Logs: I will update relevant UI elements or logs to keep a record of minted NFTs.

[ShantelPeters]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Tell us about your background and how it can be leveraged:

As a frontend developer with experience integrating blockchain technologies, I can design intuitive UIs and connect them seamlessly with Starknet. My skills in UX/UI design and blockchain integration will ensure a smooth minting process and enhance user experience with real-time feedback and robust functionality.

How I plan on tackling this issue

How would you approach the problem:

1. Design the UI: Create a user-friendly "Mint" button and text fields for metadata. Ensure the design integrates seamlessly with the p5.js Web Editor.

2. Position the Button: Place the button in a prominent yet non-intrusive location related to the SVG output area.

3. Integrate with Starknet SDK: Use the Starknet JS SDK to connect the "Mint" button with the smart contract, handling SVG data and minting.

4. Handle Authentication: Prompt users to connect their Starknet wallet if not already connected.

5. Minting Workflow: Implement the minting process with real-time feedback, including progress indicators, success messages, and error handling.

6. Post-Minting Actions: Provide options for users to view, share, or download the minted NFT.

[Psalmuel01]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Given my extensive experience in frontend development, smart contract integration, and user experience design, I am well-equipped to implement this feature. My skills in JavaScript, React, and blockchain technologies will ensure that the minting process is smooth, intuitive, and aligned with the high standards of user experience. Additionally, my commitment to clear communication and prompt updates will keep you informed throughout the project, ensuring everything is delivered to your satisfaction.

This feature will significantly enhance the user experience on the p5.js Web Editor by allowing seamless minting of NFTs directly from the interface, making the platform more interactive and aligned with the growing trend of digital art and blockchain technology.

How I plan on tackling this issue

Here's how I would approach integrating the "Mint" button with the p5.js Web Editor and Starknet:

Design and UI:

Create the UI Elements: Design a "Mint" button and accompanying text fields for "Series" and "Artist" metadata, ensuring they fit well with the existing p5.js Web Editor design.
Position the Button: Place the "Mint" button near the SVG output area for easy access while keeping the interface clean.
Integration with Starknet SDK:

Set Up the SDK: Integrate the Starknet JavaScript SDK into the frontend to enable communication with Starknet.
Prepare Minting Logic: Implement functionality to capture SVG data and metadata, then send it to the Starknet smart contract for minting.
Handle User Authentication:

Wallet Connection: Ensure users are connected to their Starknet wallet before minting. Prompt them to connect if they aren't already.
Implement Minting Process:

Capture Data: Collect SVG data and metadata when the "Mint" button is clicked.
Call Smart Contract: Use the SDK to call the smart contract function that mints the NFT.
Real-Time Feedback:

Loading Indicators: Display a spinner or progress bar during the minting process.
Transaction Status: Provide notifications for successful minting or errors, including transaction details and links to view the NFT.
Post-Minting Actions:

Additional Options: Offer users options to download, share, or view their minted NFT.
By focusing on these steps, I’ll ensure a smooth and effective integration of the "Mint" button, enhancing the user experience while maintaining functionality and clarity.

[martinvibes]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Given my extensive experience in frontend development and user experience design, I am well-equipped to implement this feature. My skills in JavaScript, React, typescript, next.js, and blockchain technologies will ensure that the minting process is smooth, intuitive, and aligned with the high standards of user experience. Additionally, my commitment to clear communication and prompt updates will keep you informed throughout the project, ensuring everything is delivered to your satisfaction.

How I plan on tackling this issue

Steps to Implement the Mint Button and Metadata Fields
Design the Mint Button UI:

Create an attractive "Mint" button that matches the existing design of the p5.js Web Editor.
Add text fields for users to enter Series and Artist metadata.
Consider adding labels or tooltips to explain the button's purpose.
Position the Mint Button:

Choose a location within the editor’s UI where the "Mint" button is visible and associated with the SVG output.
Ensure it doesn't clutter the interface.
Integrate with Starknet SDK:

Use the Starknet JavaScript SDK to connect the button to the smart contract for minting NFTs.
Implement the logic to capture the user-generated SVG and prepare it for minting.
Handle User Authentication:

Ensure users are connected to their Starknet wallet before minting.
Prompt users to connect their wallet if they're not authenticated when they click "Mint."
Implement the Minting Process Workflow:

When "Mint" is clicked:
Collect the SVG data from the user's sketch.
Call the smart contract function to mint the SVG as an NFT.
Pass necessary metadata and parameters to the contract.
Provide Real-Time Feedback and Notifications:

Show a loading spinner or progress bar during the minting process.
Notify the user when the minting is successful, including transaction details.
Display error messages if the minting process fails.
Transaction Confirmation:

Monitor the transaction status using the Starknet SDK and update the user once it's confirmed.
Update the UI to show that the NFT has been minted.
Post-Minting Actions:

Offer additional options, such as downloading the SVG, sharing on social media, or viewing the NFT in their wallet.
Update UI elements or logs to keep track of minted NFTs.

[JoelVR17]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I'm a Full Stack Web Developer with a solid background in front-end and back-end development. So it will be a pleasure to contribute for the first time to this great project. I am a member of the Dojo Coding community.

How I plan on tackling this issue

1. Design the Mint Button UI:

   • I would start by designing a visually appealing and intuitive "Mint" button that aligns with the existing design of the p5.js Web Editor. This includes selecting appropriate colors, fonts, and icons to ensure consistency with the current UI.
   • The button would include text fields for users to submit Series and Artist metadata, which are crucial for organizing NFTs. I would also add a label or tooltip to explain the button’s function, making it accessible even to users unfamiliar with blockchain or NFT terminology.

2. Position the Mint Button:

   • I would carefully select the placement of the "Mint" button within the editor’s UI to ensure it is easily accessible and clearly associated with the SVG output area. The button's position should be prominent enough to be noticeable but not so intrusive that it clutters the interface. The goal is to make it convenient for users to mint their SVGs without disrupting their workflow.

3. Integrate with Starknet SDK:

   • I would integrate the Starknet JavaScript SDK to facilitate interaction with the smart contract responsible for minting the SVGs as NFTs. This involves implementing the logic to capture the SVG data generated by the user and preparing it for minting when the button is clicked.
   • The integration would ensure that all necessary parameters, including metadata, recipient address, and other custom settings, are passed to the smart contract. This step is critical for ensuring that the NFT is minted correctly and includes all relevant information.

4. Handle User Authentication:

   • I would ensure that users are authenticated and connected to their Starknet wallet before allowing them to mint an NFT. If a user is not authenticated, the system would prompt them to connect their wallet, triggering the wallet connection flow when the "Mint" button is clicked.
   • The authentication process would be streamlined to minimize friction, making it easy for users to connect their wallets and proceed with minting.

5. Minting Process Workflow:

   • When the "Mint" button is clicked, the system would collect the SVG data from the user’s current p5.js sketch and call the appropriate function in the Starknet smart contract to mint the SVG as an NFT.
   • The workflow would ensure that the transaction is initiated smoothly, with all necessary data correctly passed to the contract. This includes real-time validation to ensure that all required fields are filled and that the user’s wallet is properly connected.

6. Real-Time Feedback and Notifications:

   • I would implement real-time feedback mechanisms to keep users informed during the minting process. This could include displaying a loading spinner or progress bar to indicate that the transaction is being processed.
   • Upon successful completion of the transaction, a notification would be displayed with the transaction hash and a link to view the NFT on a blockchain explorer. If the transaction fails, an error message would be provided, detailing possible reasons for the failure and suggesting ways to resolve the issue.

7. Transaction Confirmation:

   • After the minting transaction is sent to Starknet, I would use the Starknet SDK to monitor the transaction status and provide updates to the user. Once the transaction is confirmed, the UI would be updated to reflect that the NFT has been successfully minted.
   • This step ensures that users are fully informed about the status of their transaction and can trust that their NFT has been properly created.

8. Post-Minting Actions:

   • After minting, I would consider providing users with additional options, such as downloading the SVG, sharing the NFT on social media, or viewing the NFT in their wallet.
   • I would update any relevant UI elements or logs to keep a record of minted NFTs, ensuring that users can easily access and manage their creations.

[onlydustapp]

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

[Benjtalkshow]

I will start working on this asap

[Benjtalkshow]

@caseywescott does this have to do with the mint UI/UX flow recently designed my @Ugo-X ?

[caseywescott]

Yes @Benjtalkshow - See here for the flow of the mint button:

#20

We need a popup in the style of the current site when the mint button is pressed as described in the above link

Let me know how long this might take. Cheers

[caseywescott]

Still working on this? @Benjtalkshow

[Benjtalkshow]

Still working on this? @Benjtalkshow

Yes sir. I am still working on it. What about the contract for minting the NFT?

[caseywescott]

@Benjtalkshow it's still getting dialed in. Even just a placeholder button in the right spot would be great for now...

[Benjtalkshow]

@Benjtalkshow it's still getting dialed in. Even just a placeholder button in the right spot would be great for now...

Ok I have implemented everything except the mint nft functionality because of the unavailability of the contract. So, should I make a PR with that?

[caseywescott]

Yes, please make a PR! Thank you!