Yield router UI

packages/app/src/Routes.tsx

@@ -6,17 +6,18 @@ import {
   useRef,
   useState,
 } from "react";
-import { ForestApp } from "./forest/ForestApp";
-import { GrowApp } from "./grow/GrowApp";
-import { HubApp } from "./hub/HubApp";
-import { LockingApp } from "./locking/LockingApp";
-import { ReferralApp } from "./referral/ReferralApp";
-import { StakingApp } from "./staking/StakingApp";
+// import { ForestApp } from "./forest/ForestApp";
+// import { GrowApp } from "./grow/GrowApp";
+// import { HubApp } from "./hub/HubApp";
+// import { LockingApp } from "./locking/LockingApp";
+// import { ReferralApp } from "./referral/ReferralApp";
+// import { StakingApp } from "./staking/StakingApp";
 import { useLocation } from "react-router-dom";
 import { Layout } from "./common/partials/Layout";
 import { debounce } from "./common/utils";
 import { useHelp } from "./common/context/HelpContext";
-import { LinkWithQuery } from "./common/components/LinkWithQuery";
+// import { LinkWithQuery } from "./common/components/LinkWithQuery";
+import { YieldApp } from "./yield/YieldApp";
 
 export enum AppRoute {
   Connect = "/connect", // not a route at present TODO fix
@@ -26,6 +27,7 @@ export enum AppRoute {
   Lock = "/lock",
   Referral = "/referral",
   Stake = "/stake",
+  Yield = "/yield",
 }
 
 export const Routes: FC = () => {
@@ -38,6 +40,7 @@ export const Routes: FC = () => {
     referral: useRef<null | HTMLDivElement>(null),
     lost: useRef<null | HTMLDivElement>(null),
     staking: useRef<null | HTMLDivElement>(null),
+    yield: useRef<null | HTMLDivElement>(null),
   };
   const [currentRouteApp, setCurrentRouteApp] =
     useState<null | MutableRefObject<null | HTMLDivElement>>(null);
@@ -120,6 +123,16 @@ export const Routes: FC = () => {
               setCurrentHelpRoute(AppRoute.Stake);
             },
           },
+          {
+            path: AppRoute.Yield,
+            onMatch: () => {
+              appRefs.yield.current?.scrollIntoView({
+                behavior: "smooth",
+              });
+              setCurrentRouteApp(appRefs.yield);
+              setCurrentHelpRoute(AppRoute.Yield);
+            },
+          },
           {
             path: "/*",
             onMatch: () => {
@@ -131,7 +144,13 @@ export const Routes: FC = () => {
           },
         ]}
       />
-      <div className="AppGrid">
+      <YieldApp
+        id="yield-app"
+        className="App"
+        ref={appRefs.yield}
+        active={currentRouteApp === appRefs.yield}
+      />
+      {/* <div className="AppGrid">
         <ForestApp
           id="forest-app"
           className="App ForestApp"
@@ -162,6 +181,7 @@ export const Routes: FC = () => {
           ref={appRefs.staking}
           active={currentRouteApp === appRefs.staking}
         />
+
         <div
           id="lost-app"
           className="App LostApp flex flex-col min-h-screen justify-center items-center"
@@ -177,7 +197,7 @@ export const Routes: FC = () => {
             Back home
           </LinkWithQuery>
         </div>
-      </div>
+      </div> */}
     </Layout>
   );
 };

packages/app/src/index.css

@@ -2,8 +2,8 @@
 @tailwind components;
 @tailwind utilities;
 
-input[type=number]::-webkit-inner-spin-button, 
-input[type=number]::-webkit-outer-spin-button { 
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
   -webkit-appearance: none;
 }
 
@@ -63,8 +63,12 @@ input[type=number]::-webkit-outer-spin-button {
   }
 
   @keyframes float-circle {
-    from { transform: rotate(0deg) translateX(5px) rotate(0deg); }
-    to   { transform: rotate(360deg) translateX(5px) rotate(-360deg); }
+    from {
+      transform: rotate(0deg) translateX(5px) rotate(0deg);
+    }
+    to {
+      transform: rotate(360deg) translateX(5px) rotate(-360deg);
+    }
   }
 
   .FloatingTree {
@@ -74,7 +78,7 @@ input[type=number]::-webkit-outer-spin-button {
   .ForestTree {
     animation: 8s linear infinite float-circle;
   }
-  
+
   .appearance-textfield {
     appearance: textfield;
   }
@@ -114,7 +118,6 @@ input[type=number]::-webkit-outer-spin-button {
   border-bottom: 10px solid transparent;
 }
 
-
 /* TODO TEMP do properly with tailwind or whatever */
 .tree {
   margin-top: 25px;
@@ -125,6 +128,36 @@ input[type=number]::-webkit-outer-spin-button {
 }
 
 @keyframes fadein {
-  from { opacity: 0; }
-  to   { opacity: 1; }
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+.water-liquid {
+  animation: liquid-rise 5s infinite alternate;
+}
+
+.water-wave {
+  animation: bowl-spin 40s infinite alternate;
+}
+
+@keyframes bowl-spin {
+  from {
+    transform: translateX(-20px);
+  }
+  to {
+    transform: translateX(-900px);
+  }
+}
+
+@keyframes liquid-rise {
+  from {
+    transform: scale(0.75) translateY(10px);
+  }
+  to {
+    transform: scale(1) translateY(0);
+  }
 }

packages/app/src/yield/AccountBalance.tsx

@@ -0,0 +1,20 @@
+import { type FC } from "react";
+import WaterBowl from "./WaterBowl";
+
+interface AccountBalanceProps {
+  title: string;
+  balance: string;
+}
+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 items-center">
+        <WaterBowl />
+        <div className="text-lg">{balance} Sol</div>
+      </div>
+    </div>
+  );
+};
+
+export default AccountBalance;

packages/app/src/yield/WaterBowl.tsx

@@ -0,0 +1,40 @@
+import { type FC } from "react";
+
+const WaterBowl: FC = () => {
+  return (
+    <div className="w-16 h-16 border-b border-l border-r rounded-sm overflow-hidden">
+      <div className="water-liquid">
+        <svg
+          width="1024"
+          height="64"
+          xmlns="http://www.w3.org/2000/svg"
+          className="water-wave"
+        >
+          <path
+            fill="#009FE3"
+            d="M1024,31.9V64H0V32h31.6c2.3,0.1,4.4,0.2,6.4,0.2c19.8,0.7,24.2,2,38.8,1.7c10.8-0.2,15.5-1.1,20.5-1.9
+	c0.2,0,0.4-0.1,0.7-0.1c3.8-0.6,7.9-1.1,15.2-1.3c10.5-0.3,16.8,0.5,22.2,1.3c0.2,0,0.4,0.1,0.7,0.1c7,1.1,12.8,2.4,25.1,1.9
+	c7.6-0.3,12.7-1.1,16.8-1.9c0.2,0,0.3-0.1,0.5-0.1c7.9-1.7,12-3.7,24.1-3c7.7,0.5,12.6,1.7,16.7,3c0.1,0,0.2,0.1,0.3,0.1
+	c6.3,1.9,11.1,4,21.8,3.6c9.2-0.3,14-2.1,18.4-3.6c0.1,0,0.2-0.1,0.3-0.1c4.2-1.4,8.1-2.3,15.2-1.3c2.3,0.3,4.4,0.8,6.5,1.3
+	c0.1,0,0.2,0.1,0.4,0.1c6.1,1.5,12,3.4,22.1,3.6c3.4,0.1,7.3,0.1,12.4-0.8c4.1-0.8,6.6-1.7,9.4-2.8c0.1,0,0.1,0,0.2-0.1
+	c1.9-0.7,4-1.4,6.9-2.1c2.1-0.5,8.4-1.9,14.9-1.7c6.4,0.2,10.3,2,14.1,3.8c0,0,0.1,0,0.2,0.1c2.7,1.3,5.4,2.7,8.9,3.6
+	c8.7,2.2,12.9-0.8,20.8-3.6c0.1,0,0.1,0,0.2-0.1c3.4-1.2,7.5-2.3,12.9-3c11.7-1.4,16.9,1,24.4,3c0.1,0,0.2,0,0.3,0.1
+	c4.8,1.2,10.7,2.2,19.9,1.9c7.1-0.2,11.2-1.1,14.6-1.9c0.1,0,0.2-0.1,0.3-0.1c4.7-1.2,8.4-2.4,17.3-2.1c7,0.2,11.5,1.1,15.4,2.1
+	c0.1,0,0.2,0,0.2,0.1c5.6,1.5,10,3.1,19.1,2.8c7.1-0.3,11.2-1.5,14.7-2.8c0.1,0,0.1,0,0.2-0.1c4.6-1.6,8.3-3.3,16.5-3
+	c6.8,0.2,10.7,1.6,14.4,3c0,0,0.1,0,0.1,0c4.1,1.5,8,2.9,15.2,2.8c6.8-0.1,10.1-1.4,13.5-2.8c0,0,0.1,0,0.1,0
+	c3.2-1.3,6.5-2.6,12.8-3c8.4-0.5,13.3,1.2,17.9,3c0,0,0.1,0,0.1,0c5.2,2,10.1,4.2,19.1,3.6c6.7-0.4,10.7-2.1,14.2-3.6
+	c0,0,0.1,0,0.1,0c4.3-1.9,8.1-3.7,15.5-3c4.9,0.5,7.9,1.7,10.7,3c0,0,0.1,0,0.1,0c3.4,1.5,6.5,2.8,12.4,2.8c5.9,0,8.5-1.5,12-2.8
+	c0,0,0.1,0,0.1,0c2.5-1,5.4-1.9,10.2-2.1c8.3-0.5,10.6,1.3,17.1,2.1c0.1,0,0.2,0,0.3,0c1.6,0.2,3.5,0.3,5.8,0.3
+	c2.1,0,3.8-0.1,5.2-0.3c0,0,0,0,0,0c0.1,0,0.1,0,0.2,0c4.7-0.7,6.6-2.3,14.4-3c11-0.9,15,1.8,24.2,3c0.1,0,0.1,0,0.2,0
+	c1.1,0.1,2.4,0.2,3.7,0.3c3.9,0.2,6.7,0.1,9.2-0.3c0.1,0,0.1,0,0.2,0c5.3-0.9,9.2-2.8,19.6-3.8c17.7-1.7,19.2,2.4,45.5,3.3
+	c19.5,0.6,16.9-1.7,35.5-0.8c6.4,0.3,11.2,0.8,15.2,1.3c0,0,0.1,0,0.1,0c9.4,1.2,14.3,2.3,25.2,1.2c3.2-0.3,5.6-0.8,7.6-1.2
+	c0,0,0,0,0,0c5.6-1.1,8.5-2.3,16.3-2.1c7.7,0.2,10.7,1.4,19.4,2.1h0.1c1.8,0.1,3.8,0.3,6.2,0.3c3.2,0.1,3.8,0,16.5,0
+	c7.9,0,15.5-0.2,19.9-0.2V31.9z"
+          />
+        </svg>
+      </div>
+    </div>
+  );
+};
+
+export default WaterBowl;

packages/app/src/yield/YieldApp.tsx

@@ -0,0 +1,78 @@
+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,
+  { className?: string; active?: boolean } & React.HTMLAttributes<HTMLElement>
+> = ({ className, active = false, ...rest }, ref) => {
+  const {
+    details,
+  }: {
+    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(
+    Math.max(details.extractableYield.toNumber(), 0)
+  );
+
+  return (
+    <div className="flex flex-col justify-start w-full mt-16">
+      <AccountBalance
+        title="Sunrise Stake"
+        balance={lamportsToDisplay(extractableYield)}
+      />
+      <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="x" />
+          <AccountBalance title="Eco Token" balance="x" />
+        </div>
+        <AccountBalance
+          title="Offset Bridge"
+          balance={lamportsToDisplay(new BN(offsetBridgeBalance))}
+        />
+      </div>
+    </div>
+  );
+};
+
+const YieldApp = forwardRef(_YieldApp);
+
+export { YieldApp };