dapp React固体xdc3区块链.zip

# Dapp Sample Implementation using npm package react-solidity-xdc3 ## Powered by Plugin(A decentralized Oracle) This guide will give you a clear direction on how to deploy your smart contract, create react component and wire web3 package to push and pull the data onto/from blockchain. if any queries / comments, feel free to raise an issue. # IMPORTANT LINKS: XDC Mainnet explorer - https://explorer.xinfin.network/ Apothem FAUCET - https://faucet.apothem.network/ Apothem Blockchain explorer - https://explorer.apothem.network/ XDCPay Wallet - https://chrome.google.com/webstore/detail/xdcpay/bocpokimicclpaiekenaeelehdjllofo NPM package - https://www.npmjs.com/package/react-solidity-web3-v2 XDC Remix - https://remix.xinfin.network/#optimize=true&runs=200&evmVersion=null&version=soljson-v0.4.26+commit.4563c3fc.js Developer Forum -https://www.xdc.dev/ How to Articles - https://docs.xdc.community/learn/how-to-articles/ XDC Tools - https://xinfin.org/xdc-chain-network-tools-and-documents # Table of Contents - Pre-requisites - How it works - How to deploy - How to create a component - How to steup a function to submit txn to Blockchain - How to query data from blockchain - How to query events ## pre-requisites - nvm version 0.37.2 - npm version 7.24.0 - node version 16.10.0 - do seup XDCPay Chrome Extension in your chrome - setup Hardhat (https://www.npmjs.com/package/hardhat) ## How it works? - This project uses react-solidity-xdc3 npm package - Copy down your contract in contract folder - Update deplooyment script under scripts/ folder to refer your contract name - Pass necessary constructor parameter if any - If you have more than one contract to deploy, then refer those accordingly - Pass your PRIVATE_KEY in .env to deploy your contract against specific network ( Apothem or Mainnet) - After successfull deployment, copy down the output.json into App folder - Go to App folder, creaet your component and call execute function for write, and queryData function for read ## .env should have following parameters - PRIVATE_KEY(of your account) to migrate the contract ## How to RUn - do git clone & npm install ``` npm install ``` ## How to deploy sample contract ``` yarn deploy --network apothem ``` this will deploy the contract in apothem network and contract address will be stored in output.json copy down this contract address in app folder, under same output.json ## How to run client application - After copying the contract address run react application using following command ``` yarn install yarn start ``` this will start the application in http://localhost:3000 - When you click "Register" it writes the data onto blockchain - When you click "Fetch", it pulls the data from blockchain ## How to Create a new component and implement this react-solidity-xdc3 / react-solidity-web3 at ease - Go to app/src/components/ - Clone "Sample" folder and name your components (Let's say - Flights) - Rename new component Sample.js -> Flights.js - Rename new component Sample.css -> Flights.css - Update the app.js to have this Flights component ``` import Flights from './Flights/Flights'; ``` - Create an instance for flight contract and abi ``` const flight = await createInstance(flightaddress, flightabi, provider); ``` flightabi, flightaddress to read from respective path - Set the flight instance in ethereum context like below ``` setethereumContext({ provider, sample,flght, account }) ``` - Update the app.js to have Flights component added under EthereumContext like below ``` <section className="App-content"> <EthereumContext.Provider value={ethereumContext}> <Sample /> <Flights /> </EthereumContext.Provider> </section> ``` - Go to Flights.js file and implement this - Create functions say - "registerFlights", "fetchFlight" - Update "sample" reference to flight - executeTxn() function expects four params "contractInstance,provider,functionName,[params separated by comma, leave if empty]" - queryData() function also expects the same four params "contractInstance,provider,functionName,[params separated by comma,leave if empty] " All Set, now you should be able to write data onto blockchain & read.