tvl and hero background

src/components/Counter/index.js

@@ -0,0 +1,65 @@
+import React from "react";
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+import treeBG from './trees.jpg';
+import CountUp from 'react-countup';
+
+const Counter = () => {
+  return (
+    <Box sx={{
+        height: '600px',
+        overflow: 'hidden',
+        backgroundImage: 'linear-gradient(to bottom, rgba(57,53,112, 0.3), rgba(19, 18, 34, 1))',
+        position: 'relative',
+        display: 'flex',
+        justifyContent: 'space-around',
+        flexDirection: 'column',
+        padding: '64px 0',
+        marginBottom: '64px'
+    }}>
+        <Box sx={{
+            position: 'absolute',
+            zIndex: -1,
+            width: '100%',
+            height: '100%',
+            backgroundImage: `url(${treeBG})`
+        }}/>
+        <Typography variant="h1">
+            Charity
+        </Typography>
+        <Box sx={{
+            display: 'flex', 
+            width: '100%', 
+            justifyContent: 'space-around',
+            alignItems: 'center'
+        }}>
+            <Box>
+                <Typography variant="h2">
+                    <CountUp separator="" end={6969} />
+                </Typography>
+                <Typography variant="h4">
+                    Trees planted
+                </Typography>
+            </Box>
+            <Box>
+                <Typography variant="h2">
+                    <CountUp separator="" end={6969} />
+                </Typography>
+                <Typography variant="h4">
+                    Trees planted
+                </Typography>
+            </Box>
+            <Box>
+                <Typography variant="h2">
+                    <CountUp separator="" end={6969} />
+                </Typography>
+                <Typography variant="h4">
+                    Trees planted
+                </Typography>
+            </Box>
+        </Box>
+    </Box>
+  );
+};
+
+export default Counter;

src/components/Counter/styles.js

@@ -0,0 +1,5 @@
+export const styles = {
+    treeBG: {
+        width: '100%'
+    }
+};

src/components/Experience/index.js

@@ -45,6 +45,10 @@ const Experience = () => {
     const rpcEndpoint = "https://rpc-juno-wynd.mib.tech/";
     const client = await CosmWasmClient.connect(rpcEndpoint);
 
+    let lsd = await client.queryContractSmart('juno1snv8z7j75jwfce4uhkjh5fedpxjnrx9v20ffflzws57atshr79yqnw032r', {
+      supply: {}
+    });
+
     const contractAddress =
       "juno1sy9mlw47w44f94zea7g98y5ff4cvtc8rfv75jgwphlet83wlf4ssa050mv";
     return await client.queryContractSmart(contractAddress, {
@@ -62,6 +66,9 @@ const Experience = () => {
     const wyndTokenAddress =
       "juno1mkw83sv6c7sjdvsaplrzc8yaes9l42p4mhy0ssuxjnyzl87c9eps7ce3m9";
 
+    const denom = 
+      "ujuno";
+
     // Fetch API to get all tokens
     const allPrices = await (
       await fetch("https://api.wynddao.com/assets/prices")
@@ -72,6 +79,20 @@ const Experience = () => {
       (el) => el.asset == wyndTokenAddress
     )?.priceInUsd;
 
+
+    const _junoPrice = allPrices.find(
+      (el) => el.asset == denom
+    )?.priceInUsd;
+
+    const rpcEndpoint = "https://rpc-juno-wynd.mib.tech/";
+    const client = await CosmWasmClient.connect(rpcEndpoint);
+
+    let lsd = await client.queryContractSmart('juno1snv8z7j75jwfce4uhkjh5fedpxjnrx9v20ffflzws57atshr79yqnw032r', {
+      supply: {}
+    });
+
+    const _lsd = lsd.supply.total_bonded * _junoPrice / 10 ** 6;
+
     // Format and set WYND price to show on the page
     const formatedUSDPrice = formatCurrencyStatic.format(_wyndPrice);
     setWyndPrice(formatedUSDPrice);
@@ -119,7 +140,8 @@ const Experience = () => {
       return Number(prices[0]) + Number(prices[1]);
     });
 
-    const _totalTVL = pricesInUSD.reduce((acc, b) => acc + b, 0);
+    let _totalTVL = pricesInUSD.reduce((acc, b) => acc + b, 0);
+    _totalTVL += _lsd;
     const formattedPrice = (_totalTVL / 1000000).toFixed(2);
     setTotalTVL(formattedPrice + "M $");
   };

src/components/HeroBanner/index.js

@@ -53,7 +53,7 @@ const HeroBanner = (props) => {
             sm: 'flex-start'
           }
         }}>
-          <Slide direction="right" style={{transitionDelay: 200}} timeout={1000} in={isVisible} mountOnEnter unmountOnExit>
+          <Slide when={true} bottom delay={200}>
             <Typography
               variant="h1"
               sx={{
@@ -93,7 +93,7 @@ const HeroBanner = (props) => {
                 variant="p"
                 style={styles.buttonText}
               >
-                Launch DEX
+                Launch App
               </Typography>
 
               <ButtonArrow/>
@@ -126,16 +126,10 @@ const HeroBanner = (props) => {
           sm: '1px solid #31253F'
         },
         mb: {
-          xs: 0,
-          sm: 9
+          xs: 0
         }
       }}>
-        <Container maxWidth="lg" style={styles.bottomBordersContainer} sx={{
-          display: {
-            xs: 'none',
-            md: 'block'
-          }
-        }}/>
+        <Container maxWidth="lg" style={styles.bottomBordersContainer}></Container>
       </Box>
     </section>
   );

src/components/NavBar/index.js

@@ -75,17 +75,10 @@ const NavBar = (props) => {
             </Box>
           </Box>
           <Box>
-            <Slide direction="down" timeout={1000} style={{transitionDelay: 500}} in={isVisible} mountOnEnter unmountOnExit>
-              <Button href="https://docs.wynddao.com/" target="_blank" color="primary" style={styles.button} sx={{display: { xs: "none", md: "inline-flex" }}}>
-                Documentation
-              </Button>
-            </Slide>
             <Slide direction="down" timeout={1000} style={{transitionDelay: 600}} in={isVisible} mountOnEnter unmountOnExit>
-              <ButtonGroup variant="outlined" aria-label="outlined button group" sx={{mr: {xs:2, md: 0}, display: {xs: 'none', md: 'inline-flex'}}}>
-                <Button onClick={checkDisclaimer} style={styles.button}>
-                  Launch DEX
-                </Button>
-              </ButtonGroup>
+              <Button variant="outlined" onClick={checkDisclaimer} style={styles.button} sx={{mr: {xs:2, md: 0}, display: {xs: 'none', md: 'inline-flex'}}}>
+                Launch App
+              </Button>
             </Slide>
             <IconButton
               edge="start"

src/pages/index.js

@@ -1,6 +1,7 @@
 import React, {useState} from "react"
 import Seo from "../components/Seo";
 import HeroBanner from "../components/HeroBanner";
+import Counter from "../components/Counter";
 import Experience from "../components/Experience";
 import Layout from "../layout";
 import StartWynning from "../components/StartWynning";
@@ -12,7 +13,7 @@ const IndexPage = () => {
 
   const checkDisclaimer = () => {
     if(localStorage.getItem('disclaimer')) {
-      window.open('https://dex.wynddao.com/', '_blank').focus();
+      window.open('https://app.wynddao.com/', '_blank').focus();
     } else {
       setModalOpen(true);
     }
@@ -23,6 +24,7 @@ const IndexPage = () => {
       <Seo />
       <Layout checkDisclaimer={checkDisclaimer}>
         <HeroBanner checkDisclaimer={checkDisclaimer} />
+        <Counter />
         <Experience />
         <StartWynning />
         <Community />