From c7248a970507a0edf477a6645d266208ff279ffb Mon Sep 17 00:00:00 2001
From: Thisyahlen <thisyahlen@regentmarkets.com>
Date: Mon, 26 Feb 2024 17:19:53 +0800
Subject: [PATCH 1/3] chore: modules

---
 .../FormFields/FormDropDownField.tsx          |  8 ++--
 .../components/FormFields/FormInputField.tsx  | 12 +++---
 .../modules/AddressFields/AddressFields.tsx   | 41 ++++---------------
 .../src/modules/IDVForm/idv-form.tsx          |  2 +-
 .../src/modules/Onfido/OnfidoContainer.tsx    | 16 ++++----
 packages/account-v2/tailwind.config.ts        | 21 +++++++++-
 packages/account-v2/tsconfig.json             |  3 +-
 7 files changed, 48 insertions(+), 55 deletions(-)

diff --git a/packages/account-v2/src/components/FormFields/FormDropDownField.tsx b/packages/account-v2/src/components/FormFields/FormDropDownField.tsx
index 0436d9c4a559..e85144600922 100644
--- a/packages/account-v2/src/components/FormFields/FormDropDownField.tsx
+++ b/packages/account-v2/src/components/FormFields/FormDropDownField.tsx
@@ -2,11 +2,11 @@ import React, { ComponentProps } from 'react';
 import { Field, FieldProps } from 'formik';
 import * as Yup from 'yup';
 import { useBreakpoint } from '@deriv/quill-design';
+import { Dropdown } from '@deriv-com/ui';
 import { validateField } from '../../utils/validation';
-import { WalletDropdown as DropDown } from '../base/WalletDropdown';
 
 type FormDropDownFieldProps = Omit<
-    ComponentProps<typeof DropDown>,
+    ComponentProps<typeof Dropdown>,
     'errorMessage' | 'isRequired' | 'onSelect' | 'variant'
 > & {
     name: string;
@@ -26,12 +26,12 @@ const FormDropDownField = ({ name, validationSchema, ...rest }: FormDropDownFiel
     return (
         <Field name={name} validate={validateField(validationSchema)}>
             {({ field, form, meta: { error, touched } }: FieldProps<string>) => (
-                <DropDown
+                <Dropdown
                     {...field}
                     {...rest}
                     errorMessage={error}
                     isRequired={touched && !!error}
-                    onSelect={(value: string) => form.setFieldValue(name, value)}
+                    onSelect={value => form.setFieldValue(name, value)}
                     variant={isMobile ? 'prompt' : 'comboBox'}
                 />
             )}
diff --git a/packages/account-v2/src/components/FormFields/FormInputField.tsx b/packages/account-v2/src/components/FormFields/FormInputField.tsx
index e8c3a373f2f1..2f0deac867a1 100644
--- a/packages/account-v2/src/components/FormFields/FormInputField.tsx
+++ b/packages/account-v2/src/components/FormFields/FormInputField.tsx
@@ -1,10 +1,10 @@
 import React, { ComponentProps } from 'react';
 import { Field, FieldProps } from 'formik';
 import * as Yup from 'yup';
+import { Input } from '@deriv-com/ui';
 import { validateField } from '../../utils/validation';
-import { WalletTextField as TextField } from '../base/WalletTextField';
 
-type FormInputFieldProps = Omit<ComponentProps<typeof TextField>, 'errorMessage' | 'isInvalid' | 'showMessage'> & {
+type FormInputFieldProps = Omit<ComponentProps<typeof Input>, 'errorMessage' | 'isInvalid' | 'showMessage'> & {
     name: string;
     validationSchema?: Yup.AnySchema;
 };
@@ -20,14 +20,12 @@ type FormInputFieldProps = Omit<ComponentProps<typeof TextField>, 'errorMessage'
 const FormInputField = ({ name, validationSchema, ...rest }: FormInputFieldProps) => (
     <Field name={name} validate={validateField(validationSchema)}>
         {({ field, meta: { error, touched } }: FieldProps<string>) => (
-            <TextField
+            <Input
                 {...field}
                 {...rest}
                 autoComplete='off'
-                errorMessage={touched && error}
-                isInvalid={touched && !!error}
-                showMessage
-                type='text'
+                error={Boolean(error && touched)}
+                message={touched && error}
             />
         )}
     </Field>
diff --git a/packages/account-v2/src/modules/AddressFields/AddressFields.tsx b/packages/account-v2/src/modules/AddressFields/AddressFields.tsx
index ea755ac2aca2..1b5547f342b8 100644
--- a/packages/account-v2/src/modules/AddressFields/AddressFields.tsx
+++ b/packages/account-v2/src/modules/AddressFields/AddressFields.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { useAuthorize, useSettings, useStatesList } from '@deriv/api';
+import { LabelPairedChevronDownMdRegularIcon } from '@deriv/quill-icons';
 import FormDropDownField from '../../components/FormFields/FormDropDownField';
 import FormInputField from '../../components/FormFields/FormInputField';
 import { LANDING_COMPANY } from '../../constants/constants';
@@ -14,7 +15,7 @@ export const AddressFields = () => {
 
     const isSvg =
         landingCompanyName === LANDING_COMPANY.SVG || !!upgradableLandingCompanies?.includes(LANDING_COMPANY.SVG);
-    const { data: statesList, isFetched: statesListFetched } = useStatesList(settings.country_code || '', {
+    const { data: statesList, isFetched: statesListFetched } = useStatesList(settings.country_code ?? '', {
         enabled: !!settings.country_code,
     });
 
@@ -27,46 +28,22 @@ export const AddressFields = () => {
     } = addressDetailValidations(settings.country_code ?? '', isSvg);
 
     return (
-        <div className='space-y-600 pt-400'>
-            <FormInputField
-                label='First line of address*'
-                name='addressLine1'
-                placeholder='First line of address'
-                validationSchema={addressLine1Schema}
-            />
-            <FormInputField
-                label='Second line of address'
-                name='addressLine2'
-                placeholder='Second line of address'
-                validationSchema={addressLine2Schema}
-            />
-            <FormInputField
-                label='Town/City*'
-                name='addressCity'
-                placeholder='Town/City'
-                validationSchema={addressCitySchema}
-            />
+        <div className='pt-8 space-y-12'>
+            <FormInputField label='First line of address*' name='addressLine1' validationSchema={addressLine1Schema} />
+            <FormInputField label='Second line of address' name='addressLine2' validationSchema={addressLine2Schema} />
+            <FormInputField label='Town/City*' name='addressCity' validationSchema={addressCitySchema} />
             {statesListFetched && statesList.length ? (
                 <FormDropDownField
+                    dropdownIcon={<LabelPairedChevronDownMdRegularIcon />}
                     label='State/Province'
                     list={statesList}
                     name='addressState'
                     validationSchema={addressStateSchema}
                 />
             ) : (
-                <FormInputField
-                    label='State/Province'
-                    name='addressState'
-                    placeholder='State/Province'
-                    validationSchema={addressStateSchema}
-                />
+                <FormInputField label='State/Province' name='addressState' validationSchema={addressStateSchema} />
             )}
-            <FormInputField
-                label='Postal/ZIP Code'
-                name='addressPostcode'
-                placeholder='Postal/ZIP Code'
-                validationSchema={addressPostcodeSchema}
-            />
+            <FormInputField label='Postal/ZIP Code' name='addressPostcode' validationSchema={addressPostcodeSchema} />
         </div>
     );
 };
diff --git a/packages/account-v2/src/modules/IDVForm/idv-form.tsx b/packages/account-v2/src/modules/IDVForm/idv-form.tsx
index ddf588ac0b83..8b9f7d6697ac 100644
--- a/packages/account-v2/src/modules/IDVForm/idv-form.tsx
+++ b/packages/account-v2/src/modules/IDVForm/idv-form.tsx
@@ -84,7 +84,7 @@ export const IDVForm = ({ allowIDVSkip, selectedCountry }: TIDVFormProps) => {
 
     return (
         <Fragment>
-            <section className='flex flex-col gap-75'>
+            <section className='flex flex-col gap-1'>
                 <Field name='document_type'>
                     {({ field, meta }: FieldProps) => (
                         <WalletDropdown
diff --git a/packages/account-v2/src/modules/Onfido/OnfidoContainer.tsx b/packages/account-v2/src/modules/Onfido/OnfidoContainer.tsx
index a1f320fb7f5b..808d27648085 100644
--- a/packages/account-v2/src/modules/Onfido/OnfidoContainer.tsx
+++ b/packages/account-v2/src/modules/Onfido/OnfidoContainer.tsx
@@ -58,7 +58,7 @@ export const OnfidoContainer = ({
     const hasPersonalDetailsValidationError = ['MissingPersonalDetails', 'InvalidPostalCode'].includes(
         serviceTokenError?.error.code ?? ''
     );
-    const showErrorMessage = onfidoInitializationError?.message || serviceTokenError?.error?.message;
+    const showErrorMessage = onfidoInitializationError?.message ?? serviceTokenError?.error?.message;
 
     if (isServiceTokenLoading) {
         return <Loader />;
@@ -98,16 +98,16 @@ export const OnfidoContainer = ({
     }
 
     return (
-        <div className={qtMerge('flex flex-col items-center gap-800 p-800 lg:p-50')}>
+        <div className={qtMerge('flex flex-col items-center gap-16 p-16 lg:p-0')}>
             <div
-                className={clsx(
-                    '[transition:transform_0.35s_ease,_opacity_0.35s_linear]origin-top opacity-1300 p-800',
-                    { '[display:none]': transitionEnd, 'scale-y-0 opacity-50': isOnfidoEnabled }
-                )}
+                className={clsx('[transition:transform_0.35s_ease,_opacity_0.35s_linear]origin-top opacity-24 p-16', {
+                    '[display:none]': transitionEnd,
+                    'scale-y-0 opacity-50': isOnfidoEnabled,
+                })}
             >
-                {/* TODO: Dummy div here replace with PoiConfirmWithExample */}
+                {/* Do this: Dummy div here replace with PoiConfirmWithExample */}
                 <div
-                    className='border-75 border-solid border-solid-slate-300 rounded-500 w-[200px] sm:w-[638px] h-[384px]'
+                    className='border-1 border-solid border-solid-grey-2 rounded-10 w-[200px] sm:w-[638px] h-[384px]'
                     data-testid='dt_poi-confirm-with-example'
                     onClick={() => setIsOnfidoEnabled(true)}
                     onKeyDown={() => setIsOnfidoEnabled(true)}
diff --git a/packages/account-v2/tailwind.config.ts b/packages/account-v2/tailwind.config.ts
index ee3078c5bbae..f34270466daf 100644
--- a/packages/account-v2/tailwind.config.ts
+++ b/packages/account-v2/tailwind.config.ts
@@ -1,9 +1,7 @@
 import type { Config } from 'tailwindcss';
-import QuillTailwindConfig from '@deriv/quill-design/quill-tailwind/tailwind.config.cjs';
 
 export default {
     content: ['./src/**/*.{js,jsx,ts,tsx}'],
-    presets: [QuillTailwindConfig],
     theme: {
         extend: {
             borderRadius: {
@@ -113,6 +111,25 @@ export default {
                 lg: { min: '1280px' },
                 xl: { min: '1440px' },
             },
+            opacity: {
+                0: '0',
+                4: '0.04',
+                8: '0.08',
+                16: '0.16',
+                24: '0.24',
+                32: '0.32',
+                40: '0.4',
+                48: '0.48',
+                56: '0.56',
+                64: '0.64',
+                72: '0.72',
+                80: '0.8',
+                88: '0.88',
+                96: '0.96',
+                100: '1',
+                overlay: '0.72',
+                disabled: ' 0.32',
+            },
             spacing: {
                 0: '0px',
                 1: '1px',
diff --git a/packages/account-v2/tsconfig.json b/packages/account-v2/tsconfig.json
index ebc77fbf9761..a1a265d446ee 100644
--- a/packages/account-v2/tsconfig.json
+++ b/packages/account-v2/tsconfig.json
@@ -4,7 +4,8 @@
         "outDir": "./dist",
         "baseUrl": "./",
         "paths": {
-            "@deriv/*": ["../*/src"]
+            "@deriv/*": ["../*/src"],
+            "@/*": ["src/*"]
         }
     },
     "include": ["src", "../../types/utils.d.ts"],

From 603477298e622947d4d0cd208b874abebdfd3398 Mon Sep 17 00:00:00 2001
From: Thisyahlen <thisyahlen@regentmarkets.com>
Date: Tue, 27 Feb 2024 09:40:34 +0800
Subject: [PATCH 2/3] chore: remaining style fix

---
 .../src/modules/Onfido/OnfidoContainer.tsx       | 16 ++++++++--------
 .../src/modules/POAForm/POAFormContainer.tsx     |  4 ++--
 packages/account-v2/tailwind.config.ts           | 10 ++++++++++
 3 files changed, 20 insertions(+), 10 deletions(-)

diff --git a/packages/account-v2/src/modules/Onfido/OnfidoContainer.tsx b/packages/account-v2/src/modules/Onfido/OnfidoContainer.tsx
index 808d27648085..3e058a98818d 100644
--- a/packages/account-v2/src/modules/Onfido/OnfidoContainer.tsx
+++ b/packages/account-v2/src/modules/Onfido/OnfidoContainer.tsx
@@ -1,8 +1,7 @@
 import React, { useEffect, useState } from 'react';
-import clsx from 'clsx';
 import { useHistory } from 'react-router-dom';
+import { twMerge } from 'tailwind-merge';
 import { useOnfido } from '@deriv/api';
-import { qtMerge } from '@deriv/quill-design';
 import { Button, Loader, Text } from '@deriv-com/ui';
 import IcAccountMissingDetails from '../../assets/proof-of-identity/ic-account-missing-details.svg';
 import { ErrorMessage } from '../../components/ErrorMessage';
@@ -98,16 +97,17 @@ export const OnfidoContainer = ({
     }
 
     return (
-        <div className={qtMerge('flex flex-col items-center gap-16 p-16 lg:p-0')}>
+        <div className={twMerge('flex flex-col items-center gap-16 p-16 lg:p-0')}>
             <div
-                className={clsx('[transition:transform_0.35s_ease,_opacity_0.35s_linear]origin-top opacity-24 p-16', {
-                    '[display:none]': transitionEnd,
-                    'scale-y-0 opacity-50': isOnfidoEnabled,
-                })}
+                className={twMerge(
+                    '[transition:transform_0.35s_ease,_opacity_0.35s_linear]origin-top opacity-24 p-16',
+                    transitionEnd && 'd-none',
+                    isOnfidoEnabled && 'scale-y-0 opacity-50'
+                )}
             >
                 {/* Do this: Dummy div here replace with PoiConfirmWithExample */}
                 <div
-                    className='border-1 border-solid border-solid-grey-2 rounded-10 w-[200px] sm:w-[638px] h-[384px]'
+                    className='border-1 border-solid border-solid-grey-2 rounded-lg w-[200px] sm:w-[638px] h-[384px]'
                     data-testid='dt_poi-confirm-with-example'
                     onClick={() => setIsOnfidoEnabled(true)}
                     onKeyDown={() => setIsOnfidoEnabled(true)}
diff --git a/packages/account-v2/src/modules/POAForm/POAFormContainer.tsx b/packages/account-v2/src/modules/POAForm/POAFormContainer.tsx
index 5feacdf64b29..62bd48f43f53 100644
--- a/packages/account-v2/src/modules/POAForm/POAFormContainer.tsx
+++ b/packages/account-v2/src/modules/POAForm/POAFormContainer.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { useHistory } from 'react-router-dom';
-import { useActiveAccount } from '@deriv/api';
+import { useActiveTradingAccount } from '@deriv/api';
 import { Button, Loader, Text } from '@deriv-com/ui';
 import IcPOAError from '../../assets/verification-status/ic-poa-error.svg';
 import IcPOAUpload from '../../assets/verification-status/ic-poa-upload.svg';
@@ -14,7 +14,7 @@ import { usePOAInfo } from '../../hooks/usePOAInfo';
 import { isNavigationFromDerivGO, isNavigationFromP2P } from '../../utils/platform';
 
 export const POAFormContainer = () => {
-    const { data: activeAccount } = useActiveAccount();
+    const { data: activeAccount } = useActiveTradingAccount();
     const { data: poaInfo, isLoading } = usePOAInfo();
     const [resubmitting, setResubmitting] = useState(false);
     const history = useHistory();
diff --git a/packages/account-v2/tailwind.config.ts b/packages/account-v2/tailwind.config.ts
index f34270466daf..58bdbb378996 100644
--- a/packages/account-v2/tailwind.config.ts
+++ b/packages/account-v2/tailwind.config.ts
@@ -1,7 +1,17 @@
 import type { Config } from 'tailwindcss';
+const plugin = require('tailwindcss/plugin');
 
 export default {
     content: ['./src/**/*.{js,jsx,ts,tsx}'],
+    plugins: [
+        plugin(({ addUtilities }) => {
+            addUtilities({
+                '.d-none': {
+                    display: 'none',
+                },
+            });
+        }),
+    ],
     theme: {
         extend: {
             borderRadius: {

From eed8c4205b703f14f1b880f721071a5967ea8779 Mon Sep 17 00:00:00 2001
From: Thisyahlen <thisyahlen@regentmarkets.com>
Date: Tue, 27 Feb 2024 14:27:40 +0800
Subject: [PATCH 3/3] chore: komen v3

---
 .../src/components/FormFields/FormDropDownField.tsx      | 4 +++-
 .../src/modules/AddressFields/AddressFields.tsx          | 2 --
 .../account-v2/src/modules/Onfido/OnfidoContainer.tsx    | 2 +-
 packages/account-v2/tailwind.config.ts                   | 9 ---------
 packages/account-v2/tsconfig.json                        | 3 +--
 5 files changed, 5 insertions(+), 15 deletions(-)

diff --git a/packages/account-v2/src/components/FormFields/FormDropDownField.tsx b/packages/account-v2/src/components/FormFields/FormDropDownField.tsx
index e85144600922..c1b5162c8d24 100644
--- a/packages/account-v2/src/components/FormFields/FormDropDownField.tsx
+++ b/packages/account-v2/src/components/FormFields/FormDropDownField.tsx
@@ -2,12 +2,13 @@ import React, { ComponentProps } from 'react';
 import { Field, FieldProps } from 'formik';
 import * as Yup from 'yup';
 import { useBreakpoint } from '@deriv/quill-design';
+import { LabelPairedChevronDownMdRegularIcon } from '@deriv/quill-icons';
 import { Dropdown } from '@deriv-com/ui';
 import { validateField } from '../../utils/validation';
 
 type FormDropDownFieldProps = Omit<
     ComponentProps<typeof Dropdown>,
-    'errorMessage' | 'isRequired' | 'onSelect' | 'variant'
+    'dropdownIcon' | 'errorMessage' | 'isRequired' | 'onSelect' | 'variant'
 > & {
     name: string;
     validationSchema?: Yup.AnySchema;
@@ -29,6 +30,7 @@ const FormDropDownField = ({ name, validationSchema, ...rest }: FormDropDownFiel
                 <Dropdown
                     {...field}
                     {...rest}
+                    dropdownIcon={<LabelPairedChevronDownMdRegularIcon />}
                     errorMessage={error}
                     isRequired={touched && !!error}
                     onSelect={value => form.setFieldValue(name, value)}
diff --git a/packages/account-v2/src/modules/AddressFields/AddressFields.tsx b/packages/account-v2/src/modules/AddressFields/AddressFields.tsx
index 1b5547f342b8..50a76e5a0593 100644
--- a/packages/account-v2/src/modules/AddressFields/AddressFields.tsx
+++ b/packages/account-v2/src/modules/AddressFields/AddressFields.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import { useAuthorize, useSettings, useStatesList } from '@deriv/api';
-import { LabelPairedChevronDownMdRegularIcon } from '@deriv/quill-icons';
 import FormDropDownField from '../../components/FormFields/FormDropDownField';
 import FormInputField from '../../components/FormFields/FormInputField';
 import { LANDING_COMPANY } from '../../constants/constants';
@@ -34,7 +33,6 @@ export const AddressFields = () => {
             <FormInputField label='Town/City*' name='addressCity' validationSchema={addressCitySchema} />
             {statesListFetched && statesList.length ? (
                 <FormDropDownField
-                    dropdownIcon={<LabelPairedChevronDownMdRegularIcon />}
                     label='State/Province'
                     list={statesList}
                     name='addressState'
diff --git a/packages/account-v2/src/modules/Onfido/OnfidoContainer.tsx b/packages/account-v2/src/modules/Onfido/OnfidoContainer.tsx
index 3e058a98818d..d3f903c2c51f 100644
--- a/packages/account-v2/src/modules/Onfido/OnfidoContainer.tsx
+++ b/packages/account-v2/src/modules/Onfido/OnfidoContainer.tsx
@@ -101,7 +101,7 @@ export const OnfidoContainer = ({
             <div
                 className={twMerge(
                     '[transition:transform_0.35s_ease,_opacity_0.35s_linear]origin-top opacity-24 p-16',
-                    transitionEnd && 'd-none',
+                    transitionEnd && 'hidden',
                     isOnfidoEnabled && 'scale-y-0 opacity-50'
                 )}
             >
diff --git a/packages/account-v2/tailwind.config.ts b/packages/account-v2/tailwind.config.ts
index 58bdbb378996..eb17be74abca 100644
--- a/packages/account-v2/tailwind.config.ts
+++ b/packages/account-v2/tailwind.config.ts
@@ -3,15 +3,6 @@ const plugin = require('tailwindcss/plugin');
 
 export default {
     content: ['./src/**/*.{js,jsx,ts,tsx}'],
-    plugins: [
-        plugin(({ addUtilities }) => {
-            addUtilities({
-                '.d-none': {
-                    display: 'none',
-                },
-            });
-        }),
-    ],
     theme: {
         extend: {
             borderRadius: {
diff --git a/packages/account-v2/tsconfig.json b/packages/account-v2/tsconfig.json
index a1a265d446ee..ebc77fbf9761 100644
--- a/packages/account-v2/tsconfig.json
+++ b/packages/account-v2/tsconfig.json
@@ -4,8 +4,7 @@
         "outDir": "./dist",
         "baseUrl": "./",
         "paths": {
-            "@deriv/*": ["../*/src"],
-            "@/*": ["src/*"]
+            "@deriv/*": ["../*/src"]
         }
     },
     "include": ["src", "../../types/utils.d.ts"],