connect web client to contract

pauloreis7 · May 27, 2022 · 5f0e106 · 5f0e106
1 parent cf72ce8
commit 5f0e106
Show file tree

Hide file tree

Showing 4 changed files with 288 additions and 22 deletions.
diff --git a/web/package.json b/web/package.json
@@ -14,6 +14,7 @@
     "@ethersproject/providers": "^5.6.8",
     "@web3-react/core": "^6.1.9",
     "@web3-react/injected-connector": "^6.0.7",
+    "ethers": "^5.6.8",
     "events": "^3.3.0",
     "framer-motion": "6",
     "react": "^18.0.0",

diff --git a/web/src/App.tsx b/web/src/App.tsx
@@ -2,8 +2,12 @@ import { useEffect } from "react";
 import { Flex, Heading, Text, Button } from "@chakra-ui/react";
 import { useWeb3React } from "@web3-react/core";
 import { Web3Provider } from "@ethersproject/providers";
+import { providers, Contract } from "ethers";
 
 import { metamask } from "./services/walletConnectors";
+import contractABI from "./utils/WavePortal.json";
+
+const contractAddress = "0x6eb0612df7B2E813D60Bf6FB3863892307224C4A";
 
 export function App() {
   const { account, activate } = useWeb3React<Web3Provider>();
@@ -17,6 +21,40 @@ export function App() {
     }
   }, []);
 
+  async function handleWave() {
+    const { ethereum } = window as any;
+
+    if (!ethereum) {
+      console.log("not ethereum web :/");
+
+      return;
+    }
+
+    try {
+      const provider = new providers.Web3Provider(ethereum);
+      const signer = provider.getSigner();
+
+      const wavePortalContract = new Contract(
+        contractAddress,
+        contractABI.abi,
+        signer
+      );
+
+      let totalWaves = await wavePortalContract.getTotalWaves();
+
+      const sendWaveTransaction = await wavePortalContract.addWave();
+      console.log("mining hash:", sendWaveTransaction.hash);
+
+      sendWaveTransaction.wait();
+      console.log("mined hash:", sendWaveTransaction.hash);
+
+      totalWaves = await wavePortalContract.getTotalWaves();
+      console.log("current waves count", totalWaves.toNumber());
+    } catch (err) {
+      console.log(err);
+    }
+  }
+
   return (
     <Flex w="100%" h="100vh" flexDirection="column" alignItems="center" p="14">
       <Flex w="100%" mb="5" alignItems="center" justifyContent="flex-end">
@@ -45,9 +83,25 @@ export function App() {
         the waves portal
       </Heading>
 
-      <Text textAlign="center" fontSize="2xl" color="gray.300" fontWeight="500">
+      <Text
+        textAlign="center"
+        mb="14"
+        fontSize="2xl"
+        color="gray.300"
+        fontWeight="500"
+      >
         The amazing portal where you can wave to your friends by blockchain!
       </Text>
+
+      <Button
+        colorScheme="blue"
+        fontSize="2xl"
+        px="14"
+        py="6"
+        onClick={handleWave}
+      >
+        Wave to me
+      </Button>
     </Flex>
   );
 }
diff --git a/web/src/utils/WavePortal.json b/web/src/utils/WavePortal.json
@@ -0,0 +1,36 @@
+{
+  "_format": "hh-sol-artifact-1",
+  "contractName": "WavePortal",
+  "sourceName": "contracts/WavePortal.sol",
+  "abi": [
+    {
+      "inputs": [],
+      "stateMutability": "nonpayable",
+      "type": "constructor"
+    },
+    {
+      "inputs": [],
+      "name": "addWave",
+      "outputs": [],
+      "stateMutability": "nonpayable",
+      "type": "function"
+    },
+    {
+      "inputs": [],
+      "name": "getTotalWaves",
+      "outputs": [
+        {
+          "internalType": "uint256",
+          "name": "",
+          "type": "uint256"
+        }
+      ],
+      "stateMutability": "view",
+      "type": "function"
+    }
+  ],
+  "bytecode": "0x608060405234801561001057600080fd5b506100596040518060400160405280602081526020017f6d7920666972737420736f6c696469747920736d61727420636f6e747261637481525061005e60201b6101081760201c565b6101e1565b6100fa81604051602401610072919061015f565b6040516020818303038152906040527f41304fac000000000000000000000000000000000000000000000000000000007bffffffffffffffffffffffffffffffffffffffffffffffffffffffff19166020820180517bffffffffffffffffffffffffffffffffffffffffffffffffffffffff83818316178352505050506100fd60201b60201c565b50565b60008151905060006a636f6e736f6c652e6c6f679050602083016000808483855afa5050505050565b600061013182610181565b61013b818561018c565b935061014b81856020860161019d565b610154816101d0565b840191505092915050565b600060208201905081810360008301526101798184610126565b905092915050565b600081519050919050565b600082825260208201905092915050565b60005b838110156101bb5780820151818401526020810190506101a0565b838111156101ca576000848401525b50505050565b6000601f19601f8301169050919050565b61054d806101f06000396000f3fe608060405234801561001057600080fd5b50600436106100365760003560e01c80634c35f58f1461003b5780639a2cdc0814610045575b600080fd5b610043610063565b005b61004d6100bd565b60405161005a91906103db565b60405180910390f35b60016000808282546100759190610412565b925050819055506100bb6040518060400160405280600d81526020017f2573206861732077617665642100000000000000000000000000000000000000815250336101a1565b565b60006101006040518060400160405280601581526020017f77652068617665202564207761766573206e6f7721000000000000000000000081525060005461023d565b600054905090565b61019e8160405160240161011c9190610359565b6040516020818303038152906040527f41304fac000000000000000000000000000000000000000000000000000000007bffffffffffffffffffffffffffffffffffffffffffffffffffffffff19166020820180517bffffffffffffffffffffffffffffffffffffffffffffffffffffffff83818316178352505050506102d9565b50565b61023982826040516024016101b792919061037b565b6040516020818303038152906040527f319af333000000000000000000000000000000000000000000000000000000007bffffffffffffffffffffffffffffffffffffffffffffffffffffffff19166020820180517bffffffffffffffffffffffffffffffffffffffffffffffffffffffff83818316178352505050506102d9565b5050565b6102d582826040516024016102539291906103ab565b6040516020818303038152906040527f9710a9d0000000000000000000000000000000000000000000000000000000007bffffffffffffffffffffffffffffffffffffffffffffffffffffffff19166020820180517bffffffffffffffffffffffffffffffffffffffffffffffffffffffff83818316178352505050506102d9565b5050565b60008151905060006a636f6e736f6c652e6c6f679050602083016000808483855afa5050505050565b61030b81610468565b82525050565b600061031c826103f6565b6103268185610401565b93506103368185602086016104a4565b61033f81610506565b840191505092915050565b6103538161049a565b82525050565b600060208201905081810360008301526103738184610311565b905092915050565b600060408201905081810360008301526103958185610311565b90506103a46020830184610302565b9392505050565b600060408201905081810360008301526103c58185610311565b90506103d4602083018461034a565b9392505050565b60006020820190506103f0600083018461034a565b92915050565b600081519050919050565b600082825260208201905092915050565b600061041d8261049a565b91506104288361049a565b9250827fffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff0382111561045d5761045c6104d7565b5b828201905092915050565b60006104738261047a565b9050919050565b600073ffffffffffffffffffffffffffffffffffffffff82169050919050565b6000819050919050565b60005b838110156104c25780820151818401526020810190506104a7565b838111156104d1576000848401525b50505050565b7f4e487b7100000000000000000000000000000000000000000000000000000000600052601160045260246000fd5b6000601f19601f830116905091905056fea2646970667358221220f3dd65a00ded0fe9a6ac9838bea08c3ebe41a143f4d29297ceb4d97a34a8b6c664736f6c63430008040033",
+  "deployedBytecode": "0x608060405234801561001057600080fd5b50600436106100365760003560e01c80634c35f58f1461003b5780639a2cdc0814610045575b600080fd5b610043610063565b005b61004d6100bd565b60405161005a91906103db565b60405180910390f35b60016000808282546100759190610412565b925050819055506100bb6040518060400160405280600d81526020017f2573206861732077617665642100000000000000000000000000000000000000815250336101a1565b565b60006101006040518060400160405280601581526020017f77652068617665202564207761766573206e6f7721000000000000000000000081525060005461023d565b600054905090565b61019e8160405160240161011c9190610359565b6040516020818303038152906040527f41304fac000000000000000000000000000000000000000000000000000000007bffffffffffffffffffffffffffffffffffffffffffffffffffffffff19166020820180517bffffffffffffffffffffffffffffffffffffffffffffffffffffffff83818316178352505050506102d9565b50565b61023982826040516024016101b792919061037b565b6040516020818303038152906040527f319af333000000000000000000000000000000000000000000000000000000007bffffffffffffffffffffffffffffffffffffffffffffffffffffffff19166020820180517bffffffffffffffffffffffffffffffffffffffffffffffffffffffff83818316178352505050506102d9565b5050565b6102d582826040516024016102539291906103ab565b6040516020818303038152906040527f9710a9d0000000000000000000000000000000000000000000000000000000007bffffffffffffffffffffffffffffffffffffffffffffffffffffffff19166020820180517bffffffffffffffffffffffffffffffffffffffffffffffffffffffff83818316178352505050506102d9565b5050565b60008151905060006a636f6e736f6c652e6c6f679050602083016000808483855afa5050505050565b61030b81610468565b82525050565b600061031c826103f6565b6103268185610401565b93506103368185602086016104a4565b61033f81610506565b840191505092915050565b6103538161049a565b82525050565b600060208201905081810360008301526103738184610311565b905092915050565b600060408201905081810360008301526103958185610311565b90506103a46020830184610302565b9392505050565b600060408201905081810360008301526103c58185610311565b90506103d4602083018461034a565b9392505050565b60006020820190506103f0600083018461034a565b92915050565b600081519050919050565b600082825260208201905092915050565b600061041d8261049a565b91506104288361049a565b9250827fffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff0382111561045d5761045c6104d7565b5b828201905092915050565b60006104738261047a565b9050919050565b600073ffffffffffffffffffffffffffffffffffffffff82169050919050565b6000819050919050565b60005b838110156104c25780820151818401526020810190506104a7565b838111156104d1576000848401525b50505050565b7f4e487b7100000000000000000000000000000000000000000000000000000000600052601160045260246000fd5b6000601f19601f830116905091905056fea2646970667358221220f3dd65a00ded0fe9a6ac9838bea08c3ebe41a143f4d29297ceb4d97a34a8b6c664736f6c63430008040033",
+  "linkReferences": {},
+  "deployedLinkReferences": {}
+}