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>
|
||||
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';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
corner: Corner
|
||||
headline: Headline,
|
||||
description: Description,
|
||||
error: Err,
|
||||
userInput: Input,
|
||||
statistics: Statistics,
|
||||
result: Result,
|
||||
corner: Corner,
|
||||
},
|
||||
data: function () {
|
||||
return {
|
||||
count: 0,
|
||||
firstTick: null,
|
||||
running: false,
|
||||
speed: 0,
|
||||
status: 'Waiting',
|
||||
workers: [],
|
||||
threads: 4,
|
||||
cores: 0,
|
||||
result: {
|
||||
address: '',
|
||||
privateKey: ''
|
||||
},
|
||||
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;
|
||||
result: {address: '', privateKey: ''},
|
||||
input: {prefix: '', checksum: true},
|
||||
firstTick: null,
|
||||
error: null
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
|
|
@ -52,13 +86,21 @@
|
|||
}
|
||||
},
|
||||
methods: {
|
||||
incrementCounter: function (incr) {
|
||||
this.count += incr;
|
||||
this.speed = incr > 0 ? Math.floor(1000 * this.count / (performance.now() - this.firstTick)) : 0;
|
||||
setInput: function (inputType, value) {
|
||||
switch (inputType) {
|
||||
case 'prefix':
|
||||
this.input.prefix = value;
|
||||
break;
|
||||
case 'checksum':
|
||||
this.input.checksum = value;
|
||||
break;
|
||||
case 'threads':
|
||||
this.threads = value;
|
||||
}
|
||||
},
|
||||
|
||||
displayResult: function (result) {
|
||||
this.incrementCounter(result.attempts);
|
||||
this.$emit('increment-counter', result.attempts);
|
||||
this.result.address = result.address;
|
||||
this.result.privateKey = result.privKey;
|
||||
this.status = 'Address found';
|
||||
|
|
@ -67,7 +109,7 @@
|
|||
clearResult: function () {
|
||||
this.result.address = '';
|
||||
this.result.privateKey = '';
|
||||
this.incrementCounter(-this.count);
|
||||
this.$emit('increment-counter', -1);
|
||||
},
|
||||
|
||||
/**
|
||||
|
|
@ -112,8 +154,7 @@
|
|||
this.stopGen();
|
||||
return this.displayResult(wallet);
|
||||
}
|
||||
|
||||
this.incrementCounter(wallet.attempts);
|
||||
this.$emit('increment-counter', wallet.attempts);
|
||||
},
|
||||
|
||||
startGen: function () {
|
||||
|
|
@ -157,9 +198,6 @@
|
|||
this.threads = this.cores;
|
||||
}
|
||||
},
|
||||
formatNum: function (num) {
|
||||
return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ' ');
|
||||
}
|
||||
},
|
||||
|
||||
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>
|
||||
|
||||
<style lang="sass">
|
||||
|
|
@ -193,6 +218,62 @@
|
|||
@import "~bootstrap/scss/reboot"
|
||||
@import "~bootstrap/scss/grid"
|
||||
|
||||
// Custom style
|
||||
@import "css/stylesheet.sass"
|
||||
@import "css/variables"
|
||||
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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
<!--Github corner-->
|
||||
<a href="https://github.com/bokub/vanity-eth" class="github-corner" aria-label="View source on Github">
|
||||
<a href="https://github.com/bokub/vanity-eth" aria-label="View source on Github">
|
||||
<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="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>
|
||||
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