From 52c9d6d1688da14920971e40ef4a36c922226975 Mon Sep 17 00:00:00 2001
From: George Usynin <103181646+heorhi-deriv@users.noreply.github.com>
Date: Wed, 5 Jul 2023 12:13:42 +0300
Subject: [PATCH] george / wall-14 / fiat deposit (#9060)
* feat: add fiat deposit iframe
* test: fix test
---
.../__tests__/wallet-modal-body.spec.tsx | 5 +-
.../modals/wallet-modal/provider.tsx | 61 +---
.../modals/wallet-modal/wallet-modal-body.tsx | 1 +
.../wallet-modal/wallet-modal-header.tsx | 2 +-
.../modals/wallet-modal/wallet-modal.tsx | 4 +-
.../src/components/wallet-deposit/index.ts | 3 +
.../wallet-deposit/wallet-deposit.scss | 7 +
.../wallet-deposit/wallet-deposit.tsx | 29 ++
.../wallet-transfer/wallet-transfer.tsx | 307 +++++++++---------
.../transfer-account-selector.tsx | 12 +-
10 files changed, 208 insertions(+), 223 deletions(-)
create mode 100644 packages/appstore/src/components/wallet-deposit/index.ts
create mode 100644 packages/appstore/src/components/wallet-deposit/wallet-deposit.scss
create mode 100644 packages/appstore/src/components/wallet-deposit/wallet-deposit.tsx
diff --git a/packages/appstore/src/components/modals/wallet-modal/__tests__/wallet-modal-body.spec.tsx b/packages/appstore/src/components/modals/wallet-modal/__tests__/wallet-modal-body.spec.tsx
index 7c70d0e5ca15..21516d59727c 100644
--- a/packages/appstore/src/components/modals/wallet-modal/__tests__/wallet-modal-body.spec.tsx
+++ b/packages/appstore/src/components/modals/wallet-modal/__tests__/wallet-modal-body.spec.tsx
@@ -7,6 +7,7 @@ import { mockStore, StoreProvider } from '@deriv/stores';
jest.mock('Components/wallet-transfer', () => jest.fn(() =>
;
@@ -48,7 +49,7 @@ describe('WalletModalBody', () => {
mocked_props.wallet_type = 'real';
const mocked_store = mockStore({
traders_hub: {
- active_modal_tab: 'Withdraw',
+ active_modal_tab: 'Transfer',
},
});
renderWithRouter(
@@ -60,7 +61,7 @@ describe('WalletModalBody', () => {
const el_transfer_tab = screen.getByText('Transfer');
userEvent.click(el_transfer_tab);
- expect(screen.getByText('Transfer')).toBeInTheDocument();
+ expect(screen.getByText('Transfer Real')).toBeInTheDocument();
});
it('Should trigger setWalletModalActiveTab callback when the user clicked on the tab', () => {
diff --git a/packages/appstore/src/components/modals/wallet-modal/provider.tsx b/packages/appstore/src/components/modals/wallet-modal/provider.tsx
index f41c7cd71747..38e763f14a53 100644
--- a/packages/appstore/src/components/modals/wallet-modal/provider.tsx
+++ b/packages/appstore/src/components/modals/wallet-modal/provider.tsx
@@ -1,8 +1,9 @@
/* eslint-disable @typescript-eslint/no-empty-function */
import React from 'react';
import { localize } from '@deriv/translations';
-import TransactionList from 'Components/transaction-list';
import DemoResetBalance from 'Components/demo-reset-balance';
+import TransactionList from 'Components/transaction-list';
+import WalletDeposit from 'Components/wallet-deposit';
import WalletTransfer from 'Components/wallet-transfer';
import WalletWithdrawal from '../../wallet-withdrawal';
@@ -15,63 +16,7 @@ export const getCashierOptions = (type: TWalletType) => {
{
icon: 'IcAdd',
label: localize('Deposit'),
- //Remove Lorem ipsum text after QA testing (testing scroll behavior)
- content: () => (
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas euismod lectus odio, sed
- pulvinar ex eleifend eu. Quisque elementum pellentesque felis. Maecenas elementum vitae
- purus sed ullamcorper. In quis tempus diam, non posuere ipsum. Quisque viverra in mauris
- vitae suscipit. Vestibulum sodales elit ac rhoncus laoreet. Praesent vitae orci quis lacus
- laoreet sodales ut in risus. Praesent molestie, ipsum pulvinar molestie finibus, purus elit
- aliquam augue, sit amet faucibus odio sem vel est. Maecenas pellentesque aliquet dolor, at
- efficitur lorem tincidunt quis. Aliquam hendrerit pellentesque euismod. Nunc sem metus,
- lacinia non magna vitae, mollis volutpat nisl. Donec volutpat fringilla lectus, nec
- venenatis nulla suscipit accumsan. Aliquam posuere fermentum nunc, eget tempor metus
- ultrices sit amet. Duis tincidunt ac ipsum ut rutrum. Donec est ante, imperdiet vel eleifend
- dapibus, pretium sit amet diam. Class aptent taciti sociosqu ad litora torquent per conubia
- nostra, per inceptos himenaeos. Cras efficitur urna non tempor vehicula. Curabitur ac tortor
- ut nunc lobortis aliquet molestie id mi. Morbi aliquet porta sapien et auctor. Quisque et
- sem id arcu consequat molestie vitae eget eros. Duis at imperdiet purus. Nulla facilisi.
- Fusce eleifend enim quis mauris condimentum, eget tristique ipsum efficitur. Etiam vel
- posuere odio. Aenean sed ultricies est. Nulla sagittis, elit nec fringilla posuere, erat
- risus euismod ligula, vitae vestibulum enim ligula sed magna. Vestibulum felis odio, blandit
- sed gravida non, mattis at mi. Nulla auctor diam quis ornare venenatis. Vivamus vitae
- vehicula mi, ut aliquam tellus. Vestibulum ante ipsum primis in faucibus orci luctus et
- ultrices posuere cubilia curae; Sed ut urna ultrices, placerat nisl nec, ullamcorper nunc.
- Suspendisse elit justo, cursus vel massa vel, ultricies vulputate eros. Fusce et nisi at mi
- pellentesque viverra non a massa. Maecenas feugiat neque a nulla volutpat ullamcorper. Cras
- accumsan mauris at mauris faucibus, a faucibus metus pulvinar. Etiam sollicitudin metus vel
- diam ultricies suscipit. Pellentesque eu eros ullamcorper, dapibus risus vitae, malesuada
- ante. Morbi tristique sagittis semper. Ut consequat volutpat malesuada. Pellentesque commodo
- odio feugiat sapien vehicula sagittis. Integer rutrum sapien quis pharetra sollicitudin.
- Maecenas commodo tincidunt justo. Aenean posuere nulla nec pulvinar placerat. Duis gravida
- sit amet risus nec vulputate. Donec sit amet erat non ipsum pharetra sodales vel nec velit.
- Fusce ultricies ultrices dignissim. Fusce at volutpat leo, vel blandit mauris. Etiam nec
- metus tellus. Pellentesque in ultrices risus. Nam sodales nulla turpis, eu vestibulum sapien
- ornare aliquet. Praesent porttitor condimentum massa, ut consectetur ligula scelerisque non.
- Cras sodales purus in iaculis commodo. Suspendisse pulvinar pellentesque justo, et rhoncus
- eros maximus nec. Maecenas dapibus eleifend dolor, ut interdum lectus congue ac. Vestibulum
- aliquet suscipit nisi a tempus. Sed sodales ipsum est, in bibendum leo tempor vel. Quisque
- in ipsum arcu. Sed vel hendrerit sapien. Suspendisse scelerisque elementum viverra. Donec
- quis magna ornare urna finibus consectetur. Donec ut imperdiet ipsum. Suspendisse non nisi
- quis arcu fringilla convallis. Nulla sed urna nulla. Pellentesque aliquet posuere ornare.
- Donec auctor purus ac arcu ornare viverra. Vivamus nec quam laoreet turpis semper dignissim.
- Cras vel convallis sem. Orci varius natoque penatibus et magnis dis parturient montes,
- nascetur ridiculus mus. Integer eu leo orci. Aliquam iaculis velit id nulla ornare accumsan
- in dapibus ligula. Vestibulum id dolor id ligula venenatis semper vel ac augue. Nulla vel
- pharetra justo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
- inceptos himenaeos. Nulla venenatis interdum ultricies. Curabitur eu gravida ex, at ultrices
- massa. Vivamus efficitur placerat magna vel posuere. Praesent ut nunc pretium, commodo dui
- sed, semper sapien. Sed in vulputate arcu, vitae interdum nibh. Cras sodales, ligula eu
- semper mattis, nunc ante hendrerit dui, a aliquam eros nulla laoreet augue. Nunc convallis
- efficitur eros sed posuere. Phasellus mollis arcu et urna efficitur, non consectetur risus
- accumsan. Fusce metus augue, rutrum in eros eget, sodales ultrices mauris. Aliquam nisi mi,
- malesuada sit amet sem vitae, dictum porta tellus. Proin in semper nisi, vitae blandit eros.
- Fusce in dignissim orci. Phasellus imperdiet, justo eu efficitur consectetur, nulla elit
- efficitur justo, posuere cursus ligula metus eu sapien. Nullam posuere mi et ante aliquet, a
- accumsan nulla iaculis. Interdum et malesuada fames ac ante ipsum primis in faucibus.
-
- ),
+ content: () => ,
},
{ icon: 'IcMinus', label: localize('Withdraw'), content: () => },
{
diff --git a/packages/appstore/src/components/modals/wallet-modal/wallet-modal-body.tsx b/packages/appstore/src/components/modals/wallet-modal/wallet-modal-body.tsx
index 9f60afae6cf6..e214197c4459 100644
--- a/packages/appstore/src/components/modals/wallet-modal/wallet-modal-body.tsx
+++ b/packages/appstore/src/components/modals/wallet-modal/wallet-modal-body.tsx
@@ -84,6 +84,7 @@ const WalletModalBody = observer(
{option.content({
is_wallet_name_visible,
+ contentScrollHandler,
setIsWalletNameVisible,
})}
diff --git a/packages/appstore/src/components/modals/wallet-modal/wallet-modal-header.tsx b/packages/appstore/src/components/modals/wallet-modal/wallet-modal-header.tsx
index 024956d041ec..209213f61ad3 100644
--- a/packages/appstore/src/components/modals/wallet-modal/wallet-modal-header.tsx
+++ b/packages/appstore/src/components/modals/wallet-modal/wallet-modal-header.tsx
@@ -97,7 +97,7 @@ const WalletModalHeader = ({
diff --git a/packages/appstore/src/components/modals/wallet-modal/wallet-modal.tsx b/packages/appstore/src/components/modals/wallet-modal/wallet-modal.tsx
index ee9866950e06..d6a62ba3d329 100644
--- a/packages/appstore/src/components/modals/wallet-modal/wallet-modal.tsx
+++ b/packages/appstore/src/components/modals/wallet-modal/wallet-modal.tsx
@@ -42,12 +42,12 @@ const WalletModal = observer(() => {
const contentScrollHandler = React.useCallback(
(e: React.UIEvent
) => {
- if (is_mobile && is_wallet_modal_visible) {
+ if (is_mobile) {
const target = e.target as HTMLDivElement;
setIsWalletNameVisible(!(target.scrollTop > 0));
}
},
- [is_mobile, is_wallet_modal_visible]
+ [is_mobile]
);
return (
diff --git a/packages/appstore/src/components/wallet-deposit/index.ts b/packages/appstore/src/components/wallet-deposit/index.ts
new file mode 100644
index 000000000000..7a81ec16480e
--- /dev/null
+++ b/packages/appstore/src/components/wallet-deposit/index.ts
@@ -0,0 +1,3 @@
+import WalletDeposit from './wallet-deposit';
+
+export default WalletDeposit;
diff --git a/packages/appstore/src/components/wallet-deposit/wallet-deposit.scss b/packages/appstore/src/components/wallet-deposit/wallet-deposit.scss
new file mode 100644
index 000000000000..2daf382ce975
--- /dev/null
+++ b/packages/appstore/src/components/wallet-deposit/wallet-deposit.scss
@@ -0,0 +1,7 @@
+.wallet-deposit {
+ &__fiat-container {
+ display: flex;
+ max-width: 58.8rem;
+ margin: 0 auto;
+ }
+}
diff --git a/packages/appstore/src/components/wallet-deposit/wallet-deposit.tsx b/packages/appstore/src/components/wallet-deposit/wallet-deposit.tsx
new file mode 100644
index 000000000000..4e26439f5c3f
--- /dev/null
+++ b/packages/appstore/src/components/wallet-deposit/wallet-deposit.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import { useCurrencyConfig } from '@deriv/hooks';
+import { useStore, observer } from '@deriv/stores';
+import { Div100vhContainer } from '@deriv/components';
+import DepositFiatIframe from '@deriv/cashier/src/modules/deposit-fiat/components/deposit-fiat-iframe/deposit-fiat-iframe';
+import './wallet-deposit.scss';
+
+const WalletDeposit = observer(() => {
+ const { client, ui } = useStore();
+ const { is_mobile } = ui;
+ const { currency, loginid } = client;
+
+ const { getConfig } = useCurrencyConfig();
+ const currency_config = getConfig(currency);
+ const is_crypto = currency_config?.is_crypto;
+
+ //TODO: remove when selected wallet will be provided to WalletDeposit props
+ const real_fiat_wallet = loginid?.startsWith('CRW') && !is_crypto;
+
+ return real_fiat_wallet ? (
+
+
+
+ ) : (
+ Deposit Development Is In Progress
+ );
+});
+
+export default WalletDeposit;
diff --git a/packages/appstore/src/components/wallet-transfer/wallet-transfer.tsx b/packages/appstore/src/components/wallet-transfer/wallet-transfer.tsx
index 96ca80fa4b66..3d454dcaa531 100644
--- a/packages/appstore/src/components/wallet-transfer/wallet-transfer.tsx
+++ b/packages/appstore/src/components/wallet-transfer/wallet-transfer.tsx
@@ -11,172 +11,179 @@ import './wallet-transfer.scss';
type TAccount = React.ComponentProps['value'];
type TWalletTransferProps = {
+ contentScrollHandler: React.UIEventHandler;
is_wallet_name_visible: boolean;
setIsWalletNameVisible: (value: boolean) => void;
};
const Divider = () => ;
-const WalletTransfer = observer(({ is_wallet_name_visible, setIsWalletNameVisible }: TWalletTransferProps) => {
- const { ui } = useStore();
- const { is_mobile } = ui;
+const WalletTransfer = observer(
+ ({ contentScrollHandler, is_wallet_name_visible, setIsWalletNameVisible }: TWalletTransferProps) => {
+ const { ui } = useStore();
+ const { is_mobile } = ui;
- const [from_account, setFromAccount] = React.useState(transfer_accounts.wallets[0]);
- const [to_account, setToAccount] = React.useState();
+ const [from_account, setFromAccount] = React.useState(transfer_accounts.wallets[0]);
+ const [to_account, setToAccount] = React.useState();
- const portal_id = is_mobile ? 'mobile_list_modal_root' : 'modal_root';
+ const portal_id = is_mobile ? 'mobile_list_modal_root' : 'modal_root';
- const to_account_list = React.useMemo(() => {
- // TODO: 'Demo USD Wallet' should be replaced to the current open wallet after connecting to API call
- if (from_account?.label === 'Demo USD Wallet') {
- setToAccount(undefined);
- return { accounts: transfer_accounts.accounts, wallets: [] };
- }
- setToAccount(transfer_accounts.wallets[0]);
- return { wallets: transfer_accounts.wallets, accounts: [] };
- }, [from_account?.label]);
+ const to_account_list = React.useMemo(() => {
+ // TODO: 'Demo USD Wallet' should be replaced to the current open wallet after connecting to API call
+ if (from_account?.label === 'Demo USD Wallet') {
+ setToAccount(undefined);
+ return { accounts: transfer_accounts.accounts, wallets: [] };
+ }
+ setToAccount(transfer_accounts.wallets[0]);
+ return { wallets: transfer_accounts.wallets, accounts: [] };
+ }, [from_account?.label]);
- const transfer_to_hint = React.useMemo(() => {
- // TODO: 'Demo USD Wallet' should be replaced to the current open wallet after connecting to API call
- return to_account?.label === 'Demo USD Wallet' ? (
-
- ) : (
- ''
- );
- }, [from_account?.label, to_account?.label]);
+ const transfer_to_hint = React.useMemo(() => {
+ // TODO: 'Demo USD Wallet' should be replaced to the current open wallet after connecting to API call
+ return to_account?.label === 'Demo USD Wallet' ? (
+
+ ) : (
+ ''
+ );
+ }, [from_account?.label, to_account?.label]);
- const is_amount_to_input_disabled = !to_account;
+ const is_amount_to_input_disabled = !to_account;
- return (
-
-
undefined}
- validateOnBlur={false}
- >
- {({ setFieldValue, values }) => {
- const onSelectToAccount = React.useCallback(
- (account: TAccount) => {
- setToAccount(account);
- setFieldValue('to_amount', values.from_amount);
- },
- [setFieldValue, values.from_amount]
- );
+ return (
+
+
undefined}
+ validateOnBlur={false}
+ >
+ {({ setFieldValue, values }) => {
+ const onSelectToAccount = React.useCallback(
+ (account: TAccount) => {
+ setToAccount(account);
+ setFieldValue('to_amount', values.from_amount);
+ },
+ [setFieldValue, values.from_amount]
+ );
- const onSelectFromAccount = React.useCallback(
- (account: TAccount) => {
- setFromAccount(account);
- if (account?.label === 'Demo USD Wallet') {
- setFieldValue('to_amount', 0);
- }
- },
- [setFieldValue]
- );
+ const onSelectFromAccount = React.useCallback(
+ (account: TAccount) => {
+ setFromAccount(account);
+ if (account?.label === 'Demo USD Wallet') {
+ setFieldValue('to_amount', 0);
+ }
+ },
+ [setFieldValue]
+ );
- return (
-