[161] Route based on fitlers

src/components/LiquidityPoolList/LiquidityPoolList.tsx

@@ -35,13 +35,16 @@ export interface PoolListInterface {
   copyAddressHandler: (message: string, variant: VariantType) => void
   isLoading: boolean
   showAPY: boolean
+  filteredTokens: ISearchToken[]
 }
 
 import { Keypair } from '@solana/web3.js'
 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 { ISearchToken } from '@common/FilterSearch/FilterSearch'
+import { shortenAddress } from '@utils/uiUtils'
 
 const ITEMS_PER_PAGE = 10
 
@@ -77,7 +80,7 @@ const LiquidityPoolList: React.FC<PoolListInterface> = ({
   data,
   network,
   initialLength,
-
+  filteredTokens,
   copyAddressHandler,
   isLoading,
   showAPY
@@ -149,6 +152,8 @@ const LiquidityPoolList: React.FC<PoolListInterface> = ({
   const isCenterAligment = useMediaQuery(theme.breakpoints.down(1280))
 
   const height = initialDataLength > ITEMS_PER_PAGE ? (isCenterAligment ? 176 : 90) : 69
+  const filteredTokenX = filteredTokens[0] ?? ''
+  const filteredTokenY = filteredTokens[1] ?? ''
 
   const totalItems = useMemo(() => sortedData.length, [sortedData])
   const lowerBound = useMemo(() => (page - 1) * ITEMS_PER_PAGE + 1, [page])
@@ -223,11 +228,18 @@ const LiquidityPoolList: React.FC<PoolListInterface> = ({
           <EmptyPlaceholder
             height={initialDataLength < ITEMS_PER_PAGE ? initialDataLength * 69 : 688}
             newVersion
-            mainTitle='Pool not found...'
+            mainTitle={`The ${shortenAddress(filteredTokenX.symbol ?? '')}/${shortenAddress(filteredTokenY.symbol ?? '')} pool was not found...`}
             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={() => {
+              navigate(
+                ROUTES.getNewPositionRoute(filteredTokenX.address, filteredTokenY.address, '0_10'),
+                {
+                  state: { referer: 'stats' }
+                }
+              )
+            }}
             withButton={true}
             withImg={initialDataLength > 3}
           />

src/components/Stats/PoolList/PoolList.tsx

@@ -17,6 +17,8 @@ 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 { ISearchToken } from '@common/FilterSearch/FilterSearch'
+import { shortenAddress } from '@utils/uiUtils'
 
 export interface PoolListInterface {
   initialLength: number
@@ -48,6 +50,7 @@ export interface PoolListInterface {
   isLoading: boolean
   showAPY: boolean
   interval: Intervals
+  filteredTokens: ISearchToken[]
 }
 
 const ITEMS_PER_PAGE = 10
@@ -87,6 +90,7 @@ const PoolList: React.FC<PoolListInterface> = ({
   copyAddressHandler,
   isLoading,
   showAPY,
+  filteredTokens,
   interval
 }) => {
   const [initialDataLength, setInitialDataLength] = useState(initialLength)
@@ -155,7 +159,8 @@ const PoolList: React.FC<PoolListInterface> = ({
   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])
-
+  const filteredTokenX = filteredTokens[0] ?? ''
+  const filteredTokenY = filteredTokens[1] ?? ''
   const pages = useMemo(() => Math.ceil(data.length / ITEMS_PER_PAGE), [data])
   const isCenterAligment = useMediaQuery(theme.breakpoints.down(1280))
   const height = useMemo(
@@ -232,10 +237,17 @@ const PoolList: React.FC<PoolListInterface> = ({
           <EmptyPlaceholder
             newVersion
             height={initialDataLength < ITEMS_PER_PAGE ? initialDataLength * 69 : 688}
-            mainTitle='Pool not found...'
+            mainTitle={`The ${shortenAddress(filteredTokenX.symbol ?? '')}/${shortenAddress(filteredTokenY.symbol ?? '')} pool was 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={() => {
+              navigate(
+                ROUTES.getNewPositionRoute(filteredTokenX.address, filteredTokenY.address, '0_10'),
+                {
+                  state: { referer: 'stats' }
+                }
+              )
+            }}
             buttonName='Create Pool'
             withButton={true}
             withImg={initialDataLength > 3}

src/containers/WrappedPoolList/WrappedPoolList.tsx

@@ -101,6 +101,7 @@ export const WrappedPoolList: React.FC = () => {
         copyAddressHandler={copyAddressHandler}
         isLoading={isLoadingStats}
         showAPY={showAPY}
+        filteredTokens={selectedFilters}
       />
     </div>
   )

src/containers/WrappedStats/WrappedStats.tsx

@@ -227,6 +227,7 @@ export const WrappedStats: React.FC = () => {
               copyAddressHandler={copyAddressHandler}
               isLoading={isLoadingStats}
               showAPY={showAPY}
+              filteredTokens={searchPoolsValue}
             />
           </Grid>
           <Grid className={classes.rowContainer}>