[Front] Fix/multi wallet local storage issue (#333)

packages/demo/usecase-demo/src/modules/oneProtectedData/ContentCardWithConsume.tsx

@@ -6,6 +6,7 @@ import { useMutation } from '@tanstack/react-query';
 import { clsx } from 'clsx';
 import { useEffect, useState } from 'react';
 import { AlertOctagon, CheckCircle, DownloadCloud, Lock } from 'react-feather';
+import { Address } from 'wagmi';
 import { Alert } from '@/components/Alert.tsx';
 import { DocLink } from '@/components/DocLink';
 import { LoadingSpinner } from '@/components/LoadingSpinner.tsx';
@@ -24,11 +25,13 @@ import {
 import { cn } from '@/utils/style.utils.ts';
 
 export function ContentCardWithConsume({
+  userAddress,
   protectedDataAddress,
   protectedDataName,
   isOwner,
   hasAccessToContent,
 }: {
+  userAddress: Address;
   protectedDataAddress: string;
   protectedDataName: string;
   isOwner: boolean;
@@ -70,6 +73,7 @@ export function ContentCardWithConsume({
       }
 
       const completedTaskId = getCompletedTaskId({
+        walletId: userAddress,
         protectedDataAddress,
       });
       if (completedTaskId) {
@@ -104,7 +108,11 @@ export function ContentCardWithConsume({
           },
         });
 
-      saveCompletedTaskId({ protectedDataAddress, completedTaskId: taskId });
+      saveCompletedTaskId({
+        walletId: userAddress,
+        protectedDataAddress,
+        completedTaskId: taskId,
+      });
 
       const fileAsBlob = new Blob([result]);
       const fileAsObjectURL = URL.createObjectURL(fileAsBlob);
@@ -154,6 +162,7 @@ export function ContentCardWithConsume({
       status.payload?.taskId
     ) {
       saveCompletedTaskId({
+        walletId: userAddress,
         protectedDataAddress,
         completedTaskId: status.payload.taskId,
       });

packages/demo/usecase-demo/src/routes/_explore/content.$protectedDataAddress.tsx

@@ -3,6 +3,7 @@ import { createFileRoute, Link, useRouter } from '@tanstack/react-router';
 import { clsx } from 'clsx';
 import { EyeOff, Tag } from 'react-feather';
 import { ChevronLeft } from 'react-feather';
+import { Address } from 'wagmi';
 import { Alert } from '@/components/Alert.tsx';
 import { CircularLoader } from '@/components/CircularLoader.tsx';
 import { DocLink } from '@/components/DocLink';
@@ -107,6 +108,7 @@ export function ProtectedDataPreview() {
 
       <div className="mx-auto max-w-[620px]">
         <ContentCardWithConsume
+          userAddress={userAddress as Address}
           protectedDataAddress={protectedDataAddress}
           protectedDataName={protectedData?.name || ''}
           isOwner={isDirectOwner || isOwnerThroughTheirCollection}

packages/demo/usecase-demo/src/utils/localStorageContentMap.ts

@@ -1,37 +1,87 @@
+import { Address } from 'wagmi';
 import { LOCAL_STORAGE_PREFIX } from '@/utils/localStorage.ts';
 
+type TaskData = {
+  wallet_id: Address;
+  protected_data_address: string;
+  completed_task_id: string;
+};
+
+const STORED_DATA_KEY = `${LOCAL_STORAGE_PREFIX}_savedTaskId`;
+
 /**
  * localStorage cache for completed iExec tasks.
  * ie. Content is available on IPFS *but* the key needs not to have been re-generated in the meantime!
  */
 
+function getCompletedTasksCache(): TaskData[] {
+  const tasksCache = localStorage.getItem(STORED_DATA_KEY);
+  try {
+    return tasksCache ? JSON.parse(tasksCache) : [];
+  } catch (err) {
+    console.error('[getCompletedTasksCache] ERROR', err);
+    localStorage.removeItem(STORED_DATA_KEY);
+    return [];
+  }
+}
+
 export function saveCompletedTaskId({
+  walletId,
   protectedDataAddress,
   completedTaskId,
 }: {
+  walletId: Address;
   protectedDataAddress: string;
   completedTaskId: string;
 }) {
-  localStorage.setItem(
-    `${LOCAL_STORAGE_PREFIX}_${protectedDataAddress}`,
-    completedTaskId
+  const tasks = getCompletedTasksCache();
+
+  const newCompletedTask: TaskData = {
+    wallet_id: walletId,
+    protected_data_address: protectedDataAddress,
+    completed_task_id: completedTaskId,
+  };
+
+  const existingTaskIndex = tasks.findIndex(
+    (task) =>
+      task.wallet_id === walletId &&
+      task.protected_data_address === protectedDataAddress
   );
+
+  if (existingTaskIndex > -1) {
+    tasks[existingTaskIndex] = newCompletedTask;
+  } else {
+    tasks.push(newCompletedTask);
+  }
+
+  localStorage.setItem(STORED_DATA_KEY, JSON.stringify(tasks));
 }
 
 export function getCompletedTaskId({
+  walletId,
   protectedDataAddress,
 }: {
+  walletId: Address;
   protectedDataAddress: string;
-}) {
-  return localStorage.getItem(
-    `${LOCAL_STORAGE_PREFIX}_${protectedDataAddress}`
+}): string | null {
+  const tasks = getCompletedTasksCache();
+
+  const existingTask = tasks.find(
+    (task) =>
+      task.wallet_id === walletId &&
+      task.protected_data_address === protectedDataAddress
   );
+
+  if (!existingTask || !existingTask.completed_task_id) {
+    return null;
+  }
+
+  return existingTask.completed_task_id;
 }
 
+/**
+ * Reset the cache of completed task IDs in localStorage.
+ */
 export function resetCompletedTaskIdsCache() {
-  for (const key in localStorage) {
-    if (key.startsWith(`${LOCAL_STORAGE_PREFIX}_0x`)) {
-      localStorage.removeItem(key);
-    }
-  }
+  localStorage.removeItem(STORED_DATA_KEY);
 }