add array of tokens to revers token pairs

src/components/PositionDetails/PositionDetails.tsx

@@ -1,7 +1,7 @@
 import SinglePositionInfo from '@components/PositionDetails/SinglePositionInfo/SinglePositionInfo'
 import SinglePositionPlot from '@components/PositionDetails/SinglePositionPlot/SinglePositionPlot'
 import { TickPlotPositionData } from '@components/PriceRangePlot/PriceRangePlot'
-import { addressToTicker, parseFeeToPathFee } from '@consts/uiUtils'
+import { addressToTicker, initialXtoY, parseFeeToPathFee } from '@consts/uiUtils'
 import { TokenPriceData, printBN } from '@consts/utils'
 import { Decimal } from '@invariant-labs/sdk-eclipse/lib/market'
 import { DECIMAL } from '@invariant-labs/sdk-eclipse/lib/utils'
@@ -83,7 +83,9 @@ const PositionDetails: React.FC<IProps> = ({
 
   const history = useHistory()
 
-  const [xToY, setXToY] = useState<boolean>(true)
+  const [xToY, setXToY] = useState<boolean>(
+    initialXtoY(tokenXAddress.toString(), tokenYAddress.toString())
+  )
 
   return (
     <Grid container className={classes.wrapperContainer} wrap='nowrap'>

src/components/PositionsList/PositionItem/PositionItem.tsx

@@ -5,6 +5,7 @@ import { theme } from '@static/theme'
 import SwapList from '@static/svg/swap-list.svg'
 import useStyle from './style'
 import classNames from 'classnames'
+import { initialXtoY, tickerToAddress } from '@consts/uiUtils'
 
 export interface ILiquidityItem {
   tokenXName: string
@@ -91,7 +92,9 @@ export const PositionItem: React.FC<ILiquidityItem> = ({
   const isXs = useMediaQuery(theme.breakpoints.down('xs'))
   const isDesktop = useMediaQuery(theme.breakpoints.up('lg'))
 
-  const [xToY, setXToY] = useState<boolean>(true)
+  const [xToY, setXToY] = useState<boolean>(
+    initialXtoY(tickerToAddress(tokenXName), tickerToAddress(tokenYName))
+  )
 
   const feeFragment = useMemo(
     () => (

src/components/PositionsList/PositionsList.tsx

@@ -127,7 +127,7 @@ export const PositionsList: React.FC<IProp> = ({
               onClick={() => {
                 history.push(`/position/${element.id}`)
               }}
-              key={index}
+              key={element.id}
               className={classes.itemLink}>
               <PositionItem key={index} {...element} />
             </Grid>

src/store/consts/static.ts

@@ -265,3 +265,7 @@ export const SIGNING_SNACKBAR_CONFIG: Omit<ISnackbar, 'open'> = {
   variant: 'pending',
   persist: true
 }
+
+export const ADDRESSES_TO_REVERS_TOKEN_PAIRS: string[] = [
+  'So11111111111111111111111111111111111111112'
+] // ETH

src/store/consts/uiUtils.ts

@@ -1,11 +1,14 @@
 import { BN } from '@project-serum/anchor'
+import { ADDRESSES_TO_REVERS_TOKEN_PAIRS } from './static'
 
 export const toBlur = 'global-blur'
 
 export const addressTickerMap: { [key: string]: string } = {
   WETH: 'So11111111111111111111111111111111111111112',
   BTC: '3JXmQAzBPU66dkVQufSE1ChBMRAdCHp6T7ZMBKAwhmWw',
-  USDC: '5W3bmyYDww6p5XRZnCR6m2c75st6XyCxW1TgGS3wTq7S'
+  USDC: '5W3bmyYDww6p5XRZnCR6m2c75st6XyCxW1TgGS3wTq7S',
+  ETH: 'So11111111111111111111111111111111111111112',
+  MOON: 'JChWwuoqpXZZn6WjSCssjaozj4u65qNgvGFsV6eJ2g8S'
 }
 
 export const reversedAddressTickerMap = Object.fromEntries(
@@ -55,3 +58,14 @@ export const addressToTicker = (address: string): string => {
 export const randomNumberFromRange = (min: number, max: number) => {
   return Math.floor(Math.random() * (max - min + 1) + min)
 }
+
+export const initialXtoY = (tokenXAddress?: string, tokenYAddress?: string) => {
+  if (!tokenXAddress || !tokenYAddress) {
+    return true
+  }
+
+  const isTokeXStablecoin = ADDRESSES_TO_REVERS_TOKEN_PAIRS.includes(tokenXAddress)
+  const isTokenYStablecoin = ADDRESSES_TO_REVERS_TOKEN_PAIRS.includes(tokenYAddress)
+
+  return isTokeXStablecoin === isTokenYStablecoin || (!isTokeXStablecoin && !isTokenYStablecoin)
+}