complete functionality and design

package.json

@@ -22,6 +22,7 @@
   },
   "dependencies": {
     "@deriv/deriv-api": "^1.0.11",
+    "@deriv/quill-icons": "^1.22.9",
     "@deriv/ui": "^0.1.0",
     "@docusaurus/core": "^2.4.0",
     "@docusaurus/plugin-client-redirects": "^2.4.0",

src/contexts/api-token/api-token.context.tsx

@@ -6,6 +6,8 @@ export interface IApiTokenContext {
   isLoadingTokens: boolean;
   currentToken: TTokenType;
   updateCurrentToken: (token: TTokenType) => void;
+  lastTokenDisplayName: string;
+  setLastTokenDisplayName: (name: string) => void;
 }
 
 export const ApiTokenContext = React.createContext<IApiTokenContext | null>(null);

src/contexts/api-token/api-token.provider.tsx

@@ -11,6 +11,7 @@ type TTokenProviderProps = {
 const ApiTokenProvider = ({ children }: TTokenProviderProps) => {
   const [tokens, setTokens] = useState<TTokensArrayType>([]);
   const [currentToken, setCurrentToken] = useState<TTokenType>();
+  const [lastTokenDisplayName, setLastTokenDisplayName] = useState<string>('');
 
   const { send: getAllTokens, data, is_loading } = useWS('api_token');
   const { is_authorized } = useAuthContext();
@@ -46,8 +47,18 @@ const ApiTokenProvider = ({ children }: TTokenProviderProps) => {
       currentToken,
       updateCurrentToken,
       updateTokens,
+      lastTokenDisplayName,
+      setLastTokenDisplayName,
     };
-  }, [currentToken, is_loading, tokens, updateCurrentToken, updateTokens]);
+  }, [
+    currentToken,
+    is_loading,
+    tokens,
+    updateCurrentToken,
+    updateTokens,
+    lastTokenDisplayName,
+    setLastTokenDisplayName,
+  ]);
 
   return <ApiTokenContext.Provider value={contextValue}>{children}</ApiTokenContext.Provider>;
 };

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

@@ -36,18 +36,15 @@ const CreateTokenField = ({
 }: TCreateTokenField) => {
   const { tokens } = useApiToken();
   const [input_value, setInputValue] = useState('');
-  const [lastInputValue, setLastInputValue] = useState('');
   const numberOfTokens = tokens.length;
 
   useEffect(() => {
     if (form_is_cleared) {
-      setLastInputValue(input_value);
       setInputValue('');
       setFormIsCleared(false);
     }
   }, [form_is_cleared, input_value, setFormIsCleared]);
 
-  const inputToPass = form_is_cleared ? lastInputValue : input_value;
   const getTokenNames = useMemo(() => {
     const token_names = [];
     for (const token_object of tokens) {
@@ -91,12 +88,7 @@ const CreateTokenField = ({
             {...register}
             placeholder=''
           />
-          {is_toggle && (
-            <TokenCreationDialogSuccess
-              setToggleModal={setToggleModal}
-              inputTokenName={inputToPass}
-            />
-          )}
+          {is_toggle && <TokenCreationDialogSuccess setToggleModal={setToggleModal} />}
           <label
             htmlFor='playground-request'
             className={styles.inlineLabel}

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

@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import CopyTokenDialog from '../CopyTokenDialog';
 import styles from '../token-cell.module.scss';
+import { StandaloneCopyRegularIcon } from '@deriv/quill-icons';
 
 type TCopyButton = {
   value: string;
@@ -28,12 +29,15 @@ const CopyButton = ({ value, has_admin = false }: TCopyButton) => {
 
   return (
     <React.Fragment>
-      <button
+      <StandaloneCopyRegularIcon
+        fill='#000000'
+        iconSize='sm'
         onClick={() => {
           has_admin ? setToggleModal(!toggle_modal) : copyToken();
         }}
-        className={`${styles.copy_button} ${is_copying}`}
+        className={styles.copy_button}
       />
+
       {toggle_modal && <CopyTokenDialog setToggleModal={setToggleModal} copyToken={copyToken} />}
     </React.Fragment>
   );

src/features/dashboard/components/ApiTokenTable/token-cell.module.scss

@@ -11,6 +11,10 @@
   }
 }
 
+.copy_button {
+  cursor: pointer;
+}
+
 .token_cell {
   display: flex;
   justify-content: left;

src/features/dashboard/components/Dialogs/TokenCreationDialogSuccess/index.tsx

@@ -1,17 +1,19 @@
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { Button, Modal } from '@deriv/ui';
 import styles from './token-creation-dialog-sucess.module.scss';
 import useApiToken from '@site/src/hooks/useApiToken';
+import CopyButton from '../../ApiTokenTable/CopyButton';
 
 type ITokenCreationDialogSuccessProps = {
   setToggleModal: React.Dispatch<React.SetStateAction<boolean>>;
-  inputTokenName: string;
 };
 
 export const TokenCreationDialogSuccess = ({
   setToggleModal,
 }: ITokenCreationDialogSuccessProps) => {
-  const { tokens } = useApiToken();
+  const { tokens, lastTokenDisplayName } = useApiToken();
+  const [latestToken, setLatestToken] = useState('');
+  // const has_admin_scope = cell.row?.original?.scopes?.includes('admin');
 
   const onOpenChange = useCallback(
     (open: boolean) => {
@@ -26,8 +28,15 @@ export const TokenCreationDialogSuccess = ({
     setToggleModal(false);
   };
 
-  const latestTokenLength = tokens && tokens.length - 1;
-  const latestToken = tokens && tokens.length > 0 ? tokens[latestTokenLength].token : null;
+  useEffect(() => {
+    if (tokens.length > 0) {
+      tokens.forEach((token) => {
+        if (token.display_name.toLowerCase() === lastTokenDisplayName.toLowerCase()) {
+          setLatestToken(token.token);
+        }
+      });
+    }
+  }, [tokens, lastTokenDisplayName]);
 
   return (
     <Modal defaultOpen onOpenChange={onOpenChange}>
@@ -45,10 +54,14 @@ export const TokenCreationDialogSuccess = ({
                 again. If you lose this key, you&apos;ll need to generate a new token.
               </p>
             </div>
-
-            <span className={styles.textField}>{latestToken && latestToken}</span>
-
-            <div className={styles.buttonWrapper}>
+            <div className={styles.button_wrapper}>
+              <div className={styles.textField}>
+                <div>
+                  <div className={styles.key}>Key</div>
+                  {latestToken}
+                </div>
+                <CopyButton value={latestToken} has_admin={false} />
+              </div>
               <Button color='primary' onClick={handleToggle} className={styles.btn}>
                 OK
               </Button>

src/features/dashboard/components/Dialogs/TokenCreationDialogSuccess/token-creation-dialog-sucess.module.scss

@@ -1,49 +1,57 @@
 @use 'src/styles/utility' as *;
 
 .wrapper {
-  width: rem(44.8);
-  text-align: center;
+  width: rem(53);
+  padding: rem(3.2) !important;
+  text-align: center !important;
 }
 
 .modal {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  padding: rem(0.8) rem(2.4) 0;
-  font-size: rem(1.4);
-  line-height: rem(2);
-  text-align: left;
+  color: var(--core-color-opacity-black-600, rgba(0, 0, 0, 0.72));
+  font-family: 'IBM Plex Sans';
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  margin-top: 32px;
+  line-height: 24px;
+  margin-bottom: 16px;
+  text-align: left !important;
   @media (max-width: 992px) {
     padding: 0 0 0 rem(1.6);
   }
 }
 
 .textField {
   display: flex;
-  height: 56px;
-  width: 400px;
-  padding: 0px 16px;
-  margin-left: 20px;
-  margin-right: 20px;
-  margin-top: 16px;
+  justify-content: space-between;
   align-items: center;
-  gap: 8px;
-  align-self: stretch;
+  width: 268px;
+  text-align: left !important;
+  gap: 4px;
   border-radius: 8px;
+  padding: 4px 16px;
   border: 1px solid var(--core-color-opacity-black-100, rgba(0, 0, 0, 0.08));
   background: var(--core-color-solid-slate-50, #fff);
 }
 
-.buttonWrapper {
+.key {
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 18px;
+}
+.button_wrapper {
+  gap: 24px;
   display: flex;
-  justify-content: flex-end;
-  padding: rem(2.4);
-  gap: rem(0.8);
+}
 
-  .btn {
-    padding: rem(1) rem(1.6);
-    border-radius: rem(1.5);
-    align-items: center;
-    margin-right: 170px;
-  }
+.btn {
+  display: block;
+  width: 156px !important;
+  height: 48px;
+  padding: 0px 16px;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+  border-radius: 16px !important;
+  background: var(--core-color-solid-coral-700, #ff444f);
 }

src/features/dashboard/hooks/useCreateToken/index.tsx

@@ -7,15 +7,16 @@ import { TTokenType } from '@site/src/types';
 const useCreateToken = () => {
   const { send, data, is_loading, error } = useWS('api_token');
   const { is_authorized } = useAuthContext();
-  const { updateTokens } = useApiToken();
+  const { updateTokens, setLastTokenDisplayName } = useApiToken();
 
   const createToken = useCallback(
     (tokenName: string, scopes: TTokenType['scopes']) => {
       if (is_authorized) {
         send({ new_token: tokenName, new_token_scopes: scopes });
+        setLastTokenDisplayName(tokenName);
       }
     },
-    [is_authorized, send],
+    [is_authorized, send, setLastTokenDisplayName],
   );
 
   useEffect(() => {