{"id":18357463,"url":"https://github.com/javiergold112/dapp-react-solidity-xdc3","last_synced_at":"2025-04-10T02:29:54.745Z","repository":{"id":225713102,"uuid":"765122899","full_name":"javiergold112/dapp-react-solidity-xdc3","owner":"javiergold112","description":null,"archived":false,"fork":false,"pushed_at":"2024-02-29T10:25:00.000Z","size":1697,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-15T17:49:54.101Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/javiergold112.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2024-02-29T10:23:33.000Z","updated_at":"2024-02-29T12:22:19.000Z","dependencies_parsed_at":"2024-03-03T21:54:13.350Z","dependency_job_id":null,"html_url":"https://github.com/javiergold112/dapp-react-solidity-xdc3","commit_stats":null,"previous_names":["deliteser112/dapp-react-solidity-xdc3","javiergold112/dapp-react-solidity-xdc3"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/javiergold112%2Fdapp-react-solidity-xdc3","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/javiergold112%2Fdapp-react-solidity-xdc3/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/javiergold112%2Fdapp-react-solidity-xdc3/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/javiergold112%2Fdapp-react-solidity-xdc3/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/javiergold112","download_url":"https://codeload.github.com/javiergold112/dapp-react-solidity-xdc3/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248144101,"owners_count":21054868,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-05T22:14:03.282Z","updated_at":"2025-04-10T02:29:54.716Z","avatar_url":"https://github.com/javiergold112.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Dapp Sample Implementation using npm package react-solidity-xdc3\n## Powered by Plugin(A decentralized Oracle)\n\nThis 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.\n\nif any queries / comments, feel free to raise an issue.\n\n# IMPORTANT LINKS:\nXDC Mainnet explorer - https://explorer.xinfin.network/\nApothem FAUCET - https://faucet.apothem.network/\nApothem Blockchain explorer - https://explorer.apothem.network/\nXDCPay Wallet - https://chrome.google.com/webstore/detail/xdcpay/bocpokimicclpaiekenaeelehdjllofo\nNPM package - https://www.npmjs.com/package/react-solidity-web3-v2\nXDC Remix - https://remix.xinfin.network/#optimize=true\u0026runs=200\u0026evmVersion=null\u0026version=soljson-v0.4.26+commit.4563c3fc.js\nDeveloper Forum -https://www.xdc.dev/\nHow to Articles - https://docs.xdc.community/learn/how-to-articles/\nXDC Tools - https://xinfin.org/xdc-chain-network-tools-and-documents\n\n# Table of Contents\n- Pre-requisites\n- How it works\n- How to deploy\n- How to create a component\n- How to steup a function to submit txn to Blockchain\n- How to query data from blockchain\n- How to query events\n\n## pre-requisites\n- nvm version 0.37.2\n- npm version 7.24.0\n- node version 16.10.0\n- do seup XDCPay Chrome Extension in your chrome \n- setup Hardhat (https://www.npmjs.com/package/hardhat)\n\n## How it works?\n- This project uses react-solidity-xdc3 npm package\n- Copy down your contract in contract folder\n- Update deplooyment script under scripts/ folder to refer your contract name\n- Pass necessary constructor parameter if any\n- If you have more than one contract to deploy, then refer those accordingly\n- Pass your PRIVATE_KEY in .env to deploy your contract against specific network ( Apothem or Mainnet)\n- After successfull deployment, copy down the output.json into App folder\n- Go to App folder, creaet your component and call execute function for write, and queryData function for read\n\n## .env should have following parameters\n- PRIVATE_KEY(of your account) to migrate the contract\n\n## How to RUn\n- do git clone \u0026 npm install\n\n```\n npm install\n```\n## How to deploy sample contract\n```\nyarn deploy --network apothem\n```\nthis will deploy the contract in apothem network and contract address will be stored in output.json\n\ncopy down this contract address in app folder, under same output.json\n\n## How to run client application\n- After copying the contract address run react application using following command\n```\nyarn install\nyarn start\n```\nthis will start the application in http://localhost:3000 \n- When you click \"Register\" it writes the data onto blockchain\n- When you click \"Fetch\", it pulls the data from blockchain\n\n## How to Create a new component and implement this react-solidity-xdc3 / react-solidity-web3 at ease\n- Go to app/src/components/\n- Clone \"Sample\" folder and name your components (Let's say - Flights)\n- Rename new component Sample.js -\u003e Flights.js\n- Rename new component Sample.css -\u003e Flights.css\n- Update the app.js to have this Flights component\n```\nimport Flights from './Flights/Flights';\n```\n- Create an instance for flight contract and abi\n```\n    const flight = await createInstance(flightaddress, flightabi, provider);\n```\nflightabi, flightaddress to read from respective path\n- Set the flight instance in ethereum context like below\n```\n    setethereumContext({ provider, sample,flght, account })\n```\n\n- Update the app.js to have Flights component added under EthereumContext like below\n```\n      \u003csection className=\"App-content\"\u003e\n        \u003cEthereumContext.Provider value={ethereumContext}\u003e\n          \u003cSample /\u003e\n          \u003cFlights /\u003e\n        \u003c/EthereumContext.Provider\u003e\n      \u003c/section\u003e\n```\n- Go to Flights.js file and implement this\n- Create functions say - \"registerFlights\", \"fetchFlight\"\n- Update \"sample\" reference to flight \n- executeTxn() function expects four params \"contractInstance,provider,functionName,[params separated by comma, leave if empty]\"\n- queryData() function also expects the same four params \"contractInstance,provider,functionName,[params separated by comma,leave if empty] \"\n\nAll Set, now you should be able to write data onto blockchain \u0026 read.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjaviergold112%2Fdapp-react-solidity-xdc3","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjaviergold112%2Fdapp-react-solidity-xdc3","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjaviergold112%2Fdapp-react-solidity-xdc3/lists"}