add vault shares on ui

Author: AnirudhHack

frontend/app/layout.js

@@ -4,8 +4,8 @@ import "./globals.css";
 const inter = Inter({ subsets: ["latin"] });
 
 export const metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+  title: "Torch",
+  description: "Torch Vault",
 };
 
 export default function RootLayout({ children }) {

frontend/app/vault/page.js

@@ -6,7 +6,7 @@ import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
 import {Nav} from "@/components/component/nav";
 // import { useSearchParams } from 'next/navigation'
-import {deposit, withdraw, wethAllowance, wethbalance, approveWeth, getTvlOfWstheth} from "../../web3Functions/erc4626Vault"
+import {susdeVaultSharesOf, deposit, withdraw, wethAllowance, wethbalance, approveWeth, getTvlOfSUSDE} from "../../web3Functions/erc4626Vault"
 import {getConnectedWalletAddress} from "../../web3Functions/wallet"
 import React, { Suspense, useEffect, useState } from "react";
 import {ethers} from "ethers"
@@ -146,7 +146,7 @@ export default function Game() {
       const signer = await provider.getSigner();
 
       const address = await signer.getAddress();
-      const val = await getTvlOfWstheth(provider)
+      const val = await getTvlOfSUSDE(provider)
       console.log("TVL ", val )
       setTVL(val)
     }
@@ -158,6 +158,25 @@ export default function Game() {
     return () => clearInterval(intervalId); // Cleanup function to clear the interval
   }, []);
 
+  const [vaultShares, setVaultShares] = React.useState("0");
+
+  React.useEffect(() => {
+    const checkVaultShares = async () => {
+      const provider = new ethers.providers.Web3Provider(window.ethereum);
+      const signer = await provider.getSigner();
+      
+      const address = await signer.getAddress();
+      const shares = await susdeVaultSharesOf(provider, address);
+      setVaultShares(shares);
+    }
+
+    checkVaultShares(); // Initial check
+
+    const intervalId = setInterval(checkVaultShares, 3000); // Check every 3 seconds
+
+    return () => clearInterval(intervalId); // Cleanup
+  }, []);
+
   return (
       (<div className="flex flex-col min-h-[100dvh] bg-background">
         <Nav/>
@@ -196,6 +215,10 @@ export default function Game() {
                             <p className="text-muted-foreground">Your Balance</p>
                             <p className="text-2xl font-bold">{parseFloat(wethBal).toFixed(2)} sUSDe</p>
                           </div>
+                          <div>
+                            <p className="text-muted-foreground">Your Vault Shares</p>
+                            <p className="text-2xl font-bold">{parseFloat(vaultShares).toFixed(2)} sUSDeV</p>
+                          </div>
                           <div className="flex gap-2">
                             <Input type="number" placeholder="Amount" 
                               value={amount} 

frontend/web3Functions/erc4626Vault.js

@@ -67,28 +67,28 @@ export async function approveWeth(signer, toAddress, amount) {
 
 /////////// GET FUNCTIONS 
 
-export async function getTvlOfWstheth(provider) {
+export async function getTvlOfSUSDE(provider) {
   try {
       // Create a new instance of the contract
       const contract = new ethers.Contract(ethAddress.susdeVault, erc4626vaultAbi, provider);
 
       const bal = await contract.getVaultsActualBalance();
       return ethers.utils.formatEther(bal.toString())
   } catch (error) {
-    console.error('Error getTvlOfWstheth: ', error);
+    console.error('Error getTvlOfSUSDE: ', error);
     return "0"
   }
 }
 
-export async function wstethVaultSharesOf(provider, address) {
+export async function susdeVaultSharesOf(provider, address) {
   try {
       // Create a new instance of the contract
       const contract = new ethers.Contract(ethAddress.susdeVault, erc4626vaultAbi, provider);
 
       const bal = await contract.balanceOf(address);
       return ethers.utils.formatEther(bal.toString())
   } catch (error) {
-    console.error('Error wstethVaultSharesOf: ', error);
+    console.error('Error susdeVaultSharesOf: ', error);
     return "0"
   }
 }