Merge pull request #126 from agrim-deriv/Agrim/GeneratingTokens-Bugs

fix: ios issue, ui fix, Ok button
deriv-com · Sep 26, 2024 · a46ca48 · a46ca48
2 parents d3b8f01 + e1af1bc
commit a46ca48
Show file tree

Hide file tree

Showing 9 changed files with 64 additions and 42 deletions.
diff --git a/src/components/AccountSwitcher/index.tsx b/src/components/AccountSwitcher/index.tsx
@@ -7,7 +7,11 @@ import useAccountSelector from '@site/src/hooks/useAccountSelector';
 import CurrencyIcon from '../CurrencyIcon';
 import styles from './account_switcher.module.scss';
 
-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 +20,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 +44,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/components/CustomCheckbox/index.tsx b/src/components/CustomCheckbox/index.tsx
@@ -5,12 +5,10 @@ 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;
+  checked?: boolean;
 };
 
 const CustomCheckbox = ({ name, id, register, children, onChange, checked }: TCustomCheckbox) => {
@@ -22,8 +20,8 @@ const CustomCheckbox = ({ name, id, register, children, onChange, checked }: TCu
           id={id}
           type='checkbox'
           {...register}
+          onChangeCapture={onChange}
           checked={checked}
-          onChange={onChange}
         />
         <span className={styles.customCheckbox} />
       </div>

diff --git a/src/features/dashboard/components/ApiTokenCard/index.tsx b/src/features/dashboard/components/ApiTokenCard/index.tsx
@@ -15,25 +15,33 @@ 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();
 
-  const handleAdminScopeChange = (e?: React.ChangeEvent<HTMLInputElement>, chk?: boolean) => {
-    if (e) {
-      const isChecked = e.target.checked;
-      setIsAdminChecked(isChecked);
-      setIsAdminPopupVisible(isChecked);
-    } else if (chk) {
-      setIsAdminPopupVisible(false);
+  const handleAdminScopeChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const isChecked = e.target.checked;
+
+    if (isChecked) {
       setIsAdminChecked(true);
+      setIsAdminPopupVisible(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 }: IApiTokenCardProps
           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
@@ -73,14 +81,12 @@ 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`}
+        register={register(name)}
         checked={isAdminChecked}
-        register={{
-          ...register(name),
-        }}
         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
@@ -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';
@@ -52,11 +52,20 @@ 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 [loading, setLoading] = useState(false);
+
+  const handleChange = (accountName: string) => {
+    setLoading(true);
+    setTimeout(() => {
+      setLoading(false);
+    }, 2000);
+  };
 
   const renderTable = () => {
     return is_desktop ? (
@@ -91,12 +100,17 @@ const ApiTokenTable = (props: HTMLAttributes<HTMLDivElement>) => {
           </Button>
         </div>
         <div className={styles.account_switcher}>
-          <AccountSwitcher />
+          <AccountSwitcher onChange={handleChange} />
         </div>
       </div>
 
-      {tokens?.length ? renderTable() : null}
-      {isLoadingTokens && <Spinner />}
+      {loading ? (
+        <Spinner />
+      ) : isLoadingTokens ? (
+        <Spinner />
+      ) : tokens?.length ? (
+        renderTable()
+      ) : null}
     </div>
   );
 };

diff --git 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
@@ -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
@@ -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
@@ -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 {
@@ -47,6 +47,7 @@
     gap: 16px;
     width: 100%;
     z-index: 10;
+    margin-bottom: 1.5rem;
   }
   .token_register__scopes,
   .token_register__name {
@@ -102,7 +103,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
@@ -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 {