]> git.immae.eu Git - perso/Immae/Projets/Cryptomonnaies/BIP39.git/blobdiff - src/index.html
BIP32 tab wallets use consistent vertical spacing
[perso/Immae/Projets/Cryptomonnaies/BIP39.git] / src / index.html
index b24b4d4d4d325343aff2c0690cc6cc04ee68768c..64a3bc0e4c463de709136f0b6d3c1e59ed4eef09 100644 (file)
@@ -43,7 +43,7 @@
             .phrase {
                 word-break: keep-all;
             }
-            .strength {
+            .generate-container .strength {
                 /* override mobile width from bootstrap */
                 width: auto!important;
                 display: inline-block;
             .languages * {
                 padding-left: 10px;
             }
+            .monospace {
+                font-family: monospace;
+            }
+            .entropy-container .filtered,
+            .entropy-container .binary {
+                word-wrap: break-word;
+            }
+            .entropy-container li {
+                padding-bottom: 5px;
+            }
+            .card-suit {
+                font-size: 19px;
+                line-height: 0;
+            }
+            .card-suit.club {
+                color: #009F00;
+            }
+            .card-suit.diamond {
+                color: #3D5DC4;
+            }
+            .card-suit.heart {
+                color: #F00;
+            }
+            .card-suit.spade {
+                color: #000;
+            }
         </style>
     </head>
     <body>
                 <div class="col-md-12">
                     <h2>Mnemonic</h2>
                     <form class="form-horizontal" role="form">
-                        <div class="col-sm-2"></div>
-                        <div class="col-sm-10">
-                            <p>You can enter an existing BIP39 mnemonic, or generate a new random one. Typing your own twelve words will probably not work how you expect, since the words require a particular structure (the last word is a checksum)</p>
-                            <p>For more info see the <a href="https://github.com/bitcoin/bips/blob/master/bip-0039.mediawiki" target="_blank">BIP39 spec</a></p>
-                        </div>
                         <div class="form-group">
+                            <div class="col-sm-2"></div>
+                            <div class="col-sm-10">
+                                <p>You can enter an existing BIP39 mnemonic, or generate a new random one. Typing your own twelve words will probably not work how you expect, since the words require a particular structure (the last word is a checksum)</p>
+                                <p>For more info see the <a href="https://github.com/bitcoin/bips/blob/master/bip-0039.mediawiki" target="_blank">BIP39 spec</a></p>
+                            </div>
+                        </div>
+                        <div class="form-group generate-container">
                             <label class="col-sm-2 control-label"></label>
                             <div class="col-sm-10">
                                 <div class="form-inline">
                                 </div>
                             </div>
                         </div>
+                        <div class="entropy-container hidden">
+                            <div class="form-group text-danger">
+                                <label class="col-sm-2 control-label">Warning</label>
+                                <div class="col-sm-10 form-control-static">
+                                    Entropy is an advanced feature.
+                                    Your mnemonic may be insecure if this feature is used incorrectly.
+                                    <a href="#entropy-notes">Read more</a>
+                                </div>
+                            </div>
                             <div class="form-group">
+                                <label for="entropy" class="col-sm-2 control-label">Entropy</label>
+                                <div class="col-sm-7">
+                                    <textarea id="entropy" rows="2" class="entropy form-control" placeholder="Accepts binary, base 6, 6-sided dice, base 10, hexadecimal, cards"></textarea>
+                                    <div class="row">
+                                        <label class="col-sm-3 control-label">Strength</label>
+                                        <div class="strength col-sm-3 form-control-static"></div>
+                                        <label class="col-sm-3 control-label">Event Count</label>
+                                        <div class="event-count col-sm-3 form-control-static"></div>
+                                    </div>
+                                    <div class="row">
+                                        <label class="col-sm-3 control-label">Entropy Type</label>
+                                        <div class="type col-sm-3 form-control-static"></div>
+                                        <label class="col-sm-3 control-label">Bits Per Event</label>
+                                        <div class="bits-per-event col-sm-3 form-control-static"></div>
+                                    </div>
+                                    <div class="row">
+                                        <label class="col-sm-3 control-label">Word Count</label>
+                                        <div class="word-count col-sm-3 form-control-static"></div>
+                                        <label class="col-sm-3 control-label">Total Bits</label>
+                                        <div class="bits col-sm-3 form-control-static"></div>
+                                    </div>
+                                    <label class="col-sm-3 control-label">Filtered Entropy</label>
+                                    <div class="filtered col-sm-9 form-control-static"></div>
+                                    <label class="col-sm-3 control-label">Raw Binary</label>
+                                    <div class="binary col-sm-9 form-control-static"></div>
+                                    <label class="col-sm-3 control-label">Mnemonic Length</label>
+                                    <div class="col-sm-9">
+                                        <select class="mnemonic-length form-control">
+                                            <option value="raw">From entropy length (3 words per 32 bits)</option>
+                                            <option value="12">12 Words</option>
+                                            <option value="15" selected>15 Words</option>
+                                            <option value="18">18 Words</option>
+                                            <option value="21">21 Words</option>
+                                            <option value="24">24 Words</option>
+                                        </select>
+                                    </div>
+                                </div>
+                                <div class="col-sm-3">
+                                    <p>Valid entropy values include:</p>
+                                    <ul>
+                                        <li><strong>Binary</strong> [0-1]<br>101010011</li>
+                                        <li><strong>Base 6</strong> [0-5]<br>123434014</li>
+                                        <li><strong>Dice</strong> [1-6]<br>62535634</li>
+                                        <li><strong>Base 10</strong> [0-9]<br>90834528</li>
+                                        <li><strong>Hex</strong> [0-9A-F]<br>4187a8bfd9</li>
+                                        <li><strong>Card</strong> [A2-9TJQK][CDHS]<br>ahqs9dtc</li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="form-group">
+                            <div class="col-sm-2"></div>
+                            <div class="col-sm-10 checkbox">
+                                <label>
+                                    <input type="checkbox" class="use-entropy">
+                                    Supply my own source of entropy
+                                </label>
+                            </div>
+                        </div>
+                        <div class="form-group">
                             <label class="col-sm-2 control-label"></label>
                             <div class="col-sm-10 languages">
                                 <a href="#english">English</a>
                                     </label>
                                 </div>
                                 <div class="form-group">
-                                    <label class="col-sm-2 control-label">Hive Wallet</label>
+                                    <label for="mycelium-path" class="col-sm-2 control-label">Mycelium Wallet</label>
                                     <div class="col-sm-10">
                                         <p class="form-control no-border">
-                                        Use path <code>m/0'/0</code>.
-                                        For more info see the <a href="https://www.hivewallet.com/" target="_blank">Hive Wallet homepage</a>
+                                        <code>m/44'/0'/0'</code> generates extended keys for import / export.
+                                        </p>
+                                        <p class="form-control no-border">
+                                        <code>m/44'/0'/1'</code> to generate the next account. Continue incrementing for more accounts (most use a single account).
+                                        </p>
+                                        <p class="form-control no-border">
+                                        <code>m/44'/0'/0'/0</code> to generate public addresses.
+                                        </p>
+                                        <p class="form-control no-border">
+                                        <code>m/44'/0'/0'/1</code> to generate change addresses.
                                         </p>
-                                    </div>
-                                </div>
-                                <div class="form-group">
-                                    <label for="mycelium-path" class="col-sm-2 control-label">Mycelium Wallet</label>
-                                    <div class="col-sm-10">
                                         <p class="form-control no-border">
-                                        Use path <code>m/44'/0'/0'/0</code>.
                                         For more info see the <a href="http://www.mycelium.com/" target="_blank">Mycelium Wallet homepage</a>
                                         </p>
                                     </div>
                                     <div class="col-sm-10">
                                         <p class="form-control no-border">
                                         Use path <code>m/0'/0'</code> with hardened addresses.
+                                        </p>
+                                        <p class="form-control no-border">
                                         For more info see the <a href="https://github.com/bitcoin/bitcoin/pull/8035" target="_blank">Bitcoin Core BIP32 implementation</a>
                                         </p>
                                     </div>
                                     <div class="col-sm-10">
                                         <p class="form-control no-border">
                                         Use path <code>m/44'/0'/0'</code>.
-                                        Only enter the <code>xpub</code> extended key into block explorer search fields, never the <code>xpriv</code> key.
+                                        Only enter the <code>xpub</code> extended key into block explorer search fields, never the <code>xprv</code> key.
+                                        </p>
+                                        <p class="form-control no-border">
+                                        Supported by <a href="https://blockchain.info/" target="_blank">blockchain.info</a>.
                                         </p>
                                     </div>
                                 </div>
                                     <button class="address-toggle">Toggle</button>
                                 </div>
                             </th>
+                            <th>
+                                <div class="input-group">
+                                    Public Key&nbsp;&nbsp;
+                                    <button class="public-key-toggle">Toggle</button>
+                                </div>
+                            </th>
                             <th>
                                 <div class="input-group">
                                     Private Key&nbsp;&nbsp;
                                 </div>
                             </th>
                         </thead>
-                        <tbody class="addresses">
-                            <tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
-                            <tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
-                            <tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
-                            <tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
-                            <tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
+                        <tbody class="addresses monospace">
+                            <tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
+                            <tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
+                            <tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
+                            <tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
+                            <tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
                         </tbody>
                     </table>
                 </div>
                         but be careful - it can be easy to make mistakes if you
                         don't know what you're doing
                     </p>
+                    <h3 id="entropy-notes">Entropy</h3>
+                    <p>
+                    Entropy values must be sourced from a
+                    <a href="https://en.wikipedia.org/wiki/Random_number_generation" target="_blank">strong source of randomness</a>.
+                    This means flipping a fair coin, rolling a fair dice, noise measurements etc. Do <strong>NOT</strong> use
+                    phrases from books, lyrics from songs, your birthday or steet address, keyboard mashing, or anything you <i>think</i>
+                    is random, because chances are <em>overwhelming</em> that it isn't random enough for the needs of this tool.
+                    </p>
+                    <p>
+                    The random mnemonic generator on this page uses a
+                    <a href="https://developer.mozilla.org/en-US/docs/Web/API/RandomSource/getRandomValues" target="_blank">cryptographically secure random number generator</a>,
+                    and can generally be trusted more than your own intuition about randomness.
+                    If cryptographic randomness isn't available in your browser, this page will show a warning and <i>will not generate
+                    random mnemonics</i>.
+                    </p>
+                    <p>
+                    <a href="https://bitcointalk.org/index.php?topic=311000.msg3345309#msg3345309" target="_blank">You are not a good source of entropy.</a>
+                    </p>
                 </div>
             </div>
 
             <tr>
                 <td class="index"><span></span></td>
                 <td class="address"><span></span></td>
+                <td class="pubkey"><span></span></td>
                 <td class="privkey"><span></span></td>
             </tr>
         </script>
         <script src="js/wordlist_french.js"></script>
         <script src="js/wordlist_italian.js"></script>
         <script src="js/jsbip39.js"></script>
+        <script src="js/biginteger.js"></script>
+        <script src="js/zxcvbn.js"></script>
+        <script src="js/entropy.js"></script>
         <script src="js/index.js"></script>
     </body>
 </html>