fix: de-bounce buttons on Governance actions (#5531)

* chore: de-bounce action button for proposal registration popup * chore: use consistent wording with other spots in app * fix: handle errors for proposal and node * fix isBusy Signed-off-by: Jean Ribeiro <contact@jeanribeiro.dev> Signed-off-by: Jean Ribeiro <contact@jeanribeiro.dev> Co-authored-by: Jean Ribeiro <contact@jeanribeiro.dev> Co-authored-by: Jean Ribeiro <iamjeanribeiro@gmail.com>
iotaledger · Dec 31, 2022 · 3a765af · 3a765af
1 parent 39ee006
commit 3a765af
Show file tree

Hide file tree

Showing 6 changed files with 49 additions and 16 deletions.
diff --git a/packages/shared/components/popups/ManageVotingPowerPopup.svelte b/packages/shared/components/popups/ManageVotingPowerPopup.svelte
@@ -17,11 +17,11 @@
     $: votingPower = parseInt($selectedAccount?.votingPower, 10)
     $: isTransferring = $selectedAccount?.isTransferring
 
-    function handleBack(): void {
+    function onCancelClick(): void {
         closePopup()
     }
 
-    async function handleConfirm(): Promise<void> {
+    async function onConfirmClick(): Promise<void> {
         try {
             await assetAmountInput?.validate()
             await checkActiveProfileAuth(async () => {
@@ -49,13 +49,13 @@
     <TextHint info text={localize('popups.manageVotingPower.hint')} />
 </div>
 <div class="flex flex-row flex-nowrap w-full space-x-4">
-    <Button outline classes="w-full" disabled={isTransferring} onClick={handleBack}>
-        {localize('actions.back')}
+    <Button outline classes="w-full" disabled={isTransferring} onClick={onCancelClick}>
+        {localize('actions.cancel')}
     </Button>
     <Button
         classes="w-full"
         disabled={$selectedAccount.isTransferring}
-        onClick={handleConfirm}
+        onClick={onConfirmClick}
         isBusy={$selectedAccount.isTransferring}
     >
         {localize('actions.confirm')}

diff --git a/packages/shared/components/popups/RegisterProposalPopup.svelte b/packages/shared/components/popups/RegisterProposalPopup.svelte
@@ -1,11 +1,12 @@
 <script lang="typescript">
-    import { Button, TextInput, Text, TextType } from 'shared/components'
+    import { Button, HTMLButtonType, TextInput, Text, TextType } from 'shared/components'
     import type { Auth } from '@iota/wallet'
     import { showAppNotification } from '@auxiliary/notification/actions'
     import { closePopup, openPopup } from '@auxiliary/popup/actions'
     import { handleError } from '@core/error/handlers/handleError'
     import { localize } from '@core/i18n'
     import { registerParticipationEvent } from '@core/profile-manager/api'
+    import { truncateString } from '@core/utils/string'
     import { isValidUrl } from '@core/utils/validation'
 
     export let eventId: string
@@ -14,20 +15,43 @@
     let eventIdError: string
     let nodeUrlError: string
 
+    let isBusy = false
+
     $: disabled = !eventId || !nodeUrl
 
-    function handleCancel(): void {
+    function onCloseClick(): void {
         closePopup()
     }
 
-    async function handleConfirm(): Promise<void> {
+    async function onConfirmClick(): Promise<void> {
         try {
+            isBusy = true
+
             await Promise.all([validateEventId(), validateNodeUrl()])
             await registerParticipationWrapper()
+
+            isBusy = false
         } catch (err) {
-            const isAuthenticationError = err?.error?.match(/(username)|(password)|(jwt)/g).length > 0
+            isBusy = false
+            const isAuthenticationError = err?.error?.match(/(username)|(password)|(jwt)/g)?.length > 0
+            const isEventError = err?.error?.match(/(the requested data)|(was not found)/)?.length > 0
+            const isNodeError = err?.error?.match(/(failed to lookup address information)|(dns error)/)?.length > 0
             if (isAuthenticationError) {
                 openNodeAuthRequiredPopup()
+            } else if (isEventError) {
+                showAppNotification({
+                    type: 'error',
+                    alert: true,
+                    message: localize('error.governance.unableToRegisterProposal.long', {
+                        values: { proposalId: truncateString(eventId) },
+                    }),
+                })
+            } else if (isNodeError) {
+                showAppNotification({
+                    type: 'error',
+                    alert: true,
+                    message: localize('error.node.dns'),
+                })
             } else if (!nodeUrlError && !eventIdError) {
                 handleError(err)
             }
@@ -74,7 +98,7 @@
     }
 </script>
 
-<register-proposal>
+<form id="register-proposal" on:submit|preventDefault={onConfirmClick}>
     <Text type={TextType.h3} classes="mb-6">{localize('popups.registerProposal.title')}</Text>
     <Text fontSize="15">{localize('popups.registerProposal.body')}</Text>
     <div class="flex flex-col w-full space-y-4 mt-4">
@@ -92,7 +116,9 @@
         />
     </div>
     <div class="flex w-full space-x-4 mt-6">
-        <Button outline classes="w-full" onClick={handleCancel}>{localize('actions.cancel')}</Button>
-        <Button {disabled} classes="w-full" onClick={handleConfirm}>{localize('actions.confirm')}</Button>
+        <Button outline classes="w-full" onClick={onCloseClick}>{localize('actions.cancel')}</Button>
+        <Button disabled={disabled || isBusy} {isBusy} classes="w-full" type={HTMLButtonType.Submit}>
+            {localize('actions.confirm')}
+        </Button>
     </div>
-</register-proposal>
+</form>
diff --git a/packages/shared/lib/contexts/governance/interfaces/proposal-state.interface.ts b/packages/shared/lib/contexts/governance/interfaces/proposal-state.interface.ts
@@ -2,7 +2,7 @@ import type { EventStatus } from '@iota/wallet'
 
 export interface IProposalState {
     [profileId: string]: {
-        [eventId: string]: {
+        [proposalId: string]: {
             state: EventStatus
             nodeUrl: string
         }

diff --git a/packages/shared/lib/core/error/handlers/handleError.ts b/packages/shared/lib/core/error/handlers/handleError.ts
@@ -1,5 +1,6 @@
 import { WalletRsError } from '../enums'
 import { IError } from '../interfaces'
+
 import { handleGenericError } from './handleGenericError'
 import { handleWalletRsError } from './walletRs'
 

diff --git a/packages/shared/lib/core/error/handlers/handleGenericError.ts b/packages/shared/lib/core/error/handlers/handleGenericError.ts
@@ -1,5 +1,5 @@
-import { IError } from '../interfaces'
 import { logAndNotifyError } from '../actions'
+import { IError } from '../interfaces'
 
 export function handleGenericError(error: IError | string): void {
     let message: string

diff --git a/packages/shared/locales/en.json b/packages/shared/locales/en.json
@@ -1738,7 +1738,7 @@
         },
         "node": {
             "invalid": "Please enter a valid URL.",
-            "dns": "Could not find DNS resolution for node.",
+            "dns": "Unable to find DNS resolution for node",
             "timedOut": "The connection timed out.",
             "refused": "The connection was refused.",
             "handshake": "Could not complete handshake with node.",
@@ -1853,6 +1853,12 @@
                 "short": "Unable to load",
                 "long": "An error occurred while loading the NFT"
             }
+        },
+        "governance": {
+            "unableToRegisterProposal": {
+                "short": "Unable to register proposal",
+                "long": "An error occurred while trying to register proposal {proposalId}"
+            }
         }
     },
     "warning": {