Show sunrise stake extractable yield

sunrise-stake · Oct 19, 2023 · df2f5d9 · df2f5d9
1 parent 53e9020
commit df2f5d9
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 2 deletions.
diff --git a/packages/app/src/yield/AccountBalance.tsx b/packages/app/src/yield/AccountBalance.tsx
@@ -9,7 +9,7 @@ const AccountBalance: FC<AccountBalanceProps> = ({ title, balance }) => {
   return (
     <div className="flex gap-2 my-8 justify-center">
       <div className="text-2xl font-bold w-40">{title}</div>
-      <div className="flex flex-col">
+      <div className="flex flex-col items-center">
         <WaterBowl />
         <div className="text-lg">{balance} Sol</div>
       </div>

diff --git a/packages/app/src/yield/YieldApp.tsx b/packages/app/src/yield/YieldApp.tsx
@@ -1,13 +1,32 @@
 import { forwardRef, type ForwardRefRenderFunction } 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";
 
 const _YieldApp: ForwardRefRenderFunction<
   HTMLDivElement,
   { className?: string; active?: boolean } & React.HTMLAttributes<HTMLElement>
 > = ({ className, active = false, ...rest }, ref) => {
+  const {
+    details,
+  }: {
+    details: Details | undefined;
+  } = useSunriseStake();
+
+  if (details == null) return <>Loading...</>;
+
+  const extractableYield = new BN(
+    Math.max(details.extractableYield.toNumber(), 0)
+  );
+
   return (
     <div className="flex flex-col justify-start w-full mt-16">
-      <AccountBalance title="Sunrise Stake" balance="45" />
+      <AccountBalance
+        title="Sunrise Stake"
+        balance={lamportsToDisplay(extractableYield)}
+      />
       <AccountBalance title="Yield Router" balance="5" />
       <div className="flex justify-center gap-16">
         <div className="flex flex-col">