feat: add broken protectedData indicator

package.json

@@ -8,7 +8,6 @@
     "dev:prod": "vite --mode prod",
     "dev:staging": "vite --mode staging",
     "build": "vite build --mode prod",
-    "codegen": "graphql-codegen --config codegenPoco.ts",
     "check-types": "tsc --noEmit",
     "check-format": "prettier --check src",
     "format": "prettier --write src",
@@ -32,6 +31,7 @@
     "@radix-ui/react-slot": "^1.1.2",
     "@radix-ui/react-switch": "^1.1.3",
     "@radix-ui/react-toast": "^1.2.6",
+    "@radix-ui/react-tooltip": "^1.2.0",
     "@reown/appkit": "^1.6.9",
     "@reown/appkit-adapter-wagmi": "^1.6.9",
     "@rollbar/react": "^0.12.1",

src/components/ui/tooltip.tsx

@@ -0,0 +1,27 @@
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+import * as React from 'react';
+import { cn } from '../../utils/style.utils.ts';
+
+const TooltipProvider = TooltipPrimitive.Provider;
+
+const Tooltip = TooltipPrimitive.Root;
+
+const TooltipTrigger = TooltipPrimitive.Trigger;
+
+const TooltipContent = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <TooltipPrimitive.Content
+    ref={ref}
+    sideOffset={sideOffset}
+    className={cn(
+      'border-grey-600 animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 overflow-hidden rounded-md border bg-[#14141B] p-4 font-sans text-sm text-white shadow-md',
+      className
+    )}
+    {...props}
+  />
+));
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };

src/modules/myData/CheckSMSRequestSuccess.tsx

@@ -0,0 +1,56 @@
+import { Address } from '@/types';
+import { useQuery } from '@tanstack/react-query';
+import { AlertCircle } from 'react-feather';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '@/components/ui/tooltip';
+import { getDataProtectorCoreClient } from '@/externals/iexecSdkClient';
+
+export default function CheckSMSRequestSuccess({
+  protectedDataAddress,
+  className,
+}: {
+  className?: string;
+  protectedDataAddress: Address | undefined;
+}) {
+  const {
+    data: smsSecretExists,
+    isSuccess: isSmsRequestSuccess,
+    isError: isCheckSmsSecretError,
+  } = useQuery({
+    queryKey: ['oneProtectedDataSmsSecret', protectedDataAddress],
+    queryFn: async () => {
+      const dataProtectorCore = await getDataProtectorCoreClient();
+      // @ts-expect-error 'iexec' is a protected field but that's fine
+      return dataProtectorCore.iexec.dataset.checkDatasetSecretExists(
+        protectedDataAddress!
+      );
+    },
+    enabled: !!protectedDataAddress,
+  });
+
+  return (
+    <div className={className}>
+      {isSmsRequestSuccess && !smsSecretExists && !isCheckSmsSecretError && (
+        <TooltipProvider delayDuration={0}>
+          <Tooltip>
+            <TooltipTrigger className="cursor-default">
+              <AlertCircle size="24" className="text-red-400" />
+            </TooltipTrigger>
+            <TooltipContent side="left">
+              This protected data is probably unusable as{' '}
+              <strong>
+                its secret encryption key was
+                <br /> not found
+              </strong>{' '}
+              in the iExec Secret Management Service (SMS).
+            </TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
+      )}
+    </div>
+  );
+}

src/utils/formatTimestamp.ts

@@ -1,5 +1,5 @@
 export function formatTimestamp(timestamp: string | number): string {
-  const date = new Date(timestamp * 1000);
+  const date = new Date(Number(timestamp) * 1000);
   return new Intl.DateTimeFormat('en-US', {
     year: 'numeric',
     month: '2-digit',

src/views/contact/sendMessage.tsx

@@ -42,10 +42,10 @@ export default function SendMessage() {
     queryFn: async () => {
       const dataProtectorCore = await getDataProtectorCoreClient();
       // TODO check protectedDataList before
-      const protectedDatas = await dataProtectorCore.getProtectedData({
+      const protectedDataItems = await dataProtectorCore.getProtectedData({
         protectedDataAddress: protectedDataAddress,
       });
-      return protectedDatas[0];
+      return protectedDataItems[0];
     },
     enabled: !!protectedDataAddress,
     refetchOnWindowFocus: true,

src/views/myData/protectedData.tsx

@@ -8,6 +8,7 @@ import { DocLink } from '@/components/DocLink';
 import { PaginatedNavigation } from '@/components/PaginatedNavigation';
 import { Button, buttonVariants } from '@/components/ui/button';
 import { getDataProtectorCoreClient } from '@/externals/iexecSdkClient';
+import CheckSMSRequestSuccess from '@/modules/myData/CheckSMSRequestSuccess';
 import RevokeAccess from '@/modules/myData/RevokeAccess';
 import GrantAccessModal from '@/modules/myData/protectedData/GrantAccessModal';
 import { ProtectedDataDetails } from '@/modules/myData/protectedData/ProtectedDataDetails';
@@ -46,7 +47,7 @@ export default function ProtectedData() {
     protectedDataAddress: Address;
   }>();
   const [currentPage, setCurrentPage] = useState(0);
-  const [isGrantAccessModalOpen, setGrantAccessModalOpen] = useState(false);
+  const [isGrantAccessModalOpen, setIsGrantAccessModalOpen] = useState(false);
 
   const protectedData = useQuery({
     queryKey: ['protectedData', protectedDataAddress, userAddress],
@@ -56,11 +57,11 @@ export default function ProtectedData() {
       }
       const dataProtectorCore = await getDataProtectorCoreClient();
       // TODO check protectedDataList before
-      const protectedDatas = await dataProtectorCore.getProtectedData({
+      const protectedDataItems = await dataProtectorCore.getProtectedData({
         protectedDataAddress: protectedDataAddress,
         owner: userAddress,
       });
-      return protectedDatas[0];
+      return protectedDataItems[0];
     },
     enabled: !!userAddress && !!protectedDataAddress,
     refetchOnWindowFocus: true,
@@ -99,7 +100,7 @@ export default function ProtectedData() {
       {protectedData.data && (
         <GrantAccessModal
           isSwitchingModalOpen={isGrantAccessModalOpen}
-          setSwitchingModalOpen={setGrantAccessModalOpen}
+          setSwitchingModalOpen={setIsGrantAccessModalOpen}
           protectedData={protectedData.data}
         />
       )}
@@ -115,7 +116,8 @@ export default function ProtectedData() {
             {protectedData.data.schema.email ? 'MAIL' : 'TELEGRAM'}
           </span>
         )}
-        <span className="line-clamp-2 text-left">
+        <span className="line-clamp-2 flex gap-2 text-left">
+          <CheckSMSRequestSuccess protectedDataAddress={protectedDataAddress} />
           {protectedData.data?.name ? protectedData.data.name : '(No name)'}
         </span>
       </h1>
@@ -133,7 +135,7 @@ export default function ProtectedData() {
           </div>
           <Button
             onClick={() => {
-              setGrantAccessModalOpen(true);
+              setIsGrantAccessModalOpen(true);
             }}
           >
             Authorize new user

src/views/myData/protectedDataList.tsx

@@ -1,14 +1,16 @@
+import { Address } from '@/types';
 import { useQuery } from '@tanstack/react-query';
 import { useState, useEffect } from 'react';
 import { ArrowRight } from 'react-feather';
-import { Link, NavLink } from 'react-router-dom';
+import { Link } from 'react-router-dom';
 import protectANewData from '@/assets/protect_a_new_data.png';
 import { Alert } from '@/components/Alert';
 import { CircularLoader } from '@/components/CircularLoader';
 import { DocLink } from '@/components/DocLink';
 import { PaginatedNavigation } from '@/components/PaginatedNavigation';
 import { Button } from '@/components/ui/button';
 import { getDataProtectorCoreClient } from '@/externals/iexecSdkClient';
+import CheckSMSRequestSuccess from '@/modules/myData/CheckSMSRequestSuccess';
 import useUserStore from '@/stores/useUser.store';
 import { chunkArray } from '@/utils/chunkArray';
 import { formatTimestamp } from '@/utils/formatTimestamp';
@@ -218,7 +220,12 @@ export default function ProtectedDataList() {
                     'absolute inset-x-px top-px h-[42px] rounded-t-[calc(20px-1px)] bg-gradient-to-r from-[#14141B] from-25%',
                     colorConfig.gradientTo
                   )}
-                />
+                >
+                  <CheckSMSRequestSuccess
+                    className="absolute top-2 right-2"
+                    protectedDataAddress={protectedData.address as Address}
+                  />
+                </div>
                 <Button
                   variant="chip"
                   size="sm"