);
}
export default App;
```
Start the React app:
>Ensure you are in /frontend within your repository (`cd frontend`)
```
npm start
```
You will be redirected to the development server
> In this example, we've already submitted our response, so we will navigate to the [Core Explorer](scan.coredao.org).
Here you can see, the transaction has been submitted successfully.
The dapp webpage will update, and you will notice the feed on the UI has been updated with your your name and message.
## Deploying the Frontend
If you want your DApp to be accessible even when your local server is not running, consider deploying your frontend to a hosting service. Here are some common options:
GitHub Pages: Free hosting for static sites directly from your GitHub repository.
Netlify: A popular choice for deploying static sites with easy CI/CD integration.
Vercel: Another popular choice, especially for React applications.
AWS S3 + CloudFront: For more control over hosting and scaling.
By deploying your frontend to one of these services, users can access your DApp from anywhere without needing your local development server to be running.
## Conclusion
By following these steps, you should have a basic decentralized guestbook application deployed on the Core Test network with a React frontend to interact with it.
You can clone this repository to use as a boilerplate, or an educational resource.
================================================
FILE: 03-Decentralized Guestbook/contracts/Guestbook.sol
================================================
// SPDX-License-Identifier: GPL-3.0
pragma solidity >=0.7.0 <0.9.0;
/// @title Guestbook
contract Guestbook {
struct Entry {
string name;
string message;
}
Entry[] public entries;
// Define an event to log new entries
event EntrySigned(string name, string message);
function signGuestbook(string memory _name, string memory _message) public {
entries.push(Entry(_name, _message));
// Emit the event when a new entry is added
emit EntrySigned(_name, _message);
}
function getEntries() public view returns (Entry[] memory) {
return entries;
}
}
================================================
FILE: 03-Decentralized Guestbook/frontend/.gitignore
================================================
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
# dependencies
/node_modules
/.pnp
.pnp.js
# testing
/coverage
# production
/build
# misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local
npm-debug.log*
yarn-debug.log*
yarn-error.log*
================================================
FILE: 03-Decentralized Guestbook/frontend/README.md
================================================
# Getting Started with Create React App
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
## Available Scripts
In the project directory, you can run:
### `npm start`
Runs the app in the development mode.\
Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
The page will reload when you make changes.\
You may also see any lint errors in the console.
### `npm test`
Launches the test runner in the interactive watch mode.\
See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
### `npm run build`
Builds the app for production to the `build` folder.\
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.\
Your app is ready to be deployed!
See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
### `npm run eject`
**Note: this is a one-way operation. Once you `eject`, you can't go back!**
If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.
You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.
## Learn More
You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
To learn React, check out the [React documentation](https://reactjs.org/).
### Code Splitting
This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
### Analyzing the Bundle Size
This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
### Making a Progressive Web App
This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
### Advanced Configuration
This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
### Deployment
This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
### `npm run build` fails to minify
This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)
================================================
FILE: 03-Decentralized Guestbook/frontend/package.json
================================================
{
"name": "frontend",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "5.17.0",
"@testing-library/react": "13.4.0",
"@testing-library/user-event": "13.5.0",
"ethers": "5.6.9",
"react": "18.3.1",
"react-dom": "18.3.1",
"react-scripts": "5.0.1",
"web-vitals": "2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
================================================
FILE: 03-Decentralized Guestbook/frontend/public/index.html
================================================
React App
================================================
FILE: 03-Decentralized Guestbook/frontend/public/manifest.json
================================================
{
"short_name": "React App",
"name": "Create React App Sample",
"icons": [
{
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
},
{
"src": "logo192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "logo512.png",
"type": "image/png",
"sizes": "512x512"
}
],
"start_url": ".",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}
================================================
FILE: 03-Decentralized Guestbook/frontend/public/robots.txt
================================================
# https://www.robotstxt.org/robotstxt.html
User-agent: *
Disallow:
================================================
FILE: 03-Decentralized Guestbook/frontend/src/App.css
================================================
.App {
text-align: center;
}
.App-logo {
height: 40vmin;
pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
.App-logo {
animation: App-logo-spin infinite 20s linear;
}
}
.App-header {
background-color: #282c34;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
}
.App-link {
color: #61dafb;
}
@keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
================================================
FILE: 03-Decentralized Guestbook/frontend/src/App.js
================================================
import React, { useState, useEffect } from 'react';
import { ethers } from 'ethers'; // Updated import for Web3Provider
import { Contract } from 'ethers';
import GuestbookArtifact from './GuestbookAbi.json';
const contractAddress = '0x2e8EDe4E6A5Fd2d93072dBcF1BBe324Ff1677302';
const GuestbookAbi = GuestbookArtifact.abi;
function App() {
const [contract, setContract] = useState(null);
const [entries, setEntries] = useState([]);
const [name, setName] = useState("");
const [message, setMessage] = useState("");
const [loading, setLoading] = useState(true);
const [error, setError] = useState("");
useEffect(() => {
const init = async () => {
if (window.ethereum) {
try {
console.log("Connecting to MetaMask...");
const provider = new ethers.providers.Web3Provider(window.ethereum); // Updated to Web3Provider
await provider.send("eth_requestAccounts", []);
const network = await provider.getNetwork();
if (network.chainId !== 1114) {
throw new Error("Please switch to the Core Testnet in MetaMask.");
}
const signer = provider.getSigner();
console.log("Signer obtained:", signer);
const tempContract = new Contract(contractAddress, GuestbookAbi, signer);
setContract(tempContract);
console.log("Contract initialized:", tempContract);
const entries = await tempContract.getEntries();
setEntries(entries);
console.log("Entries loaded:", entries);
} catch (error) {
console.error("Error connecting to contract:", error);
setError(error.message);
} finally {
setLoading(false);
}
} else {
console.error("Please install MetaMask!");
setError("Please install MetaMask!");
setLoading(false);
}
};
init();
}, []);
const signGuestbook = async () => {
if (!contract) {
console.error("Contract is not initialized!");
setError("Contract is not initialized!");
return;
}
try {
console.log("Signing guestbook with:", name, message);
const tx = await contract.signGuestbook(name, message, {
gasLimit: 300000,
});
console.log("Transaction sent:", tx);
await tx.wait();
const updatedEntries = await contract.getEntries();
setEntries(updatedEntries);
console.log("Updated entries:", updatedEntries);
} catch (error) {
console.error("Error signing guestbook:", error);
setError("Error signing guestbook. Please try again.");
}
};
return (
);
}
export default App;
================================================
FILE: 03-Decentralized Guestbook/frontend/src/GuestbookAbi.json
================================================
{
"_format": "hh-sol-artifact-1",
"contractName": "Guestbook",
"sourceName": "contracts/Guestbook.sol",
"abi": [
{
"anonymous": false,
"inputs": [
{
"indexed": false,
"internalType": "string",
"name": "name",
"type": "string"
},
{
"indexed": false,
"internalType": "string",
"name": "message",
"type": "string"
}
],
"name": "EntrySigned",
"type": "event"
},
{
"inputs": [
{
"internalType": "uint256",
"name": "",
"type": "uint256"
}
],
"name": "entries",
"outputs": [
{
"internalType": "string",
"name": "name",
"type": "string"
},
{
"internalType": "string",
"name": "message",
"type": "string"
}
],
"stateMutability": "view",
"type": "function"
},
{
"inputs": [],
"name": "getEntries",
"outputs": [
{
"components": [
{
"internalType": "string",
"name": "name",
"type": "string"
},
{
"internalType": "string",
"name": "message",
"type": "string"
}
],
"internalType": "struct Guestbook.Entry[]",
"name": "",
"type": "tuple[]"
}
],
"stateMutability": "view",
"type": "function"
},
{
"inputs": [
{
"internalType": "string",
"name": "_name",
"type": "string"
},
{
"internalType": "string",
"name": "_message",
"type": "string"
}
],
"name": "signGuestbook",
"outputs": [],
"stateMutability": "nonpayable",
"type": "function"
}
],
"bytecode": "0x608060405234801561001057600080fd5b50610741806100206000396000f3fe608060405234801561001057600080fd5b50600436106100415760003560e01c80630ffcb0701461004657806317be85c31461005b578063b30906d414610079575b600080fd5b610059610054366004610553565b61009a565b005b610063610150565b6040516100709190610604565b60405180910390f35b61008c610087366004610689565b6102d3565b6040516100709291906106a2565b604080518082019091528281526020808201839052600080546001810182559080528251805160029092027f290decd9548b62a8d60345a988386fc84ba6bc95484008f6362f93160ef3e56301926100f792849290910190610417565b5060208281015180516101109260018501920190610417565b5050507f0e8857b20aec2f13bb24d8ba5def534d3e73aa79fec2bcfd038c4d55e482deaa82826040516101449291906106a2565b60405180910390a15050565b60606000805480602002602001604051908101604052809291908181526020016000905b828210156102ca57838290600052602060002090600202016040518060400160405290816000820180546101a7906106d0565b80601f01602080910402602001604051908101604052809291908181526020018280546101d3906106d0565b80156102205780601f106101f557610100808354040283529160200191610220565b820191906000526020600020905b81548152906001019060200180831161020357829003601f168201915b50505050508152602001600182018054610239906106d0565b80601f0160208091040260200160405190810160405280929190818152602001828054610265906106d0565b80156102b25780601f10610287576101008083540402835291602001916102b2565b820191906000526020600020905b81548152906001019060200180831161029557829003601f168201915b50505050508152505081526020019060010190610174565b50505050905090565b600081815481106102e357600080fd5b9060005260206000209060020201600091509050806000018054610306906106d0565b80601f0160208091040260200160405190810160405280929190818152602001828054610332906106d0565b801561037f5780601f106103545761010080835404028352916020019161037f565b820191906000526020600020905b81548152906001019060200180831161036257829003601f168201915b505050505090806001018054610394906106d0565b80601f01602080910402602001604051908101604052809291908181526020018280546103c0906106d0565b801561040d5780601f106103e25761010080835404028352916020019161040d565b820191906000526020600020905b8154815290600101906020018083116103f057829003601f168201915b5050505050905082565b828054610423906106d0565b90600052602060002090601f016020900481019282610445576000855561048b565b82601f1061045e57805160ff191683800117855561048b565b8280016001018555821561048b579182015b8281111561048b578251825591602001919060010190610470565b5061049792915061049b565b5090565b5b80821115610497576000815560010161049c565b634e487b7160e01b600052604160045260246000fd5b600082601f8301126104d757600080fd5b813567ffffffffffffffff808211156104f2576104f26104b0565b604051601f8301601f19908116603f0116810190828211818310171561051a5761051a6104b0565b8160405283815286602085880101111561053357600080fd5b836020870160208301376000602085830101528094505050505092915050565b6000806040838503121561056657600080fd5b823567ffffffffffffffff8082111561057e57600080fd5b61058a868387016104c6565b935060208501359150808211156105a057600080fd5b506105ad858286016104c6565b9150509250929050565b6000815180845260005b818110156105dd576020818501810151868301820152016105c1565b818111156105ef576000602083870101525b50601f01601f19169290920160200192915050565b60006020808301818452808551808352604092508286019150828160051b87010184880160005b8381101561067b57888303603f190185528151805187855261064f888601826105b7565b91890151858303868b015291905061066781836105b7565b96890196945050509086019060010161062b565b509098975050505050505050565b60006020828403121561069b57600080fd5b5035919050565b6040815260006106b560408301856105b7565b82810360208401526106c781856105b7565b95945050505050565b600181811c908216806106e457607f821691505b6020821081141561070557634e487b7160e01b600052602260045260246000fd5b5091905056fea2646970667358221220de103d949600ba48036fe9ffaeb124297b28761f8942a55ba1c54f20c27d399964736f6c63430008090033",
"deployedBytecode": "0x608060405234801561001057600080fd5b50600436106100415760003560e01c80630ffcb0701461004657806317be85c31461005b578063b30906d414610079575b600080fd5b610059610054366004610553565b61009a565b005b610063610150565b6040516100709190610604565b60405180910390f35b61008c610087366004610689565b6102d3565b6040516100709291906106a2565b604080518082019091528281526020808201839052600080546001810182559080528251805160029092027f290decd9548b62a8d60345a988386fc84ba6bc95484008f6362f93160ef3e56301926100f792849290910190610417565b5060208281015180516101109260018501920190610417565b5050507f0e8857b20aec2f13bb24d8ba5def534d3e73aa79fec2bcfd038c4d55e482deaa82826040516101449291906106a2565b60405180910390a15050565b60606000805480602002602001604051908101604052809291908181526020016000905b828210156102ca57838290600052602060002090600202016040518060400160405290816000820180546101a7906106d0565b80601f01602080910402602001604051908101604052809291908181526020018280546101d3906106d0565b80156102205780601f106101f557610100808354040283529160200191610220565b820191906000526020600020905b81548152906001019060200180831161020357829003601f168201915b50505050508152602001600182018054610239906106d0565b80601f0160208091040260200160405190810160405280929190818152602001828054610265906106d0565b80156102b25780601f10610287576101008083540402835291602001916102b2565b820191906000526020600020905b81548152906001019060200180831161029557829003601f168201915b50505050508152505081526020019060010190610174565b50505050905090565b600081815481106102e357600080fd5b9060005260206000209060020201600091509050806000018054610306906106d0565b80601f0160208091040260200160405190810160405280929190818152602001828054610332906106d0565b801561037f5780601f106103545761010080835404028352916020019161037f565b820191906000526020600020905b81548152906001019060200180831161036257829003601f168201915b505050505090806001018054610394906106d0565b80601f01602080910402602001604051908101604052809291908181526020018280546103c0906106d0565b801561040d5780601f106103e25761010080835404028352916020019161040d565b820191906000526020600020905b8154815290600101906020018083116103f057829003601f168201915b5050505050905082565b828054610423906106d0565b90600052602060002090601f016020900481019282610445576000855561048b565b82601f1061045e57805160ff191683800117855561048b565b8280016001018555821561048b579182015b8281111561048b578251825591602001919060010190610470565b5061049792915061049b565b5090565b5b80821115610497576000815560010161049c565b634e487b7160e01b600052604160045260246000fd5b600082601f8301126104d757600080fd5b813567ffffffffffffffff808211156104f2576104f26104b0565b604051601f8301601f19908116603f0116810190828211818310171561051a5761051a6104b0565b8160405283815286602085880101111561053357600080fd5b836020870160208301376000602085830101528094505050505092915050565b6000806040838503121561056657600080fd5b823567ffffffffffffffff8082111561057e57600080fd5b61058a868387016104c6565b935060208501359150808211156105a057600080fd5b506105ad858286016104c6565b9150509250929050565b6000815180845260005b818110156105dd576020818501810151868301820152016105c1565b818111156105ef576000602083870101525b50601f01601f19169290920160200192915050565b60006020808301818452808551808352604092508286019150828160051b87010184880160005b8381101561067b57888303603f190185528151805187855261064f888601826105b7565b91890151858303868b015291905061066781836105b7565b96890196945050509086019060010161062b565b509098975050505050505050565b60006020828403121561069b57600080fd5b5035919050565b6040815260006106b560408301856105b7565b82810360208401526106c781856105b7565b95945050505050565b600181811c908216806106e457607f821691505b6020821081141561070557634e487b7160e01b600052602260045260246000fd5b5091905056fea2646970667358221220de103d949600ba48036fe9ffaeb124297b28761f8942a55ba1c54f20c27d399964736f6c63430008090033",
"linkReferences": {},
"deployedLinkReferences": {}
}
================================================
FILE: 03-Decentralized Guestbook/frontend/src/index.css
================================================
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace;
}
================================================
FILE: 03-Decentralized Guestbook/frontend/src/index.js
================================================
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
================================================
FILE: 03-Decentralized Guestbook/frontend/src/reportWebVitals.js
================================================
const reportWebVitals = onPerfEntry => {
if (onPerfEntry && onPerfEntry instanceof Function) {
import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
getCLS(onPerfEntry);
getFID(onPerfEntry);
getFCP(onPerfEntry);
getLCP(onPerfEntry);
getTTFB(onPerfEntry);
});
}
};
export default reportWebVitals;
================================================
FILE: 03-Decentralized Guestbook/frontend/src/setupTests.js
================================================
// jest-dom adds custom jest matchers for asserting on DOM nodes.
// allows you to do things like:
// expect(element).toHaveTextContent(/react/i)
// learn more: https://github.com/testing-library/jest-dom
import '@testing-library/jest-dom';
================================================
FILE: 03-Decentralized Guestbook/hardhat.config.js
================================================
require("@nomicfoundation/hardhat-toolbox");
require("dotenv").config();
/** @type import('hardhat/config').HardhatUserConfig */
const PRIVATE_KEY = process.env.PRIVATE_KEY;
module.exports = {
solidity: "0.8.28",
networks: {
localhost: {
url: "http://127.0.0.1:8545/",
// accounts: Thanks hardhat!
chainId: 31337,
allowUnlimitedContractSize: true,
},
core: {
url: 'https://rpc.test2.btcs.network',
accounts: [PRIVATE_KEY],
chainId: 1114,
},
},
};
================================================
FILE: 03-Decentralized Guestbook/package.json
================================================
{
"name": "guestbook-dapp",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"description": "",
"devDependencies": {
"@nomicfoundation/hardhat-chai-matchers": "^2.0.8",
"@nomicfoundation/hardhat-ethers": "^3.0.8",
"@nomicfoundation/hardhat-ignition": "^0.15.11",
"@nomicfoundation/hardhat-ignition-ethers": "^0.15.11",
"@nomicfoundation/hardhat-network-helpers": "^1.0.12",
"@nomicfoundation/hardhat-toolbox": "^5.0.0",
"@nomicfoundation/hardhat-verify": "^2.0.14",
"@nomiclabs/hardhat-ethers": "^2.2.3",
"@nomiclabs/hardhat-waffle": "^2.0.6",
"@typechain/ethers-v6": "^0.5.1",
"@typechain/hardhat": "^9.1.0",
"chai": "^4.5.0",
"ethers": "^6.14.3",
"hardhat": "^2.22.8",
"hardhat-gas-reporter": "^1.0.10",
"solidity-coverage": "^0.8.16",
"typechain": "^8.3.2"
},
"dependencies": {
"dotenv": "^16.5.0",
"react": "^18.3.1",
"react-dom": "^18.3.1"
}
}
================================================
FILE: 03-Decentralized Guestbook/scripts/deploy.js
================================================
const hre = require("hardhat");
async function main() {
const Guestbook = await hre.ethers.getContractFactory("Guestbook");
const guestbook = await Guestbook.deploy();
console.log("Guestbook contract deployed to:", guestbook.target);
}
main().catch((error) => {
console.error(error);
process.exitCode = 1;
});
================================================
FILE: 04-Pyth Pull Oracles/.gitignore
================================================
node_modules
.env
# Hardhat files
/cache
/artifacts
# TypeChain files
/typechain
/typechain-types
# solidity-coverage files
/coverage
/coverage.json
# Hardhat Ignition default folder for deployments against a local node
ignition/deployments/chain-31337
================================================
FILE: 04-Pyth Pull Oracles/README.md
================================================
# Core Pyth Feed Boilerplate
Pyth Feed Boilerplate is a React-based dApp for fetching and displaying real-time price feeds from the Pyth Network. This boilerplate provides a quickstart template for developers to quickly create similar applications on the Core blockchain.
Purpose: The quickstart guide helps developers rapidly set up a functional dApp with essential setup instructions and code snippets. For detailed instructions and advanced configurations, refer to the full-length guide further down.
## Quickstart
Project Setup: Clone the repository and install dependencies.
Configuration: Set up the Pyth price feed smart contract and integrate it with the React app.
Running the Application: Start the app and view real-time price feeds.
### Prerequisites
Before setting up the project, ensure you have the following installed:
- [Node.js and npm](https://nodejs.org/en/download/)
- [MetaMask](https://metamask.io/download.html) browser extension
- [Git](https://git-scm.com/downloads)
### Setup
### 1. Clone the Repository
Clone the repository to your local machine using GitHub Desktop or Git:
```zsh
gh repo clone Camnaz/Core-Pyth-Feed-Boiler
cd Core-Pyth-Feed-Boiler
```
### 2. Install Dependencies
Navigate to the project directory and install the necessary dependencies:
```
npm install
```
Navigate to the frontend directory and install the dependencies:
```zsh
cd frontend
npm install
cd ..
```
### 3. Configure the Project
- Add **Private Key**: Create a '**secret.json**' file in the project root and add your private key.
```json
{
"PrivateKey": "your-private-key-here"
}
```
### 3.1 Compile Hardhat
```
npx hardhat compile
```
>Once deployed, update Smart Contract Address: Open src/App.js and replace `0xYourContractAddress` with your deployed contract address on the Core blockchain.
### 4. Install Babel Plugin
Install the Babel plugin to avoid dependency issues:
```zsh
npm install --save-dev @babel/plugin-proposal-private-property-in-object
```
### 4.1 Navigate to frontend of project
```
cd frontend
```
### 5. Run the Application
Start the React application:
```zsh
npm start
```
### 6. Access the Application
Open your browser and navigate to if it has not already:
```arduino
http://localhost:3000
```
### 7. Conclusion
Congratulations, you now have a Pyth data feed for CORE/USD, and are able to view the Core price live which is updated every few seconds.
You are able to use this boilerplate to imbed Pyth price feeds for Core into different Dapps, or as a learning resource.
### Troubleshooting
Error: One of your dependencies, babel-preset-react-app, is importing the "@babel/plugin-proposal-private-property-in-object" package without declaring it in its dependencies.
Solution: Install the Babel plugin manually:
```zsh
npm install --save-dev @babel/plugin-proposal-private-property-in-object
```
**Error**: MetaMask - RPC Error: Request of type 'wallet_requestPermissions' already pending.
**Solution**: Open MetaMask and approve or reject the pending permission request.
**Error**: no matching function (argument="name", value="updatePrice", code=INVALID_ARGUMENT, version=abi/5.7.0)
**Solution**: Ensure the ABI file is up-to-date and contains the correct function names.
================================================
FILE: 04-Pyth Pull Oracles/contracts/PythFeedBoilerplate.sol
================================================
// SPDX-License-Identifier: MIT
pragma solidity ^0.8.9;
import "@pythnetwork/pyth-sdk-solidity/IPyth.sol";
import "@pythnetwork/pyth-sdk-solidity/PythStructs.sol";
contract PythFeedBoilerplate {
IPyth public pyth;
constructor(address pythContract) {
pyth = IPyth(pythContract);
}
function updatePrice(bytes[] calldata priceUpdate) public payable {
uint fee = pyth.getUpdateFee(priceUpdate);
pyth.updatePriceFeeds{ value: fee }(priceUpdate);
}
function getPrice(bytes32 priceFeedId) public view returns (PythStructs.Price memory) {
return pyth.getPrice(priceFeedId);
}
function getPriceWithoutUpdate(bytes32 priceFeedId) public view returns (int64, int32) {
PythStructs.Price memory price = pyth.getPrice(priceFeedId);
return (price.price, price.expo);
}
}
================================================
FILE: 04-Pyth Pull Oracles/frontend/.gitignore
================================================
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
# dependencies
/node_modules
/.pnp
.pnp.js
# testing
/coverage
# production
/build
# misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local
npm-debug.log*
yarn-debug.log*
yarn-error.log*
================================================
FILE: 04-Pyth Pull Oracles/frontend/README.md
================================================
# Getting Started with Create React App
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
## Available Scripts
In the project directory, you can run:
### `npm start`
Runs the app in the development mode.\
Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
The page will reload when you make changes.\
You may also see any lint errors in the console.
### `npm test`
Launches the test runner in the interactive watch mode.\
See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
### `npm run build`
Builds the app for production to the `build` folder.\
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.\
Your app is ready to be deployed!
See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
### `npm run eject`
**Note: this is a one-way operation. Once you `eject`, you can't go back!**
If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.
You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.
## Learn More
You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
To learn React, check out the [React documentation](https://reactjs.org/).
### Code Splitting
This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
### Analyzing the Bundle Size
This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
### Making a Progressive Web App
This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
### Advanced Configuration
This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
### Deployment
This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
### `npm run build` fails to minify
This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)
================================================
FILE: 04-Pyth Pull Oracles/frontend/package.json
================================================
{
"name": "frontend",
"version": "0.1.0",
"private": true,
"dependencies": {
"@pythnetwork/pyth-sdk-solidity": "^4.2.0",
"@testing-library/jest-dom": "5.17.0",
"@testing-library/react": "13.4.0",
"@testing-library/user-event": "13.5.0",
"ethers": "^6.15.0",
"react": "18.3.1",
"react-dom": "18.3.1",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
================================================
FILE: 04-Pyth Pull Oracles/frontend/public/index.html
================================================
React App
================================================
FILE: 04-Pyth Pull Oracles/frontend/public/manifest.json
================================================
{
"short_name": "React App",
"name": "Create React App Sample",
"icons": [
{
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
},
{
"src": "logo192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "logo512.png",
"type": "image/png",
"sizes": "512x512"
}
],
"start_url": ".",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}
================================================
FILE: 04-Pyth Pull Oracles/frontend/public/robots.txt
================================================
# https://www.robotstxt.org/robotstxt.html
User-agent: *
Disallow:
================================================
FILE: 04-Pyth Pull Oracles/frontend/src/App.css
================================================
@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@400;600&display=swap');
body {
background-color: #121212;
color: #292D32;
font-family: 'Lexend', sans-serif;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.App {
text-align: center;
}
.App-header {
background-color: #292D32;
padding: 20px;
border-radius: 10px;
margin-bottom: 20px;
color: #FBFCFC;
}
.App-title {
margin: 0;
text-align: left;
color: #FFFFFF;
}
.price-container {
background-color: #292D32;
padding: 20px;
border-radius: 10px;
color: #FBFCFC;
display: inline-block;
margin-top: 20px;
}
.price {
font-size: 1.5em;
margin-top: 10px;
color: #FFFFFF;
}
================================================
FILE: 04-Pyth Pull Oracles/frontend/src/App.js
================================================
import React, { useEffect, useState } from 'react';
import { ethers } from 'ethers';
import './App.css';
// Import Pyth ABI - we'll use require for JSON files
const PythAbi = require('@pythnetwork/pyth-sdk-solidity/abis/IPyth.json');
// Core Mainnet
const contractAddress = '0xA2aa501b19aff244D90cc15a4Cf739D2725B5729';
const provider = new ethers.JsonRpcProvider('https://rpc.coredao.org');
const contract = new ethers.Contract(contractAddress, PythAbi, provider);
const priceId = '0x9b4503710cc8c53f75c30e6e4fda1a7064680ef2e0ee97acd2e3a7c37b3c830c'; // CORE/USD
const age = '60';
function App() {
const [price, setPrice] = useState(null);
useEffect(() => {
let intervalId;
const fetchPrice = async () => {
try {
console.log('Fetching price...');
// Use your new code to fetch price data
const [price, conf, expo, timestamp] = await contract.getPriceNoOlderThan(priceId, age);
console.log('Raw price data:', { price, conf, expo, timestamp });
// Convert BigInt to Number for calculation
const expoNumber = Number(expo);
console.log('Exponent:', expoNumber);
// Adjust the price based on the exponent
// The price comes with a specific decimal precision, we need to adjust it
const adjustedPrice = parseFloat(ethers.formatUnits(price, -expoNumber));
setPrice(adjustedPrice.toFixed(5)); // Format to 5 decimal places
console.log('Price fetched:', adjustedPrice);
} catch (error) {
console.error('Error fetching price:', error);
}
};
// Fetch the price immediately when the component mounts
fetchPrice();
// Set up an interval to fetch the price every 2 minutes (120000 milliseconds)
intervalId = setInterval(fetchPrice, 120000);
// Clear the interval when the component unmounts
return () => clearInterval(intervalId);
}, []);
return (
);
}
export default App;
================================================
FILE: 04-Pyth Pull Oracles/frontend/src/App.test.js
================================================
import { render, screen } from '@testing-library/react';
import App from './App';
test('renders learn react link', () => {
render();
const linkElement = screen.getByText(/learn react/i);
expect(linkElement).toBeInTheDocument();
});
================================================
FILE: 04-Pyth Pull Oracles/frontend/src/PythFeedBoilerplateAbi.json
================================================
{
"_format": "hh-sol-artifact-1",
"contractName": "PythFeedBoilerplate",
"sourceName": "contracts/PythFeedBoilerplate.sol",
"abi": [
{
"inputs": [
{
"internalType": "address",
"name": "pythContract",
"type": "address"
}
],
"stateMutability": "nonpayable",
"type": "constructor"
},
{
"inputs": [
{
"internalType": "bytes32",
"name": "priceFeedId",
"type": "bytes32"
}
],
"name": "getPrice",
"outputs": [
{
"components": [
{
"internalType": "int64",
"name": "price",
"type": "int64"
},
{
"internalType": "uint64",
"name": "conf",
"type": "uint64"
},
{
"internalType": "int32",
"name": "expo",
"type": "int32"
},
{
"internalType": "uint256",
"name": "publishTime",
"type": "uint256"
}
],
"internalType": "struct PythStructs.Price",
"name": "",
"type": "tuple"
}
],
"stateMutability": "view",
"type": "function"
},
{
"inputs": [
{
"internalType": "bytes32",
"name": "priceFeedId",
"type": "bytes32"
}
],
"name": "getPriceWithoutUpdate",
"outputs": [
{
"internalType": "int64",
"name": "",
"type": "int64"
},
{
"internalType": "int32",
"name": "",
"type": "int32"
}
],
"stateMutability": "view",
"type": "function"
},
{
"inputs": [],
"name": "pyth",
"outputs": [
{
"internalType": "contract IPyth",
"name": "",
"type": "address"
}
],
"stateMutability": "view",
"type": "function"
},
{
"inputs": [
{
"internalType": "bytes[]",
"name": "priceUpdate",
"type": "bytes[]"
}
],
"name": "updatePrice",
"outputs": [],
"stateMutability": "payable",
"type": "function"
}
],
"bytecode": "0x608060405234801561001057600080fd5b5060405161064e38038061064e83398101604081905261002f91610054565b600080546001600160a01b0319166001600160a01b0392909216919091179055610084565b60006020828403121561006657600080fd5b81516001600160a01b038116811461007d57600080fd5b9392505050565b6105bb806100936000396000f3fe60806040526004361061003f5760003560e01c8063083a816b146100445780632592c0bf1461008657806331d98b3f1461009b578063f98d06f0146100fe575b600080fd5b34801561005057600080fd5b5061006461005f36600461035b565b610136565b6040805160079390930b835260039190910b6020830152015b60405180910390f35b610099610094366004610374565b6101ca565b005b3480156100a757600080fd5b506100bb6100b636600461035b565b6102b9565b60405161007d9190815160070b815260208083015167ffffffffffffffff169082015260408083015160030b908201526060918201519181019190915260800190565b34801561010a57600080fd5b5060005461011e906001600160a01b031681565b6040516001600160a01b03909116815260200161007d565b600080546040516331d98b3f60e01b815260048101849052829182916001600160a01b03909116906331d98b3f9060240160806040518083038186803b15801561017f57600080fd5b505afa158015610193573d6000803e3d6000fd5b505050506040513d601f19601f820116820180604052508101906101b79190610418565b8051604090910151909590945092505050565b6000805460405163d47eed4560e01b81526001600160a01b039091169063d47eed45906101fd90869086906004016104d1565b60206040518083038186803b15801561021557600080fd5b505afa158015610229573d6000803e3d6000fd5b505050506040513d601f19601f8201168201806040525081019061024d919061056c565b600054604051631df3cbc560e31b81529192506001600160a01b03169063ef9e5e2890839061028290879087906004016104d1565b6000604051808303818588803b15801561029b57600080fd5b505af11580156102af573d6000803e3d6000fd5b5050505050505050565b60408051608081018252600080825260208201819052818301819052606082018190525491516331d98b3f60e01b81526004810184905290916001600160a01b0316906331d98b3f9060240160806040518083038186803b15801561031d57600080fd5b505afa158015610331573d6000803e3d6000fd5b505050506040513d601f19601f820116820180604052508101906103559190610418565b92915050565b60006020828403121561036d57600080fd5b5035919050565b6000806020838503121561038757600080fd5b823567ffffffffffffffff8082111561039f57600080fd5b818501915085601f8301126103b357600080fd5b8135818111156103c257600080fd5b8660208260051b85010111156103d757600080fd5b60209290920196919550909350505050565b805167ffffffffffffffff8116811461040157600080fd5b919050565b8051600381900b811461040157600080fd5b60006080828403121561042a57600080fd5b6040516080810181811067ffffffffffffffff8211171561045b57634e487b7160e01b600052604160045260246000fd5b6040528251600781900b811461047057600080fd5b815261047e602084016103e9565b602082015261048f60408401610406565b6040820152606083015160608201528091505092915050565b81835281816020850137506000828201602090810191909152601f909101601f19169091010190565b60208082528181018390526000906040600585901b8401810190840186845b8781101561055f57868403603f190183528135368a9003601e1901811261051657600080fd5b8901803567ffffffffffffffff81111561052f57600080fd5b8036038b131561053e57600080fd5b61054b86828985016104a8565b9550505091840191908401906001016104f0565b5091979650505050505050565b60006020828403121561057e57600080fd5b505191905056fea26469706673582212205d7a5e1856ba7a5ac5f0471280bd41bd8f274c6e9ad3dfe64a8057b660635c4564736f6c63430008090033",
"deployedBytecode": "0x60806040526004361061003f5760003560e01c8063083a816b146100445780632592c0bf1461008657806331d98b3f1461009b578063f98d06f0146100fe575b600080fd5b34801561005057600080fd5b5061006461005f36600461035b565b610136565b6040805160079390930b835260039190910b6020830152015b60405180910390f35b610099610094366004610374565b6101ca565b005b3480156100a757600080fd5b506100bb6100b636600461035b565b6102b9565b60405161007d9190815160070b815260208083015167ffffffffffffffff169082015260408083015160030b908201526060918201519181019190915260800190565b34801561010a57600080fd5b5060005461011e906001600160a01b031681565b6040516001600160a01b03909116815260200161007d565b600080546040516331d98b3f60e01b815260048101849052829182916001600160a01b03909116906331d98b3f9060240160806040518083038186803b15801561017f57600080fd5b505afa158015610193573d6000803e3d6000fd5b505050506040513d601f19601f820116820180604052508101906101b79190610418565b8051604090910151909590945092505050565b6000805460405163d47eed4560e01b81526001600160a01b039091169063d47eed45906101fd90869086906004016104d1565b60206040518083038186803b15801561021557600080fd5b505afa158015610229573d6000803e3d6000fd5b505050506040513d601f19601f8201168201806040525081019061024d919061056c565b600054604051631df3cbc560e31b81529192506001600160a01b03169063ef9e5e2890839061028290879087906004016104d1565b6000604051808303818588803b15801561029b57600080fd5b505af11580156102af573d6000803e3d6000fd5b5050505050505050565b60408051608081018252600080825260208201819052818301819052606082018190525491516331d98b3f60e01b81526004810184905290916001600160a01b0316906331d98b3f9060240160806040518083038186803b15801561031d57600080fd5b505afa158015610331573d6000803e3d6000fd5b505050506040513d601f19601f820116820180604052508101906103559190610418565b92915050565b60006020828403121561036d57600080fd5b5035919050565b6000806020838503121561038757600080fd5b823567ffffffffffffffff8082111561039f57600080fd5b818501915085601f8301126103b357600080fd5b8135818111156103c257600080fd5b8660208260051b85010111156103d757600080fd5b60209290920196919550909350505050565b805167ffffffffffffffff8116811461040157600080fd5b919050565b8051600381900b811461040157600080fd5b60006080828403121561042a57600080fd5b6040516080810181811067ffffffffffffffff8211171561045b57634e487b7160e01b600052604160045260246000fd5b6040528251600781900b811461047057600080fd5b815261047e602084016103e9565b602082015261048f60408401610406565b6040820152606083015160608201528091505092915050565b81835281816020850137506000828201602090810191909152601f909101601f19169091010190565b60208082528181018390526000906040600585901b8401810190840186845b8781101561055f57868403603f190183528135368a9003601e1901811261051657600080fd5b8901803567ffffffffffffffff81111561052f57600080fd5b8036038b131561053e57600080fd5b61054b86828985016104a8565b9550505091840191908401906001016104f0565b5091979650505050505050565b60006020828403121561057e57600080fd5b505191905056fea26469706673582212205d7a5e1856ba7a5ac5f0471280bd41bd8f274c6e9ad3dfe64a8057b660635c4564736f6c63430008090033",
"linkReferences": {},
"deployedLinkReferences": {}
}
================================================
FILE: 04-Pyth Pull Oracles/frontend/src/index.css
================================================
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace;
}
================================================
FILE: 04-Pyth Pull Oracles/frontend/src/index.js
================================================
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
================================================
FILE: 04-Pyth Pull Oracles/frontend/src/reportWebVitals.js
================================================
const reportWebVitals = onPerfEntry => {
if (onPerfEntry && onPerfEntry instanceof Function) {
import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
getCLS(onPerfEntry);
getFID(onPerfEntry);
getFCP(onPerfEntry);
getLCP(onPerfEntry);
getTTFB(onPerfEntry);
});
}
};
export default reportWebVitals;
================================================
FILE: 04-Pyth Pull Oracles/frontend/src/setupTests.js
================================================
// jest-dom adds custom jest matchers for asserting on DOM nodes.
// allows you to do things like:
// expect(element).toHaveTextContent(/react/i)
// learn more: https://github.com/testing-library/jest-dom
import '@testing-library/jest-dom';
================================================
FILE: 04-Pyth Pull Oracles/hardhat.config.js
================================================
require('@nomiclabs/hardhat-ethers');
require("@nomiclabs/hardhat-waffle");
require("dotenv").config();
/** @type import('hardhat/config').HardhatUserConfig */
const PRIVATE_KEY = process.env.PRIVATE_KEY;
module.exports = {
defaultNetwork: 'hardhat',
networks: {
hardhat: {},
core_testnet: {
url: 'https://rpc.test2.btcs.network',
accounts: [PRIVATE_KEY],
chainId: 1114,
},
},
solidity: {
compilers: [
{
version: '0.8.9',
settings: {
evmVersion: 'london',
optimizer: {
enabled: true,
runs: 200,
},
},
},
],
},
paths: {
sources: './contracts',
cache: './cache',
artifacts: './artifacts',
},
mocha: {
timeout: 20000,
},
};
================================================
FILE: 04-Pyth Pull Oracles/package.json
================================================
{
"name": "pyth-feed-boilerplate",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"description": "",
"devDependencies": {
"@babel/plugin-proposal-private-property-in-object": "^7.21.11",
"hardhat": "^2.22.6"
},
"dependencies": {
"@nomiclabs/hardhat-ethers": "^2.2.3",
"@nomiclabs/hardhat-waffle": "^2.0.6",
"@pythnetwork/pyth-sdk-solidity": "^3.1.0",
"dotenv": "^16.5.0",
"ethers": "^5.7.2"
}
}
================================================
FILE: 04-Pyth Pull Oracles/scripts/deploy.js
================================================
async function main() {
const [deployer] = await ethers.getSigners();
console.log("Deploying contracts with the account:", deployer.address);
// Replace with the actual Pyth contract address for CoreDAO testnet
const pythContractAddress = "0xA2aa501b19aff244D90cc15a4Cf739D2725B5729"; // Replace with actual address
const PythFeedBoilerplate = await ethers.getContractFactory("PythFeedBoilerplate");
const pythFeedBoilerplate = await PythFeedBoilerplate.deploy(pythContractAddress);
console.log("PythFeedBoilerplate deployed to:", pythFeedBoilerplate.address);
}
main()
.then(() => process.exit(0))
.catch(error => {
console.error(error);
process.exit(1);
});
================================================
FILE: 05-Hello-World-Dapp/.gitignore
================================================
node_modules
.env
secret.json
# Hardhat files
/cache
/artifacts
# TypeChain files
/typechain
/typechain-types
# solidity-coverage files
/coverage
/coverage.json
# Hardhat Ignition default folder for deployments against a local node
ignition/deployments/chain-31337
================================================
FILE: 05-Hello-World-Dapp/README.md
================================================
# Simple Hello World dApp on Core
In this tutorial, you'll learn how to build a simple decentralized application (dApp) using the Core blockchain TestNet. The focus will be on creating a "Hello World" dApp that interacts with a smart contract. This dApp will allow users to store, retrieve, and update a message on the blockchain. By following the steps in this guide, you will gain hands-on experience with MetaMask wallet integration, smart contract development, and front-end interaction using the Ethers.js library.
## What Are We Building
In this tutorial, we'll develop a simple Hello World decentralized application (dApp) that stores a message in a smart contract deployed on the Core blockchain TestNet. The dApp also has the functionality to retrieve and display the stored message.
## Learning Takeaways
This tutorial will help you gain knowledge on the following learning points:
* MetaMask Wallet connectivity to Core Testnet;
* Smart contract development and deployment on Core Testnet;
* Front-end integration with the smart contract using Ethers.js library;
* Read data from a smart contract;
* Write data to a smart contract;
## Software Prerequisites
* [Git](https://git-scm.com/) v2.44.0
* [Node.js](https://nodejs.org/en) v20.11.1
* [npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm) v10.2.4
* [Hardhat](https://hardhat.org/hardhat-runner/docs/getting-started#installation) v2.22.7
* [MetaMask Web Wallet Extension](https://metamask.io/download/)
## Setting up the development environment
1. Create a new directory for the project and navigate into it
```bash
mkdir hello-world-dapp
cd hello-world-dapp
```
2. Install Hardhat
```bash
npm init --yes
npm install --save-dev hardhat
```
3. Initialize Hardhat project by running the following command
```bash
npx hardhat init
```
4. Once this project is initialized, you'll find the following project structure:
```bash
dapp-tutorial.
| .gitignore
| hardhat-config.js
| package-lock.json
| package.json
| README.md
|
+---contracts
| Lock.sol
|
+---ignition
| \---modules
| Lock.js
|
+---node_modules
|
+---test
| Lock.js
|
```
5. Install and configure MetaMask Chrome Extension to use with Core Testnet. Refer [here](https://docs.coredao.org/docs/Dev-Guide/core-testnet-wallet-config) for a detailed guide.
6. Create a secret.json file in the root folder and store the private key of your MetaMask wallet in it. Refer [here](https://metamask.zendesk.com/hc/en-us/articles/360015290032-How-to-reveal-your-Secret-Recovery-Phrase) for details on how to get MetaMask account's private key.
```json
{"PrivateKey":"you private key, do not leak this file, do keep it absolutely safe"}
```
> Do not forget to add this file to the `.gitignore` file in the root folder of your project so that you don't accidentally check your private keys/secret phrases into a public repository. Make sure you keep this file in an absolutely safe place!
7. Copy the following into your `hardhat.config.js` file
```js
require("@nomicfoundation/hardhat-toolbox");
require("dotenv").config();
/** @type import('hardhat/config').HardhatUserConfig */
const PRIVATE_KEY = process.env.PRIVATE_KEY;
module.exports = {
defaultNetwork: 'core_testnet',
networks: {
hardhat: {
},
core_testnet: {
url: 'https://rpc.test2.btcs.network',
accounts: [PRIVATE_KEY],
chainId: 1115,
}
},
solidity: {
compilers: [
{
version: '0.8.26',
settings: {
evmVersion: 'paris',
optimizer: {
enabled: true,
runs: 200,
},
},
},
],
},
paths: {
sources: './contracts',
cache: './cache',
artifacts: './artifacts',
},
mocha: {
timeout: 60000,
},
};
```
## Writing HelloWorld Smart Contract
1. Navigate to the `contracts` folder in the root directory of your project.
2. Delete the `Lock.sol` file; create a new file `HelloWorld.sol` and paste the following contents into it.
```javascript
// SPDX-License-Identifier: MIT
pragma solidity ^0.8.26;
contract HelloWorld {
string public message;
constructor(string memory _message) {
message = _message;
}
function setMessage(string memory _message) public {
message = _message;
}
}
```
### Explanation
The `HelloWorld` Solidity contract stores a message in a public string variable. It initializes this message through the constructor when the contract is deployed. The `setMessage` function allows anyone to update the stored message. The `public` keyword makes the `message` variable readable by anyone.
#### State Variable
* `string public message`: Public string variable to store and read a message.
#### Constructor
* `constructor(string memory _message) { message = _message; }`: Initializes the message state variable with a value provided during deployment.
#### Function
* `function setMessage(string memory _message) public { message = _message; }`: Allows updating the message state variable.
## Compiling Smart Contract
1. To compile the `HelloWorld` smart contract defined in the `HelloWorld.sol`, from the root directory run the following command
```bash
npx hardhat compile
```
## Testing HelloWorld Smart Contracts
1. Before deploying your smart contract on the Core blockchain, it is best adviced to first run a series of tests making sure that the smart contract is working as desired.
2. Inside the `test` folder, delete the `Lock.js` file, create a new file `HelloWorld.js` and update it with the following:
```javascript
const { expect } = require("chai");
describe("HelloWorld contract", function () {
let HelloWorld;
let helloWorld;
let owner;
beforeEach(async function () {
HelloWorld = await ethers.getContractFactory("HelloWorld");
[owner] = await ethers.getSigners();
helloWorld = await HelloWorld.deploy("Hello, world!");
await helloWorld.waitForDeployment();
});
it("Should return the initial message", async function () {
expect(await helloWorld.message()).to.equal("Hello, world!");
});
it("Should update the message", async function () {
const tx =await helloWorld.setMessage("Hello, Hardhat!");
await tx.wait(); // Wait for the transaction to be mined
expect(await helloWorld.message()).to.equal("Hello, Hardhat!");
});
});
```
### Explanation
This test script is designed to validate the behavior of the HelloWorld smart contract. In the setup phase (beforeEach), it deploys a new instance of the contract with the initial message "Hello, world!" and waits for the deployment to complete.
The first test, "Should return the initial message," checks that the contract correctly returns the initial message stored during deployment. It ensures that the message is set to "Hello, world!" as expected.
The second test, "Should update the message," updates the message to "Hello, Hardhat!" and then verifies that the message has been updated successfully by checking its new value. This ensures that the setMessage function works correctly and the contract's state is updated as intended.
This test script checks the functionality of the HelloWorld contract:
* **Setup:** It deploys the HelloWorld contract with the initial message "Hello, world!" before each test.
* **Test Initial Message:** It verifies that the contract's initial message is correctly set to "Hello, world!".
* **Test Update Message:** It updates the message to "Hello, Hardhat!" and confirms that the change is successfully reflected.
Overall, these tests confirm that the contract's functionality for setting and retrieving messages operates correctly.
3. Run the test scripts using the command `npx hardhat test`
## Deploying HelloWorld Smart Contract
1. Create a `scripts` folder in the root directory of your project. Inside this folder, create a file `deploy.js`; paste the following script into it.
```javascript
const { ethers } = require("hardhat");
async function main() {
const [deployer] = await ethers.getSigners();
console.log("Deploying contract with the account:", deployer.address);
const HelloWorld = await ethers.getContractFactory("HelloWorld");
const helloWorld = await HelloWorld.deploy("Hello, World");
console.log("HelloWorld Contract Address:", await helloWorld.getAddress());
}
main()
.then(() => process.exit(0))
.catch((error) => {
console.error(error);
process.exit(1);
});
```
3. Make sure your MetaMask wallet has tCORE test tokens for the Core Testnet. Refer [here](https://docs.coredao.org/docs/Dev-Guide/core-faucet) for details on how to get tCORE tokens from Core Faucet.
4. Run the following command from the root directory of your project, to deploy your smart contract on the Core Chain.
```bash
npx hardhat run scripts/deploy.js
```
If succesfully deployed, you will get the following output
5. Make sure to save the Address of HelloWorld Contract at which is deployed, as obtained above, this will be used for interacting with smart contract from the dApp's frontend.
🎉 Congratulations! You have successfully learned how to create, compile, and deploy a smart contract on the Core Chain Testnet using the Hardhat.
## Interacting with Smart Contract through Frontend
⚡️ Let's create a frontend interface for interacting with the `HelloWorld` smart contract.
### Set Up React Project
1. Run the following commands to create a react project and install the required depencendy of `ethers.js` to communicate with the HelloWorld smart contract.
```bash
npx create-react-app frontend
cd frontend
npm install ethers
```
### Getting HelloWorld Contract ABI
* Copy the `HelloWorld.json` file from `artifacts/contracts/HelloWorld.sol/` to the `frontend/src/Contract-ABI` directory.
### Create the React Components
* Inside `src`, create a file named `HelloWorld.js`. Ensure you replace placeholders like `YOUR_CONTRACT_ADDRESS` with actual values from your deployment.
```javascript
import React, { useState, useEffect } from 'react';
import { ethers } from 'ethers';
import { toast, ToastContainer } from 'react-toastify'; // Import ToastContainer and toast
import 'react-toastify/dist/ReactToastify.css'; // Import the CSS for toast notifications
import './HelloWorld.css'; // Import the CSS file
// Import ABI from JSON file
import HelloWorldABI from './Contract-ABI/HelloWorld.json';
// Import the logo image
import logo from './core-dao-logo.png'; // Adjust the path as needed
// Replace with your contract's address
const contractAddress = "0xBF46BAA6210Ae6c9050F5453B996070209f69830";
function HelloWorld() {
const [message, setMessage] = useState('');
const [newMessage, setNewMessage] = useState('');
const [provider, setProvider] = useState(null);
const [contract, setContract] = useState(null);
const [showMessage, setShowMessage] = useState(false); // State to control message visibility
useEffect(() => {
async function init() {
if (!window.ethereum) {
toast.error("No crypto wallet found. Please install MetaMask.");
return;
}
try {
// Prompt user to connect MetaMask
await window.ethereum.request({ method: 'eth_requestAccounts' });
const provider = new ethers.BrowserProvider(window.ethereum);
const signer = await provider.getSigner();
const contract = new ethers.Contract(contractAddress, HelloWorldABI.abi, signer);
setProvider(provider);
setContract(contract);
} catch (error) {
toast.error("Failed to connect to MetaMask. Please try again.");
console.error("Error initializing MetaMask:", error);
}
}
init();
}, []);
const updateMessage = async () => {
if (!contract) return;
try {
const tx = await contract.setMessage(newMessage);
await tx.wait();
setNewMessage(''); // Clear the input field after updating
toast.success("Message updated successfully!");
} catch (error) {
toast.error("Failed to update message. Please try again.");
console.error("Error updating message:", error);
}
};
const retrieveMessage = async () => {
if (!contract) return;
try {
const currentMessage = await contract.message();
setMessage(currentMessage);
setShowMessage(true); // Show the message after retrieval
toast.success("Message retrieved successfully!");
} catch (error) {
toast.error("Failed to retrieve message. Please try again.");
console.error("Error retrieving message:", error);
}
};
return (
{/* Add ToastContainer to display notifications */}
{showMessage && (
{message}
)}
setNewMessage(e.target.value)}
className="input-field"
placeholder="Enter new message"
/>
);
}
export default App;
```
## Running Your Application
* Start the React Development Server using the command `npm run start`
```bash
npm start
Your application should now be accessible at http://localhost:3000.
```
## Interact with the dApp
Open your React app in the browser. You should be able to retrieve and set messages using your deployed contract.
🎉 Congratulations! You've just interacted with your newly-deployed contract using your dApp's front end! You can build on the codebase by deploying and interacting with different contracts, and by adding new UI components to the website for your users.
================================================
FILE: 05-Hello-World-Dapp/contracts/HelloWorld.sol
================================================
// SPDX-License-Identifier: MIT
pragma solidity ^0.8.26;
contract HelloWorld {
string public message;
constructor(string memory _message) {
message = _message;
}
function setMessage(string memory _message) public {
message = _message;
}
}
================================================
FILE: 05-Hello-World-Dapp/contracts/Lock.sol
================================================
// SPDX-License-Identifier: UNLICENSED
pragma solidity ^0.8.24;
// Uncomment this line to use console.log
// import "hardhat/console.sol";
contract Lock {
uint public unlockTime;
address payable public owner;
event Withdrawal(uint amount, uint when);
constructor(uint _unlockTime) payable {
require(
block.timestamp < _unlockTime,
"Unlock time should be in the future"
);
unlockTime = _unlockTime;
owner = payable(msg.sender);
}
function withdraw() public {
// Uncomment this line, and the import of "hardhat/console.sol", to print a log in your terminal
// console.log("Unlock time is %o and block timestamp is %o", unlockTime, block.timestamp);
require(block.timestamp >= unlockTime, "You can't withdraw yet");
require(msg.sender == owner, "You aren't the owner");
emit Withdrawal(address(this).balance, block.timestamp);
owner.transfer(address(this).balance);
}
}
================================================
FILE: 05-Hello-World-Dapp/frontend/.gitignore
================================================
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
# dependencies
/node_modules
/.pnp
.pnp.js
# testing
/coverage
# production
/build
# misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local
npm-debug.log*
yarn-debug.log*
yarn-error.log*
================================================
FILE: 05-Hello-World-Dapp/frontend/README.md
================================================
# Getting Started with Create React App
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
## Available Scripts
In the project directory, you can run:
### `npm start`
Runs the app in the development mode.\
Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
The page will reload when you make changes.\
You may also see any lint errors in the console.
### `npm test`
Launches the test runner in the interactive watch mode.\
See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
### `npm run build`
Builds the app for production to the `build` folder.\
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.\
Your app is ready to be deployed!
See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
### `npm run eject`
**Note: this is a one-way operation. Once you `eject`, you can't go back!**
If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.
You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.
## Learn More
You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
To learn React, check out the [React documentation](https://reactjs.org/).
### Code Splitting
This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
### Analyzing the Bundle Size
This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
### Making a Progressive Web App
This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
### Advanced Configuration
This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
### Deployment
This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
### `npm run build` fails to minify
This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)
================================================
FILE: 05-Hello-World-Dapp/frontend/package.json
================================================
{
"name": "frontend",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "5.17.0",
"@testing-library/react": "13.4.0",
"@testing-library/user-event": "13.5.0",
"ethers": "6.13.2",
"react": "18.3.1",
"react-dom": "18.3.1",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"react-toastify": "^10.0.5"
}
}
================================================
FILE: 05-Hello-World-Dapp/frontend/public/index.html
================================================
React App
================================================
FILE: 05-Hello-World-Dapp/frontend/public/manifest.json
================================================
{
"short_name": "React App",
"name": "Create React App Sample",
"icons": [
{
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
},
{
"src": "logo192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "logo512.png",
"type": "image/png",
"sizes": "512x512"
}
],
"start_url": ".",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}
================================================
FILE: 05-Hello-World-Dapp/frontend/public/robots.txt
================================================
# https://www.robotstxt.org/robotstxt.html
User-agent: *
Disallow:
================================================
FILE: 05-Hello-World-Dapp/frontend/src/App.css
================================================
.App {
text-align: center;
}
.App-logo {
height: 40vmin;
pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
.App-logo {
animation: App-logo-spin infinite 20s linear;
}
}
.App-header {
background-color: #282c34;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
}
.App-link {
color: #61dafb;
}
@keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
================================================
FILE: 05-Hello-World-Dapp/frontend/src/App.js
================================================
import React from 'react';
import './App.css';
import HelloWorld from './HelloWorld';
function App() {
return (
);
}
export default App;
================================================
FILE: 05-Hello-World-Dapp/frontend/src/App.test.js
================================================
import { render, screen } from '@testing-library/react';
import App from './App';
test('renders learn react link', () => {
render();
const linkElement = screen.getByText(/learn react/i);
expect(linkElement).toBeInTheDocument();
});
================================================
FILE: 05-Hello-World-Dapp/frontend/src/Contract-ABI/HelloWorld.json
================================================
{
"_format": "hh-sol-artifact-1",
"contractName": "HelloWorld",
"sourceName": "contracts/HelloWorld.sol",
"abi": [
{
"inputs": [
{
"internalType": "string",
"name": "_message",
"type": "string"
}
],
"stateMutability": "nonpayable",
"type": "constructor"
},
{
"inputs": [],
"name": "message",
"outputs": [
{
"internalType": "string",
"name": "",
"type": "string"
}
],
"stateMutability": "view",
"type": "function"
},
{
"inputs": [
{
"internalType": "string",
"name": "_message",
"type": "string"
}
],
"name": "setMessage",
"outputs": [],
"stateMutability": "nonpayable",
"type": "function"
}
],
"bytecode": "0x608060405234801561001057600080fd5b5060405161062138038061062183398101604081905261002f91610058565b600061003b82826101ad565b505061026b565b634e487b7160e01b600052604160045260246000fd5b60006020828403121561006a57600080fd5b81516001600160401b0381111561008057600080fd5b8201601f8101841361009157600080fd5b80516001600160401b038111156100aa576100aa610042565b604051601f8201601f19908116603f011681016001600160401b03811182821017156100d8576100d8610042565b6040528181528282016020018610156100f057600080fd5b60005b8281101561010f576020818501810151838301820152016100f3565b50600091810160200191909152949350505050565b600181811c9082168061013857607f821691505b60208210810361015857634e487b7160e01b600052602260045260246000fd5b50919050565b601f8211156101a857806000526020600020601f840160051c810160208510156101855750805b601f840160051c820191505b818110156101a55760008155600101610191565b50505b505050565b81516001600160401b038111156101c6576101c6610042565b6101da816101d48454610124565b8461015e565b6020601f82116001811461020e57600083156101f65750848201515b600019600385901b1c1916600184901b1784556101a5565b600084815260208120601f198516915b8281101561023e578785015182556020948501946001909201910161021e565b508482101561025c5786840151600019600387901b60f8161c191681555b50505050600190811b01905550565b6103a78061027a6000396000f3fe608060405234801561001057600080fd5b50600436106100365760003560e01c8063368b87721461003b578063e21f37ce14610050575b600080fd5b61004e610049366004610122565b61006e565b005b61005861007e565b60405161006591906101db565b60405180910390f35b600061007a82826102b2565b5050565b6000805461008b90610229565b80601f01602080910402602001604051908101604052809291908181526020018280546100b790610229565b80156101045780601f106100d957610100808354040283529160200191610104565b820191906000526020600020905b8154815290600101906020018083116100e757829003601f168201915b505050505081565b634e487b7160e01b600052604160045260246000fd5b60006020828403121561013457600080fd5b813567ffffffffffffffff81111561014b57600080fd5b8201601f8101841361015c57600080fd5b803567ffffffffffffffff8111156101765761017661010c565b604051601f8201601f19908116603f0116810167ffffffffffffffff811182821017156101a5576101a561010c565b6040528181528282016020018610156101bd57600080fd5b81602084016020830137600091810160200191909152949350505050565b602081526000825180602084015260005b8181101561020957602081860181015160408684010152016101ec565b506000604082850101526040601f19601f83011684010191505092915050565b600181811c9082168061023d57607f821691505b60208210810361025d57634e487b7160e01b600052602260045260246000fd5b50919050565b601f8211156102ad57806000526020600020601f840160051c8101602085101561028a5750805b601f840160051c820191505b818110156102aa5760008155600101610296565b50505b505050565b815167ffffffffffffffff8111156102cc576102cc61010c565b6102e0816102da8454610229565b84610263565b6020601f82116001811461031457600083156102fc5750848201515b600019600385901b1c1916600184901b1784556102aa565b600084815260208120601f198516915b828110156103445787850151825560209485019460019092019101610324565b50848210156103625786840151600019600387901b60f8161c191681555b50505050600190811b0190555056fea26469706673582212200901b2e271d38e15a461cb148f993399b3ccb61d788adadb0e62f7d9526a4ff764736f6c634300081a0033",
"deployedBytecode": "0x608060405234801561001057600080fd5b50600436106100365760003560e01c8063368b87721461003b578063e21f37ce14610050575b600080fd5b61004e610049366004610122565b61006e565b005b61005861007e565b60405161006591906101db565b60405180910390f35b600061007a82826102b2565b5050565b6000805461008b90610229565b80601f01602080910402602001604051908101604052809291908181526020018280546100b790610229565b80156101045780601f106100d957610100808354040283529160200191610104565b820191906000526020600020905b8154815290600101906020018083116100e757829003601f168201915b505050505081565b634e487b7160e01b600052604160045260246000fd5b60006020828403121561013457600080fd5b813567ffffffffffffffff81111561014b57600080fd5b8201601f8101841361015c57600080fd5b803567ffffffffffffffff8111156101765761017661010c565b604051601f8201601f19908116603f0116810167ffffffffffffffff811182821017156101a5576101a561010c565b6040528181528282016020018610156101bd57600080fd5b81602084016020830137600091810160200191909152949350505050565b602081526000825180602084015260005b8181101561020957602081860181015160408684010152016101ec565b506000604082850101526040601f19601f83011684010191505092915050565b600181811c9082168061023d57607f821691505b60208210810361025d57634e487b7160e01b600052602260045260246000fd5b50919050565b601f8211156102ad57806000526020600020601f840160051c8101602085101561028a5750805b601f840160051c820191505b818110156102aa5760008155600101610296565b50505b505050565b815167ffffffffffffffff8111156102cc576102cc61010c565b6102e0816102da8454610229565b84610263565b6020601f82116001811461031457600083156102fc5750848201515b600019600385901b1c1916600184901b1784556102aa565b600084815260208120601f198516915b828110156103445787850151825560209485019460019092019101610324565b50848210156103625786840151600019600387901b60f8161c191681555b50505050600190811b0190555056fea26469706673582212200901b2e271d38e15a461cb148f993399b3ccb61d788adadb0e62f7d9526a4ff764736f6c634300081a0033",
"linkReferences": {},
"deployedLinkReferences": {}
}
================================================
FILE: 05-Hello-World-Dapp/frontend/src/HelloWorld.css
================================================
/* Container for the entire component */
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh; /* Full viewport height */
width: 100vw; /* Full viewport width */
background-color: #2e2e2e; /* Darker gray background */
color: #e0e0e0; /* Light gray text for better readability */
padding: 20px;
box-sizing: border-box; /* Ensure padding is included in height and width */
}
/* Style for the logo */
.logo {
width: 200px; /* Larger size for visibility */
margin-bottom: 40px;
border-radius: 10px; /* Rounded corners for the logo */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); /* Shadow for depth */
}
/* Style for the retrieve button and update button */
.retrieve-button, .update-button {
background-color: #ff920f; /* Updated orange color */
color: white;
border: none;
padding: 14px 28px; /* Slightly larger padding */
margin: 10px;
cursor: pointer;
border-radius: 8px;
font-size: 18px;
transition: background-color 0.3s ease, transform 0.2s ease;
}
.retrieve-button:hover, .update-button:hover {
background-color: #e67e22; /* Darker orange for hover effect */
transform: scale(1.05); /* Slightly enlarge button on hover */
}
/* Style for the message display */
.message-display {
font-size: 28px; /* Larger font size for better visibility */
margin-bottom: 20px; /* Space below the message */
font-weight: bold;
color: #ffd54f; /* Bright yellow color for contrast */
}
/* Style for the input field */
.input-field {
padding: 14px;
border: 1px solid #555; /* Darker border for visibility */
border-radius: 8px;
width: 80%;
max-width: 500px; /* Increased max-width for larger screens */
margin-bottom: 20px; /* Space below the input field */
font-size: 18px;
background-color: #424242; /* Slightly lighter gray for input background */
color: #fff; /* White text color for the input field */
transition: background-color 0.3s ease, border-color 0.3s ease;
}
/* Adding gap specifically between input field and retrieve button */
.retrieve-button {
margin-top: 20px; /* Adjust the gap as needed */
}
.input-field:focus {
background-color: #616161; /* Lighter gray on focus */
border-color: #ff920f; /* Orange border on focus */
outline: none;
}
================================================
FILE: 05-Hello-World-Dapp/frontend/src/HelloWorld.js
================================================
import React, { useState, useEffect } from 'react';
import { ethers } from 'ethers';
import { toast, ToastContainer } from 'react-toastify'; // Import ToastContainer and toast
import 'react-toastify/dist/ReactToastify.css'; // Import the CSS for toast notifications
import './HelloWorld.css'; // Import the CSS file
// Import ABI from JSON file
import HelloWorldABI from './Contract-ABI/HelloWorld.json';
// Import the logo image
import logo from './core-dao-logo.png'; // Adjust the path as needed
// Replace with your contract's address
const contractAddress = "0xf5d9Dd0f6EAa91802979707b91407d8448136DD0";
function HelloWorld() {
const [message, setMessage] = useState('');
const [newMessage, setNewMessage] = useState('');
//const [provider, setProvider] = useState(null);
const [contract, setContract] = useState(null);
const [showMessage, setShowMessage] = useState(false); // State to control message visibility
useEffect(() => {
async function init() {
if (!window.ethereum) {
toast.error("No crypto wallet found. Please install MetaMask.");
return;
}
try {
// Prompt user to connect MetaMask
await window.ethereum.request({ method: 'eth_requestAccounts' });
const provider = new ethers.BrowserProvider(window.ethereum);
const signer = await provider.getSigner();
const contract = new ethers.Contract(contractAddress, HelloWorldABI.abi, signer);
//setProvider(provider);
setContract(contract);
} catch (error) {
toast.error("Failed to connect to MetaMask. Please try again.");
console.error("Error initializing MetaMask:", error);
}
}
init();
}, []);
const updateMessage = async () => {
if (!contract) return;
try {
const tx = await contract.setMessage(newMessage);
await tx.wait();
setNewMessage(''); // Clear the input field after updating
toast.success("Message updated successfully!");
} catch (error) {
toast.error("Failed to update message. Please try again.");
console.error("Error updating message:", error);
}
};
const retrieveMessage = async () => {
if (!contract) return;
try {
const currentMessage = await contract.message();
setMessage(currentMessage);
setShowMessage(true); // Show the message after retrieval
toast.success("Message retrieved successfully!");
} catch (error) {
toast.error("Failed to retrieve message. Please try again.");
console.error("Error retrieving message:", error);
}
};
return (
{/* Add ToastContainer to display notifications */}
{showMessage && (
{message}
)}
setNewMessage(e.target.value)}
className="input-field"
placeholder="Enter new message"
/>
);
}
export default HelloWorld;
================================================
FILE: 05-Hello-World-Dapp/frontend/src/index.css
================================================
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace;
}
================================================
FILE: 05-Hello-World-Dapp/frontend/src/index.js
================================================
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
================================================
FILE: 05-Hello-World-Dapp/frontend/src/reportWebVitals.js
================================================
const reportWebVitals = onPerfEntry => {
if (onPerfEntry && onPerfEntry instanceof Function) {
import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
getCLS(onPerfEntry);
getFID(onPerfEntry);
getFCP(onPerfEntry);
getLCP(onPerfEntry);
getTTFB(onPerfEntry);
});
}
};
export default reportWebVitals;
================================================
FILE: 05-Hello-World-Dapp/frontend/src/setupTests.js
================================================
// jest-dom adds custom jest matchers for asserting on DOM nodes.
// allows you to do things like:
// expect(element).toHaveTextContent(/react/i)
// learn more: https://github.com/testing-library/jest-dom
import '@testing-library/jest-dom';
================================================
FILE: 05-Hello-World-Dapp/hardhat.config.js
================================================
require("@nomicfoundation/hardhat-toolbox");
require("dotenv").config();
/** @type import('hardhat/config').HardhatUserConfig */
const PRIVATE_KEY = process.env.PRIVATE_KEY;
module.exports = {
defaultNetwork: 'hardhat',
networks: {
hardhat: {
},
core_testnet: {
url: 'https://rpc.test2.btcs.network',
accounts: [PRIVATE_KEY],
chainId: 1114,
}
},
solidity: {
compilers: [
{
version: '0.8.26',
settings: {
evmVersion: 'shanghai',
optimizer: {
enabled: true,
runs: 200,
},
},
},
],
},
paths: {
sources: './contracts',
cache: './cache',
artifacts: './artifacts',
},
mocha: {
timeout: 60000,
},
};
================================================
FILE: 05-Hello-World-Dapp/ignition/modules/Lock.js
================================================
const { buildModule } = require("@nomicfoundation/hardhat-ignition/modules");
const JAN_1ST_2030 = 1893456000;
const ONE_GWEI = 1_000_000_000n;
module.exports = buildModule("LockModule", (m) => {
const unlockTime = m.getParameter("unlockTime", JAN_1ST_2030);
const lockedAmount = m.getParameter("lockedAmount", ONE_GWEI);
const lock = m.contract("Lock", [unlockTime], {
value: lockedAmount,
});
return { lock };
});
================================================
FILE: 05-Hello-World-Dapp/npx
================================================
================================================
FILE: 05-Hello-World-Dapp/package.json
================================================
{
"name": "hardhat-project",
"devDependencies": {
"@nomicfoundation/hardhat-toolbox": "^5.0.0",
"hardhat": "^2.22.7"
},
"description": "This project demonstrates a basic Hardhat use case. It comes with a sample contract, a test for that contract, and a Hardhat Ignition module that deploys that contract.",
"version": "1.0.0",
"main": "hardhat.config.js",
"directories": {
"test": "test"
},
"dependencies": {
"dotenv": "^16.5.0"
},
"scripts": {
"test": "mocha"
},
"keywords": [],
"author": "",
"license": "ISC"
}
================================================
FILE: 05-Hello-World-Dapp/scripts/deploy.js
================================================
const { ethers } = require("hardhat");
async function main() {
const [deployer] = await ethers.getSigners();
console.log("Deploying contract with the account:", deployer.address);
const HelloWorld = await ethers.getContractFactory("HelloWorld");
const helloWorld = await HelloWorld.deploy("Hello, World");
console.log("HelloWorld Contract Address:", await helloWorld.getAddress());
}
main()
.then(() => process.exit(0))
.catch((error) => {
console.error(error);
process.exit(1);
});
================================================
FILE: 05-Hello-World-Dapp/test/HelloWorld.js
================================================
const { expect } = require("chai");
describe("HelloWorld contract", function () {
let HelloWorld;
let helloWorld;
let owner;
beforeEach(async function () {
HelloWorld = await ethers.getContractFactory("HelloWorld");
[owner] = await ethers.getSigners();
helloWorld = await HelloWorld.deploy("Hello, world!");
await helloWorld.waitForDeployment();
});
it("Should return the initial message", async function () {
expect(await helloWorld.message()).to.equal("Hello, world!");
});
it("Should update the message", async function () {
const tx =await helloWorld.setMessage("Hello, Hardhat!");
await tx.wait(); // Wait for the transaction to be mined
expect(await helloWorld.message()).to.equal("Hello, Hardhat!");
});
});
================================================
FILE: 06-Subgraphs-on-Core/README.md
================================================
# Guestbook Subgraph
This repository contains the subgraph for the Guestbook application on the Core Network. The subgraph indexes events and data from the Guestbook smart contract, allowing for easy querying using GraphQL.
## Table of Contents
- [Prerequisites](#prerequisites)
- [Clone the Repository](#clone-the-repository)
- [Configuration](#configuration)
- [Install Dependencies](#install-dependencies)
- [Deploying with Docker](#deploying-with-docker)
- [Deploying the Subgraph](#deploying-the-subgraph)
- [Interacting with the Subgraph](#interacting-with-the-subgraph)
- [Troubleshooting](#troubleshooting)
## Prerequisites
Before you begin, ensure you have the following installed:
- [Node.js](https://nodejs.org/en/) (v14 or later)
- [npm](https://www.npmjs.com/)
- [Docker](https://www.docker.com/)
- [Git](https://git-scm.com/)
## Clone the Repository
To clone the repository locally, run the following commands:
```bash
git clone https://github.com/coredao-org/dapp-tutorial.git
cd dapp-tutorial/06-Subgraphs-on-Core
```
## Configuration
### Environment Variables
You need to set up the following environment variables to configure deployment:
Create a .env file in the root directory:
```bash
touch.env
```
2. Add the necessary environment variables to the .env file:
```env
GRAPH_NODE=https://thegraph-node.test.btcs.network/
IPFS_NODE=https://thegraph-ipfs.test.btcs.network/
GRAPH_ACCESS_TOKEN=your_access_token_here
```
### Subgraph Configuration
Ensure your subgraph.yaml file is correctly set up with the necessary contract addresses and start blocks.
```zsh
npm install
```
This will install all required packages including @graphprotocol/graph-cli and @graphprotocol/graph-ts.
## Deploying with Docker
You can deploy your subgraph using Docker to simulate a local environment.
1. Build and Start Docker Containers:
```zsh
docker-compose up -d
```
2. Check Docker Containers:
```zsh
docker ps
```
Ensure all necessary containers are running.
## Deploying the Subgraph
### Authenticate with Graph Node
If not already authenticated, authenticate your deployment key:
```zsh
export GRAPH_ACCESS_TOKEN=08e38ec0513b40fd9b6a4428923d06ac
```
### Generate code and build the subgraph:
```bash
graph codegen
graph build
```
### Create and Deploy Subgraph
```
graph create \
--node $GRAPH_NODE \
--access-token $GRAPH_ACCESS_TOKEN \
your-subgraph-name
```
```
graph deploy \
--node $GRAPH_NODE \
--ipfs $IPFS_NODE \
--access-token $GRAPH_ACCESS_TOKEN \
your-subgraph-name
```
Replace your-subgraph-name with your deployment target.
### Query the Subgraph
After deployment, your subgraph will be available at the query endpoint (e.g., https://thegraph.test2.btcs.network/subgraphs/name/guestbook-subgraph).
Example query:
```
{
entrySigneds(first: 10, orderBy: blockTimestamp, orderDirection: desc) {
id
name
message
blockNumber
blockTimestamp
transactionHash
}
}
```
You can use GraphQL, Apollo Client, or any GraphQL tool to query your data.
================================================
FILE: 06-Subgraphs-on-Core/abis/Guestbook.json
================================================
[
{
"anonymous": false,
"inputs": [
{
"indexed": false,
"internalType": "string",
"name": "name",
"type": "string"
},
{
"indexed": false,
"internalType": "string",
"name": "message",
"type": "string"
}
],
"name": "EntrySigned",
"type": "event"
},
{
"inputs": [{ "internalType": "uint256", "name": "", "type": "uint256" }],
"name": "entries",
"outputs": [
{ "internalType": "string", "name": "name", "type": "string" },
{ "internalType": "string", "name": "message", "type": "string" }
],
"stateMutability": "view",
"type": "function"
},
{
"inputs": [],
"name": "getEntries",
"outputs": [
{
"components": [
{ "internalType": "string", "name": "name", "type": "string" },
{ "internalType": "string", "name": "message", "type": "string" }
],
"internalType": "struct Guestbook.Entry[]",
"name": "",
"type": "tuple[]"
}
],
"stateMutability": "view",
"type": "function"
},
{
"inputs": [
{ "internalType": "string", "name": "_name", "type": "string" },
{ "internalType": "string", "name": "_message", "type": "string" }
],
"name": "signGuestbook",
"outputs": [],
"stateMutability": "nonpayable",
"type": "function"
}
]
================================================
FILE: 06-Subgraphs-on-Core/build/Guestbook/Guestbook.json
================================================
[
{
"anonymous": false,
"inputs": [
{
"indexed": false,
"internalType": "string",
"name": "name",
"type": "string"
},
{
"indexed": false,
"internalType": "string",
"name": "message",
"type": "string"
}
],
"name": "EntrySigned",
"type": "event"
},
{
"inputs": [
{
"internalType": "uint256",
"name": "",
"type": "uint256"
}
],
"name": "entries",
"outputs": [
{
"internalType": "string",
"name": "name",
"type": "string"
},
{
"internalType": "string",
"name": "message",
"type": "string"
}
],
"stateMutability": "view",
"type": "function"
},
{
"inputs": [],
"name": "getEntries",
"outputs": [
{
"components": [
{
"internalType": "string",
"name": "name",
"type": "string"
},
{
"internalType": "string",
"name": "message",
"type": "string"
}
],
"internalType": "struct Guestbook.Entry[]",
"name": "",
"type": "tuple[]"
}
],
"stateMutability": "view",
"type": "function"
},
{
"inputs": [
{
"internalType": "string",
"name": "_name",
"type": "string"
},
{
"internalType": "string",
"name": "_message",
"type": "string"
}
],
"name": "signGuestbook",
"outputs": [],
"stateMutability": "nonpayable",
"type": "function"
}
]
================================================
FILE: 06-Subgraphs-on-Core/build/schema.graphql
================================================
type EntrySigned @entity(immutable: true) {
id: Bytes!
name: String! # string
message: String! # string
blockNumber: BigInt!
blockTimestamp: BigInt!
transactionHash: Bytes!
}
================================================
FILE: 06-Subgraphs-on-Core/build/subgraph.yaml
================================================
specVersion: 1.0.0
indexerHints:
prune: auto
schema:
file: schema.graphql
dataSources:
- kind: ethereum
name: Guestbook
network: core
source:
address: "0x0D0b3bAc514d53AafC95c74294Bb1B613D1862c2"
abi: Guestbook
startBlock: 22122890
mapping:
kind: ethereum/events
apiVersion: 0.0.7
language: wasm/assemblyscript
entities:
- EntrySigned
abis:
- name: Guestbook
file: Guestbook/Guestbook.json
eventHandlers:
- event: EntrySigned(string,string)
handler: handleEntrySigned
file: Guestbook/Guestbook.wasm
================================================
FILE: 06-Subgraphs-on-Core/docker-compose.yml
================================================
version: "3"
services:
graph-node:
image: graphprotocol/graph-node
ports:
- "8000:8000"
- "8001:8001"
- "8020:8020"
- "8030:8030"
- "8040:8040"
depends_on:
- ipfs
- postgres
extra_hosts:
- host.docker.internal:host-gateway
environment:
postgres_host: postgres
postgres_user: graph-node
postgres_pass: let-me-in
postgres_db: graph-node
ipfs: "ipfs:5001"
ethereum: "core-testnet:https://rpc.test.btcs.network"
GRAPH_LOG: info
ipfs:
image: ipfs/kubo:v0.17.0
ports:
- "5001:5001"
volumes:
- ./data/ipfs:/data/ipfs
postgres:
image: postgres:14
ports:
- "5432:5432"
command:
[
"postgres",
"-cshared_preload_libraries=pg_stat_statements",
"-cmax_connections=200",
]
environment:
POSTGRES_USER: graph-node
POSTGRES_PASSWORD: let-me-in
POSTGRES_DB: graph-node
# FIXME: remove this env. var. which we shouldn't need. Introduced by
# , maybe as a
# workaround for https://github.com/docker/for-mac/issues/6270?
PGDATA: "/var/lib/postgresql/data"
POSTGRES_INITDB_ARGS: "-E UTF8 --locale=C"
volumes:
- ./data/postgres:/var/lib/postgresql/data
================================================
FILE: 06-Subgraphs-on-Core/generated/Guestbook/Guestbook.ts
================================================
// THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
import {
ethereum,
JSONValue,
TypedMap,
Entity,
Bytes,
Address,
BigInt,
} from "@graphprotocol/graph-ts";
export class EntrySigned extends ethereum.Event {
get params(): EntrySigned__Params {
return new EntrySigned__Params(this);
}
}
export class EntrySigned__Params {
_event: EntrySigned;
constructor(event: EntrySigned) {
this._event = event;
}
get name(): string {
return this._event.parameters[0].value.toString();
}
get message(): string {
return this._event.parameters[1].value.toString();
}
}
export class Guestbook__entriesResult {
value0: string;
value1: string;
constructor(value0: string, value1: string) {
this.value0 = value0;
this.value1 = value1;
}
toMap(): TypedMap {
let map = new TypedMap();
map.set("value0", ethereum.Value.fromString(this.value0));
map.set("value1", ethereum.Value.fromString(this.value1));
return map;
}
getName(): string {
return this.value0;
}
getMessage(): string {
return this.value1;
}
}
export class Guestbook__getEntriesResultValue0Struct extends ethereum.Tuple {
get name(): string {
return this[0].toString();
}
get message(): string {
return this[1].toString();
}
}
export class Guestbook extends ethereum.SmartContract {
static bind(address: Address): Guestbook {
return new Guestbook("Guestbook", address);
}
entries(param0: BigInt): Guestbook__entriesResult {
let result = super.call("entries", "entries(uint256):(string,string)", [
ethereum.Value.fromUnsignedBigInt(param0),
]);
return new Guestbook__entriesResult(
result[0].toString(),
result[1].toString(),
);
}
try_entries(param0: BigInt): ethereum.CallResult {
let result = super.tryCall("entries", "entries(uint256):(string,string)", [
ethereum.Value.fromUnsignedBigInt(param0),
]);
if (result.reverted) {
return new ethereum.CallResult();
}
let value = result.value;
return ethereum.CallResult.fromValue(
new Guestbook__entriesResult(value[0].toString(), value[1].toString()),
);
}
getEntries(): Array {
let result = super.call(
"getEntries",
"getEntries():((string,string)[])",
[],
);
return result[0].toTupleArray();
}
try_getEntries(): ethereum.CallResult<
Array
> {
let result = super.tryCall(
"getEntries",
"getEntries():((string,string)[])",
[],
);
if (result.reverted) {
return new ethereum.CallResult();
}
let value = result.value;
return ethereum.CallResult.fromValue(
value[0].toTupleArray(),
);
}
}
export class SignGuestbookCall extends ethereum.Call {
get inputs(): SignGuestbookCall__Inputs {
return new SignGuestbookCall__Inputs(this);
}
get outputs(): SignGuestbookCall__Outputs {
return new SignGuestbookCall__Outputs(this);
}
}
export class SignGuestbookCall__Inputs {
_call: SignGuestbookCall;
constructor(call: SignGuestbookCall) {
this._call = call;
}
get _name(): string {
return this._call.inputValues[0].value.toString();
}
get _message(): string {
return this._call.inputValues[1].value.toString();
}
}
export class SignGuestbookCall__Outputs {
_call: SignGuestbookCall;
constructor(call: SignGuestbookCall) {
this._call = call;
}
}
================================================
FILE: 06-Subgraphs-on-Core/generated/schema.ts
================================================
// THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
import {
TypedMap,
Entity,
Value,
ValueKind,
store,
Bytes,
BigInt,
BigDecimal,
} from "@graphprotocol/graph-ts";
export class EntrySigned extends Entity {
constructor(id: Bytes) {
super();
this.set("id", Value.fromBytes(id));
}
save(): void {
let id = this.get("id");
assert(id != null, "Cannot save EntrySigned entity without an ID");
if (id) {
assert(
id.kind == ValueKind.BYTES,
`Entities of type EntrySigned must have an ID of type Bytes but the id '${id.displayData()}' is of type ${id.displayKind()}`,
);
store.set("EntrySigned", id.toBytes().toHexString(), this);
}
}
static loadInBlock(id: Bytes): EntrySigned | null {
return changetype(
store.get_in_block("EntrySigned", id.toHexString()),
);
}
static load(id: Bytes): EntrySigned | null {
return changetype(
store.get("EntrySigned", id.toHexString()),
);
}
get id(): Bytes {
let value = this.get("id");
if (!value || value.kind == ValueKind.NULL) {
throw new Error("Cannot return null for a required field.");
} else {
return value.toBytes();
}
}
set id(value: Bytes) {
this.set("id", Value.fromBytes(value));
}
get name(): string {
let value = this.get("name");
if (!value || value.kind == ValueKind.NULL) {
throw new Error("Cannot return null for a required field.");
} else {
return value.toString();
}
}
set name(value: string) {
this.set("name", Value.fromString(value));
}
get message(): string {
let value = this.get("message");
if (!value || value.kind == ValueKind.NULL) {
throw new Error("Cannot return null for a required field.");
} else {
return value.toString();
}
}
set message(value: string) {
this.set("message", Value.fromString(value));
}
get blockNumber(): BigInt {
let value = this.get("blockNumber");
if (!value || value.kind == ValueKind.NULL) {
throw new Error("Cannot return null for a required field.");
} else {
return value.toBigInt();
}
}
set blockNumber(value: BigInt) {
this.set("blockNumber", Value.fromBigInt(value));
}
get blockTimestamp(): BigInt {
let value = this.get("blockTimestamp");
if (!value || value.kind == ValueKind.NULL) {
throw new Error("Cannot return null for a required field.");
} else {
return value.toBigInt();
}
}
set blockTimestamp(value: BigInt) {
this.set("blockTimestamp", Value.fromBigInt(value));
}
get transactionHash(): Bytes {
let value = this.get("transactionHash");
if (!value || value.kind == ValueKind.NULL) {
throw new Error("Cannot return null for a required field.");
} else {
return value.toBytes();
}
}
set transactionHash(value: Bytes) {
this.set("transactionHash", Value.fromBytes(value));
}
}
================================================
FILE: 06-Subgraphs-on-Core/networks.json
================================================
{
"core": {
"Guestbook": {
"address": "0x0D0b3bAc514d53AafC95c74294Bb1B613D1862c2",
"startBlock": 22122890
}
}
}
================================================
FILE: 06-Subgraphs-on-Core/package.json
================================================
{
"name": "guestbook-subgraph",
"license": "UNLICENSED",
"scripts": {
"codegen": "graph codegen",
"build": "graph build",
"deploy": "graph deploy --node https://api.studio.thegraph.com/deploy/ guestbook-subgraph",
"create-local": "graph create --node http://localhost:8020/ guestbook-subgraph",
"remove-local": "graph remove --node http://localhost:8020/ guestbook-subgraph",
"deploy-local": "graph deploy --node http://localhost:8020/ --ipfs http://localhost:5001 guestbook-subgraph",
"test": "graph test"
},
"dependencies": {
"@graphprotocol/graph-cli": "0.80.0",
"@graphprotocol/graph-ts": "0.32.0"
},
"devDependencies": { "matchstick-as": "0.5.0" }
}
================================================
FILE: 06-Subgraphs-on-Core/schema.graphql
================================================
type EntrySigned @entity(immutable: true) {
id: Bytes!
name: String! # string
message: String! # string
blockNumber: BigInt!
blockTimestamp: BigInt!
transactionHash: Bytes!
}
================================================
FILE: 06-Subgraphs-on-Core/src/guestbook.ts
================================================
import { EntrySigned as EntrySignedEvent } from "../generated/Guestbook/Guestbook"
import { EntrySigned } from "../generated/schema"
export function handleEntrySigned(event: EntrySignedEvent): void {
let entity = new EntrySigned(
event.transaction.hash.concatI32(event.logIndex.toI32())
)
entity.name = event.params.name
entity.message = event.params.message
entity.blockNumber = event.block.number
entity.blockTimestamp = event.block.timestamp
entity.transactionHash = event.transaction.hash
entity.save()
}
================================================
FILE: 06-Subgraphs-on-Core/subgraph.yaml
================================================
specVersion: 1.0.0
indexerHints:
prune: auto
schema:
file: ./schema.graphql
dataSources:
- kind: ethereum
name: Guestbook
network: core
source:
address: "0x0D0b3bAc514d53AafC95c74294Bb1B613D1862c2"
abi: Guestbook
startBlock: 22122890
mapping:
kind: ethereum/events
apiVersion: 0.0.7
language: wasm/assemblyscript
entities:
- EntrySigned
abis:
- name: Guestbook
file: ./abis/Guestbook.json
eventHandlers:
- event: EntrySigned(string,string)
handler: handleEntrySigned
file: ./src/guestbook.ts
================================================
FILE: 06-Subgraphs-on-Core/tests/guestbook-utils.ts
================================================
import { newMockEvent } from "matchstick-as"
import { ethereum } from "@graphprotocol/graph-ts"
import { EntrySigned } from "../generated/Guestbook/Guestbook"
export function createEntrySignedEvent(
name: string,
message: string
): EntrySigned {
let entrySignedEvent = changetype(newMockEvent())
entrySignedEvent.parameters = new Array()
entrySignedEvent.parameters.push(
new ethereum.EventParam("name", ethereum.Value.fromString(name))
)
entrySignedEvent.parameters.push(
new ethereum.EventParam("message", ethereum.Value.fromString(message))
)
return entrySignedEvent
}
================================================
FILE: 06-Subgraphs-on-Core/tests/guestbook.test.ts
================================================
import {
assert,
describe,
test,
clearStore,
beforeAll,
afterAll
} from "matchstick-as/assembly/index"
import {} from "@graphprotocol/graph-ts"
import { EntrySigned } from "../generated/schema"
import { EntrySigned as EntrySignedEvent } from "../generated/Guestbook/Guestbook"
import { handleEntrySigned } from "../src/guestbook"
import { createEntrySignedEvent } from "./guestbook-utils"
// Tests structure (matchstick-as >=0.5.0)
// https://thegraph.com/docs/en/developer/matchstick/#tests-structure-0-5-0
describe("Describe entity assertions", () => {
beforeAll(() => {
let name = "Example string value"
let message = "Example string value"
let newEntrySignedEvent = createEntrySignedEvent(name, message)
handleEntrySigned(newEntrySignedEvent)
})
afterAll(() => {
clearStore()
})
// For more test scenarios, see:
// https://thegraph.com/docs/en/developer/matchstick/#write-a-unit-test
test("EntrySigned created and stored", () => {
assert.entityCount("EntrySigned", 1)
// 0xa16081f360e3847006db660bae1c6d1b2e17ec2a is the default address used in newMockEvent() function
assert.fieldEquals(
"EntrySigned",
"0xa16081f360e3847006db660bae1c6d1b2e17ec2a-1",
"name",
"Example string value"
)
assert.fieldEquals(
"EntrySigned",
"0xa16081f360e3847006db660bae1c6d1b2e17ec2a-1",
"message",
"Example string value"
)
// More assert options:
// https://thegraph.com/docs/en/developer/matchstick/#asserts
})
})
================================================
FILE: 06-Subgraphs-on-Core/tsconfig.json
================================================
{
"extends": "@graphprotocol/graph-ts/types/tsconfig.base.json",
"include": ["src", "tests"]
}
================================================
FILE: 07-NFT Minitng dApp on Core/.gitignore
================================================
node_modules
.env
# Hardhat files
/cache
/artifacts
# TypeChain files
/typechain
/typechain-types
# solidity-coverage files
/coverage
/coverage.json
# Hardhat Ignition default folder for deployments against a local node
ignition/deployments/chain-31337
secret.json
================================================
FILE: 07-NFT Minitng dApp on Core/README.md
================================================
# Building NFT Minting DApp on Core
Welcome to this tutorial where we will build a simple NFT Minting DApp on Core Blockchain from scratch. We will make a basic DApp where you will be able to mint NFTs from the frontend app. By the end of the tutorial, we will have a functional dapp that interacts with smart contracts on the Core Blockchain Testnet. Let’s start🙌
## Learning Takeaways
- Smart Contract Development in Solidity programming language
- Building frontend using React.js
- Using Ethers.js library for interaction of frontend with smart contracts
- Integrating Metamask wallet for secure user transactions
- Read and write data to/from smart contracts
## Software Prerequisites
- [Git](https://git-scm.com/)
- [Node.js](https://nodejs.org/en) v20.13.1
- [Yarn](https://yarnpkg.com/) v1.22.21
- [Hardhat](https://hardhat.org/) v2.20.1
- [Metamask Wallet](https://metamask.io/download/)
- **Core Testnet Configuration**: Configure MetaMask to connect to the Core Testnet. Refer here for more details.
- **Network Name**: Core Testnet
- **New RPC URL**: [https://rpc.test2.btcs.network](https://rpc.test2.btcs.network)
- **Chain ID**: 1114
- **Currency Symbol**: TCORE2
- **Core Faucet**: To get test CORE tokens for transactions, visit the Core Faucet, refer [here](https://docs.coredao.org/docs/Dev-Guide/core-faucet) for more details.
## Setting up Dev Environment
### 1. Initialize the project
We will create a new director `NFT_Minting` and initialize our project using `yarn`.
```bash
mkdir NFT_Minting
cd NFT_Minting
yarn init -y
yarn add --dev hardhat
yard hardhat init
```
Select the `Create a Javascript project`
Select the default project root directory
Select yes adding a `.gitignore` and installing additional packages
### 2. Install and Configure MetaMask
- Install and configure MetaMask Chrome Extension to use with Core Testnet.
- Refer [here](https://docs.coredao.org/docs/Dev-Guide/core-testnet-wallet-config) for a detailed guide.
### 3. Create a Secret File
- Create a `.env` file in the root folder and store the private key of your MetaMask wallet in it.
```bash
PRIVATE_KEY =
```
### 4. Update .gitignore
- Update your .gitignore file to ensure that your secret.json file and other sensitive files are not committed to version control.
- Make sure to add `secret.json` to the `.gitignore` file.
### 5. Update the `hardhat.config.js` file
Replace the contents of `hardhat.config.js` file with the following code. Make sure that the configuration for Core Testnet are set correctly.
```javascript
require("@nomicfoundation/hardhat-toolbox");
require("dotenv").config();
/** @type import('hardhat/config').HardhatUserConfig */
const PRIVATE_KEY = process.env.PRIVATE_KEY;
module.exports = {
solidity: "0.8.24",
defaultNetwork: "core_testnet",
networks: {
hardhat: {},
core_testnet: {
url: "https://rpc.test.btcs.network",
accounts: [PRIVATE_KEY],
chainId: 1115,
},
},
solidity: {
compilers: [
{
version: "0.8.24",
settings: {
evmVersion: "shanghai",
optimizer: {
enabled: true,
runs: 200,
},
},
},
],
},
paths: {
sources: "./contracts",
cache: "./cache",
artifacts: "./artifacts",
},
mocha: {
timeout: 20000,
},
};
```
Your folder structure should look something like this.
## Writing smart contracts
Awsome! Now lets jump in the exciting stuff and start writing our smart contracts. Go to the `contracts` folder and create a new file with the name `MyNFT.sol`.
But before writing any code, we need to install the `@openzeppelin/contracts` library to implement our NFT smart contracts. Download it by running this command:
```bash
yarn add @openzeppelin/contracts
```
After the download completes we can write our smart contract:
```js
// SPDX-License-Identifier: UNLICENSED
pragma solidity ^0.8.24;
import "@openzeppelin/contracts/token/ERC721/ERC721.sol";
import "@openzeppelin/contracts/token/ERC721/extensions/ERC721URIStorage.sol";
import "@openzeppelin/contracts/access/Ownable.sol";
contract Nft is ERC721, ERC721URIStorage, Ownable {
uint256 private _nextTokenId;
constructor() ERC721("MyNFT", "MYN") Ownable(msg.sender) {}
function safeMint(address to, string memory uri) public {
uint256 tokenId = _nextTokenId++;
_safeMint(to, tokenId);
_setTokenURI(tokenId, uri);
}
// The following functions are overrides required by Solidity.
function tokenURI(
uint256 tokenId
) public view override(ERC721, ERC721URIStorage) returns (string memory) {
return super.tokenURI(tokenId);
}
function supportsInterface(
bytes4 interfaceId
) public view override(ERC721, ERC721URIStorage) returns (bool) {
return super.supportsInterface(interfaceId);
}
}
```
In this code, we
- Import the `ERC721`, `ERC721URIStorage`, and `Ownable` classes from the openzeppelin/contracts library for creating a new NFT smart contract.
- Initialize a private state variable `_nextTokenId` to store the ID of the NFT.
- The constructor initializes the ERC721 contract with a name and symbol, and sets up the `Ownable` contract with the owner's address to restrict NFT minting to the owner.
- The `safeMint` function mints a new NFT, taking the recipient's address and the NFT's URI as arguments.
- The `tokenURI` and `supportsInterface` functions override required methods from `ERC721` and `ERC721URIStorage`.
In the `safeMint` function, we
- Increment the `_nextTokenId` variable to get the next token ID.
- Mint the NFT to the user using the `_safeMint` function.
- Set the URI of the NFT using the `_setTokenURI` function. The uri is the metadata of the NFT, which holds the image, name, and other details of the NFT.
## Compiling and Deploying the Smart Contract
Great, Now run the following command to complie the contract
```bash
yarn hardhat compile
```
If the compilation is successful, you should see something like this:
Now let us deploy the smart contract to the Core Testnet. For this, create a new folder in your root directory and name it `scripts`. Inside the `scripts` folder, create a new file named `deploy.js` and write the following code:
```js
const { ethers } = require("hardhat");
async function main() {
const [deployer] = await ethers.getSigners();
console.log("Deploying contracts with the account:", deployer.address);
const MyNFT = await ethers.getContractFactory("MyNFT");
const myNft = await MyNFT.deploy();
console.log("Token address:", await myNft.getAddress());
}
main()
.then(() => process.exit(0))
.catch((error) => {
console.error(error);
process.exit(1);
});
```
Make sure your metamask wallet has tCORE testnet tokens to deploy the contract. If not, visit the [Core Faucet](https://scan.test2.btcs.network/faucet) to get some testnet CORE tokens.
Great! Now run the following command in the root directory of your project to deploy the smart contract:
```bash
yarn hardhat run scripts/deploy.js
```
If the deployment is successful, you should see the address of the deployed contract in the console.
Make sure to save this address as we will need it later to interact with the smart contract.
## Building the Frontend
Awsome! We have deployed our smart contract to the Core Testnet. Now let's build the frontend of our DApp. We will use **Vite** and **React** to build our frontend. Go to the root directory of your project and run the following command:
```bash
yarn create vite frontend
```
Select **React** from the `Select a framework` option and **Javascript** from `Select a variant` option.
Now we will use the **Ethers.js** library to interact with our smart contracts. Install it in the frontend directory.
```bash
yarn add ethers
```
To interact with the smart contract, we also need the ABI (Application Binary Interface) along with address of the deployed contract. We can get the ABI from the `artifacts` folder in the root directory of the project. Create a new directory in the `src` folder, name it `abis` and create a new file `MyNFTAbi.json` . Now copy the ABI of the `MyNFT` contract and paste it in the `MyNFTAbi.json` file.
Excellent, now let's write code to connect our metamask wallet in the `App.jsx` file.
```javascript
import { useEffect, useState } from "react";
import { ethers } from "ethers";
import MyNFTAbi from "./abis/MyNFTAbi.json";
import "./App.css";
function App() {
const [walletAddress, setWalletAddress] = useState();
const [provider, setProvider] = useState();
const [signer, setSigner] = useState();
const contractAddress = "0x984eE96FE316006533c0BB78c97e3A02E41c7759"; // Replace contract address
const abi = MyNFTAbi.abi;
async function connectWallet() {
const { ethereum } = window;
if (!ethereum) {
alert("Please install MetaMask!");
return;
}
try {
const provider = new ethers.BrowserProvider(ethereum);
const [account] = await ethereum.request({
method: "eth_requestAccounts",
});
const signer = provider.getSigner();
setProvider(provider);
setSigner(signer);
setWalletAddress(account);
} catch (error) {
console.log("Error fetching network:", error);
}
}
useEffect(() => {
connectWallet();
}, []);
return (
<>
NFT Minting Dapp
{walletAddress ? (
Connected Address: {walletAddress}
) : (
)}
);
}
export default App;
```
Now run `yarn dev` command in the frontend directory, open the app in your browser on `http://localhost:5173`. You should see your metamaks wallet prompt you to connect to the website.
Make sure to connect that account only which you have used to deploy the contract. Since we have used the `Ownable` class in our contract, we will face errors if we try to mint the NFT in other accounts. By clicking `Next` and `Confirm`, our wallet will be connected to the website and we will see our address on the screen.
Wonderful! Now we will write code to show the nft image and mint it in our wallet.
We will also add code to show our NFT image and button to mint in our wallet
```javascript
const nftImage = "https://raw.githubusercontent.com/GM-11/NFT_Minting_Tutorial_Core/main/assets/nft.png"
const nftUri = "https://raw.githubusercontent.com/GM-11/NFT_Minting_Tutorial_Core/main/assets/metadata.json"
```
For this tutorial, you can copy these links as it is.
```javascript
NFT Minting Dapp
;
{
walletAddress ? (
Connected Address: {walletAddress}
) : (
);
}
```
Now our app will look something like this
Now let's make a function to mint our NFT in our MetaMask wallet.
```javascript
async function mintNFT() {
try {
const contract = new ethers.Contract(contractAddress, abi, signer);
const tx = await contract.safeMint(walletAddress, nftUri);
await tx.wait();
} catch (error) {
console.log("Error minting NFT:", error);
}
}
```
In this function, we are
- Creating a new instance of the contract using the contract address and ABI.
- Calling the `safeMint` function of the contract to mint the NFT. The `safeMint` function takes two arguments, the address of the user to whom the NFT will be minted and the URI of the NFT.
- Waiting for the transaction to be confirmed and then showing an alert that the NFT has been minted successfully.
Now let's call this function when the user clicks the mint button.
```javascript
```
When we click the `**Mint this NFT** button, our wallet should prompt us to sign the transaction
Click on **Confirm** to confirm the transaction.
Awsome! We have minted our first NFT on the Core Blockchain!🥳
But wait, why can't we see it?🤔
Well since this NFT is on the testnet, metamask automatically does not detect them. We need to import our NFT into our wallet.
Cick on `Import NFT` at the bottom. Add your contract address in the **Address** input field and 0 in the **Token Id** input field and click on **Import**.
Wonderful, now we can see our nft in the wallet!
## Conclusion
🎉🙌Congratulations, you have created a basic NFT Minting DApp on the Core Testnet.
================================================
FILE: 07-NFT Minitng dApp on Core/assets/metadata.json
================================================
{
"name": "Bored Ape",
"image" : "https://raw.githubusercontent.com/GM-11/NFT_Minting_Tutorial_Core/master/assets/nft.png",
"description": "A bored ape"
}
================================================
FILE: 07-NFT Minitng dApp on Core/contracts/Lock.sol
================================================
// SPDX-License-Identifier: UNLICENSED
pragma solidity ^0.8.24;
// Uncomment this line to use console.log
// import "hardhat/console.sol";
contract Lock {
uint public unlockTime;
address payable public owner;
event Withdrawal(uint amount, uint when);
constructor(uint _unlockTime) payable {
require(
block.timestamp < _unlockTime,
"Unlock time should be in the future"
);
unlockTime = _unlockTime;
owner = payable(msg.sender);
}
function withdraw() public {
// Uncomment this line, and the import of "hardhat/console.sol", to print a log in your terminal
// console.log("Unlock time is %o and block timestamp is %o", unlockTime, block.timestamp);
require(block.timestamp >= unlockTime, "You can't withdraw yet");
require(msg.sender == owner, "You aren't the owner");
emit Withdrawal(address(this).balance, block.timestamp);
owner.transfer(address(this).balance);
}
}
================================================
FILE: 07-NFT Minitng dApp on Core/contracts/MyNFT.sol
================================================
// SPDX-License-Identifier: MIT
pragma solidity ^0.8.24;
import "@openzeppelin/contracts/token/ERC721/ERC721.sol";
import "@openzeppelin/contracts/token/ERC721/extensions/ERC721URIStorage.sol";
import "@openzeppelin/contracts/access/Ownable.sol";
contract MyNFT is ERC721, ERC721URIStorage, Ownable {
uint256 private _nextTokenId;
constructor() ERC721("MyNFT", "MYN") Ownable(msg.sender) {}
function safeMint(address to, string memory uri) public {
uint256 tokenId = _nextTokenId++;
_safeMint(to, tokenId);
_setTokenURI(tokenId, uri);
}
// The following functions are overrides required by Solidity.
function tokenURI(
uint256 tokenId
) public view override(ERC721, ERC721URIStorage) returns (string memory) {
return super.tokenURI(tokenId);
}
function supportsInterface(
bytes4 interfaceId
) public view override(ERC721, ERC721URIStorage) returns (bool) {
return super.supportsInterface(interfaceId);
}
}
================================================
FILE: 07-NFT Minitng dApp on Core/frontend/.gitignore
================================================
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
node_modules
dist
dist-ssr
*.local
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
================================================
FILE: 07-NFT Minitng dApp on Core/frontend/README.md
================================================
# React + Vite
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
Currently, two official plugins are available:
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
================================================
FILE: 07-NFT Minitng dApp on Core/frontend/index.html
================================================
Vite + React
================================================
FILE: 07-NFT Minitng dApp on Core/frontend/package.json
================================================
{
"name": "frontend",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
"preview": "vite preview"
},
"dependencies": {
"ethers": "6.13.2",
"react": "18.3.1",
"react-dom": "18.3.1"
},
"devDependencies": {
"@types/react": "18.3.3",
"@types/react-dom": "18.3.0",
"@vitejs/plugin-react": "4.3.1",
"eslint": "8.57.0",
"eslint-plugin-react": "7.34.3",
"eslint-plugin-react-hooks": "4.6.2",
"eslint-plugin-react-refresh": "0.4.7",
"vite": "5.3.4"
}
}
================================================
FILE: 07-NFT Minitng dApp on Core/frontend/src/App.css
================================================
================================================
FILE: 07-NFT Minitng dApp on Core/frontend/src/App.jsx
================================================
import { useEffect, useState } from "react";
import { ethers } from "ethers";
import MyNFTAbi from "./abis/MyNFTAbi.json";
import core_logo from "./assets/core-logo.png";
import "./App.css";
function App() {
const [walletAddress, setWalletAddress] = useState();
const [provider, setProvider] = useState();
const [signer, setSigner] = useState();
const contractAddress = "0x8c546a571Ed23c32B7355E5C814589B6F627737D";
const abi = MyNFTAbi.abi;
const nftImage =
"https://raw.githubusercontent.com/GM-11/NFT_Minting_Tutorial/master/assets/nft.png";
const nftUri =
"https://raw.githubusercontent.com/GM-11/NFT_Minting_Tutorial/master/assets/metadata.json";
async function connectWallet() {
const { ethereum } = window;
if (!ethereum) {
alert("Please install MetaMask!");
return;
}
try {
const provider = new ethers.BrowserProvider(ethereum);
const [account] = await ethereum.request({
method: "eth_requestAccounts",
});
const signer = await provider.getSigner();
setProvider(provider);
setSigner(signer);
setWalletAddress(account);
} catch (error) {
console.log("Error fetching network:", error);
}
}
useEffect(() => {
connectWallet();
}, []);
async function mintNFT() {
try {
const contract = new ethers.Contract(contractAddress, abi, signer);
const tx = await contract.safeMint(walletAddress, nftUri);
await tx.wait();
alert("NFT has been minted successfully")
} catch (error) {
console.log("Error minting NFT:", error);
}
}
return (
setGuess(e.target.value)}
placeholder="Enter your guess"
className="flex-grow"
/>
)}
)
}
================================================
FILE: 08-Guess-Game/Frontend/components.json
================================================
{
"$schema": "https://ui.shadcn.com/schema.json",
"style": "new-york",
"rsc": true,
"tsx": true,
"tailwind": {
"config": "tailwind.config.ts",
"css": "app/globals.css",
"baseColor": "zinc",
"cssVariables": true,
"prefix": ""
},
"aliases": {
"components": "@/components",
"utils": "@/lib/utils",
"ui": "@/components/ui",
"lib": "@/lib",
"hooks": "@/hooks"
},
"iconLibrary": "lucide"
}
================================================
FILE: 08-Guess-Game/Frontend/lib/utils.ts
================================================
import { clsx, type ClassValue } from "clsx"
import { twMerge } from "tailwind-merge"
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs))
}
================================================
FILE: 08-Guess-Game/Frontend/next.config.ts
================================================
import type { NextConfig } from "next";
const nextConfig: NextConfig = {
/* config options here */
};
export default nextConfig;
================================================
FILE: 08-Guess-Game/Frontend/package.json
================================================
{
"name": "reusable",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"@radix-ui/react-slot": "1.1.2",
"class-variance-authority": "0.7.0",
"clsx": "2.1.1",
"ethers": "6.13.5",
"lucide-react": "0.454.0",
"next": "15.0.2",
"react": "18.3.1",
"react-dom": "18.3.1",
"tailwind-merge": "2.5.4",
"tailwindcss-animate": "1.0.7"
},
"devDependencies": {
"@types/node": "^20",
"@types/react": "18.3.3",
"@types/react-dom": "18.3.0",
"eslint": "8.57.0",
"eslint-config-next": "15.0.2",
"postcss": "^8",
"tailwindcss": "^3.4.1",
"typescript": "^5"
}
}
================================================
FILE: 08-Guess-Game/Frontend/postcss.config.mjs
================================================
/** @type {import('postcss-load-config').Config} */
const config = {
plugins: {
tailwindcss: {},
},
};
export default config;
================================================
FILE: 08-Guess-Game/Frontend/tailwind.config.ts
================================================
import type { Config } from "tailwindcss";
const config: Config = {
darkMode: ["class"],
content: [
"./pages/**/*.{js,ts,jsx,tsx,mdx}",
"./components/**/*.{js,ts,jsx,tsx,mdx}",
"./app/**/*.{js,ts,jsx,tsx,mdx}",
],
theme: {
extend: {
colors: {
background: 'hsl(var(--background))',
foreground: 'hsl(var(--foreground))',
card: {
DEFAULT: 'hsl(var(--card))',
foreground: 'hsl(var(--card-foreground))'
},
popover: {
DEFAULT: 'hsl(var(--popover))',
foreground: 'hsl(var(--popover-foreground))'
},
primary: {
DEFAULT: 'hsl(var(--primary))',
foreground: 'hsl(var(--primary-foreground))'
},
secondary: {
DEFAULT: 'hsl(var(--secondary))',
foreground: 'hsl(var(--secondary-foreground))'
},
muted: {
DEFAULT: 'hsl(var(--muted))',
foreground: 'hsl(var(--muted-foreground))'
},
accent: {
DEFAULT: 'hsl(var(--accent))',
foreground: 'hsl(var(--accent-foreground))'
},
destructive: {
DEFAULT: 'hsl(var(--destructive))',
foreground: 'hsl(var(--destructive-foreground))'
},
border: 'hsl(var(--border))',
input: 'hsl(var(--input))',
ring: 'hsl(var(--ring))',
chart: {
'1': 'hsl(var(--chart-1))',
'2': 'hsl(var(--chart-2))',
'3': 'hsl(var(--chart-3))',
'4': 'hsl(var(--chart-4))',
'5': 'hsl(var(--chart-5))'
}
},
borderRadius: {
lg: 'var(--radius)',
md: 'calc(var(--radius) - 2px)',
sm: 'calc(var(--radius) - 4px)'
}
}
},
plugins: [require("tailwindcss-animate")],
};
export default config;
================================================
FILE: 08-Guess-Game/Frontend/tsconfig.json
================================================
{
"compilerOptions": {
"target": "ES2017",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"strict": true,
"noEmit": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "bundler",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve",
"incremental": true,
"plugins": [
{
"name": "next"
}
],
"paths": {
"@/*": ["./*"]
}
},
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
"exclude": ["node_modules"]
}
================================================
FILE: 08-Guess-Game/README.md
================================================
# Guess the Number Game on Core Blockchain
Welcome to the "Guess the Number" game! This decentralized application (dApp) allows players to guess a secret number on the Core blockchain. The first player to guess the correct number is rewarded with tokens.
## Table of Contents
- [Prerequisites](#prerequisites)
- [Project Structure](#project-structure)
- [Setup Instructions](#setup-instructions)
- [Running the Application](#running-the-application)
- [Interacting with the dApp](#interacting-with-the-dapp)
- [Smart Contract Overview](#smart-contract-overview)
- [Frontend Overview](#frontend-overview)
- [Contributing](#contributing)
- [License](#license)
## Prerequisites
Before you begin, ensure you have the following installed:
- [Node.js](https://nodejs.org/) (v14 or later)
- [npm](https://www.npmjs.com/) or [Yarn](https://yarnpkg.com/)
- [MetaMask](https://metamask.io/) browser extension
- Basic understanding of Ethereum smart contracts and React
## Project Structure
The repository is organized as follows:
- `contracts/`: Contains the Solidity smart contract.
- `scripts/`: Deployment scripts for the smart contract.
- `test/`: Test scripts for the smart contract.
- `frontend/`: React application for the game's frontend.
- `hardhat.config.js`: Configuration file for Hardhat.
## Setup Instructions
1. **Clone the Repository**
```bash
git clone https://github.com/coredao-org/dapp-tutorial.git
cd dapp-tutorial/08-Guess-Game
```
2. **Install Dependencies**
Navigate to the root directory and install the necessary packages:
```bash
npm install
```
Then, navigate to the `frontend` directory and install its dependencies:
```bash
cd frontend
npm install
```
## Running the Application
1. **Compile the Smart Contract**
Return to the root directory and compile the contract:
```bash
cd ..
npx hardhat compile
```
2. **Deploy the Smart Contract**
Deploy the contract to the Core blockchain testnet:
```bash
npx hardhat run scripts/deploy.js --network coreTestnet
```
Ensure you have configured the `coreTestnet` network in your `hardhat.config.js` with the appropriate RPC URL and account details.
3. **Start the Frontend Application**
Navigate back to the `frontend` directory and start the React application:
```bash
cd frontend
npm run dev
```
The application will be available at `http://localhost:3000`.
## Interacting with the dApp
1. **Connect Wallet**
- Open the application in your browser.
- Click on the "Connect Wallet" button.
- Approve the connection in your MetaMask extension.
2. **Make a Guess**
- Enter a number between 1 and 100 in the input field.
- Click the "Guess" button.
- The application will inform you if your guess is too high, too low, or correct.
- Your number of attempts will be displayed.
3. **Reset the Game**
- Click the "New Game" button to reset the game and start over.
## Smart Contract Overview
The smart contract is written in Solidity and is located in the `contracts` directory. It manages the game's logic, including:
- Storing the secret number.
- Tracking the number of attempts by each player.
- Rewarding the first player who guesses the correct number.
## Frontend Overview
The frontend is built with React and is located in the `frontend` directory. It interacts with the smart contract using the ethers.js library and provides a user-friendly interface for players.
## Contributing
Contributions are welcome! Please fork the repository and submit a pull request with your changes.
================================================
FILE: 08-Guess-Game/contracts/GuessTheNumber.sol
================================================
// SPDX-License-Identifier: MIT
pragma solidity ^0.8.19;
import "@openzeppelin/contracts/access/Ownable.sol";
import "@openzeppelin/contracts/token/ERC20/IERC20.sol";
contract GuessTheNumber is Ownable {
uint256 public secretNumber;
address public lastWinner;
mapping(address => uint256) public attempts;
IERC20 public rewardToken;
uint256 public rewardAmount;
event GameStarted(uint256 blockNumber);
event GuessMade(address indexed player, uint256 guess, string message);
event GameWon(address indexed winner, uint256 attempts, uint256 reward);
constructor(address _rewardToken, uint256 _rewardAmount) Ownable(msg.sender) {
rewardToken = IERC20(_rewardToken);
rewardAmount = _rewardAmount;
resetGame();
}
function resetGame() public {
// Generate random number using blockhash and timestamp
secretNumber = uint256(keccak256(abi.encodePacked(blockhash(block.number - 1), block.timestamp))) % 100 + 1;
attempts[msg.sender] = 0;
emit GameStarted(block.number);
}
function makeGuess(uint256 _guess) public {
require(_guess >= 1 && _guess <= 100, "Guess must be between 1 and 100");
attempts[msg.sender]++;
if (_guess == secretNumber) {
lastWinner = msg.sender;
// Reward the winner (if the contract has enough tokens)
if (rewardToken.balanceOf(address(this)) >= rewardAmount) {
rewardToken.transfer(msg.sender, rewardAmount);
}
emit GameWon(msg.sender, attempts[msg.sender], rewardAmount);
resetGame();
} else if (_guess < secretNumber) {
emit GuessMade(msg.sender, _guess, "Too low! Try a higher number.");
} else {
emit GuessMade(msg.sender, _guess, "Too high! Try a lower number.");
}
}
// Owner can set new reward amount
function setReward(uint256 _newAmount) external onlyOwner {
rewardAmount = _newAmount;
}
// Deposit ERC-20 tokens to fund rewards
function depositRewards(uint256 amount) external {
require(rewardToken.transferFrom(msg.sender, address(this), amount), "Transfer failed");
}
// Withdraw ERC-20 tokens (only owner)
function withdrawTokens(uint256 amount) external onlyOwner {
require(rewardToken.transfer(msg.sender, amount), "Transfer failed");
}
function secret() public view returns (uint256) {
return secretNumber;
}
function getAttempts(address _playerAddress) public view returns (uint256) {
return attempts[_playerAddress];
}
}
================================================
FILE: 08-Guess-Game/contracts/GuessToken.sol
================================================
// SPDX-License-Identifier: MIT
// Compatible with OpenZeppelin Contracts ^5.0.0
pragma solidity ^0.8.22;
import {ERC20} from "@openzeppelin/contracts/token/ERC20/ERC20.sol";
contract GuessToken is ERC20 {
constructor() ERC20("GuessToken", "GTK") {}
function mint(address gameAddress) public {
_mint(gameAddress, 100000 * 10 ** 18);
}
}
================================================
FILE: 08-Guess-Game/hardhat.config.js
================================================
require("@nomicfoundation/hardhat-toolbox");
require("dotenv").config();
/** @type import('hardhat/config').HardhatUserConfig */
const PRIVATE_KEY = process.env.PRIVATE_KEY;
module.exports = {
solidity: "0.8.24",
networks: {
localhost: {
url: "http://127.0.0.1:8545/",
// accounts: Thanks hardhat!
chainId: 31337,
allowUnlimitedContractSize: true,
},
coreTestnet: {
url: 'https://rpc.test2.btcs.network/',
accounts: [PRIVATE_KEY],
chainId: 1114,
},
},
};
================================================
FILE: 08-Guess-Game/ignition/modules/Lock.js
================================================
// This setup uses Hardhat Ignition to manage smart contract deployments.
// Learn more about it at https://hardhat.org/ignition
const { buildModule } = require("@nomicfoundation/hardhat-ignition/modules");
const JAN_1ST_2030 = 1893456000;
const ONE_GWEI = 1_000_000_000n;
module.exports = buildModule("LockModule", (m) => {
const unlockTime = m.getParameter("unlockTime", JAN_1ST_2030);
const lockedAmount = m.getParameter("lockedAmount", ONE_GWEI);
const lock = m.contract("Lock", [unlockTime], {
value: lockedAmount,
});
return { lock };
});
================================================
FILE: 08-Guess-Game/package.json
================================================
{
"name": "reuse",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"description": "",
"devDependencies": {
"@nomicfoundation/hardhat-toolbox": "5.0.0",
"hardhat": "2.22.15"
},
"dependencies": {
"@openzeppelin/contracts": "5.2.0",
"dotenv": "16.4.7"
}
}
================================================
FILE: 08-Guess-Game/scripts/deploy-guess-game.js
================================================
const hre = require("hardhat");
async function main() {
const GuessTokenContract = await hre.ethers.getContractFactory("GuessToken");
const guessTokenContract = await GuessTokenContract.deploy();
const GuessGameContract = await hre.ethers.getContractFactory("GuessTheNumber");
const guessGameContract = await GuessGameContract.deploy(guessTokenContract.target, ethers.parseEther("2"));
await guessTokenContract.mint(guessGameContract.target)
const balance = await guessTokenContract.balanceOf(guessGameContract.target);
console.log(balance);
console.log("Guess Token contract deployed to:", guessTokenContract.target);
console.log("Guess game contract deployed to:", guessGameContract.target);
}
// We recommend this pattern to be able to use async/await everywhere
// and properly handle errors.
main().catch((error) => {
console.error(error);
process.exitCode = 1;
});
// Telos: Support contract deployed to: 0x5Ac64F5DA22B25559C7D7522b4B2BB7e2012F382
================================================
FILE: 08-Guess-Game/test/Lock.js
================================================
const {
time,
loadFixture,
} = require("@nomicfoundation/hardhat-toolbox/network-helpers");
const { anyValue } = require("@nomicfoundation/hardhat-chai-matchers/withArgs");
const { expect } = require("chai");
describe("Lock", function () {
// We define a fixture to reuse the same setup in every test.
// We use loadFixture to run this setup once, snapshot that state,
// and reset Hardhat Network to that snapshot in every test.
async function deployOneYearLockFixture() {
const ONE_YEAR_IN_SECS = 365 * 24 * 60 * 60;
const ONE_GWEI = 1_000_000_000;
const lockedAmount = ONE_GWEI;
const unlockTime = (await time.latest()) + ONE_YEAR_IN_SECS;
// Contracts are deployed using the first signer/account by default
const [owner, otherAccount] = await ethers.getSigners();
const Lock = await ethers.getContractFactory("Lock");
const lock = await Lock.deploy(unlockTime, { value: lockedAmount });
return { lock, unlockTime, lockedAmount, owner, otherAccount };
}
describe("Deployment", function () {
it("Should set the right unlockTime", async function () {
const { lock, unlockTime } = await loadFixture(deployOneYearLockFixture);
expect(await lock.unlockTime()).to.equal(unlockTime);
});
it("Should set the right owner", async function () {
const { lock, owner } = await loadFixture(deployOneYearLockFixture);
expect(await lock.owner()).to.equal(owner.address);
});
it("Should receive and store the funds to lock", async function () {
const { lock, lockedAmount } = await loadFixture(
deployOneYearLockFixture
);
expect(await ethers.provider.getBalance(lock.target)).to.equal(
lockedAmount
);
});
it("Should fail if the unlockTime is not in the future", async function () {
// We don't use the fixture here because we want a different deployment
const latestTime = await time.latest();
const Lock = await ethers.getContractFactory("Lock");
await expect(Lock.deploy(latestTime, { value: 1 })).to.be.revertedWith(
"Unlock time should be in the future"
);
});
});
describe("Withdrawals", function () {
describe("Validations", function () {
it("Should revert with the right error if called too soon", async function () {
const { lock } = await loadFixture(deployOneYearLockFixture);
await expect(lock.withdraw()).to.be.revertedWith(
"You can't withdraw yet"
);
});
it("Should revert with the right error if called from another account", async function () {
const { lock, unlockTime, otherAccount } = await loadFixture(
deployOneYearLockFixture
);
// We can increase the time in Hardhat Network
await time.increaseTo(unlockTime);
// We use lock.connect() to send a transaction from another account
await expect(lock.connect(otherAccount).withdraw()).to.be.revertedWith(
"You aren't the owner"
);
});
it("Shouldn't fail if the unlockTime has arrived and the owner calls it", async function () {
const { lock, unlockTime } = await loadFixture(
deployOneYearLockFixture
);
// Transactions are sent using the first signer by default
await time.increaseTo(unlockTime);
await expect(lock.withdraw()).not.to.be.reverted;
});
});
describe("Events", function () {
it("Should emit an event on withdrawals", async function () {
const { lock, unlockTime, lockedAmount } = await loadFixture(
deployOneYearLockFixture
);
await time.increaseTo(unlockTime);
await expect(lock.withdraw())
.to.emit(lock, "Withdrawal")
.withArgs(lockedAmount, anyValue); // We accept any value as `when` arg
});
});
describe("Transfers", function () {
it("Should transfer the funds to the owner", async function () {
const { lock, unlockTime, lockedAmount, owner } = await loadFixture(
deployOneYearLockFixture
);
await time.increaseTo(unlockTime);
await expect(lock.withdraw()).to.changeEtherBalances(
[owner, lock],
[lockedAmount, -lockedAmount]
);
});
});
});
});
================================================
FILE: 09-Token-swap-Dapp/.gitignore
================================================
node_modules
.env
# Hardhat files
/cache
/artifacts
# TypeChain files
/typechain
/typechain-types
# solidity-coverage files
/coverage
/coverage.json
# Hardhat Ignition default folder for deployments against a local node
ignition/modules/*
================================================
FILE: 09-Token-swap-Dapp/README.md
================================================
# Building a Token Swapping Dapp on Core
## What are we building
In this tutorial, we will guide you through building a simple token swapping decentralized application (dApp) on the Core blockchain. By the end of this guide, you will have a fully functional dApp that allows users to seamlessly swap between native tokens and ERC20 tokens directly on the Core Testnet.
This dApp will provide functionality for two types of swaps:
ERC20-to-ERC20 swaps: Users will be able to exchange custom ERC20 tokens, such as `Token A (USDC)` for `Token B (USDT)` and vice versa.
Native-to-ERC20 swaps: Users will also have the ability to swap `Core's native token (CORE)` with ERC20 tokens like `USDT` or `USDC`.
## Learning Takeaways
- Smart Contract Development and deployment
- Building a frontend for integration with smart contracts
- Using Ethers.js library for communicating with smart contracts
- Integrating Metamask for secure user transactions and interactions
- Read and Write data to/from smart contracts
## Software Prerequisites
- [Git](https://git-scm.com/) v2.44.0
- [Node.js](https://nodejs.org/en) v20.11.1
- [npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm) v10.2.4
- [Hardhat](https://hardhat.org/hardhat-runner/docs/getting-started#installation) v2.22.6
- [MetaMask Web Wallet Extension](https://metamask.io/download/)Git v2.44.0
- **Core Testnet Configuration:** Configure MetaMask to connect to the Core Testnet. Refer [here](https://docs.coredao.org/docs/Dev-Guide/core-testnet-wallet-config#adding-core-testnet-to-metamask) for more details.
- **Network Name:** Core Testnet
- **New RPC URL:** https://rpc.test2.btcs.network
- **Chain ID:** 1115
- **Currency Symbol:** CORE
- **Core Faucet:** To get test CORE tokens for transactions, visit the [Core Faucet](https://scan.test2.btcs.network/faucet), refer [here]
(https://docs.coredao.org/docs/Dev-Guide/core-faucet) for more details.
## Setting up Dev Environment
### 1. Initialize the Project
```
mkdir swap-token
cd swap-token
npm init -y
npm install --save-dev hardhat
npx hardhat init
```
### 2. Install and Configure MetaMask
- Install and configure MetaMask Chrome Extension to use with Core Testnet.
- Refer [here](https://docs.coredao.org/docs/Dev-Guide/core-testnet-wallet-config) for a detailed guide.
### 3. Create a Secret File
- Create a `.env` file in the root folder and store the private key of your MetaMask wallet in it.
```bash
PRIVATE_KEY =
```
> _Do not forget to add this file to the `.gitignore` file in the root folder of your project so that you don't accidentally check your private keys/secret phrases into a public repository. Make sure you keep this file in an absolutely safe place!_
### 4. Update .gitignore
- Update your .gitignore file to ensure that your secret.json file and other sensitive files are not committed to version control.
- Make sure to add `secret.json` to the `.gitignore` file.
```
node_modules
.env
secret.json
# Hardhat files
/cache
/artifacts
# TypeChain files
/typechain
/typechain-types
# solidity-coverage files
/coverage
/coverage.json
# Hardhat Ignition default folder for deployments against a local node
ignition/deployments/chain-31337
```
### 5. Update Hardhat.config
Replace the contents of `hardhat.config.js` with the following configuration. Ensure that the network settings are configured correctly for Core Testnet.
```
require("@nomicfoundation/hardhat-toolbox");
require("dotenv").config();
/** @type import('hardhat/config').HardhatUserConfig */
const PRIVATE_KEY = process.env.PRIVATE_KEY;
module.exports = {
defaultNetwork: "hardhat",
networks: {
hardhat: {},
core_testnet: {
url: "https://rpc.test2.btcs.network",
accounts: [PRIVATE_KEY],
chainId: 1114,
},
},
solidity: {
compilers: [
{
version: '0.8.24',
settings: {
evmVersion: 'paris',
optimizer: {
enabled: true,
runs: 200,
},
},
},
],
},
paths: {
sources: './contracts',
cache: './cache',
artifacts: './artifacts',
},
mocha: {
timeout: 20000,
},
};
```
## Writing Smart Contracts
In the `contracts` folder, create the following smart contracts.
### ERC20 Token Contract
- For this dapp, we create a custom ERC20 Token contract
- Create a `Token.sol` file in contracts folder and udpate its contents with the following.
```js
// SPDX-License-Identifier: MIT
pragma solidity ^0.8.24;
import "@openzeppelin/contracts/token/ERC20/ERC20.sol";
import "@openzeppelin/contracts/access/Ownable.sol";
contract Token is ERC20, Ownable {
constructor(string memory _name, string memory _symbol)
ERC20(_name, _symbol)
Ownable(msg.sender)
{
_mint(msg.sender, 500 ether);
}
function mint(address to, uint256 amount) public onlyOwner {
_mint(to, amount);
}
}
```
### Swap Contract
- Create a `Swap.sol` file in contracts folder and udpate its contents with the following.
```js
// SPDX-License-Identifier: MIT
pragma solidity ^0.8.24;
import "@openzeppelin/contracts/token/ERC20/IERC20.sol";
import "@openzeppelin/contracts/access/Ownable.sol";
contract Swap is Ownable {
address public feeCollector; // Address to collect fees
uint32 public feePercent; // Fee percentage (in basis points, e.g., 50 = 0.5%)
event TokensSwapped(
address indexed user,
address indexed tokenA,
address indexed tokenB,
uint256 amountIn,
uint256 amountOut,
uint256 fee
);
constructor(uint32 _feePercent) Ownable(msg.sender){
require(_feePercent <= 10000, "Fee too high");
feeCollector = msg.sender;
feePercent = _feePercent;
}
// Swap ERC20 tokens
function swapTokens(
address tokenA,
address tokenB,
uint256 amountIn
) external {
require(amountIn > 0, "AmountIn must be greater than 0");
// Calculate fee
uint256 fee = (amountIn * feePercent) / 10000;
uint256 amountOut = amountIn - fee;
require(IERC20(tokenB).balanceOf(address(this)) >= amountOut, "Insufficient tokenB for swap");
// Transfer tokenA from sender to this contract
IERC20(tokenA).transferFrom(msg.sender, address(this), amountIn);
// Send fee to fee collector
if (fee > 0) {
IERC20(tokenA).transfer(feeCollector, fee);
}
// Transfer tokenB to the receiver
IERC20(tokenB).transfer(msg.sender, amountOut);
// Emit event for transparency
emit TokensSwapped(msg.sender, tokenA, tokenB, amountIn, amountOut, fee);
}
// Swap native token (ETH) for ERC20 token
function swapNativeForToken(address tokenB) external payable {
require(msg.value > 0, "Amount must be greater than 0");
uint256 amountIn = msg.value;
uint256 fee = (amountIn * feePercent) / 10000;
uint256 amountOut = amountIn - fee;
require(IERC20(tokenB).balanceOf(address(this)) >= amountOut, "Insufficient token for swap");
// Send fee to fee collector in native tokens
if (fee > 0) {
payable(feeCollector).transfer(fee);
}
// Transfer tokenB to the user
IERC20(tokenB).transfer(msg.sender, amountOut);
// Emit event for transparency
emit TokensSwapped(msg.sender, address(0), tokenB, amountIn, amountOut, fee);
}
// Withdraw ERC20 tokens from the contract
function withdrawTokens(address token, uint256 amount) external onlyOwner {
require(IERC20(token).balanceOf(address(this)) >= amount, "Insufficient token balance");
IERC20(token).transfer(msg.sender, amount);
}
// Withdraw native tokens from the contract
function withdrawNative(uint256 amount) external onlyOwner {
require(address(this).balance >= amount, "Insufficient ETH balance");
payable(msg.sender).transfer(amount);
}
// Updates the fee percentage
function updateFee(uint32 newFeePercent) public onlyOwner {
require(newFeePercent <= 10000, "Fee too high");
feePercent = newFeePercent;
}
}
```
#### Explanation
The Swap.sol contract handles the swapping of tokens between ERC20 tokens and the native token (CORE) on the Core blockchain. Here's how it works:
##### State Variables
- **feeCollector:** This stores the address where the swap fees will be sent.
- **feePercent:** This determines the percentage of the fee deducted during each swap (e.g., 50 = 0.5%).
##### Functions
1. **swapTokens(address tokenA, address tokenB, uint256 amountIn)**:
- Allows users to swap one ERC20 token (tokenA) for another ERC20 token (tokenB).
- Fee is deducted from amountIn, and the remaining amount is transferred to the user.
- Emits the TokensSwapped event.
2. **swapNativeForToken(address tokenB)**:
- Allows users to swap the native blockchain token (CORE) for an ERC20 token (tokenB).
- Accepts a msg.value in native tokens, deducts a fee, and transfers the remaining tokenB to the user.
- Emits a TokensSwapped event.
3. **withdrawTokens(address token, uint256 amount)**: Allows the contract owner to withdraw any ERC20 tokens stored in the contract.
4. **withdrawNative(uint256 amount)**: Allows the owner to withdraw native tokens stored in the contract.
5. **updateFee(uint32 newFeePercent)**: Updates the fee percentage for the swaps, limited to a maximum of 10000 basis points (i.e., 100%).
## How the Swap Works:
1. Users provide the input token (tokenA) they want to swap and specify the token they want to receive (tokenB).
2. The contract calculates the fee, deducts it from the input amount, and transfers the output token (tokenB) to the user.
3. The fee is transferred to the fee collector (the contract owner by default).
## Compile and Deploy Smart Contracts
### Compiling Smart Contracts
To compile the smart contracts, run the command `npx hardhat compile`
### Deploying Smart Contracts
- Create a `scritps` folder in the root of your project.
- Create a file `deploy.js` in the `scripts` folder.
- Update the contents of the `deploy.js` file with the following:
```js
const { ethers } = require("hardhat");
async function main() {
const [deployer] = await ethers.getSigners();
console.log("Deploying contracts with the account:", deployer.address);
const ERC20 = await ethers.getContractFactory("Token");
const usdt = await ERC20.deploy("usdt", "USDT");
const usdc = await ERC20.deploy("usdc", "USDC");
const fee = 10;
const Swap = await ethers.getContractFactory("Swap");
const swap = await Swap.deploy(fee);
console.log("Contracts deployed:");
console.log("Swap Contract:", await swap.getAddress());
console.log("usdt Token:", await usdt.getAddress());
console.log("usdc Token:", await usdc.getAddress());
const swapContractAddr = await swap.getAddress();
await usdt.approve(swapContractAddr, ethers.parseEther("100"));
await usdt.transfer(swapContractAddr, ethers.parseEther("100"));
await usdc.approve(swapContractAddr, ethers.parseEther("100"));
await usdc.transfer(swapContractAddr, ethers.parseEther("100"));
}
main()
.then(() => process.exit(0))
.catch((error) => {
console.error(error);
process.exit(1);
});
```
- Make sure your MetaMask wallet has tCORE test tokens for the Core Testnet. Refer [here](https://docs.coredao.org/docs/Dev-Guide/core-faucet) for details on how to get tCORE tokens from Core Faucet.
- Run the following command from the root directory of your project, to deploy smart contracts on the Core blockchain.
```bash
npx hardhat run scripts/deploy.js
```
- If succesfully deployed, you will get the following output
- Save the addresses for the deployed contracts for use with the frontend.
## Interacting with Smart Contract through Frontend
⚡️ Let's create a frontend interface for interacting with the smart contract.
### Setting up frontend
- Create a simple react application using the following command
```bash
npx create-react-app frontend
cd frontend
```
- Install Dependencies, the Ethers.js library for communicating with the deployed smart contracts.
```bash
npm install --save-dev ethers@5.7.2
```
- Create a `contracts` folder inside the `frontend/src` folder.
```bash
mkdir contracts
```
Copy the ABIs in the form of `.json` files, of your deployed smart contracts, from `artifacts/contracts/Token.sol` and `artifacts/contracts/Swap.sol` directories into the `frontend/src/contracts` directory.
### Adding Frontend Fuctionality
- Update the `App.js` with the contents of the [App.js](./frontend/src/App.js) in the boilerplate repo.
- Update the `App.css` with the contents of the [App.css](./frontend/src/App.css) in the boilerplate repo.
### Key Implementation
The application's key blockchain logic is implemented in [App.js](./frontend/src/App.js)
1. **App.js (Connect Wallet)**: Line #41 onwards is the logic for connecting the application to the MetaMask wallet, allowing users to interact with the blockchain.
2. **App.js (Check Network)**: Line #28 is the logic for checking if the user is connected to the Core Testnet. It alerts the user if they are connected to the wrong network.
3. **App.js (Calculate Output Amount)** : Line #62 is the logic for calculating the output amount based on the input amount and the fee percentage applied during the token swap.
4. **App.js (Swap Tokens)**: Line #150 is the logic for executing the token swap. It handles both native token swaps and ERC-20 token swaps, including approval of tokens and transaction handling.
### Adding Smart Contract Details
- Paste this into Lines 11, 12, and 15 the addresses of the deployed contracts of USDT, USDC and Swap Contract Address.
```js
const tokenAddresses = {
CORE: "0x0000000000000000000000000000000000000000",
USDT: "0xdBb5e35236536d38239102596adcaA5626e27bE2",
USDC: "0x82fa6E5EDCE48bA4EBcA82dCDdec08d124d7Eed3",
};
const swapContractAddress = "0x8ac209ee5dfaC9c2D915f24edD34d4072059558b";
```
### Testing Locally
- From the `frontend` directory, run the command `npm run start`
- Make sure that your MetaMask wallet is correctly installed and switched to Core Testnet as described in our [Core Testnet user guide](https://docs.coredao.org/docs/Dev-Guide/core-testnet-wallet-config). You'll also need to connect your MetaMask wallet to the local site.
- Navigate to `http://localhost:3000/` in your browser.
#### Native to ERC-20 Token Transfer
- Click on `CORE` Input token and choose the output token `USDT` or `USDC`
- The Dapp automatically calculates the expected output amount based on the input amount, applying the defined fee percentage.
- After reviwing the swap Details, click on Swap and you need to confirm the transaction
- Once the transaction confirmed, you will see the swap successfull message and the balance has been updated
#### ERC20 to ERC-20 Token Transfer
- Click on `USDT` Input token and by default the output Amount will show `USDC`
- The Dapp automatically calculates the expected output amount based on the input amount, applying the defined fee percentage.
- After reviwing the swap Details, click on Swap and First you need to Approve and then confirm the transaction
- Once the transaction confirmed, you will see the swap successfull message
## 🎉 **Congratulations!**
You've just interacted with your deployed contract using your dApp's front end! You can build on the codebase by adding new UI components or more functionality to the Token Swap dapp.
================================================
FILE: 09-Token-swap-Dapp/contracts/Swap.sol
================================================
// SPDX-License-Identifier: MIT
pragma solidity ^0.8.24;
import "@openzeppelin/contracts/token/ERC20/IERC20.sol";
import "@openzeppelin/contracts/access/Ownable.sol";
contract Swap is Ownable {
address public feeCollector; // Address to collect fees
uint32 public feePercent; // Fee percentage (in basis points, e.g., 50 = 0.5%)
event TokensSwapped(
address indexed user,
address indexed tokenA,
address indexed tokenB,
uint256 amountIn,
uint256 amountOut,
uint256 fee
);
constructor(uint32 _feePercent) Ownable(msg.sender){
require(_feePercent <= 10000, "Fee too high");
feeCollector = msg.sender;
feePercent = _feePercent;
}
// Swap ERC20 tokens
function swapTokens(
address tokenA,
address tokenB,
uint256 amountIn
) external {
require(amountIn > 0, "AmountIn must be greater than 0");
// Calculate fee
uint256 fee = (amountIn * feePercent) / 10000;
uint256 amountOut = amountIn - fee;
require(IERC20(tokenB).balanceOf(address(this)) >= amountOut, "Insufficient tokenB for swap");
// Transfer tokenA from sender to this contract
IERC20(tokenA).transferFrom(msg.sender, address(this), amountIn);
// Send fee to fee collector
if (fee > 0) {
IERC20(tokenA).transfer(feeCollector, fee);
}
// Transfer tokenB to the receiver
IERC20(tokenB).transfer(msg.sender, amountOut);
// Emit event for transparency
emit TokensSwapped(msg.sender, tokenA, tokenB, amountIn, amountOut, fee);
}
// Swap native token (ETH) for ERC20 token
function swapNativeForToken(address tokenB) external payable {
require(msg.value > 0, "Amount must be greater than 0");
uint256 amountIn = msg.value;
uint256 fee = (amountIn * feePercent) / 10000;
uint256 amountOut = amountIn - fee;
require(IERC20(tokenB).balanceOf(address(this)) >= amountOut, "Insufficient token for swap");
// Send fee to fee collector in native tokens
if (fee > 0) {
payable(feeCollector).transfer(fee);
}
// Transfer tokenB to the user
IERC20(tokenB).transfer(msg.sender, amountOut);
// Emit event for transparency
emit TokensSwapped(msg.sender, address(0), tokenB, amountIn, amountOut, fee);
}
// Withdraw ERC20 tokens from the contract
function withdrawTokens(address token, uint256 amount) external onlyOwner {
require(IERC20(token).balanceOf(address(this)) >= amount, "Insufficient token balance");
IERC20(token).transfer(msg.sender, amount);
}
// Withdraw native tokens from the contract
function withdrawNative(uint256 amount) external onlyOwner {
require(address(this).balance >= amount, "Insufficient ETH balance");
payable(msg.sender).transfer(amount);
}
// Updates the fee percentage
function updateFee(uint32 newFeePercent) public onlyOwner {
require(newFeePercent <= 10000, "Fee too high");
feePercent = newFeePercent;
}
}
================================================
FILE: 09-Token-swap-Dapp/contracts/Token.sol
================================================
// SPDX-License-Identifier: MIT
pragma solidity ^0.8.24;
import "@openzeppelin/contracts/token/ERC20/ERC20.sol";
import "@openzeppelin/contracts/access/Ownable.sol";
contract Token is ERC20, Ownable {
constructor(string memory _name, string memory _symbol)
ERC20(_name, _symbol)
Ownable(msg.sender)
{
_mint(msg.sender, 500 ether);
}
function mint(address to, uint256 amount) public onlyOwner {
_mint(to, amount);
}
}
================================================
FILE: 09-Token-swap-Dapp/frontend/.gitignore
================================================
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
# dependencies
/node_modules
/.pnp
.pnp.js
# testing
/coverage
# production
/build
# misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local
npm-debug.log*
yarn-debug.log*
yarn-error.log*
================================================
FILE: 09-Token-swap-Dapp/frontend/README.md
================================================
# Getting Started with Create React App
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
## Available Scripts
In the project directory, you can run:
### `npm start`
Runs the app in the development mode.\
Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
The page will reload when you make changes.\
You may also see any lint errors in the console.
### `npm test`
Launches the test runner in the interactive watch mode.\
See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
### `npm run build`
Builds the app for production to the `build` folder.\
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.\
Your app is ready to be deployed!
See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
### `npm run eject`
**Note: this is a one-way operation. Once you `eject`, you can't go back!**
If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.
You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.
## Learn More
You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
To learn React, check out the [React documentation](https://reactjs.org/).
### Code Splitting
This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
### Analyzing the Bundle Size
This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
### Making a Progressive Web App
This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
### Advanced Configuration
This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
### Deployment
This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
### `npm run build` fails to minify
This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)
================================================
FILE: 09-Token-swap-Dapp/frontend/package.json
================================================
{
"name": "frontend",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "5.17.0",
"@testing-library/react": "13.4.0",
"@testing-library/user-event": "13.5.0",
"ethers": "5.7.2",
"lucide-react": "0.453.0",
"react": "18.3.1",
"react-dom": "18.3.1",
"react-scripts": "5.0.1",
"web-vitals": "2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
================================================
FILE: 09-Token-swap-Dapp/frontend/public/index.html
================================================
React App
================================================
FILE: 09-Token-swap-Dapp/frontend/public/manifest.json
================================================
{
"short_name": "React App",
"name": "Create React App Sample",
"icons": [
{
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
},
{
"src": "logo192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "logo512.png",
"type": "image/png",
"sizes": "512x512"
}
],
"start_url": ".",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}
================================================
FILE: 09-Token-swap-Dapp/frontend/public/robots.txt
================================================
# https://www.robotstxt.org/robotstxt.html
User-agent: *
Disallow:
================================================
FILE: 09-Token-swap-Dapp/frontend/src/App.css
================================================
/* App.css */
body {
margin: 0;
font-family: Arial, sans-serif;
background-color: #f4f4f9;
color: #333;
}
.App {
text-align: center;
padding: 20px;
position: relative; /* Ensure the App container is positioned relatively for absolute children */
}
.logo-container {
text-align: center;
margin-bottom: 20px;
}
.logo {
max-width: 150px; /* Adjust as needed for logo size */
}
.App-header {
background-color: #f8f9fa;
padding: 20px;
border-bottom: 2px solid #eaeaea;
position: relative; /* To position elements inside it */
margin-bottom: 100px; /* Space between header and content */
}
.App-header h1 {
margin: 0;
color: #ff6f00; /* Core Chain orange color */
}
.btn-primary {
background-color: #ff6f00; /* Core Chain orange color */
color: white;
border: none;
padding: 12px 20px;
font-size: 16px;
cursor: pointer;
border-radius: 5px;
width: 200px; /* Set a consistent width for all buttons */
height: 40px; /* Set a consistent height for all buttons */
display: inline-flex;
align-items: center;
justify-content: center;
text-align: center;
margin: 10px; /* Add margin to separate buttons */
}
.btn-primary:hover {
background-color: #e65c00; /* Darker orange for hover effect */
}
.input-field {
padding: 10px;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 5px;
width: 200px;
margin: 5px;
}
.input-field:focus {
border-color: #ff6f00;
outline: none;
}
.amount-ticker {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.amount-ticker p {
margin: 5px 20px;
font-size: 18px;
}
.stake-container,
.unstake-container {
margin: 20px 0;
}
.stake-container input,
.unstake-container input {
width: 200px;
}
.modal-btns {
display: flex;
justify-content: center;
gap: 10px;
}
.disconnect-btn {
position: absolute;
top: 20px;
right: 20px;
}
.swap-container {
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
}
.swap-box {
width: 350px;
padding: 20px;
border-radius: 10px;
border: 1px solid #ffa31a;
}
.swap-input {
margin-bottom: 20px;
}
.swap-options {
padding: 10px;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 5px;
width: 100px;
margin: 5px;
}
.input-row {
display: flex;
justify-content: space-between;
align-items: center;
}
.input-row select {
width: 40%;
padding: 10px;
margin-right: 10px;
background: #333;
color: white;
border: none;
border-radius: 5px;
}
.input-row input {
width: 60%;
padding: 10px;
background: #333;
color: white;
border: none;
border-radius: 5px;
}
.swap-arrow {
width: 20%;
padding: 10px;
background: #333;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
margin-bottom: 20px;
}
.swap-subtitle {
text-align: left;
color: #696868;
padding-bottom: 20px;
}
@media (max-width: 768px) {
.amount-ticker {
flex-direction: column;
align-items: flex-start;
}
.amount-ticker p {
margin: 5px 0;
}
.disconnect-btn {
position: relative;
top: auto;
right: auto;
}
}
================================================
FILE: 09-Token-swap-Dapp/frontend/src/App.js
================================================
import { useEffect, useState, useCallback } from "react";
import { ethers } from "ethers";
import "./App.css";
import TokenABI from "./contracts/Token.json";
import SwapABI from "./contracts/Swap.json";
import coreLogo from "./assets/core-logo.png";
// Replace these addresses with your actual token and swap contract addresses
const tokenAddresses = {
CORE: "0x0000000000000000000000000000000000000000",
USDT: "0xdBb5e35236536d38239102596adcaA5626e27bE2",
USDC: "0x82fa6E5EDCE48bA4EBcA82dCDdec08d124d7Eed3",
};
const swapContractAddress = "0x8ac209ee5dfaC9c2D915f24edD34d4072059558b"; // Add your swap contract address here
const tokens = ["CORE", "USDT", "USDC"];
const feePercentage = 0.5;
function App() {
const [inputToken, setInputToken] = useState("CORE");
const [outputToken, setOutputToken] = useState("USDT");
const [inputAmount, setInputAmount] = useState("");
const [outputAmount, setOutputAmount] = useState("0");
const [currentAccount, setCurrentAccount] = useState(null);
const [network, setNetwork] = useState("");
const [isSwapping, setIsSwapping] = useState(false);
// Check network
const checkNetwork = async () => {
const { ethereum } = window;
if (!ethereum) {
console.log("Ethereum object does not exist");
return;
}
try {
const provider = new ethers.providers.Web3Provider(ethereum);
const { chainId } = await provider.getNetwork();
if (chainId !== 1114) {
alert("Please connect to the Core Testnet");
} else {
setNetwork("Core Testnet");
}
} catch (error) {
console.error("Error fetching network:", error);
}
};
const connectWalletHandler = async () => {
const { ethereum } = window;
if (!ethereum) return alert("Please install MetaMask!");
const accounts = await ethereum.request({ method: "eth_requestAccounts" });
setCurrentAccount(accounts[0]);
};
// Calculate the output amount based on the input and fee
const calculateOutputAmount = useCallback(() => {
if (!inputAmount) {
setOutputAmount("0");
return;
}
const input = parseFloat(inputAmount);
const fee = (input * feePercentage) / 100;
const finalOutput = input - fee;
setOutputAmount(finalOutput.toFixed(6));
}, [inputAmount]);
const getOutputTokenOptions = () => {
const tokenPairs = {
USDT: ["USDC"],
USDC: ["USDT"],
};
return (
tokenPairs[inputToken] || tokens.filter((token) => token !== inputToken)
);
};
useEffect(() => {
checkNetwork();
calculateOutputAmount();
}, [inputToken, outputToken, inputAmount, calculateOutputAmount]);
const handleInputChange = (value) => {
if (/^\d*\.?\d*$/.test(value)) setInputAmount(value);
};
const handleTokenSwap = async () => {
if (!currentAccount) return alert("Please connect your wallet.");
try {
const { ethereum } = window;
if (!ethereum) return alert("Ethereum object doesn't exist!");
setIsSwapping(true);
const provider = new ethers.providers.Web3Provider(ethereum);
const signer = provider.getSigner();
const parsedInputAmount = ethers.utils.parseUnits(inputAmount, 18);
const swapContract = new ethers.Contract(
swapContractAddress,
SwapABI,
signer
);
if (inputToken === "CORE") {
// If input token is CORE (native token swap)
const txSwapNative = await swapContract.swapNativeForToken(
tokenAddresses[outputToken],
{ value: parsedInputAmount }
);
await txSwapNative.wait();
} else {
// Approve tokens for swap contract
const inputTokenAddress = tokenAddresses[inputToken];
const tokenContract = new ethers.Contract(
inputTokenAddress,
TokenABI,
signer
);
const txApprove = await tokenContract.approve(
swapContractAddress,
parsedInputAmount
);
await txApprove.wait();
// Perform the swap
const txSwap = await swapContract.swapTokens(
inputTokenAddress,
tokenAddresses[outputToken],
parsedInputAmount
);
await txSwap.wait();
}
alert("Swap successful!");
} catch (error) {
console.error("Swap failed:", error);
alert("Swap failed, check the console for details.");
} finally {
setIsSwapping(false);
setInputAmount("");
setOutputAmount("0");
}
};
const switchTokens = () => {
setInputToken(outputToken);
setOutputToken(inputToken);
setInputAmount("");
setOutputAmount("0");
};
return (
)}
{/* Mint Button */}
{selectedToken && (
)}
{/* Transaction Info */}
{selectedToken && (
ℹ
Transaction Details
• Tokens will be minted directly to your connected wallet
• You'll need to confirm the transaction in your wallet
• Gas fees will be paid in tCORE (Core Testnet native token)
• Transaction will appear in your wallet after confirmation
MetaMask