george / wall-14 / fiat deposit (#9060)

* feat: add fiat deposit iframe

* test: fix test

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(() => <div>WalletTransfer</div>));
 jest.mock('Components/transaction-list', () => jest.fn(() => <div>Transactions</div>));
+jest.mock('Components/wallet-deposit', () => jest.fn(() => <div>Deposit</div>));
 
 describe('WalletModalBody', () => {
     let mocked_props: React.ComponentProps<typeof WalletModalBody>;
@@ -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', () => {

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: () => (
-                        <div style={{ textAlign: 'justify' }}>
-                            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.
-                        </div>
-                    ),
+                    content: () => <WalletDeposit />,
                 },
                 { icon: 'IcMinus', label: localize('Withdraw'), content: () => <WalletWithdrawal /> },
                 {

packages/appstore/src/components/modals/wallet-modal/wallet-modal-body.tsx

@@ -84,6 +84,7 @@ const WalletModalBody = observer(
                                     <div className='dc-tabs--modal-body__tabs__content-wrapper'>
                                         {option.content({
                                             is_wallet_name_visible,
+                                            contentScrollHandler,
                                             setIsWalletNameVisible,
                                         })}
                                     </div>

packages/appstore/src/components/modals/wallet-modal/wallet-modal-header.tsx

@@ -97,7 +97,7 @@ const WalletModalHeader = ({
         <div className={`header-background ${gradient_class}`}>
             <div
                 className={classNames(header_class_name, {
-                    [`${header_class_name}--hidden-title`]: !is_wallet_name_visible,
+                    [`${header_class_name}--hidden-title`]: is_mobile && !is_wallet_name_visible,
                 })}
             >
                 <div className={`${header_class_name}__title-wrapper`}>

packages/appstore/src/components/modals/wallet-modal/wallet-modal.tsx

@@ -42,12 +42,12 @@ const WalletModal = observer(() => {
 
     const contentScrollHandler = React.useCallback(
         (e: React.UIEvent<HTMLDivElement, 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 (

packages/appstore/src/components/wallet-deposit/index.ts

@@ -0,0 +1,3 @@
+import WalletDeposit from './wallet-deposit';
+
+export default WalletDeposit;

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;
+    }
+}

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 ? (
+        <Div100vhContainer height_offset={is_mobile ? '14rem' : '26.8rem'} className='wallet-deposit__fiat-container'>
+            <DepositFiatIframe />
+        </Div100vhContainer>
+    ) : (
+        <div> Deposit Development Is In Progress</div>
+    );
+});
+
+export default WalletDeposit;