diff --git a/apps/staking/src/components/Header/current-stake-account.tsx b/apps/staking/src/components/Header/current-stake-account.tsx index 553be7578a..a003ad0e71 100644 --- a/apps/staking/src/components/Header/current-stake-account.tsx +++ b/apps/staking/src/components/Header/current-stake-account.tsx @@ -20,7 +20,7 @@ export const CurrentStakeAccount = ({ return api.type === ApiStateType.Loaded && !isBlocked ? (
{ return ( <> - diff --git a/apps/staking/src/components/Header/index.tsx b/apps/staking/src/components/Header/index.tsx index 7772af7273..f04896dc40 100644 --- a/apps/staking/src/components/Header/index.tsx +++ b/apps/staking/src/components/Header/index.tsx @@ -5,6 +5,7 @@ import { CurrentStakeAccount } from "./current-stake-account"; import { HelpMenu } from "./help-menu"; import Logo from "./logo.svg"; import Logomark from "./logomark.svg"; +import { Stats } from "./stats"; import { Link } from "../Link"; import { MaxWidth } from "../MaxWidth"; import { WalletButton } from "../WalletButton"; @@ -13,22 +14,31 @@ export const Header = ({ className, ...props }: Omit, "children">) => ( -
-
- - - - - -
- - - -
-
-
-
+ <> +
+
+ +
+ + + + + +
+
+ + + +
+
+
+
+ + ); diff --git a/apps/staking/src/components/Header/program-pramaeters.tsx b/apps/staking/src/components/Header/program-parameters.tsx similarity index 100% rename from apps/staking/src/components/Header/program-pramaeters.tsx rename to apps/staking/src/components/Header/program-parameters.tsx diff --git a/apps/staking/src/components/Header/stats.tsx b/apps/staking/src/components/Header/stats.tsx new file mode 100644 index 0000000000..b075657c64 --- /dev/null +++ b/apps/staking/src/components/Header/stats.tsx @@ -0,0 +1,85 @@ +"use client"; + +import { PythStakingClient } from "@pythnetwork/staking-sdk"; +import { useConnection } from "@solana/wallet-adapter-react"; +import { Connection } from "@solana/web3.js"; +import clsx from "clsx"; +import type { HTMLProps } from "react"; + +import { StateType, useData } from "../../hooks/use-data"; +import { Tokens } from "../Tokens"; + +const ONE_SECOND_IN_MS = 1000; +const ONE_MINUTE_IN_MS = 60 * ONE_SECOND_IN_MS; +const REFRESH_INTERVAL = 1 * ONE_MINUTE_IN_MS; +const INITIAL_REWARD_POOL_SIZE = 60_000_000_000_000n; + +export const Stats = ({ className, ...props }: HTMLProps) => { + const { connection } = useConnection(); + const state = useData("poolStats", () => fetchStats(connection), { + refreshInterval: REFRESH_INTERVAL, + }); + + return ( +
+
+ {state.type === StateType.Loaded ? ( + + {state.data.totalStaked} + + ) : ( + + )} +
+ OIS Total Staked +
+
+
+
+ {state.type === StateType.Loaded ? ( + + {state.data.rewardsDistributed} + + ) : ( + + )} +
+ OIS Rewards Distributed +
+
+
+ ); +}; + +const Loading = () => ( +
+); + +const fetchStats = async (connection: Connection) => { + const client = new PythStakingClient({ connection }); + const poolData = await client.getPoolDataAccount(); + const rewardCustodyAccount = await client.getRewardCustodyAccount(); + const totalDelegated = sum( + poolData.delState.map( + ({ totalDelegation, deltaDelegation }) => + totalDelegation + deltaDelegation, + ), + ); + const totalSelfStaked = sum( + poolData.selfDelState.map( + ({ totalDelegation, deltaDelegation }) => + totalDelegation + deltaDelegation, + ), + ); + + return { + totalStaked: totalDelegated + totalSelfStaked, + rewardsDistributed: + poolData.claimableRewards + + INITIAL_REWARD_POOL_SIZE - + rewardCustodyAccount.amount, + }; +}; + +const sum = (values: bigint[]): bigint => + values.reduce((acc, value) => acc + value, 0n); diff --git a/apps/staking/src/components/Tokens/index.tsx b/apps/staking/src/components/Tokens/index.tsx index e25f5c7fdb..6c7d5e046c 100644 --- a/apps/staking/src/components/Tokens/index.tsx +++ b/apps/staking/src/components/Tokens/index.tsx @@ -1,3 +1,5 @@ +"use client"; + import clsx from "clsx"; import * as dnum from "dnum"; import { type ComponentProps, useMemo } from "react"; diff --git a/apps/staking/src/components/WalletButton/index.tsx b/apps/staking/src/components/WalletButton/index.tsx index 8c48370630..f84b7a15d4 100644 --- a/apps/staking/src/components/WalletButton/index.tsx +++ b/apps/staking/src/components/WalletButton/index.tsx @@ -295,7 +295,8 @@ const ButtonComponent = ({ ...props }: ButtonComponentProps) => (