Passing shares balance to liquid popover

dapp/src/components/LiquidStakingTokenPopover.tsx

@@ -10,7 +10,7 @@ import {
   IconButton,
 } from "@chakra-ui/react"
 import { SizeType } from "#/types"
-import { useDocsDrawer, useWalletContext } from "#/hooks"
+import { useDocsDrawer, useSharesBalance, useWalletContext } from "#/hooks"
 import { TextMd, TextSm } from "./shared/Typography"
 import Alert from "./shared/Alert"
 import { CurrencyBalance } from "./shared/CurrencyBalance"
@@ -23,6 +23,7 @@ export function LiquidStakingTokenPopover({
 }: LiquidStakingTokenPopoverProps) {
   const { isConnected } = useWalletContext()
   const { onOpen: openDocsDrawer } = useDocsDrawer()
+  const sharesBalance = useSharesBalance()
 
   return (
     <Popover variant="no-transform" {...props}>
@@ -50,7 +51,7 @@ export function LiquidStakingTokenPopover({
         <PopoverBody p={0}>
           <TextMd fontWeight="bold">Liquid staking token</TextMd>
           <CurrencyBalance
-            amount="912312331"
+            amount={sharesBalance.toString()}
             variant="greater-balance-xl"
             currency="stbtc"
           />

dapp/src/hooks/store/index.ts

@@ -1,3 +1,4 @@
 export * from "./useAppDispatch"
 export * from "./useAppSelector"
 export * from "./useEstimatedBTCBalance"
+export * from "./useSharesBalance"

dapp/src/hooks/store/useSharesBalance.ts

@@ -0,0 +1,6 @@
+import { selectSharesBalance } from "#/store/btc"
+import { useAppSelector } from "./useAppSelector"
+
+export function useSharesBalance() {
+  return useAppSelector(selectSharesBalance)
+}