chore: add order label to the historical transaction list (#99)

* feat: add order label to the historical transaction table

Author: negar-abbasi

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>
+  )
 }

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>
+  )
 }

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>
+  )
 }

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>
+  )
+}

src/index.css

@@ -154,6 +154,6 @@
   }
 
   small {
-    @apply text-sm font-medium leading-none;
+    @apply text-sm text-muted-foreground leading-none;
   }
 }