From 2103d4ff1dbb126cc4a0f30e94be60c0da493308 Mon Sep 17 00:00:00 2001
From: Boris Kubiak <kubiakboris@gmail.com>
Date: Sun, 28 Jan 2018 12:12:57 +0100
Subject: [PATCH] Split app into Vue components

---
 src/App.vue             | 189 +++++++++++++++++-------
 src/css/stylesheet.sass | 313 ----------------------------------------
 src/css/variables.sass  |  10 ++
 src/templates/App.html  | 124 ----------------
 src/vue/Corner.vue      |  33 ++++-
 src/vue/Description.vue |  44 ++++++
 src/vue/Error.vue       |  36 +++++
 src/vue/Headline.vue    |  86 +++++++++++
 src/vue/Input.vue       | 181 +++++++++++++++++++++++
 src/vue/Result.vue      |  27 ++++
 src/vue/Statistics.vue  | 112 ++++++++++++++
 11 files changed, 661 insertions(+), 494 deletions(-)
 delete mode 100644 src/css/stylesheet.sass
 create mode 100644 src/css/variables.sass
 delete mode 100644 src/templates/App.html
 create mode 100644 src/vue/Description.vue
 create mode 100644 src/vue/Error.vue
 create mode 100644 src/vue/Headline.vue
 create mode 100644 src/vue/Input.vue
 create mode 100644 src/vue/Result.vue
 create mode 100644 src/vue/Statistics.vue

diff --git a/src/App.vue b/src/App.vue
index 0006230..5088486 100644
--- a/src/App.vue
+++ b/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>
diff --git a/src/css/stylesheet.sass b/src/css/stylesheet.sass
deleted file mode 100644
index 3c82689..0000000
--- a/src/css/stylesheet.sass
+++ /dev/null
@@ -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
\ No newline at end of file
diff --git a/src/css/variables.sass b/src/css/variables.sass
new file mode 100644
index 0000000..09a1fe2
--- /dev/null
+++ b/src/css/variables.sass
@@ -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
diff --git a/src/templates/App.html b/src/templates/App.html
deleted file mode 100644
index 64cffe8..0000000
--- a/src/templates/App.html
+++ /dev/null
@@ -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>
\ No newline at end of file
diff --git a/src/vue/Corner.vue b/src/vue/Corner.vue
index 8b45770..b7aefb4 100644
--- a/src/vue/Corner.vue
+++ b/src/vue/Corner.vue
@@ -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>
\ No newline at end of file
+</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>
\ No newline at end of file
diff --git a/src/vue/Description.vue b/src/vue/Description.vue
new file mode 100644
index 0000000..6e870a9
--- /dev/null
+++ b/src/vue/Description.vue
@@ -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>
\ No newline at end of file
diff --git a/src/vue/Error.vue b/src/vue/Error.vue
new file mode 100644
index 0000000..d279d2b
--- /dev/null
+++ b/src/vue/Error.vue
@@ -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>
\ No newline at end of file
diff --git a/src/vue/Headline.vue b/src/vue/Headline.vue
new file mode 100644
index 0000000..73a4fba
--- /dev/null
+++ b/src/vue/Headline.vue
@@ -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>
\ No newline at end of file
diff --git a/src/vue/Input.vue b/src/vue/Input.vue
new file mode 100644
index 0000000..0552240
--- /dev/null
+++ b/src/vue/Input.vue
@@ -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>
\ No newline at end of file
diff --git a/src/vue/Result.vue b/src/vue/Result.vue
new file mode 100644
index 0000000..aa05bba
--- /dev/null
+++ b/src/vue/Result.vue
@@ -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>
\ No newline at end of file
diff --git a/src/vue/Statistics.vue b/src/vue/Statistics.vue
new file mode 100644
index 0000000..32b7f16
--- /dev/null
+++ b/src/vue/Statistics.vue
@@ -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>
\ No newline at end of file