Skip to content

Commit 8b9fb6d

Browse files
niloofar-derivniloofar-deriv
committed
Merge branch 'master' of github.com:deriv-com/p2p into drawer
2 parents e0fb451 + ec255d8 commit 8b9fb6d

File tree

49 files changed

+372
-228
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

49 files changed

+372
-228
lines changed

‎package-lock.json

Lines changed: 4 additions & 4 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
},
1616
"dependencies": {
1717
"@babel/preset-env": "^7.24.5",
18-
"@deriv-com/api-hooks": "^1.1.1",
18+
"@deriv-com/api-hooks": "^1.1.2",
1919
"@deriv-com/translations": "^1.2.4",
2020
"@deriv-com/ui": "^1.28.2",
2121
"@deriv-com/utils": "^0.0.25",

‎src/App.tsx

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
1+
import { Suspense } from 'react';
12
import { BrowserRouter } from 'react-router-dom';
23
import { QueryParamProvider } from 'use-query-params';
34
import { ReactRouter5Adapter } from 'use-query-params/adapters/react-router-5';
45
import { AppFooter, AppHeader, DerivIframe } from '@/components';
56
import { useRedirectToOauth } from '@/hooks';
67
import AppContent from '@/routes/AppContent';
78
import { initializeI18n, TranslationProvider } from '@deriv-com/translations';
8-
import { useDevice } from '@deriv-com/ui';
9+
import { Loader, useDevice } from '@deriv-com/ui';
910

1011
const { VITE_CROWDIN_BRANCH_NAME, VITE_PROJECT_NAME, VITE_TRANSLATIONS_CDN_URL } = import.meta.env;
1112
const i18nInstance = initializeI18n({
@@ -22,10 +23,12 @@ const App = () => {
2223
<BrowserRouter>
2324
<QueryParamProvider adapter={ReactRouter5Adapter}>
2425
<TranslationProvider defaultLang='EN' i18nInstance={i18nInstance}>
25-
<DerivIframe />
26-
<AppHeader />
27-
<AppContent />
28-
{isDesktop && <AppFooter />}
26+
<Suspense fallback={<Loader isFullScreen />}>
27+
<DerivIframe />
28+
<AppHeader />
29+
<AppContent />
30+
{isDesktop && <AppFooter />}
31+
</Suspense>
2932
</TranslationProvider>
3033
</QueryParamProvider>
3134
</BrowserRouter>

‎src/components/AppFooter/__tests__/AppFooter.spec.tsx

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,20 @@ import AppFooter from '../AppFooter';
1010
jest.mock('@deriv-com/translations');
1111
jest.mock('@/hooks');
1212

13+
Object.defineProperty(window, 'matchMedia', {
14+
value: jest.fn().mockImplementation(query => ({
15+
addEventListener: jest.fn(),
16+
addListener: jest.fn(), // Deprecated
17+
dispatchEvent: jest.fn(),
18+
matches: false,
19+
media: query,
20+
onchange: null,
21+
removeEventListener: jest.fn(),
22+
removeListener: jest.fn(), // Deprecated
23+
})),
24+
writable: true,
25+
});
26+
1327
const AppFooterComponent = () => (
1428
<BrowserRouter>
1529
<QueryParamProvider adapter={ReactRouter5Adapter}>

‎src/components/AppFooter/__tests__/ServerTime.spec.tsx

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,20 @@ jest.mock('@/utils', () => ({
1313
epochToUTC: jest.fn(),
1414
}));
1515

16+
Object.defineProperty(window, 'matchMedia', {
17+
value: jest.fn().mockImplementation(query => ({
18+
addEventListener: jest.fn(),
19+
addListener: jest.fn(), // Deprecated
20+
dispatchEvent: jest.fn(),
21+
matches: false,
22+
media: query,
23+
onchange: null,
24+
removeEventListener: jest.fn(),
25+
removeListener: jest.fn(), // Deprecated
26+
})),
27+
writable: true,
28+
});
29+
1630
describe('ServerTime component', () => {
1731
const mockTime = 1625074800; // Example epoch time
1832
const mockUTCFormat = '2021-06-30 14:00 GMT';

‎src/components/AppHeader/__tests__/AppHeader.spec.tsx

Lines changed: 17 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,7 @@
11
import { ReactNode } from 'react';
2+
import { BrowserRouter } from 'react-router-dom';
3+
import { QueryParamProvider } from 'use-query-params';
4+
import { ReactRouter5Adapter } from 'use-query-params/adapters/react-router-5';
25
import { useAuthData } from '@deriv-com/api-hooks';
36
import { render, screen } from '@testing-library/react';
47
import userEvent from '@testing-library/user-event';
@@ -81,7 +84,13 @@ describe('<AppHeader/>', () => {
8184
});
8285

8386
it('should render the header and handle login when there are no P2P accounts', async () => {
84-
render(<AppHeader />);
87+
render(
88+
<BrowserRouter>
89+
<QueryParamProvider adapter={ReactRouter5Adapter}>
90+
<AppHeader />
91+
</QueryParamProvider>
92+
</BrowserRouter>
93+
);
8594
await userEvent.click(screen.getByRole('button', { name: 'Log in' }));
8695

8796
expect(window.open).toHaveBeenCalledWith(expect.any(String), '_self');
@@ -104,7 +113,13 @@ describe('<AppHeader/>', () => {
104113
writable: true,
105114
});
106115

107-
render(<AppHeader />);
116+
render(
117+
<BrowserRouter>
118+
<QueryParamProvider adapter={ReactRouter5Adapter}>
119+
<AppHeader />
120+
</QueryParamProvider>
121+
</BrowserRouter>
122+
);
108123
const logoutButton = screen.getByRole('button', { name: 'Logout' });
109124
const { logout } = mockUseAuthData();
110125
expect(logoutButton).toBeInTheDocument();

‎src/components/BuySellForm/BuySellForm.tsx

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -215,13 +215,10 @@ const BuySellForm = ({ advertId, isModalOpen, onRequestClose }: TBuySellFormProp
215215
}, [isSuccess, orderCreatedInfo, history, onRequestClose]);
216216

217217
useEffect(() => {
218-
// @ts-expect-error types are not correct from api-hooks
219218
if (isError && error?.message) {
220-
// @ts-expect-error types are not correct from api-hooks
221219
setErrorMessage(error?.message);
222220
scrollRef.current?.scrollIntoView({ behavior: 'smooth', block: 'end' });
223221
}
224-
// @ts-expect-error types are not correct from api-hooks
225222
}, [error?.message, isError]);
226223

227224
return (

‎src/components/DerivIframe/DerivIframe.tsx

Lines changed: 1 addition & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,5 @@
1-
import { URLConstants } from '@deriv-com/utils';
2-
31
const DerivIframe = () => {
4-
const getAllowedLocalStorageOrigin = () => {
5-
const hostName = window.location.hostname;
6-
if (/^staging-p2p\.deriv\.com$/i.test(hostName)) {
7-
return URLConstants.derivP2pStaging;
8-
} else if (/^localhost$/i.test(hostName)) {
9-
return window.location.origin;
10-
}
11-
return URLConstants.derivP2pProduction;
12-
};
13-
14-
const origin = getAllowedLocalStorageOrigin();
2+
const origin = window.location.origin;
153

164
return (
175
<iframe

‎src/components/Modals/BlockUnblockUserModal/BlockUnblockUserModal.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -38,13 +38,13 @@ const BlockUnblockUserModal = ({
3838
onClickBlocked?.();
3939
onRequestClose();
4040
} else if (error || unblockError) {
41-
// @ts-expect-error types are not correct from api-hooks
4241
setErrorMessage?.(error?.message || unblockError?.message);
4342
onRequestClose();
4443
}
4544
// eslint-disable-next-line react-hooks/exhaustive-deps
4645
}, [isSuccess, onClickBlocked, unblockIsSuccess, unblockError, error, setErrorMessage]);
4746

47+
const textSize = isMobile ? 'md' : 'sm';
4848
const getModalTitle = () => (isBlocked ? `Unblock ${advertiserName}?` : `Block ${advertiserName}?`);
4949

5050
const getModalContent = () =>
@@ -82,7 +82,7 @@ const BlockUnblockUserModal = ({
8282
</Text>
8383
</Modal.Header>
8484
<Modal.Body>
85-
<Text as='p' className='px-[1.6rem] lg:px-[2.4rem]' size={isMobile ? 'md' : 'sm'}>
85+
<Text as='p' className='px-[1.6rem] lg:px-[2.4rem]' size={textSize}>
8686
{getModalContent()}
8787
</Text>
8888
</Modal.Body>
@@ -92,12 +92,12 @@ const BlockUnblockUserModal = ({
9292
color='black'
9393
onClick={onRequestClose}
9494
size='lg'
95-
textSize='sm'
95+
textSize={textSize}
9696
variant='outlined'
9797
>
9898
<Localize i18n_default_text='Cancel' />
9999
</Button>
100-
<Button onClick={onClickBlockUnblock} size='lg' textSize='sm'>
100+
<Button onClick={onClickBlockUnblock} size='lg' textSize={textSize}>
101101
{isBlocked ? <Localize i18n_default_text='Unblock' /> : <Localize i18n_default_text='Block' />}
102102
</Button>
103103
</Modal.Footer>

‎src/components/Modals/InvalidVerificationLinkModal/InvalidVerificationLinkModal.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,10 @@ import { Button, Modal, Text, useDevice } from '@deriv-com/ui';
66
import './InvalidVerificationLinkModal.scss';
77

88
type TInvalidVerificationLinkModalProps = {
9-
error?: {
9+
error: {
1010
code: string;
1111
message: string;
12-
};
12+
} | null;
1313
isModalOpen: boolean;
1414
mutate: () => void;
1515
onRequestClose: () => void;

‎src/components/Modals/NicknameModal/NicknameModal.tsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,6 @@ const NicknameModal = ({ isModalOpen, onRequestClose }: TNicknameModalProps) =>
7171
data-testid='dt_nickname_modal_input'
7272
error={!!error?.message || isError}
7373
label={localize('Your nickname')}
74-
// @ts-expect-error types are not correct from api-hooks
7574
message={createError?.message || error?.message}
7675
onBlur={onBlur}
7776
onChange={onChange}

‎src/components/PaymentMethodCard/PaymentMethodCard.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,7 @@ const PaymentMethodCard = ({
6363
isEditable={isEditable}
6464
isSelectable={!isEditable && toAdd}
6565
isSelected={isSelected}
66+
medium={medium}
6667
onDeletePaymentMethod={onDeletePaymentMethod}
6768
onEditPaymentMethod={onEditPaymentMethod}
6869
onSelectPaymentMethod={() => onSelectPaymentMethodCard?.(Number(paymentMethod.id))}

‎src/components/PaymentMethodForm/PaymentMethodForm.scss

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -143,6 +143,11 @@
143143
& .deriv-input__right-content {
144144
display: flex;
145145
align-items: center;
146+
& .deriv-dropdown__button {
147+
&--active {
148+
transform: none;
149+
}
150+
}
146151
}
147152
}
148153
}

‎src/components/PaymentMethodForm/PaymentMethodForm.tsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ const PaymentMethodForm = ({
3131
}: TPaymentMethodFormProps) => {
3232
const {
3333
control,
34-
formState: { isDirty, isSubmitting, isValid },
34+
formState: { dirtyFields, isDirty, isSubmitting, isValid },
3535
handleSubmit,
3636
reset,
3737
} = useForm({ mode: 'all' });
@@ -63,8 +63,9 @@ const PaymentMethodForm = ({
6363
}));
6464
return listItems || [];
6565
}, [availablePaymentMethods]);
66+
6667
const handleGoBack = () => {
67-
if (isDirty) {
68+
if (Object.keys(dirtyFields).length) {
6869
setIsError(true);
6970
} else {
7071
onResetFormState();

‎src/components/PaymentMethodForm/PaymentMethodFormModalRenderer/PaymentMethodFormModalRenderer.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,12 @@ import { useTranslations } from '@deriv-com/translations';
66

77
type TPaymentMethodFormModalRendererProps = {
88
actionType: TFormState['actionType'];
9-
createError: TSocketError<'p2p_advertiser_payment_methods'> | null;
9+
createError: TSocketError<'p2p_advertiser_payment_methods'>['error'] | null;
1010
isCreateSuccessful: boolean;
1111
isUpdateSuccessful: boolean;
1212
onResetFormState: () => void;
1313
setIsError: (isError: boolean) => void;
14-
updateError: TSocketError<'p2p_advertiser_payment_methods'> | null;
14+
updateError: TSocketError<'p2p_advertiser_payment_methods'>['error'] | null;
1515
};
1616

1717
const PaymentMethodFormModalRenderer = ({

‎src/components/PopoverDropdown/PopoverDropdown.tsx

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -25,13 +25,17 @@ const PopoverDropdown = ({ dropdownList, onClick, tooltipMessage }: TPopoverDrop
2525

2626
return (
2727
<div className='popover-dropdown' ref={ref}>
28-
<TooltipMenuIcon
29-
as='button'
30-
onClick={() => setVisible(prevState => !prevState)}
31-
tooltipContent={tooltipMessage}
32-
>
33-
<LabelPairedEllipsisVerticalLgBoldIcon data-testid='dt_popover_dropdown_icon' />
34-
</TooltipMenuIcon>
28+
{isAdvertiserBarred ? (
29+
<LabelPairedEllipsisVerticalLgBoldIcon data-testid='dt_popover_dropdown_icon' fill='#999999' />
30+
) : (
31+
<TooltipMenuIcon
32+
as='button'
33+
onClick={() => setVisible(prevState => !prevState)}
34+
tooltipContent={tooltipMessage}
35+
>
36+
<LabelPairedEllipsisVerticalLgBoldIcon data-testid='dt_popover_dropdown_icon' />
37+
</TooltipMenuIcon>
38+
)}
3539
{visible && (
3640
<div className='popover-dropdown__list'>
3741
{dropdownList.map(item => (

‎src/components/PopoverDropdown/__tests__/PopoverDropdown.spec.tsx

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -48,10 +48,9 @@ describe('PopoverDropdown', () => {
4848
expect(mockProps.onClick).toHaveBeenCalledWith('value 1');
4949
});
5050

51-
it('should disable the button if advertiser is barred', async () => {
51+
it('should disable the icon if advertiser is barred', async () => {
5252
mockUseIsAdvertiserBarred.mockReturnValue(true);
5353
render(<PopoverDropdown {...mockProps} />);
54-
await userEvent.click(screen.getByTestId('dt_popover_dropdown_icon'));
55-
expect(screen.getByRole('button', { name: 'label 1' })).toBeDisabled();
54+
expect(screen.getByTestId('dt_popover_dropdown_icon')).not.toHaveProperty('onClick');
5655
});
5756
});

‎src/components/Search/Search.scss

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,14 @@
22
width: 100%;
33
background-color: #fff;
44

5+
input[type='search']::-webkit-search-cancel-button {
6+
display: none;
7+
}
8+
9+
rect {
10+
fill: #999;
11+
}
12+
513
.deriv-input {
614
padding: 6px 8px;
715
font-size: 1.4rem;
@@ -30,5 +38,10 @@
3038
&__label {
3139
left: 3rem;
3240
}
41+
42+
&__right-content {
43+
display: flex;
44+
align-items: center;
45+
}
3346
}
3447
}

0 commit comments

Comments
 (0)