feat: display human readable tags (#95)

* feat: display human readable tags

* fix: display None for null tag

* chore: remove now useless tag tooltip details

* feat: add tooltip message handling in CopyButton component

---------

Co-authored-by: ErwanDecoster <[email protected]>

Author: PierreJeanjacquot

src/components/CopyButton.tsx

@@ -12,16 +12,18 @@ const CopyButton = ({
   displayText,
   buttonText,
   tooltipWithText = false,
+  tooltipText = 'Copy',
   className,
 }: {
   textToCopy: string;
   displayText?: string;
   buttonText?: string;
   tooltipWithText?: boolean;
+  tooltipText?: string;
   className?: string;
 }) => {
   const [showTooltip, setShowTooltip] = useState(false);
-  const [tooltipMessage, setTooltipMessage] = useState('Copy');
+  const [tooltipMessage, setTooltipMessage] = useState(tooltipText);
 
   const handleCopy = () => {
     navigator.clipboard.writeText(textToCopy).then(() => {
@@ -35,7 +37,7 @@ const CopyButton = ({
     if (tooltipWithText && displayText) {
       setTooltipMessage(`Copy "${displayText}"`);
     } else {
-      setTooltipMessage('Copy');
+      setTooltipMessage(tooltipText);
     }
     setShowTooltip(true);
   };

src/modules/Tags.tsx

@@ -0,0 +1,44 @@
+import { decodeTag } from 'iexec/utils';
+import CopyButton from '@/components/CopyButton';
+import { truncateAddress } from '@/utils/truncateAddress';
+
+const Tags = (props: { children: string }) => {
+  const { children: raw } = props;
+
+  let tags: string[] | null = null;
+  try {
+    tags = decodeTag(raw);
+  } catch {
+    // If decoding fails, fall back to displaying raw encoded tag
+  }
+  return (
+    <div className="flex items-center gap-1">
+      {tags ? (
+        tags.length > 0 ? (
+          tags.map((t) => (
+            <span
+              className="inline-flex w-fit rounded-full border px-4 py-2 text-xs uppercase"
+              key={t}
+            >
+              {t}
+            </span>
+          ))
+        ) : (
+          <span className="text-muted-foreground">None</span>
+        )
+      ) : (
+        <>
+          <span className="hidden md:inline">{raw}</span>
+          <span className="inline md:hidden">{truncateAddress(raw)}</span>
+        </>
+      )}{' '}
+      <CopyButton
+        className="ml-2"
+        textToCopy={raw}
+        tooltipText="Copy raw tag"
+      />
+    </div>
+  );
+};
+
+export default Tags;

src/modules/deals/deal/buildDealDetails.tsx

@@ -1,8 +1,8 @@
 import { DealQuery } from '@/graphql/poco/graphql';
 import CopyButton from '@/components/CopyButton';
 import SmartLinkGroup from '@/components/SmartLinkGroup';
-import Bytes from '@/modules/Bytes';
 import JsonBlock from '@/modules/JsonBlock';
+import Tags from '@/modules/Tags';
 import DealEvent from '@/modules/events/DealEvent';
 import { ClaimButton } from '@/modules/tasks/ClaimButton';
 import {
@@ -73,38 +73,8 @@ export function buildDealDetails({
       }),
     ...(deal.tag && {
       Tag: {
-        tooltip: (
-          <>
-            Indicates the execution environment type defined by iExec :
-            <ul className="list-inside list-disc">
-              <li>
-                <code className="bg-primary-foreground text-primary -mx-1 rounded-sm px-1 py-px">
-                  0x0
-                </code>
-                : Standard
-              </li>
-              <li>
-                <code className="bg-primary-foreground text-primary -mx-1 rounded-sm px-1 py-px">
-                  0x3
-                </code>
-                : SGX Scone
-              </li>
-              <li>
-                <code className="bg-primary-foreground text-primary -mx-1 rounded-sm px-1 py-px">
-                  0x5
-                </code>
-                : SGX Gramine
-              </li>
-              <li>
-                <code className="bg-primary-foreground text-primary -mx-1 rounded-sm px-1 py-px">
-                  0x9
-                </code>
-                : TDX
-              </li>
-            </ul>
-          </>
-        ),
-        value: <Bytes>{deal.tag}</Bytes>,
+        tooltip: <>Indicates the execution environment type defined by iExec</>,
+        value: <Tags>{deal.tag}</Tags>,
       },
     }),
     ...(deal.app && {

src/modules/tasks/task/buildTaskDetails.tsx

@@ -3,6 +3,7 @@ import CopyButton from '@/components/CopyButton';
 import SmartLinkGroup from '@/components/SmartLinkGroup';
 import Bytes from '@/modules/Bytes';
 import JsonBlock from '@/modules/JsonBlock';
+import Tags from '@/modules/Tags';
 import TaskEvent from '@/modules/events/TaskEvent';
 import useUserStore from '@/stores/useUser.store';
 import { taskResultToObject } from '@/utils/format';
@@ -69,38 +70,8 @@ export function buildTaskDetails({ task }: { task: TaskQuery['task'] }) {
       }),
     ...(task.deal.tag && {
       Tag: {
-        tooltip: (
-          <>
-            Indicates the execution environment type defined by iExec :
-            <ul className="list-inside list-disc">
-              <li>
-                <code className="bg-primary-foreground text-primary -mx-1 rounded-sm px-1 py-px">
-                  0x0
-                </code>
-                : Standard
-              </li>
-              <li>
-                <code className="bg-primary-foreground text-primary -mx-1 rounded-sm px-1 py-px">
-                  0x3
-                </code>
-                : SGX Scone
-              </li>
-              <li>
-                <code className="bg-primary-foreground text-primary -mx-1 rounded-sm px-1 py-px">
-                  0x5
-                </code>
-                : SGX Gramine
-              </li>
-              <li>
-                <code className="bg-primary-foreground text-primary -mx-1 rounded-sm px-1 py-px">
-                  0x9
-                </code>
-                : TDX
-              </li>
-            </ul>
-          </>
-        ),
-        value: <Bytes>{task.deal.tag}</Bytes>,
+        tooltip: <>Indicates the execution environment type defined by iExec</>,
+        value: <Tags>{task.deal.tag}</Tags>,
       },
     }),
     ...(task.deal.app && {