fix: 🐛 Fix the pool tvl display when amount > 1B (#10896)

<!--
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 introduces a new component, `PoolTvlWarning`, to display
warnings about TVL and APR data accuracy in the `PoolInfo` view. It also
updates localization strings to include a new warning message.

### Detailed summary
- Added `PoolTvlWarning` component in `PoolInfo.tsx`.
- Integrated `PoolTvlWarning` into the `PoolInfo` layout.
- Updated localization in `translations.json` to include:
  - New warning message about TVL and APR data.
  - Added context for users regarding the accuracy of data.

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

<!-- end pr-codex -->

apps/web/src/views/PoolDetail/components/PoolInfo.tsx

@@ -14,6 +14,7 @@ import { MyPositions } from './MyPositions'
 import { PoolCharts } from './PoolCharts'
 import { PoolCurrencies } from './PoolCurrencies'
 import { PoolStatus } from './PoolStatus'
+import { PoolTvlWarning } from './PoolTvlWarning'
 import { Transactions } from './Transactions/Transactions'
 
 const Header = styled.div`
@@ -112,6 +113,7 @@ export const PoolInfo = () => {
         <PoolCurrencies poolInfo={poolInfo} />
       </AutoRow>
 
+      <PoolTvlWarning poolInfo={poolInfo} />
       <Grid gridGap="24px" gridTemplateColumns={['1fr', '1fr', '1fr', '1fr 2fr']}>
         <PoolStatus poolInfo={poolInfo} />
         <PoolCharts poolInfo={poolInfo} />

apps/web/src/views/PoolDetail/components/PoolTvlWarning.tsx

@@ -0,0 +1,36 @@
+import { getChainName } from '@pancakeswap/chains'
+import { Protocol } from '@pancakeswap/farms'
+import { useTranslation } from '@pancakeswap/localization'
+import { Message, MessageText, Text } from '@pancakeswap/uikit'
+import { PoolInfo } from 'state/farmsV4/state/type'
+import { TextLink } from 'views/Ifos/components/IfoCardStyles'
+import { useRouterQuery } from '../hooks/useRouterQuery'
+
+const ONE_BILLION = 1_000_000_000
+export const PoolTvlWarning = ({ poolInfo }: { poolInfo: PoolInfo }) => {
+  const { t } = useTranslation()
+  const { id, chainId } = useRouterQuery()
+  const tvlUsd = parseFloat(poolInfo.tvlUsd ?? '0')
+  const { protocol } = poolInfo
+  const chain = getChainName(chainId)
+
+  const version = `${protocol === Protocol.V3 ? '/v3/' : ''}`
+  const stableSwap = `${protocol === Protocol.STABLE ? '?type=stableSwap' : ''}`
+  const link = `https://pancakeswap.finance/info/${version}${chain}/pairs/${id}${stableSwap}`
+  if (tvlUsd < ONE_BILLION) {
+    return null
+  }
+  return (
+    <Message my="24px" mx="24px" variant="warning">
+      <MessageText fontSize="17px">
+        <Text color="warning" as="span">
+          {t('TVL and APR data may not be reflected correctly due to technical limitation, please refer to')}{' '}
+          <TextLink target="_blank" href={link}>
+            {t('info page')}
+          </TextLink>{' '}
+          {t('for accurate values')}
+        </Text>
+      </MessageText>
+    </Message>
+  )
+}

packages/localization/src/config/translations.json

@@ -3582,5 +3582,8 @@
   "veCake Balance": "veCake Balance",
   "You cast your vote! Please wait until the voting ends to see the end results.": "You cast your vote! Please wait until the voting ends to see the end results.",
   "Not enough veCAKE": "Not enough veCAKE",
-  "Enter the votes to cast": "Enter the votes to cast"
+  "Enter the votes to cast": "Enter the votes to cast",
+  "TVL and APR data may not be reflected correctly due to technical limitation, please refer to": "TVL and APR data may not be reflected correctly due to technical limitation, please refer to",
+  "info page": "info page",
+  "for accurate values": "for accurate values"
 }