fix(apr-bar): correct staked ratio calculation and remove code duplication

Author: EdSDR

apps/torus-wallet/next-env.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-import "./.next/types/routes.d.ts";
+import "./.next/dev/types/routes.d.ts";
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

apps/torus-wallet/src/app/_components/apr-bar-wrapper.tsx

@@ -0,0 +1,9 @@
+"use client";
+
+import { useTorus } from "@torus-ts/torus-provider";
+import { APRBarClient } from "@torus-ts/ui/components/apr";
+
+export function APRBarWrapper() {
+  const { api } = useTorus();
+  return <APRBarClient api={api} />;
+}

apps/torus-wallet/src/app/_components/apr-bar/apr-bar-base.tsx

@@ -12,7 +12,7 @@ import { WalletProvider } from "~/context/wallet-provider";
 import { env, EnvScript } from "~/env";
 import { firaMono } from "~/utils/fonts";
 import PlausibleProvider from "next-plausible";
-import { APRBar } from "./_components/apr-bar/apr-bar";
+import { APRBarWrapper } from "./_components/apr-bar-wrapper";
 import { SidebarLinks } from "./_components/sidebar-links";
 import { TransactionsSheet } from "./_components/transactions-sheet";
 import { WalletBalance } from "./_components/wallet-balance";
@@ -73,7 +73,7 @@ export default function RootLayout({
           torusCacheUrl={env("NEXT_PUBLIC_TORUS_CACHE_URL")}
         >
           <WalletHeader />
-          <APRBar />
+          <APRBarWrapper />
           <Container>
             <main className="mx-auto flex min-w-full flex-col items-center gap-3 text-white">
               <div className="flex w-full max-w-screen-xl flex-col justify-around gap-4 lg:mt-[10vh] lg:flex-row">

apps/torus-wallet/src/app/_components/apr-bar/apr-bar-shared.tsx

@@ -3,9 +3,9 @@
 import { formatToken } from "@torus-network/torus-utils/torus/token";
 import { useCachedStakeOut } from "@torus-ts/query-provider/hooks";
 import { useTorus } from "@torus-ts/torus-provider";
+import { useAPR } from "@torus-ts/ui/components/apr";
 import { Card } from "@torus-ts/ui/components/card";
 import { env } from "~/env";
-import { useAPR } from "~/hooks/useAPR";
 import { DateTime } from "luxon";
 import { useEffect, useMemo, useState } from "react";
 import { StakingCalculatorAmountInput } from "./staking-calculator-amount-input";
@@ -30,8 +30,8 @@ export const FORECAST_MONTHS = 24;
 export const FORECAST_PERIODS = [3, 6, 12, 24];
 
 function StakingCalculator() {
-  const { selectedAccount } = useTorus();
-  const { apr } = useAPR();
+  const { api, selectedAccount } = useTorus();
+  const { apr } = useAPR(api);
   const stakeOut = useCachedStakeOut(env("NEXT_PUBLIC_TORUS_CACHE_URL"));
   const projectedApr = apr ?? 24;
   const [customAmount, setCustomAmount] = useState("");