From e8eb25fda3e0755a9bab11216d3f7e0190c6dcb7 Mon Sep 17 00:00:00 2001
From: Ronny Haase <ronnyhaase@fastmail.com>
Date: Fri, 24 Mar 2023 18:37:47 +0100
Subject: [PATCH 1/2] Introduce Badge component

- Use at lock&mint screen
---
 packages/app/src/common/components/Badge.tsx | 23 ++++++++++++++++++++
 packages/app/src/common/components/index.ts  |  1 +
 packages/app/src/locking/LockingApp.tsx      | 21 ++++++------------
 3 files changed, 31 insertions(+), 14 deletions(-)
 create mode 100644 packages/app/src/common/components/Badge.tsx

diff --git a/packages/app/src/common/components/Badge.tsx b/packages/app/src/common/components/Badge.tsx
new file mode 100644
index 00000000..0a42a911
--- /dev/null
+++ b/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 };
diff --git a/packages/app/src/common/components/index.ts b/packages/app/src/common/components/index.ts
index 57e9aff8..7200e4a0 100644
--- a/packages/app/src/common/components/index.ts
+++ b/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";
diff --git a/packages/app/src/locking/LockingApp.tsx b/packages/app/src/locking/LockingApp.tsx
index 3afc3e69..276f8fd4 100644
--- a/packages/app/src/locking/LockingApp.tsx
+++ b/packages/app/src/locking/LockingApp.tsx
@@ -1,10 +1,8 @@
 import clx from "classnames";
 import { toSol, type Details } from "@sunrisestake/client";
 import React, {
-  type FC,
   forwardRef,
   type ForwardRefRenderFunction,
-  type PropsWithChildren,
   useEffect,
   useMemo,
   useState,
@@ -12,6 +10,7 @@ import React, {
 import { Link, useLocation, useNavigate } from "react-router-dom";
 
 import {
+  Badge,
   Button,
   LockForm,
   Panel,
@@ -55,12 +54,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>
@@ -205,14 +198,14 @@ const _LockingApp: ForwardRefRenderFunction<
             </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),
@@ -220,8 +213,8 @@ const _LockingApp: ForwardRefRenderFunction<
               )}{" "}
               gSOL
               <TooltipPopover>{tooltips.lockYield}</TooltipPopover>
-            </LockDetailTag>
-            <LockDetailTag>
+            </Badge>
+            <Badge>
               Equivalent carbon price -{" "}
               {toFixedWithPrecision(
                 solToCarbon(toSol(details.lockDetails?.yield ?? ZERO)),
@@ -229,7 +222,7 @@ const _LockingApp: ForwardRefRenderFunction<
               )}{" "}
               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 */}

From 6bbd399532da01bb4ad64adab929047e1c4efb10 Mon Sep 17 00:00:00 2001
From: Ronny Haase <ronnyhaase@fastmail.com>
Date: Fri, 24 Mar 2023 18:55:04 +0100
Subject: [PATCH 2/2] Add dummy badges for level and upgradeable

---
 packages/app/src/locking/LockingApp.tsx                 | 8 ++++++--
 packages/app/src/locking/{ => components}/ImpactNFT.tsx | 4 ++--
 2 files changed, 8 insertions(+), 4 deletions(-)
 rename packages/app/src/locking/{ => components}/ImpactNFT.tsx (87%)

diff --git a/packages/app/src/locking/LockingApp.tsx b/packages/app/src/locking/LockingApp.tsx
index 276f8fd4..91feb917 100644
--- a/packages/app/src/locking/LockingApp.tsx
+++ b/packages/app/src/locking/LockingApp.tsx
@@ -30,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";
@@ -191,7 +191,11 @@ 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">
               Your Impact NFT is proof of your stake. It grows as your stake
               matures. Return regularly to upgrade your NFT to the next level.
diff --git a/packages/app/src/locking/ImpactNFT.tsx b/packages/app/src/locking/components/ImpactNFT.tsx
similarity index 87%
rename from packages/app/src/locking/ImpactNFT.tsx
rename to packages/app/src/locking/components/ImpactNFT.tsx
index 63a824d1..56d327ee 100644
--- a/packages/app/src/locking/ImpactNFT.tsx
+++ b/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,