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'