Split app into Vue components
This commit is contained in:
Boris Kubiak
parent
78323b3bd7
commit
2103d4ff1d
11 changed files with 661 additions and 494 deletions
189
src/App.vue
189
src/App.vue
|
|
@ -1,47 +1,81 @@
|
||||||
<template src="./templates/App.html"></template>
|
<template>
|
||||||
|
<div>
|
||||||
|
<div class="container">
|
||||||
|
<headline></headline>
|
||||||
|
|
||||||
|
<!--Description-->
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-md-12">
|
||||||
|
<description></description>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!--Error-->
|
||||||
|
<div v-if="error" class="row">
|
||||||
|
<div class="col-md-12">
|
||||||
|
<error :error="error"></error>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="row">
|
||||||
|
<!--User input-->
|
||||||
|
<div class="col-md-6">
|
||||||
|
<userInput :running="running" :cores="cores"
|
||||||
|
@start="startGen" @stop="stopGen" @input-change="setInput"></userInput>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!--Statistics-->
|
||||||
|
<div class="col-md-6">
|
||||||
|
<statistics :prefix="input.prefix" :checksum="input.checksum" :status="status"
|
||||||
|
:first-tick="firstTick"></statistics>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!--Result-->
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-md-12">
|
||||||
|
<result :address="result.address" :private-key="result.privateKey"></result>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!--Github corner-->
|
||||||
|
<corner></corner>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import Worker from './js/vanity.js';
|
import Worker from './js/vanity.js';
|
||||||
|
|
||||||
|
import Headline from './vue/Headline';
|
||||||
|
import Description from './vue/Description';
|
||||||
|
import Err from './vue/Error';
|
||||||
|
import Input from './vue/Input';
|
||||||
|
import Statistics from './vue/Statistics';
|
||||||
|
import Result from './vue/Result';
|
||||||
import Corner from './vue/Corner';
|
import Corner from './vue/Corner';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
corner: Corner
|
headline: Headline,
|
||||||
|
description: Description,
|
||||||
|
error: Err,
|
||||||
|
userInput: Input,
|
||||||
|
statistics: Statistics,
|
||||||
|
result: Result,
|
||||||
|
corner: Corner,
|
||||||
},
|
},
|
||||||
data: function () {
|
data: function () {
|
||||||
return {
|
return {
|
||||||
count: 0,
|
|
||||||
firstTick: null,
|
|
||||||
running: false,
|
running: false,
|
||||||
speed: 0,
|
|
||||||
status: 'Waiting',
|
status: 'Waiting',
|
||||||
workers: [],
|
workers: [],
|
||||||
threads: 4,
|
threads: 4,
|
||||||
cores: 0,
|
cores: 0,
|
||||||
result: {
|
result: {address: '', privateKey: ''},
|
||||||
address: '',
|
input: {prefix: '', checksum: true},
|
||||||
privateKey: ''
|
firstTick: null,
|
||||||
},
|
error: null
|
||||||
input: {
|
|
||||||
prefix: '',
|
|
||||||
checksum: true
|
|
||||||
},
|
|
||||||
error: false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
computed: {
|
|
||||||
inputError: function () {
|
|
||||||
return !isValidHex(this.input.prefix);
|
|
||||||
},
|
|
||||||
difficulty: function () {
|
|
||||||
return this.inputError ? 'N/A' : computeDifficulty(this.input.prefix, this.input.checksum);
|
|
||||||
},
|
|
||||||
probability50: function () {
|
|
||||||
return this.inputError ? 'N/A' : this.formatNum(Math.floor(Math.log(0.5) / Math.log(1 - (1 / this.difficulty)))) + ' addresses';
|
|
||||||
},
|
|
||||||
probability: function () {
|
|
||||||
return Math.round(10000 * computeProbability(this.difficulty, this.count)) / 100;
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
|
|
@ -52,13 +86,21 @@
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
incrementCounter: function (incr) {
|
setInput: function (inputType, value) {
|
||||||
this.count += incr;
|
switch (inputType) {
|
||||||
this.speed = incr > 0 ? Math.floor(1000 * this.count / (performance.now() - this.firstTick)) : 0;
|
case 'prefix':
|
||||||
|
this.input.prefix = value;
|
||||||
|
break;
|
||||||
|
case 'checksum':
|
||||||
|
this.input.checksum = value;
|
||||||
|
break;
|
||||||
|
case 'threads':
|
||||||
|
this.threads = value;
|
||||||
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
displayResult: function (result) {
|
displayResult: function (result) {
|
||||||
this.incrementCounter(result.attempts);
|
this.$emit('increment-counter', result.attempts);
|
||||||
this.result.address = result.address;
|
this.result.address = result.address;
|
||||||
this.result.privateKey = result.privKey;
|
this.result.privateKey = result.privKey;
|
||||||
this.status = 'Address found';
|
this.status = 'Address found';
|
||||||
|
|
@ -67,7 +109,7 @@
|
||||||
clearResult: function () {
|
clearResult: function () {
|
||||||
this.result.address = '';
|
this.result.address = '';
|
||||||
this.result.privateKey = '';
|
this.result.privateKey = '';
|
||||||
this.incrementCounter(-this.count);
|
this.$emit('increment-counter', -1);
|
||||||
},
|
},
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
@ -112,8 +154,7 @@
|
||||||
this.stopGen();
|
this.stopGen();
|
||||||
return this.displayResult(wallet);
|
return this.displayResult(wallet);
|
||||||
}
|
}
|
||||||
|
this.$emit('increment-counter', wallet.attempts);
|
||||||
this.incrementCounter(wallet.attempts);
|
|
||||||
},
|
},
|
||||||
|
|
||||||
startGen: function () {
|
startGen: function () {
|
||||||
|
|
@ -157,9 +198,6 @@
|
||||||
this.threads = this.cores;
|
this.threads = this.cores;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
formatNum: function (num) {
|
|
||||||
return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ' ');
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
|
|
||||||
created: function () {
|
created: function () {
|
||||||
|
|
@ -168,19 +206,6 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const isValidHex = function (hex) {
|
|
||||||
return hex.length ? /^[0-9A-F]+$/g.test(hex.toUpperCase()) : true;
|
|
||||||
};
|
|
||||||
|
|
||||||
const computeDifficulty = function (pattern, isChecksum) {
|
|
||||||
const ret = Math.pow(16, pattern.length);
|
|
||||||
return isChecksum ? (ret * Math.pow(2, pattern.replace(/[^a-f]/gi, '').length)) : ret;
|
|
||||||
};
|
|
||||||
|
|
||||||
const computeProbability = function (difficulty, attempts) {
|
|
||||||
return 1 - Math.pow(1 - (1 / difficulty), attempts);
|
|
||||||
};
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="sass">
|
<style lang="sass">
|
||||||
|
|
@ -193,6 +218,62 @@
|
||||||
@import "~bootstrap/scss/reboot"
|
@import "~bootstrap/scss/reboot"
|
||||||
@import "~bootstrap/scss/grid"
|
@import "~bootstrap/scss/grid"
|
||||||
|
|
||||||
// Custom style
|
@import "css/variables"
|
||||||
@import "css/stylesheet.sass"
|
body
|
||||||
|
padding: 0
|
||||||
|
font-family: 'Lato', sans-serif
|
||||||
|
background: $background
|
||||||
|
margin: 8em 0
|
||||||
|
|
||||||
|
h1, h2, h3, h4, h5, h6, p, label
|
||||||
|
margin: 0
|
||||||
|
font-weight: normal
|
||||||
|
|
||||||
|
a, a:visited, a:hover
|
||||||
|
color: $grey-text
|
||||||
|
text-decoration: underline
|
||||||
|
|
||||||
|
a:hover
|
||||||
|
color: $white-text
|
||||||
|
|
||||||
|
.panel
|
||||||
|
padding: 1.5em 3em
|
||||||
|
background-color: $panel-background
|
||||||
|
margin-top: 2em
|
||||||
|
color: $white-text
|
||||||
|
font-weight: 400
|
||||||
|
|
||||||
|
/*-- Fonts --*/
|
||||||
|
|
||||||
|
@font-face
|
||||||
|
font-family: 'Lato'
|
||||||
|
font-style: normal
|
||||||
|
font-weight: 400
|
||||||
|
src: local('Lato Regular'), local('Lato-Regular'), url(./assets/fonts/lato-regular.woff2) format('woff2')
|
||||||
|
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+2215
|
||||||
|
|
||||||
|
@font-face
|
||||||
|
font-family: 'Montserrat'
|
||||||
|
font-style: normal
|
||||||
|
font-weight: 400
|
||||||
|
src: local('Montserrat Regular'), local('Montserrat-Regular'), url(./assets/fonts/montserrat.woff2) format('woff2')
|
||||||
|
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+2215
|
||||||
|
|
||||||
|
@font-face
|
||||||
|
font-family: 'Montserrat'
|
||||||
|
font-style: normal
|
||||||
|
font-weight: 700
|
||||||
|
src: local('Montserrat Bold'), local('Montserrat-Bold'), url(./assets/fonts/montserrat-bold.woff2) format('woff2')
|
||||||
|
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+2215
|
||||||
|
|
||||||
|
/*-- Responsive design --
|
||||||
|
|
||||||
|
@media screen and (max-width: 1024px)
|
||||||
|
body
|
||||||
|
margin: 7em 0 5em 0
|
||||||
|
|
||||||
|
@media screen and (max-width: 640px)
|
||||||
|
body
|
||||||
|
margin: 5em 0 4em 0
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -1,313 +0,0 @@
|
||||||
$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
|
|
||||||
padding: 0
|
|
||||||
font-family: 'Lato', sans-serif
|
|
||||||
background: $background
|
|
||||||
margin: 8em 0
|
|
||||||
|
|
||||||
h1, h2, h3, h4, h5, h6, p, label
|
|
||||||
margin: 0
|
|
||||||
font-weight: normal
|
|
||||||
|
|
||||||
[v-cloak]
|
|
||||||
display: none
|
|
||||||
|
|
||||||
a, a:visited, a:hover
|
|
||||||
color: $grey-text
|
|
||||||
text-decoration: underline
|
|
||||||
|
|
||||||
a:hover
|
|
||||||
color: $white-text
|
|
||||||
|
|
||||||
.header
|
|
||||||
margin-bottom: 8em
|
|
||||||
color: $white-text
|
|
||||||
font-family: 'Montserrat', sans-serif
|
|
||||||
text-align: center
|
|
||||||
|
|
||||||
h1
|
|
||||||
font-size: 3em
|
|
||||||
font-weight: 700
|
|
||||||
border: 4px solid $white-text
|
|
||||||
width: 33%
|
|
||||||
margin: 0 auto
|
|
||||||
padding: 1px
|
|
||||||
|
|
||||||
p
|
|
||||||
font-size: 1.5em
|
|
||||||
letter-spacing: 2px
|
|
||||||
font-weight: 400
|
|
||||||
margin-top: 1em
|
|
||||||
|
|
||||||
.panel
|
|
||||||
padding: 1.5em 3em
|
|
||||||
background-color: $panel-background
|
|
||||||
margin-top: 2em
|
|
||||||
color: $white-text
|
|
||||||
font-weight: 400
|
|
||||||
&.error
|
|
||||||
background-color: $red
|
|
||||||
a, a:visited, a:hover
|
|
||||||
color: $white-text
|
|
||||||
text-decoration: underline
|
|
||||||
|
|
||||||
.description
|
|
||||||
p
|
|
||||||
margin: 15px 0 20px
|
|
||||||
color: $grey-text
|
|
||||||
.form
|
|
||||||
input
|
|
||||||
&[type="text"]
|
|
||||||
width: 100%
|
|
||||||
color: $white-text
|
|
||||||
background: $panel-background-clear
|
|
||||||
outline: none
|
|
||||||
font-size: 1.3em
|
|
||||||
padding: 0.5em
|
|
||||||
border: none
|
|
||||||
margin-bottom: 10px
|
|
||||||
-webkit-appearance: none
|
|
||||||
&[type="button"]
|
|
||||||
border: none
|
|
||||||
outline: none
|
|
||||||
color: $white-text
|
|
||||||
padding: 0.6em
|
|
||||||
font-size: 1.3em
|
|
||||||
font-weight: 500
|
|
||||||
margin: 1.3em 0 0 0
|
|
||||||
cursor: pointer
|
|
||||||
-webkit-appearance: none
|
|
||||||
background: $teal
|
|
||||||
width: 100%
|
|
||||||
&:hover
|
|
||||||
background: $yellow
|
|
||||||
&: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
|
|
||||||
margin-bottom: 4px
|
|
||||||
padding-left: 30px
|
|
||||||
line-height: 27px
|
|
||||||
cursor: pointer
|
|
||||||
position: relative
|
|
||||||
font-size: 1.2em
|
|
||||||
color: $white-text
|
|
||||||
font-weight: 400
|
|
||||||
&:last-child
|
|
||||||
margin-bottom: 0
|
|
||||||
i
|
|
||||||
position: absolute
|
|
||||||
bottom: 4px
|
|
||||||
left: 17.5em
|
|
||||||
display: block
|
|
||||||
width: 19px
|
|
||||||
height: 19px
|
|
||||||
outline: none
|
|
||||||
border: 1px solid $border-grey
|
|
||||||
&.left
|
|
||||||
position: absolute
|
|
||||||
bottom: 4px
|
|
||||||
left: 0
|
|
||||||
display: block
|
|
||||||
width: 19px
|
|
||||||
height: 19px
|
|
||||||
outline: none
|
|
||||||
border: 1px solid $border-grey
|
|
||||||
input
|
|
||||||
+ i:after
|
|
||||||
content: ''
|
|
||||||
background: url("./assets/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
|
|
||||||
position: absolute
|
|
||||||
left: -9999px
|
|
||||||
&:checked + i:after
|
|
||||||
opacity: 1
|
|
||||||
|
|
||||||
.threads
|
|
||||||
font-size: 1.2em
|
|
||||||
h4
|
|
||||||
display: inline
|
|
||||||
input[type=button].square-btn
|
|
||||||
display: inline-block
|
|
||||||
width: 24px
|
|
||||||
height: 24px
|
|
||||||
margin: 0 5px 0 0
|
|
||||||
padding: 0
|
|
||||||
line-height: 1em
|
|
||||||
|
|
||||||
.statistics > div:not(:last-child), .result > div:not(:last-child)
|
|
||||||
margin-bottom: 15px
|
|
||||||
|
|
||||||
.statistics
|
|
||||||
padding-bottom: 3.2em
|
|
||||||
> div:not(.percentage)
|
|
||||||
clear: both
|
|
||||||
|
|
||||||
.probability
|
|
||||||
width: 85%
|
|
||||||
margin: 5px 0
|
|
||||||
height: 18px
|
|
||||||
background: $panel-background-clear
|
|
||||||
float: left
|
|
||||||
|
|
||||||
.probability-bar
|
|
||||||
height: 100%
|
|
||||||
width: 0
|
|
||||||
display: block
|
|
||||||
background-color: #d78716
|
|
||||||
|
|
||||||
.percentage
|
|
||||||
float: right
|
|
||||||
width: 15%
|
|
||||||
text-align: center
|
|
||||||
position: relative
|
|
||||||
top: -10px
|
|
||||||
left: 15px
|
|
||||||
div
|
|
||||||
font-size: 0.75em
|
|
||||||
h5
|
|
||||||
color: $white-text
|
|
||||||
font-weight: 500
|
|
||||||
|
|
||||||
.output
|
|
||||||
font-family: monospace
|
|
||||||
font-size: 1.2em
|
|
||||||
color: $grey-text
|
|
||||||
margin-left: 15px
|
|
||||||
word-break: break-all
|
|
||||||
|
|
||||||
/*-- Fonts --*/
|
|
||||||
|
|
||||||
@font-face
|
|
||||||
font-family: 'Lato'
|
|
||||||
font-style: normal
|
|
||||||
font-weight: 400
|
|
||||||
src: local('Lato Regular'), local('Lato-Regular'), url(./assets/fonts/lato-regular.woff2) format('woff2')
|
|
||||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+2215
|
|
||||||
|
|
||||||
@font-face
|
|
||||||
font-family: 'Montserrat'
|
|
||||||
font-style: normal
|
|
||||||
font-weight: 400
|
|
||||||
src: local('Montserrat Regular'), local('Montserrat-Regular'), url(./assets/fonts/montserrat.woff2) format('woff2')
|
|
||||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+2215
|
|
||||||
|
|
||||||
@font-face
|
|
||||||
font-family: 'Montserrat'
|
|
||||||
font-style: normal
|
|
||||||
font-weight: 700
|
|
||||||
src: local('Montserrat Bold'), local('Montserrat-Bold'), url(./assets/fonts/montserrat-bold.woff2) format('woff2')
|
|
||||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+2215
|
|
||||||
|
|
||||||
/*-- Responsive design --
|
|
||||||
|
|
||||||
@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 $white-text
|
|
||||||
width: 34%
|
|
||||||
p
|
|
||||||
font-size: 1.4em
|
|
||||||
margin-top: 0.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
|
|
||||||
p
|
|
||||||
font-size: 1.3em
|
|
||||||
margin-top: 0.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 $white-text
|
|
||||||
p
|
|
||||||
font-size: 1.2em
|
|
||||||
|
|
||||||
@media screen and (max-width: 320px)
|
|
||||||
.header
|
|
||||||
h1
|
|
||||||
width: 73%
|
|
||||||
font-size: 1.6em
|
|
||||||
padding: 6px
|
|
||||||
p
|
|
||||||
font-size: 1em
|
|
||||||
|
|
||||||
/*-- Github corner --
|
|
||||||
|
|
||||||
.github-corner
|
|
||||||
&:hover .octo-arm
|
|
||||||
animation: octocat-wave 560ms ease-in-out
|
|
||||||
svg
|
|
||||||
position: absolute
|
|
||||||
top: 0
|
|
||||||
border: 0
|
|
||||||
right: 0
|
|
||||||
|
|
||||||
@keyframes octocat-wave
|
|
||||||
0%, 100%
|
|
||||||
transform: rotate(0)
|
|
||||||
20%, 60%
|
|
||||||
transform: rotate(-25deg)
|
|
||||||
40%, 80%
|
|
||||||
transform: rotate(10deg)
|
|
||||||
|
|
||||||
@media (max-width: 500px)
|
|
||||||
.github-corner:hover .octo-arm
|
|
||||||
animation: none
|
|
||||||
|
|
||||||
.github-corner .octo-arm
|
|
||||||
animation: octocat-wave 560ms ease-in-out
|
|
||||||
10
src/css/variables.sass
Normal file
10
src/css/variables.sass
Normal file
|
|
@ -0,0 +1,10 @@
|
||||||
|
$white-text: #fff
|
||||||
|
$grey-text: #888
|
||||||
|
$border-grey: #97A2A8
|
||||||
|
$background: #000
|
||||||
|
$panel-background: #191919
|
||||||
|
$panel-background-clear: #2d2c2c
|
||||||
|
|
||||||
|
$teal: #198a88
|
||||||
|
$yellow: #d78716
|
||||||
|
$red: #ec4a41
|
||||||
|
|
@ -1,124 +0,0 @@
|
||||||
<div>
|
|
||||||
<div class="container">
|
|
||||||
<div class="header">
|
|
||||||
<h1>VANITY-ETH</h1>
|
|
||||||
<p>Vanity ETH address generator</p>
|
|
||||||
</div>
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-md-12">
|
|
||||||
<div class="panel description">
|
|
||||||
<p>
|
|
||||||
Vanity-ETH is a browser-based tool to generate vanity Ethereum addresses.
|
|
||||||
</p>
|
|
||||||
<h2>Usage</h2>
|
|
||||||
<p>
|
|
||||||
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.<br>
|
|
||||||
You can increase the number of threads allocated to address generation to be faster, or decrease
|
|
||||||
it
|
|
||||||
if you computer struggles.<br>
|
|
||||||
</p>
|
|
||||||
<h2>How it works</h2>
|
|
||||||
<p>
|
|
||||||
You browser is going to 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>
|
|
||||||
</p>
|
|
||||||
<h2>Security</h2>
|
|
||||||
<p>
|
|
||||||
As explained above, everything is computed in your browser. Nothing ever leaves your machine, or
|
|
||||||
even your browser tab.<br>
|
|
||||||
You can download the latest build of Vantiy-ETH from
|
|
||||||
<a href="https://github.com/bokub/vanity-eth/wiki/download-Vanity-ETH">Github</a> and use it
|
|
||||||
completely offline.<br>
|
|
||||||
Vanity-ETH uses a cryptographically secure pseudorandom number generator (CSPRNG) to generate
|
|
||||||
Ethereum addresses.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div v-if="error" class="row" v-cloak>
|
|
||||||
<div class="col-md-12">
|
|
||||||
<div class="panel error">
|
|
||||||
<p v-if="error === 'local_workers_forbidden'">
|
|
||||||
Your browser disallows multi-thread computation when run from a local file.<br>
|
|
||||||
Please use the online version at <a href="https://git.io/veth">git.io/veth</a>, or use a
|
|
||||||
different
|
|
||||||
browser.
|
|
||||||
</p>
|
|
||||||
<p v-else-if="error === 'workers_unsupported'">
|
|
||||||
Your browser does not support multi-thread computation.<br>
|
|
||||||
Please use a different browser.
|
|
||||||
</p>
|
|
||||||
<p v-else v-html="error.replace('\n', '<br>')"></p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-md-6">
|
|
||||||
<div class="panel form">
|
|
||||||
<form :class="{error: inputError}">
|
|
||||||
<div class="error-text">Numbers and letters from A to F only</div>
|
|
||||||
<input type="text" placeholder="Prefix" v-model="input.prefix" :disabled="running">
|
|
||||||
<div class="check">
|
|
||||||
<label class="checkbox">
|
|
||||||
<input type="checkbox" name="checkbox" checked="" v-model="input.checksum"
|
|
||||||
:disabled="running">
|
|
||||||
<i class="left"> </i>
|
|
||||||
Case-sensitive
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
<div class="threads">
|
|
||||||
<input type="button" class="square-btn" value="-" @click="threads--"
|
|
||||||
:disabled="running || threads <= 1">
|
|
||||||
<input type="button" class="square-btn arrow" value="+" @click="threads++"
|
|
||||||
:disabled="running">
|
|
||||||
<h4 v-text="threads"></h4>
|
|
||||||
<span v-cloak>threads</span>
|
|
||||||
<span v-if="threads === cores" v-cloak>(recommended)</span>
|
|
||||||
</div>
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-lg-6 col-sm-12">
|
|
||||||
<input type="button" value="Generate" @click="startGen"
|
|
||||||
:disabled="running || inputError || error">
|
|
||||||
</div>
|
|
||||||
<div class="col-lg-6 col-sm-12">
|
|
||||||
<input type="button" value="Stop" @click="stopGen" :disabled="!running">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-md-6">
|
|
||||||
<div class="panel statistics">
|
|
||||||
<div>Difficulty: <span class="output" v-text="formatNum(difficulty)">1</span></div>
|
|
||||||
<div>Generated: <span class="output"
|
|
||||||
v-text="formatNum(count) + (count === 1 ? ' address' : ' addresses')">0 addresses</span>
|
|
||||||
</div>
|
|
||||||
<div>50% probability: <span class="output" v-text="probability50">0 addresses</span></div>
|
|
||||||
<div>Speed: <span class="output" v-text="speed + ' addr/s'">0 addr/s</span></div>
|
|
||||||
<div>Status: <span class="output" v-text="status">Waiting</span></div>
|
|
||||||
<!--Probability:-->
|
|
||||||
<div class="probability">
|
|
||||||
<div class="probability-bar" :style="'width:' + probability + '%'"></div>
|
|
||||||
</div>
|
|
||||||
<div class="percentage">
|
|
||||||
<h4 v-text="probability + '%'">0%</h4>
|
|
||||||
<div>Probability</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-md-12">
|
|
||||||
<div class="panel result">
|
|
||||||
<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>
|
|
||||||
</div>
|
|
||||||
<corner></corner>
|
|
||||||
</div>
|
|
||||||
|
|
@ -1,6 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<!--Github corner-->
|
<a href="https://github.com/bokub/vanity-eth" aria-label="View source on Github">
|
||||||
<a href="https://github.com/bokub/vanity-eth" class="github-corner" aria-label="View source on Github">
|
|
||||||
<svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true">
|
<svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true">
|
||||||
<path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z" fill="#fff"></path>
|
<path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z" fill="#fff"></path>
|
||||||
<path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
|
<path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
|
||||||
|
|
@ -13,4 +12,32 @@
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {}
|
export default {}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<style lang="sass" scoped>
|
||||||
|
@import "../css/variables"
|
||||||
|
|
||||||
|
a
|
||||||
|
&:hover .octo-arm
|
||||||
|
animation: octocat-wave 560ms ease-in-out
|
||||||
|
svg
|
||||||
|
position: absolute
|
||||||
|
top: 0
|
||||||
|
border: 0
|
||||||
|
right: 0
|
||||||
|
|
||||||
|
@keyframes octocat-wave
|
||||||
|
0%, 100%
|
||||||
|
transform: rotate(0)
|
||||||
|
20%, 60%
|
||||||
|
transform: rotate(-25deg)
|
||||||
|
40%, 80%
|
||||||
|
transform: rotate(10deg)
|
||||||
|
|
||||||
|
@media (max-width: 500px)
|
||||||
|
a:hover .octo-arm
|
||||||
|
animation: none
|
||||||
|
|
||||||
|
a .octo-arm
|
||||||
|
animation: octocat-wave 560ms ease-in-out
|
||||||
|
</style>
|
||||||
44
src/vue/Description.vue
Normal file
44
src/vue/Description.vue
Normal file
|
|
@ -0,0 +1,44 @@
|
||||||
|
<template>
|
||||||
|
<div class="panel">
|
||||||
|
<p>
|
||||||
|
Vanity-ETH is a browser-based tool to generate vanity Ethereum addresses.
|
||||||
|
</p>
|
||||||
|
<h2>Usage</h2>
|
||||||
|
<p>
|
||||||
|
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.<br>
|
||||||
|
You can increase the number of threads allocated to address generation to be faster, or decrease
|
||||||
|
it
|
||||||
|
if you computer struggles.<br>
|
||||||
|
</p>
|
||||||
|
<h2>How it works</h2>
|
||||||
|
<p>
|
||||||
|
You browser is going to 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>
|
||||||
|
</p>
|
||||||
|
<h2>Security</h2>
|
||||||
|
<p>
|
||||||
|
As explained above, everything is computed in your browser. Nothing ever leaves your machine, or
|
||||||
|
even your browser tab.<br>
|
||||||
|
You can download the latest build of Vantiy-ETH from
|
||||||
|
<a href="https://github.com/bokub/vanity-eth/wiki/download-Vanity-ETH">Github</a> and use it
|
||||||
|
completely offline.<br>
|
||||||
|
Vanity-ETH uses a cryptographically secure pseudorandom number generator (CSPRNG) to generate
|
||||||
|
Ethereum addresses.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="sass" scoped>
|
||||||
|
@import "../css/variables"
|
||||||
|
p
|
||||||
|
margin: 15px 0 20px
|
||||||
|
color: $grey-text
|
||||||
|
</style>
|
||||||
36
src/vue/Error.vue
Normal file
36
src/vue/Error.vue
Normal file
|
|
@ -0,0 +1,36 @@
|
||||||
|
<template>
|
||||||
|
<div class="panel">
|
||||||
|
<p v-if="error === 'local_workers_forbidden'">
|
||||||
|
Your browser disallows multi-thread computation when run from a local file.<br>
|
||||||
|
Please use the online version at <a href="https://git.io/veth">git.io/veth</a>, or use a
|
||||||
|
different
|
||||||
|
browser.
|
||||||
|
</p>
|
||||||
|
<p v-else-if="error === 'workers_unsupported'">
|
||||||
|
Your browser does not support multi-thread computation.<br>
|
||||||
|
Please use a different browser.
|
||||||
|
</p>
|
||||||
|
<p v-else v-html="error.replace('\n', '<br>')"></p>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
'error': {
|
||||||
|
type: String,
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="sass" scoped>
|
||||||
|
@import "../css/variables"
|
||||||
|
.panel
|
||||||
|
background-color: $red
|
||||||
|
a, a:visited, a:hover
|
||||||
|
color: $white-text
|
||||||
|
text-decoration: underline
|
||||||
|
</style>
|
||||||
86
src/vue/Headline.vue
Normal file
86
src/vue/Headline.vue
Normal file
|
|
@ -0,0 +1,86 @@
|
||||||
|
<template>
|
||||||
|
<!--Github corner-->
|
||||||
|
<div>
|
||||||
|
<h1>VANITY-ETH</h1>
|
||||||
|
<p>Vanity ETH address generator</p>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
<style lang="sass" scoped>
|
||||||
|
@import "../css/variables"
|
||||||
|
|
||||||
|
div
|
||||||
|
margin-bottom: 8em
|
||||||
|
color: $white-text
|
||||||
|
font-family: 'Montserrat', sans-serif
|
||||||
|
text-align: center
|
||||||
|
|
||||||
|
h1
|
||||||
|
font-size: 3em
|
||||||
|
font-weight: 700
|
||||||
|
border: 4px solid $white-text
|
||||||
|
width: 33%
|
||||||
|
margin: 0 auto
|
||||||
|
padding: 1px
|
||||||
|
|
||||||
|
p
|
||||||
|
font-size: 1.5em
|
||||||
|
letter-spacing: 2px
|
||||||
|
font-weight: 400
|
||||||
|
margin-top: 1em
|
||||||
|
|
||||||
|
/*-- Responsive design --
|
||||||
|
|
||||||
|
@media screen and (max-width: 1280px)
|
||||||
|
h1
|
||||||
|
font-size: 2.8em
|
||||||
|
width: 35%
|
||||||
|
|
||||||
|
@media screen and (max-width: 1024px)
|
||||||
|
div
|
||||||
|
margin-bottom: 4em
|
||||||
|
h1
|
||||||
|
font-size: 2.5em
|
||||||
|
border: 3px solid $white-text
|
||||||
|
width: 34%
|
||||||
|
p
|
||||||
|
font-size: 1.4em
|
||||||
|
margin-top: 0.8em
|
||||||
|
|
||||||
|
@media screen and (max-width: 768px)
|
||||||
|
h1
|
||||||
|
width: 43%
|
||||||
|
|
||||||
|
@media screen and (max-width: 640px)
|
||||||
|
div
|
||||||
|
margin-bottom: 4em
|
||||||
|
h1
|
||||||
|
width: 46%
|
||||||
|
font-size: 2.2em
|
||||||
|
padding: 8px
|
||||||
|
p
|
||||||
|
font-size: 1.3em
|
||||||
|
margin-top: 0.7em
|
||||||
|
|
||||||
|
@media screen and (max-width: 480px)
|
||||||
|
h1
|
||||||
|
width: 65%
|
||||||
|
font-size: 2em
|
||||||
|
padding: 7px
|
||||||
|
border: 2px solid $white-text
|
||||||
|
p
|
||||||
|
font-size: 1.2em
|
||||||
|
|
||||||
|
@media screen and (max-width: 320px)
|
||||||
|
h1
|
||||||
|
width: 73%
|
||||||
|
font-size: 1.6em
|
||||||
|
padding: 6px
|
||||||
|
p
|
||||||
|
font-size: 1em
|
||||||
|
</style>
|
||||||
181
src/vue/Input.vue
Normal file
181
src/vue/Input.vue
Normal file
|
|
@ -0,0 +1,181 @@
|
||||||
|
<template>
|
||||||
|
<div class="panel">
|
||||||
|
<form :class="{error: inputError}">
|
||||||
|
<div class="error-text">Numbers and letters from A to F only</div>
|
||||||
|
<input type="text" placeholder="Prefix" v-model="prefix" :disabled="running">
|
||||||
|
<div class="check">
|
||||||
|
<label class="checkbox">
|
||||||
|
<input type="checkbox" name="checkbox" checked="" v-model="checksum"
|
||||||
|
:disabled="running">
|
||||||
|
<i class="left"> </i>
|
||||||
|
Case-sensitive
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div class="threads">
|
||||||
|
<input type="button" class="square-btn" value="-" @click="threads--"
|
||||||
|
:disabled="running || threads <= 1">
|
||||||
|
<input type="button" class="square-btn arrow" value="+" @click="threads++"
|
||||||
|
:disabled="running">
|
||||||
|
<h4 v-text="threads"></h4>
|
||||||
|
<span>threads</span>
|
||||||
|
<span v-if="threads === cores">(recommended)</span>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-lg-6 col-sm-12">
|
||||||
|
<input type="button" value="Generate" @click="startGen"
|
||||||
|
:disabled="running || inputError || error">
|
||||||
|
</div>
|
||||||
|
<div class="col-lg-6 col-sm-12">
|
||||||
|
<input type="button" value="Stop" @click="stopGen" :disabled="!running">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
running: Boolean,
|
||||||
|
cores: Number,
|
||||||
|
},
|
||||||
|
data: function () {
|
||||||
|
return {
|
||||||
|
threads: 4,
|
||||||
|
prefix: '',
|
||||||
|
checksum: true,
|
||||||
|
error: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
inputError: function () {
|
||||||
|
return !isValidHex(this.prefix);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
startGen: function () {
|
||||||
|
this.$emit('start')
|
||||||
|
},
|
||||||
|
stopGen: function () {
|
||||||
|
this.$emit('stop')
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
prefix: function(){
|
||||||
|
this.$emit('input-change', 'prefix', this.prefix);
|
||||||
|
},
|
||||||
|
checksum : function(){
|
||||||
|
this.$emit('input-change', 'checksum', this.checksum);
|
||||||
|
},
|
||||||
|
threads: function(){
|
||||||
|
this.$emit('input-change', 'threads', this.threads);
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const isValidHex = function (hex) {
|
||||||
|
return hex.length ? /^[0-9A-F]+$/g.test(hex.toUpperCase()) : true;
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="sass" scoped>
|
||||||
|
@import "../css/variables"
|
||||||
|
input
|
||||||
|
&[type="text"]
|
||||||
|
width: 100%
|
||||||
|
color: $white-text
|
||||||
|
background: $panel-background-clear
|
||||||
|
outline: none
|
||||||
|
font-size: 1.3em
|
||||||
|
padding: 0.5em
|
||||||
|
border: none
|
||||||
|
margin-bottom: 10px
|
||||||
|
-webkit-appearance: none
|
||||||
|
&[type="button"]
|
||||||
|
border: none
|
||||||
|
outline: none
|
||||||
|
color: $white-text
|
||||||
|
padding: 0.6em
|
||||||
|
font-size: 1.3em
|
||||||
|
font-weight: 500
|
||||||
|
margin: 1.3em 0 0 0
|
||||||
|
cursor: pointer
|
||||||
|
-webkit-appearance: none
|
||||||
|
background: $teal
|
||||||
|
width: 100%
|
||||||
|
&:hover
|
||||||
|
background: $yellow
|
||||||
|
&: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
|
||||||
|
margin-bottom: 4px
|
||||||
|
padding-left: 30px
|
||||||
|
line-height: 27px
|
||||||
|
cursor: pointer
|
||||||
|
position: relative
|
||||||
|
font-size: 1.2em
|
||||||
|
color: $white-text
|
||||||
|
font-weight: 400
|
||||||
|
&:last-child
|
||||||
|
margin-bottom: 0
|
||||||
|
i
|
||||||
|
position: absolute
|
||||||
|
bottom: 4px
|
||||||
|
left: 17.5em
|
||||||
|
display: block
|
||||||
|
width: 19px
|
||||||
|
height: 19px
|
||||||
|
outline: none
|
||||||
|
border: 1px solid $border-grey
|
||||||
|
&.left
|
||||||
|
position: absolute
|
||||||
|
bottom: 4px
|
||||||
|
left: 0
|
||||||
|
display: block
|
||||||
|
width: 19px
|
||||||
|
height: 19px
|
||||||
|
outline: none
|
||||||
|
border: 1px solid $border-grey
|
||||||
|
input
|
||||||
|
+ i:after
|
||||||
|
content: ''
|
||||||
|
background: url("../assets/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
|
||||||
|
position: absolute
|
||||||
|
left: -9999px
|
||||||
|
&:checked + i:after
|
||||||
|
opacity: 1
|
||||||
|
|
||||||
|
.threads
|
||||||
|
font-size: 1.2em
|
||||||
|
h4
|
||||||
|
display: inline
|
||||||
|
input[type=button].square-btn
|
||||||
|
display: inline-block
|
||||||
|
width: 24px
|
||||||
|
height: 24px
|
||||||
|
margin: 0 5px 0 0
|
||||||
|
padding: 0
|
||||||
|
line-height: 1em
|
||||||
|
|
||||||
|
</style>
|
||||||
27
src/vue/Result.vue
Normal file
27
src/vue/Result.vue
Normal file
|
|
@ -0,0 +1,27 @@
|
||||||
|
<template>
|
||||||
|
<div class="panel result">
|
||||||
|
<div>Address: <span class="output" v-text="address"></span></div>
|
||||||
|
<div>Private key: <span class="output" v-text="privateKey"></span></div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
address: String,
|
||||||
|
privateKey: String
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="sass" scoped>
|
||||||
|
@import "../css/variables"
|
||||||
|
.output
|
||||||
|
font-family: monospace
|
||||||
|
font-size: 1.2em
|
||||||
|
color: $grey-text
|
||||||
|
margin-left: 15px
|
||||||
|
word-break: break-all
|
||||||
|
.panel > div:not(:last-child)
|
||||||
|
margin-bottom: 15px
|
||||||
|
</style>
|
||||||
112
src/vue/Statistics.vue
Normal file
112
src/vue/Statistics.vue
Normal file
|
|
@ -0,0 +1,112 @@
|
||||||
|
<template>
|
||||||
|
<div class="panel">
|
||||||
|
<div>Difficulty: <span class="output" v-text="formatNum(difficulty)">1</span></div>
|
||||||
|
<div>Generated: <span class="output"
|
||||||
|
v-text="formatNum(count) + (count === 1 ? ' address' : ' addresses')">0 addresses</span>
|
||||||
|
</div>
|
||||||
|
<div>50% probability: <span class="output" v-text="probability50">0 addresses</span></div>
|
||||||
|
<div>Speed: <span class="output" v-text="speed + ' addr/s'">0 addr/s</span></div>
|
||||||
|
<div>Status: <span class="output" v-text="status">Waiting</span></div>
|
||||||
|
|
||||||
|
<!--Probability-->
|
||||||
|
<div class="probability">
|
||||||
|
<div class="probability-bar" :style="'width:' + probability + '%'"></div>
|
||||||
|
</div>
|
||||||
|
<div class="percentage">
|
||||||
|
<h4 v-text="probability + '%'">0%</h4>
|
||||||
|
<div>Probability</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data: function () {
|
||||||
|
return {
|
||||||
|
speed: 0,
|
||||||
|
count: 0,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
prefix: String,
|
||||||
|
checksum: Boolean,
|
||||||
|
status: String,
|
||||||
|
firstTick: {},
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
difficulty: function () {
|
||||||
|
return this.inputError ? 'N/A' : computeDifficulty(this.prefix, this.checksum);
|
||||||
|
},
|
||||||
|
probability50: function () {
|
||||||
|
return this.inputError ? 'N/A' : this.formatNum(Math.floor(Math.log(0.5) / Math.log(1 - (1 / this.difficulty)))) + ' addresses';
|
||||||
|
},
|
||||||
|
probability: function () {
|
||||||
|
return Math.round(10000 * computeProbability(this.difficulty, this.count)) / 100;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
formatNum: function (num) {
|
||||||
|
return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ' ');
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created: function () {
|
||||||
|
this.$parent.$on('increment-counter', incr => {
|
||||||
|
this.count += (incr > 0 ? incr : -this.count);
|
||||||
|
this.speed = incr > 0 ? Math.floor(1000 * this.count / (performance.now() - this.firstTick)) : 0;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const computeDifficulty = function (pattern, isChecksum) {
|
||||||
|
const ret = Math.pow(16, pattern.length);
|
||||||
|
return isChecksum ? (ret * Math.pow(2, pattern.replace(/[^a-f]/gi, '').length)) : ret;
|
||||||
|
};
|
||||||
|
|
||||||
|
const computeProbability = function (difficulty, attempts) {
|
||||||
|
return 1 - Math.pow(1 - (1 / difficulty), attempts);
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="sass" scoped>
|
||||||
|
@import "../css/variables"
|
||||||
|
.panel > div:not(:last-child)
|
||||||
|
margin-bottom: 15px
|
||||||
|
|
||||||
|
.panel
|
||||||
|
padding-bottom: 3.2em
|
||||||
|
> div:not(.percentage)
|
||||||
|
clear: both
|
||||||
|
|
||||||
|
.probability
|
||||||
|
width: 85%
|
||||||
|
margin: 5px 0
|
||||||
|
height: 18px
|
||||||
|
background: $panel-background-clear
|
||||||
|
float: left
|
||||||
|
|
||||||
|
.probability-bar
|
||||||
|
height: 100%
|
||||||
|
width: 0
|
||||||
|
display: block
|
||||||
|
background-color: #d78716
|
||||||
|
|
||||||
|
.percentage
|
||||||
|
float: right
|
||||||
|
width: 15%
|
||||||
|
text-align: center
|
||||||
|
position: relative
|
||||||
|
top: -10px
|
||||||
|
left: 15px
|
||||||
|
div
|
||||||
|
font-size: 0.75em
|
||||||
|
h5
|
||||||
|
color: $white-text
|
||||||
|
font-weight: 500
|
||||||
|
|
||||||
|
.output
|
||||||
|
font-family: monospace
|
||||||
|
font-size: 1.2em
|
||||||
|
color: $grey-text
|
||||||
|
margin-left: 15px
|
||||||
|
word-break: break-all
|
||||||
|
</style>
|
||||||
Loading…
Add table
Reference in a new issue