fix: update table for mobile view

[Nortsova]

Description

• The status arrow should show by default, it's currently not showing, and the user do not know it's available for sorting. The table should stay by default sorted by date, so no change here.

• Mobile table styling should match Figma designs on mobile figma: https://www.figma.com/design/C2grfQysdsYXz0j4rADR6K/Crypto-to-Fiat?node-id=4456-37629&node-type=frame&t=jlSKOZ8yTQr98oqZ-0

Before	Now

Testing

1. Create .diff file in your root direction
2. Insert this changes:

diff --git a/src/components/frame/v5/pages/UserCryptoToFiatPage/partials/FiatTransfersTable/FiatTransfersTable.tsx b/src/components/frame/v5/pages/UserCryptoToFiatPage/partials/FiatTransfersTable/FiatTransfersTable.tsx
index 6108cd1dc..167bc241a 100644
--- a/src/components/frame/v5/pages/UserCryptoToFiatPage/partials/FiatTransfersTable/FiatTransfersTable.tsx
+++ b/src/components/frame/v5/pages/UserCryptoToFiatPage/partials/FiatTransfersTable/FiatTransfersTable.tsx
@@ -45,7 +45,58 @@ const FiatTransfersTable = () => {
   ]);
 
   const isMobile = useMobile();
-  const { sortedData, loading } = useFiatTransfersData(sorting);
+  const { sortedData: data, loading } = useFiatTransfersData(sorting);
+
+  const sortedData: typeof data = [
+    {
+      __typename: 'BridgeDrain',
+      id: '12343',
+      amount: '1234.22',
+      currency: 'usdc',
+      state: 'payment_processed',
+      createdAt: '2024-09-20T13:11:22.310Z',
+      receipt: {
+        __typename: 'BridgeDrainReceipt',
+        url: '#',
+      },
+    },
+    {
+      __typename: 'BridgeDrain',
+      id: '12344',
+      amount: '24689.00',
+      currency: 'usdc',
+      state: 'in_review',
+      createdAt: '2024-08-17T10:14:08.450Z',
+      receipt: {
+        __typename: 'BridgeDrainReceipt',
+        url: '#',
+      },
+    },
+    {
+      __typename: 'BridgeDrain',
+      id: '12345',
+      amount: '2230.77',
+      currency: 'usdc',
+      state: 'awaiting_funds',
+      createdAt: '2024-07-16T06:04:23.100Z',
+      receipt: {
+        __typename: 'BridgeDrainReceipt',
+        url: '#',
+      },
+    },
+    {
+      __typename: 'BridgeDrain',
+      id: '12346',
+      amount: '1200662.77',
+      currency: 'usdc',
+      state: 'awaiting_funds',
+      createdAt: '2024-07-16T06:04:23.100Z',
+      receipt: {
+        __typename: 'BridgeDrainReceipt',
+        url: '#',
+      },
+    },
+  ];
 
   const columns = useFiatTransfersTableColumns(loading);
 

3. git apply .diff
4. Navigate to Crypto to fiat tab http://localhost:9091/account/crypto-to-fiat
5. Check that the Drain history matches the design
6. Check that the Status column has an arrow.

Resolves #2662

[Nortsova]

The only thing that doesn't match the design is the size, due to the fact that we have quite long statuses.

@melyndav could you please check if it is possible to leave it as it is?

Size according to design	Currently implemented

[rdig]

Table itself is all good, but shouldn't it have more padding at the bottom ?

As it stands, on my machine at least, it renders glued to the bottom of the viewport

[Nortsova]

Thank you @rdig . I made some changes and now this table should match on both, desktop and mobile. I also added padding-bottom 🙌

[iamsamgibbs]

Great work on this so far, the styling is spot on:

I'm rejecting because the status sorting doesn't actually work until you sort by one of the other columns first:

Screen.Recording.2024-10-23.at.12.46.00.mov

It is also possible to sort by amount, so I'm not sure if that should be restricted so that it is not possible or whether the arrow needs to be visible here as the original issue states the reason for adding the arrow to the state field is to show that it can be sorted. Might need some input from @melyndav