From 00bf384e54eb8d8a266aef9863e8805fe278d9ba Mon Sep 17 00:00:00 2001
From: Bowtiedpyro <bowtiedpyro@gmail.com>
Date: Fri, 9 Dec 2022 15:04:07 +0100
Subject: [PATCH 1/3] wip integrate health lvl

---
 components/HealthLvl/HealthLvl.tsx |  4 +++-
 components/HealthLvl/types.ts      | 10 +++++-----
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/components/HealthLvl/HealthLvl.tsx b/components/HealthLvl/HealthLvl.tsx
index 2745da4..127209f 100644
--- a/components/HealthLvl/HealthLvl.tsx
+++ b/components/HealthLvl/HealthLvl.tsx
@@ -2,6 +2,8 @@ import React, { FC } from 'react';
 import * as style from './HealthLvl.css';
 import { HealthLvlProps, HealthLvlPoint } from './types';
 
+// const { formatPercent: fp } = formatNumber;
+
 const HealthLvl: FC<HealthLvlProps> = (props) => {
 	const { healthLvl } = props;
 
@@ -30,7 +32,7 @@ const HealthLvl: FC<HealthLvlProps> = (props) => {
 				</div>
 			);
 		}
-		return <div className={style.valueCell}>0</div>;
+		return <div className={style.valueCell}>NaN</div>;
 	};
 
 	return <>{healthLvl && getStatus(healthLvl)}</>;
diff --git a/components/HealthLvl/types.ts b/components/HealthLvl/types.ts
index 5ee6f11..db4cdec 100644
--- a/components/HealthLvl/types.ts
+++ b/components/HealthLvl/types.ts
@@ -1,10 +1,10 @@
 export interface HealthLvlProps {
-	healthLvl: number;
+  healthLvl: number;
 }
 
 export enum HealthLvlPoint {
-	Safe = 100,
-	Warning = 70,
-	Danger = 40,
-	Min = 0
+  Safe = 100,
+  Warning = 70,
+  Danger = 40,
+  Min = 0
 }

From 9d02fd0d87fc1c24a7a0014b35d88c12fbbcc2ec Mon Sep 17 00:00:00 2001
From: Bowtiedpyro <bowtiedpyro@gmail.com>
Date: Fri, 9 Dec 2022 16:38:14 +0100
Subject: [PATCH 2/3] integrate ealth percentage desktop and mobile for each
 position in the market

---
 pages/borrow/index.tsx | 64 +++++++++++++++++++++++++++++++-----------
 1 file changed, 48 insertions(+), 16 deletions(-)

diff --git a/pages/borrow/index.tsx b/pages/borrow/index.tsx
index f7fe0d6..9255d86 100644
--- a/pages/borrow/index.tsx
+++ b/pages/borrow/index.tsx
@@ -34,13 +34,19 @@ import useDisplayStore from '../../store/displayStore';
 import { getContractsByHTokenAddr } from '../../helpers/generalHelper';
 import HealthLvl from 'components/HealthLvl/HealthLvl';
 import c from 'classnames';
+import { useGetNFTPrice } from '../../hooks/useHtokenHelper';
+import { useGetBorrowAmount } from 'hooks/useCoupon';
+import useToast from 'hooks/useToast';
 
 const { formatPercent: fp, formatERC20: fs } = formatNumber;
 const Markets: NextPage = () => {
+	const COLLATERAL_FACTOR = 0.65;
 	const { currentUser, setCurrentUser } = useContext(UserContext);
 	const [tableData, setTableData] = useState<MarketTableRow[]>([]);
 	const [isMyCollectionsFilterEnabled, setIsMyCollectionsFilterEnabled] = useState(false);
 	const [expandedRowKeys, setExpandedRowKeys] = useState<readonly antdKey[]>([]);
+	const { toast, ToastComponent } = useToast();
+	const NFTId = useLoanFlowStore((state) => state.NFTId);
 	const {
 		HERC20ContractAddr: HERC20ContractAddress,
 		setHERC20ContractAddr,
@@ -72,6 +78,26 @@ const Markets: NextPage = () => {
 		currentUser,
 		unit
 	);
+	const [nftPrice, isLoadingNFTPrice] = useGetNFTPrice(
+		htokenHelperContractAddress,
+		HERC20ContractAddress
+	);
+	const [borrowAmount, isLoadingBorrowAmount] = useGetBorrowAmount(
+		HERC20ContractAddress,
+		NFTId,
+		unit
+	);
+	/* initial all financial value here */
+	const borrowedValue = parseFloat(borrowAmount);
+
+	useEffect(() => {
+		if (isLoadingNFTPrice || isLoadingBorrowAmount || isLoadingPositions) {
+			toast.processing();
+		} else {
+			toast.clear();
+		}
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [isLoadingNFTPrice, isLoadingBorrowAmount, isLoadingPositions]);
 
 	/*   End insert data into table */
 	/*    Begin filter function       */
@@ -280,7 +306,7 @@ const Markets: NextPage = () => {
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 		[isMyCollectionsFilterEnabled, tableData, searchQuery]
 	);
-
+	// positions in each market desktop
 	const expandColumns: ColumnType<MarketTablePosition>[] = [
 		{
 			dataIndex: ['name', 'image', 'tokenId'],
@@ -296,7 +322,9 @@ const Markets: NextPage = () => {
 					</div>
 					<div className={style.nameCellText}>
 						<div className={style.collectionName}>{`${row['name']} #${row['tokenId']}`}</div>
-						<HealthLvl healthLvl={0} />
+						<HealthLvl
+							healthLvl={((nftPrice - parseInt(row.debt) / COLLATERAL_FACTOR) / nftPrice) * 100}
+						/>
 					</div>
 				</div>
 			)
@@ -345,25 +373,29 @@ const Markets: NextPage = () => {
 			)
 		}
 	];
-
+	// positions in each market mobile
 	const expandColumnsMobile: ColumnType<MarketTablePosition>[] = [
 		{
 			dataIndex: ['name', 'image', 'tokenId'],
 			key: 'tokenId',
-			render: (text, row) => (
-				<div className={style.expandedRowNameCell}>
-					<div className={style.expandedRowIcon} />
-					<div className={style.collectionLogo}>
-						<HexaBoxContainer>
-							<Image src={row['image']} layout="fill" alt="nft icon" />
-						</HexaBoxContainer>
-					</div>
-					<div className={style.nameCellText}>
-						<div className={style.collectionName}>{`${row['name']} #${row['tokenId']}`}</div>
-						<HealthLvl healthLvl={row.healthLvl || 0} />
+			render: (text, row) => {
+				return (
+					<div className={style.expandedRowNameCell}>
+						<div className={style.expandedRowIcon} />
+						<div className={style.collectionLogo}>
+							<HexaBoxContainer>
+								<Image src={row['image']} layout="fill" alt="nft icon" />
+							</HexaBoxContainer>
+						</div>
+						<div className={style.nameCellText}>
+							<div className={style.collectionName}>{`${row['name']} #${row['tokenId']}`}</div>
+							<HealthLvl
+								healthLvl={((nftPrice - parseInt(row.debt) / COLLATERAL_FACTOR) / nftPrice) * 100}
+							/>
+						</div>
 					</div>
-				</div>
-			)
+				);
+			}
 		},
 		{
 			dataIndex: ['tokenId', 'couponId'],

From 56a72678ce46d08097d22e53cfe04bc9e43a1a83 Mon Sep 17 00:00:00 2001
From: Bowtiedpyro <bowtiedpyro@gmail.com>
Date: Fri, 9 Dec 2022 19:49:49 +0100
Subject: [PATCH 3/3] add N/A

---
 components/HealthLvl/HealthLvl.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/HealthLvl/HealthLvl.tsx b/components/HealthLvl/HealthLvl.tsx
index 127209f..b8cd68e 100644
--- a/components/HealthLvl/HealthLvl.tsx
+++ b/components/HealthLvl/HealthLvl.tsx
@@ -32,7 +32,7 @@ const HealthLvl: FC<HealthLvlProps> = (props) => {
 				</div>
 			);
 		}
-		return <div className={style.valueCell}>NaN</div>;
+		return <div className={style.valueCell}>N/A</div>;
 	};
 
 	return <>{healthLvl && getStatus(healthLvl)}</>;