Update card

dapp/src/hooks/usePositionStats.ts

@@ -1,32 +1,32 @@
-import { useAcreContext } from "#/acre-react/hooks"
-import { queryKeysFactory } from "#/constants"
-import { useQuery } from "@tanstack/react-query"
+import { useMemo } from "react"
+import useActivities from "./useActivities"
+import useBitcoinPosition from "./useBitcoinPosition"
 
 export default function usePositionStats() {
-  const { acre, isInitialized, isConnected } = useAcreContext()
+  const { data, isLoading } = useActivities()
+  const { data: position, isLoading: isLoadingBitcoinPosition } =
+    useBitcoinPosition()
 
-  return useQuery({
-    queryKey: [...queryKeysFactory.userKeys.positionStats()],
-    queryFn: async () => {
-      if (!acre) throw new Error("Acre SDK not available")
+  const positionStats = useMemo(() => {
+    if (!data || !position) return undefined
 
-      const currentBalance = await acre.account.estimatedBitcoinBalance()
-      const withdrawals = await acre.account.getWithdrawals()
-      const deposits = await acre.account.getDeposits()
+    const currentBalance = position.estimatedBitcoinBalance
+    const withdrawals = data.filter((activity) => activity.type === "withdraw")
+    const deposits = data.filter((activity) => activity.type === "deposit")
 
-      const sumOfWithdrawals = withdrawals.reduce(
-        (sum, withdrawal) => sum + withdrawal.amount,
-        0n,
-      )
-      const sumOfDeposits = deposits.reduce(
-        (sum, deposit) => sum + deposit.amount,
-        0n,
-      )
+    const sumOfWithdrawals = withdrawals.reduce(
+      (sum, withdrawal) => sum + withdrawal.amount,
+      0n,
+    )
+    const sumOfDeposits = deposits.reduce(
+      (sum, deposit) => sum + deposit.amount,
+      0n,
+    )
 
-      const earned = currentBalance + sumOfWithdrawals - sumOfDeposits
+    const earned = currentBalance + sumOfWithdrawals - sumOfDeposits
 
-      return { deposited: currentBalance, earned: earned < 0n ? 0n : earned }
-    },
-    enabled: isInitialized && isConnected && !!acre,
-  })
+    return { deposited: sumOfDeposits, earned: earned < 0n ? 0n : earned }
+  }, [data, position])
+
+  return { data: positionStats, isLoading, isLoadingBitcoinPosition }
 }

dapp/src/pages/DashboardPage/BTCDepositedCard.tsx

@@ -13,7 +13,7 @@ function BTCDepositedCard(props: BTCDepositedCardProps) {
   return (
     <BitcoinAmountFeaturedMetricsCard
       icon={IconCurrencyBitcoin}
-      label="Current Balance"
+      label="BTC Deposited"
       {...props}
     />
   )

dapp/src/pages/DashboardPage/PositionDetails.tsx

@@ -23,7 +23,7 @@ import { featureFlags } from "#/constants"
 import { IconClockHour5Filled } from "@tabler/icons-react"
 import TooltipIcon from "#/components/shared/TooltipIcon"
 import { activitiesUtils } from "#/utils"
-import CurrencyBalance from "#/components/shared/CurrencyBalance"
+import CurrencyBalanceWithConversion from "#/components/shared/CurrencyBalanceWithConversion"
 import AcreTVLMessage from "./AcreTVLMessage"
 
 const isWithdrawalFlowEnabled = featureFlags.WITHDRAWALS_ENABLED
@@ -40,7 +40,7 @@ const buttonStyles: ButtonProps = {
 
 export default function PositionDetails() {
   const { data: bitcoinPosition } = useBitcoinPosition()
-  const shares = bitcoinPosition?.sharesBalance ?? 0n
+  const bitcoinAmount = bitcoinPosition?.estimatedBitcoinBalance ?? 0n
 
   const openDepositModal = useTransactionModal(ACTION_FLOW_TYPES.STAKE)
   const openWithdrawModal = useTransactionModal(ACTION_FLOW_TYPES.UNSTAKE)
@@ -62,7 +62,7 @@ export default function PositionDetails() {
       <VStack alignItems="start" spacing={0}>
         {/* TODO: Component should be moved to `CardHeader` */}
         <HStack>
-          <Text size="md">Your Acre balance</Text>
+          <Text size="md">Account Summary</Text>
           {activitiesUtils.hasPendingDeposits(activities ?? []) && (
             <TooltipIcon
               icon={IconClockHour5Filled}
@@ -73,12 +73,19 @@ export default function PositionDetails() {
         </HStack>
         <UserDataSkeleton>
           <VStack alignItems="start" spacing={0}>
-            <CurrencyBalance
-              amount={shares}
-              currency="acrebtc"
-              size="4xl"
-              letterSpacing="-0.075rem" // -1.2px
-              color="text.primary"
+            <CurrencyBalanceWithConversion
+              from={{
+                amount: bitcoinAmount,
+                currency: "bitcoin",
+                size: "4xl",
+                letterSpacing: "-0.075rem", // -1.2px
+                color: "text.primary",
+              }}
+              to={{
+                currency: "usd",
+                color: "text.tertiary",
+                fontWeight: "medium",
+              }}
             />
           </VStack>
         </UserDataSkeleton>