Skip to content

Commit

Permalink
Add user name to transactions list and redesign list
Browse files Browse the repository at this point in the history
  • Loading branch information
@Tymmmy
Tymmmy committed Dec 11, 2024
1 parent 3475aa7 commit ff49963
Show file tree
Hide file tree
Showing 4 changed files with 151 additions and 66 deletions.
194 changes: 129 additions & 65 deletions packages/wallet/frontend/src/pages/transactions.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand All @@ -26,6 +30,7 @@ import {
TooltipProvider,
TooltipTrigger
} from '@/ui/Tooltip'
import { Card } from '@/components/icons/CardButtons'

type WalletAddressSelectOption = SelectOption & {
accountId: string
Expand Down Expand Up @@ -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" />
Expand Down Expand Up @@ -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={[
{
Expand All @@ -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">
Expand Down
2 changes: 1 addition & 1 deletion packages/wallet/frontend/src/ui/Table.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
)
Expand Down
20 changes: 20 additions & 0 deletions packages/wallet/frontend/src/utils/helpers.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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({
Expand Down
1 change: 1 addition & 0 deletions packages/wallet/shared/src/types/transaction.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ export interface TransactionResponse {
secondParty?: string
createdAt: Date
updatedAt: Date
isCard?: boolean
}
interface TransactionListResponse extends TransactionResponse {
assetScale: number
Expand Down

0 comments on commit ff49963

Please sign in to comment.