Localhost Hardhat Node Test Ready
This commit is contained in:
parent
cd2da9fd16
commit
70a2714570
25
README.md
Normal file
25
README.md
Normal file
@ -0,0 +1,25 @@
|
||||
# Smart Contract Front End
|
||||
|
||||
This project will connect local blockchain, will call ```Metamask``` Google Chrome Exntension to fund the Smart Contract.
|
||||
|
||||
## Import
|
||||
```
|
||||
https://docs.ethers.org/v5/getting-started/
|
||||
|
||||
https://github.com/ethers-io/ethers.js/releases
|
||||
|
||||
esm - support module
|
||||
umd - follow UMD pattern (Universal Module Definition)
|
||||
```
|
||||
|
||||
Test localhost hardhat node
|
||||
* ```yarn hardhat node``` -> get private key
|
||||
* ```yarn hardhat deploy``` -> get smart contract address
|
||||
* Ensure ABI updated -> ./artifacts/contracts/FundMe.sol/FundMe.json -> Only abi object
|
||||
* Ensure Metamask Added localhost network
|
||||
* Setting -> Networks -> Add a network
|
||||
* RPC URL from VS code: http://127.0.0.1:8545/
|
||||
* Default Hardhat node Chain ID from VS code: 31337
|
||||
* Currency Symbol ETH (Or Any)
|
||||
* Metamark add account via private key
|
||||
* Connect With the added account
|
||||
126
constants.js
Normal file
126
constants.js
Normal file
@ -0,0 +1,126 @@
|
||||
export const contractAddress = "0xe7f1725E7734CE288F8367e1Bb143E90bb3F0512"; // FundMe Contract
|
||||
// ABI from the compiled contract located at /artifacts/contracts/FundMe.sol/FundMe.json => abi
|
||||
export const abi = [
|
||||
{
|
||||
inputs: [
|
||||
{
|
||||
internalType: "address",
|
||||
name: "s_priceFeedAddress",
|
||||
type: "address",
|
||||
},
|
||||
],
|
||||
stateMutability: "nonpayable",
|
||||
type: "constructor",
|
||||
},
|
||||
{
|
||||
inputs: [],
|
||||
name: "FundMe__NotOwner",
|
||||
type: "error",
|
||||
},
|
||||
{
|
||||
stateMutability: "payable",
|
||||
type: "fallback",
|
||||
},
|
||||
{
|
||||
inputs: [],
|
||||
name: "MINIMUM_USD",
|
||||
outputs: [
|
||||
{
|
||||
internalType: "uint256",
|
||||
name: "",
|
||||
type: "uint256",
|
||||
},
|
||||
],
|
||||
stateMutability: "view",
|
||||
type: "function",
|
||||
},
|
||||
{
|
||||
inputs: [],
|
||||
name: "cheaperWithdraw",
|
||||
outputs: [],
|
||||
stateMutability: "nonpayable",
|
||||
type: "function",
|
||||
},
|
||||
{
|
||||
inputs: [],
|
||||
name: "fund",
|
||||
outputs: [],
|
||||
stateMutability: "payable",
|
||||
type: "function",
|
||||
},
|
||||
{
|
||||
inputs: [
|
||||
{
|
||||
internalType: "address",
|
||||
name: "funder",
|
||||
type: "address",
|
||||
},
|
||||
],
|
||||
name: "getAddressToAmountFunded",
|
||||
outputs: [
|
||||
{
|
||||
internalType: "uint256",
|
||||
name: "",
|
||||
type: "uint256",
|
||||
},
|
||||
],
|
||||
stateMutability: "view",
|
||||
type: "function",
|
||||
},
|
||||
{
|
||||
inputs: [
|
||||
{
|
||||
internalType: "uint256",
|
||||
name: "index",
|
||||
type: "uint256",
|
||||
},
|
||||
],
|
||||
name: "getFunders",
|
||||
outputs: [
|
||||
{
|
||||
internalType: "address",
|
||||
name: "",
|
||||
type: "address",
|
||||
},
|
||||
],
|
||||
stateMutability: "view",
|
||||
type: "function",
|
||||
},
|
||||
{
|
||||
inputs: [],
|
||||
name: "getOwner",
|
||||
outputs: [
|
||||
{
|
||||
internalType: "address",
|
||||
name: "",
|
||||
type: "address",
|
||||
},
|
||||
],
|
||||
stateMutability: "view",
|
||||
type: "function",
|
||||
},
|
||||
{
|
||||
inputs: [],
|
||||
name: "getPriceFeed",
|
||||
outputs: [
|
||||
{
|
||||
internalType: "contract AggregatorV3Interface",
|
||||
name: "",
|
||||
type: "address",
|
||||
},
|
||||
],
|
||||
stateMutability: "view",
|
||||
type: "function",
|
||||
},
|
||||
{
|
||||
inputs: [],
|
||||
name: "withdraw",
|
||||
outputs: [],
|
||||
stateMutability: "nonpayable",
|
||||
type: "function",
|
||||
},
|
||||
{
|
||||
stateMutability: "payable",
|
||||
type: "receive",
|
||||
},
|
||||
];
|
||||
22237
ethers-5.6.esm.min.js
vendored
Normal file
22237
ethers-5.6.esm.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
1
ethers-6.13.2.min.js
vendored
Normal file
1
ethers-6.13.2.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
19
index.html
19
index.html
@ -0,0 +1,19 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Fund Me App</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<button id="connectButton">Connect</button>
|
||||
<button id="balanceButton">getBalance</button>
|
||||
<button id="withdrawButton">Withdraw</button>
|
||||
<!-- <form> -->
|
||||
<label for="ethAmount">ETH Amount</label>
|
||||
<input id="ethAmount" placeholder="0.1" type="number" />
|
||||
<button type="button" id="fundButton">Fund</button>
|
||||
<!-- </form> -->
|
||||
</body>
|
||||
|
||||
<script src="./index.js" type="module"></script>
|
||||
</html>
|
||||
93
index.js
Normal file
93
index.js
Normal file
@ -0,0 +1,93 @@
|
||||
import { ethers } from "./ethers-5.6.esm.min.js";
|
||||
import { abi, contractAddress } from "./constants.js";
|
||||
|
||||
const connectButton = document.getElementById("connectButton");
|
||||
const withdrawButton = document.getElementById("withdrawButton");
|
||||
const fundButton = document.getElementById("fundButton");
|
||||
const balanceButton = document.getElementById("balanceButton");
|
||||
connectButton.onclick = connect;
|
||||
withdrawButton.onclick = withdraw;
|
||||
fundButton.onclick = fund;
|
||||
balanceButton.onclick = getBalance;
|
||||
|
||||
async function connect() {
|
||||
if (typeof window.ethereum !== "undefined") {
|
||||
try {
|
||||
await ethereum.request({ method: "eth_requestAccounts" });
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
connectButton.innerHTML = "Connected";
|
||||
const accounts = await ethereum.request({ method: "eth_accounts" });
|
||||
console.log(accounts);
|
||||
} else {
|
||||
connectButton.innerHTML = "Please install MetaMask";
|
||||
}
|
||||
}
|
||||
|
||||
async function withdraw() {
|
||||
console.log(`Withdrawing...`);
|
||||
if (typeof window.ethereum !== "undefined") {
|
||||
const provider = new ethers.providers.Web3Provider(window.ethereum);
|
||||
await provider.send("eth_requestAccounts", []);
|
||||
const signer = provider.getSigner();
|
||||
const contract = new ethers.Contract(contractAddress, abi, signer);
|
||||
try {
|
||||
const transactionResponse = await contract.withdraw();
|
||||
await listenForTransactionMine(transactionResponse, provider);
|
||||
// await transactionResponse.wait(1)
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
} else {
|
||||
withdrawButton.innerHTML = "Please install MetaMask";
|
||||
}
|
||||
}
|
||||
|
||||
async function fund() {
|
||||
const ethAmount = document.getElementById("ethAmount").value;
|
||||
console.log(`Funding with ${ethAmount}...`);
|
||||
if (typeof window.ethereum !== "undefined") {
|
||||
const provider = new ethers.providers.Web3Provider(window.ethereum);
|
||||
const signer = provider.getSigner();
|
||||
const contract = new ethers.Contract(contractAddress, abi, signer);
|
||||
try {
|
||||
const transactionResponse = await contract.fund({
|
||||
value: ethers.utils.parseEther(ethAmount),
|
||||
});
|
||||
await listenForTransactionMine(transactionResponse, provider);
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
} else {
|
||||
fundButton.innerHTML = "Please install MetaMask";
|
||||
}
|
||||
}
|
||||
|
||||
async function getBalance() {
|
||||
if (typeof window.ethereum !== "undefined") {
|
||||
const provider = new ethers.providers.Web3Provider(window.ethereum);
|
||||
try {
|
||||
const balance = await provider.getBalance(contractAddress);
|
||||
console.log(ethers.utils.formatEther(balance));
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
} else {
|
||||
balanceButton.innerHTML = "Please install MetaMask";
|
||||
}
|
||||
}
|
||||
|
||||
function listenForTransactionMine(transactionResponse, provider) {
|
||||
console.log(`Mining ${transactionResponse.hash}`);
|
||||
return new Promise((resolve, reject) => {
|
||||
try {
|
||||
provider.once(transactionResponse.hash, (transactionReceipt) => {
|
||||
console.log(`Completed with ${transactionReceipt.confirmations} confirmations. `);
|
||||
resolve();
|
||||
});
|
||||
} catch (error) {
|
||||
reject(error);
|
||||
}
|
||||
});
|
||||
}
|
||||
@ -1,5 +1,6 @@
|
||||
{
|
||||
"devDependencies": {
|
||||
"prettier": "^3.3.3"
|
||||
}
|
||||
},
|
||||
"packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user