[413] added back navigation

src/common/NoConnected/NoConnected.tsx

@@ -1,9 +1,11 @@
 import { Button, Grid, Typography } from '@mui/material'
 import { useStyles } from './style'
-import { useNavigate } from 'react-router-dom'
+import { useLocation, useNavigate } from 'react-router-dom'
 import ChangeWalletButton from '@components/Header/HeaderButton/ChangeWalletButton'
 import { ROUTES } from '@utils/utils'
 import { noConnectedIcon } from '@static/icons'
+import { actions } from '@store/reducers/navigation'
+import { useDispatch } from 'react-redux'
 
 export interface INoConnected {
   onConnect: () => void
@@ -13,7 +15,8 @@ export interface INoConnected {
 
 export const NoConnected: React.FC<INoConnected> = ({ onConnect, title, descCustomText }) => {
   const { classes, cx } = useStyles()
-
+  const dispatch = useDispatch()
+  const location = useLocation()
   const navigate = useNavigate()
 
   return (
@@ -32,6 +35,8 @@ export const NoConnected: React.FC<INoConnected> = ({ onConnect, title, descCust
           <Button
             className={classes.buttonPrimary}
             onClick={() => {
+              dispatch(actions.setNavigation({ address: location.pathname }))
+
               navigate(ROUTES.getNewPositionRoute('0_01'))
             }}
             variant='contained'>

src/components/LiquidityPoolList/LiquidityPoolList.tsx

@@ -4,7 +4,7 @@ import { useStyles } from './style'
 import { Grid, useMediaQuery } from '@mui/material'
 import { BTC_DEV, NetworkType, SortTypePoolList, USDC_DEV, SOL_DEV } from '@store/consts/static'
 import { VariantType } from 'notistack'
-import { useNavigate } from 'react-router-dom'
+import { useLocation, useNavigate } from 'react-router-dom'
 
 export interface PoolListInterface {
   initialLength: number
@@ -42,9 +42,10 @@ import { ROUTES } from '@utils/utils'
 import { EmptyPlaceholder } from '@common/EmptyPlaceholder/EmptyPlaceholder'
 import { colors, theme } from '@static/theme'
 import { InputPagination } from '@common/Pagination/InputPagination/InputPagination'
+import { actions } from '@store/reducers/navigation'
+import { useDispatch } from 'react-redux'
 
 const ITEMS_PER_PAGE = 10
-
 const tokens = [BTC_DEV, USDC_DEV, SOL_DEV]
 const fees = [0.01, 0.02, 0.1, 0.3, 1]
 
@@ -63,6 +64,7 @@ const generateMockData = () => {
     liquidityY: Math.random() * 5000,
     addressFrom: tokens[(index * 2) % tokens.length].address,
     addressTo: tokens[(index * 2 + 1) % tokens.length].address,
+
     apy: Math.random() * 100,
     apyData: {
       fees: 10
@@ -85,6 +87,8 @@ const LiquidityPoolList: React.FC<PoolListInterface> = ({
   const [initialDataLength, setInitialDataLength] = useState(initialLength)
   const { classes, cx } = useStyles()
   const [page, setPage] = React.useState(1)
+  const dispatch = useDispatch()
+  const location = useLocation()
   const [sortType, setSortType] = React.useState(SortTypePoolList.FEE_24_DESC)
   const navigate = useNavigate()
   useEffect(() => {
@@ -227,7 +231,11 @@ const LiquidityPoolList: React.FC<PoolListInterface> = ({
             desc={initialDataLength < 3 ? '' : 'You can create it yourself!'}
             desc2={initialDataLength < 5 ? '' : 'Or try adjusting your search criteria!'}
             buttonName='Create Pool'
-            onAction={() => navigate(ROUTES.NEW_POSITION)}
+            onAction={() => {
+              dispatch(actions.setNavigation({ address: location.pathname }))
+
+              navigate(ROUTES.NEW_POSITION)
+            }}
             withButton={true}
             withImg={initialDataLength > 3}
           />

src/components/NewPosition/NewPosition.tsx

@@ -30,7 +30,7 @@ import { PlotTickData } from '@store/reducers/positions'
 import { blurContent, unblurContent } from '@utils/uiUtils'
 import { VariantType } from 'notistack'
 import React, { useEffect, useMemo, useState } from 'react'
-import { Link, useNavigate } from 'react-router-dom'
+import { useNavigate } from 'react-router-dom'
 import ConcentrationTypeSwitch from './ConcentrationTypeSwitch/ConcentrationTypeSwitch'
 import DepositSelector from './DepositSelector/DepositSelector'
 import MarketIdLabel from './MarketIdLabel/MarketIdLabel'
@@ -135,6 +135,7 @@ export interface INewPosition {
   feeTiersWithTvl: Record<number, number>
   totalTvl: number
   isLoadingStats: boolean
+  handleBack: () => void
 }
 
 export const NewPosition: React.FC<INewPosition> = ({
@@ -197,7 +198,8 @@ export const NewPosition: React.FC<INewPosition> = ({
   canNavigate,
   feeTiersWithTvl,
   totalTvl,
-  isLoadingStats
+  isLoadingStats,
+  handleBack
 }) => {
   const { classes } = useStyles()
   const navigate = useNavigate()
@@ -603,12 +605,10 @@ export const NewPosition: React.FC<INewPosition> = ({
 
   return (
     <Grid container className={classes.wrapper}>
-      <Link to={ROUTES.PORTFOLIO} style={{ textDecoration: 'none', maxWidth: 'fit-content' }}>
-        <Grid className={classes.back} container item>
-          <img className={classes.backIcon} src={backIcon} alt='back' />
-          <Typography className={classes.backText}>Positions</Typography>
-        </Grid>
-      </Link>
+      <Grid onClick={() => handleBack()} className={classes.back} container item>
+        <img className={classes.backIcon} src={backIcon} alt='back' />
+        <Typography className={classes.backText}>Back</Typography>
+      </Grid>
 
       <Grid container className={classes.headerContainer} mb={1}>
         <Box className={classes.titleContainer}>

src/components/NewPosition/style.ts

@@ -21,6 +21,7 @@ const useStyles = makeStyles()(theme => {
       transition: 'filter 300ms',
 
       '&:hover': {
+        cursor: 'pointer',
         filter: 'brightness(2)',
         '@media (hover: none)': {
           filter: 'none'

src/components/PopularPools/Card/Card.tsx

@@ -9,11 +9,13 @@ import { backIcon, unknownTokenIcon, warningIcon } from '@static/icons'
 import { shortenAddress } from '@utils/uiUtils'
 import StatsLabel from './StatsLabel/StatsLabel'
 import { formatNumberWithSuffix, initialXtoY, parseFeeToPathFee, ROUTES } from '@utils/utils'
-import { useNavigate } from 'react-router-dom'
+import { useLocation, useNavigate } from 'react-router-dom'
 import { NetworkType } from '@store/consts/static'
 import { Button } from '@common/Button/Button'
 import { ReverseTokensIcon } from '@static/componentIcon/ReverseTokensIcon'
 import { DECIMAL } from '@invariant-labs/sdk/lib/utils'
+import { actions } from '@store/reducers/navigation'
+import { useDispatch } from 'react-redux'
 
 export interface ICard extends PopularPoolData {
   isLoading: boolean
@@ -40,7 +42,8 @@ const Card: React.FC<ICard> = ({
 }) => {
   const { classes } = useStyles()
   const navigate = useNavigate()
-
+  const location = useLocation()
+  const dispatch = useDispatch()
   const isXtoY = initialXtoY(addressFrom ?? '', addressTo ?? '')
 
   const tokenAData = isXtoY
@@ -73,6 +76,7 @@ const Card: React.FC<ICard> = ({
 
   const handleOpenPosition = () => {
     if (fee === undefined) return
+    dispatch(actions.setNavigation({ address: location.pathname }))
 
     navigate(
       ROUTES.getNewPositionRoute(

src/components/Portfolio/Overview/YourWallet/ActionButtons/ActionButtons.tsx

@@ -4,9 +4,11 @@ import { horizontalSwapIcon, newTabBtnIcon, plusIcon } from '@static/icons'
 import { getAddressTickerMap, NetworkType } from '@store/consts/static'
 import { StrategyConfig, WalletToken } from '@store/types/userOverview'
 import { addressToTicker, ROUTES } from '@utils/utils'
-import { useNavigate } from 'react-router-dom'
+import { useLocation, useNavigate } from 'react-router-dom'
 import { useStyles } from './styles'
 import { useMemo } from 'react'
+import { actions } from '@store/reducers/navigation'
+import { useDispatch } from 'react-redux'
 
 interface IActionButtons {
   pool: WalletToken
@@ -17,7 +19,8 @@ interface IActionButtons {
 export const ActionButtons = ({ pool, strategy, currentNetwork }: IActionButtons) => {
   const navigate = useNavigate()
   const { classes } = useStyles()
-
+  const location = useLocation()
+  const dispatch = useDispatch()
   const networkUrl = useMemo(() => {
     switch (currentNetwork) {
       case NetworkType.Mainnet:
@@ -43,6 +46,7 @@ export const ActionButtons = ({ pool, strategy, currentNetwork }: IActionButtons
               currentNetwork,
               sourceToken === 'SOL' ? tickerMap['USDC'] : tickerMap['SOL']
             )
+            dispatch(actions.setNavigation({ address: location.pathname }))
 
             navigate(
               ROUTES.getNewPositionRoute(

src/components/Portfolio/Portfolio.tsx

@@ -20,7 +20,7 @@ import { theme } from '@static/theme'
 import { NetworkType } from '@store/consts/static'
 import { addressToTicker, initialXtoY, parseFeeToPathFee, ROUTES } from '@utils/utils'
 import { useMemo, useState } from 'react'
-import { useNavigate } from 'react-router-dom'
+import { useLocation, useNavigate } from 'react-router-dom'
 import { useStyles } from './style'
 
 import { SwapToken } from '@store/selectors/solanaWallet'
@@ -34,6 +34,8 @@ import PositionCardsSkeletonMobile from './PositionItem/variants/PositionTables/
 import { PositionItemMobile } from './PositionItem/variants/PositionMobileCard/PositionItemMobile'
 import { refreshIcon } from '@static/icons'
 import { unblurContent } from '@utils/uiUtils'
+import { actions } from '@store/reducers/navigation'
+import { useDispatch } from 'react-redux'
 
 interface IProps {
   initialPage: number
@@ -80,7 +82,8 @@ const Portfolio: React.FC<IProps> = ({
   const isDownLg = useMediaQuery(theme.breakpoints.down('lg'))
   const isMd = useMediaQuery(theme.breakpoints.down('md'))
   const { processedTokens, isProcesing } = useProcessedTokens(tokensList, isBalanceLoading)
-
+  const dispatch = useDispatch()
+  const location = useLocation()
   const [activePanel, setActivePanel] = useState<OverviewSwitcher>(OverviewSwitcher.Overview)
 
   const handleToggleChange =
@@ -248,6 +251,7 @@ const Portfolio: React.FC<IProps> = ({
       <Grid
         onClick={() => {
           if (allowPropagation) {
+            dispatch(actions.setNavigation({ address: location.pathname }))
             navigate(ROUTES.getPositionRoute(element.id))
           }
         }}

src/components/Portfolio/PositionItem/variants/PositionTables/PositionTable/PositionsTable.tsx

@@ -9,12 +9,14 @@ import {
   TableHead,
   TableRow
 } from '@mui/material'
-import { useNavigate } from 'react-router-dom'
+import { useLocation, useNavigate } from 'react-router-dom'
 import { EmptyPlaceholder } from '@common/EmptyPlaceholder/EmptyPlaceholder'
 import { generatePositionTableLoadingData, ROUTES } from '@utils/utils'
 import { IPositionItem } from '@store/consts/types'
 import { usePositionTableStyle } from './style'
 import { PositionTableRow } from '../PositionTablesRow/PositionsTableRow'
+import { actions } from '@store/reducers/navigation'
+import { useDispatch } from 'react-redux'
 
 interface IPositionsTableProps {
   positions: Array<IPositionItem>
@@ -39,7 +41,8 @@ export const PositionsTable: React.FC<IPositionsTableProps> = ({
 }) => {
   const { classes } = usePositionTableStyle({ isScrollHide: positions.length <= 5 || isLoading })
   const navigate = useNavigate()
-
+  const dispatch = useDispatch()
+  const location = useLocation()
   const displayData = isLoading ? generatePositionTableLoadingData() : positions
 
   return (
@@ -86,6 +89,8 @@ export const PositionsTable: React.FC<IPositionsTableProps> = ({
               <TableRow
                 onClick={e => {
                   if (!isLoading && !(e.target as HTMLElement).closest('.action-button')) {
+                    dispatch(actions.setNavigation({ address: location.pathname }))
+
                     navigate(ROUTES.getPositionRoute(position.id))
                   }
                 }}

src/components/PositionDetails/PositionDetails.tsx

@@ -13,7 +13,7 @@ import {
 import { PlotTickData } from '@store/reducers/positions'
 import { VariantType } from 'notistack'
 import React, { useEffect, useMemo, useState } from 'react'
-import { useNavigate } from 'react-router-dom'
+import { useLocation, useNavigate } from 'react-router-dom'
 import { useStyles } from './style'
 import { ILiquidityToken, INavigatePosition, TokenPriceData } from '@store/consts/types'
 import { addressToTicker, initialXtoY, parseFeeToPathFee, printBN, ROUTES } from '@utils/utils'
@@ -28,6 +28,8 @@ import { Information } from '@common/Information/Information'
 import { eyeYellowIcon } from '@static/icons'
 import { DesktopNavigation } from './Navigation/DesktopNavigation/DesktopNavigation'
 import { PaginationList } from '@common/Pagination/Pagination/Pagination'
+import { actions } from '@store/reducers/navigation'
+import { useDispatch } from 'react-redux'
 interface IProps {
   tokenXAddress: PublicKey
   tokenYAddress: PublicKey
@@ -227,6 +229,8 @@ const PositionDetails: React.FC<IProps> = ({
     }
   }, [midPrice.x, tokenXPriceData?.price, tokenYPriceData?.price])
 
+  const location = useLocation()
+  const dispatch = useDispatch()
   return (
     <Box display='flex' flexDirection={'column'} flex={1}>
       <Information mb={3} transitionTimeout={300} shouldOpen={showPreviewInfo}>
@@ -285,6 +289,7 @@ const PositionDetails: React.FC<IProps> = ({
 
               const tokenA = isXtoY ? address1 : address2
               const tokenB = isXtoY ? address2 : address1
+              dispatch(actions.setNavigation({ address: location.pathname }))
 
               navigate(ROUTES.getNewPositionRoute(tokenA, tokenB, parsedFee))
             }}

src/components/PositionDetails/PositionHeader/PositionHeader.tsx

@@ -9,11 +9,13 @@ import { REFRESHER_INTERVAL } from '@store/consts/static'
 import { useEffect, useMemo, useState } from 'react'
 import { ROUTES, truncateString } from '@utils/utils'
 import { Button } from '@common/Button/Button'
-import { backArrowIcon, newTabIcon } from '@static/icons'
+import { backIcon, newTabIcon } from '@static/icons'
 import { INavigatePosition } from '@store/consts/types'
 import { ReverseTokensIcon } from '@static/componentIcon/ReverseTokensIcon'
-import { useNavigate } from 'react-router-dom'
+import { useLocation, useNavigate } from 'react-router-dom'
 import { MobileNavigation } from '../Navigation/MobileNavigation/MobileNavigation'
+import { actions } from '@store/reducers/navigation'
+import { useDispatch } from 'react-redux'
 
 type Props = {
   tokenA: {
@@ -66,6 +68,8 @@ export const PositionHeader = ({
   const isSmDown = useMediaQuery(theme.breakpoints.down(688))
   const isMdDown = useMediaQuery(theme.breakpoints.down(1040))
   const isLgDown = useMediaQuery(theme.breakpoints.down('lg'))
+  const location = useLocation()
+  const dispatch = useDispatch()
 
   const [refresherTime, setRefresherTime] = useState(REFRESHER_INTERVAL)
 
@@ -165,8 +169,8 @@ export const PositionHeader = ({
     <Box className={classes.headerContainer}>
       <Box className={classes.navigation}>
         <Box className={cx(classes.wrapper, classes.backContainer)} onClick={() => onGoBackClick()}>
-          <img src={backArrowIcon} alt='Back arrow' />
-          <Typography className={classes.backText}>Back to portfolio</Typography>
+          <img src={backIcon} alt='Back arrow' />
+          <Typography className={classes.backText}>Back</Typography>
         </Box>
         {isMdDown && (
           <Box className={classes.navigationSide}>
@@ -180,6 +184,8 @@ export const PositionHeader = ({
               direction='left'
               onClick={() => {
                 if (previousPosition) {
+                  dispatch(actions.setNavigation({ address: location.pathname }))
+
                   navigate(ROUTES.getPositionRoute(previousPosition.id))
                 }
               }}
@@ -189,6 +195,8 @@ export const PositionHeader = ({
               direction='right'
               onClick={() => {
                 if (nextPosition) {
+                  dispatch(actions.setNavigation({ address: location.pathname }))
+
                   navigate(ROUTES.getPositionRoute(nextPosition.id))
                 }
               }}

src/components/Stats/PoolList/PoolList.tsx

@@ -12,11 +12,13 @@ import {
 } from '@store/consts/static'
 import { VariantType } from 'notistack'
 import { Keypair } from '@solana/web3.js'
-import { useNavigate } from 'react-router-dom'
+import { useLocation, useNavigate } from 'react-router-dom'
 import { EmptyPlaceholder } from '@common/EmptyPlaceholder/EmptyPlaceholder'
 import { colors, theme } from '@static/theme'
 import { ROUTES } from '@utils/utils'
 import { InputPagination } from '@common/Pagination/InputPagination/InputPagination'
+import { useDispatch } from 'react-redux'
+import { actions } from '@store/reducers/navigation'
 
 export interface PoolListInterface {
   initialLength: number
@@ -152,6 +154,8 @@ const PoolList: React.FC<PoolListInterface> = ({
     return sortedData.slice(offest).slice(0, perPage)
   }
 
+  const location = useLocation()
+  const dispatch = useDispatch()
   const totalItems = useMemo(() => sortedData.length, [sortedData])
   const lowerBound = useMemo(() => (page - 1) * ITEMS_PER_PAGE + 1, [page])
   const upperBound = useMemo(() => Math.min(page * ITEMS_PER_PAGE, totalItems), [totalItems, page])
@@ -235,7 +239,11 @@ const PoolList: React.FC<PoolListInterface> = ({
             mainTitle='Pool not found...'
             desc={initialDataLength < 3 ? '' : 'You can create it yourself!'}
             desc2={initialDataLength < 5 ? '' : 'Or try adjusting your search criteria!'}
-            onAction={() => navigate(ROUTES.NEW_POSITION)}
+            onAction={() => {
+              dispatch(actions.setNavigation({ address: location.pathname }))
+
+              navigate(ROUTES.NEW_POSITION)
+            }}
             buttonName='Create Pool'
             withButton={true}
             withImg={initialDataLength > 3}