forked from WalletConnect/web3modal-vanilla-js-example
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
executable file
·161 lines (127 loc) · 7.65 KB
/
index.html
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
<!DOCTYPE html>
<html lang="en-us">
<head>
<title color="#fff">FrameworkJS Web3 template</title>
<meta charset="utf-8">
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta content="width=device-width,initial-scale=1,minimal-ui,shrink-to-fit=no" name="viewport">
<link rel="icon" href="icon.png" />
<link rel="logo" href="icon.svg" border="true" />
<script type="text/javascript" src="index.js"></script>
<script type="text/javascript" src="plugins/jQuery/jquery.min.js"></script>
<script type="text/javascript" src="plugins/Popper.js/popper.min.js"></script>
<script type="text/javascript" src="plugins/Bootstrap/js/bootstrap.min.js"></script>
<script src="plugins/Bootstrap/themes/material/js/material.min.js"></script>
<script type="text/javascript" src="js/page-common.js"></script>
<link href="plugins/Bootstrap/themes/material/css/material.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/page-common.css">
<link rel="stylesheet" type="text/css" href="css/page-custom.css">
<link rel="stylesheet" type="text/css" href="css/app-common.css">
<link href="Fonts/Roboto/font.css" rel="stylesheet">
<link href="Fonts/Material Icons/font.css" rel="stylesheet">
<meta name="pehtml" content="true">
<meta name="directory" content="css, js, img, snd">
<meta name="description" content="Its a modern and responsive framework/template/theme thinked for apps and sites of the future. A unique framework with the same code, both for apps and sites.">
<meta name="keywords" content="HTML5 Framework, Web Framework, Web UI Framework, Site Framework, App Framework">
<!-- Get some bootstrap default styles -->
<!--<script data-main="index.js" src="require.js"></script>-->
<!-- conflict with web3, should fix -->
</head>
<body id="body">
<div id="placefirst"></div>
<div id="splashloader"><div style="background: #044b3b;position: absolute;width: 100%;height: 100%;top: 0;left: 0;user-select: none;-moz-user-select: none;-webkit-user-select: none;-ms-user-select: none;z-index:6001"><center><img src="logo.svg" style="user-drag: none;-webkit-user-drag: none;" draggable="false" width="30%"><h1 style="color: #fff;">Loading...</h1></center></div></div>
<div id="fileprotocol"><div style="background: #00A185;position: absolute;width: 100%;height: 100%;top: 0;left: 0;user-select: none;-moz-user-select: none;-webkit-user-select: none;-ms-user-select: none;z-index:6000"><center><h1 style="color: #fff;">Sorry, Web3Framework can't work in the local file protocol. Please upload it to localhost, IPFS or any other host.</h1></center></div></div>
<div id="app">
<header><logo>Framework.js <span class="badge">r2</span></logo> <nav>
<ul style="
overflow: hidden!important;
">
</ul>
<ul class="drop">
<div id="prepare">
<button class="btn btn-light" id="btn-connect">
Connect wallet
</button>
</div>
<div id="connected" style="display: none">
<span class="badge" style="background: #000;" title="Connected blockchain:"><span id="network-name"></span></span>
<div class="dropdown">
<button aria-expanded="false" aria-haspopup="true" class="btn dropdown-toggle" data-toggle="dropdown" id="dropdownMenuButton2" type="button"><img src="https://blockies.shipchain.io/0xDDfC2e10702d8A781727A34D83B3bb3CA94a3E91.png?size=large" width="32px" height="32px"/></button>
<div aria-labelledby="dropdownMenuButton2" class="dropdown-menu dropdown-menu-sm">
<center><span id="selected-account"></span></center>
<center>⧫ </center>
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<button class="btn btn-light" id="btn-disconnect">
Disconnect wallet
</button>
</div>
</div>
</div>
</ul>
</nav></header>
<div class="content">
<article>
<nopehtml><blockquote style="background:#D6D6D6;border-top:1px solid #E7534F;border-bottom:1px solid #E7534F;border-left:10px solid #E7534F;border-right:10px solid #E7534F;border-radius:20px;margin:0 auto;text-align:center"><div style="margin-top: -7px;margin-left: 5px;width: 80px;height: 80px;clear: left;float: left"><img src="https://plasnerd.github.io/PEHTML/img/warning.svg" width="80px" height="80px"></div><h1 style="font-size:40px;margin-top:-5px;margin-bottom:-1px">Warning</h1><br>Your browser don't supports sites built with PEHTML. This means that this site could not be shown completly in your current browser. <br><img src="https://plasnerd.github.io/PEHTML/img/ib.svg" width="16" height="16"> <a href="../boat">Download the Internet Boat browser</a> to enjoy the whole power of PEHTML and all the features of this site.<br><p>Don't know what is PEHTML? Learn <a href="https://plasnerd.github.io/PEHTML/" target="blank">here</a>.</p></blockquote></nopehtml>
<!--<div class="alert alert-danger" id="alert-error-https" style="display: none">
You can run this page only over HTTPS connection.
</div>-->
<div class="alert alert-danger" id="alert-error-https" style="display: none">
MetaMask and other browser-based extensions won't work. This page isn't in the HTTPS protocol. You can use WalletConnect and other non-browser wallets but remember IPFS and HTTPS are safer.
</div>
<div class="container">
<div class="row">
<div class="col-md-12">
<h1>FrameworkJS Web3 template</h1>
<div id="prepare2">
<div class="alert alert-warning" role="alert">
No wallet connected. Connect a wallet to show its ETH balances.
</div>
</div>
<div id="connected2" style="display: none">
<hr>
<h3>All account balances</h3>
<table class="table table-listing">
<thead>
<th>Address</th>
<th>ETH balance</th>
</thead>
<tbody id="accounts">
</tbody>
</table>
</div>
<br>
</div>
</div>
</div>
<!-- We use simple <template> templating for the example -->
<div id="templates" style="display: none">
<template id="template-balance">
<tr>
<th class="address"></th>
<td class="balance"></td>
</tr>
</template>
</div>
<!--
Use unpkg CDN to load all NPM packages to vanilla Javascript - read more at http://unpkg.com
On your deployment, you properly either want to use a preprocessing tool like webpack
to include these files, or extract NPM archives and manually host the files inside.
TODO: Pin down all versions.
-->
</article>
</div>
<script type="text/javascript" src="https://unpkg.com/[email protected]/dist/web3.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/[email protected]/dist/index.js"></script>
<script type="text/javascript" src="https://unpkg.com/[email protected]/dist/umd/index.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/@walletconnect/[email protected]/dist/umd/index.min.js"></script>
<!--<script type="text/javascript" src="https://unpkg.com/[email protected]/browser.js"></script>-->
<script type="text/javascript" src="https://unpkg.com/[email protected]/dist/fortmatic.js"></script>
<script type="text/javascript" src="./web3ignite.js"></script>
<!-- This is our example code -->
<script type="text/javascript" src="./example.js"></script>
</div>
<script type="text/javascript" src="fileprotocol.js"></script>
</body>
</html>