Merge pull request #24 from gnosis/total-locked-breakdown

Total locked breakdown and fix staked GNO query
gnosis · Feb 2, 2022 · 6bffdb9 · 6bffdb9
2 parents 202342b + 1bb2498
commit 6bffdb9
Show file tree

Hide file tree

Showing 13 changed files with 143 additions and 79 deletions.
diff --git a/packages/app/components/Balance.tsx b/packages/app/components/Balance.tsx
@@ -15,7 +15,7 @@ import PercentOfTotalHint from "./PercentOfTotalHint"
 const CIRCLE_RADIUS = 26
 const CIRCUMFERENCE = CIRCLE_RADIUS * 2 * Math.PI
 
-export const formatToken = (bigNumber: BigNumber, decimals: number) =>
+const formatToken = (bigNumber: BigNumber, decimals: number) =>
   new Intl.NumberFormat("en-US", {
     maximumSignificantDigits: 6,
   }).format(parseFloat(formatUnits(bigNumber, decimals)))

diff --git a/packages/app/components/PercentOfTotal.module.css b/packages/app/components/PercentOfTotal.module.css
@@ -27,25 +27,3 @@
 .infoBubble:hover .dropdown {
   display: block;
 }
-
-.breakdown > div {
-  display: flex;
-  justify-content: space-between;
-  margin-bottom: 0.5rem;
-}
-.breakdown dd {
-  color: #5D6D74;
-  font-weight: bold;
-  margin-left: 2.5rem;
-}
-.breakdown dt {
-  font-size: 12px;
-}
-
-.total {
-  border-top: 1px solid #e8e7e6;
-  padding-top: 8px;
-}
-.total dd {
-  color: #001428;
-}
diff --git a/packages/app/components/PercentOfTotalHint.tsx b/packages/app/components/PercentOfTotalHint.tsx
@@ -1,5 +1,5 @@
 import { BigNumber } from "ethers"
-import { formatUnits } from "ethers/lib/utils"
+import { formatToken } from "./stats/formatToken"
 import cls from "./PercentOfTotal.module.css"
 import useTokenLockConfig from "./useTokenLockConfig"
 import useTotalLocked from "./useTotalLocked"
@@ -8,16 +8,15 @@ const SUPPLY_OF_COW = 50000000
 
 const formatAmount = (amount: number) =>
   new Intl.NumberFormat("en-US", {
-    maximumSignificantDigits: 4,
+    maximumSignificantDigits: 6,
   }).format(amount)
 
 const PercentOfTotalHint: React.FC<{ balance?: BigNumber }> = ({ balance }) => {
-  const config = useTokenLockConfig()
-  const [totalLocked, breakdown] = useTotalLocked()
+  const [totalLocked] = useTotalLocked()
 
   const percent =
     balance && totalLocked && totalLocked.gt(0)
-      ? balance.mul(100).mul(1e2).div(totalLocked).toNumber() / 1e2 // precision to 2 decimal places
+      ? balance.mul(100).mul(1e4).div(totalLocked).toNumber() / 1e4 // precision to 4 decimal places
       : 0
 
   if (percent === 0) return null
@@ -37,40 +36,8 @@ const PercentOfTotalHint: React.FC<{ balance?: BigNumber }> = ({ balance }) => {
           </p>
           <p>
             A total of 50M $COW are distributed to people committing to hold
-            their GNO long-term. The following balances are taken into account:
+            their GNO long-term.
           </p>
-          <dl className={cls.breakdown}>
-            <div>
-              <dt>GNO locked on Mainnet:</dt>
-              <dd>
-                {breakdown.mainnet
-                  ? formatUnits(breakdown.mainnet, config.decimals)
-                  : "…"}
-              </dd>
-            </div>
-            <div>
-              <dt>GNO locked on Gnosis Chain:</dt>
-              <dd>
-                {breakdown.gnosisChain
-                  ? formatUnits(breakdown.gnosisChain, config.decimals)
-                  : "…"}
-              </dd>
-            </div>
-            <div>
-              <dt>GNO staked by Gnosis Beacon Chain validators:</dt>
-              <dd>
-                {breakdown.staked
-                  ? formatUnits(breakdown.staked, config.decimals)
-                  : "…"}
-              </dd>
-            </div>
-            <div className={cls.total}>
-              <dt>Total locked GNO:</dt>
-              <dd>
-                {totalLocked ? formatUnits(totalLocked, config.decimals) : "…"}
-              </dd>
-            </div>
-          </dl>
         </div>
       </div>
     </div>

diff --git a/packages/app/components/stats/Stats.module.css b/packages/app/components/stats/Stats.module.css
@@ -14,14 +14,19 @@
   width: 100%;
 }
 
-.item dd {
-  margin: 0;
-  font-size: 1.5em;
-  font-weight: 700;
+.item > dt {
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
-
-.item dt {
+.label {
   color: #5d6d74;
   font-size: 0.75em;
   font-weight: 700;
 }
+
+.item > dd {
+  margin: 0;
+  font-size: 1.5em;
+  font-weight: 700;
+}
diff --git a/packages/app/components/stats/StatsDeposit.tsx b/packages/app/components/stats/StatsDeposit.tsx
@@ -10,15 +10,15 @@ const StatsDeposit: React.FC = () => {
     <Card>
       <dl className={cls.container}>
         <div className={cls.item}>
-          <dt>Lock Deadline</dt>
+          <dt className={cls.label}>Lock Deadline</dt>
           <dd>
             {new Intl.DateTimeFormat("default", { dateStyle: "medium" }).format(
               config.depositDeadline
             )}
           </dd>
         </div>
         <div className={cls.item}>
-          <dt>Lock Duration</dt>
+          <dt className={cls.label}>Lock Duration</dt>
           <dd>{formatDuration(config.lockDuration)}</dd>
         </div>
 

diff --git a/packages/app/components/stats/StatsLocked.tsx b/packages/app/components/stats/StatsLocked.tsx
@@ -17,15 +17,15 @@ const StatsLocked: React.FC = () => {
     <Card>
       <dl className={cls.container}>
         <div className={cls.item}>
-          <dt>Unlock Date</dt>
+          <dt className={cls.label}>Unlock Date</dt>
           <dd>
             {new Intl.DateTimeFormat("default", { dateStyle: "medium" }).format(
               new Date(config.depositDeadline.getTime() + config.lockDuration)
             )}
           </dd>
         </div>
         <div className={cls.item}>
-          <dt>Time remaining</dt>
+          <dt className={cls.label}>Time remaining</dt>
           <dd>
             {hoursRemaining <= 48
               ? pluralize(hoursRemaining, "Hour")

diff --git a/packages/app/components/stats/StatsWithdraw.tsx b/packages/app/components/stats/StatsWithdraw.tsx
@@ -8,7 +8,7 @@ const StatsWithdraw: React.FC = () => (
   <Card>
     <dl className={cls.container}>
       <div className={clsx(cls.item, cls.fullWidth, utility.mt8)}>
-        <dt>Unlock Date</dt>
+        <dt className={cls.label}>Unlock Date</dt>
         <dd>Lock Period Over 🎉</dd>
       </div>
 

diff --git a/packages/app/components/stats/TotalLockedBreakdown.module.css b/packages/app/components/stats/TotalLockedBreakdown.module.css
@@ -0,0 +1,50 @@
+.infoBubble {
+  text-align: left;
+  position: relative;
+  margin-left: 4px;
+  margin-top: -5px;
+}
+.infoBubble img {
+  width: 16px;
+  height: 16px;
+  cursor: help;
+  display: block;
+}
+
+.dropdown {
+  background: #ffffff;
+  border-radius: 0.5rem;
+  box-shadow: 1px 2px 10px rgba(40, 54, 61, 0.18);
+  padding: 0.5rem 1rem;
+  position: absolute;
+  right: 0;
+  top: calc(100% + 4px);
+  width: 360px;
+  display: none;
+  z-index: 99;
+}
+.infoBubble:hover .dropdown {
+  display: block;
+}
+
+.breakdown > div {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 0.5rem;
+}
+.breakdown dd {
+  color: #5d6d74;
+  font-weight: bold;
+  margin-left: 2.5rem;
+}
+.breakdown dt {
+  font-size: 12px;
+}
+
+.total {
+  border-top: 1px solid #e8e7e6;
+  padding-top: 8px;
+}
+.total dd {
+  color: #001428;
+}
diff --git a/packages/app/components/stats/TotalLockedBreakdown.tsx b/packages/app/components/stats/TotalLockedBreakdown.tsx
@@ -0,0 +1,52 @@
+import { BigNumber } from "ethers"
+import cls from "./TotalLockedBreakdown.module.css"
+import useTokenLockConfig from "../useTokenLockConfig"
+import useTotalLocked from "../useTotalLocked"
+import { formatToken } from "./formatToken"
+
+const TotalLockedBreakdown: React.FC<{ balance?: BigNumber }> = () => {
+  const config = useTokenLockConfig()
+  const [totalLocked, breakdown] = useTotalLocked()
+
+  return (
+    <div className={cls.infoBubble}>
+      <img src="/info.svg" alt="Show details" title="Show details" />
+      <div className={cls.dropdown}>
+        <dl className={cls.breakdown}>
+          <div>
+            <dt>GNO locked on Mainnet:</dt>
+            <dd>
+              {breakdown.mainnet
+                ? formatToken(breakdown.mainnet, config.decimals)
+                : "…"}
+            </dd>
+          </div>
+          <div>
+            <dt>GNO locked on Gnosis Chain:</dt>
+            <dd>
+              {breakdown.gnosisChain
+                ? formatToken(breakdown.gnosisChain, config.decimals)
+                : "…"}
+            </dd>
+          </div>
+          <div>
+            <dt>GNO staked by Gnosis Beacon Chain validators:</dt>
+            <dd>
+              {breakdown.staked
+                ? formatToken(breakdown.staked, config.decimals)
+                : "…"}
+            </dd>
+          </div>
+          <div className={cls.total}>
+            <dt>Total locked GNO:</dt>
+            <dd>
+              {totalLocked ? formatToken(totalLocked, config.decimals) : "…"}
+            </dd>
+          </div>
+        </dl>
+      </div>
+    </div>
+  )
+}
+
+export default TotalLockedBreakdown
diff --git a/packages/app/components/stats/TotalLockedStat.tsx b/packages/app/components/stats/TotalLockedStat.tsx
@@ -1,17 +1,19 @@
-import { BigNumber } from "ethers"
-import { formatToken } from "../Balance"
+import { formatToken } from "./formatToken"
 import cls from "./Stats.module.css"
 import useTokenLockConfig from "../useTokenLockConfig"
-import { useTokenLockContractRead } from "../tokenLockContract"
 import useTotalLocked from "../useTotalLocked"
+import TotalLockedBreakdown from "./TotalLockedBreakdown"
 
 const TotalLockedStat: React.FC = () => {
   const config = useTokenLockConfig()
   const [totalLocked] = useTotalLocked()
 
   return (
     <div className={`${cls.item} ${cls.fullWidth}`}>
-      <dt>Total GNO Locked</dt>
+      <dt>
+        <div className={cls.label}>Total GNO Locked</div>
+        <TotalLockedBreakdown />
+      </dt>
       <dd>{totalLocked ? formatToken(totalLocked, config.decimals) : "…"}</dd>
     </div>
   )

diff --git a/packages/app/components/stats/formatToken.ts b/packages/app/components/stats/formatToken.ts
@@ -0,0 +1,7 @@
+import { BigNumber } from "ethers"
+import { formatUnits } from "ethers/lib/utils"
+
+export const formatToken = (bigNumber: BigNumber, decimals: number) =>
+  new Intl.NumberFormat("en-US", {
+    maximumFractionDigits: 0,
+  }).format(parseFloat(formatUnits(bigNumber, decimals)))
diff --git a/packages/app/components/useTotalLocked.ts b/packages/app/components/useTotalLocked.ts
@@ -19,7 +19,7 @@ const gnosisChainProvider = new providers.StaticJsonRpcProvider(
 
 const GNO_ON_MAINNET = "0x6810e776880c02933d47db1b9fc05908e5386b96"
 const GNO_ON_GNOSIS_CHAIN = "0x9C58BAcC331c9aa871AFD802DB6379a98e80CEdb"
-const MGNO_ON_GNOSIS_CHAIN = "0x722fc4DAABFEaff81b97894fC623f91814a1BF68"
+const GNO_TO_MGNO = "0x647507A70Ff598F386CB96ae5046486389368C66"
 
 const useTotalLocked = (): [BigNumber | undefined, Breakdown] => {
   const [{ data: gnoLockedOnMainnetData }] = useContractRead(
@@ -56,7 +56,7 @@ const useTotalLocked = (): [BigNumber | undefined, Breakdown] => {
     },
     "balanceOf",
     {
-      args: MGNO_ON_GNOSIS_CHAIN,
+      args: GNO_TO_MGNO,
       watch: true,
     }
   )

diff --git a/packages/app/config.ts b/packages/app/config.ts
@@ -5,7 +5,10 @@ export const LOCKED_TOKEN_SYMBOL = "GNO"
 export const CLAIM_TOKEN_NAME = "Locked Gnosis"
 export const CLAIM_TOKEN_SYMBOL = "LGNO"
 
-export const INFURA_ID = "a63b6fb491fa4ad3827b824218e5aa68"
+export const INFURA_ID =
+  process.env.NODE_ENV === "development"
+    ? "2d043e79a14e4145b4e07dd3eb3a5a4b"
+    : "a63b6fb491fa4ad3827b824218e5aa68"
 
 const addInfuraProjectId = (chain: Chain) => ({
   ...chain,