Sergei / wall 272 / wallet desktop header

packages/appstore/src/components/wallet-header/__tests__/wallet-header.spec.tsx

@@ -0,0 +1,70 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+// import { isMobile } from '@deriv/shared';
+import { useStore } from '@deriv/stores';
+import WalletHeader from '..';
+
+const mocked_root_store: DeepPartial<ReturnType<typeof useStore>> = {
+    ui: {
+        is_dark_mode_on: false,
+    },
+};
+
+jest.mock('@deriv/stores', () => ({
+    __esModule: true,
+    default: 'mockedDefaultExport',
+    observer: <T,>(Component: T) => Component,
+    useStore: () => mocked_root_store,
+}));
+
+// jest.mock('@deriv/shared', () => ({
+//     ...jest.requireActual('@deriv/shared'),
+// }));
+
+// jest.mock('@deriv/components', () => {
+//     const original_module = jest.requireActual('@deriv/components');
+//     return {
+//         ...original_module,
+//         // Icon: jest.fn(() => <div>IcCross</div>),
+//     };
+// });
+
+// jest.mock('@deriv/shared', () => ({
+//     ...jest.requireActual('@deriv/shared'),
+//     // isMobile: jest.fn(() => false),
+// }));
+
+describe('<WalletHeader />', () => {
+    describe('Demo wallet', () => {
+        it('Should render right currency card', () => {
+            const account_type = 'demo';
+            const currency = 'USD';
+            const dt_currency = account_type === 'demo' ? 'demo' : currency.toLowerCase();
+            render(<WalletHeader account_type={account_type} />);
+            const currency_card = screen.queryByTestId(`dt_${dt_currency}`);
+
+            expect(currency_card).toBeInTheDocument();
+        });
+
+        // it('Should render image properly for desktop', () => {
+        //     isMobile.mockReturnValue(false);
+        //     render(<WalletsBannerUpgrade />);
+        //     const desktop_image = screen.queryByTestId(desktop);
+        //     const mobile_image = screen.queryByTestId(mobile);
+
+        //     expect(desktop_image).toBeInTheDocument();
+        //     expect(mobile_image).not.toBeInTheDocument();
+        // });
+
+        // it('Should render image properly for mobile', () => {
+        //     isMobile.mockReturnValue(true);
+        //     render(<WalletsBannerUpgrade />);
+        //     const desktop_image = screen.queryByTestId(desktop);
+        //     const mobile_image = screen.queryByTestId(mobile);
+
+        //     expect(mobile_image).toBeInTheDocument();
+        //     expect(desktop_image).not.toBeInTheDocument();
+        // });
+    });
+});

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

@@ -0,0 +1,4 @@
+import WalletHeader from './wallet-header';
+import './wallet-header.scss';
+
+export default WalletHeader;

packages/appstore/src/components/wallet-header/wallet-currency-card.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import { Icon } from '@deriv/components';
+import { observer, useStore } from '@deriv/stores';
+
+type TWalletCurrencyCard = {
+    account_type: 'demo' | 'real';
+    currency: 'USD' | 'EUR' | 'AUD' | 'BTC' | 'ETH' | 'USDT' | 'eUSDT' | 'tUSDT' | 'LTC' | 'USDC';
+};
+
+const WalletCurrencyCard = observer(({ account_type = 'real', currency = 'USD' }: TWalletCurrencyCard) => {
+    const {
+        ui: { is_dark_mode_on },
+    } = useStore();
+
+    const is_demo = account_type === 'demo';
+    const theme = is_dark_mode_on ? '--dark' : '';
+    const demo_icon_path = is_dark_mode_on ? 'IcWalletDerivDemoDark' : 'IcWalletDerivDemoLight';
+    const class_currency = is_demo ? 'demo' : currency.toLowerCase();
+
+    const currency_icon_path = React.useMemo(
+        () => ({
+            USD: is_demo ? demo_icon_path : 'IcCurrencyUsd',
+            EUR: 'IcCurrencyEur',
+            AUD: 'IcCurrencyAud',
+            BTC: is_dark_mode_on ? 'IcCashierBitcoinDark' : 'IcCashierBitcoinLight',
+            ETH: is_dark_mode_on ? 'IcWalletEtheriumDark' : 'IcWalletEtheriumLight',
+            USDT: is_dark_mode_on ? 'IcWalletTetherDark' : 'IcWalletTetherLight',
+            eUSDT: is_dark_mode_on ? 'IcWalletTetherDark' : 'IcWalletTetherLight',
+            tUSDT: is_dark_mode_on ? 'IcWalletTetherDark' : 'IcWalletTetherLight',
+            LTC: is_dark_mode_on ? 'IcWalletLitecoinDark' : 'IcWalletLitecoinLight',
+            USDC: is_dark_mode_on ? 'IcWalletUsdcDark' : 'IcWalletUsdcLight',
+        }),
+        [demo_icon_path, is_dark_mode_on, is_demo]
+    );
+
+    const is_fiat = currency === 'USD' || currency === 'EUR' || currency === 'AUD';
+    const currency_icon_name = currency_icon_path[currency] || 'Unknown';
+    const currency_icon_size = is_fiat && !is_demo ? 48 : 100;
+    return (
+        <div
+            className={`wallet-header__currency wallet__${class_currency}-bg${theme}`}
+            data-testid={`dt_${class_currency}`}
+        >
+            <Icon icon={currency_icon_name} size={currency_icon_size} />
+        </div>
+    );
+});
+WalletCurrencyCard.displayName = 'WalletCurrencyCard';
+export default WalletCurrencyCard;

packages/appstore/src/components/wallet-header/wallet-header-balance.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { Text, StatusBadge } from '@deriv/components';
+import { Localize } from '@deriv/translations';
+import { getStatusBadgeConfig } from '@deriv/account';
+import { TAccountStatus } from './wallet-header';
+
+type TWalletHeaderBalance = {
+    account_status: TAccountStatus;
+    balance: string;
+    currency: 'USD' | 'EUR' | 'AUD' | 'BTC' | 'ETH' | 'USDT' | 'eUSDT' | 'tUSDT' | 'LTC' | 'USDC';
+};
+
+const WalletHeaderBalance = React.memo(
+    ({ account_status = '', balance = '0.00', currency = 'USD' }: TWalletHeaderBalance) => {
+        const balance_title_size = 'xxs';
+        const balance_amount_size = 'm';
+
+        const balance_title_text = '<0>Wallet balance</0>';
+        const balance_amount_text = `<0>${balance} ${currency}</0>`;
+
+        // TODO: just for test use blank function and empty object. When BE will be ready change it!!!
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
+        const { text: badge_text, icon: badge_icon } = getStatusBadgeConfig(account_status, () => {}, {});
+
+        return (
+            <div className='wallet-header__balance-title-amount'>
+                {account_status ? (
+                    <StatusBadge account_status={account_status} icon={badge_icon} text={badge_text} />
+                ) : (
+                    <React.Fragment>
+                        <Localize
+                            i18n_default_text={balance_title_text}
+                            components={[<Text key={0} color='less-prominent' size={balance_title_size} />]}
+                        />
+                        <Localize
+                            i18n_default_text={balance_amount_text}
+                            components={[<Text key={0} weight='bold' size={balance_amount_size} />]}
+                        />
+                    </React.Fragment>
+                )}
+            </div>
+        );
+    }
+);
+WalletHeaderBalance.displayName = 'WalletHeaderBalance';
+export default WalletHeaderBalance;

packages/appstore/src/components/wallet-header/wallet-header-buttons.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { Icon, Text } from '@deriv/components';
+import { Localize } from '@deriv/translations';
+import classNames from 'classnames';
+
+type TWalletHeaderButtons = {
+    is_disabled?: boolean;
+    is_open: boolean;
+    account_type: 'demo' | 'real';
+};
+
+const WalletHeaderButtons = ({ is_disabled = false, is_open, account_type = 'real' }: TWalletHeaderButtons) => {
+    const is_demo = account_type === 'demo';
+    const button_text_size = 'xs';
+
+    const btn_names = is_demo
+        ? ['Transfer', 'Transactions', 'Deposit']
+        : ['Deposit', 'Withdraw', 'Transfer', 'Transactions'];
+    const icon_names = is_demo
+        ? ['IcAccountTransfer', 'IcStatement', 'IcCashierAdd']
+        : ['IcCashierAdd', 'IcCashierMinus', 'IcAccountTransfer', 'IcStatement'];
+
+    return (
+        <div className='wallet-header__description-buttons'>
+            {btn_names.map((name, index) => (
+                <div key={name} className='wallet-header__description-buttons-item'>
+                    <Icon icon={icon_names[index]} custom_color={'var(--text-general)'} />
+                    <Localize
+                        i18n_default_text={`<0>${is_demo && name === 'Deposit' ? 'Reset balance' : name}</0>`}
+                        components={[
+                            <Text
+                                key={0}
+                                weight='bold'
+                                size={button_text_size}
+                                className={classNames('wallet-header__description-buttons-item-text', {
+                                    'wallet-header__description-buttons-item-active': is_open,
+                                })}
+                            />,
+                        ]}
+                    />
+                </div>
+            ))}
+        </div>
+    );
+};
+WalletHeaderButtons.displayName = 'WalletHeaderButtons';
+export default WalletHeaderButtons;

packages/appstore/src/components/wallet-header/wallet-header-title.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { Text } from '@deriv/components';
+import { Localize } from '@deriv/translations';
+
+type TWalletHeaderTitle = {
+    is_demo: boolean;
+    currency: 'USD' | 'EUR' | 'AUD' | 'BTC' | 'ETH' | 'USDT' | 'eUSDT' | 'tUSDT' | 'LTC' | 'USDC';
+    jurisdiction: 'svg' | 'malta';
+};
+
+const WalletHeaderTitle = React.memo(({ is_demo, currency, jurisdiction }: TWalletHeaderTitle) => {
+    const title_size = 'sm';
+    const badge_size = 'xxxs';
+    const badge_lh_size = 'xxxs';
+
+    const title_text = `<0>${is_demo ? `Demo ${currency}` : currency} Wallet</0>`;
+    const badge_text = `<0>${jurisdiction.toUpperCase()}</0>`;
+
+    return (
+        <div className='wallet-header__description-title'>
+            <Localize i18n_default_text={title_text} components={[<Text key={0} weight='bold' size={title_size} />]} />
+            {!is_demo && (
+                <Localize
+                    i18n_default_text={badge_text}
+                    components={[
+                        <Text
+                            key={0}
+                            weight='bold'
+                            size={badge_size}
+                            line_height={badge_lh_size}
+                            className='wallet-header__description-badge'
+                        />,
+                    ]}
+                />
+            )}
+        </div>
+    );
+});
+WalletHeaderTitle.displayName = 'WalletHeaderTitle';
+export default WalletHeaderTitle;

packages/appstore/src/components/wallet-header/wallet-header.scss

@@ -0,0 +1,102 @@
+.wallet-header {
+    margin: 2.4rem 0;
+    padding: 2.4rem;
+    background-color: var(--general-main-1);
+    border-radius: $BORDER_RADIUS * 4;
+    height: 12.8rem;
+
+    &__demo {
+        background-color: #fff8f9;
+        background-image: url('./../../../src/public/ic-wallet-deriv-demo-dark.svg');
+        // background-image: url('./../../../../components/src/components/icon/wallet/ic-wallet-deriv-demo-dark.svg');
+
+        // /Users/sergeibaranovski/Documents/Projects/deriv-app/packages/components/src/components/icon/wallet/ic-wallet-deriv-demo-dark.svg
+
+        // background-image: url('./../../../../appstore/src/assets/svgs/trading-platform/ic-appstore-cfds.svg');
+        // background-image: url('./../public/sprites/wallet.905c3e8ec16af3c9f44930eae8ad2943.svg#ic-wallet-deriv-demo-dark');
+    }
+
+    &__container {
+        display: flex;
+        height: 8rem;
+    }
+
+    &__currency {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 12.8rem;
+        margin-right: 2.4rem;
+        border-radius: $BORDER_RADIUS * 2;
+    }
+
+    &__description {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        padding-block: 0.5rem;
+
+        &-title {
+            display: flex;
+            align-items: center;
+        }
+
+        &-badge {
+            border: 1px solid var(--text-general);
+            padding-inline: 0.4rem;
+            margin-left: 0.8rem;
+        }
+
+        &-buttons {
+            display: flex;
+
+            &-item {
+                display: flex;
+                align-items: center;
+                // cursor: pointer;
+                height: 3.2rem;
+                border-radius: $BORDER_RADIUS * 4;
+                padding: 0.6rem 1.6rem;
+                margin-right: 0.8rem;
+                border: 1px solid var(--text-general);
+                background-color: var(--general-main-1);
+
+                &:hover {
+                    background-color: var(--shadow-drop);
+                }
+
+                &-text {
+                    display: none;
+                    margin-left: 0.8rem;
+                }
+
+                &-active {
+                    display: block;
+                }
+            }
+        }
+    }
+
+    &__balance {
+        display: flex;
+        align-self: center;
+        padding-block: 1.3rem;
+        margin-left: auto;
+
+        &-title-amount {
+            display: flex;
+            flex-direction: column;
+            padding-inline: 2.4rem;
+        }
+
+        &-arrow-icon {
+            cursor: pointer;
+            transition: transform 0.3s ease;
+            transform: rotate(0deg);
+            align-self: center;
+        }
+        &-arrow-icon-active {
+            transform: rotate(180deg);
+        }
+    }
+}