diff --git a/centrifuge-app/src/components/LayoutBase/styles.tsx b/centrifuge-app/src/components/LayoutBase/styles.tsx index 9faef617e6..e51f59ff7a 100644 --- a/centrifuge-app/src/components/LayoutBase/styles.tsx +++ b/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; diff --git a/centrifuge-app/src/components/Tooltips.tsx b/centrifuge-app/src/components/Tooltips.tsx index 854d2b19c1..56fc99eff3 100644 --- a/centrifuge-app/src/components/Tooltips.tsx +++ b/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> -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 ( {typeof label === 'string' ? ( - {labelOverride || label} - + ) : ( label )} diff --git a/centrifuge-app/src/pages/Loan/index.tsx b/centrifuge-app/src/pages/Loan/index.tsx index 6c24331373..527e1eea8b 100644 --- a/centrifuge-app/src/pages/Loan/index.tsx +++ b/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 && ( - + }> diff --git a/centrifuge-app/src/pages/Pool/Assets/index.tsx b/centrifuge-app/src/pages/Pool/Assets/index.tsx index 578a6c9cce..e212d2cd35 100644 --- a/centrifuge-app/src/pages/Pool/Assets/index.tsx +++ b/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: , - value: formatBalance(pool.nav.total.toDecimal()), + label: `Total NAV (${pool.currency.symbol})`, + value: formatBalance(totalNAV), heading: true, }, { - label: , + label: , value: ( {formatBalance(pool.reserve.total || 0)} @@ -98,7 +104,7 @@ export function PoolDetailAssets() { ...(!isTinlakePool && cashLoans.length ? [ { - label: , + label: , value: , 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, + }, ] : []), ] diff --git a/centrifuge-react/src/components/WalletMenu/ConnectButton.tsx b/centrifuge-react/src/components/WalletMenu/ConnectButton.tsx index 0190f0cc7e..4cb6592e25 100644 --- a/centrifuge-react/src/components/WalletMenu/ConnectButton.tsx +++ b/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 ( diff --git a/fabric/src/components/Button/WalletButton.tsx b/fabric/src/components/Button/WalletButton.tsx index a09a120c0c..2ced79aab2 100644 --- a/fabric/src/components/Button/WalletButton.tsx +++ b/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; diff --git a/fabric/src/components/Tooltip/index.tsx b/fabric/src/components/Tooltip/index.tsx index f926323331..e21423e7f1 100644 --- a/fabric/src/components/Tooltip/index.tsx +++ b/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" diff --git a/fabric/src/icon-svg/icon-chevron-down.svg b/fabric/src/icon-svg/icon-chevron-down.svg index f87d1768a3..e70d2ea0d0 100644 --- a/fabric/src/icon-svg/icon-chevron-down.svg +++ b/fabric/src/icon-svg/icon-chevron-down.svg @@ -1,3 +1,3 @@ - - + + diff --git a/fabric/src/icon-svg/icon-download.svg b/fabric/src/icon-svg/icon-download.svg index b1b7145f29..ea20391771 100644 --- a/fabric/src/icon-svg/icon-download.svg +++ b/fabric/src/icon-svg/icon-download.svg @@ -1,5 +1,5 @@ - - - + + +