(
- {t('futures.market.user.trades.table.market-side')}
- ),
- accessorKey: 'market',
- cell: (cellProps) => {
- return (
- {
- cellProps.row.original.market &&
- router.push(
- ROUTES.Markets.MarketPair(cellProps.row.original.market.asset, accountType)
- )
- e.stopPropagation()
- }}
- >
- {cellProps.row.original.market ? (
-
- ) : (
- '-'
- )}
-
- )
- },
- size: 90,
- },
- {
- header: () => {t('futures.market.user.trades.table.date')},
- accessorKey: 'time',
- cell: (cellProps) => ,
- enableSorting: true,
- size: 90,
- },
- {
- header: () => (
-
- {t('futures.market.user.trades.table.price')}
-
- ),
- accessorKey: 'value',
- sortingFn: 'basic',
- cell: (cellProps) => {
- return (
-
-
- {formatDollars(cellProps.getValue(), { suggestDecimals: true })}
-
-
- )
- },
- enableSorting: true,
- size: 125,
- },
- {
- header: () => (
-
- {t('futures.market.user.trades.table.size')}
-
- ),
- accessorKey: 'amount',
- sortingFn: 'basic',
- cell: (cellProps) => {
- return (
-
- {formatNumber(cellProps.getValue(), { suggestDecimals: true })}
-
-
- )
- },
- enableSorting: true,
- size: 100,
- },
- {
- header: () => (
-
- {t('futures.market.user.trades.table.pnl')}
-
- ),
- accessorKey: 'netPnl',
- sortingFn: 'basic',
- cell: (cellProps) => {
- return cellProps.getValue().eq(0) ? (
- '--'
- ) : (
-
- {formatDollars(cellProps.getValue(), { maxDecimals: 2 })}
-
- )
- },
- enableSorting: true,
- size: 100,
- },
- {
- header: () => (
-
- {t('futures.market.user.trades.table.fees')}
-
- ),
- sortingFn: 'basic',
- accessorKey: 'feesPaid',
- cell: (cellProps) => {
- return cellProps.getValue().eq(0) ? (
- '--'
- ) : (
-
-
-
- )
- },
- enableSorting: true,
- size: 100,
- },
- {
- header: () => (
- {t('futures.market.user.trades.table.order-type')}
- ),
- accessorKey: 'type',
- sortingFn: 'basic',
- cell: (cellProps) => <>{cellProps.getValue()},
- size: 60,
- },
- ]}
- columnsDeps={columnsDeps}
- data={historyData}
- isLoading={isLoading && isLoaded}
- onTableRowClick={(row) =>
- window.open(blockExplorer.txLink(row.original.txnHash), '_blank', 'noopener noreferrer')
- }
- noResultsMessage={
- !isL2 ? (
-
- {t('common.l2-cta')}
- {t('homepage.l2.cta-buttons.switch-l2')}
-
- ) : isLoaded && historyData?.length === 0 ? (
- {t('futures.market.user.trades.table.no-results')}
- ) : undefined
- }
- />
+
+ {formatDollars(cellProps.getValue(), { maxDecimals: 2 })}
+
+ )
+ },
+ enableSorting: true,
+ },
+ {
+ header: () => (
+
+ {t('futures.market.user.trades.table.fees')}
+
+ ),
+ sortingFn: 'basic',
+ accessorKey: 'feesPaid',
+ cell: (cellProps) => (
+
+
+
+ ),
+ enableSorting: true,
+ },
+ ]}
+ columnsDeps={columnsDeps}
+ data={historyData}
+ isLoading={isLoading && isLoaded}
+ onTableRowClick={(row) =>
+ window.open(blockExplorer.txLink(row.original.txnHash), '_blank', 'noopener noreferrer')
+ }
+ noResultsMessage={
+ !isL2 ? (
+
+ {t('common.l2-cta')}
+ {t('homepage.l2.cta-buttons.switch-l2')}
+
+ ) : isLoaded && historyData?.length === 0 ? (
+ {t('futures.market.user.trades.table.no-results')}
+ ) : undefined
+ }
+ />
+
+
+
+ (
+ <>
+ {t('futures.market.user.trades.mobile-table.market')}
+
+
+ {cellProps.row.original.market!.marketName}
+
+
+ ),
+ },
+ {
+ accessorKey: 'price',
+ cell: (cellProps) => (
+ <>
+ {t('futures.market.user.trades.mobile-table.price')}
+
+
+ ),
+ },
+ {
+ accessorKey: 'side',
+ cell: (cellProps) => (
+ <>
+ {t('futures.market.user.trades.mobile-table.side')}
+
+
+ ),
+ },
+ {
+ accessorKey: 'fees',
+ cell: (cellProps) => (
+ <>
+ {t('futures.market.user.trades.mobile-table.fees')}
+
+
+ ),
+ },
+ {
+ accessorKey: 'date',
+ cell: (cellProps) => (
+ <>
+ {t('futures.market.user.trades.mobile-table.date')}
+
+
+ ),
+ },
+ {
+ accessorKey: 'type',
+ cell: (cellProps) => (
+ <>
+ {t('futures.market.user.trades.mobile-table.type')}
+ {cellProps.row.original.orderType}
+
+ ),
+ },
+ {
+ accessorKey: 'size',
+ cell: (cellProps) => (
+ <>
+ {t('futures.market.user.trades.mobile-table.size')}
+
+
+ {formatNumber(cellProps.row.original.amount, { suggestDecimals: true })}
+ {' ETH'}
+
+
+
+
+ ),
+ },
+ {
+ accessorKey: 'pnl',
+ cell: (cellProps) => (
+ <>
+ {t('futures.market.user.trades.mobile-table.pnl')}
+
+
+
+ {formatNumber(cellProps.row.original.pnlPct)}%
+
+
+
+ ),
+ },
+ ]}
+ columnsDeps={columnsDeps}
+ data={historyData}
+ isLoading={isLoading && isLoaded}
+ onTableRowClick={(row) =>
+ window.open(blockExplorer.txLink(row.original.txnHash), '_blank', 'noopener noreferrer')
+ }
+ noResultsMessage={
+ !isL2 ? (
+
+ {t('common.l2-cta')}
+ {t('homepage.l2.cta-buttons.switch-l2')}
+
+ ) : isLoaded && historyData?.length === 0 ? (
+ {t('futures.market.user.trades.table.no-results')}
+ ) : undefined
+ }
+ />
+
+
)
})
@@ -350,3 +318,61 @@ export default Trades
const MarketDetailsContainer = styled.div`
cursor: pointer;
`
+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 CurrencyInfo = styled(FlexDiv)`
+ align-items: center;
+`
+
+const MobileCurrencyIcon = styled(CurrencyIcon)`
+ & > img {
+ width: 20px;
+ height: 20px;
+ }
+`
+
+const StyledSubtitle = styled(Body)`
+ color: ${(props) => props.theme.colors.selectedTheme.button.text.primary};
+ text-transform: capitalize;
+`
+
+const valueColor = css<{ $value: WeiSource }>`
+ color: ${(props) =>
+ wei(props.$value).gt(0)
+ ? props.theme.colors.selectedTheme.green
+ : wei(props.$value).lt(0)
+ ? props.theme.colors.selectedTheme.red
+ : props.theme.colors.selectedTheme.button.text.primary};
+`
+
+const StyledValue = styled.div<{ $value: WeiSource }>`
+ font-family: ${(props) => props.theme.fonts.mono};
+ font-size: 13px;
+ margin: 0;
+ ${valueColor}
+`
diff --git a/packages/app/src/state/futures/selectors.ts b/packages/app/src/state/futures/selectors.ts
index c591a38b7..cd4c25baa 100644
--- a/packages/app/src/state/futures/selectors.ts
+++ b/packages/app/src/state/futures/selectors.ts
@@ -913,13 +913,15 @@ export const selectTradesHistoryTableData = createSelector(
const pnl = trade?.pnl
const feesPaid = trade?.feesPaid
const netPnl = pnl.sub(feesPaid)
+ const notionalValue = trade?.price.mul(trade?.size.abs())
return {
...trade,
pnl,
+ pnlPct: netPnl.div(notionalValue),
feesPaid,
netPnl,
- notionalValue: trade?.price.mul(trade?.size.abs()),
+ notionalValue,
value: Number(trade?.price),
funding: Number(trade?.fundingAccrued),
amount: trade?.size.abs(),
diff --git a/packages/app/src/translations/en.json b/packages/app/src/translations/en.json
index f4b221bbd..6a9726197 100644
--- a/packages/app/src/translations/en.json
+++ b/packages/app/src/translations/en.json
@@ -1147,6 +1147,16 @@
"liquidated": "liquidated",
"entry": "entry"
}
+ },
+ "mobile-table": {
+ "market": "Market",
+ "price": "Price",
+ "side": "Side",
+ "fees": "Fees",
+ "date": "Date",
+ "type": "Order Type",
+ "size": "Size",
+ "pnl": "PnL"
}
},
"transfers": {
@@ -1241,6 +1251,14 @@
"total-volume": "Total Volume",
"total-pnl": "Realized P&L",
"funding": "Funding"
+ },
+ "mobile-table": {
+ "market": "Market",
+ "volume": "Volume",
+ "status": "Status",
+ "funding": "Funding",
+ "pnl": "PnL",
+ "timestamp": "Date"
}
},
"competition": {