From fa0913cfcfe96bcacd39ba4686371fb397dfe3d9 Mon Sep 17 00:00:00 2001
From: sophian <littlejohn.sophia@gmail.com>
Date: Mon, 25 Sep 2023 16:59:09 -0400
Subject: [PATCH] Clean up

---
 .../Portfolio/{Coins.tsx => CoinsSvg.tsx}     |   2 +-
 .../components/Portfolio/InvestedTokens.tsx   |  53 ++++-
 .../src/components/Portfolio/Rewards.tsx      |   4 +-
 .../{ => Portfolio}/TransactionTypeChip.tsx   |   3 +-
 .../src/components/Portfolio/Transactions.tsx | 200 +++++++++++++-----
 centrifuge-app/src/components/TokenCard.tsx   |  50 -----
 .../src/components/TransactionCard.tsx        |  84 --------
 7 files changed, 196 insertions(+), 200 deletions(-)
 rename centrifuge-app/src/components/Portfolio/{Coins.tsx => CoinsSvg.tsx} (99%)
 rename centrifuge-app/src/components/{ => Portfolio}/TransactionTypeChip.tsx (95%)
 delete mode 100644 centrifuge-app/src/components/TokenCard.tsx
 delete mode 100644 centrifuge-app/src/components/TransactionCard.tsx

diff --git a/centrifuge-app/src/components/Portfolio/Coins.tsx b/centrifuge-app/src/components/Portfolio/CoinsSvg.tsx
similarity index 99%
rename from centrifuge-app/src/components/Portfolio/Coins.tsx
rename to centrifuge-app/src/components/Portfolio/CoinsSvg.tsx
index 62d50f488b..8cfa68f8e4 100644
--- a/centrifuge-app/src/components/Portfolio/Coins.tsx
+++ b/centrifuge-app/src/components/Portfolio/CoinsSvg.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react'
 
-export function Coins() {
+export function CoinsSvg() {
   return (
     <svg viewBox="0 0 119 72" fill="none" xmlns="http://www.w3.org/2000/svg">
       <path
diff --git a/centrifuge-app/src/components/Portfolio/InvestedTokens.tsx b/centrifuge-app/src/components/Portfolio/InvestedTokens.tsx
index 30166883d3..e953a29ce3 100644
--- a/centrifuge-app/src/components/Portfolio/InvestedTokens.tsx
+++ b/centrifuge-app/src/components/Portfolio/InvestedTokens.tsx
@@ -1,8 +1,12 @@
-import { useBalances } from '@centrifuge/centrifuge-react'
+import { AccountTokenBalance, Pool } from '@centrifuge/centrifuge-js'
+import { formatBalance, useBalances } from '@centrifuge/centrifuge-react'
 import { Box, Grid, Stack, Text } from '@centrifuge/fabric'
 import * as React from 'react'
 import { useAddress } from '../../utils/useAddress'
-import { TokenCard, TOKEN_CARD_COLUMNS, TOKEN_CARD_GAP } from '../TokenCard'
+import { usePool } from '../../utils/usePools'
+
+const TOKEN_ITEM_COLUMNS = `250px 200px 100px 150px 1FR`
+const TOKEN_ITEM_GAP = 4
 
 export function InvestedTokens() {
   const address = useAddress()
@@ -16,7 +20,7 @@ export function InvestedTokens() {
         </Text>
       </Box>
       <Stack gap={1}>
-        <Grid gridTemplateColumns={TOKEN_CARD_COLUMNS} gap={TOKEN_CARD_GAP} px={2}>
+        <Grid gridTemplateColumns={TOKEN_ITEM_COLUMNS} gap={TOKEN_ITEM_GAP} px={2}>
           <Text as="span" variant="body3">
             Token
           </Text>
@@ -34,7 +38,7 @@ export function InvestedTokens() {
         <Stack as="ul" role="list" gap={1}>
           {balances.tranches.map((tranche, index) => (
             <Box key={`${tranche.trancheId}${index}`} as="li">
-              <TokenCard {...tranche} />
+              <TokenListItem {...tranche} />
             </Box>
           ))}
         </Stack>
@@ -42,3 +46,44 @@ export function InvestedTokens() {
     </>
   ) : null
 }
+
+type TokenCardProps = AccountTokenBalance
+export function TokenListItem({ balance, currency, poolId, trancheId }: TokenCardProps) {
+  const pool = usePool(poolId) as Pool
+  const isTinlakePool = poolId?.startsWith('0x')
+
+  if (isTinlakePool) {
+    return null
+  }
+
+  const tranche = pool.tranches.find(({ id }) => id === trancheId)
+
+  return (
+    <Grid
+      gridTemplateColumns={TOKEN_ITEM_COLUMNS}
+      gap={TOKEN_ITEM_GAP}
+      padding={2}
+      borderStyle="solid"
+      borderWidth={1}
+      borderColor="borderSecondary"
+    >
+      <Text as="span" variant="body2">
+        {currency.name}
+      </Text>
+
+      <Text as="span" variant="body2">
+        {formatBalance(balance, tranche?.currency.symbol)}
+      </Text>
+
+      <Text as="span" variant="body2">
+        {tranche?.tokenPrice ? formatBalance(tranche.tokenPrice.toDecimal(), tranche.currency.symbol, 4) : '-'}
+      </Text>
+
+      <Text as="span" variant="body2">
+        {tranche?.tokenPrice
+          ? formatBalance(balance.toDecimal().mul(tranche.tokenPrice.toDecimal()), tranche.currency.symbol, 4)
+          : '-'}
+      </Text>
+    </Grid>
+  )
+}
diff --git a/centrifuge-app/src/components/Portfolio/Rewards.tsx b/centrifuge-app/src/components/Portfolio/Rewards.tsx
index f8973fa09d..94a31c4882 100644
--- a/centrifuge-app/src/components/Portfolio/Rewards.tsx
+++ b/centrifuge-app/src/components/Portfolio/Rewards.tsx
@@ -4,7 +4,7 @@ import * as React from 'react'
 import { useTheme } from 'styled-components'
 import { formatBalance } from '../../utils/formatting'
 import { useComputeLiquidityRewards } from '../LiquidityRewards/hooks'
-import { Coins } from './Coins'
+import { CoinsSvg } from './CoinsSvg'
 
 export function Rewards() {
   const { colors } = useTheme()
@@ -67,7 +67,7 @@ export function Rewards() {
       </Stack>
 
       <Box mt={3} alignSelf="end">
-        <Coins />
+        <CoinsSvg />
       </Box>
     </Grid>
   )
diff --git a/centrifuge-app/src/components/TransactionTypeChip.tsx b/centrifuge-app/src/components/Portfolio/TransactionTypeChip.tsx
similarity index 95%
rename from centrifuge-app/src/components/TransactionTypeChip.tsx
rename to centrifuge-app/src/components/Portfolio/TransactionTypeChip.tsx
index 17b07db7f6..e54a3a775d 100644
--- a/centrifuge-app/src/components/TransactionTypeChip.tsx
+++ b/centrifuge-app/src/components/Portfolio/TransactionTypeChip.tsx
@@ -1,11 +1,12 @@
 import { StatusChip, StatusChipProps } from '@centrifuge/fabric'
 import * as React from 'react'
-import { TransactionCardProps } from './TransactionCard'
+import { TransactionCardProps } from './Transactions'
 
 type TransactionTypeProps = {
   type: TransactionCardProps['action']
 }
 
+// @ts-expect-error
 const states: {
   [Key in TransactionCardProps['action']]: {
     label: string
diff --git a/centrifuge-app/src/components/Portfolio/Transactions.tsx b/centrifuge-app/src/components/Portfolio/Transactions.tsx
index 1449090584..3f83842cf3 100644
--- a/centrifuge-app/src/components/Portfolio/Transactions.tsx
+++ b/centrifuge-app/src/components/Portfolio/Transactions.tsx
@@ -1,76 +1,86 @@
-import { useCentrifugeUtils } from '@centrifuge/centrifuge-react'
-import { Box, Grid, Stack, Text } from '@centrifuge/fabric'
+import {
+  BorrowerTransactionType,
+  CurrencyBalance,
+  InvestorTransactionType,
+  Pool,
+  SubqueryInvestorTransaction,
+} from '@centrifuge/centrifuge-js'
+import { formatBalance, useCentrifugeUtils } from '@centrifuge/centrifuge-react'
+import { Box, Grid, IconExternalLink, Stack, Text } from '@centrifuge/fabric'
 import * as React from 'react'
 import { Link } from 'react-router-dom'
+import { formatDate } from '../../utils/date'
 import { useAddress } from '../../utils/useAddress'
-import {
-  TransactionCard,
-  TransactionCardProps,
-  TRANSACTION_CARD_COLUMNS,
-  TRANSACTION_CARD_GAP,
-} from '../TransactionCard'
+import { useAllTransactions, usePool, usePoolMetadata } from '../../utils/usePools'
+import { TransactionTypeChip } from './TransactionTypeChip'
+
+export const TRANSACTION_CARD_COLUMNS = `150px 100px 250px 150px 1fr`
+export const TRANSACTION_CARD_GAP = 4
 
 type AddressTransactionsProps = {
   count?: number
 }
 
-// const formatters = {
-//   investorTransactions: ({
-//     timestamp,
-//     type,
-//     poolId,
-//     hash,
-//     tokenAmount,
-//     tokenPrice,
-//     currencyAmount,
-//     trancheId,
-//   }: Omit<SubqueryInvestorTransaction, 'id' | 'accountId' | 'epochNumber'>) => {
-//     return {
-//       date: new Date(timestamp).getTime(),
-//       action: type,
-//       amount: tokenAmount,
-//       poolId,
-//       hash,
-//       trancheId,
-//     } as TransactionCardProps
-//   },
-//   borrowerTransactions: ({ timestamp, type, amount, poolId, hash }: SubqueryBorrowerTransaction) =>
-//     ({
-//       date: new Date(timestamp).getTime(),
-//       action: type,
-//       amount,
-//       poolId,
-//       hash,
-//     } as TransactionCardProps),
-//   outstandingOrders: ({ timestamp, investAmount, redeemAmount, poolId, hash, trancheId }: SubqueryOutstandingOrder) =>
-//     ({
-//       date: new Date(timestamp).getTime(),
-//       action: 'PENDING_ORDER',
-//       amount: investAmount.add(redeemAmount),
-//       poolId,
-//       hash,
-//       trancheId,
-//     } as TransactionCardProps),
-// }
+type SubqueryBorrowerTransaction = any
+type SubqueryOutstandingOrder = any
+
+const formatters = {
+  investorTransactions: ({
+    timestamp,
+    type,
+    poolId,
+    hash,
+    tokenAmount,
+    tokenPrice,
+    currencyAmount,
+    trancheId,
+  }: Omit<SubqueryInvestorTransaction, 'id' | 'accountId' | 'epochNumber'>) => {
+    return {
+      date: new Date(timestamp).getTime(),
+      action: type,
+      amount: tokenAmount,
+      poolId,
+      hash,
+      trancheId,
+    } as TransactionCardProps
+  },
+  borrowerTransactions: ({ timestamp, type, amount, poolId, hash }: SubqueryBorrowerTransaction) =>
+    ({
+      date: new Date(timestamp).getTime(),
+      action: type,
+      amount,
+      poolId,
+      hash,
+    } as TransactionCardProps),
+  outstandingOrders: ({ timestamp, investAmount, redeemAmount, poolId, hash, trancheId }: SubqueryOutstandingOrder) =>
+    ({
+      date: new Date(timestamp).getTime(),
+      action: 'PENDING_ORDER',
+      amount: investAmount.add(redeemAmount),
+      poolId,
+      hash,
+      trancheId,
+    } as TransactionCardProps),
+}
 
 export function Transactions({ count }: AddressTransactionsProps) {
   const { formatAddress } = useCentrifugeUtils()
   const address = useAddress()
   const formattedAddress = formatAddress(address || '')
-  // const allTransactions = useAllTransactions(formattedAddress)
+  const allTransactions = useAllTransactions(formattedAddress)
   const formattedTransactions: TransactionCardProps[] = []
 
-  // if (allTransactions) {
-  //   const { borrowerTransactions, investorTransactions, outstandingOrders } = allTransactions
+  if (allTransactions) {
+    const { borrowerTransactions, investorTransactions, outstandingOrders } = allTransactions
 
-  //   investorTransactions.forEach((transaction) =>
-  //     formattedTransactions.push(formatters.investorTransactions(transaction))
-  //   )
-  //   borrowerTransactions.forEach((transaction) =>
-  //     formattedTransactions.push(formatters.borrowerTransactions(transaction))
-  //   )
-  //   outstandingOrders.forEach((transaction) => formattedTransactions.push(formatters.outstandingOrders(transaction)))
-  // }
+    investorTransactions.forEach((transaction) =>
+      formattedTransactions.push(formatters.investorTransactions(transaction))
+    )
+    borrowerTransactions.forEach((transaction) =>
+      formattedTransactions.push(formatters.borrowerTransactions(transaction))
+    )
+    outstandingOrders.forEach((transaction) => formattedTransactions.push(formatters.outstandingOrders(transaction)))
+  }
 
   const transactions = formattedTransactions.slice(0, count ?? formattedTransactions.length)
 
@@ -99,7 +109,7 @@ export function Transactions({ count }: AddressTransactionsProps) {
         <Stack as="ul" role="list">
           {transactions.map((transaction, index) => (
             <Box as="li" key={`${transaction.poolId}${index}`}>
-              <TransactionCard {...transaction} />
+              <TransactionListItem {...transaction} />
             </Box>
           ))}
         </Stack>
@@ -108,3 +118,77 @@ export function Transactions({ count }: AddressTransactionsProps) {
     </Stack>
   ) : null
 }
+
+export type TransactionCardProps = {
+  date: number
+  action: InvestorTransactionType | BorrowerTransactionType | 'PENDING_ORDER'
+  amount: CurrencyBalance
+  poolId: string
+  hash: string
+  trancheId?: string
+}
+
+export function TransactionListItem({ date, action, amount, poolId, hash, trancheId }: TransactionCardProps) {
+  const pool = usePool(poolId) as Pool
+  const { data } = usePoolMetadata(pool)
+  const token = trancheId ? pool.tranches.find(({ id }) => id === trancheId) : undefined
+  const subScanUrl = import.meta.env.REACT_APP_SUBSCAN_URL
+
+  if (!pool || !data) {
+    return null
+  }
+
+  return (
+    <Grid
+      gridTemplateColumns={TRANSACTION_CARD_COLUMNS}
+      gap={TRANSACTION_CARD_GAP}
+      alignItems="start"
+      py={1}
+      borderBottomWidth={1}
+      borderBottomColor="borderPrimary"
+      borderBottomStyle="solid"
+    >
+      <Box>
+        <TransactionTypeChip type={action} />
+      </Box>
+
+      <Text as="time" variant="interactive2" datetime={date}>
+        {formatDate(date, {
+          day: '2-digit',
+          month: '2-digit',
+          year: '2-digit',
+        })}
+      </Text>
+
+      <Stack gap={1}>
+        <Text as="span" variant="interactive2">
+          {!!token ? token.currency?.name : data.pool?.name}
+        </Text>
+        {!!token && (
+          <Text as="span" variant="interactive2" color="textSecondary">
+            {data?.pool?.name}
+          </Text>
+        )}
+      </Stack>
+
+      <Box justifySelf="end">
+        <Text as="span" variant="interactive2">
+          {formatBalance(amount, pool.currency.symbol)}
+        </Text>
+      </Box>
+
+      {!!subScanUrl && !!hash && (
+        <Box
+          as="a"
+          href={`${import.meta.env.REACT_APP_SUBSCAN_URL}/extrinsic/${hash}`}
+          target="_blank"
+          rel="noopener noreferrer"
+          justifySelf="end"
+          aria-label="Transaction on Subscan.io"
+        >
+          <IconExternalLink size="iconSmall" color="textPrimary" />
+        </Box>
+      )}
+    </Grid>
+  )
+}
diff --git a/centrifuge-app/src/components/TokenCard.tsx b/centrifuge-app/src/components/TokenCard.tsx
deleted file mode 100644
index 666cacf58a..0000000000
--- a/centrifuge-app/src/components/TokenCard.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import { AccountTokenBalance, Pool } from '@centrifuge/centrifuge-js'
-import { Grid, Text } from '@centrifuge/fabric'
-import * as React from 'react'
-import { formatBalance } from '../utils/formatting'
-import { usePool } from '../utils/usePools'
-
-type TokenCardProps = AccountTokenBalance
-
-export const TOKEN_CARD_COLUMNS = `250px 200px 100px 150px 1FR`
-export const TOKEN_CARD_GAP = 4
-
-export function TokenCard({ balance, currency, poolId, trancheId }: TokenCardProps) {
-  const pool = usePool(poolId) as Pool
-  const isTinlakePool = poolId?.startsWith('0x')
-
-  if (isTinlakePool) {
-    return null
-  }
-
-  const tranche = pool.tranches.find(({ id }) => id === trancheId)
-
-  return (
-    <Grid
-      gridTemplateColumns={TOKEN_CARD_COLUMNS}
-      gap={TOKEN_CARD_GAP}
-      padding={2}
-      borderStyle="solid"
-      borderWidth={1}
-      borderColor="borderSecondary"
-    >
-      <Text as="span" variant="body2">
-        {currency.name}
-      </Text>
-
-      <Text as="span" variant="body2">
-        {formatBalance(balance, currency)}
-      </Text>
-
-      <Text as="span" variant="body2">
-        {tranche?.tokenPrice ? formatBalance(tranche.tokenPrice, tranche.poolCurrency, 4, 2) : '-'}
-      </Text>
-
-      <Text as="span" variant="body2">
-        {tranche?.tokenPrice
-          ? formatBalance(balance.toDecimal().mul(tranche.tokenPrice.toDecimal()), tranche.poolCurrency, 4, 2)
-          : '-'}
-      </Text>
-    </Grid>
-  )
-}
diff --git a/centrifuge-app/src/components/TransactionCard.tsx b/centrifuge-app/src/components/TransactionCard.tsx
deleted file mode 100644
index c0277a5eb4..0000000000
--- a/centrifuge-app/src/components/TransactionCard.tsx
+++ /dev/null
@@ -1,84 +0,0 @@
-import { BorrowerTransactionType, CurrencyBalance, InvestorTransactionType, Pool } from '@centrifuge/centrifuge-js'
-import { Box, Grid, IconExternalLink, Stack, Text } from '@centrifuge/fabric'
-import * as React from 'react'
-import { formatDate } from '../utils/date'
-import { formatBalance } from '../utils/formatting'
-import { usePool, usePoolMetadata } from '../utils/usePools'
-import { TransactionTypeChip } from './TransactionTypeChip'
-
-export type TransactionCardProps = {
-  date: number
-  action: InvestorTransactionType | BorrowerTransactionType | 'PENDING_ORDER'
-  amount: CurrencyBalance
-  poolId: string
-  hash: string
-  trancheId?: string
-}
-
-export const TRANSACTION_CARD_COLUMNS = `150px 100px 250px 150px 1fr`
-export const TRANSACTION_CARD_GAP = 4
-
-export function TransactionCard({ date, action, amount, poolId, hash, trancheId }: TransactionCardProps) {
-  const pool = usePool(poolId) as Pool
-  const { data } = usePoolMetadata(pool)
-  const token = trancheId ? pool.tranches.find(({ id }) => id === trancheId) : undefined
-  const subScanUrl = import.meta.env.REACT_APP_SUBSCAN_URL
-
-  if (!pool || !data) {
-    return null
-  }
-
-  return (
-    <Grid
-      gridTemplateColumns={TRANSACTION_CARD_COLUMNS}
-      gap={TRANSACTION_CARD_GAP}
-      alignItems="start"
-      py={1}
-      borderBottomWidth={1}
-      borderBottomColor="borderPrimary"
-      borderBottomStyle="solid"
-    >
-      <Box>
-        <TransactionTypeChip type={action} />
-      </Box>
-
-      <Text as="time" variant="interactive2" datetime={date}>
-        {formatDate(date, {
-          day: '2-digit',
-          month: '2-digit',
-          year: '2-digit',
-        })}
-      </Text>
-
-      <Stack gap={1}>
-        <Text as="span" variant="interactive2">
-          {!!token ? token.currency?.name : data.pool?.name}
-        </Text>
-        {!!token && (
-          <Text as="span" variant="interactive2" color="textSecondary">
-            {data?.pool?.name}
-          </Text>
-        )}
-      </Stack>
-
-      <Box justifySelf="end">
-        <Text as="span" variant="interactive2">
-          {formatBalance(amount, pool.currency)}
-        </Text>
-      </Box>
-
-      {!!subScanUrl && !!hash && (
-        <Box
-          as="a"
-          href={`${import.meta.env.REACT_APP_SUBSCAN_URL}/extrinsic/${hash}`}
-          target="_blank"
-          rel="noopener noreferrer"
-          justifySelf="end"
-          aria-label="Transaction on Subscan.io"
-        >
-          <IconExternalLink size="iconSmall" color="textPrimary" />
-        </Box>
-      )}
-    </Grid>
-  )
-}