· 4 years ago · Jun 25, 2021, 10:26 PM
1<template>
2 <div>
3 <span class="presale-page">Presale Page</span>
4
5 <div class="container">
6 <div class="row">
7 <div class="col-md-12">
8 <h1>Web3modal example for vanille JavaScript and HTML</h1>
9
10 <p>
11 No wallet connected. Connect wallet to show accounts and their ETH
12 balances.
13 </p>
14
15 <div
16 class="alert alert-danger"
17 id="alert-error-https"
18 style="display: none"
19 >
20 You can run this example only over HTTPS connection.
21 </div>
22
23 <div id="prepare">
24 <button class="btn btn-primary" id="btn-connect">
25 Connect wallet
26 </button>
27 </div>
28
29 <div id="connected" style="display: none">
30 <button class="btn btn-primary" id="btn-disconnect">
31 Disconnect wallet
32 </button>
33
34 <hr />
35
36 <div id="network">
37 <p>
38 <strong>Connected blockchain:</strong>
39 <span id="network-name"></span>
40 </p>
41
42 <p>
43 <strong>Selected account:</strong>
44 <span id="selected-account"></span>
45 </p>
46 </div>
47
48 <hr />
49
50 <h3>All account balances</h3>
51
52 <table class="table table-listing">
53 <thead>
54 <th>Address</th>
55 <th>ETH balance</th>
56 </thead>
57
58 <tbody id="accounts">
59 <tr>
60 <td>{{ this.connectedWallet }}</td>
61 <td>{{ this.humanFriendlyBalance }}</td>
62 </tr>
63 </tbody>
64 </table>
65
66 <p>
67 Please try to switch between different accounts in your wallet if
68 your wallet supports this functonality.
69 </p>
70 </div>
71
72 <br />
73
74 <div class="well">
75 <p class="text-muted">
76 See also the
77 <a href="https://web3modal.com/"
78 >TypeScript and React example application</a
79 >
80 </p>
81 </div>
82 </div>
83 </div>
84 </div>
85
86 <!-- We use simple <template> templating for the example -->
87 <template id="templates" style="display: none">
88 <div id="template-balance">
89 <tr>
90 <th class="address"></th>
91 <td class="balance"></td>
92 </tr>
93 </div>
94 </template>
95
96 <script
97 type="text/javascript"
98 src="https://unpkg.com/web3@1.2.11/dist/web3.min.js"
99 ></script>
100 <script
101 type="text/javascript"
102 src="https://unpkg.com/web3modal@1.9.0/dist/index.js"
103 ></script>
104 <script
105 type="text/javascript"
106 src="https://unpkg.com/evm-chains@0.2.0/dist/umd/index.min.js"
107 ></script>
108 <script
109 type="text/javascript"
110 src="https://unpkg.com/@walletconnect/web3-provider@1.2.1/dist/umd/index.min.js"
111 ></script>
112 <script
113 type="text/javascript"
114 src="https://unpkg.com/fortmatic@2.0.6/dist/fortmatic.js"
115 ></script>
116 </div>
117</template>
118
119<script>
120import Web3Modal from "web3modal";
121export default {
122 data() {
123 return {
124 humanFriendlyBalance: null,
125 connectedWallet: null,
126 web3Modal: null,
127 // Chosen wallet provider given by the dialog window
128 provider: null,
129 // Address of the selected account
130 selectedAccount: null,
131 Web3Modal: null,
132 WalletConnectProvider: null,
133 Fortmatic: null,
134 evmChains: null,
135 web3: null,
136 template: null,
137 providerOptions: {
138 walletconnect: {
139 package: this.WalletConnectProvider,
140 options: {
141 // Mikko's test key - don't copy as your mileage may vary
142 infuraId: "8043bb2cf99347b1bfadfb233c5325c0"
143 }
144 },
145
146 fortmatic: {
147 package: this.Fortmatic,
148 options: {
149 // Mikko's TESTNET api key
150 key: "pk_test_391E26A3B43A3350"
151 }
152 }
153 }
154 };
155 },
156 methods: {
157 async fetchAccountData() {
158 // Get a Web3 instance for the wallet
159 this.web3 = new Web3(this.provider);
160
161 console.log("Web3 instance is", this.web3);
162
163 // Get connected chain id from Ethereum node
164 const chainId = await this.web3.eth.getChainId();
165 // Load chain information over an HTTP API
166 const chainData = this.evmChains.getChain(chainId);
167 document.querySelector("#network-name").textContent = chainData.name;
168
169 // Get list of accounts of the connected wallet
170 const accounts = await this.web3.eth.getAccounts();
171
172 // MetaMask does not give you all accounts, only the selected account
173 console.log("Got accounts", accounts);
174 this.selectedAccount = accounts[0];
175
176 document.querySelector(
177 "#selected-account"
178 ).textContent = this.selectedAccount;
179
180 // Get a handl
181 const template = document.querySelector("#template-balance");
182 const accountContainer = document.querySelector("#accounts");
183
184 // Purge UI elements any previously loaded accounts
185 // accountContainer.innerHTML = "";
186
187 // Go through all accounts and get their ETH balance
188 const rowResolvers = accounts.map(async address => {
189 const balance = await this.web3.eth.getBalance(address);
190 // ethBalance is a BigNumber instance
191 // https://github.com/indutny/bn.js/
192 const ethBalance = this.web3.utils.fromWei(balance, "ether");
193 const humanFriendlyBalance = parseFloat(ethBalance).toFixed(4);
194 // Fill in the templated row and put in the document
195 console.log(address, humanFriendlyBalance);
196 this.humanFriendlyBalance = humanFriendlyBalance;
197 this.connectedWallet = address;
198 // accountContainer.appendChild(clone);
199 });
200
201 // Because rendering account does its own RPC commucation
202 // with Ethereum node, we do not want to display any results
203 // until data for all accounts is loaded
204 await Promise.all(rowResolvers);
205
206 // Display fully loaded UI for wallet data
207 document.querySelector("#prepare").style.display = "none";
208 document.querySelector("#connected").style.display = "block";
209 },
210 async init() {
211 console.log("Initializing example");
212 console.log("WalletConnectProvider is", WalletConnectProvider);
213 console.log("Fortmatic is", Fortmatic);
214 console.log(
215 "window.web3 is",
216 window.web3,
217 "window.ethereum is",
218 window.ethereum
219 );
220 this.Web3Modal = window.Web3Modal.default;
221 this.WalletConnectProvider = window.WalletConnectProvider.default;
222 this.Fortmatic = window.Fortmatic;
223 this.evmChains = window.evmChains;
224
225 this.web3Modal = new Web3Modal({
226 cacheProvider: false, // optional
227 providerOptions: this.providerOptions, // required
228 disableInjectedProvider: false // optional. For MetaMask / Brave / Opera.
229 });
230
231 console.log("Web3Modal instance is", this.web3Modal);
232 },
233 async refreshAccountData() {
234 // If any current data is displayed when
235 // the user is switching acounts in the wallet
236 // immediate hide this data
237 document.querySelector("#connected").style.display = "none";
238 document.querySelector("#prepare").style.display = "block";
239
240 // Disable button while UI is loading.
241 // fetchAccountData() will take a while as it communicates
242 // with Ethereum node via JSON-RPC and loads chain data
243 // over an API call.
244 document
245 .querySelector("#btn-connect")
246 .setAttribute("disabled", "disabled");
247 await this.fetchAccountData(this.provider);
248 document.querySelector("#btn-connect").removeAttribute("disabled");
249 },
250 async onConnect() {
251 console.log("Opening a dialog", this.web3Modal);
252 try {
253 this.provider = await this.web3Modal.connect();
254 } catch (e) {
255 console.log("Could not get a wallet connection", e);
256 return;
257 }
258
259 // Subscribe to accounts change
260 this.provider.on("accountsChanged", accounts => {
261 this.fetchAccountData();
262 });
263
264 // Subscribe to chainId change
265 this.provider.on("chainChanged", chainId => {
266 this.fetchAccountData();
267 });
268
269 // Subscribe to networkId change
270 this.provider.on("networkChanged", networkId => {
271 this.fetchAccountData();
272 });
273
274 await this.refreshAccountData();
275 },
276 async onDisconnect() {
277 console.log("Killing the wallet connection", this.provider);
278
279 // TODO: Which providers have close method?
280 if (this.provider.close) {
281 await this.provider.close();
282
283 // If the cached provider is not cleared,
284 // WalletConnect will default to the existing session
285 // and does not allow to re-scan the QR code with a new wallet.
286 // Depending on your use case you may want or want not his behavir.
287 await this.web3Modal.clearCachedProvider();
288 this.provider = null;
289 }
290
291 this.selectedAccount = null;
292
293 // Set the UI back to the initial state
294 document.querySelector("#prepare").style.display = "block";
295 document.querySelector("#connected").style.display = "none";
296 }
297 },
298 async mounted() {
299 console.log("mounted");
300 this.init();
301 document
302 .querySelector("#btn-connect")
303 .addEventListener("click", this.onConnect);
304 document
305 .querySelector("#btn-disconnect")
306 .addEventListener("click", this.onDisconnect);
307 this.onConnect();
308 }
309};
310</script>
311
312<style>
313@import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css");
314</style>
315