contract transactions

package.json

@@ -10,10 +10,11 @@
     "@openzeppelin/contracts-ethereum-package": "^3.0.0",
     "@web3-react/core": "^6.0.9",
     "@web3-react/injected-connector": "^6.0.7",
-    "ethers": "^4.0.47",
-    "react": ">=16.8",
-    "react-dom": "^16.13.1",
-    "web3": "^1.2.7"
+    "ethers": "^4",
+    "react": "^16.8",
+    "react-dom": "^16.8",
+    "web3": "^1.2.7",
+    "web3-react": "^5.0.5"
   },
   "scripts": {
     "start": "parcel index.html",

src/Main.tsx

@@ -3,39 +3,36 @@ import { useWeb3React } from "@web3-react/core";
 import Web3 from "web3";
 
 import ADIToken from "./contracts/ADIToken.json";
+import TransferForm from "./TransferForm";
 import _secrets from "../.secrets.json";
 
-//https://github.com/OpenZeppelin/openzeppelin-contracts-ethereum-package/blob/master/contracts/presets/ERC20PresetMinterPauser.sol
-const queryADIBalance = async (
-  web3: Web3,
-  address: string
-): Promise<string> => {
-  const contract = new web3.eth.Contract(
-    ADIToken.abi,
-    _secrets.contractAddress
-  );
-
-  const balance = await contract.methods
-    .balanceOf(address)
-    .call({ from: address });
-  return balance;
-};
-
 const Main: React.FC = () => {
   const { account, library: web3 } = useWeb3React<Web3>();
 
   const [ethBalance, setEthBalance] = useState<string>("");
-  const [adiBalance, setADIBalance] = useState<number>(0);
+  const [adiBalance, setADIBalance] = useState<string>("");
+
+  //https://github.com/OpenZeppelin/openzeppelin-contracts-ethereum-package/blob/master/contracts/presets/ERC20PresetMinterPauser.sol
+  const queryADIBalance = async (): Promise<string> => {
+    const contract = new web3.eth.Contract(
+      ADIToken.abi,
+      _secrets.contractAddress
+    );
+
+    const balance = await contract.methods
+      .balanceOf(account)
+      .call({ from: account });
+    return balance;
+  };
 
   useEffect(() => {
     (async () => {
       const _ethBalance = await web3.eth.getBalance(account);
       const readableEthBalance = Web3.utils.fromWei(_ethBalance);
       setEthBalance(readableEthBalance);
 
-      const _adiBalance = await queryADIBalance(web3, account);
-      const readableAdiBalance =
-        parseFloat(Web3.utils.fromWei(_adiBalance)) * 1e18;
+      const _adiBalance = await queryADIBalance();
+      const readableAdiBalance = Web3.utils.fromWei(_adiBalance);
       setADIBalance(readableAdiBalance);
     })();
   }, [web3]);
@@ -48,8 +45,14 @@ const Main: React.FC = () => {
       <p>
         You've got <b>{ethBalance}ETH</b>
       </p>
-      <p>You've got {adiBalance}AĐI</p>
+      <p>
+        You've got {adiBalance}AĐI <br />
+        <small>({_secrets.contractAddress})</small>
+      </p>
       <p>to spare with others.</p>
+      {adiBalance && (
+        <TransferForm updateBalance={queryADIBalance}></TransferForm>
+      )}
     </div>
   );
 };

src/TransferForm.tsx

@@ -0,0 +1,68 @@
+import React, { useState } from "react";
+import { useWeb3React } from "@web3-react/core";
+import Web3 from "web3";
+
+import ADIToken from "./contracts/ADIToken.json";
+import _secrets from "../.secrets.json";
+
+const TransferForm = ({ updateBalance }: { updateBalance: Function }) => {
+  const { account, library: web3 } = useWeb3React<Web3>();
+
+  const [to, setTo] = useState("");
+  const [amount, setAmount] = useState("");
+  const [isTransactionPending, setIsTransactionPending] = useState(false);
+  const [transactionHash, setTransactionHash] = useState<string>();
+
+  const transferADITokens = async (): Promise<void> => {
+    const contract = new web3.eth.Contract(
+      ADIToken.abi,
+      _secrets.contractAddress
+    );
+
+    setIsTransactionPending(true);
+    // https://web3js.readthedocs.io/en/v1.2.7/web3-eth-contract.html#id36
+    const promiEvent = contract.methods.transfer(to, amount).send({
+      from: account,
+      gasPrice: 21 * 1e5,
+    });
+    promiEvent.on("transactionHash", setTransactionHash);
+    promiEvent.on("receipt", (receipt) => {
+      console.log(receipt);
+      setIsTransactionPending(false);
+      setTransactionHash("");
+      updateBalance();
+    });
+    promiEvent.on("confirmation", (number, confirmation) => {
+      console.debug(confirmation);
+    });
+  };
+
+  return (
+    <div>
+      {isTransactionPending ? (
+        <p>standby, your transaction {transactionHash} is pending</p>
+      ) : (
+        <>
+          <label htmlFor="address">Adress</label>
+          <input
+            type="text"
+            value={to}
+            onChange={(e) => setTo(e.target.value)}
+          />
+
+          <label htmlFor="amount">Amount</label>
+          <input
+            type="text"
+            value={amount}
+            onChange={(e) => setAmount(e.target.value)}
+          />
+          <button disabled={!to || !amount} onClick={transferADITokens}>
+            Send!
+          </button>
+        </>
+      )}
+    </div>
+  );
+};
+
+export default TransferForm;