Replace "Github with GitHub" in description

.github/workflows/deploy.yml

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

.nvmrc

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

README.md

@@ -13,58 +13,43 @@ Just type [`vanity-eth.tk`](https://vanity-eth.tk) to use it ⚡️
 
 ## What's a vanity address?
 
-A vanity address is an address in which you can choose a part of it to make it appear less random.
+A vanity address is an address which part of it is chosen by yourself, making it look less random.
 
-Examples:
+Examples: `0xc0ffee254729296a45a3885639AC7E10F9d54979`, or `0x999999cf1046e68e36E1aA2E0E07105eDDD1f08E`
-
--   `0xc0ffee254729296a45a3885639AC7E10F9d54979`
--   `0x999999cf1046e68e36E1aA2E0E07105eDDD1f08E`
 
 ## Usage
 
 First of all, visit [`vanity-eth.tk`](https://vanity-eth.tk)
 
-Enter a short prefix and/or suffix of your choice and click _Generate_ to start. Your browser will
+Enter as short prefix/suffix of your choice at the bottom of the page, and click ‘generate’ to start. Your browser will
-generate lots of random addresses until it finds one that matches your input.
+generate lots of random addresses until one matches your input.
 
-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.
+Once an address is found, you can reveal the private key, or click the 'save' button to download a password-encrypted keystore file.
 
-Adjusting the number of working threads can increase or decrease the speed, depending on your computer's capabilities.
+You can increase the number of working threads to reach higher speeds, or decrease it if your computer struggles.
 
 ## Security
 
-As mentioned earlier, all computations occur solely within your browser. Nothing ever leaves your machine, or even your browser tab.
+As explained above, everything is computed only in 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 browser tab.
+There is no database, no server-side code. Everything vanishes when you close your tab.
 
-**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:
+**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:
 
--   After loading the web page, you can disconnect from the internet and continue using it seamlessly
+-   Once the web page is loaded, you can turn off the internet and continue playing, it will work seamlessly
--   Alternatively, you can download the latest build of Vanity-ETH [here](https://git.io/veth-dl)
+-   You can also download the latest build of Vanity-ETH [here](https://git.io/veth-dl)
-    and use it on an offline computer
+    and use it on a completely offline computer
--   The code is 100% open source and available on GitHub, allowing you to review it thoroughly before usage.
+-   The code is 100% open source and available on GitHub. You can review it as much as you want before using it
 
 Vanity-ETH uses a cryptographically secure pseudorandom number generator (CSPRNG) to generate Ethereum addresses.
 
-The keystore file is encrypted with an AES-128-CTR cipher using the PBKDF2-SHA256 derivation function with 65536 hashing rounds.
+The keystore file is encrypted with a AES-128-CTR cipher using the BKDF2-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
 
-Vanity-ETH's performance may vary significantly across different browsers. Currently, Chrome provides the best results.
+For some reason, the performance of Vanity-ETH can vary a lot from a browser to another.
+Currently, Chrome provides the best results.
 
-While you can use Vanity-ETH on your phone or tablet, it is unlikely to match the speed of a traditional computer.
+Using Vanity-ETH on your phone or tablet will work, but don't expect to reach the speed of a good 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
 
@@ -76,7 +61,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 (you will need Node.js 16)
+your own build from source if you want
 
 ```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.3",
+        "keccak": "^3.0.1",
-        "randombytes": "^2.1.0",
+        "randombytes": "^2.0.6",
         "register-service-worker": "^1.7.1",
         "remodal": "^1.1.1",
-        "secp256k1": "^5.0.0",
+        "secp256k1": "^3.8.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,8 +33,7 @@
                 <!--Statistics-->
                 <div class="col-md-6">
                     <statistics
-                        :prefix="input.prefix"
+                        :hex="input.hex"
-                        :suffix="input.suffix"
                         :checksum="input.checksum"
                         :status="status"
                         :first-tick="firstTick"
@@ -84,7 +83,7 @@
                 threads: 4,
                 cores: 0,
                 result: { address: '', privateKey: '' },
-                input: { prefix: '', suffix: '', checksum: true },
+                input: { hex: '', checksum: true, suffix: false },
                 firstTick: null,
                 error: null,
             };
@@ -100,15 +99,15 @@
             setInput: function (inputType, value) {
                 // eslint-disable-next-line default-case
                 switch (inputType) {
-                    case 'prefix':
+                    case 'hex':
-                        this.input.prefix = value;
+                        this.input.hex = value;
-                        break;
-                    case 'suffix':
-                        this.input.suffix = value;
                         break;
                     case 'checksum':
                         this.input.checksum = value;
                         break;
+                    case 'suffix':
+                        this.input.suffix = value;
+                        break;
                     case 'threads':
                         this.threads = value;
                 }
@@ -257,7 +256,7 @@
                         worker.terminate();
                     }
                 };
-                const input = { checksum: true, prefix: 'f'.repeat(5), suffix: '' };
+                const input = { checksum: true, hex: 'f'.repeat(5), suffix: false };
                 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(Buffer.from(pub)).digest().slice(-20).toString('hex');
+    return keccak('keccak256').update(pub).digest().slice(-20).toString('hex');
 };
 
 /**
@@ -21,48 +21,41 @@ 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 - Wallet address
+ * @param address
- * @param prefix - Prefix chosen by the user
+ * @param input
- * @param suffix - Suffix chosen by the user
+ * @param isChecksum
- * @param isChecksum - Is the input case-sensitive
+ * @param isSuffix
  * @returns {boolean}
  */
-const isValidVanityAddress = (address, prefix, suffix, isChecksum) => {
+const isValidVanityAddress = (address, input, isChecksum, isSuffix) => {
-    const addressPrefix = address.substring(0, prefix.length);
+    const subStr = isSuffix ? address.substr(40 - input.length) : address.substr(0, input.length);
-    const addressSuffix = address.substring(40 - suffix.length);
 
     if (!isChecksum) {
-        return prefix === addressPrefix && suffix === addressSuffix;
+        return input === subStr;
     }
-    if (prefix.toLowerCase() !== addressPrefix || suffix.toLowerCase() !== addressSuffix) {
+    if (input.toLowerCase() !== subStr) {
         return false;
     }
 
-    return isValidChecksum(address, prefix, suffix);
+    return isValidChecksum(address, input, isSuffix);
 };
 
-const isValidChecksum = (address, prefix, suffix) => {
+const isValidChecksum = (address, input, isSuffix) => {
     const hash = keccak('keccak256').update(address).digest().toString('hex');
+    const shift = isSuffix ? 40 - input.length : 0;
 
-    for (let i = 0; i < prefix.length; i++) {
+    for (let i = 0; i < input.length; i++) {
-        if (prefix[i] !== (parseInt(hash[i], 16) >= 8 ? address[i].toUpperCase() : address[i])) {
+        const j = i + shift;
+        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;
 };
 
@@ -77,39 +70,37 @@ const toChecksumAddress = (address) => {
 
 /**
  * Generate a lot of wallets until one satisfies the input constraints
- * @param prefix - Prefix chosen by the user
+ * @param input - String 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 = (prefix, suffix, isChecksum, cb) => {
+const getVanityWallet = (input, isChecksum, isSuffix, cb) => {
+    input = isChecksum ? input : input.toLowerCase();
     let wallet = getRandomWallet();
     let attempts = 1;
 
-    const pre = isChecksum ? prefix : prefix.toLowerCase();
+    while (!isValidVanityAddress(wallet.address, input, isChecksum, isSuffix)) {
-    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.prefix, input.suffix, input.checksum, (message) => postMessage(message));
+        getVanityWallet(input.hex, input.checksum, input.suffix, (message) => postMessage(message));
     } catch (err) {
-        self.postMessage({ error: err.toString() });
+        self.postMessage({error: err.toString()});
     }
 };
 
 module.exports = {
-    onmessage,
+    onmessage
 };

src/vue/Description.vue

@@ -1,80 +1,56 @@
 <template>
     <div class="panel">
         <p>
-            Vanity-ETH is an open-source tool that uses your web browser to generate Ethereum vanity addresses.<br />
+            Vanity-ETH is an open source tool using your web browser to generate Ethereum vanity addresses.<br>
-            Enter a short prefix and/or suffix of your choice and click <i>Generate</i> to start.
+            Enter a short prefix/suffix of your choice, and click ‘generate’ 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>
-        <div class="p">
+        <p>
-            A vanity address is an address in which you can choose a part of it to make it appear less random.<br />
+            A vanity address is an address which part of it is chosen by yourself, making it look less random.<br>
-            Examples:
+            Examples: <span class="monospace">0xc0ffee254729296a45a3885639AC7E10F9d54979</span>, or
-            <ul>
+            <span class="monospace">0x999999cf1046e68e36E1aA2E0E07105eDDD1f08E</span>
-                <li><span class="monospace">0xc0ffee254729296a45a3885639AC7E10F9d54979</span></li>
+        </p>
-                <li><span class="monospace">0x999999cf1046e68e36E1aA2E0E07105eDDD1f08E</span></li>
-            </ul>
-        </div>
 
         <h2>How it works</h2>
         <p>
-            Enter a short prefix and/or suffix of your choice and click <i>Generate</i> to start. Your browser will
+            Enter the prefix/suffix of your choice, and click ‘generate’ to start. Your browser will generate lots of random
-            generate lots of random addresses until it finds one that matches your input.<br />
+            addresses until one matches your input.<br>
-            Once an address is found, you can choose to reveal the private key or click the <i>Save</i> button to
+            Once an address is found, you can reveal the private key, or click the 'save' button to download
-            download a password-encrypted keystore file.<br /><br />
+            a password-encrypted keystore file.<br>
-            Adjusting the number of working threads can increase or decrease the speed, depending on your computer's
+            You can increase the number of working threads to reach higher speeds, or decrease it if you computer
-            capabilities.<br />
+            struggles.<br>
+
         </p>
         <h2>Security</h2>
         <p>
-            As mentioned earlier, all computations occur solely within your browser. Nothing ever leaves your machine,
+            As explained above, everything is computed only in your browser. Nothing ever leaves your machine, or even
-            or even your browser tab. There is no database, no server-side code. Everything vanishes when you close your
+            your browser tab. There is no database, no server-side code. Everything vanishes when you close your tab.<br><br>
-            browser tab.<br /><br />
+            <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
-            <b>Vanity-ETH cannot and will never store your private key.</b> If you have concerns about its
+            your key remains private:<br>
-            trustworthiness, you have three options to ensure the privacy of your key:<br />
+            &nbsp;-&nbsp;Once the web page is loaded, you can turn off the internet and continue playing, it will work seamlessly<br>
-            &nbsp;-&nbsp;After loading the web page, you can disconnect from the internet and continue using it
+            &nbsp;-&nbsp;You can also download the latest build of Vanity-ETH
-            seamlessly<br />
+            <a href="https://git.io/veth-dl" target="_blank">here</a> and use it on a completely offline computer<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>, allowing you to review it
+            <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>
-            thoroughly before usage<br />
+            <br>
-            <br />
+            Vanity-ETH uses a cryptographically secure pseudorandom number generator (CSPRNG) to generate
-            Vanity-ETH uses a cryptographically secure pseudorandom number generator (CSPRNG) to generate Ethereum
+            Ethereum addresses.<br>
-            addresses.<br />
+            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.
-        </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>
-            Vanity-ETH's performance may vary significantly across different browsers. Currently, Chrome provides the
+            For some reason, the performance of Vanity-ETH can vary a lot from a browser to another.
-            best results.<br />
+            Currently, Chrome provides the best results.<br>
-            While you can use Vanity-ETH on your phone or tablet, it is unlikely to match the speed of a traditional
+            Using Vanity-ETH on your phone or tablet will work, but don't expect to reach the speed of a good old computer.
-            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>
@@ -84,8 +60,8 @@
     export default {
         data: function () {
             return {
-                scrollTimeOut: null,
+                scrollTimeOut: null
-            };
+            }
         },
         methods: {
             scrollDown() {
@@ -95,19 +71,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,32 +1,15 @@
 <template>
     <div class="panel" id="input-panel">
-        <form @submit.prevent="startGen">
+        <form :class="{ error: inputError }" @submit.prevent="startGen">
-            <div class="error-text" v-if="inputError">Numbers and letters from A to F only</div>
+            <div class="error-text">Numbers and letters from A to F only</div>
-
+            <input
-            <div class="row">
+                type="text"
-                <div class="col-12 col-sm-6 col-md-12 col-lg-6">
+                class="text-input-large"
-                    <input
+                id="input"
-                        :class="{ error: prefixError }"
+                :placeholder="suffix ? 'Suffix' : 'Prefix'"
-                        type="text"
+                v-model="hex"
-                        class="text-input-large"
+                :disabled="running"
-                        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>
@@ -37,22 +20,31 @@
             </div>
             <div class="example hide-prerender">
                 E.g.&nbsp;
-                <span v-if="inputError" class="monospace">N/A</span>
+                <span class="monospace">
-                <span v-else class="monospace">
                     0x<!--
-                    --><b v-if="example.prefix" v-text="example.prefix"></b
+                    --><b v-if="!suffix" v-text="example.chosen"></b
                     ><!--
                     --><span v-text="example.random"></span
                     ><!--
-                    --><b v-if="example.suffix" v-text="example.suffix"></b>
+                    --><b v-if="suffix" v-text="example.chosen"></b>
                 </span>
             </div>
-            <div class="controls hide-prerender">
+            <div class="row controls hide-prerender">
-                <label class="checkbox">
+                <div class="col-12 col-sm-6 col-md-12 col-lg-6">
-                    <input type="checkbox" name="checkbox" checked="" v-model="checksum" :disabled="running" />
+                    <label class="checkbox">
-                    <i class="left"> </i>
+                        <input type="checkbox" name="checkbox" checked="" v-model="checksum" :disabled="running" />
-                    Case-sensitive
+                        <i class="left"> </i>
-                </label>
+                        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
@@ -113,33 +105,26 @@
         data: function () {
             return {
                 threads: this.$props.cores || 4,
-                prefix: '',
+                hex: '',
-                suffix: '',
                 checksum: true,
+                suffix: false,
                 error: false,
             };
         },
         computed: {
-            prefixError: function () {
-                return !isValidHex(this.prefix);
-            },
-            suffixError: function () {
-                return !isValidHex(this.suffix);
-            },
             inputError: function () {
-                return this.prefixError || this.suffixError;
+                return !isValidHex(this.hex);
             },
             example: function () {
                 if (this.inputError) {
-                    return null;
+                    return 'N/A';
                 }
-                const prefix = this.checksum ? this.prefix : mixCase(this.prefix);
+                const chosen = this.checksum ? this.hex : mixCase(this.hex);
-                const suffix = this.checksum ? this.suffix : mixCase(this.suffix);
                 let random = '';
-                for (let i = 0; i < 40 - this.prefix.length - this.suffix.length; i++) {
+                for (let i = 0; i < 40 - this.hex.length; i++) {
                     random += mixCase(Math.floor(Math.random() * 16).toString(16));
                 }
-                return { random, prefix, suffix };
+                return { random, chosen };
             },
         },
         methods: {
@@ -153,15 +138,15 @@
             },
         },
         watch: {
-            prefix: function () {
+            hex: function () {
-                this.$emit('input-change', 'prefix', this.prefix);
+                this.$emit('input-change', 'hex', this.hex);
-            },
-            suffix: function () {
-                this.$emit('input-change', 'suffix', this.suffix);
             },
             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);
             },
@@ -175,11 +160,15 @@
         min-height: 280px
 
     .error-text
+        display: none
         font-size: 14px
         color: $error
 
-    input.error
+    .error
-        border: 1px solid $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>Save
+                    <i class="icon-lock"></i>&nbsp;&nbsp;&nbsp;Save
                 </button>
             </div>
         </div>
@@ -74,10 +74,6 @@
 
     .save
         margin-top: 30px
-        i
-          margin-right: 8px
-          top: 2px
-          position: relative
 
     @media screen and (min-width: 992px)
         .save

src/vue/Save.vue

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

src/vue/Statistics.vue

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