feat: Add buy video and approved tokens list

templates/index.html

@@ -263,7 +263,80 @@ function sortTableByValue(tbody) {
                 <div class="col-lg-6 order-lg-1">
                     <div class="p-5">
                         <h2 class="display-4">1. Buy tokens</h2>
-                        <p>To get started buy stWDBRN tokens at the current price to buy a percent of the vault value. The buy in value is then invested in various projects in order to increase the token's value.<br><br>Send USDC or SOL to vault.woodburn.sol and receive stWDBRN in exchange. (Note automated swaps only happen for deposits over 1 USDC)</p>
+                        <p>To get started buy stWDBRN tokens at the current price to buy a percent of the vault value. The buy in value is then invested in various projects in order to increase the token's value.<br><br>Send SOL or approved tokens to vault.woodburn.sol and receive stWDBRN in exchange. (Note automated swaps only happen for deposits over 1 USDC)</p><button class="btn btn-primary" id="video-button" type="button" style="margin: 20px;">See how</button><button class="btn btn-primary" id="approved-tokens-button" type="button" style="margin: 20px;">Approved Tokens</button><div id="video-div" style="margin-top: 20px; display: none;">
+    <video id="video" style="max-width: 75%; height: auto;border-radius: 25px;" controls>
+        <source src="https://cloud.woodburn.au/s/dsaF9MHMz9s5H2q/download/Screen_Recording_20241205_235805_Phantom.mp4"
+            type="video/mp4">
+    </video>
+</div>
+
+<div id="approved-tokens" style="margin-top: 20px; display: none;">
+    <h2>Approved Tokens</h2>
+    <p>The following tokens are approved to be used with the stWDBRN Vault.</p>
+    <ul id="approvedTokenList"></ul>
+</div>
+<script>
+    function toggleVideo() {
+        var video = document.getElementById("video-div");
+        var approvedtokens = document.getElementById("approved-tokens");
+        if (video.style.display === "none") {
+            video.style.display = "block";
+            approvedtokens.style.display = "none";
+        } else {
+            video.style.display = "none";
+        }
+    }
+    async function fetchAndRenderTokens() {
+        try {
+            // Fetch data from the API
+            const response = await fetch('/api/v1/tokens');
+            if (!response.ok) {
+                throw new Error(`HTTP error! Status: ${response.status}`);
+            }
+            const tokens = await response.json();
+
+            // Select the container where the list will be appended
+            const tokenList = document.getElementById('approvedTokenList');
+
+            // Loop through the tokens and create HTML for each
+            tokens.forEach(token => {
+                const listItem = document.createElement('li'); // Create a list item
+                const anchor = document.createElement('a'); // Create a link element
+
+                anchor.href = token.url; // Set the URL
+                anchor.target = '_blank'; // Open the link in a new tab
+                anchor.textContent = `${token.name} (${token.symbol.toUpperCase()})`; // Set the text
+
+                listItem.appendChild(anchor); // Append the anchor to the list item
+                tokenList.appendChild(listItem); // Append the list item to the container
+            });
+        } catch (error) {
+            console.error('Error fetching or rendering tokens:', error);
+        }
+    }
+
+    function toggleApprovedTokens() {
+        // Fill in the approved tokens list if it isn't already
+        if (document.getElementById("approvedTokenList").innerHTML === "") {
+            fetchAndRenderTokens();
+        }
+        var approvedtokens = document.getElementById("approved-tokens");
+        var video = document.getElementById("video-div");
+        if (approvedtokens.style.display === "none") {
+            approvedtokens.style.display = "block";
+            video.style.display = "none";
+        } else {
+            approvedtokens.style.display = "none";
+        }
+    }
+
+    document.getElementById("video-button").onclick = function () {
+        toggleVideo();
+    };
+    document.getElementById("approved-tokens-button").onclick = function () {
+        toggleApprovedTokens();
+    };
+</script>
                     </div>
                 </div>
             </div>