From a3c4996f569e265cf77d4f79eb972f576d029676 Mon Sep 17 00:00:00 2001
From: viet-nv <vietnv1304@gmail.com>
Date: Mon, 14 Aug 2023 17:13:10 +0700
Subject: [PATCH] add new static farm contract

---
 src/components/HorizontalScroll.tsx           |  1 -
 src/components/TradeRouting/index.tsx         |  4 +-
 src/constants/networks/matic.ts               |  6 +-
 .../ElasticFarmv2/components/FarmCard.tsx     |  6 +-
 .../ElasticFarmv2/components/ListView.tsx     | 81 ++++++++++---------
 5 files changed, 55 insertions(+), 43 deletions(-)

diff --git a/src/components/HorizontalScroll.tsx b/src/components/HorizontalScroll.tsx
index 25faa23795..45b94099d6 100644
--- a/src/components/HorizontalScroll.tsx
+++ b/src/components/HorizontalScroll.tsx
@@ -73,5 +73,4 @@ export default HorizontalScroll
 const TagContainer = styled(Flex)`
   align-items: center;
   gap: 4px;
-  flex: 1;
 `
diff --git a/src/components/TradeRouting/index.tsx b/src/components/TradeRouting/index.tsx
index 904e18abf1..ff0b8ebf6b 100644
--- a/src/components/TradeRouting/index.tsx
+++ b/src/components/TradeRouting/index.tsx
@@ -197,11 +197,11 @@ const Routing = ({ tradeComposition, maxHeight, inputAmount, outputAmount, curre
 }
 
 const TokenRoute = ({ token }: { token: Token }) => {
-  const currency = useCurrencyV2(token.address)
+  const currency = useCurrencyV2(token.wrapped.address)
   return (
     <StyledToken
       style={{ marginRight: 0 }}
-      href={getEtherscanLink(token.chainId, token?.address, 'token')}
+      href={getEtherscanLink(token.chainId, token?.wrapped.address, 'token')}
       target="_blank"
     >
       <CurrencyLogo currency={currency} size="16px" />
diff --git a/src/constants/networks/matic.ts b/src/constants/networks/matic.ts
index 331ea3dfe7..b0b30c262b 100644
--- a/src/constants/networks/matic.ts
+++ b/src/constants/networks/matic.ts
@@ -68,7 +68,11 @@ const maticInfo: EVMNetworkInfo = {
     routers: '0xF9c2b5746c946EF883ab2660BbbB1f10A5bdeAb4',
     farms: ['0x7D5ba536ab244aAA1EA42aB88428847F25E3E676'],
     farmv2Quoter: '0x6AFeb9EDd6Cf44fA8E89b1eee28284e6dD7705C8',
-    farmV2S: ['0xA70a1Ad0F91c52c79e177c5A18a7C9E1C4360e0e', '0x3D6AfE2fB73fFEd2E3dD00c501A174554e147a43'],
+    farmV2S: [
+      '0xA70a1Ad0F91c52c79e177c5A18a7C9E1C4360e0e',
+      '0x3D6AfE2fB73fFEd2E3dD00c501A174554e147a43',
+      '0xf2BcDf38baA52F6b0C1Db5B025DfFf01Ae1d6dBd',
+    ],
   },
   limitOrder: {
     development: '0x3C2E9227A6d3779e5b469E425CAa7067b40Ff124',
diff --git a/src/pages/Farm/ElasticFarmv2/components/FarmCard.tsx b/src/pages/Farm/ElasticFarmv2/components/FarmCard.tsx
index 8e9e2006e0..3ad2d138bc 100644
--- a/src/pages/Farm/ElasticFarmv2/components/FarmCard.tsx
+++ b/src/pages/Farm/ElasticFarmv2/components/FarmCard.tsx
@@ -34,6 +34,7 @@ import { useFarmV2Action, useUserFarmV2Info } from 'state/farms/elasticv2/hooks'
 import { ElasticFarmV2 } from 'state/farms/elasticv2/types'
 import { getFormattedTimeFromSecond } from 'utils/formatTime'
 import { formatDollarAmount } from 'utils/numbers'
+import { getTokenSymbolWithHardcode } from 'utils/tokenInfo'
 
 import { convertTickToPrice } from '../utils'
 
@@ -107,7 +108,7 @@ function FarmCard({
   isApproved: boolean
 }) {
   const theme = useTheme()
-  const { account, networkInfo } = useActiveWeb3React()
+  const { account, networkInfo, chainId } = useActiveWeb3React()
   const [activeRangeIndex, setActiveRangeIndex] = useState(farm.ranges[0].index)
 
   const [, setSharePoolAddress] = useShareFarmAddress()
@@ -213,7 +214,8 @@ function FarmCard({
                 }}
               >
                 <Text fontSize="16px" lineHeight="20px" color={theme.primary}>
-                  {`${farm.token0.symbol} - ${farm.token1.symbol}`}
+                  {getTokenSymbolWithHardcode(chainId, farm.token0.wrapped.address, farm.token0.symbol)} -{' '}
+                  {getTokenSymbolWithHardcode(chainId, farm.token1.wrapped.address, farm.token1.symbol)}
                 </Text>
               </Link>
               <IconButton>
diff --git a/src/pages/Farm/ElasticFarmv2/components/ListView.tsx b/src/pages/Farm/ElasticFarmv2/components/ListView.tsx
index 58913087ee..e002f9263b 100644
--- a/src/pages/Farm/ElasticFarmv2/components/ListView.tsx
+++ b/src/pages/Farm/ElasticFarmv2/components/ListView.tsx
@@ -19,7 +19,6 @@ import HorizontalScroll from 'components/HorizontalScroll'
 import HoverInlineText from 'components/HoverInlineText'
 import { TwoWayArrow } from 'components/Icons'
 import Harvest from 'components/Icons/Harvest'
-import { RowBetween } from 'components/Row'
 import { MouseoverTooltip, MouseoverTooltipDesktopOnly } from 'components/Tooltip'
 import TransactionConfirmationModal, { TransactionErrorContent } from 'components/TransactionConfirmationModal'
 import { ButtonColorScheme, MinimalActionButton } from 'components/YieldPools/ElasticFarmGroup/buttons'
@@ -154,11 +153,12 @@ export const ListView = ({
   const maxFarmAPR = Math.max(...farm.ranges.map(r => r.apr || 0))
 
   const mixpanelPayload = { farm_pool_address: farm.poolAddress, farm_id: farm.id, farm_fid: farm.fId }
+  const above1500 = useMedia('(min-width: 1500px)')
 
   return (
     <Wrapper isDeposited={!!stakedPos.length}>
-      <RowBetween gap="1rem">
-        <Flex alignItems="center" justifyContent="space-between">
+      <Flex justifyContent="space-between" sx={{ gap: '1rem' }}>
+        <Flex alignItems="center" justifyContent="space-between" width="max-content">
           <DoubleCurrencyLogo currency0={farm.token0} currency1={farm.token1} />
           <Link
             to={addliquidityElasticPool}
@@ -193,41 +193,48 @@ export const ListView = ({
           </Flex>
         </Flex>
 
-        <HorizontalScroll
-          style={{ gap: '8px', justifyContent: 'flex-end' }}
-          noShadow
-          items={['-1'].concat(farm.ranges.map(item => item.index.toString()))}
-          renderItem={(item, index) => {
-            if (item === '-1')
-              return (
-                <Text color={theme.subText} fontSize={12} fontWeight="500" marginRight="4px">
-                  <Trans>Available Farming Range</Trans>
-                </Text>
-              )
-            const range = farm.ranges.find(r => r.index === +item)
-            if (!range) return null
-            return (
-              <Flex
-                alignItems="center"
-                sx={{ gap: '2px' }}
-                color={range.isRemoved ? theme.warning : theme.subText}
-                fontSize={12}
-                fontWeight="500"
-              >
-                {convertTickToPrice(farm.token0, farm.token1, range.tickLower, farm.pool.fee)}
-                <TwoWayArrow />
-                {convertTickToPrice(farm.token0, farm.token1, range.tickUpper, farm.pool.fee)}
+        <Flex sx={{ gap: '8px' }} alignItems="center">
+          <Text color={theme.subText} fontSize={12} fontWeight="500" marginRight="4px">
+            <Trans>Available Farming Range</Trans>
+          </Text>
 
-                {index !== farm.ranges.length && (
-                  <Text paddingLeft="6px" color={theme.subText}>
-                    |
-                  </Text>
-                )}
-              </Flex>
-            )
-          }}
-        />
-      </RowBetween>
+          <div style={{ maxWidth: above1500 ? '900px' : 'calc(100vw - 500px)' }}>
+            <HorizontalScroll
+              style={{ gap: '8px' }}
+              noShadow
+              items={farm.ranges.map(item => item.index.toString())}
+              renderItem={(item, index) => {
+                const range = farm.ranges.find(r => r.index === +item)
+                if (!range) return null
+                return (
+                  <Flex
+                    alignItems="center"
+                    minWidth="fit-content"
+                    sx={{ gap: '2px' }}
+                    color={range.isRemoved ? theme.warning : theme.subText}
+                    fontSize={12}
+                    fontWeight="500"
+                  >
+                    <Text minWidth="max-content">
+                      {convertTickToPrice(farm.token0, farm.token1, range.tickLower, farm.pool.fee)}
+                    </Text>
+                    <TwoWayArrow />
+                    <Text minWidth="max-content">
+                      {convertTickToPrice(farm.token0, farm.token1, range.tickUpper, farm.pool.fee)}
+                    </Text>
+
+                    {index !== farm.ranges.length - 1 && (
+                      <Text paddingLeft="6px" color={theme.subText}>
+                        |
+                      </Text>
+                    )}
+                  </Flex>
+                )
+              }}
+            />
+          </div>
+        </Flex>
+      </Flex>
       <ElasticFarmV2TableRow>
         <Text textAlign="left">{formatDollarAmount(farm.tvl)}</Text>
         <Text