From c132d55a9ec7c41a452be23f11548d6328783c56 Mon Sep 17 00:00:00 2001 From: lw Date: Fri, 29 Nov 2024 17:01:53 +0700 Subject: [PATCH] [Issue-213] Update some UX for Missions --- .../src/Popup/Confirmations/index.tsx | 3 +- .../variants/Transaction/index.tsx | 5 +- .../Transaction/variants/RemarkWithEvent.tsx | 76 +++++++++++++++++++ .../variants/Transaction/variants/index.tsx | 1 + .../src/Popup/Home/Mission/TaskItem.tsx | 11 ++- 5 files changed, 92 insertions(+), 4 deletions(-) create mode 100644 packages/extension-koni-ui/src/Popup/Confirmations/variants/Transaction/variants/RemarkWithEvent.tsx diff --git a/packages/extension-koni-ui/src/Popup/Confirmations/index.tsx b/packages/extension-koni-ui/src/Popup/Confirmations/index.tsx index fadc6fd047..976a9b74f0 100644 --- a/packages/extension-koni-ui/src/Popup/Confirmations/index.tsx +++ b/packages/extension-koni-ui/src/Popup/Confirmations/index.tsx @@ -243,10 +243,11 @@ const Component = function ({ className }: Props) { return t('Swap confirmation'); case ExtrinsicType.MINT_NFT: return t('Confirm your mint'); + case ExtrinsicType.REMARK_WITH_EVENT: + return t('Approve your transaction'); case ExtrinsicType.CROWDLOAN: case ExtrinsicType.EVM_EXECUTE: case ExtrinsicType.UNKNOWN: - case ExtrinsicType.REMARK_WITH_EVENT: return t('Transaction confirm'); } } else { diff --git a/packages/extension-koni-ui/src/Popup/Confirmations/variants/Transaction/index.tsx b/packages/extension-koni-ui/src/Popup/Confirmations/variants/Transaction/index.tsx index 5b95b69c6d..fa449872d0 100644 --- a/packages/extension-koni-ui/src/Popup/Confirmations/variants/Transaction/index.tsx +++ b/packages/extension-koni-ui/src/Popup/Confirmations/variants/Transaction/index.tsx @@ -16,7 +16,7 @@ import { useSelector } from 'react-redux'; import styled from 'styled-components'; import { EvmSignArea, SubstrateSignArea } from '../../parts/Sign'; -import { BaseTransactionConfirmation, BondTransactionConfirmation, CancelUnstakeTransactionConfirmation, ClaimRewardTransactionConfirmation, DefaultWithdrawTransactionConfirmation, FastWithdrawTransactionConfirmation, JoinPoolTransactionConfirmation, JoinYieldPoolConfirmation, LeavePoolTransactionConfirmation, MintNftConfirmation, SendNftTransactionConfirmation, SwapTransactionConfirmation, TokenApproveConfirmation, TransferBlock, UnbondTransactionConfirmation, WithdrawTransactionConfirmation } from './variants'; +import { BaseTransactionConfirmation, BondTransactionConfirmation, CancelUnstakeTransactionConfirmation, ClaimRewardTransactionConfirmation, DefaultWithdrawTransactionConfirmation, FastWithdrawTransactionConfirmation, JoinPoolTransactionConfirmation, JoinYieldPoolConfirmation, LeavePoolTransactionConfirmation, MintNftConfirmation, RemarkWithEvent, SendNftTransactionConfirmation, SwapTransactionConfirmation, TokenApproveConfirmation, TransferBlock, UnbondTransactionConfirmation, WithdrawTransactionConfirmation } from './variants'; interface Props extends ThemeProps { confirmation: ConfirmationQueueItem; @@ -75,11 +75,12 @@ const getTransactionComponent = (extrinsicType: ExtrinsicType): typeof BaseTrans return SwapTransactionConfirmation; case ExtrinsicType.MINT_NFT: return MintNftConfirmation; + case ExtrinsicType.REMARK_WITH_EVENT: + return RemarkWithEvent; case ExtrinsicType.CROWDLOAN: case ExtrinsicType.STAKING_CANCEL_COMPOUNDING: case ExtrinsicType.STAKING_COMPOUNDING: case ExtrinsicType.EVM_EXECUTE: - case ExtrinsicType.REMARK_WITH_EVENT: case ExtrinsicType.UNKNOWN: return BaseTransactionConfirmation; } diff --git a/packages/extension-koni-ui/src/Popup/Confirmations/variants/Transaction/variants/RemarkWithEvent.tsx b/packages/extension-koni-ui/src/Popup/Confirmations/variants/Transaction/variants/RemarkWithEvent.tsx new file mode 100644 index 0000000000..6647648302 --- /dev/null +++ b/packages/extension-koni-ui/src/Popup/Confirmations/variants/Transaction/variants/RemarkWithEvent.tsx @@ -0,0 +1,76 @@ +// Copyright 2019-2022 @subwallet/extension-koni-ui authors & contributors +// SPDX-License-Identifier: Apache-2.0 + +import { SWTransactionResult } from '@subwallet/extension-base/services/transaction-service/types'; +import { useTranslation } from '@subwallet/extension-koni-ui/hooks'; +import { AlertDialogProps, Theme, ThemeProps } from '@subwallet/extension-koni-ui/types'; +import { toShort } from '@subwallet/extension-koni-ui/utils'; +import { Field, Icon, PageIcon } from '@subwallet/react-ui'; +import CN from 'classnames'; +import { CheckCircle } from 'phosphor-react'; +import React from 'react'; +import styled, { useTheme } from 'styled-components'; + +export interface BaseTransactionConfirmationProps extends ThemeProps { + transaction: SWTransactionResult; + openAlert: (alertProps: AlertDialogProps) => void; + closeAlert: VoidFunction; +} + +const Component: React.FC = (props: BaseTransactionConfirmationProps) => { + const { className, transaction } = props; + + const { t } = useTranslation(); + const { token } = useTheme() as Theme; + + return ( +
+
+ +
+
+ {t('You’re performing an on-chain check-in transaction with this account')} +
+ + )} + /> +
+ ); +}; + +const RemarkWithEvent = styled(Component)(({ theme: { token } }: BaseTransactionConfirmationProps) => { + return { + background: 'linear-gradient(117deg, #FFD8E6 9.05%, #BCEBFF 91.43%)', + borderRadius: 24, + display: 'flex', + gap: token.size, + textAlign: 'center', + flexDirection: 'column', + alignItems: 'center', + padding: '24px 20px', + + '.__congratulation-text': { + fontSize: token.fontSizeSM, + fontWeight: token.bodyFontWeight, + lineHeight: token.lineHeightSM, + color: token.colorTextDark1 + } + }; +}); + +export default RemarkWithEvent; diff --git a/packages/extension-koni-ui/src/Popup/Confirmations/variants/Transaction/variants/index.tsx b/packages/extension-koni-ui/src/Popup/Confirmations/variants/Transaction/variants/index.tsx index 1dd8814b15..21117b76a9 100644 --- a/packages/extension-koni-ui/src/Popup/Confirmations/variants/Transaction/variants/index.tsx +++ b/packages/extension-koni-ui/src/Popup/Confirmations/variants/Transaction/variants/index.tsx @@ -17,5 +17,6 @@ export { default as JoinYieldPoolConfirmation } from './JoinYieldPool'; export { default as TokenApproveConfirmation } from './TokenApprove'; export { default as SwapTransactionConfirmation } from './Swap'; export { default as MintNftConfirmation } from './MintNftConfirmation'; +export { default as RemarkWithEvent } from './RemarkWithEvent'; export * from './TransferBlock'; diff --git a/packages/extension-koni-ui/src/Popup/Home/Mission/TaskItem.tsx b/packages/extension-koni-ui/src/Popup/Home/Mission/TaskItem.tsx index 031f86068c..84a6450d9c 100644 --- a/packages/extension-koni-ui/src/Popup/Home/Mission/TaskItem.tsx +++ b/packages/extension-koni-ui/src/Popup/Home/Mission/TaskItem.tsx @@ -202,7 +202,16 @@ const _TaskItem = ({ actionReloadPoint, className, openWidget, reloadTask, task } catch (error) { console.error(error); setTaskLoading(false); - const message = t((error as Error)?.message || ''); + let message = t((error as Error)?.message || ''); + + if (message.toLowerCase().includes('Rejected by user'.toLowerCase())) { + // no need to handle ''Rejected by user' here + return; + } + + if (message.toLowerCase().includes('Returned error: insufficient funds'.toLowerCase())) { + message = t('You don’t have enough IP to check-in. Get faucet and try again'); + } notify({ message: message,