Create UI for suffix selection
This commit is contained in:
Boris Kubiak
parent
13cc056e51
commit
e664d580fe
5 changed files with 2069 additions and 2015 deletions
3904
package-lock.json
generated
3904
package-lock.json
generated
File diff suppressed because it is too large
Load diff
11
src/App.vue
11
src/App.vue
|
|
@ -27,7 +27,7 @@
|
|||
|
||||
<!--Statistics-->
|
||||
<div class="col-md-6">
|
||||
<statistics :prefix="input.prefix" :checksum="input.checksum" :status="status"
|
||||
<statistics :hex="input.hex" :checksum="input.checksum" :status="status"
|
||||
:first-tick="firstTick"></statistics>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -74,7 +74,7 @@
|
|||
threads: 4,
|
||||
cores: 0,
|
||||
result: {address: '', privateKey: ''},
|
||||
input: {prefix: '', checksum: true},
|
||||
input: {hex: '', checksum: true, suffix: false},
|
||||
firstTick: null,
|
||||
error: null
|
||||
};
|
||||
|
|
@ -90,12 +90,15 @@
|
|||
setInput: function (inputType, value) {
|
||||
// eslint-disable-next-line default-case
|
||||
switch (inputType) {
|
||||
case 'prefix':
|
||||
this.input.prefix = value;
|
||||
case 'hex':
|
||||
this.input.hex = value;
|
||||
break;
|
||||
case 'checksum':
|
||||
this.input.checksum = value;
|
||||
break;
|
||||
case 'suffix':
|
||||
this.input.suffix = value;
|
||||
break;
|
||||
case 'threads':
|
||||
this.threads = value;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -61,12 +61,13 @@ const toChecksumAddress = (address) => {
|
|||
|
||||
/**
|
||||
* Generate a lot of wallets until one satisfies the input constraints
|
||||
* @param input
|
||||
* @param isChecksum
|
||||
* @param input - String chosen by the user
|
||||
* @param isChecksum - Is the input case-sensitive
|
||||
* @param isSuffix - Is it a suffix, or a prefix
|
||||
* @param cb - Callback called after x attempts, or when an address if found
|
||||
* @returns
|
||||
*/
|
||||
const getVanityWallet = (input, isChecksum, cb) => {
|
||||
const getVanityWallet = (input, isChecksum, isSuffix, cb) => {
|
||||
input = isChecksum ? input : input.toLowerCase();
|
||||
let wallet = getRandomWallet();
|
||||
let attempts = 1;
|
||||
|
|
@ -85,7 +86,7 @@ const getVanityWallet = (input, isChecksum, cb) => {
|
|||
onmessage = function (event) {
|
||||
const input = event.data;
|
||||
try {
|
||||
getVanityWallet(input.prefix, input.checksum, (message) => postMessage(message));
|
||||
getVanityWallet(input.hex, input.checksum, input.suffix, (message) => postMessage(message));
|
||||
} catch (err) {
|
||||
self.postMessage({error: err.toString()});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<div class="panel">
|
||||
<form :class="{error: inputError}" @submit.prevent="startGen">
|
||||
<div class="error-text">Numbers and letters from A to F only</div>
|
||||
<input type="text" class="text-input-large" placeholder="Prefix" v-model="prefix" :disabled="running">
|
||||
<input type="text" class="text-input-large" :placeholder="suffix ? 'Suffix' : 'Prefix'" v-model="hex" :disabled="running">
|
||||
<div class="row justify-content-center hide-render">
|
||||
<div class="spinner">
|
||||
<div></div><div></div><div></div><div></div>
|
||||
|
|
@ -11,13 +11,23 @@
|
|||
<div class="example hide-prerender">
|
||||
E.g. <span v-text="example" class="monospace"></span>
|
||||
</div>
|
||||
<div class="check hide-prerender">
|
||||
<label class="checkbox">
|
||||
<input type="checkbox" name="checkbox" checked="" v-model="checksum"
|
||||
:disabled="running">
|
||||
<i class="left"> </i>
|
||||
Case-sensitive
|
||||
</label>
|
||||
<div class="row controls hide-prerender">
|
||||
<div class="col-12 col-sm-6 col-md-12 col-lg-6">
|
||||
<label class="checkbox">
|
||||
<input type="checkbox" name="checkbox" checked="" v-model="checksum"
|
||||
:disabled="running">
|
||||
<i class="left"> </i>
|
||||
Case-sensitive
|
||||
</label>
|
||||
</div>
|
||||
<div class="col-12 col-sm-6 col-md-12 col-lg-6">
|
||||
<span>Prefix</span>
|
||||
<label class="switch">
|
||||
<input type="checkbox" v-model="suffix">
|
||||
<span class="slider"></span>
|
||||
</label>
|
||||
<span>Suffix</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="threads hide-prerender">
|
||||
<input type="button" class="square-btn button-large" value="-" @click="threads--"
|
||||
|
|
@ -62,24 +72,26 @@
|
|||
data: function () {
|
||||
return {
|
||||
threads: 4,
|
||||
prefix: '',
|
||||
hex: '',
|
||||
checksum: true,
|
||||
suffix: false,
|
||||
error: false
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
inputError: function () {
|
||||
return !isValidHex(this.prefix);
|
||||
return !isValidHex(this.hex);
|
||||
},
|
||||
example: function () {
|
||||
if (this.inputError) {
|
||||
return 'N/A';
|
||||
}
|
||||
let text = '0x' + (this.checksum ? this.prefix : mixCase(this.prefix));
|
||||
for (let i = 0; i < 40 - this.prefix.length; i++) {
|
||||
text += mixCase(Math.floor((Math.random() * 16)).toString(16));
|
||||
const chosen = this.checksum ? this.hex : mixCase(this.hex);
|
||||
let random = '';
|
||||
for (let i = 0; i < 40 - this.hex.length; i++) {
|
||||
random += mixCase(Math.floor((Math.random() * 16)).toString(16));
|
||||
}
|
||||
return text.substr(0, 42);
|
||||
return this.suffix ? `0x${random}${chosen}` :`0x${chosen}${random}`
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
|
@ -93,12 +105,15 @@
|
|||
}
|
||||
},
|
||||
watch: {
|
||||
prefix: function () {
|
||||
this.$emit('input-change', 'prefix', this.prefix);
|
||||
hex: function () {
|
||||
this.$emit('input-change', 'hex', this.hex);
|
||||
},
|
||||
checksum: function () {
|
||||
this.$emit('input-change', 'checksum', this.checksum);
|
||||
},
|
||||
suffix: function () {
|
||||
this.$emit('input-change', 'suffix', this.suffix);
|
||||
},
|
||||
threads: function () {
|
||||
this.$emit('input-change', 'threads', this.threads);
|
||||
}
|
||||
|
|
@ -128,55 +143,90 @@
|
|||
overflow-x: hidden
|
||||
.monospace
|
||||
font-family: $monospace-font
|
||||
.check
|
||||
.controls
|
||||
margin: 12px 0
|
||||
> div
|
||||
padding: 5px 0
|
||||
|
||||
.checkbox
|
||||
margin-bottom: 4px
|
||||
padding-left: 30px
|
||||
line-height: 27px
|
||||
cursor: pointer
|
||||
position: relative
|
||||
font-size: 18px
|
||||
color: $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
|
||||
.checkbox
|
||||
margin-bottom: 4px
|
||||
padding-left: 30px
|
||||
line-height: 27px
|
||||
cursor: pointer
|
||||
position: relative
|
||||
color: $text
|
||||
font-weight: 400
|
||||
&:last-child
|
||||
margin-bottom: 0
|
||||
i
|
||||
position: absolute
|
||||
bottom: 4px
|
||||
left: 0
|
||||
left: 17.5em
|
||||
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
|
||||
top: 4px
|
||||
left: 3px
|
||||
width: 15px
|
||||
height: 15px
|
||||
&.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
|
||||
top: 4px
|
||||
left: 3px
|
||||
width: 15px
|
||||
height: 15px
|
||||
position: absolute
|
||||
opacity: 0
|
||||
position: absolute
|
||||
opacity: 0
|
||||
left: -9999px
|
||||
&:checked + i:after
|
||||
opacity: 1
|
||||
|
||||
.switch
|
||||
position: relative
|
||||
width: 40px
|
||||
height: 24px
|
||||
margin: 0 5px
|
||||
input
|
||||
visibility: hidden
|
||||
|
||||
.slider
|
||||
position: absolute
|
||||
left: -9999px
|
||||
&:checked + i:after
|
||||
opacity: 1
|
||||
cursor: pointer
|
||||
top: 0
|
||||
left: 0
|
||||
right: 0
|
||||
bottom: 0
|
||||
background-color: $primary
|
||||
transition: .2s
|
||||
&:before
|
||||
position: absolute
|
||||
content: ""
|
||||
height: 16px
|
||||
width: 16px
|
||||
left: 4px
|
||||
bottom: 4px
|
||||
background-color: white
|
||||
transition: .2s
|
||||
|
||||
input
|
||||
&:checked + .slider
|
||||
background-color: $primary
|
||||
&:focus + .slider
|
||||
box-shadow: 0 0 1px $primary
|
||||
&:checked + .slider:before
|
||||
transform: translateX(16px)
|
||||
|
||||
.threads
|
||||
font-size: 18px
|
||||
h4
|
||||
display: inline
|
||||
input[type=button].square-btn
|
||||
|
|
|
|||
|
|
@ -37,13 +37,13 @@
|
|||
};
|
||||
},
|
||||
props: {
|
||||
prefix: String,
|
||||
hex: String,
|
||||
checksum: Boolean,
|
||||
status: String,
|
||||
firstTick: {}
|
||||
},
|
||||
watch: {
|
||||
prefix() {
|
||||
hex() {
|
||||
this.count = 0;
|
||||
},
|
||||
checksum() {
|
||||
|
|
@ -52,7 +52,7 @@
|
|||
},
|
||||
computed: {
|
||||
difficulty: function () {
|
||||
return this.inputError ? 'N/A' : computeDifficulty(this.prefix, this.checksum);
|
||||
return this.inputError ? 'N/A' : computeDifficulty(this.hex, this.checksum);
|
||||
},
|
||||
probability50: function () {
|
||||
return this.inputError ? 'N/A' : this.formatNum(Math.floor(Math.log(0.5) / Math.log(1 - (1 / this.difficulty)))) + ' addresses';
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue