From 1c555ba1d2c746f4995c588f24ace119d49ab716 Mon Sep 17 00:00:00 2001 From: sanjam chhatwal Date: Wed, 27 Sep 2023 13:29:14 +0400 Subject: [PATCH 01/17] fix: broken link --- src/components/Header/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx index 8eecfff4..3a422494 100644 --- a/src/components/Header/index.tsx +++ b/src/components/Header/index.tsx @@ -23,7 +23,7 @@ export const Header = () => { Who we are - + Contact us From 2608dce7d163f81f0a0cb4fcb97b7869cc28174d Mon Sep 17 00:00:00 2001 From: sanjam chhatwal Date: Fri, 20 Oct 2023 10:22:12 +0400 Subject: [PATCH 02/17] chore: add dynamic token label --- .../components/ApiTokenForm/CreateTokenField/index.tsx | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/src/features/dashboard/components/ApiTokenForm/CreateTokenField/index.tsx b/src/features/dashboard/components/ApiTokenForm/CreateTokenField/index.tsx index dfc6ba3b..fa44eb60 100644 --- a/src/features/dashboard/components/ApiTokenForm/CreateTokenField/index.tsx +++ b/src/features/dashboard/components/ApiTokenForm/CreateTokenField/index.tsx @@ -36,6 +36,7 @@ const CreateTokenField = ({ }: TCreateTokenField) => { const { tokens } = useApiToken(); const [input_value, setInputValue] = useState(''); + const numberOfTokens = tokens.length; useEffect(() => { if (form_is_cleared) { @@ -84,12 +85,19 @@ const CreateTokenField = ({ type='text' name='name' {...register} - placeholder=' ' + placeholder='' /> {is_toggle && } + {errors && errors.name && ( From 87d3ebeea3a5b0a1cc50b01f49e107bff75bd12a Mon Sep 17 00:00:00 2001 From: sanjam chhatwal Date: Fri, 20 Oct 2023 10:42:08 +0400 Subject: [PATCH 03/17] chore: small text change --- docs/core-concepts/authorization-authentication/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/core-concepts/authorization-authentication/index.md b/docs/core-concepts/authorization-authentication/index.md index 826e2265..f594b0eb 100644 --- a/docs/core-concepts/authorization-authentication/index.md +++ b/docs/core-concepts/authorization-authentication/index.md @@ -21,7 +21,7 @@ Please make sure you have all the requirements mentioned below to continue. ### Requirements -1. Deriv account +1. Deriv Client account 2. Deriv API token with the appropriate access level 3. Deriv app ID From 7172dd8c6da7257dfdaa7cb0c3f593a7e979bddd Mon Sep 17 00:00:00 2001 From: sanjam chhatwal Date: Mon, 23 Oct 2023 16:36:49 +0400 Subject: [PATCH 04/17] chore: changed registration flow --- .../components/Dialogs/RegisterAppDialogSuccess/index.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/features/dashboard/components/Dialogs/RegisterAppDialogSuccess/index.tsx b/src/features/dashboard/components/Dialogs/RegisterAppDialogSuccess/index.tsx index 98f2b758..7837f2f1 100644 --- a/src/features/dashboard/components/Dialogs/RegisterAppDialogSuccess/index.tsx +++ b/src/features/dashboard/components/Dialogs/RegisterAppDialogSuccess/index.tsx @@ -14,10 +14,11 @@ export const RegisterAppDialogSuccess = ({ onClose }: IRegisterAppDialogSuccessP () => [ { id: 0, - text: 'Manage application', + text: 'Join our Telegram Community', color: 'primary', onClick: () => { updateCurrentTab('MANAGE_APPS'); + window.open('https://t.me/deriv_apps', '_blank'); onClose(); }, }, From c6db2c843a6e9034c2b25f4adfd33f3f45061c66 Mon Sep 17 00:00:00 2001 From: sanjam chhatwal Date: Mon, 23 Oct 2023 16:38:33 +0400 Subject: [PATCH 05/17] chore: test fix --- .../__tests__/register-app-dialog-success.test.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/features/dashboard/components/Dialogs/RegisterAppDialogSuccess/__tests__/register-app-dialog-success.test.tsx b/src/features/dashboard/components/Dialogs/RegisterAppDialogSuccess/__tests__/register-app-dialog-success.test.tsx index 6997d05b..0bda62c8 100644 --- a/src/features/dashboard/components/Dialogs/RegisterAppDialogSuccess/__tests__/register-app-dialog-success.test.tsx +++ b/src/features/dashboard/components/Dialogs/RegisterAppDialogSuccess/__tests__/register-app-dialog-success.test.tsx @@ -29,7 +29,7 @@ describe('App Dialog Register Success', () => { }); it('Should render buttons properly', () => { - const primaryButton = screen.getByRole('button', { name: /manage application/i }); + const primaryButton = screen.getByRole('button', { name: /join our telegram community/i }); const secondaryButton = screen.getByRole('button', { name: /got it/i }); expect(primaryButton).toBeInTheDocument(); @@ -52,7 +52,7 @@ describe('App Dialog Register Success', () => { }); it('Should update current tab on primary button click to Manage Application', async () => { - const primaryButton = screen.getByRole('button', { name: /manage application/i }); + const primaryButton = screen.getByRole('button', { name: /join our telegram community/i }); await userEvent.click(primaryButton); From c4628a7c71326a8217133c4d371551233219aafb Mon Sep 17 00:00:00 2001 From: sanjam chhatwal Date: Wed, 25 Oct 2023 13:04:02 +0400 Subject: [PATCH 06/17] chore: design fix --- .../RegisterAppDialogSuccess/index.tsx | 59 ++++++++----------- .../register-app-dialog-success.module.scss | 37 ++++++++++++ static/img/register_success.svg | 4 ++ 3 files changed, 65 insertions(+), 35 deletions(-) create mode 100644 src/features/dashboard/components/Dialogs/RegisterAppDialogSuccess/register-app-dialog-success.module.scss create mode 100644 static/img/register_success.svg diff --git a/src/features/dashboard/components/Dialogs/RegisterAppDialogSuccess/index.tsx b/src/features/dashboard/components/Dialogs/RegisterAppDialogSuccess/index.tsx index 7837f2f1..99ab4887 100644 --- a/src/features/dashboard/components/Dialogs/RegisterAppDialogSuccess/index.tsx +++ b/src/features/dashboard/components/Dialogs/RegisterAppDialogSuccess/index.tsx @@ -1,7 +1,7 @@ -import React, { useMemo } from 'react'; -import { TModalActionButton } from '@deriv/ui/dist/types/src/components/core/modal/types'; -import { Modal } from '@deriv/ui'; +import React from 'react'; +import { Button, Modal } from '@deriv/ui'; import useAppManager from '@site/src/hooks/useAppManager'; +import styles from './register-app-dialog-success.module.scss'; interface IRegisterAppDialogSuccessProps { onClose: () => void; @@ -10,44 +10,33 @@ interface IRegisterAppDialogSuccessProps { export const RegisterAppDialogSuccess = ({ onClose }: IRegisterAppDialogSuccessProps) => { const { updateCurrentTab } = useAppManager(); - const actionButtons: TModalActionButton[] = useMemo( - () => [ - { - id: 0, - text: 'Join our Telegram Community', - color: 'primary', - onClick: () => { - updateCurrentTab('MANAGE_APPS'); - window.open('https://t.me/deriv_apps', '_blank'); - onClose(); - }, - }, - { - id: 1, - text: 'Got it', - color: 'secondary', - onClick: () => { - onClose(); - }, - }, - ], - [onClose, updateCurrentTab], - ); + const onSuccessfulClick = () => { + updateCurrentTab('MANAGE_APPS'); + window.open('https://t.me/deriv_apps', '_blank'); + onClose(); + }; return (
- + +
+ +

Success!

+

You have successfully registered your application.

+

You can now start using Deriv API

+
+
+ + +
+
diff --git a/src/features/dashboard/components/Dialogs/RegisterAppDialogSuccess/register-app-dialog-success.module.scss b/src/features/dashboard/components/Dialogs/RegisterAppDialogSuccess/register-app-dialog-success.module.scss new file mode 100644 index 00000000..52f9be88 --- /dev/null +++ b/src/features/dashboard/components/Dialogs/RegisterAppDialogSuccess/register-app-dialog-success.module.scss @@ -0,0 +1,37 @@ +@use 'src/styles/utility' as *; + +.wrapper { + width: rem(44); +} + +.modal { + display: flex; + flex-direction: column; + align-items: center; + gap: 8px; + padding: rem(0.8) rem(2.4) 0; + font-size: rem(1.4); + line-height: rem(2); + @media (max-width: 992px) { + padding: 0 0 0 rem(1.6); + } + + .title { + font-weight: bold; + } + .iconWrapper { + background-image: url(/img/register_success.svg); + } +} + +.buttonWrapper { + 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); + } +} diff --git a/static/img/register_success.svg b/static/img/register_success.svg new file mode 100644 index 00000000..271526d7 --- /dev/null +++ b/static/img/register_success.svg @@ -0,0 +1,4 @@ + + + + From f3018d75cdc14f793689a0e90510294e9e29122c Mon Sep 17 00:00:00 2001 From: sanjam chhatwal Date: Wed, 25 Oct 2023 13:14:27 +0400 Subject: [PATCH 07/17] chore: test fix --- .../__tests__/register-app-dialog-success.test.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/features/dashboard/components/Dialogs/RegisterAppDialogSuccess/__tests__/register-app-dialog-success.test.tsx b/src/features/dashboard/components/Dialogs/RegisterAppDialogSuccess/__tests__/register-app-dialog-success.test.tsx index 0bda62c8..0898d3dd 100644 --- a/src/features/dashboard/components/Dialogs/RegisterAppDialogSuccess/__tests__/register-app-dialog-success.test.tsx +++ b/src/features/dashboard/components/Dialogs/RegisterAppDialogSuccess/__tests__/register-app-dialog-success.test.tsx @@ -38,9 +38,7 @@ describe('App Dialog Register Success', () => { it('Should display correct content on the modal', () => { const textContent = screen.getByText(/^You have successfully registered/i); - expect(textContent).toHaveTextContent( - 'You have successfully registered your application. You can now start using Deriv API.', - ); + expect(textContent).toHaveTextContent('You have successfully registered your application.'); }); it('Should close the modal on Secondary button click', async () => { From 127d70af797531dde68dca019689acdf6d093c58 Mon Sep 17 00:00:00 2001 From: sanjam chhatwal Date: Wed, 25 Oct 2023 13:26:59 +0400 Subject: [PATCH 08/17] chore: design fix --- .../register-app-dialog-success.module.scss | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/features/dashboard/components/Dialogs/RegisterAppDialogSuccess/register-app-dialog-success.module.scss b/src/features/dashboard/components/Dialogs/RegisterAppDialogSuccess/register-app-dialog-success.module.scss index 52f9be88..20f626ab 100644 --- a/src/features/dashboard/components/Dialogs/RegisterAppDialogSuccess/register-app-dialog-success.module.scss +++ b/src/features/dashboard/components/Dialogs/RegisterAppDialogSuccess/register-app-dialog-success.module.scss @@ -29,9 +29,15 @@ justify-content: flex-end; padding: rem(2.4); gap: rem(0.8); - + @media (max-width: 768px) { + flex-direction: column; + align-items: center; + } .btn { padding: rem(1) rem(1.6); border-radius: rem(1.5); + @media (max-width: 768px) { + width: 100%; + } } } From 5eb8e4129980b4e889a9eb0a9fefd974fe49b697 Mon Sep 17 00:00:00 2001 From: sanjam chhatwal Date: Wed, 25 Oct 2023 15:35:42 +0400 Subject: [PATCH 09/17] chore: design fix --- .../register-app-dialog-success.module.scss | 2 +- .../register-app/__tests__/register-app.test.tsx | 8 +------- 2 files changed, 2 insertions(+), 8 deletions(-) diff --git a/src/features/dashboard/components/Dialogs/RegisterAppDialogSuccess/register-app-dialog-success.module.scss b/src/features/dashboard/components/Dialogs/RegisterAppDialogSuccess/register-app-dialog-success.module.scss index 20f626ab..02e98525 100644 --- a/src/features/dashboard/components/Dialogs/RegisterAppDialogSuccess/register-app-dialog-success.module.scss +++ b/src/features/dashboard/components/Dialogs/RegisterAppDialogSuccess/register-app-dialog-success.module.scss @@ -26,7 +26,7 @@ .buttonWrapper { display: flex; - justify-content: flex-end; + justify-content: center; padding: rem(2.4); gap: rem(0.8); @media (max-width: 768px) { diff --git a/src/features/dashboard/register-app/__tests__/register-app.test.tsx b/src/features/dashboard/register-app/__tests__/register-app.test.tsx index 61b8b743..a24b5644 100644 --- a/src/features/dashboard/register-app/__tests__/register-app.test.tsx +++ b/src/features/dashboard/register-app/__tests__/register-app.test.tsx @@ -99,8 +99,6 @@ const fakeApp: ApplicationObject = { }; describe('Update App Dialog', () => { - const mockOnClose = jest.fn(); - let wsServer: WS; beforeEach(async () => { @@ -198,11 +196,7 @@ describe('Update App Dialog', () => { req_id: 1, }); - const successDialogContent = await screen.findByText( - 'You have successfully registered your application. You can now start using Deriv API.', - ); - expect(successDialogContent).toBeInTheDocument(); - expect(successDialogContent).toBeVisible(); + expect(screen.getByText('App information')).toBeInTheDocument(); }); it('Should render error on error response', async () => { From 004745482cc3fe3082cb084f662852cd0cb1eff6 Mon Sep 17 00:00:00 2001 From: sanjam chhatwal Date: Thu, 26 Oct 2023 10:58:19 +0400 Subject: [PATCH 10/17] chore: responsive design fix --- .../register-app-dialog-success.module.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/features/dashboard/components/Dialogs/RegisterAppDialogSuccess/register-app-dialog-success.module.scss b/src/features/dashboard/components/Dialogs/RegisterAppDialogSuccess/register-app-dialog-success.module.scss index 02e98525..1578e415 100644 --- a/src/features/dashboard/components/Dialogs/RegisterAppDialogSuccess/register-app-dialog-success.module.scss +++ b/src/features/dashboard/components/Dialogs/RegisterAppDialogSuccess/register-app-dialog-success.module.scss @@ -12,9 +12,13 @@ padding: rem(0.8) rem(2.4) 0; font-size: rem(1.4); line-height: rem(2); + white-space: nowrap; @media (max-width: 992px) { padding: 0 0 0 rem(1.6); } + @media (max-width: 768px) { + padding: unset; + } .title { font-weight: bold; From e33fd255225bb36c5de32c0d38771be590b31241 Mon Sep 17 00:00:00 2001 From: sanjam chhatwal Date: Thu, 26 Oct 2023 13:49:17 +0400 Subject: [PATCH 11/17] chore: responsive font size --- .../register-app-dialog-success.module.scss | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/features/dashboard/components/Dialogs/RegisterAppDialogSuccess/register-app-dialog-success.module.scss b/src/features/dashboard/components/Dialogs/RegisterAppDialogSuccess/register-app-dialog-success.module.scss index 1578e415..186f7076 100644 --- a/src/features/dashboard/components/Dialogs/RegisterAppDialogSuccess/register-app-dialog-success.module.scss +++ b/src/features/dashboard/components/Dialogs/RegisterAppDialogSuccess/register-app-dialog-success.module.scss @@ -19,6 +19,9 @@ @media (max-width: 768px) { padding: unset; } + @media (max-width: 425px) { + font-size: rem(1.2); + } .title { font-weight: bold; From 80796331b191cad84fe0e17807a80a21dec584c9 Mon Sep 17 00:00:00 2001 From: sanjam chhatwal Date: Thu, 26 Oct 2023 15:06:15 +0400 Subject: [PATCH 12/17] chore: link fix --- .../components/Dialogs/RegisterAppDialogSuccess/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/features/dashboard/components/Dialogs/RegisterAppDialogSuccess/index.tsx b/src/features/dashboard/components/Dialogs/RegisterAppDialogSuccess/index.tsx index 99ab4887..5f0fb0ef 100644 --- a/src/features/dashboard/components/Dialogs/RegisterAppDialogSuccess/index.tsx +++ b/src/features/dashboard/components/Dialogs/RegisterAppDialogSuccess/index.tsx @@ -12,7 +12,7 @@ export const RegisterAppDialogSuccess = ({ onClose }: IRegisterAppDialogSuccessP const onSuccessfulClick = () => { updateCurrentTab('MANAGE_APPS'); - window.open('https://t.me/deriv_apps', '_blank'); + window.open('https://t.me/+g6FV5tFY1u9lZGE1', '_blank'); onClose(); }; From 05cc84e519a2347b14bc1452644edadd566304cd Mon Sep 17 00:00:00 2001 From: sanjam chhatwal Date: Mon, 30 Oct 2023 10:21:59 +0400 Subject: [PATCH 13/17] chore: design fix --- .../ApiTokenForm/CreateTokenField/index.tsx | 41 +++--- .../ApiTokenForm/api-token.form.module.scss | 132 ++++++++++-------- 2 files changed, 94 insertions(+), 79 deletions(-) diff --git a/src/features/dashboard/components/ApiTokenForm/CreateTokenField/index.tsx b/src/features/dashboard/components/ApiTokenForm/CreateTokenField/index.tsx index fa44eb60..ac38aef2 100644 --- a/src/features/dashboard/components/ApiTokenForm/CreateTokenField/index.tsx +++ b/src/features/dashboard/components/ApiTokenForm/CreateTokenField/index.tsx @@ -44,7 +44,6 @@ const CreateTokenField = ({ setFormIsCleared(false); } }, [form_is_cleared]); - const getTokenNames = useMemo(() => { const token_names = []; for (const token_object of tokens) { @@ -76,28 +75,30 @@ const CreateTokenField = ({ -
setInputValue((e.target as HTMLInputElement).value)} - className={`${styles.customTextInput} ${error_border_active ? 'error-border' : ''}`} - > - +
+
setInputValue((e.target as HTMLInputElement).value)} + className={`${styles.customTextInput} ${error_border_active ? 'error-border' : ''}`} + > + + {is_toggle && } + +
- {is_toggle && } -
{errors && errors.name && ( diff --git a/src/features/dashboard/components/ApiTokenForm/api-token.form.module.scss b/src/features/dashboard/components/ApiTokenForm/api-token.form.module.scss index 65c62c47..511cc0ec 100644 --- a/src/features/dashboard/components/ApiTokenForm/api-token.form.module.scss +++ b/src/features/dashboard/components/ApiTokenForm/api-token.form.module.scss @@ -48,69 +48,58 @@ form { } } -.customTextInput { - align-items: center; - border: 1px solid var(--colors-greyLight400); - border-radius: rem(1.6); +.tokenWrapper { display: flex; - position: relative; - box-sizing: border-box; - margin: rem(0.5) 0; - &:hover { - border: 1px solid var(--colors-greyLight600); - } - &:focus-within { - border-color: var(--colors-blue500); - } + flex-direction: row; + align-items: center; button { - border-top-left-radius: 0; - border-bottom-left-radius: 0; + border-radius: 0 rem(1.6) rem(1.6) 0; height: rem(3); - border-top-right-radius: rem(1.6); - border-bottom-right-radius: rem(1.6); - } - label { - position: absolute; - color: var(--colors-greyLight600); - left: rem(1.2); - pointer-events: none; - transform-origin: top left; - transition: all 0.25s ease; - white-space: nowrap; - width: calc(100% - 100px); - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; + @media (max-width: 425px) { + border-radius: rem(1.6); + width: 91%; + } } - input[type='text'], - input[type='number'] { - background: 0 0; - box-sizing: border-box; - color: var(--ifm-color-emphasis-1000); - height: rem(4); - min-width: 0; + + .customTextInput { + align-items: center; + border: 1px solid var(--colors-greyLight400); + border-radius: rem(1.6) 0 0 rem(1.6); + display: flex; width: 100%; - border: none; - text-indent: rem(1.2); - font-size: rem(1.6); - &:not(:placeholder-shown) ~ label { - color: var(--colors-blue400); - background-color: var(--ifm-color-emphasis-0); - padding: 0 rem(0.4); - transform: translateY(rem(-2)) scale(0.75); - width: unset; - @media screen and (min-width: 320px) and (max-width: 425px) { - font-size: rem(1.4); - } - &.tokenInputLabel { - color: var(--smoke); - } + position: relative; + box-sizing: border-box; + margin: rem(0.5) 0; + &:hover { + border: 1px solid var(--colors-greyLight600); } - &:focus { - outline-color: unset; - outline: unset; - border-radius: rem(1.6); - & ~ label { + &:focus-within { + border-color: var(--colors-blue500); + } + label { + position: absolute; + color: var(--colors-greyLight600); + left: rem(1.2); + pointer-events: none; + transform-origin: top left; + transition: all 0.25s ease; + white-space: nowrap; + width: calc(100% - 100px); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + input[type='text'], + input[type='number'] { + background: 0 0; + box-sizing: border-box; + color: var(--ifm-color-emphasis-1000); + height: rem(4); + min-width: 0; + border: none; + text-indent: rem(1.2); + font-size: rem(1.6); + &:not(:placeholder-shown) ~ label { color: var(--colors-blue400); background-color: var(--ifm-color-emphasis-0); padding: 0 rem(0.4); @@ -123,11 +112,36 @@ form { color: var(--smoke); } } + &:focus { + outline-color: unset; + outline: unset; + 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); + width: unset; + @media screen and (min-width: 320px) and (max-width: 425px) { + font-size: rem(1.4); + } + &.tokenInputLabel { + color: var(--smoke); + } + } + } + &::placeholder { + color: var(--colors-greyLight600); + } } - &::placeholder { - color: var(--colors-greyLight600); + @media (max-width: 425px) { + border-radius: rem(1.6); } } + @media (max-width: 425px) { + flex-direction: column; + gap: rem(0.5); + } } .card_wrapper { From 619eaf657b6e9a8865dd6e52b3b4cfd1656889a0 Mon Sep 17 00:00:00 2001 From: sanjam chhatwal Date: Mon, 30 Oct 2023 19:06:31 +0400 Subject: [PATCH 14/17] chore: remove 'binary.com' from documenataion --- docs/core-concepts/authorization-authentication/index.md | 2 +- docs/guides/oauth2/index.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/core-concepts/authorization-authentication/index.md b/docs/core-concepts/authorization-authentication/index.md index 826e2265..934d5500 100644 --- a/docs/core-concepts/authorization-authentication/index.md +++ b/docs/core-concepts/authorization-authentication/index.md @@ -59,7 +59,7 @@ Here is the visual representation of how the OAuth authorisation connection work ## The authentication process -In order to authenticate your user, specify the URL that will be used as the OAuth Redirect URL on the [Dashboard](/dashboard) page, **Register application** tab in the **OAuth details** fields. Then, add a login button on your website or app and direct users to **`https://oauth.binary.com/oauth2/authorize?app_id=your_app_id`** where your_app_id is the ID of your app. +In order to authenticate your user, specify the URL that will be used as the OAuth Redirect URL on the [Dashboard](/dashboard) page, **Register application** tab in the **OAuth details** fields. Then, add a login button on your website or app and direct users to **`https://oauth.deriv.com/oauth2/authorize?app_id=your_app_id`** where your_app_id is the ID of your app. ![Deriv OAuth Login](/img/oauth_login.png 'Deriv OAuth Login') diff --git a/docs/guides/oauth2/index.md b/docs/guides/oauth2/index.md index 820e5fae..57b19a9b 100644 --- a/docs/guides/oauth2/index.md +++ b/docs/guides/oauth2/index.md @@ -33,7 +33,7 @@ For more information on OAuth2, [see this guide](https://aaronparecki.com/oauth- 1. Specify the URL that will be used as the **OAuth Redirect URL** on the app registration page in the **Website URL field**. -2. Add a login button on your website or app and direct users to `https://oauth.binary.com/oauth2/authorize?app_id=your_app_id` where your_app_id is the ID of your app. +2. Add a login button on your website or app and direct users to `https://oauth.deriv.com/oauth2/authorize?app_id=your_app_id` where your_app_id is the ID of your app. 3. Once a user signs up, they will be redirected to the URL that you entered as the **Redirect URL**. This URL will have arguments added to it with the user's session tokens, and will look similar to: `https://[YOUR_WEBSITE_URL]/redirect/?acct1=cr799393& token1=a1-f7pnteezo4jzhpxclctizt27hyeot&cur1=usd& acct2=vrtc1859315& token2=a1clwe3vfuuus5kraceykdsoqm4snfq& cur2=usd&state=` From fafdccb480370b0ac2e25bd617e23da3498f7277 Mon Sep 17 00:00:00 2001 From: "Ali(Ako) Hosseini" Date: Thu, 2 Nov 2023 18:53:36 +0800 Subject: [PATCH 15/17] feat: use dws endpoint --- src/features/Endpoint/Endpoint.tsx | 2 +- src/utils/constants.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/features/Endpoint/Endpoint.tsx b/src/features/Endpoint/Endpoint.tsx index 1cd7a03a..9c999ab8 100644 --- a/src/features/Endpoint/Endpoint.tsx +++ b/src/features/Endpoint/Endpoint.tsx @@ -67,7 +67,7 @@ const EndPoint = () => { }, })} name='server_url' - placeholder='e.g. ws.binaryws.com' + placeholder='e.g. ws.derivws.com' className={styles.textInput} required /> diff --git a/src/utils/constants.ts b/src/utils/constants.ts index 95141c56..7059e498 100644 --- a/src/utils/constants.ts +++ b/src/utils/constants.ts @@ -2,7 +2,7 @@ export const PRODUCTION_APP_ID = '36544'; export const STAGING_APP_ID = '36545'; export const VERCEL_DEPLOYMENT_APP_ID = '35073'; export const LOCALHOST_APP_ID = '35074'; -export const DEFAULT_WS_SERVER = 'ws.binaryws.com'; +export const DEFAULT_WS_SERVER = 'ws.derivws.com'; export const OAUTH_URL = 'oauth.deriv.com'; export const LOGIN_ACCOUNTS_SESSION_STORAGE_KEY = 'login-accounts'; From 14c1aac7251c84afd1f61e004987877b74add7e0 Mon Sep 17 00:00:00 2001 From: "Ali(Ako) Hosseini" Date: Thu, 2 Nov 2023 19:16:25 +0800 Subject: [PATCH 16/17] test: change the endpoints in the test --- src/features/Endpoint/__tests__/Endpoint.test.tsx | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/features/Endpoint/__tests__/Endpoint.test.tsx b/src/features/Endpoint/__tests__/Endpoint.test.tsx index 94bde831..401eb726 100644 --- a/src/features/Endpoint/__tests__/Endpoint.test.tsx +++ b/src/features/Endpoint/__tests__/Endpoint.test.tsx @@ -21,7 +21,7 @@ describe('Endpoint', () => { }); it('should have default values in input fields', () => { - const server = screen.getByPlaceholderText('e.g. ws.binaryws.com'); + const server = screen.getByPlaceholderText('e.g. ws.derivws.com'); const app_id = screen.getByPlaceholderText('e.g. 9999'); expect(server).toHaveValue('oauth.deriv.com'); @@ -40,7 +40,7 @@ describe('Endpoint', () => { }); it('validate user inputs, and provides error messages for server field', async () => { - const server = screen.getByPlaceholderText('e.g. ws.binaryws.com'); + const server = screen.getByPlaceholderText('e.g. ws.derivws.com'); await userEvent.clear(server); await userEvent.type(server, 'qa10@deriv.com'); @@ -51,12 +51,12 @@ describe('Endpoint', () => { }); it('should validate submit button functionality', async () => { - const server = screen.getByPlaceholderText('e.g. ws.binaryws.com'); + const server = screen.getByPlaceholderText('e.g. ws.derivws.com'); const app_id = screen.getByPlaceholderText('e.g. 9999'); const form = screen.getByRole('form'); await userEvent.clear(server); - await userEvent.type(server, 'blue.binaryws.com'); + await userEvent.type(server, 'blue.derivws.com'); await userEvent.clear(app_id); await userEvent.type(app_id, '31063'); @@ -65,7 +65,7 @@ describe('Endpoint', () => { fireEvent.submit(form); }); - expect(server).toHaveValue('blue.binaryws.com'); + expect(server).toHaveValue('blue.derivws.com'); expect(app_id).toHaveValue('31063'); }); @@ -89,12 +89,12 @@ describe('Endpoint', () => { }); it('Should have submit button enabled with no errors on the from', async () => { - const server = screen.getByPlaceholderText('e.g. ws.binaryws.com'); + const server = screen.getByPlaceholderText('e.g. ws.derivws.com'); const app_id = screen.getByPlaceholderText('e.g. 9999'); const submit_button = screen.getByRole('button', { name: /submit/i }); await userEvent.clear(server); - await userEvent.type(server, 'blue.binaryws.com'); + await userEvent.type(server, 'blue.derivws.com'); await userEvent.clear(app_id); await userEvent.type(app_id, '31063'); From 1d68c32ffca210b2359c3e4e169e0b406257502a Mon Sep 17 00:00:00 2001 From: sanjam chhatwal Date: Fri, 3 Nov 2023 10:01:24 +0400 Subject: [PATCH 17/17] chore: test cases and design fix --- .../__tests__/api-token.form.test.tsx | 23 ++++++++++++++++++- .../ApiTokenForm/api-token.form.module.scss | 1 + 2 files changed, 23 insertions(+), 1 deletion(-) diff --git a/src/features/dashboard/components/ApiTokenForm/__tests__/api-token.form.test.tsx b/src/features/dashboard/components/ApiTokenForm/__tests__/api-token.form.test.tsx index f1e75e54..448f07d9 100644 --- a/src/features/dashboard/components/ApiTokenForm/__tests__/api-token.form.test.tsx +++ b/src/features/dashboard/components/ApiTokenForm/__tests__/api-token.form.test.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { cleanup, render, screen, within } from '@site/src/test-utils'; +import { cleanup, render, screen, waitFor, within } from '@site/src/test-utils'; import userEvent from '@testing-library/user-event'; import ApiTokenForm from '../api-token.form'; import useCreateToken from '../../../hooks/useCreateToken'; @@ -134,6 +134,13 @@ describe('Home Page', () => { expect(adminCheckbox.checked).toBeTruthy(); }); + it('Should show dynamic token label', async () => { + const tokenLabel = screen.getByTestId('token-count-label'); + await waitFor(() => { + expect(tokenLabel).toBeVisible(); + }); + }); + it('Should create token on form submit', async () => { const nameInput = screen.getByRole('textbox'); @@ -155,6 +162,20 @@ describe('Home Page', () => { expect(error).toBeVisible; }); + it('Should update token a value on create token', async () => { + const tokenLabel = screen.getByTestId('token-count-label'); + const nameInput = screen.getByRole('textbox'); + + await userEvent.type(nameInput, 'test create token'); + + const submitButton = screen.getByRole('button', { name: /Create/i }); + await userEvent.click(submitButton); + + await waitFor(() => { + expect(tokenLabel).toHaveTextContent('2'); + }); + }); + it('should hide restrictions if error is present', async () => { const nameInput = screen.getByRole('textbox'); const restrictions = screen.getByRole('list'); diff --git a/src/features/dashboard/components/ApiTokenForm/api-token.form.module.scss b/src/features/dashboard/components/ApiTokenForm/api-token.form.module.scss index 511cc0ec..801aa94e 100644 --- a/src/features/dashboard/components/ApiTokenForm/api-token.form.module.scss +++ b/src/features/dashboard/components/ApiTokenForm/api-token.form.module.scss @@ -96,6 +96,7 @@ form { color: var(--ifm-color-emphasis-1000); height: rem(4); min-width: 0; + width: 100%; border: none; text-indent: rem(1.2); font-size: rem(1.6);