From ce5345b588bd4cb67a492f154eb819c3671800e1 Mon Sep 17 00:00:00 2001
From: Tyler Shipe <tjshipe@gmail.com>
Date: Thu, 18 Nov 2021 17:46:53 +0000
Subject: [PATCH] add liq mining info to stats

---
 components/stats_page/StatsPerps.tsx | 66 +++++++++++++++++++++++++++-
 1 file changed, 65 insertions(+), 1 deletion(-)

diff --git a/components/stats_page/StatsPerps.tsx b/components/stats_page/StatsPerps.tsx
index d3cb4b6f..404877a1 100644
--- a/components/stats_page/StatsPerps.tsx
+++ b/components/stats_page/StatsPerps.tsx
@@ -81,6 +81,15 @@ export default function StatsPerps({ perpStats }) {
     perpsData.splice(index, 1)
   }
 
+  const progress =
+    1 -
+    selectedMarket.liquidityMiningInfo.mngoLeft.toNumber() /
+      selectedMarket.liquidityMiningInfo.mngoPerPeriod.toNumber()
+  const start = selectedMarket.liquidityMiningInfo.periodStart.toNumber()
+  const now = Date.now() / 1000
+  const elapsed = now - start
+  const est = start + elapsed / progress
+
   return (
     <>
       <div className="flex items-center justify-between mb-4 w-full">
@@ -132,7 +141,7 @@ export default function StatsPerps({ perpStats }) {
           ))}
         </div>
       </div>
-      <div className="grid grid-flow-col grid-cols-1 grid-rows-2 md:grid-cols-2 md:grid-rows-1 gap-2 sm:gap-4">
+      <div className="grid grid-flow-row grid-cols-1 grid-rows-2 md:grid-cols-2 md:grid-rows-2 gap-2 sm:gap-4">
         <div
           className="border border-th-bkg-4 relative p-4 rounded-md"
           style={{ height: '330px' }}
@@ -168,6 +177,61 @@ export default function StatsPerps({ perpStats }) {
             type="area"
           />
         </div>
+        <div className="border border-th-bkg-4 relative p-4 rounded-md">
+          <div className="text-lg">Liquidity Mining</div>
+          <div className="flex justify-between mt-4">
+            <div>Rate</div>
+            <div>
+              {(
+                selectedMarket.liquidityMiningInfo.rate.toNumber() * 100
+              ).toFixed(2)}
+              %
+            </div>
+          </div>
+          <div className="flex justify-between mt-4">
+            <div>Max Depth Bps</div>
+            <div>
+              {selectedMarket.liquidityMiningInfo.maxDepthBps.toString()}
+            </div>
+          </div>
+          <div className="flex justify-between mt-4">
+            <div>Target Period Length</div>
+            <div>
+              {(
+                selectedMarket.liquidityMiningInfo.targetPeriodLength.toNumber() /
+                60
+              ).toFixed()}{' '}
+              mins
+            </div>
+          </div>
+          <div className="flex justify-between mt-4">
+            <div>MNGO Per Period</div>
+            <div>
+              {(
+                selectedMarket.liquidityMiningInfo.mngoPerPeriod.toNumber() /
+                Math.pow(10, 6)
+              ).toFixed(2)}
+            </div>
+          </div>
+          <div className="flex justify-between mt-4">
+            <div>MNGO Left In Period</div>
+            <div>
+              {(
+                selectedMarket.liquidityMiningInfo.mngoLeft.toNumber() /
+                Math.pow(10, 6)
+              ).toFixed(2)}
+            </div>
+          </div>
+
+          <div className="flex justify-between mt-4">
+            <div>Est Period End</div>
+            <div>{new Date(est * 1000).toUTCString()}</div>
+          </div>
+          <div className="flex justify-between mt-4">
+            <div>Period Progress</div>
+            <div>{(progress * 100).toFixed(2)}%</div>
+          </div>
+        </div>
       </div>
     </>
   )