Permission & Flag hover info

Added hover info for asset permissions, flags and extensions to explain their functionality to the user. Permanently disable any permissions which have already been disabled when editing an UIA.
BTS-CM · Sep 16, 2024 · affc80a · affc80a
1 parent 9f6462d
commit affc80a
Show file tree

Hide file tree

Showing 38 changed files with 2,683 additions and 1,646 deletions.
diff --git a/src/components/CreatePrediction.jsx b/src/components/CreatePrediction.jsx
diff --git a/src/components/UIA.jsx b/src/components/UIA.jsx
diff --git a/src/components/common/AssetFlag.tsx b/src/components/common/AssetFlag.tsx
@@ -1,11 +1,18 @@
+import { useTranslation } from "react-i18next";
+import { i18n as i18nInstance, locale } from "@/lib/i18n.js";
+import { InfoCircledIcon } from "@radix-ui/react-icons"
+
 import { Checkbox } from "@/components/ui/checkbox";
 import { Label } from "@/components/ui/label";
+import { HoverCard, HoverCardContent, HoverCardTrigger } from "@/components/ui/hover-card";
 
 interface Props {
   alreadyDisabled: boolean;
   id: string;
   allowedText: string;
+  enabledInfo: string;
   disabledText: string;
+  disabledInfo: string;
   permission: boolean;
   flag: boolean;
   setFlag: (flag: boolean) => void;
@@ -15,37 +22,68 @@ export default function AssetFlag({
   alreadyDisabled,
   id,
   allowedText,
+  enabledInfo,
   disabledText,
+  disabledInfo,
   permission,
   flag,
   setFlag,
 }: Props) {
+  const { t, i18n } = useTranslation(locale.get(), { i18n: i18nInstance });
   const disabledClass = alreadyDisabled || !permission ? "disabled-checkbox" : "";
 
   if (alreadyDisabled || !permission) {
     return (
-      <div key={`div_${id}`}>
-        <Checkbox checked={false} id={id} className="align-middle mr-2" disabled />
-        <Label htmlFor={id}>{disabledText}</Label>
-        <br />
-      </div>
+      <HoverCard>
+        <HoverCardTrigger>
+          <span className="grid grid-cols-12">
+            <span>
+              <Checkbox checked={false} id={id} className="align-middle mr-2" disabled />
+            </span>
+            <span className="col-span-10">
+              <Label htmlFor={id}>
+                {permission || disabledText}
+              </Label>
+            </span>        
+            <InfoCircledIcon className="text-gray-400 mt-3"/>
+          </span>
+        </HoverCardTrigger>
+        <HoverCardContent className={"w-80 mt-1"} align="start">
+          <h4 className="scroll-m-20 text-md font-semibold tracking-tight">{t("Predictions:about")}: {id}</h4>
+          <p className="leading-6 text-sm [&:not(:first-child)]:mt-1">{disabledInfo}</p>
+        </HoverCardContent>
+      </HoverCard>
     );
   }
 
   return (
-    <div key={`div_${id}`}>
-      <Checkbox
-        onClick={(e) => {
-          const target = e.target as Element;
-          const isChecked = target.getAttribute("aria-checked") === "true";
-          setFlag(!isChecked);
-        }}
-        id={id}
-        className={`align-middle mr-2 ${disabledClass}`}
-        checked={flag}
-      />
-      <Label htmlFor={id}>{flag ? allowedText : disabledText}</Label>
-      <br />
-    </div>
+    <HoverCard>
+      <HoverCardTrigger>
+        <span className="grid grid-cols-12">
+            <span>
+              <Checkbox
+                onClick={(e) => {
+                  const target = e.target as Element;
+                  const isChecked = target.getAttribute("aria-checked") === "true";
+                  setFlag(!isChecked);
+                }}
+                id={id}
+                className={`align-middle mr-2 ${disabledClass}`}
+                checked={flag}
+              />
+              </span>
+              <span className="col-span-10">
+                <Label htmlFor={id}>
+                  {flag ? allowedText : disabledText}
+                </Label>
+              </span>
+              <InfoCircledIcon className="text-gray-400 mt-3"/>
+            </span>
+      </HoverCardTrigger>
+      <HoverCardContent className={"w-80 mt-1"} align="start">
+        <h4 className="scroll-m-20 text-md font-semibold tracking-tight">{t("Predictions:about")}: {id}</h4>
+        <p className="leading-6 text-sm [&:not(:first-child)]:mt-1">{flag ? enabledInfo : disabledInfo}</p>
+      </HoverCardContent>
+    </HoverCard>
   );
 }
diff --git a/src/components/common/AssetPermission.tsx b/src/components/common/AssetPermission.tsx
@@ -1,11 +1,18 @@
+import { useTranslation } from "react-i18next";
+import { i18n as i18nInstance, locale } from "@/lib/i18n.js";
+import { InfoCircledIcon } from "@radix-ui/react-icons"
+
 import { Checkbox } from "@/components/ui/checkbox";
 import { Label } from "@/components/ui/label";
+import { HoverCard, HoverCardContent, HoverCardTrigger } from "@/components/ui/hover-card";
 
 interface Props {
   alreadyDisabled: boolean;
   id: string;
   allowedText: string;
+  enabledInfo: string;
   disabledText: string;
+  disabledInfo: string;
   permission: boolean;
   setPermission: (permission: boolean) => void;
   flag: boolean;
@@ -16,43 +23,72 @@ export default function AssetPermission({
   alreadyDisabled,
   id,
   allowedText,
+  enabledInfo,
   disabledText,
+  disabledInfo,
   permission,
   setPermission,
   flag,
   setFlag,
 }: Props) {
-  const lbl = (
-    <Label htmlFor={id}>{permission || alreadyDisabled ? allowedText : disabledText}</Label>
-  );
+  const { t, i18n } = useTranslation(locale.get(), { i18n: i18nInstance });
 
   if (alreadyDisabled) {
     return (
-      <>
-        <Checkbox checked={false} id={id} className="align-middle mr-2" disabled />
-        {lbl}
-        <br />
-      </>
+      <HoverCard>
+        <HoverCardTrigger>
+          <span className="grid grid-cols-12">
+            <span>
+              <Checkbox checked={false} id={id} className="align-middle mr-2" disabled />
+            </span>
+            <span className="col-span-10">
+              <Label htmlFor={id}>
+                {permission || disabledText}
+              </Label>
+            </span>        
+            <InfoCircledIcon className="text-gray-400 mt-3"/>
+          </span>
+        </HoverCardTrigger>
+        <HoverCardContent className={"w-80 mt-1"} align="start">
+          <h4 className="scroll-m-20 text-md font-semibold tracking-tight">{t("Predictions:about")}: {id}</h4>
+          <p className="leading-6 text-sm [&:not(:first-child)]:mt-1">{disabledInfo}</p>
+        </HoverCardContent>
+      </HoverCard>
     );
   }
 
   return (
-    <>
-      <Checkbox
-        onClick={(e) => {
-          const target = e.target as Element;
-          const isChecked = target.getAttribute("aria-checked") === "true";
-          setPermission(!isChecked);
-          if (!isChecked && flag) {
-            setFlag(false);
-          }
-        }}
-        id={id}
-        className="align-middle mr-2"
-        checked={permission}
-      />
-      {lbl}
-      <br />
-    </>
+    <HoverCard>
+      <HoverCardTrigger>
+        <span className="grid grid-cols-12">
+            <span>
+              <Checkbox
+                onClick={(e) => {
+                  const target = e.target as Element;
+                  const isChecked = target.getAttribute("aria-checked") === "true";
+                  setPermission(!isChecked);
+                  if (!isChecked && flag) {
+                    setFlag(false);
+                  }
+                }}
+                id={id}
+                className="align-middle mr-2"
+                checked={permission}
+              />
+          </span>
+          <span className="col-span-10">
+            <Label htmlFor={id}>
+              {permission ? allowedText : disabledText}
+            </Label>
+          </span>
+          <InfoCircledIcon className="text-gray-400 mt-3"/>
+        </span>
+
+      </HoverCardTrigger>
+      <HoverCardContent className={"w-80 mt-1"} align="start">
+        <h4 className="scroll-m-20 text-md font-semibold tracking-tight">{t("Predictions:about")}: {id}</h4>
+        <p className="leading-6 text-sm [&:not(:first-child)]:mt-1">{permission ? enabledInfo : disabledInfo}</p>
+      </HoverCardContent>
+    </HoverCard>
   );
 }
diff --git a/src/data/locales/da/AssetCommon.json b/src/data/locales/da/AssetCommon.json
@@ -0,0 +1,94 @@
+{
+    "permissions": {
+      "header": "Aktivets tilladelser",
+      "header_content": "Bemærk: Deaktivering af tilladelser er en permanent beslutning",
+      "charge_market_fee": {
+        "allowedText": "Markedsgebyrer tilladt",
+        "disabledText": "Markedsgebyrer deaktiveret",
+        "enabledInfo": "Det er muligt for aktivets skaber at gøre det muligt at opkræve markedshandelsgebyrer for dette aktiv.",
+        "disabledInfo": "Det er nu umuligt for aktivets skaber at opkræve markedshandelsgebyrer for dette aktiv."
+      },
+      "white_list": {
+        "allowedText": "Hvid liste tilladt",
+        "disabledText": "Hvidliste deaktiveret",
+        "enabledInfo": "Det er muligt for aktivopretteren at aktivere konfiguration af hvidlisteautoriteter for dette aktiv.",
+        "disabledInfo": "Det er nu umuligt for aktivopretteren at konfigurere hvidlisteautoriteter for dette aktiv."
+      },
+      "override_authority": {
+        "allowedText": "Tilsidesættelse af autoritet tilladt",
+        "disabledText": "Tilsidesættelse af autoritet deaktiveret",
+        "enabledInfo": "Det er muligt for aktivopretteren at aktivere muligheden for at udføre en tilsidesættelse af overførsel af dette aktiv og returnere det til deres saldo fra din.",
+        "disabledInfo": "Det er nu umuligt for aktivets skaber at udføre tilsidesættelsesoverførselshandlinger på dette aktiv."
+      },
+      "transfer_restricted": {
+        "allowedText": "Overførsel begrænset tilladt",
+        "enabledInfo": "Det er muligt for aktivopretteren at aktivere muligheden for at begrænse overførsler af dette aktiv.",
+        "disabledText": "Overførsel begrænset deaktiveret",
+        "disabledInfo": "Det er nu umuligt for aktivets skaber at begrænse overførsler af dette aktiv."
+      },
+      "disable_confidential": {
+        "allowedText": "Deaktiver fortroligt tilladt",
+        "enabledInfo": "Det er muligt for aktivopretteren at aktivere muligheden for at deaktivere fortrolige handlinger for dette aktiv.",
+        "disabledText": "Deaktiver fortroligt deaktiveret",
+        "disabledInfo": "Det er nu umuligt for aktivets skaber at deaktivere fortrolige handlinger for dette aktiv."
+      },
+      "witness_fed_asset": {
+        "allowedText": "Vidnefodret aktiv tilladt",
+        "enabledInfo": "Det er muligt for aktivets skaber at give vidner mulighed for at offentliggøre prisfeeds for dette aktiv.",
+        "disabledText": "Vidnefodret aktiv deaktiveret",
+        "disabledInfo": "Det er nu umuligt for aktivets skaber at gøre det muligt for vidner at offentliggøre prisfeed for dette aktiv."
+      },
+      "committee_fed_asset": {
+        "allowedText": "Komité fodret aktiv tilladt",
+        "enabledInfo": "Det er muligt for aktivopretteren at give udvalgsmedlemmer mulighed for at udgive prisfeeds for dette aktiv.",
+        "disabledText": "Udvalgsfodret aktiv deaktiveret",
+        "disabledInfo": "Det er nu umuligt for aktivopretteren at give udvalgsmedlemmer mulighed for at udgive prisfeeds for dette aktiv."
+      }
+    },
+    "flags": {
+      "header": "Aktivets flag",
+      "header_content": "Hver tilladt aktivtilladelse kan slås til/fra.",
+      "charge_market_fee": {
+        "allowedText": "Markedsgebyrer aktiveret",
+        "enabledInfo": "Aktivopretteren kan konfigurere markedshandelsgebyrer for dette aktiv, herunder funktionalitet til deling af markedsgebyrer.",
+        "disabledText": "Markedsgebyrer deaktiveret",
+        "disabledInfo": "Aktivets skaber har deaktiveret opkrævning af markedshandelsgebyrer for dette aktiv."
+      },
+      "white_list": {
+        "allowedText": "Hvidliste aktiveret",
+        "enabledInfo": "Aktivopretteren kan konfigurere hvidlisteautoriteter for dette aktiv.",
+        "disabledText": "Hvidliste deaktiveret",
+        "disabledInfo": "Aktivopretteren har deaktiveret konfiguration af hvidlisteautoriteter for dette aktiv."
+      },
+      "override_authority": {
+        "allowedText": "Tilsidesættelse af autoritet aktiveret",
+        "enabledInfo": "Aktivopretteren kan udføre en tilsidesættelse af overførsel af dette aktiv og returnere det til deres saldo fra din.",
+        "disabledText": "Tilsidesættelse af autoritet deaktiveret",
+        "disabledInfo": "Aktivets skaber har deaktiveret udførelsen af tilsidesættelsesoverførselshandlinger på dette aktiv."
+      },
+      "transfer_restricted": {
+        "allowedText": "Overførsel begrænset aktiveret",
+        "enabledInfo": "Aktivets skaber kan begrænse overførsler af dette aktiv.",
+        "disabledText": "Overførsel begrænset deaktiveret",
+        "disabledInfo": "Aktivets skaber har deaktiveret begrænsning af overførsler af dette aktiv."
+      },
+      "disable_confidential": {
+        "allowedText": "Deaktiver fortroligt aktiveret",
+        "enabledInfo": "Aktivets skaber har deaktiveret fortrolige handlinger for dette aktiv.",
+        "disabledText": "Deaktiver fortroligt deaktiveret",
+        "disabledInfo": "Aktivets skaber har ikke deaktiveret fortrolige handlinger for dette aktiv."
+      },
+      "witness_fed_asset": {
+        "allowedText": "Vidnefodret aktiv aktiveret",
+        "enabledInfo": "Vidner kan udgive prisfeeds for dette aktiv.",
+        "disabledText": "Vidnefodret aktiv deaktiveret",
+        "disabledInfo": "Vidner kan ikke udgive prisfeed for dette aktiv."
+      },
+      "committee_fed_asset": {
+        "allowedText": "Komitéfødet aktiv aktiveret",
+        "enabledInfo": "Udvalgsmedlemmer er i stand til at offentliggøre prisfeeds for dette aktiv.",
+        "disabledText": "Udvalgsfodret aktiv deaktiveret",
+        "disabledInfo": "Udvalgsmedlemmer kan ikke udgive prisfeeds for dette aktiv."
+      }
+    }
+  }
diff --git a/src/data/locales/da/CreatePrediction.json b/src/data/locales/da/CreatePrediction.json
@@ -15,7 +15,7 @@
       "placeholder": "Symbol"
     },
     "shortName": {
-      "header": "Kort navn på aktiv",
+      "header": "Aktivt kort navn",
       "header_content": "Dette er det korte navn på aktivet, mindre vigtigt end symbolet, men er stadig en forkortet unik identifikator. ",
       "placeholder": "Kort Navn"
     },
@@ -27,11 +27,11 @@
     "max_supply": {
       "header": "Maksimal forsyning",
       "header_content": "Det maksimale udbud af aktivet, dette er den samlede mængde af aktivet, der nogensinde kan skabes af låntagere, mens forudsigelsesmarkedsaktivet er aktivt.",
-      "placeholder": "Max forsyning"
+      "placeholder": "Max udbud"
     },
     "precision": {
       "header": "Aktiv præcision",
-      "header_content": "Præcisionen af aktivet angiver antallet af understøttede decimaler. Denne værdi kan ikke ændres efter aktivets oprettelse.",
+      "header_content": "Præcisionen af aktivet angiver antallet af understøttede decimaler. ",
       "placeholder": "Præcision"
     }
   },
@@ -133,24 +133,50 @@
   },
   "extensions": {
     "header_content": "Udvidelserne er yderligere avancerede indstillinger, der kan bruges til yderligere at tilpasse aktivet.",
-    "header": "Prediction Market Asset Extensions",
+    "header": "Markedsgebyrudvidelser",
     "reward_percent": {
       "enabled": "Forlængelse af referencebelønning i procent er aktiveret",
-      "disabled": "Vil du aktivere udvidelsen med henvisningsbelønning i procent?",
+      "enabledInfo": "En procentnedsættelse af markedsgebyret vil blive tildelt henviseren af aktive markedsdeltagere.",
+      "disabled": "Vil du aktivere udvidelsen af henvisningsbelønningsprocenten?",
+      "disabledInfo": "Forlængelsen af referencebelønningsprocenten gør det muligt for aktivopretteren at tildele en procentdel af markedsgebyret til henvisningen af aktive markedsdeltagere.",
       "header": "Henviserbelønningsprocent",
-      "header_content": "Henviserbelønningsprocenten er den procentdel af provisionen, der tildeles henviseren af aktive markedsdeltagere."
+      "header_content": "Henviserbelønningsprocenten er den procentdel af markedsgebyret, som tildeles henviseren af aktive markedsdeltagere."
     },
     "whitelist_market_fee_sharing": {
       "enabled": "Hvidliste udvidelse af markedsgebyrdeling aktiveret",
+      "enabledInfo": "Følgende henvisningskonti vil blive godkendt til at modtage en reduktion af de opkrævede markedsgebyrer fra deres henvisningskonti.",
       "disabled": "Vil du aktivere udvidelsen til hvidlistemarkedsgebyrdeling?",
+      "disabledInfo": "Du kan begrænse, hvem der har tilladelse til at modtage en nedskæring af de opkrævede markedsgebyrer til et sæt forhåndsgodkendte henvisningskonti.",
       "header": "Hvidliste markedsgebyrdeling",
       "header_content": "Hvidliste-markedsgebyrdelingsudvidelsen giver huset mulighed for at begrænse henvisninger til disse hvidlistede konti."
     },
     "taker_fee_percent": {
       "enabled": "Forlængelse af takergebyrprocent aktiveret",
+      "enabledInfo": "Den \"tager\"-deltager af limitordren vil modtage en procentdel af markedsgebyret.",
       "disabled": "Vil du aktivere udvidelsen af takergebyrsprocenten?",
+      "disabledInfo": "Forlængelsen af taker-gebyrets procentdel giver aktivophavsmanden mulighed for at allokere en procentdel af markedsgebyret til \"tageren\" af limitordre-operationer.",
       "header": "Aftagerhonorarprocent",
-      "header_content": "Taker-fee-procenten er den procentdel af provisionen, som tildeles \"tageren\" af forudsigelsesmarkedsaktivet."
+      "header_content": "Taker-fee-procenten er den procentdel af markedsgebyret, som tildeles 'tageren' af limitordrerne på den decentrale børs."
+    },
+    "allowed_markets": {
+      "enabled": "Tilladt markedsudvidelse aktiveret",
+      "enabledInfo": "Følgende markeder er godkendt til at handle med dette aktiv.",
+      "disabled": "Vil du aktivere den tilladte markedsudvidelse?",
+      "disabledInfo": "Du kan begrænse de markeder, der har tilladelse til at handle med dette aktiv, til et sæt forhåndsgodkendte markeder."
+    },
+    "banned_markets": {
+      "enabled": "Udvidelse af forbudte markeder aktiveret",
+      "enabledInfo": "Følgende markeder er forbudt at handle med dette aktiv.",
+      "disabled": "Vil du aktivere udvidelsen af forbudte markeder?",
+      "disabledInfo": "Denne funktion giver dig mulighed for at forbyde specifikke markedshandelspar, så du kan hjælpe med at undgå, at dine aktiver handles på uønskede markeder."
     }
+  },
+  "whitelist": {
+    "header_content": "Hvidlistemyndighederne for aktiver er konti, der kan bidrage med deres kontos liste over hhv. kontoer for at godkende interaktion med denne adgang.",
+    "header": "Asset Whitelist myndigheder"
+  },
+  "blacklist": {
+    "header_content": "Aktivernes sortlistemyndigheder er konti, der kan bidrage med deres kontos sortlistede kontiliste for at håndhæve en forbudt kontoliste, der forhindrer interaktion med denne adgang.",
+    "header": "Asset blacklist myndigheder"
   }
 }