-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.js
126 lines (101 loc) · 3.66 KB
/
index.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
// Create global userWalletAddress variable
window.userWalletAddress = null;
// when the browser is ready
window.onload = async (event) => {
// check if ethereum extension is installed
if (window.ethereum) {
// create web3 instance
window.web3 = new Web3(window.ethereum);
} else {
// prompt user to install Metamask
alert("Please install MetaMask or any Ethereum Extension Wallet");
}
// check if user is already logged in and update the global userWalletAddress variable
window.userWalletAddress = window.localStorage.getItem("userWalletAddress");
// show the user dashboard
showUserDashboard();
};
// Web3 login function
const loginWithEth = async () => {
// check if there is global window.web3 instance
if (window.web3) {
try {
// get the user's ethereum account - prompts metamask to login
const selectedAccount = await window.ethereum
.request({
method: "eth_requestAccounts",
})
.then((accounts) => accounts[0])
.catch(() => {
// if the user cancels the login prompt
throw Error("Please select an account");
});
// set the global userWalletAddress variable to selected account
window.userWalletAddress = selectedAccount;
// store the user's wallet address in local storage
window.localStorage.setItem("userWalletAddress", selectedAccount);
// show the user dashboard
showUserDashboard();
} catch (error) {
alert(error);
}
} else {
alert("wallet not found");
}
};
// function to show the user dashboard
const showUserDashboard = async () => {
// if the user is not logged in - userWalletAddress is null
if (!window.userWalletAddress) {
// change the page title
document.title = "Web3 Login";
// show the login section
document.querySelector(".login-section").style.display = "flex";
// hide the user dashboard section
document.querySelector(".dashboard-section").style.display = "none";
// return from the function
return false;
}
// change the page title
document.title = "Web3 Dashboard 🤝";
// hide the login section
document.querySelector(".login-section").style.display = "none";
// show the dashboard section
document.querySelector(".dashboard-section").style.display = "flex";
// show the user's wallet address
showUserWalletAddress();
// get the user's wallet balance
getWalletBalance();
};
// show the user's wallet address from the global userWalletAddress variable
const showUserWalletAddress = () => {
const walletAddressEl = document.querySelector(".wallet-address");
walletAddressEl.innerHTML = window.userWalletAddress;
};
// get the user's wallet balance
const getWalletBalance = async () => {
// check if there is global userWalletAddress variable
if (!window.userWalletAddress) {
return false;
}
// get the user's wallet balance
const balance = await window.web3.eth.getBalance(window.userWalletAddress);
// convert the balance to ether
document.querySelector(".wallet-balance").innerHTML = web3.utils.fromWei(
balance,
"ether"
);
};
// web3 logout function
const logout = () => {
// set the global userWalletAddress variable to null
window.userWalletAddress = null;
// remove the user's wallet address from local storage
window.localStorage.removeItem("userWalletAddress");
// show the user dashboard
showUserDashboard();
};
// when the user clicks the login button run the loginWithEth function
document.querySelector(".login-btn").addEventListener("click", loginWithEth);
// when the user clicks the logout button run the logout function
document.querySelector(".logout-btn").addEventListener("click", logout);