Lock&Mint improvements

packages/app/src/common/components/Badge.tsx

@@ -0,0 +1,23 @@
+import clx from "classnames";
+import { type ReactNode, type FC } from "react";
+
+interface Props {
+  children?: ReactNode | undefined;
+  color?: "primary" | "secondary" | "danger" | "ticket";
+}
+
+const Badge: FC<Props> = ({ children, color = "secondary" }) => {
+  const classNames = clx(
+    "inline-flex gap-1 bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2",
+    {
+      "bg-danger text-white": color === "danger",
+      "bg-green text-white": color === "primary",
+      "bg-gray-200 text-gray-700": color === "secondary",
+      "bg-ticket text-black": color === "ticket",
+    }
+  );
+
+  return <span className={classNames}>{children}</span>;
+};
+
+export { Badge };

packages/app/src/common/components/index.ts

@@ -1,4 +1,5 @@
 export * from "./AmountInput";
+export * from "./Badge";
 export * from "./Button";
 export * from "./CarbonRecovered";
 export * from "./DetailsBox";

packages/app/src/locking/LockingApp.tsx

@@ -1,17 +1,16 @@
 import clx from "classnames";
 import { toSol, type Details } from "@sunrisestake/client";
 import React, {
-  type FC,
   forwardRef,
   type ForwardRefRenderFunction,
-  type PropsWithChildren,
   useEffect,
   useMemo,
   useState,
 } from "react";
 import { Link, useLocation, useNavigate } from "react-router-dom";
 
 import {
+  Badge,
   Button,
   LockForm,
   Panel,
@@ -31,7 +30,7 @@ import {
   toFixedWithPrecision,
   ZERO,
 } from "../common/utils";
-import { ImpactNFT } from "./ImpactNFT";
+import { ImpactNFT } from "./components/ImpactNFT";
 import { IoChevronUpOutline } from "react-icons/io5";
 import { DynamicTree } from "../common/components/tree/DynamicTree";
 import { useForest } from "../common/context/forestContext";
@@ -60,12 +59,6 @@ const canBeUnlocked = (details: Details | undefined): boolean => {
   );
 };
 
-const LockDetailTag: FC<PropsWithChildren> = ({ children }) => (
-  <span className="inline-flex gap-1 bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">
-    {children}
-  </span>
-);
-
 const _LockingApp: ForwardRefRenderFunction<
   HTMLDivElement,
   { className?: string; active?: boolean } & React.HTMLAttributes<HTMLElement>
@@ -166,7 +159,7 @@ const _LockingApp: ForwardRefRenderFunction<
 
   const lockText = hasLockedBalance(details)
     ? "Your Impact NFT is proof of your stake. It grows as your stake matures. Return regularly to upgrade your NFT to the next level."
-    : "Your Impact NFT is proof of your stake. It grows as your stake matures. Re-lock your gSOL to grow it to the next level.";
+    : "Your Impact NFT is proof of your stake. It grows as your stake matures. Lock your gSOL to grow it to the next level.";
 
   return (
     <div
@@ -207,35 +200,39 @@ const _LockingApp: ForwardRefRenderFunction<
         <div className="max-w-sm rounded shadow-lg">
           <ImpactNFT details={details.impactNFTDetails} />
           <div className="px-6 py-4">
-            <div className="font-bold text-xl mb-2">Your Impact NFT</div>
+            <div className="text-right">
+              <Badge color="primary">Level: ?</Badge>
+              <Badge color="ticket">Upgradeable?</Badge>
+            </div>
+            <div className="mb-2 font-bold text-xl">Your Impact NFT</div>
             <p className="text-gray-700 text-base">{lockText}</p>
           </div>
           <div className="px-6 pt-4 pb-2">
-            <LockDetailTag>
+            <Badge>
               Locked -{" "}
               {toFixedWithPrecision(
                 toSol(details.lockDetails?.amountLocked ?? ZERO)
               )}{" "}
               gSOL <TooltipPopover>{tooltips.lockCarbon}</TooltipPopover>
-            </LockDetailTag>
-            <LockDetailTag>
+            </Badge>
+            <Badge>
               Yield accrued -{" "}
               {toFixedWithPrecision(
                 toSol(details.lockDetails?.yield ?? ZERO),
                 3
               )}{" "}
               gSOL
               <TooltipPopover>{tooltips.lockYield}</TooltipPopover>
-            </LockDetailTag>
-            <LockDetailTag>
+            </Badge>
+            <Badge>
               Equivalent carbon price -{" "}
               {toFixedWithPrecision(
                 solToCarbon(toSol(details.lockDetails?.yield ?? ZERO)),
                 3
               )}{" "}
               tCO₂E
               <TooltipPopover>{tooltips.lockCarbon}</TooltipPopover>
-            </LockDetailTag>
+            </Badge>
             {/* <span className="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2"> */}
             {/*  Next level at -{" "} */}
             {/*  TODO */}

packages/app/src/locking/ImpactNFT.tsx → packages/app/src/locking/components/ImpactNFT.tsx

@@ -1,7 +1,7 @@
 import { type FC } from "react";
 import { type Details } from "@sunrisestake/client";
-import { useNFT } from "./hooks/useNFT";
-import { Spinner } from "../common/components";
+import { useNFT } from "../hooks/useNFT";
+import { Spinner } from "../../common/components";
 
 export const ImpactNFT: FC<{ details: Details["impactNFTDetails"] }> = ({
   details,