Fix: Crypto-to-fiat account area UI fixes

amplify/team-provider-info.json

@@ -1,4 +1,3 @@
 {
-  "dev": {
-  }
+  "dev": {}
 }

src/components/frame/LoadingTemplate/LoadingTemplate.module.css

@@ -2,6 +2,7 @@
   composes: stretchVertical stretchHorizontal from '~styles/layout.css';
   position: absolute;
   top: 0;
+  left: 0;
   overflow: auto;
   background-color: var(--color-base-white);
 }

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

@@ -21,7 +21,7 @@ const BodyDescription = () => (
     {'. '}
     <a
       href={LEARN_MORE_CRYPTO_TO_FIAT}
-      className="font-bold text-gray-900 underline transition-colors hover:text-blue-400"
+      className="font-medium text-gray-900 underline transition-colors hover:text-blue-400"
     >
       {formatText({ id: 'navigation.learnMore' })}
     </a>

src/components/frame/v5/pages/UserCryptoToFiatPage/partials/AutomaticDeposits/consts.ts

@@ -81,7 +81,7 @@ export const HEADING_MSG = defineMessages({
   },
   headingAccessory: {
     id: `${displayName}.headingAccessory`,
-    defaultMessage: 'optional',
+    defaultMessage: 'Optional',
   },
 });
 

src/components/frame/v5/pages/UserCryptoToFiatPage/partials/BankDetails/partials/BankDetailsDescriptionComponent/BankDetailsDescriptionComponent.tsx

@@ -2,9 +2,11 @@ import React from 'react';
 import { defineMessages } from 'react-intl';
 
 import LoadingSkeleton from '~common/LoadingSkeleton/LoadingSkeleton.tsx';
-import { type CheckKycStatusMutation } from '~gql';
+import { type SupportedCurrencies, type CheckKycStatusMutation } from '~gql';
 import { formatMessage } from '~utils/yup/tests/helpers.ts';
 
+import { CurrencyLabel } from '../../../CurrencyLabel.tsx';
+
 import { TABLE_TD_LOADER_STYLES } from './consts.ts';
 
 const displayName =
@@ -15,10 +17,14 @@ const MSG = defineMessages({
     id: `${displayName}.componentTitle`,
     defaultMessage: 'Bank, address and currency information',
   },
-  tableTitle: {
-    id: `${displayName}.tableTitle`,
+  tableBankDetailsTitle: {
+    id: `${displayName}.tableBankDetailsTitle`,
     defaultMessage: 'Bank details',
   },
+  tableCurrencyTitle: {
+    id: `${displayName}.tableCurrencyTitle`,
+    defaultMessage: 'Currency',
+  },
   columnHeadingBankName: {
     id: `${displayName}.columnHeadingBankName`,
     defaultMessage: 'Bank name',
@@ -50,64 +56,80 @@ const BankDetailsDescriptionComponent = ({
 }: BankDetailsDescriptionComponentProps) => {
   return (
     <div className="flex flex-col">
-      <p className="mb-3 text-md">{formatMessage(MSG.componentTitle)}</p>
-      <p className="mb-1 text-sm font-bold">{formatMessage(MSG.tableTitle)}</p>
-      <table className="w-full max-w-[670px] table-fixed">
-        <thead>
-          <tr className="text-left text-xs text-gray-500">
-            <th className="font-thin">
-              {formatMessage(MSG.columnHeadingBankName)}
-            </th>
-            <th className="font-thin">
-              {formatMessage(MSG.columnHeadingAccountNumber)}
-            </th>
-            <th className="font-thin">{formatMessage(MSG.columnHeadingBic)}</th>
-            <th className="font-thin">
-              {formatMessage(MSG.columnHeadingPayoutCurrency)}
-            </th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr>
-            <td>
-              <LoadingSkeleton
-                isLoading={isDataLoading}
-                className={TABLE_TD_LOADER_STYLES}
-              >
-                {bankAccount?.bankName ?? '-'}
-              </LoadingSkeleton>
-            </td>
-            <td>
-              <LoadingSkeleton
-                isLoading={isDataLoading}
-                className={TABLE_TD_LOADER_STYLES}
-              >
-                {bankAccount?.usAccount?.last4 ??
-                  bankAccount?.iban?.last4 ??
-                  '-'}
-              </LoadingSkeleton>
-            </td>
-            <td>
-              <LoadingSkeleton
-                isLoading={isDataLoading}
-                className={TABLE_TD_LOADER_STYLES}
-              >
-                {bankAccount?.usAccount?.routingNumber ??
-                  bankAccount?.iban?.bic ??
-                  '-'}
-              </LoadingSkeleton>
-            </td>
-            <td>
-              <LoadingSkeleton
-                isLoading={isDataLoading}
-                className={TABLE_TD_LOADER_STYLES}
-              >
-                {bankAccount?.currency ?? ''}
-              </LoadingSkeleton>
-            </td>
-          </tr>
-        </tbody>
-      </table>
+      <p className="mb-4 text-md font-medium">
+        {formatMessage(MSG.componentTitle)}
+      </p>
+      <div className="grid w-full min-w-full max-w-[670px] grid-flow-row grid-cols-1 gap-y-1 sm:grid-cols-4 sm:gap-x-4">
+        <div className="order-0 col-span-1 mb-1 text-left text-sm font-semibold sm:order-none sm:col-span-3">
+          {formatMessage(MSG.tableBankDetailsTitle)}
+        </div>
+        <div className="order-8 col-span-1 mb-1 mt-3 text-left text-sm font-semibold sm:order-none sm:mt-0">
+          {formatMessage(MSG.tableCurrencyTitle)}
+        </div>
+
+        <div className="order-1 col-span-1 text-left text-xs font-thin text-gray-500 sm:order-none">
+          {formatMessage(MSG.columnHeadingBankName)}
+        </div>
+
+        <div className="order-4 col-span-1 mt-3 text-left text-xs font-thin text-gray-500 sm:order-none sm:mt-0">
+          {formatMessage(MSG.columnHeadingAccountNumber)}
+        </div>
+
+        <div className="order-6 col-span-1 mt-3 text-left text-xs font-thin text-gray-500 sm:order-none sm:mt-0">
+          {formatMessage(MSG.columnHeadingBic)}
+        </div>
+
+        <div className="order-8 col-span-1 text-left text-xs font-thin text-gray-500 sm:order-none">
+          {formatMessage(MSG.columnHeadingPayoutCurrency)}
+        </div>
+
+        <div className="order-2 text-md font-normal sm:order-none">
+          <LoadingSkeleton
+            isLoading={isDataLoading}
+            className={TABLE_TD_LOADER_STYLES}
+          >
+            {bankAccount?.bankName ?? '-'}
+          </LoadingSkeleton>
+        </div>
+
+        <div className="order-5 text-md font-normal sm:order-none">
+          <LoadingSkeleton
+            isLoading={isDataLoading}
+            className={TABLE_TD_LOADER_STYLES}
+          >
+            {bankAccount?.usAccount?.last4 ?? bankAccount?.iban?.last4 ?? '-'}
+          </LoadingSkeleton>
+        </div>
+
+        <div className="order-7 text-md font-normal sm:order-none">
+          <LoadingSkeleton
+            isLoading={isDataLoading}
+            className={TABLE_TD_LOADER_STYLES}
+          >
+            {bankAccount?.usAccount?.routingNumber ??
+              bankAccount?.iban?.bic ??
+              '-'}
+          </LoadingSkeleton>
+        </div>
+
+        <div className="order-10 text-md font-normal sm:order-none">
+          <LoadingSkeleton
+            isLoading={isDataLoading}
+            className={TABLE_TD_LOADER_STYLES}
+          >
+            {bankAccount?.currency ? (
+              <CurrencyLabel
+                currency={
+                  bankAccount?.currency.toUpperCase() as SupportedCurrencies
+                }
+                labelClassName="font-normal"
+              />
+            ) : (
+              '-'
+            )}
+          </LoadingSkeleton>
+        </div>
+      </div>
     </div>
   );
 };

src/components/frame/v5/pages/UserCryptoToFiatPage/partials/BankDetailsForm/AccountDetailsInputs.tsx

@@ -3,12 +3,16 @@ import { useFormContext } from 'react-hook-form';
 
 import { SupportedCurrencies } from '~gql';
 import { getCountries } from '~utils/countries.ts';
+import { formatText } from '~utils/intl.ts';
 
 import { CURRENCY_VALUES } from '../../constants.ts';
 import { FormInput } from '../FormInput.tsx';
 import { FormRow } from '../FormRow.tsx';
 import { FormSelect } from '../FormSelect.tsx';
 
+import { BANK_DETAILS_FORM_MSG } from './constants.ts';
+import { BankDetailsFields, type BankDetailsFormSchema } from './validation.ts';
+
 const displayName =
   'v5.pages.UserCryptoToFiatPage.partials.BankDetailsForm.AccountDetailsInputs';
 
@@ -28,31 +32,44 @@ const AccountDetailsInputs = () => {
       {currency === CURRENCY_VALUES[SupportedCurrencies.Eur] && (
         <>
           <FormRow>
-            <FormInput name="iban" placeholder="IBAN" />
+            <FormInput<BankDetailsFormSchema>
+              name={BankDetailsFields.IBAN}
+              label={formatText(BANK_DETAILS_FORM_MSG.ibanLabel)}
+              placeholder={formatText(BANK_DETAILS_FORM_MSG.ibanLabel)}
+            />
           </FormRow>
           <FormRow>
-            <FormInput name="swift" placeholder="SWIFT/BIC" />
+            <FormInput<BankDetailsFormSchema>
+              name={BankDetailsFields.SWIFT}
+              label={formatText(BANK_DETAILS_FORM_MSG.swiftLabel)}
+              placeholder={formatText(BANK_DETAILS_FORM_MSG.swiftLabel)}
+            />
           </FormRow>
           <FormRow>
-            <FormSelect name="country" options={countriesOptions} />
+            <FormSelect<BankDetailsFormSchema>
+              name={BankDetailsFields.COUNTRY}
+              options={countriesOptions}
+              labelMessage={formatText(BANK_DETAILS_FORM_MSG.countryLabel)}
+              placeholder={formatText(BANK_DETAILS_FORM_MSG.countryPlaceholder)}
+            />
           </FormRow>
         </>
       )}
 
       {currency === CURRENCY_VALUES[SupportedCurrencies.Usd] && (
         <>
           <FormRow>
-            <FormInput
-              name="accountNumber"
-              label="Account Number"
-              placeholder="Account Number"
+            <FormInput<BankDetailsFormSchema>
+              name={BankDetailsFields.ACCOUNT_NUMBER}
+              label={formatText(BANK_DETAILS_FORM_MSG.accountNumberLabel)}
+              placeholder={formatText(BANK_DETAILS_FORM_MSG.accountNumberLabel)}
             />
           </FormRow>
           <FormRow>
-            <FormInput
-              name="routingNumber"
-              label="Routing Number"
-              placeholder="Routing Number"
+            <FormInput<BankDetailsFormSchema>
+              name={BankDetailsFields.ROUTING_NUMBER}
+              label={formatText(BANK_DETAILS_FORM_MSG.routingNumberLabel)}
+              placeholder={formatText(BANK_DETAILS_FORM_MSG.routingNumberLabel)}
             />
           </FormRow>
         </>