From 2e99884b39e865e3ebadd6df889a0ddd852db19b Mon Sep 17 00:00:00 2001 From: katty barroso Date: Mon, 21 Oct 2024 11:38:56 +0200 Subject: [PATCH 01/12] Add rating to pool card and cleanup --- .../src/components/PoolCard/index.tsx | 41 ++++---- centrifuge-app/src/components/PoolList.tsx | 8 +- .../components/PoolOverview/KeyMetrics.tsx | 99 +++++++++++-------- 3 files changed, 84 insertions(+), 64 deletions(-) diff --git a/centrifuge-app/src/components/PoolCard/index.tsx b/centrifuge-app/src/components/PoolCard/index.tsx index 22b91605a..7cf615303 100644 --- a/centrifuge-app/src/components/PoolCard/index.tsx +++ b/centrifuge-app/src/components/PoolCard/index.tsx @@ -1,31 +1,16 @@ -import { CurrencyBalance, Rate, Token } from '@centrifuge/centrifuge-js' -import { Box, Card, Divider, Stack, Text, Thumbnail } from '@centrifuge/fabric' +import { CurrencyBalance, PoolMetadata, Rate, Token } from '@centrifuge/centrifuge-js' +import { Box, Card, Divider, Shelf, Stack, Text, Thumbnail } from '@centrifuge/fabric' import Decimal from 'decimal.js-light' import { useMemo } from 'react' import styled, { useTheme } from 'styled-components' import { daysBetween } from '../../utils/date' import { formatBalance, formatBalanceAbbreviated, formatPercentage } from '../../utils/formatting' import { CardHeader } from '../ListItemCardStyles' +import { RatingPill } from '../PoolOverview/KeyMetrics' import { RouterTextLink } from '../TextLink' import { Tooltips } from '../Tooltips' import { PoolStatus, PoolStatusKey } from './PoolStatus' -export type InnerMetadata = { - minInitialInvestment?: CurrencyBalance -} - -export type MetaData = { - tranches: { - [key: string]: InnerMetadata - } - pool: { - issuer: { - shortDescription?: string - } - investorType?: string - } -} - type TrancheWithCurrency = Pick const StyledRouterTextLink = styled(RouterTextLink)` @@ -36,7 +21,7 @@ const StyledRouterTextLink = styled(RouterTextLink)` const StyledCard = styled(Card)` width: 100%; max-width: 100%; - height: 320px; + height: 340px; margin-right: 12px; margin-bottom: 12px; padding: 12px; @@ -127,8 +112,9 @@ export type PoolCardProps = { apr?: Rate | null | undefined status?: PoolStatusKey iconUri?: string + isArchive?: boolean tranches?: TrancheWithCurrency[] - metaData?: MetaData + metaData?: PoolMetadata createdAt?: string } @@ -143,16 +129,19 @@ export function PoolCard({ tranches, metaData, createdAt, + isArchive, }: PoolCardProps) { const theme = useTheme() const isOneTranche = tranches && tranches?.length === 1 const isTinlakePool = poolId?.startsWith('0x') + const ratings = metaData?.pool?.poolRatings ?? [] const tinlakeKey = (Object.keys(tinlakeTranches).find( (key) => tinlakeTranches[key as TinlakeTranchesKey].name === name ) || 'none') as TinlakeTranchesKey const renderText = (text: string, isApr?: boolean, seniority?: number) => { + if (isArchive) return if ( (isApr && poolId === NS3_POOL_ID) || (isApr && poolId === DYF_POOL_ID) || @@ -306,6 +295,18 @@ export function PoolCard({ {isTinlakePool ? tinlakeTranches[tinlakeKey].investorType : metaData?.pool?.investorType ?? '-'} + {ratings.length ? ( + + + Rating + + + {ratings.map((rating) => { + return + })} + + + ) : null} ) diff --git a/centrifuge-app/src/components/PoolList.tsx b/centrifuge-app/src/components/PoolList.tsx index 5113ecced..39b9ffe8e 100644 --- a/centrifuge-app/src/components/PoolList.tsx +++ b/centrifuge-app/src/components/PoolList.tsx @@ -9,7 +9,7 @@ import { TinlakePool } from '../utils/tinlake/useTinlakePools' import { useIsAboveBreakpoint } from '../utils/useIsAboveBreakpoint' import { useListedPools } from '../utils/useListedPools' import { useMetadataMulti } from '../utils/useMetadata' -import { MetaData, PoolCard, PoolCardProps } from './PoolCard' +import { PoolCard, PoolCardProps } from './PoolCard' import { PoolStatusKey } from './PoolCard/PoolStatus' import { filterPools } from './PoolFilter/utils' @@ -44,7 +44,6 @@ export function PoolList() { const [listedPools, , metadataIsLoading] = useListedPools() const isLarge = useIsAboveBreakpoint('L') const isMedium = useIsAboveBreakpoint('M') - const isExtraLarge = useIsAboveBreakpoint('XL') const centPools = listedPools.filter(({ id }) => !id.startsWith('0x')) as Pool[] const centPoolsMetaData: PoolMetaDataPartial[] = useMetadataMulti( @@ -127,7 +126,6 @@ export function PoolList() { function ArchivedPools({ pools }: { pools: PoolCardProps[] }) { const isMedium = useIsAboveBreakpoint('M') const isLarge = useIsAboveBreakpoint('L') - const isExtraLarge = useIsAboveBreakpoint('XL') return ( @@ -138,7 +136,7 @@ function ArchivedPools({ pools }: { pools: PoolCardProps[] }) { status={pool.status} width={isLarge ? '33%' : isMedium ? '48%' : '100%'} > - + ))} @@ -162,7 +160,7 @@ export function poolsToPoolCardProps( status: getPoolStatus(pool), iconUri: metaData?.pool?.icon?.uri ? cent.metadata.parseMetadataUrl(metaData?.pool?.icon?.uri) : undefined, tranches: pool.tranches, - metaData: metaData as MetaData, + metaData: metaData as PoolMetadata, createdAt: pool.createdAt ?? '', } }) diff --git a/centrifuge-app/src/components/PoolOverview/KeyMetrics.tsx b/centrifuge-app/src/components/PoolOverview/KeyMetrics.tsx index 631449df1..0307b399c 100644 --- a/centrifuge-app/src/components/PoolOverview/KeyMetrics.tsx +++ b/centrifuge-app/src/components/PoolOverview/KeyMetrics.tsx @@ -46,6 +46,13 @@ type Tranche = Pick & { type TinlakeDataKey = keyof typeof tinlakeData +export type RatingType = { + agency?: string + reportUrl?: string + reportFile?: any + value?: string +} + const ratingIcons: { [key: string]: JSX.Element } = { "Moody's": , Particula: , @@ -90,8 +97,6 @@ export const KeyMetrics = ({ poolId }: Props) => { const poolFees = usePoolFees(poolId) const tranchesIds = pool.tranches.map((tranche) => tranche.id) const dailyTranches = useDailyTranchesStates(tranchesIds) - const theme = useTheme() - const cent = useCentrifuge() const averageMaturity = useAverageMaturity(poolId) const expenseRatio = useMemo(() => { @@ -190,39 +195,8 @@ export const KeyMetrics = ({ poolId }: Props) => { metric: 'Rating', value: ( - {metadata?.pool?.poolRatings.map((rating) => ( - - } - > - - {rating.agency && ratingIcons[rating.agency] ? ratingIcons[rating.agency] : } - {rating.value} - - + {metadata?.pool?.poolRatings.map((rating: RatingType) => ( + ))} ), @@ -275,6 +249,10 @@ const TooltipBody = ({ url?: string links?: { text: string; url: string }[] }) => { + const handleLinkClick = (e: React.MouseEvent) => { + e.stopPropagation() + } + return ( @@ -283,8 +261,8 @@ const TooltipBody = ({ {links ? ( links.map((link, index) => ( - - + + {link.text} @@ -294,7 +272,7 @@ const TooltipBody = ({ )) ) : ( - + {subtitle} @@ -313,7 +291,7 @@ const AvailableNetworks = ({ poolId }: { poolId: string }) => { const renderTooltipBody = (networkName: string, tranches: Tranche[], baseUrl: string) => { const links = tranches.map((tranche) => ({ - text: `View ${tranche.currency.name.split(' ').at(-1)}`, + text: `View Transactions`, url: `${baseUrl}/token/${tranche.id}`, })) @@ -353,3 +331,46 @@ const AvailableNetworks = ({ poolId }: { poolId: string }) => { ) } + +export const RatingPill = ({ agency, reportUrl, reportFile, value, size }: RatingType) => { + const theme = useTheme() + const cent = useCentrifuge() + return ( + + + } + > + + {agency && ratingIcons[agency] ? ratingIcons[agency] : } + + {value} + + + + + ) +} From 0e18fe9ffb64e1f7a8097c41d9b43edd693d1389 Mon Sep 17 00:00:00 2001 From: katty barroso Date: Mon, 21 Oct 2024 12:05:17 +0200 Subject: [PATCH 02/12] Fix mobile issues on pool overview page --- centrifuge-app/src/components/IssuerSection.tsx | 9 +++++---- centrifuge-app/src/pages/Pool/Overview/index.tsx | 5 +++-- 2 files changed, 8 insertions(+), 6 deletions(-) diff --git a/centrifuge-app/src/components/IssuerSection.tsx b/centrifuge-app/src/components/IssuerSection.tsx index 0af8d87db..ba2d85c7e 100644 --- a/centrifuge-app/src/components/IssuerSection.tsx +++ b/centrifuge-app/src/components/IssuerSection.tsx @@ -3,6 +3,7 @@ import { useCentrifuge } from '@centrifuge/centrifuge-react' import { AnchorButton, Box, + Grid, IconBalanceSheet, IconCashflow, IconChevronRight, @@ -174,15 +175,15 @@ export function IssuerDetails({ metadata }: IssuerSectionProps) { )} - - + + {metadata?.pool?.issuer.name} {metadata?.pool?.issuer.description} {metadata?.pool?.issuer?.categories?.length ? ( - + {metadata?.pool?.issuer?.categories.map((category) => ( @@ -195,7 +196,7 @@ export function IssuerDetails({ metadata }: IssuerSectionProps) { ))} ) : null} - + }> From 4da76fe2b539c88949a0ebcc3dfd94a62cc8d144 Mon Sep 17 00:00:00 2001 From: katty barroso Date: Tue, 22 Oct 2024 11:24:29 +0200 Subject: [PATCH 03/12] Increase height of card --- centrifuge-app/src/components/PoolCard/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/centrifuge-app/src/components/PoolCard/index.tsx b/centrifuge-app/src/components/PoolCard/index.tsx index 7cf615303..7df44ae0d 100644 --- a/centrifuge-app/src/components/PoolCard/index.tsx +++ b/centrifuge-app/src/components/PoolCard/index.tsx @@ -21,11 +21,11 @@ const StyledRouterTextLink = styled(RouterTextLink)` const StyledCard = styled(Card)` width: 100%; max-width: 100%; - height: 340px; margin-right: 12px; margin-bottom: 12px; padding: 12px; border: 1px solid rgba(207, 207, 207, 0.5); + height: 350px; &:hover { border: 1px solid ${({ theme }) => theme.colors.textPrimary}; From fb41f55ceb1343728cec745e9d464eb2caf31bea Mon Sep 17 00:00:00 2001 From: katty barroso Date: Thu, 24 Oct 2024 09:51:34 +0200 Subject: [PATCH 04/12] Add fixes to data report tab and data table --- centrifuge-app/src/components/DataTable.tsx | 27 +- .../src/components/Report/AssetList.tsx | 25 +- .../components/Report/AssetTransactions.tsx | 13 +- .../src/components/Report/DataFilter.tsx | 368 +++++++++--------- .../src/components/Report/FeeTransactions.tsx | 2 +- .../src/components/Report/InvestorList.tsx | 8 +- .../Report/InvestorTransactions.tsx | 12 +- .../src/components/Report/TokenPrice.tsx | 2 +- centrifuge-app/src/components/TextLink.tsx | 3 - 9 files changed, 236 insertions(+), 224 deletions(-) diff --git a/centrifuge-app/src/components/DataTable.tsx b/centrifuge-app/src/components/DataTable.tsx index 73fc0ac58..bf28c0b8a 100644 --- a/centrifuge-app/src/components/DataTable.tsx +++ b/centrifuge-app/src/components/DataTable.tsx @@ -129,7 +129,7 @@ export const DataTable = >({ {showHeader && ( {columns.map((col, i) => ( - + {col?.header && typeof col.header !== 'string' && col?.sortKey && React.isValidElement(col.header) ? React.cloneElement(col.header as React.ReactElement, { @@ -142,6 +142,7 @@ export const DataTable = >({ ))} )} + {pinnedData?.map((row, i) => ( ` borderBottomStyle: 'solid', borderBottomWidth: '1px', borderBottomColor: 'borderPrimary', + borderLeftStyle: 'solid', + borderLeftWidth: '1px', + borderLeftColor: 'borderPrimary', + borderRightStyle: 'solid', + borderRightWidth: '1px', + borderRightColor: 'borderPrimary', backgroundColor: 'transparent', // using a&:hover caused the background sometimes not to update when switching themes '&:hover': @@ -275,6 +282,13 @@ export const DataCol = styled(Text)<{ align: Column['align']; isLabel?: boolean min-width: 0; overflow: hidden; white-space: nowrap; + ${({ isLabel }) => + isLabel && + css({ + position: 'sticky', + left: 0, + zIndex: 1, + })} ${({ align }) => { switch (align) { @@ -296,10 +310,19 @@ export const DataCol = styled(Text)<{ align: Column['align']; isLabel?: boolean }} ` -const HeaderCol = styled(DataCol)` +const HeaderCol = styled(DataCol)<{ isLabel?: boolean }>` height: 32px; align-items: center; + ${({ isLabel }) => + isLabel && + css({ + position: 'sticky', + left: 0, + zIndex: 2, + backgroundColor: 'backgroundSecondary', + })} + &:has(:focus-visible) { box-shadow: inset 0 0 0 3px var(--fabric-focus); } diff --git a/centrifuge-app/src/components/Report/AssetList.tsx b/centrifuge-app/src/components/Report/AssetList.tsx index 0166310ce..6db290375 100644 --- a/centrifuge-app/src/components/Report/AssetList.tsx +++ b/centrifuge-app/src/components/Report/AssetList.tsx @@ -27,42 +27,42 @@ function getColumnConfig(isPrivate: boolean, symbol: string) { { header: 'Name', align: 'left', csvOnly: false, formatter: noop }, { header: 'Value', - align: 'right', + align: 'left', csvOnly: false, sortable: true, formatter: (v: any) => (v ? formatBalance(v, symbol, 2) : '-'), }, { header: 'Principal outstanding', - align: 'right', + align: 'left', csvOnly: false, sortable: true, formatter: (v: any) => (v ? formatBalance(v, symbol, 2) : '-'), }, { header: 'Interest outstanding', - align: 'right', + align: 'left', csvOnly: false, sortable: true, formatter: (v: any) => (v ? formatBalance(v, symbol, 2) : '-'), }, { header: 'Principal repaid', - align: 'right', + align: 'left', csvOnly: false, sortable: true, formatter: (v: any) => (v ? formatBalance(v, symbol, 2) : '-'), }, { header: 'Interest repaid', - align: 'right', + align: 'left', csvOnly: false, sortable: true, formatter: (v: any) => (v ? formatBalance(v, symbol, 2) : '-'), }, { header: 'Additional repaid', - align: 'right', + align: 'left', csvOnly: false, sortable: true, formatter: (v: any) => (v ? formatBalance(v, symbol, 2) : '-'), @@ -124,28 +124,28 @@ function getColumnConfig(isPrivate: boolean, symbol: string) { { header: 'Name', align: 'left', csvOnly: false, formatter: noop }, { header: 'Market value', - align: 'right', + align: 'left', csvOnly: false, sortable: true, formatter: (v: any) => (v ? formatBalance(v, symbol, 2) : '-'), }, { header: 'Face value', - align: 'right', + align: 'left', csvOnly: false, sortable: true, formatter: (v: any) => (v ? formatBalance(v, symbol, 2) : '-'), }, { header: 'Quantity', - align: 'right', + align: 'left', csvOnly: false, sortable: true, formatter: (v: any) => (v ? formatBalance(v, undefined, 2) : '-'), }, { header: 'Market price', - align: 'right', + align: 'left', csvOnly: false, sortable: true, formatter: (v: any) => (v ? formatBalance(v, symbol, 2) : '-'), @@ -159,14 +159,14 @@ function getColumnConfig(isPrivate: boolean, symbol: string) { }, { header: 'Unrealized profit', - align: 'right', + align: 'left', csvOnly: false, sortable: true, formatter: (v: any) => (v ? formatBalance(v, symbol, 2) : '-'), }, { header: 'Realized profit', - align: 'right', + align: 'left', csvOnly: false, sortable: true, formatter: (v: any) => (v ? formatBalance(v, symbol, 2) : '-'), @@ -192,6 +192,7 @@ export function AssetList({ pool }: { pool: Pool }) { align: col.align, header: col.sortable ? : col.header, sortKey: col.sortable ? `value[${index}]` : undefined, + width: '177px', cell: (row: TableDataRow & { id: string }) => { const assetId = row?.id?.split('-')[1] return col.header === 'Name' ? ( diff --git a/centrifuge-app/src/components/Report/AssetTransactions.tsx b/centrifuge-app/src/components/Report/AssetTransactions.tsx index 633f5f139..86209f59e 100644 --- a/centrifuge-app/src/components/Report/AssetTransactions.tsx +++ b/centrifuge-app/src/components/Report/AssetTransactions.tsx @@ -22,9 +22,10 @@ export function AssetTransactions({ pool }: { pool: Pool }) { const columnConfig = [ { header: 'Asset ID', - align: 'left', + align: 'center', csvOnly: false, formatter: noop, + width: '80px', }, { header: 'Asset name', @@ -34,7 +35,7 @@ export function AssetTransactions({ pool }: { pool: Pool }) { }, { header: 'Epoch', - align: 'right', + align: 'center', csvOnly: false, formatter: noop, }, @@ -46,7 +47,7 @@ export function AssetTransactions({ pool }: { pool: Pool }) { }, { header: 'Transaction type', - align: 'right', + align: 'left', csvOnly: false, formatter: noop, }, @@ -58,14 +59,15 @@ export function AssetTransactions({ pool }: { pool: Pool }) { }, { header: 'Currency', - align: 'right', + align: 'left', csvOnly: true, formatter: noop, }, { header: 'Transaction', - align: 'right', + align: 'center', csvOnly: false, + width: '80px', formatter: (v: any) => ( {col.formatter((row.value as any)[index])}, csvOnly: col.csvOnly, + width: col.width ?? '252px', })) .filter((col) => !col.csvOnly) diff --git a/centrifuge-app/src/components/Report/DataFilter.tsx b/centrifuge-app/src/components/Report/DataFilter.tsx index 6b146626b..e85fdf5d4 100644 --- a/centrifuge-app/src/components/Report/DataFilter.tsx +++ b/centrifuge-app/src/components/Report/DataFilter.tsx @@ -1,9 +1,9 @@ import { Loan, Pool } from '@centrifuge/centrifuge-js' import { useGetNetworkName } from '@centrifuge/centrifuge-react' -import { AnchorButton, Box, DateInput, IconDownload, SearchInput, Select, Shelf } from '@centrifuge/fabric' +import { AnchorButton, Box, DateInput, Grid, IconDownload, SearchInput, Select, Stack, Text } from '@centrifuge/fabric' import * as React from 'react' import { useNavigate } from 'react-router' -import { useIsAboveBreakpoint } from '../../../src/utils/useIsAboveBreakpoint' +import { formatDate } from '../../../src/utils/date' import { usePool } from '../../../src/utils/usePools' import { nftMetadataSchema } from '../../schemas' import { useBasePath } from '../../utils/useBasePath' @@ -45,7 +45,6 @@ export function DataFilter({ poolId }: ReportFilterProps) { const navigate = useNavigate() const basePath = useBasePath() const pool = usePool(poolId) as Pool - const isMedium = useIsAboveBreakpoint('M') const { data: domains } = useActiveDomains(pool.id) const getNetworkName = useGetNetworkName() @@ -64,208 +63,195 @@ export function DataFilter({ poolId }: ReportFilterProps) { ] return ( - - - - - ) => { + const { value } = event.target + if (value) { + navigate(`${basePath}/${pool.id}/data/${value}`) + } + }} + /> - {['pool-balance', 'token-price'].includes(report) && ( - - setLoanStatus(event.target.value)} - /> - - )} + {['pool-balance', 'token-price'].includes(report) && ( + ({ - label: token.currency.name, - value: token.id, - })), - ]} - value={activeTranche} - onChange={(event) => { - if (event.target.value) { - setActiveTranche(event.target.value) - } - }} - /> - - )} + {report === 'asset-list' && ( + setLoan(event.target.value)} - value={loan} - options={[ - { label: 'All', value: 'all' }, - ...(loans?.map((l) => ({ - value: l.id, - label: , - })) ?? []), - ]} - /> - - )} + {(report === 'investor-list' || report === 'investor-tx') && ( + { - if (event.target.value) { - setTxType(event.target.value) - } - }} - /> - - )} + {report === 'asset-tx' && ( + ({ - label: getNetworkName(domain.chainId), - value: String(domain.chainId), - })), - ]} - value={network} - onChange={(e) => { - const { value } = e.target - if (value) { - setNetwork(isNaN(Number(value)) ? value : Number(value)) - } - }} - /> - - - )} - - - - - setStartDate(e.target.value)} /> - - setEndDate(e.target.value)} /> - - } - small - variant="inverted" - style={{ marginLeft: '12px', marginTop: '22px' }} - > - Download - - - + { label: 'Submitted orders', value: 'orders' }, + { label: 'Executed orders', value: 'executions' }, + { label: 'Transfers', value: 'transfers' }, + ] + : report === 'asset-tx' + ? [ + { label: 'All', value: 'all' }, + { label: 'Created', value: 'Created' }, + { label: 'Financed', value: 'Financed' }, + { label: 'Repaid', value: 'Repaid' }, + { label: 'Priced', value: 'Priced' }, + { label: 'Closed', value: 'Closed' }, + ] + : [ + { label: 'All', value: 'all' }, + { label: formatPoolFeeTransactionType('CHARGED'), value: 'CHARGED' }, + { label: formatPoolFeeTransactionType('UNCHARGED'), value: 'UNCHARGED' }, + { label: formatPoolFeeTransactionType('ACCRUED'), value: 'ACCRUED' }, + { label: formatPoolFeeTransactionType('PAID'), value: 'PAID' }, + ] + } + value={txType} + onChange={(event) => { + if (event.target.value) { + setTxType(event.target.value) + } + }} + /> + )} - {['investor-tx', 'investor-list'].includes(report) && ( - + {['investor-tx', 'investor-list'].includes(report) && ( + (null) @@ -92,7 +94,7 @@ export function Tooltip({ return ( <> - + {children} {state.isOpen && ( diff --git a/fabric/src/theme/tokens/theme.ts b/fabric/src/theme/tokens/theme.ts index e47dcff57..389ec224f 100644 --- a/fabric/src/theme/tokens/theme.ts +++ b/fabric/src/theme/tokens/theme.ts @@ -31,7 +31,7 @@ const colors = { backgroundThumbnail: grayScale[500], backgroundInverted: grayScale[800], - borderPrimary: grayScale[50], + borderPrimary: grayScale[100], borderSecondary: grayScale[300], statusDefault, From 97ab29e96920c93ba4907c321d40e16484ef8d9f Mon Sep 17 00:00:00 2001 From: katty barroso Date: Fri, 25 Oct 2024 12:04:03 +0200 Subject: [PATCH 06/12] Fix table scrolling --- centrifuge-app/src/components/DataTable.tsx | 27 ++++++++++++++++++--- fabric/src/theme/tokens/theme.ts | 2 +- 2 files changed, 24 insertions(+), 5 deletions(-) diff --git a/centrifuge-app/src/components/DataTable.tsx b/centrifuge-app/src/components/DataTable.tsx index 7c0fc4889..37c927dbe 100644 --- a/centrifuge-app/src/components/DataTable.tsx +++ b/centrifuge-app/src/components/DataTable.tsx @@ -104,10 +104,20 @@ export const DataTable = >({ scrollable = false, hideBorder, }: DataTableProps) => { + const tableRef = React.useRef(null) + const [offsetTop, setOffsetTop] = React.useState(0) const [orderBy, setOrderBy] = React.useState>( defaultSortKey ? { [defaultSortKey]: defaultSortOrder } : {} ) + React.useEffect(() => { + if (tableRef.current) { + const rect = tableRef.current.getBoundingClientRect() + const offsetFromTopOfScreen = rect.top + window.scrollY + setOffsetTop(offsetFromTopOfScreen) + } + }, []) + const [currentSortKey, setCurrentSortKey] = React.useState(defaultSortKey || '') const updateSortOrder = (sortKey: Column['sortKey']) => { @@ -127,7 +137,15 @@ export const DataTable = >({ const templateColumns = `[start] ${columns.map((col) => col.width ?? 'minmax(min-content, 1fr)').join(' ')} [end]` return ( - + {showHeader && ( {columns.map((col, i) => ( @@ -207,11 +225,12 @@ export const DataTable = >({ ) } -const TableGrid = styled(Grid)<{ scrollable?: boolean }>` - ${({ scrollable }) => +const TableGrid = styled(Grid)<{ scrollable?: boolean; offsetTop?: number }>` + ${({ scrollable, offsetTop }) => scrollable && css({ - maxHeight: 'calc(100vh - 320px)', + maxHeight: `calc(100vh - ${offsetTop}px)`, + paddingBottom: 20, overflowY: 'auto', overflowX: 'auto', })} diff --git a/fabric/src/theme/tokens/theme.ts b/fabric/src/theme/tokens/theme.ts index 389ec224f..e47dcff57 100644 --- a/fabric/src/theme/tokens/theme.ts +++ b/fabric/src/theme/tokens/theme.ts @@ -31,7 +31,7 @@ const colors = { backgroundThumbnail: grayScale[500], backgroundInverted: grayScale[800], - borderPrimary: grayScale[100], + borderPrimary: grayScale[50], borderSecondary: grayScale[300], statusDefault, From f5868e5daf3d2e1a8bda5e5ee9b5cd6b2cbc5b41 Mon Sep 17 00:00:00 2001 From: katty barroso Date: Fri, 25 Oct 2024 12:34:16 +0200 Subject: [PATCH 07/12] Update buttons border --- .../src/components/PoolOverview/PoolPerfomance.tsx | 4 ++-- fabric/src/components/Button/VisualButton.tsx | 3 +-- fabric/src/theme/tokens/baseTheme.ts | 4 ++-- fabric/src/theme/tokens/theme.ts | 8 ++++---- 4 files changed, 9 insertions(+), 10 deletions(-) diff --git a/centrifuge-app/src/components/PoolOverview/PoolPerfomance.tsx b/centrifuge-app/src/components/PoolOverview/PoolPerfomance.tsx index 4d51641f8..47191b355 100644 --- a/centrifuge-app/src/components/PoolOverview/PoolPerfomance.tsx +++ b/centrifuge-app/src/components/PoolOverview/PoolPerfomance.tsx @@ -4,8 +4,8 @@ import PoolPerformanceChart from '../Charts/PoolPerformanceChart' import { Spinner } from '../Spinner' export const PoolPerformance = () => ( - }> - + }> + diff --git a/fabric/src/components/Button/VisualButton.tsx b/fabric/src/components/Button/VisualButton.tsx index 65b9f03f9..93dcf4b46 100644 --- a/fabric/src/components/Button/VisualButton.tsx +++ b/fabric/src/components/Button/VisualButton.tsx @@ -97,12 +97,11 @@ export const StyledButton = styled.span( borderRadius: 'button', pointerEvents: $disabled ? 'none' : 'initial', minHeight: $small ? 32 : 40, - boxShadow: variant !== 'tertiary' && !$disabled ? shadow : 'none', '&:hover': { color: fgHover, backgroundColor: isTertiaryIcon ? undefined : bgHover, - borderColor: isTertiaryIcon ? undefined : borderHover, + boxShadow: variant !== 'tertiary' && !$disabled ? shadow : 'none', }, '&:active': { color: fgPressed, diff --git a/fabric/src/theme/tokens/baseTheme.ts b/fabric/src/theme/tokens/baseTheme.ts index 985322208..b01560477 100644 --- a/fabric/src/theme/tokens/baseTheme.ts +++ b/fabric/src/theme/tokens/baseTheme.ts @@ -31,9 +31,9 @@ export const baseTheme: Omit = { cardInteractive: '1px 3px 6px rgba(0, 0, 0, 0.15)', cardActive: ' 0 0 0 1px var(--fabric-focus), 0 1px 5px rgba(0, 0, 0, 0.2)', cardOverlay: '4px 8px 24px rgba(0, 0, 0, 0.2)', - buttonPrimary: `1px 2px 7px var(--fabric-shadowButtonPrimary)`, + buttonPrimary: `0px 0px 0px 3px var(--fabric-shadowButtonPrimary)`, buttonSecondary: `1px 2px 1px var(--fabric-shadowButtonSecondary)`, - buttonInverted: `1px 2px 7px var(--fabric-shadowButtonInverted)`, + buttonInverted: `0px 0px 0px 3px var(--fabric-shadowButtonInverted)`, }, zIndices: { sticky: 10, diff --git a/fabric/src/theme/tokens/theme.ts b/fabric/src/theme/tokens/theme.ts index e47dcff57..e1bf4d004 100644 --- a/fabric/src/theme/tokens/theme.ts +++ b/fabric/src/theme/tokens/theme.ts @@ -31,8 +31,8 @@ const colors = { backgroundThumbnail: grayScale[500], backgroundInverted: grayScale[800], - borderPrimary: grayScale[50], - borderSecondary: grayScale[300], + borderPrimary: grayScale[100], + borderSecondary: 'rgba(207, 207, 207, 0.50)', statusDefault, statusInfo, @@ -62,7 +62,7 @@ const colors = { borderButtonPrimaryHover: yellowScale[100], borderButtonPrimaryPressed: yellowScale[100], borderButtonPrimaryDisabled: 'transparent', - shadowButtonPrimary: 'transparent', + shadowButtonPrimary: yellowScale[100], backgroundButtonSecondary: black, backgroundButtonSecondaryFocus: black, @@ -112,7 +112,7 @@ const colors = { borderButtonInvertedHover: grayScale[50], borderButtonInvertedPressed: grayScale[50], borderButtonInvertedDisabled: 'transparent', - shadowButtonInverted: 'transparent', + shadowButtonInverted: grayScale[50], } export const colorTheme = { From befe6ebdf841df8fcbeca13abf2130eae9b38430 Mon Sep 17 00:00:00 2001 From: katty barroso Date: Mon, 28 Oct 2024 10:07:20 +0100 Subject: [PATCH 08/12] Fix bug on graph --- centrifuge-app/src/components/Charts/PoolPerformanceChart.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/centrifuge-app/src/components/Charts/PoolPerformanceChart.tsx b/centrifuge-app/src/components/Charts/PoolPerformanceChart.tsx index bd9659772..b4a7b07ab 100644 --- a/centrifuge-app/src/components/Charts/PoolPerformanceChart.tsx +++ b/centrifuge-app/src/components/Charts/PoolPerformanceChart.tsx @@ -276,6 +276,7 @@ function PoolPerformanceChart() { tickFormatter={(tick: number) => formatBalanceAbbreviated(tick, '', 2)} yAxisId="right" orientation="right" + domain={selectedTabIndex === 0 ? ['auto', 'auto'] : ['dataMin', 'dataMax']} /> Date: Mon, 28 Oct 2024 10:10:29 +0100 Subject: [PATCH 09/12] Fix view all button --- .../src/components/IssuerSection.tsx | 23 +++++++++---------- 1 file changed, 11 insertions(+), 12 deletions(-) diff --git a/centrifuge-app/src/components/IssuerSection.tsx b/centrifuge-app/src/components/IssuerSection.tsx index ba2d85c7e..edf56bc06 100644 --- a/centrifuge-app/src/components/IssuerSection.tsx +++ b/centrifuge-app/src/components/IssuerSection.tsx @@ -28,6 +28,10 @@ type IssuerSectionProps = { metadata: Partial | undefined } +const ButtonSections = styled(RouterTextLink)` + text-decoration: unset; +` + const StyledBox = styled(Box)` padding: 24px; &:hover { @@ -36,7 +40,10 @@ const StyledBox = styled(Box)` } ` -const HoverBox = styled(StyledBox)` +const StyledRouterTextLink = styled(RouterTextLink)` + color: white; + text-decoration: unset; + font-size: 14px; padding: 8px 22px; background-color: ${SUBTLE_GRAY}; border: 3px solid transparent; @@ -45,12 +52,6 @@ const HoverBox = styled(StyledBox)` border-radius: 4px; border-color: #91969b1a; } -` - -const StyledRouterTextLink = styled(RouterTextLink)` - color: white; - text-decoration: unset; - font-size: 14px; :active { color: white; } @@ -98,14 +99,12 @@ export function ReportDetails({ metadata }: IssuerSectionProps) { Reports - - View all - + View all {reportLinks.map((link, i) => ( - + - + ))} From dd5db7e4ba23841146974357204bc86515037043 Mon Sep 17 00:00:00 2001 From: katty barroso Date: Mon, 28 Oct 2024 10:22:42 +0100 Subject: [PATCH 10/12] Fix wallet button hover and align items --- centrifuge-app/src/components/PoolOverview/KeyMetrics.tsx | 2 +- fabric/src/theme/tokens/baseTheme.ts | 2 +- fabric/src/theme/tokens/theme.ts | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/centrifuge-app/src/components/PoolOverview/KeyMetrics.tsx b/centrifuge-app/src/components/PoolOverview/KeyMetrics.tsx index 4b82baa2a..d8374c65f 100644 --- a/centrifuge-app/src/components/PoolOverview/KeyMetrics.tsx +++ b/centrifuge-app/src/components/PoolOverview/KeyMetrics.tsx @@ -222,7 +222,7 @@ export const KeyMetrics = ({ poolId }: Props) => { {metrics.map(({ metric, value }, index) => { return ( - + {metric} diff --git a/fabric/src/theme/tokens/baseTheme.ts b/fabric/src/theme/tokens/baseTheme.ts index b01560477..f2f79e7a1 100644 --- a/fabric/src/theme/tokens/baseTheme.ts +++ b/fabric/src/theme/tokens/baseTheme.ts @@ -32,7 +32,7 @@ export const baseTheme: Omit = { cardActive: ' 0 0 0 1px var(--fabric-focus), 0 1px 5px rgba(0, 0, 0, 0.2)', cardOverlay: '4px 8px 24px rgba(0, 0, 0, 0.2)', buttonPrimary: `0px 0px 0px 3px var(--fabric-shadowButtonPrimary)`, - buttonSecondary: `1px 2px 1px var(--fabric-shadowButtonSecondary)`, + buttonSecondary: `0px 0px 0px 3px var(--fabric-shadowButtonSecondary)`, buttonInverted: `0px 0px 0px 3px var(--fabric-shadowButtonInverted)`, }, zIndices: { diff --git a/fabric/src/theme/tokens/theme.ts b/fabric/src/theme/tokens/theme.ts index e1bf4d004..50fde892a 100644 --- a/fabric/src/theme/tokens/theme.ts +++ b/fabric/src/theme/tokens/theme.ts @@ -79,7 +79,7 @@ const colors = { borderButtonSecondaryHover: black, borderButtonSecondaryPressed: black, borderButtonSecondaryDisabled: 'transparent', - shadowButtonSecondary: 'transparent', + shadowButtonSecondary: grayScale[100], backgroundButtonTertiary: 'transparent', backgroundButtonTertiaryFocus: 'transparent', From 8d87694e0089c955a424e03465ae7ef356a489cb Mon Sep 17 00:00:00 2001 From: katty barroso Date: Tue, 29 Oct 2024 10:27:10 +0100 Subject: [PATCH 11/12] Fix loading on page --- centrifuge-app/src/components/LayoutBase/index.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/centrifuge-app/src/components/LayoutBase/index.tsx b/centrifuge-app/src/components/LayoutBase/index.tsx index cd2eca400..6a69d0e03 100644 --- a/centrifuge-app/src/components/LayoutBase/index.tsx +++ b/centrifuge-app/src/components/LayoutBase/index.tsx @@ -4,6 +4,7 @@ import * as React from 'react' import { Outlet } from 'react-router' import { useIsAboveBreakpoint } from '../../utils/useIsAboveBreakpoint' import { Footer } from '../Footer' +import { LoadBoundary } from '../LoadBoundary' import { LogoLink } from '../LogoLink-deprecated' import { Menu } from '../Menu' import { BasePadding } from './BasePadding' @@ -57,7 +58,9 @@ export function LayoutBase(): JSX.Element { )} {/* The ID functions so we can deactive scrolling in certain pages, example in the data page */} - + + + ) From 87417c831992eacb3dcbc73fbd761bff2a01b26e Mon Sep 17 00:00:00 2001 From: katty barroso Date: Wed, 30 Oct 2024 09:51:02 +0100 Subject: [PATCH 12/12] Type fix --- centrifuge-app/src/components/PoolCard/index.tsx | 2 +- .../src/components/PoolOverview/KeyMetrics.tsx | 15 +++++---------- 2 files changed, 6 insertions(+), 11 deletions(-) diff --git a/centrifuge-app/src/components/PoolCard/index.tsx b/centrifuge-app/src/components/PoolCard/index.tsx index 1e97b551c..7959a1247 100644 --- a/centrifuge-app/src/components/PoolCard/index.tsx +++ b/centrifuge-app/src/components/PoolCard/index.tsx @@ -292,7 +292,7 @@ export function PoolCard({ {ratings.map((rating) => { - return + return })} diff --git a/centrifuge-app/src/components/PoolOverview/KeyMetrics.tsx b/centrifuge-app/src/components/PoolOverview/KeyMetrics.tsx index d8374c65f..e9a037601 100644 --- a/centrifuge-app/src/components/PoolOverview/KeyMetrics.tsx +++ b/centrifuge-app/src/components/PoolOverview/KeyMetrics.tsx @@ -1,4 +1,4 @@ -import { CurrencyBalance, DailyTrancheState, Price } from '@centrifuge/centrifuge-js' +import { CurrencyBalance, DailyTrancheState, PoolMetadata, Price } from '@centrifuge/centrifuge-js' import { NetworkIcon, formatBalanceAbbreviated, useCentrifuge } from '@centrifuge/centrifuge-react' import { Box, @@ -46,12 +46,7 @@ type Tranche = Pick & { type TinlakeDataKey = keyof typeof tinlakeData -export type RatingType = { - agency?: string - reportUrl?: string - reportFile?: any - value?: string -} +type RatingProps = Partial[number]> const ratingIcons: { [key: string]: JSX.Element } = { "Moody's": , @@ -195,8 +190,8 @@ export const KeyMetrics = ({ poolId }: Props) => { metric: 'Rating', value: ( - {metadata?.pool?.poolRatings.map((rating: RatingType) => ( - + {metadata.pool.poolRatings.map((rating) => ( + ))} ), @@ -332,7 +327,7 @@ const AvailableNetworks = ({ poolId }: { poolId: string }) => { ) } -export const RatingPill = ({ agency, reportUrl, reportFile, value }: RatingType) => { +export const RatingPill = ({ agency, reportUrl, reportFile, value }: RatingProps) => { const theme = useTheme() const cent = useCentrifuge() return (