Skip to content

Commit 183599d

Browse files
dtaipovdtaipov
committed
demo docs. ETH Signer html redesign
1 parent 8d53f4d commit 183599d

File tree

1 file changed

+221
-68
lines changed

1 file changed

+221
-68
lines changed

‎docs/eth_signer/index.html

Lines changed: 221 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -2,81 +2,238 @@
22
<html lang="en">
33
<head>
44
<title>ETH Signer</title>
5-
<link rel="stylesheet" href="../assets/spectre.min.css">
65
<link rel="stylesheet" href="../assets/icons.min.css">
76
<link rel="shortcut icon" href="../assets/favicon.ico">
7+
<style>
8+
button {
9+
width: 100%;
10+
}
11+
a {
12+
font-weight: bold;
13+
}
14+
a:link {
15+
text-decoration: none;
16+
}
17+
a:visited {
18+
text-decoration: none;
19+
}
20+
label {
21+
color: rgb(0, 104, 153);
22+
line-height: 1.982;
23+
text-align: left;
24+
display: block
25+
}
26+
body {
27+
margin: 0;
28+
font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
29+
font-size: .8rem;
30+
overflow-x: hidden;
31+
text-rendering: optimizeLegibility;
32+
color: white;
33+
}
34+
.page_title {
35+
color: rgb(85, 85, 85);
36+
font-weight: bold;
37+
margin-bottom: 15px;
38+
}
39+
.container {
40+
display: grid;
41+
grid-template-columns: 50px 50px auto 50px 50px;
42+
grid-template-rows: 131px 89px 200px 215px 50px 50px 50px;
43+
}
44+
.header {
45+
background-image: -moz-linear-gradient( -96deg, rgb(32,135,184) 0%, rgb(16,120,169) 47%, rgb(0,104,153) 100%);
46+
background-image: -webkit-linear-gradient( -96deg, rgb(32,135,184) 0%, rgb(16,120,169) 47%, rgb(0,104,153) 100%);
47+
background-image: -ms-linear-gradient( -96deg, rgb(32,135,184) 0%, rgb(16,120,169) 47%, rgb(0,104,153) 100%);
48+
grid-column: 1 / 6;
49+
grid-row: 1;
50+
z-index: 15;
51+
display: grid;
52+
grid-template-columns: 1fr 380px 1fr;
53+
justify-content: center;
54+
}
55+
.header-center-logo {
56+
align-self: end;
57+
justify-self: end;
58+
}
59+
.header-center {
60+
display: grid;
61+
grid-template-columns: 150px auto;
62+
grid-template-rows: 85px 46px;
63+
}
64+
.header-center-name {
65+
align-self: center;
66+
justify-self: center;
67+
}
68+
.header-center-bottom {
69+
align-self: center;
70+
justify-self: start;
71+
text-align: center;
72+
grid-column: 1 / 3;
73+
grid-row: 2;
74+
}
75+
.menu {
76+
grid-column: 1;
77+
grid-row: 3 / 5;
78+
display: grid;
79+
}
80+
.right_menu {
81+
grid-column: 5;
82+
grid-row: 3 / 5;
83+
display: grid;
84+
}
85+
.form {
86+
grid-column: 3;
87+
grid-row: 3;
88+
}
89+
.request {
90+
grid-column: 3;
91+
grid-row: 4;
92+
}
93+
.run_request {
94+
grid-column: 3;
95+
grid-row: 5;
96+
justify-self: end;
97+
}
98+
.raw_hex {
99+
grid-column: 3;
100+
grid-row: 6;
101+
justify-self: end;
102+
}
103+
.etherscan_link {
104+
grid-column: 3;
105+
grid-row: 7;
106+
justify-self: end;
107+
}
108+
.btn {
109+
border-radius: 2px;
110+
background-image: -moz-linear-gradient( -90deg, rgb(32,135,184) 0%, rgb(16,120,169) 47%, rgb(0,104,153) 100%);
111+
background-image: -webkit-linear-gradient( -90deg, rgb(32,135,184) 0%, rgb(16,120,169) 47%, rgb(0,104,153) 100%);
112+
background-image: -ms-linear-gradient( -90deg, rgb(32,135,184) 0%, rgb(16,120,169) 47%, rgb(0,104,153) 100%);
113+
color: white;
114+
text-align: right;
115+
font-weight: normal;
116+
padding: 4px 6px 4px 6px;
117+
}
118+
.block {
119+
display: block;
120+
}
121+
.btn_run_request {
122+
text-align: center;
123+
}
124+
.modal {
125+
display: none;
126+
position: fixed;
127+
z-index: 1;
128+
padding-top: 250px;
129+
left: 0;
130+
top: 0;
131+
width: 100%;
132+
height: 100%;
133+
overflow: auto;
134+
background-color: rgb(0,0,0);
135+
background-color: rgba(0,0,0,0.4);
136+
}
137+
.modal-content {
138+
text-align: center;
139+
font-size: 1.8rem;
140+
background-color: #fefefe;
141+
color: rgb(85, 85, 85);
142+
margin: auto;
143+
padding: 20px;
144+
border: 1px solid #888;
145+
}
146+
.form-label {
147+
color: #006899;
148+
display: inline-block;
149+
width: 100px;
150+
}
151+
.form-input {
152+
border-radius: 2px;
153+
border-style:solid;
154+
border-width:1px;
155+
width: 400px;
156+
padding: 3px;
157+
}
158+
textarea {
159+
border-radius: 2px;
160+
}
161+
</style>
8162
</head>
9163
<body>
10-
<div class="container">
11-
<div class="columns" id="error" style="display: none">
12-
<div class="column my-2">
13-
<div class="toast toast-error">
14-
WebSocket connection failed. Check if KeyChain is installed
15-
</div>
164+
<div id="error" class="modal">
165+
<div class="modal-content">
166+
<p>WebSocket connection failed. Check if KeyChain is installed.</p>
167+
</div>
168+
</div>
169+
<div class="container">
170+
<div class="header">
171+
<div></div>
172+
<div class="header-center">
173+
<div class="header-center-logo">
174+
<img src="../assets/logo.png" alt="KeyChain logo" width="70px">
16175
</div>
17-
</div>
18-
<div class="columns">
19-
<div class="column col-2 text-right">
20-
<img src="../assets/logo.png" alt="KeyChain logo">
176+
<div class="header-center-name">
177+
<span style="font-size: 1.8rem; font-weight: bold">ETH Signer</span>
21178
</div>
22-
<div class="column col mx-2 my-2">
23-
<h1>ETH Signer</h1>
24-
<h6>Sign and publish Ethereum transactions with KeyChain <span id="version"></span> - a highly secure key management app.</h6>
25-
<h6>Documentation: <a href="https://github.com/arrayio/array-io-keychain/wiki/How-to-sign-Ethereum-transaction-via-KeyChain">How to sign Ethereum transaction via KeyChain</a></h6>
179+
<div class="header-center-bottom">
180+
Sign and publish Ethereum transactions with KeyChain <span id="version"></span> <br>
181+
Read more: <a href="https://github.com/arrayio/array-io-keychain/wiki/How-to-sign-Ethereum-transaction-via-KeyChain" style="color:white">KeyChain Documentation</a>
26182
</div>
27183
</div>
28-
<div class="columns">
29-
<div class="column col">
184+
<div></div>
185+
</div>
186+
<div class="menu">
187+
<div><span class="btn block">&nbsp;</span></div>
188+
<div><span class="btn block">&nbsp;</span></div>
189+
<div><span class="btn block">&nbsp;</span></div>
190+
<div><span class="btn block">&nbsp;</span></div>
191+
<div><span class="btn block">&nbsp;</span></div>
192+
<div><span class="btn block">&nbsp;</span></div>
193+
<div><span class="btn block">&nbsp;</span></div>
194+
</div>
195+
<div class="form">
196+
<div>
197+
<div class="page_title">Sign transaction</div>
30198
<div class="form-group">
31-
<label class="form-label" for="input-endpoint">Endpoint</label>
32-
<input class="form-input" type="text" id="input-endpoint" value="https://rinkeby.infura.io/v3/6e07edb991d64b9197996b7ff174de42" />
199+
<label class="form-label">Endpoint</label>
200+
<input class="form-input" type="text" id="input-endpoint" value="https://rinkeby.infura.io/v3/6e07edb991d64b9197996b7ff174de42" placeholder="ttps://rinkeby.infura.io/v3/6e07edb991d64b9197996b7ff174de42">
33201
</div>
34202
<div class="form-group">
35-
<label class="form-label" for="input-to-address">To address</label>
36-
<input
37-
class="form-input"
38-
type="text"
39-
id="input-to-address"
40-
value="0xE8899BA12578d60e4D0683a596EDaCbC85eC18CC"
41-
/>
203+
<label class="form-label">To address:</label>
204+
<input class="form-input" type="text" id="input-to-address" value="0xE8899BA12578d60e4D0683a596EDaCbC85eC18CC">
42205
</div>
43206
</div>
44207
</div>
45-
<div class="columns my-2">
46-
<div class="column col-4 ">
47-
<button class="btn btn-primary" id="btn_SIGN">Sign</button>
48-
<button class="btn btn-primary" id="btn_PUBLISH">Publish</button>
49-
</div>
208+
<div class="right_menu">
209+
<div><span class="btn block">&nbsp;</span></div>
210+
<div><span class="btn block">&nbsp;</span></div>
211+
<div><span class="btn block">&nbsp;</span></div>
212+
<div><span class="btn block">&nbsp;</span></div>
213+
<div><span class="btn block">&nbsp;</span></div>
214+
<div><span class="btn block">&nbsp;</span></div>
215+
<div><span class="btn block">&nbsp;</span></div>
50216
</div>
51-
<div class="columns">
52-
<div class="column col">
53-
<div class="columns">
54-
<div class="column col-6">
55-
<label class="form-label" for="log">Log</label>
56-
</div>
57-
<div class="column col-6 text-right">
58-
<button class="btn btn-sm" id="btn_CLEAR_LOG">Clear log</button>
59-
</div>
60-
</div>
61-
<textarea class="form-input" id="log" rows="15"></textarea>
62-
</div>
217+
<div class="request">
218+
<textarea style="width: 100%" id="log" rows="15"></textarea>
63219
</div>
64-
<div class="columns my-2">
65-
<div class="column col">
66-
<div class="input-group">
67-
<span class="input-group-addon">Raw Hex:</span>
68-
<input type="text" class="form-input" placeholder="Please, sign your transaction" id="rawHex" readonly>
69-
<button class="btn input-group-btn btn-action" title="Copy to clipboard" id="btn_COPY"><i class="icon icon-copy"></i></button>
70-
</div>
71-
</div>
220+
<div class="run_request">
221+
<a href="#" class="btn btn_run_request" id="btn_SIGN">Sign</a>
222+
<a href="#" class="btn btn_run_request" id="btn_PUBLISH">Publish</a>
72223
</div>
73-
<div class="columns">
74-
<div class="column col-12 text-center">
75-
<div class="loading loading-lg" id="progress" style="display: none"></div>
76-
<div id="etherscanLink"></div>
77-
</div>
224+
225+
<div class="raw_hex">
226+
<label class="form-label" style="width: 70px;">Raw Hex:</label>
227+
<input type="text" class="form-input" placeholder="Please, sign your transaction" id="rawHex" readonly>
228+
</div>
229+
230+
<div class="etherscan_link">
231+
<div class="loading loading-lg" id="progress" style="display: block"></div>
232+
<div id="etherscanLink"></div>
78233
</div>
79234
</div>
235+
</div>
236+
80237
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/keychain.min.js"></script>
81238
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/keychainWeb3.min.js"></script>
82239
<script src="https://cdn.jsdelivr.net/gh/ethereum/[email protected]/dist/web3.min.js" integrity="sha256-nWBTbvxhJgjslRyuAKJHK+XcZPlCnmIAAMixz6EefVk=" crossorigin="anonymous"></script>
@@ -93,11 +250,7 @@ <h6>Documentation: <a href="https://github.com/arrayio/array-io-keychain/wiki/Ho
93250
document.getElementById('error').style.display = 'block';
94251
};
95252

96-
keychain.method({command: 'version'})
97-
.then(data => {
98-
document.body.style.backgroundColor = '#cfc';
99-
document.getElementById('version').innerText = data.result
100-
});
253+
keychain.method({command: 'version'}).then(version => { document.getElementById('version').innerText = version });
101254

102255
document.getElementById('btn_SIGN').addEventListener('click', function() {
103256
document.getElementById('etherscanLink').innerHTML = '';
@@ -143,14 +296,14 @@ <h6>Documentation: <a href="https://github.com/arrayio/array-io-keychain/wiki/Ho
143296
}
144297
});
145298

146-
document.getElementById('btn_COPY').addEventListener('click', function () {
147-
document.getElementById("rawHex").select();
148-
document.execCommand("copy");
149-
});
299+
// document.getElementById('btn_COPY').addEventListener('click', function () {
300+
// document.getElementById("rawHex").select();
301+
// document.execCommand("copy");
302+
// });
150303

151-
document.getElementById('btn_CLEAR_LOG').addEventListener('click', function () {
152-
document.getElementById('log').value = '';
153-
})
304+
// document.getElementById('btn_CLEAR_LOG').addEventListener('click', function () {
305+
// document.getElementById('log').value = '';
306+
// })
154307
};
155308

156309
function log(message) {

0 commit comments

Comments
 (0)