feat: dynamically display estimated APR by delegate hotkey

TalismanSociety · Sep 28, 2024 · 09bcc48 · 09bcc48
1 parent 65f6f59
commit 09bcc48
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 8 deletions.
diff --git a/apps/portal/src/components/widgets/staking/subtensor/StakeSideSheet.tsx b/apps/portal/src/components/widgets/staking/subtensor/StakeSideSheet.tsx
@@ -6,7 +6,8 @@ import {
   type ChainInfo,
 } from '../../../../domains/chains'
 import { DEFAULT_DELEGATE, MIN_SUBTENSOR_STAKE } from '../../../../domains/staking/subtensor/atoms/delegates'
-import { useHighestAprFormatted } from '../../../../domains/staking/subtensor/hooks/useApr'
+import { Delegate } from '../../../../domains/staking/subtensor/atoms/delegates'
+import { useDelegateAprFormatted } from '../../../../domains/staking/subtensor/hooks/useApr'
 import { useDelegates } from '../../../../domains/staking/subtensor/hooks/useDelegates'
 import { useTotalTaoStakedFormatted } from '../../../../domains/staking/subtensor/hooks/useTotalTaoStakedFormatted'
 import { Maybe } from '../../../../util/monads'
@@ -27,18 +28,22 @@ type StakeSideSheetProps = {
   onRequestDismiss: () => unknown
 }
 
-const StakeSideSheetContent = (props: Omit<StakeSideSheetProps, 'onRequestDismiss'>) => {
+type StakeSideSheetContentProps = Omit<StakeSideSheetProps, 'onRequestDismiss'> & {
+  delegate: Delegate | undefined
+  setDelegate: React.Dispatch<React.SetStateAction<Delegate | undefined>>
+}
+
+const StakeSideSheetContent = (props: StakeSideSheetContentProps) => {
   const [searchParams] = useSearchParams()
 
   const chain = useRecoilValue(useChainState())
-  const delegates = useDelegates()
   const [[account], accountSelector] = useAccountSelector(
     useRecoilValue(writeableSubstrateAccountsState),
     searchParams.get('account') === null
       ? 0
       : accounts => accounts?.find(x => x.address === searchParams.get('account'))
   )
-  const [delegate, setDelegate] = useState(delegates[DEFAULT_DELEGATE] ?? Object.values(delegates)[0])
+  const { delegate, setDelegate } = props
 
   const [delegateSelectorOpen, setDelegateSelectorOpen] = useState(false)
   const [delegateSelectorInTransition, startDelegateSelectorTransition] = useTransition()
@@ -100,10 +105,12 @@ const StakeSideSheetContent = (props: Omit<StakeSideSheetProps, 'onRequestDismis
 }
 
 const StakeSideSheetForChain = (props: StakeSideSheetProps) => {
+  const delegates = useDelegates()
+  const [delegate, setDelegate] = useState(delegates[DEFAULT_DELEGATE] ?? Object.values(delegates)[0])
   const { nativeToken } = useRecoilValue(useChainState())
 
   const totalStaked = useTotalTaoStakedFormatted()
-  const rewards = useHighestAprFormatted()
+  const delegateApr = useDelegateAprFormatted(delegate?.address ?? DEFAULT_DELEGATE)
 
   return (
     <SubtensorStakingSideSheet
@@ -115,9 +122,9 @@ const StakeSideSheetForChain = (props: StakeSideSheetProps) => {
             title: 'Total Staked',
             content: <>{totalStaked}</>,
           },
-          { title: 'Estimated APR', content: <>{rewards}</> },
+          { title: 'Estimated APR', content: <>{delegateApr}</> },
         ],
-        [rewards, totalStaked]
+        [delegateApr, totalStaked]
       )}
       minimumStake={
         <>
@@ -143,7 +150,7 @@ const StakeSideSheetForChain = (props: StakeSideSheetProps) => {
             </div>
           }
         >
-          <StakeSideSheetContent {...props} />
+          <StakeSideSheetContent {...props} delegate={delegate!} setDelegate={setDelegate} />
         </Suspense>
       </ErrorBoundary>
     </SubtensorStakingSideSheet>

diff --git a/apps/portal/src/domains/staking/subtensor/hooks/useApr.ts b/apps/portal/src/domains/staking/subtensor/hooks/useApr.ts
@@ -12,3 +12,8 @@ export const useDelegateApr = (hotkey: string) => {
   const delegate = useDelegateStats(hotkey)
   return Number(delegate?.apr)
 }
+
+export const useDelegateAprFormatted = (hotkey: string) => {
+  const apr = useDelegateApr(hotkey)
+  return apr.toLocaleString(undefined, { style: 'percent', maximumFractionDigits: 2 })
+}