Merge pull request #291 from invariant-labs/dev

Update staging
invariant-labs · Aug 31, 2024 · 6be4397 · 6be4397
2 parents 7506bed + cea0f97
commit 6be4397
Show file tree

Hide file tree

Showing 9 changed files with 128 additions and 14 deletions.
diff --git a/src/components/NewPosition/DepositSelector/DepositSelector.tsx b/src/components/NewPosition/DepositSelector/DepositSelector.tsx
@@ -185,6 +185,21 @@ export const DepositSelector: React.FC<IDepositSelector> = ({
     minimumSliderIndex
   ])
 
+  const [wasRunTokenA, setWasRunTokenA] = useState(false)
+  const [wasRunTokenB, setWasRunTokenB] = useState(false)
+
+  useEffect(() => {
+    if (!wasRunTokenA && tokens[tickerToAddress(initialTokenFrom)]) {
+      setTokenA(tickerToAddress(initialTokenFrom))
+      setWasRunTokenA(true)
+    }
+
+    if (!wasRunTokenB && tokens[tickerToAddress(initialTokenTo)]) {
+      setTokenB(tickerToAddress(initialTokenTo))
+      setWasRunTokenB(true)
+    }
+  }, [wasRunTokenA, wasRunTokenB, tokens])
+
   useEffect(() => {
     if (tokenA !== null) {
       if (getScaleFromString(tokenAInputState.value) > Number(tokens[tokenA].decimals)) {

diff --git a/src/components/NewPosition/NewPosition.stories.tsx b/src/components/NewPosition/NewPosition.stories.tsx
@@ -73,7 +73,8 @@ export const Primary: Story = {
     unblockUpdatePriceRange: fn(),
     isGetLiquidityError: false,
     onlyUserPositions: false,
-    setOnlyUserPositions: fn()
+    setOnlyUserPositions: fn(),
+    isLoadingTokens: false
   },
   render: () => {
     return (
@@ -132,6 +133,7 @@ export const Primary: Story = {
         isGetLiquidityError={false}
         onlyUserPositions={false}
         setOnlyUserPositions={fn()}
+        isLoadingTokens={false}
       />
     )
   }

diff --git a/src/components/NewPosition/NewPosition.tsx b/src/components/NewPosition/NewPosition.tsx
@@ -9,6 +9,7 @@ import backIcon from '@static/svg/back-arrow.svg'
 import settingIcon from '@static/svg/settings.svg'
 import { ALL_FEE_TIERS_DATA, PositionTokenBlock, REFRESHER_INTERVAL } from '@store/consts/static'
 import {
+  addressToTicker,
   calcPriceBySqrtPrice,
   calculateConcentrationRange,
   convertBalanceToBigint,
@@ -102,6 +103,7 @@ export interface INewPosition {
   isGetLiquidityError: boolean
   onlyUserPositions: boolean
   setOnlyUserPositions: (val: boolean) => void
+  isLoadingTokens: boolean
 }
 
 export const NewPosition: React.FC<INewPosition> = ({
@@ -153,7 +155,8 @@ export const NewPosition: React.FC<INewPosition> = ({
   unblockUpdatePriceRange,
   isGetLiquidityError,
   onlyUserPositions,
-  setOnlyUserPositions
+  setOnlyUserPositions,
+  isLoadingTokens
 }) => {
   const { classes } = useStyles()
   const navigate = useNavigate()
@@ -413,14 +416,14 @@ export const NewPosition: React.FC<INewPosition> = ({
     const parsedFee = parseFeeToPathFee(ALL_FEE_TIERS_DATA[fee].tier.fee)
 
     if (address1 != null && address2 != null) {
-      const token1Symbol = tokens[address1].symbol
-      const token2Symbol = tokens[address2].symbol
+      const token1Symbol = addressToTicker(address1)
+      const token2Symbol = addressToTicker(address2)
       navigate(`/newPosition/${token1Symbol}/${token2Symbol}/${parsedFee}`, { replace: true })
     } else if (address1 != null) {
-      const tokenSymbol = tokens[address1].symbol
+      const tokenSymbol = addressToTicker(address1)
       navigate(`/newPosition/${tokenSymbol}/${parsedFee}`, { replace: true })
     } else if (address2 != null) {
-      const tokenSymbol = tokens[address2].symbol
+      const tokenSymbol = addressToTicker(address2)
       navigate(`/newPosition/${tokenSymbol}/${parsedFee}`, { replace: true })
     } else if (fee != null) {
       navigate(`/newPosition/${parsedFee}`, { replace: true })
@@ -558,7 +561,9 @@ export const NewPosition: React.FC<INewPosition> = ({
             setTokenB(address2)
             onChangePositionTokens(address1, address2, fee)
 
-            updatePath(address1, address2, fee)
+            if (!isLoadingTokens) {
+              updatePath(address1, address2, fee)
+            }
           }}
           onAddLiquidity={() => {
             if (tokenA !== null && tokenB !== null) {
@@ -652,7 +657,9 @@ export const NewPosition: React.FC<INewPosition> = ({
             setTokenB(pom)
             onChangePositionTokens(tokenB, tokenA, currentFeeIndex)
 
-            updatePath(tokenB, tokenA, currentFeeIndex)
+            if (!isLoadingTokens) {
+              updatePath(tokenB, tokenA, currentFeeIndex)
+            }
           }}
           poolIndex={poolIndex}
           bestTierIndex={bestTierIndex}

diff --git a/src/components/Swap/Swap.tsx b/src/components/Swap/Swap.tsx
@@ -324,22 +324,23 @@ export const Swap: React.FC<ISwap> = ({
     }
 
     if (
-      convertBalanceToBigint(amountFrom, Number(tokens[tokenFrom].decimals)) >
-      tokens[tokenFrom].balance
+      convertBalanceToBigint(amountFrom, Number(tokens[tokenFrom]?.decimals) ?? 0n) >
+        tokens[tokenFrom]?.balance ??
+      0n
     ) {
       return 'Insufficient balance'
     }
 
     if (
-      convertBalanceToBigint(amountFrom, Number(tokens[tokenFrom].decimals)) === 0n ||
+      convertBalanceToBigint(amountFrom, Number(tokens[tokenFrom]?.decimals ?? 0n)) === 0n ||
       (simulateResult.poolKey === null && isError(SwapError.AmountIsZero))
     ) {
       return 'Insufficient volume'
     }
 
     if (
       tokenFrom !== null &&
-      convertBalanceToBigint(amountFrom, Number(tokens[tokenFrom].decimals)) !== 0n &&
+      convertBalanceToBigint(amountFrom, Number(tokens[tokenFrom]?.decimals ?? 0n)) !== 0n &&
       isError(SwapError.Unknown)
     ) {
       return 'Not enough liquidity'

diff --git a/src/containers/NewPositionWrapper/NewPositionWrapper.tsx b/src/containers/NewPositionWrapper/NewPositionWrapper.tsx
@@ -24,7 +24,8 @@ import {
   getMockedTokenPrice,
   getNewTokenOrThrow,
   poolKeyToString,
-  printBigint
+  printBigint,
+  tickerToAddress
 } from '@utils/utils'
 import { actions as poolsActions } from '@store/reducers/pools'
 import { actions, InitMidPrice, actions as positionsActions } from '@store/reducers/positions'
@@ -34,6 +35,8 @@ import { networkType } from '@store/selectors/connection'
 import {
   isLoadingLatestPoolsForTransaction,
   isLoadingTicksAndTickMaps,
+  isLoadingTokens,
+  isLoadingTokensError,
   poolKeys,
   pools,
   poolsArraySortedByFees
@@ -51,6 +54,7 @@ import { openWalletSelectorModal } from '@utils/web3/selector'
 import { VariantType } from 'notistack'
 import React, { useEffect, useMemo, useRef, useState } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
+import { useNavigate } from 'react-router-dom'
 
 export interface IProps {
   initialTokenFrom: string
@@ -105,6 +109,37 @@ export const NewPositionWrapper: React.FC<IProps> = ({
   const [isGetLiquidityError, setIsGetLiquidityError] = useState(false)
 
   const isMountedRef = useRef(false)
+  const navigate = useNavigate()
+  const isCurrentlyLoadingTokens = useSelector(isLoadingTokens)
+  const isCurrentlyLoadingTokensError = useSelector(isLoadingTokensError)
+
+  useEffect(() => {
+    const tokensToFetch = []
+
+    if (initialTokenFrom && !tokens[tickerToAddress(initialTokenFrom)]) {
+      tokensToFetch.push(tickerToAddress(initialTokenFrom))
+    }
+
+    if (initialTokenTo && !tokens[tickerToAddress(initialTokenTo)]) {
+      tokensToFetch.push(tickerToAddress(initialTokenTo))
+    }
+
+    if (tokensToFetch.length) {
+      dispatch(poolsActions.getTokens(tokensToFetch))
+    } else {
+      dispatch(poolsActions.addTokens({}))
+    }
+  }, [])
+
+  useEffect(() => {
+    if (isCurrentlyLoadingTokensError) {
+      if (tokens[tickerToAddress(initialTokenFrom)]) {
+        navigate(`/newPosition/${initialTokenFrom}/${initialFee}`)
+      } else if (tokens[tickerToAddress(initialTokenTo)]) {
+        navigate(`/newPosition/${initialTokenTo}/${initialTokenTo}/${initialFee}`)
+      }
+    }
+  }, [isCurrentlyLoadingTokensError])
 
   useEffect(() => {
     dispatch(poolsActions.getPoolKeys())
@@ -661,6 +696,7 @@ export const NewPositionWrapper: React.FC<IProps> = ({
       isGetLiquidityError={isGetLiquidityError}
       onlyUserPositions={onlyUserPositions}
       setOnlyUserPositions={setOnlyUserPositions}
+      isLoadingTokens={isCurrentlyLoadingTokens}
     />
   )
 }

diff --git a/src/containers/WrappedSwap/WrappedSwap.tsx b/src/containers/WrappedSwap/WrappedSwap.tsx
@@ -95,6 +95,22 @@ export const WrappedSwap = ({ initialTokenFrom, initialTokenTo }: Props) => {
       ? tickerToAddress(initialTokenTo)
       : localStorage.getItem(`INVARIANT_LAST_TOKEN_TO_${network}`)
 
+  useEffect(() => {
+    const tokens = []
+
+    if (lastTokenFrom && !tokensDict[lastTokenFrom]) {
+      tokens.push(lastTokenFrom)
+    }
+
+    if (lastTokenTo && !tokensDict[lastTokenTo]) {
+      tokens.push(lastTokenTo)
+    }
+
+    if (tokens.length) {
+      dispatch(poolsActions.getTokens(tokens))
+    }
+  }, [])
+
   const addTokenHandler = async (address: string) => {
     const psp22 = SingletonPSP22.getInstance()
 

diff --git a/src/store/reducers/pools.ts b/src/store/reducers/pools.ts
@@ -35,6 +35,8 @@ export interface IPoolsStore {
   isLoadingLatestPoolsForTransaction: boolean
   isLoadingTicksAndTickMaps: boolean
   isLoadingPoolKeys: boolean
+  isLoadingTokens: boolean
+  isLoadingTokensError: boolean
   tickMaps: { [key in string]: string }
 }
 
@@ -85,6 +87,8 @@ export const defaultState: IPoolsStore = {
   isLoadingLatestPoolsForTransaction: false,
   isLoadingTicksAndTickMaps: false,
   isLoadingPoolKeys: true,
+  isLoadingTokens: true,
+  isLoadingTokensError: false,
   tickMaps: {}
 }
 
@@ -118,6 +122,7 @@ const poolsSlice = createSlice({
         ...state.tokens,
         ...action.payload
       }
+      state.isLoadingTokens = false
       return state
     },
     updateTokenBalances(state, action: PayloadAction<[string, bigint][]>) {
@@ -203,6 +208,14 @@ const poolsSlice = createSlice({
     getTicksAndTickMaps(state, _action: PayloadAction<FetchTicksAndTickMaps>) {
       state.isLoadingTicksAndTickMaps = true
       return state
+    },
+    getTokens(state, _action: PayloadAction<string[]>) {
+      state.isLoadingTokens = true
+      return state
+    },
+    setTokensError(state, action: PayloadAction<boolean>) {
+      state.isLoadingTokensError = action.payload
+      return state
     }
   }
 })

diff --git a/src/store/sagas/pools.ts b/src/store/sagas/pools.ts
@@ -184,6 +184,21 @@ export function* fetchTokens(poolsWithPoolKeys: PoolWithPoolKey[]) {
   yield* put(actions.updateTokenBalances(knownTokenBalances))
 }
 
+export function* handleGetTokens(action: PayloadAction<string[]>) {
+  const tokens = action.payload
+
+  const walletAddress = yield* select(address)
+  const psp22 = yield* getPSP22()
+
+  try {
+    const tokensData = yield* call(getTokenDataByAddresses, tokens, psp22, walletAddress)
+
+    yield* put(actions.addTokens(tokensData))
+  } catch (e) {
+    yield* put(actions.setTokensError(true))
+  }
+}
+
 export function* getPoolsDataForListHandler(): Generator {
   yield* takeEvery(actions.getPoolsDataForList, fetchPoolsDataForList)
 }
@@ -204,14 +219,19 @@ export function* getTicksAndTickMapsHandler(): Generator {
   yield* takeEvery(actions.getTicksAndTickMaps, fetchTicksAndTickMaps)
 }
 
+export function* getTokensHandler(): Generator {
+  yield* takeLatest(actions.getTokens, handleGetTokens)
+}
+
 export function* poolsSaga(): Generator {
   yield all(
     [
       getPoolDataHandler,
       getPoolKeysHandler,
       getPoolsDataForListHandler,
       getAllPoolsForPairDataHandler,
-      getTicksAndTickMapsHandler
+      getTicksAndTickMapsHandler,
+      getTokensHandler
     ].map(spawn)
   )
 }
diff --git a/src/store/selectors/pools.ts b/src/store/selectors/pools.ts
@@ -13,6 +13,8 @@ export const {
   tickMaps,
   nearestPoolTicksForPair,
   isLoadingTicksAndTickMaps,
+  isLoadingTokens,
+  isLoadingTokensError,
   isLoadingPoolKeys
 } = keySelectors(store, [
   'pools',
@@ -23,6 +25,8 @@ export const {
   'tickMaps',
   'nearestPoolTicksForPair',
   'isLoadingTicksAndTickMaps',
+  'isLoadingTokens',
+  'isLoadingTokensError',
   'isLoadingPoolKeys'
 ])