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

Use VueJS framework

Browse source
This commit is contained in:
Boris Kubiak 2018-01-02 20:57:37 +01:00
parent 5cd997f6ec
commit 0dada27d1c
2 changed files with 97 additions and 128 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

29
index.html
View file

@ -18,7 +18,7 @@
rel='stylesheet' type='text/css'> rel='stylesheet' type='text/css'>
</head> </head>
<body> <body>
<div class="container"> <div class="container" id="app">
<div class="header text-center"> <div class="header text-center">
<h1>VANITY-ETH</h1> <h1>VANITY-ETH</h1>
<p>Vanity ETH address generator</p> <p>Vanity ETH address generator</p>
@ -46,22 +46,22 @@
<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 id="form"> <form :class="{error: inputError}">
<div class="error-text">Numbers and letters from A to F only</div> <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"> <div class="check">
<label class="checkbox"> <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> <i class="left"> </i>
Case-sensitive Case-sensitive
</label> </label>
</div> </div>
<div class="row"> <div class="row">
<div class="col-lg-6 col-sm-12"> <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>
<div class="col-lg-6 col-sm-12"> <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>
</div> </div>
</form> </form>
@ -69,16 +69,16 @@
</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" class="output">1</span></div> <div>Difficulty: <span class="output" v-text="difficulty">1</span></div>
<div>Generated: <span id="counter" class="output">0 addresses</span></div> <div>Generated: <span class="output" v-text="count + (count === 1 ? ' address' : ' addresses')">0 addresses</span></div>
<div>Speed: <span id="speed" class="output">0 addr/s</span></div> <div>Speed: <span class="output" v-text="speed">0 addr/s</span></div>
<div>Status: <span id="status" class="output">Waiting</span></div> <div>Status: <span class="output" v-text="status">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" :style="'width:' + probability + '%'"></div>
</div> </div>
<div class="percentage"> <div class="percentage">
<h5 id="probability">0%</h5> <h5 v-text="probability + '%'">0%</h5>
<div>Probability</div> <div>Probability</div>
</div> </div>
</div> </div>
@ -87,8 +87,8 @@
<div class="row"> <div class="row">
<div class="col-md-12"> <div class="col-md-12">
<div class="panel result"> <div class="panel result">
<div>Address: <span id="address" class="output"></span></div> <div>Address: <span class="output" v-text="result.address"></span></div>
<div>Private key: <span id="private-key" class="output"></span></div> <div>Private key: <span class="output" v-text="result.privateKey"></span></div>
</div> </div>
</div> </div>
</div> </div>
@ -96,6 +96,7 @@
<!--JS--> <!--JS-->
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>--> <!--<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/bundle.js" type="text/javascript"></script>
<script src="js/index.js" type="text/javascript"></script> <script src="js/index.js" type="text/javascript"></script>
</body> </body>

196
js/index.js
View file

@ -1,120 +1,88 @@
/* eslint-env browser */ /* eslint-env browser */
/* global vanity:false */ /* global vanity:false, Vue:false */
let count = 0; // eslint-disable-next-line no-new
let stop = false; new Vue({
let lastTick = null; el: '#app',
let firstTick = null; data: {
let difficulty = 0; count: 0,
const step = 250; lastTick: null,
const elements = {}; firstTick: null,
const ids = { running: false,
counter: 'counter', step: 250,
speed: 'speed', speed: '0 addr/s',
probability: 'probability', status: 'Waiting',
probabilityBar: 'probability-bar', result: {
status: 'status', address: '',
genBtn: 'gen', privateKey: ''
stopBtn: 'stop', },
form: 'form' input: {
}; prefix: '',
checksum: true
}
},
const parseInput = () => { computed: {
const input = { inputError() {
prefix: document.getElementById('prefix').value, return !vanity.isValidHex(this.input.prefix);
checksum: document.getElementById('checksum').checked },
}; 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();
this.speed = incr > 0 ? Math.floor(1000 * incr / (currentTick - this.lastTick)) + ' addr/s' : '0 addr/s';
this.lastTick = currentTick;
},
if (!vanity.isValidHex(input.prefix)) { displayResult(result) {
elements.form.className = 'error'; this.incrementCounter(result.attempts);
return; 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';
},
clearResult() {
this.result.address = '';
this.result.privateKey = '';
},
generate() {
const add = vanity.getVanityWallet(this.input.prefix, this.input.checksum, this.step);
if (add !== null) {
this.running = false;
return this.displayResult(add);
}
this.incrementCounter(this.step);
if (!this.running) {
this.status = 'Stopped';
return;
}
// Use setTimeout to let the browser render
setTimeout(() => this.generate(), 0);
},
startGen() {
this.firstTick = performance.now();
this.incrementCounter(-this.count);
this.clearResult();
this.running = true;
setTimeout(() => this.generate(), 0);
},
stopGen() {
this.running = false;
}
} }
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');
const currentTick = performance.now();
elements.speed.innerText = incr > 0 ? Math.floor(1000 * incr / (currentTick - lastTick)) + ' addr/s' : '0 addr/s';
lastTick = currentTick;
};
const updateStats = () => {
const prob = Math.round(10000 * vanity.computeProbability(difficulty, count)) / 100;
elements.probability.innerText = prob + '%';
elements.probabilityBar.style.width = prob + '%';
};
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();
};
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);
if (add !== null) {
stop = true;
toggleButtons();
return displayResult(add);
}
incrementCounter(step);
updateStats();
if (stop) {
elements.status.innerText = 'Stopped';
return;
}
// Use setTimeout to let the browser render
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
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());