From 5aff6db9e7010d31899a6d5b11a1b206cf7dd6c3 Mon Sep 17 00:00:00 2001
From: Onno Visser <visser.onno@gmail.com>
Date: Tue, 3 Aug 2021 16:05:03 +0200
Subject: [PATCH 01/11] add underlines to tooltips

---
 tinlake-ui/components/Header/index.tsx        |  6 +-
 .../components/Overview/OverviewHeader.tsx    | 68 ++++++++-------
 tinlake-ui/components/PoolsMetrics/index.tsx  | 31 +++----
 tinlake-ui/components/Tooltip/index.tsx       | 84 +++++++++++--------
 tinlake-ui/containers/ClaimRewards/index.tsx  |  4 +-
 .../Investment/View/EpochOverview.tsx         | 42 +++++++---
 .../Investment/View/InvestmentOverview.tsx    | 35 +++++---
 tinlake-ui/containers/Portfolio/index.tsx     |  6 +-
 .../containers/SetCentAccount/index.tsx       |  4 +-
 9 files changed, 171 insertions(+), 109 deletions(-)

diff --git a/tinlake-ui/components/Header/index.tsx b/tinlake-ui/components/Header/index.tsx
index 55a1ab5731..677696a0e4 100644
--- a/tinlake-ui/components/Header/index.tsx
+++ b/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>
diff --git a/tinlake-ui/components/Overview/OverviewHeader.tsx b/tinlake-ui/components/Overview/OverviewHeader.tsx
index 3fbc1db4d9..8ff556af25 100644
--- a/tinlake-ui/components/Overview/OverviewHeader.tsx
+++ b/tinlake-ui/components/Overview/OverviewHeader.tsx
@@ -116,37 +116,43 @@ 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="dropAPR">
-          <HeaderBox>
-            <Heading level="4">
-              <TokenLogo src={`/static/DROP_final.svg`} />
-              {toPrecision(feeToInterestRate(dropRate || '0'), 2)}
-              <Unit>%</Unit>
-            </Heading>
-            <Type>DROP APR</Type>
-          </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
-                )
-              )}
-              <Unit>{props.selectedPool.metadata.currencySymbol}</Unit>
-            </Heading>
-            <Type>Pool Value</Type>
-          </HeaderBox>
-        </Tooltip>
+        <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`} />
+            {toPrecision(feeToInterestRate(dropRate || '0'), 2)}
+            <Unit>%</Unit>
+          </Heading>
+          <Type>
+            <Tooltip id="dropAPR" underline>
+              DROP APR
+            </Tooltip>
+          </Type>
+        </HeaderBox>
+        <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
+              )
+            )}
+            <Unit>{props.selectedPool.metadata.currencySymbol}</Unit>
+          </Heading>
+          <Type>
+            <Tooltip id="poolValue" underline>
+              Pool Value
+            </Tooltip>
+          </Type>
+        </HeaderBox>
         <HeaderBox style={{ borderRight: 'none' }}>
           {'addresses' in props.selectedPool &&
           config.featureFlagNewOnboardingPools.includes(props.selectedPool.addresses.ROOT_CONTRACT) ? (
diff --git a/tinlake-ui/components/PoolsMetrics/index.tsx b/tinlake-ui/components/PoolsMetrics/index.tsx
index 80a27300f7..76c936cb37 100644
--- a/tinlake-ui/components/PoolsMetrics/index.tsx
+++ b/tinlake-ui/components/PoolsMetrics/index.tsx
@@ -1,16 +1,16 @@
-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 { useDispatch, 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 { maybeLoadRewards } from '../../ducks/rewards'
 import { getWCFGPrice } from '../../ducks/userRewards'
 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 {
@@ -88,7 +88,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
@@ -115,19 +115,22 @@ const PoolsMetrics: React.FC<Props> = (props: Props) => {
         justify="center"
       >
         <Box>
-          <AxisTooltip title="The annualized CFG reward rate for investments, based on the current CFG token market price and the daily reward rate">
-            <>
-              <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="The annualized CFG reward rate for investments, based on the current CFG token market price and the daily reward rate"
+              underline
+            >
               <Label>Reward Rate (APR)</Label>
-            </>
-          </AxisTooltip>
+            </Tooltip>
+          </>
         </Box>
         <Box margin={{ left: 'large' }} justify="center">
           <Button label="Claim CFG" primary onClick={goToRewards} />
diff --git a/tinlake-ui/components/Tooltip/index.tsx b/tinlake-ui/components/Tooltip/index.tsx
index 2d5ab768fb..72d27d5f81 100644
--- a/tinlake-ui/components/Tooltip/index.tsx
+++ b/tinlake-ui/components/Tooltip/index.tsx
@@ -1,45 +1,61 @@
 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
+}
+
+interface PropsWithoutID extends BaseProps {
+  title: string
+  link?: string
+  description?: string
+}
+
+interface Tooltip {
+  title: string
+  link?: string
+  description?: string
 }
 
-// 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;
-//     }
-//   }
-// `
+type Props = PropsWithID | PropsWithoutID
+
+const Wrapper = styled.span<{ underline?: boolean }>`
+  [data-tip] > *,
+  [data-tip] {
+    border-bottom: ${(props) => (props.underline ? '1px dotted #bbbbbb' : undefined)};
+  }
+`
 
 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}</>
+  if ('id' in props) {
+    var { title, link, description } = tooltips[props.id] as Tooltip
+  } else {
+    var { title, link, description } = props
+  }
+
+  return (
+    <Wrapper underline={props.underline}>
+      <AxisTooltip
+        title={title}
+        description={description}
+        link={
+          link
+            ? {
+                text: 'Learn more',
+                url: link,
+              }
+            : undefined
+        }
+      >
+        {props.children}
+      </AxisTooltip>
+    </Wrapper>
   )
 }
diff --git a/tinlake-ui/containers/ClaimRewards/index.tsx b/tinlake-ui/containers/ClaimRewards/index.tsx
index ed7fda7511..ce838c420d 100644
--- a/tinlake-ui/containers/ClaimRewards/index.tsx
+++ b/tinlake-ui/containers/ClaimRewards/index.tsx
@@ -1,10 +1,10 @@
-import { Tooltip } from '@centrifuge/axis-tooltip'
 import { baseToDisplay } from '@centrifuge/tinlake-js'
 import BN from 'bn.js'
 import { Anchor, Box, Button } from 'grommet'
 import * as React from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 import Alert from '../../components/Alert'
+import { Tooltip } from '../../components/Tooltip'
 import { PortfolioState } from '../../ducks/portfolio'
 import { RewardsState } from '../../ducks/rewards'
 import { TransactionStatus } from '../../ducks/transactions'
@@ -89,6 +89,7 @@ const ClaimRewards: React.FC<Props> = ({ activeLink }: Props) => {
                     description={`Your unclaimed rewards on this Centrifuge Chain account can be higher than the rewards you earned on the connected
                       Ethereum account if you have set this Centrifuge Chain account as recipient for multiple
                       Ethereum accounts.`}
+                    underline
                   >
                     <Small>
                       Your unclaimed rewards are higher than the rewards on the connected Ethereum account. Learn why...
@@ -139,6 +140,7 @@ const ClaimRewards: React.FC<Props> = ({ activeLink }: Props) => {
                   description={`Your claimed rewards on this Centrifuge Chain account can be higher than the rewards you earned on the connected Ethereum
                       account if you have set this Centrifuge Chain account as recipient for multiple Ethereum
                       accounts.`}
+                  underline
                 >
                   <Small>
                     Your claimed rewards are higher than the rewards on the connected Ethereum account. Learn why...
diff --git a/tinlake-ui/containers/Investment/View/EpochOverview.tsx b/tinlake-ui/containers/Investment/View/EpochOverview.tsx
index 4045f6e08f..2e0638b431 100644
--- a/tinlake-ui/containers/Investment/View/EpochOverview.tsx
+++ b/tinlake-ui/containers/Investment/View/EpochOverview.tsx
@@ -1,4 +1,3 @@
-import { Tooltip } from '@centrifuge/axis-tooltip'
 import { baseToDisplay, ITinlake } from '@centrifuge/tinlake-js'
 import BN from 'bn.js'
 import { Box, Button, Table, TableBody, TableCell, TableHeader, TableRow } from 'grommet'
@@ -9,6 +8,7 @@ import { connect, useSelector } from 'react-redux'
 import styled from 'styled-components'
 import { SolverResult } from '../../../../tinlake.js/dist/services/solver/solver'
 import { LoadingValue } from '../../../components/LoadingValue/index'
+import { Tooltip } from '../../../components/Tooltip'
 import { Pool } from '../../../config'
 import { AuthState } from '../../../ducks/auth'
 import { EpochData, PoolData, PoolState } from '../../../ducks/pool'
@@ -162,8 +162,8 @@ const EpochOverview: React.FC<Props> = (props: Props) => {
 
             {epochData?.state === 'open' && (
               <Tooltip
-                title="Tinlake epochs have a minimum duration of 24 hours. Once the minimum duration has passed, the epoch will be closed and, if possible, the orders will be executed.
-              "
+                title="Tinlake epochs have a minimum duration of 24 hours. Once the minimum duration has passed, the epoch will be closed and, if possible, the orders will be executed."
+                underline
               >
                 <h5>{secondsToHms(epochData?.minimumEpochTimeLeft || 0)} until end of minimum duration</h5>
               </Tooltip>
@@ -171,34 +171,52 @@ const EpochOverview: React.FC<Props> = (props: Props) => {
             {epochData?.state === 'can-be-closed' && (
               <>
                 {getSolutionState() === 'to-be-closed' && (
-                  <Tooltip title="The minimum epoch duration has passed and will soon be closed automatically. All locked orders will be executed.">
+                  <Tooltip
+                    title="The minimum epoch duration has passed and will soon be closed automatically. All locked orders will be executed."
+                    underline
+                  >
                     <h5>To be closed</h5>
                   </Tooltip>
                 )}
                 {getSolutionState() === 'no-orders-locked' && (
-                  <Tooltip title="The minimum epoch duration has passed but currently no orders are locked. The epoch will be closed once orders are locked and can be executed.">
+                  <Tooltip
+                    title="The minimum epoch duration has passed but currently no orders are locked. The epoch will be closed once orders are locked and can be executed."
+                    underline
+                  >
                     <h5>No orders locked</h5>
                   </Tooltip>
                 )}
                 {getSolutionState() === 'no-executions' && (
-                  <Tooltip title="The minimum epoch duration has passed but the locked orders cannot be executed. This may be because the pool is oversubscribed or no liquidity is available for redemptions. The epoch will be closed and orders executed as soon as the pool state changes or liquidity is provided.">
+                  <Tooltip
+                    title="The minimum epoch duration has passed but the locked orders cannot be executed. This may be because the pool is oversubscribed or no liquidity is available for redemptions. The epoch will be closed and orders executed as soon as the pool state changes or liquidity is provided."
+                    underline
+                  >
                     <h5>Locked orders cannot be executed</h5>
                   </Tooltip>
                 )}
                 {getSolutionState() === 'partial-executions' && (
-                  <Tooltip title="The minimum epoch duration has passed but only a fraction of the locked orders could be executed. The epoch is not automatically closed to avoid unsustainable gas fees for small transaction amounts.">
+                  <Tooltip
+                    title="The minimum epoch duration has passed but only a fraction of the locked orders could be executed. The epoch is not automatically closed to avoid unsustainable gas fees for small transaction amounts."
+                    underline
+                  >
                     <h5>Locked orders can only be partially executed</h5>
                   </Tooltip>
                 )}
               </>
             )}
             {epochData?.state === 'in-submission-period' && (
-              <Tooltip title="The epoch has been closed and orders are currently being computed. After the computing period has ended the orders will be executed.">
+              <Tooltip
+                title="The epoch has been closed and orders are currently being computed. After the computing period has ended the orders will be executed."
+                underline
+              >
                 <h5>Minimum {secondsToHms(epochData?.challengeTime || 0)} remaining</h5>
               </Tooltip>
             )}
             {epochData?.state === 'in-challenge-period' && (
-              <Tooltip title="The epoch has been closed and orders are currently being computed. After the computing period has ended the orders will be executed.">
+              <Tooltip
+                title="The epoch has been closed and orders are currently being computed. After the computing period has ended the orders will be executed."
+                underline
+              >
                 <h5>
                   {secondsToHms((epochData?.minChallengePeriodEnd || 0) + 60 - new Date().getTime() / 1000)}{' '}
                   remaining...
@@ -206,7 +224,10 @@ const EpochOverview: React.FC<Props> = (props: Props) => {
               </Tooltip>
             )}
             {epochData?.state === 'challenge-period-ended' && (
-              <Tooltip title="The epoch has been closed and orders have been computed. The orders will be executed shortly.">
+              <Tooltip
+                title="The epoch has been closed and orders have been computed. The orders will be executed shortly."
+                underline
+              >
                 <h5>To be closed</h5>
               </Tooltip>
             )}
@@ -506,7 +527,6 @@ const EpochState = styled.div`
     font-size: 14px;
     margin: 0 0 0 14px;
     color: #777777;
-    border-bottom: 1px dotted #777777;
   }
 `
 
diff --git a/tinlake-ui/containers/Investment/View/InvestmentOverview.tsx b/tinlake-ui/containers/Investment/View/InvestmentOverview.tsx
index 868411fa1f..e9a5cfb383 100644
--- a/tinlake-ui/containers/Investment/View/InvestmentOverview.tsx
+++ b/tinlake-ui/containers/Investment/View/InvestmentOverview.tsx
@@ -109,7 +109,9 @@ const InvestmentOverview: React.FC<Props> = (props: Props) => {
           <Box>
             <Box direction="row" margin={{ top: '0', bottom: 'small' }}>
               <Heading level="5" margin={'0'}>
-                <Tooltip id="assetValue">Asset Value</Tooltip>
+                <Tooltip id="assetValue" underline>
+                  Asset Value
+                </Tooltip>
               </Heading>
               <Heading level="5" margin={{ left: 'auto', top: '0', bottom: '0' }}>
                 <LoadingValue done={poolData?.netAssetValue !== undefined}>
@@ -163,7 +165,9 @@ const InvestmentOverview: React.FC<Props> = (props: Props) => {
 
             <Box direction="row" margin={{ top: '0', bottom: 'small' }}>
               <Heading level="5" margin={'0'}>
-                <Tooltip id="poolValue">Reserve</Tooltip>
+                <Tooltip id="poolValue" underline>
+                  Reserve
+                </Tooltip>
               </Heading>
               <Heading level="5" margin={{ left: 'auto', top: '0', bottom: '0' }}>
                 <LoadingValue done={poolData?.reserve !== undefined}>
@@ -177,7 +181,9 @@ const InvestmentOverview: React.FC<Props> = (props: Props) => {
               <TableBody>
                 <TableRow>
                   <TableCell scope="row" border={{ color: 'transparent' }}>
-                    <Tooltip id="reserveRatio">Reserve Ratio</Tooltip>
+                    <Tooltip id="reserveRatio" underline>
+                      Reserve Ratio
+                    </Tooltip>
                   </TableCell>
                   <TableCell style={{ textAlign: 'end' }} border={{ color: 'transparent' }}>
                     <LoadingValue done={reserveRatio !== undefined}>
@@ -203,7 +209,9 @@ const InvestmentOverview: React.FC<Props> = (props: Props) => {
               <Box direction="column">
                 <Heading level="5" margin={{ bottom: 'xsmall', top: '0' }}>
                   <TokenLogo src={`/static/DROP_final.svg`} />
-                  <Tooltip id="dropValue">DROP Tranche Value</Tooltip>
+                  <Tooltip id="dropValue" underline>
+                    DROP Tranche Value
+                  </Tooltip>
                 </Heading>
                 <TrancheNote>Senior tranche</TrancheNote>
                 <TrancheNote>Lower risk, stable return</TrancheNote>
@@ -235,13 +243,14 @@ const InvestmentOverview: React.FC<Props> = (props: Props) => {
 
           <Box margin={{ top: 'small', bottom: 'medium' }} style={{ textAlign: 'center' }}>
             <div>
-              <Tooltip id="tinRiskBuffer">
-                DROP is currently protected by a<br />
-                <span style={{ fontWeight: 'bold' }}>
-                  {toPrecision((Math.round((currentJuniorRatio || 0) * 10000) / 100).toString(), 2)}% TIN buffer
-                </span>{' '}
-                (min: {toPrecision((Math.round((minJuniorRatio || 0) * 10000) / 100).toString(), 2)}%)
-              </Tooltip>
+              DROP is currently protected by a<br />
+              <span style={{ fontWeight: 'bold' }}>
+                {toPrecision((Math.round((currentJuniorRatio || 0) * 10000) / 100).toString(), 2)}%{' '}
+                <Tooltip id="tinRiskBuffer" underline>
+                  TIN buffer
+                </Tooltip>
+              </span>{' '}
+              (min: {toPrecision((Math.round((minJuniorRatio || 0) * 10000) / 100).toString(), 2)}%)
             </div>
           </Box>
 
@@ -254,7 +263,9 @@ const InvestmentOverview: React.FC<Props> = (props: Props) => {
               <Box direction="column">
                 <Heading level="5" margin={{ bottom: 'xsmall', top: '0' }}>
                   <TokenLogo src={`/static/TIN_final.svg`} />
-                  <Tooltip id="tinValue">TIN Tranche Value</Tooltip>
+                  <Tooltip id="tinValue" underline>
+                    TIN Tranche Value
+                  </Tooltip>
                 </Heading>
                 <TrancheNote>Junior tranche</TrancheNote>
                 <TrancheNote>Higher risk, variable return</TrancheNote>
diff --git a/tinlake-ui/containers/Portfolio/index.tsx b/tinlake-ui/containers/Portfolio/index.tsx
index e8b6649f01..d15d8671db 100644
--- a/tinlake-ui/containers/Portfolio/index.tsx
+++ b/tinlake-ui/containers/Portfolio/index.tsx
@@ -1,5 +1,4 @@
 import { DisplayField } from '@centrifuge/axis-display-field'
-import { Tooltip as AxisTooltip } from '@centrifuge/axis-tooltip'
 import { baseToDisplay } from '@centrifuge/tinlake-js'
 import BN from 'bn.js'
 import { Box, Button, Heading } from 'grommet'
@@ -24,6 +23,7 @@ import {
   Unit,
 } from '../../components/PoolList/styles'
 import { Cont, Label as MetricLabel, TokenLogo, Value } from '../../components/PoolsMetrics/styles'
+import { Tooltip } from '../../components/Tooltip'
 import { IpfsPools, Pool } from '../../config'
 import { loadPools, PoolData, PoolsState } from '../../ducks/pools'
 import { loadPortfolio, PortfolioState, TokenBalance } from '../../ducks/portfolio'
@@ -162,7 +162,9 @@ const Portfolio: React.FC<Props> = (props: Props) => {
             </HeaderCol>
             <HeaderCol>
               <HeaderTitle>
-                <AxisTooltip title="Token prices for this overview are updated daily">Current Price</AxisTooltip>
+                <Tooltip underline title="Token prices for this overview are updated daily">
+                  Current Price
+                </Tooltip>
               </HeaderTitle>
             </HeaderCol>
             <HeaderCol>
diff --git a/tinlake-ui/containers/SetCentAccount/index.tsx b/tinlake-ui/containers/SetCentAccount/index.tsx
index 49dde504cc..0a1b8f8898 100644
--- a/tinlake-ui/containers/SetCentAccount/index.tsx
+++ b/tinlake-ui/containers/SetCentAccount/index.tsx
@@ -1,10 +1,10 @@
-import { Tooltip } from '@centrifuge/axis-tooltip'
 import { ITinlake } from '@centrifuge/tinlake-js'
 import { Box, Button, Select } from 'grommet'
 import { CircleAlert } from 'grommet-icons'
 import * as React from 'react'
 import { connect, useDispatch, useSelector } from 'react-redux'
 import styled from 'styled-components'
+import { Tooltip } from '../../components/Tooltip'
 import { AuthState } from '../../ducks/auth'
 import { CentChainWalletState, InjectedAccount } from '../../ducks/centChainWallet'
 import { createTransaction, TransactionProps, useTransactionState } from '../../ducks/transactions'
@@ -109,6 +109,7 @@ const SetCentAccount: React.FC<Props> = ({ createTransaction, tinlake }: Props)
         <Tooltip
           title="Why so slow?"
           description={`Communication between the Ethereum blockchain and our Centrifuge Chain is semi-automated. Every link transaction on Ethereum will be observed by a relayer, a proof will be generated, and that proof will be committed on Centrfiuge Chain. This process is running only once per day.`}
+          underline
         >
           <Small>Why so slow?</Small>
         </Tooltip>
@@ -168,6 +169,7 @@ const SetCentAccount: React.FC<Props> = ({ createTransaction, tinlake }: Props)
         description={`Your address may show up ${
           selectedCentAcc ? `as ${shortAddr(selectedCentAcc.addrInjected)}` : 'differently'
         } in the Polkadot extension. In the extension settings, change the display address format to "Centrifuge Chain" to see your address in the right format.`}
+        underline
       >
         <Small>Unexpected/wrong addresses?</Small>
       </Tooltip>

From e90a9a82dd9739ba949d023a9ce87eea39c55be5 Mon Sep 17 00:00:00 2001
From: Onno Visser <visser.onno@gmail.com>
Date: Wed, 4 Aug 2021 12:42:57 +0200
Subject: [PATCH 02/11] chore: lint

---
 tinlake-ui/components/Tooltip/index.tsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/tinlake-ui/components/Tooltip/index.tsx b/tinlake-ui/components/Tooltip/index.tsx
index 72d27d5f81..b0e884bc39 100644
--- a/tinlake-ui/components/Tooltip/index.tsx
+++ b/tinlake-ui/components/Tooltip/index.tsx
@@ -34,10 +34,14 @@ const Wrapper = styled.span<{ underline?: boolean }>`
 `
 
 export const Tooltip: React.FC<Props> = (props: Props) => {
+  let title
+  let link
+  let description
+
   if ('id' in props) {
-    var { title, link, description } = tooltips[props.id] as Tooltip
+    ;({ title, link, description } = tooltips[props.id] as Tooltip)
   } else {
-    var { title, link, description } = props
+    ;({ title, link, description } = props)
   }
 
   return (

From f917489e70dfcc4643126bfe3a10de00b6b9dc32 Mon Sep 17 00:00:00 2001
From: Onno Visser <visser.onno@gmail.com>
Date: Thu, 5 Aug 2021 09:37:49 +0200
Subject: [PATCH 03/11] refactor

---
 tinlake-ui/components/Tooltip/index.tsx | 10 +---------
 1 file changed, 1 insertion(+), 9 deletions(-)

diff --git a/tinlake-ui/components/Tooltip/index.tsx b/tinlake-ui/components/Tooltip/index.tsx
index b0e884bc39..ad48a82919 100644
--- a/tinlake-ui/components/Tooltip/index.tsx
+++ b/tinlake-ui/components/Tooltip/index.tsx
@@ -34,15 +34,7 @@ const Wrapper = styled.span<{ underline?: boolean }>`
 `
 
 export const Tooltip: React.FC<Props> = (props: Props) => {
-  let title
-  let link
-  let description
-
-  if ('id' in props) {
-    ;({ title, link, description } = tooltips[props.id] as Tooltip)
-  } else {
-    ;({ title, link, description } = props)
-  }
+  const { title, link, description } = 'id' in props ? (tooltips[props.id] as Tooltip) : props
 
   return (
     <Wrapper underline={props.underline}>

From 60cdfd7f85a163c8879316ec0874cb9d57253747 Mon Sep 17 00:00:00 2001
From: Onno Visser <visser.onno@gmail.com>
Date: Thu, 5 Aug 2021 16:52:59 +0200
Subject: [PATCH 04/11] remove a couple tooltips

---
 tinlake-ui/components/Overview/OverviewHeader.tsx         | 6 +-----
 .../containers/Investment/View/InvestmentOverview.tsx     | 8 ++------
 2 files changed, 3 insertions(+), 11 deletions(-)

diff --git a/tinlake-ui/components/Overview/OverviewHeader.tsx b/tinlake-ui/components/Overview/OverviewHeader.tsx
index 8ff556af25..91b4ae5be2 100644
--- a/tinlake-ui/components/Overview/OverviewHeader.tsx
+++ b/tinlake-ui/components/Overview/OverviewHeader.tsx
@@ -147,11 +147,7 @@ const OverviewHeader: React.FC<Props> = (props: Props) => {
             )}
             <Unit>{props.selectedPool.metadata.currencySymbol}</Unit>
           </Heading>
-          <Type>
-            <Tooltip id="poolValue" underline>
-              Pool Value
-            </Tooltip>
-          </Type>
+          <Type>Pool Value</Type>
         </HeaderBox>
         <HeaderBox style={{ borderRight: 'none' }}>
           {'addresses' in props.selectedPool &&
diff --git a/tinlake-ui/containers/Investment/View/InvestmentOverview.tsx b/tinlake-ui/containers/Investment/View/InvestmentOverview.tsx
index e9a5cfb383..0cd10e31a8 100644
--- a/tinlake-ui/containers/Investment/View/InvestmentOverview.tsx
+++ b/tinlake-ui/containers/Investment/View/InvestmentOverview.tsx
@@ -209,9 +209,7 @@ const InvestmentOverview: React.FC<Props> = (props: Props) => {
               <Box direction="column">
                 <Heading level="5" margin={{ bottom: 'xsmall', top: '0' }}>
                   <TokenLogo src={`/static/DROP_final.svg`} />
-                  <Tooltip id="dropValue" underline>
-                    DROP Tranche Value
-                  </Tooltip>
+                  DROP Tranche Value
                 </Heading>
                 <TrancheNote>Senior tranche</TrancheNote>
                 <TrancheNote>Lower risk, stable return</TrancheNote>
@@ -263,9 +261,7 @@ const InvestmentOverview: React.FC<Props> = (props: Props) => {
               <Box direction="column">
                 <Heading level="5" margin={{ bottom: 'xsmall', top: '0' }}>
                   <TokenLogo src={`/static/TIN_final.svg`} />
-                  <Tooltip id="tinValue" underline>
-                    TIN Tranche Value
-                  </Tooltip>
+                  TIN Tranche Value
                 </Heading>
                 <TrancheNote>Junior tranche</TrancheNote>
                 <TrancheNote>Higher risk, variable return</TrancheNote>

From 22a3b9a9131434c42156eb1b8246d7899d9bb57f Mon Sep 17 00:00:00 2001
From: Onno Visser <visser.onno@gmail.com>
Date: Fri, 6 Aug 2021 10:06:46 +0200
Subject: [PATCH 05/11] change reserve tooltip content

---
 .../containers/Investment/View/InvestmentOverview.tsx       | 2 +-
 tinlake-ui/static/tooltips.json                             | 6 +++++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/tinlake-ui/containers/Investment/View/InvestmentOverview.tsx b/tinlake-ui/containers/Investment/View/InvestmentOverview.tsx
index 0cd10e31a8..d287f7bc00 100644
--- a/tinlake-ui/containers/Investment/View/InvestmentOverview.tsx
+++ b/tinlake-ui/containers/Investment/View/InvestmentOverview.tsx
@@ -165,7 +165,7 @@ const InvestmentOverview: React.FC<Props> = (props: Props) => {
 
             <Box direction="row" margin={{ top: '0', bottom: 'small' }}>
               <Heading level="5" margin={'0'}>
-                <Tooltip id="poolValue" underline>
+                <Tooltip id="reserve" underline>
                   Reserve
                 </Tooltip>
               </Heading>
diff --git a/tinlake-ui/static/tooltips.json b/tinlake-ui/static/tooltips.json
index 6a8d994065..7e3f41a2d0 100644
--- a/tinlake-ui/static/tooltips.json
+++ b/tinlake-ui/static/tooltips.json
@@ -81,6 +81,10 @@
     "title": "Financing Fee",
     "description": "Annual interest rate (APR) at which the interest for the outstanding financing is accrued with compounding per second."
   },
+  "reserve": {
+    "title": "Reserve",
+    "description": "The Reserve is the current liquidity in the pool that is not deployed to finance assets. It is available for redemption by investors and asset originations by the Asset Originator."
+  },
   "reserveRatio": {
     "title": "Reserve Ratio",
     "description": "The Reserve Ratio expresses the reserve in relation to the pool value and gives an indication of the current liquidity of the pool. A high reserve ration indicates high liquidity of the pool which fosters immediate redemptions for investors but may also drag down effective returns."
@@ -93,4 +97,4 @@
     "title": "Oversubscribed pool",
     "description": "This pool is currently oversubscribed and not open for investments. Locked investment orders may be pending until the pool opens again."
   }
-}
\ No newline at end of file
+}

From af0da14ae504c37a36c5b8deb9ff8201e7bd3fdf Mon Sep 17 00:00:00 2001
From: Onno Visser <visser.onno@gmail.com>
Date: Fri, 6 Aug 2021 11:58:39 +0200
Subject: [PATCH 06/11] fix chart margins

---
 tinlake-ui/components/Chart/styles.ts         | 6 ++++++
 tinlake-ui/containers/Loan/Overview/index.tsx | 7 ++++---
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/tinlake-ui/components/Chart/styles.ts b/tinlake-ui/components/Chart/styles.ts
index 757e09bccd..9eb2aaee85 100644
--- a/tinlake-ui/components/Chart/styles.ts
+++ b/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;
diff --git a/tinlake-ui/containers/Loan/Overview/index.tsx b/tinlake-ui/containers/Loan/Overview/index.tsx
index 21e4d9c1c7..7506e26608 100644
--- a/tinlake-ui/containers/Loan/Overview/index.tsx
+++ b/tinlake-ui/containers/Loan/Overview/index.tsx
@@ -3,7 +3,7 @@ import BN from 'bn.js'
 import { Box, Button, Heading, Table, TableBody, TableCell, TableRow } from 'grommet'
 import * as React from 'react'
 import { connect, useDispatch, useSelector } from 'react-redux'
-import { Area, AreaChart, ResponsiveContainer, Tooltip } from 'recharts'
+import { Area, AreaChart, Tooltip } from 'recharts'
 import {
   ChartTooltip,
   ChartTooltipColor,
@@ -11,6 +11,7 @@ import {
   ChartTooltipLine,
   ChartTooltipTitle,
   ChartTooltipValue,
+  StyledResponsiveContainer,
 } from '../../../components/Chart/styles'
 import { LoadingValue } from '../../../components/LoadingValue/index'
 import { Pool } from '../../../config'
@@ -258,7 +259,7 @@ const LoanOverview: React.FC<Props> = (props: Props) => {
             </Heading>
           </Box>
           {assetDataWithToday.length > 0 && (
-            <ResponsiveContainer>
+            <StyledResponsiveContainer>
               <AreaChart data={assetDataWithToday} margin={{ top: 4, right: 4, left: 4, bottom: 4 }}>
                 <defs>
                   <linearGradient id="colorAssetValue" x1="0" y1="0" x2="0" y2="1">
@@ -293,7 +294,7 @@ const LoanOverview: React.FC<Props> = (props: Props) => {
                   name="Reserve"
                 />
               </AreaChart>
-            </ResponsiveContainer>
+            </StyledResponsiveContainer>
           )}
         </Box>
       </Box>

From d8eb3b4280ab1fee7c244a9185c320a0d9b66be1 Mon Sep 17 00:00:00 2001
From: Onno Visser <visser.onno@gmail.com>
Date: Fri, 6 Aug 2021 12:59:38 +0200
Subject: [PATCH 07/11] widen pool value card

---
 .../components/Overview/OverviewHeader.tsx    | 30 +++++++++++--------
 tinlake-ui/components/PoolsMetrics/index.tsx  |  4 +--
 2 files changed, 19 insertions(+), 15 deletions(-)

diff --git a/tinlake-ui/components/Overview/OverviewHeader.tsx b/tinlake-ui/components/Overview/OverviewHeader.tsx
index bae199a9e0..3fad0ca834 100644
--- a/tinlake-ui/components/Overview/OverviewHeader.tsx
+++ b/tinlake-ui/components/Overview/OverviewHeader.tsx
@@ -122,9 +122,11 @@ const OverviewHeader: React.FC<Props> = (props: Props) => {
         </HeaderBox>
         <HeaderBox>
           <Heading level="4">{props.selectedPool.metadata.assetMaturity}</Heading>
-          <Tooltip id="assetMaturity" underline>
-            <Type>Asset maturity</Type>
-          </Tooltip>
+          <Type>
+            <Tooltip id="assetMaturity" underline>
+              Asset maturity
+            </Tooltip>
+          </Type>
         </HeaderBox>
         <HeaderBox>
           <Heading level="4">
@@ -135,16 +137,18 @@ const OverviewHeader: React.FC<Props> = (props: Props) => {
             <Unit>%</Unit>
           </Heading>
           <Box>
-            {dropYield && (poolData?.netAssetValue.gtn(0) || poolData?.reserve.gtn(0)) && (
-              <Tooltip id="dropApy" underline>
-                <Type>DROP APY (30 days)</Type>
-              </Tooltip>
-            )}
-            {!(dropYield && (poolData?.netAssetValue.gtn(0) || poolData?.reserve.gtn(0))) && (
-              <Tooltip id="dropApr" underline>
-                <Type>Fixed DROP rate (APR)</Type>
-              </Tooltip>
-            )}
+            <Type>
+              {dropYield && (poolData?.netAssetValue.gtn(0) || poolData?.reserve.gtn(0)) && (
+                <Tooltip id="dropApy" underline>
+                  DROP APY (30 days)
+                </Tooltip>
+              )}
+              {!(dropYield && (poolData?.netAssetValue.gtn(0) || poolData?.reserve.gtn(0))) && (
+                <Tooltip id="dropApr" underline>
+                  Fixed DROP rate (APR)
+                </Tooltip>
+              )}
+            </Type>
           </Box>
         </HeaderBox>
         <HeaderBox style={{ borderRight: 'none' }}>
diff --git a/tinlake-ui/components/PoolsMetrics/index.tsx b/tinlake-ui/components/PoolsMetrics/index.tsx
index 19563428c7..dc2edfbf94 100644
--- a/tinlake-ui/components/PoolsMetrics/index.tsx
+++ b/tinlake-ui/components/PoolsMetrics/index.tsx
@@ -41,7 +41,7 @@ const PoolsMetrics: React.FC<Props> = (props: Props) => {
         round="xsmall"
         background="white"
         margin={{ horizontal: '16px', top: 'medium' }}
-        style={{ flex: '1 1 300px', maxWidth: '430px' }}
+        style={{ flex: '1 1 300px', maxWidth: '440px' }}
         direction="row"
         pad="medium"
       >
@@ -106,7 +106,7 @@ const PoolsMetrics: React.FC<Props> = (props: Props) => {
         round="xsmall"
         background="white"
         margin={{ horizontal: '16px', top: 'medium' }}
-        style={{ flex: '1 1 300px', maxWidth: '430px' }}
+        style={{ flex: '1 1 300px', maxWidth: '440px' }}
         direction="row"
         pad="medium"
         justify="center"

From 8f21c9aa57853acec1e735f650c37a3019453892 Mon Sep 17 00:00:00 2001
From: Onno Visser <visser.onno@gmail.com>
Date: Fri, 6 Aug 2021 13:09:47 +0200
Subject: [PATCH 08/11] hide capacity label when loading

---
 tinlake-ui/components/Overview/OverviewHeader.tsx          | 2 +-
 tinlake-ui/components/PoolCapacityLabel/index.tsx          | 7 +++++--
 .../containers/Investment/View/InvestmentOverview.tsx      | 2 +-
 3 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/tinlake-ui/components/Overview/OverviewHeader.tsx b/tinlake-ui/components/Overview/OverviewHeader.tsx
index 3fad0ca834..86186ab9f9 100644
--- a/tinlake-ui/components/Overview/OverviewHeader.tsx
+++ b/tinlake-ui/components/Overview/OverviewHeader.tsx
@@ -151,7 +151,7 @@ const OverviewHeader: React.FC<Props> = (props: Props) => {
             </Type>
           </Box>
         </HeaderBox>
-        <HeaderBox style={{ borderRight: 'none' }}>
+        <HeaderBox width="220px" style={{ borderRight: 'none' }}>
           <Heading level="4">
             <TokenLogo src={`/static/currencies/${props.selectedPool.metadata.currencySymbol}.svg`} />
             {addThousandsSeparators(
diff --git a/tinlake-ui/components/PoolCapacityLabel/index.tsx b/tinlake-ui/components/PoolCapacityLabel/index.tsx
index 836b8e94a8..6eabd5a76b 100644
--- a/tinlake-ui/components/PoolCapacityLabel/index.tsx
+++ b/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>
   )
 }
diff --git a/tinlake-ui/containers/Investment/View/InvestmentOverview.tsx b/tinlake-ui/containers/Investment/View/InvestmentOverview.tsx
index 9684ae2694..10ba33c3b4 100644
--- a/tinlake-ui/containers/Investment/View/InvestmentOverview.tsx
+++ b/tinlake-ui/containers/Investment/View/InvestmentOverview.tsx
@@ -104,7 +104,7 @@ const InvestmentOverview: React.FC<Props> = (props: Props) => {
           round="xsmall"
           margin={{ bottom: 'medium' }}
           background="white"
-          style={{ flex: '1 1 40%' }}
+          style={{ flex: '1 1 35%' }}
         >
           <Box>
             <Box direction="row" margin={{ top: '0', bottom: 'small' }}>

From 6df46aeacf9aafca0a90facf3b5ca78f4664fd8e Mon Sep 17 00:00:00 2001
From: Onno Visser <visser.onno@gmail.com>
Date: Fri, 6 Aug 2021 13:35:25 +0200
Subject: [PATCH 09/11] fix margins

---
 tinlake-ui/components/PoolsMetrics/index.tsx                | 4 ++--
 tinlake-ui/components/TinlakeExplainer/index.tsx            | 6 +++---
 tinlake-ui/components/TinlakeExplainer/styles.ts            | 4 ----
 tinlake-ui/containers/Dashboard/index.tsx                   | 4 ++--
 .../containers/Investment/View/InvestmentOverview.tsx       | 4 +++-
 tinlake-ui/containers/Investment/View/TrancheOverview.tsx   | 6 +++---
 6 files changed, 13 insertions(+), 15 deletions(-)

diff --git a/tinlake-ui/components/PoolsMetrics/index.tsx b/tinlake-ui/components/PoolsMetrics/index.tsx
index dc2edfbf94..1416b8da2a 100644
--- a/tinlake-ui/components/PoolsMetrics/index.tsx
+++ b/tinlake-ui/components/PoolsMetrics/index.tsx
@@ -40,7 +40,7 @@ const PoolsMetrics: React.FC<Props> = (props: Props) => {
         elevation="small"
         round="xsmall"
         background="white"
-        margin={{ horizontal: '16px', top: 'medium' }}
+        margin={{ horizontal: '16px' }}
         style={{ flex: '1 1 300px', maxWidth: '440px' }}
         direction="row"
         pad="medium"
@@ -105,7 +105,7 @@ const PoolsMetrics: React.FC<Props> = (props: Props) => {
         elevation="small"
         round="xsmall"
         background="white"
-        margin={{ horizontal: '16px', top: 'medium' }}
+        margin={{ horizontal: '16px' }}
         style={{ flex: '1 1 300px', maxWidth: '440px' }}
         direction="row"
         pad="medium"
diff --git a/tinlake-ui/components/TinlakeExplainer/index.tsx b/tinlake-ui/components/TinlakeExplainer/index.tsx
index 550e66811e..f6c4a44be0 100644
--- a/tinlake-ui/components/TinlakeExplainer/index.tsx
+++ b/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>
   )
 }
 
diff --git a/tinlake-ui/components/TinlakeExplainer/styles.ts b/tinlake-ui/components/TinlakeExplainer/styles.ts
index a13e7ff0af..df994a8590 100644
--- a/tinlake-ui/components/TinlakeExplainer/styles.ts
+++ b/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;
diff --git a/tinlake-ui/containers/Dashboard/index.tsx b/tinlake-ui/containers/Dashboard/index.tsx
index bb8b74ef8f..b286f47e59 100644
--- a/tinlake-ui/containers/Dashboard/index.tsx
+++ b/tinlake-ui/containers/Dashboard/index.tsx
@@ -30,10 +30,10 @@ const Dashboard: React.FC<Props> = (props: Props) => {
       ) : (
         pools.data && (
           <Box basis={'full'}>
-            <Box margin={{ top: 'medium', bottom: 'none' }} direction="row">
+            <Box margin={{ top: 'large', bottom: 'none' }} direction="row">
               <TinlakeExplainer />
             </Box>
-            <Box direction="row" gap="large" margin={{ bottom: 'medium', top: 'medium' }} justify="center" wrap>
+            <Box direction="row" gap="large" margin={{ bottom: 'medium', top: 'large' }} justify="center" wrap>
               <PoolsMetrics pools={pools.data} tinlake={props.tinlake} />
             </Box>
             <PoolList poolsData={pools.data} />
diff --git a/tinlake-ui/containers/Investment/View/InvestmentOverview.tsx b/tinlake-ui/containers/Investment/View/InvestmentOverview.tsx
index 10ba33c3b4..5e7e806aae 100644
--- a/tinlake-ui/containers/Investment/View/InvestmentOverview.tsx
+++ b/tinlake-ui/containers/Investment/View/InvestmentOverview.tsx
@@ -140,7 +140,9 @@ const InvestmentOverview: React.FC<Props> = (props: Props) => {
                 </TableRow>
                 <TableRow>
                   <TableCell scope="row">
-                    <Tooltip id="financingFee">Average Financing Fee</Tooltip>
+                    <Tooltip id="financingFee" underline>
+                      Average Financing Fee
+                    </Tooltip>
                   </TableCell>
                   <TableCell style={{ textAlign: 'end' }}>
                     <LoadingValue done={avgInterestRate !== undefined}>
diff --git a/tinlake-ui/containers/Investment/View/TrancheOverview.tsx b/tinlake-ui/containers/Investment/View/TrancheOverview.tsx
index 1bff4431a2..97df46fc4f 100644
--- a/tinlake-ui/containers/Investment/View/TrancheOverview.tsx
+++ b/tinlake-ui/containers/Investment/View/TrancheOverview.tsx
@@ -1,4 +1,3 @@
-import { Tooltip as AxisTooltip } from '@centrifuge/axis-tooltip'
 import { baseToDisplay, feeToInterestRate, ITinlake } from '@centrifuge/tinlake-js'
 import BN from 'bn.js'
 import { Anchor, Box, Button, Heading, Table, TableBody, TableCell, TableRow } from 'grommet'
@@ -9,6 +8,7 @@ import styled from 'styled-components'
 import InvestAction from '../../../components/InvestAction'
 import { LoadingValue } from '../../../components/LoadingValue/index'
 import { PoolLink } from '../../../components/PoolLink'
+import { Tooltip } from '../../../components/Tooltip'
 import config, { Pool } from '../../../config'
 import { ensureAuthed } from '../../../ducks/auth'
 import { loadPool, PoolState } from '../../../ducks/pool'
@@ -315,7 +315,7 @@ const TrancheOverview: React.FC<Props> = (props: Props) => {
             config.featureFlagNewOnboardingPools.includes(props.pool.addresses.ROOT_CONTRACT))) && (
           <>
             <Info>
-              <AxisTooltip title="DROP tokens earn yield on the outstanding assets at the fixed DROP rate (APR). The current yield may deviate due to compounding effects or unused liquidity in the pool reserve. The current 30d DROP APY is the annualized return of the pool's DROP token over the last 30 days.">
+              <Tooltip title="DROP tokens earn yield on the outstanding assets at the fixed DROP rate (APR). The current yield may deviate due to compounding effects or unused liquidity in the pool reserve. The current 30d DROP APY is the annualized return of the pool's DROP token over the last 30 days.">
                 {dropYield && !(pool?.data?.netAssetValue.isZero() && pool?.data?.reserve.isZero()) && (
                   <>
                     Current DROP yield (30d APY): <b>{dropYield}%</b>
@@ -326,7 +326,7 @@ const TrancheOverview: React.FC<Props> = (props: Props) => {
                 <b>{toPrecision(feeToInterestRate(trancheData?.interestRate || new BN(0)), 2)}%</b>
                 <br />
                 Minimum investment amount: <b>5000 {props.pool?.metadata.currencySymbol || 'DAI'}</b>
-              </AxisTooltip>
+              </Tooltip>
             </Info>
             <Box gap="small" justify="end" direction="row" margin={{ top: 'medium' }}>
               <PoolLink href={'/onboarding'}>

From f29727ed2f4254acd7a4d74086b5a80337ab921c Mon Sep 17 00:00:00 2001
From: Onno Visser <visser.onno@gmail.com>
Date: Fri, 6 Aug 2021 15:06:31 +0200
Subject: [PATCH 10/11] update axis-tooltip

---
 tinlake-ui/package.json |  2 +-
 yarn.lock               | 10 +++++-----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/tinlake-ui/package.json b/tinlake-ui/package.json
index a6808444c6..b0bbcdff6c 100644
--- a/tinlake-ui/package.json
+++ b/tinlake-ui/package.json
@@ -40,7 +40,7 @@
     "@centrifuge/axis-spinner": "0.4.2-develop.109",
     "@centrifuge/axis-theme": "0.4.2-develop.145",
     "@centrifuge/axis-token-input": "0.4.1-develop.c79e643.146+c79e643",
-    "@centrifuge/axis-tooltip": "0.4.2-develop.6d6e183.148",
+    "@centrifuge/axis-tooltip": "0.4.2-develop.3ad09d7.144+3ad09d7",
     "@centrifuge/axis-utils": "0.4.2-develop.109",
     "@centrifuge/onboarding-api": "workspace:*",
     "@centrifuge/tinlake-js": "workspace:*",
diff --git a/yarn.lock b/yarn.lock
index 795f30c67f..2224f92b56 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2425,15 +2425,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@centrifuge/axis-tooltip@npm:0.4.2-develop.6d6e183.148":
-  version: 0.4.2-develop.6d6e183.148
-  resolution: "@centrifuge/axis-tooltip@npm:0.4.2-develop.6d6e183.148"
+"@centrifuge/axis-tooltip@npm:0.4.2-develop.3ad09d7.144+3ad09d7":
+  version: 0.4.2-develop.3ad09d7.144
+  resolution: "@centrifuge/axis-tooltip@npm:0.4.2-develop.3ad09d7.144"
   peerDependencies:
     grommet: 2.7.x
     react: ">= 16.6.1"
     react-dom: ">= 16.6.1"
     styled-components: ">= 4.x"
-  checksum: 4788979abccf83ce98f61810aff526d13cc1e777f255cffec06b1150d28dcdea525d679c2f9958cb242990bbb2dcf00f2e7a5f5de7c8d51145ef10ab16a5226d
+  checksum: 31e3bb401ca73ca3ddf8f2f97bfd456279b437490c9c85e9759d034267d7a9a11519ac1c9c8e4b7293fbd45425b2eaec686e67eddfd325f55b5a9a85c830403e
   languageName: node
   linkType: hard
 
@@ -2763,7 +2763,7 @@ __metadata:
     "@centrifuge/axis-spinner": 0.4.2-develop.109
     "@centrifuge/axis-theme": 0.4.2-develop.145
     "@centrifuge/axis-token-input": 0.4.1-develop.c79e643.146+c79e643
-    "@centrifuge/axis-tooltip": 0.4.2-develop.6d6e183.148
+    "@centrifuge/axis-tooltip": 0.4.2-develop.3ad09d7.144+3ad09d7
     "@centrifuge/axis-utils": 0.4.2-develop.109
     "@centrifuge/onboarding-api": "workspace:*"
     "@centrifuge/tinlake-js": "workspace:*"

From c98b931dd7c06959ffa03a57d30777a0f398ba6d Mon Sep 17 00:00:00 2001
From: Onno Visser <visser.onno@gmail.com>
Date: Fri, 6 Aug 2021 15:23:53 +0200
Subject: [PATCH 11/11] fix black line on tooltip buttons

---
 tinlake-ui/components/Tooltip/index.tsx | 19 +++++++++++++++++--
 1 file changed, 17 insertions(+), 2 deletions(-)

diff --git a/tinlake-ui/components/Tooltip/index.tsx b/tinlake-ui/components/Tooltip/index.tsx
index ad48a82919..cdab490eb4 100644
--- a/tinlake-ui/components/Tooltip/index.tsx
+++ b/tinlake-ui/components/Tooltip/index.tsx
@@ -26,18 +26,33 @@ interface Tooltip {
 
 type Props = PropsWithID | PropsWithoutID
 
-const Wrapper = styled.span<{ underline?: boolean }>`
+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) => {
   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}>
+    <Wrapper underline={props.underline} fix={fix}>
       <AxisTooltip
         title={title}
         description={description}