Token Transfers MVP (#2443)

centrifuge · Sep 16, 2024 · 696ee0c · 696ee0c
1 parent 78176db
commit 696ee0c
Show file tree

Hide file tree

Showing 12 changed files with 496 additions and 244 deletions.
diff --git a/centrifuge-app/src/components/Portfolio/Holdings.tsx b/centrifuge-app/src/components/Portfolio/Holdings.tsx
@@ -26,7 +26,7 @@ import { Tooltips } from '../Tooltips'
 import { TransferTokensDrawer } from './TransferTokensDrawer'
 import { usePortfolioTokens } from './usePortfolio'
 
-type Row = {
+export type Holding = {
   currency: Token['currency']
   poolId: string
   trancheId: string
@@ -42,13 +42,13 @@ const columns: Column[] = [
   {
     align: 'left',
     header: 'Token',
-    cell: (token: Row) => {
+    cell: (token: Holding) => {
       return <TokenWithIcon {...token} />
     },
   },
   {
     header: <Tooltips type="cfgPrice" label="Token price" />,
-    cell: ({ tokenPrice }: Row) => {
+    cell: ({ tokenPrice }: Holding) => {
       return (
         <Text textOverflow="ellipsis" variant="body3">
           {formatBalance(tokenPrice || 1, 'USD', 4)}
@@ -59,7 +59,7 @@ const columns: Column[] = [
   },
   {
     header: <SortableTableHeader label="Position" />,
-    cell: ({ currency, position }: Row) => {
+    cell: ({ currency, position }: Holding) => {
       return (
         <Text textOverflow="ellipsis" variant="body3">
           {formatBalanceAbbreviated(position || 0, currency?.symbol, 2)}
@@ -71,7 +71,7 @@ const columns: Column[] = [
   },
   {
     header: <SortableTableHeader label="Market value" />,
-    cell: ({ marketValue }: Row) => {
+    cell: ({ marketValue }: Holding) => {
       return (
         <Text textOverflow="ellipsis" variant="body3">
           {formatBalanceAbbreviated(marketValue || 0, 'USD', 2)}
@@ -82,14 +82,21 @@ const columns: Column[] = [
     align: 'left',
   },
   {
-    align: 'left',
+    align: 'right',
     header: '', // invest redeem buttons
-    cell: ({ showActions, poolId, trancheId, currency, connectedNetwork }: Row) => {
+    width: 'max-content',
+    cell: ({ showActions, poolId, trancheId, currency, connectedNetwork }: Holding) => {
       return (
         <Grid gap={1} justifySelf="end">
           {showActions ? (
             trancheId ? (
               <Shelf>
+                <RouterLinkButton to={`?receive=${poolId}.${trancheId}`} small variant="tertiary" icon={IconDownload}>
+                  Receive
+                </RouterLinkButton>
+                <RouterLinkButton to={`?send=${poolId}.${trancheId}`} small variant="tertiary" icon={IconSend}>
+                  Send
+                </RouterLinkButton>
                 <RouterLinkButton to={`?redeem=${poolId}.${trancheId}`} small variant="tertiary" icon={IconMinus}>
                   Redeem
                 </RouterLinkButton>
@@ -127,7 +134,7 @@ export function useHoldings(address?: string, chainId?: number, showActions = tr
   const currencies = usePoolCurrencies()
   const CFGPrice = useCFGTokenPrice()
 
-  const tokens: Row[] = [
+  const tokens: Holding[] = [
     ...portfolioTokens.map((token) => ({
       ...token,
       tokenPrice: token.tokenPrice.toDecimal() || Dec(0),
@@ -179,7 +186,7 @@ export function useHoldings(address?: string, chainId?: number, showActions = tr
           connectedNetwork: wallet.connectedNetworkName,
         }
       }) || []),
-    ...((wallet.connectedNetworkName === 'Centrifuge' && showActions) || centBalances?.native.balance.gtn(0)
+    ...((wallet.connectedNetwork === 'centrifuge' && showActions) || centBalances?.native.balance.gtn(0)
       ? [
           {
             currency: {
@@ -239,7 +246,6 @@ export function Holdings({
         defaultView={openRedeemDrawer ? 'redeem' : 'invest'}
       />
       <TransferTokensDrawer
-        address={address}
         isOpen={!!(openSendDrawer || openReceiveDrawer)}
         onClose={() => navigate(pathname, { replace: true })}
       />
@@ -254,7 +260,7 @@ export function Holdings({
   )
 }
 
-const TokenWithIcon = ({ poolId, currency }: Row) => {
+const TokenWithIcon = ({ poolId, currency }: Holding) => {
   const pool = usePool(poolId, false)
   const { data: metadata } = usePoolMetadata(pool)
   const cent = useCentrifuge()