diff --git a/package-lock.json b/package-lock.json
index fed36c2fa..ef457198f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,7 @@
"version": "0.0.0",
"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",
@@ -2632,6 +2633,15 @@
"resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
"integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
},
+ "node_modules/@deriv/quill-icons": {
+ "version": "1.22.9",
+ "resolved": "https://registry.npmjs.org/@deriv/quill-icons/-/quill-icons-1.22.9.tgz",
+ "integrity": "sha512-NadugHtisMc7BKYiEMaFcvLuhKjGEYvo0hQdNBewCZzHTXijY0NJx34G+f9pcsYvsCIBn36dFavVs+zVKTBCQg==",
+ "peerDependencies": {
+ "react": ">= 16",
+ "react-dom": ">= 16"
+ }
+ },
"node_modules/@deriv/ui": {
"version": "0.1.0",
"resolved": "https://registry.npmjs.org/@deriv/ui/-/ui-0.1.0.tgz",
diff --git a/package.json b/package.json
index 546d18e96..7b8615c40 100644
--- a/package.json
+++ b/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",
diff --git a/src/contexts/api-token/api-token.context.tsx b/src/contexts/api-token/api-token.context.tsx
index 9d55e38fc..994aa766a 100644
--- a/src/contexts/api-token/api-token.context.tsx
+++ b/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(null);
diff --git a/src/contexts/api-token/api-token.provider.tsx b/src/contexts/api-token/api-token.provider.tsx
index 19db6a81b..3ac9b34e3 100644
--- a/src/contexts/api-token/api-token.provider.tsx
+++ b/src/contexts/api-token/api-token.provider.tsx
@@ -11,6 +11,7 @@ type TTokenProviderProps = {
const ApiTokenProvider = ({ children }: TTokenProviderProps) => {
const [tokens, setTokens] = useState([]);
const [currentToken, setCurrentToken] = useState();
+ const [lastTokenDisplayName, setLastTokenDisplayName] = useState('');
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 {children};
};
diff --git a/src/features/dashboard/components/ApiTokenForm/CreateTokenField/index.tsx b/src/features/dashboard/components/ApiTokenForm/CreateTokenField/index.tsx
index a4a14e59d..a3667c315 100644
--- a/src/features/dashboard/components/ApiTokenForm/CreateTokenField/index.tsx
+++ b/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 && (
-
- )}
+ {is_toggle && }
-
- {latestToken && latestToken}
-
-
+
+
diff --git a/src/features/dashboard/components/Dialogs/TokenCreationDialogSuccess/token-creation-dialog-sucess.module.scss b/src/features/dashboard/components/Dialogs/TokenCreationDialogSuccess/token-creation-dialog-sucess.module.scss
index e60405ae3..df80aab9a 100644
--- a/src/features/dashboard/components/Dialogs/TokenCreationDialogSuccess/token-creation-dialog-sucess.module.scss
+++ b/src/features/dashboard/components/Dialogs/TokenCreationDialogSuccess/token-creation-dialog-sucess.module.scss
@@ -1,18 +1,21 @@
@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);
}
@@ -20,30 +23,35 @@
.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);
}
diff --git a/src/features/dashboard/hooks/useCreateToken/index.tsx b/src/features/dashboard/hooks/useCreateToken/index.tsx
index 9b142090d..69d718e06 100644
--- a/src/features/dashboard/hooks/useCreateToken/index.tsx
+++ b/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(() => {