chore: update with recent changes

Author: utkarsha-deriv

docs/languages/javascript/websocket-connection/index.md

@@ -17,6 +17,7 @@ If you're not familiar with WebSockets, please check out [our documentation](/do
 :::
 
 ### Set up a WebSocket connection
+
 <!-- To create a websocket connection, we want to use the Deriv websocket URL with an `app_id`. You can create your own app_id within your [dashboard](/dashboard) or keep the default `1089` app_id for testing. Keep in mind that eventually, you should make your own app_id. Especially if you would like to monetize your application. -->
 
 Next, we'll create a WebSocket connection to Deriv WebSocket Server as seen below:

src/components/ApiTokenNavbarItem/api_token_switcher.module.scss

@@ -121,7 +121,7 @@
     @media (max-width: 1200px) {
       position: fixed;
       width: 100%;
-      top: calc(var(--nav-height) + rem(3.3));
+      top: calc(var(--nav-height) + rem(7));
       left: 0;
       right: 0;
     }

src/features/dashboard/components/ApiTokenForm/CreateTokenField/index.tsx

@@ -0,0 +1,96 @@
+import React, { Dispatch, SetStateAction, useEffect, useMemo, useState } from 'react';
+import { Text, Button } from '@deriv/ui';
+import styles from '../api-token.form.module.scss';
+import useApiToken from '@site/src/hooks/useApiToken';
+import { FieldErrorsImpl, UseFormRegisterReturn } from 'react-hook-form';
+import TokenCreationDialogSuccess from '../../Dialogs/TokenCreationDialogSuccess';
+
+type TCreateTokenField = {
+  register: UseFormRegisterReturn;
+  errors: Partial<
+    FieldErrorsImpl<{
+      read: boolean;
+      trade: boolean;
+      payments: boolean;
+      trading_information: boolean;
+      admin: boolean;
+      name: string;
+    }>
+  >;
+  form_is_cleared: boolean;
+  setFormIsCleared: Dispatch<SetStateAction<boolean>>;
+  is_toggle: boolean;
+  setToggleModal: Dispatch<SetStateAction<boolean>>;
+};
+
+const CreateTokenField = ({
+  errors,
+  register,
+  form_is_cleared,
+  setFormIsCleared,
+  is_toggle,
+  setToggleModal,
+}: TCreateTokenField) => {
+  const { tokens } = useApiToken();
+  const [input_value, setInputValue] = useState('');
+
+  useEffect(() => {
+    if (form_is_cleared) {
+      setInputValue('');
+      setFormIsCleared(false);
+    }
+  }, [form_is_cleared]);
+
+  const getTokenNames = useMemo(() => {
+    const token_names = [];
+    for (const token_object of tokens) {
+      const token_name = token_object.display_name.toLowerCase();
+      token_names.push(token_name);
+    }
+    return token_names;
+  }, [tokens]);
+
+  const token_name_exists = getTokenNames.includes(input_value.toLowerCase());
+  const disable_button = token_name_exists || Object.keys(errors).length > 0 || input_value === '';
+  const error_border_active = token_name_exists || errors.name;
+
+  return (
+    <React.Fragment>
+      <div className={styles.step_title}>
+        <div className={`${styles.second_step} ${styles.step}`}>
+          <Text as={'p'} type={'paragraph-1'} data-testid={'second-step-title'}>
+            Name your token and click on Create to generate your token.
+          </Text>
+        </div>
+      </div>
+      <div
+        onChange={(e) => setInputValue((e.target as HTMLInputElement).value)}
+        className={`${styles.customTextInput} ${error_border_active ? 'error-border' : ''}`}
+      >
+        <input
+          className={`${error_border_active ? 'error-border' : ''}`}
+          type='text'
+          name='name'
+          {...register}
+          placeholder='Token name'
+        />
+        <Button disabled={disable_button} type='submit'>
+          Create
+        </Button>
+        {is_toggle && <TokenCreationDialogSuccess setToggleModal={setToggleModal} />}
+      </div>
+      {errors && errors.name && (
+        <Text as='span' type='paragraph-1' className='error-message'>
+          {errors.name.message}
+        </Text>
+      )}
+      {token_name_exists && (
+        <div className='error-message'>
+          <p>That name is taken. Choose another.</p>
+        </div>
+      )}
+    </React.Fragment>
+  );
+};
+
+export default CreateTokenField;

src/features/dashboard/components/ApiTokenForm/__tests__/api-token.form.test.tsx

@@ -3,6 +3,32 @@ import { cleanup, fireEvent, render, screen, within } from '@site/src/test-utils
 import userEvent from '@testing-library/user-event';
 import ApiTokenForm from '../api-token.form';
 import useCreateToken from '../../../hooks/useCreateToken';
+import useApiToken from '@site/src/hooks/useApiToken';
+
+jest.mock('@site/src/hooks/useApiToken');
+
+const mockUseApiToken = useApiToken as jest.MockedFunction<
+  () => Partial<ReturnType<typeof useApiToken>>
+>;
+
+mockUseApiToken.mockImplementation(() => ({
+  tokens: [
+    {
+      display_name: 'testtoken1',
+      last_used: '',
+      scopes: ['read', 'trade', 'payments', 'admin'],
+      token: 'asdf1234',
+      valid_for_ip: '',
+    },
+    {
+      display_name: 'testtoken2',
+      last_used: '',
+      scopes: ['read', 'trade', 'payments', 'admin'],
+      token: 'asdf1235',
+      valid_for_ip: '',
+    },
+  ],
+}));
 
 jest.mock('@site/src/features/dashboard/hooks/useCreateToken');
 
@@ -104,6 +130,15 @@ describe('Home Page', () => {
     expect(mockCreateToken).toHaveBeenCalledWith('test create token', []);
   });
 
+  it('Should not be able to create a token if name already exists', async () => {
+    const nameInput = screen.getByRole('textbox');
+
+    await userEvent.type(nameInput, 'testtoken1');
+
+    const error = screen.getByText(/That name is taken. Choose another./i);
+    expect(error).toBeVisible;
+  });
+
   it('Should not create token when name input is empty', async () => {
     const nameInput = screen.getByRole('textbox');
 
@@ -126,29 +161,16 @@ describe('Home Page', () => {
     expect(modal).toBeVisible();
   });
 
-  it('Should have create button disabled when input is empty or ends with whitespace', async () => {
+  it('Should have create button disabled in case of empty input or error message', async () => {
     const submitButton = screen.getByRole('button', { name: /Create/i });
     expect(submitButton).toBeDisabled();
 
     const nameInput = screen.getByRole('textbox');
 
-    await userEvent.type(nameInput, 'token text');
-    expect(submitButton).not.toBeDisabled();
-
-    await userEvent.clear(nameInput);
+    await userEvent.type(nameInput, 'token-text');
     expect(submitButton).toBeDisabled();
 
     await userEvent.clear(nameInput);
-    await userEvent.type(nameInput, 'token text ');
     expect(submitButton).toBeDisabled();
   });
-
-  it('Should disable user from entering whitespace in the beginning', async () => {
-    const nameInput = screen.getByRole('textbox');
-
-    fireEvent.keyDown(nameInput, { code: 'Space', preventDefault });
-    await userEvent.type(nameInput, '{space}');
-
-    expect(nameInput).toHaveValue('');
-  });
 });

src/features/dashboard/components/ApiTokenForm/api-token.form.module.scss

@@ -56,19 +56,16 @@ form {
   position: relative;
   box-sizing: border-box;
   margin: rem(1) 0;
-  &:focus-within {
-    border-color: var(--colors-blue400);
-  }
   &:hover {
     border: 1px solid var(--colors-greyLight600);
   }
+  &:focus-within {
+    border-color: var(--colors-blue500);
+  }
   button {
-    top: 0;
-    bottom: 0;
-    right: 0;
-    position: absolute;
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
+    height: rem(3);
   }
   label {
     position: absolute;
@@ -98,7 +95,7 @@ form {
     }
     &:focus {
       outline-color: unset;
-      outline: 1px solid var(--colors-blue500);
+      outline: unset;
       border-radius: rem(0.3);
       & ~ label {
         color: var(--colors-blue400);

src/features/dashboard/components/ApiTokenForm/api-token.form.tsx

@@ -1,5 +1,5 @@
-import React, { ChangeEvent, HTMLAttributes, useCallback, useState } from 'react';
-import { Button, Text } from '@deriv/ui';
+import React, { HTMLAttributes, useCallback, useState } from 'react';
+import { Text } from '@deriv/ui';
 import { useForm } from 'react-hook-form';
 import { Circles } from 'react-loader-spinner';
 import { yupResolver } from '@hookform/resolvers/yup';
@@ -8,7 +8,7 @@ import ApiTokenCard from '../ApiTokenCard';
 import useCreateToken from '@site/src/features/dashboard/hooks/useCreateToken';
 import * as yup from 'yup';
 import styles from './api-token.form.module.scss';
-import TokenCreationDialogSuccess from '../Dialogs/TokenCreationDialogSuccess';
+import CreateTokenField from './CreateTokenField';
 
 const schema = yup
   .object({
@@ -17,7 +17,22 @@ const schema = yup
     payments: yup.boolean(),
     trading_information: yup.boolean(),
     admin: yup.boolean(),
-    name: yup.string().required(),
+    name: yup
+      .string()
+      .min(2, 'Your token name must be atleast 2 characters long.')
+      .max(32, 'Only up to 32 characters are allowed.')
+      .matches(/^(?=.*[a-zA-Z0-9])[a-zA-Z0-9_ ]*$/, {
+        message:
+          'Only alphanumeric characters with spaces and underscores are allowed. (Example: my_application)',
+        excludeEmptyString: true,
+      })
+      .matches(
+        /^(?!.*deriv|.*d3r1v|.*der1v|.*d3riv|.*b1nary|.*binary|.*b1n4ry|.*bin4ry|.*blnary|.*b\|nary).*$/i,
+        {
+          message: 'The name cannot contain “Binary”, “Deriv”, or similar words.',
+          excludeEmptyString: true,
+        },
+      ),
   })
   .required();
 
@@ -64,16 +79,21 @@ const scopes: TScope[] = [
 
 const ApiTokenForm = (props: HTMLAttributes<HTMLFormElement>) => {
   const { createToken, isCreatingToken } = useCreateToken();
+  const [form_is_cleared, setFormIsCleared] = useState(false);
+  const [is_toggle, setToggleModal] = useState(false);
 
-  const { handleSubmit, register, setValue, getValues, reset } = useForm<TApiTokenForm>({
+  const {
+    handleSubmit,
+    register,
+    setValue,
+    getValues,
+    reset,
+    formState: { errors },
+  } = useForm<TApiTokenForm>({
     resolver: yupResolver(schema),
     mode: 'all',
   });
 
-  const [is_toggle, setToggleModal] = useState(false);
-  const [is_disabled, setDisabled] = useState(true);
-  const [is_empty, setEmpty] = useState(true);
-
   const onSubmit = useCallback(
     (data: TApiTokenForm) => {
       const { name } = data;
@@ -85,6 +105,7 @@ const ApiTokenForm = (props: HTMLAttributes<HTMLFormElement>) => {
         trading_information: data.trading_information,
       });
       createToken(name, selectedTokenScope);
+      setFormIsCleared(true);
       setToggleModal(!is_toggle);
       reset();
     },
@@ -99,20 +120,6 @@ const ApiTokenForm = (props: HTMLAttributes<HTMLFormElement>) => {
     [getValues, setValue],
   );
 
-  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
-    const message = e.target.value;
-    message.trim().length === 0 ? setEmpty(true) : setEmpty(false);
-    /^\s.*/.test(message) || /\s$/.test(message) || message.trim().length === 0
-      ? setDisabled(true)
-      : setDisabled(false);
-  };
-
-  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
-    if (e.code === 'Space' && is_empty) {
-      e.preventDefault();
-    }
-  };
-
   return (
     <form role={'form'} onSubmit={handleSubmit(onSubmit)} {...props}>
       <div className={styles.steps_line} />
@@ -147,30 +154,14 @@ const ApiTokenForm = (props: HTMLAttributes<HTMLFormElement>) => {
             />
           ))}
         </div>
-        <div className={styles.step_title}>
-          <div className={`${styles.second_step} ${styles.step}`}>
-            <Text as={'p'} type={'paragraph-1'} data-testid={'second-step-title'}>
-              Name your token and click on Create to generate your token.
-            </Text>
-          </div>
-        </div>
-        <div className={styles.customTextInput}>
-          <input
-            type='text'
-            name='name'
-            {...register('name')}
-            placeholder='Token name'
-            onChange={handleChange}
-            onKeyDown={handleKeyDown}
-          />
-          <Button type='submit' disabled={is_disabled}>
-            Create
-          </Button>
-          {is_toggle && <TokenCreationDialogSuccess setToggleModal={setToggleModal} />}
-        </div>
-        <div className={styles.helperText}>
-          <p>Length of token name must be between 2 and 32 characters.</p>
-        </div>
+        <CreateTokenField
+          register={register('name')}
+          errors={errors}
+          form_is_cleared={form_is_cleared}
+          setFormIsCleared={setFormIsCleared}
+          is_toggle={is_toggle}
+          setToggleModal={setToggleModal}
+        />
         <div className={styles.step_title}>
           <div className={`${styles.third_step} ${styles.step}`}>
             <Text as={'p'} type={'paragraph-1'} data-testid={'third-step-title'}>

src/features/dashboard/components/ApiTokenTable/DeleteTokenDialog/index.tsx

@@ -32,7 +32,6 @@ const DeleteTokenDialog = ({ onDelete, setToggleModal }: TDeleteTokendialog) =>
         text: 'Yes, delete',
         color: 'primary',
         onClick: () => {
-          setToggleModal(false);
           onDelete();
         },
       },

src/features/dashboard/components/ApiTokenTable/table.lastused.cell.tsx

@@ -16,6 +16,7 @@ const ApiLastUsedCell = ({
   const onDelete = () => {
     const values = row.original;
     deleteToken(values.token);
+    setToggleModal(false);
   };
 
   return (

src/features/dashboard/components/AppForm/index.tsx

@@ -163,8 +163,7 @@ const AppForm = ({
                   <label htmlFor='app_markup_percentage'>Markup percentage (optional)</label>
                 </div>
                 <Text as='p' type='paragraph-1' className={styles.helperText}>
-                  If you don&lsquo;t want to earn a markup, enter 0 here. Otherwise, enter a number
-                  up to 5. Maximum: 5.00%.
+                  Enter 0 if you don&lsquo;t want to earn a markup. Max markup: 5%
                 </Text>
                 {errors && errors?.app_markup_percentage && (
                   <Text as='span' type='paragraph-1' className='error-message'>

src/features/dashboard/components/Table/table.scss

@@ -39,6 +39,7 @@
   td:first-child,
   th:first-child {
     padding-left: rem(3.2);
+    white-space: break-spaces;
   }
 
   tbody tr {