feat: Show defi on webpage

templates/index.html

@@ -66,7 +66,7 @@
                 textStyle: { color: 'white' }
             },
             backgroundColor: '#212529',
-            sliceVisibilityThreshold: 0.02
+            sliceVisibilityThreshold: 0.05
         };
 
         async function fetchData(apiUrl) {
@@ -403,10 +403,94 @@
                                 <td>Sui</td>
                                 <td><a href="https://suivision.xyz/account/0x7e4fa1592e4fad084789f9fe1a4d7631a2e6477b658e777ae95351681bcbe8da" target="_blank">0x7e4fa1592e4fad084789f9fe1a4d7631a2e6477b658e777ae95351681bcbe8da</a></td>
                             </tr>
+                            <tr>
+                                <td>dYdX</td>
+                                <td><a href="https://www.mintscan.io/dydx/address/dydx1ugraczuyfmxy8k38nps4fu7e5derryzx95fs8n" target="_blank">dydx1ugraczuyfmxy8k38nps4fu7e5derryzx95fs8n</a></td>
+                            </tr>
                         </tbody>
                     </table>
                 </div>
             </div>
+            <div class="p-5">
+                <h2 class="display-4">DeFi Positions</h2>
+                <div class="table-responsive" id="defi-table">
+                    <table class="table">
+                        <thead>
+                            <tr>
+                                <th>Type</th>
+                                <th>Initial Value</th>
+                                <th>Date bought</th>
+                                <th>Current Value</th>
+                                <th>Info</th>
+                                <th>Last Updated</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr>
+                                <td>Position Name</td>
+                                <td>$0</td>
+                                <td>00/00/00</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/defi');
+        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('#defi-table tbody');
+
+        if (!tableBody) {
+            console.error('Table body not found. Make sure your table has an id "defi-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.initial}</td>
+                <td>${formatDate(item.bought)}</td>
+                <td>$${item.value}</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>
     </section>
     <footer class="py-5 bg-black">