fix: remove obsolete button (#2053)

* remove futures markets button and clean unused code * futures markets table now sortable by market * remote obsolete futures market button from overview dashboard page * Sort futures market table by market on mobile * replace old obsolete Futures Markets Button by a subheader * fix lint warning --------- Co-authored-by: platschi <[email protected]>
Kwenta · Mar 2, 2023 · 8007b7b · 8007b7b · vercel · Mar 3, 2023
1 parent 9fedec0
commit 8007b7b
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 49 deletions.
diff --git a/sections/dashboard/FuturesMarketsTable/FuturesMarketsTable.tsx b/sections/dashboard/FuturesMarketsTable/FuturesMarketsTable.tsx
@@ -108,6 +108,7 @@ const FuturesMarketsTable: FC = () => {
 									);
 								},
 								width: 190,
+								sortable: true,
 							},
 							{
 								Header: (
@@ -305,6 +306,7 @@ const FuturesMarketsTable: FC = () => {
 								);
 							},
 							width: 145,
+							sortable: true,
 						},
 						{
 							Header: () => (

diff --git a/sections/dashboard/Markets/Markets.tsx b/sections/dashboard/Markets/Markets.tsx
@@ -1,47 +1,19 @@
-import { FC, useState, useMemo } from 'react';
-import { useTranslation } from 'react-i18next';
+import { FC, useState } from 'react';
 
-import TabButton from 'components/Button/TabButton';
-import { DesktopOnlyView } from 'components/Media';
 import { TabPanel } from 'components/Tab';
 
 import FuturesMarketsTable from '../FuturesMarketsTable';
-import { TabButtonsContainer } from '../History/History';
 
 export enum MarketsTab {
 	FUTURES = 'futures',
 	SPOT = 'spot',
 }
 
 const Markets: FC = () => {
-	const { t } = useTranslation();
-
-	const [activeMarketsTab, setActiveMarketsTab] = useState<MarketsTab>(MarketsTab.FUTURES);
-
-	const MARKETS_TABS = useMemo(
-		() => [
-			{
-				name: MarketsTab.FUTURES,
-				label: t('dashboard.overview.markets-tabs.futures'),
-				active: activeMarketsTab === MarketsTab.FUTURES,
-				onClick: () => {
-					setActiveMarketsTab(MarketsTab.FUTURES);
-				},
-			},
-		],
-		[activeMarketsTab, t]
-	);
+	const [activeMarketsTab] = useState<MarketsTab>(MarketsTab.FUTURES);
 
 	return (
 		<>
-			<DesktopOnlyView>
-				<TabButtonsContainer>
-					{MARKETS_TABS.map(({ name, label, active, onClick }) => (
-						<TabButton key={name} title={label} active={active} onClick={onClick} />
-					))}
-				</TabButtonsContainer>
-			</DesktopOnlyView>
-
 			<TabPanel name={MarketsTab.FUTURES} activeTab={activeMarketsTab}>
 				<FuturesMarketsTable />
 			</TabPanel>

diff --git a/sections/dashboard/Overview/Overview.tsx b/sections/dashboard/Overview/Overview.tsx
@@ -7,6 +7,7 @@ import TabButton from 'components/Button/TabButton';
 import { DesktopOnlyView, MobileOrTabletView } from 'components/Media';
 import FuturesIcon from 'components/Nav/FuturesIcon';
 import { TabPanel } from 'components/Tab';
+import * as Text from 'components/Text';
 import { ETH_ADDRESS, ETH_COINGECKO_ADDRESS } from 'constants/currency';
 import Connector from 'containers/Connector';
 import { FuturesAccountTypes } from 'queries/futures/types';
@@ -47,7 +48,7 @@ const Overview: FC = () => {
 	const [activePositionsTab, setActivePositionsTab] = useState<PositionsTab>(
 		PositionsTab.ISOLATED_MARGIN
 	);
-	const [activeMarketsTab, setActiveMarketsTab] = useState<MarketsTab>(MarketsTab.FUTURES);
+	const [activeMarketsTab] = useState<MarketsTab>(MarketsTab.FUTURES);
 
 	const { network, synthsMap } = Connector.useContainer();
 
@@ -158,18 +159,6 @@ const Overview: FC = () => {
 		setActivePositionsTab,
 	]);
 
-	const MARKETS_TABS = useMemo(
-		() => [
-			{
-				name: MarketsTab.FUTURES,
-				label: t('dashboard.overview.markets-tabs.futures'),
-				active: activeMarketsTab === MarketsTab.FUTURES,
-				onClick: () => setActiveMarketsTab(MarketsTab.FUTURES),
-			},
-		],
-		[activeMarketsTab, setActiveMarketsTab, t]
-	);
-
 	return (
 		<>
 			<DesktopOnlyView>
@@ -198,12 +187,7 @@ const Overview: FC = () => {
 				<TabPanel name={PositionsTab.SPOT} activeTab={activePositionsTab}>
 					<SynthBalancesTable exchangeTokens={exchangeTokens} />
 				</TabPanel>
-
-				<TabButtonsContainer>
-					{MARKETS_TABS.map(({ name, label, active, onClick }) => (
-						<TabButton key={name} title={label} active={active} onClick={onClick} />
-					))}
-				</TabButtonsContainer>
+				<SubHeading>{t('dashboard.overview.markets-tabs.futures')}</SubHeading>
 				<TabPanel name={MarketsTab.FUTURES} activeTab={activeMarketsTab}>
 					<FuturesMarketsTable />
 				</TabPanel>
@@ -227,4 +211,12 @@ const TabButtonsContainer = styled.div`
 	}
 `;
 
+const SubHeading = styled(Text.Heading).attrs({ variant: 'h4' })`
+	font-family: ${(props) => props.theme.fonts.bold};
+	font-size: 16px;
+	margin-top: 20px;
+	font-variant: all-small-caps;
+	color: ${(props) => props.theme.colors.selectedTheme.yellow};
+`;
+
 export default Overview;