[AMB-317] refactor: swaps redesign

messages/en.json

@@ -26,7 +26,6 @@
         "unlock": "Unlock to Decrypt"
       },
       "Transactions": {
-        "ago": "ago",
         "all": "All",
         "amount": "Amount",
         "asset": "Asset",
@@ -36,7 +35,6 @@
         "date": "Date",
         "details": "Transaction Details",
         "fees": "Fees",
-        "no-results": "No results.",
         "paid": "Paid",
         "pending": "Pending",
         "received": "Received",
@@ -57,6 +55,7 @@
       },
       "add-contact": "Add Contact",
       "add-desc": "Add Description",
+      "ago": "ago",
       "amount": "Please specify an amount.",
       "amount-custom": "Customize Amount",
       "assets": "Assets",
@@ -67,6 +66,7 @@
       "enter-desc": "Enter an optional description.",
       "fee": "Fee",
       "locked": "Your vault is locked.",
+      "no-results": "No results.",
       "receive": "Receive",
       "receive-warn": "Please do not send to this address more than once or after 24 hours from generation.",
       "recipient": "Enter recipient",
@@ -107,6 +107,7 @@
     "accounts": "Accounts",
     "contacts": "Contacts",
     "settings": "Settings",
+    "swaps": "Swaps",
     "transactions": "Transactions",
     "wallet": "Wallet"
   },

messages/es.json

@@ -26,7 +26,6 @@
         "unlock": "Desbloquear para Desencriptar"
       },
       "Transactions": {
-        "ago": "Hace",
         "all": "Todas",
         "amount": "Cantidad",
         "asset": "Activo",
@@ -36,7 +35,6 @@
         "date": "Fecha",
         "details": "Detalles de la Transacción",
         "fees": "Comisiónes",
-        "no-results": "Sin resultados.",
         "paid": "Pagado",
         "pending": "Procesando",
         "received": "Recivido",
@@ -57,6 +55,7 @@
       },
       "add-contact": "Agregar Contacto",
       "add-desc": "Agrega una descripción",
+      "ago": "Hace",
       "amount": "Especifíca una cantidad.",
       "amount-custom": "Cambia la cantidad",
       "assets": "Activos",
@@ -67,6 +66,7 @@
       "enter-desc": "Opcionalmente agrega una descripción.",
       "fee": "Comisión",
       "locked": "Tu bóveda esta bloqueada.",
+      "no-results": "Sin resultados.",
       "receive": "Recibir",
       "receive-warn": "Por favor no enviar a esta dirección más de una vez.",
       "recipient": "Ingrese el destinatario",
@@ -107,6 +107,7 @@
     "accounts": "Cuentas",
     "contacts": "Contactos",
     "settings": "Configuración",
+    "swaps": "Swaps",
     "transactions": "Transacciones",
     "wallet": "Billetera"
   },

src/views/dashboard/RecentTransactions.tsx

@@ -98,9 +98,7 @@ export const RecentTransactions: FC<{ id: string }> = ({ id }) => {
                 />
               ))
             ) : (
-              <p className="font-semibold">
-                {t('Wallet.Transactions.no-results')}
-              </p>
+              <p className="font-semibold">{t('Wallet.no-results')}</p>
             )}
           </>
         )}

src/views/swaps/Swap.tsx

@@ -0,0 +1,90 @@
+import { format, formatDistanceToNowStrict } from 'date-fns';
+import { es } from 'date-fns/locale';
+import { ArrowRight } from 'lucide-react';
+import Image from 'next/image';
+import { useLocale, useTranslations } from 'next-intl';
+import { FC } from 'react';
+
+import bitcoin from '/public/images/bitcoin.png';
+import liquid from '/public/images/liquid.jpg';
+import { SimpleSwap } from '@/graphql/types';
+import { numberWithPrecisionAndDecimals } from '@/utils/numbers';
+
+const AssetLogo: FC<{ coin: string }> = ({ coin }) => {
+  const classname = 'h-10 w-10 rounded-full object-cover';
+
+  switch (coin) {
+    case 'BTC':
+      return <Image src={bitcoin} alt="bitcoin" className={classname} />;
+    case 'L-BTC':
+      return <Image src={liquid} alt="liquid" className={classname} />;
+    default:
+      return <div className="h-10 w-10 rounded-full bg-primary" />;
+  }
+};
+
+export const Swap: FC<{ data: SimpleSwap }> = ({ data }) => {
+  const t = useTranslations();
+  const locale = useLocale();
+
+  return (
+    <div className="w-full space-y-1 overflow-x-auto whitespace-nowrap rounded-xl bg-slate-100 px-2 py-1.5 dark:bg-neutral-900">
+      <p className="text-center text-xs font-medium text-slate-600 dark:text-neutral-400">
+        {data.provider}
+      </p>
+
+      <div className="flex w-full items-center justify-between space-x-2">
+        <div className="flex shrink-0 items-center space-x-2">
+          <AssetLogo coin={data.deposit_coin} />
+
+          <div>
+            <p className="font-medium">
+              {data.deposit_amount
+                ? numberWithPrecisionAndDecimals(data.deposit_amount, 0)
+                : '-'}
+            </p>
+
+            <p className="text-sm font-medium text-slate-600 dark:text-neutral-400">
+              {data.deposit_coin}
+            </p>
+          </div>
+        </div>
+
+        <ArrowRight size={20} className="shrink-0" />
+
+        <div className="flex shrink-0 items-center space-x-2">
+          <div className="text-right">
+            <p className="font-medium">
+              {data.settle_amount
+                ? numberWithPrecisionAndDecimals(data.settle_amount, 0)
+                : '-'}
+            </p>
+
+            <p className="text-sm font-medium text-slate-600 dark:text-neutral-400">
+              {data.settle_coin}
+            </p>
+          </div>
+
+          <AssetLogo coin={data.settle_coin} />
+        </div>
+      </div>
+
+      <p className="text-center text-xs font-medium text-slate-600 dark:text-neutral-400">
+        {format(data.created_at, 'MMM dd, yyyy - HH:mm', {
+          locale: locale === 'es' ? es : undefined,
+        })}{' '}
+        (
+        {locale === 'es'
+          ? t('App.Wallet.ago') +
+            ' ' +
+            formatDistanceToNowStrict(data.created_at, {
+              locale: es,
+            })
+          : formatDistanceToNowStrict(data.created_at) +
+            ' ' +
+            t('App.Wallet.ago')}
+        )
+      </p>
+    </div>
+  );
+};

src/views/swaps/Swaps.tsx

@@ -1,105 +1,55 @@
 'use client';
 
 import { ColumnDef } from '@tanstack/react-table';
-import { format, formatDistanceToNowStrict } from 'date-fns';
-import { ChevronRight, Loader2 } from 'lucide-react';
+import { useTranslations } from 'next-intl';
 import { useLocalStorage } from 'usehooks-ts';
 
+import { useToast } from '@/components/ui/use-toast';
 import { useGetWalletSwapsQuery } from '@/graphql/queries/__generated__/swaps.generated';
 import { SimpleSwap } from '@/graphql/types';
 import { LOCALSTORAGE_KEYS } from '@/utils/constants';
-import { numberWithPrecisionAndDecimals } from '@/utils/numbers';
+import { handleApolloError } from '@/utils/error';
 
-import { SimpleTable } from '../wallet/SimpleTable';
+import { Swap } from './Swap';
+import { SwapsTable } from './SwapsTable';
 
 export const columns: ColumnDef<SimpleSwap>[] = [
   {
-    accessorKey: 'date',
-    header: 'Date',
-    cell: ({ row }) =>
-      row.original.created_at ? (
-        <div>
-          {`${formatDistanceToNowStrict(row.original.created_at)} ago`}
-          <p className="mt-1 text-xs text-slate-500 dark:text-slate-400">
-            {format(row.original.created_at, 'MMM do, yyyy - HH:mm')}
-          </p>
-        </div>
-      ) : (
-        'Pending'
-      ),
-  },
-  {
-    accessorKey: 'pair',
-    header: 'Pair',
-    cell: ({ row }) => (
-      <div className="flex items-center justify-start gap-2">
-        <div>
-          <p className="mt-1 text-xs text-slate-500 dark:text-slate-400">
-            From
-          </p>
-          <div className="flex gap-1">
-            {row.original.deposit_amount ? (
-              <p>
-                {numberWithPrecisionAndDecimals(row.original.deposit_amount, 0)}
-              </p>
-            ) : null}
-            <p>{row.original.deposit_coin}</p>
-          </div>
-        </div>
-
-        <ChevronRight className="size-4" />
-
-        <div>
-          <p className="mt-1 text-xs text-slate-500 dark:text-slate-400">To</p>
-          <div className="flex gap-1">
-            {row.original.settle_amount ? (
-              <p>
-                {numberWithPrecisionAndDecimals(row.original.settle_amount, 0)}
-              </p>
-            ) : null}
-            <p>{row.original.settle_coin}</p>
-          </div>
-        </div>
-      </div>
-    ),
-  },
-  {
-    accessorKey: 'provider',
-    header: 'Provider',
-    cell: ({ row }) => <div>{row.original.provider}</div>,
+    id: 'swap',
+    cell: ({ row }) => <Swap data={row.original} />,
   },
 ];
 
 export const Swaps = () => {
+  const t = useTranslations('Index');
+  const { toast } = useToast();
+
   const [value] = useLocalStorage(LOCALSTORAGE_KEYS.currentWalletId, '');
 
-  const { data, loading, error } = useGetWalletSwapsQuery({
+  const { data, loading } = useGetWalletSwapsQuery({
     variables: { id: value },
+    onError: err => {
+      const messages = handleApolloError(err);
+
+      toast({
+        variant: 'destructive',
+        title: 'Error getting swaps.',
+        description: messages.join(', '),
+      });
+    },
   });
 
-  console.log(data?.wallets?.find_one?.swaps?.find_many?.[0]);
+  const swaps = data?.wallets.find_one.swaps.find_many || [];
 
   return (
-    <div className="py-4">
-      <h2 className="scroll-m-20 pb-4 text-xl font-semibold tracking-tight">
-        Swaps
-      </h2>
-      {loading ? (
-        <div className="my-10 flex w-full justify-center">
-          <Loader2 className="animate-spin" />
-        </div>
-      ) : error ? (
-        <div className="my-4 flex w-full justify-center">
-          <p className="text-sm text-muted-foreground">
-            Error loading wallet swaps
-          </p>
-        </div>
-      ) : (
-        <SimpleTable<SimpleSwap>
-          data={data?.wallets.find_one.swaps.find_many || []}
-          columns={columns}
-        />
-      )}
+    <div className="mx-auto w-full max-w-lg py-4 lg:py-10">
+      <h1 className="mb-6 text-3xl font-semibold">{t('swaps')}</h1>
+
+      <SwapsTable<SimpleSwap>
+        data={swaps}
+        columns={columns}
+        loading={loading}
+      />
     </div>
   );
 };