iExecBlockchainComputing · ErwanDecoster · Jun 19, 2025 · Jun 19, 2025 · Jun 19, 2025 · Jun 19, 2025
diff --git a/index.html b/index.html
@@ -29,7 +29,8 @@
       'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
       })(window,document,'script','dataLayer','GTM-P7KSD4T');
     </script>
-    <!-- End Google Tag Manager -->
+    <!-- Mava Widget -->
+    <script defer src="https://widget.mava.app" widget-version="v2" id="MavaWebChat" enable-sdk="false" data-token="8e4e10aad5750451e8726768e8c639dae54f461beeb176f5ebd687371c9390f2"></script>
   </head>
   <body>
     <noscript>

diff --git a/src/components/navBar/NavBar.tsx b/src/components/navBar/NavBar.tsx
@@ -1,6 +1,8 @@
+import { CONTACT_URL } from '@/config/config.ts';
 import { useState } from 'react';
 import { Link, NavLink } from 'react-router-dom';
 import { useDevModeStore } from '@/stores/useDevMode.store.ts';
+import { cn } from '@/utils/style.utils.ts';
 import iExecLogo from '../../assets/iexec-logo.svg';
 import { Button } from '../ui/button.tsx';
 import { Label } from '../ui/label.tsx';
@@ -15,7 +17,7 @@ export function NavBar() {
   };
 
   return (
-    <div className="group relative z-30 h-full flex-none lg:w-[255px]">
+    <div className="group relative z-30 h-full flex-none lg:w-[280px]">
       <label
         className="group/checkbox fixed top-7 right-7 z-30 flex size-5 w-[26px] origin-center transform flex-col justify-between lg:hidden"
         htmlFor="menu"
@@ -33,7 +35,7 @@ export function NavBar() {
         <span className="pointer-events-none block h-0.5 w-[26px] origin-top-right transform rounded-full bg-white duration-200 group-has-[:checked]/checkbox:scale-x-0"></span>
         <span className="pointer-events-none block h-0.5 w-[26px] origin-right transform rounded-full bg-white duration-200 group-has-[:checked]/checkbox:rotate-45"></span>
       </label>
-      <div className="border-grey-600 bg-grey-900 fixed flex h-dvh w-full -translate-x-full flex-col overflow-auto rounded-r-3xl border-r px-5 pt-10 duration-300 group-has-[:checked]:translate-x-0 lg:w-[255px] lg:translate-x-0">
+      <div className="border-grey-600 bg-grey-900 fixed flex h-dvh w-full -translate-x-full flex-col overflow-auto rounded-r-3xl border-r px-5 pt-10 pb-5 duration-300 group-has-[:checked]:translate-x-0 lg:w-[280px] lg:translate-x-0">
         <Link
           to="/my-data"
           className="-mx-2 flex items-center p-2"
@@ -72,35 +74,19 @@ export function NavBar() {
             <span>Dev Mode</span>
           </Label>
 
-          <hr className="border-grey-600 border-t" />
-
-          <div className="mb-16">
-            <Button
-              asChild
-              size="lg"
-              variant="discreet_outline"
-              className="w-full"
-            >
-              <a
-                href="https://iexecproject.atlassian.net/servicedesk/customer/portal/4"
-                target="_blank"
-                rel="noopener noreferrer"
-              >
-                Contact Support
-              </a>
-            </Button>
-            <Button
-              asChild
-              size="lg"
-              variant="discreet_outline"
-              className="mt-4 w-full"
-            >
-              <a
-                href="https://iexecproject.atlassian.net/servicedesk/customer/portal/4/group/9/create/71"
-                target="_blank"
-                rel="noopener noreferrer"
-              >
-                Feedback
+          <div
+            className={cn(
+              'radial-bg rounded-20 relative z-0 flex flex-col items-center gap-6 overflow-hidden p-6 text-white',
+              'before:absolute before:inset-px before:-z-10 before:rounded-[calc(20px-1px)] before:bg-[#161a2a]',
+              'after:from-grey-800 after:absolute after:inset-px after:-z-10 after:rounded-[calc(20px-1px)] after:bg-gradient-to-br after:from-50% after:to-[#00115C]'
+            )}
+          >
+            <p className="text-center font-bold md:text-left">
+              Interested by Confidential Messaging?
+            </p>
+            <Button variant="outline" asChild className="w-full max-w-44">
+              <a href={CONTACT_URL} target="_blank" rel="noopener noreferrer">
+                Connect with us
               </a>
             </Button>
           </div>

diff --git a/src/config/config.ts b/src/config/config.ts
@@ -1,6 +1,8 @@
 export const ITEMS_PER_PAGE = 6;
 
 export const LOCAL_STORAGE_PREFIX = 'Web3Messaging';
+export const CONTACT_URL =
+  'https://airtable.com/appDiKrXe5wJgGpdP/pagm2GF2eNdX2ysw3/form';
 
 /**
  * See smart-contract transactions:

diff --git a/src/modules/myData/DialogSendMessageConfirmation.tsx b/src/modules/myData/DialogSendMessageConfirmation.tsx
@@ -0,0 +1,73 @@
+import { CONTACT_URL, LOCAL_STORAGE_PREFIX } from '@/config/config';
+import { useState } from 'react';
+import useLocalStorageState from 'use-local-storage-state';
+import { Button } from '@/components/ui/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { toast } from '@/components/ui/use-toast';
+import { useSendMessageStore } from '@/stores/useSendMessage.store';
+
+export default function DialogSendMessageConfirmation() {
+  const [isSendMessageConfirmationOpen, setIsSendMessageConfirmationOpen] =
+    useState(true);
+  const { lastRecipient, setLastRecipient, isMessageSend, setIsMessageSend } =
+    useSendMessageStore();
+
+  const [isDialogSendMessageViewed, setDialogSendMessageViewed] =
+    useLocalStorageState(`${LOCAL_STORAGE_PREFIX}_setDialogSendMessageViewed`, {
+      defaultValue: false,
+    });
+
+  if (!lastRecipient || isDialogSendMessageViewed) {
+    if (isMessageSend) {
+      toast({
+        title: `You successfully sent a message.`,
+        variant: 'success',
+      });
+      setIsMessageSend(false);
+    }
+    return null;
+  }
+
+  return (
+    <Dialog
+      open={isSendMessageConfirmationOpen}
+      onOpenChange={(openState) => {
+        setIsSendMessageConfirmationOpen(openState);
+        if (!openState) {
+          setDialogSendMessageViewed(true);
+          setLastRecipient('');
+        }
+      }}
+    >
+      <DialogContent>
+        <DialogTitle>
+          <p className="mt-3 text-lg">
+            Your message has been successfully sent
+          </p>
+        </DialogTitle>
+        <div className="mt-4 space-y-2">
+          <p>
+            Your message has been sent to: <span>{lastRecipient}</span>
+          </p>
+          <p>
+            <b>Are you looking for Privacy Preserving Communication ?</b>
+            <br />
+            Explore the possibilities to integrate Confidential Web3 Messaging.
+          </p>
+        </div>
+        <DialogFooter>
+          <Button asChild className="mx-auto w-full max-w-44">
+            <a href={CONTACT_URL} target="_blank" rel="noopener noreferrer">
+              Connect with us
+            </a>
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/src/modules/myData/protectedData/ProtectedDataDetails.tsx b/src/modules/myData/protectedData/ProtectedDataDetails.tsx
@@ -62,12 +62,17 @@ export function ProtectedDataDetails({
         </div>
       </div>
       <div className="radial-bg before:bg-grey-800 md:before:bg-grey-900 rounded-20 relative z-0 flex flex-col gap-6 overflow-hidden p-8 before:absolute before:inset-px before:-z-10 before:rounded-[calc(20px-1px)]">
-        <div className="z-30 grid gap-6">
-          <div className="font-anybody flex items-center gap-4 font-extrabold">
-            <div className="rounded-lg bg-yellow-300/10 p-2.5 text-yellow-300">
-              <Link size={20} />
+        <div className="z-30 grid gap-2">
+          <div className="space-y-1">
+            <div className="font-anybody flex items-center gap-4 font-extrabold">
+              <div className="rounded-lg bg-yellow-300/10 p-2.5 text-yellow-300">
+                <Link size={20} />
+              </div>
+              Encrypted Content
             </div>
-            IPFS link
+            <p className="text-primary/90 text-xs italic">
+              Protected data stored either on IPFS or Arweave
+            </p>
           </div>
           <p>
             <Button

diff --git a/src/stores/useSendMessage.store.ts b/src/stores/useSendMessage.store.ts
@@ -0,0 +1,17 @@
+import { create } from 'zustand';
+
+type SendMessageState = {
+  lastRecipient: string;
+  setLastRecipient: (param: string) => void;
+  isMessageSend: boolean;
+  setIsMessageSend: (param: boolean) => void;
+};
+
+export const useSendMessageStore = create<SendMessageState>((set) => ({
+  lastRecipient: '',
+  setLastRecipient: (sendMessage: string) =>
+    set({ lastRecipient: sendMessage }),
+  isMessageSend: false,
+  setIsMessageSend: (isMessageSend: boolean) =>
+    set({ isMessageSend: isMessageSend }),
+}));
diff --git a/src/views/contact/contactList.tsx b/src/views/contact/contactList.tsx
@@ -18,6 +18,7 @@ import {
   getWeb3mailClient,
   getWeb3telegramClient,
 } from '@/externals/iexecSdkClient';
+import DialogSendMessageConfirmation from '@/modules/myData/DialogSendMessageConfirmation';
 import useUserStore from '@/stores/useUser.store';
 import { chunkArray } from '@/utils/chunkArray';
 import { cn } from '@/utils/style.utils';
@@ -151,6 +152,7 @@ export default function ContactList() {
 
   return (
     <div className="space-y-6">
+      <DialogSendMessageConfirmation />
       <div>
         <h1 className="text-xl font-bold">Send Message to contact</h1>
         <p>Email or telegram that people have authorized you to access</p>

diff --git a/src/views/contact/sendMessage.tsx b/src/views/contact/sendMessage.tsx
@@ -22,10 +22,12 @@ import {
   getWeb3mailClient,
   getWeb3telegramClient,
 } from '@/externals/iexecSdkClient';
+import { useSendMessageStore } from '@/stores/useSendMessage.store';
 import { pluralize } from '@/utils/pluralize';
 
 export default function SendMessage() {
   const navigate = useNavigate();
+  const { setLastRecipient, setIsMessageSend } = useSendMessageStore();
   const { protectedDataAddress } = useParams<{
     protectedDataAddress: Address;
   }>();
@@ -127,15 +129,9 @@ export default function SendMessage() {
       console.error(err);
     },
     onSuccess: () => {
+      setLastRecipient(protectedDataAddress!);
+      setIsMessageSend(protectedDataAddress!);
       navigate('/contacts');
-      toast({
-        title: `You have successfully sent a ${
-          protectedData.data?.schema
-            ? getDataType(protectedData.data.schema)
-            : 'unknown'
-        }.`,
-        variant: 'success',
-      });
     },
   });
 

diff --git a/src/views/myData/protectedData.tsx b/src/views/myData/protectedData.tsx
@@ -130,7 +130,7 @@ export default function ProtectedData() {
           <div>
             <h2 className="text-xl font-bold">Authorized users</h2>
             <p>
-              These are the users who you allowed to access this protected data.
+              These are the users you allowed to access this protected data.
             </p>
           </div>
           <Button
-Original file line number
+Diff line change
@@ Expand Up / @@ -130,7 +130,7 @@ export default function ProtectedData() { @@
               <div>
                 <h2 className="text-xl font-bold">Authorized users</h2>
                 <p>
-                  These are the users who you allowed to access this protected data.
+                  These are the users you allowed to access this protected data.
                 </p>
               </div>
               <Button
@@ Expand Down @@