♻️ Futures margin types refactor / cleanup and perps v3 prep

packages/app/src/__tests__/pages/market.test.tsx

@@ -1,4 +1,4 @@
-import { FuturesMarket } from '@kwenta/sdk/dist/types'
+import { FuturesMarket } from '@kwenta/sdk/types'
 import { wei } from '@synthetixio/wei'
 import { fireEvent, render, waitFor } from '@testing-library/react'
 import { ReactNode } from 'react'

packages/app/src/components/Nav/FuturesIcon.tsx

@@ -1,4 +1,4 @@
-import { FuturesAccountType } from '@kwenta/sdk/utils'
+import { FuturesMarginType } from '@kwenta/sdk/types'
 
 import CrossMarginIconDark from 'assets/svg/futures/cross-margin-icon-dark.svg'
 import CrossMarginIconLight from 'assets/svg/futures/cross-margin-icon-light.svg'
@@ -8,7 +8,7 @@ import { useAppSelector } from 'state/hooks'
 import { selectCurrentTheme } from 'state/preferences/selectors'
 
 type IconProps = {
-	type: FuturesAccountType
+	type: FuturesMarginType
 }
 
 export default function FuturesIcon(props: IconProps) {
@@ -17,7 +17,7 @@ export default function FuturesIcon(props: IconProps) {
 	const CrossMarginIcon = currentTheme === 'dark' ? CrossMarginIconDark : CrossMarginIconLight
 	const IsolatedMarginIcon =
 		currentTheme === 'dark' ? IsolatedMarginIconDark : IsolatedMarginIconLight
-	return props.type === 'cross_margin' || props.type === 'smart_margin' ? (
+	return props.type === FuturesMarginType.SMART_MARGIN ? (
 		<CrossMarginIcon {...props} />
 	) : (
 		<IsolatedMarginIcon {...props} />

packages/app/src/components/SocketBridge/SocketBridge.tsx

@@ -1,3 +1,4 @@
+import { FuturesMarginType } from '@kwenta/sdk/types'
 import { Bridge } from '@socket.tech/plugin'
 import { useCallback } from 'react'
 import styled, { useTheme } from 'styled-components'
@@ -42,7 +43,7 @@ const SocketBridge = () => {
 				enableSameChainSwaps={true}
 				onBridgeSuccess={onBridgeSuccess}
 			/>
-			{accountType === 'isolated_margin' && (
+			{accountType === FuturesMarginType.CROSS_MARGIN && (
 				<StyledDiv>
 					<ArrowIcon />
 				</StyledDiv>

packages/app/src/constants/defaults.ts

@@ -1,3 +1,5 @@
+import { FuturesMarginType } from '@kwenta/sdk/types'
+
 import { Language } from 'translations/constants'
 
 // app defaults
@@ -35,6 +37,6 @@ export const DEFAULT_DELAYED_CANCEL_BUFFER = 15
 
 export const CROSS_MARGIN_ENABLED = true
 
-export const DEFAULT_FUTURES_MARGIN_TYPE = 'cross_margin'
+export const DEFAULT_FUTURES_MARGIN_TYPE = FuturesMarginType.SMART_MARGIN
 
 export const DEFAULT_LEVERAGE = '1'

packages/app/src/constants/futures.ts

@@ -0,0 +1,6 @@
+import { FuturesMarginType } from '@kwenta/sdk/types'
+
+export const SUPPORTED_PERPS_TYPES =
+	process.env.NODE_ENV !== 'production'
+		? [FuturesMarginType.SMART_MARGIN]
+		: [FuturesMarginType.SMART_MARGIN, FuturesMarginType.CROSS_MARGIN]

packages/app/src/constants/queryKeys.ts

@@ -1,5 +1,5 @@
 import { Period } from '@kwenta/sdk/constants'
-import { NetworkId, FuturesAccountType, FuturesMarketAsset } from '@kwenta/sdk/types'
+import { NetworkId, FuturesMarketAsset } from '@kwenta/sdk/types'
 
 import { CurrencyKey } from './currency'
 
@@ -239,25 +239,6 @@ export const QUERY_KEYS = {
 		TotalLiquidations: ['futures', 'totalLiquidations'],
 		TotalTrades: (networkId: NetworkId) => ['futures', 'totalTrades', networkId],
 		TotalVolume: ['futures', 'totalVolume'],
-		PotentialTrade: (
-			networkId: NetworkId,
-			market: string | null,
-			tradeSize: string,
-			walletAddress: string,
-			selectedAccountType: FuturesAccountType,
-			marginDelta: string,
-			leverageSide: string
-		) => [
-			'futures',
-			'potentialTrade',
-			tradeSize,
-			networkId,
-			market,
-			walletAddress,
-			selectedAccountType,
-			marginDelta,
-			leverageSide,
-		],
 		MarketLimit: (networkId: NetworkId, market: string | null) => [
 			'futures',
 			'marketLimit',

packages/app/src/constants/routes.ts

@@ -1,4 +1,6 @@
-import { FuturesAccountType, FuturesMarketAsset } from '@kwenta/sdk/types'
+import { FuturesMarketAsset } from '@kwenta/sdk/types'
+
+import { AppFuturesMarginType } from 'state/futures/types'
 
 import { EXTERNAL_LINKS } from './links'
 
@@ -32,22 +34,23 @@ export const ROUTES = {
 		Into: (currencyKey: string) => `/exchange/?quote=${currencyKey}`,
 	},
 	Markets: {
-		Home: (accountType: FuturesAccountType) => formatUrl('/market', { accountType, asset: 'sETH' }),
-		MarketPair: (asset: FuturesMarketAsset | string, accountType: FuturesAccountType) =>
+		Home: (accountType: AppFuturesMarginType) =>
+			formatUrl('/market', { accountType, asset: 'sETH' }),
+		MarketPair: (asset: FuturesMarketAsset | string, accountType: AppFuturesMarginType) =>
 			formatUrl('/market', { asset, accountType }),
-		Position: (asset: FuturesMarketAsset, accountType: FuturesAccountType) =>
+		Position: (asset: FuturesMarketAsset, accountType: AppFuturesMarginType) =>
 			formatUrl('/market', {
 				asset,
 				accountType,
 				tab: 'position',
 			}),
-		Orders: (asset: FuturesMarketAsset, accountType: FuturesAccountType) =>
+		Orders: (asset: FuturesMarketAsset, accountType: AppFuturesMarginType) =>
 			formatUrl('/market', { asset, accountType, tab: 'orders' }),
-		ConditionalOrders: (asset: FuturesMarketAsset, accountType: FuturesAccountType) =>
+		ConditionalOrders: (asset: FuturesMarketAsset, accountType: AppFuturesMarginType) =>
 			formatUrl('/market', { asset, accountType, tab: 'conditional_orders' }),
-		Trades: (asset: FuturesMarketAsset, accountType: FuturesAccountType) =>
+		Trades: (asset: FuturesMarketAsset, accountType: AppFuturesMarginType) =>
 			formatUrl('/market', { asset, accountType, tab: 'trades' }),
-		Transfers: (asset: FuturesMarketAsset, accountType: FuturesAccountType) =>
+		Transfers: (asset: FuturesMarketAsset, accountType: AppFuturesMarginType) =>
 			formatUrl('/market', { asset, accountType, tab: 'transfers' }),
 	},
 	Stats: {
@@ -75,7 +78,10 @@ export const SUB_MENUS = {
 	],
 }
 
-export const setLastVisited = (baseCurrencyPair: string, accountType: FuturesAccountType): void => {
+export const setLastVisited = (
+	baseCurrencyPair: string,
+	accountType: AppFuturesMarginType
+): void => {
 	localStorage.setItem('lastVisited', ROUTES.Markets.MarketPair(baseCurrencyPair, accountType))
 }
 

packages/app/src/pages/market.tsx

@@ -1,11 +1,12 @@
-import { FuturesMarketAsset } from '@kwenta/sdk/types'
+import { FuturesMarginType, FuturesMarketAsset } from '@kwenta/sdk/types'
 import { MarketKeyByAsset } from '@kwenta/sdk/utils'
 import { useRouter } from 'next/router'
-import { useEffect, FC, useState, ReactNode } from 'react'
+import { useEffect, FC, ReactNode, useMemo } from 'react'
 import styled from 'styled-components'
 
 import Loader from 'components/Loader'
 import { DesktopOnlyView, MobileOrTabletView } from 'components/Media'
+import { SUPPORTED_PERPS_TYPES } from 'constants/futures'
 import Connector from 'containers/Connector'
 import useIsL2 from 'hooks/useIsL2'
 import useWindowSize from 'hooks/useWindowSize'
@@ -19,26 +20,25 @@ import MarketHead from 'sections/futures/MarketInfo/MarketHead'
 import MobileTrade from 'sections/futures/MobileTrade/MobileTrade'
 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/TradePanel'
+import TradePanel from 'sections/futures/Trade/TradePanel'
 import TransferIsolatedMarginModal from 'sections/futures/Trade/TransferIsolatedMarginModal'
 import DelayedOrderConfirmationModal from 'sections/futures/TradeConfirmation/DelayedOrderConfirmationModal'
 import TradeConfirmationModalCrossMargin from 'sections/futures/TradeConfirmation/TradeConfirmationModalCrossMargin'
-import WithdrawSmartMargin from 'sections/futures/TradeCrossMargin/WithdrawSmartMargin'
+import WithdrawSmartMargin from 'sections/futures/TradeSmartMargin/WithdrawSmartMargin'
 import AppLayout from 'sections/shared/Layout/AppLayout'
 import { setOpenModal } from 'state/app/reducer'
 import { selectShowModal, selectShowPositionModal } from 'state/app/selectors'
 import { clearTradeInputs } from 'state/futures/actions'
 import { usePollMarketFuturesData } from 'state/futures/hooks'
 import { setFuturesAccountType, setMarketAsset } from 'state/futures/reducer'
 import {
-	selectActiveIsolatedPositionsCount,
-	selectCMAccountQueryStatus,
-	selectCrossMarginAccount,
+	selectSmartMarginAccountQueryStatus,
+	selectSmartMarginAccount,
 	selectFuturesType,
 	selectMarketAsset,
-	selectShowCrossMarginOnboard,
+	selectShowSmartMarginOnboard,
 } from 'state/futures/selectors'
+import { AppFuturesMarginType } from 'state/futures/types'
 import { useAppDispatch, useAppSelector } from 'state/hooks'
 import { FetchStatus } from 'state/types'
 import { PageContent } from 'styles/common'
@@ -56,14 +56,17 @@ const Market: MarketComponent = () => {
 	const routerMarketAsset = router.query.asset as FuturesMarketAsset
 
 	const setCurrentMarket = useAppSelector(selectMarketAsset)
-	const showOnboard = useAppSelector(selectShowCrossMarginOnboard)
+	const showOnboard = useAppSelector(selectShowSmartMarginOnboard)
 	const openModal = useAppSelector(selectShowModal)
 	const showPositionModal = useAppSelector(selectShowPositionModal)
 	const accountType = useAppSelector(selectFuturesType)
 	const selectedMarketAsset = useAppSelector(selectMarketAsset)
 
-	const routerAccountType =
-		router.query.accountType === 'cross_margin' ? 'cross_margin' : 'isolated_margin'
+	const routerAccountType = useMemo(() => {
+		if (SUPPORTED_PERPS_TYPES.includes(router.query.accountType as AppFuturesMarginType))
+			return router.query.accountType as AppFuturesMarginType
+		return FuturesMarginType.SMART_MARGIN
+	}, [router.query.accountType])
 
 	useEffect(() => {
 		if (router.isReady && accountType !== routerAccountType) {
@@ -142,25 +145,18 @@ function TradePanelDesktop() {
 	const isL2 = useIsL2()
 	const { walletAddress } = Connector.useContainer()
 	const accountType = useAppSelector(selectFuturesType)
-	const queryStatus = useAppSelector(selectCMAccountQueryStatus)
-	const crossMarginAccount = useAppSelector(selectCrossMarginAccount)
-	const isolatedPositionsCount = useAppSelector(selectActiveIsolatedPositionsCount)
-	const [open, setOpen] = useState(false)
-
-	useEffect(
-		() => setOpen(accountType === 'isolated_margin' && isolatedPositionsCount === 0),
-		[accountType, isolatedPositionsCount]
-	)
+	const queryStatus = useAppSelector(selectSmartMarginAccountQueryStatus)
+	const smartMarginAccount = useAppSelector(selectSmartMarginAccount)
 
 	if (walletAddress && !isL2) {
 		return <FuturesUnsupportedNetwork />
 	}
 
 	if (
 		!router.isReady ||
-		(accountType === 'cross_margin' &&
+		(accountType === FuturesMarginType.SMART_MARGIN &&
 			walletAddress &&
-			!crossMarginAccount &&
+			!smartMarginAccount &&
 			queryStatus.status === FetchStatus.Idle)
 	) {
 		return (
@@ -170,7 +166,7 @@ function TradePanelDesktop() {
 		)
 	}
 
-	return open ? <SwitchToSmartMargin onDismiss={() => setOpen(false)} /> : <TradeIsolatedMargin />
+	return <TradePanel />
 }
 
 Market.getLayout = (page) => <AppLayout>{page}</AppLayout>

packages/app/src/queries/futures/types.ts

@@ -28,8 +28,3 @@ export type FuturesCumulativeStats = {
 	totalLiquidations: string
 	averageTradeSize: string
 }
-
-export enum FuturesAccountTypes {
-	ISOLATED_MARGIN = 'isolated_margin',
-	CROSS_MARGIN = 'cross_margin',
-}

packages/app/src/sections/dashboard/FuturesPositionsTable/FuturesPositionsTable.tsx

@@ -1,4 +1,4 @@
-import { FuturesAccountType } from '@kwenta/sdk/utils'
+import { FuturesMarginType } from '@kwenta/sdk/types'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { FC, useMemo } from 'react'
@@ -18,19 +18,20 @@
 import useIsL2 from 'hooks/useIsL2'
 import useNetworkSwitcher from 'hooks/useNetworkSwitcher'
 import PositionType from 'sections/futures/PositionType'
+import { selectCrossMarginPositions } from 'state/crossMargin/selectors'
 import {
-	selectCrossMarginPositions,
-	selectIsolatedMarginPositions,
+	selectSmartMarginPositions,
 	selectMarkets,
 	selectPositionHistory,
 } from 'state/futures/selectors'
+import { AppFuturesMarginType } from 'state/futures/types'
 import { useAppSelector } from 'state/hooks'
 import { getSynthDescription } from 'utils/futures'
 
 import MobilePositionRow from './MobilePositionRow'
 
 type FuturesPositionTableProps = {
-	accountType: FuturesAccountType
+	accountType: AppFuturesMarginType
 	showCurrentMarket?: boolean
 	showEmptyTable?: boolean
 }
@@ -46,13 +47,14 @@
 
 	const isL2 = useIsL2()
 
-	const isolatedPositions = useAppSelector(selectIsolatedMarginPositions)
 	const crossMarginPositions = useAppSelector(selectCrossMarginPositions)
+	const smartMarginPositions = useAppSelector(selectSmartMarginPositions)
 	const positionHistory = useAppSelector(selectPositionHistory)
 	const futuresMarkets = useAppSelector(selectMarkets)
 
 	let data = useMemo(() => {
-		const positions = accountType === 'cross_margin' ? crossMarginPositions : isolatedPositions
+		const positions =
+			accountType === FuturesMarginType.SMART_MARGIN ? smartMarginPositions : crossMarginPositions
 		return positions
 			.map((position) => {
 				const market = futuresMarkets.find((market) => market.asset === position.asset)
@@ -71,15 +73,15 @@
 				}
 			})
 			.filter(({ position, market }) => !!position && !!market)
-	}, [accountType, isolatedPositions, crossMarginPositions, futuresMarkets, t, positionHistory])
+	}, [accountType, crossMarginPositions, smartMarginPositions, futuresMarkets, t, positionHistory])
 
 	return (
 		<>
 			<DesktopOnlyView>
 				<div>
 					<Table
 						data={data}
-						hiddenColumns={accountType === 'isolated_margin' ? ['tp-sl'] : []}
+						hiddenColumns={accountType === FuturesMarginType.SMART_MARGIN ? ['tp-sl'] : []}
 						onTableRowClick={(row) =>
 							router.push(ROUTES.Markets.MarketPair(row.original.market.asset, accountType))
 						}
@@ -94,7 +96,7 @@
 									{!showCurrentMarket ? (
 										t('dashboard.overview.futures-positions-table.no-result')
 									) : (
-										<Link href={ROUTES.Markets.Home('cross_margin')}>
+										<Link href={ROUTES.Markets.Home(FuturesMarginType.SMART_MARGIN)}>
 											<div>{t('common.perp-cta')}</div>
 										</Link>
 									)}
@@ -293,7 +295,7 @@
 						<div style={{ margin: '0 15px' }}>
 							{data.length === 0 ? (
 								<NoPositionsText>
-									<Link href={ROUTES.Markets.Home('cross_margin')}>
+									<Link href={ROUTES.Markets.Home(FuturesMarginType.SMART_MARGIN)}>
 										<div>{t('common.perp-cta')}</div>
 									</Link>
 								</NoPositionsText>

packages/app/src/sections/dashboard/MobileDashboard/OpenPositions.tsx

@@ -1,3 +1,4 @@
+import { FuturesMarginType } from '@kwenta/sdk/types'
 import { formatDollars } from '@kwenta/sdk/utils'
 import Wei from '@synthetixio/wei'
 import { useMemo, useState } from 'react'
@@ -6,7 +7,6 @@ import styled from 'styled-components'
 
 import TabButton from 'components/Button/TabButton'
 import { TabPanel } from 'components/Tab'
-import { FuturesAccountTypes } from 'queries/futures/types'
 import { SectionHeader, SectionTitle } from 'sections/futures/mobile'
 import { selectBalances } from 'state/balances/selectors'
 import { selectFuturesPortfolio, selectActiveSmartPositionsCount } from 'state/futures/selectors'
@@ -47,7 +47,7 @@ const OpenPositions: React.FC<OpenPositionsProps> = ({ exchangeTokens, exchangeT
 				label: t('dashboard.overview.positions-tabs.smart-margin'),
 				badge: smartPositionsCount,
 				active: activePositionsTab === PositionsTab.SMART_MARGIN,
-				detail: formatDollars(portfolio.crossMarginFutures),
+				detail: formatDollars(portfolio.smartMargin),
 				disabled: false,
 				onClick: () => setActivePositionsTab(PositionsTab.SMART_MARGIN),
 			},
@@ -64,7 +64,7 @@ const OpenPositions: React.FC<OpenPositionsProps> = ({ exchangeTokens, exchangeT
 			t,
 			activePositionsTab,
 			smartPositionsCount,
-			portfolio.crossMarginFutures,
+			portfolio.smartMargin,
 			balances.totalUSDBalance,
 			exchangeTokenBalances,
 			setActivePositionsTab,
@@ -86,7 +86,7 @@ const OpenPositions: React.FC<OpenPositionsProps> = ({ exchangeTokens, exchangeT
 			</div>
 
 			<TabPanel name={PositionsTab.SMART_MARGIN} activeTab={activePositionsTab}>
-				<FuturesPositionsTable accountType={FuturesAccountTypes.CROSS_MARGIN} />
+				<FuturesPositionsTable accountType={FuturesMarginType.CROSS_MARGIN} />
 			</TabPanel>
 
 			<TabPanel name={MarketsTab.SPOT} activeTab={activePositionsTab}>