diff --git a/centrifuge-app/src/components/Portfolio/InvestedTokens.tsx b/centrifuge-app/src/components/Portfolio/InvestedTokens.tsx index a028f3ddf5..01fe067f2e 100644 --- a/centrifuge-app/src/components/Portfolio/InvestedTokens.tsx +++ b/centrifuge-app/src/components/Portfolio/InvestedTokens.tsx @@ -1,5 +1,5 @@ import { Token, TokenBalance } from '@centrifuge/centrifuge-js' -import { formatBalance, useAddress, useBalances, useCentrifuge } from '@centrifuge/centrifuge-react' +import { formatBalance, useBalances, useCentrifuge } from '@centrifuge/centrifuge-react' import { AnchorButton, Box, @@ -29,6 +29,7 @@ type Row = { position: TokenBalance tokenPrice: TokenBalance canInvestRedeem: boolean + address: string } const columns: Column[] = [ @@ -108,8 +109,7 @@ const columns: Column[] = [ ] // TODO: change canInvestRedeem to default to true once the drawer is implemented -export const InvestedTokens = ({ canInvestRedeem = false }) => { - const address = useAddress() +export function InvestedTokens({ canInvestRedeem = false, address }: { canInvestRedeem?: boolean; address: string }) { const centBalances = useBalances(address) const { data: tinlakeBalances } = useTinlakeBalances() const pools = usePools() diff --git a/centrifuge-app/src/components/Portfolio/Transactions.tsx b/centrifuge-app/src/components/Portfolio/Transactions.tsx index 972d9d7a88..11b2e1185a 100644 --- a/centrifuge-app/src/components/Portfolio/Transactions.tsx +++ b/centrifuge-app/src/components/Portfolio/Transactions.tsx @@ -11,23 +11,21 @@ import { Stack, Text, usePagination, - VisualButton, } from '@centrifuge/fabric' -import { isAddress as isValidEVMAddress } from '@ethersproject/address' import * as React from 'react' -import { Link } from 'react-router-dom' import { TransactionTypeChip } from '../../components/Portfolio/TransactionTypeChip' import { Spinner } from '../../components/Spinner' import { formatDate } from '../../utils/date' import { Dec } from '../../utils/Decimal' import { getCSVDownloadUrl } from '../../utils/getCSVDownloadUrl' -import { useAddress } from '../../utils/useAddress' import { usePools, useTransactionsByAddress } from '../../utils/usePools' import { Column, DataTable, SortableTableHeader } from '../DataTable' +import { RouterLinkButton } from '../RouterLinkButton' type TransactionsProps = { onlyMostRecent?: boolean txTypes?: InvestorTransactionType[] + address: string } type TransactionTableData = Row[] @@ -110,11 +108,9 @@ const columns: Column[] = [ }, ] -export function Transactions({ onlyMostRecent, txTypes }: TransactionsProps) { +export function Transactions({ onlyMostRecent, txTypes, address }: TransactionsProps) { const { formatAddress } = useCentrifugeUtils() - const address = useAddress() - const formattedAddress = address && isValidEVMAddress(address) ? address : formatAddress(address || '') - const transactions = useTransactionsByAddress(formatAddress(formattedAddress)) + const transactions = useTransactionsByAddress(formatAddress(address)) const pools = usePools() const investorTransactions: TransactionTableData = React.useMemo(() => { @@ -158,45 +154,52 @@ export function Transactions({ onlyMostRecent, txTypes }: TransactionsProps) { const pagination = usePagination({ data: investorTransactions, pageSize: onlyMostRecent ? 3 : 15 }) - return !!investorTransactions.length ? ( + return investorTransactions ? ( Transaction history - - - - {onlyMostRecent ? ( - + {investorTransactions.length ? ( + + + + {onlyMostRecent ? ( - + View all - + - - ) : ( - - {pagination.pageCount > 1 && ( - - - - )} - {csvUrl && ( - - - Export as CSV - - - )} - - )} - - + ) : ( + + {pagination.pageCount > 1 && ( + + + + )} + {csvUrl && ( + + + Export as CSV + + + )} + + )} + + + ) : ( + No transactions + )} ) : ( diff --git a/centrifuge-app/src/config.ts b/centrifuge-app/src/config.ts index ecf13a4b84..5a160617f6 100644 --- a/centrifuge-app/src/config.ts +++ b/centrifuge-app/src/config.ts @@ -1,7 +1,9 @@ import { TransactionOptions } from '@centrifuge/centrifuge-js' +import { Network } from '@centrifuge/centrifuge-react' import { altairDark, centrifugeLight } from '@centrifuge/fabric' import * as React from 'react' import { DefaultTheme } from 'styled-components' +import aaveLogo from './assets/images/aave-token-logo.svg' import { LogoAltair, LogoAltairText } from './components/LogoAltair' import { LogoCentrifuge, LogoCentrifugeText } from './components/LogoCentrifuge' @@ -143,3 +145,21 @@ export const ethConfig = { } export const config = import.meta.env.REACT_APP_NETWORK === 'altair' ? ALTAIR : CENTRIFUGE + +export type DAO = { + slug: string + name: string + network: Network + address: string + icon: string +} + +export const DAOs: DAO[] = [ + { + slug: 'aave', + name: 'Aave', + network: 'centrifuge', + address: 'kALNreUp6oBmtfG87fe7MakWR8BnmQ4SmKjjfG27iVd3nuTue', + icon: aaveLogo, + }, +] diff --git a/centrifuge-app/src/pages/Portfolio/TransactionHistory.tsx b/centrifuge-app/src/pages/Portfolio/TransactionHistory.tsx index 5247028d2f..c7156e5ee5 100644 --- a/centrifuge-app/src/pages/Portfolio/TransactionHistory.tsx +++ b/centrifuge-app/src/pages/Portfolio/TransactionHistory.tsx @@ -2,13 +2,13 @@ import * as React from 'react' import { LayoutBase } from '../../components/LayoutBase' import { BasePadding } from '../../components/LayoutBase/BasePadding' import { Transactions } from '../../components/Portfolio/Transactions' +import { useAddress } from '../../utils/useAddress' export default function TransactionHistoryPage() { + const address = useAddress() return ( - - - + {address ? : null} ) } diff --git a/centrifuge-app/src/pages/Portfolio/index.tsx b/centrifuge-app/src/pages/Portfolio/index.tsx index 1c9f49e0b8..b3563d3357 100644 --- a/centrifuge-app/src/pages/Portfolio/index.tsx +++ b/centrifuge-app/src/pages/Portfolio/index.tsx @@ -51,8 +51,8 @@ function Portfolio() { - - + + diff --git a/centrifuge-app/src/pages/Prime/Detail.tsx b/centrifuge-app/src/pages/Prime/Detail.tsx index 670153f93d..702c9b32f3 100644 --- a/centrifuge-app/src/pages/Prime/Detail.tsx +++ b/centrifuge-app/src/pages/Prime/Detail.tsx @@ -1,5 +1,13 @@ +import { useCentrifugeUtils } from '@centrifuge/centrifuge-react' +import { Box, Shelf, Text } from '@centrifuge/fabric' import { useParams } from 'react-router' import { LayoutBase } from '../../components/LayoutBase' +import { BasePadding } from '../../components/LayoutBase/BasePadding' +import { LayoutSection } from '../../components/LayoutBase/LayoutSection' +import { InvestedTokens } from '../../components/Portfolio/InvestedTokens' +import { Transactions } from '../../components/Portfolio/Transactions' +import { RouterTextLink } from '../../components/TextLink' +import { DAOs } from '../../config' export default function PrimeDetailPage() { return ( @@ -10,6 +18,34 @@ export default function PrimeDetailPage() { } function PrimeDetail() { - const { dao } = useParams<{ dao: string }>() - return
Prime detail, {dao}
+ const { dao: daoSlug } = useParams<{ dao: string }>() + const dao = DAOs.find((d) => d.slug === daoSlug) + const utils = useCentrifugeUtils() + if (!dao) throw new Error('DAO not found') + const centAddress = utils.formatAddress( + typeof dao.network === 'number' ? utils.evmToSubstrateAddress(dao.address, dao.network) : dao.address + ) + + return ( + <> + + + + + Prime + + {' '} + / {dao.name} DAO Investments + + + + {dao.name} DAO Investments + + + + + + + + ) } diff --git a/centrifuge-app/src/pages/Prime/index.tsx b/centrifuge-app/src/pages/Prime/index.tsx index 0dd310a991..9eff83405a 100644 --- a/centrifuge-app/src/pages/Prime/index.tsx +++ b/centrifuge-app/src/pages/Prime/index.tsx @@ -1,35 +1,17 @@ import { Price } from '@centrifuge/centrifuge-js' -import { Network, useCentrifuge, useCentrifugeUtils, useGetNetworkName } from '@centrifuge/centrifuge-react' +import { useCentrifuge, useCentrifugeUtils, useGetNetworkName } from '@centrifuge/centrifuge-react' import { AnchorButton, Box, IconExternalLink, Shelf, Text, TextWithPlaceholder } from '@centrifuge/fabric' import { useQuery } from 'react-query' import { firstValueFrom } from 'rxjs' -import aaveLogo from '../../assets/images/aave-token-logo.svg' import { Column, DataTable, FilterableTableHeader, SortableTableHeader } from '../../components/DataTable' import { LayoutBase } from '../../components/LayoutBase' import { LayoutSection } from '../../components/LayoutBase/LayoutSection' +import { DAO, DAOs } from '../../config' import { formatDate } from '../../utils/date' import { formatBalance, formatPercentage } from '../../utils/formatting' import { useFilters } from '../../utils/useFilters' import { useSubquery } from '../../utils/useSubquery' -type DAO = { - slug: string - name: string - network: Network - address: string - icon: string -} - -const DAOs: DAO[] = [ - { - slug: 'aave', - name: 'Aave', - network: 'centrifuge', - address: 'kALNreUp6oBmtfG87fe7MakWR8BnmQ4SmKjjfG27iVd3nuTue', - icon: aaveLogo, - }, -] - export default function PrimePage() { return ( diff --git a/centrifuge-js/src/modules/pools.ts b/centrifuge-js/src/modules/pools.ts index ffb96cffb4..739591a731 100644 --- a/centrifuge-js/src/modules/pools.ts +++ b/centrifuge-js/src/modules/pools.ts @@ -2058,7 +2058,12 @@ export function getPoolsModule(inst: Centrifuge) { return $query.pipe( switchMap((data) => { - const poolIds = new Set(data?.investorTransactions.nodes.map((e) => e.poolId)) ?? [] + const poolIds = new Set(data?.investorTransactions.nodes.map((e) => e.poolId) ?? []) + if (!poolIds.size) { + return of({ + investorTransactions: [], + }) + } const $poolCurrencies = Array.from(poolIds).map((poolId) => getPoolCurrency([poolId])) return combineLatest($poolCurrencies).pipe( map((currencies) => { diff --git a/centrifuge-react/src/components/WalletMenu/ConnectButton.tsx b/centrifuge-react/src/components/WalletMenu/ConnectButton.tsx index 72c8959328..0190f0cc7e 100644 --- a/centrifuge-react/src/components/WalletMenu/ConnectButton.tsx +++ b/centrifuge-react/src/components/WalletMenu/ConnectButton.tsx @@ -7,7 +7,9 @@ type Props = WalletButtonProps & { } export function ConnectButton({ label = 'Connect', ...rest }: Props) { - const { showNetworks } = useWallet() + const { showNetworks, pendingConnect } = useWallet() - return showNetworks()} {...rest} /> + return ( + showNetworks()} {...rest} /> + ) } diff --git a/centrifuge-react/src/components/WalletMenu/WalletMenu.tsx b/centrifuge-react/src/components/WalletMenu/WalletMenu.tsx index b6670d01f7..2afe0c48fb 100644 --- a/centrifuge-react/src/components/WalletMenu/WalletMenu.tsx +++ b/centrifuge-react/src/components/WalletMenu/WalletMenu.tsx @@ -34,7 +34,7 @@ type WalletMenuProps = { export function WalletMenu({ menuItems }: WalletMenuProps) { const ctx = useWallet() - const { connectedType, pendingConnect, isEvmOnSubstrate } = ctx + const { connectedType, isEvmOnSubstrate } = ctx const accounts = connectedType && ctx[isEvmOnSubstrate ? 'substrate' : 'evm'].accounts const address = useAddress() return address ? ( @@ -42,7 +42,7 @@ export function WalletMenu({ menuItems }: WalletMenuProps) { ) : accounts && !accounts.length ? ( ) : ( - + ) } diff --git a/centrifuge-react/src/components/WalletMenu/index.tsx b/centrifuge-react/src/components/WalletMenu/index.tsx index c4680928c2..af5ec5d755 100644 --- a/centrifuge-react/src/components/WalletMenu/index.tsx +++ b/centrifuge-react/src/components/WalletMenu/index.tsx @@ -1 +1,2 @@ +export * from './ConnectButton' export * from './WalletMenu'