From ff49963555e0141cfabfdd904268ab351abedf7d Mon Sep 17 00:00:00 2001
From: Tymmmy <117268143+Tymmmy@users.noreply.github.com>
Date: Wed, 11 Dec 2024 09:39:17 +0200
Subject: [PATCH 1/2] Add user name to transactions list and redesign list

---
 .../frontend/src/pages/transactions.tsx       | 194 ++++++++++++------
 packages/wallet/frontend/src/ui/Table.tsx     |   2 +-
 packages/wallet/frontend/src/utils/helpers.ts |  20 ++
 .../wallet/shared/src/types/transaction.ts    |   1 +
 4 files changed, 151 insertions(+), 66 deletions(-)

diff --git a/packages/wallet/frontend/src/pages/transactions.tsx b/packages/wallet/frontend/src/pages/transactions.tsx
index 9f88d427e..7d9c0eeb1 100644
--- a/packages/wallet/frontend/src/pages/transactions.tsx
+++ b/packages/wallet/frontend/src/pages/transactions.tsx
@@ -13,7 +13,11 @@ import {
 } from '@/lib/hooks/useTransactions'
 import { Table } from '@/ui/Table'
 import { Badge, getStatusBadgeIntent } from '@/ui/Badge'
-import { formatAmount, formatDate } from '@/utils/helpers'
+import {
+  formatAmount,
+  formatDateNoTime,
+  formatDateOnlyTime
+} from '@/utils/helpers'
 import { useRedirect } from '@/lib/hooks/useRedirect'
 import { Button } from '@/ui/Button'
 import { cx } from 'class-variance-authority'
@@ -26,6 +30,7 @@ import {
   TooltipProvider,
   TooltipTrigger
 } from '@/ui/Tooltip'
+import { Card } from '@/components/icons/CardButtons'
 
 type WalletAddressSelectOption = SelectOption & {
   accountId: string
@@ -124,6 +129,8 @@ const TransactionsPage: NextPageWithLayout<TransactionsPageProps> = ({
     </>
   )
 
+  let groupByDate = ''
+
   return (
     <div className="flex flex-col items-start justify-start space-y-5 lg:max-w-xl xl:max-w-5xl">
       <PageHeader title="Transactions" />
@@ -258,12 +265,11 @@ const TransactionsPage: NextPageWithLayout<TransactionsPageProps> = ({
         <Table id="transactionsList" className="min-w-[57rem]">
           <Table.Head
             columns={[
-              'Account',
-              'Payment pointer name',
-              'Description',
+              'Date',
+              'Details',
               'Amount',
               'Status',
-              'Date'
+              'Payment Pointer name'
             ]}
             sort={[
               {
@@ -281,66 +287,124 @@ const TransactionsPage: NextPageWithLayout<TransactionsPageProps> = ({
           />
           <Table.Body>
             {transactions.results.length ? (
-              transactions.results.map((trx) => (
-                <Table.Row key={trx.id}>
-                  <Table.Cell>{trx.accountName}</Table.Cell>
-                  <Table.Cell className="whitespace-nowrap">
-                    {trx.walletAddressUrl && trx.walletAddressPublicName ? (
-                      <TooltipProvider delayDuration={100}>
-                        <Tooltip>
-                          <TooltipTrigger>
-                            {trx.walletAddressPublicName}
-                          </TooltipTrigger>
-                          <TooltipContent
-                            className="max-w-80"
-                            side="top"
-                            onPointerDownOutside={(e) => e.preventDefault()}
-                          >
-                            {trx.walletAddressUrl}
-                          </TooltipContent>
-                        </Tooltip>
-                      </TooltipProvider>
-                    ) : (
-                      <>{trx.walletAddressUrl ?? ''}</>
-                    )}
-                  </Table.Cell>
-                  <Table.Cell className="whitespace-nowrap">
-                    {trx.description ? (
-                      trx.description
-                    ) : (
-                      <p className="text-sm font-thin">No description</p>
-                    )}
-                  </Table.Cell>
-                  <Table.Cell
-                    className={cx(
-                      'whitespace-nowrap',
-                      trx.type === 'INCOMING' &&
-                        'text-green-dark dark:text-green-neon',
-                      trx.type === 'OUTGOING' &&
-                        'text-pink-dark dark:text-yellow-neon'
-                    )}
-                  >
-                    {trx.type === 'INCOMING' ? '+' : '-'}
-                    {
-                      formatAmount({
-                        value: String(trx.value) || '0',
-                        assetCode: trx.assetCode,
-                        assetScale: trx.assetScale
-                      }).amount
-                    }
-                  </Table.Cell>
-                  <Table.Cell>
-                    <Badge
-                      intent={getStatusBadgeIntent(trx.status)}
-                      size="md"
-                      text={trx.status}
-                    />
-                  </Table.Cell>
-                  <Table.Cell className="whitespace-nowrap">
-                    {formatDate({ date: trx.createdAt.toString() })}
-                  </Table.Cell>
-                </Table.Row>
-              ))
+              transactions.results.map((trx) => {
+                let showDateHeader = false
+                if (
+                  groupByDate !==
+                  formatDateNoTime({ date: trx.createdAt.toString() })
+                ) {
+                  groupByDate = formatDateNoTime({
+                    date: trx.createdAt.toString()
+                  })
+                  showDateHeader = true
+                }
+
+                return (
+                  <>
+                    {showDateHeader ? (
+                      <Table.Row>
+                        <Table.Cell className="bg-green-dark dark:bg-pink-dark text-white text-center text-sm rounded-xl !p-1">
+                          {groupByDate}
+                        </Table.Cell>
+                        <Table.Cell className="!p-1">&nbsp;</Table.Cell>
+                        <Table.Cell className="!p-1">&nbsp;</Table.Cell>
+                        <Table.Cell className="!p-1">&nbsp;</Table.Cell>
+                        <Table.Cell className="!p-1">&nbsp;</Table.Cell>
+                      </Table.Row>
+                    ) : null}
+                    <Table.Row key={trx.id}>
+                      <Table.Cell className="whitespace-nowrap">
+                        at{' '}
+                        {formatDateOnlyTime({ date: trx.createdAt.toString() })}
+                      </Table.Cell>
+
+                      <Table.Cell className="whitespace-nowrap">
+                        <div className="flex flex-row items-center">
+                          {trx.isCard ? (
+                            <div className="text-dark-green dark:text-white pr-2">
+                              <Card />
+                            </div>
+                          ) : null}
+                          <div className="flex flex-col justify-start">
+                            {trx.secondParty ? (
+                              <span>{trx.secondParty}</span>
+                            ) : null}
+                            <span
+                              className={cx(trx.secondParty ? 'text-xs' : '')}
+                            >
+                              {trx.description ? (
+                                trx.description
+                              ) : (
+                                <p
+                                  className={cx(
+                                    'font-thin',
+                                    trx.secondParty ? 'text-xs' : 'text-sm'
+                                  )}
+                                >
+                                  No description
+                                </p>
+                              )}
+                            </span>
+                          </div>
+                        </div>
+                      </Table.Cell>
+                      <Table.Cell
+                        className={cx(
+                          'whitespace-nowrap',
+                          trx.type === 'INCOMING' &&
+                            'text-green-dark dark:text-green-neon',
+                          trx.type === 'OUTGOING' &&
+                            'text-pink-dark dark:text-yellow-neon'
+                        )}
+                      >
+                        {trx.type === 'INCOMING' ? '+' : '-'}
+                        {
+                          formatAmount({
+                            value: String(trx.value) || '0',
+                            assetCode: trx.assetCode,
+                            assetScale: trx.assetScale
+                          }).amount
+                        }
+                      </Table.Cell>
+                      <Table.Cell>
+                        <Badge
+                          intent={getStatusBadgeIntent(trx.status)}
+                          size="md"
+                          text={trx.status}
+                        />
+                      </Table.Cell>
+                      <Table.Cell className="whitespace-nowrap">
+                        <div className="flex flex-col justify-start">
+                          <span>
+                            {trx.walletAddressUrl &&
+                            trx.walletAddressPublicName ? (
+                              <TooltipProvider delayDuration={100}>
+                                <Tooltip>
+                                  <TooltipTrigger>
+                                    {trx.walletAddressPublicName}
+                                  </TooltipTrigger>
+                                  <TooltipContent
+                                    className="max-w-80"
+                                    side="top"
+                                    onPointerDownOutside={(e) =>
+                                      e.preventDefault()
+                                    }
+                                  >
+                                    {trx.walletAddressUrl}
+                                  </TooltipContent>
+                                </Tooltip>
+                              </TooltipProvider>
+                            ) : (
+                              <>{trx.walletAddressUrl ?? ''}</>
+                            )}
+                          </span>
+                          <span className="text-xs">{trx.accountName}</span>
+                        </div>
+                      </Table.Cell>
+                    </Table.Row>
+                  </>
+                )
+              })
             ) : (
               <Table.Row>
                 <Table.Cell colSpan={4} className="text-center">
diff --git a/packages/wallet/frontend/src/ui/Table.tsx b/packages/wallet/frontend/src/ui/Table.tsx
index 25cfbf4d3..ab80d771b 100644
--- a/packages/wallet/frontend/src/ui/Table.tsx
+++ b/packages/wallet/frontend/src/ui/Table.tsx
@@ -104,7 +104,7 @@ type TCellProps = ComponentProps<'td'> & {
 
 const TCell = ({ children, className, ...props }: TCellProps) => {
   return (
-    <td className={cx(className, 'p-4')} {...props}>
+    <td className={cx(className, 'p-3')} {...props}>
       {children}
     </td>
   )
diff --git a/packages/wallet/frontend/src/utils/helpers.ts b/packages/wallet/frontend/src/utils/helpers.ts
index c9afa425a..be609deaa 100644
--- a/packages/wallet/frontend/src/utils/helpers.ts
+++ b/packages/wallet/frontend/src/utils/helpers.ts
@@ -80,6 +80,26 @@ export const formatDate = ({
   })
 }
 
+export const formatDateNoTime = ({
+  date,
+  month = 'short'
+}: FormatDateArgs): string => {
+  return new Date(date).toLocaleDateString('default', {
+    day: '2-digit',
+    month,
+    year: 'numeric'
+  })
+}
+
+export const formatDateOnlyTime = ({
+  date,
+  time = true
+}: FormatDateArgs): string => {
+  return new Date(date).toLocaleTimeString('default', {
+    ...(time && { hour: '2-digit', minute: '2-digit' })
+  })
+}
+
 export const getFee = (quote: QuoteResponse): FormattedAmount => {
   if (quote.fee) {
     return formatAmount({
diff --git a/packages/wallet/shared/src/types/transaction.ts b/packages/wallet/shared/src/types/transaction.ts
index ae5b36eab..dc6edee2a 100644
--- a/packages/wallet/shared/src/types/transaction.ts
+++ b/packages/wallet/shared/src/types/transaction.ts
@@ -26,6 +26,7 @@ export interface TransactionResponse {
   secondParty?: string
   createdAt: Date
   updatedAt: Date
+  isCard?: boolean
 }
 interface TransactionListResponse extends TransactionResponse {
   assetScale: number

From f4d2062f9a7cf2f4846dd07e7fe7b6009c9cd21a Mon Sep 17 00:00:00 2001
From: Tymmmy <117268143+Tymmmy@users.noreply.github.com>
Date: Wed, 11 Dec 2024 16:32:22 +0200
Subject: [PATCH 2/2] redesign transactions

---
 .../wallet/frontend/src/components/Menu.tsx   |   2 +-
 .../dialogs/TransactionDetailsDialog.tsx      | 134 ++++++++++++++++++
 .../frontend/src/pages/transactions.tsx       |  36 +++--
 packages/wallet/frontend/src/ui/Table.tsx     |   4 +
 .../wallet/shared/src/types/transaction.ts    |   2 +-
 5 files changed, 168 insertions(+), 10 deletions(-)
 create mode 100644 packages/wallet/frontend/src/components/dialogs/TransactionDetailsDialog.tsx

diff --git a/packages/wallet/frontend/src/components/Menu.tsx b/packages/wallet/frontend/src/components/Menu.tsx
index 8a7e538eb..84de34f4b 100644
--- a/packages/wallet/frontend/src/components/Menu.tsx
+++ b/packages/wallet/frontend/src/components/Menu.tsx
@@ -206,7 +206,7 @@ export const Menu = () => {
               leaveFrom="translate-x-0"
               leaveTo="translate-x-full"
             >
-              <DialogPanel className="relative flex flex-col bg-white p-6 dark:bg-purple">
+              <DialogPanel className="relative flex flex-col bg-white px-6 pt-24 dark:bg-purple">
                 <button
                   className="mb-4 block cursor-pointer self-end border-none px-1"
                   type="button"
diff --git a/packages/wallet/frontend/src/components/dialogs/TransactionDetailsDialog.tsx b/packages/wallet/frontend/src/components/dialogs/TransactionDetailsDialog.tsx
new file mode 100644
index 000000000..7190a8def
--- /dev/null
+++ b/packages/wallet/frontend/src/components/dialogs/TransactionDetailsDialog.tsx
@@ -0,0 +1,134 @@
+import {
+  Dialog,
+  DialogPanel,
+  DialogTitle,
+  Transition,
+  TransitionChild
+} from '@headlessui/react'
+import { Fragment } from 'react'
+import type { DialogProps } from '@/lib/types/dialog'
+import { TransactionListResponse } from '@wallet/shared/src/types/transaction'
+import { formatAmount, formatDate, getCurrencySymbol } from '@/utils/helpers'
+import { cx } from 'class-variance-authority'
+import { Badge, getStatusBadgeIntent } from '@/ui/Badge'
+import { Card } from '../icons/CardButtons'
+import { FEATURES_ENABLED } from '@/utils/constants'
+
+type TransactionDetailsDialogProps = Pick<DialogProps, 'onClose'> & {
+  transaction: TransactionListResponse
+}
+
+export const TransactionDetailsDialog = ({
+  onClose,
+  transaction
+}: TransactionDetailsDialogProps) => {
+  return (
+    <Transition show={true} as={Fragment} appear={true}>
+      <Dialog as="div" className="relative z-10" onClose={onClose}>
+        <TransitionChild
+          as={Fragment}
+          leave="ease-in duration-200"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+        >
+          <div className="fixed inset-0 bg-green-modal/75 transition-opacity dark:bg-black/75" />
+        </TransitionChild>
+
+        <div className="fixed inset-0 z-10 overflow-y-auto">
+          <div className="flex min-h-full items-center justify-center p-4">
+            <TransitionChild
+              as={Fragment}
+              leave="ease-in duration-200"
+              leaveFrom="opacity-100 translate-y-0"
+              leaveTo="opacity-0 translate-y-4"
+            >
+              <DialogPanel className="relative w-full max-w-xl space-y-4 overflow-hidden rounded-lg bg-white p-4 sm:p-8 shadow-xl dark:bg-purple">
+                <DialogTitle as="h3" className="text-center text-2xl font-bold">
+                  <div className="flex flex-row justify-center items-center gap-x-4">
+                    Transaction Details
+                    {transaction.isCard && FEATURES_ENABLED ? (
+                      <div className="text-dark-green dark:text-white pr-2">
+                        <Card />
+                      </div>
+                    ) : null}
+                  </div>
+                </DialogTitle>
+                <div className="flex flex-col gap-y-2">
+                  <div>
+                    <span className="font-bold">Date: </span>
+                    <span>
+                      {formatDate({ date: transaction.createdAt.toString() })}
+                    </span>
+                  </div>
+                  {transaction.secondParty ? (
+                    <div>
+                      <span className="font-bold">
+                        {transaction.type === 'INCOMING'
+                          ? 'Sender: '
+                          : 'Receiver: '}
+                      </span>
+                      <span>{transaction.secondParty}</span>
+                    </div>
+                  ) : null}
+                  <div>
+                    <span className="font-bold">Amount: </span>
+                    <span
+                      className={cx(
+                        transaction.type === 'INCOMING' &&
+                          'text-green-dark dark:text-green-neon',
+                        transaction.type === 'OUTGOING' &&
+                          'text-pink-dark dark:text-yellow-neon'
+                      )}
+                    >
+                      {transaction.type === 'INCOMING' ? '+' : '-'}
+                      {
+                        formatAmount({
+                          value: String(transaction.value) || '0',
+                          assetCode: transaction.assetCode,
+                          assetScale: transaction.assetScale
+                        }).amount
+                      }
+                    </span>
+                  </div>
+                  {transaction.description ? (
+                    <div>
+                      <span className="font-bold">Description: </span>
+                      <span>{transaction.description}</span>
+                    </div>
+                  ) : null}
+                  <div>
+                    <span className="font-bold">
+                      Payment Pointer Public Name:{' '}
+                    </span>
+                    <span>{transaction.walletAddressPublicName}</span>
+                  </div>
+                  <div>
+                    <span className="font-bold">Payment Pointer URL: </span>
+                    <span>{transaction.walletAddressUrl}</span>
+                  </div>
+                  <div>
+                    <span className="font-bold">Account: </span>
+                    <span>
+                      {transaction.accountName} -{' '}
+                      {getCurrencySymbol(transaction.assetCode)}
+                    </span>
+                  </div>
+                  <div>
+                    <span className="font-bold">Status: </span>
+                    <span>
+                      <Badge
+                        intent={getStatusBadgeIntent(transaction.status)}
+                        size="md"
+                        text={transaction.status}
+                      />
+                    </span>
+                  </div>
+                </div>
+              </DialogPanel>
+            </TransitionChild>
+          </div>
+        </div>
+      </Dialog>
+    </Transition>
+  )
+}
diff --git a/packages/wallet/frontend/src/pages/transactions.tsx b/packages/wallet/frontend/src/pages/transactions.tsx
index 7d9c0eeb1..532069675 100644
--- a/packages/wallet/frontend/src/pages/transactions.tsx
+++ b/packages/wallet/frontend/src/pages/transactions.tsx
@@ -31,6 +31,9 @@ import {
   TooltipTrigger
 } from '@/ui/Tooltip'
 import { Card } from '@/components/icons/CardButtons'
+import { FEATURES_ENABLED } from '@/utils/constants'
+import { TransactionDetailsDialog } from '@/components/dialogs/TransactionDetailsDialog'
+import { useDialog } from '@/lib/hooks/useDialog'
 
 type WalletAddressSelectOption = SelectOption & {
   accountId: string
@@ -77,6 +80,8 @@ const TransactionsPage: NextPageWithLayout<TransactionsPageProps> = ({
   walletAddresses
 }) => {
   const { isUserFirstTime, stepIndex, setStepIndex } = useOnboardingContext()
+  const [openDialog, closeDialog] = useDialog()
+
   const redirect = useRedirect<TransactionsFilters>({
     path: '/transactions',
     persistQuery: true
@@ -262,7 +267,7 @@ const TransactionsPage: NextPageWithLayout<TransactionsPageProps> = ({
       ) : loading ? (
         <Table.Shimmer />
       ) : (
-        <Table id="transactionsList" className="min-w-[57rem]">
+        <Table id="transactionsList" className="sm:min-w-[57rem]">
           <Table.Head
             columns={[
               'Date',
@@ -284,6 +289,7 @@ const TransactionsPage: NextPageWithLayout<TransactionsPageProps> = ({
                 }
               }
             ]}
+            hideForMobile={['Status', 'Payment Pointer name']}
           />
           <Table.Body>
             {transactions.results.length ? (
@@ -308,19 +314,33 @@ const TransactionsPage: NextPageWithLayout<TransactionsPageProps> = ({
                         </Table.Cell>
                         <Table.Cell className="!p-1">&nbsp;</Table.Cell>
                         <Table.Cell className="!p-1">&nbsp;</Table.Cell>
-                        <Table.Cell className="!p-1">&nbsp;</Table.Cell>
-                        <Table.Cell className="!p-1">&nbsp;</Table.Cell>
+                        <Table.Cell className="!p-1 hidden sm:table-cell">
+                          &nbsp;
+                        </Table.Cell>
+                        <Table.Cell className="!p-1 hidden sm:table-cell">
+                          &nbsp;
+                        </Table.Cell>
                       </Table.Row>
                     ) : null}
-                    <Table.Row key={trx.id}>
+                    <Table.Row
+                      key={trx.id}
+                      className="cursor-pointer"
+                      onClick={() => {
+                        openDialog(
+                          <TransactionDetailsDialog
+                            transaction={trx}
+                            onClose={closeDialog}
+                          />
+                        )
+                      }}
+                    >
                       <Table.Cell className="whitespace-nowrap">
                         at{' '}
                         {formatDateOnlyTime({ date: trx.createdAt.toString() })}
                       </Table.Cell>
-
                       <Table.Cell className="whitespace-nowrap">
                         <div className="flex flex-row items-center">
-                          {trx.isCard ? (
+                          {trx.isCard && FEATURES_ENABLED ? (
                             <div className="text-dark-green dark:text-white pr-2">
                               <Card />
                             </div>
@@ -366,14 +386,14 @@ const TransactionsPage: NextPageWithLayout<TransactionsPageProps> = ({
                           }).amount
                         }
                       </Table.Cell>
-                      <Table.Cell>
+                      <Table.Cell className="hidden sm:table-cell">
                         <Badge
                           intent={getStatusBadgeIntent(trx.status)}
                           size="md"
                           text={trx.status}
                         />
                       </Table.Cell>
-                      <Table.Cell className="whitespace-nowrap">
+                      <Table.Cell className="whitespace-nowrap hidden sm:table-cell">
                         <div className="flex flex-col justify-start">
                           <span>
                             {trx.walletAddressUrl &&
diff --git a/packages/wallet/frontend/src/ui/Table.tsx b/packages/wallet/frontend/src/ui/Table.tsx
index ab80d771b..b8e0085a6 100644
--- a/packages/wallet/frontend/src/ui/Table.tsx
+++ b/packages/wallet/frontend/src/ui/Table.tsx
@@ -26,6 +26,7 @@ type THeadProps = ComponentProps<'thead'> & {
   thProps?: ComponentProps<'th'>
   trProps?: ComponentProps<'tr'>
   sort?: SortHeader[]
+  hideForMobile?: string[]
 }
 
 const THead = ({
@@ -33,6 +34,7 @@ const THead = ({
   thProps,
   trProps,
   sort,
+  hideForMobile,
   className,
   ...props
 }: THeadProps) => {
@@ -44,6 +46,8 @@ const THead = ({
             key={col}
             className={cx(
               'border-b border-green dark:border-pink-neon p-4 text-left font-bold',
+              hideForMobile?.find((item) => item === col) !== undefined &&
+                'hidden sm:table-cell',
               sort?.find((item) => item.header === col) !== undefined &&
                 'cursor-pointer'
             )}
diff --git a/packages/wallet/shared/src/types/transaction.ts b/packages/wallet/shared/src/types/transaction.ts
index dc6edee2a..f49d2834f 100644
--- a/packages/wallet/shared/src/types/transaction.ts
+++ b/packages/wallet/shared/src/types/transaction.ts
@@ -28,7 +28,7 @@ export interface TransactionResponse {
   updatedAt: Date
   isCard?: boolean
 }
-interface TransactionListResponse extends TransactionResponse {
+export interface TransactionListResponse extends TransactionResponse {
   assetScale: number
   accountName: string
   walletAddressPublicName?: string