feat: add wallet connection prompt in TaskRawData component

Author: ErwanDecoster

src/modules/tasks/task/TaskRawData.tsx

@@ -1,6 +1,8 @@
 import { TABLE_REFETCH_INTERVAL } from '@/config';
 import { useQuery } from '@tanstack/react-query';
+import { Button } from '@/components/ui/button';
 import { getIExec } from '@/externals/iexecSdkClient';
+import { useLoginLogout } from '@/hooks/useLoginLogout';
 import { ErrorAlert } from '@/modules/ErrorAlert';
 import JsonBlock from '@/modules/JsonBlock';
 import useUserStore from '@/stores/useUser.store';
@@ -59,6 +61,8 @@ export function TaskRawData({
     hasPastError,
     isLoading,
   } = useTaskRawData({ taskWorkerpoolId, taskId });
+  const { address: userAddress } = useUserStore();
+  const { login } = useLoginLogout();
 
   return hasPastError && (!tasks || !tasks.length) ? (
     <ErrorAlert
@@ -67,11 +71,23 @@ export function TaskRawData({
       }
     />
   ) : (
-    <div className="dark:bg-tooltip min-h-40 rounded-3xl border bg-[#fafaff] p-6">
-      {isLoading ? (
+    <div className="dark:bg-tooltip flex max-h-none min-h-60 rounded-3xl border bg-[#fafaff] p-6">
+      {!userAddress ? (
+        <div className="flex flex-1 flex-col items-center justify-center gap-6 text-center">
+          <h1 className="text-2xl font-bold">You are not connected</h1>
+          <p className="text-muted-foreground max-w-sm">
+            To access task raw data please connect your wallet.
+          </p>
+          <div className="flex gap-4">
+            <Button onClick={login}>Connect wallet</Button>
+          </div>
+        </div>
+      ) : isLoading ? (
         <p>Loading...</p>
       ) : (
-        <JsonBlock collapsed={5}>{tasks}</JsonBlock>
+        <JsonBlock className="w-full" collapsed={5}>
+          {tasks}
+        </JsonBlock>
       )}
     </div>
   );