update vaultcard

Author: FilipMasar

packages/nextjs/app/page.tsx

@@ -8,7 +8,7 @@ import { DEFAULT_ASSET_DECIMALS } from "~~/utils/sovabase";
 
 const Home: NextPage = () => {
   const { address: connectedAddress } = useAccount();
-  const { vaultSymbol, totalAssets, vaultDecimals, userBalance } = useVaultData();
+  const { vaultSymbol, totalAssets, userAssets } = useVaultData();
 
   return (
     <>
@@ -41,8 +41,8 @@ const Home: NextPage = () => {
               name="USDC Vault"
               symbol={vaultSymbol || ""}
               totalAssets={totalAssets}
-              userBalance={connectedAddress ? userBalance : undefined}
-              decimals={vaultDecimals}
+              userAssets={connectedAddress ? userAssets : undefined}
+              decimals={DEFAULT_ASSET_DECIMALS}
               assetDecimals={DEFAULT_ASSET_DECIMALS}
               href="/vault/usdc"
               icon="💵"
@@ -54,7 +54,7 @@ const Home: NextPage = () => {
               name="ETH Vault"
               symbol="svETH"
               totalAssets={undefined}
-              userBalance={undefined}
+              userAssets={undefined}
               decimals={18}
               assetDecimals={18}
               href="#"

packages/nextjs/components/sovabase/VaultCard.tsx

@@ -5,7 +5,7 @@ interface VaultCardProps {
   name: string;
   symbol: string;
   totalAssets: bigint | undefined;
-  userBalance: bigint | undefined;
+  userAssets: bigint | undefined;
   decimals: number | undefined;
   assetDecimals: number;
   href: string;
@@ -18,7 +18,7 @@ export const VaultCard = ({
   name,
   symbol,
   totalAssets,
-  userBalance,
+  userAssets,
   decimals,
   assetDecimals,
   href,
@@ -44,17 +44,21 @@ export const VaultCard = ({
 
       <div className="grid grid-cols-2 gap-2">
         <div className="bg-base-200 rounded-lg p-2">
-          <p className="text-xs text-base-content/60">Total Assets</p>
+          <p className="text-xs text-base-content/60">
+            <span className="tooltip tooltip-top tooltip-accent" data-tip="The total assets deposited in the vault">
+              Deposits
+            </span>
+          </p>
           <p className="text-lg font-bold">{isComingSoon ? "--" : formatAmount(totalAssets, assetDecimals)}</p>
           <p className="text-xs text-base-content/50">{assetName}</p>
         </div>
 
         <div className="bg-base-200 rounded-lg p-2">
           <p className="text-xs text-base-content/60">Your Balance</p>
           <p className="text-lg font-bold">
-            {isComingSoon ? "--" : userBalance ? formatAmount(userBalance, decimals) : "0.00"}
+            {isComingSoon ? "--" : userAssets ? formatAmount(userAssets, decimals) : "0.00"}
           </p>
-          <p className="text-xs text-base-content/50">Shares</p>
+          <p className="text-xs text-base-content/50">{assetName}</p>
         </div>
       </div>