diff --git a/centrifuge-app/src/components/IssuerSection.tsx b/centrifuge-app/src/components/IssuerSection.tsx index 0d454b27b..8ba196b26 100644 --- a/centrifuge-app/src/components/IssuerSection.tsx +++ b/centrifuge-app/src/components/IssuerSection.tsx @@ -27,10 +27,29 @@ type IssuerSectionProps = { metadata: Partial | undefined } +const StyledBox = styled(Box)` + padding: 30px 20px; + &:hover { + background: ${SUBTLE_GRAY}; + border-radius: 0px; + } +` + +const HoverBox = styled(StyledBox)` + padding: 8px 22px; + border-radius: 4px; + background-color: ${SUBTLE_GRAY}; + &:hover { + a { + color: ${({ theme }) => theme.colors.textGold}; + } + } +` + const reportLinks = [ { label: 'Balance sheet', href: '/balance-sheet', icon: }, { label: 'Profit & loss', href: '/profit-and-loss', icon: }, - { label: 'Cashflow statement', href: '/cash-flow-statement', icon: }, + { label: 'Cash flow statement', href: '/cash-flow-statement', icon: }, ] const StyledRouterTextLink = styled(RouterTextLink)` @@ -54,32 +73,29 @@ export function ReportDetails({ metadata }: IssuerSectionProps) { Reports - + View all - + - + {reportLinks.map((link, i) => ( - - - {link.icon} - - {link.label} - - - - + + + + {link.icon} + + {link.label} + + + + + ))} @@ -109,7 +125,7 @@ export function IssuerDetails({ metadata }: IssuerSectionProps) { show: !!metadata?.pool?.issuer.email, }, { - label: 'Executive Summary', + label: 'Executive summary', show: !!metadata?.pool?.links.executiveSummary, onClick: () => setIsDialogOpen(true), }, diff --git a/centrifuge-app/src/components/LayoutBase/styles.tsx b/centrifuge-app/src/components/LayoutBase/styles.tsx index c80838132..0a3be4b86 100644 --- a/centrifuge-app/src/components/LayoutBase/styles.tsx +++ b/centrifuge-app/src/components/LayoutBase/styles.tsx @@ -204,7 +204,7 @@ export const ContentWrapper = styled.div` } @media (min-width: ${({ theme }) => theme.breakpoints['L']}) { - margin-left: 14vw; + margin-left: 15vw; width: calc(100% - 15vw); margin-top: 0; } diff --git a/centrifuge-app/src/components/PoolOverview/KeyMetrics.tsx b/centrifuge-app/src/components/PoolOverview/KeyMetrics.tsx index f3d4d8cc3..ed169d950 100644 --- a/centrifuge-app/src/components/PoolOverview/KeyMetrics.tsx +++ b/centrifuge-app/src/components/PoolOverview/KeyMetrics.tsx @@ -1,7 +1,6 @@ import { CurrencyBalance, DailyTrancheState, Price } from '@centrifuge/centrifuge-js' import { NetworkIcon, formatBalanceAbbreviated } from '@centrifuge/centrifuge-react' import { Box, Card, IconArrowRightWhite, IconMoody, IconSp, Shelf, Stack, Text, Tooltip } from '@centrifuge/fabric' -import { BN } from 'bn.js' import capitalize from 'lodash/capitalize' import startCase from 'lodash/startCase' import { useMemo } from 'react' @@ -66,18 +65,14 @@ export const KeyMetrics = ({ poolId }: Props) => { const poolFees = usePoolFees(poolId) const tranchesIds = pool.tranches.map((tranche) => tranche.id) const dailyTranches = useDailyTranchesStates(tranchesIds) - const totalNav = pool.nav.total.toFloat() const theme = useTheme() const averageMaturity = useAverageMaturity(poolId) - const pendingFees = useMemo(() => { - return new CurrencyBalance( - poolFees?.map((f) => f.amounts.pending).reduce((acc, f) => acc.add(f), new BN(0)) ?? new BN(0), - pool.currency.decimals + const expenseRatio = useMemo(() => { + return ( + poolFees?.map((f) => f.amounts?.percentOfNav.toPercent().toNumber()).reduce((acc, f) => acc + (f ?? 0), 0) ?? 0 ) - }, [poolFees, pool.currency.decimals]) - - const expenseRatio = (pendingFees.toFloat() / totalNav) * 100 + }, [poolFees]) const tranchesAPY = useMemo(() => { const thirtyDayAPY = getTodayValue(dailyTranches) @@ -186,7 +181,7 @@ export const KeyMetrics = ({ poolId }: Props) => { { metric: , - value: expenseRatio ? `${formatBalance(expenseRatio * 100, '', 2)}%` : '-', + value: expenseRatio ? `${formatBalance(expenseRatio, '', 2)}%` : '-', }, ] @@ -201,7 +196,6 @@ export const KeyMetrics = ({ poolId }: Props) => { {metrics.map(({ metric, value }, index) => { - console.log(metric, value) return ( diff --git a/centrifuge-app/src/components/Tooltips.tsx b/centrifuge-app/src/components/Tooltips.tsx index f6a3f7811..f97ce41d5 100644 --- a/centrifuge-app/src/components/Tooltips.tsx +++ b/centrifuge-app/src/components/Tooltips.tsx @@ -339,7 +339,7 @@ export const tooltipText = { body: 'The target APY for the tranche.', }, expenseRatio: { - label: 'Expense Ratio', + label: 'Expense ratio', body: 'The operating expenses of the fund as a percentage of the total NAV', }, }