From 64423328a3fa31733641d57dfb63688aaf61e058 Mon Sep 17 00:00:00 2001 From: Onno Visser <23527729+onnovisser@users.noreply.github.com> Date: Mon, 13 Nov 2023 17:35:51 +0100 Subject: [PATCH 1/4] prime detail --- .../components/Portfolio/InvestedTokens.tsx | 6 +- .../src/components/Portfolio/Transactions.tsx | 87 ++++++++++--------- centrifuge-app/src/config.ts | 20 +++++ centrifuge-app/src/pages/Portfolio/index.tsx | 4 +- centrifuge-app/src/pages/Prime/Detail.tsx | 24 ++++- centrifuge-app/src/pages/Prime/index.tsx | 22 +---- centrifuge-js/src/modules/pools.ts | 7 +- .../components/WalletMenu/ConnectButton.tsx | 6 +- .../src/components/WalletMenu/WalletMenu.tsx | 4 +- .../src/components/WalletMenu/index.tsx | 1 + 10 files changed, 109 insertions(+), 72 deletions(-) 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..a008cfa79a 100644 --- a/centrifuge-app/src/components/Portfolio/Transactions.tsx +++ b/centrifuge-app/src/components/Portfolio/Transactions.tsx @@ -13,7 +13,6 @@ import { 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' @@ -21,13 +20,13 @@ 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' type TransactionsProps = { onlyMostRecent?: boolean txTypes?: InvestorTransactionType[] + address: string } type TransactionTableData = Row[] @@ -110,11 +109,10 @@ 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)) + console.log('transactions', transactions) const pools = usePools() const investorTransactions: TransactionTableData = React.useMemo(() => { @@ -158,45 +156,54 @@ export function Transactions({ onlyMostRecent, txTypes }: TransactionsProps) { const pagination = usePagination({ data: investorTransactions, pageSize: onlyMostRecent ? 3 : 15 }) - return !!investorTransactions.length ? ( + return investorTransactions ? ( Transaction history - - - - {onlyMostRecent ? ( - - - - View all - - - - ) : ( - - {pagination.pageCount > 1 && ( - - - - )} - {csvUrl && ( - - - Export as CSV - + {investorTransactions.length ? ( + + + + {onlyMostRecent ? ( + + + + View all + - )} - - )} - - + + ) : ( + + {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/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..dc35f3e621 100644 --- a/centrifuge-app/src/pages/Prime/Detail.tsx +++ b/centrifuge-app/src/pages/Prime/Detail.tsx @@ -1,5 +1,11 @@ +import { useCentrifugeUtils } from '@centrifuge/centrifuge-react' import { useParams } from 'react-router' import { LayoutBase } from '../../components/LayoutBase' +import { BasePadding } from '../../components/LayoutBase/BasePadding' +import { AssetAllocation } from '../../components/Portfolio/AssetAllocation' +import { InvestedTokens } from '../../components/Portfolio/InvestedTokens' +import { Transactions } from '../../components/Portfolio/Transactions' +import { DAOs } from '../../config' export default function PrimeDetailPage() { return ( @@ -10,6 +16,20 @@ 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 + ) + + console.log('centAddress', centAddress) + return ( + + + + + + ) } 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' From 83d102d9862353e8762ce4681ef588dc2966fd3f Mon Sep 17 00:00:00 2001 From: Onno Visser <23527729+onnovisser@users.noreply.github.com> Date: Tue, 14 Nov 2023 10:24:00 +0100 Subject: [PATCH 2/4] header --- centrifuge-app/src/pages/Prime/Detail.tsx | 29 +++++++++++++++++++---- 1 file changed, 24 insertions(+), 5 deletions(-) diff --git a/centrifuge-app/src/pages/Prime/Detail.tsx b/centrifuge-app/src/pages/Prime/Detail.tsx index dc35f3e621..97a9a310a4 100644 --- a/centrifuge-app/src/pages/Prime/Detail.tsx +++ b/centrifuge-app/src/pages/Prime/Detail.tsx @@ -1,10 +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 { AssetAllocation } from '../../components/Portfolio/AssetAllocation' 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() { @@ -26,10 +29,26 @@ function PrimeDetail() { console.log('centAddress', centAddress) return ( - - - - - + <> + + + + + Prime + + {' '} + / {dao.name} DAO Investments + + + + {dao.name} DAO Investments + + + + + + + + ) } From c598211c460982d4564081e5d33aa5bc86571098 Mon Sep 17 00:00:00 2001 From: Onno Visser <23527729+onnovisser@users.noreply.github.com> Date: Wed, 15 Nov 2023 09:27:08 +0100 Subject: [PATCH 3/4] cleanup --- centrifuge-app/src/components/Portfolio/Transactions.tsx | 1 - centrifuge-app/src/pages/Prime/Detail.tsx | 3 --- 2 files changed, 4 deletions(-) diff --git a/centrifuge-app/src/components/Portfolio/Transactions.tsx b/centrifuge-app/src/components/Portfolio/Transactions.tsx index a008cfa79a..2a442dc43f 100644 --- a/centrifuge-app/src/components/Portfolio/Transactions.tsx +++ b/centrifuge-app/src/components/Portfolio/Transactions.tsx @@ -112,7 +112,6 @@ const columns: Column[] = [ export function Transactions({ onlyMostRecent, txTypes, address }: TransactionsProps) { const { formatAddress } = useCentrifugeUtils() const transactions = useTransactionsByAddress(formatAddress(address)) - console.log('transactions', transactions) const pools = usePools() const investorTransactions: TransactionTableData = React.useMemo(() => { diff --git a/centrifuge-app/src/pages/Prime/Detail.tsx b/centrifuge-app/src/pages/Prime/Detail.tsx index 97a9a310a4..702c9b32f3 100644 --- a/centrifuge-app/src/pages/Prime/Detail.tsx +++ b/centrifuge-app/src/pages/Prime/Detail.tsx @@ -4,7 +4,6 @@ import { useParams } from 'react-router' import { LayoutBase } from '../../components/LayoutBase' import { BasePadding } from '../../components/LayoutBase/BasePadding' import { LayoutSection } from '../../components/LayoutBase/LayoutSection' -import { AssetAllocation } from '../../components/Portfolio/AssetAllocation' import { InvestedTokens } from '../../components/Portfolio/InvestedTokens' import { Transactions } from '../../components/Portfolio/Transactions' import { RouterTextLink } from '../../components/TextLink' @@ -27,7 +26,6 @@ function PrimeDetail() { typeof dao.network === 'number' ? utils.evmToSubstrateAddress(dao.address, dao.network) : dao.address ) - console.log('centAddress', centAddress) return ( <> @@ -47,7 +45,6 @@ function PrimeDetail() { - ) From b1487a622b617c17c60c601f0ba3d7a7514cc8bb Mon Sep 17 00:00:00 2001 From: Onno Visser <23527729+onnovisser@users.noreply.github.com> Date: Wed, 15 Nov 2023 09:37:43 +0100 Subject: [PATCH 4/4] fix history --- .../src/components/Portfolio/Transactions.tsx | 15 ++++++--------- .../src/pages/Portfolio/TransactionHistory.tsx | 6 +++--- 2 files changed, 9 insertions(+), 12 deletions(-) diff --git a/centrifuge-app/src/components/Portfolio/Transactions.tsx b/centrifuge-app/src/components/Portfolio/Transactions.tsx index 2a442dc43f..11b2e1185a 100644 --- a/centrifuge-app/src/components/Portfolio/Transactions.tsx +++ b/centrifuge-app/src/components/Portfolio/Transactions.tsx @@ -11,10 +11,8 @@ import { Stack, Text, usePagination, - VisualButton, } from '@centrifuge/fabric' 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' @@ -22,6 +20,7 @@ import { Dec } from '../../utils/Decimal' import { getCSVDownloadUrl } from '../../utils/getCSVDownloadUrl' import { usePools, useTransactionsByAddress } from '../../utils/usePools' import { Column, DataTable, SortableTableHeader } from '../DataTable' +import { RouterLinkButton } from '../RouterLinkButton' type TransactionsProps = { onlyMostRecent?: boolean @@ -170,13 +169,11 @@ export function Transactions({ onlyMostRecent, txTypes, address }: TransactionsP page={pagination.page} /> {onlyMostRecent ? ( - - - - View all - - - + + + View all + + ) : ( {pagination.pageCount > 1 && ( 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} ) }