diff --git a/frontend/src/App.js b/frontend/src/App.js
index 9725d92..16b501d 100644
--- a/frontend/src/App.js
+++ b/frontend/src/App.js
@@ -5,6 +5,7 @@ import { Route, Routes } from "react-router-dom";
import LandingPage from "./pages/LandingPage";
import ProfilePage from "./pages/ProfilePage";
import CollateralManagementPage from "./pages/CollateralManagementPage";
+import HealthFactor from "./components/HealthFactor/HealthFactor";
function App() {
return (
@@ -12,6 +13,7 @@ function App() {
} />
} />
} />
+ } />
);
}
diff --git a/frontend/src/components/HealthFactor/HealthFactor.jsx b/frontend/src/components/HealthFactor/HealthFactor.jsx
new file mode 100644
index 0000000..3f38b72
--- /dev/null
+++ b/frontend/src/components/HealthFactor/HealthFactor.jsx
@@ -0,0 +1,315 @@
+import React, { useState, useEffect } from 'react';
+import axios from 'axios';
+import {
+ Table,
+ TableBody,
+ TableCell,
+ TableContainer,
+ TableHead,
+ TableRow,
+ Paper,
+ TextField,
+ InputAdornment,
+ Button,
+} from '@mui/material';
+import { useUserStore } from '../../store/userStore';
+
+const HealthFactor = () => {
+ const [loading, setLoading] = useState(false);
+ const [addressInput, setAddressInput] = useState('');
+ const [userAddress, setUserAddress] = useState('');
+ const [healthFactor, setHealthFactor] = useState(0);
+ const [collateralData, setCollateralData] = useState([]);
+ const [debtData, setDebtData] = useState([]);
+
+ useEffect(() => {
+ fetchData();
+ }, [userAddress]);
+
+ const fetchData = async () => {
+ if (userAddress) {
+ setLoading(true);
+ const response = await axios.get(`https://finsafe-backend.insidefi.io/health/factor/${userAddress}`);
+
+ setCollateralData(
+ response.data.result.data?.metadata?.supplied.map((item) => ({
+ address: item.underlying,
+ amount: item.balance,
+ price: item.usdPrice,
+ threshold: item.liqudationThreshold,
+ }))
+ );
+ setDebtData(
+ response.data.result.data?.metadata?.borrowed.map((item) => ({
+ address: item.underlying,
+ amount: item.balance,
+ price: item.usdPrice,
+ }))
+ );
+
+ setHealthFactor(response.data.result.data?.metadata?.healthFactor);
+ setLoading(false);
+ }
+ };
+
+ const fetchDataAndUpdateHealthFactor = async () => {
+ if (userAddress) {
+ setLoading(true);
+
+ const payload = {
+ supplied: collateralData.map((item) => ({
+ underlying: item.address,
+ balance: item.amount,
+ usdPrice: item.price,
+ liqudationThreshold: item.threshold,
+ })),
+ borrowed: debtData.map((item) => ({
+ underlying: item.address,
+ balance: item.amount,
+ usdPrice: item.price,
+ })),
+ };
+
+ try {
+ const response = await axios.post(`https://finsafe-backend.insidefi.io/health/factor/calculate`, payload);
+
+ setHealthFactor(response.data?.result?.data);
+ } catch (error) {
+ console.error('Error updating health factor:', error);
+ }
+
+ setLoading(false);
+ }
+ };
+
+ const handleCollateralChange = (index, field, value) => {
+ const updatedData = [...collateralData];
+ updatedData[index][field] = value;
+ setCollateralData(updatedData);
+
+ fetchDataAndUpdateHealthFactor();
+ };
+
+ const handleDebtChange = (index, field, value) => {
+ const updatedData = [...debtData];
+ updatedData[index][field] = value;
+ setDebtData(updatedData);
+
+ fetchDataAndUpdateHealthFactor();
+ };
+
+ const handleEnterKeyPress = (index, isCollateral) => {
+ if (isCollateral) {
+ setCollateralData([...collateralData, { address: '', amount: '', price: '', threshold: '' }]);
+ } else {
+ setDebtData([...debtData, { address: '', amount: '', price: '' }]);
+ }
+ };
+
+ const handleAddRow = (isCollateral) => {
+ if (isCollateral) {
+ setCollateralData([...collateralData, { address: '', amount: '', price: '', threshold: '' }]);
+ } else {
+ setDebtData([...debtData, { address: '', amount: '', price: '' }]);
+ }
+ };
+
+ const handleDeleteRow = (index, isCollateral) => {
+ if (isCollateral) {
+ const updatedData = [...collateralData];
+ updatedData.splice(index, 1);
+ setCollateralData(updatedData);
+ } else {
+ const updatedData = [...debtData];
+ updatedData.splice(index, 1);
+ setDebtData(updatedData);
+ }
+
+ fetchDataAndUpdateHealthFactor();
+ };
+
+ const handleManualApiCall = () => {
+ fetchDataAndUpdateHealthFactor();
+ };
+
+ return (
+
+
HEALTH FACTOR SIMULATION TOOL
+
+
+
setAddressInput(e.target.value)}
+ InputProps={{
+ style: { color: 'white' },
+ endAdornment: (
+
+
+
+ ),
+ }}
+ style={{ margin: '10px 0', width: '100%' }}
+ InputLabelProps={{
+ style: {
+ color: 'white',
+ },
+ }}
+ />
+
+ Collateral
+
+
+
+
+ Collateral Address
+ Collateral Amount
+ Price
+ Liquidation Threshold
+ Actions
+
+
+
+ {collateralData.map((row, index) => (
+
+
+ handleCollateralChange(index, 'address', e.target.value)}
+ onKeyPress={(e) => e.key === 'Enter' && handleEnterKeyPress(index, true)}
+ />
+
+
+ handleCollateralChange(index, 'amount', e.target.value)}
+ onKeyPress={(e) => e.key === 'Enter' && handleEnterKeyPress(index, true)}
+ />
+
+
+ handleCollateralChange(index, 'price', e.target.value)}
+ InputProps={{
+ startAdornment: $,
+ }}
+ onKeyPress={(e) => e.key === 'Enter' && handleEnterKeyPress(index, true)}
+ />
+
+
+ handleCollateralChange(index, 'threshold', e.target.value)}
+ onKeyPress={(e) => e.key === 'Enter' && handleEnterKeyPress(index, true)}
+ />
+
+
+ {index === collateralData.length - 1 && (
+ <>
+
+
+
+ )}
+
+
+ ))}
+
+
+
+
+ Debt
+
+
+
+
+ Debt Address
+ Debt Amount
+ Price
+ Actions
+
+
+
+ {debtData.map((row, index) => (
+
+
+ handleDebtChange(index, 'address', e.target.value)}
+ onKeyPress={(e) => e.key === 'Enter' && handleEnterKeyPress(index, false)}
+ />
+
+
+ handleDebtChange(index, 'amount', e.target.value)}
+ onKeyPress={(e) => e.key === 'Enter' && handleEnterKeyPress(index, false)}
+ />
+
+
+ handleDebtChange(index, 'price', e.target.value)}
+ InputProps={{
+ startAdornment: $,
+ }}
+ onKeyPress={(e) => e.key === 'Enter' && handleEnterKeyPress(index, false)}
+ />
+
+
+ {index === debtData.length - 1 && (
+ <>
+
+
+
+ )}
+
+
+ ))}
+
+
+
+{/*
+ */}
+
+ Health Factor = {healthFactor}
+