Improve README & description

.github/workflows/deploy.yml

@@ -16,7 +16,7 @@ jobs:
             - uses: actions/checkout@v3
             - uses: actions/setup-node@v3
               with:
-                  node-version: 14
+                  node-version: 16
             - run: npm ci
             - run: npm test
 
@@ -29,7 +29,7 @@ jobs:
             - uses: actions/checkout@v3
             - uses: actions/setup-node@v3
               with:
-                  node-version: 14
+                  node-version: 16
             - run: npm ci
             - run: npm run build:deploy
             - run: echo "vanity-eth.tk" > dist/CNAME

.nvmrc

@@ -0,0 +1 @@
+v16.20.1

README.md

@@ -13,43 +13,58 @@ Just type [`vanity-eth.tk`](https://vanity-eth.tk) to use it ⚡️
 
 ## What's a vanity address?
 
-A vanity address is an address which part of it is chosen by yourself, making it look less random.
+A vanity address is an address in which you can choose a part of it to make it appear less random.
 
-Examples: `0xc0ffee254729296a45a3885639AC7E10F9d54979`, or `0x999999cf1046e68e36E1aA2E0E07105eDDD1f08E`
+Examples:
+
+-   `0xc0ffee254729296a45a3885639AC7E10F9d54979`
+-   `0x999999cf1046e68e36E1aA2E0E07105eDDD1f08E`
 
 ## Usage
 
 First of all, visit [`vanity-eth.tk`](https://vanity-eth.tk)
 
-Enter as short prefix/suffix of your choice at the bottom of the page, and click ‘generate’ to start. Your browser will
+Enter a short prefix and/or suffix of your choice and click _Generate_ to start. Your browser will
-generate lots of random addresses until one matches your input.
+generate lots of random addresses until it finds one that matches your input.
 
-Once an address is found, you can reveal the private key, or click the 'save' button to download a password-encrypted keystore file.
+Once an address is found, you can choose to reveal the private key or click the _Save_ button to download a password-encrypted keystore file.
 
-You can increase the number of working threads to reach higher speeds, or decrease it if your computer struggles.
+Adjusting the number of working threads can increase or decrease the speed, depending on your computer's capabilities.
 
 ## Security
 
-As explained above, everything is computed only in your browser. Nothing ever leaves your machine, or even your browser tab.
+As mentioned earlier, all computations occur solely within your browser. Nothing ever leaves your machine, or even your browser tab.
-There is no database, no server-side code. Everything vanishes when you close your tab.
+There is no database, no server-side code. Everything vanishes when you close your browser tab.
 
-**Vanity-ETH cannot and will never store your private key**, and if you don't trust it, you have 3 ways to ensure your key remains private:
+**Vanity-ETH cannot and will never store your private key.** If you have concerns about its trustworthiness, you have three options to ensure the privacy of your key:
 
--   Once the web page is loaded, you can turn off the internet and continue playing, it will work seamlessly
+-   After loading the web page, you can disconnect from the internet and continue using it seamlessly
--   You can also download the latest build of Vanity-ETH [here](https://git.io/veth-dl)
+-   Alternatively, you can download the latest build of Vanity-ETH [here](https://git.io/veth-dl)
-    and use it on a completely offline computer
+    and use it on an offline computer
--   The code is 100% open source and available on GitHub. You can review it as much as you want before using it
+-   The code is 100% open source and available on GitHub, allowing you to review it thoroughly before usage.
 
 Vanity-ETH uses a cryptographically secure pseudorandom number generator (CSPRNG) to generate Ethereum addresses.
 
-The keystore file is encrypted with a AES-128-CTR cipher using the BKDF2-SHA256 derivation function with 65536 hashing rounds.
+The keystore file is encrypted with an AES-128-CTR cipher using the PBKDF2-SHA256 derivation function with 65536 hashing rounds.
+
+## Other browser-based tools
+
+Be aware that due to its popularity and open-source nature, Vanity-ETH has been widely copied, leading to the existence of websites claiming to provide the same functionality. Sometimes, they are perfect clones hosted on very similar domains.
+
+Most of them do not credit the original code, are not open-source, and may contain malicious code.
+
+Vanity-ETH has always been the **first** browser-based ETH vanity address generator, and remains the most popular and trusted one.
+
+To be sure you're on the real Vanity-ETH website, search for [Vanity-ETH on GitHub](https://github.com/search?o=desc&q=Vanity-ETH&s=stars), find the repository with the most stars (> 600), and click the link in the description. Double check by searching [Vanity-ETH on Google](https://www.google.com/search?q=Vanity-ETH).
 
 ## Performance
 
-For some reason, the performance of Vanity-ETH can vary a lot from a browser to another.
+Vanity-ETH's performance may vary significantly across different browsers. Currently, Chrome provides the best results.
-Currently, Chrome provides the best results.
 
-Using Vanity-ETH on your phone or tablet will work, but don't expect to reach the speed of a good computer.
+While you can use Vanity-ETH on your phone or tablet, it is unlikely to match the speed of a traditional computer.
+
+**N.B:** Vanity-ETH is designed to be a user-friendly tool that runs directly in your browser, providing easy accessibility without the need to download or install additional software.
+However, browser-based tools have inherent limitations that may affect their performance and efficiency. Some dedicated command-line tools are more difficult to use, but may offer better performance.
 
 ## Compatibility
 
@@ -61,7 +76,7 @@ The keystore file is 100% compatible with MyEtherWallet, MetaMask, Mist, and get
 ## Build Vanity-ETH from source
 
 A GitHub Action is in charge of building and deploying Vanity-ETH to GitHub pages automatically 🤖, but you can make
-your own build from source if you want
+your own build from source if you want (you will need Node.js 16)
 
 ```sh
 git clone https://github.com/bokub/vanity-eth

package.json

@@ -21,11 +21,11 @@
         "crypto-js": "^3.3.0",
         "downloadjs": "^1.4.7",
         "humanize-duration": "^3.27.0",
-        "keccak": "^3.0.1",
+        "keccak": "^3.0.3",
-        "randombytes": "^2.0.6",
+        "randombytes": "^2.1.0",
         "register-service-worker": "^1.7.1",
         "remodal": "^1.1.1",
-        "secp256k1": "^3.8.0",
+        "secp256k1": "^5.0.0",
         "vue": "^2.6.11"
     },
     "devDependencies": {

public/index.html

@@ -7,8 +7,8 @@
             content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
         />
         <meta http-equiv="X-UA-Compatible" content="ie=edge" />
-        <title>Vanity ETH | Ethereum vanity address generator</title>
+        <title>Vanity-ETH | Ethereum vanity address generator</title>
-        <meta property="og:title" content="Vanity ETH" />
+        <meta property="og:title" content="Vanity-ETH" />
         <meta property="og:locale" content="en_US" />
         <meta
             name="description"
@@ -24,7 +24,7 @@
         />
         <link rel="canonical" href="https://vanity-eth.tk/" />
         <meta property="og:url" content="https://vanity-eth.tk/" />
-        <meta property="og:site_name" content="Vanity ETH" />
+        <meta property="og:site_name" content="Vanity-ETH" />
         <meta name="google-site-verification" content="DFWJVWz9IRrh-wjBxn0Y8ith5FTqMeJTSUtuJ595BEs" />
         <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
         <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />

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

@@ -10,7 +10,7 @@ const step = 500;
  */
 const privateToAddress = (privateKey) => {
     const pub = secp256k1.publicKeyCreate(privateKey, false).slice(1);
-    return keccak('keccak256').update(pub).digest().slice(-20).toString('hex');
+    return keccak('keccak256').update(Buffer.from(pub)).digest().slice(-20).toString('hex');
 };
 
 /**
@@ -21,41 +21,48 @@ const getRandomWallet = () => {
     const randbytes = randomBytes(32);
     return {
         address: privateToAddress(randbytes).toString('hex'),
-        privKey: randbytes.toString('hex')
+        privKey: randbytes.toString('hex'),
     };
 };
 
 /**
  * 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,37 +77,39 @@ 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});
+            cb({ attempts });
             attempts = 0;
         }
         wallet = getRandomWallet();
         attempts++;
     }
-    cb({address: '0x' + toChecksumAddress(wallet.address), privKey: wallet.privKey, attempts});
+    cb({ address: '0x' + toChecksumAddress(wallet.address), privKey: wallet.privKey, attempts });
 };
 
 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()});
+        self.postMessage({ error: err.toString() });
     }
 };
 
 module.exports = {
-    onmessage
+    onmessage,
 };

src/vue/Description.vue

@@ -1,56 +1,80 @@
 <template>
     <div class="panel">
         <p>
-            Vanity-ETH is an open source tool using your web browser to generate Ethereum vanity addresses.<br>
+            Vanity-ETH is an open-source tool that uses your web browser to generate Ethereum vanity addresses.<br />
-            Enter a short prefix/suffix of your choice, and click ‘generate’ to start.
+            Enter a short prefix and/or suffix of your choice and click <i>Generate</i> to start.
         </p>
         <div class="shortcut">
             <button type="button" class="button-large" @click="scrollDown">Start now</button>
         </div>
 
         <h2>What's a vanity address?</h2>
-        <p>
+        <div class="p">
-            A vanity address is an address which part of it is chosen by yourself, making it look less random.<br>
+            A vanity address is an address in which you can choose a part of it to make it appear less random.<br />
-            Examples: <span class="monospace">0xc0ffee254729296a45a3885639AC7E10F9d54979</span>, or
+            Examples:
-            <span class="monospace">0x999999cf1046e68e36E1aA2E0E07105eDDD1f08E</span>
+            <ul>
-        </p>
+                <li><span class="monospace">0xc0ffee254729296a45a3885639AC7E10F9d54979</span></li>
+                <li><span class="monospace">0x999999cf1046e68e36E1aA2E0E07105eDDD1f08E</span></li>
+            </ul>
+        </div>
 
         <h2>How it works</h2>
         <p>
-            Enter the prefix/suffix of your choice, and click ‘generate’ to start. Your browser will generate lots of random
+            Enter a short prefix and/or suffix of your choice and click <i>Generate</i> to start. Your browser will
-            addresses until one matches your input.<br>
+            generate lots of random addresses until it finds one that matches your input.<br />
-            Once an address is found, you can reveal the private key, or click the 'save' button to download
+            Once an address is found, you can choose to reveal the private key or click the <i>Save</i> button to
-            a password-encrypted keystore file.<br>
+            download a password-encrypted keystore file.<br /><br />
-            You can increase the number of working threads to reach higher speeds, or decrease it if you computer
+            Adjusting the number of working threads can increase or decrease the speed, depending on your computer's
-            struggles.<br>
+            capabilities.<br />
-
         </p>
         <h2>Security</h2>
         <p>
-            As explained above, everything is computed only in your browser. Nothing ever leaves your machine, or even
+            As mentioned earlier, all computations occur solely within your browser. Nothing ever leaves your machine,
-            your browser tab. There is no database, no server-side code. Everything vanishes when you close your tab.<br><br>
+            or even your browser tab. There is no database, no server-side code. Everything vanishes when you close your
-            <b>Vanity-ETH cannot and will never store your private key</b>, and if you don't trust it, you have 3 ways to ensure
+            browser tab.<br /><br />
-            your key remains private:<br>
+            <b>Vanity-ETH cannot and will never store your private key.</b> If you have concerns about its
-            &nbsp;-&nbsp;Once the web page is loaded, you can turn off the internet and continue playing, it will work seamlessly<br>
+            trustworthiness, you have three options to ensure the privacy of your key:<br />
-            &nbsp;-&nbsp;You can also download the latest build of Vanity-ETH
+            &nbsp;-&nbsp;After loading the web page, you can disconnect from the internet and continue using it
-            <a href="https://git.io/veth-dl" target="_blank">here</a> and use it on a completely offline computer<br>
+            seamlessly<br />
+            &nbsp;-&nbsp;Alternatively, you can download the latest build of Vanity-ETH
+            <a href="https://git.io/veth-dl" target="_blank">here</a> and use it on an offline computer<br />
             &nbsp;-&nbsp;The code is 100% open source and available on
-            <a href="https://github.com/bokub/vanity-eth" target="_blank">Github</a>. You can review it as much as you want before using it<br>
+            <a href="https://github.com/bokub/vanity-eth" target="_blank">GitHub</a>, allowing you to review it
-            <br>
+            thoroughly before usage<br />
-            Vanity-ETH uses a cryptographically secure pseudorandom number generator (CSPRNG) to generate
+            <br />
-            Ethereum addresses.<br>
+            Vanity-ETH uses a cryptographically secure pseudorandom number generator (CSPRNG) to generate Ethereum
-            The keystore file is encrypted with a AES-128-CTR cipher using the BKDF2-SHA256 derivation function with 65536 hashing rounds.
+            addresses.<br />
+            The keystore file is encrypted with an AES-128-CTR cipher using the PBKDF2-SHA256 derivation function with
+            65536 hashing rounds.
+        </p>
+        <h2>Other browser-based tools</h2>
+        <p>
+            Be aware that due to its popularity and open-source nature, Vanity-ETH has been widely copied, leading to
+            the existence of websites claiming to provide the same functionality. Sometimes, they are perfect clones
+            hosted on very similar domains.<br />
+            Most of them do not credit the original code, are not open-source, and may contain malicious code.<br /><br />
+            Vanity-ETH has always been the <b>first</b> browser-based ETH vanity address generator, and remains the most
+            popular and trusted one.<br /><br />
+            To be sure you're on the real Vanity-ETH website, search for
+            <a href="https://github.com/search?o=desc&q=Vanity-ETH&s=stars" target="_blank">Vanity-ETH on GitHub</a>,
+            find the repository with the most stars (> 600), and click the link in the description. Double check by
+            searching <a href="https://www.google.com/search?q=Vanity-ETH" target="_blank">Vanity-ETH on Google</a>.
         </p>
         <h2>Performance</h2>
         <p>
-            For some reason, the performance of Vanity-ETH can vary a lot from a browser to another.
+            Vanity-ETH's performance may vary significantly across different browsers. Currently, Chrome provides the
-            Currently, Chrome provides the best results.<br>
+            best results.<br />
-            Using Vanity-ETH on your phone or tablet will work, but don't expect to reach the speed of a good old computer.
+            While you can use Vanity-ETH on your phone or tablet, it is unlikely to match the speed of a traditional
+            computer.<br /><br />
+            <b>N.B:</b> Vanity-ETH is designed to be a user-friendly tool that runs directly in your browser, providing
+            easy accessibility without the need to download or install additional software.<br />
+            However, browser-based tools have inherent limitations that may affect their performance and efficiency.
+            Some dedicated command-line tools are more difficult to use, but may offer better performance.
         </p>
         <h2>Compatibility</h2>
         <p>
             Any address generated with Vanity-ETH is ERC-20 compatible, which means you can use it for an ICO, an
-            airdrop, or just to withdraw your funds from an exchange.<br>
+            airdrop, or just to withdraw your funds from an exchange.<br />
             The keystore file is 100% compatible with MyEtherWallet, MetaMask, Mist, and geth.
         </p>
     </div>
@@ -60,8 +84,8 @@
     export default {
         data: function () {
             return {
-                scrollTimeOut: null
+                scrollTimeOut: null,
-            }
+            };
         },
         methods: {
             scrollDown() {
@@ -71,19 +95,19 @@
                 let currentValue = window.scrollY;
                 let diff = element.getBoundingClientRect().top / 6;
                 if (Math.abs(diff) > 1 && currentValue > lastValue) {
-                    window.scrollTo(0, (window.scrollY + diff));
+                    window.scrollTo(0, window.scrollY + diff);
-                    this.scrollTimeOut = setTimeout(this.scrollTo, 30, element, currentValue)
+                    this.scrollTimeOut = setTimeout(this.scrollTo, 30, element, currentValue);
                 } else if (currentValue >= lastValue) {
                     document.getElementById('input').focus();
                 }
-            }
+            },
-        }
+        },
     };
 </script>
 
 <style lang="sass" scoped>
     @import "../css/variables"
-    p
+    p, .p
         margin: 15px 0 20px
         color: $text-alt
         overflow-x: hidden

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>
+
+            <div class="row">
+                <div class="col-12 col-sm-6 col-md-12 col-lg-6">
                     <input
+                        :class="{ error: prefixError }"
                         type="text"
                         class="text-input-large"
                         id="input"
-                :placeholder="suffix ? 'Suffix' : 'Prefix'"
+                        placeholder="Prefix"
-                v-model="hex"
+                        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,32 +37,23 @@
             </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">
                     <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" :disabled="running" />
-                        <span class="slider"></span>
-                    </label>
-                    <span>Suffix</span>
-                </div>
-            </div>
             <div class="threads hide-prerender">
                 <input
                     type="button"
@@ -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
-        .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));