From bb349145e8f1132942fbe192da4e19bb530c5959 Mon Sep 17 00:00:00 2001
From: chef-ryan <ryan@pancakeswap.com>
Date: Thu, 31 Oct 2024 11:15:05 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=F0=9F=90=9B=20Fix=20the=20pool=20tvl=20?=
 =?UTF-8?q?display=20when=20amount=20>=201B=20(#10896)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

<!--
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 -->
---
 .../views/PoolDetail/components/PoolInfo.tsx  |  2 ++
 .../PoolDetail/components/PoolTvlWarning.tsx  | 36 +++++++++++++++++++
 .../localization/src/config/translations.json |  5 ++-
 3 files changed, 42 insertions(+), 1 deletion(-)
 create mode 100644 apps/web/src/views/PoolDetail/components/PoolTvlWarning.tsx

diff --git a/apps/web/src/views/PoolDetail/components/PoolInfo.tsx b/apps/web/src/views/PoolDetail/components/PoolInfo.tsx
index 1cf8a127d8f04..a72bdd8f5dda9 100644
--- a/apps/web/src/views/PoolDetail/components/PoolInfo.tsx
+++ b/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} />
diff --git a/apps/web/src/views/PoolDetail/components/PoolTvlWarning.tsx b/apps/web/src/views/PoolDetail/components/PoolTvlWarning.tsx
new file mode 100644
index 0000000000000..b87df3c30c18f
--- /dev/null
+++ b/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>
+  )
+}
diff --git a/packages/localization/src/config/translations.json b/packages/localization/src/config/translations.json
index 447ade9c6a011..874eda0bab492 100644
--- a/packages/localization/src/config/translations.json
+++ b/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"
 }