Merge pull request #21 from dmccartney/daniel-rpl-price-range

feat: show RPL stake status tooltip
dmccartney · Jul 26, 2023 · 94ab24d · 94ab24d
2 parents 85ca9c1 + a31b76f
commit 94ab24d
Show file tree

Hide file tree

Showing 8 changed files with 885 additions and 50 deletions.
diff --git a/web/src/components/CurrencyValue.js b/web/src/components/CurrencyValue.js
@@ -26,10 +26,13 @@ const typeVariantBySize = {
 };
 export default function CurrencyValue({
   value = ethers.constants.Zero,
+  prefix = "",
   currency = "eth",
+  perCurrency = null,
   size = (v) => (v.gte(ethers.utils.parseUnits("1000")) ? "small" : "medium"),
   placeholder = "-.---",
-  decimalPlaces = 3,
+  maxDecimals = 4,
+  trimZeroWhole = false,
   hideCurrency = false,
   ...props
 }) {
@@ -42,7 +45,11 @@ export default function CurrencyValue({
   let valueText = placeholder;
   if (value && !value.isZero()) {
     valueText = trimValue(
-      ethers.utils.formatUnits(value.abs() || ethers.constants.Zero)
+      ethers.utils.formatUnits(value.abs() || ethers.constants.Zero),
+      {
+        maxDecimals,
+        trimZeroWhole,
+      }
     );
   }
   if (value && value.isNegative()) {
@@ -59,19 +66,48 @@ export default function CurrencyValue({
         variant={typeVariants.value}
         color={(theme) => theme.palette.text.primary}
       >
+        {prefix}
         {valueText}
       </Typography>
-      {hideCurrency ? null : (
+      {hideCurrency ? null : !perCurrency ? (
         <Typography
           component={"span"}
           variant={typeVariants.currency}
           color={(theme) =>
             theme.palette[currency] ? theme.palette[currency].main : "default"
           }
         >
-          {" "}
           {currency.toUpperCase()}
         </Typography>
+      ) : (
+        <Typography
+          component={"span"}
+          variant={typeVariants.currency}
+          color="text.secondary"
+        >
+          {" "}
+          <Typography
+            component={"span"}
+            variant={typeVariants.currency}
+            color={(theme) =>
+              theme.palette[currency] ? theme.palette[currency].main : "default"
+            }
+          >
+            {currency.toUpperCase()}
+          </Typography>
+          /
+          <Typography
+            component={"span"}
+            variant={typeVariants.currency}
+            color={(theme) =>
+              theme.palette[perCurrency]
+                ? theme.palette[perCurrency].main
+                : "default"
+            }
+          >
+            {perCurrency.toUpperCase()}
+          </Typography>
+        </Typography>
       )}
     </Stack>
   );