Merge pull request #560 from invariant-labs/staging

Update prod

src/components/Header/Header.tsx

@@ -54,7 +54,7 @@ export const Header: React.FC<IHeader> = ({
       : ['swap', 'pool', 'stats', 'farms', 'bonds']
 
   const otherRoutesToHighlight: Record<string, RegExp[]> = {
-    pool: [/^newPosition$/, /^position\/*/],
+    pool: [/^newPosition\/*/, /^position\/*/],
     farms: [/^farms$/, /^farm\/*/]
   }
 

src/components/NewPosition/DepositSelector/DepositSelector.tsx

@@ -1,21 +1,23 @@
+import AnimatedButton, { ProgressState } from '@components/AnimatedButton/AnimatedButton'
 import DepositAmountInput from '@components/Inputs/DepositAmountInput/DepositAmountInput'
 import Select from '@components/Inputs/Select/Select'
-import { SwapToken } from '@selectors/solanaWallet'
-import { getScaleFromString, printBN, printBNtoBN } from '@consts/utils'
-import { Grid, Typography } from '@material-ui/core'
-import React, { useState, useCallback, useEffect } from 'react'
-import FeeSwitch from '../FeeSwitch/FeeSwitch'
-import classNames from 'classnames'
-import AnimatedButton, { ProgressState } from '@components/AnimatedButton/AnimatedButton'
-import SwapList from '@static/svg/swap-list.svg'
-import useStyles from './style'
-import { PublicKey } from '@solana/web3.js'
 import {
+  ALL_FEE_TIERS_DATA,
   WRAPPED_SOL_ADDRESS,
   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'
+import { SwapToken } from '@selectors/solanaWallet'
+import { PublicKey } from '@solana/web3.js'
+import SwapList from '@static/svg/swap-list.svg'
+import classNames from 'classnames'
+import React, { useCallback, useEffect, useState } from 'react'
+import FeeSwitch from '../FeeSwitch/FeeSwitch'
+import useStyles from './style'
 
 export interface InputState {
   value: string
@@ -26,6 +28,9 @@ export interface InputState {
 }
 
 export interface IDepositSelector {
+  initialTokenFrom: string
+  initialTokenTo: string
+  initialFee: string
   tokens: SwapToken[]
   setPositionTokens: (
     tokenAIndex: number | null,
@@ -57,6 +62,9 @@ export interface IDepositSelector {
 }
 
 export const DepositSelector: React.FC<IDepositSelector> = ({
+  initialTokenFrom,
+  initialTokenTo,
+  initialFee,
   tokens,
   setPositionTokens,
   onAddLiquidity,
@@ -87,6 +95,42 @@ export const DepositSelector: React.FC<IDepositSelector> = ({
   const [tokenAIndex, setTokenAIndex] = useState<number | null>(null)
   const [tokenBIndex, setTokenBIndex] = useState<number | null>(null)
 
+  const [isLoaded, setIsLoaded] = useState<boolean>(false)
+
+  useEffect(() => {
+    if (isLoaded || tokens.length === 0 || ALL_FEE_TIERS_DATA.length === 0) {
+      return
+    }
+
+    let tokenAIndexFromPath = null
+    let tokenBIndexFromPath = null
+    let feeTierIndexFromPath = 0
+
+    tokens.forEach((token, index) => {
+      if (token.assetAddress.toString() === tickerToAddress(initialTokenFrom)) {
+        tokenAIndexFromPath = index
+      }
+
+      if (token.assetAddress.toString() === tickerToAddress(initialTokenTo)) {
+        tokenBIndexFromPath = index
+      }
+    })
+
+    const parsedFee = parsePathFeeToFeeString(initialFee)
+
+    ALL_FEE_TIERS_DATA.forEach((feeTierData, index) => {
+      if (feeTierData.tier.fee.toString() === parsedFee) {
+        feeTierIndexFromPath = index
+      }
+    })
+
+    setTokenAIndex(tokenAIndexFromPath)
+    setTokenBIndex(tokenBIndexFromPath)
+    setPositionTokens(tokenAIndexFromPath, tokenBIndexFromPath, feeTierIndexFromPath)
+
+    setIsLoaded(true)
+  }, [tokens])
+
   const getButtonMessage = useCallback(() => {
     if (tokenAIndex === null || tokenBIndex === null) {
       return 'Select tokens'

src/components/NewPosition/NewPosition.tsx

@@ -1,40 +1,45 @@
-import { Button, Grid, Typography } from '@material-ui/core'
-import React, { useEffect, useState } from 'react'
-import DepositSelector from './DepositSelector/DepositSelector'
-import RangeSelector from './RangeSelector/RangeSelector'
-import { BN } from '@project-serum/anchor'
-import { SwapToken } from '@selectors/solanaWallet'
+import { ProgressState } from '@components/AnimatedButton/AnimatedButton'
+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 { addressToTicker, blurContent, parseFeeToPathFee, unblurContent } from '@consts/uiUtils'
 import {
-  calcPrice,
   CoingeckoPriceData,
-  determinePositionTokenBlock,
   PositionTokenBlock,
+  calcPrice,
+  determinePositionTokenBlock,
   printBN,
   printBNtoBN,
   trimLeadingZeros
 } from '@consts/utils'
-import { PublicKey } from '@solana/web3.js'
-import { PlotTickData } from '@reducers/positions'
-import { INoConnected, NoConnected } from '@components/NoConnected/NoConnected'
-import { Link } from 'react-router-dom'
-import settingIcon from '@static/svg/settings.svg'
-import backIcon from '@static/svg/back-arrow.svg'
-import { ProgressState } from '@components/AnimatedButton/AnimatedButton'
 import { MIN_TICK } from '@invariant-labs/sdk'
-import { MAX_TICK } from '@invariant-labs/sdk/src'
-import { TickPlotPositionData } from '@components/PriceRangePlot/PriceRangePlot'
-import PoolInit from './PoolInit/PoolInit'
-import { BestTier } from '@consts/static'
-import { blurContent, unblurContent } from '@consts/uiUtils'
-import Slippage from '@components/Modals/Slippage/Slippage'
 import { Decimal } from '@invariant-labs/sdk/lib/market'
 import { fromFee } from '@invariant-labs/sdk/lib/utils'
-import useStyles from './style'
+import { MAX_TICK } from '@invariant-labs/sdk/src'
+import { Button, Grid, Typography } from '@material-ui/core'
+import { Color } from '@material-ui/lab'
+import { BN } from '@project-serum/anchor'
+import { PlotTickData } from '@reducers/positions'
+import { SwapToken } from '@selectors/solanaWallet'
+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, useState } from 'react'
+import { Link } from 'react-router-dom'
 import ConcentrationTypeSwitch from './ConcentrationTypeSwitch/ConcentrationTypeSwitch'
+import DepositSelector from './DepositSelector/DepositSelector'
 import MarketIdLabel from './MarketIdLabel/MarketIdLabel'
-import { Color } from '@material-ui/lab'
+import PoolInit from './PoolInit/PoolInit'
+import RangeSelector from './RangeSelector/RangeSelector'
+import useStyles from './style'
 
 export interface INewPosition {
+  initialTokenFrom: string
+  initialTokenTo: string
+  initialFee: string
+  history: History<unknown>
   poolAddress: string
   copyPoolAddressHandler: (message: string, variant: Color) => void
   tokens: SwapToken[]
@@ -102,6 +107,10 @@ export interface INewPosition {
 }
 
 export const NewPosition: React.FC<INewPosition> = ({
+  initialTokenFrom,
+  initialTokenTo,
+  initialFee,
+  history,
   poolAddress,
   copyPoolAddressHandler,
   tokens,
@@ -311,6 +320,24 @@ export const NewPosition: React.FC<INewPosition> = ({
     onSlippageChange(slippage)
   }
 
+  const updatePath = (index1: number | null, index2: number | null, fee: number) => {
+    const parsedFee = parseFeeToPathFee(+ALL_FEE_TIERS_DATA[fee].tier.fee)
+
+    if (index1 != null && index2 != null) {
+      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 = addressToTicker(tokens[index1].assetAddress.toString())
+      history.replace(`/newPosition/${address}/${parsedFee}`)
+    } else if (index2 != null) {
+      const address = addressToTicker(tokens[index2].assetAddress.toString())
+      history.replace(`/newPosition/${address}/${parsedFee}`)
+    } else if (fee != null) {
+      history.replace(`/newPosition/${parsedFee}`)
+    }
+  }
+
   return (
     <Grid container className={classes.wrapper} direction='column'>
       <Link to='/pool' style={{ textDecoration: 'none', maxWidth: 'fit-content' }}>
@@ -363,12 +390,17 @@ export const NewPosition: React.FC<INewPosition> = ({
       <Grid container className={classes.row} alignItems='stretch'>
         {showNoConnected && <NoConnected {...noConnectedBlockerProps} />}
         <DepositSelector
+          initialTokenFrom={initialTokenFrom}
+          initialTokenTo={initialTokenTo}
+          initialFee={initialFee}
           className={classes.deposit}
           tokens={tokens}
           setPositionTokens={(index1, index2, fee) => {
             setTokenAIndex(index1)
             setTokenBIndex(index2)
             onChangePositionTokens(index1, index2, fee)
+
+            updatePath(index1, index2, fee)
           }}
           onAddLiquidity={() => {
             if (tokenAIndex !== null && tokenBIndex !== null) {
@@ -454,6 +486,8 @@ export const NewPosition: React.FC<INewPosition> = ({
             setTokenAIndex(tokenBIndex)
             setTokenBIndex(pom)
             onChangePositionTokens(tokenBIndex, tokenAIndex, currentFeeIndex)
+
+            updatePath(tokenBIndex, tokenAIndex, currentFeeIndex)
           }}
           poolIndex={poolIndex}
           bestTierIndex={bestTierIndex}

src/components/PositionDetails/PositionDetails.tsx

@@ -1,18 +1,25 @@
-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'
+
 import MarketIdLabel from '@components/NewPosition/MarketIdLabel/MarketIdLabel'
 import { Color } from '@material-ui/lab'
-import { PublicKey } from '@solana/web3.js'
 
 interface IProps {
+  tokenXAddress: PublicKey
+  tokenYAddress: PublicKey
   poolAddress: PublicKey
   copyPoolAddressHandler: (message: string, variant: Color) => void
   detailsData: PlotTickData[]
@@ -26,7 +33,7 @@ interface IProps {
   closePosition: (claimFarmRewards?: boolean) => void
   ticksLoading: boolean
   tickSpacing: number
-  fee: number
+  fee: Decimal
   min: number
   max: number
   initialIsDiscreteValue: boolean
@@ -42,6 +49,8 @@ interface IProps {
 }
 
 const PositionDetails: React.FC<IProps> = ({
+  tokenXAddress,
+  tokenYAddress,
   poolAddress,
   copyPoolAddressHandler,
   detailsData,
@@ -83,7 +92,7 @@ const PositionDetails: React.FC<IProps> = ({
         </Link>
 
         <SinglePositionInfo
-          fee={fee}
+          fee={+printBN(fee.v, DECIMAL - 2)}
           onClickClaimFee={onClickClaimFee}
           closePosition={closePosition}
           tokenX={tokenX}
@@ -116,7 +125,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/NewPositionWrapper/NewPositionWrapper.tsx

@@ -1,42 +1,55 @@
-import React, { useState, useMemo, useEffect } from 'react'
+import { ProgressState } from '@components/AnimatedButton/AnimatedButton'
 import NewPosition from '@components/NewPosition/NewPosition'
-import { actions } from '@reducers/positions'
-import { useDispatch, useSelector } from 'react-redux'
-import { swapTokens, status, canCreateNewPool, canCreateNewPosition } from '@selectors/solanaWallet'
-import { DECIMAL } from '@invariant-labs/sdk/lib/utils'
+import { TickPlotPositionData } from '@components/PriceRangePlot/PriceRangePlot'
+import { ALL_FEE_TIERS_DATA, bestTiers, commonTokensForNetworks } from '@consts/static'
 import {
+  CoingeckoPriceData,
   addNewTokenToLocalStorage,
   calcPrice,
   calcYPerXPrice,
-  CoingeckoPriceData,
   createPlaceholderLiquidityPlot,
   getCoingeckoTokenPrice,
   getNewTokenOrThrow,
   printBN
 } from '@consts/utils'
+import { MAX_TICK, Pair, calculatePriceSqrt } from '@invariant-labs/sdk'
+import { Decimal } from '@invariant-labs/sdk/lib/market'
+import { DECIMAL } from '@invariant-labs/sdk/lib/utils'
+import { getLiquidityByX, getLiquidityByY } from '@invariant-labs/sdk/src/math'
+import { feeToTickSpacing } from '@invariant-labs/sdk/src/utils'
+import { Color } from '@material-ui/lab'
+import { BN } from '@project-serum/anchor'
+import { actions as poolsActions } from '@reducers/pools'
+import { actions } from '@reducers/positions'
+import { actions as snackbarsActions } from '@reducers/snackbars'
+import { Status } from '@reducers/solanaWallet'
 import {
   isLoadingLatestPoolsForTransaction,
   poolsArraySortedByFees,
   volumeRanges
 } from '@selectors/pools'
-import { getLiquidityByX, getLiquidityByY } from '@invariant-labs/sdk/src/math'
-import { Decimal } from '@invariant-labs/sdk/lib/market'
 import { initPosition, plotTicks } from '@selectors/positions'
-import { BN } from '@project-serum/anchor'
-import { ALL_FEE_TIERS_DATA, bestTiers, commonTokensForNetworks } from '@consts/static'
-import { Status } from '@reducers/solanaWallet'
-import { ProgressState } from '@components/AnimatedButton/AnimatedButton'
-import { TickPlotPositionData } from '@components/PriceRangePlot/PriceRangePlot'
-import { calculatePriceSqrt, MAX_TICK, Pair } from '@invariant-labs/sdk'
-import { feeToTickSpacing } from '@invariant-labs/sdk/src/utils'
-import { actions as poolsActions } from '@reducers/pools'
 import { network } from '@selectors/solanaConnection'
+import { canCreateNewPool, canCreateNewPosition, status, swapTokens } from '@selectors/solanaWallet'
 import { getCurrentSolanaConnection } from '@web3/connection'
-import { actions as snackbarsActions } from '@reducers/snackbars'
 import { openWalletSelectorModal } from '@web3/selector'
-import { Color } from '@material-ui/lab'
+import { History } from 'history'
+import React, { useEffect, useMemo, useState } from 'react'
+import { useDispatch, useSelector } from 'react-redux'
+
+export interface IProps {
+  initialTokenFrom: string
+  initialTokenTo: string
+  initialFee: string
+  history: History<unknown>
+}
 
-export const NewPositionWrapper = () => {
+export const NewPositionWrapper: React.FC<IProps> = ({
+  initialTokenFrom,
+  initialTokenTo,
+  initialFee,
+  history
+}) => {
   const dispatch = useDispatch()
 
   const connection = getCurrentSolanaConnection()
@@ -373,6 +386,10 @@ export const NewPositionWrapper = () => {
 
   return (
     <NewPosition
+      initialTokenFrom={initialTokenFrom}
+      initialTokenTo={initialTokenTo}
+      initialFee={initialFee}
+      history={history}
       copyPoolAddressHandler={copyPoolAddressHandler}
       poolAddress={poolIndex !== null ? allPools[poolIndex].address.toString() : ''}
       tokens={tokens}