Merge remote-tracking branch 'refs/remotes/origin/koni/dev/issue-174'…

… into story-protocol-od-dev

packages/extension-base/src/services/wallet-connect-service/constants.ts

@@ -4,6 +4,7 @@
 import { EIP155_SIGNING_METHODS, POLKADOT_SIGNING_METHODS, WalletConnectSigningMethod } from '@subwallet/extension-base/services/wallet-connect-service/types';
 import { targetIsMobile } from '@subwallet/extension-base/utils';
 import { SignClientTypes } from '@walletconnect/types';
+import { getSdkError } from '@walletconnect/utils';
 
 export const PROJECT_ID_EXTENSION = '34a107037c2b8381bb2477e7f04569c0';
 export const PROJECT_ID_MOBILE = '34a107037c2b8381bb2477e7f04569c0';
@@ -43,3 +44,6 @@ export const WALLET_CONNECT_SUPPORT_NAMESPACES: string[] = [WALLET_CONNECT_EIP15
 export const WC_REQUIRE_CHAIN_IDS: number[] = [1516];
 export const WC_OPTIONAL_CHAIN_IDS: number[] = [];
 export const WC_DEFAULT_CHAIN_ID = 1516;
+
+export const WC_USER_REJECT_CODE = getSdkError('USER_REJECTED').code;
+export const WC_USER_REJECT_MESSAGE = getSdkError('USER_REJECTED').message;

packages/extension-koni-ui/src/Popup/Confirmations/index.tsx

@@ -11,6 +11,7 @@ import { useAlert, useConfirmationsInfo, useSelector } from '@subwallet/extensio
 import { ConfirmationType } from '@subwallet/extension-koni-ui/stores/base/RequestState';
 import { AccountSignMode, ThemeProps } from '@subwallet/extension-koni-ui/types';
 import { getSignMode, isRawPayload } from '@subwallet/extension-koni-ui/utils';
+import CN from 'classnames';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import styled from 'styled-components';
@@ -241,7 +242,7 @@ const Component = function ({ className }: Props) {
         case ExtrinsicType.SWAP:
           return t('Swap confirmation');
         case ExtrinsicType.MINT_NFT:
-          return t('Mint NFT confirmation');
+          return t('Confirm your mint');
         case ExtrinsicType.CROWDLOAN:
         case ExtrinsicType.EVM_EXECUTE:
         case ExtrinsicType.UNKNOWN:
@@ -255,6 +256,12 @@ const Component = function ({ className }: Props) {
     }
   }, [confirmation, t, transactionRequest]);
 
+  const confirmationClassName = useMemo(() => {
+    return CN(className, {
+      'confirm-your-mint': !!confirmation && transactionRequest[confirmation.item.id]?.extrinsicType === ExtrinsicType.MINT_NFT
+    });
+  }, [className, confirmation, transactionRequest]);
+
   useEffect(() => {
     if (numberOfConfirmations) {
       if (index >= numberOfConfirmations) {
@@ -265,7 +272,7 @@ const Component = function ({ className }: Props) {
 
   return (
     <>
-      <div className={className}>
+      <div className={confirmationClassName}>
         <ConfirmationHeader
           index={index}
           numberOfConfirmations={numberOfConfirmations}

packages/extension-koni-ui/src/Popup/Confirmations/parts/Sign/Evm.tsx

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { ConfirmationDefinitions, ConfirmationResult, EvmSendTransactionRequest, ExtrinsicType } from '@subwallet/extension-base/background/KoniTypes';
-import { WC_DEFAULT_CHAIN_ID } from '@subwallet/extension-base/services/wallet-connect-service/constants';
+import { WC_DEFAULT_CHAIN_ID, WC_USER_REJECT_MESSAGE } from '@subwallet/extension-base/services/wallet-connect-service/constants';
 import { CONFIRMATION_QR_MODAL } from '@subwallet/extension-koni-ui/constants/modal';
 import { InjectContext } from '@subwallet/extension-koni-ui/contexts/InjectContext';
 import { WalletConnectContext } from '@subwallet/extension-koni-ui/contexts/WalletConnectContext';
@@ -234,16 +234,27 @@ const Component: React.FC<Props> = (props: Props) => {
       .catch((e) => {
         const error = e as Error;
 
+        if (error.message.toLowerCase().includes(WC_USER_REJECT_MESSAGE.toLowerCase())) {
+          notify({
+            message: t('You’ve rejected this request'),
+            type: 'error',
+            duration: null
+          });
+        } else {
+          notify({
+            message: error.message,
+            type: 'error',
+            duration: null
+          });
+        }
+
         closeWaiting();
-        notify({
-          message: error.message,
-          type: 'error'
-        });
+        onCancel();
       })
       .finally(() => {
         setLoading(false);
       });
-  }, [isMessage, openWaiting, payload.payload, account.address, chainId, closeWaiting, onApproveSignature, notify]);
+  }, [isMessage, openWaiting, payload.payload, account.address, chainId, closeWaiting, onApproveSignature, notify, t, onCancel]);
 
   const onConfirm = useCallback(() => {
     removeTransactionPersist(extrinsicType);

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, SendNftTransactionConfirmation, SwapTransactionConfirmation, TokenApproveConfirmation, TransferBlock, UnbondTransactionConfirmation, WithdrawTransactionConfirmation } from './variants';
+import { BaseTransactionConfirmation, BondTransactionConfirmation, CancelUnstakeTransactionConfirmation, ClaimRewardTransactionConfirmation, DefaultWithdrawTransactionConfirmation, FastWithdrawTransactionConfirmation, JoinPoolTransactionConfirmation, JoinYieldPoolConfirmation, LeavePoolTransactionConfirmation, MintNftConfirmation, SendNftTransactionConfirmation, SwapTransactionConfirmation, TokenApproveConfirmation, TransferBlock, UnbondTransactionConfirmation, WithdrawTransactionConfirmation } from './variants';
 
 interface Props extends ThemeProps {
   confirmation: ConfirmationQueueItem;
@@ -74,6 +74,7 @@ const getTransactionComponent = (extrinsicType: ExtrinsicType): typeof BaseTrans
     case ExtrinsicType.SWAP:
       return SwapTransactionConfirmation;
     case ExtrinsicType.MINT_NFT:
+      return MintNftConfirmation;
     case ExtrinsicType.CROWDLOAN:
     case ExtrinsicType.STAKING_CANCEL_COMPOUNDING:
     case ExtrinsicType.STAKING_COMPOUNDING:
@@ -124,11 +125,15 @@ const Component: React.FC<Props> = (props: Props) => {
     return undefined;
   }, [transaction.data, transaction.extrinsicType]);
 
+  const isMintNFTConfirmation = useMemo(() => {
+    return transaction.extrinsicType === ExtrinsicType.MINT_NFT;
+  }, [transaction.extrinsicType]);
+
   return (
     <>
       <div className={CN(className, 'confirmation-content')}>
         {renderContent(transaction)}
-        {!!transaction.estimateFee?.tooHigh && (
+        {!isMintNFTConfirmation && !!transaction.estimateFee?.tooHigh && (
           <AlertBox
             className='network-box'
             description={t('Gas fees on {{networkName}} are high due to high demands, so gas estimates are less accurate.', { replace: { networkName: network?.name } })}

packages/extension-koni-ui/src/Popup/Confirmations/variants/Transaction/variants/MintNftConfirmation.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 minting the Koni Story badge 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 MintNftConfirmation = 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 MintNftConfirmation;

packages/extension-koni-ui/src/Popup/Confirmations/variants/Transaction/variants/index.tsx

@@ -16,5 +16,6 @@ export { default as FastWithdrawTransactionConfirmation } from './FastWithdraw';
 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 * from './TransferBlock';

packages/extension-koni-ui/src/components/Layout/base/Base.tsx

@@ -14,7 +14,6 @@ import { useTranslation } from 'react-i18next';
 import { useLocation, useNavigate } from 'react-router-dom';
 import styled from 'styled-components';
 
-import useNotification from '../../../hooks/common/useNotification';
 import SelectAccount from '../parts/SelectAccount';
 
 export interface LayoutBaseProps extends Omit<
@@ -37,7 +36,6 @@ const Component = ({ backgroundImages, backgroundStyle, children, className, hea
   const { pathname } = useLocation();
   const { t } = useTranslation();
   const { language } = useSelector((state) => state.settings);
-  const notify = useNotification();
 
   const tabBarItems = useMemo((): TabItemType[] => ([
     // {
@@ -186,17 +184,9 @@ const Component = ({ backgroundImages, backgroundStyle, children, className, hea
 
   const onSelectTab = useCallback(
     (item: TabItemType) => () => {
-      if (item.key === 'mint') {
-        notify({
-          message: 'Coming soon!'
-        });
-
-        return;
-      }
-
       navigate(item.url);
     },
-    [navigate, notify]
+    [navigate]
   );
 
   const defaultOnBack = useCallback(() => {