fix: update table for mobile view

src/components/frame/v5/pages/UserCryptoToFiatPage/partials/FiatTransfersTable/FiatTransferDescription.tsx

@@ -0,0 +1,75 @@
+import { ArrowSquareOut } from '@phosphor-icons/react';
+import { type Row } from '@tanstack/react-table';
+import clsx from 'clsx';
+import React, { type FC } from 'react';
+
+import ExternalLink from '~shared/ExternalLink/ExternalLink.tsx';
+import { type BridgeDrain } from '~types/graphql.ts';
+import { getFormattedDateFrom } from '~utils/getFormattedDateFrom.ts';
+import { formatText } from '~utils/intl.ts';
+import PillsBase from '~v5/common/Pills/PillsBase.tsx';
+
+import { statusPillScheme, STATUS_MSGS } from './consts.ts';
+import { FiatTransferDescriptionRow } from './FiatTransferDescriptionRow.tsx';
+
+export interface FiatTransferDescriptionProps {
+  actionRow: Row<BridgeDrain>;
+  loading: boolean;
+}
+
+const FiatTransferDescription: FC<FiatTransferDescriptionProps> = ({
+  actionRow,
+  loading,
+}) => {
+  const status = actionRow.getValue('state') as keyof typeof statusPillScheme;
+  const statusScheme = statusPillScheme[status] || statusPillScheme.default;
+
+  return (
+    <div className="expandable flex items-start justify-between gap-1 pb-5 pl-[1.125rem] pr-[.9375rem]">
+      <div className="flex flex-col gap-3 text-gray-500">
+        <FiatTransferDescriptionRow
+          loading={loading}
+          title={formatText({ id: 'table.row.date' })}
+        >
+          <span className="text-md">
+            {getFormattedDateFrom(actionRow.getValue('createdAt'))}
+          </span>
+        </FiatTransferDescriptionRow>
+        <FiatTransferDescriptionRow
+          loading={loading}
+          title={formatText({ id: 'table.row.status' })}
+        >
+          <PillsBase
+            isCapitalized={false}
+            className={clsx(statusScheme.bgClassName, 'text-sm font-medium')}
+          >
+            <span className={statusScheme.textClassName}>
+              {formatText(STATUS_MSGS[status as keyof typeof STATUS_MSGS])}
+            </span>
+          </PillsBase>
+        </FiatTransferDescriptionRow>
+        <FiatTransferDescriptionRow
+          loading={loading}
+          title={formatText({ id: 'table.row.receipt' })}
+        >
+          {!actionRow.original.receipt ? (
+            <div className="text-gray-400">
+              {formatText({ id: 'table.content.receiptGenerating' })}
+            </div>
+          ) : (
+            <ExternalLink
+              href={actionRow.original.receipt.url}
+              key={actionRow.original.receipt.url}
+              className="ml-1 flex items-center gap-2 text-gray-700 underline transition-colors hover:text-blue-400"
+            >
+              <ArrowSquareOut size={18} />
+              {formatText({ id: 'table.content.viewReceipt' })}
+            </ExternalLink>
+          )}
+        </FiatTransferDescriptionRow>
+      </div>
+    </div>
+  );
+};
+
+export default FiatTransferDescription;

src/components/frame/v5/pages/UserCryptoToFiatPage/partials/FiatTransfersTable/FiatTransferDescriptionRow.tsx

@@ -0,0 +1,23 @@
+import clsx from 'clsx';
+import React, { type PropsWithChildren, type FC } from 'react';
+
+interface FiatTransferDescriptionRowProps {
+  title: string;
+  loading: boolean;
+}
+
+export const FiatTransferDescriptionRow: FC<
+  PropsWithChildren<FiatTransferDescriptionRowProps>
+> = ({ title, children, loading }) => {
+  const textClassName = 'font-normal text-sm flex items-center';
+  return (
+    <p
+      className={clsx(textClassName, 'text-gray-600', {
+        skeleton: loading,
+      })}
+    >
+      <span>{title}:</span>
+      <span className="ml-1">{children}</span>
+    </p>
+  );
+};

src/components/frame/v5/pages/UserCryptoToFiatPage/partials/FiatTransfersTable/FiatTransfersTable.tsx

@@ -7,11 +7,13 @@ import {
 import React, { useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
+import { useMobile } from '~hooks/index.ts';
 import { type BridgeDrain } from '~types/graphql.ts';
 import EmptyContent from '~v5/common/EmptyContent/index.ts';
 import Table from '~v5/common/Table/index.ts';
 import TableHeader from '~v5/common/TableHeader/TableHeader.tsx';
 
+import FiatTransferDescription from './FiatTransferDescription.tsx';
 import {
   useFiatTransfersData,
   useFiatTransfersTableColumns,
@@ -39,7 +41,10 @@ const FiatTransfersTable = () => {
   const { formatMessage } = useIntl();
   const [sorting, setSorting] = useState<SortingState>([
     { desc: true, id: 'createdAt' },
+    { desc: true, id: 'state' },
   ]);
+
+  const isMobile = useMobile();
   const { sortedData, loading } = useFiatTransfersData(sorting);
 
   const columns = useFiatTransfersTableColumns(loading);
@@ -50,14 +55,28 @@ const FiatTransfersTable = () => {
       <Table<BridgeDrain>
         columns={columns}
         data={loading ? Array(3).fill({}) : sortedData}
-        state={{ sorting }}
+        state={{
+          columnVisibility: isMobile
+            ? {
+                createdAt: false,
+                receipt: false,
+              }
+            : {
+                expander: false,
+              },
+          sorting,
+        }}
         getRowId={(row) => row.id}
         initialState={{ pagination: { pageSize: 10 } }}
         showPageNumber={sortedData.length >= 10}
         onSortingChange={setSorting}
         getSortedRowModel={getSortedRowModel()}
         getPaginationRowModel={getPaginationRowModel()}
-        className="[&_td:nth-child(1)>div]:font-medium [&_td:nth-child(1)>div]:text-gray-900 [&_td:nth-child(2)>div]:text-gray-600"
+        getRowCanExpand={() => isMobile}
+        renderSubComponent={({ row }) => (
+          <FiatTransferDescription actionRow={row} loading={loading} />
+        )}
+        className="[&_td:nth-child(1)>div]:font-medium [&_td:nth-child(1)>div]:text-gray-900 [&_td:nth-child(2)>div]:text-gray-600 [&_tr.expanded-below:not(last-child)_td>*:not(.expandable)]:!pb-2 [&_tr.expanded-below_td]:border-none"
         emptyContent={
           !sortedData.length &&
           !loading && (

src/components/frame/v5/pages/UserCryptoToFiatPage/partials/FiatTransfersTable/hooks.tsx

@@ -1,4 +1,4 @@
-import { ArrowSquareOut } from '@phosphor-icons/react';
+import { ArrowSquareOut, CaretDown } from '@phosphor-icons/react';
 import {
   type ColumnDef,
   createColumnHelper,
@@ -61,15 +61,12 @@ export const useFiatTransfersTableColumns = (
     return [
       columnHelper.accessor('amount', {
         header: () => formatText({ id: 'table.row.amount' }),
-        headCellClassName: clsx({
-          'pl-0 pr-2': isMobile,
-        }),
         cell: ({ row }) => {
           if (loading) {
             return <div className="h-4 w-20 skeleton" />;
           }
           return (
-            <div>
+            <div className="my-2">
               {getFormattedAmount(
                 row.original.amount,
                 SupportedCurrencies[row.original.currency.toUpperCase()] ??
@@ -98,18 +95,21 @@ export const useFiatTransfersTableColumns = (
       columnHelper.accessor('state', {
         header: () => formatText({ id: 'table.row.status' }),
         headCellClassName: isMobile ? 'pr-2' : undefined,
-        staticSize: '180px',
-        cell: ({ row }) => {
-          const status = row.original.state as keyof typeof statusPillScheme;
+        staticSize: isMobile ? '155px' : '180px',
+        cell: ({ row: { original, getIsExpanded } }) => {
+          const status = original.state as keyof typeof statusPillScheme;
           const statusScheme =
             statusPillScheme[status] || statusPillScheme.default;
           if (loading) {
             return <div className="h-4 w-12 skeleton" />;
           }
-          return (
+          return getIsExpanded() ? undefined : (
             <PillsBase
               isCapitalized={false}
-              className={clsx(statusScheme.bgClassName, 'text-sm font-medium')}
+              className={clsx(
+                statusScheme.bgClassName,
+                'truncate text-sm font-medium',
+              )}
             >
               <span className={statusScheme.textClassName}>
                 {formatText(STATUS_MSGS[status as keyof typeof STATUS_MSGS])}
@@ -154,6 +154,25 @@ export const useFiatTransfersTableColumns = (
           );
         },
       }),
+      columnHelper.display({
+        id: 'expander',
+        staticSize: '2.25rem',
+        header: () => null,
+        enableSorting: false,
+        cell: ({ row: { getIsExpanded, toggleExpanded } }) => {
+          return (
+            <button type="button" onClick={() => toggleExpanded()}>
+              <CaretDown
+                size={18}
+                className={clsx('transition', {
+                  'rotate-180': getIsExpanded(),
+                })}
+              />
+            </button>
+          );
+        },
+        cellContentWrapperClassName: 'pl-0',
+      }),
     ];
   }, [isMobile, columnHelper, loading]);
 };