Add feedback

centrifuge-app/src/components/LayoutBase/styles.tsx

@@ -142,7 +142,7 @@ export const WalletInner = styled(Stack)`
   height: 80px;
   justify-content: center;
   pointer-events: auto;
-  width: 250px;
+  width: 200px;
 
   @media (min-width: ${({ theme }) => theme.breakpoints[BREAK_POINT_COLUMNS]}) {
     justify-content: flex-end;

centrifuge-app/src/components/Tooltips.tsx

@@ -1,8 +1,18 @@
 import { Tooltip as FabricTooltip, Text, TextProps } from '@centrifuge/fabric'
 import * as React from 'react'
 import { useParams } from 'react-router'
+import styled from 'styled-components'
 import { usePool } from '../utils/usePools'
 
+const StyledText = styled(Text)<{ hoverable?: boolean }>`
+  ${({ hoverable }) =>
+    hoverable &&
+    `
+    &:hover {
+     text-decoration: underline
+    }
+  `}
+`
 function ValueLockedTooltipBody({ poolId }: { poolId?: string }) {
   const { pid: poolIdParam } = useParams<{ pid: string }>()
   const pool = usePool(poolId || poolIdParam || '', false)
@@ -354,21 +364,31 @@ export type TooltipsProps = {
   props?: any
   size?: 'med' | 'sm' | 'xs'
   color?: string
+  hoverable?: boolean
 } & Partial<Pick<TextProps, 'style' | 'body'>>
 
-export function Tooltips({ type, label: labelOverride, size = 'sm', props, color, ...textProps }: TooltipsProps) {
+export function Tooltips({
+  type,
+  label: labelOverride,
+  size = 'sm',
+  props,
+  color,
+  hoverable = false,
+  ...textProps
+}: TooltipsProps) {
   const { label, body } = type ? tooltipText[type] : { label: labelOverride, body: textProps.body }
   return (
     <FabricTooltip body={React.isValidElement(body) ? React.cloneElement(body, props) : body} {...textProps}>
       {typeof label === 'string' ? (
-        <Text
+        <StyledText
           textAlign="left"
           variant={size === 'sm' ? 'label2' : size === 'xs' ? 'body4' : 'label1'}
           color={size === 'sm' && !color ? 'textPrimary' : 'textSecondary'}
           fontWeight={size === 'sm' ? 'inherit' : 400}
+          hoverable={hoverable}
         >
           {labelOverride || label}
-        </Text>
+        </StyledText>
       ) : (
         label
       )}

centrifuge-app/src/pages/Loan/index.tsx

@@ -69,12 +69,15 @@ const StyledRouterLinkButton = styled(RouterLinkButton)`
   padding: 0px;
   width: fit-content;
   margin-left: 30px;
+  border: 4px solid transparent;
 
   > span {
     width: 34px;
+    border: 4px solid transparent;
   }
   &:hover {
-    background-color: ${({ theme }) => theme.colors.backgroundTertiary};
+    background-color: ${({ theme }) => theme.colors.backgroundSecondary};
+    border: ${({ theme }) => `4px solid ${theme.colors.backgroundTertiary}`};
     span {
       color: ${({ theme }) => theme.colors.textPrimary};
     }
@@ -279,7 +282,7 @@ function Loan() {
       )}
       {loan && pool && (
         <LayoutSection pt={2} pb={4} flex={1}>
-          <Grid height="fit-content" gridTemplateColumns={isOracle ? ['1fr', '66fr 34fr'] : ['1fr']} gap={[2, 2]}>
+          <Grid height="fit-content" gridTemplateColumns={isOracle ? ['1fr', '67fr 34fr'] : ['1fr']} gap={[2, 2]}>
             <React.Suspense fallback={<Spinner />}>
               <AssetPerformanceChart pool={pool} poolId={poolId} loanId={loanId} />
             </React.Suspense>

centrifuge-app/src/pages/Pool/Assets/index.tsx

@@ -64,7 +64,10 @@ export function PoolDetailAssets() {
   }
 
   const totalAssets = loans.reduce((sum, loan) => {
-    const amount = new CurrencyBalance(getAmount(loan as any, pool), pool.currency.decimals).toDecimal()
+    const amount =
+      hasValuationMethod(loan.pricing) && loan.pricing.valuationMethod !== 'cash'
+        ? new CurrencyBalance(getAmount(loan as any, pool), pool.currency.decimals).toDecimal()
+        : 0
 
     return sum.add(amount)
   }, Dec(0))
@@ -79,14 +82,17 @@ export function PoolDetailAssets() {
     Dec(0)
   )
 
+  const total = isTinlakePool ? pool.nav.total : pool.reserve.total.toDecimal().add(offchainReserve).add(totalAssets)
+  const totalNAV = isTinlakePool ? pool.nav.total : Dec(total).sub(pool.fees.totalPaid.toDecimal())
+
   const pageSummaryData: { label: React.ReactNode; value: React.ReactNode; heading?: boolean }[] = [
     {
-      label: <Tooltips label={`Total NAV (${pool.currency.symbol})`} type="totalNavMinus" />,
-      value: formatBalance(pool.nav.total.toDecimal()),
+      label: `Total NAV (${pool.currency.symbol})`,
+      value: formatBalance(totalNAV),
       heading: true,
     },
     {
-      label: <Tooltips label={`Onchain reserve (${pool.currency.symbol})`} type="onchainReserve" />,
+      label: <Tooltips hoverable label={`Onchain reserve (${pool.currency.symbol})`} type="onchainReserve" />,
       value: (
         <StyledRouterTextLink to={`${basePath}/${pool.id}/assets/0`}>
           <Text>{formatBalance(pool.reserve.total || 0)}</Text>
@@ -98,7 +104,7 @@ export function PoolDetailAssets() {
     ...(!isTinlakePool && cashLoans.length
       ? [
           {
-            label: <Tooltips label={`Offchain cash (USD)`} type="offchainCash" />,
+            label: <Tooltips hoverable label="Offchain cash (USD" type="offchainCash" />,
             value: <OffchainMenu value={formatBalance(offchainReserve)} loans={cashLoans} />,
             heading: false,
           },
@@ -107,6 +113,11 @@ export function PoolDetailAssets() {
             value: formatBalance(totalAssets),
             heading: false,
           },
+          {
+            label: `Accrued fees (${pool.currency.symbol})`,
+            value: `-${formatBalance(pool.fees.totalPaid)}`,
+            heading: false,
+          },
         ]
       : []),
   ]

centrifuge-react/src/components/WalletMenu/ConnectButton.tsx

@@ -6,7 +6,7 @@ type Props = WalletButtonProps & {
   label?: string
 }
 
-export function ConnectButton({ label = 'Connect', ...rest }: Props) {
+export function ConnectButton({ label = 'Connect wallet', ...rest }: Props) {
   const { showNetworks, pendingConnect } = useWallet()
 
   return (

fabric/src/components/Button/WalletButton.tsx

@@ -22,7 +22,6 @@ export type WalletButtonProps = Omit<
 
 const StyledButton = styled.button`
   display: inline-block;
-  width: 100%;
   padding: 0;
   border: none;
   appearance: none;

fabric/src/components/Tooltip/index.tsx

@@ -60,10 +60,18 @@ const placements: {
 const Container = styled(Stack)<{ pointer: PlacementAxis }>`
   background-color: ${({ theme }) => theme.colors.backgroundInverted};
   filter: ${({ theme }) => `drop-shadow(${theme.shadows.cardInteractive})`};
+  opacity: 0;
+  transform: translateY(-10px);
+  transition: opacity 0.2s ease, transform 0.2s ease;
+  will-change: opacity, transform;
+
+  &.show {
+    opacity: 1;
+    transform: translateY(0);
+  }
 
   &::before {
     --size: 5px;
-
     content: '';
     position: absolute;
     ${({ pointer }) => placements[pointer!]}
@@ -77,7 +85,7 @@ export function Tooltip({
   body,
   children,
   disabled,
-  delay = 1000,
+  delay = 200,
   bodyWidth,
   bodyPadding,
   triggerStyle,
@@ -108,6 +116,7 @@ export function Tooltip({
               {...tooltipElementProps}
               {...rest}
               ref={overlayRef}
+              className={state.isOpen ? 'show' : ''}
               backgroundColor="backgroundPrimary"
               p={bodyPadding ?? 1}
               borderRadius="tooltip"