Show yield router and offset bridge balances

packages/app/src/yield/YieldApp.tsx

@@ -1,9 +1,16 @@
-import { forwardRef, type ForwardRefRenderFunction } from "react";
+import {
+  forwardRef,
+  useEffect,
+  type ForwardRefRenderFunction,
+  useState,
+} from "react";
 import AccountBalance from "./AccountBalance";
 import { useSunriseStake } from "../common/context/sunriseStakeContext";
 import { type Details } from "@sunrisestake/client";
 import BN from "bn.js";
 import { lamportsToDisplay } from "../common/utils";
+import { useConnection } from "@solana/wallet-adapter-react";
+import { PublicKey } from "@solana/web3.js";
 
 const _YieldApp: ForwardRefRenderFunction<
   HTMLDivElement,
@@ -15,6 +22,27 @@ const _YieldApp: ForwardRefRenderFunction<
     details: Details | undefined;
   } = useSunriseStake();
 
+  const [yieldRouterBalance, setYieldRouterBalance] = useState(0);
+  const [offsetBridgeBalance, setOffsetBridgeBalance] = useState(0);
+
+  const { connection } = useConnection();
+
+  useEffect(() => {
+    const getBalances = async (): Promise<void> => {
+      const yieldControllerBal = await connection.getBalance(
+        new PublicKey("6HQrvpMJFqMj35JqMReyhnUrRXNucAAB6FywdDu7xPKA")
+      );
+      const offsetBridgeBal = await connection.getBalance(
+        new PublicKey("4XTLzYF3kteTbb3a9NYYjeDAYwNoEGSkjoqJYkiLCnmm")
+      );
+
+      setYieldRouterBalance(yieldControllerBal);
+      setOffsetBridgeBalance(offsetBridgeBal);
+    };
+
+    getBalances().catch(console.error);
+  }, [connection]);
+
   if (details == null) return <>Loading...</>;
 
   const extractableYield = new BN(
@@ -27,13 +55,19 @@ const _YieldApp: ForwardRefRenderFunction<
         title="Sunrise Stake"
         balance={lamportsToDisplay(extractableYield)}
       />
-      <AccountBalance title="Yield Router" balance="5" />
+      <AccountBalance
+        title="Yield Router"
+        balance={lamportsToDisplay(new BN(yieldRouterBalance))}
+      />
       <div className="flex justify-center gap-16">
         <div className="flex flex-col">
-          <AccountBalance title="Eco Token Escrow" balance="0.8" />
-          <AccountBalance title="Eco Token" balance="0.8" />
+          <AccountBalance title="Eco Token Escrow" balance="x" />
+          <AccountBalance title="Eco Token" balance="x" />
         </div>
-        <AccountBalance title="Offset Bridge" balance="15" />
+        <AccountBalance
+          title="Offset Bridge"
+          balance={lamportsToDisplay(new BN(offsetBridgeBalance))}
+        />
       </div>
     </div>
   );