diff --git a/packages/cashier/src/pages/on-ramp/__tests__/on-ramp.spec.js b/packages/cashier/src/pages/on-ramp/__tests__/on-ramp.spec.tsx
similarity index 78%
rename from packages/cashier/src/pages/on-ramp/__tests__/on-ramp.spec.js
rename to packages/cashier/src/pages/on-ramp/__tests__/on-ramp.spec.tsx
index bd78ea49634a..0435b10da1b0 100644
--- a/packages/cashier/src/pages/on-ramp/__tests__/on-ramp.spec.js
+++ b/packages/cashier/src/pages/on-ramp/__tests__/on-ramp.spec.tsx
@@ -8,18 +8,30 @@ jest.mock('Stores/connect.js', () => ({
default: 'mockedDefaultExport',
connect: () => Component => Component,
}));
-jest.mock('@deriv/components', () => ({
- ...jest.requireActual('@deriv/components'),
- Loading: () =>
Loading
,
- ReadMore: () => ReadMore
,
-}));
+
+jest.mock('@deriv/components', () => {
+ return {
+ ...(jest.requireActual('@deriv/components') as any),
+ Loading: () => Loading
,
+ ReadMore: () => ReadMore
,
+ };
+});
jest.mock('@deriv/shared/src/utils/screen/responsive', () => ({
- ...jest.requireActual('@deriv/shared/src/utils/screen/responsive'),
+ ...(jest.requireActual('@deriv/shared/src/utils/screen/responsive') as any),
isMobile: jest.fn(),
}));
-jest.mock('Components/cashier-locked', () => () => CashierLocked
);
-jest.mock('Pages/on-ramp/on-ramp-provider-card', () => () => OnRampProviderCard
);
-jest.mock('Pages/on-ramp/on-ramp-provider-popup', () => () => OnRampProviderPopup
);
+jest.mock('Components/cashier-locked', () => {
+ const cashierLocked = () => CashierLocked
;
+ return cashierLocked;
+});
+jest.mock('Pages/on-ramp/on-ramp-provider-card', () => {
+ const onRampProviderCard = () => OnRampProviderCard
;
+ return onRampProviderCard;
+});
+jest.mock('Pages/on-ramp/on-ramp-provider-popup', () => {
+ const onRampProviderPopup = () => OnRampProviderPopup
;
+ return onRampProviderPopup;
+});
describe('', () => {
const props = {
@@ -34,6 +46,16 @@ describe('', () => {
setIsOnRampModalOpen: jest.fn(),
setSideNotes: jest.fn(),
routeTo: jest.fn(),
+ menu_options: [
+ {
+ label: 'Deposit',
+ path: routes.cashier_deposit,
+ },
+ {
+ label: 'Transfer',
+ path: routes.cashier_acc_transfer,
+ },
+ ],
};
it('should render component', () => {
@@ -97,7 +119,7 @@ describe('', () => {
});
it('should show "What is Fiat onramp?" message and render component in Mobile mode', () => {
- isMobile.mockReturnValue(true);
+ (isMobile as jest.Mock).mockReturnValue(true);
render();
@@ -106,28 +128,18 @@ describe('', () => {
});
it('should have proper menu options in Mobile mode', () => {
- isMobile.mockReturnValue(true);
- props.menu_options = [
- {
- label: 'Deposit',
- path: routes.cashier_deposit,
- },
- {
- label: 'Transfer',
- path: routes.cashier_acc_transfer,
- },
- ];
+ (isMobile as jest.Mock).mockReturnValue(true);
- const { container } = render();
- const select = container.querySelector('#dt_components_select-native_select-tag');
- const labels = Array.from(select).map(option => option.label);
+ render();
+ const select = screen.getByTestId('dt_on_ramp_select_native');
+ const labels = Array.from(select as any).map((option: any) => option.label);
expect(labels).toContain('Deposit');
expect(labels).toContain('Transfer');
});
it('should trigger "routeTo" callback when the user chooses a different from "Fiat onramp" option in Mobile mode', () => {
- isMobile.mockReturnValue(true);
+ (isMobile as jest.Mock).mockReturnValue(true);
props.menu_options = [
{
label: 'Deposit',
@@ -143,8 +155,8 @@ describe('', () => {
},
];
- const { container } = render();
- const select = container.querySelector('#dt_components_select-native_select-tag');
+ render();
+ const select = screen.getByTestId('dt_on_ramp_select_native');
fireEvent.change(select, { target: { value: routes.cashier_deposit } });
diff --git a/packages/cashier/src/pages/on-ramp/index.js b/packages/cashier/src/pages/on-ramp/index.js
deleted file mode 100644
index c7a8948ba111..000000000000
--- a/packages/cashier/src/pages/on-ramp/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import OnRamp from './on-ramp.jsx';
-
-export default OnRamp;
diff --git a/packages/cashier/src/pages/on-ramp/index.ts b/packages/cashier/src/pages/on-ramp/index.ts
new file mode 100644
index 000000000000..52b92316d22d
--- /dev/null
+++ b/packages/cashier/src/pages/on-ramp/index.ts
@@ -0,0 +1,3 @@
+import OnRamp from './on-ramp';
+
+export default OnRamp;
diff --git a/packages/cashier/src/pages/on-ramp/on-ramp-provider-card/__tests__/on-ramp-provider-card.spec.js b/packages/cashier/src/pages/on-ramp/on-ramp-provider-card/__tests__/on-ramp-provider-card.spec.tsx
similarity index 100%
rename from packages/cashier/src/pages/on-ramp/on-ramp-provider-card/__tests__/on-ramp-provider-card.spec.js
rename to packages/cashier/src/pages/on-ramp/on-ramp-provider-card/__tests__/on-ramp-provider-card.spec.tsx
diff --git a/packages/cashier/src/pages/on-ramp/on-ramp-provider-card/index.js b/packages/cashier/src/pages/on-ramp/on-ramp-provider-card/index.js
deleted file mode 100644
index 558c42287c9c..000000000000
--- a/packages/cashier/src/pages/on-ramp/on-ramp-provider-card/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import OnRampProviderCard from './on-ramp-provider-card.jsx';
-
-export default OnRampProviderCard;
diff --git a/packages/cashier/src/pages/on-ramp/on-ramp-provider-card/index.ts b/packages/cashier/src/pages/on-ramp/on-ramp-provider-card/index.ts
new file mode 100644
index 000000000000..40a6e5f74f37
--- /dev/null
+++ b/packages/cashier/src/pages/on-ramp/on-ramp-provider-card/index.ts
@@ -0,0 +1,3 @@
+import OnRampProviderCard from './on-ramp-provider-card';
+
+export default OnRampProviderCard;
diff --git a/packages/cashier/src/pages/on-ramp/on-ramp-provider-card/on-ramp-provider-card.jsx b/packages/cashier/src/pages/on-ramp/on-ramp-provider-card/on-ramp-provider-card.tsx
similarity index 82%
rename from packages/cashier/src/pages/on-ramp/on-ramp-provider-card/on-ramp-provider-card.jsx
rename to packages/cashier/src/pages/on-ramp/on-ramp-provider-card/on-ramp-provider-card.tsx
index adba3cc0171f..cb640d8ae776 100644
--- a/packages/cashier/src/pages/on-ramp/on-ramp-provider-card/on-ramp-provider-card.jsx
+++ b/packages/cashier/src/pages/on-ramp/on-ramp-provider-card/on-ramp-provider-card.tsx
@@ -1,10 +1,22 @@
-import PropTypes from 'prop-types';
import React from 'react';
import { Button, Icon, NewsTicker, Text } from '@deriv/components';
import { localize } from '@deriv/translations';
import { connect } from 'Stores/connect';
+import { TProviderDetails, TRootStore, TUiStore } from 'Types';
-const OnRampProviderCard = ({ is_dark_mode_on, provider, setSelectedProvider, is_mobile }) => {
+type TOnRampProviderCardProps = {
+ is_dark_mode_on: TUiStore['is_dark_mode_on'];
+ provider: TProviderDetails;
+ setSelectedProvider: (provider: TProviderDetails) => void;
+ is_mobile: TUiStore['is_mobile'];
+};
+
+const OnRampProviderCard = ({
+ is_dark_mode_on,
+ provider,
+ setSelectedProvider,
+ is_mobile,
+}: TOnRampProviderCardProps) => {
const payment_icons = provider.getPaymentIcons();
const gtm_identifier = provider.name.toLowerCase().replace(' ', '-');
const logo_size = is_mobile ? 56 : 128;
@@ -52,14 +64,7 @@ const OnRampProviderCard = ({ is_dark_mode_on, provider, setSelectedProvider, is
);
};
-OnRampProviderCard.propTypes = {
- is_dark_mode_on: PropTypes.bool,
- is_mobile: PropTypes.bool,
- provider: PropTypes.object, // External prop passed by parent.
- setSelectedProvider: PropTypes.func,
-};
-
-export default connect(({ modules, ui }) => ({
+export default connect(({ modules, ui }: TRootStore) => ({
setSelectedProvider: modules.cashier.onramp.setSelectedProvider,
is_dark_mode_on: ui.is_dark_mode_on,
is_mobile: ui.is_mobile,
diff --git a/packages/cashier/src/pages/on-ramp/on-ramp-provider-popup/__tests__/on-ramp-provider-popup.spec.js b/packages/cashier/src/pages/on-ramp/on-ramp-provider-popup/__tests__/on-ramp-provider-popup.spec.tsx
similarity index 99%
rename from packages/cashier/src/pages/on-ramp/on-ramp-provider-popup/__tests__/on-ramp-provider-popup.spec.js
rename to packages/cashier/src/pages/on-ramp/on-ramp-provider-popup/__tests__/on-ramp-provider-popup.spec.tsx
index 77f8d42a0586..bea6c0561955 100644
--- a/packages/cashier/src/pages/on-ramp/on-ramp-provider-popup/__tests__/on-ramp-provider-popup.spec.js
+++ b/packages/cashier/src/pages/on-ramp/on-ramp-provider-popup/__tests__/on-ramp-provider-popup.spec.tsx
@@ -9,7 +9,7 @@ jest.mock('Stores/connect', () => ({
}));
jest.mock('@deriv/components', () => ({
- ...jest.requireActual('@deriv/components'),
+ ...(jest.requireActual('@deriv/components') as any),
Loading: () => Loading
,
}));
diff --git a/packages/cashier/src/pages/on-ramp/on-ramp-provider-popup/index.js b/packages/cashier/src/pages/on-ramp/on-ramp-provider-popup/index.js
deleted file mode 100644
index 489a3377561e..000000000000
--- a/packages/cashier/src/pages/on-ramp/on-ramp-provider-popup/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import OnRampProviderPopup from './on-ramp-provider-popup.jsx';
-
-export default OnRampProviderPopup;
diff --git a/packages/cashier/src/pages/on-ramp/on-ramp-provider-popup/index.ts b/packages/cashier/src/pages/on-ramp/on-ramp-provider-popup/index.ts
new file mode 100644
index 000000000000..cab8031df80b
--- /dev/null
+++ b/packages/cashier/src/pages/on-ramp/on-ramp-provider-popup/index.ts
@@ -0,0 +1,3 @@
+import OnRampProviderPopup from './on-ramp-provider-popup';
+
+export default OnRampProviderPopup;
diff --git a/packages/cashier/src/pages/on-ramp/on-ramp-provider-popup/on-ramp-provider-popup.jsx b/packages/cashier/src/pages/on-ramp/on-ramp-provider-popup/on-ramp-provider-popup.tsx
similarity index 91%
rename from packages/cashier/src/pages/on-ramp/on-ramp-provider-popup/on-ramp-provider-popup.jsx
rename to packages/cashier/src/pages/on-ramp/on-ramp-provider-popup/on-ramp-provider-popup.tsx
index 21497e85cf95..9965b588f4d7 100644
--- a/packages/cashier/src/pages/on-ramp/on-ramp-provider-popup/on-ramp-provider-popup.jsx
+++ b/packages/cashier/src/pages/on-ramp/on-ramp-provider-popup/on-ramp-provider-popup.tsx
@@ -1,10 +1,29 @@
import classNames from 'classnames';
-import PropTypes from 'prop-types';
import React from 'react';
import { Button, HintBox, Icon, Loading, Popover, Text } from '@deriv/components';
import { getKebabCase, website_name, isMobile } from '@deriv/shared';
import { localize, Localize } from '@deriv/translations';
import { connect } from 'Stores/connect';
+import { TProviderDetails, TRootStore, TUiStore } from 'Types';
+
+type TOnRampProviderPopupProps = {
+ api_error: string;
+ deposit_address: string;
+ is_dark_mode_on: TUiStore['is_dark_mode_on'];
+ is_deposit_address_loading: boolean;
+ is_deposit_address_popover_open: boolean;
+ is_requesting_widget_html: boolean;
+ onClickCopyDepositAddress: () => void;
+ onClickDisclaimerContinue: () => void;
+ onClickGoToDepositPage: () => void;
+ selected_provider: TProviderDetails;
+ setDepositAddressRef: (ref: HTMLDivElement | null) => void;
+ setIsOnRampModalOpen: (boolean: boolean) => void;
+ should_show_dialog: boolean;
+ should_show_widget: boolean;
+ widget_error: string;
+ widget_html: string;
+};
const OnRampProviderPopup = ({
api_error,
@@ -23,7 +42,7 @@ const OnRampProviderPopup = ({
should_show_widget,
widget_error,
widget_html,
-}) => {
+}: TOnRampProviderPopupProps) => {
const el_onramp_widget_container_ref = React.useRef(null);
// JS executed after "on-ramp__widget-container" has been added to the DOM.
@@ -173,26 +192,7 @@ const OnRampProviderPopup = ({
);
};
-OnRampProviderPopup.propTypes = {
- api_error: PropTypes.string,
- deposit_address: PropTypes.string,
- is_dark_mode_on: PropTypes.bool,
- is_deposit_address_loading: PropTypes.bool,
- is_deposit_address_popover_open: PropTypes.bool,
- is_requesting_widget_html: PropTypes.bool,
- onClickCopyDepositAddress: PropTypes.func,
- onClickDisclaimerContinue: PropTypes.func,
- onClickGoToDepositPage: PropTypes.func,
- selected_provider: PropTypes.object,
- setDepositAddressRef: PropTypes.func,
- setIsOnRampModalOpen: PropTypes.func,
- should_show_dialog: PropTypes.bool,
- should_show_widget: PropTypes.bool,
- widget_error: PropTypes.string,
- widget_html: PropTypes.string,
-};
-
-export default connect(({ modules, ui }) => ({
+export default connect(({ modules, ui }: TRootStore) => ({
api_error: modules.cashier.onramp.api_error,
deposit_address: modules.cashier.onramp.deposit_address,
is_dark_mode_on: ui.is_dark_mode_on,
diff --git a/packages/cashier/src/pages/on-ramp/on-ramp.jsx b/packages/cashier/src/pages/on-ramp/on-ramp.tsx
similarity index 84%
rename from packages/cashier/src/pages/on-ramp/on-ramp.jsx
rename to packages/cashier/src/pages/on-ramp/on-ramp.tsx
index a062cadee329..c04f67647e13 100644
--- a/packages/cashier/src/pages/on-ramp/on-ramp.jsx
+++ b/packages/cashier/src/pages/on-ramp/on-ramp.tsx
@@ -1,15 +1,45 @@
-import PropTypes from 'prop-types';
import React from 'react';
import { Loading, Modal, SelectNative, ReadMore, Text } from '@deriv/components';
import { routes, isMobile } from '@deriv/shared';
import { Localize, localize } from '@deriv/translations';
import { connect } from 'Stores/connect';
import CashierLocked from 'Components/cashier-locked';
+import SideNote from 'Components/side-note';
+import { TCommonStore, TClientStore, TProviderDetails, TReactFormEvent, TRootStore } from 'Types';
import OnRampProviderCard from './on-ramp-provider-card';
import OnRampProviderPopup from './on-ramp-provider-popup';
-import SideNote from 'Components/side-note';
import './on-ramp.scss';
+type TMenuOption = {
+ count?: number;
+ default: boolean;
+ icon: string;
+ label: string;
+ value: string;
+ path: string;
+ has_side_note: boolean;
+};
+
+type TOnRampProps = {
+ filtered_onramp_providers: TProviderDetails[];
+ is_cashier_locked: boolean;
+ is_cashier_onboarding: boolean;
+ is_deposit_locked: boolean;
+ is_onramp_modal_open: boolean;
+ is_switching: TClientStore['is_switching'];
+ is_loading: boolean;
+ menu_options: TMenuOption[];
+ onMountOnramp: () => void;
+ onUnmountOnramp: () => void;
+ onramp_popup_modal_title: string;
+ resetPopup: () => void;
+ routeTo: TCommonStore['routeTo'];
+ setIsOnRampModalOpen: (set_is_on_ramp_modal_open: boolean) => void;
+ setSideNotes: (ReactComponent: React.ReactElement[]) => void;
+ should_show_dialog: boolean;
+ tab_index: number;
+};
+
const OnRampSideNote = () => {
const notes = [
{
return } />;
};
+
const OnRampInfo = () => (
@@ -56,7 +87,7 @@ const OnRamp = ({
should_show_dialog,
setSideNotes,
tab_index,
-}) => {
+}: TOnRampProps) => {
const [selected_cashier_path, setSelectedCashierPath] = React.useState(routes.cashier_onramp);
React.useEffect(() => {
@@ -93,11 +124,12 @@ const OnRamp = ({
{isMobile() && (
{
+ onChange={(e: TReactFormEvent) => {
if (e.currentTarget.value !== selected_cashier_path) {
setSelectedCashierPath(e.currentTarget.value);
}
@@ -138,27 +170,7 @@ const OnRamp = ({
);
};
-OnRamp.propTypes = {
- filtered_onramp_providers: PropTypes.array,
- is_cashier_onboarding: PropTypes.bool,
- is_cashier_locked: PropTypes.bool,
- is_deposit_locked: PropTypes.bool,
- is_onramp_modal_open: PropTypes.bool,
- is_loading: PropTypes.bool,
- is_switching: PropTypes.bool,
- menu_options: PropTypes.array,
- onMountOnramp: PropTypes.func,
- onUnmountOnramp: PropTypes.func,
- onramp_popup_modal_title: PropTypes.string,
- resetPopup: PropTypes.func,
- routeTo: PropTypes.func,
- setIsOnRampModalOpen: PropTypes.func,
- setSideNotes: PropTypes.func,
- should_show_dialog: PropTypes.bool,
- tab_index: PropTypes.number,
-};
-
-export default connect(({ modules, common, client }) => ({
+export default connect(({ modules, common, client }: TRootStore) => ({
filtered_onramp_providers: modules.cashier.onramp.filtered_onramp_providers,
is_cashier_onboarding: modules.cashier.general_store.is_cashier_onboarding,
is_cashier_locked: modules.cashier.general_store.is_cashier_locked,
diff --git a/packages/cashier/src/types/shared/index.ts b/packages/cashier/src/types/shared/index.ts
index f3a0d2a8358e..f7654dda9978 100644
--- a/packages/cashier/src/types/shared/index.ts
+++ b/packages/cashier/src/types/shared/index.ts
@@ -1,5 +1,6 @@
export * from './crypto-transaction-details.types';
export * from './error.types';
export * from './props.types';
+export * from './provider.types';
export * from './routes.types';
export * from './websocket.types';
diff --git a/packages/cashier/src/types/shared/provider.types.ts b/packages/cashier/src/types/shared/provider.types.ts
new file mode 100644
index 000000000000..e15d03ba6026
--- /dev/null
+++ b/packages/cashier/src/types/shared/provider.types.ts
@@ -0,0 +1,22 @@
+import { MutableRefObject } from 'react';
+
+export type TProviderDetails = {
+ icon: {
+ dark: string;
+ light: string;
+ };
+ name: string;
+ getDescription: () => string;
+ getAllowedResidencies: () => string[];
+ getPaymentIcons: () => {
+ dark: string;
+ light: string;
+ }[];
+ getScriptDependencies: () => any[];
+ getDefaultFromCurrency: () => string;
+ getFromCurrencies: () => string;
+ getToCurrencies: () => string;
+ getWidgetHtml: () => Promise;
+ onMountWidgetContainer: (ref?: MutableRefObject) => void;
+ should_show_deposit_address: boolean;
+};