feat: add i18n to confirmation dialog and handle API error cases

input-output-hk · Nov 21, 2024 · 29bfcb2 · 29bfcb2
1 parent d2233a2
commit 29bfcb2
Show file tree

Hide file tree

Showing 10 changed files with 169 additions and 37 deletions.
diff --git a/source/renderer/app/api/api.ts b/source/renderer/app/api/api.ts
@@ -1292,7 +1292,6 @@ export default class AdaApi {
       logger.debug('AdaApi::constructTransaction error', {
         error,
       });
-      console.log('!DEBUG', error);
 
       throw new ApiError(error);
     }

diff --git a/source/renderer/app/components/voting/voting-governance/VotingPowerDelegation.messages.ts b/source/renderer/app/components/voting/voting-governance/VotingPowerDelegation.messages.ts
@@ -77,4 +77,14 @@ export const messages = defineMessages({
     defaultMessage: '!!!Submit',
     description: 'Label for the submit button on the governance page',
   },
+  initializeTxErrorGeneric: {
+    id: 'voting.governance.initializeTxError.generic',
+    defaultMessage: '!!!Could not initialize transaction. Please try again!',
+    description: 'Generic error for initialize transaction',
+  },
+  initializeTxErrorSameVote: {
+    id: 'voting.governance.initializeTxError.sameVote',
+    defaultMessage: '!!!Chosen same value as previously',
+    description: 'Chosen same value as previously',
+  },
 });
diff --git a/source/renderer/app/components/voting/voting-governance/VotingPowerDelegation.scss b/source/renderer/app/components/voting/voting-governance/VotingPowerDelegation.scss
@@ -1,11 +1,6 @@
 @import '../votingConfig';
 @import '../../../themes/mixins/error-message.scss';
 
-.generalError {
-  @include error-message;
-  margin-top: 28px;
-}
-
 .component {
   flex: 1 0 0;
   padding: 20px;
@@ -57,12 +52,21 @@
   }
 }
 
+.generalError {
+  @include error-message;
+}
+
 .voteTypeSelect,
 .drepInput,
-.voteSubmit {
+.generalError {
   margin-top: 40px;
 }
 
+.generalError,
+.voteSubmit {
+  margin-top: 28px;
+}
+
 .voteSubmit {
   width: 100%;
 }
diff --git a/source/renderer/app/components/voting/voting-governance/VotingPowerDelegation.tsx b/source/renderer/app/components/voting/voting-governance/VotingPowerDelegation.tsx
@@ -16,14 +16,16 @@ import StakePool from '../../../domains/StakePool';
 import ItemsDropdown from '../../widgets/forms/ItemsDropdown';
 import { assertIsBech32WithPrefix } from '../../../../../common/utils/assertIsBech32WithPrefix';
 import { Separator } from '../../widgets/separator/Separator';
+import { InitializeVPDelegationTxError } from '../../../stores/VotingStore';
 
 type Props = {
   getStakePoolById: (...args: Array<any>) => any;
   initiateTransaction: (params: {
     chosenOption: string;
     wallet: Wallet;
   }) => Promise<
-    { success: true; fees: BigNumber } | { success: false; error: string }
+    | { success: true; fees: BigNumber }
+    | { success: false; errorCode: InitializeVPDelegationTxError }
   >;
   intl: Intl;
   onExternalLinkClick: (...args: Array<any>) => any;
@@ -53,7 +55,7 @@ type Form = Omit<FormData, 'selectedWallet'> & {
 };
 
 type FormWithError = Omit<FormData, 'status'> & {
-  txInitError: string;
+  txInitError: InitializeVPDelegationTxError;
   status: 'form-with-error';
 };
 
@@ -81,6 +83,14 @@ const isDrepIdValid = (drepId: string) => {
   return true;
 };
 
+const mapOfTxErrorCodeToIntl: Record<
+  InitializeVPDelegationTxError,
+  typeof messages[keyof typeof messages]
+> = {
+  generic: messages.initializeTxErrorGeneric,
+  same_vote: messages.initializeTxErrorSameVote,
+};
+
 function VotingPowerDelegation({
   getStakePoolById,
   initiateTransaction,
@@ -109,6 +119,7 @@ function VotingPowerDelegation({
   const submitButtonDisabled =
     !formIsValid ||
     state.status === 'form-submitted' ||
+    state.status === 'form-with-error' ||
     state.status === 'form-initiating-tx';
 
   const voteTypes: { value: VoteType; label: string }[] = [
@@ -149,12 +160,12 @@ function VotingPowerDelegation({
       } else {
         setState({
           ...state,
-          txInitError: result.error,
+          txInitError: result.errorCode,
           status: 'form-with-error',
         });
       }
     })();
-  }, [initiateTransaction, state]);
+  }, [initiateTransaction, intl, state]);
 
   return (
     <>
@@ -252,6 +263,13 @@ function VotingPowerDelegation({
               }
             />
           )}
+
+          {state.status === 'form-with-error' && (
+            <p className={styles.generalError}>
+              {intl.formatMessage(mapOfTxErrorCodeToIntl[state.txInitError])}
+            </p>
+          )}
+
           <Button
             label={intl.formatMessage(messages.submitLabel)}
             className={styles.voteSubmit}
@@ -263,10 +281,6 @@ function VotingPowerDelegation({
               });
             }}
           />
-
-          {state.status === 'form-with-error' && (
-            <p className={styles.generalError}>{state.txInitError}</p>
-          )}
         </BorderedBox>
       </div>
       {state.status === 'confirmation' &&

diff --git a/...p/components/voting/voting-governance/VotingPowerDelegationConfirmationDialog.messages.ts b/...p/components/voting/voting-governance/VotingPowerDelegationConfirmationDialog.messages.ts
@@ -0,0 +1,40 @@
+import { defineMessages } from 'react-intl';
+
+export const messages = defineMessages({
+  vote: {
+    id: 'voting.governance.confirmationDialog.vote',
+    defaultMessage: '!!!Vote',
+    description: 'Vote title',
+  },
+  fee: {
+    id: 'voting.governance.confirmationDialog.fee',
+    defaultMessage: '!!!Transaction fee',
+    description: 'Fee title',
+  },
+  password: {
+    id: 'voting.governance.confirmationDialog.password',
+    defaultMessage: '!!!Spending password',
+    description: 'Label for password input',
+  },
+  errorGeneric: {
+    id: 'voting.governance.confirmationDialog.error.generic',
+    defaultMessage:
+      '!!!Something went wrong during transaction submission. Please try again in a few minutes.',
+    description: 'Generic error message',
+  },
+  errorPassword: {
+    id: 'voting.governance.confirmationDialog.error.password',
+    defaultMessage: '!!!Wrong password, please try again',
+    description: 'Wrong password error message',
+  },
+  buttonCancel: {
+    id: 'voting.governance.confirmationDialog.button.cancel',
+    defaultMessage: '!!!Cancel',
+    description: 'Cancel button',
+  },
+  buttonConfirm: {
+    id: 'voting.governance.confirmationDialog.button.confirm',
+    defaultMessage: '!!!Confirm',
+    description: 'Confirm button',
+  },
+});
diff --git a/...erer/app/components/voting/voting-governance/VotingPowerDelegationConfirmationDialog.scss b/...erer/app/components/voting/voting-governance/VotingPowerDelegationConfirmationDialog.scss
@@ -16,5 +16,6 @@
 }
 
 .error {
+  margin-top: 24px;
   @include error-message;
 }
diff --git a/...derer/app/components/voting/voting-governance/VotingPowerDelegationConfirmationDialog.tsx b/...derer/app/components/voting/voting-governance/VotingPowerDelegationConfirmationDialog.tsx
@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import BigNumber from 'bignumber.js';
+import { injectIntl } from 'react-intl';
 import { Input } from 'react-polymorph/lib/components/Input';
 import { InputSkin } from 'react-polymorph/lib/skins/simple/InputSkin';
 import Dialog from '../../widgets/Dialog';
@@ -8,10 +9,21 @@ import { formattedWalletAmount } from '../../../utils/formatters';
 import Wallet, { HwDeviceStatus } from '../../../domains/Wallet';
 import HardwareWalletStatus from '../../hardware-wallet/HardwareWalletStatus';
 import styles from './VotingPowerDelegationConfirmationDialog.scss';
+import { DelegateVotesError } from '../../../stores/VotingStore';
+import type { Intl } from '../../../types/i18nTypes';
+import { messages } from './VotingPowerDelegationConfirmationDialog.messages';
+
+const mapOfTxErrorCodeToIntl: Record<
+  DelegateVotesError,
+  typeof messages[keyof typeof messages]
+> = {
+  generic: messages.errorGeneric,
+  wrong_encryption_passphrase: messages.errorPassword,
+};
 
 export type VotingPowerDelegationConfirmationDialogState =
   | {
-      error?: string;
+      error?: DelegateVotesError;
       passphrase: string;
       status: 'awaiting';
     }
@@ -25,20 +37,24 @@ type VotingPowerDelegationConfirmationDialogProps = {
   chosenOption: string;
   fees: BigNumber;
   hwDeviceStatus: HwDeviceStatus;
+  intl: Intl;
   isTrezor: boolean;
   onClose: () => void;
   onExternalLinkClick: (...args: Array<any>) => any;
   onSubmit: (
     passphrase?: string
-  ) => Promise<{ success: true } | { success: false; error: string }>;
+  ) => Promise<
+    { success: true } | { success: false; errorCode: DelegateVotesError }
+  >;
   redirectToWallet: (walletId: string) => void;
   selectedWallet: Wallet;
 };
 
-export function VotingPowerDelegationConfirmationDialog({
+function VotingPowerDelegationConfirmationDialog({
   chosenOption,
   fees,
   hwDeviceStatus,
+  intl,
   isTrezor,
   onClose,
   onExternalLinkClick,
@@ -72,23 +88,23 @@ export function VotingPowerDelegationConfirmationDialog({
 
       setState({
         ...state,
-        error: result.error,
+        error: result.errorCode,
         status: 'awaiting',
       });
     })();
-  }, [onSubmit, redirectToWallet, state]);
+  }, [intl, onSubmit, redirectToWallet, state]);
 
   return (
     <Dialog
       title={'Confirm transaction'}
       actions={[
         {
-          label: 'Cancel',
+          label: intl.formatMessage(messages.buttonCancel),
           onClick: onClose,
           disabled: state.status === 'submitting',
         },
         {
-          label: 'Confirm',
+          label: intl.formatMessage(messages.buttonConfirm),
           onClick: () => {
             if (state.status !== 'awaiting' || !state.passphrase) return;
             setState({
@@ -104,10 +120,14 @@ export function VotingPowerDelegationConfirmationDialog({
       closeButton={<DialogCloseButton onClose={onClose} />}
     >
       <div className={styles.content}>
-        <p className={styles.paragraphTitle}>Vote</p>
+        <p className={styles.paragraphTitle}>
+          {intl.formatMessage(messages.vote)}
+        </p>
         <p className={styles.paragraphValue}>{chosenOption}</p>
 
-        <p className={styles.paragraphTitle}>Transaction fee</p>
+        <p className={styles.paragraphTitle}>
+          {intl.formatMessage(messages.fee)}
+        </p>
         <p className={styles.paragraphValue}>{formattedWalletAmount(fees)}</p>
 
         {selectedWallet.isHardwareWallet ? (
@@ -130,13 +150,19 @@ export function VotingPowerDelegationConfirmationDialog({
             }}
             disabled={state.status !== 'awaiting'}
             type={'password'}
-            label={'Spending password'}
+            label={intl.formatMessage(messages.password)}
             skin={InputSkin}
           />
         )}
 
-        {'error' in state && <p className={styles.error}>{state.error}</p>}
+        {'error' in state && (
+          <p className={styles.error}>
+            {intl.formatMessage(mapOfTxErrorCodeToIntl[state.error])}
+          </p>
+        )}
       </div>
     </Dialog>
   );
 }
+
+export default injectIntl(VotingPowerDelegationConfirmationDialog);
diff --git a/source/renderer/app/containers/voting/VotingGovernancePage.tsx b/source/renderer/app/containers/voting/VotingGovernancePage.tsx
@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import { inject, observer } from 'mobx-react';
 import type { InjectedProps } from '../../types/injectedPropsType';
 import VotingPowerDelegation from '../../components/voting/voting-governance/VotingPowerDelegation';
-import { VotingPowerDelegationConfirmationDialog } from '../../components/voting/voting-governance/VotingPowerDelegationConfirmationDialog';
+import VotingPowerDelegationConfirmationDialog from '../../components/voting/voting-governance/VotingPowerDelegationConfirmationDialog';
 import { ROUTES } from '../../routes-config';
 
 type Props = InjectedProps;
@@ -27,7 +27,7 @@ class VotingGovernancePage extends Component<Props> {
     return (
       <VotingPowerDelegation
         onExternalLinkClick={openExternalLink}
-        initiateTransaction={voting.initializeTx}
+        initiateTransaction={voting.initializeVPDelegationTx}
         wallets={wallets.all}
         stakePools={staking.stakePools}
         getStakePoolById={staking.getStakePoolById}

diff --git a/source/renderer/app/i18n/locales/en-US.json b/source/renderer/app/i18n/locales/en-US.json
@@ -733,6 +733,15 @@
   "voting.governance.selectWalletLabel": "Select a wallet to delegate from",
   "voting.governance.selectWalletPlaceholder": "Select a wallet …",
   "voting.governance.submitLabel": "Submit",
+  "voting.governance.initializeTxError.generic": "Something went wrong during transaction initialization. Please try again in a few minutes. ",
+  "voting.governance.initializeTxError.sameVote": "This voting power delegation choice has already been successfully recorded in a previous transaction. Please change the registration type or DRep ID in order to proceed.",
+  "voting.governance.confirmationDialog.vote": "Vote",
+  "voting.governance.confirmationDialog.fee": "Transaction fee",
+  "voting.governance.confirmationDialog.password":  "Spending password",
+  "voting.governance.confirmationDialog.error.generic": "Something went wrong during transaction submission. Please try again in a few minutes.",
+  "voting.governance.confirmationDialog.error.password":  "Wrong password, please try again",
+  "voting.governance.confirmationDialog.button.cancel": "Cancel",
+  "voting.governance.confirmationDialog.button.confirm":  "Confirm",
   "voting.info.androidAppButtonUrl": "https://play.google.com/store/apps/details?id=io.iohk.vitvoting",
   "voting.info.appleAppButtonUrl": "https://apps.apple.com/in/app/catalyst-voting/id1517473397",
   "voting.info.learnMoreLinkLabel": "Learn more",
-Original file line number
+Diff line change
@@ Expand Up / @@ -1292,7 +1292,6 @@ export default class AdaApi { @@
           logger.debug('AdaApi::constructTransaction error', {
             error,
           });
-          console.log('!DEBUG', error);
           throw new ApiError(error);
         }
@@ Expand Down @@