feat: add dynamic basename handling

Author: ErwanDecoster

.env.example

@@ -1,2 +1,4 @@
 VITE_REOWN_PROJECT_ID=31dfd450a68758ef69ab89125f2b6c4b
-VITE_ROLLBAR_ACCESS_TOKEN=
+VITE_ROLLBAR_ACCESS_TOKEN=
+
+VITE_VERCEL_ENV=development

src/modules/send-message/ContactItem.tsx

@@ -0,0 +1,101 @@
+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';
+
+interface ContactItemProps {
+  contact: (Web3telegramContact | Web3mailContact) & {
+    contactType: 'mail' | 'telegram';
+  };
+}
+
+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) {
+    console.error('Error loading contact details:', contact.address);
+    return <p>Error loading contact details</p>;
+  }
+
+  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">
+        <span className="truncate whitespace-nowrap">{contact.address}</span>
+      </div>
+      <div className="truncate">
+        <span className="truncate whitespace-nowrap">
+          {contact.owner === userAddress
+            ? `(Mine) ${contact.owner}`
+            : contact.owner}
+        </span>
+      </div>
+      <div className="truncate">
+        {isLoading ? <LoadingSpinner /> : contactDetails?.volume || 'N/A'}
+      </div>
+      <div className="text-primary truncate uppercase">
+        {contact.contactType}
+      </div>
+      <div className="justify-end">
+        <Button asChild variant="discreet_outline">
+          <Link to={`/contacts/${contact.address}/send-message`}>Send</Link>
+        </Button>
+      </div>
+    </div>
+  );
+}

src/router.tsx

@@ -1,6 +1,7 @@
 import Resources from '@/views/resources';
 import { createBrowserRouter, Navigate } from 'react-router-dom';
 import MainLayout from './layouts/MainLayout.tsx';
+import { getBasename } from './utils/getBasename.ts';
 import ContactList from './views/contact/contactList.tsx';
 import SendMessage from './views/contact/sendMessage.tsx';
 import AddProtectedData from './views/myData/addProtectedData.tsx';
@@ -45,6 +46,6 @@ export const router = createBrowserRouter(
     },
   ],
   {
-    basename: '/web3messaging',
+    basename: getBasename(),
   }
 );

src/utils/getBasename.ts

@@ -0,0 +1,16 @@
+export const getBasename = (): string => {
+  const vercelEnv = import.meta.env.VITE_VERCEL_ENV || process.env.VERCEL_ENV;
+  
+  // Vercel production
+  if (vercelEnv === 'production') {
+    return '/web3messaging';
+  }
+
+  // Vercel preview/staging
+  if (vercelEnv === 'preview') {
+    return '/';
+  }
+
+  // Local development
+  return '/web3messaging';
+};

vite.config.ts

@@ -5,8 +5,22 @@ import tailwindcss from '@tailwindcss/vite'
 
 export default defineConfig(({ mode }) => {
   const env = loadEnv(mode, process.cwd(), '');
+  
+  const getBase = () => {
+    // Vercel production
+    if (env.VERCEL_ENV === 'production') {
+      return '/web3messaging';
+    }
+    // Vercel preview/staging 
+    if (env.VERCEL_ENV === 'preview') {
+      return '/';
+    }
+    // local development
+    return '/web3messaging';
+  };
+  
   return {
-    base: "/web3messaging",
+    base: getBase(),
     define: {
       'process.env.NEXT_PUBLIC_SECURE_SITE_ORIGIN': JSON.stringify(
         env.NEXT_PUBLIC_SECURE_SITE_ORIGIN || 'https://secure.walletconnect.org'