update UI

KyberNetwork · Sep 20, 2023 · 719c08c · 719c08c
1 parent eb4c2f3
commit 719c08c
Show file tree

Hide file tree

Showing 10 changed files with 77 additions and 46 deletions.
diff --git a/package.json b/package.json
@@ -21,7 +21,7 @@
     "i18n": "yarn i18n:extract && yarn i18n:compile",
     "i18n:compile": "lingui compile",
     "i18n:extract": "lingui extract",
-    "lint": "eslint --ext ts,tsx src",
+    "lint": "eslint \"./src/**/*.{ts,tsx}\"",
     "start": "vite --mode production --host",
     "start-adpr": "vite --mode adpr --host",
     "start-dev": "vite --mode dev --host",

diff --git a/src/assets/svg/partner-farm.svg b/src/assets/svg/partner-farm.svg
diff --git a/src/components/YieldPools/ElasticFarmGroup/FarmCard.tsx b/src/components/YieldPools/ElasticFarmGroup/FarmCard.tsx
@@ -17,6 +17,7 @@ import { Swap as SwapIcon } from 'components/Icons'
 import Harvest from 'components/Icons/Harvest'
 import InfoHelper from 'components/InfoHelper'
 import { MouseoverTooltip } from 'components/Tooltip'
+import { PartnerFarmTag } from 'components/YieldPools/PartnerFarmTag'
 import { APP_PATHS, ELASTIC_BASE_FEE_UNIT } from 'constants/index'
 import { TOBE_EXTENDED_FARMING_POOLS } from 'constants/v2'
 import { useActiveWeb3React } from 'hooks'
@@ -125,6 +126,7 @@ const FarmCard = ({
               </Link>
 
               <FeeTag style={{ fontSize: '12px' }}>FEE {(pool.pool.fee * 100) / ELASTIC_BASE_FEE_UNIT}%</FeeTag>
+              <PartnerFarmTag farmPoolAddress={pool.poolAddress} />
             </Flex>
 
             <Flex sx={{ gap: '4px' }}>

diff --git a/src/components/YieldPools/ElasticFarmGroup/Row.tsx b/src/components/YieldPools/ElasticFarmGroup/Row.tsx
@@ -18,6 +18,7 @@ import { MoneyBag, Swap2 as SwapIcon } from 'components/Icons'
 import Harvest from 'components/Icons/Harvest'
 import InfoHelper from 'components/InfoHelper'
 import { MouseoverTooltip, MouseoverTooltipDesktopOnly } from 'components/Tooltip'
+import { PartnerFarmTag } from 'components/YieldPools/PartnerFarmTag'
 import { APP_PATHS, ELASTIC_BASE_FEE_UNIT } from 'constants/index'
 import { NETWORKS_INFO, isEVM } from 'constants/networks'
 import { TOBE_EXTENDED_FARMING_POOLS } from 'constants/v2'
@@ -342,8 +343,10 @@ const Row = ({
                 </MouseoverTooltip>
               </Link>
             </Text>
-
-            <FeeTag>FEE {(farmingPool.pool.fee * 100) / ELASTIC_BASE_FEE_UNIT}%</FeeTag>
+            <Flex flexDirection="column" sx={{ gap: '8px' }}>
+              <FeeTag>FEE {(farmingPool.pool.fee * 100) / ELASTIC_BASE_FEE_UNIT}%</FeeTag>
+              <PartnerFarmTag farmPoolAddress={farmingPool.poolAddress} />
+            </Flex>
           </Flex>
 
           <Flex

diff --git a/src/components/YieldPools/ElasticFarmGroup/index.tsx b/src/components/YieldPools/ElasticFarmGroup/index.tsx
@@ -15,7 +15,7 @@ import CurrencyLogo from 'components/CurrencyLogo'
 import HoverDropdown from 'components/HoverDropdown'
 import InfoHelper from 'components/InfoHelper'
 import { MouseoverTooltip, MouseoverTooltipDesktopOnly, TextDashed } from 'components/Tooltip'
-import { FARM_TAB, FRAX_FARMS, ZERO_ADDRESS } from 'constants/index'
+import { FARM_TAB, ZERO_ADDRESS } from 'constants/index'
 import { NETWORKS_INFO, isEVM } from 'constants/networks'
 import { useActiveWeb3React } from 'hooks'
 import { useProAmmNFTPositionManagerContract } from 'hooks/useContract'
@@ -661,9 +661,6 @@ const ProMMFarmGroup: React.FC<Props> = ({ address, onOpenModal, pools, userInfo
       )
     })
   }
-  const hasFraxFarm = runningFarms.some(farm =>
-    FRAX_FARMS[chainId]?.map(address => address.toLowerCase()).includes(farm.poolAddress.toLowerCase()),
-  )
 
   return (
     <FarmContent data-testid="farm-block">
@@ -720,19 +717,6 @@ const ProMMFarmGroup: React.FC<Props> = ({ address, onOpenModal, pools, userInfo
               <Trans>Active Farms</Trans>
             </Text>
           )}
-          {hasFraxFarm && (
-            <Text fontSize={12} lineHeight="16px" fontWeight={400} color={theme.text} marginX="1.5rem" marginY="16px">
-              <Trans>
-                KyberSwap Frax farms do not currently receive KNC incentives. They are continuously available for
-                staking so that users can participate in KyberSwap Frax gauges to earn FXS emissions. The amount of FXS
-                emissions depends on the results of each weekly Frax gauge voting cycle. More info:{' '}
-                <ExternalLink href="https://app.frax.finance/gauge">https://app.frax.finance/gauge</ExternalLink> and{' '}
-                <ExternalLink href="https://docs.frax.finance/vefxs/gauge">
-                  https://docs.frax.finance/vefxs/gauge
-                </ExternalLink>
-              </Trans>
-            </Text>
-          )}
 
           <FarmList gridMode={viewMode === VIEW_MODE.GRID || !above1000}>
             {above1000 && viewMode === VIEW_MODE.LIST && renderTableHeaderOnDesktop()}

diff --git a/src/components/YieldPools/PartnerFarmTag.tsx b/src/components/YieldPools/PartnerFarmTag.tsx
@@ -0,0 +1,39 @@
+import { Trans } from '@lingui/macro'
+
+import { ReactComponent as PartnerFarmSvg } from 'assets/svg/partner-farm.svg'
+import { MouseoverTooltip } from 'components/Tooltip'
+import { FeeTag } from 'components/YieldPools/ElasticFarmGroup/styleds'
+import { FRAX_FARMS } from 'constants/index'
+import { useActiveWeb3React } from 'hooks'
+import { ExternalLink } from 'theme'
+
+export const PartnerFarmTag = ({ farmPoolAddress }: { farmPoolAddress: string }) => {
+  const { chainId } = useActiveWeb3React()
+  const isFraxFarm = FRAX_FARMS[chainId]?.map(address => address.toLowerCase()).includes(farmPoolAddress.toLowerCase())
+  if (!isFraxFarm) return null
+
+  return (
+    <div style={{ cursor: 'pointer' }}>
+      <MouseoverTooltip
+        text={
+          <Trans>
+            KyberSwap Frax farms do not currently receive KNC incentives. They are continuously available for staking so
+            that users can participate in KyberSwap Frax gauges to earn FXS emissions. The amount of FXS emissions
+            depends on the results of each weekly Frax gauge voting cycle. More info:{' '}
+            <ExternalLink href="https://app.frax.finance/gauge">https://app.frax.finance/gauge</ExternalLink> and{' '}
+            <ExternalLink href="https://docs.frax.finance/vefxs/gauge">
+              https://docs.frax.finance/vefxs/gauge
+            </ExternalLink>
+          </Trans>
+        }
+        placement="top"
+        width="300px"
+      >
+        <FeeTag>
+          <PartnerFarmSvg />
+          Partner Farm
+        </FeeTag>
+      </MouseoverTooltip>
+    </div>
+  )
+}
diff --git a/src/components/YieldPools/styleds.tsx b/src/components/YieldPools/styleds.tsx
@@ -206,7 +206,7 @@ export const TableHeader = styled.div<{ fade?: boolean; oddRow?: boolean }>`
 
 export const ProMMFarmTableHeader = styled(TableHeader)`
   padding: 16px;
-  grid-template-columns: 230px 0.5fr 0.5fr 1fr 1fr 0.75fr 120px;
+  grid-template-columns: 280px 0.5fr 0.5fr 1fr 1fr 0.75fr 120px;
   grid-template-areas: 'token_pairs staked_tvl apr ending_in my_deposit reward action';
   grid-gap: 2rem;
 
@@ -215,7 +215,7 @@ export const ProMMFarmTableHeader = styled(TableHeader)`
   background-color: ${({ theme }) => theme.buttonGray};
 
   ${({ theme }) => theme.mediaWidth.upToLarge`
-    grid-template-columns: 170px 0.5fr 0.75fr 1fr 1fr 0.75fr 120px;
+    grid-template-columns: 250px 0.5fr 0.75fr 1fr 1fr 0.75fr 120px;
     grid-gap: 1rem;
   `};
 `

diff --git a/src/pages/Farm/ElasticFarmv2/components/FarmCard.tsx b/src/pages/Farm/ElasticFarmv2/components/FarmCard.tsx
@@ -26,6 +26,7 @@ import { MouseoverTooltip } from 'components/Tooltip'
 import TransactionConfirmationModal, { TransactionErrorContent } from 'components/TransactionConfirmationModal'
 import { FeeTag } from 'components/YieldPools/ElasticFarmGroup/styleds'
 import { APRTooltipContent } from 'components/YieldPools/FarmingPoolAPRCell'
+import { PartnerFarmTag } from 'components/YieldPools/PartnerFarmTag'
 import { APP_PATHS, ELASTIC_BASE_FEE_UNIT } from 'constants/index'
 import { useActiveWeb3React } from 'hooks'
 import useTheme from 'hooks/useTheme'
@@ -229,10 +230,12 @@ function FarmCard({
                 <Share2 size={14} fill="currentcolor" />
               </IconButton>
             </RowFit>
-
-            <FeeTag style={{ marginLeft: 0 }}>
-              FEE {farm?.pool?.fee ? (farm?.pool?.fee * 100) / ELASTIC_BASE_FEE_UNIT : 0.03}%
-            </FeeTag>
+            <Flex flexDirection="row">
+              <FeeTag style={{ marginLeft: 0 }}>
+                FEE {farm?.pool?.fee ? (farm?.pool?.fee * 100) / ELASTIC_BASE_FEE_UNIT : 0.03}%
+              </FeeTag>
+              <PartnerFarmTag farmPoolAddress={farm.poolAddress} />
+            </Flex>
           </Flex>
 
           <DoubleCurrencyLogo size={44} currency0={farm.token0} currency1={farm.token1} />

diff --git a/src/pages/Farm/ElasticFarmv2/components/ListView.tsx b/src/pages/Farm/ElasticFarmv2/components/ListView.tsx
@@ -23,6 +23,7 @@ import { MouseoverTooltip, MouseoverTooltipDesktopOnly } from 'components/Toolti
 import TransactionConfirmationModal, { TransactionErrorContent } from 'components/TransactionConfirmationModal'
 import { ButtonColorScheme, MinimalActionButton } from 'components/YieldPools/ElasticFarmGroup/buttons'
 import { FeeTag } from 'components/YieldPools/ElasticFarmGroup/styleds'
+import { PartnerFarmTag } from 'components/YieldPools/PartnerFarmTag'
 import { ElasticFarmV2TableRow } from 'components/YieldPools/styleds'
 import { APP_PATHS, ELASTIC_BASE_FEE_UNIT } from 'constants/index'
 import { useActiveWeb3React } from 'hooks'
@@ -171,7 +172,6 @@ export const ListView = ({
               {getTokenSymbolWithHardcode(chainId, farm.token1.wrapped.address, farm.token1.symbol)}
             </Text>
           </Link>
-
           <FeeTag>FEE {(farm.pool.fee * 100) / ELASTIC_BASE_FEE_UNIT}%</FeeTag>
 
           <Flex color={theme.subText} marginLeft="0.25rem">
@@ -191,6 +191,7 @@ export const ListView = ({
           >
             <Share2 size="14px" color={theme.subText} />
           </Flex>
+          <PartnerFarmTag farmPoolAddress={farm.poolAddress} />
         </Flex>
 
         <Flex sx={{ gap: '8px' }} alignItems="center">

diff --git a/src/pages/Farm/ElasticFarmv2/index.tsx b/src/pages/Farm/ElasticFarmv2/index.tsx
@@ -19,7 +19,6 @@ import { MouseoverTooltip, MouseoverTooltipDesktopOnly, TextDashed } from 'compo
 import { ConnectWalletButton } from 'components/YieldPools/ElasticFarmGroup/buttons'
 import { FarmList } from 'components/YieldPools/ElasticFarmGroup/styleds'
 import { ClickableText, ElasticFarmV2TableHeader } from 'components/YieldPools/styleds'
-import { FRAX_FARMS } from 'constants/index'
 import { useActiveWeb3React } from 'hooks'
 import { useProAmmNFTPositionManagerContract } from 'hooks/useContract'
 import useTheme from 'hooks/useTheme'
@@ -32,7 +31,7 @@ import useGetElasticPools from 'state/prommPools/useGetElasticPools'
 import { useIsTransactionPending } from 'state/transactions/hooks'
 import { useViewMode } from 'state/user/hooks'
 import { VIEW_MODE } from 'state/user/reducer'
-import { ExternalLink, MEDIA_WIDTHS } from 'theme'
+import { MEDIA_WIDTHS } from 'theme'
 import { formatDollarAmount } from 'utils/numbers'
 
 import FarmCard from './components/FarmCard'
@@ -66,7 +65,7 @@ export default function ElasticFarmv2({
   farmAddress: string
 }) {
   const theme = useTheme()
-  const { account, chainId } = useActiveWeb3React()
+  const { account } = useActiveWeb3React()
   const above1000 = useMedia('(min-width: 1000px)')
   const upToSmall = useMedia(`(max-width: ${MEDIA_WIDTHS.upToSmall}px)`)
 
@@ -415,9 +414,6 @@ export default function ElasticFarmv2({
   if (!filteredFarms?.length) return null
 
   const listMode = above1000 && viewMode === VIEW_MODE.LIST
-  const hasFraxFarm = filteredFarms.some(farm =>
-    FRAX_FARMS[chainId]?.map(address => address.toLowerCase()).includes(farm.poolAddress.toLowerCase()),
-  )
 
   return (
     <Wrapper>
@@ -444,19 +440,6 @@ export default function ElasticFarmv2({
         {renderApproveButton()}
       </Flex>
       <Divider />
-      {hasFraxFarm && (
-        <Text fontSize={12} lineHeight="16px" fontWeight={400} color={theme.text}>
-          <Trans>
-            KyberSwap Frax farms do not currently receive KNC incentives. They are continuously available for staking so
-            that users can participate in KyberSwap Frax gauges to earn FXS emissions. The amount of FXS emissions
-            depends on the results of each weekly Frax gauge voting cycle. More info:{' '}
-            <ExternalLink href="https://app.frax.finance/gauge">https://app.frax.finance/gauge</ExternalLink> and{' '}
-            <ExternalLink href="https://docs.frax.finance/vefxs/gauge">
-              https://docs.frax.finance/vefxs/gauge
-            </ExternalLink>
-          </Trans>
-        </Text>
-      )}
       <FarmList
         gridMode={viewMode === VIEW_MODE.GRID || !above1000}
         style={{ margin: '0', paddingBottom: viewMode === VIEW_MODE.GRID ? '12px' : '0' }}