Fix market name (#1221)

* fix market name

* improve types

* fix profit calculator

queries/futures/types.ts

@@ -60,6 +60,7 @@ export type FuturesPosition = {
 
 export type FuturesMarket = {
 	market: string;
+	marketName: string;
 	asset: FuturesMarketAsset;
 	assetHex: string;
 	currentFundingRate: Wei;

queries/futures/useGetFuturesMarkets.ts

@@ -10,7 +10,7 @@ import { FuturesClosureReason } from 'hooks/useFuturesMarketClosed';
 import { appReadyState } from 'store/app';
 import { futuresMarketsState } from 'store/futures';
 import { isL2State, isWalletConnectedState, networkState } from 'store/wallet';
-import { FuturesMarketAsset, MarketKeyByAsset } from 'utils/futures';
+import { FuturesMarketAsset, getMarketName, MarketKeyByAsset } from 'utils/futures';
 
 import { FuturesMarket } from './types';
 import { getReasonFromCode } from './utils';
@@ -81,6 +81,7 @@ const useGetFuturesMarkets = (options?: UseQueryOptions<FuturesMarket[]>) => {
 					i: number
 				) => ({
 					market,
+					marketName: getMarketName(utils.parseBytes32String(asset) as FuturesMarketAsset),
 					asset: utils.parseBytes32String(asset) as FuturesMarketAsset,
 					assetHex: asset,
 					currentFundingRate: wei(currentFundingRate).neg(),

sections/dashboard/FuturesHistoryTable/FuturesHistoryTable.tsx

@@ -22,7 +22,7 @@ import useGetAllFuturesTradesForAccount from 'queries/futures/useGetAllFuturesTr
 import { TradeStatus } from 'sections/futures/types';
 import { isL2State, walletAddressState } from 'store/wallet';
 import { formatCryptoCurrency, formatCurrency } from 'utils/formatters/number';
-import { FuturesMarketAsset, getDisplayAsset, MarketKeyByAsset } from 'utils/futures';
+import { FuturesMarketAsset, getMarketName, MarketKeyByAsset } from 'utils/futures';
 
 import TimeDisplay from '../../futures/Trades/TimeDisplay';
 
@@ -41,11 +41,11 @@ const FuturesHistoryTable: FC = () => {
 	const mappedHistoricalTrades = useMemo(
 		() =>
 			trades.map((trade) => {
-				const parsedAsset = ethersUtils.parseBytes32String(trade.asset);
+				const parsedAsset = ethersUtils.parseBytes32String(trade.asset) as FuturesMarketAsset;
 				return {
 					...trade,
 					asset: parsedAsset,
-					market: getDisplayAsset(parsedAsset) + '-PERP',
+					market: getMarketName(parsedAsset),
 					price: Number(trade.price?.div(ETH_UNIT)),
 					size: Number(trade.size.div(ETH_UNIT).abs()),
 					timestamp: Number(trade.timestamp.mul(1000)),

sections/dashboard/FuturesMarketsTable/FuturesMarketsTable.tsx

@@ -22,7 +22,6 @@ import useGetFuturesTradingVolumeForAllMarkets from 'queries/futures/useGetFutur
 import useLaggedDailyPrice from 'queries/rates/useLaggedDailyPrice';
 import { futuresMarketsState } from 'store/futures';
 import {
-	getDisplayAsset,
 	getSynthDescription,
 	isEurForex,
 	MarketKeyByAsset,
@@ -58,7 +57,7 @@ const FuturesMarketsTable: FC = () => {
 
 			return {
 				asset: market.asset,
-				market: getDisplayAsset(market.asset) + '-PERP',
+				market: market.marketName,
 				synth: synthsMap[market.asset],
 				description,
 				price: market.price,

sections/dashboard/FuturesPositionsTable/FuturesPositionsTable.tsx

@@ -24,7 +24,6 @@ import { isL2State } from 'store/wallet';
 import { formatNumber } from 'utils/formatters/number';
 import {
 	FuturesMarketAsset,
-	getDisplayAsset,
 	getSynthDescription,
 	isEurForex,
 	MarketKeyByAsset,
@@ -64,7 +63,7 @@ const FuturesPositionsTable: FC<FuturesPositionTableProps> = ({
 
 				return {
 					asset: position.asset,
-					market: getDisplayAsset(position.asset) + '-PERP',
+					market: market?.marketName,
 					marketKey: MarketKeyByAsset[position.asset],
 					description,
 					price: market?.price,

sections/futures/FuturesMarketTabs/FuturesMarketTab.tsx

@@ -16,7 +16,7 @@ import useGetFuturesTradingVolumeForAllMarkets from 'queries/futures/useGetFutur
 import useLaggedDailyPrice from 'queries/rates/useLaggedDailyPrice';
 import { futuresMarketsState } from 'store/futures';
 import { FlexDivCol } from 'styles/common';
-import { FuturesMarketAsset, getDisplayAsset, isEurForex, MarketKeyByAsset } from 'utils/futures';
+import { FuturesMarketAsset, isEurForex, MarketKeyByAsset } from 'utils/futures';
 
 enum TableColumnAccessor {
 	Market = 'market',
@@ -49,7 +49,7 @@ const FuturesMarketsTable: FC = () => {
 
 				return {
 					asset: market.asset,
-					market: getDisplayAsset(market.asset) + '-PERP',
+					market: market.marketName,
 					price: market.price,
 					volume: volume?.toNumber() ?? 0,
 					priceChange: market.price.sub(pastPrice?.price ?? 0).div(market.price) || 0,

sections/futures/MarketDetails/MarketDetails.tsx

@@ -9,7 +9,6 @@ import useRateUpdateQuery from 'queries/rates/useRateUpdateQuery';
 import { currentMarketState, marketInfoState } from 'store/futures';
 import media from 'styles/media';
 import { formatPercent } from 'utils/formatters/number';
-import { getDisplayAsset } from 'utils/futures';
 
 import useGetMarketData from './useGetMarketData';
 import useGetSkewData from './useGetSkewData';
@@ -26,7 +25,6 @@ const MarketDetails: React.FC<MarketDetailsProps> = ({ mobile }) => {
 	const marketInfo = useRecoilValue(marketInfoState);
 	const marketAsset = useRecoilValue(currentMarketState);
 
-	const assetName = `${getDisplayAsset(marketAsset)}-PERP`;
 	const pausedClass = marketInfo?.isSuspended ? 'paused' : '';
 
 	const skewData = useGetSkewData();
@@ -97,7 +95,7 @@ const MarketDetails: React.FC<MarketDetailsProps> = ({ mobile }) => {
 						{children}
 					</MarketDetailsTooltip>
 				);
-			case assetName:
+			case marketInfo?.marketName:
 				return (
 					<TimerTooltip
 						key={key}

sections/futures/MarketDetails/useGetMarketData.ts

@@ -14,7 +14,7 @@ import useLaggedDailyPrice from 'queries/rates/useLaggedDailyPrice';
 import { currentMarketState, marketInfoState, marketKeyState } from 'store/futures';
 import { isFiatCurrency } from 'utils/currencies';
 import { formatCurrency, formatPercent, zeroBN } from 'utils/formatters/number';
-import { getDisplayAsset, isEurForex } from 'utils/futures';
+import { isEurForex } from 'utils/futures';
 
 type MarketData = Record<string, { value: string | JSX.Element; color?: string }>;
 
@@ -46,7 +46,6 @@ const useGetMarketData = (mobile?: boolean) => {
 
 	const pastPrice = dailyPriceChanges.find((price) => price.synth === marketAsset);
 
-	const assetName = `${getDisplayAsset(marketAsset)}-PERP`;
 	const fundingTitle = React.useMemo(
 		() =>
 			`${
@@ -120,7 +119,7 @@ const useGetMarketData = (mobile?: boolean) => {
 			};
 		} else {
 			return {
-				[assetName]: {
+				[marketInfo?.marketName ?? '']: {
 					value: formatCurrency(selectedPriceCurrency.name, marketPrice, {
 						sign: '$',
 						minDecimals,

sections/futures/PositionCard/PositionCard.tsx

@@ -26,14 +26,13 @@ import media from 'styles/media';
 import { isFiatCurrency } from 'utils/currencies';
 import { formatCurrency, formatPercent, zeroBN } from 'utils/formatters/number';
 import { formatNumber } from 'utils/formatters/number';
-import { getDisplayAsset, getSynthDescription, isEurForex, MarketKeyByAsset } from 'utils/futures';
+import { getMarketName, getSynthDescription, isEurForex, MarketKeyByAsset } from 'utils/futures';
 
 type PositionCardProps = {
 	dashboard?: boolean;
 };
 
 type PositionData = {
-	currencyIconKey: string;
 	marketShortName: string;
 	marketLongName: string;
 	marketPrice: string;
@@ -139,7 +138,7 @@ const PositionCard: React.FC<PositionCardProps> = () => {
 
 		return {
 			currencyIconKey: MarketKeyByAsset[marketAsset],
-			marketShortName: marketAsset ? getDisplayAsset(marketAsset) + '-PERP' : 'Select a market',
+			marketShortName: marketAsset ? getMarketName(marketAsset) : 'Select a market',
 			marketLongName: getSynthDescription(marketAsset, synthsMap, t),
 			marketPrice: formatCurrency(Synths.sUSD, marketAssetRate, {
 				sign: '$',

sections/futures/ProfitCalculator/ProfitCalculator.tsx

@@ -6,7 +6,7 @@ import styled from 'styled-components';
 
 import BaseModal from 'components/BaseModal';
 import PositionButtons from 'sections/futures/PositionButtons';
-import { FuturesMarketAsset } from 'utils/futures';
+import { FuturesMarketAsset, getMarketName } from 'utils/futures';
 
 import { PositionSide } from '../types';
 import LabelWithInput from './LabelWithInput';
@@ -19,6 +19,7 @@ type ProfitCalculatorProps = {
 };
 
 const ProfitCalculator: FC<ProfitCalculatorProps> = ({ marketAsset, setOpenProfitCalcModal }) => {
+	const marketName = getMarketName(marketAsset);
 	const marketAsset__RemovedSChar = marketAsset[0] === 's' ? marketAsset.slice(1) : marketAsset;
 	const { t } = useTranslation();
 
@@ -210,7 +211,7 @@ const ProfitCalculator: FC<ProfitCalculatorProps> = ({ marketAsset, setOpenProfi
 					<ProfitDetails
 						stopLoss={stopLoss}
 						exitPrice={exitPrice}
-						marketAsset={marketAsset__RemovedSChar}
+						marketName={marketName}
 						leverageSide={leverageSide}
 						marketAssetPositionSize={marketAssetPositionSize}
 					/>

sections/futures/ProfitCalculator/ProfitDetails.tsx

@@ -16,15 +16,15 @@ function textColor(props: any) {
 type ProfitDetailsProps = {
 	stopLoss: string;
 	exitPrice: string;
-	marketAsset: string;
+	marketName: string;
 	leverageSide: PositionSide;
 	marketAssetPositionSize: string;
 };
 
 const ProfitDetails: React.FC<ProfitDetailsProps> = ({
 	stopLoss,
 	exitPrice,
-	marketAsset,
+	marketName,
 	leverageSide,
 	marketAssetPositionSize,
 }) => {
@@ -86,7 +86,7 @@ const ProfitDetails: React.FC<ProfitDetailsProps> = ({
 							? wei(marketAssetPositionSize).toNumber().toFixed(2)
 							: ''}
 					</RowText>
-					<RowText className="gray-font-color">{`${marketAsset}-PERP`}</RowText>
+					<RowText className="gray-font-color">{marketName}</RowText>
 				</Details>
 			</StyledProfitDetails>
 		</>

sections/futures/ShareModal/AmountContainer.tsx

@@ -6,7 +6,7 @@ import CurrencyIcon from 'components/Currency/CurrencyIcon';
 import { FuturesPosition } from 'queries/futures/types';
 import { currentMarketState } from 'store/futures';
 import { formatNumber, zeroBN } from 'utils/formatters/number';
-import { getDisplayAsset } from 'utils/futures';
+import { getMarketName } from 'utils/futures';
 
 import { PositionSide } from '../types';
 
@@ -24,7 +24,7 @@ const AmountContainer: FC<AmountContainerProps> = ({ position }) => {
 	const marketAsset = useRecoilValue(currentMarketState);
 	// TODO: Probably store the market key separately in Recoil
 	// using a selector to handle these scenarios.
-	const marketAsset__RemovedSChar = getDisplayAsset(marketAsset);
+	const marketName = getMarketName(marketAsset);
 	const positionDetails = position?.position ?? null;
 	const leverage = formatNumber(positionDetails?.leverage ?? zeroBN) + 'x';
 	const side = positionDetails?.side === 'long' ? PositionSide.LONG : PositionSide.SHORT;
@@ -45,7 +45,7 @@ const AmountContainer: FC<AmountContainerProps> = ({ position }) => {
 			<Container>
 				<StyledPositionType>
 					<CurrencyIcon style={currencyIconStyle} currencyKey={marketAsset} />
-					<StyledPositionDetails>{`${marketAsset__RemovedSChar}-PERP`}</StyledPositionDetails>
+					<StyledPositionDetails>{marketName}</StyledPositionDetails>
 					<StyledPositionDetails className="line-separator">{`|`}</StyledPositionDetails>
 					<StyledPositionSide className={side}>{side.toUpperCase()}</StyledPositionSide>
 					<StyledPositionDetails className="line-separator">{`|`}</StyledPositionDetails>

sections/futures/Trade/MarketsDropdown.tsx

@@ -19,7 +19,7 @@ import { assetToSynth, iStandardSynth } from 'utils/currencies';
 import { formatCurrency, formatPercent, zeroBN } from 'utils/formatters/number';
 import {
 	FuturesMarketAsset,
-	getDisplayAsset,
+	getMarketName,
 	getSynthDescription,
 	isEurForex,
 	MarketKeyByAsset,
@@ -56,7 +56,7 @@ type AssetToCurrencyOptionArgs = {
 
 const assetToCurrencyOption = (args: AssetToCurrencyOptionArgs): MarketsCurrencyOption => ({
 	value: args.asset,
-	label: `${getDisplayAsset(args.asset)}-PERP`,
+	label: getMarketName(args.asset),
 	...args,
 });
 

sections/futures/UserInfo/OpenOrdersTable.tsx

@@ -17,7 +17,12 @@ import TransactionNotifier from 'containers/TransactionNotifier';
 import { currentMarketState, marketInfoState, openOrdersState } from 'store/futures';
 import { gasSpeedState, walletAddressState } from 'store/wallet';
 import { formatCurrency } from 'utils/formatters/number';
-import { getDisplayAsset, MarketKeyByAsset, FuturesMarketAsset } from 'utils/futures';
+import {
+	getDisplayAsset,
+	MarketKeyByAsset,
+	FuturesMarketAsset,
+	getMarketName,
+} from 'utils/futures';
 
 import OrderDrawer from '../MobileTrade/drawers/OrderDrawer';
 import { PositionSide } from '../types';
@@ -79,7 +84,7 @@ const OpenOrdersTable: React.FC = () => {
 	const data = React.useMemo(() => {
 		return openOrders.map((order: any) => ({
 			asset: order.asset,
-			market: getDisplayAsset(order.asset) + '-PERP',
+			market: getMarketName(order.asset),
 			marketKey: MarketKeyByAsset[order.asset as FuturesMarketAsset],
 			orderType: order.orderType === 'NextPrice' ? 'Next-Price' : order.orderType,
 			size: formatCurrency(order.asset, order.size.abs(), {

sections/leaderboard/TraderHistory/TraderHistory.tsx

@@ -15,6 +15,7 @@ import { PositionHistory } from 'queries/futures/types';
 import useGetFuturesAccountPositionHistory from 'queries/futures/useGetFuturesAccountPositionHistory';
 import TimeDisplay from 'sections/futures/Trades/TimeDisplay';
 import { FlexDiv } from 'styles/common';
+import { getMarketName } from 'utils/futures';
 
 type TraderHistoryProps = {
 	trader: string;
@@ -42,7 +43,7 @@ const TraderHistory: FC<TraderHistoryProps> = ({
 				return {
 					rank: i + 1,
 					currencyIconKey: stat.asset ? (stat.asset[0] !== 's' ? 's' : '') + stat.asset : '',
-					marketShortName: (stat.asset[0] === 's' ? stat.asset.slice(1) : stat.asset) + '-PERP',
+					marketShortName: getMarketName(stat.asset),
 					openTimestamp: stat.openTimestamp,
 					asset: stat.asset,
 					status: stat.isOpen ? 'Open' : stat.isLiquidated ? 'Liquidated' : 'Closed',

sections/shared/Layout/AppLayout/Header/BalanceActions.tsx

@@ -12,7 +12,7 @@ import { Synths } from 'constants/currency';
 import { balancesState, positionsState } from 'store/futures';
 import { FlexDivRow, FlexDivRowCentered } from 'styles/common';
 import { formatCurrency, zeroBN } from 'utils/formatters/number';
-import { FuturesMarketAsset, getDisplayAsset, MarketKeyByAsset } from 'utils/futures';
+import { FuturesMarketAsset, getMarketName, MarketKeyByAsset } from 'utils/futures';
 
 type ReactSelectOptionProps = {
 	label: string;
@@ -46,7 +46,7 @@ const BalanceActions: FC = () => {
 				accessiblePositions.find((position) => position.asset === asset)?.remainingMargin ?? zeroBN;
 
 			return {
-				label: `${getDisplayAsset(asset)}-PERP`,
+				label: getMarketName(asset),
 				synthIcon: MarketKeyByAsset[asset],
 				marketRemainingMargin: formatCurrency(Synths.sUSD, remainingMargin, { sign: '$' }),
 				onClick: () => router.push(`/market/${asset}`),

utils/futures.ts

@@ -8,6 +8,10 @@ export const getMarketAsset = (marketKey: FuturesMarketKey) => {
 	return markets[marketKey].asset;
 };
 
+export const getMarketName = (asset: FuturesMarketAsset | null) => {
+	return `${getDisplayAsset(asset)}-PERP`;
+};
+
 export const getDisplayAsset = (asset: string | null) => {
 	return asset ? (asset[0] === 's' ? asset.slice(1) : asset) : null;
 };