diff --git a/centrifuge-app/src/components/PoolOverview/TrancheTokenCards.tsx b/centrifuge-app/src/components/PoolOverview/TrancheTokenCards.tsx index 07e5613370..d3f193460f 100644 --- a/centrifuge-app/src/components/PoolOverview/TrancheTokenCards.tsx +++ b/centrifuge-app/src/components/PoolOverview/TrancheTokenCards.tsx @@ -1,18 +1,32 @@ import { Perquintill } from '@centrifuge/centrifuge-js' -import { Box, Shelf, Text } from '@centrifuge/fabric' +import { useWallet } from '@centrifuge/centrifuge-react' +import { Box, Button, Shelf, Text } from '@centrifuge/fabric' import { useMemo } from 'react' import { useTheme } from 'styled-components' -import { InvestButton, Token } from '../../pages/Pool/Overview' +import { usePoolPermissions } from '../../../src/utils/usePermissions' +import { Token } from '../../pages/Pool/Overview' import { daysBetween } from '../../utils/date' import { formatBalance, formatPercentage } from '../../utils/formatting' import { usePool } from '../../utils/usePools' import { DataTable } from '../DataTable' +import { PoolMetaDataPartial } from '../PoolList' -export const TrancheTokenCards = ({ trancheTokens, poolId }: { trancheTokens: Token[]; poolId: string }) => { +export const TrancheTokenCards = ({ + trancheTokens, + poolId, + metadata, +}: { + trancheTokens: Token[] + poolId: string + metadata: PoolMetaDataPartial +}) => { + const { connectedType, showNetworks, substrate } = useWallet() const pool = usePool(poolId) const theme = useTheme() const isTinlakePool = poolId.startsWith('0x') const daysSinceCreation = pool?.createdAt ? daysBetween(new Date(pool.createdAt), new Date()) : 0 + const permissions = usePoolPermissions(poolId) + const hasMemberlistPermissions = permissions?.[substrate.selectedAddress ?? '']?.roles.includes('InvestorAdmin') const getTrancheText = (trancheToken: Token) => { if (trancheToken.seniority === 0) return 'junior' @@ -20,6 +34,21 @@ export const TrancheTokenCards = ({ trancheTokens, poolId }: { trancheTokens: To return 'mezzanine' } + const getButton = () => { + if (connectedType === null) + return ( + + ) + else if (!hasMemberlistPermissions && connectedType !== null) + return ( + + ) + } + const columnConfig = useMemo(() => { const calculateApy = (trancheToken: Token) => { if (isTinlakePool && getTrancheText(trancheToken) === 'senior') return formatPercentage(trancheToken.apy) @@ -66,12 +95,10 @@ export const TrancheTokenCards = ({ trancheTokens, poolId }: { trancheTokens: To { header: '', align: 'right', - formatter: (_: any, row: any) => { - return - }, + formatter: (_: any, row: any) => getButton(), }, ] - }, [pool, poolId, isTinlakePool, daysSinceCreation]) + }, [pool, poolId, isTinlakePool, daysSinceCreation, getButton]) const columns = useMemo(() => { return columnConfig.map((col, index) => { diff --git a/centrifuge-app/src/pages/Pool/Overview/index.tsx b/centrifuge-app/src/pages/Pool/Overview/index.tsx index 56092e20a5..7636002162 100644 --- a/centrifuge-app/src/pages/Pool/Overview/index.tsx +++ b/centrifuge-app/src/pages/Pool/Overview/index.tsx @@ -118,7 +118,7 @@ export function PoolDetailOverview() { {tokens.length > 0 && ( }> - + )} }> diff --git a/fabric/src/theme/tokens/theme.ts b/fabric/src/theme/tokens/theme.ts index c24d2aa394..39f25d8927 100644 --- a/fabric/src/theme/tokens/theme.ts +++ b/fabric/src/theme/tokens/theme.ts @@ -7,7 +7,7 @@ const statusWarning = yellowScale[800] const statusCritical = '#d43f2b' const statusPromote = '#f81071' -const statusDefaultBg = grayScale[300] +const statusDefaultBg = '#CFCFCF' const statusInfoBg = blueScale[50] const statusOkBg = '#f1f7ec' const statusWarningBg = yellowScale[50]