Power tooltips

darwinia-network · Nov 28, 2023 · 5bbd2a2 · 5bbd2a2
1 parent 3da6b2b
commit 5bbd2a2
Showing 1 changed file with 30 additions and 1 deletion.
diff --git a/src/components/collator-select-modal.tsx b/src/components/collator-select-modal.tsx
@@ -9,6 +9,7 @@ import { commissionWeightedPower, prettyNumber } from "@/utils";
 import { notification } from "./notification";
 import DisplayAccountName from "./display-account-name";
 import { useStaking } from "@/hooks";
+import Tooltip from "./tooltip";
 
 type TabKey = "active" | "waiting";
 
@@ -59,7 +60,35 @@ const columns: ColumnType<DataSource>[] = [
     title: (
       <div className="inline-flex flex-col text-xs font-bold text-white">
         <span>Total-staked</span>
-        <span>(Power)</span>
+        <div className="inline-flex items-center gap-small">
+          <span>(Power)</span>
+          <Tooltip
+            content={
+              <div className="inline-block text-xs font-light text-white">
+                {`The Collator's total-staked power is a dynamic value, inversely proportional to the commission set by
+                the Collator. Higher commission results in lower total-staked power and vice versa. `}
+                <a
+                  rel="noopener noreferrer"
+                  target="_blank"
+                  className="text-primary hover:underline"
+                  href="https://github.com/darwinia-network/DIPs/blob/main/DIPs/dip-1.md"
+                >
+                  Learn More
+                </a>
+              </div>
+            }
+            enabledSafePolygon
+            contentClassName="w-80"
+          >
+            <Image
+              width={15}
+              height={14}
+              alt="Info"
+              src="/images/help.svg"
+              className="opacity-60 transition-opacity hover:opacity-100"
+            />
+          </Tooltip>
+        </div>
       </div>
     ),
     render: (row) => <span>{prettyNumber(commissionWeightedPower(row.power, row.commission))}</span>,