feat: Update javascript to show USD with dollar symbol

README.md

@@ -1,3 +1,4 @@
-# python-webserver-template
+# Woodburn Vault Website
 
-Python3 website template including git actions
+This is the source code for the Woodburn Vault website.
+https://sol.woodburn.au

cache/1981e30de11cf0845e8b5affb4dc75e0.json

@@ -1 +1 @@
-{"timestamp": 1733446009.8000035, "result": 3851.54}
+{"timestamp": 1733452460.1627874, "result": 3858.15}

cache/1ccff5c6f117409fea0c861aa44b8e62.json

@@ -1 +1 @@
-{"timestamp": 1733446072.6788523, "result": 1.18}
+{"timestamp": 1733452583.3367944, "result": 1.18}

cache/29409a8a40dd2d547a7a44b8f6758f54.json

@@ -1 +1 @@
-{"timestamp": 1733446070.7321002, "result": 4.18}
+{"timestamp": 1733452521.11626, "result": 4.18}

cache/4104ed0427efe63d4ca0dead970a4391.json

@@ -1 +1 @@
-{"timestamp": 1733446008.9807563, "result": 253.52}
+{"timestamp": 1733452459.4338732, "result": 256.86}

cache/46c1ec7f5edb30c070003dc54e072f41.json

@@ -1 +1 @@
-{"timestamp": 1733446071.34895, "result": 4.24}
+{"timestamp": 1733452521.7992837, "result": 4.27}

cache/598f5dbf97fb0d45cbc6e1a5b0a3b575.json

@@ -1 +1 @@
-{"timestamp": 1733446003.3492062, "result": 239.52}
+{"timestamp": 1733452455.4462905, "result": 242.74}

cache/6cc6c6a0b2d0654f551d33209c1fd824.json

@@ -1 +1 @@
-{"timestamp": 1733446071.701356, "result": 4.38}
+{"timestamp": 1733452582.4154658, "result": 4.42}

cache/6eec370e2713cfc84c84e1080b8a191a.json

@@ -1 +1 @@
-{"timestamp": 1733446001.4129517, "result": 183.854558203}
+{"timestamp": 1733452453.802349, "result": 220.385447719}

cache/790b28a9a21cf694ad9577ef1072ac9e.json

@@ -1 +1 @@
-{"timestamp": 1733446002.9388597, "result": 0.00925676}
+{"timestamp": 1733452455.0318573, "result": 0.00926176}

cache/a071d7bdda25c22e42ad7840f17c4b0e.json

@@ -1 +1 @@
-{"timestamp": 1733446006.2181199, "result": 1.002}
+{"timestamp": 1733452457.4861891, "result": 0.999534}

cache/a099e7e540e16a185b0279b9494e5099.json

@@ -1 +1 @@
-{"timestamp": 1733446007.035127, "result": 97423}
+{"timestamp": 1733452458.1552694, "result": 97550}

cache/a0ee60913ba556f39d128e7d7249e788.json

@@ -1 +1 @@
-{"timestamp": 1733446071.70293, "result": [{"mint": "3NZ9JMVBmGAqocybic2c7LQCJScmgsAZ6vQqTDzcqmJh", "balance": 0.00011819, "price": 97423, "value": 11.51442437, "name": "Wrapped BTC (Wormhole)", "symbol": "wbtc"}, {"mint": "jupSoLaHXQiZZTSfEWMTRRgpnyFm8f6sZdosWBjx93v", "balance": 0.039815492, "price": 253.52, "value": 10.094023531840001, "name": "Jupiter Staked SOL", "symbol": "jupsol"}, {"mint": "7vfCXTUXx5WJV5JADk17DUJ4ksgau7utNKj4b963voxs", "balance": 0.00255735, "price": 3851.54, "value": 9.849735819, "name": "Ethereum (Wormhole)", "symbol": "eth"}, {"mint": "27G8MtK7VtTcCHkpASjSDdkWWYfoqT6ggEuKidVJidD4", "balance": 2.402337, "price": 4.18, "value": 10.04176866, "name": "Jupiter Perpetuals Liquidity Provider Token", "symbol": "jlp"}, {"mint": "0x2::sui::SUI", "balance": 0.902850107, "price": 4.24, "value": 3.8280844536800003, "name": "Sui", "symbol": "sui"}, {"mint": "0x549e8b69270defbfafd4f94e17ec44cdbdd99820b33bda2278dea3b9a32d3f55::cert::CERT", "balance": 9.658874002, "price": 4.38, "value": 42.30586812876, "name": "Volo Staked SUI", "symbol": "vsui"}]}
+{"timestamp": 1733452582.4186058, "result": [{"mint": "3NZ9JMVBmGAqocybic2c7LQCJScmgsAZ6vQqTDzcqmJh", "balance": 0.00011819, "price": 97550, "value": 11.5294345, "name": "Wrapped BTC (Wormhole)", "symbol": "wbtc"}, {"mint": "jupSoLaHXQiZZTSfEWMTRRgpnyFm8f6sZdosWBjx93v", "balance": 0.039815492, "price": 256.86, "value": 10.22700727512, "name": "Jupiter Staked SOL", "symbol": "jupsol"}, {"mint": "7vfCXTUXx5WJV5JADk17DUJ4ksgau7utNKj4b963voxs", "balance": 0.00255735, "price": 3858.15, "value": 9.8666399025, "name": "Ethereum (Wormhole)", "symbol": "eth"}, {"mint": "27G8MtK7VtTcCHkpASjSDdkWWYfoqT6ggEuKidVJidD4", "balance": 10.355235, "price": 4.18, "value": 43.2848823, "name": "Jupiter Perpetuals Liquidity Provider Token", "symbol": "jlp"}, {"mint": "0x2::sui::SUI", "balance": 0.902850107, "price": 4.27, "value": 3.8551699568899997, "name": "Sui", "symbol": "sui"}, {"mint": "0x549e8b69270defbfafd4f94e17ec44cdbdd99820b33bda2278dea3b9a32d3f55::cert::CERT", "balance": 9.658874002, "price": 4.42, "value": 42.692223088839995, "name": "Volo Staked SUI", "symbol": "vsui"}]}

cache/c652e896f57f598d23e3dbebdb815ef6.json

@@ -1 +1 @@
-{"timestamp": 1733446071.702515, "result": [{"mint": "0x2::sui::SUI", "balance": 0.902850107, "price": 4.24, "value": 3.8280844536800003, "name": "Sui", "symbol": "sui"}, {"mint": "0x549e8b69270defbfafd4f94e17ec44cdbdd99820b33bda2278dea3b9a32d3f55::cert::CERT", "balance": 9.658874002, "price": 4.38, "value": 42.30586812876, "name": "Volo Staked SUI", "symbol": "vsui"}]}
+{"timestamp": 1733452582.4178462, "result": [{"mint": "0x2::sui::SUI", "balance": 0.902850107, "price": 4.27, "value": 3.8551699568899997, "name": "Sui", "symbol": "sui"}, {"mint": "0x549e8b69270defbfafd4f94e17ec44cdbdd99820b33bda2278dea3b9a32d3f55::cert::CERT", "balance": 9.658874002, "price": 4.42, "value": 42.692223088839995, "name": "Volo Staked SUI", "symbol": "vsui"}]}

cache/ccf2a009e56f1b05d471a55d9c9ea8ea.json

@@ -1 +1 @@
-{"timestamp": 1733446072.368228, "result": 82.815227}
+{"timestamp": 1733452583.030624, "result": 82.815227}

server.py

@@ -339,8 +339,6 @@ def getSuiTokens(address: str):
             address
         ]
     }
-
-    # Define headers (if needed)
     headers = {
         "Content-Type": "application/json"
     }

templates/index.html

@@ -122,94 +122,93 @@
         }
 
         function populateTable(data) {
-    const tableContainer = document.getElementById('data-table');
+            const tableContainer = document.getElementById('data-table');
-    tableContainer.innerHTML = ''; // Clear previous table data
+            tableContainer.innerHTML = ''; // Clear previous table data
 
-    // Create table elements
+            // Create table elements
-    const table = document.createElement('table');
+            const table = document.createElement('table');
-    table.style.margin = 'auto';
+            table.style.margin = 'auto';
-    table.style.borderCollapse = 'collapse';
+            table.style.borderCollapse = 'collapse';
-    table.style.maxWidth = '100%';
+            table.style.maxWidth = '100%';
 
-    const thead = document.createElement('thead');
+            const thead = document.createElement('thead');
-    const tbody = document.createElement('tbody');
+            const tbody = document.createElement('tbody');
 
-    // Create table header
+            // Create table header
-    const headerRow = document.createElement('tr');
+            const headerRow = document.createElement('tr');
-    ['Name', 'Amount', 'USD Value'].forEach((headerText, index) => {
+            ['Name', 'Amount', 'USD Value'].forEach((headerText, index) => {
-        const th = document.createElement('th');
+                const th = document.createElement('th');
-        th.textContent = headerText;
+                th.textContent = headerText;
-        th.style.border = '1px solid #ccc';
+                th.style.border = '1px solid #ccc';
-        th.style.padding = '8px 20px';
+                th.style.padding = '8px 20px';
-        th.style.backgroundColor = '#333';
+                th.style.backgroundColor = '#333';
-        th.style.color = 'white';
+                th.style.color = 'white';
 
-        if (headerText === 'USD Value') {
+                if (headerText === 'USD Value') {
-            th.style.cursor = 'pointer'; // Make it clear this header is clickable
+                    th.style.cursor = 'pointer'; // Make it clear this header is clickable
-            th.addEventListener('click', () => sortTableByValue(tbody));
+                    th.addEventListener('click', () => sortTableByValue(tbody));
+                }
+
+                headerRow.appendChild(th);
+            });
+            thead.appendChild(headerRow);
+
+            // Create table rows
+            for (const token in data) {
+                if (token !== 'total') {
+                    const row = document.createElement('tr');
+
+                    const nameCell = document.createElement('td');
+                    nameCell.textContent = data[token].name;
+                    nameCell.style.border = '1px solid #ccc';
+                    nameCell.style.padding = '8px 20px';
+
+                    const amountCell = document.createElement('td');
+                    amountCell.textContent = `${data[token].amount} ${token}`;
+                    amountCell.style.border = '1px solid #ccc';
+                    amountCell.style.padding = '8px 20px';
+
+                    const valueCell = document.createElement('td');
+                    valueCell.textContent = `$${data[token].value.toFixed(2)}`;
+                    valueCell.style.border = '1px solid #ccc';
+                    valueCell.style.padding = '8px 20px';
+
+                    row.appendChild(nameCell);
+                    row.appendChild(amountCell);
+                    row.appendChild(valueCell);
+                    tbody.appendChild(row);
+                }
+            }
+
+            table.appendChild(thead);
+            table.appendChild(tbody);
+            tableContainer.appendChild(table);
+            sortTableByValue(tbody);
         }
 
-        headerRow.appendChild(th);
+        // Function to sort table rows by the "Value" column
-    });
+        function sortTableByValue(tbody) {
-    thead.appendChild(headerRow);
+            const rows = Array.from(tbody.querySelectorAll('tr'));
+            const sortedRows = rows.sort((a, b) => {
+                // Remove `$` and parse the value as float
+                const valueA = parseFloat(a.children[2].textContent.replace('$', '')) || 0;
+                const valueB = parseFloat(b.children[2].textContent.replace('$', '')) || 0;
+                return valueA - valueB;
+            });
 
-    // Create table rows
+            // Reverse order if already sorted in ascending order
-    for (const token in data) {
+            const isDescending = tbody.getAttribute('data-sort-order') === 'desc';
-        if (token !== 'total') {
+            if (!isDescending) {
-            const row = document.createElement('tr');
+                sortedRows.reverse();
+                tbody.setAttribute('data-sort-order', 'desc');
+            } else {
+                tbody.setAttribute('data-sort-order', 'asc');
+            }
 
-            const nameCell = document.createElement('td');
+            // Append sorted rows back to the tbody
-            nameCell.textContent = data[token].name;
+            tbody.innerHTML = '';
-            nameCell.style.border = '1px solid #ccc';
+            sortedRows.forEach(row => tbody.appendChild(row));
-            nameCell.style.padding = '8px 20px';
-
-            const amountCell = document.createElement('td');
-            amountCell.textContent = `${data[token].amount} ${token}`;
-            amountCell.style.border = '1px solid #ccc';
-            amountCell.style.padding = '8px 20px';
-
-            const valueCell = document.createElement('td');
-            valueCell.textContent = data[token].value;
-            valueCell.style.border = '1px solid #ccc';
-            valueCell.style.padding = '8px 20px';
-
-            row.appendChild(nameCell);
-            row.appendChild(amountCell);
-            row.appendChild(valueCell);
-            tbody.appendChild(row);
         }
-    }
-
-    table.appendChild(thead);
-    table.appendChild(tbody);
-    tableContainer.appendChild(table);
-    sortTableByValue(tbody);
-}
-
-// Function to sort table rows by the "Value" column
-function sortTableByValue(tbody) {
-    const rows = Array.from(tbody.querySelectorAll('tr'));
-    const sortedRows = rows.sort((a, b) => {
-        const valueA = parseFloat(a.children[2].textContent) || 0;
-        const valueB = parseFloat(b.children[2].textContent) || 0;
-        return valueA - valueB;
-    });
-
-    // Reverse order if already sorted in ascending order
-    const isDecending = tbody.getAttribute('data-sort-order') === 'desc';
-    if (!isDecending) {
-        sortedRows.reverse();
-        tbody.setAttribute('data-sort-order', 'desc');
-    } else {
-        tbody.setAttribute('data-sort-order', 'asc');
-    }
-
-    // Append sorted rows back to the tbody
-    tbody.innerHTML = '';
-    sortedRows.forEach(row => tbody.appendChild(row));
-}
-
-
 
         async function toggleChart() {
             isPerTokenView = !isPerTokenView;
@@ -224,7 +223,7 @@ function sortTableByValue(tbody) {
             chartDataTable.addColumn({ type: 'string', role: 'tooltip', 'p': { 'html': false } });
             chartDataTable.addRows(transformDataForChart(data));
 
-            resizeAndDraw(chart, chartDataTable, options);            
+            resizeAndDraw(chart, chartDataTable, options);
             updateText(!isPerTokenView);
             populateTable(data);
         }
@@ -250,8 +249,7 @@ function sortTableByValue(tbody) {
         // Set button event listener
         document.getElementById('chart-header').addEventListener('click', toggleChart);
     };
-</script>
+</script></div><a class="btn btn-secondary" role="button" href="https://www.coingecko.com/en/portfolios/public/vault" target="_blank" style="margin: 10px;">View on Coingecko</a>
-</div><a class="btn btn-secondary" role="button" href="https://www.coingecko.com/en/portfolios/public/vault" target="_blank" style="margin: 10px;">View on Coingecko</a>
         </div>
     </section>
     <section>
@@ -366,7 +364,7 @@ function sortTableByValue(tbody) {
                 <div class="col-lg-6 order-lg-1">
                     <div class="p-5">
                         <h2 class="display-4">3. Sell your tokens</h2>
-                        <p>When you want to cash out&nbsp; just sell your tokens back to us at the current token price.</p><a class="btn btn-primary" role="button" href="mailto:vault@woodburn.au">Sell Tokens</a>
+                        <p>When you want to cash out just sell your tokens back to me at the current token price.</p><a class="btn btn-primary" role="button" href="mailto:vault@woodburn.au" target="_blank">Contact to sell tokens</a>
                     </div>
                 </div>
             </div>