feat: add ModalVoteConfirmOnSafe

apps/ui/src/components/Modal/Vote.vue

@@ -41,6 +41,7 @@ const formErrors = ref({} as Record<string, any>);
 const formValidated = ref(false);
 const modalTransactionOpen = ref(false);
 const modalShareOpen = ref(false);
+const modalValidateOnSafeOpen = ref(false);
 const txId = ref<string | null>(null);
 const selectedChoice = ref<Choice | null>(null);
 
@@ -103,9 +104,14 @@ async function voteFn() {
 }
 
 async function handleConfirmed(tx?: string | null) {
-  if (tx) txId.value = tx;
   modalTransactionOpen.value = false;
-  modalShareOpen.value = true;
+
+  if (tx) {
+    txId.value = tx;
+    modalShareOpen.value = true;
+  } else {
+    modalValidateOnSafeOpen.value = true;
+  }
 
   emit('voted');
   emit('close');
@@ -249,5 +255,9 @@ watchEffect(async () => {
       }"
       @close="modalShareOpen = false"
     />
+    <ModalVoteConfirmOnSafe
+      :open="modalValidateOnSafeOpen"
+      @close="modalValidateOnSafeOpen = false"
+    />
   </teleport>
 </template>

apps/ui/src/components/Modal/VoteConfirmOnSafe.vue

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+type Messages = {
+  title?: string;
+  subtitle?: string;
+};
+
+const props = withDefaults(
+  defineProps<{
+    open: boolean;
+    messages?: Messages;
+    showIcon?: boolean;
+  }>(),
+  {
+    messages: () => ({
+      title: 'Confirm vote in Safe app',
+      subtitle: 'Go back to Safe app to confirm your vote'
+    }),
+    showIcon: true
+  }
+);
+
+const emit = defineEmits<{
+  (e: 'close'): void;
+}>();
+</script>
+
+<template>
+  <UiModal :open="open" class="text-skin-heading" @close="emit('close')">
+    <div
+      class="flex flex-col space-y-3 px-4 py-5 text-center items-center text-skin-text"
+    >
+      <div class="bg-skin-text rounded-full p-[12px]">
+        <IS-check :width="28" :height="28" class="text-skin-bg" />
+      </div>
+
+      <div class="flex flex-col space-y-1 leading-6">
+        <h4
+          class="font-semibold text-skin-heading text-lg"
+          v-text="messages.title"
+        />
+        <div v-if="messages.subtitle" v-text="messages.subtitle" />
+      </div>
+
+      <div class="pt-2">
+        You can use
+        <AppLink
+          to="https://github.com/snapshot-labs/hash-verifier"
+          class="inline-flex items-center"
+        >
+          hash-verifier <IH-arrow-sm-right class="inline-block -rotate-45" />
+        </AppLink>
+        to validate vote data.
+      </div>
+    </div>
+  </UiModal>
+</template>