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(() =>
WalletTransfer
)); jest.mock('Components/transaction-list', () => jest.fn(() =>
Transactions
)); +jest.mock('Components/wallet-deposit', () => jest.fn(() =>
Deposit
)); describe('WalletModalBody', () => { let mocked_props: React.ComponentProps; @@ -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 ( -
-
-
- - {({ field }: FieldProps) => ( - { - setFieldValue('from_amount', value); - if (!is_amount_to_input_disabled) { - setFieldValue('to_amount', value); + return ( + +
+
+ + {({ field }: FieldProps) => ( + { + setFieldValue('from_amount', value); + if (!is_amount_to_input_disabled) { + setFieldValue('to_amount', value); + } + }} + /> + )} + + + +
+
+ + {({ field }: FieldProps) => ( + - )} - - - + disabled={is_amount_to_input_disabled} + initial_value={field.value} + label={localize('Amount you receive')} + onChange={(value: number) => { + setFieldValue('from_amount', value); + setFieldValue('to_amount', value); + }} + /> + )} + + + +
-
- - {({ field }: FieldProps) => ( - { - setFieldValue('from_amount', value); - setFieldValue('to_amount', value); - }} - /> - )} - - - +
+
-
-
- -
- - ); - }} - -
- ); -}); + + ); + }} + +
+ ); + } +); export default WalletTransfer; diff --git a/packages/components/src/components/transfer-account-selector/transfer-account-selector.tsx b/packages/components/src/components/transfer-account-selector/transfer-account-selector.tsx index d2b65de5a1c8..b887134b20e2 100644 --- a/packages/components/src/components/transfer-account-selector/transfer-account-selector.tsx +++ b/packages/components/src/components/transfer-account-selector/transfer-account-selector.tsx @@ -10,6 +10,7 @@ import './transfer-account-selector.scss'; export type TTransferAccount = React.ComponentProps['account']; type TTransferAccountSelectorProps = { + contentScrollHandler?: React.UIEventHandler; is_mobile?: boolean; is_wallet_name_visible?: boolean; label?: string; @@ -24,6 +25,7 @@ type TTransferAccountSelectorProps = { }; const TransferAccountSelector = ({ + contentScrollHandler, is_mobile, is_wallet_name_visible, label, @@ -51,16 +53,6 @@ const TransferAccountSelector = ({ setIsListModalOpen(true); }; - const contentScrollHandler = React.useCallback( - (e: React.UIEvent) => { - if (is_mobile && is_list_modal_open) { - const target = e.target as HTMLDivElement; - setIsWalletNameVisible?.(!(target.scrollTop > 0)); - } - }, - [is_list_modal_open, is_mobile, setIsWalletNameVisible] - ); - const getHeightOffset = React.useCallback(() => { const header_height = '16.2rem'; const collapsed_header_height = '12.2rem';