chore: fixing merge conflict

Author: Hubert Koster

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

@@ -45,7 +45,10 @@ const CreateTokenField = ({
     return token_names;
   }, [tokens]);
 
-  const token_name_exists = getTokenNames.includes(input_value.toLowerCase());
+  const tokens_limit_reached = tokens.length === 30 && Object.keys(errors).length === 0;
+  const token_name_exists =
+    getTokenNames.includes(input_value.toLowerCase()) && Object.keys(errors).length === 0;
+  const has_no_errors = Object.values(errors).length === 0;
   const disable_button = token_name_exists || Object.keys(errors).length > 0 || input_value === '';
   const error_border_active = token_name_exists || errors.name;
 
@@ -67,11 +70,14 @@ const CreateTokenField = ({
           type='text'
           name='name'
           {...register}
-          placeholder='Token name'
+          placeholder=' '
         />
         <Button disabled={disable_button} type='submit'>
           Create
         </Button>
+        <label className={styles.tokenInputLabel}>
+          Token name (you&apos;ve created <b>{tokens.length}</b> out of 30 tokens)
+        </label>
       </div>
       {errors && errors.name && (
         <Text as='span' type='paragraph-1' className='error-message'>
@@ -83,6 +89,34 @@ const CreateTokenField = ({
           <p>That name is taken. Choose another.</p>
         </div>
       )}
+      {tokens_limit_reached && input_value !== '' && (
+        <div className='error-message'>
+          <p>You&apos;ve reached 30 tokens creation limit.</p>
+        </div>
+      )}
+      {has_no_errors && (
+        <div className={styles.helperText}>
+          <ul>
+            <li>
+              <span>Only alphanumeric characters with spaces and underscores are allowed.</span>
+            </li>
+            <li>
+              <span>The name must be between 2 to 32 characters.</span>
+            </li>
+            <li>
+              <span>Duplicate token names aren&apos;t allowed.</span>
+            </li>
+            <li>
+              <span>
+                The name cannot contain &ldquo;Binary&rdquo;, &ldquo;Deriv&rdquo;, or similar words.
+              </span>
+            </li>
+            <li>
+              <span>You can create up to 30 tokens for this account.</span>
+            </li>
+          </ul>
+        </div>
+      )}
     </React.Fragment>
   );
 };

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

@@ -51,7 +51,7 @@ form {
 .customTextInput {
   align-items: center;
   border: 1px solid var(--colors-greyLight400);
-  border-radius: 4px;
+  border-radius: rem(1.6);
   display: flex;
   position: relative;
   box-sizing: border-box;
@@ -66,6 +66,8 @@ form {
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
     height: rem(3);
+    border-top-right-radius: rem(1.6);
+    border-bottom-right-radius: rem(1.6);
   }
   label {
     position: absolute;
@@ -92,16 +94,22 @@ form {
       background-color: var(--ifm-color-emphasis-0);
       padding: 0 rem(0.4);
       transform: translateY(rem(-2)) scale(0.75);
+      &.tokenInputLabel {
+        color: var(--smoke);
+      }
     }
     &:focus {
       outline-color: unset;
       outline: unset;
-      border-radius: rem(0.3);
+      border-radius: rem(1.6);
       & ~ label {
         color: var(--colors-blue400);
         background-color: var(--ifm-color-emphasis-0);
         padding: 0 rem(0.4);
         transform: translateY(rem(-2)) scale(0.75);
+        &.tokenInputLabel {
+          color: var(--smoke);
+        }
       }
     }
     &::placeholder {
@@ -121,7 +129,14 @@ form {
 }
 
 .helperText {
+  line-height: 2.2;
   font-size: rem(1.4);
   padding-left: rem(1);
   color: var(--colors-greyLight600);
+  li {
+    font-size: rem(1);
+    span {
+      font-size: rem(1.4);
+    }
+  }
 }

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

@@ -9,6 +9,7 @@ import useCreateToken from '@site/src/features/dashboard/hooks/useCreateToken';
 import * as yup from 'yup';
 import styles from './api-token.form.module.scss';
 import CreateTokenField from './CreateTokenField';
+import useApiToken from '@site/src/hooks/useApiToken';
 
 const schema = yup
   .object({
@@ -80,6 +81,7 @@ const scopes: TScope[] = [
 const ApiTokenForm = (props: HTMLAttributes<HTMLFormElement>) => {
   const { createToken, isCreatingToken } = useCreateToken();
   const [form_is_cleared, setFormIsCleared] = useState(false);
+  const { tokens } = useApiToken();
 
   const {
     handleSubmit,

src/styles/index.scss

@@ -34,6 +34,7 @@
   --schema-array: #ff8fc8;
   --schema-number: #acb2ff;
   --schema-integer: #f8c272;
+  --smoke: #414652;
 }
 
 /* For readability concerns, you should choose a lighter palette in dark mode. */
@@ -97,6 +98,9 @@ h6 {
   &:focus {
     outline: var(--colors-coral500) !important;
   }
+  label {
+    color: var(--colors-coral500) !important;
+  }
 }
 
 /* reset */