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 {