Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/javiergold112/dapp-react-solidity-xdc3


https://github.com/javiergold112/dapp-react-solidity-xdc3

Last synced: 10 days ago
JSON representation

Awesome Lists containing this project

README 

        
# 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

```

      

        

          

          

        

      

```

- 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.