From 783e1c1b4829b865d43e4580d7bbd50cb53df968 Mon Sep 17 00:00:00 2001
From: vkulinich <viacheslav.kulinich@cleevio.com>
Date: Mon, 23 Dec 2024 14:25:22 +0100
Subject: [PATCH] add support label

---
 src/components/InfoTooltip/InfoTooltip.tsx  |  4 ++-
 src/components/ReferendumCard/Referenda.tsx | 30 +++++++++++++--------
 src/i18n/locales/en/translations.json       |  1 +
 3 files changed, 23 insertions(+), 12 deletions(-)

diff --git a/src/components/InfoTooltip/InfoTooltip.tsx b/src/components/InfoTooltip/InfoTooltip.tsx
index 3eff52a79..3e8041208 100644
--- a/src/components/InfoTooltip/InfoTooltip.tsx
+++ b/src/components/InfoTooltip/InfoTooltip.tsx
@@ -9,6 +9,7 @@ type InfoTooltipProps = {
   children?: ReactNode
   type?: "default" | "black"
   side?: Tooltip.TooltipContentProps["side"]
+  align?: Tooltip.TooltipContentProps["align"]
   asChild?: boolean
   preventDefault?: boolean
 }
@@ -18,6 +19,7 @@ export function InfoTooltip({
   children,
   type = "default",
   side = "bottom",
+  align = "start",
   asChild = false,
   preventDefault,
 }: InfoTooltipProps) {
@@ -49,7 +51,7 @@ export function InfoTooltip({
         <SContent
           type={type}
           side={side}
-          align="start"
+          align={align}
           sideOffset={3}
           alignOffset={-10}
           collisionPadding={12}
diff --git a/src/components/ReferendumCard/Referenda.tsx b/src/components/ReferendumCard/Referenda.tsx
index 9136e2ce9..3b48feb20 100644
--- a/src/components/ReferendumCard/Referenda.tsx
+++ b/src/components/ReferendumCard/Referenda.tsx
@@ -25,6 +25,7 @@ import {
   useSupportThreshold,
 } from "./Referenda.utils"
 import Skeleton from "react-loading-skeleton"
+import { InfoTooltip } from "components/InfoTooltip/InfoTooltip"
 
 export const OpenGovReferenda = ({
   id,
@@ -168,17 +169,24 @@ export const OpenGovReferenda = ({
 
         <Spacer size={16} />
         <div sx={{ flex: "column", gap: 8 }}>
-          <SProgressBarContainer>
-            <div css={{ position: "relative" }}>
-              <LinearProgress
-                size="small"
-                withoutLabel
-                percent={barPercentage}
-                colorCustom="#B3D7FA"
-              />
-              <SThresholdLine percentage={markPercentage.toString()} />
-            </div>
-          </SProgressBarContainer>
+          <InfoTooltip
+            text={t("referenda.support", {
+              value: t("value.percentage", { value: barPercentage }),
+            })}
+            align="center"
+          >
+            <SProgressBarContainer>
+              <div css={{ position: "relative" }}>
+                <LinearProgress
+                  size="small"
+                  withoutLabel
+                  percent={barPercentage}
+                  colorCustom="#B3D7FA"
+                />
+                <SThresholdLine percentage={markPercentage.toString()} />
+              </div>
+            </SProgressBarContainer>
+          </InfoTooltip>
           <div sx={{ flex: "row", justify: "space-between" }}>
             <div sx={{ flex: "row", gap: 2 }}>
               <Text fs={11} css={{ color: "#DFB1F3" }}>
diff --git a/src/i18n/locales/en/translations.json b/src/i18n/locales/en/translations.json
index 11802c5d2..211c43e8d 100644
--- a/src/i18n/locales/en/translations.json
+++ b/src/i18n/locales/en/translations.json
@@ -1244,6 +1244,7 @@
   "claimingRange.modal.description1": "After joining a farm, a portion of the accumulated rewards is locked. These rewards unlock over time as you remain in the farm and follow loyalty factor curve",
   "claimingRange.modal.description2": "Claiming forfeits the locked part of the rewards. Use this setting to tweak your preference over claiming faster or losing less rewards (default). This allows you to compound your rewards with ease.",
   "referenda.ongoing": "Ongoing Referenda",
+  "referenda.support": "Support: {{value}}",
   "referenda.empty.title": "No Referenda",
   "referenda.empty.desc.first": "Nothing here.",
   "referenda.empty.desc.second": " Currently there are no ongoing referenda to vote in.",