jediswaplabs / web3-starknet-react

A Starknet React Provider and Connectors inspired by web3-react library
MIT License
4 stars 8 forks source link

add example dapp #9

Open dhruvkelawala opened 2 years ago

dhruvkelawala commented 2 years ago

Need to add an exampl dapp that shows how this library is used with Starknet + React

Subbitoooo commented 9 months ago

Yo man, I literally now See your Issue and I'm sending you an example of the code for a simple Starknet+React decentralized voting application( Following this General code Steps You can Solve Your problem) : Smart Contract (VotingContract.cairo): (#) VotingContract.cairo

var votes : map(eoa : felt) => felt

function init() -> pass

public function vote(candidate : felt) -> (): self.votes[eoa()] += candidate pass

public function getVotes() -> (votes : felt) : votes := self.votes[eoa()] React App Components (src/App.js): import React, { useState } from 'react'; import { StarkWareProvider } from '@starkware/starkware-provider';

function App() { const [candidate, setCandidate] = useState(0); const [voteStatus, setVoteStatus] = useState('');

const handleVote = async (starkProvider) => { try { const contract = starkProvider.getContract(''); const tx = await contract.vote(candidate); await tx.waitReceipt(); setVoteStatus('Vote successful!'); } catch (error) { console.error('Error voting:', error.message); setVoteStatus('Error voting. Check console for details.'); } };

return ( <StarkWareProvider starkEndpoint="" contractAddress="" starkPublicKey="" starkPrivateKey=""

Voting App

{voteStatus}

); }

export default App; Using this Codes, Be safe of : Write the Cairo smart contract (VotingContract.cairo),compile the contract using the StarkWare compiler,deploy the compiled contract to the Starknet testnet,set up a React app with the @starkware/starkware-provider library,create a simple UI to allow users to vote for a candidate, connect the React app to the Starknet testnet by providing necessary StarkNet node endpoint, contract address, and key information and run the React app and interact with the Starknet-powered voting dApp. Finalli replace placeholders like , , , and with your actual contract address, StarkNet node endpoint, and key information. I hope that this guide will be Helpful for you. If you Have any Questions, Don't be scared and text me :). Have A nice day :)