feat: add wallet connection prompt in TaskRawData component (#80)

* feat: add wallet connection prompt in TaskRawData component

* feat: enhance CopyButton integration in JsonBlock component

Author: ErwanDecoster

src/components/CopyButton.tsx

@@ -62,7 +62,7 @@ const CopyButton = ({
               }}
               onMouseEnter={handleMouseEnter}
               onMouseLeave={handleMouseLeave}
-              className="hover:before:bg-muted active:before:bg-secondary relative z-0 -mx-1 -my-1 items-center gap-1 px-1 py-1 transition-colors before:absolute before:inset-0 before:-z-10 before:rounded-lg before:duration-200 active:before:scale-x-[0.98] active:before:scale-y-[0.94]"
+              className="hover:before:bg-muted active:before:bg-secondary relative z-0 -mx-1 -my-1 flex items-center gap-1 px-1 py-1 transition-colors before:absolute before:inset-0 before:-z-10 before:rounded-lg before:duration-200 active:before:scale-x-[0.98] active:before:scale-y-[0.94]"
             >
               {buttonText && <span className="mr-1 text-sm">{buttonText}</span>}
               <Copy className="size-4 flex-none" />

src/modules/JsonBlock.tsx

@@ -46,10 +46,13 @@ const JsonBlock = ({
           displayObjectSize={false}
           enableClipboard={false}
           collapsed={collapsed}
+          shortenTextAfterLength={100}
           style={defaultJsonViewStyle}
         />
       </div>
-      {enableClipboard && <CopyButton textToCopy={rawToCopy} />}
+      {enableClipboard && (
+        <CopyButton buttonText="Copy Json" textToCopy={rawToCopy} />
+      )}
     </div>
   );
 };

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>
   );