feat: fix payback flash

the-standard · Jun 14, 2024 · b870a70 · b870a70
1 parent d897464
commit b870a70
Showing 1 changed file with 77 additions and 76 deletions.
diff --git a/src/components/vault/EurosCompare.jsx b/src/components/vault/EurosCompare.jsx
@@ -35,7 +35,7 @@ const EurosCompare = () => {
     },
   ];
 
-  const { data: priceData } = useReadContracts({
+  const { data: priceData, isPending } = useReadContracts({
     contracts,
   });
 
@@ -78,102 +78,103 @@ const EurosCompare = () => {
 
   const showDiscount = Math.abs(currentDiscount);
 
-  if (currentDiscount < 0) {
+  if (currentDiscount < 0 || isPending) {
     return (
-      <div className="flex flex-col md:flex-row flex-1">
-        <div className="flex flex-col md:flex-row">
-          <div class="divider md:divider-horizontal" />
-          <div>
-            <div className="mb-2">
+      <></>
+    );  
+  }
+
+  return (
+    <div className="flex flex-col md:flex-row flex-1">
+      <div className="flex flex-col md:flex-row">
+        <div class="divider md:divider-horizontal" />
+        <div>
+          <div className="mb-2">
+            <Typography
+              variant="h2"
+              className="mb-1"
+            >
+              Repay Your Debt for a Discount
+            </Typography>
+            <Typography
+              variant="p"
+            >
+              Take advantage of market conditions to reduce your EUROs debt.
+              <br/>
+              When the EUROs Value dips below the FX market price of EUR, you have the opportunity to repay your debt at discount. Act swiftly to lock in your savings and strengthen your financial position.
+            </Typography>
+          </div>
+
+          <div className="mb-2">
+            <Typography
+              variant="h3"
+            >
+              Current Savings Opportunity:
+            </Typography>
+            <div
+              className="flex justify-between align-center"
+            >
               <Typography
-                variant="h2"
-                className="mb-1"
+                variant="p"
+                className="flex-1"
               >
-                Repay Your Debt for a Discount
+                EUR FX market price (USD):
               </Typography>
               <Typography
                 variant="p"
+                className="flex-1"
               >
-                Take advantage of market conditions to reduce your EUROs debt.
-                <br/>
-                When the EUROs Value dips below the FX market price of EUR, you have the opportunity to repay your debt at discount. Act swiftly to lock in your savings and strengthen your financial position.
+                ${chainPrice}
               </Typography>
             </div>
-
-            <div className="mb-2">
+
+            <div
+              className="flex justify-between align-center"
+            >
               <Typography
-                variant="h3"
+                variant="p"
+                className="flex-1"
               >
-                Current Savings Opportunity:
+                EUROs price (USD):
               </Typography>
-              <div
-                className="flex justify-between align-center"
-              >
-                <Typography
-                  variant="p"
-                  className="flex-1"
-                >
-                  EUR FX market price (USD):
-                </Typography>
-                <Typography
-                  variant="p"
-                  className="flex-1"
-                >
-                  ${chainPrice}
-                </Typography>
-              </div>
-
-              <div
-                className="flex justify-between align-center"
-              >
-                <Typography
-                  variant="p"
-                  className="flex-1"
-                >
-                  EUROs price (USD):
-                </Typography>
-                <Typography
-                  variant="p"
-                  className="flex-1"
-                >
-                  ${poolPrice}
-                </Typography>
-              </div>
-
-              <div
-                className="flex justify-between align-center"
+              <Typography
+                variant="p"
+                className="flex-1"
               >
-                <Typography
-                  variant="p"
-                  className="flex-1"
-                >
-                  Current discount %:
-                </Typography>
-                <Typography
-                  variant="p"
-                  className="flex-1"
-                >
-                  {showDiscount.toFixed(2)}%
-                </Typography>
-              </div>
-
+                ${poolPrice}
+              </Typography>
             </div>
-
-            <div>
+
+            <div
+              className="flex justify-between align-center"
+            >
+              <Typography
+                variant="p"
+                className="flex-1"
+              >
+                Current discount %:
+              </Typography>
               <Typography
-                variant="h3"
+                variant="p"
+                className="flex-1"
               >
-                Act Now: Save {showDiscount.toFixed(2)}% on Repayment
+                {showDiscount.toFixed(2)}%
               </Typography>
             </div>
+
+          </div>
+
+          <div>
+            <Typography
+              variant="h3"
+            >
+              Act Now: Save {showDiscount.toFixed(2)}% on Repayment
+            </Typography>
           </div>
         </div>
       </div>
-    );  
-  }
-  return (
-    <></>
-  );
+    </div>
+  );  
 };
 
 export default EurosCompare;