diff --git a/centrifuge-app/src/components/InvestRedeem/InvestForm.tsx b/centrifuge-app/src/components/InvestRedeem/InvestForm.tsx index 95c9d7075..c018a2b4e 100644 --- a/centrifuge-app/src/components/InvestRedeem/InvestForm.tsx +++ b/centrifuge-app/src/components/InvestRedeem/InvestForm.tsx @@ -210,7 +210,7 @@ export function InvestForm({ autoFocus, investLabel = 'Invest' }: InvestFormProp onClick={() => actions.cancelInvest()} loading={isCancelling} disabled={pool.epoch.status !== 'ongoing'} - variant={state.canChangeOrder ? 'secondary' : 'primary'} + variant="secondary" > {state.canChangeOrder ? 'Cancel' : 'Cancel order'} diff --git a/centrifuge-app/src/components/InvestRedeem/InvestRedeemLiquidityPoolsProvider.tsx b/centrifuge-app/src/components/InvestRedeem/InvestRedeemLiquidityPoolsProvider.tsx index 059503af6..2b066ce04 100644 --- a/centrifuge-app/src/components/InvestRedeem/InvestRedeemLiquidityPoolsProvider.tsx +++ b/centrifuge-app/src/components/InvestRedeem/InvestRedeemLiquidityPoolsProvider.tsx @@ -84,8 +84,8 @@ export function InvestRedeemLiquidityPoolsProvider({ poolId, trancheId, children const approve = useEvmTransaction('Approve', (cent) => cent.liquidityPools.approveForCurrency) const cancelInvest = useEvmTransaction('Cancel order', (cent) => cent.liquidityPools.cancelInvestOrder) const cancelRedeem = useEvmTransaction('Cancel order', (cent) => cent.liquidityPools.cancelRedeemOrder) - const collectCancelInvest = useEvmTransaction('Cancel order', (cent) => cent.liquidityPools.claimCancelDeposit) - const collectCancelRedeem = useEvmTransaction('Cancel order', (cent) => cent.liquidityPools.claimCancelRedeem) + const collectCancelInvest = useEvmTransaction('Claim', (cent) => cent.liquidityPools.claimCancelDeposit) + const collectCancelRedeem = useEvmTransaction('Claim', (cent) => cent.liquidityPools.claimCancelRedeem) const txActions = { invest, @@ -112,7 +112,7 @@ export function InvestRedeemLiquidityPoolsProvider({ poolId, trancheId, children const pendingTransaction = pendingActionState && txActions[pendingActionState]?.lastCreatedTransaction let statusMessage if (lpInvest?.pendingCancelDepositRequest || lpInvest?.pendingCancelRedeemRequest) { - statusMessage = 'Order cancellation is currently being bridged and will show up soon' + statusMessage = 'Order cancellation is currently being processed and will show up soon' } function doAction( diff --git a/centrifuge-app/src/components/PoolOverview/TransactionHistory.tsx b/centrifuge-app/src/components/PoolOverview/TransactionHistory.tsx index 4568215bf..be26e50e1 100644 --- a/centrifuge-app/src/components/PoolOverview/TransactionHistory.tsx +++ b/centrifuge-app/src/components/PoolOverview/TransactionHistory.tsx @@ -4,6 +4,7 @@ import BN from 'bn.js' import { formatDate } from '../../utils/date' import { formatBalance } from '../../utils/formatting' import { getCSVDownloadUrl } from '../../utils/getCSVDownloadUrl' +import { useBasePath } from '../../utils/useBasePath' import { useAssetTransactions } from '../../utils/usePools' import { DataTable, SortableTableHeader } from '../DataTable' import { RouterTextLink } from '../TextLink' @@ -26,92 +27,6 @@ const getTransactionTypeStatus = (type: string): 'default' | 'info' | 'ok' | 'wa return 'default' } -export const columns = [ - { - align: 'left', - header: 'Type', - cell: ({ type }: Row) => {type}, - }, - { - align: 'left', - header: , - cell: ({ transactionDate }: Row) => ( - - {formatDate(transactionDate)} - - ), - sortKey: 'transactionDate', - }, - { - align: 'left', - header: 'Asset', - cell: ({ activeAssetId, assetId, assetName, fromAssetId, fromAssetName, toAssetId, toAssetName }: Row) => { - return fromAssetId && toAssetId && activeAssetId === fromAssetId.split('-')[1] ? ( - - {fromAssetName} →{' '} - - {toAssetName} - - - ) : fromAssetId && toAssetId && activeAssetId === toAssetId.split('-')[1] ? ( - - - {fromAssetName} - {' '} - → {toAssetName} - - ) : fromAssetId && toAssetId ? ( - - - {fromAssetName} - {' '} - →{' '} - - {toAssetName} - - - ) : activeAssetId !== assetId?.split('-')[1] ? ( - - - {assetName || `Asset ${assetId?.split('-')[1]}`} - - - ) : ( - - {assetName || `Asset ${assetId?.split('-')[1]}`} - - ) - }, - }, - { - align: 'right', - header: , - cell: ({ amount }: Row) => ( - - {amount ? formatBalance(amount, 'USD', 2, 2) : ''} - - ), - sortKey: 'amount', - }, - { - align: 'right', - header: 'View transaction', - cell: ({ hash }: Row) => { - return ( - - - - ) - }, - }, -] - export const TransactionHistory = ({ poolId, activeAssetId, @@ -143,6 +58,7 @@ export const TransactionHistoryTable = ({ activeAssetId?: string preview?: boolean }) => { + const basePath = useBasePath('/pools') const getLabelAndAmount = (transaction: AssetTransaction) => { if (transaction.type === 'CASH_TRANSFER') { return { @@ -247,7 +163,7 @@ export const TransactionHistoryTable = ({ } }) - const csvUrl = csvData?.length ? getCSVDownloadUrl(csvData) : '' + const csvUrl = (csvData?.length && getCSVDownloadUrl(csvData)) || '' const tableData = transformedTransactions.slice(0, preview ? 8 : Infinity).map((transaction) => { @@ -267,6 +183,84 @@ export const TransactionHistoryTable = ({ } }) || [] + const columns = [ + { + align: 'left', + header: 'Type', + cell: ({ type }: Row) => {type}, + }, + { + align: 'left', + header: , + cell: ({ transactionDate }: Row) => ( + + {formatDate(transactionDate)} + + ), + sortKey: 'transactionDate', + }, + { + align: 'left', + header: 'Asset', + cell: ({ activeAssetId, assetId, assetName, fromAssetId, fromAssetName, toAssetId, toAssetName }: Row) => { + const base = `${basePath}/${poolId}/assets/` + return fromAssetId && toAssetId && activeAssetId === fromAssetId.split('-')[1] ? ( + + {fromAssetName} →{' '} + {toAssetName} + + ) : fromAssetId && toAssetId && activeAssetId === toAssetId.split('-')[1] ? ( + + {fromAssetName} →{' '} + {toAssetName} + + ) : fromAssetId && toAssetId ? ( + + {fromAssetName} →{' '} + {toAssetName} + + ) : activeAssetId !== assetId?.split('-')[1] ? ( + + + {assetName || `Asset ${assetId?.split('-')[1]}`} + + + ) : ( + + {assetName || `Asset ${assetId?.split('-')[1]}`} + + ) + }, + }, + { + align: 'right', + header: , + cell: ({ amount }: Row) => ( + + {amount ? formatBalance(amount, 'USD', 2, 2) : ''} + + ), + sortKey: 'amount', + }, + { + align: 'right', + header: 'View transaction', + cell: ({ hash }: Row) => { + return ( + + + + ) + }, + }, + ] + return ( diff --git a/centrifuge-app/src/pages/Loan/index.tsx b/centrifuge-app/src/pages/Loan/index.tsx index a028ed775..070e32e84 100644 --- a/centrifuge-app/src/pages/Loan/index.tsx +++ b/centrifuge-app/src/pages/Loan/index.tsx @@ -34,6 +34,7 @@ import { nftMetadataSchema } from '../../schemas' import { LoanTemplate } from '../../types' import { copyToClipboard } from '../../utils/copyToClipboard' import { formatBalance, truncateText } from '../../utils/formatting' +import { useBasePath } from '../../utils/useBasePath' import { useLoan } from '../../utils/useLoans' import { useMetadata } from '../../utils/useMetadata' import { useCentNFT } from '../../utils/useNFTs' @@ -112,6 +113,7 @@ function Loan() { const theme = useTheme() const { pid: poolId, aid: loanId } = useParams<{ pid: string; aid: string }>() if (!poolId || !loanId) throw new Error('Loan no found') + const basePath = useBasePath() const isTinlakePool = poolId?.startsWith('0x') const pool = usePool(poolId) const loan = useLoan(poolId, loanId) @@ -148,7 +150,7 @@ function Loan() { return ( - + {poolMetadata?.pool?.name ?? 'Pool assets'}