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

[Nortsova]

Hey Sam! Thank you! Nice catch. I think we didn't have this design before with multiple arrows. I refactored a bit, and now it should work fine:

I will message @melyndav regarding the Amount sorting! thank you :)

[iamsamgibbs]

This is looking closer now! Unfortunately I'm experiencing this weird issue with the data not sorting and the arrow direction changing on other columns. I'm not exactly sure how this is supposed to function with multiple visible arrows.

Screen.Recording.2024-10-29.at.10.44.03.mov

[Nortsova]

Thank you @iamsamgibbs for your attantion to details, I spoke to @melyndav today and it seems I misunderstood the design.

Here is updated version:

Arrows will be hidden for all columns and visible for sorted ones, also on hover, you can see an arrow that means that the column is sortable 🙌