Use VueJS framework
This commit is contained in:
Boris Kubiak
parent
5cd997f6ec
commit
0dada27d1c
2 changed files with 97 additions and 128 deletions
29
index.html
29
index.html
|
|
@ -18,7 +18,7 @@
|
|||
rel='stylesheet' type='text/css'>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="container" id="app">
|
||||
<div class="header text-center">
|
||||
<h1>VANITY-ETH</h1>
|
||||
<p>Vanity ETH address generator</p>
|
||||
|
|
@ -46,22 +46,22 @@
|
|||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="panel form">
|
||||
<form id="form">
|
||||
<form :class="{error: inputError}">
|
||||
<div class="error-text">Numbers and letters from A to F only</div>
|
||||
<input type="text" placeholder="Prefix" id="prefix">
|
||||
<input type="text" placeholder="Prefix" v-model="input.prefix" :disabled="running">
|
||||
<div class="check">
|
||||
<label class="checkbox">
|
||||
<input type="checkbox" name="checkbox" id="checksum" checked="">
|
||||
<input type="checkbox" name="checkbox" checked="" v-model="input.checksum" :disabled="running">
|
||||
<i class="left"> </i>
|
||||
Case-sensitive
|
||||
</label>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-lg-6 col-sm-12">
|
||||
<input type="button" id="gen" value="Generate">
|
||||
<input type="button" value="Generate" @click="startGen" :disabled="running || inputError">
|
||||
</div>
|
||||
<div class="col-lg-6 col-sm-12">
|
||||
<input type="button" id="stop" value="Stop" disabled="">
|
||||
<input type="button" value="Stop" @click="stopGen" :disabled="!running">
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
|
@ -69,16 +69,16 @@
|
|||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="panel statistics">
|
||||
<div>Difficulty: <span id="difficulty" class="output">1</span></div>
|
||||
<div>Generated: <span id="counter" class="output">0 addresses</span></div>
|
||||
<div>Speed: <span id="speed" class="output">0 addr/s</span></div>
|
||||
<div>Status: <span id="status" class="output">Waiting</span></div>
|
||||
<div>Difficulty: <span class="output" v-text="difficulty">1</span></div>
|
||||
<div>Generated: <span class="output" v-text="count + (count === 1 ? ' address' : ' addresses')">0 addresses</span></div>
|
||||
<div>Speed: <span class="output" v-text="speed">0 addr/s</span></div>
|
||||
<div>Status: <span class="output" v-text="status">Waiting</span></div>
|
||||
<!--Probability:-->
|
||||
<div class="probability">
|
||||
<div class="probability-bar" id="probability-bar" style="width:0"></div>
|
||||
<div class="probability-bar" :style="'width:' + probability + '%'"></div>
|
||||
</div>
|
||||
<div class="percentage">
|
||||
<h5 id="probability">0%</h5>
|
||||
<h5 v-text="probability + '%'">0%</h5>
|
||||
<div>Probability</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -87,8 +87,8 @@
|
|||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="panel result">
|
||||
<div>Address: <span id="address" class="output"></span></div>
|
||||
<div>Private key: <span id="private-key" class="output"></span></div>
|
||||
<div>Address: <span class="output" v-text="result.address"></span></div>
|
||||
<div>Private key: <span class="output" v-text="result.privateKey"></span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -96,6 +96,7 @@
|
|||
|
||||
<!--JS-->
|
||||
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>-->
|
||||
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
|
||||
<script src="js/bundle.js" type="text/javascript"></script>
|
||||
<script src="js/index.js" type="text/javascript"></script>
|
||||
</body>
|
||||
|
|
|
|||
170
js/index.js
170
js/index.js
|
|
@ -1,120 +1,88 @@
|
|||
/* eslint-env browser */
|
||||
/* global vanity:false */
|
||||
/* global vanity:false, Vue:false */
|
||||
|
||||
let count = 0;
|
||||
let stop = false;
|
||||
let lastTick = null;
|
||||
let firstTick = null;
|
||||
let difficulty = 0;
|
||||
const step = 250;
|
||||
const elements = {};
|
||||
const ids = {
|
||||
counter: 'counter',
|
||||
speed: 'speed',
|
||||
probability: 'probability',
|
||||
probabilityBar: 'probability-bar',
|
||||
status: 'status',
|
||||
genBtn: 'gen',
|
||||
stopBtn: 'stop',
|
||||
form: 'form'
|
||||
};
|
||||
|
||||
const parseInput = () => {
|
||||
const input = {
|
||||
prefix: document.getElementById('prefix').value,
|
||||
checksum: document.getElementById('checksum').checked
|
||||
};
|
||||
|
||||
if (!vanity.isValidHex(input.prefix)) {
|
||||
elements.form.className = 'error';
|
||||
return;
|
||||
// eslint-disable-next-line no-new
|
||||
new Vue({
|
||||
el: '#app',
|
||||
data: {
|
||||
count: 0,
|
||||
lastTick: null,
|
||||
firstTick: null,
|
||||
running: false,
|
||||
step: 250,
|
||||
speed: '0 addr/s',
|
||||
status: 'Waiting',
|
||||
result: {
|
||||
address: '',
|
||||
privateKey: ''
|
||||
},
|
||||
input: {
|
||||
prefix: '',
|
||||
checksum: true
|
||||
}
|
||||
},
|
||||
|
||||
elements.form.className = '';
|
||||
difficulty = vanity.computeDifficulty(input.prefix, input.checksum);
|
||||
document.getElementById('difficulty').innerText = difficulty.toString();
|
||||
return input;
|
||||
};
|
||||
|
||||
const incrementCounter = incr => {
|
||||
count += incr;
|
||||
elements.counter.innerText = count.toString() + (count === 1 ? ' address' : ' addresses');
|
||||
|
||||
computed: {
|
||||
inputError() {
|
||||
return !vanity.isValidHex(this.input.prefix);
|
||||
},
|
||||
difficulty() {
|
||||
return this.inputError ? 'N/A' : vanity.computeDifficulty(this.input.prefix, this.input.checksum);
|
||||
},
|
||||
probability() {
|
||||
return Math.round(10000 * vanity.computeProbability(this.difficulty, this.count)) / 100;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
incrementCounter(incr) {
|
||||
this.count += incr;
|
||||
const currentTick = performance.now();
|
||||
elements.speed.innerText = incr > 0 ? Math.floor(1000 * incr / (currentTick - lastTick)) + ' addr/s' : '0 addr/s';
|
||||
lastTick = currentTick;
|
||||
};
|
||||
this.speed = incr > 0 ? Math.floor(1000 * incr / (currentTick - this.lastTick)) + ' addr/s' : '0 addr/s';
|
||||
this.lastTick = currentTick;
|
||||
},
|
||||
|
||||
const updateStats = () => {
|
||||
const prob = Math.round(10000 * vanity.computeProbability(difficulty, count)) / 100;
|
||||
elements.probability.innerText = prob + '%';
|
||||
elements.probabilityBar.style.width = prob + '%';
|
||||
};
|
||||
displayResult(result) {
|
||||
this.incrementCounter(result.attempts);
|
||||
this.result.address = result.address;
|
||||
this.result.privateKey = result.privKey;
|
||||
this.status = 'Address found';
|
||||
this.speed = Math.floor(1000 * this.count / (performance.now() - this.firstTick)) + ' addr/s';
|
||||
},
|
||||
|
||||
const displayResult = result => {
|
||||
incrementCounter(result.attempts);
|
||||
document.getElementById('address').innerText = result.address;
|
||||
document.getElementById('private-key').innerText = result.privKey;
|
||||
elements.status.innerText = 'Address found';
|
||||
console.info('Average speed: ' + Math.floor(1000 * count / (performance.now() - firstTick)) + ' addr/s');
|
||||
updateStats();
|
||||
};
|
||||
clearResult() {
|
||||
this.result.address = '';
|
||||
this.result.privateKey = '';
|
||||
},
|
||||
|
||||
const clearResult = () => {
|
||||
document.getElementById('address').innerText = '';
|
||||
document.getElementById('private-key').innerText = '';
|
||||
elements.status.innerText = 'Running';
|
||||
updateStats();
|
||||
};
|
||||
|
||||
const toggleButtons = () => {
|
||||
const enabled = stop ? elements.genBtn : elements.stopBtn;
|
||||
const disabled = stop ? elements.stopBtn : elements.genBtn;
|
||||
enabled.removeAttribute('disabled');
|
||||
disabled.setAttribute('disabled', '');
|
||||
};
|
||||
|
||||
const generate = input => {
|
||||
const add = vanity.getVanityWallet(input.prefix, input.checksum, step);
|
||||
generate() {
|
||||
const add = vanity.getVanityWallet(this.input.prefix, this.input.checksum, this.step);
|
||||
if (add !== null) {
|
||||
stop = true;
|
||||
toggleButtons();
|
||||
return displayResult(add);
|
||||
this.running = false;
|
||||
return this.displayResult(add);
|
||||
}
|
||||
|
||||
incrementCounter(step);
|
||||
updateStats();
|
||||
this.incrementCounter(this.step);
|
||||
|
||||
if (stop) {
|
||||
elements.status.innerText = 'Stopped';
|
||||
if (!this.running) {
|
||||
this.status = 'Stopped';
|
||||
return;
|
||||
}
|
||||
|
||||
// Use setTimeout to let the browser render
|
||||
setTimeout(() => generate(input), 0);
|
||||
};
|
||||
setTimeout(() => this.generate(), 0);
|
||||
},
|
||||
|
||||
for (const e in ids) { // eslint-disable-line guard-for-in
|
||||
elements[e] = document.getElementById(ids[e]);
|
||||
startGen() {
|
||||
this.firstTick = performance.now();
|
||||
this.incrementCounter(-this.count);
|
||||
this.clearResult();
|
||||
this.running = true;
|
||||
|
||||
setTimeout(() => this.generate(), 0);
|
||||
},
|
||||
|
||||
stopGen() {
|
||||
this.running = false;
|
||||
}
|
||||
}
|
||||
|
||||
// Add event listeners on buttons
|
||||
elements.genBtn.addEventListener('click', () => {
|
||||
firstTick = performance.now();
|
||||
incrementCounter(-count);
|
||||
clearResult();
|
||||
|
||||
const input = parseInput();
|
||||
stop = false;
|
||||
toggleButtons();
|
||||
|
||||
setTimeout(() => generate(input), 0);
|
||||
});
|
||||
|
||||
elements.stopBtn.addEventListener('click', () => {
|
||||
stop = true;
|
||||
toggleButtons();
|
||||
});
|
||||
|
||||
elements.form.addEventListener('change', () => parseInput());
|
||||
elements.form.addEventListener('keyup', () => parseInput());
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue