feat: universal farm (#10541)

<!--
Before opening a pull request, please read the [contributing
guidelines](https://github.com/pancakeswap/pancake-frontend/blob/develop/CONTRIBUTING.md)
first
-->

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on refactoring and exporting components, updating page
routes, and adding utility functions for better code organization.

### Detailed summary
- Refactored and exported components in various directories
- Updated page routes for better navigation
- Added utility functions for improved code functionality

> The following files were skipped due to too many changes:
`apps/web/src/views/universalFarms/components/PositionItem/PositionItemSkeleton.tsx`,
`packages/uikit/src/components/ButtonMenu/types.ts`,
`packages/uikit/src/components/Image/index.ts`,
`apps/web/src/views/universalFarms/components/PositionItem/styled.ts`,
`packages/widgets-internal/index.ts`,
`packages/uikit/src/components/Select/index.stories.tsx`,
`packages/uikit/src/components/Card/theme.ts`,
`packages/farms/index.test.ts`, `apps/web/src/state/info/types.ts`,
`apps/web/src/state/farmsV4/state/poolApr/utils.ts`,
`apps/aptos/components/Menu/hooks/useMenuItems.ts`,
`apps/web/src/views/Home/components/EcoSystemSection/index.tsx`,
`apps/web/src/views/universalFarms/components/StopPropagation.tsx`,
`apps/web/src/hooks/useTokenAllowance.ts`,
`apps/web/src/views/universalFarms/utils/index.ts`,
`packages/uikit/src/components/ButtonMenu/ButtonMenu.tsx`,
`packages/tokens/src/helpers/getTokensByChain.ts`,
`apps/web/src/views/Swap/hooks/useStableConfig.ts`,
`apps/web/src/hooks/v3/useV3Positions.ts`,
`apps/web/src/views/Farms/styled.tsx`,
`apps/web/src/views/universalFarms/hooks/useBCakeWrapperAddress.tsx`,
`apps/web/src/views/universalFarms/hooks/useMasterChefV3FarmBoosterAddress.ts`,
`apps/web/src/views/PoolDetail/components/ChartLiquidity/ChartLiquidity.tsx`,
`apps/web/src/utils/batcher.ts`,
`apps/web/src/state/farmsV4/state/accountPositions/hooks/useAccountV3Position.ts`,
`packages/widgets-internal/components/PoolTypeMenu/PoolTypeMenu.tsx`,
`apps/web/src/components/Menu/config/config.ts`,
`apps/web/src/views/universalFarms/hooks/useCheckShouldSwitchNetwork.ts`,
`packages/widgets-internal/farm/components/PoolsTypeFilter/PoolsTypeFilter.tsx`,
`apps/web/src/views/PoolDetail/components/Transactions/type.ts`,
`apps/web/src/state/user/hooks/useUserAddedTokens.ts`,
`apps/web/src/views/AddLiquidityV3/formViews/V3FormView/components/PoolListItem.tsx`,
`packages/uikit/src/components/Image/types.ts`,
`packages/widgets-internal/farm/components/FarmApyButton/index.tsx`,
`apps/web/src/views/AddLiquidity/ChoosePair.tsx`,
`apps/web/src/hooks/v3/utils/getPriceOrderingFromPositionForUI.ts`,
`packages/uikit/src/widgets/Modal/BottomDrawer/BottomDrawer.tsx`,
`apps/web/src/views/Farms/hooks/useMasterChefV2Data.ts`,
`packages/farms/src/const.ts`,
`apps/web/src/views/PoolDetail/components/ChartLiquidity/styled.ts`,
`apps/web/src/views/Farms/hooks/useV2LpTokenTotalSupply.ts`,
`apps/web/src/views/universalFarms/hooks/useMultiChains.ts`,
`packages/farms/src/types.ts`,
`packages/uikit/src/components/Svg/index.tsx`,
`apps/web/src/state/farmsV4/state/accountPositions/hooks/useAccountV2PendingCakeReward.ts`,
`packages/hooks/src/useIntersectionObserver.ts`,
`apps/web/src/hooks/useContract.ts`, `packages/farms/src/index.ts`,
`apps/web/src/views/PoolDetail/hooks/usePoolSymbol.ts`,
`apps/web/src/state/lists/hooks.ts`,
`apps/web/src/views/universalFarms/hooks/useBCakeWrapperInfo.ts`,
`apps/web/src/pages/stable/[address].tsx`,
`apps/web/src/views/universalFarms/hooks/useTotalPriceUSD.ts`,
`apps/web/src/state/farmsV4/state/accountPositions/atom.ts`,
`apps/web/src/state/lists/updater.ts`,
`packages/widgets-internal/roi/RoiCalculator.tsx`,
`apps/web/src/views/PoolDetail/components/Transactions/Transactions.tsx`,
`packages/smart-router/legacy-router/getStableSwapPairs.ts`,
`packages/farms/src/farms/index.ts`,
`packages/uikit/src/components/Tag/theme.ts`,
`packages/v2-sdk/src/entities/pair.ts`,
`apps/web/src/views/PoolDetail/components/MyPositionsContext.tsx`,
`packages/uikit/src/components/Image/TokenPairLogo.tsx`,
`packages/uikit/src/components/Svg/Icons/SortDESCIcon.tsx`,
`apps/web/src/views/universalFarms/components/PositionActions/V3UnstakeModalContent.tsx`,
`packages/widgets-internal/farm/components/DepositModal/index.tsx`,
`apps/web/src/config/constants/meta.ts`,
`apps/web/src/state/farmsV4/state/type.ts`,
`apps/web/src/views/Info/components/InfoCharts/LineChart/index.tsx`,
`apps/web/src/views/PoolDetail/hooks/useV3Positions.ts`,
`packages/uikit/src/components/Image/TokenPairImage.tsx`,
`apps/web/src/views/PoolDetail/hooks/useStablePoolFee.ts`,
`packages/farms/src/farms/opBNBTestnet.ts`,
`packages/uikit/src/components/MultiSelect/types.tsx`,
`packages/farms/src/farms/zkSyncTestnet.ts`,
`apps/web/src/state/farmsV4/state/accountPositions/fetcher/v3/getAccountV3FarmingPendingCakeReward.ts`,
`apps/web/src/views/PoolDetail/components/ChartFee.tsx`,
`apps/web/src/views/universalFarms/components/StyledCard.tsx`,
`packages/farms/src/farms/opBNB.ts`,
`apps/web/src/views/PoolDetail/components/ChartTVL.tsx`,
`apps/web/src/views/Farms/hooks/useLmPoolLiquidity.ts`,
`packages/farms/src/farms/polygonZkEVMTestnet.ts`,
`apps/web/src/views/Farms/FarmsV3.tsx`,
`packages/uikit/src/components/MultiSelect/index.stories.tsx`,
`apps/web/src/views/PoolDetail/hooks/usePoolChartFeeData.ts`,
`apps/web/src/views/Farms/hooks/v3/useFarmV3Actions.tsx`,
`apps/web/src/views/PoolDetail/components/BreadcrumbNav.tsx`,
`apps/web/src/views/universalFarms/components/PoolsBanner.tsx`,
`apps/web/src/views/PoolDetail/components/ChartVolume.tsx`,
`apps/web/src/state/farmsV4/state/extendPools/atom.ts`,
`apps/web/src/components/RangeTag.tsx`,
`apps/web/src/state/farmsV3/hooks.ts`,
`apps/web/src/state/farmsV4/state/accountPositions/hooks/useAccountV3Positions.ts`,
`apps/web/src/state/info/hooks.ts`,
`apps/web/src/views/universalFarms/components/PoolAprButton/PoolGlobalAprButton.tsx`,
`apps/web/src/views/Pools/components/RevenueSharing/BenefitsModal/LockedBenefits.tsx`,
`apps/web/src/views/V3Info/hooks/index.ts`,
`apps/web/src/views/PoolDetail/hooks/usePoolChartVolumeData.ts`,
`apps/web/src/views/PoolDetail/hooks/usePoolChartTVLData.ts`,
`apps/web/src/views/PoolDetail/components/PoolEarnings.tsx`,
`apps/web/src/state/farmsV4/state/extendPools/fetcher.ts`,
`apps/web/src/views/universalFarms/hooks/useV2FarmActions.ts`,
`packages/widgets-internal/components/CurrencyLogo/DoubleCurrencyLogo.tsx`,
`apps/web/src/state/farmsV4/state/accountPositions/fetcher/v3/getAccountV3TokenIds.ts`,
`apps/web/src/pages/liquidity/[tokenId].tsx`,
`apps/web/src/hooks/useActiveWeb3React.ts`,
`apps/web/src/views/V3Info/components/BarChart/alt.tsx`,
`apps/web/src/config/constants/lists.ts`,
`apps/web/src/state/farmsV4/state/accountPositions/hooks/useAccountStableLpDetails.ts`,
`apps/web/src/views/PoolDetail/components/PoolTokens.tsx`,
`apps/web/src/pages/api/configs/farms/index.ts`,
`apps/web/src/views/PoolDetail/components/ChartLiquidity/CurrentPriceLabel.tsx`,
`packages/widgets-internal/components/NumberDisplay/TokenNumberDisplay.tsx`,
`apps/web/src/views/FarmAuction/index.tsx`,
`packages/widgets-internal/components/NumberDisplay/index.tsx`,
`apps/web/src/views/PoolDetail/components/ChangePercent.tsx`,
`packages/widgets-internal/components/TokenOverview/TokenOverview.tsx`,
`packages/utils/formatFiatNumber.ts`,
`apps/web/src/views/universalFarms/components/PositionItem/PriceRange.tsx`,
`apps/web/src/state/farmsV4/state/accountPositions/type.ts`,
`packages/uikit/src/components/Image/styles.tsx`,
`packages/uikit/src/tokens/colors.ts`,
`apps/web/src/state/farmsV4/state/poolApr/atom.ts`,
`packages/uikit/src/components/Svg/Icons/SwapHoriz.tsx`,
`packages/uikit/src/components/Svg/Icons/SortArrow.tsx`,
`packages/widgets-internal/components/NumberDisplay/FiatNumberDisplay.tsx`,
`apps/web/src/views/universalFarms/components/PoolAprButton/AprButton.tsx`,
`packages/uikit/src/components/TableView/index.stories.tsx`,
`apps/web/src/views/PoolDetail/components/ChartLiquidity/ChartToolTip.tsx`,
`packages/uikit/src/components/TreeSelect/index.stories.tsx`,
`packages/widgets-internal/components/FeeTierTooltip/index.tsx`,
`apps/web/src/pages/api/configs/farms/[chain].ts`,
`packages/utils/formatNumber.ts`,
`apps/web/src/views/PoolFinder/index.tsx`,
`apps/web/src/views/AddLiquidityV3/Modal.tsx`,
`apps/web/src/views/PoolDetail/components/PoolCharts.tsx`,
`apps/web/src/state/farmsV4/state/accountPositions/hooks/useExtraV3PositionInfo.ts`,
`packages/localization/src/config/translations.json`,
`apps/web/src/state/farmsV4/state/accountPositions/hooks/useAccountV2LpDetails.ts`,
`apps/web/src/views/PoolDetail/hooks/usePoolTransactions.ts`,
`apps/web/src/views/universalFarms/components/PositionActions/StakeActions.tsx`,
`apps/web/src/views/universalFarms/hooks/useMultiChainsTokens.tsx`,
`apps/web/src/views/universalFarms/components/PoolAprButton/PoolAprButton.tsx`,
`packages/widgets-internal/farm/components/NetworkFilter/NetworkFilter.tsx`,
`apps/web/src/views/universalFarms/UniversalFarms.tsx`,
`apps/web/src/views/universalFarms/components/Modals/V3StakeModal.tsx`,
`apps/web/src/views/universalFarms/components/PoolAprButton/AprTooltipContent.tsx`,
`apps/web/src/state/farmsV4/state/accountPositions/fetcher/v3/getAccountV3Positions.ts`,
`apps/web/src/views/AddLiquidityV3/index.tsx`,
`apps/web/src/views/universalFarms/components/PositionItem/PositionItem.tsx`,
`apps/web/src/state/farmsV4/state/accountPositions/hooks/useAccountPositionDetailByPool.ts`,
`apps/web/src/components/TokenImage/index.tsx`,
`apps/web/src/views/universalFarms/hooks/useCakeEarning.ts`,
`apps/web/src/views/universalFarms/components/PositionItem/V3PositionItem.tsx`,
`apps/web/src/views/AddLiquidityV3/components/AprCalculatorV2.tsx`,
`apps/web/src/state/farmsV4/state/extendPools/hooks.ts`,
`apps/web/src/views/PoolDetail/components/PoolCurrencies.tsx`,
`apps/web/src/views/PoolDetail/components/PoolStatus.tsx`,
`packages/farms/src/farms/bCakeWrapper.ts`,
`apps/web/src/views/universalFarms/hooks/useEstimateUserMultiplier.ts`,
`apps/web/src/views/PoolDetail/components/Transactions/styled.ts`,
`apps/web/src/state/farmsV4/state/poolApr/hooks.ts`,
`apps/web/src/state/farmsV4/state/utils.ts`,
`apps/web/src/views/universalFarms/components/PositionItem/StablePositionItem.tsx`,
`packages/uikit/src/components/TableView/SortArrowButton.tsx`,
`apps/web/src/views/universalFarms/components/PositionItem/V2PositionItem.tsx`,
`packages/farms/src/farms/linea.ts`,
`apps/web/src/views/PoolDetail/components/PoolInfo.tsx`,
`apps/web/src/views/universalFarms/components/PoolListItemAction.tsx`,
`packages/uikit/src/components/TableView/Table.tsx`,
`apps/web/src/views/universalFarms/components/useColumnConfig.tsx`,
`packages/widgets-internal/components/TokenFilter/TokenFilter.tsx`,
`apps/web/src/hooks/Tokens.ts`,
`apps/web/src/views/universalFarms/components/PoolsFilterPanel.tsx`,
`packages/uikit/src/components/MultiSelect/SearchBox.tsx`,
`apps/web/src/views/universalFarms/components/PoolListView.tsx`,
`apps/web/src/views/universalFarms/components/PositionActions/V3PositionActions.tsx`,
`apps/web/src/state/farmsV4/state/farmPools/fetcher.ts`,
`apps/web/src/views/universalFarms/components/PoolAprButton/V3PoolAprModal.tsx`,
`apps/web/src/views/universalFarms/components/PoolAprButton/V2PoolAprModal.tsx`,
`apps/web/src/hooks/v3/usePools.ts`,
`packages/farms/src/farms/index.test.ts`,
`apps/web/src/views/universalFarms/components/PositionItem/PositionInfo.tsx`,
`apps/web/src/views/PoolDetail/components/ChartLiquidity/ChartV3Liquidity.tsx`,
`packages/farms/src/farms/polygonZkEVM.ts`,
`packages/uikit/src/components/MultiSelect/MultiSelect.tsx`,
`apps/web/src/views/universalFarms/PoolsPage.tsx`,
`apps/web/src/state/farmsV4/state/farmPools/hooks.ts`,
`packages/farms/src/farms/zkSync.ts`,
`apps/web/src/views/PoolDetail/components/Transactions/TransactionsTable.tsx`,
`packages/farms/src/farms/base.ts`,
`apps/web/src/views/universalFarms/components/PositionActions/V2PositionActions.tsx`,
`apps/web/src/views/universalFarms/components/PoolAprButton/PoolPositionAprButton.tsx`,
`apps/web/src/views/universalFarms/PositionPage.tsx`,
`apps/web/src/state/farmsV4/state/accountPositions/fetcher.ts`,
`apps/web/src/views/PoolDetail/components/MyPositions.tsx`,
`apps/web/src/state/farmsV4/state/poolApr/fetcher.ts`,
`packages/farms/src/farms/eth.ts`, `packages/farms/src/farms/arb.ts`,
`packages/farms/src/farms/bsc.ts`,
`apps/web/src/state/info/api/schema.d.ts`

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your
question}`

<!-- end pr-codex -->

---------

Co-authored-by: ChefEric <[email protected]>

.github/workflows/format.yml

@@ -6,7 +6,7 @@ on:
 jobs:
   code:
     runs-on: ubuntu-latest
-    timeout-minutes: 4
+    timeout-minutes: 6
 
     steps:
       - name: Checkout code

.vscode/settings.json

@@ -28,9 +28,9 @@
     "awgmi",
     "bignumber",
     "bips",
-    "cobrand",
     "CLAMM",
     "CLPOOL",
+    "cobrand",
     "GELATO",
     "ledgerhq",
     "LINEA",
@@ -43,6 +43,7 @@
     "refreshable",
     "sepolia",
     "SNBNB",
+    "stableswap",
     "stylelint",
     "tanstack",
     "tilg",

apps/aptos/components/Menu/hooks/useMenuItems.ts

@@ -1,4 +1,4 @@
-import { useMemo } from 'react'
+import { ContextApi, useTranslation } from '@pancakeswap/localization'
 import {
   DropdownMenuItems,
   DropdownMenuItemType,
@@ -9,7 +9,7 @@ import {
   SwapFillIcon,
   SwapIcon,
 } from '@pancakeswap/uikit'
-import { ContextApi, useTranslation } from '@pancakeswap/localization'
+import { useMemo } from 'react'
 import { useMenuItemsStatus } from './useMenuItemsStatus'
 
 export type ConfigMenuDropDownItemsType = DropdownMenuItems & { hideSubNav?: boolean }

apps/web/src/components/Menu/config/config.ts

@@ -67,7 +67,7 @@ const config: (
         },
         {
           label: t('Liquidity'),
-          href: '/liquidity',
+          href: '/liquidity/positions',
         },
         {
           label: t('Perpetual'),
@@ -113,15 +113,15 @@ const config: (
     },
     {
       label: t('Earn'),
-      href: '/farms',
+      href: '/liquidity/pools',
       icon: EarnIcon,
       fillIcon: EarnFillIcon,
       image: '/images/decorations/pe2.png',
       supportChainIds: SUPPORT_FARMS,
       items: [
         {
           label: t('Farms'),
-          href: '/farms',
+          href: '/liquidity/pools',
           supportChainIds: SUPPORT_FARMS,
         },
         {
@@ -130,7 +130,7 @@ const config: (
           supportChainIds: SUPPORT_CAKE_STAKING,
         },
         {
-          label: t('Pools'),
+          label: t('Syrup Pools'),
           href: '/pools',
           supportChainIds: POOL_SUPPORTED_CHAINS,
         },

apps/web/src/components/RangeTag.tsx

@@ -1,21 +1,24 @@
 import { useTranslation } from '@pancakeswap/localization'
 import { QuestionHelper, Tag, TagProps, Flex } from '@pancakeswap/uikit'
+import { styleVariants } from '@pancakeswap/uikit/components/Tag/theme'
 import { ReactNode } from 'react'
 
-export function RangeTag({
-  removed,
-  outOfRange,
-  children,
-  ...props
-}: { removed?: boolean; outOfRange: boolean; children?: ReactNode } & TagProps) {
+type IRangeTagType = {
+  removed?: boolean
+  outOfRange: boolean
+  children?: ReactNode
+  lowContrast?: boolean
+} & TagProps
+
+export function RangeTag({ removed, outOfRange, children, lowContrast = false, ...props }: IRangeTagType) {
   const { t } = useTranslation()
 
   return removed ? (
-    <Tag variant="textSubtle" {...props}>
+    <Tag variant={lowContrast ? 'tertiary' : 'textSubtle'} {...props}>
       {children || t('Closed')}
     </Tag>
   ) : outOfRange ? (
-    <Tag variant="failure" {...props}>
+    <Tag variant={lowContrast ? 'failureLowContrast' : 'failure'} {...props}>
       {children || (
         <Flex alignItems="center">
           {t('Inactive')}{' '}
@@ -27,14 +30,14 @@ export function RangeTag({
               'The position is inactive and not earning trading fees due to the current price being out of the set price range.',
             )}
             size="20px"
-            color="white"
+            color={styleVariants[lowContrast ? 'failureLowContrast' : 'failure'].color ?? 'white'}
             placement="bottom"
           />
         </Flex>
       )}
     </Tag>
   ) : (
-    <Tag variant="success" {...props}>
+    <Tag variant={lowContrast ? 'successLowContrast' : 'success'} {...props}>
       {children || t('Active')}
     </Tag>
   )

apps/web/src/components/TokenImage/index.tsx

@@ -1,16 +1,20 @@
 import { ChainId } from '@pancakeswap/chains'
-import { Token } from '@pancakeswap/sdk'
+import { Currency, Token } from '@pancakeswap/sdk'
 import {
   ImageProps,
   TokenImage as UIKitTokenImage,
   TokenPairImage as UIKitTokenPairImage,
+  TokenPairLogo as UIKitTokenPairLogo,
   TokenPairImageProps as UIKitTokenPairImageProps,
 } from '@pancakeswap/uikit'
+import uriToHttp from '@pancakeswap/utils/uriToHttp'
 import { ASSET_CDN } from 'config/constants/endpoints'
+import { useMemo } from 'react'
 
 interface TokenPairImageProps extends Omit<UIKitTokenPairImageProps, 'primarySrc' | 'secondarySrc'> {
-  primaryToken: Token
+  primaryToken: Currency
   secondaryToken: Token
+  withChainLogo?: boolean
 }
 
 export const tokenImageChainNameMapping = {
@@ -24,8 +28,8 @@ export const tokenImageChainNameMapping = {
   [ChainId.OPBNB]: 'opbnb/',
 }
 
-export const getImageUrlFromToken = (token: Token) => {
-  const address = token?.isNative ? token.wrapped.address : token?.address
+export const getImageUrlFromToken = (token: Currency) => {
+  const address = token?.isNative ? token.wrapped.address : token.address
 
   return token
     ? token?.isNative && token.chainId !== ChainId.BSC
@@ -34,15 +38,52 @@ export const getImageUrlFromToken = (token: Token) => {
     : ''
 }
 
+export const getImageUrlsFromToken = (token: Currency & { logoURI?: string | undefined }) => {
+  const uriLocations = token?.logoURI ? uriToHttp(token?.logoURI) : []
+  const address = token?.isNative ? token.wrapped.address : token.address
+  const imageUri = token
+    ? token?.isNative && token.chainId !== ChainId.BSC
+      ? `${ASSET_CDN}/web/native/${token.chainId}.png`
+      : `https://tokens.pancakeswap.finance/images/${tokenImageChainNameMapping[token.chainId]}${address}.png`
+    : ''
+  return [...uriLocations, imageUri]
+}
+
+export const getChainLogoUrlFromChainId = (chainId: number) =>
+  `https://assets.pancakeswap.finance/web/chains/${chainId}.png`
+
 export const TokenPairImage: React.FC<React.PropsWithChildren<TokenPairImageProps>> = ({
   primaryToken,
   secondaryToken,
+  withChainLogo = false,
   ...props
 }) => {
+  const chainLogo = withChainLogo ? getChainLogoUrlFromChainId(primaryToken.chainId) : undefined
   return (
     <UIKitTokenPairImage
       primarySrc={getImageUrlFromToken(primaryToken)}
       secondarySrc={getImageUrlFromToken(secondaryToken)}
+      chainLogoSrc={chainLogo}
+      {...props}
+    />
+  )
+}
+
+export const TokenPairLogo: React.FC<React.PropsWithChildren<TokenPairImageProps>> = ({
+  primaryToken,
+  secondaryToken,
+  withChainLogo = false,
+  ...props
+}) => {
+  const chainLogo = useMemo(
+    () => (withChainLogo ? [getChainLogoUrlFromChainId(primaryToken.chainId)] : []),
+    [withChainLogo, primaryToken.chainId],
+  )
+  return (
+    <UIKitTokenPairLogo
+      primarySrcs={getImageUrlsFromToken(primaryToken)}
+      secondarySrcs={getImageUrlsFromToken(secondaryToken)}
+      chainLogoSrcs={chainLogo}
       {...props}
     />
   )

apps/web/src/config/constants/index.ts

@@ -18,3 +18,14 @@ export const PREDICTION_TOOLTIP_DISMISS_KEY = 'prediction-switcher-dismiss-toolt
 export const GELATO_NATIVE = '0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE'
 
 export const EXCHANGE_HELP_URLS = 'https://docs.pancakeswap.finance/help'
+
+export const QUERY_SETTINGS_IMMUTABLE = {
+  refetchOnReconnect: false,
+  refetchOnMount: false,
+  refetchOnWindowFocus: false,
+}
+
+export const QUERY_SETTINGS_WITHOUT_INTERVAL_REFETCH = {
+  retry: 3,
+  retryDelay: 3000,
+}

apps/web/src/config/constants/lists.ts

@@ -3,13 +3,13 @@ import { ChainId } from '@pancakeswap/chains'
 export const PANCAKE_EXTENDED = 'https://tokens.pancakeswap.finance/pancakeswap-extended.json'
 
 const COINGECKO = 'https://tokens.pancakeswap.finance/coingecko.json'
-const PANCAKE_ETH_DEFAULT = 'https://tokens.pancakeswap.finance/pancakeswap-eth-default.json'
-const PANCAKE_ZKSYNC_DEFAULT = 'https://tokens.pancakeswap.finance/pancakeswap-zksync-default.json'
-const PANCAKE_POLYGON_ZKEVM_DEFAULT = 'https://tokens.pancakeswap.finance/pancakeswap-polygon-zkevm-default.json'
-const PANCAKE_ARB_DEFAULT = 'https://tokens.pancakeswap.finance/pancakeswap-arbitrum-default.json'
-const PANCAKE_LINEA_DEFAULT = 'https://tokens.pancakeswap.finance/pancakeswap-linea-default.json'
-const PANCAKE_BASE_DEFAULT = 'https://tokens.pancakeswap.finance/pancakeswap-base-default.json'
-const PANCAKE_OPBNB_DEFAULT = 'https://tokens.pancakeswap.finance/pancakeswap-opbnb-default.json'
+export const PANCAKE_ETH_DEFAULT = 'https://tokens.pancakeswap.finance/pancakeswap-eth-default.json'
+export const PANCAKE_ZKSYNC_DEFAULT = 'https://tokens.pancakeswap.finance/pancakeswap-zksync-default.json'
+export const PANCAKE_POLYGON_ZKEVM_DEFAULT = 'https://tokens.pancakeswap.finance/pancakeswap-polygon-zkevm-default.json'
+export const PANCAKE_ARB_DEFAULT = 'https://tokens.pancakeswap.finance/pancakeswap-arbitrum-default.json'
+export const PANCAKE_LINEA_DEFAULT = 'https://tokens.pancakeswap.finance/pancakeswap-linea-default.json'
+export const PANCAKE_BASE_DEFAULT = 'https://tokens.pancakeswap.finance/pancakeswap-base-default.json'
+export const PANCAKE_OPBNB_DEFAULT = 'https://tokens.pancakeswap.finance/pancakeswap-opbnb-default.json'
 
 export const PANCAKE_ETH_MM = 'https://tokens.pancakeswap.finance/pancakeswap-eth-mm.json'
 export const PANCAKE_BSC_MM = 'https://tokens.pancakeswap.finance/pancakeswap-bnb-mm.json'

apps/web/src/config/constants/meta.ts

@@ -27,7 +27,8 @@ const getPathList = (t: ContextApi['t']): PathList => {
       '/competition': { title: t('Trading Battle') },
       '/prediction': { title: t('Prediction'), image: `${ASSET_CDN}/web/og/prediction.jpg` },
       '/prediction/leaderboard': { title: t('Leaderboard'), image: `${ASSET_CDN}/web/og/liquidity.jpg` },
-      '/farms': { title: t('Farms'), image: `${ASSET_CDN}/web/og/farms.jpg` },
+      '/liquidity/pools': { title: t('Earn from LP'), image: `${ASSET_CDN}/web/og/farms.jpg` },
+      '/liquidity/positions': { title: t('My Positions'), image: `${ASSET_CDN}/web/og/farms.jpg` },
       '/farms/auction': { title: t('Farm Auctions'), image: `${ASSET_CDN}/web/og/liquidity.jpg` },
       '/pools': { title: t('Pools'), image: `${ASSET_CDN}/web/og/pools.jpg` },
       '/lottery': { title: t('Lottery'), image: `${ASSET_CDN}/web/og/lottery.jpg` },
@@ -46,6 +47,12 @@ const getPathList = (t: ContextApi['t']): PathList => {
         description: 'View statistics for Pancakeswap exchanges.',
         image: `${ASSET_CDN}/web/og/info.jpg`,
       },
+      '/liquidity/pool': {
+        basePath: true,
+        title: `${t('Pool Detail')}`,
+        description: 'View statistics for Pancakeswap pool.',
+        image: `${ASSET_CDN}/web/og/info.jpg`,
+      },
       '/info/tokens': {
         title: `${t('Tokens')} - ${t('Info')}`,
         description: 'View statistics for Pancakeswap exchanges.',

apps/web/src/config/index.ts

@@ -12,6 +12,7 @@ export const BSC_BLOCK_TIME = 3
 export const CAKE_PER_BLOCK = 40
 export const BLOCKS_PER_DAY = (60 / BSC_BLOCK_TIME) * 60 * 24
 export const BLOCKS_PER_YEAR = BLOCKS_PER_DAY * 365 // 10512000
+export const SECONDS_PER_YEAR = 31536000 // 60 * 60 * 24 * 365
 export const CAKE_PER_YEAR = CAKE_PER_BLOCK * BLOCKS_PER_YEAR
 export const BASE_URL = 'https://pancakeswap.finance'
 export const BASE_ADD_LIQUIDITY_URL = `${BASE_URL}/add`

apps/web/src/hooks/Tokens.ts

@@ -2,8 +2,10 @@
 import { ChainId } from '@pancakeswap/chains'
 import { ERC20Token } from '@pancakeswap/sdk'
 import { Currency, NativeCurrency } from '@pancakeswap/swap-sdk-core'
+import type { Address } from 'viem'
 
 import { TokenAddressMap } from '@pancakeswap/token-lists'
+import { useReadContracts } from '@pancakeswap/wagmi'
 import { GELATO_NATIVE } from 'config/constants'
 import { UnsafeCurrency } from 'config/constants/types'
 import { useAtomValue } from 'jotai'
@@ -16,9 +18,8 @@ import {
   useWarningTokenList,
 } from 'state/lists/hooks'
 import { safeGetAddress } from 'utils'
-import { useReadContracts } from '@pancakeswap/wagmi'
 import { erc20Abi } from 'viem'
-import useUserAddedTokens from '../state/user/hooks/useUserAddedTokens'
+import useUserAddedTokens, { useUserAddedTokensByChainIds } from '../state/user/hooks/useUserAddedTokens'
 import { useActiveChainId } from './useActiveChainId'
 import useNativeCurrency from './useNativeCurrency'
 
@@ -45,7 +46,7 @@ const mapWithoutUrlsBySymbol = (tokenMap?: TokenAddressMap<ChainId>, chainId?: n
 }
 
 /**
- * Returns all tokens that are from active urls and user added tokens
+ * Returns all tokens of activeChain that are from active urls and user added tokens
  */
 export function useAllTokens(): { [address: string]: ERC20Token } {
   const { chainId } = useActiveChainId()
@@ -73,6 +74,48 @@ export function useAllTokens(): { [address: string]: ERC20Token } {
   }, [userAddedTokens, tokenMap, chainId])
 }
 
+export type TokenChainAddressMap<TChainId extends number = number> = {
+  [chainId in TChainId]: {
+    [tokenAddress: Address]: ERC20Token
+  }
+}
+
+export function useTokensByChainIds(chainIds: number[], tokenMap: TokenAddressMap<ChainId>): TokenChainAddressMap {
+  const userAddedTokenMap = useUserAddedTokensByChainIds(chainIds)
+  return useMemo(() => {
+    return chainIds.reduce<TokenChainAddressMap>((tokenMap_, chainId) => {
+      tokenMap_[chainId] = tokenMap_[chainId] || {}
+      userAddedTokenMap[chainId].forEach((token) => {
+        const checksumAddress = safeGetAddress(token.address)
+        if (checksumAddress) {
+          tokenMap_[chainId][checksumAddress] = token
+        }
+      })
+      Object.keys(tokenMap[chainId] || {}).forEach((address) => {
+        const checksumAddress = safeGetAddress(address)
+        if (checksumAddress && !tokenMap_[chainId][checksumAddress]) {
+          tokenMap_[chainId][checksumAddress] = tokenMap[chainId][address].token
+        }
+      })
+
+      return tokenMap_
+    }, {})
+  }, [userAddedTokenMap, tokenMap, chainIds])
+}
+
+/**
+ * Returns all tokens that are from active urls and user added tokens
+ */
+export function useAllTokensByChainIds(chainIds: number[]): TokenChainAddressMap {
+  const allTokenMap = useAtomValue(combinedTokenMapFromActiveUrlsAtom)
+  return useTokensByChainIds(chainIds, allTokenMap)
+}
+
+export function useOfficialsAndUserAddedTokensByChainIds(chainIds: number[]): TokenChainAddressMap {
+  const tokenMap = useAtomValue(combinedTokenMapFromOfficialsUrlsAtom)
+  return useTokensByChainIds(chainIds, tokenMap)
+}
+
 export function useAllOnRampTokens(): { [address: string]: Currency } {
   const { chainId } = useActiveChainId()
   const tokenMap = useAtomValue(combinedCurrenciesMapFromActiveUrlsAtom)
@@ -146,17 +189,20 @@ export function useIsUserAddedToken(currency: Currency | undefined | null): bool
   return !!userAddedTokens.find((token) => currency?.equals(token))
 }
 
+export function useToken(tokenAddress?: string): ERC20Token | undefined | null {
+  const { chainId } = useActiveChainId()
+  return useTokenByChainId(tokenAddress, chainId)
+}
 // undefined if invalid or does not exist
 // null if loading
 // otherwise returns the token
-export function useToken(tokenAddress?: string): ERC20Token | undefined | null {
-  const { chainId } = useActiveChainId()
+export function useTokenByChainId(tokenAddress?: string, chainId?: number): ERC20Token | undefined | null {
   const unsupportedTokens = useUnsupportedTokens()
-  const tokens = useAllTokens()
+  const tokens = useAllTokensByChainIds(chainId ? [chainId] : [])
 
   const address = safeGetAddress(tokenAddress)
 
-  const token = address ? tokens[address] : undefined
+  const token: ERC20Token | undefined = address && chainId ? tokens[chainId][address] : undefined
 
   const { data, isLoading } = useReadContracts({
     allowFailure: false,