From 6d44abfdd71da6dafdd289b3c7d3bd2218151d5b Mon Sep 17 00:00:00 2001
From: Negar <negar.abbasi@makerx.com.au>
Date: Mon, 17 Jun 2024 15:49:51 +1000
Subject: [PATCH] chore: add order label to the historical transaction list
 (#99)

* feat: add order label to the historical transaction table
---
 .../components/account-transaction-history.tsx         |  8 +++++++-
 .../components/application-transaction-history.tsx     |  8 +++++++-
 .../assets/components/asset-transaction-history.tsx    |  8 +++++++-
 src/features/common/components/listing-order-label.tsx | 10 ++++++++++
 src/index.css                                          |  2 +-
 5 files changed, 32 insertions(+), 4 deletions(-)
 create mode 100644 src/features/common/components/listing-order-label.tsx

diff --git a/src/features/accounts/components/account-transaction-history.tsx b/src/features/accounts/components/account-transaction-history.tsx
index b3b5d8281..f411b1bb2 100644
--- a/src/features/accounts/components/account-transaction-history.tsx
+++ b/src/features/accounts/components/account-transaction-history.tsx
@@ -5,6 +5,7 @@ import { useCallback, useMemo } from 'react'
 import { getAccountTransactionsTableSubRows } from '../utils/get-account-transactions-table-sub-rows'
 import { InnerTransaction, Transaction } from '@/features/transactions/models'
 import { transactionsTableColumns } from '@/features/transactions/components/transactions-table-columns'
+import { ListingOrderLabel } from '@/features/common/components/listing-order-label'
 
 type Props = {
   address: Address
@@ -14,5 +15,10 @@ export function AccountTransactionHistory({ address }: Props) {
   const createLoadablePage = useMemo(() => createLoadableAccountTransactionsPage(address), [address])
   const getSubRows = useCallback((row: Transaction | InnerTransaction) => getAccountTransactionsTableSubRows(address, row), [address])
 
-  return <LazyLoadDataTable columns={transactionsTableColumns} getSubRows={getSubRows} createLoadablePage={createLoadablePage} />
+  return (
+    <div>
+      <LazyLoadDataTable columns={transactionsTableColumns} getSubRows={getSubRows} createLoadablePage={createLoadablePage} />
+      <ListingOrderLabel oldestToNewest={false} />
+    </div>
+  )
 }
diff --git a/src/features/applications/components/application-transaction-history.tsx b/src/features/applications/components/application-transaction-history.tsx
index 3d21b740b..a55d6e95d 100644
--- a/src/features/applications/components/application-transaction-history.tsx
+++ b/src/features/applications/components/application-transaction-history.tsx
@@ -5,6 +5,7 @@ import { InnerTransaction, Transaction } from '@/features/transactions/models'
 import { useCallback, useMemo } from 'react'
 import { getApplicationTransactionsTableSubRows } from '../utils/get-application-transactions-table-sub-rows'
 import { transactionsTableColumns } from '@/features/transactions/components/transactions-table-columns'
+import { ListingOrderLabel } from '@/features/common/components/listing-order-label'
 
 type Props = {
   applicationId: ApplicationId
@@ -23,5 +24,10 @@ export function ApplicationTransactionHistory({ applicationId }: Props) {
     [applicationId]
   )
 
-  return <LazyLoadDataTable columns={transactionsTableColumns} getSubRows={getSubRows} createLoadablePage={createLoadablePage} />
+  return (
+    <div>
+      <LazyLoadDataTable columns={transactionsTableColumns} getSubRows={getSubRows} createLoadablePage={createLoadablePage} />
+      <ListingOrderLabel />
+    </div>
+  )
 }
diff --git a/src/features/assets/components/asset-transaction-history.tsx b/src/features/assets/components/asset-transaction-history.tsx
index ac2d18b39..74dc8d7b1 100644
--- a/src/features/assets/components/asset-transaction-history.tsx
+++ b/src/features/assets/components/asset-transaction-history.tsx
@@ -5,6 +5,7 @@ import { Transaction, InnerTransaction } from '@/features/transactions/models'
 import { useCallback, useMemo } from 'react'
 import { getAssetTransactionsTableSubRows } from '../utils/get-asset-transactions-table-sub-rows'
 import { transactionsTableColumns } from '@/features/transactions/components/transactions-table-columns'
+import { ListingOrderLabel } from '@/features/common/components/listing-order-label'
 
 type Props = {
   assetId: AssetId
@@ -14,5 +15,10 @@ export function AssetTransactionHistory({ assetId }: Props) {
   const createLoadablePage = useMemo(() => createLoadableAssetTransactionsPage(assetId), [assetId])
   const getSubRows = useCallback((row: Transaction | InnerTransaction) => getAssetTransactionsTableSubRows(assetId, row), [assetId])
 
-  return <LazyLoadDataTable columns={transactionsTableColumns} getSubRows={getSubRows} createLoadablePage={createLoadablePage} />
+  return (
+    <div>
+      <LazyLoadDataTable columns={transactionsTableColumns} getSubRows={getSubRows} createLoadablePage={createLoadablePage} />
+      <ListingOrderLabel />
+    </div>
+  )
 }
diff --git a/src/features/common/components/listing-order-label.tsx b/src/features/common/components/listing-order-label.tsx
new file mode 100644
index 000000000..891222b0a
--- /dev/null
+++ b/src/features/common/components/listing-order-label.tsx
@@ -0,0 +1,10 @@
+type Props = {
+  oldestToNewest?: boolean
+}
+export function ListingOrderLabel({ oldestToNewest = true }: Props) {
+  return (
+    <div className="mt-3">
+      <small>Note: This listing is {oldestToNewest ? 'oldest to newest' : 'newest to oldest'}.</small>
+    </div>
+  )
+}
diff --git a/src/index.css b/src/index.css
index b3333d32d..cd7f5561f 100644
--- a/src/index.css
+++ b/src/index.css
@@ -154,6 +154,6 @@
   }
 
   small {
-    @apply text-sm font-medium leading-none;
+    @apply text-sm text-muted-foreground leading-none;
   }
 }