feat: Update javascript to show USD with dollar symbol
All checks were successful
Build Docker / BuildImage (push) Successful in 32s

This commit is contained in:
Nathan Woodburn 2024-12-06 13:53:19 +11:00
parent afc03cd65d
commit 163dc9167a
Signed by: nathanwoodburn
GPG Key ID: 203B000478AD0EF1
18 changed files with 98 additions and 101 deletions

View File

@ -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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -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"}]}

View File

@ -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"}]}

View File

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

View File

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

Binary file not shown.

View File

@ -122,94 +122,93 @@
} }
function populateTable(data) { 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() { async function toggleChart() {
isPerTokenView = !isPerTokenView; isPerTokenView = !isPerTokenView;
@ -250,8 +249,7 @@ function sortTableByValue(tbody) {
// Set button event listener // Set button event listener
document.getElementById('chart-header').addEventListener('click', toggleChart); 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> </div>
</section> </section>
<section> <section>
@ -366,7 +364,7 @@ function sortTableByValue(tbody) {
<div class="col-lg-6 order-lg-1"> <div class="col-lg-6 order-lg-1">
<div class="p-5"> <div class="p-5">
<h2 class="display-4">3. Sell your tokens</h2> <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> </div>
</div> </div>