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.

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.

aryankharbanda/realestate-dapp-xdc3