improve: farm ux (#1250)

KyberNetwork · Aug 16, 2022 · b3e599a · b3e599a
1 parent 7ff4020
commit b3e599a
Show file tree

Hide file tree

Showing 8 changed files with 96 additions and 32 deletions.
diff --git a/src/components/YieldPools/ProMMFarmGroup.tsx b/src/components/YieldPools/ProMMFarmGroup.tsx
@@ -4,7 +4,7 @@ import { Trans, t } from '@lingui/macro'
 import { BigNumber } from 'ethers'
 import { rgba } from 'polished'
 import React, { useCallback, useEffect, useMemo, useState } from 'react'
-import { Clock, Edit2, Minus, Plus } from 'react-feather'
+import { Edit2, Minus, Plus } from 'react-feather'
 import { useMedia } from 'react-use'
 import { Flex, Text } from 'rebass'
 import styled from 'styled-components'
@@ -295,6 +295,8 @@ const Row = ({
 
   const [showTargetVolInfo, setShowTargetVolInfo] = useState(false)
 
+  const amountCanStaked = (position?.amountUsd || 0) - (position?.stakedUsd || 0)
+
   if (!above1000)
     return (
       <>
@@ -330,15 +332,15 @@ const Row = ({
               {token0?.symbol} - {token1?.symbol}
             </Text>
 
-            {farm.startTime > currentTimestamp && (
+            {/* farm.startTime > currentTimestamp && (
               <MouseoverTooltip
                 text={'Starting In ' + getFormattedTimeFromSecond(farm.startTime - currentTimestamp)}
                 width="fit-content"
                 placement="top"
               >
                 <Clock size={14} style={{ marginLeft: '6px' }} />
               </MouseoverTooltip>
-            )}
+             ) */}
           </Flex>
 
           <Flex
@@ -431,9 +433,20 @@ const Row = ({
 
           <InfoRow>
             <Text color={theme.subText}>
-              <Trans>My Staked</Trans>
+              <Trans>My Deposit</Trans>
             </Text>
-            <Text>{!!position?.stakedUsd ? formatDollarAmount(position.stakedUsd) : '--'}</Text>
+
+            <Flex justifyContent="flex-end" color={!!amountCanStaked ? theme.warning : theme.text}>
+              {!!position?.amountUsd ? formatDollarAmount(position.amountUsd) : '--'}
+              {!!amountCanStaked && (
+                <InfoHelper
+                  color={theme.warning}
+                  text={t`You still have ${formatDollarAmount(
+                    amountCanStaked,
+                  )} liquidity to stake to earn more rewards`}
+                />
+              )}
+            </Flex>
           </InfoRow>
 
           <InfoRow>
@@ -464,7 +477,7 @@ const Row = ({
 
           <Flex sx={{ gap: '16px' }} marginTop="1.25rem">
             <ButtonPrimary
-              disabled={!isApprovedForAll || tab === 'ended'}
+              disabled={!isApprovedForAll || tab === 'ended' || !canStake}
               style={{ height: '36px', flex: 1 }}
               onClick={() => onOpenModal('stake', farm.pid)}
             >
@@ -543,21 +556,41 @@ const Row = ({
           )}
         </Flex>
 
-        <Text textAlign="right">{!!position?.stakedUsd ? formatDollarAmount(position.stakedUsd) : '--'}</Text>
+        <Flex justifyContent="flex-end" color={!!amountCanStaked ? theme.warning : theme.text}>
+          {!!position?.amountUsd ? formatDollarAmount(position.amountUsd) : '--'}
+          {!!amountCanStaked && (
+            <InfoHelper
+              color={theme.warning}
+              text={t`You still have ${formatDollarAmount(amountCanStaked)} liquidity to stake to earn more rewards`}
+            />
+          )}
+        </Flex>
+
         <Flex flexDirection="column" alignItems="flex-end" sx={{ gap: '8px' }}>
           {farm.rewardTokens.map((token, idx) => (
             <Reward key={token} token={token} amount={position?.rewardAmounts[idx]} />
           ))}
         </Flex>
         <Flex justifyContent="flex-end" sx={{ gap: '4px' }}>
-          <ActionButton
-            onClick={() => onOpenModal('stake', farm.pid)}
-            disabled={!isApprovedForAll || tab === 'ended' || !canStake}
-          >
-            <MouseoverTooltip text={!canStake ? t`Farm has not started` : t`Stake`} placement="top" width="fit-content">
-              <Plus color={isApprovedForAll && tab !== 'ended' ? theme.primary : theme.subText} size={16} />
+          {!isApprovedForAll || tab === 'ended' || !canStake ? (
+            <MouseoverTooltip text={t`Farm has not started`} placement="top" width="fit-content">
+              <ActionButton
+                style={{
+                  cursor: 'not-allowed',
+                  backgroundColor: theme.buttonGray,
+                  opacity: 0.4,
+                }}
+              >
+                <Plus color={theme.subText} size={16} style={{ minWidth: '16px' }} />
+              </ActionButton>
             </MouseoverTooltip>
-          </ActionButton>
+          ) : (
+            <ActionButton onClick={() => onOpenModal('stake', farm.pid)}>
+              <MouseoverTooltip text={t`Stake`} placement="top" width="fit-content">
+                <Plus color={theme.primary} size={16} />
+              </MouseoverTooltip>
+            </ActionButton>
+          )}
 
           <ActionButton
             disabled={!canUnstake}
@@ -735,7 +768,7 @@ function ProMMFarmGroup({
             <Text fontSize="12px" color={theme.subText}>
               <Trans>Deposited Liquidity</Trans>
               <InfoHelper
-                text={t`Dollar value of NFT tokens you've deposited. NFT tokens represent your liquidity position`}
+                text={t`Total value of the liquidity positions you've deposited. NFT tokens represent your liquidity positions`}
               ></InfoHelper>
             </Text>
 

diff --git a/src/components/YieldPools/ProMMFarms.tsx b/src/components/YieldPools/ProMMFarms.tsx
@@ -249,7 +249,7 @@ function ProMMFarms({ active }: { active: boolean }) {
 
           <Flex grid-area="staked_balance" alignItems="center" justifyContent="flex-end">
             <ClickableText>
-              <Trans>My Staked</Trans>
+              <Trans>My Deposit</Trans>
             </ClickableText>
           </Flex>
 

diff --git a/src/pages/Pool/index.tsx b/src/pages/Pool/index.tsx
@@ -118,7 +118,10 @@ export const FilterRow = styled(Flex)`
   ${({ theme }) => theme.mediaWidth.upToSmall`
     align-items: flex-start;
     flex-direction: column-reverse;
-    >div {
+    gap: 0;
+
+    > div {
+      margin-top: 12px;
       width: 100%
       justify-content: space-between
       &:nth-child(1){

diff --git a/src/pages/Pools/InstructionAndGlobalData.tsx b/src/pages/Pools/InstructionAndGlobalData.tsx
@@ -54,6 +54,10 @@ const DetailWrapper = styled.div<{ isOpen?: boolean }>`
 
 const DetailWrapperClassic = styled(DetailWrapper)`
   grid-template-columns: 1fr 1fr 1fr;
+
+  ${({ theme }) => theme.mediaWidth.upToMedium`
+      grid-template-columns: 1fr;
+  `}
 `
 const DetailItem = styled.div`
   border-radius: 20px;

diff --git a/src/pages/Pools/index.tsx b/src/pages/Pools/index.tsx
@@ -1,6 +1,6 @@
 import { Currency } from '@kyberswap/ks-sdk-core'
 import { Trans, t } from '@lingui/macro'
-import React, { useCallback, useMemo, useState } from 'react'
+import { useCallback, useMemo, useState } from 'react'
 import { Link, RouteComponentProps } from 'react-router-dom'
 import { useMedia } from 'react-use'
 import { Flex, Text } from 'rebass'

diff --git a/src/pages/ProAmmPools/CardItem.tsx b/src/pages/ProAmmPools/CardItem.tsx
@@ -1,7 +1,7 @@
 import { ChainId, Token, WETH } from '@kyberswap/ks-sdk-core'
 import { Trans, t } from '@lingui/macro'
 import { rgba } from 'polished'
-import React, { useState } from 'react'
+import { useState } from 'react'
 import { ChevronUp, Share2 } from 'react-feather'
 import { Link } from 'react-router-dom'
 import { Flex, Text } from 'rebass'
@@ -18,12 +18,13 @@ import { ELASTIC_BASE_FEE_UNIT, PROMM_ANALYTICS_URL } from 'constants/index'
 import { nativeOnChain } from 'constants/tokens'
 import { VERSION } from 'constants/v2'
 import { useActiveWeb3React } from 'hooks'
+import { useAllTokens } from 'hooks/Tokens'
 import useTheme from 'hooks/useTheme'
 import { IconWrapper } from 'pages/Pools/styleds'
 import { useProMMFarms } from 'state/farms/promm/hooks'
 import { ProMMPoolData } from 'state/prommPools/hooks'
 import { ExternalLink } from 'theme'
-import { shortenAddress } from 'utils'
+import { isAddressString, shortenAddress } from 'utils'
 import { formatDollarAmount } from 'utils/numbers'
 
 interface ListItemProps {
@@ -70,9 +71,14 @@ export default function ProAmmPoolCardItem({ pair, onShared, userPositions, idx
   const theme = useTheme()
   const [isOpen, setIsOpen] = useState(true)
 
+  const allTokens = useAllTokens()
   const { data: farms } = useProMMFarms()
-  const token0 = new Token(chainId as ChainId, pair[0].token0.address, pair[0].token0.decimals, pair[0].token0.symbol)
-  const token1 = new Token(chainId as ChainId, pair[0].token1.address, pair[0].token1.decimals, pair[0].token1.symbol)
+  const token0 =
+    allTokens[isAddressString(pair[0].token0.address)] ||
+    new Token(chainId as ChainId, pair[0].token0.address, pair[0].token0.decimals, pair[0].token0.symbol)
+  const token1 =
+    allTokens[isAddressString(pair[0].token1.address)] ||
+    new Token(chainId as ChainId, pair[0].token1.address, pair[0].token1.decimals, pair[0].token1.symbol)
 
   const token0Address =
     token0.address.toLowerCase() === WETH[chainId as ChainId].address.toLowerCase()

diff --git a/src/pages/ProAmmPools/ListItem.tsx b/src/pages/ProAmmPools/ListItem.tsx
@@ -1,7 +1,7 @@
 import { ChainId, Token, WETH } from '@kyberswap/ks-sdk-core'
 import { Trans, t } from '@lingui/macro'
 import { rgba } from 'polished'
-import React, { useState } from 'react'
+import { useState } from 'react'
 import { BarChart2, ChevronUp, Plus, Share2 } from 'react-feather'
 import { Link } from 'react-router-dom'
 import { Flex, Text } from 'rebass'
@@ -17,13 +17,14 @@ import { ELASTIC_BASE_FEE_UNIT, PROMM_ANALYTICS_URL } from 'constants/index'
 import { nativeOnChain } from 'constants/tokens'
 import { VERSION } from 'constants/v2'
 import { useActiveWeb3React } from 'hooks'
+import { useAllTokens } from 'hooks/Tokens'
 import useMixpanel, { MIXPANEL_TYPE } from 'hooks/useMixpanel'
 import useTheme from 'hooks/useTheme'
 import { ButtonIcon } from 'pages/Pools/styleds'
 import { useProMMFarms } from 'state/farms/promm/hooks'
 import { ProMMPoolData } from 'state/prommPools/hooks'
 import { ExternalLink } from 'theme'
-import { shortenAddress } from 'utils'
+import { isAddressString, shortenAddress } from 'utils'
 import { formatDollarAmount } from 'utils/numbers'
 
 import { ReactComponent as ViewPositionIcon } from '../../assets/svg/view_positions.svg'
@@ -93,8 +94,14 @@ export default function ProAmmPoolListItem({ pair, idx, onShared, userPositions,
   const theme = useTheme()
   const [isOpen, setIsOpen] = useState(pair.length > 1 ? idx === 0 : false)
 
-  const token0 = new Token(chainId as ChainId, pair[0].token0.address, pair[0].token0.decimals, pair[0].token0.symbol)
-  const token1 = new Token(chainId as ChainId, pair[0].token1.address, pair[0].token1.decimals, pair[0].token1.symbol)
+  const allTokens = useAllTokens()
+
+  const token0 =
+    allTokens[isAddressString(pair[0].token0.address)] ||
+    new Token(chainId as ChainId, pair[0].token0.address, pair[0].token0.decimals, pair[0].token0.symbol)
+  const token1 =
+    allTokens[isAddressString(pair[0].token1.address)] ||
+    new Token(chainId as ChainId, pair[0].token1.address, pair[0].token1.decimals, pair[0].token1.symbol)
 
   const { data: farms } = useProMMFarms()
 
@@ -115,7 +122,7 @@ export default function ProAmmPoolListItem({ pair, idx, onShared, userPositions,
         const token0Symbol =
           pool.token0.address === WETH[chainId as ChainId].address.toLowerCase()
             ? nativeOnChain(chainId as ChainId).symbol
-            : pool.token0.symbol
+            : token0.symbol
 
         const token1Address =
           pool.token1.address === WETH[chainId as ChainId].address.toLowerCase()
@@ -124,7 +131,7 @@ export default function ProAmmPoolListItem({ pair, idx, onShared, userPositions,
         const token1Symbol =
           pool.token1.address === WETH[chainId as ChainId].address.toLowerCase()
             ? nativeOnChain(chainId as ChainId).symbol
-            : pool.token1.symbol
+            : token1.symbol
 
         const isFarmingPool = Object.values(farms)
           .flat()

diff --git a/src/state/farms/promm/hooks.ts b/src/state/farms/promm/hooks.ts
@@ -450,7 +450,7 @@ export const useProMMFarmTVL = (fairlaunchAddress: string, pid: number) => {
   const dataClient = NETWORKS_INFO[chainId || ChainId.MAINNET].elasticClient
   const { block24 } = usePoolBlocks()
 
-  const { data } = useQuery<Response>(PROMM_JOINED_POSITION(fairlaunchAddress.toLowerCase(), pid, block24), {
+  const { data, loading } = useQuery<Response>(PROMM_JOINED_POSITION(fairlaunchAddress.toLowerCase(), pid, block24), {
     client: dataClient,
     fetchPolicy: 'cache-first',
   })
@@ -479,7 +479,16 @@ export const useProMMFarmTVL = (fairlaunchAddress: string, pid: number) => {
 
   const ethPriceUSD = useETHPrice(VERSION.ELASTIC)
 
-  return useMemo(() => {
+  const [farmData, setData] = useState({
+    tvl: 0,
+    poolAPY: 0,
+    farmAPR: 0,
+  })
+
+  useEffect(() => {
+    if (loading || !Object.values(priceMap).length || (farmData.tvl && farmData.poolAPY && farmData.farmAPR)) {
+      return
+    }
     let tvl = 0
     data?.joinedPositions.forEach(({ position, pool }) => {
       const token0 = new Token(chainId as ChainId, pool.token0.id, Number(pool.token0.decimals), pool.token0.symbol)
@@ -529,6 +538,8 @@ export const useProMMFarmTVL = (fairlaunchAddress: string, pid: number) => {
           Number(data?.farmingPool?.pool?.totalValueLockedUSD || 1)
         : 0
 
-    return { tvl, farmAPR, poolAPY }
-  }, [chainId, data, ethPriceUSD.currentPrice, priceMap])
+    setData({ tvl, farmAPR, poolAPY })
+  }, [chainId, data, ethPriceUSD.currentPrice, priceMap, loading, farmData.poolAPY, farmData.tvl, farmData.farmAPR])
+
+  return { ...farmData }
 }