Merge pull request #1 from lukechilds/website

Demo Website
6 years ago · 4ec4a83555
9 changed files with 5737 additions and 0 deletions
--- a/.travis.yml
+++ b/.travis.yml
@ -1,6 +1,8 @@
 language: node_js
 node_js:
  - '8'
+before_install:
+  - cd website && npm install
 script: npm test
 after_success: npm run coverage
 notifications:
--- a/website/.gitignore
+++ b/website/.gitignore
@ -0,0 +1,9 @@
+!yarn.lock
+
+.cache
+dist
+node_modules
+.nyc_output
+npm-debug.log
+package-lock.json
+yarn-error.log
--- a/website/doge.svg
+++ b/website/doge.svg
--- a/website/favicon.png
+++ b/website/favicon.png
--- a/website/index.html
+++ b/website/index.html
@ -0,0 +1,114 @@
+<html>
+  <head>
+    <title>Doge Seed</title>
+    <link rel="shortcut icon" href="favicon.png">
+    <meta name="description" content="Dank mnemonic seed phrases."/>
+    <link rel="stylesheet" type="text/css" href="style.css">
+  </head>
+  <body>
+    <header class="header">
+      <div class="wrapper">
+        <h1>Doge Seed</h1>
+        <h2>Dank mnemonic seed phrases</h2>
+        <img src="doge.svg" width="256" alt="Shiba Inu"/>
+      </div>
+    </header>
+
+    <section class="generator">
+      <div class="wrapper">
+        <div class="seed-text-container">
+          <div class="seed-text"></div>
+        </div>
+        <strong>Word Count</strong>
+        <div class="bit-slider"></div>
+        <button class="regenerate-seed" type="button">Regenerate Seed</button>
+      </div>
+    </section>
+
+    <section class="description">
+      <div class="wrapper">
+        <h3>Wut?</h3>
+        <p>Doge seeds are <strong>cryptographically secure</strong> mnemonic seed phrases with added dankness. The first four words will be a randomly generated Doge-like sentence.</p>
+        <p>The seed phrases are <strong>fully valid checksummed BIP39 seeds</strong>. They can be used with any cryptocurrency and can be imported into any BIP39 compliant wallet.</p>
+        <p>You can test them here: <a rel="noopener noreferrer" target="_blank" href="https://iancoleman.io/bip39/">iancoleman.io/bip39</a></p>
+
+        <h3>Very entropy, such secure.</h3>
+        <p>The mnemonic is seeded by a cryptographically secure random number generator. However there is a slight reduction in entropy due to the introduction of the doge-isms. A doge seed has about 19.415 fewer bits of entropy than a standard BIP39 seed of equivalent length.</p>
+        <p>Each word in a standard BIP39 mnemonic has 2048 possible values (11 bits of entropy). However a 1 bit checksum is added for every 3 words. These checksum bits reduce the entropy of the last word. That can be expressed as:</p>
+        <div align="center">
+          <p>
+            <img alt="S = log2(2048<sup>W</sup>) - (W/3)" src="https://latex.codecogs.com/svg.latex?S&amp;space;=&amp;space;log2(2048%5E%7BW%7D)&amp;space;-&amp;space;%5Cfrac%7BW%7D%7B3%7D" style="max-width:100%;">
+          </p>
+          <p>
+            <sup>Where S is entropy and W is number of words</sup>
+          </p>
+        </div>
+        <p>A doge seed is the same apart from two changes. The first word is one of the three words "much", "such", or "very". The third word is one of two words from the previous selection that wasn't chosen for the first word. That can be expressed as:</p>
+        <div align="center">
+          <p>
+            <img alt="S = log2(2048<sup>W-2</sup>) + log2(3) + log2(2) - (W/3)" src="https://latex.codecogs.com/svg.latex?S&amp;space;=&amp;space;log2(2048%5E%7BW-2%7D)&amp;space;+&amp;space;log2(3)&amp;space;+&amp;space;log2(2)&amp;space;-&amp;space;%5Cfrac%7BW%7D%7B3%7D" style="max-width:100%;">
+          </p>
+          <p>
+            <sup>Where S is entropy and W is number of words</sup>
+          </p>
+        </div>
+        <p>You can compare the entropy against standard BIP39 seeds in the table below.</p>
+        <div align="center">
+          <table class="entropy-table">
+            <thead>
+              <tr>
+                <th align="center">Word Count</th>
+                <th align="center">Standard BIP39 Entropy</th>
+                <th align="center">Doge Seed Entropy</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td align="center">12</td>
+                <td align="center">128 bits</td>
+                <td align="center">108.585 bits</td>
+              </tr>
+              <tr>
+                <td align="center">15</td>
+                <td align="center">160 bits</td>
+                <td align="center">140.585 bits</td>
+              </tr>
+              <tr>
+                <td align="center">18</td>
+                <td align="center">192 bits</td>
+                <td align="center">172.585 bits</td>
+              </tr>
+              <tr>
+                <td align="center">21</td>
+                <td align="center">224 bits</td>
+                <td align="center">204.585 bits</td>
+              </tr>
+              <tr>
+                <td align="center">24</td>
+                <td align="center">256 bits</td>
+                <td align="center">236.585 bits</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+        <p>Although 108.585 bits (12 word doge seed) is a lot of entropy, a Bitcoin private key has 128 bits of entropy, so you probably want your BIP39 seed to have more than or equal that amount to avoid reducing overall security.</p>
+        <p><strong>TL;DR:</strong> If for some insane reason you actually use this over a standard BIP39 seed, it would probably be best to use 15 words or more.</p>
+      </div>
+    </section>
+
+    <footer class="footer">
+      <div class="wrapper">
+        <span class="version"></span>
+        -
+        <a rel="noopener noreferrer" target="_blank" href="//github.com/lukechilds/doge-seed">Source code</a>
+        -
+        <a rel="noopener noreferrer" target="_blank" href="//github.com/lukechilds/doge-seed/issues">Report a bug</a>
+        <div class="me">
+          A thing by <a rel="noopener noreferrer" target="_blank" href="//twitter.com/lukechilds">@lukechilds</a>
+        </div>
+      </div>
+    </footer>
+
+    <script async src="./index.js"></script>
+  </body>
+</html>
--- a/website/index.js
+++ b/website/index.js
@ -0,0 +1,53 @@
+/* eslint-env browser */
+import 'babel-polyfill';
+import whenDomReady from 'when-dom-ready';
+import noUiSlider from 'nouislider';
+import dogeSeed from '..';
+import {version} from '../package';
+
+const bitsToWords = {
+	128: 12,
+	160: 15,
+	192: 18,
+	224: 21,
+	256: 24
+};
+
+const main = async () => {
+	await whenDomReady();
+
+	document.querySelector('.version').innerText = `v${version}`;
+
+	const seedText = document.querySelector('.seed-text');
+	const regenerateSeedButton = document.querySelector('.regenerate-seed');
+
+	const bitSlider = noUiSlider.create(document.querySelector('.bit-slider'), {
+		range: {min: 128, max: 256},
+		step: 32,
+		start: 256,
+		pips: {
+			mode: 'steps',
+			density: 1,
+			format: {to: bits => bitsToWords[bits]},
+			filter: (value, step) => step === 0 ? -1 : 1
+		}
+	});
+
+	const generateSeed = () => {
+		const bits = Number(bitSlider.get());
+		const seedPhraseWords = dogeSeed(bits).split(' ');
+
+		const wrappedSeedPhrase = seedPhraseWords.map(word => `<span>${word}</span>`).join(' ');
+		const wordCount = seedPhraseWords.length;
+
+		seedText.dataset.wordCount = wordCount;
+		seedText.innerHTML = wrappedSeedPhrase;
+	};
+
+	regenerateSeedButton.addEventListener('click', generateSeed);
+	bitSlider.on('update', generateSeed);
+
+	generateSeed();
+};
+
+main();
--- a/website/package.json
+++ b/website/package.json
@ -0,0 +1,23 @@
+{
+  "name": "doge-seed-website",
+  "version": "1.0.0",
+  "description": "Website for lukechilds/doge-seed",
+  "main": "index.html",
+  "repository": "lukechilds/doge-seed",
+  "author": "Luke Childs <lukechilds123@gmail.com>",
+  "license": "MIT",
+  "private": true,
+  "scripts": {
+    "dev": "parcel index.html",
+    "build": "parcel build index.html"
+  },
+  "devDependencies": {
+    "parcel-bundler": "^1.11.0"
+  },
+  "dependencies": {
+    "babel-polyfill": "^6.26.0",
+    "modern-normalize": "^0.5.0",
+    "nouislider": "^12.1.0",
+    "when-dom-ready": "^1.2.12"
+  }
+}
--- a/website/style.css
+++ b/website/style.css
@ -0,0 +1,176 @@
+@import 'modern-normalize';
+@import 'nouislider/distribute/nouislider.css';
+
+body {
+  background: #f2ede0;
+  min-width: 960px;
+}
+
+*:focus {
+  outline: none;
+}
+
+a {
+  color: #F2A51F;
+  text-decoration: none;
+  transition: color 0.2s ease;
+}
+a:hover {
+  color: #f25d1f;
+}
+
+.wrapper {
+  max-width: 1024px;
+  margin: 0 auto;
+  padding: 0 2em;
+  box-sizing: content-box;
+}
+
+.header {
+  padding: 1em 0;
+  text-align: center;
+  background: #fdebbe;
+}
+
+.generator {
+  padding: 1em 0;
+  background: #fdebbe;
+  text-align: center;
+}
+
+.generator .seed-text-container {
+  position: relative;
+  background-color: rgba(0, 0, 0, 0.05);
+  border: 2px solid rgba(0, 0, 0, 0.1);
+  border-radius: 4px;
+  text-align: center;
+  font-size: 1.4em;
+  font-family: "Comic Sans MS", cursive, sans-serif;
+  height: 4em;
+  margin-bottom: 1em;
+}
+
+.generator .seed-text {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 100%;
+  box-sizing: border-box;
+  padding: 0 1em;
+}
+
+.generator .seed-text span:nth-of-type(1),
+.generator .seed-text span:nth-of-type(2) {
+  color: red;
+}
+.generator .seed-text span:nth-of-type(3),
+.generator .seed-text span:nth-of-type(4) {
+  color: blue;
+}
+.generator .seed-text span:nth-of-type(5),
+.generator .seed-text span:nth-of-type(6) {
+  color: orange;
+}
+.generator .seed-text span:nth-of-type(7),
+.generator .seed-text span:nth-of-type(8) {
+  color: yellow;
+}
+.generator .seed-text span:nth-of-type(9),
+.generator .seed-text span:nth-of-type(10) {
+  color: olive;
+}
+.generator .seed-text span:nth-of-type(11),
+.generator .seed-text span:nth-of-type(12) {
+  color: green;
+}
+.generator .seed-text span:nth-of-type(13),
+.generator .seed-text span:nth-of-type(14) {
+  color: purple;
+}
+.generator .seed-text span:nth-of-type(15),
+.generator .seed-text span:nth-of-type(16) {
+  color: fuchsia;
+}
+.generator .seed-text span:nth-of-type(17),
+.generator .seed-text span:nth-of-type(18) {
+  color: limegreen;
+}
+.generator .seed-text span:nth-of-type(19),
+.generator .seed-text span:nth-of-type(20) {
+  color: teal;
+}
+.generator .seed-text span:nth-of-type(21),
+.generator .seed-text span:nth-of-type(22) {
+  color: LightSeaGreen;
+}
+.generator .seed-text span:nth-of-type(23),
+.generator .seed-text span:nth-of-type(24) {
+  color: maroon;
+}
+
+.generator .seed-text[data-word-count="15"] span:nth-of-type(9):before,
+.generator .seed-text[data-word-count="18"] span:nth-of-type(11):before,
+.generator .seed-text[data-word-count="21"] span:nth-of-type(13):before,
+.generator .seed-text[data-word-count="24"] span:nth-of-type(13):before {
+  display: block;
+  content: '';
+}
+
+.bit-slider {
+  max-width: 300px;
+  margin: 0.4em auto 3em;
+}
+
+.bit-slider .noUi-pips {
+  top: 8px;
+  pointer-events: none;
+  color: rgba(0, 0, 0, 0.6);
+}
+
+.bit-slider .noUi-pips .noUi-marker {
+  display: none;
+}
+
+.regenerate-seed {
+  margin: 0 auto;
+  padding: 0.6em 1em;
+  border: none;
+  font: inherit;
+  color: #fff;
+  background-color: #52C752;
+  cursor: pointer;
+  border-radius: 3px;
+  transition: background-color 0.2s ease;
+}
+.regenerate-seed:hover {
+  background-color: #42a042;
+}
+
+.description {
+  padding: 1em 0;
+}
+
+table.entropy-table {
+  border-spacing: 0;
+  border-collapse: collapse;
+}
+
+table.entropy-table th,
+table.entropy-table td {
+  border: 1px solid rgba(0, 0, 0, 0.4);
+  padding: 6px 13px;
+}
+
+table.entropy-table tr:nth-child(even) {
+  background-color: rgba(255, 255, 255, 0.4);
+}
+
+.footer {
+  padding: 1em 0;
+  background: rgba(255, 255, 255, 0.5);
+}
+
+.footer .me {
+  float: right;
+}
--- a/website/yarn.lock
+++ b/website/yarn.lock