Skip to content

Commit 01fbbaf

Browse files
ErwanDecosterErwanDecoster
authored
feat: add Mava Widget, replace IPFS by Encrypted Content, add send message confirmation modale (#118)
1 parent 7f24c32 commit 01fbbaf

File tree

9 files changed

+128
-46
lines changed

9 files changed

+128
-46
lines changed

‎index.html‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,8 @@
2929
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
3030
})(window,document,'script','dataLayer','GTM-P7KSD4T');
3131
</script>
32-
<!-- End Google Tag Manager -->
32+
<!-- Mava Widget -->
33+
<script defer src="https://widget.mava.app" widget-version="v2" id="MavaWebChat" enable-sdk="false" data-token="8e4e10aad5750451e8726768e8c639dae54f461beeb176f5ebd687371c9390f2"></script>
3334
</head>
3435
<body>
3536
<noscript>

‎src/components/navBar/NavBar.tsx‎

Lines changed: 17 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
1+
import { CONTACT_URL } from '@/config/config.ts';
12
import { useState } from 'react';
23
import { Link, NavLink } from 'react-router-dom';
34
import { useDevModeStore } from '@/stores/useDevMode.store.ts';
5+
import { cn } from '@/utils/style.utils.ts';
46
import iExecLogo from '../../assets/iexec-logo.svg';
57
import { Button } from '../ui/button.tsx';
68
import { Label } from '../ui/label.tsx';
@@ -15,7 +17,7 @@ export function NavBar() {
1517
};
1618

1719
return (
18-
<div className="group relative z-30 h-full flex-none lg:w-[255px]">
20+
<div className="group relative z-30 h-full flex-none lg:w-[280px]">
1921
<label
2022
className="group/checkbox fixed top-7 right-7 z-30 flex size-5 w-[26px] origin-center transform flex-col justify-between lg:hidden"
2123
htmlFor="menu"
@@ -33,7 +35,7 @@ export function NavBar() {
3335
<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>
3436
<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>
3537
</label>
36-
<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">
38+
<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">
3739
<Link
3840
to="/my-data"
3941
className="-mx-2 flex items-center p-2"
@@ -72,35 +74,19 @@ export function NavBar() {
7274
<span>Dev Mode</span>
7375
</Label>
7476

75-
<hr className="border-grey-600 border-t" />
76-
77-
<div className="mb-16">
78-
<Button
79-
asChild
80-
size="lg"
81-
variant="discreet_outline"
82-
className="w-full"
83-
>
84-
<a
85-
href="https://iexecproject.atlassian.net/servicedesk/customer/portal/4"
86-
target="_blank"
87-
rel="noopener noreferrer"
88-
>
89-
Contact Support
90-
</a>
91-
</Button>
92-
<Button
93-
asChild
94-
size="lg"
95-
variant="discreet_outline"
96-
className="mt-4 w-full"
97-
>
98-
<a
99-
href="https://iexecproject.atlassian.net/servicedesk/customer/portal/4/group/9/create/71"
100-
target="_blank"
101-
rel="noopener noreferrer"
102-
>
103-
Feedback
77+
<div
78+
className={cn(
79+
'radial-bg rounded-20 relative z-0 flex flex-col items-center gap-6 overflow-hidden p-6 text-white',
80+
'before:absolute before:inset-px before:-z-10 before:rounded-[calc(20px-1px)] before:bg-[#161a2a]',
81+
'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]'
82+
)}
83+
>
84+
<p className="text-center font-bold md:text-left">
85+
Interested by Confidential Messaging?
86+
</p>
87+
<Button variant="outline" asChild className="w-full max-w-44">
88+
<a href={CONTACT_URL} target="_blank" rel="noopener noreferrer">
89+
Connect with us
10490
</a>
10591
</Button>
10692
</div>

‎src/config/config.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
export const ITEMS_PER_PAGE = 6;
22

33
export const LOCAL_STORAGE_PREFIX = 'Web3Messaging';
4+
export const CONTACT_URL =
5+
'https://airtable.com/appDiKrXe5wJgGpdP/pagm2GF2eNdX2ysw3/form';
46

57
/**
68
* See smart-contract transactions:

‎src/modules/myData/DialogSendMessageConfirmation.tsx‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
import { CONTACT_URL, LOCAL_STORAGE_PREFIX } from '@/config/config';
2+
import { useState } from 'react';
3+
import useLocalStorageState from 'use-local-storage-state';
4+
import { Button } from '@/components/ui/button';
5+
import {
6+
Dialog,
7+
DialogContent,
8+
DialogFooter,
9+
DialogTitle,
10+
} from '@/components/ui/dialog';
11+
import { toast } from '@/components/ui/use-toast';
12+
import { useSendMessageStore } from '@/stores/useSendMessage.store';
13+
14+
export default function DialogSendMessageConfirmation() {
15+
const [isSendMessageConfirmationOpen, setIsSendMessageConfirmationOpen] =
16+
useState(true);
17+
const { lastRecipient, setLastRecipient, isMessageSend, setIsMessageSend } =
18+
useSendMessageStore();
19+
20+
const [isDialogSendMessageViewed, setDialogSendMessageViewed] =
21+
useLocalStorageState(`${LOCAL_STORAGE_PREFIX}_setDialogSendMessageViewed`, {
22+
defaultValue: false,
23+
});
24+
25+
if (!lastRecipient || isDialogSendMessageViewed) {
26+
if (isMessageSend) {
27+
toast({
28+
title: `You successfully sent a message.`,
29+
variant: 'success',
30+
});
31+
setIsMessageSend(false);
32+
}
33+
return null;
34+
}
35+
36+
return (
37+
<Dialog
38+
open={isSendMessageConfirmationOpen}
39+
onOpenChange={(openState) => {
40+
setIsSendMessageConfirmationOpen(openState);
41+
if (!openState) {
42+
setDialogSendMessageViewed(true);
43+
setLastRecipient('');
44+
}
45+
}}
46+
>
47+
<DialogContent>
48+
<DialogTitle>
49+
<p className="mt-3 text-lg">
50+
Your message has been successfully sent
51+
</p>
52+
</DialogTitle>
53+
<div className="mt-4 space-y-2">
54+
<p>
55+
Your message has been sent to: <span>{lastRecipient}</span>
56+
</p>
57+
<p>
58+
<b>Are you looking for Privacy Preserving Communication ?</b>
59+
<br />
60+
Explore the possibilities to integrate Confidential Web3 Messaging.
61+
</p>
62+
</div>
63+
<DialogFooter>
64+
<Button asChild className="mx-auto w-full max-w-44">
65+
<a href={CONTACT_URL} target="_blank" rel="noopener noreferrer">
66+
Connect with us
67+
</a>
68+
</Button>
69+
</DialogFooter>
70+
</DialogContent>
71+
</Dialog>
72+
);
73+
}

‎src/modules/myData/protectedData/ProtectedDataDetails.tsx‎

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -62,12 +62,17 @@ export function ProtectedDataDetails({
6262
</div>
6363
</div>
6464
<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)]">
65-
<div className="z-30 grid gap-6">
66-
<div className="font-anybody flex items-center gap-4 font-extrabold">
67-
<div className="rounded-lg bg-yellow-300/10 p-2.5 text-yellow-300">
68-
<Link size={20} />
65+
<div className="z-30 grid gap-2">
66+
<div className="space-y-1">
67+
<div className="font-anybody flex items-center gap-4 font-extrabold">
68+
<div className="rounded-lg bg-yellow-300/10 p-2.5 text-yellow-300">
69+
<Link size={20} />
70+
</div>
71+
Encrypted Content
6972
</div>
70-
IPFS link
73+
<p className="text-primary/90 text-xs italic">
74+
Protected data stored either on IPFS or Arweave
75+
</p>
7176
</div>
7277
<p>
7378
<Button

‎src/stores/useSendMessage.store.ts‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import { create } from 'zustand';
2+
3+
type SendMessageState = {
4+
lastRecipient: string;
5+
setLastRecipient: (param: string) => void;
6+
isMessageSend: boolean;
7+
setIsMessageSend: (param: boolean) => void;
8+
};
9+
10+
export const useSendMessageStore = create<SendMessageState>((set) => ({
11+
lastRecipient: '',
12+
setLastRecipient: (sendMessage: string) =>
13+
set({ lastRecipient: sendMessage }),
14+
isMessageSend: false,
15+
setIsMessageSend: (isMessageSend: boolean) =>
16+
set({ isMessageSend: isMessageSend }),
17+
}));

‎src/views/contact/contactList.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ import {
1818
getWeb3mailClient,
1919
getWeb3telegramClient,
2020
} from '@/externals/iexecSdkClient';
21+
import DialogSendMessageConfirmation from '@/modules/myData/DialogSendMessageConfirmation';
2122
import useUserStore from '@/stores/useUser.store';
2223
import { chunkArray } from '@/utils/chunkArray';
2324
import { cn } from '@/utils/style.utils';
@@ -151,6 +152,7 @@ export default function ContactList() {
151152

152153
return (
153154
<div className="space-y-6">
155+
<DialogSendMessageConfirmation />
154156
<div>
155157
<h1 className="text-xl font-bold">Send Message to contact</h1>
156158
<p>Email or telegram that people have authorized you to access</p>

‎src/views/contact/sendMessage.tsx‎

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -22,10 +22,12 @@ import {
2222
getWeb3mailClient,
2323
getWeb3telegramClient,
2424
} from '@/externals/iexecSdkClient';
25+
import { useSendMessageStore } from '@/stores/useSendMessage.store';
2526
import { pluralize } from '@/utils/pluralize';
2627

2728
export default function SendMessage() {
2829
const navigate = useNavigate();
30+
const { setLastRecipient, setIsMessageSend } = useSendMessageStore();
2931
const { protectedDataAddress } = useParams<{
3032
protectedDataAddress: Address;
3133
}>();
@@ -127,15 +129,9 @@ export default function SendMessage() {
127129
console.error(err);
128130
},
129131
onSuccess: () => {
132+
setLastRecipient(protectedDataAddress!);
133+
setIsMessageSend(protectedDataAddress!);
130134
navigate('/contacts');
131-
toast({
132-
title: `You have successfully sent a ${
133-
protectedData.data?.schema
134-
? getDataType(protectedData.data.schema)
135-
: 'unknown'
136-
}.`,
137-
variant: 'success',
138-
});
139135
},
140136
});
141137

‎src/views/myData/protectedData.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -130,7 +130,7 @@ export default function ProtectedData() {
130130
<div>
131131
<h2 className="text-xl font-bold">Authorized users</h2>
132132
<p>
133-
These are the users who you allowed to access this protected data.
133+
These are the users you allowed to access this protected data.
134134
</p>
135135
</div>
136136
<Button

0 commit comments

Comments
 (0)