Allow both prefix & suffix (#57)

src/App.vue

@@ -33,7 +33,8 @@
                 <!--Statistics-->
                 <div class="col-md-6">
                     <statistics
-                        :hex="input.hex"
+                        :prefix="input.prefix"
+                        :suffix="input.suffix"
                         :checksum="input.checksum"
                         :status="status"
                         :first-tick="firstTick"
@@ -83,7 +84,7 @@
                 threads: 4,
                 cores: 0,
                 result: { address: '', privateKey: '' },
-                input: { hex: '', checksum: true, suffix: false },
+                input: { prefix: '', suffix: '', checksum: true },
                 firstTick: null,
                 error: null,
             };
@@ -99,15 +100,15 @@
             setInput: function (inputType, value) {
                 // eslint-disable-next-line default-case
                 switch (inputType) {
-                    case 'hex':
+                    case 'prefix':
-                        this.input.hex = value;
+                        this.input.prefix = value;
-                        break;
-                    case 'checksum':
-                        this.input.checksum = value;
                         break;
                     case 'suffix':
                         this.input.suffix = value;
                         break;
+                    case 'checksum':
+                        this.input.checksum = value;
+                        break;
                     case 'threads':
                         this.threads = value;
                 }
@@ -256,7 +257,7 @@
                         worker.terminate();
                     }
                 };
-                const input = { checksum: true, hex: 'f'.repeat(5), suffix: false };
+                const input = { checksum: true, prefix: 'f'.repeat(5), suffix: '' };
                 console.info('Starting benchmark with 1 core...');
                 worker.postMessage(input);
             },

src/js/vanity.js

@@ -27,35 +27,42 @@ const getRandomWallet = () => {
 
 /**
  * Check if a wallet respects the input constraints
- * @param address
+ * @param address - Wallet address
- * @param input
+ * @param prefix - Prefix chosen by the user
- * @param isChecksum
+ * @param suffix - Suffix chosen by the user
- * @param isSuffix
+ * @param isChecksum - Is the input case-sensitive
  * @returns {boolean}
  */
-const isValidVanityAddress = (address, input, isChecksum, isSuffix) => {
+const isValidVanityAddress = (address, prefix, suffix, isChecksum) => {
-    const subStr = isSuffix ? address.substr(40 - input.length) : address.substr(0, input.length);
+    const addressPrefix = address.substring(0, prefix.length);
+    const addressSuffix = address.substring(40 - suffix.length);
 
     if (!isChecksum) {
-        return input === subStr;
+        return prefix === addressPrefix && suffix === addressSuffix;
     }
-    if (input.toLowerCase() !== subStr) {
+    if (prefix.toLowerCase() !== addressPrefix || suffix.toLowerCase() !== addressSuffix) {
         return false;
     }
 
-    return isValidChecksum(address, input, isSuffix);
+    return isValidChecksum(address, prefix, suffix);
 };
 
-const isValidChecksum = (address, input, isSuffix) => {
+const isValidChecksum = (address, prefix, suffix) => {
     const hash = keccak('keccak256').update(address).digest().toString('hex');
-    const shift = isSuffix ? 40 - input.length : 0;
 
-    for (let i = 0; i < input.length; i++) {
+    for (let i = 0; i < prefix.length; i++) {
-        const j = i + shift;
+        if (prefix[i] !== (parseInt(hash[i], 16) >= 8 ? address[i].toUpperCase() : address[i])) {
-        if (input[i] !== (parseInt(hash[j], 16) >= 8 ? address[j].toUpperCase() : address[j])) {
             return false;
         }
     }
+
+    for (let i = 0; i < suffix.length; i++) {
+        const j = i + 40 - suffix.length;
+        if (suffix[i] !== (parseInt(hash[j], 16) >= 8 ? address[j].toUpperCase() : address[j])) {
+            return false;
+        }
+    }
+
     return true;
 };
 
@@ -70,18 +77,20 @@ const toChecksumAddress = (address) => {
 
 /**
  * Generate a lot of wallets until one satisfies the input constraints
- * @param input - String chosen by the user
+ * @param prefix - Prefix chosen by the user
+ * @param suffix - Suffix 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, isSuffix, cb) => {
+const getVanityWallet = (prefix, suffix, isChecksum, cb) => {
-    input = isChecksum ? input : input.toLowerCase();
     let wallet = getRandomWallet();
     let attempts = 1;
 
-    while (!isValidVanityAddress(wallet.address, input, isChecksum, isSuffix)) {
+    const pre = isChecksum ? prefix : prefix.toLowerCase();
+    const suf = isChecksum ? suffix : suffix.toLowerCase();
+
+    while (!isValidVanityAddress(wallet.address, pre, suf, isChecksum)) {
         if (attempts >= step) {
             cb({ attempts });
             attempts = 0;
@@ -95,7 +104,7 @@ const getVanityWallet = (input, isChecksum, isSuffix, cb) => {
 onmessage = function (event) {
     const input = event.data;
     try {
-        getVanityWallet(input.hex, input.checksum, input.suffix, (message) => postMessage(message));
+        getVanityWallet(input.prefix, input.suffix, input.checksum, (message) => postMessage(message));
     } catch (err) {
         self.postMessage({ error: err.toString() });
     }

src/vue/Input.vue

@@ -1,15 +1,32 @@
 <template>
     <div class="panel" id="input-panel">
-        <form :class="{ error: inputError }" @submit.prevent="startGen">
+        <form @submit.prevent="startGen">
-            <div class="error-text">Numbers and letters from A to F only</div>
+            <div class="error-text" v-if="inputError">Numbers and letters from A to F only</div>
-            <input
+
-                type="text"
+            <div class="row">
-                class="text-input-large"
+                <div class="col-12 col-sm-6 col-md-12 col-lg-6">
-                id="input"
+                    <input
-                :placeholder="suffix ? 'Suffix' : 'Prefix'"
+                        :class="{ error: prefixError }"
-                v-model="hex"
+                        type="text"
-                :disabled="running"
+                        class="text-input-large"
-            />
+                        id="input"
+                        placeholder="Prefix"
+                        v-model="prefix"
+                        :disabled="running"
+                    />
+                </div>
+                <div class="col-12 col-sm-6 col-md-12 col-lg-6">
+                    <input
+                        :class="{ error: suffixError }"
+                        type="text"
+                        class="text-input-large"
+                        id="input"
+                        placeholder="Suffix"
+                        v-model="suffix"
+                        :disabled="running"
+                    />
+                </div>
+            </div>
             <div class="row justify-content-center hide-render">
                 <div class="spinner">
                     <div></div>
@@ -20,31 +37,22 @@
             </div>
             <div class="example hide-prerender">
                 E.g.&nbsp;
-                <span class="monospace">
+                <span v-if="inputError" class="monospace">N/A</span>
+                <span v-else class="monospace">
                     0x<!--
-                    --><b v-if="!suffix" v-text="example.chosen"></b
+                    --><b v-if="example.prefix" v-text="example.prefix"></b
                     ><!--
                     --><span v-text="example.random"></span
                     ><!--
-                    --><b v-if="suffix" v-text="example.chosen"></b>
+                    --><b v-if="example.suffix" v-text="example.suffix"></b>
                 </span>
             </div>
-            <div class="row controls hide-prerender">
+            <div class="controls hide-prerender">
-                <div class="col-12 col-sm-6 col-md-12 col-lg-6">
+                <label class="checkbox">
-                    <label class="checkbox">
+                    <input type="checkbox" name="checkbox" checked="" v-model="checksum" :disabled="running" />
-                        <input type="checkbox" name="checkbox" checked="" v-model="checksum" :disabled="running" />
+                    <i class="left"> </i>
-                        <i class="left"> </i>
+                    Case-sensitive
-                        Case-sensitive
+                </label>
-                    </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" :disabled="running" />
-                        <span class="slider"></span>
-                    </label>
-                    <span>Suffix</span>
-                </div>
             </div>
             <div class="threads hide-prerender">
                 <input
@@ -105,26 +113,33 @@
         data: function () {
             return {
                 threads: this.$props.cores || 4,
-                hex: '',
+                prefix: '',
+                suffix: '',
                 checksum: true,
-                suffix: false,
                 error: false,
             };
         },
         computed: {
+            prefixError: function () {
+                return !isValidHex(this.prefix);
+            },
+            suffixError: function () {
+                return !isValidHex(this.suffix);
+            },
             inputError: function () {
-                return !isValidHex(this.hex);
+                return this.prefixError || this.suffixError;
             },
             example: function () {
                 if (this.inputError) {
-                    return 'N/A';
+                    return null;
                 }
-                const chosen = this.checksum ? this.hex : mixCase(this.hex);
+                const prefix = this.checksum ? this.prefix : mixCase(this.prefix);
+                const suffix = this.checksum ? this.suffix : mixCase(this.suffix);
                 let random = '';
-                for (let i = 0; i < 40 - this.hex.length; i++) {
+                for (let i = 0; i < 40 - this.prefix.length - this.suffix.length; i++) {
                     random += mixCase(Math.floor(Math.random() * 16).toString(16));
                 }
-                return { random, chosen };
+                return { random, prefix, suffix };
             },
         },
         methods: {
@@ -138,15 +153,15 @@
             },
         },
         watch: {
-            hex: function () {
+            prefix: function () {
-                this.$emit('input-change', 'hex', this.hex);
+                this.$emit('input-change', 'prefix', this.prefix);
-            },
-            checksum: function () {
-                this.$emit('input-change', 'checksum', this.checksum);
             },
             suffix: function () {
                 this.$emit('input-change', 'suffix', this.suffix);
             },
+            checksum: function () {
+                this.$emit('input-change', 'checksum', this.checksum);
+            },
             threads: function () {
                 this.$emit('input-change', 'threads', this.threads);
             },
@@ -160,15 +175,11 @@
         min-height: 280px
 
     .error-text
-        display: none
         font-size: 14px
         color: $error
 
-    .error
+    input.error
-        input[type="text"]
+        border: 1px solid $error
-            border: 1px solid $error
-        .error-text
-            display: block
 
     .example
         font-size: 14px

src/vue/Result.vue

@@ -16,7 +16,7 @@
             </div>
             <div class="col-lg-2 col-12">
                 <button data-remodal-target="modal" class="save button-large" :disabled="!privateKey">
-                    <i class="icon-lock"></i>&nbsp;&nbsp;&nbsp;Save
+                    <i class="icon-lock"></i>Save
                 </button>
             </div>
         </div>
@@ -74,6 +74,10 @@
 
     .save
         margin-top: 30px
+        i
+          margin-right: 8px
+          top: 2px
+          position: relative
 
     @media screen and (min-width: 992px)
         .save

src/vue/Save.vue

@@ -134,6 +134,7 @@
             margin-bottom: 45px
         .remodal-close
             outline: none
+            margin: 8px
             &:before
                 font-size: 2em
             &:hover

src/vue/Statistics.vue

@@ -25,7 +25,8 @@
 <script>
     import humanizeDuration from 'humanize-duration';
 
-    const computeDifficulty = function (pattern, isChecksum) {
+    const computeDifficulty = function (prefix, suffix, isChecksum) {
+        const pattern = prefix + suffix;
         const ret = Math.pow(16, pattern.length);
         return isChecksum ? ret * Math.pow(2, pattern.replace(/[^a-f]/gi, '').length) : ret;
     };
@@ -46,13 +47,17 @@
             };
         },
         props: {
-            hex: String,
+            prefix: String,
+            suffix: String,
             checksum: Boolean,
             status: String,
             firstTick: {},
         },
         watch: {
-            hex() {
+            prefix() {
+                this.count = 0;
+            },
+            suffix() {
                 this.count = 0;
             },
             checksum() {
@@ -61,10 +66,10 @@
         },
         computed: {
             inputError: function () {
-                return !isValidHex(this.hex);
+                return !isValidHex(this.prefix) || !isValidHex(this.suffix);
             },
             difficulty: function () {
-                return this.inputError ? 'N/A' : computeDifficulty(this.hex, this.checksum);
+                return this.inputError ? 'N/A' : computeDifficulty(this.prefix, this.suffix, this.checksum);
             },
             probability50() {
                 return this.inputError ? 0 : Math.floor(Math.log(0.5) / Math.log(1 - 1 / this.difficulty));