Add csv display of addresses

4 files changed, 104 insertions, 36 deletions

diff --git a/src/css/app.css b/src/css/app.css
index 897746b..71109ef 100644
--- a/src/css/app.css
+++ b/src/css/app.css
@@ -95,3 +95,11 @@ body {
     top: 5px;
     right: 5px;
 }
+.csv {
+    margin-top: 20px;
+    margin-bottom: 20px;
+    white-space: pre;
+    overflow-wrap: normal;
+    overflow-x: scroll;
+    font-family: monospace;
+}
diff --git a/src/index.html b/src/index.html
index 0d1a2c6..0f47c38 100644
--- a/src/index.html
+++ b/src/index.html
@@ -603,42 +603,59 @@
                         </label>
                     </div>
                 </div>
-                <div class="col-md-12">
-                    <table class="table table-striped">
-                        <thead>
-                            <th>
-                                <div class="input-group">
-                                    <span>Path</span>&nbsp;&nbsp;
-                                    <button class="index-toggle">Toggle</button>
-                                </div>
-                            </th>
-                            <th>
-                                <div class="input-group">
-                                    <span>Address</span>&nbsp;&nbsp;
-                                    <button class="address-toggle">Toggle</button>
-                                </div>
-                            </th>
-                            <th>
-                                <div class="input-group">
-                                    <span>Public Key</span>&nbsp;&nbsp;
-                                    <button class="public-key-toggle">Toggle</button>
-                                </div>
-                            </th>
-                            <th>
-                                <div class="input-group">
-                                    <span>Private Key</span>&nbsp;&nbsp;
-                                    <button class="private-key-toggle">Toggle</button>
-                                </div>
-                            </th>
-                        </thead>
-                        <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>
+                <ul class="addresses-type nav nav-tabs" role="tablist">
+                    <li id="table-tab" class="active">
+                        <a href="#table" role="tab" data-toggle="tab">Table</a>
+                    </li>
+                    <li id="csv-tab">
+                        <a href="#csv" role="tab" data-toggle="tab">CSV</a>
+                    </li>
+                </ul>
+                <div class="addresses-type tab-content">
+                    <div id="table" class="tab-pane active">
+                        <div class="col-md-12">
+                            <table class="table table-striped">
+                                <thead>
+                                    <th>
+                                        <div class="input-group">
+                                            <span>Path</span>&nbsp;&nbsp;
+                                            <button class="index-toggle">Toggle</button>
+                                        </div>
+                                    </th>
+                                    <th>
+                                        <div class="input-group">
+                                            <span>Address</span>&nbsp;&nbsp;
+                                            <button class="address-toggle">Toggle</button>
+                                        </div>
+                                    </th>
+                                    <th>
+                                        <div class="input-group">
+                                            <span>Public Key</span>&nbsp;&nbsp;
+                                            <button class="public-key-toggle">Toggle</button>
+                                        </div>
+                                    </th>
+                                    <th>
+                                        <div class="input-group">
+                                            <span>Private Key</span>&nbsp;&nbsp;
+                                            <button class="private-key-toggle">Toggle</button>
+                                        </div>
+                                    </th>
+                                </thead>
+                                <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>
+                    </div>
+                    <div id="csv" class="tab-pane">
+                        <div class="col-md-12">
+                            <textarea class="csv form-control" rows="25" readonly></textarea>
+                        </div>
+                    </div>
                 </div>
             </div>
             <span>Show</span>
diff --git a/src/js/index.js b/src/js/index.js
index e63c65f..01543f9 100644
--- a/src/js/index.js
+++ b/src/js/index.js
@@ -91,6 +91,8 @@
     DOM.useBitpayAddressesContainer = $(".use-bitpay-addresses-container");
     DOM.useBitpayAddresses = $(".use-bitpay-addresses");
     DOM.addresses = $(".addresses");
+    DOM.csvTab = $("#csv-tab a");
+    DOM.csv = $(".csv");
     DOM.rowsToAdd = $(".rows-to-add");
     DOM.more = $(".more");
     DOM.moreRowsStartIndex = $(".more-rows-start-index");
@@ -135,6 +137,7 @@
         DOM.addressToggle.on("click", toggleAddresses);
         DOM.publicKeyToggle.on("click", togglePublicKeys);
         DOM.privateKeyToggle.on("click", togglePrivateKeys);
+        DOM.csvTab.on("click", updateCsv);
         DOM.languages.on("click", languageChanged);
         DOM.useBitpayAddresses.on("change", useBitpayAddressesChange);
         setQrEvents(DOM.showQrEls);
@@ -831,6 +834,7 @@
                 addAddressToList(indexText, address, pubkey, privkey);
                 if (isLast) {
                     hidePending();
+                    updateCsv();
                 }
             }, 50)
         }
@@ -871,6 +875,7 @@
 
     function clearAddressesList() {
         DOM.addresses.empty();
+        DOM.csv.val("");
         stopGenerating();
     }
 
@@ -1426,6 +1431,26 @@
         DOM.entropyWordIndexes.text(wordIndexesStr);
     }
 
+    function updateCsv() {
+        var tableCsv = "path,address,public key,private key\n";
+        var rows = DOM.addresses.find("tr");
+        for (var i=0; i<rows.length; i++) {
+            var row = $(rows[i]);
+            var cells = row.find("td");
+            for (var j=0; j<cells.length; j++) {
+                var cell = $(cells[j]);
+                if (!cell.children().hasClass("invisible")) {
+                    tableCsv = tableCsv + cell.text();
+                }
+                if (j != cells.length - 1) {
+                    tableCsv = tableCsv + ",";
+                }
+            }
+            tableCsv = tableCsv + "\n";
+        }
+        DOM.csv.val(tableCsv);
+    }
+
     var networks = [
         {
             name: "BCH - Bitcoin Cash",
diff --git a/tests/spec/tests.js b/tests/spec/tests.js
index 07b7b1a..c3cfdbe 100644
--- a/tests/spec/tests.js
+++ b/tests/spec/tests.js
@@ -2832,4 +2832,22 @@ it('Passes the official BIP84 test spec for account 0 first change address', fun
     });
 });
 
+it('Can display the table as csv', function(done) {
+    var headings = "path,address,public key,private key";
+    var row1 = "m/44'/0'/0'/0/0,1Di3Vp7tBWtyQaDABLAjfWtF6V7hYKJtug,033f5aed5f6cfbafaf223188095b5980814897295f723815fea5d3f4b648d0d0b3,L26cVSpWFkJ6aQkPkKmTzLqTdLJ923e6CzrVh9cmx21QHsoUmrEE";
+    var row20 = "m/44'/0'/0'/0/19,1KhBy28XLAciXnnRvm71PvQJaETyrxGV55,02b4b3e396434d8cdd20c03ac4aaa07387784d5d867b75987f516f5705ee68cb3a,L4GrDrjReMsCAu5DkLXn79jSb95qR7Zfx7eshybCQZ1qL32MXJab";
+    driver.findElement(By.css('.phrase'))
+        .sendKeys('abandon abandon ability');
+    driver.sleep(generateDelay).then(function() {
+        driver.findElement(By.css('.csv'))
+            .getAttribute("value")
+            .then(function(csv) {
+                expect(csv).toContain(headings);
+                expect(csv).toContain(row1);
+                expect(csv).toContain(row20);
+                done();
+            });
+    });
+});
+
 });