v7.0.1

v7.0.1

components/Button/TabButton.tsx

@@ -170,7 +170,7 @@ const InlineTab = styled.div`
 	${sharedStyle}
 	cursor: pointer;
 	border-right: ${(props) => props.theme.colors.selectedTheme.border};
-	padding: 14px 20px;
+	padding: 10px 20px;
 	transition: all 0.1s ease-in-out;
 `;
 

components/Table/Table.tsx

@@ -7,13 +7,15 @@ import SortDownIcon from 'assets/svg/app/caret-down.svg';
 import SortUpIcon from 'assets/svg/app/caret-up.svg';
 import Loader from 'components/Loader';
 import { Body } from 'components/Text';
+import media from 'styles/media';
 
 import Pagination from './Pagination';
 import TableBodyRow, { TableCell } from './TableBodyRow';
 
 export type TablePalette = 'primary';
 
-const CARD_HEIGHT = '40px';
+const CARD_HEIGHT_MD = '50px';
+const CARD_HEIGHT_LG = '40px';
 const MAX_PAGE_ROWS = 100;
 const MAX_TOTAL_ROWS = 9999;
 
@@ -314,12 +316,18 @@ const ReactTable = styled.div<{ palette: TablePalette; $rounded?: boolean; $noBo
 		props.palette === 'primary' &&
 		css`
 			${TableBody} {
-				max-height: calc(100% - ${CARD_HEIGHT});
+				max-height: calc(100% - ${CARD_HEIGHT_LG});
+				${media.lessThan('xxl')`
+					max-height: calc(100% - ${CARD_HEIGHT_MD});
+				`}
 			}
 			${TableCell} {
 				color: ${(props) => props.theme.colors.selectedTheme.text.value};
 				font-size: 13px;
-				height: ${CARD_HEIGHT};
+				height: ${CARD_HEIGHT_LG};
+				${media.lessThan('xxl')`
+					height: ${CARD_HEIGHT_MD};
+				`}
 				font-family: ${(props) => props.theme.fonts.mono};
 			}
 			${TableCellHead} {

components/Table/TableBodyRow.tsx

@@ -36,9 +36,7 @@ const BaseTableBodyRow = styled.div<{
 }>`
 	cursor: ${(props) => (props.onClick ? 'pointer' : 'default')};
 
-	&:not(:last-child) {
-		border-bottom: ${(props) => props.theme.colors.selectedTheme.border};
-	}
+	border-bottom: ${(props) => props.theme.colors.selectedTheme.border};
 
 	padding: 6px 0;
 

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "kwenta",
-	"version": "7.0.0",
+	"version": "7.0.1",
 	"scripts": {
 		"dev": "next",
 		"build": "next build",

pages/market.tsx

@@ -16,7 +16,7 @@ import MarketDetails from 'sections/futures/MarketDetails';
 import MarketInfo from 'sections/futures/MarketInfo';
 import MarketHead from 'sections/futures/MarketInfo/MarketHead';
 import MobileTrade from 'sections/futures/MobileTrade/MobileTrade';
-import { TRADE_PANEL_WIDTH } from 'sections/futures/styles';
+import { TRADE_PANEL_WIDTH_LG, TRADE_PANEL_WIDTH_MD } from 'sections/futures/styles';
 import FuturesUnsupportedNetwork from 'sections/futures/Trade/FuturesUnsupported';
 import SwitchToSmartMargin from 'sections/futures/Trade/SwitchToSmartMargin';
 import TradeIsolatedMargin from 'sections/futures/Trade/TradeIsolatedMargin';
@@ -41,6 +41,7 @@ import {
 import { useAppDispatch, useAppSelector } from 'state/hooks';
 import { FetchStatus } from 'state/types';
 import { PageContent } from 'styles/common';
+import media from 'styles/media';
 import { MarketKeyByAsset } from 'utils/futures';
 
 type MarketComponent = FC & { getLayout: (page: HTMLElement) => JSX.Element };
@@ -175,10 +176,13 @@ export default Market;
 
 const StyledFullHeightContainer = styled.div`
 	display: grid;
-	grid-template-columns: ${TRADE_PANEL_WIDTH}px 1fr;
 	grid-gap: 0;
 	flex: 1;
 	height: calc(100% - 64px);
+	grid-template-columns: ${TRADE_PANEL_WIDTH_LG}px 1fr;
+	${media.lessThan('xxl')`
+	grid-template-columns: ${TRADE_PANEL_WIDTH_MD}px 1fr;
+	`}
 `;
 
 const LoaderContainer = styled.div`

sdk/contracts/PerpsV2MarketInternalV2.ts

@@ -62,6 +62,7 @@ class FuturesMarketInternal {
 	_perpsV2MarketContract: Contract;
 	_perpsV2MarketSettings: MultiCallContract | undefined;
 	_marketKeyBytes: string;
+	_block: ethers.providers.Block | null;
 
 	_onChainData: {
 		assetPrice: BigNumber;
@@ -88,6 +89,7 @@ class FuturesMarketInternal {
 		this._perpsV2MarketSettings = sdk.context.multicallContracts.PerpsV2MarketSettings;
 		this._marketKeyBytes = formatBytes32String(marketKey);
 		this._cache = {};
+		this._block = null;
 		this._onChainData = {
 			assetPrice: BigNumber.from(0),
 			marketSkew: BigNumber.from(0),
@@ -120,6 +122,9 @@ class FuturesMarketInternal {
 			multiCallContract.positions(account),
 		]);
 
+		const blockNum = await this._provider?.getBlockNumber();
+		this._block = await fetchBlockWithRetry(blockNum, this._provider);
+
 		this._onChainData = {
 			//@ts-ignore
 			assetPrice: preFetchedData[0].price as BigNumber,
@@ -316,10 +321,9 @@ class FuturesMarketInternal {
 
 	_proportionalElapsed = async () => {
 		// TODO: get block at the start
-		const blockNum = await this._provider?.getBlockNumber();
-		const block = await this._provider?.getBlock(blockNum);
+		if (!this._block) throw new Error('Missing block data');
 		const fundingLastRecomputed = this._onChainData.fundingLastRecomputed;
-		const rate = BigNumber.from(block.timestamp).sub(fundingLastRecomputed);
+		const rate = BigNumber.from(this._block.timestamp).sub(fundingLastRecomputed);
 		return divideDecimal(rate, BigNumber.from(86400));
 	};
 
@@ -463,4 +467,18 @@ class FuturesMarketInternal {
 	};
 }
 
+const fetchBlockWithRetry = async (
+	blockNum: number,
+	provider: ethers.providers.Provider,
+	count = 0
+): Promise<ethers.providers.Block | null> => {
+	// Sometimes the block number is returned before the block
+	// is ready to fetch and so getBlock returns null
+	const block = await provider?.getBlock(blockNum);
+	if (block) return block;
+	if (count > 5) return null;
+	await new Promise((resolve) => setTimeout(resolve, 200));
+	return fetchBlockWithRetry(blockNum, provider, count + 1);
+};
+
 export default FuturesMarketInternal;

sections/futures/EditPositionModal/EditPositionSizeInput.tsx

@@ -65,7 +65,12 @@ const EditPositionSizeInput: React.FC<OrderSizingProps> = memo(
 			return !nativeSizeDelta || isNaN(Number(nativeSizeDelta)) ? zeroBN : wei(nativeSizeDelta);
 		}, [nativeSizeDelta]);
 
-		const invalid = nativeSizeDelta !== '' && maxNativeValue.lt(nativeSizeDeltaWei);
+		const maxNativeValueWithBuffer = useMemo(() => {
+			if (type === 'decrease') return maxNativeValue;
+			return maxNativeValue.add(maxNativeValue.mul(0.001));
+		}, [maxNativeValue, type]);
+
+		const invalid = nativeSizeDelta !== '' && maxNativeValueWithBuffer.lt(nativeSizeDeltaWei.abs());
 
 		return (
 			<OrderSizingContainer>

sections/futures/EditPositionModal/EditPositionSizeModal.tsx

@@ -79,14 +79,22 @@ export default function EditPositionSizeModal() {
 		return editType === 0 ? maxNativeIncreaseValue : position?.position?.size ?? zeroBN;
 	}, [editType, maxNativeIncreaseValue, position?.position?.size]);
 
+	const maxNativeValueWithBuffer = useMemo(() => {
+		if (editType === 1) return maxNativeValue;
+		return maxNativeValue.add(maxNativeValue.mul(0.001));
+	}, [maxNativeValue, editType]);
+
 	const sizeWei = useMemo(
 		() => (!nativeSizeDelta || isNaN(Number(nativeSizeDelta)) ? wei(0) : wei(nativeSizeDelta)),
 		[nativeSizeDelta]
 	);
 
 	const maxLeverageExceeded = editType === 0 && position?.position?.leverage.gt(APP_MAX_LEVERAGE);
 
-	const invalid = useMemo(() => sizeWei.gt(maxNativeValue), [sizeWei, maxNativeValue]);
+	const invalid = useMemo(() => sizeWei.abs().gt(maxNativeValueWithBuffer), [
+		sizeWei,
+		maxNativeValueWithBuffer,
+	]);
 
 	const submitDisabled = useMemo(() => {
 		return sizeWei.eq(0) || invalid || isLoading || maxLeverageExceeded;

sections/futures/MarginInput.tsx

@@ -1,7 +1,7 @@
 import React, { ChangeEvent, memo } from 'react';
 import styled from 'styled-components';
 
-import InputTitle, { InputTitleSpan } from 'components/Input/InputTitle';
+import InputTitle from 'components/Input/InputTitle';
 import NumericInput from 'components/Input/NumericInput';
 import { FlexDivRow } from 'components/layout/flex';
 import SelectorButtons from 'components/SelectorButtons/SelectorButtons';
@@ -48,9 +48,7 @@ const MarginInput: React.FC<MarginInputProps> = memo(({ isMobile }) => {
 		<>
 			<Container>
 				<OrderSizingRow>
-					<InputTitle>
-						Margin&nbsp; —<InputTitleSpan>&nbsp; Set collateral</InputTitleSpan>
-					</InputTitle>
+					<InputTitle>Margin</InputTitle>
 					<InputHelpers>
 						<SelectorButtons onSelect={onSelectPercent} options={PERCENT_OPTIONS} />
 					</InputHelpers>

sections/futures/PositionChart/PositionChart.tsx

@@ -88,7 +88,6 @@ const Container = styled(FlexDivRowCentered)<{ visible: boolean }>`
 		`}
 	background: ${(props) => props.theme.colors.selectedTheme.background};
 	visibility: ${(props) => (props.visible ? 'visible' : 'hidden')};
-
 `;
 
 const ChartContainer = styled.div`

sections/futures/Trade/SLTPInputs.tsx

@@ -115,7 +115,7 @@ export default function SLTPInputs() {
 					<Spacer height={6} />
 
 					<InputHeaderRow
-						label="Stop Loss"
+						label="SL"
 						rightElement={
 							<SelectorButtons options={SL_OPTIONS} onSelect={onSelectStopLossPercent} />
 						}
@@ -131,7 +131,7 @@ export default function SLTPInputs() {
 					<Spacer height={12} />
 
 					<InputHeaderRow
-						label="Take Profit"
+						label="TP"
 						rightElement={<SelectorButtons options={TP_OPTIONS} onSelect={onSelectTakeProfit} />}
 					/>
 

sections/futures/UserInfo/PositionsTable.tsx

@@ -5,7 +5,6 @@ import { CellProps } from 'react-table';
 import styled from 'styled-components';
 
 import Currency from 'components/Currency';
-import { FlexDivRowCentered } from 'components/layout/flex';
 import Pill from 'components/Pill';
 import Spacer from 'components/Spacer';
 import Table, { TableHeader, TableNoResults } from 'components/Table';
@@ -14,6 +13,7 @@ import { NO_VALUE } from 'constants/placeholder';
 import ROUTES from 'constants/routes';
 import useIsL2 from 'hooks/useIsL2';
 import useNetworkSwitcher from 'hooks/useNetworkSwitcher';
+import { getDisplayAsset } from 'sdk/utils/futures';
 import PositionType from 'sections/futures/PositionType';
 import { setShowPositionModal } from 'state/app/reducer';
 import {
@@ -25,6 +25,7 @@ import {
 	selectPositionHistory,
 } from 'state/futures/selectors';
 import { useAppDispatch, useAppSelector } from 'state/hooks';
+import media from 'styles/media';
 import { formatPercent } from 'utils/formatters/number';
 
 import TableMarketDetails from './TableMarketDetails';
@@ -114,13 +115,13 @@ const PositionsTable: FC<FuturesPositionTableProps> = () => {
 										}
 									>
 										<TableMarketDetails
-											marketName={cellProps.row.original.market.marketName}
+											marketName={getDisplayAsset(cellProps.row.original.market.asset) ?? ''}
 											marketKey={cellProps.row.original.market.marketKey}
 										/>
 									</MarketDetailsContainer>
 								);
 							},
-							width: 120,
+							width: 100,
 						},
 						{
 							Header: (
@@ -145,7 +146,7 @@ const PositionsTable: FC<FuturesPositionTableProps> = () => {
 									: {};
 
 								return (
-									<FlexDivRowCentered>
+									<ColWithButton>
 										<div>
 											<div>
 												<Currency.Price
@@ -175,7 +176,7 @@ const PositionsTable: FC<FuturesPositionTableProps> = () => {
 												Edit
 											</Pill>
 										)}
-									</FlexDivRowCentered>
+									</ColWithButton>
 								);
 							},
 							width: 90,
@@ -222,7 +223,7 @@ const PositionsTable: FC<FuturesPositionTableProps> = () => {
 							accessor: 'margin',
 							Cell: (cellProps: CellProps<typeof data[number]>) => {
 								return (
-									<FlexDivRowCentered>
+									<ColWithButton>
 										<div>
 											<NumericValue value={cellProps.row.original.position.initialMargin} />
 											<NumericValue
@@ -246,7 +247,7 @@ const PositionsTable: FC<FuturesPositionTableProps> = () => {
 												Edit
 											</Pill>
 										)}
-									</FlexDivRowCentered>
+									</ColWithButton>
 								);
 							},
 							width: 115,
@@ -266,7 +267,7 @@ const PositionsTable: FC<FuturesPositionTableProps> = () => {
 									</PnlContainer>
 								);
 							},
-							width: 100,
+							width: 90,
 						},
 						{
 							Header: <TableHeader>Funding</TableHeader>,
@@ -283,7 +284,7 @@ const PositionsTable: FC<FuturesPositionTableProps> = () => {
 							accessor: 'tp-sl',
 							Cell: (cellProps: CellProps<typeof data[number]>) => {
 								return (
-									<FlexDivRowCentered>
+									<ColWithButton>
 										<div style={{ marginRight: 10 }}>
 											{cellProps.row.original.takeProfit === undefined ? (
 												<Body>{NO_VALUE}</Body>
@@ -314,7 +315,7 @@ const PositionsTable: FC<FuturesPositionTableProps> = () => {
 												Edit
 											</Pill>
 										)}
-									</FlexDivRowCentered>
+									</ColWithButton>
 								);
 							},
 							width: 110,
@@ -357,7 +358,7 @@ const Container = styled.div`
 `;
 
 const TableContainer = styled.div`
-	min-width: 1200px;
+	min-width: 820px;
 `;
 
 const PnlContainer = styled.div`
@@ -369,4 +370,14 @@ const MarketDetailsContainer = styled.div`
 	cursor: pointer;
 `;
 
+const ColWithButton = styled.div`
+	display: flex;
+	flex-direction: row;
+	align-content: center;
+	align-items: center;
+	${media.lessThan('xxl')`
+		display: block;
+	`}
+`;
+
 export default PositionsTable;

sections/futures/styles.ts

@@ -1,2 +1,3 @@
 export const MARKETS_DETAILS_HEIGHT_DESKTOP = 67;
-export const TRADE_PANEL_WIDTH = 380;
+export const TRADE_PANEL_WIDTH_MD = 330;
+export const TRADE_PANEL_WIDTH_LG = 380;