[Issue-213] Update some UX for Missions

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 {

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;
   }

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<BaseTransactionConfirmationProps> = (props: BaseTransactionConfirmationProps) => {
+  const { className, transaction } = props;
+
+  const { t } = useTranslation();
+  const { token } = useTheme() as Theme;
+
+  return (
+    <div className={CN(className)}>
+      <div className='page-icon-overide'>
+        <PageIcon
+          color='#000'
+          iconProps={{
+            phosphorIcon: CheckCircle,
+            weight: 'fill'
+          }}
+        />
+      </div>
+      <div className='__congratulation-text'>
+        {t('You’re performing an on-chain check-in transaction with this account')}
+      </div>
+      <Field
+        className={'__address-field'}
+        content={toShort(transaction.address, 10, 16)}
+        suffix={(
+          <Icon
+            iconColor={token.colorSuccess}
+            phosphorIcon={CheckCircle}
+            size='sm'
+            weight='fill'
+          />
+        )}
+      />
+    </div>
+  );
+};
+
+const RemarkWithEvent = styled(Component)<BaseTransactionConfirmationProps>(({ 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;

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';

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,