fix: update Web3mail and Web3telegram to use new returned value and simplify ContactItem components (#133)

Author: ErwanDecoster

package-lock.json

@@ -23,8 +23,8 @@
     "@fontsource/space-mono": "^5.2.5",
     "@graphql-codegen/introspection": "^4.0.3",
     "@iexec/dataprotector": "^2.0.0-beta.18",
-    "@iexec/web3mail": "^1.3.1",
-    "@iexec/web3telegram": "^0.1.0-alpha.2",
+    "@iexec/web3mail": "^1.4.0",
+    "@iexec/web3telegram": "^0.1.0-alpha.3",
     "@radix-ui/react-dialog": "^1.1.6",
     "@radix-ui/react-label": "^2.1.2",
     "@radix-ui/react-select": "^2.1.6",

package.json

@@ -1,14 +1,7 @@
-import {
-  WEB3MAIL_IDAPPS_WHITELIST_SC,
-  WEB3TELEGRAM_IDAPPS_WHITELIST_SC,
-} from '@/config/config';
 import { Contact as Web3mailContact } from '@iexec/web3mail';
 import { Contact as Web3telegramContact } from '@iexec/web3telegram';
-import { useQuery } from '@tanstack/react-query';
 import { Link } from 'react-router-dom';
-import { LoadingSpinner } from '@/components/LoadingSpinner';
 import { Button } from '@/components/ui/button';
-import { getDataProtectorCoreClient } from '@/externals/iexecSdkClient';
 import useUserStore from '@/stores/useUser.store';
 import { cn } from '@/utils/style.utils';
 
@@ -18,63 +11,16 @@ interface ContactItemProps {
   };
 }
 
-const fetchContactDetails = async (
-  contact: (Web3telegramContact | Web3mailContact) & {
-    contactType: 'mail' | 'telegram';
-  },
-  userAddress: string
-) => {
-  const dataProtectorCore = await getDataProtectorCoreClient();
-
-  const contactProtectedData = await dataProtectorCore.getProtectedData({
-    protectedDataAddress: contact.address,
-  });
-
-  const grantedAccess = await dataProtectorCore.getGrantedAccess({
-    protectedData: contact.address,
-    authorizedUser: userAddress,
-    authorizedApp:
-      contact.contactType === 'mail'
-        ? WEB3MAIL_IDAPPS_WHITELIST_SC
-        : WEB3TELEGRAM_IDAPPS_WHITELIST_SC,
-  });
-
-  return {
-    ...contactProtectedData[0],
-    contactType: contact.contactType,
-    volume: grantedAccess.grantedAccess[0].volume,
-  };
-};
-
 export default function ContactItem({ contact }: ContactItemProps) {
   const { address: userAddress } = useUserStore();
 
-  const {
-    data: contactDetails,
-    isLoading,
-    isError,
-  } = useQuery({
-    queryKey: ['contactDetails', contact.address, userAddress],
-    queryFn: () => fetchContactDetails(contact, userAddress as string),
-    enabled: !!userAddress,
-    refetchOnWindowFocus: false,
-    staleTime: 5 * 60 * 1000, // 5 minutes
-  });
-
-  if (isError) {
-    // TODO: Handle error more gracefully. Do not display error in the UI.
-    console.error('Error loading contact details:', contact.address);
-  }
-
   return (
     <div
       className={cn(
         'bg-grey-50 even:*:bg-grey-800 *:border-grey-600 contents text-sm *:flex *:h-full *:items-center *:border-t *:px-5 *:py-3'
       )}
     >
-      <div className="truncate">
-        {isLoading ? <LoadingSpinner /> : contactDetails?.name || '(No name)'}
-      </div>
+      <div className="truncate">{contact.name || '(No name)'}</div>
       <div className="truncate">
         <span className="truncate whitespace-nowrap">{contact.address}</span>
       </div>
@@ -86,7 +32,9 @@ export default function ContactItem({ contact }: ContactItemProps) {
         </span>
       </div>
       <div className="truncate">
-        {isLoading ? <LoadingSpinner /> : contactDetails?.volume || 'N/A'}
+        {contact.remainingAccess !== undefined
+          ? contact.remainingAccess
+          : 'N/A'}
       </div>
       <div className="text-primary truncate uppercase">
         {contact.contactType}