update add liquidity button redirect

src/components/NewPosition/DepositSelector/DepositSelector.tsx

@@ -7,6 +7,7 @@ import {
   WSOL_MIN_DEPOSIT_SWAP_FROM_AMOUNT,
   WSOL_POOL_INIT_LAMPORTS
 } from '@consts/static'
+import { parsePathFeeToFeeString, tickerToAddress } from '@consts/uiUtils'
 import { getScaleFromString, printBN, printBNtoBN } from '@consts/utils'
 import { Grid, Typography } from '@material-ui/core'
 import { BN } from '@project-serum/anchor'
@@ -30,7 +31,6 @@ export interface IDepositSelector {
   initialTokenFrom: string
   initialTokenTo: string
   initialFee: string
-  getAddress: (address: string) => string
   tokens: SwapToken[]
   setPositionTokens: (
     tokenAIndex: number | null,
@@ -65,7 +65,6 @@ export const DepositSelector: React.FC<IDepositSelector> = ({
   initialTokenFrom,
   initialTokenTo,
   initialFee,
-  getAddress,
   tokens,
   setPositionTokens,
   onAddLiquidity,
@@ -108,18 +107,18 @@ export const DepositSelector: React.FC<IDepositSelector> = ({
     let feeTierIndexFromPath = 0
 
     tokens.forEach((token, index) => {
-      if (token.assetAddress.toString() === getAddress(initialTokenFrom)) {
+      if (token.assetAddress.toString() === tickerToAddress(initialTokenFrom)) {
         tokenAIndexFromPath = index
       }
 
-      if (token.assetAddress.toString() === getAddress(initialTokenTo)) {
+      if (token.assetAddress.toString() === tickerToAddress(initialTokenTo)) {
         tokenBIndexFromPath = index
       }
     })
 
-    ALL_FEE_TIERS_DATA.forEach((feeTierData, index) => {
-      const parsedFee = (+initialFee.replace('_', '') * Math.pow(10, 8)).toString()
+    const parsedFee = parsePathFeeToFeeString(initialFee)
 
+    ALL_FEE_TIERS_DATA.forEach((feeTierData, index) => {
       if (feeTierData.tier.fee.toString() === parsedFee) {
         feeTierIndexFromPath = index
       }

src/components/NewPosition/NewPosition.tsx

@@ -3,7 +3,7 @@ import Slippage from '@components/Modals/Slippage/Slippage'
 import { INoConnected, NoConnected } from '@components/NoConnected/NoConnected'
 import { TickPlotPositionData } from '@components/PriceRangePlot/PriceRangePlot'
 import { ALL_FEE_TIERS_DATA, BestTier } from '@consts/static'
-import { blurContent, unblurContent } from '@consts/uiUtils'
+import { addressToTicker, blurContent, parseFeeToPathFee, unblurContent } from '@consts/uiUtils'
 import {
   CoingeckoPriceData,
   PositionTokenBlock,
@@ -25,7 +25,7 @@ import { PublicKey } from '@solana/web3.js'
 import backIcon from '@static/svg/back-arrow.svg'
 import settingIcon from '@static/svg/settings.svg'
 import { History } from 'history'
-import React, { useEffect, useMemo, useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import { Link } from 'react-router-dom'
 import ConcentrationTypeSwitch from './ConcentrationTypeSwitch/ConcentrationTypeSwitch'
 import DepositSelector from './DepositSelector/DepositSelector'
@@ -314,47 +314,18 @@ export const NewPosition: React.FC<INewPosition> = ({
     onSlippageChange(slippage)
   }
 
-  const tokenAliasMap: { [key: string]: string } = {
-    SOL: 'So11111111111111111111111111111111111111112',
-    USDC: 'EPjFWdd5AufqSSqeM2qN1xzybapC8G4wEGGkZwyTDt1v',
-    USDT: 'Es9vMFrzaCERmJfrF4H2FYD4KCoNkY11McCe8BenwNYB',
-    USDH: 'USDH1SM1ojwWUga67PGrgFWUHibbjqMvuMaDkRJTgkX',
-    mSOL: 'mSoLzYCxHdYgdzU16g5QSh3i5K3z3KZK7ytfqcJm7So',
-    bSOL: 'bSo13r4TkiE4KumL71LsHTPpL2euBYLFx6h9HP3piy1',
-    stSOL: '7dHbWXmci3dT8UFYWYZweBLXgycu7Y3iL6trKn1Y7ARj',
-    SNY: '4dmKkXNHdgYsXqBHCuMikNQWwVomZURhYvkkX5c4pQ7y',
-    ETH: '7vfCXTUXx5WJV5JADk17DUJ4ksgau7utNKj4b963voxs',
-    LFNTY: 'LFNTYraetVioAPnGJht4yNg2aUZFXR776cMeN9VMjXp'
-  }
-
-  const reversedTokenAliasMap = useMemo(() => {
-    return Object.fromEntries(Object.entries(tokenAliasMap).map(([key, value]) => [value, key]))
-  }, [tokenAliasMap])
-
-  const getAlias = (address: string): string => {
-    return reversedTokenAliasMap[address] ?? address
-  }
-
-  const getAddress = (alias: string): string => {
-    return tokenAliasMap[alias] ?? alias
-  }
-
   const updatePath = (index1: number | null, index2: number | null, fee: number) => {
-    let parsedFee = (+ALL_FEE_TIERS_DATA[fee].tier.fee / Math.pow(10, 8))
-      .toString()
-      .padStart(3, '0')
-    parsedFee =
-      parsedFee.slice(0, parsedFee.length - 2) + '_' + parsedFee.slice(parsedFee.length - 2)
+    const parsedFee = parseFeeToPathFee(+ALL_FEE_TIERS_DATA[fee].tier.fee)
 
     if (index1 != null && index2 != null) {
-      const address1 = getAlias(tokens[index1].assetAddress.toString())
-      const address2 = getAlias(tokens[index2].assetAddress.toString())
+      const address1 = addressToTicker(tokens[index1].assetAddress.toString())
+      const address2 = addressToTicker(tokens[index2].assetAddress.toString())
       history.replace(`/newPosition/${address1}/${address2}/${parsedFee}`)
     } else if (index1 != null) {
-      const address = getAlias(tokens[index1].assetAddress.toString())
+      const address = addressToTicker(tokens[index1].assetAddress.toString())
       history.replace(`/newPosition/${address}/${parsedFee}`)
     } else if (index2 != null) {
-      const address = getAlias(tokens[index2].assetAddress.toString())
+      const address = addressToTicker(tokens[index2].assetAddress.toString())
       history.replace(`/newPosition/${address}/${parsedFee}`)
     } else if (fee != null) {
       history.replace(`/newPosition/${parsedFee}`)
@@ -408,7 +379,6 @@ export const NewPosition: React.FC<INewPosition> = ({
           initialTokenFrom={initialTokenFrom}
           initialTokenTo={initialTokenTo}
           initialFee={initialFee}
-          getAddress={getAddress}
           className={classes.deposit}
           tokens={tokens}
           setPositionTokens={(index1, index2, fee) => {

src/components/PositionDetails/PositionDetails.tsx

@@ -1,15 +1,22 @@
-import React, { useState } from 'react'
 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 { printBN } from '@consts/utils'
+import { Decimal } from '@invariant-labs/sdk/lib/market'
+import { DECIMAL } from '@invariant-labs/sdk/lib/utils'
 import { Button, Grid, Hidden, Typography } from '@material-ui/core'
-import { Link, useHistory } from 'react-router-dom'
-import backIcon from '@static/svg/back-arrow.svg'
-import useStyles from './style'
 import { PlotTickData } from '@reducers/positions'
-import { TickPlotPositionData } from '@components/PriceRangePlot/PriceRangePlot'
+import { PublicKey } from '@solana/web3.js'
+import backIcon from '@static/svg/back-arrow.svg'
+import React, { useState } from 'react'
+import { Link, useHistory } from 'react-router-dom'
 import { ILiquidityToken } from './SinglePositionInfo/consts'
+import SinglePositionPlot from './SinglePositionPlot/SinglePositionPlot'
+import useStyles from './style'
 
 interface IProps {
+  tokenXAddress: PublicKey
+  tokenYAddress: PublicKey
   detailsData: PlotTickData[]
   leftRange: TickPlotPositionData
   rightRange: TickPlotPositionData
@@ -21,7 +28,7 @@ interface IProps {
   closePosition: (claimFarmRewards?: boolean) => void
   ticksLoading: boolean
   tickSpacing: number
-  fee: number
+  fee: Decimal
   min: number
   max: number
   initialIsDiscreteValue: boolean
@@ -37,6 +44,8 @@ interface IProps {
 }
 
 const PositionDetails: React.FC<IProps> = ({
+  tokenXAddress,
+  tokenYAddress,
   detailsData,
   leftRange,
   rightRange,
@@ -76,7 +85,7 @@ const PositionDetails: React.FC<IProps> = ({
         </Link>
 
         <SinglePositionInfo
-          fee={fee}
+          fee={+printBN(fee.v, DECIMAL - 2)}
           onClickClaimFee={onClickClaimFee}
           closePosition={closePosition}
           tokenX={tokenX}
@@ -99,7 +108,11 @@ const PositionDetails: React.FC<IProps> = ({
             className={classes.button}
             variant='contained'
             onClick={() => {
-              history.push('/newPosition')
+              const parsedFee = parseFeeToPathFee(fee.v)
+              const address1 = addressToTicker(tokenXAddress.toString())
+              const address2 = addressToTicker(tokenYAddress.toString())
+
+              history.push(`/newPosition/${address1}/${address2}/${parsedFee}`)
             }}>
             <span className={classes.buttonText}>+ Add Liquidity</span>
           </Button>

src/containers/SinglePositionWrapper/SinglePositionWrapper.tsx

@@ -1,33 +1,33 @@
-import React, { useMemo, useEffect, useState } from 'react'
-import { useHistory } from 'react-router'
-import { useDispatch, useSelector } from 'react-redux'
-import { actions } from '@reducers/positions'
-import {
-  currentPositionRangeTicks,
-  isLoadingPositionsList,
-  plotTicks,
-  singlePositionData
-} from '@selectors/positions'
 import PositionDetails from '@components/PositionDetails/PositionDetails'
-import { Grid, Typography } from '@material-ui/core'
 import {
+  CoingeckoPriceData,
   calcPrice,
   calcYPerXPrice,
-  CoingeckoPriceData,
   createPlaceholderLiquidityPlot,
   getCoingeckoTokenPrice,
   printBN
 } from '@consts/utils'
 import { calculatePriceSqrt } from '@invariant-labs/sdk'
-import { calculateClaimAmount, DECIMAL } from '@invariant-labs/sdk/src/utils'
-import { getX, getY, MAX_TICK } from '@invariant-labs/sdk/lib/math'
-import loader from '@static/gif/loader.gif'
-import useStyles from './style'
-import { hasTokens, volumeRanges } from '@selectors/pools'
-import { hasFarms, hasUserStakes, stakesForPosition } from '@selectors/farms'
+import { MAX_TICK, getX, getY } from '@invariant-labs/sdk/lib/math'
+import { calculateClaimAmount } from '@invariant-labs/sdk/src/utils'
+import { Grid, Typography } from '@material-ui/core'
 import { actions as farmsActions } from '@reducers/farms'
+import { actions } from '@reducers/positions'
 import { Status } from '@reducers/solanaWallet'
+import { hasFarms, hasUserStakes, stakesForPosition } from '@selectors/farms'
+import { hasTokens, volumeRanges } from '@selectors/pools'
+import {
+  currentPositionRangeTicks,
+  isLoadingPositionsList,
+  plotTicks,
+  singlePositionData
+} from '@selectors/positions'
 import { status } from '@selectors/solanaWallet'
+import loader from '@static/gif/loader.gif'
+import React, { useEffect, useMemo, useState } from 'react'
+import { useDispatch, useSelector } from 'react-redux'
+import { useHistory } from 'react-router'
+import useStyles from './style'
 
 export interface IProps {
   id: string
@@ -332,6 +332,8 @@ export const SinglePositionWrapper: React.FC<IProps> = ({ id }) => {
 
   return !isLoadingList && position ? (
     <PositionDetails
+      tokenXAddress={position.tokenX.assetAddress}
+      tokenYAddress={position.tokenY.assetAddress}
       detailsData={data}
       midPrice={midPrice}
       leftRange={leftRange}
@@ -377,7 +379,7 @@ export const SinglePositionWrapper: React.FC<IProps> = ({ id }) => {
             ? undefined
             : tokenYPriceData.price * +printBN(position.tokenY.balance, position.tokenY.decimals)
       }}
-      fee={+printBN(position.poolData.fee.v, DECIMAL - 2)}
+      fee={position.poolData.fee}
       min={min}
       max={max}
       initialIsDiscreteValue={initialIsDiscreteValue}

src/store/consts/uiUtils.ts

@@ -1,5 +1,24 @@
+import { BN } from '@project-serum/anchor'
+
 export const toBlur = 'global-blur'
 
+export const addressTickerMap: { [key: string]: string } = {
+  SOL: 'So11111111111111111111111111111111111111112',
+  USDC: 'EPjFWdd5AufqSSqeM2qN1xzybapC8G4wEGGkZwyTDt1v',
+  USDT: 'Es9vMFrzaCERmJfrF4H2FYD4KCoNkY11McCe8BenwNYB',
+  USDH: 'USDH1SM1ojwWUga67PGrgFWUHibbjqMvuMaDkRJTgkX',
+  mSOL: 'mSoLzYCxHdYgdzU16g5QSh3i5K3z3KZK7ytfqcJm7So',
+  bSOL: 'bSo13r4TkiE4KumL71LsHTPpL2euBYLFx6h9HP3piy1',
+  stSOL: '7dHbWXmci3dT8UFYWYZweBLXgycu7Y3iL6trKn1Y7ARj',
+  SNY: '4dmKkXNHdgYsXqBHCuMikNQWwVomZURhYvkkX5c4pQ7y',
+  ETH: '7vfCXTUXx5WJV5JADk17DUJ4ksgau7utNKj4b963voxs',
+  LFNTY: 'LFNTYraetVioAPnGJht4yNg2aUZFXR776cMeN9VMjXp'
+}
+
+export const reversedAddressTickerMap = Object.fromEntries(
+  Object.entries(addressTickerMap).map(([key, value]) => [value, key])
+)
+
 // could use rewriting to backdrop-filter when browser support is better
 export const blurContent = () => {
   const el = document.getElementById(toBlur)
@@ -22,3 +41,20 @@ export const importantStyles = (styleObject: { [key: string]: string | number })
     }),
     styleObject
   )
+
+export const parseFeeToPathFee = (fee: BN): string => {
+  const parsedFee = (fee / Math.pow(10, 8)).toString().padStart(3, '0')
+  return parsedFee.slice(0, parsedFee.length - 2) + '_' + parsedFee.slice(parsedFee.length - 2)
+}
+
+export const parsePathFeeToFeeString = (pathFee: string): string => {
+  return (+pathFee.replace('_', '') * Math.pow(10, 8)).toString()
+}
+
+export const tickerToAddress = (ticker: string): string => {
+  return addressTickerMap[ticker] || ticker
+}
+
+export const addressToTicker = (address: string): string => {
+  return reversedAddressTickerMap[address] || address
+}