feat: Add vault balances to website

templates/index.html

@@ -45,6 +45,52 @@
         <div class="bg-circle-3 bg-circle"></div>
         <div class="bg-circle-4 bg-circle"></div>
     </header>
+    <section style="margin-top: 50px;margin-bottom: 50px;">
+        <div class="text-center">
+            <h1>Vault Balances</h1>
+            <div id="pie-chart" style="margin: auto;max-width: 900px;max-height: 500px;background: rgba(255,255,255,0.76);"><script type="text/javascript">
+
+    window.onload = function () {
+        google.charts.load('current', {
+            packages: ['corechart']
+        });
+
+        // Set a callback to run when the API is loaded.
+        google.charts.setOnLoadCallback(drawChart);
+
+        function drawChart() {
+            // Create data array from Flask data passed into the template
+            var data = new google.visualization.DataTable();
+            data.addColumn('string', 'Token');
+            data.addColumn('number', 'Value');
+            data.addColumn({type: 'string', role: 'tooltip', 'p': {'html': true}});
+
+            data.addRows([
+                {% for token, value, name in pie_chart %}
+                ['{{ token }}', {{ value }}, '{{name}}'],
+                {% endfor %}
+            ]);
+
+    // Set chart options
+    var options = {
+        pieSliceText: 'label',
+        legend: { 
+            position: 'right',
+            textStyle: {
+                color: 'white'
+            }
+        },
+        backgroundColor: '#212529',
+    };
+
+    // Instantiate and draw the chart.
+    var chart = new google.visualization.PieChart(document.getElementById('pie-chart'));
+    chart.draw(data, options);
+        }
+        };
+</script></div>
+        </div>
+    </section>
     <section>
         <div class="container">
             <div class="row align-items-center">
@@ -54,7 +100,7 @@
                 <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.</p><a class="btn btn-primary" role="button" href="mailto:vault@woodburn.au">Buy</a>
+                        <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 or&nbsp;NWywvhcqdkJsm1s9VVviPm9UfyDtyCW9t8kDb24PDPN and send me a message to mint stWDBRN</p><a class="btn btn-primary" role="button" href="mailto:vault@woodburn.au">Buy Tokens</a>
                     </div>
                 </div>
             </div>
@@ -84,7 +130,7 @@
                 <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 at the current token price.</p>
+                        <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>
                     </div>
                 </div>
             </div>
@@ -96,6 +142,7 @@
         </div>
     </footer>
     <script src="assets/bootstrap/js/bootstrap.min.js"></script>
+    <script src="https://www.gstatic.com/charts/loader.js"></script>
 </body>
 
 </html>