chore: rebrand vote for proposal pop-up (#1950)

bloomwalletio · Feb 15, 2024 · 5f797e9 · 5f797e9
1 parent 3a25134
commit 5f797e9
Showing 1 changed file with 42 additions and 42 deletions.
diff --git a/packages/desktop/components/popup/popups/VoteForProposalPopup.svelte b/packages/desktop/components/popup/popups/VoteForProposalPopup.svelte
@@ -1,19 +1,19 @@
 <script lang="ts">
-    import { Alert, Button, Table } from '@bloomwalletio/ui'
+    import { Alert, Table } from '@bloomwalletio/ui'
     import { vote } from '@contexts/governance/actions'
     import { ABSTAIN_VOTE_VALUE } from '@contexts/governance/constants'
     import { selectedProposal } from '@contexts/governance/stores'
     import { selectedAccount } from '@core/account/stores'
     import { localize } from '@core/i18n'
-    import { checkActiveProfileAuth, getBaseToken } from '@core/profile/actions'
+    import { checkActiveProfileAuthAsync, getBaseToken } from '@core/profile/actions'
     import { formatTokenAmountBestMatch } from '@core/token'
     import { PopupId, closePopup, openPopup } from '@desktop/auxiliary/popup'
-    import { FontWeight, Text, TextType } from '@ui'
+    import PopupTemplate from '../PopupTemplate.svelte'
 
     export let selectedAnswerValues: number[]
 
-    $: formattedVotingPower = formatTokenAmountBestMatch(Number($selectedAccount?.votingPower), getBaseToken())
-    $: hasVotingPower = Number($selectedAccount?.votingPower) > 0
+    $: formattedVotingPower = formatTokenAmountBestMatch($selectedAccount?.votingPower, getBaseToken())
+    $: hasVotingPower = $selectedAccount?.votingPower > 0
 
     $: hasGovernanceTransactionInProgress =
         $selectedAccount?.hasVotingPowerTransactionInProgress || $selectedAccount?.hasVotingTransactionInProgress
@@ -23,32 +23,48 @@
 
     async function onSubmit(): Promise<void> {
         if (hasVotingPower) {
-            await checkActiveProfileAuth(async () => {
-                await vote($selectedProposal?.id, selectedAnswerValues)
-                closePopup()
-            })
+            try {
+                await checkActiveProfileAuthAsync()
+            } catch {
+                return
+            }
+
+            await vote($selectedProposal?.id, selectedAnswerValues)
+            closePopup()
         } else {
             openPopup({ id: PopupId.ManageVotingPower })
         }
     }
+
+    function onCancelClick(): void {
+        closePopup()
+    }
 </script>
 
-<form
-    id="vote-proposal"
-    on:submit|preventDefault={onSubmit}
-    class="w-full h-full space-y-6 flex flex-auto flex-col shrink-0"
+<PopupTemplate
+    title={localize('popups.voteForProposal.title')}
+    description={localize('popups.voteForProposal.body', {
+        values: {
+            proposal: $selectedProposal?.title,
+        },
+    })}
+    backButton={{
+        text: localize('actions.cancel'),
+        onClick: onCancelClick,
+        disabled: hasGovernanceTransactionInProgress,
+    }}
+    continueButton={{
+        text: hasVotingPower ? localize('actions.vote') : localize('views.governance.votingPower.manage'),
+        form: 'vote-proposal',
+        type: 'submit',
+    }}
+    busy={hasGovernanceTransactionInProgress}
 >
-    <Text type={TextType.h4} fontWeight={FontWeight.semibold} classes="text-left">
-        {localize('popups.voteForProposal.title')}
-    </Text>
-    <Text fontSize="14" classes="text-left break-words">
-        {localize('popups.voteForProposal.body', {
-            values: {
-                proposal: $selectedProposal?.title,
-            },
-        })}
-    </Text>
-    <div class="space-y-5">
+    <form
+        id="vote-proposal"
+        on:submit|preventDefault={onSubmit}
+        class="w-full h-full space-y-4 flex flex-auto flex-col shrink-0"
+    >
         <Table items={[{ key: localize('popups.voteForProposal.key'), value: formattedVotingPower }]} />
         {#if !hasVotingPower}
             <Alert variant="danger" text={localize('popups.voteForProposal.noVotingPower')} />
@@ -60,21 +76,5 @@
                 })}
             />
         {/if}
-    </div>
-    <popup-buttons class="flex flex-row flex-nowrap w-full space-x-4">
-        <Button
-            width="full"
-            disabled={hasGovernanceTransactionInProgress}
-            variant="outlined"
-            on:click={() => closePopup()}
-            text={localize('actions.cancel')}
-        />
-        <Button
-            type="submit"
-            width="full"
-            disabled={hasGovernanceTransactionInProgress}
-            busy={hasGovernanceTransactionInProgress}
-            text={hasVotingPower ? localize('actions.vote') : localize('views.governance.votingPower.manage')}
-        />
-    </popup-buttons>
-</form>
+    </form>
+</PopupTemplate>