fix: update table for mobile view

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

@@ -0,0 +1,90 @@
+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;
+}
+
+interface ContentObject {
+  title: string;
+  content: React.ReactNode;
+}
+
+const generateContentObjects = ({ status, date, receipt }): ContentObject[] => {
+  const statusScheme = statusPillScheme[status] || statusPillScheme.default;
+  return [
+    {
+      title: formatText({ id: 'table.row.date' }),
+      content: <span className="text-md">{getFormattedDateFrom(date)}</span>,
+    },
+    {
+      title: formatText({ id: 'table.row.status' }),
+      content: (
+        <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>
+      ),
+    },
+    {
+      title: formatText({ id: 'table.row.receipt' }),
+      content: !receipt ? (
+        <div className="text-gray-400">
+          {formatText({ id: 'table.content.receiptGenerating' })}
+        </div>
+      ) : (
+        <ExternalLink
+          href={receipt.url}
+          key={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>
+      ),
+    },
+  ];
+};
+
+const FiatTransferDescription: FC<FiatTransferDescriptionProps> = ({
+  actionRow,
+  loading,
+}) => {
+  const status = actionRow.getValue('state') as keyof typeof statusPillScheme;
+  const contentObjects = generateContentObjects({
+    status,
+    date: actionRow.getValue('createdAt'),
+    receipt: actionRow.original.receipt,
+  });
+  return (
+    <div className="expandable flex items-start justify-between gap-1 pb-4 pl-[1.125rem] pr-[.9375rem] pt-1">
+      <div className="flex flex-col gap-3 text-gray-500">
+        {contentObjects.map(({ title, content }) => {
+          return (
+            <FiatTransferDescriptionRow loading={loading} title={title}>
+              {content}
+            </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="pb-8 pt-1.5 [&_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/consts.ts

@@ -29,11 +29,11 @@ export const STATUS_MSGS = defineMessages({
   },
   [FiatTransferState.PaymentSubmitted]: {
     id: `${displayName}.paymentSubmitted`,
-    defaultMessage: 'Payment submitted',
+    defaultMessage: 'Submitted',
   },
   [FiatTransferState.PaymentProcessed]: {
     id: `${displayName}.paymentProcessed`,
-    defaultMessage: 'Payment processed',
+    defaultMessage: 'Processed',
   },
   [FiatTransferState.Canceled]: {
     id: `${displayName}.canceled`,

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,9 +61,6 @@ 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" />;
@@ -87,7 +84,7 @@ export const useFiatTransfersTableColumns = (
       columnHelper.accessor('createdAt', {
         header: () => formatText({ id: 'table.row.date' }),
         headCellClassName: isMobile ? 'pr-2' : undefined,
-        staticSize: '180px',
+        staticSize: '150px',
         cell: ({ row }) => {
           if (loading) {
             return <div className="h-4 w-20 skeleton" />;
@@ -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 ? '145px' : '170px',
+        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])}
@@ -128,7 +128,7 @@ export const useFiatTransfersTableColumns = (
       columnHelper.accessor('receipt', {
         header: () => formatText({ id: 'table.row.receipt' }),
         headCellClassName: isMobile ? 'pr-2 pl-0' : undefined,
-        staticSize: '180px',
+        staticSize: '165px',
         cell: ({ row }) => {
           if (loading) {
             return <div className="h-4 w-12 skeleton" />;
@@ -146,14 +146,33 @@ export const useFiatTransfersTableColumns = (
             <ExternalLink
               href={row.original.receipt.url}
               key={row.original.receipt.url}
-              className="flex items-center gap-2 text-md text-gray-700 underline transition-colors hover:text-blue-400"
+              className="flex items-center gap-2 text-sm text-gray-700 underline transition-colors hover:text-blue-400"
             >
               <ArrowSquareOut size={18} />
               {formatText({ id: 'table.content.viewReceipt' })}
             </ExternalLink>
           );
         },
       }),
+      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]);
 };

src/components/v5/common/Table/Table.tsx

@@ -328,7 +328,7 @@ const Table = <T,>({
                         {row.getVisibleCells().map((cell) => {
                           const renderCellWrapperCommonArgs = [
                             clsx(
-                              'flex h-full flex-col items-start justify-center p-[1.1rem] text-md',
+                              'flex h-full flex-col items-start justify-center p-4 text-md',
                               {
                                 'text-gray-500': !isDisabled,
                                 'text-gray-300': isDisabled,