Skip to content

Commit

Permalink
ui requests & mobile view
Browse files Browse the repository at this point in the history
  • Loading branch information
@pldespaigne
pldespaigne committed Oct 2, 2023
1 parent c6df349 commit 8d1b7b5
Show file tree
Hide file tree
Showing 6 changed files with 495 additions and 432 deletions.
49 changes: 25 additions & 24 deletions packages/app/src/pages/dashboard/history.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 }

Expand Down Expand Up @@ -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: 130px 15px 0 15px;
`}
`

const ExportButton = styled.a`
gap: 8px;
height: 36px;
Expand Down
64 changes: 18 additions & 46 deletions packages/app/src/sections/dashboard/HistoryTabs.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand All @@ -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
Expand All @@ -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
172 changes: 108 additions & 64 deletions packages/app/src/sections/futures/TraderHistory.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,16 @@
import { FuturesMarketKey, FuturesPositionHistory } from '@kwenta/sdk/types'
import Wei, { wei, WeiSource } from '@synthetixio/wei'
import router from 'next/router'
import { FC, memo, useMemo } from 'react'
import { useTranslation } from 'react-i18next'
import styled, { css } from 'styled-components'

import Currency from 'components/Currency'
import CurrencyIcon from 'components/Currency/CurrencyIcon'
import { FlexDiv } from 'components/layout/flex'
import { FlexDiv, FlexDivCol } from 'components/layout/flex'
import { DesktopOnlyView, MobileOrTabletView } from 'components/Media'
import Table, { TableHeader, TableNoResults } from 'components/Table'
import { TableCell } from 'components/Table/TableBodyRow'
import { Body } from 'components/Text'
import ROUTES from 'constants/routes'
import TimeDisplay from 'sections/futures/Trades/TimeDisplay'
import { selectQueryStatuses } from 'state/futures/selectors'
import { useAppSelector } from 'state/hooks'
Expand Down Expand Up @@ -192,7 +191,7 @@ const TraderHistory: FC<TraderHistoryProps> = memo(
/>
</DesktopOnlyView>
<MobileOrTabletView>
<StyledTable
<MobileTable
data={data}
// @ts-ignore
compact={compact}
Expand All @@ -203,67 +202,78 @@ const TraderHistory: FC<TraderHistoryProps> = memo(
autoResetPageIndex={false}
columns={[
{
header: () => (
<TableTitle>
<TitleText
onClick={() => {
resetSelection()
router.push(ROUTES.Leaderboard.Home)
}}
>
{t('leaderboard.leaderboard.table.title')}
</TitleText>
<TitleSeparator>&gt;</TitleSeparator>
<ExternalLink
href={`https://optimistic.etherscan.io/address/${trader}`}
hoverUnderline
>
{traderEns ?? trader}
</ExternalLink>
</TableTitle>
accessorKey: 'asset',
cell: (cellProps) => (
<>
<TableHeader>{t('leaderboard.trader-history.mobile-table.market')}</TableHeader>
<CurrencyInfo>
<MobileCurrencyIcon currencyKey={cellProps.row.original.currencyIconKey} />
<StyledSubtitle>{cellProps.row.original.marketShortName}</StyledSubtitle>
</CurrencyInfo>
</>
),
},
{
accessorKey: 'totalVolume',
cell: (cellProps) => (
<>
<TableHeader>{t('leaderboard.trader-history.mobile-table.volume')}</TableHeader>
<RightAlignedContainer>
<Currency.Price price={cellProps.getValue()} />
</RightAlignedContainer>
</>
),
},
{
accessorKey: 'status',
cell: (cellProps) => (
<>
<TableHeader>{t('leaderboard.trader-history.mobile-table.status')}</TableHeader>
<Body color="primary">{cellProps.row.original.status}</Body>
</>
),
accessorKey: 'title',
enableSorting: false,
columns: [
{
header: () => (
<TableHeader>{t('leaderboard.trader-history.table.market')}</TableHeader>
),
accessorKey: 'asset',
cell: (cellProps) => (
<CurrencyInfo>
<StyledCurrencyIcon currencyKey={cellProps.row.original.currencyIconKey} />
<StyledSubtitle>{cellProps.row.original.marketShortName}</StyledSubtitle>
</CurrencyInfo>
),
size: 50,
},
{
header: () => (
<TableHeader>{t('leaderboard.trader-history.table.status')}</TableHeader>
),
accessorKey: 'status',
cell: (cellProps) => {
return <Body color="primary">{cellProps.row.original.status}</Body>
},
size: 30,
},
{
header: () => (
<TableHeader>{t('leaderboard.trader-history.table.total-pnl')}</TableHeader>
),
accessorKey: 'pnl',
cell: (cellProps) => (
<RightAlignedContainer>
<Currency.Price price={cellProps.row.original.pnl} colored />
<StyledValue $value={cellProps.row.original.pnl}>
{cellProps.row.original.pnlPct}
</StyledValue>
</RightAlignedContainer>
),
size: 40,
},
],
},
{
accessorKey: 'funding',
cell: (cellProps) => (
<>
<TableHeader>
{t('leaderboard.trader-history.mobile-table.funding')}
</TableHeader>
<RightAlignedContainer>
<Currency.Price price={cellProps.getValue()} colored />
</RightAlignedContainer>
</>
),
},
{
accessorKey: 'pnl',
cell: (cellProps) => (
<>
<TableHeader>{t('leaderboard.trader-history.mobile-table.pnl')}</TableHeader>
<FlexDivCol>
<Currency.Price price={cellProps.row.original.pnl} colored />
<StyledValue $value={cellProps.row.original.pnl}>
{cellProps.row.original.pnlPct}
</StyledValue>
</FlexDivCol>
</>
),
},
{
accessorKey: 'openTimestamp',
cell: (cellProps) => {
return (
<>
<TableHeader>
{t('leaderboard.trader-history.mobile-table.timestamp')}
</TableHeader>
<StyledCell>
<TimeDisplay shortDate value={cellProps.row.original.openTimestamp} />
</StyledCell>
</>
)
},
},
]}
/>
Expand Down Expand Up @@ -296,6 +306,33 @@ const StyledTable = styled(Table)<{ compact?: boolean; height?: number }>`
`}
` as typeof Table

const MobileTable = styled(Table)`
.table-row:first-child {
display: none;
}
.table-body-row {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto;
grid-column-gap: 15px;
grid-row-gap: 15px;
padding: 15px;
}
${TableCell}:first-child,
${TableCell}:last-child {
padding: 0;
}
${TableCell} {
height: 100%;
width: 100% !important;
display: flex;
align-items: start;
justify-content: space-between;
}
` as typeof Table

const TableTitle = styled.div`
width: 100%;
display: flex;
Expand Down Expand Up @@ -331,6 +368,13 @@ const StyledCurrencyIcon = styled(CurrencyIcon)`
margin-right: 5px;
`

const MobileCurrencyIcon = styled(CurrencyIcon)`
& > img {
width: 20px;
height: 20px;
}
`

const CurrencyInfo = styled(FlexDiv)`
align-items: center;
`
Expand Down
Loading

0 comments on commit 8d1b7b5

Please sign in to comment.