zervo/vanity-eth
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Improve UX

Browse source
This commit is contained in:
Boris 2017-12-26 14:13:41 +01:00
parent 6b13785d50
commit f79b616044
6 changed files with 175 additions and 92 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
css/stylesheet.css
View file

@ -1 +1 @@
body{padding:0;font-family:Lato,sans-serif;background:#000;margin:8em 0}body a{-webkit-transition:.5s all;transition:.5s all}input[type=button]{-webkit-transition:.5s all;transition:.5s all}h1,h2,h3,h4,h5,h6,label,p{margin:0}.header{margin-bottom:8em}.header h1{color:#fff;font-size:3em;font-weight:700;border:4px solid #fff;width:33%;margin:0 auto;padding:10px;font-family:Montserrat,sans-serif}.header h1 a{color:#fff;text-decoration:none;display:block}.header p{color:#fff;font-size:1.5em;letter-spacing:2px;font-weight:400;font-family:Montserrat,sans-serif;margin-top:1em}.panel{padding:1.5em 3em;background:#191919;margin-top:3em;color:#fff;font-weight:400}.form input[type=text]{width:100%;color:#fff;background:#191919;outline:0;font-size:1.3em;padding:1em 0;border:none;-webkit-appearance:none}.form input[type=button]{border:none;outline:0;color:#fff;padding:.6em;font-size:1.3em;font-weight:500;margin:1.3em 0 0 0;-webkit-appearance:none;background:#198a88;width:100%;-webkit-transition:.5s all;transition:.5s all}.form input[type=button]:hover{background:#d78716}.check{margin:.5em 0}.checkbox{margin-bottom:4px;padding-left:30px;line-height:27px;cursor:pointer;position:relative;font-size:1.2em;color:#fff;font-weight:400}.checkbox:last-child{margin-bottom:0}.checkbox i{position:absolute;bottom:4px;left:17.5em;display:block;width:19px;height:19px;outline:0;border:1px solid #97a2a8}.checkbox i.left{position:absolute;bottom:4px;left:0;display:block;width:19px;height:19px;outline:0;border:1px solid #97a2a8}.checkbox input{position:absolute;left:-9999px}.checkbox input+i:after{content:'';background:url(../images/tick-mark.png) no-repeat 1px 2px;top:4px;left:2px;width:15px;height:15px;font:normal 12px/16px FontAwesome;text-align:center;position:absolute;opacity:0;-webkit-transition:opacity .1s;transition:opacity .1s}.checkbox input:checked+i:after{opacity:1}.statistics{padding-bottom:3.2em}.statistics>div{margin-bottom:15px}.statistics>div:not(.percentage){clear:both}.probability{width:85%;margin:5px 0;height:18px;background:#191919;float:left}.probability-bar{height:100%;display:block;background-color:#d78716}.percentage{float:right;width:15%}.percentage h5{color:#fff;margin:2px 0 0 14px;font-weight:500}#address,#private-key{font-family:monospace;font-size:1.2em;color:#969696;margin-left:15px}@media screen and (max-width:1280px){.header h1{font-size:2.8em;width:32%}}@media screen and (max-width:1024px){.header h1{font-size:2.5em;border:3px solid #fff;width:34%}.header p{font-size:1.4em;margin-top:.8em}body{margin:7em 0 5em 0}.header{margin-bottom:4em}}@media screen and (max-width:768px){.header h1{width:43%}}@media screen and (max-width:640px){.header h1{width:46%;font-size:2.2em;padding:8px}.header p{font-size:1.3em;margin-top:.7em}body{margin:5em 0 4em 0}.header{margin-bottom:4em}}@media screen and (max-width:480px){.header h1{width:57%;font-size:2em;padding:7px;border:2px solid #fff}.header p{font-size:1.2em}}@media screen and (max-width:320px){.header h1{width:73%;font-size:1.6em;padding:6px}.header p{font-size:1em}} body{padding:0;font-family:Lato,sans-serif;background:#000;margin:8em 0}h1,h2,h3,h4,h5,h6,label,p{margin:0}.header{margin-bottom:8em;color:#fff;font-family:Montserrat,sans-serif}.header h1{font-size:3em;font-weight:700;border:4px solid #fff;width:33%;margin:0 auto;padding:10px}.header p{font-size:1.5em;letter-spacing:2px;font-weight:400;margin-top:1em}.description{margin:15px 0 20px;color:#888}.panel{padding:1.5em 3em;background:#191919;margin-top:2em;color:#fff;font-weight:400}.form input[type=text]{width:100%;color:#fff;background:#2d2c2c;outline:0;font-size:1.3em;padding:.5em;border:none;margin-bottom:10px;-webkit-appearance:none}.form input[type=button]{border:none;outline:0;color:#fff;padding:.6em;font-size:1.3em;font-weight:500;margin:1.3em 0 0 0;cursor:pointer;-webkit-appearance:none;background:#198a88;width:100%}.form input[type=button]:hover{background:#d78716}.form input[type=button]:disabled{background:#2d2c2c;cursor:auto}.form .error-text{display:none;font-size:.85em;color:#ec4a41}.form .error input[type=text]{border:1px solid #ec4a41}.form .error .error-text{display:block}.form .check{margin:.5em 0}.checkbox{margin-bottom:4px;padding-left:30px;line-height:27px;cursor:pointer;position:relative;font-size:1.2em;color:#fff;font-weight:400}.checkbox:last-child{margin-bottom:0}.checkbox i{position:absolute;bottom:4px;left:17.5em;display:block;width:19px;height:19px;outline:0;border:1px solid #97a2a8}.checkbox i.left{position:absolute;bottom:4px;left:0;display:block;width:19px;height:19px;outline:0;border:1px solid #97a2a8}.checkbox input{position:absolute;left:-9999px}.checkbox input+i:after{content:'';background:url(../images/tick-mark.png) no-repeat 1px 2px;top:4px;left:2px;width:15px;height:15px;font:normal 12px/16px FontAwesome;text-align:center;position:absolute;opacity:0}.checkbox input:checked+i:after{opacity:1}.result>div:not(:last-child),.statistics>div:not(:last-child){margin-bottom:15px}.statistics{padding-bottom:3.2em}.statistics>div:not(.percentage){clear:both}.probability{width:85%;margin:5px 0;height:18px;background:#2d2c2c;float:left}.probability-bar{height:100%;display:block;background-color:#d78716}.percentage{float:right;width:15%;text-align:center;position:relative;top:-10px;left:15px}.percentage div{font-size:.75em}.percentage h5{color:#fff;font-weight:500}.output{font-family:monospace;font-size:1.2em;color:#888;margin-left:15px;word-break:break-all}@media screen and (max-width:1280px){.header h1{font-size:2.8em;width:35%}}@media screen and (max-width:1024px){.header h1{font-size:2.5em;border:3px solid #fff;width:34%}.header p{font-size:1.4em;margin-top:.8em}body{margin:7em 0 5em 0}.header{margin-bottom:4em}}@media screen and (max-width:768px){.header h1{width:43%}}@media screen and (max-width:640px){.header h1{width:46%;font-size:2.2em;padding:8px}.header p{font-size:1.3em;margin-top:.7em}body{margin:5em 0 4em 0}.header{margin-bottom:4em}}@media screen and (max-width:480px){.header h1{width:65%;font-size:2em;padding:7px;border:2px solid #fff}.header p{font-size:1.2em}}@media screen and (max-width:320px){.header h1{width:73%;font-size:1.6em;padding:6px}.header p{font-size:1em}}

151
css/stylesheet.sass
View file

@ -1,74 +1,93 @@
$white-text: #fff
$grey-text: #888
$border-grey: #97A2A8
$background: #000
$panel-background: #191919
$panel-background-clear: #2d2c2c
$teal: #198a88
$yellow: #d78716
$red: #ec4a41
body body
padding: 0 padding: 0
font-family: 'Lato', sans-serif font-family: 'Lato', sans-serif
background: #000 background: $background
margin: 8em 0 margin: 8em 0
a
transition: 0.5s all
input[type="button"]
transition: 0.5s all
h1, h2, h3, h4, h5, h6, p, label h1, h2, h3, h4, h5, h6, p, label
margin: 0 margin: 0
.header .header
margin-bottom: 8em
color: $white-text
font-family: 'Montserrat', sans-serif
h1 h1
color: #fff
font-size: 3em font-size: 3em
font-weight: 700 font-weight: 700
border: 4px solid #fff border: 4px solid $white-text
width: 33% width: 33%
margin: 0 auto margin: 0 auto
padding: 10px padding: 10px
font-family: 'Montserrat', sans-serif
a
color: #fff
text-decoration: none
display: block
p p
color: #fff
font-size: 1.5em font-size: 1.5em
letter-spacing: 2px letter-spacing: 2px
font-weight: 400 font-weight: 400
font-family: 'Montserrat', sans-serif
margin-top: 1em margin-top: 1em
margin-bottom: 8em
.description
margin: 15px 0 20px
color: $grey-text
.panel .panel
padding: 1.5em 3em padding: 1.5em 3em
background: #191919 background: $panel-background
margin-top: 3em margin-top: 2em
color: #fff color: $white-text
font-weight: 400 font-weight: 400
.form input .form
&[type="text"] input
width: 100% &[type="text"]
color: #fff width: 100%
background: #191919 color: $white-text
outline: none background: $panel-background-clear
font-size: 1.3em outline: none
padding: 1em 0 font-size: 1.3em
border: none padding: 0.5em
-webkit-appearance: none border: none
&[type="button"] margin-bottom: 10px
border: none -webkit-appearance: none
outline: none &[type="button"]
color: #FFF border: none
padding: 0.6em outline: none
font-size: 1.3em color: $white-text
font-weight: 500 padding: 0.6em
margin: 1.3em 0 0 0 font-size: 1.3em
-webkit-appearance: none font-weight: 500
background: #198a88 margin: 1.3em 0 0 0
width: 100% cursor: pointer
transition: 0.5s all -webkit-appearance: none
&:hover background: $teal
background: #d78716 width: 100%
&:hover
.check background: $yellow
margin: .5em 0 &:disabled
background: $panel-background-clear
cursor: auto
.error-text
display: none
font-size: 0.85em
color: $red
.error
input[type="text"]
border: 1px solid $red
.error-text
display: block
.check
margin: .5em 0
.checkbox .checkbox
margin-bottom: 4px margin-bottom: 4px
@ -77,7 +96,7 @@ h1, h2, h3, h4, h5, h6, p, label
cursor: pointer cursor: pointer
position: relative position: relative
font-size: 1.2em font-size: 1.2em
color: #fff color: $white-text
font-weight: 400 font-weight: 400
&:last-child &:last-child
margin-bottom: 0 margin-bottom: 0
@ -89,7 +108,7 @@ h1, h2, h3, h4, h5, h6, p, label
width: 19px width: 19px
height: 19px height: 19px
outline: none outline: none
border: 1px solid #97A2A8 border: 1px solid $border-grey
&.left &.left
position: absolute position: absolute
bottom: 4px bottom: 4px
@ -98,7 +117,7 @@ h1, h2, h3, h4, h5, h6, p, label
width: 19px width: 19px
height: 19px height: 19px
outline: none outline: none
border: 1px solid #97A2A8 border: 1px solid $border-grey
input input
+ i:after + i:after
content: '' content: ''
@ -111,24 +130,24 @@ h1, h2, h3, h4, h5, h6, p, label
text-align: center text-align: center
position: absolute position: absolute
opacity: 0 opacity: 0
transition: opacity 0.1s
position: absolute position: absolute
left: -9999px left: -9999px
&:checked + i:after &:checked + i:after
opacity: 1 opacity: 1
.statistics > div:not(:last-child), .result > div:not(:last-child)
margin-bottom: 15px
.statistics .statistics
padding-bottom: 3.2em padding-bottom: 3.2em
> div > div:not(.percentage)
margin-bottom: 15px clear: both
&:not(.percentage)
clear: both
.probability .probability
width: 85% width: 85%
margin: 5px 0 margin: 5px 0
height: 18px height: 18px
background: #191919 background: $panel-background-clear
float: left float: left
.probability-bar .probability-bar
@ -139,29 +158,35 @@ h1, h2, h3, h4, h5, h6, p, label
.percentage .percentage
float: right float: right
width: 15% width: 15%
text-align: center
position: relative
top: -10px
left: 15px
div
font-size: 0.75em
h5 h5
color: #fff color: $white-text
margin: 2px 0 0 14px
font-weight: 500 font-weight: 500
#address, #private-key .output
font-family: monospace font-family: monospace
font-size: 1.2em font-size: 1.2em
color: #969696 color: $grey-text
margin-left: 15px margin-left: 15px
word-break: break-all
/*-- Responsive design -- /*-- Responsive design --
@media screen and (max-width: 1280px) @media screen and (max-width: 1280px)
.header h1 .header h1
font-size: 2.8em font-size: 2.8em
width: 32% width: 35%
@media screen and (max-width: 1024px) @media screen and (max-width: 1024px)
.header .header
h1 h1
font-size: 2.5em font-size: 2.5em
border: 3px solid #fff border: 3px solid $white-text
width: 34% width: 34%
p p
font-size: 1.4em font-size: 1.4em
@ -192,10 +217,10 @@ h1, h2, h3, h4, h5, h6, p, label
@media screen and (max-width: 480px) @media screen and (max-width: 480px)
.header .header
h1 h1
width: 57% width: 65%
font-size: 2em font-size: 2em
padding: 7px padding: 7px
border: 2px solid #fff border: 2px solid $white-text
p p
font-size: 1.2em font-size: 1.2em

48
index.html
View file

@ -20,14 +20,35 @@
<body> <body>
<div class="container"> <div class="container">
<div class="header text-center"> <div class="header text-center">
<h1><a href="#">VANITY-ETH</a></h1> <h1>VANITY-ETH</h1>
<p>Vanity ETH address generator</p> <p>Vanity ETH address generator</p>
</div> </div>
<div class="row">
<div class="col-md-12">
<div class="panel">
<h4>Usage</h4>
<p class="description">
Vanity-ETH is a browser-based tool to generate an vanity Ethereum address.<br>
Enter the prefix of your choice below, then click 'generate' to start.<br>
Ethereum addresses are hexadecimal, which means your prefix can only contain numbers and letters
from A to F.
</p>
<h4>How it works</h4>
<p class="description">
You browser will generate a ton of random addresses until one of them starts with your prefix.<br>
Everything is computed by your browser, so you should notice a better speed on a powerful
computer.<br>
Nothing ever leaves your machine, or even your browser tab.
</p>
</div>
</div>
</div>
<div class="row"> <div class="row">
<div class="col-md-6"> <div class="col-md-6">
<div class="panel form"> <div class="panel form">
<form> <form id="form">
<input type="text" placeholder="Pattern" id="pattern"> <div class="error-text">Numbers and letters from A to F only</div>
<input type="text" placeholder="Prefix" id="prefix">
<div class="check"> <div class="check">
<label class="checkbox"> <label class="checkbox">
<input type="checkbox" name="checkbox" id="checksum" checked=""> <input type="checkbox" name="checkbox" id="checksum" checked="">
@ -40,7 +61,7 @@
<input type="button" id="gen" value="Generate"> <input type="button" id="gen" value="Generate">
</div> </div>
<div class="col-lg-6 col-sm-12"> <div class="col-lg-6 col-sm-12">
<input type="button" id="stop" value="Stop"> <input type="button" id="stop" value="Stop" disabled="">
</div> </div>
</div> </div>
</form> </form>
@ -48,26 +69,29 @@
</div> </div>
<div class="col-md-6"> <div class="col-md-6">
<div class="panel statistics"> <div class="panel statistics">
<div>Difficulty: <span id="difficulty"></span></div> <div>Difficulty: <span id="difficulty" class="output">1</span></div>
<div>Generated: <span id="counter"></span></div> <div>Generated: <span id="counter" class="output">0 addresses</span></div>
<div>Speed: <span id="speed"></span></div> <div>Speed: <span id="speed" class="output">0 addr/s</span></div>
<div>Status: <span id="status" class="output">Waiting</span></div>
<!--Probability:--> <!--Probability:-->
<div class="probability"> <div class="probability">
<div class="probability-bar" id="probability-bar" style="width:0"></div> <div class="probability-bar" id="probability-bar" style="width:0"></div>
</div> </div>
<div class="percentage"><h5 id="probability"></h5></div> <div class="percentage">
<h5 id="probability">0%</h5>
<div>Probability</div>
</div>
</div> </div>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-md-12"> <div class="col-md-12">
<div class="panel"> <div class="panel result">
<div>Address: <span id="address"></span></div> <div>Address: <span id="address" class="output"></span></div>
<div>Private key: <span id="private-key"></span></div> <div>Private key: <span id="private-key" class="output"></span></div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<!--JS--> <!--JS-->

2
js/bundle.js
View file

File diff suppressed because one or more lines are too long

61
js/index.js
View file

@ -7,18 +7,33 @@ let stop = false;
let lastTick = null; let lastTick = null;
let difficulty = 0; let difficulty = 0;
const step = 250; const step = 250;
const elements = { const elements = {};
counter: document.getElementById('counter'), const ids = {
speed: document.getElementById('speed'), counter: 'counter',
probability: document.getElementById('probability'), speed: 'speed',
probabilityBar: document.getElementById('probability-bar') probability: 'probability',
probabilityBar: 'probability-bar',
status: 'status',
genBtn: 'gen',
stopBtn: 'stop',
form: 'form'
}; };
const parseInput = () => { const parseInput = () => {
return { const input = {
pattern: document.getElementById('pattern').value, prefix: document.getElementById('prefix').value,
checksum: document.getElementById('checksum').checked checksum: document.getElementById('checksum').checked
}; };
if (!vanity.isValidHex(input.prefix)) {
elements.form.className = 'error';
return;
}
elements.form.className = '';
difficulty = vanity.computeDifficulty(input.prefix, input.checksum);
document.getElementById('difficulty').innerText = difficulty.toString();
return input;
}; };
const incrementCounter = incr => { const incrementCounter = incr => {
@ -26,7 +41,7 @@ const incrementCounter = incr => {
elements.counter.innerText = count.toString() + (count === 1 ? ' address' : ' addresses'); elements.counter.innerText = count.toString() + (count === 1 ? ' address' : ' addresses');
const currentTick = performance.now(); const currentTick = performance.now();
elements.speed.innerText = Math.floor(1000 * incr / (currentTick - lastTick)) + ' addresses / second'; elements.speed.innerText = Math.floor(1000 * incr / (currentTick - lastTick)) + ' addr/s';
lastTick = currentTick; lastTick = currentTick;
}; };
@ -41,11 +56,20 @@ const displayResult = result => {
updateStats(); updateStats();
document.getElementById('address').innerText = result ? result.address : ''; document.getElementById('address').innerText = result ? result.address : '';
document.getElementById('private-key').innerText = result ? result.privKey : ''; document.getElementById('private-key').innerText = result ? result.privKey : '';
elements.status.innerText = result ? 'Address found' : 'Running';
};
const toggleButtons = genBtn => {
const enabled = genBtn ? elements.genBtn : elements.stopBtn;
const disabled = genBtn ? elements.stopBtn : elements.genBtn;
enabled.removeAttribute('disabled');
disabled.setAttribute('disabled', '');
}; };
const generate = input => { const generate = input => {
const add = vanity.getVanityWallet(input.pattern, input.checksum, step); const add = vanity.getVanityWallet(input.prefix, input.checksum, step);
if (add !== null) { if (add !== null) {
toggleButtons(true);
return displayResult(add); return displayResult(add);
} }
@ -53,6 +77,7 @@ const generate = input => {
updateStats(); updateStats();
if (stop) { if (stop) {
elements.status.innerText = 'Stopped';
return; return;
} }
@ -60,18 +85,26 @@ const generate = input => {
setTimeout(() => generate(input), 0); setTimeout(() => generate(input), 0);
}; };
for (const e in ids) { // eslint-disable-line guard-for-in
elements[e] = document.getElementById(ids[e]);
}
// Add event listeners on buttons // Add event listeners on buttons
document.getElementById('gen').addEventListener('click', () => { elements.genBtn.addEventListener('click', () => {
incrementCounter(-count); incrementCounter(-count);
displayResult(null); displayResult(null);
stop = false; stop = false;
const input = parseInput(); const input = parseInput();
difficulty = vanity.computeDifficulty(input.pattern, input.checksum); toggleButtons(false);
document.getElementById('difficulty').innerText = difficulty.toString();
generate(input); setTimeout(() => generate(input), 0);
}); });
document.getElementById('stop').addEventListener('click', () => { elements.stopBtn.addEventListener('click', () => {
toggleButtons(true);
stop = true; stop = true;
}); });
elements.form.addEventListener('change', () => parseInput());
elements.form.addEventListener('keyup', () => parseInput());

3
js/vanity.js
View file

@ -77,5 +77,6 @@ const getVanityWallet = (input, isChecksum, max) => {
module.exports = { module.exports = {
getVanityWallet, getVanityWallet,
computeDifficulty, computeDifficulty,
computeProbability computeProbability,
isValidHex
}; };