diff --git a/dapp/src/pages/DashboardPage/DashboardCard.tsx b/dapp/src/pages/DashboardPage/DashboardCard.tsx
index d1511dfba..f33356180 100644
--- a/dapp/src/pages/DashboardPage/DashboardCard.tsx
+++ b/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
+
+
)
diff --git a/dapp/src/pages/DashboardPage/TransactionHistory.tsx b/dapp/src/pages/DashboardPage/TransactionHistory.tsx
index 89b66148c..1057f30e7 100644
--- a/dapp/src/pages/DashboardPage/TransactionHistory.tsx
+++ b/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 (
-
+
Transactions
- {data.length === 0 ? (
+ {completedActivities.length === 0 ? (
You have no transactions yet!
) : (
-
+
- {(pageData: TransactionHistoryData) =>
- // TODO: Fix type assertion of `pageData`
- pageData.map(({ date, type, amount, address, url }) => (
+ {(pageData: Activity[]) =>
+ pageData.map(({ id, timestamp, type, txHash, amount }) => (
- {displayBlockTimestamp(date)}
+ {displayBlockTimestamp(timestamp)}
@@ -82,22 +88,24 @@ export default function TransactionHistory(props: TransactionHistoryProps) {
/>
- {truncateAddress(address)}
+ {truncateAddress(txHash)}
- }
- aria-label="View transaction details"
- href={url}
+
+ >
+
+ View transaction details
+
))
diff --git a/dapp/src/types/activity.ts b/dapp/src/types/activity.ts
index 20899dacc..40b5455c0 100644
--- a/dapp/src/types/activity.ts
+++ b/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"
diff --git a/dapp/src/types/subgraphAPI.ts b/dapp/src/types/subgraphAPI.ts
index 508d879d3..7beb65517 100644
--- a/dapp/src/types/subgraphAPI.ts
+++ b/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" }[]
}
diff --git a/dapp/src/utils/subgraphAPI.ts b/dapp/src/utils/subgraphAPI.ts
index 3737b02e4..e16e1a77e 100644
--- a/dapp/src/utils/subgraphAPI.ts
+++ b/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 {
id
bitcoinTransactionId
events {
+ timestamp
type
}
... on Deposit {