add underlines to tooltips

tinlake-ui/components/Chart/styles.ts

@@ -1,4 +1,10 @@
+import { ResponsiveContainer } from 'recharts'
 import styled from 'styled-components'
+
+export const StyledResponsiveContainer = styled(ResponsiveContainer)`
+  width: calc(100% + 8px) !important;
+  margin-left: -4px;
+`
 export const ChartTooltip = styled.div`
   padding: 12px 16px;
   font-size: 12px;

tinlake-ui/components/Header/index.tsx

@@ -1,4 +1,3 @@
-import { Tooltip as AxisTooltip } from '@centrifuge/axis-tooltip'
 import { baseToDisplay } from '@centrifuge/tinlake-js'
 import { Box, Button, Layer } from 'grommet'
 import { Close as CloseIcon, Menu as MenuIcon } from 'grommet-icons'
@@ -19,6 +18,7 @@ import { getAddressLink } from '../../utils/etherscanLinkGenerator'
 import { toDynamicPrecision } from '../../utils/toDynamicPrecision'
 import { useCFGRewards } from '../../utils/useCFGRewards'
 import { useQueryDebugEthAddress } from '../../utils/useQueryDebugEthAddress'
+import { Tooltip } from '../Tooltip'
 import { Web3Wallet } from '../Web3Wallet'
 
 const { isDemo } = config
@@ -159,11 +159,11 @@ const Header: React.FC<Props> = (props: Props) => {
       <AccountWrapper align="center" direction="row">
         <Holdings>
           <Box pad={{ left: '14px', right: '14px' }}>
-            <AxisTooltip title="View your rewards">{rewardsLink}</AxisTooltip>
+            <Tooltip title="View your rewards">{rewardsLink}</Tooltip>
           </Box>
           {address && (
             <Box pad={{ left: '14px', right: '14px' }}>
-              <AxisTooltip title="View your investment portfolio">{portfolioLink}</AxisTooltip>
+              <Tooltip title="View your investment portfolio">{portfolioLink}</Tooltip>
             </Box>
           )}
         </Holdings>

tinlake-ui/components/Overview/OverviewHeader.tsx

@@ -120,48 +120,50 @@ const OverviewHeader: React.FC<Props> = (props: Props) => {
           <Heading level="5">{props.selectedPool.metadata.asset}</Heading>
           <Type>Asset type</Type>
         </HeaderBox>
-        <Tooltip id="assetMaturity">
-          <HeaderBox>
-            <Heading level="4">{props.selectedPool.metadata.assetMaturity}</Heading>
-            <Type>Asset maturity</Type>
-          </HeaderBox>
-        </Tooltip>
-        <Tooltip id={dropYield && (poolData?.netAssetValue.gtn(0) || poolData?.reserve.gtn(0)) ? 'dropApy' : 'dropApr'}>
-          <HeaderBox>
-            <Heading level="4">
-              <TokenLogo src={`/static/DROP_final.svg`} />
-              {dropYield && (poolData?.netAssetValue.gtn(0) || poolData?.reserve.gtn(0))
-                ? dropYield
-                : toPrecision(feeToInterestRate(dropRate || '0'), 2)}
-              <Unit>%</Unit>
-            </Heading>
-            {dropYield && (poolData?.netAssetValue.gtn(0) || poolData?.reserve.gtn(0)) && (
-              <Box>
-                <Type>DROP APY (30 days)</Type>
-              </Box>
-            )}
-            {!(dropYield && (poolData?.netAssetValue.gtn(0) || poolData?.reserve.gtn(0))) && (
-              <Box>
-                <Type>Fixed DROP rate (APR)</Type>
-              </Box>
-            )}
-          </HeaderBox>
-        </Tooltip>
-        <Tooltip id="poolValue">
-          <HeaderBox style={{ borderRight: 'none' }}>
-            <Heading level="4">
-              <TokenLogo src={`/static/currencies/${props.selectedPool.metadata.currencySymbol}.svg`} />
-              {addThousandsSeparators(
-                toPrecision(
-                  baseToDisplay((poolData?.netAssetValue || new BN(0)).add(poolData?.reserve || new BN(0)), 18),
-                  0
-                )
+        <HeaderBox>
+          <Heading level="4">{props.selectedPool.metadata.assetMaturity}</Heading>
+          <Type>
+            <Tooltip id="assetMaturity" underline>
+              Asset maturity
+            </Tooltip>
+          </Type>
+        </HeaderBox>
+        <HeaderBox>
+          <Heading level="4">
+            <TokenLogo src={`/static/DROP_final.svg`} />
+            {dropYield && (poolData?.netAssetValue.gtn(0) || poolData?.reserve.gtn(0))
+              ? dropYield
+              : toPrecision(feeToInterestRate(dropRate || '0'), 2)}
+            <Unit>%</Unit>
+          </Heading>
+          <Box>
+            <Type>
+              {dropYield && (poolData?.netAssetValue.gtn(0) || poolData?.reserve.gtn(0)) && (
+                <Tooltip id="dropApy" underline>
+                  DROP APY (30 days)
+                </Tooltip>
               )}
-              <Unit>{props.selectedPool.metadata.currencySymbol}</Unit>
-            </Heading>
-            <Type>Pool Value</Type>
-          </HeaderBox>
-        </Tooltip>
+              {!(dropYield && (poolData?.netAssetValue.gtn(0) || poolData?.reserve.gtn(0))) && (
+                <Tooltip id="dropApr" underline>
+                  Fixed DROP rate (APR)
+                </Tooltip>
+              )}
+            </Type>
+          </Box>
+        </HeaderBox>
+        <HeaderBox width="220px" style={{ borderRight: 'none' }}>
+          <Heading level="4">
+            <TokenLogo src={`/static/currencies/${props.selectedPool.metadata.currencySymbol}.svg`} />
+            {addThousandsSeparators(
+              toPrecision(
+                baseToDisplay((poolData?.netAssetValue || new BN(0)).add(poolData?.reserve || new BN(0)), 18),
+                0
+              )
+            )}
+            <Unit>{props.selectedPool.metadata.currencySymbol}</Unit>
+          </Heading>
+          <Type>Pool Value</Type>
+        </HeaderBox>
         <HeaderBox style={{ borderRight: 'none' }}>
           {'addresses' in props.selectedPool &&
           config.featureFlagNewOnboardingPools.includes(props.selectedPool.addresses.ROOT_CONTRACT) ? (

tinlake-ui/components/PoolCapacityLabel/index.tsx

@@ -1,5 +1,4 @@
 import { addThousandsSeparators, baseToDisplay, toPrecision } from '@centrifuge/tinlake-js'
-import BN from 'bn.js'
 import * as React from 'react'
 import styled from 'styled-components'
 import { PoolData } from '../../ducks/pools'
@@ -25,9 +24,13 @@ export const PoolCapacityLabel: React.FC<Props> = ({ pool }) => {
     return <Label orange>Oversubscribed</Label>
   }
 
+  if (capacity == null) {
+    return null
+  }
+
   return (
     <Label green>
-      {addThousandsSeparators(toPrecision(baseToDisplay(capacity || new BN(0), 21), 0))}K {currency}
+      {addThousandsSeparators(toPrecision(baseToDisplay(capacity, 21), 0))}K {currency}
     </Label>
   )
 }

tinlake-ui/components/PoolsMetrics/index.tsx

@@ -1,14 +1,14 @@
-import { Tooltip as AxisTooltip } from '@centrifuge/axis-tooltip'
 import { baseToDisplay, ITinlake } from '@centrifuge/tinlake-js'
 import { Box, Button } from 'grommet'
 import { useRouter } from 'next/router'
 import * as React from 'react'
 import { useSelector } from 'react-redux'
-import { Area, AreaChart, ResponsiveContainer, Tooltip, YAxis } from 'recharts'
+import { Area, AreaChart, ResponsiveContainer, Tooltip as ChartTooltip, YAxis } from 'recharts'
 import { PoolsDailyData, PoolsData } from '../../ducks/pools'
 import { dateToYMD } from '../../utils/date'
 import { useCFGYield } from '../../utils/hooks'
 import NumberDisplay from '../NumberDisplay'
+import { Tooltip } from '../Tooltip'
 import { Cont, Label, TokenLogo, Unit, Value } from './styles'
 
 interface Props {
@@ -40,8 +40,8 @@ const PoolsMetrics: React.FC<Props> = (props: Props) => {
         elevation="small"
         round="xsmall"
         background="white"
-        margin={{ horizontal: '16px', top: 'medium' }}
-        style={{ flex: '1 1 300px', maxWidth: '430px' }}
+        margin={{ horizontal: '16px' }}
+        style={{ flex: '1 1 300px', maxWidth: '440px' }}
         direction="row"
         pad="medium"
       >
@@ -67,7 +67,7 @@ const PoolsMetrics: React.FC<Props> = (props: Props) => {
                   <stop offset="95%" stopColor="#0828BE" stopOpacity={0} />
                 </linearGradient>
               </defs>
-              <Tooltip content={<></>} />
+              <ChartTooltip content={<></>} />
               <YAxis type="number" domain={[0, maxPoolValue]} hide />
               {/* <XAxis dataKey="day" mirror tickFormatter={(val: number) => dateToYMD(val)} /> */}
               <Area
@@ -105,26 +105,29 @@ const PoolsMetrics: React.FC<Props> = (props: Props) => {
         elevation="small"
         round="xsmall"
         background="white"
-        margin={{ horizontal: '16px', top: 'medium' }}
-        style={{ flex: '1 1 300px', maxWidth: '430px' }}
+        margin={{ horizontal: '16px' }}
+        style={{ flex: '1 1 300px', maxWidth: '440px' }}
         direction="row"
         pad="medium"
         justify="center"
       >
         <Box>
-          <AxisTooltip title="Tinlake investments earns daily rewards in Centrifuge's native token (CFG). The CFG reward rate is an annualized representation of these rewards based on the current CFG token price. Rewards are independent from the pool's issuer and not guaranteed - please see Investment disclaimer for more details.">
-            <>
-              <Cont style={{ marginTop: '8px' }}>
-                <TokenLogo src={`/static/cfg-white.svg`} />
-                <Value>
-                  <NumberDisplay value={cfgYield} precision={2} />
-                </Value>{' '}
-                <Unit>%</Unit>
-              </Cont>
+          <>
+            <Cont style={{ marginTop: '8px' }}>
+              <TokenLogo src={`/static/cfg-white.svg`} />
+              <Value>
+                <NumberDisplay value={cfgYield} precision={2} />
+              </Value>{' '}
+              <Unit>%</Unit>
+            </Cont>
 
+            <Tooltip
+              title="Tinlake investments earns daily rewards in Centrifuge's native token (CFG). The CFG reward rate is an annualized representation of these rewards based on the current CFG token price. Rewards are independent from the pool's issuer and not guaranteed - please see Investment disclaimer for more details."
+              underline
+            >
               <Label>Reward Rate (APR)</Label>
-            </>
-          </AxisTooltip>
+            </Tooltip>
+          </>
         </Box>
         <Box margin={{ left: 'large' }} justify="center">
           <Button label="Claim CFG" primary onClick={goToRewards} />

tinlake-ui/components/TinlakeExplainer/index.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import styled from 'styled-components'
 import InvestmentDisclaimer from '../Footer/InvestmentDisclaimer'
-import { Container, Primer, Row, Text } from './styles'
+import { Primer, Row, Text } from './styles'
 
 const LearnMore = styled.span`
   text-decoration: underline;
@@ -20,7 +20,7 @@ const TinlakeExplainer: React.FC = () => {
   const [open, setOpen] = React.useState(false)
 
   return (
-    <Container>
+    <div>
       <Row onClick={() => setOpen(!open)} role="button">
         <Primer>
           Tinlake is an open market place of real-world asset pools. Investments earn rewards in CFG token.{' '}
@@ -48,7 +48,7 @@ const TinlakeExplainer: React.FC = () => {
       )}
 
       <InvestmentDisclaimer isOpen={modalIsOpen} onClose={closeModal} />
-    </Container>
+    </div>
   )
 }
 

tinlake-ui/components/TinlakeExplainer/styles.ts

@@ -1,9 +1,5 @@
 import styled from 'styled-components'
 
-export const Container = styled.div`
-  padding-bottom: 12px;
-`
-
 export const Row = styled.div`
   cursor: pointer;
   display: flex;

tinlake-ui/components/Tooltip/index.tsx

@@ -1,45 +1,72 @@
 import { Tooltip as AxisTooltip } from '@centrifuge/axis-tooltip'
 import * as React from 'react'
+import styled from 'styled-components'
 import tooltips from '../../static/tooltips.json'
 
-interface Props {
-  id: keyof typeof tooltips
+interface BaseProps {
   children: React.ReactNode
+  underline?: boolean
+}
+
+interface PropsWithID extends BaseProps {
+  id: keyof typeof tooltips
 }
 
-// TODO: this is an experiment for better indicating tooltips, but should be improved upon at a later time
-// const Wrapper = styled.div`
-//   &:hover {
-//     &::after {
-//       content: ' ?';
-//       margin-left: 8px;
-//       background: rgba(0, 0, 0, 0.8);
-//       color: #fff;
-//       padding: 3px 7px 3px 4px;
-//       font-weight: bold;
-//       border-radius: 100%;
-//       font-size: 12px;
-//     }
-//   }
-// `
+interface PropsWithoutID extends BaseProps {
+  title: string
+  link?: string
+  description?: string
+}
+
+interface Tooltip {
+  title: string
+  link?: string
+  description?: string
+}
+
+type Props = PropsWithID | PropsWithoutID
+
+const Wrapper = styled.span<{ underline?: boolean; fix?: boolean }>`
+  [data-tip] > *,
+  [data-tip] {
+    border-bottom: ${(props) => (props.underline ? '1px dotted #bbbbbb' : undefined)};
+  }
+  /* react-tooltip doesn't play nice with SSR, so this dirty fix prevents a black line from showing on tooltip buttons */
+  .__react_component_tooltip {
+    ${(props) => props.fix && `display: none;`}
+  }
+`
+
+let serverHandoffComplete = false
 
 export const Tooltip: React.FC<Props> = (props: Props) => {
-  return props.id in tooltips ? (
-    <AxisTooltip
-      title={tooltips[props.id].title}
-      description={tooltips[props.id].description}
-      link={
-        'link' in tooltips[props.id]
-          ? {
-              text: 'Learn more',
-              url: (tooltips[props.id] as any).link,
-            }
-          : undefined
-      }
-    >
-      {props.children}
-    </AxisTooltip>
-  ) : (
-    <>{props.children}</>
+  const { title, link, description } = 'id' in props ? (tooltips[props.id] as Tooltip) : props
+  const [fix, setFix] = React.useState(serverHandoffComplete ? false : true)
+
+  React.useEffect(() => {
+    serverHandoffComplete = true
+
+    if (fix) {
+      setFix(false)
+    }
+  }, [])
+
+  return (
+    <Wrapper underline={props.underline} fix={fix}>
+      <AxisTooltip
+        title={title}
+        description={description}
+        link={
+          link
+            ? {
+                text: 'Learn more',
+                url: link,
+              }
+            : undefined
+        }
+      >
+        {props.children}
+      </AxisTooltip>
+    </Wrapper>
   )
 }