LP Fixes (#2348)

centrifuge · Aug 7, 2024 · dd462c2 · dd462c2
1 parent 733b083
commit dd462c2
Show file tree

Hide file tree

Showing 4 changed files with 88 additions and 92 deletions.
diff --git 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'}
               </Button>

diff --git 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<T = any>(

diff --git 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) => <StatusChip status={getTransactionTypeStatus(type)}>{type}</StatusChip>,
-  },
-  {
-    align: 'left',
-    header: <SortableTableHeader label="Transaction date" />,
-    cell: ({ transactionDate }: Row) => (
-      <Text as="span" variant="body3">
-        {formatDate(transactionDate)}
-      </Text>
-    ),
-    sortKey: 'transactionDate',
-  },
-  {
-    align: 'left',
-    header: 'Asset',
-    cell: ({ activeAssetId, assetId, assetName, fromAssetId, fromAssetName, toAssetId, toAssetName }: Row) => {
-      return fromAssetId && toAssetId && activeAssetId === fromAssetId.split('-')[1] ? (
-        <Text as="span" variant="body3">
-          {fromAssetName} &rarr;{' '}
-          <RouterTextLink target="_self" to={`assets/${toAssetId?.split('-')[1]}`}>
-            {toAssetName}
-          </RouterTextLink>
-        </Text>
-      ) : fromAssetId && toAssetId && activeAssetId === toAssetId.split('-')[1] ? (
-        <Text as="span" variant="body3">
-          <RouterTextLink target="_self" to={`assets/${fromAssetId?.split('-')[1]}`}>
-            {fromAssetName}
-          </RouterTextLink>{' '}
-          &rarr; {toAssetName}
-        </Text>
-      ) : fromAssetId && toAssetId ? (
-        <Text as="span" variant="body3">
-          <RouterTextLink target="_self" to={`assets/${fromAssetId?.split('-')[1]}`}>
-            {fromAssetName}
-          </RouterTextLink>{' '}
-          &rarr;{' '}
-          <RouterTextLink target="_self" to={`assets/${toAssetId?.split('-')[1]}`}>
-            {toAssetName}
-          </RouterTextLink>
-        </Text>
-      ) : activeAssetId !== assetId?.split('-')[1] ? (
-        <Text as="span" variant="body3">
-          <RouterTextLink target="_self" to={`assets/${assetId?.split('-')[1]}`}>
-            {assetName || `Asset ${assetId?.split('-')[1]}`}
-          </RouterTextLink>
-        </Text>
-      ) : (
-        <Text as="span" variant="body3">
-          {assetName || `Asset ${assetId?.split('-')[1]}`}
-        </Text>
-      )
-    },
-  },
-  {
-    align: 'right',
-    header: <SortableTableHeader label="Amount" />,
-    cell: ({ amount }: Row) => (
-      <Text as="span" variant="body3">
-        {amount ? formatBalance(amount, 'USD', 2, 2) : ''}
-      </Text>
-    ),
-    sortKey: 'amount',
-  },
-  {
-    align: 'right',
-    header: 'View transaction',
-    cell: ({ hash }: Row) => {
-      return (
-        <Stack
-          as="a"
-          href={`${import.meta.env.REACT_APP_SUBSCAN_URL}/extrinsic/${hash}`}
-          target="_blank"
-          rel="noopener noreferrer"
-          aria-label="Transaction on Subscan.io"
-        >
-          <IconExternalLink size="iconSmall" color="textPrimary" />
-        </Stack>
-      )
-    },
-  },
-]
-
 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) => <StatusChip status={getTransactionTypeStatus(type)}>{type}</StatusChip>,
+    },
+    {
+      align: 'left',
+      header: <SortableTableHeader label="Transaction date" />,
+      cell: ({ transactionDate }: Row) => (
+        <Text as="span" variant="body3">
+          {formatDate(transactionDate)}
+        </Text>
+      ),
+      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] ? (
+          <Text as="span" variant="body3">
+            {fromAssetName} &rarr;{' '}
+            <RouterTextLink to={`${base}${toAssetId?.split('-')[1]}`}>{toAssetName}</RouterTextLink>
+          </Text>
+        ) : fromAssetId && toAssetId && activeAssetId === toAssetId.split('-')[1] ? (
+          <Text as="span" variant="body3">
+            <RouterTextLink to={`${base}${fromAssetId?.split('-')[1]}`}>{fromAssetName}</RouterTextLink> &rarr;{' '}
+            {toAssetName}
+          </Text>
+        ) : fromAssetId && toAssetId ? (
+          <Text as="span" variant="body3">
+            <RouterTextLink to={`${base}${fromAssetId?.split('-')[1]}`}>{fromAssetName}</RouterTextLink> &rarr;{' '}
+            <RouterTextLink to={`${base}${toAssetId?.split('-')[1]}`}>{toAssetName}</RouterTextLink>
+          </Text>
+        ) : activeAssetId !== assetId?.split('-')[1] ? (
+          <Text as="span" variant="body3">
+            <RouterTextLink to={`${base}${assetId?.split('-')[1]}`}>
+              {assetName || `Asset ${assetId?.split('-')[1]}`}
+            </RouterTextLink>
+          </Text>
+        ) : (
+          <Text as="span" variant="body3">
+            {assetName || `Asset ${assetId?.split('-')[1]}`}
+          </Text>
+        )
+      },
+    },
+    {
+      align: 'right',
+      header: <SortableTableHeader label="Amount" />,
+      cell: ({ amount }: Row) => (
+        <Text as="span" variant="body3">
+          {amount ? formatBalance(amount, 'USD', 2, 2) : ''}
+        </Text>
+      ),
+      sortKey: 'amount',
+    },
+    {
+      align: 'right',
+      header: 'View transaction',
+      cell: ({ hash }: Row) => {
+        return (
+          <Stack
+            as="a"
+            href={`${import.meta.env.REACT_APP_SUBSCAN_URL}/extrinsic/${hash}`}
+            target="_blank"
+            rel="noopener noreferrer"
+            aria-label="Transaction on Subscan.io"
+          >
+            <IconExternalLink size="iconSmall" color="textPrimary" />
+          </Stack>
+        )
+      },
+    },
+  ]
+
   return (
     <Stack gap={2}>
       <Shelf justifyContent="space-between">

diff --git 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 (
     <FullHeightStack>
       <Box mt={2} ml={2}>
-        <RouterLinkButton goBack small icon={IconChevronLeft} variant="tertiary">
+        <RouterLinkButton to={`${basePath}/${poolId}/assets`} small icon={IconChevronLeft} variant="tertiary">
           {poolMetadata?.pool?.name ?? 'Pool assets'}
         </RouterLinkButton>
       </Box>