feat: Add APY display to webpage

templates/index.html

@@ -424,6 +424,7 @@
                                 <th>Initial Value</th>
                                 <th>Date bought</th>
                                 <th>Current Value</th>
+                                <th>APY</th>
                                 <th>Info</th>
                                 <th>Last Updated</th>
                             </tr>
@@ -434,6 +435,7 @@
                                 <td>$0</td>
                                 <td>00/00/00</td>
                                 <td>$0</td>
+                                <td>0%</td>
                                 <td>Find out more</td>
                                 <td>00/00/00</td>
                             </tr>
@@ -478,6 +480,81 @@
                 <td>$${item.initial}</td>
                 <td>${formatDate(item.bought)}</td>
                 <td>$${item.value}</td>
+                <td>~${item.apy}%</td>
+                <td><a href="${item.url}" target="_blank">Find out more</a></td>
+                <td>${formatDate(item.updated)}</td>
+            `;
+
+            tableBody.appendChild(row);
+        });
+
+    } catch (error) {
+        console.error('Error fetching or injecting data:', error);
+    }
+}
+
+// Set on page load event listener
+window.addEventListener('load', fetchAndInjectDefiData);
+</script>
+            </div>
+            <div class="p-5">
+                <h2 class="display-4">Other</h2>
+                <div class="table-responsive" id="other-table">
+                    <table class="table">
+                        <thead>
+                            <tr>
+                                <th>Asset</th>
+                                <th>APY</th>
+                                <th>Info</th>
+                                <th>Last Updated</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr>
+                                <td>Asset Name</td>
+                                <td>0%</td>
+                                <td>Find out more</td>
+                                <td>00/00/00</td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div><script type="text/javascript">
+    async function fetchAndInjectDefiData() {
+    try {
+        // Fetch data from the API
+        const response = await fetch('/api/v1/apy');
+        if (!response.ok) {
+            throw new Error('Network response was not ok' + response.statusText);
+        }
+        
+        const data = await response.json();
+
+        // Locate the table where the data will be injected
+        const tableBody = document.querySelector('#other-table tbody');
+
+        if (!tableBody) {
+            console.error('Table body not found. Make sure your table has an id "other-table" with a <tbody> element.');
+            return;
+        }
+
+        // Clear existing rows (optional, depending on use case)
+        tableBody.innerHTML = '';
+
+        const formatDate = (timestamp) => {
+            const date = new Date(timestamp * 1000); // Convert seconds to milliseconds
+            const day = String(date.getDate()).padStart(2, '0');
+            const month = String(date.getMonth() + 1).padStart(2, '0'); // Months are zero-based
+            const year = String(date.getFullYear()).slice(-2); // Get last two digits of the year
+            return `${day}/${month}/${year}`;
+        };
+
+        // Iterate over the data and create table rows
+        data.forEach(item => {
+            const row = document.createElement('tr');
+
+            row.innerHTML = `
+                <td>${item.name}</td>
+                <td>~${item.apy}%</td>
                 <td><a href="${item.url}" target="_blank">Find out more</a></td>
                 <td>${formatDate(item.updated)}</td>
             `;