diff --git a/package-lock.json b/package-lock.json index 65af85c4..8cc059ee 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,7 +11,7 @@ "@babel/preset-env": "^7.24.5", "@deriv-com/api-hooks": "^0.1.19", "@deriv-com/translations": "^1.2.0", - "@deriv-com/ui": "latest", + "@deriv-com/ui": "^1.21.1", "@deriv-com/utils": "latest", "@deriv/deriv-api": "^1.0.15", "@deriv/quill-design": "^1.2.24", @@ -2716,10 +2716,11 @@ } }, "node_modules/@deriv-com/ui": { - "version": "1.14.1", - "resolved": "https://registry.npmjs.org/@deriv-com/ui/-/ui-1.14.1.tgz", - "integrity": "sha512-gaLopXyvYQrB0DLT/fpbU4JNd5R9u6XDnKvBqrsyRgidSPmth/Q3ar6M4qe5Q2GBisbOkcMawPmIkHJkZ71kfQ==", + "version": "1.21.1", + "resolved": "https://registry.npmjs.org/@deriv-com/ui/-/ui-1.21.1.tgz", + "integrity": "sha512-8aokCnRAQJqnpr8Kzz4qpdRoqy2EJrusfVtUSS8nb1uUvIQiMRwPMzqPt1A/OojFmTDHpES7YJPPLlu2e90LpQ==", "dependencies": { + "@deriv/quill-icons": "^1.22.5", "@types/react-modal": "^3.16.3" }, "optionalDependencies": { @@ -2763,9 +2764,9 @@ } }, "node_modules/@deriv/quill-icons": { - "version": "1.22.0", - "resolved": "https://registry.npmjs.org/@deriv/quill-icons/-/quill-icons-1.22.0.tgz", - "integrity": "sha512-q5ELpEeQT+oFF7hh9Z3qi9JDc8TyCpPDJ2MfSzKFw+bcNH1+rIxHUksjgzQjrPiLlWyb0P6U0RPZtyrBVhOm3g==", + "version": "1.22.6", + "resolved": "https://registry.npmjs.org/@deriv/quill-icons/-/quill-icons-1.22.6.tgz", + "integrity": "sha512-i5El+qnJEXgc/IAc9XweexpZX5TlqqOsE+PEX2dP2te7IcnxVTGyLxFlXbgARbwQzGV5638d5fMrw7eUtmPGAQ==", "peerDependencies": { "react": ">= 16", "react-dom": ">= 16" @@ -22683,10 +22684,11 @@ } }, "@deriv-com/ui": { - "version": "1.14.1", - "resolved": "https://registry.npmjs.org/@deriv-com/ui/-/ui-1.14.1.tgz", - "integrity": "sha512-gaLopXyvYQrB0DLT/fpbU4JNd5R9u6XDnKvBqrsyRgidSPmth/Q3ar6M4qe5Q2GBisbOkcMawPmIkHJkZ71kfQ==", + "version": "1.21.1", + "resolved": "https://registry.npmjs.org/@deriv-com/ui/-/ui-1.21.1.tgz", + "integrity": "sha512-8aokCnRAQJqnpr8Kzz4qpdRoqy2EJrusfVtUSS8nb1uUvIQiMRwPMzqPt1A/OojFmTDHpES7YJPPLlu2e90LpQ==", "requires": { + "@deriv/quill-icons": "^1.22.5", "@rollup/rollup-linux-x64-gnu": "^4.13.0", "@types/react-modal": "^3.16.3" } @@ -22718,9 +22720,9 @@ "requires": {} }, "@deriv/quill-icons": { - "version": "1.22.0", - "resolved": "https://registry.npmjs.org/@deriv/quill-icons/-/quill-icons-1.22.0.tgz", - "integrity": "sha512-q5ELpEeQT+oFF7hh9Z3qi9JDc8TyCpPDJ2MfSzKFw+bcNH1+rIxHUksjgzQjrPiLlWyb0P6U0RPZtyrBVhOm3g==", + "version": "1.22.6", + "resolved": "https://registry.npmjs.org/@deriv/quill-icons/-/quill-icons-1.22.6.tgz", + "integrity": "sha512-i5El+qnJEXgc/IAc9XweexpZX5TlqqOsE+PEX2dP2te7IcnxVTGyLxFlXbgARbwQzGV5638d5fMrw7eUtmPGAQ==", "requires": {} }, "@esbuild/aix-ppc64": { diff --git a/package.json b/package.json index 24a7a526..50f91b17 100644 --- a/package.json +++ b/package.json @@ -17,7 +17,7 @@ "@babel/preset-env": "^7.24.5", "@deriv-com/api-hooks": "^0.1.19", "@deriv-com/translations": "^1.2.0", - "@deriv-com/ui": "latest", + "@deriv-com/ui": "^1.21.1", "@deriv-com/utils": "latest", "@deriv/deriv-api": "^1.0.15", "@deriv/quill-design": "^1.2.24", diff --git a/src/App.tsx b/src/App.tsx index 6c73e726..d8604477 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,8 +1,9 @@ import { BrowserRouter } from 'react-router-dom'; import { QueryParamProvider } from 'use-query-params'; import { ReactRouter5Adapter } from 'use-query-params/adapters/react-router-5'; -import { Header } from '@/components'; +import { AppFooter, AppHeader } from '@/components'; import { initializeI18n, TranslationProvider } from '@deriv-com/translations'; +import { useDevice } from '@deriv-com/ui'; import AppContent from './routes/AppContent'; //TODO: replace with ${process.env.VITE_PROJECT_NAME}/${process.env.VITE_CROWDIN_BRANCH_NAME} @@ -11,12 +12,15 @@ const i18nInstance = initializeI18n({ }); const App = () => { + const { isDesktop } = useDevice(); + return ( -
+ + {isDesktop && } diff --git a/src/components/AppFooter/AppFooter.scss b/src/components/AppFooter/AppFooter.scss new file mode 100644 index 00000000..222db1ef --- /dev/null +++ b/src/components/AppFooter/AppFooter.scss @@ -0,0 +1,13 @@ +.app-footer { + padding: 2.4rem; + + &__language-btn { + &:hover { + background-color: transparent !important; + + span { + color: #000 !important; + } + } + } +} diff --git a/src/components/AppFooter/AppFooter.tsx b/src/components/AppFooter/AppFooter.tsx new file mode 100644 index 00000000..340e4947 --- /dev/null +++ b/src/components/AppFooter/AppFooter.tsx @@ -0,0 +1,32 @@ +import { LanguagesModal } from '@/components/Modals'; +import { LANGUAGES } from '@/constants'; +import { useModalManager } from '@/hooks/custom-hooks'; +import { IconTypes } from '@deriv/quill-icons'; +import { useTranslations } from '@deriv-com/translations'; +import { Button, Footer } from '@deriv-com/ui'; +import './AppFooter.scss'; + +// TODO: handle local storage values not updating after changing local storage values +const AppFooter = () => { + const { currentLang } = useTranslations(); + const { hideModal, isModalOpenFor, showModal } = useModalManager(); + const CountryIcon = LANGUAGES.find(lang => lang.code === currentLang)?.icon as IconTypes; + + return ( +
+ + {isModalOpenFor('LanguagesModal') && } +
+ ); +}; + +export default AppFooter; diff --git a/src/components/AppFooter/__tests__/AppFooter.spec.tsx b/src/components/AppFooter/__tests__/AppFooter.spec.tsx new file mode 100644 index 00000000..dfdb0b98 --- /dev/null +++ b/src/components/AppFooter/__tests__/AppFooter.spec.tsx @@ -0,0 +1,23 @@ +import { render, screen } from '@testing-library/react'; +import AppFooter from '../AppFooter'; + +jest.mock('use-query-params', () => ({ + ...jest.requireActual('use-query-params'), + useQueryParams: jest.fn().mockReturnValue([{}, jest.fn()]), +})); + +jest.mock('@deriv-com/translations', () => ({ + useTranslations: jest.fn(() => ({ currentLang: 'EN' })), +})); + +jest.mock('@deriv-com/ui', () => ({ + ...jest.requireActual('@deriv-com/ui'), + useDevice: jest.fn(() => ({ isMobile: false })), +})); + +describe('', () => { + it('should render the footer', () => { + render(); + expect(screen.getByRole('button', { name: 'EN' })).toBeInTheDocument(); + }); +}); diff --git a/src/components/AppFooter/index.ts b/src/components/AppFooter/index.ts new file mode 100644 index 00000000..b832b24e --- /dev/null +++ b/src/components/AppFooter/index.ts @@ -0,0 +1 @@ +export { default as AppFooter } from './AppFooter'; diff --git a/src/components/AppHeader/AppHeader.scss b/src/components/AppHeader/AppHeader.scss new file mode 100644 index 00000000..749eeffe --- /dev/null +++ b/src/components/AppHeader/AppHeader.scss @@ -0,0 +1,7 @@ +.app-header { + padding: 2.4rem; + + @include mobile { + padding-left: 0; + } +} diff --git a/src/components/AppHeader/AppHeader.tsx b/src/components/AppHeader/AppHeader.tsx new file mode 100644 index 00000000..c6c2ce03 --- /dev/null +++ b/src/components/AppHeader/AppHeader.tsx @@ -0,0 +1,93 @@ +import { useState } from 'react'; +import { + LabelPairedHouseBlankMdRegularIcon, + LegacyChevronRight2pxIcon, + LegacyMenuHamburger1pxIcon, +} from '@deriv/quill-icons'; +import { useAuthData } from '@deriv-com/api-hooks'; +import { Button, DerivLogo, Drawer, Header, MenuItem, Text, useDevice, Wrapper } from '@deriv-com/ui'; +import { LocalStorageConstants, LocalStorageUtils, URLUtils } from '@deriv-com/utils'; +import './AppHeader.scss'; + +// TODO: handle local storage values not updating after changing local storage values +const AppHeader = () => { + const [isDrawerOpen, setIsDrawerOpen] = useState(false); + const { isDesktop } = useDevice(); + const { activeLoginid, logout } = useAuthData(); + const appId = LocalStorageUtils.getValue(LocalStorageConstants.configAppId); + const serverUrl = localStorage.getItem(LocalStorageConstants.configServerURL.toString()); + const oauthUrl = + appId && serverUrl + ? `https://${serverUrl}/oauth2/authorize?app_id=${appId}&l=EN&&brand=deriv` + : URLUtils.getOauthURL(); + + return ( +
+ {isDesktop ? ( + + + } + > + Trader's Hub + + + ) : ( + + { + setIsDrawerOpen(false); + }} + width='300px' + > + { + setIsDrawerOpen(false); + }} + > + Menu + + +
+ } + rightComponent={} + > + Trader's Hub + +
+
+
+ + ) : ( + + Log in + + )} +
+ ); +}; + +export default AppHeader; diff --git a/src/components/Header/__tests__/Header.spec.tsx b/src/components/AppHeader/__tests__/AppHeader.spec.tsx similarity index 90% rename from src/components/Header/__tests__/Header.spec.tsx rename to src/components/AppHeader/__tests__/AppHeader.spec.tsx index 8fcf8b9a..85bf541d 100644 --- a/src/components/Header/__tests__/Header.spec.tsx +++ b/src/components/AppHeader/__tests__/AppHeader.spec.tsx @@ -3,7 +3,7 @@ import { useAuthData } from '@deriv-com/api-hooks'; import { URLUtils } from '@deriv-com/utils'; import { render, screen } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; -import Header from '../Header'; +import AppHeader from '../AppHeader'; const mockUseAuthData = useAuthData as jest.Mock; jest.mock('@deriv-com/api-hooks', () => ({ @@ -17,14 +17,14 @@ jest.mock('@deriv-com/ui', () => ({ ), })); -describe('
', () => { +describe('', () => { it('should render the header', () => { - render(
); + render(); expect(screen.getByRole('link', { name: 'Login' })).toHaveAttribute('href', URLUtils.getOauthURL()); }); it('should handle the logout functionality if there is an active login id', async () => { mockUseAuthData.mockReturnValue({ activeLoginid: '12345', logout: jest.fn() }); - render(
); + render(); const logoutButton = screen.getByRole('button', { name: 'Logout' }); const { logout } = mockUseAuthData(); diff --git a/src/components/AppHeader/index.ts b/src/components/AppHeader/index.ts new file mode 100644 index 00000000..6b822c41 --- /dev/null +++ b/src/components/AppHeader/index.ts @@ -0,0 +1 @@ +export { default as AppHeader } from './AppHeader'; diff --git a/src/components/Header/Header.scss b/src/components/Header/Header.scss deleted file mode 100644 index 98a760f8..00000000 --- a/src/components/Header/Header.scss +++ /dev/null @@ -1,16 +0,0 @@ -.header { - height: 4rem; - display: flex; - justify-content: space-between; - align-items: center; - font-size: 1.6rem; - font-weight: 800; - border-bottom: 2px solid #f2f3f4; - padding: 2.4rem; - margin-bottom: 2.4rem; - - @include mobile { - padding: 0.8rem 2.4rem; - margin-bottom: 0; - } -} diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx deleted file mode 100644 index 38d309d3..00000000 --- a/src/components/Header/Header.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import { DerivProductDerivP2pBrandLightLogoWordmarkHorizontalIcon } from '@deriv/quill-icons'; -import { useAuthData } from '@deriv-com/api-hooks'; -import { Button } from '@deriv-com/ui'; -import { LocalStorageConstants, LocalStorageUtils, URLUtils } from '@deriv-com/utils'; -import './Header.scss'; - -// TODO: handle local storage values not updating after changing local storage values -const Header = () => { - const { activeLoginid, logout } = useAuthData(); - const appId = LocalStorageUtils.getValue(LocalStorageConstants.configAppId); - const serverUrl = localStorage.getItem(LocalStorageConstants.configServerURL.toString()); - const oauthUrl = - appId && serverUrl - ? `https://${serverUrl}/oauth2/authorize?app_id=${appId}&l=EN&&brand=deriv` - : URLUtils.getOauthURL(); - - return ( -
- - {activeLoginid ? ( - - ) : ( - - Login - - )} -
- ); -}; - -export default Header; diff --git a/src/components/Header/index.ts b/src/components/Header/index.ts deleted file mode 100644 index 5653319d..00000000 --- a/src/components/Header/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as Header } from './Header'; diff --git a/src/components/Modals/LanguagesModal/LanguagesModal.scss b/src/components/Modals/LanguagesModal/LanguagesModal.scss new file mode 100644 index 00000000..00e89425 --- /dev/null +++ b/src/components/Modals/LanguagesModal/LanguagesModal.scss @@ -0,0 +1,23 @@ +.languages-modal { + &__body { + display: grid; + grid-template-columns: repeat(4, 1fr); + grid-gap: 1rem; + padding: 2rem; + + &-button { + height: auto; + display: flex; + align-items: center; + flex-direction: column; + + &:hover { + background-color: transparent !important; + + span { + color: #000 !important; + } + } + } + } +} diff --git a/src/components/Modals/LanguagesModal/LanguagesModal.tsx b/src/components/Modals/LanguagesModal/LanguagesModal.tsx new file mode 100644 index 00000000..b312e768 --- /dev/null +++ b/src/components/Modals/LanguagesModal/LanguagesModal.tsx @@ -0,0 +1,45 @@ +import { LANGUAGES } from '@/constants'; +import { useTranslations } from '@deriv-com/translations'; +import { Button, Modal, Text } from '@deriv-com/ui'; +import './LanguagesModal.scss'; + +type TLanguagesModalProps = { + isModalOpen: boolean; + onClose: () => void; +}; + +const LanguagesModal = ({ isModalOpen, onClose }: TLanguagesModalProps) => { + const { currentLang, switchLanguage } = useTranslations(); + + return ( + + + {'Select Language'} + + + {LANGUAGES.map(language => { + const LanguageIcon = language.icon; + return ( + + ); + })} + + + ); +}; + +export default LanguagesModal; diff --git a/src/components/Modals/LanguagesModal/index.ts b/src/components/Modals/LanguagesModal/index.ts new file mode 100644 index 00000000..0cfe8480 --- /dev/null +++ b/src/components/Modals/LanguagesModal/index.ts @@ -0,0 +1 @@ +export { default as LanguagesModal } from './LanguagesModal'; diff --git a/src/components/Modals/index.ts b/src/components/Modals/index.ts index 0000dee5..9f4bcc81 100644 --- a/src/components/Modals/index.ts +++ b/src/components/Modals/index.ts @@ -11,6 +11,7 @@ export * from './DailyLimitModal'; export * from './EmailVerificationModal'; export * from './ErrorModal'; export * from './FilterModal'; +export * from './LanguagesModal'; export * from './MyAdsDeleteModal'; export * from './NicknameModal'; export * from './OrderDetailsCancelModal'; diff --git a/src/components/index.ts b/src/components/index.ts index 7406e03c..a617e7ab 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -1,5 +1,7 @@ export * from './AdvertiserName'; export * from './AdvertsTableRow'; +export * from './AppFooter'; +export * from './AppHeader'; export * from './Badge'; export * from './BuySellForm'; export * from './Checklist'; @@ -9,7 +11,6 @@ export * from './FileDropzone'; export * from './FloatingRate'; export * from './FormProgress'; export * from './FullPageMobileWrapper'; -export * from './Header'; export * from './Input'; export * from './LightDivider'; export * from './MobileTabs'; diff --git a/src/constants/index.ts b/src/constants/index.ts index 1c1a6aec..38e24176 100644 --- a/src/constants/index.ts +++ b/src/constants/index.ts @@ -2,6 +2,7 @@ export * from './ad-constants'; export * from './api-error-codes'; export * from './buy-sell'; export * from './chat-constants'; +export * from './languages'; export * from './orders'; export * from './p2p-logo'; export * from './payment-methods'; diff --git a/src/constants/languages.ts b/src/constants/languages.ts new file mode 100644 index 00000000..9e5ac83b --- /dev/null +++ b/src/constants/languages.ts @@ -0,0 +1,29 @@ +import { + FlagFranceIcon, + FlagGermanyIcon, + FlagItalyIcon, + FlagPolandIcon, + FlagPortugalIcon, + FlagRussiaIcon, + FlagSpainIcon, + FlagThailandIcon, + FlagTurkeyIcon, + FlagUnitedArabEmiratesIcon, + FlagUnitedKingdomIcon, + FlagVietnamIcon, +} from '@deriv/quill-icons'; + +export const LANGUAGES = [ + { code: 'AR', display_name: 'العربية', icon: FlagUnitedArabEmiratesIcon }, + { code: 'DE', display_name: 'Deutsch', icon: FlagGermanyIcon }, + { code: 'EN', display_name: 'English', icon: FlagUnitedKingdomIcon }, + { code: 'ES', display_name: 'Español', icon: FlagSpainIcon }, + { code: 'FR', display_name: 'Français', icon: FlagFranceIcon }, + { code: 'IT', display_name: 'Italiano', icon: FlagItalyIcon }, + { code: 'PL', display_name: 'Polish', icon: FlagPolandIcon }, + { code: 'PT', display_name: 'Português', icon: FlagPortugalIcon }, + { code: 'RU', display_name: 'Русский', icon: FlagRussiaIcon }, + { code: 'TH', display_name: 'ไทย', icon: FlagThailandIcon }, + { code: 'TR', display_name: 'Türkçe', icon: FlagTurkeyIcon }, + { code: 'VI', display_name: 'Tiếng Việt', icon: FlagVietnamIcon }, +]; diff --git a/src/hooks/__tests__/useModalManager.spec.tsx b/src/hooks/__tests__/useModalManager.spec.tsx index 077eacae..d339263c 100644 --- a/src/hooks/__tests__/useModalManager.spec.tsx +++ b/src/hooks/__tests__/useModalManager.spec.tsx @@ -304,6 +304,7 @@ describe('useModalManager', () => { isDesktop: false, isMobile: true, isTablet: false, + isTabletPortrait: false, })); mockedUseQueryString.mockImplementationOnce(() => ({ deleteQueryString: jest.fn(), diff --git a/src/pages/buy-sell/screens/BuySellTable/BuySellTable.scss b/src/pages/buy-sell/screens/BuySellTable/BuySellTable.scss index 9eb5a03c..51441a5d 100644 --- a/src/pages/buy-sell/screens/BuySellTable/BuySellTable.scss +++ b/src/pages/buy-sell/screens/BuySellTable/BuySellTable.scss @@ -7,6 +7,7 @@ } &__content { overflow: auto; + padding-bottom: 2rem; @include mobile { // stylelint-disable-next-line declaration-no-important diff --git a/src/pages/endpoint/screens/Endpoint/Endpoint.scss b/src/pages/endpoint/screens/Endpoint/Endpoint.scss index b8a5391f..cdeb472a 100644 --- a/src/pages/endpoint/screens/Endpoint/Endpoint.scss +++ b/src/pages/endpoint/screens/Endpoint/Endpoint.scss @@ -1,6 +1,7 @@ .endpoint { position: absolute; top: 8rem; + left: 0; background: #fff; width: 100%; height: 60%; diff --git a/src/pages/my-profile/screens/MyProfileCounterparties/MyProfileCounterpartiesTable/MyProfileCounterpartiesTable.tsx b/src/pages/my-profile/screens/MyProfileCounterparties/MyProfileCounterpartiesTable/MyProfileCounterpartiesTable.tsx index 8d6840ab..7c958126 100644 --- a/src/pages/my-profile/screens/MyProfileCounterparties/MyProfileCounterpartiesTable/MyProfileCounterpartiesTable.tsx +++ b/src/pages/my-profile/screens/MyProfileCounterparties/MyProfileCounterpartiesTable/MyProfileCounterpartiesTable.tsx @@ -60,7 +60,6 @@ const MyProfileCounterpartiesTable = ({ return ( ( { isDesktop: false, isMobile: true, isTablet: false, + isTabletPortrait: false, }); const onAddPaymentMethod = jest.fn(); render(); @@ -57,6 +58,7 @@ describe('PaymentMethodsEmpty', () => { isDesktop: false, isMobile: true, isTablet: false, + isTabletPortrait: false, }); const onAddPaymentMethod = jest.fn(); render(); @@ -71,6 +73,7 @@ describe('PaymentMethodsEmpty', () => { isDesktop: false, isMobile: true, isTablet: false, + isTabletPortrait: false, }); const onAddPaymentMethod = jest.fn(); render(); diff --git a/src/pages/my-profile/screens/PaymentMethods/PaymentMethodsList/__test__/PaymentMethodsList.spec.tsx b/src/pages/my-profile/screens/PaymentMethods/PaymentMethodsList/__test__/PaymentMethodsList.spec.tsx index b051e256..7f04776a 100644 --- a/src/pages/my-profile/screens/PaymentMethods/PaymentMethodsList/__test__/PaymentMethodsList.spec.tsx +++ b/src/pages/my-profile/screens/PaymentMethods/PaymentMethodsList/__test__/PaymentMethodsList.spec.tsx @@ -27,6 +27,7 @@ describe('PaymentMethodsList', () => { isDesktop: false, isMobile: true, isTablet: false, + isTabletPortrait: false, }); render( { isDesktop: false, isMobile: false, isTablet: false, + isTabletPortrait: false, }); render( { isDesktop: false, isMobile: true, isTablet: false, + isTabletPortrait: false, }); render( { isDesktop: false, isMobile: false, isTablet: false, + isTabletPortrait: false, }); render( { isDesktop: false, isMobile: true, isTablet: false, + isTabletPortrait: false, }); render( { const { data = [], - isFetching, isLoading, loadMoreOrders, } = api.order.useGetList({ active: currentTab === ORDERS_STATUS.ACTIVE_ORDERS ? 1 : 0 }); @@ -24,7 +23,6 @@ const Orders = () => { diff --git a/src/pages/orders/screens/Orders/OrdersTable/OrdersTable.tsx b/src/pages/orders/screens/Orders/OrdersTable/OrdersTable.tsx index c85320e4..b60f0d0f 100644 --- a/src/pages/orders/screens/Orders/OrdersTable/OrdersTable.tsx +++ b/src/pages/orders/screens/Orders/OrdersTable/OrdersTable.tsx @@ -64,12 +64,11 @@ const columnsPast = [ type TOrdersTableProps = { data: THooks.Order.GetList; isActive: boolean; - isFetching: boolean; isLoading: boolean; loadMoreOrders: () => void; }; -const OrdersTable = ({ data, isActive, isFetching, isLoading, loadMoreOrders }: TOrdersTableProps) => { +const OrdersTable = ({ data, isActive, isLoading, loadMoreOrders }: TOrdersTableProps) => { const { isMobile } = useDevice(); if (data?.length === 0 && !isLoading) { return ; @@ -84,7 +83,6 @@ const OrdersTable = ({ data, isActive, isFetching, isLoading, loadMoreOrders }:
( diff --git a/src/routes/AppContent/index.scss b/src/routes/AppContent/index.scss index af981e8a..c16458bf 100644 --- a/src/routes/AppContent/index.scss +++ b/src/routes/AppContent/index.scss @@ -1,15 +1,16 @@ .app-content { overflow: hidden; - min-height: calc(100vh - 48px - 36px - 53px - 2.4rem); + height: calc(100vh - 14rem); @include desktop { max-width: 952px; min-width: 672px; - margin: 0 auto; + margin: 2rem auto; } @include mobile { width: 100vw; + height: 100vh; } &__tabs { diff --git a/src/routes/AppContent/index.tsx b/src/routes/AppContent/index.tsx index 5ae5f674..6d1e08ca 100644 --- a/src/routes/AppContent/index.tsx +++ b/src/routes/AppContent/index.tsx @@ -59,14 +59,6 @@ const AppContent = () => { setActiveTab(getActiveTab(location.pathname)); }, [location]); - if ((isLoadingActiveAccount || !activeAccountData) && !isEndpointRoute) { - return ; - } - - // NOTE: Replace this with P2PBlocked component later and a custom hook useIsP2PEnabled, P2P is only available for USD accounts - if (activeAccountData?.currency !== 'USD' && !isEndpointRoute) - return

P2P is only available for USD accounts.

; - return ( { }} >
- { - setActiveTab(tabRoutesConfiguration[index].name); - history.push(tabRoutesConfiguration[index].path); - }} - variant='secondary' - > - {tabRoutesConfiguration.map(route => ( - - ))} - - + {(isLoadingActiveAccount || !activeAccountData) && !isEndpointRoute ? ( + + ) : ( + <> + { + setActiveTab(tabRoutesConfiguration[index].name); + history.push(tabRoutesConfiguration[index].path); + }} + variant='secondary' + > + {tabRoutesConfiguration.map(route => ( + + ))} + + + + )}
);