[x] Mint Asset, add Orange for Risky level

[x] Borrow Limit: Safe <50% Risky 50 - 80% Danger >80% Signed-off-by: antonnell <[email protected]>
SeaSaltyFunk · Nov 26, 2021 · 0711db1 · 0711db1
1 parent 3835ab5
commit 0711db1
Show file tree

Hide file tree

Showing 8 changed files with 54 additions and 13 deletions.
diff --git a/components/ffMintOverview/ffOverview.js b/components/ffMintOverview/ffOverview.js
@@ -195,6 +195,9 @@ export default function ffOverview() {
                     `${formatCurrency(position && position.length >= 3 ? position[3] / 100 : 0)} %`
                   )}
                 </Typography>
+                { BigNumber(position && position.length >= 3 ? position[3] / 100 : 0).lt(50) && <Typography className={ `${classes.subValue} ${classes.greenText}` }>Safe</Typography> }
+                { BigNumber(position && position.length >= 3 ? position[3] / 100 : 0).gt(80) && <Typography className={ `${classes.subValue} ${classes.redText}` }>Dangerous</Typography> }
+                { BigNumber(position && position.length >= 3 ? position[3] / 100 : 0).gte(50) && BigNumber(position && position.length >= 3 ? position[3] / 100 : 0).lte(80) && <Typography className={ `${classes.subValue} ${classes.orangeText}` }>Risky</Typography> }
                 </Grid>
               </Grid>
             </div>

diff --git a/components/ffMintOverview/ffOverview.module.css b/components/ffMintOverview/ffOverview.module.css
@@ -114,6 +114,18 @@
   margin-right: 24px !important;
 }
 
+.greenText {
+  color: #49a766 !important;
+}
+
+.orangeText {
+  color: #ffc512 !important;
+}
+
+.redText {
+  color: #dc3545 !important;
+}
+
 @media screen and (max-width: 1200px) {
   .container {
     width: calc(100% - 0px);

diff --git a/components/lendAllAssetRow/lendAllAssetRow.js b/components/lendAllAssetRow/lendAllAssetRow.js
@@ -236,7 +236,7 @@ function LendAllAssetRowDetails({ lendingAsset, lendingBorrow, lendingBorrowLimi
 
   return (
     <Paper elevation={0} square className={classes.assetActions}>
-      <div className={BigNumber(theLimitUsed).gt(100) ? classes.assetInfoError : classes.assetInfo}>
+      <div className={BigNumber(theLimitUsed).gt(80) ? classes.assetInfoError : BigNumber(theLimitUsed).gte(50) ? classes.assetInfoWarning : classes.assetInfo}>
         <div className={classes.infoField}>
           <Typography variant={'h5'}>
             Borrow limit:

diff --git a/components/lendAllAssetRow/lendAllAssetRow.module.css b/components/lendAllAssetRow/lendAllAssetRow.module.css
@@ -174,6 +174,18 @@
   background: #dc3545;
 }
 
+.assetInfoWarning {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex: 1;
+  padding: 36px;
+  width: 100%;
+  flex-wrap: wrap;
+  border-bottom: 1px solid rgba(128, 128, 128, 0.32);
+  background: #ffc512;
+}
+
 .removePadding {
   padding: 0px 24px !important;
 }

diff --git a/components/lendBorrowAssetRow/lendBorrowAssetRow.js b/components/lendBorrowAssetRow/lendBorrowAssetRow.js
@@ -256,11 +256,7 @@ function LendBorrowAssetDetails({
   return (
     <Paper elevation={0} square className={classes.assetActions}>
       <div
-        className={
-          BigNumber(theLimitUsed).gt(100)
-            ? classes.assetInfoError
-            : classes.assetInfo
-        }
+        className={BigNumber(theLimitUsed).gt(80) ? classes.assetInfoError : BigNumber(theLimitUsed).gte(50) ? classes.assetInfoWarning : classes.assetInfo}
       >
         <div className={classes.infoField}>
           <Typography variant={"h5"}>

diff --git a/components/lendBorrowAssetRow/lendBorrowAssetRow.module.css b/components/lendBorrowAssetRow/lendBorrowAssetRow.module.css
@@ -170,6 +170,18 @@
   background: #dc3545;
 }
 
+.assetInfoWarning {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex: 1;
+  padding: 36px;
+  width: 100%;
+  flex-wrap: wrap;
+  border-bottom: 1px solid rgba(128, 128, 128, 0.32);
+  background: #ffc512;
+}
+
 @media screen and (max-width: 1000px) {
   .lendingRow {
     padding: 0px 6px;

diff --git a/components/lendSupplyAssetRow/lendSupplyAssetRow.js b/components/lendSupplyAssetRow/lendSupplyAssetRow.js
@@ -269,13 +269,7 @@ function LendSupplyAssetDetails({
 
   return (
     <Paper elevation={0} square className={classes.assetActions}>
-      <div
-        className={
-          theLimitUsed === "infinite" || BigNumber(theLimitUsed).gt(100)
-            ? classes.assetInfoError
-            : classes.assetInfo
-        }
-      >
+      <div className={ theLimitUsed === "infinite" || BigNumber(theLimitUsed).gt(80) ? classes.assetInfoError : BigNumber(theLimitUsed).gte(50) ? classes.assetInfoWarning : classes.assetInfo } >
         <div className={classes.infoField}>
           <Typography variant={"h5"}>
             Borrow limit:

diff --git a/components/lendSupplyAssetRow/lendSupplyAssetRow.module.css b/components/lendSupplyAssetRow/lendSupplyAssetRow.module.css
@@ -166,6 +166,18 @@
   background: #dc3545;
 }
 
+.assetInfoWarning {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex: 1;
+  padding: 36px;
+  width: 100%;
+  flex-wrap: wrap;
+  border-bottom: 1px solid rgba(128, 128, 128, 0.32);
+  background: #ffc512;
+}
+
 
 @media screen and (max-width: 1000px) {
   .lendingRow {