-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: detailed and recent transactions
- Loading branch information
1 parent
45a41cb
commit 3e4f38e
Showing
10 changed files
with
534 additions
and
83 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| import { TransactionDetail } from '@/views/transactions/TransactionDetail'; | ||
|
|
||
| export default function Page({ params }: { params: { id: string } }) { | ||
| return <TransactionDetail id={params.id} />; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,110 @@ | ||
| import { sortBy } from 'lodash'; | ||
| import Link from 'next/link'; | ||
| import { useTranslations } from 'next-intl'; | ||
| import { FC, useMemo } from 'react'; | ||
|
|
||
| import { Skeleton } from '@/components/ui/skeleton'; | ||
| import { useToast } from '@/components/ui/use-toast'; | ||
| import { useGetWalletQuery } from '@/graphql/queries/__generated__/wallet.generated'; | ||
| import { handleApolloError } from '@/utils/error'; | ||
| import { cryptoToUsd } from '@/utils/fiat'; | ||
| import { ROUTES } from '@/utils/routes'; | ||
|
|
||
| import { Transaction } from '../transactions/Transaction'; | ||
| import { TransactionEntry } from '../transactions/Transactions'; | ||
|
|
||
| export const RecentTransactions: FC<{ id: string }> = ({ id }) => { | ||
| const t = useTranslations('App'); | ||
| const { toast } = useToast(); | ||
|
|
||
| const { data, loading, error } = useGetWalletQuery({ | ||
| variables: { id }, | ||
| onError: err => { | ||
| const messages = handleApolloError(err); | ||
|
|
||
| toast({ | ||
| variant: 'destructive', | ||
| title: 'Error getting transactions.', | ||
| description: messages.join(', '), | ||
| }); | ||
| }, | ||
| }); | ||
|
|
||
| const transactions = useMemo(() => { | ||
| if (loading || error) return []; | ||
| if (!data?.wallets.find_one.accounts.length) return []; | ||
|
|
||
| const { accounts } = data.wallets.find_one; | ||
|
|
||
| const transactions: TransactionEntry[] = []; | ||
|
|
||
| accounts.forEach(a => { | ||
| if (!a.liquid) return; | ||
|
|
||
| a.liquid.transactions.forEach(t => { | ||
| transactions.push({ | ||
| id: t.id, | ||
| balance: t.balance, | ||
| formatted_balance: cryptoToUsd( | ||
| t.balance, | ||
| t.asset_info.precision, | ||
| t.asset_info.ticker, | ||
| t.fiat_info.fiat_to_btc | ||
| ), | ||
| date: t.date, | ||
| ticker: t.asset_info.ticker, | ||
| precision: t.asset_info.precision, | ||
| }); | ||
| }); | ||
| }); | ||
|
|
||
| const sorted = sortBy(transactions, t => | ||
| t.date ? new Date(t.date) : new Date() | ||
| ).reverse(); | ||
|
|
||
| return sorted.slice(0, 5); | ||
| }, [data, loading, error]); | ||
|
|
||
| return ( | ||
| <div> | ||
| <div className="mb-4 flex w-full justify-between space-x-2 lg:mb-6"> | ||
| <p className="text-2xl font-semibold">{t('Dashboard.transactions')}</p> | ||
|
|
||
| <Link | ||
| href={ROUTES.transactions.home} | ||
| className="font-medium text-primary transition-colors hover:text-primary-hover" | ||
| > | ||
| {t('view-all')} | ||
| </Link> | ||
| </div> | ||
|
|
||
| <div className="w-full max-w-[calc(100dvw-32px)] space-y-2"> | ||
| {loading ? ( | ||
| Array.from({ length: 5 }).map((_, i) => ( | ||
| <Skeleton key={i} className="h-[52px] w-full rounded-xl" /> | ||
| )) | ||
| ) : ( | ||
| <> | ||
| {transactions.length ? ( | ||
| transactions.map(t => ( | ||
| <Transaction | ||
| key={t.id} | ||
| id={t.id} | ||
| balance={t.balance} | ||
| precision={t.precision} | ||
| date={t.date} | ||
| formatted_balance={t.formatted_balance} | ||
| ticker={t.ticker} | ||
| /> | ||
| )) | ||
| ) : ( | ||
| <p className="font-semibold"> | ||
| {t('Wallet.Transactions.no-results')} | ||
| </p> | ||
| )} | ||
| </> | ||
| )} | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,79 @@ | ||
| import { format, formatDistanceToNowStrict } from 'date-fns'; | ||
| import { es } from 'date-fns/locale'; | ||
| import { ArrowDown, ArrowUp } from 'lucide-react'; | ||
| import Link from 'next/link'; | ||
| import { useLocale, useTranslations } from 'next-intl'; | ||
| import { FC } from 'react'; | ||
|
|
||
| import { cn } from '@/utils/cn'; | ||
| import { numberWithPrecisionAndDecimals } from '@/utils/numbers'; | ||
| import { ROUTES } from '@/utils/routes'; | ||
|
|
||
| export const Transaction: FC<{ | ||
| id: string; | ||
| balance: string; | ||
| precision: number; | ||
| date: string | undefined | null; | ||
| formatted_balance: string; | ||
| ticker: string; | ||
| }> = ({ id, balance, precision, date, formatted_balance, ticker }) => { | ||
| const t = useTranslations(); | ||
| const locale = useLocale(); | ||
|
|
||
| const balanceNum = Number(balance); | ||
|
|
||
| const formatted = numberWithPrecisionAndDecimals( | ||
| parseFloat(balance), | ||
| precision | ||
| ); | ||
|
|
||
| return ( | ||
| <Link href={ROUTES.transactions.tx(id)} className="block"> | ||
| <div className="flex w-full items-center justify-between space-x-2 overflow-x-auto whitespace-nowrap rounded-xl bg-slate-100 px-2 py-1 dark:bg-neutral-900"> | ||
| <div className="flex items-center space-x-2"> | ||
| <div className="flex h-10 w-10 items-center justify-center rounded-full bg-white dark:bg-neutral-800"> | ||
| {balanceNum < 0 ? ( | ||
| <ArrowUp size={24} /> | ||
| ) : ( | ||
| <ArrowDown size={24} className="text-green-400" /> | ||
| )} | ||
| </div> | ||
|
|
||
| {date ? ( | ||
| <div> | ||
| <p className="font-medium"> | ||
| {locale === 'es' | ||
| ? t('App.Wallet.Transactions.ago') + | ||
| ' ' + | ||
| formatDistanceToNowStrict(date, { | ||
| locale: es, | ||
| }) | ||
| : formatDistanceToNowStrict(date) + | ||
| ' ' + | ||
| t('App.Wallet.Transactions.ago')} | ||
| </p> | ||
|
|
||
| <p className="text-sm text-slate-600 dark:text-neutral-400"> | ||
| {format(date, 'MMM dd, yyyy')} | ||
| </p> | ||
| </div> | ||
| ) : ( | ||
| <p>{t('App.Wallet.Transactions.pending')}</p> | ||
| )} | ||
| </div> | ||
|
|
||
| <div className="text-right"> | ||
| <p className={cn('font-medium', balanceNum > 0 && 'text-green-400')}> | ||
| {formatted_balance.includes('-') | ||
| ? '-' + formatted_balance.replaceAll('-', '') | ||
| : '+' + formatted_balance} | ||
| </p> | ||
|
|
||
| <p className="text-sm text-slate-600 dark:text-neutral-400"> | ||
| {formatted.includes('-') ? formatted : '+' + formatted} {ticker} | ||
| </p> | ||
| </div> | ||
| </div> | ||
| </Link> | ||
| ); | ||
| }; |
Oops, something went wrong.