Get data from hook

Added timestamp and id to query.
Refactored transation link button.

dapp/src/pages/DashboardPage/DashboardCard.tsx

@@ -17,6 +17,7 @@ import { BoostArrowIcon } from "#/assets/icons"
 import { CurrencyBalanceWithConversion } from "#/components/shared/CurrencyBalanceWithConversion"
 import { AmountType, MODAL_TYPES } from "#/types"
 import { useModal } from "#/hooks"
+import TransactionHistory from "./TransactionHistory"
 
 const buttonStyles: ButtonProps = {
   size: "lg",
@@ -96,6 +97,8 @@ export default function DashboardCard(props: DashboardCardProps) {
             Withdraw
           </Button>
         </HStack>
+
+        <TransactionHistory />
       </CardBody>
     </Card>
   )

dapp/src/pages/DashboardPage/TransactionHistory.tsx

@@ -5,10 +5,9 @@ import {
   VStack,
   Card,
   CardBody,
-  IconButton,
-  Link,
   Box,
   Image,
+  VisuallyHidden,
 } from "@chakra-ui/react"
 import {
   Pagination,
@@ -22,6 +21,9 @@ import emptyStateIlustration from "#/assets/images/empty-state.png"
 import { ArrowUpRightAnimatedIcon } from "#/assets/icons/animated"
 import { motion } from "framer-motion"
 import { displayBlockTimestamp, truncateAddress } from "#/utils"
+import { useActivitiesNEW as useActivities } from "#/hooks"
+import { Activity } from "#/types"
+import BlockExplorerLink from "#/components/shared/BlockExplorerLink"
 
 type TransactionHistoryData = {
   date: number
@@ -36,37 +38,41 @@ type TransactionHistoryProps = StackProps & {
 }
 
 export default function TransactionHistory(props: TransactionHistoryProps) {
-  const { data = [], ...restProps } = props
+  const activities = useActivities()
+
+  const completedActivities = React.useMemo(
+    () => activities.filter(({ status }) => status === "completed"),
+    [activities],
+  )
 
   return (
-    <VStack spacing={6} w="full" {...restProps}>
+    <VStack spacing={6} w="full" {...props}>
       <TextMd fontWeight="bold" w="full">
         Transactions
       </TextMd>
 
-      {data.length === 0 ? (
+      {completedActivities.length === 0 ? (
         <VStack>
           <Image src={emptyStateIlustration} alt="" opacity={0.3} />
           <TextMd color="grey.400">You have no transactions yet!</TextMd>
         </VStack>
       ) : (
-        <Pagination data={data} pageSize={10}>
+        <Pagination data={completedActivities} pageSize={10}>
           <PaginationPage direction="column" spacing={2} pageSpacing={6}>
-            {(pageData: TransactionHistoryData) =>
-              // TODO: Fix type assertion of `pageData`
-              pageData.map(({ date, type, amount, address, url }) => (
+            {(pageData: Activity[]) =>
+              pageData.map(({ id, timestamp, type, txHash, amount }) => (
                 <Card
                   as={motion.div}
                   initial={false}
                   whileHover="animate"
-                  key={url}
+                  key={id}
                   role="group"
                   variant="elevated"
                   colorScheme="gold"
                 >
                   <CardBody as={HStack} spacing={0} p={4}>
                     <TextSm color="grey.500" flex={1}>
-                      {displayBlockTimestamp(date)}
+                      {displayBlockTimestamp(timestamp)}
                     </TextSm>
 
                     <HStack flexBasis="72%" spacing={0}>
@@ -82,22 +88,24 @@ export default function TransactionHistory(props: TransactionHistoryProps) {
                         />
                       </Box>
                       <TextSm color="grey.500" flexBasis="50%">
-                        {truncateAddress(address)}
+                        {truncateAddress(txHash)}
                       </TextSm>
                     </HStack>
 
-                    <IconButton
-                      as={Link}
-                      icon={<ArrowUpRightAnimatedIcon top={1} />}
-                      aria-label="View transaction details"
-                      href={url}
+                    <BlockExplorerLink
+                      id={txHash}
+                      chain="bitcoin"
+                      type="transaction"
                       variant="ghost"
                       color="grey.300"
                       _groupHover={{ color: "brand.400" }}
                       pl={6}
                       pr={4}
                       m={-4}
-                    />
+                    >
+                      <ArrowUpRightAnimatedIcon />
+                      <VisuallyHidden>View transaction details</VisuallyHidden>
+                    </BlockExplorerLink>
                   </CardBody>
                 </Card>
               ))

dapp/src/types/activity.ts

@@ -14,6 +14,8 @@ export type ActivityInfo = {
 }
 
 export type Activity = {
+  id: string
+  timestamp: number
   txHash: string
   amount: bigint
   type: "deposit" | "withdraw"

dapp/src/types/subgraphAPI.ts

@@ -2,5 +2,5 @@ export type ActivityDataResponse = {
   id: string
   bitcoinTransactionId: string
   amountToDeposit: string
-  events: { type: "Initialized" | "Finalized" }[]
+  events: { timestamp: string; type: "Initialized" | "Finalized" }[]
 }

dapp/src/utils/subgraphAPI.ts

@@ -4,14 +4,23 @@ import { Activity, ActivityDataResponse } from "#/types"
 const ACRE_SUBGRAPH_URL = import.meta.env.VITE_ACRE_SUBGRAPH_URL
 
 const mapToActivity = (activityData: ActivityDataResponse): Activity => {
-  const { bitcoinTransactionId: txHash, amountToDeposit, events } = activityData
+  const {
+    id,
+    bitcoinTransactionId: txHash,
+    amountToDeposit,
+    events,
+  } = activityData
 
   const status = events.some(({ type }) => type === "Finalized")
     ? "completed"
     : "pending"
 
+  const timestamp = parseInt(events[0].timestamp, 10)
+
   return {
+    id,
     txHash,
+    timestamp,
     amount: BigInt(amountToDeposit),
     type: "deposit",
     status,
@@ -35,6 +44,7 @@ async function fetchActivityData(account: string): Promise<Activity[]> {
               id
               bitcoinTransactionId
               events {
+                timestamp
                 type
               }
               ... on Deposit {