feat(email management): add functionality for managing email subscriptions

.eslintrc-auto-import.json

@@ -64,7 +64,6 @@
     "useCssModule": true,
     "useCssVars": true,
     "useDelegate": true,
-    "useEmailSubscription": true,
     "useEns": true,
     "useExtendedSpaces": true,
     "useFlashNotification": true,
@@ -114,6 +113,8 @@
     "watchSyncEffect": true,
     "watchTxStatus": true,
     "toValue": true,
-    "useFlaggedMessageStatus": true
+    "useFlaggedMessageStatus": true,
+    "useEmailSubscription": true,
+    "useEmailFetchClient": true
   }
 }

package.json

@@ -44,7 +44,7 @@
     "@snapshot-labs/lock": "^0.1.1015",
     "@snapshot-labs/pineapple": "^0.1.0-beta.1",
     "@snapshot-labs/snapshot.js": "^0.4.86",
-    "@snapshot-labs/tune": "^0.1.21",
+    "@snapshot-labs/tune": "0.1.24",
     "@vue/apollo-composable": "4.0.0-beta.4",
     "@vueuse/core": "^10.1.2",
     "@vueuse/head": "^1.1.26",

src/components/MenuAccount.vue

@@ -8,8 +8,12 @@ const { t } = useI18n();
 
 const { domain } = useApp();
 const { logout } = useWeb3();
+const { isSubscribed, loadEmailSubscriptions } = useEmailSubscription();
+
+onMounted(loadEmailSubscriptions);
+
 const router = useRouter();
-const modalEmailSubscriptionOpen = ref(false);
+const showModalEmail = ref(false);
 
 function handleAction(e) {
   if (e === 'viewProfile')
@@ -26,7 +30,7 @@ function handleAction(e) {
       name: 'delegate'
     });
   if (e === 'subscribeEmail') {
-    modalEmailSubscriptionOpen.value = true;
+    showModalEmail.value = true;
     return true;
   }
   return logout();
@@ -53,7 +57,9 @@ function handleAction(e) {
           extras: { icon: 'switch' }
         },
         {
-          text: t('emailSubscription.subscribe'),
+          text: isSubscribed
+            ? t('emailSubscription.manage')
+            : t('emailSubscription.subscribe'),
           action: 'subscribeEmail',
           extras: { icon: 'mail' }
         },
@@ -89,11 +95,17 @@ function handleAction(e) {
       </template>
     </BaseMenu>
   </div>
+
   <teleport to="#modal">
     <ModalEmailSubscription
-      :open="modalEmailSubscriptionOpen"
-      :address="address"
-      @close="modalEmailSubscriptionOpen = false"
+      v-if="!isSubscribed"
+      :open="showModalEmail"
+      @close="showModalEmail = false"
+    />
+    <ModalEmailManagement
+      v-else
+      :open="showModalEmail"
+      @close="showModalEmail = false"
     />
   </teleport>
 </template>

src/components/ModalEmailManagement.vue

@@ -0,0 +1,84 @@
+<script setup lang="ts">
+defineProps<{
+  open: boolean;
+}>();
+
+const emit = defineEmits(['close']);
+
+const {
+  loading,
+  clientSubscriptions,
+  shouldRemoveEmail,
+  updateSubscriptions: update,
+  isSubscribed
+} = useEmailSubscription();
+const { t } = useI18n();
+
+const canRemoveEmail = computed(() => {
+  const { newProposal, closedProposal, summary } = clientSubscriptions.value;
+  return !newProposal && !closedProposal && !summary;
+});
+
+const updateSubscriptions = (key, value) => {
+  clientSubscriptions.value = { ...clientSubscriptions.value, [key]: value };
+};
+
+const submit = async () => {
+  await update();
+  // TODO: canRemoveEmail check should be removed when `shouldRemoveEmail` will be implemented
+  if (shouldRemoveEmail.value && canRemoveEmail.value) {
+    isSubscribed.value = false;
+    emit('close');
+  }
+};
+</script>
+
+<template>
+  <BaseModal :open="open" max-height="510px" @close="$emit('close')">
+    <template #header>
+      <div class="flex flex-row items-center justify-center">
+        <h3>{{ $t('emailManagement.title') }}</h3>
+      </div>
+    </template>
+
+    <div class="mx-4 mb-4 mt-2 text-center">
+      <p class="text-sm text-skin-text opacity-60">
+        {{ t('emailManagement.subtitle') }}
+      </p>
+    </div>
+
+    <form class="mx-6 my-4 flex flex-col space-y-4" @submit.prevent="submit">
+      <TuneSwitch
+        :model-value="clientSubscriptions.newProposal"
+        :label="t('emailManagement.optionNewProposal')"
+        :sublabel="t('emailManagement.optionNewProposalDescription')"
+        @update:model-value="updateSubscriptions('newProposal', $event)"
+      />
+
+      <TuneSwitch
+        :model-value="clientSubscriptions.closedProposal"
+        :label="t('emailManagement.optionClosedProposal')"
+        :sublabel="t('emailManagement.optionClosedProposalDescription')"
+        @update:model-value="updateSubscriptions('closedProposal', $event)"
+      />
+
+      <TuneSwitch
+        :model-value="clientSubscriptions.summary"
+        :label="t('emailManagement.optionSummary')"
+        :sublabel="t('emailManagement.optionSummaryDescription')"
+        @update:model-value="updateSubscriptions('summary', $event)"
+      />
+
+      <TuneCheckbox
+        v-if="canRemoveEmail"
+        v-model="shouldRemoveEmail"
+        :hint="t('emailManagement.removeEmail')"
+        class="pointer-events-none ml-3 text-sm opacity-60"
+      />
+
+      <BaseButton class="mt-6 w-full" primary type="submit" :loading="loading">
+        {{ t('emailManagement.updatePreferences') }}
+      </BaseButton>
+    </form>
+  </BaseModal>
+</template>

src/components/ModalEmailSubscription.vue

@@ -1,22 +1,29 @@
 <script setup lang="ts">
-const props = defineProps<{
+defineProps<{
   open: boolean;
-  address: string;
 }>();
 
 const emit = defineEmits(['close']);
+const { web3Account } = useWeb3();
 const email = ref('');
-const { subscribe, reset, postSubscribeState, status, loading, Status } =
-  useEmailSubscription();
+const {
+  subscribe,
+  reset,
+  postSubscribeState,
+  isSuccessful,
+  loading,
+  loadEmailSubscriptions
+} = useEmailSubscription();
 
 function close() {
   reset();
   email.value = '';
   emit('close');
+  loadEmailSubscriptions();
 }
 
 function submit() {
-  subscribe(email.value, props.address);
+  subscribe(email.value, web3Account.value);
 }
 </script>
 
@@ -27,7 +34,7 @@ function submit() {
         <h3>{{ $t('emailSubscription.title') }}</h3>
       </div>
     </template>
-    <div v-if="status === Status.success" class="m-4 text-center">
+    <div v-if="isSuccessful" class="m-4 text-center">
       <i-ho-check-circle
         class="mx-auto my-4 text-center text-[3em] text-green"
       />
@@ -46,7 +53,7 @@ function submit() {
     <div v-else class="m-4">
       {{ $t('emailSubscription.description') }}
     </div>
-    <form v-if="status !== Status.success" class="m-4" @submit.prevent="submit">
+    <form v-if="!isSuccessful" class="m-4" @submit.prevent="submit">
       <BaseInput
         v-model="email"
         placeholder="Your email"
@@ -73,7 +80,7 @@ function submit() {
       </BaseButton>
     </form>
 
-    <template v-if="status === Status.success" #footer>
+    <template v-if="isSuccessful" #footer>
       <BaseButton class="w-full" primary @click="close">
         {{ $t('close') }}
       </BaseButton>

src/components/NavbarAccount.vue

@@ -25,7 +25,7 @@ watchEffect(() => {
 </script>
 
 <template>
-  <template v-if="auth.isAuthenticated.value">
+  <template v-if="auth.isAuthenticated && web3Account">
     <MenuAccount :address="web3Account" @switchWallet="modalAccountOpen = true">
       <BaseButton
         :loading="web3.authLoading || loadingProfiles || reloadingProfile"

src/composables/useEmailFetchClient.ts

@@ -0,0 +1,77 @@
+import sign, { DataType } from '@/helpers/sign';
+import { createFetch } from '@vueuse/core';
+
+const SubscribeSchema: DataType = {
+  Subscribe: [
+    { name: 'address', type: 'address' },
+    { name: 'email', type: 'string' }
+  ]
+};
+
+const UpdateSubscriptionsSchema: DataType = {
+  Subscriptions: [
+    { name: 'address', type: 'address' },
+    { name: 'email', type: 'string' },
+    { name: 'subscriptions', type: 'string[]' }
+  ]
+};
+
+const useEmailFetch = createFetch({
+  baseUrl: import.meta.env.VITE_ENVELOP_URL,
+  options: {
+    headers: {
+      'Content-Type': 'application/json'
+    }
+  }
+});
+
+export function useEmailFetchClient() {
+  function signWithAlias(message, typesSchema) {
+    const { aliasWallet, actionWithAlias } = useAliasAction();
+
+    return actionWithAlias(() => {
+      const wallet = aliasWallet.value;
+      const address = aliasWallet.value.address;
+      return sign(wallet, address, message, typesSchema);
+    });
+  }
+
+  const fetchSubscriptions = body => {
+    return useEmailFetch('/subscriber').post(body).json();
+  };
+
+  const subscribeWithEmail = async unsignedParams => {
+    const signature = await signWithAlias(unsignedParams, SubscribeSchema);
+    const body = {
+      method: 'snapshot.subscribe',
+      params: {
+        ...unsignedParams,
+        signature
+      }
+    };
+
+    return useEmailFetch('/').post(body).json();
+  };
+
+  const updateEmailSubscriptions = async unsignedParams => {
+    const signature = await signWithAlias(
+      unsignedParams,
+      UpdateSubscriptionsSchema
+    );
+    const body = {
+      method: 'snapshot.update',
+      params: {
+        ...unsignedParams,
+        signature
+      }
+    };
+
+    return useEmailFetch('/').post(body).json();
+  };
+
+  return {
+    fetchSubscriptions,
+    subscribeWithEmail,
+    updateEmailSubscriptions
+  };
+}