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 (
+
+ );
+};
+
+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
+
+
+
+
+ }
+ onClick={() => setIsDrawerOpen(true)}
+ variant='ghost'
+ />
+
+ )}
+ {activeLoginid ? (
+
+ ) : (
+
+ 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 (
+ }
+ key={language.code}
+ onClick={() => {
+ switchLanguage(language.code);
+ onClose();
+ }}
+ variant='ghost'
+ >
+
+ {language.display_name}
+
+
+ );
+ })}
+
+
+ );
+};
+
+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 => (
+
+ ))}
+
+
+ >
+ )}
);