search

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

Integrate Smart Contract with Frontend #13

Open caseywescott opened 1 month ago

caseywescott commented 1 month ago

Increasing Access

Integrating the deployed Starknet smart contract with the p5.js Web Editor frontend.

This integration will require connecting the frontend to the blockchain, handling user inputs and outputs, managing wallet connections, and providing real-time feedback on transactions.

Feature request details

Tasks:

Connect Frontend to Starknet Network:

Set up the Starknet JavaScript SDK in the frontend to enable communication with the blockchain.

Configure the SDK to connect to the correct network (e.g., Starknet testnet or mainnet) and ensure that the connection is stable and secure.

Handle network switching if the user is connected to the wrong network, providing prompts or automated switching. Load and Interact with the Smart Contract:

Import the smart contract’s ABI (Application Binary Interface) and use it to create a contract instance in the frontend. Implement functions to interact with the smart contract, such as mint(), tokenURI(), and other relevant methods defined in the contract.

Ensure that the contract instance is correctly configured with the contract address deployed on Starknet. Handle Wallet Connections:

Integrate wallet connection functionality, allowing users to connect their Starknet wallets (e.g., Argent X, Braavos) directly from the web interface.

Manage the wallet connection state, ensuring that the user’s wallet is connected and authenticated before they can interact with the smart contract.

Display the user’s wallet address in the UI and provide options to disconnect or switch wallets as needed. Implement Transaction Workflow:

Develop the workflow for minting an NFT, including collecting SVG data from the user’s sketch, packaging it for the smart contract, and initiating the minting transaction.

Ensure that all necessary data is passed to the contract and that the transaction is correctly signed by the user’s wallet. Implement callbacks or promises to handle the transaction lifecycle, including sending the transaction, waiting for confirmation, and handling any errors.

Xaxxoo commented 1 month ago

Hi can I take on this?

Dprof-in-tech commented 3 weeks ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

As an experienced Full Stack Blockchain Developer, I'm excited to contribute my expertise to Edition 7 of the OnlyDust hackathons. With a strong background in Next.js, TypeScript, JavaScript, React, Node.js, Solidity, and Cairo, I've honed my technical skills across the blockchain development landscape. My journey with OnlyDust began at Edition 2, and I've since made 28 contributions across 11 projects. This extensive experience on the platform has allowed me to develop a keen understanding of delivering high-quality solutions under tight deadlines. I bring a unique blend of technical prowess and user-centric design to every project, whether I'm crafting immersive 3D experiences or developing innovative smart contracts. My track record demonstrates my ability to adapt quickly and contribute effectively to diverse challenges. I'm confident in my capacity to tackle new problems and drive innovation in the blockchain space. As we embark on Edition 7, I'm eager to leverage my hackathon experience and technical skills to push the boundaries of what's possible in blockchain development. With a passion for creating cutting-edge solutions, I'm excited to collaborate with the OnlyDust community and contribute to the advancement of the blockchain ecosystem.

How I plan on tackling this issue

To solve this issue, i would:

Connect Frontend to Starknet Network Set up the Starknet JavaScript SDK in the frontend to enable communication with the blockchain. Configure the SDK to connect to the correct network (e.g., Starknet testnet or mainnet) and ensure that the connection is stable and secure. Handle network switching if the user is connected to the wrong network, providing prompts or automated switching. Load and Interact with the Smart Contract Import the smart contract's ABI (Application Binary Interface) and use it to create a contract instance in the frontend. Implement functions to interact with the smart contract, such as mint(), tokenURI(), and other relevant methods defined in the contract. Ensure that the contract instance is correctly configured with the contract address deployed on Starknet. Handle Wallet Connections Integrate wallet connection functionality, allowing users to connect their Starknet wallets (e.g., Argent X, Braavos) directly from the web interface. Manage the wallet connection state, ensuring that the user's wallet is connected and authenticated before they can interact with the smart contract. Display the user's wallet address in the UI and provide options to disconnect or switch wallets as needed. Implement Transaction Workflow Develop the workflow for minting an NFT, including collecting SVG data from the user's sketch, packaging it for the smart contract, and initiating the minting transaction. Ensure that all necessary data is passed to the contract and that the transaction is correctly signed by the user's wallet. Implement callbacks or promises to handle the transaction lifecycle, including sending the transaction, waiting for confirmation, and handling any errors.

MPSxDev commented 3 weeks ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Lately I have been studying Cairo and Starknet thoroughly, participating in bootcamps and trainings continuously.

How I plan on tackling this issue

To carry out this work, it can be broken down into the following general stages: 1) Research and review the requirements in their entirety. 2) Implement a functional system with an appropriate UX/UI. 3) Include all the elements mentioned. 4) Correct details until we achieve what we want.

Ugo-X commented 3 weeks ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I am a Full Stack blockchain Developer with expertise in Next.js, Nest.js, TypeScript, JavaScript, React, Node.js, Three.js, and Solidity. My journey with OnlyDust hackathons began at Edition 1, and I've since made 47 contributions across 11 projects. With my extensive experience on the OnlyDust platform (profile: https://app.onlydust.com/u/Ugo-X), I've honed my skills in delivering quality solutions under pressure. I bring a unique blend of technical proficiency and user-focused design to every project, whether it's crafting immersive 3D experiences or developing smart contracts. My track record shows I can adapt quickly and contribute effectively to diverse challenges. As we surf through Edition 7, I'm excited to leverage my skills and hackathon experience to push the boundaries of blockchain development. I'm confident in my ability to tackle new challenges and drive innovation in this space.

How I plan on tackling this issue

Understanding the Problem The goal is to integrate a deployed Starknet smart contract with a p5.js Web Editor frontend. This integration involves establishing a connection to the Starknet network, handling user interactions, managing wallet connections, and providing real-time feedback on transactions. Proposed Solution I will:

  1. Set Up the Starknet SDK: • Integrate the Starknet JavaScript SDK into the p5.js frontend to enable communication with the Starknet blockchain. • Configure the SDK to connect to the desired Starknet network (e.g., testnet or mainnet) and ensure a secure and stable connection. • Implement network switching functionality to handle cases where the user is connected to the wrong network.
  2. Load and Interact with the Smart Contract: • Import the ABI of the deployed Starknet smart contract into the frontend. • Create a contract instance using the ABI and the contract address. • Implement functions to interact with the smart contract, such as minting an NFT, retrieving token metadata, and other relevant methods.
  3. Handle Wallet Connections: • Integrate support for popular Starknet wallets like Argent X and Braavos. • Implement a user-friendly wallet connection flow, allowing users to connect their wallets directly from the web interface. • Manage the wallet connection state, ensuring that the user's wallet is authenticated before they can interact with the smart contract. • Display the user's wallet address in the UI and provide options to disconnect or switch wallets.
  4. Implement Transaction Workflow: • Develop a workflow for minting an NFT, including: • Collecting SVG data from the user's sketch. • Packaging the data for the smart contract. • Initiating the minting transaction using the contract instance and the user's wallet. • Implement callbacks or promises to handle the transaction lifecycle, including sending the transaction, waiting for confirmation, and handling potential errors. • Provide real-time feedback to the user throughout the transaction process, updating the UI with transaction status and estimated completion time.
  5. Test and Refine: • Thoroughly test the integration to ensure that all functionalities work as expected. • Identify and address any potential issues or bugs. • Gather feedback from users to improve the user experience and make necessary adjustments. By following these steps, I can effectively integrate the Starknet smart contract with the p5.js Web Editor frontend, providing users with a seamless and intuitive experience for interacting with the blockchain and minting NFTs.
Shoetan commented 3 weeks ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Hi I am Emmanuel a recent basecamp graduate

How I plan on tackling this issue

I implemented a similar thing https://github.com/Shoetan/auction-dApp/blob/main/frontend/src/App.jsx

Here is how I will propose to solve this issue. Set up starknet javascript SDK Get rpc Nodes from alchemy or infura Import contracts ABI from the smart contract CASM file Intergrate wallets connection functionality with starknet kit. Implement Transaction Workflow: Implement the minting workflow, I get SVG data from the user's sketch. The next step would be to initiate the minting process which the user must sign with their wallet.

Psalmuel01 commented 3 weeks ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I am a passionate frontend engineer and blockchain developer with a strong foundation in both Web2 and Web3 technologies. Over the years, I have gained extensive experience in building dynamic and user-friendly web interfaces using JavaScript, React, and Next.js, as well as in writing secure and efficient smart contracts on the Ethereum network using Solidity.

My background in Web3 development includes building several decentralized applications (dApps) that integrate complex smart contracts with responsive frontends. I have also successfully participated in multiple hackathons where I designed and implemented innovative blockchain solutions, such as using zero-knowledge proofs and decentralized storage technologies.

How I plan on tackling this issue

Here's how I would approach the task of integrating the deployed Starknet smart contract with the p5.js Web Editor frontend:

  1. Connect Frontend to Starknet Network:

    • Set Up Starknet JavaScript SDK:

    • I will install and configure the Starknet JavaScript SDK in the frontend to enable communication with the blockchain. This will involve adding the necessary packages, such as @starknet-react/core or @starknet-js/sdk.

    • Network Configuration:

      • I’ll configure the SDK to connect to the appropriate Starknet network (e.g., testnet or mainnet). Ensuring the connection is stable and secure is crucial, so I’ll implement error handling for network issues and retries.

    • Network Switching:

    • I’ll implement logic to detect if the user is connected to the wrong network. If so, the application will either prompt the user to switch networks or handle the switch automatically, depending on the user’s preference.

  2. Load and Interact with the Smart Contract:

    • Import ABI and Create Contract Instance:

    • I’ll import the smart contract’s ABI and use it to create a contract instance within the frontend. This instance will allow the frontend to interact with the deployed smart contract on Starknet.

    • Implement Contract Functions:

    • I will develop functions for interacting with the smart contract, including methods like mint(), tokenURI(), and any other relevant contract functions. These functions will enable users to interact directly with the contract from the web interface.

    • Contract Configuration:

      • I’ll ensure the contract instance is correctly configured with the deployed contract’s address on Starknet, making sure the frontend communicates with the correct smart contract.

3. Handle Wallet Connections:

  1. Implement Transaction Workflow:

    • Develop Minting Workflow:

    • I’ll develop the workflow for minting an NFT, which includes collecting SVG data from the user’s sketch in the p5.js Web Editor, packaging it appropriately, and sending it to the smart contract for minting.

    • Transaction Handling:

    • I will ensure that all necessary data is passed to the contract, and the transaction is correctly signed by the user’s wallet. The workflow will include sending the transaction, monitoring its status, and handling any errors that may occur.

    • Feedback and Error Handling:

      • I’ll implement callbacks or promises to handle the entire transaction lifecycle, providing real-time feedback to the user. This will include confirmation messages upon successful transactions and error messages if something goes wrong.

Next Steps: Once the above tasks are completed, I’ll thoroughly test the integration to ensure everything works as expected. I’ll also optimize the user experience and ensure that all features are robust and user-friendly.

Let me know if you’d like to discuss any specific details further!

Benjtalkshow commented 3 weeks ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

My name is Benjamin, and I will be glad to work on integrating the deployed Starknet smart contract with the p5.js Web Editor frontend. With extensive experience in frontend development and blockchain integration, I will ensure a seamless connection between the smart contract and the web interface. This integration will involve connecting to the blockchain, managing wallet connections, and implementing the transaction workflow to enhance user interaction with the smart contract.

How I plan on tackling this issue

Connect Frontend to Starknet Network

Load and Interact with the Smart Contract

Handle Wallet Connections

Implement Transaction Workflow

jrmncos commented 3 weeks ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I'm a Software Engineer SSR. I have experience using React to interacting with an Smart contract in Cairo.

How I plan on tackling this issue

I will create a component for the integration following the description above. (Thanks for the detailed explanation)

ShantelPeters commented 3 weeks ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I have a strong background in frontend and blockchain development, including working with Starknet and Cairo. I can leverage this experience to seamlessly integrate the Starknet smart contract with the p5.js Web Editor by setting up the Starknet JavaScript SDK, handling wallet connections, and implementing robust transaction workflows. My experience ensures smooth communication between the frontend and blockchain, enhancing user interactions with real-time feedback.

How I plan on tackling this issue

To integrate the Starknet smart contract with the p5.js Web Editor frontend, I would:

  1. Setup SDK: Integrate the Starknet JavaScript SDK to connect to the blockchain, configure network settings, and handle network switching.

  2. Contract Interaction: Import the smart contract’s ABI, create a contract instance, and implement methods for interaction (e.g., mint(), tokenURI()).

  3. Wallet Integration: Implement wallet connection functionality, manage connection states, and display wallet info in the UI.

  4. Transaction Workflow: Develop a minting workflow to collect SVG data, handle transactions, and provide real-time feedback on transaction status.

JoelVR17 commented 3 weeks ago

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. Connect Frontend to Starknet Network:

    • First, I would set up the Starknet JavaScript SDK in the frontend and configure it to connect to the desired Starknet network (testnet or mainnet). I would ensure that the SDK is properly initialized and that the connection is stable and secure.
    • I would then implement network detection and handling logic. If the user is connected to the wrong network, I would provide a prompt or automate the network switch to guide the user to the correct one.

  2. Load and Interact with the Smart Contract:

    • I would import the smart contract’s ABI and create an instance of the contract using the Starknet SDK. After that, I would implement the necessary functions to interact with the contract, such as mint(), tokenURI(), and other relevant methods.
    • I would ensure the contract instance is configured with the correct contract address deployed on Starknet and that it handles all necessary interactions seamlessly.

  3. Handle Wallet Connections:

    • I would integrate wallet connection functionality, allowing users to connect their Starknet wallets (e.g., Argent X, Braavos) directly from the web interface.
    • I would manage the wallet connection state by implementing logic to check if the user’s wallet is connected and authenticated before any interaction with the smart contract is allowed. Additionally, I would display the user’s wallet address in the UI and provide options for disconnecting or switching wallets.

  4. Implement Transaction Workflow:

    • For the minting workflow, I would develop the process for collecting SVG data from the user's sketch and packaging it for the smart contract. The next step would be to initiate the minting transaction, ensuring all required data is correctly passed to the contract and the transaction is signed by the user’s wallet.
    • I would implement callbacks or promises to manage the transaction lifecycle, handling scenarios such as waiting for transaction confirmation, dealing with errors, and providing real-time feedback to the user through the UI.
JorgeOehrens commented 3 weeks ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Here's a revised version of your background tailored for the project:

I have extensive experience in smart contract development, having worked with Solidity for both Ethereum's testnet and mainnet. I’ve also developed front-end applications using Next.js and React with TypeScript, ensuring seamless integration with blockchain technology. Recently, I have begun expanding my expertise to include smart contract development on the Stellar blockchain using Soroban (Rust).

In addition to my blockchain work, I’m proficient with tools like Wagmi for wallet connections and hooks. I’m familiar with implementing features similar , allowing for efficient event tracking and interaction with smart contracts.

For this project, my background in connecting front-end interfaces to blockchain networks is highly relevant. I’m well-equipped to integrate the Starknet smart contract with the p5.js Web Editor frontend. I have a solid understanding of setting up SDKs, handling network connections, and managing wallet integrations. My focus on writing clean, scalable code aligns well with the project's requirements to ensure robust and maintainable integrations.

By leveraging my experience, I can effectively connect the Starknet network to the frontend, handle user interactions, manage wallet connections, and implement a smooth transaction workflow for minting NFTs.

How I plan on tackling this issue

I would start by understanding the Starknet smart contract and the p5.js Web Editor frontend. Then, I’d integrate the Starknet JavaScript SDK into the frontend, ensuring a stable connection to the correct network. After that, I’d load the smart contract, set up wallet connections, and implement functions for interacting with the contract, such as minting NFTs.

Next, I’d develop the transaction workflow, managing user inputs, handling wallet authentication, and providing real-time feedback on transactions. I’d also focus on testing, optimizing the code for scalability, and ensuring a smooth deployment and ongoing maintenance.

moteeullahazmi commented 3 weeks ago

can i try this

onlydustapp[bot] commented 3 weeks ago

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

martinvibes commented 2 weeks ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

i'm a frontend dev and a blockchain developer, will love to take on this issue

How I plan on tackling this issue

Step 1: Connect Frontend to Starknet Network

Set up the Starknet JavaScript SDK in the frontend. Configure the SDK to connect to the correct network (e.g., Starknet testnet or mainnet). Ensure a stable and secure connection. Handle network switching if the user is connected to the wrong network. Step 2: Load and Interact with the Smart Contract

Import the smart contract's ABI (Application Binary Interface). Create a contract instance in the frontend using the ABI. Implement functions to interact with the smart contract (e.g., mint(), tokenURI()). Configure the contract instance with the contract address deployed on Starknet. Step 3: Handle Wallet Connections

Integrate wallet connection functionality (e.g., Argent X, Braavos). Manage the wallet connection state. Ensure the user's wallet is connected and authenticated before interacting with the smart contract. Display the user's wallet address in the UI. Provide options to disconnect or switch wallets as needed. Step 4: Implement Transaction Workflow

Develop the workflow for minting an NFT. Collect SVG data from the user's sketch. Package the data for the smart contract. Initiate the minting transaction. Ensure all necessary data is passed to the contract. Sign the transaction with the user's wallet. Implement callbacks or promises to handle the transaction lifecycle (sending, waiting for confirmation, error handling).