Added front-end Javascript

2024-08-17 12:19:13 +08:00
parent d65d7966bf
commit be54471760
12 changed files with 43665 additions and 21 deletions
@@ -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",
+    },
+];
@@ -0,0 +1,18 @@
+<!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="./pages/demo/index.js" type="module"></script>
+</html>
@@ -0,0 +1,99 @@
+import { ethers } from "./pages/demo/ethers-5.6.esm.min.js";
+import { abi, contractAddress } from "./pages/demo/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") {
+        /* Need:
+            provider / connection to the blockchain
+            signer / wallet / someone with gas
+            contract that we are interacting with
+            ABI & address
+        */
+        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);
+        }
+    });
+}