const DashPanel = styled.div` width: 100%; display: flex; align-items: center; background-color: #181a27; border: 1px solid #332c4b; border-radius: 12px; height: 90px; padding: 30px; box-sizing: border-box; margin-top: 30px; `; const PanelItem = styled.div` width: 20%; `; const Line = styled.div` height: 68px; width: 1px; background-color: #332c4b; margin-right: 20px; `; const Label = styled.div` color: #7c7f96; font-size: 14px; font-weight: 400; padding-bottom: 4px; `; const Value = styled.div` color: #fff; font-size: 18px; font-weight: 500; `; const { userSupply, userBorrow, accountLiquidity, healthFactor } = props; const calculateBorrowLimitUsed = () => { if (Big(accountLiquidity || 0).eq(0) || Big(userBorrow || 0).eq(0)) return "0%"; return ( Big(userBorrow) .div(Big(userBorrow).plus(accountLiquidity)) .mul(100) .toFixed(2) + "%" ); }; const formatAmount = (amount) => { if (!amount) return "0"; return Big(amount).toFixed(4); }; const formatHealthFactor = () => { if (!healthFactor) return "0.00"; if (Big(healthFactor).gt(2)) return "2.00"; return Big(healthFactor).toFixed(2); }; return ( <DashPanel> <PanelItem> <Label>Your Supplied</Label> <Widget src="bluebiu.near/widget/0vix.LendingBalance" props={{ balance: formatAmount(userSupply) }} /> </PanelItem> <PanelItem> <Label>Your Borrows</Label> <Widget src="bluebiu.near/widget/0vix.LendingBalance" props={{ balance: formatAmount(userBorrow) }} /> </PanelItem> <Line /> <PanelItem> <Label>Borrow Limit Used</Label> <Value>{calculateBorrowLimitUsed()}</Value> </PanelItem> <PanelItem> <Label>Health Factor</Label> <Value>{formatHealthFactor()}</Value> </PanelItem> <PanelItem> <Label>Liquidation Risk</Label> <Value>{userBorrow ? "VERY HIGH RISK" : "N/A"}</Value> </PanelItem> </DashPanel> );