-
Notifications
You must be signed in to change notification settings - Fork 1
/
App.js
177 lines (170 loc) · 5.72 KB
/
App.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
import React from "react";
// import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import { useState, useEffect } from "react";
import Web3 from "web3";
import logo from "./logo.png";
import "./App.css";
// import { Web3Storage } from "web3.storage";
// JSON containing ABI and Bytecode of compiled smart contracts
import contractJson from "./artifacts/contracts/Greeter.sol/Greeter.json";
function App() {
const [mmStatus, setMmStatus] = useState("Not connected!");
const [isConnected, setIsConnected] = useState(false);
const [accountAddress, setAccountAddress] = useState(undefined);
const [displayMessage, setDisplayMessage] = useState("");
const [web3, setWeb3] = useState(undefined);
const [getNetwork, setGetNetwork] = useState(undefined);
const [contracts, setContracts] = useState(undefined);
const [contractAddress, setContractAddress] = useState(undefined);
const [loading, setLoading] = useState(false);
const [txnHash, setTxnHash] = useState(null);
useEffect(() => {
(async () => {
// Define web3
const web3 = new Web3(window.ethereum);
setWeb3(web3);
// get networkId
const networkId = await web3.eth.getChainId();
setGetNetwork(networkId);
// INSERT deployed smart contract address
const contractGreet = "0x932E33DC70ecA01F597aa0c58F2fe58228f37F58";
setContractAddress(contractGreet);
// Instantiate smart contract instance
const Greeter = new web3.eth.Contract(contractJson.abi, contractGreet);
setContracts(Greeter);
// Set provider
Greeter.setProvider(window.ethereum);
})();
}, []);
// Connect to Metamask wallet
async function connectWallet() {
// Check Metamask status
if (window.ethereum) {
setMmStatus("✅ Metamask detected!");
try {
// Metamask popup will appear to connect the account
const accounts = await window.ethereum.request({
method: "eth_requestAccounts",
});
// Get address of the account
setAccountAddress(accounts[0]);
setIsConnected(!isConnected);
} catch (error) {
console.log("Error: ", error);
}
} else {
setMmStatus("⚠️ No wallet detected! Please install Metamask.");
}
}
// Read message from smart contract
async function receive() {
// Display message
var displayMessage = await contracts.methods.read().call();
setDisplayMessage(displayMessage);
}
// Write message to smart contract
async function send() {
// Get input value of message
var getMessage = document.getElementById("message").value;
setLoading(true);
// Send message to smart contract
await contracts.methods
.write(getMessage)
.send({ from: accountAddress })
.on("transactionHash", function (hash) {
setTxnHash(hash);
});
setLoading(false);
}
return (
<div className="App">
{/* Metamask status */}
<div className="text-center">
{getNetwork != "3141"
? "Please make sure you're on the Filecoin Hyperspace network"
: mmStatus}
</div>
<hr />
<h1 className="text-center text-4xl font-bold mt-8">
create-fvm-dapp template 🚀
</h1>
{/* Connect to Metamask */}
<center>
<button
className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-md mt-8 mb-6"
onClick={connectWallet}
>
Connect wallet
</button>
</center>
{/* Show account address */}
<div className="text-center text-sm">{accountAddress}</div>
{/* Send message */}
<center className="mt-12">
<input
type={"text"}
placeholder={"Enter message"}
id="message"
className="w-60 bg-white rounded border border-gray-300 focus:ring-2 focus:ring-indigo-200 focus:bg-white focus:border-indigo-500 text-base outline-none text-gray-700 px-3 leading-8 transition-colors duration-200 ease-in-out"
/>
<button
className="text-center bg-blue-500 hover:bg-blue-700 text-white font-bold py-1 px-4 rounded ml-3"
onClick={isConnected && send}
>
Send
</button>
{/* Receive message */}
<button
className="text-center bg-blue-500 hover:bg-blue-700 text-white font-bold py-1 px-3 rounded ml-3"
onClick={isConnected && receive}
>
Receive
</button>
</center>
<p className="text-center text-sm mt-6">
{loading == true ? (
<>
loading..
<p className="mt-4 text-xs ">
Txn hash:{" "}
<a
className="text-blue-500"
href={"https://hyperspace.filfox.info/en/tx/" + txnHash}
target="_blank"
rel="noopener noreferrer"
>
{txnHash}
</a>
</p>
<p className="mt-2 text-xs">
Please wait till the Txn is completed :)
</p>
</>
) : (
""
)}
</p>
{/* Display message */}
<div className="text-center text-3xl mt-10">
<b>{displayMessage}</b>
</div>
{/* Footer FVM content */}
<footer className="footer">
<img src={logo} className="App-logo" alt="logo" />
<p className="mt-4 text-xs sm:text-sm text-black">
Learn more about Filecoin Virtual Machine {""}
<a
className="text-blue-500 no-underline hover:underline hover:text-blue-400"
href="https://fvm.filecoin.io/"
target="_blank"
rel="noopener noreferrer"
>
here
</a>
.
</p>
</footer>
</div>
);
}
export default App;