v4.1.0

v4.1.0

.github/workflows/audit_build_verify.yml

@@ -70,7 +70,7 @@ jobs:
       - name: Upload lint results
         # run if lint failed and only on main/dev branch and pull requests
         if: always() && (github.ref == 'refs/heads/main' || github.ref == 'refs/heads/dev' || github.event_name == 'pull_request')
-        uses: github/codeql-action/upload-sarif@cc7986c02bac29104a72998e67239bb5ee2ee110 # pin@codeql-bundle-20220322
+        uses: github/codeql-action/upload-sarif@ec3cf9c605b848da5f1e41e8452719eb1ccfb9a6 # pin@codeql-bundle-20220322
         with:
           sarif_file: lint-results.sarif
         continue-on-error: true

.github/workflows/codeql.yml

@@ -21,13 +21,13 @@ jobs:
         uses: actions/checkout@93ea575cb5d8a053eaa0ac8fa3b40d7e05a33cc8 # pin@v2
 
       - name: Initialize CodeQL
-        uses: github/codeql-action/init@cc7986c02bac29104a72998e67239bb5ee2ee110 # pin@codeql-bundle-20220322
+        uses: github/codeql-action/init@ec3cf9c605b848da5f1e41e8452719eb1ccfb9a6 # pin@codeql-bundle-20220322
         with:
           queries: security-and-quality
           languages: javascript
 
       - name: Autobuild
-        uses: github/codeql-action/autobuild@cc7986c02bac29104a72998e67239bb5ee2ee110 # pin@codeql-bundle-20220322
+        uses: github/codeql-action/autobuild@ec3cf9c605b848da5f1e41e8452719eb1ccfb9a6 # pin@codeql-bundle-20220322
 
       - name: Perform CodeQL Analysis
-        uses: github/codeql-action/analyze@cc7986c02bac29104a72998e67239bb5ee2ee110 # pin@codeql-bundle-20220322
+        uses: github/codeql-action/analyze@ec3cf9c605b848da5f1e41e8452719eb1ccfb9a6 # pin@codeql-bundle-20220322

components/Input/InputBalanceLabel.tsx

@@ -8,25 +8,26 @@ import { formatCurrency } from 'utils/formatters/number';
 type Props = {
 	balance: Wei;
 	currencyKey: string;
+	onSetAmount: (amount: string) => void;
 };
 
-export default function InputBalanceLabel({ balance, currencyKey }: Props) {
+export default function InputBalanceLabel({ balance, currencyKey, onSetAmount }: Props) {
 	const { t } = useTranslation();
 
 	const key = currencyKey.toLowerCase();
 	const isUsd = key === 'susd' || key === 'usd';
 	return (
 		<BalanceContainer>
 			<BalanceText>{t('futures.market.trade.margin.modal.balance')}:</BalanceText>
-			<BalanceText>
+			<BalanceButton as="button" onClick={() => onSetAmount(balance.toString())}>
 				<span>
 					{formatCurrency(currencyKey, balance, {
 						sign: isUsd ? '$' : '',
 						maxDecimals: isUsd ? 2 : undefined,
 					})}
 				</span>{' '}
 				{currencyKey}
-			</BalanceText>
+			</BalanceButton>
 		</BalanceContainer>
 	);
 }
@@ -44,3 +45,15 @@ export const BalanceText = styled.p`
 		color: ${(props) => props.theme.colors.selectedTheme.button.text.primary};
 	}
 `;
+
+export const BalanceButton = styled(BalanceText)`
+	padding: 0;
+	font-size: 12px;
+	line-height: 11px;
+	background-color: transparent;
+	border: none;
+	cursor: pointer;
+	&:hover {
+		text-decoration: underline;
+	}
+`;

components/Loader/Loader.tsx

@@ -26,4 +26,8 @@ Loader.defaultProps = {
 	inline: false,
 };
 
+export const MiniLoader = () => {
+	return <Loader inline height="11px" width="11px" style={{ marginLeft: '10px' }} />;
+};
+
 export default Loader;

components/Loader/index.ts

@@ -1 +1 @@
-export { default } from './Loader';
+export { default, MiniLoader } from './Loader';

components/Slider/Slider.tsx

@@ -76,7 +76,7 @@ const styledMarkLabel = css`
 	font-size: 13px;
 	color: ${(props) => props.theme.colors.selectedTheme.slider.label};
 	${media.lessThan('sm')`
-		top: -5px;
+		top: 30px;
 	`}
 `;
 const SliderContainer = styled.div`

components/Webp/Webp.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import { DefaultTheme, StyledComponent } from 'styled-components';
 
 type WebpProps = {

constants/futures.ts

@@ -7,3 +7,4 @@ export const CROSS_MARGIN_ORDER_TYPES: FuturesOrderType[] = ['market', 'limit',
 export const ORDER_KEEPER_ETH_DEPOSIT = wei(0.01);
 export const DEFAULT_MAX_LEVERAGE = wei(10);
 export const MAX_POSITION_BUFFER = 0.01;
+export const MIN_MARGIN_AMOUNT = wei(50);

constants/routes.ts

@@ -13,16 +13,12 @@ export const formatUrl = (route: string, params: Record<string, string>) => {
 export const ROUTES = {
 	Home: {
 		Root: '/',
-		Overview: normalizeRoute('/dashboard', 'overview', 'tab'),
-		History: normalizeRoute('/dashboard', 'history', 'tab'),
-		Markets: normalizeRoute('/dashboard', 'markets', 'tab'),
 	},
 	Dashboard: {
 		Home: '/dashboard',
-		Convert: normalizeRoute('/dashboard', 'convert', 'tab'),
-		SynthBalances: normalizeRoute('/dashboard', 'synth-balances', 'tab'),
-		Transactions: normalizeRoute('/dashboard', 'transactions', 'tab'),
-		Deprecated: normalizeRoute('/dashboard', 'deprecated', 'tab'),
+		Overview: normalizeRoute('/dashboard', 'overview', 'tab'),
+		History: normalizeRoute('/dashboard', 'history', 'tab'),
+		Markets: normalizeRoute('/dashboard', 'markets', 'tab'),
 	},
 	Exchange: {
 		Home: '/exchange',
@@ -47,6 +43,9 @@ export const ROUTES = {
 		Transfers: (asset: FuturesMarketAsset, accountType: FuturesAccountType) =>
 			formatUrl('/market', { asset, accountType, tab: 'transfers' }),
 	},
+	Stats: {
+		Home: '/stats',
+	},
 	Leaderboard: {
 		Home: '/leaderboard',
 		Trader: (trader: string) => `/leaderboard/?trader=${trader}`,

contexts/StatsContext.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+
+import useStatsData from 'hooks/useStatsData';
+
+export const StatsContext = React.createContext<ReturnType<typeof useStatsData> | undefined>(
+	undefined
+);
+
+export const useStatsContext = () => {
+	const statsContext = React.useContext(StatsContext);
+
+	if (!statsContext) throw new Error('Stats context not defined yet.');
+
+	return statsContext;
+};

hooks/useExchange.ts

@@ -65,14 +65,10 @@ import { normalizeGasLimit, getTransactionPrice } from 'utils/network';
 
 import useIsL2 from './useIsL2';
 
-type ExchangeCardProps = {
-	showNoSynthsCard?: boolean;
-};
-
 type ExchangeModal = 'settle' | 'confirm' | 'approve' | 'redeem' | 'base-select' | 'quote-select';
 export type SwapRatio = 25 | 50 | 75 | 100;
 
-const useExchange = ({ showNoSynthsCard = false }: ExchangeCardProps) => {
+const useExchange = () => {
 	const { t } = useTranslation();
 	const { monitorTransaction } = TransactionNotifier.useContainer();
 
@@ -415,7 +411,7 @@ const useExchange = ({ showNoSynthsCard = false }: ExchangeCardProps) => {
 		oneInchQuoteQuery,
 	]);
 
-	const noSynths = synthsWalletBalancesQuery.data?.balances.length === 0;
+	const noSynths = true;
 
 	const routeToMarketPair = useCallback(
 		(baseCurrencyKey: string, quoteCurrencyKey: string) =>
@@ -1029,7 +1025,6 @@ const useExchange = ({ showNoSynthsCard = false }: ExchangeCardProps) => {
 		exchangeFeeRate,
 		oneInchQuoteQuery,
 		numEntries,
-		showNoSynthsCard,
 		quoteCurrencyBalance,
 		quotePriceRate,
 		baseFeeRate,

hooks/useFuturesData.ts

@@ -22,12 +22,7 @@ import Connector from 'containers/Connector';
 import TransactionNotifier from 'containers/TransactionNotifier';
 import { useRefetchContext } from 'contexts/RefetchContext';
 import { KWENTA_TRACKING_CODE, ORDER_PREVIEW_ERRORS } from 'queries/futures/constants';
-import {
-	PositionSide,
-	TradeFees,
-	FuturesTradeInputs,
-	FuturesAccountType,
-} from 'queries/futures/types';
+import { PositionSide, FuturesTradeInputs, FuturesAccountType } from 'queries/futures/types';
 import useGetFuturesPotentialTradeDetails from 'queries/futures/useGetFuturesPotentialTradeDetails';
 import { getFuturesMarketContract } from 'queries/futures/utils';
 import {
@@ -54,7 +49,7 @@ import {
 	crossMarginAccountOverviewState,
 } from 'store/futures';
 import { zeroBN, floorNumber, weiToString } from 'utils/formatters/number';
-import { getDisplayAsset, MarketKeyByAsset } from 'utils/futures';
+import { calculateMarginDelta, getDisplayAsset, MarketKeyByAsset } from 'utils/futures';
 import logError from 'utils/logError';
 
 import useCrossMarginAccountContracts from './useCrossMarginContracts';
@@ -263,19 +258,6 @@ const useFuturesData = () => {
 		]
 	);
 
-	const calculateMarginDelta = useCallback(
-		async (nextTrade: FuturesTradeInputs, fees: TradeFees) => {
-			if (nextTrade.nativeSizeDelta.add(position?.position?.size || 0).eq(zeroBN)) return zeroBN;
-			const currentSize = position?.position?.notionalValue || zeroBN;
-			const newNotionalValue = currentSize.add(nextTrade.susdSizeDelta);
-			const fullMargin = newNotionalValue.abs().div(nextTrade.leverage);
-
-			let marginDelta = fullMargin.sub(position?.remainingMargin || '0').add(fees.total);
-			return marginDelta;
-		},
-		[position?.position?.notionalValue, position?.position?.size, position?.remainingMargin]
-	);
-
 	// eslint-disable-next-line
 	const debounceFetchPreview = useCallback(
 		debounce(async (nextTrade: FuturesTradeInputs, fromLeverage = false) => {
@@ -286,7 +268,7 @@ const useFuturesData = () => {
 				if (selectedAccountType === 'cross_margin') {
 					nextMarginDelta =
 						nextTrade.nativeSizeDelta.abs().gt(0) || fromLeverage
-							? await calculateMarginDelta(nextTrade, fees)
+							? await calculateMarginDelta(nextTrade, fees, position)
 							: zeroBN;
 					setCrossMarginMarginDelta(nextMarginDelta);
 				}
@@ -311,6 +293,7 @@ const useFuturesData = () => {
 			calculateFees,
 			getPotentialTrade,
 			calculateMarginDelta,
+			position,
 			orderPrice,
 			orderType,
 			selectedAccountType,

hooks/useStatsData.ts

@@ -0,0 +1,41 @@
+import { useMemo } from 'react';
+import { useRecoilState, useRecoilValue } from 'recoil';
+
+import useGetFuturesMarkets from 'queries/futures/useGetFuturesMarkets';
+import { useGetFuturesTradersStats } from 'queries/futures/useGetFuturesTradersStats';
+import { useGetStatsVolumes } from 'queries/futures/useGetStatsVolumes';
+import { futuresMarketsState } from 'store/futures';
+import { selectedTimeframeState } from 'store/stats';
+
+export type StatsTimeframe = '1M' | '1Y' | 'MAX';
+
+const useStatsData = () => {
+	const [selectedTimeframe, setSelectedTimeframe] = useRecoilState(selectedTimeframeState);
+	const futuresMarkets = useRecoilValue(futuresMarketsState);
+
+	// run queries
+	useGetFuturesMarkets();
+	const { data: volumeData, isLoading: volumeIsLoading } = useGetStatsVolumes();
+	const { data: tradersData, isLoading: tradersIsLoading } = useGetFuturesTradersStats();
+
+	const openInterestData = useMemo(() => {
+		return futuresMarkets.map(({ asset, marketSize, price }) => {
+			return {
+				asset,
+				openInterest: marketSize.mul(price).toNumber(),
+			};
+		});
+	}, [futuresMarkets]);
+
+	return {
+		volumeData,
+		volumeIsLoading,
+		tradersData,
+		tradersIsLoading,
+		openInterestData,
+		selectedTimeframe,
+		setSelectedTimeframe,
+	};
+};
+
+export default useStatsData;