v7.1.13(app) / v1.0.3(sdk)

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "kwenta",
-	"version": "7.4.12",
+	"version": "7.4.13",
 	"description": "Kwenta",
 	"main": "index.js",
 	"scripts": {

packages/app/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@kwenta/app",
-	"version": "7.4.12",
+	"version": "7.4.13",
 	"scripts": {
 		"dev": "next",
 		"build": "next build",

packages/app/src/components/TVChart/DataFeed.ts

@@ -55,28 +55,6 @@ const splitBaseQuote = (symbolName: string) => {
 	return { base, quote }
 }
 
-// TODO: Make this dynamic
-const getPriceScale = (asset: string | null) => {
-	switch (asset) {
-		case 'BTC':
-		case 'BNB':
-		case 'ETH':
-		case 'stETH':
-		case 'XAU':
-			return 100
-		case 'DOGE':
-		case 'FTM':
-		case 'AUD':
-			return 10000
-		case 'SHIB':
-		case 'FLOKI':
-		case 'PEPE':
-			return 1000000000
-		default:
-			return 1000
-	}
-}
-
 const fetchCombinedCandles = async (
 	base: string,
 	from: number,
@@ -156,6 +134,7 @@ const subscribeOffChainPrices = (
 
 const DataFeedFactory = (
 	networkId: NetworkId,
+	chartScale: number,
 	onSubscribe: (priceListener: PricesListener) => void
 ): IBasicDataFeed => {
 	_latestChartBar.current = undefined
@@ -177,7 +156,7 @@ const DataFeedFactory = (
 				ticker: symbolName,
 				exchange: '',
 				minmov: 1,
-				pricescale: getPriceScale(asset),
+				pricescale: chartScale,
 				has_intraday: true,
 				intraday_multipliers: supportedResolutions,
 				supported_resolution: supportedResolutions,

packages/app/src/components/TVChart/TVChart.tsx

@@ -1,5 +1,5 @@
 import { NetworkId, ConditionalOrder, PricesListener } from '@kwenta/sdk/types'
-import { formatOrderDisplayType, formatNumber } from '@kwenta/sdk/utils'
+import { formatOrderDisplayType, formatNumber, suggestedDecimals } from '@kwenta/sdk/utils'
 import {
 	ChartingLibraryWidgetOptions,
 	IChartingLibraryWidget,
@@ -30,6 +30,7 @@ export type ChartProps = {
 	potentialTrade?: ChartPosition | null
 	openOrders: ConditionalOrder[]
 	showOrderLines: boolean
+	initialPrice: string
 	onChartReady?: () => void
 	onToggleShowOrderLines?: () => void
 }
@@ -55,6 +56,7 @@ export function TVChart({
 	potentialTrade,
 	openOrders,
 	showOrderLines,
+	initialPrice,
 	onToggleShowOrderLines,
 	onChartReady = () => {
 		return
@@ -91,6 +93,10 @@ export function TVChart({
 		_oderLineRefs.current = []
 	}
 
+	const decimals =
+		Number(initialPrice) > 100 && Number(initialPrice) < 1000 ? 3 : suggestedDecimals(initialPrice)
+	const chartScale = 10 ** decimals
+
 	useEffect(() => {
 		return () => {
 			if (_priceListener.current) {
@@ -164,7 +170,11 @@ export function TVChart({
 
 		const widgetOptions: ChartingLibraryWidgetOptions = {
 			symbol: marketAsset + ':sUSD',
-			datafeed: DataFeedFactory((network?.id ?? chain.optimism.id) as NetworkId, onSubscribe),
+			datafeed: DataFeedFactory(
+				(network?.id ?? chain.optimism.id) as NetworkId,
+				chartScale,
+				onSubscribe
+			),
 			interval: interval as ResolutionString,
 			container: containerId,
 			library_path: libraryPath,
@@ -234,7 +244,7 @@ export function TVChart({
 			clearExistingWidget()
 		}
 		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [network?.id as NetworkId, currentTheme, marketAssetLoaded])
+	}, [network?.id as NetworkId, currentTheme, marketAssetLoaded, chartScale])
 
 	useEffect(() => {
 		if (onToggleShowOrderLines) {

packages/app/src/queries/rates/useCandlesticksQuery.ts

@@ -6,8 +6,8 @@ import { getSupportedResolution } from 'components/TVChart/utils'
 import { DEFAULT_NETWORK_ID } from 'constants/defaults'
 import logError from 'utils/logError'
 
-import { DEFAULT_PYTH_TV_ENDPOINT, NON_CRYPTO_ASSET_TYPES } from './constants'
-import { mapCandles, mapPythCandles } from './utils'
+import { DEFAULT_PYTH_TV_ENDPOINT } from './constants'
+import { formatPythSymbol, mapCandles, mapPythCandles } from './utils'
 
 export const requestCandlesticks = async (
 	currencyKey: string | null,
@@ -19,18 +19,13 @@ export const requestCandlesticks = async (
 	const ratesEndpoint = getRatesEndpoint(networkId)
 	const pythTvEndpoint = DEFAULT_PYTH_TV_ENDPOINT
 
-	let prefix =
-		Object.keys(NON_CRYPTO_ASSET_TYPES).find((type) =>
-			NON_CRYPTO_ASSET_TYPES[type].includes(currencyKey!)
-		) || 'Crypto'
-
 	if (period <= 3600) {
 		const response = await axios
 			.get(pythTvEndpoint, {
 				params: {
 					from: minTimestamp,
 					to: maxTimestamp,
-					symbol: `${prefix}.${currencyKey}/USD`,
+					symbol: formatPythSymbol(currencyKey!),
 					resolution: getSupportedResolution(period),
 				},
 			})

packages/app/src/queries/rates/utils.ts

@@ -1,5 +1,6 @@
 import { CandleResult } from '@kwenta/sdk/utils'
 
+import { NON_CRYPTO_ASSET_TYPES } from './constants'
 import { Candle, PythResponse } from './types'
 
 export const mapCandles = (candles: CandleResult[]): Candle[] => {
@@ -27,3 +28,12 @@ export const mapPythCandles = (candleData: PythResponse): Candle[] => {
 		}
 	})
 }
+
+export const formatPythSymbol = (asset: string): string => {
+	if (asset === 'ETHBTC') return 'Crypto.ETH/BTC'
+	const prefix =
+		Object.keys(NON_CRYPTO_ASSET_TYPES).find((type) =>
+			NON_CRYPTO_ASSET_TYPES[type].includes(asset)
+		) || 'Crypto'
+	return `${prefix}.${asset}/USD`
+}

packages/app/src/sections/exchange/TradeCard/CurrencyCard/CurrencyCardInput.tsx

@@ -141,7 +141,6 @@ const CurrencyAmount = styled(NumericInput)`
 
 	input {
 		font-size: 30px;
-		line-height: 2.25em;
 		letter-spacing: -1px;
 		height: 30px;
 		width: 100%;

packages/app/src/sections/futures/MarketDetails/utils.ts

@@ -21,8 +21,8 @@ export const marketDataKeyMap: Record<MarketDataKey, string> = {
 	[MarketDataKey.dailyTrades]: '24h-trades',
 	[MarketDataKey.openInterestLong]: 'open-interest-l',
 	[MarketDataKey.openInterestShort]: 'open-interest-s',
-	[MarketDataKey.openInterestLongMobile]: 'open-interest-lm',
-	[MarketDataKey.openInterestShortMobile]: 'open-interest-sm',
+	[MarketDataKey.openInterestLongMobile]: 'open-interest-l',
+	[MarketDataKey.openInterestShortMobile]: 'open-interest-s',
 	[MarketDataKey.instFundingRate]: '1h-funding-rate',
 	[MarketDataKey.hourlyFundingRate]: 'funding-rate',
 	[MarketDataKey.skew]: 'skew',

packages/app/src/sections/futures/MobileTrade/MobileTrade.tsx

@@ -34,7 +34,7 @@ const MobileTrade: React.FC = () => {
 		<>
 			<MobileContainer mobile={deviceType === 'mobile'} id="mobile-view" showBanner={showBanner}>
 				{deviceType === 'mobile' && <MarketsDropdown mobile={deviceType === 'mobile'} />}
-				{deviceType === 'mobile' && <TradeBalance isMobile={true} />}
+				{deviceType === 'mobile' && <TradeBalance />}
 				<MarketDetails mobile />
 			</MobileContainer>
 			<OverviewTabs />

packages/app/src/sections/futures/MobileTrade/UserTabs/PositionsTab.tsx

@@ -127,7 +127,7 @@ const PositionsTab = () => {
 								<div>
 									<Body>{row.market.marketName}</Body>
 									<Body capitalized color="secondary">
-										{accountType === 'isolated_margin' ? 'Isolated Margin' : 'Cross-Margin'}
+										{accountType === 'isolated_margin' ? 'Isolated Margin' : 'Smart Margin'}
 									</Body>
 								</div>
 							</FlexDiv>

packages/app/src/sections/futures/PositionChart.tsx

@@ -6,6 +6,7 @@ import { FlexDiv } from 'components/layout/flex'
 import TVChart from 'components/TVChart'
 import {
 	selectConditionalOrdersForMarket,
+	selectMarketIndexPrice,
 	selectPosition,
 	selectPositionPreviewData,
 	selectSelectedMarketPositionHistory,
@@ -23,6 +24,7 @@ export default function PositionChart({ display = true }: PositionChartProps) {
 	const previewTrade = useAppSelector(selectTradePreview)
 	const subgraphPosition = useAppSelector(selectSelectedMarketPositionHistory)
 	const positionPreview = useAppSelector(selectPositionPreviewData)
+	const initialPrice = useAppSelector(selectMarketIndexPrice)
 
 	const [showOrderLines, setShowOrderLines] = useState(true)
 	const [isChartReady, setIsChartReady] = useState(false)
@@ -52,6 +54,7 @@ export default function PositionChart({ display = true }: PositionChartProps) {
 			<TVChart
 				openOrders={openOrders}
 				activePosition={activePosition}
+				initialPrice={initialPrice.toString()}
 				potentialTrade={
 					previewTrade
 						? {

packages/app/src/sections/futures/ProfitCalculator/ProfitCalculator.tsx

@@ -1,4 +1,5 @@
 import { PositionSide } from '@kwenta/sdk/types'
+import { getMarketName } from '@kwenta/sdk/utils'
 import { wei } from '@synthetixio/wei'
 import { useCallback, useEffect, useState, FC, memo } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -8,7 +9,6 @@ import BaseModal from 'components/BaseModal'
 import PositionButtons from 'sections/futures/PositionButtons'
 import { selectMarketAsset, selectMarketIndexPrice } from 'state/futures/selectors'
 import { useAppSelector } from 'state/hooks'
-import { getMarketName } from 'utils/futures'
 
 import LabelWithInput from './LabelWithInput'
 import PnLs from './PnLs'

packages/app/src/sections/futures/ShareModal/AmountContainer.tsx

@@ -1,6 +1,6 @@
 import { ZERO_WEI } from '@kwenta/sdk/constants'
 import { PositionSide } from '@kwenta/sdk/types'
-import { MarketKeyByAsset, formatNumber } from '@kwenta/sdk/utils'
+import { MarketKeyByAsset, formatNumber, getMarketName } from '@kwenta/sdk/utils'
 import { FC, useMemo } from 'react'
 import styled from 'styled-components'
 
@@ -9,7 +9,6 @@ import { selectMarketAsset } from 'state/futures/selectors'
 import { SharePositionParams } from 'state/futures/types'
 import { useAppSelector } from 'state/hooks'
 import media from 'styles/media'
-import { getMarketName } from 'utils/futures'
 
 const AmountContainer: FC<SharePositionParams> = ({ asset, position }) => {
 	const defaultAsset = useAppSelector(selectMarketAsset)

packages/app/src/sections/futures/ShareModal/ShareModalButton.tsx

@@ -1,6 +1,6 @@
 import { ZERO_WEI } from '@kwenta/sdk/constants'
 import { PositionSide } from '@kwenta/sdk/types'
-import { formatDollars, formatNumber } from '@kwenta/sdk/utils'
+import { formatDollars, formatNumber, getMarketName } from '@kwenta/sdk/utils'
 import { toPng } from 'html-to-image'
 import { FC } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -10,7 +10,6 @@ import TwitterIcon from 'assets/svg/social/twitter.svg'
 import Button from 'components/Button'
 import { DesktopOnlyView, MobileOrTabletView } from 'components/Media'
 import { SharePositionParams } from 'state/futures/types'
-import { getMarketName } from 'utils/futures'
 
 function getTwitterText(
 	side: PositionSide,

packages/app/src/sections/futures/Trade/MarketsDropdown.tsx

@@ -6,6 +6,7 @@ import {
 	MarketKeyByAsset,
 	floorNumber,
 	formatDollars,
+	getMarketName,
 } from '@kwenta/sdk/utils'
 import { wei } from '@synthetixio/wei'
 import { useRouter } from 'next/router'
@@ -42,7 +43,7 @@ import { useAppSelector } from 'state/hooks'
 import { selectPreviousDayPrices } from 'state/prices/selectors'
 import { FetchStatus } from 'state/types'
 import media from 'styles/media'
-import { getMarketName, getSynthDescription } from 'utils/futures'
+import { getSynthDescription } from 'utils/futures'
 
 import {
 	MARKETS_DETAILS_HEIGHT_DESKTOP,
@@ -235,7 +236,7 @@ const MarketsDropdown: React.FC<MarketsDropdownProps> = ({ mobile }) => {
 											)}
 										</div>
 									),
-									size: 35,
+									size: 30,
 								},
 								{
 									header: () => <TableHeader>{t('futures.markets-drop-down.market')}</TableHeader>,
@@ -249,7 +250,7 @@ const MarketsDropdown: React.FC<MarketsDropdownProps> = ({ mobile }) => {
 											<Body>{getDisplayAsset(row.original.asset)}</Body>
 										</FlexDivRowCentered>
 									),
-									size: 80,
+									size: 65,
 								},
 								{
 									header: () => <TableHeader>{t('futures.markets-drop-down.price')}</TableHeader>,
@@ -265,10 +266,14 @@ const MarketsDropdown: React.FC<MarketsDropdownProps> = ({ mobile }) => {
 											</div>
 										)
 									},
-									size: 80,
+									size: 100,
 								},
 								{
-									header: () => <TableHeader>{t('futures.markets-drop-down.change')}</TableHeader>,
+									header: () => (
+										<TableHeader style={{ width: '70px', textAlign: 'right' }}>
+											{t('futures.markets-drop-down.change')}
+										</TableHeader>
+									),
 									cell: ({ row }) => {
 										return (
 											<div>
@@ -284,6 +289,7 @@ const MarketsDropdown: React.FC<MarketsDropdownProps> = ({ mobile }) => {
 																row.original.change ? row.original.change * 100 : '0',
 																2
 															)}
+															style={{ textAlign: 'right', width: '60px' }}
 														/>
 													}
 												/>
@@ -293,7 +299,7 @@ const MarketsDropdown: React.FC<MarketsDropdownProps> = ({ mobile }) => {
 									accessorKey: 'change',
 									sortingFn: 'basic',
 									enableSorting: true,
-									size: 50,
+									size: 60,
 								},
 							]}
 							data={options}