feat(app): redesign mobile trades & position history (#2795)

* ui requests & mobile view * design request changes * chore(app): fix lint errors --------- Co-authored-by: platschi <[email protected]>
Kwenta · Oct 9, 2023 · 4b526d6 · 4b526d6
1 parent c73ab06
commit 4b526d6
Show file tree

Hide file tree

Showing 7 changed files with 615 additions and 620 deletions.
diff --git a/packages/app/src/pages/dashboard/history.tsx b/packages/app/src/pages/dashboard/history.tsx
@@ -5,15 +5,13 @@ import styled from 'styled-components'
 
 import UploadIcon from 'assets/svg/futures/upload-icon.svg'
 import { FlexDivCol, FlexDivRowCentered } from 'components/layout/flex'
-import { MobileHiddenView, MobileOnlyView } from 'components/Media'
-import Spacer from 'components/Spacer'
 import { Body, Heading } from 'components/Text'
 import DashboardLayout from 'sections/dashboard/DashboardLayout'
 import HistoryTabs, { HistoryTab } from 'sections/dashboard/HistoryTabs'
-import TradesTab from 'sections/futures/MobileTrade/UserTabs/TradesTab'
 import { usePollDashboardFuturesData } from 'state/futures/hooks'
 import { selectPositionsCsvData, selectTradesCsvData } from 'state/futures/selectors'
 import { useAppSelector } from 'state/hooks'
+import media from 'styles/media'
 
 type HistoryPageProps = React.FC & { getLayout: (page: ReactNode) => JSX.Element }
 
@@ -46,33 +44,36 @@ const HistoryPage: HistoryPageProps = () => {
 	)
 
 	return (
-		<>
+		<TitleContainer>
 			<Head>
 				<title>{t('dashboard-history.page-title')}</title>
 			</Head>
-			<MobileHiddenView>
-				<Spacer height={15} />
-				<FlexDivRowCentered>
-					<FlexDivCol>
-						<Heading variant="h3">{t('dashboard-history.main-title')}</Heading>
-						<Body color={'secondary'}>{t('dashboard-history.subtitle')}</Body>
-					</FlexDivCol>
-					<ExportButton href={file} download={fileName}>
-						<span>{t('dashboard-history.export-btn')}</span>
-						<UploadIcon width={8} style={{ 'margin-bottom': '2px' }} />
-					</ExportButton>
-				</FlexDivRowCentered>
-				<Spacer height={30} />
-				<HistoryTabs onChangeTab={handleChangeTab} currentTab={currentTab} />
-				<Spacer height={50} />
-			</MobileHiddenView>
-			<MobileOnlyView>
-				<TradesTab />
-			</MobileOnlyView>
-		</>
+
+			<FlexDivRowCentered style={{ marginBottom: '30px' }}>
+				<FlexDivCol>
+					<Heading variant="h3">{t('dashboard-history.main-title')}</Heading>
+					<Body color={'secondary'}>{t('dashboard-history.subtitle')}</Body>
+				</FlexDivCol>
+				<ExportButton href={file} download={fileName}>
+					<span>{t('dashboard-history.export-btn')}</span>
+					<UploadIcon width={8} style={{ 'margin-bottom': '2px' }} />
+				</ExportButton>
+			</FlexDivRowCentered>
+
+			<HistoryTabs onChangeTab={handleChangeTab} currentTab={currentTab} />
+		</TitleContainer>
 	)
 }
 
+const TitleContainer = styled.div`
+	${media.lessThan('lg')`
+		margin: 15px 15px 0 15px;
+	`}
+	${media.lessThan('sm')`
+		margin: 15px 15px 0 15px;
+	`}
+`
+
 const ExportButton = styled.a`
 	gap: 8px;
 	height: 36px;

diff --git a/packages/app/src/sections/dashboard/HistoryTabs.tsx b/packages/app/src/sections/dashboard/HistoryTabs.tsx
@@ -10,7 +10,6 @@ import { fetchPositionHistoryForTrader } from 'state/futures/actions'
 import { selectPositionsHistoryTableData } from 'state/futures/selectors'
 import { useAppDispatch, useAppSelector } from 'state/hooks'
 import { selectWallet } from 'state/wallet/selectors'
-import media from 'styles/media'
 
 export enum HistoryTab {
 	Positions = 'positions',
@@ -33,23 +32,21 @@ const HistoryTabs: React.FC<HistoryTabsProp> = ({ currentTab, onChangeTab }) =>
 	}, [dispatch, walletAddress])
 
 	return (
-		<HistoryTabsContainer>
-			<HistoryTabsHeader>
-				<TabButtons>
-					<TabButton
-						variant="noOutline"
-						title={t('dashboard.history.tabs.positions')}
-						onClick={onChangeTab(HistoryTab.Positions)}
-						active={currentTab === HistoryTab.Positions}
-					/>
-					<TabButton
-						variant="noOutline"
-						title={t('dashboard.history.tabs.trades')}
-						onClick={onChangeTab(HistoryTab.Trades)}
-						active={currentTab === HistoryTab.Trades}
-					/>
-				</TabButtons>
-			</HistoryTabsHeader>
+		<>
+			<TabButtons>
+				<TabButton
+					variant="noOutline"
+					title={t('dashboard.history.tabs.positions')}
+					onClick={onChangeTab(HistoryTab.Positions)}
+					active={currentTab === HistoryTab.Positions}
+				/>
+				<TabButton
+					variant="noOutline"
+					title={t('dashboard.history.tabs.trades')}
+					onClick={onChangeTab(HistoryTab.Trades)}
+					active={currentTab === HistoryTab.Trades}
+				/>
+			</TabButtons>
 			<div>
 				<TabPanel name={HistoryTab.Positions} activeTab={currentTab}>
 					<TraderHistory
@@ -63,39 +60,14 @@ const HistoryTabs: React.FC<HistoryTabsProp> = ({ currentTab, onChangeTab }) =>
 					<Trades rounded={true} noBottom={false} />
 				</TabPanel>
 			</div>
-		</HistoryTabsContainer>
+		</>
 	)
 }
 
-const HistoryTabsHeader = styled.div`
-	display: flex;
-	justify-content: space-between;
-	margin-bottom: 15px;
-
-	${media.lessThan('md')`
-		flex-direction: column;
-		row-gap: 10px;
-		margin-bottom: 25px;
-		margin-top: 0px;
-	`}
-`
-
-const HistoryTabsContainer = styled.div`
-	${media.lessThan('md')`
-		padding: 15px;
-	`}
-`
-
 const TabButtons = styled.div`
 	display: flex;
-
-	& > button:not(:last-of-type) {
-		margin-right: 25px;
-	}
-
-	${media.lessThan('md')`
-		justify-content: flex-start;
-	`}
+	gap: 25px;
+	margin-bottom: 25px;
 `
 
 export default HistoryTabs
diff --git a/packages/app/src/sections/futures/TradeConfirmation/TradeConfirmationModal.tsx b/packages/app/src/sections/futures/TradeConfirmation/TradeConfirmationModal.tsx
@@ -36,7 +36,6 @@ import {
 	selectNewTradeHasSlTp,
 	selectOrderType,
 	selectSlTpTradeInputs,
-	selectSelectedSwapDepositToken,
 	selectSmartMarginOrderPrice,
 	selectTradePreview,
 } from 'state/futures/smartMargin/selectors'