Merge pull request #940 from hemilabs/add-prices-your-stake

Add usd value on 'Your Stake' card

webapp/app/[locale]/stake/dashboard/_components/stakePointsCards/index.tsx

@@ -1,7 +1,14 @@
+import Big from 'big.js'
 import { Card } from 'components/card'
+import { useTokenPrices } from 'hooks/useTokenPrices'
 import Image, { StaticImageData } from 'next/image'
 import { useTranslations } from 'next-intl'
 import { ReactNode } from 'react'
+import { formatFiatNumber } from 'utils/format'
+import { getTokenPrice } from 'utils/token'
+import { formatUnits } from 'viem'
+
+import { useStakePositions } from '../../../_hooks/useStakedBalance'
 
 import communityIcon from './icons/community.svg'
 import stakeIcon from './icons/stake.svg'
@@ -86,14 +93,34 @@ export const TotalStaked = function () {
 }
 
 export const YourStake = function () {
+  const { data: prices, isPending: loadingPrices } = useTokenPrices()
+  const { loading: loadingPosition, tokensWithPosition } = useStakePositions()
   const t = useTranslations('stake-page.dashboard')
-  // TODO TBD how to load this data https://github.com/hemilabs/ui-monorepo/issues/750
-  const points = '$ 962.163'
+
+  const getPosition = function () {
+    if (prices === undefined) {
+      // if Prices API is missing, return "-"
+      return '-'
+    }
+    const userPosition = tokensWithPosition.reduce(
+      (acc, staked) =>
+        acc.plus(
+          Big(formatUnits(staked.balance, staked.decimals)).times(
+            getTokenPrice(staked, prices),
+          ),
+        ),
+      Big(0),
+    )
+    return formatFiatNumber(userPosition.toFixed())
+  }
+
   return (
     <Container>
       <div className="flex flex-shrink-0 flex-col gap-y-3 p-6">
         <Heading heading={t('your-stake')} />
-        <Points points={points} />
+        <Points
+          points={loadingPosition || loadingPrices ? '...' : getPosition()}
+        />
       </div>
       <Image
         alt="Stake icon"

webapp/components/fiatBalance.tsx

@@ -8,7 +8,7 @@ import Skeleton from 'react-loading-skeleton'
 import { type BtcToken, type EvmToken, type Token } from 'types/token'
 import { formatFiatNumber } from 'utils/format'
 import { isNativeToken } from 'utils/nativeToken'
-import { isEvmToken } from 'utils/token'
+import { getTokenPrice, isEvmToken } from 'utils/token'
 import { formatUnits } from 'viem'
 
 import { ErrorBoundary } from './errorBoundary'
@@ -37,10 +37,7 @@ const RenderFiatBalanceUnsafe = function ({
 
   const stringBalance = formatUnits(balance, token.decimals)
 
-  const priceSymbol = (
-    token.extensions?.priceSymbol ?? token.symbol
-  ).toUpperCase()
-  const price = data?.[priceSymbol] ?? '0'
+  const price = getTokenPrice(token, data)
 
   const mergedFetchStatuses = function () {
     const fetchStatuses = [fetchStatus, tokenPricesFetchStatus]

webapp/test/utils/token.test.ts

@@ -1,4 +1,5 @@
 import {
+  getTokenPrice,
   isStakeToken,
   isTunnelToken,
   isEvmToken,
@@ -7,6 +8,20 @@ import {
 import { describe, expect, it } from 'vitest'
 
 describe('utils/token', function () {
+  describe('getTokenPrice', function () {
+    it('should return the price based in the token symbol', function () {
+      const token = { symbol: 'usdt' }
+      const prices = { USDT: '0.99' }
+      expect(getTokenPrice(token, prices)).toBe('0.99')
+    })
+
+    it('should return the price based in the token priceSymbol if defined', function () {
+      const token = { extensions: { priceSymbol: 'usdt' }, symbol: 'usdt.e' }
+      const prices = { USDT: '0.99' }
+      expect(getTokenPrice(token, prices)).toBe('0.99')
+    })
+  })
+
   describe('isEvmToken', function () {
     it('should return true if token is an EVM token', function () {
       const token = {

webapp/utils/token.ts

@@ -95,3 +95,14 @@ export const isTunnelToken = (token: Token) => token.extensions?.tunnel === true
 
 export const tunnelsThroughPartner = (token: Token) =>
   token.extensions?.tunnelPartner !== undefined
+
+export const getTokenPrice = function (
+  token: Token,
+  prices: Record<string, string>,
+) {
+  const priceSymbol = (
+    token.extensions?.priceSymbol ?? token.symbol
+  ).toUpperCase()
+  const price = prices?.[priceSymbol] ?? '0'
+  return price
+}