remove redirect after disconnecting wallet on position details

package.json

@@ -13,7 +13,7 @@
     "@material-ui/icons": "^4.9.1",
     "@material-ui/lab": "^4.0.0-alpha.56",
     "@mdx-js/react": "^1.6.22",
-    "@nightlylabs/wallet-selector-solana": "0.2.7",
+    "@nightlylabs/wallet-selector-solana": "^0.3.1",
     "@nivo/bar": "^0.73.1",
     "@nivo/core": "^0.73.0",
     "@nivo/line": "^0.73.0",

src/containers/SinglePositionWrapper/SinglePositionWrapper.tsx

@@ -33,6 +33,7 @@ import { useDispatch, useSelector } from 'react-redux'
 import { useHistory } from 'react-router'
 import useStyles from './style'
 import { initialXtoY } from '@consts/uiUtils'
+import { Redirect } from 'react-router-dom'
 
 export interface IProps {
   id: string
@@ -70,6 +71,8 @@ export const SinglePositionWrapper: React.FC<IProps> = ({ id }) => {
 
   const [showFeesLoader, setShowFeesLoader] = useState(true)
 
+  const [isFinishedDelayRender, setIsFinishedDelayRender] = useState(false)
+
   useEffect(() => {
     if (position?.id && waitingForTicksData === null) {
       setWaitingForTicksData(true)
@@ -377,92 +380,125 @@ export const SinglePositionWrapper: React.FC<IProps> = ({ id }) => {
   }
 
   useEffect(() => {
-    if (!position) {
-      history.push('/pool')
+    const timer = setTimeout(() => {
+      setIsFinishedDelayRender(true)
+    }, 1000)
+
+    return () => {
+      clearTimeout(timer)
     }
-  }, [position])
+  }, [walletStatus])
 
-  return !isLoadingList && position ? (
-    <PositionDetails
-      tokenXAddress={position.tokenX.assetAddress}
-      tokenYAddress={position.tokenY.assetAddress}
-      poolAddress={position.poolData.address}
-      copyPoolAddressHandler={copyPoolAddressHandler}
-      detailsData={data}
-      midPrice={midPrice}
-      leftRange={leftRange}
-      rightRange={rightRange}
-      currentPrice={current}
-      onClickClaimFee={() => {
-        dispatch(actions.claimFee(position.positionIndex))
-      }}
-      closePosition={claimFarmRewards => {
-        dispatch(
-          actions.closePosition({
-            positionIndex: position.positionIndex,
-            onSuccess: () => {
-              history.push('/pool')
-            },
-            claimFarmRewards
-          })
-        )
-      }}
-      ticksLoading={ticksLoading}
-      tickSpacing={position?.poolData.tickSpacing ?? 1}
-      tokenX={{
-        name: position.tokenX.symbol,
-        icon: position.tokenX.logoURI,
-        decimal: position.tokenX.decimals,
-        balance: +printBN(position.tokenX.balance, position.tokenX.decimals),
-        liqValue: tokenXLiquidity,
-        claimValue: tokenXClaim,
-        usdValue:
-          typeof tokenXPriceData?.price === 'undefined'
-            ? undefined
-            : tokenXPriceData.price * +printBN(position.tokenX.balance, position.tokenX.decimals)
-      }}
-      tokenXPriceData={tokenXPriceData}
-      tokenY={{
-        name: position.tokenY.symbol,
-        icon: position.tokenY.logoURI,
-        decimal: position.tokenY.decimals,
-        balance: +printBN(position.tokenY.balance, position.tokenY.decimals),
-        liqValue: tokenYLiquidity,
-        claimValue: tokenYClaim,
-        usdValue:
-          typeof tokenYPriceData?.price === 'undefined'
-            ? undefined
-            : tokenYPriceData.price * +printBN(position.tokenY.balance, position.tokenY.decimals)
-      }}
-      tokenYPriceData={tokenYPriceData}
-      fee={position.poolData.fee}
-      min={min}
-      max={max}
-      initialIsDiscreteValue={initialIsDiscreteValue}
-      onDiscreteChange={setIsDiscreteValue}
-      showFeesLoader={showFeesLoader}
-      hasTicksError={hasTicksError}
-      reloadHandler={() => {
-        dispatch(
-          actions.getCurrentPlotTicks({
-            poolIndex: position.poolData.poolIndex,
-            isXtoY: true
-          })
-        )
-      }}
-      plotVolumeRange={currentVolumeRange}
-      userHasStakes={!!positionStakes.length}
-      globalPrice={globalPrice}
-      xToY={xToY}
-      setXToY={setXToY}
-    />
-  ) : isLoadingList ? (
-    <Grid container>
-      <img src={loader} className={classes.loading} />
-    </Grid>
-  ) : !position ? (
-    <Grid container justifyContent='center'>
+  useEffect(() => {
+    if (isFinishedDelayRender) {
+      setIsFinishedDelayRender(false)
+    }
+  }, [walletStatus])
+
+  if (!isLoadingList && position) {
+    return (
+      <PositionDetails
+        tokenXAddress={position.tokenX.assetAddress}
+        tokenYAddress={position.tokenY.assetAddress}
+        poolAddress={position.poolData.address}
+        copyPoolAddressHandler={copyPoolAddressHandler}
+        detailsData={data}
+        midPrice={midPrice}
+        leftRange={leftRange}
+        rightRange={rightRange}
+        currentPrice={current}
+        onClickClaimFee={() => {
+          dispatch(actions.claimFee(position.positionIndex))
+        }}
+        closePosition={claimFarmRewards => {
+          dispatch(
+            actions.closePosition({
+              positionIndex: position.positionIndex,
+              onSuccess: () => {
+                history.push('/pool')
+              },
+              claimFarmRewards
+            })
+          )
+        }}
+        ticksLoading={ticksLoading}
+        tickSpacing={position?.poolData.tickSpacing ?? 1}
+        tokenX={{
+          name: position.tokenX.symbol,
+          icon: position.tokenX.logoURI,
+          decimal: position.tokenX.decimals,
+          balance: +printBN(position.tokenX.balance, position.tokenX.decimals),
+          liqValue: tokenXLiquidity,
+          claimValue: tokenXClaim,
+          usdValue:
+            typeof tokenXPriceData?.price === 'undefined'
+              ? undefined
+              : tokenXPriceData.price * +printBN(position.tokenX.balance, position.tokenX.decimals)
+        }}
+        tokenXPriceData={tokenXPriceData}
+        tokenY={{
+          name: position.tokenY.symbol,
+          icon: position.tokenY.logoURI,
+          decimal: position.tokenY.decimals,
+          balance: +printBN(position.tokenY.balance, position.tokenY.decimals),
+          liqValue: tokenYLiquidity,
+          claimValue: tokenYClaim,
+          usdValue:
+            typeof tokenYPriceData?.price === 'undefined'
+              ? undefined
+              : tokenYPriceData.price * +printBN(position.tokenY.balance, position.tokenY.decimals)
+        }}
+        tokenYPriceData={tokenYPriceData}
+        fee={position.poolData.fee}
+        min={min}
+        max={max}
+        initialIsDiscreteValue={initialIsDiscreteValue}
+        onDiscreteChange={setIsDiscreteValue}
+        showFeesLoader={showFeesLoader}
+        hasTicksError={hasTicksError}
+        reloadHandler={() => {
+          dispatch(
+            actions.getCurrentPlotTicks({
+              poolIndex: position.poolData.poolIndex,
+              isXtoY: true
+            })
+          )
+        }}
+        plotVolumeRange={currentVolumeRange}
+        userHasStakes={!!positionStakes.length}
+        globalPrice={globalPrice}
+        xToY={xToY}
+        setXToY={setXToY}
+      />
+    )
+  }
+
+  if (
+    (isLoadingList && walletStatus === Status.Initialized) ||
+    (!position && walletStatus === Status.Uninitialized && !isFinishedDelayRender)
+  ) {
+    return (
+      <Grid
+        container
+        justifyContent='center'
+        alignItems='center'
+        className={classes.fullHeightContainer}>
+        <img src={loader} className={classes.loading} />
+      </Grid>
+    )
+  }
+
+  if (!position && walletStatus === Status.Initialized && isFinishedDelayRender) {
+    return <Redirect to='/pool' />
+  }
+
+  return (
+    <Grid
+      container
+      justifyContent='center'
+      alignItems='center'
+      className={classes.fullHeightContainer}>
       <EmptyPlaceholder desc='Position does not exist in your list!' />
     </Grid>
-  ) : null
+  )
 }

src/containers/SinglePositionWrapper/style.ts

@@ -11,6 +11,9 @@ const useStyles = makeStyles(() => ({
     width: 150,
     height: 150,
     margin: 'auto'
+  },
+  fullHeightContainer: {
+    height: '100%'
   }
 }))