Tooltip adjustments (pancakeswap#1072)

* refactor: Use options object for useTooltip * fix: Various tooltip adjustments * chore: Update UIKit to 0.29.3 * fix: Add translation strings
georgexiaz · May 3, 2021 · 24e7242 · 24e7242
1 parent a1205e5
commit 24e7242
Show file tree

Hide file tree

Showing 20 changed files with 88 additions and 73 deletions.
diff --git a/package.json b/package.json
@@ -35,7 +35,7 @@
     "@binance-chain/bsc-connector": "^1.0.0",
     "@crowdin/crowdin-api-client": "^1.10.4",
     "@ethersproject/abi": "^5.0.7",
-    "@pancakeswap-libs/uikit": "^0.29.2",
+    "@pancakeswap-libs/uikit": "^0.29.3",
     "@reduxjs/toolkit": "^1.5.0",
     "@types/react": "^17.0.2",
     "@types/react-dom": "^17.0.1",

diff --git a/src/components/Timer/index.tsx b/src/components/Timer/index.tsx
@@ -65,7 +65,9 @@ const Wrapper: React.FC<TimerProps> = ({
   HeadingTextComponent = DefaultHeadingTextComponent,
   BodyTextComponent = DefaultBodyTextComponent,
 }) => {
-  const { targetRef, tooltip, tooltipVisible } = useTooltip(<TooltipContent blockNumber={blockNumber} />, 'bottom')
+  const { targetRef, tooltip, tooltipVisible } = useTooltip(<TooltipContent blockNumber={blockNumber} />, {
+    placement: 'bottom',
+  })
   const shouldDisplayTooltip = showTooltip && tooltipVisible
   return (
     <Flex alignItems="flex-end" position="relative">

diff --git a/src/config/localization/translations.json b/src/config/localization/translations.json
@@ -323,5 +323,13 @@
   "%amount% CAKE": "%amount% CAKE",
   "IFO Shopper: %title%": "IFO Shopper: %title%",
   "%num% of total": "%num% of total",
-  "All estimated rates take into account this pool's %fee%% performance fee": "All estimated rates take into account this pool's %fee%% performance fee"
+  "All estimated rates take into account this pool's %fee%% performance fee": "All estimated rates take into account this pool's %fee%% performance fee",
+  "Sorry, you didn’t contribute enough LP tokens to meet the minimum threshold. You didn’t buy anything in this sale, but you can still reclaim your LP tokens.": "Sorry, you didn’t contribute enough LP tokens to meet the minimum threshold. You didn’t buy anything in this sale, but you can still reclaim your LP tokens.",
+  "Only applies within 3 days of staking. Unstaking after 3 days will not include a fee. Timer resets every time you stake new CAKE in the pool.": "Only applies within 3 days of staking. Unstaking after 3 days will not include a fee. Timer resets every time you stake new CAKE in the pool.",
+  "unstaking fee until": "unstaking fee until",
+  "unstaking fee if withdrawn within 72h": "unstaking fee if withdrawn within 72h",
+  "Unstaking fee: %fee%%": "Unstaking fee: %fee%%",
+  "Performance Fee": "Performance Fee",
+  "Compound: collect and restake CAKE into pool.": "Compound: collect and restake CAKE into pool.",
+  "Harvest: collect CAKE and send to wallet": "Harvest: collect CAKE and send to wallet"
 }
diff --git a/src/views/Farms/components/FarmTable/Liquidity.tsx b/src/views/Farms/components/FarmTable/Liquidity.tsx
@@ -38,11 +38,7 @@ const Liquidity: React.FunctionComponent<LiquidityProps> = ({ liquidity }) => {
   const { t } = useTranslation()
   const { targetRef, tooltip, tooltipVisible } = useTooltip(
     t('The total value of the funds in this farm’s liquidity pool'),
-    'top-end',
-    'hover',
-    undefined,
-    undefined,
-    [20, 10],
+    { placement: 'top-end', tooltipOffset: [20, 10] },
   )
 
   return (

diff --git a/src/views/Farms/components/FarmTable/Multiplier.tsx b/src/views/Farms/components/FarmTable/Multiplier.tsx
@@ -39,10 +39,10 @@ const Multiplier: React.FunctionComponent<MultiplierProps> = ({ multiplier }) =>
       {t('For example, if a 1x farm was getting 1 CAKE per block, a 40x farm would be getting 40 CAKE per block.')}
     </div>
   )
-  const { targetRef, tooltip, tooltipVisible } = useTooltip(tooltipContent, 'top-end', 'hover', undefined, undefined, [
-    20,
-    10,
-  ])
+  const { targetRef, tooltip, tooltipVisible } = useTooltip(tooltipContent, {
+    placement: 'top-end',
+    tooltipOffset: [20, 10],
+  })
 
   return (
     <Container>

diff --git a/src/views/Ifos/components/IfoFoldableCard/IfoPoolCard/IfoCardTokens.tsx b/src/views/Ifos/components/IfoFoldableCard/IfoPoolCard/IfoCardTokens.tsx
@@ -45,8 +45,10 @@ const IfoCardTokens: React.FC<IfoCardTokensProps> = ({
   const { account } = useWeb3React()
   const { t } = useTranslation()
   const { targetRef, tooltip, tooltipVisible } = useTooltip(
-    'Sorry, you didn’t contribute enough LP tokens to meet the minimum threshold. You didn’t buy anything in this sale, but you can still reclaim your LP tokens.',
-    'bottom',
+    t(
+      'Sorry, you didn’t contribute enough LP tokens to meet the minimum threshold. You didn’t buy anything in this sale, but you can still reclaim your LP tokens.',
+    ),
+    { placement: 'bottom' },
   )
 
   const publicPoolCharacteristics = publicIfoData[poolId]

diff --git a/src/views/Ifos/components/IfoFoldableCard/IfoPoolCard/index.tsx b/src/views/Ifos/components/IfoFoldableCard/IfoPoolCard/index.tsx
@@ -38,7 +38,7 @@ const cardConfig: CardConfig = {
 const SmallCard: React.FC<IfoCardProps> = ({ poolId, ifo, publicIfoData, walletIfoData }) => {
   const config = cardConfig[poolId]
   const { hasProfile, isLoading: isProfileLoading } = useProfile()
-  const { targetRef, tooltip, tooltipVisible } = useTooltip(config.tooltip, 'bottom')
+  const { targetRef, tooltip, tooltipVisible } = useTooltip(config.tooltip, { placement: 'bottom' })
 
   const isLoading = isProfileLoading || publicIfoData.status === 'idle'
 

diff --git a/src/views/Pools/components/BountyCard.tsx b/src/views/Pools/components/BountyCard.tsx
@@ -60,7 +60,10 @@ const BountyCard = () => {
     />,
   )
 
-  const { targetRef, tooltip, tooltipVisible } = useTooltip(<TooltipComponent />, 'bottom-end')
+  const { targetRef, tooltip, tooltipVisible } = useTooltip(<TooltipComponent />, {
+    placement: 'bottom-end',
+    tooltipOffset: [20, 10],
+  })
 
   return (
     <>

diff --git a/src/views/Pools/components/BountyModal.tsx b/src/views/Pools/components/BountyModal.tsx
@@ -41,7 +41,10 @@ const BountyModal: React.FC<BountyModalProps> = ({
   const [pendingTx, setPendingTx] = useState(false)
   const callFeeAsDecimal = callFee / 100
   const totalYieldToDisplay = getFullDisplayBalance(totalPendingCakeRewards, 18, 3)
-  const { targetRef, tooltip, tooltipVisible } = useTooltip(<TooltipComponent />, 'bottom-end')
+  const { targetRef, tooltip, tooltipVisible } = useTooltip(<TooltipComponent />, {
+    placement: 'bottom',
+    tooltipPadding: { right: 15 },
+  })
 
   const handleConfirmClick = async () => {
     cakeVaultContract.methods
@@ -102,11 +105,13 @@ const BountyModal: React.FC<BountyModalProps> = ({
       >
         {t('Confirm')}
       </Button>
-      <Flex ref={targetRef} justifyContent="center" alignItems="center">
+      <Flex justifyContent="center" alignItems="center">
         <Text fontSize="16px" bold color="textSubtle" mr="4px">
           {t("What's this?")}
         </Text>
-        <HelpIcon color="textSubtle" />
+        <span ref={targetRef}>
+          <HelpIcon color="textSubtle" />
+        </span>
       </Flex>
     </Modal>
   )

diff --git a/src/views/Pools/components/CakeVaultCard/FeeSummary.tsx b/src/views/Pools/components/CakeVaultCard/FeeSummary.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import { Text, Flex, useTooltip, Box } from '@pancakeswap-libs/uikit'
+import { Text, Flex, useTooltip, TooltipText } from '@pancakeswap-libs/uikit'
 import { useTranslation } from 'contexts/Localization'
 import { VaultFees } from 'hooks/cakeVault/useGetVaultFees'
 import UnstakingFeeCountdownRow from './UnstakingFeeCountdownRow'
@@ -16,26 +16,26 @@ const FeeSummary: React.FC<FeeSummaryProps> = ({ stakingTokenSymbol, lastDeposit
   const feeAsDecimal = parseInt(vaultFees.withdrawalFee) / 100
   const feeInCake = (parseFloat(stakeAmount) * (feeAsDecimal / 100)).toFixed(4)
   const { targetRef, tooltip, tooltipVisible } = useTooltip(
-    <Box>
-      <Box style={{ fontWeight: 'bold' }} mb="4px">
+    <>
+      <Text bold mb="4px">
         {t(`Unstaking fee: %fee%%`, { fee: feeAsDecimal })}
-      </Box>
-      <Box>
+      </Text>
+      <Text>
         {t(
           'Only applies within 3 days of staking. Unstaking after 3 days will not include a fee. Timer resets every time you stake new CAKE in the pool.',
         )}
-      </Box>
-    </Box>,
-    'bottom-end',
+      </Text>
+    </>,
+    { placement: 'top-start' },
   )
 
   return (
     <>
       <Flex mt="24px" alignItems="center" justifyContent="space-between">
         {tooltipVisible && tooltip}
-        <Text ref={targetRef} fontSize="14px">
+        <TooltipText ref={targetRef} small>
           {t('Unstaking Fee')}
-        </Text>
+        </TooltipText>
         <Text fontSize="14px">
           {stakeAmount ? feeInCake : '-'} {stakingTokenSymbol}
         </Text>

diff --git a/src/views/Pools/components/CakeVaultCard/RecentCakeProfitBalance.tsx b/src/views/Pools/components/CakeVaultCard/RecentCakeProfitBalance.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import BigNumber from 'bignumber.js'
-import { Text, useTooltip } from '@pancakeswap-libs/uikit'
+import { TooltipText, useTooltip } from '@pancakeswap-libs/uikit'
 import { useTranslation } from 'contexts/Localization'
 import { getFullDisplayBalance } from 'utils/formatBalance'
 import { convertSharesToCake } from '../../helpers'
@@ -24,15 +24,15 @@ const RecentCakeProfitBalance: React.FC<RecentCakeProfitBalanceProps> = ({
 
   const { targetRef, tooltip, tooltipVisible } = useTooltip(
     t('Your estimated earnings since last manual stake or unstake:'),
-    'bottom-end',
+    { placement: 'bottom-end' },
   )
 
   return (
     <>
       {tooltipVisible && tooltip}
-      <Text ref={targetRef} fontSize="14px">
+      <TooltipText ref={targetRef} small>
         {cakeToDisplay}
-      </Text>
+      </TooltipText>
     </>
   )
 }

diff --git a/src/views/Pools/components/CakeVaultCard/UnstakingFeeCountdownRow.tsx b/src/views/Pools/components/CakeVaultCard/UnstakingFeeCountdownRow.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import { Flex, Text, useTooltip, Box } from '@pancakeswap-libs/uikit'
+import { Flex, Text, TooltipText, useTooltip } from '@pancakeswap-libs/uikit'
 import { useTranslation } from 'contexts/Localization'
 import useWithdrawalFeeTimer from 'hooks/cakeVault/useWithdrawalFeeTimer'
 import WithdrawalFeeTimer from './WithdrawalFeeTimer'
@@ -20,17 +20,17 @@ const UnstakingFeeCountdownRow: React.FC<UnstakingFeeCountdownRowProps> = ({
   const { t } = useTranslation()
   const feeAsDecimal = parseInt(withdrawalFee) / 100 || '-'
   const { targetRef, tooltip, tooltipVisible } = useTooltip(
-    <Box>
-      <Box style={{ fontWeight: 'bold' }} mb="4px">
+    <>
+      <Text bold mb="4px">
         {t(`Unstaking fee: %fee%%`, { fee: feeAsDecimal })}
-      </Box>
-      <Box>
+      </Text>
+      <Text>
         {t(
           'Only applies within 3 days of staking. Unstaking after 3 days will not include a fee. Timer resets every time you stake new CAKE in the pool.',
         )}
-      </Box>
-    </Box>,
-    'bottom-end',
+      </Text>
+    </>,
+    { placement: 'bottom-start' },
   )
 
   const { secondsRemaining, hasPerformanceFee } = useWithdrawalFeeTimer(
@@ -43,10 +43,10 @@ const UnstakingFeeCountdownRow: React.FC<UnstakingFeeCountdownRowProps> = ({
   return (
     <Flex alignItems="center" justifyContent="space-between">
       {tooltipVisible && tooltip}
-      <Text ref={targetRef} fontSize="14px">
+      <TooltipText ref={targetRef} small>
         {parseInt(withdrawalFee) / 100 || '-'}%{' '}
         {shouldShowTimer ? t('unstaking fee until') : t('unstaking fee if withdrawn within 72h')}
-      </Text>
+      </TooltipText>
       {shouldShowTimer && <WithdrawalFeeTimer secondsRemaining={secondsRemaining} />}
     </Flex>
   )

diff --git a/src/views/Pools/components/PoolCard/AprRow.tsx b/src/views/Pools/components/PoolCard/AprRow.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import { Flex, Text, IconButton, useModal, CalculateIcon, Skeleton, useTooltip } from '@pancakeswap-libs/uikit'
+import { Flex, TooltipText, IconButton, useModal, CalculateIcon, Skeleton, useTooltip } from '@pancakeswap-libs/uikit'
 import { useTranslation } from 'contexts/Localization'
 import { getBalanceNumber } from 'utils/formatBalance'
 import { getPoolApr } from 'utils/apr'
@@ -30,7 +30,7 @@ const AprRow: React.FC<AprRowProps> = ({
   const { stakingToken, earningToken, totalStaked, isFinished, tokenPerBlock } = pool
   const { targetRef, tooltip, tooltipVisible } = useTooltip(
     t('APY includes compounding, APR doesn’t. This pool’s CAKE is compounded automatically, so we show APY.'),
-    'bottom-end',
+    { placement: 'bottom-end' },
   )
 
   const earningTokenPrice = useGetApiPrice(earningToken.address ? getAddress(earningToken.address) : '')
@@ -84,9 +84,7 @@ const AprRow: React.FC<AprRowProps> = ({
   return (
     <Flex alignItems="center" justifyContent="space-between">
       {tooltipVisible && tooltip}
-      <Text ref={targetRef} fontSize="16px">
-        {isAutoVault ? t('APY') : t('APR')}:
-      </Text>
+      <TooltipText ref={targetRef}>{isAutoVault ? t('APY') : t('APR')}:</TooltipText>
       {isFinished || !apr ? (
         <Skeleton width="82px" height="32px" />
       ) : (

diff --git a/src/views/Pools/components/PoolCard/CardFooter/ExpandedFooter.tsx b/src/views/Pools/components/PoolCard/CardFooter/ExpandedFooter.tsx
@@ -3,7 +3,16 @@ import BigNumber from 'bignumber.js'
 import styled from 'styled-components'
 import { getBalanceNumber } from 'utils/formatBalance'
 import { useTranslation } from 'contexts/Localization'
-import { Flex, MetamaskIcon, Text, LinkExternal, TimerIcon, Skeleton, useTooltip } from '@pancakeswap-libs/uikit'
+import {
+  Flex,
+  MetamaskIcon,
+  Text,
+  TooltipText,
+  LinkExternal,
+  TimerIcon,
+  Skeleton,
+  useTooltip,
+} from '@pancakeswap-libs/uikit'
 import { BASE_BSC_SCAN_URL, BASE_URL } from 'config'
 import { useBlock } from 'state/hooks'
 import { Pool } from 'state/types'
@@ -50,7 +59,7 @@ const ExpandedFooter: React.FC<ExpandedFooterProps> = ({
 
   const { targetRef, tooltip, tooltipVisible } = useTooltip(
     t('Subtracted automatically from each yield harvest and burned.'),
-    'bottom-end',
+    { placement: 'bottom-end' },
   )
 
   return (
@@ -101,9 +110,9 @@ const ExpandedFooter: React.FC<ExpandedFooterProps> = ({
       {isAutoVault && (
         <Flex mb="2px" justifyContent="space-between" alignItems="center">
           {tooltipVisible && tooltip}
-          <Text ref={targetRef} fontSize="14px">
+          <TooltipText ref={targetRef} small>
             {t('Performance Fee')}
-          </Text>
+          </TooltipText>
           <Flex alignItems="center">
             <Text ml="4px" small>
               {performanceFee / 100}%

diff --git a/src/views/Pools/components/PoolCard/CardFooter/index.tsx b/src/views/Pools/components/PoolCard/CardFooter/index.tsx
@@ -38,10 +38,9 @@ const Footer: React.FC<FooterProps> = ({
     'Any funds you stake in this pool will be automagically harvested and restaked (compounded) for you.',
   )
 
-  const { targetRef, tooltip, tooltipVisible } = useTooltip(
-    isAutoVault ? autoTooltipText : manualTooltipText,
-    'bottom-end',
-  )
+  const { targetRef, tooltip, tooltipVisible } = useTooltip(isAutoVault ? autoTooltipText : manualTooltipText, {
+    placement: 'bottom-end',
+  })
 
   return (
     <CardFooter>

diff --git a/src/views/Pools/components/PoolCard/Modals/CollectModal.tsx b/src/views/Pools/components/PoolCard/Modals/CollectModal.tsx
@@ -10,7 +10,6 @@ import {
   ButtonMenuItem,
   HelpIcon,
   useTooltip,
-  Box,
 } from '@pancakeswap-libs/uikit'
 import { useTranslation } from 'contexts/Localization'
 import useTheme from 'hooks/useTheme'
@@ -49,14 +48,10 @@ const CollectModal: React.FC<CollectModalProps> = ({
   const [shouldCompound, setShouldCompound] = useState(isCompoundPool)
   const { targetRef, tooltip, tooltipVisible } = useTooltip(
     <>
-      <Box mb="12px">{t('Compound: collect and restake CAKE into pool.')}</Box>
-      <Box>{t('Harvest: collect CAKE and send to wallet')}</Box>
+      <Text mb="12px">{t('Compound: collect and restake CAKE into pool.')}</Text>
+      <Text>{t('Harvest: collect CAKE and send to wallet')}</Text>
     </>,
-    'bottom-end',
-    'hover',
-    undefined,
-    undefined,
-    [20, 10],
+    { placement: 'bottom-end', tooltipOffset: [20, 10] },
   )
 
   const handleHarvestConfirm = async () => {

diff --git a/src/views/Predictions/components/RoundCard/EnteredTag.tsx b/src/views/Predictions/components/RoundCard/EnteredTag.tsx
@@ -20,8 +20,7 @@ const EnteredTag: React.FC<EnteredTagProps> = ({ amount }) => {
   const { t } = useTranslation()
   const { targetRef, tooltipVisible, tooltip } = useTooltip(
     <div style={{ whiteSpace: 'nowrap' }}>{`${formatBnb(amount)} BNB`}</div>,
-    'bottom',
-    'hover',
+    { placement: 'bottom' },
   )
 
   return (

diff --git a/src/views/Predictions/components/RoundCard/LiveRoundCard.tsx b/src/views/Predictions/components/RoundCard/LiveRoundCard.tsx
@@ -60,7 +60,7 @@ const LiveRoundCard: React.FC<LiveRoundCardProps> = ({
       </LinkExternal>
     </Box>
   )
-  const { targetRef, tooltip, tooltipVisible } = useTooltip(tooltipContent, 'bottom')
+  const { targetRef, tooltip, tooltipVisible } = useTooltip(tooltipContent, { placement: 'bottom' })
 
   if (round.failed) {
     return <CanceledRoundCard round={round} />

diff --git a/src/views/Predictions/components/RoundCard/OpenRoundCard.tsx b/src/views/Predictions/components/RoundCard/OpenRoundCard.tsx
@@ -60,8 +60,7 @@ const OpenRoundCard: React.FC<OpenRoundCardProps> = ({
   const positionDisplay = position === BetPosition.BULL ? 'UP' : 'DOWN'
   const { targetRef, tooltipVisible, tooltip } = useTooltip(
     <div style={{ whiteSpace: 'nowrap' }}>{`${formatBnb(betAmount)} BNB`}</div>,
-    'top',
-    'hover',
+    { placement: 'top' },
   )
 
   // Bettable rounds do not have an lockBlock set so we approximate it by adding the block interval

diff --git a/yarn.lock b/yarn.lock
@@ -2017,10 +2017,10 @@
     eslint-plugin-react "^7.21.5"
     eslint-plugin-react-hooks "^4.0.0"
 
-"@pancakeswap-libs/uikit@^0.29.2":
-  version "0.29.2"
-  resolved "https://registry.yarnpkg.com/@pancakeswap-libs/uikit/-/uikit-0.29.2.tgz#246bf495b197f30e1e2794ab64ee022a95220921"
-  integrity sha512-vhKdCTpJr7+cDiqZdppjni+SMRS52agwRO8htIkNAbWpvOquBGAyTakA9q7WwIg3Gl0lxnl0sT9flmdr8TWhjg==
+"@pancakeswap-libs/uikit@^0.29.3":
+  version "0.29.3"
+  resolved "https://registry.yarnpkg.com/@pancakeswap-libs/uikit/-/uikit-0.29.3.tgz#33589a43262d84188e9a951c989fd79a13ec259e"
+  integrity sha512-BZYfCgti7gx7jXVc3Vq3DFLjbTuTw21DZuOp+kNYR0WJxeTHxDHb4F6c9wg1FyUw5BbK91kRlLa9wSwrHDCuPQ==
   dependencies:
     "@popperjs/core" "^2.9.2"
     "@types/lodash" "^4.14.168"