From e49f093d49c1a85e3d61b9b2a4f996ab5a659dba Mon Sep 17 00:00:00 2001
From: peiman3 <peiman@cc.snxdao.io>
Date: Thu, 19 Dec 2024 16:45:05 +0330
Subject: [PATCH] Show Issued Debt on dashboard

---
 .../Positions/PositionTableHeader.tsx         | 48 ++++++++-----
 .../src/components/Positions/PositionsRow.tsx | 69 ++++++++++++++-----
 2 files changed, 81 insertions(+), 36 deletions(-)

diff --git a/liquidity/ui/src/components/Positions/PositionTableHeader.tsx b/liquidity/ui/src/components/Positions/PositionTableHeader.tsx
index e48b940b..9044f183 100644
--- a/liquidity/ui/src/components/Positions/PositionTableHeader.tsx
+++ b/liquidity/ui/src/components/Positions/PositionTableHeader.tsx
@@ -86,25 +86,39 @@ export function PositionTableHeader() {
           </Flex>
         </Th>
         {network?.preset === 'andromeda' ? null : (
-          <Th border="none" textTransform="unset" py={5}>
-            <Flex justifyContent="flex-end" alignItems="center">
+          <>
+            <Th textAlign="right" border="none" textTransform="unset" py={5}>
               <Text color="gray.600" fontFamily="heading" fontSize="12px" lineHeight="16px" mr={1}>
-                C-Ratio
+                Issued
               </Text>
-              <Tooltip
-                label={
-                  <Flex flexDirection="column" alignItems="start">
-                    <Text textAlign="left" fontSize="14px">
-                      C-ratio is a dynamic number that represents a ratio between your locked
-                      collateral and your debt
-                    </Text>
-                  </Flex>
-                }
-              >
-                <InfoIcon w="10px" h="10px" />
-              </Tooltip>
-            </Flex>
-          </Th>
+            </Th>
+
+            <Th border="none" textTransform="unset" py={5}>
+              <Flex justifyContent="flex-end" alignItems="center">
+                <Text
+                  color="gray.600"
+                  fontFamily="heading"
+                  fontSize="12px"
+                  lineHeight="16px"
+                  mr={1}
+                >
+                  C-Ratio
+                </Text>
+                <Tooltip
+                  label={
+                    <Flex flexDirection="column" alignItems="start">
+                      <Text textAlign="left" fontSize="14px">
+                        C-ratio is a dynamic number that represents a ratio between your locked
+                        collateral and your debt
+                      </Text>
+                    </Flex>
+                  }
+                >
+                  <InfoIcon w="10px" h="10px" />
+                </Tooltip>
+              </Flex>
+            </Th>
+          </>
         )}
         <Th
           py={5}
diff --git a/liquidity/ui/src/components/Positions/PositionsRow.tsx b/liquidity/ui/src/components/Positions/PositionsRow.tsx
index b9153702..20feb5d9 100644
--- a/liquidity/ui/src/components/Positions/PositionsRow.tsx
+++ b/liquidity/ui/src/components/Positions/PositionsRow.tsx
@@ -11,6 +11,7 @@ import { makeSearch, useParams } from '@snx-v3/useParams';
 import { useWithdrawTimer } from '@snx-v3/useWithdrawTimer';
 import { CRatioAmount } from '../CRatioBar/CRatioAmount';
 import { CRatioBadge } from '../CRatioBar/CRatioBadge';
+import { useSystemToken } from '@snx-v3/useSystemToken';
 
 export function PositionRow({
   liquidityPosition,
@@ -31,6 +32,8 @@ export function PositionRow({
   const { data: stataUSDCAPR } = useStataUSDCApr(network?.id, network?.preset);
   const stataUSDCAPRParsed = stataUSDCAPR || 0;
 
+  const { data: systemToken } = useSystemToken();
+
   return (
     <>
       <Td border="none">
@@ -225,28 +228,56 @@ export function PositionRow({
         </Flex>
       </Td>
       {network?.preset === 'andromeda' ? null : (
-        <Td border="none">
-          <Fade in>
+        <>
+          <Td textAlign="right" border="none">
             <Flex flexDirection="column" alignItems="flex-end">
-              <Text color="white" fontSize="sm" lineHeight="1.25rem" fontFamily="heading">
-                <CRatioAmount value={liquidityPosition.cRatio.toNumber() * 100} />
+              <Text
+                display="flex"
+                gap={1.5}
+                alignItems="center"
+                color="white"
+                lineHeight="1.25rem"
+                fontFamily="heading"
+                fontSize="sm"
+              >
+                <Amount prefix="$" value={liquidityPosition?.availableSystemToken} />
+                {liquidityPosition.availableCollateral.gt(0) && isRunning && (
+                  <Tooltip label={`Withdrawal available in ${hours}H${minutes}M`}>
+                    <TimeIcon />
+                  </Tooltip>
+                )}
+              </Text>
+              <Text color="gray.500" fontFamily="heading" fontSize="0.75rem" lineHeight="1rem">
+                <Amount
+                  value={liquidityPosition?.availableSystemToken}
+                  suffix={` ${systemToken?.symbol}`}
+                />
               </Text>
-              <CRatioBadge
-                cRatio={liquidityPosition.cRatio.toNumber() * 100}
-                liquidationCratio={
-                  liquidityPosition.collateralType.liquidationRatioD18
-                    ? liquidityPosition.collateralType.liquidationRatioD18.toNumber() * 100
-                    : 0
-                }
-                targetCratio={
-                  liquidityPosition.collateralType.issuanceRatioD18
-                    ? liquidityPosition.collateralType.issuanceRatioD18.toNumber() * 100
-                    : 0
-                }
-              />
             </Flex>
-          </Fade>
-        </Td>
+          </Td>
+          <Td border="none">
+            <Fade in>
+              <Flex flexDirection="column" alignItems="flex-end">
+                <Text color="white" fontSize="sm" lineHeight="1.25rem" fontFamily="heading">
+                  <CRatioAmount value={liquidityPosition.cRatio.toNumber() * 100} />
+                </Text>
+                <CRatioBadge
+                  cRatio={liquidityPosition.cRatio.toNumber() * 100}
+                  liquidationCratio={
+                    liquidityPosition.collateralType.liquidationRatioD18
+                      ? liquidityPosition.collateralType.liquidationRatioD18.toNumber() * 100
+                      : 0
+                  }
+                  targetCratio={
+                    liquidityPosition.collateralType.issuanceRatioD18
+                      ? liquidityPosition.collateralType.issuanceRatioD18.toNumber() * 100
+                      : 0
+                  }
+                />
+              </Flex>
+            </Fade>
+          </Td>
+        </>
       )}
       <Td border="none" pr={0}>
         <Flex justifyContent="flex-end">