From d7c0b32e51485e93fc26e966a92a36b4ffe9e9e1 Mon Sep 17 00:00:00 2001
From: Agrim Jain <agrim@regentmarkets.com>
Date: Mon, 16 Sep 2024 12:06:54 +0400
Subject: [PATCH 1/7] fix: ios issue, ui fix, Ok button

---
 .../Dialogs/TokenCreationDialogSuccess/index.tsx      |  2 +-
 .../TokenNameRestrictions.module.scss                 |  3 ++-
 .../dashboard/components/TokenRegister/index.tsx      | 11 -----------
 .../components/TokenRegister/token-register.scss      |  5 +++--
 src/styles/index.scss                                 |  1 +
 5 files changed, 7 insertions(+), 15 deletions(-)

diff --git a/src/features/dashboard/components/Dialogs/TokenCreationDialogSuccess/index.tsx b/src/features/dashboard/components/Dialogs/TokenCreationDialogSuccess/index.tsx
index 457e059fd..b4fe1c045 100644
--- a/src/features/dashboard/components/Dialogs/TokenCreationDialogSuccess/index.tsx
+++ b/src/features/dashboard/components/Dialogs/TokenCreationDialogSuccess/index.tsx
@@ -43,7 +43,7 @@ export const TokenCreationDialogSuccess = ({
       showHandleBar
       disableCloseOnOverlay
       isMobile={deviceType !== 'desktop'}
-      primaryButtonLabel='Ok'
+      primaryButtonLabel='OK'
       primaryButtonCallback={handleToggle}
     >
       <div
diff --git a/src/features/dashboard/components/TokenNameRestrictions/TokenNameRestrictions.module.scss b/src/features/dashboard/components/TokenNameRestrictions/TokenNameRestrictions.module.scss
index 16d134fcb..468938bae 100644
--- a/src/features/dashboard/components/TokenNameRestrictions/TokenNameRestrictions.module.scss
+++ b/src/features/dashboard/components/TokenNameRestrictions/TokenNameRestrictions.module.scss
@@ -8,6 +8,7 @@
   font-weight: 400;
   line-height: 18px;
   padding-left: rem(2.8);
-  margin-top: rem(1);
+  margin-bottom: rem(2.4);
+  margin-top: rem(0.8);
   color: var(--colors-greyLight600);
 }
diff --git a/src/features/dashboard/components/TokenRegister/index.tsx b/src/features/dashboard/components/TokenRegister/index.tsx
index 29e73bdf3..e90e4f51b 100644
--- a/src/features/dashboard/components/TokenRegister/index.tsx
+++ b/src/features/dashboard/components/TokenRegister/index.tsx
@@ -112,14 +112,6 @@ const TokenRegister = (props: HTMLAttributes<HTMLFormElement>) => {
     [createToken, reset],
   );
 
-  const onCardClick = useCallback(
-    (name: TApiTokenFormItemsNames) => {
-      const values = getValues();
-      setValue(name, !values[name]);
-    },
-    [getValues, setValue],
-  );
-
   useEffect(() => {
     errors.name?.message ? setHideRestrictions(true) : setHideRestrictions(false);
   }, [errors.name?.message]);
@@ -148,9 +140,6 @@ const TokenRegister = (props: HTMLAttributes<HTMLFormElement>) => {
                 name={item.name}
                 label={item.label}
                 description={item.description}
-                onClick={() => {
-                  onCardClick(item.name);
-                }}
                 register={register}
               />
             ))}
diff --git a/src/features/dashboard/components/TokenRegister/token-register.scss b/src/features/dashboard/components/TokenRegister/token-register.scss
index d348fe628..eb1f85d8d 100644
--- a/src/features/dashboard/components/TokenRegister/token-register.scss
+++ b/src/features/dashboard/components/TokenRegister/token-register.scss
@@ -19,7 +19,6 @@
   .formContent {
     @extend .align-center;
     padding: 0 16px;
-    gap: 24px;
     width: 100%;
     max-width: 608px;
   }
@@ -33,6 +32,7 @@
 
   .token_register__heading {
     text-align: center;
+    margin-bottom: 1.5rem;
   }
 
   .token_register__account__switcher {
@@ -45,6 +45,7 @@
     gap: 16px;
     width: 100%;
     z-index: 10;
+    margin-bottom: 1.5rem;
   }
   .token_register__scopes,
   .token_register__name {
@@ -100,7 +101,7 @@
     display: grid;
     grid-template-columns: 0.5fr 0.5fr;
     grid-gap: 1.6rem;
-    margin-bottom: 2rem;
+    margin: 1.5rem 0;
     @media screen and (max-width: 765px) {
       grid-template-columns: 1fr;
     }
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 78b9c14da..6cc99021a 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -114,6 +114,7 @@ h4 {
   margin-left: rem(1.5);
   font-size: var(--fontSizes-2xs) !important;
   display: inline-block;
+  align-self: flex-start;
 }
 
 .error-border {

From e8978a74329236bcb49f7b20f06532fc13bb67d7 Mon Sep 17 00:00:00 2001
From: Agrim Jain <agrim@regentmarkets.com>
Date: Mon, 16 Sep 2024 12:10:44 +0400
Subject: [PATCH 2/7] fix: vercel fail


From 239a0c5472121285d56688a8fd0e74735df61522 Mon Sep 17 00:00:00 2001
From: Agrim Jain <agrim@regentmarkets.com>
Date: Mon, 16 Sep 2024 14:41:40 +0400
Subject: [PATCH 3/7] fix: testing purpose only

---
 src/components/CustomCheckbox/index.tsx          | 16 +++-------------
 .../dashboard/components/ApiTokenCard/index.tsx  | 13 +++++--------
 2 files changed, 8 insertions(+), 21 deletions(-)

diff --git a/src/components/CustomCheckbox/index.tsx b/src/components/CustomCheckbox/index.tsx
index fc71f1d0e..bd2abae8c 100644
--- a/src/components/CustomCheckbox/index.tsx
+++ b/src/components/CustomCheckbox/index.tsx
@@ -5,26 +5,16 @@ import styles from './custom_checkbox.module.scss';
 type TCustomCheckbox = {
   name: string;
   id: string;
-  register: UseFormRegisterReturn & {
-    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
-  };
+  register: UseFormRegisterReturn;
   children: ReactElement;
-  checked?: boolean;
   onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
 };
 
-const CustomCheckbox = ({ name, id, register, children, onChange, checked }: TCustomCheckbox) => {
+const CustomCheckbox = ({ name, id, register, children, onChange }: TCustomCheckbox) => {
   return (
     <div className={styles.customCheckboxContainer} data-testid={`custom-checkbox-${name}`}>
       <div className={styles.checkboxContainer}>
-        <input
-          name={name}
-          id={id}
-          type='checkbox'
-          {...register}
-          checked={checked}
-          onChange={onChange}
-        />
+        <input name={name} id={id} type='checkbox' {...register} onChangeCapture={onChange} />
         <span className={styles.customCheckbox} />
       </div>
       {children}
diff --git a/src/features/dashboard/components/ApiTokenCard/index.tsx b/src/features/dashboard/components/ApiTokenCard/index.tsx
index ed81a15e6..fa90ec387 100644
--- a/src/features/dashboard/components/ApiTokenCard/index.tsx
+++ b/src/features/dashboard/components/ApiTokenCard/index.tsx
@@ -15,7 +15,7 @@ interface IApiTokenCardProps {
   description: string;
 }
 
-const ApiTokenCard = ({ register, name, label, description }: IApiTokenCardProps) => {
+const ApiTokenCard = ({ register, name, label, description, ...rest }: IApiTokenCardProps) => {
   const [isAdminChecked, setIsAdminChecked] = useState(false);
   const [isAdminPopupVisible, setIsAdminPopupVisible] = useState(false);
   const { deviceType } = useDeviceType();
@@ -23,8 +23,8 @@ const ApiTokenCard = ({ register, name, label, description }: IApiTokenCardProps
   const handleAdminScopeChange = (e?: React.ChangeEvent<HTMLInputElement>, chk?: boolean) => {
     if (e) {
       const isChecked = e.target.checked;
-      setIsAdminChecked(isChecked);
-      setIsAdminPopupVisible(isChecked);
+      setIsAdminChecked(true);
+      setIsAdminPopupVisible(true);
     } else if (chk) {
       setIsAdminPopupVisible(false);
       setIsAdminChecked(true);
@@ -73,14 +73,11 @@ const ApiTokenCard = ({ register, name, label, description }: IApiTokenCardProps
   }, [name, isAdminPopupVisible, deviceType]);
 
   return (
-    <div className={clsx(styles.api_token_card)}>
+    <div className={clsx(styles.api_token_card)} {...rest}>
       <CustomCheckbox
         name={name}
         id={`${name}-scope`}
-        checked={isAdminChecked}
-        register={{
-          ...register(name),
-        }}
+        register={register(name)}
         onChange={handleAdminScopeChange}
       >
         <label data-testid={`card-label-${name}`} htmlFor={`${name}-scope`}>

From 67e44a57cc3d2706a2e54d84ae5375ae607a35b8 Mon Sep 17 00:00:00 2001
From: Agrim Jain <agrim@regentmarkets.com>
Date: Tue, 17 Sep 2024 10:00:31 +0400
Subject: [PATCH 4/7] fix: bugs

---
 src/components/AccountSwitcher/index.tsx      |  1 -
 src/components/CustomCheckbox/index.tsx       | 12 +++++++--
 .../components/ApiTokenCard/index.tsx         | 27 ++++++++++++-------
 .../components/ApiTokenTable/index.tsx        |  7 ++---
 4 files changed, 32 insertions(+), 15 deletions(-)

diff --git a/src/components/AccountSwitcher/index.tsx b/src/components/AccountSwitcher/index.tsx
index 100247741..03fb7735c 100644
--- a/src/components/AccountSwitcher/index.tsx
+++ b/src/components/AccountSwitcher/index.tsx
@@ -3,7 +3,6 @@ import { isNotDemoCurrency } from '@site/src/utils';
 import useAuthContext from '@site/src/hooks/useAuthContext';
 import useOnClickOutside from '@site/src/hooks/useOnClickOutside';
 import CurrencyIcon from '../CurrencyIcon';
-import AccountDropdown from '../CustomSelectDropdown/account-dropdown/AccountDropdown';
 import styles from './account_switcher.module.scss';
 import { InputDropdown } from '@deriv-com/quill-ui';
 import useAccountSelector from '@site/src/hooks/useAccountSelector';
diff --git a/src/components/CustomCheckbox/index.tsx b/src/components/CustomCheckbox/index.tsx
index bd2abae8c..8e3aad7ff 100644
--- a/src/components/CustomCheckbox/index.tsx
+++ b/src/components/CustomCheckbox/index.tsx
@@ -8,13 +8,21 @@ type TCustomCheckbox = {
   register: UseFormRegisterReturn;
   children: ReactElement;
   onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  checked?: boolean;
 };
 
-const CustomCheckbox = ({ name, id, register, children, onChange }: TCustomCheckbox) => {
+const CustomCheckbox = ({ name, id, register, children, onChange, checked }: TCustomCheckbox) => {
   return (
     <div className={styles.customCheckboxContainer} data-testid={`custom-checkbox-${name}`}>
       <div className={styles.checkboxContainer}>
-        <input name={name} id={id} type='checkbox' {...register} onChangeCapture={onChange} />
+        <input
+          name={name}
+          id={id}
+          type='checkbox'
+          {...register}
+          onChangeCapture={onChange}
+          checked={checked}
+        />
         <span className={styles.customCheckbox} />
       </div>
       {children}
diff --git a/src/features/dashboard/components/ApiTokenCard/index.tsx b/src/features/dashboard/components/ApiTokenCard/index.tsx
index fa90ec387..d64b22435 100644
--- a/src/features/dashboard/components/ApiTokenCard/index.tsx
+++ b/src/features/dashboard/components/ApiTokenCard/index.tsx
@@ -20,20 +20,28 @@ const ApiTokenCard = ({ register, name, label, description, ...rest }: IApiToken
   const [isAdminPopupVisible, setIsAdminPopupVisible] = useState(false);
   const { deviceType } = useDeviceType();
 
-  const handleAdminScopeChange = (e?: React.ChangeEvent<HTMLInputElement>, chk?: boolean) => {
-    if (e) {
-      const isChecked = e.target.checked;
+  const handleAdminScopeChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const isChecked = e.target.checked;
+
+    if (isChecked) {
       setIsAdminChecked(true);
       setIsAdminPopupVisible(true);
-    } else if (chk) {
-      setIsAdminPopupVisible(false);
-      setIsAdminChecked(true);
     } else {
-      setIsAdminPopupVisible(false);
+      setIsAdminChecked(false);
       setIsAdminChecked(false);
     }
   };
 
+  const handleModalPrimaryButton = () => {
+    setIsAdminChecked(true);
+    setIsAdminPopupVisible(false);
+  };
+
+  const handleModalSecondaryButton = () => {
+    setIsAdminChecked(false);
+    setIsAdminPopupVisible(false);
+  };
+
   const adminSection = useMemo(() => {
     if (name !== 'admin') return null;
     return (
@@ -48,8 +56,8 @@ const ApiTokenCard = ({ register, name, label, description, ...rest }: IApiToken
           isOpened={isAdminPopupVisible}
           primaryButtonLabel='Enable admin access'
           secondaryButtonLabel='Cancel'
-          primaryButtonCallback={() => handleAdminScopeChange(undefined, true)}
-          secondaryButtonCallback={() => handleAdminScopeChange(undefined, false)}
+          primaryButtonCallback={handleModalPrimaryButton}
+          secondaryButtonCallback={handleModalSecondaryButton}
           isMobile={deviceType !== 'desktop'}
           showSecondaryButton
           shouldCloseOnSecondaryButtonClick
@@ -78,6 +86,7 @@ const ApiTokenCard = ({ register, name, label, description, ...rest }: IApiToken
         name={name}
         id={`${name}-scope`}
         register={register(name)}
+        checked={isAdminChecked}
         onChange={handleAdminScopeChange}
       >
         <label data-testid={`card-label-${name}`} htmlFor={`${name}-scope`}>
diff --git a/src/features/dashboard/components/ApiTokenTable/index.tsx b/src/features/dashboard/components/ApiTokenTable/index.tsx
index 1e1c1a207..0a00b7749 100644
--- a/src/features/dashboard/components/ApiTokenTable/index.tsx
+++ b/src/features/dashboard/components/ApiTokenTable/index.tsx
@@ -1,4 +1,4 @@
-import React, { HTMLAttributes } from 'react';
+import React, { HTMLAttributes, useState, useEffect } from 'react';
 import { Column } from 'react-table';
 import { Button, Heading, Text } from '@deriv-com/quill-ui';
 import { LabelPairedCirclePlusMdRegularIcon } from '@deriv/quill-icons';
@@ -51,11 +51,13 @@ const tableColumns: TTokenColumn[] = [
     Cell: ({ row }) => <TokenActionsCell tokenId={row.original.token} flex_end />,
   },
 ];
+
 const ApiTokenTable = (props: HTMLAttributes<HTMLDivElement>) => {
   const { tokens, isLoadingTokens } = useApiToken();
   const { deviceType } = useDeviceType();
   const is_desktop = deviceType === 'desktop';
   const { updateCurrentTab } = useAppManager();
+  const [isSwitchingAccount, setIsSwitchingAccount] = useState(false);
 
   const renderTable = () => {
     return is_desktop ? (
@@ -94,8 +96,7 @@ const ApiTokenTable = (props: HTMLAttributes<HTMLDivElement>) => {
         </div>
       </div>
 
-      {tokens?.length ? renderTable() : null}
-      {isLoadingTokens && <Spinner />}
+      {isSwitchingAccount || isLoadingTokens ? <Spinner /> : tokens?.length ? renderTable() : null}
     </div>
   );
 };

From 0e2f69b003c1b9ff8516edf5ad3649e737f2f514 Mon Sep 17 00:00:00 2001
From: Agrim Jain <agrim@regentmarkets.com>
Date: Tue, 17 Sep 2024 10:30:29 +0400
Subject: [PATCH 5/7] fix: isLoadingTokens from useApiToken

---
 src/features/dashboard/components/ApiTokenTable/index.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/features/dashboard/components/ApiTokenTable/index.tsx b/src/features/dashboard/components/ApiTokenTable/index.tsx
index 0a00b7749..dab2e4ec0 100644
--- a/src/features/dashboard/components/ApiTokenTable/index.tsx
+++ b/src/features/dashboard/components/ApiTokenTable/index.tsx
@@ -57,7 +57,6 @@ const ApiTokenTable = (props: HTMLAttributes<HTMLDivElement>) => {
   const { deviceType } = useDeviceType();
   const is_desktop = deviceType === 'desktop';
   const { updateCurrentTab } = useAppManager();
-  const [isSwitchingAccount, setIsSwitchingAccount] = useState(false);
 
   const renderTable = () => {
     return is_desktop ? (
@@ -96,7 +95,7 @@ const ApiTokenTable = (props: HTMLAttributes<HTMLDivElement>) => {
         </div>
       </div>
 
-      {isSwitchingAccount || isLoadingTokens ? <Spinner /> : tokens?.length ? renderTable() : null}
+      {isLoadingTokens ? <Spinner /> : tokens?.length ? renderTable() : null}
     </div>
   );
 };

From 4e6c9d386607abfeb1dfa0af42526b6300049ac0 Mon Sep 17 00:00:00 2001
From: Agrim Jain <agrim@regentmarkets.com>
Date: Tue, 24 Sep 2024 13:26:39 +0400
Subject: [PATCH 6/7] fix: loading time

---
 src/components/AccountSwitcher/index.tsx      | 19 ++++++++++++++++---
 .../components/ApiTokenTable/index.tsx        | 18 ++++++++++++++++--
 2 files changed, 32 insertions(+), 5 deletions(-)

diff --git a/src/components/AccountSwitcher/index.tsx b/src/components/AccountSwitcher/index.tsx
index 03fb7735c..bf3a3452b 100644
--- a/src/components/AccountSwitcher/index.tsx
+++ b/src/components/AccountSwitcher/index.tsx
@@ -1,3 +1,4 @@
+// AccountSwitcher.tsx
 import React, { useState, useRef } from 'react';
 import { isNotDemoCurrency } from '@site/src/utils';
 import useAuthContext from '@site/src/hooks/useAuthContext';
@@ -7,7 +8,11 @@ import styles from './account_switcher.module.scss';
 import { InputDropdown } from '@deriv-com/quill-ui';
 import useAccountSelector from '@site/src/hooks/useAccountSelector';
 
-const AccountSwitcher = () => {
+interface AccountSwitcherProps {
+  onChange: (accountName: string) => void;
+}
+
+const AccountSwitcher = ({ onChange }: AccountSwitcherProps) => {
   const { onSelectAccount } = useAccountSelector();
   const [isToggleDropdown, setToggleDropdown] = useState(false);
   const { loginAccounts, currentLoginAccount } = useAuthContext();
@@ -16,7 +21,12 @@ const AccountSwitcher = () => {
 
   const options = loginAccounts.map((accountItem) => ({
     text: (
-      <div className={styles.customSelectItem} onClick={() => onSelectAccount(accountItem.name)}>
+      <div
+        className={styles.customSelectItem}
+        onClick={() => {
+          onSelectAccount(accountItem.name);
+        }}
+      >
         <CurrencyIcon currency={isNotDemoCurrency(accountItem)} />
         <div className={styles.accountInfoContainer}>
           <div className={styles.accountType}>{accountItem.name}</div>
@@ -35,7 +45,10 @@ const AccountSwitcher = () => {
         placeholder={currentLoginAccount.name}
         variant='outline'
         className={`${isToggleDropdown ? styles.active : styles.inactive}`}
-        onSelectOption={() => setToggleDropdown((prev) => !prev)}
+        onSelectOption={() => {
+          onChange?.(currentLoginAccount.name);
+          setToggleDropdown((prev) => !prev);
+        }}
       />
     </div>
   );
diff --git a/src/features/dashboard/components/ApiTokenTable/index.tsx b/src/features/dashboard/components/ApiTokenTable/index.tsx
index dab2e4ec0..de8c9c24f 100644
--- a/src/features/dashboard/components/ApiTokenTable/index.tsx
+++ b/src/features/dashboard/components/ApiTokenTable/index.tsx
@@ -57,6 +57,14 @@ const ApiTokenTable = (props: HTMLAttributes<HTMLDivElement>) => {
   const { deviceType } = useDeviceType();
   const is_desktop = deviceType === 'desktop';
   const { updateCurrentTab } = useAppManager();
+  const [loading, setLoading] = useState(false);
+
+  const handleChangeAccount = (accountName: string) => {
+    setLoading(true);
+    setTimeout(() => {
+      setLoading(false);
+    }, 2000);
+  };
 
   const renderTable = () => {
     return is_desktop ? (
@@ -91,11 +99,17 @@ const ApiTokenTable = (props: HTMLAttributes<HTMLDivElement>) => {
           </Button>
         </div>
         <div className={styles.account_switcher}>
-          <AccountSwitcher />
+          <AccountSwitcher onChange={handleChangeAccount} />
         </div>
       </div>
 
-      {isLoadingTokens ? <Spinner /> : tokens?.length ? renderTable() : null}
+      {loading ? (
+        <Spinner />
+      ) : isLoadingTokens ? (
+        <Spinner />
+      ) : tokens?.length ? (
+        renderTable()
+      ) : null}
     </div>
   );
 };

From e1a9534f0c97483e53604ef800a4b272002febaa Mon Sep 17 00:00:00 2001
From: Agrim Jain <agrim@regentmarkets.com>
Date: Tue, 24 Sep 2024 16:17:12 +0400
Subject: [PATCH 7/7] fix: latest fixes

---
 src/components/AccountSwitcher/index.tsx                  | 3 +--
 src/features/dashboard/components/ApiTokenTable/index.tsx | 4 ++--
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/components/AccountSwitcher/index.tsx b/src/components/AccountSwitcher/index.tsx
index bf3a3452b..739528e85 100644
--- a/src/components/AccountSwitcher/index.tsx
+++ b/src/components/AccountSwitcher/index.tsx
@@ -1,5 +1,4 @@
-// AccountSwitcher.tsx
-import React, { useState, useRef } from 'react';
+import React, { useState, useRef, useEffect } from 'react';
 import { isNotDemoCurrency } from '@site/src/utils';
 import useAuthContext from '@site/src/hooks/useAuthContext';
 import useOnClickOutside from '@site/src/hooks/useOnClickOutside';
diff --git a/src/features/dashboard/components/ApiTokenTable/index.tsx b/src/features/dashboard/components/ApiTokenTable/index.tsx
index de8c9c24f..cdff939ea 100644
--- a/src/features/dashboard/components/ApiTokenTable/index.tsx
+++ b/src/features/dashboard/components/ApiTokenTable/index.tsx
@@ -59,7 +59,7 @@ const ApiTokenTable = (props: HTMLAttributes<HTMLDivElement>) => {
   const { updateCurrentTab } = useAppManager();
   const [loading, setLoading] = useState(false);
 
-  const handleChangeAccount = (accountName: string) => {
+  const handleChange = (accountName: string) => {
     setLoading(true);
     setTimeout(() => {
       setLoading(false);
@@ -99,7 +99,7 @@ const ApiTokenTable = (props: HTMLAttributes<HTMLDivElement>) => {
           </Button>
         </div>
         <div className={styles.account_switcher}>
-          <AccountSwitcher onChange={handleChangeAccount} />
+          <AccountSwitcher onChange={handleChange} />
         </div>
       </div>