Ether Unit Reference Guide added

src/containers/FooterContainer/FooterContainer.vue

@@ -92,7 +92,7 @@ export default {
           contents: [
             {
               text: this.$t('footer.units'),
-              to: '/'
+              to: '/convert-units'
             },
             {
               text: this.$t('footer.txStat'),
@@ -157,6 +157,10 @@ export default {
             {
               text: this.$t('common.customerSupport'),
               to: '/'
+            },
+            {
+              text: 'Help Center',
+              to: '/help-center'
             }
           ]
         }

src/layouts/ConvertUnits/ConvertUnits.scss

@@ -0,0 +1,54 @@
+@import '~@/scss/GlobalVariables';
+
+.wrap {
+
+  padding: 70px 0;
+  background-color: $light-grey-2;
+}
+
+.page-title {
+  text-align: center;
+  h2 {
+    font-size: 45px;
+    margin-bottom: 30px;
+  }
+  p {
+    max-width: 600px;
+    margin: 0 auto;
+  }
+}
+
+
+.ether-unit-reference-guide {
+  margin-top: 50px;
+
+  .block-title {
+    text-align: center;
+  }
+
+  .unit-table {
+    margin-top: 40px;
+    table {
+      width: 100%;
+      border-top: 1px solid $light-grey-3;
+      tr {
+        position: relative;
+        border-bottom: 1px solid $light-grey-3;
+        td {
+          padding: 18px 10px;
+          position: relative;
+
+          span {
+            position: absolute;
+            top: 23px;
+            left: 26px;
+            font-size: 9px;
+            margin-top: -10px;
+          }
+        }
+      }
+    }
+  }
+}
+
+

src/layouts/ConvertUnits/ConvertUnits.vue

@@ -0,0 +1,129 @@
+<template>
+  <div class="convert-units">
+    <div class="wrap">
+
+      <div class="page-container">
+        <div class="page-title">
+          <h2>Convert Units</h2>
+          <p>
+            MyEtherWallet is comprised of talented, inspiring, and hardworking
+            indivisuals from around the world. We share the passion to code.
+          </p>
+        </div>
+
+        <div class="ether-unit-reference-guide">
+          <div class="block-title">
+            <h3>Ether Unit Reference Guide</h3>
+          </div>
+
+          <div class="unit-table">
+            <table>
+              <tbody>
+                <tr v-for="eu in etherUnitRef" v-bind:key="eu.key">
+                  <td>{{eu.name}}</td>
+                  <td>{{eu.unit1}}</td>
+                  <td>{{eu.unit2}}<span>{{eu.unit2e}}</span></td>
+                  <td>{{eu.desc}}</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+
+        </div>
+      </div>
+
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      etherUnitRef: [
+        {
+          name: 'Wei',
+          unit1: '1',
+          unit2: '1',
+          unit2e: '',
+          desc: ''
+        },
+        {
+          name: 'Kwei',
+          unit1: '1,000',
+          unit2: '10',
+          unit2e: '3',
+          desc: 'ada, femtoether'
+        },
+        {
+          name: 'Mwei',
+          unit1: '1,000,000',
+          unit2: '10',
+          unit2e: '6',
+          desc: 'babbage, picoether'
+        },
+        {
+          name: 'Gwei',
+          unit1: '1,000,000,000',
+          unit2: '10',
+          unit2e: '9',
+          desc: 'shannon, nanoether, nano'
+        },
+        {
+          name: 'Szabo',
+          unit1: '1,000,000,000,000',
+          unit2: '10',
+          unit2e: '12',
+          desc: 'microether, micro'
+        },
+        {
+          name: 'Finney',
+          unit1: '1,000,000,000,000,000',
+          unit2: '10',
+          unit2e: '15',
+          desc: 'milliether, milli'
+        },
+        {
+          name: 'Ether',
+          unit1: '1,000,000,000,000,000,000',
+          unit2: '10',
+          unit2e: '18',
+          desc: ''
+        },
+        {
+          name: 'Kether',
+          unit1: '1,000,000,000,000,000,000,000',
+          unit2: '10',
+          unit2e: '21',
+          desc: 'grand, einstein'
+        },
+        {
+          name: 'Mether',
+          unit1: '1,000,000,000,000,000,000,000,000',
+          unit2: '10',
+          unit2e: '24',
+          desc: ''
+        },
+        {
+          name: 'Gether',
+          unit1: '1,000,000,000,000,000,000,000,000,000',
+          unit2: '10',
+          unit2e: '27',
+          desc: ''
+        },
+        {
+          name: 'Tether',
+          unit1: '1,000,000,000,000,000,000,000,000,000,000',
+          unit2: '10',
+          unit2e: '30',
+          desc: ''
+        }
+      ]
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  @import "ConvertUnits.scss";
+</style>

src/layouts/ConvertUnits/index.js

@@ -0,0 +1 @@
+export { default } from './ConvertUnits'

src/router/index.js

@@ -8,6 +8,7 @@ import TermsOfConditionsLayout from '@/layouts/TermsOfConditionsLayout'
 import AccessWalletLayout from '@/layouts/AccessWalletLayout'
 import InterfaceLayout from '@/layouts/InterfaceLayout'
 import HelpCenterLayout from '@/layouts/HelpCenterLayout'
+import ConvertUnits from '@/layouts/ConvertUnits'
 import NotFoundLayout from '@/layouts/NotFoundLayout'
 import CreateWalletWarningLayout from '@/layouts/CreateWalletWarningLayout'
 import {router as routerConfig} from '@/configs/build'
@@ -57,6 +58,11 @@ export default new Router({
       name: 'HelpCenterLayout',
       component: HelpCenterLayout
     },
+    {
+      path: '/convert-units',
+      name: 'ConvertUnits',
+      component: ConvertUnits
+    },
     {
       path: '/getting-started',
       name: 'CreateWalletWarningLayout',