From ffa505f41923be473d989a891fe03e39243b9e44 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=B8ren=20Bruus=20Zeppelin?= Date: Thu, 24 Oct 2024 14:10:21 +0200 Subject: [PATCH] Handle pending/failed transactions on submission page --- .../SubmittedTransaction.scss | 12 +++++- .../SubmittedTransaction.tsx | 38 +++++++++---------- .../pages/SubmittedTransaction/i18n/en.ts | 22 +++++++++++ .../src/popup/popupX/shared/Loader/Loader.tsx | 8 +++- .../src/popup/popupX/shared/Loader/index.ts | 2 +- .../src/popup/shell/i18n/locales/en.ts | 2 + 6 files changed, 62 insertions(+), 22 deletions(-) create mode 100644 packages/browser-wallet/src/popup/popupX/pages/SubmittedTransaction/i18n/en.ts diff --git a/packages/browser-wallet/src/popup/popupX/pages/SubmittedTransaction/SubmittedTransaction.scss b/packages/browser-wallet/src/popup/popupX/pages/SubmittedTransaction/SubmittedTransaction.scss index 7358d59ed..1406b5890 100644 --- a/packages/browser-wallet/src/popup/popupX/pages/SubmittedTransaction/SubmittedTransaction.scss +++ b/packages/browser-wallet/src/popup/popupX/pages/SubmittedTransaction/SubmittedTransaction.scss @@ -12,7 +12,7 @@ margin: rem(8px) 0; } - svg { + svg, .loader-x { margin-bottom: rem(30px); } } @@ -20,4 +20,14 @@ &__details-btn { margin-top: rem(24px); } + + &__failed-icon { + width: rem(48px); + height: rem(48px); + margin-bottom: rem(18px) !important; + + & path { + fill: $color-red-attention !important; + } + } } diff --git a/packages/browser-wallet/src/popup/popupX/pages/SubmittedTransaction/SubmittedTransaction.tsx b/packages/browser-wallet/src/popup/popupX/pages/SubmittedTransaction/SubmittedTransaction.tsx index 866cf43de..7013a226d 100644 --- a/packages/browser-wallet/src/popup/popupX/pages/SubmittedTransaction/SubmittedTransaction.tsx +++ b/packages/browser-wallet/src/popup/popupX/pages/SubmittedTransaction/SubmittedTransaction.tsx @@ -2,6 +2,7 @@ import React from 'react'; import { Navigate, useNavigate, useParams } from 'react-router-dom'; import CheckCircle from '@assets/svgX/check-circle.svg'; +import Cross from '@assets/svgX/close.svg'; import Arrow from '@assets/svgX/arrow-right.svg'; import Button from '@popup/popupX/shared/Button'; import Page from '@popup/popupX/shared/Page'; @@ -26,12 +27,15 @@ import { import { useAtomValue } from 'jotai'; import { grpcClientAtom } from '@popup/store/settings'; import { formatCcdAmount } from '@popup/popupX/shared/utils/helpers'; +import { LoaderInline } from '@popup/popupX/shared/Loader'; +import { useTranslation } from 'react-i18next'; const TX_TIMEOUT = 60 * 1000; // 1 minute type DelegationBodyProps = BaseAccountTransactionSummary & ConfigureDelegationSummary; function DelegationBody({ events }: DelegationBodyProps) { + const { t } = useTranslation('x', { keyPrefix: 'submittedTransaction.success.configureDelegation' }); const stakeChange = events.find((e) => [TransactionEventTag.DelegationStakeIncreased, TransactionEventTag.DelegationStakeDecreased].includes(e.tag) ) as DelegationStakeChangedEvent | undefined; @@ -39,7 +43,7 @@ function DelegationBody({ events }: DelegationBodyProps) { if (stakeChange !== undefined) { return ( <> - You’ve delegated + {t('changeStake')} {formatCcdAmount(stakeChange.newStake)} CCD @@ -51,10 +55,10 @@ function DelegationBody({ events }: DelegationBodyProps) { | undefined; if (removal !== undefined) { - return You’ve removed your delegated stake; + return {t('removed')}; } - return You’ve updated your delegation settings; + return {t('updated')}; } type SuccessSummary = Exclude; @@ -69,16 +73,15 @@ type SuccessProps = { tx: SuccessSummary; }; -// TODO: -// 1. Handle delegation transaction case function Success({ tx }: SuccessProps) { + const { t } = useTranslation('x', { keyPrefix: 'submittedTransaction' }); return ( <> {tx.transactionType === TransactionKindString.Transfer && ( <> - You’ve sent - 12,600.00 + {t('success.transfer.label')} + {formatCcdAmount(tx.transfer.amount)} CCD )} @@ -90,24 +93,21 @@ type FailureProps = { message: string; }; -// TODO: -// 1. Proper error icon function Failure({ message }: FailureProps) { return ( <> - + {message} ); } -// TODO: -// 1. Proper error icon function Finalizing() { + const { t } = useTranslation('x', { keyPrefix: 'submittedTransaction' }); return ( <> - - Finalizing on chain + + {t('pending.label')} ); } @@ -117,7 +117,9 @@ export type SubmittedTransactionParams = { transactionHash: HexString; }; +/** Component displaying the status of a submitted transaction. Must be given a transaction hash as a route parameter */ export default function SubmittedTransaction() { + const { t } = useTranslation('x', { keyPrefix: 'submittedTransaction' }); const { transactionHash } = useParams(); const nav = useNavigate(); const grpc = useAtomValue(grpcClientAtom); @@ -157,22 +159,20 @@ export default function SubmittedTransaction() { return ; } - // FIXME: - // 1. translations... return ( {status === undefined && } {status?.type === 'success' && } {status?.type === 'failure' && ( - + )} {status?.type === 'error' && } {status?.type !== undefined && status.type !== 'error' && ( } - label="Transaction details" + label={t('detailsButton')} className="submitted-tx__details-btn" leftLabel onClick={() => nav(transactionDetailsRoute(status.summary.sender, status.summary.hash))} @@ -182,7 +182,7 @@ export default function SubmittedTransaction() { nav(absoluteRoutes.home.path)} - label="Return to Account" + label={t('continue')} /> diff --git a/packages/browser-wallet/src/popup/popupX/pages/SubmittedTransaction/i18n/en.ts b/packages/browser-wallet/src/popup/popupX/pages/SubmittedTransaction/i18n/en.ts new file mode 100644 index 000000000..8d1b514a9 --- /dev/null +++ b/packages/browser-wallet/src/popup/popupX/pages/SubmittedTransaction/i18n/en.ts @@ -0,0 +1,22 @@ +const t = { + success: { + configureDelegation: { + changeStake: "You've delegated", + removed: "You've removed your delegated stake", + updated: "You've updated your delegation settings", + }, + transfer: { + label: "You've sent", + }, + }, + pending: { + label: 'Transaction in progress', + }, + failure: { + label: 'The transaction failed: {{reason}}', + }, + detailsButton: 'Transaction details', + continue: 'Return to account', +}; + +export default t; diff --git a/packages/browser-wallet/src/popup/popupX/shared/Loader/Loader.tsx b/packages/browser-wallet/src/popup/popupX/shared/Loader/Loader.tsx index 35a4c7341..607cdb93c 100644 --- a/packages/browser-wallet/src/popup/popupX/shared/Loader/Loader.tsx +++ b/packages/browser-wallet/src/popup/popupX/shared/Loader/Loader.tsx @@ -1,9 +1,15 @@ +import clsx from 'clsx'; import React from 'react'; +import { ClassName } from 'wallet-common-helpers'; + +export function LoaderInline({ className }: ClassName) { + return ; +} export default function Loader() { return (
- +
); } diff --git a/packages/browser-wallet/src/popup/popupX/shared/Loader/index.ts b/packages/browser-wallet/src/popup/popupX/shared/Loader/index.ts index 348c02a98..70ad52a7b 100644 --- a/packages/browser-wallet/src/popup/popupX/shared/Loader/index.ts +++ b/packages/browser-wallet/src/popup/popupX/shared/Loader/index.ts @@ -1 +1 @@ -export { default } from './Loader'; +export { default, LoaderInline } from './Loader'; diff --git a/packages/browser-wallet/src/popup/shell/i18n/locales/en.ts b/packages/browser-wallet/src/popup/shell/i18n/locales/en.ts index 8b6dd2cef..8f906902c 100644 --- a/packages/browser-wallet/src/popup/shell/i18n/locales/en.ts +++ b/packages/browser-wallet/src/popup/shell/i18n/locales/en.ts @@ -48,6 +48,7 @@ import header from '@popup/popupX/page-layouts/MainLayout/Header/i18n/en'; import web3Id from '@popup/popupX/pages/Web3Id/i18n/en'; import earn from '@popup/popupX/pages/EarningRewards/i18n/en'; import connectionRequestX from '@popup/popupX/pages/prompts/ConnectionRequest/i18n/en'; +import submittedTransaction from '@popup/popupX/pages/SubmittedTransaction/i18n/en'; const t = { shared, @@ -99,6 +100,7 @@ const t = { web3Id, earn, prompts: { connectionRequestX }, + submittedTransaction, }, };