add window for cusdc vault (#718)

* add beefy * fmt
XLabs · Feb 8, 2024 · fb70f44 · fb70f44
1 parent ec686f3
commit fb70f44
Show file tree

Hide file tree

Showing 11 changed files with 244 additions and 212 deletions.
diff --git a/apps/rewards-dashboard/src/components/Background.tsx b/apps/rewards-dashboard/src/components/Background.tsx
@@ -6,110 +6,111 @@ export const Background = ({
 }: {
   children: JSX.Element[] | JSX.Element;
 }) => {
-  return (<>
-    <div className="overflow-y-scroll scrollbar-hide h-full">
-      <>{children}</>
-    </div>
-    <div className="scrollbar-hide">
-      <Glow
-        position={{
-          top: "-661px",
-          left: "203px",
-        }}
-        size={{
-          width: "1175px",
-          height: "1169px",
-        }}
-        background="radial-gradient(50% 50% at 50% 50%, rgba(30,50,90,0.50) 0%, rgba(59, 35, 78, 0.00) 100%)"
-      />
-      <Glow
-        position={{
-          bottom: "-30.47%",
-          left: "17.55%",
-        }}
-        size={{
-          width: "1209px",
-          height: "1205px",
-        }}
-        background="radial-gradient(50% 50% at 50% 50%, rgba(10, 40, 120, 0.70) 0%, rgba(90, 30, 70, 0.00) 100%)"
-      />
-      <Glow
-        position={{
-          top: "-14.47%",
-          left: "37.55%",
-        }}
-        size={{
-          width: "1209px",
-          height: "1205px",
-        }}
-        background="radial-gradient(50% 50% at 50% 50%, rgba(10, 40, 120, 0.70) 0%, rgba(90, 30, 70, 0.00) 100%)"
-      />
-      <Glow
-        position={{
-          top: "-50%",
-          left: "0%",
-        }}
-        size={{
-          width: "1209px",
-          height: "2505px",
-        }}
-        background="radial-gradient(50% 50% at 50% 50%,  rgba(30, 50, 90, 0.50) 0%, rgba(90, 30, 70, 0.00) 100%)"
-      />
-      <Glow
-        position={{
-          top: "-45%",
-          right: "-10%",
-        }}
-        size={{
-          width: "1209px",
-          height: "2505px",
-        }}
-        background="radial-gradient(50% 50% at 50% 50%, #3B234E 0%, rgba(90, 30, 70, 0.00) 100%)"
-      />
+  return (
+    <>
+      <div className="overflow-y-scroll scrollbar-hide h-full">
+        <>{children}</>
+      </div>
+      <div className="scrollbar-hide">
+        <Glow
+          position={{
+            top: "-661px",
+            left: "203px",
+          }}
+          size={{
+            width: "1175px",
+            height: "1169px",
+          }}
+          background="radial-gradient(50% 50% at 50% 50%, rgba(30,50,90,0.50) 0%, rgba(59, 35, 78, 0.00) 100%)"
+        />
+        <Glow
+          position={{
+            bottom: "-30.47%",
+            left: "17.55%",
+          }}
+          size={{
+            width: "1209px",
+            height: "1205px",
+          }}
+          background="radial-gradient(50% 50% at 50% 50%, rgba(10, 40, 120, 0.70) 0%, rgba(90, 30, 70, 0.00) 100%)"
+        />
+        <Glow
+          position={{
+            top: "-14.47%",
+            left: "37.55%",
+          }}
+          size={{
+            width: "1209px",
+            height: "1205px",
+          }}
+          background="radial-gradient(50% 50% at 50% 50%, rgba(10, 40, 120, 0.70) 0%, rgba(90, 30, 70, 0.00) 100%)"
+        />
+        <Glow
+          position={{
+            top: "-50%",
+            left: "0%",
+          }}
+          size={{
+            width: "1209px",
+            height: "2505px",
+          }}
+          background="radial-gradient(50% 50% at 50% 50%,  rgba(30, 50, 90, 0.50) 0%, rgba(90, 30, 70, 0.00) 100%)"
+        />
+        <Glow
+          position={{
+            top: "-45%",
+            right: "-10%",
+          }}
+          size={{
+            width: "1209px",
+            height: "2505px",
+          }}
+          background="radial-gradient(50% 50% at 50% 50%, #3B234E 0%, rgba(90, 30, 70, 0.00) 100%)"
+        />
 
-      <Glow
-        position={{
-          top: "-45%",
-          right: "-30%",
-        }}
-        size={{
-          width: "1209px",
-          height: "2505px",
-        }}
-        background="radial-gradient(50% 50% at 50% 50%, #3B234E 0%, rgba(90, 30, 70, 0.00) 100%)"
-      />
-      <Glow
-        position={{
-          top: "-60px",
-          left: "-150px",
-        }}
-        size={{
-          width: "879px",
-          height: "875px",
-        }}
-        background="radial-gradient(50% 50% at 50% 50%, rgba(48, 42, 96, 0.30) 0%, rgba(48, 42, 96, 0.00) 100%)"
-      >
-        <div className="scrollbar-hide">
-          <Ellipsis width={1024} height={998} marginTop={80} marginLeft={43}>
-            <Ellipsis width={768} height={768} marginTop={56} marginLeft={81}>
-              <Ellipsis
-                width={594}
-                height={592}
-                marginTop={45}
-                marginLeft={38}
-              >
+        <Glow
+          position={{
+            top: "-45%",
+            right: "-30%",
+          }}
+          size={{
+            width: "1209px",
+            height: "2505px",
+          }}
+          background="radial-gradient(50% 50% at 50% 50%, #3B234E 0%, rgba(90, 30, 70, 0.00) 100%)"
+        />
+        <Glow
+          position={{
+            top: "-60px",
+            left: "-150px",
+          }}
+          size={{
+            width: "879px",
+            height: "875px",
+          }}
+          background="radial-gradient(50% 50% at 50% 50%, rgba(48, 42, 96, 0.30) 0%, rgba(48, 42, 96, 0.00) 100%)"
+        >
+          <div className="scrollbar-hide">
+            <Ellipsis width={1024} height={998} marginTop={80} marginLeft={43}>
+              <Ellipsis width={768} height={768} marginTop={56} marginLeft={81}>
                 <Ellipsis
-                  width={380}
-                  height={380}
+                  width={594}
+                  height={592}
                   marginTop={45}
-                  marginLeft={46}
-                />
+                  marginLeft={38}
+                >
+                  <Ellipsis
+                    width={380}
+                    height={380}
+                    marginTop={45}
+                    marginLeft={46}
+                  />
+                </Ellipsis>
               </Ellipsis>
             </Ellipsis>
-          </Ellipsis>
-        </div>
-      </Glow>
-    </div>
-  </>
-         );
+          </div>
+        </Glow>
+      </div>
+    </>
+  );
 };
diff --git a/apps/rewards-dashboard/src/constants.ts b/apps/rewards-dashboard/src/constants.ts
@@ -1,3 +1,3 @@
-
-
-export const WAC_URL = import.meta.env.VITE_WAC_URL ? import.meta.env.VITE_WAC_URL : "https://wac.staging.gfx.town"
+export const WAC_URL = import.meta.env.VITE_WAC_URL
+  ? import.meta.env.VITE_WAC_URL
+  : "https://wac.staging.gfx.town";
diff --git a/apps/rewards-dashboard/src/hooks/useWalletInfo.tsx b/apps/rewards-dashboard/src/hooks/useWalletInfo.tsx
@@ -18,5 +18,5 @@ export const useWalletInfo = () => {
     isConnected,
     ensName,
     blockie,
-  }
-}
+  };
+};
diff --git a/apps/rewards-dashboard/src/index.css b/apps/rewards-dashboard/src/index.css
@@ -4,11 +4,11 @@
 
 /* For Webkit-based browsers (Chrome, Safari and Opera) */
 .scrollbar-hide::-webkit-scrollbar {
-    display: none;
+  display: none;
 }
 
 /* For IE, Edge and Firefox */
 .scrollbar-hide {
-    -ms-overflow-style: none;  /* IE and Edge */
-    scrollbar-width: none;  /* Firefox */
+  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none; /* Firefox */
 }
diff --git a/apps/rewards-dashboard/src/layouts/DashboardLayout.tsx b/apps/rewards-dashboard/src/layouts/DashboardLayout.tsx
@@ -16,24 +16,23 @@ import { useQuery } from "@tanstack/react-query";
 import { WAC_URL } from "../constants";
 
 interface DashboardQueryResult {
-  user: string
-  bridged_amount: number
-  usdc_held: number
-  ausdc_held: number
-  cusdc_held: number
-  pending_rewards: number
+  user: string;
+  bridged_amount: number;
+  usdc_held: number;
+  ausdc_held: number;
+  cusdc_held: number;
+  pending_rewards: number;
+  moo_cusdc_held: number;
 }
 
 export interface OverviewQueryResult {
-  total_bridged: number
-  estimated_rewards: number
-  rewards_earned: number
+  total_bridged: number;
+  estimated_rewards: number;
+  rewards_earned: number;
 }
 
-
-
 const ConnectedDashboard = () => {
-  const {address} = useWalletInfo()
+  const { address } = useWalletInfo();
 
   const [numbersHidden, setNumbersHidden] = useState(false);
 
@@ -51,49 +50,49 @@ const ConnectedDashboard = () => {
   const [usdcHeld, setUSDCHeld] = useState<number | undefined>(undefined);
   const [cusdcHeld, setCUSDCHeld] = useState<number | undefined>(undefined);
   const [ausdcHeld, setAUSDCHeld] = useState<number | undefined>(undefined);
+  const [mooHeld, setMooHeld] = useState<number | undefined>(undefined);
   const [accruedRewards, setAccruedRewards] = useState<number | undefined>(
     undefined
   );
-  const { data:overview } = useQuery<OverviewQueryResult>({
+  const { data: overview } = useQuery<OverviewQueryResult>({
     queryKey: ["overview"],
     staleTime: 5000,
     queryFn: () => {
-      return fetch(`${WAC_URL}/overview`)
-      .then((res) => {
-        return res.json()
-      })
-    }
-  })
-  const { data:userInfo } = useQuery<DashboardQueryResult>({
+      return fetch(`${WAC_URL}/overview`).then((res) => {
+        return res.json();
+      });
+    },
+  });
+  const { data: userInfo } = useQuery<DashboardQueryResult>({
     queryKey: [address],
     enabled: !!address,
     staleTime: 5000,
     queryFn: () => {
-      return fetch(`${WAC_URL}/usersummary?address=${address}`)
-      .then((res) => {
-        return res.json()
-      })
-    }
-  })
+      return fetch(`${WAC_URL}/usersummary?address=${address}`).then((res) => {
+        return res.json();
+      });
+    },
+  });
 
-  useEffect(()=>{
-    if(!userInfo) {
-      return
+  useEffect(() => {
+    if (!userInfo) {
+      return;
     }
-    setUSDCBridged(userInfo.bridged_amount)
-    setUSDCHeld(userInfo.usdc_held)
-    setAUSDCHeld(userInfo.ausdc_held)
-    setCUSDCHeld(userInfo.cusdc_held)
-    setAccruedRewards(userInfo.pending_rewards)
-  }, [userInfo])
-  useEffect(()=>{
-    if(!overview) {
-      return
+    setUSDCBridged(userInfo.bridged_amount);
+    setUSDCHeld(userInfo.usdc_held);
+    setAUSDCHeld(userInfo.ausdc_held);
+    setCUSDCHeld(userInfo.cusdc_held);
+    setAccruedRewards(userInfo.pending_rewards);
+    setMooHeld(userInfo.moo_cusdc_held);
+  }, [userInfo]);
+  useEffect(() => {
+    if (!overview) {
+      return;
     }
-    setTotalBridged(overview.total_bridged)
-    setEstimatedRewards(overview.estimated_rewards)
-    setHistoryRewardsEarned(overview.rewards_earned)
-  }, [overview])
+    setTotalBridged(overview.total_bridged);
+    setEstimatedRewards(overview.estimated_rewards);
+    setHistoryRewardsEarned(overview.rewards_earned);
+  }, [overview]);
 
   const maybeHide = (x?: number) => {
     if (numbersHidden == true) {
@@ -204,6 +203,14 @@ const ConnectedDashboard = () => {
                   unit="cUSDC"
                   infoElement={<Trans>cUSDC Held Value Tooltip</Trans>}
                 />
+                <InfoStatWindow
+                  header={t`Beefy cUSDC Balance`}
+                  value={formatInteger(mooHeld)}
+                  unit="cUSDC"
+                  infoElement={
+                    <Trans>Beefy Finance cUSDC Held Value Tooltip</Trans>
+                  }
+                />
               </div>
               <div className="">
                 <InfoStatWindow
@@ -234,6 +241,7 @@ const ConnectedDashboard = () => {
             value={formatInteger(historyRewardsEarned)}
             unit="ARB"
             graphic={<RewardHistoryGraphic />}
+            infoElement={<Trans>History of Rewards Earned Tooltip</Trans>}
           />
         </div>
       </div>