feat: add download votes button

apps/ui/src/composables/useReportDownload.ts

@@ -0,0 +1,50 @@
+import { SIDEKICK_URL } from '@/helpers/constants';
+import pkg from '@/../package.json';
+
+export function useReportDownload() {
+  const isDownloadingVotes = ref(false);
+
+  async function downloadFile(blob: Blob, fileName: string) {
+    const href = URL.createObjectURL(blob);
+    const a = Object.assign(document.createElement('a'), {
+      href,
+      style: 'display:none',
+      download: fileName
+    });
+    document.body.appendChild(a);
+    a.click();
+    URL.revokeObjectURL(href);
+    a.remove();
+  }
+
+  async function downloadVotes(proposalId: string) {
+    isDownloadingVotes.value = true;
+
+    try {
+      const response = await fetch(`${SIDEKICK_URL}/api/votes/${proposalId}`, {
+        method: 'POST'
+      });
+
+      if (response.status !== 200) {
+        const data = await response.json();
+
+        // NOTE: This is a temporary workaround until the API is updated to return a proper error object
+        if (data.error) {
+          throw new Error(data.error.message);
+        } else {
+          throw new Error('PENDING_GENERATION');
+        }
+      }
+
+      downloadFile(await response.blob(), `${pkg.name}-report-${proposalId}`);
+      return true;
+    } finally {
+      isDownloadingVotes.value = false;
+    }
+  }
+
+  return {
+    downloadVotes,
+    isDownloadingVotes
+  };
+}

apps/ui/src/views/Proposal.vue

@@ -19,7 +19,9 @@ const {
 const { setTitle } = useTitle();
 const { web3 } = useWeb3();
 const { modalAccountOpen } = useModal();
+const uiStore = useUiStore();
 const termsStore = useTermsStore();
+const { isDownloadingVotes, downloadVotes } = useReportDownload();
 
 const modalOpenVote = ref(false);
 const modalOpenTerms = ref(false);
@@ -86,6 +88,28 @@ async function handleVoteClick(choice: Choice) {
   modalOpenVote.value = true;
 }
 
+async function handleDownloadVotes() {
+  if (!proposal.value) return;
+
+  try {
+    await downloadVotes(proposal.value.id);
+  } catch (e: unknown) {
+    if (e instanceof Error) {
+      if (e.message === 'PENDING_GENERATION') {
+        return uiStore.addNotification(
+          'success',
+          'Your report is currently being generated. It may take a few minutes. Please check back shortly.'
+        );
+      }
+
+      uiStore.addNotification(
+        'error',
+        "We're having trouble connecting to the server responsible for downloads"
+      );
+    }
+  }
+}
+
 function handleAcceptTerms() {
   termsStore.accept(props.space);
   handleVoteClick(selectedChoice.value!);
@@ -373,6 +397,23 @@ watchEffect(() => {
               :proposal="proposal"
               :decimals="votingPowerDecimals"
             />
+            <button
+              v-if="
+                proposal.network === 's' &&
+                ['passed', 'rejected', 'executed'].includes(proposal.state)
+              "
+              class="mt-2.5 inline-flex items-center gap-2 hover:text-skin-link"
+              @click="handleDownloadVotes"
+            >
+              <template v-if="isDownloadingVotes">
+                <UiLoading :size="18" />
+                Downloading votes
+              </template>
+              <template v-else>
+                <IS-arrow-down-tray />
+                Download votes
+              </template>
+            </button>
           </div>
           <div v-if="space.labels?.length && proposal.labels?.length">
             <h4 class="mb-2.5 eyebrow flex items-center gap-2">