Mint color

src/components/Tokenomics/Groups.tsx

@@ -1,18 +1,11 @@
-import { Table } from "react-bootstrap";
+import { Button, Table } from "react-bootstrap";
 import { Link } from "react-router-dom";
 import Loading from "../Loading";
 
 const mintTags = [``, ``, `Storage`, `Content`, `Operations`];
 const mJoy = (joy: number) => (joy ? (joy / 1000000).toFixed(3) : ``);
-const formatMint = (mint: { capacity: number; total_minted: number }) => {
-  if (!mint) return `loading ..`;
-  const { capacity, total_minted } = mint;
-  const current = (capacity / 1000000).toFixed(1);
-  const total = (total_minted / 1000000).toFixed(1);
-  return `${current} M of ${total} M tJOY`;
-};
 
-const Mints = (props: { mints: number[] }) => {
+const Groups = (props: { workers: {}; mints: number[] }) => {
   const { mints, workers } = props;
   if (!mints?.length) return <div />;
   return (
@@ -52,10 +45,8 @@ const Group = (props: { workers: any[]; mint: {}; tag: string }) => {
 
   return (
     <div className=" p-3 col-lg-4">
-      <h3 className="m-3 text-center">{tag}</h3>
-      <div className="text-center">
-        <b>Mint:</b> {formatMint(mint)}
-      </div>
+      <h2 className="m-3 text-center">{tag}</h2>
+      <Mint mint={mint} />
       <Table>
         <thead>
           <tr>
@@ -93,4 +84,31 @@ const Group = (props: { workers: any[]; mint: {}; tag: string }) => {
   );
 };
 
-export default Mints;
+const Mint = (props: { mint: { capacity: number; total_minted: number } }) => {
+  const { mint } = props;
+  if (!mint) return <div />;
+  const { capacity, total_minted } = mint;
+  const current = (capacity / 1000000).toFixed(1);
+  const total = (total_minted / 1000000).toFixed(1);
+  const color = current < 1 ? `danger` : current < 2 ? `warning` : `success`;
+  return (
+    <div className="mx-5 m-3 d-flex flex-column">
+      <div className="d-flex flex-row justify-content-between">
+        <div>
+          <b>Mint Capacity:</b>
+        </div>
+        <Button className="p-1" variant={color}>
+          {current} M
+        </Button>
+      </div>
+      <div className="d-flex flex-row justify-content-between">
+        <div>
+          <b>Total Minted:</b>
+        </div>
+        <div>{total} M tJOY</div>
+      </div>
+    </div>
+  );
+};
+
+export default Groups;

src/components/Tokenomics/index.tsx

@@ -28,8 +28,8 @@ const TokenStats = (props: IProps) => {
     <Paper className="d-flex flex-column flex-grow-1 p-2 px-3 m-auto">
       <h1 className="m-3 text-center">Tokenomics</h1>
       <Overview groups={groups} tokenomics={tokenomics} />
-      <Groups mints={mints} workers={workers} />
       <Spending groups={groups} price={tokenomics.price} />
+      <Groups mints={mints} workers={workers} />
       <Burns
         exchanges={exchanges}
         extecutedBurnsAmount={extecutedBurnsAmount}