From 79fac2fbf1db58ca8c085c25d0c59e121b20844f Mon Sep 17 00:00:00 2001
From: secondl1ght <85003930+secondl1ght@users.noreply.github.com>
Date: Sun, 6 Oct 2024 20:50:36 -0600
Subject: [PATCH] feat: detailed and recent transactions (#87)

---
 messages/en.json                              |  17 +-
 messages/es.json                              |  19 +-
 .../(app)/(layout)/transactions/[id]/page.tsx |   5 +
 src/utils/routes.ts                           |   5 +-
 src/views/dashboard/Dashboard.tsx             |   2 +
 src/views/dashboard/RecentTransactions.tsx    | 110 +++++++
 src/views/transactions/Transaction.tsx        |  79 +++++
 src/views/transactions/TransactionDetail.tsx  | 272 ++++++++++++++++++
 src/views/transactions/Transactions.tsx       | 105 ++-----
 src/views/transactions/TransactionsTable.tsx  |   3 +-
 10 files changed, 534 insertions(+), 83 deletions(-)
 create mode 100644 src/app/(app)/(layout)/transactions/[id]/page.tsx
 create mode 100644 src/views/dashboard/RecentTransactions.tsx
 create mode 100644 src/views/transactions/Transaction.tsx
 create mode 100644 src/views/transactions/TransactionDetail.tsx

diff --git a/messages/en.json b/messages/en.json
index 936247ff..59d4d1b4 100644
--- a/messages/en.json
+++ b/messages/en.json
@@ -9,6 +9,7 @@
       "recent": "Recent Contacts",
       "sell": "Sell",
       "tether-explainer": "Tether (USDT) is a stablecoin, a type of cryptocurrency designed to maintain a stable value relative to a fiat currency, in this case, the United States dollar (USD). It is issued by Tether Limited, a company founded in 2014, and is pegged to the value of the US dollar.",
+      "transactions": "Recent Transactions",
       "warning": "In order to send USD you need to add Bitcoin to your wallet.",
       "warning-title": "Add Bitcoin!",
       "what-asset": "What is {asset}?"
@@ -27,8 +28,22 @@
       "Transactions": {
         "ago": "ago",
         "all": "All",
+        "amount": "Amount",
+        "asset": "Asset",
+        "blinded": "Copy Blinded URL",
+        "copy-id": "Copy ID",
+        "copy-tx": "Copy Transaction ID",
+        "date": "Date",
+        "details": "Transaction Details",
+        "fees": "Fees",
         "no-results": "No results.",
-        "pending": "Pending"
+        "paid": "Paid",
+        "pending": "Pending",
+        "received": "Received",
+        "sent": "Sent",
+        "status": "Status",
+        "time": "Time",
+        "unblinded": "Copy Unblinded URL"
       },
       "Vault": {
         "lock": "Lock",
diff --git a/messages/es.json b/messages/es.json
index fcfaf618..5e3937f2 100644
--- a/messages/es.json
+++ b/messages/es.json
@@ -9,6 +9,7 @@
       "recent": "Contactos Recientes",
       "sell": "Vender",
       "tether-explainer": "Tether (USDT) es una stablecoin, un tipo de criptomoneda diseñada para mantener un valor estable en relación con una moneda fiduciaria, en este caso, el dólar estadounidense (USD). Es emitida por Tether Limited, una compañía fundada en 2014, y está vinculada al valor del dólar estadounidense.",
+      "transactions": "Transacciones Recientes",
       "warning": "Para enviar USD tienes que tener Bitcoin en tu billetera.",
       "warning-title": "Agrega Bitcoin!",
       "what-asset": "Qué es {asset}?"
@@ -25,10 +26,24 @@
         "unlock": "Desbloquear para Desencriptar"
       },
       "Transactions": {
-        "ago": "ago",
+        "ago": "Hace",
         "all": "Todas",
+        "amount": "Cantidad",
+        "asset": "Activo",
+        "blinded": "Copiar URL Privado",
+        "copy-id": "Copiar ID",
+        "copy-tx": "Copiar ID de la Transacción",
+        "date": "Fecha",
+        "details": "Detalles de la Transacción",
+        "fees": "Comisiónes",
         "no-results": "Sin resultados.",
-        "pending": "Procesando"
+        "paid": "Pagado",
+        "pending": "Procesando",
+        "received": "Recivido",
+        "sent": "Envíado",
+        "status": "Estado",
+        "time": "Tiempo",
+        "unblinded": "Copiar URL Público"
       },
       "Vault": {
         "lock": "Bloquear",
diff --git a/src/app/(app)/(layout)/transactions/[id]/page.tsx b/src/app/(app)/(layout)/transactions/[id]/page.tsx
new file mode 100644
index 00000000..f33129b3
--- /dev/null
+++ b/src/app/(app)/(layout)/transactions/[id]/page.tsx
@@ -0,0 +1,5 @@
+import { TransactionDetail } from '@/views/transactions/TransactionDetail';
+
+export default function Page({ params }: { params: { id: string } }) {
+  return <TransactionDetail id={params.id} />;
+}
diff --git a/src/utils/routes.ts b/src/utils/routes.ts
index 58fcc265..376ffd5c 100644
--- a/src/utils/routes.ts
+++ b/src/utils/routes.ts
@@ -9,7 +9,10 @@ export const ROUTES = {
     home: '/settings',
     twofa: '/settings/2fa',
   },
-  transactions: { home: '/transactions' },
+  transactions: {
+    home: '/transactions',
+    tx: (id: string) => `/transactions/${id}`,
+  },
   swaps: {
     home: '/swaps',
   },
diff --git a/src/views/dashboard/Dashboard.tsx b/src/views/dashboard/Dashboard.tsx
index 1b0b50cf..5284f859 100644
--- a/src/views/dashboard/Dashboard.tsx
+++ b/src/views/dashboard/Dashboard.tsx
@@ -17,6 +17,7 @@ import { ROUTES } from '@/utils/routes';
 import { WalletInfo } from '../wallet/WalletInfo';
 import { BancoCode } from './BancoCode';
 import { RecentContacts } from './RecentContacts';
+import { RecentTransactions } from './RecentTransactions';
 
 export type DashboardView = 'default' | 'assets' | 'asset';
 
@@ -108,6 +109,7 @@ export const Dashboard = () => {
           <BancoCode id={value} />
           <WalletInfo id={value} view={view} setView={setView} />
           <RecentContacts id={value} />
+          <RecentTransactions id={value} />
         </>
       ) : (
         <WalletInfo id={value} view={view} setView={setView} />
diff --git a/src/views/dashboard/RecentTransactions.tsx b/src/views/dashboard/RecentTransactions.tsx
new file mode 100644
index 00000000..28f35dbf
--- /dev/null
+++ b/src/views/dashboard/RecentTransactions.tsx
@@ -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>
+  );
+};
diff --git a/src/views/transactions/Transaction.tsx b/src/views/transactions/Transaction.tsx
new file mode 100644
index 00000000..f37dd119
--- /dev/null
+++ b/src/views/transactions/Transaction.tsx
@@ -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="group flex w-full items-center justify-between space-x-2 overflow-x-auto whitespace-nowrap rounded-xl bg-slate-100 px-2 py-1 transition-colors dark:bg-neutral-900 dark:hover:bg-neutral-800">
+        <div className="flex items-center space-x-2">
+          <div className="flex h-10 w-10 items-center justify-center rounded-full bg-white transition-colors group-hover:bg-slate-100 dark:bg-neutral-800 group-hover: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>
+  );
+};
diff --git a/src/views/transactions/TransactionDetail.tsx b/src/views/transactions/TransactionDetail.tsx
new file mode 100644
index 00000000..18047ed7
--- /dev/null
+++ b/src/views/transactions/TransactionDetail.tsx
@@ -0,0 +1,272 @@
+'use client';
+
+import { format } from 'date-fns';
+import {
+  ArrowDown,
+  ArrowLeft,
+  ArrowUp,
+  ArrowUpDown,
+  Copy,
+  Ellipsis,
+  Link as LinkIcon,
+} from 'lucide-react';
+import Link from 'next/link';
+import { useTranslations } from 'next-intl';
+import { FC, useMemo, useState } from 'react';
+import { useLocalStorage } from 'usehooks-ts';
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { Skeleton } from '@/components/ui/skeleton';
+import { useToast } from '@/components/ui/use-toast';
+import { useGetWalletQuery } from '@/graphql/queries/__generated__/wallet.generated';
+import { cn } from '@/utils/cn';
+import { LOCALSTORAGE_KEYS } from '@/utils/constants';
+import { handleApolloError } from '@/utils/error';
+import { cryptoToUsd } from '@/utils/fiat';
+import { numberWithPrecisionAndDecimals } from '@/utils/numbers';
+import { ROUTES } from '@/utils/routes';
+
+export const TransactionDetail: FC<{ id: string }> = ({ id }) => {
+  const t = useTranslations('App.Wallet.Transactions');
+  const { toast } = useToast();
+
+  const [value] = useLocalStorage(LOCALSTORAGE_KEYS.currentWalletId, '');
+
+  const [assetFirst, setAssetFirst] = useState(false);
+
+  const { data, loading, error } = useGetWalletQuery({
+    variables: { id: value },
+    skip: !value,
+    onCompleted: data => {
+      const tx = data?.wallets.find_one.accounts
+        .find(a => a.liquid)
+        ?.liquid?.transactions.find(t => t.id === id);
+
+      if (!tx) {
+        toast({
+          variant: 'destructive',
+          title: 'Transaction not found.',
+        });
+      }
+    },
+    onError: err => {
+      const messages = handleApolloError(err);
+
+      toast({
+        variant: 'destructive',
+        title: 'Error getting transaction.',
+        description: messages.join(', '),
+      });
+    },
+  });
+
+  const transaction = useMemo(
+    () =>
+      data?.wallets.find_one.accounts
+        .find(a => a.liquid)
+        ?.liquid?.transactions.find(t => t.id === id),
+    [data?.wallets.find_one.accounts, id]
+  );
+
+  if (loading || error || !transaction)
+    return (
+      <div className="mx-auto w-full max-w-lg py-4 lg:py-10">
+        <div className="flex w-full items-center justify-between space-x-2">
+          <Link
+            href={ROUTES.transactions.home}
+            className="transition-opacity hover:opacity-75"
+          >
+            <ArrowLeft size={24} />
+          </Link>
+
+          <h1 className="text-2xl font-semibold">{t('details')}</h1>
+
+          <button disabled className="cursor-not-allowed opacity-50">
+            <Ellipsis size={24} />
+          </button>
+        </div>
+
+        {loading ? (
+          <div className="mt-6 space-y-2">
+            <Skeleton className="h-48 w-full rounded-2xl" />
+            <Skeleton className="h-[228px] w-full rounded-2xl" />
+          </div>
+        ) : null}
+      </div>
+    );
+
+  const balance = Number(transaction.balance);
+
+  const fiatBalance = cryptoToUsd(
+    transaction.balance,
+    transaction.asset_info.precision,
+    transaction.asset_info.ticker,
+    transaction.fiat_info.fiat_to_btc
+  );
+
+  const prefixFiatBalance = fiatBalance.includes('-')
+    ? '-' + fiatBalance.replaceAll('-', '')
+    : '+' + fiatBalance;
+
+  const assetBalance = numberWithPrecisionAndDecimals(
+    parseFloat(transaction.balance),
+    transaction.asset_info.precision
+  );
+
+  const prefixAssetBalance =
+    (assetBalance.includes('-') ? assetBalance : '+' + assetBalance) +
+    ' ' +
+    transaction.asset_info.ticker;
+
+  return (
+    <div className="mx-auto w-full max-w-lg py-4 lg:py-10">
+      <div className="mb-6 flex w-full items-center justify-between space-x-2">
+        <Link
+          href={ROUTES.transactions.home}
+          className="transition-opacity hover:opacity-75"
+        >
+          <ArrowLeft size={24} />
+        </Link>
+
+        <h1 className="text-xl font-semibold sm:text-2xl">{t('details')}</h1>
+
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <button className="transition-opacity hover:opacity-75">
+              <Ellipsis size={24} />
+            </button>
+          </DropdownMenuTrigger>
+
+          <DropdownMenuContent align="end">
+            <DropdownMenuItem
+              className="flex items-center space-x-3"
+              onClick={() => navigator.clipboard.writeText(transaction.id)}
+            >
+              <Copy size={16} />
+              <p>{t('copy-id')}</p>
+            </DropdownMenuItem>
+
+            <DropdownMenuItem
+              className="flex items-center space-x-3"
+              onClick={() => navigator.clipboard.writeText(transaction.tx_id)}
+            >
+              <Copy size={16} />
+              <p>{t('copy-tx')}</p>
+            </DropdownMenuItem>
+
+            <DropdownMenuItem
+              className="flex items-center space-x-3"
+              onClick={() =>
+                navigator.clipboard.writeText(transaction.blinded_url)
+              }
+            >
+              <LinkIcon size={16} />
+              <p>{t('blinded')}</p>
+            </DropdownMenuItem>
+
+            <DropdownMenuItem
+              className="flex items-center space-x-3"
+              onClick={() =>
+                navigator.clipboard.writeText(transaction.unblinded_url)
+              }
+            >
+              <LinkIcon size={16} />
+              <p>{t('unblinded')}</p>
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+
+      <div className="space-y-2">
+        <div className="w-full rounded-2xl bg-slate-100 px-2 pb-6 pt-4 dark:bg-neutral-900">
+          <div className="mx-auto mb-2 flex h-12 w-12 items-center justify-center rounded-full bg-white dark:bg-neutral-800">
+            {balance < 0 ? (
+              <ArrowUp size={24} />
+            ) : (
+              <ArrowDown size={24} className="text-green-400" />
+            )}
+          </div>
+
+          <p className="mb-3 text-center text-sm font-medium text-slate-600 dark:text-neutral-400">
+            {balance < 0 ? t('sent') : t('received')}
+          </p>
+
+          <p className="mb-2 text-center text-3xl font-medium">
+            {assetFirst ? prefixAssetBalance : prefixFiatBalance}
+          </p>
+
+          <div className="flex items-center justify-center space-x-2 text-slate-600 dark:text-neutral-400">
+            <p className="text-sm font-medium">
+              {assetFirst ? prefixFiatBalance : prefixAssetBalance}
+            </p>
+
+            <button onClick={() => setAssetFirst(f => !f)}>
+              <ArrowUpDown size={14} />
+            </button>
+          </div>
+        </div>
+
+        <div className="w-full space-y-3 rounded-2xl bg-slate-100 px-4 py-3 dark:bg-neutral-900">
+          <div className="flex w-full items-center justify-between space-x-2">
+            <p className="font-medium text-slate-600 dark:text-neutral-400">
+              {t('date')}
+            </p>
+
+            <p>
+              {transaction.date
+                ? format(transaction.date, 'MMM dd, yyyy')
+                : '-'}
+            </p>
+          </div>
+
+          <div className="flex w-full items-center justify-between space-x-2">
+            <p className="font-medium text-slate-600 dark:text-neutral-400">
+              {t('time')}
+            </p>
+
+            <p>{transaction.date ? format(transaction.date, 'HH:mm') : '-'}</p>
+          </div>
+
+          <div className="flex w-full items-center justify-between space-x-2">
+            <p className="font-medium text-slate-600 dark:text-neutral-400">
+              {t('status')}
+            </p>
+
+            <p className={cn(transaction.date && 'text-green-400')}>
+              {transaction.date ? t('paid') : t('pending')}
+            </p>
+          </div>
+
+          <div className="flex w-full items-center justify-between space-x-2">
+            <p className="font-medium text-slate-600 dark:text-neutral-400">
+              {t('amount')}
+            </p>
+
+            <p>{fiatBalance.replaceAll('-', '')}</p>
+          </div>
+
+          <div className="flex w-full items-center justify-between space-x-2">
+            <p className="font-medium text-slate-600 dark:text-neutral-400">
+              {t('asset')}
+            </p>
+
+            <p>{transaction.asset_info.name}</p>
+          </div>
+
+          <div className="flex w-full items-center justify-between space-x-2">
+            <p className="font-medium text-slate-600 dark:text-neutral-400">
+              {t('fees')}
+            </p>
+
+            <p>{Number(transaction.fee).toLocaleString('en-US')} sats</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/src/views/transactions/Transactions.tsx b/src/views/transactions/Transactions.tsx
index 51e1b67a..0b403991 100644
--- a/src/views/transactions/Transactions.tsx
+++ b/src/views/transactions/Transactions.tsx
@@ -1,38 +1,52 @@
 'use client';
 
 import { ColumnDef } from '@tanstack/react-table';
-import { format, formatDistanceToNowStrict } from 'date-fns';
-import { es } from 'date-fns/locale';
 import { sortBy } from 'lodash';
-import { ArrowDown, ArrowUp } from 'lucide-react';
-import { useLocale, useTranslations } from 'next-intl';
+import { useTranslations } from 'next-intl';
 import { useMemo } from 'react';
 import { useLocalStorage } from 'usehooks-ts';
 
 import { RefreshButton } from '@/components/button/RefreshButton';
 import { useToast } from '@/components/ui/use-toast';
 import { useGetWalletQuery } from '@/graphql/queries/__generated__/wallet.generated';
-import { cn } from '@/utils/cn';
 import { LOCALSTORAGE_KEYS } from '@/utils/constants';
 import { handleApolloError } from '@/utils/error';
 import { cryptoToUsd } from '@/utils/fiat';
-import { numberWithPrecisionAndDecimals } from '@/utils/numbers';
 
+import { Transaction } from './Transaction';
 import { TransactionsTable } from './TransactionsTable';
 
-type TransactionEntry = {
-  tx_id: string;
+export type TransactionEntry = {
+  id: string;
   balance: string;
   formatted_balance: string;
   date: string | undefined | null;
   ticker: string;
   precision: number;
-  name: string;
+  name?: string;
 };
 
+const columns: ColumnDef<TransactionEntry>[] = [
+  {
+    id: 'transaction',
+    accessorKey: 'name',
+    cell: ({ row }) => {
+      return (
+        <Transaction
+          id={row.original.id}
+          balance={row.original.balance}
+          precision={row.original.precision}
+          date={row.original.date}
+          formatted_balance={row.original.formatted_balance}
+          ticker={row.original.ticker}
+        />
+      );
+    },
+  },
+];
+
 export const Transactions = () => {
-  const t = useTranslations();
-  const locale = useLocale();
+  const t = useTranslations('Index');
 
   const { toast } = useToast();
 
@@ -65,7 +79,7 @@ export const Transactions = () => {
 
       a.liquid.transactions.forEach(t => {
         transactions.push({
-          tx_id: t.tx_id,
+          id: t.id,
           balance: t.balance,
           formatted_balance: cryptoToUsd(
             t.balance,
@@ -88,75 +102,10 @@ export const Transactions = () => {
     return sorted;
   }, [data, loading, error]);
 
-  const columns: ColumnDef<TransactionEntry>[] = useMemo(
-    () => [
-      {
-        id: 'transaction',
-        accessorKey: 'name',
-        cell: ({ row }) => {
-          const balance = Number(row.original.balance);
-
-          const formatted = numberWithPrecisionAndDecimals(
-            parseFloat(row.original.balance),
-            row.original.precision
-          );
-
-          return (
-            <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">
-                  {balance < 0 ? (
-                    <ArrowUp size={24} />
-                  ) : (
-                    <ArrowDown size={24} className="text-green-400" />
-                  )}
-                </div>
-
-                {row.original.date ? (
-                  <div>
-                    <p className="font-medium">
-                      {formatDistanceToNowStrict(row.original.date, {
-                        locale: locale === 'es' ? es : undefined,
-                      }) +
-                        ' ' +
-                        t('App.Wallet.Transactions.ago')}
-                    </p>
-
-                    <p className="text-sm text-slate-600 dark:text-neutral-400">
-                      {format(row.original.date, 'MMM dd, yyyy')}
-                    </p>
-                  </div>
-                ) : (
-                  <p>{t('App.Wallet.Transactions.pending')}</p>
-                )}
-              </div>
-
-              <div className="text-right">
-                <p
-                  className={cn('font-medium', balance > 0 && 'text-green-400')}
-                >
-                  {row.original.formatted_balance.includes('-')
-                    ? '-' + row.original.formatted_balance.replaceAll('-', '')
-                    : '+' + row.original.formatted_balance}
-                </p>
-
-                <p className="text-sm text-slate-600 dark:text-neutral-400">
-                  {formatted.includes('-') ? formatted : '+' + formatted}{' '}
-                  {row.original.ticker}
-                </p>
-              </div>
-            </div>
-          );
-        },
-      },
-    ],
-    [locale, t]
-  );
-
   return (
     <div className="mx-auto w-full max-w-lg py-4 lg:py-10">
       <div className="mb-4 flex w-full items-center justify-between space-x-2">
-        <h1 className="text-3xl font-semibold">{t('Index.transactions')}</h1>
+        <h1 className="text-3xl font-semibold">{t('transactions')}</h1>
 
         <RefreshButton />
       </div>
diff --git a/src/views/transactions/TransactionsTable.tsx b/src/views/transactions/TransactionsTable.tsx
index 8647d70f..1507d40d 100644
--- a/src/views/transactions/TransactionsTable.tsx
+++ b/src/views/transactions/TransactionsTable.tsx
@@ -47,6 +47,7 @@ export const TransactionsTable = <T,>({
     state: {
       columnFilters,
     },
+    initialState: { pagination: { pageSize: 5 } },
   });
 
   return (
@@ -78,7 +79,7 @@ export const TransactionsTable = <T,>({
 
       <div className="my-4 space-y-3">
         {loading ? (
-          Array.from({ length: 10 }).map((_, i) => (
+          Array.from({ length: 5 }).map((_, i) => (
             <Skeleton key={i} className="h-[52px] w-full rounded-xl" />
           ))
         ) : (